.visual-video .video-bg {width:100%;height:100vh;}

.visual-video {}
.visual-video .video-bg {height:100vh;}
.visual-video .video-bg video{width:100%;object-fit: cover;height:100vh;}
.ctn07 .youtube-con .list li {
    opacity: 0; /* 처음에는 안 보이게 설정 */
    transform: translateY(20px); /* 아래쪽에서 시작 */
}
.ctn07.active .youtube-con .list li{animation: fadeInUp 0.6s ease-out forwards;}

/* 각 li 요소에 딜레이를 줘서 순차적으로 나타나게 함 */
.ctn07.active .youtube-con .list li:nth-child(1) { animation-delay: 0.4s; }
.ctn07.active .youtube-con .list li:nth-child(2) { animation-delay: 0.6s; }
.ctn07.active .youtube-con .list li:nth-child(3) { animation-delay: 0.8s; }
.ctn07.active .youtube-con .list li:nth-child(4) { animation-delay: 1.0s; }


.ctn03{transform:translateX(100%);transition-duration: 1.5s;}
.ctn03.active {transform:translateX(0);transition-duration: 1.5s;}
.ctn03.fade-out{transform:translateX(0);}

.ctn03 .medical-team li {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 1.4s ease, transform 1.4s ease;
}

/* ctn03가 active 클래스가 붙었을 때 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ctn03 .medical-team li {
    opacity: 0;
    transform: translateY(100%);
}

.ctn03.active .medical-team li {
    animation: fadeInUp 1.4s ease forwards;
}

/* 각 li 요소에 순차적으로 delay 적용 */
.ctn03.active .medical-team li:nth-child(1) { animation-delay: 0.2s; }
.ctn03.active .medical-team li:nth-child(2) { animation-delay: 0.4s; }
.ctn03.active .medical-team li:nth-child(3) { animation-delay: 0.6s; }
.ctn03.active .medical-team li:nth-child(4) { animation-delay: 0.8s; }
.ctn03.fade-out .medical-team li {opacity:1 !important; transform: translateY(0) !important;}

.ctn04{transform:translateX(-100%);transition-duration: 1.5s;}
.ctn04.active {transform:translateX(0);transition-duration: 1.5s;}
.ctn04.fade-out{transform:translateX(0);}

.ctn05 {width:1600px !important;transform-origin: 50% 50%;}

.ctn05.active {width:100% !important;transition-duration: 1.5s;}
.ctn05.fade-out{width:100% !important;}


.ctn07.fade-out .youtube-con .right {animation: right-ani 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;overflow:hidden;animation-delay: 0.9s;}
.ctn07.fade-out .youtube-con .list{}
.ctn07.fade-out .youtube-con .right{animation: right-ani 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;overflow:hidden;animation-delay: 0.9s;}
.ctn07.fade-out .txt-tit p span{animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation-delay: 0.3s !important;}
.ctn07.fade-out .txt-tit h2 span {animation: text-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation-delay: 0.5s;}


.ctn07.fade-out .youtube-con .list li {opacity:1;    transform: translateY(0px);}

#fp-nav.fp-left{left:2%;}
#fp-nav ul li{position:relative; width:6px; margin:15px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; height:6px; box-sizing:border-box; transition:all 0.4s ease-in-out;}
#fp-nav ul li a span{display:block; width:6px; height:6px; background:#fff; opacity: 0.2; border-radius:6px; transition:all 0.4s ease-in-out;}
#fp-nav ul li .fp-tooltip{display: none;}
#fp-nav ul li a.active { height:30px; }
#fp-nav ul li a.active span{opacity: 1; height: 100%;border-radius:6px;width:6px;height:30px;    margin-left: -3px;
    margin-top: -15px;}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {display:block; width:6px; height:6px; background:#fff; opacity: 0.2; border-radius:6px; margin:-3px 0 0 -3px}


/* Black Style */
#fp-nav.black ul li a span{background-color:#000}

#fp-nav ul li,
.fp-slidesNav ul li {height:auto;}

#fp-nav ul li .fp-tooltip{position:absolute; top:50%;transform:translateY(-50%); color:#fff; background:#000; padding:3px 8px; border-radius:15px; font-size:13px; font-family:arial,helvetica,sans-serif; white-space:nowrap; max-width:220px; overflow:hidden; display:block; opacity:0; width:0; cursor:pointer;}

#fp-nav ul li a.actvie .fp-tooltip {opacity:1;}

@media (max-width:500px){
.ctn06 .swiper-slide:first-child .bg {    background-position-x: 70% !important;}
}