@charset "utf-8";
/* =============================================================================
   SPAK 영문 사이트 반응형 (2026-08-19)

   eng/css/style.css 는 .wrapper / .subpage / .main-visual 이 전부 1200px 고정폭이다.
   그 파일을 직접 고치면 데스크톱 레이아웃이 틀어질 위험이 커서, 이 파일을 뒤에
   로드해 "좁은 화면에서만" 덮어쓰는 방식으로 만들었다.
   1201px 이상에서는 이 파일의 규칙이 하나도 적용되지 않는다 = 데스크톱 무손상.

   모바일 내비는 새로 만든 게 아니라 테마에 원래 있던 .gnb_mobile 을 살린 것이다.
   CSS(style.css 2160~2270)와 JS(js/common.js 의 .nav_btn / .nav_btn_off 핸들러)는
   이미 있었고 마크업만 빠져 있었다. 마크업은 include/header.html 에 넣었다.
   ============================================================================= */


/* ── 1200px 이하 : 고정폭 해제 ───────────────────────────────────────────── */
@media screen and (max-width: 1200px) {

  .wrapper,
  .subpage {
    width: auto;
    max-width: 1200px;
    padding: 0 15px;
    box-sizing: border-box;
  }

  /* 슬라이더와 서브비주얼은 좌우 여백 없이 꽉 차는 게 자연스럽다 */
  .main-visual {
    width: 100%;
    max-width: 100%;
  }
  .main-visual img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* bxSlider 가 인라인으로 넣는 폭이 화면을 넘지 않도록 */
  .bx-wrapper,
  .bx-viewport {
    max-width: 100%;
  }

  .contents img,
  .sub-contents img {
    max-width: 100%;
    height: auto;
  }
}


/* ── 1024px 이하 : 데스크톱 GNB → 햄버거 내비 ───────────────────────────── */
@media screen and (max-width: 1024px) {

  /* 가로로 늘어선 6개 메뉴는 이 폭부터 줄바꿈이 생겨 보기 나쁘다 */
  .gnb_wrap .gnb_box_wrap { display: none; }

  header .wrapper {
    position: relative;
    text-align: center;
  }

  .logo_box {
    float: none;
    display: inline-block;
    padding: 16px 0;
  }
  .logo_box img {
    max-height: 44px;
    width: auto;
  }

  /* 햄버거 버튼 (style.css 에서 display:none 으로 숨겨져 있던 것) */
  .nav_btn_box {
    display: block;
    float: none;
    position: absolute;
    left: 15px;
    top: 50%;
    width: 30px;
    margin: -15px 0 0;
    z-index: 20;
  }
  .nav_btn_box a { display: block; }
  .nav_btn_box img { width: 100%; }

  /* 슬라이드인 패널. style.css 는 position:absolute + width:290px 인데,
     absolute 는 .home 높이를 따라가 패널이 페이지 끝까지 늘어난다.
     모바일 한국어 사이트와 같은 fixed 방식으로 바꾼다. */
  .gnb_mobile {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    max-width: 85%;
    height: 100%;
    overflow-y: auto;
    z-index: 99999;
    background: #fff;
    -webkit-overflow-scrolling: touch;
  }
  .nav_bg { z-index: 9998; }

  .gnb_mobile .m_top {
    position: relative;
    border-bottom: 1px solid #dadada;
  }
  .gnb_mobile .m_top .logo_inner img { width: 150px; }

  /* 영문 메뉴는 6개 모두 하위 메뉴가 없다. 그래서 li 클래스가 depth01 이 아니라
     depth01_down 이다 — js/common.js 가 $('.gnb_mobile .depth01').children('a') 에
     클릭 핸들러를 걸고 return false 로 기본 동작을 막기 때문에, depth01 로 두면
     탭해도 페이지가 넘어가지 않는다. depth01_down 에는 핸들러가 없다.
     다만 eng/css/style.css 에는 depth01_down 규칙이 아예 없어서 여기서 다 그린다.
     (모바일 한국어 css 에는 있지만 영문 css 에는 없다) */
  .gnb_mobile .depth .depth01_down > a {
    display: block;
    background: #f8f8f8;
    color: #333;
    font-size: 15px;
    padding: 14px 15px;
    border-bottom: 1px solid #dadada;
  }
  .gnb_mobile .depth .depth01_down:first-child > a {
    border-top: 1px solid #dadada;
  }
  .gnb_mobile .depth .depth01_down > a:hover,
  .gnb_mobile .depth .depth01_down > a:focus {
    background: #eef2f7;
    color: #0860a8;
  }

  /* 상단 배너 / 언어 전환 바 */
  .top-banner {
    height: auto;
    overflow: hidden;
  }
  /* 언어 전환은 우측 정렬. 데스크톱의 float:right 와 같은 자리다. */
  .topmenu ul {
    float: none;
    text-align: right;
  }
  .topmenu ul li {
    float: none;
    display: inline-block;
  }
}


/* ── 900px 이하 : 본문 / 타일 / 회원사 목록 ─────────────────────────────── */
@media screen and (max-width: 900px) {

  .main-contents .main-con-wrap {
    display: block;
    padding: 30px 0 50px;
  }
  .main-contents .main-con-wrap li {
    float: none;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
  }

  .sub-wrapper .sub-title { margin-top: 30px; }
  .sub-wrapper .sub-title .title {
    font-size: 30px;
    letter-spacing: -1px;
  }
  .con-margin-01 { padding-bottom: 60px; }

  /* Member List : 모듈이 td width="25%" 로 4단 그리드를 만든다.
     폰에서는 한 칸이 80px 밖에 안 돼 읽을 수 없으므로 세로로 편다.
     인라인 width 속성을 이기려면 !important 가 필요하다. */
  .memberlist .AWprd_list,
  .memberlist .AWprd_list > tbody,
  .memberlist .AWprd_list > tbody > tr {
    display: block;
    width: 100%;
  }
  .memberlist .AWprd_list > tbody > tr > td {
    display: block;
    width: 100% !important;
    margin-bottom: 12px;
  }
}


/* ── 640px 이하 : 폰 ─────────────────────────────────────────────────────── */
@media screen and (max-width: 640px) {

  /* 200x180 타일 4개를 가로로 두면 잘린다. 한 줄에 하나씩. */
  .main-contents .main-con-wrap li {
    display: block;
    margin: 0 0 10px;
  }
  .main-contents .main-con-wrap li a { width: 100%; }

  /* 슬라이더가 낮아지므로 페이저를 위로 올린다 */
  .on-pager { bottom: 24px; }

  /* Number of Members 표는 7열이다. 여백과 글자를 줄여 320px 에 맞춘다. */
  .table-view-01 th,
  .table-view-01 td {
    padding: 6px 4px;
    font-size: 12px;
  }

  .footer_wrap { font-size: 12px; }
  .footer_wrap .foot-top ul { height: auto; }
  .footer_wrap .foot-top li {
    float: none;
    display: inline-block;
    border-right: 0;
    height: auto;
    margin-top: 0;
  }
  .footer_wrap .foot-bottom { padding: 30px 0; }
  .footer_wrap .foot-bottom .foot-logo-box { float: none; }

  .main-contents .corp-slide { overflow: hidden; }
}


/* =============================================================================
   서브페이지 본문 고정폭 해제 (2026-08-19 보완)

   .wrapper / .subpage 만 유동으로 바꿨더니 본문이 좌우로 잘렸다. 안쪽에 고정폭이
   더 있었기 때문이다. 세 군데 모두 "삽화를 왼쪽 padding 자리에 배경으로 깔고
   텍스트를 오른쪽에 흘리는" 방식이라 좁은 화면에서 그대로 두면 못 쓴다.
     .about1 .conwrap  700px + padding-left 500px = 1200px  (menu1 About us)
     .history .conwrap 600px + padding-left 450px = 1050px  (menu3 History)
     .about8           1000px                                (menu5 Board members)
   ============================================================================= */

@media screen and (max-width: 1200px) {

  .about1 .conwrap,
  .history .conwrap {
    width: auto;
    float: none;
    max-width: 100%;
    box-sizing: border-box;
  }

  .about8 {
    width: auto;
    max-width: 100%;
  }
  /* 임원 카드 안의 이름/직위/회사 줄도 340px 로 박혀 있다 */
  .about8 .table-view-01 td p { width: auto; }
}

@media screen and (max-width: 900px) {

  /* 삽화를 왼쪽이 아니라 본문 위로 올린다.
     about01.png 540x432, history.png 351x366 → 폭을 정하고 높이만큼 위를 비운다. */
  .about1 .conwrap {
    padding: 230px 0 40px;
    background-position: center top;
    background-size: 260px auto;
  }
  .history .conwrap {
    padding: 270px 0 40px;
    background-position: center top;
    background-size: 240px auto;
  }

  /* 임원 카드 2단 → 1단 */
  .about8 .table-view-01 tr {
    float: none;
    width: 100%;
    margin: 0 0 10px;
  }
}

@media screen and (max-width: 640px) {

  /* 푸터 주소는   로 이어 붙여 놓아서 끊길 자리가 없다.
     inline-block 인 채로 두면 오른쪽이 잘린다. */
  .footer_wrap .foot-bottom .wrapper { display: block; }
  .footer_wrap .foot-bottom .conwrap {
    display: block;
    width: 100%;
  }
  .footer_wrap .foot-bottom .address {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* =============================================================================
   폰 폭 세부 보정 (2026-08-19)
   ============================================================================= */

@media screen and (max-width: 640px) {

  /* menu6 : Number of Members 는 7열이라 360px 에 간신히 들어간다.
     글자를 더 줄이고, 그래도 넘치면 표만 가로로 밀어 볼 수 있게 한다.
     (다 들어가면 스크롤바는 나타나지 않는다) */
  .memberlist .conwrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .memberlist .conwrap > .table-view-01 {
    min-width: 340px;
  }
  .memberlist .conwrap > .table-view-01 th,
  .memberlist .conwrap > .table-view-01 td {
    padding: 5px 3px;
    font-size: 11px;
    word-break: keep-all;
  }

  /* menu5 : 임원 사진이 칸의 절반을 넘게 먹어 직위·회사·이름이 한 글자씩
     끊겨 내려온다. 사진을 줄여 글자 칸을 넓힌다. */
  .about8 .table-view-01 td img {
    max-width: 110px;
    height: auto;
  }
  .about8 .table-view-01 td { padding: 10px 8px; }
  .about8 .table-view-01 td p { line-height: 1.6; }
}