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;}
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(69, 35,18,.8); padding-left: .1rem;}
.loginState div{ display: flex; align-items: center; height: 100%;}
.loginState p{ padding-right: .15rem; font-weight: bold; font-size: .28rem; color: #ffeccd;}
.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.7rem; left: 0; width: 100%;}
.inviteBox .tip{ text-align: center; line-height: .36rem; font-size: .24rem; color: #985317;}
.inviteCodeBox{ display: flex; justify-content: space-between; align-items: center; padding: 0 .5rem 0 .2rem; box-sizing: border-box;}
.hisInviteCodeBox{ visibility: hidden;}
.inviteCodeName{ height: .93rem;}
.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-size: .24rem; color: #985317;}
.inviteInput h2{ font-size: .38rem; 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: .44rem; height: .44rem; 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.45rem; height: 1.24rem; margin-right: .7rem; background: url(../images/inviteFriendBtn.png) no-repeat 0 0; background-size: 100% auto;}
.inviteFriend img{ width: 1.59rem; 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.1rem; right: .69rem; width: .65rem; height: .66rem; background: url(../images/closeBtn.png) no-repeat 0 0; background-size: 100% auto;}

/* 弹出框：活动引导 */
.popDesCont{ width: 7.04rem; height: 11.06rem; background: url(../images/popDesCont.png) no-repeat 0 0; background-size: 100% auto;}
.popDesImg{ top: 1.44rem; left: .52rem; width: 5.87rem;}

/* 弹出框：活动说明 */
.popRuleCont{ width: 7.08rem; height: 8.97rem; background: url(../images/popRuleCont.png) no-repeat 0 0; background-size: 100% auto;}
.popRuleText{ top: 1.5rem; width: 5.6rem; height: 5.1rem; overflow-x: hidden; overflow-y: auto; line-height: .45rem; font-weight: bold; font-size: .28rem; color: #bc8663;}
.popRuleText::-webkit-scrollbar{ width: .1rem; border-radius: .05rem; background: #f9ea98; }
.popRuleText::-webkit-scrollbar-thumb{ border-radius: .05rem; background: #eac603; }
.popRuleText img{ max-width: 100%;}

/* 弹出框：退出登录 */
.popLoginCont{ width: 7.24rem; height: 6.29rem; background: url(../images/popLoginCont.png) no-repeat 0 0; background-size: 100% auto;}
.popLoginTip{ top: 2.3rem; width: 5.36rem; text-align: center; line-height: .45rem; font-weight: bold; font-size: .36rem; color: #bc8663;}
.popLoginBtns{ top: 4.54rem; width: 100%; display: flex; justify-content: center; align-items: center;}
.popLoginBtns button{ width: 2.41rem; height: .89rem; 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;}

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