@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;
}
html.hidden {
  pointer-events: none;
  overflow: hidden;
}

body {
  background-color: #000;
  position: relative;
  height: 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: #5a1424;
}

.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-color: rgba(16, 8, 74, 0.8);
  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.5);
  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__nav-toggle {
  cursor: pointer;
}
.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.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.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-job {
  background-position: 0 14.28%;
}
.fixed-nav__btn-link.fixed-job::after {
  background-position: 100% 14.28%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-job:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-growth {
  background-position: 0 28.56%;
}
.fixed-nav__btn-link.fixed-growth::after {
  background-position: 100% 28.56%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-growth:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-present {
  background-position: 0 42.84%;
}
.fixed-nav__btn-link.fixed-present::after {
  background-position: 100% 42.84%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-present:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-event {
  background-position: 0 57.12%;
}
.fixed-nav__btn-link.fixed-event::after {
  background-position: 100% 57.12%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-event:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-showcase {
  background-position: 0 71.4%;
}
.fixed-nav__btn-link.fixed-showcase::after {
  background-position: 100% 71.4%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-showcase:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-souvenir {
  background-position: 0 85.68%;
}
.fixed-nav__btn-link.fixed-souvenir::after {
  background-position: 100% 85.68%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-souvenir:hover::before {
    opacity: 1;
  }
}
.fixed-nav__btn-link.fixed-wallpaper {
  background-position: 0 99.96%;
}
.fixed-nav__btn-link.fixed-wallpaper::after {
  background-position: 100% 99.96%;
}
@media (hover: hover) {
  .fixed-nav__btn-link.fixed-wallpaper:hover::before {
    opacity: 1;
  }
}

.index {
  background-color: #465da3;
  aspect-ratio: 768/1334;
  position: relative;
  overflow: hidden;
}
.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 {
    aspect-ratio: 1200/883;
  }
}
@media (min-width: 1024px) {
  .index {
    aspect-ratio: 1920/883;
  }
}
.index__main-title {
  width: calc(480 * var(--ratio));
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -192%, 0);
  z-index: 40;
  position: absolute;
  will-change: transform, opacity;
}
@media (min-width: 768px) {
  .index__main-title {
    width: calc(440 * var(--ratio));
    transform: translate3d(-50%, -167%, 0);
  }
}
.index__btn-download-outer {
  width: calc(440 * var(--ratio));
  aspect-ratio: 501/154;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% 130%;
  z-index: 40;
  transition: scale 300ms ease;
}
@media (min-width: 768px) {
  .index__btn-download-outer {
    width: calc(380 * var(--ratio));
    translate: -50% 194%;
  }
}
@media (hover: hover) {
  .index__btn-download-outer:hover {
    scale: 1.3;
  }
  .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-more.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__btn-download::after {
    width: 100%;
    position: absolute;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: transparent url("../images/index-btn-download.png") no-repeat 0 100%;
    background-size: 100% auto;
    transition: opacity 300ms ease;
    opacity: 0;
  }
}
@media (min-width: 768px) and (hover: hover) {
  .index__btn-download:hover::after {
    opacity: 1;
  }
}
.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;
}
@media (min-width: 768px) {
  .index__video {
    width: calc(1600 * var(--ratio));
    transform: translate3d(-50%, 0, 0);
    height: auto;
  }
}
@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;
}

@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: #c7a8fa url("../images/image-video-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;
}
@media (min-width: 768px) {
  .image-video {
    background: #c7a8fa url("../images/image-video-bg-d.jpg") no-repeat center top;
    background-size: auto 100.5%;
    aspect-ratio: 1200/1074;
    padding-top: 0;
  }
}
@media (min-width: 1024px) {
  .image-video {
    aspect-ratio: 1920/1031;
  }
}
.image-video__main-title {
  width: calc(300 * var(--ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  .image-video__main-title {
    width: calc(380 * var(--ratio));
  }
}
.image-video__frame {
  background: transparent url("../images/image-video-frame.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/399;
  width: calc(478 * var(--ratio));
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -26%, 0);
}
@media (min-width: 768px) {
  .image-video__frame {
    background: transparent url("../images/image-video-frame-d.png") no-repeat center top;
    background-size: cover;
    aspect-ratio: 1550/789;
    width: calc(1270 * var(--ratio));
    transform: translate3d(-50%, -43%, 0);
  }
}
.image-video__wrap {
  width: calc(330 * var(--ratio));
  aspect-ratio: 604/340;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}
@media (min-width: 768px) {
  .image-video__wrap {
    width: calc(958 * var(--ratio));
  }
}
.image-video__wrap iframe {
  box-shadow: 0 0 0 calc(6 * var(--ratio)) #f7deb5;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  z-index: 30;
}

.job {
  background: #c7a8fa url("../images/job-bg-m.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/1687;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .job {
    background: #c7a8fa url("../images/job-bg-d.jpg") no-repeat center top;
    background-size: auto 100.5%;
    aspect-ratio: 1200/1021;
  }
}
@media (min-width: 1024px) {
  .job {
    aspect-ratio: 1920/1021;
  }
}
.job__main-title {
  width: calc(320 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -3%, 0);
}
@media (min-width: 768px) {
  .job__main-title {
    width: calc(390 * var(--ratio));
  }
}
.job__content {
  width: calc(400 * var(--ratio));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -6%, 0);
}
@media (min-width: 768px) {
  .job__content {
    width: calc(490 * var(--ratio));
    transform: translate3d(-103%, -41%, 0);
  }
}
.job__hand-text {
  width: calc(88 * var(--ratio));
  aspect-ratio: 1/1;
  position: absolute;
  left: 50%;
  top: 50%;
}
.job__hand-text.hand-top {
  translate: 93% -61%;
  animation: handAnimationTop 300ms infinite;
}
.job__hand-text.hand-bottom {
  translate: -27% 171%;
  animation: handAnimationBottom 300ms infinite;
}
.job__hand-text {
  display: none;
}
@media (min-width: 768px) {
  .job__hand-text {
    display: block;
  }
}
.job__animation {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  aspect-ratio: 1920/1080;
  width: calc(1740 * var(--ratio));
  transform: translate3d(-31.5%, -50%, 0);
  display: none;
}
.job__animation::after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent url("../images/frame000.webp") no-repeat 0 0;
  background-size: cover;
  content: "";
  left: 0;
  top: 0;
  z-index: 10;
}
.job__animation.active::after {
  opacity: 0;
  z-index: 0;
}
@media (min-width: 768px) {
  .job__animation {
    display: block;
  }
}
.job__animation canvas {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 0;
}
.job__animation canvas.active {
  opacity: 1;
  z-index: 10;
}
.job__trigger-area-head {
  width: calc(440 * var(--ratio));
  height: calc(560 * var(--ratio));
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  translate: 31% -78%;
  cursor: pointer;
  display: none;
}
.job__trigger-area-head.disabled {
  pointer-events: none;
}
@media (min-width: 768px) {
  .job__trigger-area-head {
    display: block;
  }
}
.job__trigger-area-sword {
  width: calc(360 * var(--ratio));
  height: calc(280 * var(--ratio));
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  translate: -38% 54%;
  cursor: pointer;
  display: none;
}
.job__trigger-area-sword.disabled {
  pointer-events: none;
}
@media (min-width: 768px) {
  .job__trigger-area-sword {
    display: block;
  }
}
.job__arrow {
  width: calc(40 * var(--ratio));
  position: absolute;
  aspect-ratio: 54/46;
  right: calc(120 * var(--ratio));
  bottom: calc(4 * var(--ratio));
  transform: translate3d(0, 0, 0);
  animation: moveX 600ms ease infinite alternate;
  display: none;
}
@media (min-width: 768px) {
  .job__arrow {
    display: block;
  }
}

@keyframes moveX {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(20%, 0, 0);
  }
}
@keyframes handAnimationTop {
  0%, 100% {
    translate: 93% -61%;
  }
  50% {
    translate: 83% -61%;
  }
}
@keyframes handAnimationBottom {
  0%, 100% {
    translate: -27% 171%;
  }
  50% {
    translate: -37% 171%;
  }
}
.skills {
  background: #c7a8fa url("../images/skills-bg-m.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/705;
  position: relative;
  overflow: hidden;
  z-index: 5;
}
@media (min-width: 768px) {
  .skills {
    display: none;
  }
}
.skills__main-title {
  width: calc(300 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -2%, 0);
}
.skills__frame {
  background: transparent url("../images/skills-frame.png") no-repeat center bottom;
  background-size: 100% auto;
  aspect-ratio: 768/844;
  width: calc(480 * var(--ratio));
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -55%, 0);
}
.skills__frame iframe {
  box-shadow: 0 0 0 calc(5 * var(--ratio)) #ffe3b7;
  width: calc(420 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 16/9;
  transform: translate3d(-50%, -18%, 0);
}

.growth {
  background: #8157e8 url("../images/growth-bg-m.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/866;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .growth {
    background: #8157e8 url("../images/growth-bg-d.jpg") no-repeat center top;
    background-size: auto 100.5%;
    aspect-ratio: 1200/1433;
  }
}
@media (min-width: 1024px) {
  .growth {
    background-size: auto 100.5%;
    aspect-ratio: 1920/1433;
  }
}
.growth__main-title {
  width: calc(398 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -3%, 0);
  position: relative;
  z-index: 50;
}
@media (min-width: 768px) {
  .growth__main-title {
    width: calc(520 * var(--ratio));
  }
}
.growth__text-slider {
  width: calc(320 * var(--ratio));
  background: transparent url("../images/growth-title-bg.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 512/197;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -118%, 0);
  z-index: 30;
}
@media (min-width: 768px) {
  .growth__text-slider {
    display: none;
  }
}
.growth__text-slider .growth-text-swiper {
  width: calc(200 * var(--ratio));
  transform: translate3d(0, 124%, 0);
}
.growth__slider {
  background: transparent url("../images/growth-slider-bg.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/550;
  width: calc(480 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -14%, 0);
  z-index: 10;
}
@media (min-width: 768px) {
  .growth__slider {
    display: none;
  }
}
.growth__slider .growth-swiper {
  width: calc(390 * var(--ratio));
  transform: translate3d(0, 14%, 0);
}
.growth__btn-link {
  position: relative;
}
.growth__btn-link::after {
  content: "";
  background: transparent url("../images/modal-btn-more-all.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(130 * var(--ratio));
  aspect-ratio: 346/123;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 220%;
  transition: translate 300ms ease;
  pointer-events: none;
}
.growth__btn-link.growth-1::after {
  background-position: 0 0;
}
.growth__btn-link.growth-2::after {
  background-position: 0 25%;
}
.growth__btn-link.growth-3::after {
  background-position: 0 50%;
}
.growth__btn-link.growth-4::after {
  background-position: 0 75%;
}
.growth__btn-link.growth-5::after {
  background-position: 0 100%;
}
.growth__dragon-top {
  width: calc(400 * var(--ratio));
  position: absolute;
  z-index: 20;
  left: 0;
  top: 50%;
  transform: translate3d(0, -91%, 0);
}
@media (min-width: 768px) {
  .growth__dragon-top {
    display: none;
  }
}
.growth__dragon-bottom {
  width: calc(480 * var(--ratio));
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -33%, 0);
}
@media (min-width: 768px) {
  .growth__dragon-bottom {
    display: none;
  }
}
.growth__custom-button-prev {
  width: calc(50 * var(--ratio));
  background: transparent url("../images/growth-btn-prev.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 66/56;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(2%, -125%, 0);
  z-index: 40;
}
.growth__custom-button-prev.swiper-button-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
.growth__custom-button-next {
  width: calc(50 * var(--ratio));
  background: transparent url("../images/growth-btn-next.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 66/56;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(2%, -125%, 0);
  z-index: 40;
}
.growth__custom-button-next.swiper-button-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
.growth__map-frame {
  width: calc(1480 * var(--ratio));
  background: transparent url("../images/growth-map-frame.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 1840/1421;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -51%;
  display: none;
}
@media (min-width: 768px) {
  .growth__map-frame {
    display: block;
  }
}
.growth__text {
  position: absolute;
  width: calc(590 * var(--ratio));
  top: 0;
  left: 50%;
  transform: translate3d(-50%, 842%, 0);
}
.growth__map {
  position: absolute;
  width: calc(970 * var(--ratio));
  background: transparent url("../images/growth-map.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 1193/878;
  left: 50%;
  top: 50%;
  translate: -50% -37.5%;
  display: none;
}
@media (min-width: 768px) {
  .growth__map {
    display: block;
  }
}
.growth__btn-anchor {
  width: calc(298 * var(--ratio));
  background: transparent url("../images/growth-map-nav.png") no-repeat 0 0;
  background-size: auto 200%;
  aspect-ratio: 363/180;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 0;
  opacity: 1;
  cursor: pointer;
  pointer-events: none;
  z-index: 30;
  transform-origin: 50% bottom;
  transition: scale 300ms ease;
  scale: 0;
}
.growth__btn-anchor::after {
  content: "";
  width: 100%;
  height: 100%;
  background: transparent url("../images/growth-map-nav.png") no-repeat 0 100%;
  background-size: auto 200%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 300ms ease;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  animation: glowAnimation 300ms infinite paused;
}
.growth__btn-anchor::before {
  content: "";
  width: calc(60 * var(--ratio));
  background: transparent url("../images/growth-new-label.png") no-repeat 0 0;
  background-size: cover;
  aspect-ratio: 1/1;
  left: 0;
  top: 0;
  translate: 45% 14%;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transform-origin: 50% 50%;
  animation: pulseAnimation 1000ms ease infinite alternate;
}
.growth__btn-anchor.is-new::before {
  opacity: 1;
}
.growth__btn-anchor.anchor-0 {
  display: none;
}
.growth__btn-anchor.anchor-1 {
  translate: -25% 96%;
}
.growth__btn-anchor.anchor-2 {
  translate: 45% -12%;
  background-position: 25% 0;
}
.growth__btn-anchor.anchor-2::after {
  background-position: 25% 100%;
}
.growth__btn-anchor.anchor-3 {
  translate: 56% -145%;
  background-position: 50% 0;
}
.growth__btn-anchor.anchor-3::after {
  background-position: 50% 100%;
}
.growth__btn-anchor.anchor-4 {
  translate: -13% -203%;
  background-position: 75% 0;
}
.growth__btn-anchor.anchor-4::after {
  background-position: 75% 100%;
}
.growth__btn-anchor.anchor-5 {
  translate: -97% -216%;
  background-position: 100% 0;
}
.growth__btn-anchor.anchor-5::after {
  background-position: 100% 100%;
}
.growth__btn-anchor.active {
  scale: 1;
}
.growth__btn-anchor.active::after {
  opacity: 1;
  animation-play-state: running;
}
@media (hover: hover) {
  .growth__btn-anchor:hover::after {
    opacity: 1;
  }
}
.growth__cht {
  width: calc(280 * var(--ratio));
  position: absolute;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
}
.growth__cht.is-ready {
  opacity: 1;
}
.growth__cht.is-flipped img {
  transform: scaleX(-1);
}
.growth__map-path {
  width: calc(970 * var(--ratio));
  aspect-ratio: 1193/878;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
}
.growth__btn-point {
  width: calc(50 * var(--ratio));
  background: transparent url("../images/growth-map-btn-point.png") no-repeat 0 0;
  background-size: 100% auto;
  aspect-ratio: 164/98;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 0;
  cursor: pointer;
  animation: scaleAnimaiton 500ms infinite alternate;
}
.growth__btn-point::after {
  content: "";
  background: transparent url("../images/growth-map-btn-point.png") no-repeat 0 100%;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.growth__btn-point.point-0 {
  translate: -567% 826%;
}
.growth__btn-point.point-1 {
  translate: 100% 892%;
}
.growth__btn-point.point-2 {
  translate: 524% 340%;
}
.growth__btn-point.point-3 {
  translate: 584% -313%;
}
.growth__btn-point.point-4 {
  translate: 165% -586%;
}
.growth__btn-point.point-5 {
  translate: -330% -666%;
}
.growth__btn-point.is-hint::after {
  opacity: 1;
}
.growth__btn-point.active {
  pointer-events: none;
}
.growth__btn-point.active::after {
  opacity: 1;
}
@media (hover: hover) {
  .growth__btn-point:hover::after {
    opacity: 1;
  }
}

@keyframes scaleAnimaiton {
  0%, 100% {
    scale: 1;
    filter: brightness(1);
  }
  50% {
    scale: 1.1;
    filter: brightness(1.3);
  }
}
@keyframes glowAnimation {
  0%, 100% {
    scale: 1;
    filter: brightness(1);
  }
  50% {
    scale: 1.02;
    filter: brightness(1.2);
  }
}
@keyframes pulseAnimation {
  0%, 100% {
    scale: 1;
    filter: brightness(1);
  }
  50% {
    scale: 1.2;
    filter: brightness(1.2);
  }
}
.present {
  background: #c7a8fa url("../images/present-bg-m.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 768/3461;
  position: relative;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}
@media (min-width: 768px) {
  .present {
    background: #6165c3 url("../images/present-bg-d.jpg") no-repeat center top;
    aspect-ratio: 1200/3984;
    background-size: auto 100%;
  }
}
@media (min-width: 1024px) {
  .present {
    aspect-ratio: 1920/3984;
    background-size: auto 100%;
    transform: translate3d(0, -1px, 0);
  }
}
.present__main-title {
  width: calc(480 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -1%, 0);
}
@media (min-width: 768px) {
  .present__main-title {
    width: calc(630 * var(--ratio));
    transform: translate3d(0, -3%, 0);
  }
}
@media (min-width: 1024px) {
  .present__main-title {
    width: calc(680 * var(--ratio));
    transform: translate3d(0, -3%, 0);
  }
}
.present__block {
  width: calc(480 * var(--ratio));
  background: transparent url("../images/present-block-bg.png") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/3285;
  margin: 0 auto;
  position: relative;
  translate: 0 -1.6%;
  padding-top: calc(74 * var(--ratio));
}
@media (min-width: 768px) {
  .present__block {
    width: calc(1084 * var(--ratio));
    background: transparent url("../images/present-block-bg-d.png") no-repeat center top;
    background-size: 100% auto;
    aspect-ratio: 1439/4111;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 4.7%;
    padding-top: calc(90 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__block {
    width: calc(1170 * var(--ratio));
    background-size: 100% auto;
    aspect-ratio: 1439/4111;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 4.7%;
    padding-top: calc(90 * var(--ratio));
  }
}
.present__sub-title {
  width: calc(342 * var(--ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  .present__sub-title {
    width: calc(408 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__sub-title {
    width: calc(448 * var(--ratio));
  }
}
.present__content-1-1-block {
  width: calc(390 * var(--ratio));
  margin: 0 auto;
  padding-top: calc(12 * var(--ratio));
  padding-bottom: calc(16 * var(--ratio));
}
@media (min-width: 768px) {
  .present__content-1-1-block {
    width: calc(720 * var(--ratio));
    padding-top: calc(13 * var(--ratio));
    padding-bottom: calc(26 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-1-1-block {
    width: calc(780 * var(--ratio));
    padding-top: calc(18 * var(--ratio));
    padding-bottom: calc(26 * var(--ratio));
  }
}
.present__content-1-1-slider, .present__content-1-2-slider {
  width: calc(390 * 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(16 * var(--ratio));
}
@media (min-width: 768px) {
  .present__content-1-1-slider, .present__content-1-2-slider {
    width: calc(830 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-1-1-slider, .present__content-1-2-slider {
    width: calc(900 * var(--ratio));
  }
}
.present__custom-button-prev {
  width: calc(40 * var(--ratio));
  background: transparent url("../images/growth-btn-prev.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 66/56;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(-108%, -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(40 * var(--ratio));
  background: transparent url("../images/growth-btn-next.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 66/56;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(108%, -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(290 * var(--ratio));
  margin: 0 auto;
  padding-top: calc(14 * var(--ratio));
  padding-bottom: calc(16 * var(--ratio));
}
@media (min-width: 1024px) {
  .present__content-1-2-block {
    width: calc(880 * var(--ratio));
    padding-top: calc(6 * var(--ratio));
    padding-bottom: calc(34 * var(--ratio));
  }
}
@media (min-width: 768px) {
  .present__content-1-2-block {
    width: calc(880 * var(--ratio));
    padding-top: calc(6 * var(--ratio));
    padding-bottom: calc(34 * var(--ratio));
  }
}
.present__item-wrap {
  width: calc(390 * 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(18 * var(--ratio));
  padding-bottom: calc(34 * var(--ratio));
}
@media (min-width: 768px) {
  .present__item-wrap {
    width: calc(842 * var(--ratio));
    padding-top: calc(12 * var(--ratio));
    padding-bottom: calc(38 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__item-wrap {
    width: calc(912 * var(--ratio));
    padding-top: calc(12 * 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(34 * var(--ratio));
}
@media (min-width: 768px) {
  .present__content-2 {
    margin-bottom: calc(52 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-2 {
    margin-bottom: calc(52 * var(--ratio));
  }
}
.present__content-2-block {
  padding-top: calc(34 * var(--ratio));
  width: calc(390 * var(--ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  .present__content-2-block {
    width: calc(530 * var(--ratio));
    padding-top: calc(36 * 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(34 * var(--ratio));
  width: calc(320 * var(--ratio));
  padding-bottom: calc(20 * var(--ratio));
  margin: 0 auto;
}
@media (min-width: 768px) {
  .present__content-3-block {
    padding-top: calc(40 * var(--ratio));
    width: calc(400 * var(--ratio));
    padding-bottom: calc(14 * var(--ratio));
  }
}
@media (min-width: 1024px) {
  .present__content-3-block {
    padding-top: calc(44 * var(--ratio));
    width: calc(420 * var(--ratio));
    padding-bottom: calc(14 * var(--ratio));
  }
}
.present__btn-receive {
  background: transparent url("../images/present-content-3-btn-receive.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(380 * var(--ratio));
  aspect-ratio: 601/190;
  display: block;
  font-size: 0;
  margin-left: auto;
  margin-right: calc(45 * var(--ratio));
  position: relative;
}
.present__btn-receive::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent url("../images/present-content-3-btn-receive.png") no-repeat 0 100%;
  background-size: 100% auto;
  opacity: 0;
  transition: opacity 300ms ease;
}
@media (min-width: 768px) {
  .present__btn-receive {
    width: calc(430 * var(--ratio));
    margin-right: auto;
  }
}
@media (min-width: 1024px) {
  .present__btn-receive {
    width: calc(480 * var(--ratio));
    margin-right: auto;
  }
}
@media (hover: hover) {
  .present__btn-receive:hover::after {
    opacity: 1;
  }
}

.event {
  background: #581525 url("../images/event-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/1077;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .event {
    background: #581525 url("../images/event-bg-d.jpg") no-repeat center top;
    background-size: auto 100.5%;
    aspect-ratio: 1200/943;
  }
}
@media (min-width: 1024px) {
  .event {
    aspect-ratio: 1920/943;
    background-size: auto 100.5%;
    translate: 0 -1px;
  }
}
.event__main-title {
  width: calc(290 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -3%, 0);
  position: relative;
  z-index: 50;
}
@media (min-width: 768px) {
  .event__main-title {
    width: calc(390 * var(--ratio));
  }
}
.event__block {
  background: transparent url("../images/event-block-bg.png") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/894;
  width: calc(480 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -5%, 0);
}
@media (min-width: 768px) {
  .event__block {
    background: transparent url("../images/event-block-bg-d.png") no-repeat center top;
    background-size: 100% auto;
    width: calc(1090 * var(--ratio));
    aspect-ratio: 1439/810;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate3d(-50%, 21%, 0);
  }
}
@media (min-width: 1024px) {
  .event__block {
    width: calc(1190 * var(--ratio));
    transform: translate3d(-50%, 20.5%, 0);
  }
}
.event__content {
  width: calc(400 * var(--ratio));
  margin: 0 auto;
  position: relative;
  padding-top: calc(104 * var(--ratio));
}
@media (min-width: 768px) {
  .event__content {
    width: calc(984 * var(--ratio));
    padding-top: calc(103 * 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(40 * var(--ratio));
  background: transparent url("../images/growth-btn-prev.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 65/55;
  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(40 * var(--ratio));
  background: transparent url("../images/growth-btn-next.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 65/55;
  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: 614/1225;
  position: absolute;
  left: 50%;
  bottom: 0;
  opacity: 0;
  transition: opacity 300ms ease, scale 300ms ease;
  width: calc(460 * var(--ratio));
  transform-origin: 50% bottom;
  translate: -50.3% 19.4%;
  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;
}
.event__btn.event-4::after {
  background: transparent url("../images/event-slider-4-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/919;
  position: relative;
  overflow: hidden;
}
@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/943;
  }
}
@media (min-width: 1024px) {
  .souvenir {
    aspect-ratio: 1920/943;
    background-size: auto 100.5%;
  }
}
.souvenir__main-title {
  width: calc(400 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -1%, 0);
  position: relative;
  z-index: 50;
}
@media (min-width: 768px) {
  .souvenir__main-title {
    width: calc(520 * var(--ratio));
    transform: translate3d(0, -3%, 0);
  }
}
.souvenir__block {
  background: transparent url("../images/souvenir-block-bg.png") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/689;
  width: calc(480 * var(--ratio));
  margin: 0 auto;
  translate: 0 -4%;
}
@media (min-width: 768px) {
  .souvenir__block {
    background: transparent url("../images/souvenir-block-bg-d.png") no-repeat center top;
    background-size: 100% auto;
    width: calc(1152 * var(--ratio));
    aspect-ratio: 1395/703;
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 28%;
  }
}
.souvenir__content {
  width: calc(346 * var(--ratio));
  margin: 0 auto;
  padding-top: calc(110 * var(--ratio));
}
@media (min-width: 768px) {
  .souvenir__content {
    padding-top: calc(136 * var(--ratio));
    width: calc(596 * var(--ratio));
  }
}
.souvenir__btn-join {
  background: transparent url("../images/souvenir-btn-join.png") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 457/126;
  width: calc(290 * var(--ratio));
  display: block;
  margin: 0 auto;
  transform: translate3d(2%, 118%, 0);
  font-size: 0;
}
.souvenir__btn-join::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent url("../images/souvenir-btn-join.png") no-repeat 0 100%;
  background-size: 100% auto;
  opacity: 0;
  transition: opacity 300ms ease;
}
@media (min-width: 768px) {
  .souvenir__btn-join {
    width: calc(370 * var(--ratio));
    transform: translate3d(2%, 102%, 0);
  }
}
@media (hover: hover) {
  .souvenir__btn-join:hover::after {
    opacity: 1;
  }
}

.showcase {
  background: #c7a8fa url("../images/showcase-bg-d.jpg") no-repeat center top;
  background-size: cover;
  aspect-ratio: 1200/943;
  position: relative;
  overflow: hidden;
  display: none;
}
@media (min-width: 768px) {
  .showcase {
    display: block;
  }
}
@media (min-width: 1024px) {
  .showcase {
    background-size: auto 100.5%;
    aspect-ratio: 1920/943;
  }
}
.showcase__main-title {
  width: calc(570 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -3%, 0);
}
.showcase__block {
  background: transparent url("../images/showcase-block-d.png") no-repeat center top;
  background-size: cover;
  position: absolute;
  width: calc(1140 * var(--ratio));
  aspect-ratio: 1395/663;
  left: 50%;
  top: 0;
  translate: -50% 35.6%;
}
@media (min-width: 1024px) {
  .showcase__block {
    width: calc(1154 * var(--ratio));
    translate: -50% 36.6%;
  }
}
.showcase__cm {
  position: absolute;
  width: calc(280 * var(--ratio));
  left: 50%;
  top: 50%;
  translate: -50% -59%;
}
.showcase__btn-view {
  background: transparent url("../images/showcase-btn-view.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(370 * var(--ratio));
  aspect-ratio: 457/126;
  display: block;
  font-size: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% -68%;
  display: none;
}
.showcase__btn-view::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent url("../images/showcase-btn-view.png") no-repeat 0 100%;
  background-size: 100% auto;
  opacity: 0;
  transition: opacity 300ms ease;
}
@media (hover: hover) {
  .showcase__btn-view:hover::after {
    opacity: 1;
  }
}

.wallpaper {
  background: #581525 url("../images/wallpaper-bg-m.jpg") no-repeat center top;
  background-size: 100% auto;
  aspect-ratio: 768/1188;
  position: relative;
  overflow: hidden;
  display: none;
}
@media (min-width: 768px) {
  .wallpaper {
    background: #581525 url("../images/wallpaper-bg-d.jpg") no-repeat center top;
    background-size: auto 100.5%;
    aspect-ratio: 1200/943;
    display: block;
  }
}
@media (min-width: 1024px) {
  .wallpaper {
    background-size: auto 100.5%;
    aspect-ratio: 1920/943;
  }
}
.wallpaper__main-title {
  width: calc(286 * var(--ratio));
  margin: 0 auto;
  transform: translate3d(0, -1%, 0);
  position: relative;
  z-index: 50;
}
@media (min-width: 768px) {
  .wallpaper__main-title {
    width: calc(392 * var(--ratio));
    transform: translate3d(0, -3%, 0);
  }
}
.wallpaper__content {
  position: relative;
  width: calc(380 * var(--ratio));
  margin: 0 auto;
  translate: 0 -4%;
  padding-bottom: calc(12 * var(--ratio));
  filter: drop-shadow(0 0 calc(20 * var(--ratio)) rgba(0, 0, 0, 0.6));
}
@media (min-width: 768px) {
  .wallpaper__content {
    width: calc(880 * var(--ratio));
    padding-bottom: calc(12 * var(--ratio));
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 40%;
  }
}
.wallpaper__content .swiper-slide {
  padding: calc(4 * var(--ratio));
}
.wallpaper__content .swiper-slide img {
  border: solid calc(4 * var(--ratio)) #ffffff;
  display: block;
  margin: 0;
  box-shadow: 0 0 0 calc(4 * var(--ratio)) #ffe3b7;
}
.wallpaper__custom-button-prev {
  width: calc(40 * var(--ratio));
  background: transparent url("../images/growth-btn-prev.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 66/56;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(-30%, -50%, 0);
  z-index: 40;
  cursor: pointer;
}
.wallpaper__custom-button-prev.swiper-button-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
@media (min-width: 768px) {
  .wallpaper__custom-button-prev {
    width: calc(52 * var(--ratio));
    transform: translate3d(-60%, -80%, 0);
  }
}
@media (min-width: 1024px) {
  .wallpaper__custom-button-prev {
    transform: translate3d(-140%, -80%, 0);
  }
}
.wallpaper__custom-button-next {
  width: calc(40 * var(--ratio));
  background: transparent url("../images/growth-btn-next.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 66/56;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate3d(30%, -50%, 0);
  z-index: 40;
  cursor: pointer;
}
.wallpaper__custom-button-next.swiper-button-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}
@media (min-width: 768px) {
  .wallpaper__custom-button-next {
    width: calc(52 * var(--ratio));
    transform: translate3d(60%, -80%, 0);
  }
}
@media (min-width: 1024px) {
  .wallpaper__custom-button-next {
    transform: translate3d(140%, -80%, 0);
  }
}
.wallpaper__btn-download {
  width: calc(220 * var(--ratio));
  display: block;
  font-size: 0;
  background: transparent url("../images/wallpaper-btn-download.png") no-repeat center top;
  background-size: cover;
  aspect-ratio: 351/142;
  transition: all 300ms ease;
  left: 50%;
  bottom: 0;
  translate: -50% -80%;
  position: absolute;
}
@media (min-width: 768px) {
  .wallpaper__btn-download {
    width: calc(280 * var(--ratio));
    translate: -50% -40%;
  }
}
@media (hover: hover) {
  .wallpaper__btn-download:hover {
    filter: brightness(1.2);
    translate: -50% -44%;
  }
}

.loading {
  position: fixed;
  z-index: 500;
  background-color: #1d287e;
  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: #1d287e;
  width: calc(170 * var(--ratio));
  border-radius: calc(12 * var(--ratio));
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%, -50%, 0);
  font-size: calc(16 * var(--ratio));
  color: #fff;
  padding: calc(16 * var(--ratio)) 0;
}
@media (hover: hover) {
  .intro-video__btn-skip:hover {
    background-color: #fff;
    color: #1d287e;
  }
}

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

.modal-ui {
  position: relative;
}
.modal-ui__btn-close {
  position: absolute;
  width: calc(52 * var(--ratio));
  aspect-ratio: 1/1;
  background: transparent url("../images/modal-btn-close.png") no-repeat 0 0;
  background-size: cover;
  right: 0;
  top: 0;
  transform: translate3d(-100%, -50%, 0);
  font-size: 0;
  cursor: pointer;
  z-index: 10;
}
@media (hover: hover) {
  .modal-ui__btn-close {
    transition: transform 300ms ease;
  }
  .modal-ui__btn-close:hover {
    transform: translate3d(-100%, -50%, 0) rotate(360deg);
  }
}
.modal-ui__btn-close.video-close {
  transform: translate3d(-10%, -80%, 0);
}
@media (hover: hover) {
  .modal-ui__btn-close.video-close {
    transition: transform 300ms ease;
  }
  .modal-ui__btn-close.video-close:hover {
    transform: translate3d(-10%, -80%, 0) rotate(360deg);
  }
}
.modal-ui__job-content {
  width: calc(980 * var(--ratio));
  position: relative;
}
.modal-ui__job-element {
  position: absolute;
  width: calc(120 * var(--ratio));
  left: 0;
  top: 0;
  translate: 0% 23%;
  animation: rotateAnimation 2000ms ease-in-out infinite alternate;
  transform-origin: 50% 0;
}
.modal-ui__job-video-content {
  width: calc(860 * var(--ratio));
  aspect-ratio: 604/340;
  position: relative;
  transform: translate3d(0, 10%, 0);
}
.modal-ui__job-video-content::after {
  width: calc(1740 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  aspect-ratio: 1920/1246;
  background: transparent url("../images/modal-job-video-bg.png") no-repeat 0 0;
  background-size: cover;
  content: "";
  pointer-events: none;
  transform: translate3d(-50%, -67.5%, 0);
}
.modal-ui__job-video-content iframe {
  box-shadow: 0 0 0 calc(6 * var(--ratio)) #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  z-index: 30;
}
.modal-ui__map-content {
  position: relative;
  background: transparent url("../images/modal-growth-wrap-bg.png") no-repeat 0 0;
  background-size: cover;
  width: calc(960 * var(--ratio));
  aspect-ratio: 1276/795;
  transform: translate3d(0, 10%, 0);
}
.modal-ui__map-image {
  display: block;
  aspect-ratio: 1076/596;
  width: calc(810 * var(--ratio));
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -60%, 0);
}
.modal-ui__map-image.map-image-1 {
  background: transparent url("../images/modal-map-image-1.jpg") no-repeat 0 0;
  background-size: cover;
}
.modal-ui__map-image.map-image-1 .modal-ui__map-btn-more {
  background-position: 0 0;
}
.modal-ui__map-image.map-image-2 {
  background: transparent url("../images/modal-map-image-2.jpg") no-repeat 0 0;
  background-size: cover;
}
.modal-ui__map-image.map-image-2 .modal-ui__map-btn-more {
  background-position: 0 25%;
}
.modal-ui__map-image.map-image-3 {
  background: transparent url("../images/modal-map-image-3.jpg") no-repeat 0 0;
  background-size: cover;
}
.modal-ui__map-image.map-image-3 .modal-ui__map-btn-more {
  background-position: 0 50%;
}
.modal-ui__map-image.map-image-4 {
  background: transparent url("../images/modal-map-image-4.jpg") no-repeat 0 0;
  background-size: cover;
}
.modal-ui__map-image.map-image-4 .modal-ui__map-btn-more {
  background-position: 0 75%;
}
.modal-ui__map-image.map-image-5 {
  background: transparent url("../images/modal-map-image-5.jpg") no-repeat 0 0;
  background-size: cover;
}
.modal-ui__map-image.map-image-5 .modal-ui__map-btn-more {
  background-position: 0 100%;
}
.modal-ui__map-image.disabled .modal-ui__map-btn-more {
  pointer-events: none;
}
.modal-ui__map-btn-more {
  background: transparent url("../images/modal-btn-more-all.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(260 * var(--ratio));
  aspect-ratio: 346/123;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% -2%;
  transition: translate 300ms ease;
}
@media (hover: hover) {
  .modal-ui__map-btn-more:hover {
    translate: -50% -7%;
  }
}
.modal-ui__title {
  background: transparent url("../images/modal-growth-title-all.png") no-repeat 0 0;
  background-size: 100% auto;
  width: calc(540 * var(--ratio));
  aspect-ratio: 702/263;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-98%, -203%, 0);
  z-index: 10;
}
.modal-ui__title.map-title-1 {
  background-position: 0 0;
}
.modal-ui__title.map-title-2 {
  background-position: 0 25%;
}
.modal-ui__title.map-title-3 {
  background-position: 0 50%;
}
.modal-ui__title.map-title-4 {
  background-position: 0 75%;
}
.modal-ui__title.map-title-5 {
  background-position: 0 100%;
}

@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 {
}