﻿.video-list{display:flex;flex-wrap:wrap;justify-content: space-between;}
.video-list .video-item{width:49%;margin-bottom:2%;}
.video-list .video-item:nth-child(n+3){width:32%;}
.video-list .video-item .img{width:100%;position: relative;}
.video-list .video-item .img img{width:100%;display:block;}
.video-list .video-item .img em{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);z-index:2;color:#fff;font-size:40px;width:50px;height:50px;cursor:pointer}
.video-list .video-item .popvideobox {display:none;position:fixed;top:0;left:0;z-index:9999999;width:100%;height:100%;background:rgba(0,0,0,.6)}
.video-list .video-item .popvideoflex {width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.video-list .video-item .popvideoinfo {position:relative;max-width:800px;width:85%;background:#fff;padding:10px;box-shadow:0 0 20px var(--fontcolor);}
.video-list .video-item span.popvideo-close {width:24px;height:24px;position:absolute;border-radius:50%;border:2px solid #fff;background:var(--fontcolor);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 4px var(--fontcolor);cursor:pointer;right:-15px;top:-15px;transition:.3s}
.video-list .video-item span.popvideo-close em {display:block;line-height:1;}
.video-list .video-item span.popvideo-close:hover{transform:rotate(360deg)}
.video-list .video-item .popvideoflex .iframe-container{position: relative;width:100%;height:0;padding-bottom: 56.25%;}
.video-list .video-item .popvideoflex iframe {position:absolute;top:0;left: 0;width:100%;height:100%;min-height:inherit;}
@media (max-width:768px){.video-list .video-item{width:100% !important}}
@media (max-width:550px){.video-list .video-item .popvideoflex .iframe-container{padding-bottom: 65.25%;}}