/* BASIC css start */
#header{
    position:fixed !important;
    top:0;
    left:50%;
    transform:translateX(-50%);
    background:transparent !important;
    transition:background-color .2s;
}

#header.scroll{
    background-color:rgba(255,255,255,.88) !important;
}


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

.section{
    margin-bottom:70px;
}

.sec_inner{
    padding:0 5%;
}

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


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

#sec1{
    overflow:hidden;
}

#sec1 .swiper{
    position:relative;
}

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

#sec1 .swiper ul li>a{
    display:block;
    width:100%;
}

#sec1 .swiper ul li>a>img{
    display:block;
    width:100%;
}


/* 텍스트 */

#sec1 .swiper ul li .txt_area{
    overflow:visible;
    position:absolute;
    left:0;
    bottom:30px;
    width:100%;
    padding:0 9% 100px 5%;
    box-sizing:border-box;
}

#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', 'Noto Sans KR', sans-serif;
    font-size:19px;
    color:#000;
    font-weight:700;
    transition:all .5s;
    line-height:1.3;
    margin-bottom:11px;
}

#sec1 .swiper ul li .txt_area p.sub{
    color:#000;
    font-size:13px;
    font-weight:500;
    transition:all .4s;
    transition-delay:.25s;
    line-height:1.6;
}

#sec1 .swiper ul li .txt_area a.more{
    width:auto;
    font-family:'Montserrat', sans-serif;
    transition:transform .4s, opacity .4s;
    display:inline-block;
    opacity:0;
    transition-delay:.4s;
    border:1px solid #000;
    padding:5px 30px;
    color:#000;
    font-size:10px;
    font-weight:600;
    margin-top:25px;
}

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


/* 좌우 화살표 */

#sec1 .swiper_btn_prev,
#sec1 .swiper_btn_next{
    position:absolute;
    top:auto;
    bottom:20px;
    width:38px;
    height:38px;
    z-index:20;
    cursor:pointer;
}

#sec1 .swiper_btn_prev{
    left:calc(50% - 45px);
}

#sec1 .swiper_btn_next{
    right:calc(50% - 45px);
}


/* 화살표 */

#sec1 .swiper_btn_prev:before,
#sec1 .swiper_btn_next:before{
    content:'';
    position:absolute;
    top:50%;
    width:10px;
    height:10px;
    border-top:1px solid #000;
    border-right:1px solid #000;
}

#sec1 .swiper_btn_prev:before{
    left:14px;
    transform:translateY(-50%) rotate(-135deg);
}

#sec1 .swiper_btn_next:before{
    right:14px;
    transform:translateY(-50%) rotate(45deg);
}

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


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

#sec2 .sec_inner{
    padding:0;
}

#sec2 .sec_inner h2{
    padding:0 5%;
}

#sec2 .sec_inner .sec2_cont .swiper{
    padding-left:5%;
    padding-bottom:30px;
}

#sec2 .sec_inner .sec2_cont .swiper ul li{
    width:42%;
}

#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%;
    transition:all .3s;
}

#sec2 .sec_inner .sec2_cont .swiper ul li .txt_area{
    padding:15px 0;
}

#sec2 .sec_inner .sec2_cont .swiper ul li .txt_area p.tit{
    text-align:center;
    font-size:12px;
    color:#000;
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
    font-weight:500;
}

#sec2 .swiper-pagination{
    bottom:0;
    top:unset;
    width:90%;
    left:5%;
}

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

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


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

#sec3 .sec_inner .sec3_title{
    display:block;
}

#sec3 .sec_inner .sec3_title_line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

#sec3 .sec_inner .sec3_title_line a{
    display:inline-block;
    font-family:'Noto Sans KR', sans-serif;
    font-size:11px;
    line-height:1.4;
    font-weight:500;
    color:#777;
    text-decoration:underline;
}

#sec3 .sec_inner .sec3_cont ul{
    display:flex;
    flex-wrap:wrap;
    gap:20px 5%;
}

#sec3 .sec_inner .sec3_cont ul li{
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
}

#sec3 .sec_inner .sec3_cont ul li a{
    display:block;
    width:100%;
}

#sec3 .sec_inner .sec3_cont ul li a img{
    display:block;
    width:100%;
}

#sec3 .sec_inner .sec3_cont ul li{
    width:47.5%;
}


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

#sec4 .sec_inner{
    padding:0;
}

#sec4 .sec_inner h2{
    padding:0 5%;
    margin-bottom:20px;
}


/* 카테고리 */

#sec4 .sec_inner .sec4_cate{
    margin-bottom:10px;
    padding:0 5%;
}

#sec4 .sec_inner .sec4_cate ul{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

#sec4 .sec_inner .sec4_cate ul li a{
    width:100%;
    background-color:#f6f6f6;
    border-radius:20px;
    padding:8px 16px;
    box-sizing:border-box;
    text-align:center;
    font-family:'Montserrat', sans-serif;
    color:#5a5a5a;
    font-size:10px;
    font-weight:500;
    display:block;
}

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

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


/* 상품 영역 */

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

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

#sec4 .sec4_prd>div ul{
    display:flex;
    flex-wrap:wrap;
    gap:20px 5%;
}

#sec4 .sec4_prd>div ul li{
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
}

#sec4 .sec4_prd>div ul li a{
    display:block;
    width:100%;
}

#sec4 .sec4_prd>div ul li a img{
    display:block;
    width:100%;
}

#sec4 .sec4_prd>div ul li:not(:first-child){
    width:47.5%;
}


/* 좌우 상품 여백 */

#sec4 .sec4_prd>div ul li:is(
    :nth-child(2),
    :nth-child(4),
    :nth-child(6)
){
    padding-left:5%;
    box-sizing:border-box;
}

#sec4 .sec4_prd>div ul li:is(
    :nth-child(3),
    :nth-child(5),
    :nth-child(7)
){
    padding-right:5%;
    box-sizing:border-box;
}


/* 소개박스 */

#sec4 .sec4_prd>div ul li:nth-child(1){
    width:100%;
    margin-bottom:20px;
}

#sec4 .sec4_prd>div ul li.sec4_cont_li .inner{
    padding:26px 25px 55px;
    box-sizing:border-box;
}

#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:'Noto Sans KR', sans-serif;
    font-size:22px;
    font-weight:700;
    opacity:0;
    transition:all .4s;
    line-height:1.4;
    margin-bottom:15px;
    word-break:keep-all;
}

#sec4 .sec4_prd>div ul li.sec4_cont_li .inner p.sub{
    font-family:'Montserrat', 'Noto Sans KR', sans-serif;
    font-size:12px;
    font-weight:400;
    opacity:0;
    transition:all .4s;
    transition-delay:.2s;
    line-height:1.75;
    word-break:keep-all;
}

#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;
    width:auto;
    transition-delay:.35s;
    border:1px solid #fff;
    padding:5px 40px;
    color:#fff;
    font-size:10px;
    font-weight:400;
    margin-top:25px;
}


/* 애니메이션 */

#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 .sec4_caffeine ul li.sec4_cont_li{
    background-color:#BFC8B8;
}

#sec4 .sec4_milk ul li.sec4_cont_li{
    background-color:#DDD2C1;
}

#sec4 .sec4_leaf ul li.sec4_cont_li{
    background-color:#C9C1AE;
}

#sec4 .sec4_noir ul li.sec4_cont_li{
    background-color:#4B4B4B;
}

#sec4 .sec4_small ul li.sec4_cont_li{
    background-color:#D0C8C2;
}
/* BASIC css end */