* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
html,
body {
  font-family: "微软雅黑", Helvetica, Arial, sans-serif;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 750px;
  font-size: .7rem;
  overflow-x: hidden;
}
.hide {
  display: none;
}
.hide-o {
  z-index: -1;
}
.m-auto {
  margin-left: auto;
  margin-right: auto;
}
.bg {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #e2e2e2;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  opacity: 0;
}
.op-1 {
  opacity: 1;
}
.bg-c {
  background-color: #e2e2e2;
}
.word {
  width: 17.76rem;
}
.red {
  color: #e60044;
}
.op-5 {
  opacity: .55;
}
.wrap {
  background-color: #e25d4a;
  width: 100%;
  min-height: 8rem;
  padding-bottom: 0.4rem;
}
.bgwrap {
  width: 100%;
  height: 5.04rem;
  position: relative;
}
.bgwrap .before {
  width: 100%;
  height: 5.04rem;
  position: absolute;
  bottom: 0;
  left: 0;
}
.bgwrap .after {
  position: absolute;
  width: 100%;
  height: 5.70666667rem;
  bottom: 5.04rem;
  left: 0;
}
.bgwrap .after .afterbg {
  width: 100%;
  height: 5.70666667rem;
}
.bgwrap .after .rets {
  position: absolute;
  width: 5.6rem;
  top: 1.86666667rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  text-align: center;
  color: #fcab10;
}
.bgwrap .after .success {
  font-size: 0.65866667rem;
}
.bgwrap .after .success p {
  height: 1.06666667rem;
  line-height: 1.06666667rem;
}
.bgwrap .after .successed {
  margin-top: 0.26666667rem;
  font-size: 0.96533333rem;
}
.bgwrap .after .successed p {
  height: 1.06666667rem;
  line-height: 1.06666667rem;
}
.words {
  margin-top: 1.2rem;
}
.words .g1 {
  font-size: 1.06666667rem;
  line-height: 1.6rem;
  color: #fff;
}
.words .g2 {
  font-size: 1.06666667rem;
  margin-bottom: 0.8rem;
  color: #fff;
  opacity: .84;
}
.words .g3 {
  font-size: 0.77333333rem;
  color: #fff;
  opacity: .84;
}
.main-after {
  margin-top: -5.04rem;
}
.white {
  margin-top: 12.21333333rem;
}
.bb {
  width: 100%;
  height: 3.2rem;
}
.btns-c {
  margin-top: 0.93333333rem;
  width: 15.6rem;
  font-size: 0.90133333rem;
}
.btns-c .inp {
  width: 100%;
  border: none;
  color: #989898;
  height: 1.86666667rem;
  border-radius: 0.93333333rem;
  background-color: #fff;
  text-align: center;
  margin-bottom: 0.53333333rem;
  font-size: 0.90133333rem;
}
.btns-c .btn {
  color: #fff;
  height: 1.86666667rem;
  line-height: 1.86666667rem;
  border-radius: 0.93333333rem;
  background-color: #fcab10;
  margin-bottom: 0.53333333rem;
}
.rule-tip {
  margin-top: 1.06666667rem;
  padding-bottom: 1.06666667rem;
  color: #fff;
  font-size: 0.69333333rem;
}
.rule-tip .check {
  width: 0.66666667rem;
  display: inline-block;
}
.logo-word {
  width: 6.88rem;
  margin-top: 0.8rem;
  margin-bottom: 0.53333333rem;
}
.tel {
  color: #a9a9a9;
  text-align: center;
  padding-bottom: 0.66666667rem;
}
.couponList-wrap {
  width: 90%;
  margin-top: 0.8rem;
}
.couponList-wrap .list-one {
  color: #e25d4a;
  background: url("img/bg-list.png") center center no-repeat;
  background-size: 100%;
  width: 100%;
  min-height: 5.81333333rem;
  margin-bottom: 0.4rem;
}
.couponList-wrap .list-one .left {
  max-width: 13.6rem;
}
.couponList-wrap .list-one .left .number {
  min-width: 1.6rem;
  min-height: 2.66666667rem;
  font-size: 2.66666667rem;
  margin-left: 0.66666667rem;
  margin-right: 0.26666667rem;
  text-align: center;
}
.couponList-wrap .list-one .left .left-r {
  min-width: 8rem;
}
.couponList-wrap .list-one .left .left-r p {
  font-size: 0.58666667rem;
  padding-left: 0.26666667rem;
  text-align: left;
}
.couponList-wrap .list-one .left .left-r p.yuan {
  font-size: 1.12rem;
  line-height: 1.01333333rem;
  padding-left: 0;
  font-family: "黑体";
}
.couponList-wrap .list-one .left .left-r p.fw {
  position: relative;
}
.couponList-wrap .list-one .left .left-r p.fw .d {
  position: absolute;
  right: -1.70666667rem;
  top: 0;
}
.couponList-wrap .list-one .left .left-r p.date {
  opacity: .8;
}
.couponList-wrap .list-one .right .btn-use {
  width: 4.26666667rem;
  height: 1.46666667rem;
  line-height: 1.46666667rem;
  background-color: #e25d4a;
  color: #fff;
  margin-right: 1.06666667rem;
  text-align: center;
  display: block;
}
.mask .maskBox.rules {
  width: 80%;
  max-width: 90%;
  top: 50%;
}
.mask .maskBox.rules .main {
  line-height: 1.30666667rem;
  font-size: 0.70666667rem;
}
.mask .ewBox {
  width: 80%;
  padding: 1.33333333rem 1.6rem 0.26666667rem;
  border-radius: 0.26666667rem;
  color: #000000;
}
.mask .ewBox .hd {
  font-size: 0.82666667rem;
  line-height: 1.33333333rem;
  margin-bottom: 0.4rem;
}
@media screen and (min-width: 750px) {
  .bg {
    background-size: 20rem auto;
  }
}
.animated {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
