@charset "utf-8";
/* CSS Document */
body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, form, button, input, textarea, th, td{margin:0;padding:0;}
body{font:14px/1.42 Microsoft yahei,simsun,sans-serif; color: #555555; background: #f7f7f7; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight: normal;}
ul, ol {list-style:none;}
a,a:hover{ text-decoration: none; color: #555555;}
img {border:0; vertical-align: middle;}
i{ font-style: normal; width: auto; height: auto; margin: 0; padding: 0;}
button, input, select, textarea {font-size:100%;}
.fl {float:left;}
.fr {float: right;}
.clearfix:after {content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.clearfix {zoom:1;}
/*top and foot*/
.topbar {height: 40px;background-image: -webkit-linear-gradient(top, #fff, #f6f6f6);background-image: linear-gradient(to bottom, #fff, #f6f6f6);color: #333;background-color: #f6f6f6;font-size: 12px}
.topbar-container { *zoom:1;overflow: hidden;margin-left: auto;margin-right: auto;width: 1000px;height: 40px}
.topbar-container:before,.topbar-container:after { content: " ";display: table}
.topbar-container:after {   clear: both}
.topbar-logo {float: left;width: 125px;height: 40px}
.topbar-logo a {display: block; width: 125px;height: 40px; background: url(../images/img_logo_58game.jpg) no-repeat; text-indent: -9999em}
.topbar-nav { float: right;padding: 10px 0 0 0}
.topbar-nav-inner {  *zoom:1}
.topbar-nav-inner:before,.topbar-nav-inner:after { content: " "; display: table}
.topbar-nav-inner:after {   clear: both}
.topbar-nav li { float: left; line-height: 20px; background: url(../images/link_line.gif) right center no-repeat;color: #333}
.topbar-nav a {display: block;padding: 0 10px;color: #333}
.topbar-nav .nobg { background: none}
.footer{ height: 80px; line-height: 80px; font-size: 12px; color: #60413f; text-align: center;color: #4e5258; }
.footer a{color: #4e5258; }


.mt10{ margin-top: 10px;}
.mr40{ margin-right: 40px;}

.wrap{ position: relative; width: 100%; margin: 0 auto;overflow: hidden; }
.main-bg{ position: absolute; width: 100%; left: 0; top: 0px; z-index: -1;}
.main-bg div{ width: 100%; height: 800px; background-position: center top;}
.main-bg1{ background: url(../images/bg.jpg) no-repeat;}

.main{ padding-top: 450px; width: 1200px; margin: 0 auto;}

.nav-list li{ float: left; width: 200px; height: 70px; background: url(../images/nav_bg.jpg) no-repeat; text-align: center; text-align: center;}
.nav-list li a font{  color: #c4e1ff; font-size: 18px; padding-top: 20px; display: block;}
.nav-list li i{ display: block; text-align: center; height: 6px; overflow: hidden; background-position: center top; background-repeat: no-repeat; }
.nav-list li:hover i,.nav-list li.on i{ background-position: center bottom;}
.nav-list li:hover font,.nav-list li.on font{ color: #fff}
.nav-list li.home i{ background-image: url(../images/nav1.png);}
.nav-list li.news i{ background-image: url(../images/nav1.png);}
.nav-list li.video i{ background-image: url(../images/nav1.png);}
.nav-list li.novice i{ background-image: url(../images/nav1.png);}
.nav-list li.handbook i{ background-image: url(../images/nav1.png);}
.nav-list li.player i{ background-image: url(../images/nav1.png);}
.nav-list li.player{ border: none}

.hot-list{ padding: 15px; padding-right: 0; background: url(../images/navup_bg.jpg);}
.hot-attention{ float: left;}
.hot-attention span,.hot-attention i{ display: block; float: left;}
.hot-attention span{width: 94px; height: 29px; background: #e67010; font-size: 16px; color: #fff; text-align: center; line-height: 29px;}
.hot-attention i{ width: 5px; height: 29px; background: url(../images/jt_bg.png) no-repeat;}
.hot-box-list{ float: left; width:1085px; overflow: hidden;}
.hot-box-list li{ float: left; margin: 5px 0px 5px 21px; border-right: 1px #728fc4 solid}
.hot-box-list li a:hover,.hot-box-list li .hover{ color: #ffea00; text-decoration: underline;}
.hot-box-list li a{ font-size: 14px; color: #a9d3ff}
.hot-box-list li i{ display: inline-block; width: 21px; height: 12px; margin-left: 5px;}
.hot-box-list li .hot_icon{ background: url(../images/hot_icon.png) no-repeat; margin-right: 5px;}
.hot-box-list li .new_icon{ background: url(../images/new_icon.png) no-repeat;margin-right: 5px;}

.con{ margin-top: 10px; zoom:1;}
.con:after{ content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.mr-10{ margin-right: -10px;}

.slider-box{ width: 567px; height: 299px; margin-right: 10px; float: left; position: relative; z-index: 1;}
.slider-bd li{ position: absolute; width: 567px; height: 299px; z-index: 2; display:none;}
.slider-bd li.active{ display: block;}
.slider-bd li p{ position: absolute; z-index: 3; width: 527px; height: 40px; background: url(../images/slide_text_bg.png) repeat; font-size: 16px; color: #eeeeee; line-height: 40px; padding: 0 20px; left: 0; bottom: 0;}
.slider-hd{ position: absolute; height: 20px; bottom: 10px; right: 10px; z-index: 4;}
.slider-hd li{ float: left; width: 25px; height:25px; margin: 0 2px; background-image: url(../images/slide_icon_bg.png); background-position:  -25px center; background-repeat: no-repeat;}
.slider-hd li.current,.slider-hd li:hover{ background-position: left center;}

.new-list{ float: left; margin-right:10px; width: 413px; height: 299px; overflow: hidden; background: #fff;}
.new-list h2{ padding-top: 20px; text-align: center;color: #992a2a; font-size: 22px;font-weight: bold;}
.new-list h2 a{font-size: 22px; color: #f1b923; font-weight: bold;}
.new-list .f12{ text-align: center; font-size: 12px;margin: 5px 0;}
.new-list .f12 a{ color: #89898a; margin: 0 3px;}
.new-list .border{ margin: 10px 15px; border-top:1px #f3f3f3 solid }
.new-list ul{ margin: 0 15px;}
.new-list ul li{ line-height: 30px; height: 30px; clear: both; zoom:1; }
.new-list ul li:after{ content: ""; clear: both; display: block; visibility: hidden; height: 0; font-size: 0;}
.new-list ul li span{ float: right; color: #e0c8b8}
.new-list ul li p{ float: left; color: #89898a; width: 85%; overflow: hidden; white-space:nowrap;text-overflow:ellipsis;}
.new-list ul li:hover p{ text-decoration: underline; color: #89898a}
.btn-list{ width: 200px; height: 289px; float: left; background: #1260b3; padding-top: 10px; overflow: hidden;}
.btn-list a{ display: block; text-indent: -99993em;}
.btn-list a:hover{background-position: left bottom;}
.btn-list .btn-android,.btn-list .btn-ios{ width: 180px; height: 79px; margin: 0 auto 5px; background-position: left top;}
.btn-list .btn-android{ background-image: url(../images/btn_android.jpg);}
.btn-list .btn-ios{ background-image: url(../images/btn_ios.jpg);}
.btn-list .btn-gift{ background-position: left top;}
.btn-list .btn-home{ background-position: left bottom;}
.btn-list .btn-gift,.btn-list .btn-home{ width: 200px; height: 58px; background-image: url(../images/btn_bg.jpg);}
.btn-list .btn-gift:hover{ background-image: url(../images/btn_bg-hover.jpg);background-position: left top;}
.btn-list .btn-home:hover{ background-image: url(../images/btn_bg-hover.jpg);background-position: left bottom;}

.title{ height: 51px; background: url(../images/title_bg.png) repeat-x; zoom:1;}
.title:after{content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.title .more{ float: right; display: block; height: 30px; padding-left: 20px; background: url(../images/more.png) left 28px no-repeat; line-height: 30px; margin-right: 20px; color: #545a61; padding-top: 20px;}
.title a:hover{ color: #b52e17}
.title h2{ float: left;}
.title-nav{ float: left;  padding: 0px 20px;}
.title-nav a{ display: block; float: left; width: 125px;padding: 14px 0px; text-align: center; background: url(../images/line_bg2.png) right center no-repeat; font-size: 16px; color: #444;}
.title-nav a:hover,.title-nav a.current{  color: #1260b3; font-weight: bold; padding-bottom: 12px; border-bottom: 2px #1260b3 solid}

.box{ background: #fff; padding:5px 15px 20px;}

.game-info{ height: 193px; margin-bottom: -1px; overflow: hidden; }
.game-info-box{ padding: 16px 0; border-bottom:1px #eaeaea dashed; zoom:1;}
.game-info-box:after{content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.game-info-top{ float: left;}
.game-info-top span,.game-info-top i{ display: block; float: left;}
.game-info-top span{width: 94px; height: 30px; background: #eaeaea; font-size: 16px; color: #333; text-align: center; line-height: 30px;}
.game-info-top i{width: 5px; height: 30px; background: url(../images/jt_bg2.png) no-repeat;}
.game-info-list{ float: left; width:1070px; overflow: hidden;}
.game-info-list li{ float: left; padding: 5px 10px 5px 10px; background: url(../images/line_bg2.png) right center no-repeat;}
.game-info-list li a:hover,.game-info-list li .hover{ color: #b52e17; text-decoration: underline;}
.game-info-list li a{ font-size: 14px; color: #555555}
.game-info-list li i{ display: inline-block; width: 21px; height: 12px; margin-left: 5px;}
.game-info-list li .hot_icon{ background: url(../images/hot_icon.png) no-repeat;}
.game-info-list li .new_icon{ background: url(../images/new_icon.png) no-repeat;margin-right: 5px;}
.Raiders a{ display: block; float: left; width: 138px; height: 42px; background: url(../images/text_bg.png)  no-repeat; background-position: left bottom; text-align: center; line-height: 40px; margin: 15px 8px 0 0; color: #555;}
.Raiders .current,.Raiders a:hover{background-position: left top; color: #fff;}

.illustrations,.Dense_volume,.video-list{ padding-top: 15px;}
.illustrations a,.Dense_volume a{ display: block; margin: 0px 12px 5px; float: left; text-align: center; width: 93px;}
.illustrations a p,.Dense_volume a p{ padding-top: 5px ; color: #555;height: 33px; line-height: 15px;}
.illustrations a:hover p,.illustrations a.current p{ color: #b52e17; text-decoration: underline;}
.Dense_volume a:hover p,.Dense_volume a.current p{  text-decoration: underline;}

.video-box{margin: 0px 5px 5px; float: left; text-align: center; position: relative; width: 223px;}
.video-box-fr{ width: 170px;margin: 0px 4px 12px;float: left;position: relative;}
.video-box-fr .video-mark{ width: 170px; height: 126px;}
.video-box-fr a.video-text{text-align: left; height: 38px; overflow: hidden;}
.video-mark{ width: 223px;height: 135px; position: absolute; top: 0; left: 0; z-index: 2; background: url(../images/video_mark.png) repeat;}
.video-mark a{ display: block; position: absolute; width: 52px; height: 52px; background: url(../images/video_play.png) no-repeat; top: 50%; left: 50%; margin-left: -26px; margin-top: -26px; cursor: pointer;}
.video-text{ display: block; padding-top: 5px; color: #555555; text-align: center; height: 35px; line-height: 15px; overflow: hidden;}
.video-text:hover{ color: #b52e17; text-decoration: underline;}

.w595{ width: 595px;}
.text-list{ padding:10px 5px 0; height: 280px; overflow: hidden;}
.text-list li{ padding-left: 20px; background: url(../images/jt.png) left center no-repeat; height: 30px;overflow: hidden;}
.text-list li a{ color: #555}
.text-list li span{ float: right;height: 30px; line-height: 30px; color: #b6b6b6 }
.text-list li p{ float: left; height: 30px; line-height: 30px; width: 80%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-list li:hover p,.text-list li.current p{ color: #b52e17; text-decoration: underline;}

.recommend{padding:15px 0px; }
.recommend a{ display: block; float: left; padding: 0 7px;}
.recommend a img{ width: 277px; height: 186px;}
.recommend .img2{ display: block; float: left; padding: 0 3px;}
.recommend .img2 img{ width: 227px; height: 360px;}
.recommend a p{ text-align: center; padding-top: 5px;}
.recommend a:hover p,.recommend a.current p{ color: #b52e17; text-decoration: underline;}


.la_slider{width:1160px;height:360px;overflow:hidden;background:#000; position:relative;}
.la_slider .slide{position:absolute;top:0px;height:360px;width:558px;background:#000;overflow:hidden;border-left:#fff solid 4px;cursor:default;}
.la_slider .diapo{position:absolute;filter:alpha(opacity=100);opacity:1;visibility:hidden;height:360px; width:256px;display:block;}
.la_slider .info{ width:278px; height:360px; padding:0 12px; background-color:#fff; position:absolute; right:0; top:0;}
.la_slider .info .tit{ height:28px; line-height:28px; overflow:hidden;}
.la_slider .info .tit h4{ font:24px/28px "微软雅黑"; color:#3299f8;}
.la_slider .info .tit a.fr{ margin-top:4px; display:inline;}
.la_slider .info .c{ padding:7px 5px; background-color:#f2f1f1; margin-top:10px;margin-bottom: 20px; overflow: hidden;}
.la_slider .info .c p{color:#7f7f7f; height:48px; line-height:24px; overflow:hidden; font-family:"微软雅黑";}
.la_slider .info .c p i{ width:28px; height:16px; line-height:16px; border:1px solid #f4c9c8; display:inline-block; vertical-align:middle; text-align:center; color:#e55858; border-radius:2px; margin-right:4px;}
.la_slider .info .str{ height:16px; line-height:16px; overflow:hidden; margin-top:10px; padding:0 5px;}
.la_slider .info .str .x{ height:16px; width:91px; background:url(../images/ico_xin.png) 0 -14px no-repeat;}
.la_slider .info .str .x span{ height:16px; display:block;background:url(../images/ico_xin.png) 0 1px no-repeat;}
.la_slider .info .tec{ width:100%; overflow:hidden;}
.la_slider .info .tec li{ width:90px; height:30px; margin:1px 1px 0 0; display:inline; float:left;}
.la_slider .info .tec li a{ width:90px; height:30px; display:block;background-color:#f2f1f1; text-align:center; line-height:30px; overflow:hidden;}
.la_slider .info .tec li a:hover{ color:#fff; background-color:#e55858; text-decoration:none;}
.la_slider .info .recom{ height:72px; overflow:hidden;margin-top: 15px; margin-bottom: 10px;}
.la_slider .info .recom .t{ width:15px; height:62px; line-height:15px; color:#4d95da; font-weight:600; background:url(img/ico_tuij.png) left top no-repeat; padding:5px 6px;}
.la_slider .info .recom ul li{ width:72px; height:72px; overflow:hidden; margin-left:10px;display:inline; float:left;}
.la_slider .info .recom ul li img{ width:66px; height:66px; padding:3px; background-color:#e6edf3; display:block;}

/*职业*/
.n_intro .inner{margin: 10px;}
.n_intro .race .inner{margin: 15px;}
.n_intro .btn{display: inline-block;*display: inline;*zoom: 1;width: 120px;height: 26px;line-height: 26px;background: #33446f;color: #fff;font-size: 13px;text-align: center;}
.n_intro .btn1{display: inline-block;*display: inline;*zoom: 1;width: 120px;height: 26px;line-height: 26px;background: #e55858;color: #fff;font-size: 13px;text-align: center;}
.n_intro .btn:hover{background: #6f8bd1;}
.n_intro .btn.first{margin-right: 20px;}
.n_intro .btn:hover{text-decoration: none;}
.n_intro .btn1:hover{background: #f88a8a;}
.n_intro .btn1.first{margin-right: 10px;}
.n_intro .btn1:hover{text-decoration: none;}
.n_intro .races, .n_intro .race{float: left;width: 50%;}
.n_intro .races .hd{height: 29px;line-height: 29px;background: #dde0e9;border-bottom: 1px solid #d0d3dc;padding: 0 10px;}
.n_intro .races .hd span{font-size: 14px;color: #616c87;}
.n_intro .races .hd .type{font-size: 15px;color: #2e4b7a;font-weight: bold;}
.n_intro .race.left{background: #fff;}
.n_intro .race.right{background: #f1eded;float: none;overflow: hidden;width: auto;}
.n_intro .race .info{margin-bottom: 15px; height:100px;}
.n_intro .race p{font-size: 13px;color: #616c87;}
.n_intro .race img{float: left;width: 100px;height: 100px;margin-right: 10px;}
.n_intro .race .skill{margin: 8px 0;overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.n_intro .race .summary{height: 3em;}
.n_intro .race .type{font-size: 16px;color: #d52352;}
.n_intro .race .more{color: #d52352;}

.w802{ width: 802px; overflow: hidden;}
.position{ background: url(../images/title_bg.png) repeat-x; height: 51px;}
.position p{ height: 51px; line-height: 51px; padding-left: 30px; color: #888;}
.position p span,.position p a{margin: 0 3px; font-size: 12px;}
.position p span{ color: #444;}
.position p a{ color: #888;}

.newbox{ padding: 5px 30px 30px; background: #fff;}
.newUl-list li{ padding: 15px 0; border-bottom: 1px #eeeeee solid; zoom:1;}
.newUl-list li:after{content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.newUl-list li img{ display: block; float: left; width:188px; height: 140px; }
.newUl-list-text{ float: left; width: 540px; margin-left: 14px; height: 140px; overflow: hidden; margin-top: 0;}
.newUl-list-text h2{ padding: 10px 0; font-weight: normal;}
.newUl-list-text h2 a{ font-size: 20px; font-weight: bold; color: #555;}
.newUl-list-text h2 a:hover,.newUl-list-text h2 a.current{ color: #b52e17; text-decoration: underline;}
.newUl-list-text p{ line-height: 1.6; height:66px ; overflow: hidden;}
.newUl-list-text .clearfix{ margin-top:10px;*margin-top: 5px;}
.newUl-list-text .clearfix *{color: #a4a3a3;}
.newUl-list-text .clearfix span{ float: right; padding-left: 25px; background: url(../images/eye_icon.png) left center no-repeat;}

.w388{ width: 388px;}
.con2{ margin-bottom: 10px;}
.hei_auto{ height: auto;}

.page{*zoom:1;margin:30px auto;text-align:center;font-size:14px}
.page:before,.page:after{content:" ";display:table}
.page:after{clear:both}
.page ul{display:inline-block;*display:inline;*zoom:1}
.page li{float:left;margin:0 3px;}
.page li a{ padding: 1px 12px;  height:26px; line-height: 26px; text-align: center; background-color: #fff; border: 1px #dedede solid; display: block;}
.page li a.active,.page li a:hover{color:#fff; background:#b52e17; border: none; padding: 1px 13px;}

.detail-tit{ padding-top: 30px; text-align: center; font-size: 20px; color: #444; font-weight: bold;}
.author{ text-align: center; font-size: 12px; color: #999}
.tab-tit{ padding: 25px 10px;}
.tab-tit li{ float: left; margin: 0 2px 10px; padding: 8px 10px; width: 223px; border: 1px #dedede solid; text-align: center;}
.tab-tit li a{ color: #555; font-size: 12px;}
.tab-tit li:hover,.tab-tit li.current{ border: 1px #b52e17 solid}
.tab-tit li:hover a,.tab-tit li.current a{ color: #b52e17}
.tab-con{ padding: 0 15px;}
.tab-box p{ text-indent: 2em; line-height: 2.2; margin-bottom: 15px;}
.tab-box img{ display: block; margin: 0 auto 15px;}

.content{ display: none;}
.active{ display: block;}