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; 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;}
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}
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);}

.wrapper{ width: 7.5rem; height: 18.77rem; margin: 0 auto; background: url(../images/bg.jpg) no-repeat center top; background-size: 100% auto;}
.ruleBtn{ top: .2rem; left: 0; width: 1.34rem; height: .38rem; background: url(../images/ruleBtn.png) no-repeat 0 0; background-size: 100% auto;}
.loginState{ top: .21rem; right: .25rem; height: .5rem; line-height: .5rem; border-radius: .25rem; background: rgba(0, 0,0,.8); padding-left: .2rem;}
.loginState div{ display: flex; align-items: center; height: 100%;}
.loginState p{ padding-right: .15rem; font-weight: bold; font-size: .28rem; color: rgba(247, 247, 247, .5);}
.loginState button{ width: 1.1rem; height: .51rem; margin-left: auto;}
.loginBtn{ background: url(../images/loginBtn.png) no-repeat 0 0; background-size: 100% auto;}
.logoutBtn{ background: url(../images/logoutBtn.png) no-repeat 0 0; background-size: 100% auto;}
.inviteBox{ bottom: 4.55rem; left: 0; width: 100%;}
.inviteCodeBox{ display: flex; justify-content: space-between; align-items: center; margin-bottom: .05rem; padding: 0 .5rem 0 .3rem; box-sizing: border-box;}
.hisInviteCodeBox{ visibility: hidden;}
.inviteCodeName{ height: .54rem; transform: translateY(-0.08rem);}
.inviteInput{ width: 4.51rem; height: .67rem; box-sizing: border-box; padding: 0 .12rem 0 .23rem; background: url(../images/inviteInput.png) no-repeat 0 0; background-size: 100% auto; display: flex; justify-content: space-between; align-items: center;}
.inviteInput p{ font-weight: bold; font-size: .34rem; color: #985317;}
.inviteInput h2{ font-size: .34rem; color: #923f0f;}
.myInviteCodeBox h2{ display: none;}
.copyBtn{ width: .89rem; height: .53rem; background: url(../images/copyBtn.png) no-repeat 0 0; background-size: 100% auto;}
.helpBtn{ width: .53rem; height: .53rem; background: url(../images/helpBtn.png) no-repeat 0 0; background-size: 100% auto;}
.inviteFriend{ top: 14.66rem; display: flex; align-items: center;}
.inviteFriend button{ width: 3.47rem; height: 1.15rem; margin-top: .06rem; margin-right: .7rem; background: url(../images/inviteFriendBtn.png) no-repeat 0 0; background-size: 100% auto;}
.inviteFriend img{ width: 1.6rem; height: 1.59rem;}

/* 弹出框 */
.pop{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); z-index: 10; display: none;}
.popCont{ top: 50%; left: 50%; transform: translate(-50%, -50%);}
.closeBtn{ top: -0.07rem; right: .3rem; width: .74rem; height: .71rem; background: url(../images/closeBtn.png) no-repeat 0 0; background-size: 100% auto;}

/* 弹出框：活动引导 */
.popDesCont{ width: 6.82rem; height: 10.07rem; background: url(../images/popDesCont.png) no-repeat 0 0; background-size: 100% auto;}
.popDesImg{ top: 1.48rem; width: 5.07rem;}

/* 弹出框：活动说明 */
.popRuleCont{ width: 6.93rem; height: 10.07rem; background: url(../images/popRuleCont.png) no-repeat 0 0; background-size: 100% auto;}
.popRuleText{ top: 1.5rem; width: 5rem; height: 6.8rem; margin-left: .1rem; overflow-x: hidden; overflow-y: auto; line-height: .45rem; font-weight: bold; font-size: .28rem; color: #b82020;}
.popRuleText::-webkit-scrollbar{ width: .1rem; border-radius: .05rem; background: #f6ddd8; }
.popRuleText::-webkit-scrollbar-thumb{ border-radius: .05rem; background: #fd6464; }
.popRuleText img{ max-width: 100%;}

/* 弹出框：退出登录 */
.popLogoutCont{ width: 6.83rem; height: 6.37rem; background: url(../images/popLogoutCont.png) no-repeat 0 0; background-size: 100% auto;}
.logout-title{ position: absolute; left: 1.1rem; top: .44rem; height: .78rem;}
.popLoginTip{ top: 2.5rem; width: 5.36rem; text-align: center; line-height: .45rem; font-weight: bold; font-size: .32rem; color: #923f0f;}
.popLoginBtns{ top: 4.7rem; width: 100%; display: flex; justify-content: center; align-items: center;}
.popLoginBtns button{ width: 2.58rem; height: .77rem; margin: 0 .15rem;}
.cancel{ background: url(../images/cancel.png) no-repeat 0 0; background-size: 100% auto;}
.confirm{ background: url(../images/confirm.png) no-repeat 0 0; background-size: 100% auto;}

/* 弹出框：登录 */
.popLoginCont{ width: 6.93rem; height: 6.37rem; background: url(../images/popLoginCont.png) no-repeat 0 0; background-size: 100% auto;}
.loginConfirm{ background: url(../images/loginConfirm.png) no-repeat 0 0; background-size: 100% auto;}