html, body {
  position: relative;
  width: 100%; }

body {
  background-color: #000;
  text-align: center; }

a, a:hover, a:active, a:link {
  text-decoration: none;
  color: #333; }

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -moz-user-focus: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

ol,
ul,
li {
  list-style: none outside none; }

input, select {
  outline: 0;
  border: none; }

img {
  border: 0;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-user-drag: none; }

.page {
  position: relative;
  display: inline-block;
  font-size: 0;
  width: 100%;
  max-width: 7.5rem;
  margin: 0 auto; }

.btn {
  display: inline-block;
  margin-left: 1.2rem; }
  .btn:first-child {
    margin-left: 0; }

.title {
  margin: 0 auto; }

.hide {
  display: none !important; }

.loading {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.7); }
  .loading .sword {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    margin: auto; }
    .loading .sword span {
      position: absolute;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: 50%; }
    .loading .sword :first-child {
      left: 0%;
      top: 0%;
      -webkit-animation: sword-one .3s linear infinite;
              animation: sword-one .3s linear infinite;
      border-bottom: 3px solid #EFEFFA; }
    .loading .sword :nth-child(2) {
      right: 0%;
      top: 0%;
      -webkit-animation: sword-two .5s linear infinite;
              animation: sword-two .5s linear infinite;
      border-right: 3px solid #EFEFFA; }
    .loading .sword :last-child {
      right: 0%;
      bottom: 0%;
      -webkit-animation: sword-three .9s linear infinite;
              animation: sword-three .9s linear infinite;
      border-top: 3px solid #EFEFFA; }

.role-info {
  position: absolute;
  top: 7.6rem;
  left: 0;
  right: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  padding: .1rem .3rem;
  min-width: 5rem;
  background: rgba(0, 0, 0, 0.7);
  font-size: .2rem;
  color: #f5642b;
  z-index: 2; }

.main-page {
  background-image: url("../imgs/bg-main.jpg?v=20211101");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  height: 46.09rem; }
  .main-page .invite-btns {
    margin-top: 11.52rem; }
    .main-page .invite-btns .invite {
      background-image: url("../imgs/btn-invite.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 2.06rem;
      height: 0.78rem; }
    .main-page .invite-btns .history {
      background-image: url("../imgs/btn-invite-history.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 2.06rem;
      height: 0.78rem; }
    .main-page .invite-btns .tonew {
      background-image: url("../imgs/btn-tonew.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 2.06rem;
      height: 0.78rem;
      position: absolute;
      top: 10.5rem;
      left: 0;
      right: 0;
      margin: auto; }
  .main-page .part-1 {
    height: 22.31rem; }
    .main-page .part-1 .title {
      background-image: url("../imgs/main-title-1.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 7.5rem;
      height: 1.29rem; }
    .main-page .part-1 .show-giftlist {
      background-image: url("../imgs/btn-show-giftlist.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 1.05rem;
      height: 0.29rem;
      margin: .18rem auto 0; }
    .main-page .part-1 .goods-list {
      margin: .3rem auto 0;
      padding: 0 .5rem; }
    .main-page .part-1 .goods-item {
      position: relative;
      width: 3.25rem;
      margin: 0 auto .3rem; }
    .main-page .part-1 .g1 {
      background-image: url("../imgs/main/g1.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .main-page .part-1 .g1.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .main-page .part-1 .g2 {
      background-image: url("../imgs/main/g2.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .main-page .part-1 .g2.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .main-page .part-1 .g3 {
      background-image: url("../imgs/main/g3.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .main-page .part-1 .g3.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .main-page .part-1 .g4 {
      background-image: url("../imgs/main/g4.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .main-page .part-1 .g4.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .main-page .part-1 .g5 {
      background-image: url("../imgs/main/g5.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .main-page .part-1 .g5.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .main-page .part-1 .g6 {
      background-image: url("../imgs/main/g6.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .main-page .part-1 .g6.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .main-page .part-1 .g7 {
      background-image: url("../imgs/main/g7.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .main-page .part-1 .g7.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .main-page .part-1 .g8 {
      background-image: url("../imgs/main/g8.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .main-page .part-1 .g8.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .main-page .part-1 .fetch-btn {
      background-image: url("../imgs/btn-notallow.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 1.99rem;
      height: 0.65rem;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto; }
      .main-page .part-1 .fetch-btn.allow {
        background-image: url("../imgs/btn-fetch.png?v=20211101");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center; }
      .main-page .part-1 .fetch-btn.already {
        background-image: url("../imgs/btn-already.png?v=20211101");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center; }
  .main-page .part-2 {
    height: 8.85rem;
    padding-top: .5rem; }
    .main-page .part-2 .title {
      background-image: url("../imgs/main-title-2.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 4.28rem;
      height: 1.28rem; }
    .main-page .part-2 .rule {
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      padding: 0 .4rem;
      margin: .44rem auto 0;
      font-size: .28rem;
      text-align: left; }
      .main-page .part-2 .rule > div {
        margin-bottom: .2rem;
        white-space: normal !important; }

.sub-page {
  background-image: url("../imgs/bg-sub.jpg?v=20211101");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  height: 53.6rem; }
  .sub-page .invite-btns {
    margin-top: 11.52rem; }
    .sub-page .invite-btns .invite {
      background-image: url("../imgs/btn-invite.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 2.06rem;
      height: 0.78rem; }
    .sub-page .invite-btns .bind {
      background-image: url("../imgs/btn-bind.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 2.06rem;
      height: 0.78rem; }
  .sub-page .part-1 {
    height: 7.35rem; }
    .sub-page .part-1 .title {
      background-image: url("../imgs/sub-title-1.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 7.5rem;
      height: 1.77rem; }
    .sub-page .part-1 .gift-list {
      background-image: url("../imgs/sub-gift.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 6.19rem;
      height: 4.96rem;
      margin: 0 auto; }
  .sub-page .part-2 {
    height: 22.31rem; }
    .sub-page .part-2 .title {
      background-image: url("../imgs/sub-title-2.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 4.26rem;
      height: 1.29rem; }
    .sub-page .part-2 .show-giftlist {
      background-image: url("../imgs/btn-show-giftlist.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 1.05rem;
      height: 0.29rem;
      margin: .18rem auto 0; }
    .sub-page .part-2 .goods-list {
      margin: .3rem auto 0;
      padding: 0 .5rem; }
    .sub-page .part-2 .goods-item {
      position: relative;
      width: 3.25rem;
      margin: 0 auto .3rem; }
    .sub-page .part-2 .g1 {
      background-image: url("../imgs/sub/g1.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .sub-page .part-2 .g1.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .sub-page .part-2 .g2 {
      background-image: url("../imgs/sub/g2.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .sub-page .part-2 .g2.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .sub-page .part-2 .g3 {
      background-image: url("../imgs/sub/g3.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .sub-page .part-2 .g3.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .sub-page .part-2 .g4 {
      background-image: url("../imgs/sub/g4.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .sub-page .part-2 .g4.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .sub-page .part-2 .g5 {
      background-image: url("../imgs/sub/g5.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .sub-page .part-2 .g5.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .sub-page .part-2 .g6 {
      background-image: url("../imgs/sub/g6.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .sub-page .part-2 .g6.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .sub-page .part-2 .g7 {
      background-image: url("../imgs/sub/g7.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .sub-page .part-2 .g7.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .sub-page .part-2 .g8 {
      background-image: url("../imgs/sub/g8.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: inline-block;
      width: 3.25rem;
      height: 4.76rem;
      background-size: 2.7rem 3.88rem;
      background-position: top center; }
      .sub-page .part-2 .g8.off {
        -webkit-filter: grayscale(0.6);
                filter: grayscale(0.6); }
    .sub-page .part-2 .fetch-btn {
      background-image: url("../imgs/btn-notallow.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 1.99rem;
      height: 0.65rem;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto; }
      .sub-page .part-2 .fetch-btn.allow {
        background-image: url("../imgs/btn-fetch.png?v=20211101");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center; }
      .sub-page .part-2 .fetch-btn.already {
        background-image: url("../imgs/btn-already.png?v=20211101");
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center; }
  .sub-page .part-3 {
    height: 8.85rem;
    padding-top: .5rem; }
    .sub-page .part-3 .title {
      background-image: url("../imgs/sub-title-3.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 4.28rem;
      height: 1.28rem; }
    .sub-page .part-3 .rule {
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      padding: 0 .4rem;
      margin: .44rem auto 0;
      font-size: .28rem;
      text-align: left; }
      .sub-page .part-3 .rule > div {
        margin-bottom: .2rem;
        white-space: normal !important; }

.invite-page {
  background-image: url("../imgs/bg-invite.jpg?v=20211101");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  height: 46.78rem; }
  .invite-page .topbar {
    background-image: url("../imgs/topbar.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: block;
    width: 7.5rem;
    height: 1.32rem;
    position: fixed;
    top: 0;
    z-index: 99; }
  .invite-page .btn-down {
    background-image: url("../imgs/btn-down.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: block;
    width: 1.98rem;
    height: 0.65rem;
    position: absolute;
    top: .15rem;
    right: .25rem; }
  .invite-page .share-btn {
    background-image: url("../imgs/share-icon.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    position: absolute;
    top: 1.3rem;
    right: .25rem; }
  .invite-page .part-1 {
    margin-top: 12.1rem; }
    .invite-page .part-1 .title {
      background-image: url("../imgs/invite-title-1.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 7.07rem;
      height: 2.61rem; }
      .invite-page .part-1 .title p {
        padding: 1.1rem .2rem 0;
        color: #fff;
        font-size: .24rem;
        line-height: .4rem;
        text-align: center; }
        .invite-page .part-1 .title p span {
          color: #f6dda5;
          margin: 0 .05rem; }
    .invite-page .part-1 .invite-code {
      background-image: url("../imgs/invite-part-1-step.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 7.5rem;
      height: 6.34rem;
      margin: .4rem auto 0;
      padding-top: .4rem; }
    .invite-page .part-1 .code {
      display: inline-block;
      width: 2.1rem;
      height: .7rem;
      margin-right: .25rem;
      line-height: .7rem;
      background: #252526;
      -webkit-box-shadow: 0 0 .6rem 0 #3f3a30 inset;
              box-shadow: 0 0 .6rem 0 #3f3a30 inset;
      border-radius: .08rem;
      border: none;
      text-align: center;
      color: #ffe4aa;
      font-size: .28rem;
      vertical-align: middle; }
    .invite-page .part-1 .copy-btn {
      background-image: url("../imgs/btn-copy.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 1.5rem;
      height: 0.8rem;
      display: inline-block;
      vertical-align: middle; }
    .invite-page .part-1 .join-btn {
      background-image: url("../imgs/btn-join.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 3.5rem;
      height: 0.9rem;
      margin: .25rem auto 0; }
  .invite-page .part-2 {
    position: relative;
    margin-top: .28rem; }
    .invite-page .part-2 .title {
      background-image: url("../imgs/invite-title-2.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 5.92rem;
      height: 7.34rem; }
    .invite-page .part-2 .more-btn {
      position: absolute;
      bottom: 0;
      right: 1.5rem;
      width: 1.9rem;
      height: .6rem; }
  .invite-page .part-3 {
    margin-top: .7rem; }
    .invite-page .part-3 .title {
      background-image: url("../imgs/invite-title-3.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 6.27rem;
      height: 6.53rem; }
  .invite-page .part-4 {
    margin-top: .3rem; }
    .invite-page .part-4 .title {
      background-image: url("../imgs/invite-title-4.png?v=20211101");
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
      display: block;
      width: 4.28rem;
      height: 1.34rem; }
    .invite-page .part-4 .rule {
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
      padding: 0 .4rem;
      margin: .4rem auto 0;
      font-size: .28rem;
      text-align: left; }
      .invite-page .part-4 .rule > div {
        margin-bottom: .2rem;
        white-space: normal !important; }

.pop-box {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100; }
  .pop-box .mask {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); }
  .pop-box .pop-main {
    background-image: url("../imgs/pop-bg.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    margin: auto;
    width: 5.84rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 3rem;
    background-size: 100% 100%; }
  .pop-box .pop-title {
    background-image: url("../imgs/pop-top.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    width: 5.8rem;
    height: .86rem;
    line-height: .82rem;
    margin: -.08rem auto 0;
    font-size: .32rem;
    color: #ffe4aa;
    letter-spacing: .05rem; }
  .pop-box .pop-close {
    background-image: url("../imgs/pop-close.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: block;
    width: 0.79rem;
    height: 0.85rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3; }
  .pop-box .pop-body {
    position: relative;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 6.7rem;
    margin: -.08rem auto;
    padding: 0 .04rem;
    color: #fff;
    font-size: .24rem;
    text-align: left;
    border-radius: .06rem;
    overflow-y: auto;
    overflow-x: hidden; }
    .pop-box .pop-body .empty-text {
      margin-top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      text-align: center; }
  .pop-box .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-items: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: .7rem;
    padding: 0 .2rem;
    line-height: .7rem; }
    .pop-box .row {
      position: relative;
      z-index: 1; }
    .pop-box .row:before {
      content: ' ';
      position: absolute;
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      z-index: -1;
      bottom: 0;
      left: 0;
      right: 0;
      border-bottom: 1px solid #323240;
      -webkit-transform: scaleY(0.5);
              transform: scaleY(0.5); }
    .pop-box .row.row-head {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 2;
      background-color: #323240; }
    .pop-box .row span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      margin-right: .2rem; }
  .pop-box .pop-input {
    display: block;
    width: 3.53rem;
    height: .6rem;
    margin: 1rem auto 0;
    line-height: .6rem;
    border-radius: .06rem;
    background: #0f0f10;
    font-size: .28rem;
    text-align: center;
    color: #acacac; }
    .pop-box .pop-input {
      position: relative;
      z-index: 1; }
    .pop-box .pop-input:before {
      content: ' ';
      position: absolute;
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      z-index: -1;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      border: 1px solid #777;
      -webkit-transform: scale(0.5);
              transform: scale(0.5); }
  .pop-box .pop-bottom-btn {
    position: absolute;
    bottom: .1rem;
    left: .03rem;
    right: .03rem;
    padding: .22rem 0;
    border-radius: 0 0 .06rem .06rem;
    background: #292938; }
  .pop-box .btn-ok {
    background-image: url("../imgs/btn-ok.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: block;
    width: 1.97rem;
    height: 0.54rem;
    margin: 0 auto; }
  .pop-box .copy-btn {
    background-image: url("../imgs/btn-copy.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: block;
    width: 1.5rem;
    height: 0.8rem;
    margin: 0 auto; }
  .pop-box ::-webkit-input-placeholder {
    color: #acacac;
    font-size: .28rem; }
  .pop-box .goods-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin: .3rem auto 0;
    height: 6rem;
    overflow: auto; }
  .pop-box .goods-item {
    position: relative;
    width: 50% !important;
    margin: 0 auto .3rem; }
  .pop-box .g1 {
    background-image: url("../imgs/main/g1.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: inline-block;
    width: 3.25rem;
    height: 4.76rem;
    background-size: 2.7rem 3.88rem;
    background-position: top center; }
    .pop-box .g1.off {
      -webkit-filter: grayscale(0.6);
              filter: grayscale(0.6); }
  .pop-box .g2 {
    background-image: url("../imgs/main/g2.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: inline-block;
    width: 3.25rem;
    height: 4.76rem;
    background-size: 2.7rem 3.88rem;
    background-position: top center; }
    .pop-box .g2.off {
      -webkit-filter: grayscale(0.6);
              filter: grayscale(0.6); }
  .pop-box .g3 {
    background-image: url("../imgs/main/g3.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: inline-block;
    width: 3.25rem;
    height: 4.76rem;
    background-size: 2.7rem 3.88rem;
    background-position: top center; }
    .pop-box .g3.off {
      -webkit-filter: grayscale(0.6);
              filter: grayscale(0.6); }
  .pop-box .g4 {
    background-image: url("../imgs/main/g4.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: inline-block;
    width: 3.25rem;
    height: 4.76rem;
    background-size: 2.7rem 3.88rem;
    background-position: top center; }
    .pop-box .g4.off {
      -webkit-filter: grayscale(0.6);
              filter: grayscale(0.6); }
  .pop-box .g5 {
    background-image: url("../imgs/main/g5.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: inline-block;
    width: 3.25rem;
    height: 4.76rem;
    background-size: 2.7rem 3.88rem;
    background-position: top center; }
    .pop-box .g5.off {
      -webkit-filter: grayscale(0.6);
              filter: grayscale(0.6); }
  .pop-box .g6 {
    background-image: url("../imgs/main/g6.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: inline-block;
    width: 3.25rem;
    height: 4.76rem;
    background-size: 2.7rem 3.88rem;
    background-position: top center; }
    .pop-box .g6.off {
      -webkit-filter: grayscale(0.6);
              filter: grayscale(0.6); }
  .pop-box .g7 {
    background-image: url("../imgs/main/g7.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: inline-block;
    width: 3.25rem;
    height: 4.76rem;
    background-size: 2.7rem 3.88rem;
    background-position: top center; }
    .pop-box .g7.off {
      -webkit-filter: grayscale(0.6);
              filter: grayscale(0.6); }
  .pop-box .g8 {
    background-image: url("../imgs/main/g8.png?v=20211101");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    display: inline-block;
    width: 3.25rem;
    height: 4.76rem;
    background-size: 2.7rem 3.88rem;
    background-position: top center; }
    .pop-box .g8.off {
      -webkit-filter: grayscale(0.6);
              filter: grayscale(0.6); }
  .pop-box .gift-detail-box {
    height: 3.9rem;
    overflow: auto; }
  .pop-box .gift-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-items: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: .7rem;
    padding: 0 .2rem;
    line-height: .7rem; }
    .pop-box .gift-detail {
      position: relative;
      z-index: 1; }
    .pop-box .gift-detail:before {
      content: ' ';
      position: absolute;
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      z-index: -1;
      bottom: 0;
      left: 0;
      right: 0;
      border-bottom: 1px solid #323240;
      -webkit-transform: scaleY(0.5);
              transform: scaleY(0.5); }

@-webkit-keyframes sword-one {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } }

@keyframes sword-one {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } }
@-webkit-keyframes sword-two {
  0% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } }
@keyframes sword-two {
  0% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } }
@-webkit-keyframes sword-three {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } }
@keyframes sword-three {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } }