@font-face {
  font-family: 'MyFont'; /* 自定义字体名称，后面调用用这个 */
  src: url('https://mzqxvmg.wmupd.com/game/mzqx/mzqx/font/FZShengSKSJW_0.ttf');
}
body{ position: relative; -webkit-text-size-adjust: 100%; font-family: "Microsoft YaHei", Arial, sans-serif; font-size: 16px;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, span, a { margin: 0; padding: 0; vertical-align: baseline;}
ul, ol { list-style: none;}
a { text-decoration: none; color: inherit; cursor: pointer; outline: none;}
a:hover{ text-decoration:none;}
img { border: 0; object-fit: cover;}
video{ object-fit: cover; }
table { border-collapse: collapse;}
area{ outline:none; }
input, textarea, select{ -webkit-appearance: none; outline: none; resize: none; border-radius: 0;}
input::-ms-clear{ display:none;}
input[type="text"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button { border: none; background: none; cursor: pointer; font-size: inherit; white-space: nowrap;}
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}
button:disabled{ cursor: default;}
h1.wm-public{height:0; line-height:0; font-size:0;}
.cf:after {content:"";display:block;height:0;clear:both;} 
.cf {zoom:1;}
.fl{ float: left; }
.fr{ float: right; }
.rel{ position: relative;}
.abs{ position: absolute;}
.auto{left: 50%; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0);}

body{ width: 7.5rem; margin: 0 auto; background: #d5e6d4 url(../images/bg.jpg) no-repeat center top / 100% auto; font-family: "MyFont";}
.logo{ top: .15rem; left: .07rem; height: .88rem;}
.loginStatus{ top: .3rem; right: .26rem; width: 2.7rem; height: .51rem; background: url(../images/loginStatus.png) no-repeat 0 0 / 100% auto;}
.loginBefore, .loginAfter{ display: flex; justify-content: space-between; align-items: center;}
.loginStatus p{ margin-left: .18rem; width: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .24rem; color: #f3f8ee;}
.loginStatus button{ width: 1.1rem; height: .51rem;}
.loginBtn{ background: url(../images/loginBtn.png) no-repeat 0 0 / 100% auto;}
.logoutBtn{ background: url(../images/logoutBtn.png) no-repeat 0 0 / 100% auto;}
.ruleBtn{ top: 1.2rem; left: 0; width: 1.34rem; height: .38rem; background: url(../images/ruleBtn.png) no-repeat 0 0 / 100% auto;}

/* 首页入口 */
.entry{ height: 14rem; background: url(../images/entry.jpg) no-repeat 0 0 / 100% auto;}
.entryBtns{ top: 11.85rem; left: 0; width: 100%; display: flex; justify-content: center; align-items: center;}
.entryBtns button{ width: 3.26rem; height: 1rem; margin: 0 .13rem;}
.entryBtn1{ background: url(../images/entryBtn1.png) no-repeat 0 0 / 100% auto;}
.entryBtn2{ background: url(../images/entryBtn2.png) no-repeat 0 0 / 100% auto;}
.entryBtn3{ background: url(../images/entryBtn3.png) no-repeat 0 0 / 100% auto;}

/* 答题 */
.answer{ height: 14rem;}
.question{ top: 1.83rem; width: 7.12rem; height: 2.52rem; box-sizing: border-box; padding: .32rem .4rem 0 .4rem; background: url(../images/question.png) no-repeat 0 0 / 100% auto;}
.question_head{ display: flex; justify-content: space-between; align-items: center;}
.question_num{ height: .3rem; line-height: .3rem; border-radius: .15rem; padding: 0 .18rem; background: #ae988e; font-size: .24rem; color: #FFF;}
.back_question{ width: 1.65rem; height: .36rem; background: url(../images/back_question.png) no-repeat 0 0 / 100% auto; display: none;}
.question_txt{ margin-top: .37rem; line-height: .53rem; font-size: .32rem; color: #55776d;}
.question_txt .col{ color: #e28129;}
.options{ top: 5.12rem; width: 6.49rem;}
.options li{ margin-bottom: .05rem; height: 1.15rem; box-sizing: border-box; padding: 0 1rem .2rem .4rem; background: url(../images/choice.png) no-repeat 0 0 / 100% auto; display: flex; align-items: center; line-height: .36rem; font-size: .28rem; color: #55776d;}
.options li.active{ background-position-y: bottom; color: #FFF;}
.options li:nth-child(1)::before{ content: "甲、";}
.options li:nth-child(2)::before{ content: "乙、";}
.options li:nth-child(3)::before{ content: "丙、";}
.options li:nth-child(4)::before{ content: "丁、";}
.options li:nth-child(5)::before{ content: "戊、";}
.options li:nth-child(6)::before{ content: "己、";}
.lookCard{ top: 12.3rem; width: 3.26rem; height: .99rem; background: url(../images/lookCard.png) no-repeat 0 0 / 100% auto; display: none;}

/* 身份卡 */
.cardId{ height: 14rem;}
.cardId[card="Q5EA"]{ background: url(../images/Q5EA.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5EB"]{ background: url(../images/Q5EB.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5EC"]{ background: url(../images/Q5EC.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5ED"]{ background: url(../images/Q5ED.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5EE"]{ background: url(../images/Q5EE.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5EF"]{ background: url(../images/Q5EF.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5IA"]{ background: url(../images/Q5IA.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5IB"]{ background: url(../images/Q5IB.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5IC"]{ background: url(../images/Q5IC.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5ID"]{ background: url(../images/Q5ID.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5IE"]{ background: url(../images/Q5IE.png) no-repeat center .7rem / 6.6rem auto;}
.cardId[card="Q5IF"]{ background: url(../images/Q5IF.png) no-repeat center .7rem / 6.6rem auto;}
.bindRoleName{ top: 1.1rem; right: .27rem; display: none;}
.bindRoleName div{ width: 2.34rem; height: .66rem; background: url(../images/bindRoleName.png) no-repeat 0 0 / 100% auto; display: flex; align-items: center;}
.bindRoleName img{ margin-left: .1rem; width: .5rem; height: .5rem; border-radius: 50%; border: .02rem solid #FFF;}
.bindRoleName p{ margin-left: .15rem; width: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .24rem; color: #FFF;}
.backEntry{ top: 1.8rem; left: .4rem; width: .52rem; height: .52rem; background: url(../images/backEntry.png) no-repeat 0 0 / 100% auto; z-index: 1;}
.cardIdPrize{ top: 10.88rem; width: 6.92rem; height: 1.44rem; background: url(../images/cardIdPrize.png) no-repeat 0 0 / 100% auto; display: flex; align-items: center;}
.cardIdPrize::before{ content: ""; margin-left: .33rem; width: .34rem; height: 1.12rem; background: url(../images/cardIdPrizeBefore.png) no-repeat 0 0 / 100% auto;}
.cardIdPrize .pic{ margin-left: .16rem; width: .92rem; height: .92rem; background: url(../images/cardIdPrizePic.png) no-repeat 0 0 / 100% auto;}
.cardIdPrize .pic.on::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/cardIdPrizePicAfter.png) no-repeat 0 0 / 100% auto;}
.prizeInfo{ margin-left: .17rem; width: 3.3rem;}
.prizeInfo dt{ font-size: .26rem; color: #473b2b;}
.prizeInfo dd{ font-size: .24rem; color: #747063;}
.getCardPrize{ margin: 0 .16rem 0 auto; width: 1.43rem; height: .63rem; background: url(../images/acceptPrizeBtn.png) no-repeat 0 0 / 100% auto;}
.getCardPrize.active{ background-position-y: center;}
.getCardPrize.on{ background-position-y: bottom;}
.cardIdBtns{ top: 12.6rem; left: 0; width: 100%; display: flex; justify-content: center; align-items: center;}
.cardIdBtns button{ width: 3.26rem; height: 1rem; margin: 0 .1rem;}
.sendFriend{ background: url(../images/sendFriend.png) no-repeat 0 0 / 100% auto;}
.lookMyTeam{ background: url(../images/lookMyTeam.png) no-repeat 0 0 / 100% auto;}

/* 队伍 */
.teamPage{ height: 15rem;}
.myInfo{ top: 1.83rem; width: 7.21rem; height: 2.49rem; box-sizing: border-box; padding-top: .5rem; background: url(../images/myInfo.png) no-repeat 0 0 / 100% auto; display: flex; align-items: center;}
.myInfo .pic{ width: 1.1rem; height: 1.1rem; margin-left: .7rem;}
.myInfo .pic::after{ content: ""; position: absolute; top: -.05rem; left: -.15rem; width: 1.3rem; height: 1.21rem; background: url(../images/roleItemPicAfter.png) no-repeat 0 0 / 100% auto;}
.myInfo .pic img{ display: block; width: 100%; height: 100%; border-radius: 50%;}
.myInfo .pic p{ bottom: 0; right: 0; width: .55rem; height: .22rem; line-height: .22rem; box-sizing: border-box; padding-right: .04rem; text-align: right; font-size: .16rem; color: #FFF; background: url(../images/lv.png) no-repeat 0 0 / 100% auto; z-index: 1; opacity: .6;}
.myInfoTxt{ margin-left: .25rem; width: 2.5rem;}
.myInfoTxt dt, .myInfoTxt dd{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.myInfoTxt dt{ margin-bottom: .1rem; font-size: .3rem; color: #e28129;}
.myInfoTxt dd{ font-size: .24rem; color: #473b2b;}
.myInfoBtns{ margin-left: .2rem; width: 2.19rem;}
.myInfoBtns button{ display: block; width: 2.19rem; height: .68rem;}
.seeCard{ background: url(../images/seeCard.png) no-repeat 0 0 / 100% auto;}
.createTeam{ background: url(../images/createTeam.png) no-repeat 0 0 / 100% auto;}
.inviteJoin{ background: url(../images/inviteJoin.png) no-repeat 0 0 / 100% auto;}
.members{ top: 4.57rem; width: 7.27rem; height: 3.87rem; box-sizing: border-box; padding-top: .53rem; background: url(../images/members.png) no-repeat 0 0 / 100% auto;}
.null_members{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: .26rem; color: #f3f8ee;}
.members_list{ width: 100%; height: 100%; box-sizing: border-box; padding-left: .13rem; display: flex; align-items: center;}
.member{ margin-right: .1rem; width: 1.68rem; height: 2.97rem; background: url(../images/member.png) no-repeat 0 0 / 100% auto;  text-align: center;}
.addTeam{ height: 100%; background: url(../images/addTeam.png) no-repeat center center / .96rem 1.29rem;}
.member .pic{ width: .84rem; height: .84rem; margin: .3rem auto .15rem auto;}
.member .pic::after{ content: ""; position: absolute; top: -.04rem; left: -.14rem; width: 1.03rem; height: .96rem; background: url(../images/roleItemPicAfter.png) no-repeat 0 0 / 100% auto;}
.member .pic img{ display: block; width: 100%; height: 100%; border-radius: 50%;}
.member .pic p{ bottom: 0; right: 0; width: .42rem; height: .17rem; line-height: .17rem; box-sizing: border-box; padding-right: .04rem; text-align: right; font-size: .14rem; color: #FFF; background: url(../images/lv.png) no-repeat 0 0 / 100% auto; z-index: 1; opacity: .6;}
.memberName{ width: 1.47rem; margin: 0 auto .05rem auto; padding-bottom: .12rem; background: url(../images/memberName.png) no-repeat center bottom / 100% auto; font-size: .24rem; color: #55776d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.memberCardId{ line-height: .33rem; font-size: .22rem; color: #6b6c57;}
.teamTask{ top: 8.75rem;}
.teamTaskTit{ display: block; height: .34rem; margin: 0 auto .16rem auto;}
.taskItem{ display: flex; align-items: center; width: 6.92rem; height: 1.44rem; background: url(../images/cardIdPrize.png) no-repeat 0 0 / 100% auto;}
.taskImg{ margin: -.3rem 0 0 .32rem; width: .92rem; height: .92rem;}
.taskImg img{ display: block; width: 100%; height: 100%; border-radius: 50%;}
.taskImg p{ bottom: -.26rem; width: 1.4rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .2rem; color: #55776d;}
.taskInfo{ margin-left: .34rem; width: 3.1rem; line-height: .4rem; font-size: .26rem; color: #747063;}
.taskBtn{ margin: 0 .4rem 0 auto; width: 1.43rem; height: .63rem; background: url(../images/acceptPrizeBtn.png) no-repeat 0 0 / 100% auto;}
.taskBtn.active{ background-position-y: center;}
.taskBtn.on{ background-position-y: bottom;}








/* 弹出框 */
.pop{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); display: none; z-index: 10;}
.popCont{ top: 50%; left: 50%; transform: translate(-50%, -50%);}
.popBg1{ width: 6.34rem; height: 4.28rem; background: url(../images/popBg1.png) no-repeat 0 0 / 100% auto;}
.popBg2{ width: 6.36rem; height: 8.32rem; background: url(../images/popBg2.png) no-repeat 0 0 / 100% auto;}
.close{ top: -.2rem; right: -.2rem; width: .56rem; height: .56rem; background: url(../images/close.png) no-repeat 0 0 / 100% auto;}
.popTit{ top: .48rem; height: .48rem;}
.pop_msg{ top: 1.2rem; width: 4.9rem; height: 1.6rem; display: flex; justify-content: center; align-items: center; text-align: center; line-height: .45rem; font-size: .28rem; color: #55776d;}
.pop_btns{ bottom: .63rem; left: 0; width: 100%; display: flex; justify-content: center; align-items: center;}
.pop_btns button{ margin: 0 .2rem;}
.cancel{ width: 2.24rem; height: .68rem; background: url(../images/cancel.png) no-repeat 0 0 / 100% auto;}

/* 弹出框：退出二次确认 */
#pop_logout{ z-index: 11;}
.confirmLogout{ width: 2.19rem; height: .68rem; background: url(../images/confirmLogout.png) no-repeat 0 0 / 100% auto;}

/* 弹出框：创建队伍二次确认 */
.confirmCreatTeam{ width: 2.19rem; height: .68rem; background: url(../images/confirmCreatTeam.png) no-repeat 0 0 / 100% auto;}

/* 弹出框：活动说明 */
.pop_rule_cont{ top: 1.27rem; width: 5.6rem; height: 6.2rem; line-height: .48rem; font-size: .28rem; color: #55776d; overflow-x: hidden; overflow-y: auto;}

/* 弹出框：绑定角色 */
.pop_bind_tip{ top: 1.2rem; width: 5.5rem; line-height: .32rem; font-size: .24rem; color: #55776d;}
.role_list{ top: 2rem; width: 5.49rem; height: 5rem; overflow-x: hidden; overflow-y: auto;}
.roleItem{ width: 5.49rem; height: 1.09rem; box-sizing: border-box; padding: 0 .4rem; background: url(../images/roleItem.png) no-repeat 0 0 / 100% auto; display: flex; align-items: center;}
.roleItem .pic{ width: .68rem; height: .68rem;}
.roleItem .pic::after{ content: ""; position: absolute; top: -.02rem; left: -.12rem; width: .82rem; height: .76rem; background: url(../images/roleItemPicAfter.png) no-repeat 0 0 / 100% auto;}
.roleItem .pic img{ display: block; width: 100%; height: 100%; border-radius: 50%;}
.roleItem .pic p{ bottom: 0; right: 0; width: .37rem; height: .15rem; line-height: .15rem; box-sizing: border-box; padding-right: .04rem; text-align: right; font-size: .12rem; color: #FFF; background: url(../images/lv.png) no-repeat 0 0 / 100% auto; z-index: 1; opacity: .6;}
.roleItem dl{ margin-left: .12rem; width: 2.2rem;}
.roleItem dt, .roleItem dd{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.roleItem dt{ font-size: .24rem; color: #473b2b;}
.roleItem dd{ font-size: .22rem; color: #7f6242;}
.bindBtn{ margin-left: auto; width: 1.43rem; height: .63rem; background: url(../images/bindBtn.png) no-repeat 0 0 / 100% auto;}
.pop_logout{ top: 7.32rem; width: 2.19rem; height: .68rem; background: url(../images/pop_logout.png) no-repeat 0 0 / 100% auto;}

/* 弹出框：分享 */
.popShareCont{ width: 100%; height: 100%;}
.popSharePic{ display: block; width: 100%;}
.popShareBtns{ top: 11.3rem; left: 0; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
.popShareBtns button, .popShareBtns a{ margin: 0 .3rem;}
.copyShareLink{ width: .98rem; height: 1.1rem; background: url(../images/copyShareLink.png) no-repeat 0 0 / 100% auto;}
.downSharePic{ width: .98rem; height: 1.1rem; background: url(../images/downSharePic.png) no-repeat 0 0 / 100% auto;}
.popShareClose{ top: 13rem; width: .56rem; height: .56rem; background: url(../images/close.png) no-repeat 0 0 / 100% auto;}

/* 弹出框：加入队伍 */
.confirmJoin{ width: 2.19rem; height: .68rem; background: url(../images/confirmJoin.png) no-repeat 0 0 / 100% auto;}
.leaderName{ color: #ffcf37;}

/* 弹出框：无角色 */
.createRole{ width: 2.19rem; height: .68rem; background: url(../images/createRole.png) no-repeat 0 0 / 100% auto;}