.scroll{display: flex;flex-direction: column;align-items: center;gap : 12px; position :fixed; left : 60px; bottom : 47px; z-index: 10; transition :.5s; pointer-events : none;;
	&.hide{opacity : 0;}
    &.dark{
        & > p{color : #000}
        .mouse{border-color : #000;
            &::after{background: #000;}
        }
    }
}
.scroll > p{font-family: montserrat; color : #fff; font-weight: 700; font-size: 13px; writing-mode: vertical-lr; transition : .5s;}
.scroll .mouse{display: flex; justify-content: center; width : 24px; height : 42px; border : 1px solid #fff; border-radius: 100px; position :relative; transition : .5s;
    &::after{position :absolute; content : ''; width : 4px; height: 4px; border-radius: 50%; background: #99BFEF; top : 12px; animation : mouse 1.2s infinite ease-in-out; transition : .5s;}
}
@keyframes mouse {
    100%{transform: translateY(14px);}
}

@keyframes rotate-text {
    100%{transform: rotate(-360deg);}
}

.skip-btn{display: flex;align-items: center;justify-content: center; position : absolute; font-family: jost; background: #8E0018; width : 70px; height : 70px; top : 50%; left : 50%;z-index: 1000; transform: translateX(-50%) translateY(-50%) scale(0); border-radius: 50%; color : #fff; letter-spacing: 0.1em; font-weight: 600; font-size: 16px; transition : transform .5s;}
.skip-btn.on{transform: translateX(-50%) translateY(-50%) scale(1);}

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

.section{overflow: hidden;}
#intro{position : absolute; left : 0;top : 0; z-index: 1; width : 100%; height : 100%; background: #F7F8F8;}
#intro > div{position : absolute; left : 0;top : 0; width : 100%; height : 100%; transition : 2s;
    &.intro-01{display: flex;align-items: center;justify-content: center; gap : 17px}
    &.intro-02{display: flex;align-items: center;justify-content: center; transform: translateX(100%);}
    &.intro-03{display: flex;align-items: center;justify-content: center;flex-direction: column; gap : 36px; transform: translateX(100%); transition : transform 2s, opacity 1s 1s, gap 2s; opacity: 0;}
}
/* intro-01 */
.intro-01-logo-01{opacity: 0; transition : 1.4s}
.intro-01-logo-02{transform: translateY(20%); opacity: 0; transition : 1.4s}
.intro-01-line{width : 0px; height : 1px; background: #939393; transition : 1.4s; transform: translateY(5px); opacity: 0;}

/* intro-02 */
.intro-img-list{display: flex;align-items: center;justify-content: center; gap : 87px;}
.intro-img-list > li{position : relative;}
.intro-rotate-btn{display: flex;align-items: center;justify-content: center; position : absolute; width : 166px; height : 166px; left : 0; top : 0; transform: translateX(-60%) translateY(-60%) scale(0.5); z-index: 1; opacity: 0; transition :1.4s;
    &::after{position :absolute; content : ''; width : 100%; height : 100%; background: url(/assets/images/main/intro-rotate-text.png)no-repeat center / contain; animation : rotate-text 8s infinite linear;}
}
.intro-img-desc{position : absolute; left : calc(100% + 13px); white-space: nowrap; writing-mode: vertical-lr; font-size: 20px; font-weight: 300; letter-spacing: 0.1em; top : 0;
    b{font-weight: 700; color : #8E0018}
    .char{opacity: 0; transition : 1s}
}
.intro-img-list > li:nth-child(2) .intro-img-desc{top : auto; bottom : 0;}

.intro-img-inner{overflow: hidden;
    img{transform: scale(1.25); transition : 3s; opacity: 0; opacity: transform 3s, opacity 1s;}
}

/* intro-03 */
.intro-03-desc{font-size: 20px; letter-spacing: -0.03em; color : #2E2E2E; font-weight: 300;
    b{font-weight: 800;}
    .char{opacity: 0; transition : 1s}
}

#intro.t1{
    .intro-01-logo-01{opacity: 1;}
    .intro-01-line{width : 458px; opacity: 1;}
    .intro-01-logo-02{opacity: 1;}
}
#intro.t2{
    .intro-01{transform: translateX(-100%);}
    .intro-02{transform: translateX(0);}
    .intro-img-list > li{
        &:nth-child(1){transform: translateY(60px); transition : 2s;}
        &:nth-child(2){transform: translateY(-60px); transition : 2s;}
        &:nth-child(3){transform: translateY(60px); transition : 2s;}
    }
    .intro-img-inner > img{opacity: 1; transform: scale(1);}
    .intro-img-desc .char{opacity: 1; transition : 1s calc(var(--i) * 0.1s + 1s)}
    .intro-rotate-btn{transform: translateX(-60%) translateY(-60%) scale(1); opacity: 1;}
}
#intro.t3{
    .intro-02{transform: translateX(-100%);}
    .intro-03{transform: translateX(0); opacity: 1;}
    .intro-03-desc .char{opacity: 1; transition : 1s calc(var(--i) * 0.07s + 1s)}
}
#intro.t4{
    .intro-03{gap : 568px;}
    & + .visual-container{clip-path: inset(calc(50% - 208px) calc(50% - 8px)); transform: translateY(36px);}
}
#intro.t5{
    .intro-03{gap : 1000px; opacity: 0;}
    & + .visual-container{clip-path: inset(0); transform: translateY(0px);
        .visual-bg > img{transform: scale(1);}
        .visual-tit .char{opacity: 1; transition : 1s calc(var(--i) * 0.07s + .4s)}
        .visual-logo{transform: translateY(0); opacity: 1; transition : 1.4s 1.4s;}
    }
}

.visual-container{display: flex;align-items: start;justify-content: center; position : absolute; left : 0;top : 0; width : 100%; height : 100%;z-index: 1;clip-path: inset(50% calc(50% - 8px)); transition : 2s; padding-top: 171px;}
.visual-bg{position : absolute; left : 0;top : 0; overflow: hidden; width : 100%; height : 100%;
    img{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.25); transition : 5s;}
}
.visual-tit-box{position : relative; text-align: center;}
.visual-tit{font-size: 54px; letter-spacing: -0.03em; font-weight: 300; color : #fff; margin-bottom: 30px;
    b{font-weight: 700;}
    .char{opacity: 0; transition : 1s;}
}
.visual-logo{font-size: 25px; font-weight: 700; letter-spacing: -0.03em; color : #fff; transform: translateY(50px); opacity: 0; transition : 1.4s;}

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

/*  */
.main-premium{background: url(/assets/images/main/premium-bg.jpg) no-repeat center / cover;}

.premium-container{display: flex;align-items: center;justify-content: center; width : 100%;height : 100%;}
.premium-slide{display: flex;align-items: center; width : 468px; height : 661px; position : relative;}
.premium-slide .swiper-slide{transform: scale(0.7); opacity: 0; transition : transform 1.4s, opacity 1s, filter 1s; filter: grayscale(1);
    &.swiper-slide-next{opacity: 1;}
}

@property --deg {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.premium-img{display: flex;align-items: center;justify-content: center; width : 100%;height : 100%; position : relative;
    &::after{position : absolute; content : ''; width : 100%; height : 100%; border-radius: 300px; border : 1px solid #707070; transform: scale(1.05); mask-image:conic-gradient(from 0deg,#000 0deg,var(--deg),transparent 0); transition : --deg 1.4s}
}
.premium-img-inner{width : 100%;height : 100%; overflow: hidden; border-radius: 300px;
    &.img-cut::after{position :absolute; content : '이미지컷'; color : #fff; bottom : 21px; left : 50%; transform: translateX(-50%); font-size: 17px; letter-spacing: -0.04em;}
}
.premium-img-inner > img{width : 100%; height : 100%; object-fit: cover; object-position: center;}

.premium-con{position : absolute; left : -452px; top : 247px; transition :1s; opacity: 0;}
.premium-con-num{font-family: jost; font-size: 17px; font-weight: 500; margin-bottom: 0; margin-bottom: 10px; text-transform: uppercase;}
.premium-con-tit{font-family: jost; font-size: 40px; font-weight: 600; margin-bottom: 84px; text-transform: uppercase;
    .char{opacity: 0; transition : 1s;}
}
.premium-con-tit-kor{font-size: 22px; letter-spacing: -0.04em; font-weight: 400; margin-bottom: 32px; transform: translateY(50px); opacity: 0; transition : 1s;}
.premium-con-desc{font-size: 17px; letter-spacing: -0.04em; font-weight: 500; color : #545454; line-height: 1.5em; transform: translateY(50px); opacity: 0; transition : 1s;}

.premium-rotate-btn{display: flex;align-items: center;justify-content: center; position : absolute; width : 88px; height : 88px; background: #971934; right : calc(100% + 87px); top : 64px; transform: scale(1); z-index: 1; transition :1.4s; border-radius: 50%; transform: scale(0.5); opacity: 0; transition : 0s 1.4s;
    &::after{position :absolute; content : ''; width : 121px; height : 121px; background: url(/assets/images/main/premium-rotate-text.png)no-repeat center / contain; animation : rotate-text 8s infinite linear;}
    img{transition : .5s}
    &:hover img{transform: translateX(10px);}
}

.premium-navigation{display: flex;align-items: center; position : absolute; display: flex; align-items: center; gap : 35px; left : calc(100% + 152px); z-index: 1; transform: translateY(50px); opacity: 0; transition : 0s 1.4s;
    & > div{display: flex;align-items: center;justify-content: center; width : 71px; height : 71px; border : 2px solid #A13047; border-radius: 50%; cursor: pointer;
        &::after{position : absolute; content : ''; width : 16px; height : 16px; border-top: 2px solid #A13047; border-left: 2px solid #A13047; transform: rotate(-45deg);}
        &.premium-next::after{transform: rotate(135deg);}

        &.premium-prev{padding-left: 6px;}
        &.premium-next{padding-right: 6px;}

        &.swiper-button-disabled{filter: grayscale(1) opacity(0.3); pointer-events: none;}
    }
}

.premium-tit-box{white-space: nowrap; position : absolute; left : calc(100% + 128px); bottom : -24px; text-align: center; z-index: 1;}
.premium-tit{font-family: jost; position : relative; margin-bottom: 10px;
    p{font-size: 72px; font-weight: 500;
        .char{opacity: 0; transition : 0s 1.4s;}
    }
    span{font-family: AV; font-weight: 700; font-size: 55px; position : absolute; transform: translateY(60px) translateX(-100px) rotate(-15deg); left : -100px; bottom : 80%; opacity: 0; transition : 0s 1.4s;}
}
.premium-desc{font-size: 17px; letter-spacing: -0.04em; transform: translateY(50px); opacity: 0; transition : 0s 1.4s}

.active{
    .premium-slide{
        .swiper-slide-active{transform: scale(1); opacity: 1; filter: grayscale(0);
            .premium-img::after{--deg : 360deg;}
            .premium-con{opacity: 1;}
            .premium-con-tit .char{opacity: 1; transition : 1s calc(var(--i) * 0.07s + .4s)}
            .premium-con-tit-kor{transform: translateY(0); opacity: 1; transition : 1s 0.8s;}
            .premium-con-desc{transform: translateY(0); opacity: 1; transition : 1s 1s;}
        }
    }
    .premium-rotate-btn{transform: scale(1); opacity: 1; transition : 1.4s .4s;}
    .premium-navigation{transform: translateY(0); opacity: 1; transition : 1.4s .4s;}
    .premium-desc{transform: translateY(0); opacity: 1; transition : 1.4s 1.4s;}
    .premium-tit p .char{opacity: 1; transition : 1s calc(var(--i) * 0.07s + .4s)}
    .premium-tit span{transform: translateY(0) translateX(0) rotate(-15deg); opacity: 1; transition : 1.4s 1.4s;}
}

/*  */
.map-bg{position : absolute; width : 100%; height : 100%; left : 0;top : 0; overflow: hidden; background: #F7F8F8;
    img{width : 100%; height : 100%; object-fit: cover; object-position: right bottom; transform: translateX(50%); transition : 0s 1.4s;}
}
.map-tit-box{display: flex;flex-direction: column;align-items: center;justify-content: flex-end; width : 33.4896%; position : relative; height : 100%; text-align: center; letter-spacing: -0.04em; padding-bottom: 20px;}
.map-desc{font-size: 17px; line-height: 1.5em; margin-bottom: 26px; transform: translateY(50px); opacity: 0; transition : 0s 1.4s;}
.map-desc02{font-size: 21px; line-height: 1.5em; margin-bottom: 26px; transform: translateY(50px); opacity: 0; transition : 0s 1.4s;}
.map-tit{font-size: 36px; font-weight: 700; color : #971934; line-height: 1.4em; margin-bottom: 58px; transform: translateY(50px); opacity: 0; transition : 0s 1.4s;
    .char{opacity: 0; transition : 0s 1.4s;}
}
.map-btn{display: flex;flex-direction: column;align-items: center;justify-content: center; width : 82px; height : 82px; border-radius: 50%; background: #000; color : #fff; font-size: 16px; font-weight: 600; gap : 6px; padding-top: 6px; transform: translateY(50px); opacity: 0; transition : 0s 1.4s;
    span{display: flex;align-items: center;justify-content: center; width : 21px;height : 21px; position : relative; transition : .5s;
        &::after{position : absolute; content : ''; width : 1px; height : 100%; background: #fff;}
        &::before{position : absolute; content : ''; width : 100%; height : 1px; background: #fff;}
    }
    &:hover span{transform: rotate(90deg);}
}

.map-img01 { margin: 70px 0 30px; transform: translateY(50px); opacity: 0; transition : 0s 1.4s; }
.map-img02 { margin: 30px 0; transform: translateY(50px); opacity: 0; transition : 0s 1.4s; }

.map-subway{position :absolute; left : 32.0417%; bottom : 0; transform: translateY(100%); transition : 0s 1.4s;}

.active{
    .map-bg img{transform: translateX(0); transition : 2s;}
    .map-desc{transform: translateY(0); opacity: 1; transition : 1.4s .4s;}
    .map-tit{transform: translateY(0); opacity: 1; transition : 1.4s .6s;
        .char{opacity: 1; transition : 1s calc(var(--i) * 0.07s + .4s)}
    }
    .map-btn{transform: translateY(0); opacity: 1; transition : 1.4s .8s;}
    .map-img01{transform: translateY(0); opacity: 1; transition : 1.4s 1s;}
    .map-desc02{transform: translateY(0); opacity: 1; transition : 1.4s 1.2s;}
    .map-img02{transform: translateY(0); opacity: 1; transition : 1.4s 1.4s;}
    .map-subway{transform: translateY(0); transition : 2s;}
}

/*  */
.main-brand{background: #F7F8F8;}
.brand-inner{display: grid; grid-template-columns: repeat(2,1fr); width : 100%; height : 100%;
    & > div{padding-top: 24vh;}
}
.brand-left{display: flex;align-items: center;justify-content: start;flex-direction: column;}
.brand-tit-box{display: flex;flex-direction: column;align-items: center; text-align: center; margin-bottom: 86px;}

.brand-sub-tit{font-size: 25px; letter-spacing: -0.04em; margin-bottom: 21px; font-weight: 400; transform: translateY(50px); opacity: 0; transition :0s 1.4s;
    b{color : #A00B2D}
}
.brand-tit{margin-bottom: 45px; transform: translateY(50px); opacity: 0; transition :0s 1.4s;}
.brand-desc{font-size: 22px; letter-spacing: -0.04em; color : #202020; line-height: 1.4em; transform: translateY(50px); opacity: 0; transition :0s 1.4s;}

.brand-award{display: flex;gap : 100px; text-align: center;}
.brand-award > li{display: flex;flex-direction: column;align-items: center; transform: translateY(50px); opacity: 0; transition : 0s 1.4s;}
.brand-award-img{display: flex;justify-content: center; align-items: end; width : 138px; height : 80px; margin-bottom: 17px;}
.brand-award-tit{ padding-top: 17px; font-size: 13px; line-height: 1.5em; letter-spacing: -0.04em; font-weight: 700; position : relative; margin-bottom: 14px;
    b{font-weight: 700; color : #9F0B2D}
    &::after{position : absolute; content :''; width : 30px; height : 1px; background: rgba(0,0,0,0.2); left : 50%; transform: translateX(-50%); top : 0;}
}
.brand-award-desc{font-size: 12px; letter-spacing: -0.04em; line-height: 1.5em; color : #282828;}


.brand-right{display: flex;align-items: center;justify-content: start;flex-direction: column; background: url(/assets/images/main/brand-bg.jpg)no-repeat center / cover;}

.brand-work-tit-box{text-align: center; margin-bottom: 21px;}
.brand-work-desc{font-size: 25px; letter-spacing: -0.04em; margin-bottom: 21px; font-weight: 400; transform: translateY(50px); opacity: 0; transition :0s 1.4s;
    b{color : #8D6F4E}
}
.brand-work-tit{font-family: jost; font-size: 75px; letter-spacing: -0.013em; font-weight: 200; transform: translateY(50px); opacity: 0; transition :0s 1.4s;
    b{font-weight: 800; color : #8D6F4E}
    .char{opacity: 0; transition :0s 1.4s;}
}

.brand-work{display: grid; grid-template-columns: repeat(3, 1fr); gap : 14px; text-align: center;}
.brand-work > li{transform: translateY(50px); opacity: 0; transition : 0s 1.4s;}
.brand-work-img{position : relative;z-index: 1;}
.brand-work-name{display: flex;align-items: center;justify-content: center; background: #000; color : #fff; height : 30px; font-size: 13px; letter-spacing:-0.04em; font-weight: 500; transform: translateY(-100%); transition : 0s 1.4s;}


.active{
    .brand-sub-tit{transform: translateY(0); opacity: 1; transition : 1.4s .4s;}
    .brand-tit{transform: translateY(0); opacity: 1; transition : 1.4s .6s;}
    .brand-desc{transform: translateY(0); opacity: 1; transition : 1.4s .8s;}

    .brand-work-desc{transform: translateY(0); opacity: 1; transition : 1.4s .4s;}
    .brand-work-tit{transform: translateY(0); opacity: 1; transition : 1.4s .6s;}
    .brand-work-tit .char{opacity: 1; transition : 1s calc(var(--i) * 0.07s + .6s)}

    .brand-award > li{transform: translateY(0); opacity: 1;
        &:nth-child(1){transition : 1.4s 1s;}
        &:nth-child(2){transition : 1.4s 1.2s;}
        &:nth-child(3){transition : 1.4s 1.4s;}
    }
    .brand-work > li{transform: translateY(0); opacity: 1;
        &:nth-child(1){transition : 1.4s 1s;
            .brand-work-name{transition : 1.4s 1s;}
        }
        &:nth-child(2){transition : 1.4s 1.2s;
            .brand-work-name{transition : 1.4s 1.2s;}
        }
        &:nth-child(3){transition : 1.4s 1.4s;
            .brand-work-name{transition : 1.4s 1.4s;}
        }
        &:nth-child(4){transition : 1.4s 1.6s;
            .brand-work-name{transition : 1.4s 1.6s;}
        }
        &:nth-child(5){transition : 1.4s 1.8s;
            .brand-work-name{transition : 1.4s 1.8s;}
        }
        &:nth-child(6){transition : 1.4s 2s;
            .brand-work-name{transition : 1.4s 2s;}
        }
    }
    .brand-work-name{transform: translateY(0);}
}
/*  */

.contact-bg{width : 100%; height : 100%; position : absolute; left : 0;top : 0; overflow: hidden; background: #F7F8F8;
    img{width : 100%; height : 100%; object-fit: cover; object-position: right bottom; transform: scale(1.25); transition : 0s 1.4s;}
}

.contact-tit-box { position: relative; width: 100%; margin: auto; text-align: center; z-index: 100; }

.contact-inner{display: flex;align-items: center; justify-content: center; position : relative; gap : 50px;}
.contact-left{width : 464px; transform: translateX(-160px); opacity: 0; transition : 0s 1.4s;}
.contact-tit{font-family: jost; font-size: 65px; font-weight: 500; color : #8E0018; margin-bottom: 16px;
    .char{opacity: 0; transition : 0s 1.4s;}
}
.contact-addr { display: flex; }
.contact-desc{font-size: 17px; letter-spacing: -0.04em; margin-bottom: 51px;
	.char{opacity: 0; transition : 0s 1.4s;}
}
.contact-unit{font-size: 17px; letter-spacing: -0.04em; font-weight: 500; margin-bottom: 85px;}
.contact-address{padding-top: 15px; width : 100%; position : relative; letter-spacing: -0.04em; margin-bottom: 15px; line-height: 22px;
    /* &::after{position : absolute; content : ''; width : 100%; height : 1px; background: #727171; top : 0; left : 0; clip-path: inset(0 100% 0 0); transition : 0s 1.4s;} */
    span{display: block; font-size: 25px; font-weight: 500; margin-bottom: 12px;}
}
.contact-btn-box{display: flex;align-items: center; gap : 10px}
.contact-btn-box > a{display: flex;align-items: center;gap : 11px; font-size: 17px; font-weight: 500; letter-spacing: -0.04em;}

.map-img { border : 1px solid #8E0018; }
.map-img p { background: #8E0018; color: #fff; font-size: 20px; font-weight: 500; text-align: center; padding: 10px; }

.contact-right{width : 464px; transform: translateX(160px); opacity: 0; transition : 0s 1.4s;}

.fp-active{
    .contact-left{transform: translateX(0); opacity: 1; transition : 1.4s .4s;}
    .contact-right{transform: translateX(0); opacity: 1; transition : 1.4s .4s;}
    .contact-tit .char{opacity: 1; transition : 1s calc(var(--i) * 0.07s + .4s)}
    .contact-desc .char{opacity: 1; transition : 1s calc(var(--i) * 0.07s + .4s)}
    .contact-address::after{clip-path: inset(0); transition : 1.4s .4s;}
}