.coupon-style .container {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.coupon-style .container .button-vip-benefit-get {
  width: 100%;
  height: 100%;
  display: inline-block;
  cursor: pointer;
}
.coupon-style .container .button-vip-benefit-had .btn, .coupon-style .container .button-vip-benefit-begin .btn, .coupon-style .container .button-vip-benefit-over .btn, .coupon-style .container .button-vip-benefit-disabled .btn {
  opacity: 0.6;
  cursor: not-allowed;
}
.coupon-style .container .toUse {
  opacity: 1;
  cursor: pointer;
}
.coupon-style .container .couponIcon {
  width: 120px;
  height: 120px;
  display: inline-block;
  vertical-align: middle;
}
.coupon-style .container .couponIcon img {
  width: 100%;
  height: 100%;
}
.coupon-style .container .deliveryFree, .coupon-style .container .interest-free, .coupon-style .container .giveaway, .coupon-style .container .expansion {
  font-size: 56px;
  font-family: "HonorBrand";
}
.coupon-style .container .amount, .coupon-style .container .discount, .coupon-style .container .pointer {
  font-family: "HonorBrand";
  font-size: 64px;
}
.coupon-style .container .amount span, .coupon-style .container .discount span, .coupon-style .container .pointer span {
  font-size: 30px;
}
.coupon-style .container .col-one, .coupon-style .container .col-two, .coupon-style .container .col-three, .coupon-style .container .col-four {
  margin-top: 10px;
  margin-bottom: 10px;
}
.coupon-style .container .col-two {
  margin-right: 20px;
}
.coupon-style .container .col-two:nth-child(2n) {
  margin-right: 0px;
}
.coupon-style .container .col-three {
  margin-right: 20px;
}
.coupon-style .container .col-three .couponIcon {
  width: 80px;
  height: 80px;
}
.coupon-style .container .col-three.style3 .couponIcon {
  margin-top: -27px;
}
.coupon-style .container .col-three:nth-child(3n) {
  margin-right: 0px;
}
.coupon-style .container .col-four {
  margin-right: 20px;
}
.coupon-style .container .col-four .couponIcon {
  width: 60px;
  height: 60px;
  margin-top: -11px;
}
.coupon-style .container .col-four:nth-child(4n) {
  margin-right: 0px;
}
.coupon-style .container .col-four .deliveryFree, .coupon-style .container .col-four .interest-free, .coupon-style .container .col-four .giveaway, .coupon-style .container .col-four .expansion {
  font-size: 40px;
}
.coupon-style .container .col-four .amount, .coupon-style .container .col-four .discount, .coupon-style .container .col-four .pointer {
  font-size: 50px;
}
.coupon-style .container .col-four .amount span, .coupon-style .container .col-four .discount span, .coupon-style .container .col-four .pointer span {
  font-size: 24px;
}
.coupon-style .coupon-box {
  position: relative;
  height: 180px;
  border-radius: 16px;
}
.coupon-style .coupon-box * {
  box-sizing: border-box;
}
.coupon-style .coupon-box.col-one {
  width: 1200px;
}
.coupon-style .coupon-box.col-one.style2 {
  height: 200px;
}
.coupon-style .coupon-box.col-one.style2 .coupon {
  width: calc(100% - 24px);
  height: 176px;
  top: 12px;
  left: 24px;
  padding: 12px;
}
.coupon-style .coupon-box.col-one.style2 .coupon .left {
  width: 287px;
}
.coupon-style .coupon-box.col-one.style2 .coupon .right {
  width: 600px;
  padding-left: 56px;
}
.coupon-style .coupon-box.col-one.style2 .coupon .right span {
  width: 600px;
}
.coupon-style .coupon-box.col-one.style2 .action-area {
  width: 220px;
  height: 200px;
}
.coupon-style .coupon-box.col-one.style2 .action-area .btn {
  width: 108px;
  height: 46px;
}
.coupon-style .coupon-box.col-one.style2 .action-area .btn span {
  font-size: 36px;
  color: #874B00;
  line-height: 46px;
}
.coupon-style .coupon-box.col-one.style2 .action-area .btn span.get-coupon {
  width: 72px;
  height: 92px;
}
.coupon-style .coupon-box.col-one.style3 .coupon {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.coupon-style .coupon-box.col-one.style3 .coupon .left {
  width: 273px;
}
.coupon-style .coupon-box.col-one.style3 .coupon .right {
  width: 630px;
  padding-left: 15px;
}
.coupon-style .coupon-box.col-one.style3 .action-area {
  width: 296px;
}
.coupon-style .coupon-box.col-one.style3 .action-area .btn {
  width: 176px;
  height: 48px;
  background: #D52200;
  border-radius: 50px;
}
.coupon-style .coupon-box.col-one.style3 .action-area .btn span {
  width: 100%;
  height: 30px;
  font-size: 24px;
  line-height: 30px;
  color: #fff;
}
.coupon-style .coupon-box.col-two {
  width: 590px;
}
.coupon-style .coupon-box.col-two.style1 .coupon .left {
  width: 190px;
}
.coupon-style .coupon-box.col-two.style1 .coupon .right {
  width: 374px;
  padding-left: 12px;
}
.coupon-style .coupon-box.col-two.style1 .coupon .right span {
  width: 224px;
}
.coupon-style .coupon-box.col-two.style1 .action-area {
  width: 180px;
  height: 180px;
}
.coupon-style .coupon-box.col-two.style1 .action-area .btn {
  width: 116px;
  height: 116px;
  margin-left: 46px;
}
.coupon-style .coupon-box.col-two.style1 .action-area .btn span {
  font-family: HonorBrand;
  font-size: 24px;
  color: #6A3428;
  letter-spacing: 0;
  text-align: center;
  line-height: 30px;
}
.coupon-style .coupon-box.col-two.style1 .action-area .btn span.get-coupon {
  width: 48px;
  height: 60px;
}
.coupon-style .coupon-box.col-two.style2 {
  height: 200px;
}
.coupon-style .coupon-box.col-two.style2 .coupon {
  width: calc(100% - 24px);
  height: 176px;
  left: 24px;
  top: 12px;
  padding: 8px;
}
.coupon-style .coupon-box.col-two.style2 .coupon .left {
  width: 180px;
}
.coupon-style .coupon-box.col-two.style2 .coupon .right {
  width: 215px;
  padding-left: 12px;
}
.coupon-style .coupon-box.col-two.style2 .coupon .right span {
  width: 200px;
}
.coupon-style .coupon-box.col-two.style2 .action-area {
  width: 170px;
  height: 200px;
}
.coupon-style .coupon-box.col-two.style2 .action-area .btn {
  width: 108px;
  height: 46px;
}
.coupon-style .coupon-box.col-two.style2 .action-area .btn span {
  font-size: 36px;
  color: #874B00;
  line-height: 46px;
}
.coupon-style .coupon-box.col-two.style2 .action-area .btn span.get-coupon {
  width: 72px;
  height: 92px;
}
.coupon-style .coupon-box.col-two.style3 .coupon {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.coupon-style .coupon-box.col-two.style3 .coupon .left {
  width: 196px;
}
.coupon-style .coupon-box.col-two.style3 .coupon .right {
  width: 394px;
  padding-left: 8px;
}
.coupon-style .coupon-box.col-two.style3 .coupon .right span {
  width: 230px;
}
.coupon-style .coupon-box.col-two.style3 .action-area {
  width: 156px;
  justify-content: left;
}
.coupon-style .coupon-box.col-two.style3 .action-area .btn {
  width: 128px;
  height: 48px;
  background: #D52200;
  border-radius: 50px;
}
.coupon-style .coupon-box.col-two.style3 .action-area .btn span {
  width: 100%;
  height: 30px;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 30px;
}
.coupon-style .coupon-box.col-three {
  width: 386px;
  height: 275px;
}
.coupon-style .coupon-box.col-three .coupon {
  flex-direction: column;
  height: 242px;
  padding: 20px 0;
}
.coupon-style .coupon-box.col-three .coupon .left {
  height: 76px;
  line-height: 76px;
}
.coupon-style .coupon-box.col-three .coupon .left span.content {
  font-size: 56px;
}
.coupon-style .coupon-box.col-three .coupon .right {
  margin-top: 3px;
  width: 100%;
  text-align: center;
  padding: 0 10px;
}
.coupon-style .coupon-box.col-three .coupon .right span {
  width: 330px;
  height: 34px;
  line-height: 34px;
}
.coupon-style .coupon-box.col-three .coupon .right span:last-child {
  margin-top: 0;
}
.coupon-style .coupon-box.col-three.style1 .action-area {
  height: 98px;
  width: 100%;
}
.coupon-style .coupon-box.col-three.style1 .action-area .btn {
  width: 208px;
  height: 68px;
  line-height: 68px;
  margin-top: 24px;
}
.coupon-style .coupon-box.col-three.style1 .action-area .btn span {
  color: #6A3428;
  letter-spacing: 0;
  text-align: center;
  width: 100%;
  height: auto;
  font-size: 22px;
  font-family: HonorBrand;
}
.coupon-style .coupon-box.col-three.style3 {
  width: 386px;
  height: 261px;
}
.coupon-style .coupon-box.col-three.style3 .coupon {
  height: 170px;
  padding: 15px 0 0;
}
.coupon-style .coupon-box.col-three.style3 .action-area {
  width: 100%;
  height: 90px;
}
.coupon-style .coupon-box.col-three.style3 .action-area .btn {
  width: 192px;
  height: 48px;
  background: #D52200;
  border-radius: 50px;
}
.coupon-style .coupon-box.col-three.style3 .action-area .btn span {
  color: #fff;
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  font-size: 24px;
  text-align: center;
  font-weight: 500;
}
.coupon-style .coupon-box.col-four {
  width: 285px !important;
  height: 275px;
}
.coupon-style .coupon-box.col-four.style1 {
  height: 203px;
}
.coupon-style .coupon-box.col-four.style1 .coupon {
  height: 178px;
  padding: 17px 0 0;
}
.coupon-style .coupon-box.col-four.style1 .coupon .left {
  height: 48px;
  line-height: 48px;
}
.coupon-style .coupon-box.col-four.style1 .coupon .left span.content {
  height: 48px;
  line-height: 1;
  font-size: 40px !important;
}
.coupon-style .coupon-box.col-four.style1 .coupon .right {
  margin-top: 0;
  padding: 0 16px !important;
  justify-content: center;
  height: 62px;
}
.coupon-style .coupon-box.col-four.style1 .coupon .right span {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.coupon-style .coupon-box.col-four.style1 .action-area {
  height: 72px;
  width: 100%;
}
.coupon-style .coupon-box.col-four.style1 .action-area .btn {
  width: 156px;
  height: 52px;
  line-height: 40px;
  background: #D52200;
  border-radius: 50px;
  margin-top: 12px;
}
.coupon-style .coupon-box.col-four.style1 .action-area .btn span {
  width: 100%;
  height: auto;
  font-size: 22px;
  color: #6A3428;
  font-family: HonorBrand;
}
.coupon-style .coupon-box.col-four.style3 {
  width: 386px;
  height: 192px;
}
.coupon-style .coupon-box.col-four.style3 .coupon {
  height: 122px;
  padding: 12px 0 0;
}
.coupon-style .coupon-box.col-four.style3 .coupon .left {
  height: 48px;
  line-height: 48px;
}
.coupon-style .coupon-box.col-four.style3 .coupon .left span.content {
  height: 48px;
  line-height: 1;
  font-size: 40px !important;
}
.coupon-style .coupon-box.col-four.style3 .coupon .right {
  margin-top: 0;
}
.coupon-style .coupon-box.col-four.style3 .coupon .right span {
  width: 249px;
  height: 30px;
  line-height: 30px;
}
.coupon-style .coupon-box.col-four.style3 .action-area {
  width: 100%;
  height: 62px;
}
.coupon-style .coupon-box.col-four.style3 .action-area .btn {
  width: 136px;
  height: 40px;
  background: #D52200;
  border-radius: 50px;
}
.coupon-style .coupon-box.col-four.style3 .action-area .btn span {
  color: #fff;
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  font-size: 24px;
  text-align: center;
  font-weight: 500;
}
.coupon-style .coupon-box.col-four.style3 .couponIcon {
  margin-top: -27px;
}
.coupon-style .coupon-box.col-four .coupon {
  flex-direction: column;
  height: 242px;
  padding: 20px 0;
}
.coupon-style .coupon-box.col-four .coupon .left {
  height: 76px;
  line-height: 76px;
}
.coupon-style .coupon-box.col-four .coupon .left span.content {
  font-size: 56px;
}
.coupon-style .coupon-box.col-four .coupon .right {
  margin-top: 3px;
  width: 100%;
  text-align: center;
  padding-left: 10px;
}
.coupon-style .coupon-box.col-four .coupon .right span {
  width: 330px;
  height: 34px;
  line-height: 34px;
}
.coupon-style .coupon-box.col-four .coupon .right span:last-child {
  margin-top: 0;
}
.coupon-style .coupon-box .superscript {
  position: absolute;
  height: 26px;
  background: #FE4927;
  border-radius: 12px 0 12px 0;
  color: #fff;
  z-index: 9;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  min-width: 56px;
  padding: 0 12px;
}
.coupon-style .coupon-box .coupon {
  position: absolute;
  display: flex;
  align-items: center;
  top: 12px;
  left: 12px;
  width: calc(100% - 24px);
  height: 156px;
  border-radius: 16px;
  overflow: hidden;
}
.coupon-style .coupon-box .coupon .left {
  width: 263px;
  text-align: center;
  height: 156px;
  line-height: 156px;
  font-size: 30px;
  color: #FE4927;
  font-weight: 500;
}
.coupon-style .coupon-box .coupon .left span.content {
  font-size: 56px;
  color: #FE4927;
  font-weight: 600;
}
.coupon-style .coupon-box .coupon .right {
  display: flex;
  flex-direction: column;
  padding-left: 24px;
}
.coupon-style .coupon-box .coupon .right span {
  font-size: 24px;
  color: #000000;
  letter-spacing: 0;
  line-height: 34px;
  font-weight: 500;
  width: 560px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coupon-style .coupon-box .coupon .right span:last-child {
  margin-top: 8px;
  color: rgba(0, 0, 0, 0.6);
}
.coupon-style .coupon-box .action-area {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 180px;
  bottom: 0;
  right: 0;
  z-index: 9;
  border-radius: 0 16px 16px 0;
}
.coupon-style .coupon-box .action-area .btn {
  width: 116px;
  height: 116px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.coupon-style .coupon-box .action-area .btn.disable {
  opacity: 0.65;
}
.coupon-style .coupon-box .action-area .btn span {
  display: inline-block;
  width: 84px;
  font-size: 28px;
  color: #FE4927;
  text-align: center;
  letter-spacing: 0;
  font-weight: 500;
  height: 36px;
  line-height: 36px;
}
.coupon-style .coupon-box .action-area .btn span.get-coupon {
  width: 56px;
  height: 72px;
}