.page-member-benefits {
  height: calc(100vh - env(safe-area-inset-bottom));
  background: #f2f3f7;
  .benefits-icons {
    padding: 40rpx 0 70rpx;
    color: #fff;
    background: linear-gradient(to bottom, #151b33, #080c1c);
    width: 1600rpx;
    overflow: hidden;
    .item {
      display: inline-block;
      width: 160rpx;
      margin-right: 22rpx;
      margin-left: 22rpx;
      opacity: .6;
      &:first-child {
        margin-left: -75rpx;
      }
      &:last-child {
        margin-right: -75rpx;
      }
    }
    .item.active {
      opacity: 1;
    }
    .img {
      width: 80rpx;
      height: 80rpx;
      font-size: 0;
      background: linear-gradient(to bottom, #ebc8a7, #c98e5c);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      image {
        width: 44rpx;
        height: 44rpx;
      }
    }
    .text {
      margin-top: 12rpx;
      text-align: center;
      font-size: 26rpx;
    }
  }
  .benefits-content {
    position: relative;
    z-index: 2;
    margin-top: -30rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: #f2f3f7;
    padding: 30rpx;
    &::before {
      position: absolute;
      top: -16rpx;
      left: 50%;
      display: block;
      content: " ";
      font-size: 0;
      border: 18rpx solid transparent;
      border-left: 18rpx solid #f2f3f7;
      border-top: 18rpx solid #f2f3f7;
      border-radius: 4rpx;
      transform: translateX(-50%) rotate(45deg);
    }
    .tit {
      font-size: 32rpx;
      font-weight: 600;
      padding: 40rpx 0 20rpx;
    }
  }
  .benefits-img {
    padding: 30rpx;
    border-radius: 10rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 106rpx;
    .bg {
      position: absolute;
      top: 0;
      right: 0;
      width: 198rpx;
      height: 166rpx;
    }
    .text-box {
      .text {
        font-size: 36rpx;
        font-weight: 600;
      }
      .des {
        font-size: 28rpx;
        margin-top: 12rpx;
      }
    }
    .img {
      width: 120rpx;
      height: 120rpx;
      margin-right: 20rpx;
      font-size: 0;
      position: relative;
    }
  }
  .benefits-integral {
    .benefits-img {
      background: linear-gradient(to right, #fe7e00, #e33e15);
      border-radius: 10rpx 10rpx 0 0;
      .text {
        font-size: 28rpx;
      }
      .number {
        margin-top: 12rpx;
        font-size: 30rpx;
        font-weight: 600;
        .num {
          font-size: 44rpx;
          margin-right: 4rpx;
        }
      }
    }
    .integral-des {
      padding: 26rpx 30rpx;
      background: #fff;
      border-radius: 0 0 10rpx 10rpx;
      font-size: 28rpx;
      line-height: 46rpx;
    }
  }
  .level-benefits {
    background: #fff;
    border-radius: 10rpx;
    .item {
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #f9f9f9;
      &:last-child {
        border: 0;
      }
      .level-name {
        padding: 30rpx 60rpx 30rpx 30rpx;
        display: flex;
        align-items: center;
        position: relative;
        &::after {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          display: block;
          width: 2rpx;
          content: " ";
          font-size: 0;
          background: #f9f9f9;
        }
        .img {
          width: 44rpx;
          height: 44rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0;
          border-radius: 50%;
          image {
            width: 24rpx;
            height: 24rpx;
          }
        }
        .img.vip1 {
          background: linear-gradient(to right, #c68a5c, #e6bfa0);
        }
        .img.vip2 {
          background: linear-gradient(to right, #635775, #9f93b0);
        }
        .img.vip3 {
          background: linear-gradient(to right, #345799, #628ac6);
        }
        .img.vip4 {
          background: linear-gradient(to right, #111628, #212740);
        }
        .name {
          font-size: 28rpx;
          margin-left: 20rpx;
        }
      }
      .text {
        font-size: 28rpx;
        font-weight: 600;
        padding: 0 30rpx;
        .mul {
          color: #fc1b35;
        }
      }
    }
  }
  .benefits-explain {
    font-size: 28rpx;
    line-height: 44rpx;
    padding: 30rpx;
    background: #fff;
    border-radius: 10rpx;
    color: #666;
    text-align: justify;
  }
  .member-goods {
    .goods-box {
      background: #fff;
      padding: 30rpx;
      border-radius: 10rpx 10rpx 0 0;
      display: flex;
      justify-content: space-between;
      .item {
        width: 190rpx;
        .img {
          width: 190rpx;
          height: 190rpx;
          font-size: 0;
          border-radius: 10rpx;
          overflow: hidden;
        }
        .price {
          justify-content: center;
          font-weight: 600;
          margin-top: 16rpx;
        }
      }
    }
    .btn-box {
      background: #fff;
      border-radius: 0 0 10rpx 10rpx;
      padding-bottom: 36rpx;
      .btn {
        width: 400rpx;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 70rpx;
        color: #fff;
        margin: auto;
        background: #fc1b35;
        font-size: 26rpx;
        font-weight: 600;
        text-align: center;
      }
    }
  }
  .upgrade-gifts {
    .benefits-img {
      background: linear-gradient(to right, #2164fb, #2732c0);
    }
  }
  .free-shipping {
    .benefits-img {
      background: linear-gradient(to right, #542183, #421c78);
    }
  }
  .member-discount {
    .benefits-img {
      background: linear-gradient(to right, #4c2a1f, #200f09);
    }
  }
  .exclusive-coupon {
    .coupons-box {
      .item {
        display: flex;
        background: #fff;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        position: relative;
        overflow: hidden;
        &::before {
          position: absolute;
          left: 130rpx;
          display: block;
          width: 20rpx;
          height: 20rpx;
          content: " ";
          background: #f2f3f7;
          border-radius: 50%;
          top: -10rpx;
        }
        &::after {
          position: absolute;
          left: 130rpx;
          display: block;
          width: 20rpx;
          height: 20rpx;
          content: " ";
          background: #f2f3f7;
          border-radius: 50%;
          bottom: -10rpx;
        }
        &:last-child {
          margin-bottom: 0;
        }
        .price {
          padding: 10rpx;
          background: linear-gradient(to right, #fc1b35, #f45c43);
          font-weight: 600;
          color: #fff;
          width: 120rpx;
          height: 100rpx;
          line-height: 100rpx;
          justify-content: center;
          .big {
            font-size: 40rpx;
          }
        }
        .text-box {
          flex: 1;
          padding: 20rpx 20rpx 20rpx 30rpx;
          align-self: center;
          .name {
            font-size: 28rpx;
            font-weight: 600;
          }
          .des {
            margin-top: 12rpx;
            color: #999;
          }
        }
        .btn {
          margin-right: 24rpx;
          padding: 10rpx 30rpx;
          border: 2rpx solid #fc1b35;
          color: #fc1b35;
          border-radius: 60rpx;
          align-self: center;
        }
      }
    }
  }
  .birthday-gift {
    .benefits-img {
      background: linear-gradient(to right, #fe1947, #f80105);
    }
    .get-btn {
      margin: 30rpx auto 0;
      width: 560rpx;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 88rpx;
      color: #fff;
      text-align: center;
      font-size: 28rpx;
      font-weight: 600;
      background: #fc1b35;
    }
  }
  .exclusive-service {
    .benefits-img {
      background: linear-gradient(to right, #212740, #111628);
    }
  }
}
