﻿* { margin: 0; padding: 0; }
body, html {min-height: 100%;}
body { font: lighter 13px/150% '微软雅黑',Arial, Helvetica, sans-serif; color: #a4a4a4; margin: 0; padding: 0; background: #f5f5f5; min-width:1000px;}
form, ul, ol, li, a, input, p, em, label, select, textarea, h1, h2, h3, h4 { margin: 0; padding: 0; list-style: none; outline: none; }
ul, ol, li, div { zoom: 1; vertical-align: top; }
img { border: none; margin: 0; padding: 0; }
a { color: #555; text-decoration: none;  hide-focus:expression(this.hideFocus=true);}
a:hover { color: #009fec; }
p { clear: both; }
/*============header================*/
.headerBg{width:100%; min-width:1000px; height:538px;}
.headerTv{background:#000; }
.header{width:1000px; margin:0 auto; clear:both;}
.header .nav{width:870px; clear:both; margin:0 auto; padding-top:35px; overflow:hidden;}
.logo{float:left;}
.nav ul{float:right; font-size:16px; color:#fff;}
.nav li{float:left;  text-align:center; margin-left:50px; *width:110px; *margin-left:10px; white-space:nowrap;}
.nav .line{width:60%; clear:both; margin:20px auto 0 auto; height:2px; background:#02deff; overflow:hidden; display:none;}
.nav li a{display:inline-block; color:#fff;}
.nav li a:hover{color:#02deff;}
.nav li.visited a{color:#02deff;}
.nav li.visited .line{display:block;}
/*---*/
.banner{width:100%; clear:both; margin-top:76px; position:relative; color:#fff;}
.banner h3{font-size:18px; line-height:26px; font-weight:lighter; color:#f1f1f1;}
.banner .title{background:url(icon.png) no-repeat; margin:30px 0; height:46px; display:block;}
.banner .title1{background:url(icon1.png) no-repeat; margin:30px 0; height:46px; display:block;}
.banner ul{width:100%; overflow:hidden; margin-top:5px; text-align:left;}
.banner li{width:100%; float:left; margin-bottom:10px; color:#e7e7e7; font-size:16px;}
.banner li i{width:7px; height:7px; float:left; margin:7px 8px 0 0; background:url(icon.png) no-repeat -122px -53px;}
.banner .button{padding-top:34px; clear:both;}
.banner .button a{display:inline-block; height:45px; line-height:45px; background:url(icon.png) no-repeat; font-size:16px; color:#f9f9f9; white-space:nowrap;}
.banner .downBox{display:inline; position:relative;}
.banner .downBox .code{width:107px; height:107px; position:absolute; left:206px; top:1px; top:-13px\9; box-shadow: 1px 1px 15px #333; display:none;}
.banner .button a.download{padding-left:14px; background-position:0 0; min-width:100px; text-align:center; position:relative; margin-right:40px;}
.banner .button a.download span{width:14px; height:45px; display:block; position:absolute; top:0; right:-14px; background:url(icon.png) no-repeat -246px 0;}
.banner .button a.download:hover{ background-position:0 -405px; color:#f9f9f9;}
.banner .button a.download:hover span{background-position:-246px -405px;}
.banner .button a.explain{font-size:13px; color:#00d8ff; text-decoration:underline; position:absolute; left:12px; top:38px; background:none;}
.banner .button a.explain:hover{color:#eee;}
.banner .button a.explain2{font-size:12px; color:#00d8ff; text-decoration:underline; position:absolute; right:-33px; top:12px; background:none;}
.banner .button a.explain2:hover{color:#eee;}

.banner .button a.old{width:112px; text-align:center; background-position:0 -48px;}
.banner .button a.old:hover{color:#00d8ff;}
/*home*/
.banner .home{width:236px; float:right; margin-right:28px; margin-top:-5px;}
.banner .home .title{width:100%; font-family:Tahoma, Geneva, sans-serif; font-size:42px; line-height:44px; color:#ececec; text-shadow:1px 1px 5px rgba(0,0,0,.3); margin:5px auto 24px auto; background:none; position:relative;}
.banner .played{color:#e7e7e7; font-size:14px; padding-top:24px;}
.banner .hour{width:32px; height:29px; display:block; position:absolute; right:-38px; top:11px; background:url(icon.png) no-repeat -359px -90px;}
.banner .home ul{width:100%;}
.banner .home .button{padding-top:28px;}
/*all*/
#all{width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:.35; z-index:20; display:none;}
.video{width:820px; height:516px; margin-left:-411px; top:18%; left:50%; background:url(play_bg.png) repeat; position:fixed;  border:1px solid #2d3936\9; border:1px solid rgba(255,255,255,.2); box-shadow:1px 1px 80px rgba(0,0,0,.4); border-radius:3px; z-index:21;  display:none;}
.close{width:22px; height:22px; display:block; position:absolute; right:-5px; top:-5px; background:url(icon.png) no-repeat -224px -71px; text-indent:-9999px;}
/*tv*/
.banner .tv{width:394px; margin:0 auto;}
.banner .tv h3{text-align:center;}
.banner .tv .title{width:304px; margin:30px auto; background-position:0 -97px;}
.banner .tv .title1{width:304px; margin:30px auto; background-position:0 -97px;}
.banner .tv .button{text-align:center;}
/*hepler*/
.banner .helper{width:458px; float:right;}
.banner .helper .title{width:100%; background-position:0 -192px;}
/*weixin*/
.banner .weixin{width:396px; float:left; margin-left:158px;}
.banner .weixin .title{width:100%; background-position:0 -240px;}
/*install*/
.banner .install{width:242px; margin:10px auto; padding-left:30px; text-align:center;}
.banner .install .title{width:100%; height:62px; background-position:0 -288px;}
/*version*/
.banner .version{width:242px; margin:10px auto; padding-left:30px; text-align:center;}
.banner .version .title{width:100%; height:62px; background-position:0 -454px;}
/*about*/
.banner .about{width:340px; float:left; font-size:18px; line-height:24px; color:#f1f1f1; margin:30px 0 0 110px;}
.banner .about .typesetting{padding:22px 0 0 65px;}
/*=========main========*/
.main{width:100%; min-width: 1000px;  background:#fff;clear:both; margin:0 auto; padding:30px 0 46px 0;}
.page{width:16px; position:fixed; right:10%; top:200px; display:none; overflow:hidden; z-index:50;}
.page span{width:16px; height:16px; display:block; cursor:pointer; clear:both; margin-bottom:18px; background:url(icon.png) no-repeat -121px -69px;}
.page span.on{background-position:-143px -70px;}
.main .box{border:0px solid #dddee1; background:#fff; border-radius:3px; overflow:hidden; margin-top:35px;}
.main h2{font-size:32px; line-height:40px; font-weight:lighter; color:#787878; padding-bottom:20px;}
.main .box p{font-size:14px; color:#a4a4a4; line-height:30px;}
.main .box .top{width:100%; clear:both; padding-top:64px; text-align:center;}
.main .number span{width:12px; height:12px; display:inline-block; cursor:pointer; margin-left:5px; background:url(icon.png) no-repeat -137px -50px;}
.main .number span.on{background-position:-155px -50px;}
.main .number span:first-child{margin-left:0;}

/*tv*/
.tvBanner{width:704px; height:396px; position:relative; margin:44px auto 156px auto; clear:both; z-index:2;}
.tvBanner .number{position:absolute; bottom:-94px; z-index:6;}
.tvBanner li{position:absolute; z-index:0;}
.tvBanner li img{width:100%; height:100%;}
.tvBanner .shadowB{width:855px; height:101px; position:absolute; left:-75px; bottom:-86px; z-index:0; background:url(shadow2.png) no-repeat;}
.tvBanner .shadowL,.tvBanner .shadowR{width:85px; height:316px; position:absolute; z-index:2; background:url(shadow.png) no-repeat; top:39px;}
.tvBanner .shadowL{left:-20px;}
.tvBanner .shadowR{right:-20px;}

.join .four i{background-position:-335px -350px;}

.join p{padding-bottom:50px; color:#787878; line-height:28px;}
.black{color:#333;}
.slidebarbox{position: absolute;}
.slidebar{height:12px; overflow:hidden;}
.slidebar li{width:12px; height:12px; display:inline-block; cursor:pointer; margin-left:5px; background:url(icon.png) no-repeat -137px -50px; float:left;}
.slidebar li.active{background-position:-155px -50px;}
.slidebar li:first-child{margin-left:0;}
.slidebar li a{display: block;}

.footer{width:76%; min-width: 1000px; margin:0 auto; height:340px; background:#000; clear:both; color:#ffffff;}
.footer .help{width:870px; margin:0 auto; padding:15px 0; clear:both;}
.footer .help ul{width:870px; float:left;}
.footer .help li{width:275px; float:left;}
.footer .help li h4{padding-bottom:20px; font-size:13px; font-weight:lighter;}
.footer .help li p{margin-bottom:5px;}
.footer .help li a{color:#adbac1;  }
.footer .help li a:hover{color:#fff;}
.footer .about{width:42px; float:right; margin-top:4px;}
.footer .about a{width:42px; height:42px; float:left; background:url(icon.png) no-repeat}
.footer .about a:hover{ opacity:.9; filter:alpha(opacity=90);}
.footer .about a.sina{margin-bottom:18px; background-position: -176px -50px;}
.footer .about a.weixin{background-position: -312px -87px; position:relative;}
.footer .code{width:107px; height:107px; background:#555; position:absolute; left:-110px; top:-60px; display:none;}
.footer .copyright{width:870px; line-height:22px; margin:0 auto; clear:both; padding-top:40px; border-top:1px solid #afbcc2; text-align:center; opacity:.6; filter:alpha(opacity=60);}
.footer .copyright a{color:#fff; opacity:.6; filter:alpha(opacitya=60);}

.statistics{display:none;}
.footer .key{width:100%; clear:both; padding-top:8px; text-align:center;}
.footer .key a{display:inline-block; margin-left:8px;}
.footer .key img{width:74px; height:28px;}
/*===blogroll===*/
.footer .blogroll{width:870px; margin:0 auto;clear:both;}
.footer .blogroll ul{width:870px; float:left;padding:15px 0;}
.footer .blogroll li{float: left;margin-right: 5px;width: 88px;margin-bottom: 5px;}
.footer .blogroll h4{padding-bottom:20px; font-size:13px; font-weight:lighter;}
.footer .blogroll li a{color:#adbac1;}
/*===common===*/
.center{text-align:center;}
.blue{color:#28c1db;}
.blue:hover{color:#111;}
/*======*/
.clear{width:100%; height:0px; overflow:hidden; clear:both;}
@media screen and (min-width: 1601px) {
.headerHome li.one,.headerHome li.two,.headerHome li.three,.headerHome li.four,.headerTv,.headerHelper,.headerWeixin,.headerInstall,.headerAbout{background-size:100% 100%;}
}
@media screen and (min-width: 1024px) and (max-width : 1599px) {
.main,.footer{width:90%;}
.page{right:3%;}
.versionBox{width:84%;}
}
@media screen and (max-width :1024px){
.main,.footer{width:98%;}
.page{right:10px;}
.versionBox{width:86%;}
}
