@charset "utf-8";
#shopCate{position:relative;width:100%}
#shopCate .cateList{display:flex;align-items:center;gap:20px;margin:80px auto;width:70%}
#shopCate .cateList li{width:calc(100% / 8 - 10px)}
#shopCate .cateList li a{display:flex;flex-direction:column;align-items:center}
#shopCate .cateList li .icon{display:flex;align-items:center;justify-content:center;width:100px;height:100px;border:1px solid #f4f4f4;border-radius:10px;background-color:#f4f4f4;transition:all .3s}
#shopCate .cateList li .icon img{opacity:.4;transition:all .2s}
#shopCate .cateList li h3{margin-top:15px;font-size:18px;font-weight:600;color:#111;transition:all .3s}
#shopCate .product{display:flex;gap:20px;margin:150px auto;width:90%}
#shopCate .product .tit{flex-shrink:0;width:450px}
#shopCate .product .tit .cate{padding:6px 12px;width:max-content;border-radius:20px;font-size:15px;font-weight:600;color:#fff;background-color:var(--primary)}
#shopCate .product .tit h2{margin-top:35px}
#shopCate .nav_container{display:flex;align-items:center;gap:10px;margin-top:60px}
#shopCate .nav_container div{display:flex;justify-content:center;align-items:center;width:60px;height:60px;border:1px solid #e1e1e1;border-radius:50%;cursor:pointer;transition:all .3s}
#shopCate .nav_container div svg{width:20px;height:20px;color:#111;transition:all .3s}
#shopCate .productSlide{position:relative;padding-left:40px;width:100%}
#shopCate .productSlide .bg{position:absolute;z-index:2;top:200px;left:0px;width:123px;height:105px;background:url(./img/mascot.png) no-repeat center / contain}
#shopCate .productSlide li{width:100%}
#shopCate .productSlide li .img{overflow:hidden;width:100%;height:350px;border-radius:20px}
#shopCate .productSlide li img{width:100%;height:100%;object-fit:cover;transition:all .3s}
#shopCate .productSlide .cate{margin:20px auto 0;width:85%}
#shopCate .productSlide .subject{margin:10px auto 0;width:85%}

@media (hover:hover){
#shopCate .cateList li a:hover .icon{border:1px solid var(--primary);background-color:#f4f9f1}
#shopCate .cateList li a:hover .icon img{opacity:1}
#shopCate .cateList li a:hover h3{color:var(--primary)}
#shopCate .nav_container div:hover{border:1px solid var(--primary);background-color:var(--primary)}
#shopCate .nav_container div:hover svg{color:#fff}
#shopCate .productSlide li a:hover img{filter:brightness(0.5);transform:scale(1.1)}
}
@media(max-width:1980px){
#shopCate .cateList{margin:90px auto;width:80%}
#shopCate .cateList li h3{font-size:16px}
#shopCate .product .tit h2{margin-top:30px}
#shopCate .nav_container{margin-top:50px}
#shopCate .productSlide li .img{height:300px}
#shopCate .productSlide .bg{top:170px}
}
@media(max-width:1770px){
#shopCate .cateList{gap:0;width:calc(100% - 100px)}
#shopCate .cateList li{width:100%}
#shopCate .cateList li h3{white-space:nowrap}
#shopCate .product{gap:0}
#shopCate .product .tit{width:330px}
}
@media(max-width:1230px){
#shopCate .cateList{align-items:flex-start;width:calc(100% - 60px);margin:70px auto}
#shopCate .cateList li h3{font-size:15px;white-space:normal;text-align:center}
#shopCate .product{width:calc(100% - 100px);margin:130px auto}
#shopCate .product .tit{width:300px}
#shopCate .product .tit h2{font-size:35px}
#shopCate .productSlide{padding-left:30px}
#shopCate .productSlide li .img{height:275px}
#shopCate .productSlide .bg{top:140px}
}
@media(max-width:1024px){
#shopCate .cateList{flex-wrap:wrap;row-gap:30px;width:80%;margin:60px auto}
#shopCate .cateList li{width:calc(100%/4)}
#shopCate .cateList li .icon{width:85px;height:85px}
#shopCate .cateList li .icon img{opacity:1}
#shopCate .product{display:block;width:calc(100% - 30px)}
#shopCate .product .tit{position:relative;width:100%;margin-bottom:50px}
#shopCate .nav_container{position:absolute;right:0;bottom:0;margin-top:0}
}
@media(max-width:768px){
#shopCate .cateList{row-gap:20px;width:calc(100% - 30px)}
#shopCate .product{margin:100px auto}
#shopCate .product .tit .cate{font-size:14px}
#shopCate .product .tit h2{font-size:30px}
#shopCate .nav_container div{width:50px;height:50px}
#shopCate .productSlide{padding-left:20px}
#shopCate .productSlide li .img{height:230px}
#shopCate .productSlide .bg{top:110px;width:105px}
#shopCate .productSlide .cate{width:90%}
#shopCate .productSlide .subject{width:90%;margin-top:5px}
}
@media(max-width:480px){
#shopCate .cateList{row-gap:15px;margin:35px auto}
#shopCate .cateList li{width:calc(100%/3)}
#shopCate .cateList li .icon{width:70px;height:70px}
#shopCate .cateList li .icon img{height:35px}
#shopCate .cateList li h3{margin-top:12px;font-size:14px}
#shopCate .product{margin:60px auto}
#shopCate .product .tit{margin-bottom:40px}
#shopCate .product .tit .cate{padding:3px 10px;font-size:13px}
#shopCate .product .tit h2{margin-top:20px;font-size:23px}
#shopCate .productSlide li .img{height:240px;border-radius:10px}
#shopCate .nav_container{gap:5px}
#shopCate .nav_container div{width:40px;height:40px}
#shopCate .productSlide .cate{width:100%;margin:20px 10px 0}
#shopCate .productSlide .subject{width:100%;margin:5px 10px 0}
}
@media(max-width:380px){
#shopCate .product .tit{margin-bottom:35px}
#shopCate .product .tit h2{font-size:20px}
#shopCate .nav_container div{width:35px;height:35px}
#shopCate .nav_container div svg{width:15px;height:15px}
#shopCate .productSlide li .img{height:220px}
#shopCate .productSlide .bg{top:105px;width:95px}
}