@charset "UTF-8";
/* ============================================================
   부품몰 (Parts Mall) 랜딩 페이지 - Figma 신규 디자인 스타일 기준
   - 의도적으로 레거시 페이지 스타일(쇼룸 등)을 상속하지 않음: 점진적 디자인 전환
     기준: Figma(3bpHWEbZBYuCcAPxWomx6F) + /product/product_list?idx=198 신규 페이지
     상세: docs/design/design-style-migration.md
   - 타이포: Pretendard ExtraBold(800) 헤딩 / letter-spacing normal~타이트
   - 페이드업 모션: 공통 시스템(img-ani bottom-top) 재사용
   - PC: 취급부품 6열 / 모바일(<=767): 3열x2행
   ============================================================ */

.parts_mall { color:#111; font-family:'Pretendard', sans-serif; }
.parts_mall * { box-sizing:border-box; }
/* 전역 유니버설 셀렉터(mu_layout.css `* { font-family:'Exo 2'... }`)가 상속을 덮어쓰므로
   개별 클래스 나열 대신 페이지 전체를 Pretendard로 강제 — 신규 디자인 방향(의도적 변경) */
.parts_mall,
.parts_mall * { font-family:'Pretendard', sans-serif; }
.parts_mall .pm_container { width:100%; max-width:1920px; margin:0 auto; padding:0 175px; }

/* ---- 진입 인트로 애니메이션 (스크롤 전, 로드 시) ----
   타이틀 → 히어로 순으로 페이드업. 스크롤 트리거(img-ani) 대신 .pm_loaded 클래스(JSP 스크립트)로 발동 */
.parts_mall .pm_head,
.parts_mall .pm_hero { opacity:0; transform:translate(0,60px); transition:all 1.2s cubic-bezier(0,.72,.44,.99); }
.parts_mall.pm_loaded .pm_head,
.parts_mall.pm_loaded .pm_hero { opacity:1; transform:translate(0,0); }
.parts_mall.pm_loaded .pm_head { transition-delay:.1s; }
.parts_mall.pm_loaded .pm_hero { transition-delay:.35s; }

/* ---- 소개(인트로) 순차 페이드업 스태거: 타이틀 → 설명 → 링크 (PC/모바일 공통) ---- */
.parts_mall .pm_intro_tit.img-ani { transition-delay:0s; }
.parts_mall .pm_intro_desc.img-ani { transition-delay:.15s; }
.parts_mall .pm_link.img-ani { transition-delay:.3s; }

/* ---- 취급부품 시차 페이드업: 항목별 0.1s 스태거 (PC/모바일 공통) ---- */
.parts_mall .pm_parts_list li.img-ani:nth-child(2) { transition-delay:.1s; }
.parts_mall .pm_parts_list li.img-ani:nth-child(3) { transition-delay:.2s; }
.parts_mall .pm_parts_list li.img-ani:nth-child(4) { transition-delay:.3s; }
.parts_mall .pm_parts_list li.img-ani:nth-child(5) { transition-delay:.4s; }
.parts_mall .pm_parts_list li.img-ani:nth-child(6) { transition-delay:.5s; }

/* 타이틀 — 제품 리스트(/product/product_list) 페이지와 동일한 위치·구조:
   상단 100px(.product padding-top) / 하단 120px(.prod_nm), 타이틀 72px/800, 영문 라벨 28px/800 상단 정렬 */
.parts_mall .pm_head { display:flex; justify-content:space-between; align-items:flex-start; padding-top:100px; padding-bottom:120px; }
.parts_mall .pm_title { margin:0; font-weight:800; font-size:72px; line-height:1; }
.parts_mall .pm_title_en { font-weight:800; font-size:28px; line-height:1; text-transform:uppercase; }

/* 히어로 (풀블리드) */
.parts_mall .pm_hero { width:100%; }
.parts_mall .pm_hero img { display:block; width:100%; height:450px; object-fit:cover; }

/* 소개 + 부품몰 바로가기 */
.parts_mall .pm_intro { display:flex; gap:250px; padding-top:140px; padding-bottom:140px; }
.parts_mall .pm_intro_tit { flex:none; width:544px; margin:0; font-weight:800; font-size:46px; line-height:1; }
.parts_mall .pm_intro_r { flex:1; display:flex; flex-direction:column; gap:80px; }
.parts_mall .pm_intro_desc { margin:0; font-size:22px; line-height:1.6; letter-spacing:-0.88px; opacity:.8; }

/* 공통 바로가기 링크 */
.parts_mall .pm_link { display:inline-flex; align-items:center; gap:10px; color:#111; text-decoration:none; font-weight:500; font-size:24px; letter-spacing:-1.2px; transition:opacity .3s; }
.parts_mall .pm_link img { width:20px; height:20px; }
.parts_mall .pm_link:hover { opacity:.6; }

/* 취급 부품 (풀블리드 배경) */
.parts_mall .pm_parts { background:#f9f9f9; padding-top:140px; padding-bottom:160px; }
.parts_mall .pm_parts_inner { display:flex; flex-direction:column; align-items:center; gap:70px; }
.parts_mall .pm_parts_tit { margin:0; font-weight:800; font-size:56px; line-height:1; text-align:center; }
.parts_mall .pm_parts_list { width:100%; margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.parts_mall .pm_parts_list li { display:flex; flex-direction:column; align-items:center; gap:24px; }
/* 1:1 비율 - 구형 브라우저 호환 패딩 기법 */
.parts_mall .pm_parts_img { position:relative; width:100%; padding-top:100%; border-radius:10px; overflow:hidden; background:#fff; }
.parts_mall .pm_parts_img img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.parts_mall .pm_parts_list li span { font-weight:500; font-size:24px; letter-spacing:-1.2px; text-align:center; }

/* SERVICE */
.parts_mall .pm_service { display:flex; justify-content:space-between; align-items:center; padding-top:90px; padding-bottom:90px; }
.parts_mall .pm_service_l { max-width:776px; }
.parts_mall .pm_service_tit { margin:0 0 30px; font-weight:800; font-size:46px; line-height:1; }
.parts_mall .pm_service_desc { margin:0; font-size:18px; line-height:1.6; letter-spacing:-0.72px; }

/* ===== 태블릿/좁은 데스크톱 ===== */
@media (max-width:1440px){
  .parts_mall .pm_container { padding:0 60px; }
  .parts_mall .pm_intro { gap:80px; }
  .parts_mall .pm_intro_tit { width:40%; }
}
@media (max-width:1024px){
  .parts_mall .pm_head { padding-top:90px; padding-bottom:50px; }
  .parts_mall .pm_title { font-size:52px; }
  .parts_mall .pm_intro { gap:40px; padding-top:80px; padding-bottom:80px; }
  .parts_mall .pm_intro_tit { font-size:34px; }
  .parts_mall .pm_intro_r { gap:50px; }
  .parts_mall .pm_intro_desc { font-size:18px; }
  .parts_mall .pm_parts { padding-top:80px; padding-bottom:90px; }
  .parts_mall .pm_parts_tit { font-size:40px; }
  .parts_mall .pm_parts_list { grid-template-columns:repeat(3,1fr); gap:20px; }
}

/* ===== 모바일 (<=767) - Figma 모바일 시안 기준 ===== */
@media (max-width:767px){
  /* 전체 텍스트를 헤더 로고(D) 라인에 맞춤 — 헤더 gnb_inner / 제품 cont_pagew와 동일한 좌우 15px */
  .parts_mall .pm_container { padding:0 15px; }
  /* 타이틀: 제품 리스트 모바일과 동일 — 영문 라벨을 한글 타이틀 중앙(align-items:center)에 배치, 크기 32/14 */
  .parts_mall .pm_head { padding-top:50px; padding-bottom:40px; align-items:center; }
  .parts_mall .pm_title { font-size:32px; }
  .parts_mall .pm_title_en { font-size:14px; }
  .parts_mall .pm_hero img { height:190px; }
  .parts_mall .pm_intro { flex-direction:column; gap:20px; padding-top:40px; padding-bottom:40px; }
  .parts_mall .pm_intro_tit { width:100%; font-size:22px; }
  .parts_mall .pm_intro_r { width:100%; gap:24px; }
  .parts_mall .pm_intro_desc { font-size:14px; letter-spacing:-0.56px; }
  .parts_mall .pm_link { font-size:16px; letter-spacing:-0.8px; }
  .parts_mall .pm_link img { width:16px; height:16px; }
  .parts_mall .pm_parts { padding-top:40px; padding-bottom:40px; }
  .parts_mall .pm_parts_inner { gap:24px; }
  .parts_mall .pm_parts_tit { font-size:24px; }
  .parts_mall .pm_parts_list { grid-template-columns:repeat(3,1fr); gap:16px 8px; }
  .parts_mall .pm_parts_list li { gap:10px; }
  .parts_mall .pm_parts_list li span { font-size:13px; letter-spacing:-0.65px; }
  .parts_mall .pm_service { flex-direction:column; align-items:flex-start; gap:20px; padding-top:40px; padding-bottom:40px; }
  .parts_mall .pm_service_tit { margin-bottom:14px; font-size:24px; }
  .parts_mall .pm_service_desc { font-size:14px; letter-spacing:-0.56px; }
}