.pr-nav {
    display: block; font-size: 0;
}
.pr-nav ul {
    display: block; margin-top: .5rem;
}
.pr-nav ul li {
    width: 32%; display: inline-block; vertical-align: top; margin: 0 0 2%; box-shadow: 0 0 .2rem rgba(0,0,0,.1); transition: all 0.6s ease-in-out;
}
.pr-nav ul li:not(:nth-of-type(3n)) {
    margin-right: 2%;
}
.pr-nav ul li a {
    display: block; 
}
.pr-nav ul li a img {
    max-width: 100%;
}
.pr-nav ul li a span {
    font-size: .2rem; line-height: 3; background: #fff; text-align: center; color: #666; display: block; border-top: 2px solid #eee; font-family: "Alibaba-PuHuiTi-Regular", "微软雅黑"; transition: all 0.6s ease-in-out;
}
.pr-nav ul li:hover {
    transform: translateY(-10px);
}
.pr-nav ul li:hover a span {
    background: var(--maincolor);
}
.pr-tit{ width: 100%; display: block; height: .41rem; padding-bottom: .1rem; border-bottom: 1px solid #b6b6b6; font-size: 0;}
.pr-tit h2{ display: inline-block; min-width: 50%; font-family: "Arial Black", "Alibaba-PuHuiTi-Regular", "微软雅黑"; text-transform: uppercase; font-size: .24rem; color: #777; line-height: .3rem;}
.pr-tit h2 a,
.pr-tit h2 span {
    font-size: .24rem; color: #777; margin: 0; padding: 0;
}
.pr-tit h2 a {
    margin-right: -.1rem;
}
.pr-tit h2 a:hover {
    color: var(--maincolor);
}
.pr-tit h2 i {
    font-family: "iconfont"; display: inline-block; margin: 0 .1rem;
}
.pr-tit form{ float: right;}
.pr-tit form input{ width: 2.6rem; height: .4rem; box-sizing: border-box; padding: .05rem .1rem; border: 1px solid #ccc; outline: none; display: inline-block; vertical-align: top;
    outline: none;
    -webkit-appearance: none; /*去除系统默认的样式*/
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 点击高亮的颜色*/}
.pr-tit form button{ font-family: "iconfont"; background: #ccc; height: .4rem; width: .4rem; border: none; color: #fff; font-size: .16rem; outline: none; cursor: pointer; display: inline-block; vertical-align: top;}
.pr-tit form button:hover{ background: var(--maincolor);}


.pr-con{ display: flex; justify-content: space-between; margin-top: .4rem; width: 100%;}
.pr-con .ms{ width: 4.5rem; flex-shrink: 0;}
.pr-con .ms p{ display: block; font-size: .16rem; line-height: 1.5; padding: .06rem .3rem; color: #a0a0a0; box-sizing: border-box; position: relative;}
.pr-con .ms p::before{ content: ""; width: .12rem; height: .12rem; border-radius: 50%; background: var(--maincolor); position: absolute; left: 0; top: .1rem;}
.pr-con .img{ flex-shrink: 1; width: 100%; max-width: 10rem; height: 3.4rem;}



.productslist{ display: block; font-size: 0; margin-top: .4rem;}
.productslist .tit{ background: var(--maincolor) url(../images/pr-name.jpg) right top no-repeat; width: 100%; display: block; position: relative;}
.productslist .tit span{ color: #fff; font-size: .16rem; display: inline-block; line-height: .5rem; text-align: center; position: relative; z-index: 2;}
.productslist .tit span:nth-of-type(1){ width: 40%; position: absolute; z-index: 1; left: 0; top: -1px; font-size: .24rem; line-height: .7rem; font-weight: bold; text-align: left; box-sizing: border-box; padding-left: .2rem;}
.productslist .tit span:nth-of-type(1) {
    font-size: .16rem; letter-spacing: 1px; padding: .1rem 10% 0 .2rem; line-height: 1.5; box-sizing: border-box;
}
.productslist .tit span:nth-of-type(1)::after{
    content: ""; background: url(../images/pr-name-tit.png) no-repeat top left / 100% 100%; position: absolute; left: 0; top: 0; width: 4.3rem; height: .86rem; z-index: -1;
}

.productslist .tit span:nth-of-type(2){ width: 20%; margin-left: 40%;}
.productslist .tit span:nth-of-type(3){ width: 20%;}
.productslist .tit span:nth-of-type(4){ width: 20%;}
.productslist .con{width: 100%; display: block; position: relative;}
.productslist .con a{ width: 40%; display: inline-block; vertical-align: top; }
.productslist .con .Model,
.productslist .con .Size,
.productslist .con .Material{ width: 20%; display: inline-block;  vertical-align: top; overflow: hidden; transition: all 0.5s ease-in-out .1s; }

.productslist .con .Model p,
.productslist .con .Size p,
.productslist .con .Material p{ display: block; width: 100%; text-align: center; font-size: .14rem; line-height: 1.5; padding: 0.05rem 0; color: #a7a7a7;}

.productslist .con .Model p:nth-of-type(2n),
.productslist .con .Size p:nth-of-type(2n),
.productslist .con .Material p:nth-of-type(2n){ background: #e7e7e7;}

.productslist .con button {
    width: 60%; background: #f9f9f9; border: none; height: .4rem; line-height: .4rem; font-size: .16rem; text-align: center; outline: none; box-sizing: border-box; display: block; position: absolute; right: 0; bottom: 0; cursor: pointer;
}
.productslist .con button i{
    font-family: "iconfont"; width: .4rem; height: .4rem; text-align: center; color: var(--maincolor); font-size: .24rem; display: inline-block; transition: all 0.3s ease-in-out;
}
.productslist .con button i::after{
    content: "\e714";
}
.productslist .con button.up i {
    transform: rotate(180deg);
}
.productslist li{ width: 48%; margin-bottom: .4rem; display: inline-block; vertical-align: top; background: #f9f9f9; border-radius: 5px; overflow: hidden;}
.productslist li a img{ max-width: 100%;}
.productslist li:hover img {opacity: .8;}
.productslist li:nth-of-type(2n){ margin-left: 4%;}


.product-view{ display: block; margin: 60px 0;}
.product-view .img{ display: inline-block; width: 48%; }
.product-view .img img{ max-width: 100%;}

@media screen and (max-width: 1600px){
    .productslist .tit span:nth-of-type(1)::after{
        width: 3.5rem;
    }
}
@media screen and (max-width: 768px){
    .pr-tit{
        height: auto;
    }
    .pr-tit h2{
        margin: .1rem 0;
    }
    .pr-tit form{
        float: none;
        display: block;
    }
    .productslist .text{
        display: block;
        padding: .1rem 0;
    }
    .productslist .text .tit{
        font-size: .16rem;
        color: var(--maincolor);
        line-height: 1.5;
        display: block;
        text-align: center;
        background: #fff;
    }
    .product-view{
        display: block;
        font-size: 0;
        margin: .3rem 0;
    }
    .product-view .name{
        display: block;
        font-size: .36rem;
        line-height: 2;
        color: var(--maincolor);
        font-weight: bold;
    }
    .product-view .img{
        width: 100%;
    }
    .product-view .Model,
    .product-view .Size,
    .product-view .Material{ 
        display: inline-block;
        font-size: 0;
        width: 33.33%;
    }
    .product-view .Model span,
    .product-view .Size span,
    .product-view .Material span{ 
        display: block;
        font-weight: bold;
        font-size: .16rem;
        text-align: center;
        background: var(--maincolor);
        color: #fff;
        line-height: .4rem;
    }
    .product-view .Model p,
    .product-view .Size p,
    .product-view .Material p{ display: block; text-align: center; font-size: .14rem; line-height: 1.5; padding: 0.05rem 0; color: #a7a7a7;}
    .product-view .Model p:nth-of-type(2n),
    .product-view .Size p:nth-of-type(2n),
    .product-view .Material p:nth-of-type(2n){ background: #e7e7e7;}

    .product-view .con{
        display: block;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-top: none;
        margin-top: .3rem;
    }
    .back{
        background: var(--maincolor);
        padding: .1rem .3rem;
        font-size: .16rem;
        display: inline-block;
        color: #fff;
        margin-top: .3rem;
    }
    .pr-nav ul li {
        width: 100%;        
        display: inline-block; 
        vertical-align: top; 
        margin: 0 0 2%; 
        box-shadow: 0 0 .2rem rgba(0,0,0,.1); 
        transition: all 0.6s ease-in-out;
    }

}