@charset "utf-8";
/* =====================================================================
   반응형 보강 CSS  (2026-09)
   - 기존 mystyle.css / en/css/mystyle.css 뒤에 로드된다.
   - 새 이미지 없이 CSS 만으로 좁은 화면(태블릿·휴대폰)에 대응한다.
   - 1024px 이상(PC)에서는 기존 레이아웃을 그대로 유지한다.
   ===================================================================== */

/* ---------- 모든 폭 공통 ---------- */
img { max-width: 100%; height: auto; }
.m_menu_btn { display: none; }
#main_content .business { float: left; width: 300px; padding: 33px 0; }   /* 인라인 스타일에서 이동 */
#map_canvas { max-width: 100%; }
.cs_center .cs_text { display: none; }   /* 모바일용 고객센터 텍스트 블록(PC에서는 이미지) */
.main_spot { overflow: hidden; }   /* 1500px 메인 비주얼이 PC 좁은 창에서 가로 스크롤을 만들지 않도록 */
.tap, .tap > div { padding-bottom: 0 !important; }   /* 제품 탭과 본문 그림 사이 여백(인라인 padding-bottom) 제거 */

/* ---------- 1024px 미만: 모바일 레이아웃 (PC 레이아웃은 1000px 고정폭 전제) ---------- */
@media (max-width: 1023px) {
    html { overflow-y: auto; }
    body { font-size: 14px; line-height: 160%; }

    /* 상단: 한 줄에 로고 | 아이콘·언어 | MENU 버튼 */
    #header { position: relative; width: auto; height: auto; min-height: 50px; padding: 10px 12px 8px; }
    .sta { float: left; padding: 6px 0 0; }
    .sta img { width: 120px; }
    .m_menu_btn { display: block; position: absolute; right: 12px; top: 8px; float: none; margin: 0; padding: 3px 10px; border: 1px solid #bbb; border-radius: 4px; background: #fff; color: #333; font-size: 13px; font-weight: bold; line-height: 24px; cursor: pointer; }
    .m_menu_btn:before { content: "\2630\00a0"; }            /* ☰ 문자 아이콘 */
    .navi_area { position: absolute; right: 96px; top: 11px; float: none; clear: none; overflow: visible; padding: 0; white-space: nowrap; }
    .gnb { display: flex; align-items: center; }               /* 내부 float 무시하고 한 줄 배치 */
    .gnb .enter { display: none; }
    .gnb01, .gnb02, .gnb03, .gnb04 { float: none; padding: 0 6px 0 0; }
    .gnb01 img, .gnb02 img, .gnb03 img, .gnb04 img { width: 28px; }
    .gnb_ko, .gnb_en { float: none; padding: 0 4px 0 0; }
    .gnb_ko img, .gnb_en img { display: none; }               /* 작은 이미지 대신 CSS 버튼 */
    .gnb_ko a, .gnb_en a { display: inline-block; height: 26px; line-height: 26px; padding: 0 12px; border-radius: 4px; color: #fff !important; font-size: 12px; font-weight: bold; letter-spacing: 0.5px; text-decoration: none; }
    .gnb_ko a { background: #1e63b0; }
    .gnb_en a { background: #f7941d; }
    .gnb_ko a:after { content: "KO"; }
    .gnb_en a:after { content: "EN"; }
    .gnb03, .gnb04 { display: none; }                          /* 사이트맵·E-BOOK 아이콘은 펼침 메뉴로 충분 */
    .lang_ko .gnb_ko, .lang_en .gnb_en { display: none; }      /* 현재 언어 버튼은 숨기고 전환 버튼만 표시 */
    .lnb { display: none; }                                  /* 이미지 대메뉴 숨김 */

    /* 펼침 메뉴: 기존 텍스트 메뉴를 세로 목록으로 */
    .scroll-list { padding-left: 0; height: 0 !important; overflow: hidden; background: #f5f5f5; border-top: 1px solid #ddd; }   /* PC에서 hover로 들어간 인라인 높이보다 우선 */
    body.m_open .scroll-list { height: auto !important; overflow: visible; border-bottom: 1px solid #ddd; }
    body.m_open .scroll-list { min-height: 0; }
    .scroll-list_all { width: auto; padding: 4px 12px 10px; }
    .scroll-list .menu1, .scroll-list .menu2, .scroll-list .menu3, .scroll-list .menu4, .scroll-list .menu5 { float: none; width: auto !important; height: auto; padding: 8px 0; margin: 0; border-right: 0; border-bottom: 1px dotted #ccc; }
    .scroll-list_all > div:before { display: block; margin-bottom: 2px; color: #003895; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
    .scroll-list_all > div:nth-child(1):before { content: "COMPANY"; }
    .scroll-list_all > div:nth-child(2):before { content: "BUSINESS"; }
    .scroll-list_all > div:nth-child(3):before { content: "PRODUCT"; }
    .scroll-list_all > div:nth-child(4):before { content: "CUSTOMER"; }
    .scroll-list_all > div:nth-child(5):before { content: "CONTACT US"; }
    .scroll-list li { display: inline-block; margin: 0 14px 0 0; font-size: 15px; line-height: 32px; }
    .scroll-list .menu_close, .close_bar { display: none; }

    /* 메인 비주얼 */
    .main_spot { height: auto; padding-bottom: 8px; }
    #rotator .ui-tabs-panel { height: auto; }
    .main_vs_box, .main_vs_box2 { width: auto !important; padding-top: 0; text-align: center; }
    .main_vs_box img { width: 100%; }
    /* 슬라이드 높이 통일: 1000px 그림은 폭 100%(높이 51.2vw), 1500px 그림(1·3번)은 폭 100%(높이 34.13vw)에 위아래 8.53vw 여백 */
    .main_spot .main_vs_box2 { padding: 8.53vw 0 !important; }
    /* 투명 PNG 뒤의 대각선 배경(1500px JPG)을 그림과 같은 비율로 맞춰 글자가 가려지지 않게 */
    #rotator .ui-tabs-panel { background-size: 150% auto !important; background-position: center top !important; }
    #rotator #fragment-1, #rotator #fragment-3 { background-size: 100% 100% !important; }
    .main_spot { overflow: hidden; }
    /* 슬라이드 선택 칩 → 점(dot) 표시. 이미지 안에 제품명이 있으므로 글자는 숨김 */
    ul.ui-tabs-nav { float: none; position: static; height: auto; display: flex; flex-wrap: wrap; justify-content: center; width: auto; margin: 10px 0 2px; left: auto; background: none; }
    ul.ui-tabs-nav li { float: none; width: auto !important; height: auto; margin: 0 !important; padding: 0; line-height: 0; border-radius: 0; }
    #rotator ul.ui-tabs-nav li a:link, #rotator ul.ui-tabs-nav li a:visited, #rotator ul.ui-tabs-nav li a:hover, #rotator ul.ui-tabs-nav li a:active { display: block; float: none; width: 11px !important; height: 11px; margin: 0 5px !important; padding: 0; border: 0; border-radius: 50%; background: #c9c9c9; font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden; }
    #rotator ul.ui-tabs-nav li a span { display: none; }
    #rotator ul.ui-tabs-nav li.ui-tabs-selected a:link, #rotator ul.ui-tabs-nav li.ui-tabs-selected a:visited, #rotator ul.ui-tabs-nav li.ui-tabs-selected a:hover, #rotator ul.ui-tabs-nav li.ui-tabs-selected a:active { background: #003895; }
    .cnt_visual { height: 120px; background-size: cover; }

    /* 메인 콘텐츠 */
    #main_content { width: auto; padding: 0 12px; }
    #main_content .news { float: none; width: auto; padding: 20px 0 10px; }
    #main_content .news { overflow: hidden; }
    #main_content .business { display: none; }                /* 사업분야 배너 숨김 */
    #main_content .cs_center { float: none; clear: both; padding: 6px 0 20px; }
    #main_content .cs_center > a { display: none; }            /* 이미지 대신 아래 텍스트 블록 */
    .cs_center .cs_text { display: block; padding: 12px 16px 11px; border-radius: 6px; background: #f7941d; color: #fff; }
    .cs_center .cs_title { font-size: 14px; font-weight: bold; letter-spacing: 0.5px; }
    .cs_center .cs_title span { font-weight: normal; }
    .cs_center .cs_title .cs_icon { display: inline-block; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: #fff; color: #f7941d; font-size: 14px; line-height: 24px; text-align: center; vertical-align: middle; }
    .cs_center .cs_tel { display: block; margin: 6px 0 2px; color: #fff !important; font-size: 21px; font-weight: bold; line-height: 1.2; letter-spacing: 0.5px; text-decoration: none; }
    .cs_center .cs_mail { display: block; color: #fff !important; font-size: 13px; font-weight: bold; text-decoration: none; }
    .cs_center .cs_time { margin-top: 4px; font-size: 11px; opacity: 0.95; }
    #main_content .latest .lt { float: none; width: auto; height: auto; }

    /* 서브 페이지 */
    .spot { display: none; }                                   /* 서브 상단 배경 띠 숨김 */
    .content_area { width: auto; padding: 0 12px; }
    .snb { float: none; width: auto; }
    .snb .title, .snb .banner { display: none; }               /* 좌측 타이틀·전화 배너 이미지 숨김 */
    .snb .navi { display: flex; flex-wrap: wrap; margin-top: 12px; background: none; }
    .snb .navi > div { width: 50%; padding: 0 !important; }
    .snb .navi > div a.snb-menu-btn { width: 100%; height: 40px; line-height: 40px; padding-left: 12px; font-size: 14px; border: 1px solid #d0d0d0; margin: -1px 0 0 -1px; }
    .snb .navi > div img { width: 100%; }
    #content { float: none; width: auto; }
    #content .title_area .title { float: none; margin: 18px 0 4px; font-size: 22px; }
    #content .title_area .path { float: none; margin: 0 0 8px; font-size: 12px; }
    #content .title_area .underline { width: auto; }
    #content .title_area .section { margin: 16px 0 40px; }
    #content .section table { width: 100% !important; max-width: 100%; }
    #content .section td { width: auto !important; height: auto !important; word-break: break-all; }

    /* 제품 탭·본문 이미지 */
    .tap { overflow: hidden; margin-bottom: 0; }
    .tap > div { float: left !important; padding: 0 !important; margin: 0; }
    .product-tab-btn { width: auto !important; height: 32px; line-height: 32px; padding: 0 12px; font-size: 14px; border-radius: 8px 8px 0 0; }
    .section .img1, .section .img2 { float: none !important; margin: 0 0 10px 0 !important; }

    /* 찾아오시는 길 */
    #map_canvas { width: 100% !important; height: 240px !important; }

    /* 사이트맵 */
    .box_pro { width: auto; }
    .box_pro .st_tit, .box_pro .st_txt { float: none; width: auto; line-height: 36px; }

    /* 하단 */
    .quick_area { height: auto; }
    .quick_menu { width: auto; height: auto; padding: 0 12px; }
    .quick_menu > div { height: auto !important; padding: 8px 10px !important; }
    .copy_area { width: auto; padding: 0 12px; }
    .foot_logo { float: none; width: auto !important; padding: 16px 0 8px !important; }
    .address { float: none; width: auto !important; padding-top: 0 !important; font-size: 12px; }
    .copy_area > div:nth-child(3) { display: none; }            /* QR 이미지 */
    .address img[src*="btn_admin"], .address img[src*="btn_logout"], .address img[src*="btn_remote"] { display: none; }   /* 관리자·로그아웃·원격지원 버튼 */

    /* 게시판 (그누보드 스킨) */
    #bo_list, #bo_v, #bo_w, #bo_gall { width: auto !important; max-width: 100%; }
    #bo_list .bo_fx { overflow: hidden; }
    #bo_list_total { float: none; }
    #bo_sch { float: none; margin: 8px 0; }
    #bo_list .tbl_wrap { overflow-x: auto; }
    #bo_list table { width: 100% !important; table-layout: auto; }
    #bo_list th, #bo_list td { padding: 8px 4px; font-size: 13px; }
    #bo_list .td_subject { width: auto; word-break: break-all; }
    #bo_list .td_name { width: 1%; white-space: nowrap; }       /* 내용 폭만큼만 */
    #bo_list .wdatetime, #bo_list .td_datetime { width: 1%; white-space: nowrap; }
    #bo_list .td_num { width: 1%; white-space: nowrap; }
    #bo_list th { white-space: nowrap; }
    #bo_gall ul { margin: 0 !important; width: auto !important; }
    #bo_gall .gall_li { float: left; width: 48% !important; margin: 1% !important; padding: 6px !important; box-sizing: border-box; }
    #bo_gall .gall_li img { width: 100%; height: auto; }
    #bo_gall .gall_con, #bo_gall .gall_con li, #bo_gall .gall_text_href { width: auto !important; max-width: 100%; white-space: normal; word-break: break-all; }
    .hist_table { background: none !important; }                 /* 연혁 타임라인 배경(750px 기준 그림) 숨김 */
    .hist_table th { width: 70px !important; font-size: 20px !important; }
    #bo_v_title, #bo_v_info, #bo_v_atc, #bo_v_con, #bo_v_file, #bo_v_link, #bo_v_top, #bo_v_bot, #bo_v_share { width: auto !important; max-width: 100%; }
    #bo_v_title .bo_v_tit, #bo_v_title h2 { white-space: normal; word-break: break-all; font-size: 18px; line-height: 1.4; }
    #bo_v_img img, #bo_v_con img, #bo_v_con iframe { max-width: 100%; height: auto; }
    #bo_v_atc, #bo_v_con, #bo_v_link, #bo_v_info { word-break: break-all; }
    #bo_w table { width: 100% !important; table-layout: fixed; }
    #bo_w th, #bo_w td { display: block; width: auto !important; padding: 6px 4px; text-align: left; }   /* 항목명과 입력칸을 세로로 */
    #bo_w th { padding-bottom: 0; font-size: 13px; }
    #bo_w .frm_input, #bo_w textarea, #bo_w select, #bo_w iframe { max-width: 100% !important; box-sizing: border-box; }
    #bo_w_info .frm_input, .write_div .frm_input, #bo_w_link .frm_input { width: 100% !important; box-sizing: border-box; }
    .cmt_btn, #bo_vc_w textarea { width: 100% !important; box-sizing: border-box; }
}

@media (max-width: 600px) {
    /* 목록에서 번호 열 숨김(글쓴이·날짜·조회는 유지). 번호가 첫 열인 스킨(basic·basic_comment·shop) 기준 */
    #bo_list thead th:first-child, #bo_list tbody td.td_num:first-child { display: none; }
    #bo_list th, #bo_list td { font-size: 12px; }
    .snb .navi > div { width: 100%; }
    .quick_menu > div { padding: 8px 6px !important; }
    /* 자동등록방지(reCAPTCHA) 위젯은 304px 고정폭이라 축소 */
    #bo_w .g-recaptcha, #bo_vc_w .g-recaptcha { transform: scale(0.78); transform-origin: 0 0; }
    #bo_w #captcha, #bo_vc_w #captcha { margin: 0 !important; padding: 0 !important; }
}

/* 인라인 스타일에서 옮긴 PC 폭(하단 주소 영역: 로고 230 + 주소 710 + QR 60 = 1000) */
.copy_area .address { width: 710px; }
@media (max-width: 1023px) { .copy_area .address { width: auto; } }

@media (max-width: 380px) {
    .sta img { width: 108px; }
    .gnb01 { display: none; }                                  /* 위치 아이콘: 펼침 메뉴의 '찾아오시는 길'로 대체 */
    .gnb_ko a, .gnb_en a { padding: 0 8px; font-size: 11px; }
}