/* ==============================================================================================
 *  business-overview.css — 사업개요 화면 전용
 *
 *  ★ 쓰는 곳 하나 — public_html/main/contents/xvnmag.php(회사소개) 가 asset_head('site::css/business-overview.css') 로 건다.
 *  ★ 출처 — toptier 사이트 사업개요(menu?gc=1069WEUP)의 css/sub.css "사업개요" 블록을 옮긴 것.
 *      class 는 이 사이트 체계(`c-`)로 바꿨다: int01_wrap01 → c-overview-intro · int01_wrap02 → c-overview-cards ·
 *      sub_txtline → c-overview-mark · sub_line01 → c-overview-line
 *  ★ 단락 제목은 여기서 그리지 않는다 — 사이트 공통 h2.c-panel__title (ui.css, global-template "heading")
 *  ★ 크기는 콘텐츠 축이라 em
 * ============================================================================================== */

/* 소개 — 왼쪽 글 · 오른쪽 사진. 좁은 화면은 사진이 위로 */
.c-overview-intro			{display:flex; gap:4%; word-break:keep-all;}
.c-overview-intro__text		{flex:2;}
.c-overview-intro__img		{width:40%; overflow:hidden;}
.c-overview-intro__img img	{display:block; width:100%; border-radius:1em;}

@media screen and (max-width:768px) {
	.c-overview-intro			{flex-direction:column-reverse; gap:30px;}
	.c-overview-intro__img		{width:100%; aspect-ratio:8/4; border-radius:1em;}
	.c-overview-intro__img img	{height:100%; object-fit:cover;}
}

/* 글 안 강조 — 형광펜 밑줄 */
.c-overview-mark			{font-weight:700; box-shadow:inset 0 -10px 0 #feedb8; padding:0 2px; color:#333;}

/* 단락 사이 점선 */
.c-overview-line			{height:50px; margin-top:50px; border-top:1px dashed #ddd;}

/* 주요 추진내용 — 아이콘 카드 5칸 → 3 → 2 → 1 */
.c-overview-cards			{display:grid; grid-template-columns:repeat(5, 1fr); gap:1em; margin:0; padding:0; list-style:none;}
.c-overview-cards li		{display:flex; flex-direction:column; gap:20px; padding:1.5em 1em; text-align:center; border:1px solid #dfdfdf; border-radius:0.5em; box-shadow:0 3px 7px 0 #0000001f;}
.c-overview-cards__icon		{width:90px; height:90px; margin:auto; border-radius:50%; background:#f5f5f5; overflow:hidden;}
.c-overview-cards__icon img	{display:block; width:100%; height:100%;}
.c-overview-cards__text		{word-break:keep-all; font-weight:500;}

@media screen and (max-width:1200px) {
	.c-overview-cards			{grid-template-columns:repeat(3, 1fr);}
}
@media screen and (max-width:600px) {
	.c-overview-cards			{grid-template-columns:repeat(2, 1fr);}
	.c-overview-cards__icon		{width:80px; height:80px;}
}
@media screen and (max-width:480px) {
	.c-overview-cards			{grid-template-columns:repeat(1, 1fr);}
}