html,
body {
  width: 100%;
  background: #FFE1C5;
}

.back {
  position: fixed;
  top: 0.93333rem;
  left: 0.45333rem;
  z-index: 99;
  width: 0.82667rem;
  height: 0.82667rem;
}

.back img {
  width: 100%;
  height: 100%;
}

.back p {
  color: #fff;
  font-size: 0.42667rem;
  position: absolute;
  width: 9rem;
  left: 0;
  top: 0;
  height: 100%;
  text-align: center;
  line-height: 0.82667rem;
}

.header {
  width: 10rem;
  height: 8.69333rem;
  background: url(../images/header.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 0;
  position: relative;
}

.header .h3 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3.25333rem;
  height: 1.36rem;
  width: 8.6rem;
}

.header .rule_rule {
  width: 0.77333rem;
  height: 0.77333rem;
  position: absolute;
  top: 4.77333rem;
  right: 0.4rem;
}

.header .text {
  width: 5.33333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5.06667rem;
  background: url(../images/header_text.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  color: #FFF6E5;
  font-size: 0.37333rem;
  font-weight: 400;
}

.header .text b {
  font-size: 0.56rem;
  font-weight: 600;
  vertical-align: middle;
}

.header .text img {
  display: inline-block;
  width: 0.58667rem;
  height: 0.58667rem;
  vertical-align: middle;
}

.bg {
  width: 100%;
  height: 48.10667rem;
  background: url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: -0.56rem auto 0;
  overflow: hidden;
}

.bg .myInfo {
  width: 9.2rem;
  height: 4.06667rem;
  background: url(../images/myInfo.png) no-repeat;
  background-size: 100% 100%;
  margin: 1.12rem auto 0.26667rem;
  position: relative;
}

.bg .myInfo .tx {
  width: 1.6rem;
  height: 1.6rem;
  border: 0.02667rem solid #F55E3E;
  position: absolute;
  left: 0.53333rem;
  top: 0.73333rem;
  border-radius: 50%;
}

.bg .myInfo p {
  color: #FE3312;
  font-size: 0.37333rem;
  position: absolute;
  top: 1.34667rem;
  left: 2.37333rem;
  font-weight: 400;
}

.bg .myInfo .invitationCode {
  position: absolute;
  right: 1.45333rem;
  top: 1.18667rem;
  font-size: 0.64rem;
  font-weight: normal;
  color: #FE3312;
}

.bg .myInfo .skip {
  position: absolute;
  left: 0.53333rem;
  bottom: 0.66667rem;
  width: 3.92rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  color: #FE3312;
  font-size: 0.24rem;
  font-weight: 400;
  background: url(../images/myInfoBut.png) no-repeat;
  background-size: 100% 100%;
}

.bg .myInfo .skip img {
  display: inline-block;
  width: 0.37333rem;
  height: 0.37333rem;
  vertical-align: middle;
}

.bg .myInfo .copy {
  position: absolute;
  right: 0.53333rem;
  bottom: 0.66667rem;
  width: 3.92rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  color: #FE3312;
  font-size: 0.24rem;
  font-weight: 400;
  background: url(../images/myInfoBut.png) no-repeat;
  background-size: 100% 100%;
}

.bg .myInfo .copy img {
  display: inline-block;
  width: 0.37333rem;
  height: 0.37333rem;
  vertical-align: middle;
}

.bg .myIncome {
  width: 9.2rem;
  height: 1.33333rem;
  position: relative;
  margin: 0 auto 0.26667rem;
  background: url(../images/myIncomeBg.png) no-repeat;
  background-size: 100% 100%;
}

.bg .myIncome img {
  position: absolute;
  width: 0.58667rem;
  height: 0.58667rem;
  top: 50%;
  transform: translateY(-50%);
  right: 0.37333rem;
}

.bg .myIncome p {
  color: #FFFFFF;
  font-size: 0.48rem;
  font-weight: 500;
  position: absolute;
  left: 0.26667rem;
  top: 50%;
  transform: translateY(-50%);
}

.bg .myIncome b {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.2rem;
  color: #FE3312;
  font-size: 0.48rem;
}

.bg .incomeBox {
  width: 9.2rem;
  height: 10.66667rem;
  background: #fff;
  border-radius: 0.26667rem;
  border: 0.05333rem solid #FE7835;
  margin: 0 auto 0.26667rem;
  position: relative;
}

.bg .incomeBox .tab {
  width: 8.66667rem;
  height: 1.92rem;
  display: flex;
  justify-content: space-between;
  margin: 0.18667rem auto 0.26667rem;
}

.bg .incomeBox .tab div {
  width: 4.21333rem;
  height: 100%;
  text-align: center;
  background: url(../images/tab.png) no-repeat;
  background-size: 100% 100%;
}

.bg .incomeBox .tab div p {
  color: #FFFFFF;
  font-size: 0.32rem;
  font-weight: 500;
  margin-top: 0.46667rem;
  margin-bottom: 0.24rem;
}

.bg .incomeBox .tab div span {
  color: #fff;
  font-size: 0.37333rem;
  font-weight: 400;
}

.bg .incomeBox .tab div span img {
  display: inline-block;
  vertical-align: middle;
  width: 0.58667rem;
  height: 0.58667rem;
}

.bg .incomeBox .tab .act {
  background: url(../images/tabAct.png) no-repeat;
  background-size: 100% 100%;
}

.bg .incomeBox .tab .act p {
  margin-top: 0.36rem;
}

.bg .incomeBox .sTab {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 0rem;
}

.bg .incomeBox .sTab div {
  width: 50%;
  height: 100%;
  text-align: center;
  color: #333333;
  font-size: 0.26667rem;
  font-weight: 400;
}

.bg .incomeBox .sTab .tab1 {
  background: url(../images/sTab1.png) no-repeat;
  background-size: 100% 100%;
  color: #FE3312;
}

.bg .incomeBox .sTab .tab2 {
  background: url(../images/sTab2.png) no-repeat;
  background-size: 100% 100%;
  color: #FE3312;
}

.bg .incomeBox .tableTitle {
  width: 99.9%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  position: absolute;
  top: 3.17rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: #fff;
}

.bg .incomeBox .tableTitle div {
  width: 25%;
  height: 0.66667rem;
  line-height: 0.66667rem;
  text-align: center;
  color: #333333;
  font-size: 0.26667rem;
  font-weight: 400;
}

.bg .incomeBox ul {
  width: 100%;
  height: 7.4rem;
  margin: 0 auto 0;
  overflow-y: scroll;
  position: relative;
}

.bg .incomeBox ul::-webkit-scrollbar {
  display: none;
}

.bg .incomeBox ul .top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.bg .incomeBox ul .top div {
  width: 25%;
  height: 0.66667rem;
  line-height: 0.66667rem;
  text-align: center;
  color: #333333;
  font-size: 0.26667rem;
  font-weight: 400;
}

.bg .incomeBox ul li {
  width: 100%;
  height: 0.66667rem;
  margin-bottom: 0.24rem;
  display: flex;
  justify-content: space-between;
}

.bg .incomeBox ul li:nth-child(1) {
  margin-top: 0.66667rem;
}

.bg .incomeBox ul li div {
  overflow: hidden;
  width: 25%;
  text-align: center;
  color: #666666;
  font-size: 0.24rem;
  font-weight: 400;
  line-height: 0.66667rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bg .incomeBox ul li div img {
  display: inline-block;
  vertical-align: middle;
  width: 0.42667rem;
  height: 0.42667rem;
}

.bg .incomeBox ul li .act {
  line-height: 0rem;
}

.bg .incomeBox ul li .act p {
  margin-top: 0.2rem;
  margin-bottom: 0.30667rem;
}

.bg .rule {
  width: 9.2rem;
  height: 18.90667rem;
  border-radius: 0.26667rem;
  border: 0.05333rem solid #FE7835;
  margin: 0 auto 0.53333rem;
  position: relative;
  background: #fff;
}

.bg .rule .title {
  width: 4.26667rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  color: #fff;
  font-size: 0.48rem;
  font-weight: 500;
  background: url(../images/titleBg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.53333rem;
}

.bg .rule .rule1 {
  position: relative;
  width: 8.66667rem;
  height: 4.29333rem;
  margin: 0 auto 0.26667rem;
  background: url(../images/rule1.png) no-repeat;
  background-size: 100% 100%;
}

.bg .rule .rule1 h3 {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.26667rem;
  color: #fff;
  font-size: 0.26667rem;
  font-weight: 500;
}

.bg .rule .rule1 .text1 {
  position: absolute;
  left: 1.97333rem;
  top: 1.13333rem;
  color: #333333;
  font-size: 0.24rem;
  font-weight: 400;
}

.bg .rule .rule1 .text2 {
  position: absolute;
  left: 5.38667rem;
  top: 1.13333rem;
  color: #333333;
  font-size: 0.24rem;
  font-weight: 400;
}

.bg .rule .rule1 .rule1_in {
  width: 5.13333rem;
  height: 1.6rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.73333rem;
}

.bg .rule .rule1 .sp1 {
  position: absolute;
  left: 1.98667rem;
  height: 0.42667rem;
  line-height: 0.42667rem;
  bottom: 0.4rem;
  color: #FE3312;
  font-size: 0.24rem;
  font-weight: 500;
}

.bg .rule .rule1 .sp1 img {
  display: inline-block;
  width: 0.42667rem;
  height: 0.42667rem;
  vertical-align: middle;
}

.bg .rule .rule1 .sp2 {
  position: absolute;
  right: 1.98667rem;
  height: 0.42667rem;
  line-height: 0.42667rem;
  bottom: 0.4rem;
  color: #FE3312;
  font-size: 0.24rem;
  font-weight: 500;
}

.bg .rule .rule1 .sp2 img {
  display: inline-block;
  width: 0.42667rem;
  height: 0.42667rem;
  vertical-align: middle;
}

.bg .rule .rule2 {
  width: 8.66667rem;
  height: 11.74667rem;
  position: relative;
  margin: 0 auto 0.4rem;
  background: url(../images/rule2.png) no-repeat;
  background-size: 100% 100%;
}

.bg .rule .rule2 h3 {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.26667rem;
  color: #fff;
  font-size: 0.26667rem;
  font-weight: 500;
}

.bg .rule .rule2 .text1 {
  color: #333333;
  font-size: 0.24rem;
  font-weight: 5.33333rem;
  position: absolute;
  left: 0.45333rem;
  top: 1.13333rem;
}

.bg .rule .rule2 .text2 {
  color: #333333;
  font-size: 0.24rem;
  font-weight: 5.33333rem;
  position: absolute;
  left: 3.6rem;
  top: 1.13333rem;
}

.bg .rule .rule2 .text3 {
  color: #333333;
  font-size: 0.24rem;
  font-weight: 5.33333rem;
  position: absolute;
  left: 6.86667rem;
  top: 1.13333rem;
}

.bg .rule .rule2 .rule_2in {
  width: 8.13333rem;
  height: 1.6rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.73333rem;
}

.bg .rule .rule2 .p1 {
  width: 100%;
  color: #FE3312;
  font-size: 0.26667rem;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3.86667rem;
  text-align: center;
}

.bg .rule .rule2 .p2 {
  width: 100%;
  color: #FE3312;
  font-size: 0.26667rem;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8.28rem;
  text-align: center;
}

.bg .rule .rule2 .table1 {
  width: 8.13333rem;
  height: 3.24rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4.50667rem;
}

.bg .rule .rule2 .table2 {
  width: 8.13333rem;
  height: 2.49333rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8.85333rem;
}

.bg .rule .rule2 .table1_1 {
  width: 8.13333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 4.56rem;
  z-index: 2;
}

.bg .rule .rule2 .table1_1 div {
  width: 50%;
  text-align: center;
  color: #FF4627;
  font-size: 0.24rem;
  font-weight: 500;
}

.bg .rule .rule2 .table1_2 {
  width: 8.13333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5.4rem;
  z-index: 2;
}

.bg .rule .rule2 .table1_2 div {
  width: 50%;
  text-align: center;
  color: #FF4627;
  font-size: 0.24rem;
  font-weight: 400;
}

.bg .rule .rule2 .table1_3 {
  width: 8.13333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6.2rem;
  z-index: 2;
}

.bg .rule .rule2 .table1_3 div {
  width: 50%;
  text-align: center;
  color: #FF4627;
  font-size: 0.24rem;
  font-weight: 400;
}

.bg .rule .rule2 .table1_4 {
  width: 8.13333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6.95rem;
  z-index: 2;
}

.bg .rule .rule2 .table1_4 div {
  width: 50%;
  text-align: center;
  color: #FF4627;
  font-size: 0.24rem;
  font-weight: 400;
}

.bg .rule .rule2 .table2_1 {
  width: 8.13333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8.9rem;
  z-index: 2;
}

.bg .rule .rule2 .table2_1 div {
  width: 50%;
  text-align: center;
  color: #FF4627;
  font-size: 0.24rem;
  font-weight: 500;
}

.bg .rule .rule2 .table2_2 {
  width: 8.13333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 9.8rem;
  z-index: 2;
}

.bg .rule .rule2 .table2_2 div {
  width: 50%;
  text-align: center;
  color: #FF4627;
  font-size: 0.24rem;
  font-weight: 400;
}

.bg .rule .rule2 .table2_3 {
  width: 8.13333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10.6rem;
  z-index: 2;
}

.bg .rule .rule2 .table2_3 div {
  width: 50%;
  text-align: center;
  color: #FF4627;
  font-size: 0.24rem;
  font-weight: 400;
}

.bg .rule .wishingStar {
  width: 100%;
  text-align: center;
  color: #333333;
  font-size: 0.24rem;
  font-weight: 300;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.4rem;
}

.bg .rule .wishingStar b {
  color: #FE3312;
}

.bg .otherNotes {
  width: 4.26667rem;
  height: 0.8rem;
  line-height: 0.8rem;
  background: url(../images/titleBg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto 0.53333rem;
  text-align: center;
  color: #FFFFFF;
  font-size: 0.48rem;
  font-weight: 400;
}

.bg ul {
  width: 9.2rem;
  margin: 0 auto 0.70667rem;
}

.bg ul li {
  width: 100%;
  color: #666666;
  font-size: 0.24rem;
  font-weight: 400;
  line-height: 0.34rem;
}

.bg ul .title {
  color: #333333;
  font-size: 0.26667rem;
  font-weight: 500;
  margin-bottom: 0.24rem;
  margin-top: 0.26667rem;
}

.openShare {
  position: fixed;
  left: 0rem;
  bottom: 6.2rem;
  width: 1.6rem;
  height: 0.45333rem;
  line-height: 0.45333rem;
  background: linear-gradient(180deg, #FFAD50 0%, #FE3111 100%);
  border-radius: 0px 0.22667rem 0.22667rem 0px;
  text-align: center;
  color: #fff;
  font-size: 0.21333rem;
  display: none;
  z-index: 3;
}

.code {
  position: fixed;
  left: 0;
  bottom: 4.85rem;
  background: url(../images/codeBg.png) no-repeat;
  background-size: 100% 100%;
  width: 2.34667rem;
  height: 3.16rem;
  z-index: 3;
}

.code .rule_icon {
  width: 0.32rem;
  height: 0.32rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.code .p1 {
  position: absolute;
  color: #FFFFFF;
  font-size: 0.21333rem;
  position: absolute;
  left: 50%;
  transform: translateX(-47%);
  top: 0.24rem;
  width: 100%;
  text-align: center;
}

.code .p2 {
  position: absolute;
  color: #FFFFFF;
  font-size: 0.21333rem;
  position: absolute;
  left: 50%;
  transform: translateX(-47%);
  top: 0.66667rem;
  width: 100%;
  text-align: center;
}

.code .p2 .diamond {
  width: 0.32rem;
  height: 0.32rem;
  vertical-align: middle;
  display: inline-block;
}

.code .p2 b {
  font-size: 0.24rem;
  font-weight: 500;
  vertical-align: middle;
}

.code .codeImg {
  width: 1.17333rem;
  height: 1.17333rem;
  position: absolute;
  left: 50%;
  transform: translateX(-43%);
  top: 1.16rem;
}

.code .but {
  width: 1.52rem;
  height: 0.34667rem;
  line-height: 0.37333rem;
  border-radius: 0.34667rem;
  background: #fff;
  position: absolute;
  left: 0.50667rem;
  bottom: 0.24rem;
  text-align: center;
  color: #000;
  font-size: 0.24rem;
}