@font-face {
    font-family: CarismaClassic;
    src: url(../fonts/CarismaClassic-400Regular.woff2);
    font-weight: 400;
}
@font-face {
    font-family: CarismaClassic;
    src: url(../fonts/CarismaClassic-500Medium.woff2);
    font-weight: 500;
}
@font-face {
    font-family: AntroVectra;
    src: url(../fonts/Antro_Vectra.woff2);
    font-weight: 400;
}
.scroll-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap : 12.5px;
    position : fixed;
    z-index: 10;
    /* left : 71px; */
	right : 71px;
	bottom : 280px;
    /* bottom : 56px; */
}
.scroll-box.right{
	/* left : auto; */
	/* right : 71px; */
}
.scroll-box > span{
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-family: Montserrat;
    font-size: 13px;
    color : #A8A8A8;
}
.scroll-box > .mouse{
    display: flex;
    justify-content: center;
    width : 24px;
    height : 44px;
    border-radius: 12px;
    border : 1px solid #C39F7D;
    padding-top : 12px;
}
.scroll-box > .mouse > .dot{
    width : 4px;
    height : 4px;
    border-radius: 50%;
    background : #C39F7D;
    animation : mouse-dot 1s infinite alternate;
}
@keyframes mouse-dot {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(15px);
    }
}
/**/
.quick-menu{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap : 15px;
    position : fixed;
    padding : 0 25px 0 0;
    right : 0;
    bottom : 43px;
    z-index: 100;
    transform: translateX(100%);
    transition : transform 1.2s;
}
.quick-menu.on{
    transform: translateX(0%);
}
.quick-menu > .open{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color : #fff;
    background : #C39F7D;
    width : 108px;
    height : 108px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.quick-menu > .open > p{
    font-family: futura-pt;
    font-weight: 500;
    letter-spacing: -0.06em;
}
.quick-menu > .customer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap : 10px;
    width : 82px;
    height : 82px;
    background : #fff;
    border-radius: 50%;
    font-family: futura-pt;
    font-weight: 500;
    font-size: 12px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.main-section-visual{
    width : 100%;
    height : 100vh;
}
.visual-inner{
    display: flex;
    justify-content: center;
    align-items: center;
    width : 100%;
    height : 100%;
    position : absolute;
    left : 0;
    top : 0;
	padding-top: 50px;
    pointer-events: none;
}
.visual-inner::after{
    position : absolute;
    content : '';
    width : 100%;
    height : 100%;
    background : url(../images/main/visual-dim.jpg)no-repeat;
    background-size: cover;
    background-position : center;
    z-index: 1;
    left : 0;
    top : 0;
    animation : visual-dim 2s both;
    animation-delay: 3s;
}
@keyframes visual-dim{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.visual-slide{
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
}
.visual-bg-box{
    background : #fff;
    position : absolute;
    width : 100%;
    height : 100%;
    pointer-events: none;
    animation : visual-bg-box 1s both 7s;
}
@keyframes visual-bg-box {
    0%{opacity: 1;}
    100%{opacity: 0;}
}
.visual-bg{
    width : 100%;
    height : 100%;
    background : url(../images/main/visual-bg-new-long.jpg)no-repeat;
    background-size : 100% auto;
    background-position : center top;
    left : 0;
    top : 0;
    animation : visual-bg-01 3.5s both ease 3.5s, visual-bg 5s both ease 3s;
    position : relative;
    z-index: 0;
    pointer-events: none;
}
@keyframes visual-bg-01 {
    0%{
        background-position : top;
    }
    100%{
        background-position : bottom;
    }
}
@keyframes visual-bg {
    0%{
        clip-path: circle(0% at 50% 50%);
    }
    99%{
        clip-path: circle(100% at 50% 50%);
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.visual-bg .visual-bg-02{
    position : absolute;
    left : 50%;
    transform: translateX(-50%);
    bottom : 0;
    animation : visual-bg-02 2.5s both ease;
    animation-delay: 4.5s;
}
@keyframes visual-bg-02 {
    0%{
        transform: translateX(-50%) translateY(100%);
    }
    100%{
        transform: translateX(-50%) translateY(0%);
    }
}
.visual-bg-img{
    position : absolute;
    width: 100%;
    height : 100%;
    left : 0;
    top : 0;
    z-index: -1;
    overflow: hidden;
}
.visual-bg-img > img{
    width : 100%;
    height : 100%;
    object-fit: cover;
    object-position: center bottom;
    transform: scale(1.2);
    transition : transform 4s;
}
.swiper-slide-active .visual-bg-img > img{
    transform: scale(1);
}
.visual-con{
    /* width : 813px; */
	width : 650px;
    height : 573px;
    position : relative;
    z-index: 2;
    animation : visual-con 7s both;
}
@keyframes visual-con {
    0%{
        opacity: 0;
    }
    20%{
        opacity: 1;
        transform: translateY(0);
    }
    40%{
        transform: translateY(0);
    }
    70%{
        transform: translateY(-39px);
    }
    100%{
        opacity: 1;
        transform: translateY(-39px);
    }
}
.visual-desc{
    display: flex;
    flex-direction: column;
    gap : 10px;
    position : absolute;
    left : 0;
    top : 0;
    animation : visual-desc 3s both;
    animation-delay : 2.5s;
}
.visual-desc > p{
    /* font-family: Noto Serif KR; */
    font-family: NanumMyeongjo;
    font-size: 20px;
    transform: translateX(-50px);
    animation : visual-desc-p 1s both;
}
.visual-desc > p:nth-child(1){
    animation-delay: 0s;
}
.visual-desc > p:nth-child(2){
    animation-delay: .1s;
}
.visual-desc > p:nth-child(3){
    animation-delay: .2s;
}
@keyframes visual-desc-p {
    0%{
        opacity: 0;
        transform: translateX(-50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes visual-desc {
    0%{
        top : 0;
    }
    100%{
        top : 187px;
    }
}
.visual-num{
    width : 400px;
    height : 480px;
    background : url(../images/main/49.png)no-repeat;
    background-size: contain;
    position :absolute;
    left : 100px;
    top : 0;
    animation : visual-num 5s both;
}
@keyframes visual-num {
    0%{
        opacity: 0;
        background : url(../images/main/49.png) no-repeat;
		background-size: contain;
    }
    30%{
        opacity: 1;
    }
    60%{
        opacity: 1;
        background : url(../images/main/49.png) no-repeat;
		background-size: contain;
    }
    100%{
        opacity: 1;
        background : url(../images/main/49-white.png) no-repeat;
		background-size: contain;
    }
}
.visual-title{
	display : flex;
	flex-direction : column;
	/* width : 250px; */
	width : 418px;
    position :absolute;
    right : -190px;
    top : 374px;
    animation : visual-title 5s both;
    animation-delay : 0s;
	font-size : 29px;
	line-height : 43px;
	color : #020039;
	white-space : nowrap;
}
.visual-title > p:nth-child(2){
	align-self : end;
}
@keyframes visual-title {
    0%{
        opacity: 0;
        /* transform: translateX(100px); */
        top : 374px;
    }
    50%{
        opacity: 1;
        /* transform: translateX(0px); */
        top : 374px;
    }
    100%{
        top : 405px;
    }
}
.visual-title b{
	font-size : 37px;
	font-family : Nanum Myeongjo
}
.visual-title div{
	font-family : Nanum Myeongjo
}
/**/
.visual-video{
	position : absolute;
	width : 300px;
	z-index : 10;
	right : 80px;
	top : 172px;
	background : #000;
	color : #fff;
	padding : 4px;
	font-size : 13px;
	border-radius : 7px;
	font-weight : 500;
	animation : visual-video 2s both 5s;
}
@keyframes visual-video{
	0%{transform : translateX(100px); opacity : 0}
	100%{transform : translateX(0px); opacity : 1}
}
.visual-video > p{
	padding : 4px 5px 8px;
}
.visual-video > .video-container{
	width : 100%;
	padding-bottom : 56.25%;
	position : relative;
	border-radius : 7px;
	overflow :hidden;
}
.visual-video > .video-container > iframe{
	position : absolute;
	width : 100%;
	height : 100%;
	pointer-events : none;
}
/**/
.main-section-brand .fp-tableCell{
    display: flex;
    align-items: end;
    justify-content: center;
}
.brand-bg{
    display: flex;
    align-items: end;
    justify-content: center;
    width : 100%;
    height : 100%;
    position : absolute;
    left : 0;
    top : 0;
    background : url(../images/main/brand-bg.jpg)no-repeat;
    background-size: cover;
    background-position : right bottom;
}
.brand-bg > img{
    position : absolute;
    bottom : 65px;
}
.brand-bg-01{
    transform: translateX(-200px);
}
.active .brand-bg-01{
    animation : brand-bg-01 4s both;
    animation-delay: .5s;
}
@keyframes brand-bg-01 {
    0%{
        clip-path: inset(100% 0 0 0);
    }
    30%{
        clip-path: inset(0 0 0 0);
    }
    45%{
        clip-path: inset(0 0 0 0);
    }
    85%{
        clip-path: inset(0 50%);
    }
    100%{
        clip-path: inset(0 50%);
    }
    
}
.brand-bg-02{
    width : 292px;
    height : 716px;
    object-fit: cover;
    object-position : center left;
    animation-delay : 1s;
}
.active .brand-bg-02{
    animation : brand-bg-02 4s both;
    animation-delay : .5s;
}
@keyframes brand-bg-02 {
    0%{
        clip-path: inset(100% 0 0 0);
    }
    30%{
        clip-path: inset(0 0 0 0);
    }
    45%{
        clip-path: inset(0 0 0 0);
        width : 292px;
        height : 716px;
        bottom : 65px;
    }
    85%{
        clip-path: inset(0);
        width : 100%;
        height : 100%;
        bottom : 0;
    }
    100%{
        clip-path: inset(0);
        width : 100%;
        height : 100%;
        bottom : 0;
    }
}
.brand-inner{
    position : relative;
    z-index: 1;
    color : #fff;
    width : 100%;
    max-width : 1100px;
	/* max-width : 1165px; */
    height : 716px;
    margin-bottom : 65px;
}
.brand-desc-01{
    display: flex;
    flex-direction: column;
    gap : 23px;
    position : absolute;
    left : 731px;
    padding-left : 34px;
	opacity : 1;

    /* transition: left 1.5s 2.3s, opacity 1.5s 2s; */
}
.active .brand-desc-01{
    left : 731px;
	opacity : 1;
    transition-delay: 2.3s;
}
.brand-desc-01::after{
    position : absolute;
    content: '';
    width :1px;
    height : 0%;
    background : #727272;
    left : 0;
    top : 0;
    transition : height .8s;
    transition-delay: 3s;
}
.active .brand-desc-01::after{
    height : 100%;
}
.brand-desc-01 > p{
    font-size: 18px;
    color : #838383;
    font-family: NanumMyeongjo;
    transform: translateX(-30px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .brand-desc-01 > p{
    transform: translateX(0px);
    opacity: 1;
}
.active .brand-desc-01 > p:nth-child(1){
    transition-delay: 3s;
}
.active .brand-desc-01 > p:nth-child(2){
    transition-delay: 3.1s;
}
.active .brand-desc-01 > p:nth-child(3){
    transition-delay: 3.2s;
}
.brand-desc-01 > p > b{
    font-family: NanumMyeongjo;
    color : #fff;
    font-weight: 400;
}
.brand-desc-02{
    position :absolute;
    bottom : 0;
    right : 0;

    transition: bottom 1.5s;
}
.active .brand-desc-02{
    bottom : 380px;
    transition-delay: 2.3s;
}
.brand-desc-02 > p{
    font-size: 25px;
    font-family: NanumMyeongjo;
    letter-spacing: -0.04em;
    line-height: 34px;
    color : #fff;

    transition : transform 1.2s, opacity 1.2s;
    opacity: 0;
    transform: translateY(-100px);
}
.active .brand-desc-02 > p{
    opacity: 1;
    transform: translateY(0px);
    transition-delay: .5s;
}
.brand-desc-title{
    font-family: NanumMyeongjo;
    font-size: 29px;
    letter-spacing: -0.04em;
    color : #C39F7D;
    margin-top : 33px;
    font-weight: 400;

    transition : transform 1s, opacity 1s;
    opacity: 0;
    transform: translateX(100px);
}
.active .brand-desc-title{
    opacity: 1;
    transform: translateX(0px);
    transition-delay: .5s;
}
/**/
.premium-bg{
    width : 100%;
    height : 100%;
    position : absolute;
    z-index: -1;
    left : 0;
    top : 0;
    background : url(../images/main/premium-bg.jpg)no-repeat;
    background-position : center;
    background-size: cover;
}
/**/
.premium-slide{
    width : 100%;
    height : 100%;
    position : absolute;
    left : 0;
    top : 0;
    z-index: 10;
}
.premium-slide .swiper-slide{
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom : 74px;
    overflow: hidden;
}
.premium-inner{
    width : 1290px;
    height : 687px;
    position : relative;
}
.premium-bar{
    display: flex;
    position : absolute;
    width : 100%;
    height : 1px;
    bottom : 0;
    left : 0;
}
.premium-bar > .subway{
    display: flex;
    align-items: center;
    gap : 4px;
    color : #020039;
    font-weight: 500;
    padding : 0 10px;
    flex-shrink: 0;
    opacity: 0;
    transition : opacity .7s;
}
.active .swiper-slide-active .premium-bar > .subway{
    opacity: 1;
    transition-delay: .5s;
}
.premium-bar > .subway > .circle{
    display: flex;
    align-items: center;
    justify-content: center;
    width : 22px;
    height : 22px;
    border : 1px solid #020039;
    border-radius: 50%;
}
.premium-bar > .subway > .circle::after{
    position : absolute;
    content : '';
    width : 10px;
    height : 10px;
    border-radius: 50%;
    background : #020039;;
}
.premium-bar > span{
    width : 0;
    height : 1px;
    background : #020039;
    flex-shrink: 0;
    transition : width 1.5s;
    transition-delay: 0;
}
.premium-bar > span:nth-child(3){
    transition : width 1.5s;
    transition-delay: 0;
}
.active .swiper-slide-active.premium-slide-01 .premium-bar > span:nth-child(1){
    width : 48px;
    transition-delay: .5s;
}
.active .swiper-slide-active.premium-slide-01 .premium-bar > span:nth-child(3){
    width : 100vw;
    transition-delay: .7s;
}
.active .swiper-slide-active.premium-slide-02 .premium-bar > span:nth-child(1){
    width : 395px;
    transition-delay: .5s;
}
.active .swiper-slide-active.premium-slide-02 .premium-bar > span:nth-child(3){
    width : 100vw;
    transition-delay: .7s;
}

.active .swiper-slide-active.premium-slide-03 .premium-bar > span:nth-child(1){
    width : 395px;
    transition : width 1.5s;
    transition-delay: .5s;
}
.active .swiper-slide-active.premium-slide-03 .premium-bar > span:nth-child(3){
    width : 618px;
    transition : width 1.5s;
    transition-delay: .7s;
}
.active .swiper-slide-active.premium-slide-03 .premium-bar > span:nth-child(5){
    width : 50vw;
    transition : width 1.5s;
    transition-delay: .9s;
}
.premium-con-title{
    position : absolute;
    left : 0;
    top : 0;
    opacity: 0;
    transform: translateX(-150px);
    transition: opacity 1s, transform 1s;
}
.active .swiper-slide-active .premium-con-title{
    opacity: 1;
    transform: translateX(0);
    transition-delay: .5s;
}
.premium-list{
    display: flex;
    flex-direction: column;
    gap : 29px;
    position :absolute;
    left : 0;
    top : 154px;
    padding-left : 33px;
    color : #A5A5A5;
    opacity: 0;
    transition: opacity 1s, transform 1s;
}
.active .swiper-slide-active .premium-list{
    opacity: 1;
    transition : opacity 1s 0s;
}
.premium-list::after{
    position : absolute;
    left : 0;
    top : 0;
    content : '';
    width : 1px;
    height : 0%;
    background: #262626;
    transition : height .7s;
}
.active .swiper-slide-active .premium-list::after{
    height : 100%;
    transition-delay: .5s;
}
.premium-list > li > h3{
    font-size: 24px;
    letter-spacing: -0.04em;
    line-height: 35px;
    font-weight: 400;
	transition : color 1s;
}
.premium-list > li > h4{
    font-size: 18px;
    letter-spacing: -0.04em;
    font-weight: 400;
}
.premium-list > li{
    transform: translateX(-100px);
    opacity: 0;
    transition : transform 1s, opacity 1s, color .5s;
}
.active .swiper-slide-active .premium-list > li{
    transform: translateX(0px);
    opacity: 1;
}
.active .swiper-slide-active .premium-list > li:nth-child(1){
    /* transition-delay: .5s; */
	transition : opacity 1s .5s, transform 1s .5s;
}
.active .swiper-slide-active .premium-list > li:nth-child(2){
    /* transition-delay: .6s; */
	transition : opacity 1s .6s, transform 1s .6s;
}
.active .swiper-slide-active .premium-list > li:nth-child(3){
    /* transition-delay: .7s; */
	transition : opacity 1s .7s, transform 1s .7s;
}
.active .swiper-slide-active .premium-list > li:nth-child(4){
    /* transition-delay: .8s; */
	transition : opacity 1s .8s, transform 1s .8s;
}
.premium-list > li.on{
    color : #3C3C3C;
}
.premium-list > li.on > h3{
	color : #020039;
	font-weight : 700;
}
.premium-bottom-title{
    font-size: 39px;
    position : absolute;
    right : 0;
    bottom : 48px;
    transform: translateX(200px);
    opacity: 0;
    transition: opacity 1s, transform 1s;
}
.active .swiper-slide-active .premium-bottom-title{
    opacity: 1;
    transform: translateX(0);
    transition-delay: .5s;
}
.premium-bottom-title > p{
    font-family: CarismaClassic;
    text-align: right
}
.premium-bottom-title > p:nth-child(1){
    font-weight: 400;
}
.premium-bottom-title > p:nth-child(2){
    font-weight: 500;
    font-size: 53px;
}
.premium-img-box{
    position : absolute;
    right : 0;
    bottom : 202px;
}
.premium-slide-01 .premium-img-box{
    display: flex;
    align-items: end;
    gap : 22px;
}
.premium-img{
    opacity: 0;
    transition : clip-path 1s, opacity .7s, transform 1s;
}
.premium-slide-01 .premium-img.premium-img-01{
    /* transform: translate(-150px, 150px); */
    clip-path: inset(0 50%);
    transition-delay: .5s;
}
.premium-slide-01 .premium-img.premium-img-02{
    /* transform: translate(150px, -150px); */
    clip-path: inset(0 50%);
    transition-delay: 1s;
}
.active .swiper-slide-active.premium-slide-01 .premium-img.premium-img-01{
    /* transform: translate(0); */
    clip-path: inset(0);
    opacity: 1;
}
.active .swiper-slide-active.premium-slide-01 .premium-img.premium-img-02{
    /* transform: translate(0); */
    clip-path: inset(0);
    opacity: 1;
}

.premium-slide-02 .premium-img-box{
    display: flex;
    align-items: end;
    justify-content: end;
    flex-wrap : wrap;
    gap : 0px;
    width : 604px;
}

.premium-slide-02 .premium-img.premium-img-01{
    transition-delay: 1.5s;
    margin-bottom : 45px;
    transform: scale(1.5);
}
.premium-slide-02 .premium-img.premium-img-02{
    transition-delay: .5s;
    clip-path: inset(0 50%);
}
.premium-slide-02 .premium-img.premium-img-03{
    transition-delay: 1s;
    margin-left : 18px;
    clip-path: inset(0 50%);
}
.active .swiper-slide-active.premium-slide-02 .premium-img.premium-img-01{
    opacity: 1;
    transform: scale(1);
}
.active .swiper-slide-active.premium-slide-02 .premium-img.premium-img-02{
    opacity: 1;
    clip-path: inset(0);
}
.active .swiper-slide-active.premium-slide-02 .premium-img.premium-img-03{
    opacity: 1;
    clip-path: inset(0);
}

.premium-slide-03 .premium-img-box{
    display: flex;
    gap : 18px;
}
.premium-slide-03 .premium-img.premium-img-01{
    /* transform: translate(-150px, 150px); */
    clip-path: inset(0 50%);
    transition-delay: .5s;
}
.premium-slide-03 .premium-img.premium-img-02{
    /* transform: translate(150px, -150px); */
    clip-path: inset(0 50%);
    transition-delay: 1s;
}
.active .swiper-slide-active.premium-slide-03 .premium-img.premium-img-01{
    /* transform: translate(0); */
    clip-path: inset(0);
    opacity: 1;
}
.active .swiper-slide-active.premium-slide-03 .premium-img.premium-img-02{
    /* transform: translate(0); */
    clip-path: inset(0);
    opacity: 1;
}
.premium-obj{
    position : absolute;
    opacity: 0;
    transition : opacity 1s;
}
.active .swiper-slide-active .premium-obj{
    opacity: 1;
    transition-delay: .5s;
}
.premium-slide-01 .premium-obj{
    left : 370px;
    bottom : -19px;
}
.premium-slide-02 .premium-obj{
    left : -20px;
    bottom : 0;
}
.premium-slide-03 .premium-obj{
    left : 451px;
    bottom : 38px;
}

/**/
.main-section-community{
	position : relative;
	background : #fff;
}
.main-section-community::before{
	position : absolute;
	content : '';
	width : 50%;
	height : 100%;
	background : url(../images/main/community-bg.jpg)no-repeat;
    background-size: cover;
	right : 0;
	top : 0;
}
.main-section-community .fp-tableCell{
	display : flex;
	justify-content : center;
}
.community-inner{
	display : flex;
	width : 100%;
	height : 100%;
	max-width : 1600px;
	position : absolute;
    padding-top : 137px;
}
.community-left{
	display : flex;
	flex-direction : column;
	justify-content : center;
    align-items: start;
	width : 50%;
	height : 100%;
	flex-shrink : 0;
	padding-right : 80px;
}
.community-title{
	font-size : 42px;
	font-weight : 300;
	letter-spacing : -0.04em;
	line-height : 52px;
	margin-bottom:25px;
	color : #020039;
    transform: translateX(-100px);
    opacity: 0;
    transition: transform 1.2s, opacity 1.2s;
}
.community-title > span{
    font-weight: 500;
}
.active .community-title{
    transform: translateX(0);
    opacity: 1;
    transition: transform 1.2s .5s, opacity 1.2s .5s;
}
.community-desc{
	font-size : 16px;
	line-height : 30px;
	letter-spacing : -0.04em;
	margin-bottom:27px;
	color : #3C3C3C;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 1.2s, opacity 1.2s;
}
.active .community-desc{
    transform: translateY(0);
    opacity: 1;
    transition: transform 1.2s .5s, opacity 1.2s .5s;
}
.community-img{
    transform: scale(1.1);
    opacity : 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .swiper-slide-active .community-img{
    transform: scale(1);
    opacity: 1;
    transition: transform 1.2s .5s, opacity 1.2s .5s;
}
.community-left-btn{
	display : flex;
	gap : 5px;
	margin-bottom: 30px;;
	transform : translateX(-100px);
	opacity : 0;
	transition : transform 1.2s, opacity 1.2s;
}
.active .community-left-btn{
	transform : translateX(0);
	opacity : 1;
	transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.community-left-btn > li{
	width : 100px;
	padding-bottom : 10px;
	font-size : 18px;
	color : #aaa;
	border-bottom : 2px solid #aaa;
	text-align : center;
	font-weight : 500;
	cursor : pointer;
	transition : border-color .3s, color .3s;
}
.community-left-btn > li.on,
.community-left-btn > li:hover{
	color : #020039;
	font-weight : 700;
	border-color : #020039;
}
.community-left-slide{
	background : #fff;
	width : 100%;
	/* overflow : hidden; */
	opacity : 0;
	position : relative;
	transition : opacity 1.2s;
}
.active .community-left-slide{
	opacity : 1;
	transition : opacity 1.2s .5s;
}
.community-left-slide .swiper-slide{
	position : relative;
	background : #fff;
}
.community-left-name{
	align-items : center;
	justify-content : center;
	display : flex;
	width : 140px;
	height : 60px;
	position: absolute;
	left : 0;
	top : 0;
	font-size : 23px;
	font-weight : 700;
	color : #101010;
}
.community-left-name::before{
	position: absolute;
	content : '';
	width : 0;
	height : 1px;
	top : 0;
	left : 0;
	background : #020039;
	transition : width 1s;
}
.community-left-name::after{
	position: absolute;
	content : '';
	width : 0;
	height : 1px;
	bottom : 0;
	right : 0;
	background : #020039;
	transition : width 1s;
}
.active .swiper-slide-active .community-left-name::before,
.active .swiper-slide-active .community-left-name::after{
	width : 100%;
}
.community-left-navigation{
	display : flex;
	align-items : center;
	gap : 28px;
	position : absolute;
	right : 0;
	bottom : 0;
	z-index : 1;
	font-family : ;
	font-size : 12px;
}
.community-left-navigation > div{
	font-family : montserrat;
	cursor : pointer;
}
.community-left-navigation > div > img{
	transition : transform .3s;
}
.community-left-prev{
	text-align : right;
}
.community-left-prev > img{
	transform : rotate(180deg);
}
.community-left-prev:hover > img{
	transform : rotate(180deg) translateX(30px);
}
.community-left-next:hover > img{
	transform : translateX(30px);
}


.community-right{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	width : 50%;
	height : 100%;
	flex-shrink : 0;
	position : relative;
	margin-left : auto;
    overflow: hidden;
	padding-top : 150px;
}
.community-right::after{
	position : absolute;
	content : "COMMUNITY";
	left : 0;
	/* top : 50%; */
	bottom : 0;
	font-size : 120px;
	z-index : 1;
	font-family : futura-pt-bold;
	color : transparent;
	text-stroke : 1px #fff;
	-webkit-text-stroke : 1px #fff;
	writing-mode : vertical-rl;
	line-height : .7em;
	transform : translateY(0);
    transform: translateY(-50%);
    opacity: 0;
    transition: transform 1.2s, opacity 1.2s;
}
.active .community-right::after{
    transform : translateY(0);
    opacity: 1;
    transition: transform 1.2s .5s, opacity 1.2s .5s;
}
.community-slide{
	width : 400px;
	height : 500px;
    margin-bottom: 70px;
    position : relative;
    opacity: 0;
    transition: opacity 1.2s;
}
.active .community-slide{
    opacity: 1;
    transition: opacity 1.2s .5s;;
}
.community-slide .swiper-slide{
    opacity: 0;
    /* pointer-events: none; */
    transition : opacity 1.2s;
}
.community-slide .swiper-slide-active{
    opacity: 1;
}
.community-img-box{
    display: flex;
    justify-content: center;
    width : 100%;
    height : 100%;
    border-radius: 245px;
    position : relative;
    overflow: hidden;
	box-shadow : 3px 3px 15px 10px rgba(0,0,0,0.16);
}
.community-img-box > img{
    width : 100%;
    height : 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 245px;
	
}
.community-sign{
    width : auto !important;
    height : auto !important;
    position : absolute;
    right : -50px;
    bottom :0px;
    opacity: 0;
    transform: translateX(-200px) translateY(100px) rotate(-30deg);
    transition : transform 1.2s, opacity 1.2s;
	font-family : AntroVectra;
	font-size : 50px;
	white-space : nowrap;
	color : #fff;
}
.community-img-box > .community-sign{
    filter: brightness(0) invert(1);
    z-index: 1;
}
.active .swiper-slide-active .community-sign{
    transform: translateX(0) translateY(0) rotate(-30deg);
    opacity: 1;
}
.community-leaf{
    position : absolute;
    z-index: 1;
    pointer-events: none;
}
.community-leaf-01{
    top : 100px;
    right : -50px;
}
.community-leaf-02{
    bottom :30px;
    left : -90px;
}
.community-btn-box{
    display: flex;
    overflow: hidden;
    gap : 25px;
}
.community-btn-box > li{
	width : 103px;
    height : 103px;
    border-radius: 50%;
    overflow: hidden;
    filter: grayscale(1);
    position : relative;
    transition : filter .5s;
    cursor: pointer;
}
.community-btn-box > li{
    transform: translateY(100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .community-btn-box > li{
    transform: translateY(0);
    opacity: 1;
}
.active .community-btn-box > li:nth-child(1){
    transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.active .community-btn-box > li:nth-child(2){
    transition : transform 1.2s .6s, opacity 1.2s .6s;
}
.active .community-btn-box > li:nth-child(3){
    transition : transform 1.2s .7s, opacity 1.2s .7s;
}
.active .community-btn-box > li:nth-child(4){
    transition : transform 1.2s .8s, opacity 1.2s .8s;
}
.active .community-btn-box > li:nth-child(5){
    transition : transform 1.2s .9s, opacity 1.2s .9s;
}
.active .community-btn-box > li:nth-child(6){
    transition : transform 1.2s 1s, opacity 1.2s 1s;
}
.community-btn-box > li::after{
    position : absolute;
    content: '';
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    border : 5px solid transparent;
    border-radius: 50%;
    box-sizing: border-box;
    transition : border-color .5s;
}
.community-btn-box > li.on,
.community-btn-box > li:hover{
    filter: grayscale(0);
}
.community-btn-box > li.on::after,
.community-btn-box > li:hover::after{
    border-color: #fff;
}
.community-btn-box > li > img{
    width : 100%;
    height : 100%;
    object-fit: cover;
    object-position: center;
}
.community-rotate{
    display: flex;
    align-items: center;
    justify-content: center;
    position : absolute;
    left : 0;
    top : 41px;
    width : 86px;
    height : 86px;
    border-radius: 50%;
    background : #020039;
    color : #fff;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    z-index: 1;
}
.community-rotate::after{
    position: absolute;
    content: '';
    width : 112px;
    height : 112px;
    background : url(../images/main/community-rotate-text.png)no-repeat center;
    background-size: contain;
    animation : rotate-text 6s infinite linear;
}
@keyframes rotate-text {
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}
/**/
.main-section-envi .fp-tableCell{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top : 100px;
}
.envi-inner{
    display: flex;
    flex-wrap : wrap;
    align-items: center;
    width : 100%;
    max-width : 1600px;
    height : 700px;
    position : relative;
}
.envi-inner::after{
    position : absolute;
    content : '';
    width : 1px;
    height : 0%;
    background : #E2E2E2;
    transition : height .7s;
    left : 50%;
    transform: translateX(-50%);
    top : 0;
    transition : height 1s;
}
.active .envi-inner::after{
    height : 100%;
    transition-delay: .5s;
}
.envi-box{
    display: flex;
    flex-direction: column;
    justify-content: end;
    width : 50%;
    height : 50%;
    padding-bottom : 37px;
    position : relative;
}
.envi-box.envi-box-01,
.envi-box.envi-box-02{
    padding-bottom : 54px;
}
.envi-box.envi-box-02,
.envi-box.envi-box-04{
    padding-left : 48px;
}
.envi-box.envi-box-03::before{
    position : absolute;
    content : '';
    left : 0;
    top : 0;
    width : 0;
    height : 1px;
    background : #E2E2E2;
    transition : width 1s;
}
.envi-box.envi-box-04::before{
    position : absolute;
    content : '';
    left : 39px;
    top : 0;
    width : 0;
    height : 1px;
    background : #E2E2E2;
    transition : width 1s;
}
.active .envi-box.envi-box-03::before{
    width : calc(100% - 39px);
    transition-delay: .5s;
}
.active .envi-box.envi-box-04::before{
    width : calc(100% - 39px);
    transition-delay: .5s;
}
.envi-box.envi-box-03::after{
    position : absolute;
    content : '';
    width: 10px;
    height : 10px;
    border-radius: 50%;
    background : #53A7AF;
    top : 0;
    transform: translateY(-50%) scale(0);
    right : 33px;
    transition : transform .7s;
}
.envi-box.envi-box-04::after{
    position : absolute;
    content : '';
    width: 10px;
    height : 10px;
    border-radius: 50%;
    background : #53A7AF;
    top : 0;
    transform: translateY(-50%) scale(0);
    right : 0px;
    transition : transform .7s;
}
.active .envi-box.envi-box-03::after,
.active .envi-box.envi-box-04::after{
    transform: translateY(-50%) scale(1);
    transition-delay: 1.5s;
}
.envi-box-inner{
    display: flex;
    align-items: end;
    width : 100%;
    gap : 33px;
}
.envi-title{
    font-size: 40px;
    font-family: CarismaClassic;
    font-weight: 400;
    color : #111111;
    width : 100%;
    margin-bottom : 27px;

    transform: translateX(-150px);
    opacity: 0;
    transition : transform 1s, opacity 1s;
}
.active .envi-title{
    transform: translateX(0);
    opacity: 1;
    transition-delay: 1.2s;
}
.envi-list{
    font-size: 16px;
    color : #686868;
    line-height: 34px;
    letter-spacing: -0.04em;
}
.envi-con{
    transform: translateX(150px);
    opacity: 0;
    transition : transform 1s, opacity 1s;
}
.active .envi-con{
    transform: translateX(0);
    opacity: 1;
    transition-delay: 1.2s;
}
.envi-con-title{
    font-size: 26px;
    letter-spacing: -0.04em;
    color : #020039;
    margin-top : 24px;
}
.envi-con-title.light{
    color: #53A7AF;
}
.envi-img{
    position : relative;
}
.envi-img-dim{
    display: flex;
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
}
.envi-img-dim > span{
    width :calc(100% / 8);
    height : 100%;
    background : #fff;
    clip-path: inset(0 0 0 0);
    transition : clip-path .5s;
}
.active .envi-img-dim > span:nth-child(1){
    clip-path: inset(0 100% 0 0);
    transition-delay: .5s;
}
.active .envi-img-dim > span:nth-child(2){
    clip-path: inset(0 100% 0 0);
    transition-delay: .55s;
}
.active .envi-img-dim > span:nth-child(3){
    clip-path: inset(0 100% 0 0);
    transition-delay: .6s;
}
.active .envi-img-dim > span:nth-child(4){
    clip-path: inset(0 100% 0 0);
    transition-delay: .65s;
}
.active .envi-img-dim > span:nth-child(5){
    clip-path: inset(0 100% 0 0);
    transition-delay: .7s;
}
.active .envi-img-dim > span:nth-child(6){
    clip-path: inset(0 100% 0 0);
    transition-delay: .75s;
}
.active .envi-img-dim > span:nth-child(7){
    clip-path: inset(0 100% 0 0);
    transition-delay: .8s;
}
.active .envi-img-dim > span:nth-child(8){
    clip-path: inset(0 100% 0 0);
    transition-delay: .85s;
}
.envi-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    position : absolute;
    z-index: 0;
    width : 74px;
    height : 74px;
    right : 47px;

    opacity: 0;
    transition : opacity 1s;
}
.active .envi-icon{
    opacity: 1;
    transition-delay: 2s;
}
.envi-icon::after{
    position : absolute;
    content : '';
    width : 74px;
    height : 74px;    
    background : url(../images/main/envi-icon-bg-01.png)no-repeat;
    background-position : center;
    animation : rotate-icon 6s infinite linear;
}
@keyframes rotate-icon {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
.envi-icon.light::after{
    background : url(../images/main/envi-icon-bg-02.png)no-repeat;
    background-position : center;
    animation : rotate-icon 7s infinite linear;
}
.envi-icon > img{
    position : relative;
    z-index: 1;
}
.envi-box-01 .envi-icon,
.envi-box-02 .envi-icon{
    top : 30px;
}
.envi-box-03 .envi-icon,
.envi-box-04 .envi-icon{
    top : 50px;
}
/**/
.main-section-unit{
    background : url(../images/main/unit-bg.jpg)no-repeat center;
    background-size: cover;
}
.main-section-unit .fp-tableCell{
    display: flex;
    align-items: center;
    justify-content: center;
}
.unit-inner{
    display: flex;
    width : 1600px;
    height : 100%;
    padding-top : 160px;
}
.unit-left{
    width : 50%;
}
.unit-title{
    font-size: 101px;
    color : #020039;
    font-family: futura-pt-bold;
    line-height: 1em;
    margin-bottom: 31px;

    transform: translateX(-100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .unit-title{
    transform: translateX(0);
    opacity: 1;
    transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.unit-title > span{
    color : transparent;
    -webkit-text-stroke: 1px #020039;
    font-family: futura-pt-bold;
}
.unit-desc{
    font-size: 16px;
    letter-spacing: -0.04em;
    color : #272727;
    margin-bottom: 39px;
    transform: translateX(-100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .unit-desc{
    transform: translateX(0);
    opacity: 1;
    transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.unit-link-box{
    margin-bottom: 111px;
    transform: translateY(100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .unit-link-box{
    transform: translateY(0);
    opacity: 1;
    transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.unit-link-box > li{
    width : 224px;
    height : 74px;
}
.unit-link-box > li + li{
    margin-top: 13px;
}
.unit-link-box > li > a{
    display: flex;
    align-items: center;
    justify-content: center;
    width : 100%;
    height : 100%;
    background : #fff;
    color : #020039;
    font-weight: 700;
    border-radius: 100px;
	transition : box-shadow .3s;
}
.unit-link-box > li > a:hover{
	box-shadow : 0 3px 6px rgba(0,0,0,0.16);
}
.unit-link-box > li:nth-child(2) > a{
    background : #020039;
    color : #fff;
}
.unit-obj{
    position : absolute;
    bottom : 0;
    opacity: 0;
    transition : opacity 1.2s;
}
.active .unit-obj{
    opacity: 1;
    transition: opacity 1.2s 1s;
}
.unit-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    width : 50%;
    overflow: hidden;
    transform: translateX(100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .unit-right{
    transform: translateX(0);
    opacity: 1;
    transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.unit-btn-box{
    display: flex;
    width : 800px;
    margin-bottom: 18px;
}
.unit-btn-box > li{
    flex : 1;
    text-align: center;
    padding-bottom : 12px;
    font-size: 24px;
    font-family: futura-pt-bold;
    color : #fff;
    border-bottom : 1px solid #EBEBEB;
    transition : color .3s, border-color .3s;
    cursor : pointer;
    position : relative;
}
.unit-btn-box > li::after{
    position : absolute;
    content : '';
    left : 50%;
    bottom : 0;
    transform: translateX(-50%) translateY(50%) scale(0);
    width : 8px;
    height : 8px;
    background : #020039;
    border-radius: 50%;
    transition : transform .3s;
}
.unit-btn-box > li.on{
    border-color : #020039;
    color : #020039
}
.unit-btn-box > li.on::after{
    transform: translateX(-50%) translateY(50%) scale(1);
}
.unit-slide{
    width : 492px;
    height : 643px;
    position : relative;
}
.unit-slide::before{
    position : absolute;
    content: '';
    width : 100%;
    height : 492px;
    bottom : 0;
    border-radius: 50%;
    background : rgba(255,255,255,0.35);
}
.unit-slide .swiper-slide{
    display: flex;
    /* align-items: center; */
    justify-content: center;
    position : relative;
}
.unit-slide-title{
    text-align: center;
}
.unit-slide-title > h3{
    font-size: 59px;
    font-family: futura-pt-bold;
    color : #020039;
}
.unit-slide-title > p{
    color : #2B2B2B;
    font-size: 20px;
}
.unit-img-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width : 100%;
    height : 492px;
    position : absolute;
    bottom : 0;
    left : 0;
}
.unit-img-box > img{
    flex-shrink: 0;
    mix-blend-mode: darken;
}
/**/
.main-section-schedule{
    background : url(../images/main/schedule-bg.jpg)no-repeat left bottom;
    background-size: cover;
}
.main-section-schedule .fp-tableCell{
    display: flex;
    justify-content: center;
}
.schedule-inner{
    display: flex;
    justify-content: space-between;
    width : 1600px;
    padding-top : 223px;
}
.schedule-left{
}
.schedule-title{
    font-size: 101px;
    color : transparent;
    -webkit-text-stroke: 1px #020039;
    font-family: futura-pt-bold;
    line-height: 1em;
    margin-bottom: 30px;

    transform: translateX(-100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .schedule-title{
    transform: translateX(0);
    opacity: 1;
    transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.schedule-desc{
    font-size: 16px;
    letter-spacing: -0.04em;
    color : #272727;
    margin-bottom: 74px;
    transform: translateX(-100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .schedule-desc{
    transform: translateX(0);
    opacity: 1;
    transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.schedule-link-box{
    width :410px;
    transform: translateY(100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .schedule-link-box{
    transform: translateX(0);
    opacity: 1;
    transition : transform 1.2s 1s, opacity 1.2s 1s;
}
.schedule-link-box > li{
    border-bottom : 1px solid rgba(77,77,77,0.4);
}
.schedule-link-box > li > a{
    display: flex;
    justify-content: space-between;
    padding : 11px 0;
    color : #313131;
    letter-spacing: -0.04em;
    font-weight: 700;
}
.schedule-link-box > li > a > span{
    display: flex;
    align-items: center;
    letter-spacing: 0.25em;
    font-family: montserrat;
    font-weight: 500;
    font-size: 13px;
    position : relative;
    color : #343434;
    padding-right: 30px;
    opacity : 0;
    transform: translateX(-50px);
    transition: opacity .5s, transform .5s;
}
.schedule-link-box > li:hover > a > span{
    opacity: 1;
    transform: translateX(0);
}
.schedule-link-box > li > a > span::after{
    position : absolute;
    content: '';
    right : 0;
    width : 5px;
    height : 5px;
    border-top : 1px solid #343434;
    border-right : 1px solid #343434;
    transform: rotate(45deg);
}
.schedule-link-box > li + li{
    margin-top: 15px;
}
.schedule-right{
    width : 794px;
}
.calendar-box{
    position : relative;
    transform: translateX(100px);
    opacity: 0;
    transition : transform 1.2s, opacity 1.2s;
}
.active .calendar-box{
    transform: translateX(0);
    opacity: 1;
    transition : transform 1.2s .5s, opacity 1.2s .5s;
}
.calendar{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto;
    gap: 15px;
}
.calendar > li:nth-child(1){
    grid-column: span 3;
}
.calendar > li:nth-child(2){
    grid-column: span 3;
}
.calendar > li{
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background : #fff;
    padding : 40px 0;
    transition : color .3s, background .3s;
}
.calendar > li .day{
    align-items: center;
    font-size: 22px;
    letter-spacing: -0.04em;   
    color : #272727;
    margin-bottom: 10px;
}
.calendar > li:hover > .day{
    color : #fff;
}
.calendar > li .day > b{
    font-size: 37px;
    font-family: futura-pt;
    font-weight: 500;
}
.calendar > li .name{
    font-size: 19px;
    letter-spacing: -0.04em;
    color : #272727;
    line-height: 25px;
    text-align: center;
}
.calendar > li:hover .name{
    color : #fff;
}
.calendar > li .point{
    font-size: 32px;
    color : #53A7AF;
    font-family: futura-pt-bold;
    letter-spacing: -0.04em;
    margin-top: 3px;
}
.calendar > li:hover{
    background : #020039;
    color : #fff;
}
.schedule-rotate-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    position : absolute;
    right : 0;
    top : 0;
    width : 86px;
    height : 86px;
    border-radius: 50%;
    background : #53A7AF;
    color : #fff;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    z-index: 1;
    transform: translateX(50%) translateY(-50%);
}
.schedule-rotate-btn::after{
    position: absolute;
    content: '';
    width : 112px;
    height : 112px;
    background : url(../images/main/community-rotate-text.png)no-repeat center;
    background-size: contain;
    animation : rotate-text 6s infinite linear;
}