@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ============================================================================
   company.css — 회사소개 원페이지(renew/greeting.html) 전용

   화면 구성은 drbuild.co.kr/about 방식을 기준으로 잡았다. 그 사이트에서 실제로
   측정한 값(제목 46px/600/자간 -0.02em, 본문 회색, 섹션 상하 여백 120px,
   흰색-#fafafa-#e9eaeb 3단 배경, 포인트색은 소제목에만)을 우리 폭(1200px)에 맞춰
   옮긴 것이다. CSS를 가져다 쓴 게 아니라 같은 규칙으로 다시 쓴 것이다
   (그쪽은 Next.js + Tailwind 빌드라 이 사이트에 그대로 붙지 않는다).

   ▶ 글자 크기 — 주 고객이 시니어라 닥터빌드 원본보다 한 단계씩 키웠다.
     본문 19px, 목록 19px, 소제목 27px. 회색 본문도 #717680 → #555a62 로
     낮춰 대비를 올렸다(흰 배경 대비 약 4.4:1 → 6.8:1).
     2026-09 푸터 개편(main_new.css)도 같은 이유로 키운 것이라 톤이 맞는다.
     여기서 더 줄이지 말 것.

   지켜야 할 규칙 — 이걸 어기면 금방 흔한 템플릿처럼 보인다:
     · 제목은 가운데가 아니라 왼쪽 정렬
     · "— GREETING" 같은 영문 말머리 라벨을 붙이지 않는다
     · 포인트색은 연도·소라벨에만. 아이콘 원, 색 뱃지, 그라데이션 버튼 금지
     · 카드에 테두리+hover 들썩임 대신, 사진이거나 얇은 구분선 행이다
     · 본문 글자색은 검정이 아니라 회색
     · 여백을 아끼지 않는다 (섹션당 120px)

   클래스는 전부 cp_ 접두어라 사이트 공용 CSS와 겹치지 않는다.
   ============================================================================ */

/* --------------------------------------------------------------------------
 * 0. 기본
 *
 * 글꼴은 Pretendard(오픈소스, SIL OFL)를 jsdelivr CDN에서 받는다. 굵기를 400/500/600
 * 으로 자유롭게 쓸 수 있어야 이 디자인이 성립하는데, 사이트 기본 NotoKR은 굵기마다
 * 폰트 이름이 따로라(notokr-bold 등) 그게 안 된다.
 * CDN이 막히는 환경을 대비해 폴백에 NotoKR을 굵기별로 끼워 넣었다 —
 * Pretendard가 없으면 font-weight 대신 NotoKR-Bold/Medium 이 대신 먹는다.
 * ----------------------------------------------------------------------- */
.cp_page {width:100%; float:left; background:#fff;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Regular, 'Apple SD Gothic Neo', '맑은 고딕', sans-serif;
  font-size:19px; color:#555a62; letter-spacing:-0.02em; -webkit-font-smoothing:antialiased;}
.cp_inner {width:1200px; margin:0 auto; position:relative;}
.cp_page img {vertical-align:top;}
.cp_page a {transition:color .2s ease;}

.cp_bold {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, '맑은 고딕', sans-serif; font-weight:600;}
.cp_med  {font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, '맑은 고딕', sans-serif; font-weight:500;}

/* 섹션 — 배경 3단(흰색 / #fafafa / #e9eaeb)으로만 구분한다 */
.cp_sec {width:100%; padding:120px 0; float:left; box-sizing:border-box; background:#fff;}
.cp_sec.cp_gray {background:#fafafa;}
.cp_sec.cp_dim  {background:#e9eaeb;}

/* 섹션 제목 — 왼쪽 정렬, 48px 급. 말머리 라벨 없음 */
.cp_stit {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600;
  font-size:48px; line-height:1.32; letter-spacing:-0.02em; color:#111;}
.cp_ssub {font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif; font-weight:500;
  font-size:21px; line-height:1.65; color:#555a62; margin-top:20px;}
.cp_sec_head {width:100%; float:left; margin-bottom:64px;}

/* --------------------------------------------------------------------------
 * 1. 히어로 — 사진 위 왼쪽 정렬, 버튼 없음
 * ----------------------------------------------------------------------- */
.cp_hero {position:relative; width:100%; height:580px; float:left; overflow:hidden;
  background:#0d1114 url(../images/main/visual.jpg) center center no-repeat; background-size:cover;
  display:flex; align-items:center;}
/* 사진 위에 흰 글자를 얹으므로 왼쪽에 진한 막을 깐다. 시니어 대비를 위해 원본보다 더 어둡게 */
.cp_hero:before {content:""; position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(90deg, rgba(8,12,15,.86) 0%, rgba(8,12,15,.62) 50%, rgba(8,12,15,.20) 100%);}
.cp_hero_in {position:relative; z-index:2; width:1200px; margin:0 auto;}
.cp_hero_eyebrow {font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif; font-weight:500;
  font-size:21px; color:rgba(255,255,255,.95); margin-bottom:18px;}
.cp_hero_tit {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600;
  font-size:52px; line-height:1.32; letter-spacing:-0.02em; color:#fff;}

/* --------------------------------------------------------------------------
 * 2. 앵커 이동줄 — 좌측메뉴(lm_company.html) 대체. 장식 없이 글자만
 *
 *    position:sticky 를 쓰지 않는 이유: 조상인 #container/#contents 에
 *    overflow:hidden 이 걸려 있어 sticky 가 동작하지 않는다. JS가 스크롤 위치를 보고
 *    .cp_nav_fix(=position:fixed)를 붙였다 뗀다.
 *    높이를 바꾸면 greeting.html 의 NAV_H 값도 같이 바꿔야 한다.
 * ----------------------------------------------------------------------- */
.cp_nav_holder {width:100%; height:72px; float:left;}
.cp_nav {width:100%; height:72px; background:#fff; border-bottom:1px solid #dcdee0; float:left; box-sizing:border-box;}
.cp_nav.cp_nav_fix {position:fixed; top:0; left:0; z-index:1000; float:none;}
.cp_nav ul {width:1200px; margin:0 auto; display:flex; gap:46px;}
.cp_nav li a {display:block; height:71px; line-height:71px; font-size:19px; font-weight:500;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif;
  color:#555a62; border-bottom:3px solid transparent; box-sizing:border-box;}
.cp_nav li a:hover {color:#111;}
.cp_nav li.cp_on a {color:#111; font-weight:600; border-bottom-color:#15896c;}

/* --------------------------------------------------------------------------
 * 3. 인트로 — 가운데 정렬 문단만. 제목도 카드도 없다
 * ----------------------------------------------------------------------- */
.cp_lead {width:100%; float:left; text-align:center;}
.cp_lead p {font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif; font-weight:500;
  font-size:22px; line-height:2.0; color:#3f444b; margin-bottom:38px;}
.cp_lead p:last-child {margin-bottom:0;}
.cp_lead p b {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600; color:#111;}

/* --------------------------------------------------------------------------
 * 4. 사진 카드 3장 — 가운데 카드를 아래로 내려 높이를 어긋나게 둔다
 * ----------------------------------------------------------------------- */
.cp_cards {width:100%; float:left; display:flex; gap:30px; align-items:flex-start;}
.cp_cards li {flex:1; position:relative; height:320px; border-radius:8px; overflow:hidden;}
.cp_cards li:nth-child(2) {margin-top:110px;}
.cp_cards li img {width:100%; height:100%; object-fit:cover; display:block;}
/* 사진 위 흰 글자 — 시니어 대비를 위해 아래쪽 어둡게 깔리는 막을 진하게 잡았다 */
.cp_cards li:after {content:""; position:absolute; left:0; right:0; bottom:0; height:78%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.82) 100%);}
.cp_cards .cp_card_txt {position:absolute; left:30px; right:30px; bottom:28px; z-index:2;}
.cp_cards .cp_card_tit {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600;
  font-size:27px; line-height:1.35; letter-spacing:-0.02em; color:#fff; margin-bottom:10px;}
.cp_cards .cp_card_sub {font-size:18px; line-height:1.5; color:rgba(255,255,255,.94); font-weight:500;}

/* --------------------------------------------------------------------------
 * 5. CEO 인사말 — 왼쪽 본문 / 오른쪽 사진, 아래 서명
 *    본문 글자를 키운 만큼 사진을 줄여(440→400) 글줄이 밀려나지 않게 했다
 * ----------------------------------------------------------------------- */
.cp_ceo {width:100%; float:left; display:flex; gap:60px; align-items:flex-start;}
.cp_ceo_txt {flex:1;}
.cp_ceo_txt p {font-size:20px; line-height:1.9; color:#555a62; font-weight:500;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif; margin-bottom:28px;}
.cp_ceo_txt p:last-of-type {margin-bottom:0;}
.cp_ceo_txt p b {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600; color:#111;}
.cp_ceo_img {width:400px; flex:0 0 400px;}
.cp_ceo_img img {width:100%; border-radius:8px; display:block;}
.cp_sign {width:100%; float:left; margin-top:60px;}
.cp_sign .cp_sign_co {font-size:18px; color:#555a62; font-weight:500;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif; margin-bottom:8px;}
.cp_sign .cp_sign_nm {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600;
  font-size:32px; letter-spacing:-0.02em; color:#15896c;}

/* --------------------------------------------------------------------------
 * 6. 라벨 / 내용 2열 목록 — 사업영역·연혁·일반현황·인증이 전부 이 형태를 쓴다
 *    그룹 사이는 점이나 세로선이 아니라 얇은 가로 구분선 하나로만 나눈다
 * ----------------------------------------------------------------------- */
.cp_rows {width:100%; float:left;}
.cp_row {display:flex; padding:40px 0; border-top:1px solid #dcdee0; align-items:flex-start;}
.cp_row:first-child {border-top:0; padding-top:0;}
.cp_row:last-child {padding-bottom:0;}
.cp_sec.cp_gray .cp_row, .cp_sec.cp_dim .cp_row {border-top-color:#d3d5d8;}

/* 라벨 칸 — 글자를 키운 만큼 폭도 300 → 360 으로 넓혔다 */
.cp_row_h {width:360px; flex:0 0 360px; padding-right:48px; box-sizing:border-box;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600;
  font-size:27px; line-height:1.4; letter-spacing:-0.02em; color:#15896c;}
.cp_row_h.cp_ink {color:#111;}
.cp_row_h span {display:block; font-size:17px; font-weight:500; color:#7a808a; margin-top:6px;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif;}
.cp_row_b {flex:1; font-size:19px; line-height:1.85; color:#555a62; font-weight:500;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif; padding-top:4px;}
.cp_row_b .cp_row_tit {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600;
  font-size:23px; line-height:1.4; letter-spacing:-0.02em; color:#111; margin-bottom:14px;}
.cp_row_b li {position:relative; padding-left:16px; margin-bottom:10px;}
.cp_row_b li:last-child {margin-bottom:0;}
.cp_row_b li:before {content:"·"; position:absolute; left:2px; top:0; color:#7a808a;}
/* 연혁처럼 "날짜 + 내용"이 한 줄인 목록 */
.cp_row_b dl {display:flex; margin-bottom:12px;}
.cp_row_b dl:last-child {margin-bottom:0;}
.cp_row_b dt {width:118px; flex:0 0 118px; color:#7a808a; font-weight:500;}
.cp_row_b dd {flex:1;}

/* --------------------------------------------------------------------------
 * 7. 오시는 길
 * ----------------------------------------------------------------------- */
.cp_map {width:100%; float:left; border-radius:8px; overflow:hidden; margin-bottom:40px;}
/* 카카오 지도퍼가기(roughmap)는 자체 CSS로 폭을 잡으므로 컨테이너에 맞춰 늘려준다 */
.cp_map .root_daum_roughmap {width:100% !important;}
.cp_map .root_daum_roughmap .wrap_map {height:460px !important;}

.cp_loc {width:100%; float:left; display:flex; gap:70px;}
.cp_loc_col {flex:1;}
.cp_loc_lb {font-size:22px; font-weight:500; color:#15896c; margin-bottom:12px;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif;}
.cp_loc_tx {font-family:'Pretendard Variable', Pretendard, NotoKR-Bold, sans-serif; font-weight:600;
  font-size:28px; line-height:1.5; letter-spacing:-0.02em; color:#111;}
.cp_loc_sub {font-size:19px; line-height:1.8; color:#555a62; font-weight:500; margin-top:14px;
  font-family:'Pretendard Variable', Pretendard, NotoKR-Medium, sans-serif;}
.cp_loc_sub img {vertical-align:middle; margin-right:6px;}

/* --------------------------------------------------------------------------
 * 8. 스크롤 등장 — JS가 화면에 들어온 요소에 .cp_in 을 붙인다
 * ----------------------------------------------------------------------- */
.cp_up {opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease;}
.cp_up.cp_in {opacity:1; transform:translateY(0);}