@charset "UTF-8";
/*容器基本框架*/
.wrapper {
  overflow: hidden;
}

/* ================= 版頭 ================= */
.header .container {
  padding-bottom: 71.09375%;
}

.header .container .headerBg {
  padding-bottom: 71.09375%;
  background-size: 150%;
}

.header .container .grassland-back {
  width: 100%;
  padding-bottom: 52.03125%;
  left: 0;
  background-size: 150%;
}

.header .container .prizeWheel {
  width: 41.48438%;
  padding-bottom: 45.15625%;
  left: 17.03125%;
}

.header .container .grassland {
  width: 100%;
  padding-bottom: 45.15625%;
  background-size: 150%;
}

.header .container .logo {
  width: 21.09375%;
  height: 0;
  padding-bottom: 7.1875%;
  background-size: 100%;
  position: absolute;
  top: 1.64835%;
  left: 76.5625%;
  background-image: url(../../images/logo.png);
}

.header .container .slogan {
  width: 71.09375%;
  padding-bottom: 15.625%;
  left: 4.53125%;
  -webkit-animation: sloganAnimate 2.5s;
          animation: sloganAnimate 2.5s;
}

.header .container .role {
  width: 38.90625%;
  padding-bottom: 64.29688%;
  left: 58.4375%;
}

@-webkit-keyframes sloganAnimate {
  0%,
  90% {
    top: 26.48352%;
    left: 15.78125%;
  }
  100% {
    top: 5.71429%;
    left: 4.53125%;
  }
}

@keyframes sloganAnimate {
  0%,
  90% {
    top: 26.48352%;
    left: 15.78125%;
  }
  100% {
    top: 5.71429%;
    left: 4.53125%;
  }
}

/* ================= 內容 ================= */
.content .container {
  width: 95%;
}

.content .container .countdownHolder {
  font: 1.8em sans-serif;
}

@media only screen and (max-width: 500px) {
  .content .container .countdownHolder {
    font: 1.3em sans-serif;
  }
}

@media only screen and (max-width: 374px) {
  .content .container .countdownHolder {
    font: 1.05em sans-serif;
  }
}

/*table標籤*/
.ribbon {
  width: 120%;
}

@media only screen and (max-width: 500px) {
  .ribbon p {
    font-size: 11px;
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    display: inline-block;
    white-space: nowrap;
  }
}

.ribbon--01:after {
  border-left: 8px solid #7800b7;
}

.ribbon--02:after {
  border-left: 8px solid #281f87;
}

@media only screen and (max-width: 812px) {
  .ribbonTop {
    width: 30px;
    right: -3px;
  }
  .ribbonTop p {
    font-size: 1.5em;
    line-height: 1.25em;
  }
  .ribbonTop:after {
    bottom: -14.5px;
    border-left: 15px solid #a40000;
    border-right: 15px solid #a40000;
    border-bottom: 15px solid transparent;
  }
}

@media only screen and (max-width: 500px) {
  .ribbonTop {
    width: 26px;
    right: -10px;
    border-top-right-radius: 3px;
    border-top-left-radius: 0;
  }
  .ribbonTop p {
    font-size: 1.125em;
    line-height: 1.125em;
  }
  .ribbonTop:after {
    bottom: -12.5px;
    border-left: 13px solid #a40000;
    border-right: 13px solid #a40000;
    border-bottom: 13px solid transparent;
  }
  .ribbonTop:before {
    right: 0;
    left: -7.5px;
    border-right: 0px;
    border-left: 8px solid transparent;
  }
  .tableStyle02 {
    font-size: 0.8em;
  }
  .tableStyle02 tr th {
    padding: 5px;
  }
}