.video-wrap {
  margin-bottom: 175px;
  max-height: 700px;
  overflow: hidden;
}

.video-wrap video {
  width: 100%;
}

.main-slide-wrap {
  margin-bottom: 80px;
}

section.landing-pop {
  align-items: center;
  aspect-ratio: 16/9;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 100%;
}

section.landing-pop .block-video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

section.landing-pop video {
  height: auto;
  width: 100%;
}

section.landing-pop .video-wrap {
  align-items: center;
  display: flex;
  height: 110%;
  justify-content: center;
  margin-bottom: 0;
  overflow: hidden;
  padding-bottom: 75%;
  position: relative;
  width: 110%;
}

section.landing-pop .video-wrap-mobile {
  display: none;
}

section.landing-pop iframe {

  border: none;
  height: 100%;
  left: 50%;
  outline: none;
  position: absolute;
  top: 50%;

  transform: translate(-50%, -50%);
  width: 100%;
}

/* best */

.icon.arrow-right {
  height: 12px;
  width: 7px;
}

h2 {
  font-size: 24px;
  text-align: left;
}

h2 > span {
  display: block;
  font-size: 14px;
  font-weight: 300;
}

.best-list {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(3, 3fr);
  margin-bottom: 60px;
}

.best-list > li {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 6px;
  display: flex;
  font-size: 25px;
  height: 120px;
  justify-content: flex-start;
  padding-left: 16px;
  position: relative;
  transition: 0.3s;
}

.best-list > li.on {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}

.best-list > li:before {
  background-color: #000;
  border-radius: 12px;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: 0.3s;
  width: 100%;
}

.best-list li:hover .best-list > li:before {
  opacity: 0;
}

/*2023.07.11 백그라운드 이미지 수정*/
.best-list .list1 {
  background: url('../images/index/best-bg/color.png') no-repeat center / cover;
}

.best-list .list2 {
  background: url('../images/index/best-bg/acne.png') no-repeat center / cover;
}

.best-list .list3 {
  background: url('../images/index/best-bg/blush.png') no-repeat center / cover;
}

.best-list .list4 {
  background: url('../images/index/best-bg/pore.png') no-repeat center / cover;
}

.best-list .list5 {
  background: url('../images/index/best-bg/wrinkle.png') no-repeat center / cover;
}

.best-list .list6 {
  background: url('../images/index/best-bg/lifting.png') no-repeat center / cover;
}

.best-list .list7 {
  background: url('../images/index/best-bg/petit.png') no-repeat center / cover;
}

.best-list .list8 {
  background: url('../images/index/best-bg/sline.png') no-repeat center / cover;
}

.best-list .list9 {
  background: url('../images/index/best-bg/hair.png') no-repeat center / cover;
}

.best-list li a {
  align-items: center;
  border-radius: 12px;
  display: flex;
  height: 100%;
  width: 100%;
}

.best-list li a button {
  color: #1c1c1c;
  font-size: 20px;
  font-weight: 700;
  z-index: 1;
}


.best-list > li.on:before {
  /*display : none;*/
  opacity: 0;
  pointer-events: none;
}

.best-list > li.on button {
  /*color : #000;*/
  /*font-weight: 700;*/
}


/* best5 */
/*디자인 변경 테스트 시작 */
/*.best-wrap{*/
/*    padding: 32px 20px;*/
/*    border-radius: 32px;*/
/*    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;*/
/*}*/
/*.best-wrap h2{*/
/*    margin: 0 10px 40px;*/
/*}*/
/*.best-list{*/
/*    margin-bottom: 20px;*/
/*}*/
/*.best-list li{*/
/*    border-radius: 16px;*/
/*    overflow: hidden;*/
/*}*/
/*디자인 변경 테스트 끝 */
.slide-wrap {
  position: relative;

  &:after {
    background: linear-gradient(90deg, rgba(231, 226, 221, 0) 0%, rgb(231, 226, 221) 100%);
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 160px;
    @media screen and (max-width: 700px) {
      width: 60px;
    }
  }

  & .best-sub-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 40px;
    overflow-x: auto;
    padding-bottom: 24px;
    /*margin-bottom : 150px;*/
    /*2023.07.11 마진 수정*/
    white-space: nowrap;
  }
}

.recommended-wrap {
  & .slide-wrap {
    &:after {
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
    }
  }
}

.best-sub-list::-webkit-scrollbar {
  height: 6px;
}

.best-sub-list > li {
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: 230px;
  transition: all 0.2s ease-in-out;
  width: 320px;

  &:hover {
    border: 1px solid #22c55e;
  }

  & .top {
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    width: 100%;

    & .best-num {
      background: #F3E7DC;
      border-radius: 4px;
      color: #B87333;
      font-weight: 600;
      padding: 4px 10px;
      width: fit-content;
    }

    & .surgery-name {
      font-size: 20px;
      font-weight: 600;
    }
  }

  & .bottom {
    align-items: flex-start;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    width: 100%;

    & .period {
      color: #999999;
      margin-top: 4px;
    }

    & .btn-wrap {
      .btn-more {
        align-items: center;
        background: #3a4c40;
        border-radius: 6px;
        color: #ffffff;
        display: flex;
        font-size: 14px;
        font-weight: 500;
        height: 44px;
        justify-content: space-between;
        padding: 0 20px;
      }
    }
  }
}

.best-sub-list .btn-more:has(font) {
  padding: 0 10px;
  width: auto;
}

.best-sub-list .best-num font,
.best-sub-list .btn-more font {
  color: #ffffff;
}

.best-sub-list .period > span {
  margin-left: 40px;
}

.best-sub-list .surgery-product-num {
  color: #846B64;
  font-weight: 300;

  grid-area: qty;
}

.best-sub-list .btn-wrap {
  grid-area: btn;
}

.best-sub-list .btn-more > i {
  margin-left: 8px;
  margin-top: -2px;
}


/* 시술검색 */
.main-search-wrap {
  align-items: center;
  background-color: #f5f5f5;
  display: flex;
  height: 400px;
  justify-content: flex-start;
  margin-bottom: 190px;
}

.main-search-wrap .slogan-image {
  margin-bottom: 35px;
}

.main-search-wrap .search-wrap .title {
  font-size: 24px;
  font-weight: 500;
}

.main-search-wrap .input-search-wrap {
  border-color: #767676;
  font-size: 18px;
  font-weight: 300;
  height: 48px;
  margin: 24px 0 16px;
}


/* 시술리뷰 */
.review-wrap {
  margin-bottom: 188px;
}

.review-wrap .swiper-container {
  height: 400px;
}

.review-list {
  display: flex;
  overflow-x: initial;
  white-space: normal;
}

.review-list > li {
  height: 318px;
  padding: 32px 20px 16px;
  width: 674px;
}

.best-sub-list .review-name {
  left: 25px;
  margin-bottom: 0;
  margin-left: 0;
  position: absolute;
  top: 0;
}

.review-name + div {
  align-items: flex-start;
  display: flex;
  gap: 15px;
  justify-content: space-between;
  width: 674px;
}

.review-image {
  width: 322px;
}

.review-content {
  flex: 1;
}

.review-title {
  color: #846b64;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 18px;
}

.review-detail {
  height: 234px;
  line-height: 26px;
  min-height: 234px;
  overflow-y: scroll;
  padding-right: 16px;
  white-space: normal;
  width: 290px;
}

.review-detail::-webkit-scrollbar {
  width: 6px;
}


/* 오시는 길 */
.location-wrap {
  /*padding-top: 100px;*/
  margin-bottom: 150px;
}

.location-wrap > h2 {
  margin: 0 0 24px 0;
}

.map {
  height: 500px;
  margin-bottom: 34px;
}

.location-info > div {
  color: #1c1c1c;
  font-size: 16px;
  margin: 14px 0;
}

.location-info .icon {
  height: 24px;
  margin-right: 16px;
  width: 24px;
}

.location-info > div span {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 50px);
  word-break: keep-all;
}

.location-info > div {
  display: inline-block;
  vertical-align: top;
  word-break: keep-all;
}

.location-info div {
  align-items: center;
  display: flex;
}

.location-info div ion-icon {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}

.swiper-slide a img:nth-child(1) {
  display: block;
}

.swiper-slide a img:nth-child(2) {
  display: none;
}

@media screen and (max-width: 1016px) {
  /*.main-slide-wrap .swiper-container{*/
  /*    height: calc(100vh - 80px);*/
  /*}*/
  .best-wrap {
    padding: 0 10px;
  }

  .main-search-wrap {
    padding: 0 20px;
  }

  .review-wrap {
    padding: 0 10px;
  }

  .review-wrap .review-list {
    gap: initial;
  }

  /*2023.07.11 패딩 수정*/
  .location-wrap h2, .location-info div {
    padding: 0 10px;
  }

  .recommended-wrap {
    padding: 0 10px 24px;
  }

}


.swiper {
  height: 100%;
  width: 100%;

}

.swiper-slide {
  align-items: center;
  background: #fff;
  display: flex;
  font-size: 18px;
  justify-content: center;
  text-align: center;
}

.swiper-slide > a {
  align-items: center;
  display: flex;
  justify-content: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  /*height: 100%;*/
  /*object-fit: cover;*/
}

.swiper_popup {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 999999;
}

.swiper_modal .inner {
  position: relative;
}

.swiper_modal {
  background-color: rgba(255, 255, 255, 1);
  height: 700px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
}

.swiper_popup .swiper_modal .swiper {
  display: block;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  overflow: clip;
  padding: 0;
  position: relative;
  z-index: 1;
}

.swiper_popup .swiper_modal .main-banner-popup {
  height: calc(100% - 100px);
  margin: 0;
  position: static;
  width: calc(100% - 200px);
}

.swiper_popup .swiper_modal .close-btn {
  cursor: pointer;
  height: 40px;
  position: absolute;
  right: 8px;
  top: 10px;
  width: 40px;
}

.swiper_popup .swiper_modal .close-wrap {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  height: 40px;
  justify-content: flex-end;
  padding: 0 20px;
}

.swiper_popup .swiper_modal .close-wrap .close-day label {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
}

.swiper_popup .swiper_modal .swiper-slide {
  pointer-events: none;
}

.swiper_popup .swiper_modal .swiper-slide.active-link {
  pointer-events: all;
}

.swiper_popup .swiper_modal .swiper-pagination-bullet {
  background-color: #ffffff;
  border: 1px solid rgba(58, 76, 64, 0);
  border-radius: 0;
  height: auto;
  opacity: 1;
  width: 200px;
}

.swiper_popup .swiper_modal .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgba(58, 76, 64, 1) !important;
  border: 1px solid rgba(58, 76, 64, 1);
  color: white;
  width: 240px !important;

}

.swiper-pagination-clickable.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets.pagination-custom {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  margin: 0;
  right: 0px;
  top: 60px;
  transform: translate(0, 0);
}

.swiper-pagination-clickable.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  align-items: center;
  border: 1px solid rgba(58, 76, 64, 0.12);
  border-radius: 0 !important;
  border-top: 1px solid transparent;
  color: rgba(58, 76, 64, 1);
  display: flex;
  height: 40px;
  justify-content: flex-start;
  margin: 0;
  padding: 0 16px;
  transition: 0.3s;
}

.modal-title {
  align-items: center;
  background-color: rgba(58, 76, 64, 1);
  color: #fff;
  display: flex;
  font-size: 20px;
  font-weight: 700;
  height: 60px;
  justify-content: center;

}

.swiper-vertical .swiper-wrapper {
  flex-direction: column;
}

.main-slide-wrap .swiper-container {
  height: calc(100vh - 120px);
  max-height: 575px;
}

@media screen and (max-width: 1024px) and (orientation: portrait), (max-width: 1024px) {
  .swiper {
    height: 100%;
    width: 100%;

  }

  .swiper-slide {
    align-items: center;
    background: #fff;
    display: flex;
    font-size: 18px;
    justify-content: center;
    text-align: center;
  }

  /*.swiper-slide img {*/
  /*    display: block;*/
  /*    width: 100%;*/
  /*    !*height: 100%;*!*/
  /*    !*object-fit: cover;*!*/
  /*}*/
  .swiper_popup {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 999999;
  }

  .swiper_modal .inner {
    position: relative;
  }


  .swiper_popup .swiper_modal .main-banner-popup {
    height: calc(100% - 40px);
    margin: 0;
    position: static;
    width: 100%;
  }

  .swiper_popup .swiper_modal .close-btn {
    padding: 8px;
    right: 0;
    top: 0;
  }

  .swiper_popup .swiper_modal .close-wrap {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    height: 40px;
    justify-content: flex-end;
    padding: 0 20px;
  }

  .swiper_popup .swiper_modal .close-wrap .close-day label {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
  }

  .swiper_popup .swiper_modal .swiper-pagination.pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets .swiper-pagination-bullet {
    background: #000;
    border-radius: 100%;
    display: inline-block;
    height: 8px;
    margin: 0 2px;
    opacity: .2;
    padding: 0;
    width: 8px;
  }

  .swiper_popup .swiper_modal .main-banner-popup .swiper-pagination.pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets .swiper-pagination-bullet {
    background: #FFFFFF;
    border: 0.5px solid #767676;
    opacity: 0.8;
  }

  .swiper_popup .swiper_modal .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: rgba(58, 76, 64, 0.12) !important;
    border: 1px solid rgba(58, 76, 64, 1);
    width: 8px !important;
  }

  .swiper_popup .swiper_modal .main-banner-popup .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #3a4c40 !important;
  }

  /*.swiper-pagination.pagination-custom.swiper-pagination-clickable .swiper-pagination-bullets,*/
  .swiper_popup .swiper_modal .swiper-pagination.pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets {
    bottom: 10px;
    flex-direction: row;
    justify-content: center;
    left: 50%;
    margin: 0;
    top: auto;
    transform: translate(-50%, 0);
  }

  .swiper_popup .swiper_modal .swiper-pagination.pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets .swiper-pagination-bullet {
    border-radius: 50% !important;
  }

  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    align-items: center;
    border: 1px solid rgba(58, 76, 64, 0.12);
    border-radius: 0 !important;
    border-top: 1px solid transparent;
    color: rgba(58, 76, 64, 1);
    display: flex;
    height: 40px;
    justify-content: center;
    margin: 0 2px;
  }

  .modal-title {
    align-items: center;
    background-color: rgba(58, 76, 64, 1);
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    justify-content: center;

  }

  .swiper-vertical .swiper-wrapper {
    flex-direction: column;
  }
}

@media screen and (max-width: 1024px) and (orientation: portrait) {

  .swiper_modal {
    background-color: rgba(255, 255, 255, 1);
    height: calc(90vw);
    left: 50%;
    position: absolute;
    top: calc(50% - 20px);
    transform: translate(-50%, -50%);
    width: calc(90vw - 40px);
    /*max-height: 500px;*/
  }
}

@media screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 1023px) {
  .swiper_modal {
    background-color: rgba(255, 255, 255, 1);
    height: calc(85vh);
    left: 50%;
    position: absolute;
    top: calc(50% - 20px);
    transform: translate(-50%, -50%);
    width: calc(85vh - 40px);
    /*max-height: 500px;*/
  }
}

@media screen and (max-width: 850px) and (orientation: portrait) {
  .swiper_modal {
    background-color: rgba(255, 255, 255, 1);
    height: calc(90vw);
    left: 50%;
    position: absolute;
    top: calc(50% - 20px);
    transform: translate(-50%, -50%);
    width: calc(90vw - 40px);
    /*max-height: 500px;*/
  }
}

@media screen and (max-width: 850px) and (orientation: landscape) {
  .swiper_modal {
    background-color: rgba(255, 255, 255, 1);
    height: calc(85vh);
    left: 50%;
    position: absolute;
    top: calc(50% - 20px);
    transform: translate(-50%, -50%);
    width: calc(85vh - 40px);
    /*max-height: 500px;*/
  }

  .swiper {
    height: 100%;
    width: 100%;

  }

  .swiper-slide {
    align-items: center;
    background: #fff;
    display: flex;
    font-size: 18px;
    justify-content: center;
    text-align: center;
  }

  /*.swiper-slide img {*/
  /*    display: block;*/
  /*    !*width: 100%;*!*/
  /*    height: 100%;*/
  /*    !*object-fit: cover;*!*/
  /*}*/
  .swiper_popup {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 999999;
  }

  .swiper_modal .inner {
    position: relative;
  }


  .swiper_popup .swiper_modal .main-banner-popup {
    height: calc(100% - 40px);
    margin: 0;
    position: static;
    width: 100%;
  }

  .swiper_popup .swiper_modal .close-btn {
    padding: 8px;
    right: 0;
    top: 0;
  }

  .swiper_popup .swiper_modal .close-wrap {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    height: 40px;
    justify-content: flex-end;
    padding: 0 20px;
  }

  .swiper_popup .swiper_modal .close-wrap .close-day label {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
  }

  .swiper_popup .swiper_modal .swiper-pagination.pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets .swiper-pagination-bullet {
    background: #000;
    border-radius: 100%;
    display: inline-block;
    height: 8px;
    margin: 0 2px;
    opacity: .2;
    padding: 0;
    width: 8px;
  }

  .swiper_popup .swiper_modal .main-banner-popup .swiper-pagination.pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets .swiper-pagination-bullet {
    background: #FFFFFF;
    border: 0.5px solid #767676;
    opacity: 0.8;
  }

  .swiper_popup .swiper_modal .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: rgba(58, 76, 64, 0.12) !important;
    border: 1px solid rgba(58, 76, 64, 1);
    width: 8px !important;
  }

  .swiper_popup .swiper_modal .main-banner-popup .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #3a4c40 !important;
  }

  /*.swiper-pagination.pagination-custom.swiper-pagination-clickable .swiper-pagination-bullets,*/
  .swiper_popup .swiper_modal .swiper-pagination.pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets {
    bottom: 10px;
    flex-direction: row;
    justify-content: center;
    left: 50%;
    margin: 0;
    top: auto;
    transform: translate(-50%, 0);
  }

  .swiper_popup .swiper_modal .swiper-pagination.pagination-custom.swiper-pagination-clickable.swiper-pagination-bullets .swiper-pagination-bullet {
    border-radius: 50% !important;
  }

  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    align-items: center;
    border: 1px solid rgba(58, 76, 64, 0.12);
    border-radius: 0 !important;
    border-top: 1px solid transparent;
    color: rgba(58, 76, 64, 1);
    display: flex;
    height: 40px;
    justify-content: center;
    margin: 0 2px;
  }

  .modal-title {
    align-items: center;
    background-color: rgba(58, 76, 64, 1);
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    justify-content: center;

  }

  .swiper-vertical .swiper-wrapper {
    flex-direction: column;
  }
}

@media screen and (max-width: 786px) {
  section.landing-pop {
    aspect-ratio: 5.5 / 9;
  }

  section.landing-pop .video-wrap {
    display: none;
  }

  section.landing-pop .video-wrap-mobile {
    align-items: center;

    display: flex;
    height: 140%;
    justify-content: center;
    margin-bottom: 0;
    padding-bottom: 75%;
    position: relative;
    width: 110%;
  }

  .best-list {
    gap: 12px;
  }

  .best-list > li {
    font-size: 20px;
    height: 80px;
  }

  .main-search-wrap {
    margin-bottom: 80px;
  }

  .main-search-wrap .search-wrap .title {
    font-size: 20px;
  }

  .review-wrap {
    margin-bottom: 100px;
  }


  .review-detail {
    font-size: 14px;
    max-width: 290px;
    width: auto;
  }

  .review-name + div {
    width: 100%;
  }

  .review-list > li {
    width: 100%;
  }

  .location-info > div {
    font-size: 14px;
  }

  /*2023.07.11 글씨 사이즈 조정*/
  .best-list li {
    border-radius: 8px;
    justify-content: center;
    padding-left: 0;
  }

  .best-list li a {
    /*justify-content: center;*/
    border-radius: 8px;
    padding-left: 16px;
  }

  .best-list > li:before {
    border-radius: 8px;
  }

  .best-list li a button {
    font-size: 16px;
    font-weight: 700;
  }


}

@media screen and (max-width: 480px) {
  .video-wrap {
    margin-bottom: 60px;
  }

  /*section.landing-pop {*/
  /*  aspect-ratio: 5.5/9;*/
  /*}*/
  /*section.landing-pop .video-wrap {*/
  /*  display: none;*/
  /*}*/
  /*section.landing-pop .video-wrap-mobile {*/
  /*  align-items: center;*/
  /*  display: flex;*/
  /*  height: 140%;*/
  /*  justify-content: center;*/
  /*  margin-bottom: 0;*/
  /*  padding-bottom: 75%;*/
  /*  position: relative;*/
  /*  width: 110%;*/
  /*}*/
  .main-slide-wrap {
    margin-bottom: 40px;
  }

  h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .best-list {
    gap: 8px;
    margin-bottom: 40px;
  }

  .best-list > li {
    font-size: 14px;
    height: 40px;
  }


  .best-sub-list {
    margin-bottom: 30px;
    padding-bottom: 20px;
  }

  .best-sub-list::-webkit-scrollbar {
    height: 4px;
  }

  .best-sub-list .best-num {
    font-size: 14px;
  }

  .best-sub-list .surgery-name {
    font-size: 18px;
  }

  .best-sub-list .period {
    font-size: 12px;
  }

  .best-sub-list .period > span {
    margin-left: 25px;
  }

  .best-sub-list .surgery-product-num {
    bottom: 12px;
    font-size: 12px;
    left: 15px;
  }

  .best-sub-list .btn-wrap {
    bottom: 8px;
    right: 4px;
  }


  .icon.arrow-right {
    height: 7px;
    margin-left: 4px;
    width: 4px;
  }

  .main-search-wrap {
    height: 350px;
    margin-bottom: 64px;
  }

  .main-search-wrap .search-wrap .title {
    font-size: 16px;
  }

  .main-search-wrap .slogan-image {
    margin-bottom: 40px;
  }

  .review-wrap {
    margin-bottom: 64px;
  }

  .review-wrap .swiper-container {
    height: auto;
  }

  .review-wrap .review-list > li {
    height: auto;
    padding-right: 6px;
    width: 100%;
  }

  .review-wrap .review-name {
    font-size: 19px;
    height: 23px;
    left: 23px;
    margin-left: 0;
  }

  .review-name + div {
    flex-direction: column;
  }

  .review-image {
    width: 100%;
  }

  .review-detail {
    max-width: 100%;
    width: 95%;
  }

  .location-wrap {
    padding: 0 10px;
  }

  .root_daum_roughmap .wrap_map {
    height: 156px !important;
  }

  .review-detail::-webkit-scrollbar {
    width: 4px;
  }

  .main-slide-wrap .swiper-container {
    /*height: calc(100vh - 80px);*/
    /*max-height: 635px;*/
    /*aspect-ratio: 1/1.45;*/
  }

  .swiper-slide a {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  .swiper-slide a img {
    height: auto;
    width: 100%;
  }

  .swiper-slide a img:nth-child(1) {
    display: none;
  }

  .swiper_popup .swiper_modal .main-banner-popup .swiper-slide a img:nth-child(1) {
    display: block;
  }

  .swiper-slide a img:nth-child(2) {
    display: block;
  }
}

@media screen and (max-width: 320px) {
  .best-list li a button {
    font-size: 14px;
  }

  .best-list li a {
    padding-left: 8px;
  }
}

.swiper-container a {
  font-size: 0;
}

.index-page {
  .main-slide-wrap {
    margin: 0 auto;
    width: 100%;
  }

  .bfaf-slide-wrap {
    background: #ffffff;
    color: white;
    padding: 100px 0;
    position: relative;
    width: 100%;
    z-index: 1;
    @media screen and (max-width: 1016px) {
      padding: 40px 20px;
    }
    @media screen and (max-width: 768px) {
      padding: 40px 10px;
    }

    & p.agreement-notice {
      color: #90917A;
      font-size: 10px;
      margin: 20px auto 0;
      max-width: 1016px;
      word-break: keep-all;
    }

    /*&::before {*/
    /*  background: url("/images/ad-video-bg.jpg") no-repeat center / cover;*/
    /*  bottom: 0;*/
    /*  content: "";*/
    /*  left: 0;*/
    /*  opacity: 0.05;*/
    /*  position: absolute;*/
    /*  right: 0;*/
    /*  top: 0;*/
    /*  z-index: -1;*/
    /*}*/

    & .bfaf-slide-box {
      margin: 0 auto;
      max-width: 1016px;
      position: relative;

      & .bfaf-swiper-box {
        height: 230px;
        position: relative;
        @media screen and (max-width: 1016px) {
          height: auto;
        }

        & .swiper-wrapper {
          & li.swiper-slide {
            background: transparent;
            gap: 16px;
            justify-content: flex-start;
            @media screen and (max-width: 1016px) {
              flex-direction: column;
            }

            & > div {
              height: 100%;

              & > a {

                & img {
                  display: block;
                  height: 100%;
                }
              }
            }

            & > a {
              height: 100%;

              & img {
                height: 100%;
              }
            }
          }
        }
      }

      & .bfaf-swiper-button-prev, .bfaf-swiper-button-next {
        aspect-ratio: 1/1;
        background: none;
        margin-top: 0;
        top: 50%;
        transform: translateY(-50%);

        & svg {
          transform: rotate(-90deg);
        }

        @media screen and (max-width: 1016px) {
          display: none;
        }
      }

      .bfaf-swiper-button-prev {
        left: -40px;
      }

      .bfaf-swiper-button-next {
        right: -40px;
      }

      & .bfaf-swiper-pagination {

        background: #FCFBFA;
        border-radius: 8px;
        /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
        flex-direction: row;
        margin-bottom: 20px;
        padding: 4px;

        & .swiper-pagination-bullet {
          align-items: center;
          background: none !important;
          border: 2px solid transparent;
          border-radius: 6px !important;
          color: #AAAAAA;
          display: flex;
          font-size: 16px;
          font-weight: 500;
          height: 46px;
          justify-content: center;
          opacity: 1;
          padding: 10px 2px;
          transition: all 0.2s ease-in-out;
          width: calc((100%) / 5);
          @media screen and (max-width: 1016px) {
            border: 1px solid transparent;
            font-size: 12px;
            height: 40px;
          }
          @media screen and (max-width: 400px) {
            font-size: 9px;
            height: 40px;
          }
        }

        & .swiper-pagination-bullet-active {
          background: #F2EFEC !important;
          border: 2px solid #E7E2DD;
          border-radius: 6px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          color: #545540;
          font-weight: 600;
          width: calc((100%) / 5) !important;
          @media screen and (max-width: 1016px) {
            border: 1px solid #E7E2DD;
          }
        }
      }

      & > .title-wrap {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;

        & > h1.title {
          color: #545540;
          font-family: 'Noto Serif JP', 'Noto Serif SC', 'Roboto', 'Nanum Myeongjo', 'Pretendard', sans-serif;
          font-size: 36px;
          font-weight: 600;
          margin-bottom: 40px;
          text-align: center;
          text-wrap: balance;
          width: auto;
          word-break: keep-all;

          @media screen and (max-width: 1016px) {
            font-size: 22px;
            margin-bottom: 40px;
            padding: 0;
            text-align: center;
            word-break: keep-all;
          }

          &.aos-animate {
            &:before {
              animation: coverUnderText 0.7s ease-in-out forwards;
              animation-delay: 1.5s;
              transform-origin: left;
            }

            &:after {
              animation: coverOverText 0.7s ease-in-out forwards;
              animation-delay: 1s;
              transform-origin: right;
            }
          }

          &:before, &:after {
            content: "";
            height: 100%;
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);

            @media screen and (max-width: 1240px) {
              font-size: 22px;
            }
          }

          &:before {
            background: #DDEEC64D;
            transform: translate(-50%, -50%) scaleX(0);
            width: 100%;
            z-index: -1;
            @media screen and (max-width: 1240px) {
              width: 100%;
            }
          }

          &:after {
            background: #B5C99A;
            transform: translate(-50%, -50%);
            width: calc(100% + 50px);
            @media screen and (max-width: 1240px) {
              width: calc(100% + 30px);
            }
          }
        }
      }

    }
  }

  .reberry-tv-wrap {
    background: #E7E2DD;
    color: #333333;
    padding: 100px 0;
    position: relative;
    width: 100%;
    z-index: 1;
    @media screen and (max-width: 1016px) {
      padding: 40px 0;
    }

    &::before {
      background: url("/images/ad-video-bg.jpg") no-repeat center / cover;
      bottom: 0;
      content: "";
      left: 0;
      opacity: 0.05;
      position: absolute;
      right: 0;
      top: 0;
      z-index: -1;
    }

    & .reberry-tv-box {
      margin: 0 auto;

      max-width: 1016px;

      & > .title-wrap {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 40px;

        & > h1.title {
          color: #545540;
          font-family: 'Noto Serif JP', 'Noto Serif SC', 'Roboto', 'Nanum Myeongjo', 'Pretendard', sans-serif;
          font-size: 36px;
          font-weight: 600;
          text-align: center;
          text-wrap: balance;
          width: auto;
          word-break: keep-all;
          @media screen and (max-width: 1016px) {
            font-size: 22px;
            margin-bottom: 40px;
            padding: 0 20px;
            text-align: center;
            word-break: keep-all;
          }

          /*&.aos-animate {*/
          /*  &:before {*/
          /*    animation: coverUnderText 0.7s ease-in-out forwards;*/
          /*    animation-delay: 1.5s;*/
          /*    transform-origin: left;*/
          /*  }*/

          /*  &:after {*/
          /*    animation: coverOverText 0.7s ease-in-out forwards;*/
          /*    animation-delay: 1s;*/
          /*    transform-origin: right;*/
          /*  }*/
          /*}*/

          /*&:before, &:after {*/
          /*  content: "";*/
          /*  height: 52px;*/
          /*  left: 50%;*/
          /*  position: absolute;*/
          /*  top: 50%;*/
          /*  transform: translate(-50%, -50%);*/

          /*  @media screen and (max-width: 1240px) {*/
          /*    font-size: 22px;*/
          /*  }*/
          /*}*/

          /*&:before {*/
          /*  background: #DDEEC64D;*/
          /*  transform: translate(-50%, -50%) scaleX(0);*/
          /*  width: 100%;*/
          /*  z-index: -1;*/
          /*  @media screen and (max-width: 1240px) {*/
          /*    width: 100%;*/
          /*  }*/
          /*}*/
        }
      }

      & .video-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: 1fr 300px;
        position: relative;
        @media screen and (max-width: 1016px) {
          gap: 30px;
          grid-template-columns: 1fr;
        }

        & .video-swiper-wrap {
          position: relative;
          @media screen and (max-width: 1016px) {
            margin: 0 auto;
            width: calc(100vw - 60px);
          }

          .reberrytv-swiper-button-prev, .reberrytv-swiper-button-next {
            align-items: center;
            backdrop-filter: blur(5px);
            background: #FFFFFF;
            border-radius: 50%;
            bottom: auto;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
            display: flex;
            height: 60px;
            justify-content: center;
            left: 50%;
            margin: 0;
            position: absolute;
            top: auto;
            transform: translate(-50%, 0);
            width: 60px;
            z-index: 9;
            @media screen and (max-width: 1016px) {
              height: 40px;
              left: auto;
              transform: translate(0, -50%) rotate(-90deg);
              width: 40px;
            }
          }

          .reberrytv-swiper-button-prev.swiper-button-disabled, .reberrytv-swiper-button-next.swiper-button-disabled {
            opacity: 0.5;
            pointer-events: all;
          }

          .reberrytv-swiper-button-prev {
            top: -30px;
            @media screen and (max-width: 1016px) {
              left: -20px;
              top: 50%;
            }
          }

          .reberrytv-swiper-button-next {
            bottom: -30px;
            @media screen and (max-width: 1016px) {
              bottom: auto;
              right: -20px;
              top: 50%;
            }
          }
        }

        & .video-swiper-box {
          height: 394px;
          overflow: hidden;
          @media screen and (max-width: 1016px) {
            height: 17vw;
          }
        }


        & .video-size {
          align-items: center;
          aspect-ratio: 16 / 9;
          background-color: #ffffff;
          display: flex;
          justify-content: center;
          overflow: hidden;
          position: relative;
          top: 0;
          width: 100%;

          & .video-crop {
            align-items: center;
            display: flex;
            height: 100%;
            justify-content: center;
            margin-bottom: 0;
            overflow: hidden;
            /*padding-bottom: 75%;*/
            position: relative;
            width: 100%;

            & iframe {
              border: none;
              height: 100%;
              left: 50%;
              outline: none;
              position: absolute;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 100%;
            }

            & a {
              align-items: center;
              display: flex;
            }
          }
        }
      }
    }
  }

  .influencer-wrap {
    background: #ffffff;
    color: #545540;
    padding: 100px 0;
    position: relative;
    width: 100%;
    z-index: 1;
    @media screen and (max-width: 1016px) {
      padding: 40px 0;
    }

    /*&::before {*/
    /*  background: url("/images/influencer-bg.jpg") no-repeat center / cover;*/
    /*  bottom: 0;*/
    /*  content: "";*/
    /*  left: 0;*/
    /*  opacity: 0.05;*/
    /*  position: absolute;*/
    /*  right: 0;*/
    /*  top: 0;*/
    /*  z-index: -1;*/
    /*}*/

    & > .influencer-box {
      margin: 0 auto;
      max-width: 1016px;
      width: 100%;

      & > .title-wrap {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 40px;

        & > h1.title {
          color: #545540;
          font-family: 'Noto Serif JP', 'Noto Serif SC', 'Roboto', 'Nanum Myeongjo', 'Pretendard', sans-serif;
          font-size: 36px;
          font-weight: 600;
          text-align: center;
          text-wrap: balance;
          width: auto;
          word-break: keep-all;
          @media screen and (max-width: 1016px) {
            font-size: 22px;
            margin-bottom: 40px;
            padding: 0;
            text-align: center;
            word-break: keep-all;
          }

          /*&.aos-animate {*/
          /*  &:before {*/
          /*    animation: coverUnderText 0.7s ease-in-out forwards;*/
          /*    animation-delay: 1.5s;*/
          /*    transform-origin: left;*/
          /*  }*/

          /*  &:after {*/
          /*    animation: coverOverText 0.7s ease-in-out forwards;*/
          /*    animation-delay: 1s;*/
          /*    transform-origin: right;*/
          /*  }*/
          /*}*/

          /*&:before, &:after {*/
          /*  content: "";*/
          /*  height: 100%;*/
          /*  left: 50%;*/
          /*  position: absolute;*/
          /*  top: 50%;*/
          /*  transform: translate(-50%, -50%);*/

          /*  @media screen and (max-width: 1240px) {*/
          /*    font-size: 22px;*/
          /*  }*/
          /*}*/

          /*&:before {*/
          /*  background: #DDEEC64D;*/
          /*  transform: translate(-50%, -50%) scaleX(0);*/
          /*  width: 100%;*/
          /*  z-index: -1;*/
          /*  @media screen and (max-width: 1240px) {*/
          /*    width: 100%;*/
          /*  }*/
          /*}*/

          /*&:after {*/
          /*  background: #B5C99A;*/
          /*  transform: translate(-50%, -50%);*/
          /*  width: calc(100% + 50px);*/
          /*  @media screen and (max-width: 1240px) {*/
          /*    width: calc(100% + 30px);*/
          /*  }*/
          /*}*/
        }
      }

      & .influencer-grid {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        @media screen and (max-width: 1016px) {
          aspect-ratio: 1 / 1.3;
          overflow: auto;
          padding: 10px;
        }

        & li {
          aspect-ratio: 1;
          font-size: 0;
          overflow: hidden;
          transition: all 0.2s;
          width: calc(100% / 7);
          @media screen and (max-width: 1016px) {
            width: calc(100% / 3);
          }

          &:nth-child(5n) {
            border-radius: 50%;
            @media screen and (max-width: 1016px) {
              border-radius: 0;
            }
          }

          &:nth-child(4n) {
            border-radius: 0;
            @media screen and (max-width: 1016px) {
              border-radius: 50%;
            }
          }

          &:hover {
            box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
            transform: translateY(-5px);
          }

          & a {
            height: 100%;
            width: 100%;

            & .influencer-img {
              align-items: center;
              /*border: 1px solid #efefef;*/
              display: flex;
              height: 100%;
              justify-content: center;
              overflow: hidden;
              width: 100%;
            }
          }
        }
      }
    }
  }

  .popular-wrap {
    align-items: center;
    background: #E7E2DD;
    display: flex;
    justify-content: center;
    padding: 100px 0;
    width: 100%;
    @media screen and (max-width: 1016px) {
      padding: 40px 0;
    }

    & .popular-box {
      max-width: 1016px;
      @media screen and (max-width: 1016px) {
        max-width: none;
        width: 100%;
      }

      & .slide-wrap {
        & ul {
          @media screen and (max-width: 1016px) {
            margin-bottom: 0;
            padding: 20px 10px;
          }
        }
      }

      & > .title-wrap {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        margin-bottom: 40px;

        & > h1.title {
          color: #545540;
          font-family: 'Noto Serif JP', 'Noto Serif SC', 'Roboto', 'Nanum Myeongjo', 'Pretendard', sans-serif;
          font-size: 36px;
          font-weight: 600;
          text-align: center;
          text-wrap: balance;
          @media screen and (max-width: 1016px) {
            font-size: 22px;
            margin-bottom: 40px;
            padding: 0 20px;
            text-align: center;
            word-break: keep-all;
          }

          &:has(+ span) {
            margin-bottom: 10px;
          }

          /*&.aos-animate {*/
          /*  &:before {*/
          /*    animation: coverUnderText 0.7s ease-in-out forwards;*/
          /*    animation-delay: 1.5s;*/
          /*    transform-origin: left;*/
          /*  }*/

          /*  &:after {*/
          /*    animation: coverOverText 0.7s ease-in-out forwards;*/
          /*    animation-delay: 1s;*/
          /*    transform-origin: right;*/
          /*  }*/
          /*}*/

          /*&:before, &:after {*/
          /*  content: "";*/
          /*  height: 52px;*/
          /*  left: 50%;*/
          /*  position: absolute;*/
          /*  top: 50%;*/
          /*  transform: translate(-50%, -50%);*/

          /*  @media screen and (max-width: 1240px) {*/
          /*    font-size: 22px;*/
          /*  }*/
          /*}*/

          /*&:before {*/
          /*  background: #DDEEC64D;*/
          /*  transform: translate(-50%, -50%) scaleX(0);*/
          /*  width: 100%;*/
          /*  z-index: -1;*/
          /*  @media screen and (max-width: 1240px) {*/
          /*    width: 100%;*/
          /*  }*/
          /*}*/

          /*&:after {*/
          /*  background: #B5C99A;*/
          /*  transform: translate(-50%, -50%);*/
          /*  width: calc(100% + 50px);*/
          /*  @media screen and (max-width: 1240px) {*/
          /*    width: calc(100% + 30px);*/
          /*  }*/
          /*}*/
        }

        & > span {
          color: #90917A;
          display: inline-block;
          margin-bottom: 20px;
          text-align: center;
          width: 100%;
          @media screen and (max-width: 1016px) {
            margin-bottom: 0;
            text-align: center;
          }
        }
      }
    }
  }
}

@keyframes coverOverText {
  0% {
    transform: translate(-50%, -50%) scaleX(1);
  }
  100% {
    transform: translate(-50%, -50%) scaleX(0);
  }
}

@keyframes coverUnderText {
  0% {
    transform: translate(-50%, -50%) scaleX(0);
  }
  100% {
    transform: translate(-50%, -50%) scaleX(1);
  }
}

.reberry-tv-wrap {
  & .video-swiper-box {
    & .swiper-slide {
      background: transparent;

      & button {
        align-items: center;
        display: flex;
        filter: grayscale(1);
        height: 100%;
        overflow: hidden;
        width: 100%;

        & img {
          display: block;
        }

        &.on-view {
          box-shadow: inset 0 0 0 10px #CAB69E;
          filter: none;
          position: relative;

          &:after {
            border: 10px solid #CAB69E;
            bottom: 0;
            content: "";
            left: 0;
            pointer-events: none;
            position: absolute;
            right: 0;
            top: 0;
            @media screen and (max-width: 768px) {
              border: 2px solid #CAB69E;
            }
          }
        }
      }

      & a {
        filter: grayscale(0.6);

        & img {

          display: block;
        }

        &.on-view {
          filter: none;
        }
      }
    }
  }
}