.productlist{padding:58px 0; background:#f8f8f8;}
.productlist-content{display:block;}
.productlist-content>ul{margin:-28px -12px 0 -12px;}  
.productlist-content>ul:after{display:block; content:''; clear:both}
.productlist-content>ul>li{float:left; width:25%; padding:0 12px; margin-top:28px;}
.productlist-content ins{display:block; overflow:hidden;}
.productlist-content ins>img{display:block; width:100%; transition:.3s;}
.productlist-content a:hover ins>img{transform:scale(1.05);}
.productlist-content span{display:block; line-height:28px; padding:14px 0;}
.productlist-content span:after{display:block; content:''; clear:both;}
.productlist-content span>h3{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.productlist-content span>i{float:right; border-left:1px dashed #d8d8d8; font-size:22px; width:38px; text-align:center; line-height:inherit;}
.productlist-content span+u{display:block; text-decoration:none; height:1px; width:100%; background:#d8d8d8; transition:.3s;}
.productlist-content span+u:before{display:block; content:''; transition:.3s; width:0; height:100%; background:#fc6b00;}
.productlist-content a:hover span+u:before{width:100%;}
.productlist-content dir{padding:38px 0 0;}
@media(max-width:1200px){
.productlist{padding:38px 0;}
.productlist-content>ul{margin:-18px -8px 0 -8px;}  
.productlist-content>ul>li{width:33.333%; padding:0 8px; margin-top:18px;}
.productlist-content dir{padding:28px 0 0;}
}
@media(max-width:992px){
.productlist-content>ul>li{width:50%;}
}
@media(max-width:767px){
.productlist{padding:18px 0;} 
.productlist-content>ul{margin:-12px -4px 0 -4px;}  
.productlist-content>ul>li{padding:0 4px; margin-top:12px;}
.productlist-content span{padding:8px 0;}
.productlist-content dir{padding:18px 0 0;}
}
@media(max-width:500px){
.productlist-content>ul>li{width:100%;}
}