.getcoupon {
  background: #fff;
  width: 100%;
}
.getcoupon-banner {
  width: 100%;
  height: calc(500*var(--rem));
  background-size: cover;
  background-position: center;
}
.banCont {
  width: 82%;
  height: calc(500*var(--rem));
  position: relative;
  margin: 0 auto;
}
.banContBtn {
  position: absolute;
  left: 42px;
  bottom: 77px;
  width: 235px;
  height: 50px;
}
.couponBox {
  width: 82%;
  margin: 0 auto;
  padding: calc(32*var(--rem)) 0;
}
.typeTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(48*var(--rem));
  position: relative;
  font-size: calc(50*var(--rem));
  color: #333333;
  margin-bottom: calc(64*var(--rem));
}
.typeTitle::before {
  content: '';
  width: calc(80*var(--rem));
  height: calc(40*var(--rem));
  margin-right: calc(24*var(--rem));
  background: url('../images/l.png');
  background-size: contain;
}
.typeTitle::after {
  content: '';
  width: calc(80*var(--rem));
  height: calc(40*var(--rem));
  margin-left: calc(24*var(--rem));
  background: url('../images/r.png');
  background-size: contain;
}
.coupons li {
  width: 375px;
  margin-right: 37px;
  float: left;
}
.coupons li:nth-child(3n) {
  margin-right: 0;
}
.coupTime {
  padding-left: 10px;
  color: #333333;
  font-size: 14px;
}
.isRecTime {
  padding-left: 10px;
  color: rgba(51, 51, 51, 0.5);
  font-size: 14px;
}
.isCoups {
  width: 375px;
  height: 278px;
  position: relative;
}
.useType {
  position: absolute;
  left: 12px;
  top: 14px;
  font-size: 16px;
  color: #fff;
}
.couponPriceBox {
  padding-top: 34px;
}
.couponPriceBox {
  text-align: center;
  color: #fff;
}
.couponPriceBox b {
  font-size: 30px;
  display: inline-block;
}
.couponPriceBox span:nth-child(2) {
  font-size: 42px;
}
.couponPriceBox span:nth-child(3) {
  font-size: 36px;
}
.sq {
  background: url('../images/s1.png') no-repeat;
}
.sqm {
  background: url('../images/s3.png') no-repeat;
}
.isRecSq {
  background: url('../images/s2.png') no-repeat;
}
.sqColor {
  color: #172047;
}
.isRecSqColor {
  color: #79757B !important;
}
.sqPriceColor {
  color: #B77420 !important;
}
.isRecSqPriceColor {
  color: #CD9C66 !important;
}
.mq {
  background: url('../images/m1.png') no-repeat;
}
.mqm {
  background: url('../images/m3.png') no-repeat;
}
.isRecMq {
  background: url('../images/m2.png') no-repeat;
}
.mqColor {
  color: #764000 !important;
}
.isRecMqColor {
  color: #A47C42 !important;
}
.zq {
  background: url('../images/z1.png') no-repeat;
}
.zqm {
  background: url('../images/z3.png') no-repeat;
}
.isRecZq {
  background: url('../images/z2.png') no-repeat;
}
.xq {
  background: url('../images/x1.png') no-repeat;
}
.xqm {
  background: url('../images/x3.png') no-repeat;
}
.isRecXq {
  background: url('../images/x2.png') no-repeat;
}
.dq {
  background: url('../images/d1.png') no-repeat;
}
.dqm {
  background: url('../images/d3.png') no-repeat;
}
.isRecDq {
  background: url('../images/d2.png') no-repeat;
}
.couponDesc {
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.couponBtn {
  width: 138px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 18px;
  border-radius: 15px;
  margin-top: 21px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.isRecevedBtn {
  width: 138px;
  height: 30px;
  border-radius: 15px;
  margin-top: 21px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
.couponFoot {
  width: 100%;
  padding: calc(32*var(--rem)) 0;
  background: #F7F9FA;
}
.couponFootCont {
  width: 82%;
  height: 100%;
  margin: 0 auto;
}
.couponDescBox > p:nth-child(1),
.couponDescBox > p:nth-child(3) {
  color: #171717;
  font-size: 18px;
}
.couponDescBox > p:nth-child(2),
.couponDescBox > p:nth-child(4),
.couponDescBox > p:nth-child(5),
.couponDescBox > p:nth-child(6),
.couponDescBox > p:nth-child(7) {
  padding-left: 15px;
  color: #666666;
  font-size: 16px;
}
.couponDescBox > p:nth-child(3) {
  margin-top: 35px;
}
.couponDescBox > p {
  margin-bottom: 10px;
}
.getcoupon-type {
  height: 35px;
  line-height: 35px;
  background: #874FFC;
  padding-left: 20px;
  font-size: 16px;
  color: #fff;
}
.isGrid {
  background: url('../images/1577172659236.png') !important;
}
.isGridBtn {
  width: 200px;
  height: 36px;
  background: linear-gradient(130deg, rgba(255, 144, 141, 0.71), rgba(255, 43, 21, 0.71));
  background-color: #FF2B15;
  border-radius: 18px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 18px;
  margin: 0 auto;
  cursor: pointer;
}
.getCoupon-price-f {
  font-size: 18px;
  color: #fff;
  vertical-align: super;
}
.getCoupon-price {
  font-size: 75px;
  color: #fff;
}
.getCoupon-desc {
  font-size: 18px;
  color: #fff;
}
.getcoupon-type-desc {
  padding-top: 10px;
  color: #fff;
  font-size: 14px;
}
.gecoupons-time {
  color: #666666;
  font-size: 14px;
  margin-top: 50px;
  margin-bottom: 14px;
}
.getcoupon-btn {
  width: 200px;
  height: 36px;
  background: linear-gradient(90deg, #127bfd 0%, #5da1f5 100%);
  background-color: #2F88F6;
  border-radius: 18px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 18px;
  margin: 0 auto;
  cursor: pointer;
}
.buycoupon-btn {
  width: 200px;
  height: 36px;
  background: linear-gradient(90deg, #127bfd 0%, #5da1f5 100%);
  background-color: #2F88F6;
  border-radius: 18px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 18px;
  margin: 0 auto;
  cursor: pointer;
}
.getcoupon-isBtn {
  pointer-events: none;
  background: #B0B7BD;
}
.is_received {
  background: url('../images/1563431715780.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
.getcopons-nums {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(51, 51, 51, 0.46);
}
.getCoupon-mode {
  width: 321px;
  height: 195px;
  margin: 215px auto 0;
  background: #ffffff;
  border-radius: 8px;
  position: relative;
  padding-top: 23px;
}
.getcopons-desc {
  color: #313131;
  font-size: 18px;
  text-align: center;
  font-size: 16px;
}
.getcopons-nums-box {
  width: 180px;
  margin: 0 auto;
  margin-top: 20px;
  height: 44px;
}
.getcopons-nums-box span {
  width: 44px;
  height: 44px;
  cursor: pointer;
  text-align: center;
  line-height: 44px;
  color: #fff;
  float: left;
  font-size: 20px;
  border-radius: 50%;
}
.getcopons-nums-box > span:nth-child(1) {
  background: #A2CBFE;
}
.getcopons-nums-box > span:nth-child(3) {
  background: #157DFD;
}
.getcopons-nums-box input {
  height: 44px;
  width: 92px;
  /* color: #fff; */
  text-align: center;
  color: #313131;
  font-size: 28px;
  font-weight: bold;
  float: left;
}
.buyBtnBox {
  height: 54px;
  margin-top: 33px;
}
.buyCancleBtn {
  width: 160px;
  background: #E2E2E2;
  text-align: center;
  color: #5D5D5D;
  font-size: 18px;
  float: left;
  height: 54px;
  line-height: 54px;
  cursor: pointer;
}
.buyCouponBtn {
  width: 161px;
  height: 54px;
  float: left;
  background: linear-gradient(90deg, #127bfd 0%, #5da1f5 100%);
  background-color: #2F88F6;
  text-align: center;
  line-height: 54px;
  color: #fff;
  font-size: 18px;
  margin: 0 auto;
  cursor: pointer;
}
.getcopons-nums-close {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  font-size: 20px;
  cursor: pointer;
  right: 0;
  top: 0;
}
.typeBtn {
  width: 13%;
  height: 40px;
  background: #FF5E15;
  font-size: calc(24*var(--rem));
  cursor: pointer;
  color: #FFFFFF;
  line-height: 40px;
  text-align: center;
  margin: 0 auto;
  border-radius: 30px;
}