/* 팝업 오버레이 */
.popup_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 팝업 오버레이 활성화 시 */
.popup_overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* section01*/
.sec1{
  background: url(../img/section1-bglogo.png)no-repeat top right;
}
.sec1-top-arrow-wrap{
  position: relative; 
  width: 204px;
  height: 204px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-txt{
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.002em;
}
.sec1-top-arrow-wrap .circle-text {
  width: 140px;
  height: 140px;
  display: block;
}
.sec1-top-arrow{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 67px;
  height: 67px;
  background: var(--color-logo-skyBlue);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.sec1-top-arrow svg {
  position: relative;
  z-index: 2;
  width: 13px;
  height: 13px;
}
.circle-text {
  animation: spin 8s ease-in-out infinite alternate;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ripple: 커서 위치 기준으로 퍼짐 (DISCOVER MORE 유형) */
.sec1-top-arrow .ripple {
  position: absolute;
  width: 280px;
  height: 280px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.93);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  pointer-events: none;
  transition: transform 0.65s cubic-bezier(0.33, 1, 0.68, 1);
}

.sec1-top-arrow:hover .ripple {
  transform: translate(-50%, -50%) scale(1);
}

.sec1-top-arrow:hover {
  color: var(--color-logo-skyBlue);
}
.content-txt-bot{
  display: flex;
  align-items: center;
}
.content-txt-bot p{
  color: var(--color-desc-black);
  font-size: 22px;
  font-weight: 700;
}
.content-txt-bot i{
  font-family: 'YeongyanggunEumsikdimibang';
  font-size: 32px;
  font-weight: 400;
}
.content-txt p{
  line-height: 1.7;
}
.sec1 .container12{
  display: flex;
  gap: 50px;
}
.sec1 .container12 .left-box{
  flex: 1.2;
}
.sec1 .container12 .right-box{
  position: relative;
  flex: 1;
  width: auto;
  max-height: 615px;
}
.sec1 .container12 .right-box::before{
  content: '';
  position: absolute;
  top: 20px;
  left: 60px;
  width: 100%;
  height: 100%;
  background: url(../img/doc_before.png)no-repeat center / cover;
  z-index: -1;
}
.sec2{
  background: url(../img/section2-bg.png)no-repeat center / cover;
}
:root {
  --peek: 600px
}

.health__slider {
  position: relative;
  width: 100%;
  overflow: visible;
}

.health__slider .swiper {
  width: 100%;
  overflow: visible;
}

.health__slider .swiper-wrapper {
  will-change: transform
}

.health__slider .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 300px;
  -webkit-transition: width .6s;
  transition: width .6s
}

.health__slider .swiper-slide .swiper__img {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 300px;
  -webkit-transition: width .6s ease;
  transition: width .6s ease;
  overflow: hidden;
  transition: border-radius 0.6s ease;
}
.health__slider .swiper-slide .swiper__img img{
  vertical-align: middle;
  font-size: 1em;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  height: 486px;
  user-select: none;
  -webkit-user-drag: none;
  
}
.health__slider .swiper-slide .swiper__title {
  width: 550px;
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: max-width .6s ease,opacity .4s ease,padding-left .6s ease;
  transition: max-width .6s ease,opacity .4s ease,padding-left .6s ease
}

.health__slider .swiper-slide .swiper__title i {
  font-size: 24px;
  color: var(--color-logo-navy);
  font-weight: 700;
}

.health__slider .swiper-slide .swiper__title strong {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-logo-deepBlue);
}

 .health__slider .swiper-slide .swiper__title .view-more span:first-child {
  color: var(--color-desc-black);
  font-size: 20px;
  font-weight: 400;
}

.health__slider .swiper-slide-active {
  width: 1000px;
}

.health__slider .swiper-slide-active .swiper__img {
  position: relative;
  width: 470px;
  justify-content: flex-start;
  overflow: visible !important;
}
.health__slider .swiper-slide:not(:first-child) .swiper__img {
  margin-left: 40px;
}

.health__slider .swiper-slide-active .swiper__img::after{
  content: '';
  position: absolute;
  top: -70px;
  right: -10px;
  width: 120px;
  height: 120px;
  background: url(../img/round-ani.png)center/cover;
  animation: spin 12s ease-in-out infinite alternate;
  z-index: 2;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.health__slider .swiper-slide-active .swiper__title {
  max-width: 615px;
  opacity: 1;
  padding-left: 0px;
}
.nav__arrow_bar{
  width: 1px;
  height: 10px;
  background: var(--color-logo-navy);
  align-self: center;
}
.nav__arrow{
  display: flex;
  gap: 50px;
  margin-top: 40px;
  justify-content: flex-start;
  color: var(--color-logo-navy);
}
.nav__arrow button{
  color: var(--color-logo-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sec2-check-list{
  display: flex;
  gap: 80px;
}
.sec2-check-list li{
  display: flex;
  gap: 10px;
  align-items: center;
}
.sec2-check-list li img{
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
}
.sec2-check-list li p{
  font-size: 20px;
  font-weight: 500;
  color: var(--color-desc-black);
}
/* sec3 */
.sec3{
  background: url(../img/section3-bg.png)no-repeat center / cover;
}
.sec3-main-bot-txt{
  font-size: 25px;
  color: var(--color-logo-deepBlue);
  font-weight: 500;
}
.sec3-main-bot-txt b{
  font-weight: 700;
}

.sec3 .sec1-swiper{
  overflow: visible;
}

.sec3 .content-text{
  position: absolute;
  bottom: 80px;
  left: 80px;
  color: #fff;
}
.sec3 .content img{
  transition:
  transform 0.6s cubic-bezier(.4,0,.2,1);
}
.sec3 .content:hover img{
  transform: scale(1.03);
}
.sec3-img-box{
  border-radius: 0;
  overflow: hidden;
  transition: border-radius 0.6s ease;
}
.sec3 .content:hover .sec1-img-box{
  border-radius: 15px;
}
.sec3 .arrow-wrap{
  display: flex;
  gap: 50px;
}
.sec3 .arrow-wrap button{
  color: #D9D9D9;
  transition: color 0.3s ease;
}
.sec3 .arrow-wrap button:hover{
  color: #092C4C;
}
.sec3-swiper-wrap {
  cursor: pointer;
}
.sec3 .navigate-wrap{
  display: flex;
  justify-content: space-between;
}
.flex-bar-box{
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: flex-end
}
.flex-bar-box .dot{
  width: 40px;
  height: 7px;
  background: #D9D9D9;
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.flex-bar-box .dot.active{
  background:var(--color-logo-navy);
}
.sec3 .content-text .num{
  font-size: 24px;
  font-weight: 700;
}
.sec3 .content-text .tit{
  font-size: 40px;
  font-weight: 600;
}
.sec3 .content-text .desc{
  color: rgb(255, 255, 255,0.7);
}
.sec3-swiper{
  overflow: visible !important;
}
.sec3 article.content-wrap{
  position: relative;
}
.more-view-btn{
  position: absolute;
  bottom: 80px;
  right: 80px;
  z-index: 3;
  padding: 10px 35px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition:
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.45s cubic-bezier(.34, 1.2, .64, 1);
}
.more-view-btn::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 28%,
    #1d509a 0%,
    var(--color-logo-navy, #092c4c) 52%,
    #051a2d 100%
  );
  transform: translate(-50%, -50%);
  transition:
    width 0.58s cubic-bezier(.4, 0, .2, 1),
    height 0.58s cubic-bezier(.4, 0, .2, 1),
    opacity 0.35s ease;
  opacity: 0;
  z-index: 0;
}
.more-view-btn:hover::before{
  width: 340px;
  height: 340px;
  opacity: 1;
}
.more-view-btn span,
.more-view-btn svg{
  position: relative;
  z-index: 1;
}
.more-view-btn span{
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  transition: color 0.35s ease, letter-spacing 0.35s ease;
}
.more-view-btn svg{
  width: 9px;
  height: 16px;
  color: rgba(255, 255, 255, 0.95);
  transition:
    transform 0.45s cubic-bezier(.34, 1.2, .64, 1),
    color 0.35s ease;
}
.more-view-btn:hover{
  border-color: rgba(255, 255, 255, 0.55);

}
.more-view-btn:hover span{
  color: #fff;
  letter-spacing: 0.02em;
}
.more-view-btn:hover svg{
  color: #fff;
  transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce){
  .more-view-btn,
  .more-view-btn::before,
  .more-view-btn span,
  .more-view-btn svg{
    transition-duration: 0.01ms;
  }
  .more-view-btn:hover{
    transform: none;
  }
  .more-view-btn:hover::before{
    width: 340px;
    height: 340px;
    opacity: 1;
  }
}
.intro_4_1 .con_area {
  display: flex;
  gap: 25px;
  position: relative;
  overflow-x: visible;
  --sec4-marquee-duration: 55s;
  /* 음수 지연: 로드 직후에도 이미 흐르는 구간(기본 50%). JS가 새로고침마다 무작위로 덮어씀 */
  --sec4-marquee-delay: calc(var(--sec4-marquee-duration) * -0.5);
}
.intro_4_1 .thumb_swiper {
  width: 275px;
  aspect-ratio: 275 / 150;
  overflow: hidden;
}

.intro_4_1 .thumb_swiper .swiper-slide {
  cursor: pointer;
  height: calc(100% / 4 - 14px);
  border-radius: 18px;
  overflow: hidden;
}

.intro_4_1 .thumb_swiper .swiper-slide {
  position: relative;
}

.intro_4_1 .thumb_swiper img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.intro_4_1 .thumb_swiper .swiper-slide-active:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 3px solid var(--gold);
}

.intro_4_1 .main_swiper {
  width: calc(100% - 300px);
  aspect-ratio: 1200 / 650;
  border-radius: 20px;
  overflow: hidden;
}

.intro_4_1 .main_swiper .swiper-slide {
  overflow: hidden;
}

.intro_4_1 .main_swiper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.intro_4_1 .main_swiper {
  position: relative;
}

.intro_4_1 .main_swiper .swiper-navigation {
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  z-index: 1;
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

.intro_4_1 .main_swiper .swiper-navigation-prev {
  width: 50px;
  height: 100px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  position: absolute;
  z-index: 11;
  background: url(/img/ico_arrow_prev.png) center center/100% 100% no-repeat;
}

.intro_4_1 .main_swiper .bar {
  margin: 0 13px;
}

.intro_4_1 .main_swiper .swiper-navigation-next {
  width: 50px;
  height: 100px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  position: absolute;
  z-index: 11;
  background: url(/img/ico_arrow_next.png) center center/100% 100% no-repeat;
}

.intro_4_1 .main_swiper .swiper-slide {
  will-change: opacity, transform;
}
.sec4{
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
}
.sec4 > .container12{
  position: relative;
  z-index: 1;
}
.sec4 .con_area::before{
  content: "GOCHEOKTEUNTEUN ORTHOPEDIC CLINIC    GOCHEOKTEUNTEUN ORTHOPEDIC CLINIC    ";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  pointer-events: none;
  display: block;
  width: max-content;
  white-space: nowrap;

  color: rgba(0, 157, 225, 0.08);
  font-family: "Pretendard Variable", sans-serif;
  font-size: 200px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;

  animation: sec4-bg-marquee var(--sec4-marquee-duration, 55s) linear infinite;
  animation-delay: var(--sec4-marquee-delay, -27.5s);
}
.intro_4_1 .con_area .main_swiper,
.intro_4_1 .con_area .thumb_swiper{
  position: relative;
  z-index: 1;
}
@keyframes sec4-bg-marquee{
  from{
    transform: translateX(0) translateY(-50%);
  }
  to{
    transform: translateX(-50%) translateY(-50%);
  }
}
@media (prefers-reduced-motion: reduce){
  .sec4 .con_area::before{
    animation: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.sec5{
  position: relative;
  background: url(../img/section5-bg.png)no-repeat center /cover ;
}
.map_wrap .root_daum_roughmap .cont {
  display: none;
}

.map_wrap .root_daum_roughmap .wrap_controllers {
  display: none;
}

.map_wrap .root_daum_roughmap .wrap_map {
  width: 100%;
  height: 600px;
}

.map_wrap .root_daum_roughmap {
  width: 100%;
  height: 100%;
}

.map_flex {
  display: flex;
  gap: 20px;
  align-items: stretch;
  height: 600px;
}

.map_flex > * {
  width: 100%;
  border-radius: 30px;
}

.map_txt {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f6f5f5;

  letter-spacing: -0.06em;
}

.map_txt::after {
  content: "";
  position: absolute;
  inset: auto;
  top: -45%;
  right: -35%;
  width: 370px;
  height: 297px;
  z-index: 0;
}

.map_txt_inner {
  position: relative;
  background: #fff;
  z-index: 1;
  flex: 1;
  min-height: 0;
  padding: 40px 0px 40px 40px;
  border-radius: 30px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
}
.map_wrap {
  flex: 1.5;
  min-height: 0;
  border-radius: 30px;
  overflow: hidden;
}

.map_txt address {
  font-size: 20px;
  font-weight: 400;
  color: #323232;
}

.map_tit {
  font-size: 30px;
  color: var(--color-logo-navy);
  font-weight: 700;
  margin-bottom: 10px;
}

.map_tit:not(:first-child) {
  margin-top: 20px;
}

.time_last {
  color: rgb(50, 50, 50,0.6);
  font-size: 16px;
  line-height: 1.6;
}

.map_txt ul li {
  display: flex;
  gap: 40px;
  align-items: start;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 600;
  padding: 0 10px;
  color: var(--color-grey-content);
}
.map_txt ul li:last-child {
  margin-bottom: 1rem;
}
.map_txt ul li.night_li {
  color: #fff;
  position: relative;
}

.map_txt ul li.night_li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  background: linear-gradient(90deg, #009DE1 0%, #011C3D 100%);
  display: block;
  width: 96%;
  height: 100%;
  z-index: 0;
  border-radius: 30px;
}
.night_li > * {
  position: relative;
}
.night_li i {
  display: flex;
  gap: 20px;
}
.night_li em {
  color: #fbd307;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.night_li em img {
  width: 1em;
  aspect-ratio: 1/1;
}

.map_txt ul li span {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.empty-set {
  height: 12vw;
}
.br-24,
.br-90 {
  display: block;
}
.br-28-block,
.br-m40 {
  display: none;
}
.map_tit.tel{
  margin-top: 10px;
  color: #000;
}
.map_tit.time{
  margin-top: 10px;
}
.br-m40{
  display: block;
}
.br-main-m{
  display: none;
}