ul    { padding:0px; margin:0px; }
ul li { padding:0px; margin:0px; list-style:none; }

.video-popup         { display:none; width:100%; height:100%; position:fixed; top:0%; left:0%; z-index:99999; }
.video-popup::before { background-color: rgba(0,0,0,0.95); content:''; width:100%; height:100%; position:absolute; }
.video-popup.active  { display:block; }

.video-popup .video-popup-main .video             { width:900px; height:680px; position:absolute; transform:translate(-50%, -50%); top:50%; left:50%; overflow:hidden; z-index:1; }
.video-popup .video-popup-main .video .iframe     { width:100%; height:100%; border:0px; }
.video-popup .video-popup-main .video ul          { left:0px; background-color: rgba(0,0,0,0); height:100%; position:absolute; width:9400px; transition: left 0.3s; }
.video-popup .video-popup-main .video ul li       { width:900px; height:630px; float: left; }
.video-popup .video-popup-main .video ul .title   { height:30px; line-height:30px; font-size:32px; font-weight:500; color:#c5c5c5; text-align:center; margin:0px; margin-bottom:15px; }
.video-popup .video-popup-main .video ul.index0   { left:calc(-900px * 0); }
.video-popup .video-popup-main .video ul.index1   { left:calc(-900px * 1); }
.video-popup .video-popup-main .video ul.index2   { left:calc(-900px * 2); }
.video-popup .video-popup-main .video ul.index3   { left:calc(-900px * 3); }
.video-popup .video-popup-main .video ul.index4   { left:calc(-900px * 4); }
.video-popup .video-popup-main .video ul.index5   { left:calc(-900px * 5); }
.video-popup .video-popup-main .video ul.index6   { left:calc(-900px * 6); }
.video-popup .video-popup-main .video ul.index7   { left:calc(-900px * 7); }
.video-popup .video-popup-main .video ul.index8   { left:calc(-900px * 8); }
.video-popup .video-popup-main .video ul.index9   { left:calc(-900px * 9); }

.video-popup .video-popup-main .play-btn              { width:1000px; position:absolute; transform:translate(-50%, -50%); top:50%; left:50%; z-index: 0; }
.video-popup .video-popup-main .play-btn .prev        { display:block; width:18px; height:38px; background:url('/img/play-larrow.png') no-repeat; background-size:18px 38px; text-indent:-9999px; float:left; }
.video-popup .video-popup-main .play-btn .prev.active { display:none; }
.video-popup .video-popup-main .play-btn .next        { display:block; width:18px; height:38px; background:url('/img/play-rarrow.png') no-repeat; background-size:18px 38px; text-indent:-9999px; float:right; }
.video-popup .video-popup-main .play-btn .next.active { display:none; }

.video-popup .video-popup-main .play-close { width:36px; height:36px; background:url('/img/play-close.png') no-repeat; background-size:36px 36px; text-indent:-9999px; position:absolute; top:5%; right:3%; }


@media (max-width:1024px) {
    ul    { padding:0px; margin:0px; }
    ul li { padding:0px; margin:0px; list-style:none; }
    
    .video-popup         { display:none; width:100%; height:100%; position:fixed; top:0%; left:0%; z-index:99999; }
    .video-popup::before { background-color: rgba(0,0,0,0.95); content:''; width:100%; height:100%; position:absolute; }
    .video-popup.active  { display:block; }
    
    .video-popup .video-popup-main .video             { width:87.891vw; height:66.406vw; position:absolute; transform:translate(-50%, -50%); top:50%; left:50%; overflow:hidden; z-index:1; }
    .video-popup .video-popup-main .video .iframe     { width:100%; height:100%; border:0px; }
    .video-popup .video-popup-main .video ul          { left:0px; background-color: rgba(0,0,0,0); height:100%; position:absolute; width:9400px; transition: left 0.3s; }
    .video-popup .video-popup-main .video ul li       { width:87.891vw; height:61.523vw; float: left; }
    .video-popup .video-popup-main .video ul .title   { height:2.930vw; line-height:2.930vw; font-size:3.125vw; font-weight:500; color:#c5c5c5; text-align:center; margin:0px; margin-bottom:1.465vw; }
    .video-popup .video-popup-main .video ul.index0   { left:calc(-87.891vw * 0); }
    .video-popup .video-popup-main .video ul.index1   { left:calc(-87.891vw * 1); }
    .video-popup .video-popup-main .video ul.index2   { left:calc(-87.891vw * 2); }
    .video-popup .video-popup-main .video ul.index3   { left:calc(-87.891vw * 3); }
    .video-popup .video-popup-main .video ul.index4   { left:calc(-87.891vw * 4); }
    .video-popup .video-popup-main .video ul.index5   { left:calc(-87.891vw * 5); }
    .video-popup .video-popup-main .video ul.index6   { left:calc(-87.891vw * 6); }
    .video-popup .video-popup-main .video ul.index7   { left:calc(-87.891vw * 7); }
    .video-popup .video-popup-main .video ul.index8   { left:calc(-87.891vw * 8); }
    .video-popup .video-popup-main .video ul.index9   { left:calc(-87.891vw * 9); }
    
    .video-popup .video-popup-main .play-btn              { width:97.656vw; position:absolute; transform:translate(-50%, -50%); top:50%; left:50%; z-index: 0; }
    .video-popup .video-popup-main .play-btn .prev        { display:block; width:1.758vw; height:3.711vw; background:url('/img/play-larrow.png') no-repeat; background-size:1.758vw 3.711vw; text-indent:-9999px; float:left; }
    .video-popup .video-popup-main .play-btn .prev.active { display:none; }
    .video-popup .video-popup-main .play-btn .next        { display:block; width:1.758vw; height:3.711vw; background:url('/img/play-rarrow.png') no-repeat; background-size:1.758vw 3.711vw; text-indent:-9999px; float:right; }
    .video-popup .video-popup-main .play-btn .next.active { display:none; }
    
    .video-popup .video-popup-main .play-close { width:3.516vw; height:3.516vw; background:url('/img/play-close.png') no-repeat; background-size:3.516vw 3.516vw; text-indent:-9999px; position:absolute; top:5%; right:3%; }
}