*, *:before, *:after {
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color:transparent;
}

html, body, div, p, a, span, img, h1, h2, ul, li {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

ul, li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

html, body {
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}

body {
  padding-top: 14vw;
  background: transparent url(../assets/bg.png?time=2020) no-repeat top center/cover;
  line-height: 1;
  font-family: "Roboto", "PingFang SC", "Microsoft YaHei", "PT Sans", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
  position: relative;
}

.logo {
  width: 51.67vw;
  height: 12.78vw;
  margin: 0 auto;
  background: url(../assets/logo.png) no-repeat top center/cover;
}

.introduce {
  width: 59.17vw;
  height: 7.08vw;
  margin: 3vw auto 0;
  transform: translateX(2.1vw);
  background: url(../assets/introduce.png) no-repeat top center/cover;

}

.notice-btn {
  display: block;
  width: 16vw;
  height: 9vw;
  position: absolute;
  right: 2vw;
  top: 51vw;
}

.draw-wrap {
  width: 69.44vw;
  height: 69.44vw;
  margin: 20.5vw auto 0;
  position: relative;
  transform: translateX(2.1vw);
}

.draw-panel {
  width: 69.44vw;
  height: 69.44vw;
}

.draw-panel img {
  width: 100%;
  height: 100%;
}

.draw-btn {
  width: 21.67vw;
  height: 25.42vw;
  background: url(../assets/draw-btn.png) no-repeat top center/cover;
  position: absolute;
  left: 50%;
  top: 22vw;
  transform: translateX(-50%);
}

.draw-btn-disabled {
  background: url(../assets/draw-btn-diabled.png) no-repeat top center/cover;
}

.des-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66.39vw;
  height: 13.61vw;
  margin: 20.42vw auto 0;
  background: url(../assets/des-btn.png) no-repeat top center/cover;
  font-size: 5vw;
  font-weight: bold;
  color: #570201;
}

.des-btn-disabled {
  background: url(../assets/des-btn-disabled.png) no-repeat top center/cover;
}

.exchange {
  margin-top: 4.25vw;
  color: #fffefe;
  font-size: 3.2vw;
  text-align: center;
}

.dialog-bg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  background: rgba(36, 36, 36, .6);
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3vw auto 0;
  width: 50vw;
  height: 8.89vw;
  background: url(../assets/btn.png) no-repeat top center/cover;
  font-size: 4vw;
  font-weight: bold;
  color: #570201;
  -webkit-user-select: none;
}

.dialog-bg > div {
  position: absolute;
  width: 67.36vw;
  left: 50%;
  top: 20vw;
  transform: translateX(-50%);
}
.close {
  width: 5.83vw;
  height: 5.83vw;
  background: url(../assets/close.png) no-repeat top center/cover;
  position: absolute;
  right: 5vw;
  top: 4vw;
}

.h {
  height: 10.54vw;
  background: url(../assets/h.png) no-repeat;
  background-size: 100%;
}
.c {
  min-height: 2.78vw;
  background: url(../assets/c.png) repeat-y;
  background-size: 100%;
}
.f {
  height: 9.72vw;
  background: url(../assets/f.png) no-repeat;
  background-size: 100%;
}
.star1 {
  width: 5.14vw;
  height: 8.47vw;
  background: url(../assets/star1.png) no-repeat top center/cover;
  position: absolute;
  left: 2vw;
  top: 5vw;
}
.star2 {
  width: 4.45vw;
  height: 6.25vw;
  background: url(../assets/star2.png) no-repeat top center/cover;
  position: absolute;
  right: 3vw;
  top: 24vw;
}



/* deadline */
.deadline-box p,
.register-box .register-info {
  padding: 0 9vw;
  font-size: 3.8vw;
  font-weight: 500;
  color: #510000;
  line-height: 1.4;
}

.deadline-box .fb-home,
.reward-box .fb-home {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vw 8vw 0;
}
.deadline-box .fb-home div,
.reward-box .fb-home div {
  display: block;
  width: 8.47vw;
  height: 8.47vw;
  background: url(../assets/f-icon.png) no-repeat top center/cover;
}
.deadline-box .fb-home span,
.reward-box .fb-home span {
  margin-left: 2vw;
  font-size: 4vw;
  color: #510000;
}


/* register */
.register-box .register-verify {
  display: none;
  width: 58.06vw;
  padding: 2.0vw 4.03vw;
  background: rgba(0, 0, 0, .8);
  border-radius: 12px;
  color: #fff;
  font-size: 3.4vw;
  line-height: 1.4;
  position: absolute;
  left: 50%;
  bottom: 6vw;
  transform: translateX(-50%);
}
.register-box .register-input {
  display: flex;
  align-items: center;
  width: 50vw;
  height: 8.89vw;
  margin: 2vw auto 0;
  padding: 0 10px;
  background: #fff;
  border: 2px solid #510000;
  border-radius: 2.08vw;
  color: #510000;
  font-size: 4vw;
}
.register-box .register-input input {
  width: 36vw;
  padding-left: 10px;
  border: none;
  color: #510000;
  outline: none;
}
.register-box .register-des {
  padding: 2vw 9vw 0;
  color: #f7651f;
  font-size: 3.2vw;
  line-height: 1.2;
}

.register-box .register-extension {
  padding: 2vw 9vw 0;
  color: #510000;
  font-size: 3.4vw;
  text-align: center;
}
.register-box .register-extension a,
.reward-box .reward-extension a {
  color: #46bfff;
}

/* notice */
.title-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44.44vw;
  height: 8.9vw;
  background: url(../assets/title-box.png) no-repeat top center/cover;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -40%);
  font-weight: bold;
  color: #570201;
}

.notice-box p {
  padding: 0 8vw;
  font-size: 3.8vw;
  color: #510000;
  line-height: 1.4;
}

/* reward */
.rp {
  width: 24.2vw;
  height: 22.78vw;
  background: url(../assets/rp.png) no-repeat top center/cover;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}
.reward-box .reward-point {
  padding: 0 8vw;
  text-align: center;
  font-size: 4.6vw;
  font-weight: 500;
  color: #510000;
  line-height: 1.4;
}
.reward-box .reward-process {
  width: 54.17vw;
  margin: 2vw auto 0;
  padding: 2vw;
  font-size: 3.2vw;
  background: rgba(255, 153, 57, .32);
  border-radius: 10px;
  color: #510000;
  line-height: 1.4;
}
.reward-box .reward-extension {
  padding: 2vw 9vw 0;
  color: #510000;
  font-size: 2.8vw;
  text-align: center;
}

/* no-reward */
.no-reward-box {
  display: none;
  width: 52vw;
  padding: 2.0vw 4.03vw;
  background: rgba(0, 0, 0, .8);
  border-radius: 12px;
  color: #fff;
  font-size: 3.4vw;
  line-height: 1.4;
  position: absolute;
  left: 50%;
  top: 46vw;
  transform: translateX(-50%);
}

/* share */
.share-box p {
  padding: 0 8vw;
  font-size: 4.4vw;
  color: #510000;
  line-height: 1.4;
}
.share-box .share-wrap {
  text-align: center;
  color: #510000;
}
.share-box .share {
  display: block;
  margin: 1vw auto;
  width: 8.47vw;
  height: 8.47vw;
  background: url(../assets/f-icon.png) no-repeat top center/cover;
  outline: none;
}
.share-box .share-verify {
  display: none;
  width: 58.06vw;
  padding: 2.0vw 4.03vw;
  background: rgba(0, 0, 0, .8);
  border-radius: 12px;
  color: #fff;
  font-size: 3.4vw;
  line-height: 1.4;
  position: absolute;
  left: 50%;
  bottom: 6vw;
  transform: translateX(-50%);
}