@font-face {
  font-family: 'fzcysong';
  src: url('../fonts/fzcysong.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
:root {
  --c-bg: #371401;
  --c-text: #ffe5c7;
  --c-gold: #f0bd5c;
  --c-gold-light: #ffe2a8;
  --c-gold-dark: #e7b95f;
  --c-border: #a87338;
  --c-card-bg: #21140e;
  --c-btn-bg: #2a1c14;
  --c-btn-border: #8b6234;
  --c-accent: #bd7130;
  --c-accent-dark: #a75c2b;
  --font-kaiti: 'fzcysong', KaiTi, "Microsoft YaHei", serif;
  --font-base:"Microsoft YaHei","Helvetica Neue",Arial,Helvetica,"BBAlpha Sans",sans-serif;
}
body,button,caption,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,html,input,legend,li,menu,ol,p,pre,table,td,textarea,th,ul{margin:0;padding:0;box-sizing: border-box;}
abbr,body,fieldset,html,iframe,img{border:0}
li{list-style:none}
textarea{overflow:auto;resize:none}
input{outline:0}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6{font-weight:400;font-style:normal}
b,strong{font-weight:700;font-style:normal}
em,i{font-weight:400;font-style:italic}
button{border:none;outline:0}
a,button{cursor:pointer}
a,a:hover{text-decoration:none}
a,button,input,textarea{font-size:inherit;color:inherit}
a,button,div,input,select,textarea{margin:0;padding:0;border:0;outline:0}
select{appearance:none;-moz-appearance:none;-webkit-appearance:none}
::-webkit-scrollbar {display:none;}
html{font-size: calc(100vw/7.5);}
body{font:.22rem / .3rem var(--font-base);font-size: .22rem; color: var(--c-text); background: var(--c-bg);}
table{border-collapse:collapse}
img{display: block;width: 100%;}

::-webkit-scrollbar {display:none;}
.hide{display: none;}
.bd{
  flex: 1;
}
.app {
  position: relative;
  max-width: 7.5rem;
  margin: 0 auto;
  overflow-x: hidden;
}
.app img{
  display: block;
  width: 100%;
}
.head{
  position: fixed;
  top: 0;
  left: 50%;
  width: 7.5rem;
  height: 1rem;
  z-index: 1;
  margin-left: -3.75rem;
  width: 7.5rem;
  height: 1rem;
  background: url('../img/head.jpg') no-repeat 0 0 / 7.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .3rem;
  box-sizing: border-box;
}
.head b {
  font-size: 0.24rem;
  background: linear-gradient(#f3ff66, #f8ffc3);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  flex: 1;
}
.btn-login, .btn-game, .btn-prize, .btn-rule, .btn-light, .btn-daily, .btn-share, .btn-get,.btn-submit,.btn-copy,.btn-reward,.btn-finish {
  background-image: url('../img/btns.png');
  background-repeat: no-repeat;
  background-size: 6rem auto;
  font-size: 0;
  cursor: pointer;
}
.btn-login{
  width: 1.38rem;
  height: .52rem;
  background-position: -3.42rem 0;
  margin-right: 0.2rem;
}
.btn-game{
  width: 1.54rem;
  height: .52rem;
  background-position: -3.42rem -1.15rem;
}
.user{
  display: none;
  position: absolute;
  left: 50%;
  right: auto;
  top: 1.1rem;
  width: 7.5rem;
  padding: 0 .3rem;
  box-sizing: border-box;
  transform: translateX(-50%);
  z-index: 2;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
  pointer-events: auto;
}
.user-info{
  display: inline-block;
  max-width: 5.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.btn-logout{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: .38rem;
  margin-left: .12rem;
  padding: 0 .14rem;
  border: 1px solid rgba(255,224,144,.72);
  border-radius: .08rem;
  box-sizing: border-box;
  color: #ffe7a0;
  background: rgba(92,25,6,.78);
  font-size: .18rem;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}
.side{
  position: fixed;
  top: 50%;
  right: .1rem;
  transform: translateY(-50%);
}
.btn-prize, .btn-rule{
  width: .42rem;
  height: 1.45rem;
  background-position: -5.58rem 0;
}
.btn-rule{
  background-position: -5.06rem 0;
  margin-top: .15rem;  
}
.side-ball{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.side-like, .side-package{
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.side-like{
  background-image: url('../img/side-like.png');
}
.side-package{
  background-image: url('../img/side-package.png');
  position: relative;
}
.side-package-return::after{
  content: '回归\A礼包';
  white-space: pre;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  width: .96rem;
  height: 1.02rem;
  padding-top: .14rem;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(151,35,5,.98) 0,rgba(112,21,4,.96) 70%,rgba(85,14,0,.88) 100%);
  color: #ffe3a0;
  font: bold .32rem/.36rem var(--font-kaiti);
  text-align: center;
  text-shadow: 0 .02rem .04rem #6d0000;
}

.main{
  padding-top: 1rem;
}
.page{
  position: relative;
  display: none;
  background-repeat: no-repeat;
  background-size: 7.5rem auto;
}
.page.on{
  display: block;
}
#home{
  background-image: url('../img/home.jpg');
}
.part0{
  padding-top: 6.18rem;
  height: 15.61rem;
}
.certification,.identity{
  width: 7.1rem;
  height: 4.55rem;  
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.certification{
  background: url('../img/certification.png') no-repeat center / cover;
}
.btn-verify{
  font-size: 0;
  width: 2.61rem;
  height: .95rem;
  margin: 3.32rem auto 0;
  background: url('../img/btn-verify.png') no-repeat center / cover;
}
.twobtn{
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
}
.btn-light, .btn-daily{
  width: 3.32rem;
  height: .79rem;
  background-position: 0 -.89rem;  
  margin: 0 .1rem;
}
.btn-light{
  transition: filter .2s ease, opacity .2s ease;
}
.btn-light.is-disabled{
  -webkit-filter: grayscale(100%) brightness(65%);
  filter: grayscale(100%) brightness(65%);
  opacity: .75;
  cursor: default;
  pointer-events: none;
}
.btn-daily{
  background-position: 0 0;
}
.identity{
  display: none;
  transition: filter .2s ease, opacity .2s ease;
}
.identity.is-dim{
  -webkit-filter: grayscale(100%) brightness(65%);
  filter: grayscale(100%) brightness(65%);
  opacity: .78;
}
.identity-name{
  position: absolute;
  top: 1.45rem;
  left: 3.7rem;
  color: #fff7ce;
  font: .36rem / .5rem var(--font-kaiti);
  text-shadow: 0 .2rem .12rem #6d0000;
}
.identity-info{
  width: 100%;
  display: flex;
  position: absolute;
  top: 3.17rem;
  font-size: .32rem;
  line-height: .4rem;
  color: #ffcc00;
  left: 0;
  text-align: center;
  padding: 0 .15rem;
}
.identity-info p:nth-child(1){
  width: 1.58rem;
}
.identity-info p:nth-child(2){
  margin-left: .45rem;
  width: 2.6rem;
}
.identity-info p:nth-child(3){
  width: 2.15rem;
}
.daily{
  width: 7.15rem;
  height: 1.72rem;
  background: url('../img/daily.png') no-repeat center / cover;
  margin: .1rem auto 0;
  display: flex;
  align-items: center;
}
.daily .dl{
  width: 5.74rem;
  padding-left: 1.7rem;
  font-size: .24rem;
  color: #d1aa8f;
}
.daily .dl b{
  font-size: .26rem;
  color: var(--c-text);
  display: inline-block;
  margin-bottom: .1rem;
}
.daily span{
  color: #ffcc00;
}

.part1{
  height: 8.38rem;
}
.pt{
  padding-top: .68rem;
  text-align: center;
  color: #ffce8e;
  line-height: .56rem;
}
.tasks{
  margin: .35rem .3rem 0; 
  border-top: 1px solid #5e4200;
}
.tasks li{
  border-bottom: 1px solid #5e4200;
  padding: .1rem 0;
  display: flex;
  align-items: center;
}
.tasks li .ico{
  width: .8rem;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  font-size: .58rem;
  color: #ffa200;
  background: url('../img/tasks-ico.jpg') no-repeat center / cover;
  margin-right: .1rem;
}
.tasks .bd{
  font-size: .22rem;
  color: #ffdcaa;
}
.tasks .bd b{
  font-size: .34rem;
  color:#ffcc7b;
  display: inline-block;
  margin-bottom: .1rem;
}
.tasks .actions{
  flex: 0 0 1.48rem;
  width: 1.48rem;
}
.btn-share, .btn-get,.btn-finish{
  width: 1.48rem;
  height: .54rem;
  background-position: 0 -2.54rem;
}
.tasks .btn-recharge{
  width: 1.48rem;
  height: .54rem;
  margin: 0;
  font-size: 0;
  background: url('../img/btn-complete.png') no-repeat center / 1.48rem .54rem;
}
.btn-get{
  background-position: -1.58rem -2.54rem;
  margin-top: .07rem;
}

.btn-finish{
  background-position: -4.08rem -1.78rem;
}

.part2{
  min-height: 21.9rem;
}
.posters{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.2rem;
  margin: .22rem .3rem 0;
  padding-top: .3rem;
  border-top: 1px solid #614300;
}
.posters li{
  height: 4.35rem;
  text-align: center;
  font-size: .24rem;
  color: #d3c7b4;
}
.poster{
  position: relative;
  width: 3.33rem;
  height: 3.33rem;
  margin: 0 auto .1rem;
}
/* 章节未开启（未开始/已结束）时海报压暗并盖一层状态文字，开启期间恢复亮色；
   状态由 app.js 按接口下发切换（.is-dim / .poster-soon 文案）。 */
.posters li.is-dim .poster img{
  -webkit-filter: brightness(.45) grayscale(.25);
  filter: brightness(.45) grayscale(.25);
}
.poster-soon{
  display: none;
  position: absolute;
  left: 0;
  top: 1.32rem;
  width: 100%;
  text-align: center;
  font-size: .28rem;
  line-height: .28rem;
  color: #d3c7b4;
}
.posters li.is-dim .poster-soon{
  display: block;
}
.posters li h3{
  line-height: .5rem;
  font-size: .28rem;
  font-weight: bold;
  color: #ffce8e;
}
.suggest{
  width: 7rem;
  height: 5.03rem;
  background: url('../img/suggest.png') no-repeat center / cover;
  margin: .24rem auto 0;
  overflow: hidden;
}
.suggest textarea{
  font-family: 'Source Han Sans CN', '思源黑体', sans-serif;
  width: 5.55rem;
  height: 1.88rem;
  background: #4c3c32;
  color: #ffffff;
  padding: 0.173rem;
  margin: 1.54rem 0 0 .79rem;
  resize: none;
}
.suggest textarea::placeholder{
  color: #ffffff;
}
.btn-submit{
  width: 3.98rem;
  height: .66rem;
  background-position: 0 -1.78rem;
  margin: .15rem auto 0;
}
.consult{
  margin: .44rem .6rem 0;
  border-top: 1px solid #5d4200;
  padding: .6rem 0;
  text-align: center;
}
.qrcode{
  padding: .2rem 0 0;
  height: 2.83rem;
  background: url('../img/qr-bg.png') no-repeat center / 3.63rem auto;
  margin-bottom: .2rem;
}
.qrcode img{
  display: block;
  width: 2.54rem;
  margin: 0 auto;
}

#rank{
  background-color: #371400;
  padding-top: 3.96rem;
  background-image: url('../img/rank.jpg');
}
.rank-title{
  position: absolute;
  top: .42rem;
  left: 0;
  width: 100%;
  text-align: center;
  color: #f5ff92;
  font-size: .26rem;
  line-height: .34rem;
  font-weight: bold;
  text-shadow: -1px -1px 0 #a76b0e,1px -1px 0 #a76b0e,-1px 1px 0 #a76b0e, 1px 1px 0 #a76b0e;
}
.rank-tip{
  position: absolute;
  top: 2.59rem;
  left: 0;
  width: 100%;
  text-align: center;
  color: #ffd2c4; 
  line-height: .34rem;
}
.ranklist{
  width: 6.87rem;
  margin: 0 auto;
}
.ranklist li,.my-rank{
  width: 6.87rem;
  height: 1.31rem;
  display: flex;
  align-items: center;
  background: url('../img/ranklist.jpg') no-repeat center / 6.78rem 1.31rem;
  margin-bottom: .15rem;
  color: #ffdcaa;
}
.ranklist li .rank{
  width: 1.75rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;  
  background-repeat: no-repeat;
  background-size: 1.16rem auto;
  background-position: center;
  overflow: hidden;
}
.ranklist li.rank-empty{
	justify-content: center;
}
.ranklist li .rank span,
.my-rank .rank span{
  font-size: .47rem;
  color: #ffe400;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  min-width: .58rem;
  margin-right: .06rem;
}
.ranklist li .rank i{
  display: block;
  border-radius: 50%;
  font-style: normal;
  width: .8rem;
  line-height: .8rem;
  text-align: center;
  color: #ffa200;
  background-color: #541400;
}
.ranklist li:nth-child(1) .rank{
  background-image: url('../img/rank1.png');
  font-size: 0;
  text-indent: -9999px;
}
.ranklist li:nth-child(2) .rank{
  background-image: url('../img/rank2.png');
  font-size: 0;
  text-indent: -9999px;
}
.ranklist li:nth-child(3) .rank{
  background-image: url('../img/rank3.png');
  font-size: 0;
  text-indent: -9999px;
}
.ranklist li h3,.my-rank h3{
  font-size: .3rem;
  color: #ffcc7b;
  line-height: 1.4;
  font-weight: bold;
  max-width: 1.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
}
.ranklist li .rank-identity,.my-rank .rank-identity{
  width: 1.15rem;
  flex: 0 0 1.15rem;
  padding: 0 .05rem;
  margin: 0;
  overflow: visible;
  position: static;
  display: block;
  color: #ffd78b;
  font-size: .2rem;
  line-height: .28rem;
  text-align: center;
  word-break: break-all;
}
.ranklist li .num,.my-rank .num{
  width: 1.9rem;
  padding: 0 .2rem;  
  font-size: .24rem;
  text-align: center;
}
.my-rank{
  background-image: url('../img/my.png');
  margin: 0 auto;
}
.my-rank .rank{
  justify-content: space-between;
  display: flex;
  min-width:1.9rem;
  margin-right: .2rem;
  font-size: .22rem;
  color: #ffdcaa;
  padding-left: .28rem;
}
.my-rank .rank span.is-unranked{
  min-width: auto;
  margin-right: 0;
  font-size: .3rem;
  line-height: 1;
}

.reward{
  background: url('../img/rt.png') no-repeat center top / 1.77rem auto;
  margin: .35rem .3rem 0;
  padding: .62rem 0 .98rem;
}
.reward .rt{
  text-align: center;
  color: #ffce8e;
}
.rewardlist{
  border-top: 1px solid #5e4200;
  margin: .3rem 0;
}
.rewardlist li{
  display: flex;
  align-items: center;
  border-bottom: 1px solid #5e4200;
  padding: .2rem 0;
}
.rewardlist li span{
  min-width: 1.2rem;
  color: #ffd200;
  text-align: center;
  margin-right: .2rem;
}
.rewardlist li .ico{
  width: 1.01rem;
  height: 1.03rem;
  margin-right: .2rem;
}
.rewardlist li p{
  flex: 1;
  font-size: .3rem;
  line-height: .42rem;
  color: #d8ce9f;
}

.nav{
  position: fixed;
  bottom: 0;
  width: 7.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-item{
  display: block;
  width: 3.75rem;
  height: .92rem;
  font-size: 0;
  background: url('../img/nav.jpg') no-repeat -999rem / 7.5rem 1.86rem;
}
.nav-item:nth-child(1){
  background-position: 0 0;
}
.nav-item:nth-child(2){
  background-position: -3.75rem 0;
}
.nav-item.cur{
  background-position-y: -.94rem;
}
.gray{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}


.twpop{
  z-index: 100;
  position: relative;
}
.twpop .twpop-main{
  background: url('../img/pop.png') no-repeat center / cover;
  color: #ffce8e;
  font-size: .24rem;
  height: 4.23rem;
  border: none; 
  width: 6.06rem;
  max-width: 6.06rem;
}
.twpop-load .twpop-main{
  height: auto;
}
.twpop .twpop-title{
  border: none;
  padding: .5rem 0 0;
  font-size: .3rem;
  line-height: .48rem;
  color: #ffce8e;
  font-weight: normal;
}
.twpop .twpop-cont{
  padding: .2rem;
}
.pop-login .twpop-cont{
  padding: .1rem .2rem;
  color: #dbcaa8;
  font-size: .22rem;
}
.twpop .twpop-foot{
  margin-top: .2rem;
}
.twpop .twpop-btn{
  padding: 0 .4rem;
  font-size: .3rem; 
  line-height: .58rem;
  border: 1px solid #b0853c;
  color: #f6ffa0; 
  background-image: linear-gradient(top,#9f2900,#f79500);
  background-image: -webkit-linear-gradient(top,#9f2900,#f79500);
}
.twpop .twpop-close{
  top: .16rem;
  right: .14rem;
  width: .5rem;
  height: .5rem;
  background: url('../img/close.png') no-repeat center / .47rem;
}
.twpop .twpop-from-bd{
	background-color:#fff;
}
.twpop-tips .twpop-diy-content,
.twpop-tc .twpop-diy-content{
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.twpop-tc .twpop-diy-content{
  height: 2rem;
}
.twpop-tips  .twpop-foot, 
.pop-login .twpop-foot{
  margin-top: 0;
}
.twpop-tips .twpop-btn, 
.twpop-tc .twpop-btn,
.pop-login .twpop-btn{
  padding: 0;
  font-size: .3rem; 
  width: 4.66rem;
  height: .69rem;
  line-height: .69rem;
  border-radius: 0;
  border: none;
  color: #f6ffa0; 
  background: url('../img/btn-pop.jpg') no-repeat center / 100%;
}
.pop-login .twpop-btn{
  margin-top: .1rem;
  font-weight: bold;
}
.prize-scroll{
  max-height: 2.71rem;
}
.prize-list{  
  display: table;
  width: 100%;
  border-collapse: collapse;
  color: #dbcaa8;
}
.prize-list p{
  display: table-row;
}
.prize-list p span{
  display: table-cell;
  text-align: center;
  padding: .1rem .04rem;
  border: 1px solid #9b7348;
  font-size: .2rem;
  word-break: break-all;
}
.prize-list p:nth-child(1) span{
  background: #4a2d00;
  font-weight: bold;
}
.prize-list p:not(:nth-child(1)) span{
  background: rgba(0,0,0,.6);
  color: #dbcaa8;
}

.pop{
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,.66);
  z-index: 100;
  display: none;
}
.pop .close{
  position: absolute;
  top: .2rem;
  right: .2rem;
  width: .5rem;
  height: .5rem;
  background: url('../img/close.png') no-repeat center / .47rem;
}
.pop-main{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 6.88rem;
  overflow: hidden;
}
.pop-share .pop-main{
  height: 12.6rem;
  max-height: 12.6rem;  
}
.btn-copy{
  width: 2.92rem;
  height: .62rem;
  background-position: 0 -3.18rem;
  position: absolute;
  left: 50%;
  margin-left: -1.46rem;
  bottom: .7rem;
  cursor: pointer;
}
.pop-invite .close{
  top: .06rem;
  right: .06rem;
}
.pop-invite .pop-main,
.pop-rule .pop-main{
  height: 9rem;
  max-height: 9rem;
}
.invite-name{
  font-family: var(--font-kaiti);  
  font-size: .49rem;
  color: #fff8ce;
  line-height: 1;
  position: absolute;
  left: 3.55rem;
  top: 2.8rem;
  text-shadow: 0 .02rem .04rem #8c340e;
}
.invite-content{
  width: 100%;
  position: absolute;
  left: 0;
  top: 4.67rem;
  text-align: center;
  font-size: .24rem;
}
.invite-info{
  height: .46rem;
  display: flex;
  font-size: .32rem;
  color: #ffcc00;
}
.invite-info p:nth-child(1){
  width: 1.66rem;
}
.invite-info p:nth-child(2){
  margin-left: .46rem;
  width: 2.5rem;
}
.invite-info p:nth-child(3){
  width: 2.24rem;
}
.btn-like{
  display: block;
  width: 6.28rem;
  height: .86rem;
  margin: .78rem auto .26rem;
  background: url('../img/btn-like.jpg') no-repeat center / cover;
}
.scroll::-webkit-scrollbar,
.prize-scroll::-webkit-scrollbar{
  display: block;
  width: .1rem;

}
.scroll::-webkit-scrollbar-thumb,
.prize-scroll::-webkit-scrollbar-thumb{
  background: #644305;
  border-radius: .05rem;
}
.pop-rule .pop-main{
  background: url('../img/rule.jpg') no-repeat center / cover;
}
.rule-content{
  margin: 1.4rem .1rem 0 .3rem;
  padding-right: .2rem;
  overflow-y: auto;
  height: 7.2rem;
  font-size: .22rem;
  line-height: 1.8;
  color: #dbcaa8;
}
.rule-content .rt{
  color: #ffc600;
  font:.3rem / .48rem 'fzcysong','Source Han Serif SC';
  border-bottom: 1px solid #614700;
  margin-bottom: .1rem;
}
.rule-content li{
  position: relative;
  padding-left: .4rem;
}
.rule-content li i{
  position: absolute;
  left: 0;
  top: 0;
  font-size: .22rem;
  font-style: normal;
  width: .38rem;
  text-align: center;
}
.rule-content table{
  width: 100%;
  margin: .1rem 0 .1rem -.3rem;
  border-collapse: collapse;
  table-layout: fixed;
  background: #150500;
}
.rule-content th{
  background: #492d00;
  font-weight: bold;
  padding: .08rem .04rem;
  border: 1px solid #9b7348;
  text-align: center;
  font-size: .2rem;
  word-break: break-all;
}
.rule-content td{
  padding: .08rem .06rem;
  border: 1px solid #9b7348;
  font-size: .2rem;
  text-align: center;
  line-height: 1.4;
  word-break: break-all;
}
.rule-content td:nth-child(2){
  text-align: left;
}
.rule-content th:nth-child(1),
.rule-content td:nth-child(1){
  width: 16%;
}
.rule-content th:nth-child(2),
.rule-content td:nth-child(2){
  width: 46%;
}
.rule-content th:nth-child(3),
.rule-content td:nth-child(3){
  width: 19%;
}
.rule-content th:nth-child(4),
.rule-content td:nth-child(4){
  width: 19%;
}


.pop-scroll{
  height: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background-color: #200a00;
  border: .02rem solid #ab5400;
}
.btn{
  display: inline-block;
  border: .02rem solid #c4a154;
  min-width: 1rem;
  line-height: .44rem;
  height: .44rem;
  text-align: center;
  padding: 0 .13rem;
  background-image: linear-gradient(top,#9f2900,#f79500);
  background-image: -webkit-linear-gradient(top,#9f2900,#f79500);
  margin: 0 .2rem;
}
.btn i{
  font-style: normal;
  font-size: .23rem;
  background: linear-gradient(#f4ff64, #f8ffc6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-end{
  border-color: #d9d6cb;
  background-image: linear-gradient(top,#755656,#7e7c7c);
  background-image: -webkit-linear-gradient(top,#755656,#7e7c7c);
}
.btn-end i{
  background: linear-gradient(#05ff0d, #89ff92);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.package{
  width: 6.84rem;
  font-size: .22rem;
  color: #ffdcaa;
  background: url('../img/pop-package.jpg') no-repeat center top / 6.84rem auto;
}
.package .banner{
  height: 3.85rem;
  margin-bottom: .4rem;
}
.frame{
  padding-bottom: .4rem;
}
.frame .text{
  text-align: center;
}
.frame .qrcode{
  margin-top: -.4rem;
}
.frame-title{
  text-align: center;
  height: 1.05rem;
}
.frame-title h4{
  display: inline-block;
  position: relative;
  font-size: .4rem;
  line-height: .4rem;
  font-family: 'fzcysong', 'Source Han Serif SC', serif;
  background: linear-gradient(#ffb861, #ffdcab);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.frame-title h4::before,
.frame-title h4::after{
  content: '';
  width: .96rem;
  height: .18rem;
  background: url('../img/tit-line.png') no-repeat center / cover;
  position: absolute;
  top: 50%;
  margin-top: -.09rem;
}
.frame-title h4::before{
  left: -1.1rem;
}
.frame-title h4::after{
  right: -1.1rem;
  transform: rotate(180deg);
}
.frame-title p{
  margin-top: .15rem;
  color: #ffdcaa;
  line-height: .26rem;
}
.frame-box{
  border: .02rem solid #7d4407;
  margin: 0 .26rem;
  background-color: rgba(0,0,0,.6);
}
.frame-box  h3{
  font-weight: bold;
  font-size: .3rem;
  color: #ffcc7b;
  margin-bottom: .1rem;
}
.hg-box{
  display: flex;
  align-items: center;
  height: 1.74rem;
  padding-left: 2rem;
  background-image: url('../img/hg-box.png');
  background-size: 2.14rem auto;
  background-repeat: no-repeat;
  background-position: left bottom;
}
.frame-tips{
  background: #9f2f00;
  text-align: center;
  line-height: .3rem;
  padding: .15rem;
}

.frame1{
  height: 3.2rem;
}

.frame2{
  height: 7.85rem;
}

.lh-list{
  height: 5.4rem;
}
.lh-list li,.sj-list li{
  display: flex;
  align-items: center;
  border-bottom: 1px solid #5b3f00;
  padding: .22rem 0;
}
.lh-list li:last-child, .sj-list li:last-child{
  border-bottom: none;
}
.lh-list .ico,.sj-list .ico{
  width: 1.08rem;
  height: 1.08rem;
  line-height: 1.08rem;
  background: url('../img/ico.png') no-repeat center / contain;
  margin: 0 .15rem;
  font-size: .6rem;
  color: #ffa200;
  text-align: center;
}
.frame3{
  height: 5.68rem;
}
.sj-list{
  max-height: none;
}
.sj-list li{
  box-sizing: border-box;
  min-height: 1.05rem;
  padding: .15rem .08rem;
}
.sj-list .ico{
  flex: 0 0 .75rem;
  width: .75rem;
  height: .75rem;
  line-height: .75rem;
  font-size: .4rem;
}
.sj-list .bd{
  min-width: 0;
  padding-right: .06rem;
}
.sj-list li h3{
  font-size: .26rem;
}
.sj-list li p{
  line-height: .28rem;
  overflow-wrap: anywhere;
}
.sj-list .btn{
  flex: 0 0 auto;
  margin: 0 .08rem;
  white-space: nowrap;
}
.frame4{
  height: 5.2rem;
}
.rebate{
  position: relative;
  height: 3.7rem;
  overflow: hidden;
}
.rebate .cur-recharge{
  position: absolute;
  color: #ffdcaa;
  top: .2rem;
  left: .12rem;
}
.rebate .btn-recharge{
  position: absolute;
  top: .17rem;
  right: .13rem;
  margin: 0;
}
.frame5{
  padding-bottom: .5rem;
  text-align: center;
}
.frame5 .frame-title{
  height: .6rem;
}
.progress{
  width: 6.1rem;
  height: 1.8rem;
  background-image: url('../img/progress.png');
  background-repeat: no-repeat;
  background-size: 6.06rem .23rem;
  background-position: center .9rem;
  margin: .8rem auto 0;
  display: flex;
  justify-content: center;
}
.progress li{
  min-width: .8rem;
  margin: 0 .1rem;
  position: relative;
  text-align: center;
}
.progress li::after{
  content: '';
  position: absolute;
  top: .92rem;
  left: 50%;
  transform: translateX(-50%);
  width: .22rem;
  height: .22rem;
  background: url('../img/progress-dian.png') no-repeat center top / .22rem auto;
}
.progress li.cur::after{
  background-position: center bottom;
}
.progress li .ico{
  width: .8rem;
  height: .8rem;
  margin: 0 auto .46rem;
}
.progress li p{
  font-weight: bold;
  background: linear-gradient(#d1a265, #fee7ba);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-reward{
  display: block;
  width: 2.26rem;
  height: .7rem;
  background-position: -3.16rem -2.54rem;
  margin: 0 auto;
}  

.pop-server{
  width: 6.06rem;
  height: 7.7rem;
  background: url('../img/pop.png') no-repeat center / 100% 100%;
  overflow: hidden;
  padding: .3rem .1rem;
  text-align: center;
  font-size: .22rem;
}
.service-ico{
  width: 1.92rem;
  height: 1.92rem;
  margin: 0 auto .1rem;
  display: block;
}
.service-title{
  font-size: .3rem;
  line-height: .44rem;
  color: #ffce8e;
}
.service-text{
  margin-bottom: .3rem;
}
/* 累充档位区分未达成、可领取与已领取。 */
.rebate .progress{
  height: 2.08rem;
}
.pay-task-status{
  display: block;
  margin-top: .04rem;
  font-size: .2rem;
  line-height: .28rem;
  color: #b7a58c;
}
.progress li.is-claimable .pay-task-status{
  color: #ffe29c;
}
.progress li.is-claimed .pay-task-status{
  color: #a5d49a;
}
.rebate .btn-reward.is-disabled{
  box-sizing: border-box;
  background: #382516;
  border: .02rem solid #957044;
  border-radius: .08rem;
  color: #d9bf94;
  font-size: .26rem;
  line-height: .66rem;
  text-align: center;
  cursor: default;
}