.video-list { display: grid; width:1264px; margin:0 auto; grid-template-columns: 1fr 1fr 1fr; gap: 60px 32px;   }
.video-list .video { position:relative; width:100%;  height:711px;  border-radius: 16px;  overflow: hidden;;}
.video-list .video .thumb img { width:100%; object-fit:cover; }
.video-list .video  iframe,
.video-list .video  video { width:100%; height:100%; position:absolute; top: 0; left: 0;  bottom: 0; right: 0;}
.video-list .video .thumb:before {  position:absolute; left:0; top:0; display:block; content:''; width:100%; height:100%; object-fit: contain;  opacity: 0.5; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 76%, #000); }
.video-list .video .info { position:absolute; left:0; bottom:0; width:100%; box-sizing: border-box; padding:20px 16px;  color: #fff;}
.video-list .video .title { height:22px; line-height:22px; margin-bottom:12px; font-size: 18px;  font-weight: 500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.video-list .video .views { font-size: 14px; }
.video-list-btns { padding:120px 0 0 0; text-align:center; }
.video-list-btns .btn-more { width: 464px; height: 60px; line-height:60px; color:var(--color-font-btn); font-size: 16px;  font-weight: 500; text-align:center; border-radius: 8px;  border: solid 1px var(--color-border-layout); background:none; }
.video-list-btns .btn-more:before { content:''; display: inline-block; width:16px; height:16px; margin:-4px 16px 0 0; vertical-align: middle; background:url('../img/main/btn_more.png') no-repeat; background-size: 16px auto;}

/*-----------------------------------------
            mobile
-------------------------------------------*/
@media all and (max-width:1023px){
    .wrap.main {  min-width:100%; }

    .video-list { display: grid; width:calc(100% - 40px); margin:0 auto; grid-template-columns: 1fr 1fr; gap: 16px 10px; margin:0 20px;   }
    .video-list .video { position:relative; width:100%; height: auto; padding-bottom: calc(276 / 155 * 100%);border-radius: 16px;  overflow: hidden;}
    .video-list .video .thumb img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
    .video-list .video .thumb:before {  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 71%, #000); }
    .video-list .video .info {  padding:8px; }
    .video-list .video .title { height:36px; line-height:18px; margin-bottom:4px; font-size: 14px;  white-space:normal; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
    
    .video-list .video .views { font-size: 12px; }
    .video-list-btns { padding:40px 20px 0 20px; }
    .video-list-btns .btn-more { width: 100%; height: 48px; line-height:48px; font-size: 14px; }
    .video-list-btns .btn-more:before { width:14px; height:14px; margin:-4px 12px 0 0;  background:url('../img/main/btn_more_m.png') no-repeat; background-size: 14px auto;}   
}