@charset "utf-8";

/*
 * 서브 페이지 .sub_head 배너 — 1뎁스(페이지)마다 다른 색감
 * 공통: PNG 대신 CSS 그라데이션, media.css 덮어쓰기용 !important
 */
.sub_head {
	position: relative;
	overflow: hidden;
}

/* 회사소개 — 차분한 슬레이트·코퍼레이트 블루 */
.sub_head.company {
	background-image:
		radial-gradient(ellipse 90% 80% at 88% 30%, rgba(96, 165, 250, 0.28), transparent 55%),
		radial-gradient(ellipse 70% 65% at 12% 70%, rgba(30, 58, 95, 0.45), transparent 55%),
		linear-gradient(102deg, #0a0f18 0%, #132337 28%, #1e3a52 52%, #2563eb 82%, #38bdf8 100%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #0a0f18 !important;
}

/* AI 플랫폼 / 솔루션개발(ai_tech) — 보라·바이올렛 */
.sub_head.ai {
	background-image:
		radial-gradient(ellipse 95% 85% at 92% 35%, rgba(167, 139, 250, 0.38), transparent 52%),
		radial-gradient(ellipse 75% 70% at 8% 65%, rgba(45, 27, 78, 0.55), transparent 58%),
		linear-gradient(102deg, #07040f 0%, #12081f 18%, #1e0f33 38%, #351865 62%, #5b21b6 85%, #7c3aed 100%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #07040f !important;
}

/* 솔루션(시스템 개발 simulation 등) — 딥 틸·시안 */
.sub_head.solution {
	background-image:
		radial-gradient(ellipse 92% 82% at 90% 28%, rgba(45, 212, 191, 0.22), transparent 54%),
		radial-gradient(ellipse 72% 68% at 10% 72%, rgba(15, 76, 92, 0.5), transparent 56%),
		linear-gradient(102deg, #031014 0%, #08252d 28%, #0e5768 58%, #0d9488 84%, #2dd4bf 100%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #031014 !important;
}

/* 시스템 유지보수·교육 등 training — 딥 에메랄드 */
.sub_head.training {
	background-image:
		radial-gradient(ellipse 88% 78% at 85% 32%, rgba(74, 222, 128, 0.2), transparent 54%),
		radial-gradient(ellipse 74% 72% at 14% 68%, rgba(20, 83, 45, 0.42), transparent 56%),
		linear-gradient(102deg, #04140a 0%, #14532d 35%, #166534 62%, #15803d 86%, #4ade80 100%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #04140a !important;
}

/* 커뮤니티·공지 — 인디고·정보 블루 */
.sub_head.notice {
	background-image:
		radial-gradient(ellipse 94% 84% at 88% 30%, rgba(129, 140, 248, 0.32), transparent 53%),
		radial-gradient(ellipse 76% 70% at 12% 68%, rgba(30, 41, 82, 0.48), transparent 56%),
		linear-gradient(102deg, #0c1228 0%, #1e2a5e 38%, #312e81 62%, #4338ca 85%, #818cf8 100%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #0c1228 !important;
	min-height: 290px;
}

/* 문의·오시는길 — 플럼·모브 */
.sub_head.contact {
	background-image:
		radial-gradient(ellipse 90% 82% at 86% 34%, rgba(232, 121, 249, 0.22), transparent 54%),
		radial-gradient(ellipse 74% 68% at 14% 66%, rgba(88, 28, 67, 0.42), transparent 56%),
		linear-gradient(102deg, #140816 0%, #3b1446 42%, #86198f 72%, #c026d3 100%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #140816 !important;
	min-height: 290px;
}

/* 모바일 솔루션 — 앰버·선셋 다크 */
.sub_head.mobile {
	background-image:
		radial-gradient(ellipse 88% 78% at 82% 36%, rgba(251, 191, 36, 0.18), transparent 54%),
		radial-gradient(ellipse 76% 70% at 18% 64%, rgba(113, 63, 18, 0.38), transparent 56%),
		linear-gradient(102deg, #1a0d04 0%, #422006 38%, #92400e 68%, #d97706 92%, #fbbf24 100%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #1a0d04 !important;
}

/* IT컨설팅: 설명-메뉴, 메뉴-배너 하단 간격을 기존의 절반으로 축소 */
@media(min-width:961px) {
	.sub_head.mobile {
		height: 340px;
	}
	.sub_head.mobile .tab_box {
		bottom: 30px;
	}
}

/* 세일 등 googleglass — 포레스트 그린 */
.sub_head.googleglass {
	background-image:
		radial-gradient(ellipse 88% 80% at 84% 32%, rgba(52, 211, 153, 0.2), transparent 54%),
		radial-gradient(ellipse 74% 70% at 16% 68%, rgba(20, 83, 45, 0.4), transparent 56%),
		linear-gradient(102deg, #052014 0%, #14532d 40%, #166534 68%, #22c55e 96%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #052014 !important;
}

/* 주문 상세 등 서브 — 쿨 그레이 블루 */
.sub_head.googleglass_sub {
	background-image:
		radial-gradient(ellipse 90% 82% at 86% 30%, rgba(148, 163, 184, 0.22), transparent 54%),
		radial-gradient(ellipse 74% 68% at 14% 70%, rgba(51, 65, 85, 0.45), transparent 56%),
		linear-gradient(102deg, #0c1119 0%, #1e293b 45%, #334155 78%, #64748b 100%) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: #0c1119 !important;
	min-height: 290px;
}

/* ---------- 서브헤더 AI솔루션 tab06 ---------- */
.sub_head.ai ul.tabs.tab06 li.selected a,
.sub_head.ai ul.tabs.tab06 li.selected a:hover {
	color: #fff !important;
	border: 1px solid #0071bc !important;
	background-color: #0071bc !important;
}

/* ---------- 서브헤더 tab04: 선택(클릭) 시 메뉴별 색 (sub.css 공통 #0071bc 덮어쓰기) ---------- */
.sub_head.ai ul.tabs.tab04 li#tab_grammar.selected a,
.sub_head.ai ul.tabs.tab04 li#tab_grammar.selected a:hover {
	color: #fff !important;
	border: 1px solid #6d5acd !important;
	background: linear-gradient(165deg, #7c6ae0 0%, #5441a8 100%) !important;
}

.sub_head.ai ul.tabs.tab04 li#tab_new_york.selected a,
.sub_head.ai ul.tabs.tab04 li#tab_new_york.selected a:hover {
	color: #fff !important;
	border: 1px solid #0284c7 !important;
	background: linear-gradient(165deg, #0ea5e9 0%, #0369a1 100%) !important;
}

.sub_head.ai ul.tabs.tab04 li#tab_eumseong.selected a,
.sub_head.ai ul.tabs.tab04 li#tab_eumseong.selected a:hover {
	color: #fff !important;
	border: 1px solid #0d9488 !important;
	background: linear-gradient(165deg, #14b8a6 0%, #0f766e 100%) !important;
}

.sub_head.solution ul.tabs.tab04 li#tab_simulation.selected a,
.sub_head.solution ul.tabs.tab04 li#tab_simulation.selected a:hover {
	color: #fff !important;
	border: 1px solid #6d5acd !important;
	background: linear-gradient(165deg, #7c6ae0 0%, #5441a8 100%) !important;
}

.sub_head.solution ul.tabs.tab04 li#tab_education.selected a,
.sub_head.solution ul.tabs.tab04 li#tab_education.selected a:hover {
	color: #fff !important;
	border: 1px solid #0284c7 !important;
	background: linear-gradient(165deg, #0ea5e9 0%, #0369a1 100%) !important;
}

.sub_head.solution ul.tabs.tab04 li#tab_sensor.selected a,
.sub_head.solution ul.tabs.tab04 li#tab_sensor.selected a:hover {
	color: #fff !important;
	border: 1px solid #0d9488 !important;
	background: linear-gradient(165deg, #14b8a6 0%, #0f766e 100%) !important;
}

/* Full-bleed compact visual and separate content-level text navigation. */
html body .sub_head {
  width:100vw !important; max-width:none !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  height:280px !important; min-height:280px !important; border-radius:0 !important;
  display:flex; flex-direction:column; justify-content:center; align-items:center; padding:32px 24px !important;
}
html body .sub_head h2 { padding:0 !important; margin:0 0 20px !important; font-size:42px; line-height:1.25; }
html body .sub_head p { width:auto !important; max-width:760px; margin:0 !important; line-height:1.65; }
html body .wonit-sub-tabs { width:100%; max-width:1440px; margin:0 auto; padding:40px 0 0; }
html body .wonit-sub-tabs .tab_box { position:static !important; width:100% !important; max-width:none !important; height:auto !important; margin:0 !important; padding:0 !important; transform:none !important; background:transparent !important; }
html body .wonit-sub-tabs ul.tabs { display:flex !important; flex-wrap:nowrap; justify-content:flex-start; gap:40px; width:100% !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:0 !important; border-bottom:1px solid #eceef1; overflow-x:auto; scrollbar-width:thin; }
html body .wonit-sub-tabs ul.tabs li { float:none !important; flex:0 0 auto; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; border:0 !important; }
html body .wonit-sub-tabs ul.tabs li a { display:flex !important; align-items:center; width:auto !important; min-width:0 !important; height:auto !important; min-height:60px; padding:8px 0 20px !important; margin:0 !important; border:0 !important; border-bottom:3px solid transparent !important; border-radius:0 !important; background:none !important; color:#8a8a8a !important; font-size:20px !important; line-height:28px !important; font-weight:500; white-space:nowrap; text-shadow:none; }
html body .wonit-sub-tabs ul.tabs li a span { display:inline !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; background:none !important; font:inherit; color:inherit !important; }
html body .wonit-sub-tabs ul.tabs li a span:first-child { display:none !important; }
html body .wonit-sub-tabs ul.tabs li.selected a,html body .wonit-sub-tabs ul.tabs li.active a,html body .wonit-sub-tabs ul.tabs li a[aria-current=page] { color:#111 !important; border-bottom-color:#111 !important; font-weight:700; }
html body .wonit-sub-tabs ul.tabs li a:hover { color:#111 !important; }
@media(max-width:1520px) { html body .wonit-sub-tabs { width:calc(100% - 80px); } }
@media(max-width:960px) {
  html body .sub_head { height:240px !important; min-height:240px !important; }
  html body .sub_head h2 { font-size:34px !important; }
  html body .wonit-sub-tabs { width:calc(100% - 48px); padding-top:24px; }
  html body .wonit-sub-tabs ul.tabs { gap:28px; }
  html body .wonit-sub-tabs ul.tabs li a { font-size:18px !important; }
}
@media(max-width:600px) {
  html body .sub_head { height:220px !important; min-height:220px !important; }
  html body .sub_head h2 { font-size:30px !important; }
  html body .sub_head p { font-size:15px !important; }
  html body .wonit-sub-tabs { width:calc(100% - 32px); }
  html body .wonit-sub-tabs ul.tabs { gap:24px; }
  html body .wonit-sub-tabs ul.tabs li a { font-size:16px !important; min-height:52px; }
}

html body .wonit-sub-tabs,html body .wonit-sub-tabs .tab_box { display:block !important; visibility:visible !important; }

/* Compact header shared by the homepage and subpages. */
.wonit-nav-toggle,.wonit-compact-menu { display:none; }
.wonit-compact-menu[hidden],.wonit-nav-group > div[hidden] { display:none !important; }
@media(max-width:1200px) {
  :root { --header-h:72px; }
  header.site-header { height:72px !important; min-height:72px !important; z-index:10020 !important; background:#fff !important; }
  header.site-header .header-inner { display:flex !important; align-items:center !important; justify-content:space-between !important; height:72px !important; min-height:0 !important; padding:0 24px !important; gap:16px !important; }
  header.site-header .logo { margin:0 !important; width:auto !important; flex:1; }
  header.site-header .logo img { max-width:116px; max-height:32px; }
  header.site-header nav.gnb,header.site-header .header-util { display:none !important; }
  header.site-header .wonit-nav-toggle { display:flex !important; flex-direction:column; justify-content:center; gap:7px; width:44px; height:44px; border:0; border-radius:8px; padding:10px; background:transparent; color:#111; cursor:pointer; }
  .wonit-nav-toggle span { display:block; width:24px; height:2px; background:currentColor; transition:transform .2s; }
  .wonit-nav-open .wonit-nav-toggle span:first-child { transform:translateY(4.5px) rotate(45deg); }
  .wonit-nav-open .wonit-nav-toggle span:last-child { transform:translateY(-4.5px) rotate(-45deg); }
  .wonit-nav-toggle:focus-visible,.wonit-nav-group button:focus-visible { outline:2px solid #3768db; outline-offset:2px; }
  .wonit-compact-menu { display:block; position:fixed; inset:72px 0 0; background:#fff; z-index:10010; overflow:auto; overscroll-behavior:contain; padding:24px max(24px,calc((100vw - 920px)/2)) 48px; }
  .wonit-nav-group { border-bottom:1px solid #e9eaed; }
  .wonit-nav-group > button { display:flex; width:100%; align-items:center; justify-content:space-between; padding:22px 0; border:0; background:none; font:600 24px/32px inherit; font-family:inherit; font-size:24px; font-weight:600; color:#15171c; text-align:left; }
  .wonit-nav-group > button::after { content:'+'; font-size:26px; font-weight:400; }
  .wonit-nav-group > button[aria-expanded=true]::after { content:'−'; }
  .wonit-nav-group > div { padding:0 0 20px; }
  .wonit-nav-group a { display:block; padding:12px 8px; color:#4b5260; font-size:16px; line-height:24px; }
  .wonit-nav-contact { display:inline-block; margin-top:28px; padding:13px 24px; border:1px solid #cbd0d8; border-radius:28px; color:#15171c; }
}
@media(max-width:600px) { header.site-header .header-inner { padding:0 16px !important; } }

/* Shared subpage visual typography. */
html body .sub_head h2 { font-size:36px !important; line-height:45px !important; font-weight:700 !important; margin-bottom:24px !important; }
html body .sub_head p { font-size:16px !important; line-height:26px !important; font-weight:400 !important; padding:0 !important; }
@media(max-width:960px) { html body .sub_head h2 { font-size:36px !important; line-height:45px !important; margin-bottom:20px !important; } }
@media(max-width:600px) { html body .sub_head h2 { font-size:30px !important; line-height:40px !important; } html body .sub_head p { font-size:15px !important; line-height:25px !important; } }

/* Refined subpage visual type. */
html body .sub_head h2 { letter-spacing:0 !important; font-weight:600 !important; }
html body .sub_head p { letter-spacing:0 !important; font-size:18px !important; line-height:28px !important; }

/* Airier visual lettering and larger supporting copy. */
html body .sub_head h2 { letter-spacing:.5px !important; }
html body .sub_head p { letter-spacing:.5px !important; font-size:20px !important; line-height:30px !important; }

/* Company visual: preserve the pale copy space above the purple waves. */
html body .sub_head.company {
 background-image:linear-gradient(rgba(250,245,255,.16),rgba(250,245,255,.16)),url('../img/company-visual-purple-waves.jpg') !important;
 background-color:#f7edfd !important; background-size:cover !important; background-position:center 40% !important;
}
html body .sub_head.company h2,html body .sub_head.company p { color:#262035 !important; text-shadow:none !important; position:relative; z-index:1; }
@media(max-width:600px) { html body .sub_head.company { background-position:center 35% !important; } }
/* Muted blue-lavender company visual with a stronger wave presence. */
html body .sub_head.company { isolation:isolate; background:#9298b0 !important; }
html body .sub_head.company::before {
 content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
 background:url('../img/company-visual-purple-waves.jpg') center 65% / cover no-repeat;
 filter:saturate(.42) brightness(.8) contrast(1.08);
}
html body .sub_head.company::after {
 content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
 background:linear-gradient(105deg,rgba(67,77,111,.28),rgba(118,130,166,.12) 62%,rgba(151,162,191,.1));
}
html body .sub_head.company h2,html body .sub_head.company p { color:#fff !important; text-shadow:0 1px 8px rgba(40,45,70,.16) !important; }
@media(max-width:600px) { html body .sub_head.company::before { background-position:center 60%; } }
/* Clearer service-page tone with more quiet space above the waves. */
html body .sub_head.company::before { background-position:center 49%; filter:hue-rotate(-28deg) saturate(.38) brightness(1.01) contrast(1.1); }
html body .sub_head.company::after { background:linear-gradient(105deg,rgba(64,86,110,.08),rgba(182,207,223,.04) 62%,rgba(224,234,241,.02)); }
@media(max-width:600px) { html body .sub_head.company::before { background-position:center 45%; } }

/* Remove breadcrumb rows and extend the tab baseline to both viewport edges. */
html body .sub_content .location { display:none !important; }
html body .wonit-sub-tabs { position:relative; }
html body .wonit-sub-tabs::after { content:''; position:absolute; left:50%; bottom:0; width:100vw; height:1px; background:#eceef1; transform:translateX(-50%); pointer-events:none; z-index:0; }
html body .wonit-sub-tabs ul.tabs { border-bottom:0 !important; position:relative; z-index:1; }

/* Company overview: restrained monochrome hierarchy and a clear three-column grid. */
html body #companyView1 { max-width:1440px; margin:0 auto; padding:88px 0 120px; box-sizing:border-box; }
html body #companyView1 .company_visual { padding:0; margin:0; text-align:center; }
html body #companyView1 .company_topic { display:block; position:static; margin:0 auto 40px; padding:0; max-width:1080px; color:#151515; font-size:44px; line-height:56px; font-weight:700; word-break:keep-all; background:none; }
html body #companyView1 .company_topic::before,html body #companyView1 .company_topic::after { content:none; }
html body #companyView1 .company_text_info { max-width:1000px; margin:0 auto 24px; padding:0; font-size:20px; line-height:32px; font-weight:400; color:#626262; word-break:keep-all; }
html body #companyView1 .company_text_info.weight { font-size:20px; line-height:34px; font-weight:400; color:#333; }
html body #companyView1 .company_text_info br { display:none; }
html body #companyView1 .company_cont { margin-top:80px; padding:64px 48px; background:#f7f7f7; border-radius:24px; transition:none; }
html body #companyView1 .company_img { max-width:none; margin:0; background:none; }
html body #companyView1 .company_img_tit { display:block; height:auto; padding:0; margin:0 0 48px; color:#171717; font-size:30px; line-height:44px; font-weight:600; }
html body #companyView1 .company_img_tit br:last-of-type { display:none; }
html body #companyView1 .comm_cont { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; padding:0; height:auto; text-align:left; }
html body #companyView1 .comm_cont::after { display:none; }
html body #companyView1 .com_col { float:none; width:auto; margin:0; padding:28px 0 0; border-top:1px solid #d8d8d8; }
html body #companyView1 .com_col:first-child { padding-left:0; }
html body #companyView1 .com_col strong { display:block; margin:0; padding:0; color:#202020; font-size:24px; line-height:34px; font-weight:600; }
html body #companyView1 .com_col p { margin:16px 0 0; padding:0; color:#666; font-size:16px; line-height:28px; font-weight:400; word-break:keep-all; }
@media(max-width:1520px) { html body #companyView1 { padding-left:40px; padding-right:40px; } }
@media(max-width:960px) {
 html body #companyView1 { padding:64px 24px 80px; }
 html body #companyView1 .company_topic { font-size:32px; line-height:46px; margin-bottom:32px; }
 html body #companyView1 .company_cont { margin-top:56px; padding:40px 28px; }
 html body #companyView1 .comm_cont { gap:24px; }
 html body #companyView1 .company_img_tit { font-size:28px; line-height:40px; }
}
@media(max-width:600px) {
 html body #companyView1 { padding:48px 16px 64px; }
 html body #companyView1 .company_topic { font-size:28px; line-height:40px; }
 html body #companyView1 .company_topic br { display:none; }
 html body #companyView1 .company_text_info,html body #companyView1 .company_text_info.weight { font-size:16px; line-height:28px; text-align:left; }
 html body #companyView1 .company_cont { padding:32px 24px; border-radius:20px; }
 html body #companyView1 .company_img_tit { font-size:24px; line-height:36px; margin-bottom:32px; text-align:left; }
 html body #companyView1 .comm_cont { grid-template-columns:1fr; gap:28px; }
 html body #companyView1 .com_col { padding-top:24px; }
 html body #companyView1 .com_col strong { font-size:22px; line-height:32px; }
}
/* Connected values diagram: a central promise branches into three equal values. */
html body #companyView1 .company_cont { padding:64px 48px 56px; background:#fafafd; overflow:hidden; }
html body #companyView1 .company_img { position:relative; }
html body #companyView1 .company_img_tit {
 position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
 width:260px; height:260px; margin:0 auto 88px; padding:28px; border:1px solid #a497e5; border-radius:50%;
 background:radial-gradient(circle at 35% 25%,#fff 40%,#f3f1ff 100%); box-shadow:0 0 0 12px #fafafd,0 0 0 13px #e1e0e8,0 8px 28px rgba(119,92,205,.08);
 font-size:24px; line-height:36px; font-weight:600; box-sizing:border-box; text-align:center;
}
html body #companyView1 .company_img_tit::after { content:''; position:absolute; width:1px; height:61px; left:50%; top:calc(100% + 13px); background:#d2cce7; }
html body #companyView1 .comm_cont { position:relative; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; max-width:1060px; margin:0 auto; text-align:center; }
html body #companyView1 .comm_cont::before { content:''; position:absolute; left:calc((100% - 80px)/6); right:calc((100% - 80px)/6); top:-28px; height:1px; background:#d2cce7; }
html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { position:relative; border:0; padding:0; }
html body #companyView1 .com_col::before { content:''; position:absolute; width:1px; height:28px; left:50%; top:-28px; background:#d2cce7; }
html body #companyView1 .com_col strong { display:flex; align-items:center; justify-content:center; width:148px; height:148px; margin:0 auto; border:1px solid #b2c9e8; border-radius:50%; background:#fff; box-shadow:0 0 0 7px #fafafd,0 0 0 8px #e4e4ec; font-size:24px; line-height:34px; color:#25252b; box-sizing:border-box; }
html body #companyView1 .com_col:nth-child(2) strong { border-color:#b4a4e8; }
html body #companyView1 .com_col:nth-child(3) strong { border-color:#a7b1e9; }
html body #companyView1 .com_col p { margin:28px auto 0; max-width:300px; font-size:16px; line-height:28px; color:#62626a; }
@media(max-width:960px) {
 html body #companyView1 .company_cont { padding:48px 28px; }
 html body #companyView1 .comm_cont { gap:24px; }
 html body #companyView1 .comm_cont::before { left:calc((100% - 48px)/6); right:calc((100% - 48px)/6); }
 html body #companyView1 .company_img_tit { width:230px; height:230px; font-size:22px; line-height:34px; }
 html body #companyView1 .com_col strong { width:124px; height:124px; font-size:22px; }
}
@media(max-width:600px) {
 html body #companyView1 .company_cont { padding:40px 24px; }
 html body #companyView1 .company_img_tit { margin-bottom:48px; }
 html body #companyView1 .company_img_tit::after,html body #companyView1 .comm_cont::before,html body #companyView1 .com_col::before { display:none; }
 html body #companyView1 .comm_cont { grid-template-columns:1fr; gap:36px; }
 html body #companyView1 .com_col p { margin-top:20px; }
}
html body #companyView1 .company_img_tit { display:block; align-content:center; width:280px; height:280px; padding:20px; font-size:22px; line-height:34px; word-break:keep-all; }
@media(max-width:600px) { html body #companyView1 .company_img_tit { width:240px; height:240px; font-size:20px; line-height:32px; padding:16px; } }

/* A clear information hierarchy: one shared vision, supported by three equal values. */
html body #companyView1 .company_cont { background:#fff; padding:16px 0 0; border-radius:0; }
html body #companyView1 .company_img_tit {
 display:block; align-content:center; position:relative; width:min(100%,760px); height:auto; min-height:160px;
 margin:0 auto 88px; padding:32px 40px; border:0; border-radius:20px; background:#272635; box-shadow:none;
 color:#fff; font-size:28px; line-height:42px; font-weight:600; text-align:center;
}
html body #companyView1 .company_img_tit::before { content:'VISION'; display:block; margin-bottom:12px; color:#c7c4e5; font-size:13px; line-height:20px; font-weight:500; }
html body #companyView1 .company_img_tit::after { top:100%; height:60px; width:2px; background:#c6c5d2; }
html body #companyView1 .comm_cont { max-width:1100px; gap:32px; }
html body #companyView1 .comm_cont::before { left:calc((100% - 64px)/6); right:calc((100% - 64px)/6); height:2px; background:#c6c5d2; }
html body #companyView1 .com_col::before { width:2px; background:#c6c5d2; }
html body #companyView1 .com_col strong {
 width:100%; height:88px; border:0; border-radius:14px; box-shadow:none; background:#527ab8;
 color:#fff; font-size:28px; line-height:38px; font-weight:600;
}
html body #companyView1 .com_col:nth-child(2) strong { background:#6569c6; border:0; }
html body #companyView1 .com_col:nth-child(3) strong { background:#8060c2; border:0; }
html body #companyView1 .com_col p { margin-top:24px; max-width:320px; font-size:17px; line-height:29px; color:#555; }
@media(max-width:960px) {
 html body #companyView1 .company_cont { padding:8px 0 0; }
 html body #companyView1 .comm_cont { gap:24px; }
 html body #companyView1 .comm_cont::before { left:calc((100% - 48px)/6); right:calc((100% - 48px)/6); }
 html body #companyView1 .company_img_tit { width:min(100%,640px); font-size:26px; line-height:40px; }
 html body #companyView1 .com_col strong { font-size:24px; }
 html body #companyView1 .com_col p { font-size:16px; line-height:28px; }
}
@media(max-width:600px) {
 html body #companyView1 .company_img_tit { min-height:150px; padding:28px 20px; margin-bottom:32px; font-size:22px; line-height:34px; border-radius:16px; }
 html body #companyView1 .comm_cont { gap:28px; }
 html body #companyView1 .com_col strong { height:72px; }
 html body #companyView1 .com_col p { margin-top:16px; }
}
/* Three equal values, with clear color circles and descriptions below. */
html body #companyView1 .company_img_tit { display:none; }
html body #companyView1 .comm_cont::before,html body #companyView1 .com_col::before { display:none; }
html body #companyView1 .company_cont { margin-top:72px; padding:0; }
html body #companyView1 .comm_cont { max-width:1100px; gap:48px; }
html body #companyView1 .com_col strong { width:200px; height:200px; margin:0 auto; border-radius:50%; background:#62a9f0; color:#fff; font-size:28px; line-height:38px; }
html body #companyView1 .com_col:nth-child(2) strong { background:#8275f5; }
html body #companyView1 .com_col:nth-child(3) strong { background:#7460ec; }
html body #companyView1 .com_col p { margin:28px auto 0; max-width:320px; color:#555; font-size:17px; line-height:29px; }
@media(max-width:960px) { html body #companyView1 .comm_cont { gap:24px; } html body #companyView1 .com_col strong { width:164px; height:164px; font-size:26px; } }
@media(max-width:600px) { html body #companyView1 .company_cont { margin-top:48px; } html body #companyView1 .comm_cont { gap:40px; } html body #companyView1 .com_col strong { width:160px; height:160px; } html body #companyView1 .com_col p { font-size:16px; line-height:28px; margin-top:20px; } }
/* Place subpage tabs directly below the visual at every breakpoint. */
html body .wonit-sub-tabs { padding-top:0 !important; }

/* Overlapping value circles contain both the keyword and its explanation. */
html body #companyView1 .comm_cont { display:flex; justify-content:center; align-items:center; gap:0; max-width:1200px; isolation:isolate; }
html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { position:relative; flex:0 0 35.3%; width:35.3%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 28px; margin:0; border:0; box-sizing:border-box; background:none; }
html body #companyView1 .com_col + .com_col { margin-left:-3%; }
html body #companyView1 .com_col::before { content:''; display:block; position:absolute; inset:0; width:100%; height:100%; border-radius:50%; background:#70b2f3; mix-blend-mode:multiply; z-index:0; }
html body #companyView1 .com_col:nth-child(2)::before { background:#967bfa; }
html body #companyView1 .com_col:nth-child(3)::before { background:#8595fa; }
html body #companyView1 .com_col strong,html body #companyView1 .com_col:nth-child(n) strong { position:relative; z-index:1; display:block; width:auto; height:auto; margin:0; padding:0; border:0; border-radius:0; background:none; color:#fff; font-size:28px; line-height:40px; font-weight:600; }
html body #companyView1 .com_col p { position:relative; z-index:1; max-width:290px; margin:24px 0 0; padding:0; color:#fff; font-size:17px; line-height:29px; font-weight:400; text-align:center; }
@media(max-width:960px) {
 html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { padding:24px 18px; }
 html body #companyView1 .com_col:nth-child(n) strong { font-size:24px; line-height:34px; }
 html body #companyView1 .com_col p { font-size:15px; line-height:25px; margin-top:16px; }
 html body #companyView1 .com_col p br { display:none; }
}
@media(max-width:600px) {
 html body #companyView1 .comm_cont { flex-direction:column; }
 html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { flex:none; width:min(100%,320px); padding:36px 28px; }
 html body #companyView1 .com_col + .com_col { margin-left:0; margin-top:-16px; }
 html body #companyView1 .com_col p { font-size:16px; line-height:28px; max-width:250px; }
}
/* Center tab labels with equal space above and below. */
html body .wonit-sub-tabs ul.tabs li a { min-height:72px; padding:20px 0 !important; box-sizing:border-box; }
@media(max-width:600px) { html body .wonit-sub-tabs ul.tabs li a { min-height:64px; padding:16px 0 !important; } }

/* Keep label centering independent of the selected underline. */
html body .wonit-sub-tabs ul.tabs li a { position:relative; height:72px !important; min-height:72px; padding:0 !important; border-bottom:0 !important; align-items:center; justify-content:center; }
html body .wonit-sub-tabs ul.tabs li a::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent; }
html body .wonit-sub-tabs ul.tabs li.selected a::after,html body .wonit-sub-tabs ul.tabs li.active a::after,html body .wonit-sub-tabs ul.tabs li a[aria-current=page]::after { background:#111; }
@media(max-width:600px) { html body .wonit-sub-tabs ul.tabs li a { height:64px !important; min-height:64px; } }
/* Three complementary values: a shared capsule, circles, and explanations. */
html body #companyView1 .comm_cont { --value-circle:240px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:60px; position:relative; max-width:1200px; margin:0 auto; padding:24px; isolation:isolate; }
html body #companyView1 .comm_cont::before { content:''; display:block; position:absolute; inset:0 0 auto; width:auto; height:288px; border:1px solid #d5dbea; border-radius:180px; background:none; box-sizing:border-box; z-index:-1; }
html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { display:block; position:relative; width:auto; flex:none; aspect-ratio:auto; margin:0; padding:0; background:none; border:0; }
html body #companyView1 .com_col + .com_col { margin:0; }
html body #companyView1 .com_col::before { display:none; }
html body #companyView1 .com_col + .com_col::before { content:'+'; display:block; position:absolute; left:-46px; top:100px; width:32px; height:40px; border:0; border-radius:0; background:none; color:#7e8ce1; font-size:36px; line-height:40px; font-weight:400; mix-blend-mode:normal; }
html body #companyView1 .com_col:nth-child(n) strong { display:flex; align-items:center; justify-content:center; width:var(--value-circle); height:var(--value-circle); margin:0 auto; padding:0; border:16px solid #e6effb; box-sizing:border-box; border-radius:50%; background:linear-gradient(135deg,#70b9f3,#5289e8); color:#fff; font-size:28px; line-height:40px; font-weight:600; }
html body #companyView1 .com_col:nth-child(2) strong { border-color:#eeebff; background:linear-gradient(135deg,#a28bfa,#8068e8); }
html body #companyView1 .com_col:nth-child(3) strong { border-color:#e9ecff; background:linear-gradient(135deg,#919ff8,#6c7de3); }
html body #companyView1 .com_col p { max-width:340px; margin:32px auto 0; color:#555; font-size:17px; line-height:29px; font-weight:400; text-align:center; }
html body #companyView1 .com_col p::before { content:''; display:block; width:8px; height:8px; margin:0 auto 22px; border-right:2px solid #8991a6; border-bottom:2px solid #8991a6; transform:rotate(45deg); }
@media(max-width:1100px) and (min-width:601px) {
 html body #companyView1 .comm_cont { --value-circle:190px; gap:30px; padding:20px 12px; }
 html body #companyView1 .comm_cont::before { height:230px; }
 html body #companyView1 .com_col + .com_col::before { left:-27px; top:75px; width:24px; font-size:30px; }
 html body #companyView1 .com_col:nth-child(n) strong { border-width:12px; font-size:26px; }
 html body #companyView1 .com_col p { font-size:15px; line-height:26px; }
}
@media(max-width:600px) {
 html body #companyView1 .comm_cont { --value-circle:210px; grid-template-columns:1fr; gap:64px; padding:0; }
 html body #companyView1 .comm_cont::before { display:none; }
 html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { width:100%; padding:0; margin:0; }
 html body #companyView1 .com_col + .com_col { margin:0; }
 html body #companyView1 .com_col + .com_col::before { left:calc(50% - 16px); top:-52px; }
 html body #companyView1 .com_col:nth-child(n) strong { font-size:26px; border-width:14px; }
 html body #companyView1 .com_col p { max-width:300px; font-size:16px; line-height:28px; margin-top:24px; }
}
/* Solid value colors with wider translucent rings and geometric plus signs. */
html body #companyView1 .com_col:nth-child(n) strong { border-width:22px; border-color:rgba(67,153,241,.16); background:#4399f1; background-clip:padding-box; }
html body #companyView1 .com_col:nth-child(2) strong { border-color:rgba(137,103,241,.16); background-color:#8967f1; }
html body #companyView1 .com_col:nth-child(3) strong { border-color:rgba(112,133,243,.16); background-color:#7085f3; }
html body #companyView1 .com_col + .com_col::before { content:''; left:-40px; top:110px; width:20px; height:20px; background:linear-gradient(#959ba5,#959ba5) center/20px 2px no-repeat,linear-gradient(#959ba5,#959ba5) center/2px 20px no-repeat; border:0; border-radius:0; }
@media(max-width:1100px) and (min-width:601px) {
 html body #companyView1 .com_col:nth-child(n) strong { border-width:18px; }
 html body #companyView1 .com_col + .com_col::before { left:-25px; top:85px; }
}
@media(max-width:600px) {
 html body #companyView1 .com_col:nth-child(n) strong { border-width:20px; }
 html body #companyView1 .com_col + .com_col::before { left:calc(50% - 10px); top:-42px; }
}
html body #companyView1 .com_col p::before { content:none; display:none; }

/* Equal capsule clearance around the end circles and below-circle copy. */
html body #companyView1 .comm_cont { grid-template-columns:repeat(3,var(--value-circle)); justify-content:space-between; gap:0; width:100%; max-width:1040px; box-sizing:border-box; padding:24px; }
html body #companyView1 .com_col + .com_col::before { left:calc((3 * var(--value-circle) - (min(1040px, 100vw - 80px) - 48px))/4 - 10px); }
html body #companyView1 .com_col p { width:calc(100% + 72px); max-width:none; margin:64px -36px 0; }
@media(max-width:1100px) and (min-width:601px) {
 html body #companyView1 .comm_cont { padding:20px; }
 html body #companyView1 .com_col + .com_col::before { left:calc((3 * var(--value-circle) - (min(1040px, 100vw - 48px) - 40px))/4 - 10px); }
 html body #companyView1 .com_col p { width:calc(100% + 40px); margin:56px -20px 0; }
}
@media(max-width:600px) {
 html body #companyView1 .comm_cont { grid-template-columns:1fr; justify-items:center; gap:64px; padding:0; }
 html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { width:100%; }
 html body #companyView1 .com_col + .com_col::before { left:calc(50% - 10px); }
 html body #companyView1 .com_col p { width:100%; max-width:300px; margin:32px auto 0; }
}
html body #companyView1 .company_topic + .company_text_info br { display:initial; }

@media(min-width:1101px) { html body #companyView1 .com_col p { font-size:20px; line-height:32px; } }

html body #companyView1 .comm_cont { align-items:start; }
@media(min-width:1101px) { html body #companyView1 .com_col p { width:360px; max-width:none; margin-left:-60px; margin-right:-60px; } }

/* Final overview composition: only companyView1 is affected. */
html body #companyView1 { padding-top:88px; padding-bottom:112px; }
html body #companyView1 .company_topic { margin-bottom:36px; }
html body #companyView1 .company_text_info { width:100%; max-width:800px; margin:0 auto; font-size:16px; line-height:28px; font-weight:400; text-align:center; }
html body #companyView1 .company_text_info + .company_text_info { margin-top:24px; }
html body #companyView1 .company_cont { margin-top:64px; padding:0; background:none; border-radius:0; }
html body #companyView1 .comm_cont { --value-circle:240px; max-width:960px; padding:0; grid-template-columns:repeat(3,240px); justify-content:space-between; align-items:start; gap:0; }
html body #companyView1 .comm_cont::before,html body #companyView1 .comm_cont::after { display:none; content:none; }
html body #companyView1 .com_col + .com_col::before { left:-70px; top:110px; }
html body #companyView1 .com_col p { width:320px; max-width:none; margin:28px -40px 0; font-size:20px; line-height:32px; text-align:center; }
@media(max-width:1100px) and (min-width:601px) {
 html body #companyView1 .comm_cont { grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
 html body #companyView1 .com_col:nth-child(n) strong { width:min(100%,210px); height:auto; aspect-ratio:1; }
 html body #companyView1 .com_col + .com_col::before { left:-30px; top:85px; }
 html body #companyView1 .com_col p { width:calc(100% + 24px); margin:28px -12px 0; font-size:16px; line-height:28px; }
}
@media(max-width:600px) {
 html body #companyView1 { padding-top:56px; padding-bottom:96px; }
 html body #companyView1 .company_topic { margin-bottom:32px; }
 html body #companyView1 .company_cont { margin-top:56px; }
 html body #companyView1 .comm_cont { grid-template-columns:1fr; gap:64px; }
 html body #companyView1 .com_col + .com_col::before { left:calc(50% - 10px); top:-42px; }
 html body #companyView1 .com_col p { width:100%; max-width:320px; margin:24px auto 0; font-size:16px; line-height:28px; }
 html body #companyView1 .com_col p br { display:initial; }
}
html body #companyView1 .com_col strong,html body #companyView1 .com_col p { transition:none; }
@media(max-width:1100px) and (min-width:601px) { html body #companyView1 .com_col + .com_col::before { top:95px; } }

/* English section titles retain the Korean supporting copy. */
html body .sub_head h2 { font-size:48px !important; line-height:60px !important; }
@media(max-width:960px) { html body .sub_head h2 { font-size:40px !important; line-height:50px !important; } }
@media(max-width:600px) { html body .sub_head h2 { font-size:32px !important; line-height:42px !important; } }
/* Title-only subpage visuals. */
html body .sub_head p { display:none !important; }
html body .sub_head h2 { font-size:52px !important; line-height:66px !important; margin:0 !important; }
@media(max-width:960px) { html body .sub_head h2 { font-size:40px !important; line-height:52px !important; } }
@media(max-width:600px) { html body .sub_head h2 { font-size:34px !important; line-height:44px !important; } }
/* Align overview introduction to the content grid. */
html body #companyView1 .company_topic { max-width:none; text-align:left; margin-left:0; margin-right:0; }
html body #companyView1 .company_text_info { text-align:left; margin-left:0; margin-right:0; }
/* Value stories: copy on the left, a coordinated illustration on the right. */
html body #companyView1 .comm_cont { display:flex; flex-direction:column; width:100%; max-width:none; gap:48px; padding:0; }
html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:72px; align-items:center; width:100%; margin:0; padding:0; }
html body #companyView1 .com_col + .com_col { margin:0; }
html body #companyView1 .com_col::before,html body #companyView1 .com_col + .com_col::before { display:none; content:none; }
html body #companyView1 .com_col:nth-child(n) strong { display:block; width:auto; height:auto; aspect-ratio:auto; margin:0; padding:0; border:0; border-radius:0; background:none; color:#171717; font-size:28px; line-height:40px; font-weight:700; text-align:left; }
html body #companyView1 .com_col p { width:auto; max-width:none; margin:20px 0 0; color:#626262; font-size:20px; line-height:32px; text-align:left; }
html body #companyView1 .com_col .value-image { display:block; width:100%; height:auto; border-radius:24px; }
@media(max-width:960px) { html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { gap:36px; } html body #companyView1 .com_col p { font-size:18px; line-height:30px; } }
@media(max-width:600px) { html body #companyView1 .comm_cont { gap:48px; } html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { grid-template-columns:1fr; gap:24px; } html body #companyView1 .com_col:nth-child(n) strong { font-size:26px; line-height:36px; } html body #companyView1 .com_col p { margin-top:12px; font-size:16px; line-height:28px; } html body #companyView1 .com_col .value-image { border-radius:18px; } }
html body #companyView1 .value-copy,html body #companyView1 .value-copy p { background:none; border:0; box-shadow:none; }

/* Illustration first, followed by the full value narrative. */
html body #companyView1 .comm_cont { gap:64px; }
html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; }
html body #companyView1 .com_col .value-image { grid-column:1; grid-row:1; }
html body #companyView1 .com_col .value-copy { grid-column:2; grid-row:1; min-width:0; }
html body #companyView1 .value-copy .value-heading { margin:24px 0 0; padding:0; color:#252525; font-size:20px; line-height:32px; font-weight:600; word-break:keep-all; }
html body #companyView1 .value-copy p { margin:16px 0 0; font-size:16px; line-height:28px; word-break:keep-all; overflow-wrap:break-word; }
@media(max-width:960px) { html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { gap:32px; } html body #companyView1 .value-copy .value-heading { font-size:18px; line-height:28px; margin-top:20px; } }
@media(max-width:600px) { html body #companyView1 .comm_cont { gap:48px; } html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { grid-template-columns:1fr; gap:24px; } html body #companyView1 .com_col .value-copy { grid-column:1; grid-row:2; } html body #companyView1 .value-copy .value-heading { margin-top:16px; } }
html body #companyView1 .value-copy .value-heading { text-align:left; }

html body #companyView1 .company_text_info { font-size:20px; line-height:32px; }

/* Compact image proportions and a separate English eyebrow label. */
html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { grid-template-columns:minmax(0,.85fr) minmax(0,1fr); }
html body #companyView1 .com_col .value-image { aspect-ratio:1.55; object-fit:cover; }
html body #companyView1 .value-label { display:block; margin:0 0 10px; padding:0; color:#85858f; font-size:14px; line-height:20px; font-weight:500; text-align:left; }
@media(max-width:600px) { html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { grid-template-columns:1fr; } }
/* Left-aligned introduction follows the full page content grid. */
html body #companyView1 .company_text_info { width:100%; max-width:none; text-wrap:pretty; }

/* Smaller illustration column and stronger narrative hierarchy. */
html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { grid-template-columns:minmax(0,.7fr) minmax(0,1fr); }
html body #companyView1 .com_col:nth-child(n) strong { font-size:32px; line-height:44px; }
html body #companyView1 .value-label { font-size:15px; line-height:22px; }
html body #companyView1 .value-copy .value-heading { font-size:22px; line-height:34px; }
html body #companyView1 .value-copy p { font-size:18px; line-height:30px; }
@media(max-width:960px) { html body #companyView1 .com_col:nth-child(n) strong { font-size:28px; line-height:40px; } html body #companyView1 .value-copy .value-heading { font-size:20px; line-height:32px; } }
@media(max-width:600px) { html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { grid-template-columns:1fr; } html body #companyView1 .value-copy p { font-size:17px; line-height:29px; } }
/* Korean category label, statement title, then supporting body. */
html body #companyView1 .value-copy .value-heading { margin:0; font-size:32px; line-height:44px; font-weight:700; }
html body #companyView1 .value-copy p { margin-top:24px; }
@media(max-width:960px) { html body #companyView1 .value-copy .value-heading { font-size:28px; line-height:40px; } }
@media(max-width:600px) { html body #companyView1 .value-copy .value-heading { font-size:26px; line-height:38px; } html body #companyView1 .value-copy p { margin-top:20px; } }
html body #companyView1 .company_text_info .overview-copy-break { display:initial; }
@media(max-width:960px) { html body #companyView1 .company_text_info .overview-copy-break { display:none; } }

html body #companyView1 .company_text_info { font-size:22px; line-height:36px; }

/* Stronger type balance alongside the value illustrations. */
html body #companyView1 .value-label { font-size:17px; line-height:26px; margin-bottom:12px; }
html body #companyView1 .value-copy .value-heading { font-size:36px; line-height:48px; text-wrap:balance; }
html body #companyView1 .value-copy p { font-size:20px; line-height:34px; margin-top:24px; }
@media(max-width:1100px) { html body #companyView1 .value-copy .value-heading { font-size:32px; line-height:44px; } html body #companyView1 .value-copy p { font-size:19px; line-height:32px; } }
@media(max-width:600px) { html body #companyView1 .value-label { font-size:16px; line-height:24px; } html body #companyView1 .value-copy .value-heading { font-size:28px; line-height:40px; } html body #companyView1 .value-copy p { font-size:18px; line-height:30px; margin-top:20px; } }
html body #companyView1 .value-heading .value-title-break { display:initial; }
@media(max-width:600px) { html body #companyView1 .value-heading .value-title-break { display:none; } }

@media(min-width:601px) { html body #companyView1 .comm_cont { gap:80px; } }

/* History shares the overview introduction and uses a restrained editorial timeline. */
html body #companyView2 { width:100%; max-width:1440px; margin:0 auto; padding:88px 0 112px; box-sizing:border-box; }
html body #companyView2 > .company_topic { display:block; position:static; width:auto; max-width:none; margin:0 0 36px; padding:0; color:#151515; background:none; font-size:44px; line-height:56px; font-weight:700; text-align:left; word-break:keep-all; }
html body #companyView2 > .company_topic::before,html body #companyView2 > .company_topic::after { content:none; }
html body #companyView2 > .tit_explain { width:auto; max-width:none; margin:0; padding:0; color:#626262; font-size:22px; line-height:36px; font-weight:400; text-align:left; word-break:keep-all; }
html body #companyView2 .history_cont { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); align-items:start; gap:80px; width:100%; max-width:none; margin:72px 0 0; padding:0; border:0; background:none; }
html body #companyView2 .history_cont::after { content:none; }
html body #companyView2 .history_title { float:none; position:sticky; top:128px; left:auto; bottom:auto; width:auto; padding:16px 0; overflow:visible; background:none; text-align:left; }
html body #companyView2 .history-eyebrow { display:block; color:#85858f; font-size:14px; line-height:22px; font-weight:500; }
html body #companyView2 .history_title strong { display:block; margin:20px 0 32px; padding:0; background:none; color:#202020; font-size:36px; line-height:50px; font-weight:700; word-break:keep-all; }
html body #companyView2 .history-year-nav { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
html body #companyView2 .history-year-nav a { padding:4px 0; color:#777; font-size:22px; line-height:30px; font-weight:500; text-decoration:none; }
html body #companyView2 .history-year-nav a:hover,html body #companyView2 .history-year-nav a:focus-visible { color:#111; text-decoration:underline; text-underline-offset:7px; }
html body #companyView2 #ul_history { float:none; width:100%; padding:0 0 0 48px; margin:0; border-left:1px solid #e0e0e4; box-sizing:border-box; }
html body #companyView2 #ul_history > li { position:relative; display:block; float:none; width:100%; margin:0 0 64px; padding:0 0 56px; border:0; border-bottom:1px solid #ececef; scroll-margin-top:128px; }
html body #companyView2 #ul_history > li:last-child { margin:0; padding-bottom:0; border-bottom:0; }
html body #companyView2 #ul_history > li::before { content:''; position:absolute; left:-54px; top:32px; width:10px; height:10px; border:2px solid #aaaab5; border-radius:50%; background:#fff; }
html body #companyView2 #ul_history > li > span { display:block; float:none; width:auto; margin:0 0 32px; color:#222; font-size:64px; line-height:76px; font-weight:600; }
html body #companyView2 .history_data { float:none; width:100%; border:0; }
html body #companyView2 .history_data dl { display:grid; grid-template-columns:100px minmax(0,1fr); gap:24px; margin:0 0 28px; padding:0; }
html body #companyView2 .history_data dl:last-child { margin-bottom:0; }
html body #companyView2 .history_data dt,html body #companyView2 .history_data dd,html body #companyView2 .history_data dl:last-child dd { float:none; width:auto; margin:0; padding:0; border:0; text-align:left; }
html body #companyView2 .history_data dt::after,html body #companyView2 .history_data dl::after { content:none; }
html body #companyView2 .history_data dt strong { color:#85858f; font-size:16px; line-height:32px; font-weight:400; border:0; }
html body #companyView2 .history_data dd { color:#333; font-size:20px; line-height:32px; word-break:keep-all; overflow-wrap:break-word; }
@media(max-width:1520px) { html body #companyView2 { padding-left:40px; padding-right:40px; } }
@media(max-width:1100px) { html body #companyView2 .history_cont { gap:40px; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); } html body #companyView2 .history_title strong { font-size:30px; line-height:44px; } }
@media(max-width:960px) { html body #companyView2 { padding-left:24px; padding-right:24px; } html body #companyView2 .history_cont { grid-template-columns:1fr; gap:40px; margin-top:64px; } html body #companyView2 .history_title { position:static; padding:0; } html body #companyView2 .history_title strong { margin:12px 0 20px; } html body #companyView2 .history-year-nav { flex-direction:row; gap:32px; } }
@media(max-width:600px) { html body #companyView2 { padding:56px 16px 96px; } html body #companyView2 > .company_topic { font-size:28px; line-height:40px; margin-bottom:32px; } html body #companyView2 > .tit_explain { font-size:22px; line-height:36px; } html body #companyView2 .history-intro-break { display:none; } html body #companyView2 .history_title strong { font-size:28px; line-height:40px; } html body #companyView2 #ul_history { padding-left:24px; } html body #companyView2 #ul_history > li > span { font-size:48px; line-height:60px; margin-bottom:24px; } html body #companyView2 #ul_history > li::before { left:-30px; top:24px; } html body #companyView2 .history_data dl { grid-template-columns:1fr; gap:6px; margin-bottom:28px; } html body #companyView2 .history_data dd { font-size:18px; line-height:30px; } }
html body #companyView2 #ul_history > li > span { text-align:left; }
html body #companyView2 .history-year-nav { padding:0; margin:0; }
html body #companyView2 .history-year-nav a { display:block; width:auto; min-width:0; margin:0; text-align:left; background:none; border:0; }

html body #companyView2 #ul_history > li > span { background:none; padding:0; height:auto; border:0; }
html body #companyView2 #ul_history > li > span::before,html body #companyView2 #ul_history > li > span::after { content:none; }

/* A more substantial timeline with no duplicate year navigation. */
html body #companyView2 #ul_history { position:relative; border-left:0; background:linear-gradient(180deg,#d9d2f0 0%,#9481d8 24%,#edf0f4 38%,#edf0f4 100%) 0 36px / 6px calc(100% - 36px) no-repeat; }
html body #companyView2 #ul_history > li::before { left:-57px; top:25px; width:24px; height:24px; box-sizing:border-box; border:3px solid #edf0f4; background:#edf0f4; box-shadow:inset 0 0 0 3px #fff; }
html body #companyView2 #ul_history > li:first-child::before { border-color:#9481d8; background:#9481d8; }
html body #companyView2 .history_title strong { margin-bottom:0; }
@media(max-width:600px) {
 html body #companyView2 #ul_history { background-position:0 30px; background-size:6px calc(100% - 30px); }
 html body #companyView2 #ul_history > li::before { left:-33px; top:19px; }
}
/* History timeline uses the full content column from the left edge. */
html body #companyView2 .history_title { display:none; }
html body #companyView2 .history_cont { display:block; }
html body #companyView2 #ul_history { width:100%; }
/* Restore the introduction and make the timeline reflect reading progress. */
html body #companyView2 .history_title { display:block; }
html body #companyView2 .history_cont { display:grid; }
html body #companyView2 #ul_history { --history-progress:0%; position:relative; background:none; border:0; padding-bottom:112px; margin-bottom:-112px; }
html body #companyView2 #ul_history::before { content:''; display:block; position:absolute; left:0; top:28px; bottom:0; width:6px; background:#edf0f4; }
html body #companyView2 #ul_history::after { content:''; display:block; clear:none; position:absolute; left:0; top:28px; width:6px; height:var(--history-progress); max-height:calc(100% - 28px); background:#8b7ad2; }
html body #companyView2 #ul_history > li { z-index:1; }
html body #companyView2 #ul_history > li > span { font-size:48px; line-height:60px; }
html body #companyView2 #ul_history > li::before { top:17px; border-color:#edf0f4; background:#edf0f4; }
html body #companyView2 #ul_history > li.is-reached::before { border-color:#8b7ad2; background:#8b7ad2; }
@media(max-width:600px) { html body #companyView2 #ul_history { padding-bottom:96px; margin-bottom:-96px; } html body #companyView2 #ul_history > li > span { font-size:40px; line-height:52px; } html body #companyView2 #ul_history > li::before { top:15px; } html body #companyView2 #ul_history::before,html body #companyView2 #ul_history::after { top:26px; } }
/* Message first, with the English label below and a soft progress tip. */
html body #companyView2 .history_title { display:flex; flex-direction:column; }
html body #companyView2 .history_title strong { order:0; margin:0 0 20px; }
html body #companyView2 .history-eyebrow { order:1; }
html body #companyView2 #ul_history::after { background:linear-gradient(to bottom,#8b7ad2 0%,#8b7ad2 max(0px,calc(100% - 100px)),rgba(139,122,210,0) 100%); }
/* Overview spacing: distinguish section breaks from related text spacing. */
html body #companyView1 { padding-top:104px; padding-bottom:144px; }
html body #companyView1 .company_topic { margin-bottom:40px; }
html body #companyView1 .company_text_info + .company_text_info { margin-top:32px; }
html body #companyView1 .company_cont { margin-top:112px; }
html body #companyView1 .comm_cont { gap:120px; }
html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { column-gap:80px; }
html body #companyView1 .value-label { margin-bottom:16px; }
html body #companyView1 .value-copy p { margin-top:32px; }
@media(max-width:1100px) { html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { column-gap:48px; } }
@media(max-width:960px) { html body #companyView1 { padding-top:88px; padding-bottom:120px; } html body #companyView1 .company_cont { margin-top:88px; } html body #companyView1 .comm_cont { gap:96px; } html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { column-gap:36px; } }
@media(max-width:600px) { html body #companyView1 { padding-top:64px; padding-bottom:96px; } html body #companyView1 .company_topic { margin-bottom:32px; } html body #companyView1 .company_text_info + .company_text_info { margin-top:24px; } html body #companyView1 .company_cont { margin-top:72px; } html body #companyView1 .comm_cont { gap:72px; } html body #companyView1 .com_col,html body #companyView1 .com_col:first-child { gap:28px; } html body #companyView1 .value-label { margin-bottom:12px; } html body #companyView1 .value-copy p { margin-top:24px; } }
@media(min-width:961px) { html body #companyView1 .comm_cont { gap:100px; } }

/* Subpage tabs stay below the measured header without leaving document flow. */
html body .wonit-sub-tabs { position:sticky; top:var(--wonit-sticky-header-height,90px); z-index:190; background:#fff; isolation:isolate; }
html body .wonit-sub-tabs::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:#fff; z-index:-1; pointer-events:none; }
html body #companyView2 .history_title { top:calc(var(--wonit-sticky-header-height,90px) + 96px); }
@media(max-width:1200px) { html body .wonit-sub-tabs { top:var(--wonit-sticky-header-height,72px); } }
/* Allow sticky elements to follow the full subpage instead of a viewport-height wrapper. */
html body:has(.wonit-sub-tabs) { height:auto !important; overflow:visible !important; }
html body:has(.wonit-sub-tabs) section.wrap { height:auto !important; min-height:100vh; overflow:visible !important; }

/* The history introduction scrolls with its first year and shares its top edge. */
html body #companyView2 .history_title { position:static; top:auto; padding:0; align-self:start; }

/* Reading mode: keep tabs visible while the header follows scroll direction. */
html body:has(.wonit-sub-tabs) header.site-header { transition:transform .22s ease; }
html body .wonit-sub-tabs { transition:top .22s ease; }
html.wonit-sub-reading body header.site-header { transform:translateY(-100%) !important; pointer-events:none; }
html.wonit-sub-reading body .wonit-sub-tabs { top:0 !important; }
@media(prefers-reduced-motion:reduce) { html body:has(.wonit-sub-tabs) header.site-header,html body .wonit-sub-tabs { transition:none; } }
/* CI follows the established company content grid and type scale. */
html body #companyView3 { width:100%; max-width:1440px; margin:0 auto; padding:104px 0 144px; box-sizing:border-box; }
html body #companyView3 > .company_topic { display:block; position:static; width:auto; max-width:none; margin:0 0 40px; padding:0; color:#151515; background:none; font-size:44px; line-height:56px; font-weight:700; text-align:left; word-break:keep-all; }
html body #companyView3 > .company_topic::before,html body #companyView3 > .company_topic::after { content:none; }
html body #companyView3 > .tit_explain { width:100%; max-width:none; margin:0; padding:0; color:#626262; font-size:22px; line-height:36px; font-weight:400; text-align:left; word-break:keep-all; }
html body #companyView3 .ci_cont { width:100%; max-width:none; margin:112px 0 0; padding:0; border:0; background:none; }
html body #companyView3 .symbol_box { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:80px; align-items:center; width:100%; margin:0; padding:0; background:none; border:0; }
html body #companyView3 .symbol_box::after { content:none; }
html body #companyView3 .symbol_txt { grid-column:2; grid-row:1; float:none; width:auto; padding:0; margin:0; text-align:left; }
html body #companyView3 .ci-label { display:block; margin:0 0 16px; color:#85858f; font-size:17px; line-height:26px; font-weight:500; }
html body #companyView3 .symbol_txt strong { display:block; margin:0 0 32px; padding:0; color:#202020; font-size:36px; line-height:48px; font-weight:700; word-break:keep-all; }
html body #companyView3 .symbol_txt p { width:auto; margin:0; padding:0; color:#626262; background:none; font-size:20px; line-height:34px; font-weight:400; word-break:keep-all; overflow-wrap:break-word; }
html body #companyView3 .symbol_txt p + p { margin-top:20px; }
html body #companyView3 .symbol_img { grid-column:1; grid-row:1; float:none; width:100%; margin:0; padding:0; }
html body #companyView3 .symbol_img .logo_bg { display:flex; align-items:center; justify-content:center; width:100%; height:auto; min-height:300px; aspect-ratio:1.55; padding:40px; margin:0; border:1px solid #e8e8eb; border-radius:24px; background:#fafafa; box-sizing:border-box; }
html body #companyView3 .symbol_img .logo_bg img { display:block; width:100%; max-width:360px; height:auto; max-height:180px; margin:0; padding:0; object-fit:contain; }
@media(max-width:1520px) { html body #companyView3 { padding-left:40px; padding-right:40px; } }
@media(max-width:1100px) { html body #companyView3 .symbol_box { gap:48px; } html body #companyView3 .symbol_txt strong { font-size:32px; line-height:44px; } }
@media(max-width:960px) { html body #companyView3 { padding:88px 24px 120px; } html body #companyView3 .ci_cont { margin-top:88px; } html body #companyView3 .symbol_box { gap:36px; } html body #companyView3 .symbol_img .logo_bg { min-height:240px; padding:24px; } }
@media(max-width:600px) { html body #companyView3 { padding:64px 16px 96px; } html body #companyView3 > .company_topic { font-size:28px; line-height:40px; margin-bottom:32px; } html body #companyView3 .ci-intro-break { display:none; } html body #companyView3 .ci_cont { margin-top:72px; } html body #companyView3 .symbol_box { grid-template-columns:1fr; gap:28px; } html body #companyView3 .symbol_txt { grid-column:1; grid-row:2; } html body #companyView3 .ci-label { font-size:16px; line-height:24px; margin-bottom:12px; } html body #companyView3 .symbol_txt strong { font-size:28px; line-height:40px; margin-bottom:24px; } html body #companyView3 .symbol_txt p { font-size:18px; line-height:30px; } html body #companyView3 .symbol_img .logo_bg { min-height:200px; border-radius:18px; } }
/* Directions uses the same company typography and a map/details grid. */
html body #companyView5 { width:100%; max-width:1440px; margin:0 auto; padding:104px 0 144px; box-sizing:border-box; }
html body #companyView5 > .company_topic { display:block; position:static; width:auto; margin:0 0 40px; padding:0; color:#151515; background:none; font-size:44px; line-height:56px; font-weight:700; text-align:left; word-break:keep-all; }
html body #companyView5 > .company_topic::before,html body #companyView5 > .company_topic::after { content:none; }
html body #companyView5 > .tit_explain { width:100%; max-width:none; margin:0; padding:0; color:#626262; font-size:22px; line-height:36px; font-weight:400; text-align:left; word-break:keep-all; }
html body #companyView5 #location_tabs { display:none; }
html body #companyView5 .map_body { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:80px; width:100%; height:auto; margin:112px 0 0; padding:0; background:none; overflow:visible; }
html body #companyView5 .map_form { position:relative; float:none; width:100%; height:500px; margin:0; padding:0; overflow:hidden; border:1px solid #e7e7eb; border-radius:24px; box-sizing:border-box; }
html body #companyView5 .map_box { position:absolute; inset:0; width:100% !important; height:100% !important; }
html body #companyView5 .map-fallback { position:absolute; inset:0; width:100%; height:100%; border:0; }
html body #companyView5 .map-fallback[hidden] { display:none; }
html body #companyView5 .map_side { position:static; float:none; top:auto; left:auto; width:auto; height:auto; padding:0; margin:0; border:0; background:none; text-align:left; }
html body #companyView5 .directions-label { display:block; margin-bottom:16px; color:#85858f; font-size:17px; line-height:26px; }
html body #companyView5 .directions-heading strong { display:block; font-size:36px; line-height:48px; font-weight:700; color:#202020; }
html body #companyView5 .directions-details { margin:32px 0 0; padding:0; }
html body #companyView5 .directions-details > div { display:grid; grid-template-columns:80px minmax(0,1fr); gap:20px; padding:20px 0; border-bottom:1px solid #ececef; }
html body #companyView5 .directions-details dt { color:#85858f; font-size:17px; line-height:32px; font-weight:400; }
html body #companyView5 .directions-details dd { margin:0; color:#333; font-size:20px; line-height:32px; word-break:keep-all; }
html body #companyView5 .directions-details a { color:inherit; }
html body #companyView5 .directions-postcode { color:#85858f; font-size:16px; white-space:nowrap; }
html body #companyView5 .directions-line { font-size:16px; color:#526d9d; }
html body #companyView5 .directions-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
html body #companyView5 .directions-actions a { display:inline-flex; align-items:center; gap:20px; min-height:48px; padding:0 20px; border:1px solid #bfc0c6; border-radius:999px; color:#252525; font-size:16px; line-height:24px; background:#fff; }
html body #companyView5 .directions-actions a:hover { border-color:#333; background:#f7f7f8; }
@media(max-width:1520px) { html body #companyView5 { padding-left:40px; padding-right:40px; } }
@media(max-width:1100px) { html body #companyView5 .map_body { gap:40px; } }
@media(max-width:960px) { html body #companyView5 { padding:88px 24px 120px; } html body #companyView5 .map_body { grid-template-columns:1fr; margin-top:88px; gap:40px; } html body #companyView5 .map_form { height:420px; } }
@media(max-width:600px) { html body #companyView5 { padding:64px 16px 96px; } html body #companyView5 > .company_topic { font-size:28px; line-height:40px; margin-bottom:32px; } html body #companyView5 .directions-intro-break { display:none; } html body #companyView5 .map_body { margin-top:72px; gap:32px; } html body #companyView5 .map_form { height:320px; border-radius:18px; } html body #companyView5 .directions-heading strong { font-size:28px; line-height:40px; } html body #companyView5 .directions-details > div { grid-template-columns:64px minmax(0,1fr); gap:16px; } html body #companyView5 .directions-details dd { font-size:18px; line-height:30px; } }
html body #companyView5 .map-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; box-sizing:border-box; background:#f6f6f8; text-align:center; }
html body #companyView5 .map-fallback strong { color:#252525; font-size:24px; line-height:34px; font-weight:600; }
html body #companyView5 .map-fallback p { margin:0; color:#666; font-size:17px; line-height:28px; }
html body #companyView5 .map-fallback a { display:inline-flex; align-items:center; gap:16px; padding:12px 20px; border:1px solid #c8c8d0; border-radius:999px; color:#333; font-size:16px; line-height:24px; background:#fff; }
html body #companyView5 .map_box { z-index:0; }
html body #companyView5 .map-fallback { z-index:1; }

/* Monochrome history progress accent. */
html body #companyView2 #ul_history::after { background:linear-gradient(to bottom,#222 0%,#222 max(0px,calc(100% - 100px)),rgba(34,34,34,0) 100%); }
html body #companyView2 #ul_history > li.is-reached::before { border-color:#222; background:#222; }
html body #companyView3 .symbol_img .logo_bg img { filter:brightness(0); }

/* Use the same wordmark crop as the header, scaled proportionally. */
html body #companyView3 .ci-wordmark { display:block; position:relative; width:100%; max-width:300px; aspect-ratio:89/20; overflow:hidden; }
html body #companyView3 .symbol_img .ci-wordmark img { position:absolute; width:111.235955% !important; max-width:none; height:auto; max-height:none; left:-3.370787%; top:-95%; margin:0; padding:0; }
/* Softer violet-to-blue history progress, fading into the neutral rail. */
html body #companyView2 #ul_history::after { background:linear-gradient(to bottom,#a179d7 0%,#897be0 45%,#6389df 100%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 max(0px,calc(100% - 100px)),transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 max(0px,calc(100% - 100px)),transparent 100%); }
html body #companyView2 #ul_history > li.is-reached::before { border-color:#a179d7; background:#a179d7; }
html body #companyView2 #ul_history > li.is-reached:nth-child(2)::before { border-color:#897be0; background:#897be0; }
html body #companyView2 #ul_history > li.is-reached:nth-child(n+3)::before { border-color:#6389df; background:#6389df; }
/* Company section eyebrow labels share their title color. */
html body #companyView1 .value-label,html body #companyView2 .history-eyebrow,html body #companyView3 .ci-label,html body #companyView5 .directions-label { color:#202020; }
/* A real, attributed map capture with only the essential visit details beside it. */
html body #companyView5 .directions-map-image { display:block; width:100%; overflow:hidden; border:1px solid #e7e7eb; border-radius:24px; background:#f6f6f8; box-sizing:border-box; }
html body #companyView5 .directions-map-image img { display:block; width:100%; height:auto; }
html body #companyView5 .directions-details { margin-top:0; }
html body #companyView5 .directions-details > div:first-child { padding-top:0; }
@media(max-width:600px) { html body #companyView5 .directions-map-image { border-radius:18px; } }
html body #companyView5 .directions-heading + .directions-details { margin-top:32px; }

/* Match CI and directions introduction spacing to history at each breakpoint. */
html body #companyView3 .ci_cont,html body #companyView5 .map_body { margin-top:72px; }
@media(max-width:960px) { html body #companyView3 .ci_cont,html body #companyView5 .map_body { margin-top:64px; } }
/* Directions: centered title, map and essential office details. */
html body #companyView5 .company_topic { text-align:center; }
html body #companyView5 .map_body { display:block; max-width:none; margin:64px auto 0; }
html body #companyView5 #wonit-directions-map { position:relative; width:100%; height:480px; overflow:hidden; border:1px solid #e7e7eb; box-sizing:border-box; }
html body #companyView5 #wonit-directions-map img { max-width:none; }
html body #companyView5 .map_side { width:100%; max-width:none; margin:48px auto 0; padding:0; }
html body #companyView5 .directions-heading strong { font-size:28px; line-height:40px; }
html body #companyView5 .directions-heading + .directions-details { margin-top:24px; }
html body #companyView5 .directions-details > div { grid-template-columns:100px minmax(0,1fr); }
@media(max-width:600px) {
 html body #companyView5 .map_body { margin-top:40px; }
 html body #companyView5 #wonit-directions-map { height:340px; }
 html body #companyView5 .map_side { margin-top:32px; }
 html body #companyView5 .directions-details > div { grid-template-columns:64px minmax(0,1fr); }
}
html body #companyView5 .directions-map-preview { display:block; width:100%; height:100%; object-fit:cover; }
html body #companyView5 .directions-map-credit { position:absolute; bottom:0; right:0; padding:4px 8px; background:rgba(255,255,255,.9); color:#333; font-size:12px; z-index:2; }

/* Keep page tabs beneath the mega-menu backdrop while navigation is open. */
html body:has(.site-header .has-mega.open) .wonit-sub-tabs { z-index:170; }

/* Balance timeline years with the adjacent introduction. */
html body #companyView2 #ul_history > li > span { font-size:40px; line-height:60px; }
@media(max-width:600px) { html body #companyView2 #ul_history > li > span { font-size:36px; line-height:52px; } }

/* CI wordmark on a quiet construction grid. */
html body #companyView3 .symbol_img .logo_bg {
 background-color:#fafafa;
 background-image:linear-gradient(rgba(110,115,125,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(110,115,125,.09) 1px,transparent 1px);
 background-size:24px 24px;
 background-position:center;
}
html body #companyView3 .ci-wordmark { max-width:240px; }
@media(max-width:600px) { html body #companyView3 .ci-wordmark { max-width:200px; } }
/* Light particle-wave visual for AI solution subpages. */
html body .sub_head.ai.ai-solutions-visual { isolation:isolate; background:#f3f5f8 !important; }
html body .sub_head.ai.ai-solutions-visual::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:url('../img/ai/sub-visual-particle-waves.jpg') center 52% / cover no-repeat; filter:saturate(.65) brightness(1.04); }
html body .sub_head.ai.ai-solutions-visual::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(to bottom,rgba(255,255,255,.5),rgba(255,255,255,.16) 65%,rgba(255,255,255,.04)); }
html body .sub_head.ai.ai-solutions-visual h2 { position:relative; z-index:1; color:#20242d !important; text-shadow:none !important; }
@media(max-width:600px) { html body .sub_head.ai.ai-solutions-visual::before { background-position:center 62%; } }
/* White AI visual title with a soft slate backdrop. */
html body .sub_head.ai.ai-solutions-visual::after { background:linear-gradient(105deg,rgba(49,61,85,.48),rgba(67,81,107,.38) 60%,rgba(89,104,129,.24)); }
html body .sub_head.ai.ai-solutions-visual h2 { color:#fff !important; text-shadow:0 1px 8px rgba(30,40,60,.14) !important; }

/* Larger wave rhythm lower in the visual, with a quieter title area. */
html body .sub_head.ai.ai-solutions-visual::before { background-size:120% auto; background-position:center 38%; }
html body .sub_head.ai.ai-solutions-visual::after { background:linear-gradient(to bottom,rgba(75,88,112,.46),rgba(75,88,112,.36) 55%,rgba(89,104,129,.24)); }
@media(max-width:600px) { html body .sub_head.ai.ai-solutions-visual::before { background-size:auto 170%; background-position:center 30%; } }

/* Reveal a little more of the lower particle-wave detail. */
html body .sub_head.ai.ai-solutions-visual::before { background-position:center 42%; }
@media(max-width:600px) { html body .sub_head.ai.ai-solutions-visual::before { background-position:center 34%; } }

/* Clear wave detail, with contrast concentrated behind the white title. */
html body .sub_head.ai.ai-solutions-visual::before { filter:saturate(.82) brightness(1.01) contrast(1.08); }
html body .sub_head.ai.ai-solutions-visual::after { background:radial-gradient(ellipse 34% 80% at 50% 44%,rgba(47,61,88,.48) 0%,rgba(62,77,103,.26) 48%,rgba(70,86,110,0) 100%),linear-gradient(rgba(62,77,103,.08),rgba(62,77,103,.05)); }
html body .sub_head.ai.ai-solutions-visual h2 { text-shadow:0 2px 10px rgba(28,40,65,.24) !important; }

/* Compact CI thumbnail with a clean outline. */
html body #companyView3 .symbol_box { grid-template-columns:344px minmax(0,1fr); gap:40px; align-items:center; }
html body #companyView3 .symbol_img .logo_bg { min-height:0; height:132px; aspect-ratio:auto; padding:24px; border:1px solid #e8e8ed; border-radius:16px; background:#fff; box-shadow:none; }
html body #companyView3 .ci-wordmark { max-width:200px; }
@media(max-width:960px) { html body #companyView3 .symbol_box { grid-template-columns:280px minmax(0,1fr); gap:32px; } }
@media(max-width:600px) { html body #companyView3 .symbol_box { grid-template-columns:1fr; gap:28px; } html body #companyView3 .symbol_img { max-width:344px; } }
/* Give the CI thumbnail more breathing room around a smaller wordmark. */
html body #companyView3 .symbol_img .logo_bg { height:160px; }
html body #companyView3 .ci-wordmark { max-width:170px; }

/* CI frame in 4:3, preserving the current wordmark size. */
html body #companyView3 .symbol_img .logo_bg { height:auto; aspect-ratio:4 / 3; }

html body #companyView3 .ci-wordmark { max-width:150px; }

/* Wider and shallower CI logo frame. */
html body #companyView3 .symbol_box { grid-template-columns:400px minmax(0,1fr); }
html body #companyView3 .symbol_img .logo_bg { height:220px; aspect-ratio:auto; }
@media(max-width:960px) { html body #companyView3 .symbol_box { grid-template-columns:320px minmax(0,1fr); } html body #companyView3 .symbol_img .logo_bg { height:200px; } }
@media(max-width:600px) { html body #companyView3 .symbol_box { grid-template-columns:1fr; } html body #companyView3 .symbol_img { max-width:400px; } html body #companyView3 .symbol_img .logo_bg { height:200px; } }
html body #companyView3 .symbol_txt p { text-wrap:pretty; }
@media(max-width:1100px) { html body #companyView3 .ci-copy-break { display:none; } }

html body #companyView3 .symbol_txt p { text-wrap:balance; }
html body #companyView3 .symbol_txt p + p { margin-top:20px; }

/* Minimal glass AI visual with clear space for the shared white title. */
html body .sub_head.ai.ai-solutions-visual { background:#9092ad !important; }
html body .sub_head.ai.ai-solutions-visual::before { background-image:url('../img/ai/sub-visual-minimal-glass-v4.png'); background-size:cover; background-position:center 39%; filter:none; }
html body .sub_head.ai.ai-solutions-visual::after { background:linear-gradient(90deg,rgba(55,57,85,.08),rgba(55,57,85,.04) 60%,transparent); }
@media(max-width:600px) { html body .sub_head.ai.ai-solutions-visual::before { background-size:auto 110%; background-position:68% center; } html body .sub_head.ai.ai-solutions-visual::after { background:rgba(55,57,85,.18); } }
/* Business analytics follows the first two AI product pages. */
html body .biz-analytics-page .doc-ai-eyebrow,
html body .biz-analytics-page .doc-ai-heading>span,
html body .biz-analytics-page .privacy-showcase-row>div>span,
html body .biz-analytics-page .doc-ai-cta>div>span { display:none; }
html body .biz-analytics-page .biz-impact { margin-bottom:144px; }
html body .biz-analytics-page .biz-impact-grid { gap:0; }
html body .biz-analytics-page .biz-impact-grid article { box-shadow:none; background:none; border-radius:0; }
html body .biz-analytics-page .biz-showcase { margin:0 0 144px; }
html body .biz-analytics-page .privacy-showcase-row { display:grid; grid-template-columns:minmax(0,700fr) minmax(0,668fr); align-items:start; gap:72px; margin-bottom:100px; }
html body .biz-analytics-page .privacy-showcase-row figure { margin:0; border-radius:16px; overflow:hidden; background:#f6f6f8; box-shadow:none; }
html body .biz-analytics-page .privacy-showcase-row img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
html body .biz-analytics-page .privacy-showcase-row>div { padding-top:10px; }
html body .biz-analytics-page .privacy-showcase-row h3 { margin:0; color:#202020; font-size:36px; line-height:48px; letter-spacing:0; word-break:keep-all; }
html body .biz-analytics-page .privacy-showcase-row p,
html body .biz-analytics-page .privacy-showcase-row li { color:#626262; font-size:20px; line-height:34px; letter-spacing:0; word-break:keep-all; }
html body .biz-analytics-page .privacy-showcase-row p { margin:24px 0; }
html body .biz-analytics-page .biz-cycle { margin:0 0 100px; padding:56px; background:#f6f6f8; border:0; border-radius:16px; }
html body .biz-analytics-page .biz-cycle ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; padding:0; }
html body .biz-analytics-page .biz-cycle li { padding:24px 0; background:none; border:0; border-top:1px solid #c8c8cf; border-radius:0; box-shadow:none; }
html body .biz-analytics-page .biz-cycle li::after { display:none; }
html body .biz-analytics-page .biz-cycle li b { color:#626262; background:none; }
html body .biz-analytics-page .biz-note { border:0; border-radius:16px; background:#f6f6f8; color:#202020; }
@media(max-width:1100px){
 html body .biz-analytics-page .privacy-showcase-row { gap:40px; }
 html body .biz-analytics-page .privacy-showcase-row h3 { font-size:32px; line-height:44px; }
 html body .biz-analytics-page .privacy-showcase-row p,html body .biz-analytics-page .privacy-showcase-row li { font-size:19px; line-height:32px; }
 html body .biz-analytics-page .biz-cycle { padding:32px; }
 html body .biz-analytics-page .biz-cycle ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px){
 html body .biz-analytics-page .biz-impact,html body .biz-analytics-page .biz-showcase { margin-bottom:80px; }
 html body .biz-analytics-page .privacy-showcase-row { grid-template-columns:1fr; gap:28px; margin-bottom:64px; }
 html body .biz-analytics-page .privacy-showcase-row.reverse figure { order:0; }
 html body .biz-analytics-page .privacy-showcase-row>div { padding:0; order:1; }
 html body .biz-analytics-page .privacy-showcase-row h3 { font-size:28px; line-height:40px; }
 html body .biz-analytics-page .privacy-showcase-row p,html body .biz-analytics-page .privacy-showcase-row li { font-size:18px; line-height:30px; }
 html body .biz-analytics-page .biz-cycle { padding:28px 24px; }
 html body .biz-analytics-page .biz-cycle ol { grid-template-columns:1fr; gap:12px; }
}
html body .biz-analytics-page .doc-ai-intro-copy { max-width:1040px !important; margin:0 auto 64px !important; text-align:center !important; }
html body .biz-analytics-page .doc-ai-intro-copy>p { max-width:900px !important; margin:32px auto 0 !important; }
html body .biz-analytics-page .doc-ai-tags { justify-content:center !important; }
html body .biz-analytics-page .doc-ai-eyebrow,html body .biz-analytics-page .doc-ai-heading>span,html body .biz-analytics-page .privacy-showcase-row>div>span,html body .biz-analytics-page .doc-ai-cta>div>span { display:none !important; }
/* Align the analytics introduction with the other AI page content grid. */
html body .biz-analytics-page .doc-ai-intro-copy { max-width:none !important; margin:0 0 64px !important; text-align:left !important; }
html body .biz-analytics-page .doc-ai-intro-copy>p { margin:32px 0 0 !important; }
html body .biz-analytics-page .doc-ai-tags { justify-content:flex-start !important; }
/* Lower the analytics composition slightly within its existing banner. */
html body .biz-analytics-page .biz-intro .doc-ai-visual { overflow:hidden; }
html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:translateY(12px) scale(1.065); transform-origin:center; }
@media(max-width:600px){ html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:translateY(8px) scale(1.065); } }
html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:translateY(24px) scale(1.065); }
@media(max-width:600px){ html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:translateY(16px) scale(1.065); } }
html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:translateY(24px) scale(1.14); }
@media(max-width:600px){ html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:translateY(16px) scale(1.14); } }

html body .biz-analytics-page .biz-cycle-infographic { display:grid; grid-template-columns:1fr minmax(280px,440px) 1fr; gap:40px 32px; padding:56px; background:#f7f7fa; }
html body .biz-cycle-infographic .doc-ai-heading { grid-column:1/-1; }
.biz-cycle-ring { grid-column:2; grid-row:2; position:relative; align-self:center; }
.biz-cycle-ring svg { display:block; width:100%; }
.biz-cycle-ring>div { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; text-align:center; }
.biz-cycle-ring strong { font-size:32px; color:#202020; }
.biz-cycle-ring span { font-size:15px; color:#626262; }
html body .biz-analytics-page .biz-cycle-infographic ol { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:1fr minmax(280px,440px) 1fr; grid-template-rows:1fr 1fr; gap:40px 32px; margin:0; padding:0; align-items:center; }
html body .biz-analytics-page .biz-cycle-infographic li { padding:20px 0 0; border:0; border-top:2px solid var(--step); background:none; text-align:left; }
html body .biz-analytics-page .biz-cycle-infographic li:nth-child(1){grid-column:3;grid-row:1;--step:#91b4ef;}
html body .biz-analytics-page .biz-cycle-infographic li:nth-child(2){grid-column:3;grid-row:2;--step:#b39ceb;}
html body .biz-analytics-page .biz-cycle-infographic li:nth-child(3){grid-column:1;grid-row:2;--step:#8c75e6;}
html body .biz-analytics-page .biz-cycle-infographic li:nth-child(4){grid-column:1;grid-row:1;--step:#637ce1;}
html body .biz-analytics-page .biz-cycle-infographic li::after,html body .biz-analytics-page .biz-cycle-infographic li::before,html body .biz-analytics-page .biz-cycle-infographic li b { display:none; }
html body .biz-analytics-page .biz-cycle-infographic li strong { display:block; margin:0 0 12px; font-size:24px; color:#202020; }
html body .biz-analytics-page .biz-cycle-infographic li span { font-size:17px; line-height:28px; color:#626262; }
@media(max-width:960px){
 html body .biz-analytics-page .biz-cycle-infographic { grid-template-columns:1fr; padding:32px; }
 .biz-cycle-ring { grid-column:1; grid-row:auto; width:100%; max-width:360px; margin:auto; }
 html body .biz-analytics-page .biz-cycle-infographic ol { grid-column:1; grid-row:auto; grid-template-columns:1fr 1fr; gap:28px; }
 html body .biz-analytics-page .biz-cycle-infographic li:nth-child(n) { grid-column:auto;grid-row:auto; }
}
@media(max-width:600px){ html body .biz-analytics-page .biz-cycle-infographic { padding:28px 24px; } html body .biz-analytics-page .biz-cycle-infographic ol { grid-template-columns:1fr; } }

/* Reference proportions: broad ring, white line icons and extended leader lines. */
html body .biz-analytics-page .biz-cycle-infographic { display:block; padding:48px 40px; }
html body .biz-analytics-page .biz-cycle-infographic .doc-ai-heading { margin-bottom:20px; }
html body .biz-cycle-infographic .biz-cycle-ring { display:block; width:100%; max-width:none; margin:0; }
.biz-cycle-ring>img { display:block; width:100%; height:auto; }
html body .biz-analytics-page .biz-cycle-infographic ol { display:none; }
@media(max-width:600px){
 html body .biz-analytics-page .biz-cycle-infographic { padding:28px 16px; }
 html body .biz-cycle-infographic .biz-cycle-ring { overflow:hidden; }
 .biz-cycle-ring>img { width:200%; max-width:none; margin-left:-50%; }
 html body .biz-analytics-page .biz-cycle-infographic ol { display:grid; grid-template-columns:1fr; margin-top:24px; }
}
/* Center the raised glass charts lower within the panoramic crop. */
html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:translateY(9%) scale(1.2); transform-origin:center; }
@media(max-width:600px){ html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:translateY(6%) scale(1.2); } }
/* Match business detail rows to the second AI tab. */
html body .biz-analytics-page .biz-showcase { display:grid; gap:80px; }
html body .biz-analytics-page .biz-showcase .privacy-showcase-row { margin:0; padding:0; border:0; }
html body .biz-analytics-page .biz-showcase .privacy-showcase-row figure { order:0; }
html body .biz-analytics-page .biz-showcase .privacy-showcase-row h3 { font-weight:700; text-wrap:balance; }
html body .biz-analytics-page .biz-showcase .privacy-showcase-row p { margin:24px 0 0; font-weight:400; }
html body .biz-analytics-page .biz-showcase .privacy-showcase-row ul { display:grid; gap:12px; margin:40px 0 0; padding:0; list-style:none; }
html body .biz-analytics-page .biz-showcase .privacy-showcase-row li { position:relative; padding:0 0 0 32px; border:0; border-radius:0; background:none; font-weight:400; }
html body .biz-analytics-page .biz-showcase .privacy-showcase-row li::before { content:''; position:absolute; left:0; top:5px; width:24px; height:24px; border:0; border-radius:0; transform:none; background:#000; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 11.5 4.6 4.5 7.4-7.4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 11.5 4.6 4.5 7.4-7.4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
@media(max-width:1100px){ html body .biz-analytics-page .biz-showcase .privacy-showcase-row li::before { top:4px; } }
@media(max-width:600px){ html body .biz-analytics-page .biz-showcase { gap:48px; } html body .biz-analytics-page .biz-showcase .privacy-showcase-row li::before { top:3px; } }

html body .biz-analytics-page > .biz-cycle-heading { margin:0 0 40px; }
@media(max-width:600px){ html body .biz-analytics-page > .biz-cycle-heading { margin-bottom:28px; } }

html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:none !important; object-position:center; }
/* Slightly enlarge the lowered composition without raising its focal point. */
html body .biz-analytics-page .biz-intro .doc-ai-visual img { transform:scale(1.05) !important; transform-origin:50% 65%; }
/* Identical inquiry layout and temporary background for all AI products. */
html body .sub_content .doc-ai-cta.wonit-ai-inquiry { position:relative; isolation:isolate; display:block; width:100vw; max-width:none; min-height:360px; margin:0 0 0 calc(50% - 50vw); padding:60px max(40px,calc((100vw - 1440px)/2)); border:0; border-radius:0; overflow:hidden; background:#f5f6f8; }
html body .sub_content .wonit-ai-inquiry::before { content:''; position:absolute; z-index:-1; width:620px; height:620px; right:4%; top:-125px; border-radius:50%; background:linear-gradient(135deg,#fff 10%,#dfe2e6 38%,#cbd0d6 60%,#fff 85%); mask-image:radial-gradient(circle,transparent 50%,#000 51%,#000 69%,transparent 70%); opacity:.65; transform:rotate(-18deg); }
html body .sub_content .wonit-ai-inquiry h3 { max-width:1000px; margin:0; color:#202020; font-size:32px; line-height:46px; font-weight:700; letter-spacing:0; word-break:keep-all; }
html body .sub_content .wonit-ai-inquiry p { max-width:1100px; margin:20px 0 0; color:#626262; font-size:20px; line-height:34px; letter-spacing:0; word-break:keep-all; }
html body .sub_content .wonit-ai-inquiry a { display:inline-flex; align-items:center; gap:12px; margin-top:32px; min-height:48px; width:auto; padding:0 24px; border:1px solid #222; border-radius:999px; background:transparent; color:#202020; font-size:16px; line-height:24px; font-weight:500; }
@media(max-width:600px){html body .sub_content .doc-ai-cta.wonit-ai-inquiry { min-height:0; padding:40px 16px; }html body .sub_content .wonit-ai-inquiry h3 { font-size:28px; line-height:40px; }html body .sub_content .wonit-ai-inquiry p { font-size:18px; line-height:30px; }html body .sub_content .wonit-ai-inquiry::before { width:420px;height:420px;right:-220px;top:-20px;opacity:.3; }}

html body #companyView3 .ci-wordmark img.wonit-ci-lockup { display:block; width:min(440px,85%); height:auto; max-height:none; margin:auto; object-fit:contain; filter:none; }
html body #companyView3 .symbol_txt p+p { margin-top:24px; }
@media(max-width:600px){ html body #companyView3 .symbol_txt br { display:none; } }
html body #companyView3 .ci-wordmark { display:flex !important; align-items:center; justify-content:center; width:100% !important; height:auto !important; overflow:visible !important; }
html body #companyView3 .ci-wordmark img.wonit-ci-lockup { position:static !important; inset:auto !important; transform:none !important; width:85% !important; max-width:440px !important; height:auto !important; padding:0 !important; }
/* Keep every AI inquiry banner aligned with the left content grid. */
html body .sub_content .doc-ai-cta.wonit-ai-inquiry { text-align:left !important; }
html body .sub_content .doc-ai-cta.wonit-ai-inquiry > div { text-align:left !important; margin-left:0 !important; margin-right:0 !important; }
html body .sub_content .doc-ai-cta.wonit-ai-inquiry h3,html body .sub_content .doc-ai-cta.wonit-ai-inquiry p { text-align:left !important; margin-left:0 !important; margin-right:0 !important; }
html body .sub_content .doc-ai-cta.wonit-ai-inquiry > a { margin-left:0 !important; margin-right:0 !important; }
/* Give the complete CI lockup enough presence inside its presentation box. */
html body #companyView3 .ci-wordmark { max-width:320px !important; aspect-ratio:auto; }
html body #companyView3 .ci-wordmark img.wonit-ci-lockup { width:100% !important; }
@media(max-width:600px){ html body #companyView3 .ci-wordmark { max-width:280px !important; } }

html body #companyView3 .ci-wordmark { max-width:220px !important; margin:0 auto !important; }
@media(max-width:600px){ html body #companyView3 .ci-wordmark { max-width:220px !important; } }