@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* RESET */

html, body, main, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr, textarea, select, input[type=text], input[type=radio], input[type=checkbox], input[type=button], input[type=image], input[type=password], input[type=reset], input[type=submit], input[type=email], input[type=color], input[type=date], input[type=datetime],input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], inpuyt[type=week] { margin: 0; padding: 0; border: 0; font: inherit; }
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow: auto; }
caption, figcaption { display: none; }
em, address { font-style: normal; }
label { cursor: pointer; }
legend { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; } /* for screen reader */
*:focus { outline: 0 none; }
a:link { text-decoration: none; }
a, button, input { font: inherit; background: none; border: 0 none; cursor: pointer; }
a { color: inherit; }

html, body { width: 100%; height: 100%; }
main { overflow-x: clip; } /* 풀블리드 요소(50vw 트릭)의 스크롤바 폭 초과분 클리핑 */

/* LAYOUT */

body { background-color: #ecf4ef; font: 400 18px/1.0 "Poppins", sans-serif; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }

header { display: flex; justify-content: center; align-items: center; height: 120px; }
header p.logo { width: 122px; height: 24px; background: url("../img/logo.svg") center / contain no-repeat; text-indent: -9999px; }

section.solutions { padding: 90px 0; background: linear-gradient(160deg, #6FE1A5 5%, #1B6BAC 95%); }
section.solutions h1 { max-width: 100%; padding: 0 30px; text-align: center; font-size: 48px; font-weight: 700; line-height: 1.1; color: #fff; text-transform: uppercase; box-sizing: border-box; }
section.solutions p.lead { max-width: 780px; margin: 24px auto 0; padding: 0 30px; text-align: center; font-size: 18px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.92); box-sizing: border-box; }
section.solutions ul { display: flex; flex-wrap: wrap; justify-content: center; width: 1416px; max-width: 100%; margin: 48px auto 0; padding: 0 14px 24px; box-sizing: border-box; }
section.solutions ul li { display: flex; justify-content: center; align-items: center; width: calc((100% - 96px) / 3); max-width: 380px; margin: 16px; padding: 260px 20px 20px; background-color: rgba(217, 249, 223, 0.6); background-position: center 30px; background-repeat: no-repeat;  border-radius: 40px; text-align: center; font-size: 22px; font-weight: 600; color: #46664C; box-sizing: border-box; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.06); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: all 0.3s; }
section.solutions ul li:first-child { background-image: url("../img/solutions-01.png"); }
section.solutions ul li:nth-child(2) { background-image: url("../img/solutions-02.png"); }
section.solutions ul li:nth-child(3) { background-image: url("../img/solutions-03.png"); }
section.solutions ul li:nth-child(4) { background-image: url("../img/solutions-04.png"); }
section.solutions ul li:nth-child(5) { background-image: url("../img/solutions-05.png"); }
section.solutions ul li:nth-child(6) { background-image: url("../img/solutions-06.png"); }
section.solutions ul li:hover { transform: scale(1.05); }
section.solutions div.button { display: flex; justify-content: center; align-items: center; height: 90px; margin-top: 30px; padding: 0 30px; box-sizing: border-box;}
section.solutions div.button a { position: relative; width: 460px; max-width: 100%; height: 70px; background: #fff; border-radius: 16px; box-shadow: 0 14px 30px rgba(17, 49, 78, 0.18); display: inline-flex; align-items: center; justify-content: center; }
section.solutions div.button a span { display: inline-block; padding-left: 42px; background: url("../img/icon-mail.svg") no-repeat left center / 28px auto; font-size: 25px; font-weight: 600; line-height: 32px; color: #18942F; }

section.clients { position: relative; margin-top: 90px; }
section.clients h1 { text-align: center; font-size: 40px; font-weight: 700; color: #46664C; text-transform: uppercase; }
section.clients ul { display: flex; margin-top: 50px; padding-bottom: 30px; }
section.clients ul li { width: 290px; height: 120px; margin: 10px; padding: 30px 70px; background: #fff; border-radius: 30px; text-align: center; line-height: 60px; box-sizing: border-box; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.06); }
section.clients ul li img { width: 150px; height: 60px; object-fit: contain; }

#location-map { margin-top: 20px; }

footer { display: flex; justify-content: space-between; align-items: center; padding: 40px; background: #44AB57; }
footer div.info { display: flex; }
footer div.info p.logo { width: 102px; height: 20px; background: url("../img/logo_footer.svg") center / contain no-repeat; text-indent: -9999px; }
footer div.info address { margin: -4px 0 0 20px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
footer p.call { padding: 13px 20px 13px 56px; background: rgba(255, 255, 255, 0.7) url("../img/icon-support.svg") left 20px center no-repeat; border-radius: 16px; font-size: 20px; font-weight: 600; color: #3A924B; }

/* RESPONSIVE */

@media all and (max-width: 1100px) {

header { height: 80px; }
header p.logo { width: 102px; height: 20px; }

section.solutions { padding: 60px 0; }
section.solutions h1 { font-size: 36px; }
section.solutions p.lead { font-size: 17px; }
section.solutions ul li { width: calc((100% - 60px) / 3); height: 260px; margin: 10px; padding-top: 200px; background-position: center 20px; background-size: auto 160px; font-size: 20px; }

section.clients { margin-top: 60px; }
section.clients h1 {font-size: 30px; }
section.clients ul { margin-top: 40px; }
section.clients ul li { width: 240px; height: 100px; padding: 25px 70px; line-height: 50px; }
section.clients ul li img { width: 100px; height: 50px; }

#location-map { margin-top: 10px; }

footer { padding: 32px; }
footer div.info { flex-direction: column; }
footer div.info p.logo { width: 92px; height: 18px; }
footer div.info address { margin: 12px 0 0 4px; }

}

@media all and (max-width: 900px) {

	section.solutions ul li { height: 220px; padding-top: 160px;  background-size: auto 120px; font-size: 18px; }
	
}

@media all and (max-width: 768px) {

	header { height: 70px; }
	header p.logo { width: 92px; height: 18px; }
	
	section.solutions { padding: 45px 0; }
	section.solutions h1 { font-size: 30px; }
	section.solutions p.lead { font-size: 15px; }
	section.solutions ul { padding: 0 14px 14px; }
	section.solutions ul li { width: calc((100% - 40px) / 2); height: 180px; padding-top: 120px;  background-size: auto 80px; font-size: 18px; }
	section.solutions div.button { height: 80px; }
	section.solutions div.button button { width: 360px; height: 60px; }
	section.solutions div.button button span { padding-left: 32px; background-size: 24px auto; font-size: 20px; line-height: 24px; }
	section.solutions div.button button:hover { width: 366px; height: 76px; }
	
	section.clients { margin-top: 50px; }
	section.clients h1 {font-size: 24px; }
	section.clients ul { margin-top: 30px; }
	section.clients ul li { width: 220px; height: 90px; line-height: 40px; }
	section.clients ul li img { width: 80px; height: 40px; }
	
	footer { display: block; padding: 24px; }
	footer div.info p.logo { width: 84px; height: 16px; }
	footer div.info address { margin: 10px 0 0 2px; font-size: 13px; }
	footer p.call { display: inline-block; margin-top: 16px; padding: 10px 16x 10px 42px; background-size: 20px auto; border-radius: 16px; font-size: 16px; }
	
}

@media all and (max-width: 480px) {

	section.solutions h1 { font-size: 26px; }
	section.solutions ul li {font-size: 16px; }
	section.solutions div.button button span { font-size: 18px; }
	
	section.clients h1 {font-size: 22px; }
	section.clients ul li { width: 200px; height: 80px; padding: 20px 60px; }

}

/* ===== OUR SOLUTIONS ===== */

section.our-solutions { margin-top: 90px; }
.os-container { width: 1416px; max-width: 100%; margin: 0 auto; padding: 0 30px; box-sizing: border-box; }
/* neutralize the global site `header{display:flex;height:120px}` rule for our section headers */
.os-head, .solution-head { display: block; height: auto; }

.os-head { text-align: center; }
.os-head h2 { font-size: 40px; font-weight: 700; line-height: 1.1; color: #46664C; text-transform: uppercase; text-wrap: balance; }
.os-intro { max-width: 760px; margin: 20px auto 0; font-size: 18px; line-height: 1.6; color: #4f6356; }
.os-intro a { font-weight: 600; color: #2f7a45; text-decoration: none; }

.solution { margin-top: 80px; }
.os-head + .solution { margin-top: 60px; }

/* 솔루션별 개별 sticky 바 — 각 솔루션 article 안에서만 고정, 구간 전환 시 자연 교체 */
.sol-nav { position: sticky; top: 0; z-index: 50; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(70, 102, 76, 0.12); }
.sol-nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 1416px; max-width: 100%; margin: 0 auto; padding: 13px 30px; box-sizing: border-box; overflow-x: auto; }
.sol-tab { flex: 0 0 auto; font-size: 23px; font-weight: 700; line-height: 1.2; background: linear-gradient(90deg, #0F7A2E, #1B6BAC); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
/* 헤더 중앙 타이틀 필은 sticky 바가 대신하므로 잠시 숨김 */
.solution-head.solution-head--stack > p.kicker { display: none; }
.sol-sub { display: flex; align-items: center; gap: 10px; scrollbar-width: none; }
.sol-sub::-webkit-scrollbar { display: none; }
.sol-sub a { -webkit-user-drag: none; user-select: none; }
.sol-nav::after { content: ""; position: absolute; right: 0; bottom: 6px; width: 52px; height: 40px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 72%); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.sol-nav.has-fade::after { opacity: 1; }
.sol-sub a { flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.2; color: #5f6f64; white-space: nowrap; }
.sol-sub a.is-active { background: rgba(24, 148, 47, 0.10); color: #18942F; }
.sol-nav + .solution-head { margin-top: 32px; }
#bnk-overview, #bnk-modules, #bnk-diff, #bnk-benefit, #ins-overview, #ins-flow, #ins-value { scroll-margin-top: 76px; }
.solution-head .kicker { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 12px 26px; border-radius: 18px; background: linear-gradient(90deg, #0F7A2E, #1B6BAC); color: #fff; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; box-sizing: border-box; }
.solution-head .kicker svg { display: none; width: 1em; height: 1em; flex: 0 0 auto; }
.solution-desc { margin-top: 18px; margin-left: 14px; padding-left: 22px; border-left: 2px solid rgba(70, 102, 76, 0.18); }
.solution-head h3 { font-size: 18px; font-weight: 600; line-height: 1.3; color: #46664C; }
.solution-head .overview { max-width: 72ch; margin-top: 12px; font-size: 18px; line-height: 1.6; color: #5f6f64; }
.solution-head--split { display: flex; align-items: center; gap: 48px; }
.solution-head--split .solution-head-text { flex: 1 1 auto; min-width: 0; }
.solution-visual { flex: 0 0 auto; width: 400px; max-width: 46%; display: flex; align-items: center; justify-content: center; padding: 30px; box-sizing: border-box; }
/* Banking 헤더: 타이틀 중앙 + 텍스트(2/3)·아이콘(1/3) 그리드 */
.solution-head--stack { text-align: center; }
.solution-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: center; margin-top: 28px; text-align: left; }
.solution-cols .solution-visual { order: 2; width: auto; max-width: none; padding: 20px; }
.solution-desc--plain { margin-left: 0; padding-left: 0; border-left: 0; }
/* 솔루션 헤더 ↔ 하위 콘텐츠 사이 은은한 상단 그라디언트 페이드 */
.solution-fade { height: 72px; margin-top: 36px; background: radial-gradient(55% 100% at 50% 0%, rgba(70, 102, 76, 0.09), rgba(70, 102, 76, 0) 75%); }
.solution-fade + .km-head { margin-top: 0; }
.solution-fade + .flow-panel { margin-top: 48px; }
.solution-visual img { width: 100%; max-width: 300px; height: auto; display: block; }
.solution--insurance .solution-visual img { max-width: 240px; }

.module-icon, .value-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(217, 249, 223, 0.6); color: #18942F; box-sizing: border-box; }
.module-icon svg, .value-icon svg { width: 32px; height: 32px; }

/* KEY MODULES 헤드 */
.km-head { margin-top: 64px; text-align: center; }
/* 솔루션(대형 그라디언트 필) 하위 섹션 라벨 — 소형 필로 위계 표현. 대소문자 원문 유지 */
.km-kicker, .ad-kicker, .bn-kicker { display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(24, 148, 47, 0.10); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: #18942F; }
.km-head h4 { margin-top: 14px; font-size: 24px; font-weight: 700; line-height: 1.25; color: #46664C; text-wrap: balance; }
.km-intro { max-width: 820px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: #5f6f64; }

/* 모듈 카드: 3단 그리드 (7번은 마지막 행 전체 폭), 세로형 카드 */
.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.module--platform { grid-column: 1 / -1; }
.module { display: flex; flex-direction: column; align-items: stretch; background: #fff; border-radius: 30px; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.06); padding: 36px 36px; box-sizing: border-box; }
.module-head { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.module-no { font-size: 36px; font-weight: 700; line-height: 1; color: rgba(70, 102, 76, 0.16); }
.module-body { flex: 1 1 auto; min-width: 0; margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.module h4 { font-size: 20px; font-weight: 600; line-height: 1.3; color: #46664C; }
.module p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: #5f6f64; }
.module-body p:not(.module-note) { padding-bottom: 22px; }
.module .module-note { margin-top: auto; width: 100%; padding: 16px 18px; border-radius: 14px; background: rgba(217, 249, 223, 0.6); font-size: 15px; line-height: 1.55; color: #3f5c47; box-sizing: border-box; }
.module-note strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #18942F; text-wrap: balance; }

/* AI DIFFERENTIATORS — 라이트 오픈 섹션 (다크 밴드인 EXPECTED BENEFITS와 호흡 대비) */
.ai-diff { position: relative; margin-top: 130px; }
/* 섹션 뒤 옅은 방사형 흰색 글로우 */
.ai-diff::before { content: ""; position: absolute; top: -70px; bottom: -70px; left: -6%; right: -6%; z-index: -1; background: radial-gradient(55% 65% at 50% 45%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 72%); pointer-events: none; }
.ai-diff-text { text-align: center; }
.ai-diff h4 { margin-top: 14px; font-size: 24px; font-weight: 700; line-height: 1.25; color: #46664C; text-wrap: balance; }
.ad-lead { max-width: 880px; margin: 18px auto 0; font-size: 16.5px; line-height: 1.7; color: #5f6f64; }
.ad-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.ad-rail li { flex: 0 0 152px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; border-radius: 16px; background: #fff; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.06); text-align: center; box-sizing: border-box; }
.ad-chip { display: inline-flex; }
.ad-chip svg { width: 36px; height: 36px; color: #18942F; }
.ad-name { font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #46664C; }
.ad-point { position: relative; max-width: 880px; margin: 40px auto 0; padding-top: 28px; text-align: center; font-size: 17px; line-height: 1.65; color: #4f6356; text-wrap: balance; }
.ad-point::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #18942F, #1B6BAC); }
.ad-point strong { font-weight: 700; background: linear-gradient(90deg, #18942F, #1B6BAC); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* EXPECTED BENEFITS — 다크 밴드 + 글래스 카드 그리드 (oyoung solBenefit 참고) */
.benefit-block { position: relative; overflow: hidden; margin-top: 130px; padding: 56px; border-radius: 32px; background: linear-gradient(135deg, #0E7338 0%, #11608F 58%, #134B82 100%); box-shadow: 0 30px 60px -24px rgba(16, 63, 115, 0.5); box-sizing: border-box; }
.benefit-block::before { content: ""; position: absolute; top: -160px; right: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 225, 165, 0.30), transparent 68%); pointer-events: none; }
.benefit-block::after { content: ""; position: absolute; bottom: -180px; left: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(108, 178, 235, 0.28), transparent 68%); pointer-events: none; }
.bn-head { position: relative; z-index: 1; text-align: center; }
.bn-kicker { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #6FE1A5; }
.bn-head h4 { max-width: 820px; margin: 14px auto 0; font-size: 24px; font-weight: 700; line-height: 1.25; color: #fff; text-wrap: balance; }
.benefit-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; }
.benefit-list li { position: relative; padding: 26px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-sizing: border-box; }
.bn-no { position: absolute; top: 22px; right: 20px; font-size: 20px; font-weight: 800; color: rgba(198, 240, 214, 0.9); }
.bn-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 15px; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.38); box-sizing: border-box; }
.bn-ico img { display: block; width: 32px; height: 32px; }
.benefit-list h5 { font-size: 15.5px; font-weight: 600; line-height: 1.45; color: #fff; }
.benefit-list p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
@media all and (max-width: 1280px) {
	.benefit-list { grid-template-columns: repeat(3, 1fr); }
}

.flow-panel { position: relative; overflow: hidden; margin-top: 40px; padding: 56px 48px; border-radius: 32px; background: linear-gradient(135deg, #0E7338 0%, #1668A8 58%, #134B82 100%); box-shadow: 0 30px 60px -24px rgba(16, 63, 115, 0.5); box-sizing: border-box; }
.flow-panel::before { content: ""; position: absolute; top: -160px; right: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 225, 165, 0.35), transparent 68%); pointer-events: none; }
.flow-panel::after { content: ""; position: absolute; bottom: -180px; left: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(108, 178, 235, 0.30), transparent 68%); pointer-events: none; }
.flow-label { position: relative; z-index: 1; font-size: 22px; font-weight: 600; color: #fff; text-align: center; text-wrap: balance; }
.flow-label::after { content: ""; display: block; width: 48px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg, #6FE1A5, #ffffff); }
ol.flow { position: relative; z-index: 1; counter-reset: step; display: flex; margin-top: 44px; --circle: 56px; }
ol.flow::before { content: ""; position: absolute; top: calc(var(--circle) / 2 - 1px); left: 7.15%; right: 7.15%; height: 2px; background: rgba(255, 255, 255, 0.22); z-index: 0; }
ol.flow::after { content: ""; position: absolute; top: calc(var(--circle) / 2 - 1px); left: 7.15%; right: 7.15%; height: 2px; background: linear-gradient(90deg, #6FE1A5, #ffffff); transform-origin: left center; transition: transform 1.3s ease 0.2s; z-index: 0; }
.flow .step { counter-increment: step; flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow .step-no { position: relative; z-index: 1; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--circle); height: var(--circle); border-radius: 50%; background: #fff; color: #0F7A2E; font-size: 20px; font-weight: 700; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12); }
.flow .step-no::before { content: counter(step); }
.flow .step-label { margin-top: 16px; padding: 0 6px; font-size: 14px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.flow .step::before { content: ""; position: absolute; display: none; }
/* scroll-reveal interaction (class toggled by IntersectionObserver; NOT hover) */
.flow-panel.js-reveal .step { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.flow-panel.js-reveal.is-visible .step { opacity: 1; transform: none; }
.flow-panel.js-reveal .step:nth-child(1) { transition-delay: 0.05s; }
.flow-panel.js-reveal .step:nth-child(2) { transition-delay: 0.12s; }
.flow-panel.js-reveal .step:nth-child(3) { transition-delay: 0.19s; }
.flow-panel.js-reveal .step:nth-child(4) { transition-delay: 0.26s; }
.flow-panel.js-reveal .step:nth-child(5) { transition-delay: 0.33s; }
.flow-panel.js-reveal .step:nth-child(6) { transition-delay: 0.40s; }
.flow-panel.js-reveal .step:nth-child(7) { transition-delay: 0.47s; }
.flow-panel.js-reveal .step:nth-child(8) { transition-delay: 0.54s; }
.flow-panel.js-reveal ol.flow::after { transform: scaleX(0); }
.flow-panel.js-reveal.is-visible ol.flow::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
	.flow-panel.js-reveal .step { opacity: 1; transform: none; transition: none; }
	.flow-panel.js-reveal ol.flow::after { transition: none; }
}

.value-title { margin-top: 110px; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.2; color: #46664C; text-wrap: balance; }
.value-intro { max-width: 760px; margin: 16px auto 0; text-align: center; font-size: 18px; line-height: 1.6; color: #5f6f64; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.value-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; background: #fff; border-radius: 30px; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.06); padding: 40px 32px 36px; box-sizing: border-box; }
.value-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #6FE1A5, #1B6BAC); }
.value-card h4 { margin-top: 22px; font-size: 20px; font-weight: 600; line-height: 1.3; color: #46664C; }
.value-card p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: #5f6f64; }

/* RESPONSIVE — OUR SOLUTIONS */

@media all and (max-width: 1100px) {
	.os-head h2 { font-size: 30px; }
	.sol-nav-inner { flex-direction: column; align-items: center; gap: 12px; padding: 14px 20px 10px; overflow-x: visible; }
	/* 공간 여유가 있으면 가운데, 오버플로 시엔 자연스럽게 왼쪽부터 스크롤 */
	.sol-sub a:first-child { margin-left: auto; }
	.sol-sub a:last-child { margin-right: auto; }
	.sol-tab { font-size: 19px; }
	.sol-sub { width: 100%; overflow-x: auto; }
	#bnk-overview, #bnk-modules, #bnk-diff, #bnk-benefit, #ins-overview, #ins-flow, #ins-value { scroll-margin-top: 104px; }
	.solution-head .kicker { font-size: 24px; }
	.solution-head h3 { font-size: 17px; }
	.module-grid { gap: 20px; }
	.km-head h4, .bn-head h4, .ai-diff h4 { font-size: 24px; }
	ol.flow { --circle: 50px; }
	.flow .step-no { font-size: 18px; }
}

@media all and (max-width: 900px) {
	.module-grid { grid-template-columns: 1fr; }
	.module--platform { grid-column: auto; }
	.value-grid { grid-template-columns: repeat(2, 1fr); }
	.benefit-list { grid-template-columns: 1fr; }
	.solution-head--split { flex-direction: column; align-items: stretch; gap: 28px; }
	.solution-cols { display: block; margin-top: 20px; }
	.solution-visual { display: none; }
	ol.flow { flex-direction: column; align-items: stretch; --circle: 48px; }
	ol.flow::before, ol.flow::after { display: none; }
	.flow .step { flex: 0 0 auto; flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; padding-bottom: 30px; }
	.flow .step-label { margin-top: 0; padding: 0; align-self: center; font-size: 15px; }
	.flow .step::before { display: block; top: var(--circle); left: calc(var(--circle) / 2 - 1px); width: 2px; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); }
	.flow .step:first-child::before { display: block; }
	.flow .step:last-child::before { display: none; }
	.flow-panel { padding: 44px 32px; }
}

@media all and (max-width: 768px) {
	.os-head h2 { font-size: 24px; }
	.solution-head .kicker { font-size: 20px; }
	.solution-head h3 { font-size: 16px; }
	.value-title { font-size: 22px; }
	.os-intro, .solution-head .overview, .value-intro, .module p, .value-card p { font-size: 16px; }
	.sol-tab { font-size: 17px; }

	.module, .value-card { padding: 28px 24px; }
	.value-grid { grid-template-columns: 1fr; }
	.module { flex-direction: column; align-items: stretch; gap: 0; }
	.module-head { flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.module-body { margin-top: 22px; }
	.module p { max-width: none; }
	.module-no { font-size: 32px; }
	.km-head { margin-top: 48px; }
	.ai-diff, .benefit-block { margin-top: 80px; }
	.km-head h4, .bn-head h4, .ai-diff h4 { font-size: 21px; }
	.km-intro { font-size: 16px; }
	.ad-lead { font-size: 15.5px; }
	.ad-rail li { flex: 0 0 110px; }
	.ad-point { font-size: 16px; }
	.benefit-block { padding: 32px; }
	.flow-panel { padding: 36px 24px; }
	.flow-label { font-size: 20px; }
	ol.flow { --circle: 46px; }
}

@media all and (max-width: 480px) {
	.os-container { padding: 0 20px; }
	.os-head h2 { font-size: 22px; }
	.module-icon, .value-icon { width: 56px; height: 56px; }
	.module-icon svg, .value-icon svg { width: 28px; height: 28px; }
	ol.flow { --circle: 44px; }
	.flow .step-no { font-size: 17px; }
}