@font-face {
  font-family: 'pingfang-medium';
  src: url("../../../common/fonts/PingFang-Medium.ttf");
  src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
}

body {
  font-family: 'pingfang-medium';
  width: 100%;
  height: 17.78667rem;
  background: url("../images/bg.png") #141124 no-repeat 50% 0/10rem 100%;
  position: relative;
}

.tips-tit {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
}

.tips-tit p {
  position: absolute;
  right: 0.26667rem;
  top: 0.13333rem;
  width: 50%;
  background: #FFF;
  color: #333;
  border-radius: 0.21333rem;
  line-height: 0.53333rem;
  padding: 0.26667rem;
  font-size: 0.42667rem;
}

.desc {
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5.13333rem;
  color: white;
  font-size: 0.4rem;
  font-weight: 450;
  text-align: center;
}

.index-wrap {
  display: none;
}

.index-wrap .ticket-info {
  width: 100%;
  position: absolute;
  top: 5.68rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.index-wrap .ticket-info p {
  color: white;
  font-size: 0.4rem;
  font-weight: 450;
}

.index-wrap .ticket-info img {
  width: 3.6rem;
  height: 3.06667rem;
}

.index-wrap .ticket-info .ticket-left-num {
  font-size: 0.32rem;
  margin-top: 0.21333rem;
  color: rgba(255, 255, 255, 0.6);
}

.index-wrap .form-wrap {
  position: absolute;
  top: 10.13333rem;
  left: 50%;
  transform: translateX(-50%);
}

.index-wrap .form-wrap .mobile-number, .index-wrap .form-wrap .verify-ipt {
  width: 8.4rem;
  height: 0.93333rem;
  outline: none;
  border-radius: 0.4rem;
  padding-left: 0.4rem;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 0.4rem;
  font-size: 0.4rem;
  color: white;
}

.index-wrap .form-wrap .mobile-number::placeholder, .index-wrap .form-wrap .verify-ipt::placeholder {
  color: white;
}

.index-wrap .form-wrap .verify-wrap {
  position: relative;
  height: 0.93333rem;
}

.index-wrap .form-wrap .verify-wrap .verify-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 2.64rem;
  height: 0.93333rem;
  background-image: linear-gradient(to right, #256DC2, #5E2AB0);
  border-radius: 0.46667rem;
  color: white;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.93333rem;
}

.index-wrap .form-wrap .draw-btn {
  width: 8.4rem;
  height: 0.93333rem;
  background-image: linear-gradient(to right, #218EFF, #7727E4);
  border-radius: 0.46667rem;
  margin: 0.8rem 0 0.53333rem;
  color: white;
  font-size: 0.4rem;
  text-align: center;
  line-height: 0.93333rem;
}

.index-wrap .form-wrap .tip {
  color: #999999;
  font-size: 0.32rem;
  text-align: center;
  margin-bottom: 0.10667rem;
}

.success-wrap {
  display: none;
  position: absolute;
  left: 50%;
  top: 6.22667rem;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  font-size: 0.4rem;
}

.success-wrap .success-desc {
  font-size: 0.48rem;
}

.success-wrap .huode {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.32rem;
  margin-top: 0.30667rem;
  margin-bottom: 0.08rem;
}

.success-wrap img {
  width: 3.6rem;
  height: 3.06667rem;
}

.success-wrap .tip1 {
  margin-top: 1.46667rem;
  margin-bottom: 0.45333rem;
}

.success-wrap .success-btn {
  display: block;
  width: 8.4rem;
  height: 0.93333rem;
  line-height: 0.93333rem;
  text-align: center;
  background-image: linear-gradient(to right, #218EFF, #7727E4);
  border-radius: 0.46667rem;
  color: white;
}

.fail-wrap {
  display: none;
  position: absolute;
  left: 50%;
  top: 7.37333rem;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  color: white;
  font-size: 0.4rem;
}

.fail-wrap img {
  width: 3.6rem;
  height: 3.06667rem;
}

.fail-wrap .ticket-name {
  margin-top: 0.13333rem;
}

.fail-wrap .current-left {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.32rem;
  margin-top: 0.13333rem;
  margin-bottom: 1.04rem;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 10rem;
  height: 1.68rem;
  background-color: rgba(101, 61, 233, 0.4);
  display: inline-flex;
  align-items: center;
}

.bottom img {
  width: 1.14667rem;
  height: 1.14667rem;
  border-radius: 0.21333rem;
  margin-left: 0.26667rem;
  margin-right: 0.13333rem;
}

.bottom p {
  flex: 1;
  font-size: 0.4rem;
  color: white;
}

.bottom a {
  width: 2.13333rem;
  height: 0.69333rem;
  line-height: 0.69333rem;
  border-radius: 0.34667rem;
  background: white;
  margin-right: 0.26667rem;
  text-align: center;
  font-size: 0.34667rem;
  color: #752AE4;
}

.shade-mask {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
}

.shade-mask .shade-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7.46667rem;
  height: 4.26667rem;
  background-color: white;
  border-radius: 0.32rem;
  text-align: center;
}

.shade-mask .shade-content .title {
  color: #333333;
  font-size: 0.4rem;
  margin-top: 0.73333rem;
  margin-bottom: 0.45333rem;
  line-height: 1.2;
}

.shade-mask .shade-content .content-tip {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.32rem;
  margin-bottom: 0.50667rem;
}

.shade-mask .shade-content .content-btn {
  display: block;
  width: 6.26667rem;
  height: 0.93333rem;
  border-radius: 0.46667rem;
  background-image: linear-gradient(to right, #218EFF, #7727E4);
  color: white;
  font-size: 0.4rem;
  text-align: center;
  line-height: 0.93333rem;
  margin: auto;
}