@charset "utf-8";
/* ============================================================
 * 주식회사 화문 — 사이트 공통 (design/company/sub.css · ceo.css · sub-hero.css)
 * 헤더·푸터 스타일은 GNB(헤더)/푸터 관리 레코드 custom_css 에 있음
 * 영역별: /css/sub/{1depth}.css · /css/sub/{1depth}-{2depth}.css (header.inc.php 자동 로드)
 * ============================================================ */
:root{
  --color-primary:#878787;
  --color-accent:#C79540;
  --color-accent-dark:#A67A2E;
  --color-dark:#2C2C2C;
  --color-white:#FFFFFF;
  --color-bg:#050A12;
  --color-bg-elevated:#0F172A;
  --color-bg-card:#151F2E;
  --color-muted:#505050;
  --color-border:#E8ECF0;
  --color-text:#505050;
  --color-text-light:#878787;
  --color-gnb-sub:#505050;
  --inner:1440px;
  --header-height:88px;
  --header-padding:40px;
  --sub-inner:1440px;
  --sub-side:40px;
  --transition:0.25s ease;
  --font-display:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --logo-accent-filter:brightness(0) saturate(100%) invert(62%) sepia(38%) saturate(746%) hue-rotate(358deg) brightness(93%) contrast(89%);
  --fs-gnb:18px;
  --fs-lang:16px;
  --fs-mobile-menu:18px;
  --fs-footer-company:20px;
  --fs-footer-body:16px;
  --fs-footer-label:16px;
  --fs-footer-copy:16px;
  --fs-sub-body:18px;
  --fs-page-head:48px;
  --fs-page-head-md:32px;
  --fs-page-head-sm:24px;
  --fs-section-head:40px;
  --fs-section-head-md:32px;
  --fs-section-head-sm:22px;
  --lh-section-head:1.3;
  --sub-section-gap:140px;
  --sub-footer-gap:150px;
  --sub-copy-title-gap:24px;
  --sub-copy-block-gap:40px;
  --sub-page-head-gap:60px;
}
@media (max-width:1440px){:root{--fs-footer-company:19px;--fs-footer-body:15px;--fs-footer-label:15px;--fs-footer-copy:14px}}
@media (max-width:1023px){:root{--fs-footer-company:18px;--header-padding:32px;--sub-side:32px;--sub-section-gap:100px;--sub-footer-gap:110px;--sub-page-head-gap:44px;--sub-copy-block-gap:32px}}
@media (max-width:767px){:root{--fs-footer-company:16px;--fs-footer-body:14px;--fs-footer-label:14px;--fs-footer-copy:13px;--header-padding:16px;--sub-side:16px;--header-height:60px;--sub-section-gap:64px;--sub-footer-gap:70px;--sub-page-head-gap:32px;--sub-copy-title-gap:16px;--sub-copy-block-gap:24px;--fs-sub-body:15px;--fs-mobile-menu:16px}}

/* 기본 요소 — 시안 reset 을 우선순위 증가 없이(:where) 적용 */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.website-layout{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;font-family:var(--font-body);font-size:16px;color:var(--color-text);background:#fff;letter-spacing:normal}
:where(body.website-layout) :is(img,picture,video,canvas,svg){display:block;max-width:100%}
:where(body.website-layout) :is(input,button,textarea,select){font:inherit}
:where(body.website-layout) a{color:inherit;text-decoration:none}
:where(body.website-layout) :is(ul,ol){list-style:none}
:where(body.website-layout) button{cursor:pointer;background:none;border:none}

/* CMS 래퍼 중화 — 시안 페이지(.hw-page)는 자체 여백·폭을 사용 */
body.website-layout #wrapper{overflow-x:clip}
body.website-layout main.sub-page{padding:0;margin:0;background:transparent}
body.website-layout main.sub-page > .sub-content:has(.hw-page){padding:0;margin:0;background:transparent;max-width:none}
body.website-layout main.sub-page > .sub-content:has(.hw-page) > .container{max-width:none;width:100%;padding:0;margin:0}
body.website-layout #pb-page-wrap:has(.hw-page) .pb-row{padding-top:0 !important;padding-bottom:0 !important}

/* ===== from design/company/sub.css ===== */
/* 섹션 카피 — 제목↔설명 24 · 블록↔하단 콘텐츠 40 (경영이념 intro 기준) */
.const-biz-head{
  margin-bottom:var(--sub-copy-block-gap);
}
.const-biz-head__title{
  margin-bottom:var(--sub-copy-title-gap);
}
.const-biz-section-title{
  margin-bottom:var(--sub-copy-title-gap);
}
/* 페이지 대제목 (sub-page-head) — 48 · 32 · 26 */
.sub-page-head__title{
  font-family:var(--font-display);
  font-size:var(--fs-page-head);
  font-weight:700;
  line-height:var(--lh-section-head);
  letter-spacing:-0.03em;
  word-break:keep-all;
}
/* 섹션 제목 — unified scale (40 · 32 · 26) */
.sub-content__title,
.ceo-content__title,
.ceo-page__title,
.ceo-intro__heading,
.ceo-intro__subheading,
.const-biz-head__title,
.const-biz-section-title,
.page-company-philosophy .philo-intro__title,
.page-company-philosophy .philo-section-label,
.page-company-philosophy .philo-way__title,
.perf-zone__title,
.perf-category__title,
.file-guide__title{
  font-family:var(--font-display);
  font-size:var(--fs-section-head);
  font-weight:700;
  line-height:var(--lh-section-head);
  letter-spacing:-0.03em;
  word-break:keep-all;
}
.const-biz-head__title em,
.const-biz-section-title em,
.page-company-philosophy .philo-intro__title em{
  font-style:normal;
  color:inherit;
}
/* Header */
/* Subpage navigation opens on a white header; both languages need dark text. */
/* Sub Visual — Figma 44:564 */
.sub-visual{position:relative;margin-top:0;padding-bottom:32px;background:#fff}
.sub-visual__bg{position:absolute;top:0;left:0;right:0;height:540px;overflow:hidden;z-index:0}
.sub-visual__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.sub-visual__dim{position:absolute;inset:0;background:rgba(0,0,0,0.2)}
.sub-visual__frame{position:relative;z-index:1;max-width: calc(var(--sub-inner) + 2 * var(--sub-side));margin:0 auto;padding:0 var(--sub-side)}
.sub-visual__copy{padding:233px 0 133px;text-align:center;color:var(--color-white)}
.sub-visual__title{margin:0;font-size:clamp(40px,4.2vw,64px);font-weight:600;line-height:1.25;letter-spacing:-0.03em;word-break:keep-all}
.sub-visual__desc{margin:24px 0 0;font-size:20px;font-weight:400;line-height:1.65;letter-spacing:-0.02em;word-break:keep-all}
/* Content */
.sub-content{padding:0 0 var(--sub-footer-gap);background:#fff}
.sub-content__inner{max-width: calc(var(--sub-inner) + 2 * var(--sub-side));margin:0 auto;padding:0 var(--sub-side)}
.sub-content__head{margin-bottom:40px;padding-bottom:28px;border-bottom:1px solid var(--color-border)}
.sub-content__title{margin:0;color:var(--color-dark)}
.ceo-page__title{margin:0 0 40px;color:var(--color-dark)}
.ceo-greeting{display:grid;gap:32px;margin-bottom:48px}
.ceo-greeting__lead{font-size:30px;font-weight:600;color:var(--color-dark);line-height:1.75;letter-spacing:-0.02em;word-break:keep-all}
.ceo-greeting__brand{color:var(--color-accent);font-weight:700}
.ceo-greeting__body{display:grid;gap:18px;font-size:18px;color:var(--color-text);line-height:1.75;word-break:keep-all}
/* CEO sign — sub.css early load (avoid ceo.css/font swap flash) */
.ceo-intro__sign .ceo-intro__role{margin:0;font-size:20px;font-weight:500;color:var(--color-text-light);letter-spacing:-0.01em;line-height:1.75}
.ceo-intro__sign .ceo-intro__name{display:inline;margin-left:4px;font-family:'Nanum Brush Script',cursive;font-size:30px;font-weight:400;color:var(--color-dark);line-height:1.75;letter-spacing:0;font-synthesis:none}
.ceo-greeting__sign{margin-top:12px;padding-top:28px;border-top:1px solid var(--color-border);text-align:right}
.ceo-greeting__role{margin:0 0 6px;font-size:16px;font-weight:500;color:var(--color-text-light)}
.ceo-greeting__name{margin:0;font-family:var(--font-display);font-size:52px;font-weight:600;color:var(--color-dark);letter-spacing:-0.02em;line-height:1.2}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.philosophy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.philosophy__card{padding:32px 28px;background:#F8FAFC;border:1px solid var(--color-border);border-radius:16px}
.philosophy__card--values{grid-column:1/-1}
.philosophy__label{margin:0 0 16px;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--color-dark);letter-spacing:-0.02em}
.philosophy__text{margin:0;font-size:var(--fs-sub-body);color:var(--color-text);line-height:1.75;word-break:keep-all}
.philosophy__values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.philosophy__values li{padding:24px 20px;background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;text-align:center}
.philosophy__values strong{display:block;margin-bottom:8px;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--color-accent);letter-spacing:0.04em}
.philosophy__values span{display:block;font-size:var(--fs-sub-body);color:var(--color-text);line-height:1.6;word-break:keep-all}
/* Footer */
.footer-section{background:#222;color:var(--color-white);padding:32px var(--sub-side) 48px}
@media (max-width:1023px){
	.sub-page-head__title{font-size:var(--fs-page-head-md)}
	.sub-content__title,
	.ceo-content__title,
	.ceo-page__title,
	.ceo-intro__heading,
	.ceo-intro__subheading,
	.const-biz-head__title,
	.const-biz-section-title,
	.page-company-philosophy .philo-intro__title,
	.page-company-philosophy .philo-section-label,
	.page-company-philosophy .philo-way__title,
	.perf-zone__title,
	.perf-category__title,
	.file-guide__title{font-size:var(--fs-section-head-md)}
	.philosophy{grid-template-columns:1fr}
	.philosophy__values{grid-template-columns:1fr}
}
@media (max-width:767px){
	.sub-visual__bg{height:420px}
	.sub-visual__copy{padding: 160px 0 48px}
	.sub-visual__desc{margin-top:16px}
	.sub-content{padding: 0 0 48px}
	.sub-page-head__title{font-size:var(--fs-page-head-sm)}
	.sub-content__title,
	.ceo-content__title,
	.ceo-page__title,
	.ceo-intro__heading,
	.ceo-intro__subheading,
	.const-biz-head__title,
	.const-biz-section-title,
	.page-company-philosophy .philo-intro__title,
	.page-company-philosophy .philo-section-label,
	.page-company-philosophy .philo-way__title,
	.perf-zone__title,
	.perf-category__title,
	.file-guide__title{font-size:var(--fs-section-head-sm)}
	.ceo-page__title{margin-bottom:32px}
	.ceo-greeting{margin-bottom:40px}
	.ceo-greeting__name{font-size:44px}
	.ceo-greeting__lead{font-size:26px;line-height:1.65}
	.footer-section{padding:28px var(--sub-side) 32px}
}
/* ===== from design/company/ceo.css ===== */
/* CEO 인사말 — plan02 메인 다크 톤 전용 */
.page-company{
  --color-bg: #050A12;
  --color-bg-elevated: #0F172A;
  --color-bg-card: #151F2E;
  --color-text-on-dark: #CBD5E1;
  --color-text-muted: rgba(255, 255, 255, 0.52);
  --color-line: rgba(255, 255, 255, 0.08);
  --color-line-strong: rgba(255, 255, 255, 0.14);
  background: var(--color-bg);
  color: var(--color-text-on-dark);
}
/* Hero — pintel Technology 서브비주얼형 (100vh 풀스크린) */
.ceo-hero{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.ceo-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #060b14;
}
.ceo-hero__photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.ceo-hero__mesh{
  position: absolute;
  inset: -8% -5% -12% 15%;
  background:
    radial-gradient(ellipse 72% 58% at 68% 52%, rgba(72, 132, 196, 0.28) 0%, rgba(72, 132, 196, 0.06) 42%, transparent 68%),
    radial-gradient(ellipse 48% 38% at 82% 38%, rgba(96, 168, 228, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 58% 72%, rgba(88, 108, 180, 0.12) 0%, transparent 55%),
    linear-gradient(125deg, rgba(12, 24, 42, 0.12) 0%, transparent 45%);
  filter: blur(1px);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.ceo-hero__dots{
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(130, 190, 240, 0.22) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 68% 62% at 72% 48%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 72% 48%, black 0%, transparent 72%);
  pointer-events: none;
}
.ceo-hero__fade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(6, 11, 20, 0.78) 0%, rgba(6, 11, 20, 0.42) 32%, rgba(6, 11, 20, 0.14) 55%, rgba(6, 11, 20, 0.22) 100%),
    linear-gradient(to top, rgba(6, 11, 20, 0.72) 0%, rgba(6, 11, 20, 0.28) 14%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
}
.ceo-hero__body{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  padding-top: var(--header-height);
  box-sizing: border-box;
}
.ceo-hero__inner{
  width: 100%;
  max-width: calc(var(--sub-inner) + 2 * var(--sub-side));
  margin: 0 auto;
  padding: 0 var(--sub-side);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ceo-hero__title{
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.ceo-hero__title--menu{
  font-size: clamp(44px, 5.2vw, 76px);
  letter-spacing: -0.03em;
}
.ceo-hero__tagline{
  margin: 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  white-space: nowrap;
}
.ceo-hero__bottom{
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 100%;
  padding: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 55%, transparent 100%);
}
.ceo-hero__bottom::before{
  content: '';
  display: block;
  width: min(100%, var(--sub-inner));
  height: 1px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
}
.ceo-hero__bottom-inner{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px 32px;
  width: 100%;
  max-width: calc(var(--sub-inner) + 2 * var(--sub-side));
  margin: 0 auto;
  padding: 0 var(--sub-side);
  min-height: 72px;
  box-sizing: border-box;
}
body#sub.website-layout .lnb-wrap.lnb-wrap--hero{
  justify-content: center;
}
.ceo-hero__crumb{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  align-self: center;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.52);
}
.ceo-hero__crumb-home{
  display: inline-flex;
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--transition);
}
.ceo-hero__crumb-home:hover{
  color: rgba(255, 255, 255, 0.92);
}
.ceo-hero__crumb-sep{
  color: rgba(255, 255, 255, 0.28);
  font-size: 12px;
  user-select: none;
}
.ceo-hero__crumb-current{
  color: rgba(255, 255, 255, 0.9);
}
.ceo-hero__tabs{
  flex-shrink: 0;
  align-self: center;
  padding: 14px 0;
}
.ceo-hero__tab-track{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.ceo-hero__tab-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 11px 24px;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}
.ceo-hero__tab-btn:hover{
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
}
.ceo-hero__tab-btn.is-current{
  color: var(--color-dark);
  font-weight: 600;
  background: var(--color-white);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
}
.ceo-hero__tab-btn.is-current:hover{
  color: var(--color-dark);
  background: var(--color-white);
}
.ceo-hero__tab-btn.is-unlinked,
.ceo-hero__tab-btn.is-unlinked:hover{
  cursor: default;
  opacity: 0.72;
}
.ceo-hero__tab-btn.is-unlinked.is-current{
  opacity: 1;
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Sub page head — hero 아래 120px · 대제목 48px · 제목~본문 60px */
.sub-page-head{
  padding-top: 120px;
  padding-bottom: var(--sub-page-head-gap);
  background: #fff;
}
.sub-page-head__inner{
  width: 100%;
  max-width: calc(var(--sub-inner) + 2 * var(--sub-side));
  margin: 0 auto;
  padding: 0 var(--sub-side);
  text-align: center;
}
.sub-page-head__title{
  margin: 0;
  color: var(--color-dark);
  text-align: center;
}
/* 페이지 대제목 ↔ 본문 간격 60px — sub-page-head padding-bottom만 사용 */
.sub-page-head + .ceo-content,
.sub-page-head + .const-page,
.sub-page-head + .const-product,
.sub-page-head + .mat-catalog,
.sub-page-head + .equip-catalog,
.sub-page-head + .sub-content,
.sub-page-head + .philo-content,
.sub-page-head + .mgr-intro{
  padding-top: 0;
  margin-top: 0;
}
.sub-page-head + .const-page .const-biz--intro,
.sub-page-head + .philo-content .philo-section--intro{
  padding-top: 0;
}
/* Content — white section */
.ceo-content{
  position: relative;
  padding: 0 0 150px;
  overflow: visible;
  background: var(--color-white);
}
.ceo-content__glow{
  display: none;
}
.ceo-content__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--sub-inner) + 2 * var(--sub-side));
  margin: 0 auto;
  padding: 0 var(--sub-side);
}
.ceo-content__eyebrow{
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.ceo-content__title{
  margin: 0;
  color: var(--color-dark);
}
/* CEO Intro — image top + split editorial */
.ceo-intro{
  margin-bottom: 0;
}
.ceo-intro__figure{
  margin: 0 0 56px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.ceo-intro__figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 400;
  object-fit: cover;
  object-position: center;
}
.ceo-intro__editorial{
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: start;
}
.ceo-intro__label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.ceo-intro__label::before{
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.ceo-intro__heading{
  margin: 0 0 2px;
  color: var(--color-dark);
}
.ceo-intro__subheading{
  margin: 0;
  color: var(--color-dark);
}
.ceo-intro__content{
  display: flex;
  flex-direction: column;
}
.ceo-intro__body{
  display: grid;
  gap: 18px;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.ceo-intro__body p{
  margin: 0;
}
.ceo-intro__brand{
  color: var(--color-accent);
  font-weight: 700;
}
.ceo-intro__sign{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 36px;
  text-align: left;
}
.ceo-intro__thanks{
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
}
@media (max-width:767px){
	.ceo-hero{
    min-height: 100vh;
    min-height: 100svh;
  }
	.ceo-hero__photo{
    object-position: center center;
  }
	.ceo-hero__bottom{
    padding: 0;
  }
	.ceo-hero__bottom-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: auto;
    padding: 0 var(--sub-side);
  }
	.ceo-hero__bottom-inner{
    align-items: center;
  }
	.ceo-hero__crumb{
    justify-content: center;
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }
	.ceo-hero__tabs{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 12px 0 16px;
  }
	.ceo-hero__tab-track{
    display: inline-flex;
    width: auto;
    max-width: 100%;
  }
	.ceo-hero__tab-btn{
    flex: 0 1 auto;
    min-width: 0;
    padding: 11px 14px;
    font-size: 18px;
  }
	body#sub.website-layout .lnb-wrap.lnb-wrap--hero{
    justify-content: center;
  }
	.ceo-hero__inner{
    padding: 0 var(--sub-side) 16px;
  }
	.ceo-hero__title{
    font-size: clamp(40px, 11vw, 56px);
  }
	.ceo-hero__tagline{
    font-size: 18px;
    white-space: normal;
    max-width: 100%;
  }
	.sub-page-head{
    padding-top: 60px;
    padding-bottom: var(--sub-page-head-gap);
  }
	.ceo-content{
    padding: 0 0 70px;
  }
	.ceo-intro{
    margin-bottom: 0;
  }
	.ceo-intro__figure{
    margin-bottom: 36px;
    border-radius: 14px;
  }
	.ceo-intro__editorial{
    grid-template-columns: 1fr;
    gap: 24px;
  }
	.ceo-intro__body{
    font-size: 15px;
    gap: 16px;
    line-height: 1.7;
  }
	.ceo-intro__body br{display:none}
	.ceo-intro__sign .ceo-intro__role{white-space:nowrap;font-size:16px;text-align:left}
	.ceo-intro__figure img{
    aspect-ratio: 16 / 7;
  }
}
/* ===== from design/company/sub-hero.css ===== */
/* Sub hero pages — performance · support (ceo-hero header parity with construction · marketing) */
.page-performance,
.page-support{
  background: #fff;
  color: var(--color-text);
}
.perf-hero__tagline,
.support-hero__tagline{
  max-width: 720px;
  white-space: normal;
}

/* ===== 반응형 공통 (STEP 2) ===== */
:where(body.website-layout) :is(img,video){height:auto}
:where(body.website-layout) iframe[src*="youtube.com"],
:where(body.website-layout) iframe[src*="youtube-nocookie.com"]{width:100%;height:auto;aspect-ratio:16/9}
:where(body.website-layout) :is(a[href^="http"],.url,.email){overflow-wrap:anywhere}
:where(body.website-layout) :is(p,li,dd,dt,h1,h2,h3,h4,h5,h6){word-break:keep-all}
:where(body.website-layout) :is(input,select,textarea){font-size:max(16px,1em)}

body.website-layout #chat-fab{right:28px;bottom:28px;width:60px;height:60px}
body.website-layout #top-btn{right:32px;bottom:100px;width:52px;height:52px}
body.website-layout #top-btn .top-label{font-size:12px}
body.website-layout.menu-open :is(#chat-fab,#top-btn){visibility:hidden}

@media (max-width:1023px){
	.sub-page-head{padding-top:90px}
	.ceo-hero__title{font-size:44px}
}
@media (max-width:767px){
	br.pc-br{display:none}
	.sub-page-head{padding-top:60px}
	body.website-layout #chat-fab{right:16px;bottom:16px}
	body.website-layout #top-btn{right:23px;bottom:86px;width:46px;height:46px}
	body.website-layout #top-btn .top-arrow{width:14px;height:14px}

	/* 터치 영역 44px 확보 (레이아웃 유지) */
	:is(#hwHeader .header__logo,#hwHeader .header__menu-btn,#hwFooter .footer__nav-link,#hwFooter .footer__policy-link,#hwFooter .footer__contact-value a,#hwFooter .footer__design-credit,.ceo-hero__crumb-home){position:relative}
	:is(#hwHeader .header__logo,#hwHeader .header__menu-btn,#hwFooter .footer__nav-link,#hwFooter .footer__policy-link,#hwFooter .footer__contact-value a,#hwFooter .footer__design-credit,.ceo-hero__crumb-home)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}

	.ceo-hero__title{font-size:32px}
	.ceo-hero__tagline{font-size:16px}

	/* 카드 좌우 여백 20px 이하 */
	body#sub.website-layout :is(.philo-policy,.const-biz-tile,.mat-catalog__supply,.mkt-offline-card,.mkt-offline-consult__item,.mgr-card){padding-left:20px;padding-right:20px}
}

/* ===== 서브페이지 폰트 축소 (STEP 2) — 시안 복합 선택자보다 우선하도록 공통 접두어 + :is() ===== */
@media (max-width:1023px){
	body#sub.website-layout :is(.mgr-card__toggle-symbol){font-size:28px}
	body#sub.website-layout :is(.mat-catalog__panel-title,.mat-catalog__product-title,.equip-category-head h3,.perf-const-row__title,.mgr-intro__title){font-size:26px}
	body#sub.website-layout :is(.ceo-intro__name){font-size:24px}
	body#sub.website-layout :is(.philo-policy__title,.philo-principle__num,.philo-principle__ko,.equip-product__name){font-size:22px}
}
@media (max-width:767px){
	body#sub.website-layout :is(.mgr-card__toggle-symbol){font-size:22px}
	body#sub.website-layout :is(.mat-catalog__panel-title,.mat-catalog__product-title,.equip-category-head h3,.perf-const-row__title,.mgr-intro__title){font-size:20px}
	body#sub.website-layout :is(.ceo-intro__name){font-size:20px}
	body#sub.website-layout :is(.philo-policy__title,.philo-principle__num,.philo-principle__ko,.equip-product__name){font-size:18px}
	body#sub.website-layout :is(.const-biz-tile__name,.const-biz-feat__name,.mat-catalog__supply-title,.mat-image-dialog h3,.equip-product__overview h5,.equip-related h4,.equip-product-unit__name,.mkt-online-service__name,.mkt-online-process__name,.mkt-offline-story__title,.mkt-offline-card__title,.mkt-offline-consult__name,.perf-project-card__title,.mgr-card__title,.philo-policy__num){font-size:17px}
	body#sub.website-layout :is(.ceo-intro__role,.equip-product-unit__features-head,.perf-gallery__title,.member-board__title,.perf-mkt-client__logo){font-size:16px}
	body#sub.website-layout :is(.mat-catalog__btn span,.perf-mkt-tabs__btn){font-size:16px}
	body#sub.website-layout :is(.ceo-intro__body p,.ceo-intro__brand,.ceo-intro__thanks,.philo-intro__summary,.philo-policy__text,.philo-section-lead,.philo-principle__desc,.philo-way__lead,.philo-way__item p,.const-biz-head__text,.const-biz-section-lead,.const-biz-tile__desc,.const-biz-feat__desc,.const-biz-feat__label,.mat-catalog__lead,.mat-catalog__panel-en,.mat-catalog__category-desc,.mat-catalog__desc,.mat-catalog__details :is(dt,dd),.mat-catalog__supply-desc,.mat-product-card__name,.equip-catalog__lead,.equip-category-head p,.equip-category-head>span,.equip-pagination,.equip-product__overview>p:last-child,.equip-overview__desc,.equip-product-spec__list li,.mkt-online-intro__text,.mkt-online-service__desc,.mkt-online-process__desc,.mkt-offline-intro__text,.mkt-offline-story__text,.mkt-offline-types__row :is(dt,dd),.mkt-offline-card__desc,.mkt-offline-consult__desc,.perf-zone__lead,.perf-const-row__desc,.perf-mkt-client__caption,.perf-project-card__item :is(dt,dd),.file-guide__desc,.mgr-intro__desc,.mgr-card__desc,.mgr-card__contact-label,.mgr-card__contact-value,.member-board__num-value){font-size:15px}
	body#sub.website-layout :is(.ceo-hero__crumb span,.philo-policy__label,.philo-policy__tags span,.philo-strategy__eyebrow,.philo-strategy__tagline,.philo-principle__en,.philo-section__eyebrow,.philo-way__step,.const-biz-head__eyebrow,.mat-catalog__tab span,.mat-catalog__variant,.mat-catalog__brand,.mat-catalog__supply-eyebrow,.equip-product__eyebrow,.equip-product__details figcaption,.equip-related figcaption,.equip-overview__label,.equip-overview__title,.equip-slider-controls>span,.mkt-online-intro__label,.mkt-offline-intro__label,.mkt-online-service__label,.mkt-offline-story__label,.mkt-offline-card__flow,.perf-gallery__date,.member-board__meta,.mgr-card__index){font-size:14px}
}