@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form, div { margin: 0; }
body, button, input, select, textarea { font-family: "Merriweather", Arial, sans-serif!important; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em, b { font-style: normal; }
a { text-decoration: none; color: #fff; font-family: "Merriweather", Arial, sans-serif!important; }
a:hover, a:active { text-decoration: none; }
img { border: 0; }
button, input, select, textarea, video { font-size: 100%; outline: none; }
input, select { height: 30px; line-height: 30px; background: #fff; color: #000; border: none; border-radius: 5px; padding: 0 2px }
table { border-collapse: collapse; border-spacing: 0; }
td, th, ul, ol { padding: 0; }
ul, ol { list-style-type: none; }
body, html { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0a110a; color: #fff; -webkit-text-size-adjust: none; }
.clearfix:after,.clearfix:before{ content: ""; display: table; }
.clearfix:after{ clear: both; }
.clearfix{ *zoom: 1; }
.tcenter { text-align: center; }

.wrap { position:relative; width:100%; height:100%; overflow:hidden; min-width:1400px; }
.wrapper { position: relative; width:1280px; height: 100%; margin:0 auto; }
.page-swiper, .page-swiper .swiper-slide { width:100%; height:100%; }
.main { background:url(../images/bg2.jpg) no-repeat center center; background-size:cover; }
.main.index { background:url(../images/bg.jpg) no-repeat center center; }
.slogan { width:800px; margin:30vh auto 100px; }
.slogan img { display:block; width:100%; }
.video-recommend { display:flex; align-items:center; justify-content:space-between; }
.video-recommend li { position: relative; text-align:center; width:298px; height:179px; background:url(../images/index-rcmd.png) no-repeat 0 0; box-sizing:border-box; padding:14px; cursor:pointer; }
.video-recommend li:hover { filter:brightness(1.2); }
.video-recommend li .txt { position:absolute; left:50%; bottom:16px; width:270px; height: 40px; line-height: 40px; margin-left: -135px; background:url(../images/title-mask.png) no-repeat center center; color:#fef4b4 }

.lang { z-index: 2; position: absolute; right: 0; top: 50px; color: #929292; display:flex; align-items:center; justify-content:center; }
.lang i { display: inline-block; *display: inline; *zoom: 1; width: 22px; height: 22px; background: url(../images/global.png) no-repeat center center; vertical-align: middle; margin-right: 5px; }
.lang a { color: #929292; }
.lang a:hover, .lang a.on { color: #fff; }
/*.lang:before { content:""; display:block; width: 22px; height: 22px; background: url(../images/global.png) no-repeat center center; margin-right: 5px; }*/

.side-btns { position:absolute; right:0; top:100px; }
.side-btns a { display:block; margin:20px auto; }
.side-btns a:hover { filter:brightness(1.2); }

/**/
.main { display:flex; align-items:center; justify-content:flex-start; }
.video-left-nav { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 100%; width:30%; padding: 50px 1% 50px 0; background:rgba(0, 0, 0, .6); box-sizing:border-box; flex-direction: column; }
.back-btn { position: absolute; right: 5%; top: 5%; display: block; height:28px; line-height:28px; background:url(../images/backbtn.png) no-repeat 0 0; padding: 0 30px 0 80px; color:#f0dcaf; font-size:120%; text-shadow: 2px 2px 6px #f0dcaf; }
.view-btn { width: 206px; text-align: center; display: block; background:url(../images/down-arrow.png) no-repeat center bottom; color:#757366; padding-bottom:10px }
.view-btn:hover { color:#f0dcaf; }
.video-nav { height:80%; margin-top: 10%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.video-nav .swiper-wrapper { display:flex; align-items:center;/* justify-content:space-between; 有轮播时候用*/ justify-content: center; flex-direction:column; height:100%;   }
.video-nav .swiper-slide { display:flex; align-items:center; justify-content:center; min-width: 206px; height: 78px; line-height: 78px; color:#757366; cursor:pointer; font-size:120% }
.video-nav .swiper-slide:hover, .video-nav .swiper-slide.swiper-slide-active{ background:url(../images/tab-on.png) no-repeat right center; color:#f0dcaf; }

.video-right-cont { margin-left:2%; width:1150px; }
.video-list, .big-video { display:flex; justify-content:flex-start; align-content:center; flex-wrap:wrap;  }
.video-item { position: relative; margin:15px 0; }
.video-preview { position: relative; width:324px; height:196px; background:url(../images/videobg.png) no-repeat center center; box-sizing:border-box; padding:20px; }
.video-preview-cont { position:relative; width:100%; height:100%; }
.video-preview img, .big-video-preview img, .big-video-preview iframe { position: relative; z-index: 1; display:block; width:100%; height:100%; }
.video-mask { position: absolute; z-index: 2; left: 0; top: 0; width:100%; height:100%; background:url(../images/playbtn.png) no-repeat center center rgba(0, 0, 0, .4); cursor:pointer; }
.video-title { width:100%; background:url(../images/titlebg.png) no-repeat center center; text-align:center; line-height:28px; }
.video-pages { text-align:center; padding-top:30px; }
.video-pages a { color:#99978b; margin:0 10px; }
.video-pages a:hover, .video-pages a.on { color:#ffd15a }

.big-video-title { width:445px; height:83px; line-height: 83px; margin: 0 auto; text-align: center; font-size: 110%; background:url(../images/titlebg2.png) no-repeat center center; }
.big-video-preview { width: 916px; height:538px; background:url(../images/videobg2.png) no-repeat center center; box-sizing:border-box; padding:27px 31px; margin:0 auto; }

.tag { position: absolute; left: 20px; top: 18px; width:60px; height:59px; z-index:3; }
.tag.hot { background:url(../images/flag.png) no-repeat center center; }