@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: #6dd5ff;}
.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: 472px;}
.header-title {top: 160px; left: 168px; width: 580px; height: 216px;}
.header-title a {top: -132px; left: 4px; width: 158px; height: 110px; text-indent: -99999px; outline: none;}
.header-menu {position: absolute; top: 8px; right: 8px;}
.header-menu, .header-menu a {color: #dfedff;}
.header-menu a {*display: inline-block; margin: 0 8px;}
.header-nav {top: 419px; left: 124px;}
.header-nav a {top: 0; height: 54px; background: url(header-nav.png) no-repeat 0 0; text-indent: -99999px; outline: none;}
.header-nav .menu1 {left: 260px; width: 228px; background-position: -260px 0;}
.header-nav .menu1:hover {background-position: -260px -54px;}
.header-nav .menu2 {left: 0; width: 260px; background-position: 0 0;}
.header-nav .menu2:hover {background-position: 0 -54px;}
.header-nav .menu3 {left: 488px; width: 259px; background-position: -488px 0;}
.header-nav .menu3:hover {background-position: -488px -54px;}

.prize {top: 74px; left: 327px; width: 340px; height: 43px; font-size: 20px; font-family: \5FAE\8F6F\96C5\9ED1; color: #fff600; overflow: hidden;}
.prize ul {top: 0; left: 0;}
.prize li {height: 43px; line-height: 43px; text-indent: 46px;}

.featureVideo, .featureVideo a {width: 159px; height: 103px;}
.featureVideo {top: 37px; left: 3px;}
.featureVideo a {display: block; background: url(../../../images/space.png) repeat 0 0; text-indent: -99999px; outline: none;}

/* main */
.signUp, .download, .gift, .role h2 span, .screenshot h2 {background: url(base-el.jpg) no-repeat 0 0;}
.main .btn, .signUp .formList .field-btn input {background: url(base-btn.png) no-repeat 0 0;}

.main {height: 939px;}
.main h2 {text-indent: -99999px;}
.main .btn {display: block; margin: 0 auto; text-indent: -99999px; outline: none;}
.signUp, .download, .gift, .screenshot {left: 695px; width: 302px;}
.slider {width: 659px;}

/* signUp */
.signUp {top: 0; height: 260px; background-position: 0 0;}
.signUp h2 {height: 44px;}
.signUp .aside {height: 40px; text-indent: -99999px;}

.signUp .formList .field {padding-left: 100px;}
.signUp .formList .field-item .item-title {width: 100px; color: #fff;}
.signUp .formList .field-item .textbox, .signUp .formList-cover .field-item p {width: 170px; border: 1px solid #008aff; background-color: #00366a;}
.signUp .formList .field-item .textbox {color: #fff;}
.signUp .formList .field-btn {padding-left: 0;}
.signUp .formList .field-btn input {display: block; width: 110px; height: 33px; margin: 0 auto; border: 0; text-indent: -99999px;}
.signUp .formList-cover .field-item {height: 26px;}
.signUp .formList-cover .field-item p {left: 100px;}

.signUp .formList .field-btn input {background-position: -149px -64px;}
.signUp .formList .field-btn .hover, .signUp .formList .field-btn .disable {background-position: -260px -64px;}
.signUp .formList .field-btn .disable {opacity: 0.8; filter: alpha(opacity=80);}

.signUp-msg {color: #e8e8e8;}
.signUp-msg p {margin-top: 4px;}
.signUp-msg a {color: #ffe17a;}
.signUp-msg .btn {width: 149px; height: 45px; background-position: 0 0;}
.signUp-msg .btn:hover {background-position: 0 -46px;}

/* download */
.download {top: 260px; height: 94px; background-position: 0 -260px;}
.download h2 {height: 44px;}
.download p {float: left; _display: inline; width: 151px;}
.download .btn {width: 91px; height: 30px; margin: 0 0 0 60px; background-position: -260px 0;}
.download .btn:hover {background-position: -260px -31px;}
.download .xunlei {margin: 0; background-position: -351px 0;}
.download .xunlei:hover {background-position: -351px -31px;}

/* gift */
.gift {top: 354px; height: 197px; background-position: 0 -354px;}
.gift h2 {height: 39px;}
.gift a {display: block; height: 32px; padding-top: 114px; outline: none;}
.gift a:hover .btn {background-position: -149px -32px;}
.gift .btn {width: 111px; height: 32px; background-position: -149px 0; cursor: pointer;}

/* role */
.role {top: 581px; left: 2px; width: 693px; height: 293px; background-color: #fff;}
.role h2 {border: 1px solid #004ad5; background-color: #0069e8;}
.role h2 span {display: block; height: 49px; border: 1px solid #51d4ff; background-position: 0 -551px;}

.role-menu {z-index: 9; top: -2px; left: 343px; width: 320px; padding-left: 13px;}
.role-menu li {width: 77px; margin-left: -13px;}
.role-menu li a {display: block; height: 70px; background: url(role-menu.png) no-repeat 0 0; text-indent: -99999px; outline: none;}
.role-menu li .ja {background-position: -308px -70px;}
.role-menu li .fc {background-position: 0 -70px;}
.role-menu li .kl {background-position: -77px -70px;}
.role-menu li .pt {background-position: -154px -70px;}
.role-menu li .xd {background-position: -231px -70px;}
.role-menu .current .ja {background-position: -308px 0;}
.role-menu .current .fc {background-position: 0 0;}
.role-menu .current .kl {background-position: -77px 0;}
.role-menu .current .pt {background-position: -154px 0;}
.role-menu .current .xd {background-position: -231px 0;}

.role-cont {top: 53px; left: 0;}
.role-cont a {color: #1f5ca6;}
.role-cont ul {width: 264px; height: 230px; padding: 10px 405px 0 24px; background-repeat: no-repeat; background-position: 306px -44px;}
.role-cont .video {margin-top: 8px;}
.role-cont .video a {display: block; width: 138px; height: 91px; margin: 0 auto; border: 3px solid #c1c1c1; background-repeat: no-repeat; background-position: -280px -293px; 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 {top: 581px; width: 300px; height: 291px; border: 1px solid #004bd5; background-color: #0069e8;}
.screenshot h2 {height: 49px; border: 1px solid #51d4ff; background-position: 0 -600px;}
.screenshot ul, .screenshot li, .screenshot img {width: 282px; height: 220px;}
.screenshot ul {top: 51px; left: 0; padding: 10px 8px 8px; border: 1px solid #51d4ff; border-top-color: #004bd5;}
.screenshot li {display:; position: absolute; top: 10px; left: 8px;}

.screenshot .page {top: 145px;}
.screenshot .page-prev {left: 9px;}
.screenshot .page-next {left: 252px;}

/* feature */
.feature {top: 0; left: 2px; width: 691px; height: 260px; border: 1px solid #004ad5; background-color: #51d4ff;}
.feature-menu {z-index: 9; top: 217px; left: 1px; width: 690px;}
.feature-menu li {width: 137px; margin-right: 1px;}
.feature-menu a {display: block; height: 42px; background: url(feature-menu.png) no-repeat 0 0; text-indent: -99999px; outline: none; opacity: 0.8; filter: alpha(opacity=80);}
.feature-menu .current a {opacity: 1; filter: alpha(opacity=100);}
.feature-menu .i1 {background-position: 0 0;}
.feature-menu .i2 {background-position: -137px 0;}
.feature-menu .i3 {background-position: -274px 0;}
.feature-menu .i4 {background-position: -411px 0;}
.feature-menu .i5 {background-position: -548px 0;}
.feature-menu .current .i1 {background-position: 0 -42px;}
.feature-menu .current .i2 {background-position: -137px -42px;}
.feature-menu .current .i3 {background-position: -274px -42px;}
.feature-menu .current .i4 {background-position: -411px -42px;}
.feature-menu .current .i5 {background-position: -548px -42px;}
.feature-cont, .feature-cont img {width: 689px; height: 258px;}
.feature-cont {top: 1px; left: 1px;}

/* slider */
.slider, .slider p, .slider img {width: 689px; height: 258px;}
.slider {top: 289px; left: 2px; padding: 1px; border: 1px solid #004ad5; background-color: #51d4ff;}
.slider p {top: 1px; left: 1px; background: url(loading.gif) no-repeat center;}
.slider .page {top: 125px;}
.slider .page-prev {left: 1px;}
.slider .page-next {left: 651px;}
.slider .switchMod-page-dis {opacity: 0.2; filter: alpha(opacity=20); cursor: default;}

/* footer */
.footerWrap {background-color: #0e57ae;}
.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-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: 540px;}
.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.8; filter: alpha(opacity=80);}
.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;}