@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: #323131; background: #eef2f3; 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: #323131;}
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; text-align: center;color: #4b4c4d; }
.footer a{color: #4b4c4d; }


.mt10{ margin-top: 10px;}
.mr40{ margin-right: 40px;}
.bg{ background: #fff}
.pt20{ padding-top: 20px;}
.pb20{ padding-bottom: 20px;}
.mlr15{ margin-left:15px; margin-right: 15px;}
.w426{ width: 396px;padding: 0 15px;}
.w764{ width: 734px; padding: 0 15px;}
.fr{ float: right;}

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

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

.nav-bg{background:#067ebd; }
.nav-list li{ float: left; width: 200px; height: 70px; padding-bottom: 3px; background: url(../images/indexnavbg.jpg); text-align: center; text-align: center;}
.nav-list li a{ color: #fff; font-size: 18px; font-weight: bold}
.nav-list li a font{display: block; height: 15px; line-height: 15px; padding-top: 18px;}
.nav-list li a i{ font-size: small; color:#abe9f8; font-weight: normal;height: 15px; line-height: 15px; }
.nav-list li.on,.nav-list li:hover{ background: url(../images/indexnavbg-h.jpg) center bottom no-repeat;}
.nav-list li.on a,.nav-list li:hover a{ color: #fffd70;}

.nav-list li.player{ border: none}

.hot-list{ padding: 14px; padding-right: 0;}
.hot-attention{ float: left;}
.hot-attention span,.hot-attention i{ display: block; float: left;}
.hot-attention span{width: 94px; height: 29px; background: #1e98d8; font-size: 16px; color: #c6ebff; text-align: center; line-height: 29px; border-radius: 3px;}
.hot-attention i{ width: 5px; height: 29px;}
.hot-box-list{ float: left; height: 29px; overflow: hidden; margin-bottom: 10px;}
.hot-box{ float: left; width: 50%;}
.hot-box-list li{ float: left; height: 19px; line-height: 19px; overflow: hidden; margin: 5px 0px 5px 5px; border-right: 1px #32aaca solid}
.hot-box-list li a{ font-size: 14px; color: #5de5f7; padding: 0 9px;}

.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:765px; height:310px;float: left; position: relative; z-index: 1;}
.slider-bd li{ position: absolute; width: 756px; height: 310px; z-index: 2; display:none;}
.slider-bd li.active{ display: block;}
.slider-bd li p{ position: absolute; z-index: 3; width: 725px; height: 40px; background: url(../images/opa1.png) repeat; font-size: 16px; color: #fff; 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: url(../images/slider.png) center no-repeat;}
.slider-hd li.current,.slider-hd li:hover{background: url(../images/slider-h.png) center no-repeat;}

.new-list{ float: right;width: 425px; height: 310px; overflow: hidden; background: #fff;}
.new-list h2{text-align: center;color: #323131; font-size: 16px;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 .f12 a:hover{ color:#e20d0d }
.border{ margin: 10px 15px; border-top:1px #d5cfbf solid }
.new-list ul{ margin: 0px 10px; padding-top: 10px;}
.new-list ul li{ width:98px; height: 70px; float: left; margin-right: 3px; margin-bottom: 3px;text-indent: 18px; line-height: 64px; }
.new-list ul li.btnbg1{ background: url(../images/btn1.png);}
.new-list ul li.btnbg2{ background: url(../images/btn2.png);}
.new-list ul li.btnbg3{ background: url(../images/btn3.png);}
.new-list ul li.btnbg4{ background: url(../images/btn4.png);}
.new-list ul li.btnbg5{ background: url(../images/btn5.png);}
.new-list ul li.btnbg6{ background: url(../images/btn6.png);}
.new-list ul li.btnbg7{ background: url(../images/btn7.png);}
.new-list ul li.btnbg8{ background: url(../images/btn8.png);}
.new-list ul li a{ color: #fff; font-weight: bolder;}


.title{ height: 50px; zoom:1; border-bottom: 1px #d3d0c4 solid}
.title:after{content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.title .more{ float: right; display: block; height: 30px; padding-left: 12px; background: url(../images/add.jpg) left 23px no-repeat; line-height: 30px; margin-right: 20px; color: #545a61; padding-top: 11px;}
.title a:hover{ color: #ea1d0e}
.title h2{ float: left;}
.title-nav{ float: left;  padding: 10px 20px 0;}
.title-nav a{ display: block; float: left; width: 110px; padding-top:5px; height: 35px; line-height:35px; text-align: center; font-size: 18px; color: #222;}
.title-nav a:hover,.title-nav a.current{  color: #fff; font-weight: bold; background: #2db8dd; border-radius: 8px 8px 1px 1px;}

.box{ padding:5px 15px 20px;}

.tabconlist{ }
.tabconlist .tabcon{ float: left;}
.tabconlist .jsContent{ display: none;}
.tabconlist .active{ display: block;}

.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: #e3dabf; font-size: 16px; color: #746455; 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,.video-list2{ padding-top: 15px; }
.jsTabCon .jsContent{ display: none;}
.jsTabCon .active{ display: block;}
.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: 190px;margin: 0px 4px 12px;float: left;position: relative;}
.video-box-fr .video-mark{ width: 190px; height: 140px;}
.video-img{width: 190px; height: 140px;}
.video-img img{ width: 100%; height: 100%;}
.video-box-fr a.video-text{text-align: left; height: 38px; overflow: hidden;}
.video-mark{ 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;}

.video-list2 .video-box-fr{ width: 170px;}
.video-list2 .video-img{ width: 170px; height: 126px;}
.video-list2 .video-mark{width: 170px; height: 126px; }

.w595{ width: 595px;}
.text-list li{ padding-left: 20px; background: url(../images/jt1.jpg) 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: #737374 }
.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: #ea1d0e; text-decoration: underline;}

.text_blue{ height: auto;}
.text_blue li a{ color: #067ebd;}
.text_blue li a p{ font-weight: bolder;}

.recommend{padding:15px 0px; position: relative; z-index: 9;}
.recommend a{ display: block; float: left; padding: 0 7px; position: relative;}
.recommend a .mark{ position: absolute; width: 224px; height: 340px; background: url(../images/opabg.png) repeat; top: 0; left: 5px; }
.recommend .img2{ display: block; float: left; padding: 0 5px;}
.recommend .img2 img{ width: 224px; height: 340px;}
.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;}
.recommend-jn{ position: absolute; width: 310px; height: 341px; background: #fff; z-index: 10;top:14px; display: none;}
.jn1{left: 230px;}
.jn2{left: 462px; }
.jn3{left:698px;  }
.jn4{left: 396px;}
.jn5{left: 630px;}
.recommend-jn .recommend-jn-top{ text-align: center;}
.recommend-jn .recommend-jn-top img{ width: 186px; height: 112px; display: block; margin: 0 auto}
.recommend-jn-text{ width: 280px; height: 162px; background: #f2f1f1; margin: 0 auto}
.recommend-jn-text p{ font-size: 12px; color: #666666; text-indent: 24px; line-height: 25px; padding: 8px;}
.recommend-jn-btn{  padding-top: 15px; width: 240px; height:32px; margin: auto; }
.recommend-jn-btn a{ display: block; width:116px; height: 32px; text-align: center; line-height: 32px; color: #fff; padding: 0; }
.recommend-jn-btn a.jn-btn1{ float: left; background: #1b61b8}
.recommend-jn-btn a.jn-btn2{ float: right; background: #be7309}
.recommend-zk{ position: absolute;width: 1170px; height: 370px; top: 0px; left: 5px; z-index:-1;}

.w802{ width: 802px; overflow: hidden;}
.position{ height: 50px; border-bottom: 1px #d3d0c4 solid; margin: 0 15px;}
.position p{ height: 50px; line-height: 50px; 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;}
.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.downMore{ padding: 10px 0; border: 1px #e0d9d7 solid; font-size: 16px; text-align: center; margin-bottom: 20px;  background: url(../images/more.jpg) 395px center no-repeat; }
.newUl-list li img{ display: block; float: left; width:188px; height: 140px; }
.newUl-list-text{ margin-left: 205px; 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; color: #1e1918;}
.newUl-list-text h2 a:hover,.newUl-list-text h2 a.current{ color: #ea1d0e; 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:#0f96c8; 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;height: auto;}

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

.texticon{ display: block; float: left; padding:4px 15px; background: #f2f2f3; border:1px #e5e5e5 solid; margin-bottom: 10px; margin-right: 10px; border-radius: 3px;}
.pare{ position: relative; height: 405px;}
.img1{ position: absolute; top: 20px; left: 0px;}
.img1 img{ width: 280px; height: 390px;}
.img2{ position: absolute; top: 20px; left: 290px;}
.img2 img{ width: 290px; height: 194px;}
.img3{ position: absolute; top: 223px; left: 290px;}
.img3 img{ width: 290px; height: 192px;}
.img4{ position: absolute; top: 20px; left: 590px;}
.img4 img{ width: 282px; height: 390px;}
.img5{ position: absolute; top: 20px; left: 882px;}
.img5 img{ width: 292px; height: 193px;}
.img6{ position: absolute; top: 223px; left: 882px;}
.img6 img{ width: 292px; height: 187px;}