@charset "UTF-8";
/* ============================================================
   서브페이지 공통 모바일 반응형 (회사소개/사업영역/홍보/채용)
   - 기존 common.css / style.css 는 수정하지 않고 이 파일만 뒤에 로드
   - 데스크톱(1025px 이상)은 영향 없음
   - 상단 GNB(.nav)는 메인과 동일 구조 → 상단 고정 처리
   - 좌측 사이드메뉴(.sidemenu)는 현재 페이지 소분류만 가로 배치
   ============================================================ */

@media all and (max-width:1024px){

    /* ---- 0. 고정폭/높이잠금 해제 ----
       common.css 의 html,body{height:100%} 가 body 를 뷰포트에 가둬
       세로 스크롤이 생기지 않는다. auto 로 해제. */
    html, body{height:auto !important; min-height:100%; overflow-x:hidden;}
    .wrapper{min-width:0 !important; width:100% !important; height:auto !important;}

    /* ---- 1. 상단 GNB(.nav) : 메인과 동일하게 상단 고정 ---- */
    .nav{bottom:auto !important; top:0 !important; background:#fff !important; box-shadow:0 2px 6px rgba(0,0,0,.15) !important; z-index:100;}
    .nav .nav-inner{width:100% !important; padding-left:0 !important; padding-top:60px !important; padding-bottom:6px !important;}
    .nav .logo{
        top:18px !important; left:50% !important;
        transform:translateX(-50%) !important;
        width:150px !important; height:34px !important; z-index:2;
    }
    .nav .nav-menu{height:48px !important;}
    .nav .nav-menu .inner,
    .nav .nav-menu .inner2{line-height:48px !important; font-size:12px !important;}

    /* ---- 2. 비주얼 배너(.sub_vis) 축소 + GNB 높이만큼 여백 ---- */
    .sub_vis{width:100% !important; height:150px !important; margin-top:114px;}
    .bod_title{width:100% !important; padding:20px 15px 0 0 !important; box-sizing:border-box;}
    .bod_title img{max-width:60%; height:auto;}

    /* ---- 3. sub_page : 고정폭/좌측여백 해제 ---- */
    .sub_page{
        width:100% !important;
        padding-left:0 !important;
        margin:0 !important;
    }
    /* 좌측 회색 배경 띠 제거(사이드메뉴가 세로가 아니게 되므로) */
    .sub_page::before{display:none !important;}

    /* ---- 4. 사이드메뉴 : 현재 페이지 소분류만 가로 스크롤 바 ---- */
    .sidemenu{
        position:static !important;
        width:100% !important;
        background:#444749;
    }
    /* 대분류 제목(회사소개 등)은 컴팩트하게 */
    .sidemenu > h1{padding:16px 15px !important; text-align:center;}
    .sidemenu > h1 .en{font-size:20px !important; margin-bottom:2px !important;}
    .sidemenu > h1 .kr{font-size:14px !important;}

    /* 대분류 4개 목록: 현재 페이지(.on) 것만 노출 → 소분류 표시 */
    .sidemenu > .gnb > li{border-bottom:0 !important;}
    .sidemenu > .gnb > li:not(.on){display:none !important;}   /* 다른 대분류는 숨김(상단 GNB로 이동 가능) */
    .sidemenu > .gnb > li.on > a{display:none !important;}      /* 대분류 제목은 위 h1과 중복이라 숨김 */

    /* 소분류(depth2)를 가로 배치 + 가로 스크롤 */
    .sidemenu > .gnb > li.on > .depth2{
        height:auto !important; opacity:1 !important;
        overflow-x:auto; -webkit-overflow-scrolling:touch;
        border-top:1px solid #5a5d5f;
    }
    .sidemenu > .gnb > li.on > .depth2 > ul{
        display:flex; white-space:nowrap; padding:0 8px;
    }
    .sidemenu > .gnb .depth2 li{flex:0 0 auto;}
    .sidemenu > .gnb .depth2 li a{
        line-height:46px !important; padding:0 14px !important;
        opacity:.6; font-size:14px;
    }
    .sidemenu > .gnb .depth2 li.on a{opacity:1; background:#cf002e !important;}
    .sidemenu > .gnb .depth2 li a::before{display:none !important;}  /* 앞 '-' 제거 */

    /* ---- 5. 콘텐츠 영역 ---- */
    .contents{min-height:0 !important; padding-bottom:40px;}
    .contents_tit{padding:22px 15px !important;}
    .contents_tit > h2{font-size:26px !important;}
    .contents_tit > .breadcrumb{
        position:static !important;
        transform:none !important;
        display:block; margin-top:8px; text-align:left !important;
        font-size:12px;
    }
    .bod_con_t{padding:16px 15px !important;}
    .bod_img{padding-top:20px !important;}
    .bod_text{margin-top:24px !important; font-size:14px;}

    /* ---- 6. 3단 박스(고객만족/전문성/혁신성) → 1단 세로 ---- */
    .bod_text2{margin:0 !important; padding-top:30px !important;}
    .box{
        float:none !important;
        width:100% !important;
        padding:0 !important;
        margin-bottom:34px;
    }
    .box .tit4{font-size:14px;}

    /* C.I 소개 등 2단 박스도 1단으로 */
    .ci_box{margin:24px 0 0 !important;}
    .ci_box2{float:none !important; width:100% !important; padding:0 !important; margin-bottom:20px;}

    /* ---- 7. footer ---- */
    .footer{padding:16px 12px !important; text-align:center;}

    /* ---- 8. 게시판(홍보센터: 공지/보도) ---- */
    /* 고정폭 950px → 화면폭 */
    .board_box{width:100% !important; padding:20px 0 !important;}

    /* 목록 테이블: 번호 열 숨김(모바일에선 덜 중요), 제목+날짜만 */
    .board_table{font-size:14px !important;}
    .board_table .board_cont_num,
    .board_table tr > .board_tit:first-child{display:none !important;}
    /* 제목: 남는 폭 모두 사용 + 길면 말줄임 */
    .board_cont_sub{
        padding-left:12px !important;
        max-width:0;                 /* table-layout 트릭: 말줄임 활성화 */
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .board_cont_sub a{font-size:14px;}
    /* 날짜 열 컴팩트 */
    .board_cont_date{width:82px !important; font-size:12px !important; padding-right:8px;}
    .board_table td.board_tit{font-size:13px !important;}
    .board_deco{background-size:auto 100% !important;}

    /* 페이징 */
    .page{margin:24px auto !important;}
    .page td table td{padding:6px !important;}

    /* 검색 폼: 510px → 100%, 요소 폭 정리 */
    .bo_search{width:100% !important; height:auto !important; padding:0 15px; box-sizing:border-box;}
    .bo_search select{width:34% !important; height:38px; box-sizing:border-box;}
    .bo_search input[type="text"]{width:46% !important; height:38px; box-sizing:border-box;}
    .bo_search input[type="image"]{height:38px; vertical-align:middle !important;}

    /* ---- 9. 게시글 보기(view) ---- */
    .view_tit{font-size:14px !important; padding:8px 10px !important; height:auto !important; word-break:keep-all;}
    .board_view_info{height:auto !important; padding:6px 10px !important; font-size:12px;}
    .view{padding:14px 10px !important; font-size:14px; line-height:1.7; word-break:keep-all;}
    .view img{max-width:100% !important; height:auto !important;}   /* 본문 이미지 넘침 방지 */
    .board_box table{width:100% !important;}
}

/* ---- 소형폰(≤480px) ---- */
@media all and (max-width:480px){
    .contents_tit > h2{font-size:22px !important;}
    .sub_vis{height:120px !important;}
    .bod_title img{max-width:52%;}
}

/* ---- 초소형(≤360px) ---- */
@media all and (max-width:360px){
    .nav .nav-menu .inner,
    .nav .nav-menu .inner2{font-size:11px !important;}
    .sidemenu > .gnb .depth2 li a{font-size:13px; padding:0 11px !important;}
}