@import url("page_common.css");
.bj_color{
	background: #e5e5e5;
}
/* 导航图标 */
#centerNav{
	border: 0px;
}
#centerNav ul li a.icon1{
	background: url(../icon/icon_video_01.png) no-repeat left center;
}
#centerNav ul li a.icon1:hover{
	background: url(../icon/icon_video_01_h.png) no-repeat left center;
}

#centerNav ul li a.icon2{
	background: url(../icon/icon_video_02.png) no-repeat left center;
}
#centerNav ul li a.icon2:hover, #centerNav ul li.hover a.icon2{
	background: url(../icon/icon_video_02_h.png) no-repeat left center;
}

#centerNav ul li a.icon3{
	background: url(../icon/icon_video_03.png) no-repeat left center;
}
#centerNav ul li a.icon3:hover, #centerNav ul li.hover a.icon3{
	background: url(../icon/icon_video_03_h.png) no-repeat left center;
}

#centerNav ul li a.icon4{
	background: url(../icon/icon_video_04.png) no-repeat left center;
}
#centerNav ul li a.icon4:hover, #centerNav ul li.hover a.icon4{
	background: url(../icon/icon_video_04_h.png) no-repeat left center;
}

#centerNav ul li a.icon5{
	background: url(../icon/icon_video_05.png) no-repeat left center;
}
#centerNav ul li a.icon5:hover, #centerNav ul li.hover a.icon5{
	background: url(../icon/icon_video_05_h.png) no-repeat left center;
}

#centerNav ul li a.icon6{
	background: url(../icon/icon_video_06.png) no-repeat left center;
}
#centerNav ul li a.icon6:hover, #centerNav ul li.hover a.icon6{
	background: url(../icon/icon_video_06_h.png) no-repeat left center;
}

/* 列表 */
.videoList{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.videoList li{
	width: 297px;
	background: #fff;
	margin-right: 30px;
	margin-bottom: 38px;
}
.videoList li:nth-child(4n){
	margin-right: 0px;
}
.videoList li .imgBox{
	width: 100%;
	height: 166px;
	position: relative;
	overflow: hidden;
	margin-bottom: 8px;
}
.videoList li .imgBox img{
	width: 100%;
	height: 100%;	
	transition: all 500ms;
}
.videoList li .imgBox:hover img{	
	transform: scale(1.1);
}
.videoList li .imgBox .videoPlayBtn{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	display: block;
	background: rgba(0, 0, 0, .3);
}
.videoList li .imgBox .videoPlayBtn img{
	width: 26px;
	height: 26px;
	margin-left: -13px;
	margin-top: -13px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
}
.videoList li .imgBox:hover .videoPlayBtn img{
	transform: scale(1);
}
.videoList li .txtBox h3, .videoList li .txtBox p, .videoList li .txtBox .actBox{
	width: calc(100% - 32px);
	padding: 0px 16px;	
}
.videoList li .txtBox h3, .videoList li .txtBox p{
	font-size: 16px;
	font-family: "SourceHanSansCN-Medium";
	color: #555555;
	line-height: 20px;
	height: 40px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.videoList li .txtBox .actBox{
	display: flex;
	justify-content: flex-start;
	border-top: 1px solid #d2d2d2;
	margin-top: 8px;
	padding-top: 5px;
	padding-bottom: 10px;
}
.videoList li .txtBox .actBox span{
	color: #9b9b9b;
	font-size: 14px;
	display: block;
	height: 20px;
	line-height: 20px;
	margin-right: 10px;
}
.videoList li .txtBox .actBox span.see{
	background: url(../icon/icon_see.png) no-repeat left center;
	text-indent: 25px;
}
.videoList li .txtBox .actBox span.comment{
	background: url(../icon/icon_comment.png) no-repeat left center;
	text-indent: 25px;
}
.videoList li .txtBox .actBox span.fabulous{
	background: url(../icon/icon_fabulous_02.png) no-repeat left center;
	text-indent: 25px;
}