@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) and (max-width: 992px) {
  :root {
    --ds: 992;
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  :root {
    --ds: 1560;
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  :root {
    --ds: 1560;
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  :root {
    --ds: 1560;
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  :root {
    --ds: 1920;
  }
}html {
  font-size: 10px;
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-optical-sizing: auto;
}html.fixed {
  overflow: hidden;
}body {
  background-color: #000;
}body.fixed {
  overflow: hidden;
}.wrap {
  position: relative;
  overflow-x: hidden;
}.site-main {
  position: relative;
}.device-size {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 1.2rem;
  color: #fff;
  z-index: 2000;
  padding: 8px;
  background-color: #000;
}.UNI-footer .gradeArea .gradeArea__img img {
  width: auto !important;
}.device-size {
  position: fixed;
  right: 0;
  bottom: 0;
  font-size: 1.2rem;
  color: #fff;
  z-index: 2000;
  padding: 8px;
  background-color: #000;
}@media (max-width: 767px) {
  .device-size {
    right: initial;
    left: 0;
  }
}.loading {
  position: fixed;
  z-index: 500;
  background-color: #000;
  color: #3c2f7e;
  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;
}.loading.loaded {
  opacity: 0;
  pointer-events: none;
}.loading p {
  font-size: 1rem;
  color: #3c2f7e;
  z-index: 10;
  text-shadow: 0 0 1rem #3c2f7e;
}.loader {
  color: #3c2f7e;
  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);
  }
}.site-header {
  background-color: rgba(0, 41, 127, 0.8);
  padding: 0 calc(10 / var(--ds) * var(--vw));
  height: calc(64 / var(--ds) * var(--vw));
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 200;
}@media (min-width: 768px) and (max-width: 992px) {
  .site-header {
    height: calc(64 / var(--ds) * var(--vw));
    padding-left: calc(30 / var(--ds) * var(--vw));
    padding-right: calc(30 / var(--ds) * var(--vw));
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header {
    height: calc(64 / var(--ds) * var(--vw));
    padding-left: calc(30 / var(--ds) * var(--vw));
    padding-right: calc(30 / var(--ds) * var(--vw));
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header {
    height: calc(64 / var(--ds) * var(--vw));
    padding-left: calc(30 / var(--ds) * var(--vw));
    padding-right: calc(30 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header {
    height: calc(64 / var(--ds) * var(--vw));
    padding-left: calc(30 / var(--ds) * var(--vw));
    padding-right: calc(30 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header {
    height: calc(80 / var(--ds) * var(--vw));
    padding-left: calc(30 / var(--ds) * var(--vw));
    padding-right: calc(30 / var(--ds) * var(--vw));
  }
}.site-header__inner {
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: center;
  z-index: 0;
  height: 100%;
  z-index: 40;
  pointer-events: none;
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__inner {
    width: calc(1200 / var(--ds) * var(--vw));
    margin: 0 auto;
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header__inner {
    width: calc(1200 / var(--ds) * var(--vw));
    margin: 0 auto;
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header__inner {
    width: calc(1200 / var(--ds) * var(--vw));
    margin: 0 auto;
  }
}.site-header__maplestory {
  display: block;
  width: calc(100 / var(--ds) * var(--vw));
  pointer-events: auto;
}.site-header__sns-wrap {
  display: flex;
  gap: calc(12 / var(--ds) * var(--vw));
  pointer-events: auto;
  align-items: center;
  padding-right: calc(64 / var(--ds) * var(--vw));
}@media (min-width: 768px) and (max-width: 992px) {
  .site-header__sns-wrap {
    padding-right: calc(72 / var(--ds) * var(--vw));
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header__sns-wrap {
    padding-right: calc(72 / var(--ds) * var(--vw));
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__sns-wrap {
    padding-right: calc(72 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header__sns-wrap {
    padding-right: calc(72 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header__sns-wrap {
    padding-right: calc(96 / var(--ds) * var(--vw));
  }
}.site-header__btn-sns {
  width: calc(32 / var(--ds) * var(--vw));
  height: calc(32 / var(--ds) * var(--vw));
  display: block;
}.site-header__btn-sns.ig {
  background: transparent url("../../images/icon-ig@3x.png") no-repeat 0 0;
  background-size: cover;
}.site-header__btn-sns.fb {
  background: transparent url("../../images/icon-fb@3x.png") no-repeat 0 0;
  background-size: cover;
}.site-header__btn-sns.yt {
  background: transparent url("../../images/icon-yt@3x.png") no-repeat 0 0;
  background-size: cover;
}.site-header__btn-open {
  width: calc(64 / var(--ds) * var(--vw));
  height: calc(64 / var(--ds) * var(--vw));
  position: absolute;
  background-color: transparent;
  cursor: pointer;
  z-index: 80;
  right: 50%;
  top: 0;
  transform: translate3d(360%, 0, 0);
}@media (min-width: 768px) and (max-width: 992px) {
  .site-header__btn-open {
    width: calc(64 / var(--ds) * var(--vw));
    height: calc(64 / var(--ds) * var(--vw));
    transform: translate3d(730%, 0, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header__btn-open {
    width: calc(64 / var(--ds) * var(--vw));
    height: calc(64 / var(--ds) * var(--vw));
    transform: translate3d(1160%, 0, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__btn-open {
    width: calc(64 / var(--ds) * var(--vw));
    height: calc(64 / var(--ds) * var(--vw));
    transform: translate3d(950%, 0, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header__btn-open {
    width: calc(64 / var(--ds) * var(--vw));
    height: calc(64 / var(--ds) * var(--vw));
    transform: translate3d(950%, 0, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header__btn-open {
    width: calc(80 / var(--ds) * var(--vw));
    height: calc(80 / var(--ds) * var(--vw));
    transform: translate3d(760%, 0, 0);
  }
}.site-header__btn-open span {
  width: calc(28 / var(--ds) * var(--vw));
  height: calc(3 / var(--ds) * var(--vw));
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: all 300ms ease;
}@media (min-width: 768px) and (max-width: 992px) {
  .site-header__btn-open span {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header__btn-open span {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__btn-open span {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header__btn-open span {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header__btn-open span {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}.site-header__btn-open::before, .site-header__btn-open::after {
  position: absolute;
  width: calc(28 / var(--ds) * var(--vw));
  height: calc(3 / var(--ds) * var(--vw));
  left: 50%;
  top: 50%;
  content: "";
  background-color: #fff;
  transition: all 300ms ease;
}@media (min-width: 768px) and (max-width: 992px) {
  .site-header__btn-open::before, .site-header__btn-open::after {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header__btn-open::before, .site-header__btn-open::after {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__btn-open::before, .site-header__btn-open::after {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header__btn-open::before, .site-header__btn-open::after {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header__btn-open::before, .site-header__btn-open::after {
    width: calc(44 / var(--ds) * var(--vw));
    height: calc(4 / var(--ds) * var(--vw));
  }
}.site-header__btn-open::before {
  transform: translate3d(-50%, -350%, 0);
}.site-header__btn-open::after {
  transform: translate3d(-50%, 250%, 0);
}.site-header__btn-open.active span {
  opacity: 0;
}.site-header__btn-open.active::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}.site-header__btn-open.active::after {
  transform: translate3d(-50%, -40%, 0) rotate(-45deg);
}.site-header__nav {
  width: calc(210 / var(--ds) * var(--vw));
  right: 0;
  position: fixed;
  top: 0;
  background-color: #2b2b2b;
  padding-top: calc(64 / var(--ds) * var(--vw));
  transition: all 0.3s ease;
  transform: translate3d(-1%, 0, 0);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
}@media (min-width: 768px) and (max-width: 992px) {
  .site-header__nav {
    padding-top: calc(64 / var(--ds) * var(--vw));
    transform: translate3d(-9%, 0, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header__nav {
    padding-top: calc(64 / var(--ds) * var(--vw));
    transform: translate3d(-10%, 0, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__nav {
    width: calc(240 / var(--ds) * var(--vw));
    padding-top: calc(64 / var(--ds) * var(--vw));
    right: 50%;
    transform: translate3d(254%, 0, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header__nav {
    width: calc(240 / var(--ds) * var(--vw));
    padding-top: calc(64 / var(--ds) * var(--vw));
    right: 50%;
    transform: translate3d(254%, 0, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header__nav {
    width: calc(260 / var(--ds) * var(--vw));
    padding-top: calc(80 / var(--ds) * var(--vw));
    right: 50%;
    transform: translate3d(234%, 0, 0);
  }
}.site-header__nav.active {
  pointer-events: auto;
  opacity: 1;
}.site-header__nav::after {
  width: 100%;
  height: calc(64 / var(--ds) * var(--vw));
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(45deg, rgb(65, 65, 65) 0%, rgb(33, 33, 33) 100%);
}@media (min-width: 768px) and (max-width: 992px) {
  .site-header__nav::after {
    height: calc(64 / var(--ds) * var(--vw));
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header__nav::after {
    height: calc(64 / var(--ds) * var(--vw));
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__nav::after {
    height: calc(64 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header__nav::after {
    height: calc(64 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header__nav::after {
    height: calc(80 / var(--ds) * var(--vw));
  }
}.site-header__btn-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(10 / var(--ds) * var(--vw));
  text-decoration: none;
  border-bottom: solid 1px #1f1f1f;
  border-top: solid 1px #3e3e3e;
  padding: calc(20 / var(--ds) * var(--vw)) calc(20 / var(--ds) * var(--vw));
}.site-header__btn-link:nth-child(1) {
  border-top: solid 1px transparent;
}.site-header__btn-link i {
  width: calc(64 / var(--ds) * var(--vw));
  height: calc(64 / var(--ds) * var(--vw));
  background: transparent url("../../images/nav-bg@2x.png") no-repeat 0 0;
  background-size: 500% auto;
}.site-header__btn-link span {
  color: #828282;
  font-size: calc(20 / var(--ds) * var(--vw));
  transition: color 0.3s ease-in-out;
}@media (hover: hover) {
  .site-header__btn-link:hover span {
    color: #fff;
  }
}.site-header__btn-link.home i {
  background-position: 0 0;
}@media (hover: hover) {
  .site-header__btn-link.home:hover i {
    background-position: 0 100%;
  }
}.site-header__btn-link.home.active i {
  background-position: 0 100%;
}.site-header__btn-link.home.active span {
  color: #fff;
}.site-header__btn-link.video i {
  background-position: 25% 0;
}@media (hover: hover) {
  .site-header__btn-link.video:hover i {
    background-position: 25% 100%;
  }
}.site-header__btn-link.video.active i {
  background-position: 25% 100%;
}.site-header__btn-link.video.active span {
  color: #fff;
}.site-header__btn-link.version i {
  background-position: 50% 0;
}@media (hover: hover) {
  .site-header__btn-link.version:hover i {
    background-position: 50% 100%;
  }
}.site-header__btn-link.version.active i {
  background-position: 50% 100%;
}.site-header__btn-link.version.active span {
  color: #fff;
}.site-header__btn-link.marketing i {
  background-position: 75% 0;
}@media (hover: hover) {
  .site-header__btn-link.marketing:hover i {
    background-position: 75% 100%;
  }
}.site-header__btn-link.marketing.active i {
  background-position: 75% 100%;
}.site-header__btn-link.marketing.active span {
  color: #fff;
}.site-header__btn-link.award i {
  background-position: 100% 0;
}@media (hover: hover) {
  .site-header__btn-link.award:hover i {
    background-position: 100% 100%;
  }
}.site-header__btn-link.award.active i {
  background-position: 100% 100%;
}.site-header__btn-link.award.active span {
  color: #fff;
}.site-header__btn-close {
  position: absolute;
  width: calc(52 / var(--ds) * var(--vw));
  height: calc(52 / var(--ds) * var(--vw));
  background-color: #5d5d5d;
  right: 0;
  top: 0;
  transform: translate3d(100%, 0, 0);
  cursor: pointer;
}@media (min-width: 768px) and (max-width: 992px) {
  .site-header__btn-close {
    width: calc(64 / var(--ds) * var(--vw));
    height: calc(64 / var(--ds) * var(--vw));
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header__btn-close {
    width: calc(64 / var(--ds) * var(--vw));
    height: calc(64 / var(--ds) * var(--vw));
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__btn-close {
    width: calc(64 / var(--ds) * var(--vw));
    height: calc(64 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .site-header__btn-close {
    width: calc(64 / var(--ds) * var(--vw));
    height: calc(64 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .site-header__btn-close {
    width: calc(80 / var(--ds) * var(--vw));
    height: calc(80 / var(--ds) * var(--vw));
  }
}.site-header__btn-close::before, .site-header__btn-close::after {
  position: absolute;
  width: calc(20 / var(--ds) * var(--vw));
  height: calc(3 / var(--ds) * var(--vw));
  background-color: #fff;
  left: 50%;
  top: 50%;
  content: "";
}.site-header__btn-close::before {
  transform: translate3d(-50%, 180%, 0) rotate(45deg);
}.site-header__btn-close::after {
  transform: translate3d(-50%, -230%, 0) rotate(-45deg);
}.modal {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 1200;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms 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;
}.ui {
  position: relative;
  width: calc(460 / var(--ds) * var(--vw));
  height: calc(560 / var(--ds) * var(--vw));
  overflow-y: scroll;
  background: transparent url("../../images/ui-bg@2x.jpg") no-repeat 0 0;
  background-size: cover;
  box-sizing: border-box;
  background-clip: padding-box;
  border: solid 3px transparent;
  border-image: linear-gradient(to top, #add2ff, #fff) 1;
  padding: calc(20 / var(--ds) * var(--vw)) calc(10 / var(--ds) * var(--vw));
}.ui::-webkit-scrollbar {
  width: calc(4 / var(--ds) * var(--vw));
  height: calc(2 / var(--ds) * var(--vw));
}.ui::-webkit-scrollbar-track {
  background-color: #000947;
  border-radius: calc(10 / var(--ds) * var(--vw));
  margin: calc(0 / var(--ds) * var(--vw)) calc(20 / var(--ds) * var(--vw));
}.ui::-webkit-scrollbar-thumb {
  border-radius: calc(10 / var(--ds) * var(--vw));
  background-color: #078afe;
}.ui.reserve {
  height: auto;
}.ui.prize {
  width: calc(290 / var(--ds) * var(--vw));
  aspect-ratio: 487/964;
  background: transparent url("../../images/ui-prize-bg@2x.jpg") no-repeat 0 0;
  background-size: cover;
  border-image: none;
  border-radius: calc(20 / var(--ds) * var(--vw));
  overflow-y: scroll;
  border-color: #078afe;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(7%, 16%, 0);
  padding: calc(12 / var(--ds) * var(--vw));
}@media (min-width: 1201px) and (max-width: 1400px) {
  .ui.prize {
    left: 50%;
    transform: translate3d(-245%, 20%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .ui.prize {
    left: 50%;
    transform: translate3d(-245%, 20%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .ui.prize {
    left: 50%;
    transform: translate3d(-300%, 25%, 0);
  }
}.ui__reserve {
  display: flex;
  flex-direction: column;
  gap: calc(8 / var(--ds) * var(--vw));
}.ui__btn-close {
  width: calc(24 / var(--ds) * var(--vw));
  height: calc(24 / var(--ds) * var(--vw));
  background: transparent url("../../images/ui-btn-close@2x.png") no-repeat 0 0;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  translate: -60% 90%;
  cursor: pointer;
  transition: rotate 300ms ease;
}@media (hover: hover) {
  .ui__btn-close:hover {
    rotate: 180deg;
  }
}@media (max-width: 767px) {
  .ui__btn-close {
    width: calc(30 / var(--ds) * var(--vw));
    height: calc(30 / var(--ds) * var(--vw));
  }
}.ui__title {
  font-size: calc(30 / var(--ds) * var(--vw));
  color: #fff;
  text-align: center;
  margin-bottom: calc(10 / var(--ds) * var(--vw));
}.ui__title.prize {
  color: #00fcff;
  text-shadow: 0 0 0.8rem #000;
  font-size: calc(18 / var(--ds) * var(--vw));
}.ui__title.prize strong {
  font-size: calc(24 / var(--ds) * var(--vw));
  padding-right: calc(4 / var(--ds) * var(--vw));
}.ui__remind-text {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #ffdc7d;
  text-align: center;
  margin-bottom: calc(10 / var(--ds) * var(--vw));
}.ui__serial-number {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(20 / var(--ds) * var(--vw));
}.ui__nember {
  border-radius: 0;
  text-align: center;
  font-size: calc(24 / var(--ds) * var(--vw));
  color: #fff;
  padding: calc(8 / var(--ds) * var(--vw)) 0;
  position: relative;
  padding: calc(8 / var(--ds) * var(--vw)) calc(12 / var(--ds) * var(--vw));
  border: solid 2px #fff;
  border-right: 0;
  background-color: rgba(100, 178, 210, 0.2);
}.ui__nember:focus {
  outline: 0;
}.ui__nember::before {
  pointer-events: none;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(45deg, rgba(0, 255, 255, 0) 1%, rgb(255, 255, 255) 44%, rgba(0, 255, 255, 0) 60%, rgb(255, 255, 255) 100%);
  opacity: 0.4;
}.ui__btn-copy {
  font-size: calc(24 / var(--ds) * var(--vw));
  color: #fff;
  position: relative;
  background-color: rgba(100, 178, 210, 0.4);
  padding: calc(8 / var(--ds) * var(--vw)) calc(12 / var(--ds) * var(--vw));
  border: solid 2px #fff;
  cursor: pointer;
  transition: all 300ms ease;
}.ui__btn-copy::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(45deg, rgba(0, 255, 255, 0) 1%, rgb(255, 255, 255) 44%, rgba(0, 255, 255, 0) 60%, rgb(255, 255, 255) 100%);
  opacity: 0.4;
}@media (hover: hover) {
  .ui__btn-copy:hover {
    background-color: rgba(100, 178, 210, 0.8);
  }
}.ui__award-item-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(8 / var(--ds) * var(--vw));
  margin-bottom: calc(20 / var(--ds) * var(--vw));
  padding: 0 calc(20 / var(--ds) * var(--vw));
}.ui__award-item {
  background: #000;
  width: calc(80 / var(--ds) * var(--vw));
  height: auto;
  aspect-ratio: 240/244;
}.ui__award-item:nth-child(1) {
  background: transparent url("../../images/award-item-1@2x.png") no-repeat 0 center;
  background-size: cover;
}.ui__award-item:nth-child(2) {
  background: transparent url("../../images/award-item-2@2x.png") no-repeat 0 center;
  background-size: cover;
}.ui__award-item:nth-child(3) {
  background: transparent url("../../images/award-item-3@2x.png") no-repeat 0 center;
  background-size: cover;
}.ui__award-item:nth-child(4) {
  background: transparent url("../../images/award-item-4@2x.png") no-repeat 0 center;
  background-size: cover;
}.ui__award-item:nth-child(5) {
  background: transparent url("../../images/award-item-5@2x.png") no-repeat 0 center;
  background-size: cover;
}.ui__award-item:nth-child(6) {
  background: transparent url("../../images/award-item-6@2x.png") no-repeat 0 center;
  background-size: cover;
}.ui__award-item:nth-child(7) {
  background: transparent url("../../images/award-item-7@2x.png") no-repeat 0 center;
  background-size: cover;
}.ui__award-item:nth-child(8) {
  background: transparent url("../../images/award-item-8@2x.png") no-repeat 0 center;
  background-size: cover;
}.ui__block {
  margin-bottom: calc(20 / var(--ds) * var(--vw));
}.ui__block:last-child {
  margin-bottom: 0;
}.ui__sub-title {
  width: calc(240 / var(--ds) * var(--vw));
  height: calc(32 / var(--ds) * var(--vw));
  font-size: calc(22 / var(--ds) * var(--vw));
  color: #fff;
  margin: 0 auto;
  text-align: center;
  position: relative;
  display: flex;
  white-space: nowrap;
  justify-content: center;
  gap: calc(4 / var(--ds) * var(--vw));
}.ui__sub-title::before, .ui__sub-title::after {
  content: "";
  background: transparent url("../../images/ui-title-bg@2x.png") no-repeat 0 center;
  background-size: 100% auto;
  aspect-ratio: 248/32;
  width: calc(30 / var(--ds) * var(--vw));
  flex: 0 0 calc(60 / var(--ds) * var(--vw));
}.ui__sub-title::after {
  transform: rotateY(180deg);
}.ui__text {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  text-align: center;
}.ui__btn-signout {
  background: transparent url("../../images/modal-btn-signout@2x.png") no-repeat 0 0;
  background-size: 100%;
  width: calc(339 / var(--ds) * var(--vw));
  aspect-ratio: 339/71;
  font-size: 0;
  position: relative;
  cursor: pointer;
  margin: 0 auto;
  display: block;
}.ui__btn-signout::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent url("../../images/modal-btn-signout@2x.png") no-repeat 0 100%;
  background-size: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 300ms;
}@media (hover: hover) {
  .ui__btn-signout:hover::after {
    opacity: 1;
  }
}.ui__reserve-date {
  font-size: calc(28 / var(--ds) * var(--vw));
  color: #fff;
  text-align: center;
}.ui__reserve-text {
  font-size: calc(28 / var(--ds) * var(--vw));
  color: #fff;
  text-align: center;
}.ui-prize__title {
  width: 100%;
  background: transparent url("../../images/ui-prize-title-bg@2x.jpg") no-repeat 0 0;
  background-size: 100%;
  aspect-ratio: 872/226;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(8 / var(--ds) * var(--vw));
  gap: calc(8 / var(--ds) * var(--vw));
  box-sizing: border-box;
  text-decoration: none;
}.ui-prize__title .ui-prize__name {
  text-align: center;
}.ui-prize__title.home-btn-award {
  justify-content: flex-start;
  animation: glowAni 1.4s infinite;
}.ui-prize__title.home-btn-award .ui-prize__name {
  animation: scaleAni 0.5s infinite paused;
  scale: 1;
  text-align: left;
}@media (hover: hover) {
  .ui-prize__title.home-btn-award .ui-prize__name:hover {
    animation-play-state: running;
  }
}.ui-prize__sub-title {
  padding: 0 calc(8 / var(--ds) * var(--vw));
  gap: calc(8 / var(--ds) * var(--vw));
  display: flex;
  align-items: center;
  aspect-ratio: 618/142;
  color: #00fcff;
  text-align: center;
  background: transparent url("../../images/ui-prize-sub-title-bg@2x.jpg") no-repeat 0 0;
  background-size: 100%;
}.ui-prize__sub-title .ui-prize__name {
  color: #00fcff;
  font-size: calc(18 / var(--ds) * var(--vw));
}.ui-prize__sub-title.home-btn-receive {
  cursor: pointer;
}.ui-prize__image {
  width: calc(44 / var(--ds) * var(--vw));
  aspect-ratio: 1/1;
}.ui-prize__image.icon-1 {
  background: transparent url("../../images/icon-1@2x.png") no-repeat 0 0;
  background-size: 100%;
}.ui-prize__image.icon-2 {
  background: transparent url("../../images/icon-2@2x.png") no-repeat 0 0;
  background-size: 100%;
}.ui-prize__image.icon-3 {
  background: transparent url("../../images/icon-3@2x.png") no-repeat 0 0;
  background-size: 100%;
}.ui-prize__image.icon-4 {
  background: transparent url("../../images/icon-4@2x.png") no-repeat 0 0;
  background-size: 100%;
}.ui-prize__image.icon-5 {
  background: transparent url("../../images/icon-5@2x.png") no-repeat 0 0;
  background-size: 100%;
}.ui-prize__name {
  font-size: calc(22 / var(--ds) * var(--vw));
  color: #fff;
  text-align: left;
}.ui-prize__item-wrap {
  padding: calc(8 / var(--ds) * var(--vw));
}.ui-prize__item-wrap:not(:last-child) {
  border-bottom: dashed 1px #0088ff;
}.ui-prize__new-prize-1 {
  width: calc(240 / var(--ds) * var(--vw));
  margin: 0 auto;
}.ui-prize__new-prize-2 {
  width: calc(200 / var(--ds) * var(--vw));
  margin: 0 auto;
}.ui-prize__item {
  display: flex;
  align-items: center;
  gap: calc(12 / var(--ds) * var(--vw));
}.ui-prize__item .ui-prize__name {
  font-size: calc(15 / var(--ds) * var(--vw));
}.ui-prize__item .ui-prize__image {
  width: calc(44 / var(--ds) * var(--vw));
}.ui-prize__list {
  max-height: 0;
  transition: max-height 500ms ease;
  overflow: hidden;
}.ui-prize__list.active {
  max-height: 400px;
}@keyframes scaleAni {
  0%, 100% {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
}@keyframes glowAni {
  0%, 100% {
    filter: drop-shadow(0 0 1rem rgba(0, 180, 255, 0)) contrast(100%);
  }
  50% {
    filter: drop-shadow(0 0 1rem rgb(0, 180, 255)) contrast(150%);
  }
}.section-home {
  aspect-ratio: 768/1334;
  background: #222a77 url("../../images/home-bg-m.jpg") no-repeat center top;
  background-size: cover;
  position: relative;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home {
    aspect-ratio: 1200/840;
    background-image: url("../../images/home-bg.jpg");
    background-size: cover;
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home {
    aspect-ratio: 1920/840;
    background-image: url("../../images/home-bg.jpg");
    background-size: cover;
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home {
    aspect-ratio: 1920/840;
    background-image: url("../../images/home-bg.jpg");
    background-size: cover;
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home {
    aspect-ratio: 1920/840;
    background-image: url("../../images/home-bg.jpg");
    background-size: cover;
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home {
    aspect-ratio: 1920/840;
    background-image: url("../../images/home-bg.jpg");
    background-size: cover;
  }
}.section-home canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
  object-fit: contain;
}.section-home__btn-reserve {
  display: block;
  width: calc(202 / var(--ds) * var(--vw));
  height: auto;
  aspect-ratio: 326/90;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, -222%, 0);
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__btn-reserve {
    width: calc(262 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -128%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__btn-reserve {
    width: calc(262 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -128%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__btn-reserve {
    width: calc(262 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -128%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__btn-reserve {
    width: calc(262 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -128%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__btn-reserve {
    width: calc(322 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -128%, 0);
  }
}@media (hover: hover) {
  .section-home__btn-reserve:hover .section-home__canvas-reserve-hover-wrap {
    opacity: 1;
  }
}.section-home__canvas-reserve-wrap {
  width: calc(440 / var(--ds) * var(--vw));
  aspect-ratio: 1/1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  background: transparent url("../../images/download/frame000.png") no-repeat 0 0;
  background-size: cover;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__canvas-reserve-wrap {
    width: calc(590 / var(--ds) * var(--vw));
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__canvas-reserve-wrap {
    width: calc(590 / var(--ds) * var(--vw));
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__canvas-reserve-wrap {
    width: calc(590 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__canvas-reserve-wrap {
    width: calc(590 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__canvas-reserve-wrap {
    width: calc(590 / var(--ds) * var(--vw));
  }
}.section-home__canvas-reserve-hover-wrap {
  width: calc(340 / var(--ds) * var(--vw));
  aspect-ratio: 540/410;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  position: absolute;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__canvas-reserve-hover-wrap {
    width: calc(460 / var(--ds) * var(--vw));
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__canvas-reserve-hover-wrap {
    width: calc(460 / var(--ds) * var(--vw));
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__canvas-reserve-hover-wrap {
    width: calc(460 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__canvas-reserve-hover-wrap {
    width: calc(460 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__canvas-reserve-hover-wrap {
    width: calc(450 / var(--ds) * var(--vw));
  }
}.section-home__main-title {
  width: calc(470 / var(--ds) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -56%, 0);
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__main-title {
    width: calc(600 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -36%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__main-title {
    width: calc(600 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -36%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__main-title {
    width: calc(600 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -36%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__main-title {
    width: calc(600 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -36%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__main-title {
    width: calc(750 / var(--ds) * var(--vw));
    transform: translate3d(-50%, -36%, 0);
  }
}.section-home__monster-1 {
  width: calc(100 / var(--ds) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-158%, -145%, 0);
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__monster-1 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(-253%, -49%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__monster-1 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(-253%, -89%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__monster-1 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(-253%, -89%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__monster-1 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(-253%, -89%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__monster-1 {
    width: calc(210 / var(--ds) * var(--vw));
    transform: translate3d(-253%, -89%, 0);
  }
}.section-home__monster-1 img {
  animation: upDown 4s ease alternate infinite;
}.section-home__monster-2 {
  width: calc(180 / var(--ds) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-108%, 44%, 0);
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__monster-2 {
    width: calc(240 / var(--ds) * var(--vw));
    transform: translate3d(-211%, 30%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__monster-2 {
    width: calc(240 / var(--ds) * var(--vw));
    transform: translate3d(-211%, 30%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__monster-2 {
    width: calc(240 / var(--ds) * var(--vw));
    transform: translate3d(-211%, 30%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__monster-2 {
    width: calc(240 / var(--ds) * var(--vw));
    transform: translate3d(-211%, 30%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__monster-2 {
    width: calc(290 / var(--ds) * var(--vw));
    transform: translate3d(-211%, 30%, 0);
  }
}.section-home__monster-2 img {
  animation: upDown 2.5s ease alternate infinite;
}.section-home__monster-3 {
  width: calc(140 / var(--ds) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(65%, -150%, 0);
  z-index: 10;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__monster-3 {
    width: calc(200 / var(--ds) * var(--vw));
    transform: translate3d(129%, -90%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__monster-3 {
    width: calc(200 / var(--ds) * var(--vw));
    transform: translate3d(129%, -90%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__monster-3 {
    width: calc(200 / var(--ds) * var(--vw));
    transform: translate3d(129%, -90%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__monster-3 {
    width: calc(200 / var(--ds) * var(--vw));
    transform: translate3d(129%, -90%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__monster-3 {
    width: calc(250 / var(--ds) * var(--vw));
    transform: translate3d(129%, -90%, 0);
  }
}.section-home__monster-3 img {
  animation: upDown 3s ease alternate-reverse infinite;
}.section-home__monster-4 {
  width: calc(130 / var(--ds) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(38%, 55%, 0);
  z-index: 30;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__monster-4 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(184%, -22%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__monster-4 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(184%, -22%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__monster-4 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(184%, -22%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__monster-4 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(184%, -22%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__monster-4 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(184%, -22%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__monster-4 {
    width: calc(210 / var(--ds) * var(--vw));
    transform: translate3d(184%, -22%, 0);
  }
}.section-home__monster-4 img {
  animation: upDown 4s ease alternate infinite;
}.section-home__monster-5 {
  width: calc(100 / var(--ds) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(75%, -218%, 0);
  z-index: 0;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__monster-5 {
    width: calc(140 / var(--ds) * var(--vw));
    transform: translate3d(134%, -123%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__monster-5 {
    width: calc(140 / var(--ds) * var(--vw));
    transform: translate3d(134%, -123%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__monster-5 {
    width: calc(140 / var(--ds) * var(--vw));
    transform: translate3d(134%, -123%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__monster-5 {
    width: calc(140 / var(--ds) * var(--vw));
    transform: translate3d(134%, -123%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__monster-5 {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(134%, -123%, 0);
  }
}.section-home__monster-5 img {
  animation: upDown 8s ease alternate-reverse infinite;
}.section-home__btn-award {
  width: calc(120 / var(--ds) * var(--vw));
  right: 0;
  top: 0;
  position: absolute;
  transform: translate3d(-5%, 850%, 0);
  z-index: 100;
  transition: all 300ms ease;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__btn-award {
    width: calc(130 / var(--ds) * var(--vw));
    transform: translate3d(-35%, 630%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__btn-award {
    width: calc(150 / var(--ds) * var(--vw));
    transform: translate3d(-105%, 500%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__btn-award {
    width: calc(160 / var(--ds) * var(--vw));
    transform: translate3d(-80%, 480%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__btn-award {
    width: calc(170 / var(--ds) * var(--vw));
    transform: translate3d(-80%, 440%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__btn-award {
    width: calc(200 / var(--ds) * var(--vw));
    transform: translate3d(240%, 440%, 0);
    right: inherit;
    left: 50%;
  }
}.section-home__prize {
  width: calc(284 / var(--ds) * var(--vw));
  background-color: #000846;
  border-radius: calc(20 / var(--ds) * var(--vw));
  position: absolute;
  left: 0;
  top: calc(80 / var(--ds) * var(--vw));
  transform: translate3d(6%, 0, 0);
  border: solid 3px #078afe;
  padding: calc(12 / var(--ds) * var(--vw));
  z-index: 100;
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__prize {
    left: 50%;
    transform: translate3d(-245%, 0, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__prize {
    left: 50%;
    transform: translate3d(-245%, 0, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__prize {
    left: 50%;
    top: calc(100 / var(--ds) * var(--vw));
    transform: translate3d(-293%, 0, 0);
  }
}.section-home__prize.receive {
  position: fixed;
  top: 0;
  transform: translate3d(6%, 90%, 0);
  transition: all 300ms ease;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__prize.receive {
    transform: translate3d(6%, 90%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__prize.receive {
    transform: translate3d(6%, 90%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__prize.receive {
    transform: translate3d(-245%, 90%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__prize.receive {
    transform: translate3d(-245%, 90%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__prize.receive {
    transform: translate3d(-293%, 100%, 0);
  }
}.section-home__prize.receive.scroll {
  transform: translate3d(6%, 720%, 0);
}@media (min-width: 768px) and (max-width: 992px) {
  .section-home__prize.receive.scroll {
    transform: translate3d(6%, 1100%, 0);
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-home__prize.receive.scroll {
    transform: translate3d(6%, 580%, 0);
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-home__prize.receive.scroll {
    transform: translate3d(-245%, 620%, 0);
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-home__prize.receive.scroll {
    transform: translate3d(-245%, 580%, 0);
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-home__prize.receive.scroll {
    transform: translate3d(-293%, 760%, 0);
  }
}@keyframes upDown {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  100% {
    transform: translate3d(0, -10%, 0) rotate(2deg);
  }
}.section-video {
  width: 100%;
  aspect-ratio: 768/430;
  background-color: #000;
  background-size: cover;
  position: relative;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-video {
    aspect-ratio: 1200/840;
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-video {
    aspect-ratio: 1920/840;
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-video {
    aspect-ratio: 1920/840;
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-video {
    aspect-ratio: 1920/840;
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-video {
    aspect-ratio: 1920/840;
  }
}.section-video__video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}.section-video__video-wrap video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}.section-video__btn-toggle {
  position: absolute;
  width: calc(60 / var(--ds) * var(--vw));
  height: calc(60 / var(--ds) * var(--vw));
  right: calc(20 / var(--ds) * var(--vw));
  top: calc(20 / var(--ds) * var(--vw));
  background-color: transparent;
  z-index: 40;
  cursor: pointer;
}.section-video__btn-toggle::before, .section-video__btn-toggle::after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}.section-video__btn-toggle::before {
  background: transparent url("../../images/speaker-high-fill.svg") no-repeat center center;
  background-size: 80%;
  opacity: 0;
}.section-video__btn-toggle::after {
  background: transparent url("../../images/speaker-slash-fill.svg") no-repeat center center;
  background-size: 80%;
  opacity: 1;
}.section-video__btn-toggle.mute::before {
  opacity: 1;
}.section-video__btn-toggle.mute::after {
  opacity: 0;
}.section-video__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}.section-video__btn-download {
  width: calc(180 / var(--ds) * var(--vw));
  transition: all 300ms ease;
  filter: drop-shadow(0 0 1rem #000);
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-video__btn-download {
    width: calc(200 / var(--ds) * var(--vw));
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-video__btn-download {
    width: calc(240 / var(--ds) * var(--vw));
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-video__btn-download {
    width: calc(240 / var(--ds) * var(--vw));
  }
}@media (hover: hover) {
  .section-video__btn-download:hover {
    transform: scale(1.2);
  }
}.section-version {
  width: 100%;
  aspect-ratio: 768/1268;
  position: relative;
  overflow: hidden;
}@media (min-width: 768px) and (max-width: 992px) {
  .section-version {
    aspect-ratio: 1920/740;
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-version {
    aspect-ratio: 1920/740;
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-version {
    aspect-ratio: 1920/740;
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-version {
    aspect-ratio: 1920/740;
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-version {
    aspect-ratio: 1920/740;
  }
}.section-version .swiper {
  position: relative;
  z-index: 0;
}.section-version__btn-more {
  width: calc(210 / var(--ds) * var(--vw));
  aspect-ratio: 552/220;
  position: absolute;
  right: calc(-20 / var(--ds) * var(--vw));
  bottom: calc(-20 / var(--ds) * var(--vw));
  transform: translate3d(-10%, -25%, 0);
  z-index: 100;
  background: transparent url("../../images/section-version-btn-more-3.png") no-repeat 0 0;
  background-size: cover;
  transition: transform 0.3s ease;
  font-size: 0;
}@media (hover: hover) {
  .section-version__btn-more:hover {
    transform: translate3d(-10%, -25%, 0) scale(1.1);
  }
}.section-version__swiper-button-prev {
  background: transparent url("../../images/slider-btn-prev@2x.png") no-repeat 0 0;
  background-size: cover;
  width: calc(100 / var(--ds) * var(--vw));
  height: auto;
  aspect-ratio: 1/1;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: 100;
  cursor: pointer;
  animation: glowScaleAni 1s infinite ease;
  transform-origin: center;
}.section-version__swiper-button-next {
  background: transparent url("../../images/slider-btn-next@2x.png") no-repeat 0 0;
  background-size: cover;
  width: calc(100 / var(--ds) * var(--vw));
  height: auto;
  aspect-ratio: 1/1;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: 100;
  cursor: pointer;
  animation: glowScaleAni 1s infinite ease;
  transform-origin: center;
}.section-version__swiper-pagination {
  position: absolute;
  width: 100%;
  bottom: calc(128 / var(--ds) * var(--vw)) !important;
  z-index: 40;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 0 0.3rem #fff);
}@media (min-width: 768px) and (max-width: 992px) {
  .section-version__swiper-pagination {
    bottom: 0 !important;
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  .section-version__swiper-pagination {
    bottom: 0 !important;
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .section-version__swiper-pagination {
    bottom: calc(10 / var(--ds) * var(--vw)) !important;
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  .section-version__swiper-pagination {
    bottom: calc(20 / var(--ds) * var(--vw)) !important;
  }
}@media (min-width: 1921px) and (max-width: 2560px) {
  .section-version__swiper-pagination {
    bottom: calc(20 / var(--ds) * var(--vw)) !important;
  }
}.section-version__swiper-pagination .swiper-pagination-bullet {
  background: transparent url("../../images/slider-pagination@2x.png") no-repeat 0 0;
  background-size: cover;
  width: calc(24 / var(--ds) * var(--vw));
  height: auto;
  aspect-ratio: 1/1;
  opacity: 1;
}.section-version__swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-position: 100% 0;
}@keyframes glowScaleAni {
  0%, 100% {
    filter: drop-shadow(0 0 1rem rgba(0, 180, 255, 0)) contrast(100%);
    scale: 1;
  }
  50% {
    filter: drop-shadow(0 0 1rem rgb(0, 180, 255)) contrast(150%);
    scale: 1.3;
  }
}