@charset "utf-8";
#shopReview{position:relative;width:100%;border-bottom:1px solid #e1e1e1}
#shopReview .bg{position:absolute;z-index:-1;top:0px;left:0px;width:100%;height:520px;background:url(./img/bg.jpg) no-repeat center / cover}
#shopReview h2{padding-top:140px;text-align:center;font-size:50px;font-weight:700;color:#fff}
#shopReview h2 div{margin-bottom:10px;font-size:18px;font-weight:500;color:#fff}
#shopReview .reviewSlide{position:relative;z-index:3;padding-top:80px;width:80%}
#shopReview .reviewSlide::after{content:"";position:absolute;z-index:4;top:0px;right:0px;width:127px;height:104px;background:url(./img/mascot.png) no-repeat center / contain}
#shopReview .reviewSlide li{display:flex;gap:40px}
#shopReview .reviewSlide li a{display:block;width:100%}
#shopReview .reviewSlide li .img{overflow:hidden;width:100%;height:300px;border-radius:20px}
#shopReview .reviewSlide li img{width:100%;height:100%;object-fit:cover;transition:all .3s}
#shopReview .reviewSlide li .cate{margin-top:20px;font-size:18px;font-weight:700;color:var(--primary)}
#shopReview .reviewSlide li .subject{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;margin-top:10px;font-size:20px;font-weight:700;color:#111}
#shopReview .reviewSlide li .num{position:relative;display:flex;align-items:center;gap:30px;margin:10px 0 20px;width:max-content;font-size:15px;color:rgb(0, 0, 0, 0.5)}
#shopReview .reviewSlide li .num::after{content:"";position:absolute;top:50%;left:60%;transform:translate(-50%, -50%);width:1px;height:80%;background-color:#e1e1e1}
#shopReview .reviewSlide li .star{width:82px;height:15px;background:url(./img/icon01.png) no-repeat center / contain}
#shopReview .reviewSlide li .main_content{padding-top:20px;border-top:1px solid #e1e1e1;font-size:18px;font-weight:700;color:#111}
#shopReview .reviewSlide li .content{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;margin-top:20px;font-size:18px;font-weight:400;color:#666}
#shopReview .nav_container{position:absolute;z-index:2;top:34%;left:50%;transform:translateX(-50%);display:flex;justify-content:space-between;align-items:center;width:90%}
#shopReview .nav_container div{display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;color:#111;background-color:#fff;cursor:pointer;transition:all .3s}
#shopReview .more{position:relative;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;padding:18px 45px;margin:160px 0 180px;width:max-content;border:1px solid #e1e1e1;border-radius:32px;font-size:18px;font-weight:500;color:#111;transition:all .3s}
#shopReview .more svg{width:20px;height:20px;transition:all .3s}

@media (hover:hover){
#shopReview .reviewSlide li a:hover img{filter:brightness(0.5);transform:scale(1.1)}
#shopReview .nav_container div:hover{color:var(--primary);background-color:#fff5d6}
#shopReview .more:hover{border:1px solid var(--primary);color:#fff;background-color:var(--primary)}
#shopReview .more:hover svg{transform:translateX(5px)}
}
@media(max-width:1980px){
#shopReview .reviewSlide li .img{height:250px}
#shopReview .reviewSlide li .cate{font-size:16px}
#shopReview .reviewSlide li .subject{font-size:18px}
#shopReview .reviewSlide li .main_content{font-size:16px}
#shopReview .reviewSlide li .content{font-size:16px}
#shopReview .more{font-size:16px}
}
@media (max-width:1500px){
#shopReview .nav_container{width:calc(100% - 100px)}
#shopReview .reviewSlide{width:calc(100% - 250px)}
}
@media (max-width:1230px){
#shopReview .nav_container{width:calc(100% - 60px)}
#shopReview .bg{height:460px}
#shopReview h2{font-size:40px}
#shopReview .reviewSlide{width:calc(100% - 200px)}
#shopReview .reviewSlide li .img{height:210px}
#shopReview .reviewSlide li .cate{font-size:15px}
#shopReview .more{margin:120px 0 130px}
}
@media (max-width:1024px){
#shopReview .bg{height:420px}
#shopReview h2{padding-top:120px;font-size:35px}
#shopReview h2 div{font-size:16px}
#shopReview .nav_container{width:calc(100% - 30px)}
#shopReview .reviewSlide{width:calc(100% - 170px);padding-top:70px}
#shopReview .reviewSlide::after{width:110px}
#shopReview .reviewSlide li .img{height:190px}
#shopReview .more{margin-top:100px}
}
@media (max-width:768px){
#shopReview h2{padding-top:100px;font-size:33px}
#shopReview .nav_container div{width:40px;height:40px}
#shopReview .reviewSlide{width:calc(100% - 140px)}
#shopReview .reviewSlide::after{width:95px}
#shopReview .reviewSlide li .subject{margin-top:5px}
#shopReview .reviewSlide li .main_content{font-size:15px}
#shopReview .reviewSlide li .content{margin-top:10px;font-size:15px}
#shopReview .reviewSlide li .num{gap:20px;margin:5px 0 15px;font-size:14px}
#shopReview .more{gap:10px;margin:70px 0 100px;padding:15px 30px;font-size:15px}
}
@media (max-width:480px){
#shopReview .bg{height:350px}
#shopReview h2{padding-top:60px;font-size:25px}
#shopReview h2 div{font-size:15px}
#shopReview .nav_container{justify-content:center;gap:10px;position:inherit;margin-top:20px}
#shopReview .reviewSlide{width:calc(100% - 30px);padding-top:60px}
#shopReview .reviewSlide::after{width:85px}
#shopReview .reviewSlide li .img{height:160px;border-radius:10px}
#shopReview .reviewSlide li .subject{font-size:16px}
#shopReview .more{gap:5px;margin:60px 0 80px;padding:13px 25px;font-size:14px}
#shopReview .reviewSlide li .cate{font-size:14px}
#shopReview .reviewSlide li .main_content{padding-top:15px;font-size:14px}
#shopReview .reviewSlide li .content{font-size:14px}
#shopReview .reviewSlide li .num{font-size:13px}
#shopReview .reviewSlide li .star{width:70px}
}
@media (max-width:380px){
#shopReview h2{font-size:23px}
#shopReview .nav_container div{width:35px;height:35px}
#shopReview .nav_container div svg{width:15px;height:15px}
#shopReview .reviewSlide li .img{height:190px}
#shopReview .more{margin-top:40px}
}