.btn-text-light span:before,
.btn-text-light span:after,
.score-item .advantage li:before,
.end-container .scene .gen-card .text:after,
.game-category-container .login-container .btn-stage.--multiple > div:after,
.game-category-container .game-menu .btn-stage.--multiple > div:after,
.game-stage-container .login-container .btn-stage.--multiple > div:after,
.game-stage-container .game-menu .btn-stage.--multiple > div:after,
.game-mission-container .login-container .btn-stage.--multiple > div:after,
.game-mission-container .game-menu .btn-stage.--multiple > div:after,
.input-mcq-container.--for-multi .option-container .btn:after,
.multi-billboard .chart span.score:before,
.ranking-item.--self li h5:before,
.ranking-item.--pre-advanced.--self li h5:before,
.ranking-item.--pre-downgrade.--self li h5:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  -webkit-mask-image: url("../images/iconset.svg?20250501");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity, background-color;
}
.icon-1:before {
  -webkit-mask-position: 0% 0;
}
.icon-2:before {
  -webkit-mask-position: 1.45% 0;
}
.icon-3:before {
  -webkit-mask-position: 2.9% 0;
}
.icon-4:before {
  -webkit-mask-position: 4.35% 0;
}
.icon-5:before {
  -webkit-mask-position: 5.8% 0;
}
.icon-6:before {
  -webkit-mask-position: 7.25% 0;
}
.icon-7:before {
  -webkit-mask-position: 8.7% 0;
}
.icon-8:before {
  -webkit-mask-position: 10.14% 0;
}
.icon-9:before {
  -webkit-mask-position: 11.59% 0;
}
.icon-10:before {
  -webkit-mask-position: 13.04% 0;
}
.icon-11:before {
  -webkit-mask-position: 14.49% 0;
}
.icon-12:before {
  -webkit-mask-position: 15.94% 0;
}
.icon-13:before {
  -webkit-mask-position: 17.39% 0;
}
.icon-14:before {
  -webkit-mask-position: 18.84% 0;
}
.icon-15:before {
  -webkit-mask-position: 20.29% 0;
}
.icon-16:before {
  -webkit-mask-position: 21.74% 0;
}
.icon-17:before {
  -webkit-mask-position: 23.19% 0;
}
.icon-18:before {
  -webkit-mask-position: 24.64% 0;
}
.icon-19:before {
  -webkit-mask-position: 26.09% 0;
}
.icon-20:before {
  -webkit-mask-position: 27.54% 0;
}
.icon-21:before {
  -webkit-mask-position: 28.99% 0;
}
.icon-22:before {
  -webkit-mask-position: 30.43% 0;
}
.icon-23:before {
  -webkit-mask-position: 31.88% 0;
}
.icon-24:before {
  -webkit-mask-position: 33.33% 0;
}
.icon-25:before {
  -webkit-mask-position: 34.78% 0;
}
.icon-26:before {
  -webkit-mask-position: 36.23% 0;
}
.icon-27:before {
  -webkit-mask-position: 37.68% 0;
}
.icon-28:before {
  -webkit-mask-position: 39.13% 0;
}
.icon-29:before {
  -webkit-mask-position: 40.58% 0;
}
.icon-30:before {
  -webkit-mask-position: 42.03% 0;
}
.icon-31:before {
  -webkit-mask-position: 43.48% 0;
}
.icon-32:before {
  -webkit-mask-position: 44.93% 0;
}
.icon-33:before {
  -webkit-mask-position: 46.38% 0;
}
.icon-34:before {
  -webkit-mask-position: 47.83% 0;
}
.icon-35:before {
  -webkit-mask-position: 49.28% 0;
}
.icon-36:before {
  -webkit-mask-position: 50.72% 0;
}
.icon-37:before {
  -webkit-mask-position: 52.17% 0;
}
.icon-38:before {
  -webkit-mask-position: 53.62% 0;
}
.icon-39:before {
  -webkit-mask-position: 55.07% 0;
}
.icon-40:before {
  -webkit-mask-position: 56.52% 0;
}
.icon-41:before {
  -webkit-mask-position: 57.97% 0;
}
.icon-42:before {
  -webkit-mask-position: 59.42% 0;
}
.icon-43:before {
  -webkit-mask-position: 60.87% 0;
}
.icon-44:before {
  -webkit-mask-position: 62.32% 0;
}
.icon-45:before {
  -webkit-mask-position: 63.77% 0;
}
.icon-46:before {
  -webkit-mask-position: 65.22% 0;
}
.icon-47:before {
  -webkit-mask-position: 66.67% 0;
}
.icon-48:before {
  -webkit-mask-position: 68.12% 0;
}
.icon-49:before {
  -webkit-mask-position: 69.57% 0;
}
.icon-50:before {
  -webkit-mask-position: 71.01% 0;
}
.icon-51:before {
  -webkit-mask-position: 72.46% 0;
}
.icon-52:before {
  -webkit-mask-position: 73.91% 0;
}
.icon-53:before {
  -webkit-mask-position: 75.36% 0;
}
.icon-54:before {
  -webkit-mask-position: 76.81% 0;
}
.icon-55:before {
  -webkit-mask-position: 78.26% 0;
}
.icon-56:before {
  -webkit-mask-position: 79.71% 0;
}
.icon-57:before {
  -webkit-mask-position: 81.16% 0;
}
.icon-58:before {
  -webkit-mask-position: 82.61% 0;
}
.icon-59:before {
  -webkit-mask-position: 84.06% 0;
}
.icon-60:before {
  -webkit-mask-position: 85.51% 0;
}
.icon-61:before {
  -webkit-mask-position: 86.96% 0;
}
.icon-62:before {
  -webkit-mask-position: 88.41% 0;
}
.icon-63:before {
  -webkit-mask-position: 89.86% 0;
}
.icon-64:before {
  -webkit-mask-position: 91.3% 0;
}
.icon-65:before {
  -webkit-mask-position: 92.75% 0;
}
.icon-66:before {
  -webkit-mask-position: 94.2% 0;
}
.icon-67:before {
  -webkit-mask-position: 95.65% 0;
}
.icon-68:before {
  -webkit-mask-position: 97.1% 0;
}
.icon-69:before {
  -webkit-mask-position: 98.55% 0;
}
.icon-70:before {
  -webkit-mask-position: 100% 0;
}
.icon {
  font-size: 0;
  display: block;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform;
}
.icon:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  -webkit-mask-image: url("../images/iconset.svg");
  -webkit-mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
  background-color: #000;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: background-color;
  width: 30px;
  height: 30px;
}
.icon.--white:before {
  background-color: #fff;
}
.icon.--small:before {
  width: 20px;
  height: 20px;
}
.icon-before:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-image: url("../images/layout/iconset.svg");
}
.icon-after:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-image: url("../images/layout/iconset.svg");
}
.game-category-container .login-container .form-item,
.game-stage-container .login-container .form-item,
.game-mission-container .login-container .form-item {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}
@media (min-width: 740px) {
  .game-category-container .login-container .form-item,
  .game-stage-container .login-container .form-item,
  .game-mission-container .login-container .form-item {
    margin-bottom: 14px;
  }
}
.game-category-container .login-container .form-item .icon,
.game-stage-container .login-container .form-item .icon,
.game-mission-container .login-container .form-item .icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0.3;
}
.game-category-container .login-container .form-item .icon:before,
.game-stage-container .login-container .form-item .icon:before,
.game-mission-container .login-container .form-item .icon:before {
  background-color: #bca46a;
}
.game-category-container .login-container .form-item:after,
.game-stage-container .login-container .form-item:after,
.game-mission-container .login-container .form-item:after {
  content: "";
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  position: absolute;
  left: 3px;
  top: 3px;
  border: 1px solid rgba(202, 166, 81, 0.2);
  border-radius: 9.6px;
  box-sizing: border-box;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
}
@media (min-width: 980px) {
  .game-category-container .login-container .form-item:after,
  .game-stage-container .login-container .form-item:after,
  .game-mission-container .login-container .form-item:after {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    left: 5px;
    top: 5px;
  }
}
.game-category-container .login-container input,
.game-stage-container .login-container input,
.game-mission-container .login-container input {
  width: 100%;
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  font-size: 1.125em;
  height: 60px;
  color: #f6db9c;
  padding: 1px 1em 0;
  background-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.game-category-container .login-container input:focus,
.game-stage-container .login-container input:focus,
.game-mission-container .login-container input:focus {
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.game-category-container .login-container input:focus + .icon,
.game-stage-container .login-container input:focus + .icon,
.game-mission-container .login-container input:focus + .icon {
  opacity: 0.9;
}
.game-category-container .login-container input::placeholder,
.game-stage-container .login-container input::placeholder,
.game-mission-container .login-container input::placeholder {
  color: #bca46a;
  opacity: 1;
}
.game-category-container .login-container input:-ms-input-placeholder,
.game-stage-container .login-container input:-ms-input-placeholder,
.game-mission-container .login-container input:-ms-input-placeholder {
  color: #bca46a;
}
.game-category-container .login-container input::-ms-input-placeholder,
.game-stage-container .login-container input::-ms-input-placeholder,
.game-mission-container .login-container input::-ms-input-placeholder {
  color: #bca46a;
}
.game-home-container a,
.game-home-container button {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  font-size: clamp(20px, 3.5vh, 48px);
  font-weight: normal;
  color: #fff;
  text-align: center;
  line-height: 1;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
  padding: 0.25em 0 0.4em;
  position: relative;
  border-radius: 5px;
  margin-bottom: 0.2em;
  isolation: isolate;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.game-home-container a span,
.game-home-container button span {
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: color, text-shadow;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
}
.game-home-container a:before,
.game-home-container button:before,
.game-home-container a:after,
.game-home-container button:after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 3px;
}
.game-home-container a:before,
.game-home-container button:before {
  background-color: #fff;
  transform-origin: left center;
  transform: scaleX(0);
  margin-right: 0.5em;
  background: linear-gradient(to right, #9cdbf6, rgba(156, 219, 246, 0));
}
.game-home-container a:after,
.game-home-container button:after {
  background-color: #fff;
  transform-origin: right center;
  transform: scaleX(0);
  margin-left: 0.5em;
  background: linear-gradient(to left, #9cdbf6, rgba(156, 219, 246, 0));
}
@media (min-width: 740px) {
  .game-home-container a,
  .game-home-container button {
    font-size: clamp(26px, 4vh, 72px);
  }
}
@media (hover: hover) {
  .game-home-container a:hover span,
  .game-home-container button:hover span {
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
      #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  }
  .game-home-container a:hover:before,
  .game-home-container button:hover:before {
    opacity: 1;
    transform: none;
  }
  .game-home-container a:hover:after,
  .game-home-container button:hover:after {
    opacity: 1;
    transform: none;
  }
}
.game-home-container a.start,
.game-home-container button.start {
  color: #9ed0ee;
}
.game-home-container a.--disabled,
.game-home-container button.--disabled {
  filter: grayscale(1);
  cursor: not-allowed;
}
.game-home-container a.--disabled span,
.game-home-container button.--disabled span {
  color: #999;
}
.game-home-container a.--disabled:before,
.game-home-container button.--disabled:before {
  opacity: 0.5;
}
.game-home-container a.--disabled:after,
.game-home-container button.--disabled:after {
  opacity: 0.5;
}
@media (hover: hover) {
  .game-home-container a.--disabled:hover span,
  .game-home-container button.--disabled:hover span {
    color: #999;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
  }
}
.highlight,
.end-container.--lengthy .memo:before,
.multi-result-item .result-item:before,
.multi-result-item .result-item:after,
.mission-item.--finish .text-holder:after,
.multi-billboard .countdown:after,
.game-multi-waiting .item:after,
.--story-mode .chat-item .chat-item-container:after,
.game-story-area .chat-item .chat-item-container:after {
  display: block;
  width: 120%;
  height: 20px;
  position: absolute;
  background: url("../images/highlight.png") no-repeat center center;
  background-size: auto 100%;
  transform: translateY(-50%);
  z-index: 1;
  animation: highlightscale 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.write-billboard .count-board,
.mail-card .count-board {
  font-size: 1.375em;
  font-family: "Quantico", sans-serif;
  letter-spacing: 1px;
  background-color: transparent;
  min-width: 150px;
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(19, 37, 43, 0.9),
    rgba(19, 37, 43, 0.5)
  );
}
@media (min-width: 0) and (max-width: 979.9px) {
  .write-billboard .count-board,
  .mail-card .count-board {
    height: 36px;
  }
}
@media (min-width: 980px) {
  .write-billboard .count-board,
  .mail-card .count-board {
    height: clamp(45px, 3vw, 60px);
    font-size: clamp(24px, 2.45vw, 40px);
  }
}
.write-billboard .count-board:after,
.mail-card .count-board:after,
.write-billboard .count-board:before,
.mail-card .count-board:before {
  -webkit-mask-image: initial;
  box-sizing: border-box;
  content: "";
  display: block;
  position: absolute;
  opacity: 1;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-sizing: border-box;
  background-color: initial;
}
.write-billboard .count-board:after,
.mail-card .count-board:after {
  width: calc(100% - 4px);
  height: 50%;
  left: 2px;
  top: 2px;
  border-radius: 2px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(47, 193, 251, 0.5),
    rgba(47, 193, 251, 0)
  );
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
.write-billboard .count-board:before,
.mail-card .count-board:before {
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  left: -5px;
  top: -5px;
  border-radius: 5px;
  z-index: 1;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  border: 2px solid #cbe1e9;
  backdrop-filter: blur(10px);
}
.write-billboard .count-board .wrapper,
.mail-card .count-board .wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  position: relative;
  z-index: 6;
}
.write-billboard .count-board .wrapper:before,
.mail-card .count-board .wrapper:before {
  background-color: transparent;
  display: none;
}
.write-billboard .count-board .count,
.mail-card .count-board .count {
  margin-left: 0;
  color: #f4feff;
  margin-top: 2px;
  justify-content: center;
  line-height: 1;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
}
.game-mission-container .fn > a,
.game-intro-area .fn > a,
.game-mission-container .fn > button,
.game-intro-area .fn > button {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #d9fff9;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  isolation: isolate;
}
@media screen and (orientation: portrait) and (max-height: 680px) {
  .game-mission-container .fn > a,
  .game-intro-area .fn > a,
  .game-mission-container .fn > button,
  .game-intro-area .fn > button {
    height: 32px;
  }
}
.game-mission-container .fn > a span,
.game-intro-area .fn > a span,
.game-mission-container .fn > button span,
.game-intro-area .fn > button span {
  white-space: nowrap;
  padding: 0 15px 0 0;
  display: block;
  font-size: 0.875em;
}
@media (min-width: 740px) {
  .game-mission-container .fn > a span,
  .game-intro-area .fn > a span,
  .game-mission-container .fn > button span,
  .game-intro-area .fn > button span {
    padding: 0 20px 0 5px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container .fn > a span,
  .game-intro-area .fn > a span,
  .game-mission-container .fn > button span,
  .game-intro-area .fn > button span {
    padding: 0 20px 0 5px;
    font-size: 1.125em;
  }
}
@media (min-width: 1700px) {
  .game-mission-container .fn > a span,
  .game-intro-area .fn > a span,
  .game-mission-container .fn > button span,
  .game-intro-area .fn > button span {
    padding: 0 25px 0 5px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container .fn > a,
  .game-intro-area .fn > a,
  .game-mission-container .fn > button,
  .game-intro-area .fn > button {
    height: 60px;
  }
}
.game-mission-container .fn > a:before,
.game-intro-area .fn > a:before,
.game-mission-container .fn > button:before,
.game-intro-area .fn > button:before {
  content: "";
  width: 90%;
  height: 72%;
  position: absolute;
  z-index: -1;
  left: 10%;
  top: 14%;
  border: 1px solid #b0f7ff;
  position: absolute;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-sizing: border-box;
  opacity: 0.2;
  border-radius: 30px;
  background: linear-gradient(
    to bottom,
    rgba(216, 246, 255, 0.8),
    rgba(92, 143, 158, 0.7),
    rgba(106, 166, 186, 0.8)
  );
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-mission-container .fn > a:before,
  .game-intro-area .fn > a:before,
  .game-mission-container .fn > button:before,
  .game-intro-area .fn > button:before {
    height: 100%;
    top: 0;
  }
}
.game-mission-container .fn > a + a,
.game-intro-area .fn > a + a,
.game-mission-container .fn > a + button,
.game-intro-area .fn > a + button,
.game-mission-container .fn > button + a,
.game-intro-area .fn > button + a,
.game-mission-container .fn > button + button,
.game-intro-area .fn > button + button {
  margin-left: 20px;
}
@media (min-width: 740px) {
  .game-mission-container .fn > a + a,
  .game-intro-area .fn > a + a,
  .game-mission-container .fn > a + button,
  .game-intro-area .fn > a + button,
  .game-mission-container .fn > button + a,
  .game-intro-area .fn > button + a,
  .game-mission-container .fn > button + button,
  .game-intro-area .fn > button + button {
    margin-left: 30px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container .fn > a + a,
  .game-intro-area .fn > a + a,
  .game-mission-container .fn > a + button,
  .game-intro-area .fn > a + button,
  .game-mission-container .fn > button + a,
  .game-intro-area .fn > button + a,
  .game-mission-container .fn > button + button,
  .game-intro-area .fn > button + button {
    margin-left: 40px;
  }
}
.game-mission-container .fn > a .img,
.game-intro-area .fn > a .img,
.game-mission-container .fn > button .img,
.game-intro-area .fn > button .img {
  width: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    filter 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0.9;
  filter: brightness(1.1);
}
@media screen and (orientation: portrait) and (max-height: 660px) {
  .game-mission-container .fn > a .img,
  .game-intro-area .fn > a .img,
  .game-mission-container .fn > button .img,
  .game-intro-area .fn > button .img {
    height: 45px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container .fn > a .img,
  .game-intro-area .fn > a .img,
  .game-mission-container .fn > button .img,
  .game-intro-area .fn > button .img {
    width: 72px;
  }
}
.game-mission-container .fn > a .img.--book,
.game-intro-area .fn > a .img.--book,
.game-mission-container .fn > button .img.--book,
.game-intro-area .fn > button .img.--book {
  background-image: url("../images/item/icon-book.png");
}
.game-mission-container .fn > a .img.--video,
.game-intro-area .fn > a .img.--video,
.game-mission-container .fn > button .img.--video,
.game-intro-area .fn > button .img.--video {
  background-image: url("../images/item/icon-video.png");
  margin-right: 10px;
}
.game-mission-container .fn > a .img:before,
.game-intro-area .fn > a .img:before,
.game-mission-container .fn > button .img:before,
.game-intro-area .fn > button .img:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container .fn > a.--small,
  .game-intro-area .fn > a.--small,
  .game-mission-container .fn > button.--small,
  .game-intro-area .fn > button.--small {
    height: 50px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container .fn > a.--small span,
  .game-intro-area .fn > a.--small span,
  .game-mission-container .fn > button.--small span,
  .game-intro-area .fn > button.--small span {
    padding: 0 15px 0 5px;
    font-size: 1em;
  }
}
@media (min-width: 1700px) {
  .game-mission-container .fn > a.--small span,
  .game-intro-area .fn > a.--small span,
  .game-mission-container .fn > button.--small span,
  .game-intro-area .fn > button.--small span {
    padding: 0 20px 0 5px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container .fn > a.--small .img,
  .game-intro-area .fn > a.--small .img,
  .game-mission-container .fn > button.--small .img,
  .game-intro-area .fn > button.--small .img {
    width: 60px;
  }
}
@media (hover: hover) {
  .game-mission-container .fn > a:hover span,
  .game-intro-area .fn > a:hover span,
  .game-mission-container .fn > button:hover span,
  .game-intro-area .fn > button:hover span {
    color: #fff;
  }
  .game-mission-container .fn > a:hover:before,
  .game-intro-area .fn > a:hover:before,
  .game-mission-container .fn > button:hover:before,
  .game-intro-area .fn > button:hover:before {
    border: 1px solid #fff;
    box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
    opacity: 1;
  }
  .game-mission-container .fn > a:hover .img,
  .game-intro-area .fn > a:hover .img,
  .game-mission-container .fn > button:hover .img,
  .game-intro-area .fn > button:hover .img {
    transform: scale(1.375);
    opacity: 1;
    filter: brightness(1);
  }
}
.btn {
  height: 36px;
  border-radius: 8px;
  background-color: #fff;
  background: linear-gradient(to bottom, rgba(228, 255, 239, 0.5), #b9ddc8);
  background: linear-gradient(to bottom, #0b4a7f, #0b65af);
  text-decoration: none;
  color: #fff;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  display: inline-flex;
  width: max-content;
  font-size: 1.0625em;
  overflow: hidden;
  font-weight: bold;
  align-items: center;
  min-width: 60px;
  justify-content: center;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity, background-color, color, box-shadow;
  padding-left: 1em;
  padding-right: 1em;
  position: relative;
  padding-bottom: 1px;
  border: none;
  outline: none;
}
.btn:before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  border-radius: 5px 5px 2px 2px;
  left: 0;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(47, 193, 251, 0.8),
    rgba(47, 193, 251, 0.2)
  );
  pointer-events: none;
}
@media (min-width: 1380px) {
  .btn:before {
    border-radius: 6px 6px 2px 2px;
  }
}
@media (min-width: 1380px) {
  .btn {
    height: 40px;
  }
}
.btn + .btn {
  margin-left: 1em;
}
.btn span {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
@media (min-width: 1700px) {
  .btn span {
    padding-left: 1em;
    padding-right: 1em;
  }
}
.btn select {
  font-size: 16px;
  font-weight: bold;
}
@media (min-width: 0) and (max-width: 575.9px) {
  .btn select {
    padding: 0 1em 0 0.25em;
  }
}
@media (min-width: 1380px) {
  .btn select {
    font-size: 19px;
  }
}
.btn .icon {
  pointer-events: none;
}
.btn .icon:before {
  width: 28px;
  height: 28px;
  background-color: #fff;
}
.btn .icon + span,
.btn .icon + div {
  padding-left: 0;
  padding-right: 0;
  margin-left: 5px;
}
.btn.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .btn {
    border-radius: 6px;
    border: none;
    height: 32px;
    font-size: 16px;
    padding-left: 0.25em;
    padding-right: 0.25em;
    min-width: 55px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .btn span {
    padding-left: 0;
    padding-right: 0;
  }
  .btn .icon:before {
    width: 20px;
    height: 20px;
  }
  .btn + .btn {
    margin-left: 6px;
  }
}
@media (min-width: 0) and (max-width: 575.9px) {
  .btn {
    min-width: 48px;
  }
}
.btn.--small select {
  height: 100%;
}
.btn.--small .icon:before {
  width: 24px;
  height: 24px;
}
.btn.--small .play .icon:before,
.btn.--small .pause .icon:before {
  width: 16px;
  height: 16px;
}
@media (min-width: 980px) {
  .btn.--small {
    height: 32px;
    font-size: 0.9375em;
  }
  .btn.--small select {
    font-size: 1em;
  }
  .btn.--small .play,
  .btn.--small .pause {
    height: 32px;
  }
}
.btn.--inline {
  height: 26px;
  padding-left: 0.5em;
  padding-right: 0.5em;
  min-width: 50px;
  font-size: 0.875em;
  border-radius: 30px;
}
.btn.--inline .icon:before {
  width: 18px;
  height: 18px;
}
@media (min-width: 980px) {
  .btn.--inline {
    height: 28px;
    font-size: 0.9375em;
  }
}
.btn.--large {
  height: 42px;
  padding-left: 1em;
  padding-right: 1em;
  letter-spacing: 1px;
  font-size: 1.1225em;
}
@media (min-width: 740px) {
  .btn.--large {
    height: 48px;
    font-size: 1.25em;
  }
}
@media (min-width: 1700px) {
  .btn.--large {
    height: 56px;
    font-size: 1.375em;
  }
}
.btn.--text {
  background: none;
  padding: 0;
  box-shadow: none;
}
.btn.--text:before {
  display: none;
}
.btn.--active {
  background: linear-gradient(to bottom, #0b4a7f, #074171);
}
.btn.--active span {
  color: #fff;
}
.btn.--active .icon:before {
  background-color: #fff;
}
.btn.--dark {
  margin: 2px 3px;
  background: none;
  border: 1px solid #2fc1fb;
  height: 26px;
  border-radius: 15px;
  padding: 0 1em;
  font-size: 0.875em;
  font-family: "apparat", sans-serif;
  line-height: 1;
  font-weight: normal;
}
.btn.--dark:before {
  border-radius: 2px;
}
.btn.--round {
  border-radius: 30px;
}
.btn.--white {
  background: linear-gradient(to bottom, #b8b8b8, #fff);
  color: #083860;
  box-shadow: rgba(20, 21, 21, 0.4) 0px 0px 16px;
}
.btn.--white .icon:before {
  background-color: #083860;
}
.btn.--white span,
.btn.--white select {
  color: #083860;
}
.btn.--white:before {
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}
@media (hover: none) {
  .btn:active {
    transition: transform 0.05s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateY(2px);
  }
}
@media (hover: hover) {
  .btn:hover {
    background: linear-gradient(to bottom, #0b4a7f, #074171);
    box-shadow: rgba(136, 219, 255, 0.7) 0px 0px 16px;
  }
  .btn:hover .icon {
    transform: scale(1.125);
  }
  .btn:hover .icon:before {
    background-color: #fff;
    transition: none;
  }
  .btn:hover span {
    color: #fff;
  }
  .btn:hover.--white {
    background: linear-gradient(to bottom, #d3d3d3, #fff);
    box-shadow: rgba(20, 21, 21, 0.7) 0px 0px 16px;
    color: #005cb9;
    background: linear-gradient(to bottom, #b9cdda, #f5fbff);
  }
  .btn:hover.--white .icon:before {
    background-color: #005cb9;
  }
  .btn:hover.--white .play span,
  .btn:hover.--white select,
  .btn:hover.--white span {
    color: #005cb9;
  }
  .btn:hover.--text {
    background: none;
    box-shadow: none;
  }
  .btn:hover.--text:before {
    display: none;
  }
  .btn:active {
    transition: transform 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateY(2px);
    background: linear-gradient(to bottom, #0b4a7f, #074171);
  }
  .btn:active .icon:before {
    background-color: #fff;
    transition: none;
  }
  .btn:active span {
    color: #fff;
  }
}
.btn-text {
  color: #b0f7ff;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.btn-text span {
  line-height: 1;
}
.btn-text .icon {
  margin-left: 8px;
}
.btn-text.--white {
  color: #fff;
}
.btn-text.--white .icon:before {
  background-color: #fff;
}
select {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  background: url("../images/select.svg") right 8px center no-repeat;
  background-size: auto 6px;
  padding: 0 1.5em 0 0.75em;
}
@media (min-width: 0) and (max-width: 739.9px) {
  select {
    background: url("../images/select.svg") right 4px center no-repeat;
  }
}
.btn-multi-play {
  align-items: stretch;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.btn-multi-play select {
  padding: 0 15px 0 5px;
}
.btn-multi-play select option {
  color: #000;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .btn-multi-play select {
    font-size: 1em;
  }
}
@media (min-width: 740px) {
  .btn-multi-play select {
    padding: 0 1.25em 0 0.75em;
  }
}
.btn-multi-play .play,
.btn-multi-play .pause {
  display: flex;
  align-items: center;
  padding: 0 0.5em;
  background-color: transparent;
  color: #083860;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  flex-shrink: 0;
  cursor: pointer;
  height: 32px;
}
@media (min-width: 740px) {
  .btn-multi-play .play,
  .btn-multi-play .pause {
    padding: 0 1em;
    height: 36px;
  }
}
@media (min-width: 1380px) {
  .btn-multi-play .play,
  .btn-multi-play .pause {
    height: 40px;
  }
}
.btn-multi-play .play .icon:before,
.btn-multi-play .pause .icon:before {
  background-color: #083860;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .btn-multi-play .play .icon:before,
  .btn-multi-play .pause .icon:before {
    width: 12px;
    height: 12px;
  }
}
@media (hover: hover) {
  .btn-multi-play .play:hover span,
  .btn-multi-play .pause:hover span {
    color: #083860;
  }
}
.btn-multi-play span {
  padding-left: 0;
  padding-right: 0;
}
.btn-multi-play .icon:before {
  width: 18px;
  height: 18px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .btn-multi-play .icon:before {
    width: 16px;
    height: 16px;
  }
}
.btn-multi-play .icon + span {
  margin-top: -2px;
}
.btn-multi-play .pause {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b81515;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: #8e0a0a;
  color: #fff;
}
.btn-multi-play .pause span {
  color: #fff;
}
.btn-multi-play .pause .icon:before {
  background-color: #fff;
}
@media (hover: hover) {
  .btn-multi-play .pause:hover {
    background-color: #980e0e;
    color: #fff;
  }
  .btn-multi-play .pause:hover span {
    color: #fff;
  }
  .btn-multi-play .pause:hover .icon:before {
    background-color: #fff;
  }
}
.btn-multi-play .audio-ctrl {
  position: relative;
}
@media (min-width: 0) and (max-width: 575.9px) {
  .btn-multi-play .audio-ctrl span {
    display: none;
  }
}
.btn-multi-play .audio-ctrl.--active .play {
  opacity: 0;
  pointer-events: none;
}
.btn-multi-play .audio-ctrl.--active .pause {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: hover) {
  .btn-multi-play:hover .pause span {
    color: #fff;
  }
  .btn-multi-play:hover .pause .icon:before {
    background-color: #fff;
  }
}
.btn-voice-change {
  padding-left: 0;
  padding-right: 0;
  position: relative;
}
.btn-voice-change .icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.btn-voice-change select {
  padding-right: 25px;
  padding-left: 42px;
}
@media (hover: hover) {
  .btn-voice-change:hover .icon {
    transform: scale(1.125) translateY(-50%);
  }
}
.btn-text-light {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-align: center;
  overflow: visible;
  box-shadow: initial;
  width: 100%;
}
.btn-text-light span {
  display: flex;
  align-items: center;
  width: max-content;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  font-weight: normal;
  font-size: 22px;
}
.btn-text-light span:before,
.btn-text-light span:after {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 53.62% 0;
  display: block;
  width: 1em;
  height: 1em;
  background-color: #b0f7ff;
  opacity: 0.6;
  margin-top: 1px;
  transition: background-color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn-text-light span:before {
  transform: rotate(180deg);
  animation: arrow-left 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.btn-text-light span:after {
  animation: arrow 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@media (min-width: 980px) {
  .btn-text-light span {
    font-size: clamp(20px, 2.75vh, 36px);
  }
}
.btn-text-light:before,
.btn-text-light:after {
  content: "";
  display: block;
  width: initial;
  height: 1px;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 3px;
  flex: 1;
  position: static;
}
.btn-text-light:before {
  background-color: #fff;
  transform-origin: left center;
  transform: scaleX(0);
  margin-right: 0.5em;
  background: linear-gradient(to right, #9cdbf6, rgba(156, 219, 246, 0));
}
.btn-text-light:after {
  background-color: #fff;
  transform-origin: right center;
  transform: scaleX(0);
  margin-left: 0.5em;
  background: linear-gradient(to left, #9cdbf6, rgba(156, 219, 246, 0));
}
.btn-text-light.--disabled {
  filter: grayscale(1);
  opacity: 0.5;
  pointer-events: none;
}
.btn-text-light.--disabled span:before {
  animation: none;
  opacity: 0;
}
.btn-text-light.--disabled span:after {
  animation: none;
  opacity: 0;
}
@media (hover: none) {
  .btn-text-light {
    background: initial;
  }
  .btn-text-light:active {
    box-shadow: initial;
    background: initial;
  }
  .btn-text-light:active span {
    color: #fff;
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
      #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  }
  .btn-text-light:active span:before,
  .btn-text-light:active span:after {
    -webkit-mask-size: auto 100%;
    -webkit-mask-position: 55.07% 0;
    opacity: 0;
    animation: none;
  }
  .btn-text-light:active:before {
    transform: none;
  }
  .btn-text-light:active:after {
    transform: none;
  }
}
@media (hover: hover) {
  .btn-text-light:hover {
    box-shadow: initial;
  }
  .btn-text-light:hover span {
    color: #fff;
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
      #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  }
  .btn-text-light:hover span:before,
  .btn-text-light:hover span:after {
    -webkit-mask-size: auto 100%;
    -webkit-mask-position: 55.07% 0;
    opacity: 0;
    animation: none;
  }
  .btn-text-light:hover:before {
    transform: none;
  }
  .btn-text-light:hover:after {
    transform: none;
  }
}
@keyframes arrow {
  0% {
    transform: translateX(20px) scale(1);
    opacity: 0;
  }
  40% {
    transform: translateX(8px) scale(1.125);
    opacity: 0.5;
  }
  60% {
    transform: translateX(8px) scale(1.125);
    opacity: 0.5;
  }
  100% {
    transform: translateX(20px) scale(1);
    opacity: 0;
  }
}
@keyframes arrow-left {
  0% {
    transform: rotate(180deg) translateX(20px) scale(1);
    opacity: 0;
  }
  40% {
    transform: rotate(180deg) translateX(8px) scale(1.125);
    opacity: 0.5;
  }
  60% {
    transform: rotate(180deg) translateX(8px) scale(1.125);
    opacity: 0.5;
  }
  100% {
    transform: rotate(180deg) translateX(20px) scale(1);
    opacity: 0;
  }
}
.btn-system {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  display: inline-flex;
  background: transparent;
  position: relative;
  overflow: visible;
  height: max-content;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: max-content;
  margin: 10px;
  font-family: "Quantico", "Noto Sans TC", "PingFang", "PingFangTC",
    "Microsoft JhengHei", Helvetica, Arial, sans-serif;
  font-size: 1em;
  isolation: isolate;
  background-color: rgba(5, 22, 35, 0.2);
  transition-property: color, background-color;
  border: none;
  padding: 0;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .btn-system {
    font-size: 1.125em;
  }
}
.btn-system .icon {
  margin: -1px 4px 0;
}
.btn-system .icon:before {
  background-color: #b0f7ff;
  width: 20px;
  height: 20px;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .btn-system .icon:before {
    width: 24px;
    height: 24px;
  }
}
.btn-system span {
  display: flex;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
  line-height: 1.125em;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: color, background-color, text-shadow;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: max-content;
  height: 38px;
  letter-spacing: 1px;
  padding-left: 1em;
  padding-right: 1em;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  position: relative;
  isolation: isolate;
  background: linear-gradient(
    to bottom,
    rgba(176, 247, 255, 0),
    rgba(176, 247, 255, 0.1),
    rgba(176, 247, 255, 0)
  );
}
.btn-system span:before,
.btn-system span:after {
  content: "";
  display: block;
  width: calc(50% + 0.1px);
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(176, 247, 255, 0.8),
    rgba(176, 247, 255, 0.2) 50%,
    rgba(176, 247, 255, 0.5) 100%
  );
  position: absolute;
  top: 0;
  box-sizing: border-box;
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
    clip-path 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: -1;
}
.btn-system span:before {
  left: 0;
  clip-path: inset(100% 0 0 0);
}
.btn-system span:after {
  right: 0;
  clip-path: inset(0% 0% 100% 0%);
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .btn-system span {
    height: 48px;
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}
.btn-system:before,
.btn-system:after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
  border: 2px solid rgba(176, 247, 255, 0.8);
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity, border-color, clip-path, box-shadow;
}
.btn-system:before {
  left: 0;
  border-right: none;
  transform-origin: left center;
  clip-path: inset(0% calc(100% - 10px) 0% 0%);
}
.btn-system:after {
  right: 0;
  border-left: none;
  transform-origin: right center;
  clip-path: inset(0% 0% 0% calc(100% - 10px));
}
@media (min-width: 740px) {
  .btn-system.--large {
    font-size: 1.125em;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .btn-system.--large {
    font-size: 1.5em;
    margin: 10px 20px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .btn-system.--large .icon:before {
    width: 30px;
    height: 30px;
  }
}
@media (min-width: 740px) {
  .btn-system.--large span {
    padding-left: 1.5em;
    padding-right: 1.5em;
    height: 48px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .btn-system.--large span {
    height: 60px;
  }
}
.btn-system.--disabled,
.btn-system.--locked {
  cursor: not-allowed;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.2)
  );
  filter: grayscale(1);
}
.btn-system.--disabled:before,
.btn-system.--disabled:after,
.btn-system.--locked:before,
.btn-system.--locked:after {
  border-color: #666;
  opacity: 0.6;
}
.btn-system.--disabled span,
.btn-system.--locked span {
  color: #999;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
}
.btn-system.--disabled span:before,
.btn-system.--disabled span:after,
.btn-system.--locked span:before,
.btn-system.--locked span:after {
  opacity: 0.4;
}
.btn-system:active {
  transform: translateY(2px);
}
@media (hover: hover) {
  .btn-system:hover:before,
  .btn-system:hover:after {
    clip-path: inset(0 0 0 0);
    border-color: #b0f7ff;
    transform: none;
  }
  .btn-system:hover .icon:before {
    background-color: #fff;
  }
  .btn-system:hover span {
    text-shadow: initial;
  }
  .btn-system:hover span:before,
  .btn-system:hover span:after {
    transition-delay: 0.25s;
    clip-path: inset(0 0 0 0);
  }
}
@media (hover: none) {
  .btn-system:active:before,
  .btn-system:active:after {
    clip-path: inset(0 0 0 0);
    border-color: #b0f7ff;
  }
  .btn-system:active span {
    text-shadow: initial;
  }
  .btn-system:active span:before,
  .btn-system:active span:after {
    transition-delay: 0.25s;
    clip-path: inset(0 0 0 0);
  }
}
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,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
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,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.ff-en {
  font-family: "apparat", sans-serif;
}
.fz-A {
  font-weight: bold;
  line-height: 1.05em;
  display: block;
  font-size: 2em;
}
@media (min-width: 740px) {
  .fz-A {
    font-size: 3em;
  }
}
@media (min-width: 980px) {
  .fz-A {
    line-height: 1.1em;
    font-size: clamp(22px, 6.6vh, 96px);
  }
}
.fz-B {
  font-weight: bold;
  line-height: 1.05em;
  display: block;
  font-size: 1.75em;
}
@media (min-width: 740px) {
  .fz-B {
    font-size: 2em;
  }
}
@media (min-width: 980px) {
  .fz-B {
    line-height: 1.1em;
    font-size: clamp(22px, 3.6vh, 72px);
  }
}
.edit .fz-C,
.fz-C {
  font-size: 1.125em;
  padding: 0;
  margin: 0;
  display: block;
  padding-bottom: 0.5em;
  font-family: "Noto Sans TC", sans-serif;
}
@media (min-width: 1380px) {
  .edit .fz-C,
  .fz-C {
    font-size: 1.25em;
  }
}
.light {
  font-weight: 300;
}
.normal {
  font-weight: normal;
}
.bold {
  font-weight: 700;
}
.fz-D {
  font-size: 1em;
  padding: 0;
  margin: 0;
  font-weight: normal;
  display: block;
}
@media (min-width: 1700px) {
  .fz-D {
    font-size: 1.25em;
  }
}
.fc-main {
  color: #2fc1fb;
}
.bold {
  font-weight: bold;
}
.fz-small {
  font-size: 0.875em;
}
.elips-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  height: 1.375em;
  line-height: 1.375em;
  -webkit-box-orient: vertical;
}
.mark {
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
  position: static;
  overflow: initial;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
  transform-style: preserve-3d;
}
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}
:root {
  --swiper-navigation-size: 44px;
}
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}
.swiper-button-next svg,
.swiper-button-prev svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "prev";
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "next";
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(
    --swiper-pagination-bullet-width,
    var(--swiper-pagination-bullet-size, 8px)
  );
  height: var(
    --swiper-pagination-bullet-height,
    var(--swiper-pagination-bullet-size, 8px)
  );
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet,
.swiper-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}
.swiper-horizontal.swiper-rtl
  > .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
.swiper-pagination-progressbar {
  background: var(
    --swiper-pagination-progressbar-bg-color,
    rgba(0, 0, 0, 0.25)
  );
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-horizontal
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
html,
body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  padding: 0;
  margin: 0;
  line-height: 1.375;
  color: #000;
  font-size: 1em;
  background-color: #f4f4f4;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
}
html {
  scrollbar-width: thin;
  scrollbar-color: #000 transparent;
}
html::-webkit-scrollbar {
  width: 12px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 20px;
  transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.img {
  background-size: cover;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.img:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 56%;
}
.img.square {
  border-radius: 12px;
}
.img.square:before {
  padding-bottom: 100%;
}
.container-full {
  width: 100%;
}
.container {
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 740px) {
  .container {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}
@media (min-width: 980px) {
  .container {
    padding-left: 18vw;
    padding-right: 18vw;
  }
}
.container-s {
  padding-left: 10px;
  padding-right: 10px;
}
@media (min-width: 740px) {
  .container-s {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}
@media (min-width: 980px) {
  .container-s {
    padding-left: clamp(50px, 24vw, 720px);
    padding-right: clamp(50px, 24vw, 720px);
  }
}
a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.video-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 8px;
}
.inside-video {
  padding: 5vw 10vw;
  background-color: #2fc1fb;
}
.inside-video .video-container {
  border: 4px solid #000;
  border-radius: 24px;
  overflow: hidden;
}
.video-container::after {
  padding-top: 56.25%;
  display: block;
  content: "";
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
ol {
  list-style: none;
  counter-reset: num;
}
ol li {
  padding-left: 2em;
  position: relative;
}
ol li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.875em;
  border-radius: 50%;
  flex-shrink: 0;
  counter-increment: num;
  content: counter(num);
  box-sizing: border-box;
  line-height: 1;
  top: 0.15em;
  color: #fff;
  position: absolute;
  left: 0;
  font-family: "apparat", sans-serif;
}
ol strong {
  font-weight: bold;
}
.img {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  display: block;
}
.img:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 56%;
}
p,
li {
  font-size: 1.0625em;
  letter-spacing: 0;
}
@media (min-width: 980px) {
  p,
  li {
    font-size: clamp(17px, 2.2vh, 22px);
    letter-spacing: 0.01em;
    font-size: clamp(17px, 2.2vh, 22px);
  }
}
@media (min-width: 1700px) {
  p,
  li {
    font-size: clamp(18px, 2.1vh, 22px);
    letter-spacing: 0.01em;
  }
}
.marker {
  font-weight: bold;
  position: relative;
  cursor: pointer;
  border-radius: 0.8em 0.3em;
  background: transparent;
  padding-left: 0.5em;
  padding-right: 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 204, 0.1),
    rgba(255, 255, 104, 0.5) 4%,
    rgba(255, 255, 179, 0.2)
  );
}
.flowbar {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .flowbar {
    transform-origin: left top;
    transform: translateY(0) scale(0.5);
    top: 60px;
  }
}
.flowbar .btn {
  margin: 0 0 1px 1px;
  padding: 0 1em;
  font-size: 0.875em;
  font-weight: normal;
  border: none;
  border-radius: 0;
}
.flowbar .btn:before {
  border-radius: 0;
}
:root {
  --zoomandfade: zoomandfade 1.7s ease-in-out forwards 2.25s;
}
@keyframes zoomandfade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    filter: blur(0);
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(2.5) translateY(-20px);
    filter: blur(10);
    opacity: 0.2;
  }
}
.game-container {
  position: relative;
  width: 100%;
  height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background-color: #111;
}
.game-container .container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.game-container .game-bg-area {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.game-container .game-bg-area:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: radial-gradient(
    circle,
    rgba(32, 32, 32, 0.5) 10%,
    rgba(0, 0, 0, 0.8) 100%
  );
  opacity: 0;
  transition: clip-path 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    backdrop-filter 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    -webkit-backdrop-filter 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 6;
}
.game-container .game-bg-area:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(32, 32, 32, 0.2) 0%,
    rgba(32, 32, 32, 0) 15%,
    rgba(32, 32, 32, 0) 60%,
    rgba(32, 32, 32, 0.4) 80%,
    rgba(0, 0, 0, 0.65) 100%
  );
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 5;
}
.game-container .game-bg-area .bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.game-container .game-bg-area .bg.--animate {
  animation: scale-intro 20s linear;
}
.game-container .game-bg-area .bg.for-teamup,
.game-container .game-bg-area .bg.for-stage {
  width: 233vh;
  width: 100%;
  background-size: auto 100%;
  background-repeat: repeat-x;
}
.game-container .game-bg-area .bg.for-teamup:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: radial-gradient(circle, rgba(32, 32, 32, 0) 20%, #000 100%);
  opacity: 1;
}
.game-container .game-bg-area .bg .fn-area {
  isolation: isolate;
  padding: 0 0 30px 0;
  opacity: 0;
  transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1) 2s;
  transform: translateY(50px);
  pointer-events: none;
}
@media (min-width: 980px) {
  .game-container .game-bg-area .bg .fn-area {
    padding-bottom: 5vh;
  }
}
.game-container .game-bg-area .bg .fn-area .btn {
  position: relative;
  z-index: 9;
}
.game-container .game-bg-area .bg .fn-area:before {
  content: "";
  display: block;
  width: 22vh;
  height: 22vh;
  position: absolute;
  background-image: radial-gradient(
    circle,
    rgba(47, 193, 251, 0.85),
    rgba(47, 193, 251, 0) 70%
  );
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  z-index: 1;
  animation: grbtm 2.5s linear infinite;
}
.game-container .game-bg-area .bg.for-generate {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transform: scale(1.05);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.game-container .game-bg-area .bg.for-generate.--active {
  opacity: 1;
  transform: none;
  transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s;
}
.game-container .game-bg-area .bg.for-generate.--active .fn-area {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.game-container .game-bg-area .bg.--escape-finish {
  animation: var(--zoomandfade);
}
.game-container .game-bg-area .layer-fade {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 3;
}
.game-container .game-bg-area.fade-in .layer-fade {
  opacity: 1;
}
.game-container.--generated .game-main-area {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition-property: opacity, transform;
}
.game-container.--generated .game-input-area {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  transition-property: opacity, transform;
}
.game-container.--generated .game-input-area * {
  pointer-events: none;
}
@media screen and (orientation: landscape) and (max-width: 950px) and (max-height: 550px) {
  .game-container:after {
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 99;
    content: "本遊戲於手機上最佳體驗，請使用直式模式遊玩。";
    display: block;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0f7ff;
    backdrop-filter: blur(20px);
  }
}
@keyframes grbtm {
  0% {
    transform: translate(-50%, 50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, 50%) scale(1.75);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 50%) scale(1);
    opacity: 0.7;
  }
}
@keyframes scale-intro {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.game-main-area,
.game-story-area {
  flex: 1;
  padding-bottom: 80px;
  overflow: hidden;
  padding-top: 64px;
}
.game-main-area:before,
.game-main-area:after,
.game-story-area:before,
.game-story-area:after {
  content: "";
  display: block;
  width: 100%;
  height: 10vh;
  background-color: #000;
  position: absolute;
  left: 0;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scaleY(0);
}
.game-main-area:before,
.game-story-area:before {
  top: 0;
  transform-origin: left top;
}
.game-main-area:after,
.game-story-area:after {
  bottom: 0;
  transform-origin: left bottom;
}
@media (min-width: 740px) {
  .game-main-area,
  .game-story-area {
    padding-bottom: clamp(100px, 15vh, 150px);
  }
}
@media (min-width: 980px) {
  .game-main-area,
  .game-story-area {
    padding-bottom: 50px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-main-area,
  .game-story-area {
    padding-bottom: 100px;
  }
}
@media (min-width: 1380px) {
  .game-main-area,
  .game-story-area {
    padding-top: 52px;
  }
}
@media (min-width: 1700px) {
  .game-main-area,
  .game-story-area {
    padding-bottom: 120px;
  }
}
.game-main-area .container,
.game-main-area .container-s,
.game-story-area .container,
.game-story-area .container-s {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1100px) {
  .game-main-area .container,
  .game-main-area .container-s,
  .game-story-area .container,
  .game-story-area .container-s {
    justify-content: flex-end;
  }
}
.game-main-area.--type-write,
.game-story-area.--type-write {
  padding-bottom: 120px;
}
.game-main-area.--type-write > .container,
.game-story-area.--type-write > .container {
  position: relative;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-main-area.--type-write,
  .game-story-area.--type-write {
    display: flex;
    padding-top: 0;
  }
}
@media (min-width: 740px) {
  .game-main-area.--type-write,
  .game-story-area.--type-write {
    padding-bottom: clamp(100px, 15.5vh, 180px);
  }
}
@media (min-width: 1100px) {
  .game-main-area.--type-write,
  .game-story-area.--type-write {
    padding-bottom: calc(6vh + 100px);
  }
}
@media (min-width: 1700px) {
  .game-main-area.--type-write,
  .game-story-area.--type-write {
    padding-bottom: calc(6vh + 120px);
  }
}
.game-main-area.--type-write .chat-item.self,
.game-story-area.--type-write .chat-item.self {
  display: none;
}
.count-board {
  position: relative;
  padding: 0;
  display: inline-flex;
  width: max-content;
}
.count-board .wrapper {
  display: flex;
  position: relative;
  isolation: isolate;
  padding: 4px 1em 5px;
}
.count-board .wrapper:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  border-radius: 10px;
  top: 0;
}
.count-board h6 {
  color: #b0f7ff;
  font-style: italic;
  position: relative;
  z-index: 1;
  font-size: 1em;
}
.count-board .count {
  margin-left: 1em;
  color: #00f7ff;
  position: relative;
  z-index: 1;
}
.count-board .count strong {
  font-weight: bold;
}
.count-board:before,
.count-board:after {
  content: "";
  display: block;
  position: absolute;
  height: 110%;
  width: 3em;
  top: -5%;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background-color: #b0f7ff;
  z-index: 9;
}
.count-board:before {
  left: 0;
  -webkit-mask-image: url("../images/deco-frame-left.svg");
  -webkit-mask-position: left center;
}
.count-board:after {
  right: 0;
  -webkit-mask-image: url("../images/deco-frame-right.svg");
  -webkit-mask-position: right center;
}
.--type-ii-mode .game-main-area {
  padding-bottom: 10px;
}
@media (min-width: 740px) {
  .--type-ii-mode .game-main-area {
    padding-bottom: 10px;
  }
}
.--type-ii-mode .game-main-area .container,
.--type-ii-mode .game-main-area .container-s {
  justify-content: flex-start;
}
.--type-ii-mode .game-input-area.--mcq-mode {
  position: relative;
  height: initial;
  padding-bottom: 10px;
  padding-top: 10px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .--type-ii-mode .game-input-area.--mcq-mode {
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
.--type-ii-mode .chat-item {
  margin-top: 0;
}
.--type-ii-mode .chat-item .chat-item-container {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  border-radius: 0 0 12px 12px;
  padding-top: 10px;
}
@media (min-width: 740px) {
  .--type-ii-mode .chat-item .chat-item-container {
    padding-top: 3vh;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .--type-ii-mode .chat-item .avatar {
    display: none;
  }
}
@media (min-width: 0) and (max-width: 739.9px) {
  .--type-betalayout-mode .game-main-area {
    padding-top: 64px;
    padding-bottom: 80px;
    overflow: hidden;
  }
  .--type-betalayout-mode .chat-item.self {
    margin-top: 10px;
  }
  .--type-betalayout-mode .chat-item.self .chat-item-container {
    margin-left: -10px;
    width: calc(100% + 20px);
    border-radius: 0;
    background: none;
    backdrop-filter: initial;
    -webkit-backdrop-filter: initial;
  }
  .--type-betalayout-mode .chat-item.self .chat-item-container:before {
    border-radius: 0;
  }
  .--type-betalayout-mode .chat-item.self .chat-item-container:after {
    background: linear-gradient(
      to bottom,
      rgba(41, 136, 84, 0.7) 0%,
      rgba(109, 211, 155, 0) 70%
    );
    bottom: initial;
    top: 1px;
    height: 50vh;
    z-index: 1;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  .--type-betalayout-mode .chat-item.self .content {
    padding: 20px;
    z-index: 3;
  }
  .--type-betalayout-mode .chat-item.self .avatar {
    display: none;
  }
}
.game-main-area .chat-item .content .markdown-wrapper {
  max-height: 50vh;
  overflow-y: auto;
}
.copyright {
  position: absolute;
  font-size: 11px;
  position: absolute;
  left: 50%;
  bottom: 15px;
  color: #fff;
  font-weight: normal;
  opacity: 0.3;
  font-family: "apparat", sans-serif;
  transform: translateX(-50%);
  letter-spacing: 1px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  text-align: center;
  white-space: nowrap;
  display: block;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .copyright {
    white-space: initial;
    letter-spacing: initial;
    width: 90%;
    opacity: 0.4;
    font-size: 10px;
  }
}
.--warning .chat-item.npc .chat-item-container {
  isolation: isolate;
}
.--warning .chat-item.npc .chat-item-container .avatar {
  z-index: 4;
}
.--warning .chat-item.npc .chat-item-container .content {
  z-index: 3;
}
.--warning .chat-item.npc .chat-item-container::before {
  height: 60%;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0)
  );
}
.--warning .chat-item.npc .chat-item-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from var(--a),
    #2fc1fb,
    #bb7fff,
    #ffe15b,
    #f6db9c,
    #00f7ff
  );
  border-radius: 20px;
  animation: rotating 4s linear infinite;
  filter: blur(40px);
  opacity: 0.75;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.--warning .game-bg-area:before {
  clip-path: circle(100% at 50% 50%);
  opacity: 1;
}
.--warning .game-bg-area .bg {
  animation: momomo 1.3s linear infinite;
}
.--speedup .game-bg-area .bg {
  animation: momomo 1s cubic-bezier(0.2, 1, 0.2, 1.5) infinite;
}
@keyframes momomo {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.005);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes warning {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes rotating {
  0% {
    --a: 0deg;
  }
  100% {
    --a: 360deg;
  }
}
.layout-sci {
  position: relative;
}
.layout-sci:before,
.layout-sci:after {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - 12px);
  position: absolute;
  z-index: -1;
  left: 0;
  background-color: rgba(75, 100, 121, 0.6);
}
.layout-sci:before {
  top: 0;
  -webkit-mask-image: url("../images/mask-top.svg");
  mask-image: url("../images/mask-top.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-position: left top;
  mask-position: left top;
  background: linear-gradient(
    to bottom,
    rgba(107, 137, 156, 0.3),
    rgba(51, 68, 82, 0.6)
  );
}
.layout-sci:after {
  bottom: 0;
  -webkit-mask-image: url("../images/mask-bottom.svg");
  mask-image: url("../images/mask-bottom.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
  height: 12px;
}
.notebook-ul {
  font-size: 0.875em;
  border-radius: 12px;
  margin: 0 0 10px;
}
@media (min-width: 740px) {
  .notebook-ul {
    margin: 0 0 15px;
  }
}
@media (min-width: 1700px) {
  .notebook-ul {
    margin: 0 0 20px;
  }
}
.notebook-ul li {
  padding-left: 15px;
  line-height: 1.25em;
  padding-bottom: 10px;
  position: relative;
}
.notebook-ul li:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background-color: #21bc9b;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.7em;
  transform: translateY(-50%);
}
@media (min-width: 740px) {
  .notebook-ul li:before {
    top: 0.7em;
  }
}
.notebook-ul li:first-of-type {
  border: none;
  display: flex;
  padding: 0 0 8px 0;
}
.notebook-ul li:first-of-type:before {
  display: none;
}
.notebook-ul .text-second {
  opacity: 0.7;
  font-weight: normal;
  font-size: 0.875em;
  font-style: italic;
}
.notebook-ul .title {
  font-family: "apparat", sans-serif;
  font-size: 1.25em;
  font-weight: bold;
}
.vocabulary {
  display: flex;
  align-items: center;
}
.vocabulary strong {
  font-weight: bold;
  font-size: 1.25em;
  cursor: default !important;
}
.vocabulary .btn {
  margin-left: 10px;
}
.question {
  margin: 10px 0;
}
.question > p {
  padding-bottom: 3px;
  position: relative;
  line-height: 1.25em;
  font-weight: bold;
}
.question ul {
  display: flex;
  flex-wrap: wrap;
}
.question li {
  display: flex;
  align-items: center;
  padding: 2px 0.5em 2px 0;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .question li {
    width: 100%;
  }
}
.question li:before {
  content: attr(data-order);
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-color: #000;
  color: #2fc1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125em;
  font-weight: bold;
  padding-bottom: 1px;
  box-sizing: border-box;
  margin-right: 5px;
}
@media (min-width: 980px) {
  .question.w50 li {
    width: 50%;
  }
}
.score-gen2 {
  width: 100%;
}
@media (min-width: 980px) {
  .score-gen2 {
    width: 70%;
  }
}
.score-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.score-item .big {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 25px 0 22px;
  width: 100%;
  isolation: isolate;
  background-color: #ffea28;
  color: #000;
}
.score-item .big:before,
.score-item .big:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to top, #4b4218, rgba(139, 123, 53, 0));
  z-index: -2;
  display: none;
}
.score-item .big:before {
  z-index: -1;
  background: none;
  border-top: 1px solid #4b4218;
  border-bottom: 1px solid #4b4218;
  display: none;
}
.score-item .big .fancy-font {
  font-style: normal;
  font-weight: bold;
  display: flex;
  align-items: flex-end;
  line-height: 0.7em;
  margin: 0;
  padding: 0.05em 0 0 0;
  color: #000;
}
.score-item .big span {
  font-size: 0.3em;
  opacity: 0.8;
  display: block;
  line-height: 1em;
  margin: 0.05em 0.5em;
}
.score-item .summarize {
  font-style: normal;
  background: linear-gradient(
    to bottom,
    #ffe1c5 0%,
    #fff 50%,
    #f3b45b 50.1%,
    #ffe3aa 100%
  );
  background: -webkit-linear-gradient(
    to bottom,
    #ffe1c5 0%,
    #fff 50%,
    #f3b45b 50.1%,
    #ffe3aa 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
  font-size: 5vh;
  color: transparent;
  width: 100%;
  margin-bottom: 10px;
}
.score-item .advantage {
  display: flex;
  padding-top: 1em;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.score-item .advantage li {
  color: #f6db9c;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 1em 0.5em 0;
}
@media (min-width: 980px) {
  .score-item .advantage li {
    width: initial;
  }
}
.score-item .advantage li:before {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 46.38% 0;
  background-color: #bca46a;
  width: 1.5em;
  height: 1.5em;
  margin-right: 5px;
}
.score-item .real {
  border: 1px solid #5b4d2c;
  background-color: rgba(91, 77, 44, 0.5);
  padding: 10px 20px;
  border-radius: 12px 0 0 12px;
  color: #f6db9c;
}
.score {
  display: flex;
  flex-direction: column;
  width: 88%;
  z-index: 9;
}
@media (min-width: 980px) {
  .score {
    width: 70%;
    max-width: 560px;
  }
}
@media (min-width: 1700px) {
  .score {
    width: 64%;
    max-width: 640px;
  }
}
.score li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "apparat", sans-serif;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(91, 77, 44, 0.6);
  background: linear-gradient(
    to right,
    rgba(91, 77, 44, 0.4),
    rgba(91, 77, 44, 0)
  );
  padding: 0 0.5em;
  border-radius: 0;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 740px) {
  .score li {
    margin-bottom: 4px;
    border-radius: 10px;
    border: 1px solid rgba(91, 77, 44, 0.3);
    background: linear-gradient(
      to right,
      rgba(91, 77, 44, 0.3),
      rgba(91, 77, 44, 0)
    );
  }
}
@media (min-width: 1700px) {
  .score li {
    margin-bottom: 6px;
  }
}
.score li:nth-of-type(1) {
  transition-delay: 0.5s;
}
.score li:nth-of-type(2) {
  transition-delay: 0.7s;
}
.score li:nth-of-type(3) {
  transition-delay: 0.9s;
}
.score li:nth-of-type(4) {
  transition-delay: 1.1s;
}
.score li:nth-of-type(5) {
  transition-delay: 1.3s;
}
.score li:nth-of-type(6) {
  transition-delay: 1.5s;
}
.score li:nth-of-type(7) {
  transition-delay: 1.7s;
}
.score li:nth-of-type(8) {
  transition-delay: 1.9s;
}
.score li:nth-of-type(9) {
  transition-delay: 2.1s;
}
.score li:nth-of-type(10) {
  transition-delay: 2.3s;
}
.score li.big {
  background: none;
}
@media (min-width: 740px) {
  .score li.big {
    background: linear-gradient(
      to top,
      rgba(91, 77, 44, 0.3),
      rgba(91, 77, 44, 0)
    );
    border-radius: 10px;
    border: none;
  }
}
.score li.btn-area {
  background: none;
  border: none;
  justify-content: flex-end;
  padding: 10px 0 0;
}
.score .field {
  font-size: 0.875em;
  color: #bca46a;
  padding-right: 1em;
  font-style: italic;
}
.score .value strong {
  font-size: 1.25em;
  color: #f6db9c;
}
.score .value span {
  font-size: 0.875em;
  opacity: 0.5;
}
.swiper-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-ctrl .swiper-button-prev,
.swiper-ctrl .swiper-button-next {
  position: relative;
  margin: 0;
  width: 50px;
  height: 50px;
  background-color: rgba(8, 56, 96, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #2fc1fb;
  border-radius: 5px 0 0 5px;
  left: initial;
  top: initial;
  right: initial;
  bottom: initial;
  border: 1px solid rgba(203, 225, 233, 0.2);
  isolation: isolate;
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: border-color, background-color, opacity, box-shadow;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 29px 0px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .swiper-ctrl .swiper-button-prev,
  .swiper-ctrl .swiper-button-next {
    border-radius: 0 10px 10px 0;
  }
  .swiper-ctrl .swiper-button-prev:before,
  .swiper-ctrl .swiper-button-next:before {
    border-radius: 0 10px 10px 0;
  }
}
@media (min-width: 740px) {
  .swiper-ctrl .swiper-button-prev,
  .swiper-ctrl .swiper-button-next {
    width: 100px;
    height: 70px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .swiper-ctrl .swiper-button-prev,
  .swiper-ctrl .swiper-button-next {
    height: 80px;
  }
}
@media (min-width: 1700px) {
  .swiper-ctrl .swiper-button-prev,
  .swiper-ctrl .swiper-button-next {
    width: 130px;
  }
}
.swiper-ctrl .swiper-button-prev span,
.swiper-ctrl .swiper-button-next span {
  font-family: "Quantico", sans-serif;
}
.swiper-ctrl .swiper-button-prev:before,
.swiper-ctrl .swiper-button-prev:after,
.swiper-ctrl .swiper-button-next:before,
.swiper-ctrl .swiper-button-next:after {
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: border-color, background-color, opacity, box-shadow,
    transform;
}
.swiper-ctrl .swiper-button-prev:before,
.swiper-ctrl .swiper-button-next:before {
  display: block;
  content: "";
  width: calc(100% - 4px);
  height: 50%;
  border-radius: 2px 0 0 0;
  position: absolute;
  left: 2px;
  top: 2px;
  background: linear-gradient(
    to top,
    rgba(47, 193, 251, 0.3),
    rgba(47, 193, 251, 0)
  );
  z-index: 1;
  opacity: 0.6;
}
.swiper-ctrl .swiper-button-prev:after,
.swiper-ctrl .swiper-button-next:after {
  font-size: 22px;
  position: relative;
  z-index: 3;
  color: #2fc1fb;
}
@media (hover: hover) {
  .swiper-ctrl .swiper-button-prev:hover,
  .swiper-ctrl .swiper-button-next:hover {
    background-color: rgba(4, 27, 47, 0.8);
    color: #00f7ff;
    box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
    border-color: rgba(203, 225, 233, 0.8);
  }
  .swiper-ctrl .swiper-button-prev:hover:before,
  .swiper-ctrl .swiper-button-next:hover:before {
    opacity: 1;
  }
  .swiper-ctrl .swiper-button-prev:hover:after,
  .swiper-ctrl .swiper-button-next:hover:after {
    transform: scale(1.375);
    color: #b0f7ff;
  }
}
.swiper-ctrl .swiper-button-next {
  border-radius: 0 5px 5px 0;
  margin-left: 1px;
}
.swiper-ctrl .swiper-button-next:before {
  border-radius: 0 2px 0 0;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .swiper-ctrl .swiper-button-next {
    border-radius: 10px 0 0 10px;
  }
  .swiper-ctrl .swiper-button-next:before {
    border-radius: 10px 0 0 10px;
  }
}
.swiper-ctrl.--white .swiper-button-prev,
.swiper-ctrl.--white .swiper-button-next {
  background-color: #fff;
  border: 1px solid rgba(176, 247, 255, 0.5);
  box-shadow: rgba(50, 50, 50, 0.3) 0px 0px 29px 0px;
}
.swiper-ctrl.--white .swiper-button-prev:before,
.swiper-ctrl.--white .swiper-button-next:before {
  background: linear-gradient(
    to top,
    rgba(176, 247, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
}
.swiper-ctrl.--white .swiper-button-prev:after,
.swiper-ctrl.--white .swiper-button-next:after {
  color: #083860;
}
@media (hover: hover) {
  .swiper-ctrl.--white .swiper-button-prev:hover,
  .swiper-ctrl.--white .swiper-button-next:hover {
    background-color: #fff;
    color: #000;
    box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
    border-color: rgba(176, 247, 255, 0.3);
  }
  .swiper-ctrl.--white .swiper-button-prev:hover:before,
  .swiper-ctrl.--white .swiper-button-next:hover:before {
    opacity: 1;
  }
  .swiper-ctrl.--white .swiper-button-prev:hover:after,
  .swiper-ctrl.--white .swiper-button-next:hover:after {
    color: #000;
  }
}
.swiper-ctrl.--text .swiper-button-prev,
.swiper-ctrl.--text .swiper-button-next {
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: rgba(50, 50, 50, 0) 0px 0px 29px 0px;
  width: initial;
}
.swiper-ctrl.--text .swiper-button-prev span,
.swiper-ctrl.--text .swiper-button-next span {
  font-size: 20px;
  color: #fff;
  padding: 0 0.5em;
  display: block;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 740px) {
  .swiper-ctrl.--text .swiper-button-prev span,
  .swiper-ctrl.--text .swiper-button-next span {
    padding: 0 1em;
    font-size: clamp(20px, 3.5vh, 64px);
  }
}
.swiper-ctrl.--text .swiper-button-prev:before,
.swiper-ctrl.--text .swiper-button-next:before {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
}
.swiper-ctrl.--text .swiper-button-prev:after,
.swiper-ctrl.--text .swiper-button-next:after {
  color: #083860;
  display: none;
}
@media (hover: hover) {
  .swiper-ctrl.--text .swiper-button-prev:hover,
  .swiper-ctrl.--text .swiper-button-next:hover {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: initial;
    border-color: transparent;
  }
  .swiper-ctrl.--text .swiper-button-prev:hover span,
  .swiper-ctrl.--text .swiper-button-next:hover span {
    color: #062a48;
  }
  .swiper-ctrl.--text .swiper-button-prev:hover:after,
  .swiper-ctrl.--text .swiper-button-next:hover:after {
    color: #000;
  }
}
.sci-frame {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 5px !important;
  width: 100%;
  position: relative;
  isolation: isolate;
  background-color: rgba(9, 34, 45, 0.3);
}
.sci-frame .deco-top {
  display: block;
  position: absolute;
  left: 50%;
  top: -2px;
  width: 40%;
  height: 8px;
  background-color: #b0f7ff;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  background: linear-gradient(
    to top,
    rgba(17, 17, 17, 0.5),
    rgba(17, 17, 17, 0.8)
  );
  z-index: 9;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(176, 247, 255, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 740px) {
  .sci-frame .deco-top {
    height: 10px;
    top: -3px;
  }
}
@media (min-width: 980px) {
  .sci-frame .deco-top {
    width: 30%;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .sci-frame .deco-top {
    height: 12px;
  }
}
.sci-frame:before,
.sci-frame:after {
  content: "";
  display: block;
  position: absolute;
  opacity: 1;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-sizing: border-box;
}
.sci-frame:after {
  width: calc(100% - 4px);
  height: 50%;
  left: 2px;
  top: 2px;
  border-radius: 2px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(47, 193, 251, 0.3),
    rgba(47, 193, 251, 0)
  );
}
.sci-frame:before {
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  left: -5px;
  top: -5px;
  border-radius: 5px;
  z-index: 1;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  border: 2px solid #cbe1e9;
}
@keyframes frameshadow {
  0% {
    box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
  }
  50% {
    box-shadow: #cef 0px 0px 10px, #4d5b90 0px 0px 20px, #4778ab 0px 0px 30px,
      #9cdbf6 0px 0px 40px;
  }
  100% {
    box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
  }
}
.sci-form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
  padding: 0 10px;
  position: relative;
  margin-bottom: 10px;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  height: 50px;
  flex-shrink: 0;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .sci-form-item {
    padding: 0 15px 5px;
    margin-bottom: clamp(15px, 2.5vh, 20px);
    height: 60px;
  }
}
.sci-form-item:before {
  content: "";
  display: block;
  width: calc(100% - 4px);
  height: calc(100% - 1px);
  background: linear-gradient(
    to bottom,
    rgba(2, 15, 27, 0.4) 10%,
    rgba(4, 34, 57, 0.4) 60%,
    rgba(176, 247, 255, 0.1) 100%
  );
  position: absolute;
  left: 2px;
  top: 0;
  z-index: -1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-bottom: 0;
}
.sci-form-item:after {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.3);
  border-right: 1.5px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
}
.sci-form-item.btn-area {
  border: none;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}
.sci-form-item.btn-area:after {
  display: none;
}
.sci-form-item .field {
  color: #b0f7ff;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  font-size: 1.125em;
  white-space: nowrap;
}
@media (min-width: 740px) {
  .sci-form-item .field {
    font-size: 1.125em;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .sci-form-item .field {
    font-size: 1.25em;
  }
}
.sci-form-item input,
.sci-form-item select {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
  text-align: right;
  color: #fff;
  font-size: 1.125rem;
  width: 100%;
  line-height: 1.25em;
}
@media (min-width: 740px) {
  .sci-form-item input,
  .sci-form-item select {
    font-size: 1.125rem;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .sci-form-item input,
  .sci-form-item select {
    font-size: 1.25rem;
  }
}
.sci-form-item input::placeholder,
.sci-form-item select::placeholder {
  color: #fff;
  opacity: 1;
}
.sci-form-item input::-moz-placeholder,
.sci-form-item select::-moz-placeholder {
  color: #fff;
  opacity: 1;
}
.sci-form-item input:-ms-input-placeholder,
.sci-form-item select:-ms-input-placeholder {
  color: #fff;
}
.sci-form-item input::-ms-input-placeholder,
.sci-form-item select::-ms-input-placeholder {
  color: #fff;
}
.sci-form-item select {
  background: url("../images/select-white.svg") no-repeat center right 5px;
  background-size: auto 6px;
}
.sci-form-item option {
  color: #000;
}
.divider-text {
  width: 100%;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0f7ff;
  white-space: nowrap;
  letter-spacing: 2px;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
}
.divider-text:before,
.divider-text:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.divider-text:before {
  background-color: #fff;
  transform-origin: left center;
  margin-right: 0.5em;
  background: linear-gradient(to left, #9cdbf6, rgba(156, 219, 246, 0));
}
.divider-text:after {
  background-color: #fff;
  transform-origin: right center;
  margin-left: 0.5em;
  background: linear-gradient(to right, #9cdbf6, rgba(156, 219, 246, 0));
}
.divider-text .count {
  background-color: #2fc1fb;
  color: #083860;
  border-radius: 10px;
  padding: 2px 8px;
  font-weight: bold;
  display: inline-flex;
  text-shadow: initial;
  margin-left: 5px;
  letter-spacing: 0;
  background: linear-gradient(to top, #2fc1fb, #b0f7ff);
}
.markdown-wrapper .speech strong {
  font-weight: bold;
  font-size: inherit;
}
@media (min-width: 980px) {
  .markdown-wrapper .speech strong {
    font-size: clamp(17px, 2.2vh, 22px);
  }
}
.markdown-wrapper .speech .btn-multi-play {
  display: inline-flex;
  vertical-align: bottom;
  margin: 0 5px;
  border-radius: 30px;
}
.markdown-wrapper .speech .btn-multi-play .audio-ctrl {
  min-width: 60px;
}
.markdown-wrapper .speech .btn-multi-play .audio-ctrl .play,
.markdown-wrapper .speech .btn-multi-play .audio-ctrl .pause {
  width: 100%;
  justify-content: center;
}
.markdown-wrapper .img-wrapper {
  display: inline-block;
  border-radius: 12px;
  width: auto;
  border: 1px solid rgba(176, 247, 255, 0.5);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
  padding: 6px;
  margin: 10px 0 0 0;
  flex-shrink: 0;
  box-sizing: border-box;
  animation: img-scale 1.5s linear infinite;
}
@media (min-width: 980px) {
  .markdown-wrapper .img-wrapper {
    margin: 14px 0 0 0;
  }
}
.markdown-wrapper .img-wrapper img {
  display: block;
  width: auto;
  height: 80px;
}
.markdown-wrapper .inline-img {
  display: inline-block;
  border-radius: 6px;
  height: 1.75em;
  width: auto;
  margin: 0 5px;
  border: 1px solid rgba(176, 247, 255, 0.5);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  vertical-align: middle;
}
.markdown-wrapper .inline-img + p {
  margin-top: 8px;
}
@keyframes img-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(1);
  }
}
.notebook-ul .btn-multi-play {
  display: inline-flex;
  vertical-align: bottom;
  margin: 0 5px;
  border-radius: 30px;
}
.notebook-ul .btn-multi-play .audio-ctrl {
  min-width: 60px;
}
.notebook-ul .btn-multi-play .audio-ctrl .play,
.notebook-ul .btn-multi-play .audio-ctrl .pause {
  width: 100%;
  justify-content: center;
}
.game-popup-area {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity;
  z-index: 99;
}
.game-popup-area.for-end-score,
.game-popup-area.for-share {
  background-color: rgba(17, 17, 17, 0.4);
  z-index: 999;
}
.game-popup-area.for-instantbox {
  background-color: transparent;
  backdrop-filter: initial;
  -webkit-backdrop-filter: initial;
}
.game-popup-area .fn-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-popup-area .fn-area {
    padding-bottom: 40px;
  }
}
.game-popup-area .btn-close {
  position: absolute;
  right: 15px;
  width: 40px;
  height: 40px;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  background-color: #2fc1fb;
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 740px) {
  .game-popup-area .btn-close {
    right: 25px;
    top: 25px;
  }
}
@media (min-width: 1380px) {
  .game-popup-area .btn-close {
    width: 48px;
    height: 48px;
  }
}
.game-popup-area .btn-close .icon {
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: scale(0.7);
}
.game-popup-area .btn-close .icon:before {
  background-color: #000;
}
@media (hover: hover) {
  .game-popup-area .btn-close:hover {
    transform: scale(1.25);
  }
  .game-popup-area .btn-close:hover .icon {
    opacity: 1;
  }
  .game-popup-area .btn-close:active {
    margin-top: 1px;
  }
}
.game-popup-area .popup-container {
  height: 100%;
  display: flex;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
  transition-property: opacity, transform;
  opacity: 0;
  transform: translateY(50px);
}
.game-popup-area .popup-container > .container {
  height: initial;
}
.game-popup-area .feedback {
  color: #bca46a;
  font-size: 0.875em;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate(-50%, -50%);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-popup-area .feedback {
    padding: 20px;
    font-size: 0.75em;
  }
}
.game-popup-area.--active {
  pointer-events: auto;
  opacity: 1;
}
.game-popup-area.--active .popup-container {
  opacity: 1;
  transform: none;
}
.game-popup-area.--notcover {
  background-color: initial;
  backdrop-filter: initial;
  -webkit-backdrop-filter: initial;
}
.game-popup-area.--notcover .btn-close {
  right: 10%;
  top: 10vh;
  transform: translate(50%, -50%);
}
.game-popup-area .iframe-container {
  width: 80%;
  height: 80vh;
  margin: 0 auto;
  background-color: #efefef;
  border-radius: 8px;
  border: 1px solid rgba(176, 247, 255, 0.2);
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .collect-item {
    display: flex;
    flex-direction: column-reverse;
  }
}
.collect-item .fz-B {
  display: flex;
  color: #00f7ff;
  margin-bottom: 0.5em;
}
.collect-item .fz-B .icon {
  margin-left: 10px;
  display: block;
}
.collect-item .fz-B .icon:before {
  background-color: #00f7ff;
}
.collect-item .count-board {
  margin-bottom: 0.5em;
}
.collect-item .system-text {
  margin-bottom: 10px;
}
@media (min-width: 980px) {
  .collect-item .system-text {
    margin-bottom: 15px;
  }
}
.collect-item .system-text p {
  font-size: 1em;
  font-style: italic;
  color: #b0f7ff;
}
@media (min-width: 1380px) {
  .collect-item .system-text p {
    font-size: 1.125em;
  }
}
@media (min-width: 980px) {
  .collect-item {
    display: flex;
  }
}
@media (min-width: 980px) {
  .collect-item .img-holder {
    flex: 1;
  }
}
@media (min-width: 980px) {
  .collect-item .text-holder {
    flex: 1;
    padding-right: 10px;
  }
}
.end-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container {
    justify-content: flex-start;
    padding-top: 50px;
  }
}
.end-container .scene {
  position: relative;
  perspective: 600px;
}
.end-container .scene .gen-card {
  padding: 5px;
  cursor: pointer;
  background: linear-gradient(
    to bottom,
    #a97e56,
    #dcb579 50%,
    #ffdca7 50.1%,
    #9b7450 100%
  );
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
@media (min-width: 740px) {
  .end-container .scene .gen-card {
    padding: 8px;
  }
}
.end-container .scene .gen-card .img {
  border-radius: 6px;
  box-shadow: rgba(249, 212, 157, 0.3) 0px 10px 15px -3px,
    rgba(220, 181, 121, 0.05) 0px 4px 6px -2px;
  height: 40vh;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .scene .gen-card .img {
    height: initial;
    width: 88vw;
  }
}
@media (min-width: 576px) and (max-width: 979.9px) {
  .end-container .scene .gen-card .img {
    width: 72vw;
  }
}
@media (min-width: 980px) {
  .end-container .scene .gen-card .img {
    height: 50vh;
  }
}
.end-container .scene .gen-card .img:before {
  padding-bottom: initial;
  padding-left: 40vh;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .scene .gen-card .img:before {
    padding-left: initial;
    padding-bottom: 56.25%;
  }
}
@media (min-width: 980px) {
  .end-container .scene .gen-card .img:before {
    padding-left: 50vh;
  }
}
.end-container .scene .gen-card .text {
  font-weight: bold;
  font-size: 1em;
  padding-top: 0.75em;
  padding-bottom: 0.5em;
  color: #2f281e;
}
.end-container .scene .gen-card .text:after {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 24.64% 0;
  width: 20px;
  height: 20px;
  background-color: #2f281e;
  margin: 0 0 0 5px;
  display: inline-block;
  vertical-align: middle;
}
@media (min-width: 1380px) {
  .end-container .scene .gen-card .text:after {
    width: 24px;
    height: 24px;
    margin: 0 0 2px 5px;
  }
}
.end-container .scene .gen-card .content {
  width: 100%;
  text-align: center;
}
.end-container .scene .card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.end-container .end-frame {
  width: 100%;
  height: clamp(200px, 48vh, 1200px);
  display: flex;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.3)
  );
  position: relative;
  justify-content: space-between;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .end-frame {
    backdrop-filter: initial;
    -webkit-backdrop-filter: initial;
    flex-direction: column;
    height: 80%;
    background: linear-gradient(
      to bottom,
      rgba(17, 17, 17, 0),
      rgba(17, 17, 17, 0.5)
    );
    justify-content: center;
  }
}
.end-container .end-frame:before,
.end-container .end-frame:after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  position: absolute;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .end-frame:before,
  .end-container .end-frame:after {
    display: none;
  }
}
.end-container .end-frame:before {
  top: 0;
  background: linear-gradient(
    to right,
    #99f29c 10%,
    #98c16a,
    #fff,
    #fac363 90%
  );
}
.end-container .end-frame::after {
  bottom: 0;
  background: linear-gradient(to right, #52a7d3 10%, #86df9a 90%);
}
.end-container .end-frame.--for-multi {
  background: none;
  height: initial;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .end-frame.--for-multi {
    padding: 10px 10px 70px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .end-container .end-frame.--for-multi {
    padding: 0 10% 50px;
  }
}
@media (min-width: 980px) {
  .end-container .end-frame.--for-multi {
    justify-content: center;
    padding-bottom: 30px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .end-container .end-frame.--for-multi {
    padding-bottom: 60px;
  }
}
.end-container .end-frame.--for-multi:before,
.end-container .end-frame.--for-multi:after {
  display: none;
}
.end-container .left {
  position: relative;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .left {
    display: none;
  }
}
.end-container .left .avatar {
  position: absolute;
  isolation: isolate;
  left: 0;
  bottom: 0;
  width: 20vw;
}
@media (min-width: 980px) {
  .end-container .left .avatar {
    margin-left: -5vw;
    max-width: 50vh;
  }
}
@media (min-width: 1700px) {
  .end-container .left .avatar {
    width: 24vw;
  }
}
.end-container .left .avatar .img:before {
  padding-bottom: 100%;
}
@media (min-width: 980px) {
  .end-container .left {
    flex: 2;
  }
}
.end-container .center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}
@media (min-width: 980px) {
  .end-container .center {
    flex: 2;
  }
}
.end-container .top-bar {
  position: absolute;
  font-size: 5vh;
  font-style: italic;
  font-weight: bold;
  transform: translateY(-55%);
  width: 100%;
  text-align: center;
  animation: floating 3s linear infinite;
  color: #ffffff;
  left: 0;
  top: 0;
  text-shadow: 0 -3px 8px #5e3b07, 0 -5px 15px #ff0, 0 -10px 20px #ff8000;
  z-index: 5;
}
@media (min-width: 980px) {
  .end-container .top-bar {
    font-size: 8vh;
  }
}
.end-container .bottom-bar {
  transform: translateY(50%);
}
.end-container .right {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .right {
    padding-bottom: 10px;
    padding-top: 3vh !important;
  }
}
@media (min-width: 980px) {
  .end-container .right {
    flex: 2;
  }
}
.end-container .right .chart-holder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.end-container .right .img {
  width: 70%;
}
.end-container .right .img:before {
  padding-bottom: 84%;
}
.end-container .memo {
  color: #fff;
  padding: 10px;
}
@media (min-width: 740px) {
  .end-container .memo {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    height: 100%;
  }
}
@media (min-width: 980px) {
  .end-container .memo {
    padding-left: 15vw;
  }
}
@media (min-width: 1700px) {
  .end-container .memo {
    padding-left: 18vw;
  }
}
.end-container .memo p {
  font-size: 1em;
}
@media (min-width: 1700px) {
  .end-container .memo p {
    font-size: 1.125em;
  }
}
.end-container .memo strong {
  font-size: 1.25em;
  line-height: 1.25em;
  margin-bottom: 0.5em;
  font-weight: bold;
  background: linear-gradient(
    to bottom,
    #fdc275,
    #fff 50%,
    #fdc275 50.1%,
    #ffe0b7 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media (min-width: 1380px) {
  .end-container .memo strong {
    font-size: 1.5em;
  }
}
@media (min-width: 1700px) {
  .end-container .memo strong {
    font-size: 1.625em;
  }
}
.end-container .highlight {
  height: 30vh;
  left: 0;
  top: 0;
  transform: translateY(-50%);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .highlight {
    top: 76%;
  }
}
@media (min-width: 980px) {
  .end-container .highlight {
    height: 28%;
  }
}
.end-container .highlight.for-bottom {
  top: initial;
  bottom: 0;
  animation: highlightscalebottom 6s cubic-bezier(0.215, 0.61, 0.355, 1)
    infinite;
  transform: translateY(50%);
}
@media (min-width: 980px) {
  .end-container .highlight.for-bottom {
    height: 40%;
  }
}
.end-container .highlight.for-right {
  top: initial;
  bottom: 0;
  animation: highlightscaleright 6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  transform: translate(20%, 50%);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .end-container .highlight.for-right {
    animation: highlightscalebottom 6s cubic-bezier(0.215, 0.61, 0.355, 1)
      infinite;
    height: 20vh;
  }
}
@media (min-width: 980px) {
  .end-container .highlight.for-right {
    height: 40%;
  }
}
@media (min-width: 980px) {
  .end-container.--lengthy .avatar {
    height: initial;
    width: clamp(120px, 12vw, 180px);
    bottom: calc(100% - 60px);
    left: 0;
    margin: 0;
    transform: translate(0, -100%);
    margin-left: 30px;
  }
}
@media (min-width: 1380px) {
  .end-container.--lengthy .avatar {
    margin-left: 4vw;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .end-container.--lengthy .avatar {
    bottom: calc(100% - 100px);
  }
}
.end-container.--lengthy .memo:before {
  content: "";
  animation: none;
  left: 0;
  height: 70px;
  width: 200%;
  top: 60px;
  clip-path: inset(50% 0 0 0);
  transform: translate(-40%, -50%);
  pointer-events: none;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .end-container.--lengthy .memo:before {
    top: 100px;
    height: 100px;
    width: 200%;
  }
}
@media (min-width: 980px) {
  .end-container.--lengthy .memo {
    margin-top: 60px;
    height: calc(100% - 60px);
    padding: 15px 30px 20px;
    overflow-y: auto;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .end-container.--lengthy .memo {
    padding: 20px 30px 30px;
    margin-top: 100px;
    height: calc(100% - 100px);
  }
}
@media (min-width: 1380px) {
  .end-container.--lengthy .memo {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .end-container.--lengthy .memo {
    font-size: 0.875em;
  }
}
.end-container.--brief .center {
  display: none;
}
@media (min-width: 980px) {
  .end-container.--brief .right {
    padding-right: 5vw;
  }
}
@media (min-width: 1700px) {
  .end-container.--brief .right {
    flex: 3;
  }
}
@media (min-width: 980px) {
  .end-container.--brief .highlight.for-right {
    left: -18vw;
  }
}
@media (min-width: 980px) and (max-width: 1699.9px) {
  .end-container.--brief .memo {
    padding-left: 25vw;
  }
}
@media (min-width: 1700px) {
  .end-container.--brief .memo {
    padding-left: 22vw;
  }
}
@media (min-width: 980px) and (max-width: 1699.9px) {
  .end-container.--brief .avatar {
    width: 30vw;
  }
}
.fancy-font {
  font-style: italic;
  font-weight: bold;
  text-align: center;
  font-family: "apparat", sans-serif;
  color: #ffffff;
  text-shadow: 0 -3px 8px #5e3b07, 0 -5px 15px #ff0, 0 -10px 20px #ff8000;
  z-index: 5;
  line-height: 1em;
}
.fancy-font.--small {
  font-size: 1.75em;
}
.fancy-font.--large {
  font-size: 3em;
  padding-top: 0.1em;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .fancy-font {
    font-size: clamp(30px, 6vh, 64px);
  }
  .fancy-font.--large {
    font-size: clamp(30px, 7vh, 64px);
  }
}
@media (min-width: 980px) {
  .fancy-font {
    font-size: 6vh;
  }
  .fancy-font.--large {
    font-size: 8vh;
    line-height: 1em;
  }
  .fancy-font.--middle {
    font-size: 5vh;
    padding-top: 0.03em;
  }
  .fancy-font.--small {
    font-size: clamp(18px, 2.5vh, 24px);
  }
}
@media (min-width: 1380px) {
  .fancy-font {
    font-size: 8vh;
  }
  .fancy-font.--large {
    font-size: 9vh;
    line-height: 1em;
  }
  .fancy-font.--middle {
    font-size: 5vh;
    padding-top: 0.03em;
  }
  .fancy-font.--small {
    font-size: 4vh;
  }
}
@keyframes memofloating {
  0% {
    transform: translateY(50%);
  }
  50% {
    transform: translateY(55%);
  }
  100% {
    transform: translateY(50%);
  }
}
@keyframes highlightscale {
  0% {
    transform: translateY(-50%) scaleY(1);
  }
  52% {
    transform: translateY(-50%) scaleY(0.8);
  }
  100% {
    transform: translateY(-50%) scaleY(1);
  }
}
@keyframes highlightscalebottom {
  0% {
    transform: translateY(50%) scaleY(1);
  }
  52% {
    transform: translateY(50%) scaleY(0.8);
  }
  100% {
    transform: translateY(50%) scaleY(1);
  }
}
@keyframes highlightscaleright {
  0% {
    transform: translate(20%, 50%) scaleY(1);
  }
  52% {
    transform: translate(20%, 50%) scaleY(0.8);
  }
  100% {
    transform: translate(20%, 50%) scaleY(1);
  }
}
@keyframes floating {
  0% {
    transform: translateY(-52%);
  }
  52% {
    transform: translateY(-57%);
  }
  100% {
    transform: translateY(-52%);
  }
}
@keyframes lighting {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  52% {
    transform: scaleY(0.85);
    opacity: 0.7;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
.ray {
  position: absolute;
  left: -1em;
  right: -1em;
  top: -1em;
  bottom: -1em;
  margin: auto;
  padding: 0;
  width: 0;
  height: 0;
  list-style: none;
  animation: 20s rayrotate infinite linear;
  mix-blend-mode: color;
}
.ray li,
.ray li:before,
.ray li:after {
  position: absolute;
  border: 0 solid transparent;
  border-width: 1.2em 20em;
  border-color: transparent #91853f;
  width: 0;
  height: 0;
  font-size: 20px;
  font-size: 60px;
}
.ray li {
  left: -20em;
  top: 50%;
  margin-top: -1.2em;
  transform: rotate(0.1deg);
}
.ray li:before,
.ray li:after {
  left: -20em;
  top: -1.2em;
  display: block;
  content: "";
}
.ray li:before {
  transform: rotate(60deg);
}
.ray li:after {
  transform: rotate(-60deg);
}
.ray li:nth-child(2) {
  transform: rotate(15deg);
}
.ray li:nth-child(3) {
  transform: rotate(30deg);
}
.ray li:nth-child(4) {
  transform: rotate(45deg);
}
@keyframes rayrotate {
  100% {
    transform: rotate(360deg);
  }
}
.dialogue-container {
  width: 100%;
  height: 100%;
  padding: 30px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialogue-container .tips {
  font-size: 0.75em;
  display: flex;
  align-items: center;
  color: #083860;
  padding-top: 8px;
  margin-top: 10px;
}
.dialogue-container .tips .icon {
  margin: 3px 5px 0 0;
}
.dialogue-container .tips .icon:before {
  background-color: #083860;
  width: 20px;
  height: 20px;
}
.dialogue-container .target {
  font-size: 1.25em;
  padding: 10px 10px 0;
}
.dialogue-container .target .target-content {
  background-color: #fff;
  box-shadow: rgba(47, 193, 251, 0.4) 0px 4px 12px;
  border: 1px solid #2fc1fb;
  border-radius: 12px;
  padding: 10px;
}
@media (min-width: 0) and (max-width: 575.9px) {
  .dialogue-container .target .target-content p,
  .dialogue-container .target .target-content li {
    font-size: 1em;
  }
}
@media (min-width: 1380px) {
  .dialogue-container .target .target-content {
    padding: 15px;
  }
}
@media (min-width: 740px) {
  .dialogue-container .target {
    padding: 17.5px 17.5px 0;
  }
}
@media (min-width: 1380px) {
  .dialogue-container .target {
    padding: 25px 25px 0;
  }
}
.dialogue-container .advice {
  padding: 10px;
}
@media (min-width: 740px) {
  .dialogue-container .advice {
    padding: 17.5px 17.5px;
  }
}
@media (min-width: 1380px) {
  .dialogue-container .advice {
    padding: 25px 25px;
  }
}
.dialogue-container .container {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.7) 25vh
  );
  border-radius: 12px;
  padding: 0;
  overflow-y: auto;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  color: #000;
}
@media (min-width: 740px) {
  .dialogue-container .container {
    width: clamp(500px, 60vw, 960px);
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .for-share .right {
    padding-top: 10px;
  }
}
@media (min-width: 980px) {
  .for-share .right {
    justify-content: center;
  }
}
@media (min-width: 980px) {
  .for-share .center {
    max-width: 600px;
  }
}
.for-share .score {
  width: 88%;
}
@media (min-width: 1380px) {
  .for-share .score {
    width: 88%;
  }
}
@media (min-width: 1700px) {
  .for-share .score {
    width: 80%;
  }
}
.for-end-score .right {
  display: none;
}
@media (min-width: 980px) {
  .for-end-score .center {
    flex: 5;
    padding-right: 5vw;
  }
}
@media (min-width: 1380px) {
  .for-end-score .fancy-font.--small {
    font-size: 6vh;
  }
}
.for-share .avatar,
.for-end-score .avatar {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s,
    transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}
.for-share .score li,
.for-end-score .score li {
  opacity: 0;
  transform: translateX(-100px) skewX(20deg) scale(1.25);
}
.for-share.--active .score li,
.for-end-score.--active .score li {
  opacity: 1;
  transform: none;
}
.for-share.--active .avatar,
.for-end-score.--active .avatar {
  opacity: 1;
  transform: none;
}
.for-dialogue {
  background: linear-gradient(
    to bottom,
    rgba(209, 209, 209, 0.7),
    rgba(209, 209, 209, 0.5)
  );
}
.for-dialogue .popup-container {
  width: 100%;
}
.for-dialogue .avatar {
  position: absolute;
  width: 30vw;
  right: -5vw;
  bottom: 0;
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 740px) {
  .for-dialogue .avatar {
    width: clamp(300px, 26vw, 500px);
    right: initial;
    left: 50%;
    margin-left: clamp(300px, 38vw, 560px);
    transform: translate(-50%, 40px);
  }
}
.for-dialogue .avatar .img:before {
  padding-bottom: 112.5%;
}
@media (min-width: 740px) {
  .for-dialogue .btn-close {
    right: initial;
    left: 50%;
    top: 10px;
    margin-left: clamp(250px, 30vw, 480px);
    transform: translateX(-50%);
  }
}
.for-dialogue .btn-close .icon:before {
  background-color: #000;
}
@media (hover: hover) {
  .for-dialogue .btn-close:hover {
    transform: translateX(-50%) scale(1.125);
  }
}
.for-dialogue.--active .avatar {
  transform: none;
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}
@media (min-width: 740px) {
  .for-dialogue.--active .avatar {
    transform: translate(-50%, 0);
  }
}
.for-loading {
  background: radial-gradient(circle, rgba(32, 32, 32, 0.3) 20%, #000 90%);
}
.for-loading .popup-container {
  transform: none;
}
.for-mail {
  isolation: isolate;
  z-index: 899;
}
.for-mail:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../images/deco/bg-quest-list.png") no-repeat center center;
  background-size: cover;
  left: 0;
  top: 0;
  opacity: 0.2;
  z-index: -1;
}
.for-mail .nav-toggle {
  pointer-events: none;
}
.--show-nav .nav-toggle,
.--active .nav-toggle {
  pointer-events: auto;
}
.--show-nav .nav-toggle i:nth-of-type(1),
.--active .nav-toggle i:nth-of-type(1) {
  transform: translateY(9px) rotate(135deg);
}
@media (min-width: 740px) {
  .--show-nav .nav-toggle i:nth-of-type(1),
  .--active .nav-toggle i:nth-of-type(1) {
    transform: translateY(10.5px) rotate(135deg);
    transition-delay: 0.1s;
  }
}
.--show-nav .nav-toggle i:nth-of-type(2),
.--active .nav-toggle i:nth-of-type(2) {
  transform: scaleX(0);
}
.--show-nav .nav-toggle i:nth-of-type(3),
.--active .nav-toggle i:nth-of-type(3) {
  transform: translateY(-9px) rotate(-135deg);
  transition-delay: 0.2s;
}
@media (min-width: 740px) {
  .--show-nav .nav-toggle i:nth-of-type(3),
  .--active .nav-toggle i:nth-of-type(3) {
    transform: translateY(-10.5px) rotate(-135deg);
  }
}
.--show-nav .nav-toggle span,
.--active .nav-toggle span {
  transform: translate(-30%, -50%);
  opacity: 0;
  transition-delay: 0s;
}
.for-instantbox.--active {
  pointer-events: none;
}
.for-instantbox .popup-container {
  flex-direction: column;
  justify-content: flex-end;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .for-instantbox .popup-container {
    padding: 10px;
  }
}
@media (min-width: 740px) {
  .for-instantbox .popup-container {
    padding: 10px 10vw 2.5vh;
  }
}
@media (min-width: 980px) {
  .for-instantbox .popup-container {
    padding: 2.5vh 18vw;
  }
}
.for-instantbox .btn-area {
  padding-top: 10px;
  flex-shrink: 0;
}
@media (min-width: 740px) {
  .for-instantbox .btn-area {
    min-width: 180px;
    padding: 0;
  }
}
.for-instantbox .btn {
  width: 100%;
  white-space: nowrap;
}
.for-instantbox .container {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 740px) {
  .for-instantbox .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.for-instantbox .information {
  padding-right: 1em;
}
.for-instantbox .instantbox-container {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(to bottom, #fff, #ccc);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: #083860;
  border-radius: 12px;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px 0px;
}
@media (min-width: 740px) {
  .for-instantbox .instantbox-container {
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 29px 0px;
  }
}
@media (min-width: 1380px) {
  .for-instantbox .instantbox-container {
    padding: 20px;
  }
}
.for-instantbox.--active {
  pointer-events: none;
}
.for-instantbox.--active .instantbox-container {
  pointer-events: auto;
}
.modal-container {
  display: flex;
  flex-direction: column;
  width: 88%;
  padding: 20px 0;
  border-radius: 12px;
  color: #b0f7ff;
  font-size: 1.125em;
}
.modal-container > div {
  text-align: center;
}
@media (min-width: 576px) {
  .modal-container {
    width: clamp(320px, 36vw, 560px);
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .modal-container {
    padding: 30px 0;
  }
}
.modal-container p {
  margin: 0 auto 1em;
  font-weight: normal;
}
.modal-container .btn-close {
  right: 0;
  top: 0;
}
.modal-container .fz-A,
.modal-container .fz-B,
.modal-container .fz-C {
  font-weight: normal;
  font-size: 1.5em;
}
.modal-container .modal-header {
  padding-bottom: 20px;
}
.modal-container .modal-body {
  padding: 20px;
}
.modal-container .modal-footer {
  padding: 20px 20px 0;
  border-top: 1px solid rgba(176, 247, 255, 0.1);
}
.for-modal .popup-container {
  justify-content: center;
}
.result-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .result-item {
    width: calc(100% - 40px);
  }
}
.result-item .ri-top {
  display: block;
  text-align: center;
  padding: 5px 0;
  margin: 0 auto;
  font-size: 0.875em;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .result-item .ri-top {
    border-bottom: 1px solid #f3b25c;
  }
}
@media (min-width: 980px) {
  .result-item .ri-top {
    padding: 5px 1.5em;
    width: max-content;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(to bottom, rgba(243, 178, 92, 0), #f3b25c);
  }
}
@media (min-width: 1380px) {
  .result-item .ri-top {
    padding: 10px 1.5em 5px;
    font-size: 1em;
  }
}
.result-item .ri-top strong {
  font-family: "Quantico", sans-serif;
  font-size: 1.5em;
}
.result-item .ri-middle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1.9vh;
}
.result-item .ri-middle .skill {
  flex-shrink: 0;
  margin: 0 8px;
  width: 72px;
}
@media (min-width: 980px) {
  .result-item .ri-middle .skill {
    width: 58px;
  }
}
@media (min-width: 1100px) {
  .result-item .ri-middle .skill {
    width: 64px;
  }
}
@media (min-width: 1380px) {
  .result-item .ri-middle .skill {
    width: 72px;
    margin: 5px 10px;
  }
}
@media (min-width: 1700px) {
  .result-item .ri-middle .skill {
    width: 88px;
  }
}
.result-item .ri-bottom {
  font-family: "Quantico", sans-serif;
  text-align: center;
  color: #fdc275;
  font-size: 1.25em;
}
@media (min-width: 980px) {
  .result-item .ri-bottom {
    font-size: 1.25em;
    padding-bottom: 20px;
  }
}
@media (min-width: 1380px) {
  .result-item .ri-bottom {
    font-size: 1.625em;
  }
}
.result-item .ri-bottom strong {
  font-size: 3em;
  background: linear-gradient(
    to bottom,
    #fdc275,
    #cd8d39 50%,
    #ffe0b7 50.1%,
    #fdc275 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.result-item .ri-bottom span {
  margin-left: 0.25em;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}
.writing-score {
  position: relative;
  z-index: 2;
  border: 1px solid #ad8d66;
  border-radius: 12px;
  padding: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  max-width: 520px;
  margin: 0 auto;
}
@media (min-width: 740px) {
  .writing-score {
    min-height: 35vh;
  }
}
@media (min-width: 980px) {
  .writing-score {
    height: 56vh;
  }
}
.writing-score li {
  background: linear-gradient(to bottom, #d4b480, #997958);
  width: calc(50% - 2px);
  padding: 10px;
  box-sizing: border-box;
  font-family: "Quantico", sans-serif;
  color: #000;
}
@media (min-width: 980px) {
  .writing-score li {
    padding: 20px;
  }
}
@media (min-width: 1700px) {
  .writing-score li {
    padding: 20px 30px;
  }
}
.writing-score li:nth-of-type(1) {
  border-radius: 9.6px 0 0 0;
}
.writing-score li:nth-of-type(2) {
  border-radius: 0 9.6px 0 0;
}
.writing-score li:nth-of-type(3) {
  border-radius: 0 0 0 9.6px;
  margin-top: 4px;
}
.writing-score li:nth-of-type(4) {
  border-radius: 0 0 9.6px 0;
  margin-top: 4px;
}
.writing-score li:nth-of-type(2n + 2) {
  margin-left: 4px;
}
.writing-score .field {
  line-height: 1.125em;
  font-size: 0.8125em;
  display: block;
  width: 100%;
}
@media (min-width: 740px) {
  .writing-score .field {
    font-size: 0.875em;
  }
}
@media (min-width: 980px) {
  .writing-score .field {
    border-bottom: 1px solid #000;
    padding-bottom: 0.75em;
    margin-bottom: 0.5em;
  }
}
@media (min-width: 1380px) {
  .writing-score .field {
    font-size: 1em;
  }
}
.writing-score .score {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: 100%;
  flex-wrap: nowrap;
}
.writing-score .score strong {
  font-size: 2.5em;
  line-height: 1.125em;
}
@media (min-width: 740px) {
  .writing-score .score strong {
    font-size: 3em;
  }
}
@media (min-width: 1380px) {
  .writing-score .score strong {
    font-size: 4em;
  }
}
.writing-score .score span {
  opacity: 0.3;
  line-height: 1.125em;
  margin-left: 0.5em;
}
@media (min-width: 1380px) {
  .writing-score .score span {
    font-size: 2em;
  }
}
.multi-result-item {
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
  opacity: 0;
  transform: translate(-80px, 0);
  flex: 1;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .multi-result-item {
    margin-bottom: clamp(20px, 3vh, 40px);
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .multi-result-item {
    margin-bottom: 40px;
  }
}
@media (min-width: 980px) {
  .multi-result-item {
    max-width: calc(30vw - 35px);
    flex: 1;
    transform: translateY(80px) skewY(10deg);
  }
  .multi-result-item + .multi-result-item {
    margin-left: 35px;
  }
}
@media (min-width: 1380px) {
  .multi-result-item {
    max-width: calc(26vw - 50px);
  }
  .multi-result-item + .multi-result-item {
    margin-left: 40px;
  }
}
@media (min-width: 1700px) {
  .multi-result-item + .multi-result-item {
    margin-left: 50px;
  }
}
.multi-result-item .card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backface-visibility: hidden;
  height: 100%;
}
.multi-result-item .card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  background-image: url("../images/card/bg-card2.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  height: 100%;
}
.multi-result-item .card-front:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  position: absolute;
}
.multi-result-item .card-front .name {
  width: 100%;
  position: absolute;
  width: 100%;
  bottom: 0;
  font-family: "Quantico", sans-serif;
  height: 40px;
  text-align: center;
  font-size: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(168, 138, 55, 0.5),
    rgba(0, 0, 0, 0.3)
  );
  border-radius: 0 0 12px 12px;
}
@media (min-width: 980px) {
  .multi-result-item .card-front .name {
    height: 50px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-result-item .card-front .name {
    height: 80px;
    font-size: 1.5em;
  }
}
.multi-result-item .card-front .avatar {
  width: 35%;
  position: absolute;
  left: 32.5%;
  bottom: 40px;
  transition: initial;
  opacity: 1;
  transition: initial;
  z-index: 2;
}
@media (min-width: 740px) {
  .multi-result-item .card-front .avatar {
    bottom: 50px;
  }
}
@media (min-width: 980px) {
  .multi-result-item .card-front .avatar {
    width: 70%;
    left: 15%;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-result-item .card-front .avatar {
    bottom: 80px;
  }
}
.multi-result-item .card-front .avatar .img:before {
  padding-bottom: 113%;
}
.multi-result-item .card-back {
  display: flex;
  flex-direction: column;
  position: relative;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background: linear-gradient(
    160deg,
    rgba(9, 9, 9, 0.75),
    rgba(57, 44, 14, 0.62),
    rgba(168, 138, 55, 0.4)
  );
  border-radius: 12px;
  padding-bottom: 40px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  height: 100%;
}
@media (min-width: 1380px) {
  .multi-result-item .card-back {
    padding-bottom: 50px;
  }
}
@media (min-width: 1700px) {
  .multi-result-item .card-back {
    padding-bottom: 60px;
  }
}
.multi-result-item .card-back .avatar {
  position: absolute;
  right: 0;
  width: 72px;
  z-index: 1;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-result-item .card-back .avatar {
    top: -10px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .multi-result-item .card-back .avatar {
    width: 160px;
    top: initial;
    bottom: 40px;
  }
}
@media (min-width: 980px) {
  .multi-result-item .card-back .avatar {
    width: 40%;
    bottom: 30px;
  }
}
@media (min-width: 1380px) {
  .multi-result-item .card-back .avatar {
    bottom: 50px;
  }
}
@media (min-width: 1700px) {
  .multi-result-item .card-back .avatar {
    bottom: 60px;
  }
}
.multi-result-item .card-back .avatar .img:before {
  padding-bottom: 113%;
}
.multi-result-item .card-back .words {
  font-weight: bold;
  line-height: 1.375;
  background: linear-gradient(
    to bottom,
    #fdc275,
    #fff 50%,
    #fdc275 50.1%,
    #ffe0b7 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  min-height: 80px;
  color: transparent;
  padding: 10px 80px 10px 0;
}
@media (min-width: 740px) {
  .multi-result-item .card-back .words {
    min-height: 4em;
    text-align: left;
    padding: 10px 20px;
  }
}
@media (min-width: 1100px) {
  .multi-result-item .card-back .words {
    padding: 10px 40px;
  }
}
@media (min-width: 1700px) {
  .multi-result-item .card-back .words {
    padding: 10px 60px;
    font-size: 1.5em;
  }
}
.multi-result-item .info {
  background-color: #e5ecf1;
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #102848;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 0.875em;
  height: 30px;
  background: linear-gradient(
    -240deg,
    #e5ecf1 10%,
    #ecf7ff 42%,
    #959db2 42.1%,
    #d7e1e8 75%,
    #e5ecf1 100%
  );
  border-radius: 12px 12px 0 0;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .multi-result-item .info {
    width: 90%;
    margin-left: 5%;
  }
}
@media (min-width: 740px) {
  .multi-result-item .info {
    height: 40px;
    font-size: 0.9375em;
    border-radius: 0 0 12px 12px;
  }
}
@media (min-width: 1100px) {
  .multi-result-item .info {
    font-size: 1em;
  }
}
@media (min-width: 1380px) {
  .multi-result-item .info {
    min-height: 50px;
    padding: 0 20px;
    font-size: 1.125em;
  }
}
@media (min-width: 1700px) {
  .multi-result-item .info {
    min-height: 60px;
    font-size: 1.25em;
  }
}
.multi-result-item .info .name {
  font-family: "Quantico", sans-serif;
}
@media (min-width: 1700px) {
  .multi-result-item .info .name {
    font-size: 1.2em;
  }
}
.multi-result-item .info .contribution {
  color: #2f55af;
}
.multi-result-item .info .contribution strong {
  font-family: "Quantico", sans-serif;
}
@media (min-width: 1700px) {
  .multi-result-item .info .contribution strong {
    font-size: 1.2em;
  }
}
.multi-result-item .result-item {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.multi-result-item .result-item:before {
  content: "";
  display: block;
  animation: none;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 0;
}
@media (min-width: 1700px) {
  .multi-result-item .result-item:before {
    height: 30px;
  }
}
.multi-result-item .result-item:after {
  content: "";
  display: block;
  animation: none;
  top: initial;
  width: 200%;
  z-index: 3;
  height: 50px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .multi-result-item .result-item:after {
    top: 70px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .multi-result-item .result-item:after {
    bottom: -65px;
    height: 70px;
  }
}
@media (min-width: 980px) {
  .multi-result-item .result-item:after {
    bottom: -15px;
    height: 60px;
    transform: translate(-50%, 0);
    left: 0;
  }
}
@media (min-width: 1380px) {
  .multi-result-item .result-item:after {
    bottom: -30px;
    height: 80px;
  }
}
@media (min-width: 1700px) {
  .multi-result-item .result-item:after {
    bottom: -30px;
    height: 90px;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-result-item .result-item .ri-top {
    text-align: left;
    width: 100%;
    padding-left: 10px;
    border: none;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .multi-result-item .result-item .ri-top {
    padding-left: 30px;
  }
}
@media (min-width: 980px) {
  .multi-result-item .result-item .ri-top {
    margin-bottom: 4vh;
  }
}
.multi-result-item .result-item .ri-middle {
  width: 100%;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-result-item .result-item .ri-middle {
    justify-content: flex-start;
  }
}
@media (min-width: 0) and (max-width: 739.9px) {
  .multi-result-item .result-item .ri-middle {
    padding-left: 6px;
    padding-top: 5px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .multi-result-item .result-item .ri-middle {
    padding-left: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
@media (min-width: 0) and (max-width: 575.9px) {
  .multi-result-item .result-item .ri-middle .skill {
    width: 56px;
    margin: 0 4px;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-result-item .result-item .ri-bottom {
    font-size: 0.875em;
    position: absolute;
    right: 10px;
    top: 73px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .multi-result-item .result-item .ri-bottom {
    font-size: 1em;
    top: 90px;
    right: 160px;
  }
}
@media (min-width: 980px) {
  .multi-result-item .result-item .ri-bottom {
    padding-left: 10%;
    padding-top: 13vh;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    font-size: 1em;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-result-item .result-item .ri-bottom {
    padding-top: 15vh;
  }
}
@media (min-width: 1380px) {
  .multi-result-item .result-item .ri-bottom {
    font-size: 1.375em;
  }
}
@media (min-width: 1700px) {
  .multi-result-item .result-item .ri-bottom {
    font-size: 1.5em;
  }
}
.for-share.--active .multi-result-item {
  opacity: 1;
  transform: none;
}
.for-share.--active .multi-result-item:nth-of-type(1) {
  transition-delay: 0s;
}
.for-share.--active .multi-result-item:nth-of-type(1) .card-inner {
  transform: rotateY(180deg) scale(1) translateZ(0);
  transition-delay: 1.75s;
}
.for-share.--active .multi-result-item:nth-of-type(2) {
  transition-delay: 0.3s;
}
.for-share.--active .multi-result-item:nth-of-type(2) .card-inner {
  transform: rotateY(180deg) scale(1) translateZ(0);
  transition-delay: 1.95s;
}
.for-share.--active .multi-result-item:nth-of-type(3) {
  transition-delay: 0.6s;
}
.for-share.--active .multi-result-item:nth-of-type(3) .card-inner {
  transform: rotateY(180deg) scale(1) translateZ(0);
  transition-delay: 2.15s;
}
.for-share.--active .multi-result-item:nth-of-type(4) {
  transition-delay: 0.9s;
}
.for-share.--active .multi-result-item:nth-of-type(4) .card-inner {
  transform: rotateY(180deg) scale(1) translateZ(0);
  transition-delay: 2.35s;
}
.for-share.--active .multi-result-item:nth-of-type(5) {
  transition-delay: 1.2s;
}
.for-share.--active .multi-result-item:nth-of-type(5) .card-inner {
  transform: rotateY(180deg) scale(1) translateZ(0);
  transition-delay: 2.55s;
}
.for-share.--active .multi-result-item:nth-of-type(6) {
  transition-delay: 1.5s;
}
.for-share.--active .multi-result-item:nth-of-type(6) .card-inner {
  transform: rotateY(180deg) scale(1) translateZ(0);
  transition-delay: 2.75s;
}
@keyframes multi-result-show {
  0% {
    opacity: 0;
    transform: translateY(-100px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.--show-popup .global-back {
  opacity: 0;
  pointer-events: none;
}
.game-home-container {
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15vh 2vw 15vh;
  flex-direction: column;
}
.game-home-container .logo {
  width: clamp(320px, 92vw, 480px);
  background: url("../images/logo-2023.png") no-repeat center center;
  background-size: contain;
  margin-bottom: 5vh;
  transform: translateY(5vw) scale(1.125);
}
@media (min-width: 740px) {
  .game-home-container .logo {
    width: clamp(380px, 35vw, 920px);
  }
}
.game-home-container .logo:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 48%;
  padding-bottom: 44%;
}
.game-home-container .home-menu,
.game-home-container .home-login {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 11em;
}
@media (min-width: 576px) {
  .game-home-container .home-menu,
  .game-home-container .home-login {
    width: clamp(300px, 50vw, 600px);
  }
}
@media (min-width: 576px) {
  .game-home-container .home-login {
    width: clamp(300px, 45vw, 480px);
  }
}
.game-home-container .btn-system {
  margin-top: 20px !important;
}
.game-home-container a,
.game-home-container button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px) scale(0.8);
  transition-delay: 0s;
  cursor: pointer;
}
.game-home-container + .game-bg-area + .copyright {
  display: block;
}
.game-home-container.--ready .logo {
  transform: translateY(0) scale(1);
  transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s;
}
.game-home-container.--ready button,
.game-home-container.--ready a {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.game-home-container.--ready button:nth-of-type(1),
.game-home-container.--ready a:nth-of-type(1) {
  transition-delay: 1s;
}
.game-home-container.--ready button:nth-of-type(2),
.game-home-container.--ready a:nth-of-type(2) {
  transition-delay: 1.15s;
}
.game-home-container.--ready button:nth-of-type(3),
.game-home-container.--ready a:nth-of-type(3) {
  transition-delay: 1.3s;
}
.game-home-container.--ready button:nth-of-type(4),
.game-home-container.--ready a:nth-of-type(4) {
  transition-delay: 1.45s;
}
.game-home-container.--ready button:nth-of-type(5),
.game-home-container.--ready a:nth-of-type(5) {
  transition-delay: 1.6s;
}
.game-home-container.--ready button:nth-of-type(6),
.game-home-container.--ready a:nth-of-type(6) {
  transition-delay: 1.75s;
}
.game-home-container.--ready button:nth-of-type(7),
.game-home-container.--ready a:nth-of-type(7) {
  transition-delay: 1.9s;
}
.game-home-container.--ready button:nth-of-type(8),
.game-home-container.--ready a:nth-of-type(8) {
  transition-delay: 2.05s;
}
.game-home-container.--ready button:nth-of-type(9),
.game-home-container.--ready a:nth-of-type(9) {
  transition-delay: 2.2s;
}
.game-home-container.--ready button:nth-of-type(10),
.game-home-container.--ready a:nth-of-type(10) {
  transition-delay: 2.35s;
}
.home-menu .sci-form-item {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .home-menu .sci-form-item {
    width: calc(100% - 40px);
  }
}
@media (min-width: 740px) {
  .home-menu .sci-form-item {
    width: 100%;
    max-width: 400px;
    align-self: center;
  }
}
@media (min-width: 1700px) {
  .home-menu .sci-form-item {
    max-width: 450px;
  }
}
.game-nav-area {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.5),
    rgba(142, 164, 186, 0.2),
    rgba(166, 204, 245, 0.3)
  );
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform, backdrop-filter, visibility;
  padding: 50px 20px 20px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 899;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-nav-area {
    overflow: hidden;
    overflow-y: auto;
  }
}
@media (min-width: 980px) {
  .game-nav-area {
    overflow-y: auto;
  }
}
@media (min-width: 740px) {
  .game-nav-area {
    padding: 4vh;
  }
}
.game-nav-area .section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0f7ff;
  font-family: "Quantico", sans-serif;
  margin-top: 10px;
}
.game-nav-area .section-title:before,
.game-nav-area .section-title:after {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  border-top: 1px solid rgba(176, 247, 255, 0.2);
}
.game-nav-area .tab-nav {
  display: flex;
}
.game-nav-area .tab-nav > div {
  font-size: clamp(18px, 3vh, 48px);
  color: #fff;
  flex: 1;
  font-family: "Quantico", sans-serif;
  padding: 10px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  position: relative;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: text-shadow, backdrop-filter, background-color;
  overflow: hidden;
  text-shadow: #0e151d 0px 0px 5px, #1c2839 0px 0px 10px;
}
.game-nav-area .tab-nav > div:before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  border-top: 3px solid #fff;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform-origin: center center;
  transform: scaleX(0);
}
@media (hover: hover) {
  .game-nav-area .tab-nav > div:hover {
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
  }
}
.game-nav-area .tab-nav > div.--active {
  background-color: rgba(37, 47, 56, 0.4);
  background: linear-gradient(
    to top,
    rgba(37, 47, 56, 0.4),
    rgba(92, 110, 126, 0.4)
  );
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
}
.game-nav-area .tab-nav > div.--active:before {
  transform: none;
}
.game-nav-area .tab-content {
  padding: 10px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(
    to bottom,
    rgba(37, 47, 56, 0.4),
    rgba(61, 75, 91, 0.3),
    rgba(10, 38, 59, 0.5)
  );
  flex: 1;
}
@media (min-width: 740px) {
  .game-nav-area .tab-content {
    padding: 5%;
  }
}
.game-nav-area .tab-content .content {
  display: none;
  height: 100%;
}
.game-nav-area .tab-content .content.--active {
  display: block;
}
.game-nav-area .profile {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  justify-content: space-between;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform, backdrop-filter;
  border-radius: 6px 6px 0 0;
  padding: 10px 0 0 15px;
  background: linear-gradient(
    to bottom,
    rgba(213, 245, 255, 0.5),
    rgba(213, 245, 255, 0) 50%,
    rgba(23, 31, 43, 0.4)
  );
  border-bottom: none;
}
@media (min-width: 740px) {
  .game-nav-area .profile {
    padding: 10px 6% 0;
  }
}
.game-nav-area .profile ul {
  padding: 0;
}
.game-nav-area .profile li {
  color: #b0f7ff;
  line-height: 1.25em;
  font-family: "Quantico", sans-serif;
  display: block;
  text-align: left;
  text-shadow: 0 2px 5px rgba(23, 29, 41, 0.35);
}
.game-nav-area .profile li.title {
  font-size: 1.5em;
  color: #fff;
  font-family: "Quantico", sans-serif;
}
@media (min-width: 980px) {
  .game-nav-area .profile li.title {
    font-size: 5vh;
  }
}
.game-nav-area .profile .avatar {
  width: 32%;
}
@media (min-width: 740px) {
  .game-nav-area .profile .avatar {
    width: 30%;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-nav-area .profile .avatar {
    width: 36%;
    margin-right: 10px;
  }
}
.game-nav-area .profile .avatar .img:before {
  padding-bottom: 112.5%;
}
.game-nav-area .profile .highlight {
  bottom: -100px;
  height: 100px;
  width: 160%;
  left: -30%;
  background-size: contain;
}
.game-nav-area .pos {
  display: flex;
  align-items: center;
  border-radius: 3px;
  padding: 0.5em 1em;
  margin-top: 1em;
  width: 100%;
  justify-content: center;
  font-family: "Quantico", sans-serif;
  color: #b0f7ff;
}
@media (min-width: 740px) {
  .game-nav-area .pos {
    font-size: 1.125em;
  }
}
.game-nav-area .pos .icon {
  margin: 0 6px;
}
.game-nav-area .pos .icon:before {
  background-color: #2fc1fb;
}
.game-nav-area .nav-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translate(0, -80px);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
}
@media (min-width: 740px) {
  .game-nav-area .nav-container {
    width: clamp(600px, 60%, 900px);
    padding: 20px;
  }
}
@media (min-width: 980px) {
  .game-nav-area .nav-container {
    width: clamp(700px, 60%, 900px);
  }
}
.game-nav-area .badge-group {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 9;
  width: 100%;
}
@media (min-width: 740px) {
  .game-nav-area .badge-group {
    justify-content: center;
  }
}
.game-nav-area .badge-group .img {
  width: 54px;
  margin-right: 5px;
}
@media (min-width: 0) and (max-width: 575.9px) {
  .game-nav-area .badge-group .img {
    width: calc(20% - 5px);
  }
}
@media (min-width: 1380px) {
  .game-nav-area .badge-group .img {
    margin-right: 8px;
  }
}
@media (hover: hover) {
  .game-nav-area .badge-group .img {
    transition-duration: 0.3s;
  }
  .game-nav-area .badge-group .img:hover {
    filter: brightness(1.2);
    transform: scale(2);
  }
}
.game-nav-area .badge-collection {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 20px 10px 10px;
  border-radius: 0 0 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    to top,
    rgba(213, 245, 255, 0.5),
    rgba(213, 245, 255, 0) 50%,
    rgba(23, 31, 43, 0.5)
  );
  border-top: none;
}
.game-nav-area .badge-collection .section-title {
  width: 100%;
  padding: 0 0 10px 0;
  line-height: 1.125em;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-nav-area .badge-collection .section-title {
    display: none;
  }
}
@media (min-width: 980px) {
  .game-nav-area .badge-collection .section-title:before {
    display: none;
  }
  .game-nav-area .badge-collection .section-title:after {
    min-width: 40px;
    margin: 0 10px;
  }
}
@media (min-width: 1380px) {
  .game-nav-area .badge-collection .section-title {
    letter-spacing: 2px;
  }
  .game-nav-area .badge-collection .section-title:after {
    min-width: 50px;
    margin: 0 15px;
  }
}
.game-nav-area .badge-collection .wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
@media (min-width: 740px) {
  .game-nav-area .badge-collection {
    flex-wrap: nowrap;
    width: 100%;
    padding: 20px 5% 10px;
  }
}
.game-nav-area .badge-collection .badge {
  flex: 1;
  margin: 0 2px;
  border: 1px dashed rgba(246, 219, 156, 0.6);
  border-radius: 50%;
  padding: 2px;
  box-sizing: border-box;
}
.game-nav-area .badge-collection .badge .img {
  filter: grayscale(1) brightness(0.6);
  opacity: 0.2;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-nav-area .badge-collection .badge {
    max-width: 54px;
  }
}
@media (min-width: 740px) {
  .game-nav-area .badge-collection .badge {
    min-width: 60px;
    margin: 0;
  }
  .game-nav-area .badge-collection .badge + .badge {
    margin-left: 10px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-nav-area .badge-collection .badge {
    min-width: 70px;
  }
}
.game-nav-area .badge-collection .badge.--active {
  border: none;
  border-radius: 50%;
  padding: 0;
  background-color: initial;
}
.game-nav-area .badge-collection .badge.--active .img {
  filter: none;
  opacity: 1;
}
.game-nav-area .nav-toggle {
  pointer-events: none;
}
.radio-group {
  border: 1px solid #fff;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.radio-group input[type="radio"] {
  display: none;
}
.radio-group input[type="radio"] + label {
  background-color: transparent;
  border-radius: 0;
  height: 30px;
  min-height: initial;
  color: #fff;
  white-space: nowrap;
  padding: 0 5px;
  border-left: 1px solid #fff;
  font-weight: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: color, background-color;
}
.radio-group input[type="radio"] + label:first-of-type {
  border-left: none;
}
@media (min-width: 576px) {
  .radio-group input[type="radio"] + label {
    padding: 0 1em;
  }
}
@media (min-width: 740px) {
  .radio-group input[type="radio"] + label {
    padding: 0 1em;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .radio-group input[type="radio"] + label {
    height: 34px;
  }
}
.radio-group input[type="radio"] + label:before {
  display: none;
}
@media (hover: hover) {
  .radio-group input[type="radio"] + label:hover {
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.3);
  }
}
.radio-group input[type="radio"]:checked + label {
  background-color: #fff;
  color: #083860;
  font-weight: normal;
}
.radio-group input[type="radio"]:active + label {
  transform: initial;
  transition-duration: initial;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: initial;
  font-weight: normal;
}
.radio-group.--disabled {
  filter: grayscale(1);
  pointer-events: none;
  opacity: 0.4;
}
.radio-group.--disabled input[type="radio"]:checked + label {
  color: #555;
}
.game-setting-container .form-item {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-setting-container .form-item {
    padding: 13px 0;
  }
}
.game-setting-container .form-item .field {
  color: #fff;
  font-size: clamp(18px, 2.75vh, 48px);
  width: initial;
}
.game-setting-container .form-item .value {
  width: max-content;
}
.nav-menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: clamp(18px, 2.75vh, 48px);
  line-height: 2em;
  padding: 5vh 0 2vh;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform, backdrop-filter;
}
.nav-menu a,
.nav-menu button {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  color: #fff;
  text-align: center;
  transition: text-shadow 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.nav-menu a:before,
.nav-menu a:after,
.nav-menu button:before,
.nav-menu button:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nav-menu a:before,
.nav-menu button:before {
  background-color: #fff;
  transform-origin: left center;
  transform: scaleX(0);
  margin-right: 0.5em;
  background: linear-gradient(
    to right,
    rgba(176, 247, 255, 0.5),
    rgba(176, 247, 255, 0)
  );
}
.nav-menu a:after,
.nav-menu button:after {
  background-color: #fff;
  transform-origin: right center;
  transform: scaleX(0);
  margin-left: 0.5em;
  background: linear-gradient(
    to left,
    rgba(176, 247, 255, 0.5),
    rgba(176, 247, 255, 0)
  );
}
.nav-menu a.--disabled,
.nav-menu button.--disabled {
  filter: grayscale(1);
  cursor: not-allowed;
}
.nav-menu a.--disabled span,
.nav-menu button.--disabled span {
  color: #999;
}
.nav-menu a.--disabled:before,
.nav-menu button.--disabled:before {
  opacity: 0.5;
}
.nav-menu a.--disabled:after,
.nav-menu button.--disabled:after {
  opacity: 0.5;
}
@media (hover: hover) {
  .nav-menu a.--disabled:hover span,
  .nav-menu button.--disabled:hover span {
    color: #999;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
  }
}
@media (hover: hover) {
  .nav-menu a:hover,
  .nav-menu button:hover {
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
  }
  .nav-menu a:hover:before,
  .nav-menu button:hover:before {
    transform: none;
  }
  .nav-menu a:hover:after,
  .nav-menu button:hover:after {
    transform: none;
  }
}
@media (hover: none) {
  .nav-menu a:active,
  .nav-menu button:active {
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
  }
  .nav-menu a:active:before,
  .nav-menu button:active:before {
    transform: none;
  }
  .nav-menu a:active:after,
  .nav-menu button:active:after {
    transform: none;
  }
}
.--show-nav .game-nav-area {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.--show-nav .game-nav-area .nav-container {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.--show-nav .game-nav-area .nav-toggle {
  pointer-events: auto;
}
.--show-nav .global-back {
  opacity: 0;
  pointer-events: none;
}
.character-form {
  padding: 10px;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  background-color: rgba(9, 34, 45, 0.3);
  border-radius: 12px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .character-form {
    width: 100%;
    padding: 10px 20px;
  }
}
@media (min-width: 740px) {
  .character-form {
    padding: 30px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .character-form {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
@media (min-width: 1380px) {
  .character-form {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.character-form .select-title-area {
  text-align: left;
  width: 100%;
  justify-content: flex-start;
  padding-bottom: 10px;
}
.character-form .select-title-area h1,
.character-form .select-title-area h2 {
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .character-form .select-title-area {
    padding-bottom: 5vh;
  }
}
.character-card {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .character-card {
    display: none;
  }
}
@media (min-width: 980px) {
  .character-card {
    position: absolute;
    z-index: 6;
    left: 0;
    top: 0;
    width: calc(100% - 40px);
  }
  .character-card:before {
    content: "";
    display: block;
    width: 20px;
    height: 60%;
    background-color: #000000;
    opacity: 1;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      rgba(176, 247, 255, 0.6) 3px,
      rgba(176, 247, 255, 0.6) 6px
    );
    position: absolute;
    left: -10px;
    top: 20px;
  }
}
@media (min-width: 1100px) {
  .character-card {
    width: calc(100% - 60px);
  }
}
@media (min-width: 1380px) {
  .character-card {
    width: calc(100% - 7vw);
  }
}
.character-card .text-holder {
  padding: 20px;
  background-color: rgba(176, 247, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 90%);
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .character-card .text-holder {
    padding: 30px 40px;
  }
}
.character-card h2 {
  font-size: 3vh;
  color: #fff;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  margin-bottom: 0.5em;
}
.character-card p {
  color: #b0f7ff;
}
@keyframes vtlmove {
  0% {
    transform: scaleY(0);
    bottom: 0;
    top: initial;
    transform-origin: center bottom;
  }
  50% {
    transform: scaleY(1);
    transform-origin: center bottom;
  }
  50.1% {
    bottom: initial;
    top: 0;
    transform: scaleY(1);
    transform-origin: center top;
  }
  100% {
    bottom: initial;
    top: 0;
    transform: scaleY(0);
    transform-origin: center top;
  }
}
@keyframes hrmove {
  0% {
    transform: scaleX(0);
    left: 0;
    right: initial;
    transform-origin: left center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  50.1% {
    left: initial;
    right: 0;
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    left: initial;
    right: 0;
    transform: scaleX(0);
    transform-origin: right center;
  }
}
.character-swiper {
  width: 100%;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .character-swiper {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 80%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0) 100%);
  }
}
@media (min-width: 980px) {
  .character-swiper {
    width: 55%;
    display: flex;
    align-items: flex-end;
  }
}
.character-swiper .swiper-container {
  width: 40vh;
  margin: 0 auto;
}
@media (min-width: 980px) {
  .character-swiper .swiper-container {
    width: 62vh;
  }
}
.character-swiper .swiper-ctrl {
  position: absolute;
  left: 0;
  width: 100%;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .character-swiper .swiper-ctrl {
    top: 50%;
    justify-content: space-between;
  }
}
@media (min-width: 980px) {
  .character-swiper .swiper-ctrl {
    padding-right: clamp(360px, 35vw, 640px);
    bottom: 20vh;
  }
}
.character-swiper .avatar {
  transform: scale(0.7);
  transform-origin: center bottom;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity, filter;
  opacity: 0;
}
.character-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity;
}
.character-swiper .swiper-slide-active {
  opacity: 1;
}
.character-swiper .swiper-slide-active .avatar {
  transform: none;
  opacity: 1;
}
.character-swiper .img:before {
  padding-bottom: 147%;
}
.character-info {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  isolation: isolate;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .character-info {
    padding: 0 20px;
    margin-top: -20vh;
  }
}
@media (min-width: 980px) {
  .character-info {
    width: 45%;
    align-items: flex-start;
    padding-left: 3vw;
  }
}
.character-name {
  position: absolute;
  display: flex;
  font-size: 8vh;
  line-height: 1.125em;
  font-style: italic;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  top: 5vh;
  background: linear-gradient(
    to bottom,
    #ccc 0%,
    #fff 50%,
    #b0cedb 50.1%,
    rgba(176, 206, 219, 0) 100%
  );
  background: -webkit-linear-gradient(
    to bottom,
    #ccc 0%,
    #fff 50%,
    #b0cedb 50.1%,
    rgba(176, 206, 219, 0) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  width: 100%;
  text-align: center;
  z-index: 0;
}
@media (min-width: 980px) {
  .character-name {
    display: flex;
    font-size: 12vh;
    font-style: italic;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    top: 7vh;
    white-space: nowrap;
    font-family: "Bodoni Moda", serif;
    margin-right: 0.25em;
    padding-right: clamp(360px, 35vw, 640px);
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .character-name {
    font-size: 15vh;
    top: 5vh;
  }
}
.game-character-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-bottom: 10vh;
}
@media (min-width: 980px) {
  .game-character-container {
    flex-direction: row;
    align-items: stretch;
    padding-bottom: 0;
  }
  .game-character-container:before {
    content: "";
    display: block;
    width: 100%;
    height: 25vh;
    background-color: transparent;
    opacity: 1;
    background-image: radial-gradient(#b0f7ff 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
.game-character-container .select-title-area {
  padding-bottom: 0;
}
.game-character-container.--center-mode .select-title-area {
  padding-bottom: 1em;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-character-container.--center-mode {
    padding-top: 5vh;
    padding-bottom: 5vh;
  }
}
@media (min-width: 980px) {
  .game-character-container.--center-mode {
    justify-content: flex-start;
    padding-right: clamp(360px, 35vw, 640px);
  }
}
.game-character-container.--center-mode .character-swiper {
  z-index: 3;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-character-container.--center-mode .character-swiper {
    position: relative;
  }
}
@media (min-width: 980px) {
  .game-character-container.--center-mode .character-swiper {
    width: 100%;
  }
}
@media (min-width: 740px) {
  .game-character-container.--center-mode .character-swiper .swiper-container {
    width: 100%;
  }
}
.game-character-container.--center-mode .character-swiper .avatar {
  opacity: 1;
  filter: grayscale(0.8);
  position: relative;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
}
@media (min-width: 740px) {
  .game-character-container.--center-mode .character-swiper .avatar {
    width: 39vh;
  }
}
@media (min-width: 980px) {
  .game-character-container.--center-mode .character-swiper .avatar {
    width: 60vh;
  }
}
.game-character-container.--center-mode .character-swiper .swiper-slide {
  opacity: 1;
}
.game-character-container.--center-mode
  .character-swiper
  .swiper-slide-active
  .avatar {
  opacity: 1;
  filter: grayscale(0);
  transform: translateX(-50%) scale(1);
}
.game-character-container.--center-mode
  .character-swiper
  .swiper-slide-next
  + .swiper-slide
  .avatar,
.game-character-container.--center-mode
  .character-swiper
  .swiper-slide-next
  + .swiper-slide
  + .swiper-slide
  .avatar,
.game-character-container.--center-mode
  .character-swiper
  .swiper-slide-next
  + .swiper-slide
  + .swiper-slide
  + .swiper-slide
  .avatar {
  opacity: 0;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-character-container.--center-mode .character-info {
    margin-top: -5vh;
    padding-left: 10%;
    padding-right: 10%;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-character-container.--center-mode .character-info {
    padding-left: 15%;
    padding-right: 15%;
  }
}
.game-character-container.--center-mode .character-info .pillar {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 100px;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate(-50%, -100%);
}
.game-character-container.--center-mode .character-info .pillar i {
  display: block;
  width: 2px;
  height: 100%;
  background-color: #fff;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  transform: scaleY(0);
  bottom: 0;
  top: initial;
  transform-origin: center bottom;
  animation: vtlmove 1.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards
    infinite;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(1) {
  animation-delay: 0s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(2) {
  animation-delay: 0.15s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(3) {
  animation-delay: 0.3s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(4) {
  animation-delay: 0.45s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(5) {
  animation-delay: 0.6s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(6) {
  animation-delay: 0.75s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(7) {
  animation-delay: 0.9s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(8) {
  animation-delay: 1.05s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(9) {
  animation-delay: 1.2s;
}
.game-character-container.--center-mode
  .character-info
  .pillar
  i:nth-of-type(10) {
  animation-delay: 1.35s;
}
@media (min-width: 980px) {
  .game-character-container.--center-mode .character-info {
    position: absolute;
    width: clamp(360px, 35vw, 640px);
    right: 0;
    top: 0;
    height: 100%;
    padding-left: initial;
    padding: 10em 40px 40px 0;
  }
}
@media (min-width: 1100px) {
  .game-character-container.--center-mode .character-info {
    padding: 10em 60px 40px 0;
  }
}
@media (min-width: 1380px) {
  .game-character-container.--center-mode .character-info {
    padding: 10em 7vw 50px 0;
  }
}
.game-category-container,
.game-stage-container,
.game-mission-container {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-property: opacity, transform, visibility;
  background-color: #000;
  background: radial-gradient(circle, rgba(32, 32, 32, 0.3) 60%, #000 100%);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 8vh 10vw 10vh;
}
.game-category-container .swiper-button-next,
.game-category-container .swiper-button-prev,
.game-stage-container .swiper-button-next,
.game-stage-container .swiper-button-prev,
.game-mission-container .swiper-button-next,
.game-mission-container .swiper-button-prev {
  color: #fff;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.game-category-container .swiper-button-next:after,
.game-category-container .swiper-button-prev:after,
.game-stage-container .swiper-button-next:after,
.game-stage-container .swiper-button-prev:after,
.game-mission-container .swiper-button-next:after,
.game-mission-container .swiper-button-prev:after {
  font-size: 1.5em;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  transition: text-shadow 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-category-container .swiper-button-next:after,
  .game-category-container .swiper-button-prev:after,
  .game-stage-container .swiper-button-next:after,
  .game-stage-container .swiper-button-prev:after,
  .game-mission-container .swiper-button-next:after,
  .game-mission-container .swiper-button-prev:after {
    font-size: 20px;
  }
}
@media (min-width: 980px) {
  .game-category-container .swiper-button-next:after,
  .game-category-container .swiper-button-prev:after,
  .game-stage-container .swiper-button-next:after,
  .game-stage-container .swiper-button-prev:after,
  .game-mission-container .swiper-button-next:after,
  .game-mission-container .swiper-button-prev:after {
    font-size: 2.25em;
  }
}
.game-category-container .swiper-button-next:before,
.game-category-container .swiper-button-prev:before,
.game-stage-container .swiper-button-next:before,
.game-stage-container .swiper-button-prev:before,
.game-mission-container .swiper-button-next:before,
.game-mission-container .swiper-button-prev:before {
  content: "";
  display: block;
  width: 5em;
  height: 5em;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 50%;
  top: 50%;
  flex-shrink: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
}
.game-category-container .swiper-button-next.swiper-button-disabled,
.game-category-container .swiper-button-prev.swiper-button-disabled,
.game-stage-container .swiper-button-next.swiper-button-disabled,
.game-stage-container .swiper-button-prev.swiper-button-disabled,
.game-mission-container .swiper-button-next.swiper-button-disabled,
.game-mission-container .swiper-button-prev.swiper-button-disabled {
  opacity: 0.2;
}
.game-category-container .swiper-button-next.swiper-button-disabled:after,
.game-category-container .swiper-button-prev.swiper-button-disabled:after,
.game-stage-container .swiper-button-next.swiper-button-disabled:after,
.game-stage-container .swiper-button-prev.swiper-button-disabled:after,
.game-mission-container .swiper-button-next.swiper-button-disabled:after,
.game-mission-container .swiper-button-prev.swiper-button-disabled:after {
  box-shadow: initial;
}
@media (hover: hover) {
  .game-category-container .swiper-button-next:hover,
  .game-category-container .swiper-button-prev:hover,
  .game-stage-container .swiper-button-next:hover,
  .game-stage-container .swiper-button-prev:hover,
  .game-mission-container .swiper-button-next:hover,
  .game-mission-container .swiper-button-prev:hover {
    transform: scale(1.5);
  }
  .game-category-container .swiper-button-next:hover:after,
  .game-category-container .swiper-button-prev:hover:after,
  .game-stage-container .swiper-button-next:hover:after,
  .game-stage-container .swiper-button-prev:hover:after,
  .game-mission-container .swiper-button-next:hover:after,
  .game-mission-container .swiper-button-prev:hover:after {
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
      #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  }
  .game-category-container .swiper-button-next:hover:before,
  .game-category-container .swiper-button-prev:hover:before,
  .game-stage-container .swiper-button-next:hover:before,
  .game-stage-container .swiper-button-prev:hover:before,
  .game-mission-container .swiper-button-next:hover:before,
  .game-mission-container .swiper-button-prev:hover:before {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 1;
  }
}
.game-category-container .swiper-button-next,
.game-stage-container .swiper-button-next,
.game-mission-container .swiper-button-next {
  right: 5vw;
}
.game-category-container .swiper-button-next:after,
.game-stage-container .swiper-button-next:after,
.game-mission-container .swiper-button-next:after {
  animation: arrowscale 1.25s linear infinite;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-category-container .swiper-button-next,
  .game-stage-container .swiper-button-next,
  .game-mission-container .swiper-button-next {
    right: 5px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-category-container .swiper-button-next,
  .game-stage-container .swiper-button-next,
  .game-mission-container .swiper-button-next {
    right: 20px;
  }
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .game-category-container .swiper-button-next,
  .game-stage-container .swiper-button-next,
  .game-mission-container .swiper-button-next {
    right: 3.5vw;
  }
}
.game-category-container .swiper-button-prev,
.game-stage-container .swiper-button-prev,
.game-mission-container .swiper-button-prev {
  left: 5vw;
}
.game-category-container .swiper-button-prev:after,
.game-stage-container .swiper-button-prev:after,
.game-mission-container .swiper-button-prev:after {
  animation: arrowscale 1.25s linear infinite;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-category-container .swiper-button-prev,
  .game-stage-container .swiper-button-prev,
  .game-mission-container .swiper-button-prev {
    left: 5px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-category-container .swiper-button-prev,
  .game-stage-container .swiper-button-prev,
  .game-mission-container .swiper-button-prev {
    left: 20px;
  }
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .game-category-container .swiper-button-prev,
  .game-stage-container .swiper-button-prev,
  .game-mission-container .swiper-button-prev {
    left: 3.5vw;
  }
}
.game-category-container .swiper-pagination,
.game-stage-container .swiper-pagination,
.game-mission-container .swiper-pagination {
  position: static;
  font-family: "apparat", sans-serif;
  font-size: 0.9375em;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.7);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.game-category-container .swiper-pagination .swiper-pagination-current,
.game-stage-container .swiper-pagination .swiper-pagination-current,
.game-mission-container .swiper-pagination .swiper-pagination-current {
  color: #fff;
}
.game-category-container .fn-area,
.game-stage-container .fn-area,
.game-mission-container .fn-area {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 8px 15px;
  width: max-content;
  margin: 10px auto 0;
  border-radius: 30px;
  display: flex;
  align-items: center;
}
.game-category-container .fn-area .btn-back,
.game-stage-container .fn-area .btn-back,
.game-mission-container .fn-area .btn-back {
  display: flex;
  white-space: nowrap;
  font-size: 0.875em;
  margin-right: 20px;
  font-family: "apparat", sans-serif;
}
.game-category-container .fn-area .btn-back .icon,
.game-stage-container .fn-area .btn-back .icon,
.game-mission-container .fn-area .btn-back .icon {
  transform: rotate(90deg);
}
.game-category-container .fn-area .btn-back .icon:before,
.game-stage-container .fn-area .btn-back .icon:before,
.game-mission-container .fn-area .btn-back .icon:before {
  background-color: #fff;
}
@media (hover: hover) {
  .game-category-container .fn-area .btn-back:hover,
  .game-stage-container .fn-area .btn-back:hover,
  .game-mission-container .fn-area .btn-back:hover {
    color: #2fc1fb;
  }
  .game-category-container .fn-area .btn-back:hover .icon:before,
  .game-stage-container .fn-area .btn-back:hover .icon:before,
  .game-mission-container .fn-area .btn-back:hover .icon:before {
    background-color: #2fc1fb;
  }
}
@media (min-width: 980px) {
  .game-category-container .fn-area,
  .game-stage-container .fn-area,
  .game-mission-container .fn-area {
    margin-top: 30px;
  }
}
.game-category-container .btn-back,
.game-stage-container .btn-back,
.game-mission-container .btn-back {
  display: flex;
  align-items: center;
  color: #fff;
  width: max-content;
  cursor: pointer;
}
.game-category-container .btn-back .icon,
.game-stage-container .btn-back .icon,
.game-mission-container .btn-back .icon {
  margin-right: 10px;
}
.game-category-container .btn-back .icon:before,
.game-stage-container .btn-back .icon:before,
.game-mission-container .btn-back .icon:before {
  width: 24px;
  height: 24px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-category-container .btn-back .icon:before,
  .game-stage-container .btn-back .icon:before,
  .game-mission-container .btn-back .icon:before {
    width: 18px;
    height: 18px;
  }
}
.game-category-container .login-container,
.game-category-container .game-menu,
.game-stage-container .login-container,
.game-stage-container .game-menu,
.game-mission-container .login-container,
.game-mission-container .game-menu {
  width: 100%;
  position: fixed;
  height: 78%;
  overflow-y: auto;
  left: 0;
  bottom: 30px;
  padding: 50px 50px;
  mask-image: linear-gradient(
      to top,
      transparent,
      transparent 10vh,
      black 10vh,
      black calc(100% - 10vh),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      transparent 8vh,
      black 8vh,
      black calc(100% - 8vh),
      transparent
    );
  -webkit-mask-image: linear-gradient(
      to top,
      transparent,
      transparent 10vh,
      black 10vh,
      black calc(100% - 10vh),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      transparent 8vh,
      black 8vh,
      black calc(100% - 8vh),
      transparent
    );
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-category-container .login-container,
  .game-category-container .game-menu,
  .game-stage-container .login-container,
  .game-stage-container .game-menu,
  .game-mission-container .login-container,
  .game-mission-container .game-menu {
    padding: 50px 20vw;
  }
}
@media (min-width: 980px) {
  .game-category-container .login-container,
  .game-category-container .game-menu,
  .game-stage-container .login-container,
  .game-stage-container .game-menu,
  .game-mission-container .login-container,
  .game-mission-container .game-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 65vh;
    bottom: 5vh;
    mask-image: linear-gradient(
        to top,
        transparent,
        transparent 60px,
        black 60px,
        black calc(100% - 60px),
        transparent
      ),
      linear-gradient(
        to bottom,
        transparent,
        transparent 8vh,
        black 8vh,
        black calc(100% - 8vh),
        transparent
      );
    -webkit-mask-image: linear-gradient(
        to top,
        transparent,
        transparent 60px,
        black 60px,
        black calc(100% - 60px),
        transparent
      ),
      linear-gradient(
        to bottom,
        transparent,
        transparent 50px,
        black 50px,
        black calc(100% - 50px),
        transparent
      );
  }
}
.game-category-container .login-container li,
.game-category-container .game-menu li,
.game-stage-container .login-container li,
.game-stage-container .game-menu li,
.game-mission-container .login-container li,
.game-mission-container .game-menu li {
  margin: 10px;
}
@media (min-width: 980px) {
  .game-category-container .login-container li,
  .game-category-container .game-menu li,
  .game-stage-container .login-container li,
  .game-stage-container .game-menu li,
  .game-mission-container .login-container li,
  .game-mission-container .game-menu li {
    margin: 6px;
  }
}
@media (min-width: 1380px) {
  .game-category-container .login-container li,
  .game-category-container .game-menu li,
  .game-stage-container .login-container li,
  .game-stage-container .game-menu li,
  .game-mission-container .login-container li,
  .game-mission-container .game-menu li {
    margin: 10px;
  }
}
.game-category-container .login-container .btn-stage,
.game-category-container .game-menu .btn-stage,
.game-stage-container .login-container .btn-stage,
.game-stage-container .game-menu .btn-stage,
.game-mission-container .login-container .btn-stage,
.game-mission-container .game-menu .btn-stage {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  background: radial-gradient(
    circle,
    rgba(32, 32, 32, 0.5) 10%,
    rgba(0, 0, 0, 0.8) 100%
  );
  color: #eceaa6;
  font-size: 1em;
  position: relative;
  width: 100%;
  min-height: 3em;
  border-radius: 12px;
  letter-spacing: 0.5px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.game-category-container .login-container .btn-stage:after,
.game-category-container .game-menu .btn-stage:after,
.game-stage-container .login-container .btn-stage:after,
.game-stage-container .game-menu .btn-stage:after,
.game-mission-container .login-container .btn-stage:after,
.game-mission-container .game-menu .btn-stage:after {
  content: "";
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  position: absolute;
  left: 3px;
  top: 3px;
  border: 1px solid rgba(202, 166, 81, 0.2);
  border-radius: 9.6px;
  box-sizing: border-box;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 980px) {
  .game-category-container .login-container .btn-stage:after,
  .game-category-container .game-menu .btn-stage:after,
  .game-stage-container .login-container .btn-stage:after,
  .game-stage-container .game-menu .btn-stage:after,
  .game-mission-container .login-container .btn-stage:after,
  .game-mission-container .game-menu .btn-stage:after {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    left: 5px;
    top: 5px;
  }
}
@media (min-width: 980px) {
  .game-category-container .login-container .btn-stage,
  .game-category-container .game-menu .btn-stage,
  .game-stage-container .login-container .btn-stage,
  .game-stage-container .game-menu .btn-stage,
  .game-mission-container .login-container .btn-stage,
  .game-mission-container .game-menu .btn-stage {
    flex: 1;
    width: 10vw;
    border-radius: 12px;
    font-size: 0.9375em;
    line-height: 1.25em;
  }
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .game-category-container .login-container .btn-stage,
  .game-category-container .game-menu .btn-stage,
  .game-stage-container .login-container .btn-stage,
  .game-stage-container .game-menu .btn-stage,
  .game-mission-container .login-container .btn-stage,
  .game-mission-container .game-menu .btn-stage {
    font-size: 0.875em;
  }
}
.game-category-container .login-container .btn-stage > div,
.game-category-container .game-menu .btn-stage > div,
.game-stage-container .login-container .btn-stage > div,
.game-stage-container .game-menu .btn-stage > div,
.game-mission-container .login-container .btn-stage > div,
.game-mission-container .game-menu .btn-stage > div {
  position: relative;
  z-index: 5;
  padding-top: 2px;
  box-sizing: border-box;
  word-break: break-all;
  padding: 12px 1em 8px;
  line-height: 1.125em;
}
@media (min-width: 980px) {
  .game-category-container .login-container .btn-stage > div,
  .game-category-container .game-menu .btn-stage > div,
  .game-stage-container .login-container .btn-stage > div,
  .game-stage-container .game-menu .btn-stage > div,
  .game-mission-container .login-container .btn-stage > div,
  .game-mission-container .game-menu .btn-stage > div {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .game-category-container .login-container .btn-stage > div:before,
  .game-category-container .game-menu .btn-stage > div:before,
  .game-stage-container .login-container .btn-stage > div:before,
  .game-stage-container .game-menu .btn-stage > div:before,
  .game-mission-container .login-container .btn-stage > div:before,
  .game-mission-container .game-menu .btn-stage > div:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/mask.png") no-repeat center top;
    background-size: cover;
    position: absolute;
    border-radius: 4px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    left: 8px;
    top: 8px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
@media (min-width: 980px) {
  .game-category-container .login-container .btn-stage:before,
  .game-category-container .game-menu .btn-stage:before,
  .game-stage-container .login-container .btn-stage:before,
  .game-stage-container .game-menu .btn-stage:before,
  .game-mission-container .login-container .btn-stage:before,
  .game-mission-container .game-menu .btn-stage:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 127%;
  }
}
.game-category-container .login-container .btn-stage.--multiple > div:after,
.game-category-container .game-menu .btn-stage.--multiple > div:after,
.game-stage-container .login-container .btn-stage.--multiple > div:after,
.game-stage-container .game-menu .btn-stage.--multiple > div:after,
.game-mission-container .login-container .btn-stage.--multiple > div:after,
.game-mission-container .game-menu .btn-stage.--multiple > div:after {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 33.33% 0;
  width: 32px;
  height: 32px;
  background-color: #f6db9c;
  position: absolute;
  flex-shrink: 0;
  background: linear-gradient(to bottom, #f6db9c, rgba(188, 164, 106, 0.5));
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-category-container .login-container .btn-stage.--multiple > div:after,
  .game-category-container .game-menu .btn-stage.--multiple > div:after,
  .game-stage-container .login-container .btn-stage.--multiple > div:after,
  .game-stage-container .game-menu .btn-stage.--multiple > div:after,
  .game-mission-container .login-container .btn-stage.--multiple > div:after,
  .game-mission-container .game-menu .btn-stage.--multiple > div:after {
    width: 28px;
    height: 28px;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (min-width: 980px) {
  .game-category-container .login-container .btn-stage.--multiple > div:after,
  .game-category-container .game-menu .btn-stage.--multiple > div:after,
  .game-stage-container .login-container .btn-stage.--multiple > div:after,
  .game-stage-container .game-menu .btn-stage.--multiple > div:after,
  .game-mission-container .login-container .btn-stage.--multiple > div:after,
  .game-mission-container .game-menu .btn-stage.--multiple > div:after {
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
  }
}
@media (min-width: 1380px) {
  .game-category-container .login-container .btn-stage.--multiple > div:after,
  .game-category-container .game-menu .btn-stage.--multiple > div:after,
  .game-stage-container .login-container .btn-stage.--multiple > div:after,
  .game-stage-container .game-menu .btn-stage.--multiple > div:after,
  .game-mission-container .login-container .btn-stage.--multiple > div:after,
  .game-mission-container .game-menu .btn-stage.--multiple > div:after {
    width: 45px;
    height: 45px;
  }
}
@media (hover: hover) {
  .game-category-container .login-container .btn-stage,
  .game-category-container .game-menu .btn-stage,
  .game-stage-container .login-container .btn-stage,
  .game-stage-container .game-menu .btn-stage,
  .game-mission-container .login-container .btn-stage,
  .game-mission-container .game-menu .btn-stage {
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .game-category-container .login-container .btn-stage:hover,
  .game-category-container .game-menu .btn-stage:hover,
  .game-stage-container .login-container .btn-stage:hover,
  .game-stage-container .game-menu .btn-stage:hover,
  .game-mission-container .login-container .btn-stage:hover,
  .game-mission-container .game-menu .btn-stage:hover {
    transform: translateY(-10px);
    color: #fcfbde;
    box-shadow: rgba(202, 166, 81, 0.1) 0px 1px 1px 0px inset,
      rgba(240, 197, 96, 0.25) 0px 50px 100px -20px,
      rgba(202, 166, 81, 0.8) 0px 30px 60px -30px;
  }
  .game-category-container .login-container .btn-stage:hover:after,
  .game-category-container .game-menu .btn-stage:hover:after,
  .game-stage-container .login-container .btn-stage:hover:after,
  .game-stage-container .game-menu .btn-stage:hover:after,
  .game-mission-container .login-container .btn-stage:hover:after,
  .game-mission-container .game-menu .btn-stage:hover:after {
    border: 1px solid rgba(202, 166, 81, 0.5);
    box-shadow: rgba(202, 166, 81, 0.5) 0px 0px 20px;
    background-color: rgba(202, 166, 81, 0.5);
  }
}
@media (hover: hover) and (min-width: 980px) {
  .game-category-container .login-container .btn-stage:hover > div:before,
  .game-category-container .game-menu .btn-stage:hover > div:before,
  .game-stage-container .login-container .btn-stage:hover > div:before,
  .game-stage-container .game-menu .btn-stage:hover > div:before,
  .game-mission-container .login-container .btn-stage:hover > div:before,
  .game-mission-container .game-menu .btn-stage:hover > div:before {
    opacity: 0.7;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-category-container .login-container .btn,
  .game-category-container .game-menu .btn,
  .game-stage-container .login-container .btn,
  .game-stage-container .game-menu .btn,
  .game-mission-container .login-container .btn,
  .game-mission-container .game-menu .btn {
    width: 100%;
  }
}
.game-category-container .login-container,
.game-stage-container .login-container,
.game-mission-container .login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-category-container .login-container,
  .game-stage-container .login-container,
  .game-mission-container .login-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-category-container .login-container,
  .game-stage-container .login-container,
  .game-mission-container .login-container {
    padding: 50px 20vw;
  }
}
@media (min-width: 980px) {
  .game-category-container .login-container,
  .game-stage-container .login-container,
  .game-mission-container .login-container {
    height: 55vh;
    bottom: 15vh;
  }
}
.game-category-container .login-container .btn-stage,
.game-stage-container .login-container .btn-stage,
.game-mission-container .login-container .btn-stage {
  width: 100%;
  font-size: 1.25em;
  font-weight: bold;
}
.game-category-container .login-container .btn-stage > div,
.game-stage-container .login-container .btn-stage > div,
.game-mission-container .login-container .btn-stage > div {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-category-container .login-container .btn-stage > div,
  .game-stage-container .login-container .btn-stage > div,
  .game-mission-container .login-container .btn-stage > div {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .game-category-container .login-container .btn-stage > div:before,
  .game-stage-container .login-container .btn-stage > div:before,
  .game-mission-container .login-container .btn-stage > div:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/mask.png") no-repeat center top;
    background-size: cover;
    position: absolute;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
.game-category-container .login-container .btn-stage > div:before,
.game-stage-container .login-container .btn-stage > div:before,
.game-mission-container .login-container .btn-stage > div:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 12px;
  opacity: 0.8;
}
.game-category-container .login-container .btn-stage > div span,
.game-stage-container .login-container .btn-stage > div span,
.game-mission-container .login-container .btn-stage > div span {
  color: #281f09;
  display: block;
  position: relative;
  z-index: 3;
}
.game-category-container .login-container .btn-stage > div:before,
.game-stage-container .login-container .btn-stage > div:before,
.game-mission-container .login-container .btn-stage > div:before {
  opacity: 0.7;
}
.game-category-container .login-container .btn-stage > div .icon,
.game-stage-container .login-container .btn-stage > div .icon,
.game-mission-container .login-container .btn-stage > div .icon {
  margin-right: 10px;
}
.game-category-container .login-container .btn-stage > div .icon:before,
.game-stage-container .login-container .btn-stage > div .icon:before,
.game-mission-container .login-container .btn-stage > div .icon:before {
  background-color: #382d12;
}
.game-category-container .login-container .btn-stage:before,
.game-stage-container .login-container .btn-stage:before,
.game-mission-container .login-container .btn-stage:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 60px;
}
@media (hover: hover) {
  .game-category-container .login-container .btn-stage:hover,
  .game-stage-container .login-container .btn-stage:hover,
  .game-mission-container .login-container .btn-stage:hover {
    transform: none;
  }
}
.game-category-container .login,
.game-stage-container .login,
.game-mission-container .login {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 5px;
  width: 100%;
}
@media (min-width: 576px) {
  .game-category-container .login,
  .game-stage-container .login,
  .game-mission-container .login {
    width: clamp(300px, 70%, 420px);
  }
}
.game-logo {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(30px, 6.5vh, 60px);
  position: absolute;
  left: 50%;
  top: 7vh;
  color: #fff0cd;
  text-align: center;
  transform: translateX(-50%);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 980px) {
  .game-logo {
    font-size: clamp(30px, 8vh, 200px);
    top: 10vh;
  }
}
.game-logo h1 {
  font-family: "Quantico", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  display: flex;
  justify-content: center;
  text-shadow: #fff 0px 0px 5px, #5b4d2c 0px 0px 10px, #8d7847 0px 0px 15px,
    #f6db9c 0px 0px 20px, #f6db9c 0px 0px 30px, #bca46a 0px 0px 40px,
    #a28540 0px 0px 50px, #9d8752 0px 0px 75px;
}
.game-logo p {
  font-size: 14px;
  opacity: 0.8;
  letter-spacing: 4px;
  font-weight: lighter;
  text-shadow: 1px 1px 0 #281e14be;
}
.select-title-area {
  padding-bottom: 5vh;
  width: 100%;
  display: flex;
  justify-content: center;
}
.select-title-area h1,
.select-title-area h2 {
  font-size: clamp(26px, 4vh, 96px);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
  font-family: "Quantico", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  display: flex;
  justify-content: center;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
    #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  white-space: nowrap;
  text-align: center;
  width: 100%;
  font-style: normal;
  letter-spacing: 0;
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .select-title-area h1,
  .select-title-area h2 {
    font-size: clamp(26px, 4vh, 96px);
  }
}
@media (min-width: 1380px) {
  .select-title-area h1,
  .select-title-area h2 {
    font-size: clamp(26px, 4.5vh, 96px);
  }
}
.category-swiper .img-holder,
.category-select .img-holder {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform;
  position: relative;
  flex-shrink: 0;
}
.category-swiper .img-holder:before,
.category-select .img-holder:before {
  position: absolute;
  content: "";
  display: block;
  width: clamp(100px, 14vw, 160px);
  padding-bottom: clamp(100px, 14vw, 160px);
  background: url(" ../images/item/3d-lock.png") no-repeat center center;
  background-size: contain;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.category-swiper .img-holder .img,
.category-select .img-holder .img {
  filter: grayscale(1) brightness(0.5);
  opacity: 0.95;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity;
  background-size: contain;
}
@media (hover: none) {
  .category-swiper .img-holder .img,
  .category-select .img-holder .img {
    opacity: 1;
  }
}
.category-swiper .text-holder,
.category-select .text-holder {
  line-height: 1.05em;
  font-size: clamp(16px, 2.5vh, 26px);
  font-family: "apparat", sans-serif;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity;
  opacity: 0.7;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
  font-family: "Quantico", sans-serif;
}
.category-swiper .text-holder h2,
.category-select .text-holder h2 {
  line-height: 1.1;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .category-swiper .text-holder,
  .category-select .text-holder {
    padding: 0.75em 15px;
  }
}
@media (min-width: 980px) {
  .category-swiper .text-holder,
  .category-select .text-holder {
    padding: 10px;
    text-align: center;
    font-size: clamp(16px, 2.8vh, 40px);
  }
}
.category-swiper .category,
.category-select .category {
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.category-swiper .category.--open,
.category-select .category.--open {
  cursor: pointer;
}
.category-swiper .category.--open::after,
.category-select .category.--open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from var(--a),
    #2fc1fb,
    #bb7fff,
    #ffe15b,
    #f6db9c,
    #3c64db,
    #00f7ff
  );
  border-radius: 20px 60px 40px 100px;
  border-radius: 50%;
  -webkit-filter: blur(40px);
  filter: blur(40px);
  opacity: 0;
  width: 130%;
  padding-bottom: 130%;
  left: -15%;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateY(-15%);
}
.category-swiper .category.--open .img-holder:before,
.category-select .category.--open .img-holder:before {
  display: none;
}
.category-swiper .category.--open .img-holder .img,
.category-select .category.--open .img-holder .img {
  filter: none;
}
.category-swiper .category.--open .text-holder,
.category-select .category.--open .text-holder {
  opacity: 1;
}
.category-swiper .category.--open:hover::after,
.category-select .category.--open:hover::after {
  animation: rotating 4s linear infinite;
  opacity: 0.75;
}
.category-swiper .category.--open:hover .img-holder,
.category-select .category.--open:hover .img-holder {
  transform: scale(1.1) translateY(-2%);
}
.category-swiper .category.--open:hover .img-holder .img,
.category-select .category.--open:hover .img-holder .img {
  opacity: 1;
}
.category-swiper .category.--open:hover .text-holder,
.category-select .category.--open:hover .text-holder {
  transform: translateY(1em);
}
.category-swiper .category.--for-pg::after,
.category-select .category.--for-pg::after {
  background: repeating-conic-gradient(
    from var(--a),
    cyan,
    #1e90ff,
    #4169e1,
    blue,
    #00ced1,
    #87cefa,
    #00bfff,
    #5f9ea0,
    #6495ed,
    cyan
  );
}
.category-swiper {
  width: 100%;
  padding: 0 20px;
}
@media (min-width: 740px) {
  .category-swiper {
    padding: 0 15vw;
  }
}
@media (min-width: 980px) {
  .category-swiper {
    padding: 0 25vw;
  }
}
.category-swiper .text-holder {
  text-align: center;
  line-height: 1.25em;
}
.category-swiper .category {
  width: 100%;
  display: flex;
  position: relative;
  isolation: isolate;
  flex-direction: column;
  margin: 0 auto;
}
@media (min-width: 980px) {
  .category-swiper .category {
    width: clamp(240px, 40vh, 420px);
  }
}
.category-swiper .category.--for-pg {
  position: relative;
}
.category-swiper .category.--for-pg:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
  background: url("../images/item/frame-pg.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.category-swiper .category.--for-pg .img-holder {
  padding: 10%;
}
@media (hover: hover) {
  .category-swiper .category.--for-pg:hover .img-holder:before {
    transform: translate(-50%, -50%) scale(1.125);
  }
  .category-swiper .category.--for-pg:hover:before {
    transform: scale(1.125);
  }
}
@media (hover: hover) {
  .category-swiper .category:hover .img-holder:before {
    transform: translate(-50%, -50%) scale(1.25);
  }
}
.category-swiper .swiper-slide .category {
  transform: scale(0.8);
  pointer-events: none;
  opacity: 0.8;
}
.category-swiper .swiper-slide.swiper-slide-active .category {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.category-swiper .swiper-slide.swiper-slide-active .category.--open {
  cursor: pointer;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .category-swiper .swiper-slide.swiper-slide-active .category.--open:after {
    opacity: 1;
    animation: rotating 4s linear infinite;
  }
}
@media (min-width: 740px) {
  .category-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media (min-width: 980px) {
  .category-select {
    flex-wrap: nowrap;
  }
}
.category-select .img-holder {
  width: 72px;
  flex-shrink: 0;
}
@media (min-width: 740px) {
  .category-select .img-holder {
    width: 90px;
  }
}
@media (min-width: 980px) {
  .category-select .img-holder {
    width: 100%;
  }
}
.category-select .category {
  width: 100%;
  display: flex;
  position: relative;
  isolation: isolate;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .category-select .category {
    align-items: center;
    margin-bottom: 1px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 4px 6px;
    border-radius: 120px;
    backdrop-filter: blur(6px);
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .category-select .category {
    padding: 8px 10px;
  }
}
@media (min-width: 980px) {
  .category-select .category {
    flex-direction: column;
    width: calc(25% - 30px);
    margin: 0 15px;
  }
}
@media (min-width: 1380px) {
  .category-select .category {
    flex-direction: column;
    width: calc(25% - 40px);
    margin: 0 20px;
  }
}
@media (min-width: 1700px) {
  .category-select .category {
    width: calc(25% - 60px);
    margin: 0 30px;
  }
}
.--sdgs-stage .game-category-container,
.--sdgs-stage .game-stage-container {
  background: none;
}
.--sdgs-stage .game-bg-area:before {
  background: radial-gradient(circle, rgba(32, 32, 32, 0.3) 60%, #000 100%);
  opacity: 1;
}
.--history .game-bg-area:before,
.--team .game-bg-area:before,
.--create .game-bg-area:before {
  background: radial-gradient(circle, rgba(32, 32, 32, 0.3) 60%, #000 100%);
  opacity: 1;
}
.game-stage-container {
  transform: translateY(300px);
  overflow-y: auto;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  justify-content: flex-start;
  align-items: flex-start;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-stage-container {
    padding-bottom: 20vh;
  }
}
.game-stage-container.--center {
  justify-content: center;
}
@media (min-width: 980px) {
  .game-stage-container.--center .fn-area {
    margin-top: 30px;
  }
}
.--show-stage .game-category-container {
  transform: translateY(-300px);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.--show-stage .game-stage-container {
  transform: none;
  overflow-y: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0.1s;
}
.--show-stage.--show-mission .game-stage-container {
  transform: translateY(-300px);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.--show-stage.--show-mission .game-mission-container {
  clip-path: inset(0 0 0 0);
}
.--show-stage.--show-mission .game-mission-container .mission-swiper {
  opacity: 1;
  transform: none;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.8s;
  transition-property: opacity, transform;
}
.--show-stage.--show-mission .game-mission-container.--col .category-swiper {
  opacity: 1;
  transform: none;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.7s;
  transition-property: opacity, transform;
}
.--show-stage.--show-mission .game-mission-container.--col .fn-area {
  opacity: 1;
  transform: none;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.9s;
  transition-property: opacity, transform;
}
.--show-stage.--show-mission .game-mission-container .prologue {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.7s;
}
.--show-stage.--show-mission .game-mission-container .prologue .text-holder {
  transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.6s,
    opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1.6s;
  transform: translateY(-50px);
  opacity: 0;
}
.stage-swiper,
.stage-select {
  width: 100%;
}
.stage-swiper .stage,
.stage-select .stage {
  width: 100%;
  margin: 0;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity, filter, border-color, box-shadow;
}
.stage-swiper .stage.--back,
.stage-select .stage.--back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  font-size: clamp(20px, 5vh, 64px);
}
.stage-swiper .stage.--back .icon,
.stage-select .stage.--back .icon {
  transform: rotate(90deg);
}
.stage-swiper .stage.--back .icon:before,
.stage-select .stage.--back .icon:before {
  background-color: #fff;
  width: clamp(20px, 5vh, 64px);
  height: clamp(20px, 5vh, 64px);
}
.stage-swiper .stage .img-holder,
.stage-select .stage .img-holder {
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 12px;
  transition-property: transform, opacity, filter, border-color, box-shadow;
  overflow: hidden;
}
.stage-swiper .stage .img-holder:after,
.stage-select .stage .img-holder:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../images/item/broken.png") no-repeat center;
  background-size: cover;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
}
.stage-swiper .stage .img-holder .img,
.stage-select .stage .img-holder .img {
  overflow: hidden;
}
.stage-swiper .stage .img-holder .img:before,
.stage-select .stage .img-holder .img:before {
  background: radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
}
.stage-swiper .stage .game-icon,
.stage-select .stage .game-icon {
  width: 96px;
  height: 96px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}
.stage-swiper .stage .img,
.stage-select .stage .img {
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 0) and (max-width: 1099.9px) and (orientation: portrait) {
  .stage-swiper .stage .img:before,
  .stage-select .stage .img:before {
    width: 100%;
    padding-bottom: 100%;
  }
}
.stage-swiper .stage .state-holder,
.stage-select .stage .state-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  border-radius: 7.68px;
}
.stage-swiper .stage .star,
.stage-select .stage .star {
  width: 36px;
  height: 36px;
  background: url("../images/item/star.png") no-repeat center;
  display: inline-flex;
  flex-shrink: 0;
  background-size: contain;
  position: relative;
  z-index: 3;
  margin-left: 6px;
  filter: grayscale(1);
}
.stage-swiper .stage .btn-gained,
.stage-select .stage .btn-gained {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 35px 0 40px;
  color: #bebebe;
  font-size: 0.875em;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
  box-sizing: border-box;
  transform: translate(-50%, 0);
  isolation: isolate;
  cursor: pointer;
  white-space: nowrap;
}
@media (min-width: 740px) {
  .stage-swiper .stage .btn-gained,
  .stage-select .stage .btn-gained {
    height: 40px;
    font-size: 0.9375em;
  }
}
@media (min-width: 1700px) {
  .stage-swiper .stage .btn-gained,
  .stage-select .stage .btn-gained {
    font-size: 1em;
    height: 48px;
    bottom: 0;
  }
}
.stage-swiper .stage .btn-gained span,
.stage-select .stage .btn-gained span {
  position: relative;
  letter-spacing: 1px;
  z-index: 3;
}
.stage-swiper .stage .btn-gained:before,
.stage-select .stage .btn-gained:before {
  content: "";
  display: block;
  position: absolute;
  background: linear-gradient(to bottom, gray, #5c5c5c, #3b3b3b);
  z-index: 0;
  border-radius: 20px 20px 0 0;
  width: calc(100% - 4px);
  height: calc(100% - 2px);
  left: 2px;
  bottom: 0;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: none;
}
@media (min-width: 740px) {
  .stage-swiper .stage .btn-gained:before,
  .stage-select .stage .btn-gained:before {
    width: calc(100% - 8px);
    height: calc(100% - 4px);
    left: 4px;
    bottom: 0;
  }
}
.stage-swiper .stage .btn-gained:after,
.stage-select .stage .btn-gained:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(238, 238, 238, 0.6),
    rgba(238, 238, 238, 0.4)
  );
  z-index: -1;
  border-radius: 22px 22px 0 0;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
  .stage-swiper .stage .btn-gained:hover:before,
  .stage-select .stage .btn-gained:hover:before {
    transform: scaleX(1.1);
  }
  .stage-swiper .stage .btn-gained:hover:after,
  .stage-select .stage .btn-gained:hover:after {
    transform: scaleX(1.1);
  }
}
.stage-swiper .stage .text-holder,
.stage-select .stage .text-holder {
  line-height: 1em;
  color: #2fc1fb;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  width: 80%;
  padding: 8px 10%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.8)
  );
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
}
@media (min-width: 1380px) {
  .stage-swiper .stage .text-holder,
  .stage-select .stage .text-holder {
    width: 60%;
    padding: 10px 10%;
  }
}
.stage-swiper .stage h3,
.stage-select .stage h3 {
  font-weight: bold;
  font-size: 0.9375em;
  font-family: "Quantico", sans-serif;
  line-height: 1.125em;
  font-weight: normal;
}
@media (min-width: 740px) {
  .stage-swiper .stage h3,
  .stage-select .stage h3 {
    font-size: 1.125em;
  }
}
.stage-swiper .stage .position,
.stage-select .stage .position {
  color: #b0f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
  font-size: 1.25em;
  font-family: "Quantico", sans-serif;
  line-height: 1em;
}
@media (min-width: 740px) {
  .stage-swiper .stage .position,
  .stage-select .stage .position {
    font-size: 1.25em;
  }
}
@media (min-width: 1380px) {
  .stage-swiper .stage .position,
  .stage-select .stage .position {
    font-size: 1.5em;
  }
}
@media (min-width: 1700px) {
  .stage-swiper .stage .position,
  .stage-select .stage .position {
    font-size: 1.75em;
  }
}
.stage-swiper .stage .position .icon,
.stage-select .stage .position .icon {
  margin-right: 3px;
}
.stage-swiper .stage .position .icon:before,
.stage-select .stage .position .icon:before {
  width: 16px;
  height: 16px;
  background-color: #b0f7ff;
}
@media (hover: hover) {
  .stage-swiper .stage:hover,
  .stage-select .stage:hover {
    border-color: #fff;
    box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
  }
  .stage-swiper .stage:hover .img,
  .stage-select .stage:hover .img {
    transform: scale(1.125);
  }
  .stage-swiper .stage:hover .img-holder,
  .stage-select .stage:hover .img-holder {
    border-color: #fff;
  }
}
.stage-swiper .stage.--multiple:after,
.stage-select .stage.--multiple:after {
  content: "";
  display: block;
  width: clamp(90px, 12%, 200px);
  padding-bottom: clamp(90px, 12%, 200px);
  background: url("../images/multi.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  animation: multiple 2s linear infinite;
  z-index: 9;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .stage-swiper .stage.--multiple:after,
  .stage-select .stage.--multiple:after {
    right: -24px;
    bottom: -10px;
  }
}
@media (min-width: 740px) {
  .stage-swiper .stage.--multiple:after,
  .stage-select .stage.--multiple:after {
    right: 25px;
    bottom: 20px;
  }
}
.stage-swiper .stage.--locked .star,
.stage-select .stage.--locked .star {
  animation: starrotatebw 5s linear infinite forwards;
}
.stage-swiper .stage.--locked .btn-gained,
.stage-select .stage.--locked .btn-gained {
  cursor: not-allowed;
}
.stage-swiper .stage.--unlocked .img:before,
.stage-select .stage.--unlocked .img:before {
  background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
}
.stage-swiper .stage.--unlocked .text-holder,
.stage-select .stage.--unlocked .text-holder {
  background: linear-gradient(
    to bottom,
    rgba(10, 63, 120, 0.2),
    rgba(4, 40, 78, 0.8)
  );
}
.stage-swiper .stage.--unlocked .star,
.stage-select .stage.--unlocked .star {
  animation: starrotate 5s linear infinite forwards;
}
.stage-swiper .stage.--unlocked .state-holder,
.stage-select .stage.--unlocked .state-holder {
  box-shadow: inset 0px 0px 30px 5px #52cefa;
  border-radius: 7.68px;
}
.stage-swiper .stage.--unlocked .btn-gained,
.stage-select .stage.--unlocked .btn-gained {
  transform: translate(-50%, -50%);
  color: #dffdff;
  height: 60px;
  border-radius: 12px;
  pointer-events: none;
}
.stage-swiper .stage.--unlocked .btn-gained:before,
.stage-select .stage.--unlocked .btn-gained:before {
  background: linear-gradient(
    to bottom,
    rgba(107, 203, 255, 0.654902),
    rgba(34, 59, 79, 0.576471),
    rgba(137, 214, 255, 0.501961)
  );
  background: linear-gradient(
    to bottom,
    #6bcbff,
    rgba(34, 59, 79, 0.878431),
    #89d6ff
  );
  border-radius: 12px;
  height: calc(100% - 4px);
  bottom: 2px;
}
@media (min-width: 740px) {
  .stage-swiper .stage.--unlocked .btn-gained:before,
  .stage-select .stage.--unlocked .btn-gained:before {
    height: calc(100% - 8px);
    bottom: 4px;
  }
}
.stage-swiper .stage.--unlocked .btn-gained:after,
.stage-select .stage.--unlocked .btn-gained:after {
  background: linear-gradient(
    to bottom,
    rgba(58, 142, 181, 0.6),
    rgba(58, 142, 181, 0.4)
  );
  animation: shadowlight 1.5s linear infinite forwards;
  border-radius: 12px;
}
@media (hover: hover) {
  .stage-swiper .stage.--unlocked:hover .btn-gained,
  .stage-select .stage.--unlocked:hover .btn-gained {
    color: #dffdff;
  }
  .stage-swiper .stage.--unlocked:hover .btn-gained:before,
  .stage-select .stage.--unlocked:hover .btn-gained:before {
    background: linear-gradient(
      to bottom,
      #6bcbff,
      rgba(34, 59, 79, 0.878431),
      #89d6ff
    );
    transform: scaleX(1.2);
  }
  .stage-swiper .stage.--unlocked:hover .btn-gained:after,
  .stage-select .stage.--unlocked:hover .btn-gained:after {
    transform: scaleX(1.2);
  }
}
.stage-swiper .stage.--gained .img-holder:after,
.stage-select .stage.--gained .img-holder:after {
  display: none;
}
.stage-swiper .stage.--gained .text-holder,
.stage-select .stage.--gained .text-holder {
  clip-path: none;
  top: initial;
  bottom: 0;
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(198, 166, 91, 0),
    rgba(255, 251, 242, 0.8)
  );
  padding-top: 40px;
  padding-bottom: 20px;
  border-radius: 0 0 7.68px 7.68px;
}
.stage-swiper .stage.--gained .text-holder:before,
.stage-select .stage.--gained .text-holder:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background: url("../images/item/star.png") no-repeat center;
  background-size: contain;
  margin: 0 auto 4px;
  animation: starrotate 6s linear infinite forwards;
}
@media (min-width: 1380px) {
  .stage-swiper .stage.--gained .text-holder:before,
  .stage-select .stage.--gained .text-holder:before {
    width: 50px;
    height: 50px;
    margin: 0 auto 6px;
  }
}
.stage-swiper .stage.--gained .text-holder:after,
.stage-select .stage.--gained .text-holder:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  left: 0%;
  position: absolute;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    #ffebb2,
    #fff,
    #c9f9ff,
    rgba(255, 255, 255, 0)
  );
  top: 60px;
  z-index: -1;
  transform-origin: center;
  animation: rib 6s infinite forwards;
}
@media (min-width: 1380px) {
  .stage-swiper .stage.--gained .text-holder:after,
  .stage-select .stage.--gained .text-holder:after {
    top: 66px;
  }
}
.stage-swiper .stage.--gained .img-holder .img:before,
.stage-select .stage.--gained .img-holder .img:before {
  background: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fff 100%);
}
.stage-swiper .stage.--gained .state-holder,
.stage-select .stage.--gained .state-holder {
  box-shadow: inset 0px 0px 30px 5px #fff;
  border-radius: 7.68px;
}
.stage-swiper .stage.--gained h3,
.stage-select .stage.--gained h3 {
  color: #22a9e6;
}
.stage-swiper .stage.--gained .position,
.stage-select .stage.--gained .position {
  color: #844e16;
}
.stage-swiper .stage.--gained .position .icon:before,
.stage-select .stage.--gained .position .icon:before {
  background-color: #844e16;
}
@media (hover: hover) {
  .stage-swiper .stage.--gained:hover,
  .stage-select .stage.--gained:hover {
    box-shadow: #fff 0px 0px 5px, #c6a65b 0px 0px 10px, #cdad64 0px 0px 15px,
      #f6db9c 0px 0px 20px;
  }
}
.stage-swiper .swiper-slide,
.stage-select .swiper-slide {
  height: initial;
}
@keyframes multiple {
  0% {
    transform: scale(1);
    filter: brightness(1.5);
  }
  50% {
    transform: scale(0.98);
    filter: brightness(1.1);
  }
  100% {
    transform: scale(1);
    filter: brightness(1.5);
  }
}
@media (min-width: 980px) {
  .stage-swiper {
    padding: 0 15vh;
  }
}
@media (min-width: 1100px) {
  .stage-swiper {
    padding: 0 18vw;
  }
}
@media (min-width: 1380px) {
  .stage-swiper {
    padding: 0 20vw;
  }
}
@media (min-width: 980px) {
  .stage-swiper .stage {
    border-width: 4px;
  }
}
.stage-swiper .swiper-slide .stage {
  transform: scale(0.8);
  filter: grayscale(0.5) brightness(0.5);
  pointer-events: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.stage-swiper .swiper-slide.swiper-slide-active .stage {
  transform: none;
  filter: none;
  pointer-events: auto;
}
.stage-select {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.stage-select .stage {
  margin: 0 0 20px;
}
@media (min-width: 980px) {
  .stage-select .stage {
    width: calc(33.33% - 40px);
    margin: 0 20px 20px;
  }
}
@media (min-width: 1700px) {
  .stage-select .stage {
    margin: 0 20px 40px;
  }
}
@keyframes shadowlight {
  0% {
    box-shadow: inset 0px 0px 20px 5px rgba(82, 206, 250, 0),
      0px 0px 10px 0px rgba(82, 206, 250, 0);
  }
  40% {
    box-shadow: inset 0px 0px 15px 5px #90e1ff,
      0px 0px 25px 10px rgba(122, 220, 255, 0.6);
  }
  60% {
    box-shadow: inset 0px 0px 30px 10px #90e1ff,
      0px 0px 15px 10px rgba(122, 220, 255, 0.6);
  }
  100% {
    box-shadow: inset 0px 0px 20px 5px rgba(82, 206, 250, 0),
      0px 0px 10px 0px rgba(82, 206, 250, 0);
  }
}
@keyframes starrotatebw {
  0% {
    filter: brightness(0.5) grayscale(1);
  }
  25% {
    filter: brightness(0.25) grayscale(1);
  }
  50% {
    filter: brightness(0.5) grayscale(1);
  }
  75% {
    filter: brightness(0.2) grayscale(1);
  }
  100% {
    filter: brightness(0.5) grayscale(1);
  }
}
@keyframes starrotate {
  0% {
    transform: scale(1.1) rotate(0);
    filter: brightness(1.2);
  }
  25% {
    transform: scale(1) rotate(90deg);
    filter: brightness(0.9);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    filter: brightness(1.3);
  }
  75% {
    transform: scale(1) rotate(270deg);
    filter: brightness(0.9);
  }
  100% {
    transform: scale(1.1) rotate(360deg);
    filter: brightness(1.2);
  }
}
@keyframes rib {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
.evolution-stage {
  width: 100vw;
  height: 100vw;
  margin: 0 auto;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: backdrop-filter, filter, transform, opacity;
  position: relative;
  isolation: isolate;
  padding: 15vw;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.5) 10%,
    rgba(0, 0, 0, 0) 50%
  );
  border-radius: 50%;
  transition-delay: 0s;
}
@media (min-width: 980px) {
  .evolution-stage {
    width: 70vh;
    height: 70vh;
    padding: 13vh;
  }
}
.evolution-stage .text-holder {
  text-align: center;
  font-size: clamp(20px, 3vh, 36px);
  text-shadow: #000 0px 0 10px;
  padding: 1em 0 0;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
  opacity: 0;
  left: 50%;
  bottom: 10vw;
  transform: translate(-50%, 130%) scale(0.5);
  position: absolute;
}
@media (min-width: 980px) {
  .evolution-stage .text-holder {
    bottom: 13vh;
  }
}
.evolution-stage .old {
  z-index: 1;
  position: relative;
  transition: clip-path 6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.evolution-stage .new {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 2s;
}
.evolution-stage .new .img {
  transition: filter 4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.evolution-stage .evolution {
  transform: scale(0.5);
  opacity: 0;
  z-index: -1;
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0s;
}
.evolution-stage .effect {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  inset: 0;
  background: repeating-conic-gradient(
    from var(--a),
    #2fc1fb,
    #3564ff,
    #ffe15b,
    #cef,
    #4ec4ff
  );
  background: repeating-conic-gradient(
    from var(--a),
    #375f57,
    #4a6b8a,
    #c2b280,
    #6d9e94,
    #7291b0,
    #d1c7a8,
    #a3c1bc,
    #a0b5c9,
    #e0dcd3,
    #f0f0f0,
    #c7d0cc,
    #cad5e0,
    #d9d2bd,
    #9fb5b0,
    #8ca2b7,
    #bfb392,
    #7a9993,
    #ad9f76
  );
  border-radius: 20px 60px 40px 100px;
  filter: blur(60px);
  transform: scale(0);
  opacity: 0;
  z-index: -1;
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 50%;
  transition-delay: 0s;
}
.evolution-stage .highlight {
  height: 40px;
  z-index: 9;
  top: 100%;
  bottom: initial;
}
.game-popup-area.for-gained {
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: visibility, opacity, transform;
}
.game-popup-area.for-gained.--active {
  visibility: visible;
  opacity: 1;
}
.game-popup-area.for-gained.--active .evolution-stage {
  transform: none;
  opacity: 1;
}
.game-popup-area.for-gained.--active .evolution {
  transform: none;
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0.6s;
  animation: effectscale 1.5s linear infinite forwards;
  animation-delay: 1s;
}
.game-popup-area.for-gained.--active .effect {
  animation: rotating 1.5s linear infinite;
  opacity: 0.9;
  transform: none;
  transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0.4s;
}
.game-popup-area.for-gained.--active .new {
  clip-path: inset(0 0 0 0);
  transition: clip-path 6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 1.5s;
}
.game-popup-area.for-gained.--active .new .img {
  filter: brightness(1);
  transition-delay: 1.5s;
}
.game-popup-area.for-gained.--active .text-holder {
  transition-delay: 6s;
  opacity: 1;
  transform: translate(-50%, 100%) scale(1);
}
@keyframes highlightevo {
  0% {
    top: 100%;
    opacity: 0;
    transform: scale(0.5);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    top: 0%;
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes effectscale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes arrowscale {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes arrownext {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes arrowprev {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.game-mission-container.--col {
  overflow: hidden;
  overflow-y: auto;
  justify-content: flex-start;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-mission-container.--col {
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 1px);
  }
}
@media (min-width: 980px) {
  .game-mission-container.--col {
    padding-bottom: 60px;
  }
}
.game-mission-container.--col .fn-area {
  position: sticky;
  bottom: 0;
  transform: translateY(50px);
  opacity: 0;
}
.game-mission-container.--col .fn-area .btn-back {
  margin-right: 0;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-mission-container.--col .fn-area {
    bottom: -80px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-mission-container.--col .fn-area {
    bottom: -190px;
  }
}
.game-mission-container.--col .category-swiper {
  width: 100%;
  display: grid;
  gap: 20px;
  padding-left: 0;
  padding-right: 0;
  grid-template-columns: repeat(2, 1fr);
  padding-bottom: 100px;
  transform: translateY(50px);
  opacity: 0;
}
@media (min-width: 740px) {
  .game-mission-container.--col .category-swiper {
    gap: 30px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-mission-container.--col .category-swiper {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (min-width: 980px) {
  .game-mission-container.--col .category-swiper {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1380px) {
  .game-mission-container.--col .category-swiper {
    grid-template-columns: repeat(5, 1fr);
  }
}
.game-mission-container.--col .category-swiper .category {
  width: 100%;
}
@media (min-width: 740px) {
  .game-mission-container.--col .category-swiper .category .text-holder {
    font-size: 17px;
  }
}
@media (min-width: 980px) {
  .game-mission-container.--col .category-swiper .category .text-holder {
    font-size: clamp(15px, 1.5vw, 22px);
  }
}
.game-challenge-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-challenge-container {
    flex-direction: column;
  }
}
@media (min-width: 980px) {
  .game-challenge-container {
    align-items: flex-start;
    flex-direction: row-reverse;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-challenge-container .challenge-info {
    padding: 10vh 20px 5vh;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-challenge-container .challenge-info {
    padding: 10vh 10vw 5vh;
  }
}
@media (min-width: 980px) {
  .game-challenge-container .challenge-info {
    width: 36%;
    position: sticky;
    left: 0;
    top: 0;
  }
}
.game-challenge-container .challenge-list-container {
  width: 100%;
}
@media (min-width: 980px) {
  .game-challenge-container .challenge-list-container {
    width: 64%;
  }
}
.challenge-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: #fff;
}
@media (min-width: 980px) {
  .challenge-info {
    padding: 8vh 5vw 15vh 2vw;
  }
}
.challenge-info .map {
  position: relative;
  width: 100%;
  background: url("../images/map.svg") no-repeat center center;
  background-size: contain;
}
.challenge-info .map:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 53%;
}
.challenge-info .map .pin {
  width: 5%;
  background: url("../images/item/pin.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  transform-origin: center bottom;
  transform: translate(-50%, -50%);
  animation: pin 1.5s linear infinite;
}
.challenge-info .map .pin:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 150%;
}
.challenge-info .text-holder {
  width: 100%;
  text-align: left;
  font-family: "apparat", sans-serif;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .challenge-info .text-holder {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.4)
    );
    border-radius: 0 0 24px 24px;
    padding-bottom: 15px;
    border-bottom: 2px solid #2fc1fb;
  }
}
@media (min-width: 980px) {
  .challenge-info .text-holder {
    padding: 5% 0 0 5%;
  }
}
.challenge-info .text-holder .position {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25em;
  color: #b0f7ff;
}
@media (min-width: 980px) {
  .challenge-info .text-holder .position {
    justify-content: flex-start;
    padding-bottom: 0.5em;
  }
}
.challenge-info .text-holder .position .icon {
  margin-right: 5px;
}
.challenge-info .text-holder .position .icon:before {
  width: 20px;
  height: 20px;
  background-color: #b0f7ff;
}
@media (min-width: 980px) {
  .challenge-info .text-holder .position:after {
    content: "";
    display: block;
    width: 100%;
    flex: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 1em;
  }
}
.challenge-info .text-holder h1 {
  font-size: clamp(24px, 5vh, 48px);
  font-weight: bold;
  color: #2fc1fb;
  padding: 0 0 0.25em 0;
  line-height: 1.1;
  background: linear-gradient(to bottom, #b0f7ff, #2fc1fb, #083860);
  background: -webkit-linear-gradient(to bottom, #b0f7ff, #2fc1fb, #083860);
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
  color: transparent;
}
@media (min-width: 980px) {
  .challenge-info .text-holder h1 {
    font-size: clamp(24px, 5.5vh, 72px);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
}
@keyframes pin {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.fixed-partner {
  width: clamp(120px, 18vw, 280px);
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity;
}
@media (min-width: 740px) and (orientation: portrait) {
  .fixed-partner {
    width: clamp(120px, 20vh, 280px);
  }
}
.fixed-partner .img:before {
  padding-bottom: 112.5%;
}
.fixed-partner .name {
  position: absolute;
}
.fixed-partner .talk {
  padding: 10px;
  line-height: 1.25em;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(102, 102, 102, 0.4);
  border-radius: 12px 0 12px 12px;
  color: #b0f7ff;
  left: 0;
  bottom: 10%;
  font-family: "apparat", sans-serif;
  width: clamp(200px, 30vw, 480px);
  transform: translateX(-80%);
}
@media (min-width: 0) and (max-width: 739.9px) {
  .fixed-partner .talk {
    width: calc(100vw - 100px);
    transform: translateX(calc(-100% + 40px));
    font-size: 0.8125em;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .fixed-partner .talk {
    width: clamp(300px, 50vw, 480px);
    transform: translateX(-90%);
  }
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .fixed-partner .talk {
    font-size: 0.9375em;
  }
}
@media (min-width: 1100px) {
  .fixed-partner .talk {
    padding: 15px 20px;
  }
}
.fixed-partner .talk p {
  line-height: 1.375em;
  font-size: 1em;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .fixed-partner .talk p {
    font-size: 0.875em;
    line-height: 1.5em;
  }
}
@media screen and (orientation: portrait) and (max-height: 660px) {
  .fixed-partner .talk p {
    font-size: 0.8125em;
  }
}
.fixed-partner .talk .btn {
  margin: 2px 3px;
  background: none;
  border: 1px solid #2fc1fb;
  height: 24px;
  border-radius: 15px;
  padding: 0 0.75em;
  font-size: 0.875em;
  font-family: "apparat", sans-serif;
  line-height: 1;
  font-weight: normal;
}
.fixed-partner .talk .btn:before {
  border-radius: 2px;
}
.challenge-list-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: column;
  padding: 10px;
  align-items: center;
  padding-bottom: 10vh;
}
.challenge-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .challenge-list {
    padding: 0 10%;
  }
}
@media (min-width: 740px) {
  .challenge-list {
    width: clamp(400px, 40vh, 720px);
  }
}
@media (min-width: 980px) {
  .challenge-list {
    margin-right: 10%;
    width: clamp(450px, 40vh, 720px);
  }
}
.challenge-item {
  display: flex;
  align-items: center;
  color: #083860;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-radius: 50%;
  font-family: "apparat", sans-serif;
  cursor: pointer;
  color: #fff;
  margin-bottom: 0;
  padding: 10px;
  position: relative;
  flex-shrink: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: border-width, transform, box-shadow;
  box-shadow: rgba(96, 96, 118, 0.3) 0px 1px 0px,
    rgba(122, 139, 152, 0.4) 0px 8px 24px, rgba(110, 134, 152, 0.5) 0px 5px 30px;
  overflow: hidden;
  margin-top: -10%;
}
.challenge-item:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  z-index: 3;
  background: linear-gradient(
    30deg,
    #494b50,
    #050507 50%,
    #38383e 50.1%,
    #000 100%
  );
}
.challenge-item strong {
  font-size: 0.75em;
  letter-spacing: 0;
}
.challenge-item:nth-of-type(2n + 1) {
  margin-left: 50%;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .challenge-item {
    position: relative;
    padding: 8px;
  }
}
.challenge-item .state-icon {
  width: 50%;
  background: url("../images/item/3d-lock.png") no-repeat center center;
  background-size: contain;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: absolute;
}
.challenge-item .state-icon:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}
@media (hover: hover) {
  .challenge-item:hover {
    box-shadow: rgba(96, 96, 118, 0.5) 0px 1px 0px,
      rgba(122, 139, 152, 0.6) 0px 8px 24px,
      rgba(110, 134, 152, 0.8) 0px 5px 64px;
  }
  .challenge-item:hover .state-icon {
    transform: translate(-50%, -50%) scale(1.25);
  }
}
.challenge-item.--finish:before {
  background: linear-gradient(
    30deg,
    #cabc8b,
    #a89c71 50%,
    #d2c492 75%,
    #a89c71 100%
  );
}
.challenge-item.--finish .state-icon {
  background-image: url("../images/item/3d-crown.png");
}
.challenge-item.--active:before {
  background: linear-gradient(
    30deg,
    #dafbff,
    #91cdd3 50%,
    #fff 75%,
    #b0f7ff 100%
  );
}
.challenge-item.--active:after {
  position: absolute;
  content: "";
  display: block;
  width: 400%;
  height: 400%;
  top: -150%;
  left: -150%;
  background: conic-gradient(#2fc1fb 0deg, #2fc1fb 0deg, transparent 40deg);
  animation: border-spin 7s linear infinite;
  z-index: 1;
}
.challenge-item.--active .state-icon {
  background-image: url("../images/item/3d-play.png");
}
.challenge-item.--title {
  background-color: transparent;
  background: none;
  justify-content: flex-start;
  box-shadow: none;
  width: 100% !important;
  height: initial;
  font-size: 1.5em;
  color: #fff;
  font-family: "apparat", sans-serif;
  font-weight: normal;
  align-items: center;
  border: none !important;
  margin: 3vh auto;
  justify-content: flex-start;
  cursor: initial;
  border-radius: initial;
  margin: 5vh 0 8vh;
}
@media (min-width: 740px) {
  .challenge-item.--title {
    font-size: 2em;
  }
}
.challenge-item.--title h6 {
  font-size: 1.5em;
  font-family: "Bodoni Moda", serif;
  margin-right: 0.25em;
  background: linear-gradient(
    to bottom,
    #ccc 0%,
    #fff 50%,
    #999 50.1%,
    #ccc 100%
  );
  background: -webkit-linear-gradient(
    to bottom,
    #ccc 0%,
    #fff 50%,
    #999 50.1%,
    #ccc 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media (min-width: 740px) {
  .challenge-item.--title h6 {
    font-size: 2em;
  }
}
.challenge-item.--title:after {
  content: "";
  position: static !important;
  flex: 1;
  width: initial;
  height: 1px !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  margin-left: 0.5em;
  display: none;
}
.challenge-item.--title:before {
  display: none;
}
@keyframes border-spin {
  to {
    transform: rotate(-1turn);
  }
}
.part-container {
  overflow: hidden;
  position: relative;
}
.part-container .title-area {
  width: 100%;
  text-align: center;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}
@media (min-width: 740px) and (orientation: portrait) {
  .part-container .title-area {
    margin-top: clamp(30px, 5vh, 60px);
  }
}
@media (min-width: 980px) {
  .part-container .title-area {
    padding-bottom: 0;
  }
}
.part-container .title-area:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
    #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  position: absolute;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
  box-sizing: border-box;
  border: 2px solid #fff;
  z-index: 3;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  top: 58px;
}
@media screen and (orientation: portrait) and (max-height: 660px) {
  .part-container .title-area:before {
    top: 45px;
    width: 10px;
    height: 10px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .part-container .title-area:before {
    width: 16px;
    height: 16px;
    top: 70px;
  }
}
.part-container .title-area:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  background: linear-gradient(
    to right,
    rgba(210, 234, 245, 0) 0%,
    #d2eaf5 50%,
    rgba(210, 234, 245, 0) 100%
  );
  left: 0;
  top: 58px;
  margin: 0 0 0 8px;
  border-radius: 3px 0 0 3px;
  overflow: hidden;
  z-index: 1;
}
@media screen and (orientation: portrait) and (max-height: 660px) {
  .part-container .title-area:after {
    top: 45px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .part-container .title-area:after {
    top: 70px;
  }
}
.part-container .title-area .small {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 5px;
  display: block;
  padding-bottom: 30px;
}
@media screen and (orientation: portrait) and (max-height: 660px) {
  .part-container .title-area .small {
    font-size: 11px;
    padding-bottom: 12px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .part-container .title-area .small {
    font-size: 15px;
    padding-bottom: 40px;
  }
}
.part-container .title-area .big {
  font-size: 22px;
  line-height: 1.125em;
  min-height: 2em;
  display: block;
  margin-top: 10px;
  letter-spacing: 0.2px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .part-container .title-area .big {
    font-size: 19px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .part-container .title-area .big {
    font-size: clamp(22px, 3.75vh, 48px);
    margin-top: 20px;
    line-height: 1em;
  }
}
.part-container .short-dialogue-container {
  position: absolute;
  width: calc(100% - 80px);
  height: calc(100% - 110px);
  top: initial;
  left: 40px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  padding: 25px 0;
}
@media (min-width: 576px) {
  .part-container .short-dialogue-container {
    width: clamp(400px, 50vw, 600px);
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 740px) {
  .part-container .short-dialogue-container {
    height: calc(100% - 120px);
  }
}
@media (min-width: 740px) and (min-height: 800px) {
  .part-container .short-dialogue-container {
    height: calc(100% - 165px);
  }
}
.part-container .short-dialogue-container .sci-frame {
  height: 100%;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}
.part-container.--locked .short-dialogue-container {
  opacity: 1;
  pointer-events: auto;
}
.part-container.--locked .mission-pool {
  opacity: 0 !important;
  pointer-events: none !important;
}
.part-container.--locked .fn {
  opacity: 0 !important;
  pointer-events: none !important;
}
.short-dialogue-item {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 10px);
  margin-left: 5px;
  flex: 1;
}
.short-dialogue-item .title {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1.25em;
  letter-spacing: 5px;
  padding-bottom: 10px;
  line-height: 1.125em;
  width: 100%;
  text-align: center;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  opacity: 1;
}
.short-dialogue-item .title strong {
  font-size: 1.25em;
}
.short-dialogue-item .title span {
  opacity: 0.5;
  font-weight: normal;
}
@media (min-width: 740px) {
  .short-dialogue-item .title {
    padding-bottom: 10px;
  }
}
@media (min-width: 980px) {
  .short-dialogue-item .title {
    font-size: 1.375em;
  }
}
.short-dialogue-item .text {
  text-align: center;
  font-size: 1em;
}
.short-dialogue-item .text p {
  font-size: 1em;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .short-dialogue-item .text {
    font-size: 0.875em;
    font-weight: normal;
  }
}
.short-dialogue-item .quest-count {
  font-family: "Quantico", sans-serif;
  letter-spacing: 5px;
  font-size: 1.125em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  width: max-content;
  padding-bottom: 5px;
  display: inline;
  margin: 0 auto 15px;
}
.short-dialogue-item .quest-count strong {
  font-size: 1.5em;
}
.short-dialogue-item .quest-count span {
  opacity: 0.5;
}
.short-dialogue-item .reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  isolation: isolate;
  margin-top: 15px;
  color: #b0f7ff;
}
@media (min-width: 740px) {
  .short-dialogue-item .reward {
    margin-top: 20px;
  }
}
.short-dialogue-item .reward:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
  z-index: -1;
  background-color: #b0f7ff;
  filter: blur(40px);
  opacity: 0.5;
  position: absolute;
  left: 50%;
  top: calc(50% - 30px);
  transform: translate(-50%, -50%);
}
.short-dialogue-item .reward .img {
  width: 64px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 8px;
}
@media (min-width: 740px) {
  .short-dialogue-item .reward .img {
    width: 72px;
  }
}
@media (min-width: 1380px) {
  .short-dialogue-item .reward .img {
    width: 96px;
  }
}
.short-dialogue-item .reward .img:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
}
.short-dialogue-item .reward .btn {
  margin-top: 10px;
}
.short-dialogue-item .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-height: 800px) and (orientation: landscape) {
  .short-dialogue-item .content {
    flex-direction: row;
    align-items: center;
  }
  .short-dialogue-item .content .text {
    text-align: left;
  }
  .short-dialogue-item .content .reward {
    margin: 0 0 0 40px;
  }
}
.mission-chapter-title {
  width: 100%;
  text-align: left;
  font-family: "Quantico", sans-serif;
}
.mission-chapter-title .position {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875em;
  color: #b0f7ff;
}
@media (min-width: 980px) {
  .mission-chapter-title .position {
    justify-content: flex-start;
    padding-bottom: 0.5em;
  }
}
.mission-chapter-title .position .icon {
  margin-right: 5px;
}
.mission-chapter-title .position .icon:before {
  width: 20px;
  height: 20px;
  background-color: #b0f7ff;
}
@media (min-width: 980px) {
  .mission-chapter-title .position:after {
    content: "";
    display: block;
    width: 100%;
    flex: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 1em;
  }
}
.mission-chapter-title h1 {
  font-size: clamp(24px, 5vh, 48px);
  font-weight: bold;
  color: #2fc1fb;
  padding: 0 0 0.25em 0;
  line-height: 1.1;
  background: linear-gradient(to bottom, #b0f7ff, #2fc1fb, #083860);
  background: -webkit-linear-gradient(to bottom, #b0f7ff, #2fc1fb, #083860);
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
  color: transparent;
}
@media (min-width: 980px) {
  .mission-chapter-title h1 {
    font-size: clamp(18px, 3vh, 30px);
    text-align: left;
  }
}
.game-mission-container {
  font-family: "Quantico", sans-serif;
  padding-left: 0;
  padding-right: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: clip-path;
  padding-top: 50px;
  padding-bottom: 110px;
  position: fixed;
  overflow-x: initial;
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-mission-container {
    padding-bottom: 240px;
  }
}
@media (min-width: 980px) {
  .game-mission-container {
    padding: 10vw 20vh;
    padding: clamp(50px, 4vh, 100px) 10vw clamp(140px, 15vh, 200px);
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container {
    padding-top: 5vh;
    padding-top: 4.5vh;
  }
}
@media (min-width: 980px) {
  .game-mission-container .fn-area {
    margin-top: 0;
  }
}
.game-mission-container .mission-swiper {
  width: 100%;
  opacity: 0;
  transform: translateY(50px);
}
.game-mission-container .mission-swiper .swiper-slide .mission-pool {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
}
.game-mission-container
  .mission-swiper
  .swiper-slide.swiper-slide-active
  .mission-pool {
  opacity: 1;
  pointer-events: auto;
}
.game-mission-container .fn {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
@media (min-width: 740px) {
  .game-mission-container .fn {
    padding-bottom: 10px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-mission-container .fn {
    padding-top: 5px;
  }
}
.game-mission-container .prologue {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  clip-path: inset(0 0 0 0);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(37, 47, 56, 0.9),
    rgba(61, 75, 91, 0.9),
    rgba(10, 38, 59, 0.9)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  will-change: transform, backdrop-filter;
}
.game-mission-container .prologue .mission-chapter-title {
  width: 90%;
}
@media (min-width: 980px) {
  .game-mission-container .prologue .mission-chapter-title {
    width: 50%;
  }
}
.game-mission-container .prologue .mission-chapter-title .position {
  font-size: 1.25em;
}
.game-mission-container .prologue .mission-chapter-title h1 {
  font-size: clamp(24px, 5vh, 48px);
}
@media (min-width: 980px) {
  .game-mission-container .prologue .mission-chapter-title h1 {
    font-size: clamp(24px, 5.5vh, 72px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
}
.game-mission-container
  .swiper-slide:first-of-type
  .part-container
  .title-area:after {
  background: linear-gradient(
    to right,
    rgba(210, 234, 245, 0) 0%,
    rgba(210, 234, 245, 0) 50%,
    #d2eaf5 50.1%,
    rgba(210, 234, 245, 0) 100%
  );
}
.mission-chapter {
  position: absolute;
  width: 64%;
  left: 5%;
  top: 10px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mission-chapter {
    display: none;
  }
}
@media (min-width: 980px) {
  .mission-chapter {
    width: clamp(300px, 26%, 480px);
    top: 20px;
    left: 5%;
  }
}
@keyframes map-spin {
  to {
    transform: translate(-50%, -50%) rotate(-1turn);
  }
}
.mission-map {
  position: absolute;
  width: 64%;
  width: clamp(220px, 64%, 340px);
  left: 5%;
  bottom: 10px;
  isolation: isolate;
}
.mission-map:before {
  content: "";
  display: block;
  width: 60%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 60%;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(#2fc1fb 0deg, #2fc1fb 0deg, transparent 40deg);
  animation: map-spin 7s linear infinite;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .mission-map {
    display: none;
  }
}
@media (min-width: 980px) {
  .mission-map {
    width: clamp(280px, 24%, 420px);
    bottom: 20px;
    left: 5%;
  }
}
.mission-map .map {
  position: relative;
  width: 100%;
  background: url("../images/map.svg") no-repeat center center;
  background-size: contain;
  z-index: 3;
}
.mission-map .map:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 53%;
}
.mission-map .map .pin {
  width: 5%;
  background: url("../images/item/pin.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  transform-origin: center bottom;
  transform: translate(-50%, -50%);
  animation: pin 1.5s linear infinite;
}
.mission-map .map .pin:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 150%;
}
.mission-map .text-holder {
  font-size: 0.875em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  letter-spacing: 1px;
}
.mission-item {
  border: 1px solid rgba(179, 179, 179, 0.5);
  background: linear-gradient(
    to bottom,
    rgba(176, 176, 176, 0.5),
    rgba(84, 84, 84, 0.5)
  );
  position: relative;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: not-allowed;
  transition: backdrop-filter 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.05s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: backdrop-filter, transform;
  border-radius: 3px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mission-item {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .mission-item {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 740px) and (max-width: 1379.9px) and (orientation: portrait) {
  .mission-item {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
  }
}
@media (min-width: 980px) {
  .mission-item:before {
    content: "";
    width: 100%;
    padding-bottom: clamp(80px, 72%, 200px);
    display: block;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .mission-item:before {
    padding-bottom: clamp(120px, 64%, 200px);
  }
}
.mission-item .text-holder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mission-item .text-holder {
    width: 70px;
    padding: 0;
    min-height: 32px;
    justify-content: center;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .mission-item .text-holder {
    width: 120px;
    font-size: 1.125em;
    height: clamp(32px, 5vh, 40px);
  }
}
@media (min-width: 980px) {
  .mission-item .text-holder {
    padding: 34px 10px 10px 10px;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.mission-item .text-holder:before {
  content: "";
  display: none;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  position: absolute;
  left: -2px;
  top: -2px;
  border: 2px solid #fff;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-sizing: border-box;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  border-radius: 3px;
}
.mission-item .text-holder span {
  font-size: 1rem;
  transition: color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  line-height: 1em;
  display: none;
}
.mission-item .text-holder .number {
  font-size: 1.5em;
  transition: color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  line-height: 1em;
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .mission-item .text-holder .number {
    font-size: 1.75em;
  }
}
@media (min-width: 980px) {
  .mission-item .text-holder .number {
    padding-top: 0.4em;
    font-size: clamp(32px, 5.4vh, 72px);
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .mission-item .text-holder .number {
    font-size: clamp(24px, 4vh, 48px);
    font-size: clamp(36px, 5.4vh, 72px);
    padding-top: 0.3em;
  }
}
.mission-item .type-holder {
  position: absolute;
  width: calc(100% - 6px);
  background: linear-gradient(
    to bottom,
    rgba(54, 54, 54, 0.5),
    rgba(23, 23, 23, 0.5)
  );
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: "Quantico", sans-serif;
  padding: 0 10px;
  font-size: 0.875rem;
  border-radius: 2px;
  font-weight: lighter;
  color: #999;
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: width, height, left, top;
  z-index: 1;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mission-item .type-holder {
    width: calc(100% - 73px);
    overflow: hidden;
    border-radius: 3px;
    position: relative;
    justify-content: space-between;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .mission-item .type-holder {
    width: calc(100% - 120px);
    font-size: 1rem;
  }
}
@media (min-width: 980px) {
  .mission-item .type-holder {
    height: 32px;
    top: 3px;
    left: 3px;
  }
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .mission-item .type-holder {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 0.8125rem;
  }
}
.mission-item .type-holder:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 40%;
  height: 3px;
  background-color: #b0f7ff;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.5)
  );
  z-index: 9;
  box-sizing: border-box;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mission-item .type-holder:before {
    right: 0;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@media (min-width: 980px) {
  .mission-item .type-holder:before {
    width: 30%;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
    height: 4px;
  }
}
.mission-item .type-holder .icon:before {
  width: 26px;
  height: 26px;
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: width, height;
  background-color: #999;
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .mission-item .type-holder .icon:before {
    width: 32px;
    height: 32px;
  }
}
@media (min-width: 980px) {
  .mission-item .type-holder .icon {
    left: 6px;
    bottom: 3px;
    position: absolute;
  }
}
.mission-item.--lock .text-holder span,
.mission-item.--lock .text-holder .number {
  opacity: 0.5;
  pointer-events: none;
}
.mission-item.--lock .text-holder:before {
  width: 28%;
  padding-bottom: 38%;
  background: url(" ../images/item/3d-lock.png") no-repeat center center;
  display: block;
  background-size: contain;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 1;
  border: none;
  box-shadow: initial;
  height: initial;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mission-item.--lock .text-holder:before {
    width: 30px;
    height: 30px;
    padding-bottom: 38%;
    left: initial;
    right: 0;
    transform: translate(-10px, -50%);
  }
}
.mission-item.--lock .type-holder {
  background: linear-gradient(
    to bottom,
    rgba(27, 27, 27, 0.8),
    rgba(27, 27, 27, 0.2)
  );
  color: #c9c9c9;
  box-shadow: #999 0 1px 5px;
}
.mission-item.--lock .type-holder .icon:before {
  background-color: #999;
}
.mission-item.--lock .type-holder:before {
  background: linear-gradient(
    to bottom,
    rgba(201, 201, 201, 0.8),
    rgba(201, 201, 201, 0.8)
  );
}
.mission-item.--active {
  background: linear-gradient(
    to bottom,
    rgba(172, 236, 255, 0.8),
    rgba(157, 219, 237, 0.6),
    rgba(71, 118, 133, 0.7)
  );
  border-color: rgba(255, 255, 255, 0.4);
  color: #d9fff9;
  cursor: pointer;
}
.mission-item.--active .type-holder {
  background: linear-gradient(
    to bottom,
    rgba(11, 49, 60, 0.8),
    rgba(11, 49, 60, 0.5)
  );
  color: #8abdce;
  box-shadow: #a1e0f5 0 1px 5px;
}
.mission-item.--active .type-holder .icon:before {
  background-color: #8abdce;
}
.mission-item.--active .type-holder:before {
  background: linear-gradient(
    to bottom,
    rgba(161, 224, 245, 0.8),
    rgba(161, 224, 245, 0.8)
  );
}
.mission-item.--active .text-holder strong {
  text-shadow: 2px 2px 5px #203943, -2px -2px 5px #3e6674;
}
@media (hover: none) {
  .mission-item.--active:active {
    background: linear-gradient(
      to bottom,
      rgba(216, 246, 255, 0.8),
      rgba(92, 143, 158, 0.7),
      rgba(106, 166, 186, 0.8)
    );
    color: #ecfffc;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  .mission-item.--active:active .text-holder:before {
    opacity: 1;
    transform: none;
  }
  .mission-item.--active:active .text-holder .number {
    transform: scale(1.25);
  }
}
@media (hover: hover) {
  .mission-item.--active .text-holder:before {
    display: block;
  }
  .mission-item.--active:hover {
    background: linear-gradient(
      to bottom,
      rgba(216, 246, 255, 0.8),
      rgba(92, 143, 158, 0.7),
      rgba(106, 166, 186, 0.8)
    );
    color: #ecfffc;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  .mission-item.--active:hover .text-holder:before {
    opacity: 1;
    transform: none;
  }
  .mission-item.--active:hover .text-holder .number {
    transform: scale(1.25);
  }
  .mission-item.--active:hover .type-holder {
    width: 100%;
    left: 0;
    top: 0;
    height: 40px;
  }
  .mission-item.--active:hover .type-holder .icon:before {
    width: 32px;
    height: 32px;
  }
}
.mission-item.--finish {
  background: linear-gradient(
    to bottom,
    #684e15,
    rgba(235, 188, 86, 0.9),
    rgba(104, 62, 20, 0.9) 80%
  );
  border-color: rgba(249, 236, 184, 0.5);
  color: #ffc445;
  cursor: pointer;
}
.mission-item.--finish .type-holder {
  background: linear-gradient(
    to bottom,
    rgba(42, 29, 12, 0.8),
    rgba(42, 29, 12, 0.2)
  );
  color: #efb129;
  box-shadow: #efb129 0 1px 5px;
}
.mission-item.--finish .type-holder .icon:before {
  background-color: #efb129;
}
.mission-item.--finish .type-holder:before {
  background: linear-gradient(
    to bottom,
    rgba(239, 177, 41, 0.8),
    rgba(239, 177, 41, 0.8)
  );
}
.mission-item.--finish .text-holder:after {
  content: "";
  display: block;
  z-index: 5;
  left: 50%;
  bottom: 0;
  opacity: 1;
  animation: initial;
  height: 10px;
  transform: translate(-50%, 50%);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mission-item.--finish .text-holder:after {
    height: 12px;
  }
}
@media (min-width: 1380px) {
  .mission-item.--finish .text-holder:after {
    height: 12px;
  }
}
@media (min-width: 1700px) {
  .mission-item.--finish .text-holder:after {
    height: 18px;
  }
}
.mission-item.--finish .text-holder strong {
  text-shadow: 2px 2px 5px #3b2c0c, -2px -2px 5px #684e15;
}
@media (hover: none) {
  .mission-item.--finish:active {
    background: linear-gradient(
      to bottom,
      rgba(255, 235, 191, 0.8),
      rgba(155, 117, 33, 0.6),
      rgba(154, 98, 42, 0.7)
    );
    color: #ffefc9;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  .mission-item.--finish:active .text-holder:before {
    opacity: 1;
    transform: none;
  }
  .mission-item.--finish:active .text-holder .number {
    transform: scale(1.25);
  }
}
@media (hover: hover) {
  .mission-item.--finish .text-holder:before {
    display: block;
    border-color: #ffbe30;
    box-shadow: #ffbe30 0px 0px 5px, #5b4d2c 0px 0px 10px, #8d7847 0px 0px 15px,
      #f6db9c 0px 0px 20px;
  }
  .mission-item.--finish:hover {
    background: linear-gradient(
      to bottom,
      rgba(104, 78, 21, 0.8),
      rgba(235, 188, 86, 0.7),
      rgba(104, 62, 20, 0.9) 80%
    );
    color: #ffefc9;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  .mission-item.--finish:hover .text-holder:before {
    opacity: 1;
    transform: none;
  }
  .mission-item.--finish:hover .text-holder .number {
    transform: scale(1.25);
  }
  .mission-item.--finish:hover .type-holder {
    width: 100%;
    left: 0;
    top: 0;
    height: 40px;
  }
  .mission-item.--finish:hover .type-holder .icon:before {
    width: 32px;
    height: 32px;
  }
}
@media (hover: hover) {
  .mission-item:active {
    transform: scale(1.05);
  }
}
.mission-pool {
  min-height: 250px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 980px) {
  .mission-pool {
    min-height: 220px;
  }
}
@media (min-width: 980px) and (min-height: 800px) and (orientation: landscape) {
  .mission-pool {
    padding-top: 4vh;
    min-height: 300px;
    padding-bottom: 3vh;
  }
}
@media (min-width: 740px) and (max-width: 1379.9px) and (orientation: portrait) {
  .mission-pool {
    min-height: 360px;
  }
}
.mission-pool ul {
  display: flex;
  flex-direction: column;
  padding: 0 10vw;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  width: 100%;
}
@media (min-width: 980px) {
  .mission-pool ul {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media (min-width: 740px) and (max-width: 1379.9px) and (orientation: portrait) {
  .mission-pool ul {
    max-width: 600px;
  }
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .mission-pool ul {
    padding-left: 0;
    padding-right: 0;
  }
}
.mission-pool li {
  width: 100%;
  padding: 5px 0;
}
@media (min-width: 980px) {
  .mission-pool li {
    width: 15vw;
    padding: 6px 12px;
    position: relative;
  }
  .mission-pool li:nth-of-type(2n + 1):after {
    content: "";
    display: block;
    width: calc(50% + 12px);
    height: 30px;
    position: absolute;
    left: 50%;
    border-left: 1px dashed rgba(255, 255, 255, 0.4);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 0;
  }
  .mission-pool li:nth-of-type(2n + 2) {
    margin-top: 60px;
  }
  .mission-pool li:nth-of-type(2n + 2):after {
    content: "";
    display: block;
    width: calc(50% + 12px);
    height: 30px;
    position: absolute;
    left: 50%;
    top: -25px;
    border-left: 1px dashed rgba(255, 255, 255, 0.4);
    border-top: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 0;
  }
  .mission-pool li:last-of-type:after {
    display: none;
  }
}
@media (min-width: 980px) and (min-height: 800px) and (orientation: landscape) {
  .mission-pool li:nth-of-type(2n + 1):after {
    content: "";
    height: 45px;
  }
  .mission-pool li:nth-of-type(2n + 2) {
    margin-top: 90px;
  }
  .mission-pool li:nth-of-type(2n + 2):after {
    content: "";
    height: 45px;
    top: -40px;
  }
}
@media (min-width: 1700px) {
  .mission-pool li {
    padding: 6px 18px;
  }
  .mission-pool li:nth-of-type(2n + 1):after {
    width: calc(50% + 18px);
  }
  .mission-pool li:nth-of-type(2n + 2):after {
    width: calc(50% + 18px);
  }
}
@media (min-width: 980px) and (max-width: 1379.9px) {
  .mission-pool li {
    width: 18vw;
  }
}
.swiper-slide-active .part-container .title-area:before {
  animation: missionlight 5s linear infinite;
}
@keyframes missionlight {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(225deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .--page-loading {
    justify-content: flex-end;
  }
}
.game-intro-area {
  position: relative;
  width: 100%;
  min-height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  color: #fff;
  padding: 10px 20px 10vh;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-intro-area {
    padding-top: 30px;
    height: calc(50vh + 80px);
    position: fixed;
    left: 0;
    bottom: 0;
  }
}
@media (min-width: 740px) {
  .game-intro-area {
    padding: 6vh 100px 10vh;
  }
}
@media (min-width: 980px) {
  .game-intro-area {
    width: 60%;
    height: 100%;
    padding: 15vh 0 13vh 10vw;
  }
}
.game-intro-area > div {
  position: relative;
  z-index: 1;
}
.game-intro-area .subheading {
  display: flex;
  align-items: center;
  font-size: clamp(18px, 2.1vh, 22px);
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-intro-area .subheading {
    font-size: 0.9375em;
  }
}
.game-intro-area .subheading h3 {
  color: #b0f7ff;
  font-weight: bold;
}
.game-intro-area .subheading .count-board {
  margin-left: 1em;
  font-size: 0.75em;
}
.game-intro-area .fz-A {
  text-shadow: rgba(0, 0, 0, 0.5) 3px 3px 10px;
  padding: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.5em;
  line-height: 1.125em;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-intro-area .fz-A {
    font-size: 1.375em;
    font-size: 1.5em;
    padding-top: 5px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .game-intro-area .fz-A {
    font-size: 1.375em;
    font-size: 2.75em;
  }
}
.game-intro-area .fz-A:after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #b0f7ff, rgba(176, 247, 255, 0));
  margin-top: 0.5em;
  border-radius: 5px;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-intro-area .fz-A:after {
    height: 5px;
  }
}
.game-intro-area p {
  text-shadow: rgba(0, 0, 0, 0.7) 2px 2px 5px;
  width: 90%;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-intro-area p {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    height: 4.5em;
    line-height: 1.5em;
    -webkit-box-orient: vertical;
    font-size: 0.875em;
    font-weight: normal;
  }
}
@media (min-width: 740px) {
  .game-intro-area p {
    width: 70%;
  }
}
.game-intro-area .btn-holder {
  display: flex;
  padding-top: 10px;
  margin-left: -9px;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-intro-area .btn-holder {
    margin-left: -18px;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-intro-area + .game-bg-area .bg {
    background-size: auto 50vh;
    background-position: center top;
    background-repeat: repeat-y;
  }
}
.game-intro-area .fn {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 15px;
  padding-top: 10px;
  margin-left: -10px;
}
@media (min-width: 1100px) {
  .game-intro-area .fn {
    padding-bottom: 25px;
  }
}
.game-intro-area:before {
  content: "";
  display: block;
  width: 65vw;
  padding-bottom: 100%;
  background: url("../images/rotate.png") no-repeat center center;
  background-size: contain;
  position: absolute;
  pointer-events: none;
  left: 90%;
  top: 0;
  animation: rotate 16s linear infinite;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-intro-area:before {
    top: -5vh;
    width: 90vw;
  }
}
.game-intro-area:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-intro-area:after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0)
    );
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
  }
}
@media (min-width: 980px) {
  .game-intro-area:after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.6)
    );
    clip-path: polygon(0 0, 100% 0%, 60% 100%, 0% 100%);
  }
}
@keyframes rotate {
  0% {
    transform: translate(-50%, -35%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -35%) rotate(360deg);
  }
}
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.loading-container .small-text {
  display: block;
  margin-top: 1em;
  font-size: 14px;
  opacity: 0.8;
  letter-spacing: 5px;
  font-weight: lighter;
  text-shadow: 1px 1px 2px #000000be;
  font-weight: normal;
  color: #b0f7ff;
}
.loading-container .loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-container .loading-text i {
  display: block;
  text-transform: uppercase;
  font-family: "Quantico", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(14px, 2vh, 20px);
  text-align: center;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
    #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  color: #fff;
  animation: blinkblue 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  margin: 0 0.5em;
}
@media (min-width: 980px) {
  .loading-container .loading-text i {
    font-size: clamp(16px, 3vh, 64px);
  }
}
.loading-container .loading-text i:nth-of-type(1) {
  animation-delay: 0s;
}
.loading-container .loading-text i:nth-of-type(2) {
  animation-delay: 0.2s;
}
.loading-container .loading-text i:nth-of-type(3) {
  animation-delay: 0.4s;
}
.loading-container .loading-text i:nth-of-type(4) {
  animation-delay: 0.6s;
}
.loading-container .loading-text i:nth-of-type(5) {
  animation-delay: 0.8s;
}
.loading-container .loading-text i:nth-of-type(6) {
  animation-delay: 1s;
}
.loading-container .loading-text i:nth-of-type(7) {
  animation-delay: 1.2s;
}
.loading-container .loading-text i:nth-of-type(8) {
  animation-delay: 1.4s;
}
.loading-container .loading-text i:nth-of-type(9) {
  animation-delay: 1.6s;
}
.loading-container .loading-text i:nth-of-type(10) {
  animation-delay: 1.8s;
}
@keyframes blink {
  0% {
    opacity: 1;
    color: #e1d2af;
  }
  50% {
    opacity: 0.2;
    color: #d2c29c;
  }
  100% {
    opacity: 1;
    color: #e1d2af;
  }
}
@keyframes blinkblue {
  0% {
    opacity: 1;
    color: #e0f6ff;
  }
  50% {
    opacity: 0.1;
    color: #9cdbf6;
  }
  100% {
    opacity: 1;
    color: #e0f6ff;
  }
}
.game-fn-area {
  height: 48px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 59;
  pointer-events: none;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-fn-area .container {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 1380px) {
  .game-fn-area {
    height: 52px;
  }
}
.game-fn-area .title-area {
  display: flex;
  align-items: center;
  height: 2.25em;
  line-height: 1.125em;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-fn-area .title-area {
    display: none;
  }
}
.game-fn-area .title-area .icon:before {
  background-color: #b0f7ff;
}
.game-fn-area .title-area a {
  display: inline-flex;
  margin-right: 0.75em;
}
@media (hover: hover) {
  .game-fn-area .title-area a {
    transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .game-fn-area .title-area a:hover {
    transform: scale(1.25);
  }
}
.game-fn-area .title-area h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-fn-area .title-area h1 {
    font-size: 1em;
    font-size: 0.9375em;
    align-items: center;
  }
}
@media (min-width: 740px) {
  .game-fn-area .title-area h1 {
    -webkit-line-clamp: 1;
    height: 1.25em;
    line-height: 1.25em;
  }
}
.game-fn-area .fn-area {
  flex: 1;
  display: flex;
  justify-content: center;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-fn-area .fn-area {
    align-items: center;
  }
}
@media (min-width: 740px) {
  .game-fn-area .fn-area {
    justify-content: flex-end;
  }
}
.game-fn-area .fn-bar {
  display: flex;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  height: 52px;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-radius: 0 0 20px 20px;
  padding-left: 25px;
  padding-right: 25px;
  background: linear-gradient(
    to bottom,
    rgba(84, 84, 84, 0.4),
    rgba(51, 51, 51, 0.8)
  );
  color: #b0f7ff;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-fn-area .fn-bar {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0;
  }
}
.global-back,
.nav-toggle {
  pointer-events: auto;
  cursor: pointer;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 740px) {
  .global-back,
  .nav-toggle {
    width: 72px;
    height: 72px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .global-back,
  .nav-toggle {
    width: 90px;
    height: 90px;
  }
}
.global-back i,
.nav-toggle i {
  width: 100%;
  display: block;
  overflow: hidden;
  height: 3px;
  border-top: 3px solid #fff;
  border-radius: 3px;
  transform-origin: center center;
  transition: all 0.4s;
  transition-property: transform, opacity, box-shadow;
  box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.3);
}
.global-back .icon:before,
.nav-toggle .icon:before {
  background-color: #fff;
}
.global-back .square-back,
.global-back .hamburger,
.nav-toggle .square-back,
.nav-toggle .hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  position: relative;
}
@media (min-width: 740px) {
  .global-back .square-back,
  .global-back .hamburger,
  .nav-toggle .square-back,
  .nav-toggle .hamburger {
    width: 30px;
    height: 30px;
  }
}
@media (hover: hover) {
  .global-back:hover i,
  .nav-toggle:hover i {
    box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px;
  }
}
.nav-toggle {
  left: auto;
  right: 0;
}
.nav-toggle span {
  color: #fff;
  font-size: 0.75em;
  font-family: "apparat", sans-serif;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-80%, -50%);
  line-height: 1;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nav-toggle i {
  margin-top: 6px;
}
@media (min-width: 740px) {
  .nav-toggle i {
    margin-top: 8px;
  }
}
.nav-toggle i:first-of-type {
  margin-top: 0;
}
.nav-toggle i:nth-of-type(2) {
  transform-origin: right center;
  transform: scaleX(0.7);
}
@media (hover: hover) {
  .nav-toggle:hover i:nth-of-type(2) {
    transform: scaleX(0);
  }
  .nav-toggle:hover span {
    transform: translate(-50%, -50%);
    opacity: 1;
    transition-delay: 0.1s;
  }
}
.nav-toggle.--active i:nth-of-type(1) {
  transform: translateY(9px) rotate(135deg);
}
@media (min-width: 740px) {
  .nav-toggle.--active i:nth-of-type(1) {
    transform: translateY(10.5px) rotate(135deg);
  }
}
.nav-toggle.--active i:nth-of-type(2) {
  transform: scaleX(0);
}
.nav-toggle.--active i:nth-of-type(3) {
  transform: translateY(-9px) rotate(-135deg);
}
@media (min-width: 740px) {
  .nav-toggle.--active i:nth-of-type(3) {
    transform: translateY(-10.5px) rotate(-135deg);
  }
}
.nav-toggle.--active span {
  transform: translate(-30%, -50%);
  opacity: 0;
  transition-delay: 0s;
}
.square-back i {
  transform-origin: right center;
}
.square-back i:nth-of-type(1) {
  transform: rotate(-45deg) translate(-2px, -8px);
  width: 50%;
}
@media (min-width: 740px) {
  .square-back i:nth-of-type(1) {
    transform: rotate(-45deg) translate(-2px, -12px);
  }
}
.square-back i:nth-of-type(2) {
  transform: translate(3px, 0);
  width: 80%;
}
@media (min-width: 740px) {
  .square-back i:nth-of-type(2) {
    width: 90%;
    transform: translate(10px, 0);
  }
}
.square-back i:nth-of-type(3) {
  transform: rotate(45deg) translate(-2px, 8px);
  width: 50%;
}
@media (min-width: 740px) {
  .square-back i:nth-of-type(3) {
    transform: rotate(45deg) translate(-2px, 12px);
  }
}
.global-back {
  transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
  .global-back:hover .square-back {
    animation: hrmove 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards infinite;
  }
}
@keyframes hrmove {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
.exp-bar-container {
  display: flex;
  align-items: center;
  font-family: "apparat", sans-serif;
  position: relative;
  transition: width 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .exp-bar-container {
    width: 100%;
    justify-content: center;
  }
}
.exp-bar-container .exp-bar {
  border-radius: 3px;
  height: 16px;
  flex: 1;
  background-color: #fff;
  background: linear-gradient(
    to bottom,
    rgba(186, 186, 186, 0.3),
    rgba(255, 255, 255, 0.5) 50%,
    rgba(147, 147, 147, 0) 50.1%,
    rgba(171, 171, 171, 0.3) 100%
  );
  position: relative;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 0) and (max-width: 739.9px) {
  .exp-bar-container .exp-bar {
    max-width: 220px;
  }
}
@media (min-width: 740px) {
  .exp-bar-container .exp-bar {
    width: 180px;
  }
}
@media (min-width: 1100px) {
  .exp-bar-container .exp-bar {
    width: 200px;
  }
}
@media (min-width: 1380px) {
  .exp-bar-container .exp-bar {
    width: 240px;
  }
}
.exp-bar-container .exp {
  background-color: #00f7ff;
  border-radius: 3px;
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  background: linear-gradient(
    to bottom,
    #37c157,
    #55ff7c 50%,
    #237e38 50.1%,
    #37c157 100%
  );
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.exp-bar-container .exp:after {
  content: "";
  display: block;
  width: 2px;
  height: 110%;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  right: -1px;
  top: -5%;
  filter: blur(1px);
}
.exp-bar-container .exp-count {
  display: flex;
  align-items: flex-end;
  padding-left: 10px;
  letter-spacing: 1px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 1100px) {
  .exp-bar-container .exp-count {
    padding-left: 15px;
  }
}
.exp-bar-container .exp-count strong {
  font-size: 14px;
  color: #00f7ff;
  font-weight: bold;
}
.exp-bar-container .exp-count span {
  font-size: 11px;
  opacity: 0.5;
  padding-bottom: 0;
  padding-left: 2px;
}
.exp-bar-container .btn-generate {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 1.125em;
  font-weight: bold;
  height: 32px;
  border-radius: 30px;
  letter-spacing: 1px;
  opacity: 0;
  transform: translate(-60%, -50%);
  isolation: isolate;
  pointer-events: none;
  transition: transform 0.5s ease, opacity 0.5s ease;
  background: radial-gradient(
      ellipse farthest-corner at right bottom,
      #fedb37 0%,
      #fdb931 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #fff 0%,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4),
    0px 0px 20px rgba(255, 255, 255, 0.3) inset;
}
@media (min-width: 740px) {
  .exp-bar-container .btn-generate {
    left: initial;
    right: 0;
    width: 180px;
  }
}
@media (min-width: 980px) {
  .exp-bar-container .btn-generate {
    height: 36px;
    transform: translate(-20px, -50%);
  }
}
.exp-bar-container .btn-generate .icon {
  margin-right: 10px;
}
.exp-bar-container .btn-generate .icon:before {
  width: 20px;
  height: 20px;
  background-color: #fff;
}
.exp-bar-container .btn-generate:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(
    to bottom,
    rgba(209, 180, 100, 0),
    rgba(209, 180, 100, 0.4) 50%,
    rgba(209, 180, 100, 0) 50.1%
  );
  box-shadow: #d1b464 0px 0px 20px;
}
.exp-bar-container.--active {
  height: 36px;
}
.exp-bar-container.--active .exp-count {
  opacity: 0;
  transform: translateX(50px);
  pointer-events: none;
}
.exp-bar-container.--active .exp {
  width: 100% !important;
}
.exp-bar-container.--active .exp-bar {
  opacity: 0;
  transform: translateX(50px);
  pointer-events: none;
}
.exp-bar-container.--active .btn-generate {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s,
    opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
  transform: translate(-50%, -50%);
}
@media (min-width: 740px) {
  .exp-bar-container.--active .btn-generate {
    transform: translate(0, -50%);
  }
}
.glow {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  transform: translate(50%, 0);
}
.glow::before,
.glow::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.glow::before {
  filter: blur(2px);
  background: #9affb0;
  animation: glow-animation 2s linear infinite;
}
.glow::after {
  filter: blur(3px);
  background: #50ff76;
  animation: glow-animation 2s linear infinite;
  z-index: 1;
}
@keyframes glow-animation {
  0% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5, 1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.5;
  }
}
.mailbox {
  pointer-events: auto;
  cursor: pointer;
  right: 50px;
  top: 0;
  width: 50px;
  height: 50px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  background-color: transparent;
  z-index: 99;
  border-radius: 5px;
}
.mailbox .count {
  font-family: "Quantico", sans-serif;
  background-color: #2fc1fb;
  color: #000;
  width: 24px;
  height: 24px;
  font-size: 0.8125em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  letter-spacing: 0;
  padding-top: 1px;
  transform: translate(8px, -25px) scale(0.8);
}
@media (min-width: 0) and (max-width: 739.9px) {
  .mailbox .count {
    transform: translate(5px, -20px) scale(0.8);
  }
}
.mailbox .icon {
  pointer-events: none;
}
.mailbox .icon:before {
  background-color: #fff;
}
@media (min-width: 740px) {
  .mailbox {
    width: 72px;
    height: 72px;
    right: 72px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .mailbox {
    width: 90px;
    height: 90px;
    right: 90px;
  }
  .mailbox .icon:before {
    width: 36px;
    height: 36px;
  }
}
@media (hover: hover) {
  .mailbox:hover .icon {
    animation: ssscale 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
}
@keyframes ssscale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
}
.game-input-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
  pointer-events: none;
  transform: translateY(50px);
  opacity: 0;
  z-index: 9;
}
.game-input-area .container > div {
  position: relative;
  height: 100%;
}
.game-input-area + .game-bg-area + .footer {
  display: none;
}
@media (min-width: 740px) {
  .game-input-area {
    height: clamp(100px, 15vh, 150px);
  }
}
.game-input-area.--active {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.game-input-area .input-voice-container,
.game-input-area .input-text-container,
.game-input-area .input-mcq-container {
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
}
.game-input-area .btn-change {
  color: #fff;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  font-size: 13px;
  text-shadow: 0 0 20px #2fc1fb, 0 0 30px #2fc1fb, 0 0 40px #2fc1fb,
    0 0 55px #2fc1fb, 0 0 75px #2fc1fb, 2px 2px 2px rgba(6, 75, 40, 0);
}
.input-voice-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  color: #fff;
  font-size: 13px;
  transform: translateY(-10%);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
.input-voice-container:before {
  content: "";
  display: block;
  width: 22vh;
  height: 22vh;
  position: absolute;
  background-image: radial-gradient(
    circle,
    rgba(47, 193, 251, 0.5),
    rgba(47, 193, 251, 0) 70%
  );
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  z-index: 1;
}
.input-voice-container > div {
  position: relative;
  z-index: 2;
}
@keyframes voice-active {
  0% {
    transform: translate(-50%, 50%) scale(1);
  }
  50% {
    transform: translate(-50%, 50%) scale(1.25);
  }
  100% {
    transform: translate(-50%, 50%) scale(1);
  }
}
.input-voice {
  height: clamp(60px, 8vh, 100px);
  width: clamp(60px, 8vh, 100px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  isolation: isolate;
  z-index: 2;
  cursor: not-allowed;
}
.input-voice::before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background-color: #fff;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), #fff);
  transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.input-voice:after {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  background-color: transparent;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-shadow: rgba(0, 247, 255, 0) 0px 0px 10px 0px;
}
.input-voice .icon {
  position: relative;
  z-index: 6;
}
.input-voice .icon:before {
  background-color: #666;
  width: clamp(18px, 3.6vh, 36px);
  height: clamp(18px, 3.6vh, 36px);
}
.input-voice .num-countdown {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Quantico", sans-serif;
  left: 0;
  top: 0;
  font-size: 2vw;
  font-weight: bold;
  opacity: 0;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  color: #083860;
  z-index: 6;
}
.input-voice.--active {
  cursor: pointer;
}
.input-voice.--active:before {
  opacity: 0;
}
.input-voice.--active:after {
  background-color: #fff;
  box-shadow: #00f7ff 0px 0px 15px 0px;
}
.input-voice.--active .icon:before {
  background-color: #06682f;
  animation: none;
  width: clamp(18px, 3.6vh, 36px);
  height: clamp(18px, 3.6vh, 36px);
}
.input-voice.--active .circle {
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  background: conic-gradient(
    #fff 0deg var(--progress-degree),
    #94d697 var(--progress-degree),
    #d1fad3 360deg
  );
  display: flex;
  justify-content: center;
  align-items: center;
  left: 3px;
  top: 3px;
  z-index: 1;
  filter: blur(0.5px);
}
.input-voice.--active.--countdown .num-countdown {
  opacity: 1;
}
.input-voice.--active.--pause:before {
  opacity: 0;
}
.input-voice.--active.--pause .icon:before {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 5.8% 0;
  animation: none;
  width: clamp(18px, 3.6vh, 36px);
  height: clamp(18px, 3.6vh, 36px);
}
.input-voice.--active.--pause.--countdown .num-countdown {
  opacity: 1;
  color: #fff;
}
.input-voice.--active.--pause.--countdown .icon {
  transform: scale(1);
}
@media (hover: hover) {
  .input-voice:hover {
    transform: scale(1.1);
  }
}
@keyframes shadowscale {
  0% {
    box-shadow: #b81515 0px 0px 10px 0px;
  }
  50% {
    box-shadow: #b81515 0px 0px 30px 0px;
  }
  100% {
    box-shadow: #b81515 0px 0px 10px 0px;
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.input-text-container {
  position: relative;
  display: flex;
  height: 100%;
  padding: 10px 0 30px;
}
@media (min-width: 1380px) {
  .input-text-container {
    padding: 10px 10px 38px;
    padding: 10px 0 38px;
  }
}
.input-text-container .btn-change {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
}
@media (min-width: 1380px) {
  .input-text-container .btn-change {
    bottom: 12px;
  }
}
.input-text-container .wrapper {
  display: flex;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100%;
  border-radius: 12px;
}
.input-text-container .fn {
  overflow: hidden;
  display: block;
  padding: 3px;
  width: 60px;
}
@media (min-width: 980px) {
  .input-text-container .fn {
    padding: 6px;
    width: clamp(100px, 10vw, 180px);
  }
}
.input-text-container .btn-submit {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background-color: #0b4a7f;
}
.input-text-container .btn-submit .icon:before {
  background-color: #fff;
}
@media (hover: hover) {
  .input-text-container .btn-submit:hover {
    background-color: #0d60a3;
  }
}
.input-text-container textarea {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  border-radius: 0;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
  font-size: 1em;
  line-height: 1.375em;
  color: #000;
  resize: none;
  transition: width 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 100%;
  padding: 6px 12px;
  box-sizing: border-box;
  border-radius: 12px 0 0 12px;
  font-size: 16px;
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: border-radius, background-color, border-color;
  scrollbar-color: var(--color-scrollbar) transparent;
}
@media (min-width: 740px) {
  .input-text-container textarea {
    font-size: 1.125em;
  }
}
@media (min-width: 1380px) {
  .input-text-container textarea {
    font-size: 1.25em;
    padding: 8px 15px;
  }
}
.input-mcq-container {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .input-mcq-container {
    isolation: isolate;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .input-mcq-container:after {
    content: "";
    display: block;
    width: calc(100% + 20px);
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
    left: -10px;
    top: 0;
    position: absolute;
    border-radius: 12px 12px 0 0;
  }
}
@media (min-width: 980px) {
  .input-mcq-container {
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    margin-bottom: 2.5vh;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .input-mcq-container {
    padding: 20px;
  }
}
.input-mcq-container .btn,
.input-mcq-container .item {
  margin: 0;
  width: 100%;
  height: initial;
  padding: 0.75em 0.5em;
  line-height: 1em;
  text-align: left;
  justify-content: flex-start;
}
.input-mcq-container .btn span {
  padding: 0;
}
.input-mcq-container .btn + .btn {
  margin-top: 8px;
}
@media (min-width: 980px) {
  .input-mcq-container .btn {
    width: calc(50% - 4px);
  }
  .input-mcq-container .btn:nth-of-type(2n + 2) {
    margin-left: 8px;
  }
  .input-mcq-container .btn:nth-of-type(2) {
    margin-top: 0;
  }
}
@media (hover: hover) {
  .input-mcq-container .btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 20px;
  }
}
.input-mcq-container .option-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .input-mcq-container .option-container + .btn {
    width: 100% !important;
    justify-content: center;
  }
}
@media (min-width: 740px) {
  .input-mcq-container .option-container .btn {
    font-size: 1em;
  }
}
@media (min-width: 1380px) {
  .input-mcq-container .option-container .btn {
    font-size: 1.125em;
  }
}
@media (min-width: 1700px) {
  .input-mcq-container .option-container .btn {
    font-size: 1.25em;
  }
}
@media (hover: hover) {
  .input-mcq-container .option-container .btn:hover {
    background-color: #fff;
    color: #083860;
    background: linear-gradient(to top, #e8fdff, #c7f9ff);
  }
  .input-mcq-container .option-container .btn:hover span {
    color: #083860;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .input-mcq-container.--for-letter {
    padding-bottom: 2px;
  }
  .input-mcq-container.--for-letter .btn {
    width: calc(50% - 4px);
    margin: 0 0 8px;
  }
  .input-mcq-container.--for-letter .btn:nth-of-type(2n + 2) {
    margin-left: 8px;
  }
}
@media (min-width: 980px) {
  .input-mcq-container.--for-letter .btn {
    flex: 1;
    margin-top: 0;
  }
  .input-mcq-container.--for-letter .btn + .btn {
    margin-left: 8px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .input-mcq-container.--for-letter .btn + .btn {
    margin-left: 16px;
  }
}
@media (min-width: 980px) {
  .input-mcq-container.--for-option {
    padding-left: 20%;
    padding-right: 20%;
  }
}
@media (min-width: 1100px) {
  .input-mcq-container.--for-option {
    padding-left: 25%;
    padding-right: 25%;
  }
}
.input-mcq-container.--for-option .btn {
  flex: 1;
  margin: 0;
  justify-content: center;
  font-size: 1.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .input-mcq-container.--for-option .btn {
    font-size: 2em;
  }
}
.input-mcq-container.--for-option .btn + .btn {
  margin-left: 8px;
}
@media (min-width: 980px) {
  .input-mcq-container.--for-option .btn + .btn {
    margin-left: 16px;
  }
}
@media (min-width: 980px) {
  .input-mcq-container.--for-multi {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
@media (min-width: 980px) {
  .input-mcq-container.--for-multi .option-container {
    width: calc(100% - 128px);
  }
}
@media (min-width: 1380px) {
  .input-mcq-container.--for-multi .option-container {
    width: calc(100% - 148px);
  }
}
.input-mcq-container.--for-multi .option-container .btn {
  padding-left: 5px;
}
@media (min-width: 980px) {
  .input-mcq-container.--for-multi .option-container .btn {
    padding-left: 0.75em;
  }
}
.input-mcq-container.--for-multi .option-container .btn:before {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #083860;
  border-radius: 3px;
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: none;
}
.input-mcq-container.--for-multi .option-container .btn:after {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 34.78% 0;
  width: 1.25em;
  height: 1.25em;
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  background-color: #083860;
  opacity: 0;
  z-index: 3;
}
.input-mcq-container.--for-multi .option-container .btn.selected {
  background: linear-gradient(to bottom, rgba(47, 193, 251, 0.8), #074171);
  background: linear-gradient(to top, #0861aa, #094b80);
  color: #fff;
}
.input-mcq-container.--for-multi .option-container .btn.selected:after {
  opacity: 1;
  background-color: #fff;
}
.input-mcq-container.--for-multi .option-container .btn.selected:before {
  background: #083860;
}
@media (hover: hover) {
  .input-mcq-container.--for-multi .option-container .btn.selected:hover {
    color: #fff;
  }
  .input-mcq-container.--for-multi .option-container .btn.selected:hover span {
    color: #fff;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .input-mcq-container.--for-multi .option-container + .btn {
    margin-top: 8px;
  }
}
@media (min-width: 980px) {
  .input-mcq-container.--for-multi .option-container + .btn {
    width: 120px;
    justify-content: center;
  }
}
@media (min-width: 1380px) {
  .input-mcq-container.--for-multi .option-container + .btn {
    width: 140px;
    justify-content: center;
  }
}
@media (min-width: 980px) {
  .input-mcq-container.--for-multi.--for-letter .option-container {
    padding-right: 8px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .input-mcq-container.--for-multi.--for-letter .option-container {
    padding-right: 16px;
  }
}
.input-mcq-container.--for-multi.--for-letter .option-container + .btn {
  margin-top: 0;
}
@media (min-width: 980px) {
  .input-mcq-container.--more-than-5 .option-container .btn {
    min-width: initial;
    width: calc(33.33% - 6px);
    flex: initial;
    margin-top: 8px;
  }
  .input-mcq-container.--more-than-5
    .option-container
    .btn:nth-of-type(3n + 1) {
    margin-left: 0;
  }
  .input-mcq-container.--more-than-5 .option-container .btn:nth-of-type(1),
  .input-mcq-container.--more-than-5 .option-container .btn:nth-of-type(2),
  .input-mcq-container.--more-than-5 .option-container .btn:nth-of-type(3) {
    margin-top: 0;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .input-mcq-container.--more-than-5 .option-container .btn {
    margin-left: 8px;
  }
}
.input-plugin-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}
.input-set-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.input-set-container .item {
  margin: 5px;
  flex-shrink: 0;
}
.--voice-mode .input-voice-container {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.--voice-mode .input-text-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--voice-mode .input-mcq-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--voice-mode .input-plugin-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--text-mode .input-voice-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--text-mode .input-text-container {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.--text-mode .input-mcq-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--text-mode .input-plugin-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--mcq-mode .input-voice-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--mcq-mode .input-text-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--mcq-mode .input-mcq-container {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.--mcq-mode .input-plugin-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--plugin-mode .input-voice-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--plugin-mode .input-text-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--plugin-mode .input-mcq-container {
  transform: translateY(20%);
  opacity: 0;
  pointer-events: none;
}
.--plugin-mode .input-plugin-container {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.game-setting-area {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.game-setting-area .setting-container {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 980px) {
  .game-setting-area .setting-container {
    padding: 20px;
  }
}
.game-setting-area .pool {
  padding-bottom: 10px;
}
.game-setting-area h2 {
  color: #fff;
  font-size: 1.25em;
  width: 100%;
  text-align: center;
  padding-bottom: 10px;
}
.game-setting-area .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.game-setting-area.--active {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.chat-item {
  margin: 2.5vh 0;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
  opacity: 0;
  transform: translateY(30px);
}
.chat-item .chat-item-container {
  border-radius: clamp(12px, 1.25vw, 30px);
  position: relative;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.4)
  );
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
@media (min-width: 740px) {
  .chat-item .chat-item-container {
    display: flex;
    align-items: flex-end;
  }
}
.chat-item .chat-item-container:after,
.chat-item .chat-item-container:before {
  content: "";
  display: block;
  width: calc(100% - 2px);
  height: 50px;
  position: absolute;
  z-index: -1;
  left: 1px;
  top: 1px;
  background: linear-gradient(
    to bottom,
    rgba(14, 48, 65, 0.4),
    rgba(14, 48, 65, 0)
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0)
  );
  border-radius: clamp(12px, 1.25vw, 30px) clamp(12px, 1.25vw, 30px) 0 0;
  pointer-events: none;
}
.chat-item .chat-item-container:after {
  top: initial;
  height: 70px;
  bottom: 1px;
  background: linear-gradient(
    to top,
    rgba(49, 49, 49, 0.3),
    rgba(49, 49, 49, 0)
  );
  border-radius: 0 0 clamp(12px, 1.25vw, 30px) clamp(12px, 1.25vw, 30px);
}
.chat-item .translate {
  padding: 5px 10px;
  background: linear-gradient(
    to top,
    rgba(132, 228, 255, 0.3),
    rgba(98, 221, 255, 0.5)
  );
  color: #013c5e;
  border-radius: 6px;
  margin-top: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform, max-height;
  margin-bottom: 10px;
  display: flex;
  max-height: 0;
}
@media (min-width: 740px) {
  .chat-item .translate {
    margin-bottom: 3vh;
    margin-top: 10px;
  }
}
.chat-item .translate p,
.chat-item .translate li {
  font-size: 0.9375em;
}
@media (min-width: 1700px) {
  .chat-item .translate p,
  .chat-item .translate li {
    font-size: 1em;
  }
}
.chat-item .translate.--active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  max-height: initial;
}
.chat-item .count-board {
  margin-bottom: 15px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .chat-item .count-board {
    position: absolute;
    right: 10px;
    top: 0;
    transform-origin: right center;
    transform: translateY(-50%) scale(0.9);
  }
}
.chat-item .chat-fn-bar {
  display: flex;
  align-items: center;
  position: static;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .chat-item .chat-fn-bar {
    flex-direction: column;
  }
}
@media (min-width: 740px) {
  .chat-item .chat-fn-bar {
    align-items: flex-end;
    flex: 1;
  }
}
.chat-item .chat-fn-bar .left {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 0;
  transform: translateY(-50%);
}
@media (min-width: 980px) {
  .chat-item .chat-fn-bar .left {
    right: 15px;
  }
}
@media (min-width: 1380px) {
  .chat-item .chat-fn-bar .left {
    right: 20px;
  }
}
.chat-item .chat-fn-bar .right {
  width: 100%;
  display: flex;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .chat-item .chat-fn-bar .right .btn {
    flex: 1;
    height: 40px;
    font-size: 1.125em;
  }
}
@media (min-width: 980px) {
  .chat-item .chat-fn-bar .right {
    justify-content: flex-end;
  }
}
.chat-item .chat-fn-bar.--disabled .left,
.chat-item .chat-fn-bar.disabled .left {
  filter: grayscale(1) brightness(0.8);
  pointer-events: none;
  opacity: 0.9;
}
.chat-item .avatar {
  flex-shrink: 0;
  pointer-events: none;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .chat-item .avatar {
    position: absolute;
    width: 72px;
    background-color: #ccc;
    border-radius: 12px;
    overflow: hidden;
    left: 10px;
    top: 0;
    transform: translateY(-45px);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .chat-item .avatar {
    width: 200px;
    position: relative;
  }
}
@media (min-width: 980px) {
  .chat-item .avatar {
    margin: 0 2.2% 0 -5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    width: 20vh;
    width: clamp(200px, 22vh, 360px);
  }
}
@media (min-width: 1380px) {
  .chat-item .avatar {
    width: 25vh;
    width: 27vh;
  }
}
.chat-item .avatar .name {
  position: absolute;
  left: 50%;
  font-size: clamp(14px, 1.75vh, 32px);
  text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
  padding: 3px 10px 5px;
  border-radius: 3px;
  letter-spacing: 1px;
  white-space: nowrap;
  font-size: clamp(14px, 1.75vh, 32px);
  bottom: 5%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.3) 80%
  );
  font-weight: bold;
  color: #ffffff;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .chat-item .avatar .name {
    display: none;
  }
}
@media (min-width: 1380px) {
  .chat-item .avatar .name {
    font-size: clamp(14px, 2vh, 32px);
  }
}
.chat-item .avatar .img:before {
  padding-bottom: 112.5%;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .chat-item .avatar .img {
    background-position: center top;
  }
  .chat-item .avatar .img:before {
    padding-bottom: 100%;
  }
}
.chat-item .content {
  flex: 1;
  padding: 35px 10px 0 10px;
  position: relative;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .chat-item .content p,
  .chat-item .content li {
    font-size: 0.9375em;
    font-size: 1em;
    letter-spacing: 0;
  }
}
@media (min-width: 740px) {
  .chat-item .content {
    min-height: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 25px 10px 0 10px;
  }
}
@media (min-width: 1100px) {
  .chat-item .content {
    padding: 27px 15px 0;
  }
}
@media (min-width: 1380px) {
  .chat-item .content {
    padding: 30px 20px 0;
  }
}
.chat-item.npc {
  flex: 1;
  display: flex;
  margin-bottom: 12vh;
  align-items: center;
}
@media (min-width: 740px) {
  .chat-item.npc {
    margin-bottom: 6vh;
  }
}
.chat-item.self {
  margin-top: 10px;
  position: absolute;
  height: 80px;
  bottom: 0;
  width: calc(100% - 20px);
  transform: none;
}
@media (min-width: 740px) {
  .chat-item.self {
    width: calc(100% - 20vw);
  }
}
@media (min-width: 980px) {
  .chat-item.self {
    width: calc(100% - 36vw);
  }
}
@media (min-width: 1380px) {
  .chat-item.self {
    margin-top: 4vh;
  }
}
.chat-item.self .chat-item-container {
  width: 100%;
  margin-left: 0;
  background: none;
  backdrop-filter: initial;
  -webkit-backdrop-filter: initial;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .chat-item.self .chat-item-container {
    border-radius: 0;
    margin-left: -10px;
    width: calc(100% + 20px);
  }
}
@media (min-width: 740px) {
  .chat-item.self .chat-item-container {
    flex-direction: row-reverse;
  }
}
.chat-item.self .chat-item-container:after,
.chat-item.self .chat-item-container:before {
  background: linear-gradient(
    to bottom,
    rgba(5, 27, 15, 0.4),
    rgba(5, 27, 15, 0)
  );
}
.chat-item.self .chat-item-container:before {
  border-radius: 0;
}
.chat-item.self .chat-item-container:after {
  bottom: initial;
  top: 1px;
  height: 50vh;
  z-index: 1;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: linear-gradient(
    to bottom,
    rgba(4, 33, 56, 0.7) 0%,
    rgba(4, 33, 56, 0) 70%
  );
}
@media (min-width: 740px) {
  .chat-item.self .chat-item-container:after {
    border-radius: 12px 12px 0 0;
  }
}
.chat-item.self .content {
  padding: 20px;
  z-index: 3;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .chat-item.self .content {
    padding-bottom: 0;
  }
}
.chat-item.self .content p {
  color: #fff;
}
.chat-item.self .avatar {
  display: none;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .chat-item.self p {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    display: -webkit-box;
    height: 7.5em;
    line-height: 1.25em;
    -webkit-box-orient: vertical;
  }
}
.chat-item.--escape {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: initial;
  padding-top: 3vh;
  z-index: 9;
  margin: 0;
  pointer-events: none !important;
}
.chat-item.--escape .chat-item-container {
  height: 68vh;
  width: 46vh;
  background: initial;
  backdrop-filter: initial;
  pointer-events: auto;
  position: relative;
}
.chat-item.--escape .chat-item-container:after {
  content: "";
  display: block;
  width: 40%;
  padding-bottom: 40%;
  height: initial;
  top: 50%;
  left: 50%;
  background: initial;
  border-radius: initial;
  bottom: initial;
  transform: translate(-50%, -50%);
  background: initial;
  background-size: contain;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition-delay: 0s;
}
.chat-item.--escape .chat-item-container:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: initial;
  background-color: rgba(42, 205, 191, 0.2);
  opacity: 0;
  border-radius: initial;
  filter: blur(5px);
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.chat-item.--escape .chat-fn-bar {
  display: none;
}
.chat-item.--escape .chat-fn-bar .left {
  position: initial;
}
.chat-item.--escape .markdown-wrapper {
  color: #fff;
}
.chat-item.--escape .content {
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.chat-item.--escape .content p {
  color: #e8ffff;
  text-shadow: 0 0 5px rgba(232, 255, 255, 0.95),
    0 0 10px rgba(126, 249, 255, 0.6);
  transition: text-shadow 0.25s ease, filter 0.25s ease;
}
.chat-item.--escape .avatar {
  display: none;
}
.chat-item.--escape.--ok .content {
  transform: scale(0.8);
  opacity: 0;
}
.chat-item.--escape.--ok .chat-item-container:after {
  background: url("../images/item/icon-right.svg") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition-delay: 0.1s;
}
.chat-item.--escape.--ok .chat-item-container:before {
  opacity: 1;
  background-color: rgba(35, 153, 120, 0.1);
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.chat-item.--escape.--wrong .content {
  transform: scale(0.8);
  opacity: 0;
}
.chat-item.--escape.--wrong .chat-item-container:after {
  background: url("../images/item/icon-wrong.svg") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition-delay: 0.1s;
}
.chat-item.--escape.--wrong .chat-item-container:before {
  opacity: 1;
  background-color: rgba(112, 13, 13, 0.1);
  transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.chat-item.--active {
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.chat-item.--finish .chat-item-container {
  animation: finish 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes finish {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
.answers-area {
  display: flex;
}
.answers-area .btn {
  flex: 1;
}
@media (min-width: 980px) {
  .answers-area.--for-short {
    padding-left: 15%;
    padding-right: 15%;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .answers-area.--sentence {
    flex-direction: column;
  }
  .answers-area.--sentence .btn {
    margin: 0 0 8px 0;
    width: 100%;
    justify-content: flex-start;
    padding: 0.5em;
    line-height: 1.25em;
  }
}
@media (min-width: 980px) {
  .answers-area.--sentence {
    padding-left: 0;
    padding-right: 0;
  }
}
.write-billboard {
  position: relative;
  flex-direction: column;
  display: flex;
  border-radius: 5px;
  height: calc(100% - 100px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-top: 50px;
  width: calc(100% - 10px);
  margin-left: 5px;
  background: linear-gradient(
    to bottom,
    rgba(10, 19, 22, 0.9),
    rgba(30, 52, 67, 0.75)
  );
}
.write-billboard:before,
.write-billboard:after {
  content: "";
  display: block;
  position: absolute;
  opacity: 1;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-sizing: border-box;
}
.write-billboard:after {
  width: calc(100% - 4px);
  height: 50%;
  left: 2px;
  top: 2px;
  border-radius: 2px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(47, 193, 251, 0.3),
    rgba(47, 193, 251, 0)
  );
}
.write-billboard:before {
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  left: -5px;
  top: -5px;
  border-radius: 5px;
  z-index: 1;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  border: 2px solid #cbe1e9;
}
.write-billboard.--active {
  display: flex;
}
.write-billboard .top-area {
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  z-index: 3;
}
.write-billboard .top-area .left {
  flex: 1;
  border-radius: 5px 5px 0 0;
  min-height: 50px;
  padding: 0 20px 10px;
  border-bottom: none;
  color: #cbfbe3;
}
@media (min-width: 980px) {
  .write-billboard .top-area .left {
    padding: 0 6% 10px;
    border-radius: 5px 5px 0 0;
  }
}
.write-billboard .top-area .left p {
  border-radius: 0 0 5px 5px;
  padding: 5px 10px;
  display: block;
  margin-top: -5px;
  border-top: 2px solid rgba(203, 225, 233, 0.5);
  line-height: 1.25em;
  font-size: 0.9375em;
  text-align: center;
  position: relative;
  isolation: isolate;
  background: linear-gradient(to top, rgba(68, 164, 242, 0.5), #89d8f8 80%);
  border-bottom: 1px solid #2fc1fb;
  color: #031b2f;
}
.write-billboard .top-area .left p:before {
  content: "";
  display: block;
  width: 100%;
  height: 60%;
  position: absolute;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(203, 225, 233, 0.8),
    rgba(203, 225, 233, 0)
  );
  clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
  left: 0;
  top: 0;
}
@media (min-width: 980px) {
  .write-billboard .top-area .left p {
    padding: 10px 20px;
    text-align: center;
    box-shadow: rgba(14, 34, 36, 0.8) 0px 7px 29px 0px;
    font-size: 1em;
    width: clamp(500px, 60%, 720px);
    margin-left: auto;
    margin-right: auto;
  }
}
.write-billboard .top-area .right {
  width: max-content;
  position: absolute;
  right: initial;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 0 0 5px 5px;
  background-color: rgba(29, 65, 69, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate(-50%, -140px);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .write-billboard .top-area .right {
    transform: translate(-50%, -75px);
  }
}
@media (min-width: 1380px) {
  .write-billboard .top-area .right {
    transform: translate(-50%, -126px);
  }
}
.write-billboard .fn-area {
  color: #b0f7ff;
  padding: 0.5em 10px;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 0 0 5px 5px;
  font-size: 0.8125em;
  text-align: center;
  color: #83e5ec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.write-billboard .fn-area .icon {
  margin-right: 8px;
}
.write-billboard .fn-area .icon:before {
  background-color: #83e5ec;
  width: 18px;
  height: 18px;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .write-billboard .fn-area {
    height: 40px;
  }
}
.write-billboard .bottom-area {
  padding: 0 20px;
  color: #fff;
  border-radius: 0;
  overflow: hidden;
  flex: 1;
  position: relative;
  border-top: none;
  border-bottom: none;
}
@media (min-width: 980px) {
  .write-billboard .bottom-area {
    padding: 0 6%;
  }
}
.write-billboard .part {
  background-color: #fff;
  padding: 0 0.5em 0.07em 2.25em;
  font-size: 0.875em;
  color: #083860;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border-radius: 50px;
  border-bottom: 2px solid #00f7ff;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  position: relative;
  height: 2em;
  transform: translateY(-2px);
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .write-billboard .part {
    height: 2.25em;
    transform: translateY(-3px);
  }
}
.write-billboard .part .icon {
  margin-right: 5px;
  font-size: 1em;
  margin-top: -2px;
  position: absolute;
  left: 5px;
  top: 53%;
  transform: translateY(-50%);
  animation: fmove 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.write-billboard .part .icon:before {
  width: 1.5em;
  height: 1.5em;
  background-color: #083860;
}
@media (hover: hover) {
  .write-billboard .part:hover {
    background-color: #fff;
  }
}
.write-billboard .part.--yourturn {
  cursor: default;
  border: 1px dashed #fff;
  border: none;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.15);
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0)
  );
  color: #fff;
  position: relative;
  color: #aee3ff;
}
.write-billboard .part.--yourturn .icon {
  margin-top: -4px;
}
.write-billboard .part.--yourturn .icon:before {
  background-color: #b1ffea;
}
.write-billboard .part.--yourturn .icon:before {
  background-color: #9eddff;
}
.write-billboard .part.--others {
  cursor: default;
  border: none;
  background-color: rgba(255, 255, 255, 0.6);
}
.write-billboard .part.--others .icon {
  animation: none;
  left: 10px;
}
@media (hover: hover) {
  .write-billboard .part.--others:hover {
    background-color: rgba(255, 255, 255, 0.6);
  }
}
.write-billboard .article-holder {
  height: 100%;
}
.write-billboard .article {
  overflow-y: auto;
  height: 100%;
}
.write-billboard .article {
  scrollbar-width: thin;
  scrollbar-color: #399592 transparent;
}
.write-billboard .article::-webkit-scrollbar {
  width: 12px;
}
.write-billboard .article::-webkit-scrollbar-track {
  background: transparent;
}
.write-billboard .article::-webkit-scrollbar-thumb {
  background-color: #399592;
}
.write-billboard .article p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 60px;
  line-height: 1.75em;
  background-size: 1.75em 1.75em;
  line-height: 2em;
  background-size: 2em 2em;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(135, 213, 255, 0.2),
    rgba(135, 213, 255, 0.2) 1px,
    transparent 1px,
    transparent
  );
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .write-billboard .article p {
    line-height: 2em;
    background-size: 2em 2em;
  }
}
.write-billboard .article span {
  color: rgba(255, 255, 255, 0.5);
}
.write-billboard .article span.self {
  color: #aee3ff;
  text-shadow: 0px 0px 5px #aee3ff;
  animation: selfblue 1.6s linear infinite;
}
.write-billboard .article span.self .icon:before {
  background-color: #9eddff;
}
@keyframes selfgreen {
  0% {
    text-shadow: 0px 0px 5px #87ffdf;
  }
  50% {
    text-shadow: 0px 0px 15px #cbfff1;
  }
  100% {
    text-shadow: 0px 0px 5px #87ffdf;
  }
}
@keyframes selfblue {
  0% {
    text-shadow: 0px 0px 5px #aee3ff;
  }
  50% {
    text-shadow: 0px 0px 15px #def3ff;
  }
  100% {
    text-shadow: 0px 0px 5px #aee3ff;
  }
}
@keyframes fmove {
  0% {
    transform: translate(0, -50%);
  }
  50% {
    transform: translate(6px, -50%);
  }
  100% {
    transform: translate(0, -50%);
  }
}
@keyframes dash {
  0%,
  100% {
    border-color: #00f7ff;
  }
  50% {
    border-color: transparent;
  }
}
.teamup-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teamup-container .teamup {
  isolation: isolate;
  width: clamp(320px, 88%, 600px);
  flex-shrink: 0;
  padding: 40px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(200px, 36vh, 420px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 740px) {
  .teamup-container .teamup {
    padding: 40px 10px 50px;
  }
}
@media (min-width: 980px) {
  .teamup-container .teamup {
    width: clamp(360px, 42%, 720px);
  }
}
@media (min-width: 1380px) {
  .teamup-container .teamup {
    width: clamp(480px, 32%, 720px);
  }
}
.teamup-container .teamup-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 7px 2em 10px;
  margin: 2vh auto 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #083860;
}
.teamup-container .teamup-num .icon {
  margin-left: 10px;
  cursor: pointer;
}
@media (hover: hover) {
  .teamup-container .teamup-num .icon:hover {
    transform: scale(1.25);
  }
}
.teamup-container .teamup-num .icon:before {
  background-color: #b0f7ff;
  width: clamp(22px, 4.25vh, 56px);
  height: clamp(22px, 4.25vh, 56px);
}
.teamup-container .teamup-num p {
  font-size: clamp(28px, 5.5vh, 64px);
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
  font-family: "Quantico", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  justify-content: center;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
    #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
}
.teamup-container .teamup-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ceeaff;
}
.teamup-container .btn-area {
  display: flex;
  align-items: center;
}
.teamup-container .teamup-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 30px;
}
.teamup-container .teamup-avatar h6 {
  font-size: 14px;
  margin: 8px auto;
}
.teamup-container .teamup-avatar .group {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: clamp(240px, 18vw, 320px);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.teamup-container .teamup-avatar .avatar {
  width: calc(25% + 8px);
  flex-shrink: 0;
  margin-left: -10px;
  position: relative;
  animation: floating 1.5s linear infinite;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(1) {
  animation-delay: 0s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(2) {
  animation-delay: 0.3s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(3) {
  animation-delay: 0.6s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(4) {
  animation-delay: 0.9s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(5) {
  animation-delay: 1.2s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(6) {
  animation-delay: 1.5s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(7) {
  animation-delay: 1.8s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(8) {
  animation-delay: 2.1s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(9) {
  animation-delay: 2.4s;
}
.teamup-container .teamup-avatar .avatar:nth-of-type(10) {
  animation-delay: 2.7s;
}
.teamup-container .teamup-avatar .avatar:first-of-type {
  margin-left: 0;
}
.teamup-container .teamup-avatar .avatar .img {
  width: 100%;
  background-color: #eee;
  border-radius: 50%;
  margin-bottom: 6px;
  box-shadow: rgba(0, 0, 0, 0.5) -3px 7px 20px 0px;
  border: 2px solid #baefff;
}
.teamup-container .teamup-avatar .avatar .img:before {
  padding-bottom: 100%;
}
.teamup-container .teamup-avatar .avatar .name {
  font-size: 11px;
  position: absolute;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  height: 1.125em;
  line-height: 1.125em;
  -webkit-box-orient: vertical;
}
.teamup-container .teamup-avatar .avatar.--space .img {
  background: linear-gradient(to bottom, #111, rgba(51, 43, 25, 0.7));
}
@media (min-width: 576px) {
  .teamup-intro {
    display: flex;
  }
}
.teamup-intro > div {
  flex: 1;
}
.teamup-intro > div + div {
  border-left: 1px solid rgba(176, 247, 255, 0.2);
}
.teamup-intro .btn-type {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 240px;
  position: relative;
  display: block;
}
@media (min-width: 740px) {
  .teamup-intro .btn-type {
    width: 260px;
  }
}
@media (min-width: 1380px) {
  .teamup-intro .btn-type {
    width: 320px;
  }
}
@media (min-width: 1700px) {
  .teamup-intro .btn-type {
    width: 400px;
  }
}
.teamup-intro .btn-type:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 76%;
}
.teamup-intro .btn-type .sci-frame {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.teamup-intro .btn-type .wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  left: 0;
  top: 0;
  isolation: isolate;
}
.teamup-intro .btn-type .wrapper:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(176, 247, 255, 0.3) 0%,
    rgba(176, 247, 255, 0) 90%
  );
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
}
@media (min-width: 740px) {
  .teamup-intro .btn-type .wrapper {
    padding: 30px;
  }
}
.teamup-intro .btn-type .img {
  background-size: contain;
  background-position: center;
  width: 48%;
  margin-bottom: 10px;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, filter;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .teamup-intro .btn-type .img {
    margin-bottom: 20px;
  }
}
.teamup-intro .btn-type strong {
  color: #fff;
  font-size: 1.375em;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  display: block;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 740px) {
  .teamup-intro .btn-type strong {
    font-size: 1.5em;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .teamup-intro .btn-type strong {
    font-size: 2em;
  }
}
@media (min-width: 0) and (max-width: 575.9px) {
  .teamup-intro .btn-type + .btn-type {
    margin-top: 40px;
  }
}
@media (min-width: 576px) {
  .teamup-intro .btn-type + .btn-type {
    margin-left: 50px;
  }
}
@media (min-width: 1380px) {
  .teamup-intro .btn-type + .btn-type {
    margin-left: 80px;
  }
}
@media (hover: hover) {
  .teamup-intro .btn-type:hover .img {
    transform: scale(1.125);
    filter: brightness(1.6);
  }
  .teamup-intro .btn-type:hover .wrapper:before {
    opacity: 1;
  }
  .teamup-intro .btn-type:hover strong {
    transform: translateY(8px);
  }
}
@keyframes floating {
  0% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
.multi-player-status {
  display: flex;
  width: 100%;
  padding-bottom: 1px;
}
@media (min-width: 740px) {
  .multi-player-status {
    justify-content: flex-end;
  }
}
.multi-player-status .player {
  flex: 1;
  max-width: 150px;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.multi-player-status .player + .player {
  margin-left: 8px;
}
@media (min-width: 740px) {
  .multi-player-status .player + .player {
    margin-left: 15px;
  }
}
@media (min-width: 1380px) {
  .multi-player-status .player + .player {
    margin-left: 20px;
  }
}
.multi-player-status .avatar {
  width: 36%;
  z-index: 2;
  transform: none;
  position: static;
  margin-right: 5px;
  order: 1;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .multi-player-status .avatar {
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
}
@media (min-width: 980px) {
  .multi-player-status .avatar {
    width: 40%;
  }
}
.multi-player-status .avatar .name {
  display: none;
}
.multi-player-status .avatar .img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimizeQuality;
}
.multi-player-status .status-color {
  display: block;
  width: 100%;
  height: 26px;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.3)
  );
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 12px 12px 0 0;
}
@media (min-width: 740px) {
  .multi-player-status .status-color {
    height: 30px;
    border-radius: 24px 24px 0 0;
  }
}
.multi-player-status .status {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 26px;
  order: 2;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  color: #fff;
  white-space: nowrap;
}
@media (min-width: 740px) {
  .multi-player-status .status {
    height: 30px;
  }
}
.multi-player-status .status .icon {
  margin-right: 3px;
}
.multi-player-status .status .icon:before {
  background-color: #fff;
}
.multi-player-status .status span {
  font-size: 0.75em;
}
@media (min-width: 740px) {
  .multi-player-status .status span {
    font-size: 0.9375em;
  }
}
.multi-player-status .status-normal + .avatar + .status-color {
  background-color: rgba(17, 17, 17, 0.9);
}
.multi-player-status .status-ing + .avatar + .status-color {
  background-color: rgba(14, 89, 160, 0.9);
}
.multi-player-status .status-correct + .avatar + .status-color {
  background-color: #0e561b;
}
.multi-player-status .status-wrong + .avatar + .status-color {
  background-color: #930404;
}
.multi-billboard {
  background: linear-gradient(
    to right,
    rgba(24, 24, 24, 0.3),
    rgba(0, 0, 0, 0.8)
  );
  border-radius: 0 0 12px 0;
  color: #b0f7ff;
  font-family: "apparat", sans-serif;
  display: flex;
  padding: 3px 10px;
  align-items: center;
  width: max-content;
  position: relative;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform;
  font-family: "Quantico", sans-serif;
}
@media (min-width: 740px) {
  .multi-billboard {
    border-radius: 0 0 36px 36px;
    padding: 6px 20px 2px;
    margin: 0 auto;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard {
    padding: 10px 20px 5px;
  }
}
.multi-billboard.--separate {
  background: initial;
  border-radius: initial;
  backdrop-filter: initial;
  -webkit-backdrop-filter: initial;
  display: flex;
  align-items: stretch;
  padding-top: 10px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard.--separate {
    border: 1px solid rgba(176, 247, 255, 0.4);
    padding: 0;
    border-top: none;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0px 0px 15px rgba(176, 247, 255, 0.5);
    border-radius: 0 0 5px 5px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-sizing: border-box;
    width: calc(100% - 40px);
  }
}
@media (min-width: 576px) and (max-width: 979.9px) {
  .multi-billboard.--separate {
    width: 100%;
    border-radius: 0 0 7px 7px;
  }
}
@media (min-width: 980px) {
  .multi-billboard.--separate {
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
    margin-top: 10px;
  }
  .multi-billboard.--separate:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 10%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 50%;
    top: -10px;
    border-radius: 0 0 50vw 50vw;
    transform: translateX(-50%);
    filter: blur(50px);
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard.--separate {
    padding: 35px 0 0 0;
  }
}
.multi-billboard .multi-icon {
  width: 140px;
  margin-right: 10px;
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
}
.multi-billboard .multi-icon:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 81.5%;
  background: url("../images/item/multi-icon-2.png") no-repeat center center;
  background-size: contain;
}
.multi-billboard .round {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 1em;
  padding: 5px 1em 5px 0;
}
@media (min-width: 980px) {
  .multi-billboard .round {
    padding: 5px 2em 5px 0;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .round {
    padding: 5px 3em 5px 0;
  }
}
.multi-billboard .round span {
  font-size: 0.75em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
}
.multi-billboard .round strong {
  font-size: 2.75em;
  line-height: 1;
  font-weight: bold;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard .round strong {
    font-size: 3.5em;
  }
}
.multi-billboard .chart {
  border-left: 1px solid rgba(176, 247, 255, 0.2);
  padding-left: 1em;
}
@media (min-width: 980px) {
  .multi-billboard .chart {
    padding-left: 2em;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .chart {
    padding-left: 3em;
  }
}
.multi-billboard .chart ul {
  display: block;
}
@media (min-width: 740px) {
  .multi-billboard .chart ul {
    min-width: 260px;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .chart ul {
    min-width: 300px;
  }
}
.multi-billboard .chart li {
  display: flex;
  width: 100%;
  color: #fff;
}
.multi-billboard .chart li:first-of-type {
  color: #f6db9c;
}
.multi-billboard .chart span {
  font-size: 0.75em;
  padding-right: 0.75em;
  flex-shrink: 0;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}
@media (min-width: 740px) {
  .multi-billboard .chart span {
    font-size: 0.8125em;
  }
}
.multi-billboard .chart span:nth-of-type(1) {
  width: 20%;
  font-style: italic;
}
.multi-billboard .chart span:nth-of-type(2) {
  width: 50%;
}
.multi-billboard .chart span.score {
  width: 30%;
  text-align: right;
  position: relative;
  min-width: 60px;
  transition: color 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.multi-billboard .chart span.score:before {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 49.28% 0;
  background-color: #bca46a;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.multi-billboard .chart span.score.good:before {
  animation: good 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.multi-billboard .chart span.score.bad {
  color: #e63d3d;
}
.multi-billboard .chart span.score.bad:before {
  background-color: #e63d3d;
}
.multi-billboard .group {
  display: flex;
  align-items: flex-start;
  width: 150px;
  margin-right: 10px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .multi-billboard .group {
    display: none;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard .group {
    width: 180px;
  }
}
@media (min-width: 980px) {
  .multi-billboard .group {
    margin-right: 2em;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .group {
    margin-right: 3em;
  }
}
.multi-billboard .avatar {
  width: calc(33.33% + 8px);
  flex-shrink: 0;
  margin-left: -16px;
  position: relative;
}
.multi-billboard .avatar:first-of-type {
  margin-left: 0;
}
.multi-billboard .avatar .img {
  width: 100%;
  background-color: #111;
  border-radius: 50%;
  margin-bottom: 6px;
  box-shadow: rgba(0, 0, 0, 0.5) -3px 7px 20px 0px;
  border: 2px solid #baefff;
}
.multi-billboard .avatar .img:before {
  padding-bottom: 100%;
}
.multi-billboard .contestants {
  display: flex;
  position: relative;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard .contestants {
    flex: 1;
  }
}
@media (min-width: 980px) {
  .multi-billboard .contestants {
    margin-left: 6px;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .contestants {
    margin-left: 12px;
  }
}
.multi-billboard .contestants .text-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard .contestants .text-holder {
    padding-top: 4px;
    padding-bottom: 1px;
  }
}
@media (min-width: 980px) {
  .multi-billboard .contestants .text-holder {
    padding: 4px 10px 4px 0;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .contestants .text-holder {
    padding: 4px 20px 4px 0;
  }
}
.multi-billboard .contestants .name {
  color: #b0f7ff;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  white-space: nowrap;
  max-width: 8em;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard .contestants .name {
    font-size: 0.75em;
    max-width: 6em;
    height: 1.25em;
    line-height: 1.25em;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .contestants .name {
    max-width: 12em;
  }
}
.multi-billboard .contestants .status {
  font-size: 0.75em;
  color: #fff;
  line-height: 1.375em;
  display: block;
}
@media (min-width: 740px) {
  .multi-billboard .contestants .status {
    font-size: 0.875em;
    margin-top: 1px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard .contestants .status {
    line-height: 1.5em;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .contestants .status {
    font-size: 1em;
  }
}
@media (min-width: 0) and (max-width: 575.9px) {
  .multi-billboard .contestants .avatar {
    display: none;
  }
}
@media (min-width: 576px) {
  .multi-billboard .contestants .avatar {
    width: 50px;
    margin: 0;
    background: none;
  }
  .multi-billboard .contestants .avatar .img {
    border-radius: 0;
    border: none;
    margin: 0;
    background-color: transparent;
    box-shadow: initial;
  }
}
@media (min-width: 740px) {
  .multi-billboard .contestants .avatar {
    width: 64px;
  }
}
@media (min-width: 980px) {
  .multi-billboard .contestants .avatar {
    width: 72px;
    position: absolute;
    left: 5px;
    bottom: 0;
    z-index: 3;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard .contestants .avatar {
    width: 90px;
  }
}
.multi-billboard .contestants .grade {
  color: #fff;
}
.multi-billboard .contestants .score {
  font-size: 0.75em;
  line-height: 1em;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
  font-size: 1.5em;
  transform: translateY(105%);
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  color: #fff;
  transform-origin: right center;
  transform: translate(0, 105%) scale(0);
}
@media (min-width: 740px) {
  .multi-billboard .contestants .score {
    font-size: 2em;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard .contestants .score {
    font-size: 3em;
  }
}
.multi-billboard .contestants .score.--active {
  animation: getscore 1s cubic-bezier(0.2, 1, 0.2, 1.5) forwards;
}
.multi-billboard .contestants .item {
  display: flex;
  color: #b0f7ff;
  position: relative;
  transform-origin: left top;
  transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity, left, right;
  transform-origin: left center;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard .contestants .item {
    padding: 0 10px;
    max-width: 30vw;
    flex: auto;
    box-shadow: none;
  }
}
@media (min-width: 980px) {
  .multi-billboard .contestants .item {
    background: linear-gradient(
      to bottom,
      rgba(213, 255, 254, 0.65),
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0.6)
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 0 0 80px;
    border-radius: 0;
  }
  .multi-billboard .contestants .item:first-of-type {
    border-radius: 40px 0 0 40px;
  }
  .multi-billboard .contestants .item:last-of-type {
    border-radius: 0 40px 40px 0;
    padding-right: 20px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard .contestants .item {
    padding-left: 100px;
  }
}
.multi-billboard .contestants .item.--self {
  position: relative;
  background: linear-gradient(to bottom, rgba(47, 193, 251, 0.5), #083860);
}
@media (min-width: 980px) {
  .multi-billboard .contestants .item.--self {
    background: linear-gradient(
      to bottom,
      rgba(86, 255, 252, 0.65),
      rgba(128, 174, 174, 0.45),
      rgba(128, 174, 174, 0.7)
    );
  }
}
.multi-billboard .contestants .item.--self:before,
.multi-billboard .contestants .item.--self:after {
  content: "";
  display: block;
  position: absolute;
  opacity: 1;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-sizing: border-box;
}
.multi-billboard .contestants .item.--self:after {
  width: 100%;
  height: 50%;
  left: 0;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(47, 193, 251, 0.3),
    rgba(47, 193, 251, 0)
  );
  border-radius: 5px;
  z-index: 1;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard .contestants .item.--self:after {
    border-radius: 0;
  }
}
@media (min-width: 980px) {
  .multi-billboard .contestants .item.--self:after {
    display: none;
  }
}
.multi-billboard .contestants .item.--self:before {
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  left: -3px;
  top: -3px;
  border: 2px solid #cbe1e9;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  border-radius: 5px;
  display: none;
  z-index: 1;
}
.multi-billboard .countdown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #b0f7ff;
  position: relative;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.multi-billboard .countdown:after {
  content: "";
  display: block;
  width: 200%;
  height: 30px;
  position: absolute;
  left: 80%;
  transform: translate(-50%, 50%);
  clip-path: inset(50% 0 0 0);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard .countdown:after {
    display: none;
  }
}
@media (min-width: 980px) {
  .multi-billboard .countdown:after {
    bottom: 0;
    transform: translate(-50%, 50%);
    animation: highlightstory 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .countdown:after {
    height: 30px;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard .countdown {
    border-right: 1px solid rgba(176, 247, 255, 0.5);
    padding: 0 8px;
    min-width: 70px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .multi-billboard .countdown {
    width: 130px;
  }
}
@media (min-width: 980px) {
  .multi-billboard .countdown {
    width: clamp(120px, 10vw, 220px);
  }
}
@media (min-width: 1380px) {
  .multi-billboard .countdown {
    padding: 5px 0;
  }
}
.multi-billboard .countdown span {
  white-space: nowrap;
  width: 100%;
  text-align: center;
  color: #b0f7ff;
  font-size: 0.75em;
  letter-spacing: 1px;
  line-height: 1em;
  margin-bottom: 4px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .multi-billboard .countdown span {
    display: none;
  }
}
@media (min-width: 980px) {
  .multi-billboard .countdown span {
    position: absolute;
    display: block;
    transform: translateY(-200%);
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard .countdown span {
    transform: translateY(-230%);
    font-size: 0.875em;
  }
}
.multi-billboard .countdown .count-num {
  font-size: 1.5em;
  line-height: 1em;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #fff;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  width: 100%;
}
@media (min-width: 740px) {
  .multi-billboard .countdown .count-num {
    font-size: 1.75em;
    line-height: 0.85em;
    padding: 0 0.5em 0;
  }
}
@media (min-width: 980px) {
  .multi-billboard .countdown .count-num {
    font-size: 2.75em;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard .countdown .count-num {
    font-size: 3em;
    line-height: 0.7em;
  }
}
.multi-billboard .countdown .count-num .--small {
  font-size: 0.8125rem;
  position: static;
  transform: initial;
  line-height: 1.125em;
  margin: 0;
}
.multi-billboard .countdown .timeup {
  display: flex;
  height: 100%;
  font-size: 1rem;
  line-height: 0.9em;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
@media (min-width: 740px) {
  .multi-billboard .countdown .timeup {
    font-size: 1.25rem;
    flex-direction: row;
    align-items: flex-end;
  }
}
@media (min-width: 1380px) {
  .multi-billboard .countdown .timeup {
    font-size: 1.75rem;
  }
}
@media (min-width: 1700px) {
  .multi-billboard .countdown .timeup {
    font-size: 2rem;
  }
}
.multi-billboard .countdown .timeup span {
  color: #fff;
  position: static;
  transform: none;
  display: block;
  margin: 0;
  letter-spacing: 0;
  width: max-content;
}
@media (min-width: 740px) {
  .multi-billboard .countdown .timeup span:first-of-type {
    font-size: 1em;
  }
}
.multi-billboard .countdown .timeup span:last-of-type {
  font-size: 1.25em;
}
@media (min-width: 740px) {
  .multi-billboard .countdown .timeup span:last-of-type {
    margin-left: 5px;
    font-size: 1em;
  }
}
.multi-billboard .countdown .exp-bar-container {
  font-family: "Quantico", sans-serif;
  width: 100%;
  min-width: 100px;
}
.multi-billboard .countdown .exp-bar-container .exp-bar {
  border-radius: 3px;
  height: 10px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .multi-billboard .countdown .exp-bar-container .exp-bar {
    max-width: initial;
  }
}
@media (min-width: 740px) {
  .multi-billboard .countdown .exp-bar-container .exp-bar {
    width: 100%;
    height: 16px;
  }
}
.multi-billboard .countdown .exp-bar-container .exp-count {
  display: none;
}
.multi-billboard.--rapid {
  margin: 0 auto;
  background: initial;
  border-radius: initial;
  backdrop-filter: initial;
  -webkit-backdrop-filter: initial;
  display: flex;
  align-items: stretch;
  padding-top: 10px;
}
@media (min-width: 980px) {
  .multi-billboard.--rapid {
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
    margin-top: 10px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .multi-billboard.--rapid {
    padding: 35px 0 0 0;
  }
}
.multi-billboard.--rapid .countdown {
  border-right: none;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard.--rapid .countdown span {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 1px;
  }
}
.multi-billboard.--rapid .countdown:after {
  left: 50%;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .multi-billboard.--rapid .countdown .count-num {
    height: 25px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .multi-billboard.--rapid .countdown .count-num {
    height: 30px;
  }
}
@media (min-width: 980px) {
  .multi-billboard.--rapid .countdown .count-num {
    height: 40px;
  }
}
.multi-billboard.--rapid .countdown .count-num.--aife {
  align-items: flex-end;
  padding-bottom: 4px;
}
.multi-billboard.--rapid .timeup {
  flex-direction: row;
  font-size: inherit;
  line-height: inherit;
}
@media (min-width: 740px) {
  .multi-billboard.--rapid .timeup {
    font-size: inherit;
  }
}
@media (min-width: 1380px) {
  .multi-billboard.--rapid .timeup {
    font-size: inherit;
  }
}
@media (min-width: 1700px) {
  .multi-billboard.--rapid .timeup {
    font-size: inherit;
  }
}
.multi-billboard.--rapid .timeup span {
  line-height: inherit;
  font-size: inherit;
}
.multi-billboard.--rapid .timeup span:first-of-type {
  line-height: inherit;
  font-size: inherit;
}
@media (min-width: 740px) {
  .multi-billboard.--rapid .timeup span:first-of-type {
    font-size: inherit;
  }
}
.multi-billboard.--rapid .timeup span:last-of-type {
  font-size: inherit;
}
@media (min-width: 740px) {
  .multi-billboard.--rapid .timeup span:last-of-type {
    font-size: inherit;
  }
}
@keyframes getscore {
  0% {
    transform: translate(0, 105%) scale(0);
  }
  20% {
    transform: translate(0, 110%) scale(1.25);
  }
  40% {
    transform: translate(0, 105%) scale(1.1);
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
      #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(-10%, 50%) scale(0.5);
    opacity: 0;
  }
}
.game-multi-area {
  position: absolute;
  left: 0;
  width: 100%;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: opacity, transform, visibility;
  pointer-events: none;
  transform: translateY(50px);
  opacity: 0;
  visibility: hidden;
  z-index: 11;
}
.game-multi-area.--active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}
@keyframes good {
  0% {
    background-color: #bca46a;
    transform: translateY(-50%);
  }
  30% {
    background-color: #f6db9c;
  }
  70% {
    background-color: #f6db9c;
    transform: translateY(-50%) scale(1.375);
  }
  100% {
    background-color: #bca46a;
    transform: translateY(-50%) scale(1);
  }
}
.game-result-area {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 12;
  pointer-events: none;
}
.game-result-area .--speedup,
.game-result-area .--right,
.game-result-area .--wrong,
.game-result-area .--fail,
.game-result-area .--got {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  font-family: "Quantico", sans-serif;
  align-items: center;
  justify-content: center;
  font-size: 15vw;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity;
  opacity: 0;
}
.game-result-area .--speedup span,
.game-result-area .--right span,
.game-result-area .--wrong span,
.game-result-area .--fail span,
.game-result-area .--got span {
  display: block;
  font-weight: bold;
  line-height: 0.9em;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition-property: transform, opacity;
}
.game-result-area .--right img,
.game-result-area .--wrong img {
  display: block;
  width: auto;
  height: 70vh;
  transform: scale(0.5);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.2, 1, 0.2, 1.5);
}
@media screen and (orientation: portrait) {
  .game-result-area .--right img,
  .game-result-area .--wrong img {
    height: auto;
    width: 80vw;
  }
}
.game-result-area .--wrong,
.game-result-area .--fail {
  background: linear-gradient(
    15deg,
    rgba(143, 0, 0, 0.5) 0%,
    rgba(41, 0, 0, 0.85) 30%,
    rgba(59, 0, 0, 0.6) 70%,
    rgba(157, 0, 0, 0.8) 100%
  );
}
.game-result-area .--wrong span,
.game-result-area .--fail span {
  background: linear-gradient(to bottom, #520000 0%, red 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 -1px 4px #fff, 0 -2px 10px #ff0, 0 -10px 20px #ff8000,
    0 -18px 40px #f00;
}
.game-result-area .--wrong span + span,
.game-result-area .--fail span + span {
  margin-left: 0.2em;
}
.game-result-area .--wrong span:first-of-type,
.game-result-area .--fail span:first-of-type {
  transform: translateY(-100%) skewY(-20deg);
  opacity: 0;
}
.game-result-area .--wrong span:last-of-type,
.game-result-area .--fail span:last-of-type {
  transform: translateY(100%) skewY(20deg);
  opacity: 0;
}
.game-result-area .--right,
.game-result-area .--got {
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    15deg,
    rgba(10, 191, 4, 0.5) 0%,
    rgba(7, 48, 4, 0.8) 30%,
    rgba(7, 48, 4, 0.6) 70%,
    rgba(9, 148, 4, 0.8) 100%
  );
}
.game-result-area .--right span,
.game-result-area .--got span {
  color: #eaffe4;
  text-shadow: 0 0 3px #289a08, 0 0 10px #97ff7a, 0 0 15px #65d746,
    0 0 20px #49ff18;
}
.game-result-area .--right span:first-of-type,
.game-result-area .--got span:first-of-type {
  transform: translateX(-50%) skewX(-30deg);
  opacity: 0;
  font-size: 0.75em;
  padding-right: 2em;
}
.game-result-area .--right span:last-of-type,
.game-result-area .--got span:last-of-type {
  transform: translateX(50%) skewX(-30deg);
  opacity: 0;
  font-size: 1.25em;
  padding-left: 0.5em;
}
.game-result-area .--speedup {
  background: linear-gradient(
    15deg,
    rgba(163, 8, 8, 0.3) 0%,
    rgba(39, 3, 3, 0) 30%,
    rgba(39, 3, 3, 0) 70%,
    rgba(163, 8, 8, 0.4) 100%
  );
  transition: none;
  opacity: 0;
  pointer-events: none;
}
.game-result-area.--show-speedup .--speedup {
  animation: glow 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  opacity: 1;
}
.game-result-area.--show-fail {
  pointer-events: auto;
}
.game-result-area.--show-fail .--fail {
  opacity: 1;
}
.game-result-area.--show-fail .--fail span {
  transform: none;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1.5) 0.25s;
}
.game-result-area.--show-wrong {
  pointer-events: auto;
}
.game-result-area.--show-wrong .--speedup {
  opacity: 0;
}
.game-result-area.--show-wrong .--wrong {
  opacity: 1;
}
.game-result-area.--show-wrong .--wrong img {
  transform: none;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1.5) 0.25s;
}
.game-result-area.--show-got {
  pointer-events: auto;
}
.game-result-area.--show-got .--got {
  opacity: 1;
}
.game-result-area.--show-got .--got span {
  transform: none;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1.5) 0.25s;
}
.game-result-area.--show-right {
  pointer-events: auto;
}
.game-result-area.--show-right .--speedup {
  opacity: 0;
}
.game-result-area.--show-right .--right {
  opacity: 1;
}
.game-result-area.--show-right .--right img {
  transform: none;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1.5) 0.25s;
}
@keyframes glow {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes gotshadow {
  0%,
  100% {
    text-shadow: 0 0 3px #289a08, 0 0 10px #97ff7abe, 0 0 15px #65d746,
      0 0 20px #4aff18c4;
  }
  50% {
    text-shadow: 0 0 3px #289a08, 0 0 10px #97ff7a, 0 0 15px #65d746,
      0 0 20px #49ff18, 0 0 30px #4aff18b2, 0 0 40px #4aff1890,
      0 0 55px #4aff1889, 0 0 75px #4aff184a;
  }
}
.--multi-result .chat-item.npc {
  transform: scale(0.9);
}
.game-multi-waiting {
  display: flex;
  flex-direction: column;
  position: fixed;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  pointer-events: none;
}
.game-multi-waiting .item {
  display: flex;
  align-items: center;
  font-size: 1.125em;
  font-weight: bold;
  padding: 0;
  color: #fff;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  position: relative;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 0;
  transition-property: opacity, transform;
  opacity: 0;
  transform: translateX(100px);
}
.game-multi-waiting .item:before {
  content: "";
  display: block;
  width: calc(100% - 50px);
  height: calc(100% - 20px);
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50px;
  background: linear-gradient(
    to right,
    rgba(8, 56, 96, 0.7),
    rgba(8, 56, 96, 0)
  );
}
@media (min-width: 980px) {
  .game-multi-waiting .item:before {
    height: calc(100% - 30px);
    width: calc(100% - 65px);
    left: 65px;
  }
}
.game-multi-waiting .item:after {
  content: "";
  display: block;
  width: 300%;
  height: 50px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  clip-path: inset(50% 0 0 0);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-multi-waiting .item:after {
    display: none;
  }
}
@media (min-width: 980px) {
  .game-multi-waiting .item:after {
    bottom: 0;
    transform: translate(-50%, 50%);
    animation: highlightstory 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
}
@media (min-width: 1380px) {
  .game-multi-waiting .item:after {
    height: 50px;
  }
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-multi-waiting .item {
    width: calc(100% - 20px);
  }
}
@media (min-width: 740px) {
  .game-multi-waiting .item {
    font-size: 1.5em;
    margin-right: 15vw;
    margin-left: 0;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-multi-waiting .item {
    font-size: 2em;
  }
}
@media (min-width: 1380px) {
  .game-multi-waiting .item {
    font-size: 2.5em;
  }
}
.game-multi-waiting .item + .item {
  margin-top: 20px;
  flex-direction: row-reverse;
  transform: translateX(-100px);
}
@media (min-width: 740px) {
  .game-multi-waiting .item + .item {
    margin-right: initial;
    margin-left: 15vw;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-multi-waiting .item + .item {
    margin-top: 40px;
  }
}
.game-multi-waiting .item + .item:before {
  left: initial;
  right: 50px;
  background: linear-gradient(
    to left,
    rgba(8, 56, 96, 0.7),
    rgba(8, 56, 96, 0)
  );
}
@media (min-width: 980px) {
  .game-multi-waiting .item + .item:before {
    left: initial;
    right: 65px;
  }
}
.game-multi-waiting .text-holder {
  display: flex;
  flex-direction: column;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  font-weight: normal;
  padding-top: 20px;
  line-height: 1.125em;
}
@media (min-width: 980px) {
  .game-multi-waiting .text-holder {
    padding-top: 30px;
  }
}
.game-multi-waiting .text-holder span {
  display: inline;
  color: #b0f7ff;
  font-size: 0.8125em;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .game-multi-waiting .text-holder span {
    font-size: 0.75em;
  }
}
.game-multi-waiting .text-holder strong {
  display: inline;
  font-weight: normal;
}
.game-multi-waiting .avatar {
  width: 100px;
}
@media (min-width: 740px) {
  .game-multi-waiting .avatar {
    width: 130px;
  }
}
@media (min-width: 1380px) {
  .game-multi-waiting .avatar {
    width: 160px;
  }
}
@media (min-width: 1700px) {
  .game-multi-waiting .avatar {
    width: 180px;
  }
}
.game-multi-waiting .avatar .img:before {
  padding-bottom: 100%;
}
.--waiting-mode .chat-item.npc {
  transform: scale(0.9);
  opacity: 0;
}
.--waiting-mode .game-multi-waiting .item {
  opacity: 1;
  transform: none;
}
.effect-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.effect-container + .game-bg-area + .footer {
  display: none;
}
@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}
.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}
.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}
.checkmark-circle {
  width: 150px;
  height: 150px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-left: auto;
  margin-right: auto;
}
.checkmark-circle .background {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #00c09d;
  position: absolute;
}
.checkmark-circle .checkmark {
  border-radius: 5px;
}
.checkmark-circle .checkmark.draw:after {
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  animation-delay: 100ms;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-name: checkmark;
  -moz-animation-name: checkmark;
  animation-name: checkmark;
  -webkit-transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -o-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.checkmark-circle .checkmark:after {
  opacity: 1;
  height: 75px;
  width: 37.5px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  border-right: 15px solid white;
  border-top: 15px solid white;
  border-radius: 2.5px !important;
  content: "";
  left: 25px;
  top: 75px;
  position: absolute;
}
@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 37.5px;
    opacity: 1;
  }
  40% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
  100% {
    height: 75px;
    width: 37.5px;
    opacity: 1;
  }
}
.submit-btn {
  height: 45px;
  width: 200px;
  font-size: 15px;
  background-color: #00c09d;
  border: 1px solid #00ab8c;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);
  cursor: pointer;
  transition: all 2s ease-out;
  transition: all 0.2s ease-out;
}
.submit-btn:hover {
  background-color: #2ca893;
  transition: all 0.2s ease-out;
}
.game-story-area {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 11;
  transition: all 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  visibility: hidden;
  opacity: 0;
  transition-property: opacity, backdrop-filter, visibility;
}
.game-story-area .chat-item {
  flex: initial;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity;
  opacity: 0;
}
.game-story-area .chat-item.--active {
  transform: translateY(30px);
}
.game-story-area .container {
  justify-content: center;
  padding-top: 5vh;
  height: 100%;
  padding-top: 5vh;
  padding-bottom: 20vh;
}
.game-story-area .story-btn-area {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .game-story-area .story-btn-area {
    flex-direction: column;
    min-height: 100px;
    padding-bottom: 20px;
  }
}
@media (min-width: 740px) {
  .game-story-area .story-btn-area {
    height: clamp(100px, 15vh, 150px);
  }
}
.game-story-area .markdown-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 980px) {
  .game-story-area .markdown-wrapper {
    align-items: flex-start;
  }
}
.--story-mode,
.game-story-area {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.--story-mode .game-main-area,
.--story-mode .game-story-area,
.game-story-area .game-main-area,
.game-story-area .game-story-area {
  padding-top: 5vh;
  padding-bottom: 20vh;
}
.--story-mode .game-story-area,
.game-story-area .game-story-area {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  visibility: visible;
  opacity: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.--story-mode .multi-billboard,
.game-story-area .multi-billboard {
  transform: translateY(-120%);
  opacity: 0;
  transition-duration: 0.25s;
}
.--story-mode .chat-item,
.game-story-area .chat-item {
  transform: none;
  transition-delay: 0.4s;
  opacity: 1;
}
.--story-mode .chat-item.--active,
.game-story-area .chat-item.--active {
  transform: none;
  transition-delay: 0.4s;
  opacity: 1;
}
.--story-mode .chat-item .content,
.game-story-area .chat-item .content {
  text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.8);
  padding: 40px 20px 0;
}
@media (min-width: 740px) {
  .--story-mode .chat-item .content,
  .game-story-area .chat-item .content {
    justify-content: center;
    padding: 5vh 0;
  }
}
.--story-mode .chat-item .content p,
.--story-mode .chat-item .content li,
.game-story-area .chat-item .content p,
.game-story-area .chat-item .content li {
  color: #fff;
  font-size: 1.125em;
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .--story-mode .chat-item .content p,
  .--story-mode .chat-item .content li,
  .game-story-area .chat-item .content p,
  .game-story-area .chat-item .content li {
    font-size: 1.25em;
  }
}
@media (min-width: 980px) {
  .--story-mode .chat-item .content p,
  .--story-mode .chat-item .content li,
  .game-story-area .chat-item .content p,
  .game-story-area .chat-item .content li {
    font-size: clamp(20px, 3vh, 36px);
    line-height: 1.5em;
  }
}
@media (min-width: 0) and (max-width: 739.9px) {
  .--story-mode .chat-item .avatar,
  .game-story-area .chat-item .avatar {
    width: 150px;
    background-color: initial;
    border-radius: initial;
    overflow: initial;
    box-shadow: initial;
    position: initial;
    transform: initial;
    position: relative;
  }
}
@media (min-width: 1380px) {
  .--story-mode .chat-item .avatar,
  .game-story-area .chat-item .avatar {
    width: clamp(220px, 42vh, 380px);
  }
}
.--story-mode .chat-item .avatar .name,
.game-story-area .chat-item .avatar .name {
  bottom: -10px;
  border-radius: initial;
  width: 100%;
  text-align: center;
  background: initial;
  color: #ffe8c7;
  transform: translate(-50%, 100%);
  display: block;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    #ffe1c5 0%,
    #fff 50%,
    #f3b45b 50.1%,
    #ffe3aa 100%
  );
  background: -webkit-linear-gradient(
    to bottom,
    #ffe1c5 0%,
    #fff 50%,
    #f3b45b 50.1%,
    #ffe3aa 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 0.9375em;
  opacity: 1;
  text-shadow: initial;
  font-weight: normal;
}
@media (min-width: 980px) {
  .--story-mode .chat-item .avatar .name,
  .game-story-area .chat-item .avatar .name {
    font-size: clamp(18px, 2.75vh, 32px);
  }
}
.--story-mode .chat-item .translate,
.--story-mode .chat-item .chat-fn-bar,
.game-story-area .chat-item .translate,
.game-story-area .chat-item .chat-fn-bar {
  display: none;
}
.--story-mode .chat-item .chat-item-container,
.game-story-area .chat-item .chat-item-container {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .--story-mode .chat-item .chat-item-container,
  .game-story-area .chat-item .chat-item-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
}
.--story-mode .chat-item .chat-item-container:after,
.--story-mode .chat-item .chat-item-container:before,
.game-story-area .chat-item .chat-item-container:after,
.game-story-area .chat-item .chat-item-container:before {
  display: none;
}
.--story-mode .chat-item .chat-item-container:after,
.game-story-area .chat-item .chat-item-container:after {
  content: "";
  display: block;
  width: 100%;
  height: 6vh;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  clip-path: inset(50% 0 0 0);
}
@media (min-width: 0) and (max-width: 979.9px) {
  .--story-mode .chat-item .chat-item-container:after,
  .game-story-area .chat-item .chat-item-container:after {
    top: 150px;
    transform: translate(-50%, 0);
    margin-top: -3vh;
    animation: none;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .--story-mode .chat-item .chat-item-container:after,
  .game-story-area .chat-item .chat-item-container:after {
    top: 225px;
  }
}
@media (min-width: 980px) {
  .--story-mode .chat-item .chat-item-container:after,
  .game-story-area .chat-item .chat-item-container:after {
    bottom: 0;
    transform: translate(-50%, 50%);
    animation: highlightstory 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    width: 160%;
    height: 14vh;
  }
}
.--story-mode .chat-item.self,
.game-story-area .chat-item.self {
  display: none;
}
.--story-mode .game-bg-area:before,
.game-story-area .game-bg-area:before {
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.--story-mode .story-btn-area,
.--story-mode .input-mcq-container,
.--story-mode .input-plugin-container,
.game-story-area .story-btn-area,
.game-story-area .input-mcq-container,
.game-story-area .input-plugin-container {
  background: initial;
  backdrop-filter: initial;
  -webkit-backdrop-filter: initial;
}
.--story-mode .story-btn-area:after,
.--story-mode .input-mcq-container:after,
.--story-mode .input-plugin-container:after,
.game-story-area .story-btn-area:after,
.game-story-area .input-mcq-container:after,
.game-story-area .input-plugin-container:after {
  display: none;
}
.--story-mode .story-btn-area .btn,
.--story-mode .story-btn-area .btn.--white,
.--story-mode .input-mcq-container .btn,
.--story-mode .input-mcq-container .btn.--white,
.--story-mode .input-plugin-container .btn,
.--story-mode .input-plugin-container .btn.--white,
.game-story-area .story-btn-area .btn,
.game-story-area .story-btn-area .btn.--white,
.game-story-area .input-mcq-container .btn,
.game-story-area .input-mcq-container .btn.--white,
.game-story-area .input-plugin-container .btn,
.game-story-area .input-plugin-container .btn.--white {
  background: initial;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-align: center;
  overflow: visible;
  box-shadow: initial;
  width: 100%;
}
.--story-mode .story-btn-area .btn span,
.--story-mode .story-btn-area .btn.--white span,
.--story-mode .input-mcq-container .btn span,
.--story-mode .input-mcq-container .btn.--white span,
.--story-mode .input-plugin-container .btn span,
.--story-mode .input-plugin-container .btn.--white span,
.game-story-area .story-btn-area .btn span,
.game-story-area .story-btn-area .btn.--white span,
.game-story-area .input-mcq-container .btn span,
.game-story-area .input-mcq-container .btn.--white span,
.game-story-area .input-plugin-container .btn span,
.game-story-area .input-plugin-container .btn.--white span {
  display: block;
  width: max-content;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  font-weight: normal;
  color: #fff;
}
@media (min-width: 980px) {
  .--story-mode .story-btn-area .btn span,
  .--story-mode .story-btn-area .btn.--white span,
  .--story-mode .input-mcq-container .btn span,
  .--story-mode .input-mcq-container .btn.--white span,
  .--story-mode .input-plugin-container .btn span,
  .--story-mode .input-plugin-container .btn.--white span,
  .game-story-area .story-btn-area .btn span,
  .game-story-area .story-btn-area .btn.--white span,
  .game-story-area .input-mcq-container .btn span,
  .game-story-area .input-mcq-container .btn.--white span,
  .game-story-area .input-plugin-container .btn span,
  .game-story-area .input-plugin-container .btn.--white span {
    font-size: clamp(18px, 2.5vh, 30px);
  }
}
.--story-mode .story-btn-area .btn:before,
.--story-mode .story-btn-area .btn:after,
.--story-mode .story-btn-area .btn.--white:before,
.--story-mode .story-btn-area .btn.--white:after,
.--story-mode .input-mcq-container .btn:before,
.--story-mode .input-mcq-container .btn:after,
.--story-mode .input-mcq-container .btn.--white:before,
.--story-mode .input-mcq-container .btn.--white:after,
.--story-mode .input-plugin-container .btn:before,
.--story-mode .input-plugin-container .btn:after,
.--story-mode .input-plugin-container .btn.--white:before,
.--story-mode .input-plugin-container .btn.--white:after,
.game-story-area .story-btn-area .btn:before,
.game-story-area .story-btn-area .btn:after,
.game-story-area .story-btn-area .btn.--white:before,
.game-story-area .story-btn-area .btn.--white:after,
.game-story-area .input-mcq-container .btn:before,
.game-story-area .input-mcq-container .btn:after,
.game-story-area .input-mcq-container .btn.--white:before,
.game-story-area .input-mcq-container .btn.--white:after,
.game-story-area .input-plugin-container .btn:before,
.game-story-area .input-plugin-container .btn:after,
.game-story-area .input-plugin-container .btn.--white:before,
.game-story-area .input-plugin-container .btn.--white:after {
  content: "";
  display: block;
  width: initial;
  height: 1px;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 3px;
  flex: 1;
  position: static;
}
.--story-mode .story-btn-area .btn:before,
.--story-mode .story-btn-area .btn.--white:before,
.--story-mode .input-mcq-container .btn:before,
.--story-mode .input-mcq-container .btn.--white:before,
.--story-mode .input-plugin-container .btn:before,
.--story-mode .input-plugin-container .btn.--white:before,
.game-story-area .story-btn-area .btn:before,
.game-story-area .story-btn-area .btn.--white:before,
.game-story-area .input-mcq-container .btn:before,
.game-story-area .input-mcq-container .btn.--white:before,
.game-story-area .input-plugin-container .btn:before,
.game-story-area .input-plugin-container .btn.--white:before {
  background-color: #fff;
  transform-origin: left center;
  transform: scaleX(0);
  margin-right: 0.5em;
  background: linear-gradient(to right, #9cdbf6, rgba(156, 219, 246, 0));
}
.--story-mode .story-btn-area .btn:after,
.--story-mode .story-btn-area .btn.--white:after,
.--story-mode .input-mcq-container .btn:after,
.--story-mode .input-mcq-container .btn.--white:after,
.--story-mode .input-plugin-container .btn:after,
.--story-mode .input-plugin-container .btn.--white:after,
.game-story-area .story-btn-area .btn:after,
.game-story-area .story-btn-area .btn.--white:after,
.game-story-area .input-mcq-container .btn:after,
.game-story-area .input-mcq-container .btn.--white:after,
.game-story-area .input-plugin-container .btn:after,
.game-story-area .input-plugin-container .btn.--white:after {
  background-color: #fff;
  transform-origin: right center;
  transform: scaleX(0);
  margin-left: 0.5em;
  background: linear-gradient(to left, #9cdbf6, rgba(156, 219, 246, 0));
}
@media (hover: none) {
  .--story-mode .story-btn-area .btn,
  .--story-mode .story-btn-area .btn.--white,
  .--story-mode .input-mcq-container .btn,
  .--story-mode .input-mcq-container .btn.--white,
  .--story-mode .input-plugin-container .btn,
  .--story-mode .input-plugin-container .btn.--white,
  .game-story-area .story-btn-area .btn,
  .game-story-area .story-btn-area .btn.--white,
  .game-story-area .input-mcq-container .btn,
  .game-story-area .input-mcq-container .btn.--white,
  .game-story-area .input-plugin-container .btn,
  .game-story-area .input-plugin-container .btn.--white {
    background: initial;
  }
  .--story-mode .story-btn-area .btn:active,
  .--story-mode .story-btn-area .btn.--white:active,
  .--story-mode .input-mcq-container .btn:active,
  .--story-mode .input-mcq-container .btn.--white:active,
  .--story-mode .input-plugin-container .btn:active,
  .--story-mode .input-plugin-container .btn.--white:active,
  .game-story-area .story-btn-area .btn:active,
  .game-story-area .story-btn-area .btn.--white:active,
  .game-story-area .input-mcq-container .btn:active,
  .game-story-area .input-mcq-container .btn.--white:active,
  .game-story-area .input-plugin-container .btn:active,
  .game-story-area .input-plugin-container .btn.--white:active {
    box-shadow: initial;
    background: initial;
  }
  .--story-mode .story-btn-area .btn:active span,
  .--story-mode .story-btn-area .btn.--white:active span,
  .--story-mode .input-mcq-container .btn:active span,
  .--story-mode .input-mcq-container .btn.--white:active span,
  .--story-mode .input-plugin-container .btn:active span,
  .--story-mode .input-plugin-container .btn.--white:active span,
  .game-story-area .story-btn-area .btn:active span,
  .game-story-area .story-btn-area .btn.--white:active span,
  .game-story-area .input-mcq-container .btn:active span,
  .game-story-area .input-mcq-container .btn.--white:active span,
  .game-story-area .input-plugin-container .btn:active span,
  .game-story-area .input-plugin-container .btn.--white:active span {
    color: #fff;
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
      #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  }
  .--story-mode .story-btn-area .btn:active:before,
  .--story-mode .story-btn-area .btn.--white:active:before,
  .--story-mode .input-mcq-container .btn:active:before,
  .--story-mode .input-mcq-container .btn.--white:active:before,
  .--story-mode .input-plugin-container .btn:active:before,
  .--story-mode .input-plugin-container .btn.--white:active:before,
  .game-story-area .story-btn-area .btn:active:before,
  .game-story-area .story-btn-area .btn.--white:active:before,
  .game-story-area .input-mcq-container .btn:active:before,
  .game-story-area .input-mcq-container .btn.--white:active:before,
  .game-story-area .input-plugin-container .btn:active:before,
  .game-story-area .input-plugin-container .btn.--white:active:before {
    transform: none;
  }
  .--story-mode .story-btn-area .btn:active:after,
  .--story-mode .story-btn-area .btn.--white:active:after,
  .--story-mode .input-mcq-container .btn:active:after,
  .--story-mode .input-mcq-container .btn.--white:active:after,
  .--story-mode .input-plugin-container .btn:active:after,
  .--story-mode .input-plugin-container .btn.--white:active:after,
  .game-story-area .story-btn-area .btn:active:after,
  .game-story-area .story-btn-area .btn.--white:active:after,
  .game-story-area .input-mcq-container .btn:active:after,
  .game-story-area .input-mcq-container .btn.--white:active:after,
  .game-story-area .input-plugin-container .btn:active:after,
  .game-story-area .input-plugin-container .btn.--white:active:after {
    transform: none;
  }
}
@media (hover: hover) {
  .--story-mode .story-btn-area .btn:hover,
  .--story-mode .story-btn-area .btn.--white:hover,
  .--story-mode .input-mcq-container .btn:hover,
  .--story-mode .input-mcq-container .btn.--white:hover,
  .--story-mode .input-plugin-container .btn:hover,
  .--story-mode .input-plugin-container .btn.--white:hover,
  .game-story-area .story-btn-area .btn:hover,
  .game-story-area .story-btn-area .btn.--white:hover,
  .game-story-area .input-mcq-container .btn:hover,
  .game-story-area .input-mcq-container .btn.--white:hover,
  .game-story-area .input-plugin-container .btn:hover,
  .game-story-area .input-plugin-container .btn.--white:hover {
    box-shadow: initial;
  }
  .--story-mode .story-btn-area .btn:hover span,
  .--story-mode .story-btn-area .btn.--white:hover span,
  .--story-mode .input-mcq-container .btn:hover span,
  .--story-mode .input-mcq-container .btn.--white:hover span,
  .--story-mode .input-plugin-container .btn:hover span,
  .--story-mode .input-plugin-container .btn.--white:hover span,
  .game-story-area .story-btn-area .btn:hover span,
  .game-story-area .story-btn-area .btn.--white:hover span,
  .game-story-area .input-mcq-container .btn:hover span,
  .game-story-area .input-mcq-container .btn.--white:hover span,
  .game-story-area .input-plugin-container .btn:hover span,
  .game-story-area .input-plugin-container .btn.--white:hover span {
    color: #fff;
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
      #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
      #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  }
  .--story-mode .story-btn-area .btn:hover:before,
  .--story-mode .story-btn-area .btn.--white:hover:before,
  .--story-mode .input-mcq-container .btn:hover:before,
  .--story-mode .input-mcq-container .btn.--white:hover:before,
  .--story-mode .input-plugin-container .btn:hover:before,
  .--story-mode .input-plugin-container .btn.--white:hover:before,
  .game-story-area .story-btn-area .btn:hover:before,
  .game-story-area .story-btn-area .btn.--white:hover:before,
  .game-story-area .input-mcq-container .btn:hover:before,
  .game-story-area .input-mcq-container .btn.--white:hover:before,
  .game-story-area .input-plugin-container .btn:hover:before,
  .game-story-area .input-plugin-container .btn.--white:hover:before {
    transform: none;
  }
  .--story-mode .story-btn-area .btn:hover:after,
  .--story-mode .story-btn-area .btn.--white:hover:after,
  .--story-mode .input-mcq-container .btn:hover:after,
  .--story-mode .input-mcq-container .btn.--white:hover:after,
  .--story-mode .input-plugin-container .btn:hover:after,
  .--story-mode .input-plugin-container .btn.--white:hover:after,
  .game-story-area .story-btn-area .btn:hover:after,
  .game-story-area .story-btn-area .btn.--white:hover:after,
  .game-story-area .input-mcq-container .btn:hover:after,
  .game-story-area .input-mcq-container .btn.--white:hover:after,
  .game-story-area .input-plugin-container .btn:hover:after,
  .game-story-area .input-plugin-container .btn.--white:hover:after {
    transform: none;
  }
}
.--story-mode .game-category-container,
.--story-mode .game-stage-container,
.--story-mode .game-mission-container,
.--story-mode .game-fn-area,
.game-story-area .game-category-container,
.game-story-area .game-stage-container,
.game-story-area .game-mission-container,
.game-story-area .game-fn-area {
  opacity: 0;
  pointer-events: none;
}
.--story-mode .fixed-partner,
.game-story-area .fixed-partner {
  opacity: 0;
  transform: translate(50px, 0) scale(0.9);
}
@keyframes highlightstory {
  0% {
    transform: translate(-50%, 50%) scale(1);
  }
  52% {
    transform: translate(-50%, 50%) scale(1.25);
  }
  100% {
    transform: translate(-50%, 50%) scale(1);
  }
}
.--story-mode .mailbox {
  opacity: 0;
  pointer-events: none;
}
.game-form-container .form-item {
  border-bottom: 1px solid #2fc1fb;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin-bottom: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.game-form-container .form-item .field {
  font-size: 0.875em;
  font-weight: normal;
  color: #b0f7ff;
}
.game-form-container .form-item .value input {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  font-size: 1.25em;
  color: #fff;
}
.game-form-container .pick-avatar {
  display: flex;
}
.game-form-container .avatar {
  width: calc(25% + 8px);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  margin: 0 8px 10px;
}
.game-form-container .avatar:first-of-type {
  margin-left: 0;
}
.game-form-container .avatar .img {
  width: 100%;
  background-color: #eee;
  border-radius: 50%;
  margin-bottom: 6px;
  box-shadow: rgba(0, 0, 0, 0.5) -3px 7px 20px 0px;
  border: 2px solid #baefff;
}
.game-form-container .avatar .img:before {
  padding-bottom: 100%;
}
.game-form-container .avatar.--space .img {
  background: linear-gradient(to bottom, #111, rgba(51, 43, 25, 0.7));
}
.switch input[type="checkbox"] {
  display: none;
}
.switch input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  display: block;
  min-height: initial;
  padding: initial;
  width: 52px;
  height: 30px;
  background: linear-gradient(-30deg, #1a80a9, #2fc1fb);
  border-radius: 50px;
  transition: 300ms linear;
  filter: grayscale(1);
  box-shadow: initial;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .switch input[type="checkbox"] + label {
    height: 34px;
    width: 64px;
  }
}
.switch input[type="checkbox"] + label:before {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  background-image: none;
  border: none;
  border-radius: 50%;
  transition: left 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  opacity: initial;
  -webkit-mask-image: initial;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .switch input[type="checkbox"] + label:before {
    width: 24px;
    height: 24px;
  }
}
.switch input[type="checkbox"]:checked + label {
  filter: grayscale(0);
  box-shadow: initial;
}
.switch input[type="checkbox"]:checked + label:before {
  background-image: none;
  background-color: #fff;
}
.switch input[type="checkbox"]:checked + label:before {
  left: 27px;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .switch input[type="checkbox"]:checked + label:before {
    left: 34px;
  }
}
@media (hover: hover) {
  .switch input[type="checkbox"]:hover {
    box-shadow: initial;
  }
  .switch input[type="checkbox"]:hover + label {
    box-shadow: initial;
  }
}
.game-history-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-top: 15vh;
  padding-bottom: 15vh;
}
.game-history-container .select-title-area {
  display: flex;
  flex-direction: column;
}
.game-history-container .select-title-area h2 {
  font-size: 1em;
  letter-spacing: 3px;
  line-height: 1em;
}
.history-item {
  color: #b0f7ff;
  display: flex;
  padding: 10px 20px 4vh;
  position: relative;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .history-item {
    flex-direction: column;
  }
}
@media (min-width: 980px) {
  .history-item {
    padding: 10px 30px 4vh;
  }
}
.history-item:after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  position: absolute;
  background: linear-gradient(
    to bottom,
    rgba(210, 234, 245, 0) 0%,
    #d2eaf5 50%,
    rgba(210, 234, 245, 0) 100%
  );
  left: 20px;
  top: 20px;
  margin: 0;
  border-radius: 3px 0 0 3px;
  overflow: hidden;
  z-index: 1;
}
@media (min-width: 740px) {
  .history-item:after {
    top: 20px;
    left: 216.5px;
  }
}
.history-item .date {
  font-family: "Quantico", sans-serif;
  font-size: 1.375em;
  width: 10em;
  position: relative;
  padding-left: 30px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
}
@media (min-width: 740px) {
  .history-item .date {
    padding-right: 40px;
    padding-left: 0;
    font-size: 1.25em;
    width: 220px;
  }
}
@media (min-width: 1100px) {
  .history-item .date {
    font-size: 1.375em;
  }
}
.history-item .date:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
    #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  position: absolute;
  left: 0;
  top: 16px;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
  box-sizing: border-box;
  border: 2px solid #fff;
  z-index: 3;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 740px) {
  .history-item .date:before {
    width: 16px;
    height: 16px;
    left: initial;
    right: 17px;
    top: 16px;
  }
}
.history-item .record {
  padding-left: 20px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .history-item .record {
    padding: 10px 0 10px 30px;
  }
}
.history-item .time {
  font-family: "Quantico", sans-serif;
  font-size: 0.8125em;
  background-color: #b0f7ff;
  color: #083860;
  border-radius: 3px;
  padding: 1px 0.5em 0 0.5em;
  margin: 4px 10px 0 0;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: color, box-shadow, background-color;
  width: 4em;
  text-align: right;
}
@media (min-width: 980px) {
  .history-item .time {
    margin: 3px 15px 0 0;
  }
}
.history-item li {
  margin-bottom: 1em;
}
.history-item a {
  color: #b0f7ff;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  transition-property: padding, color;
}
@media (min-width: 1380px) {
  .history-item a strong {
    font-size: 0.9375em;
  }
}
.history-item a:hover strong {
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  color: #fff;
}
.history-item a:hover .time {
  background-color: #fff;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
}
.timeline {
  width: calc(100% - 60px);
  margin: 0 auto;
  padding: 20px 10px;
  margin-bottom: 80px;
}
@media (min-width: 740px) {
  .timeline {
    width: clamp(600px, 60%, 900px);
    padding: 30px 10px;
  }
}
.elsa-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .elsa-container {
    padding-top: 30px;
    padding-bottom: 8vh;
    justify-content: flex-start;
  }
}
.elsa-game {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .elsa-game {
    height: calc(100% - 50px);
  }
}
@media (min-width: 740px) {
  .elsa-game {
    height: clamp(500px, 70vh, 800px);
  }
}
@media (min-width: 740px) and (orientation: portrait) {
  .elsa-game {
    height: 70vh;
  }
}
.elsa-game::after {
  content: "";
  position: absolute;
  inset: 0;
  top: 8%;
  left: 8%;
  filter: blur(45px);
  opacity: 0.75;
  width: 84%;
  height: 50%;
  z-index: -2;
  border-radius: 60px;
  background: repeating-conic-gradient(
    from var(--a),
    #0b4a7f,
    #2fc1fb,
    #ffe15b,
    #f6db9c,
    #00f7ff
  );
}
.elsa-game .stage {
  font-weight: bold;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 3;
  padding: 0;
  flex: 1;
  background: linear-gradient(
    to bottom,
    rgba(9, 28, 42, 0.6),
    rgba(22, 68, 101, 0.5),
    rgba(9, 28, 42, 0.6)
  );
  background: linear-gradient(
    to bottom,
    rgba(4, 38, 53, 0.95) 0,
    rgba(8, 67, 93, 0.6) 30%,
    rgba(4, 38, 53, 0.8) 75%,
    rgba(4, 38, 53, 0.9) 100%
  );
  border-radius: 30px 30px 0 0;
  border: 1px solid rgba(176, 247, 255, 0.4);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 0 30px rgba(176, 247, 255, 0.3);
}
.elsa-game .stage .btn-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.elsa-game .stage .btn-container:before,
.elsa-game .stage .btn-container:after {
  content: "";
  display: block;
  min-width: 20vw;
  height: 1px;
  background: linear-gradient(to right, #b0f7ff, rgba(176, 247, 255, 0));
}
.elsa-game .stage .btn-container:before {
  background: linear-gradient(to left, #b0f7ff, rgba(176, 247, 255, 0));
}
.elsa-game .stage .btn {
  position: relative;
  flex-shrink: 0;
}
.elsa-game .stage .btn:before {
  border-radius: 0;
}
.elsa-game .stage .btn:active {
  transform: none;
}
.elsa-game .pronunciation {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: clamp(24px, 4.5vh, 48px);
  text-shadow: 0 0 8px rgba(4, 22, 36, 0.3);
}
.elsa-game .pronunciation strong {
  line-height: 1.25em;
  display: flex;
  align-items: flex-end;
}
.elsa-game .pronunciation .btn {
  margin: 0 0 5px 10px;
  border-radius: 30px;
  width: 60px;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .elsa-game .pronunciation .btn {
    margin: 0 0 8px 10px;
  }
}
.elsa-game .pronunciation .red {
  color: #f13434;
}
.elsa-game .pronunciation .green {
  color: #0ca02c;
}
.elsa-game .pronunciation.--for-sentence {
  flex-direction: column;
  font-size: 20px;
  margin: 0 auto;
}
.elsa-game .pronunciation.--for-sentence strong {
  line-height: 1.25em;
  display: block;
}
@media (min-height: 780px) {
  .elsa-game .pronunciation.--for-sentence strong {
    line-height: 1.5em;
  }
}
@media (min-width: 980px) {
  .elsa-game .pronunciation.--for-sentence {
    font-size: clamp(18px, 3vh, 30px);
    max-width: 64%;
  }
}
.elsa-game .pronunciation.--for-sentence .btn {
  transform: scale(0.7) translate(-0.5em, -0.5em);
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .elsa-game .pronunciation.--for-sentence .btn {
    transform: scale(0.8) translate(-0.5em, -0.5em);
  }
}
.elsa-game .fn-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 30px;
  flex-direction: column;
  border: 1px solid rgba(176, 247, 255, 0.4);
  border-top: none;
  border-radius: 0 0 30px 30px;
  box-shadow: inset 0 0 30px rgba(176, 247, 255, 0.3);
  background: linear-gradient(
    to bottom,
    rgba(4, 22, 37, 0.8),
    rgba(4, 22, 37, 0)
  );
}
@media (min-width: 740px) {
  .elsa-game .fn-bar {
    padding: 30px;
  }
}
.elsa-game .fn-bar > div {
  flex: 1;
}
.elsa-game .part-center {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media (min-width: 576px) {
  .elsa-game .part-center {
    max-width: 360px;
  }
}
.elsa-game .part-right {
  display: flex;
  justify-content: center;
  font-size: 1.25em;
  position: absolute;
  bottom: 0;
  transform: translateY(70px);
}
@media (min-width: 740px) {
  .elsa-game .part-right {
    transform: translateY(150%);
  }
}
.elsa-game .pagination {
  font-family: "Quantico", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 5px;
  width: 50%;
  height: 35px;
  background-color: #b0f7ff;
  background: linear-gradient(
    to top,
    rgba(17, 17, 17, 0.1),
    rgba(17, 17, 17, 0.5)
  );
  border-radius: 0 0 20px 20px;
  z-index: 9;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(176, 247, 255, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #b0f7ff;
  font-weight: normal;
  font-size: 0.9375em;
}
.elsa-game .pagination strong {
  padding-right: 0.75em;
}
@media (min-width: 980px) {
  .elsa-game .pagination {
    width: 180px;
  }
}
@media (min-width: 1380px) {
  .elsa-game .pagination {
    width: 220px;
    font-size: 1.125em;
    height: 40px;
  }
}
.elsa-game .pronunciation-question {
  padding: 0 20px;
  width: 100%;
}
.elsa-game .pronunciation-hint {
  font-weight: normal;
  color: #b0f7ff;
  position: relative;
  width: 100%;
  padding: 10px 20px 25px;
}
@media (min-width: 980px) {
  .elsa-game .pronunciation-hint {
    padding: 0 150px 30px 10%;
    margin: 0 auto;
    text-align: left;
    margin-top: 20px;
  }
}
@media (min-width: 1380px) {
  .elsa-game .pronunciation-hint {
    padding: 0 180px 30px 10%;
  }
}
@media (min-width: 1380px) and (min-height: 800px) and (orientation: landscape) {
  .elsa-game .pronunciation-hint {
    padding: 0 200px 50px 10%;
  }
}
.elsa-game .pronunciation-hint .avatar {
  position: absolute;
  width: 110px;
  right: 30px;
  bottom: 0;
  display: none;
}
@media (min-width: 980px) {
  .elsa-game .pronunciation-hint .avatar {
    display: block;
  }
}
@media (min-width: 1380px) {
  .elsa-game .pronunciation-hint .avatar {
    right: 50px;
  }
}
@media (min-width: 1380px) and (min-height: 800px) and (orientation: landscape) {
  .elsa-game .pronunciation-hint .avatar {
    width: 150px;
    right: 50px;
  }
}
.elsa-game .pronunciation-hint .avatar .img:before {
  padding-bottom: 112.5%;
}
.elsa-game .pronunciation-hint .avatar .name {
  display: none;
}
.elsa-game .pronunciation-hint p {
  font-size: 0.9375em;
  line-height: 1.375em;
}
@media (min-width: 1380px) and (min-height: 800px) and (orientation: landscape) {
  .elsa-game .pronunciation-hint p {
    letter-spacing: 1px;
    font-size: 1.0625em;
    line-height: 1.5em;
  }
}
.elsa-game .btn-text .icon:before {
  width: 20px;
  height: 20px;
  background-color: #00f7ff;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .elsa-game .btn-text .icon:before {
    width: 24px;
    height: 24px;
  }
}
.elsa-game .btn-text span {
  font-size: 1.25em;
  color: #00f7ff;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .elsa-game .btn-text span {
    font-size: 1.5em;
  }
}
.elsa-game .elsa-input,
.elsa-game .elsa-replay {
  width: calc(50% - 10px);
}
.elsa-game .elsa-input:active,
.elsa-game .elsa-replay:active {
  transform: translateY(1px);
}
.elsa-game .highlight {
  height: 40px;
  position: absolute;
  top: initial;
  width: 100%;
  bottom: -1px;
  animation: highlightscalebottom 6s cubic-bezier(0.215, 0.61, 0.355, 1)
    infinite;
  transform: translateY(50%);
  pointer-events: none;
  clip-path: inset(0 0 50% 0);
}
@media (min-width: 740px) {
  .elsa-game .highlight {
    width: 200%;
    height: 60px;
  }
}
.elsa-game .input-voice {
  width: 100%;
  height: initial;
  box-shadow: none;
  position: relative;
  cursor: pointer;
}
.elsa-game .input-voice .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
}
@media (min-width: 0) and (max-width: 575.9px) {
  .elsa-game .input-voice .icon {
    width: 24px;
    height: 24px;
  }
}
.elsa-game .input-voice .icon:before {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.elsa-game .input-voice:after {
  width: 100%;
  padding-bottom: 32%;
  position: static;
  border-radius: 10px;
  background: linear-gradient(to bottom, #848484, #575757);
  background: linear-gradient(to bottom, #136731, #199b47);
  box-shadow: none;
}
.elsa-game .input-voice:before {
  display: none;
}
.elsa-game .input-voice.--disabled {
  cursor: not-allowed;
}
.elsa-game .input-voice.--disabled:after {
  background: linear-gradient(to bottom, #4f4f4f, #757575);
}
.elsa-game .input-voice.--active .icon:before {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 5.8% 0;
}
.elsa-game .input-voice.--active:after {
  background: linear-gradient(to bottom, #910f0f, #ad2222);
}
.elsa-game .input-voice.--record:after {
  background: linear-gradient(to bottom, #910f0f, #ad2222);
}
@media (hover: hover) {
  .elsa-game .input-voice:hover {
    transform: none;
  }
  .elsa-game .input-voice:hover .icon {
    transform: translate(-50%, -50%) scale(1.25);
  }
}
.elsa-game .elsafeedback {
  width: 100%;
  text-align: center;
  font-size: 1.125em;
  font-weight: normal;
  padding: 5px 10px 20px;
  left: 0;
  display: flex;
  justify-content: center;
  color: #fdd10b;
}
@media (min-width: 1380px) {
  .elsa-game .elsafeedback {
    font-size: 1.25em;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .elsa-game .elsafeedback {
    padding-bottom: 28px;
  }
}
.elsa-game .elsafeedback .score {
  width: max-content;
  padding-right: 8px;
  font-weight: bold;
}
@media (min-width: 740px) {
  .for-elsa .btn-close {
    right: 18vw;
    top: calc((100vh - clamp(500px, 70vh, 800px) - 50px) / 2);
    transform: translate(50%, -50%);
  }
}
@media (hover: hover) {
  .for-elsa .btn-close:hover {
    transform: translate(50%, -50%) scale(1.25);
  }
}
.for-elsa.--active .elsa-game::after {
  animation: rotating 3s linear infinite;
}
.ranking-item {
  display: flex;
  background: linear-gradient(
    to bottom,
    rgba(8, 36, 38, 0.4) 0%,
    rgba(31, 66, 61, 0.5) 50%,
    rgba(2, 14, 15, 0.55) 100%
  );
  align-items: center;
  border-radius: 3px;
  margin-bottom: 2px;
  position: relative;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .ranking-item {
    height: 50px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .ranking-item {
    min-height: 50px;
  }
}
.ranking-item li {
  width: 20%;
  font-family: "Quantico", sans-serif;
  color: #b0f7ff;
  font-size: 1.125em;
  padding: 0.5em 5px;
  position: relative;
  z-index: 3;
  line-height: 1;
}
@media (min-width: 740px) {
  .ranking-item li {
    font-size: clamp(18px, 1.4vw, 30px);
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .ranking-item li {
    font-size: clamp(22px, 1.4vw, 30px);
  }
}
.ranking-item li:nth-of-type(1) {
  text-align: center;
  color: #fff;
  width: 60px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .ranking-item li:nth-of-type(1) {
    font-size: 1.25em;
  }
}
@media (min-width: 740px) {
  .ranking-item li:nth-of-type(1) {
    width: 80px;
  }
}
@media (min-width: 1380px) {
  .ranking-item li:nth-of-type(1) {
    width: 120px;
  }
}
.ranking-item li:nth-of-type(2) {
  width: 60%;
  flex: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
@media (min-width: 740px) {
  .ranking-item li:nth-of-type(2) {
    flex-direction: row;
  }
}
.ranking-item li:nth-of-type(2) h5 {
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-width: 13.7em;
  white-space: nowrap;
  padding-left: 30px;
  margin-left: -20px;
}
@media (min-width: 740px) {
  .ranking-item li:nth-of-type(2) h5 {
    padding-left: 40px;
    max-width: 14.7em;
  }
}
.ranking-item li:nth-of-type(2) h6 {
  font-size: 0.75rem;
  line-height: 1;
  margin: 1px 0 0 0;
  font-weight: normal;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .ranking-item li:nth-of-type(2) h6 {
    padding-left: 10px;
  }
}
@media (min-width: 740px) {
  .ranking-item li:nth-of-type(2) h6 {
    font-size: 0.8125rem;
    margin: 0 0 0 6px;
  }
}
.ranking-item li:nth-of-type(3) {
  width: 80px;
  text-align: right;
  padding-right: 1em;
}
@media (min-width: 740px) {
  .ranking-item li:nth-of-type(3) {
    width: 90px;
  }
}
.ranking-item.--pre-advanced {
  border: 1px solid rgba(246, 203, 123, 0.5);
  background: linear-gradient(
    to bottom,
    rgba(17, 22, 27, 0.8) 0%,
    rgba(54, 69, 81, 0.85) 50%,
    rgba(8, 13, 16, 0.6) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(50, 32, 0, 0.95) 5%,
    rgba(115, 82, 21, 0.85) 28%,
    rgba(96, 63, 0, 0.85) 50%,
    rgba(32, 22, 4, 0.95) 100%
  );
}
.ranking-item.--pre-advanced li {
  color: #f2deba;
}
.ranking-item.--pre-advanced li:first-of-type {
  color: #ffc34c;
  transform: scale(1.375);
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .ranking-item.--pre-advanced li:first-of-type {
    transform: scale(1.375);
  }
}
.ranking-item.--pre-downgrade {
  background: linear-gradient(
    to bottom,
    rgba(29, 9, 1, 0.8) 0%,
    rgba(99, 31, 5, 0.85) 50%,
    rgba(31, 9, 0, 0.7) 100%
  );
}
.ranking-item.--pre-downgrade li {
  color: #ff986f;
}
.ranking-item.--pre-downgrade li:first-of-type {
  color: #ffb192;
  transform: none;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .ranking-item.--pre-downgrade li:first-of-type {
    transform: none;
  }
}
.ranking-item.--self {
  background: linear-gradient(
    to bottom,
    rgba(176, 247, 255, 0.5) 0%,
    rgba(176, 247, 255, 0.98) 25%,
    rgba(176, 247, 255, 0.8) 45%,
    rgba(11, 74, 127, 0.6) 100%
  );
  overflow: hidden;
}
.ranking-item.--self li {
  color: #083860;
  font-weight: bold;
}
.ranking-item.--self li h5 {
  position: relative;
}
.ranking-item.--self li h5:before {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 49.28% 0;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  position: absolute;
  background-color: #083860;
  transform: translateX(-120%);
}
.ranking-item.--pre-advanced.--self {
  background: linear-gradient(
    to bottom,
    rgba(235, 172, 43, 0.5) 0%,
    rgba(255, 238, 172, 0.98) 25%,
    rgba(242, 203, 76, 0.87) 45%,
    rgba(212, 137, 10, 0.87) 100%
  );
  border-color: #f6cb7b;
  overflow: hidden;
}
.ranking-item.--pre-advanced.--self:before {
  content: "";
  display: block;
  width: 70%;
  height: 60%;
  left: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
  background: url("../images/highlight.png") no-repeat right top;
  background-size: auto 200%;
}
.ranking-item.--pre-advanced.--self:after {
  content: "";
  display: block;
  width: 90%;
  height: 100%;
  right: 0;
  top: 0;
  position: absolute;
  z-index: 1;
  background: url("../images/highlight.png") no-repeat left bottom;
  background-size: auto 200%;
}
.ranking-item.--pre-advanced.--self li {
  color: #083860;
  font-weight: bold;
}
.ranking-item.--pre-advanced.--self li h5 {
  position: relative;
}
.ranking-item.--pre-advanced.--self li h5:before {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 49.28% 0;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  position: absolute;
  background-color: #083860;
  transform: translateX(-120%);
}
.ranking-item.--pre-downgrade.--self {
  background: linear-gradient(
    to bottom,
    rgba(255, 104, 44, 0.85) 0%,
    rgba(255, 133, 84, 0.98) 25%,
    rgba(255, 98, 36, 0.85) 45%,
    rgba(159, 46, 1, 0.9) 100%
  );
  overflow: hidden;
}
.ranking-item.--pre-downgrade.--self li {
  color: #4b1500;
  font-weight: bold;
}
.ranking-item.--pre-downgrade.--self li h5 {
  position: relative;
}
.ranking-item.--pre-downgrade.--self li h5:before {
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: 49.28% 0;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  position: absolute;
  background-color: #4b1500;
  transform: translateX(-120%);
}
.ranking-item.--field {
  border: none;
  background: initial;
}
.ranking-item.--field li {
  font-size: 1rem;
  color: #fff;
}
.ranking-item.--field li:nth-of-type(2) {
  padding-left: 40px;
}
.ranking-container {
  padding-bottom: 100px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .ranking-container {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 740px) and (max-width: 979.9px) {
  .ranking-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 980px) {
  .ranking-container {
    overflow-y: auto;
    height: 100vh;
    width: clamp(500px, 42vw, 960px);
    padding-top: 5vh;
    padding-bottom: 5vh;
    padding: 5vh 30px 120px 0;
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 2%,
      #000 10%,
      #000 86%,
      rgba(0, 0, 0, 0) 99%
    );
  }
}
.ranking-container {
  scrollbar-width: thin;
  scrollbar-color: #e4eeef rgba(0, 0, 0, 0.1);
}
.ranking-container::-webkit-scrollbar {
  width: 10px;
}
.ranking-container::-webkit-scrollbar-track {
  background: transparent;
}
.ranking-container::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 20px;
  transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ranking-container .divider {
  color: #ebac2b;
  font-family: "Quantico", sans-serif;
  display: flex;
  align-items: center;
  padding: 5px 0;
}
.ranking-container .divider:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-top: 1px dashed #ebac2b;
  flex: 1;
  margin-left: 8px;
}
.ranking-container .divider.--pre-downgrade {
  color: #ff7e4b;
}
.ranking-container .divider.--pre-downgrade:after {
  border-color: #ff7e4b;
}
.game-ranking-area {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #1f253b,
    #2783b2,
    #1f253b,
    #2783b2,
    #1f253b
  );
  animation: rotating 22s linear infinite;
  min-height: 100svh;
}
.game-ranking-area .img {
  background-image: url("../images/level/level-1.png");
}
.game-ranking-area .highlight {
  height: 40px;
  left: -50%;
  width: 200%;
  top: 0;
  bottom: initial;
}
@media (min-width: 980px) {
  .game-ranking-area .highlight {
    height: 120px;
  }
}
@media (min-width: 0) and (max-width: 979.9px) {
  .game-ranking-area {
    overflow-y: auto;
  }
}
@media (min-width: 980px) {
  .game-ranking-area .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    position: relative;
  }
  .game-ranking-area .container:before {
    content: "";
    display: block;
    width: 65vw;
    width: 50vw;
    padding-bottom: 100%;
    background: url("../images/rotate.png") no-repeat center center;
    background-size: contain;
    position: absolute;
    pointer-events: none;
    left: 65%;
    top: -30vh;
    animation: rotate 16s linear infinite reverse;
  }
}
@media (min-width: 980px) and (min-width: 0) and (max-width: 979.9px) {
  .game-ranking-area .container:before {
    top: -5vh;
    width: 90vw;
  }
}
@media (min-width: 980px) {
  .game-ranking-area .container {
    padding-left: 100px;
    padding-right: 100px;
  }
}
@media (min-width: 1100px) {
  .game-ranking-area .container {
    padding-left: clamp(130px, 13vw, 300px);
    padding-right: clamp(130px, 13vw, 300px);
  }
}
.game-ranking-area.level-1 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #1f253b,
    #2783b2,
    #1f253b,
    #2783b2,
    #1f253b
  );
}
.game-ranking-area.level-1 .img {
  background-image: url("../images/level/level-1.png");
}
.game-ranking-area.level-2 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #6e2e21,
    #9f1c1c,
    #d95e40,
    #e2643a,
    #e1512f,
    #a87f56,
    #9f3722,
    #7c422b,
    #d04e23,
    #66180c,
    #6e2e21
  );
}
.game-ranking-area.level-2 .img {
  background-image: url("../images/level/level-2.png");
}
.game-ranking-area.level-2 .level-bar i:before {
  border-color: #fff1e3;
}
.game-ranking-area.level-2 .level-bar i span {
  color: #fff1e3;
}
.game-ranking-area.level-2 .your-level {
  border-color: rgba(253, 169, 140, 0.7);
}
.game-ranking-area.level-2 .your-level h1 {
  text-shadow: #ffbca6 0px 0px 5px, #fda98c 0px 0px 10px, #fda98c 0px 0px 15px;
}
.game-ranking-area.level-2 .your-level h1 span {
  color: #fff1e3;
}
.game-ranking-area.level-2 .your-level:before {
  border-color: #fda98c;
  box-shadow: rgba(255, 191, 142, 0.9) 0px 0px 8px,
    rgba(255, 104, 70, 0.5) 0px 0px 20px;
}
.game-ranking-area.level-3 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #020202,
    #3c3b3b,
    #a3835b,
    #5b4b32,
    #a3835b,
    #21201e,
    #a3835b,
    #a3835b,
    #020202
  );
}
.game-ranking-area.level-3 .img {
  background-image: url("../images/level/level-3.png");
}
.game-ranking-area.level-3 .your-level {
  border-color: rgba(223, 184, 135, 0.7);
}
.game-ranking-area.level-3 .your-level h1 {
  text-shadow: #f5d2a8 0px 0px 5px, #dfb887 0px 0px 10px, #dfb887 0px 0px 15px;
}
.game-ranking-area.level-3 .your-level h1 span {
  color: #ffeed8;
}
.game-ranking-area.level-3 .your-level:before {
  border-color: #f9d2a2;
  box-shadow: rgba(223, 184, 135, 0.9) 0px 0px 8px,
    rgba(207, 168, 120, 0.6) 0px 0px 20px;
}
.game-ranking-area.level-3 .level-bar i:before {
  border-color: #ffe4c3;
}
.game-ranking-area.level-3 .level-bar i span {
  color: #ffe4c3;
}
.game-ranking-area.level-4 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #272e35,
    #496192,
    #1d243a,
    #a0a09e,
    #121e41,
    #35446e,
    #6c6f7c,
    #5b5c63,
    #262f37
  );
}
.game-ranking-area.level-4 .img {
  background-image: url("../images/level/level-4.png");
}
.game-ranking-area.level-4 .level-bar i:before {
  border-color: #b3d4ff;
}
.game-ranking-area.level-4 .level-bar i span {
  color: #b3d4ff;
}
.game-ranking-area.level-4 .your-level {
  border-color: rgba(191, 220, 255, 0.7);
}
.game-ranking-area.level-4 .your-level h1 span {
  color: #cde3ff;
}
.game-ranking-area.level-4 .your-level:before {
  border-color: #bfdcff;
  box-shadow: rgba(191, 220, 255, 0.7) 0px 0px 8px,
    rgba(69, 105, 203, 0.4) 0px 0px 20px;
}
.game-ranking-area.level-5 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #324b57,
    #202f37,
    #5a7a8a,
    #745e4a,
    #8f715c,
    #6b7b83,
    #997861,
    #8c7e6c,
    #324b57
  );
}
.game-ranking-area.level-5 .img {
  background-image: url("../images/level/level-5.png");
}
.game-ranking-area.level-5 .level-bar i:before {
  border-color: #ffe4c3;
}
.game-ranking-area.level-5 .level-bar i span {
  color: #ffe4c3;
}
.game-ranking-area.level-5 .your-level {
  border-color: rgba(212, 183, 150, 0.7);
}
.game-ranking-area.level-5 .your-level h1 {
  text-shadow: #d4b796 0px 0px 5px, #d4b796 0px 0px 10px, #d4b796 0px 0px 15px;
}
.game-ranking-area.level-5 .your-level h1 span {
  color: #ffe4c3;
}
.game-ranking-area.level-5 .your-level:before {
  border-color: #d4b796;
  box-shadow: rgba(212, 183, 150, 0.7) 0px 0px 8px,
    rgba(212, 183, 150, 0.6) 0px 0px 20px;
}
.game-ranking-area.level-6 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #499ad7,
    #356a92,
    #4a5057,
    #596875,
    #423427,
    #726b6f,
    #374148,
    #499ad7
  );
}
.game-ranking-area.level-6 .img {
  background-image: url("../images/level/level-6.png");
}
.game-ranking-area.level-6 .your-level {
  border-color: rgba(112, 241, 255, 0.4);
}
.game-ranking-area.level-6 .your-level h1 span {
  color: #a3f6ff;
}
.game-ranking-area.level-6 .your-level:before {
  border-color: #70f1ff;
  box-shadow: rgba(112, 241, 255, 0.9) 0px 0px 8px,
    rgba(112, 241, 255, 0.6) 0px 0px 20px;
}
.game-ranking-area.level-7 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #212f3f,
    #3b4a59,
    #9fa1a4,
    #536476,
    #7b8a99,
    #8f9daf,
    #56687f,
    #212f3f
  );
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #212f3f,
    #43505c,
    #b09c83,
    #758399,
    #536476,
    #7b8a99,
    #43505c,
    #8f9daf,
    #beae9a,
    #56687f,
    #212f3f
  );
}
.game-ranking-area.level-7 .img {
  background-image: url("../images/level/level-7.png");
}
.game-ranking-area.level-7 .level-bar i:before {
  border-color: #ddf1ff;
}
.game-ranking-area.level-7 .level-bar i span {
  color: #ddf1ff;
}
.game-ranking-area.level-7 .your-level {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 10%,
    rgba(17, 25, 34, 0.5) 55%,
    rgba(33, 47, 63, 0.3) 100%
  );
  border-color: rgba(212, 192, 169, 0.7);
}
.game-ranking-area.level-7 .your-level h1 {
  text-shadow: #d4c0a9 0px 0px 5px, #d4c0a9 0px 0px 10px, #d4c0a9 0px 0px 15px;
}
.game-ranking-area.level-7 .your-level h1 span {
  color: #ffeeda;
}
.game-ranking-area.level-7 .your-level:before {
  border-color: #fdead4;
  box-shadow: rgba(253, 234, 212, 0.7) 0px 0px 8px,
    rgba(212, 183, 150, 0.6) 0px 0px 20px;
}
.game-ranking-area.level-8 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #273442,
    #5a4828,
    #b79966,
    #745837,
    #4a5667,
    #121e2a,
    #745837,
    #273442
  );
}
.game-ranking-area.level-8 .img {
  background-image: url("../images/level/level-8.png");
}
.game-ranking-area.level-8 .level-bar i:before {
  border-color: #ffe1ae;
}
.game-ranking-area.level-8 .level-bar i span {
  color: #ffe1ae;
}
.game-ranking-area.level-8 .your-level {
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0) 10%,
    rgba(220, 182, 117, 0.5) 25%,
    rgba(18, 30, 42, 0.4) 55%,
    rgba(18, 30, 42, 0.2) 100%
  );
  border-color: rgba(220, 182, 117, 0.5);
}
.game-ranking-area.level-8 .your-level h1 {
  text-shadow: #dcb675 0px 0px 5px, #dcb675 0px 0px 10px, #dcb675 0px 0px 15px;
}
.game-ranking-area.level-8 .your-level h1 span {
  color: #fde8c4;
}
.game-ranking-area.level-8 .your-level:before {
  border-color: #ffdb9d;
  box-shadow: rgba(220, 182, 117, 0.7) 0px 0px 8px,
    rgba(220, 182, 117, 0.6) 0px 0px 20px;
}
.game-ranking-area.level-9 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    #145374,
    #1d76a6,
    #88b0a3,
    #61c0bf,
    #2a6781,
    #1d8796,
    #f1e7b6,
    #86827e,
    #145374
  );
}
.game-ranking-area.level-9 .img {
  background-image: url("../images/level/level-9.png");
}
.game-ranking-area.level-9 .level-bar i:before {
  border-color: #ddfffa;
}
.game-ranking-area.level-9 .level-bar i span {
  color: #e5ffff;
}
.game-ranking-area.level-9 .your-level {
  border-color: rgba(97, 192, 191, 0.7);
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0) 10%,
    rgba(29, 135, 150, 0.5) 25%,
    rgba(241, 231, 182, 0.5) 50%,
    rgba(20, 83, 116, 0.4) 70%,
    rgba(20, 83, 116, 0.2) 100%
  );
}
.game-ranking-area.level-9 .your-level h1 {
  text-shadow: #61c0bf 0px 0px 5px, #61c0bf 0px 0px 10px, #61c0bf 0px 0px 15px;
}
.game-ranking-area.level-9 .your-level h1 span {
  color: #b3fffe;
}
.game-ranking-area.level-9 .your-level:before {
  border-color: #98f1ef;
  box-shadow: rgba(152, 241, 239, 0.8) 0px 0px 8px,
    rgba(59, 221, 242, 0.7) 0px 0px 20px;
}
.game-ranking-area.level-10 {
  background: repeating-conic-gradient(
    from var(--a) at 23.5% 25%,
    rgba(1, 11, 20, 0.8),
    rgba(15, 36, 71, 0.7),
    rgba(26, 58, 108, 0.6),
    rgba(44, 13, 79, 0.5),
    rgba(74, 28, 110, 0.5),
    rgba(123, 107, 143, 0.7),
    rgba(192, 171, 142, 0.8),
    rgba(70, 60, 41, 0.5),
    rgba(29, 91, 138, 0.6),
    rgba(10, 45, 82, 0.7),
    rgba(91, 136, 165, 0.6),
    rgba(146, 127, 90, 0.5),
    rgba(212, 196, 168, 0.7),
    rgba(46, 26, 71, 0.7),
    rgba(1, 11, 20, 0.8)
  );
}
.game-ranking-area.level-10 .level-bar i:before {
  border-color: #fff4dc;
}
.game-ranking-area.level-10 .level-bar i span {
  color: #fff3d7;
}
.game-ranking-area.level-10 .img {
  background-image: url("../images/level/level-10.png");
}
.game-ranking-area.level-10 .your-level {
  border-color: rgba(220, 182, 117, 0.5);
  background: linear-gradient(
    160deg,
    rgba(10, 45, 82, 0.2) 10%,
    rgba(46, 26, 71, 0.5) 25%,
    rgba(192, 171, 142, 0.5) 40%,
    rgba(11, 43, 168, 0.3) 50%,
    rgba(74, 28, 110, 0.3) 60%,
    rgba(0, 12, 117, 0.5) 75%,
    rgba(237, 186, 57, 0.4) 100%
  );
}
.game-ranking-area.level-10 .your-level h1 {
  text-shadow: #dfc1ff 0px 0px 5px, #9859db 0px 0px 10px, #7d42bb 0px 0px 15px;
}
.game-ranking-area.level-10 .your-level h1 span {
  color: #fff8ec;
  text-shadow: #dcb675 0px 0px 5px, #dcb675 0px 0px 10px, #dcb675 0px 0px 15px;
}
.game-ranking-area.level-10 .your-level:before {
  border-color: #fff0af;
  box-shadow: rgba(255, 218, 154, 0.7) 0px 0px 8px,
    rgba(248, 211, 147, 0.6) 0px 0px 20px;
}
.level-container {
  color: #b0f7ff;
}
.level-container .your-level {
  width: clamp(280px, 20vw, 480px);
  margin: 0 auto;
  font-family: "Quantico", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.1) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px 30px 50px;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 0 0 50vw 50vw;
  overflow: hidden;
  position: relative;
}
.level-container .your-level:before {
  content: "";
  display: block;
  width: calc(100% - 12px);
  height: calc(100% - 5px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  left: 6px;
  top: -1px;
  box-sizing: border-box;
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  position: absolute;
  border-radius: 3px 3px 50vw 50vw;
  animation: fadelight 5s linear infinite;
}
@media (min-width: 740px) {
  .level-container .your-level:before {
    width: calc(100% - 18px);
    height: calc(100% - 5px);
    left: 9px;
    top: -4px;
  }
}
@media (min-width: 1700px) {
  .level-container .your-level:before {
    width: calc(100% - 28px);
    height: calc(100% - 7px);
    left: 14px;
    top: -7px;
  }
}
@media (min-width: 980px) {
  .level-container .your-level {
    padding: 4vh 30px 8vh;
  }
}
.level-container .img.square {
  background-size: contain;
  background-position: center;
}
.level-container .badge {
  width: 80%;
  animation: badgemove 5s linear forwards infinite;
  margin-bottom: 3vh;
}
@media (min-width: 980px) and (max-height: 560px) and (orientation: landscape) {
  .level-container .badge {
    width: 70%;
  }
}
.level-container h1 {
  font-size: clamp(20px, 2vw, 48px);
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  text-align: center;
  line-height: 1;
  display: flex;
  flex-direction: column;
}
.level-container h1 strong {
  color: #fff;
  line-height: 1;
}
.level-container h1 .club-tw {
  font-size: 0.9375rem;
  line-height: 1.25;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
  display: block;
  padding-top: 3px;
  letter-spacing: 2px;
  font-weight: lighter;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .level-container h1 .club-tw {
    padding-top: 5px;
  }
}
.level-container .level-bar {
  width: 100%;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto 20px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .level-container .level-bar {
    flex-direction: row-reverse;
  }
}
@media (min-width: 980px) {
  .level-container .level-bar {
    flex-direction: column;
    align-items: flex-start;
    margin: 5vh 0 0;
  }
}
.level-container .level-bar i {
  position: relative;
  margin: 0 10px;
  box-sizing: border-box;
  z-index: 3;
  box-sizing: border-box;
  font-size: 0.875rem;
  font-family: "Quantico", sans-serif;
  font-weight: normal;
  letter-spacing: 0.5px;
}
@media (min-width: 980px) {
  .level-container .level-bar i {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
  .level-container .level-bar i {
    margin-bottom: 2.7vh;
  }
}
@media (min-width: 980px) and (max-height: 560px) and (orientation: landscape) {
  .level-container .level-bar i {
    font-size: 0.75rem;
    margin-bottom: 10px;
  }
}
.level-container .level-bar i span {
  margin: -0.7em 0 0 10px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .level-container .level-bar i span {
    display: none;
  }
}
.level-container .level-bar i:before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid #b0f7ff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (min-width: 740px) {
  .level-container .level-bar i:before {
    width: 8px;
    height: 8px;
  }
}
@media (min-width: 980px) and (max-height: 560px) and (orientation: landscape) {
  .level-container .level-bar i:before {
    width: 6px;
    height: 6px;
  }
}
.level-container .level-bar i.--active {
  color: #fff;
  font-size: 1rem;
}
.level-container .level-bar i.--active:before {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  animation: missionlight 5s linear infinite;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px, #9cdbf6 0px 0px 30px, #6aa4bc 0px 0px 40px,
    #4085a2 0px 0px 50px, #52879d 0px 0px 75px;
  background-color: transparent;
  margin-top: 2px;
}
.level-container .level-bar:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  background: linear-gradient(
    to right,
    rgba(210, 234, 245, 0) 0%,
    #d2eaf5 50%,
    rgba(210, 234, 245, 0) 100%
  );
  left: 0;
  top: 25%;
  border-radius: 3px 0 0 3px;
  overflow: hidden;
  z-index: 1;
}
@media (min-width: 740px) {
  .level-container .level-bar:after {
    top: calc(25% - 1px);
  }
}
@media (min-width: 980px) {
  .level-container .level-bar:after {
    top: 0;
    left: 10px;
    width: 1px;
    height: 60vh;
    background: linear-gradient(
      to bottom,
      rgba(210, 234, 245, 0) 0%,
      rgba(210, 234, 245, 0.5) 50%,
      rgba(210, 234, 245, 0) 100%
    );
  }
}
@keyframes badgemove {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadelight {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.skill {
  width: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  display: inline-block;
  image-rendering: crisp-edges;
}
.skill:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 138%;
}
.skill.--skill-1 {
  background-image: url("../images/skill/skill-1.png");
}
.skill.--skill-2 {
  background-image: url("../images/skill/skill-2.png");
}
.skill.--skill-3 {
  background-image: url("../images/skill/skill-3.png");
}
.skill.--skill-4 {
  background-image: url("../images/skill/skill-4.png");
}
.skill.--skill-5 {
  background-image: url("../images/skill/skill-5.png");
}
.skill.--skill-6 {
  background-image: url("../images/skill/skill-6.png");
}
.skill.--skill-7 {
  background-image: url("../images/skill/skill-7.png");
}
.skill.--skill-8 {
  background-image: url("../images/skill/skill-8.png");
}
.skill.--skill-9 {
  background-image: url("../images/skill/skill-9.png");
}
.skill.--skill-10 {
  background-image: url("../images/skill/skill-10.png");
}
.mail-card {
  width: clamp(320px, 60vw, 720px);
  margin: 0 auto;
  position: relative;
}
.mail-card .content {
  position: relative;
  z-index: 3;
  isolation: isolate;
  height: clamp(400px, 76vh, 900px);
  overflow-y: auto;
}
.mail-card .content:before {
  content: "";
  display: block;
  width: calc(100% - 4px);
  background: url("../images/deco/bg-quest-2.png") no-repeat center top;
  background-size: cover;
  padding-bottom: 36.25%;
  z-index: -1;
  position: absolute;
  left: 2px;
  top: 0;
  opacity: 1;
}
.mail-card .title {
  color: #fff;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  font-size: clamp(20px, 2vw, 32px);
  padding-bottom: 15px;
  text-align: center;
}
.mail-card .date {
  font-family: "Quantico", sans-serif;
  letter-spacing: 5px;
  font-size: 0.875em;
}
.mail-card .small {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 5px;
  display: block;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
  font-family: "Quantico", sans-serif;
  padding-bottom: 3px;
  color: #dde7eb;
}
.mail-card .reward {
  display: inline-flex;
  align-items: center;
  padding: 4px 20px;
  border-radius: 40px;
  border: 1px solid #9b6dff;
  background: linear-gradient(
    to bottom,
    rgba(155, 109, 255, 0.72549) 0%,
    #6a39b8 50%,
    #3a1470 50.1%,
    #6a39b8 100%
  );
  color: #f3eeff;
  box-shadow: 0 0 10px 5px rgba(155, 109, 255, 0.3);
  text-shadow: 0 0 5px rgba(219, 196, 255, 0.7);
  transition: all 0.3s ease;
  letter-spacing: 2px;
  font-family: "Quantico", sans-serif;
}
.mail-card .reward strong {
  font-size: 1.125em;
  text-shadow: 0 0 10px 0 rgba(58, 20, 112, 0.5);
  letter-spacing: 1px;
}
.mail-card .reward .icon {
  margin-right: 10px;
}
.mail-card .reward .icon:before {
  background-color: #e9d9ff;
  width: 20px;
  height: 20px;
}
.mail-card .mail-header {
  padding: 90px 25px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mail-card .mail-body {
  padding: 25px;
  font-size: 1em;
  color: #d2d8dc;
  line-height: 1.5em;
  text-align: center;
}
.mail-card .mail-body a {
  color: #b0f7ff;
  text-decoration: underline;
}
.mail-card .mail-body h1,
.mail-card .mail-body h2,
.mail-card .mail-body h3,
.mail-card .mail-body h4,
.mail-card .mail-body h5,
.mail-card .mail-body h6 {
  width: clamp(200px, 80%, 360px);
  margin: 40px auto 0;
}
.mail-card .mail-body li,
.mail-card .mail-body p,
.mail-card .mail-body strong {
  font-size: 1em;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .mail-card .mail-body li,
  .mail-card .mail-body p,
  .mail-card .mail-body strong {
    font-size: 0.9375em;
  }
}
.mail-card .sci-frame {
  background-color: #172125;
}
.mail-card .mail-btnarea {
  position: sticky;
  left: 0;
  bottom: 0;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
}
.mail-card .gotogame {
  color: #b0f7ff;
  position: relative;
}
.mail-card .divider-text {
  font-size: 0.8125em;
}
.mail-card .avatar {
  transform: initial;
  opacity: initial;
}
.mail-card hr {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  width: 100%;
  height: 1px;
  border-top: 1px dashed rgba(176, 247, 255, 0.2);
  margin: 30px auto;
}
.mail-card .avatar {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.mail-card .avatar .img {
  width: 64px;
  border: 2px solid #b0f7ff;
  border-radius: 50%;
  margin: 0 auto 8px;
}
.mail-card .avatar .img:before {
  width: 100%;
  padding-bottom: 100%;
}
.mail-card .count-board {
  position: sticky;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 99;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mail-card .count-board {
    height: 50px;
  }
}
.mail-card .count-board .wrapper {
  display: flex;
  flex-direction: column;
}
.mail-card .count-board .count {
  font-size: 20px;
}
.mail-card .count-board span {
  font-size: 12px;
  letter-spacing: 2px;
}
.mail-card.--for-quest .content:before {
  content: "";
  background-image: url("../images/deco/bg-quest.png");
  background-size: cover;
  opacity: 0.8;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .mail-card.--for-quest .content:before {
    padding-bottom: 56%;
  }
}
.participant {
  width: clamp(280px, 80%, 640px);
  margin: 0 auto;
}
.participant .id {
  font-family: "Quantico", sans-serif;
  font-size: 0.875em;
}
.participant li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(230, 230, 230, 0.2);
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 8px;
  padding-left: 10px;
  padding-right: 10px;
  background: linear-gradient(
    to top,
    rgba(8, 56, 96, 0) 70%,
    rgba(8, 56, 96, 0.3) 100%
  );
}
.participant li + li {
  border-top: none;
}
.participant .status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.875em;
  color: #00f7ff;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .participant .status {
    font-size: 0.8125em;
  }
}
.participant .status .icon {
  margin-right: 5px;
}
.participant .status .icon:before {
  width: 16px;
  height: 16px;
  background-color: #00f7ff;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .participant .status .icon:before {
    width: 14px;
    height: 14px;
  }
}
.mail-container {
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 90vh;
  overflow: hidden;
  padding: 20px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mail-container {
    padding: 10px;
  }
}
.mail-fn {
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-bottom: 20px;
  padding: 0;
  width: clamp(320px, 60vw, 720px);
}
.mail-fn:after {
  content: "";
  display: block;
  width: calc(100% + 40px);
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: linear-gradient(
    to left,
    rgba(156, 219, 246, 0),
    #9cdbf6,
    rgba(156, 219, 246, 0)
  );
}
.mail-fn button {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  padding: 0 15px 5px 0;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
  font-size: 1.125em;
  color: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .mail-fn button {
    padding: 10px 15px;
    font-size: 0.9375em;
  }
}
.mail-fn button:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  border-bottom: 2px solid transparent;
  position: absolute;
  left: 0;
  bottom: 0;
}
.mail-fn button:after {
  content: "";
  display: block;
  width: 50%;
  height: 25%;
  border-radius: 50%;
  background-color: #b0f7ff;
  filter: blur(10px);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.mail-fn button + button {
  margin-left: 20px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .mail-fn button + button {
    margin-left: 0;
  }
}
.mail-fn button span {
  opacity: 0.5;
  transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mail-fn button img {
  display: block;
  width: 48px;
  height: auto;
  margin-right: 8px;
  filter: grayscale(1);
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 0) and (max-width: 739.9px) {
  .mail-fn button img {
    display: none;
  }
}
.mail-fn button .icon:before {
  background-color: #fff;
}
@media (hover: hover) {
  .mail-fn button:hover img {
    transform: scale(1.1);
  }
}
.mail-fn button.--active img {
  filter: initial;
}
.mail-fn button.--active span {
  opacity: 1;
  text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px,
    #9cdbf6 0px 0px 20px;
}
.mail-fn button.--active:after {
  opacity: 0.6;
}
.mail-fn button.--active:before {
  border-color: #fff;
}
.mail-pool {
  overflow-y: auto;
  flex: 1;
}
.mail-item {
  width: clamp(320px, 60vw, 720px);
  display: flex;
  background-color: #a5a8ad;
  background: linear-gradient(
    to bottom,
    rgba(76, 97, 105, 0.5),
    rgba(12, 36, 46, 0.2)
  );
  border: 1px solid rgba(137, 154, 161, 0.5);
  color: #ccd4d7;
  padding: 12px 20px 12px 35px;
  margin-bottom: 5px;
  isolation: isolate;
  position: relative;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .mail-item {
    font-size: 0.875em;
    padding: 7px 7px 7px 35px;
    flex-direction: column;
    align-items: flex-start;
  }
}
.mail-item:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(127, 193, 220, 0.5),
    rgba(10, 71, 97, 0.3)
  );
  transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
  left: 0;
  top: 0;
}
.mail-item .label {
  width: 70px;
  border-right: 1px solid #c1c4ca;
  margin-right: 20px;
}
.mail-item .title {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  line-height: 1.5em;
  -webkit-box-orient: vertical;
}
@media (min-width: 740px) {
  .mail-item .title {
    max-width: calc(100% - 150px);
  }
}
.mail-item .status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mail-item .status .icon {
  margin: 0 5px 0 0;
}
.mail-item .status .icon:before {
  width: 20px;
  height: 20px;
  background-color: #fff;
}
.mail-item .date {
  font-family: "Quantico", sans-serif;
  color: #fff;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: 0.875em;
  opacity: 0.6;
  transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mail-item.--unread:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  top: 50%;
  background-color: #083860;
  background: linear-gradient(to bottom, #2fc1fb, #00f7ff);
  left: 12px;
  border-radius: 8px;
  position: absolute;
  z-index: 3;
  transform: translateY(-50%);
  transition: transform 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
  .mail-item:hover {
    color: #fff;
  }
  .mail-item:hover:before {
    opacity: 1;
  }
  .mail-item:hover .date {
    opacity: 1;
  }
  .mail-item:hover.--unread:after {
    transform: translateY(-50%) scale(1.375);
  }
}
.escape-flashing {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 60;
  pointer-events: none;
  overflow: visible;
  transform-origin: bottom center;
}
.escape-flashing::before,
.escape-flashing::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
}
.escape-flashing::before {
  filter: blur(5px);
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(0, 242, 255, 0.5),
    #00f2ff,
    rgba(0, 242, 255, 0.5)
  );
  width: calc(100% - 60px);
  left: 30px;
  height: 10px;
}
@media (min-width: 0) and (max-width: 739.9px) {
  .escape-flashing::before {
    width: calc(100% - 50px);
    left: 25px;
  }
}
.escape-flashing::after {
  left: 30px;
  bottom: 30px;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  background: linear-gradient(
    180deg,
    rgba(0, 242, 255, 0.2),
    rgba(0, 242, 255, 0)
  );
  filter: blur(5px);
}
.escape-game {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3vh;
}
.escape-game .--speedup {
  background: linear-gradient(
    15deg,
    rgba(163, 8, 8, 0.3) 0%,
    rgba(39, 3, 3, 0) 30%,
    rgba(39, 3, 3, 0) 70%,
    rgba(163, 8, 8, 0.4) 100%
  );
  transition: none;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.escape-glow {
  position: relative;
  width: 6px;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  pointer-events: none;
}
.escape-glow:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(230, 249, 255, 0) 20%,
    #fff 50%,
    rgba(230, 249, 255, 0) 80%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(5px);
  bottom: -100px;
}
.escape-door {
  position: relative;
  display: flex;
  perspective: 500px;
  perspective-origin: 50% 50%;
  height: 68vh;
  position: absolute;
  width: 46vh;
  overflow: hidden;
  border-left: 2px solid rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
}
.escape-door .frame {
  --doorWidth: 30px;
  position: absolute;
  z-index: 40;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  transition: opacity 0.25s ease;
  backdrop-filter: blur(12px) saturate(120%);
}
@media (min-width: 0) and (max-width: 739.9px) {
  .escape-door .frame {
    --doorWidth: 25px;
  }
}
.escape-door .frame.left {
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--doorWidth);
  clip-path: polygon(
    0 0,
    100% var(--doorWidth),
    100% calc(100% - var(--doorWidth)),
    0 100%
  );
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.06),
      rgba(0, 0, 0, 0.3)
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
  box-shadow: inset -6px 0 12px rgba(0, 0, 0, 0.28),
    inset 6px 0 10px rgba(255, 255, 255, 0.04), 0 8px 20px rgba(0, 0, 0, 0.12);
}
.escape-door .frame.right {
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--doorWidth);
  clip-path: polygon(
    0 var(--doorWidth),
    100% 0,
    100% 100%,
    0 calc(100% - var(--doorWidth))
  );
  background-image: linear-gradient(
      180deg,
      rgba(200, 230, 255, 0.05),
      rgba(255, 255, 255, 0.01)
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18));
  box-shadow: inset 6px 0 12px rgba(0, 0, 0, 0.22),
    inset -6px 0 10px rgba(255, 255, 255, 0.03), 0 8px 20px rgba(0, 0, 0, 0.12);
}
.escape-door .frame.top {
  left: 0;
  right: 0;
  top: 0;
  height: var(--doorWidth);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--doorWidth)) 100%,
    var(--doorWidth) 100%
  );
  background-image: linear-gradient(
      180deg,
      rgba(171, 171, 171, 0.1),
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.22),
    inset 0 -6px 10px rgba(255, 255, 255, 0.04), 0 8px 20px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8%;
  gap: 10px;
}
@media (min-width: 0) and (max-width: 979.9px) {
  .escape-door .frame.top {
    gap: 6px;
  }
}
.escape-door .frame.bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--doorWidth);
  clip-path: polygon(
    var(--doorWidth) 0,
    calc(100% - var(--doorWidth)) 0,
    100% 100%,
    0 100%
  );
  background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5),
      rgba(255, 255, 255, 0.1)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18));
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.24),
    inset 0 6px 10px rgba(255, 255, 255, 0.03), 0 8px 20px rgba(0, 0, 0, 0.12);
}
.escape-door:before,
.escape-door:after {
  content: "";
  display: block;
  width: 100%;
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(2, 12, 25, 0.35),
    inset 0 3px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  transition: transform 0.9s cubic-bezier(0.2, 0.85, 0.2, 1),
    box-shadow 0.35s ease;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transform: rotateY(0deg);
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1) 0.5px,
      transparent 0.5px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0.5px, transparent 0.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.1));
  background-size: 100% 24px, 24px 100%, cover;
}
.escape-door:before {
  transform-origin: left center;
  border-radius: 6px 0 0 6px;
}
.escape-door:after {
  transform-origin: right center;
  border-radius: 0 6px 6px 0;
}
.escape-door:hover:before {
  transform: translateX(-6px);
}
.escape-door:hover:after {
  transform: translateX(6px);
}
.escape-door.--open {
  animation: var(--zoomandfade);
}
.escape-door.--open:before {
  animation: left-door 2.3s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}
.escape-door.--open:after {
  animation: right-door 2.3s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}
.escape-door.--open .escape-glow:after {
  animation: glow-up 0.8s ease-in-out forwards;
}
.escape-door.--open .indicator-light {
  transform: scale(0);
}
.escape-door.--ok .escape-flashing::before {
  animation: flashing-glow 0.8s cubic-bezier(0.2, 0.2, 0.8, 0.9) forwards;
  animation-delay: 0s;
}
.escape-door.--ok .escape-flashing::after {
  opacity: 1;
  animation: flashing-power 1.3s cubic-bezier(0.2, 0.2, 0.8, 0.9) forwards;
  animation-delay: 0s;
}
.escape-door.--wrong .escape-flashing::before {
  background: linear-gradient(
    180deg,
    rgba(167, 9, 9, 0.5),
    #a70909,
    rgba(167, 9, 9, 0.5)
  );
  animation: flashing-glow 0.8s cubic-bezier(0.2, 0.2, 0.8, 0.9) forwards;
  animation-delay: 0s;
}
.escape-door.--wrong .escape-flashing::after {
  background: linear-gradient(180deg, rgba(167, 9, 9, 0.2), rgba(167, 9, 9, 0));
  opacity: 1;
  animation: flashing-power 1.3s cubic-bezier(0.2, 0.2, 0.8, 0.9) forwards;
  animation-delay: 0s;
}
.indicator-light {
  flex: 1;
  border-radius: 2px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #550000;
  box-shadow: 0 0 2px red, 0 0 8px rgba(255, 0, 0, 0.3),
    inset 0 0 5px rgba(0, 0, 0, 0.5);
  opacity: 0.8;
}
.indicator-light:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 20%;
}
.indicator-light.--active {
  background-color: #00f2ff;
  box-shadow: 0 0 5px #fff, 0 0 10px #00f2ff, 0 0 20px rgba(0, 242, 255, 0.6),
    inset 0 0 8px rgba(255, 255, 255, 0.8);
  animation: blue-pulse 2s infinite ease-in-out;
}
@keyframes blue-pulse {
  0%,
  100% {
    box-shadow: 0 0 10px #00f2ff, 0 0 20px rgba(0, 242, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 15px #00f2ff, 0 0 30px rgba(0, 242, 255, 0.8);
  }
}
@keyframes left-door {
  0% {
    transform: rotateY(0);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  10% {
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  40% {
    transform: rotateY(0);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px) saturate(100%);
    -webkit-backdrop-filter: blur(2px) saturate(100%);
  }
  70% {
    backdrop-filter: blur(2px) saturate(100%);
    -webkit-backdrop-filter: blur(2px) saturate(100%);
  }
  100% {
    transform: rotateY(87deg);
    box-shadow: 0 18px 48px rgba(0, 150, 255, 0.12),
      inset 0 2px 12px rgba(255, 255, 255, 0.04);
  }
}
@keyframes right-door {
  0% {
    transform-origin: right center;
    transform: rotateY(0);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  10% {
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  40% {
    transform-origin: right center;
    transform: rotateY(0);
    border: 1px solid rgba(255, 255, 255, 0.6);
  }
  70% {
    backdrop-filter: blur(2px) saturate(100%);
    -webkit-backdrop-filter: blur(2px) saturate(100%);
  }
  100% {
    transform-origin: right center;
    transform: rotateY(-87deg);
    box-shadow: 0 18px 48px rgba(0, 150, 255, 0.12),
      inset 0 2px 12px rgba(255, 255, 255, 0.04);
  }
}
@keyframes flashing-glow {
  0% {
    bottom: 30px;
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
  }
  100% {
    bottom: calc(100% - 30px);
    transform: scale(0.3);
    opacity: 1;
    opacity: 0;
  }
}
@keyframes flashing-power {
  0% {
    bottom: 0%;
    clip-path: inset(100% 0 0 0);
  }
  60% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}
.--speedup .--speedup {
  animation: glow 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  opacity: 1;
}
@keyframes glow-up {
  0% {
    transform: translateY(0);
    bottom: -100px;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-450px);
    opacity: 0;
    bottom: 100%;
  }
}