@charset "UTF-8";
/* RESET
--------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, rem, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  line-height: 1;
}

body {
  line-height: 1;
  background: #000;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote.clear:after, blockquote:after, q:before, q.clear:after, q:after {
  content: "";
  content: none;
}

:focus {
  outline: 0;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

address {
  display: inline;
  font-style: normal;
}

.container {
  width: calc(100% - 20px);
  max-width: 1100px;
  position: relative;
  margin: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 3;
}

@font-face {
  font-family: FakePearl-Regular;
  src: url(https://cdn.jsdelivr.net/gh/max32002/FakePearl@1.1/webfont/FakePearl-Regular.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/FakePearl@1.1/webfont/FakePearl-Regular.woff) format("woff");
}
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: FakePearl-Regular;
  letter-spacing: 1px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-family: "微軟正黑體";
  letter-spacing: 2px;
  scroll-behavior: smooth;
}

img {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.scrollbar::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, 0);
  width: 25px;
}
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background-color: #4a00d3;
  border: none;
}
.scrollbar::-webkit-scrollbar-track-piece {
  background-color: rgba(255, 255, 255, 0);
}
.scrollbar::-webkit-scrollbar-button {
  background: rgba(255, 255, 255, 0);
  border: none;
}

.clear:before, .clear:after {
  content: "";
  display: table;
}
.clear:after {
  clear: both;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

iframe {
  display: block;
}

button {
  cursor: pointer;
}

table {
  width: 100%;
}
table th, table td {
  vertical-align: middle;
}

.table {
  display: table;
}

.tr {
  display: table-row;
}

.th,
.td {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

.inblock {
  font-size: 0;
  letter-spacing: 0;
}
.inblock > * {
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 1px;
}

/* position */
/* margin */
/* padding */
/* font-size */
@-webkit-keyframes pulse {
  50% {
    background: rgb(255, 255, 255);
  }
}
@keyframes pulse {
  50% {
    background: rgb(255, 255, 255);
  }
}
#loading {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
}

.loading-pulse {
  position: relative;
  margin: auto;
  width: 6px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-animation: pulse 750ms infinite;
          animation: pulse 750ms infinite;
  -webkit-animation-delay: 250ms;
          animation-delay: 250ms;
}
.loading-pulse:before, .loading-pulse:after {
  content: "";
  position: absolute;
  display: block;
  height: 16px;
  width: 6px;
  background: rgba(255, 255, 255, 0.2);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-animation: pulse 750ms infinite;
          animation: pulse 750ms infinite;
}
.loading-pulse:before, .loading-pulse.clear:after {
  left: -12px;
}
.loading-pulse:after {
  left: 12px;
  -webkit-animation-delay: 500ms;
          animation-delay: 500ms;
}

.wrapper {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: auto;
  background-image: url(../images/bg_index.gif);
  background-size: cover;
  overflow-x: hidden;
  padding-bottom: 0;
  position: relative;
  background-position: bottom center;
}
.wrapper .sound {
  width: 70px;
  position: fixed;
  right: 25px;
  bottom: 10px;
  z-index: 99;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  .wrapper .sound {
    width: 50px;
  }
}

body.test {
  color: #000;
  font-family: Raleway;
  font-weight: 100;
  font-size: 15px;
  font-weight: bold;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
body.test a {
  position: absolute;
  text-decoration: none;
  color: white;
  font-weight: 100;
  left: 50px;
  bottom: -20px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
body.test a:hover {
  font-weight: 300;
}
body.test #content {
  position: absolute;
}
body.test #container img {
  position: absolute;
  left: 50px;
  z-index: 2;
  width: 2px;
  height: 0px;
  top: 50%;
  margin-top: -100px;
}
body.test #container #welcome {
  opacity: 0;
  width: 900px;
  padding-left: 20px;
  color: white;
  font-size: 18pt;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  left: 50px;
}
body.test #container #welcome #lastSentence {
  font-family: "Raleway";
  margin: 0;
  font-weight: 400;
  font-size: 14pt;
}
body.test #container #welcome #firstSentence {
  font-weight: 500;
  font-size: 22pt;
  margin: 0;
  margin-bottom: 8px;
  margin-top: 2px;
}
body.test #container #welcome #universe {
  text-transform: uppercase;
  font-family: "Raleway";
  font-weight: 800;
}
body.test #container #content {
  top: 50%;
  margin-top: -70px;
  width: 500px;
  left: 70px;
}
body.test #container #content h2 {
  margin: 0;
}
body.test #container #content span {
  font-family: Raleway;
  font-weight: 600;
}
body.test #container #content #contentTitle {
  font-family: Raleway;
  color: white;
  opacity: 1;
  font-weight: 200;
  letter-spacing: 1.5px;
  font-size: 26pt;
}
body.test #container #content #contentTitle span {
  color: #F66120;
}
body.test #container #content #contentTitle div {
  font-size: 12pt;
  display: inline-block;
}
body.test #container #content #subtitle {
  letter-spacing: 1.5px;
  margin: 0;
  font-size: 16pt;
  font-family: Raleway;
  font-weight: 200;
  color: white;
}
body.test #container #content #description {
  color: white;
  letter-spacing: 1.5px;
  font-family: Raleway;
  font-weight: 200;
  font-size: 16pt;
}
body.test #container #content #description span {
  color: #F66120;
}
body.test #container #content #description div {
  color: #acacac;
  font-size: 10pt;
}
body.test #container #content #description a {
  color: white;
  line-height: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
body.test #container #content #description a:hover {
  line-height: 11px;
  font-weight: 500;
}

.leaderboard {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1600px;
  margin: auto;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 1920px) {
  .leaderboard {
    max-width: 1800px;
  }
}
@media screen and (max-width: 1440px) {
  .leaderboard {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media screen and (max-width: 768px) {
  .leaderboard {
    display: block;
    text-align: center;
  }
}
.leaderboard .imgIn {
  position: absolute;
  z-index: 10;
}
.leaderboard .p1 {
  width: 40%;
  left: -5%;
  top: 0%;
  -webkit-animation: und2 2s linear infinite alternate;
          animation: und2 2s linear infinite alternate;
}
.leaderboard .p2 {
  width: 30%;
  right: -5%;
  bottom: 10%;
  height: auto;
  -webkit-animation: und2 1s linear infinite alternate;
          animation: und2 1s linear infinite alternate;
}
@media screen and (max-width: 768px) {
  .leaderboard .p2 {
    width: 20%;
    top: 60%;
  }
}
@media screen and (max-width: 480px) {
  .leaderboard .p2 {
    width: 30%;
    top: 70%;
  }
}
.leaderboard .p3 {
  width: 25%;
  right: -5%;
  top: 0%;
  height: auto;
  -webkit-animation: und2 1s linear infinite alternate;
          animation: und2 1s linear infinite alternate;
}
@media screen and (max-width: 768px) {
  .leaderboard .p3 {
    width: 20%;
    top: 60%;
  }
}
@media screen and (max-width: 480px) {
  .leaderboard .p3 {
    width: 30%;
    top: 75%;
  }
}
.leaderboard.gradient_b {
  width: 90%;
  height: auto;
  margin-top: 30px;
  position: relative;
  border-radius: 50px;
  background-image: -webkit-gradient(linear, left top, right bottom, from(#1EDDF2), to(#F38AAD));
  background-image: linear-gradient(to bottom right, #1EDDF2 0%, #F38AAD 100%);
  -o-border-image: linear-gradient(to bottom right, #1EDDF2 0%, #F38AAD 100%);
     border-image: -webkit-gradient(linear, left top, right bottom, from(#1EDDF2), to(#F38AAD));
     border-image: linear-gradient(to bottom right, #1EDDF2 0%, #F38AAD 100%);
  padding: 3px 3px;
}
.leaderboard.gradient_b .gradient_b_inner {
  border-radius: 50px;
  text-align: center;
  color: #fff;
  background: #281265;
  border: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 30px;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .leaderboard.gradient_b .gradient_b_inner {
    padding: 30px 0px;
  }
}
@media screen and (max-width: 768px) {
  .leaderboard.gradient_b .gradient_b_inner {
    display: block;
  }
}
.leaderboard.gradient_b .gradient_b_inner .p1 {
  width: 30%;
  left: -3%;
  top: 0%;
  position: absolute;
  -webkit-animation: und2 2s linear infinite alternate;
          animation: und2 2s linear infinite alternate;
}
.leaderboard.gradient_b .gradient_b_inner .p2 {
  width: 15%;
  right: -10%;
  bottom: 0%;
  height: auto;
  position: absolute;
  -webkit-animation: und2 1s linear infinite alternate;
          animation: und2 1s linear infinite alternate;
}
@media screen and (max-width: 768px) {
  .leaderboard.gradient_b .gradient_b_inner .p2 {
    width: 20%;
    top: 80%;
  }
}
@media screen and (max-width: 480px) {
  .leaderboard.gradient_b .gradient_b_inner .p2 {
    width: 15%;
    top: 90%;
  }
}
.leaderboard.gradient_b .gradient_b_inner .p3 {
  width: 20%;
  right: -10%;
  top: 0%;
  height: auto;
  position: absolute;
  -webkit-animation: und2 1s linear infinite alternate;
          animation: und2 1s linear infinite alternate;
}
@media screen and (max-width: 768px) {
  .leaderboard.gradient_b .gradient_b_inner .p3 {
    width: 20%;
    top: 80%;
  }
}
@media screen and (max-width: 480px) {
  .leaderboard.gradient_b .gradient_b_inner .p3 {
    width: 15%;
    top: 90%;
  }
}
.leaderboard.gradient_b .game_board_m {
  width: 32%;
  position: relative;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .leaderboard.gradient_b .game_board_m {
    width: 100%;
  }
}
.leaderboard.gradient_b .game_board_m:last-child .nobg {
  border: none;
}
.leaderboard .boardv_title {
  width: 60%;
  margin: -15% auto 0 auto;
}
@media screen and (max-width: 768px) {
  .leaderboard .boardv_title {
    width: 150px;
    margin: -10% auto 0 auto;
  }
}
@media screen and (max-width: 480px) {
  .leaderboard .boardv_title {
    margin: -15% auto 0 auto;
  }
}
.leaderboard .game_board {
  width: 32%;
  padding: 100px 50px 50px 50px;
  position: relative;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1440px) {
  .leaderboard .game_board {
    padding: 20px 50px 50px 50px;
  }
}
@media screen and (max-width: 1024px) {
  .leaderboard .game_board {
    padding: 20px 10px 50px 10px;
  }
}
@media screen and (max-width: 768px) {
  .leaderboard .game_board {
    width: 90%;
    margin: auto;
  }
}
@media screen and (max-width: 480px) {
  .leaderboard .game_board {
    width: 100%;
  }
}
.leaderboard .game_board .peo {
  width: 110%;
  position: absolute;
  z-index: 0;
  bottom: -20%;
}
.leaderboard .game_board .peo svg {
  width: 100%;
  height: auto;
}
.leaderboard .game_board .bg1 {
  left: -15%;
}
.leaderboard .game_board .bg2 {
  right: -20%;
  bottom: -15%;
}
.leaderboard .game_board .bg3 {
  right: -15%;
}
.leaderboard .boardv {
  width: 100%;
  margin: 0px;
  height: auto;
  z-index: 1;
  position: relative;
  display: inline-block;
  background-image: url(../images/boardv.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 30px 60px 60px 60px;
}
@media screen and (max-width: 1440px) {
  .leaderboard .boardv {
    padding: 30px 25px 60px 25px;
  }
}
@media screen and (max-width: 768px) {
  .leaderboard .boardv {
    padding: 30px 50px 60px 50px;
  }
}
@media screen and (max-width: 480px) {
  .leaderboard .boardv {
    padding: 30px 25px 60px 25px;
  }
}
.leaderboard .boardv.nobg {
  background-image: none;
  padding: 30px 25px;
  border-right: 2px solid #fff;
  height: auto;
}
@media screen and (max-width: 768px) {
  .leaderboard .boardv.nobg {
    border: 0;
  }
}
.leaderboard .boardv.nobg .more_title {
  font-size: 1.3vw;
  color: #fff;
  border-bottom: 3px solid #fff;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .leaderboard .boardv.nobg .more_title {
    font-size: 1.25rem;
  }
}
.leaderboard .boardv.nobg table {
  margin-top: 30px;
}
.leaderboard .boardv.nobg table tr:nth-child(1) td {
  padding-bottom: 10px;
}
.leaderboard .boardv.nobg table tr:nth-child(4) td, .leaderboard .boardv.nobg table tr:nth-child(2) td, .leaderboard .boardv.nobg table tr:nth-child(3) td {
  font-size: 0.8vw;
}
@media screen and (max-width: 768px) {
  .leaderboard .boardv.nobg table tr:nth-child(4) td, .leaderboard .boardv.nobg table tr:nth-child(2) td, .leaderboard .boardv.nobg table tr:nth-child(3) td {
    font-size: 1.25rem;
  }
}
.leaderboard .boardv.nobg table td {
  color: #fff;
  font-size: 0.8vw;
  white-space: nowrap;
}
.leaderboard .boardv.nobg table td:nth-child(1) {
  text-align: center;
}
.leaderboard .boardv.nobg table td span {
  width: calc(100% - 10px);
  height: 100%;
  padding: 6px 10px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.4);
  display: inline-block;
  border-radius: 5px;
}
.leaderboard .boardv .medal {
  text-align: center;
}
.leaderboard .boardv .medal img {
  width: 30px;
  margin: auto;
}
@media screen and (max-width: 1440px) {
  .leaderboard .boardv .medal {
    width: 20px;
  }
}
.leaderboard .boardv .btn {
  width: 50%;
  margin: 20px auto 0 auto;
}
@media screen and (max-width: 1440px) {
  .leaderboard .boardv .btn {
    margin: 10px auto 0% auto;
  }
}
@media screen and (max-width: 768px) {
  .leaderboard .boardv .btn {
    width: 130px;
  }
}
.leaderboard .boardv table {
  margin-top: 30px;
}
@media screen and (max-width: 1440px) {
  .leaderboard .boardv table {
    margin-top: 20px;
  }
}
.leaderboard .boardv table tr:nth-child(1) td {
  padding-bottom: 10px;
}
.leaderboard .boardv table tr:nth-child(4) td, .leaderboard .boardv table tr:nth-child(2) td, .leaderboard .boardv table tr:nth-child(3) td {
  font-size: 1vw;
  position: relative;
}
@media screen and (max-width: 768px) {
  .leaderboard .boardv table tr:nth-child(4) td, .leaderboard .boardv table tr:nth-child(2) td, .leaderboard .boardv table tr:nth-child(3) td {
    font-size: 1.25rem;
  }
}
.leaderboard .boardv table td {
  color: #fff;
  font-size: 0.8vw;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .leaderboard .boardv table td {
    font-size: 1rem;
  }
}
.leaderboard .boardv table td span {
  width: calc(100% - 10px);
  height: 100%;
  padding: 10px 15px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.4);
  display: inline-block;
  border-radius: 10px;
}
@media screen and (max-width: 1440px) {
  .leaderboard .boardv table td span {
    padding: 5px 10px;
    border-radius: 5px;
  }
}

.pager {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.pager li {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 3px;
  margin-top: 15px;
  border-radius: 100px;
  background-image: -webkit-gradient(linear, left top, right bottom, from(#1EDDF2), to(#F38AAD));
  background-image: linear-gradient(to bottom right, #1EDDF2 0%, #F38AAD 100%);
}
.pager li a {
  background: #281265;
  border-radius: 100px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  text-decoration: none;
}
.pager .btn {
  display: inline-block;
  position: absolute;
  right: 80px;
  top: 10px;
  width: 150px;
}
@media screen and (max-width: 768px) {
  .pager .btn {
    top: 80px;
  }
}

#index {
  position: relative;
}
#index .stars {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  -webkit-animation: star 5s linear infinite;
          animation: star 5s linear infinite;
  background: url(../images/star.webp) repeat;
}
#index .stars:before, #index .stars.clear:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  -webkit-animation: star 2s linear infinite;
          animation: star 2s linear infinite;
  background: url(../images/star2.webp) repeat;
}
#index .night {
  right: 5%;
  top: 5%;
  position: absolute;
  width: 50%;
  height: 50%;
  -webkit-transform: rotateZ(145deg);
          transform: rotateZ(145deg);
}
#index .homebtn {
  width: 100%;
  max-width: 1800px;
  height: 70%;
  position: relative;
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
}
@media screen and (max-width: 1440px) {
  #index .homebtn {
    width: 84%;
    height: 83%;
    top: -20%;
  }
}
@media screen and (max-width: 1200px) {
  #index .homebtn {
    width: 90%;
    bottom: 0%;
  }
}
#index .homeBtn {
  height: auto;
  position: absolute;
  display: block;
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
@media screen and (max-width: 990px) {
  #index .homeBtn {
    width: 100%;
  }
}
#index .homeBtn svg {
  width: 100%;
  height: 100%;
}
#index .homeBtn:nth-child(1) {
  left: -15%;
  bottom: 0;
  width: 55%;
}
@media screen and (max-width: 768px) {
  #index .homeBtn:nth-child(1) {
    left: -10;
    bottom: 15%;
    width: 80%;
  }
}
@media screen and (max-width: 480px) {
  #index .homeBtn:nth-child(1) {
    left: -10;
    bottom: 25%;
    width: 80%;
  }
}
#index .homeBtn:nth-child(2) {
  width: 40%;
  left: 30%;
  bottom: -15%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  #index .homeBtn:nth-child(2) {
    left: 20%;
    width: 55%;
  }
}
@media screen and (max-width: 480px) {
  #index .homeBtn:nth-child(2) {
    left: 20%;
    width: 55%;
    bottom: 0%;
  }
}
#index .homeBtn:nth-child(3) {
  right: -20%;
  bottom: 5%;
  width: 55%;
}
@media screen and (max-width: 768px) {
  #index .homeBtn:nth-child(3) {
    width: 80%;
  }
}
@media screen and (max-width: 480px) {
  #index .homeBtn:nth-child(3) {
    bottom: 13%;
  }
}
#index .homeBtn:hover {
  -webkit-filter: contrast(100%) grayscale(0%) drop-shadow(0px 0px 20px white);
          filter: contrast(100%) grayscale(0%) drop-shadow(0px 0px 20px white);
}
#index article {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0%;
  text-align: center;
  overflow: hidden;
}
#index article#main {
  position: relative;
}
#index article header {
  width: 70%;
  margin: auto;
  padding-top: 3vh;
}
@media screen and (max-width: 1700px) {
  #index article header {
    width: 70%;
  }
}
@media screen and (max-width: 1440px) {
  #index article header {
    width: 50%;
  }
}
@media screen and (max-width: 1024px) {
  #index article header {
    width: 50%;
    padding-top: 10vh;
  }
}
@media screen and (max-width: 768px) {
  #index article header {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  #index article header {
    width: 100%;
    padding-top: 10vh;
  }
}
#index article .item {
  position: absolute;
}
#index article .hero {
  left: 0;
  top: 0;
  width: 25%;
  -webkit-animation: und 1s linear infinite alternate;
          animation: und 1s linear infinite alternate;
  position: absolute;
}
@media screen and (max-width: 768px) {
  #index article .hero {
    top: 20%;
  }
}
@media screen and (max-width: 480px) {
  #index article .hero {
    position: relative;
  }
  #index article .hero img {
    width: 40%;
    margin-top: 90%;
  }
}
#index article .light {
  width: 70%;
  margin: auto;
  left: 15%;
  top: -5%;
}
@media screen and (max-width: 480px) {
  #index article .light {
    width: 100%;
    left: 0%;
    height: 100%;
  }
}
#index article .mPlanet {
  width: 25%;
  top: 0;
  right: 2%;
  -webkit-animation: und 1s linear infinite alternate;
          animation: und 1s linear infinite alternate;
}
#index article .road {
  width: 100%;
  width: 30%;
  top: 15%;
  right: 15%;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  #index article #cuteMap {
    top: 50%;
    -webkit-transform: translate(0, -10%);
            transform: translate(0, -10%);
  }
}
@media screen and (max-width: 480px) {
  #index article #cuteMap {
    top: 50%;
    -webkit-transform: translate(0, 20%);
            transform: translate(0, 20%);
  }
}
#index article section {
  text-align: center;
}
#index article section #rotating-item-wrapper {
  width: 70%;
  margin: auto;
  position: relative;
  -webkit-animation: und2 1s linear infinite alternate;
          animation: und2 1s linear infinite alternate;
}
@media screen and (max-width: 1700px) {
  #index article section #rotating-item-wrapper {
    width: 70%;
  }
}
@media screen and (max-width: 1440px) {
  #index article section #rotating-item-wrapper {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #index article section #rotating-item-wrapper {
    width: 100%;
    margin-top: 10%;
  }
}
#index article section #rotating-item-wrapper .rotating-item {
  display: none;
  position: absolute;
  top: 5vh;
  left: 0;
  width: 100%;
}
#index article section .wrap {
  width: 100%;
  position: absolute;
  left: 0;
  text-align: center;
}
#index article section #showcase {
  margin: auto;
  position: relative;
  width: 90%;
  height: 30vh;
  padding: 0 5%;
  left: 5%;
  overflow: visible !important;
  padding-top: 5%;
}
@media screen and (max-width: 768px) {
  #index article section #showcase {
    padding-top: 10%;
  }
}
@media screen and (max-width: 768px) {
  #index article section #showcase {
    padding-top: 20%;
  }
}
#index article section #showcase a {
  width: 28%;
  left: 0;
}
@media screen and (max-width: 480px) {
  #index article section #showcase a {
    width: 40%;
  }
}
#index article section .nav {
  top: 100%;
  border: none;
  width: 130px;
  height: 130px;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  z-index: 99;
}
#index article section .nav.left {
  left: 0%;
  -webkit-transform: translate(-60%, 55%);
          transform: translate(-60%, 55%);
  background-image: url(../images/btn_prev.webp);
}
@media screen and (max-width: 1366px) {
  #index article section .nav.left {
    -webkit-transform: translate(-60%, 55%);
            transform: translate(-60%, 55%);
  }
}
@media screen and (max-width: 700px) {
  #index article section .nav.left {
    -webkit-transform: translate(-200%, 200%);
            transform: translate(-200%, 200%);
  }
}
#index article section .nav.right {
  left: 50%;
  -webkit-transform: translate(75%, 55%);
          transform: translate(75%, 55%);
  background-image: url(../images/btn_next.webp);
}
@media screen and (max-width: 1366px) {
  #index article section .nav.right {
    -webkit-transform: translate(75%, 55%);
            transform: translate(75%, 55%);
  }
}
@media screen and (max-width: 700px) {
  #index article section .nav.right {
    -webkit-transform: translate(200%, 200%);
            transform: translate(200%, 200%);
  }
}
#index .storyBox .story {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 100%;
  max-width: 700px;
  padding: 70px 50px;
  background: url(../images/dialog.webp) no-repeat;
  background-size: 100% 100%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
}
@media screen and (max-width: 768px) {
  #index .storyBox .story {
    width: 90%;
    padding: 50px 20px;
  }
}
#index .storyBox .story p {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: 2px;
  text-shadow: 0 0 5px gray;
}
@media screen and (max-width: 768px) {
  #index .storyBox .story p {
    font-size: 1rem;
  }
}
#index .storyBox .story .line2,
#index .storyBox .story .line3 {
  display: none;
}
#index .storyBox .story .dialogNext {
  right: -15px;
  top: 50%;
  width: 50px;
  height: 60px;
  cursor: pointer;
  position: absolute;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  background: url(../images/btn_dialog.webp) no-repeat;
  background-size: contain;
}
#index .storyBox .story .dialogNext:hover {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
}
#index .storyBox .story .dialogNext.back {
  left: -15px;
  background: url(../images/btn_dialog_prev.webp) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  #index .storyBox .story .dialogNext {
    width: 40px;
  }
}

#index .shooting_star {
  position: absolute;
  left: 0%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #9efcf6, rgba(0, 0, 255, 0));
  border-radius: 999px;
  -webkit-filter: drop-shadow(0 0 6px #699bff);
  filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}

#index .shooting_star::before,
#index .shooting_star::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #9efcf6, rgba(0, 0, 255, 0));
  -webkit-transform: translateX(50%) rotateZ(45deg);
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
}

#index .shooting_star::after {
  -webkit-transform: translateX(50%) rotateZ(-45deg);
  transform: translateX(50%) rotateZ(-45deg);
}

#index .shooting_star:nth-child(1) {
  top: calc(50% + 113px);
  left: calc(50% - 249px);
  -webkit-animation-delay: 6089ms;
  animation-delay: 6089ms;
}

#index .shooting_star:nth-child(1)::before,
#index .shooting_star:nth-child(1)::after {
  -webkit-animation-delay: 6089ms;
  animation-delay: 6089ms;
}

#index .shooting_star:nth-child(2) {
  top: calc(50% + 83px);
  left: calc(50% - 249px);
  -webkit-animation-delay: 3357ms;
  animation-delay: 3357ms;
}

#index .shooting_star:nth-child(2)::before,
#index .shooting_star:nth-child(2)::after {
  -webkit-animation-delay: 3357ms;
  animation-delay: 3357ms;
}

#index .shooting_star:nth-child(3) {
  top: calc(50% + 175px);
  left: calc(50% - 238px);
  -webkit-animation-delay: 2419ms;
  animation-delay: 2419ms;
}

#index .shooting_star:nth-child(3)::before,
#index .shooting_star:nth-child(3)::after {
  -webkit-animation-delay: 2419ms;
  animation-delay: 2419ms;
}

#index .shooting_star:nth-child(4) {
  top: calc(50% - 46px);
  left: calc(50% - 81px);
  -webkit-animation-delay: 2753ms;
  animation-delay: 2753ms;
}

#index .shooting_star:nth-child(4)::before,
#index .shooting_star:nth-child(4)::after {
  -webkit-animation-delay: 2753ms;
  animation-delay: 2753ms;
}

#index .shooting_star:nth-child(5) {
  top: calc(50% + 188px);
  left: calc(50% - 178px);
  -webkit-animation-delay: 6226ms;
  animation-delay: 6226ms;
}

#index .shooting_star:nth-child(5)::before,
#index .shooting_star:nth-child(5)::after {
  -webkit-animation-delay: 6226ms;
  animation-delay: 6226ms;
}

#index .shooting_star:nth-child(6) {
  top: calc(50% + 106px);
  left: calc(50% - 63px);
  -webkit-animation-delay: 7847ms;
  animation-delay: 7847ms;
}

#index .shooting_star:nth-child(6)::before,
#index .shooting_star:nth-child(6)::after {
  -webkit-animation-delay: 7847ms;
  animation-delay: 7847ms;
}

#index .shooting_star:nth-child(7) {
  top: calc(50% + 138px);
  left: calc(50% - 103px);
  -webkit-animation-delay: 7179ms;
  animation-delay: 7179ms;
}

#index .shooting_star:nth-child(7)::before,
#index .shooting_star:nth-child(7)::after {
  -webkit-animation-delay: 7179ms;
  animation-delay: 7179ms;
}

#index .shooting_star:nth-child(8) {
  top: calc(50% + 48px);
  left: calc(50% - 12px);
  -webkit-animation-delay: 7918ms;
  animation-delay: 7918ms;
}

#index .shooting_star:nth-child(8)::before,
#index .shooting_star:nth-child(8)::after {
  -webkit-animation-delay: 7918ms;
  animation-delay: 7918ms;
}

#index .shooting_star:nth-child(9) {
  top: calc(50% - 170px);
  left: calc(50% - 67px);
  -webkit-animation-delay: 2913ms;
  animation-delay: 2913ms;
}

#index .shooting_star:nth-child(9)::before,
#index .shooting_star:nth-child(9)::after {
  -webkit-animation-delay: 2913ms;
  animation-delay: 2913ms;
}

#index .shooting_star:nth-child(10) {
  top: calc(50% - 121px);
  left: calc(50% - 204px);
  -webkit-animation-delay: 2572ms;
  animation-delay: 2572ms;
}

#index .shooting_star:nth-child(10)::before,
#index .shooting_star:nth-child(10)::after {
  -webkit-animation-delay: 2572ms;
  animation-delay: 2572ms;
}

#index .shooting_star:nth-child(11) {
  top: calc(50% + 187px);
  left: calc(50% - 135px);
  -webkit-animation-delay: 2759ms;
  animation-delay: 2759ms;
}

#index .shooting_star:nth-child(11)::before,
#index .shooting_star:nth-child(11)::after {
  -webkit-animation-delay: 2759ms;
  animation-delay: 2759ms;
}

#index .shooting_star:nth-child(12) {
  top: calc(50% + 98px);
  left: calc(50% - 210px);
  -webkit-animation-delay: 9282ms;
  animation-delay: 9282ms;
}

#index .shooting_star:nth-child(12)::before,
#index .shooting_star:nth-child(12)::after {
  -webkit-animation-delay: 9282ms;
  animation-delay: 9282ms;
}

#index .shooting_star:nth-child(13) {
  top: calc(50% + 114px);
  left: calc(50% - 258px);
  -webkit-animation-delay: 3959ms;
  animation-delay: 3959ms;
}

#index .shooting_star:nth-child(13)::before,
#index .shooting_star:nth-child(13)::after {
  -webkit-animation-delay: 3959ms;
  animation-delay: 3959ms;
}

#index .shooting_star:nth-child(14) {
  top: calc(50% - 45px);
  left: calc(50% - 92px);
  -webkit-animation-delay: 1252ms;
  animation-delay: 1252ms;
}

#index .shooting_star:nth-child(14)::before,
#index .shooting_star:nth-child(14)::after {
  -webkit-animation-delay: 1252ms;
  animation-delay: 1252ms;
}

#index .shooting_star:nth-child(15) {
  top: calc(50% + 127px);
  left: calc(50% - 243px);
  -webkit-animation-delay: 5535ms;
  animation-delay: 5535ms;
}

#index .shooting_star:nth-child(15)::before,
#index .shooting_star:nth-child(15)::after {
  -webkit-animation-delay: 5535ms;
  animation-delay: 5535ms;
}

#index .shooting_star:nth-child(16) {
  top: calc(50% - 57px);
  left: calc(50% - 122px);
  -webkit-animation-delay: 3466ms;
  animation-delay: 3466ms;
}

#index .shooting_star:nth-child(16)::before,
#index .shooting_star:nth-child(16)::after {
  -webkit-animation-delay: 3466ms;
  animation-delay: 3466ms;
}

#index .shooting_star:nth-child(17) {
  top: calc(50% - 79px);
  left: calc(50% - 143px);
  -webkit-animation-delay: 5440ms;
  animation-delay: 5440ms;
}

#index .shooting_star:nth-child(17)::before,
#index .shooting_star:nth-child(17)::after {
  -webkit-animation-delay: 5440ms;
  animation-delay: 5440ms;
}

#index .shooting_star:nth-child(18) {
  top: calc(50% + 141px);
  left: calc(50% - 85px);
  -webkit-animation-delay: 8923ms;
  animation-delay: 8923ms;
}

#index .shooting_star:nth-child(18)::before,
#index .shooting_star:nth-child(18)::after {
  -webkit-animation-delay: 8923ms;
  animation-delay: 8923ms;
}

#index .shooting_star:nth-child(19) {
  top: calc(50% + 48px);
  left: calc(50% - 99px);
  -webkit-animation-delay: 528ms;
  animation-delay: 528ms;
}

#index .shooting_star:nth-child(19)::before,
#index .shooting_star:nth-child(19)::after {
  -webkit-animation-delay: 528ms;
  animation-delay: 528ms;
}

#index .shooting_star:nth-child(20) {
  top: calc(50% + 132px);
  left: calc(50% - 106px);
  -webkit-animation-delay: 5323ms;
  animation-delay: 5323ms;
}

#index .shooting_star:nth-child(20)::before,
#index .shooting_star:nth-child(20)::after {
  -webkit-animation-delay: 5323ms;
  animation-delay: 5323ms;
}

footer {
  position: fixed;
  left: 10px;
  bottom: 10px;
  text-align: center;
  display: inline-block;
}
footer a {
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
}
footer img {
  width: 100%;
  max-width: 180px;
  margin: auto;
  background: #fff;
}
@media screen and (max-width: 768px) {
  footer img {
    max-width: 80px;
  }
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@-webkit-keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}
@keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}
@-webkit-keyframes animate1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animate1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes animate2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes animate2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes star {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes star {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes boom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes boom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes bg {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  51% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes bg {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  51% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@-webkit-keyframes und {
  from {
    top: 0;
  }
  to {
    top: 5px;
  }
}
@keyframes und {
  from {
    top: 0;
  }
  to {
    top: 5px;
  }
}
@-webkit-keyframes und3 {
  from {
    top: 30%;
  }
  to {
    top: 33%;
  }
}
@keyframes und3 {
  from {
    top: 30%;
  }
  to {
    top: 33%;
  }
}
@-webkit-keyframes und2 {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 1%;
  }
}
@keyframes und2 {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 1%;
  }
}
@-webkit-keyframes man {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@keyframes man {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@-webkit-keyframes alert {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@keyframes alert {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
.img,
.imgIn {
  display: inline-block;
  position: relative;
  text-align: center;
}
.img img:nth-child(1),
.imgIn img:nth-child(1) {
  top: 0;
  left: 0;
}
.img img:nth-child(2),
.imgIn img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.imgIn img:nth-child(1) {
  -webkit-animation: animate2 0.8s infinite;
          animation: animate2 0.8s infinite;
}
.imgIn img:nth-child(2) {
  -webkit-animation: animate1 0.8s infinite;
          animation: animate1 0.8s infinite;
}

.certificate {
  width: auto;
  height: auto;
  position: relative;
}

.certificate input ,.certificate .input {
  position: absolute;
  top: 61%;
  left: -8%;
/*   font-family: "Lucida Console"; */
/*   font-family: "Mverdana"; */
  right: 0;
  margin: auto;
  display: inline-block;
  width: 40%;
  font-size: 1.5vw;
  border: none;
  font-weight: bold;
  text-align: center;
  opacity: 1;
  z-index: 90;
  color: #fff;
  height: 60px;
  line-height: 1;
  letter-spacing: 3px;
  background: rgba(255, 255, 255, 0);
  padding-top: 0px;
}
.certificate .downloadImg{
  max-height: 80vh;
  object-fit: contain;
}
@media screen and (max-width: 1024px) {
  .certificate input ,.certificate .input{
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 660px) {
  .certificate input ,.certificate .input{
    font-size: 0.9rem;
    top: 59%;
    width: 40%;
    height: 40px;
  }
  .cerBox{
      position: relative;
  }
  .filter.cer .cerBox .btn{
      bottom: -20%;
  }

  .filter.cer .cerBox .btn a {
      width: 100px;
  }
}

.certificate span {
  position: absolute;
  white-space: nowrap;
  top: 71%;
  left: 48%;
  font-weight: bold;
  display: inline-block;
  font-size: 1.5vw;
  color: #fff;
  opacity: 1;
}
@media screen and (max-width: 1024px) {
  .certificate span {
    font-size: 1.1rem;
    top: 71.5%;
  }
}
@media screen and (max-width: 768px) {
  .certificate span {
    font-size: 0.6rem;
    top: 71.5%;
  }
}

#game1 {
  height: 100vh;
  overflow: hidden;
  background-image: url(../images/game1/bg_game.webp);
  background-position: bottom;
}
@media screen and (max-width: 768px) {
  #game1 {
    background-image: url(../images/game1/bg_mob.webp);
    background-position: bottom -10px;
  }
}
#game1:before, #game1.clear:after {
  background-image: url(../images/game1/bg_game2.webp);
  background-position: bottom;
}
@media screen and (max-width: 768px) {
  #game1:before, #game1.clear:after {
    background-image: url(../images/game1/bg_mob2.webp);
    background-position: bottom -10px;
  }
}
#game1 .board:before, #game1 .board.clear:after {
  left: -1%;
  top: -1%;
  height: 160px;
  width: 40%;
  background-image: url(../images/game1/item1.webp);
}
@media screen and (max-width: 480px) {
  #game1 .board:before, #game1 .board.clear:after {
    top: 5%;
  }
}
#game1 .board:after {
  right: -9%;
  bottom: -1%;
  width: 30%;
  height: 120px;
  background-image: url(../images/game1/item2.webp);
}
@media screen and (max-width: 990px) {
  #game1 .board:after {
    display: none;
  }
}
#game1 .ship {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  margin: auto;
  position: absolute;
  left: 20%;
  bottom: 10%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  cursor: pointer;
}
@media screen and (max-width: 1366px) {
  #game1 .ship {
    width: 70%;
    left: 15%;
    bottom: 5%;
  }
}
@media screen and (max-width: 480px) {
  #game1 .ship {
    width: 100%;
    left: 0%;
    bottom: 30%;
  }
}
#game1 .ship .shipBad .bad {
  display: none;
  left: 0;
  top: 0;
}
#game1 .ship .shipBad .break {
  width: 6%;
  position: absolute;
}
#game1 .ship .shipBad .break.break1 {
  left: 15%;
  bottom: 10%;
}
#game1 .ship .shipBad .break.break2 {
  left: 15%;
  bottom: 40%;
}
#game1 .ship .shipBad .break.break3 {
  right: 44%;
  bottom: 38%;
}
#game1 .ship .shipBad .break.break4 {
  right: 37%;
  bottom: 60%;
}
#game1 .ship .shipBad .break.break5 {
  right: 25%;
  top: 7%;
}
#game1 .ship .shipBad .break.break6 {
  width: 5%;
  right: 15%;
  top: 22%;
}
#game1 .ship .point {
  position: absolute;
  cursor: none;
  z-index: 100;
}
#game1 .ship .point.click {
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  background: url(../images/click.gif) no-repeat;
  background-size: contain;
}
#game1 .ship .boomBox {
  width: 100%;
  height: 100%;
  z-index: 99;
  position: absolute;
}
#game1 .ship .boomBox .point {
  display: none;
  width: 18%;
  -webkit-animation: boom 0.3s linear infinite alternate;
          animation: boom 0.3s linear infinite alternate;
}
#game1 .ship .point1 {
  left: 10%;
  bottom: 10%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .point1 {
    bottom: 7%;
  }
}
#game1 .ship .point2 {
  left: 5%;
  bottom: 15%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .point2 {
    bottom: 10%;
  }
}
#game1 .ship .point3 {
  left: 15%;
  bottom: 0%;
}
#game1 .ship .point4 {
  left: 25%;
  bottom: 10%;
}
#game1 .ship .point5 {
  left: 40%;
  bottom: 15%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .point5 {
    left: 42%;
    bottom: 5%;
  }
}
#game1 .ship .point6 {
  left: 30%;
  bottom: 2%;
}
#game1 .ship .point7 {
  left: 50%;
  bottom: 20%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .point7 {
    bottom: 10%;
  }
}
#game1 .ship .point8 {
  left: 55%;
  bottom: 30%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .point8 {
    bottom: 20%;
  }
}
#game1 .ship .point9 {
  left: 60%;
  bottom: 35%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .point9 {
    bottom: 15%;
  }
}
#game1 .ship .point10 {
  left: 70%;
  bottom: 30%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .point10 {
    bottom: 20%;
  }
}
#game1 .ship .monsterBox {
  width: 100%;
  height: 100%;
  z-index: 99;
  position: absolute;
}
#game1 .ship .monsterBox .point {
  display: none;
  width: 13%;
  position: absolute;
}
#game1 .ship .monsterBox .point1 {
  left: 0%;
  bottom: 20%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .monsterBox .point1 {
    bottom: 10%;
  }
}
#game1 .ship .monsterBox .point4 {
  left: 15%;
  bottom: 25%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .monsterBox .point4 {
    bottom: 10%;
  }
}
#game1 .ship .monsterBox .point5 {
  left: 30%;
  bottom: 15%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .monsterBox .point5 {
    bottom: 13%;
  }
}
#game1 .ship .monsterBox .point7 {
  left: 45%;
  bottom: 20%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .monsterBox .point7 {
    bottom: 10%;
  }
}
#game1 .ship .monsterBox .point8 {
  left: 55%;
  bottom: 38%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .monsterBox .point8 {
    bottom: 20%;
  }
}
#game1 .ship .monsterBox .point9 {
  left: 65%;
  bottom: 40%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .monsterBox .point9 {
    bottom: 20%;
  }
}
#game1 .ship .monsterBox .point10 {
  left: 75%;
  bottom: 35%;
}
@media screen and (max-width: 480px) {
  #game1 .ship .monsterBox .point10 {
    bottom: 15%;
  }
}
#game1 .ship .monsterBox .point12 {
  left: 30%;
  bottom: 2%;
}
#game1 .peo {
  position: absolute;
}
#game1 .p1 {
  width: 15%;
  left: 10%;
  bottom: 0%;
}
@media screen and (max-width: 480px) {
  #game1 .p1 {
    width: 30%;
    bottom: 5%;
  }
}
#game1 .p1 .talkBox {
  position: absolute;
  top: -30%;
  background: url(../images/board.webp);
  background-size: 100% 100%;
  padding: 30px;
  border-radius: 20px;
  font-size: 1.15rem;
  line-height: 1.5;
  display: none;
  z-index: 99;
}
#game1 .p1 .talkBox p {
  line-height: 1.5;
  color: #fff;
}
@media screen and (max-width: 480px) {
  #game1 .p1 .talkBox {
    padding: 20px;
    width: 90vw;
    top: -50vh;
    left: -5vw;
  }
}
#game1 .p1 .talkBox .btn {
  width: 60%;
  margin: 20px auto 0 auto;
}
#game1 .p1 .talkBox img {
  -webkit-animation: none;
          animation: none;
}
#game1 .p1Win, #game1 .p2Win, #game1 .p1Fail, #game1 .p2Fail, #game1 .p1Winwin {
  display: none;
}
#game1 .p2 {
  width: 40%;
  right: 0%;
  bottom: 0%;
}
@media screen and (max-width: 480px) {
  #game1 .p2 {
    width: 50%;
    bottom: 5%;
  }
}
#game1 .chair {
  position: absolute;
  width: 100%;
  display: inline-block;
  bottom: 0;
  left: 0;
  height: auto;
}
@media screen and (max-width: 480px) {
  #game1 .chair {
    display: none;
  }
}

.mouseClick {
  position: absolute;
  display: inline-block;
}
.mouseClick.click:before, .mouseClick.click.clear:after {
  bottom: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  content: "";
  z-index: 99;
  position: absolute;
  background: url(../images/click.gif) no-repeat;
  background-size: contain;
}
.mouseClick .m2 {
  display: none;
}

.cursor {
  width: 10%;
  position: absolute;
  width: 140px;
  z-index: 99;
  cursor: none;
  pointer-events: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: man 0.3s linear infinite alternate;
          animation: man 0.3s linear infinite alternate;
}
@media screen and (max-width: 480px) {
  .cursor {
    width: 70px;
  }
}

#game2 {
  height: 100vh;
  overflow: hidden;
  background-image: url(../images/game2/bg_game.webp);
}
#game2:before, #game2.clear:after {
  background-image: url(../images/game2/bg_game2.webp);
}
#game2 .p1 {
  position: absolute;
  width: 15%;
  left: 0;
  bottom: 8%;
  z-index: 5;
}
#game2 .p2 {
  position: absolute;
  width: 25%;
  right: 0;
  bottom: 0%;
  z-index: 6;
}
#game2 .gameMain {
  position: relative;
  text-align: center;
}
#game2 .gameMain .bg_q {
  width: 80%;
  height: 75vh;
  margin: auto;
  padding: 60px 100px;
  margin-top: 20vh;
  background-image: url(../images/game2/bg_board.webp);
  background-size: 100% 100%;
}
@media screen and (max-width: 990px) {
  #game2 .gameMain .bg_q {
    padding: 60px 50px;
  }
}
@media screen and (max-width: 480px) {
  #game2 .gameMain .bg_q {
    padding: 60px 30px;
    margin-top: 10vh;
    height: 75vh;
  }
}
#game2 .gameMain .bg_q .q_box {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 1.25rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #game2 .gameMain .bg_q .q_box {
    font-size: 0.8rem;
  }
}
#game2 .gameMain .bg_q .q_box a {
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  #game2 .gameMain .bg_q .q_box a {
    font-size: 0.8rem;
  }
}
#game2 .gameMain .bg_q .q_box .q {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 768px) {
  #game2 .gameMain .bg_q .q_box .q {
    height: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
#game2 .gameMain .bg_q .q_box .q .q_ani {
  width: 50%;
  height: 80%;
  text-align: left;
}
@media screen and (max-width: 768px) {
  #game2 .gameMain .bg_q .q_box .q .q_ani {
    width: 100%;
    margin-bottom: 10px;
  }
}
#game2 .gameMain .bg_q .q_box .q .q_ani .q_title {
  font-size: 1.25rem;
  color: #fff;
  padding: 10px 0 10px 30px;
}
@media screen and (max-width: 768px) {
  #game2 .gameMain .bg_q .q_box .q .q_ani .q_title {
    font-size: 0.8rem;
  }
}
#game2 .gameMain .bg_q .q_box .q .q_ani .q_img {
  width: 100%;
  height: 100%;
  background: url(../images/game2/bg_q.webp);
  background-size: 100% 100%;
  padding: 30px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 480px) {
  #game2 .gameMain .bg_q .q_box .q .q_ani .q_img {
    padding: 20px 30px;
  }
  #game2 .gameMain .bg_q .q_box .q .q_ani .q_img figure {
    margin-top: 10px;
  }
}
#game2 .gameMain .bg_q .q_box .q .q_ani .q_img p {
  margin-bottom: auto;
  line-height: 1.5;
}
#game2 .gameMain .bg_q .q_box .q .q_ani .q_img figure {
  border-radius: 20px;
  overflow: hidden;
}
@media screen and (max-height: 750px) {
  #game2 .gameMain .bg_q .q_box .q .q_ani .q_img figure img{
    object-fit: contain;
    height: 100%;
  }
}

#game2 .gameMain .bg_q .q_box .q .q_ans {
  width: 50%;
  padding: 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: scroll;
  position: relative;
  height: 65vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 768px) {
  #game2 .gameMain .bg_q .q_box .q .q_ans {
    width: 100%;
    padding: 0 0px;
    height: 20vh;
    display: block;
  }
}
#game2 .gameMain .bg_q .q_box .q .q_ans .ans_check {
  position: absolute;
  width: 20%;
  z-index: 10;
  display: none;
  left: 0;
  right: 0;
  margin: auto;
  margin-bottom: 100px;
}
#game2 .gameMain .bg_q .q_box .q .q_ans .ans {
  cursor: pointer;
}
#game2 .gameMain .bg_q .q_box .q .q_ans .ans:before, #game2 .gameMain .bg_q .q_box .q .q_ans .ans.clear:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-repeat: no-repeat;
  background-size: contain;
}
#game2 .gameMain .bg_q .q_box .q .q_ans .selected {
  cursor: pointer;
}
#game2 .gameMain .bg_q .q_box .q .q_ans .selected:before, #game2 .gameMain .bg_q .q_box .q .q_ans .selected.clear:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-repeat: no-repeat;
  background-size: contain;
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_list a {
  width: 100%;
  padding: 20px 30px;
  display: block;
  text-align: left;
  position: relative;
  margin-bottom: 15px;
  z-index: 2;
  line-height: 1.3;
  background-size: 100% 100%;
  background-image: url(../images/game2/ans_list.webp);
}
@media screen and (max-width: 480px) {
  #game2 .gameMain .bg_q .q_box .q .q_ans.ans_list a {
    padding: 10px 15px;
    margin-bottom: 5px;
  }
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_list a:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_list a.clear:after {
  background-size: 95% 80%;
  background-image: url(../images/game2/ans_list_h.webp);
  margin: 5px;
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_list a.selected:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_list a.selected.clear:after {
  background-size: 95% 80%;
  background-image: url(../images/game2/ans_list_h.webp);
  z-index: -1;
  margin: 5px;
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_list a:hover:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_list a.clear:hover:after {
  opacity: 1;
  z-index: -1;
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox .ans_ox_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a {
  margin: 10px;
  position: relative;
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.ans_o:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.ans_o.clear:after {
  background-image: url(../images/game2/ans_o_h.webp);
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.ans_x:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.ans_x.clear:after {
  background-image: url(../images/game2/ans_x_h.webp);
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.ans_o.selected:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.ans_o.selected.clear:after {
  opacity: 1;
  z-index: 1;
  background-image: url(../images/game2/ans_o_h.webp);
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.ans_x.selected:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.ans_x.selected.clear:after {
  opacity: 1;
  background-image: url(../images/game2/ans_x_h.webp);
}
#game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a:hover:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.clear:hover:after {
  opacity: 1;
}
#game2 .gameMain .bg_q .q_box .q .q_ans .ans_detail {
  width: 100%;
  height: 60%;
  padding: 30px;
  display: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../images/game2/ans_detail.webp);
}

@media screen and (max-width: 768px) {
  #game2 .gameMain .bg_q .q_box .q .q_ans .ans_detail{
    height: auto;
  }
  #game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a:hover:before, #game2 .gameMain .bg_q .q_box .q .q_ans.ans_ox a.clear:hover:after {
    opacity: 0;
  }
}
#game2 .gameMain .bg_q .q_box .q .q_ans .ans_detail p {
  line-height: 1.5;
  text-align: left;
  margin-bottom: 10px;
}
#game2 .gameMain .bg_q .q_box .q .q_ans .btn {
  width: 150px;
  margin-top: 15px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
/*   position: fixed; */
  position: relative;
  bottom: 0;
  cursor: pointer;
  display: none;
  z-index: 10;
  -webkit-filter: contrast(100%) drop-shadow(0px 0px 0px rgba(0, 88, 109, 0.48));
          filter: contrast(100%) drop-shadow(0px 0px 0px rgba(0, 88, 109, 0.48));
}
@media screen and (max-height: 1100px) {
  #game2 .gameMain .bg_q .q_box .q .q_ans .btn {
    top: auto;
    bottom: 5%;
  }
}
@media screen and (max-width: 768px) {
  #game2 .gameMain .bg_q .q_box .q .q_ans .btn {
    width: 100px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20%;
    position: fixed;
  }
}
#game2 .gameMain .bg_q .q_box .q .q_ans .btn:hover {
  bottom: 4%;
  -webkit-filter: contrast(150%) drop-shadow(0px 15px 30px rgba(0, 208, 255, 0.48));
          filter: contrast(150%) drop-shadow(0px 15px 30px rgba(0, 208, 255, 0.48));
}
#game2 .board:before, #game2 .board.clear:after {
  left: 7%;
  top: 12%;
  width: 20%;
  height: 110px;
  background-image: url(../images/game2/item1.webp);
}
@media screen and (max-width: 480px) {
  #game2 .board:before, #game2 .board.clear:after {
    height: 60px;
    top: 5%;
  }
}
#game2 .board:after {
  right: -7%;
  bottom: -5%;
  width: 20%;
  height: 150px;
  background-image: url(../images/game2/item2.webp);
}
@media screen and (max-width: 990px) {
  #game2 .board:after {
    display: none;
  }
}
#game2 #sec3 {
  width: 100%;
  height: 100%;
  font-size: 7.5rem;
  font-family: arial;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  z-index: 90;
}
#game2 .level {
  width: 100%;
  max-width: 900px;
  height: 100%;
  margin: auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 1500px) {
  #game2 .level {
    max-width: 450px;
    margin: auto;
  }
}
@media screen and (max-width: 768px) {
  #game2 .level {
    width: 80%;
    margin: auto;
  }
}
#game2 .level .gameCard {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 25% 20px 25% 20px 25% 20px 25%;
  grid-template-columns: 25% 25% 25% 25%;
  -ms-grid-rows: 50% 20px 50% 20px 50% 20px 50%;
  grid-template-rows: 50% 50% 50% 50%;
  grid-gap: 20px;
  position: relative;
}
#game2 .level .gameCard > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#game2 .level .gameCard > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
#game2 .level .gameCard > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
#game2 .level .gameCard > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
#game2 .level .gameCard > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
#game2 .level .gameCard > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
#game2 .level .gameCard > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
#game2 .level .gameCard > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
#game2 .level .gameCard > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
#game2 .level .gameCard > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
#game2 .level .gameCard > *:nth-child(11) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
#game2 .level .gameCard > *:nth-child(12) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}
#game2 .level .gameCard > *:nth-child(13) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}
#game2 .level .gameCard > *:nth-child(14) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}
#game2 .level .gameCard > *:nth-child(15) {
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}
#game2 .level .gameCard > *:nth-child(16) {
  -ms-grid-row: 7;
  -ms-grid-column: 7;
}
#game2 .level .gameCard:after {
  content: "";
  display: block;
  padding-bottom: 170%;
}
@media screen and (max-width: 480px) {
  #game2 .level .gameCard {
    width: 70%;
    -ms-grid-columns: 50% 20px 50%;
    grid-template-columns: 50% 50%;
    -ms-grid-rows: 25% 20px 25% 20px 25% 20px 25%;
    grid-template-rows: 25% 25% 25% 25%;
  }
  #game2 .level .gameCard > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  #game2 .level .gameCard > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #game2 .level .gameCard > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  #game2 .level .gameCard > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  #game2 .level .gameCard > *:nth-child(5) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  #game2 .level .gameCard > *:nth-child(6) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
  #game2 .level .gameCard > *:nth-child(7) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
  }
  #game2 .level .gameCard > *:nth-child(8) {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
  }
  #game2 .level .gameCard:after {
    padding-bottom: 270%;
  }
}
#game2 .level.level2 .gameCard {
  -ms-grid-columns: 25% 20px 25% 20px 25% 20px 25%;
  grid-template-columns: 25% 25% 25% 25%;
  -ms-grid-rows: 33% 20px 33% 20px 33% 20px 33%;
  grid-template-rows: 33% 33% 33% 33%;
}
#game2 .level.level2 .gameCard > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#game2 .level.level2 .gameCard > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
#game2 .level.level2 .gameCard > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
#game2 .level.level2 .gameCard > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
#game2 .level.level2 .gameCard > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
#game2 .level.level2 .gameCard > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
#game2 .level.level2 .gameCard > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
#game2 .level.level2 .gameCard > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
#game2 .level.level2 .gameCard > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
#game2 .level.level2 .gameCard > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
#game2 .level.level2 .gameCard > *:nth-child(11) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
#game2 .level.level2 .gameCard > *:nth-child(12) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}
#game2 .level.level2 .gameCard > *:nth-child(13) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}
#game2 .level.level2 .gameCard > *:nth-child(14) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}
#game2 .level.level2 .gameCard > *:nth-child(15) {
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}
#game2 .level.level2 .gameCard > *:nth-child(16) {
  -ms-grid-row: 7;
  -ms-grid-column: 7;
}
#game2 .level.level2 .gameCard:after {
  padding-bottom: 280%;
}
@media screen and (max-width: 480px) {
  #game2 .level.level2 .gameCard {
    -ms-grid-columns: 33% 20px 33% 20px 33%;
    grid-template-columns: 33% 33% 33%;
    -ms-grid-rows: 25% 20px 25% 20px 25% 20px 25%;
    grid-template-rows: 25% 25% 25% 25%;
    left: -15px;
  }
  #game2 .level.level2 .gameCard > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  #game2 .level.level2 .gameCard > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  #game2 .level.level2 .gameCard > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  #game2 .level.level2 .gameCard > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  #game2 .level.level2 .gameCard > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  #game2 .level.level2 .gameCard > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }
  #game2 .level.level2 .gameCard > *:nth-child(7) {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  #game2 .level.level2 .gameCard > *:nth-child(8) {
    -ms-grid-row: 5;
    -ms-grid-column: 3;
  }
  #game2 .level.level2 .gameCard > *:nth-child(9) {
    -ms-grid-row: 5;
    -ms-grid-column: 5;
  }
  #game2 .level.level2 .gameCard > *:nth-child(10) {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
  }
  #game2 .level.level2 .gameCard > *:nth-child(11) {
    -ms-grid-row: 7;
    -ms-grid-column: 3;
  }
  #game2 .level.level2 .gameCard > *:nth-child(12) {
    -ms-grid-row: 7;
    -ms-grid-column: 5;
  }
  #game2 .level.level2 .gameCard:after {
    padding-bottom: 280%;
  }
}
#game2 .level.level3 .gameCard {
  -ms-grid-columns: 25% 20px 25% 20px 25% 20px 25%;
  grid-template-columns: 25% 25% 25% 25%;
  -ms-grid-rows: 25% 20px 25% 20px 25% 20px 25%;
  grid-template-rows: 25% 25% 25% 25%;
  width: 80%;
}
#game2 .level.level3 .gameCard > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#game2 .level.level3 .gameCard > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
#game2 .level.level3 .gameCard > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
#game2 .level.level3 .gameCard > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
#game2 .level.level3 .gameCard > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
#game2 .level.level3 .gameCard > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
#game2 .level.level3 .gameCard > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
#game2 .level.level3 .gameCard > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
#game2 .level.level3 .gameCard > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
#game2 .level.level3 .gameCard > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
#game2 .level.level3 .gameCard > *:nth-child(11) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
#game2 .level.level3 .gameCard > *:nth-child(12) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}
#game2 .level.level3 .gameCard > *:nth-child(13) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}
#game2 .level.level3 .gameCard > *:nth-child(14) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}
#game2 .level.level3 .gameCard > *:nth-child(15) {
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}
#game2 .level.level3 .gameCard > *:nth-child(16) {
  -ms-grid-row: 7;
  -ms-grid-column: 7;
}
#game2 .level.level3 .gameCard:after {
  padding-bottom: 320%;
}
@media screen and (max-width: 480px) {
  #game2 .level.level3 .gameCard {
    width: 95%;
    grid-gap: 5px;
    left: -10px;
  }
  #game2 .level.level3 .gameCard:after {
    padding-bottom: 350%;
  }
}
#game2 .ansBox {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.84);
  width: auto;
  max-width: 400px;
  padding: 20px;
  border-radius: 10px;
  display: none;
  z-index: 99;
}
@media screen and (max-width: 480px) {
  #game2 .ansBox {
    margin: 2%;
    padding: 15px 50px;
  }
}
#game2 .ansBox .closeAns {
  cursor: pointer;
  width: 30px;
  height: 30px;
  background: url(../images/btn_close3.webp) no-repeat;
  background-size: contain;
  position: absolute;
  right: 10px;
  top: 10px;
}
#game2 .ansBox .ansT {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
@media screen and (max-width: 480px) {
  #game2 .ansBox .ansT {
    font-size: 1.25rem;
  }
}
#game2 .ansBox p {
  line-height: 1.5;
}
@media screen and (max-width: 480px) {
  #game2 .ansBox p {
    font-size: 0.9rem;
  }
}
#game2 .ansBox img {
  width: 100%;
  max-width: 100px;
  margin: 10px auto;
}
#game2 .card {
  float: left;
  text-align: center;
  display: block;
  -webkit-perspective: 500px;
          perspective: 500px;
  position: relative;
  cursor: pointer;
  z-index: 50;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#game2 .card .inside {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  padding: 0 !important;
}
#game2 .card .inside.picked, #game2 .card .inside.matched, #game2 .card .inside.revew {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
#game2 .card .inside.matched {
  -webkit-animation: 0.5s matchAnim ease-in-out;
          animation: 0.5s matchAnim ease-in-out;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#game2 .card .inside.matched a {
  border: none !important;
}
#game2 .card .front,
#game2 .card .back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
  display: block !important;
  background-position: center !important;
  padding: 0 !important;
  border-radius: 20px;
  padding: 0px !important;
}
@media screen and (max-width: 480px) {
  #game2 .card .front,
  #game2 .card .back {
    border-radius: 10px;
  }
}
#game2 .card .front img,
#game2 .card .back img {
  max-width: 100%;
  height: 100%;
  display: block;
  margin: 0px auto 0 auto;
  text-align: center;
}
#game2 .card .front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  padding: 0;
}
@media screen and (max-width: 480px) {
  #game2 .card .front {
    border-radius: 10px;
  }
}
#game2 .card .back {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
  background: url(../images/game2/front.webp);
  background-size: 100% 100%;
}

.filter {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.56);
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.filter.start .element {
  background: none;
}
.filter.pass .board, .filter.pass2 .board {
  padding-top: 8%;
}
.filter.pass .board p, .filter.pass2 .board p {
  margin: 50px 0;
}
.filter.win .board .btn, .filter.fail .board .btn {
  margin: 30px 0 0px 0;
}
.filter.win .board .btn a, .filter.fail .board .btn a {
  max-width: 140px;
  margin: 0px 0 30px 0;
}
@media screen and (max-width: 480px) {
  .filter.win .board .btn a, .filter.fail .board .btn a {
    width: 70px;
    margin: 0px 0 0px 0;
  }
}
.filter.win .prize, .filter.fail .prize {
  width: 25%;
}
.filter.fail .board .title {
  margin: 30px auto 0px auto;
}
.filter .gradient_b {
  display: inline-block;
  border-radius: 50px;
  background-image: -webkit-gradient(linear, left top, right bottom, from(#1EDDF2), to(#F38AAD));
  background-image: linear-gradient(to bottom right, #1EDDF2 0%, #F38AAD 100%);
  -o-border-image: linear-gradient(to bottom right, #1EDDF2 0%, #F38AAD 100%);
     border-image: -webkit-gradient(linear, left top, right bottom, from(#1EDDF2), to(#F38AAD));
     border-image: linear-gradient(to bottom right, #1EDDF2 0%, #F38AAD 100%);
  border-image-slice: 1;
  overflow: hidden;
  padding: 3px 3px;
  margin: 10px 0;
  width: auto;
  max-width: 80%;
}
@media screen and (max-width: 768px) {
  .filter .gradient_b {
    max-width: 100%;
    margin: 5px 0;
  }
}
.filter .logName {
  padding: 10px 15px;
  border-radius: 50px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: #281265;
  border: 0;
  font-size: 1.25rem;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .filter .logName {
    padding: 0 5px;

  }
}
.filter .board small {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.5;
    position: relative;
    display: block;
    margin-bottom: 1rem;
}

.d-flex {
    align-items: center;
    display: flex;
    justify-content: center;
}
.filter label {
    position: relative;
    font-size: 1.4rem;
    padding-right: 10px;
    color: #fff;
}
@media screen and (max-width: 768px) {
  .d-flex{
    flex-wrap: wrap;
  }
  .flex-imporant{
    flex-wrap: nowrap ;
  }
  .filter .board small{
    font-size: 0.9rem;
  }
  .filter label {
    white-space: nowrap;
    display: block;
/*     width: 100%; */
    font-size: 1.1rem;
  }
}
.filter .final_data {
  padding: 10px 20px;
  border-radius: 50px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: #281265;
  border: 0;
  font-size: 1.5rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 480px) {
  .filter .final_data {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 0.8rem;
  }
  .filter .final_data .final_point {
    margin-bottom: 5px;
  }
}
.filter.login .board .title, .filter.logout .board .title {
  margin: 80px auto 0px auto;
}
@media screen and (max-width: 1366px) {
  .filter.login .board .title, .filter.logout .board .title {
    margin: 70px auto 0px auto;
  }
}
.filter.login .board .btn, .filter.logout .board .btn {
  margin: 15px 0 0 0;
}
.filter.cer .cerBox {
  width: 100%;
  max-width: 1000px;
  text-align: center;
  position: relative;
/*   background-image: url(../images/bg_cer.webp); */
/*   background-size: contain; */
}
.filter.cer .cerBox .btn {
  margin: auto;
  position: absolute;
  bottom: 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.filter.cer .cerBox .btn a {
  width: 150px;
}
@media screen and (max-width: 768px) {
  .filter.cer .cerBox .btn{
    bottom: -5%;
  }
  .filter.cer .cerBox .btn a {
    width: 100px;
  }
}
.filter .board {
  width: 100%;
  max-width: 800px;
  height: auto;
  min-height: 60vh;
  background-image: url(../images/board.webp);
  background-size: 100% 100%;
  padding: 30px 100px;
  position: relative;
}
.filter .board:before, .filter .board:after {
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}
.filter .board:before, .filter .board.clear:after {
  -webkit-animation: man 1s linear infinite alternate;
          animation: man 1s linear infinite alternate;
}
.filter .board:after {
  -webkit-animation: man 0.7s linear infinite alternate;
          animation: man 0.7s linear infinite alternate;
}
@media screen and (max-width: 768px) {
  .filter .board {
    margin: 0 15px;
    padding: 30px 50px;
  }
}
@media screen and (max-width: 480px) {
  .filter .board {
    min-height: auto;
  }
}
.filter .board a {
  text-decoration: none;
  color: #fff;
  margin-top: 5px;
}
.filter .board .levelStar {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 480px) {
  .filter .board .levelStar {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 20px;
  }
}
.filter .board .levelStar a {
  width: 20%;
  height: 100px;
  display: inline-block;
  margin: 20px 1% 0 1%;
  background-size: contain;
  position: relative;
  background-repeat: no-repeat;
  opacity: 1;
  vertical-align: top;
}
@media screen and (max-width: 480px) {
  .filter .board .levelStar a {
    width: 30%;
    height: 80px;
    margin: 0px 1%;
  }
}
.filter .board .title {
  width: 80%;
  margin: 50px auto 0px auto;
  -webkit-animation: pulse 3s linear infinite alternate;
          animation: pulse 3s linear infinite alternate;
}
@media screen and (max-width: 768px) {
  .filter .board .title {
    margin: 80px auto 0px auto;
  }
}
.filter .board p {
  font-size: 1.5rem;
  color: #fff;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .filter .board p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 480px) {
  .filter .board p {
    font-size: 1rem;
  }
}
.filter .board p.pointCount, .filter .board p.pointHis {
  color: yellow;
  font-size: 1.25rem;
}
@media screen and (max-width: 768px) {
  .filter .board p.pointCount, .filter .board p.pointHis {
    font-size: 1.25rem;
  }
}
@media screen and (max-width: 480px) {
  .filter .board p.pointCount, .filter .board p.pointHis {
    font-size: 1.1rem;
  }
}
.filter .board p span {
  font-weight: bold;
}
.filter .board .faild {
  position: absolute;
  width: 22%;
  bottom: 7%;
  left: 5%;
}
@media screen and (max-width: 480px) {
  .filter .board .faild {
    width: 18%;
    display: none;
  }
}
.filter .board .btn {
  width: 100%;
  text-align: center;
  margin: 20px 0 0 0;
}
.filter .board .btn a {
  display: inline-block;
  max-width: 145px;
  vertical-align: top;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: relative;
  top: 0;
  -webkit-filter: contrast(100%) drop-shadow(0px 0px 0px rgba(0, 88, 109, 0.48));
          filter: contrast(100%) drop-shadow(0px 0px 0px rgba(0, 88, 109, 0.48));
}
.filter .board .btn a:hover {
  top: -5px;
  -webkit-filter: contrast(150%) drop-shadow(0px 15px 30px rgba(0, 208, 255, 0.48));
          filter: contrast(150%) drop-shadow(0px 15px 30px rgba(0, 208, 255, 0.48));
}
@media screen and (max-width: 480px) {
  .filter .board .btn a {
    max-width: 90px;
  }
}

#index .element {
  width: auto;
  display: inline-block;
  right: 0px;
  top: 20px;
  padding: 0px;
  background: none;
}
@media screen and (max-width: 480px) {
  #index .element .bar {
    max-width: 85px;
  }
}
@media screen and (max-width: 1300px) {
  #index .element .name {
    display: block !important;
  }
}

.element {
  width: 100%;
  position: absolute;
  display: inline-block;
  right: 0;
  top: 0px;
  z-index: 10;
  padding: 50px 50px;
  background: url(../images/bg_element.webp);
  background-size: 100% 100%;
}
@media screen and (max-width: 1366px) {
  .element {
    top: -20px;
    padding: 40px 20px 40px 20px;
  }
}
@media screen and (max-width: 480px) {
  .element {
    top: 0px;
    padding: 20px 20px 20px 20px;
  }
}
.element div {
  float: left;
  margin-right: 10px;
}
.element .bar {
  width: 100%;
  max-width: 200px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .element .bar {
    max-width: 100px;
  }
}
@media screen and (max-width: 480px) {
  .element .bar {
    max-width: 65px;
    margin-right: 5px;
  }
}
.element .bar.name {
  max-width: 280px;
}
@media screen and (max-width: 1200px) {
  .element .bar.name {
    display: none;
  }
}
.element .bar.name input {
  font-size: 1.5rem;
}
.element .bar input {
  position: absolute;
  color: #fff;
  font-size: 1.5rem;
  top: 2px;
  text-align: center;
  width: 100%;
  height: 100%;
  right: 0px;
  background: transparent;
  border: none;
  padding: 0 20px;
  overflow: hidden;
}
@media screen and (max-width: 990px) {
  .element .bar input {
    font-size: 1rem;
  }
}
@media screen and (max-width: 480px) {
  .element .bar input {
    font-size: 1rem;
    top: 0px;
    right: -3px;
  }
}
.element .bar p {
  position: absolute;
  color: #fff;
  font-size: 1.5rem;
  top: 27px;
  text-align: center;
  width: 100%;
  height: 100%;
  right: -15px;
}
@media screen and (max-width: 768px) {
  .element .bar p {
    font-size: 1rem;
    right: -5px;
    top: 13px;
  }
}
@media screen and (max-width: 480px) {
  .element .bar p {
    font-size: 0.9rem;
    right: -5px;
    top: 5px;
  }
}
.element .btn {
  width: 150px;
  cursor: pointer;
  float: right;
}
.element .btn.active {
  -webkit-filter: contrast(30%);
}
@media screen and (max-width: 1200px) {
  .element .btn {
    display: none;
  }
}
.element .btn:hover {
  -webkit-filter: contrast(150%);
}

.game {
  background-size: cover;
  background-position: center;
}
.game:before, .game.clear:after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-size: cover;
  background-position: center;
  -webkit-animation: animate1 0.8s infinite;
          animation: animate1 0.8s infinite;
}
.game article {
  text-align: center;
}
.game section {
  position: absolute;
  left: 0;
  top: -15px;
  width: 100vw;
  height: 100%;
  text-align: center;
}
.game .bg img {
  height: 100%;
}
.game .menuBtn {
  width: 70px;
  position: absolute;
  right: 10px;
  top: 35px;
  display: none;
  z-index: 999;
  cursor: pointer;
}
.game .menuBtn:hover {
  -webkit-filter: contrast(150%);
}
@media screen and (max-width: 1200px) {
  .game .menuBtn {
    display: block;
    width: 50px;
    top: 40px;
    right: 40px;
  }
}
@media screen and (max-width: 768px) {
  .game .menuBtn {
    display: block;
    width: 50px;
    top: 30px;
    right: 40px;
  }
}
@media screen and (max-width: 480px) {
  .game .menuBtn {
    display: block;
    width: 50px;
    top: 10px;
    right: 15px;
  }
}
.game .menu {
  left: 0;
  top: -110vh;
  z-index: 998;
  width: 100%;
  height: calc(100% - 50px);
  margin-top: 50px;
  display: none;
  padding-top: 100px;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  background-image: url(../images/bg_element_mobile.webp);
  background-size: 100% 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 1300px) {
  .game .menu {
    display: block;
  }
}
.game .menu.active {
  top: 0vh;
}
.game .menu > div {
  text-align: center;
  clear: both;
  float: none;
}
.game .menu div {
  float: none;
}
.game .menu .btn {
  width: 100%;
  max-width: 200px;
  text-align: center;
  margin: 30px auto 0 auto;
  position: relative;
  display: block;
  float: none;
  clear: both;
}
.game .menu .btn:hover {
  -webkit-filter: contrast(150%);
}
@media screen and (max-width: 480px) {
  .game .menu .btn {
    max-width: 150px;
  }
}
.game .menu .name {
  width: 100%;
  max-width: 300px;
  text-align: center;
  position: relative;
  margin: auto;
  clear: both;
  float: none;
}
@media screen and (max-width: 1200px) {
  .game .menu .name {
    max-width: 250px;
    display: block !important;
  }
}
.game .menu .name input {
  position: absolute;
  color: #fff;
  font-size: 1.5rem;
  top: 2px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  left: 0px;
}
@media screen and (max-width: 1366px) {
  .game .menu .name input {
    font-size: 1.5rem;
    left: 0px;
  }
}
@media screen and (max-width: 480px) {
  .game .menu .name input {
    font-size: 1rem;
  }
}
.game .menu .name img {
  width: 100%;
  max-width: 100%;
  margin: auto;
}
.game .niceFont {
  display: inline-block;
  position: absolute;
  z-index: 99;
  left: 50%;
  top: 30%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 40%;
}
.game .niceFont img {
  display: none;
}
.game .niceFont img:not(first-child) {
  left: 0;
  top: 0;
  position: absolute;
}
@media screen and (max-width: 480px) {
  .game .niceFont {
    -webkit-transform: translate(-50%, -30%);
            transform: translate(-50%, -30%);
    width: 70%;
  }
}
.game .noFont {
  display: inline-block;
  position: absolute;
  z-index: 99;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 20%;
}
.game .noFont img {
  display: none;
}
.game .iconHeart, .game .iconPoint {
  display: inline-block;
  position: absolute;
  z-index: 90;
  left: 50%;
  top: 60%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px #fff;
  display: none;
}
@media screen and (max-width: 480px) {
  .game .iconHeart, .game .iconPoint {
    font-size: 1rem;
  }
}
.game .iconHeart img, .game .iconPoint img {
  width: 70px;
  display: inline-block;
  vertical-align: middle;
}
@media screen and (max-width: 480px) {
  .game .iconHeart img, .game .iconPoint img {
    width: 20px;
  }
}
.game .iconHeart.nice, .game .iconPoint.nice {
  -webkit-animation: icon 1s ease;
          animation: icon 1s ease;
}

#game3 {
  background-image: url(../images/game3/bg_game.webp);
}
@media screen and (max-width: 480px) {
  #game3 {
    background-position: bottom;
  }
}
#game3.bright {
  background-image: url(../images/game3/bg_bright.webp);
}
#game3:before, #game3.clear:after {
  background-image: url(../images/game3/bg_game.webp);
}
#game3.bright:before, #game3.bright.clear:after {
  background-image: url(../images/game3/bg_bright.webp);
}
#game3 .prompt, #game3 .prompt2 {
  position: absolute;
  width: 12%;
 left: 20%; */

  margin-top: 10%;
  z-index: 101;
  -webkit-animation: und 1s linear infinite alternate;
          animation: und 1s linear infinite alternate;
}
#game3 .prompt2 {
  width: 22%;
  left: auto;
  right: 20%;
  margin-top: 6%;
  display: none;
  z-index: 1000;
}
@media screen and (max-width: 768px) {
  #game3 .prompt2 {
    width: 50%;
    left: 35%;
    margin-top: 30%;
  }
}
@-webkit-keyframes ghost {
  0% {
    right: -5%;
    top: 25%;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  25% {
    right: 50%;
    top: 15%;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  49% {
    right: 100%;
    top: 25%;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  50% {
    right: 100%;
    top: 25%;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  75% {
    right: 50%;
    top: 15%;
  }
  99% {
    right: -5%;
    top: 25%;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  100% {
    right: -5%;
    top: 25%;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes ghost {
  0% {
    right: -5%;
    top: 25%;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  25% {
    right: 50%;
    top: 15%;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  49% {
    right: 100%;
    top: 25%;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  50% {
    right: 100%;
    top: 25%;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  75% {
    right: 50%;
    top: 15%;
  }
  99% {
    right: -5%;
    top: 25%;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  100% {
    right: -5%;
    top: 25%;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
#game3 .ghost {
  position: absolute;
  width: 15%;
  right: -5%;
  top: 25%;
  -webkit-animation: ghost 10s linear infinite;
          animation: ghost 10s linear infinite;
}
@media screen and (max-width: 480px) {
  #game3 .ghost {
    width: 25%;
    top: 50%;
  }
}
#game3 .board:before, #game3 .board.clear:after {
  left: 0%;
  top: 0%;
  width: 25%;
  height: 200px;
  background-image: url(../images/game3/item1.webp);
}
@media screen and (max-width: 480px) {
  #game3 .board:before, #game3 .board.clear:after {
    left: 0%;
    top: 0%;
    height: 120px;
  }
}
#game3 .board:after {
  right: 0%;
  bottom: 5%;
  width: 25%;
  height: 180px;
  background-image: url(../images/game3/item2.webp);
}
@media screen and (max-width: 990px) {
  #game3 .board:after {
    bottom: 0%;
    width: 25%;
    height: 80px;
  }
}
#game3 .build {
  width: 70%;
  position: absolute;
  left: 15%;
  bottom: 15%;
}
@media screen and (max-width: 480px) {
  #game3 .build {
    bottom: 30%;
  }
}
#game3 .itemBox {
  bottom: 0;
  left: 50%;
  position: absolute;
  width: 100%;
  max-width: 70%;
  height: auto;
  display: inline-block;
  margin: auto;
  text-align: center;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  overflow-y: hidden;
  overflow-x: visible;
  background-image: url(../images/game3/bg_inner_pc.webp);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1920px) {
  #game3 .itemBox {
    max-width: 90%;
  }
}
@media screen and (max-width: 1366px) {
  #game3 .itemBox {
    max-width: 90%;
  }
}
@media screen and (max-width: 768px) {
  #game3 .itemBox {
    max-width: 70%;
    background-position: bottom;
    background-image: url(../images/game3/bg_inner_mobile.webp);
  }
}
@media screen and (max-width: 580px) {
  #game3 .itemBox {
    max-width: 100%;
  }
}
#game3 .itemBox .mockup {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
}
#game3 .itemBox .peo {
  position: absolute;
}
#game3 .itemBox .ans {
  display: none;
}
#game3 .itemBox .bgInner {
  position: relative;
  bottom: 0;
  -webkit-filter: contrast(50%) grayscale(50%);
          filter: contrast(50%) grayscale(50%);
  margin: auto;
}
#game3 .itemBox .bgInner.bright {
  -webkit-filter: contrast(100%) grayscale(0%);
          filter: contrast(100%) grayscale(0%);
}
#game3 .itemBox .bgInner._pc {
  display: block;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .bgInner._pc {
    display: none;
  }
}
#game3 .itemBox .bgInner._mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .bgInner._mobile {
    display: block;
  }
}
#game3 .itemBox .item {
  position: absolute;
  cursor: pointer;
  -webkit-filter: contrast(50%) grayscale(50%);
          filter: contrast(50%) grayscale(50%);
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}
#game3 .itemBox .item .defult img:nth-child(1) {
  top: 0;
  left: 0;
}
#game3 .itemBox .item .defult img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#game3 .itemBox .item.bright {
  -webkit-filter: contrast(100%) grayscale(0%) drop-shadow(-10px 16px 20px white);
          filter: contrast(100%) grayscale(0%) drop-shadow(-10px 16px 20px white);
  z-index: 1;
}
#game3 .itemBox .item.bright:after {
  display: block;
}
#game3 .itemBox .item:before, #game3 .itemBox .item:after {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}
#game3 .itemBox .item:after {
  display: none;
}
#game3 .itemBox .item.wrong:after {
  left: 40%;
  top: 20%;
  width: 85px;
  height: 85px;
  content: "";
  position: absolute;
  background: url(../images/wrong.webp);
  background-size: contain;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item.wrong:after {
    width: 20px;
    height: 20px;
  }
}
#game3 .itemBox .item.click:before, #game3 .itemBox .item.click.clear:after {
  bottom: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  content: "";
  z-index: 99;
  position: absolute;
  background: url(../images/click.gif) no-repeat;
  background-size: contain;
}
#game3 .itemBox .item.correct .ans {
  display: block;
  opacity: 1;
  position: relative;
  -webkit-animation: man 1s linear infinite alternate;
          animation: man 1s linear infinite alternate;
}
#game3 .itemBox .item1 {
  left: 0.5%;
  bottom: 5.5%;
  width: 15%;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item1 {
    bottom: 8.5%;
    width: 31.5%;
    left: -2.5%;
  }
}
#game3 .itemBox .item1:before, #game3 .itemBox .item1.clear:after {
  width: 170%;
  height: 100%;
  top: 62%;
  left: 40%;
  background-image: url(../images/game3/p1line.webp);
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item1:before, #game3 .itemBox .item1.clear:after {
    top: 33%;
    left: 42%;
    width: 77%;
    height: 60%;
    background-image: url(../images/game3/p1lines.webp);
  }
}
#game3 .itemBox .item1.bright {
  -webkit-filter: contrast(100%) grayscale(0%) drop-shadow(16px 16px 20px white);
          filter: contrast(100%) grayscale(0%) drop-shadow(16px 16px 20px white);
}
#game3 .itemBox .item2 {
  left: 17.5%;
  bottom: 38.5%;
  width: 12.5%;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item2 {
    left: 70.5%;
    bottom: 57%;
    width: 25.5%;
  }
}
#game3 .itemBox .item2:before, #game3 .itemBox .item2.clear:after {
  width: 270%;
  height: 175%;
  top: 17%;
  left: 59%;
  background-image: url(../images/game3/p2line.webp);
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item2:before, #game3 .itemBox .item2.clear:after {
    height: 179%;
    top: 34%;
    left: -56%;
    background-image: url(../images/game3/p2lines.webp);
  }
}
#game3 .itemBox .item2:after {
  width: 120%;
  height: 60%;
  top: 60%;
  left: 64%;
  background-image: url(../images/game3/p2lineout.webp);
}
#game3 .itemBox .item2.bright:before, #game3 .itemBox .item2.bright.clear:after {
  display: none;
}
#game3 .itemBox .item3 {
  left: 25%;
  bottom: 2.5%;
  width: 12%;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item3 {
    left: 15%;
    bottom: 4.5%;
    width: 26%;
    background-image: url(../images/game3/p1lines.webp);
  }
}
#game3 .itemBox .item3:before, #game3 .itemBox .item3.clear:after {
  width: 31%;
  height: 160%;
  bottom: 8%;
  left: 81%;
  background-image: url(../images/game3/p3line.webp);
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item3:before, #game3 .itemBox .item3.clear:after {
    width: 132%;
    height: 160%;
    bottom: 19%;
    left: 61%;
    background-image: url(../images/game3/p3lines.webp);
  }
}
#game3 .itemBox .item4 {
  left: 49.5%;
  top: 26.5%;
  width: 14%;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item4 {
    left: 34.5%;
    top: 30.5%;
    width: 28%;
  }
}
#game3 .itemBox .item4:before, #game3 .itemBox .item4.clear:after {
  width: 85%;
  height: 300%;
  top: 56%;
  left: 29%;
  background-image: url(../images/game3/p4line.webp);
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item4:before, #game3 .itemBox .item4.clear:after {
    width: 105%;
    height: 197%;
    top: 17%;
    left: 32%;
    background-image: url(../images/game3/p4lines.webp);
  }
}
#game3 .itemBox .item4:after {
  width: 120%;
  height: 50%;
  bottom: -10%;
  left: 90%;
  background-image: url(../images/game3/p4lineout.webp);
}
#game3 .itemBox .item4.bright:before, #game3 .itemBox .item4.bright.clear:after {
  display: none;
}
#game3 .itemBox .item6 {
  right: 35%;
  bottom: 1%;
  width: 23%;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item6 {
    width: 41%;
    right: 21%;
    bottom: 3.5%;
  }
}
#game3 .itemBox .item6:before, #game3 .itemBox .item6.clear:after {
  width: 70%;
  height: 95%;
  top: -12%;
  left: 15%;
  background-image: url(../images/game3/p6line.webp);
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item6:before, #game3 .itemBox .item6.clear:after {
    width: 20%;
    height: 81%;
    top: -16%;
    left: 35%;
    background-image: url(../images/game3/p6lines.webp);
  }
}
#game3 .itemBox .item6:after {
  width: 120%;
  height: 50%;
  bottom: 10%;
  left: -20%;
  background-image: url(../images/game3/p6lineout.webp);
}
#game3 .itemBox .item6.bright:before, #game3 .itemBox .item6.bright.clear:after {
  display: none;
}
#game3 .itemBox .item9 {
  right: 10%;
  bottom: 24%;
  width: 10%;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item9 {
    right: 14%;
    bottom: 31%;
    width: 24%;
  }
}
#game3 .itemBox .item9:before, #game3 .itemBox .item9.clear:after {
  width: 270%;
  height: 110%;
  top: 8%;
  right: 44%;
  background-image: url(../images/game3/p9line.webp);
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item9:before, #game3 .itemBox .item9.clear:after {
    width: 140%;
    height: 91%;
    top: 38%;
    right: 48%;
    background-image: url(../images/game3/p9lines.webp);
  }
}
#game3 .itemBox .item12 {
  right: 1%;
  bottom: 0%;
  width: 9%;
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item12 {
    right: -2%;
    bottom: 14%;
    width: 21%;
  }
}
#game3 .itemBox .item12:before, #game3 .itemBox .item12.clear:after {
  width: 380%;
  height: 60%;
  top: 41%;
  right: 16%;
  background-image: url(../images/game3/p12line.webp);
}
@media screen and (max-width: 768px) {
  #game3 .itemBox .item12:before, #game3 .itemBox .item12.clear:after {
    width: 146%;
    height: 48%;
    top: 82%;
    right: 19%;
    background-image: url(../images/game3/p12lines.webp);
  }
}
#game3 .itemBox .item12:after {
  width: 120%;
  height: 20%;
  bottom: 0%;
  right: 50%;
  background-image: url(../images/game3/p12lineout.webp);
}
#game3 .itemBox .item12.bright:before, #game3 .itemBox .item12.bright.clear:after {
  display: none;
}
#game3 .qBox {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
}
#game3 .ask {
  position: absolute;
  padding: 5% 10%;
  background: url(../images/board.webp);
  background-size: 100% 100%;
  display: inline-block;
  z-index: 99;
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 20px;
  font-size: 1.5rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #game3 .ask {
    padding: 18% 10%;
    font-size: 1rem;
  }
}
#game3 .ask span {
  font-size: 2rem;
}
@media screen and (max-width: 480px) {
  #game3 .ask span {
    font-size: 1.5rem;
  }
}
#game3 .ask mark {
  color: #00FFB0;
  background: none;
  margin: 0 5px;
  font-size: 1.3rem;
  font-weight: normal;
}
#game3 .ask p {
  font-size: 1.25rem;
  margin-top: 15px;
  line-height: 1.7;
}
#game3 .ask .imgIn {
  position: absolute;
  width: 30%;
  left: 2%;
  bottom: 10%;
}
#game3 .ask .playSound {
  margin: 20px 0;
  cursor: pointer;
}
#game3 .ask .playSound:hover {
  -webkit-filter: contrast(150%);
}
#game3 .ask .playSound img {
  width: 50px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
#game3 .ask .playCover {
  position: absolute;
  width: 100%;
  height: 50%;
  display: none;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0);
}
#game3 .ask .find {
  width: 150px;
  margin-top: 30px;
  margin: 30px auto 0 auto;
  cursor: pointer;
}
#game3 .ask .find:hover {
  -webkit-filter: contrast(150%);
}
@media screen and (max-width: 480px) {
  #game3 .ask .find {
    width: 100px;
  }
}

@-webkit-keyframes icon {
  from {
    top: 60%;
    opacity: 1;
  }
  to {
    top: 30%;
    opacity: 0.8;
  }
}

@keyframes icon {
  from {
    top: 60%;
    opacity: 1;
  }
  to {
    top: 30%;
    opacity: 0.8;
  }
}

#captcha_image_audio_controls a{
  margin: 5px;
  width: 35px;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  #captcha_image_audio_controls{
      display: flex;
  }
  #captcha_image{
    width: 120px;
  }
}

.change_btn{
  margin: 5px;
  width: 35px;
  display: inline-block;
}

.change_btn img{
  max-width: 100%;
}