.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%);}
}

.forena{font-family : forena !important}
/***************************
********* 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; font-family : HG;}
.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 .hg{font-family : HG; font-weight : 700;}
.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; font-family : HG; font-weight :300;}

.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 : 35px;font-family : HG; font-weight : 300; letter-spacing : 0.7em;color: #002a4e; padding-top: 30px;}
.brand-desc.s02 .brand-text01 {font-size: 36px;line-height: 46px; opacity : 0; transition : opacity 2s, transform 2s;}
.active .brand-desc.s02 .brand-text01{transform: translateY(0);opacity: 1;transition-delay: 0.4s;}
.brand-desc.s02 .line{display : flex !important; flex-direction : Column; 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; margin-top: 16px;}
.active .brand-logo{transform: translateY(0); opacity: 1; transition-delay: 1s;}

.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; font-family : HG;}
.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: center; color : #fff;}

.location-address-box{display: flex;flex-direction: column;align-items: center; 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; font-family : HG}
.premium-con-tit span{font-family : HW;}
.premium-con-tit .char{transform: translateY(100%); transition : transform .7s;}
.premium-con-tit img{transform : translateY(100%); transition : transform .7s;}

.premium-con-sub-tit{font-size: 22px; font-family: PT; font-weight: 700;color : #002a4e; margin-bottom: 44px; font-family : HG; font-weight : 700}
.premium-con-sub-tit span{font-family : HW; font-weight : 400;}
.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; font-family : HG; font-weigth : 700}
.premium-con-desc span{font-family : HW; font-weight : 400;}
.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,
.active .swiper-slide-active .premium-con-tit img{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; font-family : HG; font-weight : 400;}
.premium-btn-box > li{position :relative; cursor: pointer; transform: translateX(-100px);opacity: 0; transition : transform 1s, opacity 1s; opacity : 0.5;}
.active .premium-btn-box > li{transform: translateX(0); opacity: 0.5; transition-delay: calc(var(--i) * 0.1s + 0.4s);}
.premium-btn-box > li::after{position : absolute; content: ''; width : 100%; height : 1px; bottom : -5px; 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; opacity : 1;}

.premium-btn-box > li img{height : 15px}

.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);}

/*********************************************
****************    NEW    *******************
*********************************************/

.schedule-bg{width : 100%;height : 100%;position : absolute; left : 0;top : 0; width : 100%;height : 100%; overflow: hidden;}
.schedule-bg > img{width : 100%;height : 100%; object-fit: cover; object-position: center; transform: scale(1.25); transition : 0s 1s;}
.active .schedule-bg > img{transform: scale(1); transition : 3s}
.schedule-inner{display: flex;justify-content: space-between;align-items: center; width : 100%; max-width: 1440px; position : relative; margin : 0 auto;}

.schedule-table{display: grid; grid-template-columns: repeat(2, 1fr); width : 500px;height : 430px; gap : 20px 14px}
.schedule-table > li{display: flex;flex-direction: column;justify-content: center;align-items: center; color : rgba(255,255,255,0.5); position : relative; transition : background .3s, color .3s;}
.schedule-table > li:hover,
.schedule-table > li.on{background: rgba(139,99,75,0.9); color : #fff;}
.schedule-table > li.wide{grid-column: span 2;}

.schedule-table > li > span.line{background: rgba(255,255,255,0.5); position : absolute; transition : background .3s, clip-path 1s .4s;}
.schedule-table > li:hover > span.line,
.schedule-table > li.on > span.line{background: rgba(139,99,75,0.9);}

.schedule-table > li > span.line:nth-child(1){left : 0;top : 0;width : 100%;height : 1px; clip-path: inset(0 100% 0 0);}
.schedule-table > li > span.line:nth-child(2){right : 0;top : 0;width : 1px;height : 100%; clip-path: inset(0 0 100%);}
.schedule-table > li > span.line:nth-child(3){right : 0; bottom : 0;width : 100%;height : 1px; clip-path: inset(0 0 0 100%);}
.schedule-table > li > span.line:nth-child(4){left : 0;bottom : 0;width : 1px; height : 100%; clip-path: inset(100% 0 0);}

.active .schedule-table > li > span.line{clip-path: inset(0)}

.schedule-tit-box{display: flex;flex-direction: column;align-items: center;}
.schedule-day{font-family: HG; font-weight: 700; font-size: 30px; transform: translateY(50px); opacity: 0; transition :  color .3s, opacity 1.2s, transform 1.2s;}
.schedule-name{font-family: HG; font-weight: 300; font-size: 24px; transform: translateY(50px); opacity: 0; transition :  color .3s, opacity 1.2s, transform 1.2s;}

.active .schedule-day,
.active .schedule-name{transform: translateY(0); opacity: 1; transition-delay: 1s; transition : color .3s, opacity 1.2s 1s, transform 1.2s 1s;}

.schedule-tit{font-family: AV;font-size: 97px; color : #8b634b; font-weight: 400; transform: rotate(-5deg) translateX(-100px) translateY(30px); opacity: 0; transition : 1.2s;}
.active .schedule-tit{transform: translateX(0) translateY(0) rotate(-5deg); opacity: 1;}

.schedule-desc{font-family: HG; font-weight:700; font-size: 22px; color : #fff; text-align: center; margin-bottom: 49px;line-height: 1.2em; transition : 1.2s; transform: translateY(50px); opacity: 0;}
.active .schedule-desc{transform: translateY(0); opacity: 1;}
.schedule-desc > span{font-family: HW; font-weight: 500;}
.schedule-desc > span > .forena{font-family: forena; font-weight: 400;}

.schedule-logo{opacity: 0; transition : 1s;}
.active .schedule-logo{opacity: 1; transition-delay: 1.2s;}

.schedule-btn{display: flex;flex-direction: column;align-items: center;justify-content: center; position : absolute; background: linear-gradient(to bottom, #9f765d, #6c4b38); border-radius: 50%; width : 162px;height : 162px; color : #fff; font-family: HG; font-weight: 700; font-size: 24px; left : 15px; bottom : 15px; transform: translateX(-100px); opacity: 0; transition : 1s;}
.active .schedule-btn{transform: translateX(0); opacity: 1; transition-delay: 1.2s;}
.schedule-btn > img{margin-top: 15px; transition : .3s;}
.schedule-btn:hover > img{transform: translateX(10px);}

/**/

.community-bg{width : 100%;height : 100%;position : absolute; left : 0;top : 0; width : 100%;height : 100%; overflow: hidden;}
.community-bg > img{width : 100%;height : 100%; object-fit: cover; object-position: left bottom; transform: scale(1.25); transition : 0s 1s;}
.active .community-bg > img{transform: scale(1); transition : 3s}

.community-inner{display: flex;justify-content: space-between;align-items: center; position :relative;width : 100%; max-width: 1500px; margin : 0 auto;padding-top: 50px;}

.community-left{display: flex;flex-direction: column;align-items: center; padding-left: 100px;}

.community-tit{font-size: 80px; font-family: AV; font-weight: 400; font-weight: 700;transform: translateX(-100px); opacity: 0; transition : 1.2s;}
.active .community-tit{transform: translateX(0); opacity: 1; transition-delay: .4s;}

.community-desc{font-size: 22px; font-family: HG; font-weight: 400; margin-bottom: 48px; text-align: center;transform: translateY(50px); opacity: 0; transition : 1.2s;}
.active .community-desc{transform: translateY(0); opacity: 1; transition-delay: .4s;}

.community-sub-tit{padding : 9px 72px 7px; background: #003057; color : #fff; font-family: HG; font-weight: 300; line-height: 1em; border-radius: 100px; margin-bottom: 15px; transform: translateX(-100px); opacity: 0; transition : 1.2s;}
.active .community-sub-tit{transform: translateX(0); opacity: 1; transition-delay: .4s;}
.community-sub-tit b{font-weight: 700;}

.routine-box{position :relative; mix-blend-mode: darken; transform: translateX(-100px); opacity: 0; transition : 1.2s;}
.active .routine-box{transform: translateX(0); opacity: 1; transition-delay: .4s;}
.routine-box > img{position :absolute; left : 0;top : 0; opacity: 0; transition : opacity .5s;}
.routine-box > img.on{opacity: 1;}
.routine-box > img:first-child{position : static}

.community-right{display: flex;flex-direction: column;align-items: center;}


.community-btn-box{display: flex;gap : 10px; margin-bottom: 33px;;}
.community-btn-box > li{display: flex;flex-direction: column;align-items: center; cursor: pointer; width : 140px; height : 140px; background: #003057; border-radius: 50%; color : #fff; padding-top: 30px; padding-bottom: 24px; transform: translateY(-50px); opacity: 0; transition : background .5s, color .5s, transform 1s, opacity 1s; background: transparent; color : #003057; border : 1px solid #003057}
.community-btn-box > li.on{color : #fff; background: #003057;}
.active .community-btn-box > li:nth-child(1){transform: translateY(0); opacity: 1; transition : background .5s, color .5s, transform 1s .4s, opacity 1s .4s;}
.active .community-btn-box > li:nth-child(2){transform: translateY(0); opacity: 1; transition : background .5s, color .5s, transform 1s .5s, opacity 1s .5s;}
.active .community-btn-box > li:nth-child(3){transform: translateY(0); opacity: 1; transition : background .5s, color .5s, transform 1s .6s, opacity 1s .6s;}

.community-btn-floor{font-size: 25px; font-family: HG; font-weight: 500;}
.community-btn-desc{display: flex;flex-direction: column;justify-content: center; align-items: center; height : 100%; text-align: center; font-family: HG; font-weight: 300; font-size: 14px;}

.community-floor-box{position : relative; mix-blend-mode: darken;transform: translateY(100px); opacity: 0; transition : 1.2s;}
.active .community-floor-box{transform: translateY(0); opacity: 1; transition-delay: .4s;}

.community-floor-box > img{position :absolute;left : 0;top : 0;opacity: 0; transition : opacity .5s;}
.community-floor-box > img.on{opacity: 1;}
.community-floor-box > img:first-child{position : static}


/**/

.unit-bg{width : 100%;height : 100%;position : absolute; left : 0;top : 0; width : 100%;height : 100%; overflow: hidden;}
.unit-bg > img{width : 100%;height : 100%; object-fit: cover; object-position: left bottom; transform: scale(1.25); transition : 0s 1s;}
.active .unit-bg > img{transform: scale(1); transition : 3s}

.unit-inner{display: flex;justify-content: space-between; width : 100%;max-width: 1330px; margin : 0 auto; position : relative;}

.unit-left{display: flex;flex-direction: column;justify-content: center;align-items: center; color : #fff;}

.unit-tit{font-size: 80px; font-family: AV; font-weight: 700;transform: translateX(-100px); opacity: 0; transition : 1.2s;}
.active .unit-tit{transform: translateX(0); opacity: 1; transition-delay: .4s;}

.unit-desc{font-size: 22px; font-family: HG; font-weight: 400; text-align: center;transform: translateY(50px); opacity: 0; transition : 1.2s; margin-bottom: 64px;}
.active .unit-desc{transform: translateY(0); opacity: 1; transition-delay: .4s;}

.unit-link-box{display: flex;gap : 8px; transform: translateY(100px); opacity: 0; transition :1.2s}
.active .unit-link-box{transform: translateY(0); opacity: 1; transition-delay: 1.2s;}
.unit-link-box > a{display: flex;align-items: center;justify-content: center; width : 110px;height : 110px; font-family: HG; font-weight: 300; font-size: 18px; border : 1px solid #fff; transition : .5s;}
.unit-link-box > a:hover{background: #fff; color : #111}

.unit-right{display: flex;flex-direction: column;justify-content: center;align-items: center; transform: translateX(100px); opacity: 0; transition :1.2s}
.active .unit-right{transform: translateX(0); opacity: 1; transition-delay: .4s;}

.unit-type-box{display: flex;justify-content: center; position : relative; width : 100%; overflow: hidden; margin-bottom: 36px;}
.unit-type-box > li{color : #fff; font-size: 33px; font-family: HG; position :absolute;top : 0; white-space: nowrap; transition : transform 0.5s; transform: translateY(100%);}

.unit-type-box > li.end{animation : unit-type-btn-end 0.5s both}
.unit-type-box > li.on{animation : unit-type-btn 0.5s both}

@keyframes unit-type-btn {
    0%{transform: translateY(-100%);}
    100%{transform: translateY(0%);}
}
@keyframes unit-type-btn-end {
    0%{transform: translateY(0%);}
    100%{transform: translateY(100%);}
}
.unit-type-box > li:nth-child(1){position :static;}
.unit-type-box > li > b{font-size: 60px;}
.unit-type-box > li > span{font-size: 35px; display: inline-block;}
.unit-type-box > li > span > small{font-size: 28px;}
.unit-type-box > li > span > b{font-size: 35px;}

.unit-btn-box{display: flex; margin-bottom: 36px;}
.unit-btn-box > li{width : 200px; text-align: center; font-family: HG; color : rgba(255,255,255,0.8); font-size: 22px; padding-bottom: 9px; border-bottom : 1px solid rgba(255,255,255,0.5); cursor : pointer; font-weight: 700; position :relative;}
.unit-btn-box > li::after{position : absolute; content : ''; width : 100%; height : 1px; background: #fff; bottom : 0; left : 0; clip-path: inset(0 100% 0 0); transition : clip-path .5s;}
.unit-btn-box > li.on{color : #fff;}
.unit-btn-box > li.on::after{clip-path: inset(0);}

.unit-img-box{display: flex;justify-content: center; align-items: center; position :relative; height : 404px; margin-bottom: 36px;}
.unit-img-box > img{position :absolute; white-space: nowrap; transition : 1s; opacity: 0;}
.unit-img-box > img:nth-child(1){position :static;}
.unit-img-box > img.on{opacity: 1;}

.unit-btn{display: flex;align-items: center;justify-content: center;gap : 20px; width : 140px; height : 32px; font-size: 12px; font-family: HG; color : #fff; border : 1px solid #fff; padding-left: 10px; position :relative;z-index: 1; transition  : color .3s;}
.unit-btn:hover{color : #111}
.unit-btn::after{position :absolute; content : ''; width : 100%;height : 100%; background: #fff; left : 0; top : 0; z-index: -1; clip-path: inset(100% 0 0);transition : clip-path .3s;}
.unit-btn:hover::after{clip-path: inset(0);}

.unit-btn > img{transition : filter .3s;}
.unit-btn:hover > img{filter : invert(1)}

/**/

.main-section-design{background: #072c4a;}

.design-inner{display: flex;flex-direction: column; align-items: start; justify-content: center; width : 100%; max-width: 1440px; margin : 0 auto;position : relative; color : #fff;z-index: 1;}

.design-img-box{display: flex; align-items: center;  position :absolute; right : 0;gap : 10px;z-index: -1;padding-top: 80px;}
.design-img-right{display: flex;flex-direction: column; align-items: start; gap : 10px;}
.design-img-bottom{display: flex; gap : 10px; align-items: start;}

.design-sub-tit{font-size: 30px; font-family: HG; font-weight: 500; transform: translateX(-100px); opacity: 0; transition : 1.2s;}
.active .design-sub-tit{transform: translateY(0); opacity: 1; transition-delay: .4s;}
.design-tit{font-size: 80px; font-family: AV; font-weight: 700; transform: rotate(-5deg);margin-bottom: 24px; transform: translateX(-100px); opacity: 0; transition : 1.2s;}
.active .design-tit{transform: translateY(0); opacity: 1; transition-delay: .5s;}

.design-desc{font-size: 22px; font-family: HG; font-weight: 400;transform: translateX(-100px); opacity: 0; transition : 1.2s; margin-bottom: 68px;}
.active .design-desc{transform: translateY(0); opacity: 1; transition-delay: .6s;}

.design-logo{transform: translateX(-100px); opacity: 0; transition : 1.2s;}
.active .design-logo{transform: translateY(0); opacity: 1; transition-delay: .7s;}


.design-img-box img{transition : 1.2s; opacity: 0;}

.design-img-01{transform: translateX(-100px);}
.design-img-02{transform: translateY(-100px);}
.design-img-03{transform: translateY(100px);}
.design-img-04{transform: translateX(100px);}

.active .design-img-box img{transform: translateX(0px); opacity: 1; transition-delay: 1.2s;}