/* sub-top-banner */
.sub-top-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sub-top-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  background: url("../img/sub-top-banner1.png") no-repeat center center / cover;
  z-index: 0;
  animation: movingBackground 30s ease-in-out infinite;
}
.sub-top-banner.sub2::before {
  background: url("../img/sub-top-banner2.png") no-repeat center center / cover;
}

@keyframes movingBackground {
  0% {
    transform: translate(-10%, -10%) scale(1.1);
  }
  50% {
    transform: translate(0%, 0%) scale(1.15);
  }
  100% {
    transform: translate(-10%, -10%) scale(1.1);
  }
}

.sub-top-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 25, 53, 0.6);
  z-index: 1;
}

.sub-top-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 140px 0 60px;
}

.sub-top-banner-title {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.sub-top-banner-subtitle {
  font-size: 60px;
  font-weight: 700;
}
/* sub-tab */
.sub-tab {
  width: 100%;
  margin-bottom: 40px;
}
.sub-tab .content_inner {
  display: flex;
  justify-content: center;
}
.sub-tab ul {
  position: relative;
  z-index: 2;
  border-radius: 35px;
  background: rgba(0, 25, 53, 0.6);
  display: inline-flex;
  color: #fff;
  padding: 15px 30px;
  align-items: center;
  width: fit-content;
}
.sub-tab ul li {
  flex: 0 0 auto;
  padding: 0 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover a::after {
    width: 100%;
  }
  &.active {
    font-weight: 700;
  }
}
.sub-tab ul li a {
  padding: 10px;
  display: block;
  line-height: 1;
  position: relative;
}
.sub-tab ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: #eee;
  transition: width 0.25s ease-out;
}
.sub-tab ul li.active a::after {
  width: 100%;
}
.sub-tab ul li.active a {
  font-weight: 700;
}
/* m1_1 */
.m1_1 {
  background: linear-gradient(180deg, #f8fcff 0%, #f4faff 86.12%);
  position: relative;
}
.m1_1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 130px;
  background: url("../img/m11-after.png") no-repeat 50% 50% / contain;
  white-space: nowrap;
  opacity: 0;
  animation:
    m11-after-in 1s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards,
    m11-blink 2.5s ease-in-out 1.3s infinite;
}
@keyframes m11-after-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes m11-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.m11-title {
  color: #333;
  text-align: center;
  font-size: 24px;
  margin-bottom: 35px;
  position: relative;
  z-index: 2;
}
.m11-title em {
  font-weight: 700;
  color: #003876;
}
.m11-banner {
  width: 100%;
  background: url("../img/m11-banner.png") no-repeat 50% 50% / cover;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.m11-banner .inner {
  padding: 105px 30px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
}
.m11-banner .desc {
  font-size: 30px;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.m11-banner .desc strong {
  font-weight: 700;
}
.m11-banner .desc strong i {
  display: inline-block;
  position: relative;
  height: 1em;

  &::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    animation: doeing 1.2s ease-in-out infinite;
  }
  &:nth-of-type(1)::after {
    animation-delay: 0s;
  }
  &:nth-of-type(2)::after {
    animation-delay: 0.15s;
  }
  &:nth-of-type(3)::after {
    animation-delay: 0.3s;
  }
  &:nth-of-type(4)::after {
    animation-delay: 0.45s;
  }
  &:nth-of-type(5)::after {
    animation-delay: 0.6s;
  }
  &:nth-of-type(6)::after {
    animation-delay: 0.75s;
  }
}

@keyframes doeing {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}

.sub-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 80px;
}
.sub-title-logo {
  width: 100%;
  max-width: 35px;
  margin-bottom: 10px;
}
.sub-title-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sub-title i {
  color: #294989;
  font-size: 20px;
}
.sub-title em {
  color: #8e8e8e;
  font-size: 20px;
  line-height: 1.5;
}
.sub-title h3 {
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sub-title-desc {
  font-size: 20px;
  margin-top: 30px;
}
.sub-title.w i,
.sub-title.w em,
.sub-title.w h3,
.sub-title.w .sub-title-desc {
  color: #fff;
}
.m1_1_2 {
  background: url("../img/m11_2_bg.png") no-repeat 50% 50% / cover;
}
.m11-flex-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.m11-flex-wrap:not(:last-of-type) {
  margin-bottom: 60px;
}

.m11-flex-wrap:nth-of-type(odd) {
  flex-direction: row-reverse;
  text-align: right;
}
.m11-flex-wrap:nth-of-type(odd) .m11-img {
  .img-wrap {
    border-radius: 50px 0 0 0;
  }
  &::before {
    left: auto;
    right: -30px;
  }
}
.m11-img {
  width: 100%;
  max-width: 560px;
  line-height: 0;
  position: relative;
  .img-wrap {
    border: 6px solid #e3f1ff;
    width: 100%;
    height: 100%;
    border-radius: 0 50px 0 0;
    overflow: hidden;
    line-height: 0;
    position: relative;
  }
  &::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -30px;
    width: 100%;
    height: 100%;
    display: block;
    background: #e3f1ff;
    z-index: -1;
  }
}
.m11-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m11-text {
  width: 100%;
}
.m11-tit {
  color: #294989;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}
.m11-text p {
  font-size: 24px;
}
/* m1_2 */
.doctor-wrap {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.doctor-wrap:not(:last-of-type) {
  margin-bottom: 140px;
}
.doctor-img-wrap {
  width: 100%;
  max-width: 560px;
  line-height: 0;
  position: relative;
}
.doctor-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.doctor-img-wrap .bg-logo {
  position: absolute;
  top: -40px;
  right: 0;
  width: 120%;
  height: 100%;
  min-width: 120%;
  min-height: 100%;
  object-fit: contain;
  object-position: 100% 50%;
  display: block;
  pointer-events: none;
}
.doctor-img-wrap .doctor-img {
  position: relative;
  z-index: 2;
}
.doctor-text-wrap {
  width: 100%;
}
.doctor-name {
  font-size: 20px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.doctor-name-ko {
  color: #333;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  line-height: 1;
  font-weight: 700;
}
.doctor-name-ko b {
  color: #294989;
  font-size: 1.5em;
}
.doctor-name-en {
  color: #e0e0e0;
}
.doctor-career {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  margin: 20px 0;
}
.doctor-cert {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  margin: 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
}
.doctor-cert li {
  display: flex;
  gap: 0.5em;
  align-items: flex-start;
  &::before {
    content: "•";
  }
}
.doctor-papers {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.doctor-papers li:not(:last-of-type) {
  margin-bottom: 10px;
}
/* m1_3 */
/* 보유장비 */
.sub12_ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 16px;
}
.sub12_ul li {
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.sub12_ul .img_wrap {
  overflow: hidden;
}
.sub12_ul .img_wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sub12_ul h6 {
  font-size: 30px;
  font-weight: 700;
  color: #294989;
  padding: 20px 0 0px;
}
.sub12_ul p {
  font-size: 18px;
  color: #8e8e8e;
}

/* m1_4: 둘러보기 갤러리 슬라이더 */
.m1_4 {
  background: url("../img/m1_4.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
.m14-gallery {
  width: 100%;
}

/* 메인 슬라이더 */
.m14-main-slider {
  width: 100%;
  margin-bottom: 40px;
  position: relative;
  border-radius: 0 30px 30px 30px;
  overflow: hidden;
}

.m14-slide-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f0f0f0;
}

.m14-slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m14-main-slider .swiper-button-prev,
.m14-main-slider .swiper-button-next {
  width: 50px;
  height: 100px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0;
  color: #fff;
  opacity: 0.8;
  transition:
    opacity 0.3s ease,
    background 0.3s ease;
}

.m14-main-slider .swiper-button-prev:hover,
.m14-main-slider .swiper-button-next:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.15);
}

.m14-main-slider .swiper-button-prev::after,
.m14-main-slider .swiper-button-next::after {
  font-size: 20px;
  font-weight: 700;
}

.m14-main-slider .swiper-button-prev {
  left: 0px;
}

.m14-main-slider .swiper-button-next {
  right: 0px;
}

/* 썸네일 그리드 */
.m14-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.m14-thumb {
  aspect-ratio: 16/9;
  border-radius: 0 38px 38px 38px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
  /* background: #000; */
  /* filter: brightness(0.45); */
}

.m14-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(51, 51, 51, 0.5);
  border-radius: 0 38px 38px 38px;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.m14-thumb:hover {
  /* filter: brightness(0.7); */
  /* transform: scale(1.05); */
}

.m14-thumb:hover::before {
  opacity: 0.5;
}

.m14-thumb.active {
  filter: brightness(1);
  box-shadow: 0 0 0 3px #00a1e9;
}

.m14-thumb.active::before {
  opacity: 0;
}

.m14-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

/* m2_1 */
.m2_1 {
  background: url("../img/m21-1-bg.png") no-repeat 50% 50% / cover;
}
.sub-top-img {
  line-height: 0;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 2px 2px 20px 0 rgba(175, 192, 240, 0.3);
}
.sub-top-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.w-box {
  position: relative;
  border-radius: 60px;
  background: #fff;
  box-shadow: 2px 2px 20px 0 rgba(134, 148, 186, 0.3);
  padding: 100px 60px;
  overflow: hidden;
}

/* 배경 떠다니는 블러 원 3개 */
.w-box-bg {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: w-box-float 5s ease-in-out infinite;
}
/* 큰 원 1: 좌상단 – 원 중심이 박스 좌상단 근처, 살짝 밖으로 */
.w-box-bg-1 {
  width: 425px;
  height: 382px;
  background: rgba(116, 187, 223, 0.3);
  filter: blur(130px);
  top: 20%;
  left: 30%;
  margin-top: -180px;
  margin-left: -200px;
  animation-delay: 0s;
}
/* 큰 원 2: 우하단 – 원 중심이 박스 우하단 근처, 살짝 밖으로 */
.w-box-bg-2 {
  width: 425px;
  height: 382px;
  background: rgba(116, 187, 223, 0.3);
  filter: blur(140px);
  bottom: 20%;
  right: 20%;
  margin-bottom: -180px;
  margin-right: -200px;
  animation-delay: -4s;
}
/* 작은 원 3: 박스 우측 중앙~살짝 아래 */
.w-box-bg-3 {
  width: 236px;
  height: 212px;
  background: rgba(116, 187, 223, 0.3);
  filter: blur(150px);
  top: 55%;
  left: 10;
  margin-top: -106px;
  margin-right: -100px;
  animation-delay: -8s;
}
@keyframes w-box-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(50%, -50%) scale(1.12);
  }
  50% {
    transform: translate(-50%, 50%) scale(0.88);
  }
  75% {
    transform: translate(50%, 50%) scale(1.06);
  }
}
.w-flex-wrap {
  display: flex;
  align-items: center;
  gap: 60px;
  position: relative;
}
.w-flex-wrap:nth-of-type(even) {
  flex-direction: row-reverse;
}
.w-flex-wrap:not(:last-of-type) {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #e0e0e0;
}
.w-img {
  flex: 1;
  width: 100%;
  max-width: 450px;
  line-height: 0;
  overflow: hidden;
  border-radius: 0 30px 30px 30px;
}
.w-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.w-text {
  flex: 1.5;
  width: 100%;
}
.w-text h4 {
  color: #294989;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}
.w-text p {
  line-height: 1.5;
}
.m2_1_3 {
  background: url("../img/m21-3-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
.sub-title.m40 {
  margin-bottom: 40px;
}
h5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  color: #cdf0ff;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 60px;

  &::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #e0e0e0;
  }
}
.ul-box-wrap {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.ul-box-wrap li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 45px;
  background: #fff;
  color: #294989;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  border-radius: 0 30px;
}
.ul-box-wrap li .bg-icon {
  position: absolute;
  top: -13px;
  right: 20px;
  width: 45%;
  aspect-ratio: 1/1;
}

/* m2_1_4 */
.m2_1_4 {
  position: relative;
}
.qna-wrap {
  display: flex;
  flex-direction: column;
  gap: 50px;
  position: relative;
}
.qna-wrap > * {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 15px 50px;
  box-shadow: 2px 2px 20px 0 rgba(175, 192, 240, 0.2);
}
.qna-wrap > * .q,
.qna-wrap > * .a {
  font-size: 60px;
  font-weight: 700;
}
.qna-wrap > * strong {
  font-size: 24px;
}
.question {
  border-radius: 0 60px 60px 60px;
  align-self: flex-start;
  background: #294989;
  color: #fff;
}
.answer {
  border-radius: 60px 0 60px 60px;
  align-self: flex-end;
  background: #fff;
}
.answer .a {
  color: #294989;
}
/* m2_2 */
.m2_2 {
  background: url("../img/m22-1-bg.png") no-repeat 50% 50% / cover;
}
.m2_2_3 {
  background: url("../img/m22-3-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
/* m3_1 */
.sub-top-banner.sub3::before {
  background: url("../img/sub-top-banner3.png") no-repeat center center / cover;
}
.m3_1 {
  background: url("../img/m31-1-bg.png") no-repeat 50% 50% / cover;
}
.m3_1_3 {
  background: url("../img/m31-3-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
/* m3_2 */
.m3_2 {
  background: url("../img/m32-1-bg.png") no-repeat 50% 50% / cover;
}
.m3_2_3 {
  background: url("../img/m32-3-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
/* m3_3 */
.m3_3 {
  background: url("../img/m33-1-bg.png") no-repeat 50% 50% / cover;
}
.m3_3_3 {
  background: url("../img/m33-3-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
/* m3_4 */
.m3_4 {
  background: url("../img/m34-1-bg.png") no-repeat 50% 50% / cover;
}
.m3_4_3 {
  background: url("../img/m34-3-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
/* m3_5 */
.m3_5 {
  background: url("../img/m35-1-bg.png") no-repeat 50% 50% / cover;
}
.m3_5_3 {
  background: url("../img/m35-3-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
/* m3_6 */
.m3_6 {
  background: url("../img/m36-1-bg.png") no-repeat 50% 50% / cover;
}
.m3_6_3 {
  background: url("../img/m36-3-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
/* m4_1 */
.sub-top-banner.sub4::before {
  background: url("../img/sub-top-banner4.png") no-repeat center center / cover;
}
.m4_1_2 {
  background: url("../img/m41-2-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
.m4_1_2 .inner {
  margin: 90px auto;
  max-width: 1280px;
  width: 95%;
  padding: 65px 50px;
  border-radius: 40px;
  background: rgba(0, 56, 118, 0.08);
}
.sub-title.b {
  color: #002265;
}
.m4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.m4-grid > li {
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.6);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
.m4-grid li h6 {
  border-radius: 30px;
  color: #fff;
  padding: 10px 30px;
  font-size: 24px;
  font-weight: 700;
}
.m4-grid li h6.sky {
  background: linear-gradient(0deg, #0064ac -26%, #008be3 100%);
}
.m4-grid li h6.blue {
  border-radius: 30px;
  background:
    linear-gradient(180deg, #0052ac 0%, #003876 100%),
    linear-gradient(0deg, #0064ac -26%, #008be3 100%);
}
.m4-grid > li ol {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.m4-grid > li ol li,
.m4-grid > li p {
  text-align: center;
  color: #4c4c4c;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}
.m4-grid > li ol li::before {
  content: "•";
  margin-right: 10px;
}
/* m4_2 */
.m4_2_2 {
  background: url("../img/m42-2-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}

/* m4_3 */
.m4_3_2 {
  background: url("../img/m43-2-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}

/* m4_4 */
.m4_4_2 {
  background: url("../img/m44-2-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
.m4_4_2 .m4-grid img {
  width: 70%;
  max-width: 210px;
}

.m4_4_2 .m4-grid > li:first-of-type {
  grid-column: span 2;
  & h6 {
    background: linear-gradient(180deg, #42b2e0 0%, #028ac2 100%);
  }
}
.m4_4_2 .m4-grid > li:first-of-type ol {
  flex-direction: row;
  gap: 20px;
}
/* m5_1 */
.sub-top-banner.sub5::before {
  background: url("../img/sub-top-banner5.png") no-repeat center center / cover;
}
.m5_1_2 {
  background: url("../img/m51-2-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}
.m5_1_2 .qna-wrap > * {
  box-shadow: 0 2px 15px 0 rgba(146, 151, 166, 0.2);
}
.m5_1_2 .question {
  background: #fff;
  color: #282828;
  & .q {
    background: linear-gradient(180deg, #fafafa 0%, #dedede 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* m5_2 */
.m5_2_2 {
  background: url("../img/m52-2-bg.png") no-repeat 50% 50% / cover;
  background-attachment: fixed;
}