@charset "utf-8";

html{overflow-y:scroll;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th{margin:0;padding:0;}
fieldset,img {border:0;}
ul,li,ol {list-style:none;}
select,input{vertical-align:middle;}
a{color:#333333; text-decoration:none; outline:none;star:expression(this.onFocus=this.blur());}
a:hover{ text-decoration: underline;}
.fl { float:left;}
.fr { float:right;}
.none {display:none;}
body, html {width:100%; font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;font-weight: normal;display: -webkit-box;-webkit-box-orient: vertical; -webkit-box-align: center;}

/* *{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;} 用于解决某些情况下出现闪屏的问题，若无则不加*/
body{opacity: 1;-webkit-transition:opacity 500ms ease-in;transition:opacity 500ms ease-in; }
html{ font-size: 625%; } 
@media screen and (max-width:359px) and (orientation:portrait) {
    html { font-size: 266.67%; } 
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 300%; } 
}
@media screen and (min-width:375px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 312.5%; } 
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 333.33%; } 
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 345%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size:360%; }
}
@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){
    html { font-size:400%;}
} 
@media screen and (min-width:640px)and (max-width:719px) and (orientation:portrait){
    html { font-size:533.33%;}
} 
@media screen and (min-width:720px)and (max-width:749px) and (orientation:portrait){
    html { font-size:600%;}
} 
@media screen and (min-width:720px)and (max-width:1024px) and (orientation:portrait){
    html { font-size:625%;}
} 
@media screen and (min-width:1025px) and (orientation:portrait){
    html { font-size:625%;}
}
/* 按750尺寸界面效果 1rem=100px */
body { font-size:13px; background:#ffffff; color:#333333;}

/* style */
.roletitle_top {width:100%; height:8rem; display:block; background:url(../images/roletitle_bg1.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.roletitle_cen {width:100%; height:10rem; display:block; background:url(../images/roletitle_bg2.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.roletitle_bot {width:100%; height:2rem; display:block; background:url(../images/roletitle_bg3.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative; color:#333333;}

.roletitle_logo {width:3rem; height:2rem; display:block; text-indent:-999rem; overflow:hidden; background:url(http://zy.gamexdd.com/public/images/indexpc_logo.png) no-repeat; background-size:100%; position:absolute; left:50%; top:-0.3rem; margin-left:-7.8rem; z-index:9;}

.roletitle_text {width:7rem; height:2.8rem; display:block; background:url(../images/roletitle_text1.png) no-repeat; background-size:100%; position:absolute; left:50%; top:0.4rem; margin-left:-5rem; z-index:5; -webkit-animation: animatop 1.8s linear infinite;}
@-webkit-keyframes animatop{
  from { -webkit-transform: translate3d(0, 0, 0);}
  50% { -webkit-transform: translate3d(0, -5%, 0);}
  to { -webkit-transform: translate3d(0, 0, 0);}
}
.roletitle_text:before { content:''; width:6rem; height:2rem; display:block; background:url(../images/roletitle_text2.png) no-repeat; background-size:100% 2000%; position:absolute; left:0.5rem; top:0.4rem; z-index:3;-webkit-animation: roletitle_text 1s steps(20) infinite;}
	@-webkit-keyframes roletitle_text{
     to{
         background-position: 0 -40rem;
     }
	}
.roletitle_btn {width:6rem; height:1rem; display:block; position:absolute; left:50%; top:6.8rem; margin-left:-5.8rem; z-index:6;}
.roletitle_btn a {width:2.8rem; height:1rem; display:block; text-indent:-999rem; overflow:hidden; margin:0 0.1rem; float:left;}
.roletitle_btn a.roletitle_btn1 {background:url(../images/roletitle_btn1.png) no-repeat; background-size:100%;}
.roletitle_btn a.roletitle_btn2 {background:url(../images/roletitle_btn2.png) no-repeat; background-size:100%;}
.roletitle_btn a:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}

.roletitle_li {width:3rem; height:4.3rem; display:block; position:absolute; left:50%; top:0.68rem;}
.roletitle_li.grade1 { margin-left:-5.3rem;}
.roletitle_li.grade2 { margin-left:-1.5rem;}
.roletitle_li.grade3 { margin-left:2.3rem}
.roletitle_li .roletitle_btn3 {width:1.8rem; height:0.7rem; display:block; text-indent:-999rem; overflow:hidden; background:url(../images/roletitle_btn3.png) no-repeat; background-size:100%; position:absolute; left:0.6rem; top:3.3rem;}
.roletitle_li .roletitle_btn3:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}

.roletitle_footer {width:100%; padding-top:0.8rem; display:block;}


/* 右浮導航 */
.point_right { position:absolute; position:fixed; right:0.05rem; top:50%; z-index:9; margin-top:-2rem; width:1.2rem;}

.point_right a {width:1.2rem; height:0.32rem; margin:0 0 0.1rem 0; text-indent:-999rem; overflow:hidden; float:left; position:relative;}
.point_right a.m1 { display:none;}
.point_right a.m5 {display:none;}
.point_right a:before {content: ''; width:1.2rem; height:100%; text-indent:-999rem; display:block; overflow:hidden; position:absolute; left:50%; top:0; margin-left:-0.6rem; z-index:2;}
.point_right a.m1:before {background:url(../images/point_right_menu1.png) no-repeat;}
.point_right a.m2:before {background:url(../images/point_right_menu2.png) no-repeat;}
.point_right a.m3:before {background:url(../images/point_right_menu3.png) no-repeat;}
.point_right a.m4:before {background:url(../images/point_right_menu4.png) no-repeat;}
.point_right a.m5:before {background:url(../images/point_right_menu5.png) no-repeat;}
.point_right a.m6:before {background:url(../images/point_right_menu6.png) no-repeat;}
.point_right a.m7:before {background:url(../images/point_right_menu7.png) no-repeat;}
.point_right a.m8:before {background:url(../images/point_right_menu8.png) no-repeat;}
.point_right a.m9:before {background:url(../images/point_right_menu9.png) no-repeat;}
.point_right a:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}



@media screen and (max-width:1024px) and (orientation:portrait) {

.roletitle_top {width:100%; height:9rem; display:block; background:url(../images/roletitle_m_bg1.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.roletitle_cen {width:100%; height:11.6rem; display:block; background:url(../images/roletitle_m_bg2.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative;}
.roletitle_bot {width:100%; height:2.4rem; display:block; background:url(../images/roletitle_m_bg3.jpg) no-repeat center top; background-size:100%; background-size:cover; position:relative; color:#333333;}


.roletitle_logo { position:absolute; left:50%; top:-0.2rem; margin-left:-3.65rem;}
.roletitle_text { width:4.5rem; height:1.8rem; top:1.4rem; margin-left:-3.75rem;}
.roletitle_text:before {width:3.9rem; height:1.3rem; left:0.3rem; top:0.25rem;-webkit-animation: roletitle_text 1s steps(20) infinite;}
	@-webkit-keyframes roletitle_text{
     to{
         background-position: 0 -26rem;
     }
	}
.roletitle_btn {top:7.8rem; margin-left:-3rem;}

.roletitle_li {width:7.2rem; height:2rem; display:block; position:absolute; left:50%; top:0.2rem;}
.roletitle_li.grade1 { margin-left:-3.6rem; top:0.2rem;}
.roletitle_li.grade2 { margin-left:-3.6rem; top:2.4rem;}
.roletitle_li.grade3 { margin-left:-3.6rem; top:4.6rem;}
.roletitle_li .roletitle_btn3 {left:5.25rem; top:0.65rem;}

.roletitle_footer {width:100%; padding-top:0rem; display:block;}


/* 底部導航 */
.point_right { position:absolute; position:fixed; left:0; right:auto; top:auto; bottom:0; z-index:9; margin-top:0px; width:100%;}
.point_right a {width:25%; height:0.8rem; margin:0; text-indent:-999rem; float:left; overflow:hidden; background:url(../images/pointm_bottom_menubg.png) no-repeat right -0.8rem; background-size:auto 200%; position:relative;}
.point_right a.m1 {display:none;}
.point_right a.m3 {display:none;}
.point_right a.m4 {display:none;}
.point_right a.m5 {display:none;}
.point_right a.m6 {display:none;}
.point_right a:after {content: ''; width:100%; height:0.8rem; text-indent:-999rem; display:block; overflow:hidden; background:url(../images/pointm_bottom_menubg.png) no-repeat left -0rem; background-size:auto 200%; position:absolute; left:0; top:0; z-index:1;}
.point_right a:before {content: ''; width:1.6rem; height:100%; text-indent:-999rem; display:block; overflow:hidden; position:absolute; left:50%; top:0; margin-left:-0.8rem; z-index:2;}
.point_right a.m1:before {background:url(../images/pointm_bottom_menu1.png) no-repeat; background-size:100%;}
.point_right a.m2:before {background:url(../images/pointm_bottom_menu2.png) no-repeat; background-size:100%;}
.point_right a.m3:before {background:url(../images/pointm_bottom_menu3.png) no-repeat; background-size:100%;}
.point_right a.m4:before {background:url(../images/pointm_bottom_menu4.png) no-repeat; background-size:100%;}
.point_right a.m5:before {background:url(../images/pointm_bottom_menu5.png) no-repeat; background-size:100%;}
.point_right a.m6:before {background:url(../images/pointm_bottom_menu6.png) no-repeat; background-size:100%;}
.point_right a.m7:before {background:url(../images/pointm_bottom_menu7.png) no-repeat; background-size:100%;}
.point_right a.m8:before {background:url(../images/pointm_bottom_menu8.png) no-repeat; background-size:100%;}
.point_right a.m9:before {background:url(../images/pointm_bottom_menu9.png) no-repeat; background-size:100%;}
.point_right a:hover {-webkit-filter:brightness(1.1);filter:brightness(1.1);}
}