.main-section-visual{}
.section-bg{width : 100%; height : 100%; overflow: hidden;z-index: -1;position : absolute; left : 0;top : 0;}
.section-bg > img{width : 100%;height : 100%; object-fit: cover; object-position: center;}

.quick-menu{position : fixed;right : 0; top : 50%; transform: translateY(-50%);z-index: 10;}

.quick-menu > li{width : 50px; height : 250px; background: #8b634b; position : relative;}
.quick-menu > li:nth-child(1){background: #0d2144;}
.quick-menu > li > a{display: flex; flex-direction: column;align-items: center; justify-content: center; width : 100%;height : 100%; padding-top: 50px;}
.quick-menu > li:nth-child(2) > a{ padding-top: 30px;}
.quick-menu > li > a > p{transform: rotate(-90deg); white-space: nowrap; font-family: PT; color : #fff;}

.quick-icon{position : absolute; top : 60px;}

.popup-btn-icon{display: flex;align-items: center;justify-content: center; width : 15px; height : 15px; background: #fff; border-radius: 50%; top : 80px;}
.popup-btn-icon::after{position : absolute; content: ''; width : 10px; height : 1px; background: #8b634b;}
.popup-btn-icon::before{position : absolute; content: ''; width : 1px; height : 10px; background: #8b634b;}


.scroll-box{display: flex;flex-direction: column;align-items: center;position : fixed; left : 60px; top : 50%; transform: translateY(-50%);z-index: 10;gap : 10px; pointer-events: none; transition : opacity .5s;}
.scroll-box.hide{opacity: 0;}
.scroll-box > p{font-family: Noto Sans KR; color : #fff; writing-mode: vertical-lr; letter-spacing: 0.025em; font-size: 12px; line-height: 1em; transition : color .5s;}
.scroll-box.dark > p{color : #000}

.scroll-box > .mouse{display: flex;justify-content: center; width : 12px; height : 26px; border-radius: 100px; border : 1px solid #fff;position : relative; transition : border-color .5s;}
.scroll-box.dark > .mouse{border-color : #000}
.scroll-box > .mouse::after{position : absolute; content : ''; width : 6px;height : 6px; border-radius: 50%; background: #fff;top : 2px; animation : scroll 1s both infinite alternate; transition : background .5s;}
.scroll-box.dark > .mouse::after{background: #000;}

@keyframes scroll {
    0%{top : 2px;}
    100%{top : calc(100% - 2px); transform: translateY(-100%);}
}

/***************************
********* VISUAL ***********
***************************/

.visual-bg > img{animation : zoom-out 5s both;}
@keyframes zoom-out {
    0%{transform: scale(1.25);}
}

.visual-inner{display: flex;flex-direction: column; align-items: start; width : 100%; max-width: 1200px;margin : -170px auto 0; position : relative;}

.visual-inner::after{position : absolute; content: ''; width : 300px;;height : 100%; background: #000;left : -100px; top : 0; border-radius: 50%; transform: scale(1.5); filter: blur(50px);-webkit-filter: blur(50px); opacity: 0; animation : visualDim 2s 1s both;}
@keyframes visualDim {
    0%{opacity : 0;}
    100%{opacity: 0.23;}
}

.visual-sub-tit{font-size: 26px; font-weight: 500; color : #fff; letter-spacing: -0.023em; margin-bottom: 32px; position : relative;z-index: 1;}
.visual-sub-tit .char{opacity: 0; transform: translateX(50px);}

.visual-tit{position : relative;z-index: 1; animation : visualTit 1.5s both 1.5s}

@keyframes visualTit {
    0%{clip-path: inset(50% 66.6666% 50% 0);}
    50%{clip-path: inset(0% 66.6666% 0% 0);}
    100%{clip-path: inset(0);}
}


.visual-subway{position : absolute; z-index: 1; bottom: 0; animation : visualSubway 1.5s both 2.5s;}
.visual-subway-01{left : 560px;}
.visual-subway-02{right : 160px;}

@keyframes visualSubway {
    0%{clip-path: inset(50% 0% 100% 0);}
    50%{clip-path: inset(0% 0% 0% 0);}
    100%{clip-path: inset(0);}
}

/***************************
********* ENVI ***********
***************************/

.envi-bg{display: flex;justify-content: end; background: #d4e6f1;}
.envi-bg > img{object-position: top right; transform: translateX(20%); opacity: 0; transition : transform 1s .4s, opacity 1s .4s;}
.active .envi-bg > img{transform: translateX(0);opacity: 1; transition : transform 1s 1s, opacity 1s 1s}

.main-section-envi .fp-tableCell{padding : 0 110px;}

.envi-inner{display: flex;flex-direction: column;justify-content: end; width : 100%; max-width: 1700px; height: 100%; padding-bottom: 50px;}

.envi-tit{font-family: futura-pt; font-weight: 700;position : relative; font-size: 60px; line-height: 1em; margin-bottom: 28px;}
.envi-tit > span{font-family: AV;position : absolute; font-size: 50px; font-weight: 400; color : #002a4e; left : 0;top : 0; opacity: 0; transform: translateY(-80%) translateX(-50%) rotate(-5deg); transition : opacity 1s, transform 1s;}
.active .envi-tit > span{opacity: 1; transform: translateY(-80%) translateX(-20%) rotate(-5deg); transition : opacity 1s 1s, transform 1s 1s;}

.envi-tit .char{transform: translateY(100%); transition : transform 1s;}

.envi-sub-tit{font-family: HW; font-size: 32px; letter-spacing: -0.05em;font-weight: 400; margin-bottom: 12px;}
.envi-sub-tit b{font-size: 40px; font-weight: 400;}

.envi-sub-tit .char{transform: translateY(120%); transition : transform 1s;}

.envi-desc{font-family: PT; color : #002a4e; font-size: 24px; letter-spacing: -0.05em; margin-bottom: 49px;}

.envi-desc .char{transform: translateY(100%); transition : transform 1s;}

.envi-tit .line,
.envi-sub-tit .line,
.envi-desc .line{overflow: hidden;}

.active .envi-tit .char,
.active .envi-sub-tit .char,
.active .envi-desc .char{transform: translateY(0);}

.active .envi-tit .char{transition-delay: .4s;}
.active .envi-sub-tit .char{transition-delay: .6s;}
.active .envi-desc .char{transition-delay: .8s;}

.envi-map{transform: translateY(100px);opacity: 0;transition : transform 1s, opacity 1s;}
.active .envi-map{transform: translateX(0);opacity: 1; transition-delay: 1s;}


.envi-subway {
	position : absolute;
	top: 270px;
	left: 630px;
	display: flex;
	gap: 10px;
	transform: translateY(100px); opacity: 0;transition : transform 1s, opacity 1s;
}
.envi-subway img {
	width: 38px;
}

.active .envi-subway{transform: translateX(0);opacity: 1; transition-delay: 1.5s;}

/***************************
********* BRAND ***********
***************************/

.brand-bg > img{transform: scale(1.25);transition : transform 2s .4s;}
.active .brand-bg > img{transform: scale(1); transition : transform 4s;}

.brand-inner{display: flex;flex-direction: column; align-items: center;text-align: center; height: 100%;padding-top: 180px;}

.brand-desc{position : absolute; font-family: HW; font-weight: 400;font-size: 18px; color : #454545; line-height: 1.5em;margin-bottom: 45px; letter-spacing: -0.05em;}
.brand-desc .char{transform: translateY(100%); transition : transform 1s}
.brand-desc .line{overflow: hidden;}

.active .brand-desc .line:nth-child(1) .char{transform: translateY(0); transition-delay: .4s;}
.active .brand-desc .line:nth-child(2) .char{transform: translateY(0); transition-delay: .5s;}
.active .brand-desc .line:nth-child(3) .char{transform: translateY(0); transition-delay: .6s;}
.active .brand-desc .line:nth-child(4) .char{transform: translateY(0); transition-delay: .7s;}
.active .brand-desc .line:nth-child(5) .char{transform: translateY(0); transition-delay: .8s;}


.active .brand-desc.s01 .char{opacity: 0; animation : brandtxt01 3s}

@keyframes brandtxt01 {
    0%{opacity: 1;}
    90%{opacity: 1;}
    100%{opacity: 0;}
}

.brand-desc.s02 .char{transform: translateY(200%); transition : transform 1s}
.active .brand-desc.s02 .line:nth-child(1) .char{transform: translateY(0); transition-delay: 3.4s;}
.active .brand-desc.s02 .line:nth-child(2) .char{transform: translateY(0); transition-delay: 3.5s;}
.active .brand-desc.s02 .line:nth-child(3) .char{transform: translateY(0); transition-delay: 3.6s;}
.active .brand-desc.s02 .line:nth-child(4) .char{transform: translateY(0); transition-delay: 3.7s;}
.active .brand-desc.s02 .line:nth-child(5) .char{transform: translateY(0); transition-delay: 3.8s;}

.active .brand-desc.s02 .char{opacity: 1; animation : brandtxt02 4s}

@keyframes brandtxt02 {
    0%{opacity: 1;}
    90%{opacity: 1;}
    100%{opacity: 1;}
}

.brand-desc .brand-text01 {
	font-size: 26px;
	line-height: 50px;
}
.brand-desc .brand-text02 {
	line-height: 50px;
}
.brand-desc.s02 {
	font-size: 36px;
	color: #002a4e;
}
.brand-desc.s02 .brand-text01 {
	font-size: 36px;
	line-height: 46px;
}
.brand-desc.s02 .line{overflow: hidden;}

.brand-tit{font-size: 40px; color : #002852; padding-left: 1em; letter-spacing: 1em; margin-bottom: 40px; font-family: HW; font-weight: 400; opacity: 0;  white-space: nowrap; transition : opacity 1s .4s, letter-spacing 1s .4s, padding-left 1s .4s;}
.active .brand-tit{padding-left: 0.1em; opacity: 1; letter-spacing: 0.1em; transition : opacity 1s 1s, letter-spacing 2s 1s, padding-left 2s 1s;}

.brand-line{width : 30px;height : 11px; padding-top: 38px; margin-bottom: 38px; background: #002852; clip-path: inset(0 50%); transition : clip-path 1s}
.active .brand-line{clip-path: inset(0); transition-delay: 4.5s;}

.brand-logo{transform: translateY(100px);opacity: 0;transition : 2s;}
.active .brand-logo{transform: translateY(0); opacity: 1; transition-delay: 4s;}

.brand-logo{margin-top: 80px;}
/***************************
********* LOCATION *********
***************************/

.location-bg > img{object-position: center bottom; transition : object-position 3s}
.active .location-bg > img{object-position: center top;}

.location-tit{font-family: futura-pt; font-weight: 700;position : relative; font-size: 60px; line-height: 1em; margin-bottom: 28px; color : #fff;}
.location-tit > span{font-family: AV;position : absolute; font-size: 50px; font-weight: 400; color : #002a4e; left : 0;top : 0; opacity: 0; transform: translateY(-80%) translateX(-50%) rotate(-5deg); transition : opacity 1s, transform 1s; color : #fff;}

.fp-active .location-tit > span{opacity: 1; transform: translateY(-80%) translateX(-20%) rotate(-5deg); transition : opacity 1s 1s, transform 1s 1s;}

.location-tit .char{transform: translateY(100%); transition : transform 1s;}
.location-tit .line{overflow: hidden;}
.fp-active .location-tit .char{transform: translateY(0); transition-delay: .4s;}

.location-inner{ display: flex;flex-direction: column;align-items: center;width : 100%; max-width: 1200px; margin : 0 auto; padding-top: 50px;}

.location-map-container{display: flex; justify-content: space-between; width : 100%;}

.location-map{margin-bottom: 60px;}

.location-map-box{transition : opacity 1s, transform 1s;}
.location-map-box:nth-child(1){transform: translateX(-100px);opacity: 0;}
.location-map-box:nth-child(2){transform: translateX(100px);opacity: 0;}
.fp-active .location-map-box{transform: translateX(0); opacity: 1; transition-delay: .4s;}

.location-map-footer{display: flex; justify-content: space-between; color : #fff;}

.location-address-box{display: flex;flex-direction: column;align-items: start; padding-left: 15px;position : relative;}
.location-address-box::after{position :absolute; content: ''; width : 1px; height : 100%; left : 0; top : 0; background: #fff; clip-path: inset(0 0 100%); transition : clip-path 1s}
.fp-active .location-address-box::after{clip-path: inset(0); transition-delay: .4s;}

.location-address-name{font-size: 20px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.033em; transform: translateX(50px); opacity: 0; transition : transform 1s, opacity 1s;}
.fp-active .location-address-name{transform: translateX(0); opacity: 1; transition-delay: 1s;}

.location-address{font-size: 15px; letter-spacing: -0.063em; margin-bottom: 13px;transform: translateX(50px); opacity: 0; transition : transform 1s, opacity 1s;}
.fp-active .location-address{transform: translateX(0); opacity: 1; transition-delay: 1.1s;}

.location-btn-box{display: flex; gap : 5px;transform: translateX(50px); opacity: 0; transition : transform 1s, opacity 1s;}
.fp-active .location-btn-box{transform: translateX(0); opacity: 1; transition-delay: 1.2s;}

/***************************
********* PREMIUM *********
***************************/

.premium-inner{display: flex;align-items: center; width : 100%; max-width: 1600px;margin : 0 auto;position :relative; padding-top: 50px;}

.premium-slide{width : 100%;}
.premium-slide .swiper-slide{display: flex; justify-content: end; align-items: center;opacity: 1 !important;}
.premium-slide .swiper-slide-active{opacity: 1 !important;}

.premium-con{display: flex;flex-direction: column; width : 490px; height : 420px; padding-left: 45px; padding-top: 110px; position :relative;}

.swiper-slide:first-child .premium-con::after{position : absolute; content: ''; width : 100%; height : 1px; top :0; left : 0; background: #4e4e4e; clip-path: inset(0 0 0 100%); transition : clip-path 1s;}
.swiper-slide:first-child .premium-con::before{position : absolute; content: ''; width : 100%; height : 1px; bottom :0; left : 0; background: #4e4e4e; clip-path: inset(0 0 0 100%); transition : clip-path 1s;}

.active .swiper-slide:first-child .premium-con::after,
.active .swiper-slide:first-child .premium-con::before{clip-path: inset(0); transition-delay: .4s;}

.premium-con-tit{font-family: futura-pt; font-weight: 700; font-size: 45px; letter-spacing: -0.06em; margin-bottom: 16px;}
.premium-con-tit .char{transform: translateY(100%); transition : transform .7s;}

.premium-con-sub-tit{font-size: 22px; font-family: PT; font-weight: 700;color : #002a4e; margin-bottom: 44px;}
.premium-con-sub-tit .char{transform: translateY(100%); transition : transform .7s;}

.premium-con-desc{font-size: 16px; font-family: PT; letter-spacing: -0.02em; font-weight: 500; color : #818181; line-height: 1.5em;}
.premium-con-desc .char{transform: translateY(100%); transition : transform .7s;}

.premium-con-tit .line,
.premium-con-sub-tit .line,
.premium-con-desc .line{overflow: hidden;}

.active .swiper-slide-active .premium-con-tit .char{transform: translateY(0); transition-delay: .7s;}
.active .swiper-slide-active .premium-con-sub-tit .char{transform: translateY(0); transition-delay: .9s;}
.active .swiper-slide-active .premium-con-desc .char{transform: translateY(0); transition-delay: 1.1s;}

.premium-img-box{display: flex;gap : 18px; position :relative;}

.premium-img{position : relative;z-index: 1; overflow: hidden; clip-path: inset(0 0 100% 0); transition : clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1)}
.active .swiper-slide-active .premium-img{clip-path: inset(0); transition-delay: 0.7s;}

.premium-img-small{transform: translateY(-30px);clip-path: inset(0 100% 0 0); transition : clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1)}
.active .swiper-slide-active .premium-img-small{clip-path: inset(0); transition-delay: 1s;}

.premium-text{position : absolute; font-family: AV;font-size: 80px; color : #002a4e; left : 414px; bottom : 50px;transform: translateX(-200px) rotate(-10deg); line-height: 1em; opacity: 0; transition : opacity 1s, transform 1s;}
.active .swiper-slide-active .premium-text{transform: translateX(0) rotate(-10deg);opacity: 1;transition : opacity 1s 1s, transform 1s 1s;}
.premium-text.white{color : #fff;}


.premium-icon{display: flex;justify-content: center; align-items: center; width : 105px;height : 105px; background: rgba(0,42,78,0.8);border-radius: 50%;position : absolute;top : 40px;z-index: 10; transform: translateX(-50%) scale(0); transition : transform 1s;}
.active .swiper-slide-active .premium-icon{transform: translateX(-50%) scale(1); transition-delay: 1s;}

.premium-btn-box{display: flex;flex-direction: column;align-items: start; gap : 43px; position : absolute; font-family: roboto;z-index: 1;}
.premium-btn-box > li{position :relative; cursor: pointer; transform: translateX(-100px);opacity: 0; transition : transform 1s, opacity 1s;}
.active .premium-btn-box > li{transform: translateX(0); opacity: 1; transition-delay: calc(var(--i) * 0.1s + 0.4s);}
.premium-btn-box > li::after{position : absolute; content: ''; width : 100%; height : 1px; bottom : 0; background: #000; left : 0; clip-path: inset(0 100% 0 0);transition : clip-path .5s;}
.premium-btn-box > li:hover::after,
.premium-btn-box > li.on::after{clip-path: inset(0);}
.premium-btn-box > li:hover,
.premium-btn-box > li.on{font-weight: 900;}

.premium-navigation{display: flex; position : absolute; gap : 6px;  right : 920px;z-index: 1;bottom : 140px; opacity: 0; transition : opacity 1s;}
.active .premium-navigation{opacity: 1; transition-delay: 1s;}
.premium-navigation > div{display: flex;align-items: center;justify-content: center; width : 53px; height : 53px; background: #fff; border : 1px solid #000; border-radius: 50%; cursor : pointer;}
.premium-navigation > div.swiper-button-disabled{opacity: 0.3; pointer-events: none;}
.premium-navigation > .premium-next{background: #000;}
.premium-next img{transform: rotate(180deg); filter: invert(1); -webkit-filter: invert(1);}