* {
  box-sizing: border-box;
}
i {
  font-style: normal;
}
p,
h3 {
  margin: 0;
}
ul {
  padding: 0;
}
html {
  height: 100%;
}
a:link,
a:visited {
  text-decoration: none;
}
a:active {
  opacity: 0.7;
}
input[type="text"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
body {
  min-height: 100%;
}
body {
  color: #777;
  font-family: "Microsoft YaHei UI", Helvetica, Arial, sans-serif;
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  display: block;
  overflow-x: hidden;
  font-size: 0.61333333rem;
}
.card {
  background: rgba(242, 242, 242, 0.7);
  margin: 0 0.53333333rem;
  border-radius: 0.21333333rem;
}
.main,
.coupon-list,
.intro {
  padding: 0.8rem 0.53333333rem;
}
.container {
  padding-top: 12rem;
  padding-bottom: 0.8rem;
}
.text-center {
  text-align: center;
}
.receive .info {
  font-size: 0.74666667rem;
  color: #1a1a1f;
}
.receive .info i {
  color: #e21a43;
}
.receive .input_mobile {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.64rem 0;
  font-size: 0.85333333rem;
  text-align: center;
  color: rgba(26, 25, 32, 0.4);
  background: #fff;
  border: 1px solid #bbbbbc;
  border-radius: 0.21333333rem;
  outline: none;
}
.receive .btn_receive {
  display: block;
  width: 100%;
  padding: 0.64rem 0.53333333rem;
  margin: 0 auto;
  margin-top: 0.8rem;
  font-size: 0.85333333rem;
  letter-spacing: 0.4em;
  text-align: center;
  color: #fff;
  background: #e31a44;
  border-radius: 0.21333333rem;
}
.coupon-list .white {
  background: #fff;
  padding: 0.26666667rem;
  border-radius: 0.21333333rem;
  margin-top: 0.53333333rem;
}
.coupon-list .coupon-item {
  width: 100%;
  height: 0;
  padding-bottom: 35.58%;
  background: url(../../../base/images/bg_coupon.png) no-repeat center;
  background-size: contain;
}
.coupon-list .coupon-item.sm {
  padding-bottom: 30.98%;
  background: url(../../../base/images/bg_coupon_sm.png) no-repeat center;
  background-size: contain;
}
.coupon-list .l {
  max-width: 12.8rem;
}
.coupon-list .left {
  min-width: 3.2rem;
  text-align: center;
  margin-right: 0.53333333rem;
}
.coupon-list .left .rmb {
  display: inline-block;
  position: relative;
  padding-left: 0.42666667rem;
  font-size: 1.65333333rem;
  font-weight: bold;
  color: #e31a44;
}
.coupon-list .left .rmb::before {
  position: absolute;
  top: 0.16rem;
  left: 0rem;
  content: "¥";
  font-size: 0.74666667rem;
}
.coupon-list .left .discount {
  display: inline-block;
  position: relative;
  font-size: 1.65333333rem;
  font-weight: bold;
  color: #e31a44;
}
.coupon-list .left .discount::after {
  position: absolute;
  bottom: 0.26666667rem;
  right: -0.69333333rem;
  content: "折";
  font-size: 0.58666667rem;
}
.coupon-list .left .memo {
  font-size: 0.58666667rem;
  color: rgba(25, 24, 29, 0.8);
}
.coupon-list .coupon {
  flex: 1;
  padding-left: 0.16rem;
}
.coupon-list .coupon .coupon-name {
  font-size: 0.74666667rem;
  font-weight: bold;
  color: #19181d;
}
.coupon-list .coupon .time {
  display: block;
  padding-top: 1.06666667rem;
  font-size: 0.53333333rem;
  color: #19181d;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.coupon-list .coupon .bound {
  padding-top: 0.26666667rem;
  font-size: 0.53333333rem;
  color: #19181d;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.coupon-list .right {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}
.coupon-list .right .btn {
  width: 3.2rem;
  height: 1.33333333rem;
  line-height: 1.33333333rem;
  font-size: 0.64rem;
  color: #fff;
  text-align: center;
  border-radius: 0.21333333rem;
  background-image: -webkit-linear-gradient(to top, #fd7e6b 0%, #f82d56 100%);
  background-image: linear-gradient(to top, #fd7e6b 0%, #f82d56 100%);
}
.coupon-list .right .gray {
  background: #cdcdcd;
}
.coupon-list .item-content {
  padding: 1.06666667rem 0.61333333rem 1.06666667rem 0.53333333rem;
}
.coupon-list .maxpad {
  padding-bottom: 1.6rem;
}
.coupon-list .limit-time {
  margin-top: -1.33333333rem;
  margin-left: 0.53333333rem;
  font-size: 0.53333333rem;
  color: #e21a43;
}
.coupon-list .limit-time .text {
  color: #19181d;
}
.intro {
  margin-top: 0.53333333rem;
}
.intro .title {
  font-size: 0.64rem;
  color: #0c0c0c;
  text-align: center;
}
.intro .city {
  margin-top: 0.74666667rem;
  font-size: 0.42666667rem;
  color: #0c0c0c;
  text-align: center;
}
.intro .subject {
  margin-top: 1.86666667rem;
  font-size: 1.14666667rem;
  color: #0c0c0c;
}
.intro .subject2 {
  display: inline-block;
  margin-top: 0.56rem;
  padding-top: 0.45333333rem;
  font-size: 1.12rem;
  color: #0c0c0c;
  font-weight: normal;
  border-top: 1px solid #232323;
}
.intro .article {
  margin-top: 0.90666667rem;
  position: relative;
  padding: 0.50666667rem 1.86666667rem;
  font-size: 0.64rem;
  color: #707070;
}
.intro .article::before,
.intro .article::after {
  position: absolute;
  font-size: 1.52rem;
}
.intro .article::before {
  top: 0;
  left: 0;
  content: "“";
}
.intro .article::after {
  right: 0;
  content: "”";
}
.intro video {
  display: block;
  width: 100%;
  margin: 0 auto;
  margin-top: 0.8rem;
}
.intro .video_size {
  margin-top: 0.53333333rem;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: #5f5f69;
  text-align: center;
}
.intro .video_size i {
  color: #e21a43;
}
.intro .service {
  margin-top: 1.6rem;
  font-size: 0;
}
.intro .service li {
  display: inline-block;
  width: 33.33333333%;
  font-size: 0.69333333rem;
  color: #5f5f69;
  text-align: center;
  white-space: nowrap;
}
.intro .service li:nth-child(1),
.intro .service li:nth-child(2),
.intro .service li:nth-child(3) {
  padding-bottom: 1.30666667rem;
}
.intro .service li::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 1.92rem;
  height: 1.92rem;
  background-size: cover;
  margin-bottom: 0.26666667rem;
}
.intro .icon_haircut::before {
  background-image: url("../img/icon_haircut.png");
}
.intro .icon_clean::before {
  background-image: url("../img/icon_clean.png");
}
.intro .icon_scalp::before {
  background-image: url("../img/icon_scalp.png");
}
.intro .icon_health::before {
  content: "";
  background-image: url("../img/icon_health.png");
}
.intro .icon_purity::before {
  background-image: url("../img/icon_purity.png");
}
.intro .icon_skill::before {
  background-image: url("../img/icon_skill.png");
}
.intro .qrcode {
  margin: 0 auto;
  margin-top: 3.2rem;
  width: 100%;
}
.intro .qrcode img {
  width: 100%;
  height: 100%;
}
.header {
  position: relative;
  top: 0;
  z-index: 1;
  margin: 0 0.53333333rem;
  margin-top: 3.2rem;
  text-align: center;
}
.header .title {
  display: inline-block;
  min-height: 0.85333333rem;
  line-height: 0px;
  padding: 0 0.53333333rem;
  font-size: 0.74666667rem;
  color: #000;
  z-index: 2;
}
.header .title::before,
.header .title::after {
  content: "◆";
  width: 6.77333333rem;
  height: 1px;
  line-height: 1px;
  position: absolute;
  z-index: -1;
  font-size: 12px;
}
.header .title::before {
  background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 1%, #303035);
  text-align: right;
  left: 0;
}
.header .title::after {
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 1%, #303035);
  text-align: left;
  right: 0;
}
.resultinfo {
  padding: 1.22666667rem 0 1.33333333rem 0;
  text-align: center;
  background: #fff;
  border-radius: 0 0 0.21333333rem 0.21333333rem;
}
.resultinfo .icon_result {
  margin: 0 auto;
  width: 2.69333333rem;
  height: 2.4rem;
  background-image: url("../img/icon_result.png");
  background-size: cover;
}
.resultinfo .resultTxt {
  display: block;
  margin-top: 0.53333333rem;
  font-size: 0.69333333rem;
  color: rgba(26, 25, 32, 0.6);
  text-align: center;
}
.btn_rules {
  display: block;
  position: absolute;
  z-index: 8;
  top: 1.06666667rem;
  right: 0;
  padding: 0.26666667rem 0.45333333rem;
  font-size: 0.53333333rem;
  color: #fff;
  background: rgba(25, 24, 29, 0.8);
  border-radius: 20px 0 0 20px;
}
.btn_rules::after {
  content: ">";
  width: 0.16rem;
  height: 0.26666667rem;
}
.mask {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}
.mask .modal {
  width: 100%;
  max-height: 26.66666667rem;
  margin: 0 2rem;
  background: #fff;
  border-radius: 0.21333333rem;
}
.mask .modal .title {
  height: 2.4rem;
  line-height: 2.4rem;
  font-size: 0.85333333rem;
  color: #1a1920;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.mask .modal .content {
  padding: 1.6rem 0.85333333rem 0 0.85333333rem;
  font-size: 0.64rem;
  color: rgba(46, 46, 46, 0.7);
  text-align: left;
}
.mask .modal .content p {
  line-height: 1.5em;
  padding: 0.4em 0;
}
.mask .modal .btns {
  padding: 1.6rem 0 0.8rem 0;
  text-align: center;
}
.mask .modal .btns .btn {
  display: inline-block;
  padding: 0.61333333rem 2.56rem;
  font-size: 0.69333333rem;
  letter-spacing: 0.2em;
  color: #fff;
  background: #e21a43;
  border-radius: 0.21333333rem;
}
.follow {
  padding-bottom: 1.6rem;
  text-align: center;
}
.follow .showqrcode {
  margin: 0 auto;
  width: 7.73333333rem;
  height: 7.73333333rem;
}
.follow .showqrcode img {
  width: 100%;
  height: 100%;
}
.follow p {
  line-height: 1.2em !important;
  padding: 0.3em 0 !important;
  font-size: 0.69333333rem;
  color: #292929;
}
.share {
  margin: 0 auto;
  max-width: 13.86666667rem;
  padding: 1.6rem 1.06666667rem 1.38666667rem 1.06666667rem;
  font-size: 0.85333333rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 0.21333333rem;
}
.share .text {
  text-align: center;
  font-size: 0.85333333rem;
  color: #fff;
}
.share .icon_share::before {
  content: "";
  display: inline-block;
  margin: 0 auto;
  margin-right: 0.53333333rem;
  width: 0.85333333rem;
  height: 0.85333333rem;
  background-image: url("../img/icon_share.png");
  background-size: cover;
}
.share .subtext {
  margin-top: 1.36rem;
  font-size: 0.69333333rem;
  color: rgba(255, 255, 255, 0.5);
}
.toast {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.toast .text {
  margin: 0 auto;
  padding: 0.53333333rem 0.8rem;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.21333333rem;
}
@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    z-index: 9999;
  }
  50% {
    opacity: 1;
    z-index: 9999;
  }
  75% {
    opacity: 1;
    z-index: 9999;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
.anim_fade {
  -webkit-animation: fadeInOut 3s forwards;
  animation: fadeInOut 3s forwards;
}
.ajaxWrap {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
}
.ajaxWrap .loader {
  margin: 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  position: relative;
  top: 48%;
  -webkit-animation: load 1.3s infinite linear;
  animation: load 1.3s infinite linear;
  transform: scale(0.8);
}
@-webkit-keyframes load {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
  }
}
.blank {
  height: 0.53333333rem;
}
.container {
  min-height: 100vh;
}
.c-red {
  color: #f43055;
}
.header {
  margin-top: 0.53333333rem;
}
.header .title::before,
.header .title::after {
  width: 5.44rem;
}
.logos {
  text-align: center;
  padding-top: 1.33333333rem;
}
.logos img {
  width: 25%;
}
.step1 {
  background: #19181d;
  height: 100vh;
  text-align: center;
}
.step1 .btn_rules {
  background: rgba(255, 255, 255, 0.1);
}
.step1 .top {
  padding-top: 1.86666667rem;
}
.step1 .top .storeName {
  color: #f43055;
  font-size: 1.06666667rem;
}
.step1 .top .actName {
  color: #ffffff;
  font-size: 1.6rem;
  margin-top: 0.93333333rem;
  font-weight: bold;
}
.step1 .top .actDesc {
  font-size: 0.8rem;
  color: #ffffff;
  opacity: .2;
  margin-top: 0.26666667rem;
}
.step1 .main {
  margin-top: 1.2rem;
  padding: 0;
}
.step1 .main .number {
  min-width: 11.2rem;
  min-height: 8rem;
  margin: 0 0.26666667rem;
  color: #f43055;
}
.step1 .main .number p.yuan {
  font-size: 2.02666667rem;
  font-family: "黑体";
  margin-top: 0.21333333rem;
}
.step1 .main .number .price1 {
  font-size: 7.73333333rem;
  font-weight: bold;
}
.step1 .main .number .price2 {
  font-size: 2.13333333rem;
}
.step1 .main .number .w {
  color: #fff;
  opacity: .4;
}
.step1 .main .number p.zhe {
  font-size: 0.58666667rem;
  padding-bottom: 0.26666667rem;
  margin-left: 0.10666667rem;
}
.step1 .bottom {
  position: absolute;
  bottom: 1.06666667rem;
  left: 0;
  width: 100%;
  color: #ffffff;
}
.step1 .bottom .icon_coupon {
  width: 11.68rem;
  height: 8.66666667rem;
}
.step1 .bottom .icon_coupon_cover {
  width: 11.68rem;
  height: 8.66666667rem;
  position: absolute;
  top: 0.8rem;
  left: 50%;
  margin-left: -5.84rem;
  background: rgba(0, 0, 0, 0.5);
}
.step1 .bottom .info-step3 {
  margin-bottom: 0.53333333rem;
}
.step1 .bottom .actDate {
  opacity: .2;
}
.step1 .content {
  margin-top: 1.06666667rem;
}
.step1 .content p {
  position: relative;
  margin: 0 2.4rem 0.4em 2.4rem;
  font-size: 0.64rem;
  color: rgba(25, 24, 29, 0.8);
}
.step1 .content p::before {
  position: absolute;
  top: 0;
  left: -0.53333333rem;
  content: "·";
  width: 0.10666667rem;
  height: 0.10666667rem;
  margin-right: 0.42666667rem;
  color: #1a1a1f;
}
.step1 .cd_t {
  position: absolute;
  top: 4rem;
  left: 0;
  padding-left: 0.90666667rem;
  padding-right: 0.26666667rem;
  width: 100%;
  z-index: 9;
}
.step1 .received {
  width: 100%;
  padding: 0 4.50666667rem;
  font-size: 0.85333333rem;
  color: #fff;
  text-align: center;
}
.step1 .received .result_share {
  font-size: 0.85333333rem;
  color: #fff;
}
.step1 .received .ticket {
  width: 11.44rem;
  height: 11.81333333rem;
  margin-top: 0.48rem;
  padding-top: 1.33333333rem;
  background-image: url(../img/icon_received.png);
  background-size: cover;
}
.step1 .received .rmb {
  display: inline-block;
  position: relative;
  font-weight: bold;
  font-size: 1.9656rem;
  color: #e60045;
}
.step1 .received .rmb::before {
  position: absolute;
  top: 0.53333333rem;
  left: -0.53333333rem;
  content: "¥";
  font-size: 0.74666667rem;
}
.step1 .received .discount {
  display: inline-block;
  font-size: 0.85333333rem;
  padding-top: 0.8rem;
  font-weight: bold;
  color: #e60045;
}
.step1 .received .tips {
  font-size: 0.58666667rem;
  color: #fff;
}
.step1 .received .btn {
  display: block;
  height: 2.13333333rem;
  line-height: 2.13333333rem;
  margin-top: 3.04rem;
  padding: 0 3.46666667rem;
  font-size: 0.85333333rem;
  color: #fff;
  background: #e21a43;
  border-radius: 0.21333333rem;
}