.main{padding-top:50px;padding-bottom:60px;}

.prolist-box{padding:70px 0;}
.prolist-box h2{font-size:48px;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:24px;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;}
.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:rgba(0,0,0,0.2) url("../images/video.png") no-repeat center;display:block;}
.videolist ul li .t{padding:15px 10px;background:#F3F4F7;box-sizing:border-box;position:relative;min-height: 82px;}
.videolist ul li .t h5{
  font-size:17px;color:#333;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;}
.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);}

}