@charset "utf-8";

.inner {position:relative;max-width:1656px;width:100%;padding:0 51.5px; margin:0 auto;}
.mTit {padding-bottom:20px;border-bottom:1px solid var(--gray2); font-size:53px;font-weight: 600;}
.typeMain #contents {background:var(--bgWhite);transition:.2s background-color} 
.typeMain #contents>div {position: relative;background:var(--bgWhite);transition:.2s background-color}
.typeMain #contents>div:last-child {padding-bottom: 120px;}

.swiperBtnArea {position:absolute;display:flex;right:51.5px;top:23px;}
.swiperBtnArea .btnPrev {position:relative;display:flex;width:38px;height:31px;background:url(../img/main/btn_slideL.svg) no-repeat center;}
.swiperBtnArea .btnNext {margin-left:29px;position:relative;display:flex;width:38px;height:31px;background:url(../img/main/btn_slideR.svg) no-repeat center;}

/* main Collect */
.typeMain #container {overflow: visible;}
.stickyFix .mainCollection {top:30px;}
.mainCollection {position:sticky !important;left:0;top:112px;width:100%;background:var(--bgWhite);transition:.3s top, .3s background-color !important;opacity: 1;contain: paint;}
.mainCollection.hide {opacity: 0;}
.mainCollection .inner {max-width: 100%;padding:0;}

.collectTab {max-width:1656px;width:100%;padding:0 51.5px; margin:0 auto;margin-bottom: 12px;}
.collectTab>ul {display:flex;}
.collectTab>ul>li {margin-right:22px;}
.collectTab>ul>li>a {position:relative;display:block;font-size:23px;font-weight: 500;color:var(--gray3);transition:.2s all;}
.collectTab>ul>li.on>a,
.collectTab>ul>li:hover>a {color:var(--black);font-weight: 600;}
.collectTab>ul>li>a:before {content:'';display:inline-block;width:0;height:0;background:var(--orange3);border-radius: 50%;opacity: 0;transition:.2s all;vertical-align: top;margin-top: 10px;margin-right: 8px;transform-origin: center;}
.collectTab>ul>li.on>a:before,
.collectTab>ul>li:hover>a:before {opacity: 1;width:12px;height:12px;}

.mainCollection .contTab {display:none;}
.mainCollection .contTab.on {display:block;}

.mCollectSwiper .item {width:100%;/*height:740px;*/height: calc(100vh - 155px);overflow: hidden;}
.mCollectSwiper .item>a {position:relative;display:block;width:100%;height:100%;}
.mCollectSwiper .item .thum {max-width: 1553px;width:100%;height:100%;font-size: 0;margin:0 auto;background:#000;}
.mCollectSwiper .item .thum .m_img {display:none;}
.mCollectSwiper .item .thum>img {width:100%;height:100%;object-fit: cover;}
.mCollectSwiper .item .txtWrap {position:absolute;width:100%;max-width: 1553px;bottom:0;left:50%;transform: translateX(-50%);padding:72px 47px;z-index: 1;}
.mCollectSwiper .item .txtWrap .txtB {font-family: 'oswald', 'Pretendard', sans-serif;font-size: 135px;color:#fff;line-height: 140px;letter-spacing: 2px;overflow: hidden;}
.mCollectSwiper .item .txtWrap .txtB span {font-size: inherit;font-weight: inherit;line-height: inherit;}
.mCollectSwiper .item .txtWrap .txtS {margin-top:35px;padding-top:35px;padding-right:200px;font-size:20px;color:#fff;line-height: 36px;border-top:1px solid rgba(255,255,255,0.2)}


.mCollectSwiper .item .txtWrap .txtB .char {left:100px;opacity:0;}

.ani .mCollectSwiper .item.swiper-slide-active .txtWrap .txtB .char {
    display: inline-block;
    animation: slide-up .7s cubic-bezier(.10, 0, .10, 1) both; 
    animation-delay: calc(40ms * var(--char-index));
}


@keyframes slide-up {
    0% {
        left:100px;
        opacity: 0;
    }
    100% {
        left:0px;
        opacity: 1;
    }
}


.collectCont {position:relative}
.collectCont .swiperBtnArea {position:absolute;width:100%;max-width: 1553px;bottom:0;left:50%;transform: translateX(-50%);display:flex;top:auto;bottom:72px;z-index: 2;    justify-content: flex-end;padding-right: 47px;}
.collectCont .swiperBtnArea button {position:relative;display:flex;width:38px;height:31px;background:url(../img/main/btn_slideL_white.svg) no-repeat center;}
.collectCont .swiperBtnArea button.btnNext {margin-left:0;background-image:url(../img/main/btn_slideR_white.svg)}
.collectCont .swiperBtnArea .swiper-pagination {position:relative;margin:0 20px;}
.collectCont .swiperBtnArea .swiper-pagination .swiper-pagination-bullet {width:5px;height:5px;background:transparent;border:1px solid #fff;opacity: 1;}
.collectCont .swiperBtnArea .swiper-pagination .swiper-pagination-bullet-active {background-color: #fff;}
.collectCont .swiperBtnArea .swiper-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {margin-left:7px;}
/* .collectCont .swiperBtnArea button.btnNext:before {content:'';position:absolute;left:-46px;top:12px;display:block;width:29px;height:5px;background:url(../img/main/btn_slide_dot.svg) no-repeat center;}  */

/* New Asset */
.mNewAsset {margin-top:0;}
.mNewAsset .mTit {padding-top:50px;}
.mNewAsset .mNewSwiper {padding:60px 0;}
.mNewAsset .mNewSwiper .item {height:684px;transform: scale(0.76);transform-origin: center;transition:.5s all;max-width: 2560px;margin:0 auto;}
.mNewAsset .mNewSwiper .item.swiper-slide-prev {transform-origin: left;}
.mNewAsset .mNewSwiper .item.swiper-slide-next {transform-origin: right;}
.mNewAsset .mNewSwiper .item.swiper-slide-active {transform: scale(1);}
.mNewAsset .mNewSwiper .item .thum {position:relative;width:100%;height: 100%;font-size: 0;overflow: hidden;transition:.7s all;}
.mNewAsset .mNewSwiper .item .thum:after {content:'';position:absolute;left:0;bottom:0;display:block;width:100%;height:100%;background:url(../img/main/dim_newAsset.png) no-repeat bottom 0 left 0;background-size: cover;}
.mNewAsset .mNewSwiper .item .thum img {width:100%;height: 100%;object-fit: cover;transition:.7s all;}
.mNewAsset .mNewSwiper .item>a {position: relative;display:block;width:100%;height:100%;overflow: hidden;}
.mNewAsset .mNewSwiper .item .txt {position:absolute;padding:30px;left:0;bottom:0;font-size:36px;color:#fff;font-weight: 600;transition:filter .7s;}

.overInfo {position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items: center;justify-content: center;flex-direction: column;z-index: 1;}
.overInfo .icoArr {position:relative;display:block;width:50px;height:50px;margin-bottom:20px;border:1px solid #fff;border-radius: 50%;}
.overInfo .icoArr:before {content:'';position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);display:block;width:14px;height:10px;background:url(../img/main/ico_over_arrR.svg) no-repeat center;}
.overInfo {opacity: 0;visibility: hidden;transition:.5s all;}
.overInfo span {display:block;font-size:16px;font-weight: 300;line-height: 26px;color:#fff;}
.overInfo span em {font-size:inherit;font-weight: inherit;line-height: inherit;font-style: normal;}

.mNewSwiper .item:hover .txt {filter:blur(8px)}
.mNewSwiper .item:hover .thum {filter: blur(8px);transform: scale(1.1);}
.mNewSwiper .item:hover .overInfo {opacity: 1;visibility: visible;}
.mNewSwiper .item:hover:before {content:'';display:block;position:absolute;left:0;top:0;width: 100%;height:100%;background: rgba(0,0,0,0.2);}

.mNewAsset .swiperBtnArea {position:absolute;right:51.5px;top:80px;}

.mNewAsset .swiper-pagination {position:relative;margin-top:35px;}
.mNewAsset .swiper-pagination .swiper-pagination-bullet {opacity: 1 !important;transition:.2s all;width:80px;height:3px;background:var(--gray2);border-radius: 0;}
.mNewAsset .swiper-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {margin-left:10px;}
.mNewAsset .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: var(--black);}


/* Asset Swiper */
.assetSwiper {margin-top:40px;}
.assetSwiper .thum {position:relative;font-size: 0;overflow: hidden;}
.assetSwiper .thum::after{content:"";padding-top:102.098%;display:block;width:100%;}
.assetSwiper .thum img {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;max-width:unset;object-fit: cover;transition:.6s transform, .6s filter}
.assetSwiper .txt {margin-top:15px;font-size:21px;font-weight: 500;}

.assetSwiper .item:hover .thum {position:relative;transition:.6s all;overflow: hidden;}
.assetSwiper .item:hover .thum img {filter: blur(8px);transform: translate(-50%,-50%) scale(1.1);}
.assetSwiper .item:hover .overInfo {opacity: 1;visibility: visible;}
.assetSwiper .item:hover .thum:before {content:'';display:block;position:absolute;left:0;top:0;width: 100%;height:100%;background: rgba(0,0,0,0.2);}

.mProps {padding-top:100px;background:#fff;}
.mEnvironments {padding-top:100px;background:#fff;}


/* Dark Mode */
body[data-theme='dark-mode'] div:not(.mainCollection) .swiperBtnArea .btnPrev {background-image:url(../img/main/btn_slideL_white.svg);}
body[data-theme='dark-mode'] div:not(.mainCollection) .swiperBtnArea .btnNext {background-image:url(../img/main/btn_slideR_white.svg);}



/* loading */
.disable-scroll {overflow: hidden;}

.loading {position: fixed;top: 0;left: 0;display:flex;flex-direction:column;width: 100%;height: 100vh;height:100dvh;overflow: hidden;background: #111;z-index: 99999;overflow: hidden;}
.loading .imgArea {max-width: 338px;margin: 0 auto;flex:1;display:flex;justify-content: center;flex-direction: column;}
.loading .imgArea .piece3 {padding-top: 45px;}
.progress {position: relative;width: 100%;height: 1px;background: rgba(255, 255, 255, 0.15);}
.progress .progress-bar {position: absolute;top: 0px;left: 0px;height: 1px;background: #fff;}
.progress span{position: absolute;right: 60px;top: 30px;font-size: 16px;color: #fff;}
.loading .txtArea {margin-top: 30px;padding: 0 60px;text-align: center;padding-bottom: 102px;}
.loading .txtArea p {position:relative;display: inline-block;vertical-align: top;color: #fff;text-align: left;left:-30px;}
.loading .txtArea p.f_txt {float: left;position: relative;padding-left: 22px;font-size: 16px;}
.loading .txtArea p.f_txt::before {content: '';position: absolute;top: 3px;left: 0;width: 12px;height: 12px;border-radius: 50%;background: #fff;}
.loading .txtArea p.c_txt {font-size: 26px;text-align: left;}
.loading .txtArea p.percent {font-size: 16px;}

.loading {transition: .5s top;transition-delay: .5s;transition-timing-function: ease-out;}
.loading .progressBar .bar {width: 0;transition: 3s;}
.loading.on .progressBar .bar {width: 100%;}

.loading .imgArea .piece {animation: leftMove 1.4s ease forwards;opacity: 0;}
.loading .imgArea .piece2 {animation: leftMove 1.4s ease forwards;animation-delay: 0.4s;opacity: 0;}
.loading .imgArea .piece3 {animation: leftMove 1.4s ease forwards;animation-delay: 0.6s;opacity: 0;}

.mainLoad .loading {top:-100%}
.loading.removeLoad {display:none;}

/* Animation  */
.mCollectSwiper {transform: translate(120%);transition:1s transform ease-out;transition-delay: .3s;}
.mainLoad .mCollectSwiper {transform: translate(0%);}

.mCollectSwiper .item .thum {overflow: hidden;}
.mCollectSwiper .item .thum>img {opacity: 0;transition:1.5s opacity ease, 2.5s transform ease;transition-delay: .7s;transform: scale(1.15);}
.mainLoad .mCollectSwiper .item .thum>img {opacity: 1;transform: scale(1);}

.mTit {opacity: 0;transform: translateY(200px);transition:.9s all ease-out }
.ani .mTit {opacity: 1;transform: translateY(0px);}

.assetSwiper  {opacity: 0;transform: translateY(200px);transition:.9s all ease-out, opacity 1.5s;}
.ani .assetSwiper  {opacity: 1;transform: translateY(0px);}


.assetSwiper .thum img {width:130%;height:130%;transition:.6s all;}
.ani .assetSwiper .thum img {width:100%;height:100%;}

.mNewAsset .mNewSwiper .item {position:relative;font-size: 0;}
.mNewAsset .mNewSwiper .item:before {content:'';display:block;position:absolute;left:-10px;top:-10px;width:calc(100% + 20px);height:calc(100% + 20px);background:#fff;z-index: 1;transition:.8s ease;transition-delay: .5s;}
.mNewAsset .mNewSwiper .swiper-slide-active.item:before  {transition-delay: .3s;}
.ani2.mNewAsset .mNewSwiper .item:before  {height:0}

@keyframes leftMove {
    0% {
        transform: translate(-200px);
        opacity: 0;
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}



.fixedUtill {max-width: 2560px;}
.mainCollection  {position:relative;top:112px;}
.mCollectSwiper .item {height:auto}

@media all and (max-width:1920px){
    .mainCollection {position:sticky;top:112px;}
    .mCollectSwiper .item {height:calc(100vh - 155px);}
}


@media all and (max-width:1670px){
    /* main Collect */
    .mCollectSwiper .item .thum {background:inherit}
    .mCollectSwiper .item .thum {padding:0 51.5px;}
    .mCollectSwiper .item .txtWrap .txtB {padding:0 51.5px;}
    .mCollectSwiper .item .txtWrap .txtS {position:relative;padding-left:51.5px;border-top:0;}
    .mCollectSwiper .item .txtWrap .txtS:before {content:'';position: absolute;left:51.5px;top:0;display:block;width:calc(100% - 102px);height: 1px;background:rgba(255,255,255,0.2);}
    .collectCont .swiperBtnArea {padding-right: 94.5px;}

    /* New Asset */
    .mNewAsset .mNewSwiper .item {height:580px;}
}

@media all and (max-width:1300px){
    .mNewAsset .mNewSwiper .item {height:450px;transform: scale(0.8);}
}

@media all and (max-width:1200px){
    .mNewAsset .mNewSwiper .item .txt {font-size: 25px;}
}


@media all and (max-width:1040px){
    .typeMain #container {overflow:hidden}

    .inner {padding:0 24px;}
    .mTit {padding-bottom:12px;font-size:40px;}
    
    .typeMain #contents>div:last-child {padding-bottom: 80px;;}
    .mProps {padding-top:80px;}
    .mEnvironments  {padding-top:80px;}

    .swiperBtnArea {right:24px;top:13px;}
    .swiperBtnArea .btnPrev {background-size: 30px auto !important;}
    .swiperBtnArea .btnNext {background-size: 30px auto !important;margin-left:20px;}

    /* main Collect */
    .mainCollection {position:relative !important;top:0;}
    .stickyFix .mainCollection {top:15px;}

    .collectTab {padding: 0 24px;}

    .mCollectSwiper .item {height:700px;}
    .mCollectSwiper .item .thum {padding:0 24px;}
    .mCollectSwiper .item .txtWrap {padding:50px;padding-bottom: 100px;}
    .mCollectSwiper .item .txtWrap .txtB {padding:0;font-size: 62px;line-height: 66px;}
    .mCollectSwiper .item .txtWrap .txtS {padding-left:0;padding-right:0;margin-top:18px;padding-top:18px;font-size:18px;line-height: 25px;}
    .mCollectSwiper .item .txtWrap .txtS:before {left:0;width:100%;}
    

    /* .collectTab>ul>li {margin-right: 10px;}
    .collectTab>ul>li>a {padding-left:17px;font-size:20px;}
    .collectTab>ul>li>a:before {top:10px;width:12px;height:12px;} */

    .collectTab>ul>li>a {font-size:20px;}
    
    .collectCont .swiperBtnArea {padding-right:0px;bottom:50px;justify-content: flex-start;padding-left:50px;right:auto;align-items: center;}
    .collectCont .swiperBtnArea .swiper-pagination {margin-top:-4px;}
    /* .collectCont .swiperBtnArea button.btnNext {margin-left:50px;} */
    /* .collectCont .swiperBtnArea button.btnNext:before {left:-39px;top:13px;} */


    /* New Asset */
    .mNewAsset .swiperBtnArea {right:24px;top:65px;} 
    .mNewAsset .mNewSwiper .item .txt {padding:20px;font-size: 24px;line-height: 28px;}
    .mNewAsset .mNewSwiper {padding:40px 0 80px 0;}

    /* Assets */
    .assetSwiper {margin-top:20px;}
    .assetSwiper .txt {margin-top:20px;}


    /* Loading */
    .loading .txtArea {padding-bottom: 50px;padding-left:30px;padding-right: 30px;}
    .loading .imgArea .piece1 {width:200px}
    .loading .imgArea .piece2 {width:200px}
    .loading .imgArea .piece3 {width:50px;padding-top:20px;}
    .loading .txtArea p.c_txt {font-size:18px;}
    .loading .txtArea p.f_txt {left:0;}
    .progress span {right:30px;}
}

@media all and (max-width:900px){
    .mNewAsset .mNewSwiper .item {height:350px;}
}

@media all and (max-width:768px){
    .inner {padding:0 20px;}

    .swiperBtnArea {right:20px;top:20px;}
    .swiperBtnArea .btnNext {margin-left:2px;}

    .overInfo {display:none;}
    

    /* Main collection */
    .stickyFix .mainCollection {top:0;}
    
    .mCollectSwiper .item {height:calc(100vh - 56px);height:calc(100dvh - 56px);}
    .mCollectSwiper .item .txtWrap {padding:40px 20px;padding-bottom: 100px;}
    .mCollectSwiper .item .thum {padding:0;}
    .mCollectSwiper .item .txtWrap .txtS {padding-top:26px;margin-top:26px;font-size:16px;}
    .mCollectSwiper .item .txtWrap .txtS {padding-right:100px;}

    .collectTab {height:70px;padding:0 20px;margin-bottom: 0;padding-bottom: 20px;display:flex;align-items: flex-end;padding-right: 0;}
    .collectTab>ul {display:block;white-space: nowrap;overflow-x: auto;padding-right: 20px;}
    .collectTab>ul>li {display:inline-block;vertical-align: top;margin-right: 12px;}
    .collectTab>ul>li.on>a:before {width:10px !important;height:10px !important;}

    .collectCont .swiperBtnArea {padding-left:20px;}
    .collectCont .swiperBtnArea button.btnNext:before {width:22px;background-size: 22px auto;}



    /* New Asset */
    .mNewSwiper {position:relative;overflow: visible !important;}
    .mNewSwiper::before {content:'';display: block;width:20px;height:100%;background:var(--bgWhite);position:absolute;left:-20px;top:0;}

    .mNewAsset .swiperBtnArea {right:20px;top:45px;}
    
    .mNewAsset .mTit {padding-top:30px;}


    .mNewAsset .mNewSwiper {padding-top:22px;}
    .mNewAsset .mNewSwiper .item {transform: scale(1);height:auto;overflow: hidden;}
    .mNewAsset .mNewSwiper .item .txt {padding:30px 20px;}
    
    .mNewAsset .swiper-pagination .swiper-pagination-bullet {width:50px;}

    .mNewSwiper .item:hover .txt {filter:blur(0px)}
    .mNewSwiper .item:hover .thum img {filter: blur(0px);transform: scale(1);}
    .mNewSwiper .item:hover .thum {filter: blur(0px);transform: scale(1);}
    .mNewSwiper .item:hover:before {display:none;}
    .mNewSwiper .item:before {display:none;}
    
    .mNewAsset .mNewSwiper .item:before {display:none;}
    
    .mNewAsset .mNewSwiper .item .thum img {transform: scale(1.2);transition:.6s all;}
    .ani.mNewAsset .mNewSwiper .item .thum img {transform: scale(1);}

    .mNewAsset .mNewSwiper {transform: translateY(200px);transition:.9s all ease-out, opacity 1.5s;opacity: 0;}
    .mNewAsset.ani .mNewSwiper {transform: translateY(0);opacity: 1;}

    /* asset */
    .assetSwiper {position:relative;overflow: visible !important;}
    .assetSwiper::before {content:'';display: block;width:20px;height:100%;background:var(--bgWhite);position:absolute;left:-20px;top:0;}

    .assetSwiper .txt {margin-top:12px;font-size: 18px;} 

    .assetSwiper .item:hover .thum img {filter: blur(0);transform: translate(-50%, -50%) scale(1);}

    
    /* loading */
    .loading .txtArea {padding-left:20px;padding-right: 20px;}
    .progress span {right:20px;}
    .loading .txtArea p.f_txt {float:inherit;display:block;}
    .loading .txtArea p.c_txt {left:0;font-size:16px;padding-top:30px;display: flex;justify-content: center;}
    
}

@media all and (max-width:480px){
    .mCollectSwiper .item .thum>img {display:none;}
    .mCollectSwiper .item .thum .m_img {display:block;width:100%;height:100%;}
    .mCollectSwiper .item .thum .m_img img {width:100%;height:100%;object-fit: cover;}
}

@media all and (max-width:400px){
    .swiperBtnArea {top:10px;}
    .mNewAsset .swiperBtnArea {top:40px}
    .mTit {font-size: 35px;}

    .collectTab>ul>li {margin-right: 13px;}
    .collectTab>ul>li>a {padding-left:0;}
    .collectTab>ul>li>a:before {top:-12px;left:50%;margin-left:-5Cpx;width:10px;height:10px;}
}

@media all and (max-width:350px){
    .swiperBtnArea {top:10px;}
    .mTit {font-size: 33px;letter-spacing: -1px;}
}