/* productlist */
.product-box{ width: 100%; display: block; font-size: 0; padding-top: .4rem;}
.product-box .tit{ display: block; text-align: center; margin-bottom: .34rem;}
.product-box .tit i{ font-family: "iconfont2"; color: #40b1c1; line-height: .54rem; display: block;  font-size: .48rem;}
.product-box .tit h2{ display: block; font-size: .18rem; font-weight: bold; color: #707070; line-height: .27rem;}
.productslist{ width: 100%; display: block; font-size: 0;}
.productslist li{ display: inline-block; width: 32%; position: relative;}
.productslist li .pic{ display: block; width: 100%;}
.productslist li .pic img{ max-width: 100%; transition: all 0.3s ease-in-out;}
.productslist li .text{ width: 100%; display: block; height: 100%; position: relative; position: absolute; top: 0; left: 0;  text-align: center; transition: all .5s ease-in-out;}
.productslist li .text .tit{ display: block; text-transform: uppercase; width: 100%; position: absolute; left: 0; top: 50%; line-height: .24rem; transform: translateY(-50%); color: #b5b5b5; font-size: .16rem; opacity: 0; transition: all 0.3s ease-in-out;}
.productslist li a{ width: 100%; display: block; position: relative;}
.productslist li a:hover .text{ background: rgba(64,177,193,.5);}
.productslist li a:hover .text .tit{ color: #fff; opacity: 1;}

@media screen and ( min-width:768px) {
.productslist {display: flex;justify-content: space-between;flex-wrap: wrap;}
.productslist li .pic img{width: 100%; height: 4.1rem;object-fit: cover;object-position: top;border: 1px solid #ddd;}
.productslist li .text {height: 4.1rem; font-size: }
.productslist li .text .tit{ font-size: .2rem; }
.productslist li .produvt-name {font-size: .16rem;line-height: 3;color: #333;font-weight: bold;}
}


@media screen and ( max-width:768px) {
    .productslist li .text{ width: 100%; display: block; position: relative; text-align: center; transition: all .5s ease-in-out;}
    .productslist li .text .tit{ display: block; text-transform: uppercase; width: 100%; position: relative; left: 0; top: 0; line-height: .6rem; transform: translateY(0%); color: #b5b5b5; font-size: .16rem; opacity: 1; transition: all 0.3s ease-in-out;}
    .productslist li a{ width: 100%; display: block; position: relative;}
    
    .productslist li{
        width: 96%;
        margin: 2% 2% 0;
    }

    
}