@charset "utf-8";
/* ==========================================================================
   SOOSOFT Homepage Renewal Stylesheet  (2026.08)
   회사소개서(2026.08) 기준 신규 콘텐츠 전용 컴포넌트
   - 기존 ui_content.css 를 건드리지 않기 위해 rn_ 프리픽스로만 정의합니다.
   - Brand : #216cd3 / Ink : #09173f / Line : #e5e5e5
   ========================================================================== */

:root {
	/* 2026.08 리뉴얼 : 사이트 공통 브랜드 블루(soo2026.css)와 통일 */
	--rn-brand: #1c5fd0;
	--rn-brand-dk: #0b3fa0;
	--rn-ink: #0a1f4e;
	--rn-txt: #444;
	--rn-line: #e5e5e5;
	--rn-bg: #f2f5f9;
	--rn-bg-lt: #ebf5fe;
}

.rn_wrap { font-size: 16px; color: var(--rn-txt); word-break: keep-all; }
.rn_wrap * { box-sizing: border-box; }

/* ---------- 리드 문장 ---------- */
.rn_lead {
	margin: 0 0 40px;
	font-size: 18px;
	line-height: 1.7;
	color: #333;
	word-break: keep-all;
}
.rn_lead b { color: var(--rn-brand); font-weight: 700; }

/* ---------- 소제목 ---------- */
.rn_stit {
	position: relative;
	margin: 0 0 24px;
	padding-left: 14px;
	font-size: 22px;
	font-weight: 700;
	color: var(--rn-ink);
	line-height: 1.4;
}
.rn_stit::before {
	position: absolute;
	top: 6px;
	left: 0;
	width: 4px;
	height: 20px;
	content: '';
	background: var(--rn-brand);
	border-radius: 2px;
}
.rn_wrap + .rn_stit,
.rn_tbl_wrap + .rn_stit,
.rn_grid + .rn_stit { margin-top: 50px; }
.rn_stit .sub {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 400;
	color: #777;
	letter-spacing: 0;
}

/* ---------- 카드 그리드 ---------- */
.rn_grid { display: grid; gap: 20px; margin: 0 0 60px; padding: 0; list-style: none; }
.rn_grid.col2 { grid-template-columns: repeat(2, 1fr); }
.rn_grid.col3 { grid-template-columns: repeat(3, 1fr); }
.rn_grid.col4 { grid-template-columns: repeat(4, 1fr); }
/* 사이드바 레이아웃(콘텐츠 폭 ~900px)에서는 4열이 비좁아 2열로 낮춥니다 */
.s26 #subContainer .rn_grid.col4 { grid-template-columns: repeat(2, 1fr); }

.rn_card {
	position: relative;
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--rn-line);
	border-top: 3px solid var(--rn-brand);
	border-radius: 4px;
	transition: box-shadow .25s, transform .25s;
}
.rn_card:hover { box-shadow: 0 10px 24px rgba(9, 23, 63, .10); transform: translateY(-3px); }
.rn_card .num {
	display: inline-block;
	margin-bottom: 14px;
	padding: 3px 11px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .04em;
	background: var(--rn-brand);
	border-radius: 20px;
}
.rn_card h5, .rn_card .tit {
	display: block;
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--rn-ink);
	line-height: 1.45;
}
.rn_card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--rn-txt); }
.rn_card ul { margin: 12px 0 0; padding: 0; list-style: none; }
.rn_card ul li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 12px;
	font-size: 15px;
	line-height: 1.6;
}
.rn_card ul li::before {
	position: absolute;
	top: 10px;
	left: 0;
	width: 4px;
	height: 4px;
	content: '';
	background: #c1c6cb;
	border-radius: 50%;
}
.rn_card ul li:last-child { margin-bottom: 0; }

/* 강조 카드 (브랜드 배경) */
.rn_card.on { background: var(--rn-bg-lt); border-top-color: var(--rn-brand-dk); }
/* 회색 카드 */
.rn_card.gray { background: #fafbfc; }

/* ---------- STEP 플로우 ---------- */
.rn_step { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 0 60px; padding: 0; list-style: none; }
.rn_step > li {
	position: relative;
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--rn-line);
	border-radius: 4px;
}
.rn_step > li + li::before {
	position: absolute;
	top: 50%;
	left: -16px;
	margin-top: -10px;
	font-size: 20px;
	line-height: 1;
	color: var(--rn-brand);
	content: '\203A';
	font-weight: 700;
}
.rn_step .st {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--rn-brand);
	letter-spacing: .08em;
}
.rn_step .tit { display: block; margin-bottom: 14px; font-size: 19px; font-weight: 700; color: var(--rn-ink); line-height: 1.45; }
.rn_step ul { margin: 0; padding: 0; list-style: none; }
.rn_step ul li { position: relative; margin-bottom: 8px; padding-left: 12px; font-size: 15px; line-height: 1.6; }
.rn_step ul li::before { position: absolute; top: 10px; left: 0; width: 4px; height: 4px; content: ''; background: #c1c6cb; border-radius: 50%; }

/* ---------- 프로세스 (5단계 가로 타임라인) ---------- */
.rn_proc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
/* 6단계 프로세스 — 3열 2행으로 나눠 카드 폭을 확보 */
.rn_proc.col3 { grid-template-columns: repeat(3, 1fr); }

.rn_proc > li { padding: 24px 18px; background: #fff; border: 1px solid var(--rn-line); border-radius: 4px; text-align: left; }
.rn_proc .ph {
	display: block;
	margin-bottom: 4px;
	font-size: 17px;
	font-weight: 700;
	color: var(--rn-ink);
}
.rn_proc .en { display: block; margin-bottom: 14px; font-size: 12px; color: var(--rn-brand); letter-spacing: .06em; text-transform: uppercase; }
.rn_proc ul { margin: 0 0 14px; padding: 0; list-style: none; }
.rn_proc ul li { position: relative; margin-bottom: 6px; padding-left: 10px; font-size: 14px; line-height: 1.55; }
.rn_proc ul li::before { position: absolute; top: 9px; left: 0; width: 3px; height: 3px; content: ''; background: #c1c6cb; border-radius: 50%; }
.rn_proc .dur {
	display: inline-block;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--rn-brand);
	background: var(--rn-bg-lt);
	border-radius: 20px;
}

/* ---------- 아키텍처 다이어그램 ---------- */
.rn_arch { margin: 0 0 30px; padding: 30px; background: var(--rn-bg); border-radius: 6px; }
.rn_zone { margin-bottom: 18px; padding: 20px; background: #fff; border: 1px solid var(--rn-line); border-radius: 4px; }
.rn_zone:last-child { margin-bottom: 0; }
.rn_zone > .zt {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--rn-brand);
	letter-spacing: .04em;
}
.rn_zone > .zt em { font-style: normal; font-weight: 400; color: #888; }
.rn_nodes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rn_nodes > li {
	flex: 1 1 150px;
	min-width: 140px;
	padding: 16px 14px;
	text-align: center;
	background: #fafbfc;
	border: 1px solid var(--rn-line);
	border-radius: 4px;
}
.rn_nodes > li b { display: block; margin-bottom: 5px; font-size: 15px; color: var(--rn-ink); font-weight: 700; }
.rn_nodes > li span { display: block; font-size: 13px; line-height: 1.5; color: #777; }
.rn_nodes > li.key { background: var(--rn-brand); border-color: var(--rn-brand); }
.rn_nodes > li.key b, .rn_nodes > li.key span { color: #fff; }
.rn_nodes > li.key span { color: rgba(255, 255, 255, .8); }
.rn_nodes > li.alt { background: var(--rn-bg-lt); border-color: #bcd8f5; }
.rn_flowmark { margin: 12px 0; font-size: 18px; color: var(--rn-brand); text-align: center; line-height: 1; }

/* ---------- 모듈 맵 (구성도) ---------- */
.rn_map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 40px; padding: 0; list-style: none; }
.rn_map > li { padding: 0; background: #fff; border: 1px solid var(--rn-line); border-radius: 4px; overflow: hidden; }
.rn_map > li > b {
	display: block;
	padding: 14px 16px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: var(--rn-brand);
}
.rn_map > li > ul { margin: 0; padding: 16px; list-style: none; }
.rn_map > li > ul > li { margin-bottom: 8px; font-size: 14px; line-height: 1.55; color: var(--rn-txt); }
.rn_map > li > ul > li:last-child { margin-bottom: 0; }
.rn_map > li > ul > li strong { display: block; font-size: 15px; color: var(--rn-ink); font-weight: 700; }

/* ---------- 로드맵 (단계 스택) ---------- */
.rn_road { margin: 0 0 50px; padding: 0; list-style: none; }
.rn_road > li {
	position: relative;
	margin-bottom: 14px;
	padding: 24px 30px 24px 86px;
	background: #fff;
	border: 1px solid var(--rn-line);
	border-left: 4px solid #c1c6cb;
	border-radius: 4px;
}
.rn_road > li .lv {
	position: absolute;
	top: 50%;
	left: 26px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	line-height: 40px;
	text-align: center;
	background: #c1c6cb;
	border-radius: 50%;
}
.rn_road > li > b { display: block; margin-bottom: 8px; font-size: 18px; color: var(--rn-ink); font-weight: 700; }
.rn_road > li p b { color: var(--rn-ink); font-weight: 700; }
.rn_road > li p { margin: 0; font-size: 15px; line-height: 1.65; }
.rn_road > li.now { border-left-color: var(--rn-brand); background: var(--rn-bg-lt); }
.rn_road > li.now .lv { background: var(--rn-brand); }
.rn_road > li.next { border-left-color: var(--rn-brand-dk); }
.rn_road > li.next .lv { background: var(--rn-brand-dk); }

/* ---------- 표 ---------- */
.rn_tbl_wrap { margin: 0 0 50px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rn_tbl { width: 100%; min-width: 720px; font-size: 15px; border-collapse: collapse; border-top: 2px solid var(--rn-brand); }
.rn_tbl th, .rn_tbl td { padding: 14px 12px; border-bottom: 1px solid var(--rn-line); line-height: 1.55; word-break: keep-all; }
.rn_tbl thead th { color: #222; font-weight: 700; text-align: center; background: #f7f9fc; }
.rn_tbl tbody td { color: var(--rn-txt); text-align: center; }
.rn_tbl tbody td.lt { text-align: left; }
.rn_tbl tbody td.co { font-weight: 700; color: var(--rn-ink); text-align: left; }
.rn_tbl tbody tr:hover td { background: #fafbfc; }
.rn_tbl .no { width: 56px; color: #999; }
.rn_tbl .tag {
	display: inline-block;
	padding: 3px 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--rn-brand);
	white-space: nowrap;
	background: var(--rn-bg-lt);
	border-radius: 20px;
}
.rn_tbl .tag.asp { color: #07298d; background: #e7ecf8; }
.rn_tbl .tag.end { color: #888; background: #f0f0f0; }

/* ---------- 스펙 리스트 (정의형) ---------- */
.rn_spec { margin: 0 0 50px; padding: 0; border-top: 2px solid var(--rn-brand); }
.rn_spec > div {
	display: flex;
	align-items: flex-start;
	padding: 18px 4px;
	border-bottom: 1px solid var(--rn-line);
}
.rn_spec dt {
	flex: 0 0 180px;
	font-size: 16px;
	font-weight: 700;
	color: var(--rn-ink);
}
.rn_spec dd { flex: 1 1 auto; margin: 0; font-size: 15px; line-height: 1.7; }
.rn_spec dd ul { margin: 0; padding: 0; list-style: none; }
.rn_spec dd ul li { position: relative; margin-bottom: 6px; padding-left: 12px; }
.rn_spec dd ul li::before { position: absolute; top: 10px; left: 0; width: 4px; height: 4px; content: ''; background: #c1c6cb; border-radius: 50%; }
.rn_spec dd ul li:last-child { margin-bottom: 0; }

/* ---------- 태그 / 뱃지 ---------- */
.rn_tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 50px; padding: 0; list-style: none; }
.rn_tags > li {
	padding: 11px 20px;
	font-size: 15px;
	font-weight: 500;
	color: var(--rn-ink);
	background: #fff;
	border: 1px solid var(--rn-line);
	border-radius: 30px;
}
.rn_tags > li.on { color: #fff; background: var(--rn-brand); border-color: var(--rn-brand); }

.rn_badge {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--rn-brand);
	vertical-align: middle;
	background: var(--rn-bg-lt);
	border-radius: 20px;
}
.rn_badge.soon { color: #d73d00; background: #fdf0e9; }

/* ---------- 인용/강조 밴드 ---------- */
.rn_band {
	margin: 0 0 50px;
	padding: 36px 40px;
	color: #fff;
	background: linear-gradient(120deg, #0a1f4e 0%, #1c5fd0 100%);
	border-radius: 6px;
}
.rn_band p { margin: 0; font-size: 20px; line-height: 1.6; font-weight: 500; word-break: keep-all; }
.rn_band p b { font-weight: 800; }
.rn_band small { display: block; margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, .78); }

/* ---------- 수치 하이라이트 ---------- */
.rn_stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 50px; padding: 0; list-style: none; }
.rn_stat > li { padding: 28px 20px; text-align: center; background: #fff; border: 1px solid var(--rn-line); border-radius: 4px; }
.rn_stat > li strong { display: block; margin-bottom: 8px; font-size: 34px; font-weight: 800; color: var(--rn-brand); line-height: 1.1; letter-spacing: -.02em; }
.rn_stat > li strong span { font-size: 18px; font-weight: 700; }
.rn_stat > li em { display: block; font-size: 15px; font-style: normal; color: var(--rn-txt); }

/* ---------- 각주 ---------- */
.rn_note { margin: -30px 0 50px; font-size: 14px; line-height: 1.6; color: #888; }
/* 주의 문구용 각주 — 빨간 굵은 글씨 */
.rn_note.warn { color: #c62828; font-weight: 600; }
.rn_note.warn b { color: #c62828; font-weight: 700; }
.rn_note + .rn_note { margin-top: -40px; }
/* 도해(이미지) 또는 표 바로 뒤에 오는 주석은 위로 당기지 않는다.
   .rn_note 의 기본 -30px 는 제목·문단 뒤에 붙는 경우를 전제로 한 값이라,
   앞이 도해/표면 주석이 이미지에 가려 보이지 않는다. */
.s26_proc_art + .rn_note,
.s26_art_hint + .rn_note,
.rn_wrap + .rn_note,
.rn_grid + .rn_note,
.rn_tbl_wrap + .rn_note,
.rn_zone + .rn_note,
.rn_proc + .rn_note { margin-top: 18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 1250px) {
	.rn_grid.col4 { grid-template-columns: repeat(2, 1fr); }
	.rn_proc { grid-template-columns: repeat(3, 1fr); }
	.rn_map { grid-template-columns: repeat(2, 1fr); }
	.rn_stat { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 900px) {
	.rn_grid.col2,
	.rn_grid.col3,
	.rn_grid.col4 { grid-template-columns: 1fr; }
	.rn_step { grid-template-columns: 1fr; }
	.rn_step > li + li::before { top: -16px; left: 50%; margin: 0 0 0 -5px; content: '\2304'; }
	.rn_proc, .rn_proc.col3 { grid-template-columns: repeat(2, 1fr); }
	.rn_map { grid-template-columns: 1fr; }
	.rn_arch { padding: 18px; }
	.rn_band { padding: 26px 24px; }
	.rn_band p { font-size: 17px; }
	.rn_spec > div { display: block; }
	.rn_spec dt { margin-bottom: 8px; }
	.rn_road > li { padding: 20px 20px 20px 70px; }
	.rn_road > li .lv { left: 16px; }
}

@media screen and (max-width: 640px) {
	.rn_wrap { font-size: 15px; }
	.rn_lead { font-size: 16px; margin-bottom: 30px; }
	.rn_stit { font-size: 19px; }
	.rn_wrap + .rn_stit,
	.rn_tbl_wrap + .rn_stit,
	.rn_grid + .rn_stit { margin-top: 34px; }
	.rn_proc, .rn_proc.col3 { grid-template-columns: 1fr; }
	.rn_stat { grid-template-columns: 1fr; }
	.rn_card { padding: 24px 20px; }
	.rn_nodes > li { flex: 1 1 100%; }
	.rn_stat > li strong { font-size: 28px; }
}

/* ==========================================================================
   Main : Our Business — Network ERP 탭 배경
   ========================================================================== */
.mBusTabSlide ul li.bg_nw a::before {
	background-image: url('../img/m_con3_bg.jpg');
}

/* 옵션 표기 배지 (유지보수 범위 등) */
.s26_opt {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border: 1px solid var(--rn-brand);
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--rn-brand);
	vertical-align: 1px;
}

/* 본문 안에서 다른 페이지로 보내는 인라인 링크 */
a.rn_ilink, a.rn_ilink:link, a.rn_ilink:visited {
	color: var(--rn-brand);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(28, 95, 208, .35);
}
a.rn_ilink::after { content: " \2192"; }
a.rn_ilink:hover { border-bottom-color: var(--rn-brand); }
a.rn_ilink:focus-visible { outline: 2px solid var(--rn-brand); outline-offset: 2px; }

/* 카드 하단 — 해당 솔루션 상세 페이지로 보내는 링크 */
.rn_card .rn_more {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--rn-line);
	font-size: 15px;
}
/* 라인업 카드: 상세 링크를 카드 맨 아래에 정렬 */
.rn_card.rn_card_link { display: flex; flex-direction: column; }
.rn_card.rn_card_link > .num { align-self: flex-start; }
.rn_card.rn_card_link > .rn_more { margin-top: auto; }