@charset "UTF-8";

html,
body,
h1,
h2,
h3,
p,
ul,
li,
button {
  margin: 0;
  padding: 0
}

button {
  font-family: "Microsoft YaHei", Arial, sans-serif
}

.october-page button {
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none
}

button:focus,
a:focus {
  outline: 0
}

img {
  border: 0;
  vertical-align: top
}

html,
body {
  overflow-x: hidden
}

html {
  scroll-behavior: auto;
  scrollbar-color: #d84a25 #4b1208;
  scrollbar-width: thin
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px
}

::-webkit-scrollbar-track {
  background: #4b1208;
  border-left: 1px solid #8a2d16
}

::-webkit-scrollbar-thumb {
  border: 2px solid #4b1208;
  border-radius: 8px;
  background: linear-gradient(#f3b64a, #cf3b20 48%, #8f1e11);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(#ffd673, #e85129 48%, #a52615)
}

::-webkit-scrollbar-corner {
  background: #4b1208
}

body {
  width: 100%;
  background: #391006;
  color: #784511;
  font: 14px/1.6 "Microsoft YaHei", Arial, sans-serif;
  scrollbar-face-color: #cf3b20;
  scrollbar-track-color: #4b1208;
  scrollbar-arrow-color: #f3b64a
}

.header,
.footer {
  display: none
}

.october-page {
  width: 100%;
  overflow: hidden;
  background: #401207
}

.october-stage {
  position: relative;
  background: #612408 url(../img/page-bg.jpg) no-repeat top center;
  background-size: 1920px auto;
}

.october-stage .video-bg {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 1920px;
  /* min-width: 1920px; */
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 120px), transparent 100%)
}

.october-logo {
  position: absolute;
  top: 30px;
  right: 50px;
  z-index: 2;
  width: 210px;
  height: auto;
}

.act-login-info {
  position: absolute;
  top: 588px;
  left: 0;
  z-index: 3;
  width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(71, 17, 5, .7);
}

.act-login-info span {
  display: inline-block;
  vertical-align: middle;
}

.act-login-info .name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-login-info a {
  display: inline-block;
  margin-left: 8px;
  color: #ffe67e;
  text-decoration: underline;
}

.act-login-info a:hover { color: #fff7bc }

.october-activity-time {
  position: absolute;
  top: 450px;
  left: 50%;
  z-index: 2;
  width: 510px;
  height: 38px;
  margin-left: 250px;
  background-image: url(../img/time.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 510px 38px;
  color: #f6d67a;
  font-size: 18px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
  text-shadow: 0 1px 2px #7b230e
}

.october-wrap {
  position: relative;
  width: 1280px;
  margin: 0 auto;
  padding: 677px 0 100px
}

.october-section {
  position: relative;
  width: 100%
}

.section-title {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none
}

.image-button {
  display: block;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden
}

.image-button:disabled {
  cursor: not-allowed
}

.october-aside {
  position: fixed;
  top: 50%;
  right: 10px;
  z-index: 80;
  width: 134px;
  height: 391px;
  padding-top: 116px;
  box-sizing: border-box;
  background-image: url(../img/aside/nav-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 134px 391px;
  transform: translateY(-50%)
}

.aside-link {
  display: block;
  height: 40px;
  margin: 0 auto 1px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: filter .15s, transform .15s
}

.aside-link:hover {
  filter: brightness(1.15);
  transform: translateX(-3px)
}

.aside-daily {
  width: 105px;
  background-image: url(../img/aside/nav-daily.png)
}

.aside-wish {
  width: 80px;
  background-image: url(../img/aside/nav-wish.png)
}

.aside-wheel {
  width: 103px;
  background-image: url(../img/aside/nav-wheel.png)
}

.aside-recharge {
  width: 107px;
  background-image: url(../img/aside/nav-recharge.png)
}

.aside-rules {
  width: 107px;
  background-image: url(../img/aside/nav-rules.png)
}

.aside-top {
  width: 92px;
  height: 57px;
  margin-top: 3px;
  background-image: url(../img/aside/nav-top.png)
}

.daily-section {
  height: 550px;
  scroll-margin-top: 28px
}

.daily-title {
  top: -28px;
  width: 722px;
  height: 193px
}

.daily-panel {
  position: relative;
  width: 1100px;
  height: 550px;
  margin: 0 auto;
  background-image: url(../img/daily-panel.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%
}

.daily-grid {
  display: flex;
  justify-content: center;
  padding-top: 178px
}

.daily-grid .daily-coupon + .daily-coupon {
  margin-left: 37px
}

.daily-coupon {
  position: relative;
  width: 274px;
  height: 378px;
  text-align: center
}

.daily-coupon>img {
  display: block;
  width: 274px;
  height: 307px
}

.daily-claim {
  position: absolute;
  z-index: 1;
  top: 225px;
  left: 57px;
  width: 160px;
  height: 53px;
  margin: 0;
  background-image: url(../img/btn-claim.png)
}

.daily-claim:hover {
  background-image: url(../img/btn-claim-hover.png)
}

.daily-coupon.is-locked .daily-claim,
.daily-coupon.is-locked .daily-claim:hover {
  background-image: url(../img/btn-locked.png)
}

.daily-coupon.is-done .daily-claim,
.daily-coupon.is-done .daily-claim:hover {
  background-image: url(../img/btn-recharge-type.png)
}

.daily-grid.is-ended .daily-claim,
.daily-grid.is-ended .daily-claim:hover {
  background-image: url(../img/btn-end.png);
  cursor: default
}


.wish-section {
  margin-top: 87px;
  height: 780px;
  scroll-margin-top: 20px
}

.wish-title {
  top: 0;
  width: 1415px;
  height: 226px
}

.wish-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 280px
}

.wish-main {
  width: 650px;
  text-align: center
}

.wish-pool {
  position: relative;
  width: 631px;
  height: 357px;
  margin: 0 auto;
  background-image: url(../img/wish-pool.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.wish-slot {
  position: absolute;
  top: 223px;
  width: 59px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E43938;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 1px #fff;

}

.wish-slot:nth-child(1) {
  top:182px;
  left: 104px
}

.wish-slot:nth-child(2) {
  top:210px;
  left: 190px
}

.wish-slot:nth-child(3) {
  top:223px;
  left: 284px
}

.wish-slot:nth-child(4) {
  top:210px;
  left: 378px
}

.wish-slot:nth-child(5) {
  top:183px;
  left: 465px
}

.wish-actions {
  position: relative;
  margin-top: -52px;
}

.wish-open {
  width: 211px;
  height: 69px;
  background-image: url(../img/btn-wish.png);
  margin: 0 auto;
}

.wish-open:hover {
  background-image: url(../img/btn-wish-hover.png)
}

.wish-record {
  width: 100%;
  color: #ffe989;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}

.wish-count-wrap {
  position: relative;
  width: 520px;
  height: 70px;
  margin: 0 auto;
}

.wish-count-bar {
  position: relative;
  width: 520px;
  height: 70px;
  background-image: url(../img/wish-count-bar.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.wish-count-bar strong {
  position: absolute;
  left: 215px;
  top: 11px;
  min-width: 72px;
  color: #fff;
  font-size: 20px;
  line-height: 42px;
  text-align: left;
}

.wish-count-bar strong:after {
  content: "次";
  margin-left: 2px;
  font-size: 24px
}

.wish-count-wrap .js-claim-wish {
  position: absolute;
  z-index: 1;
  top: 13px;
  right: 78px;
  width: 118px;
  height: 39px;
  background-image: url(../img/btn-claim-chance.png)
}

.wish-count-wrap .js-claim-wish:hover {
  background-image: url(../img/btn-claim-chance-hover.png)
}

.wish-count-wrap .js-claim-wish:disabled,
.wish-count-wrap .js-claim-wish:disabled:hover {
  background-image: url(../img/btn-claim-chance-disabled.png);
  filter: none
}

.wish-timer {
  height: 24px;
  color: #ffe99d;
  font-size: 13px;
  text-align: center
}

.wish-winners {
  width: 600px;
  padding-top: 3px;
  text-align: center
}

.winner-title {
  display: block;
  width: 111px;
  height: 30px;
  margin: 0 auto 15px
}

.winner-cards {
  display: flex;
  justify-content: center
}

.winner-cards .winner-card + .winner-card {
  margin-left: 8px
}

.winner-card {
  position: relative;
  width: 202px;
  height: 334px;
  color: #d94b1d;
  font-size: 16px;
  text-align: center
}

.winner-card>img {
  display: block;
  width: 202px;
  height: 334px
}

.winner-card p {
  position: absolute;
  left: 0;
  width: 100%;
  height: 18px;
  line-height: 18px;
  white-space: nowrap
}

.winner-card p:nth-of-type(1) {
  top: 210px
}

.winner-card p:nth-of-type(2) {
  top: 235px
}

.winner-card p strong,
.winner-card p span {
  font-weight: 400
}

.winner-state {
  position: absolute;
  left: 29px;
  top: 264px;
  width: 155px;
  height: 51px;
  background-image: url(../img/btn-unselected.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.winner-card.has-award .winner-state {
  background-image: url(../img/btn-claim-reward.png)
}

.winner-card.has-award .winner-state:hover {
  background-image: url(../img/btn-claim-reward-hover.png)
}

.winner-card.is-claimed .winner-state,
.winner-card.is-claimed .winner-state:hover {
  background-image: url(../img/btn-claim-recharge.png);
  cursor: default
}

.winner-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 506px;
  height: 46px;
  margin: 38px auto 0;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url(../img/winner-ticker.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  color: #fff;
  font-size: 16px;
  line-height: 46px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winner-ticker::before {
  content: '';
  width: 45px;
  height: 46px;
  margin-right: 8px;
  background-image: url(../img/winner-ling.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.wheel-section {
  margin-top: 68px;
  height: 1030px;
  text-align: center;
}

.wheel-title {
  top: 0;
  width: 1601px;
  height: 202px
}

.wheel-count-bar {
  position: absolute;
  top: 226px;
  left: 50%;
  width: 423px;
  height: 109px;
  margin-left: -211px;
  background-image: url(../img/wheel-count-bar.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #81511f;
  text-align: left
}

.wheel-count-bar strong {
  position: absolute;
  top: 36px;
  left: 225px;
  color: #E43938;
  font-size: 18px;
}

.wheel-count-bar em {
  color: #E43938;
  font-size: 22px;
  font-style: normal;
}

.wheel-count-tip {
  position: absolute;
  top: 337px;
  left: 0;
  width: 100%;
  color: #9c6b2d;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}

.wheel-stage {
  position: absolute;
  top: 369px;
  left: 50%;
  width: 650px;
  height: 650px;
  margin-left: -325px;
  background-image: url(../img/wheel-rotate-bg.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  isolation: isolate;
}

.wheel-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 650px;
  height: 650px;
}

.wheel-disc {
  position: relative;
  width: 650px;
  height: 650px;
  z-index: 1;
  background-image: url(../img/wheel-rotate.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}

.wheel-shade {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat
}

.wheel-shade.shade08 { top: 34px; left: 213px; width: 224px; height: 289px; background-image: url(../img/shade01.png) }
.wheel-shade.shade07 { top: 59px; left: 325px; width: 267px; height: 266px; background-image: url(../img/shade02.png) }
.wheel-shade.shade06 { top: 214px; left: 325px; width: 288px; height: 222px; background-image: url(../img/shade03.png) }
.wheel-shade.shade05 { top: 325px; left: 324px; width: 266px; height: 267px; background-image: url(../img/shade04.png) }
.wheel-shade.shade04 { top: 325px; left: 212px; width: 221px; height: 289px; background-image: url(../img/shade05.png) }
.wheel-shade.shade03 { top: 326px; left: 57px; width: 267px; height: 267px; background-image: url(../img/shade06.png) }
.wheel-shade.shade02 { top: 213px; left: 35px; width: 288px; height: 222px; background-image: url(../img/shade07.png) }
.wheel-shade.shade01 { top: 58px; left: 57px; width: 266px; height: 267px; background-image: url(../img/shade08.png) }

.wheel-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 149px;
  height: 168px;
  margin-top: -84px;
  margin-left: -74px;
  border: 0;
  background-color: transparent;
  background-image: url(../img/wheel-button.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 149px 168px;
  cursor: pointer
}

.wheel-button:hover {
  background-image: url(../img/wheel-button-hover.png)
}

.wheel-button:disabled {
  filter: none;
  cursor: not-allowed
}

.recharge-section {
  margin-top: 20px;
  height: 705px;
}

.recharge-title {
  top: 0;
  width: 550px;
  height: 151px
}

.recharge-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 1100px;
  height: 750px;
  margin-left: -550px;
  background-image: url(../img/recharge-panel.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%
}

.recharge-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding-top: 155px;
  color: #a26b27;
  font-size: 18px;
  text-align: center
}

.recharge-summary-total,
.recharge-summary-next {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 300px;
  white-space: nowrap
}

.recharge-summary strong,
.recharge-summary b {
  margin: 0 6px;
  color: #da6327;
  font-size: 32px;
  font-weight: 700
}

.recharge-summary-divider {
  display: block;
  width: 1px;
  height: 45px;
  margin: 0 22px;
  background: linear-gradient(transparent, #b57a37 20%, #8c4d19 50%, #b57a37 80%, transparent)
}

.recharge-summary em span {
  color: #da6327;
  font-weight: bold
}
.recharge-summary-pending {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.recharge-summary-complete {
  display: none;
  color: #da6327;
  font-size: 20px;
  font-weight: 700;
}

.recharge-summary.is-all-unlocked .recharge-summary-pending {
  display: none;
}

.recharge-summary.is-all-unlocked .recharge-summary-complete {
  display: block;
}

.recharge-progress {
  position: relative;
  width: 900px;
  height: 86px;
  margin: 10px auto 0;
  background-image: url(../img/recharge-progress-scale.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 900px 85px
}

.recharge-progress-in{
  position: absolute;
  top: 17px;
  left: 49px;
  height: 25px;
  width: 788px;
}
.recharge-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 25px;
  background-image: url(../img/recharge-progress-fill.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 788px 25px;
  transition: width .35s
}

.recharge-checks {
  position: absolute;
  top: 17px;
  left: 49px;
  height: 62px;
  width: 788px;
}

.recharge-checks i {
  position: absolute;
  top: -12px;
  display: block;
  width: 49px;
  height: 43px;
  background-image: url(../img/progress-box-s.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateX(-50%)
}

.recharge-checks i:nth-child(1) {
  left: 199px
}

.recharge-checks i:nth-child(2) {
  left: 385px
}

.recharge-checks i:nth-child(3) {
  left: 572px
}

.recharge-checks i:nth-child(4) {
  top: -21px;
  left: 765px;
  width: 70px;
  height: 61px;
  background-image: url(../img/progress-box-b.png)
}

.recharge-checks i.is-claimed {
  top: -13px;
  width: 45px;
  height: 45px;
  background-image: url(../img/progress-check.png)
}

.recharge-grid {
  display: flex;
  justify-content: center;
  margin-top: 14px
}

.recharge-grid .recharge-coupon + .recharge-coupon {
  margin-left: 16px
}

.recharge-coupon {
  position: relative;
  width: 228px;
  height: 284px;
  text-align: center
}

.recharge-coupon>img {
  display: block;
  width: 228px;
  height: 284px
}

.recharge-coupon .js-recharge {
  position: absolute;
  z-index: 1;
  top: 230px;
  left: 20px;
  width: 188px;
  height: 47px;
  margin: 0;
  background-image: url(../img/btn-recharge-claim.png)
}

.recharge-coupon .js-recharge:hover {
  background-image: url(../img/btn-recharge-claim-hover.png)
}

.recharge-coupon.is-locked .js-recharge,
.recharge-coupon.is-locked .js-recharge:hover {
  background-image: url(../img/btn-recharge-suo.png);
  background-size: 188px 47px
}

.recharge-coupon.is-done .js-recharge,
.recharge-coupon.is-done .js-recharge:hover {
  background-image: url(../img/btn-recharge-claimed.png)
}

.recharge-coupon.is-locked>img,
.recharge-coupon.is-done>img {
  filter: none
}

.rules-section {
  margin-top: 60px;
  color: #fff2ca;
  scroll-margin-top: 20px
}

.rules-title {
  display: block;
  width: 550px;
  height: 113px;
  margin: 0 auto 20px
}

.rules-copy {
  width: 1160px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.8;
  text-shadow: 0 1px 2px rgba(55, 12, 3, .5)
}

.rules-copy p {
  position: relative;
  margin: 1px 0;
  padding-left: 34px
}

.rules-copy p span {
  position: absolute;
  left: 0;
  top: 0
}

/* 我的中奖记录：覆盖通用领奖记录弹框，统一为国庆活动卷轴样式。 */
.october-page .mask {
  z-index: 130;
  background: rgba(31, 9, 3, .76);
  opacity: 1;
  filter: none
}

.october-page #my_prize {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 131;
  width: 653px;
  height: 420px;
  margin: -210px 0 0 -326px;
  box-sizing: border-box;
  background: none !important;
  isolation: isolate;
}

.october-page #my_prize:before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: url(../img/modal-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 653px 420px;
  pointer-events: none;
}

.october-page #my_prize .pop-bd {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: none;
}

.october-page #my_prize .lblist-bd {
  top: 15px;
  left: 95px;
  width: 463px;
  height: 62px;
}

.october-page #my_prize .lblist-bd li {
  width: 100%;
  height: 62px;
  color: #fff6c8;
  font-size: 25px;
  font-weight: 700;
  line-height: 62px;
  text-shadow: 0 2px 2px #9f2d12;
}

.october-page #my_prize .pop-lblist {
  padding: 93px 66px 0;
}

.october-page #my_prize .lblist-table {
  height: 267px;
}

.october-page #my_prize .pop-lblist table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.october-page #my_prize .pop-lblist tr {
  height: 44px;
}

.october-page #my_prize .pop-lblist th,
.october-page #my_prize .pop-lblist td {
  box-sizing: border-box;
  padding: 0;
  vertical-align: middle;
}

.october-page #my_prize .pop-lblist th {
  height: 34px !important;
  background: #f6d698;
  color: #8c4b18;
  font-size: 15px;
  line-height: 34px !important;
}

.october-page #my_prize .pop-lblist td {
  height: 31px !important;
  border-bottom: 1px solid rgba(187, 119, 42, .18);
  color: #8b5420;
  font-size: 14px;
  line-height: 22px;
}

.october-page #my_prize .pop-lblist .w1 { width: 15%; }
.october-page #my_prize .pop-lblist .w2 { width: 30%; }
.october-page #my_prize .pop-lblist .w3 { width: 20%; }
.october-page #my_prize .pop-lblist .w4 { width: 35%; }

.october-page #my_prize .pop-lblist td a {
  color: #dc3e2f;
}

.october-page #my_prize .pages {
  height: 32px;
  margin-top: 7px;
  font-size: 12px;
  line-height: 26px;
}

.october-page #my_prize .pages a,
.october-page #my_prize .pages .disabled,
.october-page #my_prize .pages .current {
  min-width: 15px;
  height: 26px;
  margin: 0 3px;
  padding: 0 8px;
  border: 1px solid #e5b464;
  border-radius: 14px;
  background: #fff5db;
  color: #9d571b;
  line-height: 24px;
}

.october-page #my_prize .pages a { cursor: pointer; }
.october-page #my_prize .pages .disabled,
.october-page #my_prize .pages .current { cursor: default; }

.october-page #my_prize .pages .current,
.october-page #my_prize .pages a:hover {
  border-color: #d94b2f;
  background: #d94b2f;
  color: #fff5dc;
}

.october-page #my_prize .btn-close {
  position: absolute;
  z-index: 2;
  top: 50px;
  right: 22px;
  bottom: auto;
  width: 45px;
  height: 44px;
  border: 0;
  background-image: url(../img/pop-close.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45px 44px;
  cursor: pointer;
}

.october-page #my_prize .btn-close:hover {
  background-image: url(../img/pop-close.png-hover.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45px 44px;
  filter: none;
}

.october-page .pop-act-box>.btn-close {
  width: 45px;
  height: 44px;
  border: 0;
  background-image: url(../img/pop-close.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45px 44px;
}

.october-page .pop-act-box>.btn-close:hover {
  background-image: url(../img/pop-close.png-hover.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45px 44px;
}

.october-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 120;
  align-items: center;
  justify-content: center;
  background: rgba(31, 9, 3, .76)
}

.october-modal.show {
  display: flex
}

.modal-card {
  position: relative;
  width: 653px;
  height: 420px;
  padding: 92px 50px 38px;
  box-sizing: border-box;
  background-image: url(../img/modal-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 653px 420px;
  color: #86521e;
  text-align: center
}

.modal-card h3 {
  position: absolute;
  top: 15px;
  left: 95px;
  width: 463px;
  height: 62px;
  color: #fff6c8;
  font-size: 25px;
  line-height: 62px;
  text-shadow: 0 2px 2px #9f2d12
}

.modal-card p {
  min-height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e53d31;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.7
}

.modal-ok {
  width: 159px;
  height: 52px;
  margin: 40px auto 0;
  background-image: url(../img/modal-confirm.png);
  color: #fff4d1;
  font-size: 18px;
  font-weight: 700;
  line-height: 52px;
  text-indent: 0;
  text-shadow: 0 1px #a82d16
}

.modal-ok:hover {
  filter: brightness(1.08)
}

.result-modal-card {
  padding-top: 165px;
}

.result-modal-card p {
  min-height: 70px;
}

.result-modal-card .modal-ok {
  margin-top: 40px;
}

.modal-card>.modal-close {
  position: absolute;
  top: 50px;
  right: 22px;
  z-index: 2;
  width: 45px;
  height: 44px;
  padding: 0;
  border: 0;
  background-image: url(../img/pop-close.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45px 44px;
  cursor: pointer;
}

.modal-card>.modal-close:hover {
  background-image: url(../img/pop-close.png-hover.png);
  filter: none;
}

.coupon-type-modal-card {
  padding: 0
}

.coupon-type-modal-card h3 {
  font-size: 26px
}

.coupon-type-actions {
  position: absolute;
  top: 106px;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%
}

.coupon-type-actions .coupon-type-option + .coupon-type-option {
  margin-left: 42px
}

.coupon-type-option {
  position: relative;
  width: 210px;
  height: 261px;
  border: 0;
  background: transparent;
  cursor: pointer
}

.coupon-type-option>img {
  display: block;
  width: 210px;
  height: 261px
}

.coupon-type-option i {
  position: absolute;
  left: 25px;
  bottom: 14px;
  width: 160px;
  height: 53px;
  background-image: url(../img/coupon-type-claim.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.coupon-type-option:hover i {
  filter: brightness(1.08)
}

.coupon-type-option:active {
  transform: translateY(1px)
}

.number-modal-card {
  height: 420px;
  padding-top: 90px;
  background-size: 653px 420px;
  background-position: center top
}

/* .number-modal-card h3 {
  top: 13px
} */

.number-modal-card .number-tip {
  min-height: 34px;
  color: #805320;
  font-size: 14px;
  font-weight: 400
}

.wish-number-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 15px
}

.wish-number-grid button {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 3px 7px 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer
}

.wish-number-grid button:nth-child(10n) {
  margin-right: 0
}

.wish-number-grid .wish-number-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border: 0;
}

.wish-number-grid .wish-number-selected {
  display: none
}

.wish-number-grid button.selected .wish-number-normal {
  display: none
}

.wish-number-grid button.selected .wish-number-selected {
  display: block
}

.number-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.number-modal-actions .modal-cancel {
  margin-left: 18px
}

.wish-submit,
.modal-cancel {
  width: 159px;
  height: 52px;
  background-image: url(../img/modal-confirm.png);
  color: #fff4d1;
  text-indent: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 52px;
  text-shadow: 0 1px #a82d16
}

.wish-submit:hover,
.modal-cancel:hover { filter: brightness(1.08) }

/* @media (min-width:1921px) {
  .october-stage {
    background-size: 100% auto;
  }
} */