.cates[data-v-7d8ef92d]{background:#fafafa;height:400px;padding:10px 15px 0 15px;font-size:12px}.cates .all[data-v-7d8ef92d]{border:1px solid #e1e1e2;padding:6px;text-align:center;width:100%;cursor:pointer}.cates .all span[data-v-7d8ef92d]{color:#666}.cates .all[data-v-7d8ef92d]:hover{border-color:currentColor;background:#f5f5f7}.cates .all:hover span[data-v-7d8ef92d]{color:#333}.cates .all.active[data-v-7d8ef92d]{border-color:currentColor}.cates .all.active span[data-v-7d8ef92d]{color:#333}.cates .cate-item[data-v-7d8ef92d]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:10px 0}.cates .cate-item>div[data-v-7d8ef92d]{width:100%;clear:both;overflow:hidden}.cates .cate-item>div p[data-v-7d8ef92d]{width:20%;float:left;padding:6px 0;text-align:center;border:1px solid #e1e1e1;position:relative;cursor:pointer}.cates .cate-item>div p span[data-v-7d8ef92d]:first-child{color:#666}.cates .cate-item>div p[data-v-7d8ef92d]:nth-child(6n){border-right:1px solid #e1e1e1}.cates .cate-item>div p[data-v-7d8ef92d]:hover{color:#333;background:#f5f5f7}.cates .cate-item>div p:hover span[data-v-7d8ef92d]{color:#333}.cates .cate-item>div p.active[data-v-7d8ef92d]{border-color:currentColor}.cates .cate-item>div p.active span[data-v-7d8ef92d]{color:#333}.grids[data-v-7d8ef92d]{width:100%;clear:both;overflow:hidden;cursor:default}.grids .grid[data-v-7d8ef92d]{width:23%;float:left;margin:1% 20px 20px 0;color:#333;font-size:14px;overflow:hidden}.grids .grid .pic[data-v-7d8ef92d]{width:100%;color:#fff;font-size:12px;cursor:pointer;height:150px;position:relative}.grids .grid .pic img[data-v-7d8ef92d]{width:100%;height:100%}.grids .grid .pic .play-count[data-v-7d8ef92d]{text-align:right;position:absolute;padding:3px;width:100%;z-index:99;top:0;right:0;background:-webkit-gradient(linear,left top,right top,color-stop(30%,hsla(0,0%,88.2%,0)),color-stop(50%,rgba(0,0,0,.1)),color-stop(70%,rgba(0,0,0,.2)),color-stop(80%,rgba(0,0,0,.3)),color-stop(90%,rgba(0,0,0,.4)),to(rgba(0,0,0,.5)));background:linear-gradient(90deg,hsla(0,0%,88.2%,0) 30%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.3) 80%,rgba(0,0,0,.4) 90%,rgba(0,0,0,.5))}.grids .grid .pic .play-count i[data-v-7d8ef92d]{vertical-align:text-bottom}.grids .grid .pic .duration[data-v-7d8ef92d]{position:absolute;padding:3px 5px;width:100%;bottom:0;z-index:99;background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,88.2%,0)),color-stop(50%,rgba(0,0,0,.2)),to(rgba(0,0,0,.5)));background:linear-gradient(180deg,hsla(0,0%,88.2%,0) 0,rgba(0,0,0,.2) 50%,rgba(0,0,0,.5))}.grids .grid .pic video[data-v-7d8ef92d]{width:100%;height:100%;position:absolute;top:0;left:0;opacity:0}.grids .grid .pic:hover video[data-v-7d8ef92d]{opacity:1;-webkit-transition:opacity 2s 1s;transition:opacity 2s 1s}.grids .grid div[data-v-7d8ef92d]:not(.pic){margin-top:5px}.grids .grid div:not(.pic) p[data-v-7d8ef92d]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:12px;width:100%}.grids .grid div:not(.pic) p[data-v-7d8ef92d]:first-child{cursor:pointer;display:inline-block}.grids .grid div:not(.pic) p[data-v-7d8ef92d]:last-child{font-size:12px;color:#999}.grids .grid div:not(.pic) p:last-child span[data-v-7d8ef92d]:hover{cursor:pointer;color:#888}.grids .grid[data-v-7d8ef92d]:nth-child(4n){margin-right:0}