.couponItem {
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
  padding: 10px;
  position: relative;
  background: radial-gradient(transparent 0px, transparent 4px, #ff4a4a 4px, #ff4a4a) -10px -10px;
  background-size: 20px 20px;
  margin-bottom: 14px;
  color: #fff;
  &:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    right: 5px;
    bottom: 5px;
    //box-shadow: 0 0 20px 1px rgba(0, 0, 0, 1);
    z-index: -1;
  }

  &:last-child {
    margin-bottom: 0;
  }

  .coupon-content {
    height: 100px;
    width: 100%;
    background: #ff4a4a;
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    position: relative;
    column-gap: 15px;

    .coupon-pick {
      line-height: 30px;
      height: 30px;
      background: #34c0bc;
      //color: #fff;
      text-align: center;
      border-radius: 12px;
      margin-top: 32px;
    }
    .coupon-pick-default {
      line-height: 30px;
      height: 30px;
      background: #34c0bc;
      //color: #fff;
      text-align: center;
      border-radius: 12px;
      margin-top: 32px;
    }
    .choose {
      position: absolute;
      top: 35px;
      right: 5px;
      //background: #fff;
      border-radius: 100%;
      overflow: hidden;
    }

    .price {
      border-right: 1px dashed #fff;
      text-align: center;
      .symbol {
        font-size: 15px;
        margin: 25px 0 10px;
        //color: #fff;
      }

      .num {
        font-size: 12px;
        //color: #fff;
        text-align: center;
      }
    }

    .info {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .title {
        margin-bottom: 12px;
        font-size: 16px;
        //color: #fff;
        line-height: 22px;
      }

      .date {
        color: rgba(255, 255, 255, 0.45);
      }
    }
  }
}