@charset "UTF-8";

.list .play{
	position: absolute;
	top:35%;
	left:45%;
	z-index:2;
}

.content .list li {
	width: 32%;
	float: left;
	margin-right: 2%;
	margin-top: 20px;
}
.content .list li .v-flex::after { padding-bottom: 50% }
.content .list li:nth-child(3n) {
	margin-right: 0;
}
.content .list li p {
	text-align: center;
	margin-top: 12px;
}

.video-wrap {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	top: 0;
	left: 0;
  z-index: 10;
  display: none;
}
.video-wrap video {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #000;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}
.page-navs li {
	width: 300px;
}
@media (max-width: 760px){
  .list ul {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
	}
	.content .list li {
		width: 46%;
		margin-right: auto;
		margin-top: 15px;
		float: none;
	}
	.content .list li:nth-child(3n) {
		margin-right: auto;
	}
	.list .play{top:20%;left:40%;}
  .video-wrap video{
    width: 100%;
	}
	.content .list li .poster { width: 100%; height: 192px; }
}