@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box; /* Set the sizing of an element to include it's border */
}

* {
  margin: 0; /* Set the default margin to 0 */
  padding: 0; /* Set the default padding to 0 */
}

ul[role=list],
ol[role=list] {
  list-style: none; /* Turn off numbered and unordered list decoration */
}

a:not([class]) {
  text-decoration-skip-ink: auto; /* Makes link undelines look better */
}

img,
picture,
svg,
video,
canvas {
  width: 100%; /* Makes it responsive */
  height: auto; /* Makes it responsive */
  vertical-align: middle; /* Makes text next to inline images look better */
  font-style: italic; /* If the images don't load it makes the alt decription look better */
  background-repeat: no-repeat;
  /* The background repeat and size are there if you want to load a picture first like a backroung image that is worse quality while the better quality image loads */
  background-size: cover;
}

input,
button,
textarea,
select {
  font: inherit; /* Makes these elements inherit fonts */
  border: 0;
}

/* Turns off animation for people who don't want to see them */
body,
html {
  height: 100%; /* Makes the body element full screen */
}

:root {
  --ds: 480;
  --vw: 100vw;
}

@media (min-width: 768px) {
  :root {
    --ds: 992;
  }
}
@media (min-width: 1280px) {
  :root {
    --ds: 1582;
  }
}
html {
  font-size: 10px;
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-optical-sizing: auto;
}
html.hidden {
  pointer-events: none;
}

body {
  background-color: #000;
  position: relative;
  height: 100%;
}
body.hidden {
  pointer-events: none;
}

.wrap {
  position: relative;
  overflow-x: hidden;
}

.site-main {
  position: relative;
  z-index: 10;
}

.btn-gotop {
  font-size: 0;
  background-color: transparent;
  cursor: pointer;
  width: calc(120 / var(--ds) * var(--vw));
  aspect-ratio: 428/462;
  background: transparent url("../images/btn-gotop@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: fixed;
  bottom: 0;
  right: 0;
  transform: translate3d(0, 100%, 0);
  z-index: 120;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
@media (hover: hover) {
  .btn-gotop:hover {
    background-position: 0 100%;
  }
}
.btn-gotop.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, -70%, 0);
}
@media (min-width: 768px) {
  .btn-gotop {
    right: 0;
    width: calc(100 / var(--ds) * var(--vw));
    transform: translate3d(0, 100%, 0);
  }
  .btn-gotop.active {
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 1024px) {
  .btn-gotop {
    right: 0;
    width: calc(120 / var(--ds) * var(--vw));
    transform: translate3d(0, 100%, 0);
  }
  .btn-gotop.active {
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 1280px) {
  .btn-gotop {
    right: 50%;
    transform: translate3d(550%, 100%, 0);
  }
  .btn-gotop.active {
    transform: translate3d(550%, -55%, 0);
  }
}

.site-main {
  padding-bottom: 84px;
}
@media (min-width: 1280px) {
  .site-main {
    padding-bottom: 92px;
  }
}

.UNI-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 0;
}

.UNI-footer .gradeArea .gradeArea__img img {
  width: auto !important;
}

.section-footer {
  aspect-ratio: 768/192;
  background: #000 url("../images/section-footer-m.jpg") no-repeat center top;
  background-size: cover;
}
@media (min-width: 768px) {
  .section-footer {
    background-image: url("../images/section-footer-d.jpg");
    background-size: auto 100%;
    aspect-ratio: 1200/190;
  }
}
@media (min-width: 1280px) {
  .section-footer {
    aspect-ratio: 1920/190;
  }
}

.device-size {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 1.2rem;
  color: #fff;
  z-index: 2000;
  padding: 8px;
  background-color: #000;
}

.site-header {
  background-color: rgba(8, 9, 74, 0.8);
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  padding-top: calc(12 / var(--ds) * var(--vw));
  padding-bottom: calc(12 / var(--ds) * var(--vw));
  padding-left: calc(20 / var(--ds) * var(--vw));
  padding-right: calc(20 / var(--ds) * var(--vw));
  z-index: 120;
}
.site-header__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header__logo {
  display: block;
  width: calc(90 / var(--ds) * var(--vw));
}
.site-header__nav {
  display: flex;
  gap: calc(10 / var(--ds) * var(--vw));
}
.site-header__btn {
  width: calc(35 / var(--ds) * var(--vw));
  aspect-ratio: 1/1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  background: transparent url("../images/header-icons@2x.png") no-repeat 0 0;
  background-size: 400% auto;
  filter: drop-shadow(0 0 0.6rem rgba(255, 255, 255, 0));
}
.site-header__btn.fb {
  background-position: 0 0;
}
.site-header__btn.ig {
  background-position: 33.33% 0;
}
.site-header__btn.yt {
  background-position: 66.66% 0;
}
.site-header__btn.sfx {
  background-position: 100% 0;
  cursor: pointer;
}
.site-header__btn.sfx.playing {
  background-position: 100% 100%;
}
@media (hover: hover) {
  .site-header__btn:hover.fb {
    background-position: 0 100%;
  }
  .site-header__btn:hover.ig {
    background-position: 33.33% 100%;
  }
  .site-header__btn:hover.yt {
    background-position: 66.66% 100%;
  }
}

.fixed-nav {
  position: fixed;
  width: calc(230 / var(--ds) * var(--vw));
  right: 0;
  top: 0;
  transform: translate3d(85%, 18%, 0);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(4 / var(--ds) * var(--vw));
  transition: transform 300ms ease;
}
.fixed-nav.active {
  transform: translate3d(0, 18%, 0);
}
.fixed-nav__btn-toggle {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(60 / var(--ds) * var(--vw));
  aspect-ratio: 1/1;
  background: transparent url("../images/fixed-nav-toggle@2x.png") no-repeat 0 0;
  background-size: cover;
  font-size: 0;
  transform: translate3d(-60%, 33%, 0);
  border: solid calc(5 / var(--ds) * var(--vw)) #fff;
  border-radius: 50%;
  box-shadow: 0 0 calc(20 / var(--ds) * var(--vw)) #13fffc;
  z-index: 120;
  cursor: pointer;
  transition: transform 300ms ease;
}
@media (min-width: 768px) {
  .fixed-nav__btn-toggle {
    background-position: 0 0;
    box-shadow: 0 0 calc(20 / var(--ds) * var(--vw)) #13fffc;
  }
}
.fixed-nav__btn-toggle::after {
  content: "";
  position: absolute;
  background: transparent url("../images/fixed-nav-arrow@2x.png") no-repeat 0 0;
  background-size: cover;
  aspect-ratio: 90/120;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  transform: translate3d(-58%, -50%, 0) rotate(0);
  width: calc(24 / var(--ds) * var(--vw));
  transition: transform 300ms ease;
}
.fixed-nav__btn-toggle.active::after {
  transform: translate3d(-42%, -50%, 0) rotate(180deg);
}
@media (hover: hover) {
  .fixed-nav__btn-toggle:hover {
    transform: translate3d(-60%, 33%, 0) scale(1.1);
    background-position: 0 100%;
    box-shadow: 0 0 calc(20 / var(--ds) * var(--vw)) #cc36ca;
  }
}
.fixed-nav__btn-home {
  background: transparent url("../images/fixed-nav-btn-home@2x.png") no-repeat 0 0;
  background-size: cover;
  aspect-ratio: 725/363;
  width: calc(180 / var(--ds) * var(--vw));
  display: block;
  font-size: 0;
  transition: transform 300ms ease;
  display: block;
}
@media (hover: hover) {
  .fixed-nav__btn-home:hover {
    transform: translate3d(0, -5%, 0);
  }
}
@media (min-width: 768px) {
  .fixed-nav__btn-home {
    display: none;
  }
}
.fixed-nav__btn-download {
  background: transparent url("../images/fixed-nav-btn-download@2x.png") no-repeat 0 0;
  background-size: cover;
  aspect-ratio: 725/363;
  width: calc(200 / var(--ds) * var(--vw));
  display: block;
  font-size: 0;
  transition: transform 300ms ease;
  display: none;
}
@media (hover: hover) {
  .fixed-nav__btn-download:hover {
    transform: translate3d(0, -5%, 0);
    background-position: 0 100%;
  }
}
@media (min-width: 768px) {
  .fixed-nav__btn-download {
    display: block;
  }
}
.fixed-nav__nav {
  width: calc(184 / var(--ds) * var(--vw));
  aspect-ratio: 664/1209;
  background: transparent url("../images/fixed-nav-bg@2x.png") no-repeat 0 0;
  background-size: cover;
  display: flex;
  flex-direction: column;
  gap: calc(29 / var(--ds) * var(--vw));
  justify-content: flex-start;
  padding-top: calc(48 / var(--ds) * var(--vw));
  padding-left: calc(58 / var(--ds) * var(--vw));
}
.fixed-nav__btn {
  aspect-ratio: 402/104;
  width: calc(98 / var(--ds) * var(--vw));
  font-size: 0;
  display: block;
  position: relative;
  transition: transform 300ms ease;
}
.fixed-nav__btn::before {
  content: "";
  background-color: rgba(77, 145, 191, 0.8);
  filter: blur(0.4rem);
  width: 100%;
  height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -58%, 0);
  z-index: 1;
  opacity: 0;
  transition: opacity 300ms ease;
}
.fixed-nav__btn::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 2;
}
@media (hover: hover) {
  .fixed-nav__btn:hover {
    transform: translate3d(0, -5%, 0);
  }
}
.fixed-nav__btn.active::before {
  opacity: 1;
}
.fixed-nav__btn.fixed-version::after {
  background: transparent url("../images/fixed-nav-btn-version@2x.png") no-repeat 0 0;
  background-size: cover;
}
@media (hover: hover) {
  .fixed-nav__btn.fixed-version:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn.fixed-live::after {
  background: transparent url("../images/fixed-nav-btn-live@2x.png") no-repeat 0 0;
  background-size: cover;
}
@media (hover: hover) {
  .fixed-nav__btn.fixed-live:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn.fixed-event::after {
  background: transparent url("../images/fixed-nav-btn-event@2x.png") no-repeat 0 0;
  background-size: cover;
}
@media (hover: hover) {
  .fixed-nav__btn.fixed-event:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn.fixed-discount::after {
  background: transparent url("../images/fixed-nav-btn-discount@2x.png") no-repeat 0 0;
  background-size: cover;
}
@media (hover: hover) {
  .fixed-nav__btn.fixed-discount:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn.fixed-extra::after {
  background: transparent url("../images/fixed-nav-btn-extra@2x.png") no-repeat 0 0;
  background-size: cover;
}
@media (hover: hover) {
  .fixed-nav__btn.fixed-extra:hover::before {
    opacity: 1;
  }
}

.index {
  background: #000 url("../images/index-sky-m.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/2381;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .index {
    background-image: url("../images/index-sky-d.jpg");
    background-size: auto 100%;
    aspect-ratio: 1200/2041;
  }
}
@media (min-width: 1280px) {
  .index {
    aspect-ratio: 1920/2041;
  }
}
.index__build {
  width: calc(482 / var(--ds) * var(--vw));
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, 0, 0);
}
@media (min-width: 768px) {
  .index__build {
    width: calc(1562 / var(--ds) * var(--vw));
  }
}
.index__main-title {
  width: calc(794 / var(--ds) * var(--vw));
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -117%, 0);
  z-index: 40;
  position: absolute;
  will-change: transform, opacity;
}
@media (min-width: 768px) {
  .index__main-title {
    width: calc(882 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -136%, 0);
  }
}
.index__btn-join-outer {
  width: calc(476 / var(--ds) * var(--vw));
  aspect-ratio: 476/189;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -144%, 0);
  position: absolute;
  z-index: 70;
  will-change: transform, opacity;
}
@media (min-width: 768px) {
  .index__btn-join-outer {
    width: calc(626 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -164%, 0);
  }
}
.index__btn-join {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: transparent url("../images/index-btn-join@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  font-size: 0;
  position: relative;
  animation: bounceAnimation 800ms infinite;
}
.index__btn-join::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent url("../images/index-btn-join-glow@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  left: 0;
  top: 0;
  animation: pulseAnimation 800ms infinite;
  mix-blend-mode: lighten;
}
.index__btn-join.clickable {
  pointer-events: auto;
}
@media (min-width: 768px) {
  .index__btn-join {
    transition: margin 300ms ease;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .index__btn-join:hover {
    margin-top: -30px;
    background-position: 0 100%;
  }
  .index__btn-join:hover::before {
    background-position: 0 100%;
  }
}
.index__glow {
  position: absolute;
  width: calc(1060 / var(--ds) * var(--vw));
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -30%, 0);
  z-index: 10;
}
@media (min-width: 768px) {
  .index__glow {
    width: calc(1360 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -50%, 0);
  }
}
.index__glow img {
  animation: glowAnimation 3000ms infinite alternate paused;
}
.index__glow img.play {
  animation-play-state: running;
}
.index__ufo {
  position: absolute;
  width: calc(1720 / var(--ds) * var(--vw));
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -33%, 0);
  z-index: 5;
}
@media (min-width: 768px) {
  .index__ufo {
    width: calc(1920 / var(--ds) * var(--vw));
  }
}
.index__ufo img {
  will-change: opacity;
  animation: ufoAnimation 3000ms infinite alternate paused ease-in-out;
}
.index__ufo img.play {
  animation-play-state: running;
}
.index__btn-version {
  width: calc(190 / var(--ds) * var(--vw));
  aspect-ratio: 604/513;
  background: transparent url("../images/index-btn-version@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -115% -87%;
  z-index: 75;
  font-size: 0;
  display: block;
  transform-origin: center bottom;
  animation: buttonAnimation 800ms ease alternate infinite;
}
@media (min-width: 768px) {
  .index__btn-version {
    width: calc(244 / var(--ds) * var(--vw));
    translate: -201% -72%;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .index__btn-version:hover {
    background-position: 0 100%;
  }
}
.index__btn-live {
  width: calc(190 / var(--ds) * var(--vw));
  aspect-ratio: 604/541;
  background: transparent url("../images/index-btn-live@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -115% -183%;
  z-index: 70;
  font-size: 0;
  display: block;
  transform-origin: center bottom;
  animation: buttonAnimation 800ms ease alternate-reverse infinite;
}
@media (min-width: 768px) {
  .index__btn-live {
    width: calc(244 / var(--ds) * var(--vw));
    translate: -136% -109%;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .index__btn-live:hover {
    background-position: 0 100%;
  }
}
.index__btn-event {
  width: calc(190 / var(--ds) * var(--vw));
  aspect-ratio: 604/539;
  background: transparent url("../images/index-btn-event@2x.png") no-repeat 0 100%;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -52% -137%;
  z-index: 70;
  font-size: 0;
  display: block;
  transform-origin: center bottom;
  animation: buttonAnimation 800ms ease alternate infinite;
}
@media (min-width: 768px) {
  .index__btn-event {
    width: calc(244 / var(--ds) * var(--vw));
    background-position: 0 0;
    translate: -63% -152%;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .index__btn-event:hover {
    background-position: 0 50%;
  }
}
.index__btn-discount {
  width: calc(190 / var(--ds) * var(--vw));
  aspect-ratio: 604/545;
  background: transparent url("../images/index-btn-discount@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: 19% -182%;
  z-index: 70;
  font-size: 0;
  display: block;
  transform-origin: center bottom;
  animation: buttonAnimation 800ms ease alternate-reverse infinite;
}
@media (min-width: 768px) {
  .index__btn-discount {
    width: calc(244 / var(--ds) * var(--vw));
    translate: 32% -149%;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .index__btn-discount:hover {
    background-position: 0 100%;
  }
}
.index__btn-extra {
  width: calc(190 / var(--ds) * var(--vw));
  aspect-ratio: 604/545;
  background: transparent url("../images/index-btn-extra@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: 19% -82%;
  z-index: 70;
  font-size: 0;
  display: block;
  transform-origin: center bottom;
  animation: buttonAnimation 800ms ease alternate infinite;
}
@media (min-width: 768px) {
  .index__btn-extra {
    width: calc(244 / var(--ds) * var(--vw));
    translate: 103% -106%;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .index__btn-extra:hover {
    background-position: 0 100%;
  }
}
.index__firework-1 {
  position: absolute;
  width: calc(740 / var(--ds) * var(--vw));
  left: 50%;
  top: 0;
  transform: translate3d(-130%, -30%, 0);
  z-index: 10;
  mix-blend-mode: color-dodge;
  display: none;
}
@media (min-width: 768px) {
  .index__firework-1 {
    display: block;
  }
}
.index__firework-1 img {
  animation: fireworkAnimation 3000ms infinite ease;
}
.index__firework-2 {
  position: absolute;
  width: calc(740 / var(--ds) * var(--vw));
  left: 50%;
  top: 0;
  transform: translate3d(30%, -30%, 0);
  z-index: 10;
  mix-blend-mode: color-dodge;
  display: none;
}
@media (min-width: 768px) {
  .index__firework-2 {
    display: block;
  }
}
.index__firework-2 img {
  animation: fireworkAnimation 3000ms infinite ease 500ms;
}
.index__maplestory {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(200 / var(--ds) * var(--vw));
  transform: translate3d(22%, -505%, 0);
  z-index: 50;
}
@media (min-width: 768px) {
  .index__maplestory {
    width: calc(326 / var(--ds) * var(--vw));
    transform: translate3d(37%, -398%, 0);
  }
}

@keyframes fireworkAnimation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  30% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes ufoAnimation {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 2%, 0);
  }
}
@keyframes glowAnimation {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 3%, 0);
  }
}
@keyframes buttonAnimation {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.01;
  }
}
@keyframes pulseAnimation {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes bounceAnimation {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -4%, 0);
  }
}
.version {
  background: #000 url("../images/version-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/1508;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .version {
    background-image: url("../images/version-bg-d.jpg");
    background-size: auto 100%;
    aspect-ratio: 1200/870;
  }
}
@media (min-width: 1280px) {
  .version {
    aspect-ratio: 1920/870;
  }
}
.version__content {
  position: absolute;
  width: calc(480 / var(--ds) * var(--vw));
  background: transparent url("../images/version-content-m@2x.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 1536/2734;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 1.8%, 0);
}
@media (min-width: 768px) {
  .version__content {
    background-image: url("../images/version-content-d@2x.png");
    background-size: auto 100%;
    aspect-ratio: 1383/777;
    width: calc(1124 / var(--ds) * var(--vw));
    transform: translate3d(-50%, 1.8%, 0);
  }
}
.version__video {
  width: calc(396 / var(--ds) * var(--vw));
  aspect-ratio: 1268/708;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, 44%, 0);
  background-color: #000;
  border: solid calc(4 / var(--ds) * var(--vw)) #fff;
}
@media (min-width: 768px) {
  .version__video {
    width: calc(550 / var(--ds) * var(--vw));
    transform: translate3d(-12%, -17%, 0);
    border-width: calc(6 / var(--ds) * var(--vw));
  }
}
.version__btn-more {
  width: calc(190 / var(--ds) * var(--vw));
  aspect-ratio: 664/230;
  background: transparent url("../images/version-btn-more@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, -36%, 0);
  z-index: 70;
  font-size: 0;
  display: block;
}
@media (min-width: 768px) {
  .version__btn-more {
    width: calc(266 / var(--ds) * var(--vw));
    transform: translate3d(-149%, -33%, 0);
    transition: transform 300ms ease;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .version__btn-more:hover {
    transform: translate3d(-149%, -43%, 0);
    background-position: 0 100%;
  }
}
.version__btn-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(35 / var(--ds) * var(--vw));
  aspect-ratio: 1/1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  background: transparent url("../images/header-icons@2x.png") no-repeat 100% 0;
  background-size: 400% auto;
  filter: drop-shadow(0 0 0.6rem rgba(255, 255, 255, 0));
  z-index: 50;
  cursor: pointer;
}
.version__btn-toggle.mute {
  background-position: 100% 100%;
}
.version__cht {
  width: calc(64 / var(--ds) * var(--vw));
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(202%, -19%, 0);
}
@media (min-width: 768px) {
  .version__cht {
    width: calc(84 / var(--ds) * var(--vw));
    transform: translate3d(760%, -18%, 0);
  }
}

.live {
  background: #000 url("../images/live-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/777;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .live {
    background-image: url("../images/live-bg-d.jpg");
    background-size: auto 100%;
    aspect-ratio: 1200/788;
  }
}
@media (min-width: 1280px) {
  .live {
    aspect-ratio: 1920/788;
  }
}
.live__content {
  position: absolute;
  width: calc(480 / var(--ds) * var(--vw));
  background: transparent url("../images/live-content-m@2x.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 1536/1206;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 14%, 0);
}
@media (min-width: 768px) {
  .live__content {
    background-image: url("../images/live-content-d@2x.png");
    background-size: auto 100%;
    aspect-ratio: 1166/603;
    width: calc(950 / var(--ds) * var(--vw));
    transform: translate3d(-50%, 18%, 0);
  }
}
.live__btn-more {
  width: calc(210 / var(--ds) * var(--vw));
  aspect-ratio: 676/250;
  background: transparent url("../images/live-btn-more@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-54%, -151%, 0);
  z-index: 70;
  font-size: 0;
  display: block;
}
@media (min-width: 768px) {
  .live__btn-more {
    width: calc(266 / var(--ds) * var(--vw));
    transform: translate3d(-54%, -144%, 0);
    transition: transform 300ms ease;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .live__btn-more:hover {
    transform: translate3d(-54%, -154%, 0);
    background-position: 0 100%;
  }
}
.live__cht {
  width: calc(58 / var(--ds) * var(--vw));
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-352%, -16%, 0);
}
@media (min-width: 768px) {
  .live__cht {
    transform: translate3d(-739%, -16%, 0);
    width: calc(74 / var(--ds) * var(--vw));
  }
}

.event {
  background: #000 url("../images/event-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/1685;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .event {
    background-image: url("../images/event-bg-d.jpg");
    background-size: auto 100%;
    aspect-ratio: 1200/1576;
  }
}
@media (min-width: 1280px) {
  .event {
    aspect-ratio: 1920/1576;
  }
}
.event__content {
  position: absolute;
  width: calc(480 / var(--ds) * var(--vw));
  background: transparent url("../images/event-content-m@2x.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 1536/3195;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 3.6%, 0);
}
@media (min-width: 768px) {
  .event__content {
    background-image: url("../images/event-content-d@2x.png");
    background-size: auto 100%;
    aspect-ratio: 1378/1346;
    transform: translate3d(-50%, 5%, 0);
    width: calc(1120 / var(--ds) * var(--vw));
  }
}
.event__btn-more {
  width: calc(210 / var(--ds) * var(--vw));
  aspect-ratio: 696/258;
  background: transparent url("../images/event-btn-more@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-58%, -62%, 0);
  z-index: 70;
  font-size: 0;
  display: block;
}
@media (min-width: 768px) {
  .event__btn-more {
    width: calc(284 / var(--ds) * var(--vw));
    transform: translate3d(-59%, -75%, 0);
  }
}
@media (min-width: 768px) and (hover: hover) {
  .event__btn-more {
    transition: transform 300ms ease;
  }
  .event__btn-more:hover {
    transform: translate3d(-59%, -85%, 0);
    background-position: 0 100%;
  }
}
.event__cht {
  width: calc(62 / var(--ds) * var(--vw));
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(209%, -18%, 0);
}
@media (min-width: 768px) {
  .event__cht {
    width: calc(72 / var(--ds) * var(--vw));
    transform: translate3d(959%, -19%, 0);
  }
}

.discount {
  background: #000 url("../images/discount-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/1749;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .discount {
    background-image: url("../images/discount-bg-d.jpg");
    background-size: auto 100%;
    aspect-ratio: 1200/1312;
  }
}
@media (min-width: 1280px) {
  .discount {
    aspect-ratio: 1920/1312;
  }
}
.discount__content {
  position: absolute;
  width: calc(480 / var(--ds) * var(--vw));
  background: transparent url("../images/discount-content-m@2x.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 1536/3348;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 3%, 0);
}
@media (min-width: 768px) {
  .discount__content {
    width: calc(1390 / var(--ds) * var(--vw));
    background-image: url("../images/discount-content-d@2x.png");
    background-size: auto 100%;
    aspect-ratio: 1690/1220;
    transform: translate3d(-47%, 4%, 0);
  }
}
.discount__btn-more {
  width: calc(210 / var(--ds) * var(--vw));
  aspect-ratio: 684/248;
  background: transparent url("../images/discount-btn-more@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-46%, -31%, 0);
  z-index: 70;
  font-size: 0;
  display: block;
}
@media (min-width: 768px) {
  .discount__btn-more {
    width: calc(280 / var(--ds) * var(--vw));
    transform: translate3d(-46%, -52%, 0);
    transition: transform 300ms ease;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .discount__btn-more:hover {
    background-position: 0 100%;
    transform: translate3d(-46%, -62%, 0);
  }
}
.discount__cht-1 {
  width: calc(58 / var(--ds) * var(--vw));
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-366%, -1%, 0);
}
@media (min-width: 768px) {
  .discount__cht-1 {
    width: calc(74 / var(--ds) * var(--vw));
    transform: translate3d(-866%, 0%, 0);
  }
}

.extra {
  background: #000 url("../images/extra-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/718;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .extra {
    background-image: url("../images/extra-bg-d.jpg");
    background-size: auto 100%;
    aspect-ratio: 1200/797;
  }
}
@media (min-width: 1280px) {
  .extra {
    aspect-ratio: 1920/797;
  }
}
.extra__content {
  position: absolute;
  width: calc(480 / var(--ds) * var(--vw));
  background: transparent url("../images/extra-content-m@2x.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 1536/1160;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 16%, 0);
}
@media (min-width: 768px) {
  .extra__content {
    width: calc(940 / var(--ds) * var(--vw));
    background-image: url("../images/extra-content-d@2x.png");
    background-size: auto 100%;
    aspect-ratio: 2300/1160;
    transform: translate3d(-50%, 24%, 0);
  }
}
.extra__btn-more {
  width: calc(210 / var(--ds) * var(--vw));
  aspect-ratio: 688/246;
  background: transparent url("../images/extra-btn-more@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-46%, -91%, 0);
  z-index: 70;
  font-size: 0;
  display: block;
}
@media (min-width: 768px) {
  .extra__btn-more {
    width: calc(280 / var(--ds) * var(--vw));
    transform: translate3d(-46%, -128%, 0);
    transition: transform 300ms ease;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .extra__btn-more:hover {
    transform: translate3d(-46%, -138%, 0);
    background-position: 0 100%;
  }
}
.extra__cht {
  width: calc(58 / var(--ds) * var(--vw));
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(250%, 0%, 0);
}
@media (min-width: 768px) {
  .extra__cht {
    width: calc(74 / var(--ds) * var(--vw));
    transform: translate3d(860%, 0%, 0);
  }
}

.loading {
  position: fixed;
  z-index: 500;
  background-color: #000;
  color: #31c3cf;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity 2s ease-in-out;
  gap: 1.6rem;
  top: 0;
  pointer-events: none;
}
.loading.loaded {
  opacity: 0;
}
.loading p {
  padding-top: 0.5rem;
  font-size: 1rem;
  color: #31c3cf;
  z-index: 10;
  text-shadow: 0 0 1rem #31c3cf;
}

.loader {
  color: #31c3cf;
  font-size: 32px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  transform: translateZ(0);
  animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
}

@keyframes mltShdSpin {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%, 95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%, 59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes round {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.intro-video {
  width: 100%;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: #000;
  transition: opacity 1200ms ease;
  display: none;
  will-change: opacity;
}
@media (min-width: 768px) {
  .intro-video {
    display: block;
  }
}
.intro-video.ended {
  opacity: 0;
  pointer-events: none;
}
.intro-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-video__btn-skip {
  cursor: pointer;
  background-color: transparent;
  width: calc(120 / var(--ds) * var(--vw));
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, -50%, 0);
}

.modal {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 1200;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 10ms ease;
}
.modal.active {
  pointer-events: auto;
  opacity: 1;
}
.modal__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.modal-ui {
  position: relative;
}
.modal-ui__btn-close {
  position: absolute;
  width: calc(54 / var(--ds) * var(--vw));
  aspect-ratio: 1/1;
  background: transparent url("../images/modal-ui-btn-close@2x.png") no-repeat 0 0;
  background-size: cover;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -80%, 0);
  font-size: 0;
  cursor: pointer;
}
@media (min-width: 640px) {
  .modal-ui__btn-close {
    width: calc(40 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -50%, 0);
  }
}
@media (min-width: 768px) {
  .modal-ui__btn-close {
    width: calc(32 / var(--ds) * var(--vw));
  }
}
@media (hover: hover) {
  .modal-ui__btn-close {
    transition: transform 300ms ease;
  }
  .modal-ui__btn-close:hover {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}
.modal-ui__extra-content {
  width: calc(480 / var(--ds) * var(--vw));
}
@media (min-width: 640px) {
  .modal-ui__extra-content {
    width: calc(400 / var(--ds) * var(--vw));
  }
}