@charset "UTF-8";
img{ width:100%; }
main { background: none; }
.main-top { margin: 10px 0 0 0; }
.pp-tab-top { padding: 5px 3px 0 3px; border-bottom: 1px solid #eee; }
.block-top { margin: 11px 8px 0 8px; padding-bottom: 6px; }
.video-top { margin: 10px 0 0 0; }
.device { overflow: hidden; border-radius: 5px; }

body #center { background: none; }

/*视频首页*/
.v-new-list { margin: 2px 0; display:block; overflow:hidden; }
.v-new-list ul { margin: 3px 3%; display:block; overflow:hidden; }
.v-new-list ul li { font-size:14px; padding:7px 0 8px 0; display:block; overflow:hidden; line-height:20px; }
.v-new-list ul li i { padding-right: 7px; float: left; text-align:left; font-size: 15px; color: #9195A3; font-weight: bold; }
.v-new-list ul li b { width:20px; height: 20px; margin:0 6px 0 0; font-size:13px; color:#eee; text-align:center; font-weight: normal; border-radius:3px; background:#bb9670; overflow:hidden; float:left; }
.v-new-list ul li span { float:right; font-size:13px; color:#aaa; text-align:center; display:block; text-decoration: none; }
.v-new-list ul li a { width:80%; white-space: nowrap; color:#666; overflow:hidden; float:left; text-overflow: ellipsis;}
.v-new-list ul li a:hover { color:#c60; }

.ul-number li:nth-child(1) i{ color: #FE2D46; }
.ul-number li:nth-child(1) i:before{content:"1";}
.ul-number li:nth-child(2) i{ color: #F60; }
.ul-number li:nth-child(2) i:before{content:"2";}
.ul-number li:nth-child(3) i{ color: #FAA90E; }
.ul-number li:nth-child(3) i:before{content:"3";}
.ul-number li:nth-child(4) i{ color: #9ebaa0; }
.ul-number li:nth-child(4) i:before{content:"4";}
.ul-number li:nth-child(5) i{ color: #4796b3; }
.ul-number li:nth-child(5) i:before{content:"5";}
.ul-number li:nth-child(6) i{ color: #bb9998; }
.ul-number li:nth-child(6) i:before{content:"6";}
.ul-number li:nth-child(7) i{ color: #9195A3; }
.ul-number li:nth-child(7) i:before{content:"7";}
.ul-number li:nth-child(8) i{ color: #9195A3; }
.ul-number li:nth-child(8) i:before{content:"8";}
.ul-number li:nth-child(9) i{ color: #9195A3; }
.ul-number li:nth-child(9) i:before{content:"9";}
.ul-number li:nth-child(10) i{ color: #9195A3; }
.ul-number li:nth-child(10) i:before{content:"10";}


.v-side-list { }
.v-side-list ul { margin: 0 10px; }
.v-side-list ul li { margin: 0; padding: 10px 0; display: block; overflow: hidden; border-bottom: 1px dashed #eee; }
.v-side-list ul li:last-child { border-bottom: none; }
.v-side-list ul li a { width: 100%; margin: 0; padding: 0; color: #333; }
.v-side-list ul li span { width: 110px; height:90px; margin: 0 9px 0 0; float: left; display: block; overflow: hidden; background: #ddd; border-radius: 4px; position: relative; }
.v-side-list ul li span img { width: 110px; height:90px; object-fit: cover; }
.v-side-list ul li h3 { font-size: 15px; color: #333; padding: 0 6px 0 0; }
.v-side-list ul li p { font-size: 13px; color: #888; margin: 0; padding: 5px 0 0 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }

.v-icon { width: 28px; height: 28px; margin: 0; vertical-align: middle; display: inline-block; background: url("video.png") no-repeat; background-size: 28px; opacity:0.7; position: absolute; bottom: 3px; right: 3px; }
.v-icon2 { width: 24px; height: 24px; margin: -2px 1px 0 0; vertical-align: middle; display: inline-block; background: url("video2.png") no-repeat; background-size: 24px; opacity:0.5; }


.video-block { margin: 0 0 10px 0; display: block; overflow: hidden; background: #fff; border-radius: 4px; }

.video-title {margin: 12px 10px 5px 10px; display: block; overflow: hidden; padding: 0 0 8px 0; border-bottom: 1px solid #f3f3f3; }
.video-title h2 { margin: 0 10px 0 0; font-size: 18px; color: #333; float: left; }
.video-title i { margin: 4px 0 0 0; font-size: 14px; color: #999; float: left; }
.video-title span { margin: 5px 3px 0 0; font-size: 14px; color: #888; float: right; }
.video-title span a { color: #888; display: block; }


.video-list { padding: 1px 0 6px 0; display: block; overflow: hidden; }
.video-list ul { padding: 0 4px; display: block; overflow: hidden; }
.video-list ul li { width: 23%; margin:4px 1%; padding: 0; font-size: 14px; color: #555; text-align: center; float: left; display: block; overflow: hidden; position: relative; background: #fff; /*border-bottom: 1px dashed #eee; */ border-radius: 4px; }
.video-list ul li span { width: 100%; height:0; padding-bottom: 70.666%; display: block; overflow: hidden; position: relative; background: #111; }
.video-list ul li span img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; right: 0; }
.video-list ul li h3 { padding: 6px 0; font-size: 14px; color: #333; font-weight: normal; overflow: hidden; height: 40px; }
.video-list ul li h3 a { color: #333; display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.video-list ul li i { }


.video-block ul li img {-webkit-transition: all .3s ease-out 0s;-moz-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s; }
.video-block ul li:hover img {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2); }
.video-block ul li:hover h3 a { color: #f39210; }


/*视频列表*/
.video-lb-block { background: none; }
.video-lb-list ul { padding: 0; }
.video-lb-list ul li { width: 24%; margin:3px 0.5% 10px 0.5%; }
.video-lb-list ul li h3 { padding: 8px 6px; }


/*视频详情*/
.video-detail-page { background: #222;}
.video-detail-block { background: #1a1a1a; position: relative; }
.video-detail-box { display: block; overflow: hidden; }
.video-detail-box span { width: 100%; height: auto; background: #111; float: left; }
.video-detail-box video { width: 100%; height: 100%; max-height: 500px; text-align: center; }

.video-detail-intro { padding:15px 12px; display: block; overflow: hidden;  }
.video-detail-info { margin: 6px; float: left; display: block; overflow: hidden;  }
.video-detail-info h2 { font-size: 17px; color: #d5ab7d; }
.video-detail-info .video-detail-time { padding: 6px 0; font-size: 13px; color: #555; }
.video-detail-info .video-detail-time span { padding: 0 10px 0 0; }
.video-detail-info p { padding: 6px 0; font-size: 14px; color: #888; }
.video-detail-code { width: 130px; margin: 10px 6px 6px 6px; float: right; display: block; overflow: hidden; text-align: center; }
.video-detail-code img { width: 80px; height: 80px; margin: 0 auto; display: block; }
.video-detail-code p { margin: 5px 0; display: block; font-size: 13px; color: #666; }

.video-detail-good { width: 100%; background: #000; position: static; display: block; overflow: hidden; }
.v-good-title { width: 100%; padding: 10px 0; background: #2a2a2a; position: absolute; }
.v-good-title h2 { padding: 0 10px; font-size: 17px; color: #ddd; }
.v-good-list { width: 100%; margin: 44px 0 3px 0; overflow-y: scroll; white-space: nowrap; display: block;  }
.video-detail-good ul { margin: 1px 1%; }
.video-detail-good ul li { width: 38%; margin: 8px 0.5% 5px 0.5%; display: inline-block; background: #222; overflow: hidden; border-radius: 4px; }
.video-detail-good ul li .v-good-pic { width: 100%; height: 0; padding-bottom: 72%; border-radius: 2px; display: block; overflow: hidden; position: relative; }
.video-detail-good ul li .v-good-pic img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; right:0; border-radius: 2px; display: block; overflow: hidden; }
.video-detail-good ul li .v-good-info { margin: 5px 6px; }
.video-detail-good ul li .v-good-info h3 { font-size: 14px; color: #fff; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.video-detail-good ul li .v-good-info h3 a { font-size: 14px; color: #9b856c; }
.video-detail-good ul li .v-good-info p { padding: 3px 0; font-size: 12px; color: #aaa; font-weight: normal; }
.video-detail-good ul li .v-good-info .v-good-btn { width: 100px; height: 28px; line-height: 28px; margin: 8px 0 0 0; text-align: center; background: #f39210; color: #fff; border-radius: 50px; display: block; overflow: hidden; }
.video-detail-good ul li .v-good-info .v-good-btn a { color: #613d3d; display: block; }

.v-good-list::-webkit-scrollbar { width: 4px; height: 0; }
.v-good-list::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(193,193,193,0.2); background: rgba(193,193,193,0.2); }
.v-good-list::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(193,193,193,0.2); border-radius: 0; background: rgba(193,193,193,0.1); }


.video-xq-block { margin: 0 0 10px 0; display: block; overflow: hidden; }
.video-xq-block .video-title { padding: 0; border-bottom:none; }
.video-xq-block .video-title h2 { color: #ddd; }
.video-xq-list ul { padding: 0; }
.video-xq-list ul li { width: 19%; margin:6px 0.5%; background: #333; }
.video-xq-list ul li h3 { padding: 9px 5px; color: #ddd; }
.video-xq-list ul li h3 a { color: #bbb; }


/*屏幕小于1024px*/
@media screen and (min-width:0px) and (max-width:1024px){
    .main { padding-bottom: 2px; }
    .video-block { margin: 0 3px 5px 3px }
    .device{ position:relative; margin:0 6px; height:auto; background: #111; }
    .side-block{ display:block;overflow:hidden;margin:10px 6px;border-radius:6px;background:#fff; }
    .video-list ul li { width: 48%; margin:4px 1%; text-align: left; }
    /*.video-list ul li:last-child { display: none; }*/

    .video-detail-good ul li:last-child { margin-right: 1.5%; }

    .video-detail-good ul li .v-good-info { text-align: center; }
    .video-detail-good ul li .v-good-info .v-good-btn { margin: 5px auto 9px auto; }

    .video-detail-intro { padding: 10px 8px; }
    .video-xq-list ul { margin: 0 3px; }

    .v-good-list::-webkit-scrollbar { width: 0; }
    .video-detail-box { margin-top: -8px; }
    /*.video-detail-box span { height: 500px; }*/
}



/*屏幕大于1024px*/
@media screen and (min-width:1025px){

    .pp-block { display:block; overflow:hidden; margin:0 0 10px 0; padding:6px; border-radius:6px; background:#fff; }
    .block-top { margin: 12px 12px 0 12px; padding-bottom: 6px; }
    .v-detail-bread a { color: #777; }
    /*.v-detail-bread span { color: #aaa; }*/

    .video-main { display: block; }
    .video-top { position: relative; margin-bottom: 10px; }
    .device { width:830px; height:376px; position:relative; left:0; }
    .device a { display: block; }

    .side-block{ width:360px;  height:376px; background:#333; position:absolute; right: 0; top:0; border-radius: 6px; }
    .side-block .video-title { border-bottom: 1px solid #3c3c3c; }
    .v-new-list ul li a { color: #bbb; }
    .v-new-list ul li span { color: #777; }
    .video-list ul li h3 { height: auto; }
    .video-list ul li h3 a {  display: block; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; }

    .video-detail-box span { width: 880px; height: 500px; float: left; }
    .video-detail-box video { width: 880px; height: 500px; }

    .video-detail-good { width: 310px; height: 500px; position: absolute; right: 0; top:0; border-right: 1px solid #1a1a1a; }
    .v-good-list { width: 100%; height: 500px; overflow-y: scroll; white-space: nowrap; }
    .v-good-list ul { margin: 0; padding-bottom: 50px; }
    .video-detail-good ul li { width: 96%; margin: 8px 2%; display: block; overflow: hidden; }
    .video-detail-good ul li .v-good-pic { width: 120px; height: 100px; margin: 6px; padding: 0; float: left; display: block; overflow: hidden; }
    .video-detail-good ul li .v-good-pic img { width: 120px; height: 100px; object-fit: cover; }
    .video-detail-good ul li .v-good-info { width: 156px; margin: 5px 0 0 0; float: left; display: block; overflow: hidden; }

    .v-good-title { text-align: center; }
    .video-detail-info { width: 1000px; padding-right: 15px; border-right: 1px dashed #222; }
    .video-xq-block { margin: 10px 0; }
    .video-xq-list ul { margin: 0 -0.5%; }
    .video-xq-block .video-title { margin: 12px 10px 5px 1px; }

}