/* =============================================
   서브 배너 — introduce.css의 기본 스타일 상속
   sub.css의 top:50%/transform 충돌을 명시적으로 리셋
   ============================================= */
#shSubBnr{position:relative;width:100%;overflow:hidden}
#shSubBnr #mainImg{display:block;width:100%;height:320px;background-size:cover;background-position:center;background-repeat:no-repeat}
#shSubBnr .sub_nav{position:absolute;top:auto;transform:none;bottom:0;left:0;width:100%;padding:0 40px 24px;box-sizing:border-box;color:#fff;z-index:2}
#shSubBnr .sub_nav .crumb{display:flex;align-items:center;gap:4px;font-size:13px;color:rgba(255,255,255,.85);margin:0 0 8px;position:relative}
#shSubBnr .sub_nav .crumb a{color:inherit;display:flex;align-items:center}
#shSubBnr .sub_nav .tit{font-size:28px;font-weight:700;color:#fff;margin:0;letter-spacing:-.5px;position:relative}

/* =============================================
   콘텐츠 영역 — 가로 스크롤 방지
   ============================================= */
#content_section{width:100%;overflow-x:hidden;box-sizing:border-box}

/* =============================================
   타임라인 헤더
   ============================================= */
.timeline-section{max-width:900px;margin:0 auto;padding:60px 20px;box-sizing:border-box}
.timeline-header{text-align:center;margin-bottom:60px}
.timeline-header .sub-title{display:inline-block;padding:8px 20px;background:#1a3a5c;color:#fff;font-size:14px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px}
.timeline-header h2{font-size:32px;color:#222;font-weight:400;line-height:1.6;word-break:keep-all}
.timeline-header h2 strong{font-weight:700;color:#1a3a5c}

/* =============================================
   타임라인 — 데스크톱
   라인: left 120px  도트: left 112px + 18px → 중심 121px ✓
   year: 100px  content: 100 + padding 60px = 160px 시작
   ============================================= */
.timeline{position:relative}
.timeline::before{content:'';position:absolute;left:120px;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,#1a3a5c,#3d7cc9)}
.timeline-group{margin-bottom:20px}
.timeline-group .timeline-item:not(:last-child){margin-bottom:20px}
.timeline-group .timeline-item:not(:first-child) .timeline-year{visibility:hidden}
.timeline-item{display:flex;align-items:flex-start;position:relative}
.timeline-year{flex-shrink:0;width:100px;text-align:right;padding-right:40px;font-size:24px;font-weight:700;color:#1a3a5c;line-height:1.4;box-sizing:border-box}
.timeline-dot{position:absolute;left:112px;top:6px;width:18px;height:18px;background:#fff;border:4px solid #1a3a5c;border-radius:50%;z-index:1;box-sizing:border-box}
.timeline-content{flex:1;padding-left:60px;min-width:0}
.timeline-date{display:inline-block;background:#f5f7fa;padding:4px 12px;border-radius:4px;font-size:13px;color:#666;margin-bottom:8px}
.timeline-content h4{font-size:18px;color:#333;font-weight:600;margin:0;line-height:1.6;word-break:keep-all}
.timeline-content p{font-size:14px;color:#777;margin:4px 0 0}

/* =============================================
   태블릿 (768px 이하)
   라인: left 75px  도트: left 66px + 18px → 중심 75px ✓
   year: 60px  content: 60 + padding 36px = 96px 시작
   ============================================= */
@media screen and (max-width:768px){
    #shSubBnr #mainImg{height:220px}
    #shSubBnr .sub_nav{padding:0 20px 18px}
    #shSubBnr .sub_nav .tit{font-size:22px}
    .timeline-section{padding:40px 16px}
    .timeline-header{margin-bottom:36px}
    .timeline-header h2{font-size:22px}
    .timeline::before{left:75px}
    .timeline-year{width:60px;font-size:18px;padding-right:22px}
    .timeline-dot{left:66px}
    .timeline-content{padding-left:36px}
    .timeline-content h4{font-size:16px}
}

/* =============================================
   모바일 (480px 이하)
   연도 컬럼 제거 → 왼쪽 단순 라인 레이아웃
   라인: left 10px  도트: left 3px + 16px → 중심 11px ✓
   아이템: padding-left 28px → 콘텐츠 28px 시작
   ============================================= */
@media screen and (max-width:480px){
    #shSubBnr #mainImg{height:160px}
    #shSubBnr .sub_nav{padding:0 16px 14px}
    #shSubBnr .sub_nav .tit{font-size:18px}
    #shSubBnr .sub_nav .crumb{font-size:11px}
    .timeline-section{padding:28px 12px}
    .timeline-header{margin-bottom:24px}
    .timeline-header .sub-title{font-size:11px;letter-spacing:2px;padding:5px 12px;margin-bottom:12px}
    .timeline-header h2{font-size:16px;line-height:1.7}
    .timeline-header h2 br{display:none}
    .timeline::before{left:10px;width:2px}
    .timeline-year{display:none}
    .timeline-group .timeline-item:not(:first-child) .timeline-year{display:none}
    .timeline-item{padding-left:28px}
    .timeline-group .timeline-item:not(:last-child){margin-bottom:14px}
    .timeline-dot{left:3px;top:5px;width:16px;height:16px;border-width:3px}
    .timeline-content{padding-left:0}
    .timeline-content h4{font-size:14px;line-height:1.55}
    .timeline-date{font-size:11px;padding:3px 8px;margin-bottom:5px}
    .timeline-content p{font-size:12px}
}