/* BASIC css start */
#contentWrap{
    width:1500px;
    font-family:'Noto Sans KR', sans-serif;
}


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

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

.sec_inner{
    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{}

#sec1 .swiper{}

#sec1 .swiper ul{}

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

/* 배너 이미지는 링크 없이 직접 출력 */
#sec1 .swiper ul li>img{
    display:block;
    width:100%;
}

#sec1 .swiper ul li .txt_area{
    overflow:visible;
    position:absolute;
    left:50%;
    top:50%;
    transform:translateY(-50%);
    padding-left: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;
}

#sec1 .swiper-pagination{
    width:auto;
    top:50%;
    right:50%;
    bottom:unset;
    left:unset;
    z-index:19;
    transform:translateX(750px);
}

#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;
}

/* 기존 아래 화살표 이미지를 180도 돌려 이전 버튼으로 사용 */
#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{}

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

#sec2 .sec_inner .sec2_cont .swiper ul{}

#sec2 .sec_inner .sec2_cont .swiper ul li{}

#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{
    width:100%;
    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', 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);
}

#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', 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{}

#sec3 .sec_inner .sec3_cont ul{
    display:grid;
    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%;
}

#sec3 .sec_inner .sec3_cont ul li:nth-child(2){
    grid-area:a;
}

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

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

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

#sec3 .sec_inner .sec3_cont ul li:nth-child(1) .thumb img{
    width:730px;
    height:816px;
    object-fit:cover;
}

#sec3 .sec_inner .sec3_cont ul li:not(:nth-child(1)){}

/* 상품명 한글 / 영문 혼합 대응 */
#sec3 .sec_inner .sec3_cont ul li .info{
    height:84px;
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
}

#sec3 .sec_inner .sec3_cont ul li:not(:nth-child(1)) .thumb img{
    width:345px;
    height:345px;
    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;
    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{}

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

#sec4 .sec4_prd>div ul{
    display:grid;
    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:first-child{
    height:410px;
}

/* 상품명 한글 / 영문 혼합 대응 */
#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 img{
    width:345px;
    height:345px;
    object-fit:cover;
}

#sec4 .sec4_prd>div ul li:nth-child(1){
    grid-area:a;
    height:100%;
    width:730px;
}

#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', 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;
}

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

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

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

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

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


/* =========================================================
   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;
}


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

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