@charset "utf-8";

/* ============================================================================
   반응형 오버라이드
   ----------------------------------------------------------------------------
   [로드 위치] layout.cshtml에서 @RenderSection("sectionHead") '다음'에 로드된다.
              즉 common.css / main.css / sub.css / table.css 보다 항상 뒤다.
              따라서 명시도가 같으면 이 파일이 이긴다. !important를 쓰지 말 것.

   [원칙 1] 모든 규칙은 미디어쿼리 안에 둔다.
            1100px 이상 데스크톱은 기존 화면을 그대로 유지하기 위해서다.
            미디어쿼리 밖에 규칙을 쓰면 PC 화면이 깨진다.

   [원칙 2] 화면별 구분이 필요하면 body의 page-* 클래스를 쓴다.
            (FilterConfig에서 컨트롤러명으로 내려준다: page-home, page-about ...)

   [원칙 3] 이 파일을 고칠 때는 layout.cshtml의 ?ver 값을 반드시 올린다.
            안 그러면 재방문자는 캐시된 예전 파일을 쓴다.

   [브레이크포인트]
     1099px 이하 : GNB가 가로로 안 들어가는 폭. 햄버거 메뉴로 전환한다.
      767px 이하 : 휴대폰. 여백과 글자를 더 줄인다.
   ============================================================================ */


/* ==========================================================================
   원칙 1의 유일한 예외 : 모바일 전용으로 새로 추가한 요소의 기본 상태
   --------------------------------------------------------------------------
   .btnNav(햄버거)와 .navToggle(+/- 버튼)은 기존 디자인에 없던 요소다.
   기본을 숨김으로 두고 미디어쿼리 안에서만 보이게 한다.
   기존 화면에 없던 요소이므로 데스크톱 레이아웃에 영향이 없다.
   ========================================================================== */
.btnNav,
.navToggle,
.btnTxt {
    display: none;
    background: none;
    font: inherit;
    color: inherit;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   1100px 이상 - 데스크톱에서 상단 배너 가로 위치
   --------------------------------------------------------------------------
   예전에는 layout.cshtml의 setDivPos()가 매번 JS로 좌표를 계산해
   인라인 style로 넣었다(left = (화면폭 - 1530) / 2).

   그런데 그 스크립트가 실행되기 전에 브라우저가 먼저 그려 버리면 배너가
   left:0에 잠깐 나타났다가 제자리로 튀었다. 페이지 전환 효과를 넣고 나서
   그 튐이 눈에 띄는 깜빡임으로 드러나 CSS로 옮긴 것이다.

   1530px 배너를 화면 가운데 두는 것이 목적이므로 계산이 필요 없다.
   기존 JS가 화면폭을 1100 미만에서 1100으로 보정하던 부분은
   그 구간이 이미 아래 모바일 규칙의 영역이라 필요 없어졌다.
   ========================================================================== */
@media (min-width: 1100px) {

    .mainBanner {
        left: 50%;
        margin-left: -765px;   /* 1530 / 2 */
    }
}


/* ==========================================================================
   1099px 이하 - 태블릿 / 휴대폰 공통
   ========================================================================== */
@media (max-width: 1099px) {

    /* ---------- 기본 골격 ----------------------------------------------- */

    /* 아직 반응형 처리가 끝나지 않은 화면이 가로 스크롤을 만들지 않도록 막는다.
       단계별 작업이 끝나면 이 안전장치 없이도 정상이어야 한다. */
    html { -webkit-text-size-adjust: 100%; }
    html, body { overflow-x: hidden; }

    /* body 배경 이미지를 걷어낸다.
       bg_subBody.jpg(1x426) / bg_mainBody.jpg(1x570)는 세로로 늘어선 색 띠를
       가로 반복하는 이미지인데, 그 안에 오렌지 구분선(#d96415)이 y=108px 자리에
       '그려져' 있다. PC는 헤더가 113px이라 선이 메뉴 밑에 맞지만,
       모바일은 헤더가 짧아져 선만 제자리에 남아 브레드크럼/열린 메뉴와 겹친다.
       이미지라서 좌표를 옮길 수 없으므로 없애고 아래에서 border로 다시 그린다. */
    body { background-image: none; background-color: #fff; }

    /* 폭 1100px 고정을 풀어 화면폭을 따라가게 한다. */
    #wrapper {
        width: auto;
        max-width: 1100px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* 이미지가 부모 폭을 넘지 않게 한다. 로고/버튼/본문 이미지 전부 해당. */
    img { max-width: 100%; height: auto; }


    /* ---------- 헤더 ---------------------------------------------------- */

    #header {
        width: auto;
        height: auto;
        padding: 14px 0;
        /* 배경 이미지에 박혀 있던 오렌지 구분선을 헤더 실제 높이에 맞춰 다시 그린다.
           메뉴를 펼치면 선도 함께 내려와 메뉴 전체를 감싼다. */
        border-bottom: 3px solid #d96415;
    }

    .logo { position: static; }
    .logo img { width: 91px; }

    /* 햄버거 버튼. PC에서는 header.cshtml의 마크업이 숨겨져 있다. */
    .btnNav {
        display: block;
        position: absolute;
        right: 0;
        top: 16px;
        width: 42px;
        height: 36px;
        padding: 6px 8px;
        background: none;
        box-sizing: border-box;
        cursor: pointer;
    }
    .btnNav span {
        display: block;
        width: 26px;
        height: 2px;
        margin: 0 auto 6px;
        background: #4b4b4b;
    }
    .btnNav span:last-child { margin-bottom: 0; }
    #header.navOpen .btnNav span { background: #ed6206; }

    /* 메뉴는 기본 접힘. 햄버거를 누르면 #header에 navOpen이 붙는다. */
    .gnb, .infoMu { display: none; }
    #header.navOpen .gnb,
    #header.navOpen .infoMu { display: block; }

    /* GNB : 가로 배치 -> 세로 목록 */
    .gnb {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        margin-top: 12px;
        border-top: 1px solid #e0e0e0;
    }
    .gnb li.mainMenu {
        float: none;
        position: relative;
        margin-right: 0;
        padding-bottom: 0;
        border-bottom: 1px solid #e0e0e0;
    }
    .gnb li.mainMenu a.mainMenu {
        display: block;
        padding: 14px 52px 14px 4px;   /* 오른쪽은 +/- 버튼 자리 */
    }

    /* 하위 메뉴 펼침 버튼. menuinit.js가 하위 메뉴 있는 항목에만 붙인다. */
    .navToggle {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 50px;
        background: none;
        cursor: pointer;
    }
    .navToggle:before,
    .navToggle:after {
        content: "";
        position: absolute;
        background: #9a9a9a;
    }
    .navToggle:before { left: 17px; top: 24px; width: 16px; height: 2px; }   /* 가로줄 */
    .navToggle:after  { left: 24px; top: 17px; width: 2px;  height: 16px; }  /* 세로줄 */
    .gnb li.mainMenu.open > .navToggle:after { display: none; }              /* 펼치면 - 모양 */

    /* 서브메뉴 : 부모에 open이 붙었을 때만 보인다. */
    .gnb li.mainMenu > ul.subMu {
        display: none;
        position: static;
        width: auto;
        height: auto;
        padding: 2px 0 10px;
        background: #fafafa;
    }
    .gnb li.mainMenu.open > ul.subMu { display: block; }

    .subMu li.subMenu {
        float: none;
        margin-right: 0;
        padding-top: 0;
    }
    .subMu li.subMenu a.subMenu {
        display: block;
        padding: 10px 4px 10px 20px;
    }

    /* PC에서 서브메뉴를 가로로 밀어내던 들여쓰기를 없앤다. */
    .about_subMu,
    .job_subMu,
    .candidate_subMu,
    .client_subMu,
    .support_subMu,
    .client_eng_subMu,
    .location_subMu { padding-left: 0; }

    /* 서브메뉴 뒤에 깔리던 반투명 흰 띠. 세로 메뉴에서는 필요 없다.
       min-width:1100px 때문에 가로 스크롤도 만든다. */
    .bg_subMuBar { display: none; }

    /* 우측 상단 Home/Login/Sitemap/English. 메뉴 패널 안으로 내린다. */
    .infoMu {
        position: static;
        overflow: hidden;
        padding: 12px 4px 4px;
    }
    .infoMu li { padding: 0 16px 0 0; }

    /* 터치 기기에서 :active로 굵기가 바뀌면 줄이 흔들린다. */
    .gnb a:active, .subMu a:active, .infoMu a:active { font-weight: normal; }


    /* ---------- 푸터 ---------------------------------------------------- */

    #footer {
        width: auto;
        height: auto;
        padding: 20px 0 28px;
    }
    .logo_footer { padding-top: 0; margin-bottom: 16px; }

    .footerMu {
        position: static;
        overflow: hidden;
        margin-bottom: 14px;
    }
    .footerMu li { margin-right: 20px; font-size: 13px; }

    .copyright {
        position: static;
        margin-bottom: 16px;
        line-height: 19px;
    }

    .link_sns { position: static; overflow: hidden; }

    /* 푸터 메뉴 뒤 회색 띠. min-width:1100px라 가로 스크롤을 만든다. */
    #bg_footer { display: none; }


    /* ---------- 서브 페이지 공통 골격 ------------------------------------
       여기는 '깨지지 않게' 하는 최소 골격만 잡는다.
       화면별 내용(About / 채용정보 / 게시판 / 폼)은 각 단계에서 다듬는다.
       메인 페이지(page-home)는 2단계에서 별도로 처리하므로 건드리지 않는다.
       -------------------------------------------------------------------- */

    /* ---------- 서브페이지 상단 비주얼 배너 (8단계) ----------
       1530x261 이미지다. 왼쪽은 사진, 오른쪽에 문구가 박혀 있고
       똑같은 문구가 h2/h3/p로 마크업에 살아 있다(text-indent로 밀어 둠).

       사진 부분만 위쪽 띠로 보여주고, 문구는 그 아래에 실제 글자로 쓴다.
       배경 높이를 고정하고 그만큼 위쪽 여백을 주는 방식이라
       글자가 박힌 오른쪽 영역은 화면 밖으로 잘려 나가 겹치지 않는다.

       위치는 menuinit.js의 placeMainBanner()가 헤더 바로 아래로 옮겨 준다.
       메인 페이지의 .visual_main(슬라이드쇼)은 여기 해당하지 않는다. */
    .visual_about,
    .visual_job,
    .visual_candidate,
    .visual_client,
    .visual_support,
    .visual_my,
    .visual_about_eng,
    .visual_client_eng {
        display: block;
        position: static;
        width: auto;
        height: auto;
        z-index: auto;
        text-indent: 0;
        box-sizing: border-box;
        margin: 0 -16px 20px;                /* #wrapper 좌우 여백 상쇄 */
        padding: 201px 16px 18px;            /* 위 여백 = 사진 띠 높이 + 여유 */
        background-color: #eef2f6;
        background-position: left top;
        background-size: auto 185px;         /* 사진 띠 높이 */
    }

    .mainBanner h2 {
        font-size: 21px;
        font-weight: 700;
        line-height: 1.25;
        color: #1b3d63;
    }
    .mainBanner h3 {
        font-size: 14px;
        font-weight: 400;
        margin-top: 3px;
        color: #6d7b8a;
    }
    .mainBanner p {
        font-size: 12px;
        line-height: 1.5;
        margin: 8px 0 0;
        color: #8a97a3;
    }

    body:not(.page-home) #contents {
        width: auto;
        margin-top: 4px;
        border-left: 0;
    }

    /* 좌측 240px 메뉴는 상단 햄버거 메뉴와 내용이 같다. 휴대폰에서는 숨긴다. */
    .leftMu { display: none; }

    /* 본문 : 좌측 메뉴 자리를 비워두던 여백을 회수한다. */
    .cont {
        width: auto;
        margin-left: 0;
        padding-left: 0;
        padding-top: 10px;
        border-left: 0;
        min-height: 0;
    }

    /* 위치 표시(홈 > About Us > 회사소개). 절대배치를 풀어 본문 위로 올린다. */
    .localMu {
        position: static;
        overflow: hidden;
        padding-bottom: 8px;
        border-bottom: 1px solid #e0e0e0;
    }
    .localMu li { padding: 4px 10px 4px 24px; font-size: 12px; }
    .localMu li.home { padding-left: 0; }
    .localMu li.home img { width: 12px; }

    .pageTlt { font-size: 26px; margin-bottom: 24px; }


    /* ======================================================================
       메인 페이지 (2단계)
       ====================================================================== */

    /* ---------- 상단 비주얼 슬라이드쇼 ----------
       원본은 1530x450 고정에, body 기준 절대배치를 JS(setDivPos)가 잡아준다.
       모바일에서는 menuinit.js의 placeMainBanner()가 헤더 바로 밑으로 옮겨 주므로
       여기서는 흐름 배치로 되돌리고 화면폭을 꽉 채우게만 하면 된다. */
    .page-home .visual_main {
        position: static;
        width: auto;
        height: auto;
        z-index: auto;
        margin: 0 -16px 22px;     /* #wrapper의 좌우 여백을 상쇄해 화면 끝까지 채운다 */
    }

    /* 슬라이드는 서로 겹쳐 놓고 페이드로 교차시키는 구조다(jqbanner_main.js).
       모두 absolute라서 컨테이너 높이를 직접 정해 줘야 한다. */
    .page-home #jqb_main_object {
        width: 100%;
        height: 260px;
    }
    .page-home #jqb_main_object .jqb_main_slide {
        width: 100%;
        height: 100%;
    }
    /* 이미지 왼쪽에 글자가 박혀 있으므로 왼쪽을 기준으로 잘라 글자를 살린다. */
    .page-home #jqb_main_object .jqb_main_slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
    }

    /* ---------- 3단 구성 -> 1단 ---------- */
    .page-home #contents {
        width: auto;
        margin-top: 0;
        min-height: 0;
    }
    .page-home .left,
    .page-home .middle,
    .page-home .right {
        float: none;
        width: auto;
        margin-right: 0;
        margin-bottom: 34px;
    }
    .page-home .right { margin-bottom: 10px; }

    .page-home #contents h3 { font-size: 17px; }

    /* ---------- 공지사항 / 채용정보 탭 ----------
       탭 이미지가 한 줄에 다 안 들어가면 두 줄로 접힌다.
       그러면 top:33px에 있던 more 버튼이 두 번째 줄과 겹치므로 제목 줄로 올린다. */
    .page-home .btn_notice_more,
    .page-home .btn_open_more { top: 0; }

    .page-home .Tap_Off,
    .page-home .Tap_On { margin: 0 2px 4px 0; }

    .page-home .notice_detail,
    .page-home .open_detail {
        width: auto;
        height: auto;
    }

    /* ---------- 채용정보 목록 ----------
       원본은 제목(390px) + 직급(80px)을 한 줄에 띄우는 구조다.
       모바일 폭에서는 두 칸이 같이 못 들어가므로 직급을 아랫줄로 내린다. */
    .page-home .job_info li.job_tlt {
        float: none;
        width: auto;
        margin-right: 0;
        margin-bottom: 2px;
    }
    .page-home .job_info li.date {
        float: none;
        width: auto;
        margin-bottom: 13px;
        font-size: 12px;
        color: #999;
    }

    /* ---------- 퀵링크 ----------
       154x56 카드 이미지다. 글자까지 이미지에 들어 있어 늘리면 흐려지므로
       비율(56/154 = 36.4%)을 유지한 채 한 줄에 두 개씩 배치한다. */
    .page-home .quick { overflow: hidden; }
    .page-home .quick li {
        float: left;
        width: 50%;
        box-sizing: border-box;
        padding: 0 4px 6px 0;
    }
    .page-home .quick li a {
        width: auto;
        height: 0;
        padding-top: 36.4%;
        margin: 0;
        background-size: contain;
        background-position: left top;
    }

    /* ---------- 컨설턴트 슬라이드 ---------- */
    .page-home #jqb_consultant_object {
        width: 100%;
        height: 112px;
    }
    .page-home #jqb_consultant_object .jqb_consultant_slide {
        width: 100%;
        height: 112px;
    }
    .page-home .right .profile {
        width: auto;
        height: auto;
    }
    .page-home .right .catchphrase { width: auto; }

    /* 뉴스 배너는 247x101 원본 크기 그대로 둔다. 늘리면 글자가 흐려진다. */
    .page-home #jqb_banner_object { margin: 0 auto; }

    /* ---------- 팝업 ----------
       setPopup()이 인라인으로 left:0을 박아 넣으므로 left는 건드리지 않고
       right/margin으로 폭을 맞춘다.
       배경 이미지 3장(상단 NOTICE 420x65 / 중간 420x3 / 하단 420x6)은
       디자인이 들어 있으므로 없애지 않고 폭에 맞춰 비율대로 줄인다. */
    .page-home #popup {
        width: auto;
        right: 12px;
        margin-left: 12px;
    }
    .page-home #popup .popup_top {
        width: auto;
        height: 0;
        padding-top: 15.48%;          /* 65 / 420 */
        background-size: 100% 100%;
    }
    .page-home #popup .popup_contents {
        width: auto;
        box-sizing: border-box;
        padding: 18px 16px 0;
        background-size: 100% auto;   /* 좌우 테두리가 그려진 띠. 세로 반복은 유지 */
    }
    .page-home #popup .popup_bottom {
        width: auto;
        background-size: 100% 100%;
    }
    .page-home #popup .popup_cont { width: auto; }
    .page-home #popup .btn {
        width: auto;
        height: auto;
        overflow: hidden;
    }
    .page-home #popup .btn_group { position: static; }
    .page-home #popup .btn_more { margin-right: 16px; }
    .page-home #popup .txt_today { margin-right: 12px; }


    /* ======================================================================
       About Us 9개 화면 (3단계)
       ----------------------------------------------------------------------
       이 화면들의 본문 상당수는 790px 배경 이미지에 글자가 박혀 있고,
       같은 내용의 진짜 텍스트가 마크업에 그대로 살아 있다.
       (text-indent:-9999px로 화면 밖에 밀어 놓은 구조)

       text-indent는 자식에게 상속되므로, 컨테이너에서 background를 없애고
       text-indent:0으로 되돌리면 안에 있던 글자가 그대로 살아난다.
       모바일에서는 이 방식으로 이미지 대신 실제 텍스트를 보여준다.
       ====================================================================== */

    /* ---------- 페이지 머리글 (회사소개 / CEO 인사말 / 컨설턴트 채용) ----------
       원본은 사진 위에 문구를 얹은 790x206 이미지다. */
    .subTlt_about_sub01,
    .subTlt_about_sub02,
    .subTlt_about_sub07,
    .subTlt_about_sub01_eng,      /* 영문 화면도 같은 구조다 (7단계) */
    .subTlt_about_sub02_eng {
        width: auto;
        height: auto;
        background: #f7f7f7;
        text-indent: 0;
        padding: 15px 16px;
        margin-bottom: 22px;
        border-left: 4px solid #ed6206;
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
        color: #3c3c3c;
    }

    /* ---------- CEO 인사말 : 대표 사진 ---------- */
    .cont_about_sub02 .ceo {
        position: static;
        text-align: center;
        margin-bottom: 20px;
    }
    .cont_about_sub02 .ceo img { max-width: 170px; }

    /* ---------- Mission & Vision ---------- */
    .tlt_mission,
    .tlt_vision {
        width: auto;
        height: auto;
        background: none;
        text-indent: 0;
        font-size: 20px;
        font-weight: 600;
        color: #ed6206;
        margin-bottom: 14px;
    }

    .mission {
        width: auto;
        height: auto;
        background: none;
        text-indent: 0;
        margin-bottom: 32px;
    }
    .mission ol > li {
        padding: 14px 16px;
        margin-bottom: 8px;
        background: #f7f7f7;
        border-left: 4px solid #f17d30;
    }
    /* 원본 이미지의 카드 4색을 그대로 따라간다. */
    .mission > li:nth-child(1) > ol > li:nth-child(1) { border-left-color: #f17d30; }
    .mission > li:nth-child(1) > ol > li:nth-child(2) { border-left-color: #a8c453; }
    .mission > li:nth-child(2) > ol > li:nth-child(1) { border-left-color: #6fa8d0; }
    .mission > li:nth-child(2) > ol > li:nth-child(2) { border-left-color: #83c557; }

    .mission dt,
    .vision dt {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        margin-bottom: 6px;
    }
    .mission dd,
    .vision dd { line-height: 22px; }

    .vision {
        width: auto;
        height: auto;
        text-indent: 0;
        background: #f7f7f7;
        padding: 14px 16px;
        border-left: 4px solid #ed6206;
    }

    /* ---------- 서비스 강점 ----------
       .strength(요약 4줄)는 바로 아래 .strength_list가 같은 제목을 설명과 함께
       다시 보여준다. 좁은 화면에서 두 번 읽히므로 요약 쪽을 감춘다. */
    .strength,
    .strength_eng { display: none; }

    .strength_list li { padding-left: 48px; line-height: 22px; }
    .strength_list h5 { font-size: 16px; }

    /* ---------- 서비스 분야 ----------
       원본은 가운데 도넛 그래프를 두고 네 귀퉁이에 설명을 배치한 790x605 이미지다.
       제목 색은 도넛 조각 색을 따르되, 글자로 쓸 수 있게 조금 어둡게 잡았다. */
    .service_field,
    .service_field_eng {              /* 영문 화면도 같은 구조다 (7단계) */
        width: auto;
        height: auto;
        background: none;
        text-indent: 0;
        margin-bottom: 30px;
    }
    .service_field > li,
    .service_field_eng > li {
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #e4e4e4;
    }
    .service_field > li:last-child,
    .service_field_eng > li:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .service_field h5,
    .service_field_eng h5 { font-size: 17px; margin-bottom: 8px; }

    .service_field > li:nth-child(1) h5,
    .service_field_eng > li:nth-child(1) h5 { color: #ea7526; }   /* 헤드헌팅 */
    .service_field > li:nth-child(2) h5,
    .service_field_eng > li:nth-child(2) h5 { color: #a39b0b; }   /* 평판조회 */
    .service_field > li:nth-child(3) h5,
    .service_field_eng > li:nth-child(3) h5 { color: #6aa844; }   /* 커리어컨설팅 */
    .service_field > li:nth-child(4) h5,
    .service_field_eng > li:nth-child(4) h5 { color: #3d8ea6; }   /* 채용대행 */

    .service_field p,
    .service_field_eng p { line-height: 22px; margin: 0; }

    /* ---------- 컨설턴트 소개 ----------
       원본은 사진을 왼쪽에 띄우고 프로필을 284px 밀어 놓는 구조다.
       좁은 화면에서는 사진을 위로 올리고 항목명/내용 두 칸만 유지한다. */
    .cont_about_sub06 .consultant { width: auto; }
    .cont_about_sub06 .consultant_photo {
        float: none;
        margin-bottom: 14px;
    }
    .cont_about_sub06 .consultant_photo img { max-width: 170px; }
    .cont_about_sub06 .profile {
        width: auto;
        min-height: 0;
        margin-left: 0;
    }
    .cont_about_sub06 .profile h6 { width: 62px; }
    .cont_about_sub06 .profile .name,
    .cont_about_sub06 .profile .catchphrase,
    .cont_about_sub06 .profile .career,
    .cont_about_sub06 .profile .education,
    .cont_about_sub06 .profile .category,
    .cont_about_sub06 .profile .etc,
    .cont_about_sub06 .profile .email { margin-left: 68px; }

    /* ---------- 컨설턴트 채용 ----------
       원본은 제목을 162px 이미지로 두고 내용을 left:190px에 절대배치했다. */
    .recruit_01, .recruit_02, .recruit_03, .recruit_04, .recruit_05 {
        width: auto;
        position: static;
        margin-bottom: 22px;
    }
    .recruit_01 h5, .recruit_02 h5, .recruit_03 h5,
    .recruit_04 h5, .recruit_05 h5 {
        width: auto;
        height: auto;
        background: none;
        text-indent: 0;
        font-size: 17px;
        color: #ed6206;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e4e4e4;
    }
    .recruit_01 ul, .recruit_02 ul, .recruit_03 ul,
    .recruit_04 ul, .recruit_05 ul {
        width: auto;
        position: static;
        top: auto;
        left: auto;
    }

    /* ---------- 조직도 ----------
       원본은 790x505 조직도 이미지 하나다. 실제 구조는 중첩 목록으로 들어 있어
       그대로 계층 목록으로 펼친다. 좁은 화면에서는 도표보다 목록이 읽기 쉽다. */
    .cont_about_sub08 {
        width: auto;
        height: auto;
        background: none;
        text-indent: 0;
    }
    .cont_about_sub08 > ol > li { margin-bottom: 10px; }
    .cont_about_sub08 > ol > li:nth-child(1),
    .cont_about_sub08 > ol > li:nth-child(2) {
        padding: 12px 14px;
        background: #c9a86a;
        color: #fff;
        font-weight: 600;
        text-align: center;
    }
    .cont_about_sub08 ul > li {
        padding: 11px 14px;
        margin-bottom: 6px;
        background: #f2f2f2;
        font-weight: 600;
        color: #444;
    }
    .cont_about_sub08 ul > li ul { margin-top: 9px; }
    .cont_about_sub08 ul > li ul > li {
        padding: 6px 0 6px 12px;
        margin-bottom: 0;
        background: none;
        border-top: 1px solid #e2e2e2;
        font-weight: normal;
        font-size: 13px;
        color: #666;
    }

    /* ---------- 오시는 길 ---------- */
    .cont_about_sub09 dd { margin-left: 78px; }

    /* 영문판은 라벨이 길다("Representative e-mail" 등).
       원본은 dd를 margin-top:-25px로 끌어올려 라벨 옆에 붙이는데,
       152px 들여쓰기로는 좁은 화면에서 내용이 들어갈 자리가 없다.
       라벨과 내용을 위아래로 나눈다. */
    .cont_about_sub09_eng dt { margin-bottom: 3px; }
    .cont_about_sub09_eng dd {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .cont_about_sub09 iframe,
    .cont_about_sub09_eng iframe {
        width: 100%;
        height: 260px;
    }


    /* ======================================================================
       채용정보 (4단계) - Job/Index, Job/Detail, Job/Print
       ====================================================================== */

    /* ---------- 검색 영역 ----------
       원본은 790x50 배경 이미지 위에 셀렉트 4개 + 입력칸 + 버튼을 우측 정렬한
       한 줄짜리 띠다. 좁은 화면에서는 한 줄에 못 들어가므로 접어서 배치한다. */
    .default_sub .search {
        width: auto;
        height: auto;
        padding: 12px 10px;
        margin-bottom: 16px;
        background: #f4f4f4;          /* 790px 고정 배경 이미지 대신 */
        border: 1px solid #e4e4e4;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    /* flex-grow를 준 이유:
       채용정보는 셀렉트가 4개(두 개씩 두 줄), 게시판은 1개다.
       한 줄에 혼자 남는 셀렉트도 남는 폭을 채우도록 늘어나게 한다. */
    .default_sub .search select {
        flex: 1 1 44%;
        width: auto;
        height: 34px;
        margin: 0 3% 7px 0;
        box-sizing: border-box;
    }
    .default_sub .search select:nth-of-type(2n) { margin-right: 0; }
    .default_sub .search input {
        width: auto;
        height: 32px;
        flex: 1 1 70%;                /* 셀렉트 다음 줄로 넘어가게 한다 */
        margin-right: 8px;
        box-sizing: border-box;
        padding-left: 6px;
    }

    /* ---------- 채용정보 목록 ----------
       5칸(Position/Company/Level/State/Date) 표를 좁은 화면에서 그대로 두면
       글자가 뭉개지므로, 한 건을 한 덩어리로 쌓아 카드처럼 보여준다. */
    .page-job table.board,
    .page-support table.board { display: block; margin-bottom: 26px; }

    .page-job table.board thead,
    .page-support table.board thead { display: none; }

    .page-job table.board tbody,
    .page-support table.board tbody { display: block; }

    .page-job table.board tbody tr,
    .page-support table.board tbody tr {
        display: block;
        padding: 13px 2px;
        border-bottom: 1px solid #e3e3e3;
    }
    .page-job table.board tbody td,
    .page-support table.board tbody td {
        display: block;
        height: auto;
        padding: 0;
        text-align: left;
        border-bottom: 0;
        /* 원본의 td.fixLength는 한 줄로 자르고 말줄임표를 붙인다.
           카드에서는 제목이 다 보여야 하므로 푼다. */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .page-job table.board tbody td.item {          /* Position (제목) */
        font-size: 15px;
        font-weight: 600;
        line-height: 21px;
        margin-bottom: 6px;
    }
    .page-job table.board tbody td:nth-of-type(2), /* Company */
    .page-job table.board tbody td:nth-of-type(3) {/* Level */
        display: inline-block;
        font-size: 13px;
        color: #8c8c8c;
    }
    .page-job table.board tbody td:nth-of-type(3) { margin-left: 10px; }

    .page-job table.board tbody td.progress,       /* State */
    .page-job table.board tbody td.end {
        display: inline-block;
        margin-top: 7px;
        padding: 2px 8px;
        font-size: 12px;
        border: 1px solid currentColor;   /* .progress 주황 / .end 회색을 그대로 쓴다 */
    }
    .page-job table.board tbody td.date {
        display: inline-block;
        margin: 7px 0 0 8px;
        font-size: 12px;
        color: #9e9e9e;
    }


    /* ======================================================================
       게시판 (5단계) - 공지사항 / 컨설턴트 칼럼 / 언론보도 / 약관
       ====================================================================== */

    /* ---------- 목록 ----------
       4칸(번호/제목/작성자/등록일) 구조다. 카드로 쌓는 뼈대는 채용정보와
       공유하고(위쪽), 여기서는 칸별 역할만 지정한다. */

    /* 번호는 좁은 화면에서 자리만 차지한다. */
    .page-support table.board tbody td.number { display: none; }

    /* 제목. NEW 아이콘(.new_item)은 그대로 살린다. */
    .page-support table.board tbody td:nth-of-type(2) {
        font-size: 15px;
        font-weight: 600;
        line-height: 21px;
        margin-bottom: 6px;
    }

    /* 작성자 · 등록일을 한 줄에 나란히 둔다. */
    .page-support table.board tbody td:nth-of-type(3),
    .page-support table.board tbody td.date {
        display: inline-block;
        font-size: 12px;
        color: #9e9e9e;
    }
    .page-support table.board tbody td.date { margin-left: 10px; }

    /* ---------- 게시글 본문 ----------
       내용은 관리자가 입력한 HTML이 그대로 들어온다.
       폭이 큰 표가 들어와도 화면을 밀어내지 않도록 이 칸 안에서 스크롤시킨다. */
    table.infoboard_view th {
        height: auto;
        padding: 10px 8px;
        line-height: 21px;
    }
    table.infoboard_view tbody .story {
        padding: 16px 8px;
        overflow-x: auto;
        word-wrap: break-word;
    }
    table.infoboard_view tbody td.write_info {
        height: auto;
        padding: 8px;
        font-size: 12px;
    }

    /* ---------- 약관 / 개인정보 취급방침 ----------
       746~780px 고정 폭 상자들이다. 점선 테두리는 그대로 두고 폭만 푼다.
       (.privacy_memberbox / .agree_memberbox는 회원가입 화면에서도 쓴다) */
    .privacy_infobox,
    .privacy_memberbox,
    .memberbox,
    .agree_memberbox {
        width: auto;
        padding: 14px;
        box-sizing: border-box;
    }
    .agree_memberbox {
        height: auto;
        padding: 8px 10px;
    }
    /* 스크롤 상자는 유지하되 휴대폰 화면에 맞게 낮춘다. */
    .privacy_memberbox { height: 320px; }

    .privacy_infobox ol,
    .privacy_memberbox ol,
    .memberbox ol { padding-left: 22px; }


    /* ======================================================================
       폼 / 마이페이지 (6단계)
       ====================================================================== */

    /* ---------- 입력칸 공통 ----------
       이 화면들의 입력칸은 폭이 마크업에 인라인으로 박혀 있다.
         <textarea style="width:580px; height:150px;">
       인라인 style은 스타일시트를 이기지만, max-width는 별개 속성이라
       !important 없이도 폭을 눌러 준다.
       덕분에 넓은 칸만 줄어들고 25px짜리 연차 입력칸 같은 것은 원래 크기를 지킨다. */
    input, select, textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 높이는 눌러도 소용이 없어 여기서만 !important를 쓴다.
       원본이 height:18px이라 손가락으로 누르기에 너무 얇다. */
    table.write_form input[type="text"],
    table.write_form input[type="password"],
    table.my_write_form input[type="text"],
    table.my_write_form input[type="password"] {
        height: 30px !important;
        padding-left: 5px;
    }

    /* ---------- 온라인 지원현황 목록 ----------
       포지션명 / 진행상태 / 지원일 3칸을 카드로 쌓는다. */
    .page-my table.mypage { display: block; }
    .page-my table.mypage thead { display: none; }
    .page-my table.mypage tbody { display: block; }
    .page-my table.mypage tbody tr {
        display: block;
        padding: 11px 2px;
        border-bottom: 1px solid #e7e7e7;
    }
    .page-my table.mypage tbody td {
        display: block;
        height: auto;
        padding: 0;
        text-align: left;
        border-bottom: 0;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .page-my table.mypage tbody td.item {
        padding-left: 0;
        font-weight: 600;
        margin-bottom: 5px;
    }
    .page-my table.mypage tbody td.on,
    .page-my table.mypage tbody td.date {
        display: inline-block;
        font-size: 12px;
        color: #8c8c8c;
    }
    .page-my table.mypage tbody td.date { margin-left: 10px; }

    /* ---------- 로그인 / 비밀번호 찾기 / 회원탈퇴 상자 ----------
       셋 다 790x206 배경 이미지 위에 좌표로 요소를 얹어 둔 구조다.
       (지난 인증번호 작업에서 좌표를 다시 잡아 둔 곳이기도 하다)
       이미지 크기가 고정이라 화면이 좁아지면 요소가 이미지 밖으로 나간다.
       배경을 걷어내고 위에서 아래로 흐르는 보통 배치로 되돌린다. */
    .loginArea,
    .pwSearchArea,
    .secessionArea {
        width: auto;
        height: auto;
        background: none;
        border: 1px solid #e2e2e2;
        padding: 16px;
        box-sizing: border-box;
    }

    /* 배경 이미지에 글자가 있어서 감춰 두었던 제목을 살린다. */
    .tlt_login,
    .tlt_pwSearch,
    .tlt_secession {
        display: block;
        font-size: 17px;
        font-weight: 600;
        color: #ed6206;
        margin-bottom: 10px;
    }

    .subTlt_login,
    .subTlt_pwSearch,
    .subTlt_secession {
        position: static;
        margin-bottom: 16px;
        line-height: 20px;
    }

    .loginArea .id,
    .loginArea .pw,
    .loginArea .captcha,
    .pwSearchArea .email,
    .pwSearchArea .captcha {
        position: static;
        margin-bottom: 12px;
    }

    /* 원본 입력칸은 어두운 배경에 맞춰 회색 바탕 + 흰 글씨였다.
       배경을 걷어냈으므로 흰 바탕용으로 되돌린다. */
    .loginArea .id input,
    .loginArea .pw input,
    .pwSearchArea .email input {
        display: block;
        width: 100%;
        height: 36px;
        margin: 6px 0 0 0;
        padding-left: 8px;
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #ccc;
        color: #444;
    }
    .loginArea .captcha input,
    .pwSearchArea .captcha input {
        width: 90px;
        height: 34px;
        margin-left: 8px;
        background-color: #fff;
        border: 1px solid #ccc;
        color: #444;
    }

    .btn_login,
    .btn_pwSearch {
        position: static;
        margin-top: 4px;
    }

    /* 회원가입/비밀번호찾기 안내. 원본은 어두운 배경 위라 흰 글씨였다.
       그대로 두면 흰 바탕에 흰 글씨가 되어 아무것도 안 보인다. */
    .memberArea {
        position: static;
        color: #666;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid #e6e6e6;
    }
    .btn_my_join,
    .btn_my_pwSearch {
        position: static;
        margin: 8px 0 0 0;
    }
    .member_02 { margin-top: 18px; }

    .secessionArea .btn_group {
        position: static;
        margin-top: 4px;
        overflow: hidden;
    }
    .secessionArea .btn_group li { float: left; margin-right: 8px; }

    /* ---------- 헤드헌팅 프로세스 : 2단 -> 1단 ----------
       영문판은 .process_eng로 높이를 800px로 따로 잡아 둔다. 같이 푼다. */
    .headhunting_process,
    .process_eng {
        height: auto;
        overflow: hidden;
    }
    .headhunting_process_list {
        float: none;
        width: auto;
        padding-right: 0;
        margin-bottom: 24px;
    }

    /* ---------- 평판조회 프로세스 ---------- */
    .cont_client_sub03 .check_02_list {
        width: auto;
        height: auto;
        padding: 14px;
        box-sizing: border-box;
        background: #f7f7f7;
        border: 1px solid #e4e4e4;
    }
    .cont_client_sub03 .check_02 li {
        float: none;
        width: auto;
        margin-bottom: 8px;
    }

    /* 절차 안내는 778x269 이미지에 글자가 박혀 있고,
       같은 내용이 h6 + p로 마크업에 살아 있다. About 화면들과 같은 방식으로 되살린다. */
    .cont_client_sub03 .check_03_list {
        width: auto;
        height: auto;
        background: none;
        text-indent: 0;
    }
    .cont_client_sub03 .check_03_list > li {
        padding: 12px 14px;
        margin-bottom: 8px;
        background: #f7f7f7;
        border-left: 4px solid #ed6206;
    }
    .cont_client_sub03 .check_03_list h6 {
        font-size: 15px;
        color: #333;
        margin-bottom: 5px;
    }
    .cont_client_sub03 .check_03_list p {
        margin: 0;
        line-height: 21px;
    }

    /* ---------- 가운데 정렬 버튼 줄 (회원가입 등) ---------- */
    .btn_center {
        width: auto;
        text-align: center;
    }
    .btn_center li {
        float: none;
        display: inline-block;
        padding: 0 3px 6px;
    }


    /* ======================================================================
       버튼 이미지 -> 텍스트 버튼 (8단계)
       ----------------------------------------------------------------------
       이 사이트의 버튼은 글자까지 이미지로 만들어져 있다(btn_login.jpg 등).
       요즘 휴대폰은 화소 밀도가 2~3배라 24px짜리 비트맵 버튼이 흐리게 보이고,
       누를 수 있는 넓이도 좁다.

       menuinit.js의 buildTextButtons()가 img 옆에 span.btnTxt를 만들어 둔다.
       문구는 img의 alt를 그대로 쓰므로 따로 관리할 목록이 없고,
       화면을 넓히면 CSS만으로 원래 이미지 버튼으로 되돌아간다.
       ====================================================================== */
    a > img[src*="btn_"] { display: none; }

    .btnTxt {
        display: inline-block;
        padding: 10px 16px;
        background: #ed6206;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    /* 보조 버튼은 눌림이 약한 모양으로 구분한다. */
    .cancel .btnTxt,
    .list .btnTxt,
    .print .btnTxt,
    .secessionArea .btn_group li:last-child .btnTxt {
        background: #fff;
        color: #555;
        border: 1px solid #c8c8c8;
    }

    /* 로그인 / 비밀번호 찾기는 상자 안의 주 버튼이라 폭을 채운다. */
    .btn_login .btnTxt,
    .btn_pwSearch .btnTxt { display: block; }

    /* 로그인 상자 아래쪽 안내 버튼 두 개 */
    .btn_my_join .btnTxt,
    .btn_my_pwSearch .btnTxt {
        padding: 7px 14px;
        font-size: 13px;
        background: #fff;
        color: #ed6206;
        border: 1px solid #ed6206;
    }

    /* 검색 버튼은 셀렉트/입력칸과 같은 줄에 들어간다. */
    .default_sub .search a { flex: 0 0 auto; }
    .default_sub .search .btnTxt {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* 메인 페이지의 more는 제목 옆에 붙는 작은 표시라 버튼처럼 키우지 않는다. */
    .page-home .btn_notice_more .btnTxt,
    .page-home .btn_open_more .btnTxt {
        padding: 3px 9px;
        font-size: 11px;
        font-weight: normal;
    }

    /* ---------- 페이지 번호 ----------
       원본은 20x15라 손가락으로 누르기에 너무 작다. */
    .board_paging li { margin-right: 3px; }
    .board_paging li a {
        width: 30px;
        height: 30px;
        line-height: 30px;
        padding-right: 0;
        text-align: center;
        background: none;
    }
    .board_paging .first a,
    .board_paging .prev a,
    .board_paging .next a,
    .board_paging .last a {
        width: 30px;
        height: 30px;
        background-position: center center;   /* 화살표 이미지는 유지하고 위치만 다시 잡는다 */
    }

    /* 상세/인쇄 화면의 라벨-내용 표(table.board_view)를 위아래로 쌓는 규칙은
       767px 이하 블록에 두었다. 인쇄 팝업이 window.open(width=800)으로 열려서
       여기(1099px 이하)에 넣으면 PC에서 인쇄한 결과까지 바뀌기 때문이다. */

    /* ---------- 상세 화면 버튼 줄 ----------
       인쇄/추천/온라인지원/문의/목록 5개가 한 줄에 안 들어간다. */
    .btn {
        height: auto;
        overflow: hidden;
    }
    .btn_left,
    .btn_right { float: none; }
    .btn_left li,
    .btn_right li { padding: 0 5px 6px 0; }

    /* ---------- 추천하기 / 문의하기 팝업 ----------
       팝업 자체의 폭은 common.js의 dialogWidth()가 화면에 맞춰 줄인다.
       여기서는 그 안쪽 내용이 넘치지 않게 한다. */
    .recommend_body,
    .inquiry_body,
    .recommended_wrap,
    .inquiry_wrap {
        width: auto;
        height: auto;
    }
    .recommended_wrap .recomm_write_form,
    .inquiry_wrap .inquiry_write_form { width: auto; }

    .recommended_wrap .recomm_write_form input,
    .inquiry_wrap .inquiry_write_form input,
    .inquiry_wrap .inquiry_write_form textarea {
        width: 100%;
        box-sizing: border-box;
    }
    .inquiry_wrap .inquiry_write_form textarea { height: 110px; }

    /* jQuery UI 다이얼로그가 화면 밖으로 밀려나지 않게 한다. */
    .ui-dialog { max-width: 100%; }
}


/* ==========================================================================
   767px 이하 - 휴대폰
   ========================================================================== */
@media (max-width: 767px) {

    #wrapper { padding: 0 12px; }

    body { font-size: 15px; }          /* 휴대폰에서 14px은 작다 */

    .pageTlt { font-size: 22px; margin-bottom: 18px; }

    .cont p { line-height: 23px; margin-bottom: 16px; }

    /* 푸터 : 항목을 한 줄에 두 개씩 흘린다. */
    .footerMu li { margin-right: 16px; font-size: 12px; }
    .copyright { font-size: 11px; line-height: 18px; }


    /* ---------- 메인 페이지 ---------- */

    /* #wrapper의 좌우 여백이 12px로 줄어드는 만큼 상쇄값도 맞춘다. */
    .page-home .visual_main { margin: 0 -12px 18px; }

    /* 서브페이지 배너도 같이 맞추고, 사진 띠를 화면 크기에 맞게 낮춘다.
       띠 높이 130px이면 이미지가 762px 폭으로 깔려 767px 화면까지 빈틈 없이 채운다. */
    .visual_about,
    .visual_job,
    .visual_candidate,
    .visual_client,
    .visual_support,
    .visual_my,
    .visual_about_eng,
    .visual_client_eng {
        margin: 0 -12px 18px;
        padding: 146px 12px 16px;
        background-size: auto 130px;
    }

    .mainBanner h2 { font-size: 19px; }

    /* 폭이 좁아지면 같은 높이로도 이미지가 많이 잘린다. 높이를 낮춘다. */
    .page-home #jqb_main_object { height: 190px; }

    .page-home .left,
    .page-home .middle { margin-bottom: 28px; }

    /* 채용정보 탭이 5개라 좁은 폭에서는 두 줄로 접힌다. 간격을 줄여 덜 접히게 한다. */
    .page-home .Tap_Off,
    .page-home .Tap_On { margin: 0 1px 4px 0; }


    /* ---------- 라벨-내용 표를 위아래로 쌓기 ----------
       Job/Detail, Job/Print, 게시판 상세(Support)가 함께 쓰는 표다.
       18% 라벨 + 내용의 2칸 구조는 휴대폰 폭에서 라벨이 세로로 찌그러진다.

       1099px이 아니라 767px 기준인 이유:
       인쇄 화면은 window.open(width=800)으로 열린다. 1099px 기준으로 잡으면
       PC에서 인쇄를 눌렀을 때도 이 규칙이 걸려 인쇄 결과가 바뀐다. */
    table.board_view,
    table.board_view thead,
    table.board_view tbody,
    table.board_view tr,
    table.board_view th,
    table.board_view td { display: block; }

    table.board_view th {
        height: auto;
        padding: 10px;
        border-right: 0;
        line-height: 21px;
    }
    table.board_view .title { border-right: 0; }
    table.board_view tbody .item,
    table.board_view tbody .last_item {
        border-right: 0;
        padding: 8px 10px;
        font-weight: 600;
        color: #555;
    }

    /* 인쇄 화면 */
    .popup_print { padding: 12px; }


    /* ---------- 입력 폼 표를 라벨/입력 두 줄로 쌓기 ----------
       회원가입·회원정보수정·헤드헌팅 의뢰·평판조회 의뢰·고객상담이 쓰는 표다.
       라벨 16% + 입력 84%(또는 4칸) 구조라 휴대폰 폭에서는 라벨이 세로로 찌그러진다.
       라벨 칸은 원래 회색 배경이 있어서, 블록으로 바꾸면 그대로 라벨 띠가 된다. */
    table.write_form,
    table.write_form tbody,
    table.write_form tr,
    table.write_form td,
    table.my_write_form,
    table.my_write_form tbody,
    table.my_write_form tr,
    table.my_write_form td,
    table.write_oneline,
    table.write_oneline tbody,
    table.write_oneline tr,
    table.write_oneline td { display: block; }

    table.write_form td,
    table.my_write_form td { border-right: 0; }

    /* 여러 줄 입력칸과 파일 선택칸은 원래부터 넓게 쓰라고 만든 것이라
       쌓은 뒤에는 폭을 꽉 채운다. 인라인 style을 이겨야 해서 !important를 쓴다. */
    table.write_form textarea,
    table.my_write_form textarea,
    table.write_form input[type="file"],
    table.my_write_form input[type="file"] { width: 100% !important; }
}