body.fixed{overflow : hidden;}
.section{overflow: hidden;}
.swiper-wrapper{transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important}

.skip-btn{display: flex;align-items: center;justify-content: center; position : absolute; font-family: jost; background: rgba(0,0,0,0.2); width : 80px; height : 80px; top : 50%; left : 50%;z-index: 100000; transform: translateX(-50%) translateY(-50%) scale(0); border-radius: 50%; color : #fff; letter-spacing: 0.1em; font-weight: 600; font-size: 16px; transition : transform .5s;}
.skip-btn.on{transform: translateX(-50%) translateY(-50%) scale(1);}
.end .skip-btn{transform: translateX(-50%) translateY(-50%) scale(0); pointer-events: none;;}
.skip-btn::after{position : absolute; content : ''; width : 100%;height : 100%; background: rgba(0,0,0,0.1); border-radius: 50%; animation : skip-btn 1s infinite}
@keyframes skip-btn {
    0%{opacity: 1; transform: scale(1);}
    100%{opacity: 0; transform: scale(1.5);}
}

/**/
#intro{display: flex;flex-direction : column; align-items: center;justify-content: center; gap : 36px; position : fixed; left : 0;top : 0; width : 100%; height : 100%;z-index: 10000; background: #002044; perspective: 1000px; transition : 1s;
	&.on{
		.intro-bg > img{transform : scale(1)}
	}
    &.end{opacity: 0; pointer-events: none;}
	&.t2{
		.intro-logo-text{opacity: 1; transform: translateX(0);}
	}
}

.intro-bg{display: flex;flex-direction: column;justify-content: center; align-items: center; position : absolute; left : 0;top : 0; overflow: hidden; width : 100%; height : 100%; perspective: 1000px;}
.intro-bg > img{transform : scale(1.5); transition : 5s;}

.intro-bg-01{display: flex; background: #002044; height : 1.8750vw; flex-shrink: 0;}
.intro-bg-01 > b{background: #677f94; height : 100%; flex-shrink: 0; width : 1.7708vw;
    &:nth-child(2n + 1){margin-right: 17.7083vw;}
    &:nth-child(2n + 2){margin-right: 5.2083vw;}
}

.intro-bg-02{display: flex; background: #677f94; background: #002044; height : 2.6042vw; flex-shrink: 0;}
.intro-bg-02 > b{background: #002044; background: #677f94; height : 100%; flex-shrink: 0; width : 1.7708vw;
    &:nth-child(2n + 1){margin-right: 17.7083vw;}
    &:nth-child(2n + 2){margin-right: 5.2083vw;}
}
.intro-bg b{opacity: 0; transform: scale(0);}

.logo-ani{position : relative; transform: scale(1.25) rotateY(-45deg); transition : 0s 1.4s;
    &.on{transform: scale(1) rotateY(0deg); transition : 2s;}
}
#intro .logo-ani{width : 280px;}

.logo-ani > img{position :absolute; opacity: 0; left : 0;top : 0; transition : 0s 1.4s;
    &:first-child{position : static}
    &:nth-child(2){transform: translateX(-100px);}
    &:nth-child(3){transform: translateY(-100px);}
    &:nth-child(4){transform: translateX(100px);}
    &:nth-child(5){transform: translateY(100px);}
    &:nth-child(6){transform: translateY(-100px);}
    &:nth-child(7){transform: translateY(100px);}
}

.logo-02.big {
	margin-top: 10px;
    margin-left: -4px;
}
.logo-02.small {
	margin-top: 5px;
    margin-left: -2px;
}

/* .logo-ani.invert > img { filter: brightness(0) invert(1); }
.visual-02-logo { filter: brightness(0) invert(1); } */

.logo-ani.on > img{opacity: 1; transform: translateX(0); transition : 2s;}

.intro-logo-text{transform :translateY(80px); opacity : 0; transition : 2s;}

.intro-dim{display: flex;flex-direction: column; position : absolute; left : 0; top : 0; width : 100%; height : 100%;}
.intro-dim > span{background: #fff; width : 100%; height : 20%; transform: scaleX(1.25);
    &:nth-child(2n + 1){border-radius: 300px 0 0 300px; transform: scaleX(1.25) translateX(100%);}
    &:nth-child(2n + 2){border-radius: 0 300px 300px 0; transform: scaleX(1.25) translateX(-100%);}
}

/**/
.scroll-down{
    position:absolute;
    left:50%;
    bottom:40px;
    transform:translateX(-50%);
}

.scroll-down span{
    display:block;
    width:22px;
    height:22px;
    animation:moveUpDown 2s ease-in-out infinite;
}

@keyframes moveUpDown{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px); /* 위로 이동 */
    }
}

.visit-btn{display: flex;flex-direction: column;align-items: center;justify-content: center; position : absolute; left : 0px; margin-left: -75px; top : 140px; z-index: 1; border-radius: 50%; transition : 1.2s; opacity: 1; transform: translateX(80px);}


.open-rotate-btn{display: flex;flex-direction: column;align-items: center;justify-content: center; background: #0a1f42; width : 146px; height : 146px; position : absolute; right : 0px; top : 155px; z-index: 1; border-radius: 50%; transition : 1.2s; opacity: 0; transform: translateX(80px);}

.open-rotate-btn::after{position : absolute; content : ''; width : 177px; height : 177px;  background: url(../images/main/open-rotate-text.png)no-repeat center / contain; animation : rotate-text 8s infinite linear;}
@keyframes rotate-text {
    100%{transform: rotate(360deg);}
}

.customer-icon{display: flex;flex-direction: column;align-items: center;justify-content: center; width : 146px; height : 146px; position : absolute; right : 0px; top : 355px; z-index: 1; border-radius: 50%; transition : 1.2s; opacity: 0; transform: translateX(80px);}
.customer-icon img{
    /* animation: blink 2s ease-in-out infinite; */
}

/* @keyframes blink{
    0%,100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
} */

.main-visual{background: #000;
    &.on{
        .visual-tit > img{transform: translateX(0); opacity: 1;
			&:first-child{transform: translateY(-16px);}
		}
        .visual-slide .visual-bg-img{transform: scale(1);}
        .open-rotate-btn{opacity: 1; transform: translateX(0);}
        .customer-icon{opacity: 1; transform: translateX(0);}
    }
}
.visual-slide{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;}
.visual-slide .visual-bg-img{width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 3s; transform: scale(1.25);}
.visual-container{display: flex;justify-content: center; position : absolute; left: 0; top : 0; width : 100%; height : 100%; z-index: 1;}
.visual-inner{display: flex;flex-direction: column;align-items: center;justify-content: center; width : 100%; max-width: 1680px; height : 100%; padding-bottom: 160px; position : relative; transition : 1s;}
.visual-tit-box{display: flex;flex-direction: column;align-items: center;position : relative;}
.visual-tit{display: flex;justify-content: center;position : relative; margin-bottom: 36px;}
.visual-tit > img{position : absolute; left : 0;top : 0; opacity: 0; transition : 2s;
    &:first-child{transform: translateY(-80px); left : auto; margin-left: 20px;}
    &:nth-child(2){position : static; transform: translateX(-80px);}
    &:nth-child(3){transform: translateX(80px);}
}
.visual-tit-svg{position : absolute; bottom : 0;}
svg path{stroke: #fff; stroke-width: 15px; stroke-dasharray : var(--length); stroke-dashoffset: var(--length); fill: transparent;}
.visual-logo{transform: translateY(36px); opacity: 0; transition : 1s;}
.on .visual-logo{transform: translateY(0); opacity: 1; transition : 2s 1.8s;}

.main-overview{background: #000;color : #fff; position: relative;
	.logo-ani{position : absolute; left : 50%; top : 55%; transform: translateX(-50%) translateY(calc(-50% + 80px)); width : 259px; transition : 2s;}
	.visual-02-logo{position: absolute;left: 50%;top: 55%;width: 614px;transform: translateX(-50%) translateY(calc(-50% + 270px)); opacity: 0; transition : 2s;}
}
.logo-ani > img{opacity: 0; transform: translateX(20px); transition : 2s;}

.overview-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;}
.overview-bg::after{content:''; position: absolute; left: 0; top: 0; width: 100%;  height: 100%; background: rgba(0,0,0,.7);}
bg img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.overview-inner{display: flex;flex-direction: column; width : 100%; max-width: 1680px; height : 100%; padding : 160px 0 120px; position : relative; z-index: 1; margin : 0 auto;}
.overview-tit{font-family: MM; font-weight: 400;font-size: 75px; transform: translateX(-140px); opacity: 0; transition : 1.4s;}
.overview-tit span{color : #a6cbe9}
.main-overview.active{
    .overview-tit{transform: translateX(0); opacity: 1;}
    .logo-ani{transform: translateX(-50%) translateY(-50%); transition : 2s 1s;}
    .logo-ani > img{opacity: 1; transform: translateX(0); transition : 2s 1s;}
    .visual-02-logo{transform: translateX(-50%) translateY(calc(-50% + 190px)); opacity : 1; transition : 2s 1s;}
}
/**/
.main-map.active{
    .map-subway{transform: translateY(0); transition : 1.4s 0s;}
    .map-tit-box{transform: translateY(0); opacity: 1; transition : 1.4s .4s;}
    .map-map{transform: translateX(0); opacity: 1; transition : 1.4s .4s;}
}

.map-bg{position : absolute; left : 0;top : 0; width : 100%; height : 100%;}
.map-bg > img{width : 100%;height : 100%; object-fit: cover; object-position: center;}
.map-inner{display: flex; align-items: center; justify-content: center; position : relative; margin : 0 auto; gap : 70px; height : 100%;}

.map-right{display: flex;justify-content: center; align-items: center; height : 100%; padding-bottom: 340px;}
.map-map{transform: translateX(-100px); opacity: 0; transition : 0s 1.4s;}
.map-tit-box{text-align: center; transform: translateY(-80px); opacity: 0; transition : 0s 1.4s;}
.map-small-tit{font-family: BS; color : #0c2242; margin-bottom: 5px; font-weight: 400; line-height: 1em; letter-spacing: 0.2em; padding-left: 0.2em;}
.map-tit{font-family: Abril Fatface; margin-bottom: 50px; font-size: 44px; color : #0c2242; font-weight: 400; line-height: 1em;}
.map-desc{font-family: Noto Sans KR; font-weight: 300; color : #fff; font-size: 24px; letter-spacing: -0.05em; margin-bottom: 21px;}
.map-tit-kor{font-family: Noto Sans KR; font-weight: 700; color : #fff; font-size: 45px; letter-spacing: -0.05em; line-height: 1.2em;}

.map-subway{position : absolute; bottom : 0; transform: translateY(100%); transition : 0s 1.4s;}

/**/
.main-envi{background: #fef8ec;
    &.active{
        .envi-left{width : calc(100% - 572px); transition : 1.4s 1.8s;}
        .envi-map{opacity: 1; transition : 1s .4s;}
		.envi-map > img{
            &:nth-child(2){animation : envi-map 1s infinite alternate 2.4s;}
            &:nth-child(3){transform : translateY(0); opacity : 1; transition : 1.2s 1.8s}
		}

        .envi-logo-box{right : 60px; transform: scale(0.8); transition : 1.4s 1.8s;}
        .logo-ani{transform: translateX(0); transition : 2s .4s;}
        .logo-ani > img{opacity: 1; transform: translateX(0); transition : 2s .4s;}
        
        .envi-logo{opacity: 1; transform: translateY(0); transition :2s 1s;}
        .envi-tit-img{top : 100px; left : 60px; transform: scale(0.8); transition : 1.4s 1.8s;}
        .envi-tit-img > img{transform: translateY(0); opacity: 1;
            &:nth-child(1){transition : 1.4s .4s;}
            &:nth-child(2){transition : 1.4s .5s;}
            &:nth-child(3){transition : 1.4s .6s;}
        }
        .envi-right{transform: translateX(0); transition : 1.4s 1.8s;}
        .envi-right-tit .char{transform: translateY(0); transition : 1.4s 2.4s;}
        .envi-right-desc{opacity: 1; transition : 1s 2.4s;}
    }
}
.envi-inner{display: flex;justify-content: start; width : 100%; height : 100%; position : relative;}
.envi-left{display: flex;justify-content: center; width : 100%; position : relative; height : 100%; transition : 0s 1.4s;}
.envi-left-inner{width : 1304px;height : 100%;  position : relative;}
.envi-map{display: flex;align-items: center; width : 100%; height : 100%; position : relative; opacity: 0; transition : 0s 1.4s;}
.envi-map > img{position : absolute; width : 100%; height : 100%; left : 0;top : 0; object-fit: contain;
	&:nth-child(2){opacity : 0;}
	&:nth-child(3){opacity : 0; transform : translateY(18px); transition : 0s 1.4s;}
}
@keyframes envi-map{
	0%{opacity : 0;}100%{opacity : 1;}
}

.envi-tit-img{display: flex;flex-direction: column;align-items: center;justify-content: center; gap : 10px; position : absolute; top : 140px; left : -100px; transition : 0s 1.4s;}
.envi-tit-img > img{transform: translateY(80px); opacity: 0; transition : 0s 1.4s;}

.envi-logo-box{display: flex;flex-direction: column;align-items: center; gap : 22px; justify-content: center; position : absolute; bottom : 50px; right : -120px; mix-blend-mode: darken; transition : 0s 1.4s;}
.envi-logo{transform: translateY(80px); opacity: 0; transition : 0s 1.4s;}

.main-envi .logo-ani{width : 90px; margin-right: 22px;}

.envi-right{display: flex;justify-content: center;align-items: center; background: #fff;position : absolute; right : 0; width : 572px; height : 100%; overflow: hidden; transform: translateX(100%); transition : 0s 1.4s; border-radius : 36px 0 0 36px; padding-top: 50px;}
.envi-right-inner{display: flex;flex-direction: column; align-items: center; justify-content: center;}

.envi-right-tit-box{margin-bottom: 48px;}
.envi-right-tit{font-family: MM; font-weight: 400; font-size: 52px; color : #698095; letter-spacing: -0.03em; margin-bottom: 25px; text-align: center; line-height: 1.2em; line-height: 1em;}

.envi-right-tit .line{overflow: hidden;
    &+.line{margin-top: 10px;}
}
.envi-right-tit .char{transform: translateY(100%); transition : 0s 1.4s;}

.envi-right-desc{font-family: Noto Sans KR; font-size: 18px; letter-spacing: -0.05em; color : #404042; opacity: 0; transition : 0s 1.4s;}

.envi-slide{width : 402px; height : 360px; margin-bottom: 27px; }
.envi-slide .swiper-slide{display: flex;flex-direction: column;align-items: center; justify-content: start; text-align: center; padding-top: 24px; background: #ebf4fc; border-radius: 30px; overflow: hidden;
    &.swiper-slide-active{
        .envi-slide-num{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
        .envi-slide-img{transform: translateY(0); opacity: 1; transition : 1.2s .5s;}
        .envi-slide-tit{transform: translateY(0); opacity: 1; transition : 1.2s .6s;}
        .envi-slide-desc{transform: translateY(0); opacity: 1; transition : 1.2s .7s;}
    }
}

.envi-slide-num{font-family: Abril Fatface; font-size: 25px; font-weight: 400; color : #698095; margin-bottom: 22px; transform: translateY(80px); opacity : 0; transition : 0s 1.4s;}
.envi-slide-img{width : 115px; height : 101px; object-fit: contain; object-position: center; margin-bottom: 22px; transform: translateY(80px); opacity : 0; transition : 0s 1.4s;}
.envi-slide-tit{font-size: 22px; font-family: Noto Sans KR; color : #0a1f42; font-weight: 400; margin-bottom: 23px; letter-spacing: -0.05em; line-height: 1.2em; transform: translateY(80px); opacity : 0; transition : 0s 1.4s;}
.envi-slide-desc{font-size: 15px; font-family: Noto Sans KR; color : #565759; letter-spacing: -0.05em; line-height: 1.4em; transform: translateY(80px); opacity : 0; transition : 0s 1.4s;}

.envi-pagination{display: flex;gap : 4px;}
.envi-pagination .swiper-pagination-bullet{margin : 0; opacity: 1; width : 15px; height : 15px; background: url(/assets/images/main/envi-bullet.png)no-repeat center / contain; opacity: 0.3; transition : .3s;}
.envi-pagination .swiper-pagination-bullet-active{opacity: 1;}

/**/

.main-premium.active{
    .premium-bg{mask-size: 528px; transition : 3s; mask-position: 50% 40%;
        > img{transform: scale(1); transition : 5s;}
    }
    .premium-list > li{transform: translateX(0); opacity: 1; transition : 2s 2s}
    .premium-obj > img{opacity: 1; transition : 2s 2s;
        &.premium-obj-01{transform: rotate(0deg);}
        &.premium-obj-02{transform: translateX(calc(-50% - 290px)) translateY(calc(-50% - 130px)) rotate(0deg);}
        &.premium-obj-03{transform: rotate(0deg);}
        &.premium-obj-04{transform: rotate(0deg);}
        &.premium-obj-05{transform: translateY(0%);}
        &.premium-obj-06{transform: rotate(0deg);}
    }
    .premium-desc{transform: translateY(0px); opacity: 1; transition : 2s 2s;}
    .premium-logo{transform: translateY(0px); opacity: 1; transition : 2s 2.1s;}
    .premium-tit{transform: translateY(0px); opacity: 1; transition : 2s 2.2s;}
}
.premium-bg{position : absolute; left : 0;top : 0; width : 100%; height : 100%; transition : 0s 1.4s; mask:url(/assets/images/main/premium-clover.svg) no-repeat center; mask-size:300vmax;}
.premium-bg > img{width : 100%;height : 100%; object-fit: cover; object-position: center; transform: scale(1.5); transition : 0s 1.4s;}

.premium-inner{display: flex;justify-content: center; gap : 600px; padding-top: 100px;}
.premium-obj{position : absolute; width : 100%; height : 100%; left : 0;top : 0;z-index: -1;
    > img{position : absolute; opacity: 0; transition : 0s 1.4s;
        &.premium-obj-01{left : 3%; top : 10%; transform: rotate(-15deg);}
        &.premium-obj-02{left : 52%; top : 45%; transform: translateX(calc(-50% - 290px)) translateY(calc(-50% - 130px)) rotate(15deg);}
        &.premium-obj-03{right : 16%; top : 5%; transform: rotate(-15deg);}
        &.premium-obj-04{right : 3%; top : 60%; transform: rotate(15deg);}
        &.premium-obj-05{right : 25%; bottom : 0; transform: translateY(10%);}
        &.premium-obj-06{left : 3%; bottom : 10%; transform: rotate(15deg);}
    }
}

.premium-tit-box{position : absolute; padding-bottom: 60px; bottom : 0; text-align: center; white-space: nowrap;}
.premium-desc{font-size: 18px; font-family: Noto Sans KR; color : #565759; letter-spacing: -0.05em; margin-bottom: 16px; transform: translateY(80px); opacity: 0; transition : 0s 1.4s;}
.premium-logo{margin-bottom: 0px; transform: translateY(80px); opacity: 0; transition : 0s 1.4s;}
.premium-tit{font-family: Abril Fatface; color : #698095; font-size: 54px; font-weight: 400; transform: translateY(80px); opacity: 0; transition : 0s 1.4s;}

.premium-list.left{display: flex;flex-direction: column;align-items: end;}
.premium-list.right{padding-right : 100px;}
.premium-list > li{display: flex; align-items: center; gap : 23px; height : 80px; opacity: 0; transition : 0s 1.4s;
    &.premium-list-01{padding-right : 0;; color : #0a1f42; transform: translateX(-100px);}
    &.premium-list-02{padding-right : 80px; color : #698095; transform: translateX(100px);}
    &.premium-list-03{padding-right: 0; color : #0a1f42; transform: translateX(-100px);}
    &.premium-list-04{padding-left: 0px; color : #698095; transform: translateX(100px);}
    &.premium-list-05{padding-left : 80px; color : #0a1f42; transform: translateX(-100px);}
    &.premium-list-06{padding-left: 0px; color : #698095; transform: translateX(100px);}
}
.premium-list > li + li{margin-top: 60px;}
.premium-con-num{font-family: BS; font-size: 14px; letter-spacing: 0.2em; margin-bottom: 12px; font-weight: 400;}
.premium-con-desc{font-family: Noto Sans KR; letter-spacing: -0.05em; font-size: 20px; font-weight: 700;line-height: 1.4em;}
.premium-con-desc small{font-size: 16px;}
.premium-info{display: block; font-size: 14px; font-weight: 200; color : #565759;}

.premium-icon{position : relative; padding-top: 16px;
    &::after{position : absolute; content : ''; width : 100%; height : 100%; top : 100%; transform: rotateZ(180deg) rotateY(180deg); mask-image: linear-gradient(to top, rgba(0,0,0,0.2), transparent);margin-top: 3px;}
}
.premium-list-01 .premium-icon::after{background: url(/assets/images/main/premium-icon-01.png);}
.premium-list-02 .premium-icon::after{background: url(/assets/images/main/premium-icon-02.png);}
.premium-list-03 .premium-icon::after{background: url(/assets/images/main/premium-icon-03.png);}
.premium-list-04 .premium-icon::after{background: url(/assets/images/main/premium-icon-04.png);}
.premium-list-05 .premium-icon::after{background: url(/assets/images/main/premium-icon-05.png);}
.premium-list-06 .premium-icon::after{background: url(/assets/images/main/premium-icon-06.png);}

/**/
.main-traffic .fp-tableCell{display: flex; align-items: center;justify-content: center;}
.main-traffic.active{
    .traffic-bg > img{transform: scale(1); transition : 3s;}    
    .traffic-tit-box{transform: translateX(0); opacity: 1; transition : 1.4s .4s;}
    .traffic-line{transform: scale(1); opacity: 1; transition :1.4s .4s;}
    .traffic-tit-kor{transform: translateY(0); opacity: 1; transition : 1.4s 1.2s;}
    .traffic-subway{transform: translateY(0); transition : 1.4s 1.2s;}
    .traffic-list > li{transform: translateX(0); opacity: 1;
        &:nth-child(1){transition: 1.4s 1.2s}
        &:nth-child(2){transition: 1.4s 1.3s}
        &:nth-child(3){transition: 1.4s 1.4s}
    }
}

.traffic-bg{position : absolute; left : 0;top : 0; width : 100%; height : 100%; transition : 0s 1.4s;}
.traffic-bg > img{width : 100%;height : 100%; object-fit: cover; object-position: center; transform: scale(1.5); transition : 0s 1.4s;}

.traffic-inner{display: flex;align-items: center; justify-content: center; align-items : center; height : 100%;  position : relative; gap : 107px;}

.traffic-left{display : flex; flex-direction : column; align-items : center; justify-content : center; height : 100%; justify-content : center; padding-top: 160px;}
.traffic-subway{margin-top : auto; transform: translateY(100%); transition : 0s 1.4s;}

.traffic-tit-box{display : flex; flex-direction : column; align-items: center; transform: translateX(-100px); opacity: 0; transition : 0s 1.4s;}
.traffic-tit{font-family: Abril Fatface;; font-size: 50px; font-weight: 400; color : #0c2242; margin-bottom: 36px; line-height: 1em;}
.traffic-tit > span{display: block; font-family: BS; font-size: 18px; letter-spacing: 0.23em; line-height: 1em;}

.traffic-desc{font-size: 30px; font-weight: 400; font-family: Noto Sans KR; letter-spacing: -0.05em; color : #444244; line-height: 1.25em; margin-bottom: 16px;}
.traffic-desc small{font-size: 16px; font-weight: 300; color : #565759;}

.traffic-tit-kor{font-size: 42px; font-weight: 700; letter-spacing: -0.1em; color : #0a1f42; line-height: 1.25em; transform: translateY(100px); opacity: 0; transition : 0s 1.4s;}

.traffic-line{padding-top: 60px; transform: scale(1.25); opacity: 0; transition : 0s 1.4s;}

.traffic-list > li + li{margin-top: 24px;}
.traffic-list > li{transform: translateX(100px); opacity: 0; transition : 0s 1.4s;}

.train-img {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateX(150px);
	opacity: 0;
	transition:
		transform 2s 1.4s ease-out,
		opacity 1.2s 1.4s ease-out;
}

.main-traffic.active .train-img {
	transform: translateX(0);
	opacity: 1;
}

/**/
.main-contact.fp-active{
    .contact-bg-img{transform: scale(1); transition : 3s;}
    .contact-leaf{transform: translateX(0); transition : 3s;}
    .contact-tit-box{transform: translateY(0); opacity: 1; transition : 2s .4s}
    .contact-box{transform: translateX(0); opacity: 1; transition :2s .4s;}
    .contact-map > img{transform: scale(1); transition : 3s;}
    .contact-address-box::after{clip-path: inset(0); transition : 1.2s .8s;}
    .contact-address{transform: translateY(0); opacity: 1; transition : 1.2s 1.2s;}
    .contact-btn-box{transform: translateY(0); opacity: 1; transition : 1.2s 1.2s;}
}

.contact-bg{position : absolute; left : 0;top : 0; width : 100%; height : 100%; transition : 0s 1.4s;}
.contact-bg-img{width : 100%;height : 100%; object-fit: cover; object-position: center; transform: scale(1.5); transition : 0s 1.4s;}
.contact-leaf{position : absolute; right : 0; bottom : 0; transform: translateX(100%) translateY(50%); transition : 0s 1.4s;}

.contact-inner{display: flex;flex-direction: column; align-items: center;justify-content: center; position : relative; padding-top: 36px;}

.contact-tit-box{display: flex;flex-direction: column;align-items: center; margin-bottom: 60px; opacity: 0; transform: translateY(-100px); transition : 0s 1.4s;}
.contact-logo{margin-bottom: 25px;}
.contact-tit{font-family: Abril Fatface; font-size: 50px; color : #fff; font-weight: 400; line-height: 1em;}

.contact-container{display: flex; gap : 50px;}

.contact-box{opacity: 0; transition : 0s 1.4s;
    &:nth-child(1){transform: translateX(-100px);}
    &:nth-child(2){transform: translateX(100px);}
}

.contact-map{margin-bottom: 20px; overflow: hidden;}
.contact-map > img{transform: scale(1.25); transition : 0s 1.4s;}
.contact-address-box{display: flex;justify-content: space-between; padding-bottom: 20px; position : relative;
    &::after{position : absolute; content : ''; width : 100%; height : 1px; bottom : 0; left : 0; background: #fff; clip-path: inset(0 50%); transition : 0s 1.4s;}
}
.contact-address{display: flex;align-items: center; color : #fff; font-size: 17px; letter-spacing: -0.05em; font-family: Noto Sans KR; transform: translateY(100%); opacity: 0; transition : 0s 1.4s;}
.contact-address > span{padding-right: 11px; margin-right: 10px; position : relative;
    &::after{position :absolute; content : ''; width : 1px; height : 15px; background: rgba(255,255,255,0.5); right : 0; top : 50%; transform: translateY(-40%);}
}
.contact-btn-box{display: flex; align-items: center; transform: translateY(100%); opacity: 0; transition : 0s 1.4s;}
.contact-btn-box > a{display: flex;align-items: center;justify-content: center; width : 50px; position : relative;
    &:first-child::after{position :absolute; content : ''; width : 1px; height : 18px; background: rgba(255,255,255,0.5); right : 0; top : 50%; transform: translateY(-40%) translateX(100%);}
}

/*  */
.active{
    .three-bg > img{transform : scale(1); transition : 5s;}
    .three-bubble{filter: blur(0px); opacity: 1; transform: translateY(0);
        &.three-bubble-01{transition : 2s 1s;}
        &.three-bubble-02{transition : 2s 1.4s;}
    }
    .three-con-img{transform: translateY(0); opacity: 1; transition : 2s 1s}
    .three-list > li{transform: translateX(0); opacity: 1; 
        &:nth-child(1){transition : 1.2s 1.4s;}
        &:nth-child(2){transition : 1.2s 1.6s;}
        &:nth-child(3){transition : 1.2s 1.8s;}
        .char{opacity: 1; transition : 1.2s calc(var(--i)*0.1s + 1.4s)}
    }
}
.three-bg{position : absolute; left : 0;top : 0; overflow: hidden; width : 100%; height : 100%;}
.three-bg > img{width : 100%; height : 100%; transform : scale(1.5); transition : 0s 1.4s;}

.three-con{display: flex;align-items: center; position :absolute; margin : 0 auto; right : 120px; bottom : 66px; gap : 47px;}

.three-con-img{transform: translateY(-100px);opacity: 0; transition : 0s 1.4s;}
.three-con > li{display: flex;gap : 25px; align-items: center;}

.three-list > li{font-family: Appld SD Gothic Neo; color : #fff; font-size: 35px; letter-spacing: -0.05em; font-weight: 600; transform: translateX(50px); opacity: 0; transition : 0s 1.4s;
    small{font-size: 20px; font-weight: 500;}
    .char{opacity: 0; transition : 0s 1.4s;}
}

.three-bubble{position :absolute; filter: blur(10px); opacity: 0; transform: translateY(-100px); transition : 0s 1.4s;
    &.three-bubble-01{width : 13.1771vw; left : 13.1250vw; top : 16.5657%}
    &.three-bubble-02{width : 13.1250vw; left : 31.6667vw; bottom : 26.0606%}
}

.pin-img{position :absolute; filter: blur(10px); opacity: 0; transform: translateY(-100px); transition : 0s 1.4s;
	&.pin-img-01 { left: 3.906vw; top: 18.229vw; }
	&.pin-img-02 { left: 8.854vw; top: 7.031vw; }
	&.pin-img-03 { left: 20.573vw; top: 12.500vw; }
	&.pin-img-04 { left: 32.031vw; top: 15.104vw; }
	&.pin-img-05 { left: 33.333vw; top: 5.729vw; }
	&.pin-img-06 { left: 43.229vw; top: 8.854vw; }
	&.pin-img-07 { left: 57.292vw; top: 14.583vw; }
	&.pin-img-08 { left: 36.979vw; top: 25.521vw; }
	&.pin-img-09 { left: 32.292vw; top: 28.906vw; }
	&.pin-img-10 { left: 2.604vw; bottom: 2.604vw; }
}

.active{
    .pin-img{filter: blur(0px); opacity: 1; transform: translateY(0);
        &.pin-img-01{transition : 2s 0.5s;}
        &.pin-img-02{transition : 2s 0.7s;}
        &.pin-img-03{transition : 2s 1.0s;}
        &.pin-img-04{transition : 2s 1.3s;}
        &.pin-img-05{transition : 2s 1.6s;}
        &.pin-img-06{transition : 2s 1.9s;}
        &.pin-img-07{transition : 2s 2.2s;}
        &.pin-img-08{transition : 2s 2.5s;}
        &.pin-img-09{transition : 2s 2.8s;}
        &.pin-img-10{transition : 2s 3.1s;}
    }
}




.calendar-section{
    position:relative;
    background:url("/assets/images/main/calendar-bg.jpg") center/cover no-repeat;
    overflow:hidden;
}

.calendar-section .overlay{
    position:absolute;
    inset:0;
    /* background:rgba(0,0,0,.48);
    backdrop-filter:blur(1px); */
}

.calendar-inner{
    position:relative;
    z-index:2;
    max-width:790px;
    margin:auto;
}

.sub-title{
    color:#fff;
    text-align:center;
    font-size: 26px;
    font-weight:500;
    margin-bottom:0px;
    letter-spacing:-1px;
	transform: translateX(-140px); opacity: 0; transition : 1.0s;
}

.calendar-inner h2{
    text-align:center;
    color:#fff;
    font-size:76px;
	font-family: MM;
    font-weight:300;
    letter-spacing:2px;
    margin-bottom:60px;
	transform: translateX(-140px); opacity: 0; transition : 1.4s;
}

.calendar-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

.calendar-card{
    position:relative;
    min-height:112px;
    padding:26px 30px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:16px;
    color:#fff;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(6px);
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .35s ease,
        opacity .35s ease;
}

.calendar-card:nth-child(1){
	transform: translateY(140px); opacity: 0; transition : transform 1.4s, opacity 1.4s;
}
.calendar-card:nth-child(2){
	transform: translateY(140px); opacity: 0; transition : transform 1.4s 0.3s, opacity 1.4s 0.3s;
}
.calendar-card:nth-child(3){
	transform: translateY(140px); opacity: 0; transition : transform 1.4s 0.6s, opacity 1.4s 0.6s;
}
.calendar-card:nth-child(4){
	transform: translateY(140px); opacity: 0; transition : transform 1.4s 0.9s, opacity 1.4s 0.9s;
}
.calendar-card:nth-child(5){
	transform: translateY(140px); opacity: 0; transition : transform 1.4s 1.2s, opacity 1.4s 1.2s;
}
.calendar-card{
    grid-column:span 2;   /* 기본 2칸 */
}

.calendar-card strong{
    display:block;
    font-size:23px;
    margin-bottom:2px;
    font-weight:500;
}

.calendar-card span{
    font-size:20px;
    opacity:.95;
	font-weight: 400;
}

.calendar-card:hover{
    background-color: #01b1ed;
    border-color: #01b1ed;
	transition : .4s;
}

.calendar-card img{
    position:absolute;
    right:24px;
    bottom:22px;
    font-size:28px;
    color:#fff;
}

.calendar-card.wide{
    grid-column:span 3;
}

.calendar-btns{
    display:flex;
    gap:18px;
    margin-top:42px;
}
.calendar-btns{
	transform: translateY(140px); opacity: 0; transition : 1.4s 1.5s;
}

.btn{
    flex:1;
    height:58px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:50px;
    display:flex;
    align-items:center;
	justify-content: space-around;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    transition:.3s;
}

.btn i{
    margin-left:14px;
    font-size:22px;
}

.btn:hover{
    background:#F35D9B;
    border-color:#F35D9B;
    color:#fff;
}


.calendar-section.active {
    .sub-title {
        transform: translateX(0);
        opacity: 1;
    }
	.calendar-inner h2{
        transform: translateX(0);
        opacity: 1;
    }
	.calendar-card {
        transform: translateY(0);
        opacity: 1;
    }
	.calendar-btns {
        transform: translateY(0);
        opacity: 1;
	}
}