*{transition: all .3s;}
.wrap{max-width: 1440px;position: relative;margin:0 auto;}
.product{margin-top:3%;}
.h1{font-size: 3rem;padding-bottom: 20px;border-bottom: 1px solid #f4f4f4;}
.product ul{display: flex;justify-content: space-between;margin:3% 0 4%;padding:0 5%;text-align: center;}
.product ul li{width: 50%;color:#020202;font-size: 1.6rem;cursor: pointer;}
.product ul li img{filter: grayscale(100%);zoom:0.75;}
.product ul li div{height: 50px;display:flex;align-items: center;justify-content: center;}
.product ul li p{margin-top: 30px;border-left: 1px dashed #b5b5b5;}
.product ul li:last-child p{border-right:1px dashed #b5b5b5; }
.product ul li:hover img,.product ul .active img{filter: grayscale(0);}
.product ul li:hover p,.product ul .active p{color:#ea5411;}

.news{margin-top: 30px;display: flex;flex-wrap: wrap;border-bottom: 1px solid #eee; }
.news a{margin-right: 3.5%;width: 31%;padding:2%;border: 1px solid #dcdcdc;margin-bottom: 30px;}
.news a:nth-child(3n){margin-right:0;}
.news a h4{font-size: 1.6rem;margin-bottom:10px;font-weight: normal;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news a span{color:#222;font-weight: 600;}
.news a p{color:#838383;line-height: 1.8;margin:10px 0 30px;}
.news a output{display: inline-block;color: #ec8d26;}
.news a:hover h4{color: #ec8d26;}
.news a:hover output{transform:translateX(20px);}
.product .list{display: flex;border-bottom: 1px solid #eee;flex-wrap:wrap;}
.product .list a{width: 23.5%;margin-left:2%;background:#f4f4f4;padding:0 0 2%;text-align: center;margin-bottom: 30px;overflow: hidden;}
.product .list a:hover p{color:#ea5411;}
.product .list a:nth-child(4n-3){margin-left: 0;}
.product .list  .pic{height: 220px;display: flex;align-items: center;justify-content: center;margin-bottom: 20px;overflow: hidden;}
.product .list  .pic img{width: 100%;}
.product .list a p{color:#acacac;font-size: 1.7rem;}
.product .list  a:hover .pic img{transform: scale(1.3);}

.wrap>.page{margin: 4% auto 0;text-align: center;background-color: transparent;}
.wrap>.page a{display:inline-block;width: 30px;height: 30px;border: 1px solid #ddd;line-height: 30px;color:#6f6f6f;}

.wrap>.page a.current,.page a:hover{color:#fff !important;background: #ea5411 !important;}
.wrap>.page a.current span,.page a:hover span{background: #fff;}
.wrap>.page a span{height: 10px;width: 1px;background:#6f6f6f;display: inline-block;}.detail{max-width: 1200px;margin:50px auto 0;}
.detail>h3{font-size: 2rem;text-align: center;margin-bottom: 30px;}
.detail .wz {color:#838383;line-height: 2;font-size: 1.5rem;padding-bottom: 20px;border-bottom: 1px solid #eee; }
.detail .wz img{margin:15px auto;display: table;}
.detail .wz p{text-indent: 2em;}
.detail .date{color:#222;text-align: center;margin-bottom: 50px;display: block;width: 100%;}
.more {display: flex;justify-content: space-between;margin-top: 10px;}
.more a{color:#222;font-weight: 600;font-size: 14px;}
.more span{display: inline-block;font-weight: normal;}
.more .prev span{transform: rotate(-90deg) translateX(-1px);margin-right: 5px;}
.more .next span{transform: rotate(90deg) ;margin-left: 5px;}
.more a:hover span,.more a:hover{color:#275899;}

@media screen and (max-width: 1500px){
    .wrap{max-width: 1300px;}
}
@media screen and (max-width:1400px){
  .wrap{max-width: 1200px;}
}
@media screen and (max-width:768px){
    .wrap{padding:0 15px;}
    .product .list{flex-wrap: wrap;}
    .product .list a{width: 48%;padding-bottom: 5%;padding-top: 3%;}
    .product .list a:nth-child(2n-1){margin-left: 0;}
    .product .list .pic{padding: 0 10%;height: 120px;}
    .product .list a p{font-size: 1.3rem;}
    .display .txt .cs a{font-size: 1.5rem;margin-right: 23px;}
    .product ul li img{max-width: 40px;max-height: 35px;}
    .product ul li p{margin-top: 13px;font-size: 1.3rem;}
    .display .product>h3{margin: 60px 0 35px;}
    .product ul{margin-bottom: 10%;}
    .product .list a{margin-bottom: 20px;margin-left: 4%;}
    .product .list a:nth-child(2n){margin-right:0;}
    .detail .date{margin-bottom: 35px;}
    .detail{margin-top: 70px;}
    .detail>h3{margin-bottom: 15px;text-align: left;}
    .more a{font-size: 1.3rem;}
    .detail .wz{font-size: 1.4rem;}
    .news a{width: 100%;margin-right:0;}

    .more{
      flex-direction: column;
    }
    .more a{font-size: 14px;}
}