@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, main {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --header-height: 3.75rem;
  --gutter: clamp(20px, 4vw, 60px);
  --gap: clamp(20px, 3vw, 40px);
  --gap-md: clamp(16px, 2vw, 30px);
  --gap-sm: clamp(4px, 1vw, 10px);
  --fs-heading1: clamp(3.625rem, 6.6153846154vw, 5.375rem);
  --fs-heading2: clamp(2.875rem, 4.9230769231vw, 4rem);
  --fs-heading3: clamp(2rem, 4.1055718475vw, 2.625rem);
  --fs-heading4: clamp(1.75rem, 3.5190615836vw, 2.25rem);
  --fs-title1: clamp(1.5rem, 3.128054741vw, 2rem);
  --fs-title2: clamp(1.125rem, 2.541544477vw, 1.625rem);
  --fs-title3: clamp(1rem, 1.9550342131vw, 1.25rem);
  --fs-title4: clamp(0.875rem, 1.7595307918vw, 1.125rem);
  --fs-body1: clamp(1rem, 1.9550342131vw, 1.25rem);
  --fs-body2: clamp(0.875rem, 1.7595307918vw, 1.125rem);
  --fs-body3: clamp(0.8125rem, 1.5640273705vw, 1rem);
  --fs-body4: clamp(0.6875rem, 1.3685239492vw, 0.875rem);
  --spacing-0: 0rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-18: 4.5rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-30: 7.5rem;
  --spacing-32: 8rem;
  --spacing-34: 8.5rem;
  --spacing-40: 10rem;
  --spacing-46: 11.5rem;
  --spacing-49: 12.25rem;
  --spacing-50: 12.5rem;
  --spacing-56: 15rem;
  --border-radius-sm: 0.5rem;
  --border-radius-md: 0.75rem;
}
@media (max-width: 1023px) {
  :root {
    --spacing-0: 0rem;
    --spacing-1: 0.25rem;
    --spacing-2: 0.375rem;
    --spacing-3: 0.625rem;
    --spacing-4: 0.875rem;
    --spacing-5: 1.125rem;
    --spacing-6: 1.25rem;
    --spacing-7: 1.5rem;
    --spacing-8: 1.75rem;
    --spacing-9: 1.875rem;
    --spacing-10: 2rem;
    --spacing-12: 2.25rem;
    --spacing-14: 2.5rem;
    --spacing-16: 3rem;
    --spacing-18: 3.5rem;
    --spacing-20: 4rem;
    --spacing-24: 4rem;
    --spacing-30: 4.5rem;
    --spacing-32: 4.5rem;
    --spacing-34: 5rem;
    --spacing-40: 7.5rem;
    --spacing-46: 8rem;
    --spacing-49: 8rem;
    --spacing-50: 8.5rem;
    --spacing-56: 8.5rem;
  }
}
@media (max-width: 767px) {
  :root {
    --header-height: 3.125rem;
    --fs-heading1: clamp(2.625rem, 7.5619295958vw, 3.625rem);
    --fs-heading2: clamp(2.125rem, 5.9973924381vw, 2.875rem);
    --fs-heading3: clamp(1.625rem, 6.6666666667vw, 2rem);
    --fs-heading4: clamp(1.375rem, 5.8333333333vw, 1.75rem);
    --fs-title1: clamp(1.25rem, 5vw, 1.5rem);
    --fs-title2: clamp(1rem, 3.75vw, 1.125rem);
    --fs-title3: clamp(0.875rem, 3.3333333333vw, 1rem);
    --fs-title4: clamp(0.75rem, 2.9166666667vw, 0.875rem);
    --fs-body1: clamp(0.875rem, 3.3333333333vw, 1rem);
    --fs-body2: clamp(0.8125rem, 2.9166666667vw, 0.875rem);
    --fs-body3: clamp(0.75rem, 2.7083333333vw, 0.8125rem);
    --fs-body4: clamp(0.5625rem, 2.2916666667vw, 0.6875rem);
    --spacing-0: 0rem;
    --spacing-1: 0.125rem;
    --spacing-2: 0.375rem;
    --spacing-3: 0.625rem;
    --spacing-4: 0.75rem;
    --spacing-5: 1rem;
    --spacing-6: 1.125rem;
    --spacing-7: 1.25rem;
    --spacing-8: 1.5rem;
    --spacing-9: 1.75rem;
    --spacing-10: 1.75rem;
    --spacing-12: 1.875rem;
    --spacing-14: 2rem;
    --spacing-16: 2.25rem;
    --spacing-18: 2.5rem;
    --spacing-20: 2.5rem;
    --spacing-24: 3rem;
    --spacing-30: 4rem;
    --spacing-32: 4rem;
    --spacing-34: 4rem;
    --spacing-40: 5rem;
    --spacing-46: 5rem;
    --spacing-49: 5.5rem;
    --spacing-50: 7rem;
    --spacing-56: 7.5rem;
    --border-radius-sm: 0.375rem;
    --border-radius-md: 0.5rem;
  }
}

html {
  font-size: 16px;
}

body {
  font-family: "Inter", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  -webkit-text-size-adjust: 100%;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  word-break: keep-all;
}

.font-italic {
  font-style: italic;
}

a {
  text-decoration: none;
  color: inherit;
}

.fw-50 {
  font-weight: 50;
}

.fw-100 {
  font-weight: 100;
}

.fw-150 {
  font-weight: 150;
}

.fw-200 {
  font-weight: 200;
}

.fw-250 {
  font-weight: 250;
}

.fw-300 {
  font-weight: 300;
}

.fw-350 {
  font-weight: 350;
}

.fw-400 {
  font-weight: 400;
}

.fw-450 {
  font-weight: 450;
}

.fw-500 {
  font-weight: 500;
}

.fw-550 {
  font-weight: 550;
}

.fw-600 {
  font-weight: 600;
}

.fw-650 {
  font-weight: 650;
}

.fw-700 {
  font-weight: 700;
}

.fw-750 {
  font-weight: 750;
}

.fw-800 {
  font-weight: 800;
}

.fw-850 {
  font-weight: 850;
}

.fw-900 {
  font-weight: 900;
}

.fw-950 {
  font-weight: 950;
}

.fw-1000 {
  font-weight: 1000;
}

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.txt-right {
  text-align: right;
}

.display-inline {
  display: inline-block;
}

.fc-white {
  color: #fff;
}

.fc-black {
  color: #000;
}

.fc-gray-100 {
  color: #666;
}

.fc-grad {
  background: linear-gradient(90deg, #D5B9B4 17.31%, #9689D2 33.17%, #5558F1 52.4%, #2D36AA 70.67%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.text-slogan {
  display: flex;
  justify-content: center;
}

.__uppercase {
  text-transform: uppercase;
}

.fs-heading1 {
  font-size: var(--fs-heading1, 5.375rem);
  line-height: 1.05;
  letter-spacing: 0em;
}

.fs-heading2 {
  font-size: var(--fs-heading2, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.fs-heading3 {
  font-size: var(--fs-heading3, 2.625rem);
  line-height: 1.125;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.fs-heading4 {
  font-size: var(--fs-heading4, 2.25rem);
  line-height: 1.325;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.fs-title1 {
  font-size: var(--fs-title1, 2rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.fs-title2 {
  font-size: var(--fs-title2, 1.625rem);
  line-height: 1.36;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.fs-title3 {
  font-size: var(--fs-title3, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.fs-title4 {
  font-size: var(--fs-title4, 1rem);
  line-height: 1.425;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.fs-body1 {
  font-size: var(--fs-body1, 1.25rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.fs-body2 {
  font-size: var(--fs-body2, 1.125rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.fs-body3 {
  font-size: var(--fs-body3, 1rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.fs-body4 {
  font-size: var(--fs-body4, 0.875rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

[data-anims] [data-anim] {
  will-change: transform, opacity;
  opacity: 0;
  font-kerning: none;
  text-rendering: optimizeSpeed;
}
[data-anims] [data-anim].--animated {
  opacity: 1;
}
[data-anims] .line,
[data-anims] .word {
  clip-path: inset(0);
}
@media (max-width: 767px) {
  [data-anims] .__sentence br {
    display: none;
  }
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  outline: none;
  box-shadow: none;
}

.btn {
  font-size: var(--fs-body3, 16px);
  line-height: 1.5;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.75em;
  justify-content: center;
  height: 3.125em;
  padding: 0 1.625em;
  border-radius: 1.875em;
  background: #eee;
}
.btn svg {
  display: block;
  width: 0.75em;
}
.btn {
  transition: background-color 0.2s, color 0.2s;
}
.btn:hover {
  background: #000;
  color: #fff;
}
.btn.--sm {
  font-size: var(--fs-body3, 16px);
  height: 2.625em;
  border: 1px solid currentColor;
  padding: 0 1em;
  letter-spacing: -0.02em;
}
.btn.--sm:hover {
  background: #000;
  color: #fff;
}
.btn.--xs {
  font-size: var(--fs-body4, 14px);
  height: 2.4285714286em;
  border: 1px solid currentColor;
  padding: 0 1em;
  letter-spacing: -0.02em;
}
.btn.--xs:hover {
  background: #000;
  color: #fff;
}

.slider {
  position: relative;
}
.slider img {
  max-height: 100vh;
  max-height: 100lvh;
}
.slider .__desc {
  position: absolute;
  bottom: var(--spacing-8, 2rem);
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
}
@media (max-width: 767px) {
  .slider .__desc {
    bottom: var(--spacing-4, 1rem);
  }
}
.slider .__pagination {
  position: absolute;
  width: auto;
  display: flex;
  gap: 0.375rem;
  padding-top: var(--spacing-6, 1.5rem);
  top: 100%;
  left: 0;
  right: 0;
  justify-content: center;
  z-index: 2;
  --size: clamp(0.375rem, 1.0430247718vw, 0.5rem);
}
.slider .__pagination .swiper-pagination-bullet {
  padding: 0;
  margin: 0;
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: var(--size, 8px);
  background-color: rgba(0, 0, 0, 0.25);
  transition: width 0.2s ease-out;
  position: relative;
  overflow: hidden;
  opacity: 1;
}
.slider .__pagination .swiper-pagination-bullet:before {
  content: "";
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  border-radius: var(--size, 8px);
}
.slider .__pagination .swiper-pagination-bullet-active {
  width: 2.5rem;
}
.slider .__pagination .swiper-pagination-bullet-active:before {
  animation: slide-progress var(--duration, 5s) linear forwards;
}
@keyframes slide-progress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .slider .__pagination {
    right: var(--gutter);
    top: auto;
    left: auto;
    padding: 0;
    bottom: 2.5rem;
  }
  .slider .__pagination .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.25);
  }
  .slider .__pagination .swiper-pagination-bullet:before {
    background: #fff;
  }
}
@media (max-width: 767px) {
  .slider .__nav {
    display: none;
  }
}

.marquee-slider {
  position: relative;
}
.marquee-slider .swiper {
  overflow: visible;
  margin: 0 auto;
  width: 80vw;
  max-width: 63.75rem;
  font-size: var(--fs-body3);
}
.marquee-slider .item {
  padding: 0 0.25rem;
}
.marquee-slider .item img {
  transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.marquee-slider {
  padding: 0 var(--gutter);
}
.marquee-slider.--overflow-hidden {
  height: 540px !important;
  overflow: hidden;
}
.marquee-slider .__pagination {
  position: absolute;
  width: auto;
  display: flex;
  gap: 0.375rem;
  padding-top: var(--spacing-6, 1.5rem);
  top: 100%;
  left: 0;
  right: 0;
  justify-content: center;
  z-index: 2;
  --size: clamp(0.375rem, 1.0430247718vw, 0.5rem);
}
.marquee-slider .__pagination .swiper-pagination-bullet {
  padding: 0;
  margin: 0;
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: var(--size, 8px);
  background-color: rgba(0, 0, 0, 0.25);
  transition: width 0.2s ease-out;
  position: relative;
  overflow: hidden;
  opacity: 1;
}
.marquee-slider .__pagination .swiper-pagination-bullet:before {
  content: "";
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  border-radius: var(--size, 8px);
}
.marquee-slider .__pagination .swiper-pagination-bullet-active {
  width: 2.5rem;
}
.marquee-slider .__pagination .swiper-pagination-bullet-active:before {
  animation: slide-progress var(--duration, 5s) linear forwards;
}
@keyframes slide-progress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .marquee-slider .__pagination {
    right: var(--gutter);
    top: auto;
    left: auto;
    padding: 0;
    bottom: 2.5rem;
  }
  .marquee-slider .__pagination .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.25);
  }
  .marquee-slider .__pagination .swiper-pagination-bullet:before {
    background: #fff;
  }
}
.marquee-slider .__nav {
  --swiper-theme-color: #000;
}
@media (max-width: 767px) {
  .marquee-slider .__nav {
    display: none;
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-sm);
}
.gallery-grid .__w-full {
  grid-column: span 2;
}
.gallery-grid.--x3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
  .gallery-grid.--x3 {
    margin: 0 calc(-1 * var(--gutter));
  }
}

.__img {
  overflow: hidden;
  background-color: #e1e1e1;
}
.__img img {
  width: 100%;
  object-fit: cover;
  height: 100%;
  display: block;
}
.__img.--3x2 {
  aspect-ratio: 3/2;
}
.__img.--4x3 {
  aspect-ratio: 4/3;
}
.__img.--16x9 {
  aspect-ratio: 16/9;
}
.__img.--2x3 {
  aspect-ratio: 2/3;
}
.__img.--3x4 {
  aspect-ratio: 3/4;
}
.__img.--9x16 {
  aspect-ratio: 9/16;
}

.slider {
  --swiper-theme-color: #3B83FF;
  --swiper-navigation-size: 2.25rem;
  --swiper-navigation-sides-offset: 1.5rem;
}
.slider .swiper-button-next,
.slider .swiper-button-prev {
  color: #fff;
}
.slider .swiper-button-next:hover,
.slider .swiper-button-prev:hover {
  color: #3B83FF;
}

.page-indices {
  font-size: clamp(0.75rem, 1.8252933507vw, 0.875rem);
  padding: 0.8571428571em var(--gutter);
  position: sticky;
  top: 0;
  z-index: 99989;
  display: flex;
  justify-content: center;
}
.page-indices .__projects {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 5em;
  background: #f5f5f5;
  padding: 0.2857142857em;
  transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  will-change: transform;
}
.page-indices .__projects:before {
  display: block;
  content: "";
  position: absolute;
  border-radius: 5em;
  left: var(--cursor-left, 0);
  top: var(--cursor-top, 0);
  width: var(--cursor-width, 0);
  height: 3.2em;
  transition: left 0.3s cubic-bezier(0.42, 0, 0.58, 1), width 0.3s cubic-bezier(0.42, 0, 0.58, 1), height 0.3s cubic-bezier(0.42, 0, 0.58, 1);
  background: #E4E4E4;
}
.page-indices .__projects ul {
  display: flex;
  position: relative;
  z-index: 2;
}
.page-indices .__projects ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25em;
  height: 3.2em;
  border-radius: 5em;
  font-weight: 400;
  opacity: 0.5;
}
.page-indices .__projects ul li a.--active {
  opacity: 1;
  font-weight: 600;
}
.page-indices[data-theme=dark] {
  background: #000;
  color: #fff;
  font-size: clamp(0.875rem, 2.3468057366vw, 1.125rem);
}
.page-indices[data-theme=dark] .__projects {
  background: transparent;
}
.page-indices[data-theme=dark] .__projects:before {
  display: none;
}
.page-indices[data-theme=dark] .__projects ul a {
  height: 1.2em;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.page-indices[data-theme=dark] .__projects ul a.--active {
  opacity: 1;
}
.page-indices.--sticky-top[data-scroll-direction=up] .__projects {
  transform: translateY(-150%);
}

.page-v-indices {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  position: fixed;
  right: calc(var(--gutter) / 2);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), visibility 0.3s cubic-bezier(0.42, 0, 0.58, 1), z-index 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.page-v-indices.--active {
  opacity: 1;
  visibility: visible;
  z-index: 99998;
}
.page-v-indices ul {
  display: grid;
  gap: 1rem;
}
.page-v-indices ul li a {
  position: relative;
}
.page-v-indices ul li a i {
  width: 0.625rem;
  aspect-ratio: 1/1;
  display: block;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #fff;
  transition: background-color 0.3s cubic-bezier(0.42, 0, 0.58, 1), border-color 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.page-v-indices ul li a span {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  right: 100%;
  padding: 0.5em;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translate(-2em, -50%);
  transition: opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1), transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.page-v-indices ul li a.--active i {
  background: #000;
}
.page-v-indices ul li a.--active span {
  opacity: 1;
  transform: translate(0, -50%);
}

.tab-menu {
  position: sticky;
  top: 0;
  z-index: 99989;
}
.tab-menu .__inner {
  overflow: auto;
  display: flex;
  transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  will-change: transform;
  padding-top: var(--spacing-4, 1rem);
  padding-bottom: var(--spacing-4, 1rem);
  font-size: clamp(0.875rem, 1.5640273705vw, 1rem);
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.tab-menu .container {
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .tab-menu {
    margin-bottom: var(--spacing-4, 1rem);
  }
}
.tab-menu ul {
  display: flex;
  gap: clamp(1.25em, 3.5384615385vw, 2.875em);
  white-space: nowrap;
  justify-content: center;
  width: 100%;
}
.tab-menu ul a {
  position: relative;
  padding: 0.25em 0;
  opacity: 0.3;
  line-height: 1.2;
  display: flex;
  text-transform: uppercase;
}
.tab-menu ul a:after {
  content: "";
  height: 2px;
  background-color: #000;
  position: absolute;
  bottom: 0;
  left: 0;
}
.tab-menu ul a.--active {
  background-color: transparent;
  opacity: 1;
  font-weight: 700;
}
.tab-menu ul a.--active:after {
  width: 100%;
}
.tab-menu.--sticky-top[data-scroll-direction=up] .__inner {
  transform: translateY(-150%);
}

.user-flow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 63.75rem;
}
.user-flow ul {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1.25rem;
}
.user-flow ul li {
  text-align: center;
  line-height: 1.3;
}
.user-flow ul .line {
  flex: 1;
}
.user-flow ul .line:before {
  content: "";
  border-top: 2px dashed #969696;
  display: block;
}
@media (max-width: 767px) {
  .user-flow ul {
    flex-direction: column;
  }
  .user-flow ul .line:before {
    width: 2px;
    height: 1.25rem;
    border-top: none;
    border-left: 2px dashed #969696;
  }
}

.--modal-opened {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 199998;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.modal.--active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.modal .modal-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: auto;
  padding: var(--gutter);
  box-sizing: border-box;
}
.modal .modal-box {
  width: 100%;
  max-width: 90rem;
}
.modal .modal-box .btn-close {
  margin-left: auto;
  display: block;
  font-size: 2.25rem;
  font-weight: 300;
  color: #fff;
  aspect-ratio: 1/1;
  margin-bottom: 0.3125rem;
}
.modal .video-player {
  width: 100%;
}
.modal .video-player .video-nav {
  position: relative;
  display: flex;
  background: #111;
}
.modal .video-player .video-nav a {
  flex: 1;
  color: #fff;
  text-align: center;
  padding: 1em;
  font-size: var(--fs-body3);
  opacity: 0.25;
  transition: opacity 0.3s, background 0.3s, visibility 0.3s;
}
.modal .video-player .video-nav a.--active {
  background: #000;
  opacity: 1;
  font-weight: 600;
}
.modal .video-player .video-tab {
  display: none;
}
.modal .video-player .video-tab.--active {
  display: block;
}
.modal .video-player video {
  display: block;
  aspect-ratio: 16/9;
  object-fit: contain;
  background: #000;
}

[data-content-theme=dark] {
  background: #000;
  color: #fff;
  --txt-color: #fff;
  --bg-color: #000;
}

.section {
  position: relative;
}
.section.--overflow-hidden {
  overflow: hidden;
  clip-path: inset(0);
}
.section .section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: end;
}
@media (max-width: 767px) {
  .section .section-heading {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
}
.section .section-heading.--type2 {
  align-items: flex-start;
  grid-template-columns: 1fr 2fr;
}

.section-kv {
  position: relative;
}
.section-kv:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5.625rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
}
.section-kv video {
  width: 100%;
  height: 100vh;
  height: 100svh;
}
.section-kv .__scroll {
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.125);
  height: clamp(1.25rem, 7.6923076923vw, 6.25rem);
  z-index: 3;
}
.section-kv .__scroll:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  background: #fff;
  height: 0%;
  animation: scroll-line 2.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}
@keyframes scroll-line {
  0% {
    top: 0;
  }
  30% {
    top: 0;
  }
  60% {
    height: 100%;
  }
  80%, 100% {
    top: 150%;
  }
}
.section-kv .swiper .swiper-slide {
  overflow: hidden;
}
.section-kv .kv-slide-item img {
  width: 100%;
  height: 100vh;
  height: 100svh;
  object-fit: cover;
}
.section-kv .__pagination {
  position: absolute;
  left: auto;
  top: auto;
  right: var(--gutter);
  bottom: 1.875rem;
  z-index: 3;
  width: initial;
  display: flex;
  gap: 0.25rem;
}
.section-kv .__pagination .swiper-pagination-bullet {
  width: 1.125rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  margin: 0;
  background-color: #fff;
}
.section-kv .__desc {
  z-index: 3;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  color: #fff;
  mix-blend-mode: difference;
  width: 100%;
}
.section-kv .__desc h1 {
  font-size: clamp(1rem, 4.1055718475vw, 2.625rem);
  font-weight: 300;
  line-height: 1.2;
}
.section-kv .__desc p {
  font-size: clamp(0.625rem, 1.5640273705vw, 1rem);
  margin-top: 1em;
  font-weight: 300;
  line-height: 1.6;
}
.section-kv.--sub .__kv-img img,
.section-kv.--sub .__kv-img video {
  height: auto;
  max-height: 80vh;
  max-height: 80svh;
}
.section-kv[data-theme=dark] .__scroll {
  background: rgba(0, 0, 0, 0.25);
}
.section-kv[data-theme=dark] .__scroll:before {
  background: #000;
}
.section-product-heading .__grid {
  display: grid;
  grid-template-columns: minmax(auto, 33.75rem) 1fr;
}
.section-product-heading .__grid .__desc {
  padding-bottom: var(--spacing-10, 2.5rem);
  box-sizing: border-box;
}
.section-product-heading .__grid .__desc .__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}
.section-product-heading .__grid .__desc p {
  max-width: 18em;
}
.section-product-heading .__grid .__desc .__cta {
  margin-top: var(--spacing-10, 2.5rem);
}
.section-product-heading .__grid .__img {
  background: #000;
}
.section-product-heading .__grid .__img img,
.section-product-heading .__grid .__img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 1023px) {
  .section-product-heading .__grid {
    grid-template-columns: 1fr;
  }
  .section-product-heading .__grid .__desc p {
    max-width: initial;
  }
}

.sp-mt-0 {
  margin-top: var(--spacing-0, 0rem);
}

.sp-mb-0 {
  margin-bottom: var(--spacing-0, 0rem);
}

.sp-ml-0 {
  margin-left: var(--spacing-0, 0rem);
}

.sp-mr-0 {
  margin-right: var(--spacing-0, 0rem);
}

.sp-pt-0 {
  padding-top: var(--spacing-0, 0rem);
}

.sp-pb-0 {
  padding-bottom: var(--spacing-0, 0rem);
}

.sp-pl-0 {
  padding-left: var(--spacing-0, 0rem);
}

.sp-pr-0 {
  padding-right: var(--spacing-0, 0rem);
}

.sp-w-0 {
  width: var(--spacing-0, 0rem);
}

.sp-h-0 {
  height: var(--spacing-0, 0rem);
}

.sp-px-0 {
  padding-left: var(--spacing-0, 0rem);
  padding-right: var(--spacing-0, 0rem);
}

.sp-py-0 {
  padding-top: var(--spacing-0, 0rem);
  padding-bottom: var(--spacing-0, 0rem);
}

.sp-mt-1 {
  margin-top: var(--spacing-1, 0.25rem);
}

.sp-mb-1 {
  margin-bottom: var(--spacing-1, 0.25rem);
}

.sp-ml-1 {
  margin-left: var(--spacing-1, 0.25rem);
}

.sp-mr-1 {
  margin-right: var(--spacing-1, 0.25rem);
}

.sp-pt-1 {
  padding-top: var(--spacing-1, 0.25rem);
}

.sp-pb-1 {
  padding-bottom: var(--spacing-1, 0.25rem);
}

.sp-pl-1 {
  padding-left: var(--spacing-1, 0.25rem);
}

.sp-pr-1 {
  padding-right: var(--spacing-1, 0.25rem);
}

.sp-w-1 {
  width: var(--spacing-1, 0.25rem);
}

.sp-h-1 {
  height: var(--spacing-1, 0.25rem);
}

.sp-px-1 {
  padding-left: var(--spacing-1, 0.25rem);
  padding-right: var(--spacing-1, 0.25rem);
}

.sp-py-1 {
  padding-top: var(--spacing-1, 0.25rem);
  padding-bottom: var(--spacing-1, 0.25rem);
}

.sp-mt-2 {
  margin-top: var(--spacing-2, 0.5rem);
}

.sp-mb-2 {
  margin-bottom: var(--spacing-2, 0.5rem);
}

.sp-ml-2 {
  margin-left: var(--spacing-2, 0.5rem);
}

.sp-mr-2 {
  margin-right: var(--spacing-2, 0.5rem);
}

.sp-pt-2 {
  padding-top: var(--spacing-2, 0.5rem);
}

.sp-pb-2 {
  padding-bottom: var(--spacing-2, 0.5rem);
}

.sp-pl-2 {
  padding-left: var(--spacing-2, 0.5rem);
}

.sp-pr-2 {
  padding-right: var(--spacing-2, 0.5rem);
}

.sp-w-2 {
  width: var(--spacing-2, 0.5rem);
}

.sp-h-2 {
  height: var(--spacing-2, 0.5rem);
}

.sp-px-2 {
  padding-left: var(--spacing-2, 0.5rem);
  padding-right: var(--spacing-2, 0.5rem);
}

.sp-py-2 {
  padding-top: var(--spacing-2, 0.5rem);
  padding-bottom: var(--spacing-2, 0.5rem);
}

.sp-mt-3 {
  margin-top: var(--spacing-3, 0.75rem);
}

.sp-mb-3 {
  margin-bottom: var(--spacing-3, 0.75rem);
}

.sp-ml-3 {
  margin-left: var(--spacing-3, 0.75rem);
}

.sp-mr-3 {
  margin-right: var(--spacing-3, 0.75rem);
}

.sp-pt-3 {
  padding-top: var(--spacing-3, 0.75rem);
}

.sp-pb-3 {
  padding-bottom: var(--spacing-3, 0.75rem);
}

.sp-pl-3 {
  padding-left: var(--spacing-3, 0.75rem);
}

.sp-pr-3 {
  padding-right: var(--spacing-3, 0.75rem);
}

.sp-w-3 {
  width: var(--spacing-3, 0.75rem);
}

.sp-h-3 {
  height: var(--spacing-3, 0.75rem);
}

.sp-px-3 {
  padding-left: var(--spacing-3, 0.75rem);
  padding-right: var(--spacing-3, 0.75rem);
}

.sp-py-3 {
  padding-top: var(--spacing-3, 0.75rem);
  padding-bottom: var(--spacing-3, 0.75rem);
}

.sp-mt-4 {
  margin-top: var(--spacing-4, 1rem);
}

.sp-mb-4 {
  margin-bottom: var(--spacing-4, 1rem);
}

.sp-ml-4 {
  margin-left: var(--spacing-4, 1rem);
}

.sp-mr-4 {
  margin-right: var(--spacing-4, 1rem);
}

.sp-pt-4 {
  padding-top: var(--spacing-4, 1rem);
}

.sp-pb-4 {
  padding-bottom: var(--spacing-4, 1rem);
}

.sp-pl-4 {
  padding-left: var(--spacing-4, 1rem);
}

.sp-pr-4 {
  padding-right: var(--spacing-4, 1rem);
}

.sp-w-4 {
  width: var(--spacing-4, 1rem);
}

.sp-h-4 {
  height: var(--spacing-4, 1rem);
}

.sp-px-4 {
  padding-left: var(--spacing-4, 1rem);
  padding-right: var(--spacing-4, 1rem);
}

.sp-py-4 {
  padding-top: var(--spacing-4, 1rem);
  padding-bottom: var(--spacing-4, 1rem);
}

.sp-mt-5 {
  margin-top: var(--spacing-5, 1.25rem);
}

.sp-mb-5 {
  margin-bottom: var(--spacing-5, 1.25rem);
}

.sp-ml-5 {
  margin-left: var(--spacing-5, 1.25rem);
}

.sp-mr-5 {
  margin-right: var(--spacing-5, 1.25rem);
}

.sp-pt-5 {
  padding-top: var(--spacing-5, 1.25rem);
}

.sp-pb-5 {
  padding-bottom: var(--spacing-5, 1.25rem);
}

.sp-pl-5 {
  padding-left: var(--spacing-5, 1.25rem);
}

.sp-pr-5 {
  padding-right: var(--spacing-5, 1.25rem);
}

.sp-w-5 {
  width: var(--spacing-5, 1.25rem);
}

.sp-h-5 {
  height: var(--spacing-5, 1.25rem);
}

.sp-px-5 {
  padding-left: var(--spacing-5, 1.25rem);
  padding-right: var(--spacing-5, 1.25rem);
}

.sp-py-5 {
  padding-top: var(--spacing-5, 1.25rem);
  padding-bottom: var(--spacing-5, 1.25rem);
}

.sp-mt-6 {
  margin-top: var(--spacing-6, 1.5rem);
}

.sp-mb-6 {
  margin-bottom: var(--spacing-6, 1.5rem);
}

.sp-ml-6 {
  margin-left: var(--spacing-6, 1.5rem);
}

.sp-mr-6 {
  margin-right: var(--spacing-6, 1.5rem);
}

.sp-pt-6 {
  padding-top: var(--spacing-6, 1.5rem);
}

.sp-pb-6 {
  padding-bottom: var(--spacing-6, 1.5rem);
}

.sp-pl-6 {
  padding-left: var(--spacing-6, 1.5rem);
}

.sp-pr-6 {
  padding-right: var(--spacing-6, 1.5rem);
}

.sp-w-6 {
  width: var(--spacing-6, 1.5rem);
}

.sp-h-6 {
  height: var(--spacing-6, 1.5rem);
}

.sp-px-6 {
  padding-left: var(--spacing-6, 1.5rem);
  padding-right: var(--spacing-6, 1.5rem);
}

.sp-py-6 {
  padding-top: var(--spacing-6, 1.5rem);
  padding-bottom: var(--spacing-6, 1.5rem);
}

.sp-mt-7 {
  margin-top: var(--spacing-7, 1.75rem);
}

.sp-mb-7 {
  margin-bottom: var(--spacing-7, 1.75rem);
}

.sp-ml-7 {
  margin-left: var(--spacing-7, 1.75rem);
}

.sp-mr-7 {
  margin-right: var(--spacing-7, 1.75rem);
}

.sp-pt-7 {
  padding-top: var(--spacing-7, 1.75rem);
}

.sp-pb-7 {
  padding-bottom: var(--spacing-7, 1.75rem);
}

.sp-pl-7 {
  padding-left: var(--spacing-7, 1.75rem);
}

.sp-pr-7 {
  padding-right: var(--spacing-7, 1.75rem);
}

.sp-w-7 {
  width: var(--spacing-7, 1.75rem);
}

.sp-h-7 {
  height: var(--spacing-7, 1.75rem);
}

.sp-px-7 {
  padding-left: var(--spacing-7, 1.75rem);
  padding-right: var(--spacing-7, 1.75rem);
}

.sp-py-7 {
  padding-top: var(--spacing-7, 1.75rem);
  padding-bottom: var(--spacing-7, 1.75rem);
}

.sp-mt-8 {
  margin-top: var(--spacing-8, 2rem);
}

.sp-mb-8 {
  margin-bottom: var(--spacing-8, 2rem);
}

.sp-ml-8 {
  margin-left: var(--spacing-8, 2rem);
}

.sp-mr-8 {
  margin-right: var(--spacing-8, 2rem);
}

.sp-pt-8 {
  padding-top: var(--spacing-8, 2rem);
}

.sp-pb-8 {
  padding-bottom: var(--spacing-8, 2rem);
}

.sp-pl-8 {
  padding-left: var(--spacing-8, 2rem);
}

.sp-pr-8 {
  padding-right: var(--spacing-8, 2rem);
}

.sp-w-8 {
  width: var(--spacing-8, 2rem);
}

.sp-h-8 {
  height: var(--spacing-8, 2rem);
}

.sp-px-8 {
  padding-left: var(--spacing-8, 2rem);
  padding-right: var(--spacing-8, 2rem);
}

.sp-py-8 {
  padding-top: var(--spacing-8, 2rem);
  padding-bottom: var(--spacing-8, 2rem);
}

.sp-mt-9 {
  margin-top: var(--spacing-9, 2.25rem);
}

.sp-mb-9 {
  margin-bottom: var(--spacing-9, 2.25rem);
}

.sp-ml-9 {
  margin-left: var(--spacing-9, 2.25rem);
}

.sp-mr-9 {
  margin-right: var(--spacing-9, 2.25rem);
}

.sp-pt-9 {
  padding-top: var(--spacing-9, 2.25rem);
}

.sp-pb-9 {
  padding-bottom: var(--spacing-9, 2.25rem);
}

.sp-pl-9 {
  padding-left: var(--spacing-9, 2.25rem);
}

.sp-pr-9 {
  padding-right: var(--spacing-9, 2.25rem);
}

.sp-w-9 {
  width: var(--spacing-9, 2.25rem);
}

.sp-h-9 {
  height: var(--spacing-9, 2.25rem);
}

.sp-px-9 {
  padding-left: var(--spacing-9, 2.25rem);
  padding-right: var(--spacing-9, 2.25rem);
}

.sp-py-9 {
  padding-top: var(--spacing-9, 2.25rem);
  padding-bottom: var(--spacing-9, 2.25rem);
}

.sp-mt-10 {
  margin-top: var(--spacing-10, 2.5rem);
}

.sp-mb-10 {
  margin-bottom: var(--spacing-10, 2.5rem);
}

.sp-ml-10 {
  margin-left: var(--spacing-10, 2.5rem);
}

.sp-mr-10 {
  margin-right: var(--spacing-10, 2.5rem);
}

.sp-pt-10 {
  padding-top: var(--spacing-10, 2.5rem);
}

.sp-pb-10 {
  padding-bottom: var(--spacing-10, 2.5rem);
}

.sp-pl-10 {
  padding-left: var(--spacing-10, 2.5rem);
}

.sp-pr-10 {
  padding-right: var(--spacing-10, 2.5rem);
}

.sp-w-10 {
  width: var(--spacing-10, 2.5rem);
}

.sp-h-10 {
  height: var(--spacing-10, 2.5rem);
}

.sp-px-10 {
  padding-left: var(--spacing-10, 2.5rem);
  padding-right: var(--spacing-10, 2.5rem);
}

.sp-py-10 {
  padding-top: var(--spacing-10, 2.5rem);
  padding-bottom: var(--spacing-10, 2.5rem);
}

.sp-mt-12 {
  margin-top: var(--spacing-12, 3rem);
}

.sp-mb-12 {
  margin-bottom: var(--spacing-12, 3rem);
}

.sp-ml-12 {
  margin-left: var(--spacing-12, 3rem);
}

.sp-mr-12 {
  margin-right: var(--spacing-12, 3rem);
}

.sp-pt-12 {
  padding-top: var(--spacing-12, 3rem);
}

.sp-pb-12 {
  padding-bottom: var(--spacing-12, 3rem);
}

.sp-pl-12 {
  padding-left: var(--spacing-12, 3rem);
}

.sp-pr-12 {
  padding-right: var(--spacing-12, 3rem);
}

.sp-w-12 {
  width: var(--spacing-12, 3rem);
}

.sp-h-12 {
  height: var(--spacing-12, 3rem);
}

.sp-px-12 {
  padding-left: var(--spacing-12, 3rem);
  padding-right: var(--spacing-12, 3rem);
}

.sp-py-12 {
  padding-top: var(--spacing-12, 3rem);
  padding-bottom: var(--spacing-12, 3rem);
}

.sp-mt-14 {
  margin-top: var(--spacing-14, 3.5rem);
}

.sp-mb-14 {
  margin-bottom: var(--spacing-14, 3.5rem);
}

.sp-ml-14 {
  margin-left: var(--spacing-14, 3.5rem);
}

.sp-mr-14 {
  margin-right: var(--spacing-14, 3.5rem);
}

.sp-pt-14 {
  padding-top: var(--spacing-14, 3.5rem);
}

.sp-pb-14 {
  padding-bottom: var(--spacing-14, 3.5rem);
}

.sp-pl-14 {
  padding-left: var(--spacing-14, 3.5rem);
}

.sp-pr-14 {
  padding-right: var(--spacing-14, 3.5rem);
}

.sp-w-14 {
  width: var(--spacing-14, 3.5rem);
}

.sp-h-14 {
  height: var(--spacing-14, 3.5rem);
}

.sp-px-14 {
  padding-left: var(--spacing-14, 3.5rem);
  padding-right: var(--spacing-14, 3.5rem);
}

.sp-py-14 {
  padding-top: var(--spacing-14, 3.5rem);
  padding-bottom: var(--spacing-14, 3.5rem);
}

.sp-mt-16 {
  margin-top: var(--spacing-16, 4rem);
}

.sp-mb-16 {
  margin-bottom: var(--spacing-16, 4rem);
}

.sp-ml-16 {
  margin-left: var(--spacing-16, 4rem);
}

.sp-mr-16 {
  margin-right: var(--spacing-16, 4rem);
}

.sp-pt-16 {
  padding-top: var(--spacing-16, 4rem);
}

.sp-pb-16 {
  padding-bottom: var(--spacing-16, 4rem);
}

.sp-pl-16 {
  padding-left: var(--spacing-16, 4rem);
}

.sp-pr-16 {
  padding-right: var(--spacing-16, 4rem);
}

.sp-w-16 {
  width: var(--spacing-16, 4rem);
}

.sp-h-16 {
  height: var(--spacing-16, 4rem);
}

.sp-px-16 {
  padding-left: var(--spacing-16, 4rem);
  padding-right: var(--spacing-16, 4rem);
}

.sp-py-16 {
  padding-top: var(--spacing-16, 4rem);
  padding-bottom: var(--spacing-16, 4rem);
}

.sp-mt-18 {
  margin-top: var(--spacing-18, 4.5rem);
}

.sp-mb-18 {
  margin-bottom: var(--spacing-18, 4.5rem);
}

.sp-ml-18 {
  margin-left: var(--spacing-18, 4.5rem);
}

.sp-mr-18 {
  margin-right: var(--spacing-18, 4.5rem);
}

.sp-pt-18 {
  padding-top: var(--spacing-18, 4.5rem);
}

.sp-pb-18 {
  padding-bottom: var(--spacing-18, 4.5rem);
}

.sp-pl-18 {
  padding-left: var(--spacing-18, 4.5rem);
}

.sp-pr-18 {
  padding-right: var(--spacing-18, 4.5rem);
}

.sp-w-18 {
  width: var(--spacing-18, 4.5rem);
}

.sp-h-18 {
  height: var(--spacing-18, 4.5rem);
}

.sp-px-18 {
  padding-left: var(--spacing-18, 4.5rem);
  padding-right: var(--spacing-18, 4.5rem);
}

.sp-py-18 {
  padding-top: var(--spacing-18, 4.5rem);
  padding-bottom: var(--spacing-18, 4.5rem);
}

.sp-mt-20 {
  margin-top: var(--spacing-20, 5rem);
}

.sp-mb-20 {
  margin-bottom: var(--spacing-20, 5rem);
}

.sp-ml-20 {
  margin-left: var(--spacing-20, 5rem);
}

.sp-mr-20 {
  margin-right: var(--spacing-20, 5rem);
}

.sp-pt-20 {
  padding-top: var(--spacing-20, 5rem);
}

.sp-pb-20 {
  padding-bottom: var(--spacing-20, 5rem);
}

.sp-pl-20 {
  padding-left: var(--spacing-20, 5rem);
}

.sp-pr-20 {
  padding-right: var(--spacing-20, 5rem);
}

.sp-w-20 {
  width: var(--spacing-20, 5rem);
}

.sp-h-20 {
  height: var(--spacing-20, 5rem);
}

.sp-px-20 {
  padding-left: var(--spacing-20, 5rem);
  padding-right: var(--spacing-20, 5rem);
}

.sp-py-20 {
  padding-top: var(--spacing-20, 5rem);
  padding-bottom: var(--spacing-20, 5rem);
}

.sp-mt-24 {
  margin-top: var(--spacing-24, 6rem);
}

.sp-mb-24 {
  margin-bottom: var(--spacing-24, 6rem);
}

.sp-ml-24 {
  margin-left: var(--spacing-24, 6rem);
}

.sp-mr-24 {
  margin-right: var(--spacing-24, 6rem);
}

.sp-pt-24 {
  padding-top: var(--spacing-24, 6rem);
}

.sp-pb-24 {
  padding-bottom: var(--spacing-24, 6rem);
}

.sp-pl-24 {
  padding-left: var(--spacing-24, 6rem);
}

.sp-pr-24 {
  padding-right: var(--spacing-24, 6rem);
}

.sp-w-24 {
  width: var(--spacing-24, 6rem);
}

.sp-h-24 {
  height: var(--spacing-24, 6rem);
}

.sp-px-24 {
  padding-left: var(--spacing-24, 6rem);
  padding-right: var(--spacing-24, 6rem);
}

.sp-py-24 {
  padding-top: var(--spacing-24, 6rem);
  padding-bottom: var(--spacing-24, 6rem);
}

.sp-mt-30 {
  margin-top: var(--spacing-30, 7.5rem);
}

.sp-mb-30 {
  margin-bottom: var(--spacing-30, 7.5rem);
}

.sp-ml-30 {
  margin-left: var(--spacing-30, 7.5rem);
}

.sp-mr-30 {
  margin-right: var(--spacing-30, 7.5rem);
}

.sp-pt-30 {
  padding-top: var(--spacing-30, 7.5rem);
}

.sp-pb-30 {
  padding-bottom: var(--spacing-30, 7.5rem);
}

.sp-pl-30 {
  padding-left: var(--spacing-30, 7.5rem);
}

.sp-pr-30 {
  padding-right: var(--spacing-30, 7.5rem);
}

.sp-w-30 {
  width: var(--spacing-30, 7.5rem);
}

.sp-h-30 {
  height: var(--spacing-30, 7.5rem);
}

.sp-px-30 {
  padding-left: var(--spacing-30, 7.5rem);
  padding-right: var(--spacing-30, 7.5rem);
}

.sp-py-30 {
  padding-top: var(--spacing-30, 7.5rem);
  padding-bottom: var(--spacing-30, 7.5rem);
}

.sp-mt-32 {
  margin-top: var(--spacing-32, 8rem);
}

.sp-mb-32 {
  margin-bottom: var(--spacing-32, 8rem);
}

.sp-ml-32 {
  margin-left: var(--spacing-32, 8rem);
}

.sp-mr-32 {
  margin-right: var(--spacing-32, 8rem);
}

.sp-pt-32 {
  padding-top: var(--spacing-32, 8rem);
}

.sp-pb-32 {
  padding-bottom: var(--spacing-32, 8rem);
}

.sp-pl-32 {
  padding-left: var(--spacing-32, 8rem);
}

.sp-pr-32 {
  padding-right: var(--spacing-32, 8rem);
}

.sp-w-32 {
  width: var(--spacing-32, 8rem);
}

.sp-h-32 {
  height: var(--spacing-32, 8rem);
}

.sp-px-32 {
  padding-left: var(--spacing-32, 8rem);
  padding-right: var(--spacing-32, 8rem);
}

.sp-py-32 {
  padding-top: var(--spacing-32, 8rem);
  padding-bottom: var(--spacing-32, 8rem);
}

.sp-mt-34 {
  margin-top: var(--spacing-34, 8.5rem);
}

.sp-mb-34 {
  margin-bottom: var(--spacing-34, 8.5rem);
}

.sp-ml-34 {
  margin-left: var(--spacing-34, 8.5rem);
}

.sp-mr-34 {
  margin-right: var(--spacing-34, 8.5rem);
}

.sp-pt-34 {
  padding-top: var(--spacing-34, 8.5rem);
}

.sp-pb-34 {
  padding-bottom: var(--spacing-34, 8.5rem);
}

.sp-pl-34 {
  padding-left: var(--spacing-34, 8.5rem);
}

.sp-pr-34 {
  padding-right: var(--spacing-34, 8.5rem);
}

.sp-w-34 {
  width: var(--spacing-34, 8.5rem);
}

.sp-h-34 {
  height: var(--spacing-34, 8.5rem);
}

.sp-px-34 {
  padding-left: var(--spacing-34, 8.5rem);
  padding-right: var(--spacing-34, 8.5rem);
}

.sp-py-34 {
  padding-top: var(--spacing-34, 8.5rem);
  padding-bottom: var(--spacing-34, 8.5rem);
}

.sp-mt-40 {
  margin-top: var(--spacing-40, 10rem);
}

.sp-mb-40 {
  margin-bottom: var(--spacing-40, 10rem);
}

.sp-ml-40 {
  margin-left: var(--spacing-40, 10rem);
}

.sp-mr-40 {
  margin-right: var(--spacing-40, 10rem);
}

.sp-pt-40 {
  padding-top: var(--spacing-40, 10rem);
}

.sp-pb-40 {
  padding-bottom: var(--spacing-40, 10rem);
}

.sp-pl-40 {
  padding-left: var(--spacing-40, 10rem);
}

.sp-pr-40 {
  padding-right: var(--spacing-40, 10rem);
}

.sp-w-40 {
  width: var(--spacing-40, 10rem);
}

.sp-h-40 {
  height: var(--spacing-40, 10rem);
}

.sp-px-40 {
  padding-left: var(--spacing-40, 10rem);
  padding-right: var(--spacing-40, 10rem);
}

.sp-py-40 {
  padding-top: var(--spacing-40, 10rem);
  padding-bottom: var(--spacing-40, 10rem);
}

.sp-mt-46 {
  margin-top: var(--spacing-46, 11.5rem);
}

.sp-mb-46 {
  margin-bottom: var(--spacing-46, 11.5rem);
}

.sp-ml-46 {
  margin-left: var(--spacing-46, 11.5rem);
}

.sp-mr-46 {
  margin-right: var(--spacing-46, 11.5rem);
}

.sp-pt-46 {
  padding-top: var(--spacing-46, 11.5rem);
}

.sp-pb-46 {
  padding-bottom: var(--spacing-46, 11.5rem);
}

.sp-pl-46 {
  padding-left: var(--spacing-46, 11.5rem);
}

.sp-pr-46 {
  padding-right: var(--spacing-46, 11.5rem);
}

.sp-w-46 {
  width: var(--spacing-46, 11.5rem);
}

.sp-h-46 {
  height: var(--spacing-46, 11.5rem);
}

.sp-px-46 {
  padding-left: var(--spacing-46, 11.5rem);
  padding-right: var(--spacing-46, 11.5rem);
}

.sp-py-46 {
  padding-top: var(--spacing-46, 11.5rem);
  padding-bottom: var(--spacing-46, 11.5rem);
}

.sp-mt-49 {
  margin-top: var(--spacing-49, 12.25rem);
}

.sp-mb-49 {
  margin-bottom: var(--spacing-49, 12.25rem);
}

.sp-ml-49 {
  margin-left: var(--spacing-49, 12.25rem);
}

.sp-mr-49 {
  margin-right: var(--spacing-49, 12.25rem);
}

.sp-pt-49 {
  padding-top: var(--spacing-49, 12.25rem);
}

.sp-pb-49 {
  padding-bottom: var(--spacing-49, 12.25rem);
}

.sp-pl-49 {
  padding-left: var(--spacing-49, 12.25rem);
}

.sp-pr-49 {
  padding-right: var(--spacing-49, 12.25rem);
}

.sp-w-49 {
  width: var(--spacing-49, 12.25rem);
}

.sp-h-49 {
  height: var(--spacing-49, 12.25rem);
}

.sp-px-49 {
  padding-left: var(--spacing-49, 12.25rem);
  padding-right: var(--spacing-49, 12.25rem);
}

.sp-py-49 {
  padding-top: var(--spacing-49, 12.25rem);
  padding-bottom: var(--spacing-49, 12.25rem);
}

.sp-mt-50 {
  margin-top: var(--spacing-50, 12.5rem);
}

.sp-mb-50 {
  margin-bottom: var(--spacing-50, 12.5rem);
}

.sp-ml-50 {
  margin-left: var(--spacing-50, 12.5rem);
}

.sp-mr-50 {
  margin-right: var(--spacing-50, 12.5rem);
}

.sp-pt-50 {
  padding-top: var(--spacing-50, 12.5rem);
}

.sp-pb-50 {
  padding-bottom: var(--spacing-50, 12.5rem);
}

.sp-pl-50 {
  padding-left: var(--spacing-50, 12.5rem);
}

.sp-pr-50 {
  padding-right: var(--spacing-50, 12.5rem);
}

.sp-w-50 {
  width: var(--spacing-50, 12.5rem);
}

.sp-h-50 {
  height: var(--spacing-50, 12.5rem);
}

.sp-px-50 {
  padding-left: var(--spacing-50, 12.5rem);
  padding-right: var(--spacing-50, 12.5rem);
}

.sp-py-50 {
  padding-top: var(--spacing-50, 12.5rem);
  padding-bottom: var(--spacing-50, 12.5rem);
}

.sp-mt-56 {
  margin-top: var(--spacing-56, 15rem);
}

.sp-mb-56 {
  margin-bottom: var(--spacing-56, 15rem);
}

.sp-ml-56 {
  margin-left: var(--spacing-56, 15rem);
}

.sp-mr-56 {
  margin-right: var(--spacing-56, 15rem);
}

.sp-pt-56 {
  padding-top: var(--spacing-56, 15rem);
}

.sp-pb-56 {
  padding-bottom: var(--spacing-56, 15rem);
}

.sp-pl-56 {
  padding-left: var(--spacing-56, 15rem);
}

.sp-pr-56 {
  padding-right: var(--spacing-56, 15rem);
}

.sp-w-56 {
  width: var(--spacing-56, 15rem);
}

.sp-h-56 {
  height: var(--spacing-56, 15rem);
}

.sp-px-56 {
  padding-left: var(--spacing-56, 15rem);
  padding-right: var(--spacing-56, 15rem);
}

.sp-py-56 {
  padding-top: var(--spacing-56, 15rem);
  padding-bottom: var(--spacing-56, 15rem);
}

.mt-auto {
  margin-top: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

* {
  box-sizing: border-box;
}

html, body {
  background: #fff;
}

#main {
  min-height: 100vh;
  min-height: 100svh;
}

.container {
  padding: 0 var(--gutter);
}
.container .__boxed {
  margin-left: auto;
  margin-right: auto;
}
.container .__boxed.--xl {
  max-width: 120rem;
}
.container .__boxed.--lg {
  max-width: 90rem;
}
.container .__boxed.--md {
  max-width: 81.25rem;
}
.container .__boxed.--sm {
  max-width: 63.75rem;
}
.container .__boxed.--xs {
  max-width: 47.9375rem;
}

img,
video,
svg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.swiper .swiper-slide {
  overflow: hidden;
}

@media (max-width: 1023px) {
  .hide-t {
    display: none;
  }
}
@media (max-width: 767px) {
  .hide-m {
    display: none;
  }
}
.password-protected,
.password-protected form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  line-height: 1.25;
  font-size: 16px;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  --color: #fff;
  --bg-color: rgba(0,0,0,0.6);
  transform: translateY(var(--header-offset-top, 0));
}
#header.--force-opaque, #header.--opaque {
  --color: #000;
  --bg-color: rgba(255,255,255,0.6);
}
#header.--force-opaque .header-inner, #header.--opaque .header-inner {
  background-color: var(--bg-color);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#header.--hide {
  pointer-events: none;
}
#header.--hide .header-inner {
  transform: translateY(calc(-100% - 1px));
}
#header .header-inner {
  color: var(--color, #fff);
  transition: color 0.5s, background-color 0.5s, transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#header .header-content {
  height: var(--header-height, 3.75rem);
  align-items: center;
  display: flex;
  gap: 1rem;
}
#header .brand {
  margin-right: auto;
}
#header .brand a {
  display: flex;
  align-items: center;
  position: relative;
}
#header .brand svg {
  display: block;
  height: 1.875rem;
  width: auto;
}
#header .brand svg path {
  fill: var(--color, #fff);
}
#header .brand i {
  overflow: hidden;
}
#header .brand i svg {
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  will-change: transform;
}
#header .brand span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s, transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  will-change: transform;
  transform: translateX(2.125rem);
}
#header .brand span svg {
  height: 0.875rem;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  left: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  will-change: transform;
}
#header .brand:hover i svg {
  transform: translateX(-2.125rem);
}
#header .brand:hover span {
  opacity: 1;
  transform: translateX(0);
}
#header .brand:hover span svg {
  clip-path: inset(0 0 0 0);
}
#header .slogan {
  margin-left: auto;
  font-size: 0.6875rem;
  position: relative;
  z-index: 5;
}
#header .slogan p {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
#header .slogan p svg {
  display: block;
  height: auto;
  width: 1.6em;
}
#header .langs {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 500;
  gap: 0.825em;
}
#header .langs .switch {
  width: 0.8em;
  aspect-ratio: 1/2.2;
  display: block;
  position: relative;
}
#header .langs .switch:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color, #fff);
  opacity: 0.25;
  border-radius: 1.25em;
  top: 0;
  left: 0;
  background-color: var(--color, #fff);
  box-sizing: border-box;
}
#header .langs .switch:after {
  content: "";
  width: 100%;
  border-radius: 1.25em;
  aspect-ratio: 1/1;
  background: var(--color, #fff);
  position: absolute;
  top: 0;
  left: 0;
}
#header .langs ul {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  text-transform: uppercase;
}
#header .langs[data-current=ko] .switch:after {
  bottom: 0;
  top: auto;
}
#header .toggle-nav {
  position: relative;
  z-index: 5;
}
#header #nav {
  position: fixed;
  right: 0;
  top: 0;
  box-sizing: border-box;
  height: 100vh;
  height: 100svh;
  padding-top: var(--header-height);
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  will-change: transform;
  overflow: auto;
}
#header #nav .nav-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 1.25rem;
  padding: 3.75rem;
  width: 25rem;
}
@media (max-width: 767px) {
  #header #nav .nav-inner {
    width: 100vw;
  }
}
#header #nav .gnb {
  display: grid;
  font-size: 1.125rem;
  font-weight: 400;
  gap: 2em;
}
#header #nav .gnb a {
  position: relative;
  opacity: 0.75;
  transition: opacity 0.3s;
}
#header #nav .gnb a:hover {
  opacity: 1;
}
#header #nav .gnb .menu-item-has-children > a:before {
  content: "+";
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  left: -1em;
}
#header #nav .gnb .menu-item-has-children.--active > a:before {
  content: "−";
}
#header #nav .gnb .menu-item-has-children.--active .sub-menu {
  display: block;
}
#header #nav .gnb .sub-menu {
  font-size: 0.9em;
  margin: 1.6em 0;
  font-weight: 300;
  display: none;
}
#header #nav .gnb .sub-menu li + li {
  margin-top: 1.6em;
}
#header #nav .gnb .current_page_parent > a,
#header #nav .gnb .current-menu-item > a {
  opacity: 1;
  font-weight: 500;
}
#header #nav .nav-top {
  margin-bottom: auto;
}
#header #nav hr {
  background: currentColor;
  height: 1px;
  border: 0;
  width: 100%;
  margin: 0 auto;
}
#header #nav .nav-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#header #nav .__copy {
  font-size: clamp(0.5625rem, 1.3037809648vw, 0.625rem);
  font-weight: 100;
  line-height: 1.6;
  opacity: 0.8;
  letter-spacing: 0.02em;
}
#header #nav .__sns {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
#header #nav .__sns a img {
  display: block;
  width: 1.125rem;
  aspect-ratio: 1/1;
  height: auto;
}

.--nav-open {
  overflow: hidden;
}
.--nav-open #header {
  --color: #fff !important;
  --bg-color: transparent !important;
  pointer-events: auto !important;
}
.--nav-open #header .header-inner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateY(0) !important;
}
.--nav-open #header #nav {
  transform: translateX(0);
}

#footer {
  background: #000;
  color: #fff;
  overflow: hidden;
  position: relative;
  padding-top: var(--spacing-24, 6rem);
  padding-bottom: var(--spacing-24, 6rem);
}
@media (max-width: 1023px) {
  #footer .footer-inner {
    margin: 0 auto;
    max-width: 38.75rem;
  }
}
#footer .footer-top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
}
@media (max-width: 1023px) {
  #footer .footer-top {
    grid-template-columns: 1fr;
    gap: 2.625rem;
  }
}
#footer .__brand {
  display: flex;
  font-size: clamp(5rem, 11.3888888889vw, 10.25rem);
  gap: 0.1341463415em;
  margin: -0.1341463415em 0;
}
@media (max-width: 1023px) {
  #footer .__brand {
    align-self: center;
    justify-self: center;
    margin-right: -0.487804878em;
  }
}
#footer .__brand strong {
  font-weight: 600;
}
#footer .__brand small {
  font-size: 0.2073170732em;
  transform: rotate(-90deg) translateX(-0.12em);
  font-weight: 400;
  letter-spacing: 0.05em;
}
#footer .__info {
  display: flex;
  gap: clamp(2.5rem, 15.6453715776vw, 7.5rem);
  align-items: flex-end;
}
@media (max-width: 1023px) {
  #footer .__info {
    justify-content: center;
  }
}
#footer .__nav {
  font-size: clamp(0.875rem, 2.3468057366vw, 1.125rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 1;
  display: flex;
}
#footer .__nav .menu {
  margin: 0 auto;
}
#footer .__nav ul {
  display: grid;
  gap: 0.7777777778em;
}
@media (max-width: 1023px) {
  #footer .__nav {
    flex: initial;
  }
}
#footer .__company {
  font-size: clamp(0.5625rem, 1.5645371578vw, 0.75rem);
  font-weight: 100;
  line-height: 1.6;
  display: grid;
  gap: 0.6666666667em;
}
#footer .__company h3 {
  margin-bottom: 0.8333333333em;
  font-weight: 400;
  text-transform: uppercase;
}
#footer .footer-bottom {
  margin-top: var(--spacing-20, 5rem);
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  align-items: center;
}
@media (max-width: 767px) {
  #footer .footer-bottom {
    flex-direction: column;
  }
}
#footer .footer-bottom .__copy {
  font-size: clamp(0.5625rem, 1.3037809648vw, 0.625rem);
  font-weight: 100;
  line-height: 1.6;
  opacity: 0.5;
  letter-spacing: 0.02em;
}
#footer .footer-bottom .__sns {
  display: flex;
  gap: 1.25rem;
}
#footer .footer-bottom .__sns img {
  display: block;
  width: 1.125rem;
  aspect-ratio: 1/1;
  height: auto;
  opacity: 0.2;
}
#footer .footer-bottom .__sns a img {
  opacity: 1;
}

body.loading {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
}

#intro {
  z-index: 100009;
  position: fixed;
  inset: 0;
  background-color: hsl(240, 0%, 1%);
  background-size: 1rem 1rem;
  background-position: center center;
  align-content: center;
  text-align: center;
}
#intro video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}
#intro video.__m {
  display: none;
}
@media screen and (max-aspect-ratio: 1/1) {
  #intro video.__d {
    display: none;
  }
  #intro video.__m {
    display: block;
  }
}
#intro {
  --anim--hover-time: 400ms;
  --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}
#intro .__cta {
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  bottom: var(--spacing-10, 2.5rem);
  /* Defs */
}
@property --angle-1 {
  #intro .__cta {
    syntax: "<angle>";
    inherits: false;
    initial-value: -75deg;
  }
}
@property --angle-2 {
  #intro .__cta {
    syntax: "<angle>";
    inherits: false;
    initial-value: -45deg;
  }
}
#intro .__cta {
  /* Button Wrap Container */
}
#intro .__cta .button-wrap {
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  background: transparent;
  pointer-events: none;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}
#intro .__cta {
  /* Button Shadow Container */
}
#intro .__cta .button-shadow {
  --shadow-cuttoff-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}
#intro .__cta {
  /* Shadow */
}
#intro .__cta .button-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  left: calc(var(--shadow-cuttoff-fix) - 0.875em);
  padding: 0.125em;
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  overflow: visible;
  opacity: 1;
}
#intro .__cta {
  /* ========== BUTTON BASE STYLES ========== */
}
#intro .__cta button {
  /* Basic Styling */
  --border-width: clamp(1px, 0.0625em, 4px);
  all: unset;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: auto;
  z-index: 3;
  background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border-radius: 999vw;
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0 0 0 rgb(255, 255, 255);
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
}
#intro .__cta button:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  -webkit-backdrop-filter: blur(0.01em);
  -moz-backdrop-filter: blur(0.01em);
  -ms-backdrop-filter: blur(0.01em);
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), 0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5), 0 0 0 0 rgb(255, 255, 255);
}
#intro .__cta {
  /* Button Text */
}
#intro .__cta button span {
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
  color: rgb(50, 50, 50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all var(--anim--hover-time) var(--anim--hover-ease);
  padding: 1em 1.5em 0.8em;
}
#intro .__cta button:hover span {
  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
}
#intro .__cta {
  /* Text */
}
#intro .__cta button span::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(100% - var(--border-width)); /* Prevent overlapping border */
  height: calc(100% - var(--border-width));
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 999vw;
  overflow: clip;
  background: linear-gradient(var(--angle-2), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 40% 50%, rgba(255, 255, 255, 0) 55%);
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease), --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
}
#intro .__cta button:hover span::after {
  background-position: 25% 50%;
}
#intro .__cta button:active span::after {
  background-position: 50% 15%;
  --angle-2: -15deg;
}
#intro .__cta {
  /* Touch Devices */
}
@media (hover: none) and (pointer: coarse) {
  #intro .__cta button span::after,
  #intro .__cta button:active span::after {
    --angle-2: -45deg;
  }
}
#intro .__cta {
  /* ========== BUTTON OUTLINE ========== */
  /* Outline */
}
#intro .__cta button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background: conic-gradient(from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5)), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
}
#intro .__cta button:hover::after {
  --angle-1: -125deg;
}
#intro .__cta button:active::after {
  --angle-1: -75deg;
}
@media (hover: none) and (pointer: coarse) {
  #intro .__cta button::after,
  #intro .__cta button:hover::after,
  #intro .__cta button:active::after {
    --angle-1: -75deg;
  }
}
#intro .__cta {
  /* Shadow Hover */
}
#intro .__cta .button-wrap:has(button:hover) .button-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
  -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
  -moz-filter: blur(clamp(2px, 0.0625em, 6px));
  -ms-filter: blur(clamp(2px, 0.0625em, 6px));
  transition: filter var(--anim--hover-time) var(--anim--hover-ease);
}
#intro .__cta .button-wrap:has(button:hover) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}
#intro .__cta {
  /* Rotation */
}
#intro .__cta .button-wrap:has(button:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}
#intro .__cta .button-wrap:has(button:active) button {
  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75), inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}
#intro .__cta .button-wrap:has(button:active) .button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
}
#intro .__cta .button-wrap:has(button:active) .button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}
#intro .__cta .button-wrap:has(button:active) span {
  text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}
#intro .__btn {
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  bottom: var(--spacing-18, 4.5rem);
  z-index: 9999;
  mix-blend-mode: difference;
}
#intro .__btn:hover {
  mix-blend-mode: normal;
}
#intro .__btn button {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  font-size: clamp(0.5625rem, 1.1764705882vw, 0.75rem);
  line-height: 1.2;
  justify-content: center;
}
#intro .__btn button i {
  width: 3.6em;
}
#intro .__btn button i svg {
  display: block;
  width: 100%;
  height: auto;
}

#homeKV h1 {
  z-index: 3;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  left: var(--gutter);
  mix-blend-mode: difference;
  font-size: 1.25rem;
  color: #fff;
  font-weight: 500;
}
#homeKV h1 span {
  display: block;
  transform: rotate(-90deg) translate(-50%, -50%);
  transform-origin: 0% 0%;
}

#homeProjects .__canvas {
  position: relative;
  background: #fff;
  overflow: hidden;
}
#homeProjects .__projects {
  overflow: hidden;
}
#homeProjects .__projects .__item {
  position: relative;
  display: flex;
  opacity: 0.5;
  transition: opacity 0.5s;
  overflow: hidden;
}
#homeProjects .__projects .__item .__img {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
#homeProjects .__projects .__item .__img video,
#homeProjects .__projects .__item .__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.2s;
}
#homeProjects .__projects .__item .__img .__m,
#homeProjects .__projects .__item .__img video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
#homeProjects .__projects .__item .__img .__m {
  display: none;
  opacity: 1;
}
#homeProjects .__projects .__item {
  --desc-gutter: clamp(1.25rem, 3.4722222222vw, 3.125rem);
}
#homeProjects .__projects .__item .__desc {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: clamp(1.25rem, 2.7692307692vw, 2.25rem);
  display: flex;
  flex-direction: column;
  left: 0;
  right: 0;
  transition: left 0.5s cubic-bezier(0.42, 0, 0.58, 1), right 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
#homeProjects .__projects .__item .__desc .__category {
  display: flex;
  font-weight: 500;
  margin-bottom: auto;
  font-size: clamp(0.75rem, 0.9375vw, 1.125rem);
}
#homeProjects .__projects .__item .__desc .__category span {
  position: relative;
  line-height: 1 !important;
}
#homeProjects .__projects .__item .__desc .__category span:after {
  position: absolute;
  content: "";
  border-bottom: 1.5px solid currentColor;
  width: 0;
  left: 0;
  top: calc(100% + 0.1em);
  transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#homeProjects .__projects .__item .__desc .__name {
  font-weight: 500;
  font-size: clamp(1.25rem, 2.5vw, 2.25rem);
}
#homeProjects .__projects .__item .__desc .__name strong {
  display: inline-block;
}
#homeProjects .__projects .__item .__desc .__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  transform: translateY(200%);
  transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#homeProjects .__projects .__item .__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 3;
}
#homeProjects .__projects .__item .__video:before, #homeProjects .__projects .__item .__video:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: 2;
}
#homeProjects .__projects .__item .__video:before {
  bottom: auto;
  top: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}
#homeProjects .__projects .__item .__video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
  transform: scale(1.25);
}
#homeProjects .__projects .__item .__video .__desc {
  z-index: 3;
}
#homeProjects .__projects .__item .__video .__close {
  position: absolute;
  z-index: 3;
  top: var(--desc-gutter);
  right: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#homeProjects .__projects .__item .__video .__close svg {
  display: block;
  width: 1.625rem;
  aspect-ratio: 1/1;
  height: auto;
}
#homeProjects .__projects .__item .__video .__desc {
  padding: var(--desc-gutter, 50px) 0;
}
#homeProjects .__projects .__item .__video .__desc h3 {
  color: #fff;
}
#homeProjects .__projects .__item .__video .__desc h3 span:after {
  width: 100%;
  text-shadow: 0.1em 0.1em 0.25em rgba(0, 0, 0, 0.1);
}
#homeProjects .__projects .__item .__video .__desc p {
  color: #fff;
  text-shadow: 0.1em 0.1em 0.25em rgba(0, 0, 0, 0.1);
}
#homeProjects .__projects .__item .__video .__desc h4 {
  color: #fff;
  text-shadow: 0.1em 0.1em 0.25em rgba(0, 0, 0, 0.1);
}
#homeProjects .__projects .__item .__video .__desc .__name {
  font-size: clamp(1.5rem, 5.9722222222vw, 5.375rem);
  display: flex;
  white-space: nowrap;
  align-items: flex-end;
  gap: 0.2325581395em;
  text-shadow: 0.1em 0.1em 0.25em rgba(0, 0, 0, 0.1);
}
#homeProjects .__projects .__item .__video .__desc .__name h4 {
  font-weight: 400;
}
#homeProjects .__projects .__item .__video .__desc .__name p {
  font-size: max(6px, 0.225em);
  line-height: 1.4;
  margin-bottom: 0.15em;
}
#homeProjects .__projects .__item .__video .__desc .__excerpt {
  text-align: right;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-wrap: balance;
}
#homeProjects .__projects .__item .__video .__desc .__excerpt p {
  font-weight: 300;
}
#homeProjects .__projects .__item .__video .__desc .__excerpt .__cta {
  margin-left: auto;
}
@media (min-width: 1023px) {
  #homeProjects .__canvas {
    aspect-ratio: 1780/740;
  }
  #homeProjects .__projects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    transition: grid-template-columns 0.5s cubic-bezier(0.86, 0, 0.07, 1);
  }
  #homeProjects .__projects[data-index="1"] {
    grid-template-columns: 1fr 0fr 0fr 0fr;
  }
  #homeProjects .__projects[data-index="2"] {
    grid-template-columns: 0fr 1fr 0fr 0fr;
  }
  #homeProjects .__projects[data-index="3"] {
    grid-template-columns: 0fr 0fr 1fr 0fr;
  }
  #homeProjects .__projects[data-index="4"] {
    grid-template-columns: 0fr 0fr 0fr 1fr;
  }
  #homeProjects .__projects .__item:hover {
    opacity: 1;
  }
  #homeProjects .__projects .__item:hover .__img video,
  #homeProjects .__projects .__item:hover .__img img {
    transform: scale(1.05);
    opacity: 1;
  }
  #homeProjects .__projects .__item:hover .__desc h3 span:after {
    width: 100%;
  }
  #homeProjects .__projects .__item:hover .__desc .__meta {
    transform: translateY(0);
  }
  #homeProjects .__projects .__item.--active {
    opacity: 1;
  }
  #homeProjects .__projects .__item.--active .__video {
    opacity: 1;
    pointer-events: auto;
  }
  #homeProjects .__projects .__item.--active .__video video {
    transform: scale(1);
  }
  #homeProjects .__projects .__item.--active .__video .__desc .__meta {
    transform: translateY(0);
  }
  #homeProjects .__projects .__item.--active .__desc {
    opacity: 1;
    left: var(--desc-gutter, 50px);
    right: var(--desc-gutter, 50px);
  }
}
@media (max-width: 1023px) {
  #homeProjects .__projects .__item {
    aspect-ratio: 2560/1080;
    aspect-ratio: 16/9;
    opacity: 1;
    min-height: 180px;
  }
  #homeProjects .__projects .__item .__img video,
  #homeProjects .__projects .__item .__img img {
    opacity: 1;
  }
  #homeProjects .__projects .__item .__img .__m {
    display: block;
  }
  #homeProjects .__projects .__item .__desc {
    padding: var(--desc-gutter, 20px);
  }
  #homeProjects .__projects .__item .__video {
    background: #000;
  }
  #homeProjects .__projects .__item .__video video {
    opacity: 0.7;
  }
  #homeProjects .__projects .__item .__video .__close {
    display: none;
  }
  #homeProjects .__projects .__item .__video .__desc {
    padding: var(--desc-gutter, 20px);
  }
  #homeProjects .__projects .__item .__video .__desc .__meta {
    gap: 0.625rem;
  }
  #homeProjects .__projects .__item .__video .__desc .__excerpt {
    margin-left: auto;
  }
  #homeProjects .__projects .__item .__video .__desc .__excerpt p {
    display: none;
  }
  #homeProjects .__projects .__item .__video .__desc .__excerpt .btn {
    font-size: 10px !important;
  }
  #homeProjects .__projects .__item.--open .__video {
    opacity: 1;
    pointer-events: auto;
  }
  #homeProjects .__projects .__item.--open .__video .__desc .__meta {
    transform: translateY(0);
  }
}

#homeLinks ul {
  width: 50%;
  margin-left: auto;
}
#homeLinks ul li {
  border-bottom: 1px solid #000;
}
#homeLinks ul li:last-child {
  border-bottom: none;
}
#homeLinks ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em 0;
  font-weight: 600;
  transition: color 0.3s;
}
#homeLinks ul li a i {
  padding-right: 0.75rem;
}
#homeLinks ul li a i svg {
  width: 0.7em;
  aspect-ratio: 1/1;
  height: auto;
}
#homeLinks ul li a i {
  transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
#homeLinks ul li a:hover i {
  transform: translateX(0.375rem);
}

#productOasisExIn {
  height: 250vh;
  height: 250lvh;
  background: linear-gradient(to bottom, #E1E3E9, #E1E3E9 30%, #d9dbe6 60%, #d9dbe6 100%);
}
#productOasisExIn .oasis-ex-in {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  background: linear-gradient(to bottom, #E1E3E9, #E1E3E9 30%, #d9dbe6 60%, #d9dbe6 100%);
}
#productOasisExIn .oasis-ex-in .__visual {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: auto;
  position: relative;
}
#productOasisExIn .oasis-ex-in .__visual:before, #productOasisExIn .oasis-ex-in .__visual:after {
  content: "";
  left: 0;
  right: 0;
  position: absolute;
  height: 20%;
  z-index: 3;
}
#productOasisExIn .oasis-ex-in .__visual:before {
  background: linear-gradient(to bottom, #E1E3E9, transparent);
  top: 0;
}
#productOasisExIn .oasis-ex-in .__visual:after {
  background: linear-gradient(to top, #d9dbe6 0%, #d9dbe6 20%, transparent 100%);
  bottom: 0;
}
#productOasisExIn .oasis-ex-in canvas {
  display: block;
  aspect-ratio: 16/9;
  width: 100%;
}

#productOasisInterior {
  position: relative;
  margin-top: -2px;
  z-index: 2;
}
#productOasisInterior:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  height: 9.375rem;
  background: linear-gradient(to bottom, #d9dbe6 0%, #d9dbe6 20%, transparent 100%);
}
#productOasisInterior .__img {
  overflow: hidden;
}
#productOasisInterior .__txt {
  max-width: 1180px;
  margin: 0 auto;
}

.__cta {
  display: flex;
}

.content-img-desc-grid {
  display: flex;
  flex-direction: row;
}
.content-img-desc-grid.--rev {
  flex-direction: row-reverse;
}
@media (max-width: 1023px) {
  .content-img-desc-grid {
    flex-direction: column !important;
  }
}
.content-img-desc-grid .__img {
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 767px) {
  .content-img-desc-grid .__img {
    margin: 0 calc(var(--gutter) * -1);
  }
}
.content-img-desc-grid .__img .__img-wrapper,
.content-img-desc-grid .__img span {
  min-height: 100%;
  display: flex;
}
.content-img-desc-grid .__img img {
  display: block;
  object-fit: cover;
  min-height: 100%;
}
.content-img-desc-grid .__desc {
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 31.25rem;
}
.content-img-desc-grid .__desc p {
  max-width: 20rem;
}
.content-img-desc-grid .__desc .__desc-inner {
  max-width: 23.75rem;
}
.content-img-desc-grid .__desc .__desc-inner p {
  max-width: initial;
}
@media (max-width: 1023px) {
  .content-img-desc-grid {
    flex-direction: column;
  }
  .content-img-desc-grid .__desc {
    min-width: initial;
    padding: 0;
    padding-top: var(--spacing-8, 2rem);
    padding-bottom: var(--spacing-8, 2rem);
  }
  .content-img-desc-grid .__desc p {
    max-width: initial;
  }
  .content-img-desc-grid .__desc .__desc-inner {
    max-width: initial;
  }
}

.product-gallery {
  position: relative;
}
.product-gallery .__gallery {
  position: relative;
  overflow: hidden;
}
@media (max-width: 767px) {
  .product-gallery .__gallery {
    margin: 0 calc(var(--gutter) * -1);
  }
}
.product-gallery .__item {
  position: relative;
}
.product-gallery .__item video {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .product-gallery .__nav {
    display: none;
  }
}
.product-gallery .__indices.__full {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.product-gallery .__indices ul {
  display: grid;
  justify-content: center;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}
@media (max-width: 767px) {
  .product-gallery .__indices ul.--x1 {
    max-width: 180px !important;
  }
  .product-gallery .__indices ul.--x2 {
    max-width: 240px !important;
  }
  .product-gallery .__indices ul.--x3 {
    max-width: 300px !important;
  }
}
@media (max-width: 480px) {
  .product-gallery .__indices ul.--x1 {
    max-width: 120px !important;
  }
  .product-gallery .__indices ul.--x2 {
    max-width: 200px !important;
  }
  .product-gallery .__indices ul.--x3 {
    max-width: 280px !important;
  }
}
.product-gallery .__indices ul a {
  font-size: clamp(0.5rem, 1.5645371578vw, 0.75rem);
  padding: 1.6666666667em 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  color: rgba(0, 0, 0, 0.3);
}
.product-gallery .__indices ul a:before, .product-gallery .__indices ul a:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 0.125rem;
  background-color: rgba(0, 0, 0, 0.1);
  transition: transform 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transform-origin: left;
}
.product-gallery .__indices ul a:after {
  transform: scaleX(0);
  background-color: #000;
}
.product-gallery .__indices ul a span {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 300;
  line-height: 1.4;
  gap: 0.5em;
}
.product-gallery .__indices ul a span strong {
  font-size: 1.1666666667em;
  font-weight: 700;
}
.product-gallery .__indices ul a.--active {
  color: #000;
}
.product-gallery .__indices ul a.--active:after {
  transform: scaleX(1);
}
.product-gallery .__indices ul a hr {
  height: 1px;
  border: 0;
  background: currentColor;
  width: 0.6666666667em;
  margin: 0 auto;
}
.product-gallery .__desc {
  background-color: #DCE2E5;
  text-align: center;
  padding-top: var(--spacing-8, 2rem);
  padding-bottom: var(--spacing-8, 2rem);
}
@media (max-width: 767px) {
  .product-gallery .__desc {
    padding: 0 var(--gutter);
    padding-top: var(--spacing-6, 1.5rem);
    padding-bottom: var(--spacing-6, 1.5rem);
  }
}

.our-works {
  margin: 0 -1.25rem;
  position: relative;
  padding-bottom: var(--spacing-10, 2.5rem);
}
.our-works .swiper {
  overflow: visible;
}
.our-works .swiper-slide {
  width: auto;
  padding: 0 1.25rem;
  height: auto;
}
.our-works .swiper-slide:last-child .__item .__works {
  border-right: 0;
  padding-right: 0;
  margin-right: 0;
}
.our-works .__item {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6, 1.5rem);
}
.our-works .__item .__year {
  color: #FF7503;
  font-weight: 500;
  font-size: var(--fs-heading4);
}
.our-works .__item .__works {
  display: flex;
  gap: 1.25rem;
  border-right: 1px solid #ddd;
  margin-right: -1.25rem;
  padding-right: 20px;
}
.our-works .__item .__works .__work {
  width: clamp(13.75rem, 41.7209908735vw, 20rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.our-works .__item .__works .__work .__img {
  margin-bottom: 1.25rem;
}
.our-works .__item .__works .__work .__img img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  display: block;
}
.our-works .__item .__works .__work .__title {
  font-size: var(--fs-title3);
  line-height: 1.25;
  font-weight: 600;
}
.our-works .__item .__works .__work .__sub-title {
  font-size: var(--fs-body2);
  line-height: 1.25;
  font-weight: 500;
  opacity: 0.4;
}
.our-works .__item .__works .__work .__description {
  font-size: var(--fs-body3);
  font-weight: 400;
  line-height: 1.4;
}

.newsroom-posts {
  display: grid;
  gap: var(--gap-md, 1.875rem);
  row-gap: calc(var(--gap, 1.875rem) * 1.5);
}
@media (min-width: 1024px) {
  .newsroom-posts {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1023px) {
  .newsroom-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
.newsroom-posts .__post {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.newsroom-posts .__post .__img {
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.newsroom-posts .__post .__img img {
  display: block;
}
.newsroom-posts .__post .__desc {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body3);
  gap: 0.25em;
}
.newsroom-posts .__post .__desc .__date {
  opacity: 0.5;
  margin-bottom: 0.6em;
}
.newsroom-posts .__post .__desc .__title {
  font-size: var(--fs-title3);
  font-weight: 500;
  line-height: 1.2;
}
.newsroom-posts .__post .__desc .__sub-title {
  line-height: 1.4;
}
.newsroom-posts .__post:first-child {
  border-bottom: 1px solid #000;
  padding-bottom: calc(var(--gap) * 1.5);
}
.newsroom-posts .__post:first-child .__img {
  aspect-ratio: initial;
}
.newsroom-posts .__post:first-child .__img img {
  min-height: 100%;
  object-fit: cover;
}
.newsroom-posts .__post:first-child .__desc {
  justify-content: flex-end;
}
@media (min-width: 1024px) {
  .newsroom-posts .__post:first-child {
    grid-column: span 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md, 1.875rem);
  }
  .newsroom-posts .__post:first-child .__img {
    grid-column: span 2;
  }
}
@media (max-width: 1023px) {
  .newsroom-posts .__post:first-child {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md, 1.875rem);
  }
}
@media (max-width: 767px) {
  .newsroom-posts .__post:first-child {
    grid-template-columns: 1fr;
  }
}