/* ===========================================================================
   반응형 레이어 — 2026-08 추가
   ---------------------------------------------------------------------------
   구 사이트는 폭 1470px 고정 레이아웃이었고, 모바일은 /mobile/ 아래 별도 사이트를
   User-Agent 로 갈라서 서빙했다. 그 구조는 같은 내용이 두 URL 로 존재해 검색엔진의
   모바일 우선 색인에서 불리하다. 여기서는 하나의 URL 이 모든 폭에 대응하게 한다.

   원본 CSS 파일들(common/layout/main/sub.css)은 손대지 않는다. 이 파일이 가장
   마지막에 로드되어 필요한 지점만 덮어쓴다 — 1470px 이상에서는 아무 것도 바꾸지 않아
   데스크톱 화면은 원본과 완전히 동일하다.
   =========================================================================== */

/* --- 공통: 이미지가 컨테이너를 넘지 않도록 ------------------------------- */
img { max-width: 100%; }

/* 어떤 경우에도 문서가 뷰포트보다 넓어지지 않게 한다.
   구 CSS 에 픽셀 고정폭이 많고 bxSlider 가 인라인 width 를 써서, 한 군데만
   삐져나와도 페이지 전체가 가로 스크롤된다. */
@media (max-width: 1470px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* ===========================================================================
   1470px 미만 — 고정폭을 유동폭으로
   =========================================================================== */
@media (max-width: 1470px) {
  #layout { min-width: 0; overflow-x: hidden; }
  .container { width: 100%; max-width: 1470px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
  #hd_wrap { width: 100%; min-width: 0; }
  .work_cnt .img_box { width: 100%; }

  /* 카테고리 탭은 display:table 이라 셀 최소폭(긴 영문 라벨)이 100% 를 밀어낸다.
     table-layout:fixed 로 9칸을 균등 분할하고 글자는 줄바꿈시킨다. */
  .work_taps ul { table-layout: fixed; }
  .work_taps ul li a { word-break: keep-all; }
}

/* ===========================================================================
   1200px 이하 — 태블릿 가로
   =========================================================================== */
@media (max-width: 1200px) {
  /* WORK 목록 2열 */
  .work_list > ul > li { width: calc((100% - 30px) / 2); margin-right: 30px; }
  .work_list > ul > li:nth-child(3n) { margin-right: 30px; }
  .work_list > ul > li:nth-child(2n) { margin-right: 0; }
  .work_list > ul > li .wl_img .thum { height: 320px; }

  /* 공지/블로그 카드 2열 */
  .bg_list ul li,
  .blog_detail .bg_list ul li { width: calc((100% - 24px) / 2); height: auto; margin-right: 24px; }
  .bg_list ul li:nth-child(4n),
  .blog_detail .bg_list ul li:nth-child(4n) { margin-right: 24px; }
  .bg_list ul li:nth-child(2n),
  .blog_detail .bg_list ul li:nth-child(2n) { margin-right: 0; }
  .bg_list ul li:nth-child(n + 3),
  .blog_detail .bg_list ul li:nth-child(n + 3) { margin-top: 25px; }
  .bg_list ul li .txt p,
  .blog_detail .bg_list ul li .txt p { height: auto; }

  /* 상단 메뉴 간격 축소 */
  #nav ul li + li { margin-left: 28px; }
  #nav ul li a img { height: 12px; width: auto; }

  /* bxSlider / swiper 는 초기화 시점 폭으로 인라인 width 를 박아 넣는다.
     좁은 화면에서 그 값이 남아 가로 넘침을 만들므로 강제로 유동폭으로 되돌린다. */
  .bx-wrapper, .bx-viewport { width: 100% !important; max-width: 100% !important; }
  .ct_slider, .ct_slider .item,
  .bg_slider, .bg_slider .item,
  .mv_slider, .mv_slider .item { max-width: 100% !important; }
  /* bxSlider 가 .item 에 초기화 시점 픽셀 폭을 박아 넣어 안쪽 ul 까지 밀어낸다 */
  .work .ct_list .ct_slider .item,
  .work .ct_list ul { width: 100% !important; max-width: 100% !important; }
  .swiper-container { max-width: 100%; }

  /* 푸터 버튼 */
  #footer .ft_top { padding-left: 24px; padding-right: 24px; }
  #footer .ft_top .ft_links .ftl_top a { width: 230px; }

  /* 클라이언트 로고 — 원본은 136px 9열 고정이라 1470 미만에서 바로 넘친다 */
  .work .ct_list { padding: 0 40px; }
  .work .ct_list li { width: calc((100% - 78px) / 7); margin-right: 13px; }
  .work .ct_list li:nth-child(9n) { margin-right: 13px; }
  .work .ct_list li:nth-child(7n) { margin-right: 0; }
}

/* ===========================================================================
   900px 이하 — 태블릿 세로 / 큰 휴대폰
   =========================================================================== */
@media (max-width: 900px) {
  /* 헤더: 로고와 메뉴를 위아래로 */
  #header { position: relative; top: 0; height: auto; padding: 12px 16px; }
  #logo { float: none; height: 34px; margin-top: 0; }
  #nav { float: none; margin-top: 12px; }
  #nav ul { display: flex; flex-wrap: wrap; gap: 16px 22px; }
  #nav ul li { float: none; padding: 4px 0; }
  #nav ul li + li { margin-left: 0; }

  /* 메인 비주얼: 고정 높이 해제 */
  .main_visual .mv_slider .item { height: auto; min-height: 380px; padding-bottom: 40px; }
  .main_visual .mv_slider .item .txt { margin-top: 60px; }
  .main_visual .mv_slider .item .stit { margin-top: 28px; }
  .main_visual .mv_slider .item .view { margin-top: 40px; }

  /* 클라이언트 로고 슬라이더 */
  .work .ct_list { padding: 0 30px; }
  .work .ct_list li { width: calc((100% - 39px) / 4); margin-right: 13px; }
  .work .ct_list li:nth-child(9n) { margin-right: 13px; }
  .work .ct_list li:nth-child(4n) { margin-right: 0; }

  /* 카테고리 탭: 표 배치를 그리드로 */
  .work_taps, .work_taps ul { height: auto; }
  .work_taps ul { display: grid; grid-template-columns: repeat(3, 1fr); }
  .work_taps ul li { display: block; }

  /* WORK 상세 정보 */
  .detail_top .dt_info .row_item { min-width: 0; width: 50%; margin-right: 0; float: left; margin-bottom: 20px; }
  .detail_top .dt_info .col_item { margin-right: 0; }

  /* 푸터 세로 배치 */
  #footer .ft_top .ft_cs,
  #footer .ft_top .ft_links { float: none; }
  #footer .ft_top .ft_links { margin-top: 28px; }
  #footer .ft_top .ft_links .ftl_top a { float: none; display: block; width: 100%; max-width: 340px; }
  #footer .ft_top .ft_links .ftl_top a + a { margin-left: 0; margin-top: 9px; }
}

/* ===========================================================================
   1200px 이하 — 고정 크기 도형/콜라주 블록 처리
   ---------------------------------------------------------------------------
   메인 포트폴리오(pf1~pf11)와 OVERVIEW 조직도는 1470px 기준으로 절대 배치된
   디자인이다. 억지로 재배치하면 연결선과 균형이 무너지므로, 원본 배치를 유지한 채
   그 블록만 가로로 스크롤하게 한다. 내용이 잘리지 않으면서 디자인도 보존된다.
   =========================================================================== */
@media (max-width: 1200px) {
  .portfolio .pf_list,
  .ov_item .ov_ogz {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .portfolio .pf_list > ul,
  .ov_item .ov_ogz > ul {
    min-width: 1120px;
  }
  /* 스크롤 가능하다는 신호 */
  .portfolio .pf_list::-webkit-scrollbar,
  .ov_item .ov_ogz::-webkit-scrollbar { height: 6px; }
  .portfolio .pf_list::-webkit-scrollbar-thumb,
  .ov_item .ov_ogz::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }

  /* 메인 비주얼 배경 이미지 — 원본은 width:1091px 고정에 right:-130px */
  .main_visual .mv_slider .item .bg { width: 100%; max-width: 1091px; right: 0; }
  .main_visual .mv_slider .item .bg img { width: 100%; height: auto; }
}

/* ===========================================================================
   640px 이하 — 휴대폰
   =========================================================================== */
@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }

  /* 메뉴 이미지가 4개 나란히 들어가도록 더 줄이고, 넘치면 다음 줄로 */
  #header { padding: 10px 12px; }
  #nav ul { gap: 10px 14px; }
  #nav ul li a { padding: 4px 0; }
  #nav ul li a img { height: 9px; }
  #logo { height: 28px; }

  /* 모든 카드형 목록 1열 */
  .work_list > ul > li,
  .work_list > ul > li:nth-child(3n),
  .work_list > ul > li:nth-child(2n),
  .bg_list ul li,
  .bg_list ul li:nth-child(4n),
  .bg_list ul li:nth-child(2n),
  .blog_detail .bg_list ul li,
  .blog_detail .bg_list ul li:nth-child(4n),
  .blog_detail .bg_list ul li:nth-child(2n) {
    float: none; width: 100%; margin-right: 0;
  }
  .work_list > ul > li { margin-top: 20px; }
  .work_list > ul > li a { padding: 20px; }
  .work_list > ul > li .wl_img .thum { height: 240px; }
  .work_list > ul > li .cnt { margin-top: 24px; }
  .bg_list ul li + li,
  .blog_detail .bg_list ul li + li { margin-top: 24px; }
  .bg_list ul li .txt strong,
  .blog_detail .bg_list ul li .txt strong { height: auto; }

  /* 탭 2열 */
  .work_taps ul { grid-template-columns: repeat(2, 1fr); }

  /* 서브 상단 타이틀 이미지 축소 */
  .sub_title h2 img { max-width: 60%; }
  .sub_title p { font-size: 14px; margin-top: 18px; }

  /* WORK 상세 */
  .detail_top .dt_info .row_item { width: 100%; float: none; }
  .detail_top { padding-bottom: 24px; margin-bottom: 24px; }
  .wr_item { width: 260px; height: auto; padding: 0 20px 20px; }

  /* 클라이언트 로고 3열 */
  .work .ct_list { padding: 0 20px; }
  .work .ct_list li { width: calc((100% - 26px) / 3); height: 60px; background-size: 80% auto; }
  .work .ct_list li:nth-child(4n) { margin-right: 13px; }
  .work .ct_list li:nth-child(3n) { margin-right: 0; }

  /* 메인 비주얼 */
  .main_visual .mv_slider .item { min-height: 280px; }
  .main_visual .mv_slider .item .txt { margin-top: 40px; }

  /* BUSINESS AREA — 좌우 2단과 항목 2열을 모두 1열로.
     원본은 li 를 2n / 2n+1 로 나눠 폭을 고정해 두었으므로 둘 다 덮어써야 한다. */
  .bac_row .bac_box { float: none; width: 100%; }
  .bac_row .bac_box + .bac_box { margin-top: 40px; }
  .bac_row .bac_box p { height: auto; }
  .bac_row .bac_box .dash_list { height: auto; }
  .bac_row .bac_box .dash_list li,
  .bac_row .bac_box .dash_list li:nth-child(2n),
  .bac_row .bac_box .dash_list li:nth-child(2n + 1) { float: none; width: 100%; }

  /* OVERVIEW 연혁 — 좌측 이미지(460px 고정)를 유동폭으로 */
  .ov_item .ov_htr .htr_cnt .htr_item .thum { float: none; width: 100%; height: 220px; }
  .ov_item .ov_htr .htr_tap ul li + li { margin-left: 24px; }
  .ov_item .ov_htr .htr_tap ul li.active a { font-size: 26px; line-height: 36px; }
  .ov_item .ov_htr .htr_tap ul li a { font-size: 15px; padding-top: 14px; }
  .ov_item .ov_htr .htr_tap { height: auto; }

  /* 푸터 */
  #footer .ft_top { padding: 28px 16px 36px; }
  #footer .ft_top .ft_cs .tell { font-size: 26px !important; }
  #footer .ft_bottom .container { padding-top: 20px; padding-bottom: 20px; }
  #footer .ft_info { float: none; text-align: left; margin-top: 16px; }
  #footer .ft_logo { float: none; }
}