@charset "UTF-8";

/* 비주얼 영역 */
.sc-visual {
  position: relative;
  height: 100vh;
}
.sc-visual .group-ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* .sc-visual .group-ttl { opacity: 0;} */
.sc-visual .visual-ttl {
  font-weight: 700;
  font-size: 8rem;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -2.56px;
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.sc-visual .group-ttl .visual-ttl {
  opacity: 1;
}
.sc-visual .group-swiper,
.sc-visual .swiper-slide {
  overflow: hidden;
}
.sc-visual .group-swiper {
  /* filter: grayscale(1); */ /* opacity: 0; */
  will-change: transform;
  transform: translateZ(0);
}
.sc-visual .swiper-slide {
  --opacity: 0;
  position: relative;
  height: 100vh;
}
.sc-visual .swiper-slide::before,
.sc-visual .swiper-slide::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  opacity: 0.3;
  background-blend-mode: soft-light;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.sc-visual .swiper-slide::before {
  left: 0;
  bottom: 0;
  width: 22.1vw;
  aspect-ratio: 425 / 620;
  background-image: url(/img/bg-L-w.svg);
}
.sc-visual .swiper-slide::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 22vw;
  aspect-ratio: 422 / 900;
  background-image: url(/img/bg-Y-w.svg);
  background-size: cover;
}
.sc-visual .swiper-slide .img-area .img {
  /* filter: grayscale(1); */
  height: 100%; /* transform: scale(0.5); */ /* transition: transform .6s ease-in-out .1s; */ /* will-change: transform; */
}
/* .sc-visual .swiper-slide.swiper-slide-active .img-area .img { transform: scale(1);} */
.sc-visual .swiper-slide .txt-area {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* .sc-visual .swiper-slide .visual-ttl { opacity: 0;} */
.sc-visual .swiper-slide .img-area {
  height: 100%;
}
.sc-visual .swiper-slide .txt-area .desc {
  margin-top: 4rem;
  color: #fff;
  font-family: 'Noto Serif KR';
  font-size: 2.4rem;
  letter-spacing: -0.96px; /*  opacity: 0; */
}
.sc-visual .swiper-controller {
  position: absolute;
  bottom: 7rem;
  left: 50%;
  z-index: 20;
  width: fit-content;
  aspect-ratio: 360 / 170;
  transform: translateX(-50%); /* opacity: 0; */ /* visibility: hidden; */
}
.sc-visual .swiper-controller .btn {
  position: absolute;
  top: calc(50% - 2.2rem);
  width: 4rem;
  padding: 0;
  border: none;
  aspect-ratio: 1 / 1;
  z-index: 10;
  background: url(/img/common/arw-left-wl.svg) no-repeat center center / 100%
    auto;
}
.sc-visual .swiper-controller .btn-prev {
  left: -10rem;
  transform: translate(-100%, -50%);
}
.sc-visual .swiper-controller .btn-next {
  right: -10rem;
  transform: translate(100%, -50%) rotate(180deg);
}
.sc-visual .thumbnail-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.6rem;
}
.sc-visual .thumbnail-item {
  position: relative;
  width: 10.3rem;
  height: 16rem;
}
.sc-visual .thumbnail-item.active {
  width: 10rem;
}
.sc-visual .thumbnail {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  cursor: pointer;
}
.sc-visual .thumbnail-item .img-area {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 9rem;
  overflow: hidden;
  border-radius: 2rem;
  border: 1.4px solid #fff;
  box-shadow: 0px 1.778px 17.778px 0px rgba(0, 0, 0, 0.3);
  transform: translateY(calc(-50% - 1rem));
  transition: 0.4s ease-in-out 0.1s;
}
.sc-visual .thumbnail-item.active .img-area {
  height: 16rem;
  transform: translateY(-50%);
}
.sc-visual .thumbnail-item .img-area .img {
  height: 100%;
  filter: grayscale(1);
  transition: 0.3s;
}
/* .sc-visual .thumbnail-item .img-area { width: 100%; aspect-ratio: 103 / 90; margin-bottom: 1rem; overflow: hidden; border-radius: 2rem; border: 1.4px solid #FFF; box-shadow: 0px 1.778px 17.778px 0px rgba(0, 0, 0, 0.30);}
.sc-visual .thumbnail-item.active .img-area { position: absolute; top: 50%; left: 0; aspect-ratio: 100 / 160; transform: translateY(-50%);}
.sc-visual .thumbnail-item .img-area .img { height: 100%; filter: grayscale(1); transition: .3s;} */
.sc-visual .thumbnail-item.active .img-area .img {
  filter: none;
}
.sc-visual .thumbnail-item .txt {
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.3px;
  transition: 0.4s ease-in-out;
}
.sc-visual .thumbnail-item.active .txt {
  opacity: 0;
  transform: translateY(10%);
}
.sc-visual .autoplay-progress {
  position: relative;
  height: 2px;
  margin-top: 2rem;
  background-color: #fff;
}
.sc-visual .autoplay-progress .progress {
  --progress: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: calc(100% * var(--progress));
  height: 100%;
  border-radius: 0;
  opacity: 1;
  background-color: #00a2c0;
}
.sc-visual .group-scroll-down {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  width: fit-content;
  transform: translateX(-50%); /* opacity: 0; */
  visibility: hidden;
}

/* 병원 소개 영역 */
.sc-intro {
  padding: 5rem 0 13.2rem;
}
.sc-intro .group-txt .ani-wrapper:nth-child(1) {
  padding-left: 15.3vw;
}
.sc-intro .group-txt .ani-wrapper:nth-child(2) {
  margin-top: -4rem;
  padding-right: 22.9vw;
  text-align: right;
}
/* .sc-intro .group-txt .ani-wrapper:nth-child(1) .txt { transform: translateX(-100%);}
.sc-intro .group-txt .ani-wrapper:nth-child(2) .txt { transform: translateX(100%);} */
.sc-intro .group-txt .txt {
  display: block;
  opacity: 0.15;
  color: var(--color-primary);
  font-family: 'Oranienbaum', sans-serif;
  font-size: 12rem;
  line-height: 1.2;
  letter-spacing: -2.4px;
}
.sc-intro .group-cnt {
  display: flex;
  align-items: center;
}
.sc-intro .group-cnt.cnt1 {
  margin-bottom: 80px;
}
.sc-intro .group-cnt .img-area {
  width: 49.5%;
  aspect-ratio: 950 / 560;
}
.sc-intro .group-cnt.cnt1 .img-area {
  background: url(/img/img-intro01.png?v=2) no-repeat center center / cover;
  border-top-right-radius: 999em;
  border-bottom-right-radius: 999em;
}
.sc-intro .group-cnt.cnt2 .img-area {
  background: url(/img/img-intro02.png?v=3) no-repeat center center / cover;
  border-top-left-radius: 999em;
  border-bottom-left-radius: 999em;
}
.sc-intro .group-cnt .txt-area {
  width: 50.5%;
  padding-left: 5.7vw;
}
.sc-intro .group-cnt.cnt2 .txt-area {
  width: fit-content;
  margin-left: auto;
  padding-left: 5vw;
  padding-right: 5.7vw;
}
.sc-intro .group-cnt .txt-area .btn {
  margin-top: 5rem;
}

/* 클리닉 영역 */
.sc-clinic {
  padding: 10rem 0 20rem;
  text-align: center;
}
.sc-clinic .inner {
  max-width: 138rem;
  margin: 0 auto;
}
.sc-clinic .desc {
  margin-top: 1.2rem;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.sc-clinic .clinic-list {
  display: flex;
  justify-content: center;
  gap: 6rem;
  margin-top: 5.3rem;
}
.sc-clinic .clinic-list .clinic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 14rem;
  padding: 3.4rem 0 4rem;
  border-radius: 999em;
  border: 1px solid var(--color-gray4);
  cursor: pointer;
  transition: 0.4s ease-in-out;
}
.sc-clinic .clinic-list .clinic-item.active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.sc-clinic .clinic-list .img-area {
  position: relative;
  width: 100%;
  max-width: 6rem;
  aspect-ratio: 60 / 86;
}
.sc-clinic .clinic-list .img-area img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s;
}
.sc-clinic .clinic-list .img-area .img-bk {
  opacity: 1;
}
.sc-clinic .clinic-list .active .img-area .img-bk {
  opacity: 0;
}
.sc-clinic .clinic-list .img-area .img-w {
  opacity: 0;
}
.sc-clinic .clinic-list .active .img-area .img-w {
  opacity: 1;
}
.sc-clinic .clinic-list .txt {
  color: var(--color-gray7);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.4px;
  transition: color 0.4s ease-in-out;
}
.sc-clinic .clinic-list .active .txt {
  color: #fff;
}
.sc-clinic .clinic-swiper {
  position: relative;
  margin-top: 5.3rem;
}
.sc-clinic .clinic-swiper .swiper-wrapper {
  padding: 0 7.5rem;
}
.sc-clinic .clinic-swiper .swiper-inner {
  display: flex;
  align-items: center;
  gap: 4.4vw;
}
.sc-clinic .clinic-swiper .img-area {
  width: 50%;
  max-width: 60rem;
  border-top-left-radius: 20rem;
  overflow: hidden;
}
.sc-clinic .clinic-swiper .txt-area {
  width: 50%;
  text-align: left;
}
.sc-clinic .clinic-swiper .cnt-ttl {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  font-size: 5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -2px;
}
.sc-clinic .clinic-swiper .cnt-ttl::before {
  content: '';
  display: block;
  width: 3.5rem;
  height: 4.6rem;
  background: url(/img/common/logo-02.svg) no-repeat center center / 100% auto;
}
.sc-clinic .clinic-swiper .cnt-desc {
  margin-top: 3.6rem;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.4px;
}
.sc-clinic .clinic-swiper .btn-primary {
  margin-top: 3.6rem;
}
.sc-clinic .clinic-swiper .swiper-controller {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 10;
  width: 100%;
  pointer-events: none;
  transform: translateY(-50%);
}
.sc-clinic .clinic-swiper .swiper-btn {
  width: 2.4rem;
  height: 6rem;
  border: none;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  pointer-events: auto;
}
.sc-clinic .clinic-swiper .swiper-btn.btn-prev {
  background-image: url(/img/common/arw-left-m02.svg);
}
.sc-clinic .clinic-swiper .swiper-btn.btn-next {
  background-image: url(/img/common/arw-right-m02.svg);
}

/* 의료진 소개 */
.sc-doctor .group-cnt.cnt01 {
  display: flex;
  align-items: center;
  height: 100rem;
  overflow: hidden;
}
.sc-doctor .cnt01 .doctor-left {
  width: 40.1%;
  height: 100%;
}
.sc-doctor .cnt01 .doctor-left .img-area {
  --l: 0;
  --r: 0;
  --opacity: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  height: 100%; /* padding-top: 10.2rem; */
  overflow: hidden;
}
.sc-doctor .cnt01 .doctor-left .img-area::before,
.sc-doctor .cnt01 .doctor-left .img-area::after {
  content: '';
  display: block;
  position: absolute;
  width: 24.48vw;
  z-index: -1;
  opacity: var(--opacity);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.8;
}
.sc-doctor .cnt01 .doctor-left .img-area::before {
  top: 0;
  left: calc(var(--l) * 1%);
  aspect-ratio: 326 / 683;
  background-image: url(/img/bg-L-p.svg?v=2);
}
.sc-doctor .cnt01 .doctor-left .img-area::after {
  top: 0;
  bottom: 0;
  right: calc(var(--r) * 1%);
  aspect-ratio: 470 / 1000;
  background-image: url(/img/bg-Y-p.svg);
}
.sc-doctor .cnt01 .doctor-left img {
  max-width: 55.2rem;
  aspect-ratio: 667 / 1113;
  margin-left: 2.68vw;
}
.sc-doctor .cnt01 .doctor-right {
  flex: 1;
  padding: 14.7rem 8.75vw 14.7rem 10.3125vw;
}
.sc-doctor .cnt01 .sc-ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 1.4rem;
}
.sc-doctor .cnt01 .sc-ttl .txt {
  font-weight: 400;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -1.2px;
}
.sc-doctor .cnt01 .desc {
  margin-top: 5rem;
}
.sc-doctor .cnt01 .btn {
  margin-top: 3.4rem;
}
.sc-doctor .cnt01 .swiper-wrapper {
  gap: 1.6rem;
  margin-top: 5rem;
}
.sc-doctor .cnt01 .info-box {
  flex: 1;
  border-radius: 2rem;
}
.sc-doctor .cnt01 .info-box .txt-area {
  padding: 2.2rem 2.4rem 0;
}
.sc-doctor .cnt01 .info-box.info01 {
  background: linear-gradient(138deg, #fdf7e5 23.6%, #e4d6a9 100%);
}
.sc-doctor .cnt01 .info-box.info02 {
  background: linear-gradient(138deg, #f4f5f7 23.6%, #cce3eb 100%);
}
.sc-doctor .cnt01 .info-box.info03 {
  background: linear-gradient(131deg, #f0f5fe 26.57%, #a8c0ed 100%);
}
.sc-doctor .cnt01 .info-desc {
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: -0.32px;
}
.sc-doctor .cnt01 .info-box .info-ttl {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.48px;
}
.sc-doctor .cnt01 .info-box.info01 .info-ttl {
  color: #9c2328;
}
.sc-doctor .cnt01 .info-box.info02 .info-ttl {
  color: #004e73;
}
.sc-doctor .cnt01 .info-box.info03 .info-ttl {
  color: #5380e4;
}
.sc-doctor .cnt01 .info-ico {
  display: block;
  width: 17.6rem;
  aspect-ratio: 176 / 130;
  margin-left: auto;
}
.sc-doctor .cnt01 .info-ico.ico01 {
  background: url(/img/ico-doctor01.svg) no-repeat center center / 100% auto;
}
.sc-doctor .cnt01 .info-ico.ico02 {
  background: url(/img/ico-doctor02.svg) no-repeat center center / 100% auto;
}
.sc-doctor .cnt01 .info-ico.ico03 {
  background: url(/img/ico-doctor03.svg) no-repeat center center / 100% auto;
}
.sc-doctor .group-cnt.cnt02 {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 25.8rem 4.6875vw 25.8rem 8.3vw;
  background: url(/img/bg-intro01.png) no-repeat center center / cover;
  color: #fff;
}
.sc-doctor .group-cnt.cnt02::after {
  content: 'Leaders Yoon Eye Clinic';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  color: #fff;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 2.8rem;
  font-weight: 75;
  line-height: 1;
  letter-spacing: 1.4px;
  transform: translateY(-50%) rotate(90deg);
}
.sc-doctor .cnt02 .desc {
  margin-top: 3rem;
}
.sc-doctor .cnt02 .btn {
  margin-top: 5rem;
}

/* faq */
.sc-faq {
  padding: 15.4rem 0;
}
.sc-faq .inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.sc-faq .tab-list {
  justify-content: space-between;
}
.sc-faq .faq-left {
  display: flex;
  flex-direction: column;
  width: 24.0625%;
}
.sc-faq .faq-left .desc {
  flex: 1;
  margin: 5rem 0 4rem;
}
.sc-faq .faq-left .img-area {
  width: 100%;
  aspect-ratio: 1;
  border-bottom-left-radius: 7rem;
  border-top-right-radius: 7rem;
  background: url(/img/img-faq01.png?v=2) no-repeat center center / 100% auto;
}
.sc-faq .faq-right {
  width: 55.2vw;
}
.sc-faq .faq-right .cnt-item {
  counter-increment: faq;
  border-bottom: 1px solid var(--color-gray3);
}
.sc-faq .faq-right .con {
  margin-top: 2.8rem;
}
.sc-faq .faq-right .accordion-btn::before {
  content: counter(faq);
}

/* 커뮤니티 */
.sc-community {
  padding: 18rem 0 20rem;
}
.sc-community .group-ttl {
  display: flex;
  gap: 5.2vw;
}
.sc-community .group-ttl .sc-ttl {
  width: 47.5%;
}
.sc-community .group-ttl .txt-area {
  width: 46.25%;
}
.sc-community .group-cnt {
  display: flex;
  gap: 5.2vw;
  margin-top: 6.6rem;
}
.sc-community .notice {
  width: 47.5%;
}
.sc-community .notice .ttl-area {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sc-community .notice .ttl {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.4rem;
  border-radius: 1.6rem;
  background: var(--color-primary);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: #fff;
}
.sc-community .notice-list {
  counter-reset: notice 4;
  margin-top: 2rem;
}
.sc-community .notice-item {
  counter-increment: notice -1;
}
.sc-community .notice-item .link-notice {
  width: 100%;
  border-bottom: 1px solid var(--color-gray3);
}
.sc-community .notice-item .link-notice::before {
  content: counter(notice);
}
.sc-community .notice-item .list-ttl {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.sc-community .notice-item .time {
  width: 15rem;
  color: var(--color-gray7);
  text-align: center;
  font-family: 'Spoqa Han Sans Neo';
  font-size: 1.6rem;
}
.sc-community .news {
  position: relative;
  width: 46.25%;
}
.sc-community .news .tab-con {
  margin-top: 1.8rem;
}
.sc-community .news .swiper {
  position: static;
  overflow: hidden;
}
.sc-community .news .swiper .img-area {
  border: 1px solid var(--color-gray3);
  overflow: hidden;
}
.sc-community .news .swiper .img-area img {
  aspect-ratio: 1 / 1;
}
.sc-community .news .swiper-controller {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
}
.sc-community .txt {
  font-weight: 500;
  font-size: 1.6rem;
}
/* .sc-community .news .swiper-controller .btn { transform: rotate(0deg);} */

/* 병원 둘러보기 */
.sc-hospital {
  padding: 12.2rem 0;
}
.sc-hospital .group-ttl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.sc-hospital .swiper {
  position: relative;
  margin-top: 5rem;
  overflow: hidden;
  aspect-ratio: 1600 / 600;
}
.sc-hospital .img-area,
.sc-hospital .img-area img {
  height: 100%;
}
.sc-hospital .img-area img {
  object-fit: cover;
}

@media screen and (max-width: 1440px) {
  /* Visual Section */
  .sc-visual .visual-ttl {
    font-size: 8.8rem;
  }
  .sc-visual .swiper-slide .txt-area .desc {
    font-size: 2.64rem;
  }
  .sc-visual .thumbnail-item .txt {
    font-size: 1.65rem;
  }
  .sc-visual .group-scroll-down .scroll-down-txt {
    font-size: 1.54rem;
  }

  /* Intro Section */
  .sc-intro .group-txt .txt {
    font-size: 13.2rem;
  }

  /* Clinic Section */
  .sc-clinic .clinic-right .txt-area .txt {
    font-size: 1.98rem;
  }
  .sc-clinic .clinic-right .txt-area .ttl {
    font-size: 5.5rem;
  }
  .sc-clinic .clinic-right .desc {
    font-size: 2.2rem;
  }

  /* Doctor Section */
  .sc-doctor .cnt01 .sc-ttl .txt {
    font-size: 6.6rem;
  }
  .sc-doctor .cnt01 .info-desc {
    font-size: 1.76rem;
  }
  .sc-doctor .cnt01 .info-box .info-ttl {
    font-size: 2.64rem;
  }
  .sc-doctor .group-cnt.cnt02::after {
    font-size: 3.08rem;
  }

  /* Community Section */
  .sc-community .notice .ttl {
    font-size: 2.2rem;
  }
  .sc-community .notice-item .time {
    font-size: 1.76rem;
  }
}

@media screen and (max-width: 1200px) {
  .sc-doctor .group-cnt.cnt01 {
    height: auto;
    flex-direction: column-reverse;
  }
  .sc-doctor .cnt01 .doctor-left,
  .sc-doctor .cnt01 .doctor-right {
    width: 100%;
  }

  .sc-community .group-ttl {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 960px) {
  /* Visual Section */
  .sc-visual .visual-ttl {
    font-size: 9.68rem;
  }
  .sc-visual .swiper-slide .txt-area .desc {
    font-size: 2.904rem;
  }
  .sc-visual .thumbnail-item .txt {
    font-size: 1.815rem;
  }
  .sc-visual .group-scroll-down .scroll-down-txt {
    font-size: 1.694rem;
  }

  /* Intro Section */
  .sc-intro .group-txt .txt {
    font-size: 14.52rem;
  }

  /* Clinic Section */
  .sc-clinic .clinic-right .txt-area .txt {
    font-size: 2.178rem;
  }
  .sc-clinic .clinic-right .txt-area .ttl {
    font-size: 6.05rem;
  }
  .sc-clinic .clinic-right .desc {
    font-size: 2.42rem;
  }

  /* Doctor Section */

  .sc-doctor .cnt01 .doctor-right {
    padding: 10rem 8.75vw 10rem 10.3125vw;
  }
  .sc-doctor .cnt01 .sc-ttl .txt {
    font-size: 7.26rem;
  }
  .sc-doctor .cnt01 .info-desc {
    font-size: 1.936rem;
  }
  .sc-doctor .cnt01 .info-box .info-ttl {
    font-size: 2.904rem;
  }
  .sc-doctor .group-cnt.cnt02::after {
    font-size: 3.388rem;
  }

  /* Community Section */
  .sc-community .notice .ttl {
    font-size: 2.42rem;
  }
  .sc-community .notice-item .time {
    font-size: 1.936rem;
  }
}

@media screen and (max-width: 768px) {
  /* 비주얼 영역 */
  .sc-visual {
    /* --height: 100; */
    height: calc(var(--vh, 1vh) * 100);
  }
  .sc-visual .visual-ttl {
    font-size: 4rem;
    letter-spacing: -1.6px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  }
  /* .sc-visual .group-swiper, */
  /* .sc-visual .swiper, */
  .sc-visual .swiper-slide {
    height: calc(var(--vh, 1vh) * 100);
  }
  /* .sc-visual .swiper-slide .img-area, */
  /* .sc-visual .swiper-slide .img-area .img */
  .sc-visual .swiper-slide::before,
  .sc-visual .swiper-slide::after {
    content: none;
  }
  .sc-visual .swiper-slide .txt-area {
    top: 36%;
  }
  .sc-visual .swiper-slide .txt-area .visual-ttl {
    font-size: 3.6rem;
    letter-spacing: -1.44px;
  }
  .sc-visual .swiper-slide .txt-area .desc {
    margin-top: 3rem;
    font-size: 1.8rem;
    letter-spacing: -0.72px;
  }
  .sc-visual .swiper-controller {
    /* bottom: 26.52%; */
    bottom: calc(var(--vh, 1vh) * 20);
    aspect-ratio: 270 / 136;
  }
  .sc-visual .swiper-controller .btn {
    width: 3rem;
    aspect-ratio: 1 / 1;
  }
  .sc-visual .swiper-controller .btn-prev {
    left: -0.7rem;
  }
  .sc-visual .swiper-controller .btn-next {
    right: -0.7rem;
  }
  .sc-visual .thumbnail-list {
    gap: 1.4rem;
  }
  .sc-visual .thumbnail-item {
    width: 7.5rem;
    height: 12rem;
  }
  .sc-visual .thumbnail-item.active {
    width: 7.5rem;
  }
  .sc-visual .thumbnail-item .img-area {
    height: 6.7rem;
    aspect-ratio: 75 / 67;
    margin-bottom: 0.75rem;
    border-radius: 1.5rem;
    border: 1.2px solid #fff;
    box-shadow: 0px 1.333px 13.333px 0px rgba(0, 0, 0, 0.3);
  }
  .sc-visual .thumbnail-item.active .img-area {
    aspect-ratio: 75 / 120;
  }
  .sc-visual .thumbnail-item.active .img-area {
    height: 12rem;
  }
  .sc-visual .thumbnail-item .txt {
    font-size: 1.2rem;
    letter-spacing: -0.24px;
  }
  .sc-visual .autoplay-progress {
    margin-top: 2rem;
  }

  /* 병원 소개 영역 */
  .sc-intro {
    padding: 6.2rem 0 11.3rem;
  }
  .sc-intro .group-txt .ani-wrapper {
    padding: 0 2.7rem;
  }
  .sc-intro .group-txt .ani-wrapper:nth-child(1) {
    padding-left: 0;
  }
  .sc-intro .group-txt .ani-wrapper:nth-child(2) {
    margin-top: 0;
    padding-right: 0;
  }
  .sc-intro .group-txt .txt {
    font-size: 6rem;
    letter-spacing: -1.2;
    text-align: center;
  }
  .sc-intro .group-cnt {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
  }
  .sc-intro .group-cnt.cnt2 {
    flex-direction: column-reverse;
  }
  .sc-intro .group-cnt.cnt2 .img-area {
    margin-left: auto;
  }
  .sc-intro .group-cnt .img-area {
    width: 94.4%;
    aspect-ratio: 354 / 208;
    margin-top: 2rem;
  }
  .sc-intro .group-cnt .txt-area {
    width: 100%;
    padding: 0 2.2rem;
  }
  .sc-intro .group-cnt .txt-area .btn {
    margin-top: 3rem;
  }

  /* 클리닉 영역 */
  .sc-clinic {
    padding: 7rem 0;
  }
  .sc-clinic .desc {
    margin-top: 1.4rem;
    font-size: 1.7rem;
    letter-spacing: -0.34px;
  }
  .sc-clinic .clinic-list-wrap {
    margin: 0 -2.2rem;
    padding: 0 0 0.8rem;
  }
  .sc-clinic .clinic-list {
    width: fit-content;
    margin: 4rem auto 0;
    gap: 1rem;
    padding: 0 2.2rem;
  }
  .sc-clinic .clinic-list .clinic-item {
    flex-shrink: 0;
    gap: 0.4rem;
    width: 9rem;
    padding: 2.2rem 0 2.6rem;
  }
  .sc-clinic .clinic-list .img-area {
    max-width: 4rem;
    aspect-ratio: 40 / 57;
  }
  .sc-clinic .clinic-list .txt {
    font-size: 1.4rem;
    letter-spacing: -0.28px;
  }
  .sc-clinic .clinic-swiper {
    margin-top: 4rem;
  }
  .sc-clinic .clinic-swiper .swiper-wrapper {
    padding: 0;
  }
  .sc-clinic .clinic-swiper .swiper-inner {
    flex-direction: column;
    align-self: flex-start;
    gap: 2.2rem;
  }
  .sc-clinic .clinic-swiper .img-area {
    width: 100%;
    max-width: unset;
    border-top-left-radius: 0;
  }
  .sc-clinic .clinic-swiper .txt-area {
    width: 100%;
    position: relative;
    padding-right: 7rem;
  }
  .sc-clinic .clinic-swiper .cnt-ttl {
    gap: 1.2rem;
    font-size: 2.8rem;
    letter-spacing: -1.12px;
  }
  .sc-clinic .clinic-swiper .cnt-ttl::before {
    width: 2rem;
    height: 2.8rem;
  }
  .sc-clinic .clinic-swiper .cnt-desc {
    margin-top: 1.4rem;
    font-size: 1.7rem;
    letter-spacing: -0.34px;
  }
  .sc-clinic .clinic-swiper .btn-primary {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
    padding: 0;
    border: none;
  }

  /* 의료진 소개 */
  .sc-doctor .group-cnt.cnt01 {
    height: unset;
    margin-top: 6rem;
    margin-bottom: 10rem;
  }
  .sc-doctor .cnt01 .doctor-left {
    width: 100%;
  }
  .sc-doctor .cnt01 .doctor-left .img-area {
    margin-top: 5rem;
    padding-top: 2rem;
  }
  .sc-doctor .cnt01 .doctor-left .img-area::before,
  .sc-doctor .cnt01 .doctor-left .img-area::after {
    width: 100%;
    max-width: 23rem;
  }
  .sc-doctor .cnt01 .doctor-left .img-area::before {
    left: calc(var(--l) * 1%);
    aspect-ratio: 230 / 333;
  }
  .sc-doctor .cnt01 .doctor-left .img-area::after {
    right: calc(var(--r) * 1%);
    aspect-ratio: 230 / 485;
  }
  .sc-doctor .cnt01 .doctor-left img {
    width: 100%;
    max-width: 26.3rem;
    aspect-ratio: 215 / 360;
    margin-left: 4.8vw;
  }
  .sc-doctor .cnt01 .doctor-right {
    flex: 1;
    padding: 0;
  }
  .sc-doctor .cnt01 .doctor-right .txt-area {
    padding: 0 2rem;
  }
  .sc-doctor .cnt01 .sc-ttl {
    gap: 1rem;
    margin-top: 1.2rem;
  }
  .sc-doctor .cnt01 .sc-ttl .txt {
    font-size: 3rem;
    letter-spacing: -0.6px;
  }
  .sc-doctor .cnt01 .desc,
  .sc-doctor .cnt01 .btn {
    margin-top: 3rem;
  }
  .sc-doctor .cnt01 .doctor-info {
    gap: 1.5rem;
    margin-top: 4rem;
    padding: 0 2rem;
  }
  .sc-doctor .cnt01 .swiper-wrapper {
    gap: 0;
  }
  .sc-doctor .cnt01 .info-box {
    flex: unset;
    flex-shrink: 0;
    min-width: 0;
    width: 22rem;
    border-radius: 1.8rem;
  }
  .sc-doctor .cnt01 .info-box + .info-box {
    margin-left: 1.6rem;
  }
  .sc-doctor .cnt01 .info-box .txt-area {
    padding: 2rem 2rem 0;
  }
  .sc-doctor .cnt01 .info-desc {
    font-size: 1.6rem;
    line-height: 1.3;
    letter-spacing: -0.32px;
  }
  .sc-doctor .cnt01 .info-box .info-ttl {
    font-size: 2.2rem;
    letter-spacing: -0.44px;
  }
  .sc-doctor .cnt01 .info-ico {
    width: 13rem;
    aspect-ratio: 130 / 85;
  }

  .sc-doctor .group-cnt.cnt02 {
    align-items: center;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0 2rem;
  }
  .sc-doctor .group-cnt.cnt02::after {
    content: none;
  }
  .sc-doctor .cnt02 .btn {
    margin-top: 4rem;
  }

  /* faq */
  .sc-faq {
    padding: 10rem 0;
  }
  .sc-faq .inner {
    flex-direction: column;
  }
  .sc-faq .tab-list {
    justify-content: space-between;
  }
  .sc-faq .faq-left,
  .sc-faq .faq-right {
    width: 100%;
  }
  .sc-faq .faq-left .desc {
    margin: 3rem 0;
  }
  .sc-faq .faq-right {
    margin-top: 4rem;
  }
  .sc-faq .faq-right .tab-con {
    margin-top: 2rem;
  }

  /* 커뮤니티 */
  .sc-community {
    padding: 10rem 0;
  }
  .sc-community .group-ttl {
    gap: 4rem;
  }
  .sc-community .group-ttl .sc-ttl,
  .sc-community .group-ttl .txt-area,
  .sc-community .notice,
  .sc-community .news {
    width: 100%;
  }
  .sc-community .group-cnt {
    flex-direction: column;
    gap: 5.4rem;
    margin-top: 5.4rem;
  }
  .sc-community .notice .ttl-area {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .sc-community .notice .ttl {
    padding: 1rem;
    border-radius: 1.2rem;
    font-size: 1.6rem;
    letter-spacing: -0.32px;
  }
  .sc-community .notice-item .link-notice::before {
    content: none;
  }
  .sc-community .notice-item .time {
    width: 8rem;
    font-size: 1.3rem;
  }
  .sc-community .news .tab-con {
    margin-top: 2rem;
  }
  .sc-community .news .tab-item a {
    min-width: 10.5rem;
  }

  /* 병원 둘러보기 */
  .sc-hospital {
    padding: 10rem 0;
  }
  .sc-hospital .group-ttl {
    flex-direction: column;
    gap: 3rem;
  }
  .sc-hospital .swiper {
    aspect-ratio: 333 / 400;
  }
}