/* BASIC css start */
#contentWrap{
    width:100%;
    min-width:0;
    font-family:'Noto Sans KR', sans-serif;
}


/* =========================================================
   섹션 공통
========================================================= */

.section{
    width:100%;
    margin-bottom:80px;
    font-family:'Noto Sans KR', sans-serif;
}

.sec_inner{
    width:calc(100% - 40px);
    max-width:1500px;
    margin:0 auto;
}

.section h2{
    font-family:'Montserrat', sans-serif;
    font-size:26px;
    color:#000;
    font-weight:700;
    margin-bottom:50px;
    line-height:1.3;
}

.section h2:has(a){
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.section h2:has(a) a{
    text-decoration:underline;
    color:#000;
    font-family:'Montserrat', sans-serif;
    font-size:13px;
    font-weight:600;
}


/* =========================================================
   sec1
========================================================= */

#sec1{
    width:100%;
}

#sec1 .swiper{
    width:100%;
}

#sec1 .swiper ul{}

#sec1 .swiper ul li{
    position:relative;
    width:100%;
}


/* 배너 이미지 */
#sec1 .swiper ul li>img{
    display:block;
    width:100%;
    height:auto;
}


/* 텍스트 영역 */
#sec1 .swiper ul li .txt_area{
    overflow:visible;
    position:absolute;

    left:50%;
    top:50%;

    transform:translateY(-50%);

    /*
       큰 화면에서는 기존 220px에 가깝게,
       작은 PC 화면에서는 자연스럽게 축소
    */
    padding-left:clamp(120px, 11.5vw, 220px);
}


/* 한글 + 영문 혼합 대응 */
#sec1 .swiper ul li .txt_area p{
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
    opacity:0;
}

#sec1 .swiper ul li .txt_area.act p{
    transform:translateY(30px);
    opacity:1;
}

#sec1 .swiper ul li .txt_area.act a.more{
    transform:translateY(30px);
    opacity:1;
}


/* 영문 메인 타이틀 */
#sec1 .swiper ul li .txt_area p.big{
    font-family:'Montserrat', sans-serif;
    font-size:26px;
    color:#000;
    font-weight:700;

    transition:all .5s;

    line-height:1.3;
    margin-bottom:20px;
}


/* 한글 + 영문 설명문 */
#sec1 .swiper ul li .txt_area p.sub{
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
    color:#000;

    font-size:17px;
    font-weight:500;

    transition:all .4s;
    transition-delay:.25s;

    line-height:1.6;
}


/* MORE */
#sec1 .swiper ul li .txt_area a.more{
    font-family:'Montserrat', sans-serif;

    transition:transform .4s, opacity .4s;

    display:inline-block;

    opacity:0;
    transition-delay:.4s;

    border:1px solid #000;

    padding:10px 50px;

    color:#000;

    font-size:13px;
    font-weight:600;

    margin-top:30px;
}

#sec1 .swiper ul li .txt_area a.more:hover{
    background-color:#000;
    color:#fff;
}


/* 페이지네이션
   1500px 콘텐츠 우측 끝을 기준으로 배치
*/
#sec1 .swiper-pagination{
    width:auto;

    top:50%;

    right:max(20px, calc((100% - 1500px) / 2));

    bottom:unset;
    left:unset;

    z-index:19;

    transform:none;
}

#sec1 .swiper-pagination-bullet{
    background-color:#000;
    display:block;
    margin:10px 0;
}


/* 이전 / 다음 화살표 */
#sec1 .sec1_nav{
    position:absolute;

    bottom:40px;
    left:50%;

    z-index:10;

    transform:translateX(-50%);

    display:flex;
    align-items:center;

    gap:20px;
}

#sec1 .swiper_btn_prev,
#sec1 .swiper_btn_next{
    cursor:pointer;
}

#sec1 .swiper_btn_prev img,
#sec1 .swiper_btn_next img{
    display:block;
}


/* 이전 버튼 */
#sec1 .swiper_btn_prev img{
    transform:rotate(180deg);
}

#sec1 .swiper-button-disabled{
    opacity:.3;
}


/* =========================================================
   sec2
========================================================= */

#sec2{}

#sec2 .sec_inner{}

#sec2 .sec_inner h2{}

#sec2 .sec_inner .sec2_cont{
    width:100%;
}

#sec2 .sec_inner .sec2_cont .swiper{
    width:100%;
    padding-bottom:40px;
}

#sec2 .sec_inner .sec2_cont .swiper ul{}

#sec2 .sec_inner .sec2_cont .swiper ul li{
    min-width:0;
}

#sec2 .sec_inner .sec2_cont .swiper ul li>a{
    display:block;
    width:100%;
    overflow:hidden;
}

#sec2 .sec_inner .sec2_cont .swiper ul li>a>img{
    display:block;

    width:100%;
    max-width:100%;
    height:auto;

    transition:all .3s;
}

#sec2 .sec_inner .sec2_cont .swiper ul li:hover>a>img{
    transform:translateY(-20px);
}


/* 텍스트 */
#sec2 .sec_inner .sec2_cont .swiper ul li .txt_area{
    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    padding:13px 0;

    gap:5px;
}


/* 카테고리 */
#sec2 .sec_inner .sec2_cont .swiper ul li .txt_area p.tit{
    text-align:center;

    transform:translateY(10px);

    transition:all .3s;

    font-size:15px;
    color:#000;

    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
    font-weight:600;
}


/* MORE */
#sec2 .sec_inner .sec2_cont .swiper ul li .txt_area a.more{
    display:inline-block;

    opacity:0;

    transform:translateY(-20px);

    transition:
        transform .3s,
        opacity .1s,
        background-color .2s,
        color .2s;

    border:1px solid #000;

    font-family:'Montserrat', sans-serif;

    padding:6px 20px;

    font-weight:600;

    background-color:#fff;

    font-size:12px;
}

#sec2 .sec_inner .sec2_cont .swiper ul li:hover .txt_area a.more{
    opacity:1;
    transform:translateY(-5px);
}

#sec2 .sec_inner .sec2_cont .swiper ul li:hover .txt_area a.more:hover{
    background-color:#000;
    color:#fff;
}

#sec2 .sec_inner .sec2_cont .swiper ul li:hover .txt_area p.tit{
    transform:translateY(-18px);
}


/* progress */
#sec2 .swiper-pagination{
    bottom:0;
    top:unset;
}

#sec2 .swiper-pagination-progressbar{
    background-color:rgba(0,0,0,.05);
}

#sec2 .swiper-pagination-progressbar-fill{
    background-color:#cfcfcf;
}


/* =========================================================
   sec3
========================================================= */

#sec3{}

#sec3 .sec_inner{}

#sec3 .sec_inner h2{
    display:block;
}

#sec3 .sec_inner h2 .sec3_title_line{
    display:flex;
    align-items:center;

    gap:18px;
}

#sec3 .sec_inner h2 a{
    display:inline-block;

    font-family:'Montserrat', 'Noto Sans KR', sans-serif;

    font-size:14px;
    font-weight:600;

    color:#777;

    text-decoration:underline;

    margin-top:3px;

    transition:color .2s;
}

#sec3 .sec_inner h2 a:hover{
    color:#000;
}


/* 상품영역 */
#sec3 .sec_inner .sec3_cont{
    width:100%;
}

#sec3 .sec_inner .sec3_cont ul{
    display:grid;

    grid-template-columns:repeat(4, minmax(0, 1fr));

    gap:40px;

    grid-template-areas:
        "a b c c"
        "d e c c";
}


/* 큰 상품 */
#sec3 .sec_inner .sec3_cont ul li:nth-child(1){
    grid-area:c;
    height:100%;
    min-width:0;
}


/* 작은 상품 */
#sec3 .sec_inner .sec3_cont ul li:nth-child(2){
    grid-area:a;
    min-width:0;
}

#sec3 .sec_inner .sec3_cont ul li:nth-child(3){
    grid-area:b;
    min-width:0;
}

#sec3 .sec_inner .sec3_cont ul li:nth-child(4){
    grid-area:d;
    min-width:0;
}

#sec3 .sec_inner .sec3_cont ul li:nth-child(5){
    grid-area:e;
    min-width:0;
}


/* 이미지 공통 */
#sec3 .sec_inner .sec3_cont .thumb,
#sec3 .sec_inner .sec3_cont .thumb a{
    display:block;
    width:100%;
}


/* 첫 번째 큰 상품
   기존 730 x 816 비율 유지
*/
#sec3 .sec_inner .sec3_cont ul li:nth-child(1) .thumb img{
    display:block;

    width:100%;
    max-width:100%;

    aspect-ratio:730 / 816;

    object-fit:cover;
}


/* 상품정보 */
#sec3 .sec_inner .sec3_cont ul li .info{
    height:84px;

    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
}


/* 작은 상품
   기존 345 x 345 비율 유지
*/
#sec3 .sec_inner .sec3_cont ul li:not(:nth-child(1)) .thumb img{
    display:block;

    width:100%;
    max-width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;
}


/* =========================================================
   sec4
========================================================= */

#sec4{}

#sec4 .sec_inner{}

#sec4 .sec_inner h2{}


/* 카테고리 */
#sec4 .sec_inner .sec4_cate{
    margin-bottom:45px;
}

#sec4 .sec_inner .sec4_cate ul{
    display:flex;
    flex-wrap:wrap;

    gap:15px;
}

#sec4 .sec_inner .sec4_cate ul li{}


/* 영문 / 한글 카테고리 모두 대응 */
#sec4 .sec_inner .sec4_cate ul li a{
    display:block;

    width:100%;

    background-color:#f6f6f6;

    border-radius:20px;

    padding:13px 25px;

    text-align:center;

    font-family:'Montserrat', 'Noto Sans KR', sans-serif;

    color:#5a5a5a;

    font-size:12px;
    font-weight:500;
}

#sec4 .sec_inner .sec4_cate ul li.on>a{
    color:#fff;
    background-color:#000;
}

#sec4 .sec_inner .sec4_cate ul li a:hover{
    background-color:#000;
    color:#fff;
}


/* 상품영역 */
#sec4 .sec4_prd{
    width:100%;
}

#sec4 .sec4_prd>div{
    display:none;
    position:relative;

    width:100%;
}

#sec4 .sec4_prd>div ul{
    display:grid;

    grid-template-columns:repeat(4, minmax(0, 1fr));

    grid-template-areas:
        "a a b c"
        "d e f g";

    gap:60px 40px;
}

#sec4 .sec4_prd>div.show{
    display:block;
}


/* 상품명 */
#sec4 .sec4_prd>div ul li .info{
    height:84px;

    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
}


/* 상품 이미지 */
#sec4 .sec4_prd>div ul li:not(:nth-child(1)) .thumb,
#sec4 .sec4_prd>div ul li:not(:nth-child(1)) .thumb a{
    display:block;
    width:100%;
}

#sec4 .sec4_prd>div ul li:not(:nth-child(1)) .thumb img{
    display:block;

    width:100%;
    max-width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;
}


/* 텍스트 박스 */
#sec4 .sec4_prd>div ul li:nth-child(1){
    grid-area:a;

    width:100%;
    height:100%;

    min-width:0;
}

#sec4 .sec4_prd>div ul li.sec4_cont_li .inner{
    padding:50px 60px;
}


/* 텍스트 박스 내부 한글 / 영문 */
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner :is(*){
    color:#fff;

    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
}


/* 타이틀 */
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner h3{
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;

    font-size:26px;
    font-weight:700;

    opacity:0;

    transition:all .4s;

    line-height:1.3;

    margin-bottom:20px;
}


/* 설명 */
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner p.sub{
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;

    font-size:17px;
    font-weight:500;

    opacity:0;

    transition:all .4s;
    transition-delay:.2s;

    line-height:1.6;
}


/* MORE */
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner a{
    font-family:'Montserrat', sans-serif;

    opacity:0;

    transition:transform .4s, opacity .4s;

    display:inline-block;

    transition-delay:.35s;

    border:1px solid #fff;

    padding:10px 50px;

    color:#fff;

    font-size:13px;
    font-weight:500;

    margin-top:30px;
}


/* 애니메이션 */
#sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner h3{
    transform:translateY(20px);
    opacity:1;
}

#sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner p{
    transform:translateY(20px);
    opacity:1;
}

#sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner a{
    transform:translateY(20px);
    opacity:1;
}


/* 상품 위치 */
#sec4 .sec4_prd>div ul li:nth-child(2){
    grid-area:b;
    min-width:0;
}

#sec4 .sec4_prd>div ul li:nth-child(3){
    grid-area:c;
    min-width:0;
}

#sec4 .sec4_prd>div ul li:nth-child(4){
    grid-area:d;
    min-width:0;
}

#sec4 .sec4_prd>div ul li:nth-child(5){
    grid-area:e;
    min-width:0;
}

#sec4 .sec4_prd>div ul li:nth-child(6){
    grid-area:f;
    min-width:0;
}

#sec4 .sec4_prd>div ul li:nth-child(7){
    grid-area:g;
    min-width:0;
}


/* =========================================================
   sec4 텍스트 박스 배경색
========================================================= */


/* CAFFEINE-FREE */
#sec4 .sec4_prd>div:nth-child(1) ul li:nth-child(1){
    background-color:#BFC8B8;
}


/* WITH MILK */
#sec4 .sec4_prd>div:nth-child(2) ul li:nth-child(1){
    background-color:#DDD2C1;
}


/* LEAF TO GLASS */
#sec4 .sec4_prd>div:nth-child(3) ul li:nth-child(1){
    background-color:#C9C1AE;
}


/* NOIR */
#sec4 .sec4_prd>div:nth-child(4) ul li:nth-child(1){
    background-color:#4B4B4B;
}


/* SMALL LUXURIES */
#sec4 .sec4_prd>div:nth-child(5) ul li:nth-child(1){
    background-color:#D0C8C2;
}


#sec4 .sec4_prd>div:nth-child(6) ul li:nth-child(1){
    background-color:darkcyan;
}

#sec4 .sec4_prd>div:nth-child(7) ul li:nth-child(1){
    background-color:cornflowerblue;
}

#sec4 .sec4_prd>div:nth-child(8) ul li:nth-child(1){
    background-color:coral;
}

#sec4 .sec4_prd>div:nth-child(9) ul li:nth-child(1){
    background-color:maroon;
}


/* =========================================================
   작은 PC 화면 보정
   1500px 이하에서만 조금씩 축소
========================================================= */

@media screen and (max-width:1500px){

    /* 공통 타이틀 */
    .section h2{
        font-size:24px;
        margin-bottom:45px;
    }


    /* sec1 */

    #sec1 .swiper ul li .txt_area{
        padding-left:clamp(100px, 10vw, 160px);
    }

    #sec1 .swiper ul li .txt_area p.big{
        font-size:24px;
        margin-bottom:16px;
    }

    #sec1 .swiper ul li .txt_area p.sub{
        font-size:15px;
    }

    #sec1 .swiper ul li .txt_area a.more{
        padding:9px 42px;
        margin-top:24px;
    }

    #sec1 .sec1_nav{
        bottom:25px;
    }


    /* sec3 */

    #sec3 .sec_inner .sec3_cont ul{
        gap:30px;
    }


    /* sec4 */

    #sec4 .sec4_prd>div ul{
        gap:50px 30px;
    }

    #sec4 .sec4_prd>div ul li.sec4_cont_li .inner{
        padding:40px 45px;
    }

    #sec4 .sec4_prd>div ul li.sec4_cont_li .inner h3{
        font-size:23px;
    }

    #sec4 .sec4_prd>div ul li.sec4_cont_li .inner p.sub{
        font-size:15px;
    }

}


/* =========================================================
   1300px 전후 PC 화면 추가 보정
========================================================= */

@media screen and (max-width:1300px){

    .sec_inner{
        width:calc(100% - 30px);
    }


    /* sec1 */

    #sec1 .swiper ul li .txt_area{
        padding-left:90px;
    }

    #sec1 .swiper ul li .txt_area p.big{
        font-size:22px;
    }

    #sec1 .swiper ul li .txt_area p.sub{
        font-size:14px;
    }

    #sec1 .swiper ul li .txt_area a.more{
        padding:8px 36px;
        font-size:12px;
    }


    /* sec4 */

    #sec4 .sec4_prd>div ul li.sec4_cont_li .inner{
        padding:35px 38px;
    }

    #sec4 .sec4_prd>div ul li.sec4_cont_li .inner h3{
        font-size:21px;
    }

    #sec4 .sec4_prd>div ul li.sec4_cont_li .inner p.sub{
        font-size:14px;
    }

}


/* =========================================================
   이미지 보호
========================================================= */

img{
    -webkit-user-drag:none;

    user-select:none;
    -webkit-user-select:none;
}
/* BASIC css end */