html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: #2f3542; border-radius: 10px;}

.wrap {margin: 0 auto; width: 95%;}
.wrap[max='1760'] {max-width: 1760px;}
.wrap[max='1600'] {max-width: 1600;}
.wrap[max='1440'] {max-width: 1440px;}

@media screen and (max-width: 820px){
    .wrap{ width: 90%; }
}

/* 공통 기본 폰트 */
body {font-family: 'SUIT', sans-serif; background-color: #000; color: #fff;}


/* 커서 스타일 */
.cursor {
    position: absolute; 
    bottom: 100%;
    left: 0;
    background: #f1b22b;
    z-index: 10000;
    display: flex;
    align-items: center;
    font-family: 'Urbanist';
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #000;
    padding: calc(15/16*1em);
    border-radius: calc(22/16*1em) calc(22/16*1em) calc(22/16*1em) 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cursor.show {
    opacity: 1;
}

.cursor span {
    margin-right: calc(10/16*1em);
}

.cursor i {
    transform: rotate(45deg);
}

.cursor._close{
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: #fff;
    width: 32px;
    height: 32px;
    padding: 2px;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
}

.cursor._close i{
    transform: rotate(0);
    font-size: 24px;
}

.cursor._drag{
    width: 56px;
    height: 56px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
}

.cursor._drag span{ margin: 0; }


/* 메인, 프로젝트 뷰페이지 상단 공통 */

.txt {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: opacity 0.3s ease;
}

.txt.hide {
    opacity: 0;
}

.txt .ctg {
    /* border: 1px solid #fff; */
    font-size: 24px;
    padding: calc(12/18*1em) calc(35/18*1em);
    border-radius: 22px;
    font-family: 'Urbanist';
    letter-spacing: -0.01em;
}

.txt .title {
    width: 100%;
    word-break: keep-all;
    font-family: 'Poppins', 'Pretendard';
    font-weight: 600;
    text-align: center;
    font-size: 72px;
    line-height: calc(110 / 90);
    letter-spacing: -0.01em;
    padding: 0 250px;
    box-sizing: border-box;
    padding-top: calc(20/90*1em);
    padding-bottom: calc(40/90*1em);
}

.txt .btnWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.txt .btnWrap .onlyMobile {
    display: none;
}
.txt.hide .viewmore {
    pointer-events: none !important;
}


@media screen and (max-width: 1700px) {
    .txt .title {
        padding-left: 240px;
        padding-right: 240px;
        font-size: clamp(80px, 90/1700*100vw, 90px);
    }
}
@media screen and (max-width: 1440px) {
    .txt .ctg {
        font-size: 16px;
    }
    .txt .title {
        padding-left: 220px;
        padding-right: 220px;
        font-size: clamp(70px, 80/1440*100vw, 80px);
    }
}
@media screen and (max-width: 1280px) {
    .txt .title {
        padding-left: 200px;
        padding-right: 200px;
        font-size: clamp(50px, 70/1280*100vw, 70px);
    }
}
@media screen and (max-width: 1024px) {
    .txt .ctg {
        font-size: 14px;
    }
    .txt .title {
        padding-left: 180px;
        padding-right: 180px;
        font-size: clamp(45px, 55/1024*100vw, 55px);
    }
}
@media screen and (max-width: 820px) {
    .txt .ctg {
        font-size: clamp(16px, 20/820*100vw, 20px);
    }
    .txt .title {
        padding-left: 10px;
        padding-right: 10px;
        font-size: clamp(35px, 50/820*100vw, 50px);
        padding-top: calc(15/50*1em);
        padding-bottom: calc(40/50*1em);
    }
    .txt .btnWrap .onlyMobile {
        display: flex;
    }
}
@media screen and (max-width: 500px) {
    .txt .title {
        font-size: clamp(30px, 45/500*100vw, 45px);
    }
}


.viewmore {
    pointer-events: auto;
    font-family: 'Urbanist';
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: calc(20/18*1em);
    border: 1px solid #fff;
    border-radius: calc(20/18*1em);
    padding: 0 calc(20/18*1em);
    height: calc(40/18*1em);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.viewmore .icon {
    font-size: calc(16/18*1em);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.viewmore .icon i {
    font-size: calc(16/18*1em);
    transform: rotate(45deg);
    position: relative;
    z-index: 1;
}

.viewmore .icon::after {
    content: '';
    display: block;
    width: calc(40/18*1em);
    height: calc(40/18*1em);
    background: #f3ac3e;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
    transition: transform 0.3s ease;
}

@media screen and (min-width : 821px) {
    .viewmore:hover {
        border-color: transparent;
    }

    .viewmore:hover .icon::after {
        transform: translate(-50%, -50%);
    }
}
@media screen and (max-width: 1440px) {
    .viewmore {
        font-size: 16px;
    }
}
@media screen and (max-width: 1024px) {
    .viewmore {
        font-size: 14px;
    }
}
@media screen and (max-width: 820px) {
    .viewmore {
        font-size: clamp(16px, 20/820*100vw, 20px);
    }
}
@media screen and (max-width: 500px) {
    .viewmore {
        /* font-size: clamp(13px, 14/500*100vw, 14px); */
    }
}



.pageTransition {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 95%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    display: flex;
    align-items: flex-end;
}


.pageTransition .inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    padding: calc(45/20*1em) 0;
    color: #fff;
    position: relative;
    font-weight: 300;
    transform: translateY(100%);
    transition: 1.2s ease;
}
.pageTransition.show .inner {
    transform: translateY(0%);
}
.pageTransition .inner > * {
    padding: calc(5/20*1em) calc(3/20*1em);
}

.pageTransition .inner .projectName,
.pageTransition .inner .client {
    font-family: 'Pretendard';
    font-size: inherit;
    letter-spacing: -0.025em;
    max-width: 35%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pageTransition .inner .date {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter';
    font-size: inherit;
}
@media screen and (max-width: 1440px) {
    .pageTransition .inner {
        font-size: 18px;
    }
}
@media screen and (max-width: 1280px) {
    .pageTransition .inner {
        padding: calc(40/20*1em) 0;
    }
}
@media screen and (max-width: 1024px) {
    .pageTransition .inner {
        font-size: 16px;
    }
}
@media screen and (max-width: 820px) {
    .pageTransition .inner {
        font-size: clamp(16px, 20/820*100vw, 20px);
        padding: calc(70/20*1em) 0;
    }  
}
@media screen and (max-width: 500px) {
    .pageTransition .inner {
        /* font-size: clamp(14px, 16/500*100vw, 16px); */
        flex-direction: column;
        align-items: center;
        gap: calc(5/16*1em);
        width: 100%;
        padding-bottom: 100px;
    } 
    .pageTransition .inner .date {
        position: relative;
        left: auto; top: auto;
        transform: none;
        order: -1;
    }
    .pageTransition .inner .projectName, .pageTransition .inner .client {
        max-width: 100%;
    }
}





/* 서브 공통 */
._sub{ width: 100%; overflow: hidden; }
._sub._common{ padding-top: 305px; padding-bottom: 135px; }


._sub .commonSubT{ color: #fff; }
._sub .commonSubT .topTitle{ display: flex; padding-bottom: 25px; border-bottom: 1px solid #fff; box-sizing: border-box; }
._sub .commonSubT .topTitle strong{ display: block; font-size: 88px; letter-spacing: -0.025em; font-family: 'Urbanist', 'SUIT'; font-weight: 600; line-height: calc(110 / 88); }
._sub .commonSubT .topTitle em{ font-size: 20px; letter-spacing: -0.025em; font-family: 'Urbanist'; padding-top: 0.8em; box-sizing: border-box; display: block; margin-left: 25px; }


._sub .commonSubT .ctgWrap{ margin-top: 30px; display: flex; justify-content: space-between; }
._sub .commonSubT .ctgWrap .lbx .ctg1{ display: flex; gap: 10px; }
._sub .commonSubT .ctgWrap .lbx .ctg1::-webkit-scrollbar {width: 8px; height: 4px;}
._sub .commonSubT .ctgWrap .lbx .ctg1::-webkit-scrollbar-thumb {background-color: #2f3542; border-radius: 10px;}
._sub .commonSubT .ctgWrap .lbx .ctg1 li{ position: relative; }
._sub .commonSubT .ctgWrap .lbx .ctg1 li > a{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 22px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.4); height: 48px; line-height: 1.3; font-size: 18px; letter-spacing: -0.025em; color: rgba(255,255,255,0.4); box-sizing: border-box; transition-duration: 0.2s; cursor: pointer; }

._sub .commonSubT .ctgWrap .lbx .ctg2{ display: flex; margin-left: -20px; margin-top: 20px; opacity: 0; pointer-events: none; }
._sub .commonSubT .ctgWrap .lbx .ctg2.on{ opacity: 1; pointer-events: unset; }
._sub .commonSubT .ctgWrap .lbx .ctg2::-webkit-scrollbar {width: 8px; height: 4px;}
._sub .commonSubT .ctgWrap .lbx .ctg2::-webkit-scrollbar-thumb {background-color: #2f3542; border-radius: 10px;}
._sub .commonSubT .ctgWrap .lbx .ctg2 li > a{ padding: 10px 20px; box-sizing: border-box; position: relative; color: #545454; transition-duration: 0.2s; font-size: 18px; letter-spacing: -0.025em; color: #545454; display: block; }

._sub .commonSubT .ctgWrap .lbx .ctg2 li > a::after{ content: '|'; position: absolute; right: -0.1em; top: 50%; transform: translateY(-50%); color: #545454; }
._sub .commonSubT .ctgWrap .lbx .ctg2 li:last-of-type > a::after{ display: none; }

._sub .commonSubT .ctgWrap .rbx{ width: calc(400 / 1440 * 100%); }
._sub .commonSubT .ctgWrap .rbx .search{ display: flex; background-color: rgba(255,255,255,0.1); padding: 0 10px; box-sizing: border-box; }
._sub .commonSubT .ctgWrap .rbx .search > a{ display: flex; align-items: center; justify-content: center; padding: 0 10px; font-size: 20px; flex-shrink: 0; }
._sub .commonSubT .ctgWrap .rbx .search > input{ background: none; border: none; height: 54px; font-size: 16px; letter-spacing: -0.025em; width: 100%; color: #fff; }
._sub .commonSubT .ctgWrap .rbx .search > input::placeholder{ color: rgba(255,255,255,0.2); }

._sub .commonSubT .ctgWrap .rbx .sort{ display: flex; justify-content: flex-end; margin-top: 10px; align-items: center; }
._sub .commonSubT .ctgWrap .rbx .sort > ul{ display: flex; margin-right: -20px; }
._sub .commonSubT .ctgWrap .rbx .sort > ul li > a{ padding: 10px 20px; box-sizing: border-box; display: flex; align-items: center; text-align: center; color: #545454; font-size: 18px; letter-spacing: -0.025em; position: relative; }
._sub .commonSubT .ctgWrap .rbx .sort > ul li > a::after{ content: '|'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #545454; }
._sub .commonSubT .ctgWrap .rbx .sort > ul li:last-of-type > a::after{ display: none; }
._sub .commonSubT .ctgWrap .rbx .sort i{ color: #545454; font-weight: 600; display: block; font-size: 16px; }
._sub .commonSubT .ctgWrap .rbx .sort > ul li.on > a{ color: #ffb440; }



._sub .commonSubT .ctgWrap .lbx .ctg1 li.on > a{ background-color: #ffb440; color: #101010; font-weight: 600; }
._sub .commonSubT .ctgWrap .lbx .ctg2 li.on > a{ color: #ffb440; font-weight: 600; }

@media screen and (min-width: 821px){
    ._sub .commonSubT .ctgWrap .lbx .ctg1 li:hover > a{ background-color: #ffb440; color: #101010; font-weight: 600; }
    ._sub .commonSubT .ctgWrap .lbx .ctg2 li:hover > a{ color: #ffb440; font-weight: 600; }
}


@media screen and (max-width: 1280px){
    ._sub._common{ padding-top: 150px; }
    ._sub .commonSubT .topTitle strong{ font-size: 6vw; }
    ._sub .commonSubT .topTitle em{ font-size: 16px; }

    ._sub .commonSubT .ctgWrap .lbx .ctg1 li > a{ padding: 0 15px; font-size: 16px; height: 40px; }
    ._sub .commonSubT .ctgWrap .lbx .ctg2{ margin-left: -15px; }
    ._sub .commonSubT .ctgWrap .lbx .ctg2 li > a{ font-size: 16px; padding: 10px 15px; }

    ._sub .commonSubT .ctgWrap .rbx .search > a{ padding: 0; }
    ._sub .commonSubT .ctgWrap .rbx .search input{ padding-left: 10px; height: 44px; }

    ._sub .commonSubT .ctgWrap .rbx .sort > ul li > a{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    ._sub._common{ padding-top: 100px; }
    ._sub .commonSubT .topTitle{ padding-bottom: 15px; }
    ._sub .commonSubT .topTitle strong{ font-size: 9vw; }
    ._sub .commonSubT .topTitle em{ margin-left: 15px; padding-top: 5px; }

    ._sub .commonSubT .ctgWrap{ flex-direction: column; margin-top: 20px; }
    ._sub .commonSubT .ctgWrap .lbx .ctg1{ gap: 5px; }
    ._sub .commonSubT .ctgWrap .lbx .ctg1 li > a{ font-size: 14px; padding: 0 10px; height: 37px; }
    ._sub .commonSubT .ctgWrap .lbx .ctg2{ margin-left: -10px; margin-top: 10px; }
    ._sub .commonSubT .ctgWrap .lbx .ctg2 li > a{ font-size: 14px; }
    ._sub .commonSubT .ctgWrap .rbx{ width: 100%; max-width: 250px; margin-top: 20px; margin-left: auto; }

    ._sub .commonSubT .ctgWrap .rbx .search input{ font-size: 14px; height: 40px; }

    ._sub .commonSubT .ctgWrap .rbx .sort{ margin-top: 5px; }
    ._sub .commonSubT .ctgWrap .rbx .sort > ul li > a{ font-size: 14px; }

    ._sub .commonSubT .ctgWrap .lbx .ctg1::-webkit-scrollbar {width: 0; height: 0;}
    ._sub .commonSubT .ctgWrap .lbx .ctg2::-webkit-scrollbar {width: 0; height: 0;}
}

@media screen and (max-width: 500px){
    ._sub .commonSubT .topTitle{ padding-bottom: 10px; }
    ._sub .commonSubT .ctgWrap .lbx .ctg1{ overflow: auto; }
    ._sub .commonSubT .ctgWrap .lbx .ctg2{ overflow: auto; margin-left: 0; }
    ._sub .commonSubT .ctgWrap .lbx .ctg2 li:first-of-type{ padding-left: 0; }
    ._sub .commonSubT .ctgWrap .lbx li{ flex-shrink: 0; }
}


/* 뷰페이지 대체 레이어팝업 - 타입 2가지 */
.viewPopup{ position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; word-break: keep-all; display: none; }
.viewPopup .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-color: rgba(0,0,0,0.8); }

.viewPopup .inn{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; }

.viewPopup .inn .contents{ display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.viewPopup .inn .contents .lbx,
.viewPopup .inn .contents .rbx{ flex-shrink: 0; }
.viewPopup .inn .contents .btn{ width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; border-radius: 50%; background-color: rgba(255,255,255,0.2); }

.viewPopup .inn .contents .swiper{ width: 100%; height: 100%; }
.viewPopup .inn .contents .swiper .in{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #111111; }
.viewPopup .inn .contents .swiper .in > a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; }
.viewPopup .inn .contents .swiper .in img{ object-fit: contain; box-sizing: border-box; max-height: 100%; }


.viewPopup._1 .inn{ max-width: 750px; }
.viewPopup._2 .inn{ max-width: 1250px; }

.viewPopup._1 .inn .contents{ height: 67vh; max-height: 614px; }
.viewPopup._2 .inn .contents{ height: 67vh; }


.viewPopup._1 .inn .contents .swiper .in{ box-sizing: border-box; }

.viewPopup .inn .contents .flexbx{ display: flex; width: calc(100% - 136px); height: 100%; }
.viewPopup .inn .contents .flexbx .swWrap{ width: calc(630 / 1110 * 100%); margin: 0; position: relative; }
.viewPopup .inn .contents .flexbx .infobx{ width: calc(480 / 1110 * 100%); padding: 80px 70px; box-sizing: border-box; background-color: #fff; color: #101010; height: 100%; overflow: auto; }
.viewPopup .inn .contents .flexbx .infobx .topbx em{ font-size: 16px; letter-spacing: -0.02em; color: #7c7c7c; display: block; }
.viewPopup .inn .contents .flexbx .infobx .topbx dl dt{ font-size: 36px; letter-spacing: -0.02em; line-height: calc(58 / 46); margin-top: 10px; font-weight: 700; }
.viewPopup .inn .contents .flexbx .infobx .topbx dl dd{ font-size: 16px; letter-spacing: -0.02em; padding: 10px 20px; box-sizing: border-box; border-radius: 40px; border: 1px solid #000; margin-top: 10px; display: inline-block; }

.viewPopup .inn .contents .flexbx .infobx .botbx{ margin-top: 145px; }
.viewPopup .inn .contents .flexbx .infobx .botbx > ul li{ margin-bottom: 20px; font-size: 18px; letter-spacing: -0.02em; }
.viewPopup .inn .contents .flexbx .infobx .botbx > ul li > span{ font-weight: 600; color: #ffb440; }
.viewPopup .inn .contents .flexbx .infobx .botbx > ul li > p{ font-weight: 500; line-height: 1.2; margin-top: 10px; }
.viewPopup .inn .contents .flexbx .infobx .botbx > ul li:last-of-type{ margin-bottom: 0; }

.viewPopup .inn .hash{ flex-shrink: 0; margin: 0 auto; width: calc(100% - 136px); }
.viewPopup .inn .hash > ul{ display: flex; margin-top: 15px; gap: 5px; flex-wrap: wrap; }
.viewPopup .inn .hash > ul li{ font-size: 16px; letter-spacing: -0.02em; font-weight: 300; padding: 10px 20px; box-sizing: border-box; border-radius: 40px; border: 1px solid #fff; color: #fff; text-align: center; }

.viewPopup .inn .morebtn{ margin-top: 10px; display: flex; justify-content: flex-end; padding: 0 68px; box-sizing: border-box; }
.viewPopup .inn .morebtn > a{ display: flex; justify-content: center; gap: 10px; border: 1px solid #fff; box-sizing: border-box; border-radius: 100px; padding: 14px 20px; color: #fff; transition-duration: 0.2s; }
.viewPopup .inn .morebtn > a span{ font-size: 18px; letter-spacing: -0.01em; font-weight: 500; }
.viewPopup .inn .morebtn > a i{ transform: rotate(-45deg); }


.viewPopup .swiper-pagination{ bottom: 20px; }
.viewPopup .swiper-pagination span{ background-color: #fff; }
.viewPopup .swiper-pagination .swiper-pagination-bullet{ margin: 0 2.5px; }
.viewPopup .swiper-pagination .swiper-pagination-bullet-active{ background-color: #ffb440; }

.viewPopup._2 .swiper-pagination{ bottom: -20px; }

@media screen and (min-width: 821px){
    .viewPopup .inn .morebtn > a:hover{ background-color: #f1b22b; color: #101010; border-color: #f1b22b; }
}


@media screen and (max-width: 1280px){
    .viewPopup._1 .inn .contents{ height: 50vh; }
    .viewPopup .inn .contents .flexbx .infobx{ padding: 50px 20px; }
    
    .viewPopup .inn .contents .flexbx .infobx .topbx em{ font-size: 14px; }
    .viewPopup .inn .contents .flexbx .infobx .topbx dl dt{ font-size: 30px; }
    .viewPopup .inn .contents .flexbx .infobx .topbx dl dd{ font-size: 14px; padding: 7px 15px; }
    
    .viewPopup .inn .contents .flexbx .infobx .botbx{ margin-top: 30px; }
    .viewPopup .inn .contents .flexbx .infobx .botbx > ul li{ font-size: 16px; }

    .viewPopup .inn .morebtn > a span{ font-size: 16px; }
    
}

@media screen and (max-width: 820px){
    .viewPopup .inn .contents{ gap: 10px; }
    .viewPopup .inn .contents .btn{ width: 35px; height: 35px; font-size: 16px; }
    .viewPopup .inn .hash{ width: calc(100% - 90px); }
    .viewPopup .inn .hash > ul li{ font-size: 14px; padding: 10px 15px; }
    
    .viewPopup .inn .contents .lbx, .viewPopup .inn .contents .rbx{ display: none; }


    .viewPopup .inn .contents .flexbx{ flex-direction: column; width: 100%; }
    .viewPopup .inn .contents .flexbx .swWrap{ width: 100%; height: 50%; }
    .viewPopup .inn .contents .flexbx .infobx{ width: 100%; height: 50%; }

    .viewPopup .inn .contents .flexbx .infobx .topbx dl dt{ font-size: 22px; }
    .viewPopup .inn .contents .flexbx .infobx .botbx > ul li{ font-size: 14px; }

    .viewPopup .inn .morebtn{ padding: 0; }
    .viewPopup .inn .morebtn > a{ padding: 12px 15px;  }
    .viewPopup .inn .morebtn > a span{ font-size: 14px; }
    
    .viewPopup._1 .inn .contents .swiper .in img{ border-width: 5px; }
    .viewPopup._2 .swiper-pagination{ bottom: 20px; }
}

@media screen and (max-width: 500px){
    .viewPopup .inn .contents{ gap: 5px; }
    .viewPopup .inn .hash{ width: 100%; }
    .viewPopup .inn .hash > ul li{ font-size: 12px; padding: 7px 10px; }

    .viewPopup .inn .contents .flexbx .infobx{ padding: 30px 15px; }
    .viewPopup .inn .contents .flexbx .infobx .topbx em{ font-size: 12px; }
    .viewPopup .inn .contents .flexbx .infobx .topbx dl dt{ font-size: 16px; }
    .viewPopup .inn .contents .flexbx .infobx .topbx dl dd{ font-size: 12px; }
    .viewPopup .inn .contents .flexbx .infobx .botbx > ul li{ font-size: 12px; }
}