@function px2rem($px, $rem:75) {
  @return $px / $rem+rem;
}

@import '../../../common/css/flex.scss';

.mask {
  z-index: 120;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  height: 60px;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
  display: none;
  .logo {
      width: 40px;
      img {
          width: 100%;
      }
  }
  .slogan {
      color: #fff;
  }
}
#download {
  border: 1px solid #fff;
  color: #fff;
  width: 80px;
  text-align: center;
  border-radius: 15px;
  line-height: 30px;
  a {
      color: #fff;
  }
}
*{
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
body{
  font-family:PingFang SC;
  background: #2B3137;
  z-index:-1;
  .max {
    width: 100%;
    margin: 0 auto;
    .title-one {
      width: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .rule-btn {
      width: px2rem(100);
      height: px2rem(60);
      position: absolute;
      left: px2rem(30);
      top: px2rem(20);
      img {
        width:100%;
        height:100%;
      }
    }
    .cloth-box {
      width:100%;
      padding-bottom:2.4rem;
      margin:-2.2rem auto 0;
      li {
        width: px2rem(640);
        height: px2rem(420);
        position:relative;
        margin:px2rem(10) auto 0;
        @include flex();
        @include flex-justify-center;
        background:url('../img/index/li-card.png') no-repeat 0 0 / 100% 100%;
        .h-title{
          position:absolute;
          margin: px2rem(30) auto 0;
          letter-spacing:.053333rem;
          font-size: px2rem(28);
          font-weight: bold;
          // color: #FFF;
          color: #FEA53C;
          line-height: px2rem(50);
        }
        .gift-img{
          width:px2rem(146);
          height: px2rem(130);
          position:absolute;
          box-sizing: border-box;
          left: px2rem(87);
          top: px2rem(124);
          @include flex;
          @include flex-align-center;
          @include flex-justify-center;
          img{
            box-sizing: border-box;
            padding: px2rem(10);
            width:100%;
            height: 100%;
            object-fit: cover;
          }

        }
        .gift-text{
          position:absolute;
          left: px2rem(302);
          top: px2rem(115);
          p:first-child{
            font-size:px2rem(34);
            font-weight:bold;
            color: #00CF9E;
            line-height:.56rem;
            letter-spacing:.026667rem;
          }
          p:nth-child(2){
            font-size:px2rem(28);
            font-weight:bold;
            color:#FFA530;
            line-height:.56rem;
         
          }
          p:nth-child(3){
            font-size:px2rem(26);
            font-weight:500;
            text-decoration:line-through;
            color: #9C9C9C;
            line-height:px2rem(47);
            opacity:0.8;
          }
          p:last-child{
            font-size:px2rem(26);
            font-weight: 500;
            color: #9C9C9C;
            opacity:0.8;
            line-height: px2rem(47);
          }
        }
        .buy-btn{
          width: px2rem(300);
          height: px2rem(82);
          position:absolute;
          bottom: px2rem(28);
          @include flex();
          @include flex-justify-center;
          background: url('../img/index/buy.png') no-repeat 0 0 / 100% 100%;
          &.gray {
            background: url('../img/index/buy-gray.png') no-repeat 0 0 / 100% 100%;
          }
        }
      }
     
    }
    .buy-mask {
      width: px2rem(616);
      height: px2rem(596);
      // border-radius:.213333rem;
      // background-color: #FFFFFF;
      position: fixed;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
      z-index: 1001;
      display: none;
      .b-box{
        padding: 0 .693333rem;
        margin-top: px2rem(70);
        .b-title{
          color:#FEA43C;
          line-height:.6rem;
          text-align:center;
          font-size:.48rem;
          font-weight:bold;
          letter-spacing:.013333rem;
          .giftName{
            font-size:.48rem;
            font-weight:bold;
          }
        }
        .b-number{
          padding:0 .906667rem;
          margin-top:.773333rem;
          @include flex();
          .input-box{
            @include flex();
            @include flex-align-center;
            height:.64rem;
            margin-top:-0.066667rem;
            .remove-btn{
              width:.64rem;
              height:.64rem;
              @include flex();
              @include flex-justify-center;
              @include flex-align-center;
              border-radius:.32rem 0 0 .32rem;
              background:rgba($color: #D4F4FF, $alpha: 0.6);
              .remove-icon{
                opacity: .6;
                display:block;
                width: px2rem(20);
                height: px2rem(4);
                background: url('../img/index/remove-icon.png') no-repeat 0 0 / 100% 100%;
                background-size:100% 100%;
              }
            }
            .b-input{
                width:1.173333rem;
                height:.64rem;
                background:#D4F4FF;
                text-align:center;
                font-size:.346667rem;
                font-weight:500;
                color: #8FA4B8;
                margin:0 .106667rem;
                border:0;
                outline:none;
            }
            .add-btn{
              width:.64rem;
              height:.64rem;
              @include flex();
              @include flex-justify-center;
              @include flex-align-center;
              border-radius:0 .32rem .32rem 0;
              background:rgba($color: #D4F4FF, $alpha: 0.6);
              .add-icon{
                display:block;
                width: px2rem(20);
                height: px2rem(20);
                background: url('../img/index/add-icon.png') no-repeat;
                background-size:100% 100%;
              }
            }
          }
   

        }
        .b-text{
          white-space:nowrap;
          font-size:.4rem;
          font-weight:500;
          color:rgba($color: #8EA4B7, $alpha: 1.0);
          line-height:.48rem;
          margin-bottom: px2rem(47);
          span:first-child{
            margin-right:.4rem;
          }
        }
        .b-day{
          padding:0 .906667rem;
          span:nth-child(2),span:last-child{
            color:#00CF9E;
            letter-spacing:.013333rem;
          }
        }
        .b-price{
          padding:0 .906667rem;
          span:nth-child(2),span:last-child{
            color: #FFA530;
            letter-spacing:.013333rem;
          }
         
        }
        .b-btns{
          @include flex();
          @include flex-justify-between;
          margin-top: px2rem(55);
          .close-btn{
            width: px2rem(251);
            height: px2rem(87);
            background:url('../img/index/btn-cancel.png') no-repeat 0 0 / 100% 100%;
            @include flex();
            @include flex-justify-center;
            @include flex-align-center;
          }
          .confirm-btn{
            width: px2rem(261);
            height: px2rem(107);
            background: url('../img/index/btn-confirm.png') no-repeat 0 0 / 100% 100%;
            margin-top: px2rem(-2);
            @include flex();
            @include flex-justify-center;
            @include flex-align-center;

          }
        }
      }
    }

    .rule-mask {
      width: px2rem(670);
      height: px2rem(650);
      position: fixed;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
      z-index: 1001;
      // background-color:#FFFFFF;
      background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
      border-radius:.213333rem;
      // overflow: hidden;
      display: none;
      .title {
        width: 100%;
        text-align: center;
        font-size: px2rem(40);
        color: #FEA43C;
        margin-top: px2rem(70);
        font-weight: bold;
        // background: linear-gradient(0deg, #FFE691 0%, #FEFAD5 100%);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }
      .content {
        width: px2rem(524);
        height: px2rem(425);
        margin: 0 auto;
        margin-top:.4rem;
        overflow: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        p {
          width: 100%;
          height:13.333333rem;
          img {
            width:100%;
          }
        }
      }
      .cancel {
        width: px2rem(70);
        height:px2rem(70);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: px2rem(-110);
        img {
          width:100%;
          height:100%;
        }
      }
    }
    .statusMask {
      width: px2rem(616);
      height:6.8rem;
      border-radius:.213333rem;
      // background-color:#FFFFFF;
      background: url('../img/index/buy-bg.png') no-repeat 0 0 / 100% 100%;
      position: fixed;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
      z-index: 1001;
      display: none;
      .cancel {
        width: px2rem(70);
        height: px2rem(70);
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        bottom: px2rem(-80);
        img {
          width:100%;
          height:100%;
        }
      }
      .title {
        width: 100%;
        text-align: center;
        font-size:.48rem;
        color: #FEA43C;
        font-weight:bold;
        margin-top:.786667rem;
      }

      .avatar {
        width:  px2rem(140);
        height: px2rem(140);
        margin: 0 auto;
        margin-top:.666667rem;

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

      .tip {
        width: 100%;
        text-align: center;
        font-size:.373333rem;
        color: #5F82A3;
      }

      .in-btn, .recharge {
        @include flex;
        @include flex-align-center;
        @include flex-justify-between;
        display: block;
        width: px2rem(300);
        height: px2rem(90);
        background:url('../img/index/btn.png') no-repeat 0 0 / 100% 100%;
        background-size:100% 100%;
        font-size: px2rem(36);
        line-height: px2rem(92);
        text-align: center;
        margin:.533333rem auto 0;
        font-weight: bold;
        padding-bottom: px2rem(10);
        color: #fff;
      }
    }
    .shade {
      width: 100%;
      position:fixed;
      z-index:1000;
      left: 0;
      top: 0;
      height: 100%;
      background:rgba(0,0,0,0.7);
      display: none;
    }
    .mine {
      @include flex();
      @include flex-justify-between;
      @include flex-align-center;
      width: 100%;
      height:1.866667rem;
      position: fixed;
      left: 0;
      bottom: 0;
      background: linear-gradient(0deg, #74A497, #3A5782);
      z-index: 100;
      li {
        margin: 0 .533333rem;
        img {
          width: 100%;
        }

        &:first-child {
          @include flex();
          @include flex-justify-start;
          @include flex-align-center;
          p {
            &:first-child {
              width:1.066667rem;
              height:1.066667rem;
              border-radius:50%;
              overflow: hidden;
              font-weight:500;
            }

            &:last-child {
              margin-left:.266667rem;
              span {
                display: block;
                &:first-child {
                  line-height: px2rem(42);
                  font-size: px2rem(30);
                  color: #fff;
                  font-weight: bold;
                }
                &:last-child {
                  font-size: px2rem(24);
                  font-weight: 500;
                  color: rgba($color: #8BABC9, $alpha: 1);
                  b {
                    color: rgba($color: #fff, $alpha: 1);
                  }
                }
              }
            }
          }
        }

        &:last-child {
          width: px2rem(201);
          height: px2rem(89);
        }
      }
    }
  }
  /*提示信息样式*/
  .ajaxtiptext{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align: center;
    color:#FFFFFF;
    padding:.2rem .4rem;
    border-radius:.333333rem;
    letter-spacing:.013333rem;
    background:rgba(0,0,0,0.8);
    animation:ajaxani 0.3s forwards;
    z-index:9999;
    white-space:nowrap;
  }
}