.open-rotate-btn{display: flex;flex-direction: column; justify-content: center; align-items: center; width : 106px; height : 106px; position : fixed; z-index: 10;right : 83px; bottom : 51px; background: transparent; border-radius: 50%;  transform: translateX(100px); pointer-events: none; opacity: 0; transitioN : 1.2s; font-size: 19px; font-weight: 700; letter-spacing: -0.04em;
    span{font-family: jost; font-size: 23px; color : #003744;}
    b{font-family: jost; font-size: 31px; color : #003744; font-weight: 700;}
    &::after{position : absolute; content : ''; width : 144px; height : 144px; background: url(/assets/images/main/open-rotate-text.png)no-repeat center / contain; animation : rotate-text 8s infinite linear}
    &.fill{background: #fff;}
    &.show{transform: translateX(0); opacity: 1;}
    &.hide{transform: translateX(100px); opacity: 0;}
}
@keyframes rotate-text {
    100%{transform: rotate(-360deg);}
}
.quick-menu{display: flex;flex-direction: column;align-items: center;gap : 10px; position : fixed; right : 85px; bottom : 37px;z-index: 10; transform: translateX(100px); opacity: 0; transition : 1.2s;
    &.show{transform: translateX(0); opacity: 1;}
    &.hide{transform: translateX(100px); opacity: 0; pointer-events: none;}
}


.section{overflow: hidden;}

.skip-btn{display: flex;align-items: center;justify-content: center; position : absolute; font-family: jost; background: #003744; width : 70px; height : 70px; top : 50%; left : 50%;z-index: 1000; 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);}

.skip-btn::after{position : absolute; content : ''; width : 100%;height : 100%; background: #003744; border-radius: 50%; animation : skip-btn 1s infinite; z-index: -1;}
@keyframes skip-btn {
    0%{opacity: 1; transform: scale(1);}
    100%{opacity: 0; transform: scale(1.5);}
}

/*  */
.visual-inner{display: flex;flex-direction: column;align-items: center;justify-content: center; position : relative; width : 100%; height : 100%;}
.visual-circle{display: flex;align-items: center;justify-content: center; position : absolute; width : 100%; height : 100%;left : 0;top: 0; transition : 1.2s;}
.visual-circle-inner{display: flex;align-items: end; width : 100%; height : 100%; background: #fff; z-index: 1; clip-path: circle(0px); transition : 2s;
    &::after{position : absolute; content : ''; width : 349px; height : 349px; border : 1px solid #aaa; left : 50%; top : 50%; transform: translateX(-50%) translateY(-50%) scale(0); border-radius: 50%; transition : 2s;}
}
.visual-circle-inner > img{width : 100%; height : 60%; object-fit: cover; transform: scale(1.25); transition : 5s;}
.visual-leaf{position : absolute;transform: scale(0.8) translateY(-10%) translateX(-3%); opacity: 0; transition : 2s;}

.visual-bg{position :absolute; left : 0;top : 0; width : 100%; height : 100%; opacity: 0; transition : 1.2s;}
.visual-bg > video{width :100%; height : 100%; object-fit: cover; object-position: center;}
.visual-apt{position : absolute; left : 0; bottom : 0; width : 100%; transform: translateY(100%); transition :2s;}

.visual-tit-box{display: flex; position : absolute; z-index: 10;transform: translateY(-280px) translateX(43.5%); color : #003744; transition : 2s;}
.visual-tit{display: flex; align-items: center; gap : 18px;}

.visual-tit-desc-01{letter-spacing: 0.25em; font-size: 40px; font-weight: 500;
    .char{opacity: 0;}
}
.visual-tit-line{width : 108px; height : 1px; background: rgba(0,0,0,0.5); clip-path: inset(0 100% 0 0); transition : 2s;}
.visual-tit-desc-02{font-size: 66px; font-weight: 100; letter-spacing: -0.04em;
    b{font-weight: 700;}
    .char{opacity: 0;}
}
.visual-desc{position : absolute; top : 100%; right : 0; font-family: GG; font-size: 18px; font-weight: 400; color : #000; margin-top: 13px; transform: translateX(50%); opacity: 0; transition :2s;}

.t1{
    .visual-circle-inner{clip-path: circle(175px);
        &::after{transform: translateX(-50%) translateY(-50%) scale(1);}
    }
    .visual-leaf{opacity: 1; transition-delay: 0.8s; transform: scale(1) translateY(-10%) translateX(-3%);}

    .visual-tit-desc-01 .char{opacity: 1; transition : 1s calc(var(--i) * 0.2s)}
}
.t2{
    .visual-circle-inner{clip-path: circle(200vmax); transition : 5s;
        &::after{opacity : 0; transform: scale(100); transition : 5s;}
        & > img{transform: scale(1);}
    }
    .visual-tit-box{transform: translateY(-280px) translateX(0%); transition : 2.4s;}
    .visual-tit-line{clip-path: inset(0);}
    .visual-tit-desc-02 .char{opacity: 1; transition : 1s calc(var(--i) * 0.1s)}
    .visual-desc{transform: translateX(0); opacity: 1;}
}
.t3{
    .visual-bg{opacity: 1;}
    .visual-circle{opacity: 0;}
    .visual-tit-box{transform: translateY(0px) translateX(0%); transition : 2s;}
}
.t4{
    .visual-tit-box{transform: translateY(-240px) translateX(0%); transition : 2s;}
    .visual-apt{transform: translateY(0);}
}

/*  */
.main-map{background: #fff;}
.map-bg{position :absolute; left : 0;top: 0; width : 100%; height: 100%; overflow: hidden;transform: translateX(-50%); transition : 0s 1.2s;}
.map-bg > img{width : 100%; height: 100%; object-fit: cover; object-position: left bottom;}

.map-inner{display: flex; flex-direction: column; align-items: center; justify-content: center; position : relative; width : 32%; margin-left: auto;}
.map-tit-box{display: flex;flex-direction: column;align-items: center;justify-content: center; text-align: center; margin-bottom: 155px;}

.map-tit{font-size: 36px; line-height: 1.5em; color :#101010; letter-spacing: -0.04em; transform: translateY(100px); opacity: 0; transition : 0s 1.2s; margin-bottom: 32px; font-weight: 500; color : #003744;}

.map-desc{font-family: GG; line-height: 1.5em; transform: translateY(100px); opacity: 0; transition : 0s 1.2s;
    .char{opacity: 0; transition : 0s 1.2s;}
}

.map-link{display: flex; gap : 10px; font-size: 15px; font-family: jost; letter-spacing: 0.25em; transform: translateY(100px); opacity: 0; transition : 0s 1.2s;
    &:hover .map-arrow{
        &::after{transform: translateX(100%) scale(0);}
        img{transform: translateX(10px);}
    }
}
.map-arrow{display: flex;align-items: center;justify-content: end; position : relative; z-index: 1;
    img{transition : .5s;}
    &::after{position : absolute; content : ''; width : 24px; height : 24px; background: #F2EEE5; border-radius: 50%;z-index: -1; transform: translateX(30%) scale(1); transition : .5s;}
}

.active{
    .map-bg{transform: translateX(0); transition :1.4s;}
    .map-tit{transform: translateY(0); opacity: 1; transition : 1.2s 0.4s;}
    .map-desc{transform: translateY(0); opacity: 1; transition : 1.2s 0.5s;
        .char{opacity: 1; transition : 1s calc(var(--i) * 0.05s + 0.5s)}
    }
    .map-link{transform: translateY(0); opacity: 1; transition : 1.2s 0.6s;}
}

/*  */

.location-list{width : 100%; height : 100%; display: grid; grid-template-columns: repeat(4,1fr); perspective: 1000px;}
.location-list > li{display: flex;align-items: start;justify-content: center; position : relative; padding-top: 180px; transform: scale(0.5) rotateY(-30deg) rotateX(10deg); opacity: 0; transition : 0s 1.2s; box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    &:nth-child(1){background: #003744;}
    &:nth-child(2){background: #fff;}
    &:nth-child(3){background: #877D77;
        .location-con-desc{color : #000}
    }
    &:nth-child(4){background: #EBEDEC;}
}
.location-bg{position :absolute; left : 0; bottom : 0; width : 100%; overflow: hidden;}
.location-bg > img{width : 100%; height : auto; object-fit: cover; object-position: center bottom; transform: translateY(100%); opacity: 0; transition : 0s 1.2s;}

.location-con-box{display: flex;flex-direction: column;align-items: center;}
.location-tit{font-family: jost; font-size: 30px; font-weight: 500; letter-spacing: 0.25em; margin-bottom: 19px; color : #fff; transform: translateY(100px); opacity: 0; transition : 0s 1.2s;}
.location-line{width : 1px; height : 63px; background: rgba(255,255,255,0.4); margin-bottom: 32px; transform: translateY(100px); clip-path: inset(0 100% 0 0); transition : 0s 1.2s;}
.location-con-tit{font-size: 20px; letter-spacing: -0.04em; font-weight: 500; color : #fff; margin-bottom: 22px; transform: translateY(100px); opacity: 0; transition : 0s 1.2s;}
.location-con-desc{font-size: 16px; font-weight: 500; line-height: 1.5em; letter-spacing: -0.04em; color : #9A9A9A; text-align: center; transform: translateY(100px); opacity: 0; transition : 0s 1.2s;}

.dark{
    .location-tit{color : #003744;}
    .location-line{background:rgba(0,0,0,0.42);}
    .location-con-tit{color : #000;}
    .location-con-desc{color : #2C2C2C}
}

.active{
    .location-list > li{transform: scale(1) rotateY(0) rotateX(0); opacity: 1;
        &:nth-child(1){transition : 1.2s .4s;}
        &:nth-child(2){transition : 1.2s .5s;}
        &:nth-child(3){transition : 1.2s .6s;}
        &:nth-child(4){transition : 1.2s .7s;}
    }
    .location-tit{transform: translateY(0); opacity: 1; transition : 1.2s 1s;}
    .location-line{transform: translateY(0); clip-path: inset(0); transition : 1.2s 1.1s;}
    .location-con-tit{transform: translateY(0); opacity: 1; transition : 1.2s 1.2s;}
    .location-con-desc{transform: translateY(0); opacity: 1; transition : 1.2s 1.3s;}
    .location-bg > img{transform: translateY(0); opacity: 1; transition : 2s 0.4s;}
}

/*  */
.premium-slide{width : 100%; height : 100%;}
.premium-container{display: flex; position : absolute; left : 0;top : 0; width : 100%; height : 100%; z-index: 1;}
.premium-container > div{display: flex;align-items: center;justify-content: center; width : 50%; height : 100%; flex-shrink: 0; transition : 1.2s; padding-top: 100px; position : relative;
    &.premium-01{background: #fff;}
    &.premium-02{background: #F2EEE5;}
    &.premium-03{background: #003744;}
    &.premium-04{background: #fff;
        .premium-inner{padding-bottom: 200px;}
    }
    &:hover{
        .premium-img-inner > img{transform: scale(1.25);}
        .premium-leaf{opacity: 1;}
    }
}

.premium-tit{position : relative; font-family: jost; font-size: 44px; font-weight: 500; letter-spacing: 0.25em; margin-bottom: 19px; transform: translateX(-100px); opacity: 0; transition : 0s 1.2s;
    & > b{font-weight: 500;}
    & > span{position :absolute; font-family: AV; bottom :100%; left : -70px; transform: rotate(-15deg); font-size: 32px; font-weight: 700; letter-spacing: 0.05em;}
    .char{opacity: 0; transition : 0s 1.2s;}
}

.premium-img{position :relative; margin-bottom: 45px; transform: translateY(100px); opacity: 0; transition : 0s 1.2s;}
.premium-img-inner{overflow: hidden;
    & > img{transition : 5s;}
}
.premium-leaf{position : absolute; bottom : -160px; right : -114px; opacity: 0; pointer-events: none; transition : 1s;}

.premium-con{display: flex;flex-direction: column; letter-spacing: -0.04em; width : 100%;}
.premium-con-tit{font-size: 20px; font-weight: 500; margin-bottom: 16px; transform: translateY(-50px); opacity: 0; transition : 0s 1.2s;}
.premium-line{width : 100%; height : 1px; background: rgba(0,0,0,0.3); margin-bottom: 14px; clip-path: inset(0 100% 0 0); transition : 0s 1.2s;}
.premium-con-desc{font-size: 16px; font-weight: 400; color : #050505; line-height: 1.5em; transform: translateY(50px); opacity: 0; transition : 0s 1.2s;}

.white{
    .premium-tit{color : #fff;
        & > span{color : #A7A7A7}
    }
    .premium-con-tit{color : #fff;}
    .premium-line{background: rgba(255,255,255,0.4);}
    .premium-con-desc{color : #fff;}
}

.premium-list{display: flex;flex-direction: column; gap : 16px;}
.premium-list > li{display: flex; gap : 76px; align-items: end;}
.premium-list-con{display: flex;flex-direction: column; width : 283px; letter-spacing: -0.04em;}
.premium-list-tit{font-size: 20px; font-weight: 500; margin-bottom: 16px; transform: translateY(-50px); opacity: 0; transition : 0s 1.2s;}
.premium-list-line{width : 100%; height : 1px; background: rgba(0,0,0,0.3); margin-bottom: 14px; clip-path: inset(0 100% 0 0); transition : 0s 1.2s;}
.premium-list-desc{font-size: 16px; font-weight: 400; line-height: 1.5em; transform: translateY(50px); opacity: 0; transition : 0s 1.2s;}

.premium-list-img{overflow: hidden; transform: translateX(100px); opacity: 0; transition : 0s 1.2s;}

.premium-text{font-family: GG; font-size: 18px; font-weight: 400; white-space: nowrap; position : absolute; left : 15px;bottom  : 30px; transform: rotate(90deg) translateX(-100%); transform-origin: left bottom;
    b{font-weight: 700; color : #003744; margin-right: 18px;}
    span{font-family: jost; font-size: 15px; color : #050505; letter-spacing: 0.4em;}
    .char{opacity: 0; transition : 0s 1.2s;}
}


.active .on{
    .premium-tit{transform: translateX(0); opacity: 1; transition : 1.2s .4s;
        .char{opacity: 1; transition : 1s calc(var(--i) * 0.05s + 0.5s)}
    }
    .premium-img{transform: translateY(0); opacity: 1; transition : 1.2s .6s;}
    .premium-con-tit{transform: translateY(0); opacity: 1; transition : 1.2s 1s;}
    .premium-line{clip-path: inset(0); transition : 1.2s 1s;}
    .premium-con-desc{transform: translateY(0); opacity: 1; transition : 1.2s 1s;}
    
    .premium-list-tit{opacity: 1; transform: translateY(0);}
    .premium-list-line{clip-path: inset(0);}
    .premium-list-desc{opacity: 1; transform: translateY(0);}
    .premium-list-img{opacity: 1; transform: translateY(0);}

    .premium-list > li{
        &:nth-child(1){
            *{transition : 1.2s .4s;}
        }
        &:nth-child(2){
            *{transition : 1.2s .6s;}
        }
        &:nth-child(3){
            *{transition : 1.2s .8s;}
        }
    }
    .premium-text .char{opacity: 1; transition : 1s calc(var(--i) * 0.05s + 0.5s)}
}
.t2{
    .premium-container > div{transform: translateX(-100%);}
}
.t3{
    .premium-container > div{transform: translateX(-200%);}
}

/*  */
.contact-bg{position : absolute; left : 0;top : 0;width: 100%; height: 100%; overflow: hidden;
    img{width : 100%; height : 100%; object-fit: cover; object-position: center;transform: scale(1.25); transition : 0s 1.2s;}
}

.contact-inner{display: flex;justify-content: center;align-items: end; position : relative; gap : 185px;}
.contact-left{transform: translateX(-100px); opacity: 0; transition : 0s 1.2s;}
.contact-right{transform: translateX(100px); opacity: 0; transition : 0s 1.2s;}
.contact-tit-box{margin-bottom: 50px;}
.contact-tit{font-family: jost; font-size: 65px; font-weight: 400; color : #003744; margin-bottom: 16px;
    .char{opacity: 0; transition : 0s 1.2s;}
}
.contact-desc{font-size: 16px; letter-spacing: -0.03em; color : #000;}
.contact-info{font-size: 16px; font-weight: 500; margin-bottom: 80px;
    span{font-family: jost;}
}
.contact-address-container{width : 623px;}
.contact-address-box{display: flex; justify-content: space-between; align-items: end; position : relative; padding-bottom: 26px;
    &+.contact-address-box{margin-top: 37px;}
    &::after{content: '';position : absolute; width : 100%; height: 1px; background: #B2B2B2; left : 0; bottom : 0; clip-path: inset(0 100% 0 0); transition : 0s 1.2s;}
}

.contact-address{display: flex;flex-direction: column;align-items: start; font-size: 16px; letter-spacing: -0.04em; font-weight: 500; color : #1F1F1F; margin-bottom: 6px;
    b{font-size: 25px; letter-spacing: -0.04em; font-weight: 500; color : #003744; margin-bottom: 16px;}
}

.contact-btn-box{display: flex;gap : 20px;}
.contact-btn-box > a{display: flex;align-items: center; gap : 11px; font-size: 16px; letter-spacing: -0.04em; font-weight: 500; color : #1F1F1F; opacity: 0; transform: translateY(50px); transition : 0s 1.2s;}

.fp-active{
    .contact-left{transform: translateX(0); opacity: 1; transition : 1.4s .4s;}
    .contact-tit .char{opacity: 1; transition : 1s calc(var(--i) * 0.1s + 0.5s)}
    .contact-address-box::after{clip-path: inset(0); transition : 2s;}
    .contact-right{transform: translateX(0); opacity: 1; transition : 1.4s .4s;}
    .contact-btn-box > a{transform: translateY(0); opacity: 1;
        &:nth-child(1){transition : 1.2s .8s}
        &:nth-child(2){transition : 1.2s 1s}
    }
}