@charset "UTF-8";

/* ========================================================
   폰트 — Inter (피그마 font/family/eng 기준, v4.1 공식 릴리스 woff2)
   토큰 방식: font-family: var(--font-family-eng) + font-weight: var(--font-weight-*)
   ======================================================== */
@font-face {
  font-family: "Inter";
  src: url(../font/Inter-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url(../font/Inter-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url(../font/Inter-SemiBold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url(../font/Inter-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================================================
   폰트 — Pretendard (한글 기본, 로컬 woff)
   ======================================================== */
@font-face {
  font-family: "Pretendard";
  src: url(../font/Pretendard-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url(../font/Pretendard-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url(../font/Pretendard-SemiBold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url(../font/Pretendard-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Pretendard — 기존 weight별 family 네이밍 방식과의 호환용 별칭 */
@font-face {
  font-family: "Pretendard-Regular";
  src: url(../font/Pretendard-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Medium";
  src: url(../font/Pretendard-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-SemiBold";
  src: url(../font/Pretendard-SemiBold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Bold";
  src: url(../font/Pretendard-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — 기존 weight별 family 네이밍 방식과의 호환용 별칭 */
@font-face {
  font-family: "Inter-Regular";
  src: url(../font/Inter-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter-Medium";
  src: url(../font/Inter-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter-SemiBold";
  src: url(../font/Inter-SemiBold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter-Bold";
  src: url(../font/Inter-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


* {margin: 0; padding: 0; letter-spacing: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact; /* page-break-after: avoid; page-break-before: avoid; page-break-inside: avoid; break-inside: avoid-page; break-before: avoid-page; break-after: avoid-page; */ word-break: keep-all; caret-color: transparent;}
html {width: 100%; height: 100%; font-size: 0.052vw; background: #fff;}
body {position: relative; font-family: "Roboto-Regular", sans-serif; font-weight: normal; font-size: 16rem; letter-spacing: 0em; line-height: 150%; color: #1a1a1a; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; -webkit-print-color-adjust: exact !important; overflow-x: hidden; background: #fff; line-height: 24rem;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td {margin: 0; padding: 0; font-weight: normal;}
ul, ol, li {list-style: none;}
img, fieldset {border: none; vertical-align: top;}
legend, caption {overflow: hidden; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}
textarea, button {vertical-align: middle;}
option {padding: 10px;}
input[type="text"] {-webkit-appearance: none;}
input[type="date"] {-webkit-appearance: none; color: #101116;}
input[type="radio"], input[type="checkbox"] {border: 0; padding: 0; /* height: auto; */ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear {display: none;}
/* 2026-10-08 수정 (QA 24·27·29·31) — 커서 클릭(포커스) 시 placeholder 텍스트 즉시 숨김 (검색창·뉴스레터·문의 폼 등 전체 input/textarea 공통) */
input:focus::placeholder, textarea:focus::placeholder {color: transparent;}
select {padding: 5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
textarea {padding: 10rem; vertical-align: middle; background: #fff; border: 1px solid #e1e1e1; font-family: "Roboto-Regular", sans-serif; color: #000; letter-spacing: -.04rem; font-size: max(16rem, 12px); -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; resize: vertical;}
a {text-decoration: none; color: inherit;}
a:hover, a:focus, a:active {text-decoration: none;}
table {border-collapse: collapse; width: 100%; background: #fff;}
button {background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: "Roboto-Regular", sans-serif; text-align: left; display: block;}
button:focus-visible {box-shadow: 0 0 0 2px #000; outline: 2px solid #000;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
strong, b {font-family: "Roboto-Regular", sans-serif;}
th {font-family: "Roboto-Regular", sans-serif;}

:root {
  --brandColor: var(--color-brand-solity-blue); /* SOLITY Blue — 구 템플릿 값(#961E1E)에서 교체 */

  /* ========================================================
     폰트 토큰 — Figma Variable(2026 솔리티)과 1:1 매칭
     1920px 시안 기준 1rem ≈ 1px (vw-반응형 rem)
     ======================================================== */

  /* Font Family (Figma: font/family — 상단 @font-face 등록) */
  --font-family-eng: "Inter", "Pretendard", sans-serif;
  --font-family-kor: "Pretendard", "Inter", sans-serif;

  /* Font Weight (Figma: font/weight) */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Size — Display / Title / Heading (Figma: type/d1 ~ type/h4) */
  --type-d1: 120rem;
  --type-t1: 96rem;
  --type-h1: 80rem;
  --type-h2: 64rem;
  --type-h3: 40rem;
  --type-h4: 32rem;

  /* Font Size — Body / Caption (Figma: type/b1 ~ type/cap1) */
  --type-b1: 24rem;
  --type-b2: 20rem;
  --type-b3: 18rem;
  --type-b4: 16rem;
  --type-cap1: 14rem;

  /* Line Height — Figma 텍스트 스타일별 지정값 */
  --lh-display: 1.1;    /* d1, t1, h1~h3, cap1 */
  --lh-heading: 1.3;    /* h4 */
  --lh-body-tight: 1.2; /* b1, b2 */
  --lh-body: 1.4;       /* b3, b4 */

  /* Letter Spacing — Figma 전 스타일 0 */
  --letter-spacing-none: 0;

  /* ========================================================
     컬러 토큰 — Figma Primitive Color 가이드와 1:1 매칭
     ======================================================== */

  /* Brand Identity Color (Figma: color/brand) */
  --color-brand-solity-blue: #0055b8;
  --color-brand-new-blue: #1475e7;

  /* Gray Color — Primary (Figma: color/gray) */
  --color-gray-900: #111111;
  --color-gray-800: #373839;
  --color-gray-700: #535455;
  --color-gray-600: #6e7072;
  --color-gray-500: #8a8c8e;
  --color-gray-400: #a1a3a5;
  --color-gray-300: #b9babb;
  --color-gray-200: #d0d1d2;
  --color-gray-100: #e8e8e8;
  --color-gray-50: #f3f3f4;
  --color-gray-25: #f8f8f8;

  /* Blue Color — Secondary (Figma: color/blue) */
  --color-blue-900: #062141;
  --color-blue-800: #093568;
  --color-blue-700: #0b468a;
  --color-blue-600: #0858b6;
  --color-blue-500: #1475e7;
  --color-blue-400: #298bff;
  --color-blue-300: #449aff;
  --color-blue-200: #66acff;
  --color-blue-100: #9dcaff;
  --color-blue-50: #d3e7ff;
  --color-blue-25: #e7f2ff;

  /* Red Color (Figma: color/red) */
  --color-red-900: #4a0a0e;
  --color-red-800: #620e12;
  --color-red-700: #93141b;
  --color-red-600: #c41b24;
  --color-red-500: #f5222d;
  --color-red-400: #f74e57;
  --color-red-300: #f97a81;
  --color-red-200: #fba7ab;
  --color-red-100: #fdd3d5;
  --color-red-50: #fee9ea;
  --color-red-25: #fef4f4;

  /* Orange Color (Figma: color/orange) */
  --color-orange-900: #4b2a07;
  --color-orange-800: #643809;
  --color-orange-700: #96540d;
  --color-orange-600: #c87012;
  --color-orange-500: #fa8c16;
  --color-orange-400: #fba345;
  --color-orange-300: #fcba73;
  --color-orange-200: #fdd1a2;
  --color-orange-100: #fee8d0;
  --color-orange-50: #fff3e8;
  --color-orange-25: #fff9f3;

  /* Yellow Color (Figma: color/yellow) */
  --color-yellow-900: #4b4206;
  --color-yellow-800: #645808;
  --color-yellow-700: #96830c;
  --color-yellow-600: #c8af10;
  --color-yellow-500: #fadb14;
  --color-yellow-400: #fbe243;
  --color-yellow-300: #fce972;
  --color-yellow-200: #fdf1a1;
  --color-yellow-100: #fef8d0;
  --color-yellow-50: #fffbe7;
  --color-yellow-25: #fffdf3;

  /* Neutral Color (Figma: color/neutral) */
  --color-neutral-black: #000000;
  --color-neutral-white: #ffffff;
  --color-neutral-900: #1a1a1a;
  --color-neutral-800: #262626;
  --color-neutral-700: #444444;
  --color-neutral-600: #555555;
  --color-neutral-500: #727272;
  --color-neutral-400: #aaaaaa;
  --color-neutral-300: #cccccc;
  --color-neutral-200: #d9d9d9;
  --color-neutral-100: #e5e5e5;
  --color-neutral-50: #f2f2f2;
  --color-neutral-25: #f8f8f8;

  /* Alpha Color — White (Figma: alpha/white, 10%~90%) */
  --alpha-white-100a: #ffffff1a;
  --alpha-white-200a: #ffffff33;
  --alpha-white-300a: #ffffff4d;
  --alpha-white-400a: #ffffff66;
  --alpha-white-500a: #ffffff80;
  --alpha-white-600a: #ffffff99;
  --alpha-white-700a: #ffffffb2;
  --alpha-white-800a: #ffffffcc;
  --alpha-white-900a: #ffffffe5;

  /* ========================================================
     시맨틱 컬러 토큰 — Figma Semantic Color 가이드와 1:1 매칭
     ======================================================== */

  /* Text (Figma: color/text) */
  --color-text-default-white: #ffffff;
  --color-text-default-highest: #111111;
  --color-text-default-high: #373839;
  --color-text-default-medium: #535455;
  --color-text-default-low: #8a8c8e;
  --color-text-default-lowest: #a1a3a5;
  --color-text-point-default: #1475e7;
  --color-text-point-secondary: #0055b8;
  --color-text-point-tertiary: #c8a484;
  --color-text-status-positive: #317610;
  --color-text-status-warning: #c87012;
  --color-text-status-warning-2: #fadb14;
  --color-text-status-danger: #c41b24;
  --color-text-status-information: #1475e7;

  /* Background (Figma: color/bg) */
  --color-bg-default-white: #ffffff;
  --color-bg-default-black: #000000;
  --color-bg-primary-light-level-1: #f8f8f8;
  --color-bg-primary-light-level-2: #f3f3f4;
  --color-bg-primary-light-level-3: #e8e8e8;
  --color-bg-primary-light-level-4: #d0d1d2;
  --color-bg-primary-dark-level-1: #111111;
  --color-bg-primary-dark-level-2: #373839;
  --color-bg-primary-dark-level-3: #535455;
  --color-bg-primary-dark-level-4: #6e7072;
  --color-bg-secondary-light-level-1: #e7f2ff;
  --color-bg-secondary-light-level-2: #d3e7ff;
  --color-bg-secondary-light-level-3: #9dcaff;
  --color-bg-secondary-light-level-4: #66acff;
  --color-bg-secondary-dark-level-1: #062141;
  --color-bg-secondary-dark-level-2: #093568;
  --color-bg-secondary-dark-level-3: #0b468a;
  --color-bg-secondary-dark-level-4: #0858b6;
  --color-bg-neutral-light-level-1: #f8f8f8;
  --color-bg-neutral-light-level-2: #f2f2f2;
  --color-bg-neutral-light-level-3: #e5e5e5;
  --color-bg-neutral-light-level-4: #d9d9d9;
  --color-bg-neutral-dark-level-1: #1a1a1a;
  --color-bg-neutral-dark-level-2: #262626;
  --color-bg-neutral-dark-level-3: #444444;
  --color-bg-neutral-dark-level-4: #555555;

  /* Icon (Figma: color/ic) */
  --color-ic-black: #111111;
  --color-ic-white: #ffffff;
  --color-ic-gray-strong: #6e7072;
  --color-ic-gray: #8a8c8e;
  --color-ic-disabled: #d0d1d2;
  --color-ic-point: #1475e7;
  --color-ic-point-disabled: #d0d1d2;
  --color-ic-new: #c41b24;

  /* Line (Figma: color/line) */
  --color-line-highest: #111111;
  --color-line-high: #535455;
  --color-line-medium: #d0d1d2;
  --color-line-low: #e8e8e8;
  --color-line-white: #ffffff;
  --color-line-point: #1475e7;

  /* Border (Figma: color/bd — 폼 요소 테두리) */
  --color-bd-default: #8a8c8e;
  --color-bd-focused: #111111;
  --color-bd-active: #111111;
  --color-bd-disabled: #d0d1d2;
  --color-bd-unselected: #8a8c8e;
  --color-bd-point: #1475e7;
  --color-bd-positive: #429d15;
  --color-bd-warning: #c87012;
  --color-bd-error: #c41b24;
  --color-bd-info: #0858b6;

  /* Button (Figma: color/btn) */
  --color-btn-default-primary: #1475e7;
  --color-btn-default-secondary: #093568;
  --color-btn-default-outline-fill: #ffffff;
  --color-btn-default-outline-stroke: #062141;
  --color-btn-default-ghost-stroke: #ffffff;
  --color-btn-hover-primary: #1475e7;
  --color-btn-hover-outline-fill: #f8f8f8;
  --color-btn-hover-ghost-fill: #ffffff;
  --color-btn-disabled-primary: #f3f3f4;
  --color-btn-disabled-secondary: #f3f3f4;
  --color-btn-disabled-outline-fill: #f8f8f8;
  --color-btn-disabled-outline-stroke: #d0d1d2;
  --color-btn-disabled-ghost-stroke: #ffffff80;
  --color-btn-text-on-btn-disabled: #8a8c8e;
  --color-btn-text-on-btn-secondary-disabled: #a1a3a5;

  /* External Link (Figma: color/external-link) */
  --color-external-link-point: #1475e7;
  --color-external-link-hover: #0858b6;
  --color-external-link-pressed: #093568;
  --color-external-link-visited: #441c7d;
  --color-external-link-disabled: #a1a3a5;

  /* Label — Solid (Figma: color/Label/solid) */
  --color-label-solid-blue: #1475e7;
  --color-label-solid-darkblue: #093568;
  --color-label-solid-gray: #8a8c8e;
  --color-label-solid-red: #f5222d;
  --color-label-solid-orange: #fba345;
  --color-label-solid-yellow: #fadb14;
  --color-label-solid-green: #429d15;
  --color-label-solid-purple: #722ed1;
  --color-label-solid-disabled: #e8e8e8;

  /* Label — Pastel (Figma: color/Label/pastel) */
  --color-label-pastel-blue: #e7f2ff;
  --color-label-pastel-darkblue: #d3e7ff;
  --color-label-pastel-gray: #e8e8e8;
  --color-label-pastel-red: #fee9ea;
  --color-label-pastel-orange: #fff3e8;
  --color-label-pastel-yellow: #fffbe7;
  --color-label-pastel-green: #eef9e8;
  --color-label-pastel-purple: #f1eafa;
  --color-label-pastel-disabled: #f3f3f4;

  /* Label — Outline (Figma: color/Label/outline) */
  --color-label-outline-blue: #1475e7;
  --color-label-outline-darkblue: #093568;
  --color-label-outline-gray: #8a8c8e;
  --color-label-outline-red: #f5222d;
  --color-label-outline-orange: #c87012;
  --color-label-outline-yellow: #96830c;
  --color-label-outline-green: #429d15;
  --color-label-outline-purple: #722ed1;
  --color-label-outline-disabled: #a1a3a5;

  /* Label — Text (Figma: color/Label/text) */
  --color-label-text-blue: #0858b6;
  --color-label-text-darkblue: #093568;
  --color-label-text-gray: #535455;
  --color-label-text-red: #c41b24;
  --color-label-text-orange: #c87012;
  --color-label-text-yellow: #96830c;
  --color-label-text-green: #317610;
  --color-label-text-purple: #722ed1;
  --color-label-text-disabled: #a1a3a5;

  /* Helper (Figma: color/helper) */
  --color-helper-divider-h: #b9babb;

  /* Button 추가 토큰 (Figma: color/btn — 버튼 가이드 보드에서 추출) */
  --color-btn-hover-secondary: #062141;
  --color-btn-text-on-btn-white: #ffffff;
  --color-btn-text-on-btn-black: #062141;

  /* Checkbox (Figma: color/checkbox — 체크박스 가이드 보드에서 추출) */
  --color-checkbox-selected-fill: #1475e7;
  --color-checkbox-unselected-fill: #ffffff;
  --color-checkbox-unselected-border: #a1a3a5;
  --color-checkbox-disabled-fill: #e8e8e8;
  --color-checkbox-disabled-border: #b9babb;

  /* Radius (Figma: radius/rd) */
  --radius-100: 4rem;
  --radius-300: 12rem;
  --radius-400: 16rem;
  --radius-600: 24rem;
  --radius-800: 32rem;
  --radius-full: 999rem;

  /* Alpha — black (Figma: alpha/black 400a = 40%) */
  --alpha-black-400a: #00000066;
  --alpha-black-500a: #00000080;

  /* Spacing / Padding (Figma: spacing/sp, padding/pd) */
  --spacing-100: 4rem;
  --spacing-200: 8rem;
  --spacing-300: 12rem;
  --spacing-400: 16rem;
  --spacing-500: 20rem;
  --spacing-600: 24rem;
  --spacing-800: 32rem;
  --spacing-1000: 40rem;
  --spacing-2000: 80rem;
  --spacing-3000: 120rem;
  --padding-100: 4rem;
  --padding-200: 8rem;
  --padding-400: 16rem;
  --padding-500: 20rem;
  --padding-600: 24rem;
  --padding-800: 32rem;
  --padding-1000: 40rem;
  --padding-1500: 60rem;
  --padding-2000: 80rem;

  /* Gap (Figma: gap) */
  --gap-xs: 60rem;
  --gap-sm: 80rem;
}
input:focus, select:focus, option:focus, textarea:focus, button:focus{
	outline: none;
}

.stop-scroll {overflow: hidden; width: 100%; height: 100%;}

.skip-nav {width: 100%; height: 50px; position: fixed; top: -9999px; left: 0; z-index: 500; background: red; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20rem;}
.skip-nav:focus {top: 0;}

.inner {width: 1440rem; margin: 0 auto;} /* 공통 콘텐츠 컨테이너 — 1440 */
.inner-wide {width: 1760rem; margin: 0 auto;} /* 넓은 컨테이너 — 1760 (메인 솔루션/제품/뉴스 등) */
.inner-small {width: 1200rem; margin: 0 auto;}
.inner-detail {width: 998rem; margin: 0 auto;}

.only-pc {display: block;}
.only-mo {display: none;}

@media screen and (max-width: 1024px) {
  html {
    font-size: 0.2564vw;
  }


  /* 폰트 토큰 — 모바일 (피그마 Size PC(MO)의 괄호 값) */
  :root {
    --type-d1: 72rem;   /* 120(72) */
    --type-t1: 60rem;   /* 96(60) */
    --type-h1: 48rem;   /* 80(48) */
    --type-h2: 40rem;   /* 64(40) */
    --type-h3: 32rem;   /* 40(32) */
    --type-h4: 28rem;   /* 32(28) */
    --type-b1: 20rem;   /* 24(20) */
    --type-b2: 18rem;   /* 20(18) */
    --type-b3: 18rem;   /* 18(18) */
    --type-b4: 16rem;   /* 16(16) */
    --type-cap1: 14rem; /* 14(14) */

    /* 간격 토큰 — 모바일 (390 시안) */
    --gap-sm: 48rem; /* 80(48) */
  }

  .top {display: block;}
  .inner, .inner-wide, .inner-small, .inner-detail {width: calc(100% - 48rem);} /* 모바일 사이드 패딩 24 (390 시안) */

  .only-pc {display: none;}
  .only-mo {display: block;}
}

.scroll-motion {opacity: 0; transform: translateY(100rem); transition-duration: .7s;}
.scroll-motion.active {opacity: 1; transform: translateY(0);}