@charset "utf-8";
/* 메인 '고객을 위한 제품 제안' (#mainProducts.pp) — 2026-09-24, 뉴스룸(#section02.nr)과 같은 스타일
   머리: 제목 32px + 설명, 오른쪽 '전체 보기', 아래 연두→네이비 2.5px 선 / 목록: 7개 한 줄(아이콘 + 이름), 테두리 없음.
   글꼴 규칙: kr/en Pretendard · jpn Pretendard JP · chn Sarasa Gothic, 굵기 400/600 만 */
#mainProducts.pp {--pp-abov: #1f5fae; --pp-ink: #1b2330; --pp-sub: #4e5968; --pp-mute: #6b7684; --pp-line: #e3e8ee; --pp-soft: #f6f8fb;
	padding: 88px 0 24px; background: #fff; color: var(--pp-ink); line-height: 1.55; text-align: left;
	font-family: 'Pretendard', 'Pretendard JP', 'Noto Sans KR', sans-serif;}
#mainProducts.pp.hu_lang_jpn {font-family: 'Pretendard JP', 'Pretendard', 'Meiryo', sans-serif;}
#mainProducts.pp.hu_lang_chn {font-family: 'Sarasa Gothic SC HU', 'Microsoft YaHei', 'PingFang SC', sans-serif;}
#mainProducts.pp * {box-sizing: border-box; margin: 0; padding: 0;}
#mainProducts.pp a {color: inherit; text-decoration: none;}
#mainProducts.pp a:focus {outline: none;}
#mainProducts.pp a:focus-visible {outline: 3px solid #19a7ce; outline-offset: 2px;}
#mainProducts .pp_wrap {max-width: 1240px; margin: 0 auto; padding: 0 32px;}

/* 머리 — 뉴스룸과 같은 제목·선 */
#mainProducts .pp_head {position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 20.5px;}
#mainProducts .pp_head::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: linear-gradient(90deg, #8cc63f 0%, #084897 100%);}
#mainProducts .pp_head h2 {font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--pp-ink);}
#mainProducts .pp_head h2 small {display: block; margin-top: 8px; font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.6; color: var(--pp-mute);}
#mainProducts .pp_all {flex: 0 0 auto; padding-bottom: 4px; font-size: 15px; font-weight: 600; color: var(--pp-abov); white-space: nowrap;}
#mainProducts .pp_all:hover {text-decoration: underline; text-underline-offset: 4px;}

/* 목록 — 7개 한 줄 */
#mainProducts .pp_list {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); list-style: none;} /* 2026-09-24 칸 구분선·아래 선 없음 */
#mainProducts .pp_list a {position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; height: 100%;
	padding: 30px 10px 26px; border-radius: 12px; text-align: center; transition: background .15s;}
#mainProducts .pp_list .pp_ic {display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;}
#mainProducts .pp_list .pp_ic img {display: block; width: 52px; height: auto; max-width: 100%; transition: transform .2s;}
#mainProducts .pp_list .pp_nm {font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--pp-ink); word-break: keep-all;}
#mainProducts .pp_list a:hover {background: var(--pp-soft);}
#mainProducts .pp_list a:hover .pp_nm {color: var(--pp-abov); text-decoration: underline; text-underline-offset: 4px;}
#mainProducts .pp_list a:hover .pp_ic img {transform: translateY(-2px);}

/* 태블릿·모바일: 한 줄 유지, 가로로 밀어서 본다 */
@media screen and (max-width: 1024px) {
	#mainProducts .pp_list {grid-template-columns: repeat(7, minmax(128px, 1fr)); overflow-x: auto; scrollbar-width: thin;}
}
@media screen and (max-width: 640px) {
	#mainProducts.pp {padding: 56px 0 12px;}
	#mainProducts .pp_wrap {padding: 0 16px;}
	#mainProducts .pp_head {flex-direction: column; align-items: flex-start;}
	#mainProducts .pp_head h2 {font-size: 26px;}
	#mainProducts .pp_head h2 small br {display: none;}
	#mainProducts .pp_list {grid-template-columns: repeat(7, minmax(112px, 1fr));}
	#mainProducts .pp_list a {padding: 22px 8px 18px; gap: 10px;}
	#mainProducts .pp_list .pp_ic, #mainProducts .pp_list .pp_ic img {width: 44px;}
	#mainProducts .pp_list .pp_nm {font-size: 14px;}
}