/* productlist */
.products-zt{ display: inline-block; vertical-align: top; padding: .4rem 0 .4rem; box-sizing: border-box; width: 100%; font-size: 0; border-bottom: 1px solid #ccc;}
.products-zt .main > .tit{ margin-bottom: .1rem; display: block;}
.products-zt .main > .tit h2{ font-size: .32rem; line-height: .62rem; text-transform: uppercase; text-align: center; display: block;}
.products-zt .main > .tit h2 .t-l{ display: inline-block; vertical-align: middle; width: 1.3rem; background: #e2e4e3; height: 1px; position: relative; margin-right: .2rem;}
.products-zt .main > .tit h2 .t-l::after{ content: ""; width: .1rem; height: .1rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #0061ae; display: inline-block;}
.products-zt .main > .tit h2 .t-r{ display: inline-block; vertical-align: middle; width: 1.3rem; background: #e2e4e3; height: 1px; position: relative; margin-left: .2rem;}
.products-zt .main > .tit h2 .t-r::after{ content: ""; width: .1rem; height: .1rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #0061ae; display: inline-block;}

.productslist{ width: 100%; display: block; font-size: 0;}
.productslist li{ display: inline-block; width: 31%; box-sizing: border-box; border: 2px solid #ddd; margin: .2rem 3.5% .2rem 0; position: relative; transition: all 0.3s ease-in-out;}
.productslist li:nth-of-type(3n){ margin-right: 0;}
.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: .88rem; position: relative; background: #fff; text-align: center; transition: all .5s ease-in-out;}
.productslist li .text .tit{ display: block; text-transform: uppercase; width: 100%; box-sizing: border-box; padding: 0 .2rem; position: absolute; top: 0; left: 0; line-height: .88rem; color: #b5b5b5; font-size: .16rem; transition: all 0.3s ease-in-out;}
.productslist li a{ width: 100%; display: block; position: relative;}
.productslist li:hover{ border-color: #0061ae; box-shadow: 0 0 3px #0061ae;}
.productslist li a:hover .text .tit{ color: #000;}

@media screen and ( max-width:768px){
    .nav-list-pr ul{
        flex-wrap: wrap;
        padding: 2% 0;
    }
    .nav-list-pr ul li{ width: 96%; margin: 2% 4% 2%;}
    .nav-list-pr ul li a h2{ font-size: .24rem}
    .nav-list-pr ul li a button{ height: .4rem; opacity: 1; line-height: .36rem;}

    .productslist li{
        width: 46%;
        margin: 2% 2% !important;
    }
    .products-zt{ padding: .2rem 0 0;}
    .products-zt .main > .tit h2{ display: flex; justify-content: space-between; font-size: .24rem; align-items: center;}
    .products-zt .main > .tit h2 .t-l,.products-zt .main > .tit h2 .t-r{ display: inline-flex; width: 1rem;}
    .products-zt .main > .tit h2 span:nth-of-type(2){display: inline-flex; vertical-align: middle}
    .productslist li .text .tit{ line-height: 1.5; position: relative;}
    .productslist li .text{ height: auto;}

}