body.pro {
    background: #F1F3F7;
}


.main-right{margin:0 0 0 370px;}

.pro-nav{margin-bottom:48px;padding:20px 20px;background:#fff;}
.pro-nav ul{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.pro-nav ul li{width:20%;margin:7px 0;}
.pro-nav ul li a{font-size:17px;color:#333;display:block;background:#fff;line-height:22px;background:url(../images/i4.png) no-repeat left 3px;padding:0 0 0 20px;}
.pro-nav ul li.active a,.pro-nav ul li:hover a{background-image:url(../images/i4-1.png);}

.pro-list ul{margin:-20px -30px 0;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.pro-list ul li{width:33.33333333%;text-align:center;padding:20px 30px;}
.pro-list ul li .box{}
.pro-list ul li .pic{background:#fff;display:block;position:relative;overflow:hidden;}
.pro-list ul li .pic > img{width:100%;display:block;transition:transform .5s;-webkit-transition:transform .5s;}
.pro-list ul li .txt{text-align:center;margin:15px 0 0;}
.pro-list ul li .txt h6{font-size:18px;color:#000;}
.pro-list ul li .txt h6 a{display:block;line-height:20px;height:60px;overflow:hidden;}
.pro-list ul li .txt h6 a:hover{color:var(--active-color);}

.pro-list ul li:hover .box{}
.pro-list ul li:hover .pic > img{transform:scale(1.03);-webkit-transform: scale(1.03);}
.pro-list ul li:hover .txt h6 a{color:var(--active-color);}
.pro-list ul li:hover .pic .big{opacity:1;}


@media screen and (max-width:1441px) {
  .main-right {margin: 0 0 0 300px;}

}

@media screen and (max-width:1367px) {


  .pro-nav ul li a{font-size:16px;}

  .pro-list ul{margin:-20px -20px 0;}
  .pro-list ul li{padding:20px 20px;}
}

@media screen and (max-width:1281px){

  .main-right {margin: 0 0 0 270px;}
}

@media screen and (max-width:1171px){

}

@media screen and (max-width:992px){
  .main-right{margin:0;}


  .pro-list ul{margin:-15px -15px 0;}
  .pro-list ul li{padding:15px;}
}

@media screen and (max-width:768px) {


  .pro-nav{margin-bottom:25px;padding:15px;}
  .pro-nav ul li{width:33.33333%;margin:6px 0;}
  .pro-nav ul li a{font-size:16px;background-size:12px;background-position:left 5px;padding:0 0 0 17px;}

  .pro-list ul{margin:-10px -10px 0;}
  .pro-list ul li{width:50%;padding:10px 10px;}
  .pro-list ul li .txt{padding:15px 0 0;}
  .pro-list ul li .txt h6{font-size:17px;}
  .pro-list ul li .txt h6 a{line-height:30px;height:30px;}
}

@media screen and (max-width:600px) {

  .pro-nav ul li{width:50%;}
}

@media screen and (max-width:480px) {

}