@charset "UTF-8";
/* ============================================================
   서브 페이지 모바일 시인성 보정 (2026-09-06)
   - 768px 이하 전용. header.html에서 media="(max-width: 768px)"로 링크되어 PC에는 로드조차 안 됨
   - 실제 발동은 viewport가 device-width인 레이아웃(layout_*.html에 스니펫 삽입한 것)만.
     스니펫 없는 레이아웃은 viewport 1380 고정이라 폰에서도 PC 화면 그대로(안전망)
   - 원칙: 디자인(색·모서리·장식선·구성) 유지, 폭·여백·글자 크기·표/이미지 넘침만 보정
   - 선택자에 #main_container를 붙여 공용 sub.css(클래스 규칙)보다 우선. !important 미사용
   ============================================================ */
@media (max-width: 768px) {
  /* 컨테이너: 1100px 고정폭 → 화면폭 (오른쪽 잘림 원인) */
  #main_container .subWrap { padding: 22px 0 56px; overflow-x: hidden; }
  #main_container .subWrap > h2, #main_container .subWrap h2.font_gb { font-size: 26px; line-height: 1.3; padding: 0 16px; margin-bottom: 6px; word-break: keep-all; }
  #main_container .inner, #main_container .login_inner { width: auto; max-width: 100%; padding: 0 16px; box-sizing: border-box; overflow: visible; }
  #main_container .login_inner { padding-top: 24px; }

  /* 브레드크럼 */
  #main_container .lnbArea { padding: 10px 16px 0; }
  #main_container .lnbArea .lnb { padding-top: 4px; }
  #main_container .lnbArea .lnb .home { width: 34px; }
  #main_container .lnbArea .lnb > div, #main_container .lnbArea .lnb > div.oneD { margin-left: 12px; }
  #main_container .lnbArea .lnb > div > a { padding-right: 22px; height: 28px; line-height: 28px; font-size: 14px; }
  #main_container .lnbArea .lnb > div > div { left: 0; top: 40px; padding: 12px 14px; }
  #main_container .lnbArea .lnb > div > div a { font-size: 15px; margin-top: 12px; }

  /* 탭 버튼: 표 레이아웃(1052px) → 한 줄 가로 스와이프. 모양·색 동일 */
  #main_container .tabBtn, #main_container .semt_tabBtn { display: flex; width: auto; max-width: none; height: auto; margin: 16px 0 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #main_container .tabBtn::-webkit-scrollbar, #main_container .semt_tabBtn::-webkit-scrollbar { display: none; }
  #main_container .tabBtn li { display: block; flex: 0 0 auto; }
  #main_container .tabBtn a, #main_container .semt_tabBtn a { display: block; flex: 0 0 auto; height: auto; padding: 11px 14px; font-size: 14px; line-height: 1.2; white-space: nowrap; }

  /* 내용 박스 */
  #main_container .con_box { margin-top: 16px; padding: 18px 14px; }
  #main_container .con_box .tit_txt { font-size: 18px; line-height: 1.4; padding-top: 12px; margin-bottom: 8px; word-break: keep-all; }
  #main_container .con_box .tit_txt::before { top: 0; width: 40px; }
  #main_container .con_box .txt_wrap { font-size: 15px; line-height: 1.7; word-break: keep-all; }
  #main_container .con_box .txt_wrap p, #main_container .table_box .txt_sub { padding-left: 14px; }
  #main_container .inner .txt_grey { word-break: keep-all; }

  /* 표: 넘치면 표 자체가 가로 스크롤 (thead·tbody는 익명 표 박스로 묶여 열 정렬 유지) */
  #main_container .inner table { display: block; width: 100%; max-width: 100%; margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #main_container .inner table.paging_table, #main_container .paging table { display: table; overflow: visible; }
  #main_container .inner th { font-size: 14px; padding: 10px 8px; white-space: nowrap; }
  #main_container .inner td { font-size: 14px; padding: 10px 8px; line-height: 1.5; }
  #main_container .inner .con_table tbody > tr > td { padding: 10px 8px; font-size: 14px; }
  #main_container .inner .con_table tbody > tr > td .tby_span { padding-left: 10px; }
  #main_container .inner .notice_table tbody > tr > td:nth-child(3), #main_container .inner .notice_3tb tbody > tr > td:nth-child(2) { font-size: 15px; }
  #main_container .inner .notice_table tbody > tr > td > a { display: inline-block; padding: 6px 0 6px 18px; }
  #main_container .inner table.line_table thead tr th, #main_container .inner table.line_table tbody tr td { padding: 10px 6px; font-size: 13.5px; }
  #main_container .inner .table_wide tbody tr td { font-size: 14px; }

  /* 이미지·아이콘 */
  #main_container .inner img { max-width: 100%; height: auto; }

  /* 검색·폼: 입력칸 16px(폰 브라우저 자동 확대 방지) */
  #main_container .inner .search { float: none; display: flex; gap: 6px; padding: 12px 0 0; }
  #main_container .inner .search li { float: none; margin: 0; flex: 1 1 auto; }
  #main_container .inner .search li:has(select) { flex: 0 0 96px; } /* 분류 select만 좁게, 검색어 입력은 넓게 */
  #main_container .inner .search select { width: 100%; height: 44px; font-size: 16px; }
  #main_container .inner input[type="text"], #main_container .inner input[type="password"] { width: 100%; height: 44px; margin-right: 0; font-size: 16px; }
  #main_container .inner button, #main_container .inner .button { height: 44px; padding: 0 14px; font-size: 15px; line-height: 44px; }

  /* 페이지네이션 */
  #main_container .paging { margin-top: 28px; }
  #main_container .paging table td { padding: 0; }
  #main_container .paging table .page_number_btn, #main_container .paging table .page_number_btn_on { width: 38px; height: 38px; line-height: 36px; font-size: 15px; margin: 0 2px; }
  #main_container .paging table .page_first_btn, #main_container .paging table .page_prev_btn, #main_container .paging table .page_next_btn, #main_container .paging table .page_last_btn { width: 36px; height: 38px; margin: 0 2px; background-size: 10px auto; }

  /* FAQ 아코디언 */
  #main_container .qna_list { margin-top: 18px; }
  #main_container .qna_list li a p { font-size: 15px; line-height: 1.5; }
  #main_container .qna_list li .anw { font-size: 14.5px; line-height: 1.7; padding: 14px; }

  /* 인라인 고정폭 블록(예: 자격증 안내 <p style="width:958px">) - 화면폭 이내로 */
  #main_container .inner p[style*="width"], #main_container .inner div[style*="width"] { max-width: 100%; box-sizing: border-box; }
  /* 학자금대출 안내 버튼 4개(템플릿 인라인 style: flex·min-width 180) - 2열 줄바꿈 */
  #main_container .con_box .txt_wrap .btn { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  #main_container .con_box .txt_wrap .btn a { flex: 1 1 calc(50% - 8px); min-width: 0; margin: 0; font-size: 15px; }

  /* 자격증 안내(사회복지사·보육교사·경영학 - .certiguide_index/.classroom_index) */
  #main_container .certiguide_index .order { width: auto; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  #main_container .certiguide_index .order li { float: none; width: calc(50% - 4px); height: auto; padding: 14px 8px; font-size: 14px; line-height: 1.3; box-sizing: border-box; }
  #main_container .certiguide_index .order li::after { display: none; } /* 단계 화살표는 2열에서 방향이 어긋나 숨김 */
  #main_container .certiguide_index .order_img { margin-top: 20px; }
  #main_container .certiguide_index .order_img img { width: 100%; margin-bottom: 20px; }
  #main_container .classroom_index .sub_table, #main_container .certiguide_index .sub_table { width: 100%; height: auto; float: none; }
  #main_container .certiguide_index .sub_table2 tbody tr td, #main_container .certiguide_index .sub_table4 tbody tr td { font-size: 14px; line-height: 1.6; }
  #main_container .certiguide_index .sub_table2 tbody tr .mark { font-size: 15px; }
  #main_container .certiguide_index .cert_table tbody tr td { padding: 10px 8px; font-size: 14px; }
  #main_container .certiguide_index .txt_wrap .txt_tit { font-size: 16px; }
  #main_container .con_box .txt_wrap .table_box .txt_sub { padding-left: 14px; font-size: 15px; }
  #main_container ul.list01 > li, #main_container ul.list02 > li { padding-left: 22px; }
  #main_container ul.list01 > li:before, #main_container ul.list02 > li::before { left: 6px !important; }
  #main_container ul.list03 > li { padding-left: 34px; }
  #main_container ul.list03 > li:before { left: 8px !important; }

  /* 학습지원센터: 증명서(3열 안내) / 프로그램·자료실 표 / 장학(영상·슬라이드) */
  #main_container .inner video { max-width: 100%; height: auto; }
  #main_container .inner .celtfi_box .txt_wrap { margin-top: 16px; }
  #main_container .inner .celtfi_box .txt_wrap ul > li { float: none; width: 100%; margin-bottom: 14px; }
  #main_container .inner .celtfi_box .txt_wrap .txt_grey { margin: 12px 0 0; }
  #main_container .inner .program_table { margin: 20px 0; }
  #main_container .inner .program_table tbody > tr > td:nth-child(2) span { font-size: 15px; }
  #main_container .btn_wrap { text-align: center; }
  #main_container .btn_wrap a, #main_container .btn_wrap button { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 16px; font-size: 15px; }
  /* 장학 페이지 사진 슬라이드(템플릿 인라인 style: bx-wrapper 640px !important·li 360px·페이저 214px float) */
  #main_container .img_bxwrap { margin: 12px 0; }
  #main_container .bx-wrapper { width: 100% !important; max-width: 100% !important; float: none; margin: 0; }
  #main_container .bx-viewport { height: auto !important; }
  #main_container .bxslider li { height: auto; }
  #main_container .bxslider li img { width: 100%; max-width: 100%; }
  #main_container #bx-pager { width: 100%; float: none; display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
  #main_container #bx-pager a { margin: 0; flex: 1 1 0; max-width: 110px; }
  #main_container #bx-pager a img { width: 100%; box-sizing: border-box; }

  /* 상담지원센터: FAQ 이미지 탭·문답 목록 / 상담게시판·맞춤학습설계 목록 */
  #main_container .faq_tabBtn { display: flex; margin: 14px 0 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #main_container .faq_tabBtn::-webkit-scrollbar { display: none; }
  #main_container .faq_tabBtn li { display: block; flex: 0 0 auto; }
  #main_container .faq_tabBtn a { padding: 8px 4px; }
  #main_container .faq_tabBtn a img { width: 96px; }
  #main_container .qna_list li > a { padding: 16px 30px 16px 48px; background-position: 12px 18px; background-size: 26px auto; }
  #main_container .qna_list li > a .txt { font-size: 15px; line-height: 1.5; padding-right: 22px; }
  #main_container .qna_list li > a .txt span:first-child { font-size: 13.5px; }
  #main_container .qna_list li .anw { padding: 16px 14px 20px 48px; background-position: 12px 16px; background-size: 26px auto; font-size: 14.5px; line-height: 1.7; }
  #main_container .counsel_table tbody tr td.tit, #main_container p.subject { font-size: 15px; }
  #main_container .inner .counsel_table th.number, #main_container .inner .counsel_table td.number { width: 44px; padding-left: 4px; padding-right: 4px; }
  #main_container .inner .counsel_table td.date, #main_container .inner .counsel_table td.readcnt { white-space: nowrap; font-size: 13px; }
  #main_container .inner .counsel_table td.addfiles img { width: 16px; }

  /* 구 홈페이지 로그인(oldData) - 2단 표 배치 → 세로 스택 */
  #main_container #login_page .login_wrap .title p, #main_container .login_wrap .title p { font-size: 26px; margin-bottom: 16px; }
  #main_container .login_wrap .login_box { display: block; padding: 16px 0; }
  #main_container .login_wrap .login_box > * { display: block; width: 100%; padding: 0 0 18px; }
  #main_container .login_box .common_login { border-right: 0; }
  #main_container .login_box .common_login .box, #main_container .login_wrap .login_box .celti_login .box { width: 100%; }
  #main_container .login_box .common_login .login_cont, #main_container .login_box .common_login .login_cont > * { display: block; width: 100%; }
  #main_container .login_box .common_login .login_cont .input_wrap { width: 100%; }
  #main_container .login_wrap .login_box .common_login .login_cont .btn_common_login { width: 100%; height: 48px; margin: 8px 0 0; }
  #main_container .login_wrap .join_box a { width: 100%; }
  /* 사이트맵 - 4열 float → 1열 (layout_sitemap은 #main_container가 없어 body#sitemap으로 지정) */
  body#sitemap .subWrap { padding: 22px 0 56px; overflow-x: hidden; }
  body#sitemap .subWrap > h2, body#sitemap .subWrap h2.font_gb { font-size: 26px; line-height: 1.3; padding: 0 16px; margin-bottom: 6px; }
  body#sitemap .inner { width: auto; max-width: 100%; padding: 0 16px; box-sizing: border-box; }
  body#sitemap .site_div { margin-top: 20px; padding-top: 20px; }
  body#sitemap .site_div .site_dl, body#sitemap .site_div dl { float: none; width: 100%; height: auto; margin: 0 0 22px; } /* PC 규칙 height 500px 해제 */
  body#sitemap .site_div .site_dl > dt a { padding-bottom: 10px; font-size: 20px; }
  body#sitemap .site_div .site_dl > dd > dl { margin-top: 12px; }
  body#sitemap .site_div .site_dl > dd dt a { font-size: 16px; }
  body#sitemap .site_div .site_dl > dd dd a { font-size: 15px; margin-bottom: 8px; padding: 4px 0; }
  /* 수강후기(course/faq_mod) 목록 */
  #main_container .classroom_index .sub_table3 .chk a, #main_container .classroom_index .sub_table3 .study a, #main_container .classroom_index .sub_table3 .no_study a { padding: 8px 9px; font-size: 13px; }

  /* 학습안내(탭 스크립트) 이미지·탭 */
  #main_container .tabscript_inner .img_vb .txt_wrap .img_p3 img { width: 100%; }
  #main_container .mypage_tab { height: auto; }
}