body{background: #242729;}
.banner{margin-bottom: 40px;height: 300px;background: #141516 url(//static.699pic.com/images/video/seo-subject-detail-banner.jpg) no-repeat center top;color: #fff;text-align: center;}
.bannerBanxin{position: relative;}
.current-pstion{position: absolute;padding-top: 12px;text-align: left;}
.current-pstion a{color: #fff;}
.current-pstion a:hover{color: #07BFD4;}
.banner h1{padding: 76px 0 8px;line-height: 70px;font-size: 34px;font-weight: 600;line-height: 48px;}
.describe{height: 90px;width: 640px;margin: 0 auto;font-size: 14px;line-height: 26px;}
.hotWord{font-size: 14px;line-height: 26px;}
.hotWord h2{margin: 0 5px 5px;font-size: 14px;display: inline-block;}
.hotWord a{border-radius: 20px;display: inline-block;height: 26px;line-height: 26px;padding: 0 10px;color: #fff;border: 1px solid rgba(255, 255, 255, 0.3);}
.hotWord a:hover{color: #07BFD4;background: #fff;}
.bannerBanxin .last_change{position: absolute;right: 0;bottom: -26px;}
.banxin{width: 1200px;margin: 0 auto;}
.video-list{margin-right: -20px;}
.video-list li{width:285px;height:200px;background:#34373A;float:left;margin:0 20px 20px 0;position:relative;box-shadow:0 0 4px 0 rgba(0,0,0,0.20);border-radius:4px;transition: .2s;z-index:0;}
.video-list li:hover{transform: translateY(-10px);}
.video-list .video-box{height:160px;position:relative;border-radius: 4px 4px 0 0;overflow: hidden;}
.video-list .video-box img{width:100%;height:100%;position:absolute;left:0;top:0;z-index:2}
.video-list .video-box video{object-fit:fill;height:100%}
.video-list .video-box .video-spec{object-fit:contain;background-color:#000;}
.video-list .video-box .video-box-img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;background: #000;}
.video-list .video-box .video-box-img img{width: auto;max-width: 100%;left: 50%;transform: translateX(-50%);}
.video-list .video-name{width: 100%; height:40px;line-height:40px;color:#999;padding:0 12px; position: relative; box-sizing: border-box;position: relative;}
.video-list li:hover .video-name{color: #ffffff;}
.video-list .video-name h2{max-width:100px;overflow:hidden;font-size:14px;float:left;text-overflow:ellipsis;white-space:nowrap;margin-right:5px}
.video-list .video-name .video-time{float:left;}
.video-list .video-name .type{background-color: rgba(0, 0, 0, 0.3);border-radius: 4px 0px 4px 0px;border: 1px solid rgba(105, 220, 182, 0.5);backdrop-filter: blur(10px); font-size: 12px; line-height: 18px; color: #69DCB6; padding: 0 8px; position: absolute; right: 12px; top: 10px;}
.video-list .video-name .type span{}
.video-list .progress-bar{width:100%;height:3px;display:none;overflow:hidden;position:absolute;left:0;top:160px}
.video-list .progress-slider{width:0;height:3px;overflow:hidden;background: linear-gradient(270deg, #00CBE1 0%, #15CC8F 100%);position:absolute;left:0;top:0;transition:.2s}
.video-list .video-option{height: 0;position: absolute;top: 0px;right: 10px;transition: 0.2s;opacity: 0;visibility: hidden;}
.video-option-item{height: 30px;width: 100px;margin-bottom: 6px;}
.video-option-item:first-child{margin-top: 10px;}
.video-list .video-option .icon-download{float: right; width: 100%;height: 100%;border-radius: 3px;line-height: 30px;color: rgba(255, 255, 255,.7);background: rgba(0, 0, 0, 0.5);text-align: center;cursor: pointer;backdrop-filter: blur(5px);overflow: hidden;padding-left: 1px;box-sizing: border-box;transition: .3s;}
.video-list .video-option .icon-download i{margin-right: 0px;font-size: 14px;margin-right: 5px;}
.video-list .video-option .icon-download:hover{color: #15CC8F;}
.video-list .video-collect{float: right;display: block;width: 30px;height: 100%;text-align: center;line-height: 30px;border-radius: 3px;background: rgba(0, 0, 0, 0.5);cursor: pointer;}
.video-list .video-collect i{font-size: 14px;color: rgba(255, 255, 255,.7);}
.video-list .video-collect.on i{color: #F9D300;}
.video-list .video-collect:hover i{color: #15CC8F;}
.video-list .video-option .video-option-edit{float: right;width: 100%;height: 100%;text-align: center;line-height: 30px;border-radius: 4px;background: rgba(0, 0, 0, 0.5);font-size: 14px;color: rgba(255, 255, 255,.7);letter-spacing: 0;transition: .2s;padding-left: 1px;box-sizing: border-box;transition: .3s;overflow: hidden;}
.video-list .video-option .video-option-edit i{font-size: 14px;margin-right: 5px;}
.video-list .video-option .video-option-edit:hover{color: #15CC8F;}
.video-list li:hover .video-option{opacity: 1;visibility: visible;}
.btn-center{text-align: center;}
.more-btn{display: inline-block;margin: 0 auto;width: 420px;height: 40px;text-align: center;font-size: 14px;color: #FFFFFF;line-height: 40px;border-radius: 20px;background: linear-gradient(270deg, #00B9CE 0%, #00CA87 100%);letter-spacing: 0.78px;}
.more-btn:hover{background: linear-gradient(270deg, #00A4B7 0%, #00BC7D 100%);}
.more-btn i{vertical-align: -1px;display: inline-block;}
.more-btn.width{width: 210px;margin: 0 10px;}
.SwitchAlbum{padding-top: 30px;text-align: center;margin-bottom: 40px;}
.SwitchAlbum a{display: inline-block;box-sizing: border-box;height: 40px;line-height: 38px;font-size: 16px;margin: 0 8px;color: #ffffff;padding: 1px;border-radius: 20px;background: linear-gradient(270deg, rgba(0, 203, 225, 1), rgba(21, 204, 143, 1));backdrop-filter: blur(10px);}
.SwitchAlbum a span{display: inline-block;width: 100%;height: 100%;background: linear-gradient(270deg, #074B53 0%, #0C573E 100%);border-radius: 20px;padding: 0 25px;box-sizing: border-box;backdrop-filter: blur(10px);}
.SwitchAlbum a:hover span{background: linear-gradient(270deg, #1b6872 0%, #1d6952 100%);}
.SwitchAlbum a i{font-size: 20px;vertical-align: -2px;}
.collect-one.yet i{color: #2CAEFF;}
/* pugc-视频添加标签 */
.video-tag-box{position: absolute;top: 0;left: 0;z-index: 2;}
.video-tag{float: left;width: 18px;height: 18px;font-size: 12px;color: #FFFFFF;letter-spacing: 0;text-align: left;line-height: 18px;box-sizing: border-box;position: relative;cursor: pointer;text-align: center;border-radius: 4px 0px 4px 0px;}
.video-tag-drop{position: absolute;top: -60px;left: 50%;width: 168px;margin-left: -84px;padding: 6px 10px;background: #4A4E51;border-radius: 10px;box-sizing: border-box;opacity: 0;visibility: hidden;transition: .2s;}
.video-tag-drop::after{position: absolute;bottom: -12px;left: 50%;content: "";border-width: 6px;border-style: solid;border-color: #4A4E51 transparent transparent transparent;margin-left: -6px;}
.video-tag-drop::before{position: absolute;bottom: -20px;left: 50%;content: "";width: 62px;height: 20px;margin-left: -31px;}
.video-tag-drop p{font-size: 12px;color: #FFFFFF;letter-spacing: 0;line-height: 18px;text-align: left;}
.video-tag-drop p a{color: #69DCB6;}
.video-tag-drop p a:hover{opacity: .8;}
.video-tag:hover .video-tag-drop{opacity: 1;visibility: visible;}
.video-tag-optimizing{background: linear-gradient(270deg, #AB8DF3 0%, #5B4BE4 100%);}
.video-tag-enterprise{background: linear-gradient(270deg, #F39E8D 0%, #E93333 100%);}
.video-tag-enterprise .video-tag-drop{top: -75px;}
.video-tag-price{width: auto;padding: 0 6px;background: rgba(0, 0, 0, 0.4);border-radius: 0 0 4px 0;color: #ffffff;}
.video-tag-price .video-tag-price-discount{color: #15CC8F;}
.video-list .video-box video.video-spec {object-fit: contain;background: #000000;}
.video-list .video-box .video-cover-img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 2;background: #000000;text-align: center;}
.video-list .video-box .video-cover-bgimg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-align: center;overflow: hidden;background-color: #a8a8a8;}
.video-list .video-box .video-cover-img img{width: auto;height: 100%;position: static;}
.video-list .video-box .video-cover-bgimg .video-cover-def{position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-align: center;z-index: 3;}
.video-list .video-box .video-cover-bgimg img.video-cover-bg{width: 100%;filter: blur(10px);-webkit-filter: blur(10px);-moz-filter: blur(10px);-ms-filter: blur(10px);-o-filter: blur(10px);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);transform: scale(1.2);-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);opacity: .8;}
.video-list .video-name .type.video-type8,.video-list .video-name .type.video-type4{display: inline-block;top: 9px;border: none;background-color: none;padding: 0;}
.video-vips-type{float: left;margin-right: 10px;font-size: 0;height: 100%;}
.video-vips-type i{font-size: 14px;}

@media screen and (min-width: 1923px) {
    .video-list{margin-right: -21px;}
    .video-list li{width: 316px; height:222px; margin-right: 21px;}
    .video-list .video-box{height:177px;}
    .video-list .progress-bar{top: 177px;}
    .video-list .video-name{height: 44px; line-height: 44px;}
    .video-list .video-name .type{top: 12px;}
    .video-list .video-name .type.video-type4,.video-list .video-name .type.video-type8{top: 11px;}
}
@media screen and (max-width: 1922px) and (min-width: 1470px) {
    .video-list li{width: 317px; height:222px; margin-right: 20px;}
    .video-list .video-box{height:178px;}
    .video-list .progress-bar{top: 178px;}
    .video-list .video-name{height: 44px; line-height: 44px;}
    .video-list .video-name .type{top: 12px;}
    .video-list .video-name .type.video-type4,.video-list .video-name .type.video-type8{top: 11px;}
}
@media screen and (max-width: 1366px) {
    .video-list li{width: 320px; height:222px; margin-right: 17px;}
    .video-list .video-box{height:180px;}
    .video-list .progress-bar{top: 180px;}
}