@charset "utf-8";
/* 주요고객사 분류 화면 — 10/2 집계본(주요고객사_집계본_261002.html)에서 client 전용 규칙만 옮김.
   sub/client.php 가 분류된 줄이 있을 때만 싣는다(옛 한 덩어리 목록일 땐 안 실음).
   전부 #sub.client 로 시작 — 운영 sub.css:59-62(flex · li 25% · 선)와 :417-429(스크롤 전 투명 · 늦게 뜨기)를 덮는다.
   집계본의 '#sub 전체' 규칙(#sub, #sub * · .inner · 비주얼 · 메뉴 · 머리 문구 · 글꼴 · 1300/660 단계)은 운영 공통값의 사본이라 옮기지 않았다. */

/* 회색 바탕 + 흰 카드 — 운영의 배경 세로선 대신(9/29 사용자) */
#sub.client .sub_con{background:#F3F5F9;}
#sub.client .line_w{display:none;}

/* 분류 제목 */
#sub.client .con01 .cat + .cat{margin-top:70px;}
#sub.client .con01 .ttl{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:24px;line-height:1.4;font-weight:600;color:#0D3F6D;}
#sub.client .con01 .ttl:before{content:'';display:inline-block;width:6px;height:22px;border-radius:3px;background:#0D3F6D;}

/* 로고 6칸 격자 — sub.css 의 flex · 위 선 · li 25% 를 덮고, .clear:after(common.css:118)가 격자 칸 하나가 되지 않게 끈다 */
#sub.client .con01 .cat ul.clear{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;border-top:0;}
#sub.client .con01 .cat ul.clear:after{display:none;}
/* 스크롤 전 투명(sub.css:417-429)은 끈다 — 늦게 뜨기가 12번째까지만이라 쪽 넘김과 안 맞고, 그 지연(최대 2.2초)이 마우스 올림 효과에도 걸린다 */
#sub.client .con01 .cat ul.clear li{width:auto;border:1px solid #D3DBE6;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 1px 3px rgba(13,63,109,.06);
	opacity:1;transform:none;transition:transform .18s, box-shadow .18s, border-color .18s;transition-delay:0s;}
#sub.client .con01 .cat ul.clear li:hover{transform:translateY(-3px);border-color:#0D3F6D;box-shadow:0 10px 22px rgba(13,63,109,.14);}
#sub.client .con01 li[hidden]{display:none !important;}
/* 로고 칸 = 5:3 상자(.img). 로고 파일은 640×640 정사각이라 위아래 흰 여백이 넓다(집계본은 400×240 으로 여백을 잘라 품었다) —
   contain 으로 넣으면 칸 높이에 맞춰 줄어 집계본의 절반 남짓. 정사각을 칸 폭에 맞추고 위아래 여백만 상자 밖으로 잘라 낸다
   (cover 대신 폭 맞춤 — 5:3 보다 납작한 새 로고는 좌우가 안 잘리고 위아래가 빈다). 156장 모두 그림 잘림 0(10/5 실측). */
#sub.client .con01 .cat ul.clear li .img{display:flex;align-items:center;justify-content:center;aspect-ratio:5/3;padding:0;overflow:hidden;}
/* img 의 width · height(640) 속성이 높이를 640px 로 잡지 않게 height:auto */
#sub.client .con01 .cat ul.clear li .img img{flex:none;display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto;background:#fff;}
/* 폭 맞춤 뒤에도 집계본의 0.9 배가 안 되는 파일(정사각 안 여백이 유난히 넓음) 31장만 확대 — 값 = 집계본 크기 ÷ 폭 맞춤 크기(잘림 한계의 95% 안).
   파일 이름에 걸었으니 로고를 새 파일로 바꿔 올리면 저절로 빠진다 */
#sub.client .con01 .img img[src$="/p261002_con_26.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_09.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_26.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_43.jpg"]{transform:scale(1.1);} /* 삼부토건 · 삼성SDI · 솔루엠 · 농협목우촌 */
#sub.client .con01 .img img[src$="/p261002_con_14.jpg"],#sub.client .con01 .img img[src$="/p261002_etc_15.jpg"],#sub.client .con01 .img img[src$="/p261002_etc_18.jpg"],#sub.client .con01 .img img[src$="/p261002_etc_23.jpg"]{transform:scale(1.15);} /* 디에스디삼호 · 더존비즈온 · CJ올리브네트웍스 · 신세계L&B */
#sub.client .con01 .img img[src$="/p261002_con_03.jpg"],#sub.client .con01 .img img[src$="/p261002_con_06.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_13.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_23.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_37.jpg"]{transform:scale(1.2);} /* 대우건설 · 호반건설 · HD현대오일뱅크 · 오뚜기 · 메디톡스 */
#sub.client .con01 .img img[src$="/p261002_mfg_42.jpg"]{transform:scale(1.25);} /* 코오롱머티리얼 */
#sub.client .con01 .img img[src$="/p261002_etc_12.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_01.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_07.jpg"]{transform:scale(1.3);} /* SSG · 삼성전자 · SK이노베이션 */
#sub.client .con01 .img img[src$="/p261002_etc_01.jpg"],#sub.client .con01 .img img[src$="/p261002_etc_03.jpg"]{transform:scale(1.35);} /* CJ · SK텔레콤 */
#sub.client .con01 .img img[src$="/p261002_mfg_03.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_21.jpg"]{transform:scale(1.4);} /* SK하이닉스 · 오리온 */
#sub.client .con01 .img img[src$="/p261002_mfg_02.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_38.jpg"]{transform:scale(1.45);} /* 현대자동차 · 팔도 */
#sub.client .con01 .img img[src$="/p261002_con_18.jpg"]{transform:scale(1.5);} /* 남광토건 */
#sub.client .con01 .img img[src$="/p261002_mfg_11.jpg"]{transform:scale(1.55);} /* SK에너지 */
#sub.client .con01 .img img[src$="/p261002_mfg_19.jpg"]{transform:scale(1.6);} /* SK엔무브 */
#sub.client .con01 .img img[src$="/p261002_etc_10.jpg"]{transform:scale(1.65);} /* CJ CGV */
#sub.client .con01 .img img[src$="/p261002_mfg_33.jpg"],#sub.client .con01 .img img[src$="/p261002_mfg_34.jpg"]{transform:scale(1.8);} /* 금호폴리켐 · 에이프로젠 */
#sub.client .con01 .img img[src$="/p261002_con_12.jpg"]{transform:scale(1.9);} /* 시티건설 */
#sub.client .con01 .img img[src$="/p261002_etc_07.jpg"]{transform:scale(2.5);} /* 코오롱 */
/* 로고 파일이 없는 줄 — 회사명 글자 */
#sub.client .con01 .cat ul.clear li .nl{display:flex;align-items:center;justify-content:center;aspect-ratio:5/3;padding:10px;background:#fff;text-align:center;font-size:15px;color:#B5C0CB;}

/* 쪽 번호(client_add.js 가 그림) */
#sub.client .con01 .pg{display:flex;justify-content:center;gap:6px;margin-top:30px;}
#sub.client .con01 .pg button{min-width:36px;height:36px;padding:0 8px;background:#fff;cursor:pointer;border:1px solid #D6DEE7;color:#49545E;font:inherit;font-size:15px;line-height:34px;}
#sub.client .con01 .pg button:hover{border-color:#0D3F6D;color:#0D3F6D;}
#sub.client .con01 .pg button.on{background:#0D3F6D;border-color:#0D3F6D;color:#fff;font-weight:500;}
#sub.client .con01 .pg button:disabled{opacity:.35;cursor:default;border-color:#D6DEE7;color:#49545E;}

/* 중소·중견기업 및 소상공인 — 4칸 표를 세로로 채움(같은 업종이 한 칸 줄에 모이게).
   줄 수는 client.php 가 --rows(4칸) · --rows-m(2칸)으로 넘기고, 칸마다 맨 아래 줄은 li.b4 · li.b2 — 40곳 고정이 아님 */
#sub.client .con01 .sme_w{margin-top:110px;}
#sub.client .con01 .sme_txt{margin:-4px 0 20px;font-size:18px;line-height:1.6;color:#333;}
#sub.client .con01 .sme_txt b{color:#0D3F6D;font-weight:700;}
#sub.client .con01 .sme_w ul.sme{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(var(--rows,10),auto);grid-auto-flow:column;
	column-gap:30px;padding:6px 28px;border:1px solid #D3DBE6;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(13,63,109,.06);}
#sub.client .con01 .sme_w ul.sme li{width:auto;padding:16px 4px;border-bottom:1px solid #EAEFF5;font-size:17px;color:#333;opacity:1;transform:none;transition:none;}
#sub.client .con01 .sme_w ul.sme li.b4{border-bottom:0;}
#sub.client .con01 .sme_w ul.sme li span{display:inline-block;min-width:40px;margin-right:12px;padding:1px 7px;border-radius:4px;text-align:center;
	font-size:12px;line-height:20px;vertical-align:2px;background:#EEF2F7;color:#6B7A8C;}

@media (max-width:960px){
	#sub.client .con01 .ttl{font-size:19px;margin-bottom:14px;}
	#sub.client .con01 .cat + .cat{margin-top:60px;}
	#sub.client .con01 .sme_w{margin-top:70px;}
}
@media (max-width:760px){
	#sub.client .con01 .cat ul.clear{grid-template-columns:repeat(3,1fr);gap:8px;}
	#sub.client .con01 .sme_w ul.sme{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(var(--rows-m,20),auto);column-gap:16px;padding:6px 16px;}
	#sub.client .con01 .sme_w ul.sme li{font-size:15px;}
	#sub.client .con01 .sme_w ul.sme li.b4{border-bottom:1px solid #EAEFF5;}
	#sub.client .con01 .sme_w ul.sme li.b2{border-bottom:0;}
	#sub.client .con01 .sme_txt{font-size:16px;}
}