.main{padding-top:50px;padding-bottom:60px;font-family: var(--font-family);}

.prolist-box{padding:70px 0;font-family: var(--font-family);}
.prolist-box h2{font-size: 45px;color:#000;line-height:1;font-weight:700;text-align:center;}

.prolist-nav{margin-top:45px;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.prolist-nav li{font-size: 22px;color:#7c7c7c;font-weight:300;}
.prolist-nav li+li{margin-left:90px;}
.prolist-nav li a{color:#7c7c7c;}
.prolist-nav li.active a{color:var(--active-color);}

.videolist{margin-top: 20px}
.videolist ul{margin:0 0 0 -2%;}
.videolist ul li{float:left;width:31.333333%;margin:0 0 25px 2%;}
.videolist ul li .v{position:relative;width:100%;display:block;overflow:hidden;    border: 1px solid #dedede;
    box-shadow: 5px 5px 40px rgba(0,0,0,.2);}
.videolist ul li .v img{width:100%;display:block;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}
.videolist ul li .v::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:url("../images/video.png") no-repeat center;display:block;}
.videolist ul li .t{padding:15px 10px;background: #455164;box-sizing:border-box;position:relative;min-height: 110px;}
.videolist ul li .t h5{
  font-size:17px;
  color: #fff;
  text-align:center;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  }
 .videolist ul li .t p {
    color: #fff;
    text-align: center;
}
.videolist ul li:hover .v::after{background-color:rgba(0,0,0,0.5);}
.videolist ul li:hover img{transform:scale(1.05);-webkit-transform: scale(1.05);}


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

.prolist-box h2{font-size:44px;}

.prolist-nav li{font-size:22px;}
.prolist-nav li+li{margin-left:70px;}
}

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

.prolist-box h2{font-size:40px;}
}

@media screen and (max-width:1281px){
.prolist-box h2{font-size:36px;}
}

@media screen and (max-width:992px){
.prolist-box h2{font-size:32px;}

}


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


.prolist-box h2{font-size:28px;}

.prolist-box{padding:30px 0;}
.prolist-nav{margin-top:25px;}
.prolist-nav li{font-size:18px;}
.prolist-nav li + li{margin-left: 20px;}

.main{padding-top:25px;padding-bottom:30px;}

.videolist ul li{float:left;width:48%;margin:0 0 25px 2%;}

}




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

.prolist-box h2{font-size:24px;}

.videolist ul li{float:left;width:48%;margin:0 0 25px 2%;}
.videolist ul li .v::after{transform: scale(0.5);background-color: rgb(0,0,0,0);}
}


@media screen and (max-width:480px) {
.prolist-box h2{font-size:22px;}

.videolist ul li{float:left;width:48%;margin:0 0 25px 2%;}
.videolist ul li .v::after{transform: scale(0.5);background-color: rgb(0,0,0,0);}
}

@media screen and (max-width:400px) {
.videolist ul{margin:0;}
.videolist ul li{float:none;width:100%;margin:0 0 15px;}
.videolist ul li .v::after{transform: scale(0.5);background-color: rgb(0,0,0,0);}

}