@charset "UTF-8";
@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;800&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap';

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15;
  font-size: 80%;
  -webkit-text-size-adjust: 80%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

a {
  all: unset;
  background-color: transparent;
  cursor: pointer;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

::-webkit-scrollbar-track {
  background: var(--primary-clr);
  border-radius: 10px;
}

:root {
  --primary-clr: #4ebfc7;
  --secondary-clr: #ffe624;
  --black-clr: #121212;
  --yellow-clr: #f4c54b;
  --grey-light: #d6d6d6;
  --grey-medium: #757575;
  --grey-dark: #2d2d2d;
  --gold: #e7b76f;
  --silver: #d6d6d6;
  --bronze: #b99174;
  --dark-green: #2a3c3f;
  --text-gray: #cccccc;

  --h-header: 70px;
  --h-header-mobile: 50px;

  --font-Sans: 'Noto Sans TC', 'Helvetica Neue', sans-serif;
  --font-Rubik: 'Rubik', sans-serif;

  --font-h1: clamp(3rem, 5.5vw, 6rem);
  --font-h1-rubik: clamp(3.3rem, 6.2vw, 6rem);
  --font-h2: clamp(1.5rem, 2vw, 2.5rem);
  --font-h2-rubik: clamp(2rem, 2.5vw, 3rem);
  --font-h3: clamp(1rem, 1.8vw, 1.6rem);
  --font-h4: clamp(1rem, 1.5vw, 1.5rem);
  --font-h5: clamp(1rem, 1.2vw, 1.4rem);
  --font-h6: clamp(1rem, 1.2vw, 1.3rem);
  --font-span: clamp(14px, 1vw, 15px);
  --font-p: clamp(12px, 1.2vw, 14px);
  --font-strong: clamp(1.5rem, 4vw, 5rem);
  --font-small: clamp(13px, 1vw, 14px);

  --swiper-theme-color: #4ebfc7 !important;
  --swiper-pagination-bullet-width: 15px !important;
  --swiper-pagination-bullet-height: 15px !important;
}

#app {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}

/* ------------@共用------------ */

h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
small,
strong,
div,
ul,
li,
form {
  cursor: default;
  margin: 0;
}

h1 {
  font-size: var(--font-h1);
}

h2 {
  font-size: var(--font-h2);
}

h3 {
  font-size: var(--font-h3);
}

h4 {
  font-size: var(--font-h4);
}

h5 {
  font-size: var(--font-h5);
}

h6 {
  font-size: var(--font-h6);
}

span {
  font-size: var(--font-span);
}

p {
  font-size: var(--font-p);
}

small {
  font-size: var(--font-small);
}

html {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

div,
section {
  box-sizing: border-box;
}

section {
  /* border: 1px solid rgb(180, 85, 85); */
  width: auto;
  height: 100dvh;
  padding: 10dvh 0 0rem 10dvw;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

section>.title {
  width: fit-content;
  position: relative;
  flex-shrink: 0;
}

section>.title h2 {
  color: var(--primary-clr);
  margin: 0;
}

section>.title img {
  position: absolute;
  width: 70px;
  left: -1rem;
  top: -70%;
}

/* ------------@body------------ */

.font_ml {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  font-family: var(--font-Sans);
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  letter-spacing: 1px;
  color: var(--black-clr);
  opacity: 0;
  transition: 0.3s opacity ease;
}

body.loaded {
  opacity: 1;
}

main {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

main .main_bg {
  position: fixed;
  display: block;
  width: 100%;
  height: 100dvh;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: 0dvw -4dvh;
  opacity: 0.3;
  z-index: 0;
}

main img.logo {
  position: fixed;
  width: 120px;
  top: 1rem;
  left: 10dvw;
  z-index: 999;
}

/* ------------@header mobile------------ */

#headerMobile {
  display: none;
}

/* ------------@menu------------ */

#menuDesktop {
  position: fixed;
  z-index: 1000;
  right: 0px;
  width: 190px;
  top: 20dvh;
  gap: .8rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  transition: 0.2s all ease-in-out;
  transform: translate(0);
  will-change: transform;
}

#menuDesktop .menu_wrap {
  display: flex;
  background-color: #f6fcfc;
  border-radius: 1rem 0 0 1rem;
  padding: 1rem;
  align-items: center;
  flex-direction: row;
}

#menuDesktop img.logo {
  width: 120px;
  transition: 0.2s all ease-in-out;
}

#menuDesktop span.icon {
  font-size: 22px;
  width: 40px;
  color: var(--primary-clr);
  opacity: 0.6;
  transition: 0.2s all ease;
  cursor: pointer;
  transition: 0.5s all ease;
  transform: translateX(-10px);
}

#menuDesktop span.icon:hover {
  opacity: 1;
}

#menuDesktop ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-inline-start: 0.5rem;
}

#menuDesktop ul li {
  font-size: var(--font-p);
  text-align: right;
  line-height: 1.8;
  cursor: pointer;
}

#menuDesktop ul li:hover,
#menuDesktop ul li.active {
  color: var(--primary-clr);
}

#menuDesktop ul li a {
  all: unset;
  display: block;
}

.menu_wrap .menu_links .lang_switcher {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--primary-clr);
  width: 100%;
  margin-bottom: 5px;
}

.menu_wrap .menu_links .lang_switcher a {
  color: var(--grey-medium);
}

.menu_wrap .menu_links .lang_switcher a.active,
.menu_wrap .menu_links .lang_switcher a:hover {
  color: var(--primary-clr);
}

#menuDesktop.hide {
  transform: translateX(65%);
}

#menuDesktop.hide span.icon {
  transform: rotate(180deg) translateX(5px);
}

#menuDesktop.hide img.logo {
  opacity: 0;
}

/* ------------@loader------------ */

/* ------------@banner------------ */

#banner {
  justify-content: center;
  padding-top: 0;
}

#banner .main_title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#banner .main_title .title_wrap {
  position: relative;
}

#banner .main_title .title_wrap h1 {
  display: inline-block;
  letter-spacing: 5px;
  color: var(--dark-green);
  margin: auto auto 0rem 0;
  position: relative;
  z-index: 0;
}

#banner .main_title .title_wrap h1.rubik {
  letter-spacing: 0px;
  font-weight: 600;
  font-family: Rubik, sans-serif;
  margin-left: 1rem;
  line-height: 1;
  font-size: var(--font-h1-rubik);
}

#banner .main_title .title_wrap h2 {
  font-size: var(--font-h2-rubik);
  font-weight: 800;
  display: inline-block;
  margin: 0 auto;
}

#banner .main_title .title_wrap h2 {
  margin-right: 0.5rem;
  color: var(--grey-medium);
}

#banner .main_title .title_wrap img {
  position: absolute;
  left: -1.9dvw;
  top: -0.8dvw;
  width: 9dvw;
  min-width: 100px;
  max-width: 150px;
  z-index: -1;
}

#banner .main_title img {
  width: 20.5dvw;
  min-width: 200px;
  max-width: 300px;
}

#banner .sub_title h3 {
  margin-bottom: 0;
  color: var(--primary-clr);
  letter-spacing: 3px;
}

#banner .sub_title p,
#banner .sub_title span {
  font-size: var(--font-h4);
  color: var(--grey-dark);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  margin-top: 0.7rem;
}

#banner .sub_title span {
  position: relative;
}

#banner .sub_title span:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 70%;
  left: 0.5rem;
  top: 40%;
  z-index: -1;
  opacity: 0.2;
}

#banner .sub_title span.bg_blue:after {
  background-color: var(--primary-clr);
}

#banner .sub_title span.bg_yellow:after {
  background-color: var(--secondary-clr);
}

#banner .main_title .title_wrap .edition_label {
  display: block;
  font-size: var(--font-h2-rubik);
  font-weight: 800;
  color: var(--grey-medium);
  letter-spacing: 3px;
  margin-bottom: 0.2rem;
}

#banner .main_title .title_wrap .edition_label .rubik {
  font-family: var(--font-Rubik);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 1px;
  margin-left: 0.3rem;
}

/* ------------@banner animations------------ */

.banner-anim-line1,
.banner-anim-line2,
.banner-anim-line3,
.banner-anim-logo,
.banner-anim-subtitle {
  opacity: 0;
}

body.loaded .banner-anim-line1 {
  animation: bannerSlideIn 0.6s ease-out 0.3s forwards;
}

body.loaded .banner-anim-line2 {
  animation: bannerSlideIn 0.6s ease-out 0.55s forwards;
}

body.loaded .banner-anim-line3 {
  animation: bannerSlideIn 0.6s ease-out 0.8s forwards;
}

body.loaded .banner-anim-logo {
  opacity: 1;
  visibility: hidden;
  animation: stampVisible 0s 1.75s forwards;
}

body.loaded .banner-anim-subtitle {
  animation: bannerFadeIn 0.6s ease-out 1.1s forwards;
}

@keyframes bannerSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Stamp Scene Layout --- */
.stamp-scene {
  width: 20.5dvw;
  min-width: 200px;
  max-width: 300px;
  position: relative;
  aspect-ratio: 1/1;
  perspective: 600px;
}

.stamp-scene .stamp-result {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.stamp-handle {
  position: absolute;
  width: 95%;
  height: 95%;
  left: 2.5%;
  top: 2.5%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 38%,
      #d4a96a 0%,
      #c9a06c 15%,
      #a07844 40%,
      #8b6534 60%,
      #7a5a30 80%,
      #5a3e20 100%);
  box-shadow: inset 0 0 20px rgba(255, 220, 160, 0.25),
    inset 0 0 8px rgba(80, 40, 10, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
}

/* Wood grain lines */
.stamp-handle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 10deg,
      transparent 0deg,
      rgba(90, 62, 32, 0.08) 2deg,
      transparent 4deg);
  opacity: 0.7;
  z-index: 0;
}

/* 3D knob on top of the stamp */
.stamp-handle::after {
  content: '';
  position: absolute;
  width: 38%;
  height: 38%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 38% 35%,
      #e8c48a 0%,
      #c9a06c 25%,
      #a07844 50%,
      #7a5a30 80%,
      #5a3e20 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 220, 160, 0.4),
    inset 0 -2px 4px rgba(60, 30, 10, 0.3);
}

/* Glossy highlight on knob top */
.stamp-handle .stamp-knob-highlight {
  position: absolute;
  width: 22%;
  height: 16%;
  top: 34%;
  left: 35%;
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(ellipse at center,
      rgba(255, 245, 220, 0.6) 0%,
      rgba(255, 235, 190, 0.2) 50%,
      transparent 80%);
  pointer-events: none;
}

/* Outer rim edge ring for depth */
.stamp-handle .stamp-knob-highlight::after {
  content: '';
  position: absolute;
  width: 170%;
  height: 170%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(90, 60, 30, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 220, 160, 0.15);
}

/* --- Animation Phases --- */

/* Stamp handle: descend, press, lift away */
body.loaded .stamp-handle {
  animation: stampApproach 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19) 1.8s forwards,
    stampImpact 0.08s ease-out 2.05s forwards,
    stampRetract 0.25s ease-in 2.2s forwards;
}

/* Logo: revealed on impact, with ink settle */
body.loaded .stamp-scene .stamp-result {
  animation: stampReveal 0.15s ease-out 2.08s forwards,
    bannerLogoGlow 0.6s ease-out 2.45s forwards;
}

/* Screen shake on impact — applied to whole banner */
body.loaded #banner {
  animation: stampShake 0.15s ease-out 2.06s;
}

/* Stamp approaches from viewer's side (z-axis via scale) */
@keyframes stampApproach {
  0% {
    opacity: 0;
    transform: scale(2.5) translateZ(200px);
    filter: blur(6px);
  }

  15% {
    opacity: 0.6;
    filter: blur(3px);
  }

  40% {
    opacity: 1;
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    filter: blur(0);
  }
}

/* Press into the screen surface */
@keyframes stampImpact {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    transform: scale(0.94);
    box-shadow: inset 0 0 20px rgba(255, 220, 160, 0.25),
      inset 0 0 8px rgba(80, 40, 10, 0.4),
      0 0 0 rgba(0, 0, 0, 0);
  }

  100% {
    opacity: 1;
    transform: scale(0.96);
    box-shadow: inset 0 0 20px rgba(255, 220, 160, 0.25),
      inset 0 0 8px rgba(80, 40, 10, 0.4),
      0 0 0 rgba(0, 0, 0, 0);
  }
}

/* Stamp retracts back toward viewer */
@keyframes stampRetract {
  0% {
    opacity: 1;
    transform: scale(0.96);
    filter: blur(0);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.8);
    filter: blur(2px);
  }

  100% {
    opacity: 0;
    transform: scale(3) translateZ(200px);
    filter: blur(8px);
  }
}

@keyframes stampReveal {
  0% {
    opacity: 0;
    transform: scale(1.04);
    filter: blur(2px);
  }

  50% {
    opacity: 0.7;
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes stampShake {
  0% {
    transform: translate(0, 0);
  }

  15% {
    transform: translate(-3px, 2px);
  }

  30% {
    transform: translate(3px, -2px);
  }

  45% {
    transform: translate(-2px, 1px);
  }

  60% {
    transform: translate(2px, -1px);
  }

  75% {
    transform: translate(-1px, 1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes bannerLogoGlow {
  0% {
    filter: drop-shadow(0 0 0px transparent);
  }

  40% {
    filter: drop-shadow(0 0 18px rgba(78, 191, 199, 0.5));
  }

  100% {
    filter: drop-shadow(0 0 6px rgba(78, 191, 199, 0.15));
  }
}

@keyframes bannerFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stampVisible {
  to {
    visibility: visible;
  }
}

/* ------------@intro------------ */

#intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content;
  padding: 0 0 10dvh 10dvw;
}

#intro .titles {
  display: flex;
  width: 60%;
  gap: 2rem;
  position: relative;
}

#intro .titles .title {
  width: fit-content;
  position: relative;
}

#intro .titles .title h2 {
  color: var(--primary-clr);
  margin: 1rem 0;
}

#intro .titles .title p {
  line-height: 1.4;
  text-align: justify;
}

#intro .titles .title img {
  position: absolute;
  width: 70px;
  left: -13px;
  top: 0rem;
}

#intro .titles .popworld {
  margin-right: auto;
}

#intro .features {
  display: flex;
  width: 66dvw;
  margin: 2rem 0 auto 0;
}

.apply {
  width: 20%;
  max-width: 150px;
  height: 100%;
  display: flex;
  margin-top: auto;
  position: relative;
}

.apply.fixed {
  position: fixed;
  max-width: 120px;
  bottom: 1rem;
  right: 1rem;
  z-index: 10;
  transform: translateX(0);
  transition: .3s all ease;
}

.apply.fixed.hide {
  transform: translateX(120%);
}

.apply.fixed a.apply_link {
  background: transparent;
  border-radius: 50%;
  box-shadow: 0px 5px 11px 1px rgb(0 0 0 / 32%);
}

.apply.fixed a.apply_link span {
  position: absolute;
  font-size: var(--font-h5);
  line-height: 1.4;
  letter-spacing: .5px;
}

.apply a.apply_link {
  margin-top: auto;
  background-size: cover;
  aspect-ratio: 1/1;
  width: 100%;
  position: relative;
  cursor: pointer;
}

.apply a.apply_link img {
  position: absolute;
  width: 100%;
  transition: 0.2s all ease;
}

.apply a.apply_link img.yellow_bg {
  opacity: 0;
}

.apply a.apply_link span {
  position: absolute;
  font-size: var(--font-h4);
  cursor: pointer;
  width: 100%;
  text-align: center;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  transition: 0.2s all ease;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.apply a.apply_link:hover img.yellow_bg {
  opacity: 1;
}

.apply a.apply_link:hover span {
  color: var(--grey-medium);
}

#intro .features .feature_wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.5rem;
}

#intro .feature_wrap .feature {
  background-color: var(--grey-dark);
  display: flex;
  position: relative;
  justify-content: space-between;
  color: #fff;
  border-radius: 5rem;
  padding: 15px 30px;
  width: 88%;
  height: 110px;
  transition: height 0s ease, 0.5s width ease;
}

#intro .feature_wrap .feature:nth-of-type(2) {
  margin-left: 2rem;
}

#intro .feature_wrap .feature:nth-of-type(3) {
  margin-left: 4rem;
}

#intro .features .feature_wrap .feature.hide {
  width: 110px;
  height: 110px;
  transition: height 0s ease, 0.5s width ease;
}

#intro .feature .info {
  width: calc(100% - 70px);
  opacity: 1;
  transform: scale(1);
  transition: transform 0s ease 0.5s, opacity 0.5s ease 0.5s;
  transform-origin: left;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#intro .features .feature_wrap .feature.hide .info {
  opacity: 0;
  transform: scale(0);
  transition: transform 0s ease, opacity 1s ease 1s;
}

#intro .feature .info h3 {
  margin: 0px 0 5px 0;
  color: var(--primary-clr);
  transition: 0.2s all ease;
}

#intro .feature .info h3.link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}

#intro .feature .info .link span {
  cursor: pointer;
}

#intro .feature .icon_wrap {
  position: absolute;
  height: 83%;
  max-width: 95px;
  aspect-ratio: 1/1;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  border-radius: 50%;
  background: white;
  color: var(--primary-clr);
  transition: 0.2s all ease;
}

#intro .feature:hover .info h3 {
  color: var(--secondary-clr);
}

#intro .feature:hover .icon_wrap {
  color: var(--secondary-clr);
}

.icon_wrap .icon {
  height: 80%;
  width: 100%;
  margin: auto;
}

.material-symbols--chevron-right-rounded {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375q0 .2-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ------------@timeline------------ */

#timeline {
  display: grid;
  padding: 0;
  width: 100dvw;
  min-height: 700px;
  grid-template-columns: repeat(8, 1fr) 210px;
  grid-template-rows: repeat(2, 1fr) 2px repeat(2, 1fr);
}

#timeline>div:not(.center) {
  --color: var(--grey-medium);
  --border-width: 2px;
  aspect-ratio: 1/1;
  max-height: 100%;
  position: relative;
  pointer-events: none;
}

#timeline>div.bottom::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--border-width);
  height: 2rem;
  background-color: var(--color);
  transition: .3s width ease;
  will-change: width;
  z-index: 0;
}

#timeline>div.top:not(:first-child, .ml)::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 1px;
  height: 2rem;
  background-color: var(--color);
  z-index: 0;
}

#timeline>div.active {
  --color: var(--primary-clr);
  --border-width: 2px;
}

.top1 {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  grid-area: 1 / 1 / 3 / 3;
  margin-top: auto;
  padding-bottom: 2rem;
  color: var(--primary-clr);
}

.top1 .title h2 {
  position: relative;
  line-height: 1.2;
}

.top1 .title img {
  position: absolute;
  width: 70px;
  left: -1rem;
  bottom: -1rem;
}

.top2 {
  grid-area: 1 / 3 / 3 / 5;
  margin-top: auto;
}

.top3 {
  grid-area: 1 / 5 / 3 / 7;
  margin-top: auto;
}

.top4 {
  grid-area: 1 / 7 / 3 / 9;
  margin-top: auto;
}

#timeline .top4 .circle_wrap {
  max-width: 190px;
  max-height: 190px;
}

.center {
  grid-area: 3 / 1 / 4 / 10;
  height: 2px;
  position: relative;
  background-color: var(--grey-medium);
  z-index: 0;
}

.center .timeline_bar {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(0 / 8 * (100% - 210px));
  height: 100%;
  background-color: var(--primary-clr);
  z-index: 1;
  transition: 0.3s width linear;
}

.bottom1 {
  grid-area: 4 / 1 / 6 / 3;
}

.bottom2 {
  grid-area: 4 / 3 / 6 / 5;
}

.bottom3 {
  grid-area: 4 / 5 / 6 / 7;
}

.bottom4 {
  grid-area: 4 / 7 / 6 / 9;
}

/* circle_wrap */
#timeline .circle_wrap {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 80%;
  height: 80%;
  max-width: 150px;
  max-height: 150px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: var(--border-width) solid var(--color);
  color: var(--color);
  gap: 0.5rem;
  z-index: 1;
  background-color: white;
  pointer-events: auto;
}

#timeline .circle_wrap .date {
  font-family: var(--font-Rubik);
  text-wrap: nowrap;
  font-size: clamp(2rem, 2vw, 2.5rem);
}

#timeline .circle_wrap .sub_date {
  position: absolute;
  font-family: var(--font-Rubik);
  top: 0.8rem;
  font-weight: 600;
}

#timeline .circle_wrap .sub_date .line {
  transform: rotate(90deg);
}

#timeline .circle_wrap span {
  font-size: var(--font-h3);
  font-weight: 800;
}

#timeline .circle_wrap small {
  font-size: var(--font-span);
  position: relative;
  font-weight: normal;
}

#timeline .circle_wrap small::before {
  content: attr(data-date);
  position: absolute;
  font-size: 0.7em;
  bottom: 16px;
  font-weight: normal;
  text-align: center;
  width: 100%;
}

#timeline .circle_wrap.bottom {
  position: absolute;
  z-index: 2;
  top: 2rem;
  right: 0;
  transform: translateX(50%);
  transition: 0.3s all linear;
}

#timeline .circle_wrap.bottom:before {
  content: '';
  height: 2rem;
  width: 2px;
  position: absolute;
  top: 0;
}

#timeline .circle_wrap.top {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 2rem;
  transform: translateX(50%);
}

#timeline .circle_wrap.top:before {
  content: '';
  height: 2rem;
  width: 2px;
  position: absolute;
  bottom: 0;
}

/* sub_circle_wrap */
#timeline .sub_circle_wrap {
  box-sizing: content-box;
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  gap: 5px;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 25%;
  height: 25%;
  max-width: 100px;
  min-width: 80px;
  max-height: 100px;
  min-height: 80px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--color);
  color: white;
  z-index: 0;
  pointer-events: auto;
  transition: 0.3s all linear;
}

#timeline .circle_wrap:hover+.sub_circle_wrap,
#timeline .sub_circle_wrap:hover {
  background-color: var(--secondary-clr);
  color: var(--grey-medium);
  transition: 0.3s all ease;
}

#timeline .circle_wrap:hover+.sub_circle_wrap a,
#timeline .sub_circle_wrap:hover a {
  color: var(--grey-medium);
}

#timeline .bottom .sub_circle_wrap {
  top: 190px;
  right: -40%;
}

#timeline .top .sub_circle_wrap {
  bottom: 176px;
  left: 58%;
}

#timeline .sub_circle_wrap:has(.date) {
  width: 35%;
  height: 35%;
  min-width: 110px;
  min-height: 110px;
}

#timeline .sub_circle_wrap .date {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-Rubik);
  font-weight: 800;
}

#timeline .sub_circle_wrap span {
  font-weight: 500;
}

#timeline .sub_circle_wrap small {
  font-size: var(--font-small);
  position: relative;
  font-weight: normal;
}

#timeline .sub_circle_wrap small::before {
  content: attr(data-date);
  position: absolute;
  font-size: 0.7em;
  bottom: 16px;
  font-weight: normal;
  text-align: center;
  width: 100%;
}

#timeline .sub_circle_wrap a {
  font-size: var(--font-h6);
  cursor: pointer;
  color: white;
  text-decoration: underline;
  font-weight: 500;
  line-height: 1.5;
  text-underline-offset: 3px;
  transition: .2s all ease;
}

#timeline.en .circle_wrap {
  max-width: 160px;
  max-height: 160px;
}


#timeline.en .bottom3 .circle_wrap {
  padding: 1.2rem 2rem 2.2rem 2rem;
}

#timeline.en small[data-date] {
  display: none;
}

/* ------------@prerequisite------------ */

#prerequisite {
  gap: 1rem;
  height: auto;
  padding: 10dvh 0 10dvh 10dvw;
  width: 100dvw;
}

#prerequisite::after {
  content: '';
  height: 100%;
  width: 300px;
  right: 0;
  position: absolute;
  pointer-events: none;
  top: 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.6) 60%,
      rgba(255, 255, 255, 0.8) 70%,
      rgba(255, 255, 255, 1) 100%);
  z-index: 2;
}

#prerequisite h3 {
  margin: 0;
}

#prerequisite .hint {
  font-size: var(--font-h6);
  font-weight: 500;
  background-color: var(--primary-clr);
  color: white;
  border-radius: 2rem;
  width: fit-content;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
}

.swiper.prerequisite {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem 0;
}

.swiper.prerequisite .bottom_content,
.swiper.prerequisite .top_content {
  display: flex;
  gap: 0.5rem;
  position: relative;
  width: auto;
  align-items: center;
}

.swiper.prerequisite .top_content h5 {
  margin: 0;
}

.swiper.prerequisite .top_content .swiper-pagination {
  position: relative;
  width: fit-content;
  bottom: -2px;
}

.swiper-button-next.prerequisite,
.swiper-button-prev.prerequisite {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--grey-light);
  color: var(--grey-light);
  background-color: white;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  font-size: 1rem;
  transition: 0.2s all ease;
}

.swiper-button-next.prerequisite:hover,
.swiper-button-prev.prerequisite:hover {
  border: 2px solid var(--primary-clr);
  background-color: var(--primary-clr);
  color: white;
}

#prerequisite span.icon {
  font-size: 22px;
  cursor: pointer;
}

#prerequisite .swiper-button-next:after {
  content: '';
  cursor: pointer;
}

#prerequisite .swiper-button-prev:after {
  cursor: pointer;
  content: '';
}

.swiper.prerequisite .swiper-slide {
  box-sizing: content-box;
  border: 2px solid var(--grey-light);
  background-color: #fff;
  position: relative;
  border-radius: 2rem;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.swiper.prerequisite .swiper-slide:has(.apply_link),
.swiper.prerequisite .swiper-slide.last {
  border: none;
  background-color: transparent;
}

.swiper.prerequisite .swiper-slide span {
  font-size: var(--font-h5);
  font-weight: 600;
  width: 90%;
  line-height: 1.5;
  margin: 0 auto;
  color: var(--black-clr);
}

.swiper.prerequisite .swiper-slide .visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-clr);
  color: white;
  width: 40%;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.swiper.prerequisite .swiper-slide .visual.yellow {
  background-color: var(--secondary-clr);
}

.swiper.prerequisite .swiper-slide .visual span {
  color: white;
  font-size: clamp(3rem, 6vw, 6rem);
}

.swiper.prerequisite .swiper-slide p {
  font-size: var(--font-p);
  font-weight: 500;
  line-height: 1.4;
  text-align: justify;
  width: 90%;
  margin: 0 auto;
}

.swiper.prerequisite .swiper-slide a {
  color: var(--primary-clr);
  font-weight: 600;
}

.swiper.prerequisite .swiper-slide .link {
  cursor: pointer;
  font-size: var(--font-h5);
  border-radius: 2rem;
  width: fit-content;
  padding: 0.5rem 1rem;
  border: 2px solid var(--primary-clr);
  color: var(--primary-clr);
  transition: 0.2s all ease;
}

.swiper.prerequisite .swiper-slide .link:hover {
  background-color: var(--primary-clr);
}

.swiper.prerequisite .swiper-slide .link:hover a {
  color: white;
  transition: 0.2s all ease;
}


.swiper.prerequisite .swiper-slide a.apply_link {
  margin: auto;
  background-size: cover;
  aspect-ratio: 1/1;
  width: 70%;
  position: relative;
  cursor: pointer;
}


.swiper.prerequisite .swiper-slide a.apply_link img {
  position: absolute;
  width: 100%;
  left: 0;
  transition: 0.2s all ease;
}

.swiper.prerequisite .swiper-slide a.apply_link img.yellow_bg {
  opacity: 0;
}

.swiper.prerequisite .swiper-slide a.apply_link span {
  position: absolute;
  font-size: var(--font-h5);
  line-height: 1.5;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  color: #fff;
  transition: 0.2s all ease;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.swiper.prerequisite .swiper-slide a.apply_link {
  width: 82%;
}


.swiper.prerequisite .swiper-slide a.apply_link.ml span {
  font-size: var(--font-span);
}


.swiper.prerequisite .swiper-slide a.apply_link:hover img.yellow_bg {
  opacity: 1;
}

.swiper.prerequisite .swiper-slide a.apply_link:hover span {
  color: var(--grey-medium);
}

/* ------------@assignment------------ */
#assignment {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  gap: 2rem;
  padding: 10dvh 0 10dvh 10dvw;
  width: calc(100dvw - 210px);
}

#assignment .steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 60dvw;
}

.steps .step {
  box-sizing: content-box;
  color: var(--grey-dark);
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  width: 90%;
  border: 2px solid var(--grey-light);
  height: 100px;
  gap: 1rem;
  transition: 0.2s all ease;
}

.steps .step:hover {
  background-color: var(--grey-dark);
  color: var(--primary-clr);
  border-color: var(--grey-dark);
}

.steps .step:hover .num span {
  color: white;
}

.steps .step:hover .content h3 {
  color: var(--primary-clr);
}

.steps .step .num {
  font-family: var(--font-Rubik);
  font-size: var(--font-h4);
  font-weight: bold;
  color: var(--primary-clr);
}

.steps .step .num span {
  font-size: var(--font-h4);
  color: var(--black-clr);
}

.steps .step .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  color: var(--grey-medium);
  gap: 5px;
}

.steps .step:hover .content {
  color: white;
}

.steps .step .content h3 {
  color: var(--black-clr);
  font-family: var(--font-Sans);
  font-weight: 800;
}

.steps .step .content a span {
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}


.steps .step .link {
  height: 95%;
  font-weight: 500;
  font-size: 14px;
  max-width: 115px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  text-align: center;
  line-height: 1.4;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--grey-medium);
  color: white;
  transition: 0.2s all ease;
}

.steps .step:hover .link {
  background-color: var(--primary-clr);
}

.steps .step .link a {
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: .5px;
  font-size: var(--font-h5);
}

/* ------------@grading------------ */

#grading {
  padding-bottom: 10dvh;
  height: max-content;
}

#grading .table {
  width: 85%;
  border-radius: 1rem;
  margin: 2rem 0 0;
  overflow: hidden;
  transition: 0.5s filter ease;
}

#grading .table.disabled {
  filter: grayscale(1);
}

#grading .table .row[data-item='Execution'] {
  --bg-clr: #f6e3e3;
  --title-clr: #cd5050;
  --label-clr: #dc6666;
  --border-clr: #e39e9e;
}

#grading .table .row[data-item='Creativity'] {
  --bg-clr: #f6f1e3;
  --title-clr: #ecbd43;
  --label-clr: #f4c54b;
  --border-clr: #fdde8f;
}

#grading .table .row[data-item='Design'] {
  --bg-clr: #e3f5f6;
  --title-clr: #53a0c0;
  --border-clr: #8fc0d4;
}

#grading .table .row[data-item='Function'] {
  --bg-clr: #e3f6e6;
  --title-clr: #72985b;
  --border-clr: #a9c19a;
}

#grading .table .row[data-item='Testing'] {
  --bg-clr: #e0d3ec;
  --title-clr: #9378ac;
  --border-clr: #ae9ac1;
}

.table .row {
  position: relative;
  gap: 1rem;
  display: flex;
  align-items: center;
  padding-left: 2rem;
  background-color: var(--bg-clr);
}

.table .row:before {
  position: absolute;
  content: '';
  width: clamp(0.5rem, 2vw, 0.8rem);
  height: 100%;
  left: 0;
  background-color: var(--border-clr);
}

.table .row .title {
  color: var(--title-clr);
  margin: 1rem 0;
  width: 150px;
  display: flex;
  flex-shrink: 0;
}

.table .row .title h4 {
  font-weight: bolder;
}

.table .row .content {
  padding: 1rem;
  font-size: var(--font-span);
  list-style-type: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.table .row .content li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--black-clr);
}

.table .row .content li label {
  background-color: var(--label-clr);
  color: white;
  width: 130px;
  font-weight: bold;
  text-align: center;
  height: fit-content;
  flex-shrink: 0;
  border-radius: 2rem;
  padding: 5px 0.8rem;
}

/* ------------@workshop------------ */

#workshop {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: max-content;
  padding-bottom: 10dvh;
}

#workshop .subtitle h4 {
  font-weight: 500;
}

#workshop .content {
  display: grid;
  margin-top: 1rem;
  width: calc(100% - 240px);
  grid-template-columns: 40% 1fr;
  gap: 1rem;
}

.content .item_wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.content .item_wrap .item {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  padding: 0.8rem 1.2rem;
  border-radius: 1rem;
  gap: 0;
  border: 2px solid var(--grey-light);
  transition: 0.3s all ease;
}

.content .item_wrap * {
  cursor: pointer !important;
}

.content .item_wrap .item .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--grey-medium);
}

.content .item_wrap .item .icon {
  width: 1rem;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  transition: 0.3s all ease;
}

.item_wrap .item:hover .icon i,
.item_wrap .item.active .icon i {
  background-color: var(--yellow-clr);
}

.item_wrap .item.active .icon i:last-child,
.item_wrap .item:hover .icon i:last-child {
  transform: rotate(90deg) translate(-1px, 0.5rem);
  background-color: var(--yellow-clr);
}

.item_wrap .item .icon i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 100%;
  display: block;
  background-color: var(--grey-light);
}

.item_wrap .item .icon i:last-child {
  transform-origin: center;
  transform: rotate(0deg) translate(-0.5rem, -1px);
  transition: .2s all ease;
}

.content .item_wrap .item .desc {
  line-height: 1.5;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0s, height 0.3s ease 0.3s;
}

.item_wrap .item.active {
  gap: 0.5rem;
}

.item_wrap .item.active .head {
  color: var(--primary-clr);
  transition: 0.3s all ease;
}



.item_wrap .item.active .desc {
  height: auto;
  opacity: 1;
  transition: height 0.3s ease, opacity 0.3s ease 0.2s;
}

#workshop .image_container {
  overflow: hidden;
  border-radius: 1rem;
}

#workshop .image_container img {
  object-fit: contain;
  object-position: top;
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: 1rem;
}

/* ------------@awards------------ */

#awards {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  gap: 2rem;
  padding: 10dvh 0 10dvh 10dvw;
  width: 90dvw;
}

#awards .list {
  display: flex;
  margin: 0 auto 0 3rem;
  gap: 1rem;
}



.list .award {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-radius: 6rem;
  cursor: pointer;
  padding: 0.8rem;
  color: var(--black-clr);
  background-color: #fff;
  border: 2px solid var(--grey-medium);
  transition: 0.3s all ease;
}

.list .award * {
  cursor: pointer;
}

.list .left,
.list .right {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list .left {
  padding-bottom: 3rem;
}

.list .right {
  padding-top: 3rem;
}

.list .award .content {
  overflow: hidden;
  width: 100%;
  min-width: 210px;
  max-width: 250px;
  height: 100%;
  position: relative;
}

.list .award .content>div {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  transition: 0.3s all ease;
}

.list .award .content .title {
  transform: translateX(0);
  transition: 0.2s transform ease 0.3s;
}

.list .award .content .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transform: translateX(100%);
  transition: 0.2s transform ease 0.3s;
}

.list .award .content .desc span {
  font-size: var(--font-h5);
}

.list .award:hover .content .title {
  transform: translateX(-100%);
}

.list .award:hover .content .desc {
  transform: translateX(0);
}

.list .award .img_wrap {
  --bg-clr: white;
  --img-clr: var(--grey-light);
  border-radius: 50%;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 60px;
  aspect-ratio: 1/1;
  max-width: 60px;
  background-color: var(--bg-clr);
  border: 2px solid var(--grey-light);
}

.list .award .img_wrap span {
  color: var(--dark-green);
  font-size: 3rem;
}

.list .award .img_wrap.gold {
  --bg-clr: var(--yellow-clr);
  border-color: transparent;
}

.list .award .img_wrap.silver {
  --bg-clr: #c1c1c1;
  border-color: transparent;
}

.list .award .img_wrap.bronze {
  --bg-clr: var(--bronze);
  border-color: transparent;
}

.list .award .img_wrap.star {
  --img-clr: var(--dark-green);
  border-color: var(--grey-light);
}

.list .award .img_wrap.comments {
  --img-clr: var(--dark-green);
  border-color: var(--grey-light);
}

.list .award .img_wrap img {
  width: 80%;
  object-fit: contain;
  margin: auto;
}

.list .award>span {
  font-size: 1rem;
  transform: rotate(0deg);
  transition: 0.3s all ease 0.3s;
  color: var(--grey-light);
  flex-shrink: 0;
  cursor: pointer;
}

.list .award:hover {
  background-color: var(--black-clr);
  color: white;
  border: 2px solid var(--black-clr);
}

.list .award:hover>span,
.list .award.show>span {
  transform: rotate(180deg);
}


#awards .list.ml {
  width: 50dvw;
  max-width: 750px;
}

.list .award.ml .content {
  min-width: 80%;
}

.list .award.ml .content .title {
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* ------------@qualifiers + @winners------------ */

section#qualifiers,
section#winners {
  height: auto;
  padding-top: 2rem;
  padding-bottom: calc(5rem + 50px);
}

section#lastYearWinners {
  height: auto;
  padding-top: 2rem;
  padding-bottom: calc(5rem + 50px);
}

.game_list {
  width: calc(100% - 210px);
  display: grid;
  grid-template-columns: repeat(auto-fit, 260px);
  grid-auto-rows: max-content;
  grid-gap: 1rem 1rem;
}

.game_list .game.winner {
  --text-clr: var(--primary-clr);
  --bg-clr: var(--grey-dark);
}

.game_list .game {
  padding-top: 2rem;
  --text-clr: white;
  --bg-clr: var(--primary-clr);
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
}

.game_list .game.active .content {
  top: 0;
  border-radius: 2rem;
}

.game_list .game.active .content .desc {
  transform: translateY(0);
  opacity: 1;
}

.game_list .game .img_container {
  width: 100%;
  aspect-ratio: 1/1;
  padding-bottom: 20%;
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: 0 1px 5px #0003, 0 2px 2px #00000024, 0 3px 1px -2px #0000001f;
}

.game_list .game .img_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game .content h5 {
  text-align: center;
  font-size: var(--font-p);
}

.game .content {
  height: calc(100% - 2rem);
  margin-top: 2rem;
  position: absolute;
  top: 67%;
  width: 100%;
  padding: 1.8rem 1rem 0 1rem;
  display: flex;
  color: var(--text-clr);
  background-color: var(--bg-clr);
  flex-direction: column;
  gap: 1rem;
  opacity: 1;
  transition: .5s all ease;
}

.game .content .desc {
  height: 100%;
  position: relative;
  overflow-y: scroll;
  font-size: var(--font-small);
  padding: 0 .5rem 1.2rem;
  text-align: justify;
  opacity: 0;
  transform: translateY(50px);
  transition: .2s all;
}

.game .content .desc::-webkit-scrollbar {
  width: 6px;
}

.game .content .desc::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.271);
  border-radius: 10px;
}

.game .content .desc::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 10px;
  width: 4px;
}

.game .content .desc::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.game .content .more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .5rem 0 1rem;
}

.game .content .more a {
  cursor: pointer;
  color: var(--text-clr);
  background-color: var(--bg-clr);
  padding: 5px .5rem;
  border-radius: 1rem;
  display: flex;
  border: 2px solid white;
  transition: .5s all ease;
}

.game .content .more a small {
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 500;
}

.game .content .more a:hover {
  color: var(--bg-clr);
  background-color: var(--text-clr);
}

.game .content .more::after {
  content: "";
  position: absolute;
  bottom: 57px;
  left: 0;
  width: 90%;
  height: 25px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-clr) 100%);
  z-index: 1;
}

.game.winner .wrap {
  width: calc(100% - 1rem);
  height: 100%;
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
}

/* .game.winner.active .wrap {
  overflow: visible;
} */


.game.winner .content {
  width: 100%;
  height: 100%;
  border-radius: 0rem;
  top: 66%;
}

.game.winner .content .more a {
  color: white;
  background-color: var(--grey-dark);
}

.game.winner .content .more a:hover {
  color: white;
  background-color: var(--primary-clr);
  border-color: var(--primary-clr);
}

.game_list .game.active.winner .content {
  top: -2rem;
}

.game .btn {
  position: absolute;
  cursor: pointer;
  top: 71%;
  left: 50%;
  border: var(--bg-clr) 3px solid;
  background-color: var(--bg-clr);
  color: var(--text-clr);
  transform: translate(-50%, 0px) rotate(-90deg);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  padding: 5px;
  transition: .3s all linear;
  z-index: 1;
}

.game.active .btn {
  transition: .4s all ease;
  transform: translate(-50%, -196px) rotate(-90deg);
}

.game .btn span {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform: translate(0px, 0px) rotate(0deg) scale(1);
  transform-origin: center;
  transition: .5s all ease;
}

.game.active .btn span {
  transform: translate(0px, 0px) rotate(180deg) scale(1);
}

.game .btn:hover {
  background-color: white;
  color: var(--bg-clr);
  transition: .2s all ease;
}

.game.winner .btn {
  color: white;
  left: 47%;
  top: 74%;
}

.game.winner.active .btn {
  color: white;
  left: 47%;
  transform: translate(-50%, -191px) rotate(-90deg);
}


.game.winner .btn:hover {
  background-color: var(--primary-clr);
  color: white;
}


.game.winner .img_wrap {
  --bg-clr: white;
  --img-clr: var(--dark-green);
  border-radius: 50%;
  position: absolute;
  right: 6px;
  top: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 45px;
  aspect-ratio: 1/1;
  max-width: 63px;
  background-color: var(--bg-clr);
  border: 2px solid var(--dark-green);
}

.game.winner .img_wrap span {
  color: var(--img-clr);
  font-size: 2.5rem;
}

.game.winner .img_wrap.gold {
  --bg-clr: var(--yellow-clr);
  border-color: transparent;
}

.game.winner .img_wrap.silver {
  --bg-clr: #c1c1c1;
  border-color: transparent;
}

.game.winner .img_wrap.bronze {
  --bg-clr: var(--bronze);
  border-color: transparent;
}

.game.winner .img_wrap.star {
  --img-clr: var(--dark-green);
  border-color: var(--dark-green);
}

.game.winner .img_wrap.comments {
  --img-clr: var(--dark-green);
  border-color: var(--dark-green);
}

.game.winner .img_wrap img {
  width: 80%;
  object-fit: contain;
  margin: auto;
}


/* ------------@notice------------ */
#notice {
  flex-direction: row;
  gap: 4rem;
  padding: 10dvh 10dvw;
  height: max-content;
  background-color: var(--grey-dark);
  color: white;
}

.notices h2 {
  color: var(--primary-clr);
}

.notices ol {
  padding-inline-start: 1.2em;
}

.notices li {
  font-size: var(--font-small);
  line-height: 1.4;
  text-align: justify;
}

#notice .company {
  display: flex;
  flex-direction: column;
  height: fit-content;
  gap: 2rem;
}

.company h2 {
  color: var(--secondary-clr);
}

.company a {
  margin: auto 0;
}

/* =========================== RWD ========================== */

@media screen and (max-width: 992px) {
  footer {
    padding-top: 2dvh;
  }

  #awards {
    flex-direction: column;
    width: 100%;
    padding: 10dvh 1rem;
  }

  #awards .list {
    margin: 0;
  }

  #workshop .content {
    width: 80dvw;
  }
}

@media screen and (max-width: 768px) {
  section:not(#banner) {
    height: fit-content;
    padding: 2dvh 0 5dvh 10dvw;
  }

  #intro .features {
    width: 76dvw;
  }

  #intro .features .apply {
    width: 30%;
  }

  section#timeline {
    height: 80dvh;
    padding: 2dvh 0 2dvh 0dvw;
    grid-template-columns: repeat(8, 1fr) 5dvw;
  }

  #awards,
  #assignment,
  #prerequisite {
    width: 100dvw;
  }

  #workshop .content,
  #grading .table {
    width: 90%;
  }

  section#awards {
    padding-right: 2rem;
    flex-direction: row;
  }

  #awards .list {
    margin-left: 0;
  }

  .list .award .content {
    min-width: 120px;
    min-height: 60px;
  }

  .list .award .content .desc small {
    display: none;
  }
}

@media screen and (max-width: 568px) {
  :root {
    --font-h1: clamp(3.5rem, 5.5vw, 6rem);
    --font-h1-rubik: clamp(4rem, 6.2vw, 6rem);
    --font-h2: clamp(1.6rem, 3vw, 2.5rem);
    --font-h2-rubik: clamp(1.6rem, 3vw, 3rem);
    --font-h3: clamp(1.2rem, 1.8vw, 1.6rem);
    --font-h4: clamp(1.2rem, 1.5vw, 1.5rem);
    --font-h5: clamp(1rem, 1.2vw, 1.4rem);
    --font-p: clamp(14px, 1.2vw, 1.2rem);
    --font-small: 11px;
    --swiper-pagination-bullet-width: 10px !important;
    --swiper-pagination-bullet-height: 10px !important;
  }

  section:not(#banner) {
    padding: 2rem 1.5rem 3rem 1.5rem;
    height: 100%;
  }

  section>.title {
    width: 100%;
  }

  #menuDesktop {
    top: 55px;
    background-color: var(--primary-clr);
    border-radius: 0rem 0 0 1rem;
    color: white;
    box-shadow: -2px 5px 7px 0px rgba(0, 0, 0, 0.2);
  }


  #menuDesktop img.logo {
    display: none;
  }

  #menuDesktop.hide {
    transform: translateX(130%);
  }

  #menuDesktop .menu_wrap {
    background-color: transparent;
    padding-top: 0;
  }

  #menuDesktop #menuBtn {
    display: none;
  }

  #menuDesktop ul li {
    text-align: left;
    padding: 0.2rem 0.6rem;
  }

  #menuDesktop ul li a {
    font-weight: 500;
  }

  #menuDesktop ul li:hover,
  #menuDesktop ul li.active {
    background-color: white;
    color: var(--grey-dark);
    border-radius: 0.5rem;
  }

  .menu_wrap .menu_links .lang_switcher {
    padding: 0.2rem 0.6rem;
    justify-content: flex-start;
  }

  .menu_wrap .menu_links .lang_switcher,
  .menu_wrap .menu_links .lang_switcher a.active,
  .menu_wrap .menu_links .lang_switcher a:hover {
    color: white;
  }

  #headerMobile {
    display: flex;
    align-self: center;
    justify-content: space-between;
    position: fixed;
    height: 55px;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f6fcfc;
    z-index: 10;
    padding-left: 1.5rem;
  }

  #headerMobile a {
    width: 2rem;
  }

  #headerMobile img {
    width: 100%;
    height: 100%;
  }

  #navopen {
    display: flex;
    align-items: center;
  }

  #navopen div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 100%;
    transition: 0.2s all ease;
  }

  #navopen.open div {
    background-color: var(--primary-clr);
  }

  #navopen div i {
    width: 100%;
    height: 3px;
    width: 25px;
    background-color: var(--grey-medium);
    display: block;
    border-radius: 100px;
    top: 50%;
    position: absolute;
    margin: -5px 0 0;
    transition: all 0.2s ease;
  }

  #navopen div i:nth-of-type(1) {
    margin: -8px 0 0;
  }

  #navopen div i:nth-of-type(2) {
    margin: 0;
  }

  #navopen div i:nth-of-type(3) {
    margin: 8px 0 0;
  }

  #navopen.open div i {
    transform-origin: center;
    background-color: white;
  }

  #navopen.open div i:nth-of-type(1) {
    transform: translateY(8px) rotate(45deg);
    transform-origin: center;
  }

  #navopen.open div i:nth-of-type(2) {
    transform: scale(0);
    transform-origin: center;
  }

  #navopen.open div i:nth-of-type(3) {
    transform: translateY(-8px) rotate(-45deg);
    transform-origin: center;
  }

  #banner {
    padding: 1rem;
    height: 100vh;
  }

  #banner .main_title {
    flex-direction: column-reverse;
  }

  #banner .main_title img {
    width: 100%;
    max-width: 220px;
  }

  .stamp-scene {
    width: 100%;
    max-width: 220px;
  }

  #banner .main_title .title_wrap {
    text-align: center;
  }

  #banner .main_title .title_wrap h2 {
    display: inline;
  }

  #banner .main_title .title_wrap img {
    display: none;
  }

  #banner .main_title .title_wrap h1.rubik {
    margin-left: 0;
  }

  #banner .sub_title {
    text-align: center;
    margin-bottom: 2rem;
  }

  #banner .sub_title h3 {
    font-size: 1.6rem;
    margin-top: 2rem;
  }

  #banner .sub_title p {
    font-size: 1rem;
  }

  #banner .main_title .title_wrap .edition_label {
    font-size: var(--font-h2-rubik);
    margin-bottom: 0.1rem;
  }

  section#intro {
    padding-top: 0;
  }

  #intro .features {
    width: 100%;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2rem;
  }

  #intro .titles {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }

  #intro .feature_wrap .feature {
    margin-left: 0 !important;
    width: 100%;
    height: 140px;
    padding: 20px 32px;
  }

  #intro .feature .icon_wrap {
    right: 18px;
    height: 80px;
  }

  #intro .feature.hide .icon_wrap {
    right: 30px;
  }

  #intro .features .feature_wrap .feature.hide {
    height: 140px;
    width: 140px;
  }

  #intro .features .apply {
    width: 40%;
  }

  #intro.en .feature_wrap .feature {
    width: 100%;
    height: 170px;
    padding: 20px 33px 20px 40px;
    border-radius: 8rem;
  }

  #intro.en .features .feature_wrap .feature.hide {
    height: 170px;
    width: 170px;
    border-radius: 8rem;
  }


  section#timeline {
    display: grid;
    box-sizing: content-box;
    width: 100%;
    height: 1000px;
    padding: 5rem 0 0rem;
    grid-template-columns: 50% 2px 50%;
    grid-template-rows: repeat(8, 1fr) 0;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .top1 {
    grid-area: 1 / 3 / 3 / 4;
    align-items: flex-start;
    left: -50%;
    top: -55px;
    z-index: 1;
  }

  .top1 .title {
    background-color: white;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-clr);
  }

  .top1 .title h2 {
    font-size: var(--font-h3);
  }

  .top1 .title h2 img {
    display: none;
  }

  .top2 {
    grid-area: 3 / 3 / 5 / 4;
    margin-top: auto;
  }

  .top3 {
    grid-area: 5 / 3 / 7 / 4;
    margin-top: auto;
  }

  .top4 {
    grid-area: 7 / 3 / 9 / 4;
    bottom: 50%;
    right: 50%;
  }

  .center {
    grid-area: 1 / 2 / 8 / 3;
    position: relative;
    background-color: var(--grey-medium);
    z-index: 0;
    height: 100%;
    width: 2px;
  }

  .bottom1 {
    grid-area: 1 / 1 / 3 / 2;
  }

  .bottom2 {
    grid-area: 3 / 1 / 5 / 2;
  }

  .bottom3 {
    grid-area: 5 / 1 / 7 / 2;
  }

  .bottom4 {
    grid-area: 7 / 1 / 9 / 2;
  }

  .center .timeline_bar {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    background-color: var(--primary-clr);
    z-index: 1;
    transition: 0.3s height linear;
  }

  #timeline .circle_wrap {
    width: 100px;
    height: 100px;
    padding: 1rem;
    gap: 3px;
  }

  #timeline .circle_wrap.bottom {
    transform: translateX(0);
    top: 3rem;
    right: 1.5rem;
  }

  #timeline .circle_wrap.top {
    bottom: 188px;
    right: 120px;
  }

  #timeline .top4 .circle_wrap.top {
    bottom: -20px;
    right: 50%;
    width: 63%;
    height: 63%;
  }

  #timeline>div.bottom::after {
    width: 2rem;
    height: 1px;
    top: 104px;
    right: 0rem;
  }

  #timeline .sub_circle_wrap {
    width: 70px;
    height: 70px;
    padding: 8px;
  }

  #timeline .bottom .sub_circle_wrap {
    top: 150px;
    right: 24%;
  }

  #timeline .top .sub_circle_wrap {
    left: 34%;
    bottom: 110px;
  }

  #timeline .sub_circle_wrap:has(.date) {
    min-width: 80px;
    min-height: 80px;
  }

  #timeline .sub_circle_wrap:has(.date) span:not(.date) {
    font-size: 12px;
  }

  #timeline .sub_circle_wrap a {
    font-size: var(--font-span);
  }

  #timeline .circle_wrap span {
    font-size: 1rem;
  }

  #timeline .circle_wrap .date {
    font-size: var(--font-h2);
  }

  #timeline .circle_wrap .sub_date {
    top: 7px;
    font-size: 12px;
  }

  #timeline .circle_wrap .sub_date .line {
    line-height: 0.7;
  }

  #timeline>div.top:not(:first-child)::after {
    width: 2rem;
    height: 1px;
    right: auto;
    bottom: 123%;
    left: 0;
  }

  section#prerequisite {
    height: 620px;
  }

  #prerequisite::after {
    display: none;
  }

  .swiper.prerequisite .top_content h5 {
    margin: 0;
    transform: scale(1.2) translate(-16px, 0px);
  }

  .swiper.prerequisite .bottom_content .swiper-pagination {
    position: relative;
    width: fit-content;
    bottom: -2px;
    margin-left: auto;
  }

  .swiper.prerequisite .swiper-slide span {
    width: 90%;
  }

  .swiper.prerequisite .swiper-slide p {
    font-size: var(--font-p);
    text-align: left;
  }

  .swiper.prerequisite .swiper-slide:not(:last-of-type) {
    box-sizing: border-box;
    padding: 0.5rem;
  }

  .swiper.prerequisite {
    overflow: visible;
    height: auto;
    width: 80%;
  }

  .swiper-wrapper {
    height: 60%;
  }

  #assignment {
    flex-direction: column;
  }

  #assignment .steps {
    width: 100%;
  }


  .steps .step {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    padding-left: 0.8rem;
    gap: 0.5rem;
  }

  .steps .step .num h6 {
    display: none;
  }

  .steps .step .content h3 {
    font-size: 1.1rem;
  }

  .steps .step {
    background-color: var(--grey-dark);
    color: var(--primary-clr);
    border-color: var(--grey-dark);
  }

  .steps .step .content span,
  .steps .step .num span {
    color: white;
  }

  #assignment.en .steps .step {
    height: 120px;
  }

  #assignment.en .steps .step .content span {
    font-size: 12px;
  }

  .steps .step .link {
    background-color: var(--primary-clr);
  }

  .steps .step .content h3 {
    color: var(--primary-clr);
  }

  .table .row .content {
    gap: 1rem;
    padding: 0.5rem 1rem 2rem 0;
  }

  .table .row .content li label {
    width: fit-content;
  }

  .table .row .content li,
  .table .row {
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }

  .table .row .title {
    width: 100%;
    padding: 1rem 0 0rem;
    margin: 1rem 0 0;
  }

  .table .row .title h4 {
    font-size: var(--font-h2);
    font-weight: 900;
  }

  #workshop .content {
    width: 100%;
    display: flex;
  }

  .content .item_wrap .item .icon {
    display: none;
  }

  .item_wrap .item.active:nth-child(odd) {
    border-color: var(--primary-clr);
  }

  .item_wrap .item.active:nth-child(even) {
    border-color: var(--dark-green);
  }

  .item_wrap .item.active:nth-child(even) h5 {
    color: var(--dark-green);
  }

  .content .item_wrap {
    gap: 1rem;
  }

  #grading .table {
    width: 100%;
  }

  #awards .list,
  section#awards {
    flex-direction: column;
  }

  #awards .list {
    margin: 0;
    width: 100%;
  }

  .list .left {
    padding-bottom: 0;
    gap: 1rem;
  }

  .list .right {
    padding-top: 0;
    gap: 1rem;
  }

  .list .award .content {
    min-width: 120px;
    min-height: 60px;
  }

  .list .award>span {
    font-size: 1.5rem;
    pointer-events: none;
  }

  .list .award:hover>span,
  .list .award.show>span {
    transform: rotate(0deg);
  }


  #awards .list.ml {
    width: 100%;
    min-width: 100%;
  }

  .list .award.ml .content {
    min-width: 200px;
    width: 100%;
  }

  .list .award.ml .content .title {
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }



  #qualifiers .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


  #qualifiers .title h6 {
    color: var(--grey-medium);
    font-weight: 500;
  }

  #qualifiers .title h6 span {
    color: var(--primary-clr);
    font-size: var(--font-h6);
    font-weight: bold;
  }

  section#notice {
    flex-direction: column;
    padding: 2rem;
    text-align: center;
  }

  .company h2 {
    margin-bottom: 2rem;
  }

  .apply.fixed {
    width: 25%;
    height: fit-content;
  }

  .apply.fixed a.apply_link span {
    width: 50%;
    line-height: 1.3;
    font-size: 1rem;
  }

  .game_list.winner,
  .game_list {
    width: 100%;
    grid-template-columns: 330px;
    padding: 2rem;
    justify-content: center;
  }


  .game_list .game {
    height: 330px;
  }

  .game .content .more::after {
    bottom: 54px;
    width: 90%;
  }

  .game .content {
    padding: 2rem 2rem 0 2rem;
    gap: .5rem;
    transition: .35s all ease;
  }

  .game .content h5 {
    font-size: 18px;
  }

  .game .content .desc {
    margin-top: 1rem;
  }

  .game .btn {
    top: 70%;
    width: 3rem;
    height: 3rem;
    padding: 11px;
  }

  .game.winner .btn {
    top: 232px;
    width: 3rem;
    height: 3rem;
    padding: 11px;
  }

  .game.active .btn {
    transform: translate(-50%, -226px) rotate(-90deg);

  }

  .game.active.winner .btn {
    transform: translate(-50%, -227px) rotate(-90deg);

  }

  .game .content .more {
    padding: 0 0 12px 0
  }

  .game .content .more a {
    padding: 8px 14px;
    border-radius: 20px;
  }

  .game .content .more a small {
    font-size: 14px;
  }

  .game .content .more::after {
    width: 87%;
  }

  .game_list .game.active .content .desc {
    line-height: 1.3;
    font-size: 14px;
  }

  section#winners {
    padding-right: 0.5rem;
  }

  .game.winner .img_wrap {
    max-width: 78px;
    right: 0;
    top: 10px;
  }


  /* -- timeline@ml -- */

  section#timeline {
    display: grid;
    box-sizing: content-box;
    width: 100%;
    height: 900px;
    padding: 5rem 0 0rem;
    grid-template-columns: 50% 2px 50%;
    grid-template-rows: repeat(8, 1fr) 0;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  #timeline.ml .top1 {
    grid-area: 1 / 3 / 3 / 4;
    align-items: flex-start;
    left: -50%;
    top: -20%;
    z-index: 1;
  }


  #timeline.ml .circle_wrap {
    width: 110px;
    height: 110px;
    padding: .5rem 1rem 1.5rem 1rem;
    gap: 3px;
  }

  #timeline.ml .circle_wrap.bottom {
    transform: translateX(0);
    top: 2rem;
    right: 1.5rem;
  }

  #timeline.ml .circle_wrap.top {
    bottom: 160px;
    right: 58%;
  }

  #timeline.ml .top4 .circle_wrap.top {
    bottom: -5px;
    right: 50%;
    width: 63%;
    height: 63%;
  }

  #timeline.ml>div.bottom::after {
    width: 2rem;
    height: 1px;
    top: 46%;
    right: 0rem;
  }

  #timeline.ml>div.bottom3::after {
    width: 0rem;
  }

  #timeline.ml .sub_circle_wrap {
    width: 90px;
    height: 90px;
    padding: 8px;
  }

  #timeline.ml .bottom .sub_circle_wrap {
    top: 140px;
    right: 24%;
  }

  #timeline.ml .top .sub_circle_wrap {
    left: 34%;
    bottom: 276px;
  }

  #timeline.ml .top .sub_circle_wrap small {
    font-size: 10px;
    font-weight: 600;
  }

  #timeline.ml .sub_circle_wrap:has(.date) {
    min-width: 100px;
    min-height: 100px;
  }

  #timeline.ml .sub_circle_wrap:has(.date) span:not(.date) {
    font-size: 12px;
  }

  #timeline.ml .sub_circle_wrap a {
    font-size: var(--font-span);
  }

  #timeline.ml .circle_wrap span {
    font-size: 1.2rem;
  }

  #timeline.ml.en .circle_wrap span {
    font-size: 1.1rem;
  }

  #timeline.ml .circle_wrap .date {
    font-size: var(--font-h2);
  }

  #timeline.ml .circle_wrap .sub_date {
    top: 7px;
    font-size: 12px;
  }

  #timeline.ml .circle_wrap .sub_date .line {
    line-height: 0.7;
  }

  #timeline.ml>div.top:not(:first-child)::after {
    width: 2rem;
    height: 1px;
    right: auto;
    bottom: 120%;
    left: 0;
  }

  .game.active .btn span {
    transform: translate(0px, -2px) rotate(180deg) scale(1.5);
  }

  .game .btn span {
    transform: translate(0px, -2px) rotate(0deg) scale(1.5);
  }

}

/* ------------@icons------------ */
.icon-park-solid--game-ps {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='4'%3E%3Cpath fill='%23000' d='M44 28H28v16h16zM13 4l9 16H4zm23 16a8 8 0 1 0 0-16a8 8 0 0 0 0 16Z'/%3E%3Cpath stroke-linecap='round' d='m4 28l16 16m0-16L4 44'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa-solid--tag {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118M112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48s-21.49-48-48-48'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fluent-mdl2--globe {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='%23000' d='M1024 0q141 0 272 36t245 103t207 160t160 208t103 245t37 272q0 141-36 272t-103 245t-160 207t-208 160t-245 103t-272 37q-141 0-272-36t-245-103t-207-160t-160-208t-103-244t-37-273q0-141 36-272t103-245t160-207t208-160T751 37t273-37m809 640q-38-81-92-152t-120-131t-143-105t-161-75q36 50 65 106t51 115t39 121t28 121zm87 384q0-133-37-256h-363q8 64 12 127t4 129q0 65-4 128t-12 128h363q37-123 37-256m-896 896q49 0 91-27t79-71t64-99t51-113t37-110t23-92H679q8 39 23 92t37 110t50 112t65 100t78 71t92 27m367-640q8-64 12-127t5-129q0-65-4-128t-13-128H657q-8 64-12 127t-5 129q0 65 4 128t13 128zM128 1024q0 133 37 256h363q-8-64-12-127t-4-129q0-65 4-128t12-128H165q-37 123-37 256m896-896q-49 0-91 27t-79 71t-64 99t-51 113t-37 110t-23 92h690q-8-39-23-92t-37-110t-50-112t-65-100t-78-71t-92-27m-293 49q-84 29-161 75T427 357T307 487t-92 153h333q12-60 28-121t38-120t52-116t65-106M215 1408q38 81 92 152t120 131t143 105t161 75q-36-50-65-106t-51-115t-39-121t-28-121zm1102 463q84-29 161-75t143-105t120-130t92-153h-333q-12 60-28 121t-38 120t-52 116t-65 106'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa6-solid--ban {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5m45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.ic--round-add {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa--chevron-right {
  display: inline-block;
  width: 0.66em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1088 1664'%3E%3Cg transform='translate(1088 0) scale(-1 1)'%3E%3Cpath fill='%23000' d='M1043 301L512 832l531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19L45 877q-19-19-19-45t19-45L787 45q19-19 45-19t45 19l166 166q19 19 19 45t-19 45'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa--chevron-left {
  display: inline-block;
  width: 0.66em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1088 1664'%3E%3Cpath fill='%23000' d='M1043 301L512 832l531 531q19 19 19 45t-19 45l-166 166q-19 19-45 19t-45-19L45 877q-19-19-19-45t19-45L787 45q19-19 45-19t45 19l166 166q19 19 19 45t-19 45'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa6-solid--award {
  display: inline-block;
  width: 0.75em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7l19.3 9.7c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7l-9.7 19.3c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2.8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1.4 14.2-1.5 20.1-5.4zM272 192a80 80 0 1 0-160 0a80 80 0 1 0 160 0M1.3 441.8l43.1-102.5c.2.1.3.2.4.4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7.2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2l-32.2-49.3l-56.1 8.3c-5.7.8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1.4-.2.7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2.2-.3.4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3l-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa--tablet {
  display: inline-block;
  width: 0.82em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1152 1408'%3E%3Cpath fill='%23000' d='M640 1280q0-26-19-45t-45-19t-45 19t-19 45t19 45t45 19t45-19t19-45m384-160V160q0-13-9.5-22.5T992 128H160q-13 0-22.5 9.5T128 160v960q0 13 9.5 22.5t22.5 9.5h832q13 0 22.5-9.5t9.5-22.5m128-960v1088q0 66-47 113t-113 47H160q-66 0-113-47T0 1248V160Q0 94 47 47T160 0h832q66 0 113 47t47 113'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa-solid--lightbulb {
  display: inline-block;
  width: 0.69em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23000' d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01zM0 176c0 44.37 16.45 84.85 43.56 115.78c16.52 18.85 42.36 58.23 52.21 91.45c.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78c9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176C352 78.61 272.91-.3 175.45 0C73.44.31 0 82.97 0 176m176-80c-44.11 0-80 35.89-80 80c0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112c8.84 0 16 7.16 16 16s-7.16 16-16 16'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa-solid--book {
  display: inline-block;
  width: 0.88em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7c-4.2-15.4-4.2-59.3 0-74.7c5.4-4.3 8.9-11.1 8.9-18.6M128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6zm253.4 250H96c-17.7 0-32-14.3-32-32c0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.fa--star {
  display: inline-block;
  width: 1.04em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1600'%3E%3Cpath fill='%23000' d='M1664 615q0 22-26 48l-363 354l86 500q1 7 1 20q0 21-10.5 35.5T1321 1587q-19 0-40-12l-449-236l-449 236q-22 12-40 12q-21 0-31.5-14.5T301 1537q0-6 2-20l86-500L25 663Q0 636 0 615q0-37 56-46l502-73L783 41q19-41 49-41t49 41l225 455l502 73q56 9 56 46'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.grommet-icons--circle-question {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm0-7v-1c0-1 0-1.5 1-2s2-1 2-2.5c0-1-1-2.5-3-2.5s-3 1.264-3 3m3 6v2'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}