._product{ width: 100%; overflow: hidden; position: relative; }

._product .banner .swiper-wrapper{}
._product .banner .swiper-wrapper .swiper-slide{position: relative; }
._product .banner .swiper-wrapper .swiper-slide .inn{ width: 100%; height: 100%; overflow: hidden; position: relative; overflow: hidden; }
._product .banner .swiper-wrapper .swiper-slide .inn ._imgBx{filter: brightness(0.8);}
._product .banner .swiper-wrapper .swiper-slide .inn ._imgBx::before {content:''; display: block; padding-bottom: calc(980/640*100%);}
._product .banner .swiper-wrapper .swiper-slide .inn img{}
._product .banner .swiper-wrapper .swiper-slide .inn dl{ width: 100%; position: absolute; bottom: 0; left: 0; padding: 95px 45px; box-sizing: border-box; color: #fff; }
._product .banner .swiper-wrapper .swiper-slide .inn dl dt{ font-size: 20px; letter-spacing: -0.04em; font-weight: 500; line-height: 1.3; }
._product .banner .swiper-wrapper .swiper-slide .inn dl dd{ font-size: 4.1667vw; letter-spacing: -0.03em; margin-top: 10px; text-transform: uppercase; font-family: 'Mona Sans'; font-weight: 700; }

@media screen and (min-width:821px) {
	._product .banner .swiper-wrapper .swiper-slide{width: 33.3% !important;}
}
@media screen and (min-width:821px) {}

@media screen and (min-width: 1921px){
    ._product .banner .swiper-wrapper .swiper-slide .inn dl dd{ font-size: 80px; }
}


._product .list h2{ font-size: 40px; font-family: 'Mona Sans'; letter-spacing: -0.03em; color: #484848; font-weight: 700; }
._product .list .flexbx{ display: flex; justify-content: space-between; margin-top: 25px; font-family: 'Mona Sans'; }
._product .list .flexbx .category{ display: flex; align-items: center; gap: 35px; }
._product .list .flexbx .category > a{ padding: 10px 0; font-size: 18px; letter-spacing: -0.03em; color: #b2b2b2; font-weight: 600; transition-duration: 0.2s; }
._product .list .flexbx .category > a.on{ color: #484848; }

._product .list .flexbx ._searchBtn{ display: flex; }
._product .list .flexbx ._searchBtn .inner{ box-sizing: border-box; background-color: #ededed; border-radius: 10px; padding: 0 10px; position: relative;}
._product .list .flexbx ._searchBtn .inner .bar{ display: flex; justify-content: flex-end; }
._product .list .flexbx ._searchBtn .inner .bar input{ height: 50px; border: none; font-size: 16px; letter-spacing: -0.04em; background: none; width: 0; transition-duration: 0.6s; padding: 0; margin: 0; }
._product .list .flexbx ._searchBtn .inner .bar button{ display: flex; flex-shrink: 0; font-size: 26px; color: #000; align-items: center; }
._product .list .flexbx ._searchBtn.on .inner .bar input{ width: 275px; }
html.mo ._product .list .flexbx ._searchBtn .inner .bar input{ max-width: 275px; width: 100%;}
._product .list .flexbx ._searchBtn.on .inner::before {content:''; position: absolute; right: 0; top: 0; width: 321px; height: 100%; z-index: -1;}


._product .list .gallery{ margin-top: 20px; display: flex; flex-wrap: wrap; gap: 50px 30px; }
._product .list .gallery li{ width: calc((100% - (30px * 3)) / 4); }
._product .list .gallery li .inn{ width: 100%; position: relative; }
._product .list .gallery li .inn .thumb{ display: block; width: 100%; box-sizing: border-box; transition: background-color 0.8s,color 0.8s,border-color 0.8s; position: relative; }
._product .list .gallery li .inn .thumb::after{ content: ''; display: block; padding-bottom: calc(265 / 330 * 100%); padding-bottom: calc(480 / 330 * 100%);}
._product .list .gallery li .inn .thumb img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; }
._product .list .gallery li .inn dl{ margin-top: 20px; color: #484848; text-align: center; }
._product .list .gallery li .inn dl dt{ font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }

._product .list .gallery li .inn dl dd{ font-size: 18px; font-weight: 500; letter-spacing: -0.03em; color: #484848; margin-top: 2px; line-height: 1.3; }
._product .list .gallery li .inn dl dd{ color: #a2a2a2; font-size: 16px; font-weight: 400;}



@media screen and (max-width: 1280px){
    ._product .banner .swiper-wrapper .swiper-slide .inn dl{ padding: 50px 20px; }
    ._product .banner .swiper-wrapper .swiper-slide .inn dl dt{ font-size: 16px; }

    ._product .list h2{ font-size: 32px; }
    ._product .list .flexbx .category{ gap: 25px; }
    ._product .list .flexbx .category > a{ font-size: 16px; }

    ._product .list .gallery{ gap: 40px 15px; }
    ._product .list .gallery li{ width: calc((100% - (15px * 2)) / 3); }
    ._product .list .gallery li .inn dl{ margin-top: 15px; }
    ._product .list .gallery li .inn dl dt{ font-size: 18px; }
    ._product .list .gallery li .inn dl dd{ font-size: 14px; }
}

@media screen and (max-width: 820px){
    ._product .banner .swiper-wrapper .swiper-slide .inn dl{ padding: 30px 10px; }
    ._product .banner .swiper-wrapper .swiper-slide .inn dl dt{ font-size: 14px; }

    ._product .list h2{ font-size: 28px; }
    ._product .list .flexbx{ flex-direction: column; margin-top: 15px; }
    ._product .list .flexbx ._searchBtn{ margin-left: auto; margin-top: 10px; }
    ._product .list .flexbx ._searchBtn .inner .bar input{ font-size: 14px; height: 40px; }
    ._product .list .flexbx ._searchBtn .inner .bar button{ font-size: 20px; }

    ._product .list .gallery{ gap: 40px 10px; }
    ._product .list .gallery li{ width: calc((100% - 10px) / 2); }
    ._product .list .gallery li .inn dl{ margin-top: 10px; }
    ._product .list .gallery li .inn dl dt{ font-size: 16px; }
    ._product .list .gallery li .inn dl dd{ font-size: 13px; }
}

@media screen and (max-width: 500px){
	._product .banner{display: none;}
    ._product .banner .swiper-wrapper .swiper-slide .inn dl{ padding: 30px 5%; }
    ._product .banner .swiper-wrapper .swiper-slide .inn dl dd{ font-size: 11.1667vw; }

    ._product .list h2{ font-size: 24px; }
    ._product .list .flexbx .category{ gap: 4px; flex-direction: column;}
    ._product .list .flexbx .category > a{ font-size: 14px; border: 1px solid #ddd; box-sizing: border-box; width: 100%; padding: 8px 12px; border-radius: 4px;}
	._product .list .flexbx .category > a.on{background-color: #444; color: #fff; border-color: #444;}
	._product .list .flexbx ._searchBtn .inner{border-radius: 4px;}

    ._product .list .gallery{ gap: 40px 0; }

}

@media screen and (max-width: 320px){
	._product .list .gallery li{ width: 100%; }
}