shiziyu18/Common/mogu/bonus/css/index.css

#main,
body,
html,
#main .duo-red-packet-container {
  height: 100%;
  width: 100%;
}

img {
  border: 0;
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: top;
}

.mobile-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  background-color: #f2f2f2;
  color: #666;
  font-size: .24rem;
  line-height: 1.4;
}

.rp-main {
  width: 100%;
  height: 100%;
  background-color: #b4292a;
  position: relative;
}

#main .duo-red-packet-container .rp-main .main-bg-middle,
#main .duo-red-packet-container .rp-main .main-bg-top {
  height: 4rem;
}

#main .duo-red-packet-container .rp-main .main-bg-bottom {
  height: 4.06rem;
}

#main .duo-red-packet-container .rp-main .main-bg-ribbon,
#main .duo-red-packet-container .rp-main .main-open-btn,
#main .duo-red-packet-container .rp-main .main-red-packet,
#main .duo-red-packet-container .rp-main .main-sub-title,
#main .duo-red-packet-container .rp-main .main-title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#main .duo-red-packet-container .rp-main .main-bg-ribbon {
  top: 0;
  width: 7.5rem;
}

#main .duo-red-packet-container .rp-main .main-title {
  top: .88rem;
  width: 4.92rem;
}

#main .duo-red-packet-container .rp-main .main-sub-title {
  top: 2.02rem;
  width: 4.02rem;
}

#main .duo-red-packet-container .rp-main .main-red-packet {
  top: 3rem;
  width: 5.76rem;
}

#main .duo-red-packet-container .rp-main .main-open-btn {
  width: 1.96rem;
  height: 1.98rem;
  top: 6.48rem;
}

#main .duo-red-packet-container .rp-main .main-open-btn-open {
  -webkit-transition: all ease;
  transition: all ease;
  width: 1.96rem;
  height: 1.98rem;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: openScale 1.8s ease infinite;
  animation: openScale 1.8s ease infinite;
}

@-webkit-keyframes openScale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  20% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15)
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  90% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes openScale {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  20% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15)
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  90% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

/* 过期 S */
#main .duo-red-packet-container .rp-main .main-overdue {
  position: absolute;
  top: 2.9rem;
  width: 5.78rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#main .duo-red-packet-container .rp-main .main-overdue-img {
  width: 100%;
}

#main .duo-red-packet-container .rp-main .main-overdue-title {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 1.7rem;
  font-size: .32rem;
  height: .74rem;
  line-height: .74rem;
  font-family: PingFangSC-Regular;
  color: #d2d2d2;
}

#main .duo-red-packet-container .rp-main .main-overdue-desc {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 6.4rem;
  font-size: .28rem;
  font-family: PingFangSC-Regular;
  color: #ff7c62;
}

#main .duo-red-packet-container .rp-main .main-overdue-desc:after,
#main .duo-red-packet-container .rp-main .main-overdue-desc:before {
  position: absolute;
  content: "";
  width: .56rem;
  height: .03rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#main .duo-red-packet-container .rp-main .main-overdue-desc:before {
  left: -.7rem;
  background: -webkit-gradient(linear, right top, left top, from(#ff9076), to(#c74d35));
  background: linear-gradient(270deg, #ff9076, #c74d35);
}

#main .duo-red-packet-container .rp-main .main-overdue-desc:after {
  right: -.7rem;
  background: -webkit-gradient(linear, left top, right top, from(#ff9076), to(#c74d35));
  background: linear-gradient(90deg, #ff9076, #c74d35);
}

/* 过期 E */


/** **************************** */
.rp-mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  max-width: 640px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  overflow: hidden;
}

.rp-mask .rp-container img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.rp-mask .rp-container {
  position: relative;
  width: 5.7rem;
  height: 7.6rem;
  margin: 1.72rem auto 0;
  text-align: center;
  -webkit-animation: bgScale .8s ease-in;
  animation: bgScale .8s ease-in;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: all ease-in;
  transition: all ease-in;
}

.rp-mask .rp-container .popup-rp-back {
  width: 5.22rem;
  top: 0;
}

.rp-mask .rp-container img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.rp-mask .rp-container .main-title {
  position: absolute;
  text-align: center;
  font: .5rem PingFangSC-Semibold;
  color: #c73535;
  width: 5.04rem;
  height: 3.88rem;
  left: 50%;
  -webkit-transform: translate(-50%, .4rem);
  transform: translate(-50%, .4rem);
  -webkit-animation: paperMove 1s ease-in;
  animation: paperMove 1s ease-in;
  -webkit-transition: all ease-in;
  transition: all ease-in;
  background-size: cover;
}

.rp-mask .rp-container .main-title-1 {
  margin: .7rem auto .04rem;
}

.rp-mask .rp-container .main-title-1,
.rp-mask .rp-container .main-title-2 {
  font-size: .48rem;
}

.rp-mask .rp-container .popup-rp-ribbon {
  left: .14rem;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  width: 5.7rem;
  height: 2.42rem;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: ribbonScale .8s ease-in;
  animation: ribbonScale .8s ease-in;
  -webkit-transition: all ease-in;
  transition: all ease-in;
}

.rp-mask .rp-container .popup-rp-rps {
  width: 5.16rem;
  -webkit-transform: translate3d(-50%, 2.7rem, 0);
  transform: translate3d(-50%, 2.7rem, 0);
  -webkit-animation: littleRPsMove 1.4s ease-in;
  animation: littleRPsMove 1.4s ease-in;
  -webkit-transition: all;
  transition: all;
}

@keyframes bgScale {
  0% {
    -webkit-transform: scale(.6);
    transform: scale(.6)
  }

  40% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  60% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  70% {
    -webkit-transform: scale(1.01);
    transform: scale(1.01)
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  90% {
    -webkit-transform: scale(1.01);
    transform: scale(1.01)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes bgScale {
  0% {
    -webkit-transform: scale(.6);
    transform: scale(.6)
  }

  40% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
  }

  60% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  70% {
    -webkit-transform: scale(1.01);
    transform: scale(1.01)
  }

  80% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  90% {
    -webkit-transform: scale(1.01);
    transform: scale(1.01)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes paperMove {
  0% {
    -webkit-transform: translate3d(-50%, 2.6rem, 0);
    transform: translate3d(-50%, 2.6rem, 0)
  }

  60% {
    -webkit-transform: translate3d(-50%, .6rem, 0);
    transform: translate3d(-50%, .6rem, 0)
  }

  80% {
    -webkit-transform: translate3d(-50%, 1rem, 0);
    transform: translate3d(-50%, 1rem, 0)
  }

  90% {
    -webkit-transform: translate3d(-50%, .7rem, 0);
    transform: translate3d(-50%, .7rem, 0)
  }

  to {
    -webkit-transform: translate3d(-50%, .4rem, 0);
    transform: translate3d(-50%, .4rem, 0)
  }
}

@-webkit-keyframes paperMove {
  0% {
    -webkit-transform: translate3d(-50%, 2.6rem, 0);
    transform: translate3d(-50%, 2.6rem, 0)
  }

  60% {
    -webkit-transform: translate3d(-50%, .6rem, 0);
    transform: translate3d(-50%, .6rem, 0)
  }

  80% {
    -webkit-transform: translate3d(-50%, 1rem, 0);
    transform: translate3d(-50%, 1rem, 0)
  }

  90% {
    -webkit-transform: translate3d(-50%, .7rem, 0);
    transform: translate3d(-50%, .7rem, 0)
  }

  to {
    -webkit-transform: translate3d(-50%, .4rem, 0);
    transform: translate3d(-50%, .4rem, 0)
  }
}

@-webkit-keyframes ribbonScale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  55% {
    -webkit-transform: scale(.6);
    transform: scale(.6)
  }

  80% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes ribbonScale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  55% {
    -webkit-transform: scale(.6);
    transform: scale(.6)
  }

  80% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes littleRPsMove {
  0% {
    -webkit-transform: translate3d(-50%, 3.2rem, 0);
    transform: translate3d(-50%, 3.2rem, 0)
  }

  40% {
    -webkit-transform: translate3d(-50%, 3.2rem, 0);
    transform: translate3d(-50%, 3.2rem, 0)
  }

  60% {
    -webkit-transform: translate3d(-50%, 2.6rem, 0);
    transform: translate3d(-50%, 2.6rem, 0)
  }

  73% {
    -webkit-transform: translate3d(-50%, 2.7rem, 0);
    transform: translate3d(-50%, 2.7rem, 0)
  }

  86% {
    -webkit-transform: translate3d(-50%, 2.6rem, 0);
    transform: translate3d(-50%, 2.6rem, 0)
  }

  to {
    -webkit-transform: translate3d(-50%, 2.7rem, 0);
    transform: translate3d(-50%, 2.7rem, 0)
  }
}

@keyframes littleRPsMove {
  0% {
    -webkit-transform: translate3d(-50%, 3.2rem, 0);
    transform: translate3d(-50%, 3.2rem, 0)
  }

  40% {
    -webkit-transform: translate3d(-50%, 3.2rem, 0);
    transform: translate3d(-50%, 3.2rem, 0)
  }

  60% {
    -webkit-transform: translate3d(-50%, 2.6rem, 0);
    transform: translate3d(-50%, 2.6rem, 0)
  }

  73% {
    -webkit-transform: translate3d(-50%, 2.7rem, 0);
    transform: translate3d(-50%, 2.7rem, 0)
  }

  86% {
    -webkit-transform: translate3d(-50%, 2.6rem, 0);
    transform: translate3d(-50%, 2.6rem, 0)
  }

  to {
    -webkit-transform: translate3d(-50%, 2.7rem, 0);
    transform: translate3d(-50%, 2.7rem, 0)
  }
}

.rp-mask .rp-container .popup-rp-front {
  width: 5.38rem;
  top: 2.84rem;
}

.rp-mask .rp-container .coupon-detail {
  position: absolute;
  top: 4.04rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 4.88rem;
  height: 1.2rem;
  background-color: #f4cea8;
  border-radius: .06rem;
}

.rp-mask .rp-container .coupon-detail-content {
  border: 1px solid #dc9875;
  position: absolute;
  width: 4.7rem;
  height: 1.04rem;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.rp-mask .rp-container .coupon-detail-content .detail-left {
  position: absolute;
  left: .16rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.rp-mask .rp-container .coupon-detail-content .detail-right {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.rp-mask .rp-container .coupon-detail-content .detail-left p.price-top {
  height: .56rem;
  line-height: .56rem;
}

.rp-mask .rp-container .coupon-detail-content .detail-left p .yuan {
  font-size: .26rem;
}

.rp-mask .rp-container .coupon-detail-content .detail-left p .money {
  font-size: .54rem;
  margin-left: -.04rem;
}

.rp-mask .rp-container .coupon-detail-content .detail-left p {
  font-family: PingFangSC-Medium;
  color: #ae352e;
  font-size: .18rem;
}

.rp-mask .rp-container .coupon-detail-content .detail-right-desc {
  text-align: left;
  font: .22rem PingFangSC-Medium;
  color: #ae352e;
}

.rp-mask .rp-container .coupon-detail-content .detail-right .count-down span {
  display: inline-block;
  height: .28rem;
  line-height: .28rem;
  text-align: center;
  font-size: .18rem;
  border-radius: .02rem;
}

.rp-mask .rp-container .coupon-detail-content .detail-right .count-down span.time {
  background-color: #8c6038;
  color: #fff;
  width: .28rem;
}

.double-rp-mask .rp-container .coupon-detail-content .detail-right .count-down span.time-milliseconds {
  width: .2rem
}

.rp-mask .rp-container .coupon-detail-content .detail-right .count-down span.symbol {
  width: .12rem;
  color: #8c6038;
}

.rp-mask .rp-container .coupon-detail-content .detail-right .count-down span.desc {
  font-size: .2rem;
  color: #8c6038;
  margin-left: .08rem;
}

.rp-mask .rp-container .confirm-button,
.rp-mask .rp-container .sub-title {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.rp-mask .rp-container .sub-title {
  top: 5.48rem;
  width: 4.66rem;
}

.rp-mask .rp-container .confirm-button {
  text-align: left;
  top: 6.08rem;
  width: 4.74rem;
  height: .96rem;
  line-height: .96rem;
  font-size: .4rem;
  font-family: PingFangSC-Medium;
  text-indent: 1.7rem;
  color: #bb341a;
  letter-spacing: .1rem;
  background-image: url("data:image/png;base64,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");
  background-size: cover;
}

.rp-mask .rp-container .confirm-button:before {
  content: "";
  position: absolute;
  left: 1.18rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: .38rem;
  height: .5rem;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAzCAMAAAAjOuGKAAAAaVBMVEXqTC/nSiznSywAAADoSyzuTy7vVDLHRTDnSiznSyvTRy3nTCznSivnSiy3QjHmSivtuYC5QjHGQy/hSCvaRyzVRy3nVTPssHjrpHDsn2vrilvARDDpeU/obkbnYT3rl2XORi7AVj7ZUTQnVdZaAAAAD3RSTlMjwXQAYh0PdPDhwKKUVsCMUu7bAAAA3ElEQVQ4y+3V2Q6DIBAFUNxbuwCCG67t/39kodgKpuI8to33xWQ8BpxMMiiQiZErkSLShUfszuEcS+fj7XgBijAkIbqA3An5IOf9iUtRwpa1vuuXpfGKEppbJVESGVEYJZbRVDra8LlWE52yMBTN5f3UM8un0yvySqUhV2+Z/g/e0Im2ZI7AjI9Un6ad/krZynBl8yxxuy8sV5SYuckzPvaP3S3Xr/fZcsW6q8374XXXGa51OCzerHbPwTCxYWteOnXHqoXMVfE987y73f2GA+4j6H4D7kvw/oXu8wf6l24GXHtvLgAAAABJRU5ErkJggg==");
  background-size: cover
}


/* *************************** */

.rp-recommend,
.rp-recommend-v2 {
  background-color: #b4292a;
  width: 100%;
  min-height: 13.34rem
}

.rp-recommend-v2 {
  background-color: #aa292a
}

.rp-recommend-v2 .coupon-info-v2,
.rp-recommend .coupon-info-v2 {
  overflow: hidden;
  width: 100%;
  height: 5.5rem;
  position: relative;
}

.rp-recommend-v2 .coupon-info-v2 .img-rectangle,
.rp-recommend .coupon-info-v2 .img-rectangle {
  position: absolute;
  width: 100%;
  height: 6.4rem;
}

.rp-recommend-v2 .coupon-info-v2 .img-ribbon1,
.rp-recommend .coupon-info-v2 .img-ribbon1 {
  position: absolute;
  width: 1.12rem;
  height: .94rem;
  left: 0;
  top: 0;
}

.rp-recommend-v2 .coupon-info-v2 .img-ribbon2,
.rp-recommend .coupon-info-v2 .img-ribbon2 {
  position: absolute;
  width: 1.46rem;
  height: 1.06rem;
  right: 0;
  top: 0;
}

.rp-recommend-v2 .coupon-info-v2 .coupon-detail,
.rp-recommend .coupon-info-v2 .coupon-detail {
  position: absolute;
  width: 7.26rem;
  height: 6.24rem;
  background-size: contain;
  top: .44rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  overflow: hidden;
}

.rp-recommend-v2 .coupon-info-v2 .coupon-detail-price,
.rp-recommend .coupon-info-v2 .coupon-detail-price {
  font-family: PingFangSC-Semibold;
  font-size: .62rem;
  color: #c73535;
  height: 1.04rem;
  line-height: 1.04rem;
  margin: 1.44rem auto .1rem;
}

.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down {
  font-family: PingFangSC-Medium;
  margin-bottom: .26rem;
}

.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down span,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down span {
  display: inline-block;
  height: .5rem;
  line-height: .5rem;
  font-size: .34rem;
  border-radius: .04rem;
}

.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down span.time,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down span.time {
  background-color: #8c6038;
  color: #fff;
  width: .5rem;
}

.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down span.symbol,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down span.symbol {
  width: .2rem;
  color: #8c6038;
}

.rp-recommend-v2 .coupon-info-v2 .coupon-detail-count-down span.desc,
.rp-recommend .coupon-info-v2 .coupon-detail-count-down span.desc {
  font-size: .36rem;
  color: #8c6038;
  margin-left: .18rem;
}

.rp-recommend-v2 .coupon-info-v2 .coupon-detail-desc,
.rp-recommend .coupon-info-v2 .coupon-detail-desc {
  opacity: .6;
  font-family: PingFangSC-Regular;
  font-size: .32rem;
  color: #8c6038;
}

.red-packet-list {
  width: 7.02rem;
  max-width: 640px;
  margin: 0 auto;
  background-color: #c74d35;
  overflow: hidden;
}

.red-packet-list .duo-opt-wrapper {
  position: relative;
  width: 7.02rem;
  max-width: 640px;
  height: 1.06rem;
  z-index: 20;
  padding: .2rem;
  background-color: #c74d35;
}

.red-packet-list .duo-opt-wrapper .duo-opt-container {
  border-radius: .66rem;
  overflow: hidden;
  height: .66rem;
  background-color: #c3472f;
}

.red-packet-list .duo-opt-wrapper .duo-opt-list {
  position: relative;
  width: auto;
  height: .8rem;
  white-space: nowrap;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.red-packet-list .duo-opt-wrapper .duo-opt-list .opt-item {
  position: relative;
  display: inline-block;
  /*width: 1rem;*/
  padding: 0 .2rem;
  height: .66rem;
  text-align: center;
  font-family: PingFangSC-Regular;
  color: hsla(0, 0%, 100%, .6);
}

.red-packet-list .duo-opt-wrapper .duo-opt-list .current {
  color: #fff;
  font-family: PingFangSC-Medium;
  background-color: #b73f27;
  border-radius: .66rem;
}

.red-packet-list .duo-opt-wrapper .duo-opt-list .opt-item span {
  height: .66rem;
  line-height: .66rem;
}

.red-packet-list .duo-opt-wrapper .duo-opt-list .opt-item .desc {
  font-size: .28rem;
}

.red-packet-list .duo-opt-wrapper .duo-opt-list .current .desc {
  width: .55rem;
}

.red-packet-list .duo-goods-list {
  position: relative;
}

.react-base-list-wrapper {
  position: relative;
  padding: 0 .2rem;
  width: 7.02rem;
  border-radius: .1rem;
  margin: 0 auto;
  text-align: left;
  line-height: 1;
}

.red-packet-list .duo-goods-list .react-base-list-wrapper {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
}

.double-grid-one {
  width: 50%;
  position: relative;
  display: inline-block;
  margin-bottom: .06rem;
}

.react-base-list-wrapper .double-grid-one {
  margin-bottom: .18rem;
  float: left;
}

.double-grid-item {
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.react-base-list-wrapper .gap-right {
  margin-right: .09rem;
}

.react-base-list-wrapper .gap-left {
  margin-left: .09rem;
}

.react-base-list-wrapper .double-grid-item {
  border-radius: .02rem;
  height: 4.82rem;
}

.double-grid-item .goods-image img,
.double-grid-item img img {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 3.72rem;
}

.double-grid-item .goods-image,
.double-grid-item img {
  width: 3.72rem;
  height: 3.72rem;
  overflow: hidden;
}

/* .react-base-list-wrapper .double-grid-item .std-goods-image-square {
  background: url(https://pinduoduoimg.yangkeduo.com/jinbao/default_image_square.png) no-repeat;
  background-size: auto auto;
  background-size: contain;
} */

.react-base-list-wrapper .double-grid-item .goods-image {
  position: relative;
  width: 3.14rem;
  height: 3.14rem;
  margin: .04rem auto .02rem;
}

.react-base-list-wrapper .double-grid-item .goods-image .goods-name-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.02rem;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .75)), to(transparent));
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent);
}

.double-grid-item .goods-name {
  position: relative;
  padding: .16rem .16rem 0;
  width: 100%;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: justify;
  font-size: .26rem;
  color: #333;
  height: .88rem;
  line-height: 1.5;
}

.react-base-list-wrapper .double-grid-item .goods-image .goods-name-bg .goods-name {
  position: absolute;
  bottom: .14rem;
  left: 0;
  width: 100%;
  height: .68rem;
  font-size: .26rem;
  line-height: .34rem;
  padding: 0 .18rem;
  color: #fff;
}

.double-grid-item .detail {
  width: 100%;
  padding: .04rem .14rem 0;
  position: relative;
  height: .62rem;
  font-size: 0;
  line-height: 1.5;
}

.react-base-list-wrapper .double-grid-item .detail {
  height: .74rem;
  padding: 0;
  width: 2.9rem;
  margin: 0 auto;
  color: #e02e24;
  text-align: left;
}

.double-grid-item .detail b {
  color: #ee2e3a;
  font-weight: 700;
}

.react-base-list-wrapper .double-grid-item .detail .after-price-hint {
  color: #e02e24;
  position: relative;
  vertical-align: top;
  height: .74rem;
  line-height: .8rem;
  font-size: .24rem;
}

.react-base-list-wrapper .double-grid-item .detail .price-icon {
  color: #e02e24;
  font-size: .24rem;
  font-weight: 700;
}

.react-base-list-wrapper .double-grid-item .detail .after-price,
.react-base-list-wrapper .double-grid-item .detail .price {
  color: #e02e24;
  font-size: .36rem;
  font-weight: 700;
  height: .74rem;
  line-height: .74rem;
}

.double-grid-item .detail .info {
  position: absolute;
  right: .14rem;
  bottom: .16rem;
  top: .1rem;
  font-size: .26rem;
  color: #9c9c9c;
}

.react-base-list-wrapper .double-grid-item .detail .info {
  font-size: .28rem;
  top: .2rem;
  color: #959595;
  right: 0;
}

.react-base-list-wrapper .double-grid-item .buy-btn {
  display: block;
  margin: 0 auto;
  width: 2.9rem;
  text-align: center;
  height: .72rem;
  line-height: .72rem;
  background-color: #e02e24;
  color: #fff;
  font-size: .3rem;
  border-radius: .04rem;
}


.available-coupon {
  position: fixed;
  width: 3.02rem;
  bottom: .6rem;
  height: 1.54rem;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS4AAACaBAMAAADlQrinAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAtUExURUdwTOuwkf////RwAPV0APV0AP////////////V0AP////////VzAP////Z1AEVZzjwAAAANdFJOUwAGKSmoqaqrzMyobm6g86d0AAABIUlEQVR42u3bwWkDMRBAUZvE91wDOaSilBBcQlpII+7BjeQYlpgtQarBHQwsSBl59X4FnzWeDzPocAAAAAAAAJ15u9RtrI1YrpHW01atZl7r8h54vdY0r/U78PpJ9LoFXpt/xtLOawm8aqLXymv3Xp+J/8ffwOuU6PUVzftEr2jeHxO9Xlp+r/I/3+s50esceH0kev2Zq3ledW4vHercoTJoh4oO6VDHDlXznlfHDpVBO1R0SIc6dqgO2qGqQ7vwspfToRk7NOperurQLjpkL8drxg65D+mQvZwO8XIf0qHH6ZC9nA7N2CH7Qh2yl9MhHXIfMu/drdyHdGjkDrkP6ZC93HRel0SvpeU7w4Zetwd8lznqO9ZR3/0CAAAAAIAW3AFHtf5DlrgeaAAAAABJRU5ErkJggg==");
  background-size: cover;
  z-index: 100;
}

.available-coupon-container {
  width: 2.5rem;
  height: 1.02rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-box-shadow: 0 0 10px 1px #e67c00;
  box-shadow: 0 0 10px 1px #e67c00;
  -webkit-animation: shine 2s linear infinite;
  animation: shine 2s linear infinite;
}

.rp-recommend-v2 .coupon-info,
.rp-recommend .coupon-info {
  overflow: hidden;
  text-align: center;
}

.available-coupon-container .coupon-info {
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1.02rem;
  text-align: center;
  padding-top: .14rem;
}

.available-coupon-container .coupon-info-type {
  padding-top: .3rem;
}

.available-coupon-container .coupon-info-amount {
  font-family: PingFangSC-Semibold;
  color: #fff;
}

.available-coupon-container .coupon-info-amount .amount-icon {
  font-size: .22rem;
}

.available-coupon-container .coupon-info-amount .amount-price {
  font-size: .32rem;
}

.available-coupon-container .coupon-timer {
  position: absolute;
  right: 0;
  width: 1.5rem;
  height: 1.02rem;
  padding: .22rem 0 0 .2rem;
  color: #58595b;
  font-size: .2rem;
  font-family: PingFangSC-Regular;
}

.available-coupon-container .coupon-timer .count-down {
  color: #e02e24;
  font-size: .22rem;
  font-family: PingFangSC-Medium;
  margin-bottom: .02rem;
}

/* loadding */
.loadding {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  z-index: 1000;
}

.ring-1 {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  width: 15px;
  height: 15px;
  margin: 0 auto;
  padding: 10px;
  border: 5px dashed #df2127;
  border-radius: 100%;
  -webkit-animation: loadingD 1.5s .3s cubic-bezier(.17, .37, .43, .67) infinite;
          animation: loadingD 1.5s .3s cubic-bezier(.17, .37, .43, .67) infinite;
}

@-webkit-keyframes loadingD {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loadingD {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.no-data {
  text-align: center;
  color: #fff;
  font-size: .26rem;
  line-height: 2;
  margin-bottom: .5rem;
}