@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+TC:wght@100..900&display=swap");
*,
*::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 {
  max-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;
}
img {
  display: block;
  margin: 0;
}
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 {
  --pc-size: 2000;
  --vw: 100vw;
}
@media (max-width: 480px) {
  :root {
    --pc-size: 480;
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  :root {
    --pc-size: 1200 !important;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  :root {
    --pc-size: 960;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  :root {
    --pc-size: 1400;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  :root {
    --pc-size: 1600;
  }
}
@media (min-width: 1201px) and (max-width: 1400px) {
  :root {
    --pc-size: 1680;
  }
}
html {
  font-size: 10px;
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
}
html.fixed {
  overflow: hidden;
}
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}
body {
  background-color: #000;
}
body.fixed {
  overflow: hidden;
}
body::-webkit-scrollbar {
  height: 3px;
  width: 3px;
}
body::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #333;
}
body::-webkit-scrollbar-track:hover {
  background-color: #333;
}
body::-webkit-scrollbar-track:active {
  background-color: #333;
}
body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #5e5e5e;
}
body::-webkit-scrollbar-thumb:hover {
  background-color: #717171;
}
body::-webkit-scrollbar-thumb:active {
  background-color: #5e5e5e;
}
.remind-text {
  color: #8e8e8e;
  font-size: calc(18 / var(--pc-size) * var(--vw));
  text-align: center;
}
@media (max-width: 480px) {
  .remind-text {
    font-size: 3.7vw;
  }
}
.device-size {
  position: fixed;
  left: 0;
  bottom: 0;
  font-size: 1.2rem;
  color: #0ff;
  z-index: 2000;
  padding: 0.8rem;
}
.fixed-nav {
  width: calc(290 / var(--pc-size) * var(--vw));
  height: calc(280 / var(--pc-size) * var(--vw));
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 500;
  translate: 0 -50%;
  transition: translate 0.6s;
}
@media (max-width: 480px) {
  .fixed-nav {
    display: none;
  }
}
.fixed-nav.hide {
  pointer-events: none;
  translate: 120% -50%;
}
.fixed-nav__btn-link {
  font-size: 0;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent url("../png/ODIN_FloatBTN.png") no-repeat center center;
  background-size: cover;
  z-index: 0;
}
.fixed-nav__btn-close {
  width: calc(60 / var(--pc-size) * var(--vw));
  height: calc(60 / var(--pc-size) * var(--vw));
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  translate: -115% 15%;
  font-size: 0;
  background-color: transparent;
  cursor: pointer;
}
.site-header__inner {
  max-width: calc(1600 / var(--pc-size) * var(--vw));
  margin-inline: auto;
}
@media (max-width: 480px) {
  .site-header__inner {
    margin-inline-start: calc(20 / var(--pc-size) * var(--vw));
    margin-inline-end: calc(20 / var(--pc-size) * var(--vw));
  }
}
.site-header {
  height: calc(72 / var(--pc-size) * var(--vw));
  background-color: #070707;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 500;
}
@media (max-width: 480px) {
  .site-header {
    height: 14vw;
    background-color: rgba(0, 0, 0, 0.7);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-header {
    height: calc(80 / var(--pc-size) * var(--vw));
    background-color: rgba(0, 0, 0, 0.7);
  }
}
.site-header__inner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.site-header__odin-logo {
  font-size: 0;
  width: calc(84 / var(--pc-size) * var(--vw));
  height: calc(38 / var(--pc-size) * var(--vw));
  background: transparent url("../png/odin-logo@3x.png") no-repeat center/cover;
  position: absolute;
  left: calc(20 / var(--pc-size) * var(--vw));
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
@media (max-width: 480px) {
  .site-header__odin-logo {
    display: none;
  }
}
.site-header__odin-logo-inner {
  width: calc(140 / var(--pc-size) * var(--vw));
  aspect-ratio: 84/38;
  background: transparent url("../png/odin-logo@3x.png") no-repeat center/cover;
  font-size: 0;
  position: absolute;
  bottom: calc(60 / var(--pc-size) * var(--vw));
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  display: none;
}
@media (max-width: 480px) {
  .site-header__odin-logo-inner {
    display: block;
  }
}
.site-header__odin-logo-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -400%, 0);
  aspect-ratio: 1186/22;
  width: calc(400 / var(--pc-size) * var(--vw));
  background: transparent url("../png/logo-border-top@2x.png") no-repeat center/cover;
}
.site-header__nav {
  height: 100%;
  display: flex;
}
@media (max-width: 480px) {
  .site-header__nav {
    background-color: #070707;
    position: fixed;
    width: 100%;
    height: 100%;
    flex-direction: column;
    left: 0;
    top: 0;
    justify-content: start;
    padding-block-start: calc(140 / var(--pc-size) * var(--vw));
    opacity: 1;
    z-index: 5;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.5s ease;
    pointer-events: none;
    opacity: 0;
  }
  .site-header__nav.active {
    opacity: 1;
    pointer-events: auto;
  }
}
.site-header__btn-link {
  display: flex;
  font-size: calc(18 / var(--pc-size) * var(--vw));
  color: #ccc;
  padding-inline: calc(48 / var(--pc-size) * var(--vw));
  text-decoration: none;
  align-items: center;
  height: 100%;
  transition: background-color 0.3s;
  position: relative;
}
.site-header__btn-link::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgb(237, 201, 0) 0%, rgba(237, 201, 0, 0) 100%);
  content: "";
  left: 0;
  top: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
@media (max-width: 480px) {
  .site-header__btn-link::before {
    background: #153c48 url("../jpg/active-bg@2x.jpg") repeat-x center top;
    background-size: auto 100%;
  }
}
.site-header__btn-link span {
  line-height: 100%;
  display: block;
  height: calc(21 / var(--pc-size) * var(--vw));
  pointer-events: none;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
.site-header__btn-link:nth-child(1) svg {
  width: 120%;
  height: 100%;
}
@media (max-width: 480px) {
  .site-header__btn-link {
    font-size: calc(24 / var(--pc-size) * var(--vw));
    justify-content: center;
    height: calc(100 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-header__btn-link {
    font-size: calc(18 / var(--pc-size) * var(--vw));
    padding-inline: calc(24 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .site-header__btn-link {
    font-size: calc(22 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .site-header__btn-link:hover {
    color: #fff;
  }
  .site-header__btn-link:hover svg {
    opacity: 1;
  }
}
.site-header__btn-link.active {
  color: #fff;
  pointer-events: none;
}
.site-header__btn-link.active::before {
  opacity: 1;
}
.site-header__feature {
  display: flex;
  position: absolute;
  right: calc(24 / var(--pc-size) * var(--vw));
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
@media (max-width: 480px) {
  .site-header__feature {
    z-index: 0;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-header__feature {
    z-index: 0;
  }
}
.site-header__btn {
  font-size: calc(18 / var(--pc-size) * var(--vw));
  color: #7e7e7e;
  text-decoration: none;
  transition: color 0.3s;
}
@media (max-width: 480px) {
  .site-header__btn {
    font-size: calc(16 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-header__btn {
    font-size: calc(18 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .site-header__btn:hover {
    color: #fff;
  }
}
.site-header__btn-close {
  width: calc(48 / var(--pc-size) * var(--vw));
  height: calc(48 / var(--pc-size) * var(--vw));
  background: transparent url("../png/video-btn-close@2x.png") no-repeat center/cover;
  z-index: 15;
  position: absolute;
  border: 0;
  top: 0;
  font-size: 0;
  left: 50%;
  transform: translate3d(-50%, 100%, 0);
  display: none;
}
@media (max-width: 480px) {
  .site-header__btn-close {
    display: block;
    opacity: 0;
    transition: opacity 500ms ease;
    pointer-events: none;
  }
  .site-header__btn-close.active {
    opacity: 1;
    pointer-events: auto;
  }
}
.site-header__btn-open {
  width: 8vw;
  height: 5vw;
  background-color: transparent;
  z-index: 5;
  position: absolute;
  border: 0;
  top: 50%;
  font-size: 0;
  left: 0;
  display: none;
  transform: translate3d(0, -50%, 0);
}
.site-header__btn-open::before, .site-header__btn-open::after {
  width: 100%;
  height: 0.2rem;
  background-color: #979797;
  position: absolute;
  content: "";
  left: 50%;
}
.site-header__btn-open::before {
  transform: translate3d(-50%, 0, 0);
  top: 0;
}
.site-header__btn-open::after {
  transform: translate3d(-50%, 0, 0);
  bottom: 0;
}
.site-header__btn-open span {
  width: 100%;
  height: 0.2rem;
  background-color: #979797;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  left: 0;
}
@media (max-width: 480px) {
  .site-header__btn-open {
    display: block;
  }
}
@keyframes spark-1 {
  0% {
    stroke-dashoffset: -1000;
  }
}
@keyframes spark-2 {
  to {
    stroke-dashoffset: -500;
  }
}
@keyframes spark-3 {
  to {
    stroke-dashoffset: -1000;
  }
}
.site-footer {
  padding: calc(32 / var(--pc-size) * var(--vw)) 0;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgb(0, 0, 0) 78%, rgb(15, 15, 15) 100%);
}
@media (max-width: 480px) {
  .site-footer {
    padding: 8vw 0;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer {
    padding: 6vw 0;
  }
}
.site-footer__inner {
  max-width: calc(1600 / var(--pc-size) * var(--vw));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: calc(20 / var(--pc-size) * var(--vw));
  padding-inline: calc(24 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .site-footer__inner {
    width: 90%;
    margin-inline: auto;
    gap: 4vw;
    justify-content: center;
    flex-direction: column;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__inner {
    width: 90%;
    margin-inline: auto;
    gap: 3vw;
    justify-content: center;
    flex-direction: column;
  }
}
.site-footer__logo {
  display: flex;
  align-items: center;
  gap: calc(20 / var(--pc-size) * var(--vw));
}
.site-footer__logo img {
  width: auto;
  height: calc(40 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .site-footer__logo {
    gap: 4vw;
    justify-content: center;
  }
  .site-footer__logo img {
    height: 8vw;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__logo {
    gap: 4vw;
    justify-content: center;
  }
  .site-footer__logo img {
    height: 6vw;
  }
}
.site-footer__wrap {
  display: flex;
  align-items: center;
  gap: calc(20 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .site-footer__wrap {
    gap: 4vw;
    order: 3;
    flex-direction: column;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__wrap {
    gap: 4vw;
    order: 3;
    flex-direction: column;
  }
}
.site-footer__level {
  width: calc(40 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .site-footer__level {
    width: 12vw;
    position: relative;
    transform: translate3d(0, 5%, 0);
    margin-inline: auto;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__level {
    width: 8vw;
    position: relative;
    transform: translate3d(0, 5%, 0);
    margin-inline: auto;
  }
}
.site-footer__content ul {
  list-style: none;
}
.site-footer__content ul li {
  font-size: calc(13 / var(--pc-size) * var(--vw));
  color: #777676;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .site-footer__content ul li {
    font-size: 3vw;
    text-align: center;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__content ul li {
    font-size: 2vw;
    text-align: center;
  }
}
.site-footer__content p {
  font-size: calc(13 / var(--pc-size) * var(--vw));
  color: #777676;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .site-footer__content p {
    font-size: 3vw;
    text-align: center;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__content p {
    font-size: 2vw;
    text-align: center;
  }
}
.site-footer__content p a {
  color: #777676;
  text-decoration: none;
}
.site-footer__sns {
  display: flex;
  flex-direction: column;
  gap: calc(20 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .site-footer__sns {
    flex-direction: row;
    justify-content: center;
    gap: 4vw;
    order: 2;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__sns {
    flex-direction: row;
    justify-content: center;
    gap: 4vw;
    order: 2;
  }
}
.site-footer__btn-facebook, .site-footer__btn-youtube {
  height: calc(32 / var(--pc-size) * var(--vw));
  line-height: calc(32 / var(--pc-size) * var(--vw));
  padding-inline-start: calc(46 / var(--pc-size) * var(--vw));
  display: block;
  font-size: 0;
  filter: grayscale(100%);
  transition: filter 0.3s;
  position: relative;
  text-decoration: none;
}
@media (max-width: 480px) {
  .site-footer__btn-facebook, .site-footer__btn-youtube {
    height: 4vw;
    line-height: 4vw;
    padding-inline-start: 5vw;
    filter: grayscale(0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__btn-facebook, .site-footer__btn-youtube {
    height: 4vw;
    line-height: 4vw;
    padding-inline-start: 5vw;
    filter: grayscale(0);
  }
}
.site-footer__btn-facebook::before, .site-footer__btn-youtube::before {
  content: "";
  width: calc(32 / var(--pc-size) * var(--vw));
  height: calc(32 / var(--pc-size) * var(--vw));
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
@media (max-width: 480px) {
  .site-footer__btn-facebook::before, .site-footer__btn-youtube::before {
    width: 4vw;
    height: 4vw;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__btn-facebook::before, .site-footer__btn-youtube::before {
    width: 3vw;
    height: 3vw;
  }
}
.site-footer__btn-facebook span, .site-footer__btn-youtube span {
  font-size: calc(14 / var(--pc-size) * var(--vw));
  color: #ccc;
}
@media (max-width: 480px) {
  .site-footer__btn-facebook span, .site-footer__btn-youtube span {
    font-size: 3vw;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .site-footer__btn-facebook span, .site-footer__btn-youtube span {
    font-size: 2vw;
  }
}
@media screen and (hover: hover) {
  .site-footer__btn-facebook:hover, .site-footer__btn-youtube:hover {
    filter: grayscale(0);
  }
}
.site-footer__btn-facebook::before {
  background: transparent url("../png/icon-facebook.png") no-repeat 0 0;
  background-size: cover;
}
.site-footer__btn-youtube::before {
  background: transparent url("../png/icon-youtube.png") no-repeat 0 0;
  background-size: cover;
}
.modal {
  font-family: "Noto Sans TC", sans-serif;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 560;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.modal.active {
  pointer-events: auto;
  opacity: 1;
}
.modal__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__overlay.scroll {
  overflow-y: scroll;
  min-height: 100%;
  padding-top: calc(50 / var(--pc-size) * var(--vw));
  padding-bottom: calc(50 / var(--pc-size) * var(--vw));
  align-items: flex-start;
}
.modal__overlay.scroll > * {
  scrollbar-width: thin;
  scrollbar-color: #e6c899 #000000;
}
.modal__overlay.scroll::-webkit-scrollbar {
  width: 4px;
}
.modal__overlay.scroll::-webkit-scrollbar-track {
  background: #000000;
}
.modal__overlay.scroll::-webkit-scrollbar-thumb {
  background-color: #e6c899;
  border-radius: 11px;
}
.modal__content {
  position: relative;
}
.modal__video-container {
  width: calc(1081 / var(--pc-size) * var(--vw));
  aspect-ratio: 16/9;
  position: relative;
}
.modal__video-container iframe {
  width: 99%;
  height: 99%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 5;
  background-color: #000;
}
@media (max-width: 480px) {
  .modal__video-container {
    width: 80vw;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .modal__video-container {
    width: 80vw;
  }
}
.modal__frame {
  background: transparent url("../png/video-frame@2x.png") no-repeat 0 0;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  pointer-events: none;
  top: 0;
  left: 0;
}
.modal__btn-close {
  background-color: transparent;
  width: calc(40 / var(--pc-size) * var(--vw));
  height: calc(40 / var(--pc-size) * var(--vw));
  right: 0;
  top: calc(-60 / var(--pc-size) * var(--vw));
  position: absolute;
  border: 0;
  padding: 0;
  font-size: 0;
  cursor: pointer;
}
.modal__btn-close::before, .modal__btn-close::after {
  width: 100%;
  height: 0.2rem;
  background-color: #b0b0b0;
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  transform-origin: center center;
  transition: background-color 0.3s ease-in-out;
}
.modal__btn-close::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}
.modal__btn-close::after {
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}
@media screen and (hover: hover) {
  .modal__btn-close:hover::before, .modal__btn-close:hover::after {
    background-color: #f1cbac;
  }
}
@media (max-width: 480px) {
  .modal__btn-close {
    width: 5.5vw;
    height: 5.5vw;
    top: -7.5vw;
  }
}
.terms-modal {
  background: transparent url("../png/term-bg.png") no-repeat center top;
  background-size: cover;
  width: calc(1038.31 / var(--pc-size) * var(--vw));
  aspect-ratio: 1141/679;
  position: relative;
  padding-top: calc(60.06 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .terms-modal {
    width: calc(440 / var(--pc-size) * var(--vw));
    background-image: url("../png/term-bg-m.png");
    background-size: cover;
    aspect-ratio: 932/1027;
    padding-top: calc(30 / var(--pc-size) * var(--vw));
  }
}
.terms-modal__main-title {
  width: calc(709.8 / var(--pc-size) * var(--vw));
  margin: 0 auto;
}
@media (max-width: 480px) {
  .terms-modal__main-title {
    width: calc(320 / var(--pc-size) * var(--vw));
  }
}
.terms-modal__btn-close {
  cursor: pointer;
  width: calc(40.04 / var(--pc-size) * var(--vw));
  height: calc(40.04 / var(--pc-size) * var(--vw));
  background: transparent url("../png/icon-close@2x.png") no-repeat center top;
  background-size: cover;
  position: absolute;
  right: calc(109.2 / var(--pc-size) * var(--vw));
  top: calc(109.2 / var(--pc-size) * var(--vw));
  font-size: 0;
}
@media screen and (hover: hover) {
  .terms-modal__btn-close {
    transition: rotate 0.3s ease;
  }
  .terms-modal__btn-close:hover {
    rotate: 90deg;
  }
}
@media (max-width: 480px) {
  .terms-modal__btn-close {
    width: calc(24 / var(--pc-size) * var(--vw));
    height: calc(24 / var(--pc-size) * var(--vw));
    right: calc(36 / var(--pc-size) * var(--vw));
    top: calc(36 / var(--pc-size) * var(--vw));
  }
}
.terms-modal__content {
  padding: 0 calc(200.2 / var(--pc-size) * var(--vw));
  display: flex;
  flex-direction: column;
  gap: calc(36.4 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .terms-modal__content {
    padding-left: calc(48 / var(--pc-size) * var(--vw));
    padding-right: calc(48 / var(--pc-size) * var(--vw));
    gap: calc(12 / var(--pc-size) * var(--vw));
  }
}
.terms-modal__text {
  line-height: 170%;
  font-size: calc(18.2 / var(--pc-size) * var(--vw));
  color: #fff;
}
@media (max-width: 480px) {
  .terms-modal__text {
    font-size: calc(16 / var(--pc-size) * var(--vw));
  }
}
.terms-modal__ul-list {
  list-style: none;
  padding-left: calc(10 / var(--pc-size) * var(--vw));
  margin: 0;
}
.terms-modal__ul-list li {
  font-size: calc(18.2 / var(--pc-size) * var(--vw));
  line-height: 170%;
  color: #fff;
  position: relative;
  padding-left: calc(8 / var(--pc-size) * var(--vw));
}
.terms-modal__ul-list li::before {
  content: "#";
  font-size: calc(18.2 / var(--pc-size) * var(--vw));
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(-100%, -5%, 0);
}
.terms-modal__ul-list li:not(:last-child) {
  margin-block-end: calc(9.1 / var(--pc-size) * var(--vw));
}
.terms-modal__ul-list li strong {
  color: #ffd791;
}
@media (max-width: 480px) {
  .terms-modal__ul-list li {
    font-size: calc(14 / var(--pc-size) * var(--vw));
  }
  .terms-modal__ul-list li::marker {
    font-size: calc(14 / var(--pc-size) * var(--vw));
  }
  .terms-modal__ul-list li:not(:last-child) {
    margin-block-end: calc(4 / var(--pc-size) * var(--vw));
  }
}
.alert-modal {
  background: transparent url("../png/alert-bg@2x.png") no-repeat center top;
  background-size: cover;
  width: calc(657.93 / var(--pc-size) * var(--vw));
  aspect-ratio: 723/445;
  position: relative;
  padding: calc(100 / var(--pc-size) * var(--vw)) calc(120 / var(--pc-size) * var(--vw));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(20 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .alert-modal {
    width: calc(400 / var(--pc-size) * var(--vw));
    padding: calc(60 / var(--pc-size) * var(--vw)) calc(40 / var(--pc-size) * var(--vw));
    gap: calc(8 / var(--pc-size) * var(--vw));
  }
}
.alert-modal__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16 / var(--pc-size) * var(--vw));
}
.alert-modal__content h3 {
  font-size: calc(28 / var(--pc-size) * var(--vw));
  color: #fff;
  text-align: center;
}
.alert-modal__content p {
  font-size: calc(24 / var(--pc-size) * var(--vw));
  color: #fff;
  text-align: center;
}
@media (max-width: 480px) {
  .alert-modal__content {
    gap: calc(8 / var(--pc-size) * var(--vw));
  }
  .alert-modal__content h3 {
    font-size: calc(20 / var(--pc-size) * var(--vw));
  }
  .alert-modal__content p {
    font-size: calc(18 / var(--pc-size) * var(--vw));
  }
}
.alert-modal__btn-confirm {
  cursor: pointer;
  background: transparent url("../png/btn-confirm@2x.png") no-repeat center top;
  background-size: cover;
  width: calc(230.23 / var(--pc-size) * var(--vw));
  aspect-ratio: 253/68;
  font-size: 0;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .alert-modal__btn-confirm {
    width: calc(160 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .alert-modal__btn-confirm {
    transition: transform 0.3s;
  }
  .alert-modal__btn-confirm:hover {
    transform: translate3d(0, -5%, 0);
  }
}
.loading {
  position: fixed;
  z-index: 600;
  background-color: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity 1000ms ease;
  gap: 1.6rem;
}
.loading.loaded {
  opacity: 0;
  pointer-events: none;
}
.loading p {
  font-size: var(--font-size-xs);
  color: #f8edbb;
  z-index: 10;
  text-shadow: 0 0 1rem #fff;
}
.loader {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 5.6rem;
  height: 5.6rem;
  color: #f8edbb;
}
.loader:before,
.loader:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}
.loader:after {
  color: #9c6a13;
  transform: rotateY(70deg);
  animation-delay: 0.4s;
}
@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}
@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes spin {
  0%, 100% {
    box-shadow: 0.2em 0px 0 0px currentcolor;
  }
  12% {
    box-shadow: 0.2em 0.2em 0 0 currentcolor;
  }
  25% {
    box-shadow: 0 0.2em 0 0px currentcolor;
  }
  37% {
    box-shadow: -0.2em 0.2em 0 0 currentcolor;
  }
  50% {
    box-shadow: -0.2em 0 0 0 currentcolor;
  }
  62% {
    box-shadow: -0.2em -0.2em 0 0 currentcolor;
  }
  75% {
    box-shadow: 0px -0.2em 0 0 currentcolor;
  }
  87% {
    box-shadow: 0.2em -0.2em 0 0 currentcolor;
  }
}
.wrap {
  overflow: hidden;
}
.mobile-rotate {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.mobile-rotate.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-rotate svg {
  width: calc(80 / var(--pc-size) * var(--vw));
}
.mobile-rotate p {
  font-size: calc(16 / var(--pc-size) * var(--vw));
  color: #fff5bf;
}
.mobile-rotate__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(20 / var(--pc-size) * var(--vw));
}
.reservation {
  font-family: "Noto Sans TC", sans-serif;
  width: 100%;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  background: #000 url("../jpg/kv-bg.jpg") no-repeat center top;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
@media (max-width: 480px) {
  .reservation {
    background-image: url("../jpg/kv-bg-m.jpg");
    background-position: center center;
    background-size: 100% auto;
    height: 100dvh;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation {
    height: calc(var(--vh, 1vh) * 100);
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .reservation {
    height: calc(var(--vh, 1vh) * 100);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .reservation {
    height: calc(var(--vh, 1vh) * 60);
  }
}
@media (min-width: 993px) and (max-width: 1200px) and (orientation: portrait) {
  .reservation {
    height: calc(var(--vh, 1vh) * 70);
  }
}
.reservation__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 10;
}
@media (max-width: 480px) {
  .reservation__content {
    transform: translate3d(-50%, -20%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__content {
    transform: translate3d(-50%, -40%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .reservation__content {
    transform: translate3d(-50%, -45%, 0);
  }
}
.reservation__main-title {
  width: calc(688.87 / var(--pc-size) * var(--vw));
  margin: 0 auto;
  position: relative;
  transform: translate3d(1%, 0, 0);
}
@media (max-width: 480px) {
  .reservation__main-title {
    width: calc(350 / var(--pc-size) * var(--vw));
    filter: drop-shadow(0 0 1rem #4f380a);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__main-title {
    width: calc(600 / var(--pc-size) * var(--vw));
  }
}
.reservation__form {
  position: relative;
  width: calc(952.77 / var(--pc-size) * var(--vw));
  aspect-ratio: 1047/584;
  height: auto;
  background: transparent url("../png/form-bg.png") no-repeat center top;
  background-size: cover;
  box-sizing: border-box;
  padding-top: calc(36.4 / var(--pc-size) * var(--vw));
  padding-left: calc(76.44 / var(--pc-size) * var(--vw));
  padding-right: calc(76.44 / var(--pc-size) * var(--vw));
  margin-inline: auto;
}
@media (max-width: 480px) {
  .reservation__form {
    width: calc(470 / var(--pc-size) * var(--vw));
    padding-top: calc(12 / var(--pc-size) * var(--vw));
    padding-left: calc(30 / var(--pc-size) * var(--vw));
    padding-right: calc(30 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__form {
    width: calc(680 / var(--pc-size) * var(--vw));
    padding-top: calc(24 / var(--pc-size) * var(--vw));
    padding-left: calc(30 / var(--pc-size) * var(--vw));
    padding-right: calc(30 / var(--pc-size) * var(--vw));
  }
}
.reservation__cht-1 {
  width: calc(952.77 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-4%, -45%, 0);
  z-index: 5;
}
@media (max-width: 480px) {
  .reservation__cht-1 {
    width: calc(478 / var(--pc-size) * var(--vw));
    transform: translate3d(-43%, -62%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__cht-1 {
    width: calc(800 / var(--pc-size) * var(--vw));
    transform: translate3d(-20%, -40%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .reservation__cht-1 {
    transform: translate3d(-20%, -62%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .reservation__cht-1 {
    width: calc(800 / var(--pc-size) * var(--vw));
    transform: translate3d(-6%, -50%, 0);
  }
}
.reservation__cht-1-light {
  width: calc(1348.62 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-12%, -52%, 0);
  z-index: 2;
  mix-blend-mode: screen;
}
@media (max-width: 480px) {
  .reservation__cht-1-light {
    width: calc(600 / var(--pc-size) * var(--vw));
    transform: translate3d(-34%, -78%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__cht-1-light {
    width: calc(900 / var(--pc-size) * var(--vw));
    transform: translate3d(-15%, -68%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .reservation__cht-1-light {
    transform: translate3d(-24%, -68%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .reservation__cht-1-light {
    width: calc(1100 / var(--pc-size) * var(--vw));
    transform: translate3d(-11%, -60%, 0);
  }
}
.reservation__cht-2 {
  width: calc(817.18 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-127%, -49%, 0);
  z-index: 0;
}
@media (max-width: 480px) {
  .reservation__cht-2 {
    width: calc(448 / var(--pc-size) * var(--vw));
    transform: translate3d(-66%, -62%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__cht-2 {
    width: calc(660 / var(--pc-size) * var(--vw));
    transform: translate3d(-114%, -50%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .reservation__cht-2 {
    transform: translate3d(-111%, -59%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .reservation__cht-2 {
    width: calc(700 / var(--pc-size) * var(--vw));
    transform: translate3d(-123%, -54%, 0);
  }
}
.reservation__form-title {
  width: calc(514.15 / var(--pc-size) * var(--vw));
  margin: 0 auto calc(22.75 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .reservation__form-title {
    width: calc(240 / var(--pc-size) * var(--vw));
    margin-bottom: calc(16 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__form-title {
    width: calc(320 / var(--pc-size) * var(--vw));
    margin-bottom: calc(16 / var(--pc-size) * var(--vw));
  }
}
.reservation__date {
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  letter-spacing: calc(3.8 / var(--pc-size) * var(--vw));
  font-size: calc(20 / var(--pc-size) * var(--vw));
  color: #fff5bf;
}
.reservation__date strong {
  color: #ffe763;
}
@media (max-width: 480px) {
  .reservation__date {
    letter-spacing: 0;
    font-size: calc(11 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__date {
    letter-spacing: 0;
    font-size: calc(18 / var(--pc-size) * var(--vw));
  }
}
.reservation__form-data {
  width: calc(364 / var(--pc-size) * var(--vw));
  padding-top: calc(36.4 / var(--pc-size) * var(--vw));
  display: flex;
  flex-direction: column;
  gap: calc(13.65 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .reservation__form-data {
    width: calc(200 / var(--pc-size) * var(--vw));
    padding-top: calc(10 / var(--pc-size) * var(--vw));
    gap: calc(4 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__form-data {
    width: calc(310 / var(--pc-size) * var(--vw));
    padding-top: calc(10 / var(--pc-size) * var(--vw));
    gap: calc(8 / var(--pc-size) * var(--vw));
  }
}
.reservation__mcc {
  cursor: pointer;
  position: relative;
  background-color: #000;
  border: solid calc(2 / var(--pc-size) * var(--vw)) #4c4435;
  font-size: calc(20 / var(--pc-size) * var(--vw));
  color: #fff5bf;
  padding: calc(18 / var(--pc-size) * var(--vw)) 0;
  letter-spacing: calc(3.8 / var(--pc-size) * var(--vw));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(10 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .reservation__mcc {
    padding: calc(6 / var(--pc-size) * var(--vw)) 0;
    font-size: calc(12 / var(--pc-size) * var(--vw));
    letter-spacing: calc(2 / var(--pc-size) * var(--vw));
    gap: calc(4 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__mcc {
    padding: calc(6 / var(--pc-size) * var(--vw)) 0;
    font-size: calc(18 / var(--pc-size) * var(--vw));
    letter-spacing: calc(2 / var(--pc-size) * var(--vw));
    gap: calc(4 / var(--pc-size) * var(--vw));
  }
}
.reservation__mcc::after {
  display: block;
  width: calc(24 / var(--pc-size) * var(--vw));
  height: calc(24 / var(--pc-size) * var(--vw));
  background-color: transparent;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.73 37.73"><path style="fill:none" d="M0 0h37.73v37.73H0z"/><path d="M36.23 29.36c-.38 0-.77-.15-1.06-.44l-16.3-16.3-16.31 16.3c-.59.59-1.54.59-2.12 0a1.49 1.49 0 0 1 0-2.12L18.87 8.37 37.3 26.8c.59.59.59 1.54 0 2.12-.29.29-.68.44-1.06.44Z" style="fill:%23fff5be"/></svg>');
  background-size: cover;
  content: "";
  rotate: 180deg;
  transition: rotate 0.3s ease;
  transform-origin: 50%;
}
@media (max-width: 480px) {
  .reservation__mcc::after {
    width: calc(14 / var(--pc-size) * var(--vw));
    height: calc(14 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__mcc::after {
    width: calc(14 / var(--pc-size) * var(--vw));
    height: calc(14 / var(--pc-size) * var(--vw));
  }
}
.reservation__mcc span {
  pointer-events: none;
}
.reservation__mcc.active::after {
  rotate: 0deg;
}
.reservation__input {
  width: 100%;
  background-color: #000;
  border: solid calc(2 / var(--pc-size) * var(--vw)) #4c4435;
  font-size: calc(20 / var(--pc-size) * var(--vw));
  color: #fff5bf;
  padding: calc(18 / var(--pc-size) * var(--vw)) 0;
  text-align: center;
  letter-spacing: calc(3.8 / var(--pc-size) * var(--vw));
  border-radius: 0;
}
.reservation__input::placeholder {
  color: #fff5bf;
}
@media (max-width: 480px) {
  .reservation__input {
    padding: calc(6 / var(--pc-size) * var(--vw)) 0;
    font-size: calc(12 / var(--pc-size) * var(--vw));
    letter-spacing: 0;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__input {
    padding: calc(6 / var(--pc-size) * var(--vw)) 0;
    font-size: calc(18 / var(--pc-size) * var(--vw));
    letter-spacing: 0;
  }
}
.reservation__btn-submit {
  cursor: pointer;
  display: block;
  font-size: 0;
  width: calc(359.45 / var(--pc-size) * var(--vw));
  aspect-ratio: 395/67;
  height: auto;
  background: transparent url("../png/btn-submit@2x.png") no-repeat center top;
  background-size: cover;
  position: relative;
}
@media (max-width: 480px) {
  .reservation__btn-submit {
    width: calc(200 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__btn-submit {
    width: calc(320 / var(--pc-size) * var(--vw));
  }
}
.reservation__btn-submit::after {
  pointer-events: none;
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, -49%, 0);
  width: calc(381.29 / var(--pc-size) * var(--vw));
  aspect-ratio: 419/228;
  height: auto;
  background: transparent url("../png/btn-submit-glow.png") no-repeat center top;
  background-size: cover;
}
@media (max-width: 480px) {
  .reservation__btn-submit::after {
    width: calc(240 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .reservation__btn-submit {
    transition: transform 0.3s ease;
  }
  .reservation__btn-submit:hover {
    transform: translate3d(0, -3%, 0);
  }
}
.reservation__remind {
  list-style: none;
}
.reservation__remind li {
  font-size: calc(18 / var(--pc-size) * var(--vw));
  color: #968261;
}
@media (max-width: 480px) {
  .reservation__remind li {
    font-size: calc(10 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__remind li {
    font-size: calc(16 / var(--pc-size) * var(--vw));
  }
}
.reservation__item {
  width: calc(409.5 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(2%, -28%, 0);
}
@media (max-width: 480px) {
  .reservation__item {
    width: calc(200 / var(--pc-size) * var(--vw));
    transform: translate3d(8%, -30%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .reservation__item {
    width: calc(260 / var(--pc-size) * var(--vw));
    transform: translate3d(13%, -30%, 0);
  }
}
.reservation__dropdown {
  position: absolute;
  left: -2px;
  top: calc(66 / var(--pc-size) * var(--vw));
  width: calc(100% + 4px);
  background-color: #000;
  border: solid calc(2 / var(--pc-size) * var(--vw)) #4c4435;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.reservation__dropdown.active {
  pointer-events: auto;
  opacity: 1;
}
@media (max-width: 480px) {
  .reservation__dropdown {
    top: calc(36 / var(--pc-size) * var(--vw));
  }
}
.reservation__dropdown-item {
  cursor: pointer;
  display: flex;
  padding: calc(12 / var(--pc-size) * var(--vw)) 0;
  justify-content: space-around;
  transition: background-color 0.3s ease;
}
.reservation__dropdown-item:hover {
  background-color: #282214;
}
@media (max-width: 480px) {
  .reservation__dropdown-item {
    padding: calc(8 / var(--pc-size) * var(--vw)) 0;
  }
}
.custom-checkbox {
  cursor: pointer;
  display: block;
  position: relative;
  padding-left: calc(32 / var(--pc-size) * var(--vw));
  font-size: calc(18 / var(--pc-size) * var(--vw));
  user-select: none;
  color: #968261;
}
.custom-checkbox button {
  cursor: pointer;
  background-color: transparent;
  padding: 0;
  color: #968261;
  border-bottom: solid calc(1 / var(--pc-size) * var(--vw)) #968261;
}
@media (max-width: 480px) {
  .custom-checkbox {
    font-size: calc(10 / var(--pc-size) * var(--vw));
    padding-left: calc(22 / var(--pc-size) * var(--vw));
    padding-bottom: calc(4 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .custom-checkbox {
    font-size: calc(16 / var(--pc-size) * var(--vw));
    padding-left: calc(22 / var(--pc-size) * var(--vw));
  }
}
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.custom-checkbox__checkmark {
  position: absolute;
  top: calc(2 / var(--pc-size) * var(--vw));
  left: 0;
  width: calc(24 / var(--pc-size) * var(--vw));
  height: calc(24 / var(--pc-size) * var(--vw));
  background-color: transparent;
  transition: all 0.3s ease;
  border: solid calc(2 / var(--pc-size) * var(--vw)) #4c4435;
}
@media (max-width: 480px) {
  .custom-checkbox__checkmark {
    width: calc(16 / var(--pc-size) * var(--vw));
    height: calc(16 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .custom-checkbox__checkmark {
    width: calc(20 / var(--pc-size) * var(--vw));
    height: calc(20 / var(--pc-size) * var(--vw));
    top: 0;
  }
}
.custom-checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(22 / var(--pc-size) * var(--vw));
  height: calc(22 / var(--pc-size) * var(--vw));
  background: transparent url("data:image/png;base64,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") no-repeat center top;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (max-width: 480px) {
  .custom-checkbox__checkmark:after {
    width: calc(14 / var(--pc-size) * var(--vw));
    height: calc(14 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .custom-checkbox__checkmark:after {
    width: calc(16 / var(--pc-size) * var(--vw));
    height: calc(16 / var(--pc-size) * var(--vw));
  }
}
.custom-checkbox input:checked ~ .custom-checkbox__checkmark {
  background-color: transparent;
}
.custom-checkbox input:checked ~ .custom-checkbox__checkmark:after {
  opacity: 1;
}
.event {
  font-family: "Noto Sans TC", sans-serif;
  width: 100%;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  background: #000 url("../jpg/kv-bg4.jpg") no-repeat center top;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
@media (max-width: 480px) {
  .event {
    background-image: url("../jpg/kv-bg-m2.jpg");
    background-position: center center;
    background-size: 100% auto;
    height: 100dvh;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event {
    height: calc(var(--vh, 1vh) * 100);
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event {
    height: calc(var(--vh, 1vh) * 80);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .event {
    height: calc(var(--vh, 1vh) * 60);
  }
}
@media (min-width: 993px) and (max-width: 1200px) and (orientation: portrait) {
  .event {
    height: calc(var(--vh, 1vh) * 70);
  }
}
.event__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -38%, 0);
  z-index: 10;
}
@media (max-width: 480px) {
  .event__content {
    transform: translate3d(-50%, -30%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__content {
    transform: translate3d(-50%, -40%, 0);
  }
}
.event__main-title {
  width: calc(996.45 / var(--pc-size) * var(--vw));
  margin: 0 auto;
}
@media (max-width: 480px) {
  .event__main-title {
    width: calc(390 / var(--pc-size) * var(--vw));
    margin-bottom: calc(10 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__main-title {
    width: calc(440 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event__main-title {
    width: calc(600 / var(--pc-size) * var(--vw));
    margin-bottom: calc(10 / var(--pc-size) * var(--vw));
  }
}
.event__tabs {
  transform: translate3d(0, 0, 0);
}
.event__tab {
  display: flex;
  justify-content: center;
}
.event__btn-tab {
  cursor: pointer;
  width: calc(480 / var(--pc-size) * var(--vw));
  height: auto;
  aspect-ratio: 513/59;
  font-size: 0;
}
@media (max-width: 480px) {
  .event__btn-tab {
    width: calc(170 / var(--pc-size) * var(--vw));
    aspect-ratio: 692/118;
    margin-bottom: calc(10 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__btn-tab {
    width: calc(220 / var(--pc-size) * var(--vw));
    aspect-ratio: 692/118;
    margin-bottom: calc(10 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event__btn-tab {
    width: calc(300 / var(--pc-size) * var(--vw));
    aspect-ratio: 692/118;
    margin-bottom: calc(10 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .event__btn-tab {
    transition: transform 0.3s;
  }
  .event__btn-tab:hover {
    transform: translate3d(0, -5%, 0);
  }
}
.event__btn-tab.tab-1 {
  background: transparent url("../png/sub-btn-01@2x.png") no-repeat center top;
  background-size: cover;
}
@media (max-width: 480px) {
  .event__btn-tab.tab-1 {
    background: transparent url("../png/sub-btn-01-m@2x.png") no-repeat center top;
    background-size: cover;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__btn-tab.tab-1 {
    background: transparent url("../png/sub-btn-01-m@2x.png") no-repeat center top;
    background-size: cover;
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event__btn-tab.tab-1 {
    background: transparent url("../png/sub-btn-01-m@2x.png") no-repeat center top;
    background-size: cover;
  }
}
.event__btn-tab.tab-2 {
  background: transparent url("../png/sub-btn-02@2x.png") no-repeat center top;
  background-size: cover;
}
@media (max-width: 480px) {
  .event__btn-tab.tab-2 {
    background: transparent url("../png/sub-btn-02-m@2x.png") no-repeat center top;
    background-size: cover;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__btn-tab.tab-2 {
    background: transparent url("../png/sub-btn-02-m@2x.png") no-repeat center top;
    background-size: cover;
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event__btn-tab.tab-2 {
    background: transparent url("../png/sub-btn-02-m@2x.png") no-repeat center top;
    background-size: cover;
  }
}
.event__tab-wrap {
  width: calc(1100 / var(--pc-size) * var(--vw));
  aspect-ratio: 1252/457;
  position: relative;
  margin-bottom: calc(20 / var(--pc-size) * var(--vw));
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 480px) {
  .event__tab-wrap {
    width: calc(320 / var(--pc-size) * var(--vw));
    aspect-ratio: 682/562;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__tab-wrap {
    width: calc(440 / var(--pc-size) * var(--vw));
    aspect-ratio: 682/562;
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event__tab-wrap {
    width: calc(640 / var(--pc-size) * var(--vw));
    aspect-ratio: 682/562;
  }
}
.event__tab-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  padding: calc(21.84 / var(--pc-size) * var(--vw)) calc(27.3 / var(--pc-size) * var(--vw)) 0;
  transition: opacity 0.5s;
}
@media (max-width: 480px) {
  .event__tab-content {
    padding: calc(12 / var(--pc-size) * var(--vw));
  }
}
.event__tab-content.red {
  background: transparent url("../png/box-red.png") no-repeat center top;
  background-size: cover;
}
@media (max-width: 480px) {
  .event__tab-content.red {
    background: transparent url("../png/box-red-m.png") no-repeat center top;
    background-size: cover;
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event__tab-content.red {
    background: transparent url("../png/box-red-m.png") no-repeat center top;
    background-size: cover;
  }
}
.event__tab-content.blue {
  background: transparent url("../png/box-blue.png") no-repeat center top;
  background-size: cover;
}
@media (max-width: 480px) {
  .event__tab-content.blue {
    background: transparent url("../png/box-blue-m.png") no-repeat center top;
    background-size: cover;
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event__tab-content.blue {
    background: transparent url("../png/box-blue-m.png") no-repeat center top;
    background-size: cover;
  }
}
.event__tab-content.active {
  pointer-events: auto;
  opacity: 1;
}
.event__remind-text {
  padding-top: calc(8 / var(--pc-size) * var(--vw));
  align-items: center;
  color: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(8 / var(--pc-size) * var(--vw));
  font-size: calc(16.38 / var(--pc-size) * var(--vw));
  letter-spacing: calc(5.005 / var(--pc-size) * var(--vw));
}
.event__remind-text::before, .event__remind-text::after {
  width: calc(14.56 / var(--pc-size) * var(--vw));
  height: calc(14.56 / var(--pc-size) * var(--vw));
  content: "";
  background: transparent url("data:image/png;base64,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") no-repeat center top;
  background-size: cover;
}
@media (max-width: 480px) {
  .event__remind-text::before, .event__remind-text::after {
    width: calc(16 / var(--pc-size) * var(--vw));
    height: calc(16 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__remind-text::before, .event__remind-text::after {
    width: calc(16 / var(--pc-size) * var(--vw));
    height: calc(16 / var(--pc-size) * var(--vw));
  }
}
@media (max-width: 480px) {
  .event__remind-text {
    font-size: calc(14 / var(--pc-size) * var(--vw));
    letter-spacing: 0;
    gap: calc(8 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__remind-text {
    font-size: calc(14 / var(--pc-size) * var(--vw));
    letter-spacing: 0;
    gap: calc(8 / var(--pc-size) * var(--vw));
  }
}
.event__cht {
  position: absolute;
  z-index: 0;
  width: calc(1780 / var(--pc-size) * var(--vw));
  left: 50%;
  top: 50%;
  transform: translate3d(-55%, -50%, 0);
}
.event__cht img {
  width: 100%;
}
@media (max-width: 480px) {
  .event__cht {
    width: calc(980 / var(--pc-size) * var(--vw));
    transform: translate3d(-54%, -56%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__cht {
    width: calc(980 / var(--pc-size) * var(--vw));
    transform: translate3d(-55%, -68%, 0);
  }
}
.event__cus-red-swiper-button-prev, .event__cus-blue-swiper-button-prev {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(-100%, -50%, 0);
  width: calc(48 / var(--pc-size) * var(--vw));
  height: calc(48 / var(--pc-size) * var(--vw));
  background: transparent url("../png/arrow-prev@2x.png") no-repeat center top;
  background-size: cover;
  z-index: 400;
  display: none;
}
@media (max-width: 480px) {
  .event__cus-red-swiper-button-prev, .event__cus-blue-swiper-button-prev {
    display: block;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__cus-red-swiper-button-prev, .event__cus-blue-swiper-button-prev {
    display: block;
  }
}
.event__cus-red-swiper-button-next, .event__cus-blue-swiper-button-next {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(100%, -50%, 0);
  width: calc(48 / var(--pc-size) * var(--vw));
  height: calc(48 / var(--pc-size) * var(--vw));
  background: transparent url("../png/arrow-next@2x.png") no-repeat center top;
  background-size: cover;
  z-index: 400;
  display: none;
}
@media (max-width: 480px) {
  .event__cus-red-swiper-button-next, .event__cus-blue-swiper-button-next {
    display: block;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__cus-red-swiper-button-next, .event__cus-blue-swiper-button-next {
    display: block;
  }
}
.event__btn-scroll {
  background: transparent url("../png/btn-scroll@2x-B4TS597s.png") no-repeat center top;
  background-size: cover;
  width: calc(120 / var(--pc-size) * var(--vw));
  aspect-ratio: 1/1;
  font-size: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  animation: bounce 2s linear infinite;
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 80%;
  z-index: 0;
  display: none;
}
@media (max-width: 480px) {
  .event__btn-scroll {
    width: calc(80 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event__btn-scroll {
    width: calc(80 / var(--pc-size) * var(--vw));
  }
}
.event__btn-more {
  display: block;
  background: transparent url("../png/btn-more@2x.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(330 / var(--pc-size) * var(--vw));
  aspect-ratio: 330/57;
  position: relative;
  margin: 0 auto;
  font-size: 0;
  transition: transform 0.3s;
}
.event__btn-more::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 0;
  translate: -50% -49%;
  width: calc(349 / var(--pc-size) * var(--vw));
  aspect-ratio: 349/190;
  background: transparent url("../png/btn-light@2x.png") no-repeat 0 0;
  background-size: cover;
  transition: scale 0.3s;
}
@media (max-width: 480px) {
  .event__btn-more::before {
    width: calc(280 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .event__btn-more:hover {
    transform: translate3d(0, -5%, 0);
  }
  .event__btn-more:hover::before {
    scale: 1.5;
  }
}
@media (max-width: 480px) {
  .event__btn-more {
    width: calc(200 / var(--pc-size) * var(--vw));
  }
}
.red-slider {
  width: 100%;
}
.red-slider .swiper-slide {
  transition: all 0.3s ease;
}
@media (max-width: 480px) {
  .red-slider .swiper-slide.swiper-slide-active {
    z-index: 10;
  }
  .red-slider .swiper-slide.swiper-slide-prev {
    transform: scale(0.8) translate3d(62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
  .red-slider .swiper-slide.swiper-slide-next {
    transform: scale(0.8) translate3d(-62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .red-slider .swiper-slide.swiper-slide-active {
    z-index: 10;
  }
  .red-slider .swiper-slide.swiper-slide-prev {
    transform: scale(0.8) translate3d(62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
  .red-slider .swiper-slide.swiper-slide-next {
    transform: scale(0.8) translate3d(-62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .red-slider .swiper-slide.swiper-slide-active {
    z-index: 10;
  }
  .red-slider .swiper-slide.swiper-slide-prev {
    transform: scale(0.8) translate3d(62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
  .red-slider .swiper-slide.swiper-slide-next {
    transform: scale(0.8) translate3d(-62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
}
.blue-slider {
  width: calc(780 / var(--pc-size) * var(--vw));
  justify-content: center;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .blue-slider {
    width: 100%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .blue-slider {
    width: 100%;
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .blue-slider {
    width: 100%;
  }
}
.blue-slider .swiper-slide {
  transition: all 0.3s ease;
}
@media (max-width: 480px) {
  .blue-slider .swiper-slide.swiper-slide-active {
    z-index: 10;
  }
  .blue-slider .swiper-slide.swiper-slide-prev {
    transform: scale(0.8) translate3d(62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
  .blue-slider .swiper-slide.swiper-slide-next {
    transform: scale(0.8) translate3d(-62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .blue-slider .swiper-slide.swiper-slide-active {
    z-index: 10;
  }
  .blue-slider .swiper-slide.swiper-slide-prev {
    transform: scale(0.8) translate3d(62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
  .blue-slider .swiper-slide.swiper-slide-next {
    transform: scale(0.8) translate3d(-62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .blue-slider .swiper-slide.swiper-slide-active {
    z-index: 10;
  }
  .blue-slider .swiper-slide.swiper-slide-prev {
    transform: scale(0.8) translate3d(62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
  .blue-slider .swiper-slide.swiper-slide-next {
    transform: scale(0.8) translate3d(-62%, 0, 0);
    z-index: 5;
    filter: brightness(0.5);
  }
}
.swiper-pagination-red,
.swiper-pagination-blue {
  display: flex;
  justify-content: center;
  padding-top: calc(10 / var(--pc-size) * var(--vw));
  --swiper-pagination-bottom: 2%;
  --swiper-pagination-bullet-width: calc(
    (6 / var(--pc-size)) * var(--vw)
  ) !important;
  --swiper-pagination-bullet-height: calc(
    (6 / var(--pc-size)) * var(--vw)
  ) !important;
}
.swiper-pagination-bullet {
  background-color: #fff !important;
  opacity: 1 !important;
  border-radius: 0 !important;
  transform-origin: 50% 50% !important;
  rotate: 45deg;
}
.swiper-pagination-bullet-active {
  background-color: #ddc45e !important;
}
@keyframes bounce {
  0% {
    filter: brightness(0.5);
    transform: translateY(-30px) rotateX(35deg);
    opacity: 0;
  }
  30% {
    filter: brightness(1.5);
    transform: translateY(-5px) rotateX(0);
    opacity: 1;
  }
  60% {
    filter: brightness(1.5);
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
  90% {
    filter: brightness(0.5);
    transform: translateY(30px) rotateX(-25deg);
    opacity: 0;
  }
  100% {
    filter: brightness(0.5);
    transform: translateY(-30px) rotateX(35deg);
    opacity: 0;
  }
}
.event-two {
  font-family: "Noto Sans TC", sans-serif;
  width: 100%;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  background: #000;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
@media (max-width: 480px) {
  .event-two {
    height: 100dvh;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event-two {
    height: calc(var(--vh, 1vh) * 100);
  }
}
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .event-two {
    height: calc(var(--vh, 1vh) * 70);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .event-two {
    height: calc(var(--vh, 1vh) * 55);
  }
}
@media (min-width: 993px) and (max-width: 1200px) and (orientation: portrait) {
  .event-two {
    height: calc(var(--vh, 1vh) * 60);
  }
}
.event-two__content {
  width: 100%;
  height: 100%;
}
.event-two__slide-item {
  mix-blend-mode: lighten;
}
.event-two__item-1 {
  width: 100%;
  height: 100%;
  background: transparent url("../jpg/slide-1.jpg") no-repeat center bottom;
  background-size: auto 100%;
  position: relative;
}
@media (max-width: 480px) {
  .event-two__item-1 {
    background-image: url("../jpg/slide-1-m.jpg");
    background-size: 100% auto;
    background-position: center center;
  }
}
.event-two__item-2 {
  width: 100%;
  height: 100%;
  background: transparent url("../jpg/slide-2.jpg") no-repeat center bottom;
  background-size: auto 100%;
  position: relative;
}
@media (max-width: 480px) {
  .event-two__item-2 {
    background-image: url("../jpg/slide-2-m.jpg");
    background-size: 100% auto;
    background-position: center center;
  }
}
.event-two__main-title-1, .event-two__main-title-2 {
  width: calc(740 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -166%, 0);
  z-index: 1;
}
@media (max-width: 480px) {
  .event-two__main-title-1, .event-two__main-title-2 {
    width: calc(402 / var(--pc-size) * var(--vw));
    transform: translate3d(-50%, -250%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event-two__main-title-1, .event-two__main-title-2 {
    width: calc(560 / var(--pc-size) * var(--vw));
  }
}
.event-two__gift {
  width: calc(940 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-55%, -23%, 0);
  z-index: 0;
}
.event-two__gift img {
  width: 100%;
}
@media (hover: hover) {
  .event-two__gift {
    transition: transform 0.5s;
  }
  .event-two__gift:hover {
    transform: translate3d(-55%, -25%, 0);
  }
}
@media (max-width: 480px) {
  .event-two__gift {
    width: calc(430 / var(--pc-size) * var(--vw));
    transform: translate3d(-49%, -30%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event-two__gift {
    width: calc(700 / var(--pc-size) * var(--vw));
    transform: translate3d(-49%, -17%, 0);
  }
}
.event-two__hammer {
  width: calc(520 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -23%, 0);
  z-index: 0;
}
@media (hover: hover) {
  .event-two__hammer {
    transition: transform 0.5s;
  }
  .event-two__hammer:hover {
    transform: translate3d(-50%, -25%, 0);
  }
}
@media (max-width: 480px) {
  .event-two__hammer {
    width: calc(291 / var(--pc-size) * var(--vw));
    transform: translate3d(-37%, -38%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event-two__hammer {
    width: calc(460 / var(--pc-size) * var(--vw));
    transform: translate3d(-44%, -24%, 0);
  }
}
.event-two__btn-more {
  position: absolute;
  display: block;
  background: transparent url("../png/btn-more@2x2.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(330 / var(--pc-size) * var(--vw));
  aspect-ratio: 330/57;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, 700%, 0);
  font-size: 0;
  transition: margin-top 0.3s;
}
.event-two__btn-more::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 0;
  translate: -50% -49%;
  width: calc(349 / var(--pc-size) * var(--vw));
  aspect-ratio: 349/190;
  background: transparent url("../png/btn-light@2x.png") no-repeat 0 0;
  background-size: cover;
  transition: scale 0.3s;
}
@media (max-width: 480px) {
  .event-two__btn-more::before {
    width: calc(280 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .event-two__btn-more:hover {
    margin-top: calc(-5 / var(--pc-size) * var(--vw));
  }
  .event-two__btn-more:hover::before {
    scale: 1.5;
  }
}
@media (max-width: 480px) {
  .event-two__btn-more {
    width: calc(200 / var(--pc-size) * var(--vw));
    transform: translate3d(-50%, 600%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event-two__btn-more {
    width: calc(300 / var(--pc-size) * var(--vw));
    transform: translate3d(-50%, 600%, 0);
  }
}
.event-two__cus-swiper-button-prev {
  cursor: pointer;
  width: calc(80.08 / var(--pc-size) * var(--vw));
  aspect-ratio: 88/121;
  left: 50%;
  top: 50%;
  transform: translate3d(-730%, 28%, 0);
  background: transparent url("../png/arrow.png") no-repeat 0 0;
  background-size: 200%;
  position: absolute;
  z-index: 50;
}
@media (hover: hover) {
  .event-two__cus-swiper-button-prev:hover {
    background-position: 0 100%;
  }
}
@media (max-width: 480px) {
  .event-two__cus-swiper-button-prev {
    width: calc(40 / var(--pc-size) * var(--vw));
    transform: translate3d(-600%, -2%, 0);
    background-position: 0 100%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event-two__cus-swiper-button-prev {
    width: calc(60 / var(--pc-size) * var(--vw));
    transform: translate3d(-790%, 37%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .event-two__cus-swiper-button-prev {
    transform: translate3d(-840%, 42%, 0);
  }
}
@media (min-width: 993px) and (max-width: 1200px) and (orientation: portrait) {
  .event-two__cus-swiper-button-prev {
    transform: translate3d(-880%, 45%, 0);
  }
}
.event-two__cus-swiper-button-next {
  cursor: pointer;
  width: calc(80.08 / var(--pc-size) * var(--vw));
  aspect-ratio: 88/121;
  left: 50%;
  top: 50%;
  transform: translate3d(620%, 30%, 0);
  background: transparent url("../png/arrow.png") no-repeat 100% 0;
  background-size: 200%;
  position: absolute;
  z-index: 50;
}
@media (hover: hover) {
  .event-two__cus-swiper-button-next:hover {
    background-position: 100% 100%;
  }
}
@media (max-width: 480px) {
  .event-two__cus-swiper-button-next {
    width: calc(40 / var(--pc-size) * var(--vw));
    transform: translate3d(500%, -2%, 0);
    background-position: 100% 100%;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .event-two__cus-swiper-button-next {
    width: calc(60 / var(--pc-size) * var(--vw));
    transform: translate3d(670%, 37%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .event-two__cus-swiper-button-next {
    transform: translate3d(740%, 42%, 0);
  }
}
@media (min-width: 993px) and (max-width: 1200px) and (orientation: portrait) {
  .event-two__cus-swiper-button-next {
    transform: translate3d(780%, 45%, 0);
  }
}
.event-two-slider {
  width: 100%;
  height: 100%;
}
.update {
  font-family: "Noto Sans TC", sans-serif;
  width: 100%;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  background: #000 url("../jpg/kv-bg2.jpg") no-repeat center top;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
@media (max-width: 480px) {
  .update {
    background-image: url("../jpg/kv-bg-m3.jpg");
    background-position: center center;
    background-size: 100% auto;
    height: 100dvh;
  }
}
.update__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 50;
}
@media (max-width: 480px) {
  .update__content {
    transform: translate3d(-50%, -40%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .update__content {
    transform: translate3d(-50%, -60%, 0);
  }
}
.update__main-title {
  width: calc(640 / var(--pc-size) * var(--vw));
  margin: 0 auto;
}
@media (max-width: 480px) {
  .update__main-title {
    width: calc(400 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__main-title {
    width: calc(640 / var(--pc-size) * var(--vw));
  }
}
.update__tabs {
  width: calc(880 / var(--pc-size) * var(--vw));
  aspect-ratio: 956/79;
  background: transparent url("../png/tabs-bg@2x.png") no-repeat center top;
  background-size: cover;
  margin: 0 auto calc(30 / var(--pc-size) * var(--vw));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(40 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .update__tabs {
    width: calc(420 / var(--pc-size) * var(--vw));
    gap: calc(20 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__tabs {
    width: calc(680 / var(--pc-size) * var(--vw));
  }
}
.update__btn-tab {
  position: relative;
  font-size: 0;
  cursor: pointer;
}
.update__btn-tab::before {
  width: calc(254 / var(--pc-size) * var(--vw));
  aspect-ratio: 254/244;
  background: transparent url("../png/btn-tab-effect@2x.png") no-repeat 0 0;
  background-size: cover;
  position: absolute;
  z-index: 0;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate3d(-39%, -43%, 0);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
@media (max-width: 480px) {
  .update__btn-tab::before {
    transform: translate3d(-43%, -45%, 0);
    width: calc(180 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__btn-tab::before {
    transform: translate3d(-40%, -42%, 0);
    width: calc(180 / var(--pc-size) * var(--vw));
  }
}
.update__btn-tab::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}
.update__btn-tab.tab-1 {
  width: calc(204 / var(--pc-size) * var(--vw));
  aspect-ratio: 204/52.25;
  background: transparent url("../png/btn-tab-1.png") no-repeat center 0;
  background-size: 100% auto;
}
.update__btn-tab.tab-1::after {
  background: transparent url("../png/btn-tab-1.png") no-repeat center 100%;
  background-size: 100% auto;
}
@media (max-width: 480px) {
  .update__btn-tab.tab-1 {
    width: calc(110 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__btn-tab.tab-1 {
    width: calc(140 / var(--pc-size) * var(--vw));
  }
}
.update__btn-tab.tab-2 {
  width: calc(209 / var(--pc-size) * var(--vw));
  aspect-ratio: 209/52.25;
  background: transparent url("../png/btn-tab-2.png") no-repeat center 0;
  background-size: 100% auto;
}
.update__btn-tab.tab-2::after {
  background: transparent url("../png/btn-tab-2.png") no-repeat center 100%;
  background-size: 100% auto;
}
@media (max-width: 480px) {
  .update__btn-tab.tab-2 {
    width: calc(100 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__btn-tab.tab-2 {
    width: calc(150 / var(--pc-size) * var(--vw));
  }
}
.update__btn-tab.tab-3 {
  width: calc(209 / var(--pc-size) * var(--vw));
  aspect-ratio: 209/52.25;
  background: transparent url("../png/btn-tab-3.png") no-repeat center 0;
  background-size: 100% auto;
}
.update__btn-tab.tab-3::after {
  background: transparent url("../png/btn-tab-3.png") no-repeat center 100%;
  background-size: 100% auto;
}
@media (max-width: 480px) {
  .update__btn-tab.tab-3 {
    width: calc(100 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__btn-tab.tab-3 {
    width: calc(150 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .update__btn-tab:hover::after {
    opacity: 1;
  }
}
.update__btn-tab.active::before {
  opacity: 1;
}
.update__btn-tab.active::after {
  opacity: 1;
}
.update__rock-left {
  position: absolute;
  width: calc(909 / var(--pc-size) * var(--vw));
  aspect-ratio: 909/340;
  left: 0;
  transform: translate3d(0, 0, 0);
  bottom: 0;
  z-index: 40;
}
@media (max-width: 480px) {
  .update__rock-left {
    width: calc(200 / var(--pc-size) * var(--vw));
    transform: translate3d(-30%, -690%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__rock-left {
    width: calc(690 / var(--pc-size) * var(--vw));
    transform: translate3d(-50%, 0, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .update__rock-left {
    transform: translate3d(-30%, 0, 0);
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .update__rock-left {
    transform: translate3d(-40%, 0, 0);
  }
}
.update__rock-right {
  position: absolute;
  width: calc(591 / var(--pc-size) * var(--vw));
  aspect-ratio: 591/310;
  right: 0;
  transform: translate3d(0, 0, 0);
  bottom: 0;
  z-index: 40;
}
@media (max-width: 480px) {
  .update__rock-right {
    width: calc(160 / var(--pc-size) * var(--vw));
    transform: translate3d(50%, -610%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__rock-right {
    width: calc(460 / var(--pc-size) * var(--vw));
    transform: translate3d(50%, 0, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .update__rock-right {
    transform: translate3d(20%, 0, 0);
  }
}
.update__light {
  position: absolute;
  width: auto;
  height: 100%;
  aspect-ratio: 2560/1080;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  top: 0;
  z-index: 15;
  mix-blend-mode: screen;
}
@media (max-width: 480px) {
  .update__light {
    aspect-ratio: 1/2;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__light {
    aspect-ratio: 1/1;
  }
}
.update__overlay {
  position: absolute;
  width: auto;
  height: 100%;
  aspect-ratio: 2560/1080;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  top: 0;
  z-index: 5;
}
@media (max-width: 480px) {
  .update__overlay {
    aspect-ratio: 1/2;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__overlay {
    aspect-ratio: 2/1;
  }
}
.update__cht-1 {
  width: calc(800 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate3d(-150%, -34%, 0);
}
.update__cht-1 > img {
  position: relative;
  z-index: 0;
}
@media (max-width: 480px) {
  .update__cht-1 {
    width: calc(267 / var(--pc-size) * var(--vw));
    transform: translate3d(-85%, -107%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__cht-1 {
    width: calc(420 / var(--pc-size) * var(--vw));
    transform: translate3d(-153%, -54%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .update__cht-1 {
    width: calc(800 / var(--pc-size) * var(--vw));
    transform: translate3d(-120%, 35%, 0);
  }
}
.update__cht-1-light {
  width: calc(877 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-135%, -36%, 0);
  mix-blend-mode: screen;
  z-index: 10;
}
@media (max-width: 480px) {
  .update__cht-1-light {
    width: calc(327 / var(--pc-size) * var(--vw));
    transform: translate3d(-75%, -97%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__cht-1-light {
    width: calc(627 / var(--pc-size) * var(--vw));
    transform: translate3d(-106%, -54%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .update__cht-1-light {
    width: calc(800 / var(--pc-size) * var(--vw));
    transform: translate3d(-120%, 24%, 0);
  }
}
.update__cht-2 {
  width: calc(560 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate3d(64%, -40%, 0);
}
.update__cht-2 > img {
  position: relative;
  z-index: 0;
}
@media (max-width: 480px) {
  .update__cht-2 {
    width: calc(217 / var(--pc-size) * var(--vw));
    transform: translate3d(0%, -124%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__cht-2 {
    width: calc(317 / var(--pc-size) * var(--vw));
    transform: translate3d(60%, -64%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .update__cht-2 {
    width: calc(480 / var(--pc-size) * var(--vw));
    transform: translate3d(42%, 54%, 0);
  }
}
.update__cht-2-light {
  width: calc(241 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(155%, -36%, 0);
  mix-blend-mode: screen;
  z-index: 10;
}
@media (max-width: 480px) {
  .update__cht-2-light {
    width: calc(90 / var(--pc-size) * var(--vw));
    transform: translate3d(25%, -386%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__cht-2-light {
    width: calc(120 / var(--pc-size) * var(--vw));
    transform: translate3d(235%, -186%, 0);
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .update__cht-2-light {
    width: calc(200 / var(--pc-size) * var(--vw));
    transform: translate3d(130%, 316%, 0);
  }
}
.update__slider {
  position: relative;
  width: calc(1600 / var(--pc-size) * var(--vw));
  margin: 0 auto calc(20 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .update__slider {
    width: calc(720 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__slider {
    width: calc(1200 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .update__slider {
    width: calc(1800 / var(--pc-size) * var(--vw));
  }
}
.update__slide-item {
  position: relative;
}
.update__slide-item > img {
  position: relative;
  z-index: 0;
}
.update__slide-text {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: calc(30 / var(--pc-size) * var(--vw));
  font-size: calc(14 / var(--pc-size) * var(--vw));
  text-align: center;
  z-index: 5;
  color: #fff;
}
@media (max-width: 480px) {
  .update__slide-text {
    bottom: calc(20 / var(--pc-size) * var(--vw));
    font-size: calc(12 / var(--pc-size) * var(--vw));
  }
}
.update__cus-swiper-button-prev {
  cursor: pointer;
  width: calc(80.08 / var(--pc-size) * var(--vw));
  aspect-ratio: 88/121;
  left: 50%;
  top: 50%;
  transform: translate3d(-650%, -50%, 0);
  background: transparent url("../png/arrow.png") no-repeat 0 0;
  background-size: 200%;
  position: absolute;
  z-index: 50;
}
@media (hover: hover) {
  .update__cus-swiper-button-prev:hover {
    background-position: 0 100%;
  }
}
@media (max-width: 480px) {
  .update__cus-swiper-button-prev {
    width: calc(36 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__cus-swiper-button-prev {
    width: calc(66 / var(--pc-size) * var(--vw));
  }
}
.update__cus-swiper-button-next {
  cursor: pointer;
  width: calc(80.08 / var(--pc-size) * var(--vw));
  aspect-ratio: 88/121;
  left: 50%;
  top: 50%;
  transform: translate3d(550%, -50%, 0);
  background: transparent url("../png/arrow.png") no-repeat 100% 0;
  background-size: 200%;
  position: absolute;
  z-index: 50;
}
@media (hover: hover) {
  .update__cus-swiper-button-next:hover {
    background-position: 100% 100%;
  }
}
@media (max-width: 480px) {
  .update__cus-swiper-button-next {
    width: calc(36 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__cus-swiper-button-next {
    width: calc(66 / var(--pc-size) * var(--vw));
  }
}
.update__btn-more {
  display: block;
  background: transparent url("../png/btn-more@2x2.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(330 / var(--pc-size) * var(--vw));
  aspect-ratio: 330/57;
  position: relative;
  margin: 0 auto;
  font-size: 0;
  transition: translate 0.3s;
}
.update__btn-more::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 0;
  translate: -50% -49%;
  width: calc(349 / var(--pc-size) * var(--vw));
  aspect-ratio: 349/190;
  background: transparent url("../png/btn-light@2x.png") no-repeat 0 0;
  background-size: cover;
  transition: scale 0.3s;
}
@media (max-width: 480px) {
  .update__btn-more::before {
    width: calc(280 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .update__btn-more:hover {
    translate: 0 -5%;
  }
  .update__btn-more:hover::after {
    opacity: 1;
  }
  .update__btn-more:hover::before {
    scale: 1.5;
  }
}
@media (max-width: 480px) {
  .update__btn-more {
    width: calc(200 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .update__btn-more {
    width: calc(300 / var(--pc-size) * var(--vw));
  }
}
.character {
  font-family: "Noto Sans TC", sans-serif;
  height: calc(var(--vh, 1vh) * 100);
  background: #000 url("../jpg/kv-bg3.jpg") no-repeat center top;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
@media (max-width: 480px) {
  .character {
    background-image: url("../jpg/kv-bg-m4.jpg");
    background-position: center center;
    background-size: 100% auto;
    height: 100dvh;
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .character {
    height: calc(var(--vh, 1vh) * 80);
  }
}
.character__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -47%, 0);
}
.character__main-title {
  width: calc(1300 / var(--pc-size) * var(--vw));
  margin-inline: auto;
  position: relative;
  z-index: 30;
}
@media (max-width: 480px) {
  .character__main-title {
    width: calc(300 / var(--pc-size) * var(--vw));
    margin-inline-start: calc(130 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .character__main-title {
    width: calc(300 / var(--pc-size) * var(--vw));
    margin-inline-start: calc(130 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .character__main-title {
    width: calc(800 / var(--pc-size) * var(--vw));
  }
}
.character__sub-title {
  width: calc(855 / var(--pc-size) * var(--vw));
  margin-inline-start: calc(50 / var(--pc-size) * var(--vw));
  position: relative;
  z-index: 30;
  position: relative;
  transform: translate3d(0, -31%, 0);
}
@media (max-width: 480px) {
  .character__sub-title {
    width: calc(470 / var(--pc-size) * var(--vw));
    margin-inline: auto;
    transform: translate3d(0, 0, 0);
    margin-bottom: calc(20 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .character__sub-title {
    width: calc(470 / var(--pc-size) * var(--vw));
    margin-inline: auto;
    transform: translate3d(0, 0, 0);
    margin-bottom: calc(20 / var(--pc-size) * var(--vw));
  }
}
.character__frame {
  position: relative;
  transform: translate3d(0, -4%, 0);
  width: calc(610 / var(--pc-size) * var(--vw));
  aspect-ratio: 965/849;
  background: transparent url("../png/frame@2x.png") no-repeat center center;
  background-size: 100% auto;
  margin-inline-start: calc(70 / var(--pc-size) * var(--vw));
  padding: calc(80 / var(--pc-size) * var(--vw)) 0 0;
}
@media (max-width: 480px) {
  .character__frame {
    width: calc(360 / var(--pc-size) * var(--vw));
    margin-inline: auto;
    padding-top: calc(40 / var(--pc-size) * var(--vw));
    z-index: 10;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .character__frame {
    width: calc(360 / var(--pc-size) * var(--vw));
    margin-inline: auto;
    padding-top: calc(40 / var(--pc-size) * var(--vw));
    z-index: 10;
  }
}
@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .character__frame {
    margin-inline-start: calc(0 / var(--pc-size) * var(--vw));
    margin-inline-end: calc(400 / var(--pc-size) * var(--vw));
  }
}
.character__cht {
  width: calc(1250 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-24%, 59%, 0);
  z-index: 20;
  pointer-events: none;
}
@media (max-width: 480px) {
  .character__cht {
    width: calc(660 / var(--pc-size) * var(--vw));
    transform: translate3d(-77%, 44%, 0);
    z-index: 0;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .character__cht {
    width: calc(660 / var(--pc-size) * var(--vw));
    transform: translate3d(-77%, 44%, 0);
    z-index: 0;
  }
}
.character__cht-title {
  font-size: calc(70 / var(--pc-size) * var(--vw));
  text-align: center;
  font-weight: 400;
  background: transparent url("../png/texture@2x.png") no-repeat center center;
  background-size: cover;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  margin-block-end: calc(50 / var(--pc-size) * var(--vw));
}
@media (max-width: 480px) {
  .character__cht-title {
    font-size: calc(40 / var(--pc-size) * var(--vw));
    margin-block-end: calc(30 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .character__cht-title {
    font-size: calc(40 / var(--pc-size) * var(--vw));
    margin-block-end: calc(30 / var(--pc-size) * var(--vw));
  }
}
.character__cht-intro {
  text-align: center;
  font-size: calc(28 / var(--pc-size) * var(--vw));
  color: #fff;
  line-height: 1.7;
}
@media (max-width: 480px) {
  .character__cht-intro {
    font-size: calc(16 / var(--pc-size) * var(--vw));
    margin-bottom: calc(20 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .character__cht-intro {
    font-size: calc(16 / var(--pc-size) * var(--vw));
    margin-bottom: calc(20 / var(--pc-size) * var(--vw));
  }
}
.character__video-wrap {
  cursor: pointer;
  background: transparent url("../png/video-bg@2x.png") no-repeat center center;
  background-size: cover;
  width: calc(520 / var(--pc-size) * var(--vw));
  aspect-ratio: 16/5;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
@media screen and (hover: hover) {
  .character__video-wrap:hover .character__btn-video {
    scale: 1.1;
  }
}
@media (max-width: 480px) {
  .character__video-wrap {
    width: calc(300 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .character__video-wrap {
    width: calc(300 / var(--pc-size) * var(--vw));
  }
}
.character__btn-video {
  pointer-events: none;
  cursor: pointer;
  background: transparent url("../png/btn-video@2x.png") no-repeat center center;
  background-size: cover;
  width: calc(104 / var(--pc-size) * var(--vw));
  aspect-ratio: 1/1;
  cursor: pointer;
  transition: scale 0.3s ease-in-out;
}
@media (max-width: 480px) {
  .character__btn-video {
    width: calc(72 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .character__btn-video {
    width: calc(72 / var(--pc-size) * var(--vw));
  }
}
.index {
  font-family: "Noto Sans TC", sans-serif;
  height: calc(var(--vh, 1vh) * 100);
  background: #000 url("../jpg/kv-bg5.jpg") no-repeat center top;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
@media (max-width: 480px) {
  .index {
    background-image: url("../jpg/kv-bg-m5.jpg");
    background-position: center center;
    background-size: 100% auto;
    height: 100dvh;
  }
}
.index__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, 44%, 0);
  z-index: 20;
}
@media (max-width: 480px) {
  .index__content {
    transform: translate3d(-50%, 50%, 0);
  }
}
.index__main-title {
  width: calc(1240 / var(--pc-size) * var(--vw));
  margin: 0 auto;
}
@media (max-width: 480px) {
  .index__main-title {
    width: calc(400 / var(--pc-size) * var(--vw));
    margin-bottom: calc(6 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .index__main-title {
    width: calc(700 / var(--pc-size) * var(--vw));
  }
}
.index__btn-more {
  width: calc(330 / var(--pc-size) * var(--vw));
  aspect-ratio: 330/57;
  background: transparent url("../png/btn-more@2x3.png") no-repeat center top;
  background-size: cover;
  margin: 0 auto;
  cursor: pointer;
  display: block;
  position: relative;
  font-size: 0;
  transition: transform 0.3s;
}
@media (max-width: 480px) {
  .index__btn-more {
    aspect-ratio: 1465/155;
    background-image: url("../png/btn-more-m@2x.png");
    width: calc(344 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .index__btn-more {
    width: calc(320 / var(--pc-size) * var(--vw));
  }
}
.index__btn-more::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 0;
  translate: -50% -49%;
  width: calc(349 / var(--pc-size) * var(--vw));
  aspect-ratio: 349/190;
  background: transparent url("../png/btn-light@2x.png") no-repeat 0 0;
  background-size: cover;
  transition: scale 0.3s;
}
@media (max-width: 480px) {
  .index__btn-more::before {
    width: calc(280 / var(--pc-size) * var(--vw));
  }
}
@media (hover: hover) {
  .index__btn-more:hover {
    transform: translate3d(0, -5%, 0);
  }
  .index__btn-more:hover::before {
    scale: 1.5;
  }
}
.index__cht {
  width: calc(1100 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-53%, -36%, 0);
  z-index: 10;
}
.index__cht img {
  animation: up-down-cht 8s infinite reverse;
  animation-play-state: paused;
}
.index__cht img.active {
  animation-play-state: running;
}
@media (max-width: 480px) {
  .index__cht {
    width: calc(640 / var(--pc-size) * var(--vw));
    transform: translate3d(-49%, -38%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .index__cht {
    width: calc(680 / var(--pc-size) * var(--vw));
  }
}
.index__cht-light {
  width: calc(2560 / var(--pc-size) * var(--vw));
  aspect-ratio: 2560/1080;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 5;
  mix-blend-mode: screen;
}
@media (max-width: 480px) {
  .index__cht-light {
    width: calc(1680 / var(--pc-size) * var(--vw));
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .index__cht-light {
    width: calc(1320 / var(--pc-size) * var(--vw));
  }
}
.index__weapon {
  width: calc(954 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-56%, -65%, 0);
  z-index: 30;
}
.index__weapon img {
  animation: up-down 8s infinite;
  animation-play-state: paused;
}
.index__weapon img.active {
  animation-play-state: running;
}
@media (max-width: 480px) {
  .index__weapon {
    width: calc(440 / var(--pc-size) * var(--vw));
    transform: translate3d(-51%, -90%, 0);
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .index__weapon {
    width: calc(520 / var(--pc-size) * var(--vw));
    transform: translate3d(-51%, -60%, 0);
  }
}
@keyframes up-down {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 5%;
  }
  100% {
    translate: 0 0;
  }
}
@keyframes up-down-cht {
  0% {
    translate: 0 0;
  }
  50% {
    translate: 0 1%;
  }
  100% {
    translate: 0 0;
  }
}