@charset "UTF-8";
/* Reset By Normalize */
@import url(/css/normalize.css);
/* ================= 頁面框架設定 ================= */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

canvas {
  position: absolute;
  left: 0;
  width: 100%;
}

body {
  overflow: hidden;
  font-family: "Helvetica Neue","微軟正黑體","Helvetica","Arial","PingFangTC-Light","STHeitiTC-Light","Microsoft JhengHei",sans-serif;
}

@media screen and (orientation: portrait) {
  html,
  body {
    height: 100vmin;
    font-family: "Helvetica Neue","微軟正黑體","Helvetica","Arial","PingFangTC-Light","STHeitiTC-Light","Microsoft JhengHei",sans-serif;
    -webkit-text-size-adjust: none;
    /*iPhone旋轉後 文字不要放大*/
  }
  #ingame_view {
    position: relative;
    width: 100vmax;
    height: 100vmin;
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: rotate(90deg) translate(0, -100vmin);
            transform: rotate(90deg) translate(0, -100vmin);
    padding-top: constant(safe-area-inset-top);
    padding-top: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-left);
  }
}

@media screen and (orientation: landscape) {
  html, body {
    width: 100%;
    height: 100%;
  }
  #ingame_view {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding-top: constant(safe-area-inset-top);
    padding-top: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-left);
  }
}

.wrapper_ingame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-size: 100%;
}

.wrapper_ingame.Scene {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/1920X1920_bg.jpg?20220504);
  background-repeat: no-repeat;
  background-size: 100%, cover !important;
  background-position: center center;
  background-color: #00011c;
}

@media (max-aspect-ratio: 9 / 4) {
  .wrapper_ingame.Scene {
    background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/1920X1920_bg.jpg?20220504);
    background-size: 100% auto;
  }
}

@media (min-aspect-ratio: 4 / 9) and (orientation: portrait) {
  .wrapper_ingame.Scene {
    background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/1920X1920_bg.jpg?20220504);
    background-size: 100% auto;
  }
}

@media (min-aspect-ratio: 9 / 4) {
  .wrapper_ingame.Scene {
    background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/bg.jpg?20220504);
    background-size: 100% auto;
  }
}

@media (max-aspect-ratio: 4 / 9) and (orientation: portrait) {
  .wrapper_ingame.Scene {
    background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/bg.jpg?20220504);
    background-size: 100% auto;
  }
}

.ingame_machine, .box_windows {
  width: 100%;
  height: 100%;
  position: relative;
}

@media (max-aspect-ratio: 9 / 4) {
  .ingame_machine, .box_windows {
    width: 90.5625vw;
    height: 40.25vw;
  }
}

@media (min-aspect-ratio: 4 / 9) and (orientation: portrait) {
  .ingame_machine, .box_windows {
    width: 98.4375vh;
    height: 43.75vh;
  }
}

@media (min-aspect-ratio: 9 / 4) {
  .ingame_machine, .box_windows {
    width: 213.75vh;
    width: calc(var(--vh, 1vh) * 213.75);
    padding-bottom: initial;
    height: 95vh;
    height: calc(var(--vh, 1vh) * 95);
    background-size: auto 100%;
    background-position: top center;
  }
}

@media (max-aspect-ratio: 4 / 9) and (orientation: portrait) {
  .ingame_machine, .box_windows {
    width: 216vw;
    height: 96vw;
  }
}

.box_windows {
  display: none;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 100%;
}

.box_windows-bg {
  display: none;
  top: -30%;
  left: -30%;
  position: absolute;
  width: 200%;
  height: 200%;
  max-height: 100vmax;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  z-index: 5;
}

.box_windows .layer_click {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box_windows .box_container.question, .box_windows .box_container.record, .box_windows .box_container.prize_item {
  font-size: 88%;
  display: none;
  top: 10%;
  left: 7.5%;
  width: 85%;
  height: 85%;
  padding: 1em;
  color: #000;
  line-height: 1.5em;
  border: solid 10px #4a36e4;
  border-radius: 10px;
}

.box_windows .box_container.question h4, .box_windows .box_container.record h4, .box_windows .box_container.prize_item h4 {
  position: relative;
  color: #4a36e4;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  font-size: 1.35em;
  margin: 12px 0 0 0;
  padding: 5px 0;
}

.box_windows .box_container.question h4::before, .box_windows .box_container.record h4::before, .box_windows .box_container.prize_item h4::before {
  content: '';
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin: 0 5px;
  background-image: url("/Action/11_Star31/20220504MSJ/images/diamond.svg");
  background-size: 100%;
}

.box_windows .box_container.question h5, .box_windows .box_container.record h5, .box_windows .box_container.prize_item h5 {
  font-size: 1.3em;
  padding: .4em;
  text-align: center;
  color: #fff;
  margin: 20px 0;
  line-height: 28px;
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), color-stop(20%, rgba(253, 116, 162, 0.35)), color-stop(40%, #fd74a2), color-stop(60%, #fd74a2), color-stop(80%, rgba(253, 116, 162, 0.35)), to(rgba(0, 0, 0, 0)));
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(253, 116, 162, 0.35) 20%, #fd74a2 40%, #fd74a2 60%, rgba(253, 116, 162, 0.35) 80%, rgba(0, 0, 0, 0) 100%);
}

.box_windows .box_container.question > p, .box_windows .box_container.record > p, .box_windows .box_container.prize_item > p {
  padding-left: 2em;
}

.box_windows .box_container.question ol, .box_windows .box_container.record ol, .box_windows .box_container.prize_item ol {
  padding-left: 3em;
}

.box_windows .box_container {
  position: absolute;
  border: 10px solid transparent;
  background: #fff;
  -webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow-y: scroll;
}

.box_windows .box_container::-webkit-scrollbar {
  width: 10px;
  border-radius: 5px;
}

.box_windows .box_container::-webkit-scrollbar-track {
  background-color: transparent;
}

.box_windows .box_container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.box_windows .box_container::-webkit-scrollbar-button {
  background-color: transparent;
}

.box_windows a.btn_x {
  position: absolute;
  top: 7.5%;
  right: 6%;
  width: 4%;
  height: 75px;
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/X.png?20220504);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 20;
  text-decoration: none;
}

.go_in {
  display: block;
  opacity: 1;
}

.go_out {
  display: none;
  opacity: 0;
}

.token {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/token.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
}

.token .nums {
  width: 63.71191%;
  height: 41.02564%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: 30%;
  left: 26.31579%;
}

.token .nums .num {
  width: 15.21739%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-size: 99% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.token .nums .num-0 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/0.png);
}

.token .nums .num-1 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/1.png);
}

.token .nums .num-2 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/2.png);
}

.token .nums .num-3 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/3.png);
}

.token .nums .num-4 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/4.png);
}

.token .nums .num-5 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/5.png);
}

.token .nums .num-6 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/6.png);
}

.token .nums .num-7 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/7.png);
}

.token .nums .num-8 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/8.png);
}

.token .nums .num-9 {
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/9.png);
}

.token .nums .num-comma {
  width: 7.82609%;
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/number/comma.png);
}

.box_infoBtn {
  position: absolute;
  left: 1.1%;
  bottom: 2%;
  width: 11.5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.box_infoBtn .btn_question, .box_infoBtn .btn_get {
  margin: 0 2%;
  display: block;
  width: 47%;
  padding-bottom: 44%;
  background-size: 100% 100%;
  cursor: pointer;
}

.box_infoBtn .btn_question {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/btn_question.png?20220504);
}

.box_infoBtn .btn_get {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/btn_record.png?20220504);
}

.wrapper_ingame.Scene .game_main {
  width: 100%;
  height: 100%;
  position: relative;
}

.wrapper_ingame.Scene .game_main .box_leftMenu {
  width: 26.45503%;
  padding-bottom: 29.36508%;
  position: absolute;
  left: 4.2328%;
  top: 13.09524%;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_01, .wrapper_ingame.Scene .game_main .box_leftMenu .item_02, .wrapper_ingame.Scene .game_main .box_leftMenu .item_06 {
  width: 46.2%;
  padding-bottom: 52.4%;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_01 {
  left: 0%;
  top: 24.68468%;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_01.undone {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left1_ing.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_01.ing {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left1_ing.png?20220504);
  cursor: pointer;
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_01.ing .star {
  -webkit-animation: fadeOutRight 1s;
          animation: fadeOutRight 1s;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_01.get {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left1_get.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_02 {
  right: 0%;
  top: 0%;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_02.undone {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left2_ing.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_02.ing {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left2_ing.png?20220504);
  cursor: pointer;
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_02.ing .star {
  -webkit-animation: fadeOutBottomRight 1s;
          animation: fadeOutBottomRight 1s;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_02.get {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left2_get.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_06 {
  right: 0%;
  bottom: 0%;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_06.undone {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left3_ing.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_06.ing {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left3_ing.png?20220504);
  cursor: pointer;
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_06.ing .star {
  -webkit-animation: fadeOutTopRight 1s;
          animation: fadeOutTopRight 1s;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .item_06.get {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_left3_get.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow {
  width: 30.2%;
  padding-bottom: 15.8%;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/arrow_undone.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_01 {
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg);
  top: 21.26126%;
  left: 32%;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_02-1 {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
  top: 14.41441%;
  left: 90%;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_05-2 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  bottom: 14.41441%;
  left: 90%;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_ing_01, .wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_ing_02-1, .wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_ing_05-2 {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/arrow_ing.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_over {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/arrow_over.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_ing_01 {
  -webkit-animation: shakeX_01 3s infinite;
          animation: shakeX_01 3s infinite;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_ing_02-1 {
  -webkit-animation: shakeX_02-1 3s infinite;
          animation: shakeX_02-1 3s infinite;
}

.wrapper_ingame.Scene .game_main .box_leftMenu .arrow.arrow_ing_05-2 {
  -webkit-animation: shakeX_05-1 3s infinite;
          animation: shakeX_05-1 3s infinite;
}

.wrapper_ingame.Scene .game_main .box_rightMenu {
  width: 26.45503%;
  padding-bottom: 29.36508%;
  position: absolute;
  left: 70.63492%;
  top: 13.09524%;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_03, .wrapper_ingame.Scene .game_main .box_rightMenu .item_04, .wrapper_ingame.Scene .game_main .box_rightMenu .item_05 {
  width: 46.2%;
  padding-bottom: 52.4%;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_03 {
  left: 0%;
  top: 0%;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_03.undone {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right1_ing.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_03.ing {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right1_ing.png?20220504);
  cursor: pointer;
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_03.ing .star {
  -webkit-animation: fadeOutBottomLeft 1s;
          animation: fadeOutBottomLeft 1s;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_03.get {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right1_get.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_05 {
  left: 0%;
  bottom: 0%;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_05.undone {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right2_ing.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_05.ing {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right2_ing.png?20220504);
  cursor: pointer;
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_05.ing .star {
  -webkit-animation: fadeOutTopLeft 1s;
          animation: fadeOutTopLeft 1s;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_05.get {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right2_get.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_04 {
  right: 0%;
  top: 24.68468%;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_04.undone {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right3_ing.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_04.ing {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right3_ing.png?20220504);
  cursor: pointer;
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_04.ing .star {
  -webkit-animation: fadeOutLeft 1s;
          animation: fadeOutLeft 1s;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .item_04.get {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/item_right3_get.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow {
  width: 30.2%;
  padding-bottom: 15.8%;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/arrow_undone.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_02-2 {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
  top: 14.41441%;
  left: -20%;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_03 {
  -webkit-transform: rotate(44deg);
          transform: rotate(44deg);
  top: 21.26126%;
  left: 34%;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_04 {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  bottom: 21.26126%;
  left: 34%;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_05-1 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  bottom: 14.41441%;
  right: 90%;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_ing_02-2, .wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_ing_03, .wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_ing_04, .wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_ing_05-1 {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/arrow_ing.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_over {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/arrow_over.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_ing_02-2 {
  -webkit-animation: shakeX_02-2 3s infinite;
          animation: shakeX_02-2 3s infinite;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_ing_03 {
  -webkit-animation: shakeX_03 3s infinite;
          animation: shakeX_03 3s infinite;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_ing_04 {
  -webkit-animation: shakeX_04 3s infinite;
          animation: shakeX_04 3s infinite;
}

.wrapper_ingame.Scene .game_main .box_rightMenu .arrow.arrow_ing_05-1 {
  -webkit-animation: shakeX_05-1 3s infinite;
          animation: shakeX_05-1 3s infinite;
}

.wrapper_ingame.Scene .game_main .ing .star {
  width: 63.63636%;
  padding-bottom: 54.58015%;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/star.png?20220504);
  top: 24.80916%;
  left: 19.08397%;
}

.wrapper_ingame.Scene .game_main .box_role {
  width: 25.7672%;
  padding-bottom: 22.38095%;
  left: 37.3545%;
  top: 24.64286%;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-animation: float 3s infinite;
          animation: float 3s infinite;
}

.wrapper_ingame.Scene .game_main .box_role.zero {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/man_zero.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_role.little {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/man_little.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_role.helf {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/man_helf.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_role.more {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/man_more.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_role.full {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/man_full.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_role.action {
  -webkit-animation: bounce 1s 2;
          animation: bounce 1s 2;
}

.wrapper_ingame.Scene .game_main .box_title {
  width: 36.93122%;
  padding-bottom: 20.47619%;
  position: absolute;
  left: 32.38095%;
  top: 0;
  background-size: 100%;
  background-repeat: no-repeat;
}

.wrapper_ingame.Scene .game_main .box_title.title01 {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/title01.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_title.title02 {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/title02.png?20220504);
}

.wrapper_ingame.Scene .game_main .box_bottom {
  width: 23.22751%;
  height: 15%;
  left: 37.98942%;
  position: absolute;
  top: 76.42857%;
}

.wrapper_ingame.Scene .game_main .box_bottom p {
  width: 150%;
  text-align: center;
  font-size: 1.5em;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: -1px 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000, 3px 3px 3px black;
  position: absolute;
  bottom: -40%;
  left: -26%;
}

@media only screen and (max-width: 1175px) {
  .wrapper_ingame.Scene .game_main .box_bottom p {
    font-size: 1.2em;
  }
}

@media only screen and (max-width: 887px) {
  .wrapper_ingame.Scene .game_main .box_bottom p {
    font-size: 1em;
  }
}

@media only screen and (max-width: 766px) {
  .wrapper_ingame.Scene .game_main .box_bottom p {
    font-size: .7em;
  }
}

.wrapper_ingame.Scene .game_main .box_bottom p img {
  width: 20%;
}

.wrapper_ingame.Scene .game_main .box_bottom.btn_summon_out {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/btn_summon_out.png?20220504);
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

.wrapper_ingame.Scene .game_main .box_bottom.btn_summon_over {
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/btn_summon_over.png?20220504);
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: pulse 2s infinite;
          animation: pulse 2s infinite;
}

.wrapper_ingame.Scene .game_main .box_number {
  width: 19.10053%;
  height: 24.52381%;
  position: absolute;
  bottom: 2%;
  right: 2%;
}

.wrapper_ingame.Scene .game_main .box_number .token {
  width: 100%;
  height: 100%;
  left: 0;
  top: 5%;
}

.wrapper_ingame.Scene .game_main .btn_all {
  width: 10.15873%;
  height: 22.85714%;
  position: absolute;
  left: 85.71429%;
  top: 2.85714%;
  background-image: url(/Action/11_Star31/20220504MSJ/ingame/images/btn_all.png?20220504);
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: pulse 2s infinite;
          animation: pulse 2s infinite;
}

.prize_item {
  width: 100%;
  height: 100%;
}

.prize_item-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.prize_item-box .title {
  width: 100%;
  padding-bottom: 2%;
}

.prize_item-box .title img {
  margin: 0 auto;
  display: block;
  width: 30%;
  max-width: 400px;
}

.prize_item .getBtn {
  width: 20.35928%;
  height: 18.21429%;
  max-width: 180px;
  margin: 0.5% auto;
  background: url(/Action/11_Star31/20220504MSJ/ingame/images/btn_receive.png);
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

@media only screen and (max-width: 610px) {
  .prize_item .getBtn {
    width: 30%;
    height: 30%;
  }
}

.box_container {
  display: none;
  top: 5%;
  left: 7.5%;
  width: 85%;
  height: 85%;
  padding: .5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.box_container .item {
  width: 33%;
  margin: 2px 0.15% 2px 0.15%;
  background-color: #fffacf;
  border-radius: 12px;
  border: 3px solid #4a36e4;
  padding: 1.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (max-width: 927px) {
  .box_container .item {
    padding: 0 1.5em 0 0;
    width: 49%;
  }
}

@media only screen and (max-width: 435px) {
  .box_container .item {
    width: 45%;
  }
}

.box_container .item .item_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.box_container .item .item_img p {
  color: #4a36e4;
  text-align: center;
  line-height: 22px;
  letter-spacing: 0px;
  font-weight: bold;
  font-size: 1.5em;
  padding-left: 0;
}

.box_container .item .item_img img {
  width: 60%;
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 10px;
}

.box_container .item .item_num {
  width: 35%;
  text-align: center;
  margin: 2% 0;
  font-size: 33px;
  font-weight: bold;
  color: #ee760c;
}

@media only screen and (max-width: 900px) {
  .box_container .item .item_num {
    font-size: 25px;
  }
}

@media only screen and (max-width: 812px) {
  .box_container .item .item_num {
    width: 35%;
  }
}

.f-fun {
  color: #df4100;
}

/* ================= table設定 ================= */
.table {
  word-break: break-all;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 20px auto;
  font-size: 1.1em;
  color: #201480;
  border: 3px solid #4a36e4;
}

.table-full {
  width: 95%;
}

.table-half {
  float: left;
  width: 47%;
  margin: 0 1.5%;
  margin-top: 20px;
}

.table-one_third {
  float: left;
  width: 32%;
  margin: 0 .5%;
  margin-top: 20px;
}

.table tr {
  background: #f4f3ff;
}

.table tr th {
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 5px;
  border: 1px #4a36e4 solid;
  background: #4a36e4;
  /* Old browsers */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #4a36e4), to(#180988));
  background: linear-gradient(to bottom, #4a36e4 20%, #180988 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  font-size: 1.15em;
}

.table tr td {
  text-align: center;
  padding: 2px;
  border: 1px #4a36e4 solid;
}

.table tr td img {
  display: block;
  margin: 0 auto;
}

@media only screen and (max-width: 960px) {
  .table tr td img {
    max-width: 104px;
  }
}

.an_fast {
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
}

.an_faster {
  -webkit-animation-duration: 500ms;
          animation-duration: 500ms;
}

.delay-03s {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

.delay-05s {
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}

.delay-1s {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.delay-2s {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.delay-3s {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  50% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  50% {
    -webkit-transform: translateY(5%);
            transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 40%, 0);
            transform: translate3d(0, 40%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 40%, 0);
            transform: translate3d(0, 40%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.animate__slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
            transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
            transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
            transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
            transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(500%, 0, 0);
    transform: translate3d(500%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(500%, 0, 0);
    transform: translate3d(500%, 0, 0);
  }
}

@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(250%, 100%, 0);
    transform: translate3d(250%, 100%, 0);
  }
}

@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(250%, 100%, 0);
    transform: translate3d(250%, 100%, 0);
  }
}

@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(250%, -100%, 0);
    transform: translate3d(250%, -100%, 0);
  }
}

@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(250%, -100%, 0);
    transform: translate3d(250%, -100%, 0);
  }
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-500%, 0, 0);
    transform: translate3d(-500%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-500%, 0, 0);
    transform: translate3d(-500%, 0, 0);
  }
}

@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-400%, -100%, 0);
    transform: translate3d(-400%, -100%, 0);
  }
}

@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-400%, -100%, 0);
    transform: translate3d(-400%, -100%, 0);
  }
}

@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-400%, 100%, 0);
    transform: translate3d(-400%, 100%, 0);
  }
}

@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(-400%, 100%, 0);
    transform: translate3d(-400%, 100%, 0);
  }
}

.box_jump {
  -webkit-animation-name: box_jump;
          animation-name: box_jump;
  -webkit-animation-duration: .7s;
          animation-duration: .7s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  visibility: visible !important;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

@-webkit-keyframes box_jump {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: scaleY(0.95);
            transform: scaleY(0.95);
  }
  40% {
    -webkit-transform: translateY(-5%) scaleY(1.2) scaleX(1.2);
            transform: translateY(-5%) scaleY(1.2) scaleX(1.2);
  }
  60% {
    -webkit-transform: translateY(0) scaleY(0.95);
            transform: translateY(0) scaleY(0.95);
  }
  70% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  80% {
    -webkit-transform: scaleY(1.1) skewY(5deg);
            transform: scaleY(1.1) skewY(5deg);
  }
  90% {
    -webkit-transform: scaleY(1.1) skewY(-5deg);
            transform: scaleY(1.1) skewY(-5deg);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes box_jump {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: scaleY(0.95);
            transform: scaleY(0.95);
  }
  40% {
    -webkit-transform: translateY(-5%) scaleY(1.2) scaleX(1.2);
            transform: translateY(-5%) scaleY(1.2) scaleX(1.2);
  }
  60% {
    -webkit-transform: translateY(0) scaleY(0.95);
            transform: translateY(0) scaleY(0.95);
  }
  70% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  80% {
    -webkit-transform: scaleY(1.1) skewY(5deg);
            transform: scaleY(1.1) skewY(5deg);
  }
  90% {
    -webkit-transform: scaleY(1.1) skewY(-5deg);
            transform: scaleY(1.1) skewY(-5deg);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

.box_shake {
  -webkit-animation-name: box_shake;
          animation-name: box_shake;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  visibility: visible !important;
}

@-webkit-keyframes box_shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes box_shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@-webkit-keyframes shakeX_01 {
  from,
  to {
    -webkit-transform: translate3d(10px, 0px, 0) rotate(330deg);
            transform: translate3d(10px, 0px, 0) rotate(330deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0px, 10px, 0) rotate(330deg);
            transform: translate3d(0px, 10px, 0) rotate(330deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0px, 0) rotate(330deg);
            transform: translate3d(10px, 0px, 0) rotate(330deg);
  }
}

@keyframes shakeX_01 {
  from,
  to {
    -webkit-transform: translate3d(10px, 0px, 0) rotate(330deg);
            transform: translate3d(10px, 0px, 0) rotate(330deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0px, 10px, 0) rotate(330deg);
            transform: translate3d(0px, 10px, 0) rotate(330deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0px, 0) rotate(330deg);
            transform: translate3d(10px, 0px, 0) rotate(330deg);
  }
}

@-webkit-keyframes shakeX_02-1 {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@keyframes shakeX_02-1 {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@-webkit-keyframes shakeX_02-2 {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@keyframes shakeX_02-2 {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@-webkit-keyframes shakeX_03 {
  from,
  to {
    -webkit-transform: translate3d(10px, 0, 0) rotate(44deg);
            transform: translate3d(10px, 0, 0) rotate(44deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, -10px, 0) rotate(44deg);
            transform: translate3d(-10px, -10px, 0) rotate(44deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0) rotate(44deg);
            transform: translate3d(10px, 0, 0) rotate(44deg);
  }
}

@keyframes shakeX_03 {
  from,
  to {
    -webkit-transform: translate3d(10px, 0, 0) rotate(44deg);
            transform: translate3d(10px, 0, 0) rotate(44deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, -10px, 0) rotate(44deg);
            transform: translate3d(-10px, -10px, 0) rotate(44deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0) rotate(44deg);
            transform: translate3d(10px, 0, 0) rotate(44deg);
  }
}

@-webkit-keyframes shakeX_04 {
  from,
  to {
    -webkit-transform: translate3d(10px, 0px, 0) rotate(135deg);
            transform: translate3d(10px, 0px, 0) rotate(135deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0px, 10px, 0) rotate(135deg);
            transform: translate3d(0px, 10px, 0) rotate(135deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0px, 0) rotate(135deg);
            transform: translate3d(10px, 0px, 0) rotate(135deg);
  }
}

@keyframes shakeX_04 {
  from,
  to {
    -webkit-transform: translate3d(10px, 0px, 0) rotate(135deg);
            transform: translate3d(10px, 0px, 0) rotate(135deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0px, 10px, 0) rotate(135deg);
            transform: translate3d(0px, 10px, 0) rotate(135deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0px, 0) rotate(135deg);
            transform: translate3d(10px, 0px, 0) rotate(135deg);
  }
}

@-webkit-keyframes shakeX_05-1 {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
            transform: translate3d(0, 0, 0) rotate(180deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0) rotate(180deg);
            transform: translate3d(-10px, 0, 0) rotate(180deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0) rotate(180deg);
            transform: translate3d(10px, 0, 0) rotate(180deg);
  }
}

@keyframes shakeX_05-1 {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
            transform: translate3d(0, 0, 0) rotate(180deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0) rotate(180deg);
            transform: translate3d(-10px, 0, 0) rotate(180deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0) rotate(180deg);
            transform: translate3d(10px, 0, 0) rotate(180deg);
  }
}

@-webkit-keyframes shakeX_05-2 {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
            transform: translate3d(0, 0, 0) rotate(180deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0) rotate(180deg);
            transform: translate3d(-10px, 0, 0) rotate(180deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0) rotate(180deg);
            transform: translate3d(10px, 0, 0) rotate(180deg);
  }
}

@keyframes shakeX_05-2 {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0) rotate(180deg);
            transform: translate3d(0, 0, 0) rotate(180deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0) rotate(180deg);
            transform: translate3d(-10px, 0, 0) rotate(180deg);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0) rotate(180deg);
            transform: translate3d(10px, 0, 0) rotate(180deg);
  }
}

.box_zoom {
  -webkit-animation-name: box_zoom;
          animation-name: box_zoom;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  visibility: visible !important;
}

@-webkit-keyframes box_zoom {
  0% {
  }
  30% {
    -webkit-transform: scaleX(1.2) scaleY(0.8);
            transform: scaleX(1.2) scaleY(0.8);
  }
  40% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  60% {
    -webkit-transform: scaleX(1.2) scaleY(0.8);
            transform: scaleX(1.2) scaleY(0.8);
  }
  80% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  90% {
    -webkit-transform: scaleX(1.05) scaleY(0.95);
            transform: scaleX(1.05) scaleY(0.95);
  }
  100% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
}

@keyframes box_zoom {
  0% {
  }
  30% {
    -webkit-transform: scaleX(1.2) scaleY(0.8);
            transform: scaleX(1.2) scaleY(0.8);
  }
  40% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  60% {
    -webkit-transform: scaleX(1.2) scaleY(0.8);
            transform: scaleX(1.2) scaleY(0.8);
  }
  80% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
  90% {
    -webkit-transform: scaleX(1.05) scaleY(0.95);
            transform: scaleX(1.05) scaleY(0.95);
  }
  100% {
    -webkit-transform: scaleX(1) scaleY(1);
            transform: scaleX(1) scaleY(1);
  }
}

@-webkit-keyframes rotateBtn {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  30% {
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  50% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  80% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes rotateBtn {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  30% {
    -webkit-transform: rotate(70deg);
            transform: rotate(70deg);
  }
  50% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  80% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes rotateBtnAction {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  45% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  47% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  70% {
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
  }
  71% {
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
  }
  92% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotateBtnAction {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  45% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  47% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  70% {
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
  }
  71% {
    -webkit-transform: rotate(200deg);
            transform: rotate(200deg);
  }
  92% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateBtnActionStop {
  0%,
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

@keyframes rotateBtnActionStop {
  0%,
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}

.rotateBtnAction {
  -webkit-animation: rotateBtnAction 0.8s, rotateBtnActionStop 0.8s 0.8s !important;
          animation: rotateBtnAction 0.8s, rotateBtnActionStop 0.8s 0.8s !important;
  -webkit-transform-origin: 50% 52%;
          transform-origin: 50% 52%;
}

@-webkit-keyframes OutputAction {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  26% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  48% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  51% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  53% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  80% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes OutputAction {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  26% {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  48% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  51% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  53% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  80% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes fingerAnimate {
  from,
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(10%, 10%);
            transform: translate(10%, 10%);
  }
}

@keyframes fingerAnimate {
  from,
  to {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(10%, 10%);
            transform: translate(10%, 10%);
  }
}

.OutputAction {
  -webkit-animation: OutputAction 0.5s 0.6s;
          animation: OutputAction 0.5s 0.6s;
}

@-webkit-keyframes delay {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
}

@keyframes delay {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
}

@-webkit-keyframes eggsAnimation {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  30% {
    -webkit-transform: translate(-50%, -50%) scale(1.15);
            transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(-50%, -50%) scale(1.1);
            transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes eggsAnimation {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  30% {
    -webkit-transform: translate(-50%, -50%) scale(1.15);
            transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
  60% {
    -webkit-transform: translate(-50%, -50%) scale(0.9);
            transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(-50%, -50%) scale(1.1);
            transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(2);
            transform: translate(-50%, -50%) scale(2);
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(2);
            transform: translate(-50%, -50%) scale(2);
  }
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}