
/*videos-list */
.clearfloat:after{content:" ";display:table}
.clearfloat:after{clear:both}
.videos-list{padding-bottom:70px;padding-top:45px}
.videosbox{background:#fff;border-radius:10px;padding:35px}
.videos-leftimg{width:520px;overflow:hidden}
.videos-ul{margin-left:-2%}
.videos-ul li{width:18%;float:left;margin-left:2%;border-radius:8px;padding:19px;margin-bottom:20px;transition:all .3s;background:#fff}
.videos-ul li:hover{box-shadow:0 0 10px 0 rgba(0,0,0,.1)}
.videos-ul li .img{height:100%;display:flex;align-items:center;text-align:center;width:100%;position:relative;overflow:hidden}
.videos-ul li .img img{display:block;margin:0 auto;position:relative;max-height:100%;transition:all .3s}
.videos-ul li:hover .img img{transform:scale(1.15)}
.videos-ul li .hover-div{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:10;opacity:0;transition:all .4s}
.videos-ul li:hover .hover-div{opacity:1}
.videos-ul li .hover-div i{width:60px;height:60px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:url(http://demo2.92wailian.com/k495/skin/images/i.png) no-repeat}
.videos-ul li h3{font-size:16px;color:#333;font-weight:700;height:38px;line-height:38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}
.videos-ul li:hover h3{color:#005bc1}
.videos-ul li p{font-size:14px;color:#818181;line-height:20px;margin-bottom:18px;height:40px;overflow:hidden}
.videos-ul li span{display:inline-block;font-size:16px;height:32px;line-height:32px;color:#333;background:#ebebeb;padding:0 20px;border-radius:16px}
@media screen and (max-width: 1620px) {.videos-ul li{width:23%;margin-left: 2%;}
@media screen and (max-width: 1200px) {.videos-ul li{width:31.33%;margin-left: 2%;}
@media screen and (max-width: 980px) {.videos-ul li{width:48%;margin-left: 2%;}
@media screen and (max-width: 320px) {.videos-ul li{width:100%;}
/*videos-list End*/
    
