@charset "utf-8";
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0;	padding: 0;	border: 0;	font-size: 100%;	vertical-align: baseline;	background: transparent;
	-webkit-text-size-adjust: 100%;	-ms-text-size-adjust: 100%;	text-size-adjust: 100%; font-family:"华文细黑";}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
li{ list-style:none;}

.left{float:left;}
.right{float:right;}
.clear:after{ content:""; display:block;  height:0; overflow:hidden; clear:both;  }
.clear{ zoom:1;}

body{ background:#0d0119;}
.header{ position:relative;}
.header .headerimg{ width:640px; height:97px; }
.header .nava{ text-decoration:none; position:absolute; color:#85ecff; font-size:32px; line-height:32px; bottom:30px; right:20px; }

.hreo-select{ margin-top:30px;}
.hreo-select a{ margin-left:24px; height:69px; width:130px; background:url(../images/wap/typebtn_03.png) no-repeat; text-align:center; line-height:50px; color:#fff; font-size:26px;}
.hreo-select a.on{ background:url(../images/wap/typebtnhover_03.png)}

.hreo-list{}
.hreo-list  li{}
.hreo-list .single-hreo{ display:block; background:url(../images/wap/hreobg_01.png) no-repeat; padding:16px 11px 0 22px; width:123px;text-decoration:none;}
.hreo-list .single-hreo span{ display:block; text-align:center; font-size:22px; line-height:32px; color:#fff ; display:block; height:32px; overflow:hidden; }
.hreo-list .single-hreo img{ width:123px; height:123px;}
.hreo-data{margin-top:10px;}
.hreo-data .hreo-intro .hreoimgbox{ margin-right:10px; display:block; background:url(../images/wap/hreobg_01.png) no-repeat; padding:16px 11px 0 22px; width:123px;text-decoration:none;}
.hreo-data .hreo-intro .hreoimgbox img{ width:123px; height:123px;}
.hreo-data .hreo-intro .line1{ color:#fff; font-size:30px; line-height:30px;margin-top:15px;}
.hreo-data .hreo-intro .line1 span{ color:#ff77fd; font-size:24px;}
.hreo-data .hreo-intro .line3{ color:#999999; font-size:24px; line-height:24px; margin-top:15px;}
.hreo-data .hreo-intro .line3 span{ color:#ff77fd; font-size:24px;}
.hreo-data .hreo-intro .line2{ margin-top:15px;}
.hreo-data .hreo-intro .line2 em{height: 32px;width: 32px; display:inline-block;background: url(../images/wap/HS-fliter.png) no-repeat -5px -92px;}
.hreo-data .hreo-intro .line2 em.type1{background: url(../images/wap/HS-fliter.png) no-repeat -5px -92px;}
.hreo-data .hreo-intro .line2 em.type2{ background-position:-40px -92px; }
.hreo-data .hreo-intro .line2 em.type3{ background-position:-75px -92px; }
.hreo-data .hreo-intro .line2 em.type4{ background-position:-110px -92px; }
.hreo-data .hreo-intro .line2 em.starcraft {background: url(../images/wap/HS-fliter.png) no-repeat -230px -90px;}
.hreo-data .hreo-intro .line2 em.diablo{  background:url(../images/wap/HS-fliter.png) no-repeat -195px -90px; }
.hreo-data .hreo-intro .line2 em.warcraft{height:34px; width:28px; background:url(../images/wap/HS-fliter.png) no-repeat -160px -90px;}
.hreoskill{ padding:0 20px;}
.part h4{ font-size:24px; line-height:25px; border-left:5px #85ecff solid; margin-top:20px; color:#fff; text-indent:10px;}

.hreoskill li { margin-top:20px;}
.hreoskill li .level{ background:url(../images/wap/btns_01.png) no-repeat; height:40px; width:38px; line-height:34px; text-align:center; font-size:22px; color:#fff;}
.hreoskill li .level-skill{  position:relative; background:url(../images/wap/btns_01.png)  -50px 0; padding:3px; height:84px; width:84px; margin-left:20px; }
.hreoskill li .level-skill img{height:84px; width:84px;}
.hreoskill li .level-skill.disalbe{ background-position:-150px 0;}
.hreoskill li .level-skill.disalbe,.gray{filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%); -moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}

.hreoskill li .level-skill.on em{ background:url(../images/wap/arrow_05.png) no-repeat; width:15px; height:12px; top:103px; left:37px; position:absolute;}
.hreoskill li  .skillintro{ display:none; background:#281562; border:2px solid #371f80; padding:20px; margin-top:22px;}
.hreoskill li  .skillintro p span{ color:#48ccdc; font-size:30px; line-height:40px; margin-right:10px;}
.hreoskill li  .skillintro p { color:#cccccc; font-size:24px; line-height:30px;}

.recomentt { padding:0 20px;}
.recomentt .recmentbtn{ margin-top:20px;}
.recomentt .recmentbtn .rbtn{ text-decoration:none;background:url(../images/wap/btns_01.png) no-repeat -250px -100px; width:181px; height:80px; display:inline-block; margin-right:25px; text-align:center;
font-size:25px; line-height:50px; color:#fff; }
.recomentt .recmentbtn .rbtn.on{ background-position:-50px -100px;}

.skillintro h4{ margin:0 20px;}
.skillintro .skillbox .tal_box{ margin-top:20px; background:#150939; padding:20px; position:relative; }
.skillintro .skillbox .tal_box .imgbox{  position: relative;background: url(../images/wap/btns_01.png) -50px 0;padding: 3px;height: 84px;width: 84px; display:inline-block;}
.skillintro .skillbox .tal_box .imgbox img{height: 84px;width: 84px;}
.skillintro .skillbox .tal_box .a_title{ color:#47ccdd; font-size:28px; text-decoration:none; position:absolute; top:20px; left:125px;}
 .skillintro .skillbox .tal_box .a_title span{ color:#ff76ff;}
 .skillintro .skillbox .tal_box .time{color:#ff76ff; font-size:28px; text-decoration:none; position:absolute; top:60px; left:125px;}
.skillintro .skillbox .tal_box  .a_btn{ position:absolute; top:20px; right:20px; width:156px; height:56px; line-height:56px; text-align:center; font-size:28px; color:#cccccc; 
 background:url(../images/wap/btns_01.png) no-repeat -50px -200px; text-decoration:none;}
.skillintro .skillbox .tal_box .intro_blue{ margin-top:10px; color:#3b6f96; font-size:28px; line-height:36px;}

.skillintro .skillbox .tal_box .introadd p{color:#ff76ff; font-size:28px; line-height:36px;}