.row-product-i1{padding:95px 0 141px;overflow:hidden}
.product-list-i1{margin:0 -2px;font-size:0}
.product-list-i1 li{padding:0 2px;margin-bottom:4px;display:inline-block;vertical-align:top;width:33.33%}
.product-list-i1 .con{display:block;position:relative;box-shadow:0 10px 20px 0 rgba(208,208,208,.3);overflow:hidden}
.product-list-i1 .pic{padding-top:64.29%;position:relative;overflow:hidden}
.product-list-i1 .pic img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.product-list-i1 .mask{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.08);z-index:2;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.product-list-i1 .mask .mask-inner{padding:0 20px;position:absolute;left:0;top:72%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.product-list-i1 .mask h4{padding:18px 0;font-size:30px;color:#fff;text-align:center;position:relative;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.product-list-i1 .mask h4:after{content:'';position:absolute;left:50%;bottom:0;width:78px;height:3px;background-color:#fff;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);opacity:0;width:0;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.product-list-i1 .mask .txt{font-size:16px;color:#fff;text-align:center;line-height:1.6;height:0;opacity:0;filter:alpha(opacity=0);overflow:hidden;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
.product-list-i1 .hide .pic img{-webkit-filter:grayscale(100%);filter:grayscale(100%)}
.product-list-i1 .con:hover .mask,.product-list-i1 .show .mask{background-color:rgba(0,76,160,.9)}
.product-list-i1 .con:hover .mask .mask-inner,.product-list-i1 .show .mask .mask-inner{top:50%}
.product-list-i1 .con:hover .mask h4,.product-list-i1 .show .mask h4{font-size:36px}
.product-list-i1 .con:hover .mask h4:after,.product-list-i1 .show .mask h4:after{opacity:1;width:78px}
.product-list-i1 .con:hover .mask .txt,.product-list-i1 .show .mask .txt{margin-top:20px;height:4.8em;opacity:1;filter:alpha(opacity=100)}
.product-list-i1.product-list2-i1 li{width:25%}
.product-list-i1.product-list2-i1 .pic{padding-top:85.96%}
.product-list-i1.product-list3-i1 li{width:50%}
.product-list-i1.product-list3-i1 .pic{padding-top:42.74%}
@media only screen and (max-width:1439px){
.row-product-i1{padding:76px 0 112px}
.product-list-i1 .mask h4{padding:14px 0;font-size:24px}
.product-list-i1 .mask h4:after{height:2px}
.product-list-i1 .con:hover .mask h4,.product-list-i1 .show .mask h4{font-size:28px}
.product-list-i1 .con:hover .mask h4:after,.product-list-i1 .show .mask h4:after{width:62px}
}
@media only screen and (max-width:1199px){
.row-product-i1{padding:60px 0}
.product-list-i1 .mask h4{padding:10px 0;font-size:18px}
.product-list-i1 .mask .txt{font-size:14px}
.product-list-i1 .con:hover .mask h4,.product-list-i1 .show .mask h4{font-size:20px}
.product-list-i1 .con:hover .mask h4:after,.product-list-i1 .show .mask h4:after{width:50px}
}
@media only screen and (max-width:767px){
.row-product-i1{padding:40px 0}
.product-list-i1 li,.product-list-i1.product-list2-i1 li,.product-list-i1.product-list3-i1 li{display:block;width:100%}
.product-list-i1 .mask h4{font-size:18px}
.product-list-i1 .con:hover .mask h4,.product-list-i1 .show .mask h4{font-size:18px}
.product-list-i1 .con:hover .mask h4:after,.product-list-i1 .show .mask h4:after{width:40px}
}