@font-face {
  font-family: "GmarketSansLight";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/GmarketSansTTFLight.ttf") format("truetype");
}

@font-face {
  font-family: "DINPro-Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/dinpro_bold.otf") format("opentype");
}

@font-face {
  font-family: "DINPro-Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/DINPro-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "DINPro-Light";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/dinpro_light.otf") format("opentype");
}

@font-face {
  font-family: "DINPro-Black";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/dinpro_black.otf") format("opentype");
}

@font-face {
  font-family: "EliceDigitalBaeumOTF";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/EliceDigitalBaeum_Regular.ttf") format("truetype");
}

@font-face {
  font-family: "PTSerifCaption-Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/PTSerifCaption-Regular.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --poster-orange: #fa5a1e;
  --poster-footer: #878780;
  --poster-white: rgb(255, 255, 255);
  --poster-yellow: rgb(255, 255, 0);
  --topbar-sticky-bg: #878780;
  --poster-scale: 1;
  --layout-gap-scale: 1;
  --hero-extra: 0px;
  --details-extra: 0px;
  --hero-section-height: calc(1172px + var(--hero-extra));
  --details-section-height: calc(993px + var(--details-extra));
  --poster-footer-top: calc(var(--hero-section-height) + var(--details-section-height));
  --topbar-center-shift: -12.2px;
  --topbar-logo-line-shift: -12.4px;
  --topbar-nav-main-shift: -9.3px;
  --topbar-nav-sub-shift: -9.6px;
  --topbar-text-scale: 1;
  --topbar-logo-scale: 1;
  --topbar-center-x-shift: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--poster-orange);
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 1185px;
}

body {
  overflow-x: hidden;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.poster-stage {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.poster-frame {
  position: relative;
  width: 1185px;
}




.hero-flow {
  position: relative;
  width: 1185px;
}

.hero-flow-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 1185px;
  padding-top: calc(105px * var(--layout-gap-scale));
  box-sizing: border-box;
}
.hero-flow-inner .hero-logo{
  height: 238px;
}

.hero-brand-group,
.hero-copy-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-brand-group {
  width: 1185px;
  margin-top: 100px;
}

.hero-brand-group .mark-hero {
  position: static;
  display: block;
  width: clamp(140px, 13vw, 235.47px);
  height: auto;
  color: var(--poster-white);
  margin-bottom: 10px;
  pointer-events: none;
  user-select: none;
}

.hero-brand-title {
  margin: 0 0 0px;
}

.hero-brand-subtitle {
  display: flex;
  align-items: center;
  height: 24px;
  margin: 0;
}
.hero-brand-subtitle span {
  margin: 0;
  line-height: 24px;
  font-size: 24px;
}

.hero-brand-subtitle-logo {
  display: inline-block;
  height: 24px;
  margin-top: 12px;
  user-select: none;
  pointer-events: none;
}

.hero-copy-group {
  width: 1185px;
}

.hero-copy-heading {
  margin-top: calc(100px * var(--layout-gap-scale));
  white-space: nowrap;
  font-size: 68px;
  font-family: 'GmarketSansLight', sans-serif;
  line-height: 0.9;
  letter-spacing: -0.1em;
}


.hero-arrow-wrap {
  position: absolute;
  bottom: 48px;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.details-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  box-sizing: border-box;
  margin-top: calc(151px * var(--layout-gap-scale));
}
.details-heading-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 90px;
}
.details-heading-group .rice{
  height: 53px;
  margin-top: 105px;
}
.details-heading-group .details-heading *{
  text-align: center;
  line-height: 1;
}
.details-heading-group .details-heading .din-bold{
  font-size: 34.7px;
}
.details-heading-group .details-heading .din-regular{
  font-size: 34.7px;
}

.details-heading-group .details-subheading{
  margin-top: 10px;
  font-size: 28.54px;
  font-family: 'GmarketSansLight', sans-serif;
  color: var(--poster-white);
}



.details-heading-group p {
  margin: 0;
  letter-spacing: -0.05em;
}

.details-chain-group {
  margin-top: calc(65px * var(--layout-gap-scale));
  --details-chain-scale: 1;
  --details-chain-stroke: calc(4.6px * var(--details-chain-scale));
  position: relative;
  display: flex;
  justify-content: center;
  width: max-content;
  padding: calc(41px * var(--details-chain-scale)) calc(34px * var(--details-chain-scale)) calc(41px * var(--details-chain-scale)) 0;
}

.details-chain-group::before {
  content: "";
  position: absolute;
  top: calc(1px * var(--details-chain-scale));
  right: calc(0px * var(--details-chain-scale));
  bottom: calc(1px * var(--details-chain-scale));
  left: calc(87px * var(--details-chain-scale));
  border: var(--details-chain-stroke) solid var(--poster-yellow);
  border-radius: calc(20px * var(--details-chain-scale));
  pointer-events: none;
}

.service-chain {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.service-chain-item {
  position: relative;
  width: calc((var(--pill-width) + var(--connector-width, 0px)) * var(--details-chain-scale));
}

.service-chain-item:last-child {
  width: calc(var(--pill-width) * var(--details-chain-scale));
}

@keyframes connectorDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.service-chain-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--pill-width) * var(--details-chain-scale));
  width: calc(var(--connector-width, 0px) * var(--details-chain-scale));
  height: var(--details-chain-stroke);
  background: var(--poster-white);
  transform: translateY(-50%);
}

.service-chain-item:last-child::after {
  display: none;
}

.service-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4px * var(--details-chain-scale));
  width: calc(var(--pill-width) * var(--details-chain-scale));
  height: calc(78px * var(--details-chain-scale));
  border: var(--details-chain-stroke) solid var(--poster-white);
  border-radius: calc(39px * var(--details-chain-scale));
  background: var(--poster-orange);
  text-align: center;
}

.service-chain-item.is-featured .service-pill {
  border-color: var(--poster-yellow);
}

.service-pill-title {
  font-family: "DINPro-Bold", sans-serif;
  font-size: calc(17.6px * var(--details-chain-scale));
  line-height: 0.95;
  letter-spacing: 0em;
  color: var(--poster-white);
}
.service-pill-title:first-child {
  font-family: "DINPro-Black", sans-serif;
  font-size: calc(23.6px * var(--details-chain-scale));
  line-height: 0.95;
  letter-spacing: 0em;
  color: var(--poster-white);
}


.service-pill-subtitle {
  font-family: "GmarketSansLight", sans-serif;
  font-size: calc(17px * var(--details-chain-scale));
  line-height: 1;
  position: relative;
  top: 2px;
  letter-spacing: -0.07em;
  color: var(--poster-white);
}

.service-chain-item.is-featured .service-pill-title,
.service-chain-item.is-featured .service-pill-subtitle {
  color: var(--poster-yellow);
}

.details-system-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(107px * var(--layout-gap-scale));
}

.details-system-title {
  margin: 0 0 10px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 15px;
  white-space: nowrap;
}

.details-system-copy {
  margin: 0;
}

.details-system-brand {
  letter-spacing: 0.15em;
}
.details-system-brand .x {
  font-family: "DINPro-Regular", "DIN Pro Regular", sans-serif;
}
.details-system-heading-copy {
  letter-spacing: 0;
  font-size: 32px;
  font-family: 'DINPro-Bold', sans-serif;
  color: var(--poster-yellow);
  line-height: 1;
  margin-top: 20px;
}

.details-system-group .details-system-logo{
  height: 25.5px;
  margin: 0 auto;
}

.details-copy-group {
  margin-top: calc(95.6px * var(--layout-gap-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'GmarketSansLight', sans-serif;
  font-size: 22px;
}

.details-copy-group p {
  margin: 0;
  line-height: 1;
}

.details-copy-group p + p {
  margin-top: 20px;
}

.details-closing-group {
  margin-top: calc(126px + var(--details-gap-extra));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.details-closing-caret {
  display: block;
  width: 19px;
  height: 13px;
  background: var(--poster-yellow);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.details-closing-copy {
  margin: 28px 0 0;
  letter-spacing: -0.1em;
}
.poster-section--details {
  margin-bottom: 0;
}


.mark-header,
.mark-footer,
.mark-wordmark,
.nav-caret,
.member-icon,
.pill-shape {
  position: absolute;
  display: block;
  color: var(--poster-white);
}

.mark-header,
.mark-footer,
.mark-wordmark,
.nav-caret,
.member-icon,
.pill-shape {
  pointer-events: none;
  user-select: none;
}

.mark-footer {
  opacity: 0.72;
}

.din-bold {
  font-family: "DINPro-Bold", "DIN Pro Bold", "DIN Pro", sans-serif;
  font-weight: 700;
}

.din-regular {
  font-family: "DINPro-Regular", "DIN Pro Regular", "DIN Pro", sans-serif;
  font-weight: 400;
}


.ft-gmarket-112 {
  font-size: 112px;
  letter-spacing: -0.1em;
}

.ft-elice-25 {
  font-family: "EliceDigitalBaeumOTF", "GmarketSansLight", sans-serif;
  font-size: 25px;
  font-weight: 400;
  color: var(--poster-white);
}

.ft-pt-14 {
  font-family: "PTSerifCaption-Regular", serif;
  font-size: 14px;
  font-weight: 400;
}

.copy-line {
  line-height: 1.08;
  letter-spacing: -0.1em;
}
.hero-copy-lines {
  margin-top: 40px;
}
.hero-copy-lines .hero-copy-line {
  margin: 0;
  text-align: center;
  font-family: 'GmarketSansLight', sans-serif;
  font-size: 26px;
  letter-spacing: -0.1em;
  line-height: 1;
  margin-bottom: 18px;
}
.hero-copy-lines .hero-copy-line:nth-child(3) {
  margin-top: 45px;
}
.hero-copy-lines .hero-copy-line:last-child {
  margin-bottom: 0;
}
.hero-copy-inline {
  display: inline-flex;
  align-items: baseline; /* Align to text baseline */
  gap: 4px;
  white-space: nowrap;
  line-height: 1; /* Restore line-height 1 */
  font-size: 26px;
}

.hero-copy-inline > span {
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  min-width: 0;
}

.yellow {
  color: var(--poster-yellow);
}

.nav-caret {
  width: 11.82px;
  height: 8.19px;
  background: var(--poster-white);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.member-icon {
  width: 18.33px;
  height: 24.15px;
  filter: brightness(0) invert(1);
  background:
    center / 100% 100% no-repeat
    url("/assets/member.svg");
}