@charset "UTF-8";

/*
============================ ROULETTE CSS ==============================
*/

#challengeArea {
  position: relative;
  margin: 0 auto 40px;
  text-align: center;
}
#popupRoulette {
  box-sizing: border-box;
  width: 27%;
  min-width: 375px;
  padding: 20px 0;
  margin: 30px auto;
  background-color: #ffe236;
}
#popupRoulette article {
  width: 96%;
  padding: 30px 0 15px;
  margin: 0 auto;
  overflow: visible;
  background: #fff;
  border-radius: 10px;
}
#popupRoulette article::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
  width: 100%;
  height: 100%;
  content: "";
  background: #fff;
  opacity: 0;
}
.todayTit {
  width: 92%;
  max-width: 400px;
  margin: 0 auto 10px;
}
.controller {
  position: relative;
  margin: 10px;
  text-align: center;
}
.controller button {
  margin: 0 0 5px;
  line-height: 30px;
  cursor: pointer;
}
button#btnStart {
  position: absolute;
  top: 80px;
  right: 0;
  left: 0;
  z-index: 10;
  width: 145px;
  height: 145px;
  margin: 0 auto;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  animation: flash 1s linear infinite;
}
button#btnStop {
  position: absolute;
  top: 80px;
  right: 0;
  left: 0;
  z-index: 10;
  display: none;
  width: 145px;
  height: 145px;
  margin: 0 auto;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  animation: flash 1s linear infinite;
}
button#btnPopRoulette {
  margin: 0 auto 60px;
  cursor: pointer;
}

@keyframes flash {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.mfp-close {
  position: relative;
  z-index: 10;
  width: auto;
  height: auto;
  padding: 0;
  font-size: 12px;
}
.mfp-close-top {
}
.mfp-container {
  padding: 0 !important;
}
.controller .num {
  width: 30px;
}
#rouletteArea {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
#carcle {
  position: absolute;
  top: -15px;
  right: 0;
  left: 0;
  display: block;
  width: 340px;
  height: 340px;
  margin: auto;
}
#arrow {
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-color: #000 transparent transparent transparent;
  border-style: solid;
  border-width: 50px 20px 0 20px;
}
#arrow::after {
  position: absolute;
  top: -46px;
  left: -14px;
  z-index: 11;
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  content: "";
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 37px 14px 0 14px;
}
#roulette {
  position: relative;
  width: 308px;
  /* width: 266px; */
  height: 308px;
  margin: 0 auto 30px;
  overflow: hidden;
  counter-reset: num;
  border-radius: 50%;
  transform: rotate(-21.176deg);
}
.stop {
  -webkit-animation-duration: 3.6s;
  animation-duration: 3.6s;
  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1.04);
  animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1.04);
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.roll {
  -webkit-animation: rotation 0.71s linear infinite;
  animation: rotation 0.71s linear infinite;
}

#roulette.number-1 {
  -webkit-animation-name: "number-1";
  animation-name: "number-1";
}
#roulette.number-2 {
  -webkit-animation-name: "number-2";
  animation-name: "number-2";
}
#roulette.number-3 {
  -webkit-animation-name: "number-3";
  animation-name: "number-3";
}
#roulette.number-4 {
  -webkit-animation-name: "number-4";
  animation-name: "number-4";
}
#roulette.number-5 {
  -webkit-animation-name: "number-5";
  animation-name: "number-5";
}
#roulette.number-6 {
  -webkit-animation-name: "number-6";
  animation-name: "number-6";
}
#roulette.number-7 {
  -webkit-animation-name: "number-7";
  animation-name: "number-7";
}
#roulette.number-8 {
  -webkit-animation-name: "number-8";
  animation-name: "number-8";
}
#roulette.number-9 {
  -webkit-animation-name: "number-9";
  animation-name: "number-9";
}
#roulette.number-10 {
  -webkit-animation-name: "number-10";
  animation-name: "number-10";
}
#roulette.number-11 {
  -webkit-animation-name: "number-11";
  animation-name: "number-11";
}
#roulette.number-12 {
  -webkit-animation-name: "number-12";
  animation-name: "number-12";
}
#roulette.number-13 {
  -webkit-animation-name: "number-13";
  animation-name: "number-13";
}
#roulette.number-14 {
  -webkit-animation-name: "number-14";
  animation-name: "number-14";
}
#roulette.number-15 {
  -webkit-animation-name: "number-15";
  animation-name: "number-15";
}
#roulette.number-16 {
  -webkit-animation-name: "number-16";
  animation-name: "number-16";
}
#roulette.number-17 {
  -webkit-animation-name: "number-17";
  animation-name: "number-17";
}
#roulette::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 175px;
  height: 175px;
  margin: auto;
  content: "";
  background-color: #fff;
  border-radius: 50%;
}
#roulette li {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  width: 50px;
  height: 154px;
  margin: auto;
  transform-origin: 25px 154px;
}
#roulette li::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: inline-block;
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
  border-width: 136px 25px;
}
/* #roulette li::after {
  position: absolute;
  z-index: 5;
  display: block;
  width: 50px;
  font-size: 20px;
  font-weight: bold;
  line-height: 40px;
  color: #fff;
  text-align: center;
  content: counter(num);
  counter-increment: num;
} */
#roulette li:nth-of-type(1) {
  transform: rotate(21.176deg);
}
#roulette li:nth-of-type(1)::before {
  border-color: #e5243b transparent transparent;
}
#roulette li:nth-of-type(2) {
  transform: rotate(42.352deg);
}
#roulette li:nth-of-type(2)::before {
  border-color: #dda63a transparent transparent;
}
#roulette li:nth-of-type(3) {
  transform: rotate(63.528deg);
}
#roulette li:nth-of-type(3)::before {
  border-color: #4c9f38 transparent transparent;
}
#roulette li:nth-of-type(4) {
  transform: rotate(84.704deg);
}
#roulette li:nth-of-type(4)::before {
  border-color: #c5192d transparent transparent;
}
#roulette li:nth-of-type(5) {
  transform: rotate(105.88deg);
}
#roulette li:nth-of-type(5)::before {
  border-color: #ff3a21 transparent transparent;
}
#roulette li:nth-of-type(6) {
  transform: rotate(127.056deg);
}
#roulette li:nth-of-type(6)::before {
  border-color: #26bde2 transparent transparent;
}
#roulette li:nth-of-type(7) {
  transform: rotate(148.232deg);
}
#roulette li:nth-of-type(7)::before {
  border-color: #fcc30b transparent transparent;
}
#roulette li:nth-of-type(8) {
  transform: rotate(169.408deg);
}
#roulette li:nth-of-type(8)::before {
  border-color: #a21942 transparent transparent;
}
#roulette li:nth-of-type(9) {
  transform: rotate(190.584deg);
}
#roulette li:nth-of-type(9)::before {
  border-color: #fd6925 transparent transparent;
}
#roulette li:nth-of-type(10) {
  transform: rotate(211.76deg);
}
#roulette li:nth-of-type(10)::before {
  border-color: #dd1367 transparent transparent;
}
#roulette li:nth-of-type(11) {
  transform: rotate(232.936deg);
}
#roulette li:nth-of-type(11)::before {
  border-color: #fd9d24 transparent transparent;
}
#roulette li:nth-of-type(12) {
  transform: rotate(254.112deg);
}
#roulette li:nth-of-type(12)::before {
  border-color: #bf8b2e transparent transparent;
}
#roulette li:nth-of-type(13) {
  transform: rotate(275.288deg);
}
#roulette li:nth-of-type(13)::before {
  border-color: #3f7e44 transparent transparent;
}
#roulette li:nth-of-type(14) {
  transform: rotate(296.464deg);
}
#roulette li:nth-of-type(14)::before {
  border-color: #0a97d9 transparent transparent;
}
#roulette li:nth-of-type(15) {
  transform: rotate(317.64deg);
}
#roulette li:nth-of-type(15)::before {
  border-color: #56c02b transparent transparent;
}
#roulette li:nth-of-type(16) {
  transform: rotate(338.816deg);
}
#roulette li:nth-of-type(16)::before {
  border-color: #00689d transparent transparent;
}
#roulette li:nth-of-type(17) {
  transform: rotate(360deg);
}
#roulette li:nth-of-type(17)::before {
  border-color: #19486a transparent transparent;
}
#rouletteIcon {
  width: 92%;
  margin: 0 auto;
}
#btnWait {
  position: absolute;
  top: 80px;
  right: 0;
  left: 0;
  z-index: 2;
  display: none;
  width: 145px;
  height: 145px;
  margin: 0 auto;
}
#btnWait img {
  width: 100%;
  vertical-align: bottom;
}
#btnBase {
  position: absolute;
  top: 80px;
  right: 0;
  left: 0;
  z-index: 1;
  display: none;
  width: 145px;
  height: 145px;
  margin: 0 auto;
}
#btnBase img {
  width: 100%;
  vertical-align: bottom;
}

@keyframes number-1 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3578.824deg);
  }
}
@keyframes number-2 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3557.648deg);
  }
}
@keyframes number-3 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3536.472deg);
  }
}
@keyframes number-4 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3515.296deg);
  }
}
@keyframes number-5 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3494.12deg);
  }
}
@keyframes number-6 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3472.944deg);
  }
}
@keyframes number-7 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3451.768deg);
  }
}
@keyframes number-8 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3430.592deg);
  }
}
@keyframes number-9 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3409.416deg);
  }
}
@keyframes number-10 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3388.24deg);
  }
}
@keyframes number-11 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3367.064deg);
  }
}
@keyframes number-12 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3345.888deg);
  }
}
@keyframes number-13 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3324.712deg);
  }
}
@keyframes number-14 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3303.536deg);
  }
}
@keyframes number-15 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3282.36deg);
  }
}
@keyframes number-16 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3261.184deg);
  }
}
@keyframes number-17 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(3240.008deg);
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

#popupRoulette.fadeout {
  display: block;
  animation: fadeout 2s forwards;
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* mfp-bg（overlay） */
.mfp-fade01.mfp-bg,
.mfp-fade02.mfp-bg {
  opacity: 0;
  transition: all 0.2s ease-out;
}
.mfp-fade01.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade02.mfp-bg.mfp-ready {
  opacity: 0.6;
}
.mfp-fade01.mfp-bg.mfp-removing,
.mfp-fade02.mfp-bg.mfp-removing {
  opacity: 0;
}

/* mfp-content */
.mfp-fade01.mfp-wrap .mfp-content,
.mfp-fade02.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.2s ease-out;
}
.mfp-fade01.mfp-wrap.mfp-ready .mfp-content,
.mfp-fade02.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade01.mfp-wrap.mfp-removing .mfp-content,
.mfp-fade02.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}
#rouletteClose {
  position: absolute;
  top: -96px;
  right: -34px;
  z-index: 10;
  width: 36px;
  height: 36px;
  font-size: 3.2rem;
  line-height: 1;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: #000;
  border-radius: 50%;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #rouletteClose {
    right: -3%;
  }
  button#btnPopRoulette {
    margin: 0 auto 30px;
  }
}