body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{-webkit-text-size-adjust: none;margin:0;padding:0;}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol{list-style:none;}a{text-decoration:none;outline:0 none}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}fieldset,img{border:0;display: block;max-width: 100%;}button,input,select,textarea{font-size:100%;resize: none;}table{border-collapse:collapse;border-spacing:0;outline: none;}
body{/* min-width: 1270px; *//* overflow-x:auto; */background: #fff;font-family:"Microsoft Yahei";}
a{color:#5B5B5B;outline: none;}
button:hover,button:active{outline: none;cursor: pointer;}
body,html{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
@font-face {
  font-family: 'font';
  src: url('../images/font.otf') format('opentype');
  font-weight: normal;
}
.com_topbar{
	display: none;
}
.mySwiper {
  	width: 100%;
  	height: 100%;
  	border: none;
}
.wrapper{
	display: block;
	width: 100%;
	height: 100%;
}
.autoImg{
	display: block;
	width: 100%;
}
.part{
	background: url(../images/bg_part2.jpg) center/cover no-repeat;
	border: none;
}
.kv{
	background: url(../images/bg_kv1.jpg) center/cover no-repeat;
}
.part1{
	background-color: #ff0;
}
.part2{
	background-color: #f0f;
}
.part3{
	background-color: #000;
}
.part4{
	background-color: #ccc;
}
.flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}
.content{
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
}
.slogan-box{
	display: block;
}
.slogan-kv{
	display: none;
	width: 8.15rem;
	margin: 0 auto;
	background: url(../images/img_slogan1.png) center/100% no-repeat;
	height: 4.23rem;
}
.slogan-kv2{
	width: 9.61rem;
	background: url(../images/img_slogan2.png) center/100% no-repeat;
	height: 3.21rem;
  margin: 0 auto;
	margin-bottom: .7rem;
}
.slogan-kv.on{
	display: block;
}
.btn-join{
	display: block;
	width: 2.83rem;
	height: .58rem;
	background: url(../images/btn_join.png) top/100% no-repeat;
	margin: .6rem auto;
}
.btn-join:hover{
	background-position: center bottom;
}
.kv-btn{
  display: none;
	margin: .3rem auto 0;
	width: 10rem;
}
.kv-btn.on{
  display: flex;
}
.kv-btn a{
	display: none;
	margin: 0 .3rem;
}
.kv-btn a.on{
	display: block;
}
.kv-btn .pluto-mall{
	position: relative;
}
/* .kv-btn .pluto-mall .btn-pluto-title{
	width: 1.94rem;
	height: .55rem;
	background: url(../images/btn_plutomall_title.png) center/100% no-repeat;
	position: absolute;
	top: -0.35rem;
	left: 50%;
	transform: translateX(-50%);
} */
.kv-btn.kv-btn2.flex-center.on{
  align-items: end;
}
.kv-btn a.btn-plutomall{
	width: 1.94rem;
	height: 0.9312rem;
	background: url(../images/btns/a_pay_btn.png) center/100% no-repeat;
  margin-bottom: 0.01rem;
}
.kv-btn a.btn-appstore{
	width: 1.94rem;
	height: .62rem;
	background: url(../images/btn_app_store.png) center/100% no-repeat;
}
.kv-btn a.btn-googleplay{
	width: 2.05rem;
	height: .61rem;
	background: url(../images/google_download.png) center/100% no-repeat;
}
.kv-btn2 a.btn-appstore{
  background: url(../images/btn_app_store2.png) center/100% no-repeat;
  width: 1.81rem;
}
.kv-btn2 a.btn-googleplay{
  background: url(../images/google_download2.png) center/100% no-repeat;
  width: 1.83rem;
}
.kv-btn a.btn-email{
	width: 1.85rem;
	height: .63rem;
	background: url(../images/btn_email.png) center/100% no-repeat;
}
.kv-btn a.btn-pc{
	width: 1.79rem;
	height: .59rem;
	background: url(../images/btn_window.png) center/100% no-repeat;
}
.kv-video{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  object-fit: cover;
}
/*part2*/
.p2-box{
	display: block;
	width: 15.69rem;
	height: 8.72rem;
	background: url(../images/bg_p2_role.png) center/100% no-repeat;
	margin: 0rem;
}
.p2-list{
	width: 4rem;
	height: .7rem;
	position: absolute;
	top: 1rem;
	left: 1rem;
}
.p2-list.on{
  height: 1rem;
}
.p2-list1{
    top: 7.1rem;
    left: 2.3rem;
}
.p2-list2{
    top: 7.1rem;
    left: 7.1rem;
}
.p2-list .btn-msg{
	display: none;
	width: 1.5rem;
	height: .51rem;
	background: url(../images/btn_msg.png) top/100% no-repeat;
	/* margin: 0 .1rem; */
}
.p2-list .btn-go{
	display: none;
	width: 1.74rem;
	height: .87rem;
	background: url(../images/btn_go.png) top/100% no-repeat;
	/* margin: 0 .1rem; */
}
.p2-list .pc-show{
  display: block;
}
.p2-list .pc-show1{
  width: 2.2rem;
}
.p2-list .pc-show2{
  width: 1.34rem;
}
.p2-list .pc-show2{}
.p2-list.on .pc-show{
  display: none;
}
.p2-list .m-show{
  display: none;
}
.p2-list.on a{
  display: block;
}
.p2-list .btn-msg:hover,
.p2-list .btn-go:hover{
	background-position: center bottom;
}
/*part3*/
.p3-box{
	display: block;
	width: 12.9rem;
	height: 6.99rem;
	background: url(../images/p3_img.png) center/100% no-repeat;
	margin: 0 auto;
	position: relative;
}
.p3-btn{
	display: flex;
	width: 100%;
	height: .6rem;
	position: absolute;
	top: 3.9rem;
	left: -.35rem;
	justify-content: center;
}
.p3-btn a{
	display: block;
	width: 1.5rem;
	height: .53rem;
	background: url(../images/btn_follow.png) top/100% no-repeat;
	margin: 0 1.3rem;
}
.p3-btn a:hover{
	background-position: center bottom;
}
/*part4*/
.p4-title{
	display: block;
	width: 2.17rem;
	height: .7rem;
	background: url(../images/p4_title.png) center/100% no-repeat;
	margin: 0 auto .3rem;
}
.p4-con{
	width: 14.7rem;
	height: 7.16rem;
	margin: 0 auto;
	background: url(../images/p4_img.png) center/100% no-repeat;
	overflow: hidden;
}
.rule-box{
    display: block;
    width: 10rem;
    height: 5rem;
    margin: .7rem 0 0 2.1rem;
}
.rule-title{
    line-height: .4rem;
    font-size: .3rem;
    text-align: center;
    margin-bottom: .3rem;
    color: #7b3c07;
    font-weight: 700;
    font-family: 'font';
}
.rule-desc{
    line-height: .3rem;
    text-align: center;
    font-size: .16rem;
    margin-bottom: .2rem;
    color: #7b3c07;
    font-family: 'font';
}

/*part5*/
.p5-con{
	display: block;
	width: 14.2rem;
	height: 6.3rem;
	margin: 1.5rem auto 0;
	position: relative;
}
.p5-title{
    display: block;
    width: 3.73rem;
    height: .73rem;
    background: url(../images/role_title.png) center/100% no-repeat;
    position: absolute;
    top: -.4rem;
    left: 3.9rem;
    z-index: 99;
}
.role-nav{
    display: block;
    width: 1.3rem;
    height: 3.2rem;
    position: absolute;
    top: 1rem;
    left: 1.6rem;
}
.role-nav a{
    display: block;
    width: 100%;
    height: 33%;
}
.role-wrap{}
.role-wrap .role-list{
	display: none;
	width: 14.2rem;
	height: 6.3rem;
	background: url(../images/bg_role1.png) center/100% no-repeat;
}
.role-wrap .role-list1{
	background: url(../images/bg_role1.png) center/100% no-repeat;
}
.role-wrap .role-list1:after{
	content: '';
	display: block;
	width: 2.18rem;
	height: 1.34rem;
	background: url(../images/role2_mask.png) center/100% no-repeat;
	position: absolute;
	bottom: .75rem;
	right: 4rem;
	z-index: 99;
}
.role-wrap .role-list2{
	background: url(../images/bg_role2.png) center/100% no-repeat;
}
.role-wrap .role-list3{
	background: url(../images/bg_role3.png) center/100% no-repeat;
}
.role-wrap .role-list.on{
	display: block;
}
.role-btn{
    width: 3.5rem;
    height: 1.07rem;
    position: absolute;
    top: 3.2rem;
    left: 3.8rem;
    justify-content: space-between;
    z-index: 9;
}
.role-btn a{
    display: block;
    width: .88rem;
    height: 1.07rem;
    position: relative;
}
.role-btn a.on:after{
	content: '';
	display: block;
	width: 1.02rem;
	height: 1.12rem;
	background: url(../images/bg_role_header.png) center/100% no-repeat;
	position: absolute;
	top: -.03rem;
	left: -.12rem;
}
.role-btn a.on img{
	position: relative;
	z-index: 2;
}
.role-desc-list{
	display: none;
}
.role-desc-list.on{
	display: block;
}
.role-info-box .role-desc-box{
    display: block;
    width: 3.5rem;
    height: auto;
    position: absolute;
    top: .7rem;
    left: 3.8rem;
    color: #ffffff;
}
.role-info-box .role-desc-box-m{
	display: none;
}
.role-info-box .role-name1{
    font-size: .56rem;
    color: #fff;
    line-height: .8rem;
    font-family: 'font';
}
.role-info-box .role-name2{
    font-size: .23rem;
    line-height: .5rem;
    font-family: 'font';
}
.role-info-box .role-desc{
    font-size: .18rem;
    line-height: .25rem;
    opacity: .5;
    font-family: 'font';
}
.role-cover{
    display: block;
    position: absolute;
    top: 0rem;
    right: 0rem;
}
.role-cover img{
    display: none;
    position: relative;
    top: 0rem;
    left: 0rem;
}
.role-cover img.on{
    display: block;
}
.role-cover .img-role1{
    width: 7.89rem;
    top: -1.4rem;
    left: .2rem;
}
.role-cover .img-role2{
    width: 6.61rem;
    top: -1rem;
    left: -1rem;
}
.role-cover .img-role3{
    width: 7.19rem;
    top: -1.6rem;
    left: -.1rem;
}
.role-cover .img-role4{
    width: 7.39rem;
    top: -.8rem;
    left: -.2rem;
}
.role-cover .img-role5{
    width: 3.35rem;
    top: -1.4rem;
    left: -2.8rem;
}
.role-cover .img-role6{
    width: 5.83rem;
    top: -1.82rem;
    left: 0rem;
}
.role-cover .img-role7{
    width: 3.74rem;
    top: -1.5rem;
    left: -3rem;
}
.role-cover .img-role8{
    width: 7.63rem;
    top: -1.9rem;
    left: 0rem;
}
.role-cover .img-role9{
    width: 5.73rem;
    top: -1.5rem;
    left: -1.3rem;
}
.role-cover .img-role10{
    width: 5.94rem;
    top: -1.6rem;
    left: -1.8rem;
}
.role-cover .img-role11{
    width: 4.2rem;
    top: 0.6rem;
    left: -2.8rem;
}
.role-cover .img-role12{
    width: 6.38rem;
    top: -2rem;
    left: -1.3rem;
}


/*part6*/
.p6-title{
	display: block;
	width: 3.48rem;
	height: .72rem;
	background: url(../images/p6_title.png) center/100% no-repeat;
	margin: 0 auto;
}
.p6-swiper-box{
	display: block;
	width: 14.62rem;
	height: 7.12rem;
	background: url(../images/p6_mask.png) center/100% no-repeat;
	margin: 0 auto;
	overflow:hidden;
}
.p6-swiper{
	display: block;
	width: 8.72rem;
	height: 6.4rem;
	margin: .55rem auto 0;
  position: relative;
  left: .04rem;
}
.p6-swiper .p6-nav{
    bottom: .4rem;
}
.swiper-pagination-bullet{
	width: 0;
	height: 0;
	background: transparent;
	opacity: 1;
	border: .08rem solid #ffe08c;
	vertical-align: middle;
}
.swiper-pagination-bullet-active{
	width: .08rem;
	height: .08rem;
}
.p6-footer{
	display: flex;
	width: 100%;
	height: 1rem;
	background-color: #000;
	position: absolute;
	bottom: 0;
	left: 0;
	justify-content: space-between;
	align-items: center;
}
.p6-footer .footer-logo{
    display: block;
    width: 1.36rem;
    height: .54rem;
    background: url(../images/logo.png) center/100% no-repeat;
    margin-left: .5rem;
}
.footer-hint{
  display: block;
  width: 7.5rem;
  line-height: .4rem;
  line-height: .4rem;
  color: #fff;
  text-align: left;
  margin-left: .2rem;
}
.p6-footer .footer-link{
    display: block;
    width: 9rem;
    color: #808080;
    line-height: .3rem;
    line-height: .3rem;
}
.p6-footer .footer-link a{
    display: inline-block;
    font-size: .14rem;
    color: #fff;
    margin: 0 .2rem;
}
.p6-prev,
.p6-next{
	display: block;
	width: 1rem;
	height: 1.19rem;
	background: url(../images/btn_dir.png) center left no-repeat;
	background-size: 2.97rem auto;
	position: absolute;
	top: 50%;
	left: 4.55rem;
	z-index: 99;
	margin-top: -1rem;
}
.p6-next{
	left: auto;
	right: 4.55rem;
	background-position: center right;
}
.page-txt{
	display: block;
	width: .13rem;
	height: 2.79rem;
	background: url(../images/page_text.png) center/100% no-repeat;
	position: fixed;
	top: 50%;
	left: .2rem;
	transform: translateY(-50%);
	pointer-events: none;
}
/*top-nav*/
.page-logo{
	display: block;
	width: 1.98rem;
	height: 1.51rem;
	background: url(../images/page_logo.png) center/100% no-repeat;
	position: absolute;
	top: .3rem;
	left: 1rem;
	z-index: 99;
}
.nav-link{
    display: flex;
    width: 3.2rem;
    height: .59rem;
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 99;
    justify-content: space-around;
}
.nav-link a{
    display: block;
    width: .61rem;
    height: .6rem;
    background: url(../images/kv_nav_btn.png) no-repeat;
    background-size: 3.12rem auto;
    background-position-y: top;
}
.nav-link a:hover{
	background-position-y: bottom;
}
.nav-link a.btn-link1{}
.nav-link a.btn-link2{
	background-position-x: -.84rem; 
}
.nav-link a.btn-link3{
	background-position-x: -1.68rem;
}
.nav-link a.btn-link4{
	background-position-x: -2.51rem;
}
/*right-nav*/
.right-nav{
	display: block;
	width: 1.9rem;
	height: 4.9rem;
	background: url(../images/bg_right_nav.png) center/100% no-repeat;
	position: fixed;
	top: 50%;
	right: .1rem;
	transform: translateY(-50%);
	z-index: 99;
}
.right-link-box{
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.right-link-box a{
    display: flex;
    width: 100%;
    height: .65rem;
    color: #fff;
    justify-content: center;
    align-items: center;
    line-height: .2rem;
    font-size: .2rem;
    font-family: 'font';
    position: relative;
    margin: .15rem 0;
}
.right-link-box a.on{
	color: #141414;
}
.right-link-box a span{
	position: relative;
	z-index: 2;
	text-align: center;
}
.right-link-box a.on:after{
	content: '';
	display: block;
	width: 2.72rem;
	height: .99rem;
	background: url(../images/right_nav_on.png) center/100% no-repeat;
	position: absolute;
	top: -.16rem;
	left: -.6rem;
}

/*dialog*/
/*pop*/
input[type=number] {
    -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input {
    outline: none;
}
.pop-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgb(0 0 0 / 46%);
}

.pop-bg.on {
  display: flex;
}

.pop {
  position: relative;
  text-align: center;
  /*overflow: hidden;*/
  box-sizing: border-box;
  z-index: 99999 !important;
  display: none;
}

.pop-close {
  position: absolute;
  width: 0.58rem;
  height: 0.58rem;
  top: 0;
  right: -.8rem;
  z-index: 9;
  background: url(../images/pop_close.png) center/100% no-repeat;
}


.pop1 {
  background: url(../images/pop1.png) no-repeat center/100%;
  width: 7.39rem;
  height: 6.68rem;
  padding-top: 1px;
}
.pop2 {
  background: url(../images/pop2.png) no-repeat center/100%;
  width: 7.39rem;
  height: 6.68rem;
  padding-top: 1px;
}
.pop1_con{
  width: 6.24rem;
  margin: 1.6rem auto 0;
  position: relative;
  /* opacity: 0; */
}
.pop1_btn{
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  width: 5.5rem;
  margin: 0 auto .4rem;
}
.pop1_btn a{
  position: relative;
  padding-left: 0.55rem;
  box-sizing: border-box;
  color: #4e2612;
  height: 0.46rem;
  line-height: 0.5rem;
  font-family: 'font';
}
.pop1_btn a.on{
  /* color: #a980b1; */
}
.pop1_btn a::after,.pop1_link::after{
  content: '';
  background: url(../images/pop1_icon.png) no-repeat right/2.07rem 0.37rem;
  width: 0.5rem;
  height: 0.37rem;
  position: absolute;
  top: 0.05rem;
  left: 0;
}
.pop1_btn a.on::after,.pop1_link.on::after{
  background: url(../images/pop1_icon.png) no-repeat left/2.07rem 0.37rem;
  left: 0rem;
}
.pop1 input,.pop5 input{
  /* background: url(../images/pop1_in.png) no-repeat center/100%; */
  background-size: 100% 100%;
  width: 6.24rem;
  height: .56rem;
  border: none;
  display: block;
  margin: 0.35rem auto;
  padding:0 0.25rem;
  box-sizing: border-box;
  outline: none;
  color: #4e2612;
  background: none;
  font-family: 'font';
  font-size: .3rem;
}
input.placeholder{color: #4e2612;}/* IE6/7/8/9 */
input::-webkit-input-placeholder{ color:#4e2612;}/* WebKit */
input:-moz-placeholder{color:#4e2612;}/* Firefox 4 - 18 */
input::-moz-placeholder{color:#4e2612;}/* Firefox 19+ */
input:-ms-input-placeholder{color:#4e2612;}/* IE10+ */
.pop1_link,.pop2_tips{
  position: relative;
  padding-left: 0.52rem;
  box-sizing: border-box;
  color: #4e2612;
  font-size: 0.22rem;
  text-align: left;
  height: 0.37rem;
  line-height: 0.37rem;
  margin-top: 0.15rem;
  cursor: pointer;
  font-family: font;
  width: 5.3rem;
  margin: .2rem auto;
}
.pop1_link a{
  color: #4e2612;
  text-decoration: underline;
  text-underline-offset: 0.05rem;
}
.pop-btn{
  background: url(../images/pop-btn.png) no-repeat top/100%;
  width: 3.45rem;
  height: 0.73rem;
  display: block;
  margin: 0.15rem auto;
}
.pop1_desc{
  font-size: 0.18rem;
  color: #4e2612;
  font-family: font;
  display: none;
}
.pop-btn2{
  background: url(../images/pop-btn2.png) no-repeat center/100%;
  display: block;
  width: 2.11rem;
  height: .56rem;
  position: absolute;
  right: 0;
  top: 1.76rem;
  color: #f3f5e4;
  font-size: 0.22rem;
  line-height: 0.56rem;
  font-weight: 700;
}
.pop2_tips{
  text-align: center;
  opacity: 0;
}
.pop2_btn{
  width: 2rem;
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
  margin: 1.8rem auto;
}
.pop2_btn a{
  width: 0.88rem;
  height: 0.88rem;
}

.pop3{
  background: url(../images/pop3.png) no-repeat center/100%;
  width: 7.39rem;
  height: 6.68rem;
  padding-top: 1px;
}
.pop-rule-title{
  font-size: .45rem;
  font-family: font;
  width: 85%;
  margin: .5rem auto 0;
  text-align: left;
  color: #4e2612;
}
.pop-rule{
  display: block;
  width: 85%;
  margin: .1rem auto 0;
  height: 4.5rem;
  overflow-y: auto;
}
.pop-rule p{
  font-size: .2rem;
  color: #4e2612;
  text-align: left;
}

.pop-rule::-webkit-scrollbar {
    width: .1rem; 
}
 
.pop-rule::-webkit-scrollbar-track {
    background: #4e2612; 
}

.pop-rule::-webkit-scrollbar-thumb {
    background: #d7a628; 
}

.pop-rule::-webkit-scrollbar-thumb:hover {
    background: #4e2612; 
}

.pluto-mall {
  display: none;
}

.wrapper.noOfficial .pluto-mall {
  display: block;
}