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

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

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

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

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

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

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

:root {
  --ds: 480;
  --ratio: calc(100vw / var(--ds));
}
@media (min-width: 768px) {
  :root {
    --ds: 992;
  }
}
@media (min-width: 1024px) {
  :root {
    --ds: 1700;
  }
}

html {
  font-size: 10px;
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
html.hidden {
  pointer-events: none;
  overflow: hidden;
}

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

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

.site-main {
  position: relative;
  z-index: 10;
  background-color: #2e0b30;
  overflow: hidden;
}

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

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

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

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

.logoArea .logoArea__link:nth-child(3) {
  display: none;
}

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

.site-header {
  background: linear-gradient(90deg, rgb(59, 11, 28) 0%, rgb(36, 10, 95) 100%);
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  padding-top: calc(4 * var(--ratio));
  padding-bottom: calc(4 * var(--ratio));
  padding-left: calc(20 * var(--ratio));
  padding-right: calc(20 * var(--ratio));
  z-index: 120;
}
@media (min-width: 768px) {
  .site-header {
    padding-top: calc(4 * var(--ratio));
    padding-bottom: calc(4 * var(--ratio));
  }
}
.site-header__inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.site-header__logo {
  display: block;
  width: calc(90 * var(--ratio));
}
@media (min-width: 768px) {
  .site-header__logo {
    width: calc(108 * var(--ratio));
  }
}
.site-header__nav {
  display: flex;
  gap: calc(6 * var(--ratio));
}
.site-header__btn {
  width: calc(30 * var(--ratio));
  aspect-ratio: 1/1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  background: transparent url("../images/header-icons@2x.png") no-repeat 0 0;
  background-size: 400% auto;
  filter: drop-shadow(0 0 0.6rem rgba(255, 255, 255, 0));
}
.site-header__btn.fb {
  background-position: 0 0;
}
.site-header__btn.ig {
  background-position: 33.33% 0;
}
.site-header__btn.yt {
  background-position: 66.66% 0;
}
.site-header__btn.sfx {
  background-position: 100% 0;
  cursor: pointer;
}
.site-header__btn.sfx.playing {
  background-position: 100% 100%;
}
@media (hover: hover) {
  .site-header__btn:hover.fb {
    background-position: 0 100%;
  }
  .site-header__btn:hover.ig {
    background-position: 33.33% 100%;
  }
  .site-header__btn:hover.yt {
    background-position: 66.66% 100%;
  }
}
@media (min-width: 768px) {
  .site-header__btn {
    width: calc(44 * var(--ratio));
  }
}

.fixed-nav {
  width: calc(160 * var(--ratio));
  background-color: #4762a8;
  position: fixed;
  left: 0;
  top: calc(52 * var(--ratio));
  transform: translate3d(-100%, 0, 0);
  z-index: 120;
  flex-direction: column;
  gap: calc(2 * var(--ratio));
  transition: transform 300ms ease;
  display: none;
}
@media (min-width: 768px) {
  .fixed-nav {
    display: flex;
    width: calc(220 * var(--ratio));
    top: calc(60 * var(--ratio));
  }
}
.fixed-nav.active {
  transform: translate3d(0, 0, 0);
}
.fixed-nav__btn-toggle {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(40 * var(--ratio));
  aspect-ratio: 1/1;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 0;
  transform: translate3d(100%, 0, 0);
  z-index: 120;
  cursor: pointer;
  transition: transform 300ms ease;
}
.fixed-nav__btn-toggle::after {
  content: "";
  position: absolute;
  background: transparent url("../images/fixed-btn-toggle@2x.png") no-repeat 0 0;
  background-size: cover;
  aspect-ratio: 1/1;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
  width: calc(10 * var(--ratio));
  transition: transform 300ms ease;
}
@media (min-width: 768px) {
  .fixed-nav__btn-toggle::after {
    width: calc(16 * var(--ratio));
  }
}
.fixed-nav__btn-toggle.active::after {
  transform: translate3d(-42%, -50%, 0) rotate(180deg);
}
@media (hover: hover) {
  .fixed-nav__btn-toggle:hover::after {
    transform: translate3d(-50%, -50%, 0) rotate(0);
  }
}
@media (min-width: 768px) {
  .fixed-nav__btn-toggle {
    width: calc(60 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .fixed-nav__btn-toggle {
    width: calc(60 * var(--ratio));
  }
}
.fixed-nav__btn-event {
  font-size: 0;
  width: 100%;
  display: block;
  aspect-ratio: 266/107;
  background: transparent url("../images/fixed-nav-event.jpg") no-repeat 0 100%;
  background-size: 100% auto;
  position: relative;
}
.fixed-nav__btn-event::after {
  width: 100%;
  height: 100%;
  background: transparent url("../images/fixed-nav-event.jpg") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  content: "";
  opacity: 0;
  transition: opacity 300ms ease;
}
@media (hover: hover) {
  .fixed-nav__btn-event:hover::after {
    opacity: 1;
  }
}
.fixed-nav__nav-toggle {
  width: 100%;
  cursor: pointer;
  aspect-ratio: 266/107;
  background: transparent url("../images/fixed-nav-main.jpg") no-repeat 0 100%;
  background-size: 100% auto;
  position: relative;
}
.fixed-nav__nav-toggle::after {
  width: 100%;
  height: 100%;
  background: transparent url("../images/fixed-nav-main.jpg") no-repeat 0 0;
  background-size: 100% auto;
  position: absolute;
  content: "";
  opacity: 0;
  transition: opacity 300ms ease;
}
.fixed-nav__nav-toggle.is-open::after {
  opacity: 1;
}
@media (hover: hover) {
  .fixed-nav__nav-toggle:hover::after {
    opacity: 1;
  }
}
.fixed-nav__nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--ratio));
  overflow: hidden;
  display: none;
}
.fixed-nav__nav.is-open {
  display: block;
}
.fixed-nav__btn-link {
  width: 100%;
  background: transparent url("../images/fixed-nav-bg-2.jpg") no-repeat 0 0;
  background-size: 200% auto;
  aspect-ratio: 266/54;
  font-size: 0;
  display: block;
  position: relative;
  transition: transform 300ms ease;
}
.fixed-nav__btn-link::after {
  background: transparent url("../images/fixed-nav-bg-2.jpg") no-repeat 100% 0;
  background-size: 200% auto;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transition: opacity 300ms ease;
  opacity: 0;
}
@media (hover: hover) {
  .fixed-nav__btn-link:hover::after {
    opacity: 1;
  }
}
.fixed-nav__btn-link.active {
  pointer-events: none;
}
.fixed-nav__btn-link.active::after {
  opacity: 1;
}
.fixed-nav__btn-link.fixed-image-video::after {
  background-position: 100% 0;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-image-video:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-lottery {
  background-position: 0 16.66%;
}
.fixed-nav__btn-link.fixed-lottery::after {
  background-position: 100% 16.66%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-lottery:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-skills {
  background-position: 0 33.32%;
}
.fixed-nav__btn-link.fixed-skills::after {
  background-position: 100% 33.32%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-skills:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-present {
  background-position: 0 49.98%;
}
.fixed-nav__btn-link.fixed-present::after {
  background-position: 100% 49.98%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-present:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-event {
  background-position: 0 66.64%;
}
.fixed-nav__btn-link.fixed-event::after {
  background-position: 100% 66.64%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-event:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-souvenir {
  background-position: 0 83.3%;
}
.fixed-nav__btn-link.fixed-souvenir::after {
  background-position: 100% 83.3%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-souvenir:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-download {
  background-position: 0 99.96%;
}
.fixed-nav__btn-link.fixed-download::after {
  background-position: 100% 99.96%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-download:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-download {
  cursor: pointer;
}

.index {
  background-color: #465da3;
  aspect-ratio: 768/1454;
  position: relative;
  overflow: hidden;
  background: transparent url("../images/index-bg-m.jpg") no-repeat center top;
  background-size: 100%;
}
.index::after {
  content: "";
  width: 100%;
  height: 100%;
  background: transparent url("../images/index-video-overlay.png") no-repeat center top;
  background-size: cover;
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .index::after {
    background: transparent url("../images/index-video-overlay-md.png") no-repeat center top;
    background-size: auto 100%;
  }
}
@media (min-width: 768px) {
  .index {
    background: transparent url("../images/index-bg-d.jpg") no-repeat center top;
    background-size: auto 100%;
    aspect-ratio: 1200/1041;
  }
}
@media (min-width: 1024px) {
  .index {
    aspect-ratio: 1920/1041;
  }
}
.index__main-title {
  width: calc(420 * var(--ratio));
  left: 50%;
  top: 50%;
  translate: -43% -56%;
  z-index: 40;
  position: absolute;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 10;
}
@media (min-width: 768px) {
  .index__main-title {
    width: calc(370 * var(--ratio));
    translate: -44% -58%;
  }
}
@media (min-width: 1024px) {
  .index__main-title {
    width: calc(400 * var(--ratio));
  }
}
.index__btn-download-outer {
  width: calc(410 * var(--ratio));
  aspect-ratio: 490/256;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 50%;
  z-index: 20;
  transition: scale 300ms ease;
}
@media (min-width: 768px) {
  .index__btn-download-outer {
    width: calc(360 * var(--ratio));
    translate: -50% 36%;
  }
}
@media (min-width: 1024px) {
  .index__btn-download-outer {
    width: calc(400 * var(--ratio));
  }
}
@media (hover: hover) {
  .index__btn-download-outer:hover a {
    animation-play-state: running;
  }
}
.index__btn-download {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent url("../images/index-btn-download-m.png") no-repeat 0 100%;
  background-size: 100% auto;
  font-size: 0;
  animation: bounceAnimation 800ms infinite paused;
  position: relative;
}
@media (min-width: 768px) {
  .index__btn-download {
    background: transparent url("../images/index-btn-download.png") no-repeat 0 0;
    background-size: 100% auto;
  }
}
.index__video {
  width: calc(1186 * var(--ratio));
  aspect-ratio: 1920/1080;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 2%, 0);
  z-index: 0;
  display: none;
}
@media (min-width: 768px) {
  .index__video {
    width: calc(1600 * var(--ratio));
    transform: translate3d(-50%, 0, 0);
    height: auto;
    display: block;
  }
}
@media (min-width: 1024px) {
  .index__video {
    width: calc(1920 * var(--ratio));
    transform: translate3d(-50%, 0%, 0);
    height: auto;
  }
}
.index__video video {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  pointer-events: none;
}
.index__cht-left {
  width: calc(850 * var(--ratio));
  left: 50%;
  top: 50%;
  translate: -76% -78%;
  z-index: 4;
  position: absolute;
}
@media (min-width: 768px) {
  .index__cht-left {
    width: calc(770 * var(--ratio));
    translate: -85% -66%;
  }
}
@media (min-width: 1024px) {
  .index__cht-left {
    width: calc(840 * var(--ratio));
  }
}
.index__cht-right {
  width: calc(730 * var(--ratio));
  left: 50%;
  top: 50%;
  translate: -26% -39%;
  z-index: 4;
  position: absolute;
}
@media (min-width: 768px) {
  .index__cht-right {
    width: calc(640 * var(--ratio));
    translate: -11% -60%;
  }
}
@media (min-width: 1024px) {
  .index__cht-right {
    width: calc(690 * var(--ratio));
  }
}
.index__overlay {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent url("../images/index-overlay-bg.png") no-repeat center center;
  background-size: cover;
  z-index: 2;
  width: 100%;
  height: 100%;
}

@keyframes glowAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes buttonAnimation {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.01;
  }
}
@keyframes pulseAnimation {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes bounceAnimation {
  0%, 100% {
    scale: 1;
  }
  50% {
    scale: 1.1;
  }
}
.image-video {
  background: #2b5302 url("../images/image-video-bg-m--.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/562;
  padding-top: calc(30 * var(--ratio));
  position: relative;
  z-index: 5;
}
@media (min-width: 768px) {
  .image-video {
    background: #2b5302 url("../images/image-video-bg-d.jpg") no-repeat center top;
    background-size: auto 100%;
    aspect-ratio: 1200/919;
    padding-top: calc(66 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .image-video {
    aspect-ratio: 1920/919;
  }
}
.image-video__main-title {
  width: calc(140 * var(--ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  .image-video__main-title {
    width: calc(320 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .image-video__main-title {
    width: calc(340 * var(--ratio));
  }
}
.image-video__cht {
  width: calc(152 * var(--ratio));
  position: absolute;
  right: 0;
  top: 0;
  translate: 0 -18%;
  z-index: 0;
}
@media (min-width: 768px) {
  .image-video__cht {
    width: calc(430 * var(--ratio));
    translate: 32% -18%;
  }
}
@media (min-width: 1024px) {
  .image-video__cht {
    width: calc(470 * var(--ratio));
    right: inherit;
    left: 50%;
    translate: 44% -18%;
  }
}
.image-video__wrap {
  width: calc(360 * var(--ratio));
  aspect-ratio: 604/340;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: calc(4 * var(--ratio));
}
.image-video__wrap::before {
  content: "";
  background: linear-gradient(180deg, rgb(255, 254, 255) 0%, rgb(250, 208, 100) 100%);
  width: calc(100% + 8 * var(--ratio));
  height: calc(100% + 8 * var(--ratio));
  box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 0;
  left: calc(-4 * var(--ratio));
  top: calc(-4 * var(--ratio));
}
@media (min-width: 768px) {
  .image-video__wrap {
    width: calc(788 * var(--ratio));
    translate: -50% -47%;
    padding: calc(8 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .image-video__wrap {
    width: calc(848 * var(--ratio));
    translate: -50% -47%;
  }
}
.image-video__wrap iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 30;
}

.lottery {
  background: #cfab42 url("../images/lottery-bg-m.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/625;
  padding-top: calc(12 * var(--ratio));
  position: relative;
  z-index: 5;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .lottery {
    background: #cfab42 url("../images/lottery-bg-d.jpg") no-repeat center top;
    background-size: auto 100%;
    aspect-ratio: 1200/1184;
    padding-top: calc(120 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .lottery {
    aspect-ratio: 1920/1184;
    padding-top: calc(126 * var(--ratio));
  }
}
.lottery__main-title {
  width: calc(140 * var(--ratio));
  margin: 0 auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.lottery__main-title.active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .lottery__main-title {
    width: calc(310 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .lottery__main-title {
    width: calc(340 * var(--ratio));
  }
}
.lottery__wrap {
  width: 100%;
  position: relative;
}
.lottery__text {
  width: calc(328 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 57%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.lottery__text.active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .lottery__text {
    width: calc(600 * var(--ratio));
    translate: -50% 72%;
  }
}
@media (min-width: 1024px) {
  .lottery__text {
    width: calc(650 * var(--ratio));
  }
}
.lottery__arrow {
  width: calc(280 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 133%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.lottery__arrow.active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .lottery__arrow {
    width: calc(560 * var(--ratio));
    translate: -50% 120%;
  }
}
@media (min-width: 1024px) {
  .lottery__arrow {
    width: calc(600 * var(--ratio));
    translate: -50% 120%;
  }
}
.lottery__arrow img {
  animation: scaleAnimation 300ms ease-in-out alternate infinite;
}
.lottery__tube {
  width: calc(96 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 33%;
  display: none;
}
@media (min-width: 768px) {
  .lottery__tube {
    width: calc(190 * var(--ratio));
    translate: -50% 29%;
  }
}
@media (min-width: 1024px) {
  .lottery__tube {
    width: calc(206 * var(--ratio));
    translate: -50% 29%;
  }
}
.lottery__hand {
  width: calc(70 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 546%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 10;
}
.lottery__hand.active {
  opacity: 1;
}
@media (min-width: 768px) {
  .lottery__hand {
    width: calc(130 * var(--ratio));
    translate: -50% 626%;
  }
}
@media (min-width: 1024px) {
  .lottery__hand {
    width: calc(130 * var(--ratio));
    translate: -50% 690%;
  }
}
.lottery__hand img {
  animation: shakeAnimation 300ms ease-in-out alternate infinite;
}
.lottery__btn-receive {
  width: calc(100 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 626%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 50;
  cursor: pointer;
}
.lottery__btn-receive.active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .lottery__btn-receive {
    width: calc(162 * var(--ratio));
    translate: -50% 830%;
  }
}
@media (min-width: 1024px) {
  .lottery__btn-receive {
    width: calc(176 * var(--ratio));
  }
}
.lottery__item {
  width: calc(580 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -15%;
  pointer-events: none;
}
@media (min-width: 768px) {
  .lottery__item {
    width: calc(1250 * var(--ratio));
    translate: -50% -18%;
  }
}
@media (min-width: 1024px) {
  .lottery__item {
    width: calc(1350 * var(--ratio));
  }
}
.lottery__btn-start {
  width: calc(640 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50.6% -15%;
  cursor: pointer;
  pointer-events: auto;
  transition: scale 300ms ease, opacity 300ms ease;
  z-index: 10;
}
.lottery__btn-start::after {
  pointer-events: none;
  content: "";
  width: calc(240 * var(--ratio));
  aspect-ratio: 376/89;
  background: transparent url("../images/lottery-btn-start-text.png");
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 128%;
  animation: scaleAnimation 300ms ease alternate infinite;
}
.lottery__btn-start.start {
  scale: 1.1;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .lottery__btn-start {
    width: calc(1410 * var(--ratio));
    translate: -50.6% -19%;
  }
  .lottery__btn-start::after {
    width: calc(520 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .lottery__btn-start {
    width: calc(1520 * var(--ratio));
    translate: -50.6% -17%;
  }
  .lottery__btn-start::after {
    width: calc(560 * var(--ratio));
  }
}
.lottery__canvas-container-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1/1;
  width: calc(300 * var(--ratio));
  translate: -50% -9%;
}
@media (min-width: 768px) {
  .lottery__canvas-container-wrap {
    width: calc(654 * var(--ratio));
    translate: -50% -15%;
  }
}
@media (min-width: 1024px) {
  .lottery__canvas-container-wrap {
    width: calc(706 * var(--ratio));
    translate: -50% -12%;
  }
}
.lottery__canvas-container {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  left: 0;
  top: 0;
}
.lottery__canvas-container.active {
  opacity: 1;
  pointer-events: auto;
}
.lottery__canvas-container canvas {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

@keyframes shakeAnimation {
  from {
    translate: -10% 0;
  }
  to {
    translate: 10% 0;
  }
}
@keyframes scaleAnimation {
  from {
    scale: 1;
  }
  to {
    scale: 1.03;
  }
}
.skills {
  background: #de638d url("../images/skills-bg-m.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/553;
  position: relative;
  z-index: 10;
  padding-top: calc(32 * var(--ratio));
}
@media (min-width: 768px) {
  .skills {
    background: #de638d url("../images/skills-bg-d.jpg") no-repeat center top;
    background-size: auto 100%;
    aspect-ratio: 1200/944;
    padding-top: calc(96 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .skills {
    aspect-ratio: 1920/944;
    padding-top: calc(102 * var(--ratio));
  }
}
.skills__main-title {
  width: calc(140 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -2%, 0);
}
@media (min-width: 768px) {
  .skills__main-title {
    width: calc(310 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .skills__main-title {
    width: calc(340 * var(--ratio));
  }
}
.skills__cht {
  position: absolute;
  width: calc(138 * var(--ratio));
  top: 0;
  right: 0;
  translate: 0 -38%;
  z-index: 0;
}
@media (min-width: 768px) {
  .skills__cht {
    width: calc(340 * var(--ratio));
    translate: 24% -32%;
  }
}
@media (min-width: 1024px) {
  .skills__cht {
    width: calc(360 * var(--ratio));
    right: inherit;
    left: 50%;
    translate: 70% -32%;
  }
}
.skills__wrap {
  width: calc(360 * var(--ratio));
  aspect-ratio: 604/340;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -45%;
  z-index: 10;
}
.skills__wrap::before {
  content: "";
  background: linear-gradient(180deg, rgb(255, 254, 255) 0%, rgb(250, 208, 100) 100%);
  width: calc(100% + 8 * var(--ratio));
  height: calc(100% + 8 * var(--ratio));
  box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 0;
  left: calc(-4 * var(--ratio));
  top: calc(-4 * var(--ratio));
}
@media (min-width: 768px) {
  .skills__wrap {
    width: calc(788 * var(--ratio));
    translate: -50% -43%;
    padding: calc(8 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .skills__wrap {
    width: calc(848 * var(--ratio));
    translate: -50% -43%;
  }
}
.skills__wrap iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 30;
}

.present {
  background: #590b0c url("../images/present-bg-m.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/2943;
  position: relative;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  z-index: 15;
}
@media (min-width: 768px) {
  .present {
    background: #590b0c url("../images/present-bg-d.jpg") no-repeat center bottom;
    aspect-ratio: 1200/4337;
    background-size: auto 100.01%;
  }
}
@media (min-width: 1024px) {
  .present {
    aspect-ratio: 1920/4337;
    background-size: auto 100%;
  }
}
.present__main-title {
  width: calc(240 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -1%, 0);
}
@media (min-width: 768px) {
  .present__main-title {
    width: calc(530 * var(--ratio));
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 1024px) {
  .present__main-title {
    width: calc(570 * var(--ratio));
    transform: translate3d(0, -3%, 0);
  }
}
.present__block {
  width: calc(480 * var(--ratio));
  margin: 0 auto;
  position: relative;
  translate: 0 -1.6%;
  padding-top: calc(92 * var(--ratio));
}
@media (min-width: 768px) {
  .present__block {
    width: calc(1000 * var(--ratio));
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 2.1%;
    padding-top: calc(54 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__block {
    width: calc(1170 * var(--ratio));
    background-size: 100% auto;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;
    padding-top: calc(130 * var(--ratio));
  }
}
.present__content-1 {
  padding-top: calc(12 * var(--ratio));
}
@media (min-width: 768px) {
  .present__content-1 {
    padding-top: calc(28 * var(--ratio));
  }
}
.present__sub-title {
  width: calc(202 * var(--ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  .present__sub-title {
    width: calc(444 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__sub-title {
    width: calc(448 * var(--ratio));
  }
}
.present__content-1-1-block {
  width: calc(370 * var(--ratio));
  margin: 0 auto;
  padding-top: calc(12 * var(--ratio));
  padding-bottom: calc(12 * var(--ratio));
}
@media (min-width: 768px) {
  .present__content-1-1-block {
    width: calc(808 * var(--ratio));
    padding-top: calc(24 * var(--ratio));
    padding-bottom: calc(26 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-1-1-block {
    width: calc(870 * var(--ratio));
    padding-top: calc(28 * var(--ratio));
    padding-bottom: calc(26 * var(--ratio));
  }
}
.present__content-1-1-slider, .present__content-1-2-slider {
  width: calc(410 * var(--ratio));
  margin: 0 auto;
  position: relative;
}
.present__content-1-1-slider .present-hair-swiper, .present__content-1-2-slider .present-hair-swiper {
  width: 100%;
}
.present__content-1-1-slider:nth-child(3), .present__content-1-2-slider:nth-child(3) {
  padding-top: calc(10 * var(--ratio));
}
@media (min-width: 768px) {
  .present__content-1-1-slider, .present__content-1-2-slider {
    width: calc(900 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-1-1-slider, .present__content-1-2-slider {
    width: calc(970 * var(--ratio));
  }
}
.present__custom-button-prev {
  width: calc(24 * var(--ratio));
  background: transparent url("../images/btn-prev.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 35/38;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(-38%, -20%, 0);
  z-index: 40;
  cursor: pointer;
}
.present__custom-button-prev.swiper-button-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
@media (min-width: 768px) {
  .present__custom-button-prev {
    width: calc(60 * var(--ratio));
    background-size: cover;
    transform: translate3d(-68%, -60%, 0);
  }
}
.present__custom-button-next {
  width: calc(24 * var(--ratio));
  background: transparent url("../images/btn-next.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 35/38;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(38%, -20%, 0);
  z-index: 40;
  cursor: pointer;
}
.present__custom-button-next.swiper-button-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
@media (min-width: 768px) {
  .present__custom-button-next {
    width: calc(60 * var(--ratio));
    background-size: cover;
    transform: translate3d(68%, -60%, 0);
  }
}
.present__content-1-2-block {
  width: calc(368 * var(--ratio));
  margin: 0 auto;
  padding-top: calc(14 * var(--ratio));
  padding-bottom: calc(8 * var(--ratio));
}
@media (min-width: 768px) {
  .present__content-1-2-block {
    width: calc(810 * var(--ratio));
    padding-top: calc(22 * var(--ratio));
    padding-bottom: calc(30 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-1-2-block {
    width: calc(870 * var(--ratio));
    padding-top: calc(28 * var(--ratio));
    padding-bottom: calc(34 * var(--ratio));
  }
}
.present__item-wrap {
  width: calc(410 * var(--ratio));
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(10 * var(--ratio)) calc(6 * var(--ratio));
  padding-top: calc(8 * var(--ratio));
  padding-bottom: calc(18 * var(--ratio));
}
@media (min-width: 768px) {
  .present__item-wrap {
    width: calc(912 * var(--ratio));
    padding-top: calc(12 * var(--ratio));
    padding-bottom: calc(38 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__item-wrap {
    width: calc(982 * var(--ratio));
    padding-top: calc(18 * var(--ratio));
    padding-bottom: calc(38 * var(--ratio));
  }
}
.present__item {
  flex-basis: 32%;
}
@media (min-width: 768px) {
  .present__item {
    flex-basis: 24%;
  }
}
.present__content-2 {
  margin-bottom: calc(18 * var(--ratio));
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .present__content-2 {
    margin-bottom: calc(48 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-2 {
    margin-bottom: calc(52 * var(--ratio));
  }
}
.present__content-2-block {
  padding-top: calc(14 * var(--ratio));
  width: calc(334 * var(--ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  .present__content-2-block {
    width: calc(560 * var(--ratio));
    padding-top: calc(42 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-2-block {
    width: calc(530 * var(--ratio));
    padding-top: calc(46 * var(--ratio));
  }
}
.present__content-3-block {
  padding-top: calc(14 * var(--ratio));
  width: calc(284 * var(--ratio));
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .present__content-3-block {
    padding-top: calc(40 * var(--ratio));
    width: calc(434 * var(--ratio));
    padding-bottom: calc(28 * var(--ratio));
    margin-right: calc(290 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-3-block {
    padding-top: calc(54 * var(--ratio));
    width: calc(464 * var(--ratio));
    padding-bottom: calc(34 * var(--ratio));
    margin-right: calc(360 * var(--ratio));
  }
}
.present__cht {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(280 * var(--ratio));
  translate: -38% -71%;
  z-index: 0;
}
@media (min-width: 768px) {
  .present__cht {
    width: calc(610 * var(--ratio));
    translate: -44% 4%;
  }
}
@media (min-width: 1024px) {
  .present__cht {
    width: calc(660 * var(--ratio));
    left: 50%;
    translate: -126% 4%;
  }
}
.present__btn-receive {
  background: transparent url("../images/present-content-3-btn-receive.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(266 * var(--ratio));
  aspect-ratio: 562/173;
  display: block;
  font-size: 0;
  margin-left: auto;
  margin-right: calc(92 * var(--ratio));
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .present__btn-receive {
    width: calc(460 * var(--ratio));
    margin-right: calc(248 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__btn-receive {
    width: calc(480 * var(--ratio));
    margin-right: calc(324 * var(--ratio));
  }
}
@media (hover: hover) {
  .present__btn-receive {
    transition: translate 300ms ease;
  }
  .present__btn-receive:hover {
    translate: 0 -10%;
  }
}

.event {
  background: #581525 url("../images/event-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/637;
  position: relative;
  overflow: hidden;
  padding-top: calc(60 * var(--ratio));
}
@media (min-width: 768px) {
  .event {
    background: #581525 url("../images/event-bg-d.jpg") no-repeat center top;
    background-size: auto 100.01%;
    aspect-ratio: 1200/1054;
    padding-top: 0;
  }
}
@media (min-width: 1024px) {
  .event {
    aspect-ratio: 1920/1054;
    background-size: auto 100.01%;
  }
}
.event__main-title {
  width: calc(140 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, 0, 0);
  position: relative;
  z-index: 50;
}
@media (min-width: 768px) {
  .event__main-title {
    width: calc(320 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .event__main-title {
    width: calc(340 * var(--ratio));
  }
}
.event__block {
  width: calc(480 * var(--ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  .event__block {
    width: calc(1090 * var(--ratio));
    position: absolute;
    left: 50%;
    top: 15%;
    translate: -50% 0;
  }
}
@media (min-width: 1024px) {
  .event__block {
    width: calc(1190 * var(--ratio));
    translate: -50% 0;
  }
}
.event__content {
  width: calc(390 * var(--ratio));
  margin: 0 auto;
  position: relative;
  padding-top: calc(10 * var(--ratio));
}
@media (min-width: 768px) {
  .event__content {
    width: calc(844 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .event__content {
    width: calc(914 * var(--ratio));
  }
}
@media (min-width: 768px) {
  .event__content .event-swiper {
    overflow: visible !important;
  }
}
.event__content .swiper-slide {
  z-index: 0;
}
.event__content .swiper-slide:has(.event__btn:hover) {
  z-index: 10;
}
.event__custom-button-prev {
  width: calc(24 * var(--ratio));
  background: transparent url("../images/btn-prev.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 35/38;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(-100%, 80%, 0);
  z-index: 40;
}
.event__custom-button-prev.swiper-button-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
.event__custom-button-next {
  width: calc(24 * var(--ratio));
  background: transparent url("../images/btn-next.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 35/38;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(100%, 80%, 0);
  z-index: 40;
}
.event__custom-button-next.swiper-button-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
.event__btn {
  display: block;
}
.event__btn::after {
  content: "";
  aspect-ratio: 368/683;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transition: opacity 300ms ease, scale 300ms ease;
  width: calc(320 * var(--ratio));
  transform-origin: 50%;
  translate: -50% -50%;
  scale: 0.9;
  pointer-events: none;
  z-index: 20;
  display: none;
}
@media (min-width: 768px) {
  .event__btn::after {
    display: block;
  }
}
.event__btn.event-1::after {
  background: transparent url("../images/event-slider-1-over.png") no-repeat center top;
  background-size: cover;
}
.event__btn.event-2::after {
  background: transparent url("../images/event-slider-2-over.png") no-repeat center top;
  background-size: cover;
}
.event__btn.event-3::after {
  background: transparent url("../images/event-slider-3-over.png") no-repeat center top;
  background-size: cover;
}
@media (hover: hover) {
  .event__btn:hover::after {
    opacity: 1;
    scale: 1;
  }
}

.souvenir {
  background: #581525 url("../images/souvenir-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/561;
  position: relative;
  overflow: hidden;
  padding-top: calc(52 * var(--ratio));
}
@media (min-width: 768px) {
  .souvenir {
    background: #581525 url("../images/souvenir-bg-d.jpg") no-repeat center top;
    background-size: auto 100.5%;
    aspect-ratio: 1200/944;
    padding-top: calc(100 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .souvenir {
    aspect-ratio: 1920/944;
    background-size: auto 100.5%;
    padding-top: calc(108 * var(--ratio));
  }
}
.souvenir__main-title {
  width: calc(230 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -1%, 0);
  position: relative;
  z-index: 50;
}
@media (min-width: 768px) {
  .souvenir__main-title {
    width: calc(490 * var(--ratio));
    transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 1024px) {
  .souvenir__main-title {
    width: calc(530 * var(--ratio));
  }
}
.souvenir__block {
  width: calc(480 * var(--ratio));
  margin: 0 auto;
  translate: 0 -4%;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .souvenir__block {
    width: calc(1152 * var(--ratio));
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;
  }
}
.souvenir__content {
  width: calc(334 * var(--ratio));
  margin: 0 auto;
  padding-top: calc(34 * var(--ratio));
}
@media (min-width: 768px) {
  .souvenir__content {
    padding-top: calc(244 * var(--ratio));
    width: calc(736 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .souvenir__content {
    padding-top: calc(264 * var(--ratio));
    width: calc(786 * var(--ratio));
  }
}
.souvenir__btn-join {
  background: transparent url("../images/souvenir-btn-join.png") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 506/146;
  width: calc(240 * var(--ratio));
  display: block;
  margin: 0 auto;
  translate: 0 32%;
  font-size: 0;
  position: relative;
}
@media (min-width: 768px) {
  .souvenir__btn-join {
    width: calc(400 * var(--ratio));
    translate: 0 61%;
  }
}
@media (min-width: 1024px) {
  .souvenir__btn-join {
    width: calc(440 * var(--ratio));
  }
}
@media (hover: hover) {
  .souvenir__btn-join {
    transition: translate 300ms ease;
  }
  .souvenir__btn-join:hover {
    translate: 0 50%;
  }
}
.souvenir__cht {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(294 * var(--ratio));
  translate: 38% -17%;
  z-index: 0;
}
@media (min-width: 768px) {
  .souvenir__cht {
    width: calc(650 * var(--ratio));
    translate: 44% -19%;
  }
}
@media (min-width: 1024px) {
  .souvenir__cht {
    width: calc(690 * var(--ratio));
    right: inherit;
    left: 50%;
    translate: 19% -19%;
  }
}

.loading {
  position: fixed;
  z-index: 500;
  background: linear-gradient(90deg, rgb(59, 11, 28) 0%, rgb(36, 10, 95) 100%);
  color: #c5d8fd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity 2s ease-in-out;
  gap: 1.6rem;
  top: 0;
  pointer-events: none;
}
.loading.loaded {
  opacity: 0;
}
.loading p {
  padding-top: 0.5rem;
  font-size: 1rem;
  color: #c5d8fd;
  z-index: 10;
  text-shadow: 0 0 1rem #c5d8fd;
}
.loading__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(20 * var(--ratio));
}

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #fff;
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-inner {
  0% {
    height: 0%;
  }
  25% {
    height: 0%;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}
.intro-video {
  width: 100%;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  background-color: #000;
  transition: opacity 1200ms ease;
  display: none;
  will-change: opacity;
}
@media (min-width: 768px) {
  .intro-video {
    display: block;
  }
}
.intro-video.ended {
  opacity: 0;
  pointer-events: none;
}
.intro-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.intro-video__btn-skip {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.3);
  width: calc(170 * var(--ratio));
  border-radius: calc(12 * var(--ratio));
  color: #fff;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, -50%, 0);
  font-size: calc(16 * var(--ratio));
  padding: calc(16 * var(--ratio)) 0;
}
@media (hover: hover) {
  .intro-video__btn-skip:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

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

.modal-ui {
  position: relative;
}
.modal-ui__btn-close {
  position: absolute;
  width: calc(52 * var(--ratio));
  aspect-ratio: 1/1;
  background: transparent url("../images/modal-btn-close.png") no-repeat 0 0;
  background-size: cover;
  left: 50%;
  top: 0;
  translate: -50% -90%;
  font-size: 0;
  cursor: pointer;
  z-index: 10;
}
@media (hover: hover) {
  .modal-ui__btn-close {
    transition: all 300ms ease;
  }
  .modal-ui__btn-close:hover {
    rotate: 360deg;
  }
}
.modal-ui__lottery {
  width: calc(210 * var(--ratio));
  aspect-ratio: 390/782;
  position: relative;
  transition: all 400ms ease 800ms;
  opacity: 0;
  scale: 1.2;
}
@media (min-width: 768px) {
  .modal-ui__lottery {
    width: calc(240 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .modal-ui__lottery {
    width: calc(220 * var(--ratio));
  }
}
.modal-ui__lottery img {
  margin-bottom: calc(20 * var(--ratio));
}
.modal-ui a {
  width: calc(160 * var(--ratio));
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .modal-ui a {
    width: calc(140 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .modal-ui a {
    width: calc(150 * var(--ratio));
  }
}

@keyframes rotateAnimation {
  0%, 100% {
    rotate: -5deg;
  }
  50% {
    rotate: 5deg;
  }
}/**
 * Swiper 12.0.3
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 21, 2025
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}
.swiper-coverflow {
}