
/* listVideo */
.flexWrap {
    flex-wrap: wrap;
    -webkit-box-flex: wrap;
    -webkit-flex-wrap: wrap;
    -moz-box-flex: wrap;
    -ms-flex-wrap: wrap;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.listVideo_ul li{width: 48.5%; margin-right: 3%;}
.listVideo_ul li:nth-child(2n){margin-right: 0;}
.listVideo_ul li:nth-child(n+3){margin-top: 3%;}

.video_item{position: relative; padding-bottom: 56px;}
.video_item .pro_pic{padding-bottom: 60%;}
.video_item .pro_pic::before{position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: ''; background: rgba(0, 0, 0, 0.4); z-index: 1; transition: all 0.5s ease;}
.video_item .item_icon{position: absolute; width: 60px; height: 60px; background: url(./img/play_b.png) no-repeat center/ 20px auto; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; content: ''; border-radius: 50%;}
.video_item .title{font-family: 'Lato-Bold'; margin: 20px 0 12px; text-align: left; line-height: 1.5; font-size: 20px; color: #000;}
.video_item .brief{font-family: 'Lato-LIght'; line-height: 28px; height: 56px; position: absolute; left: 0; bottom: 0; width: 100%; color: #666;}
.video_item:hover .pro_pic img{transform: scale(1.05);}
.video_item:hover .pro_pic::before{background: rgba(0, 0, 0, 0.25);}
.video_item:hover .title{color: var(--commonColor);}
.video_item:hover .brief{color: #333;}
.video_item:hover .item_icon{background-image: url(./img/play.png); background-color: #e61e1a;}
.pubPic {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
   
}.pubPic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media only screen and (max-width: 1200px) {
	.video_item .title{font-size: 19px; margin: 15px 0 8px;}
	.video_item .item_icon{width: 52px; height: 52px; background-size: 16px auto;}
}
@media only screen and (max-width: 980px) {
	.listVideo_ul .video_item{width: 100%; margin-right: 0;}
	.listVideo_ul li:nth-child(n+2){margin-top: 24px;}
	.listVideo_ul .video_item .title{min-height: unset; height: auto; display: block; font-size: 18px;}
}

/* innerVideo */
.sub_th{margin-top: 3%;}

@media only screen and (max-width: 980px) {
	
	.video_div{margin-top: 20px;}
}












