@charset "UTF-8";

/* CSS Reset */
* { margin:0; padding:0; border:0; outline:0; vertical-align:top;
-webkit-text-size-adjust:none; word-break: keep-all;  }
html{font-size: 16px; scroll-behavior: smooth;}
body {font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif; color:var(--black); background: var(--ig-beige);}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
h1, h2, h3, h4, h5, h6, .pointFont{
    font-family: "gill-sans-nova", sans-serif; font-weight: 800; font-style: normal;
    line-height:1.5em
}
ul, ol, dl { list-style:none; }
img, video {border:0; vertical-align:top; }
a, a:link {color:var(--black);text-decoration:none; display: block; }
a:visited { color:var(--black); }
a:hover, a:active {color:var(--black);text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
p,li,dd{ line-height:1.5em}
.hidden{ display: block; position: absolute; left:-1000%; top:0; width: 1px; height: 1px; overflow: hidden; color: #fff; }
#wrap{ width: 100%; overflow: hidden; }
:root{
    --main-color:#626A51;
    --ig-green:#ACBC99;
    --ig-light-green:#BAC898;
    --ig-light-green-2:#DFDAC6;
    --ig-beige:#F9F2E8;
    --black:#010101;

    --max-w:1434px;

    --border-r:30px;
    --sc-top:84px;
}
@media (max-width: 768px) {
    :root {
        --border-r: 20px;
    }
}
*::selection {background-color:var(--main-color); color:#fff;}
.inner{
    max-width: var(--max-w);
    margin: 0 auto;
    padding:0 clamp(16px, 4vw, 40px);
}
.inner_full{
    max-width: 2000px;
    padding: 0;
}
.button__default{
    display: inline-block;
    width: max-content;
    font-size: clamp(1rem, 1.6vw, 1.13rem);
    font-weight: 500;
    color: #fff !important;
    background: var(--main-color);
    padding: 0.75rem 2.19rem;
    border-radius: 50px;
    border: 1px solid var(--main-color);
    box-sizing: border-box;
    transition: .3s ease-out;
}
.button__default:hover{
    color: var(--main-color) !important;
    border: 1px solid var(--main-color);
    background: var(--ig-beige);
}

/* page-preparing */
.page-preparing{
    width: 100%; height: 100vh;
    position: relative;
}
.page-preparing .pp-banner{
    width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.page-preparing div{
    position: absolute; right: 13%; top: 14%;
    text-align: right;
}
.page-preparing div p{
    color: #fff; 
}
.page-preparing div p:first-child{
    font-size: clamp(1.25rem, 3vw, 2.75rem); font-weight: 700;
}
.page-preparing div p:nth-of-type(2){
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    margin-top:clamp(1.25rem, 2vw, 1.88rem);
    margin-bottom: clamp(2.5rem, 3.5vw, 4.38rem);
}

/* header */
#headerArea{
    position: fixed; left: 0; top: 0;
    width: 100%;
    border-radius: 0 0 30px 30px;
    padding: 30px 0;
    z-index: 100;
    transition:.3s ease-out
}
#headerArea.active{
    background: var(--ig-beige);
    box-shadow: 0px 1px 5px 1px rgba(0,0,0,.1);
}
#headerArea h1{
    font-weight: 400; font-size: 0;
}
#headerArea h1 img{
    transition: .3s ease-out;
}
#headerArea .inner{
    display: flex; justify-content: space-between;
    align-items: center;
}
#headerArea .inner .header_left{}
#headerArea .inner .gnb{}
#headerArea .inner .gnb ul{
    display: flex; align-items: center; gap: 55px;
}
#headerArea .inner .gnb ul li{}
#headerArea .inner a{
    font-size: clamp(0.94rem, 1.6vw, 1rem);
    color: #fff;
    font-weight: 800;
    transition: .3s ease-out;
}
#headerArea.active .inner a{
    color: var(--main-color);
}
#headerArea .inner a:hover{
    color: var(--ig-green);
}
#headerArea .header_right a{
    width: 106px; text-align: right;
}
/* hamburger */
.button__hamburger{
    display: none;
    width: 26px;
    height: 17px;
    position: relative;
    background: none;
    cursor: pointer;
}

.button__hamburger span{
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
    background: #fff;
    border-radius: 50px;
    transition: .3s ease;
}
#headerArea.active .button__hamburger span,
#headerArea.menu-open .button__hamburger span{
    background: var(--main-color);
}

.button__hamburger span:nth-child(1){ top: 0; }
.button__hamburger span:nth-child(2){ top: 50%; transform: translateY(-50%); }
.button__hamburger span:nth-child(3){ bottom: 0; }

#headerArea.menu-open .button__hamburger span:nth-child(1){
    transform: rotate(45deg) translate(5px, 5px);
}
#headerArea.menu-open .button__hamburger span:nth-child(2){
    opacity: 0;
}
#headerArea.menu-open .button__hamburger span:nth-child(3){
    transform: rotate(-45deg) translate(5px, -6px);
}

.gnb-m{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: var(--ig-beige);
    padding: 147px 10px 80px;
    box-sizing: border-box;
    border-radius: 0 0 30px 30px;
    transform: translateY(-100%);
    transition: .3s ease-out;
    z-index: -1;
}
#headerArea.menu-open .gnb-m{
    transform: translateY(0);
}
.gnb-m ul{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.gnb-m a{
    font-size: 1rem;
    font-weight: 800;
    color: var(--main-color);
    text-align: center;
}
.popback{
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,.56);
    position: fixed; left: 0; top: 0;
    z-index: 10;
    display: none;
}
body.menu-lock .popback{
    display: block;
}

/* visual slide */
@keyframes slowZoom {
    from {
    transform: scale(1);
    }
    to {
    transform: scale(1.1);
    }
}
.visual{
    position: relative;
    width: 100vw; height: 100vh;
}
.visual .visual_img{
    width: 100%; height: 100%;
}
.visual .visual_img .visual_img_slide{
    overflow: hidden;
}
.visual .visual_img img{
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transform: scale(1);
    animation: slowZoom 18s ease-out infinite;
}
.visual .visual_content{
    display: flex; align-items: flex-end; justify-content: space-between;
    position: absolute; left: 50%; bottom: 17%;
    transform: translateX(-50%);
    width: 90%; max-width: var(--max-w);
    z-index: 10;
}
.visual .visual_content .visual_content_text{}
.visual .visual_content .visual_content_text p{
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    color: #fff;
    line-height: 1.3;
    text-shadow: 0px 2px 6px rgba(0,0,0,.2);
}
.visual .visual_content .visual_content_text p:first-child{
    font-size: clamp(1.38rem, 2.2vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 20px;
}

.visual .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, 
.visual .swiper-pagination-fraction{
    width: auto;
    left: auto; bottom: auto; right: 10%; top: 50%;
    transform: translateY(-50%);
    display: flex; gap: 7px;
}
.visual .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    width: 10px; height: 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, .6);
    margin: 0;
}

/* ===== content ===== */
section{
    padding: clamp(60px, 10vw, 195px) 0;
    scroll-margin-top: var(--sc-top);
}
section .sec_title{
    margin-bottom: clamp(50px, 7vw, 100px);
    text-align: center;
}
section .sec_title h3{
    font-size: 1.25rem; font-weight: 900;
    color: var(--ig-light-green);
}
section .sec_title p{
    width: 100%; max-width: 452px;
    margin: clamp(30px, 4vw, 50px) auto 0 auto;
}

/* brand story */
section#brand{
    position: relative;
    transition: .5s ease-out;
}
section#brand::before{
    content: ""; display: block; width: 100%; height: 100%;
    background: url(/assets/brand-story-background.jpg) no-repeat center/cover;
    opacity: 0;
    position: absolute; left: 0; top: 0;
    transition: .5s ease-out;
    z-index: -1;
}
section#brand.changed::before{
    opacity: 1;
}
section#brand.changed .sec_title p{
    color: #fff;
}
section#brand .brand_img{
    border-radius: var(--border-r); overflow: hidden;
    transition: .3s ease-out;
}
section#brand.changed .brand_img{
    opacity: 0;
}
section#brand .brand_img img{
    width: 100%; object-fit: cover;
}

/* fabric */
section#fabric{
    background: var(--main-color);
    border-radius: var(--border-r);
    margin-top: -25px;
}
section#fabric .sec_title p{
    max-width: 470px; color: var(--ig-beige);
}
section#fabric .fabric-box{
    display: flex; gap: 30px;
}
section#fabric .fabric-box .fabric-box_item{
    flex: 1 1 0%;
    overflow: hidden;
    position: relative;
}
section#fabric .fabric-box .fabric-box_item > div{
    position: relative;
    cursor: pointer;
    transition: .3s ease-out;
}
section#fabric .fabric-box .fabric-box_item img{
    width: 100%; object-fit: cover;
    border-radius: var(--border-r);
}
section#fabric .fabric-box .fabric-box_item .front p,
section#fabric .fabric-box .fabric-box_item .back div{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}
section#fabric .fabric-box .fabric-box_item .front{

}
section#fabric .fabric-box .fabric-box_item .front p{
    font-size: clamp(20px, 2.4vw, 36px);
    font-weight: 700;
}
section#fabric .fabric-box .fabric-box_item .back{
    position: absolute; left: 0; top: 0;
    width: 100%;
    opacity: 0;
}
section#fabric .fabric-box .fabric-box_item:hover .front{
    opacity: 0;
}
section#fabric .fabric-box .fabric-box_item:hover .back{
    opacity: 1;
}
section#fabric .fabric-box .fabric-box_item .back div{
    width: 90%; max-width: 390px;
}
section#fabric .fabric-box .fabric-box_item.item02 .back div{
    max-width: 430px;
}
section#fabric .fabric-box .fabric-box_item .back div p{
    font-size: clamp(15px, 1.6vw, 18px);
}
section#fabric .fabric-box .fabric-box_item .back div p:not(:last-child){
    margin-bottom: 30px;
}
section#made{
    position: relative;
    background: url(/assets/fabric-background.jpg) no-repeat center/cover;
    height: 80vh;
}
section#made::before{
    content: ""; display: block;
    width: 100%; height: 60%;
    background: linear-gradient(to bottom, #f9f2e8 0%,rgba(249, 242, 232, 0) 100%);
    position: absolute; left: 0; top: 0;
}
section#made .sec_title{
    position: relative; z-index: 1;
}
section#made .sec_title h3{
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 900;
    color: var(--black);
}
section#made .sec_title h3 span{
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif !important;
    display: block;
    font-size: clamp(24px, 2.5vw, 40px); 
    font-weight: 800;
}
section#made .sec_title p{
    margin: 20px auto 0 auto;
}

/* products */
section#products{
    position: relative; z-index: 1;
    background: var(--ig-light-green-2);
    border-radius: var(--border-r);
    margin-top: -25px;
}
section#products .sec_title h3{
    color: var(--main-color);
}
section#products .product-box{
    overflow: hidden; display: flex; gap: 1%;
}
section#products .product-box .swiper{
    overflow: hidden; position: relative;
}
section#products .product-box .swiper img{
    width: 100%; height: 100%; object-fit: cover;
}
section#products .product-box .item_left{
    display: flex; flex-direction: column; justify-content: center;
    padding-left: 13%;
    flex: 1;
    width: 40%;
}
section#products .product-box .item_left .prd-info{
    position: relative;
    margin-bottom: 50px;
}
section#products .product-box .item_left .prd-info .prd-num{
    display: block;
    color: var(--ig-beige);
    font-size: clamp(2.25rem, 3vw, 2.75rem);
    font-weight: 900;
    margin-bottom: clamp(20px, 2.5vw, 50px);
}
section#products .product-box .item_left .prd-info .prd-info_sub{
    color: var(--main-color); font-weight: 500;
    font-size: clamp(0.88rem, 1.6vw, 1rem);
}
section#products .product-box .item_left .prd-info .prd-info_title{
    font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 800;
    margin: 0px 0 clamp(20px, 2vw, 30px) 0;
}
section#products .img-slide-mo{
    margin-bottom: 32px; display: none;
}
section#products .product-box .item_left .button__default{
    margin-top: clamp(50px, 5vw, 117px);
}
section#products .product-box .item_left .prd-tab{
    width: 90%; max-width: 546px;
    height: 81px;
}
section#products .product-box .item_left .prd-tab .swiper-wrapper{
    align-items: center;
}
section#products .product-box .item_left .prd-tab .swiper-slide{
    position: relative;
    max-height: 47px; 
    display: flex; justify-content: center; align-items: center;
    transition: .3s ease-out;
    border-radius: 10px;
    overflow: hidden; cursor: pointer;
}
section#products .product-box .item_left .prd-tab .swiper-slide::before{
    content: ""; display: block;
    width: 100%; height: 100%;
    background: rgba(58, 48, 48, .2);
    position: absolute; left: 0; top: 0;
    transition: .3s ease-out;
}
section#products .product-box .item_left .prd-tab .swiper-slide:hover::before{
    opacity: 0;
}
section#products .product-box .item_left .prd-tab .swiper-slide.active-c{
    max-height: 100%;
}
section#products .product-box .item_left .prd-tab .swiper-slide.active-c::before{
    opacity: 0;
}
section#products .swiper-pagination-bullet{
    background: rgba(255, 255, 255, .6);
    border-radius: 0;
    width: 10px; height: 10px;
}
section#products .swiper-pagination-bullet-active{
    background: #fff;
}

section#products .product-box .item_right{
    width: 59%; max-width: 1030px;
}


/* ===== footer ===== */
#footerArea{
    padding: 100px 0 90px;
}
#footerArea .footer-logo{
    width: 142px;
}
#footerArea .inner{
    display: flex; align-items: flex-end; justify-content: space-between;
}
#footerArea p, #footerArea a{
    color: var(--main-color); opacity: .5;
    transition: .3s ease-out;
}
#footerArea a:hover{
    opacity: 1;
}
#footerArea .footer_left ul{
    margin-top: clamp(30px, 4vw, 63px);
}
#footerArea .footer_left ul li p:first-child{
    opacity: 1;
    font-weight: 500;
    width: 70px;
}
#footerArea .footer_left ul li{
    display: flex; gap: 60px;
    margin-bottom: 30px;
}
#footerArea .footer_left ul li:last-child{
    margin-bottom: 0;
}

@media screen and (max-width:1800px){
    /* products */
    section#products .product-box .item_left{
        padding-left: 10%;
    }
}

@media screen and (max-width:1500px){
    /* products */
    section#products .product-box .item_left{
        padding-left: 3%;
    }
    section#products .product-box .item_left .prd-tab .swiper-slide,
    section#products .product-box .item_left .prd-tab .swiper-slide.active-c{
        max-height: 100%;
    }

}

@media screen and (max-width:1024px){
    /* fabric */
    section#fabric .fabric-box .fabric-box_item .back div br{
        display: none;
    }

    /* footer */
    #footerArea{
        padding: 50px 0;
    }
    #footerArea .inner{
        flex-direction: column; align-items: flex-start;
        gap: 30px;
    }
    #footerArea .footer_left ul li{
        margin-bottom: 20px;
    }
}

@media screen and (max-width:980px){
    /* products */
    section#products .product-box .img-slide-pc,
    section#products .product-box .item_right{
        display: none;
    }
    section#products .img-slide-mo{
        display: block;
    }
    section#products .product-box .item_left{
        width: 100%; padding-left: 0;
    }
    section#products .product-box .item_left .prd-info{
        text-align: center;
    }
    section#products .product-box .item_left .prd-info p{
        padding: 0 16px;
    }
    section#products .product-box .item_left .prd-info .prd-info_sub{
        margin-bottom: 8px;
    }
    section#products .product-box .item_left .prd-tab{
        width: 100%; max-width: 100%;
    }
    section#products .product-box .item_left .button__default{
        margin: 50px auto 0 auto;
    }
}

@media screen and (max-width:768px){
    /* header */
    #headerArea .inner .gnb ul{
        gap: 30px;
    }

    /* visual */
    .visual .visual_content{
        width: 70%;
        transform: translateX(0); left: 5%;
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
    }

    /* fabric */
    section#fabric .fabric-box{
        flex-direction: column;
    }
    section#fabric .fabric-box .fabric-box_item .back{
        position: relative; opacity: 1;
    }
    section#fabric .fabric-box .fabric-box_item .front{
        margin-bottom: 20px;
    }
    section#fabric .fabric-box .fabric-box_item:hover .front{
        opacity: 1;
    }
    section#fabric .fabric-box .fabric-box_item .back div{
        max-width: 90%;
    }

}

@media screen and (max-width:640px){
    .page-preparing div{
        text-align: left;
        width:80%; margin: 0 auto;
        right: auto; left:50%; 
        transform: translateX(-50%);
    }

    /* header */
    #headerArea{
        padding: 20px 0;
        border-radius: 0 0 20px 20px;
    }
    #headerArea .inner .gnb,
    #headerArea .header_right a{
        display: none;
    }
    .button__hamburger{display: block;}
    #headerArea .inner .gnb ul{
        gap: 12px;
    }
    #headerArea .inner a{
        font-weight: 600;
    }
    #headerArea .header_right a{
        width: auto;
    }

    /* footer */
    #footerArea .footer_left ul li{
        gap: 20px;
    }
}

@media screen and (max-width:500px){
    section#products .product-box .item_left .prd-info .prd-info_description br{
        display: none;
    }
    #footerArea .footer_left ul li{
        flex-direction: column; gap: 0;
    }
}