@charset "utf-8";

/* ==================================================
* base.css
* @version 1.6
================================================== */
/* reset */
html {background-color: #fff; color: #333;} 
body {font: 12px/1.6 tahoma, arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
input, textarea, select, button {font: 100%/1.2 tahoma, arial, sans-serif;}
body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, form, fieldset, legend, input, textarea, select, button, th, td {margin: 0; padding: 0;}
ul, ol {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img {border: 0;}
img {display: inline-block; vertical-align: top;}
em {font-style: normal;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
input, textarea, select, button, object {outline: 0;}

/* html5 reset for ie */
header, nav, section, article, aside, footer {display: block;}

/* element */
.fl {float: left; _display: inline;}
.fr {float: right; _display: inline;}
.clearfix:after {content: "."; clear: both; display: block; height: 0; visibility: hidden;}
.clearfix {*zoom: 1;}

.tl {text-align: left;}
.tc {text-align: center;}
.tr {text-align: right;}
.vm {vertical-align: middle;}
.bc {margin-right: auto; margin-left: auto;}

.pr {position: relative;}
.pa {position: absolute;}

.hidden {visibility: hidden;}
.none {display: none;}

.fb {font-weight: 700;}
.fn {font-weight: 400;}
.f12 {font-size: 12px;}
.f14 {font-size: 14px;}
.f16 {font-size: 16px;}

/* ==================================================
* @formList
* @version 1.4
================================================== */
.formList .field {position: relative; padding-left: 150px;}
.formList .field p {font-size: 12px;}

.formList .field-item {_zoom: 1; height: 48px; margin-bottom: 4px;}
.formList .field-item .item-title, .formList .field-item .infobox {height: 26px; line-height: 26px;}
.formList .field-item .item-title {position: absolute; top:0; left: 0; width: 150px; text-align: right; white-space: nowrap;}
.formList .field-item .item-title em {color: red;}
.formList .field-item .infobox {*zoom: 1; display: inline-block; *display: inline;}
.formList .field-item .textbox {width: 200px; height: 24px; line-height: 24px\9; *margin-top: -1px; border: 1px solid #999; text-indent: 4px;}
.formList .field-item .imebox {ime-mode: disabled;}

.formList .field-item-space {height: auto;}

.formList .field-btn input {width: 120px; height: 32px; line-height: 32px; cursor: pointer;}
.formList .field-btn .hover {}
.formList .field-btn .disable {cursor: default;}

.formList .help, .formList .error {height: 18px; line-height: 18px;}
.formList .help {color: #888;}
.formList .error {display: none; color: red;}

.formList .jz-focus .help {display: block;}
.formList .jz-focus .error {display: none;}
.formList .jz-help .help {display: block;}
.formList .jz-help .error {display: none;}
.formList .jz-error .help {display: none;}
.formList .jz-error .error {display: block;}
.formList .jz-success .help {display: none;}
.formList .jz-success .error {display: none;}

.formList-cover .field-item {height: 44px;}
.formList-cover .field-item p {position: absolute; top: 0; left: 150px; width: 200px; height: 24px; line-height: 24px; border: 1px solid #999; text-indent: 5px; background-color: #fff; cursor: default;}
.formList-cover .jz-focus .help {display: none;}

/* ==================================================
* layout
================================================== */
html {background-color: #dcf5ff;}
.container, .container .wrap {background: url(base-bg.jpg) no-repeat 0 0;}
.container {background-position: center 0;}
.container .wrap {background-position: -460px 0;}
.wrap {width: 1000px;}

.page {width: 39px; height: 42px; background: url(../common-arrow.png) no-repeat 0 0; text-indent: -99999px; outline: none; opacity: 0.65; filter: alpha(opacity=65);}
.page-prev {background-position: 0 0;}
.page-next {background-position: -39px 0;}

/* header wrap */
.header {height: 561px;}
.header-title {top: 210px; left: 28px; width: 644px; height: 212px;}
.header-title a {top: -132px; left: 376px; width: 200px; height: 110px; text-indent: -99999px; outline: none;}
.header-menu {position: absolute; top: 40px; right: 8px; font-size: 14px;}
.header-menu, .header-menu a {color: #dfedff;}
.header-menu a {*display: inline-block; margin: 0 12px;}
.header-nav {top: 455px; left: 0;}
.header-nav a {top: 0; height: 80px; background: url(header-nav.png) no-repeat 0 0; text-indent: -99999px; outline: none;}
.header-nav .menu1 {left: 249px; width: 201px; background-position: -249px 0;}
.header-nav .menu1:hover {background-position: -249px -80px;}
.header-nav .menu2 {left: 0; width: 249px; background-position: 0 0;}
.header-nav .menu2:hover {background-position: 0 -80px;}
.header-nav .menu3 {left: 450px; width: 226px; background-position: -450px 0;}
.header-nav .menu3:hover {background-position: -450px -80px;}

.prize, .featureVideo {left: 676px;}
.prize {top: 98px; width: 323px; height: 60px; font-size: 20px; font-family: \5FAE\8F6F\96C5\9ED1; color: #fff600; overflow: hidden;}
.prize ul {top: 0; left: 0;}
.prize li {height: 60px; line-height: 60px; text-indent: 84px;}
.featureVideo, .featureVideo a {width: 323px; height: 157px;}
.featureVideo {top: 166px;}
.featureVideo a {display: block; background: url(../../../images/space.png) repeat 0 0; text-indent: -99999px; outline: none;}

/* main */
.main h2, .signUp .aside, .gift p, .feature-menu, .feature-menu .current a {background: url(base-el.png) no-repeat 0 0;}
.main .btn, .signUp .formList .field-btn input {width: 145px; height: 45px; background: url(base-btn.png) no-repeat 0 0;}

.main {height: 965px;}
.main h2 {height: 59px; background-color: #007dff; text-indent: -99999px;}
.main .btn {display: block; margin: 0 auto; text-indent: -99999px; outline: none;}
.signUp, .download, .gift, .role, .screenshot {border: 1px solid #d4ecf6; background-color: #fff;}
.signUp, .download, .gift, .screenshot {left: 675px; width: 323px;}
.role, .feature, .slider {width: 659px;}
.role, .screenshot {top: 580px;}

/* signUp */
.signUp {top: -229px; height: 286px; border: 0;}
.signUp h2 {background-position: 0 -200px;}
.signUp .aside {height: 32px; background-position: 0 -262px; text-indent: -99999px;}

.signUp .formList {margin-top: 8px;}
.signUp .formList .field {padding-left: 100px;}
.signUp .formList .field-item .item-title {width: 100px; color: #737373;}
.signUp .formList .field-item .textbox, .signUp .formList-cover .field-item p {width: 180px; border: 1px solid #d2d2d2; background-color: #ebebeb;}
.signUp .formList .field-btn {padding-left: 0;}
.signUp .formList .field-btn input {display: block; margin: 0 auto; border: 0; text-indent: -99999px;}
.signUp .formList-cover .field-item {height: 29px;}
.signUp .formList-cover .field-item p {left: 100px;}

.signUp .formList .field-btn input {background-position: -435px 0;}
.signUp .formList .field-btn .hover, .signUp .formList .field-btn .disable {background-position: -435px -46px;}
.signUp .formList .field-btn .disable {opacity: 0.6; filter: alpha(opacity=60);}

.signUp-msg {margin-top: 10px; font-size: 14px;}
.signUp-msg p {margin-top: 4px;}
.signUp-msg a {color: #ff7200;}
.signUp-msg span {color: #ff007e;}
.signUp-msg .btn {width: 149px; background-position: -581px 0;}
.signUp-msg .btn:hover {background-position: -581px -46px;}

/* download */
.download {top: 66px; height: 217px;}
.download h2 {margin-bottom: 10px; background-position: 0 -141px;}
.download p {padding-top: 16px;}
.download .btn {background-position: -290px 0;}
.download .btn:hover {background-position: -290px -46px;}
.download .xunlei {background-position: -145px 0;}
.download .xunlei:hover {background-position: -145px -46px;}

/* gift */
.gift {top: 292px; height: 279px;}
.gift h2 {background-position: -323px -141px;}
.gift p {background-position: -323px -200px;}
.gift a {display: block; height: 45px; padding-top: 149px; outline: none;}
.gift a:hover .btn {background-position: 0 -46px;}
.gift a .btn {cursor: pointer;}

/* role */
.role {left: 7px; height: 279px;}
.role h2 {background-position: -323px -82px;}

.role-menu {z-index: 9; top: 1px; left: 404px; width: 255px;}
.role-menu li {width: 50px; margin-right: 1px;}
.role-menu li a {display: block; height: 65px; background: url(role-menu.png) no-repeat 0 0; text-indent: -99999px; outline: none;}
.role-menu li .ja {background-position: -204px -65px;}
.role-menu li .fc {background-position: -51px -65px;}
.role-menu li .kl {background-position: 0 -65px;}
.role-menu li .pt {background-position: -102px -65px;}
.role-menu li .xd {background-position: -153px -65px;}
.role-menu .current .ja {background-position: -204px 0;}
.role-menu .current .fc {background-position: -51px 0;}
.role-menu .current .kl {background-position: 0 0;}
.role-menu .current .pt {background-position: -102px 0;}
.role-menu .current .xd {background-position: -153px 0;}

.role-cont {top: 59px; left: 0;}
.role-cont a {color: #1f5ca6;}
.role-cont ul {width: 230px; height: 210px; padding: 10px 405px 0 24px; background-repeat: no-repeat; background-position: 276px -48px;}
.role-cont .video {margin-top: 8px;}
.role-cont .video a {display: block; width: 110px; height: 71px; margin: 0 auto; border: 3px solid #c1c1c1; background-repeat: no-repeat; background-position: -293px -304px; text-indent: -99999px; outline: none;}

.role-cont .fc, .role-cont .fc .viewRoleVideo {background-image: url(../common-role-fc.jpg);}
.role-cont .kl, .role-cont .kl .viewRoleVideo {background-image: url(../common-role-kl.jpg);}
.role-cont .pt, .role-cont .pt .viewRoleVideo {background-image: url(../common-role-pt.jpg);}
.role-cont .xd, .role-cont .xd .viewRoleVideo {background-image: url(../common-role-xd.jpg);}
.role-cont .ja, .role-cont .ja .viewRoleVideo {background-image: url(../common-role-ja.jpg);}

/* screenshot */
.screenshot {height: 279px;}
.screenshot h2 {background-position: 0 -82px;}
.screenshot ul, .screenshot li, .screenshot img {width: 323px; height: 220px;}
.screenshot ul {top: 59px; left: 0;}
.screenshot li {display: none; position: absolute; top: 0; left: 0;}
.screenshot .page {top: 145px;}
.screenshot .page-prev {left: 0;}
.screenshot .page-next {left: 284px;}

/* feature */
.feature {top: 0; left: 8px; height: 285px; background-color: #007dff;}
.feature-menu {top: 0; left: 0; width: 659px; background-color: #72b2f5; background-position: 0 0;}
.feature-menu li {width: 132px; margin-right: 0;}
.feature-menu li a {display: block; height: 41px; text-indent: -99999px; outline: none;}
.feature-menu .current .i1 {background-position: 0 -41px;}
.feature-menu .current .i2 {background-position: -132px -41px;}
.feature-menu .current .i3 {background-position: -264px -41px;}
.feature-menu .current .i4 {background-position: -396px -41px;}
.feature-menu .current .i5 {background-position: -528px -41px;}
.feature-menu .end {width: 131px; margin-right: 0;}
.feature-cont, .feature-cont img {width: 647px; height: 232px;}
.feature-cont {top: 41px; left: 0; padding: 6px;}

/* slider */
.slider {top: 293px; left: 8px; height: 280px; background-color: #007dff;}
.slider p, .slider img {width: 647px; height: 268px;}
.slider p {top: 6px; left: 6px; background: url(loading.gif) no-repeat center;}
.slider .page {top: 125px;}
.slider .page-prev {left: 6px;}
.slider .page-next {left: 614px;}
.slider .switchMod-page-dis {opacity: 0.2; filter: alpha(opacity=20); cursor: default;}

/* footer */
.footerWrap {background-color: #0d294b;}
.footer {padding: 24px 0;}
.footer, .footer a {color: #fff;}
.footer a {*display: inline-block; margin: 0 6px;}
.footer P {margin-bottom: 4px;}

/* ==================================================
* popup layer
================================================== */
/* mask */
.jz-mask, .jz-mask iframe, .jz-mask div {z-index: 10000; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.jz-mask iframe {opacity: 0; filter: alpha(opacity=0);}
.jz-mask .jz-mask-opacity {background-color: #000;}

/* layer */
.layer {width: 494px; height: 359px; padding: 0 24px; background: #1f77d1 url(../layer-bg.jpg) no-repeat 0 0;}
.layer .close {z-index: 99; top: 8px; right: 12px; font-weight: 700; font-size: 14px; color: #c5c5c5;}

.layer-aside .hd, .layer-aside-download, .layer-aside-download .btn, .layer-aside .formList .field-btn input {background: url(layer-aside-el.png) no-repeat 0 0;}

.layer-aside {background-color: #fff;}
.layer-aside .hd {height: 32px; margin-bottom: 10px; background-color: #138ffe; text-indent: -99999px;}
.layer-aside-signUp .hd {background-position: -50px 0;}
.layer-aside-download {height: 80px; background-position: 202px 32px;}
.layer-aside-download .hd {background-position: -50px -32px;}
.layer-aside-download .btn {display: block; width: 122px; height: 27px; background-position: -311px -30px; text-indent: -99999px; outline: none;}
.layer-aside-download .btn:hover {background-position: -435px -30px;}

.layer-aside .formList .field {padding-left: 84px;}
.layer-aside .formList .field-item .item-title {width: 84px; color: #737373;}
.layer-aside .formList .field-item .textbox, .layer-aside .formList-cover .field-item p {width: 148px; border: 1px solid #d2d2d2; background-color: #ebebeb;}
.layer-aside .formList .field-btn {height: 42px; padding-left: 0;}
.layer-aside .formList .field-btn input {display: block; width: 124px; height: 29px; margin: 0 auto; border: 0; background-position: -310px 0; text-indent: -99999px;}
.layer-aside .formList .field-btn .hover {background-position: -434px 0;}
.layer-aside .formList .field-btn .disable {background-position: -558px 0;}
.layer-aside .formList-cover .field-item {height: 30px;}
.layer-aside .formList-cover .field-item p {left: 84px;}

.layer-player {width: 800px; height: 450px; padding: 28px 8px 8px; background: #62b5e9 none;}
.layer-player .close {top: 4px; color: #fff;}
.layer-player .videoWrap {height: 450px;}

.layer-playlist {height: 395px;}
.layer-playlist .videoWrap {width: 540px; height: 304px;}
.layer-playlist .playlist {margin-top: 8px;}
.layer-playlist .playlist-cont {width: 768px; height: 83px; overflow: hidden;}
.layer-playlist .playlist-cont ul {top: 0; left: 0; width: 10000px;}
.layer-playlist .playlist-cont li, .layer-playlist .playlist-cont img {width: 144px; height: 83px;}
.layer-playlist .playlist-cont li {margin-left: 8px; opacity: 0.6; filter: alpha(opacity=60);}
.layer-playlist .playlist-cont .current {opacity: 1; filter: alpha(opacity=100);}
.layer-playlist .page {width: 16px; height: 83px; background-color: #000;}
.layer-playlist .page-prev {background-position: -11px 22px;}
.layer-playlist .page-next {background-position: -50px 22px;}
.layer-playlist .page-dis {opacity: 0.2; filter: alpha(opacity=20); cursor: default;}

.layer-playlist .layer-aside {top: 28px; left: 556px; width: 252px; height: 304px;}