@charset "utf-8";
@font-face {
	font-family: 'FZBKSJW'; 
	src: url( 'https://gamesvmg.wmupd.com/webplatform/pgp/FZSSKSJWZ.TTF');
}
html,body{ overflow: hidden; width: 100%; height: 100%; min-width: 1200px; max-width: 3840px; margin: 0 auto;}
body{ margin: 0; padding: 0; box-sizing: border-box; font-size: 14px; font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal;}
*{ outline: none;}
img{ border: 0;}
ol,ul{ list-style: none;}
a{ font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif; text-decoration: none;outline: none; cursor: pointer;}
a:hover{ text-decoration: none;}

.general_20220704{ transition: transform 0.3s;}
.generalBox_20220704{ display: none; height: 0!important;}

/* loading */
.loading-box{ position: absolute; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; background: url(https://mzqx.wanmei.com/images/index260227/loading-bg.jpg) no-repeat; background-size: cover;}
.pos-center{ position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);}
.svg-sound{ width: 18rem; mask-image: linear-gradient(left, rgba(5, 5, 30, 1) 0%, rgba(5, 5, 30, 0.3) 10%, rgba(5, 5, 30, 0.3) 38%, rgba(5, 5, 30, 0.3) 62%, rgba(5, 5, 30, 0.3) 91%, rgba(5, 5, 30, 1) 100%); -webkit-mask-image: -webkit-linear-gradient(left, rgba(5, 5, 30, 1) 0%, rgba(5, 5, 30, 0.3) 10%, rgba(5, 5, 30, 0.3) 38%, rgba(5, 5, 30, 0.3) 62%, rgba(5, 5, 30, 0.3) 91%, rgba(5, 5, 30, 1) 100%);}
.svg-sound-svg {width: 200%;}
.svg-sound-svg path {fill: transparent; stroke-width: .3; will-change: transform;}
.path_1 {stroke: #fff; animation: anima-path1 8s linear infinite both;}
.path_2 { stroke: #fff; animation: anima-path2 6s linear infinite both;}
@keyframes anima-path1 {
	0% { transform: translateX(0%);}
	100% {transform: translateX(-50%);}
}
@keyframes anima-path2 {
	0% {transform: translateX(0%); }
	100% { transform: translateX(-50%);}
}
.loading-point{ width: 14.27rem; height: 1.3rem; background: url(https://mzqx.wanmei.com/images/index260227/loading-point.png) no-repeat; background-size: 100% auto;}
.loading-flower{ width: 5.82rem; height: 5.82rem; background: url(https://mzqx.wanmei.com/images/index260227/loading-flower.png) no-repeat; background-size: 100% auto;}
.loading-quan{ width: 4.32rem; height: 4.32rem;}
.loading-quan img{ position: absolute; left: 0; top: 0; width: 100%;}
.ani-rotate-z{ animation: key-rotate-z 50s linear infinite; transform-origin: center center;}
@keyframes key-rotate-z{
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(360deg);}
}
.ani-rotate-f{ animation: key-rotate-f 50s linear infinite; transform-origin: center center;}
@keyframes key-rotate-f{
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(-360deg);}
}
.loading-progress-bg{width: 1.8rem; height: 1.8rem; background: url(https://mzqx.wanmei.com/images/index260227/loading-progress-bg.png) no-repeat; background-size: 100% auto;}
.circle-container{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.circle-container svg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.circle-progress{ fill: none; stroke: #ffffff; stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));}
.loading-progress-num{ width: 100%; height: .3rem; font-size: .24rem; font-weight: bold; line-height: .3rem; color: #fff; text-align: center;}

.loading-cloud{ position: absolute; left: 0; bottom: 0; width: 25.6rem; height: 10.22rem; background: url(https://mzqx.wanmei.com/images/index260227/cloud.png) no-repeat; background-size: 100% auto;}
/* enter-video */
.enter-video{ position: absolute; left: 0; top: 0; z-index: 992; width: 100%; height: 100%; background-color: #fff;}
.enter-video video{ width: 100%; height: 100%; object-fit: cover;}
.btn-skip{ position: absolute; right: 3.5rem; top: 2.4rem; z-index: 5; width: 1.2rem; height: .6rem; background: url(https://mzqx.wanmei.com/images/index260227/btn-skip.png) no-repeat; background-size: 100% auto; cursor: pointer;}
/* wrap */
.wrap{ position: relative; overflow: hidden; width: 25.6rem; height: 100%; background: url(https://mzqx.wanmei.com/images/index260305/section-body-bg.jpg) center center no-repeat; background-size: cover;}
#body-bg-v{ width: 100%; height: 100%; object-fit: cover;}
.header-hover{ position: absolute; left: 0; top: 0; z-index: 50; width: 100%; height: 0.25rem;}

#logo{ position: absolute; left: 0.1rem; top: .3rem; z-index: 51; width: 3.9rem; height: 1.23rem; background: url(https://mzqx.wanmei.com/public/images/logo2.png) no-repeat; background-size: 100% auto;}
#logo.logo-body{ width: 3.92rem; background: url(https://mzqx.wanmei.com/public/images/logo3.png) no-repeat; background-size: 100% auto;}

/* top-bar */
.top-bar-box{ position: absolute; right: .76rem; top: .43rem; z-index: 50; width: 5.8rem; height: .36rem;}
.top-bar-r{ position: absolute; right: 0; top: 0.01rem; width: 1.5rem; height: .31rem; border-left: .02rem solid #fff;}

.btn-music{ position: absolute; top: 0; right: 0; width: 0.46rem; height: 0.31rem; cursor: pointer;}
.btn-music span{ position: absolute; bottom: 0; width: 0.03rem; background:#fdf4df;}
.btn-music .s1{ left: 0; height: 0.2rem;}
.btn-music .s2{ left: 0.05rem; height: 0.23rem;}
.btn-music .s3{ left: 0.1rem; height: 0.21rem;}
.btn-music .s4{ left: 0.15rem; height: 0.18rem;}
.btn-music .s5{ left: 0.2rem; height: 0.15rem;}
.btn-music .s6{ left: 0.25rem; height: 0.12rem;}
.btn-music .s7{ left: 0.3rem; height: 0.11rem;}
.btn-music .s8{ left: 0.35rem; height: 0.14rem;}
.btn-music.active .s1,.btn-music.active .s5{ animation: key-wave 0.66s linear infinite;}
.btn-music.active .s2,.btn-music.active .s6{ animation: key-wave 0.8s linear infinite;}
.btn-music.active .s3,.btn-music.active .s7{ animation: key-wave 0.7s linear infinite;}
.btn-music.active .s4,.btn-music.active .s8{ animation: key-wave 0.5s linear infinite;}
@keyframes key-wave{
    0%{ height: 0.11rem;}
    50%{ height: 0.23rem;}
    100%{ height: 0.11rem;}
}
/* login */
#user-box{ position: absolute; right: .76rem; top: 0; width: .31rem; height: .31rem;}
.icon-user{ display: block; width: .31rem; height: .31rem; background: url(https://mzqx.wanmei.com/images/index260227/icon-user.png) no-repeat 0 0; background-size: 100% auto; cursor: pointer;}
#user-box:hover .icon-user{ background-position: 0 100%;}
.user-info{ display: none; position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: .3rem; width: 2.67rem; height: 1.33rem; padding-top: .22rem; box-sizing: border-box; background: url(https://mzqx.wanmei.com/images/index260227/user-info-bg.png) no-repeat; background-size: 100% auto;}
.user-info p{ overflow: hidden; width: 100%; height: .42rem; font-size: .18rem; line-height: .42rem; color: #b4e2e0; text-align: center;}
.user-info .btn-logout{ display: block; width: 1.49rem; height: .45rem; margin: 0 auto; background: url(https://mzqx.wanmei.com/images/index260227/btn-logout.png) no-repeat 0 0; background-size: 100% auto; cursor: pointer;}

#user-box.on .icon-user{ cursor: default;}
#user-box.on:hover .user-info{ display: block;}
/* sns */
.top-sns-box{ display: flex; position: absolute; left: 0; top: 0; width: 4.2rem; height: .36rem; justify-content: center; align-items: center;}
.top-sns-box .sns-item{ position: relative; margin: 0 .15rem;}
.top-sns-box .sns-tap{ width: .42rem; height: .24rem;}
.top-sns-box .sns-haoyou{ width: .31rem; height: .33rem;}
.top-sns-box .sns-bili{ width: .34rem; height: .32rem;}
.top-sns-box .sns-weibo{ width: .39rem; height: .33rem;}
.top-sns-box .sns-douyin{ width: .3rem; height: .36rem;}
.top-sns-box .sns-weixin{ width: .38rem; height: .32rem;}
.top-sns-box .icon-sns{ display: block; width: 100%; height: 100%; opacity: .7;}
.top-sns-box .sns-tap .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-tap.png) no-repeat 0 0; background-size: 100% auto;}
.top-sns-box .sns-haoyou .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-haoyou.png) no-repeat 0 0; background-size: 100% auto;}
.top-sns-box .sns-bili .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-bili.png) no-repeat 0 0; background-size: 100% auto;}
.top-sns-box .sns-weibo .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-weibo.png) no-repeat 0 0; background-size: 100% auto;}
.top-sns-box .sns-douyin .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-douyin.png) no-repeat 0 0; background-size: 100% auto;}
.top-sns-box .sns-weixin .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-weixin.png) no-repeat 0 0; background-size: 100% auto;}
.top-sns-box .icon-sns:hover{ opacity: 1;}
.top-sns-box .sns-link{ display: block; width: 100%; height: 100%;}
.top-sns-box .sns-ewm-hover{ display: none; position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: .4rem; width: 2.37rem; height: 2.63rem; padding-top: .35rem; box-sizing: border-box; background: url(https://mzqx.wanmei.com/public/popLoginYy/images/260227/sns-ewm-bg.png) no-repeat; background-size: 100% auto;}
.top-sns-box .sns-ewm-hover .ewm{ display: block; width: 1.52rem; height: 1.52rem; margin: 0 auto;}
.top-sns-box .tip-gzh{ display: block; height: .37rem; margin: .18rem auto 0;}
.top-sns-box .sns-item:hover .sns-ewm-hover{ display: block;}
/* page-nav */
#page-nav-box{ position: absolute; left: 0; top: 0; z-index: 50; width: 1.55rem; height: 100%;}
#page-nav-box.nav-home-bg{ background: url(https://mzqx.wanmei.com/images/index260305/nav-home-bg.png) no-repeat 0 bottom; background-size: 100% auto; backdrop-filter: blur(5px);}
#page-nav-box.nav-body-bg{ background: url(https://mzqx.wanmei.com/images/index260305/nav-body-bg.png) no-repeat 0 bottom; background-size: 100% auto;}
.page-nav-line{ position: absolute; right: -.12rem; top: 50%; transform: translate3d(0,-52%,0); width: .31rem; height: 10.56rem; background: url(https://mzqx.wanmei.com/images/index260305/nav-line.png) no-repeat; background-size: 100% auto;}
.nav-wrap{ position: absolute; left: 0; top: 50%; transform: translate3d(0,-62%,0); width: 1.52rem; height: 5.95rem;}
.nav-list{ position: relative; z-index: 2; overflow: hidden; width: 100%; height: 100%;}
.nav-list li{ float: left; width: 100%; height: .71rem; margin: .24rem 0; font-family: "FZBKSJW"; font-size: .28rem; line-height: .71rem; color: rgba(211,237,239,.8); text-align: center; cursor: pointer;}
.nav-list li.on{ font-size: .3rem; color: rgba(255,255,255,.8)!important;}
#page-nav-box.nav-body-bg .nav-list li{ color: rgba(25,118,129,.8);}

.nav-guild{ position: absolute; left: 0; top: .24rem; width: 1.52rem; height: .71rem; background: url(https://mzqx.wanmei.com/images/index260305/nav-on-bg.png) no-repeat; background-size: 100% auto;}
.nav-ani{ position: absolute; left: 0; top: 0; overflow: hidden; width: 2.23rem; height: .71rem;}
.nav-ani img{ display: none; position: absolute; left: 0; top: 0; width: 100%;}
.nav-ani1{ display: none;}
.btn-yy-nav{ display: none; position: absolute; left: 0; bottom: 0; z-index: 3; width: 1.51rem; height: 3.19rem; background: url(https://mzqx.wanmei.com/images/index260305/btn-yy-nav.png) no-repeat; background-size: 100% auto; cursor: pointer;}
.btn-yy-nav:hover{ background-position: 0 100%;}
.btn-yy-nav.done{ background: url(https://mzqx.wanmei.com/images/index260305/btn-yy-nav-done.png) no-repeat; background-size: 100% auto;}

.page-guild{ position: absolute; left: 50%; bottom: .3rem; z-index: 50; width: .53rem; height: .82rem; margin-left: -.26rem; background: url(https://mzqx.wanmei.com/images/index260305/page-guild.png) no-repeat; background-size: 100% auto; animation: key-guild 1s infinite alternate;}
@keyframes key-guild{
    0%{ transform: translate3d(0,0,0);}
    100%{ transform: translate3d(0,.2rem,0);}
}

/* page-swiper */
.page-swiper{ position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%;}
.page-swiper .swiper-slide{ position: relative; overflow: hidden; width: 100%; height: 100%;}
/* section-home */
#section-home{ background: url(https://mzqx.wanmei.com/images/index260227/section-home-bg.jpg) center center no-repeat; background-size: cover;}
.slogan{ display: none; position: absolute; left: 1.4rem; bottom: 1.06rem; z-index: 5; height: 6.66rem;}
.home-btn-wrap{ display: flex; position: absolute; right: .6rem; bottom: 1rem; z-index: 5;  width: 13.14rem; height: 2.38rem; justify-content: right;}
.btn-yy-home,.btn-wenjuan{ display: block; width: 4.73rem; height: 2.38rem; margin: .02rem; background: url(https://mzqx.wanmei.com/images/index260227/btn-home-yy.png) no-repeat 0 0; background-size: 100% auto; cursor: pointer;}
.btn-wenjuan{ background: url(https://mzqx.wanmei.com/images/index260305/btn-wenjuan.png) no-repeat; background-size: 100% auto;}
.btn-yy-home:hover,.btn-wenjuan:hover{ background-position: 0 100%;}
.btn-yy-home.done{ background: url(https://mzqx.wanmei.com/images/index260227/btn-yy-done.png) no-repeat; background-size: 100% auto;}
.btn-wenjuan.done{ background: url(https://mzqx.wanmei.com/images/index260305/btn-wenjuan-done.png) no-repeat; background-size: 100% auto;}
.ohter-yy-box{ width: 3.28rem; margin: 0 .02rem; padding-top: .08rem; box-sizing: border-box;}
.ohter-yy-box a{ display: block; width: 3.28rem; height: 1.06rem; margin-bottom: .08rem;}
.link-yy-tap{ background: url(https://mzqx.wanmei.com/images/index260305/btn-taptap.png) no-repeat 0 0; background-size: 100% auto;}
.link-yy-haoyou{ background: url(https://mzqx.wanmei.com/images/index260305/btn-haoyou.png) no-repeat 0 0; background-size: 100% auto;}
.ohter-yy-box a:hover{ background-position: 0 100%;}
/* section-news */
.rt-zs{ position: absolute; right: 0; top: .65rem; width: 2.78rem; height: 6.58rem; background: url(https://mzqx.wanmei.com/images/index260305/rt-zs.png) no-repeat; background-size: 100% auto;}
.rb-zs{ position: absolute; right: 0; bottom: 0; width: 12.09rem; height: 5.86rem; background: url(https://mzqx.wanmei.com/images/index260305/rb-zs.png) no-repeat; background-size: 100% auto;}
.news-wrap{ position: absolute; left: 1.85rem; top: 50%; transform: translate3d(0,-45%,0); width: 21.31rem; height: 9.96rem; background: url(https://mzqx.wanmei.com/images/index260305/news-cont-bg.png) no-repeat; background-size: 100% auto;}

.news-ifocus-box{ position: absolute; left: 2.32rem; top: 1.44rem; width: 9.45rem; height: 5.87rem;}
.news-ifocus-swiper,.news-ifocus-swiper .swiper-slide{ position: relative; width: 100%; height: 100%;}
.news-ifocus-swiper .swiper-slide img{ width: 9.45rem; height: 5.3rem; border-radius: .3rem;}
.news-img-t{ position: absolute; left: .2rem; top: 5.3rem; overflow: hidden; width: 5.7rem; height: .5rem; font-size: .3rem; line-height: .5rem; color: #fff; text-overflow: ellipsis; white-space: nowrap;}
.news-ifocus-page{ display: flex; position: absolute; left: 5.93rem!important; bottom: .19rem!important; width: 3.2rem!important; height: .07rem; justify-content: right;}
.news-ifocus-page span{ display: block; width: .15rem; height: .07rem; background-color: #fff; border-radius: .04rem; opacity: 1;}
.news-ifocus-page span.swiper-pagination-bullet-active{ width: .6rem; background-color: #ffdf4c;}

.news-r-box{ position: absolute; left: 13.55rem; top: 1.64rem; width: 6.41rem; height: 5.93rem;}
.news-nav-box{ width: 100%; height: .65rem; padding-left: .11rem; box-sizing: border-box;}
.news-tab{ width: 100%; height: 100%;}
.news-tab li{ float: left; width: .86rem; height: 100%; margin-right: .66rem; font-family: "FZBKSJW"; font-size: .33rem; line-height: .42rem; color: #bbb7a9; text-align: center; cursor: pointer;}
.news-tab li.on{ color: #3a9bac; background: url(https://mzqx.wanmei.com/images/index260305/news-nav-on.png) no-repeat 0 bottom; background-size: 100% auto;}
.news-cont{ display: none; position: relative; width: 100%; height: 5.05rem; margin-top: .23rem;}
.news-more{ position: absolute; right: 0; bottom: 0; width: 1.7rem; height: .34rem; padding-left: .4rem; box-sizing: border-box; font-family: "FZBKSJW"; font-size: .32rem; line-height: .34rem; color: #4ba2b2; background: url(https://mzqx.wanmei.com/images/index260305/icon-add.png) no-repeat 0 0; background-size: auto 100%;}
.news-list{ overflow: hidden; width: 100%; height: 4.26rem;}
.news-list li{ position: relative; width: 100%; height: .86rem; padding: 0 .03rem; box-sizing: border-box; border-bottom: .02rem solid rgba(198,227,229,.89);}
.news-list li:hover{ background: url(https://mzqx.wanmei.com/images/index260305/news-line-hover.png) no-repeat center center; background-size: 100% auto;}
.news-tag{ float: left; width: .92rem; height: .32rem; margin-top: .2rem; font-size: .2rem; line-height: .32rem; color: #fff; text-align: center; border-radius: .32rem;}
.news-tag-gamenews{ background-color: #84bdae;}
.news-tag-gamebroad{ background-color: #84a1bd;}
.news-tag-gameevent{ background-color: #bd8c84;}
.news-text{ float: right; width: 5.08rem;}
.news-text p{ overflow: hidden; width: 100%; height: .44rem; margin-top: .08rem; text-overflow: ellipsis; white-space: nowrap;}
.news-text a{ font-size: .22rem; line-height: .44rem; color: #4fb1b8;}
.news-time{ display: block; font-size: .18rem; line-height: .2rem; color: #2a8096;}
/* section-role */
.role-bg-r{ position: absolute; right: 0; bottom: 0; width: 6.62rem; height: 14.4rem; background: url(https://mzqx.wanmei.com/images/index260305/role-bg-r.png) no-repeat; background-size: 100% auto;}
.role-yuan-box{ position: absolute; left: 1.57rem; top: 50%; width: 20.11rem; height: 20.11rem; margin-top: -10.52rem;}
.role-yuan-box img{ position: absolute;}
.role-yuan-box img.role-yuan1{ left: 0; top: 0; width: 100%;}
.role-yuan-box img.role-yuan2{ left: .8rem; top: .8rem; width: 17.37rem;}
.role-yuan-box img.role-yuan3{ left: 4.58rem; top: 3.48rem; width: 12.8rem;}
.role-yuan-box img.role-yuan4{ left: 5.42rem; top: 4.32rem; width: 11.12rem;}
.role-yuan-zs1{ position: absolute; left: 2.53rem; top: 4.06rem; width: .52rem; height: .69rem; background: url(https://mzqx.wanmei.com/images/index260305/role-yuan-zs1.png) no-repeat; background-size: 100% auto;}
.role-yuan-zs2{ position: absolute; left: 4.37rem; top: 6.21rem; width: 12.8rem; height: 10.01rem; background: url(https://mzqx.wanmei.com/images/index260305/role-yuan-zs2.png) no-repeat; background-size: 100% auto;}
.skill-zs{ position: absolute; right: 3.6rem; top: 50%; width: 3.37rem; height: 2.73rem; margin-top: -4.94rem; background: url(https://mzqx.wanmei.com/images/index260305/skill-zs.png) no-repeat; background-size: 100% auto;}

.role-swiper,.role-swiper .swiper-slide{ position: relative; width: 100%; height: 100%;}
.role-swiper .swiper-slide img{ position: absolute;}
.role-img{ left: 0; bottom: -1rem; width: 25.6rem;}
.role-swiper .swiper-slide-active .role-img{ animation: fadeInR .5s;}
@keyframes fadeInL{
    0%{ opacity: 0.6; transform: translateX(-1.6rem)}
    100%{ opacity: 1; transform: translateX(0)}
}
@keyframes fadeInR{
    0%{ opacity: 0.6; transform: translateX(1.6rem)}
    100%{ opacity: 1; transform: translateX(0)}
}
.role-cont-center{ position: absolute; left: 0; top: 50%; transform: translate3d(0,-50%,0); width: 100%; height: 11rem;}
.role-info{ left: 5.05rem; top: 0; width: 4.03rem;}
.hide-item{ display: none;}
.role-sect-tab{ position: absolute; left: 7.2rem; top: 4.3rem; width: .56rem; height: 1.66rem;}
#sect-tab-qingyun{ background: url(https://mzqx.wanmei.com/images/index260305/role-sect-tab-qingyun.png) no-repeat 0 0; background-size: 100% auto;}
#sect-tab-tianyin{ background: url(https://mzqx.wanmei.com/images/index260305/role-sect-tab-tianyin.png) no-repeat 0 0; background-size: 100% auto;}
#sect-tab-hehuan{ background: url(https://mzqx.wanmei.com/images/index260305/role-sect-tab-hehuan.png) no-repeat 0 0; background-size: 100% auto;}
#sect-tab-guiwang{ background: url(https://mzqx.wanmei.com/images/index260305/role-sect-tab-guiwang.png) no-repeat 0 0; background-size: 100% auto;}
.role-sect-tab.on{ background-position: 0 100%!important;}
.role-sect-tab span{ display: block; width: 100%; height: 50%; cursor: pointer;}

.role-gender-tab{ position: absolute; left: 5rem; top: 7rem; width: 2.1rem; height: 2.7rem;}
.role-gender-tab span{ position: absolute; width: 1.45rem; height: 1.42rem; cursor: pointer;}
.gender-female{ left: 0; top: 0; background: url(https://mzqx.wanmei.com/images/index260305/role-gender-female.png) no-repeat 0 0; background-size: 100% auto;}
.gender-male{ left: .58rem; top: 1.22rem; background: url(https://mzqx.wanmei.com/images/index260305/role-gender-male.png) no-repeat 0 0; background-size: 100% auto;}
.role-gender-tab span.on{ background-position: 0 100%!important;}

.skill-list{ position: absolute; right: 1.8rem; top: 1.65rem; width: 3.68rem;}
.skill-list li{ display: flex; width: 100%; height: 1.04rem; margin-bottom: .15rem; justify-content: center; align-items: center; background: url(https://mzqx.wanmei.com/images/index260305/skill-line.png) no-repeat center center; background-size: 100% auto;}
.skill-item{ position: relative; z-index: 1;}
.skill-item:hover{ z-index: 2;}
.skill-col1,.skill-col3{ width: .78rem; height: .78rem;}
.skill-col2{ width: 1.04rem; height: 1.04rem; margin: 0 .36rem;}
#qingyun-skill .skill-col1{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-qingyun-left.png) no-repeat 0 0; background-size: 100% auto;}
#qingyun-skill .skill-col2{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-qingyun-center.png) no-repeat 0 0; background-size: 100% auto;}
#qingyun-skill .skill-col3{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-qingyun-right.png) no-repeat 0 0; background-size: 100% auto;}
#tianyin-skill .skill-col1{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-tianyin-left.png) no-repeat 0 0; background-size: 100% auto;}
#tianyin-skill .skill-col2{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-tianyin-center.png) no-repeat 0 0; background-size: 100% auto;}
#tianyin-skill .skill-col3{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-tianyin-right.png) no-repeat 0 0; background-size: 100% auto;}
#hehuan-skill .skill-col1{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-hehuan-left.png) no-repeat 0 0; background-size: 100% auto;}
#hehuan-skill .skill-col2{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-hehuan-center.png) no-repeat 0 0; background-size: 100% auto;}
#hehuan-skill .skill-col3{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-hehuan-right.png) no-repeat 0 0; background-size: 100% auto;}
#guiwang-skill .skill-col1{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-guiwang-left.png) no-repeat 0 0; background-size: 100% auto;}
#guiwang-skill .skill-col2{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-guiwang-center.png) no-repeat 0 0; background-size: 100% auto;}
#guiwang-skill .skill-col3{ background: url(https://mzqx.wanmei.com/images/index260305/role-skill-guiwang-right.png) no-repeat 0 0; background-size: 100% auto;}

.skill-row2{ background-position: 0 -1.19rem!important;}
.skill-row3{ background-position: 0 -2.38rem!important;}
.skill-row4{ background-position: 0 -3.56rem!important;}
.skill-row5{ background-position: 0 -4.75rem!important;}
.skill-row6{ background-position: 0 -5.94rem!important;}
.hover-gai{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(6,37,52,.62); border-radius: 100%;}

.skill-pop{ display: none; position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: 100%; width: 3.9rem; height: 1.72rem; padding-top: .17rem; box-sizing: border-box; background: url(https://mzqx.wanmei.com/images/index260305/skill-dec-bg.png) no-repeat; background-size: 100% auto;}
.skill-pop h4{ overflow: hidden; width: 100%; height: .38rem; font-size: .24rem; line-height: .38rem; color: #fff; text-align: center;}
.skill-pop p{ display: flex; width: 3.54rem; height: 1.12rem; margin: 0 auto; font-size: .18rem; line-height: .26rem; color: #11262b; justify-content: center; align-items: center; text-align: center;}
.skill-item:hover .hover-gai{ display: none;}
.skill-item:hover .skill-pop{ display: block;}
/* role-nav */
.role-nav{ position: absolute; left: 3.22rem; top: 50%; z-index: 5; width: 1.92rem; height: 7.5rem; margin-top: -4.58rem;}
.role-nav li{ position: absolute; width: 1.92rem; height: 1.92rem; cursor: pointer;}
#role-nav-qingyun{ left: 0; top: 0; background: url(https://mzqx.wanmei.com/images/index260305/role-nav-qingyun.png) no-repeat 0 0; background-size: 100% auto;}
#role-nav-tianyin{ left: -.48rem; top: 2.06rem; background: url(https://mzqx.wanmei.com/images/index260305/role-nav-tianyin.png) no-repeat 0 0; background-size: 100% auto;}
#role-nav-hehuan{ left: -.6rem; top: 4.08rem; background: url(https://mzqx.wanmei.com/images/index260305/role-nav-hehuan.png) no-repeat 0 0; background-size: 100% auto;}
#role-nav-guiwang{ left: -.14rem; top: 6.08rem; background: url(https://mzqx.wanmei.com/images/index260305/role-nav-guiwang.png) no-repeat 0 0; background-size: 100% auto;}
.role-nav li.on{ background-position: 0 100%!important;}
/* section-pet */
.pet-light-bg{ position: absolute; left: 3.2rem; bottom: 0; width: 10.71rem; height: 13.15rem; background: url(https://mzqx.wanmei.com/images/index260305/pet-light-bg.png) no-repeat; background-size: 100% auto;}
.pet-swiper,.pet-swiper .swiper-slide{ position: relative; width: 100%; height: 100%;}
.pet-swiper .swiper-slide img{ position: absolute;}
.pet-img{ left: 0; bottom: 0; width: 25.6rem;}
.pet-swiper .swiper-slide-active .pet-img{ animation: fadeInL .5s;}
.pet-cont-center{ position: absolute; right: 4.8rem; top: 50%; transform: translate3d(0,-50%,0); width: 8.04rem; height: 7.5rem;}
.pet-title{ left: 0; top: 0; height: 5.06rem;}
.pet-info{ left: 1.9rem; top: 2.7rem; width: 6.15rem;}
.pet-level-tab{ position: absolute; left: 1.48rem; top: 5.18rem; width: 6rem; height: 1.68rem;}
.pet-level-tab span{ float: left; width: 1.69rem; height: 1.68rem; cursor: pointer;}
.level-qiling{ background: url(https://mzqx.wanmei.com/images/index260305/level-qiling.png) no-repeat 0 0; background-size: 100% auto;}
.level-yaodan{ background: url(https://mzqx.wanmei.com/images/index260305/level-yaodan.png) no-repeat 0 0; background-size: 100% auto;}
.level-huaxing{ background: url(https://mzqx.wanmei.com/images/index260305/level-huaxing.png) no-repeat 0 0; background-size: 100% auto;}

.level-shenshou1{ background: url(https://mzqx.wanmei.com/images/index260305/level-shenshou1.png) no-repeat 0 0; background-size: 100% auto;}
.level-shenshou2{ background: url(https://mzqx.wanmei.com/images/index260305/level-shenshou2.png) no-repeat 0 0; background-size: 100% auto;}
.level-shenshou3{ background: url(https://mzqx.wanmei.com/images/index260305/level-shenshou3.png) no-repeat 0 0; background-size: 100% auto;}

.pet-level-tab span.on{ background-position: 0 100%!important;}

.pet-nav-box{ position: absolute; right: 2.28rem; top: 50%; transform: translate3d(0,-46%,0); z-index: 5; width: 2.04rem; height: 11.19rem; background: url(https://mzqx.wanmei.com/images/index260305/pet-nav-bg.png) no-repeat center center; background-size: auto 100%;}
.pet-nav-swiper{ position: absolute; left: 0; top: 2.04rem; width: 100%; height: 6.09rem;}
.pet-nav-swiper .swiper-slide{ position: relative; z-index: 1; width: 2.04rem; height: 2.03rem; cursor: pointer;}
.pet-nav-swiper .swiper-slide img{ position: absolute; pointer-events: none;}
.pet-tx-normal{ right: .18rem; top: .4rem; width: 1.23rem;}
.pet-tx-on{ display: none; right: 0; top: 0; width: 2.04rem;}
.pet-nav-swiper .swiper-slide-active .pet-tx-normal{ display: none;}
.pet-nav-swiper .swiper-slide-active .pet-tx-on{ display: block;}
.btn-prev-pet,.btn-next-pet{ position: absolute; left: .96rem; width: .68rem; height: .88rem; cursor: pointer;}
.btn-prev-pet{ top: 1.06rem; background: url(https://mzqx.wanmei.com/images/index260305/btn-prev-pet.png) no-repeat 0 0; background-size: 100% auto;}
.btn-next-pet{ top: 8.21rem; background: url(https://mzqx.wanmei.com/images/index260305/btn-next-pet.png) no-repeat 0 0; background-size: 100% auto;}
.btn-prev-pet:hover,.btn-next-pet:hover{ background-position: 0 100%;}
/* section-feature */
.feature-harf-quan{ position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: 0; width: 15.22rem; height: 6.64rem; background: url(https://mzqx.wanmei.com/images/index260305/feature-harf-quan.png) no-repeat; background-size: 100% auto;}
.cloud-ani{ position: absolute; left: 0; bottom: 0; overflow: hidden; width: 25.6rem; height: 14.4rem;}
.cloud-ani img{ display: none; position: absolute; left: 0; bottom: 0; width: 100%;}

.feature-yuan-box{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); width: 17.46rem; height: 17.46rem;}
.feature-yuan-box img{ position: absolute;}
.feature-yuan-box img.role-yuan1{ left: 0; top: 0; width: 100%;}
.feature-yuan-box img.role-yuan2{ left: .99rem; top: .99rem; width: 15.49rem;}
.feature-yuan-box img.role-yuan3{ left: 2rem; top: 2rem; width: 13.47rem;}

.feature-card-box{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); width: 18.8rem; height: 10.2rem;}
.feature-hide{ position: absolute; left: 1.82rem; top: 0; overflow: hidden; width: 15.16rem; height: 100%;}
.feature-swiper{ position: absolute; left: 50%; top: 0; width: 30.75rem; height: 100%; margin-left: -15.38rem;}
.feature-swiper .swiper-slide{ position: relative; width: 6.15rem; height: 10.2rem; background: url(https://mzqx.wanmei.com/images/index260305/feature-card-bg.png) no-repeat; background-size: 100% auto;}
.feature-swiper .swiper-slide img{ position: absolute; left: .61rem; top: .7rem; width: 4.93rem; height: 8.75rem; border-radius: .04rem; user-select: none;}
.btn-prev-feature,.btn-next-feature{ position: absolute; top: 4.88rem; width: 1.88rem; height: .68rem; cursor: pointer;}
.btn-prev-feature{ left: 0; background: url(https://mzqx.wanmei.com/images/index260305/btn-prev-feature.png) no-repeat 0 0; background-size: 100% auto;}
.btn-next-feature{ right: 0; background: url(https://mzqx.wanmei.com/images/index260305/btn-next-feature.png) no-repeat 0 0; background-size: 100% auto;}
.btn-prev-feature:hover,.btn-next-feature:hover{ background-position: 0 100%;}
/* page-yy */
#page-yy{ position: absolute; left: 0; top: 0; z-index: 40; width: 100%; height: 100%; background: url(https://mzqx.wanmei.com/images/index260305/page-yy-bg.jpg) no-repeat; background-size: cover; transform: translate3d(0,100%,0); transition: transform 0.3s;}
#page-yy.on{ transform: translate3d(0,0,0);}

.page-yy-cont{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); width: 15.68rem; height: 7.19rem; background: url(https://mzqx.wanmei.com/images/index260305/page-yy-flower.png) no-repeat; background-size: 100% auto;}
.btn-yy-big{ position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: 1.56rem; width: 2.63rem; height: 2.63rem; background: url(https://mzqx.wanmei.com/images/index260305/btn-yy-big.png) no-repeat; background-size: 100% auto; cursor: pointer;}
.btn-yy-big:hover{ background-position: 0 100%;}
.page-yy-tip{ position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: 6.18rem; height: .2rem;}

.page-sns-box{ display: flex; position: absolute; left: 0; top: 6.85rem; width: 100%; height: .75rem; justify-content: center; align-items: center;}
.page-sns-box .sns-item{ position: relative; margin: 0 .45rem;}
.page-sns-box .sns-tap{ width: .95rem; height: .44rem;}
.page-sns-box .sns-haoyou{ width: .71rem; height: .75rem;}
.page-sns-box .sns-bili{ width: .76rem; height: .72rem;}
.page-sns-box .sns-weibo{ width: .82rem; height: .7rem;}
.page-sns-box .sns-douyin{ width: .63rem; height: .75rem;}
.page-sns-box .sns-weixin{ width: .83rem; height: .69rem;}
.page-sns-box .icon-sns{ display: block; width: 100%; height: 100%;}
.page-sns-box .sns-tap .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-tap-b.png) no-repeat 0 0; background-size: 100% auto;}
.page-sns-box .sns-haoyou .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-haoyou-b.png) no-repeat 0 0; background-size: 100% auto;}
.page-sns-box .sns-bili .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-bili-b.png) no-repeat 0 0; background-size: 100% auto;}
.page-sns-box .sns-weibo .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-weibo-b.png) no-repeat 0 0; background-size: 100% auto;}
.page-sns-box .sns-douyin .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-douyin-b.png) no-repeat 0 0; background-size: 100% auto;}
.page-sns-box .sns-weixin .icon-sns{ background: url(https://mzqx.wanmei.com/images/index260305/sns-weixin-b.png) no-repeat 0 0; background-size: 100% auto;}
.page-sns-box .sns-link{ display: block; width: 100%; height: 100%;}
.page-sns-box .sns-ewm-hover{ display: none; position: absolute; left: 50%; transform: translate3d(-50%,0,0); top: -2.7rem; width: 2.37rem; height: 2.63rem; padding-top: .35rem; box-sizing: border-box; background: url(https://mzqx.wanmei.com/public/popLoginYy/images/260227/sns-ewm-bg.png) no-repeat; background-size: 100% auto;}
.page-sns-box .sns-ewm-hover .ewm{ display: block; width: 1.52rem; height: 1.52rem; margin: 0 auto;}
.page-sns-box .tip-gzh{ display: block; height: .37rem; margin: .18rem auto 0;}
.page-sns-box .sns-item:hover .sns-ewm-hover{ display: block;}

/* foot */
#wmgameFooterInsert{ position: absolute; left: 0; bottom: 0; z-index: 55; width: 100%; height: 220px; background-color: #282a2c; transform: translate3d(0,220px,0); transition: transform 0.3s;}
#wmgameFooterInsert.on{ transform: translate3d(0,0,0);}