@charset "utf-8";



/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {
.inner{width:calc(100% - 120px); margin:0 auto;}
.menu{overflow-x: auto; display:flex; width:100%;}
.menu a {flex-shrink: 0;  white-space: nowrap; }
/* --- 스크롤바 숨기기 (수정된 부분) --- */
.menu::-webkit-scrollbar {display: none; }
.menu {-ms-overflow-style: none;  scrollbar-width: none; }
.tabSearch{right:24px;}

.swiper-container {    width: 100%;     height: 500px; }
.swiper-slide {    width: 90dvw; }

.category{display:grid; grid-template-columns: repeat(4, 1fr);}

.caseBtn.active {padding-top: 16px;padding-bottom: 16px; border:none;}
.caseBtn1.active .caseImg1,.caseBtn2.active .caseImg2,.caseBtn3.active .caseImg3 {background: #fff;width:32px; height:32px;}
.caseBtn1.active .caseTxt1,.caseBtn2.active .caseTxt2,.caseBtn3.active .caseTxt3 {font-size:18px;}
.subBanner{width:100dvw}

.bestTop{display:grid; grid-template-columns: repeat(1 , 1fr);}
.bestBottomProduct{display:grid; grid-template-columns: repeat(2 , 1fr);}
.inputBox{ padding: 20px;}

/********** 리스트 ***********/
.productList{display:grid; grid-template-columns: repeat(3 , 1fr); }


.qaModalBox { border-radius: 0;}

}      




/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {     
.inner{width:calc(100% - 40px); margin:0 auto;} 
.tabSearch{right:16px;}  
.swiper-container {    width: 100%;     height: 450px; }
.caseBtn1.active .caseTxt1,.caseBtn2.active .caseTxt2,.caseBtn3.active .caseTxt3 {font-size:14px; display:block;}  
.caseBtn1.active .caseImg1,.caseBtn2.active .caseImg2,.caseBtn3.active .caseImg3 {background: #fff;width:24px; height:24px;}
.caseBtn.active {padding-top: 8px;padding-bottom: 8px; padding-right:20px; padding-left:20px; border:none;}
.caseBtn.active .caseImg1 img, .caseBtn.active .caseImg2 img, .caseBtn.active .caseImg3 img {    width: 18px;    height: 18px;}


.caseProduct{overflow-x: scroll; overflow-y: hidden; -ms-overflow-style: none;  scrollbar-width: none;}
.caseProduct::-webkit-scrollbar {display: none; }
.caseProduct a {flex-shrink: 0;  white-space: nowrap; }
.inputBox{ padding: 16px 12px;}

/********** 리스트 ***********/
.productList{display:grid; grid-template-columns: repeat(2 , 1fr); }



}