body,
input,
textarea,
button,
select,
pre,
code {
    font-family: 'Hiragino Sans GB', 'Microsoft YaHei', Tahoma, Arial, '\5b8b\4f53', sans-serif;
    font-size: 75%;
    line-height: 1.5
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
form,
fieldset,
input,
textarea,
button,
select,
pre,
blockquote,
hr {
    margin: 0
}

fieldset,
legend,
button,
ul,
ol {
    padding: 0
}

frame,
iframe,
img,
hr,
fieldset {
    border: none
}

body {
    overflow-x: hidden;
    color: #583106;
    background-color: #12110f;
    font-size: 14px;
    min-width: 1000px
}

a {
    text-decoration: none
}

object {
    vertical-align: middle
}

input,
textarea,
button,
select {
    font-size: 1em
}

input,
button {
    overflow: visible;
    *zoom: 1
}

textarea {
    resize: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

ul,
ol {
    list-style: none
}

.clearfix {
    *zoom: 1
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.wrap {
    width: 100%;
    position: relative;
    left: 0;
    top: 0
}

.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0
}

.bg div {
    width: 100%;
    height: 359px
}

.bg1 {
    background: url("../images/bg1.jpg") center no-repeat
}

.bg2 {
    background: url("../images/bg2.jpg") center no-repeat
}

.bg3 {
    background: url("../images/bg3.jpg") center no-repeat
}

.bg4 {
    background: url("../images/bg4.jpg") center no-repeat
}

.bg5 {
    background: url("../images/bg5.jpg") center no-repeat
}

.main {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    left: 0;
    top: 0;
    z-index: 10
}

.btns-games {
    width: 575px;
    padding-top: 490px;
    margin: 0 auto;
    *zoom: 1
}

.btns-games:before,
.btns-games:after {
    content: " ";
    display: table
}

.btns-games:after {
    clear: both
}

.btn-wow {
    display: block;
    background: url("../images/btn_wow.png") center no-repeat;
    width: 267px;
    height: 147px;
    float: left;
    margin-right: 10px
}

.btn-wow:hover {
    background: url("../images/btn_wow_hover.png") center no-repeat
}

.btn-bx {
    display: block;
    background: url("../images/btn_bx.png") center no-repeat;
    width: 290px;
    height: 141px;
    float: left;
    position: relative;
    left: 0;
    top: -8px
}

.btn-bx:hover {
    background: url("../images/btn_bx_hover.png") center no-repeat
}

.btns-diablo {
    width: 770px;
    margin: 50px auto 0;
    *zoom: 1
}

.btns-diablo:before,
.btns-diablo:after {
    content: " ";
    display: table
}

.btns-diablo:after {
    clear: both
}

.btn-gw {
    display: block;
    background: url("../images/btn_gw.png") center no-repeat;
    width: 285px;
    height: 65px;
    float: left;
    margin-right: 195px
}

.btn-gw:hover {
    background: url("../images/btn_gw_hover.png") center no-repeat
}

.btn-login {
    display: block;
    background: url("../images/btn_login.png") center no-repeat;
    width: 285px;
    height: 65px;
    float: left
}

.btn-login:hover {
    background: url("../images/btn_login_hover.png") center no-repeat
}

.content {
    margin: 40px auto 0;
    overflow: hidden
}

.title1 {
    background: url("../images/title1.png") center no-repeat;
    width: 455px;
    height: 52px
}

.title2 {
    background: url("../images/title2.png") center no-repeat;
    width: 453px;
    height: 55px
}

.book {
    width: 1000px;
    height: 635px;
    position: relative;
    left: 0;
    top: 0
}

.book-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1
}

.book-bg div {
    width: 100%
}

.book-bg1 {
    background: url("../images/book1.png") center no-repeat;
    height: 160px
}

.book-bg2 {
    background: url("../images/book2.png") center no-repeat;
    height: 160px
}

.book-bg3 {
    background: url("../images/book3.png") center no-repeat;
    height: 159px
}

.book-bg4 {
    background: url("../images/book4.png") center no-repeat;
    height: 160px
}

.slider-box {
    width: 830px;
    height: 460px;
    position: relative;
    left: 0;
    top: 0;
    margin: 0 auto;
    z-index: 10;
    padding-top: 100px;
}

.slider {
    width: 760px;
    height: 460px;
    margin: 0 auto;
    position: relative;
    left: 0;
    top: 0;
    z-index: 10
}

.slider ul {
    *zoom: 1;
    position: relative;
    left: 0;
    top: 0;
    z-index: 5
}

.slider ul:before,
.slider ul:after {
    content: " ";
    display: table
}

.slider ul:after {
    clear: both
}

.slider li {
    position: relative;
    left: 0;
    top: 0;
    width: 760px;
    height: 460px;
    *zoom: 1;
    color: #583106
}

.slider li:before,
.slider li:after {
    content: " ";
    display: table
}

.slider li:after {
    clear: both
}

.slider li .fl {
    float: left;
    width: 330px;
    height: 460px
}

.slider li .fr {
    float: right;
    width: 380px;
    height: 460px
}

.slider li .fr div {
    position: absolute;
    top: 0
}

.arrow-left,
.arrow-right {
    display: block;
    width: 25px;
    height: 55px;
    position: absolute;
    top: 285px;
    z-index: 10;
}

.arrow-left {
    background: url("../images/arrow_left.png") center no-repeat;
    background-position: 0 0;
    left: 0
}

.arrow-left:hover {
    background-position: 0 -64px
}

.arrow-right {
    background: url("../images/arrow_right.png") center no-repeat;
    background-position: 0 0;
    right: 0
}

.arrow-right:hover {
    background-position: 0 -64px
}

.img1 {
    width: 443px;
    height: 462px;
    background: url("../images/img1.png") center no-repeat;
    right: -65px;
}

.img2 {
    width: 453px;
    height: 496px;
    background: url("../images/img2.png") center no-repeat;
    right: -70px;
}

.img3 {
    width: 483px;
    height: 442px;
    background: url("../images/img3.png") center no-repeat;
    right: -94px;
}

.img4 {
    width: 452px;
    height: 436px;
    background: url("../images/img4.png") center no-repeat;
    right: -68px;
}

.img5 {
    width: 434px;
    height: 430px;
    background: url("../images/img5.png") center no-repeat;
    right: -53px;
}

.img6 {
    width: 451px;
    height: 462px;
    background: url("../images/img6.png") center no-repeat;
    right: -74px;
}

.img7 {
    width: 456px;
    height: 446px;
    background: url("../images/img7.png") center no-repeat;
    right: -85px;
}

.img8 {
    width: 446px;
    height: 439px;
    background: url("../images/img8.png") center no-repeat;
    right: -55px;
}

.book-title {
    font-size: 29px;
    color: #743700;
    *zoom: 1
}

.book-title:before,
.book-title:after {
    content: " ";
    display: table
}

.book-title:after {
    clear: both
}

.book-title em {
    font-style: normal;
    float: left;
    margin-right: 8px
}

.book-title span {
    font-size: 18px;
    float: left;
    line-height: 44px
}

.num {
    float: left;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    *margin-right: 3px;
    background: url("../images/circle.png") center no-repeat;
    width: 47px;
    height: 47px;
    text-align: center;
    line-height: 47px;
    font-size: 29px;
    overflow: hidden;
    font-style: normal;
    margin-right: 8px
}

.txt {
    text-indent: 2em;
    padding-top: 5px;
    overflow: hidden;
    line-height: 16px;
}

.content-nav {
    background: url("../images/nav.png") center no-repeat;
    width: 966px;
    height: 90px;
    margin: 10px auto 0;
    position: relative;
    left: 0;
    top: 0;
    z-index: 10;
}

.content-nav ul {
    padding: 0 30px;
    height: 90px;
    *zoom: 1
}

.content-nav ul:before,
.content-nav ul:after {
    content: " ";
    display: table
}

.content-nav ul:after {
    clear: both
}

.content-nav li {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 106px;
    position: relative;
    left: 2px;
    top: 35px
}

.content-nav li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #bf6924
}

.content-nav li a i {
    display: none;
    background: url("../images/nav_hover.png") center no-repeat;
    width: 93px;
    height: 91px;
    position: absolute;
    left: -35px;
    top: -43px;
    text-align: center;
    line-height: 33px;
    font-style: normal;
    cursor: pointer;
}

.content-nav li a:hover i {
    display: block
}

.content-nav li.on a i {
    display: block
}

.content-nav li:last-child,
.content-nav li.last-child {
    margin-right: 0
}

.award {
    margin: 50px auto 0;
    overflow: hidden
}

.award-box {
    *zoom: 1;
    width: 997px;
    margin: 40px auto 50px
}

.award-box:before,
.award-box:after {
    content: " ";
    display: table
}

.award-box:after {
    clear: both
}

.award-box .fl {
    float: left;
    width: 400px;
    height: 573px;
    background: url("../images/active.png") center no-repeat
}

.award-box .fr {
    float: right;
    width: 584px;
    height: 573px;
    background: url("../images/award.png") center no-repeat
}

.list-award {
    *zoom: 1;
    padding: 8px
}

.list-award:before,
.list-award:after {
    content: " ";
    display: table
}

.list-award:after {
    clear: both
}

.list-award li {
    width: 187px;
    height: 184px;
    float: left;
    margin: 0 2px 3px 0
}

.list-award li.on {
    background-color: #443935;
    opacity: .5;
    filter: alpha(opacity=50)
}

.list-award a {
    display: block;
    width: 100%;
    height: 100%
}

.list-award a:hover {
    background-color: #443935;
    opacity: .5;
    filter: alpha(opacity=50)
}

.btn-award {
    display: block;
    width: 187px;
    height: 184px;
    position: relative;
    left: 1px;
    top: 1px
}

.btn-award:hover {
    background: url("../images/btn_award_hover.jpg") center no-repeat
}

.btn-next {
    display: block;
    margin: 50px auto 0;
    width: 201px;
    height: 61px;
    background: url("../images/btn_next.png") center no-repeat;
    background-position: 0 0
}

.btn-next:hover {
    background-position: 0 -76px
}

.question {
    padding: 180px 8px 0 15px;
    overflow: hidden;
    *zoom: 1;
    display: none;
}

.question.on {
    display: block;
}

.question:before,
.question:after {
    content: " ";
    display: table
}

.question:after {
    clear: both
}

.question .q-num {
    float: left;
    width: 63px;
    height: 63px;
    border-radius: 50%;
    background-color: #a6895e;
    text-align: center;
    color: #1e1c1d;
    font-size: 14px;
    margin-right: 10px;
    line-height: 28px;
    overflow: hidden
}

.question .q-num h2 {
    font-size: 38px
}

.question .select {
    width: 295px;
    float: left;
    color: #fdeded
}

.question .select h2 {
    color: #a5895e;
    font-size: 16px;
    font-weight: normal;
    padding: 5px 0 25px 0
}

.question .select ul {
    *zoom: 1;
    width: 250px;
    margin: 0
}

.question .select ul:before,
.question .select ul:after {
    content: " ";
    display: table
}

.question .select ul:after {
    clear: both
}

.question .select li {
    float: left;
    margin: 0 20px 10px 0
}

.question .select li label {
    cursor: pointer
}

.question .select li input {
    position: relative;
    left: 0;
    top: 2px;
    margin-right: 3px
}

.footer {
    width: 100%;
    height: 204px;
    position: relative;
    left: 0;
    top: 0;
    text-align: center;
    font-size: 12px;
    color: #515151
}

.footer .footer-bg {
    width: 100%;
    height: 204px;
    background: url("../images/footer_bg.jpg") center no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0
}

.footer .footer-inner {
    padding-top: 118px;
    position: relative;
    left: 0;
    top: 0;
    z-index: 10
}

.diablo3-pop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 100
}

.diablo3-pop-bg {
    background-color: #000;
    opacity: .5;
    filter: alpha(opacity=50);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.diablo3-pop-inner {
    background: url("../images/diablo3_pop.png") center no-repeat;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 680px;
    height: 502px;
    margin-top: -251px;
    margin-left: -304px;
    z-index: 99
}

.diablo3-pop-close {
    background: url("../images/diablo3_close.png") center no-repeat;
    background-position: 0 0;
    position: absolute;
    right: 20px;
    top: 27px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    *margin-right: 3px
}

.diablo3-pop-close:hover {
    background-position: 0 -40px
}

.btn-buy {
    display: block;
    margin: 380px auto 0;
    background: url("../images/btn_buy.png") center no-repeat;
    width: 313px;
    height: 76px;
    background-position: 0 0
}

.btn-buy:hover {
    background-position: 0 -98px
}

.js-page {
	position:absolute !important;
	z-index: 0;
	opacity:0;
	filter:alpha(opacity=0);

	-webkit-transition: opacity 1s ease;
	-moz-transition:opacity 1s ease;
	-ms-transition:opacity 1s ease;
	-o-transition:opacity 1s ease;
	transition:opacity 1s ease;
}

.js-page.on {
	z-index: 1;
	opacity:1;
	filter:alpha(opacity=100)
}