@charset "UTF-8";
.luckyWheel {
  padding: 30px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  background-color: #F5F4DA;
  color: #454545; }
  .luckyWheel h2 {
    margin-bottom: 20px;
    font-size: 54px;
    font-weight: 900;
    margin-top: 0;
    color: #ff6161;
    display: inline-block; }
  .luckyWheel .secWrap {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    max-width: 960px;
    z-index: 2; }
  .luckyWheel-time {
    font-size: 18px; }
  .luckyWheel-log {
    margin-top: 10px;
    font-size: 24px;
    color: #69a9e5; }
    .luckyWheel-log button {
      border: 0;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      padding: 0 8px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding-bottom: 2px;
      color: #fff;
      background-color: #69a9e5;
      -webkit-box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); }
      .luckyWheel-log button:active {
        color: #eee; }
  .luckyWheel-num {
    margin-top: 15px;
    padding: 3px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.15);
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px; }
    .luckyWheel-num span {
      font-weight: 900;
      color: #ff6161; }
  .luckyWheel-btns {
    margin-top: 20px;
    position: relative; }
    .luckyWheel-btns li {
      display: inline-block;
      width: 214px;
      height: auto;
      margin: 0 20px;
      background-size: 100%;
      cursor: pointer;
      background-size: 100% auto;
      background-color: #69a9e5;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 30px;
      color: #fff;
      padding: 5px 10px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
  .luckyWheel__ps {
    font-size: 14px;
    color: #afa98b; }
  @media only screen and (max-width: 1024px) {
    .luckyWheel__ps {
      margin-top: 10px; } }
  @media only screen and (max-width: 768px) {
    .luckyWheel-btns {
      padding: 0; }
      .luckyWheel-btns li {
        margin: 0 5px;
        width: 45%;
        font-size: 18px; } }
  @media only screen and (max-width: 414px) {
    .luckyWheel-log, .luckyWheel-num {
      font-size: 18px; } }

/***********************************************/
/* /////----- 轉盤主軸START -----/////*/
.luckyWheel-itemBox .mainWheel, .luckyWheel-itemBox .mainWheel .big-border, .luckyWheel-itemBox .mainWheel .small-border {
  position: relative;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.luckyWheel-itemBox {
  width: 100%;
  max-width: 700px;
  min-height: 100%;
  margin: 30px auto;
  position: relative; }
  .luckyWheel-itemBox .mainWheel {
    padding: 3%;
    max-width: 700px;
    max-height: 700px;
    width: 100%;
    background-color: transparent;
    background-size: 100%;
    z-index: 3;}
    .luckyWheel-itemBox .mainWheel .big-border {
      -webkit-transition: all 2s cubic-bezier(1, 0.00001, 0.00001, 1);
      -o-transition: all 2s cubic-bezier(1, 0.00001, 0.00001, 1);
      transition: all 2s cubic-bezier(1, 0.00001, 0.00001, 1);
      overflow: hidden; }
    .luckyWheel-itemBox .mainWheel .small-border {
      width: 100%;
      background-image: url(../images/bigwheel/circle.png);
      background-repeat: no-repeat;
      background-size: contain;}
      .luckyWheel-itemBox .mainWheel .small-border:after {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        content: '';
        border-radius: 50%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3; }
    .luckyWheel-itemBox .mainWheel .start-btn {
      left: 25%;
      top: 25%;
      z-index: 100;
      -webkit-transition: all 2s cubic-bezier(1, 0.00001, 0.00001, 1);
      -o-transition: all 2s cubic-bezier(1, 0.00001, 0.00001, 1);
      transition: all 2s cubic-bezier(1, 0.00001, 0.00001, 1);
      width: 50%;
      height: 50%;
      background-image: url("../images/bigwheel/start.png");
      background-size: 50%;
      background-repeat: no-repeat;
      background-position: center 50%;
      cursor: pointer;
      position: absolute;
      text-indent: -9999px; }
      .luckyWheel-itemBox .mainWheel .start-btn.is--disable {
        cursor: inherit;
        background-image: url("../images/bigwheel/disable_start.png"); }
    .luckyWheel-itemBox .mainWheel .itemBox9 .item {
      z-index: 4;
      width: 30%;
      height: 50%;
      padding: 20px 5px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: absolute; }
      .luckyWheel-itemBox .mainWheel .itemBox9 .item:after {
        width: 1px;
        height: 104%;
        content: '';
        display: block;
        left: 50%;
        top: -10%;
        position: absolute;
        background-color: #bc8138;
        -webkit-transform: rotate(-19.6deg);
        -ms-transform: rotate(-19.6deg);
        transform: rotate(-19.6deg);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom; }
        .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(1):before {
          width: 109%;
          height: 104%;
          content: '';
          display: block;
          left: 50%;
          top: -10%;
          position: absolute;
          -webkit-transform: rotate(-19.6deg);
          -ms-transform: rotate(-19.6deg);
          transform: rotate(-19.6deg);
          -webkit-transform-origin: left bottom;
          -ms-transform-origin: left bottom;
          transform-origin: left bottom; }
          .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(2):before {
            width: 109%;
            height: 104%;
            content: '';
            display: block;
            left: 50%;
            top: -10%;
            position: absolute;
            -webkit-transform: rotate(-19.6deg);
            -ms-transform: rotate(-19.6deg);
            transform: rotate(-19.6deg);
            -webkit-transform-origin: left bottom;
            -ms-transform-origin: left bottom;
            transform-origin: left bottom; }
          .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(3):before {
            width: 109%;
            height: 104%;
            content: '';
            display: block;
            left: 50%;
            top: -10%;
            position: absolute;
            -webkit-transform: rotate(-19.6deg);
            -ms-transform: rotate(-19.6deg);
            transform: rotate(-19.6deg);
            -webkit-transform-origin: left bottom;
            -ms-transform-origin: left bottom;
            transform-origin: left bottom; }
            .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(4):before {
              width: 109%;
              height: 104%;
              content: '';
              display: block;
              left: 50%;
              top: -10%;
              position: absolute;
              -webkit-transform: rotate(-19.6deg);
              -ms-transform: rotate(-19.6deg);
              transform: rotate(-19.6deg);
              -webkit-transform-origin: left bottom;
              -ms-transform-origin: left bottom;
              transform-origin: left bottom; }
            .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(5):before {
              width: 109%;
              height: 104%;
              content: '';
              display: block;
              left: 50%;
              top: -10%;
              position: absolute;
              -webkit-transform: rotate(-19.6deg);
              -ms-transform: rotate(-19.6deg);
              transform: rotate(-19.6deg);
              -webkit-transform-origin: left bottom;
              -ms-transform-origin: left bottom;
              transform-origin: left bottom; }
              .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(6):before {
                width: 109%;
                height: 104%;
                content: '';
                display: block;
                left: 50%;
                top: -10%;
                position: absolute;
                -webkit-transform: rotate(-19.6deg);
                -ms-transform: rotate(-19.6deg);
                transform: rotate(-19.6deg);
                -webkit-transform-origin: left bottom;
                -ms-transform-origin: left bottom;
                transform-origin: left bottom; }
              .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(7):before {
                width: 109%;
                height: 104%;
                content: '';
                display: block;
                left: 50%;
                top: -10%;
                position: absolute;
                -webkit-transform: rotate(-19.6deg);
                -ms-transform: rotate(-19.6deg);
                transform: rotate(-19.6deg);
                -webkit-transform-origin: left bottom;
                -ms-transform-origin: left bottom;
                transform-origin: left bottom; }
              .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(8):before {
                border-style: solid;
                border-width: 0px 130px 409px 165px;
                border-color: transparent transparent transparent transparent;
                content: '';
                display: block;
                left: -8%;
                top: -10%;
                position: absolute;
                -webkit-transform: rotate(-181.6deg);
                -ms-transform: rotate(-181.6deg);
                transform: rotate(-181.6deg);
                -webkit-transform-origin: center;
                -ms-transform-origin: center;
                transform-origin: center; }
              .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(9):before {
                border-style: solid;
                border-width: 0px 158px 410px 140px;
                border-color: transparent transparent transparent transparent; 
                content: '';
                display: block;
                left:-15%;
                top: -10%;
                position: absolute;
                -webkit-transform: rotate(-178.6deg);
                -ms-transform: rotate(-178.6deg);
                transform: rotate(-178.6deg);
                -webkit-transform-origin: center;
                -ms-transform-origin: center;
                transform-origin: center; }
      .luckyWheel-itemBox .mainWheel .itemBox9 .item span {
        width: 100%;
        height: 30px;
        line-height: 1.2;
        display: block;
        color: #483232;
        font-size: 18px; 
        font-weight: 600;
        text-align: center;
        position: relative;
        z-index: 1;}
      .luckyWheel-itemBox .mainWheel .itemBox9 .item-img {
        width: 70%;
        width: 80px;
        height: 80px;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        overflow: hidden;
        position: relative;
        margin: 80px auto 0;
        background-color: #fff;
        overflow: hidden; }
        .luckyWheel-itemBox .mainWheel .itemBox9 .item-img img {
          width: 100%;
          height: auto; }
        .luckyWheel-itemBox .mainWheel .itemBox9 .item-img img {
          text-align: center;
          position: relative;
          top: 50%;
          left: 50%;
          width: 70%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
  @media only screen and (max-width: 768px) {
    .luckyWheel-itemBox .mainWheel .start-btn {
      background-size: 60% auto; }
    .luckyWheel-itemBox .mainWheel .itemBox9 .item {
      padding-top: 5px; }
      .luckyWheel-itemBox .mainWheel .itemBox9 .item span {
        font-size: 16px; }
      .luckyWheel-itemBox .mainWheel .itemBox9 .item-img {
        margin: 3.75rem auto;
        width: 54px;
        height: 54px; }
        .luckyWheel-itemBox .mainWheel .itemBox9 .item-img img {
          left: 50%;
          width: 70%; } }

@media only screen and (max-width:768px){
  .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(9):before{
    border-width: 0px 175px 352px 70px;
    left: -25%;
    top: -10%;
    transform: rotate(-172.6deg);
    -webkit-transform: rotate(-172.6deg);
    -moz-transform: rotate(-172.6deg);
    -ms-transform: rotate(-172.6deg);
    -o-transform: rotate(-172.6deg);
  }
}
  @media only screen and (max-width: 414px) {
    .luckyWheel-itemBox {
      margin: 20px auto; }
      .luckyWheel-itemBox .mainWheel .small-border:after {
        background-color: transparent; }
      .luckyWheel-itemBox .mainWheel .itemBox9 .item-img {
        margin: .3rem auto;
        width: 40px;
        height: 40px; } }

  

.itemBox9 .item:nth-child(1) {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg); }

.itemBox9 .item:nth-child(2) {
  -webkit-transform: rotate(70deg);
  -ms-transform: rotate(70deg);
  transform: rotate(70deg); }

.itemBox9 .item:nth-child(3) {
  -webkit-transform: rotate(110deg);
  -ms-transform: rotate(110deg);
  transform: rotate(110deg); }

.itemBox9 .item:nth-child(4) {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg); }

.itemBox9 .item:nth-child(5) {
  -webkit-transform: rotate(190deg);
  -ms-transform: rotate(190deg);
  transform: rotate(190deg); }

.itemBox9 .item:nth-child(6) {
  -webkit-transform: rotate(230deg);
  -ms-transform: rotate(230deg);
  transform: rotate(230deg); }

.itemBox9 .item:nth-child(7) {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg); }

.itemBox9 .item:nth-child(8) {
  -webkit-transform: rotate(310deg);
  -ms-transform: rotate(310deg);
  transform: rotate(310deg); }

.itemBox9 .item:nth-child(9) {
  -webkit-transform: rotate(350deg);
  -ms-transform: rotate(350deg);
  transform: rotate(350deg); }

.itemBox9 .item:nth-of-type(1) {
  left: 46%;
  top: 7%; }

.itemBox9 .item:nth-of-type(2) {
  left: 55%;
  top: 18%; }

.itemBox9 .item:nth-of-type(3) {
  left: 55%;
  top: 33%; }

.itemBox9 .item:nth-of-type(4) {
  left: 46%;
  top: 44.5%; }

.itemBox9 .item:nth-of-type(5) {
  left: 31.5%;
  top: 47%; }

.itemBox9 .item:nth-of-type(6) {
  left: 18%;
  top: 40%; }

.itemBox9 .item:nth-of-type(7) {
  left: 13.2%;
  top: 25.4%; }

.itemBox9 .item:nth-of-type(8) {
  left: 17.5%;
  top: 11%; }

.itemBox9 .item:nth-of-type(9) {
  left: 31%;
  top: 4%; }

.item-img--opacity{
  opacity: 0;
}


.swal2-content img {
  width: 75px;
  height: auto;
  margin: 20px auto;  
}


#luckWheel__control .lucky__point{
  font-size: 22px;
  line-height: 1.5;
  color: #483232;
  font-weight: 600;
}

@media only screen and (max-width: 540px){
  #luckWheel__control .lucky__point{
    font-size: 15px;
  }
  .luckyWheel-itemBox .mainWheel .itemBox9 .item-img{
    width: 40px;
    height: 40px;
    margin: 2.5rem auto;
  }
  .luckyWheel-itemBox .mainWheel .itemBox9 .item span{
    font-size: 14px;
  }
  .luckyWheel-itemBox{
    margin: 0 auto;
  }
}

@media only screen and (max-width:425px){
.luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(9):before{
  border-width: 0px 112px 173px 34px;
  left: -36%;
  top: -12%;
  transform: rotate(-168.6deg);
  -webkit-transform: rotate(-168.6deg);
  -moz-transform: rotate(-168.6deg);
  -o-transform: rotate(-168.6deg);
  -ms-transform: rotate(-168.6deg);
}
.luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(8):before{
  border-width: 0px 68px 210px 84px;
}
.luckyWheel-itemBox .mainWheel .itemBox9 .item-img{
  margin: 1.1rem auto;
}
#luckWheel__control .lucky__point{
  font-size: 12px;
}
}

@media only screen and (max-width:375px){
  .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(9):before{
    border-width: 0px 106px 170px 5px;
  }
  .luckyWheel-itemBox .mainWheel .itemBox9 .item span{
    font-size: 12px;
  }
}

@media only screen and (max-width: 320px){
  
  .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(9):before{
    border-width: 0px 90px 145px 5px;
  }
  .luckyWheel-itemBox .mainWheel .itemBox9 .item:nth-child(8):before{
    border-width: 0px 60px 176px 84px;
  }
}


/* /////----- 轉盤主軸END -----/////*/
/***********************************************/



