div {
  box-sizing: border-box;
}

body {
  background: #009be6;
  margin    : 0;
}

.body-div {
  position          : absolute;
  padding-top       : 100px;
  left              : 0;
  right             : 0;
  /* width          : 100vw; */
  display           : flex;
  flex-direction    : column;
  justify-content   : center;
  overflow          : hidden;
  background        : #3499e1 !important;
}

.body-div a:hover {
  color          : #fff;
  text-decoration: none;
}

.header-wrapper {
  position               : fixed;
  top                    : 0;
  left                   : 0;
  right                  : 0;
  z-index                : 2;
  width                  : 100vw;
  background             : #3499e1;
  box-shadow             : 0 0 15px #3499e1;
  background             : #3499e1cc;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter        : blur(10px);
}

.header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  max-width      : 1200px;
  padding        : 50px 20px 30px 20px;
  margin         : 0 auto;
  width          : 100%;
  color          : #fff;

  width: 100%;
}

.header-main {
  display    : flex;
  align-items: center;
}

.header-main span {
  margin-right: 20px;
}

.header__operations {
  display    : flex;
  align-items: center;
}

.header a {
  display        : inline-flex;
  align-items    : center;
  color          : #fff;
  margin         : 0 10px;
  text-decoration: none;
}

.header a span {
  margin-left: 10px;
}

.search-section {
  display: flex;
  width  : 502px;
  margin : 38px auto 60px auto;
}

.search-section input {
  background               : #fff;
  height                   : 47px;
  line-height              : 47px;
  font-size                : 18px;
  border-top-left-radius   : 25px;
  border-bottom-left-radius: 25px;
  width                    : 400px;
  padding                  : 0 20px;
  box-shadow               : 0px 3px 5px 0px rgba(0, 0, 0, 0.5) inset;
  border                   : none;
  outline                  : none;
}

.search-section button {
  padding                   : 0 17px 0 15px;
  color                     : #fff;
  height                    : 47px;
  line-height               : 47px;
  font-size                 : 20px;
  background                : #f9c300;
  border                    : none;
  border-top-right-radius   : 25px;
  border-bottom-right-radius: 25px;
  outline                   : none;
}

.body {
  padding: 20px 0;
}

.body-constraint {
  max-width      : 1200px;
  margin         : 0 auto;
  display        : flex;
  justify-content: space-between;
  padding        : 30px 100px 0 100px;
}

.doctor-group-logo {
  width : 377px;
  height: 346px;
}

.doctor-group-logo img {
  width : 100%;
  height: 100%;
}

.main-section {
  position: absolute;
  top     : 460px;
  width   : 100%;
}

.envelop {
  position       : relative;
  margin-top     : -28px;
  padding        : 0;
  display        : flex;
  background     : none;
  border         : none;
  outline        : none;
  cursor         : pointer;
  display        : flex;
  justify-content: flex-start;
  flex-direction : column;
}

.envelop * {
  transition: all 0.2s;
}

.envelop:hover img:first-of-type {
  transform: translateY(-10px);
}

.envelop:hover .envelop__title {
  transform: translateY(-10px);
}

.envelop__filebag {
  position: absolute;
  top     : 100px;
  left    : -10px;
}

.envelop__title {
  position   : absolute;
  font-size  : 36px;
  line-height: 50px;
  top        : 70px;
  left       : 58px;
  font-weight: 400;
  font-family: PingFangSC;
}

.envelop__filebag-text {
  position : absolute;
  font-size: 20px;
  top      : 190px;
  left     : 100px;
}

.section-two {
  padding       : 50px 0;
  display       : flex;
  flex-direction: column;
  align-items   : center;
}

.section-two p {
  font-size  : 18px;
  line-height: 25px;
  color      : #fff;
}

.grand-button {
  background   : #f9c300;
  border-radius: 10px;
  border       : none;
  box-shadow   : 7px 6px 11px 0px rgba(0, 0, 0, 0.17);
  height       : 58px;
  line-height  : 58px;
  font-size    : 28px;
  padding      : 0 70px;
  color        : #fff;
  cursor       : pointer;
  outline      : none;
}

.grand-button:hover {
  transition: all 0.1s;
  transform : scale(1.03);
}

.qna {
  display       : flex;
  flex-direction: column;
  width         : 635px;
  height        : 329px;
}

.qna-item {
  display    : flex;
  align-items: center;
}

.qna-question__icon {
  min-width    : 30px;
  width        : 30px;
  height       : 30px;
  line-height  : 30px;
  font-size    : 18px;
  border-radius: 15px;
  background   : #009be6;
  color        : #fff;
  text-align   : center;
  margin-right : 20px;
}

.qna-item {
  display        : flex;
  align-items    : center;
  padding        : 0 20px;
  border-bottom  : solid 1px #eee;
  height         : 86px;
  justify-content: space-between;
}

.qna-question {
  display    : flex;
  align-items: center;
  color      : #404040;
  overflow   : hidden;
}

.qna-question__content {
  overflow     : hidden;
  text-overflow: ellipsis;
  white-space  : nowrap;
}

.qna-question__date {
  color      : #bfbfbf;
  margin-left: 20px;
  white-space: nowrap;
}

.inquiry-demand {
  display       : flex;
  flex-direction: column;
  margin-left   : 100px;
}

.wave-border {
  background-image : url("assets/images/wave_border.svg");
  display          : flex;
  height           : 150px;
  width            : 1450px;
  margin           : 0 auto;
  justify-content  : center;
  background-repeat: repeat-x;
  transform        : scaleX(2);
}

.access-on-phone-btn {
  position: relative;
  cursor  : default;
}

.access-on-phone-btn .qr_code_wrapper {
  /* display      : none; */
  position     : absolute;
  width        : 180px;
  height       : 180px;
  overflow     : hidden;
  border-radius: 6px;
  top          : 46px;
  right        : -20px;
  opacity      : 0;
  transition   : opacity 0.3s;
  box-shadow   : 0 0 20px #666;
  background   : #fff;
}

.access-on-phone-btn:hover .qr_code_wrapper {
  display: block;
  opacity: 1;
}

.qr_code_wrapper img {
  width : 100%;
  height: 100%;

  transform: scale(0.86);
}

.qr_code_wrapper:hover {
  display: none !important;
}