@charset "UTF-8";@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;
}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: 1460;
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  :root {
    --pc-size: 1660;
  }
}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;
}.site-header__inner {
  max-width: calc(1600 / var(--pc-size) * var(--vw));
  margin-inline-start: calc(20 / var(--pc-size) * var(--vw));
  margin-inline-end: calc(20 / var(--pc-size) * var(--vw));
}@media (min-width: 993px) and (max-width: 1200px) {
  .site-header__inner {
    margin-inline: auto;
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  .site-header__inner {
    margin-inline: auto;
  }
}@media (min-width: 1401px) and (max-width: 2560px) {
  .site-header__inner {
    margin-inline: auto;
  }
}.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.85);
  }
}@media (min-width: 481px) and (max-width: 767px) {
  .site-header {
    height: 10vw;
    background-color: rgba(0, 0, 0, 0.85);
  }
}.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(91, 148, 82) 0%, rgb(25, 31, 24) 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) 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: 0;
  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: 600;
  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 {
  z-index: 10;
  background-color: transparent;
  width: calc(40 / var(--pc-size) * var(--vw));
  height: calc(40 / var(--pc-size) * var(--vw));
  right: calc(20 / var(--pc-size) * var(--vw));
  top: calc(20 / var(--pc-size) * var(--vw));
  position: absolute;
  border: 0;
  padding: 0;
  font-size: 0;
  cursor: pointer;
}.modal__btn-close.video {
  right: 0;
  top: calc(-60 / var(--pc-size) * var(--vw));
}.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: 5vw;
    right: 5vw;
  }
  .modal__btn-close.video {
    width: 5.5vw;
    height: 5.5vw;
    top: -7.5vw;
  }
}.modal__swiper {
  width: 100vw;
  height: 100vh;
}.modal__swiper .swiper-slide {
  height: 100%;
}.modal__cus-swiper-button-next {
  cursor: pointer;
  position: absolute;
  right: calc(10 / var(--pc-size) * var(--vw));
  top: 50%;
  aspect-ratio: 88/122;
  width: calc(44 / var(--pc-size) * var(--vw));
  background: transparent url("../png/btn-nav-bg.png") no-repeat 100% 0;
  background-size: 200%;
  translate: 0 40%;
  z-index: 200;
}.modal__cus-swiper-button-next.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}.modal__cus-swiper-button-prev {
  cursor: pointer;
  position: absolute;
  left: calc(10 / var(--pc-size) * var(--vw));
  top: 50%;
  aspect-ratio: 88/122;
  width: calc(44 / var(--pc-size) * var(--vw));
  background: transparent url("../png/btn-nav-bg.png") no-repeat 0 0;
  background-size: 200%;
  translate: 0 40%;
  z-index: 200;
}.modal__cus-swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}.terms-modal {
  box-sizing: border-box;
  background: transparent url("../png/term-bg.png") no-repeat center top;
  background-size: cover;
  width: calc(1018.29 / var(--pc-size) * var(--vw));
  aspect-ratio: 1119/658;
  position: relative;
  padding-top: calc(80.08 / 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: 933/1030;
    padding-top: calc(60 / var(--pc-size) * var(--vw));
  }
}.terms-modal__main-title {
  width: calc(606.06 / var(--pc-size) * var(--vw));
  margin: 0 auto calc(54.6 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .terms-modal__main-title {
    width: calc(320 / var(--pc-size) * var(--vw));
    margin-bottom: calc(20 / var(--pc-size) * var(--vw));
  }
}.terms-modal__btn-close {
  cursor: pointer;
  width: calc(32.76 / var(--pc-size) * var(--vw));
  height: calc(32.76 / var(--pc-size) * var(--vw));
  background: transparent url("../png/icon-close@2x.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  right: calc(100.1 / var(--pc-size) * var(--vw));
  top: calc(100.1 / 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(20 / var(--pc-size) * var(--vw));
    height: calc(20 / var(--pc-size) * var(--vw));
    right: calc(40 / 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(18.2 / 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(14 / 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(637.91 / var(--pc-size) * var(--vw));
  aspect-ratio: 723/425;
  position: relative;
  padding: calc(100 / var(--pc-size) * var(--vw)) calc(90 / 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(302.12 / var(--pc-size) * var(--vw));
  aspect-ratio: 332/58;
  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-in-out;
  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));
}.magnifier-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}.magnifier-content__image {
  width: 100%;
  height: 100%;
  position: relative;
}.magnifier-content__image img {
  width: 44%;
  object-fit: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}@media (max-width: 480px) {
  .magnifier-content__image img {
    width: 100%;
  }
}.magnifier {
  position: absolute;
  width: calc(280 / var(--pc-size) * var(--vw));
  height: calc(280 / var(--pc-size) * var(--vw));
  border: calc(2 / var(--pc-size) * var(--vw)) solid #fff;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  display: none;
  background-repeat: no-repeat;
  z-index: 1000;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  transition: background-position 0.05s ease-out;
  will-change: transform, background-position;
  background-color: #000;
}@media (max-width: 480px) {
  .magnifier {
    width: calc(200 / var(--pc-size) * var(--vw));
    height: calc(200 / 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 center;
  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(-5%, -43%, 0);
  z-index: 50;
}@media (max-width: 480px) {
  .reservation__content {
    transform: translate3d(-50%, -22%, 0);
  }
}@media (min-width: 481px) and (max-width: 767px) {
  .reservation__content {
    transform: translate3d(-5%, -40%, 0);
  }
}@media (min-width: 768px) and (max-width: 992px) {
  .reservation__content {
    transform: translate3d(-5%, -45%, 0);
  }
}.reservation__main-title {
  width: calc(679.25 / var(--pc-size) * var(--vw));
  margin: 0 auto calc(9.5 / var(--pc-size) * var(--vw));
  position: relative;
  transform: translate3d(1%, 0, 0);
}@media (max-width: 480px) {
  .reservation__main-title {
    width: calc(336 / var(--pc-size) * var(--vw));
    margin-bottom: 0;
  }
}.reservation__sub-title {
  width: calc(661.2 / var(--pc-size) * var(--vw));
  margin: 0 auto calc(19 / var(--pc-size) * var(--vw));
  position: relative;
  transform: translate3d(1%, 0, 0);
}@media (max-width: 480px) {
  .reservation__sub-title {
    width: calc(330 / var(--pc-size) * var(--vw));
    margin-bottom: calc(2 / var(--pc-size) * var(--vw));
  }
}.reservation__form {
  position: relative;
  width: calc(522.5 / var(--pc-size) * var(--vw));
  height: auto;
  box-sizing: border-box;
  margin-inline: auto;
}@media (max-width: 480px) {
  .reservation__form {
    width: calc(470 / var(--pc-size) * var(--vw));
  }
}@media (min-width: 481px) and (max-width: 767px) {
  .reservation__form {
    width: calc(680 / var(--pc-size) * var(--vw));
  }
}.reservation__effect {
  width: 100%;
  height: 100%;
  background: transparent url("../png/reservation-effect.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 15;
  pointer-events: none;
}@media (max-width: 480px) {
  .reservation__effect {
    display: none;
  }
}.reservation__cht-1 {
  width: calc(917.7 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-94.5%, -35.4%, 0);
  z-index: 10;
  pointer-events: none;
  animation: glow 3s infinite;
  cursor: pointer;
}.reservation__cht-1 img {
  pointer-events: none;
}.reservation__cht-1.active {
  pointer-events: auto;
}@media (max-width: 480px) {
  .reservation__cht-1 {
    width: calc(460 / var(--pc-size) * var(--vw));
    transform: translate3d(-48%, -45%, 0);
  }
}.reservation__cht-2 {
  width: calc(1132.4 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-102%, -38%, 0);
  z-index: 10;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
  animation: glow 3s infinite;
  cursor: pointer;
}.reservation__cht-2.hide {
  opacity: 0;
  pointer-events: none !important;
}.reservation__cht-2.hover {
  pointer-events: auto;
}.reservation__cht-2 img {
  pointer-events: none;
}@media (max-width: 480px) {
  .reservation__cht-2 {
    width: calc(640 / var(--pc-size) * var(--vw));
    transform: translate3d(-66%, -47%, 0);
  }
}.reservation__reservation-small-cards {
  width: calc(1184.65 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-83.5%, -43%, 0);
  z-index: 0;
  pointer-events: none;
}.reservation__reservation-small-cards img.animation {
  animation: updown-small-cards 10s infinite;
}@media (max-width: 480px) {
  .reservation__reservation-small-cards {
    width: calc(586 / var(--pc-size) * var(--vw));
    transform: translate3d(-49%, -61%, 0);
  }
}.reservation__reservation-card-left {
  width: calc(370.5 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-92%, -62%, 0);
  z-index: 30;
  pointer-events: none;
}@media (max-width: 480px) {
  .reservation__reservation-card-left {
    width: calc(200 / var(--pc-size) * var(--vw));
    transform: translate3d(17%, -116%, 0);
  }
}.reservation__reservation-card-left img.animation {
  animation: updown-left 8s infinite ease-in-out;
}.reservation__reservation-card-right {
  width: calc(330.6 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-240%, -85%, 0);
  z-index: 0;
  pointer-events: none;
}@media (max-width: 480px) {
  .reservation__reservation-card-right {
    width: calc(180 / var(--pc-size) * var(--vw));
    transform: translate3d(-97%, -116%, 0);
  }
}.reservation__reservation-card-right img.animation {
  animation: updown-right 8s infinite ease-in-out;
}.reservation__form-data {
  width: calc(380 / var(--pc-size) * var(--vw));
  padding-top: calc(19 / var(--pc-size) * var(--vw));
  gap: calc(14.25 / var(--pc-size) * var(--vw));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}@media (max-width: 480px) {
  .reservation__form-data {
    width: calc(300 / 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)) #ad00e7;
  font-size: calc(20 / var(--pc-size) * var(--vw));
  color: #f2cbff;
  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 {
    border-width: calc(1 / var(--pc-size) * var(--vw));
    padding: calc(10 / var(--pc-size) * var(--vw)) 0;
    font-size: calc(16 / 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:%23f2cbff"/></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 {
  outline: none;
  width: 100%;
  background-color: #000;
  border: solid calc(2 / var(--pc-size) * var(--vw)) #ad00e7;
  font-size: calc(20 / var(--pc-size) * var(--vw));
  color: #f2cbff;
  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: #f2cbff;
}@media (max-width: 480px) {
  .reservation__input {
    border-width: calc(1 / var(--pc-size) * var(--vw));
    padding: calc(10 / var(--pc-size) * var(--vw)) 0;
    font-size: calc(16 / var(--pc-size) * var(--vw));
    letter-spacing: 0;
  }
}@media (min-width: 481px) and (max-width: 767px) {
  .reservation__input {
    padding: calc(10 / 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(522.5 / var(--pc-size) * var(--vw));
  aspect-ratio: 1101/150;
  height: auto;
  background: transparent url("../png/reservation-btn-submit@2x.png") no-repeat center top;
  background-size: cover;
  position: relative;
  margin-inline: auto;
}@media (max-width: 480px) {
  .reservation__btn-submit {
    width: calc(300 / 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;
  margin-bottom: calc(28.5 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__remind {
    margin-bottom: calc(20 / var(--pc-size) * var(--vw));
    filter: drop-shadow(0 0 calc(3 / var(--pc-size) * var(--vw)) #000);
  }
}.reservation__remind li {
  font-size: calc(18 / var(--pc-size) * var(--vw));
  color: #f2cbff;
}@media (max-width: 480px) {
  .reservation__remind li {
    font-size: calc(15 / 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(427.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)) #ad00e7;
  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 {
    width: 100%;
    left: 0;
    border-width: calc(1 / var(--pc-size) * var(--vw));
    top: calc(43 / 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: #220f2c;
}@media (max-width: 480px) {
  .reservation__dropdown-item {
    padding: calc(8 / var(--pc-size) * var(--vw)) 0;
  }
}.reservation__prize-wrap {
  width: calc(68.4 / var(--pc-size) * var(--vw));
  height: calc(68.4 / var(--pc-size) * var(--vw));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: 480% -140%;
  z-index: 30;
}@media (max-width: 480px) {
  .reservation__prize-wrap {
    translate: 400% -150%;
    width: calc(40 / var(--pc-size) * var(--vw));
    height: calc(40 / var(--pc-size) * var(--vw));
  }
}.reservation__btn-prize {
  width: calc(68.4 / var(--pc-size) * var(--vw));
  height: calc(68.4 / var(--pc-size) * var(--vw));
  background: transparent url("../png/reservation-btn-prize@2x.png") no-repeat 0 0;
  background-size: 100%;
  position: relative;
  cursor: pointer;
}.reservation__btn-prize::after {
  width: 100%;
  height: 100%;
  background: transparent url("../png/reservation-btn-prize@2x.png") no-repeat 0 0;
  background-size: 100%;
  content: "";
  background-position: 0 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}.reservation__btn-prize.active::after {
  opacity: 1;
}@media (max-width: 480px) {
  .reservation__btn-prize {
    width: calc(40 / var(--pc-size) * var(--vw));
    height: calc(40 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list {
  box-sizing: border-box;
  width: calc(404.7 / var(--pc-size) * var(--vw));
  aspect-ratio: 426/504;
  background: transparent url("../png/reservation-prize-bg@2x.png") no-repeat 0 0;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
  translate: -30% 0;
  padding: calc(104.5 / var(--pc-size) * var(--vw)) calc(58.9 / var(--pc-size) * var(--vw)) 0;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: all 0.3s ease;
}.reservation__prize-list.active {
  opacity: 1;
  pointer-events: auto;
  translate: -30% 10%;
}@media (max-width: 480px) {
  .reservation__prize-list {
    translate: -95% 0;
    width: calc(280 / var(--pc-size) * var(--vw));
    padding-top: calc(70 / var(--pc-size) * var(--vw));
    padding-left: calc(45 / var(--pc-size) * var(--vw));
    padding-right: 0;
  }
  .reservation__prize-list.active {
    translate: -95% -8%;
  }
}.reservation__prize-list ul {
  list-style: none;
}.reservation__prize-list ul li {
  color: #fff;
  font-size: calc(16 / var(--pc-size) * var(--vw));
  padding-left: calc(38.95 / var(--pc-size) * var(--vw));
  position: relative;
}@media (max-width: 480px) {
  .reservation__prize-list ul li {
    font-size: calc(11 / var(--pc-size) * var(--vw));
    padding-left: calc(24 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:not(:last-child) {
  margin-bottom: calc(9.5 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:not(:last-child) {
    margin-bottom: calc(6 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li::before {
  width: calc(38.95 / var(--pc-size) * var(--vw));
  height: calc(38.95 / var(--pc-size) * var(--vw));
  left: 0;
  top: calc(-6.65 / var(--pc-size) * var(--vw));
  position: absolute;
  content: "";
  background: transparent url("../png/reservation-prize-all@2x.png") no-repeat 0 0;
  background-size: 100%;
}@media (max-width: 480px) {
  .reservation__prize-list ul li::before {
    width: calc(20 / var(--pc-size) * var(--vw));
    height: calc(20 / var(--pc-size) * var(--vw));
    top: calc(1 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:nth-child(2)::before {
  background-position: 0 calc(-38.95 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:nth-child(2)::before {
    background-position: 0 calc(-20 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:nth-child(3)::before {
  background-position: 0 calc(-77.9 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:nth-child(3)::before {
    background-position: 0 calc(-40 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:nth-child(4)::before {
  background-position: 0 calc(-116.85 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:nth-child(4)::before {
    background-position: 0 calc(-60 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:nth-child(5)::before {
  background-position: 0 calc(-155.8 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:nth-child(5)::before {
    background-position: 0 calc(-80 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:nth-child(6)::before {
  background-position: 0 calc(-194.75 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:nth-child(6)::before {
    background-position: 0 calc(-100 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:nth-child(7)::before {
  background-position: 0 calc(-233.7 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:nth-child(7)::before {
    background-position: 0 calc(-120 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:nth-child(8)::before {
  background-position: 0 calc(-272.65 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:nth-child(8)::before {
    background-position: 0 calc(-140 / var(--pc-size) * var(--vw));
  }
}.reservation__prize-list ul li:nth-child(9)::before {
  background-position: 0 calc(-311.6 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .reservation__prize-list ul li:nth-child(9)::before {
    background-position: 0 calc(-160 / var(--pc-size) * var(--vw));
  }
}.reservation__btn-close {
  cursor: pointer;
  width: calc(27.3 / var(--pc-size) * var(--vw));
  height: calc(27.3 / var(--pc-size) * var(--vw));
  background: transparent url("../png/icon-close@2x.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  right: calc(54.6 / var(--pc-size) * var(--vw));
  top: calc(63.7 / var(--pc-size) * var(--vw));
  font-size: 0;
}@media screen and (hover: hover) {
  .reservation__btn-close {
    transition: rotate 0.3s ease;
  }
  .reservation__btn-close:hover {
    rotate: 90deg;
  }
}@media (max-width: 480px) {
  .reservation__btn-close {
    width: calc(20 / var(--pc-size) * var(--vw));
    height: calc(20 / var(--pc-size) * var(--vw));
    right: calc(40 / var(--pc-size) * var(--vw));
    top: calc(40 / var(--pc-size) * var(--vw));
  }
}.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: #f2cbff;
  filter: drop-shadow(0 0 calc(3 / var(--pc-size) * var(--vw)) #000);
}@media (max-width: 480px) {
  .custom-checkbox {
    font-size: calc(16 / var(--pc-size) * var(--vw));
    padding-left: calc(22 / var(--pc-size) * var(--vw));
    padding-top: calc(1 / 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__btn-privacy {
  cursor: pointer;
  background-color: transparent;
  padding: 0;
  color: #f2cbff;
  border-bottom: solid calc(1 / var(--pc-size) * var(--vw)) #f2cbff;
}.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: #3d0f7a;
  transition: all 0.3s ease;
  border: solid calc(2 / var(--pc-size) * var(--vw)) #f2cbff;
}@media (max-width: 480px) {
  .custom-checkbox__checkmark {
    border-width: calc(1 / var(--pc-size) * var(--vw));
    width: calc(20 / var(--pc-size) * var(--vw));
    height: calc(20 / var(--pc-size) * var(--vw));
    top: calc(4 / 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("../png/icon-agree@3x.png") no-repeat center top;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}@media (max-width: 480px) {
  .custom-checkbox__checkmark:after {
    width: calc(18 / var(--pc-size) * var(--vw));
    height: calc(18 / var(--pc-size) * var(--vw));
  }
}@media (min-width: 481px) and (max-width: 767px) {
  .custom-checkbox__checkmark:after {
    width: calc(18 / var(--pc-size) * var(--vw));
    height: calc(18 / 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;
}.btn-detail {
  font-family: "Noto Serif TC", serif;
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 50%;
  translate: -260% -340%;
  cursor: pointer;
}@media (max-width: 480px) {
  .btn-detail {
    translate: -230% -440%;
  }
}.btn-detail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 90%;
  width: 0;
  translate: 0 -350%;
  height: calc(2 / var(--pc-size) * var(--vw));
  background-color: #000;
  transition: width 0.3s ease;
}@media (max-width: 480px) {
  .btn-detail::after {
    width: calc(60 / var(--pc-size) * var(--vw));
    height: calc(1 / var(--pc-size) * var(--vw));
  }
}@media (hover: hover) {
  .btn-detail:hover::after {
    width: calc(88 / var(--pc-size) * var(--vw));
  }
  .btn-detail:hover .btn-detail__icon::before {
    opacity: 1;
  }
  .btn-detail:hover .btn-detail__icon::after {
    rotate: 360deg;
    filter: brightness(0);
  }
  .btn-detail:hover .btn-detail__class-title {
    translate: 0 0;
    opacity: 1;
  }
  .btn-detail:hover .btn-detail__class-name {
    translate: 0 0;
    opacity: 1;
  }
}.btn-detail__icon {
  width: calc(81 / var(--pc-size) * var(--vw));
  height: calc(81 / var(--pc-size) * var(--vw));
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFxWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuYTZhNjM5NjhhLCAyMDI0LzAzLzA2LTExOjUyOjA1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REY2Q0YzNkM4NTNGMTFFRjlCRjU4N0I2OTk1ODdFOTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzU2ZGQ1NTctZDM1OS00NDI3LTkwM2YtODE2ZDRiYmUyMWQyIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6REY2Q0YzNkM4NTNGMTFFRjlCRjU4N0I2OTk1ODdFOTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjIgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNC0xMC0xOFQxNjozNToxOSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjQtMTAtMThUMTY6MzY6MDQrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMTAtMThUMTY6MzY6MDQrMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUYwNDI0NkQ5ODMxMTFFQkE0QjU5QTVBNjBDQUM2MDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUYwNDI0NkU5ODMxMTFFQkE0QjU5QTVBNjBDQUM2MDkiLz4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MzU2ZGQ1NTctZDM1OS00NDI3LTkwM2YtODE2ZDRiYmUyMWQyIiBzdEV2dDp3aGVuPSIyMDI0LTEwLTE4VDE2OjM2OjA0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMTIgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bOU9oQAAAw9JREFUeJzt3MFrE0EUx/Hfpsn2IqHFIEYxBynYs+DFFkHRFqT9C/xLqt5UxKv/g39Bg9AoLUjjRfBqhCIYtYnaYvHWTdr1oE+ClJjsvjfvTZjvfZbhQ2AnO7MbpWmKUL4K2hOYhAIiQwGRoYDIUEBkyDzizWuXy9pz+F+mEVeWFuZPlcvvVpcX17TnMiyziCtLC/PFuLT5tbN77vg4fWQZ0iQiAX5uf6x2u7vY2WlFliHNIQ4C7u9/BwAkyaFpSFOIJwFSliHNIA4DpKxCmkAcBZCyCKmOOA4gZQ1SFTELIPUP5F2hKY6UGmIeQGoA8qEmpAoiByBlAdI5IicgpQ3pFFECkNKEdIYoCUhpQTpB/AO4JQlIaUCKIw4AnpUGpFxDiiJqAFIuIcUQNQEpV5AiiBYAKReQ7IiWAClpSFZEi4CUJCQbomVASgqSBdEHQEoCMjeiT4AUN2QuRB8BKU7IzIg+A1JckJkQJwGQ4oDMhDhVKj47OPjhPSCVJIdotz9ExTh+cPvW1Svjjs+EeNTr35mZme1UKmeyDDdXHE+jVruY9pPk/vMXr9+MOz4TYr3RbPWT3o3zF2reQ8bxNObm5tNCIbq3vrH9OMs1Mt9YJgGSAxDIucTxGZILEGBYbPsIyQkIMP3t8wmSGxBgfADhA6QEIMD8KMwypBQgIPBQ1iKkJCAgtD1gCVIaEBDcqLIA6QIQEN4y1YR0BQg42LyvN5qto17/uktIl4CAo2Mk6xvb711BugYEHB5ocgGpAQg4PlonCakFCACRxucLVpcXL02ViltfPrWre3vfcl+PAKMIa/VG8wnDFMdK5bgx5y9SGxBQPPjOAWkBEFB+BSMPpBVAwMDLQFkgLQECBhCB8SCtAQJGEIHRIC0CAoYQgeGQVgEBY4jAyZCWAQGlxfYo0YK82+1UT89WzAIChhGBv5Cb/aT31CogYBwR+P1dnJev3v7UnsewzCP6kLkbi48FRIYCIkMBkaGAyFBAZCggMhQQGQqIDAVEhgIiQwGRoYDIUEBkKCAyFBAZCogM/QI74C03kg3C0gAAAABJRU5ErkJggg==") no-repeat center center;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}@media (max-width: 480px) {
  .btn-detail__icon {
    width: calc(60 / var(--pc-size) * var(--vw));
    height: calc(60 / var(--pc-size) * var(--vw));
  }
}.btn-detail__icon::before {
  width: 100%;
  height: 100%;
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAyIDc5LmE2YTYzOTY4YSwgMjAyNC8wMy8wNi0xMTo1MjowNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpERjZDRjM2Qzg1M0YxMUVGOUJGNTg3QjY5OTU4N0U5NCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNDA4N0ZCMTg1NDExMUVGOUJGNTg3QjY5OTU4N0U5NCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNDA4N0ZCMDg1NDExMUVGOUJGNTg3QjY5OTU4N0U5NCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjIuMiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNTZkZDU1Ny1kMzU5LTQ0MjctOTAzZi04MTZkNGJiZTIxZDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6REY2Q0YzNkM4NTNGMTFFRjlCRjU4N0I2OTk1ODdFOTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ctiaeAAALoUlEQVR42uyceXAT1xnA961tSZZsEkhgWieTBmi5sQTBGKlAW+iQQi7aZCAJiblrsDEYCwMGAybYQEs4SkPpEJhMT9J2evzTaTwgcwTLpYRpMBQjanNMZ/B0ROOQyT+ZWPt19719b99bSRxmkSVmd0aWdrXH25+++3trBACSvdzfItsIbIg2RBuivdgQbYhptmT35KDurovqXyQhJJF3SRLW5UeHWjK4Dxvfd06cMPbPn33++RuPPDH2EyvOCbcuG59peKe+k0+gjn1YaiSRXBskCeK3WwWw8U+HXCrAsCTL0/v06XP+f9fP9LPivOiRIXjsiQBCatUZMDB8WTwIwNuy+g6zBOBfDv/MNW3qpGYV4Fh9U0G/fn3P/7ej5TFrQA5NAhBSCJGTRNDfs/oOtwTg4UO7XC9OnxrmANKlYMCA/q03LjdbAlLTGDPAniZvcg/lUACY3W+EJQAPvdOQO+sHM8JIlscQUY97FXz1KwNar188bglITXNEgCmWRAow57GRlgDcv6sud+6cl8NyVtaYO+xa8NSTT7R2tDY9bolnVTWIAuwVSXQ8PsoSgHu21bgXzZsdzpJlH7mTO95NwaCnnzzX/vFRS0DmqJrUK5Lo7D/aEoBvb6l2l5eWNGdnZfkEm5tYnbmXVDB44FPnIh81WgLSoWpUTyUR9aQUhkhAeN/LtrqgO1ixkAFEwh+gK7cJtRQtOr1x6fIV7/Dx029aEkf2gEevZSwNG1e6V5bNUwHKvngBJPZJURT9Mwif6boGWd2tYOiQQecunP5r/966l16RxC3rl7tXrVjU7MhxGBLI21vxaqbYCjHbRXMlYkXhxsVLHb5C//PRVEtiyiHW1SzzrK5cfMrhIACpIUJITpozID48TR4uaMuNC23tPt83X4w+tBA3rS33VK9YhAEiXerIuRAevPYZJRPCJBTB/Amkzott7V7vxJeiDx3EjWvKPKuWLyQAUTwlZIJmXAOZbhDY9wDAsRNgdv6rrcM7dtLM6EMDcePqMk9wxQLNBnp5D6xdW9bOhaSknhjdXhDFrZozwhKNYXReunTFO2by96MZD3HD6qWe4HICENs/DhjPTrOJvI2UknGF5FAxPIUrJqiq3Xapw/vMt1+OZizE2uol7qqK+WENoIYIKDBGzgSUg0czCP5a+DdABmezw9HjRiKRVO11kOOmvBLNOIjrV5W6q5bND+fk5HAAEQtMKVBZk0Cau6LbKTO/TTGEVtHVF9tIhTgn/ZYUHYqs2chIh7d4yqxoxkBcHyx1V5bPCzscBCC2f0iKB4jtorYOCc5LgCtkkGyrYlLmxMNnUihIpAbS/91Xo2kPcV3whwQglkAkSJiswyTSgQSg9Pt7vTklDhqv4IipOVNtDeS016NpC7GmarG7cmlJOCehBCIsFfRYBJyN5FSQt380MSVjpD0c/VgQJQ+fG3i42jpidlUhrltb77x4+ap34rNzomkHsWblQhXg3HC2CSAPiwIg3wGXvCNDatBtwukEzoaCi+kxpAaO3hMgfh9FUqgTAwWDnDz9zWjaQFynSmBF6RxVAtU4ELhwA/SgWJdGAAMu7qzxgTSi/kXMj+90gwi4wFs9JqZnPprUxf94oDsgAjLy72veSTNKor0Ocb1qA8sXv4ZtIACVJpB4aWSBDYCg3obdIuqIu4UJ7CKVaF46Y2zcRsmMgRKE2JBcAKroLI7qvNx+zTv5ubnRXoNYW13qXrpgdjgnO9sLLN6jqoQ46SPrRH1BV2JgnhYxm5e4hsiPEczBuL6OzZ2s21YOsEJB6n8RksRUUXU27VeuFk5+bv7NlEOsW1uWu3DuK+GcrGwfli7gPCIS7k9Qb0PP4ziIsSAidUPE6oxiqkID7/jMGfFVHS4QN7UdgPxo+v6dHVf+U/it5+fdTBnErbXLc0ten6lKYJZPHLzEVfiQBMYt6ZImAgTFVCdEfFkLOPModoXpYVm8pOtksX2kBQqFqzaCGKyzH9QYfee1652FE2e8eTMlEK+eazyQ63IuhjiJMJBolkcGPSdmkgm6KQJzGs2+B84Ty3hfhBUfJamLKcAF6rQqThQXn1ShtlKXRNHsIHYO/ezHv1Y47TspaQ8c/OUfK7744stmHMQiMghF/awoMSmmvrR31fLjEn5M6ZZi3V9K3d3qeyzGXhLeX2Hr3d3aceoxMQW/AB+r4PNpRQWyL9lGrqe3DBRSdMDHAfmOtBbINojF8LnI/up3+HzkWvi6sW4cjKuvSKTj6kspbQ+ULZrtDJbPb3I4sgNUAgT7x1luAEOpgY+kmdck+S8yRTggtAE4lQeJSTRvR5kNZVNbDNtHLyt0RhHQc0UutLWPnzlnxWcp984lr73gqq0qDTldjgA/OgBzR0Q06Aoy1MAw+IiLqHm4iPsK4r0QBc47tvh6N5ZWZnaFmTco8nFrW/GsBdW3ei1OnDVzWu7mmmUhl8vhF6v0IDgPhExSmDic1m0h0ourRvaR0EsLNTLxpCTN46Wa2FXgKnDqYZEzZ88Xl5TV3ur1jOWFZye7t9dVaSAnxLc8gEhBAreAOFMPYtzMOQnyOdmPkKiJxU+bS3ID2j6RD1vOTlhSVf9p2uTO35vid+94K9jkcrmKSbhBQhx6fpmzf0xKqbpymY6JBmcKkCns4RkZUosQp74CNFr5xs4wcvzURxMq1mz/NO2qOFMnFXl21Fc3uV3O8SYlZRrHOxz++7iyvy6FKNFNmrMOerxJ/SWuXYCM5lYkdPK0v6p2Z1fa1hMnTfDl7WpY2+R2O4uQCQpvwpgac7BofMeDAjB195I4D+BiQSmhiuOjIkeOt/jXbP5JV9pXtgNFo/N2b13T5M51FYGewiFdxYDLKphnBpOXZTrJbUei2wdTiYyqKj23xGwpga8qcaSxqTmwoWHfJxnTYyl+ZlTenvrVx9we1zg2h4Z15OJ9M5i8LfXOooNATP2R6ab5LI7O5zGkF0U+UAFu2rb/jpPn067bVzRmRP6u+lWqaueO4wNkYvSpGiNebFgVmzeicdNLuJwauECbz70RK8yqAI+eCmze8e5dPX2Qln3ncb7h+Tvrg00et3scmcnF3TwIrkUooMZoE17fX2gngFGEwENRwKgScu0HdVukMdQc2LLz0F0/vpG2MyDGjPpG/s6G6pAH20ijhkhbmhQKou0EvXjLnIoOkA5V5hpU5r4KV/zVAPobdr/XdS9jTeu5OL6RX8/fsSUY0pyN0Qo16sx8D8WIlUEHBvF5nvAXxaVyHxw5FfjR3l/c8wNEaT8rrFAF+eO6ypBqI4tYjdDUU6ZeHHf5TA6IopK5miJwVWxdKiN/C4UDO975VY+ewMqI+Ymjhw/O3163POR2qSAlU15smsHPV6NlvaMn49Yr5335So+i2sBjLYG39/26x4+wZQREbRk1bFD+1g0VoTy3q4iqY0yoghtpG7WdiGtW8bMiFKMwqoYxLYFd+397X88AZgxEbRk5bGB+/fpyVbVdRUJjQQ9xjFkLwE0dITAVYNE33Rw5cuzvgd0/P3zfD1FmFEQK8q21S0MejyaRRrwHnL1k9k+IGQ1XjRQV4InTgT0H3rfmKdRMg4hBDh2Yv3ntEiKRuremATmbsqgkK3tBpOnEP/x7Dvyuy6rxZCREAvLp/E2rS0O5LmcRKygoolNR4oo/KsCTZ/x7D/6+y8qxZCxEbRmhgqwLLg45c51FAKbQhXb9jIqPVg+0HGDGQ6Qg11XOVyVSt5E0VUHAij1aSf9k81n/Tw/9oetBjCHjIWKQQ57Oq6mcp6n2eCPdY9lI5ETLP/37Dj4YgA8NRN1G5q2pKAm5WIWcVKSbT597ICr8UELEKeKwQXlV5W8cdTlzirVcOHym1b/33QcLsKcQhYcO7/aVqsU7YrDnvb0bfrOy9NVHU3XNnvBA9n+tu//F/udCNkQbog3RXmyINkQbog3RXmyINkQbog3RXmyINkQbog3RXmyINsTMWv4vwACdcho1PHGeCQAAAABJRU5ErkJggg==") no-repeat center center;
  background-size: cover;
  left: 0;
  top: 0;
  content: "";
  opacity: 0;
  transition: opacity 0.3s ease;
}@media (max-width: 480px) {
  .btn-detail__icon::before {
    opacity: 1;
  }
}.btn-detail__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -70%;
  transition: all 0.3s ease;
  width: calc(24 / var(--pc-size) * var(--vw));
  height: calc(24 / var(--pc-size) * var(--vw));
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAylpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAyIDc5LmE2YTYzOTY4YSwgMjAyNC8wMy8wNi0xMTo1MjowNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEyIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkRGNkNGMzY3ODUzRjExRUY5QkY1ODdCNjk5NTg3RTk0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkRGNkNGMzY4ODUzRjExRUY5QkY1ODdCNjk5NTg3RTk0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6REY2Q0YzNjU4NTNGMTFFRjlCRjU4N0I2OTk1ODdFOTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6REY2Q0YzNjY4NTNGMTFFRjlCRjU4N0I2OTk1ODdFOTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6A4aP+AAAAQ0lEQVR42mJUkOJmIBbcv3XuP4hWVDNiJFYPEwONwagFoxaMWsDAwEhKTh6cPvj/5eb/kRMHo6XpqAWjFgxSCwACDAABggzH3NwTywAAAABJRU5ErkJggg==") no-repeat center center;
  background-size: cover;
}@media (max-width: 480px) {
  .btn-detail__icon::after {
    width: calc(16 / var(--pc-size) * var(--vw));
    height: calc(16 / var(--pc-size) * var(--vw));
    background-size: cover;
    rotate: 360deg;
    filter: brightness(0);
  }
}.btn-detail__class-title {
  white-space: nowrap;
  font-size: calc(20 / var(--pc-size) * var(--vw));
  position: absolute;
  top: calc(2 / var(--pc-size) * var(--vw));
  left: calc(80 / var(--pc-size) * var(--vw));
  font-weight: 700;
  translate: 0 20%;
  opacity: 0;
  transition: all 0.3s ease;
}@media (max-width: 480px) {
  .btn-detail__class-title {
    translate: 0 0;
    opacity: 1;
    left: calc(54 / var(--pc-size) * var(--vw));
    top: calc(4 / var(--pc-size) * var(--vw));
    font-size: calc(14 / var(--pc-size) * var(--vw));
  }
}.btn-detail__class-name {
  font-weight: 700;
  white-space: nowrap;
  font-size: calc(30 / var(--pc-size) * var(--vw));
  position: absolute;
  top: calc(34 / var(--pc-size) * var(--vw));
  left: calc(75 / var(--pc-size) * var(--vw));
  translate: 0 -20%;
  opacity: 0;
  transition: all 0.3s ease;
}@media (max-width: 480px) {
  .btn-detail__class-name {
    translate: 0 0;
    opacity: 1;
    top: calc(26 / var(--pc-size) * var(--vw));
    left: calc(54 / var(--pc-size) * var(--vw));
    font-size: calc(18 / var(--pc-size) * var(--vw));
  }
}@keyframes updown-left {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8%) rotate(3deg);
  }
  100% {
    transform: translateY(0);
  }
}@keyframes updown-right {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8%) rotate(-3deg);
  }
  100% {
    transform: translateY(0);
  }
}@keyframes updown-small-cards {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0);
  }
}@keyframes glow {
  0% {
    filter: drop-shadow(0 0 0 #e1ffaf);
  }
  50% {
    filter: drop-shadow(0 0 15px #e1ffaf);
  }
  100% {
    filter: drop-shadow(0 0 0 #e1ffaf);
  }
}.transfer {
  font-family: "Noto Sans TC", sans-serif;
  width: 100%;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  background: #000 url("../jpg/transfer-bg.jpg") no-repeat center top;
  background-size: cover;
  position: relative;
  overflow: hidden;
}@media (max-width: 480px) {
  .transfer {
    background-image: url("../jpg/transfer-bg-m.jpg");
    background-position: center center;
    background-size: 100% auto;
    height: 100dvh;
  }
}@media (min-width: 481px) and (max-width: 767px) {
  .transfer {
    height: calc(var(--vh, 1vh) * 100);
  }
}@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
  .transfer {
    height: calc(var(--vh, 1vh) * 100);
  }
}@media (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
  .transfer {
    height: calc(var(--vh, 1vh) * 60);
  }
}@media (min-width: 993px) and (max-width: 1200px) and (orientation: portrait) {
  .transfer {
    height: calc(var(--vh, 1vh) * 70);
  }
}.transfer__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -53%, 0);
  z-index: 50;
}@media (max-width: 480px) {
  .transfer__content {
    transform: translate3d(-50%, -50%, 0);
  }
}.transfer__main-title {
  width: calc(1254 / var(--pc-size) * var(--vw));
  margin-inline: auto;
  position: relative;
}@media (max-width: 480px) {
  .transfer__main-title {
    width: calc(460 / var(--pc-size) * var(--vw));
  }
}.transfer__sub-title {
  width: calc(1282.5 / var(--pc-size) * var(--vw));
  margin-inline: auto;
  margin-block-end: calc(26.6 / var(--pc-size) * var(--vw));
  position: relative;
}@media (max-width: 480px) {
  .transfer__sub-title {
    width: calc(520 / var(--pc-size) * var(--vw));
    margin-bottom: calc(12 / var(--pc-size) * var(--vw));
  }
}.transfer__detail {
  width: calc(1195.1 / var(--pc-size) * var(--vw));
  margin-inline: auto;
}@media (max-width: 480px) {
  .transfer__detail {
    width: 100vw;
  }
}.transfer__swiper {
  width: 100%;
}.transfer__detail-block {
  width: calc(574.75 / var(--pc-size) * var(--vw));
  aspect-ratio: 1210/1096;
  background: transparent url("../png/transfer-frame@2x.png") no-repeat 0 0;
  background-size: cover;
  margin-inline: calc(11.4 / var(--pc-size) * var(--vw));
  padding-top: calc(19 / var(--pc-size) * var(--vw));
  position: relative;
}@media (max-width: 480px) {
  .transfer__detail-block {
    width: calc(360 / var(--pc-size) * var(--vw));
    background-size: 100%;
    margin-inline: auto;
  }
}.transfer__detail-title {
  width: auto;
  height: calc(62.7 / var(--pc-size) * var(--vw));
  display: flex;
  justify-content: center;
}@media (max-width: 480px) {
  .transfer__detail-title {
    height: calc(40 / var(--pc-size) * var(--vw));
  }
}.transfer__detail-title img {
  width: auto;
  height: 100%;
}.transfer__detail-cht {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(574.75 / var(--pc-size) * var(--vw));
  aspect-ratio: 605/548;
  mask-image: url("../png/transfer-frame-mask.png");
  mask-position: 0 0;
  mask-size: cover;
  mask-repeat: no-repeat;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}@media (max-width: 480px) {
  .transfer__detail-cht {
    width: calc(360 / var(--pc-size) * var(--vw));
  }
}.transfer__detail-cht img {
  pointer-events: none;
  position: absolute;
  max-width: calc(573.8 / var(--pc-size) * var(--vw));
  left: 50%;
  top: 50%;
  translate: -45% -48%;
  mix-blend-mode: multiply;
}@media (max-width: 480px) {
  .transfer__detail-cht img {
    max-width: calc(361 / var(--pc-size) * var(--vw));
    translate: -46.5% -44.5%;
  }
}.transfer__detail-text {
  margin-block-start: calc(62.7 / var(--pc-size) * var(--vw));
  margin-block-end: calc(38 / var(--pc-size) * var(--vw));
  position: relative;
  z-index: 10;
  padding-left: calc(66.5 / var(--pc-size) * var(--vw));
  color: #fff;
  font-family: "Noto Serif TC", serif;
  font-size: calc(26.6 / var(--pc-size) * var(--vw));
  font-weight: 700;
}@media (max-width: 480px) {
  .transfer__detail-text {
    margin-block-start: calc(50 / var(--pc-size) * var(--vw));
    margin-block-end: calc(20 / var(--pc-size) * var(--vw));
    padding-left: calc(40 / var(--pc-size) * var(--vw));
    font-size: calc(16 / var(--pc-size) * var(--vw));
  }
}.transfer__detail-text::before {
  width: 0;
  height: 0;
  border-top: calc(7.6 / var(--pc-size) * var(--vw)) solid transparent;
  border-bottom: calc(7.6 / var(--pc-size) * var(--vw)) solid transparent;
  border-left: calc(15.2 / var(--pc-size) * var(--vw)) solid #fff;
  position: absolute;
  left: calc(38 / var(--pc-size) * var(--vw));
  top: calc(13.3 / var(--pc-size) * var(--vw));
  content: "";
}@media (max-width: 480px) {
  .transfer__detail-text::before {
    left: calc(24 / var(--pc-size) * var(--vw));
    border-top: calc(4 / var(--pc-size) * var(--vw)) solid transparent;
    border-bottom: calc(4 / var(--pc-size) * var(--vw)) solid transparent;
    border-left: calc(8 / var(--pc-size) * var(--vw)) solid #fff;
  }
}.transfer__intro-video {
  width: calc(500.65 / var(--pc-size) * var(--vw));
  aspect-ratio: 527/140;
  background: transparent url("../png/transfer-video-bg@2x.png") no-repeat 0 0;
  background-size: cover;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 20;
  filter: drop-shadow(0 0 calc(7.6 / var(--pc-size) * var(--vw)) rgba(255, 255, 255, 0.9));
}@media (max-width: 480px) {
  .transfer__intro-video {
    aspect-ratio: 660/174;
    width: calc(310 / var(--pc-size) * var(--vw));
  }
}.transfer__btn-play {
  cursor: pointer;
  width: calc(101.65 / var(--pc-size) * var(--vw));
  aspect-ratio: 1/1;
  background: transparent url("../png/transfer-btn-play@2x.png") no-repeat 0 0;
  background-size: cover;
  transition: scale 0.3s;
}@media (hover: hover) {
  .transfer__btn-play:hover {
    scale: 1.1;
  }
}@media (max-width: 480px) {
  .transfer__btn-play {
    width: calc(70 / var(--pc-size) * var(--vw));
  }
}.transfer__video-wrap {
  position: relative;
  background-color: #000;
  width: calc(456 / var(--pc-size) * var(--vw));
  aspect-ratio: 640/491;
  filter: drop-shadow(0 0 calc(7.6 / var(--pc-size) * var(--vw)) rgba(255, 255, 255, 0.4));
  margin-inline: auto;
  margin-block-start: calc(9.5 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .transfer__video-wrap {
    width: calc(270 / var(--pc-size) * var(--vw));
  }
}.transfer__video-nav {
  position: relative;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: calc(19 / var(--pc-size) * var(--vw));
}@media (max-width: 480px) {
  .transfer__video-nav {
    padding-top: calc(12 / var(--pc-size) * var(--vw));
  }
}.transfer__btn-video {
  width: calc(162.45 / var(--pc-size) * var(--vw));
  aspect-ratio: 171/42;
  cursor: pointer;
  font-size: 0;
  transition: all 0.3s;
}@media (max-width: 480px) {
  .transfer__btn-video {
    width: calc(94 / var(--pc-size) * var(--vw));
  }
}.transfer__btn-video.video-1 {
  background: transparent url("../png/transfer-video-btn-link-1@2x.png") no-repeat 0 0;
  background-size: 100% auto;
}.transfer__btn-video.video-2 {
  background: transparent url("../png/transfer-video-btn-link-2@2x.png") no-repeat 0 0;
  background-size: 100% auto;
}.transfer__btn-video.video-3 {
  background: transparent url("../png/transfer-video-btn-link-3@2x.png") no-repeat 0 0;
  background-size: 100% auto;
}@media (hover: hover) {
  .transfer__btn-video:hover {
    filter: brightness(1.5);
  }
}.transfer__btn-video.active {
  pointer-events: none;
  filter: brightness(1.5);
}.transfer__cus-swiper-button-next {
  position: absolute;
  right: calc(30 / var(--pc-size) * var(--vw));
  top: 50%;
  aspect-ratio: 88/122;
  width: calc(44 / var(--pc-size) * var(--vw));
  background: transparent url("../png/btn-nav-bg.png") no-repeat 100% 0;
  background-size: 200%;
  translate: 0 40%;
  z-index: 100;
}.transfer__cus-swiper-button-next.swiper-button-disabled {
  opacity: 0.5;
}.transfer__cus-swiper-button-prev {
  position: absolute;
  left: calc(30 / var(--pc-size) * var(--vw));
  top: 50%;
  aspect-ratio: 88/122;
  width: calc(44 / var(--pc-size) * var(--vw));
  background: transparent url("../png/btn-nav-bg.png") no-repeat 0 0;
  background-size: 200%;
  translate: 0 40%;
  z-index: 100;
}.transfer__cus-swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
}.transfer__loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}.transfer__loading.active {
  opacity: 1;
}.video-loader {
  width: calc(32 / var(--pc-size) * var(--vw));
  height: calc(32 / var(--pc-size) * var(--vw));
  border: calc(2 / var(--pc-size) * var(--vw)) solid #666;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}