@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

@keyframes rotate-text {
    100%{transform: rotate(-360deg);}
}
body.fixed{overflow: hidden;}
html,
body {
    overflow: hidden;
}

.scroll{display:flex;align-items:end;gap:8px;position:absolute;bottom:100px;left:90px;z-index:10;pointer-events:none;transition:1s; transform : translateX(-100px); opacity : 0;
	&.show{opacity:1; transform : translateX(0px)}
	&.up{transform : translateY(-36px)}
	&.hide{opacity:0; transform : translateX(-100px)}
	&.dark{
		.scroll-progress{background:rgba(0,0,0,.3);}
		.scroll-progress::after{background:#000;}
		.scroll-circle{border-color:#000;}
		.scroll-arrow{border-color:#000;}
		& > span{color:#000;}
	}
}
.scroll-icon{display:flex;flex-direction:column;align-items:center;}
.scroll-progress{width:1px;height:73px;background:rgba(255,255,255,.5);position:relative;margin-bottom:8px;transition:background .5s;}
.scroll-progress::after{position:absolute;content:'';width:100%;height:100%;left:0;top:0;background:#fff;animation:scroll-progress 2s infinite;transition:background .5s;}
@keyframes scroll-progress{0%{height:0%}100%{height:100%;}}
.scroll-circle{width:10px;height:10px;border-radius:50%;border:1px solid #fff;transition:border-color .5s;}
.scroll-arrow{width:8px;height:8px;border-bottom:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg);transition:border-color .5s;}
.scroll>span{color:#fff;font-family:gotham;font-size:15px;line-height:20px;transition:color .5s;}

.section{overflow: hidden; position : relative;}
.swiper-wrapper{transition-timing-function: cubic-bezier(0.4, 0, 0.3, 1) !important;}
.loading.end{opacity: 0;}
.open-rotate-btn{font-family: Asta Sans;display: flex;flex-direction: column; justify-content: center; align-items: center; width : 14.4rem; height : 14.4rem; position : absolute; z-index: 10;right : 8.5rem; bottom : 6.8rem; background: transparent; border-radius: 50%;  transform: translateX(10rem); pointer-events: none; opacity: 0; transitioN : 1.2s; font-size: 2.3rem; font-weight: 700; letter-spacing: -0.04em; color : #fff; text-align: center;
    &::after{position : absolute; content : ''; width : 100%; height : 100%; 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(10rem); opacity: 0;}
    span{font-size: 4.2rem; padding : 0.5rem 0; display : block;}
}

/* INTRO */

.skip-btn{display: flex;align-items: center;justify-content: center; position : absolute; font-family: jost; background: rgba(255,255,255,0.2); width : 7rem; height : 7rem; 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: 1.6rem; transition : transform .5s;}
.skip-btn.on{transform: translateX(-50%) translateY(-50%) scale(1);}

.skip-btn::after{position : absolute; content : ''; width : 100%;height : 100%; background: rgba(255,255,255,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{background: #0A2266; width : 100%; height : 100%;}

.intro-01{display: flex;align-items: center;justify-content: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%;
    .intro-tit-box{display: flex;align-items: center; gap : 1.5rem; transform: translateX(35rem);}
    .intro-desc{font-size: 1.8rem; font-family: KPB; color : #fff; letter-spacing: 1em;
        .char{opacity: 0; filter: blur(10px);}
    }
    .intro-tit-line{width : 19.3rem; height : 1px; background: rgba(255,255,255,0.3); clip-path: inset(0 100% 0 0);}
}
svg{width : 48.5488rem; height : 14.5807rem}
svg path{stroke: #fff; stroke-width: 2rem; stroke-dasharray : var(--length); stroke-dashoffset: var(--length); fill: transparent; transition : stroke-dashoffset 4s, opacity 4s; opacity: 0;}

.intro-02{display: flex;align-items: center;justify-content: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%; z-index: 1;
    .intro-02-bg{display: grid; grid-template-columns: repeat(8, 1fr); position : absolute; left : 0; top : 0; width : 100%; height : 100%;
        b{aspect-ratio: 1/1; background: #fff; transform: rotate(-45deg) scale(0);}
    }
    .intro-tit-box-02{display: flex; justify-content: center; align-items: center; position :relative; perspective: 1000px;
        img{position : absolute; max-width: none; height : 22.9rem; opacity: 0; filter: blur(10px);
            &:nth-child(1){transform: translateX(calc(-50% - 48.2rem)) rotateY(35deg) translateZ(30rem);}
            &:nth-child(2){transform: translateX(calc(-50% - 15.7rem)) rotateY(45deg) translateZ(10rem);;}
            &:nth-child(3){transform: translateX(calc(50% + 15.4rem)) rotateY(-45deg) translateZ(10rem);}
            &:nth-child(4){transform: translateX(calc(50% + 48.4rem)) rotateY(-35deg) translateZ(30rem);}
        }
    }
}

.visual-container{display: flex;align-items: center;justify-content: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%; clip-path: inset(calc(50% - 19.35rem) calc(50% - 5.95rem)); clip-path : inset(50% calc(50% - 5.95rem)); z-index: 1;}
.visual-bg{display: flex;justify-content: center;align-items: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%;
    video{width : 100%; height : 100%; object-fit: cover; object-position: center; position : absolute; left : 0;top : 0;}
    .visual-bg-clip-box{display: flex;justify-content: center; width : 11.9rem; height : 38.7rem; position : absolute;}
    .visual-bg-clip{position : absolute; background: #fff;
        &.visual-bg-clip-01{width : 3.42rem; height : 100%; clip-path: inset(50% 0);}
        &.visual-bg-clip-02{width : 8.5rem; height : 8.5rem; transform: rotate(45deg) translateX(-35%) translateY(-35%) scale(0); z-index: 1;top : 0;}
        &.visual-bg-clip-03{width : 8.5rem; height : 8.5rem; transform: rotate(45deg) translateX(35%) translateY(35%) scale(0); z-index: 1;bottom : 0;}
    }
}

.visual-tit-box{display: flex;align-items: center; gap : 0.9rem; position : relative; z-index: 1; transform: translateX(2%); padding-bottom: 16rem;}
.visual-desc{font-size: 2.4rem; font-family: KPB; color : #000;
    .char{opacity: 0; filter: blur(10px);}
}
.visual-tit-line{width : 13.25rem; height : 1px; background: rgba(0,0,0,0.3); clip-path: inset(0 100% 0 0); opacity : 0;}
.visual-tit{margin-left: 38.7rem;
    svg path{stroke:#0A2266 ; stroke-width: 2rem; stroke-dasharray : var(--length); stroke-dashoffset: var(--length); fill: transparent; transition : stroke-dashoffset 4s, opacity 4s; opacity: 0;}
}

#intro.t1{
    .intro-desc .char{opacity: 1; filter: blur(0px); transition : 1s calc(var(--i) * 0.1s)}
}

#intro.t2{
    .intro-tit-box{transform: translateX(0); transition : 3s}
    .intro-desc{letter-spacing: 0em; transition :2s;
        .char{transition : 0s !important;}
    }
    .intro-tit-line{clip-path: inset(0); transition :3s;}
    .intro-tit path{stroke-dashoffset : 0; opacity: 1;}
}
#intro.t3{
    .intro-02-bg > b{transform: rotate(0deg) scale(1.05); transition : 2s}
}
#intro.t4{
    .intro-tit-box-02 > img{transition : 2s; opacity: 1; filter: blur(0);
        &:nth-child(1){transform: translateX(calc(-50% - 48.2rem))}
        &:nth-child(2){transform: translateX(calc(-50% - 15.7rem))}
        &:nth-child(3){transform: translateX(calc(50% + 15.4rem))}
        &:nth-child(4){transform: translateX(calc(50% + 48.4rem))}
    }
    & + .visual-container{clip-path: inset(calc(50% - 19.35rem) calc(50% - 5.95rem)); transition : 1.4s;
        .visual-bg-clip{
            &.visual-bg-clip-01{clip-path: inset(0); transition : 1s;}
            &.visual-bg-clip-02{transform: rotate(45deg) translateX(-35%) translateY(-35%) scale(1); transition : 1.4s .6s;}
            &.visual-bg-clip-03{transform: rotate(45deg) translateX(35%) translateY(35%); transition : 1.4s .6s;}
        }
    }
}
#intro.t5{
    & + .visual-container{clip-path: inset(0); transition : 2s;
        .visual-bg-clip-box{width : 100%; height : 100%; transition :2s;
            .visual-bg-clip{
                &.visual-bg-clip-01{clip-path: inset(0 50%);}
                &.visual-bg-clip-02{transform: rotate(45deg) translateX(-35%) translateY(-35%) scale(0); transition-delay: 0s;}
                &.visual-bg-clip-03{transform: rotate(45deg) translateX(35%) translateY(35%) scale(0); transition-delay: 0s;}
            }
        }
        .visual-desc .char{opacity: 1; filter: blur(0px); transition : 1s calc(var(--i) * 0.1s + 1s)}
        .visual-tit-line{clip-path: inset(0); transition :3s 1s;}
        .visual-tit svg path{stroke-dashoffset : 0; opacity: 1; transition-delay: 1s;}
    }
    & ~ .info-desc{transform: translateY(0); opacity: 1; transition-delay: 2s;}
}

.info-desc{display: flex;align-items: center;gap : 0.7rem; color : #fff; font-size: 1.5rem; font-weight: 500; position : absolute; left : 8.3rem; bottom : 4.3rem; z-index: 1; transform: translateY(5rem); opacity: 0; transition :1.2s;
    &::before{display: flex;align-items: center;justify-content: center; position :relative; content :'!'; font-family: gotham; font-weight: 900; width : 2.4rem; height : 2.4rem; border-radius: 50%; border : 1px solid rgba(255,255,255,0.5);}
}

/* PREMIUM */
.premium-slide{width: 100%; height : 100%; position : relative;}
.premium-container{display: flex; width : 100%; height : 100%; position : absolute; left : 0;top : 0; z-index: 1; transition : 1.4s; transition-timing-function: cubic-bezier(0.4, 0, 0.3, 1) !important;
    & > div{position : relative; width : 100%; height : 100%; padding : 0 23.7rem 0 19.5rem; flex-shrink: 0; overflow: hidden;}
}
.premium-bg{position :absolute; left : 0;top : 0; width : 100%; height : 100%;
    img{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.25); transition : 0s 1.4s;}
}
.premium-inner{position : relative; height : 100%; display: flex;flex-direction: column;align-items: start;}

.premium-tit-box{display: flex; align-items: center; gap : 2.8rem; transform: translateX(-16rem); transition : 0s 1.4s;}

.premium-desc{font-size: 2.6rem; font-weight: 500;
    .char{opacity: 0; transition :0s 1.4s;}
}
.premium-tit-line{height : 1px; clip-path: inset(0 100% 0 0); transition : 0s 1.4s;}
.premium-tit{font-size: 2.6rem; font-weight: 500;
    span{font-family: KPB; font-weight: 500; font-size: 3.4rem;}
    small{font-size: 1.6rem; position: absolute !important;
        top: 4rem;
        left: 8.5rem;}
    .char{opacity: 0; transform: translateY(-5rem); transition :0s 1.4s;}
}
.premium-sub-tit{font-size: 4.9rem; font-weight: 300; font-family: gotham;
    b{font-weight: 700;}
    .char{opacity: 0; transition :0s 1.4s;}
}
.premium-con{line-height: 1.5em; padding-top: 3.5rem; position :relative; transform: translateX(-16rem); opacity: 0; transition :0s 1.4s;
    &.white{color : rgba(255,255,255,0.62);
        &::before{background: #fff;}
    }
    &::before{position :absolute; content : ''; width : 4.1rem; height : 1px; background: #0A2266; left : 0; top : 0;}
    .br{display: block !important; height : 2em}
    .line{transform: translateY(3rem); opacity: 0; transition : 0s 1.4s;}
}

.premium-img-box{position : absolute; transition : 0s 1.4s; opacity: 0;z-index: 1;}
.premium-img{position :relative;}
.premium-img-inner{overflow: hidden;
    img{transform: scale(1.5); transition : 0s 1.4s}
}
.img-cut{position :absolute; right : 1.5rem; bottom : 0.8rem; color : #fff; font-size: 1.4rem;
    &.left{right : auto; left : 1.5rem}
}

.premium-container > .premium-01{padding-top: 23rem;
    .premium-tit-line{width : 35.7rem; background: rgba(0,0,0,0.27);}
    .premium-tit-box{margin-bottom: 11rem;}
    .premium-con{margin-left: 10.4rem;}
	.img-cut{right : 8rem; bottom : 3.5rem}
}
.premium-container > .premium-02{
    .premium-tit-box{color : #fff;}
    .premium-tit-line{width : 17rem; background: rgba(255,255,255,0.27);}
}
.premium-container > .premium-03{padding-top: 18rem;
    .premium-tit-line{width : 22.2rem; background: rgba(0,0,0,0.27);}
    .premium-tit-box{margin-bottom: 19rem; text-align: right;}
    .premium-tit{margin-top: 3.5rem;
        span{margin-bottom: 1rem;}
    }
    .premium-con{margin-left: 10.4rem;}
    .premium-text{font-family: gotham; font-size: 1.4rem; letter-spacing: 0.3em; position : absolute; left : 18rem; bottom : 6rem;
        .char{opacity: 0; transition :0s 1.4s;}
    }
    .img-cut{right : 8rem; bottom : 3.5rem}
}

.premium-02 > div{position :absolute; width : 100%; height : 100%; left : 0;top : 0; padding : 23rem 23.7rem 0 19.5rem; overflow: hidden;}
.info{font-size: 1rem; font-weight: 500; line-height: 1.8em; position : absolute; left : 3rem; bottom : 3rem; color : rgba(255,255,255,0.57);
    .line{transform: translateY(5rem); opacity: 0; transition : 0s 1.4s;}
}

.premium-01 .premium-inner::after{position :absolute; content : ''; width : 1px; height : 100vh; background: rgba(0,0,0,0.19); left : 4rem; top : 8rem; clip-path: inset(0 0 100%); transition : 0s 1.4s;}
.premium-02-01 .premium-inner::after,
.premium-02-02 .premium-inner::after{position :absolute; content : ''; width : 1px; height : 100vh; background: rgba(255,255,255,0.3); right : 0; top : 0; clip-path: inset(0 0 100%); transition : 0s 1.4s;}
.premium-02-01 .premium-inner::before,
.premium-02-02 .premium-inner::before{position :absolute; content : ''; width : 58.2rem; height : 1px; background: rgba(255,255,255,0.3); right : -15.7rem; top : 11.1rem; clip-path: inset(0 0 100%); transition : 0s 1.4s;}

.premium-03 .premium-inner::after{position :absolute; content : ''; width : 1px; height : 100vh; background: rgba(0,0,0,0.19); left : 4rem; top : 12rem; clip-path: inset(0 0 100%); transition : 0s 1.4s;}
.premium-03 .premium-inner::before{position :absolute; content : ''; width : 58.2rem; height : 1px; background: rgba(0,0,0,0.19); left : 0; bottom : 10rem; clip-path: inset(0 0 100%); transition : 0s 1.4s;}

.premium-02-01{
    .premium-img-box-01{right : -12.3rem; top : -0.4rem; transform: translateX(16rem) translateY(-16rem); width : 35.6rem;}
    .premium-img-box-02{right : 24.7rem; bottom : 12.7rem; transform: translateX(-16rem) translateY(16rem); width : 35.6rem;}
    .premium-con{margin-bottom: 3.2rem;}
}

.premium-02-02{opacity: 0; transition : 1s; z-index: 10;
    .premium-inner{padding-bottom: 10rem;}
    .premium-img-box-01{display: flex; align-items: end; position : relative; gap : 1.7rem; margin-bottom: 1.7rem; margin-left: auto; margin-top: auto; right : -10rem;
        .premium-img{transition : 0s 1.4s;
            &.premium-img-01{transform: translateX(-16rem) translateY(-16rem); width : 31.2rem;}
            &.premium-img-02{transform: translateX(16rem) translateY(-16rem); width : 19rem}
        }
    }
    .premium-img-box-02{display: flex; align-items: end; gap : 17rem; position :relative; margin-left: auto; right : -16rem; transform: translateY(16rem);
        .premium-img{width : 35.7rem}
    }
}


.main-premium.active{
    .t1{
        .premium-01{
            .premium-inner::after{clip-path: inset(0); transition : 3s 1s;}
            .premium-tit-box{transform: translateX(0); transition : 2s .4s;}
            .premium-desc .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 0.4s)}
            .premium-tit-line{clip-path: inset(0); transition : 1.2s .8s;}
            .premium-tit .char{opacity: 1; transform: translateY(0); transition : 1.2s calc(var(--i) * 0.05s + 1.2s)}
            .premium-bg > img{transform: scale(1); transition : 3s;}
            .premium-con{transform: translateX(0); opacity: 1; transition : 1.4s .4s;
                .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + 0.4s)}
            }
        }
    }
}
.main-premium{
        .t2{
        .premium-container{transform: translateX(-100%);}
        .premium-02-01{
            .premium-inner{
                &::after, &::before{clip-path: inset(0); transition : 3s 1s;}
            }
            .premium-bg > img{transform: scale(1); transition : 3s;}
            .premium-tit-box{transform: translateX(0); transition : 2s .4s;}
            .premium-sub-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 0.4s)}
            .premium-tit-line{clip-path: inset(0); transition : 1.2s .8s;}
            .premium-tit .char{opacity: 1; transform: translateY(0); transition : 1.2s calc(var(--i) * 0.05s + 1.2s)}
            .premium-img-box{opacity: 1; transform: translateX(0); transition : 1.4s .8s;}
            .premium-img-inner > img{transform: scale(1); transition : 3s .8s;}
            .premium-con{transform: translateX(0); opacity: 1; transition : 1.4s .4s;
                .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
            }
            .info .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
        }
    }
    .t3{
        .premium-container{transform: translateX(-100%);}
        .premium-02-02{opacity: 1;
            .premium-inner{
                &::after, &::before{clip-path: inset(0); transition : 3s 1s;}
            }
            .premium-bg > img{transform: scale(1); transition : 3s;}
            .premium-tit-box{transform: translateX(0); transition : 2s .4s;}
            .premium-sub-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 0.4s)}
            .premium-tit-line{clip-path: inset(0); transition : 1.2s .8s;}
            .premium-tit .char{opacity: 1; transform: translateY(0); transition : 1.2s calc(var(--i) * 0.05s + 1.2s)}
            .premium-img-box{opacity: 1; transform: translateX(0); transition : 1.4s .8s;
                .premium-img{transform: translateX(0); opacity: 1; transition : 1.4s .8s;}
            }
            .premium-img-inner > img{transform: scale(1); transition : 3s .8s;}
            .premium-con{transform: translateX(0); opacity: 1; transition : 1.4s .4s;
                .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
            }
            .info .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
        }
    }
    .t4{
        .premium-container{transform: translateX(-200%);}
        .premium-02-02{opacity: 1;
            .premium-bg > img{transform: scale(1); transition : 3s;}
        }
        .premium-03{
            .premium-inner{
                &::before, &::after{clip-path: inset(0); transition : 3s 1s;}
            }
            .premium-tit-box{transform: translateX(0); transition : 2s .4s;}
            .premium-sub-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 0.4s)}
            .premium-tit-line{clip-path: inset(0); transition : 1.2s .8s;}
            .premium-tit .char{opacity: 1; transform: translateY(0); transition : 1.2s calc(var(--i) * 0.05s + 1.2s)}
            .premium-bg > img{transform: scale(1); transition : 3s;}
            .premium-con{transform: translateX(0); opacity: 1; transition : 1.4s .4s;
                .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + 0.4s)}
            }
            .premium-text .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 1s)}
        }
    }
}

/* MAP */

.main-map{
    .info{color :#000; letter-spacing: -0.06em;}
}
.map-bg{position :absolute; left : 0;top : 0; width : 100%; height : 100%; background: #F0EFEE;
    img{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: translateX(50%); transition : 0s 1.4s; opacity: 0;}
}
.map-inner{position : relative; padding : 0 14.7rem;}
.map-tit-box{transform: translateX(-16rem); opacity: 0; transition : 0s 1.4s;}
.map-tit{font-family: gotham; font-size: 7.8rem; font-weight: 700; color :#0A2266; margin-bottom:2rem; margin-bottom: 3.6rem;
    .char{opacity: 0; transition : 0s 1.4s; transform: translateY(-5rem);}
}
.map-desc{font-size: 1.6rem; margin-bottom: 3.6rem; color : #1D1D1D;}
.map-sub-tit{font-family: KPB; font-size: 2.6rem; color : #0A2266; line-height: 1.5em; font-weight: 300; margin-bottom: 6.4rem;
    b{font-weight: 700;}
}
.map-btn{display: flex;align-items: center; font-family: gotham; font-size: 1.2rem; font-weight: 700; gap : 1.2rem; letter-spacing: 0.25em;z-index: 1; position : relative;
    &:hover{
        .arrow{
            &::after{transform: translateX(130%) scale(.5);}
            img{transform: translateX(30%);}
        }
    }
    .arrow{display: flex;align-items: center;position :relative;
        img{transition : .5s;}
        &::after{position : absolute; content : ''; width : 2.4rem; height: 2.4rem; background: #fff; border-radius: 50%; z-index: -1; right : 0; transform: translateX(30%); transition :.5s;}
    }
}

.main-map.active{
    .map-bg > img{transform: translateX(0); opacity: 1; transition : 2s .4s;}
    .map-tit-box{transform: translateX(0); opacity: 1; transition : 2s .4s;}
    .map-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + .4s); transform: translateX(0);}
    .info .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
}

/* LOCATION */
.location-slide{width : 100%;height : 100%;}
.location-container{position : absolute; left : 0;top : 0; width : 100%; height : 100%; z-index: 1;
    & > div{display: flex;align-items: center;justify-content: center; width : 100%; height : 100%; position : absolute; left : 0;top : 0; padding : 0 8rem;
        &.location-02{pointer-events: none;}
    }
}
.location-bg{position :absolute; left : 0;top : 0;width : 100%; height : 100%;
    & > div{position :absolute; left : 0;top : 0;width : 100%; height : 100%; transition : 1.4s;
        &.location-bg-02{opacity: 0;}
        & > img{position : absolute; left : 0;top : 0; width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.25); transition : 3s;}
    }
}
.location-list{position :relative; width : 100%; opacity: 0; transition : 0s 1.4s;}
.location-list > li{display: flex; justify-content: center; position :relative; padding-top: 3.3rem; transition : 1.2s calc(var(--i) * 0.05s) cubic-bezier(0.4, 0, 0.3, 1);
    &::before{position :absolute; content : ''; width : 100%; height : 1px; left : 0; bottom : 0; background: #383838;}
    &::after{position :absolute; content : ''; width : 100%; height : 1px; left : 0; bottom : 0; background: #B9A790; clip-path: inset(0 50%); transition : 1s;}
    
    &:nth-child(1){
        .location-con{transform: translateX(120%);}
        .location-desc{right : 100%; text-align: right;}
        .location-con-tit{left : 16rem;}
    }
    &:nth-child(2){
        .location-con{transform: translateX(40%);}
        .location-desc{right : 100%; text-align: right;}
        .location-con-tit{left : 0;}
    }
    &:nth-child(3){
        .location-con{transform: translateX(-40%);}
        .location-desc{left : 100%;}
        .location-con-tit{right : 0;}
    }
    &:nth-child(4){
        .location-con{transform: translateX(-120%);}
        .location-desc{left : 100%;}
        .location-con-tit{right : 16rem;}
    }

    &:hover{
        &::after{clip-path: inset(0);}
        .location-con-tit{
            & > span{transform: translateY(-200%);}
            &::after{transform: translateY(0%);}
        }
        .location-desc{color : #B9A790; font-weight: 700;}
        .location-img-inner{filter: grayscale(0);}
    }
}
.location-img{position : relative; width : 35.7rem}
.location-img-inner{overflow: hidden; filter: grayscale(1); transition :.5s;
    & > img{transform: scale(1.5); transition : 3s;}
}

.location-con{display: flex; align-items: end; position : relative;}
.location-desc{padding : 0 3.3rem 2.3rem; position :absolute; white-space: nowrap; font-weight: 500; line-height: 1.5em; font-size: 1.6rem; color : #B5B5B5; transform: translateY(-100%); opacity: 0; transition : 0s 1.4s;}

.location-con-tit{position :absolute; font-family: PT; font-size: 3.4rem; font-weight: 700; color : #B5B5B5; bottom : 0; overflow: hidden; white-space: nowrap; transform: translateY(100%); opacity: 0; transition : 0s 1.4s;
    & > span{transition : 0.5s; display: block;}
    &::after{position : absolute; content : attr(data-text);bottom : 0; transform: translateY(200%); left : 0; color : #B9A790; transition : 0.5s;}
}
.location-info{position :absolute; top : 100%; padding : 2.2rem; font-weight: 500; letter-spacing: -0.04em; color: #585858; font-size: 1.4rem; opacity: 0; transition : 0s 1.4s;}

.location-02{
    .location-list > li{transform: translateX(100%); opacity: 0;
        &::before{background: #A5A5A5;}
        &::after{display: none;}
        .location-con-tit{color : #484848;
            &::after{color : #0A2266}
        }
        .location-desc{color : #484848;}
        &:hover{
            .location-desc{color : #0A2266}
        }
    }
}

.main-location.active{
    .location-bg > div > img{transform: scale(1);}
    .location-list{opacity: 1; transition : 1s .4s;}
    .t1{
        .location-01{
            .location-img-inner > img{transform: scale(1);}
            .location-con-tit{transform: translateY(0); opacity: 1; transition : 1.2s 1.2s;}
            .location-desc{transform: translateY(0); opacity: 1; transition : transform 1.2s 1.2s, opacity 1.2s 1.2s;}
        }
    }

    .t2{
        .location-bg-02{opacity: 1;}
        .location-02{
            .location-img-inner > img{transform: scale(1);}
            .location-con-tit{transform: translateY(0); opacity: 1; transition : 1.2s 1.2s;}
            .location-desc{transform: translateY(0); opacity: 1; transition : transform 1.2s 1.2s, opacity 1.2s 1.2s;}
            .location-info{opacity: 1; transition : 1s 1.4s}
        }
    }
}
.t2{
    .location-01{pointer-events: none !important;
        .location-list > li{transform: translateX(-100%); opacity: 0;}
    }
    .location-02{pointer-events: all !important;
        .location-list > li{transform: translateX(0%); opacity: 1;}
    }
}

/* CONTACT */
.contact-bg{position :absolute; left : 0;top : 0; width : 100%; height : 100%; background: #F0EFEE;
    img{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.5); transition : 0s 1.4s;}
}

.contact-inner{display: flex; justify-content: center; position : relative; align-items: end; gap : 11.2rem; padding-top: 6rem;}
.contact-left{transform: translateX(-16rem); transition : 0s 1.4s; opacity: 0;}
.contact-right{transform: translateX(16rem); transition : 0s 1.4s; opacity: 0;}
.contact-tit{font-family: gotham; font-weight: 700; color : #fff; font-size: 7.8rem; margin-bottom: 2rem;
    .char{opacity: 0; transform: translateY(-5rem); transition : 0s 1.4s;}
}
.contact-desc{font-size: 2.4rem; font-weight: 700; letter-spacing: -0.033rem; color : #ACACAC; margin-bottom: 5rem;}
.contact-unit{font-size: 1.6rem; font-family: PT; font-weight: 500; color : #fff; margin-bottom: 8rem;}


.contact-address-list{width : 62.3rem; font-family: PT;}
.contact-address-list > li{display: flex;justify-content: space-between; align-items: end; padding-bottom: 2.6rem; position : relative;
    &::after{position :absolute; content : ''; left : 0; bottom : 0; width : 100%; height : 1px; background: rgba(255,255,255,0.22); clip-path: inset(0 100% 0 0); transition : 0s 1.4s;}
    & + li{margin-top: 3.7rem;}
}
.contact-address{display: flex;flex-direction: column; color : #fff; font-size: 1.6rem; letter-spacing: -0.04em; padding-bottom: 0.6rem;
    b{font-size: 2.5rem; font-weight: 500; color : #84694E; margin-bottom: 1rem;}
}
.contact-btn-box{display: flex; gap : 2.1rem;
    a{display: flex; align-items: center; color : #C9C9C9; gap : 1.1rem;}
}

.main-contact.fp-active{
    .contact-inner > div{transform: translateX(0); opacity: 1; transition : 1.4s .4s;}
    .contact-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + .4s); transform: translateX(0);}
    .contact-address-list > li::after{clip-path: inset(0); transition : 2s .4s;}
}


@media(min-width : 2000px){
    html{font-size: 75%;}
}
@media(max-width : 1600px){
    html{font-size: 50%;}
}

@media(max-width : 1200px){
    html{font-size: 62.5%;}
    html, body{overflow: visible;}
    /* .loading{display: none !important;} */
    .open-rotate-btn{width : 10rem; height : 10rem;right : 2.4rem; bottom : 2.4rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.04em; color : #fff; text-align: center;
        &::after{position : absolute; content : ''; width : 100%; height : 100%; background: url(/assets/images/main/open-rotate-text.png)no-repeat center / contain; animation : rotate-text 8s infinite linear}
        span{font-size: 2.8rem;}
    }

	.scroll{gap:5px; bottom:48px;left:16px;}
	.scroll-progress{height:48px;margin-bottom:5px;}
	.scroll-circle{width:6px;height:6px;}
	.scroll-arrow{width: 5px;height:5px;}
	.scroll>span{font-size:12px;line-height:1em;;}

    /* INTRO */

    .skip-btn{width : 6rem; height : 6rem; top : auto !important; left : auto !important; transform: scale(0); font-size: 1.6rem; transition : transform .5s; right : 2.4rem; bottom : 2.4rem}
    .skip-btn.on{transform: scale(1);}

    #intro{background: #0A2266; width : 100%; height : 100%;}

    .intro-01{display: flex;align-items: center;justify-content: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%;
        .intro-tit-box{display: flex;flex-direction: column; align-items: center; gap : 1.5rem; transform: translateX(0);}
        .intro-desc{font-size: 1.4rem; font-family: KPB; color : #fff; letter-spacing: 0.5em;
            .char{opacity: 0; filter: blur(10px);}
        }
        .intro-tit-line{width : 1px; height : 4.8rem; background: rgba(255,255,255,0.3); clip-path: inset(0 0 100%);}
    }
    svg{width : 26rem; height : 8rem}
    svg path{stroke: #fff; stroke-width: 2rem; stroke-dasharray : var(--length); stroke-dashoffset: var(--length); fill: transparent; transition : stroke-dashoffset 4s, opacity 4s; opacity: 0;}

    .intro-02{display: flex;align-items: center;justify-content: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%; z-index: 1; z-index: 1; opacity: 1 !important;
        .intro-02-bg{display: grid; grid-template-columns: repeat(4, 1fr); position : absolute; left : 0; top : 0; width : 100%; height : 100%;
            b{aspect-ratio: 1/1; background: #fff; transform: rotate(-45deg) scale(0);}
        }
        .intro-tit-box-02{display: flex; justify-content: center; align-items: center; position :relative; perspective: 100px;
            img{position : absolute; max-width: none; height : 4rem; opacity: 0; filter: blur(10px);
                &:nth-child(1){transform: translateX(calc(-50% - 11rem)) rotateY(35deg) translateZ(30rem);}
                &:nth-child(2){transform: translateX(calc(-50% - 5rem)) rotateY(45deg) translateZ(10rem);;}
                &:nth-child(3){transform: translateX(calc(50% + 5rem)) rotateY(-45deg) translateZ(10rem);}
                &:nth-child(4){transform: translateX(calc(50% + 11rem)) rotateY(-35deg) translateZ(30rem);}
            }
        }
    }

    .visual-container{align-items: start;padding-top: 12rem; clip-path: inset(calc(50% - 6.5rem) calc(50% - 2rem)); clip-path : inset(50% calc(50% - 2rem));}
    .visual-bg{
        .visual-bg-clip-box{display: flex;justify-content: center; width : 6rem; height : 13rem; position : absolute;}
        .visual-bg-clip{position : absolute; background: #fff;
            &.visual-bg-clip-01{width : 1rem; height : 100%; clip-path: inset(50% 0);}
            &.visual-bg-clip-02{width : 4rem; height : 4rem; transform: rotate(45deg) translateX(-35%) translateY(-35%) scale(0); z-index: 1;top : 0;}
            &.visual-bg-clip-03{width : 4rem; height : 4rem; transform: rotate(45deg) translateX(35%) translateY(35%) scale(0); z-index: 1;bottom : 0;}
        }
    }

    .visual-tit-box{flex-direction: column; gap : 0.9rem; position : relative; z-index: 1; transform: translateX(0%); padding-bottom: 0;}
    .visual-desc{font-size: 1.5rem;}
    .visual-tit-line{width : 1px; height : 2.4rem; clip-path: inset(0 0 100%);}
    .visual-tit{margin-left: 0;
        svg path{stroke:#0A2266 ; stroke-width: 2rem; stroke-dasharray : var(--length); stroke-dashoffset: var(--length); fill: transparent; transition : stroke-dashoffset 4s, opacity 4s; opacity: 0;}
    }

    #intro.t1{
        .intro-desc .char{opacity: 1; filter: blur(0px); transition : 1s calc(var(--i) * 0.1s)}
    }

    #intro.t2{
        .intro-tit-box{transform: translateX(0); transition : 3s}
        .intro-desc{letter-spacing: 0em; transition :2s;
            .char{transition : 0s !important;}
        }
        .intro-tit-line{clip-path: inset(0); transition :3s;}
        .intro-tit path{stroke-dashoffset : 0; opacity: 1;}
    }
    #intro.t3{
        .intro-02-bg > b{transform: rotate(0deg) scale(1.05); transition : 2s}
    }
    #intro.t4{
        .intro-tit-box-02 > img{transition : 2s; opacity: 1; filter: blur(0);
            &:nth-child(1){transform: translateX(calc(-50% - 11rem))}
            &:nth-child(2){transform: translateX(calc(-50% - 5rem))}
            &:nth-child(3){transform: translateX(calc(50% + 5rem))}
            &:nth-child(4){transform: translateX(calc(50% + 11rem))}
        }
        & + .visual-container{clip-path: inset(calc(50% - 6.5rem) calc(50% - 2rem)); transition : 1.4s;
            .visual-bg-clip{
                &.visual-bg-clip-01{clip-path: inset(0); transition : 1s;}
                &.visual-bg-clip-02{transform: rotate(45deg) translateX(-35%) translateY(-35%) scale(1); transition : 1.4s .6s;}
                &.visual-bg-clip-03{transform: rotate(45deg) translateX(35%) translateY(35%); transition : 1.4s .6s;}
            }
        }
    }
    #intro.t5{
        & + .visual-container{clip-path: inset(0); transition : 2s;
            .visual-bg-clip-box{width : 100%; height : 100%; transition :2s;
                .visual-bg-clip{
                    &.visual-bg-clip-01{clip-path: inset(0 50%);}
                    &.visual-bg-clip-02{transform: rotate(45deg) translateX(-35%) translateY(-35%) scale(0); transition-delay: 0s;}
                    &.visual-bg-clip-03{transform: rotate(45deg) translateX(35%) translateY(35%) scale(0); transition-delay: 0s;}
                }
            }
            .visual-desc .char{opacity: 1; filter: blur(0px); transition : 1s calc(var(--i) * 0.1s + 1s)}
            .visual-tit-line{clip-path: inset(0); transition :3s 1s;}
            .visual-tit svg path{stroke-dashoffset : 0; opacity: 1; transition-delay: 1s;}
        }
        & ~ .info-desc{transform: translateY(0); opacity: 1; transition-delay: 2s;}
    }

    .info-desc{gap : 0.5rem; font-size: 1rem; left : 1rem; bottom : 1rem;
        &::before{width : 2rem; height : 2rem;}
    }

    /* PREMIUM */
    .main-premium{margin-top: 3.6rem;}
    .premium-container{flex-direction: column; position :relative;
        & > div{position : relative; width : 100%; height : 100%; padding : 0;}
    }
    .premium-inner{position : relative; height : 100%; display: flex;flex-direction: column;align-items: start; padding : 0 2.4rem;}
    .premium-tit-box{display: flex; flex-direction: column; align-items: start; gap : 1rem; transform: translateX(-16rem); transition : 1.2s;}

    .premium-desc{font-size: 1.6rem;
        .char{opacity: 0; transition :1.2s;}
    }
    .premium-tit-line{width : 1px !important; height : 2.4rem !important; clip-path: inset(0 0 100%); transition : 1.2s;}
    .premium-tit{font-size: 2rem; font-weight: 500;
        span{font-size: 2.4rem;}
        small{font-size: 1.2rem; left : 6rem}
        .char{opacity: 0; transform: translateY(-5rem); transition :1.2s;}
    }
    .premium-sub-tit{font-size: 2.4rem; font-weight: 300; font-family: gotham;
        b{font-weight: 700;}
        .char{opacity: 0; transition :1.2s;}
    }
    .premium-con{padding-top: 2.4rem;transform: translateX(-16rem); opacity: 0; transition :1.2s; font-size: 1.4rem;
        .br{display: block !important; height : 1.2em}
        .line{transform: translateY(3rem); transition : 1.2s;}
    }

    .premium-img-box{position : relative; transition : 1.2s; opacity: 0;z-index: 1;}
    .premium-img{position :relative;}
    .premium-img-inner{overflow: hidden;
        img{transform: scale(1.5); transition : 1.2s}
    }
    .img-cut{position :absolute; right : .5rem; bottom : .5rem; color : #fff; font-size: 1rem;
        &.left{right : auto; left : 1.5rem}
    }

    .premium-container > .premium-01{padding-top: 6rem; padding-bottom: 16rem;
        .premium-tit-line{width : 35.7rem; background: rgba(0,0,0,0.27);}
        .premium-tit-box{margin-bottom: 3.6rem;}
        .premium-con{margin-left: 0}
		.img-cut{right : 1.6rem; bottom : 1.6rem}
    }
    .premium-container > .premium-03{padding: 0;
        .premium-inner{height : 100%; padding-bottom: 24rem; padding-top: 8rem;}
        .premium-tit-box{margin-bottom: 3.6rem; text-align: right;}
        .premium-tit{margin-top: 0rem;
            span{margin-bottom: 1rem;}
        }
        .premium-con{margin-left: 0}
        .premium-text{font-size: 1rem; left : 50%; transform: translateX(-50%); bottom : auto; top : 2.4rem; white-space: nowrap;
            .char{opacity: 0; transition :1.2s;}
        }
        .img-cut{right : 1.6rem; bottom : 1.6rem}
    }

    .premium-02 > div{padding : 0; position : relative;}
    .info{font-size: 0.65rem; font-weight: 500; line-height: 1.8em; position : absolute; left : 1rem; bottom : 1rem; color : rgba(255,255,255,0.57);
        .line{transform: translateY(5rem); opacity: 0; transition : 1.2s;}
    }

    .premium-01 .premium-inner::after{display: none;}
    .premium-02-01 .premium-inner::after,
    .premium-02-02 .premium-inner::after{display: none;}
    .premium-02-01 .premium-inner::before,
    .premium-02-02 .premium-inner::before{display: none;}
    .premium-03 .premium-inner::after{display: none;}
    .premium-03 .premium-inner::before{display: none;}

    .premium-02-01{
        .premium-inner{padding : 4.8rem 2.4rem 12rem;}
        .premium-tit-box{margin-bottom: 3.6rem;
            span{display: block; margin-bottom: 2.2rem;}
			small{top : 2.8rem}
        }
        .premium-img-box-01{right : 0; top : 0; transform: translateX(16rem) translateY(-16rem); width : 35.6rem; width : 24rem; margin-bottom: 3.6rem;}
        .premium-img-box-02{right : 0; bottom : 0; transform: translateX(-16rem) translateY(16rem); width: 100%;
            .premium-img{width : 24rem; margin-left: auto;}
        }
        .premium-con{margin-bottom: 3.2rem;}
    }

    .premium-02-02{opacity: 1;
        .premium-inner{padding : 4.8rem 2.4rem 12rem;}
        .premium-tit-box{margin-bottom: 3.6rem;}
        .premium-img-box-01{justify-content: center; right : 0; top : 0; transform: translateX(16rem) translateY(-16rem); width : 100%; margin-bottom: 1rem; margin-left: 0; margin-top: 0; gap : 1rem;
            .premium-img{transition : 1.2s;
                &.premium-img-01{transform: translateX(-16rem) translateY(-16rem); width : 31.2rem;}
                &.premium-img-02{transform: translateX(16rem) translateY(-16rem); width : 19rem}
            }
        }
        .premium-img-box-02{flex-direction: column;align-items: start; gap : 3rem; position :relative; margin-left: 0; right : 0; transform: translateY(16rem); width : 100%;
            .premium-con{order : 2;}
            .premium-img{width : 24rem; order : 1; margin : 0 auto;}
        }
    }


    
    .premium-01.active{
        .premium-inner::after{clip-path: inset(0); transition : 3s 1s;}
        .premium-tit-box{transform: translateX(0); transition : 2s .4s;}
        .premium-desc .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 0.4s)}
        .premium-tit-line{clip-path: inset(0); transition : 1.2s .8s;}
        .premium-tit .char{opacity: 1; transform: translateY(0); transition : 1.2s calc(var(--i) * 0.05s + 1.2s)}
        .premium-bg > img{transform: scale(1); transition : 3s;}
        .premium-con{transform: translateX(0); opacity: 1; transition : 1.4s .4s;
            .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + 0.4s)}
        }
    }
    .premium-02-01.active{
        .premium-inner{
            &::after, &::before{clip-path: inset(0); transition : 3s 1s;}
        }
        .premium-bg > img{transform: scale(1); transition : 3s;}
        .premium-tit-box{transform: translateX(0); transition : 2s .4s;}
        .premium-sub-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 0.4s)}
        .premium-tit-line{clip-path: inset(0); transition : 1.2s .8s;}
        .premium-tit .char{opacity: 1; transform: translateY(0); transition : 1.2s calc(var(--i) * 0.05s + 1.2s)}
        .premium-img-box{opacity: 1; transform: translateX(0); transition : 1.4s .8s;}
        .premium-img-inner > img{transform: scale(1); transition : 3s .8s;}
        .premium-con{transform: translateX(0); opacity: 1; transition : 1.4s .4s;
            .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
        }
        .info .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
    }
    .premium-02-02.active{
        .premium-inner{
            &::after, &::before{clip-path: inset(0); transition : 3s 1s;}
        }
        .premium-bg > img{transform: scale(1); transition : 3s;}
        .premium-tit-box{transform: translateX(0); transition : 2s .4s;}
        .premium-sub-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 0.4s)}
        .premium-tit-line{clip-path: inset(0); transition : 1.2s .8s;}
        .premium-tit .char{opacity: 1; transform: translateY(0); transition : 1.2s calc(var(--i) * 0.05s + 1.2s)}
        .premium-img-box{opacity: 1; transform: translateX(0); transition : 1.4s .8s;
            .premium-img{transform: translateX(0); opacity: 1; transition : 1.4s .8s;}
        }
        .premium-img-inner > img{transform: scale(1); transition : 3s .8s;}
        .premium-con{transform: translateX(0); opacity: 1; transition : 1.4s .4s;
            .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
        }
        .info .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
    }
    .premium-03.active{
        .premium-inner{
            &::before, &::after{clip-path: inset(0); transition : 3s 1s;}
        }
        .premium-tit-box{transform: translateX(0); transition : 2s .4s;}
        .premium-sub-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 0.4s)}
        .premium-tit-line{clip-path: inset(0); transition : 1.2s .8s;}
        .premium-tit .char{opacity: 1; transform: translateY(0); transition : 1.2s calc(var(--i) * 0.05s + 1.2s)}
        .premium-bg > img{transform: scale(1); transition : 3s;}
        .premium-con{transform: translateX(0); opacity: 1; transition : 1.4s .4s;
            .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + 0.4s)}
        }
        .premium-text .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + 1s)}
    }

    /* MAP */

    .main-map{background: #F0EFEE; margin-top: 3.6rem;
        .info{color :#000; letter-spacing: -0.06em;}
    }
    .map-bg{display: flex;justify-content: end; position :relative;width : 100%; height :auto; background: #F0EFEE;
        img{width : 140%; max-width: none; height : auto; object-fit: cover; object-position: right; transform: translateX(50%); transition : 1.2s; opacity: 0;}
    }
    .map-inner{position : relative; padding : 3.6rem 2.4rem 12rem}
    .map-tit-box{transform: translateX(-16rem); opacity: 0; transition : 1.2s;}
    .map-tit{font-size: 3.6rem; font-weight: 700; color :#0A2266; margin-bottom:1.6rem;
        .char{opacity: 0; transition : 1.2s; transform: translateY(-5rem);}
    }
    .map-desc{font-size: 1.6rem; margin-bottom: 3.6rem; color : #1D1D1D;}
    .map-sub-tit{font-family: KPB; font-size: 1.8rem; margin-bottom: 3.6rem;}
    .map-btn{font-size: 1.2rem; font-weight: 700; gap : 1.2rem; letter-spacing: 0.25em;z-index: 1; position : relative;
        &:hover{
            .arrow{
                &::after{transform: translateX(130%) scale(.5);}
                img{transform: translateX(30%);}
            }
        }
        .arrow{display: flex;align-items: center;position :relative;
            img{transition : .5s;}
            &::after{position : absolute; content : ''; width : 2.4rem; height: 2.4rem; background: #fff; border-radius: 50%; z-index: -1; right : 0; transform: translateX(30%); transition :.5s;}
        }
    }

    .main-map.active{
        .map-bg > img{transform: translateX(0); opacity: 1; transition : 2s .4s;}
        .map-tit-box{transform: translateX(0); opacity: 1; transition : 2s .4s;}
        .map-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + .4s); transform: translateX(0);}
        .info .line{transform: translateY(0); opacity: 1; transition : 1.2s calc(var(--i) * 0.1s + .8s)}
    }

    /* LOCATION */
    .location-container{position : relative;
        & > div{display: flex;align-items: center;justify-content: center; width : 100%; height : 100%; position : relative;padding : 3.6rem 2.4rem;
            &.location-02{pointer-events: all;}
        }
    }
    .location-bg{display: none !important;}
    .location-list{position :relative; width : 100%; opacity: 1; transition : 1.2s;}
    .location-list > li{flex-direction: column;align-items: start; position :relative; padding-top: 3.3rem; transition : 1.2s calc(var(--i) * 0.1s) cubic-bezier(0.4, 0, 0.3, 1); transform: translateX(100%); opacity: 0;
        &::before{position :absolute; content : ''; width : 100%; height : 1px; left : 0; bottom : 0; background: #383838;}
        &::after{position :absolute; content : ''; width : 100%; height : 1px; left : 0; bottom : 0; background: #B9A790; clip-path: inset(0 50%); transition : 1s;}
        .location-con{transform: translateX(0) !important;}
        &:nth-child(1){
            .location-desc{right : 100%; text-align: right;}
            .location-con-tit{left : 16rem;}
        }
        &:nth-child(2){
            .location-desc{right : 100%; text-align: right;}
            .location-con-tit{left : 0;}
        }
        &:nth-child(3){
            .location-desc{left : 100%;}
            .location-con-tit{right : 0;}
        }
        &:nth-child(4){
            .location-desc{left : 100%;}
            .location-desc{color : #B9A790; font-weight: 700;}
            .location-con-tit{right : 16rem;}
        }

        &:hover{
            &::after{clip-path: inset(0);}
            .location-desc{color : #B5B5B5; font-weight: 400;}
            .location-con-tit{
                & > span{transform: translateY(0%);}
            }
        }
    }
    .location-img{position : relative; width : 22rem}
    .location-img-inner{overflow: hidden; filter: grayscale(0); transition :.5s;
        & > img{transform: scale(1.5); transition : 3s;}
    }

    .location-con{display: flex;flex-direction: column;  align-items: start; position : relative;}
    .location-desc{padding : 0; position :relative; font-size: 1.2rem; color : #B5B5B5; transform: translateY(-100%); opacity: 0; transition : 1.2s; left : auto !important; right : auto !important; text-align: left !important; margin-bottom: 1.2rem; letter-spacing: -0.04em;}

    .location-con-tit{position :relative; font-size: 2.4rem; bottom : auto !important; transform: translateY(100%); opacity: 0; transition : 1.2s; left : auto !important; right : auto !important; color : #B9A790; margin-bottom: 1.2rem;
        & > span{transition : 0.5s; display: block;}
        &::after{display: none}
    }
    .location-info{position :absolute; top : 100%; padding : 1rem 0 0;  font-size: 1rem; opacity: 0; transition : 1.2s; letter-spacing: -0.08em;}

    .location-01{background: url(/assets/images/main/location-bg-01.jpg)no-repeat center / cover;}
    .location-02{background: url(/assets/images/main/location-bg-02.jpg)no-repeat center / cover; pointer-events: all;
        .location-list > li{
            &::before{background: #A5A5A5;}
            &::after{display: none;}
            .location-con-tit{color : #0A2266;}
            .location-desc{color : #585858}
            &:hover{
                .location-desc{color : #585858;}
            }
        }
    }

    .location-01.active{
        .location-img-inner > img{transform: scale(1);}
        .location-con-tit{transform: translateY(0); opacity: 1; transition : 1.2s 1.2s;}
        .location-desc{transform: translateY(0); opacity: 1; transition : transform 1.2s 1.2s, opacity 1.2s 1.2s;}
        .location-list > li{transform: translateX(0%); opacity: 1;}
    }
    .location-02.active{
        .location-img-inner > img{transform: scale(1);}
        .location-con-tit{transform: translateY(0); opacity: 1; transition : 1.2s 1.2s;}
        .location-desc{transform: translateY(0); opacity: 1; transition : transform 1.2s 1.2s, opacity 1.2s 1.2s;}
        .location-info{opacity: 1; transition : 1s 1.4s}
        .location-list > li{transform: translateX(0%); opacity: 1;}
    }

    .main-location.active{
        .location-bg > div > img{transform: scale(1);}
        .location-list{opacity: 1; transition : 1s .4s;}
    }

    /* CONTACT */
    .main-contact{margin-top: 3.6rem;}
    .contact-bg{position :absolute; left : 0;top : 0; width : 100%; height : 100%; background: #F0EFEE;
        img{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.5); transition : 1.2s;}
    }

    .contact-inner{display: flex; flex-direction: column; justify-content: center; position : relative; align-items: end; gap : 4.8rem; padding : 4.8rem 2.4rem;}
    .contact-left{transform: translateX(-16rem); transition : 1.2s; opacity: 0;}
    .contact-right{transform: translateX(16rem); transition : 1.2s; opacity: 0;}
    .contact-tit{font-family: gotham; font-weight: 700; color : #fff; font-size: 4rem; margin-bottom: 2rem;
        .char{opacity: 0; transform: translateY(-5rem); transition : 1.2s;}
    }
    .contact-desc{font-size: 1.8rem; font-weight: 700; letter-spacing: -0.033rem; color : #ACACAC; margin-bottom: 3.6rem;}
    .contact-unit{font-size: 1.6rem; font-family: PT; font-weight: 500; color : #fff; margin-bottom: 3.6rem;}


    .contact-address-list{width : 100%; font-family: PT; margin-top: 3.6rem;}
    .contact-address-list > li{display: flex;flex-direction: column; justify-content: center; align-items: start; padding-bottom: 2.6rem; position : relative; gap : 1.6rem;
        &::after{position :absolute; content : ''; left : 0; bottom : 0; width : 100%; height : 1px; background: rgba(255,255,255,0.22); clip-path: inset(0 100% 0 0); transition : 1.2s;}
        & + li{margin-top: 3.7rem;}
    }
    .contact-address{display: flex;flex-direction: column; color : #fff; font-size: 1.6rem; letter-spacing: -0.04em; padding-bottom: 0.6rem;
        b{font-size: 2.5rem; font-weight: 500; color : #84694E; margin-bottom: 1rem;}
    }
    .contact-btn-box{display: flex; gap : 2.1rem;
        a{display: flex; align-items: center; color : #C9C9C9; gap : 1.1rem;}
    }

    .main-contact.active{
        .contact-inner > div{transform: translateX(0); opacity: 1; transition : 1.4s .4s;}
        .contact-tit .char{opacity: 1; transition : 1.2s calc(var(--i) * 0.05s + .4s); transform: translateX(0);}
        .contact-address-list > li::after{clip-path: inset(0); transition : 2s .4s;}
    }



}