.product{}
.product .list{margin:0 -8px;}
.product .list>ul:after{display:block; content:''; clear:both;}
.product .list>ul>li{float:left; padding:8px; width:33.3333%;}
.product .list>ul>li>a{display:block; background:#fff;}
.product .list>ul>li>a>span{border:1px solid #ddd; display:block; overflow:hidden; }
.product .list>ul>li>a>span>img{display:block; max-width:100%; transition:.3s;}
.product .list>ul>li>a>span:hover>img{transform:scale(1.08);}
.product .list>ul>li>a>strong{display:block; padding:16px; padding-right:52px;  position:relative; border:1px solid #ddd; margin-top:-1px;}
.product .list>ul>li>a>strong b{display:block; font-weight:normal; line-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.product .list>ul>li>a>strong i{position:absolute; z-index:2; right:-1px; top:-1px; bottom:-1px; line-height:24px; font-size:24px; border-left:1px solid #ddd; padding:16px 22px; transition:.3s;}
.product .list>ul>li>a>strong:hover i{background:#3481b5; color:#fff; border-color:#3481b5;}
@media(min-width:1200px){
.product{padding:48px 0;}
.product .list{padding-bottom:38px;}
}
@media(max-width:1199px){
.product{padding:38px 0;}
.product .list{padding-bottom:28px;}
}
@media(max-width:767px){
.product{padding:18px 0;}
.product .list{padding-bottom:18px;}
}
@media(max-width:992px){
.product .list>ul>li{width:50%;}
}
@media(max-width:767px){
.product .list{margin:0 -4px;}
.product .list>ul>li{padding:4px; width:50%;}
.product .list>ul>li>a>strong{padding:8px;}
.product .list>ul>li>a>strong b{text-align:center;}
.product .list>ul>li>a>strong i{display:none;}
}