@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, input, select, textarea, button {
    margin: 0;
    padding: 0;
    font-family: 'NotoSans', '나눔고딕', Nanum Gothic, Malgun gothic, '맑은고딕', Dotum, '돋움', arial, sans-serif;
}

/* 타이틀 자간 조절 */
h1, .bigTitle_B {
    letter-spacing:-0.02em;
    font-family: 'Montserrat', 'NotoSans', '나눔고딕', Nanum Gothic, Malgun gothic, '맑은고딕', Dotum, '돋움', arial, sans-serif;
}

html {
  -webkit-font-smoothing: antialiased;   /* WebKit */
  -moz-osx-font-smoothing: grayscale;    /* macOS Firefox */
  text-rendering: optimizeLegibility;    /* 커닝/합자 활성화 */
}

/*
    헤더 CSS
    2025.09.29
*/
/* 색상 커스텀 (원하는 색으로 바꾸세요) */
:root {
  --nav-active: #0d6efd;   /* 현재 페이지 탭 색 */
  --nav-hover:  #0d6efd;   /* 호버 밑줄 색 */
  --nav-text:   #222;      /* 기본 텍스트 색 */
}

/* 기본 스타일 보강 */
header .nav-link {
  position: relative;
  color: var(--nav-text);
  font-weight: 500;
  transition: color .2s ease;
}

/* 밑줄 슬라이드 애니메이션 */
header .nav-link::after {
  content: "";
  position: absolute;
  left: 12px;                 /* 좌우 여백(아이콘/패딩 고려) */
  right: 12px;
  bottom: 4px;                /* 밑줄 위치 */
  height: 2px;
  background: var(--nav-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease-out;
}

/* 호버 시 텍스트 살짝 강조 + 밑줄 슬라이드 인 */
header .nav-link:hover {
  color: var(--nav-hover);
}
header .nav-link:hover::after {
  transform: scaleX(1);
}

/* 오프캔버스 메뉴에서도 같은 호버/밑줄 효과 */
.offcanvas .nav-link {
  position: relative;
}
.offcanvas .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--nav-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease-out;
}
.offcanvas .nav-link:hover::after {
  transform: scaleX(0.5);
}


.init-logo {
    height:30px
}

.footer-info {
    margin-top: 0.250rem;
    font-size: .6875rem;
}

/* 1) 섹션은 더 이상 자르지 말고, 기본 높이를 확보 */
.section{
  position: relative;
  width: 100%;
  min-height: clamp(480px, 90dvh, 1100px); /* 콘텐츠가 많으면 더 커짐 */
}

/* 2) 배경 이미지는 섹션 높이에 맞춰 '덮기' */
.background-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                 /* 빈칸 없이 배경처럼 */
  display: block;
}

/* 3) 오버레이는 상대배치(겹치기만) */
.overlay{
  position: relative;                /* absolute 아님! */
  height: 100%;
  display: flex; align-items: center;
  color: #000;
}

/* 4) 제목 고정 160px → 반응형으로 (필수) */
.bigTitle_B,
.bigTitle_W{
  width: auto;                       /* 500px 고정 해제 */
  font-size: clamp(36px, 12vw, 160px);
  font-weight: 700;
  letter-spacing: -0.05em;           /* -10px 대신 비율 값 */
}
.bigTitle_W{
  color: white;
}

.mediumTitle_B,
.mediumTitle_W{
  width: auto;
  font-size: clamp(25px, 4vw, 160px);
  font-weight: 800;
  letter-spacing: -0.05em;
}
.mediumTitle_W{
  color: white;
}

.smallTitle_B{
  width: auto;
  font-size: clamp(20px, 2vw, 160px);
  font-weight: 800;
  letter-spacing: -0.05em;
}

.mediumContents{
  display: inline-block;          /* 줄 단위로 묶기 (br와 함께 사용) */
  white-space: nowrap;            /* 줄 안에서는 절대 개행 X */
  word-break: keep-all;           /* 한글 단어 중간 개행 방지 */
  font-weight: 700;
  font-size: clamp(8px, 2.6vw, 28px); /* 화면에 맞춰 축소/확대 */
}


/* 바로가기 버튼 디자인 */
.init-blackBtn_B{
    background: #000 url(../images/btn_bg_w.png) no-repeat 105px 26px;
    width: 185px;
    text-align: left;
    padding: 10px 0px 8px 9px;
}

.init-blackBtn_W{
    background: white url(../images/btn_bg_b.png) no-repeat 105px 26px;
    width: 185px;
    text-align: left;
    padding: 10px 0px 8px 9px;
}

.init-outLineBtn{
display: block;
    width: 195px;
    padding: 10px 0px 8px 9px;
    color: #000;
    font-weight: 600;
    border: 1px solid #000;
    width: 200px;
    text-align: left;
    background: url(../images/btn_bg_b2.png) no-repeat 158px 28px;
}

/* 연혁 관련 CSS */
.historyYear,
.performance,
.employment{
  color: #0e40bf;
  font-weight: 600;
}

/* 텍스트: 줄바꿈 금지 + 컨테이너 너비 기준 가변 폰트 */
.history_text,
.performance_text,
.business_text,
.map_text{
  white-space: nowrap;
  font-size: clamp(12px, 3.2cqw, 18px); /* 12~18px 사이에서 컨테이너 너비에 비례 */
  font-weight: 600;
}

.contents_text{
  font-size: clamp(12px, 3.2cqw, 18px); /* 12~18px 사이에서 컨테이너 너비에 비례 */
  font-weight: 600;
}

.performance_text::before{
  content: "- ";
}
.map_text{
  margin-bottom: 10px;
}

.business_img{
  filter: brightness(.6) contrast(1.05) saturate(1.1);
  width: 50px;
}
.businessCard_title{
  color: #00a1b0;
  letter-spacing: -2px;
  white-space: nowrap;
  font-size: clamp(12px, 3.2cqw, 18px); /* 12~18px 사이에서 컨테이너 너비에 비례 */
}




/*
    About 페이지 _ 연혁 타임라인 CSS 작성
    2025.09.29
*/

.history{ 
  position: relative;
}

/* 세로 스파인 (연혁 전체 공통 라인) */
.history::before{
  content:"";
  position:absolute;
  top: .75rem;                 /* 위 여백 살짝 */
  bottom: .75rem;              /* 아래 여백 살짝 */
  /* xs~sm: year가 col-3(25%) → 그 오른쪽 가장자리 = 25% + gutter/2 */
  left: calc(25% + var(--bs-gutter-x, 1.5rem)/2);
  width: 2px;
  background: #e6eaf3;
}

/* md 이상: year가 col-md-2(16.666%)가 되므로 위치 재조정 */
@media (min-width: 768px){
  .history::before{
    left: calc(16.666% + var(--bs-gutter-x, 1.5rem)/2);
  }
}

/* 각 항목(행) 기준으로 포지셔닝 */
.history .row{
  position: relative;
}

/* 타임라인 노드(점) */
.history .row::before{
  content:"";
  position:absolute;
  top: 50%;
  left: calc(25% + var(--bs-gutter-x, 1.5rem)/2);   /* 스파인 중앙에 점 */
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: #0e40bf;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #0e40bf22;
}
@media (min-width: 768px){
  .history .row::before{
    left: calc(16.666% + var(--bs-gutter-x, 1.5rem)/2);
  }
}

/* 내용 칼럼과 스파인 사이 간격 확보 */
.history .col-9,
.history .col-sm-9,
.history .col-md-10{
  padding-left: calc(var(--bs-gutter-x, 1.5rem) + 1rem);
}

/* 행 간격/구분선 다듬기 */
.history .row.align-items-start{
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px dashed #e6eaf3;   /* 기존 border-bottom 있으면 유지 느낌만 변경 */
}

/* 연도 스타일 강화(가독성) */
.history .historyYear{
  color: #0e40bf;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 작은 화면에서 줄바꿈 허용(항목이 길 때) */
@media (max-width: 576px){
  .history_text{
    white-space: normal;       /* 너무 길면 줄바꿈 허용 */
    line-height: 1.5;
  }
}

/* 접근성: 키보드 포커스 시 노드 하이라이트 */
.history .row:focus-within::before{
  box-shadow: 0 0 0 4px #0e40bf33;
}