@charset "utf-8";
@import url(http://wf.changyou.com/logo/wf_logo_small.css);

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
fieldset,img,abbr,acronym{border:0;}

/*页面样式*/
.c:before,.c:after {content:"";display:table;}
.c:after {clear:both;}
.c {zoom:1;}
body {font:12px/1.5 '\5FAE\8F6F\96C5\9ED1';padding-top:55px;text-align:justify;background: #17192c;overflow-x: hidden;}
a {text-decoration:none;overflow:visible;}
a:hover {text-decoration:none;}
.pr{position:relative;}
.pa{position:absolute;}
.fl{float: left;}
.fr{float: right;}
.hide {display:block;width:0;height:0;overflow:hidden;}
.db{display:block;text-indent:-999em;}
:focus{outline: none;}


.share{width:120px;position:absolute;top:8px;right:0;}
.share span{color:#d8ecff;}
.btn{background:url(../img/btn.png) no-repeat;width:65px;height:49px;}
.bg5{min-width:1000px;}
.header{height:327px;position:relative;}
.top-link{height:35px;width:355px;color:#fff6e0;position:absolute;top:38px;right:-8px;z-index:1;font:12px/28px '\5b8b\4f53';}
.top-share{padding-left:109px;float:left;}
.top-share a{color:#d8ecff;margin-right:19px;float:left;}
.top-share a:hover{color:#ffd8a8}
.share{width:90px;position:absolute;top:5px;right:13px;}
/*head*/
.head{height:797px;background: url(../img/hd.jpg) no-repeat 50% 0;}
.wf_logo_lk,.wf_logo_bg{position: absolute;top: 0px;left: 80px;}

.header-box{background: url(../img/header.jpg?v2) center top;}
.header{position: relative; width: 1200px; margin: 0 auto; height: 822px;}
.content-box{background: url(../img/bg.jpg) no-repeat center top;}
.search-box{width: 168px; height: 32px; padding-top: 13px; margin:0 auto;}
.search{position: relative; width: 168px;height: 32px; background: url(../img/search.png) no-repeat;}
.search input{border: none; width: 120px; height: 23px; line-height: 23px; margin:5px 0 0 8px; color: #fff; font-size: 16px; background: transparent;}
.search a{position: absolute; display: block; width: 30px; height: 30px; right: 10px; top: 1px;}
.search span{ position: absolute; display: none; width: 40px; line-height: 23px; cursor: pointer; right: -50px;  top: 5px; color: #fff; font-size: 14px; text-decoration: underline;}
.content{position: relative; width: 1200px; margin: 0 auto;  min-height:800px;}
.content ul{width: 1032px; margin: 0 auto; padding-top: 50px; }
.content ul li{width: 258px; height: 400px; float: left; }
.content ul li a{display: block; width: 225px; height: 340px; margin: 0 auto; background: url(../img/list.png); background-repeat: no-repeat;}
.content ul li a:hover{background: url(../img/hover.png); background-repeat: no-repeat;}
.content ul li .role1{background:url(../img/role1.png);position: absolute;top: 76px;}
.content ul li .role1:hover{background:url(../img/role1_1.png);position: absolute;top: 76px;}
.content ul li .role2{background-position: -258px 0;}
.content ul li .role2:hover{background-position: -258px 0;}
.content ul li .role3{background-position: -516px 0;}
.content ul li .role3:hover{background-position: -516px 0;}
.content ul li .role4{background-position: -774px 0;}
.content ul li .role4:hover{background-position: -774px 0;}
.content ul li .role5{background-position: 0 -401px;}
.content ul li .role5:hover{background-position: 0 -401px;}
.content ul li .role6{background-position: -258px -401px;}
.content ul li .role6:hover{background-position: -258px -401px;}
.content ul li .role7{background-position: -516px -401px;}
.content ul li .role7:hover{background-position: -516px -401px;}
.content ul li .role8{background-position: -774px -401px;}
.content ul li .role8:hover{background-position: -774px -401px;}
.content ul li .role9{background-position: 0 -800px;}
.content ul li .role9:hover{background-position: 0 -800px;}
.content ul li .role10{background:url(../img/role10.png);position: absolute;top: 878px;}
.content ul li .role10:hover{background:url(../img/role10_1.png);position: absolute;top: 878px;}
.content ul li .role11{background-position: -516px -800px;}
.content ul li .role11:hover{background-position: -516px -800px;}
.content ul li .role12{background-position: -774px -800px;}
.content ul li .role12:hover{background-position: -774px -800px;}
.content ul li .role13{background-position: 0 -1200px;}
.content ul li .role13:hover{background-position: 0 -1200px;}
.content ul li .role14{background-position: -258px -1200px;}
.content ul li .role14:hover{background-position: -258px -1200px;}
.content ul li .role15{background-position: -516px -1200px;}
.content ul li .role15:hover{background-position: -516px -1200px;}
.content ul li .role16{background-position: -774px -1200px;}
.content ul li .role16:hover{background-position: -774px -1200px;}
.content ul li .role17{background-position: 0 -1600px;}
.content ul li .role17:hover{background-position: 0 -1600px;}
.content ul li .role18{background-position: -258px -1600px;}
.content ul li .role18:hover{background-position: -258px -1600px;}
.content ul li .role19{background-position: -516px -1600px;}
.content ul li .role19:hover{background-position: -516px -1600px;}
.content ul li .role20{background-position: -774px -1600px;}
.content ul li .role20:hover{background-position: -774px -1600px;}
.content ul li .role21{background-position: 0 -2000px;}
.content ul li .role21:hover{background-position: 0 -2000px;}
.content ul li .role22{background-position: -258px -2000px;}
.content ul li .role22:hover{background-position: -258px -2000px;}
.content ul li.newRole23 a{display: block; width: 234px; height: 341px; margin: 0 auto; background: url(../img/23l.png); background-repeat: no-repeat;}
.content ul li.newRole23 a:hover{ background-image: url(../img/23h.png);}
.content ul li.newRole24 a{display: block; width: 226px; height: 341px; margin: 0 auto; background: url(../img/24l.png); background-repeat: no-repeat;}
.content ul li.newRole24 a:hover{ background-image: url(../img/24h.png);}

.content ul li .role25{background:url(../img/25l.png);position: absolute;top: 76px;}
.content ul li .role25:hover{background:url(../img/25h.png);position: absolute;top: 76px;}


.backtop{position: fixed; left:50%; bottom: 150px; width: 52px; height: 52px; margin-left: 500px; cursor: pointer; background: url(../img/backtop.png);}
.tips_box{width: 250px; height: 320px; background: url(../img/tips.png);}
.pt-down .out,.pt-down .in{display: none;}
.pt{width: 250px; height: 320px; border: none; background: transparent;box-shadow:none; /*margin-top: -150px; margin-left:-50px;*/ }
.pt .cont {padding: 0; background: transparent;}
.dirc{position: absolute; top: 1px;  width: 50px; height: 21px; text-align: center; font-size: 14px; color: #01c9ef;}
.d1{left: 102px; top:29px;}
.d2{left: 195px; top: 115px;}
.d3{left: 102px; top: 202px;}
.d4{left: 8px; top: 115px;}
.xstj{position: absolute; top: 243px; left: 31px; width: 188px; height: 40px; line-height: 40px; text-indent: 16px; color: #02b9dd; font-size: 14px;}
.xstj span{display:block; position:absolute; top:13px; left:100px; width:71px; height:14px; background: url(../img/xing.png);}
.xstj label{position: absolute; top: 0;left: 0; width: 71px; height: 14px;background: url(../img/xing.png) 0 -14px;}
.xstj .level1{width: 17px;}
.xstj .level2{width: 36px;}
.xstj .level3{width: 54px;}
.xstj .level4{width: 71px;}
.level{display:block; position:absolute; top:47px; left:47px; }