@charset "utf-8";
html { width:100%; height:100%; -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; font-size:100px;}
body {margin:0; padding:0px; font-size:14px; text-align:center; font-family:"Microsoft YaHei","黑体","宋体","Arial",sans-serif; width:100%;height:100%; overflow:hidden;}
ul,li,dl,dt,dd,p,h2,h3,h4,h5{ list-style:none; padding:0; margin:0;}
button, input, optgroup, select, textarea {margin:0;font:inherit;color:inherit; outline:0;}
a {background-color:transparent; text-decoration:none;outline:none;-moz-outline-style:none;}
a:active, a:hover {outline:0;}
img{border:none;vertical-align: middle;}

.main{ display:inline-block; width:100%; height:100%;}
.main img{ width:100%;}

.box1{ background:url(../images/box_bg1.jpg) no-repeat center center; background-size:100%;}
.box1 .top_logo{ width:3rem; height:1.37rem; background:url(../images/logo.png) no-repeat; background-size:100%; position:absolute; top:1rem; left:0.2rem;}
.box1 .download{ width:2rem; position:absolute; bottom:0.1rem; left:50%; margin-left:0.2rem;}
.box1 .download a{ display:inline-block; width:2rem; height:0.77rem; margin:0.05rem 0;}
.box1 .download a.btn_ios{ background:url(/images/btn_ios.png) no-repeat; background-size:100%;}
.box1 .download a.btn_gp{ background:url(/images/btn_gp.png) no-repeat; background-size:100%;}
.box1 .rcode{ width:1.7rem; height:1.7rem; position:absolute; bottom:0.2rem; left:50%; margin-left:-2.2rem;}
.box1 .men{ width:7.5rem; height:5.1rem; background:url(/m/asashin/images/men.png) no-repeat; background-size:100%; position:absolute; bottom:1.7rem; left:50%; margin-left:-3.75rem;}
.box1 .wenan{ width:6.72rem; height:2.02rem; background:url(/m/asashin/images/wenan.png) no-repeat; background-size:100%; position:absolute; bottom:2rem; left:50%; margin-left:-3.36rem;}

.box2{ background:url(../images/box_bg2.jpg) no-repeat center center; background-size:100%;}
.box2 .rolebox{ display:inline-block; width:100%; height:100%; position:relative; background:url(../images/role_bg1.png) no-repeat center center; background-size:100%;}
.box2 .rolebox .role{ width:7.86rem; height:7.41rem; position:absolute; top:2rem; left:2rem;}
.box2 .rolebox .role1{ background:url(../images/role_1.png) no-repeat; background-size:100%;}
.box2 .rolebox .role2{ background:url(../images/role_2.png) no-repeat; background-size:100%;}
.box2 .rolebox .role3{ background:url(../images/role_3.png) no-repeat; background-size:100%;}
.box2 .rolebox .role4{ background:url(../images/role_4.png) no-repeat; background-size:100%;}
.box2 .rolebox .role5{ background:url(../images/role_5.png) no-repeat; background-size:100%;}
.box2 .rolebox .des{ width:4.2rem; height:3rem; color:#fff; text-align:left; position:absolute; top:50%; left:50%; margin-top:-1.5rem; margin-left:0.5rem; visibility:hidden; }
.box2 .rolebox .swiper-slide-active .des{ visibility:visible;}
.box2 .rolebox .des span{ display:inline-block; width:2rem; height:0.73rem; line-height:0.73rem;}
.box2 .rolebox .des span.role_name1{ background:url(../images/role_name1.png) no-repeat; background-size:100%;}
.box2 .rolebox .des span.role_name2{ background:url(../images/role_name2.png) no-repeat; background-size:100%;}
.box2 .rolebox .des span.role_name3{ background:url(../images/role_name3.png) no-repeat; background-size:100%;}
.box2 .rolebox .des span.role_name4{ background:url(../images/role_name4.png) no-repeat; background-size:100%;}
.box2 .rolebox .des span.role_name5{ background:url(../images/role_name5.png) no-repeat; background-size:100%;}
.box2 .rolebox .des label{float:left; display:inline-block; width:100%; height:40px; line-height:40px; font-size:0.2rem; color:#939393;  border-top:0.02rem #8a5f5f solid;}

.swiper-container2{ width:100%; height:100%;}
.swiper-container2 .swiper-slide{ width:100%; height:100%;}
.swiper-container2 .swiper-pagination2{ width:40%; bottom:1rem; left:60%; text-align:left;}
.swiper-container2 .swiper-pagination2 span{display:inline-block; width:100px; height:117px; margin:4px 5px; text-indent:9999px;opacity:1; outline:none; border-radius:0;}
.swiper-container2 .swiper-pagination2 span:nth-child(1){ background:url(../images/role_tab_1.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(2){ background:url(../images/role_tab_2.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(3){ background:url(../images/role_tab_3.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(4){ background:url(../images/role_tab_4.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(5){ background:url(../images/role_tab_5.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(1):hover,.swiper-container2 .swiper-pagination2 span:nth-child(1).swiper-pagination-bullet-active{background:url(../images/role_tab_on1.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(2):hover,.swiper-container2 .swiper-pagination2 span:nth-child(2).swiper-pagination-bullet-active{background:url(../images/role_tab_on2.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(3):hover,.swiper-container2 .swiper-pagination2 span:nth-child(3).swiper-pagination-bullet-active{background:url(../images/role_tab_on3.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(4):hover,.swiper-container2 .swiper-pagination2 span:nth-child(4).swiper-pagination-bullet-active{background:url(../images/role_tab_on4.png) no-repeat; background-size:100%;}
.swiper-container2 .swiper-pagination2 span:nth-child(5):hover,.swiper-container2 .swiper-pagination2 span:nth-child(5).swiper-pagination-bullet-active{background:url(../images/role_tab_on5.png) no-repeat; background-size:100%;}

.box3{ background:url(../images/box_bg3.jpg) no-repeat center center; background-size:100%;}
.box3 .box3_logo{ width:300px; height:137px; background:url(../images/logo.png) no-repeat; background-size:100%; position:absolute; top:50%; left:50%; margin-left:-700px; margin-top:-300px; z-index:3;}
.box3 .fansbox{ width:500px; height:500px; border:2px #fff solid; border-radius:15px; background-color:#fff; overflow:hidden; position:absolute; top:50%; left:50%; margin-left:-550px; margin-top:-200px; z-index:2;}
.box3 .btn_fans{ width:300px; height:59px; line-height:59px; font-size:30px; color:#fff; font-weight:600; text-indent:30px; background:url(../images/btn_conmunicate.png) no-repeat; background-size:100%; position:absolute; top:50%; margin-top:220px; left:50%; margin-left:-100px;}

.box4{ background:url(../images/box_bg4.jpg) no-repeat center center; background-size:100%;}

.box4 .swiperbox{ width:8rem; position:absolute; top:50%; left:50%; margin-left:-4rem;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.box4 .swiperbox .btn_prev{ width:1rem; height:0.88rem; background:url(../images/prelogin/btn-r.png) no-repeat; background-size:100%; position:absolute; top:50%; left:-1.3rem;}
.box4 .swiperbox .btn_next{ width:1rem; height:0.88rem; background:url(../images/prelogin/btn-l.png) no-repeat; background-size:100%; position:absolute; top:50%; right:-1.3rem;}
.swiper-container3 .swiper-slide{ width:50%; opacity:0.5;}
.swiper-container3 .swiper-slide-active{opacity:1;}
.swiper-container3 .swiper-slide-prev,.swiper-container3 .swiper-slide-next{opacity:0.7;}

.swiper-pagination1 span{ width:0.2rem; height:0.2rem; margin:0 0.05rem; border:0.03rem #fff solid; background-color:#000; box-sizing:border-box;}
.swiper-pagination3 {width:100%; bottom:-0.5rem; left:0; text-align:center;}
.swiper-pagination3 span{ width:0.2rem; height:0.2rem; margin:0 0.05rem; border:0.03rem #fff solid; background-color:#000; box-sizing:border-box;}

.menu_left{ display:block; width:100%; height:0.7rem; line-height:0.7rem; background:rgba(0,0,0,0.7); position:fixed; top:0; left:0; z-index:10;}
.menu_left a{display:inline-block; width:0.7rem; height:0.37rem; position: relative; margin:0.2rem 0.4rem; text-indent:-99999px;}
.menu_left a:nth-child(1){ background:url(../images/btn_home.png) no-repeat; background-size:100%;}
.menu_left a:nth-child(2){ background:url(../images/btn_role.png) no-repeat; background-size:100%;}
.menu_left a:nth-child(3){ background:url(../images/btn_news.png) no-repeat; background-size:100%;}
.menu_left a:nth-child(4){ background:url(../images/btn_ts.png) no-repeat; background-size:100%;}
.menu_left a:nth-child(5){ background:url(../images/btn_rechange.png) no-repeat; background-size:100%;}
.menu_left a:nth-child(6){ background:url(../images/btn_gift.png) no-repeat; background-size:100%;}
.menu_left a:nth-child(1):hover,.menu_left a:nth-child(1).on{ background:url(../images/btn_home.png) no-repeat; background-size:100%; background-position:0 -0.365rem;}
.menu_left a:nth-child(2):hover,.menu_left a:nth-child(2).on{ background:url(../images/btn_role.png) no-repeat; background-size:100%; background-position:0 -0.365rem;}
.menu_left a:nth-child(3):hover,.menu_left a:nth-child(3).on{ background:url(../images/btn_news.png) no-repeat; background-size:100%; background-position:0 -0.355rem;}
.menu_left a:nth-child(4):hover,.menu_left a:nth-child(4).on{ background:url(../images/btn_ts.png) no-repeat; background-size:100%; background-position:0 -0.365rem;}
.menu_left a:nth-child(5):hover,.menu_left a:nth-child(5).on{ background:url(../images/btn_rechange.png) no-repeat; background-size:100%; background-position:0 -0.365rem;}
.menu_left a:nth-child(6):hover,.menu_left a:nth-child(6).on{ background:url(../images/btn_gift.png) no-repeat; background-size:100%; background-position:0 -0.365rem;}
.menu_left a:after{ display:none; width:0.29rem; height:0.20rem; content:""; background:url(../images/btn_on.png) no-repeat; background-size:100%;  position:absolute; left:-0.35rem; top:0.1rem}
.menu_left a:before{ display:none; width:0.29rem; height:0.20rem; content:""; background:url(../images/btn_on.png) no-repeat; background-size:100%; transform:rotate(180deg); position:absolute; right:-0.35rem; top:0.1rem}
.menu_left a.on:after{ display:block;}
.menu_left a.on:before{ display:block;}

.swiper-container-v {width: 100%;height: 100%;}
.swiper-container-v .swiper-slide{
  text-align: center;
  font-size: 0.18rem;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow:hidden;
}

.loadbox{ width:100%; height:100%; background:#000; position:fixed; top:0; left:0;z-index:1000;}
.loadbox .bar{ color:#fafafa; width:100px; height:50px; line-height:50px; text-align:center; position: absolute;left:50%;top:50%; margin-top:-25px; margin-left:-50px;}
.loadbox .sk-chase{width: 40px;height: 40px;position: relative;-webkit-animation: sk-chase 2.5s infinite linear both;animation: sk-chase 2.5s infinite linear both;position: absolute;left: 50%;top: 50%; margin: -20px 0 0 -20px;}
.loadbox .sk-chase-dot{width: 100%;height: 100%;position: absolute;left: 0;top: 0;-webkit-animation: sk-chase-dot 2.0s infinite ease-in-out both;animation: sk-chase-dot 2.0s infinite ease-in-out both;}
.loadbox .sk-chase-dot:nth-child(1) {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
.loadbox .sk-chase-dot:nth-child(2) {-webkit-animation-delay: -1s;animation-delay: -1s;}
.loadbox .sk-chase-dot:nth-child(3) {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
.loadbox .sk-chase-dot:nth-child(4) {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}
.loadbox .sk-chase-dot:nth-child(5) {-webkit-animation-delay: -0.7s;animation-delay: -0.7s;}
.loadbox .sk-chase-dot:nth-child(6) {-webkit-animation-delay: -0.6s;animation-delay: -0.6s;}
.loadbox .sk-chase-dot:before{ content: '';display: block;width: 25%;height: 25%;background-color: #aa8965;border-radius: 100%;-webkit-animation: sk-chase-dot-before 2.0s infinite ease-in-out both;animation: sk-chase-dot-before 2.0s infinite ease-in-out both;}

/*底部*/
.footer{display:inline-block;width:100%;height:0.6rem; line-height:0.6rem; background:rgba(0,0,0,0.7); font-size:0.16rem;color:#fff; overflow:hidden; position:absolute; bottom:0; left:0;}
.footer .copyright{ display:inline-block; height:100%; margin-right:0.2rem;}
.footer .menu{ display:inline-block; float:left; height:100%; margin-left:0.2rem;}
.footer a{ display:inline-block; text-decoration:none;color:#fff; margin-left:0.13rem;}
.footer a:hover{text-decoration:underline;}
.footer .logo{display:inline-block;width:0.58rem; position:absolute; right:3.4rem; top:0rem; line-height:0.5rem;}
.footer .logo img{width:100%;}
.footer .footerleft{ display:inline-block; float:left; width:50%; height:100%;  text-align:right; font-size:0.13rem; position:relative;}
.footer .footerright{ display:inline-block; float:left; width:50%; height:100%;  text-align:left; font-size:0.15rem; position:relative;}
.footer .grade{ display:inline-block; float:left; margin-left:0.15rem; margin-top:0rem;}
.footer .grade img{ width:auto; height:0.5rem; margin-left:0.15rem; display:inline-block;}
.footer .shuoming{display:inline-block; float:left; width:4.5rem; font-size:0.12rem; margin-left:0.1rem; margin-top:0.02rem;}
.footer .shuoming p{ display:inline-block; float:left; width:100%; height:0.18rem; line-height:0.18rem;}

@-webkit-keyframes sk-chase{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes sk-chase{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@-webkit-keyframes sk-chase-dot{80%,100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes sk-chase-dot{80%,100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@-webkit-keyframes sk-chase-dot-before{50%{-webkit-transform:scale(0.4);transform:scale(0.4)}100%,0%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes sk-chase-dot-before{50%{-webkit-transform:scale(0.4);transform:scale(0.4)}100%,0%{-webkit-transform:scale(1);transform:scale(1)}}