@charset "UTF-8";
/*==========================================================================
    defualt
 ==========================================================================*/
@import url("../_css/plugins.css");
* {
  outline: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100.1%;
}

html.disable {
  overflow: hidden;
}

body {
  overflow-x: hidden;
  font-family: 'Noto Sans TC', Heiti TC, Microsoft JhengHei, "微軟正黑體", Verdana;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1000px) {
  body {
    font-size: 4vw;
  }
}

input, textarea, button, select {
  font-family: 'Noto Sans TC', Heiti TC, Microsoft JhengHei, "微軟正黑體", Verdana;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: none;
}

@-webkit-keyframes autofill {
  to {
    color: #000;
    background-color: #fff;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

button {
  cursor: pointer;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url("../_img/select-tri.png") center right 25px no-repeat;
}

@media (max-width: 1000px) {
  select {
    background-position: center right 2.5vw;
    background-size: 5%;
  }
}

select::-ms-expand {
  display: none !important;
}

img {
  max-width: 100%;
}

.hidden {
  display: none;
}

.container {
  max-width: 1000px;
  margin: auto;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.wp {
  min-height: 100%;
  min-width: 320px;
  padding-top: 1150px;
  background: #ff7976 url("../_img/bg.jpg") top center no-repeat;
  position: relative;
  overflow: hidden;
}

@media (max-width: 1000px) {
  .wp {
    padding-top: 115vw;
    background-size: 192%;
  }
}

a {
  text-decoration: none;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
}

p {
  margin: 0;
}

/*==========================================================================
    animation
 ==========================================================================*/
.fade-in {
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.fade-in.show {
  opacity: 1;
}

.fade-up {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
}

.fade-up.show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fade-down {
  opacity: 0;
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
}

.fade-down.show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fade-left {
  opacity: 0;
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
}

.fade-left.show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fade-right {
  opacity: 0;
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
}

.fade-right.show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fade-zoom {
  opacity: 0 !important;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s;
  transition: opacity 1s, transform 1s, -webkit-transform 1s;
}

.fade-zoom.show {
  opacity: 1 !important;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.fade-rotate {
  opacity: 0 !important;
  -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
  -webkit-transition: opacity 1s, -webkit-transform 1.5s;
  transition: opacity 1s, -webkit-transform 1.5s;
  transition: opacity 1s, transform 1.5s;
  transition: opacity 1s, transform 1.5s, -webkit-transform 1.5s;
}

.fade-rotate.show {
  opacity: 1 !important;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

/*==========================================================================
    public
 ==========================================================================*/
ul.no-style {
  margin: 0;
  padding: 0;
}

ul.no-style > li {
  list-style: none;
}

@media (max-width: 767px) {
  .for-desktop {
    display: none !important;
  }
}

.for-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .for-mobile {
    display: block !important;
  }
}

@-webkit-keyframes autofill {
  to {
    color: #2e2f5e;
    background: transparent;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

.form input, .form select {
  padding: 0 30px;
  border: none;
  font-size: 42px;
  font-weight: bold;
}

@media (max-width: 1000px) {
  .form input, .form select {
    padding: 0 3vw;
    font-size: 4.2vw;
  }
}

.form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 100px;
}

@media (max-width: 1000px) {
  .form select {
    padding-right: 10vw;
  }
}

.form select::-ms-expand {
  display: none !important;
}

.open-box {
  cursor: pointer;
}

.fixed-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: -100%;
  top: 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: opacity 0.5s, visibility 0.5s, left 0s 0.5s;
  transition: opacity 0.5s, visibility 0.5s, left 0s 0.5s;
}

.fixed-box.show {
  left: 0;
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s, visibility 0.5s;
  transition: opacity 0.5s, visibility 0.5s;
}

.fixed-box .mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.fixed-box .block {
  display: table;
  width: 100%;
}

.fixed-box .block .middle {
  display: table-cell;
  vertical-align: top;
  height: 100vh;
  padding: 80px 0;
  position: relative;
}

.fixed-box .inner {
  width: 975px;
  height: 680px;
  margin: auto;
  padding: 70px 100px 0 100px;
  position: relative;
  z-index: 2;
  background: url("../_img/box-bg.png") center no-repeat;
  background-size: contain;
  color: #fff;
  font-size: 55px;
  line-height: 65px;
  text-align: center;
}

@media (max-width: 1000px) {
  .fixed-box .inner {
    width: 97.5vw;
    height: 68vw;
    padding: 7vw 10vw 0 10vw;
    font-size: 5.5vw;
    line-height: 6.5vw;
  }
}

.fixed-box .inner .close-btn {
  width: 135px;
  height: 140px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  background: url("../_img/X.png") center no-repeat;
  cursor: pointer;
  background-size: contain;
  font-size: 0;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

@media (max-width: 1000px) {
  .fixed-box .inner .close-btn {
    width: 13.5vw;
    height: 14vw;
  }
}

.fixed-box .inner .close-btn:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.fixed-box .inner .title {
  position: relative;
  font-size: 70px;
  line-height: 80px;
  -webkit-text-stroke: thin #005d21;
}

@media (max-width: 1000px) {
  .fixed-box .inner .title {
    font-size: 7vw;
    line-height: 8vw;
  }
}

.fixed-box .inner .title:after {
  content: attr(data-text);
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  word-break: break-all;
  -webkit-text-stroke: thick #005d21;
}

.fixed-box .inner .prize {
  margin: 20px 0;
  position: relative;
  font-size: 60px;
  line-height: 70px;
  -webkit-text-stroke: thin #e62a33;
}

@media (max-width: 1000px) {
  .fixed-box .inner .prize {
    margin: 2vw 0;
    font-size: 6vw;
    line-height: 7vw;
  }
}

.fixed-box .inner .prize:after {
  content: attr(data-text);
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  word-break: break-all;
  -webkit-text-stroke: thick #e62a33;
}

.fixed-box .inner .form {
  text-align: center;
}

.fixed-box .inner .form input, .fixed-box .inner .form select {
  width: 100%;
  height: 120px;
  margin-top: 50px;
  border: 7px solid #005d21;
  border-radius: 20px;
}

@media (max-width: 1000px) {
  .fixed-box .inner .form input, .fixed-box .inner .form select {
    height: 12vw;
    margin-top: 5vw;
    border-width: 0.7vw;
    border-radius: 2vw;
  }
}

.fixed-box .inner .form select {
  cursor: pointer;
}

.fixed-box .inner .btn {
  width: 100%;
  height: 160px;
  margin: 50px auto 0 auto;
}

@media (max-width: 1000px) {
  .fixed-box .inner .btn {
    height: 16vw;
    margin-top: 5vw;
  }
}

.fixed-box .inner .btn.btn-ok {
  background-image: url("../_img/box-btn-ok.png");
}

.fixed-box .inner .btn.btn-ok:hover {
  background-image: url("../_img/box-btn-ok-hover.png");
}

.fixed-box .inner .btn.btn-send {
  background-image: url("../_img/box-btn-send.png");
}

.fixed-box .inner .btn.btn-send:hover {
  background-image: url("../_img/box-btn-send-hover.png");
}

.fixed-box.terms .inner {
  height: 1610px;
  background-image: url("../_img/box-terms.png");
}

@media (max-width: 1000px) {
  .fixed-box.terms .inner {
    height: 161vw;
  }
}

.fixed-box.terms .inner .btn {
  position: absolute;
  left: 0;
  bottom: 100px;
}

@media (max-width: 1000px) {
  .fixed-box.terms .inner .btn {
    bottom: 10vw;
  }
}

.fixed-box.system .inner {
  display: table;
  padding-left: 50px;
  background-image: url("../_img/box-system.png?v=20191127");
}

@media (max-width: 1000px) {
  .fixed-box.system .inner {
    padding-left: 5vw;
  }
}

.fixed-box.system .inner .text {
  display: table-cell;
  vertical-align: middle;
  padding: 180px 47% 30px 0;
}

@media (max-width: 1000px) {
  .fixed-box.system .inner .text {
    padding-top: 18vw;
    padding-bottom: 3vw;
  }
}

.fixed-box.box-times .inner, .fixed-box.congratulations .inner {
  margin-top: 350px;
  padding-top: 200px;
}

@media (max-width: 1000px) {
  .fixed-box.box-times .inner, .fixed-box.congratulations .inner {
    margin-top: 35vw;
    padding-top: 20vw;
  }
}

.fixed-box.box-times .inner:before, .fixed-box.congratulations .inner:before {
  content: '';
  display: block;
  width: 561px;
  height: 520px;
  margin-left: -280.5px;
  position: absolute;
  left: 50%;
  top: -350px;
  background: url("../_img/box-congratulations-pic.png") center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  .fixed-box.box-times .inner:before, .fixed-box.congratulations .inner:before {
    width: 56.1vw;
    height: 52vw;
    margin-left: -28.05vw;
    top: -35vw;
  }
}

.fixed-box.box-times .inner .text {
  margin-top: 50px;
}

@media (max-width: 1000px) {
  .fixed-box.box-times .inner .text {
    margin-top: 5vw;
  }
}

.fixed-box.congratulations .inner .big-title {
  width: 100%;
  height: 191px;
  margin-top: -20px;
  background: url("../_img/box-congratulations-title.png") center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  .fixed-box.congratulations .inner .big-title {
    height: 19.1vw;
    margin-top: -2vw;
  }
}

.yellow {
  color: yellow;
}

/* ==========================================================================
* header
 ==========================================================================*/
#header {
  width: 100%;
  height: 150px;
  min-width: 320px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
}

@media (max-width: 1000px) {
  #header {
    height: 15vw;
  }
}

#header .container {
  padding: 0 20px;
  position: relative;
}

@media (max-width: 1000px) {
  #header .container {
    padding: 0 2vw;
  }
}

#header .logo {
  float: left;
  display: block;
  width: 400px;
  height: 105px;
  margin: 29px 0 0 35px;
  background: url("../_img/logo.png") center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  #header .logo {
    width: 36.6vw;
    height: 8.8vw;
    margin: 2.9vw 0 0 3.5vw;
  }
}

#header .follow {
  float: right;
  margin-top: 23px;
  margin-right: 29px;
  text-align: center;
}

@media (max-width: 991px) {
  #header .follow {
    margin-top: 2.3vw;
    margin-right: 2.9vw;
  }
}

#header .follow a {
  display: inline-block;
  vertical-align: middle;
  width: 98px;
  height: 98px;
  margin: 0 -2px;
  background: 0 0 no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  #header .follow a {
    width: 9.8vw;
    height: 9.8vw;
    margin: 0 -0.2vw;
  }
}

#header .follow a.fb {
  background-image: url("../_img/icon-fb.png");
}

#header .follow a.fb:hover {
  background-image: url("../_img/icon-fb-hover.png");
}

#header .follow a.youtube {
  background-image: url("../_img/icon-youtube.png");
}

#header .follow a.youtube:hover {
  background-image: url("../_img/icon-youtube-hover.png");
}

#header .follow a.line {
  background-image: url("../_img/icon-line.png");
}

#header .follow a.line:hover {
  background-image: url("../_img/icon-line-hover.png");
}

#header .follow a.home {
  background-image: url("../_img/icon-home.png");
}

#header .follow a.home:hover {
  background-image: url("../_img/icon-home-hover.png");
}

#header.active {
  background-color: #c893ff;
}

/* ==========================================================================
* main
 ==========================================================================*/
.btn {
  font-size: 0;
  background: center no-repeat;
  background-size: contain;
}

.btn.btn-send {
  width: 825px;
  height: 210px;
  margin-top: 3px;
  margin-left: 20px;
  background-image: url("../_img/btn-send.png");
}

@media (max-width: 1000px) {
  .btn.btn-send {
    width: 82.5vw;
    height: 21vw;
    margin-top: 0.3vw;
    margin-left: 2vw;
  }
}

.btn.btn-send:hover {
  background-image: url("../_img/btn-send-hover.png");
}

.btn.btn-change {
  width: 416px;
  height: 105px;
  margin-top: 3px;
  background-image: url("../_img/btn-change.png");
}

@media (max-width: 1000px) {
  .btn.btn-change {
    width: 41.6vw;
    height: 10.5vw;
    margin-top: 0.3vw;
  }
}

.btn.btn-change:hover {
  background-image: url("../_img/btn-change-hover.png");
}

.btn.btn-login {
  width: 416px;
  height: 105px;
  margin-top: 3px;
  background-image: url("../_img/btn-login.png");
}

@media (max-width: 1000px) {
  .btn.btn-login {
    width: 41.6vw;
    height: 10.5vw;
    margin-top: 0.3vw;
  }
}

.btn.btn-login:hover {
  background-image: url("../_img/btn-login-hover.png");
}

.main {
  position: relative;
  z-index: 2;
  text-align: center;
}

.main .btn-download {
  display: block;
  width: 895px;
  height: 195px;
  margin: auto;
  position: relative;
  z-index: 3;
  background: url("../_img/btn-download.png") center no-repeat;
  background-size: 100%;
  -webkit-animation: btn-download 1s steps(2) infinite;
          animation: btn-download 1s steps(2) infinite;
}

@media (max-width: 1000px) {
  .main .btn-download {
    width: 89.5vw;
    height: 19.5vw;
    -webkit-animation-name: btn-download2;
            animation-name: btn-download2;
  }
}

.main .btn-download:hover {
  background-image: url("../_img/btn-download-hover.png");
  -webkit-animation: none;
          animation: none;
}

.main .form {
  margin-top: 4px;
  margin-left: -20px;
}

@media (max-width: 1000px) {
  .main .form {
    margin-top: 0.4vw;
    margin-left: -2vw;
  }
}

.main .form .group {
  width: 890px;
  height: 141px;
  margin: 0 auto 8px auto;
  position: relative;
  background: center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  .main .form .group {
    width: 89vw;
    height: 14.1vw;
    margin-bottom: 0.8vw;
  }
}

.main .form .group.inputPhone {
  background-image: url("../_img/input-phone.png");
}

.main .form .group.inputNumber {
  background-image: url("../_img/input-number.png");
}

.main .form .group:last-of-type {
  margin-bottom: 0;
}

.main .form .group input {
  width: 520px;
  height: 105px;
  position: absolute;
  right: 10px;
  top: 8px;
  border-radius: 100px;
  background-color: #fff;
}

@media (max-width: 1000px) {
  .main .form .group input {
    width: 52vw;
    height: 10.5vw;
    right: 1vw;
    top: 0.8vw;
    border-radius: 10vw;
  }
}

.main .form .agree {
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-size: 50px;
}

@media (max-width: 1000px) {
  .main .form .agree {
    font-size: 5vw;
  }
}

.main .form .agree span {
  color: yellow;
  border-bottom: 1px solid;
}

.main .role-info {
  display: none;
  margin-top: 30px;
  font-size: 70px;
  text-align: left;
}

@media (max-width: 1000px) {
  .main .role-info {
    margin-top: 3vw;
    font-size: 7vw;
  }
}

.main .role-info span {
  color: #fee28f;
}

.main .role-info .btns {
  margin-top: 30px;
}

@media (max-width: 1000px) {
  .main .role-info .btns {
    margin-top: 3vw;
  }
}

.main .role-info .btns .btn {
  margin-right: 30px;
}

@media (max-width: 1000px) {
  .main .role-info .btns .btn {
    margin-right: 3vw;
  }
}

.main .role-info .btns .btn:last-of-type {
  margin-right: 0 !important;
}

.main .roulette-block {
  margin-top: 30px;
  position: relative;
  color: #fff;
  text-align: center;
}

@media (max-width: 1000px) {
  .main .roulette-block {
    margin-top: 3vw;
  }
}

.main .roulette-block ul.tabs {
  font-size: 0;
}

.main .roulette-block ul.tabs li {
  display: inline-block;
  vertical-align: middle;
  width: 320px;
  max-width: 31.5%;
  height: 326px;
  margin: 0 5px;
  position: relative;
  background: url("../_img/tab.png") center no-repeat;
  background-size: contain;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .main .roulette-block ul.tabs li {
    width: 100%;
    height: 32.6vw;
    margin: 0 0.5vw;
  }
}

.main .roulette-block ul.tabs li .btn {
  width: 100%;
  height: 120px;
  position: absolute;
  left: 0;
  bottom: 35px;
}

@media (max-width: 1000px) {
  .main .roulette-block ul.tabs li .btn {
    height: 12vw;
    bottom: 3.5vw;
  }
}

.main .roulette-block ul.tabs li .btn.point500 {
  background-image: url("../_img/tab-p500.png");
}

.main .roulette-block ul.tabs li .btn.point1000 {
  background-image: url("../_img/tab-p1000.png");
}

.main .roulette-block ul.tabs li .btn.point3000 {
  background-image: url("../_img/tab-p3000.png");
}

.main .roulette-block ul.tabs li.active {
  background-image: url("../_img/tab-active.png");
}

.main .roulette-block .tab-content {
  width: 985px;
  height: 1403px;
  margin: 10px auto 0 auto;
  position: relative;
  background: url("../_img/roulette-bg.png") center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  .main .roulette-block .tab-content {
    width: 100%;
    height: 140.3vw;
    margin-top: 1vw;
    background-size: 98.1vw;
  }
}

.main .roulette-block .text {
  width: 100%;
  position: absolute;
  left: 0;
  top: 120px;
  font-size: 50px;
}

@media (max-width: 1000px) {
  .main .roulette-block .text {
    top: 12vw;
    font-size: 5vw;
  }
}

.main .roulette-block .text .card {
  display: inline-block;
  vertical-align: middle;
  width: 152px;
  height: 152px;
  margin: 0 10px;
  background: center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  .main .roulette-block .text .card {
    width: 15.2vw;
    height: 15.2vw;
    margin: 0 1vw;
  }
}

.main .roulette-block .text .yellow {
  font-weight: bold;
  font-size: 54px;
}

@media (max-width: 1000px) {
  .main .roulette-block .text .yellow {
    font-size: 5.4vw;
  }
}

.main .roulette-block .btn-spin {
  width: 245px;
  height: 270px;
  margin-left: -122.5px;
  position: absolute;
  left: 50%;
  bottom: 490px;
  z-index: 5;
  background-image: url("../_img/btn-spin.png");
}

@media (max-width: 1000px) {
  .main .roulette-block .btn-spin {
    width: 24.5vw;
    height: 27vw;
    margin-left: -12.25vw;
    bottom: 49vw;
  }
}

.main .roulette-block .btn-spin:hover {
  background-image: url("../_img/btn-spin-hover.png");
}

.main .roulette-block .btn-spin[disabled="disabled"] {
  background-image: url("../_img/btn-spin-disabled.png");
}

.main .roulette-block .mask, .main .roulette-block .award, .main .roulette-block .title {
  position: absolute;
  left: 50%;
  background: center no-repeat;
  background-size: contain;
}

.main .roulette-block .mask {
  display: none;
  width: 662px;
  height: 675px;
  margin-left: -331px;
  bottom: 290px;
  z-index: 2;
  background-image: url("../_img/roulette-selected.png");
}

@media (max-width: 1000px) {
  .main .roulette-block .mask {
    width: 66.2vw;
    height: 67.5vw;
    margin-left: -33.1vw;
    bottom: 29vw;
  }
}

.main .roulette-block .award {
  width: 800px;
  height: 800px;
  margin-left: -400px;
  bottom: 220px;
}

@media (max-width: 1000px) {
  .main .roulette-block .award {
    width: 80vw;
    height: 80vw;
    margin-left: -40vw;
    bottom: 22vw;
  }
}

.main .roulette-block .award:after {
  content: '';
  width: 740px;
  height: 743px;
  margin-left: -370px;
  position: absolute;
  left: 50%;
  bottom: 27px;
  background: url("../_img/roulette-light.png") 0 0 no-repeat;
  background-size: 200%;
  -webkit-animation: wheel 0.5s steps(2) infinite alternate;
          animation: wheel 0.5s steps(2) infinite alternate;
}

@media (max-width: 1000px) {
  .main .roulette-block .award:after {
    width: 74vw;
    height: 74.3vw;
    margin-left: -37vw;
    bottom: 2.7vw;
    -webkit-animation-name: wheel2;
            animation-name: wheel2;
  }
}

.main .roulette-block .title {
  width: 345px;
  height: 95px;
  margin-left: -177.5px;
  bottom: 38px;
  font-size: 0;
}

@media (max-width: 1000px) {
  .main .roulette-block .title {
    width: 34.5vw;
    height: 9.5vw;
    margin-left: -17.75vw;
    bottom: 3.8vw;
  }
}

.main .roulette-block .roulette {
  display: none;
}

.main .roulette-block .roulette:after {
  content: '';
  display: block;
  width: 200px;
  height: 72px;
  position: absolute;
  top: 0;
  background: url("../_img/tab-tri.png") center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  .main .roulette-block .roulette:after {
    width: 20vw;
    height: 7.2vw;
    top: 0.3%;
  }
}

.main .roulette-block .roulette:first-of-type {
  display: block;
}

.main .roulette-block .roulette.disabled .pointer, .main .roulette-block .roulette.disabled .award {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.main .roulette-block .roulette.disabled .award:after {
  -webkit-animation: none;
          animation: none;
}

.main .roulette-block .point500:after {
  left: 70px;
}

@media (max-width: 1000px) {
  .main .roulette-block .point500:after {
    left: 7vw;
  }
}

.main .roulette-block .point500 .text .card {
  background-image: url("../_img/yoe500.jpg");
}

.main .roulette-block .point500 .award {
  background-image: url("../_img/roulette-p500-gifts.png");
}

.main .roulette-block .point1000:after {
  margin-left: -100px;
  left: 50%;
}

@media (max-width: 1000px) {
  .main .roulette-block .point1000:after {
    margin-left: -10vw;
  }
}

.main .roulette-block .point1000 .text .card {
  background-image: url("../_img/yoe1000.jpg");
}

.main .roulette-block .point1000 .award {
  background-image: url("../_img/roulette-p1000-gifts.png");
}

.main .roulette-block .point3000:after {
  right: 70px;
}

@media (max-width: 1000px) {
  .main .roulette-block .point3000:after {
    right: 7vw;
  }
}

.main .roulette-block .point3000 .text .card {
  background-image: url("../_img/yoe3000.jpg");
}

.main .roulette-block .point3000 .award {
  background-image: url("../_img/roulette-p3000-gifts.png");
}

.main .notice {
  margin-top: 40px;
  padding-bottom: 50px;
  position: relative;
}

@media (max-width: 1000px) {
  .main .notice {
    margin-top: 4vw;
    padding-bottom: 5vw;
  }
}

.main .notice:before, .main .notice:after {
  content: '';
  display: block;
  width: 100vw;
  margin-left: -50vw;
  position: absolute;
  left: 50%;
  z-index: 1;
}

.main .notice:before {
  height: 85px;
  top: 20px;
  background: url("../_img/notice-bg.png") center repeat-x;
  background-size: 190%;
}

@media (max-width: 1000px) {
  .main .notice:before {
    height: 8.5vw;
    top: 2vw;
  }
}

.main .notice:after {
  height: 100%;
  top: 90px;
  background-color: #e65653;
}

@media (max-width: 1000px) {
  .main .notice:after {
    top: 9vw;
  }
}

.main .notice .title {
  width: 100%;
  height: 165px;
  position: relative;
  z-index: 2;
  background: url("../_img/notice-title.png") center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  .main .notice .title {
    height: 16.5vw;
  }
}

.main .notice ol {
  margin: 50px 40px;
  padding-left: 1em;
  position: relative;
  z-index: 2;
  text-align: justify;
  font-weight: normal;
}

@media (max-width: 1000px) {
  .main .notice ol {
    margin: 5vw 4vw;
  }
}

.main .notice ol ul {
  padding-left: 1em;
  list-style: disc;
}

.preload {
  display: none;
}

@-webkit-keyframes btn-download {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -390px;
  }
}

@keyframes btn-download {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -390px;
  }
}

@-webkit-keyframes btn-download2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -39vw;
  }
}

@keyframes btn-download2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -39vw;
  }
}

@-webkit-keyframes wheel {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1480px 0;
  }
}

@keyframes wheel {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1480px 0;
  }
}

@-webkit-keyframes wheel2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -148vw 0;
  }
}

@keyframes wheel2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -148vw 0;
  }
}

/* ==========================================================================
* footer
 ==========================================================================*/
#footer {
  height: 204px;
  margin-top: -52px;
  padding-top: 60px;
  position: relative;
  z-index: 2;
  background: url("../_img/footer-bg.png") center bottom repeat-x;
  text-align: center;
}

@media (max-width: 1000px) {
  #footer {
    height: 20.4vw;
    margin-top: -5.2vw;
    padding-top: 6vw;
    background-size: 192%;
  }
}

#footer .wanin, #footer .yoecard, #footer .level {
  display: inline-block;
  vertical-align: text-bottom;
}

#footer .wanin {
  width: 342px;
  height: 112px;
  background: url("../_img/wanin.png") center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  #footer .wanin {
    width: 34.2vw;
    height: 11.2vw;
  }
}

#footer .yoecard {
  width: 212px;
  height: 107px;
  margin: 0 20px;
  background: url("../_img/yoecard.png") center no-repeat;
  background-size: contain;
}

@media (max-width: 1000px) {
  #footer .yoecard {
    width: 21.2vw;
    height: 10.7vw;
    margin: 0 2vw;
  }
}

#footer .level {
  width: 81px;
  margin-bottom: 5px;
  margin-left: 10px;
}

@media (max-width: 1000px) {
  #footer .level {
    width: 8.1vw;
    margin-bottom: 0.5vw;
    margin-left: 1vw;
  }
}

#footer .level img {
  display: block;
  width: 100%;
}

/* header-text 獲獎跑馬燈 */
.header-text {
  width: 100%;
  /*padding: 15px;*/
  position: fixed;
  left: 0;
  top: -100%;
  z-index: 80;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 35px;
  text-align: center;
  font-weight: bold;
  line-height: 1.5em;
  -webkit-transition: top 1s;
  transition: top 1s;
}

@media (max-width: 1000px) {
  .header-text {
    font-size: 3.5vw;
  }
}

.header-text .ah-headline {
  font-family: "微軟正黑體", Heiti TC, Microsoft JhengHei, Verdana;
  overflow: hidden;
  display: inline;
}

.header-text .ah-headline.slide .ah-words-wrapper {
  vertical-align: middle;
}

.header-text .ah-headline > span {
  padding: 10px 0;
}

.header-text .ah-words-wrapper {
  width: 100% !important;
  text-align: center !important;
}

.header-text.active {
  top: 150px;
}

@media (max-width: 1000px) {
  .header-text.active {
    top: 14vw;
  }
}

.header-text .gift {
  padding: 0 10px !important;
}

.header-text .phone-num, .header-text .gift {
  color: #fdf400;
}

@media (max-width: 767px) {
  .header-text .phone-num, .header-text .gift {
    padding: 0 5px !important;
  }
}
/*# sourceMappingURL=main.css.map */