.productlist{padding:58px 0; background:#f8f8f8;}
.productlist-list{float:left; width:75%; padding:0 38px 0 0;}
.productlist.left .productlist-list{float:right; padding:0 0 0 38px;}
.productlist-content{background:#fff; padding:16px;}
.productlist-content ul{margin:0;}
.productlist-content ul:after{display:block; content:''; clear:both;}
.productlist-content ul>li{float:left; width:33.3333%; padding:16px;}
.productlist-content ul>li>a{display:block;}
.productlist-content ul>li>a>div{position:relative; transition:.3s; overflow:hidden;}
.productlist-content ul>li>a>div>span{position:absolute; top:100%; left:0; right:0; transition:.3s; z-index:1; background:rgba(0,0,0,0.68); color:#fff; padding:8px;}
.productlist-content ul>li>a>div>ins{display:block; overflow:hidden;}
.productlist-content ul>li>a>div>ins>img{width:100%; display:block; transition:.3s;}
.productlist-content ul>li>a>h3{text-align:center; padding:10px 18px; border-radius:3px; background:#f8f8f8; margin-top:8px; font-weight:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.productlist-content ul>li>a>h3>span{display:block;}
.productlist-content ul>li>a>h3>u{text-decoration:none; display:block; color:red;}
.productlist-content ul>li>a:hover>div>span{transform:translateY(-100%);}
.productlist-content ul>li>a:hover>div{box-shadow:0 0 8px rgba(0,0,0,.38);}
.productlist-content ul>li>a:hover>div>ins>img{transform:scale(1.08);}
.productlist-content dir{padding:12px;}
.productlist-sub{float:left; width:25%;}
.productlist-recom ul{padding:8px;}
.productlist-recom ul:after{display:block; content:''; clear:both;}
.productlist-recom ul>li{float:left; width:50%; padding:8px;}
.productlist-recom ul>li>a{display:block;}
.productlist-recom ul>li>a>ins{display:block; overflow:hidden;}
.productlist-recom ul>li>a>ins>img{display:block; width:100%; transition:.3s;}
.productlist-recom ul>li>a:hover>ins>img{transform:scale(1.08);}
.productlist-recom ul>li>a>span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; background:#f8f8f8; padding:3px; border-radius:3px; margin-top:3px;}
@media(max-width:1200px){
.productlist{padding:38px 0;}
.productlist-list,
.productlist.left .productlist-list{float:none; width:auto; padding:0 0 18px 0;}
.productlist-sub{float:none; width:auto;}
}
@media(max-width:1200px) and (min-width:992px){
.productlist-recom ul>li{width:25%;}
}
@media(max-width:992px){
.productlist-content ul>li{width:50%;}
}
@media(max-width:767px){
.productlist{padding:18px 0;}
.productlist-content{padding:8px;}
.productlist-content ul>li{width:100%; padding:8px;}
.productlist-content ul>li>a>h3{padding:6px 16px; margin-top:6px;}
}