@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Bakbak+One&family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  height: auto;
  display: block;
}

ul,
li {
  padding: 0;
  -webkit-padding-start: 0px;
          padding-inline-start: 0px;
  list-style: none;
}

/**** Variables ****/
:root {
  --footerbg-color: #508acc;
  --bg-color: #0b0b0b;
  --title-pointer: #97f0ff;
  --bluebg-color: #07177C;
  --blue-color: #2643f4;
  --pink-color: #ff90e3;
  --pop-content-bg: #191919;
  --font-size-XS: 1rem;
  --font-size-S: 1.1rem;
  --font-size-M: 1.25rem;
  --font-size-L: 1.4rem;
  --font-size-XL: 1.45rem;
  --font-size-XXL: 1.8rem;
  --font-size-XXXL: 2.2rem;
  --font-size-title-h6: 2.5rem;
  --font-size-title-h5: 2.91rem;
  --font-size-title-h4: 3.33rem;
  --font-size-title: 4.5rem;
  --body-font: "Noto Sans TC", sans-serif;
  --scrollbar-bg: #494949;
  --scrollbar-thumb: #2643f4;
  --scrollbar-thumb-hover: #3e58ff;
  color-scheme: light only;
}

/**** Font ****/
p {
  font-size: var(--font-size-S);
  line-height: calc(var(--font-size-S) * 2.5);
}

/**** Scrollbar ****/
::-webkit-scrollbar {
  width: 8px;
  background-color: var(--scrollbar-bg);
  /* bar 背景色 */
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  /* bar 滑動色 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/**** breakpoint ****/
body {
  font-family: var(--body-font);
  overflow-x: hidden;
  font-weight: 400;
  color: white;
}

body.popup-open {
  overflow: hidden;
}

html {
  font-size: 16px;
  scrollbar-width: thin;
}
@media (max-width: 1024px) {
  html {
    font-size: 14px;
  }
}
@media (max-width: 576px) {
  html {
    font-size: 13px;
  }
}
@media (max-width: 320px) {
  html {
    font-size: 12px;
  }
}

input,
button,
textarea,
select,
option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
          appearance: none;
  color: inherit;
}

button {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-S);
  background-color: transparent;
}

.btn {
  position: relative;
  border: solid 1px var(--pink-color);
  background-image: -webkit-gradient(linear, left top, right top, from(#0b0b0b), color-stop(50%, #2e2e2e), to(#0b0b0b));
  background-image: linear-gradient(to right, #0b0b0b 0%, #2e2e2e 50%, #0b0b0b 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  padding: 0.6rem 4.5rem;
  color: var(--pink-color);
  font-weight: 500;
  cursor: pointer;
  z-index: 1;
  -webkit-transition: background-position 0.5s ease, color 0.3s ease, -webkit-transform 0.2s;
  transition: background-position 0.5s ease, color 0.3s ease, -webkit-transform 0.2s;
  transition: background-position 0.5s ease, color 0.3s ease, transform 0.2s;
  transition: background-position 0.5s ease, color 0.3s ease, transform 0.2s, -webkit-transform 0.2s;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  -webkit-font-smoothing: antialiased;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 576px) {
  .btn {
    width: 50%;
    padding: 0.6rem 0;
  }
}
.btn:hover {
  background-position: 100% 0;
  color: #fff;
}
.btn.active {
  background-image: -webkit-gradient(linear, left top, right top, from(#ffb8ed), color-stop(50%, #ff90e3), to(#ffb8ed));
  background-image: linear-gradient(to right, #ffb8ed 0%, #ff90e3 50%, #ffb8ed 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  color: var(--bg-color);
  border-color: transparent;
}
.btn.active:hover {
  background-position: 100% 0;
  color: var(--bg-color);
}
.btn:active {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
}

.btn-effect {
  position: relative;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--blue-color);
  z-index: -1;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: right;
          transform-origin: right;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.4s ease, -webkit-transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, -webkit-transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-effect:hover {
  color: #fff;
}
.btn-effect:hover::before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: left;
          transform-origin: left;
  opacity: 1;
}

a {
  display: inline-block;
  cursor: pointer;
  color: white;
}

.section-title {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: "Bakbak One";
  font-size: var(--font-size-title);
  font-weight: 600;
  margin-bottom: 4rem;
  background: linear-gradient(120deg, #97f0ff 0%, #97f0ff 50%, white 50%, white 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
@media (max-width: 375px) {
  .section-title {
    font-size: 4rem;
  }
}
.section-title .text-content {
  opacity: 0;
  display: inline-block;
}
.section-title .reveal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  z-index: 2;
  pointer-events: none;
}
.section-title .reveal-mask.mask-01 {
  background-color: var(--blue-color);
  z-index: 2;
}
.section-title .reveal-mask.mask-02 {
  background-color: var(--bluebg-color);
  z-index: 3;
}
.section-title .reveal-mask.mask-03 {
  background-color: var(--blue-color);
  z-index: 4;
}
.section-title .reveal-mask.mask-04 {
  background-color: var(--bluebg-color);
  z-index: 5;
}

.main {
  overflow-x: hidden;
  position: relative;
  background: radial-gradient(ellipse at bottom, #1b1b1b 0%, #0b0b0b 100%);
  background-attachment: fixed;
}

.stars-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.stars-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1f2d3c 0%, #090A0F 100%);
  overflow: hidden;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  -webkit-box-shadow: 656px 1111px #FFF , 360px 1756px #FFF , 1946px 1805px #FFF , 1061px 1138px #FFF , 1222px 1855px #FFF , 313px 898px #FFF , 410px 1115px #FFF , 1036px 793px #FFF , 1809px 1722px #FFF , 942px 789px #FFF , 514px 343px #FFF , 1716px 1607px #FFF , 466px 1882px #FFF , 539px 1059px #FFF , 442px 445px #FFF , 645px 253px #FFF , 1621px 788px #FFF , 366px 437px #FFF , 1911px 1550px #FFF , 1533px 262px #FFF , 153px 1512px #FFF , 1198px 1400px #FFF , 1312px 1198px #FFF , 669px 1412px #FFF , 1446px 1623px #FFF , 1526px 1377px #FFF , 812px 1670px #FFF , 357px 1022px #FFF , 815px 816px #FFF , 1174px 1993px #FFF , 2000px 1881px #FFF , 725px 1506px #FFF , 1821px 1917px #FFF , 665px 1664px #FFF , 526px 854px #FFF , 284px 188px #FFF , 1628px 1710px #FFF , 482px 1386px #FFF , 676px 2000px #FFF , 1606px 1336px #FFF;
          box-shadow: 656px 1111px #FFF , 360px 1756px #FFF , 1946px 1805px #FFF , 1061px 1138px #FFF , 1222px 1855px #FFF , 313px 898px #FFF , 410px 1115px #FFF , 1036px 793px #FFF , 1809px 1722px #FFF , 942px 789px #FFF , 514px 343px #FFF , 1716px 1607px #FFF , 466px 1882px #FFF , 539px 1059px #FFF , 442px 445px #FFF , 645px 253px #FFF , 1621px 788px #FFF , 366px 437px #FFF , 1911px 1550px #FFF , 1533px 262px #FFF , 153px 1512px #FFF , 1198px 1400px #FFF , 1312px 1198px #FFF , 669px 1412px #FFF , 1446px 1623px #FFF , 1526px 1377px #FFF , 812px 1670px #FFF , 357px 1022px #FFF , 815px 816px #FFF , 1174px 1993px #FFF , 2000px 1881px #FFF , 725px 1506px #FFF , 1821px 1917px #FFF , 665px 1664px #FFF , 526px 854px #FFF , 284px 188px #FFF , 1628px 1710px #FFF , 482px 1386px #FFF , 676px 2000px #FFF , 1606px 1336px #FFF;
  -webkit-animation: animStar 50s linear infinite;
          animation: animStar 50s linear infinite;
  position: absolute;
}
#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  -webkit-box-shadow: 656px 1111px #FFF , 360px 1756px #FFF , 1946px 1805px #FFF , 1061px 1138px #FFF , 1222px 1855px #FFF , 313px 898px #FFF , 410px 1115px #FFF , 1036px 793px #FFF , 1809px 1722px #FFF , 942px 789px #FFF , 514px 343px #FFF , 1716px 1607px #FFF , 466px 1882px #FFF , 539px 1059px #FFF , 442px 445px #FFF , 645px 253px #FFF , 1621px 788px #FFF , 366px 437px #FFF , 1911px 1550px #FFF , 1533px 262px #FFF , 153px 1512px #FFF , 1198px 1400px #FFF , 1312px 1198px #FFF , 669px 1412px #FFF , 1446px 1623px #FFF , 1526px 1377px #FFF , 812px 1670px #FFF , 357px 1022px #FFF , 815px 816px #FFF , 1174px 1993px #FFF , 2000px 1881px #FFF , 725px 1506px #FFF , 1821px 1917px #FFF , 665px 1664px #FFF , 526px 854px #FFF , 284px 188px #FFF , 1628px 1710px #FFF , 482px 1386px #FFF , 676px 2000px #FFF , 1606px 1336px #FFF;
          box-shadow: 656px 1111px #FFF , 360px 1756px #FFF , 1946px 1805px #FFF , 1061px 1138px #FFF , 1222px 1855px #FFF , 313px 898px #FFF , 410px 1115px #FFF , 1036px 793px #FFF , 1809px 1722px #FFF , 942px 789px #FFF , 514px 343px #FFF , 1716px 1607px #FFF , 466px 1882px #FFF , 539px 1059px #FFF , 442px 445px #FFF , 645px 253px #FFF , 1621px 788px #FFF , 366px 437px #FFF , 1911px 1550px #FFF , 1533px 262px #FFF , 153px 1512px #FFF , 1198px 1400px #FFF , 1312px 1198px #FFF , 669px 1412px #FFF , 1446px 1623px #FFF , 1526px 1377px #FFF , 812px 1670px #FFF , 357px 1022px #FFF , 815px 816px #FFF , 1174px 1993px #FFF , 2000px 1881px #FFF , 725px 1506px #FFF , 1821px 1917px #FFF , 665px 1664px #FFF , 526px 854px #FFF , 284px 188px #FFF , 1628px 1710px #FFF , 482px 1386px #FFF , 676px 2000px #FFF , 1606px 1336px #FFF;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  -webkit-box-shadow: 1014px 1721px #FFF , 487px 202px #FFF , 1620px 1688px #FFF , 1993px 510px #FFF , 1920px 1628px #FFF , 534px 1830px #FFF , 750px 702px #FFF , 1307px 1311px #FFF , 1074px 412px #FFF , 354px 1768px #FFF , 1806px 913px #FFF , 1889px 129px #FFF , 1918px 62px #FFF , 591px 400px #FFF , 917px 1742px #FFF , 1282px 593px #FFF , 1209px 786px #FFF , 1149px 1341px #FFF , 1395px 578px #FFF , 1495px 1406px #FFF , 233px 1861px #FFF , 1990px 51px #FFF , 860px 1200px #FFF , 803px 561px #FFF , 1051px 47px #FFF , 505px 1314px #FFF , 979px 1946px #FFF , 535px 21px #FFF , 1605px 1158px #FFF , 879px 1046px #FFF;
          box-shadow: 1014px 1721px #FFF , 487px 202px #FFF , 1620px 1688px #FFF , 1993px 510px #FFF , 1920px 1628px #FFF , 534px 1830px #FFF , 750px 702px #FFF , 1307px 1311px #FFF , 1074px 412px #FFF , 354px 1768px #FFF , 1806px 913px #FFF , 1889px 129px #FFF , 1918px 62px #FFF , 591px 400px #FFF , 917px 1742px #FFF , 1282px 593px #FFF , 1209px 786px #FFF , 1149px 1341px #FFF , 1395px 578px #FFF , 1495px 1406px #FFF , 233px 1861px #FFF , 1990px 51px #FFF , 860px 1200px #FFF , 803px 561px #FFF , 1051px 47px #FFF , 505px 1314px #FFF , 979px 1946px #FFF , 535px 21px #FFF , 1605px 1158px #FFF , 879px 1046px #FFF;
  -webkit-animation: animStar 100s linear infinite;
          animation: animStar 100s linear infinite;
  position: absolute;
}
#stars2:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  -webkit-box-shadow: 1014px 1721px #FFF , 487px 202px #FFF , 1620px 1688px #FFF , 1993px 510px #FFF , 1920px 1628px #FFF , 534px 1830px #FFF , 750px 702px #FFF , 1307px 1311px #FFF , 1074px 412px #FFF , 354px 1768px #FFF , 1806px 913px #FFF , 1889px 129px #FFF , 1918px 62px #FFF , 591px 400px #FFF , 917px 1742px #FFF , 1282px 593px #FFF , 1209px 786px #FFF , 1149px 1341px #FFF , 1395px 578px #FFF , 1495px 1406px #FFF , 233px 1861px #FFF , 1990px 51px #FFF , 860px 1200px #FFF , 803px 561px #FFF , 1051px 47px #FFF , 505px 1314px #FFF , 979px 1946px #FFF , 535px 21px #FFF , 1605px 1158px #FFF , 879px 1046px #FFF;
          box-shadow: 1014px 1721px #FFF , 487px 202px #FFF , 1620px 1688px #FFF , 1993px 510px #FFF , 1920px 1628px #FFF , 534px 1830px #FFF , 750px 702px #FFF , 1307px 1311px #FFF , 1074px 412px #FFF , 354px 1768px #FFF , 1806px 913px #FFF , 1889px 129px #FFF , 1918px 62px #FFF , 591px 400px #FFF , 917px 1742px #FFF , 1282px 593px #FFF , 1209px 786px #FFF , 1149px 1341px #FFF , 1395px 578px #FFF , 1495px 1406px #FFF , 233px 1861px #FFF , 1990px 51px #FFF , 860px 1200px #FFF , 803px 561px #FFF , 1051px 47px #FFF , 505px 1314px #FFF , 979px 1946px #FFF , 535px 21px #FFF , 1605px 1158px #FFF , 879px 1046px #FFF;
}

#stars3 {
  width: 3px;
  height: 3px;
  opacity: 0.5;
  background: transparent;
  -webkit-box-shadow: 1251px 247px #FFF , 672px 481px #FFF , 113px 433px #FFF , 339px 1466px #FFF , 1128px 1344px #FFF , 256px 1012px #FFF , 181px 1294px #FFF , 983px 277px #FFF , 1366px 1942px #FFF , 1215px 676px #FFF , 1798px 1783px #FFF , 1380px 934px #FFF , 1974px 166px #FFF , 1891px 1142px #FFF , 1672px 1622px #FFF , 688px 767px #FFF , 1955px 1948px #FFF , 986px 254px #FFF , 1402px 417px #FFF , 826px 1244px #FFF , 1086px 952px #FFF , 576px 96px #FFF , 676px 456px #FFF , 999px 1815px #FFF , 559px 358px #FFF;
          box-shadow: 1251px 247px #FFF , 672px 481px #FFF , 113px 433px #FFF , 339px 1466px #FFF , 1128px 1344px #FFF , 256px 1012px #FFF , 181px 1294px #FFF , 983px 277px #FFF , 1366px 1942px #FFF , 1215px 676px #FFF , 1798px 1783px #FFF , 1380px 934px #FFF , 1974px 166px #FFF , 1891px 1142px #FFF , 1672px 1622px #FFF , 688px 767px #FFF , 1955px 1948px #FFF , 986px 254px #FFF , 1402px 417px #FFF , 826px 1244px #FFF , 1086px 952px #FFF , 576px 96px #FFF , 676px 456px #FFF , 999px 1815px #FFF , 559px 358px #FFF;
  -webkit-animation: animStar 150s linear infinite;
          animation: animStar 150s linear infinite;
  position: absolute;
}
#stars3:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  -webkit-box-shadow: 1251px 247px #FFF , 672px 481px #FFF , 113px 433px #FFF , 339px 1466px #FFF , 1128px 1344px #FFF , 256px 1012px #FFF , 181px 1294px #FFF , 983px 277px #FFF , 1366px 1942px #FFF , 1215px 676px #FFF , 1798px 1783px #FFF , 1380px 934px #FFF , 1974px 166px #FFF , 1891px 1142px #FFF , 1672px 1622px #FFF , 688px 767px #FFF , 1955px 1948px #FFF , 986px 254px #FFF , 1402px 417px #FFF , 826px 1244px #FFF , 1086px 952px #FFF , 576px 96px #FFF , 676px 456px #FFF , 999px 1815px #FFF , 559px 358px #FFF;
          box-shadow: 1251px 247px #FFF , 672px 481px #FFF , 113px 433px #FFF , 339px 1466px #FFF , 1128px 1344px #FFF , 256px 1012px #FFF , 181px 1294px #FFF , 983px 277px #FFF , 1366px 1942px #FFF , 1215px 676px #FFF , 1798px 1783px #FFF , 1380px 934px #FFF , 1974px 166px #FFF , 1891px 1142px #FFF , 1672px 1622px #FFF , 688px 767px #FFF , 1955px 1948px #FFF , 986px 254px #FFF , 1402px 417px #FFF , 826px 1244px #FFF , 1086px 952px #FFF , 576px 96px #FFF , 676px 456px #FFF , 999px 1815px #FFF , 559px 358px #FFF;
}

.bg-deco {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media (max-width: 1024px) {
  .bg-deco {
    display: none;
  }
}
.bg-deco img {
  max-width: 100%;
  position: absolute;
  will-change: transform, opacity;
  -webkit-animation: cyberpunkGlitch 5s infinite steps(1);
          animation: cyberpunkGlitch 5s infinite steps(1);
}
.bg-deco img:nth-child(1) {
  top: 20%;
  right: 2%;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.bg-deco img:nth-child(2) {
  top: 32%;
  right: 0;
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.bg-deco img:nth-child(3) {
  top: 40%;
  left: 0;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.bg-deco img:nth-child(4) {
  bottom: 22%;
  right: 0;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.bg-deco img:nth-child(5) {
  bottom: 21%;
  left: 0;
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.bg-deco img:nth-child(6) {
  top: 28%;
  left: 3%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.bg-deco img:nth-child(even) {
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 10rem;
}
@media (max-width: 1300px) {
  .wrapper {
    padding: 0 2rem;
  }
}

section {
  position: relative;
  z-index: 5;
}

.top-btn {
  position: fixed;
  bottom: 3rem;
  right: 2rem;
  z-index: 99;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 3.8rem;
  color: white;
  font-family: "Bakbak One";
  font-size: 4rem;
  cursor: pointer;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: perspective(1px) translateZ(0);
          transform: perspective(1px) translateZ(0);
  -webkit-box-shadow: 0 0 1px transparent;
          box-shadow: 0 0 1px transparent;
}
.top-btn.active {
  opacity: 0.5;
  visibility: visible;
}
.top-btn:hover {
  opacity: 1;
  -webkit-animation: hvr-wobble-vertical 1s ease-in-out 1;
          animation: hvr-wobble-vertical 1s ease-in-out 1;
}
.top-btn:focus, .top-btn:active {
  -webkit-animation: hvr-wobble-vertical 1s ease-in-out 1;
          animation: hvr-wobble-vertical 1s ease-in-out 1;
}
.top-btn img {
  pointer-events: none;
  width: auto;
  height: auto;
}

.kv {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #031027;
}
.kv .char,
.kv .kv-h1 {
  opacity: 0;
}
.kv .container {
  position: relative;
  width: 100%;
  max-width: 2560px;
  margin: 0 auto;
  background: url("../images/kv-bg.jpg") no-repeat center;
  background-size: cover;
  aspect-ratio: 1920/846;
  overflow: hidden;
}
.kv .container::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 110%;
  top: -13%;
  left: 2%;
  background: url("../images/rock-01.png") no-repeat left center;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
  -webkit-animation: rockFloatLeft 6s infinite ease-in-out;
          animation: rockFloatLeft 6s infinite ease-in-out;
}
.kv .container::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 100%;
  top: 5%;
  right: 5%;
  background: url("../images/rock-02.png") no-repeat right center;
  background-size: contain;
  z-index: 2;
  pointer-events: none;
  -webkit-animation: rockFloatRight 4s infinite ease-in-out;
          animation: rockFloatRight 4s infinite ease-in-out;
}
@media (max-width: 1024px) {
  .kv .container {
    background: url("../images/kv-bg_M.jpg") no-repeat center;
    background-size: cover;
    aspect-ratio: 1024/2130;
  }
}
.kv .container .side-nav {
  position: absolute;
  right: 0;
  top: 75%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 100;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1024px) {
  .kv .container .side-nav {
    top: 25%;
  }
}
.kv .container .side-nav.is-closed {
  -webkit-transform: translate(50px, -50%);
          transform: translate(50px, -50%);
}
.kv .container .side-nav.is-closed .nav-open {
  -webkit-transform: translateY(-50%) scaleX(-1);
          transform: translateY(-50%) scaleX(-1);
}
.kv .container .side-nav .nav-open {
  position: absolute;
  left: -34px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 34px;
  height: 70px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--blue-color);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.kv .container .side-nav .nav-open img {
  width: 16px;
  height: auto;
  display: block;
}
.kv .container .side-nav ul {
  width: 50px;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px 0;
  list-style: none;
}
.kv .container .side-nav ul li {
  text-align: center;
}
.kv .container .side-nav ul li img {
  width: 90%;
  -webkit-transition: -webkit-filter 0.3s, -webkit-transform 0.3s;
  transition: -webkit-filter 0.3s, -webkit-transform 0.3s;
  transition: filter 0.3s, transform 0.3s;
  transition: filter 0.3s, transform 0.3s, -webkit-filter 0.3s, -webkit-transform 0.3s;
  -webkit-filter: grayscale(100%) opacity(0.6);
          filter: grayscale(100%) opacity(0.6);
  margin: 0 auto;
}
.kv .container .side-nav ul li:hover img {
  -webkit-filter: grayscale(0%) opacity(1);
          filter: grayscale(0%) opacity(1);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.kv .container .kv-h1 {
  position: absolute;
  width: 30%;
  top: 25.17%;
  right: 7.65%;
  z-index: 2;
  will-change: transform, opacity;
}
.kv .container .kv-h1 img {
  width: 100%;
}
@media (max-width: 1024px) {
  .kv .container .kv-h1 {
    width: 79.98%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: auto;
    bottom: 6%;
  }
}
.kv .container h1 {
  position: absolute;
  top: 3.66%;
  right: 6.04%;
  width: 11.66%;
  z-index: 10;
}
.kv .container h1 img {
  width: 100%;
}
@media (max-width: 1024px) {
  .kv .container h1 {
    width: 34.17%;
    right: auto;
    left: 5%;
    top: 1.26%;
  }
}
.kv .container .kv-ch {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.kv .container .char {
  position: absolute;
  will-change: transform, opacity;
}
.kv .container .char img {
  width: 100%;
  position: relative;
  z-index: 2;
}
.kv .container .char01 {
  width: 29.42%;
  right: 27.96%;
  bottom: -2px;
  z-index: 1;
}
@media (max-width: 1024px) {
  .kv .container .char01 {
    width: 58%;
    right: 2.05%;
    bottom: 40.23%;
  }
}
.kv .container .char02 {
  width: 44.84%;
  left: 17.91%;
  bottom: -2px;
  z-index: 4;
}
@media (max-width: 1024px) {
  .kv .container .char02 {
    width: 100%;
    left: auto;
    bottom: 24.86%;
  }
}
.kv .container .char03 {
  width: 28.8%;
  left: 12.55%;
  bottom: -2px;
  z-index: 6;
}
@media (max-width: 1024px) {
  .kv .container .char03 {
    width: 59.08%;
    left: 0;
    bottom: 24.74%;
  }
}
.kv .container .char04 {
  width: 23.02%;
  left: 5.78%;
  bottom: 7.8%;
  z-index: 1;
}
@media (max-width: 1024px) {
  .kv .container .char04 {
    width: 52.63%;
    left: 1%;
    bottom: 37.69%;
  }
}
.kv .container .char05 {
  width: 41.25%;
  left: 9.89%;
  top: 0;
  z-index: 3;
}
@media (max-width: 1024px) {
  .kv .container .char05 {
    width: 81.44%;
    top: auto;
    left: 4.1%;
    bottom: 54.69%;
  }
}
.kv .container .fog {
  position: absolute;
  pointer-events: none;
  -webkit-animation: fogMove 10s infinite ease-in-out, fogFade 8s infinite ease-in-out;
          animation: fogMove 10s infinite ease-in-out, fogFade 8s infinite ease-in-out;
}
.kv .container .fog img {
  display: block;
}
@media (max-width: 1024px) {
  .kv .container .fog {
    display: none;
  }
}
.kv .container .fog01 {
  width: 68.38%;
  bottom: 0;
  left: -5%;
  z-index: 0;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-filter: blur(2px);
          filter: blur(2px);
}
.kv .container .fog02 {
  width: 48.38%;
  bottom: 0;
  right: -5%;
  z-index: 0;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
.kv .container .lightning {
  position: absolute;
}
.kv .container .lightning img {
  width: 100%;
}
.kv .container .lightning01 {
  width: 10.31%;
  right: 15.2%;
  top: 0;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-animation: lightning-flash 1.2s infinite;
          animation: lightning-flash 1.2s infinite;
}
@media (max-width: 1024px) {
  .kv .container .lightning01 {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    width: 25.39%;
    right: 24.9%;
  }
}
.kv .container .lightning02 {
  width: 32.7%;
  right: 24.58%;
  top: 0;
  -webkit-animation: lightning-flash 1.5s 0.5s infinite;
          animation: lightning-flash 1.5s 0.5s infinite;
}
@media (max-width: 1024px) {
  .kv .container .lightning02 {
    display: none;
  }
}
.kv .container .lightning03 {
  width: 15.67%;
  right: 0%;
  top: 23%;
  -webkit-animation: lightning-flash 0.8s 1s infinite;
          animation: lightning-flash 0.8s 1s infinite;
}
@media (max-width: 1024px) {
  .kv .container .lightning03 {
    width: 35.44%;
    top: 25.49%;
  }
}
.kv .container .lightning04 {
  width: 11.87%;
  right: 46.66%;
  top: 0%;
  -webkit-animation: lightning-flash 0.7s 1s infinite;
          animation: lightning-flash 0.7s 1s infinite;
}
@media (max-width: 1024px) {
  .kv .container .lightning04 {
    display: none;
  }
}
.kv .container .lightning05 {
  display: none;
}
@media (max-width: 1024px) {
  .kv .container .lightning05 {
    display: block;
    width: 52.73%;
    top: 0;
    right: 0;
    -webkit-animation: lightning-flash 0.8s 1s infinite;
            animation: lightning-flash 0.8s 1s infinite;
  }
}
.kv .container .lightning06 {
  display: none;
}
@media (max-width: 1024px) {
  .kv .container .lightning06 {
    display: block;
    width: 15.91%;
    top: 7.18%;
    left: 0;
    -webkit-animation: lightning-flash 1.5s 0.5s infinite;
            animation: lightning-flash 1.5s 0.5s infinite;
  }
}

.news .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.4rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (max-width: 1024px) {
  .news .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media (max-width: 430px) {
  .news .container {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}
.news .section-title {
  margin-top: 6rem;
}
.news ul {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  font-size: var(--font-size-S);
  height: 20rem;
  min-height: 100%;
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (max-width: 576px) {
  .news ul {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    overflow-y: scroll;
    min-height: auto;
  }
}
.news ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(49.8%, #141414), color-stop(50%, transparent));
  background: linear-gradient(to bottom, #141414 49.8%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  -webkit-transition: background-position 0.2s ease-out;
  transition: background-position 0.2s ease-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.news ul li::after {
  content: "";
  position: absolute;
  width: 13px;
  aspect-ratio: 8/13;
  right: 2%;
  top: 50%;
  background: url("../images/arw.svg") no-repeat;
  background-size: contain;
  -webkit-transform: translateY(-50%) translateX(0);
          transform: translateY(-50%) translateX(0);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
.news ul li:hover::after {
  -webkit-transform: translateY(-50%) translateX(-5px);
          transform: translateY(-50%) translateX(-5px);
}
.news ul li:hover {
  background-position: 0 0;
}
.news ul a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem 0 0.5rem 1.5rem;
}
@media (max-width: 576px) {
  .news ul a {
    padding: 1rem 2rem 0.5rem 1.5rem;
  }
}
@media (max-width: 375px) {
  .news ul a {
    padding: 1rem 2.5rem 0.7rem 1rem;
  }
}
.news ul .name {
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 576px) {
  .news ul .name {
    margin-bottom: 0.7rem;
  }
}
.news ul .category {
  position: relative;
  color: var(--bg-color);
  padding: 0.1rem 0.6rem;
  margin-right: 1.5rem;
  z-index: 1;
  font-weight: 600;
}
.news ul .category::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--pink-color);
  -webkit-transform: skewX(-8deg);
          transform: skewX(-8deg);
  z-index: -1;
}
.news ul .date {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-size-XS);
}
.news ul .title {
  line-height: 2;
}
@media (max-width: 576px) {
  .news ul .title {
    line-height: 1.7;
  }
}
.news .news-aside {
  -webkit-box-flex: 1.1;
      -ms-flex: 1.1;
          flex: 1.1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.news .news-aside .proma-banner {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--font-size-L);
  background: url("../images/new-aside-bg.png") no-repeat #0b0b0b center;
  background-size: cover;
  position: relative;
  border: none;
  -webkit-box-shadow: inset 0 0 0 1px var(--blue-color);
          box-shadow: inset 0 0 0 1px var(--blue-color);
  -webkit-transition: -webkit-box-shadow 0.3s;
  transition: -webkit-box-shadow 0.3s;
  transition: box-shadow 0.3s;
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
  z-index: 5;
}
.news .news-aside .proma-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  z-index: 4;
  background: -webkit-gradient(linear, left top, right top, from(var(--blue-color)), color-stop(var(--title-pointer)), to(var(--blue-color)));
  background: linear-gradient(90deg, var(--blue-color), var(--title-pointer), var(--blue-color));
  background-size: 200% 100%;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.news .news-aside .proma-banner:hover {
  -webkit-box-shadow: inset 0 0 0 1px transparent;
          box-shadow: inset 0 0 0 1px transparent;
}
.news .news-aside .proma-banner:hover::before {
  opacity: 1;
  -webkit-animation: borderFlow 2s linear infinite;
          animation: borderFlow 2s linear infinite;
}
@media (max-width: 1024px) {
  .news .news-aside .proma-banner {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.news .news-aside .proma-banner span {
  margin-right: 1.5rem;
}
@media (max-width: 375px) {
  .news .news-aside .proma-banner span {
    margin-right: 0;
    margin-left: 2.5rem;
    white-space: nowrap;
  }
}
.news .news-aside a {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  z-index: 1;
  position: relative;
}
.news .news-aside a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0.4rem;
  height: 4.5rem;
  background-color: var(--blue-color);
  clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);
  -webkit-transition: background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
  z-index: 5;
}
.news .news-aside a:hover::after {
  -webkit-transform: translateY(-50%) scaleY(1.3);
          transform: translateY(-50%) scaleY(1.3);
}
.news .news-aside a:last-child .proma-banner {
  background: url("../images/new-aside-bg-2.png") no-repeat #0b0b0b top;
  background-size: cover;
}
.news .news-aside a:hover {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  z-index: 2;
}

.teams .btn-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.3rem;
  margin-bottom: 2rem;
}
.teams .btn-wrapper .btn:hover {
  color: var(--pink-color);
}
.teams .btn-wrapper .btn.active:hover {
  color: var(--bg-color);
}
.teams ul {
  display: none;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
  position: relative;
}
@media (max-width: 1024px) {
  .teams ul {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .teams ul {
    gap: 1rem;
  }
}
.teams ul li {
  position: relative;
  width: 25%;
  height: 20rem;
  overflow: hidden;
  cursor: pointer;
  will-change: transform, opacity;
  position: relative;
  border: none;
  -webkit-box-shadow: inset 0 0 0 1px var(--blue-color);
          box-shadow: inset 0 0 0 1px var(--blue-color);
  -webkit-transition: -webkit-box-shadow 0.3s;
  transition: -webkit-box-shadow 0.3s;
  transition: box-shadow 0.3s;
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
  z-index: 5;
}
.teams ul li::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  z-index: 4;
  background: -webkit-gradient(linear, left top, right top, from(var(--blue-color)), color-stop(var(--title-pointer)), to(var(--blue-color)));
  background: linear-gradient(90deg, var(--blue-color), var(--title-pointer), var(--blue-color));
  background-size: 200% 100%;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.teams ul li:hover {
  -webkit-box-shadow: inset 0 0 0 1px transparent;
          box-shadow: inset 0 0 0 1px transparent;
}
.teams ul li:hover::before {
  opacity: 1;
  -webkit-animation: borderFlow 2s linear infinite;
          animation: borderFlow 2s linear infinite;
}
.teams ul li {
  position: relative;
}
.teams ul li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0.4rem;
  height: 4.5rem;
  background-color: var(--blue-color);
  clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);
  -webkit-transition: background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
  z-index: 5;
}
.teams ul li:hover::after {
  -webkit-transform: translateY(-50%) scaleY(1.3);
          transform: translateY(-50%) scaleY(1.3);
}
@media (max-width: 1024px) {
  .teams ul li {
    width: 48.5%;
  }
}
@media (max-width: 576px) {
  .teams ul li {
    width: 48%;
    height: 15rem;
  }
}
@media (max-width: 430px) {
  .teams ul li {
    width: 47%;
  }
}
.teams ul li:hover a::after {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.teams ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0 0 1rem;
  color: inherit;
  text-decoration: none;
  z-index: -1;
}
.teams ul li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.4s ease-out;
  transition: opacity 0.5s ease-out, -webkit-transform 0.4s ease-out;
  transition: opacity 0.5s ease-out, transform 0.4s ease-out;
  transition: opacity 0.5s ease-out, transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
}
@media (max-width: 1024px) {
  .teams ul li a::after {
    background-size: cover;
    background-position: right top;
  }
}
.teams ul li a::before,
.teams ul li a .glitch-layer {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: visible;
}
@media (max-width: 1024px) {
  .teams ul li a::before,
  .teams ul li a .glitch-layer {
    background-size: cover;
    background-position: right top;
  }
}
.teams ul li a::before {
  -webkit-filter: contrast(150%) brightness(1.2) sepia(100%) hue-rotate(-50deg) saturate(5);
          filter: contrast(150%) brightness(1.2) sepia(100%) hue-rotate(-50deg) saturate(5);
  -webkit-animation: glitch-loop-1 5s infinite linear;
          animation: glitch-loop-1 5s infinite linear;
}
.teams ul li a .glitch-layer {
  -webkit-filter: contrast(150%) brightness(1.2) sepia(100%) hue-rotate(150deg) saturate(5);
          filter: contrast(150%) brightness(1.2) sepia(100%) hue-rotate(150deg) saturate(5);
  -webkit-animation: glitch-loop-2 5s infinite linear;
          animation: glitch-loop-2 5s infinite linear;
}
.teams ul li a span {
  position: relative;
  font-size: var(--font-size-XL);
  font-weight: 500;
  z-index: 2;
  pointer-events: none;
}
.teams ul li.in-view a::after {
  opacity: 1;
}
.teams ul li:nth-child(1) a::before, .teams ul li:nth-child(1) a .glitch-layer {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.teams ul li:nth-child(2) a::before, .teams ul li:nth-child(2) a .glitch-layer {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.teams ul li:nth-child(3) a::before, .teams ul li:nth-child(3) a .glitch-layer {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.teams ul li:nth-child(4) a::before, .teams ul li:nth-child(4) a .glitch-layer {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
.teams .selected-teams-content li:nth-child(1) {
  --img: url('../images/registration-01.png');
}
.teams .selected-teams-content li:nth-child(2) {
  --img: url('../images/registration-02.png');
}
.teams .selected-teams-content li:nth-child(3) {
  --img: url('../images/registration-03.png');
}
.teams .selected-teams-content li:nth-child(4) {
  --img: url('../images/registration-04.png');
}
.teams .registration-content li:nth-child(1) {
  --img: url('../images/selected-teams-01.png');
}
.teams .registration-content li:nth-child(2) {
  --img: url('../images/selected-teams-02.png');
}
.teams .registration-content li:nth-child(3) {
  --img: url('../images/selected-teams-03.png');
}
.teams .registration-content li:nth-child(4) {
  --img: url('../images/selected-teams-04.png');
}
.teams .active-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.teams ol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.2rem;
  min-height: 7rem;
}
@media (max-width: 1024px) {
  .teams ol {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media (max-width: 576px) {
  .teams ol {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
}
@media (max-width: 550px) {
  .teams ol {
    gap: 0.5rem;
  }
}
.teams ol li {
  text-align: center;
}
.teams ol li a {
  border: solid 1px var(--blue-color);
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--font-size-S);
  padding: 1rem;
}
.teams ol li:nth-child(1) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.teams ol li:nth-child(2) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  gap: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (max-width: 576px) {
  .teams ol li:nth-child(2) {
    gap: 1rem;
  }
}
@media (max-width: 550px) {
  .teams ol li:nth-child(2) {
    gap: 0.5rem;
  }
}
.teams ol li:nth-child(3) {
  -webkit-box-flex: 2.5;
      -ms-flex: 2.5;
          flex: 2.5;
  cursor: pointer;
  position: relative;
}
.teams ol li:nth-child(3)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0.4rem;
  height: 4.5rem;
  background-color: var(--blue-color);
  clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);
  -webkit-transition: background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
  z-index: 5;
}
.teams ol li:nth-child(3):hover::after {
  -webkit-transform: translateY(-50%) scaleY(1.3);
          transform: translateY(-50%) scaleY(1.3);
}
.teams ol li:nth-child(3) a {
  font-weight: 600;
  font-size: var(--font-size-XL);
  color: var(--bg-color);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(25, 57, 255, 0)), color-stop(100%, rgba(25, 57, 255, 0.7)), color-stop(0%, rgba(25, 57, 255, 0))), url("../images/btn-bg-light.jpg") no-repeat center;
  background: linear-gradient(rgba(25, 57, 255, 0) 60%, rgba(25, 57, 255, 0.7) 100%, rgba(25, 57, 255, 0) 0%), url("../images/btn-bg-light.jpg") no-repeat center;
  background-size: 100% 200%, cover;
  background-position: 0 100%, center;
  -webkit-transition: background-position 0.5s ease-in-out, color 0.3s;
  transition: background-position 0.5s ease-in-out, color 0.3s;
  overflow: hidden;
}
@media (max-width: 576px) {
  .teams ol li:nth-child(3) a {
    padding: 2rem;
  }
}
.teams ol li:nth-child(3) a:hover {
  background-position: 0 0%, center;
}
@media (max-width: 1024px) {
  .teams ol li:nth-child(1) {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(50% - 0.6rem);
            flex: 1 1 calc(50% - 0.6rem);
  }
  .teams ol li:nth-child(2) {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(50% - 0.6rem);
            flex: 1 1 calc(50% - 0.6rem);
  }
  .teams ol li:nth-child(3) {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    margin-top: 0.5rem;
  }
}

.event {
  background: url("../images/blue-bg.png") #07177c no-repeat;
  background-size: cover;
  position: relative;
  z-index: 2;
  clip-path: inset(0 50%);
  will-change: clip-path;
}
.event .section-title {
  margin-top: 0;
}
@media (max-width: 1024px) {
  .event .section-title {
    margin-bottom: 6rem;
  }
}
.event .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  padding-top: 2.5rem;
}
@media (max-width: 1024px) {
  .event .container {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
  }
}
.event .event-wrapper {
  width: 65%;
}
@media (max-width: 1024px) {
  .event .event-wrapper {
    width: 100%;
  }
}
.event ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.4rem;
  margin-bottom: 2rem;
  width: 100%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media (max-width: 576px) {
  .event ul {
    gap: 1rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.event ul li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 205px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--bg-color);
  overflow: hidden;
  position: relative;
  border: none;
  -webkit-box-shadow: inset 0 0 0 1px var(--blue-color);
          box-shadow: inset 0 0 0 1px var(--blue-color);
  -webkit-transition: -webkit-box-shadow 0.3s;
  transition: -webkit-box-shadow 0.3s;
  transition: box-shadow 0.3s;
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
  z-index: 5;
}
.event ul li::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  z-index: 4;
  background: -webkit-gradient(linear, left top, right top, from(var(--blue-color)), color-stop(var(--title-pointer)), to(var(--blue-color)));
  background: linear-gradient(90deg, var(--blue-color), var(--title-pointer), var(--blue-color));
  background-size: 200% 100%;
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.event ul li:hover {
  -webkit-box-shadow: inset 0 0 0 1px transparent;
          box-shadow: inset 0 0 0 1px transparent;
}
.event ul li:hover::before {
  opacity: 1;
  -webkit-animation: borderFlow 2s linear infinite;
          animation: borderFlow 2s linear infinite;
}
.event ul li {
  -webkit-transition: -webkit-transform 0.3s ease-out, -webkit-box-shadow 0.3s;
  transition: -webkit-transform 0.3s ease-out, -webkit-box-shadow 0.3s;
  transition: transform 0.3s ease-out, box-shadow 0.3s;
  transition: transform 0.3s ease-out, box-shadow 0.3s, -webkit-transform 0.3s ease-out, -webkit-box-shadow 0.3s;
  position: relative;
  z-index: 2;
}
.event ul li::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--blue-color);
  z-index: 3;
  pointer-events: none;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
}
.event ul li:hover {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  z-index: 2;
}
.event ul li:hover::after {
  opacity: 0;
}
@media (max-width: 1024px) {
  .event ul li {
    min-width: 0;
  }
}
@media (max-width: 576px) {
  .event ul li {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 100%;
    min-width: 100%;
  }
}
.event ul li .event-pic {
  width: 100%;
  aspect-ratio: 205/218;
  text-align: center;
  font-size: var(--font-size-XL);
  padding-top: 1.5rem;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: relative;
  z-index: 2;
}
@media (max-width: 576px) {
  .event ul li .event-pic {
    height: 350px;
    background-position: center center;
  }
}
.event ul li:nth-child(1) .event-pic {
  background-image: url("../images/event-bg-01.jpg");
}
.event ul li:nth-child(2) .event-pic {
  background-image: url("../images/event-bg-02.jpg");
}
.event ul li:nth-child(3) .event-pic {
  background-image: url("../images/event-bg-03.jpg");
}
.event ul .event-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--font-size-M);
  padding: 1rem 0;
}
.event ul .event-text a {
  margin-top: 0.7rem;
  text-align: center;
  background-image: -webkit-gradient(linear, left top, right top, from(#ffb8ed), color-stop(50%, #ff90e3), to(#ffb8ed));
  background-image: linear-gradient(to right, #ffb8ed 0%, #ff90e3 50%, #ffb8ed 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  color: var(--bg-color);
  padding: 0.1rem 1.5rem;
  font-size: var(--font-size-XS);
  font-weight: 500;
  cursor: pointer;
}
.event ul .event-text a:hover {
  background-position: 100% 0;
  color: var(--bg-color);
}
@media (max-width: 576px) {
  .event ul .event-text a {
    width: 90%;
    padding: 0.8rem 0;
  }
}
@media (max-width: 1024px) {
  .event .event-girl {
    width: 70%;
    margin: 0 auto;
  }
}
@media (max-width: 576px) {
  .event .event-girl {
    width: 100%;
  }
}

.roStar .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 1024px) {
  .roStar .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media (max-width: 1024px) {
  .roStar .container img {
    width: 70%;
    margin: 0 auto;
  }
}
@media (max-width: 576px) {
  .roStar .container img {
    width: 100%;
  }
}
.roStar .section-title {
  margin-top: 0;
}
.roStar .intro .title {
  display: inline-block;
  font-size: var(--font-size-XXL);
  color: var(--pink-color);
  font-weight: 600;
  margin-bottom: 1rem;
}
@media (max-width: 1024px) {
  .roStar .intro div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    width: 100%;
  }
}
.roStar .intro div a {
  font-size: var(--font-size-M);
  padding: 1.5rem 4.5rem;
  border: 1px solid var(--blue-color);
  text-align: center;
}
@media (max-width: 1024px) {
  .roStar .intro div a {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 1rem 5px;
  }
}
.roStar .intro div a:first-child {
  margin-right: 1rem;
}
.roStar .js-split {
  line-height: 2;
  word-break: break-all;
  margin-bottom: 2rem;
}
.roStar .js-split span {
  white-space: pre;
}

.wrapper.roStar {
  margin-bottom: 0;
}

.join {
  background: url("../images/bg-building.png") no-repeat #181928 top;
  height: 40rem;
  background-size: cover;
}
.join.active {
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  opacity: 1;
}
.join .container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  padding-top: 8rem;
}
.join .group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.join .group a {
  position: relative;
}
.join .group a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0.4rem;
  height: 4.5rem;
  background-color: var(--blue-color);
  clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);
  -webkit-transition: background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
  z-index: 5;
}
.join .group a:hover::after {
  -webkit-transform: translateY(-50%) scaleY(1.3);
          transform: translateY(-50%) scaleY(1.3);
}
.join .group a {
  position: absolute;
  border: 1px solid var(--blue-color);
  padding: 1.7rem 6rem;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-43%);
          transform: translateX(-43%);
  font-size: var(--font-size-XXXL);
  font-weight: 600;
  background: url("../images/2026.png") no-repeat bottom var(--bg-color);
  background-size: auto;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  z-index: 1;
}
@media (max-width: 1024px) {
  .join .group a {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.join .group a:hover {
  -webkit-transform: translateX(-43%) scale(0.95);
          transform: translateX(-43%) scale(0.95);
  z-index: 2;
}
@media (max-width: 1024px) {
  .join .group a:hover {
    -webkit-transform: translateX(-50%) scale(0.95);
            transform: translateX(-50%) scale(0.95);
  }
}
.join .group span {
  font-size: 0.9rem;
  font-weight: 300;
  display: block;
  line-height: 0.5rem;
  opacity: 0.4;
  letter-spacing: 0.1rem;
}
@media (max-width: 1024px) {
  .join .group span {
    line-height: 1rem;
  }
}
.join .group > img {
  width: auto;
  height: auto;
}
@media (max-width: 1024px) {
  .join .group > img {
    width: 23%;
  }
}
.join .group .fighter img {
  width: 100%;
  height: auto;
}
.join .group .fighter-01 {
  -webkit-animation: fighter-fight-01 1.5s ease-in-out infinite;
          animation: fighter-fight-01 1.5s ease-in-out infinite;
}
@media (max-width: 1024px) {
  .join .group .fighter-01 {
    width: 45%;
  }
}
.join .group .fighter-02 {
  -webkit-animation: fighter-fight-02 1.5s 0.2s ease-in-out infinite;
          animation: fighter-fight-02 1.5s 0.2s ease-in-out infinite;
}
@media (max-width: 1024px) {
  .join .group .fighter-02 {
    width: 45%;
  }
}
.join .marquee-wrapper {
  position: absolute;
  bottom: 0;
  background-color: #081783;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem 0;
  mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(15%, rgb(0, 0, 0)), color-stop(85%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(15%, black), color-stop(85%, black), to(transparent));
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.join .marquee-wrapper .marquee-content {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: scrolling 20s linear infinite;
          animation: scrolling 20s linear infinite;
}

footer {
  background-color: white;
}

@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fogMove {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fogMove {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(5%);
            transform: translateX(5%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes fogFade {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes fogFade {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes lightning-flash {
  0%, 50%, 100% {
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  54% {
    opacity: 0.3;
  }
  56% {
    opacity: 1;
  }
  58% {
    opacity: 0;
  }
  82% {
    opacity: 1;
  }
  84% {
    opacity: 0.4;
  }
  86% {
    opacity: 1;
  }
}
@keyframes lightning-flash {
  0%, 50%, 100% {
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  54% {
    opacity: 0.3;
  }
  56% {
    opacity: 1;
  }
  58% {
    opacity: 0;
  }
  82% {
    opacity: 1;
  }
  84% {
    opacity: 0.4;
  }
  86% {
    opacity: 1;
  }
}
@-webkit-keyframes rockFloatLeft {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(-15px, -25px) rotate(-1deg);
            transform: translate(-15px, -25px) rotate(-1deg);
  }
}
@keyframes rockFloatLeft {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(-15px, -25px) rotate(-1deg);
            transform: translate(-15px, -25px) rotate(-1deg);
  }
}
@-webkit-keyframes rockFloatRight {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(20px, -35px) rotate(1.5deg);
            transform: translate(20px, -35px) rotate(1.5deg);
  }
}
@keyframes rockFloatRight {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(20px, -35px) rotate(1.5deg);
            transform: translate(20px, -35px) rotate(1.5deg);
  }
}
@-webkit-keyframes fighter-fight-01 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(10px, -20px) rotate(-3deg);
            transform: translate(10px, -20px) rotate(-3deg);
  }
  20% {
    -webkit-transform: translate(-5px, 0px) rotate(0deg);
            transform: translate(-5px, 0px) rotate(0deg);
  }
  30% {
    -webkit-transform: translate(5px, -10px) rotate(-1deg);
            transform: translate(5px, -10px) rotate(-1deg);
  }
}
@keyframes fighter-fight-01 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(10px, -20px) rotate(-3deg);
            transform: translate(10px, -20px) rotate(-3deg);
  }
  20% {
    -webkit-transform: translate(-5px, 0px) rotate(0deg);
            transform: translate(-5px, 0px) rotate(0deg);
  }
  30% {
    -webkit-transform: translate(5px, -10px) rotate(-1deg);
            transform: translate(5px, -10px) rotate(-1deg);
  }
}
@-webkit-keyframes fighter-fight-02 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  15% {
    -webkit-transform: translate(-10px, -25px) rotate(3deg);
            transform: translate(-10px, -25px) rotate(3deg);
  }
  25% {
    -webkit-transform: translate(5px, 2px) rotate(0deg);
            transform: translate(5px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(-8px, -12px) rotate(2deg);
            transform: translate(-8px, -12px) rotate(2deg);
  }
}
@keyframes fighter-fight-02 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  15% {
    -webkit-transform: translate(-10px, -25px) rotate(3deg);
            transform: translate(-10px, -25px) rotate(3deg);
  }
  25% {
    -webkit-transform: translate(5px, 2px) rotate(0deg);
            transform: translate(5px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(-8px, -12px) rotate(2deg);
            transform: translate(-8px, -12px) rotate(2deg);
  }
}
@-webkit-keyframes scrolling {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes scrolling {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@-webkit-keyframes cyberpunkGlitch {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% {
    -webkit-transform: scale(1) skew(0deg);
            transform: scale(1) skew(0deg);
    /* 移除 drop-shadow 或將模糊值設為 0 */
    -webkit-filter: opacity(0.9);
            filter: opacity(0.9);
  }
  /* 故障點 1：銳利的雙重色差偏移 */
  12% {
    -webkit-transform: scale(1.1) skew(10deg);
            transform: scale(1.1) skew(10deg);
    /* 偏移 5px，但模糊半徑設為 0，這樣會產生銳利的重影而非光暈 */
    -webkit-filter: opacity(1) drop-shadow(-5px 0 0 #ff00ea) drop-shadow(5px 0 0 #97f0ff);
            filter: opacity(1) drop-shadow(-5px 0 0 #ff00ea) drop-shadow(5px 0 0 #97f0ff);
  }
  /* 故障點 2：突然閃爍 */
  15% {
    -webkit-filter: opacity(0.3);
            filter: opacity(0.3);
  }
  /* 故障點 3：反向的銳利色差 */
  82% {
    -webkit-transform: scale(0.95) skew(-5deg);
            transform: scale(0.95) skew(-5deg);
    -webkit-filter: opacity(1) drop-shadow(5px 0 0 #ff00ea) drop-shadow(-5px 0 0 #97f0ff);
            filter: opacity(1) drop-shadow(5px 0 0 #ff00ea) drop-shadow(-5px 0 0 #97f0ff);
  }
}
@keyframes cyberpunkGlitch {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% {
    -webkit-transform: scale(1) skew(0deg);
            transform: scale(1) skew(0deg);
    /* 移除 drop-shadow 或將模糊值設為 0 */
    -webkit-filter: opacity(0.9);
            filter: opacity(0.9);
  }
  /* 故障點 1：銳利的雙重色差偏移 */
  12% {
    -webkit-transform: scale(1.1) skew(10deg);
            transform: scale(1.1) skew(10deg);
    /* 偏移 5px，但模糊半徑設為 0，這樣會產生銳利的重影而非光暈 */
    -webkit-filter: opacity(1) drop-shadow(-5px 0 0 #ff00ea) drop-shadow(5px 0 0 #97f0ff);
            filter: opacity(1) drop-shadow(-5px 0 0 #ff00ea) drop-shadow(5px 0 0 #97f0ff);
  }
  /* 故障點 2：突然閃爍 */
  15% {
    -webkit-filter: opacity(0.3);
            filter: opacity(0.3);
  }
  /* 故障點 3：反向的銳利色差 */
  82% {
    -webkit-transform: scale(0.95) skew(-5deg);
            transform: scale(0.95) skew(-5deg);
    -webkit-filter: opacity(1) drop-shadow(5px 0 0 #ff00ea) drop-shadow(-5px 0 0 #97f0ff);
            filter: opacity(1) drop-shadow(5px 0 0 #ff00ea) drop-shadow(-5px 0 0 #97f0ff);
  }
}
@-webkit-keyframes animStar {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px);
  }
}
@keyframes animStar {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  to {
    -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px);
  }
}
@-webkit-keyframes glitch-loop-1 {
  0% {
    opacity: 0.6;
    clip-path: inset(20% 0 50% 0);
    -webkit-transform: translate(-5px, 2px);
            transform: translate(-5px, 2px);
  }
  2% {
    clip-path: inset(60% 0 10% 0);
    -webkit-transform: translate(5px, -2px);
            transform: translate(5px, -2px);
  }
  4% {
    clip-path: inset(10% 0 80% 0);
    -webkit-transform: translate(-3px, 5px);
            transform: translate(-3px, 5px);
  }
  6% {
    clip-path: inset(40% 0 40% 0);
    -webkit-transform: translate(3px, -5px);
            transform: translate(3px, -5px);
  }
  8% {
    clip-path: inset(80% 0 5% 0);
    -webkit-transform: translate(-2px, 3px);
            transform: translate(-2px, 3px);
  }
  10% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  11%, 100% {
    opacity: 0;
  }
}
@keyframes glitch-loop-1 {
  0% {
    opacity: 0.6;
    clip-path: inset(20% 0 50% 0);
    -webkit-transform: translate(-5px, 2px);
            transform: translate(-5px, 2px);
  }
  2% {
    clip-path: inset(60% 0 10% 0);
    -webkit-transform: translate(5px, -2px);
            transform: translate(5px, -2px);
  }
  4% {
    clip-path: inset(10% 0 80% 0);
    -webkit-transform: translate(-3px, 5px);
            transform: translate(-3px, 5px);
  }
  6% {
    clip-path: inset(40% 0 40% 0);
    -webkit-transform: translate(3px, -5px);
            transform: translate(3px, -5px);
  }
  8% {
    clip-path: inset(80% 0 5% 0);
    -webkit-transform: translate(-2px, 3px);
            transform: translate(-2px, 3px);
  }
  10% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  11%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes glitch-loop-2 {
  0% {
    opacity: 0.6;
    clip-path: inset(10% 0 70% 0);
    -webkit-transform: translate(5px, -2px);
            transform: translate(5px, -2px);
  }
  3% {
    clip-path: inset(50% 0 30% 0);
    -webkit-transform: translate(-5px, 2px);
            transform: translate(-5px, 2px);
  }
  6% {
    clip-path: inset(30% 0 50% 0);
    -webkit-transform: translate(2px, -5px);
            transform: translate(2px, -5px);
  }
  9% {
    clip-path: inset(70% 0 10% 0);
    -webkit-transform: translate(-2px, 5px);
            transform: translate(-2px, 5px);
  }
  10% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  11%, 100% {
    opacity: 0;
  }
}
@keyframes glitch-loop-2 {
  0% {
    opacity: 0.6;
    clip-path: inset(10% 0 70% 0);
    -webkit-transform: translate(5px, -2px);
            transform: translate(5px, -2px);
  }
  3% {
    clip-path: inset(50% 0 30% 0);
    -webkit-transform: translate(-5px, 2px);
            transform: translate(-5px, 2px);
  }
  6% {
    clip-path: inset(30% 0 50% 0);
    -webkit-transform: translate(2px, -5px);
            transform: translate(2px, -5px);
  }
  9% {
    clip-path: inset(70% 0 10% 0);
    -webkit-transform: translate(-2px, 5px);
            transform: translate(-2px, 5px);
  }
  10% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  11%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}