body{position : relative;}
body.fixed{overflow : hidden;}
.section{overflow: hidden;}
.swiper-wrapper{transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important}

/**/
#intro{display: flex;align-items: center;justify-content: center; position : fixed; left : 0;top : 0; width : 100vw; height : 100vh;z-index: 1000; background: #004E50; transition : 1s; overflow: hidden;;
    &.t1{
        .intro-bg{transform: scale(1); opacity: 1; clip-path: inset(0);}
        .intro-obj-box > span{clip-path: inset(0); transition : ease 0.8s;}
        .intro-obj-box:nth-child(1) > span:nth-child(1){transition-delay: 0s;}
        .intro-obj-box:nth-child(1) > span:nth-child(2){transition-delay: 0.1s;}
        .intro-obj-box:nth-child(2) > span:nth-child(1){transition-delay: 0.2s;}
        .intro-obj-box:nth-child(2) > span:nth-child(2){transition-delay: 0.3s;}
        .intro-obj-box:nth-child(2) > span:nth-child(3){transition-delay: 0.4s;}

        .intro-tit > p{opacity: 1; transition : 1.2s;
            &:nth-child(1){transform: translateY(-80px) translateX(-90px);}
            &:nth-child(2){transform: translateY(160px) translateX(120px);}
        }
    }
    &.t2{
        .intro-bg{mask-size: 300vmax; transition :2s;}
        .intro-tit > p{transform: translateX(0) !important; transition : 1.2s;}
    }
    &.t3{
        .intro-tit-box{transform: translateX(-110px);}
        .intro-line{width : 157px; margin-left: 10px;}
        .intro-logo{transform: translateX(0); opacity: 1;}
    }
    &.end{opacity: 0; pointer-events: none;}
}

.intro-bg{position : absolute;width : 100%;height : 100%; mask-image: url(../images/main/intro-mask.svg); mask-repeat: no-repeat;  mask-size : 435px; mask-position: center; clip-path: inset(100% 0 0); opacity: 0; transform: scale(1.25); transition : transform .5s, opacity 1.8s, clip-path 1.5s; z-index: 1;}
.intro-bg > video{width : 100%; height : 100%; object-fit: cover; object-position: center;}
.intro-obj{display: flex;align-items: center;justify-content: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%;}
.intro-obj-box{display: flex;align-items: center; justify-content: center; position : absolute;
    &:nth-child(1){margin-right: 500px; margin-top: 280px;
        > span:nth-child(1){width : 16px; height : 300px; margin-right: 5px;margin-bottom: 30px; background: #166A6C;}
        > span:nth-child(2){width : 3px; height : 180px; margin-top: 160px; margin-right: 80px; background: #7AD9DD;}
        > span:nth-child(3){width : 8px; height : 180px; margin-left: 35px; background: #43C4CF;}
    }
    &:nth-child(2){margin-left: 420px; margin-bottom: 160px;
        > span:nth-child(1){width : 3px; height : 280px; margin-left: 78px; margin-bottom: 200px; background: #fff;}
        > span:nth-child(2){width : 16px; height : 300px; background: #166A6C;}
    }
}
.intro-obj-box > span{width : 10px; height : 100px; background: pink; position : absolute; transform: rotate(29.5deg); border-radius: 100px; clip-path: inset(100% 0 0);}

.intro-tit-box{display: flex; align-items: center; position : absolute; z-index: 1; color : #fff; transition : 1.2s;}
.intro-tit{display: flex; font-family: NM; font-size: 26px; font-weight: 400;}
.intro-tit > p{opacity: 0; transition : 1.2s;
    &:nth-child(1){transform: translateY(-80px) translateX(-240px);}
    &:nth-child(2){transform: translateY(160px) translateX(300px);}
}

.intro-line{width : 157px;width : 0;  height : 1px; background: rgba(255,255,255,0.4); transition : 1.2s;}
.intro-logo{font-family: PT; font-size: 24px; font-weight: 600; letter-spacing: -0.06em; position : absolute;left : calc(100% + 10px); white-space: nowrap; transform: translateX(100px); opacity: 0; transition : 1.2s;}
/**/

.open-rotate-btn{display: flex;flex-direction: column;align-items: center;justify-content: center; background: #004E50; width : 98px; height : 98px;right : 89px; position : fixed; bottom : 48px; z-index: 1; border-radius: 50%; transition : 1.2s; opacity: 0; transform: translateX(80px); z-index: 10000; font-size: 14px; font-family: PT; color : #ccc; letter-spacing: -0.04em;

    &::before{position : absolute; content : ''; border : 1px solid #fff; border-radius: 50%; transform: scale(0.9); width : 100%;height : 100%;}

    &::after{position : absolute; content : ''; width : 132px; height : 132px;  background: url(../images/main/open-rotate-text.png)no-repeat center / contain; animation : rotate-text 8s infinite linear;}

    &.show{opacity: 1; transform: translateX(0);}
    &.hide{opacity: 0; transform: translateX(80px);}

    b{font-family: jost, PT; font-size: 25px; font-weight: 700; color : #fff;}
}
@keyframes rotate-text {
    100%{transform: rotate(360deg);}
}

/**/
.main-visual.on{
    .visual-tit > p{transform: translateX(0); opacity: 1;}
    .visual-logo{transform: translateY(0); opacity: 1; transition : 1.2s 1s;}
}
.visual-bg{position : absolute;width : 100%;height : 100%; left : 0;top : 0; filter: brightness(0.7);}
.visual-bg > video{width : 100%; height : 100%; object-fit: cover; object-position: center;}

.visual-inner{display: flex;justify-content: center; position : relative;}
.visual-tit-box{display: flex;flex-direction: column; align-items: center; color : #fff; margin : 0 auto;}
.visual-tit{display: flex; font-family: NM; font-size: 38px; font-weight: 400; margin-bottom: 12px;}
.visual-tit > p{opacity: 0; transition : 1.2s;
    &:nth-child(1){transform: translateX(-100px)}
    &:nth-child(2){transform: translateX(100px)}
}
.visual-logo{font-family: PT; font-size: 24px; font-weight: 600; letter-spacing: -0.06em; transform: translateY(80px); opacity: 0; transition : 1.2s;}

/**/

.main-tip.active{
    .tip-tit-box{opacity: 1; transform: translateX(0);; transition : 1.2s .4s;}
    .tip-left::after{clip-path: inset(0); transition : 1.2s .4s;}
    .tip-list-tit{transform: translateX(0); opacity: 1; transition : 1.2s 1s}
    .tip-list > li{transform: translateX(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + 1s)}
}
.tip-bg{position : absolute;width : 100%;height : 100%; left : 0;top : 0; filter: brightness(0.7);}
.tip-bg > video{width : 100%; height : 100%; object-fit: cover; object-position: center;}

.tip-container{display: flex;justify-content: center; position : relative; padding-bottom: 200px;}
.tip-tit-box{display: flex; align-items: center; color : #fff; margin-bottom: 18px; transform: translateX(-100px);opacity: 0; transition : 0s 1.2s;}

.tip-logo{font-family: PT; font-size: 20px; font-weight: 600; letter-spacing: -0.06em; margin-right: 8px; margin-bottom: 1em;}
.tip-tit{font-family: NM, Cormorant Garamond; font-weight: 700; font-size: 45px;}
.tip-tit span{transform: translateY(-50%);}

.tip-box{display: flex;}
.tip-left{padding-right: 74px; position : relative;
    &::after{position : absolute; content : ''; width : 1px; height : 100%; right : 0;top : 0; background: rgba(255,255,255,0.3); clip-path: inset(0 0 100%); transition : 0s 1.2s;}
}
.tip-right{padding-left: 74px;}
.tip-list > li{display: flex; align-items: center; color : #fff; font-family: PT; letter-spacing: -0.03em; font-weight: 700; font-size: 20px;}
.tip-list > li .color{color : #FFF899}

.tip-list-01 > li{gap : 14px; transform: translateX(-100px); opacity: 0; transition : 0s 1.2s;
    &:nth-child(1){--i : 0;}
    &:nth-child(2){--i : 1;}
    &:nth-child(3){--i : 2;}
    &:nth-child(4){--i : 3;}
    &:nth-child(5){--i : 4;}
}
.tip-list-01 > li + li{margin-top: 33px;}

.tip-list > li small{font-size: 16px; font-weight: 500;}
.tip-num{display: flex;align-items: center;justify-content: center; width : 112px; height : 48px; border : 1px solid #fff; border-radius: 100px; line-height: 1em; font-family: jost; font-size: 22px; font-weight: 500;} 

.tip-list-tit{display: flex; align-items: center;  font-family: NM; font-size: 25px; gap : 7px; margin-bottom: 36px; color : #fff; line-height: 1em; transform: translateX(100px); opacity: 0; transition : 0s 1.2s;}
.tip-list-tit > span{font-family: AV; font-size: 32px;}
.tip-list-02 > li{gap : 4px; align-items: end; transform: translateX(100px); opacity: 0; transition : 0s 1.2s;
    &:nth-child(1){--i : 1;}
    &:nth-child(2){--i : 2;}
    &:nth-child(3){--i : 3;}
    &:nth-child(4){--i : 4;}
    &:nth-child(5){--i : 5;}
    &:nth-child(6){--i : 6;}
}

.tip-list-02 > li + li{margin-top: 25px;}


/**/

.main-train.active{
    .train-bg > video{transform: scale(1); transition : 3s;}    
    .train-subway > img{transform: translateY(0);
        &:nth-child(1){transition : 1s 1s;}
        &:nth-child(2){transition : 1s 1.2s;}
    }

    .train-tit-01{transform: translateX(0);opacity: 1; transition : 1s 1.4s;
        span{transform: scale(1);opacity: 1; transition : 1s 1.8s;}
    }
    .train-line{clip-path: inset(0); transition : 1s 2.2s;}
    .train-tit-02{transform: translateX(0);opacity: 1; transition : 1s 2.6s;
        span{transform: scale(1);opacity: 1; transition : 1s 3s;}
    }
}
.train-bg{position : absolute;width : 100%;height : 100%; left : 0;top : 0;
    &::after{position :absolute; content : ''; width : 100%; height : 100%; background: linear-gradient(-45deg, rgba(0,0,0,0.6), transparent, rgba(0,0,0,0.6)); left : 0;top : 0;}
}
.train-bg > video{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.25); transition : 0s 1.2s;}

.train-subway{display: flex; position :absolute; left : 113px; bottom : 0; gap : 6px; overflow: hidden;
    > img{transform: translateY(100%); transition : 0s 1.2s;}
}
.train-tit-box{display: flex; align-items: center; position : relative; padding : 0 0 60px 294px; color : #fff; position : absolute; bottom : 0; left : 0; gap : 16px;}
.train-line{width : 156px; height : 1px; background: rgba(255,255,255,0.7); clip-path: inset(0 100% 0 0); transition : 0s 1.2s;}

.train-tit{display: flex;align-items: center; font-family: NM; font-size: 38px; font-weight: 700; transform: translateX(-50px); opacity: 0; transition : 0s 1.2s;}
.train-tit span{display: flex;align-items: center; transform: scale(1.25); opacity: 0; transition : 0s 1.2s;}
.train-tit b{font-family: jost; font-size: 48px; font-weight: 700;}

.train-info{display: flex;align-items: center;gap : 5px; position : absolute; color : #fff; left : 294px; bottom : 16px; font-size: 14px; letter-spacing: -0.04em;}
.train-info::before{display: flex;align-items: center;justify-content: center; position : relative; content : '!'; width : 24px; height : 24px; border : 1px solid rgba(255,255,255,0.5); font-weight: 500; border-radius: 50%; font-size: 16px; font-size: 14px;}
/**/

.main-traffic{background: #fff; font-family: PT;
    &.active{
        .traffic-map{opacity: 1; transform: translateX(0); transition : 2s;}
        /* .traffic-bg-img{transform: translateX(0); opacity: 1; transition : 2s;} */
        .traffic-map > img{
            &:nth-child(2){opacity: 1; clip-path: inset(16% 0 0% 0); transition : 2s 1s}
            &:nth-child(3){opacity: 1; clip-path: inset(0 60% 84% 0); transition : 1s 0.4s}
            &:nth-child(4){opacity : 1; clip-path: inset(0); transition : 3s 0.4s}
            &:nth-child(5){opacity : 1; clip-path : inset(0); transition : 3s 1s;}
            &:nth-child(6){opacity : 1; transform: translateY(0px); transition : 1s 2s;}
        }
        .traffic-obj{transform: translateX(0); opacity: 1; transition : 1.6s;}
        .traffic-tit-box{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
        .traffic-name{transform: translateX(0); opacity: 1; transition : 1.2s .4s;}
        .traffic-line > *{opacity: 1; transform: translateX(0) scale(1); clip-path: inset(0); transition : 1s calc(var(--i) * 0.1s + 1s);}
        .traffic-btn{opacity: 1; transform: translateY(0); transition : opacity 1.2s 1s, transform 1.2s 1s, background .3s, color .3s;;}
    }
}
.traffic-bg{position : absolute; left : 0;top : 0;width : 100%;height : 100%; }
.traffic-bg-img{width : 100%; height : 100%; object-fit: contain; object-position: left bottom; transform: translateX(-50%); opacity: 0; transition : 0s 1.2s;}

.traffic-obj{position : absolute; bottom : 0; right : 0; opacity: 0; transition : 0s 1.2s; pointer-events: none;
    &.traffic-obj-01{left : 97px; transform: translateX(-100%); }
    &.traffic-obj-02{left : 40px; transform: translateY(100%);}
}

.traffic-left{display: flex;align-items: center;justify-content: center; position : relative; width : 36vw;}
.traffic-tit-box{margin-bottom: 60px; transform: translateY(-100px); opacity: 0; transition : 0s 1.2s;}
.traffic-desc{font-family: PT; letter-spacing: -0.03em; font-size: 22px; font-weight: 500; margin-bottom: 11px;}
.traffic-tit{font-family: NM; font-weight: 700; color : #004E50; letter-spacing: -0.06em; font-size: 37px;}

.traffic-list{margin-bottom: 100px;}
.traffic-list > li{
    &:nth-child(1){
        .traffic-dot{border-color : #0C3388;}
        .point{color : #0C3388}
    }
    &:nth-child(2){
        .traffic-dot{border-color : #997B29;}
        .point{color : #997B29}
    }
    &+li{margin-top: 21px;}
}
.traffic-name{display: flex; align-items: center; font-size: 20px; gap : 9px; margin-bottom: 15px; transform: translateX(-60px); opacity: 0; transition : 0s 1.2s;}

.traffic-line{display: flex; align-items: center;gap : 11px;}
.traffic-line > span{font-size : 20px; font-weight: 700; letter-spacing: -0.06em; opacity: 0; transition : 0s 1.2s;
    &.point{font-size: 21px; font-family: PT;}
    &.point b{font-size: 30px; font-family: PT; font-weight: 700;}

    &:nth-of-type(1){transform: scale(1) translateX(-30px);}
    &:nth-of-type(2){transform: scale(1.5) translateX(0px);}
    &:nth-of-type(3){transform: scale(1) translateX(30px);}
}
.traffic-dot{width : 24px; height : 24px; border : 5px solid #0C3388; background: #fff; border-radius: 50%; opacity: 0; transition : 0s 1.2s;}
.traffic-dot-line{width : 64px; height : 1.5px; border : 1px dashed #707070; clip-path: inset(0 100% 0 0); transition : 0s 1.2s;}

.traffic-btn{display: flex;align-items: center; justify-content: start; width : 234px; height : 65px; padding-left: 23px; border : 1px solid #E0E0E0; position : relative; font-size: 16px; font-family: PT; font-weight: 500; border-radius: 100px; gap : 9px; transition : 0s 1.2s; transform: translateY(80px); opacity: 0;
    &:hover{background: #000; color : #fff;
        .traffic-arrow{filter: invert(1);}
    }
}
.traffic-arrow{display: flex;align-items: center; position : relative; z-index: 1; transition : .3s;
    &::after{position : absolute; content : ''; width : 24px; height : 24px; background: #DEDEDE; border-radius: 50%; transform: translateX(40%); right : 0; z-index: -1; }
}

.traffic-map{position : absolute; right : 0; bottom : 0; width : 66.6146vw; transform: translateX(50%); opacity: 0; transition : 0s 1.2s; margin-bottom: 40px;}
.traffic-map-img{position : absolute; left : 0;top : 0; width : 100%; height : 100%; object-fit: contain; object-position: center; transition : 0s 1.2s;
    &:first-child{position : static;}
    &:nth-child(2){opacity: 1; clip-path: inset(16% 0 84% 0);}
    &:nth-child(3){opacity: 1; clip-path: inset(0 100% 84% 0);}
    &:nth-child(4){opacity : 0; clip-path: inset(0 100% 0 0);}
    &:nth-child(5){opacity : 0; clip-path : inset(0 100% 0 0);}
    &:nth-child(6){opacity : 0; transform: translateY(-50px);}
}

.traffic-info{font-family : PT; font-size : 14px; display : flex; align-items : center; gap : 5px; position : absolute; right : 80px; bottom : 24px; padding : 6px 16px 6px 6px;border-radius : 100px; font-weight : 500; letter-spacing : -0.04em; background: #efefef;}
/* .traffic-info:hover{background: #fff;} */
.traffic-info > p{position : relative; text-shadow : 0 0 10px rgba(255,255,255,0.5); color : #999;
    >b{color : #004E50; font-weight: 600;}
}
.traffic-info > span{display : flex; align-items : center; justify-content : center; color : #fff; background: #004E50; font-family : PT; font-weight : 600; width : 30px;height : 30px; font-size : 20px; border-radius : 50%;}

.traffic-info-container{display : flex; align-items : center; justify-content : center; position : fixed; left : 0;top : 0; z-index : 100000;width : 100%;height : 100%; opacity : 0; pointer-events : none;transition : 0.5s;}
.traffic-info-container.on{opacity : 1; pointer-events : all;}
.traffic-info-bg{position : absolute; background: rgba(0,0,0,0.5); width : 100%;height : 100%; left : 0;top : 0; z-index : -1;}
.traffic-info-inner{display : flex; align-items : center; justify-content : center; gap : 24px; background: #fff; border-radius : 16px; padding : 120px 80px 50px; letter-spacing : -0.04em; font-weight : 500; font-size : 18px; position : relative; max-width : 60%;}
.traffic-info-inner::after{position : absolute; content : ''; width : 90%; height : 1px; background: rgba(0,0,0,0.2);top : 80px;}

.traffic-info-inner li{
    position : relative; padding-left: 16px;
    &+li{margin-top: 5px;}
    &::before{position : absolute; content : '※'; left : 0;top : 0;}
}
.traffic-info-inner > span{display : flex; align-items : center; justify-content : center; background: #004E50; color : #fff; font-family : PT; font-weight : 700; width : 36px;height : 36px; font-size : 20px; border-radius : 50%; flex-shrink : 0;}
.traffic-info-close{font-size : 30px; position : absolute; top : 16px; right : 24px;}


/**/
.main-premium.active{
    .premium-slide::after{transition : clip-path 2s, background .5s; clip-path: inset(0);}
    .premium-slide::before{transition : clip-path 2s, background .5s; clip-path: inset(0);}
}
.premium-slide{width : 100%; height : 100%;
    &::after{position : absolute; content : ''; width : 1px; height : calc(50% - 100px); background: rgba(0,0,0,0.12); top : 0; left : 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; clip-path: inset(0 0 100%); transition : 0s 1.2s;}
    &::before{position : absolute; content : ''; width : 1px; height : calc(50% - 100px); background: rgba(0,0,0,0.12);  bottom : 0; left : 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; clip-path: inset(100% 0 0); transition : 0s 1.2s;}
    &.t2{
        &::after{background:rgba(255,255,255,0.2);}
        &::before{background:rgba(255,255,255,0.2);}
    }
}
.premium-container{display: flex;justify-content: center;align-items: center; position :absolute; left : 0;top : 0; z-index: 1; width : 100%; height : 100%;}
.premium-container > div:not(.premium-tit-box){display: flex;align-items: center;justify-content: center; width : 100%; height : 100%; transition : 1.2s; padding-top: 60px;}
.premium-02{position : absolute; left : 100%;top : 0;}
.t2 .premium-01{transform: translateX(-50%) scale(0.8);}
.t2 .premium-02{transform: translateX(-100%);}

.premium-inner{display: grid;grid-template-columns: repeat(2, 1fr); max-width : 1600px; width : 100%; height : 768px; position : relative;}

.premium-bg{position : absolute; left : 0;top: 0;width : 100%; height : 100%; overflow: hidden;}
.premium-bg > img{width : 100%; height : 100%; object-fit: cover; object-position: center bottom; transform: scale(1.25); transition : 0s 1.4s;}
.active .premium-bg > img{transform: scale(1); transition :3s;}

.premium-con{display: flex; justify-content: start; align-items: start;}

.premium-con-02{margin-top: 23px; justify-content: end;}
.premium-con-03{margin-left: 120px; margin-bottom: 80px; align-items: end;}
.premium-con-04{align-items: end; justify-content: end; margin-right: 131px;}

.premium-con-06{margin-top: 23px; justify-content: end;}
.premium-con-07{margin-left: 120px; margin-bottom: 80px; align-items: end;}
.premium-con-08{align-items: end; justify-content: end; margin-right: 131px;}

.premium-con-inner{display: flex; align-items: end; gap : 66px;}
.premium-img{position : relative;}
.premium-img > img{opacity: 0; transition : 1.2s .4s;}

.active .t1 .premium-01 .premium-img > img,
.active .t2 .premium-02 .premium-img > img{opacity: 1; transform: translateX(0);}

.active .t1 .premium-01 .premium-con:nth-child(1) .premium-img > img,
.active .t2 .premium-02 .premium-con:nth-child(1) .premium-img > img{transition : 1.2s .4s;}

.active .t1 .premium-01 .premium-con:nth-child(2) .premium-img > img,
.active .t2 .premium-02 .premium-con:nth-child(2) .premium-img > img{transition : 1.2s .6s;}

.active .t1 .premium-01 .premium-con:nth-child(3) .premium-img > img,
.active .t2 .premium-02 .premium-con:nth-child(3) .premium-img > img{transition : 1.2s .8s;}

.active .t1 .premium-01 .premium-con:nth-child(4) .premium-img > img,
.active .t2 .premium-02 .premium-con:nth-child(4) .premium-img > img{transition : 1.2s 1s;}

.premium-img > img:nth-child(1){transform: translateX(-50px) translateY(-50px);}
.premium-img-text{position : absolute;right : -23px; bottom : -17px; transform: translateX(50px) translateY(50px);}

.premium-con-box{padding-bottom: 16px; font-family: PT; letter-spacing: -0.03em; opacity: 0; transform: translateX(100px); transition : 1s .4s;}

.active .t1 .premium-01 .premium-con-box,
.active .t2 .premium-02 .premium-con-box{transform: translateX(0); opacity: 1; transition : 1.2s 1.4s;}

.premium-con-tit{font-size: 20px; line-height: 1.5em; color : #004E50; font-weight: 700; margin-bottom: 18px; letter-spacing: -0.03em;}
.premium-02 .premium-con-tit{color : #BCB3AF}
.premium-con-desc{font-size: 16px; font-weight: 500; line-height: 1.5em; color : #121212; letter-spacing: -0.03em;}
.premium-02 .premium-con-desc{color : #BEBEBE}

.premium-tit-box{display: flex;flex-direction: column;align-items: center;justify-content: center; position :absolute;z-index: 10;}

.premium-tit-desc{font-family: Asta Sans; letter-spacing: -0.06em; font-weight: 700; color : #004E50; font-size: 20px; margin-bottom: 10px; margin-left: auto; transform: translateX(100px); opacity: 0; transition : transform 0s 1.4s, opacity 0s 1.4s, color 1s;}
.t2 .premium-tit-desc{color : #9A9A9A;}
.active .premium-tit-desc{transform: translateY(0); opacity: 1; transition : 2s .4s;}

.premium-tit-desc > span{font-family: AV; font-size: 54px; position : absolute;right : 90%; bottom : 0; transform: rotate(-15deg) translateX(-50%);}

.premium-tit{font-family: jost; font-size: 75px; color : #000; line-height: 1em; position : relative; overflow: hidden; font-weight: 500;}

.premium-tit .char{transform: translateY(-100%); transition : 1s;}
.premium-tit > p:nth-child(2) .char{transform: translateY(100%);}
.premium-tit > p:nth-child(2){color : #fff; position : absolute; left : 0;top : 0;}

.active .t1 .premium-tit > p:nth-child(1) .char{transform: translateY(0);}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(1){transition :  .7s .4s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(2){transition :  .7s .45s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(3){transition :  .7s .4s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(4){transition :  .7s .55s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(5){transition :  .7s .6s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(6){transition :  .7s .65s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(7){transition :  .7s .7s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(8){transition :  .7s .75s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(9){transition :  .7s .8s}
.active .t1 .premium-tit > p:nth-child(1) .char:nth-child(10){transition : .7s .85s}

.t2 .premium-tit > p:nth-child(1) .char{transform: translateY(-100%);}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(1){transition :  .7s .4s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(2){transition :  .7s .45s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(3){transition :  .7s .4s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(4){transition :  .7s .55s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(5){transition :  .7s .6s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(6){transition :  .7s .65s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(7){transition :  .7s .7s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(8){transition :  .7s .75s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(9){transition :  .7s .8s}
.t2 .premium-tit > p:nth-child(1) .char:nth-child(10){transition : .7s .85s}

.active .t1 .premium-tit > p:nth-child(2) .char{transform: translateY(100%);}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(1){transition :  .7s .4s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(2){transition :  .7s .45s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(3){transition :  .7s .4s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(4){transition :  .7s .55s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(5){transition :  .7s .6s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(6){transition :  .7s .65s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(7){transition :  .7s .7s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(8){transition :  .7s .75s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(9){transition :  .7s .8s}
.active .t1 .premium-tit > p:nth-child(2) .char:nth-child(10){transition : .7s .85s}

.t2 .premium-tit > p:nth-child(2) .char{transform: translateY(0%);}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(1){transition :  .7s .4s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(2){transition :  .7s .45s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(3){transition :  .7s .4s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(4){transition :  .7s .55s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(5){transition :  .7s .6s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(6){transition :  .7s .65s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(7){transition :  .7s .7s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(8){transition :  .7s .75s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(9){transition :  .7s .8s}
.t2 .premium-tit > p:nth-child(2) .char:nth-child(10){transition : .7s .85s}


.premium-btn{display: flex;align-items: center; position : absolute; font-family: jost; font-size: 14px; letter-spacing: 0.15em;z-index: 10;width : 56px; height : 56px; border-radius: 50%; background: #08423A; white-space: nowrap; padding-left: 6px; transform: translateX(-50%) translateY(-50%) scale(.5); opacity: 0; transition : opacity 1s, transform 1s; color : #818181; pointer-events: none;}
.premium-btn b{color : #fff;}
.main-premium:hover .premium-btn{transform: translateX(-50%) translateY(-50%) scale(1); opacity: 1;}

.premium-navigation{display: none !important;}

/**/
.main-contact.active{
    .contact-tit-box{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
    .contact-map{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
    .contact-con{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
    .contact-address-box::after{clip-path: inset(0); transition : 2s .4s;}

    .contact-line-tit{transform: translateX(0); opacity: 1; transition :1.2s 1s;}
    .contact-line-img{clip-path: inset(0); transition : 2.3s 1s;}
    .contact-line-con{transform: translateY(0); opacity: 1}
    .contact-line-con-01{transition : 1s 1.2s;}
    .contact-line-con-02{transition : 1s 1.5s;}
    .contact-line-con-03{transition : 1s 1.8s;}
    .contact-line-con-04{transition : 1s 2.1s;}

    .contact-qr{transform: scale(1); opacity: 1; transition : 1s 3s;}
}
.contact-bg{position : absolute; left : 0;top: 0;width : 100%; height : 100%; overflow: hidden;}
.contact-bg > img{width : 100%; height : 100%; object-fit: cover; object-position: center bottom; transform: scale(1.25); transition : 0s 1.2s;}
.active .contact-bg > img{transform: scale(1); transition :3s;}

.contact-inner{display: flex;flex-direction: column;align-items: center;justify-content: center; position : relative; padding-top: 60px;}

.contact-tit-box{display: flex;flex-direction: column;align-items: center; margin-bottom: 40px; transform: translateY(-100px);opacity: 0; transition : 0s 1.2s;}
.contact-tit{font-family: futura-pt; font-size: 59px; font-weight: 500; color : #294F51; margin-bottom: 10px;}
.contact-desc{font-family: PT; font-size: 16px; letter-spacing: -0.04em; color : #242424; font-weight: 300;
    > b{font-weight: 600;}
}

.contact-container{display: flex; align-items: end; gap : 38px; margin-bottom: 80px;}
.contact-map{transform: translateX(-100px);opacity: 0; transition : 0s 1.2s;}

.contact-con{width : 369px; transform: translateX(100px);opacity: 0; transition : 0s 1.2s;}
.contact-address-box{display: flex; justify-content: space-between; padding-bottom: 36px; position : relative;
    &::after{position : absolute; content : ''; width : 100%; height : 1px; bottom : 0; left : 0; background: rgba(0,0,0,0.27); clip-path: inset(0 100% 0 0); transition : 0s 1.2s;}
    &+.contact-address-box{margin-top: 40px;}
}
.contact-address{font-family: PT; letter-spacing: -0.04em; font-size: 16px; font-weight: 500; color : #1F1F1F;
    > b{display: block; font-size: 20px; color : #294F51; margin-bottom: 10px;}
}

.contact-btn-box{display: flex; gap : 4px;}

.contact-line-box{display: flex; align-items: start;gap : 22px;}
.contact-line-tit{font-family: PT; font-size: 18px; letter-spacing: -0.03em; color : #004E50; margin-bottom: 48px; transform: translateX(-100px); opacity: 0; transition : 0s 1.2s;}
.contact-line{position : relative;}
.contact-line-img{clip-path: inset(0 100% 0 0); transition : 0s 1.2s;}
.contact-line-con{display: flex;flex-direction: column;align-items: center;justify-content: start; font-family: PT; gap : 6px; font-size: 17px; letter-spacing: -0.04em; font-weight: 600; color : #1C1C1C; position : absolute;  width : 0px; white-space: nowrap; top : calc(0% - 10px); transform: translateY(16px); opacity: 0; transition : 0s 1.2s;
    &.contact-line-con-01{left : 11%;}
    &.contact-line-con-02{left : 34%;}
    &.contact-line-con-03{left : 58%;}
    &.contact-line-con-04{left : 84%;}
}
.contact-icon{flex-shrink: 0; max-width: none;}

.contact-qr{transform: scale(1.5);opacity: 0; transition : 0s 1.2s}

@media(max-width : 1200px){
    #fullpage{overflow: hidden; width : 100vw;}
    .section{position : relative; overflow: hidden;}

    body.fixed{overflow : hidden;}
    /**/
    #intro{display: flex;align-items: center;justify-content: center; position : fixed; left : 0;top : 0; width : 100vw; height : 100vh;z-index: 1000; background: #004E50; perspective: 1000px; transition : 1s; overflow: hidden;
        &.t1{
            .intro-tit > p{opacity: 1; transition : 1.2s;
                &:nth-child(1){transform: translateY(-110px) translateX(0);}
                &:nth-child(2){transform: translateY(130px) translateX(0);}
            }
        }
        &.t2{
            .intro-bg{mask-size: 300vmax; transition :2s;}
            .intro-tit > p{transform: translateX(0) !important; transition : 1.2s;}
        }
        &.t3{
            .intro-tit-box{transform: translateX(0px);}
            .intro-line{width : 1px; height : 36px; margin-top : 10px;}
            .intro-logo{transform: translateX(0); opacity: 1;}
        }
        &.end{opacity: 0; pointer-events: none;}
    }

    .intro-bg{position : absolute;width : 100%;height : 100%; mask-image: url(../images/main/intro-mask.svg); mask-repeat: no-repeat;  mask-size : 200px; mask-position: center; clip-path: inset(100% 0 0); opacity: 0; transform: scale(1.25); transition : transform .5s, opacity 1.8s, clip-path 1.5s; z-index: 1;}
    .intro-bg > video{width : 100%; height : 100%; object-fit: cover; object-position: center;}
    .intro-obj{display: flex;align-items: center;justify-content: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%;}
    .intro-obj-box{display: flex;align-items: center; justify-content: center; position : absolute;
        &:nth-child(1){margin-right: 280px; margin-top: 160px;
            > span:nth-child(1){width : 16px; height : 240px; margin-right: 5px;margin-bottom: 30px; background: #166A6C;}
            > span:nth-child(2){width : 3px; height : 120px; margin-top: 160px; margin-right: 80px; background: #7AD9DD;}
            > span:nth-child(3){width : 8px; height : 120px; margin-left: 35px; background: #43C4CF;}
        }
        &:nth-child(2){margin-left:250px; margin-bottom: 120px;
            > span:nth-child(1){width : 3px; height : 220px; margin-left: 78px; margin-bottom: 200px; background: #fff;}
            > span:nth-child(2){width : 16px; height : 240px; background: #166A6C;}
        }
    }
    .intro-obj-box > span{width : 10px; height : 100px; background: pink; position : absolute; transform: rotate(29.5deg); border-radius: 100px; clip-path: inset(100% 0 0);}

    .intro-tit-box{display: flex;flex-direction: column; justify-content: center; align-items: center; position : relative; z-index: 1; color : #fff; transition : 1.2s;}
    .intro-tit{display: flex; flex-direction: column; align-items: center;  font-family: NM; font-size: 24px; font-weight: 400; line-height: 1.25em;}
    .intro-tit > p{opacity: 0; transition : 1.2s;
        &:nth-child(1){transform: translateY(-180px) translateX(0);}
        &:nth-child(2){transform: translateY(180px) translateX(0px);}
    }

    .intro-line{width : 1px;height: 0; transition : 1.2s; margin-bottom: 10px;}
    .intro-logo{font-family: PT; font-size: 16px; font-weight: 600; letter-spacing: -0.06em; position : static; transform: translateY(100px); opacity: 0; transition : 1.2s;}
    /**/

    .open-rotate-btn{width : 80px; height : 80px; right : 24px; bottom : 36px; font-size: 12px; 
        &::after{width : 100px; height : 100px; border-radius: 50%; overflow: hidden;}
        b{font-size: 18px;}
    }
    @keyframes rotate-text {
        100%{transform: rotate(360deg);}
    }

    /**/
    .main-visual.on{
        .visual-tit > p{transform: translateX(0); opacity: 1;}
        .visual-logo{transform: translateY(0); opacity: 1; transition : 1.2s 1s;}
    }
    .visual-bg{position : absolute;width : 100%;height : 100%; left : 0;top : 0; filter: brightness(0.7);}
    .visual-bg > video{width : 100%; height : 100%; object-fit: cover; object-position: center;}

    .visual-inner{display: flex;justify-content: center; position : relative; padding-top: 20vh;}
    .visual-tit-box{text-align: center;}
    .visual-tit{flex-direction: column; font-size: 24px; margin-bottom: 12px; line-height: 1.4em;}
    .visual-logo{font-size: 16px;}

    /**/

    .main-tip.active{
        .tip-tit-box{opacity: 1; transform: translateX(0);; transition : 1.2s .4s;}
        .tip-left::after{clip-path: inset(0); transition : 1.2s .4s;}
        .tip-list-tit{transform: translateX(0); opacity: 1; transition : 1.2s 1s}
        .tip-list > li{transform: translateX(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + 1s)}
    }
    .tip-bg{filter: brightness(0.5);}
    .tip-container{padding : 80px 12px;}
    .tip-inner{width : 100%;}
    .tip-tit-box{margin-bottom: 18px; transform: translateX(-100px);opacity: 0; transition : 1s; justify-content: center;}

    .tip-logo{font-size: 16px;}
    .tip-tit{font-size: 30px;}
    .tip-box{flex-direction: column; width : 100%;}
    .tip-left{padding-right: 0; position : relative; padding-bottom: 36px;
        &::after{position : absolute; content : ''; width : 100%; height : 1px; right : 0;top : auto; bottom : 0; background: rgba(255,255,255,0.3); clip-path: inset(0 100% 0 0); transition : 1s;}
    }
    .tip-right{padding-left: 0; padding-top: 36px;}
    .tip-list > li{color : #fff; font-family: PT; letter-spacing: -0.03em; font-weight: 700; font-size: 14px;}

    .tip-list-01 > li{flex-direction: column; justify-content: start;align-items: start;  gap : 14px; transform: translateX(-100px); opacity: 0; transition : 1s;
        &:nth-child(1){--i : 0;}
        &:nth-child(2){--i : 1;}
        &:nth-child(3){--i : 2;}
        &:nth-child(4){--i : 3;}
        &:nth-child(5){--i : 4;}
    }
    .tip-list-01 > li + li{margin-top: 18px;}

    .tip-list > li small{font-size: 12px;}
    .tip-num{width : 64px; height : 30px; font-size: 15px;} 

    .tip-list-tit{font-size: 16px; gap : 7px; margin-bottom: 36px; transition :1s;}
    .tip-list-tit > span{font-size: 24px;}
    .tip-list-02 > li{gap : 4px; transition :1s;}

    .tip-list-02 > li + li{margin-top: 18px;}
    .tip-check{width: 16px;}

    /**/
    .main-train{height : 480px; margin-top: 60px;}
    .main-train.active{
        .train-bg > video{transform: scale(1); transition : 3s;}    
        .train-subway > img{transform: translateY(0);
            &:nth-child(1){transition : 1s 1s;}
            &:nth-child(2){transition : 1s 1.2s;}
        }

        .train-tit-01{transform: translateX(0);opacity: 1; transition : 1s 1.4s;
            span{transform: scale(1);opacity: 1; transition : 1s 1.8s;}
        }
        .train-line{clip-path: inset(0); transition : 1s 2.2s;}
        .train-tit-02{transform: translateX(0);opacity: 1; transition : 1s 2.6s;
            span{transform: scale(1);opacity: 1; transition : 1s 3s;}
        }
    }
    .train-bg{filter: brightness(0.7);
        &::after{display: none;}
    }
    .train-bg > video{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.25); transition : 1s;}

    .train-subway{display: flex; position :absolute; left : 10px; bottom : 0; gap : 6px; overflow: hidden;
        > img{transform: translateY(100%); transition : 1s; width : 36px;}
    }
    .train-tit-box{display: flex; flex-direction: column; align-items: center; position : relative; padding : 80px 0 0; color : #fff; position : relative; gap : 16px;}
    .train-line{width : 1px; height : 48px; background: rgba(255,255,255,0.7); clip-path: inset(0 0 100%); transition : 1s;}

    .train-tit{font-size: 24px; transition : 1s;}
    .train-tit span{transition : 1s;}
    .train-tit b{font-size: 36px;}

    .train-info{left : 98px; font-size: 9px; bottom : 5px; letter-spacing: -0.06em; gap : 3px;
        &::before{width : 14px; height : 14px; font-size: 8px;}
    }
    /**/


    .main-traffic{padding : 80px 12px 0;}
    .active{
        &.traffic-map{opacity: 1; transform: translateX(0); transition : 2s;}
        /* .traffic-bg-img{transform: translateX(0); opacity: 1; transition : 2s;} */
        &.traffic-map > img{
            &:nth-child(2){opacity: 1; clip-path: inset(16% 0 0% 0); transition : 2s 1s}
            &:nth-child(3){opacity: 1; clip-path: inset(0 60% 84% 0); transition : 1s 0.4s}
            &:nth-child(4){opacity : 1; clip-path: inset(0); transition : 3s 0.4s}
            &:nth-child(5){opacity : 1; clip-path : inset(0); transition : 3s 1s;}
            &:nth-child(6){opacity : 1; transform: translateY(0px); transition : 1s 2s;}
        }        
        .traffic-tit-box{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
        .traffic-name{transform: translateX(0); opacity: 1; transition : 1.2s .4s;}
        .traffic-line > *{opacity: 1; transform: translateX(0) scale(1) !important; clip-path: inset(0); transition : 1s calc(var(--i) * 0.1s + 1s);}
        .traffic-btn{opacity: 1; transform: translateY(0); transition : opacity 1.2s 1s, transform 1.2s 1s, background .3s, color .3s;;}
    }
    .traffic-map.active ~ .traffic-obj{transform: translateX(0); opacity: 1; transition : 1.6s;}

    .traffic-obj{position : absolute; bottom : 0; right : 0; opacity: 0; transition : 1s;
        &.traffic-obj-01{left : 12px;width : 240px; transform: translateX(-100%); }
        &.traffic-obj-02{left : 5px; width : 24px; transform: translateY(100%);}
    }

    .traffic-left{width : 100%; margin-bottom: 24px;}
    .traffic-left-inner{width : 100%;}
    .traffic-tit-box{margin-bottom: 48px;}
    .traffic-desc{font-size: 16px; margin-bottom: 6px;}
    .traffic-tit{font-size: 24px;}
    .traffic-list{margin-bottom: 36px;}
    .traffic-list > li{
        &+li{margin-top: 12px;}
    }
    .traffic-name{font-size: 15px; gap : 5px; margin-bottom: 8px;
        > img{width : 24px}
    }

    .traffic-line{display: flex; align-items: center;gap : 5px;}
    .traffic-line > span{font-size : 13px;
        &.point{font-size: 14px;}
        &.point b{font-size: 16px;}
    }
    .traffic-dot{width : 16px; height : 16px; border : 3px solid #0C3388;}
    .traffic-dot-line{flex : 1;}

    .traffic-btn{width : 174px; height : 48px; padding-left: 12px; font-size: 14px; gap : 5px; transition : 1s; transform: translateY(80px); opacity: 0;
        &:hover{background: #000; color : #fff;
            .traffic-arrow{filter: invert(1);}
        }
    }
    .traffic-arrow{width : 48px; transition : .3s;
        &::after{position : absolute; content : ''; width : 24px; height : 24px; background: #DEDEDE; border-radius: 50%; transform: translateX(40%); right : 0; z-index: -1; }
    }

    .traffic-map{position : relative; width : 100%; transform: translateY(50%); opacity: 0; transition : 1s; margin-bottom: 40px;}
    .traffic-map-img{position : absolute; left : 0;top : 0; width : 100%; height : 100%; object-fit: contain; object-position: center; transition : 1s;}

    .traffic-info{font-size : 11px; gap : 3px; right : 10px; bottom : 10px; padding : 3px 12px 3px 3px;}
    .traffic-info > span{width : 24px;height : 24px; font-size : 16px;}    
    .traffic-info-inner{gap : 16px;border-radius : 8px; padding : 80px 16px 24px; font-size : 14px; position : relative; max-width : 90%;}
    .traffic-info-inner::after{position : absolute; content : ''; width : 90%; height : 1px; background: rgba(0,0,0,0.2);top : 48px;}

    .traffic-info-inner li{
        position : relative; padding-left: 12px; font-size: 13px; line-height: 1.2em;
        &+li{margin-top: 3px;}
    }
    .traffic-info-inner > span{display: none;}
    .traffic-info-close{font-size : 30px; position : absolute; top : 10px; right : 16px;}


    /**/
    .main-premium{margin-top: 80px; height : 700px;}
    .premium-slide{width : 100%;
        &::before{display: none;}
        &::after{display: none;}
    }
    .premium-container{display: flex;justify-content: center;align-items: center; position :absolute; left : 0;top : 0; z-index: 1; width : 100%; height : 100%;}
    .premium-container > div:not(.premium-tit-box){display: flex;align-items:start;padding-top: 180px; padding : 140px 12px 0;}
    .premium-02{position : absolute; left : 100%;top : 0;}
    .active .t2 .premium-01{transform: translateX(-50%) scale(0.8);}
    .active .t2 .premium-02{transform: translateX(-100%);}

    .premium-inner{display: grid;grid-template-columns: repeat(1, 1fr); width : auto;position : relative; gap :16px; margin-bottom: 36px; height : auto; width : 100%;}

    .premium-bg{position : absolute; left : 0;top: 0;width : 100%; height : 100%; overflow: hidden;}
    .premium-bg > img{width : 100%; height : 100%; object-fit: cover; object-position: center bottom; transform: scale(1.25); transition : 1s;}
    .active .premium-bg > img{transform: scale(1); transition :3s;}

    .premium-con{display: flex; justify-content: start; align-items: start; padding : 0; margin : 0;}

    .premium-con-inner{display: flex; align-items: center; gap : 20px; margin : 0; padding : 0; white-space: nowrap;}
    .premium-img{position : relative; width : 136px; flex-shrink: 0;}
    .premium-img > img{opacity: 0; transition : 1.2s .4s;}

    .active .t1 .premium-01 .premium-img > img,
    .active .t2 .premium-02 .premium-img > img{opacity: 1; transform: translateX(0);}

    .active .t1 .premium-01 .premium-con:nth-child(1) .premium-img > img,
    .active .t2 .premium-02 .premium-con:nth-child(1) .premium-img > img{transition : 1.2s .4s;}

    .active .t1 .premium-01 .premium-con:nth-child(2) .premium-img > img,
    .active .t2 .premium-02 .premium-con:nth-child(2) .premium-img > img{transition : 1.2s .6s;}

    .active .t1 .premium-01 .premium-con:nth-child(3) .premium-img > img,
    .active .t2 .premium-02 .premium-con:nth-child(3) .premium-img > img{transition : 1.2s .8s;}

    .active .t1 .premium-01 .premium-con:nth-child(4) .premium-img > img,
    .active .t2 .premium-02 .premium-con:nth-child(4) .premium-img > img{transition : 1.2s 1s;}

    .premium-img > img:nth-child(1){transform: translateX(-50px) translateY(-50px);}
    .premium-img-text{position : absolute;right : -9px; bottom : -8px; transform: translateX(50px) translateY(50px);}

    .premium-con-01 .premium-img-text{width : 56px;}
    .premium-con-02 .premium-img-text{width : 56px;}
    .premium-con-03 .premium-img-text{width : 40px;}
    .premium-con-04 .premium-img-text{width : 56px;}
    .premium-con-05 .premium-img-text{width : 30px;}
    .premium-con-06 .premium-img-text{width : 50px;}
    .premium-con-07 .premium-img-text{width : 48px;}
    .premium-con-08 .premium-img-text{width : 42px;}

    .premium-con-box{padding-bottom: 16px; font-family: PT; letter-spacing: -0.03em; opacity: 0; transform: translateX(100px); transition : 1s .4s;}

    .active .t1 .premium-01 .premium-con-box,
    .active .t2 .premium-02 .premium-con-box{transform: translateX(0); opacity: 1; transition : 1.2s 1.4s;}

    .premium-con-tit{font-size: 14px; margin-bottom: 8px;}
    .premium-02 .premium-con-tit{color : #fff}
    .premium-con-desc{font-size: 12px; letter-spacing: -0.06em;}
    .premium-02 .premium-con-desc{color : #9A9A9A}

    .premium-tit-box{display: flex;flex-direction: column;align-items: center;justify-content: center; position :absolute;z-index: 10; top : 0; padding :40px 24px;}

    .premium-tit-desc-01{font-size: 16px;}
    .premium-tit-desc-02{font-size: 16px;}

    .active .premium-tit-desc-01,
    .active .premium-tit-desc-02{transform: translateY(0); opacity: 1; transition : 2s .4s;}

    .premium-tit{font-size: 46px; white-space: nowrap; margin-bottom: 10px;}

    .premium-tit .char{transform: translateY(-100%); transition : 1s;}
    .premium-tit > p:nth-child(2) .char{transform: translateY(100%);}
    .premium-tit > p:nth-child(2){color : #A5A5A5; position : absolute; left : 0;top : 0;}

    .active .t1 .premium-tit > p:nth-child(1) .char{transform: translateY(0);}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(1){transition :  .7s .4s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(2){transition :  .7s .45s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(3){transition :  .7s .4s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(4){transition :  .7s .55s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(5){transition :  .7s .6s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(6){transition :  .7s .65s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(7){transition :  .7s .7s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(8){transition :  .7s .75s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(9){transition :  .7s .8s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(10){transition : .7s .85s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(11){transition : .7s .9s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(12){transition : .7s 1s}
    .active .t1 .premium-tit > p:nth-child(1) .char:nth-child(13){transition : .7s 1.05s}

    .t2 .premium-tit > p:nth-child(1) .char{transform: translateY(-100%);}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(1){transition :  .7s .4s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(2){transition :  .7s .45s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(3){transition :  .7s .4s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(4){transition :  .7s .55s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(5){transition :  .7s .6s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(6){transition :  .7s .65s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(7){transition :  .7s .7s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(8){transition :  .7s .75s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(9){transition :  .7s .8s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(10){transition : .7s .85s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(11){transition : .7s .9s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(12){transition : .7s 1s}
    .t2 .premium-tit > p:nth-child(1) .char:nth-child(13){transition : .7s 1.05s}

    .active .t1 .premium-tit > p:nth-child(2) .char{transform: translateY(100%);}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(1){transition :  .7s .4s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(2){transition :  .7s .45s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(3){transition :  .7s .4s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(4){transition :  .7s .55s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(5){transition :  .7s .6s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(6){transition :  .7s .65s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(7){transition :  .7s .7s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(8){transition :  .7s .75s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(9){transition :  .7s .8s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(10){transition : .7s .85s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(11){transition : .7s .9s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(12){transition : .7s 1s}
    .active .t1 .premium-tit > p:nth-child(2) .char:nth-child(13){transition : .7s 1.05s}

    .t2 .premium-tit > p:nth-child(2) .char{transform: translateY(0%);}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(1){transition :  .7s .4s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(2){transition :  .7s .45s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(3){transition :  .7s .4s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(4){transition :  .7s .55s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(5){transition :  .7s .6s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(6){transition :  .7s .65s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(7){transition :  .7s .7s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(8){transition :  .7s .75s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(9){transition :  .7s .8s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(10){transition : .7s .85s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(11){transition : .7s .9s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(12){transition : .7s 1s}
    .t2 .premium-tit > p:nth-child(2) .char:nth-child(13){transition : .7s 1.05s}

    .premium-tit-desc {font-size: 15px;margin-bottom: 5px;position : relative;}
    .premium-tit-desc > span {font-family: AV;font-size: 24px;position: absolute;right: 100%;bottom: -50%;transform: rotate(-15deg) translateX(-50%);}

    .premium-btn{display: none;}
    .premium-navigation{position : absolute; bottom : 0; left : 50%; transform: translateX(-50%);z-index: 10; height : auto !important; width : 100% !important; display: grid !important; grid-template-columns: repeat(2,1fr);}
    .premium-navigation > div{display: flex;align-items: center; justify-content: center; height : 36px; background: #A5A5A5;}
    .premium-navigation > div::after{position : absolute; content : ''; width : 7px; height : 7px; border-top : 1px solid #fff; border-left : 1px solid #fff}
    .premium-prev{border-radius: 10px 10px 0 0;}
    .premium-prev::after{transform: rotate(-45deg);}

    .premium-navigation .swiper-button-disabled{opacity : 0.5;}

    .premium-next{border-radius: 10px 10px 0 0; background: #004E50 !important;}
    .premium-next::after{transform: rotate(135deg); border-color: #fff !important;}

    /**/
    .main-contact.active{
        .contact-tit-box{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
        .contact-map{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
        .contact-con{transform: translateY(0); opacity: 1; transition : 1.2s .4s;}
        .contact-address-box::after{clip-path: inset(0); transition : 2s .4s;}

        .contact-line-tit{transform: translateX(0); opacity: 1; transition :1.2s 1s;}
        .contact-line-img{clip-path: inset(0); transition : 2.3s 1s;}
        .contact-line-con{transform: translateY(0); opacity: 1}
        .contact-line-con-01{transition : 1s 1.2s;}
        .contact-line-con-02{transition : 1s 1.5s;}
        .contact-line-con-03{transition : 1s 1.8s;}
        .contact-line-con-04{transition : 1s 2.1s;}

        .contact-qr{transform: scale(1); opacity: 1; transition : 1s 3s;}
    }
    .contact-bg{transition : 1s;}
    .active .contact-bg > img{transition :3s;}

    .contact-inner{padding : 48px 16px;}

    .contact-tit-box{margin-bottom: 24px; transition : 1s;}
    .contact-tit{font-size: 40px; margin-bottom: 6px;}
    .contact-desc{font-size: 14px;}
    .contact-container{display: flex; flex-direction: column; align-items: center; gap : 38px; margin-bottom: 48px;}
    .contact-map{transform: translateX(-100px);opacity: 0; transition : 1s;}

    .contact-con{width : 100%; transform: translateX(100px);opacity: 0; transition : 1s;}
    .contact-address-box{display: flex; justify-content: space-between; padding-bottom: 24px; position : relative;
        &::after{position : absolute; content : ''; width : 100%; height : 1px; bottom : 0; left : 0; background: rgba(0,0,0,0.27); clip-path: inset(0 100% 0 0); transition : 1s;}
        &+.contact-address-box{margin-top: 24px;}
    }
    .contact-address{font-family: PT; letter-spacing: -0.04em; font-size: 14px; font-weight: 500; color : #1F1F1F;
        > b{display: block; font-size: 16px; margin-bottom: 6px;}
    }

    .contact-btn-box{display: flex; gap : 4px;
        img{width : 30px}
    }

    .contact-line-box{display: flex;flex-direction: column;  align-items: center;gap : 48px;}
    .contact-line-tit{font-family: PT; font-size: 16px; letter-spacing: -0.03em; color : #004E50; margin-bottom: 36px; transform: translateX(-100px); opacity: 0; transition : 1s; text-align: center;}
    .contact-line{position : relative;}
    .contact-line-img{clip-path: inset(0 100% 0 0); transition : 1s;}
    .contact-line-con{display: flex;flex-direction: column;align-items: center;justify-content: start; font-family: PT; gap : 6px; font-size: 12px; letter-spacing: -0.04em; font-weight: 600; color : #1C1C1C; position : absolute;  width : 0px; white-space: nowrap; top : calc(0% - 10px); transform: translateY(16px); opacity: 0; transition : 1s;
        &.contact-line-con-01{left : 11%;}
        &.contact-line-con-02{left : 34%;}
        &.contact-line-con-03{left : 58%;}
        &.contact-line-con-04{left : 84%;}
        img{height : 30px;}
    }
    .contact-icon{flex-shrink: 0; max-width: none;}

    .contact-qr{transform: scale(1.5);opacity: 0; transition : 1s; width : 80px;}
}