body {
  background-color: #FFB000;
}

.wrapper, *:before, *:after {
  position: relative;
  margin: 0;
  font-family: "Noto Sans TC", sans-serif, Verdana, Geneva, Tahoma, sans-serif;
  font-weight: normal;
  box-sizing: border-box;
}

.wrapper {
  background-color: #fff0b5;
  background-image: url(../images/wafflePattern.png);
}
.wrapper .nav-height {
  height: 65px;
}
.wrapper .kv {
  background-image: url(../images/kv_roundbg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.wrapper .kv .flagAnim {
  animation: swing 2s infinite;
}
.wrapper .kv .kvPcCont {
  position: relative;
  display: block;
  height: 40vw;
  max-width: 1280px;
  max-height: 518px;
  margin: 0 auto;
}
.wrapper .kv .kvPcCont .kvPC1 {
  width: 100%;
  position: absolute;
}
.wrapper .kv .kvPcCont .kvPC2 {
  width: 100%;
  position: absolute;
}
.wrapper .kv .kvPcCont .kvPC3 {
  width: 100%;
  position: absolute;
  animation: zoomInOut 2s infinite;
}
.wrapper .kv .kvPcCont .kvPC4 {
  width: 100%;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .wrapper .kv .kvPcCont {
    display: none;
  }
}
.wrapper .kv .kvSpCont {
  position: relative;
  display: none;
  height: 50vw;
  margin: 0 auto;
}
.wrapper .kv .kvSpCont .kvSP1 {
  width: 100%;
  position: absolute;
}
.wrapper .kv .kvSpCont .kvSP2 {
  width: 100%;
  position: absolute;
}
.wrapper .kv .kvSpCont .kvSP3 {
  width: 100%;
  position: absolute;
  animation: zoomInOut 2s infinite;
}
.wrapper .kv .kvSpCont .kvSP4 {
  width: 100%;
  position: absolute;
}
@media screen and (max-width: 768px) {
  .wrapper .kv .kvSpCont {
    display: block;
  }
}
.wrapper .kv .kvH1 {
  display: none;
}
.wrapper .hide {
  display: none;
}
.wrapper .modal .modal-dialog {
  max-width: 700px;
}
.wrapper .modal .modal-dialog .modal-content {
  background-image: url(../images/kv_roundbg.png);
  background-size: 100% 60%;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #fff0b5;
  border-radius: 20px;
  color: #24446e;
  overflow: hidden;
}
.wrapper .modal .modal-dialog .modal-content .modal-header {
  border-bottom: 0px;
}
.wrapper .modal .modal-dialog .modal-content .modal-body .colorCrimson {
  color: #b72643;
}
.wrapper .modal .modal-dialog .modal-content .modal-body .elephant {
  width: 100%;
  max-width: 180px;
}
@media screen and (max-width: 576px) {
  .wrapper .modal .modal-dialog .modal-content .modal-body .elephant {
    width: 80%;
  }
}
.wrapper .modal .modal-dialog .modal-content .modal-body .fox {
  width: 100%;
  max-width: 350px;
}
@media screen and (max-width: 576px) {
  .wrapper .modal .modal-dialog .modal-content .modal-body .fox {
    width: 80%;
  }
}
.wrapper .modal .modal-dialog .modal-content .modal-body .fill .row {
  --bs-gutter-x: 0.5rem;
}
.wrapper .modal .modal-dialog .modal-content .modal-body .fill .go_button {
  display: inline-block;
  text-align: center;
  background-color: #24446e;
  color: white;
  font-weight: bold;
  padding: 0.2em 1em;
  border: 0px;
  border-radius: 2em;
}
.wrapper .modal .modal-dialog .modal-content .bgCrimson {
  background-color: #b72643;
  color: white;
}
.wrapper .modal .modal-dialog .modal-content .bgCrimson .form-control {
  width: 50%;
  margin: 0 auto;
}
@media screen and (max-width: 576px) {
  .wrapper .modal .modal-dialog .modal-content .bgCrimson .form-control {
    width: 80%;
  }
}
.wrapper .modal .modal-dialog .modal-content .bgCrimson .selectArrow {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: url("../images/selectArrow.png") no-repeat right center transparent;
  background-size: 16px;
  background-color: #ffffff;
}
.wrapper .modal .modal-dialog .modal-content .bgCrimson .prizeComment {
  padding-top: 6px;
  font-size: 14px;
}
@media screen and (max-width: 576px) {
  .wrapper .modal .modal-dialog .modal-content .bgCrimson .prizeComment {
    font-size: 12px;
  }
}
.wrapper .modal .modal-dialog .modal-content .bgCrimson .go_button {
  display: inline-block;
  text-align: center;
  background-color: #facd1b;
  color: black;
  font-weight: bold;
  padding: 0.2em 1em;
  border: 0px;
  border-radius: 2em;
}
.wrapper .prizeWheelBg {
  background-image: url(../images/bg_clouds.png);
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.wrapper .prizeWheelBg .container-prize {
  max-width: 745px;
  margin: 0 auto;
}
.wrapper .prizeWheelBg .container-prize .prizeWheel_pin {
  position: relative;
  max-width: 127px;
  width: 15%;
  z-index: 30;
}
.wrapper .prizeWheelBg .container-prize .prizeWheel_pin::before, .wrapper .prizeWheelBg .container-prize .prizeWheel_pin::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}
.wrapper .prizeWheelBg .container-prize .prizeWheel_pin::before {
  width: 300%;
  height: 300%;
  top: 30px;
  left: -600px;
  transform: scaleX(-1);
  background-image: url("../images/stringFlag.png");
}
.wrapper .prizeWheelBg .container-prize .prizeWheel_pin::after {
  width: 250%;
  height: 250%;
  top: 50px;
  left: 440px;
  background-image: url("../images/flyingBook.png");
  animation: swing 2s infinite;
}
.wrapper .prizeWheelBg .container-prize .prizeWheelCont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 745px;
  width: 100%;
  margin-top: -6.5%;
  z-index: 20;
}
.wrapper .prizeWheelBg .container-prize .prizeWheelCont:after {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  content: "";
  width: 100%;
  height: 100%;
}
.wrapper .prizeWheelBg .container-prize .prizeWheelCont.disable:after {
  display: block;
}
.wrapper .prizeWheelBg .container-prize .prizeWheelCont .prizeWheel {
  width: 100%;
}
.wrapper .prizeWheelBg .container-prize .prizeWheelCont .prizeWheel.rotatingAnim {
  animation: rotating 12s linear infinite;
}
.wrapper .prizeWheelBg .container-prize .prizeWheelCont .drawButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  cursor: pointer;
}
.wrapper .prizeWheelBg .container-prize .prizeWheelCont .drawButton:hover {
  transition: 0.2s;
  margin-top: -3px;
}
.wrapper .prizeWheelBg .container-prize .prizeWheel_base {
  position: relative;
  max-width: 427px;
  width: 60%;
  margin-top: -45%;
  z-index: 10;
}
.wrapper .prizeWheelBg .container-prize .prizeWheel_base::before, .wrapper .prizeWheelBg .container-prize .prizeWheel_base::after {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  background-repeat: no-repeat;
  background-size: contain;
}
.wrapper .prizeWheelBg .container-prize .prizeWheel_base::before {
  top: 50px;
  left: -105%;
  background-image: url("../images/tiger.png");
}
.wrapper .prizeWheelBg .container-prize .prizeWheel_base::after {
  top: 50px;
  left: 145%;
  background-image: url("../images/deer.png");
}
.wrapper .termsBg {
  background-color: #fee281;
}
.wrapper .termsBg .termsBox {
  background-color: #fff9dd;
  border-radius: 30px;
}
.wrapper .termsBg .termsBox .termsTit {
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-thickness: 2px;
}
.wrapper .termsBg .openingBookCont {
  width: 90%;
  margin: -5% auto 0 auto;
}
.wrapper .termsBg .openingBookCont .openingBookPC {
  display: block;
  width: 100%;
}
.wrapper .termsBg .openingBookCont .openingBookSP {
  display: none;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .wrapper .termsBg .openingBookCont .openingBookPC {
    display: none;
  }
  .wrapper .termsBg .openingBookCont .openingBookSP {
    display: block;
  }
}

/* keyframes */
@keyframes zoomInOut {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.03;
  }
  100% {
    scale: 1;
  }
}
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/*# sourceMappingURL=style.css.map */