.video-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:20px 0 0}.video-list .video-item{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:200px;margin:10px;cursor:pointer}.video-list .video-item .video-img{position:relative;width:100%;height:0;padding-top:150%;border-radius:10px;background-color:#000;opacity:.9}.video-list .video-item .video-img .van-image{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:10px;overflow:hidden}.video-list .video-item .video-info{position:absolute;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);border-radius:0 0 10px 10px;padding:0 0 10px;opacity:0;z-index:10;-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.58, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.58, 1);-webkit-transition-timing-function:cubic-bezier(0, 0, 0.58, 1);transition-timing-function:cubic-bezier(0, 0, 0.58, 1)}.video-list .video-item .video-info .video-title{color:#fff;font-size:16px;height:60px;line-height:1.4em;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 20px}.video-list .video-item .video-info .video-meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;padding:0 10px}.video-list .video-item .video-info .video-meta .video-meta-item{color:#fff;font-size:12px;margin:0 5px}.video-list .video-item .video-info .video-meta .video-meta-item:last-of-type{margin:0}.video-list .video-item .video-info .video-tag{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden;margin:10px 0 0;padding:0 10px;height:22px}.video-list .video-item .video-info .video-tag .video-tag-item{color:#fff;font-size:12px;margin:0 5px;border:1px solid #fff;border-radius:3px;padding:0 10px;height:20px;white-space:nowrap}.video-list .video-item .video-info .video-action{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:10px 0 0;padding:0 10px}.video-list .video-item .video-info .video-action button{height:30px;margin:10px 0 0}.video-list .video-item .video-info .video-action button .van-button__content{color:#333}.video-list .video-item .video-info .video-action button.van-button--plain{border:1px solid #fdbf46;background-color:rgba(0,0,0,0)}.video-list .video-item .video-info .video-action button.van-button--plain .van-button__content{color:#fdbf46}.video-list .video-item .video-info .video-action button.van-button--plain.active{background-color:#fdbf46}.video-list .video-item .video-info .video-action button.van-button--plain.active .van-button__content{color:#333}.video-list .video-item .video-info .video-action button.play-btn{width:100%;margin:0}.video-list .video-item .video-info .video-action button.favorite-btn,.video-list .video-item .video-info .video-action button.info-btn{width:30px;margin:10px 0 0 10px}.video-list .video-item .video-history .video-history-text{position:absolute;left:0;right:0;bottom:44px;color:#fff;font-size:16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:40px;border-radius:0 0 10px 10px;z-index:2;background:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65)));background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#a6000000",GradientType=0 )}.video-list .video-item .video-history .video-history-overlay{position:absolute;top:0;left:0;right:0;bottom:44px;background-color:rgba(0,0,0,0);border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:3;-webkit-transition:background-color 300ms cubic-bezier(0, 0, 0.58, 1);transition:background-color 300ms cubic-bezier(0, 0, 0.58, 1);-webkit-transition-timing-function:cubic-bezier(0, 0, 0.58, 1);transition-timing-function:cubic-bezier(0, 0, 0.58, 1)}.video-list .video-item .video-history .video-history-overlay .video-history-icon{color:#fff;font-size:70px}.video-list .video-item .video-history .video-history-overlay .video-history-playtext{position:absolute;left:0;right:0;top:50%;color:#fff;font-size:18px;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;opacity:0;-webkit-transform:translateY(-50%) translateY(50px);transform:translateY(-50%) translateY(50px);-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.58, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.58, 1);-webkit-transition-timing-function:cubic-bezier(0, 0, 0.58, 1);transition-timing-function:cubic-bezier(0, 0, 0.58, 1)}.video-list .video-item .video-history .video-history-progress-bar{position:absolute;left:6px;right:6px;bottom:39px;height:4px;background-color:#b7b7b7;border-radius:2px}.video-list .video-item .video-history .video-history-progress-bar .video-history-progress{position:absolute;left:0;bottom:0;top:0;border-radius:2px;background-color:#9f0004}.video-list .video-item .video-history .video-history-action{height:44px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.video-list .video-item .video-history .video-history-action button{height:30px;margin:10px 0 0}.video-list .video-item .video-history .video-history-action button.van-button--plain{border:1px solid #fdbf46;background-color:rgba(0,0,0,0)}.video-list .video-item .video-history .video-history-action button.van-button--plain .van-button__content{color:#fdbf46}.video-list .video-item .video-history .video-history-action button.van-button--plain.active{background-color:#fdbf46}.video-list .video-item .video-history .video-history-action button.van-button--plain.active .van-button__content{color:#333}.video-list .video-item .video-history .video-history-action button.favorite-btn,.video-list .video-item .video-history .video-history-action button.info-btn{width:30px;margin:10px 0 0 10px}.video-list .video-item:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid #fff;border-radius:10px;opacity:0;-webkit-transition:opacity 300ms cubic-bezier(0, 0, 0.58, 1);transition:opacity 300ms cubic-bezier(0, 0, 0.58, 1);-webkit-transition-timing-function:cubic-bezier(0, 0, 0.58, 1);transition-timing-function:cubic-bezier(0, 0, 0.58, 1)}.video-list .video-item.empty{height:0}.video-list .video-item.empty:before{display:none}.video-list .video-item:hover .video-img{opacity:1}.video-list .video-item:hover .video-info{opacity:1}.video-list .video-item:hover .video-history .video-history-overlay{background-color:rgba(0,0,0,.7)}.video-list .video-item:hover .video-history .video-history-playtext{opacity:1}.video-list .video-item:hover:before{opacity:1}.video-list .video-item:hover.history-item:before{opacity:0}@media(max-width: 767px){.video-list .video-item{min-width:20%}}