body.pro {
    background: #F1F3F7;
}

.main{padding-top:50px;padding-bottom:80px;}
.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{padding:15px 20px;text-align:center;}
.pro-list ul li .txt h6{font-size:18px;color:#000;}
.pro-list ul li .txt h6 a{display:block;line-height:60px;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;}

.rtit{text-align:center;margin-bottom:40px;}
.rtit h1{font-size:50px;color:var(--active-color);line-height:1;font-family:var(--font-family);}
.rtit h1::after{content:"";width:40px;height:4px;background:var(--active-color);margin:15px auto 0;display:block;}

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

@media screen and (max-width:1367px) {
  .rtit h1{font-size:44px;}

  .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){
  .rtit h1{font-size:40px;}
  .main-right {margin: 0 0 0 270px;}
}

@media screen and (max-width:1171px){
  .rtit h1{font-size:36px;}
}

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

  .rtit h1{font-size:32px;}

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

@media screen and (max-width:768px) {
  .main{padding-top:25px;padding-bottom:30px;}

  .rtit{margin-bottom:25px;}
  .rtit h1{font-size:28px;}

  .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) {
  .rtit h1{font-size:26px;}

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

@media screen and (max-width:480px) {
  .rtit h1{font-size:24px;}
}