/* 해솔 홈페이지 — A안 「신호판」 (design/base.css + design/a/a.css 에서 이어짐) */
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex/ibm-plex-sans-condensed-latin-500-normal.25db464417d3.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex/ibm-plex-sans-condensed-latin-600-normal.bac89dc82014.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --paper: #F4F6F8;       /* 차가운 강판 톤 바탕 */
  --surface: #FFFFFF;
  --ink: #1C2127;         /* 흑연 */
  --muted: #56616C;       /* 강철 회색 */
  --rule: #D5DBE1;
  --brand: #EF4328;       /* 공식 CI 레드 — 장식·대형 글자 */
  --action: #E02D11;      /* 흰 글자 대비 4.6:1 — 버튼·링크 */
  --action-hover: #BF260E;
  --focus: #1F6FEB;

  --bg: var(--surface);
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "IBM Plex Sans Condensed", "Pretendard Variable", Pretendard, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.005em;
  --radius: 2px;

  --header-bg: #FFFFFF; --header-ink: var(--ink); --header-shadow: 0 1px 0 var(--rule);
  --utility-bg: var(--paper); --utility-ink: var(--muted); --utility-accent: var(--action);
  --menu-bg: #FFFFFF; --menu-shadow: 0 12px 28px rgba(28, 33, 39, .10);
  --quiet-bg: var(--paper); --quiet-hover: #E8ECF0;
  --cta-bg: var(--ink); --cta-ink: #FFFFFF; --cta-muted: #C3CBD2;
  --footer-bg: #FFFFFF; --footer-ink: var(--muted); --footer-rule: var(--rule);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.7;
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
}
body.drawer-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 16px; background: var(--ink); color: #fff; }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border: 1.5px solid transparent; border-radius: var(--radius);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.3; text-decoration: none; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--action { background: var(--action); color: #fff; }
.btn--action:hover { background: var(--action-hover); }
.btn--ghost { border-color: currentColor; }
.btn--quiet { background: var(--quiet-bg); color: var(--ink); }
.btn--quiet:hover { background: var(--quiet-hover); }
.btn--small { min-height: 40px; padding: 8px 14px; font-size: 0.875rem; }
.btn--large { min-height: 52px; padding: 14px 26px; font-size: 1rem; }

/* 헤더 */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); color: var(--header-ink); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: var(--header-shadow); }
.utility { font-size: 0.8125rem; background: var(--utility-bg); color: var(--utility-ink); }
.utility__inner { display: flex; justify-content: flex-end; align-items: center; gap: 24px; min-height: 36px; }
.utility__tel { font-weight: 600; text-decoration: none; color: var(--utility-accent); }
.lang { display: flex; gap: 16px; }
.lang a { text-decoration: none; letter-spacing: .02em; opacity: .75; }
.lang a[aria-current] { opacity: 1; font-weight: 700; }
.lang a:hover { opacity: 1; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; transition: min-height .2s; }
.is-scrolled .masthead__inner { min-height: 64px; }
.brand { display: block; line-height: 0; }
.brand img { width: 178px; height: auto; }
.brand__light { display: none; }
.gnb__list { display: flex; gap: 4px; }
.gnb__link { display: block; padding: 12px 16px; font-weight: 600; font-size: 1rem; text-decoration: none; }
.gnb__group { position: relative; }
.gnb__group > button::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.gnb__sub {
  display: none; position: absolute; left: 0; top: 100%; min-width: 220px; padding: 8px 0;
  background: var(--menu-bg); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--menu-shadow);
}
.gnb__group:hover > .gnb__sub, .gnb__group:focus-within > .gnb__sub, .gnb__group > button[aria-expanded="true"] + .gnb__sub { display: block; }
.gnb__sub a { display: block; padding: 9px 20px; text-decoration: none; font-size: 0.9375rem; white-space: nowrap; }
.gnb__sub a:hover { background: var(--quiet-bg); color: var(--action); }
.menu-toggle { display: none; width: 44px; height: 44px; position: relative; }
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after { position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor; content: ""; }
.menu-toggle__bar { top: 21px; }
.menu-toggle__bar::before { left: 0; top: -7px; }
.menu-toggle__bar::after { left: 0; top: 7px; }
@media (max-width: 1023px) {
  .gnb, .utility { display: none; }
  .menu-toggle { display: block; }
  .masthead__inner { min-height: 60px; }
  .brand img { width: 150px; }
}

/* 모바일 메뉴 */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(10, 16, 22, .5); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: min(88vw, 380px); overflow-y: auto; padding: 16px 20px 32px; background: #fff; color: var(--ink); }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.drawer__top .utility__tel { color: var(--action); }
.drawer__close { width: 44px; height: 44px; font-size: 28px; line-height: 1; }
.drawer__home, .drawer summary { display: flex; align-items: center; min-height: 52px; font-weight: 700; font-size: 1.0625rem; text-decoration: none; border-bottom: 1px solid var(--rule); cursor: pointer; list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; margin-left: auto; font-weight: 400; font-size: 1.375rem; color: var(--muted); }
.drawer details[open] summary::after { content: "−"; }
.drawer details ul { padding: 6px 0 10px 12px; border-bottom: 1px solid var(--rule); }
.drawer details a { display: block; padding: 8px 0; text-decoration: none; color: var(--muted); }
.lang--drawer { margin-top: 20px; font-size: 0.875rem; }

/* 공통 섹션 */
.section-title { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; }
.section-head p { margin-top: 12px; color: var(--muted); max-width: 60ch; }

/* 메인 */
.hero__title { font-family: var(--font-display); font-weight: var(--display-weight); line-height: .95; letter-spacing: var(--display-tracking); font-size: clamp(3.25rem, 7.4vw, 6.75rem); }
.hero__lead { margin-top: 24px; font-size: clamp(1rem, 1.4vw, 1.1875rem); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.solutions, .services { padding-block: clamp(64px, 9vw, 120px); }
.plate__name { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.1; }
.plate__name a { text-decoration: none; }
.plate__name a:hover { color: var(--action); }
.plate__body p { margin-top: 12px; color: var(--muted); max-width: 52ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags a { display: inline-block; padding: 5px 12px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.875rem; text-decoration: none; color: var(--ink); }
.tags a:hover { border-color: var(--action); color: var(--action); }

.services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.service img { width: 100%; aspect-ratio: 450 / 260; object-fit: cover; }
.service h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; }
.service p { margin-top: 8px; color: var(--muted); }
.more { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--action); text-underline-offset: 4px; }
@media (max-width: 767px) { .services__grid { grid-template-columns: 1fr; } }

.cta { padding-block: clamp(56px, 7vw, 88px); background: var(--cta-bg); color: var(--cta-ink); }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta__title { font-size: clamp(1.75rem, 3.2vw, 2.625rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.cta__text p { margin-top: 10px; color: var(--cta-muted); max-width: 46em; }
@media (max-width: 767px) { .cta__inner { flex-direction: column; align-items: flex-start; } }

/* 푸터 */
.site-footer { padding-block: 48px 56px; background: var(--footer-bg); color: var(--footer-ink); font-size: 0.875rem; }
.site-footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 48px; align-items: start; }
.site-footer__brand img { width: 200px; height: auto; }
.company p { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.company p + p { margin-top: 4px; }
.footer-links { display: flex; gap: 10px; }
.footer-links a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--footer-rule); border-radius: 50%; }
.footer-links a:hover { border-color: var(--action); color: var(--action); }
.footer-links svg { width: 20px; height: 20px; }
@media (max-width: 1023px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* 쿠키 안내 */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 360px; padding: 16px 18px; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20, 30, 40, .12); font-size: 0.875rem; }
.cookie[hidden] { display: none; }
.cookie__actions { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 480px) { .cookie { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* 이미지 확대 */
.zoom { max-width: min(1100px, 94vw); padding: 0; border: 0; border-radius: var(--radius); background: #fff; }
.zoom::backdrop { background: rgba(10, 16, 22, .75); }
.zoom figure { padding: 16px; }
.zoom figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--muted); }
.zoom__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 28px; background: #fff; border-radius: 50%; }

/* 서브 페이지 */
.page-head__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "crumbs crumbs" "title tools" "tabs tabs"; align-items: end; gap: 8px 24px; padding-top: 28px; }
.crumbs { grid-area: crumbs; font-size: 0.8125rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin: 0 8px; opacity: .5; }
.crumbs a { text-decoration: none; }
.page-head__title { grid-area: title; font-size: clamp(1.875rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.page-head__title span { font-family: var(--font-display); font-weight: 500; font-size: .55em; letter-spacing: 0; margin-left: 6px; color: var(--muted); }
.page-head__tools { grid-area: tools; display: flex; gap: 8px; flex-wrap: wrap; }
.siblings { grid-area: tabs; display: flex; gap: 4px; margin-top: 16px; overflow-x: auto; }
.siblings a { padding: 12px 20px; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 767px) {
  .page-head__inner { grid-template-columns: 1fr; grid-template-areas: "crumbs" "title" "tools" "tabs"; }
}

.product { padding-block: clamp(48px, 7vw, 96px); }
.product__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.product__name { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.05; }
.product__name small { display: block; margin-top: 8px; font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0; color: var(--muted); }
.product__text > p { margin-top: 20px; max-width: 60ch; }
.benefit { margin-top: 28px; }
.benefit__label { font-size: 0.9375rem; font-weight: 800; }
.benefit ul { margin-top: 10px; display: grid; gap: 6px; }
.benefit li { position: relative; padding-left: 18px; }
.benefit li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; background: var(--brand); }
@media (max-width: 767px) { .product__inner { grid-template-columns: 1fr; gap: 28px; } }

.detail { padding-bottom: clamp(64px, 8vw, 112px); }
.tabbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tabs { display: flex; overflow-x: auto; }
.tabs [role="tab"] { padding: 14px 22px; font-weight: 700; white-space: nowrap; }
.panel { padding-top: 40px; }
.panel[hidden] { display: none; }
.panel__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.panel__title:not(:first-child) { margin-top: 56px; }
.panel__lead { margin-top: 12px; max-width: 72ch; color: var(--muted); }
.diagram { display: block; margin-top: 28px; cursor: zoom-in; }
.diagram img { margin-inline: auto; }
.notes { margin-top: 28px; display: grid; gap: 8px; }
.notes div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; }
.notes dt { font-weight: 700; }
@media (max-width: 480px) { .notes div { grid-template-columns: 1fr; gap: 0; } }

.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.module h4 { font-size: 1.0625rem; font-weight: 800; }
.module ul { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); display: grid; gap: 2px; }
@media (max-width: 1023px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .modules { grid-template-columns: 1fr; } }

.screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; margin-top: 28px; }
.screens a { display: block; cursor: zoom-in; }
.screens img { width: 100%; aspect-ratio: 450 / 250; object-fit: cover; border: 1px solid var(--rule); }
.screens h4 { margin-top: 10px; font-size: 0.9375rem; font-weight: 600; }
@media (max-width: 1023px) { .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.metrics__num { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
.metrics__num em { font-style: normal; font-size: .45em; margin-left: 2px; }
.metrics h4 { margin-top: 12px; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
@media (max-width: 1023px) { .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } }
@media (max-width: 480px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.effects h4 { font-size: 1.125rem; font-weight: 800; }
.effects ul { margin-top: 12px; columns: 2; column-gap: 24px; }
.effects li { padding: 6px 0; break-inside: avoid; border-bottom: 1px solid var(--rule); }
@media (max-width: 767px) { .effects { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .effects ul { columns: 1; } }

/* 동작 줄이기: 흐름도(svg.mesflow)는 제외 — 애니메이션 효과를 꺼 둔 방문자에게도 움직이게(사용자 요청 2026-09-28) */
@media (prefers-reduced-motion: reduce) {
  :not(.mesflow, .mesflow *), ::before, ::after { animation: none !important; transition: none !important; }
}


.site-header { border-bottom: 1px solid var(--rule); }
.gnb__link:hover, .gnb__group:hover > button { color: var(--action); }
.gnb__sub { border-top: 3px solid var(--brand); }

/* 히어로: 좌측 문구 + 우측 액자형 이미지(원본 1200px을 늘리지 않는다) */
.hero { background: var(--paper); padding-block: clamp(48px, 7vw, 104px); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__text { position: relative; padding-left: 36px; }
.hero__text::before {  /* 신호 막대 — 페이지의 유일한 굵은 장식 */
  content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: calc(100% - 6px);
  background: linear-gradient(var(--brand) 0 42%, transparent 42% 46%, var(--brand) 46% 100%);
  transform-origin: top; animation: signal .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes signal { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hero__title { color: var(--ink); }
.hero__lead { color: var(--muted); }
.hero__actions .btn--ghost { color: var(--ink); border-color: var(--ink); }
.hero__actions .btn--ghost:hover { background: var(--ink); color: #fff; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius); box-shadow: 0 1px 0 var(--rule); }
@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__text { padding-left: 24px; }
  .hero__text::before { width: 8px; }
}

/* 솔루션: 설비 명판처럼 가로로 긴 줄 — 카드 격자 대신 */
.solutions .section-title--latin { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: 0; }
.plates { margin-top: 40px; border-bottom: 1px solid var(--rule); }
.plate { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: 28px; border-top: 1px solid var(--rule); }
.plate__media img { width: 100%; aspect-ratio: 458 / 285; object-fit: contain; }
.plate__name { font-size: clamp(2rem, 3.6vw, 2.875rem); }
@media (max-width: 767px) {
  .plate { grid-template-columns: 1fr; gap: 12px; }
  .plate__media { max-width: 320px; }
}

/* 서비스 */
.services { background: var(--paper); }
.service { background: var(--surface); border: 1px solid var(--rule); }
.service__body { padding: 24px 28px 28px; }

/* 서브 페이지 */
.page-head { background: var(--paper); border-bottom: 1px solid var(--rule); }
.page-head .btn--quiet { background: var(--surface); border: 1px solid var(--rule); }
.siblings { margin-bottom: -1px; }
.siblings a { color: var(--muted); border-bottom: 3px solid transparent; }
.siblings a:hover { color: var(--ink); }
.siblings a[aria-current] { color: var(--ink); border-bottom-color: var(--brand); }
@media (max-width: 479px) { .siblings { gap: 0; } .siblings a { padding: 12px 11px; } } /* 솔루션 탭이 5개(AI Agent 추가)라도 휴대폰 폭에 모두 보이게 */
.product__img { width: 100%; aspect-ratio: 458 / 285; object-fit: contain; }
.benefit__label { color: var(--ink); }

.tabbar { border-bottom: 1px solid var(--rule); align-items: center; }
.tabs [role="tab"] { color: var(--muted); border-bottom: 3px solid transparent; }
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }

.diagram img { border: 1px solid var(--rule); }
.notes { padding: 20px 24px; background: var(--paper); border-left: 4px solid var(--brand); }

.module { padding: 20px 22px; border: 1px solid var(--rule); border-top: 3px solid var(--ink); }
.metrics { border-block: 1px solid var(--rule); padding-block: 28px; }
.metrics__num { color: var(--brand); }
.metrics__num em { color: var(--ink); }
.effects section { padding: 24px 26px; background: var(--paper); }

.site-footer { border-top: 1px solid var(--rule); }
.site-footer__brand .brand__light { display: none; }

/* ===== 언어별 글꼴 ===== */
html[lang="zh-CN"] body { --font-body: "Noto Sans SC", "Pretendard Variable", "PingFang SC", "Microsoft YaHei", sans-serif; word-break: normal; line-break: strict; }
html[lang="en"] body { word-break: normal; }

/* ===== 변환된 본문(원본 콘텐츠) ===== */
.block { padding-block: clamp(40px, 6vw, 80px); }
.block + .block { padding-top: 0; }
.block--map { padding: 0; }
.block h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.block h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.35; }
.block h4 { font-size: 1.0625rem; font-weight: 700; line-height: 1.45; }
.block h2 + *, .block h3 + *, .block h4 + * { margin-top: 12px; }
.block p + p, .block p + ul, .block ul + p, .block p + .cols, .block .cols + p { margin-top: 14px; }
.block * + h2, .block * + h3 { margin-top: 40px; }
.block * + h4 { margin-top: 24px; }
.block p { max-width: 78ch; }
.block .center, .block .center p { text-align: center; margin-inline: auto; }
.block .left { text-align: left; }
.block .lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--muted); }
.block ul:not([class]) { display: grid; gap: 4px; }
.block ul:not([class]) > li { position: relative; padding-left: 16px; }
.block ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--brand); }
.block ol:not([class]) { padding-left: 1.4em; list-style: decimal; }
.block a:not(.btn) { color: var(--action); text-underline-offset: 3px; }
.block header { margin-bottom: 32px; }
.block header.center, .block header .center { text-align: center; }
.i { font-style: normal; font-weight: 500; font-size: .6em; color: var(--muted); letter-spacing: 0; }
.block h2 .i { display: inline-block; margin-left: 6px; font-family: var(--font-body); }

.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(12px, 2.4vw, 32px); align-items: start; } /* 12칸 간격 합이 좁은 화면 폭을 넘지 않게 */
.cols + .cols { margin-top: 32px; }
.cols > :not(.col) { grid-column: 1 / -1; } /* 칸(col) 없이 격자에 바로 들어온 요소는 한 줄 전체 */
.col { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) {
  .span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
  .span-9 { grid-column: span 9; } .span-10 { grid-column: span 10; } .span-11 { grid-column: span 11; } .span-12 { grid-column: span 12; }
}
@media (min-width: 560px) and (max-width: 767px) { .span-2, .span-3, .span-4 { grid-column: span 6; } }

.figure { margin: 0; }
.figure img, .block picture img { margin-inline: auto; }
.block .figure + * { margin-top: 20px; }
.thumb img { border: 1px solid var(--rule); }
.caption { margin-top: 8px; font-size: .9375rem; font-weight: 600; }
.subtitle { padding-left: 14px; border-left: 4px solid var(--brand); }
.heading { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }

.badge { display: inline-block; padding: 1px 9px; margin-right: 6px; border-radius: var(--radius); background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; vertical-align: 2px; line-height: 1.6; }

.boxlist { height: 100%; padding: 22px 24px; background: var(--paper); border-top: 3px solid var(--ink); }
.boxlist h4 { margin-top: 0; }
.boxlist hr { border: 0; border-top: 1px solid var(--rule); margin: 12px 0; }
.boxlist ul { display: grid; gap: 2px; }
.boxlist li { padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.boxlist li:last-child { border-bottom: 0; }
.software ul li::before { display: none; }

blockquote { margin: 0 0 32px; padding: 20px 28px; border-left: 4px solid var(--brand); background: var(--paper); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 600; }

.timeline { position: relative; display: grid; gap: 8px; margin-top: 32px; }
.timeline__year { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-top: 1px solid var(--rule); }
.timeline__year > h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.1; color: var(--ink); }
.timeline__items { display: grid; gap: 8px; }
.timeline__items > li { position: relative; padding-left: 48px; }
.timeline__month { position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand); }
@media (max-width: 560px) { .timeline__year { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; margin-top: 16px; }
.table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { padding: 12px 14px; border: 1px solid var(--rule); vertical-align: top; text-align: left; }
.table th { background: var(--paper); font-weight: 700; white-space: nowrap; }
.table ul { display: grid; gap: 2px; }

.info-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; }
.info-list dt { font-weight: 700; }
.info-list dd { margin: 0; }
@media (max-width: 560px) { .info-list { grid-template-columns: 1fr; gap: 2px; } .info-list dd { margin-bottom: 10px; } }
.meta-list { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--muted); font-size: .9375rem; }

.map { position: relative; height: clamp(320px, 45vh, 480px); background: var(--paper); }
.map picture, .map > img { position: absolute; inset: 0; }
.map img { width: 100%; height: 100%; object-fit: cover; }
.map.is-live picture, .map.is-live > img { display: none; }

iframe.embed { display: block; width: 100%; min-height: 70vh; border: 1px solid var(--rule); }
.block video { width: 100%; max-width: 960px; margin-inline: auto; background: #000; }

/* 폼 */
.form { margin-top: 8px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.form__field--wide { grid-column: 1 / -1; }
.form label { display: block; margin-bottom: 6px; font-weight: 700; font-size: .9375rem; }
.form input[type=text], .form input[type=email], .form input[type=date], .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #B9C2CB; border-radius: var(--radius); background: #fff; font: inherit; color: var(--ink);
}
.form textarea { min-height: 200px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
.form__help { margin-top: 4px; font-size: .8125rem; color: var(--muted); }
.form__error { margin-top: 6px; font-size: .875rem; font-weight: 600; color: var(--action); }
.form [aria-invalid="true"] { border-color: var(--action); }
.form__errors { margin-bottom: 20px; padding: 14px 18px; border-left: 4px solid var(--action); background: #FDF0EE; }
.form__actions { margin-top: 28px; display: flex; justify-content: center; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__notes { margin-top: 16px; font-size: .875rem; color: var(--muted); }
@media (max-width: 767px) { .form__grid { grid-template-columns: 1fr; } }

/* 페이지 머리 도구 버튼 아이콘 */
.page-head__tools .btn svg { width: 16px; height: 16px; }
.map__canvas { position: absolute; inset: 0; }
.gnb__link.is-current { color: var(--ink); box-shadow: inset 0 -3px 0 var(--brand); }
.error-page { min-height: 40vh; }
.error-page .lead { margin-top: 12px; }
.error-page__action { margin-top: 24px; }
.is-zoomable { cursor: zoom-in; }
.zoom img { max-height: 80vh; width: auto; margin-inline: auto; }

/* 히어로 제목: 단어 중간에서 줄바꿈하지 않고(FACTOR/Y 방지), 글자 크기는 화면이 아니라 제목 칸 폭에 맞춘다 */
.hero__text { container-type: inline-size; }
.hero__title { overflow-wrap: normal; word-break: normal; hyphens: none; }
@supports (font-size: 1cqi) {
  .hero__title { font-size: clamp(2.75rem, 22cqi, 6.75rem); } /* FACTORY(약 4em 폭)가 칸 안에 들어가는 크기 */
}

/* 오시는길 대체 지도(기존 사이트의 지도 캡처 565×421): 늘리거나 잘라내지 않고 원래 크기로 가운데 — 회사 위치 핀이 보이게 */
.map { display: grid; place-items: center; }
.map picture, .map > img { position: static; inset: auto; }
.map picture img, .map > img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.map picture { height: 100%; width: 100%; display: grid; place-items: center; }
.map picture img, .map > img { max-height: clamp(320px, 45vh, 480px); } /* .map 높이와 같은 공식 — 부모 기준 %는 계산되지 않는다 */

/* ===== MES 생산현장 정보 흐름 애니메이션(sol_mes 왼쪽 그림, tools/make_mes_flow.py) ===== */
/* mesflow:start — tools/make_mes_flow.py 가 생성(직접 고치지 말 것)
   생산라인 3초 주기: 0~1.8초 정지(가공) · 1.8~3초 한 칸(2.1칸) 이동. 제품 하나는 12초에 투입→프레스→용접→검사 */
.mesflow { display: block; width: 100%; height: auto; font-family: var(--font-body); overflow: visible; }
.mesflow text { font-family: var(--font-body); }
.mesflow .belt { stroke-dasharray: 6 9.225; animation: mf-belt 3s infinite; }
@keyframes mf-belt { 0%, 60% { stroke-dashoffset: 0; animation-timing-function: ease-in-out; } 100% { stroke-dashoffset: -60.90; } }
.mesflow .prod { animation: mf-prod 12s infinite; }
.mesflow .pv { animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite; }
.mesflow .pv-raw { animation-name: mf-pv-raw; } .mesflow .pv-mid { animation-name: mf-pv-mid; }
.mesflow .pv-done { animation-name: mf-pv-done; } .mesflow .pv-ok { animation-name: mf-pv-ok; }
.mesflow .prod1, .mesflow .prod1 .pv { animation-delay: -3s; }
.mesflow .prod2, .mesflow .prod2 .pv { animation-delay: -6s; }
.mesflow .prod3, .mesflow .prod3 .pv { animation-delay: -9s; }
@keyframes mf-prod {
  0% { transform: translate(0px, -12px); opacity: 0; }
  4% { transform: translate(0px, 0px); opacity: 1; }
  15% { transform: translate(0px, 0px); animation-timing-function: ease-in-out; }
  25% { transform: translate(52.74px, 30.45px); }
  40% { transform: translate(52.74px, 30.45px); animation-timing-function: ease-in-out; }
  50% { transform: translate(105.48px, 60.90px); }
  65% { transform: translate(105.48px, 60.90px); animation-timing-function: ease-in-out; }
  75% { transform: translate(158.22px, 91.35px); }
  88% { transform: translate(158.22px, 91.35px); opacity: 1; }
  96%, 100% { transform: translate(158.22px, 77.35px); opacity: 0; }
}
@keyframes mf-pv-raw { 0%, 29.4% { opacity: 1; } 29.5%, 100% { opacity: 0; } } /* 프레스가 찍는 순간(3.54초)에 바뀐다 */
@keyframes mf-pv-mid { 0%, 29.4% { opacity: 0; } 29.5%, 59.9% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes mf-pv-done { 0%, 59.9% { opacity: 0; } 60%, 100% { opacity: 1; } } /* 용접 중(7.2초)에 바뀐다 */
@keyframes mf-pv-ok { 0%, 82.9% { opacity: 0; } 83%, 100% { opacity: 1; } } /* 검사 위치에서 PDA 스캔 뒤 합격 */
.mesflow .ram { animation: mf-ram 3s infinite; }
@keyframes mf-ram { 0%, 8% { transform: translateY(0px); animation-timing-function: ease-in; } 18%, 30% { transform: translateY(9.0px); animation-timing-function: ease-out; } 45%, 100% { transform: translateY(0px); } }
.mesflow .hit { transform-box: fill-box; transform-origin: center; animation: mf-hit 3s ease-out infinite; }
@keyframes mf-hit { 0%, 17% { opacity: 0; transform: scale(.5); } 19% { opacity: 1; transform: scale(1); } 34%, 100% { opacity: 0; transform: scale(1.8); } }
.mesflow .weld { animation: mf-weld 3s infinite; }
@keyframes mf-weld { 0%, 11% { opacity: 0; } 13% { opacity: 1; } 19% { opacity: .35; } 25% { opacity: 1; } 31% { opacity: .4; } 37% { opacity: 1; } 43% { opacity: .5; } 48%, 100% { opacity: 0; } }
.mesflow .spark { transform-box: fill-box; transform-origin: 50% 100%; animation: mf-spark .3s linear infinite alternate; }
@keyframes mf-spark { from { transform: scale(.55); } to { transform: scale(1.25); } }
.mesflow .prog { transform-box: fill-box; transform-origin: 100% 50%; animation: mf-prog 3s infinite; }
@keyframes mf-prog { 0%, 4% { transform: scaleX(0); } 48%, 58% { transform: scaleX(1); } 60%, 100% { transform: scaleX(0); } }
.mesflow .lamp-g { animation: mf-blink 1.4s steps(1) infinite; }
.mesflow .lamp-g.m2 { animation-delay: -.7s; }
.mesflow .led, .mesflow .live { animation: mf-blink 1.1s steps(1) infinite; }
.mesflow .led1 { animation-delay: -.3s; } .mesflow .led2 { animation-delay: -.6s; } .mesflow .led3 { animation-delay: -.9s; }
@keyframes mf-blink { 50% { opacity: .25; } }
.mesflow .arm { transform-box: fill-box; transform-origin: 20% 10%; animation: mf-arm 1.6s ease-in-out infinite alternate; }
.mesflow .arm3 { animation-duration: 1.9s; animation-delay: -.8s; }
@keyframes mf-arm { to { transform: rotate(-14deg); } }
.mesflow .scan { animation: mf-scan 1.2s ease-in-out infinite alternate; }
@keyframes mf-scan { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
.mesflow .tick { opacity: 0; animation: mf-tick 5.4s ease infinite; }
.mesflow .tick1 { animation-delay: .6s; } .mesflow .tick2 { animation-delay: 1.2s; }
@keyframes mf-tick { 0%, 15% { opacity: 0; } 25%, 85% { opacity: 1; } 100% { opacity: 0; } }
.mesflow .chart { stroke-dasharray: 90; animation: mf-draw 3s ease-in-out infinite; }
@keyframes mf-draw { 0% { stroke-dashoffset: 90; } 60%, 100% { stroke-dashoffset: 0; } }
.mesflow .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: mf-bar 3s ease-in-out infinite alternate; }
.mesflow .bar1 { animation-duration: 2.6s; animation-delay: -1.1s; } .mesflow .bar2 { animation-duration: 3.4s; animation-delay: -.4s; }
.mesflow .bar3 { animation-duration: 2.2s; animation-delay: -1.7s; } .mesflow .bar4 { animation-duration: 3.8s; animation-delay: -2.3s; }
@keyframes mf-bar { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.mesflow .ring { transform-box: fill-box; transform-origin: center; animation: mf-ring 3.2s ease-out infinite; }
.mesflow .ring-erp { animation-delay: -.8s; } /* ERP에 실적 점이 도착할 때(3.2초 주기) */
.mesflow .ring-mes { animation-duration: 2.4s; animation-delay: -1.5s; } /* fastMES에 LOT 점이 도착할 때 */
@keyframes mf-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.mesflow .orbit { stroke-dasharray: 4 10; animation: mf-orbit 1.4s linear infinite; }
@keyframes mf-orbit { to { stroke-dashoffset: -28; } }
.mesflow .lot { transform-box: fill-box; transform-origin: center; animation: mf-lot 1.2s ease-in-out infinite; }
@keyframes mf-lot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.mesflow.is-paused, .mesflow.is-paused * { animation-play-state: paused !important; }
/* mesflow:end */
/* wmsflow:start — tools/make_wms_flow.py 가 생성(직접 고치지 말 것). 한 주기 16초(라인출고 8초) */
.wmsflow .w-f1, .wmsflow .w-f1-fork, .wmsflow .w-pick, .wmsflow .w-f2, .wmsflow .w-f2-fork, .wmsflow .w-line { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.wmsflow .w-rcv, .wmsflow .w-rcv-ok, .wmsflow .w-f1-load, .wmsflow .w-slot, .wmsflow .w-pk, .wmsflow .w-cb, .wmsflow .w-pal, .wmsflow .w-pal-add, .wmsflow .w-pal-wrap, .wmsflow .w-pal-ok, .wmsflow .w-f2-load, .wmsflow .w-truck-new, .wmsflow .w-doc { animation-duration: 16s; animation-iteration-count: infinite; animation-timing-function: linear; }
.wmsflow .w-line, .wmsflow .w-lb, .wmsflow .w-conv { animation-duration: 8s; }
.wmsflow .w-lb, .wmsflow .w-conv { animation-iteration-count: infinite; animation-timing-function: linear; }
.wmsflow .w-f1 { animation-name: w-f1; } .wmsflow .w-f1-fork { animation-name: w-f1-fork; } .wmsflow .w-f1-load { animation-name: w-f1-load; }
.wmsflow .w-rcv { animation-name: w-rcv; } .wmsflow .w-rcv-ok { animation-name: w-rcv-ok; } .wmsflow .w-slot { animation-name: w-slot; }
.wmsflow .w-pick { animation-name: w-pick; } .wmsflow .w-pk1 { animation-name: w-pk1; } .wmsflow .w-pk2 { animation-name: w-pk2; }
.wmsflow .w-cb0 { animation-name: w-cb0; } .wmsflow .w-cb1 { animation-name: w-cb1; }
.wmsflow .w-pal { animation-name: w-pal; } .wmsflow .w-pal-add { animation-name: w-pal-add; } .wmsflow .w-pal-wrap { animation-name: w-pal-wrap; } .wmsflow .w-pal-ok { animation-name: w-pal-ok; }
.wmsflow .w-f2 { animation-name: w-f2; } .wmsflow .w-f2-fork { animation-name: w-f2-fork; } .wmsflow .w-f2-load { animation-name: w-f2-load; } .wmsflow .w-truck-new { animation-name: w-truck-new; }
.wmsflow .w-line { animation-name: w-line; } .wmsflow .w-lb { animation-name: w-lb; } .wmsflow .w-conv { animation-name: w-conv; }
.wmsflow .w-doc { animation-name: w-doc; transform-box: fill-box; transform-origin: center; }
.wmsflow .w-belt { stroke-dasharray: 5 7; animation: w-belt .8s linear infinite; }
@keyframes w-belt { to { stroke-dashoffset: -12; } }
.wmsflow .w-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: 16s linear infinite; }
.wmsflow .w-ring-rcv { animation-name: w-ring-rcv; } .wmsflow .w-ring-pick { animation-name: w-ring-pick; } .wmsflow .w-ring-dock { animation-name: w-ring-dock; }
.wmsflow .w-ring-line { animation-name: w-ring-line; animation-duration: 8s; }
@keyframes w-f1 { 0.000% { transform: translate(0.00px, 0.00px); } 15.625% { transform: translate(0.00px, 0.00px); } 25.000% { transform: translate(21.82px, -12.60px); } 43.750% { transform: translate(67.90px, -39.20px); } 50.000% { transform: translate(67.90px, -39.20px); } 56.250% { transform: translate(95.78px, -55.30px); } 59.375% { transform: translate(95.78px, -55.30px); } 65.625% { transform: translate(67.90px, -39.20px); } 71.875% { transform: translate(67.90px, -39.20px); } 93.750% { transform: translate(0.00px, 0.00px); } 100.000% { transform: translate(0.00px, 0.00px); } }
@keyframes w-f1-fork { 0.000% { transform: translate(0px, 0.00px); } 43.750% { transform: translate(0px, 0.00px); } 50.000% { transform: translate(0px, -28.00px); } 56.250% { transform: translate(0px, -28.00px); } 59.375% { transform: translate(0px, -26.60px); } 65.625% { transform: translate(0px, -26.60px); } 71.875% { transform: translate(0px, 0.00px); } 100.000% { transform: translate(0px, 0.00px); } }
@keyframes w-pick { 0.000% { transform: translate(0.00px, 0.00px); } 12.500% { transform: translate(0.00px, 0.00px); } 21.875% { transform: translate(35.16px, 20.30px); } 28.125% { transform: translate(35.16px, 20.30px); } 43.750% { transform: translate(117.00px, 67.55px); } 55.000% { transform: translate(117.00px, 67.55px); } 78.125% { transform: translate(0.00px, 0.00px); } 100.000% { transform: translate(0.00px, 0.00px); } }
@keyframes w-f2 { 0.000% { transform: translate(0.00px, 0.00px); } 57.500% { transform: translate(0.00px, 0.00px); } 62.500% { transform: translate(25.46px, 14.70px); } 75.000% { transform: translate(72.75px, 42.00px); } 78.750% { transform: translate(72.75px, 42.00px); } 82.500% { transform: translate(101.84px, 58.80px); } 84.375% { transform: translate(101.84px, 58.80px); } 87.500% { transform: translate(72.75px, 42.00px); } 90.625% { transform: translate(72.75px, 42.00px); } 100.000% { transform: translate(0.00px, 0.00px); } }
@keyframes w-f2-fork { 0.000% { transform: translate(0px, 0.00px); } 75.000% { transform: translate(0px, 0.00px); } 78.750% { transform: translate(0px, -28.00px); } 82.500% { transform: translate(0px, -28.00px); } 84.375% { transform: translate(0px, -26.60px); } 87.500% { transform: translate(0px, -26.60px); } 90.625% { transform: translate(0px, 0.00px); } 100.000% { transform: translate(0px, 0.00px); } }
@keyframes w-line { 0.000% { transform: translate(0.00px, 0.00px); } 6.250% { transform: translate(0.00px, 0.00px); } 37.500% { transform: translate(-48.50px, 28.00px); } 47.500% { transform: translate(-48.50px, 28.00px); } 78.750% { transform: translate(0.00px, 0.00px); } 100.000% { transform: translate(0.00px, 0.00px); } }
@keyframes w-rcv { 0% { opacity: 0; transform: translate(0px, -14px); } 5% { opacity: 1; transform: translate(0px, 0px); } 24.99% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes w-rcv-ok { 0.000% { opacity: 0; } 11.250% { opacity: 0; } 11.312% { opacity: 1; } 25.000% { opacity: 1; } 25.062% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-f1-load { 0.000% { opacity: 0; } 25.000% { opacity: 0; } 25.062% { opacity: 1; } 59.375% { opacity: 1; } 59.438% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-slot { 0.000% { opacity: 0; } 59.375% { opacity: 0; } 59.438% { opacity: 1; } 95.625% { opacity: 1; } 100.000% { opacity: 0; } }
@keyframes w-pk1 { 0.000% { opacity: 1; } 9.375% { opacity: 1; } 9.438% { opacity: 0; } 93.750% { opacity: 0; } 100.000% { opacity: 1; } }
@keyframes w-pk2 { 0.000% { opacity: 1; } 25.000% { opacity: 1; } 25.062% { opacity: 0; } 93.750% { opacity: 0; } 100.000% { opacity: 1; } }
@keyframes w-cb0 { 0.000% { opacity: 0; } 9.375% { opacity: 0; } 9.438% { opacity: 1; } 47.500% { opacity: 1; } 47.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-cb1 { 0.000% { opacity: 0; } 25.000% { opacity: 0; } 25.062% { opacity: 1; } 47.500% { opacity: 1; } 47.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-pal { 0% { opacity: 0; transform: translate(0px, -14px); } 3% { opacity: 1; transform: translate(0px, 0px); } 62.49% { opacity: 1; } 62.5%, 100% { opacity: 0; } }
@keyframes w-pal-add { 0.000% { opacity: 0; } 47.500% { opacity: 0; } 47.562% { opacity: 1; } 62.500% { opacity: 1; } 62.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-pal-wrap { 0.000% { opacity: 0; } 53.750% { opacity: 0; } 53.812% { opacity: 1; } 62.500% { opacity: 1; } 62.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-pal-ok { 0.000% { opacity: 0; } 52.500% { opacity: 0; } 52.562% { opacity: 1; } 62.500% { opacity: 1; } 62.562% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-f2-load { 0.000% { opacity: 0; } 62.500% { opacity: 0; } 62.562% { opacity: 1; } 84.375% { opacity: 1; } 84.438% { opacity: 0; } 100.000% { opacity: 0; } }
@keyframes w-truck-new { 0.000% { opacity: 0; } 84.375% { opacity: 0; } 84.438% { opacity: 1; } 96.250% { opacity: 1; } 100.000% { opacity: 0; } }
@keyframes w-lb { 0% { opacity: 0; transform: translate(0px, -10px); } 5% { opacity: 1; transform: translate(0px, 0px); } 42.49% { opacity: 1; } 42.5%, 100% { opacity: 0; } }
@keyframes w-conv { 0%, 42.49% { opacity: 0; transform: translate(0px, 0px); } 42.5% { opacity: 1; transform: translate(0px, 0px); } 70% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate(19.40px, 11.20px); } }
@keyframes w-doc { 0% { opacity: 0; transform: translate(0px, 0px); } 1.5% { opacity: 1; transform: translate(0px, 0px); } 7% { opacity: 1; transform: translate(-199.4px, 218.8px) scale(.8); } 8.5%, 100% { opacity: 0; transform: translate(-199.4px, 218.8px) scale(.8); } }
@keyframes w-ring-rcv { 0% { opacity: 0; transform: scale(.5); } 8.688% { opacity: 0; transform: scale(.5); } 8.750% { opacity: 1; transform: scale(.6); } 12.500% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes w-ring-pick { 0% { opacity: 0; transform: scale(.5); } 6.188% { opacity: 0; transform: scale(.5); } 6.250% { opacity: 1; transform: scale(.6); } 10.000% { opacity: 0; transform: scale(1.7); } 22.438% { opacity: 0; transform: scale(.5); } 22.500% { opacity: 1; transform: scale(.6); } 26.250% { opacity: 0; transform: scale(1.7); } 49.938% { opacity: 0; transform: scale(.5); } 50.000% { opacity: 1; transform: scale(.6); } 53.750% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes w-ring-dock { 0% { opacity: 0; transform: scale(.5); } 84.938% { opacity: 0; transform: scale(.5); } 85.000% { opacity: 1; transform: scale(.6); } 88.750% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes w-ring-line { 0% { opacity: 0; transform: scale(.5); } 37.375% { opacity: 0; transform: scale(.5); } 37.500% { opacity: 1; transform: scale(.6); } 45.000% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
/* wmsflow:end */
/* hmiflow:start — tools/make_hmi_flow.py 가 생성(직접 고치지 말 것). 알람 시나리오 12초 */
.hmiflow .h-flow { stroke-dasharray: 4 6; animation: h-flow .7s linear infinite; }
.hmiflow .h-belt { stroke-dasharray: 5 7; animation: h-belt 0.59s linear infinite; }
@keyframes h-belt { to { stroke-dashoffset: -12; } }
.hmiflow .h-powder { stroke-dasharray: 2 5; animation-duration: 1.2s; }
@keyframes h-flow { to { stroke-dashoffset: -10; } }
.hmiflow .h-in { animation-name: h-flow, h-in; animation-duration: .7s, 12s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes h-in { 0%, 58.33% { opacity: 1; } 58.75%, 87.50% { opacity: 0; } 87.92%, 100% { opacity: 1; } }
.hmiflow .h-vo, .hmiflow .h-vc { animation: 12s linear infinite; } .hmiflow .h-vo { animation-name: h-vo; } .hmiflow .h-vc { animation-name: h-vc; }
@keyframes h-vo { 0%, 58.33% { opacity: 1; } 58.75%, 87.50% { opacity: 0; } 87.92%, 100% { opacity: 1; } }
@keyframes h-vc { 0%, 58.33% { opacity: 0; } 58.75%, 87.50% { opacity: 1; } 87.92%, 100% { opacity: 0; } }
.hmiflow .h-lv { transform-box: fill-box; transform-origin: 50% 100%; }
.hmiflow .h-lv1 { animation: h-lv1 4s ease-in-out infinite alternate; }
@keyframes h-lv1 { from { transform: scaleY(.55); } to { transform: scaleY(.7); } }
.hmiflow .h-lv2 { animation: h-lv2 12s ease-in-out infinite; }
@keyframes h-lv2 { 0% { transform: scaleY(.55); } 56.67%, 60.00% { transform: scaleY(.97); } 95.83%, 100% { transform: scaleY(.55); } }
.hmiflow .h-silo { transform-box: fill-box; transform-origin: 50% 100%; animation: h-silo 12s ease-in-out infinite alternate; }
@keyframes h-silo { from { transform: scaleY(.85); } to { transform: scaleY(.55); } }
.hmiflow .h-beacon, .hmiflow .h-al, .hmiflow .h-alrow, .hmiflow .h-banner { opacity: 0; animation: 12s steps(1) infinite; }
.hmiflow .h-beacon { animation-name: h-alarm; } .hmiflow .h-al { animation-name: h-al; } .hmiflow .h-alrow, .hmiflow .h-banner { animation-name: h-alarm; }
@keyframes h-alarm { 41.67% { opacity: 1; } 45.83% { opacity: 0.25; } 50.00% { opacity: 1; } 54.17% { opacity: 0.25; } 58.33% { opacity: 1; } 62.50% { opacity: 0.25; } 66.67% { opacity: 1; } 70.83% { opacity: 0.25; } 0%, 41.58%, 75.00%, 100% { opacity: 0; } }
@keyframes h-al { 0%, 41.58% { opacity: 0; } 41.67%, 74.92% { opacity: 1; } 75.00%, 100% { opacity: 0; } }
.hmiflow .h-press { transform-box: fill-box; transform-origin: 50% 0%; animation: h-press 12s ease-in-out infinite; }
@keyframes h-press { 0%, 46.67% { transform: rotate(0deg); } 50.83%, 55.00% { transform: rotate(-150deg); } 59.17%, 100% { transform: rotate(0deg); } }
.hmiflow .h-spin { transform-box: fill-box; transform-origin: center; animation: h-spin .9s linear infinite; }
@keyframes h-spin { to { transform: rotate(360deg); } }
.hmiflow .h-needle { transform-box: fill-box; transform-origin: 50% 100%; animation: h-needle 2.4s ease-in-out infinite alternate; }
@keyframes h-needle { from { transform: rotate(-35deg); } to { transform: rotate(40deg); } }
.hmiflow .h-fm { transform-box: fill-box; transform-origin: 0 50%; animation: h-fm 1.6s ease-in-out infinite alternate; }
@keyframes h-fm { from { transform: scaleX(.4); } to { transform: scaleX(1); } }
.hmiflow .h-v { opacity: 0; animation: h-v 6s steps(1) infinite; } .hmiflow .h-v1 { animation-delay: -4s; } .hmiflow .h-v2 { animation-delay: -2s; }
@keyframes h-v { 0% { opacity: 1; } 33.33% { opacity: 0; } }
.hmiflow .h-bot { animation: h-bot 10s linear infinite; }
.hmiflow .h-be, .hmiflow .h-bf { animation: 10s linear infinite; } .hmiflow .h-be { animation-name: h-be; } .hmiflow .h-bf { animation-name: h-bf; }
.hmiflow .h-bot1, .hmiflow .h-bot1 .h-be, .hmiflow .h-bot1 .h-bf { animation-delay: -2.0s; } .hmiflow .h-bot2, .hmiflow .h-bot2 .h-be, .hmiflow .h-bot2 .h-bf { animation-delay: -4.0s; } .hmiflow .h-bot3, .hmiflow .h-bot3 .h-be, .hmiflow .h-bot3 .h-bf { animation-delay: -6.0s; } .hmiflow .h-bot4, .hmiflow .h-bot4 .h-be, .hmiflow .h-bot4 .h-bf { animation-delay: -8.0s; }
@keyframes h-bot { 0% { transform: translate(0px, 0px); opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translate(177.02px, 102.20px); opacity: 0; } }
@keyframes h-be { 0%, 20.55% { opacity: 1; } 20.65%, 100% { opacity: 0; } }
@keyframes h-bf { 0%, 20.55% { opacity: 0; } 20.65%, 100% { opacity: 1; } }
.hmiflow .h-eye { opacity: .15; animation: h-eye 2s linear infinite; animation-delay: 0.63s; }
@keyframes h-eye { 0%, 8% { opacity: 1; } 12%, 100% { opacity: .15; } }
.hmiflow .h-plus { opacity: 0; animation: h-plus 2s ease-out infinite; animation-delay: 0.63s; }
@keyframes h-plus { 0% { opacity: 1; transform: translateY(0px); } 40%, 100% { opacity: 0; transform: translateY(-12px); } }
/* hmiflow:end */
/* himbflow:start — tools/make_himb_flow.py 가 생성(직접 고치지 말 것) */
.himbflow .b-v { opacity: 0; animation: b-v 6s steps(1) infinite; } .himbflow .b-v1 { animation-delay: -4s; } .himbflow .b-v2 { animation-delay: -2s; }
@keyframes b-v { 0% { opacity: 1; } 33.33% { opacity: 0; } }
.himbflow .b-needle { transform-box: fill-box; transform-origin: 50% 100%; animation: b-needle 2.6s ease-in-out infinite alternate; }
@keyframes b-needle { from { transform: rotate(-50deg); } to { transform: rotate(45deg); } }
.himbflow .b-donut { transform-box: fill-box; transform-origin: center; animation: b-spin 8s linear infinite; }
@keyframes b-spin { to { transform: rotate(360deg); } }
.himbflow .b-card { animation: b-float 3s ease-in-out infinite alternate; } .himbflow .b-card1 { animation-delay: -1s; } .himbflow .b-card2 { animation-delay: -2s; }
@keyframes b-float { from { transform: translateY(3px); } to { transform: translateY(-4px); } }
.himbflow .b-merge { animation: b-merge 1.3s ease-in-out infinite alternate; }
@keyframes b-merge { from { opacity: .55; } to { opacity: 1; } }
/* himbflow:end */
/* aiflow:start — tools/make_ai_flow.py 가 생성(직접 고치지 말 것) */
.aiflow .ai-node { transform-box: fill-box; transform-origin: center; animation: ai-node 1.6s ease-in-out infinite alternate; }
.aiflow .ai-node1 { animation-delay: -.4s; } .aiflow .ai-node2 { animation-delay: -.8s; } .aiflow .ai-node3 { animation-delay: -1.2s; }
@keyframes ai-node { from { transform: scale(.75); opacity: .55; } to { transform: scale(1.25); opacity: 1; } }
.aiflow .ai-net { animation: ai-float 3.2s ease-in-out infinite alternate; }
@keyframes ai-float { from { transform: translateY(2px); } to { transform: translateY(-4px); } }
.aiflow .ai-alert { animation: ai-alert 1.2s steps(1) infinite; }
@keyframes ai-alert { 50% { opacity: .15; } }
.aiflow .ai-card { animation: ai-card 6s ease-in-out infinite; }
@keyframes ai-card { 0%, 25% { transform: translate(0px, 0px); } 40%, 60% { transform: translate(16.5px, 7px); } 75%, 100% { transform: translate(33px, 14px); } }
.aiflow .ai-type { transform-box: fill-box; transform-origin: 0 50%; animation: ai-type 4s ease-out infinite; }
.aiflow .ai-type1 { animation-name: ai-type1; } .aiflow .ai-type2 { animation-name: ai-type2; }
@keyframes ai-type { 0% { transform: scaleX(0); } 20%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ai-type1 { 0%, 20% { transform: scaleX(0); } 40%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ai-type2 { 0%, 40% { transform: scaleX(0); } 60%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.aiflow .ai-wrench { transform-box: fill-box; transform-origin: 20% 80%; animation: ai-wrench .8s ease-in-out infinite alternate; }
@keyframes ai-wrench { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.aiflow .ai-ok { transform-box: fill-box; transform-origin: center; animation: ai-ok 4s ease-out infinite; }
@keyframes ai-ok { 0%, 45% { opacity: 0; transform: scale(.4); } 55%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.aiflow .ai-tag { transform-box: fill-box; transform-origin: 50% 100%; animation: ai-tag 4.5s ease-out infinite; }
.aiflow .ai-tag1 { animation-name: ai-tag1; } .aiflow .ai-tag2 { animation-name: ai-tag2; }
@keyframes ai-tag { 0% { opacity: 0; transform: scale(.3); } 12%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ai-tag1 { 0%, 20% { opacity: 0; transform: scale(.3); } 32%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ai-tag2 { 0%, 40% { opacity: 0; transform: scale(.3); } 52%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.aiflow .ai-dot { animation: ai-dot .9s ease-in-out infinite alternate; } .aiflow .ai-dot1 { animation-delay: -.3s; } .aiflow .ai-dot2 { animation-delay: -.6s; }
@keyframes ai-dot { from { transform: translateY(1.5px); opacity: .5; } to { transform: translateY(-1.5px); opacity: 1; } }
.aiflow .ai-join { animation: ai-join 5s ease-out infinite; }
@keyframes ai-join { 0%, 15% { opacity: 0; transform: translateX(12px); } 30%, 90% { opacity: 1; transform: translateX(0px); } 100% { opacity: 0; transform: translateX(0px); } }
/* aiflow:end */

/* 솔루션 주요 기능 카드(AI 에이전트 페이지) */
.feats-head { margin-top: clamp(40px, 6vw, 72px); padding-bottom: 12px; }
.feats { margin-top: 24px; }
.feat { border-top: 2px solid var(--ink); padding-top: 14px; }
.feat h4 { font-size: 1.0625rem; font-weight: 800; line-height: 1.4; }
.feat p { margin-top: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.65; }

/* 접수 완료 페이지(원본 row에 칸 없이 아이콘·문구·버튼만 있음) — 가운데 정렬 묶음 */
.done { display: grid; justify-items: center; text-align: center; padding-block: clamp(16px, 4vw, 48px); }
.done .figure img { width: min(240px, 60vw); height: auto; }
.block .done h2 { max-width: 44ch; margin-top: 8px; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.55; }
.block .done h2 + * { margin-top: 28px; }

/* 유지보수 신청: 입력 폼 대신 외부 시스템 링크(as.haesol.net, 2026-09-27) */
.as-link { display: grid; justify-items: center; gap: 16px; max-width: 720px; margin: 24px auto 0; padding: clamp(28px, 5vw, 48px) 20px; text-align: center; background: var(--paper); border: 1px solid var(--rule); }
.as-link p { max-width: 48ch; }
.as-link .as-link__url { color: var(--muted); font-size: .875rem; }
/* semiflow:start — tools/make_semi_flow.py 가 생성(직접 고치지 말 것). 전공정 22초(설비 4대 × 5초 + 돌아오기), 층 표시 66초, 후공정 3초 한 칸 */
.semiflow .sf-op { animation: sf-op 22s ease-in-out infinite; }
@keyframes sf-op { 0.00% { transform: translate(0.00px, 0.00px); } 18.64% { transform: translate(0.00px, 0.00px); } 22.73% { transform: translate(50.49px, 29.15px); } 41.36% { transform: translate(50.49px, 29.15px); } 45.45% { transform: translate(100.98px, 58.30px); } 64.09% { transform: translate(100.98px, 58.30px); } 68.18% { transform: translate(151.47px, 87.45px); } 86.82% { transform: translate(151.47px, 87.45px); } 100.00% { transform: translate(0.00px, 0.00px); } }
.semiflow .sf-hand { animation: sf-hand 22s linear infinite; }
@keyframes sf-hand { 0.00% { opacity: 1; } 1.14% { opacity: 1; } 1.68% { opacity: 0; } 18.18% { opacity: 0; } 18.73% { opacity: 1; } 23.86% { opacity: 1; } 24.41% { opacity: 0; } 40.91% { opacity: 0; } 41.45% { opacity: 1; } 46.59% { opacity: 1; } 47.14% { opacity: 0; } 63.64% { opacity: 0; } 64.18% { opacity: 1; } 69.32% { opacity: 1; } 69.86% { opacity: 0; } 86.36% { opacity: 0; } 86.91% { opacity: 1; } 100.00% { opacity: 1; } }
.semiflow .sf-pop, .semiflow .sf-tpop { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation-duration: 22s; animation-iteration-count: infinite; animation-timing-function: ease-out; }
.semiflow .sf-pop-in { animation-name: sf-pop-in; } .semiflow .sf-pop-out { animation-name: sf-pop-out; }
@keyframes sf-pop-in { 0.00% { opacity: 0; transform: scale(.6); } 2.27% { opacity: 0; transform: scale(.6); } 3.09% { opacity: 1; transform: scale(1); } 7.27% { opacity: 1; transform: scale(1); } 8.09% { opacity: 0; transform: scale(.6); } 25.00% { opacity: 0; transform: scale(.6); } 25.82% { opacity: 1; transform: scale(1); } 30.00% { opacity: 1; transform: scale(1); } 30.82% { opacity: 0; transform: scale(.6); } 47.73% { opacity: 0; transform: scale(.6); } 48.55% { opacity: 1; transform: scale(1); } 52.73% { opacity: 1; transform: scale(1); } 53.55% { opacity: 0; transform: scale(.6); } 70.45% { opacity: 0; transform: scale(.6); } 71.27% { opacity: 1; transform: scale(1); } 75.45% { opacity: 1; transform: scale(1); } 76.27% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
@keyframes sf-pop-out { 0.00% { opacity: 0; transform: scale(.6); } 16.82% { opacity: 0; transform: scale(.6); } 17.64% { opacity: 1; transform: scale(1); } 19.55% { opacity: 1; transform: scale(1); } 20.36% { opacity: 0; transform: scale(.6); } 39.55% { opacity: 0; transform: scale(.6); } 40.36% { opacity: 1; transform: scale(1); } 42.27% { opacity: 1; transform: scale(1); } 43.09% { opacity: 0; transform: scale(.6); } 62.27% { opacity: 0; transform: scale(.6); } 63.09% { opacity: 1; transform: scale(1); } 65.00% { opacity: 1; transform: scale(1); } 65.82% { opacity: 0; transform: scale(.6); } 85.00% { opacity: 0; transform: scale(.6); } 85.82% { opacity: 1; transform: scale(1); } 87.73% { opacity: 1; transform: scale(1); } 88.55% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
.semiflow .sf-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: 22s linear infinite; }
.semiflow .sf-ring-fe { animation-name: sf-ring-fe; }
@keyframes sf-ring-fe { 0% { opacity: 0; transform: scale(.5); } 2.23% { opacity: 0; transform: scale(.5); } 2.27% { opacity: 1; transform: scale(.6); } 5.00% { opacity: 0; transform: scale(1.7); } 16.77% { opacity: 0; transform: scale(.5); } 16.82% { opacity: 1; transform: scale(.6); } 19.55% { opacity: 0; transform: scale(1.7); } 24.95% { opacity: 0; transform: scale(.5); } 25.00% { opacity: 1; transform: scale(.6); } 27.73% { opacity: 0; transform: scale(1.7); } 39.50% { opacity: 0; transform: scale(.5); } 39.55% { opacity: 1; transform: scale(.6); } 42.27% { opacity: 0; transform: scale(1.7); } 47.68% { opacity: 0; transform: scale(.5); } 47.73% { opacity: 1; transform: scale(.6); } 50.45% { opacity: 0; transform: scale(1.7); } 62.23% { opacity: 0; transform: scale(.5); } 62.27% { opacity: 1; transform: scale(.6); } 65.00% { opacity: 0; transform: scale(1.7); } 70.41% { opacity: 0; transform: scale(.5); } 70.45% { opacity: 1; transform: scale(.6); } 73.18% { opacity: 0; transform: scale(1.7); } 84.95% { opacity: 0; transform: scale(.5); } 85.00% { opacity: 1; transform: scale(.6); } 87.73% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
.semiflow .sf-ring-in { animation: sf-ring-in 3s linear infinite; } .semiflow .sf-ring-out { animation: sf-ring-out 3s linear infinite; }
@keyframes sf-ring-in { 0% { opacity: 0; transform: scale(.5); } 4.67% { opacity: 0; transform: scale(.5); } 5.00% { opacity: 1; transform: scale(.6); } 25.00% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes sf-ring-out { 0% { opacity: 0; transform: scale(.5); } 33.00% { opacity: 0; transform: scale(.5); } 33.33% { opacity: 1; transform: scale(.6); } 53.33% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.5); } }
.semiflow .sf-fly { opacity: 0; } .semiflow .sf-fly, .semiflow .sf-flyy { animation-duration: 22s; animation-iteration-count: infinite; animation-timing-function: linear; }
.semiflow .sf-loop { animation: sf-loop 1s linear infinite; }
@keyframes sf-loop { to { stroke-dashoffset: 12; } }
.semiflow .sf-lay { opacity: 0; animation: 66s linear infinite; }
.semiflow .sf-lay0 { animation-name: sf-lay0; }
@keyframes sf-lay0 { 0.00% { opacity: 1; } 33.33% { opacity: 1; } 33.79% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-lay1 { animation-name: sf-lay1; }
@keyframes sf-lay1 { 0.00% { opacity: 0; } 33.33% { opacity: 0; } 33.79% { opacity: 1; } 66.67% { opacity: 1; } 67.12% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-lay2 { animation-name: sf-lay2; }
@keyframes sf-lay2 { 0.00% { opacity: 0; } 66.67% { opacity: 0; } 67.12% { opacity: 1; } 100.00% { opacity: 1; } }
.semiflow .sf-port { animation: sf-port 22s ease-out infinite; } .semiflow .sf-act { animation: sf-act 22s linear infinite; }
.semiflow .sf-run { animation: sf-run 22s linear infinite; }
.semiflow .sf-bar { transform-box: fill-box; transform-origin: 0% 50%; animation: sf-bar 22s linear infinite; }
.semiflow .sf-rpop { animation-name: sf-rpop; } .semiflow .sf-dpop { animation-name: sf-dpop; }
@keyframes sf-port { 0.00% { opacity: 0; transform: translate(0px, -12px); } 1.14% { opacity: 0; transform: translate(0px, -12px); } 2.27% { opacity: 1; transform: translate(0px, 0px); } 18.18% { opacity: 1; transform: translate(0px, 0px); } 19.32% { opacity: 0; transform: translate(0px, -12px); } 100.00% { opacity: 0; transform: translate(0px, -12px); } }
@keyframes sf-act { 0.00% { opacity: 0; } 8.64% { opacity: 0; } 9.55% { opacity: 1; } 15.91% { opacity: 1; } 16.82% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes sf-run { 0.00% { opacity: 0; } 6.82% { opacity: 0; } 7.27% { opacity: 1; } 16.82% { opacity: 1; } 17.27% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes sf-bar { 0.00% { transform: scaleX(0); } 8.64% { transform: scaleX(0); } 15.91% { transform: scaleX(1); } 18.18% { transform: scaleX(1); } 18.41% { transform: scaleX(0); } 100.00% { transform: scaleX(0); } }
@keyframes sf-rpop { 0.00% { opacity: 0; transform: scale(.6); } 6.82% { opacity: 0; transform: scale(.6); } 7.50% { opacity: 1; transform: scale(1); } 10.45% { opacity: 1; transform: scale(1); } 11.14% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
@keyframes sf-dpop { 0.00% { opacity: 0; transform: scale(.6); } 11.14% { opacity: 0; transform: scale(.6); } 11.82% { opacity: 1; transform: scale(1); } 16.36% { opacity: 1; transform: scale(1); } 17.05% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
.semiflow .sf-flot { animation-name: sf-flot; } .semiflow .sf-flot-y { animation-name: sf-flot-y; }
@keyframes sf-flot { 0.00% { opacity: 0; transform: translateX(0px); } 2.45% { opacity: 0; transform: translateX(0px); } 2.50% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 6.59% { opacity: 1; transform: translateX(var(--dx)); } 6.64% { opacity: 0; transform: translateX(var(--dx)); } 6.68% { opacity: 0; transform: translateX(0px); } 17.00% { opacity: 0; transform: translateX(0px); } 17.05% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 20.91% { opacity: 1; transform: translateX(var(--dx)); } 20.95% { opacity: 0; transform: translateX(var(--dx)); } 21.00% { opacity: 0; transform: translateX(0px); } 100.00% { opacity: 0; transform: translateX(0px); } } @keyframes sf-flot-y { 0.00% { transform: translateY(0px); } 2.50% { transform: translateY(0px); animation-timing-function: ease-out; } 6.59% { transform: translateY(var(--dy)); } 6.68% { transform: translateY(0px); } 17.05% { transform: translateY(0px); animation-timing-function: ease-out; } 20.91% { transform: translateY(var(--dy)); } 21.00% { transform: translateY(0px); } 100.00% { transform: translateY(0px); } }
.semiflow .sf-frcp { animation-name: sf-frcp; } .semiflow .sf-frcp-y { animation-name: sf-frcp-y; }
@keyframes sf-frcp { 0.00% { opacity: 0; transform: translateX(0px); } 2.68% { opacity: 0; transform: translateX(0px); } 2.73% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 6.82% { opacity: 1; transform: translateX(var(--dx)); } 6.86% { opacity: 0; transform: translateX(var(--dx)); } 6.91% { opacity: 0; transform: translateX(0px); } 100.00% { opacity: 0; transform: translateX(0px); } } @keyframes sf-frcp-y { 0.00% { transform: translateY(0px); } 2.73% { transform: translateY(0px); animation-timing-function: ease-in; } 6.82% { transform: translateY(var(--dy)); } 6.91% { transform: translateY(0px); } 100.00% { transform: translateY(0px); } }
.semiflow .sf-fdat0 { animation-name: sf-fdat0; } .semiflow .sf-fdat0-y { animation-name: sf-fdat0-y; }
@keyframes sf-fdat0 { 0.00% { opacity: 0; transform: translateX(0px); } 9.50% { opacity: 0; transform: translateX(0px); } 9.55% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 13.41% { opacity: 1; transform: translateX(var(--dx)); } 13.45% { opacity: 0; transform: translateX(var(--dx)); } 13.50% { opacity: 0; transform: translateX(0px); } 100.00% { opacity: 0; transform: translateX(0px); } } @keyframes sf-fdat0-y { 0.00% { transform: translateY(0px); } 9.55% { transform: translateY(0px); animation-timing-function: ease-out; } 13.41% { transform: translateY(var(--dy)); } 13.50% { transform: translateY(0px); } 100.00% { transform: translateY(0px); } }
.semiflow .sf-fdat1 { animation-name: sf-fdat1; } .semiflow .sf-fdat1-y { animation-name: sf-fdat1-y; }
@keyframes sf-fdat1 { 0.00% { opacity: 0; transform: translateX(0px); } 12.45% { opacity: 0; transform: translateX(0px); } 12.50% { opacity: 1; transform: translateX(0px); animation-timing-function: linear; } 16.36% { opacity: 1; transform: translateX(var(--dx)); } 16.41% { opacity: 0; transform: translateX(var(--dx)); } 16.45% { opacity: 0; transform: translateX(0px); } 100.00% { opacity: 0; transform: translateX(0px); } } @keyframes sf-fdat1-y { 0.00% { transform: translateY(0px); } 12.50% { transform: translateY(0px); animation-timing-function: ease-out; } 16.36% { transform: translateY(var(--dy)); } 16.45% { transform: translateY(0px); } 100.00% { transform: translateY(0px); } }
.semiflow .sf-d0 { --dx: 12.5px; --dy: -97.2px; } .semiflow .sf-d1 { --dx: 239.4px; --dy: 107.4px; } .semiflow .sf-d2 { --dx: 68.7px; --dy: -69.4px; } .semiflow .sf-d3 { --dx: 68.7px; --dy: -69.4px; } .semiflow .sf-d4 { --dx: -38.0px; --dy: -126.3px; } .semiflow .sf-d5 { --dx: 289.9px; --dy: 136.5px; } .semiflow .sf-d6 { --dx: 18.2px; --dy: -107.8px; } .semiflow .sf-d7 { --dx: 18.2px; --dy: -107.8px; } .semiflow .sf-d8 { --dx: -88.5px; --dy: -155.5px; } .semiflow .sf-d9 { --dx: 340.3px; --dy: 165.7px; } .semiflow .sf-d10 { --dx: -32.3px; --dy: -138.3px; } .semiflow .sf-d11 { --dx: -32.3px; --dy: -138.3px; } .semiflow .sf-d12 { --dx: -139.0px; --dy: -184.6px; } .semiflow .sf-d13 { --dx: 390.8px; --dy: 194.8px; } .semiflow .sf-d14 { --dx: -82.8px; --dy: -167.4px; } .semiflow .sf-d15 { --dx: -82.8px; --dy: -167.4px; }
.semiflow .sf-k1 { animation-delay: -17s; } .semiflow .sf-k2 { animation-delay: -12s; } .semiflow .sf-k3 { animation-delay: -7s; }
.semiflow .sf-shot { opacity: .12; animation: sf-shot 1.35s steps(1) infinite; }
.semiflow .sf-shot0 { animation-delay: -1.35s; } .semiflow .sf-shot1 { animation-delay: -1.20s; } .semiflow .sf-shot2 { animation-delay: -1.05s; } .semiflow .sf-shot3 { animation-delay: -0.90s; } .semiflow .sf-shot4 { animation-delay: -0.75s; } .semiflow .sf-shot5 { animation-delay: -0.60s; } .semiflow .sf-shot6 { animation-delay: -0.45s; } .semiflow .sf-shot7 { animation-delay: -0.30s; } .semiflow .sf-shot8 { animation-delay: -0.15s; }
@keyframes sf-shot { 0% { opacity: 1; } 11.1%, 100% { opacity: .15; } }
.semiflow .sf-halo { transform-box: fill-box; transform-origin: center; animation: sf-halo .9s ease-in-out infinite alternate; }
@keyframes sf-halo { from { transform: scale(.8); opacity: .25; } to { transform: scale(1.15); opacity: .7; } }
.semiflow .sf-plasma { animation: sf-plasma .35s steps(2) infinite; }
@keyframes sf-plasma { 50% { opacity: .55; } }
.semiflow .sf-spin { animation: sf-spin .5s linear infinite; } .semiflow .sf-spinb { animation: sf-spin .35s linear infinite; }
@keyframes sf-spin { to { stroke-dashoffset: -12; } }
.semiflow .sf-drop { animation: sf-drop .8s ease-in infinite; }
@keyframes sf-drop { 0% { transform: translate(0px, 0px); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(0px, 9px); opacity: 0; } }
.semiflow .sf-fall { animation: sf-fall 1s linear infinite; } .semiflow .sf-fall1 { animation-delay: -.33s; } .semiflow .sf-fall2 { animation-delay: -.66s; }
@keyframes sf-fall { from { transform: translate(0px, -2px); opacity: 1; } to { transform: translate(0px, 6px); opacity: 0; } }
.semiflow .sf-belt { stroke-dasharray: 6 3.938; animation: sf-belt 3s infinite; }
@keyframes sf-belt { 0%, 60% { stroke-dashoffset: 0; animation-timing-function: ease-in-out; } 100% { stroke-dashoffset: -39.75; } }
.semiflow .sf-prod { animation: sf-prod 18s infinite; }
@keyframes sf-prod { 0.00% { opacity: 0; transform: translate(15.49px, -8.94px); } 2.22% { opacity: 1; transform: translate(0.00px, 0.00px); } 10.00% { opacity: 1; transform: translate(0.00px, 0.00px); animation-timing-function: ease-in-out; } 16.67% { opacity: 1; transform: translate(-34.42px, 19.88px); } 26.67% { opacity: 1; transform: translate(-34.42px, 19.88px); animation-timing-function: ease-in-out; } 33.33% { opacity: 1; transform: translate(-68.85px, 39.75px); } 43.33% { opacity: 1; transform: translate(-68.85px, 39.75px); animation-timing-function: ease-in-out; } 50.00% { opacity: 1; transform: translate(-103.27px, 59.62px); } 60.00% { opacity: 1; transform: translate(-103.27px, 59.62px); animation-timing-function: ease-in-out; } 66.67% { opacity: 1; transform: translate(-137.70px, 79.50px); } 76.67% { opacity: 1; transform: translate(-137.70px, 79.50px); animation-timing-function: ease-in-out; } 83.33% { opacity: 1; transform: translate(-172.12px, 99.38px); } 93.33% { opacity: 1; transform: translate(-172.12px, 99.38px); animation-timing-function: ease-in-out; } 97.78% { opacity: 1; transform: translate(-187.61px, 108.32px); } 100.00% { opacity: 0; transform: translate(-189.33px, 109.31px); } }
.semiflow .sf-pv { opacity: 0; animation-duration: 18s; animation-timing-function: linear; animation-iteration-count: infinite; }
.semiflow .sf-prod1, .semiflow .sf-prod1 .sf-pv { animation-delay: -3s; } .semiflow .sf-prod2, .semiflow .sf-prod2 .sf-pv { animation-delay: -6s; } .semiflow .sf-prod3, .semiflow .sf-prod3 .sf-pv { animation-delay: -9s; } .semiflow .sf-prod4, .semiflow .sf-prod4 .sf-pv { animation-delay: -12s; } .semiflow .sf-prod5, .semiflow .sf-prod5 .sf-pv { animation-delay: -15s; }
.semiflow .sf-pv0 { animation-name: sf-pv0; }
@keyframes sf-pv0 { 0.00% { opacity: 1; } 5.00% { opacity: 1; } 5.33% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv1 { animation-name: sf-pv1; }
@keyframes sf-pv1 { 0.00% { opacity: 0; } 5.00% { opacity: 0; } 5.33% { opacity: 1; } 21.67% { opacity: 1; } 22.00% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv2 { animation-name: sf-pv2; }
@keyframes sf-pv2 { 0.00% { opacity: 0; } 21.67% { opacity: 0; } 22.00% { opacity: 1; } 38.33% { opacity: 1; } 38.67% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv3 { animation-name: sf-pv3; }
@keyframes sf-pv3 { 0.00% { opacity: 0; } 38.33% { opacity: 0; } 38.67% { opacity: 1; } 55.00% { opacity: 1; } 55.33% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv4 { animation-name: sf-pv4; }
@keyframes sf-pv4 { 0.00% { opacity: 0; } 55.00% { opacity: 0; } 55.33% { opacity: 1; } 71.67% { opacity: 1; } 72.00% { opacity: 0; } 100.00% { opacity: 0; } }
.semiflow .sf-pv5 { animation-name: sf-pv5; }
@keyframes sf-pv5 { 0.00% { opacity: 0; } 71.67% { opacity: 0; } 72.00% { opacity: 1; } 100.00% { opacity: 1; } }
.semiflow .sf-ok { animation-name: sf-ok; transform-box: fill-box; transform-origin: center; }
@keyframes sf-ok { 0.00% { opacity: 0; transform: scale(.6); } 88.33% { opacity: 0; transform: scale(.6); } 88.89% { opacity: 1; transform: scale(1); } 98.33% { opacity: 1; transform: scale(1); } 98.89% { opacity: 0; transform: scale(.6); } 100.00% { opacity: 0; transform: scale(.6); } }
.semiflow .sf-grind { animation: sf-grind 3s ease-in-out infinite; }
@keyframes sf-grind { 0%, 6% { transform: translate(0px, -3.18px); } 16%, 50% { transform: translate(0px, 0.00px); } 60%, 100% { transform: translate(0px, -3.18px); } }
.semiflow .sf-slurry { opacity: 0; animation: sf-slurry 3s linear infinite; } .semiflow .sf-slurry1 { animation-delay: -.25s; } .semiflow .sf-slurry2 { animation-delay: -.5s; }
@keyframes sf-slurry { 0%, 12% { opacity: 0; transform: translate(0px, -4px); } 14% { opacity: 1; } 22% { opacity: 0; transform: translate(0px, 8px); } 23%, 28% { opacity: 0; transform: translate(0px, -4px); } 30% { opacity: 1; } 38% { opacity: 0; transform: translate(0px, 8px); } 100% { opacity: 0; } }
.semiflow .sf-dice { animation: sf-dice 3s ease-in-out infinite; }
@keyframes sf-dice { 0%, 8% { transform: translate(4.59px, -2.65px); } 22% { transform: translate(-4.59px, 2.65px); } 34% { transform: translate(4.59px, -2.65px); } 46% { transform: translate(-4.59px, 2.65px); } 56%, 100% { transform: translate(4.59px, -2.65px); } }
.semiflow .sf-spray { opacity: 0; animation: sf-spray 3s steps(1) infinite; }
@keyframes sf-spray { 8% { opacity: 1; } 54% { opacity: 0; } }
.semiflow .sf-da { animation: sf-da 3s ease-in-out infinite; }
@keyframes sf-da { 0%, 10% { transform: translate(0px, -7.95px); } 24%, 30% { transform: translate(0px, 0.00px); } 42%, 100% { transform: translate(0px, -7.95px); } }
.semiflow .sf-dadie { animation: sf-dadie 3s steps(1) infinite; }
@keyframes sf-dadie { 0% { opacity: 1; } 30% { opacity: 0; } 70% { opacity: 1; } }
.semiflow .sf-wb { animation: sf-wb 3s ease-in-out infinite; }
@keyframes sf-wb { 8% { transform: translate(0px, -3.71px); } 14% { transform: translate(0px, 0.00px); } 20% { transform: translate(0px, -3.71px); } 26% { transform: translate(0px, 0.00px); } 32% { transform: translate(0px, -3.71px); } 38% { transform: translate(0px, 0.00px); } 44% { transform: translate(0px, -3.71px); } 50% { transform: translate(0px, 0.00px); } 56%, 100% { transform: translate(0px, -3.71px); } }
.semiflow .sf-wbspark { opacity: 0; animation: sf-wbspark .25s steps(1) infinite; }
@keyframes sf-wbspark { 50% { opacity: 1; } }
.semiflow .sf-mold { animation: sf-mold 3s ease-in-out infinite; }
@keyframes sf-mold { 0%, 6% { transform: translate(0px, -7.95px); } 18%, 46% { transform: translate(0px, 0.00px); } 58%, 100% { transform: translate(0px, -7.95px); } }
.semiflow .sf-heatg { opacity: 0; animation: sf-heatg 3s ease-in-out infinite; }
@keyframes sf-heatg { 0%, 18% { opacity: 0; } 26%, 42% { opacity: .75; } 52%, 100% { opacity: 0; } }
.semiflow .sf-et { animation: sf-et 3s ease-in-out infinite; }
@keyframes sf-et { 0%, 10% { transform: translate(0px, -6.62px); } 20%, 40% { transform: translate(0px, 0.00px); } 52%, 100% { transform: translate(0px, -6.62px); } }
.semiflow .sf-pass { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: sf-pass 3s ease-out infinite; }
@keyframes sf-pass { 0%, 32% { opacity: 0; transform: scale(.6); } 36%, 56% { opacity: 1; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(.6); } }
/* semiflow:end */