.productlist{padding:88px 0; background:rgb(255,255,255); color:rgb(30,30,30);}
.productlist a{color:rgb(30,30,30);}
.productlist>article{width:1920px;}
.productlist .list{}
.productlist .list>ul{margin:0 -18px;}
.productlist .list>ul:after{display:block; content:''; clear:both;}
.productlist .list>ul>li{width:25%; float:left; padding:0 18px; margin-bottom:48px;}
.productlist .list>ul>li>span{display:block; transition:.28s; overflow:hidden; padding:18px; border-radius:3px; border:1px solid #e8e8e8; background:rgba(255,255,255,0.69);}
.productlist .list>ul>li>span>a.img{display:block; overflow:hidden; margin:-18px; margin-bottom:0;}
.productlist .list>ul>li>span>a.img>img{display:block; width:100%; transition:.28s;}
.productlist .list>ul>li>span>h3{display:block; font-weight:bold; margin:18px 0 8px 0;}
.productlist .list>ul>li>span>u{display:block; text-decoration:none; font-weight:bold; margin-bottom:12px; color:red;}
.productlist .list>ul>li>span>dfn{display:block; font-style:normal;}
.productlist .list>ul>li>span>dfn>dl{display:table; margin:4px 0;}
.productlist .list>ul>li>span>dfn>dl>dt{display:table-cell; white-space:nowrap; color:rgb(133,133,133);}
.productlist .list>ul>li>span>dfn>dl>dd{display:table-cell;}
.productlist .list>ul>li>span>a.btns{padding:4px 16px; margin-top:12px; color:#fff;}
.productlist .list>ul>li>span>a.btns:hover{padding:4px 24px;}
.productlist .list>ul>ol:nth-child(8n){float:left; width:100%;}
.productlist .list>ul>li>span:hover{box-shadow:0 0 18px rgba(0,0,0,.18); transform:translateY(-4px);}
.productlist .list>ul>li>span>a.img:hover>img{transform:scale(1.08);}
.productlist dir>ol>li>a:not(.on){background:rgba(255,255,255,0.69);}
@media(max-width:1600px){
.productlist .list>ul{margin:0 -12px;}
.productlist .list>ul>li{padding:0 12px; margin-bottom:38px;}
}
@media(max-width:1200px){
.productlist{padding:48px 0;}
.productlist .list>ul>li{width:33.3333%; margin-bottom:28px;}
.productlist .list>ul>ol:nth-child(8n){float:none; width:auto;}
.productlist .list>ul>ol:nth-child(6n){float:left; width:100%;}
}
@media(max-width:992px){
.productlist .list>ul>li{width:50%;}
.productlist .list>ul>ol:nth-child(6n){float:none; width:auto;}
.productlist .list>ul>ol:nth-child(4n){float:left; width:100%;}
}
@media(max-width:767px){
.productlist{padding:18px 0;}
.productlist .list>ul>li{width:100%; margin-bottom:18px;}
.productlist .list>ul>ol:nth-child(4n){float:none; width:auto;}
}
