@charset "utf-8";
#shopBest{position:relative;margin:150px auto;width:90%}
#shopBest h2{position:relative;padding-right:50px;width:max-content}
#shopBest h2::after{content:"";position:absolute;top:50%;right:0px;transform:translateY(-50%);width:38px;height:26px;background:url(./img/icon.png) no-repeat center / contain}
#shopBest ul{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:30px;margin-top:70px}
#shopBest ul li .img{overflow:hidden;position:relative;width:100%;height:290px;border-radius:10px}
#shopBest ul li img{width:100%;height:100%;object-fit:cover;transition:all .3s}
#shopBest ul li .number{position:absolute;z-index:2;top:10px;left:10px;display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;font-size:15px;font-weight:600;color:#fff;background-color:#111;transition:all .3s}
#shopBest ul li .cate{margin:20px auto 0;width:90%}
#shopBest ul li .subject{margin:10px auto 0;width:90%}
#shopBest ul li .hoverEvent{opacity:0;display:flex;flex-direction:column;gap:12px;position:absolute;z-index:2;top:55%;left:50%;transform:translate(-50%, -50%);transition:all .3s}
#shopBest ul li .hoverEvent .mascot{width:107px;height:84px;background:url(./img/mascot.png) no-repeat center / contain}
#shopBest ul li .hoverEvent .txt{padding-left:18px;font-size:18px;font-weight:600;color:#fff}

@media (hover:hover){
#shopBest ul li a:hover img{filter:brightness(0.3);transform:scale(1.1)}
#shopBest ul li a:hover .number{background-color:var(--primary)}
#shopBest ul li a:hover .hoverEvent{opacity:1;top:50%}
}

@media(max-width:1980px){
#shopBest ul li .img{height:240px}
}
@media (max-width:1500px){
#shopBest ul{gap:20px}
#shopBest ul li .img{height:220px}
}
@media (max-width:1230px){
#shopBest{width:calc(100% - 100px);margin:130px auto}
#shopBest ul{grid-template-columns:repeat(3,1fr);gap:40px 20px;margin-top:60px}
#shopBest ul li .img{height:240px}
#shopBest ul li .subject{margin-top:5px}
}
@media (max-width:1024px){
#shopBest{width:calc(100% - 30px)}
#shopBest ul li .img{height:220px}
}
@media (max-width:768px){
#shopBest{margin:100px auto}
#shopBest ul{grid-template-columns:repeat(2,1fr);gap:30px 15px;margin-top:50px}
}
@media (max-width:480px){
#shopBest{margin:60px auto}
#shopBest h2{padding-right:40px}
#shopBest h2::after{width:30px}
#shopBest ul{gap:20px 15px;margin-top:40px}
#shopBest ul li .img{height:160px}
#shopBest ul li .cate{width:100%;margin:10px 10px 0}
#shopBest ul li .subject{width:100%;margin:3px 10px 0}
}
@media (max-width:380px){
#shopBest ul{grid-template-columns:repeat(1,1fr);gap:25px}
#shopBest ul li .img{height:200px;}
}