@charset "utf-8";
/* =====================================================================
   responsive.css  (2026-11-13)
   - 기존 디자인/컨텐츠는 그대로 두고, 1023px 이하 화면(모바일/태블릿)에서만 적용
   - PC 화면(1024px 이상)에는 아무 영향 없음
   - _MainLayout.cshtml 에서 media.css 다음에 로드
   ===================================================================== */

/* 모바일 전용 요소는 PC에서 숨김 */
.m-only { display: none; }

@media (max-width: 1023px) {

    /* ---------- 기본 ---------- */
    html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
    body { background-image: none !important; min-width: 0 !important; }
    #wrapper { padding-top: 56px; }
    .m-only { display: block; }
    .pc-only { display: none !important; }

    /* ---------- 헤더 (상단 고정바) ---------- */
    #wrapper #header {
        position: fixed !important;
        top: 0 !important; left: 0; right: 0;
        z-index: 1030 !important;
        min-width: 0 !important;
        width: 100%;
        background: #3b3b3b url("/images/common/bg.png") repeat-x 0 0;
        box-shadow: 0 1px 4px rgba(0,0,0,.25);
    }
    #wrapper #header .head_area { width: auto !important; height: 56px; padding: 0 6px 0 10px; position: relative; }
    #wrapper #header .head_area h1 { float: left; height: 56px; }
    #wrapper #header .head_area h1 a { display: block; height: 56px; }
    #wrapper #header .head_area h1 img { height: 52px; width: auto; margin-top: 2px; }
    #wrapper #header .top_menu,
    #wrapper #header .navi_area { display: none !important; }

    #wrapper #header .navbar-toggle {
        display: block !important;
        float: right;
        margin: 10px 2px 0 0;
        padding: 10px 10px;
        border: 1px solid rgba(255,255,255,.35);
        border-radius: 4px;
        cursor: pointer;
    }
    #wrapper #header .navbar-toggle .icon-bar { width: 22px; height: 2px; background: #fff; }

    /* 모바일 메뉴 패널 */
    #wrapper #header .navbar-collapse {
        display: none;
        clear: both;
        max-height: calc(100vh - 56px) !important;
        overflow-y: auto !important;
        padding: 0 0 10px;
        margin: 0;
        background: #262626;
        border-top: 1px solid #444;
    }
    /* Bootstrap 3.0: 펼친 뒤 클래스가 "navbar-collapse in" (collapse 클래스 없음) */
    #wrapper #header .navbar-collapse.in,
    #wrapper #header .navbar-collapse.collapsing { display: block !important; }
    #wrapper #header .navbar-collapse.collapsing { overflow: hidden !important; }

    #wrapper #header .m-nav { margin: 0; padding: 0; }
    #wrapper #header .m-nav > li { border-bottom: 1px solid #383838; }
    #wrapper #header .m-nav > li > a {
        display: block; padding: 13px 18px;
        color: #fff; font-size: 16px; font-weight: bold;
    }
    #wrapper #header .m-nav > li > a:hover,
    #wrapper #header .m-nav > li > a:focus { background: #333; text-decoration: none; }
    #wrapper #header .m-nav .m-sub { padding: 0 18px 12px 26px; line-height: 1.4; }
    #wrapper #header .m-nav .m-sub a {
        display: inline-block; margin: 0 6px 6px 0; padding: 6px 11px;
        color: #ddd; font-size: 13px;
        border: 1px solid #4a4a4a; border-radius: 15px;
    }
    #wrapper #header .m-nav .m-sub a:hover { color: #fff; border-color: #11bdb2; }

    /* 홈/동사섭/로그인/회원가입 아이콘 줄 */
    #wrapper #header .m-util { margin: 0; padding: 14px 10px 4px; text-align: center; }
    #wrapper #header .m-util li { display: inline-block; float: none; padding: 0; border: 0; }
    #wrapper #header .m-util li a { display: inline-block; padding: 10px 14px; }
    #wrapper #header .m-util li a:hover { background: none; }
    #wrapper #header .m-util li img { display: block; max-width: none; }

    /* ---------- 메인 비주얼 (슬라이드) ---------- */
    #main-visual-box { display: block !important; min-width: 0 !important; height: auto !important; }
    #main-visual-box #pop-visual-img { height: auto !important; }
    #main-visual-box #pop-visual-img .slidesjs-container,
    #main-visual-box #pop-visual-img .slidesjs-container .slidesjs-control { min-height: 0 !important; max-height: none !important; }
    #main-visual-box #pop-visual-img .slidesjs-slide { height: auto !important; min-width: 0 !important; }
    #main-visual-box #pop-visual-img img { display: block; width: 100%; height: auto; margin: 0 auto; }
    #main-visual-box .option-box { display: none; }
    #main-visual-box .slidesjs-navigation { display: none !important; }
    #main-visual-box .slidesjs-pagination { top: -18px !important; }

    /* ---------- 메인 컨텐츠 ---------- */
    #main_container { width: auto !important; top: 0 !important; min-height: 0; padding: 15px 12px 0; overflow: visible; }
    #main_container .main-top-box,
    #main_container .main-mid-box { width: auto !important; padding-bottom: 0; }
    #main_container .main-top-box .main-notice,
    #main_container .main-top-box .main-schedule,
    #main_container .main-mid-box .main-donghang,
    #main_container .main-mid-box .main-donation {
        float: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 130px;
        margin: 0 0 12px;
        padding: 18px 16px;
        -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    #main_container .main-top-box .main-notice .more,
    #main_container .main-mid-box .main-donation .more { left: auto !important; right: 16px !important; top: 18px; }
    #main_container .main-top-box .main-schedule .more,
    #main_container .main-mid-box .main-donghang .more { right: 16px !important; top: 18px; }
    #main_container .main-top-box .main-notice ul li { padding-right: 82px; padding-top: 11px; font-size: 14px; }
    #main_container .main-top-box .main-schedule { background-size: auto 100%; }
    #main_container .main-top-box .main-schedule ul li { float: none; padding: 12px 0 0; }
    #main_container .main-mid-box .main-donghang { background-size: auto 100%; }
    #main_container .main-mid-box .main-donation p { padding-top: 20px; }

    /* '동영상 보러가기' / '지금 후원하기' 버튼 → 박스 우측 하단 */
    #main_container .main-mid-box .main-donghang,
    #main_container .main-mid-box .main-donation { padding-bottom: 60px; }
    #main_container .main-mid-box .main-donghang > p:last-of-type,
    #main_container .main-mid-box .main-donation > div.clear {
        position: absolute;
        right: 16px; bottom: 16px;
        padding: 0 !important; margin: 0;
        clear: none;
    }
    #main_container .main-mid-box .main-donghang > p:last-of-type img,
    #main_container .main-mid-box .main-donation > div.clear img { display: block; width: 100px; height: 30px; }
    #main_container .main-mid-box .main-donation p img { max-width: 100%; height: auto; }

    #main_container .main-mid-box .sns-box { padding: 6px 0 0; }
    #main_container .main-mid-box .sns-box ul { margin: 0 -4px; }
    #main_container .main-mid-box .sns-box ul li,
    #main_container .main-mid-box .sns-box ul li:first-child {
        float: left; width: 50%; padding: 4px;
        -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    /* 배너 4개 동일 크기 (국세청 배너는 원본 비율이 달라 PC와 같이 243x81 비율로 맞춤) */
    #main_container .main-mid-box .sns-box ul li img { display: block; width: 100%; height: auto; aspect-ratio: 243 / 81; object-fit: fill; }
    #main_container .main-mid-box .sns-box-media { display: none !important; }

    /* ---------- 서브 페이지 공통 ---------- */
    #wrapper #sub_visual { display: none; }
    #wrapper #container,
    #container {
        display: block !important;
        width: auto !important;
        top: 0 !important;
        min-height: 0;
        padding: 15px 12px 0;
        overflow: visible;
    }

    /* 좌측메뉴 → 본문 위 탭(칩) 형태 */
    #togglemenu, .toggleButton { display: none !important; }
    #container #leftmenu-zone {
        display: block !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        margin: 0 0 18px;
        overflow: visible !important;
    }
    #container #leftmenu-zone h3 { width: auto; height: auto; padding: 0 0 8px; }
    #container #leftmenu-zone h3 img { max-width: 100%; height: auto; }
    #container #leftmenu-zone #t,
    #container #leftmenu-zone .leftmenu { width: auto !important; border-top-width: 3px; padding: 10px 0 0; }
    #container #leftmenu-zone #t #tree,
    #container #leftmenu-zone .leftmenu > ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0; padding: 0; }
    #container #leftmenu-zone #t #tree > li,
    #container #leftmenu-zone .leftmenu > ul > li { border: 0 !important; margin: 0 6px 6px 0; padding: 0; }
    #container #leftmenu-zone #t #tree > li > span,
    #container #leftmenu-zone .leftmenu > ul > li > a {
        display: block; padding: 7px 12px !important;
        font-size: 13px !important; font-weight: bold;
        background: #f4f4f4 !important;
        border: 1px solid #ddd; border-radius: 16px;
    }
    #container #leftmenu-zone #t #tree li ul,
    #container #leftmenu-zone .leftmenu .left-depth { display: none !important; }
    #container #leftmenu-zone .leftmenu .leftmenu2,
    #container #leftmenu-zone #t .leftmenu2 { width: auto; float: none; }

    /* 본문 */
    #container #contents,
    #container #content_wide {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        position: relative;
    }
    #container #contents h4,
    #container #content_wide h4.title,
    .subtitle {
        width: auto !important;
        height: auto !important;
        min-height: 0;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }
    #container #contents h4 img,
    #container #content_wide h4 img,
    .subtitle img { max-width: 100%; height: auto; }

    /* 고정폭 요소가 화면을 넘지 않도록 */
    #contents div, #contents p, #contents ul, #contents ol, #contents li, #contents dl, #contents form, #contents fieldset, #contents section, #contents header, #contents table,
    #content_wide div, #content_wide p, #content_wide ul, #content_wide ol, #content_wide li, #content_wide dl, #content_wide form, #content_wide fieldset, #content_wide section, #content_wide header, #content_wide table {
        max-width: 100%;
        -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    #contents img, #content_wide img { max-width: 100% !important; height: auto !important; }
    #contents input[type=image], #content_wide input[type=image] { max-width: 100%; height: auto; }
    #contents input[type=text], #contents input[type=password], #contents input[type=email], #contents input[type=tel], #contents input[type=number], #contents select, #contents textarea,
    #content_wide input[type=text], #content_wide input[type=password], #content_wide input[type=email], #content_wide input[type=tel], #content_wide input[type=number], #content_wide select, #content_wide textarea {
        max-width: 100% !important;
        -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    #contents textarea, #content_wide textarea { width: 100% !important; }
    #contents pre, #content_wide pre { white-space: pre-wrap; word-break: break-all; }
    #contents, #content_wide { word-break: keep-all; overflow-wrap: break-word; word-wrap: break-word; }

    /* 표: 기본은 화면폭에 맞춤, 너무 넓으면 JS(.m-table-scroll)로 가로 스크롤 */
    #contents table, #content_wide table { width: 100% !important; }
    .m-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
    .m-table-scroll > table { width: auto !important; min-width: 100%; max-width: none !important; }

    /* 동영상/지도 iframe */
    #contents iframe, #content_wide iframe { max-width: 100% !important; }
    #contents iframe[src*="youtube"], #content_wide iframe[src*="youtube"],
    #contents iframe[src*="vimeo"], #content_wide iframe[src*="vimeo"] {
        width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
    }
    .auto-resizable-iframe,
    .resizable_w376, .resizable_w239, .resizable_w769, .resizable_w1000 { width: 100% !important; max-width: 100% !important; height: auto !important; }
    .auto-resizable-iframe > div,
    .resizable_w376 div, .resizable_w239 div, .resizable_w769 div, .resizable_w1000 div {
        height: 0 !important; padding-bottom: 56.25%; position: relative;
    }
    .auto-resizable-iframe > div iframe { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto; }

    /* 10분 동행 / 아카데미 목록 */
    .dongsasub_youtube li, .academy_list_wrap li {
        float: none !important; width: 100% !important; height: auto !important;
        margin: 0 0 18px !important; padding-bottom: 12px;
    }
    .dongsasub_youtube label, .academy_list_wrap label { padding: 12px 10px 0; }
    .youtube_detail01, .youtube_detail01_txt, .academy_detail01_txt { width: auto !important; }
    .academy_level2, .academy_level3 { width: 100% !important; }

    /* 게시판 */
    .board-list table { table-layout: auto; }
    .board-list th, .board-list td { padding-left: 4px !important; padding-right: 4px !important; }
    .board-list td.cont a { display: block; }
    .board-view .view-cont { overflow-x: auto; }
    .board-view .view-cont table { width: auto !important; }
    .comment-zone .comment-input .reply_btn { position: relative !important; margin-top: 6px; }
    .page_number, .board-bottom { overflow-x: auto; text-align: center; }
    .pagination { display: inline-block; white-space: nowrap; }
    .msr_search { height: auto !important; padding: 10px !important; }
    .msr_search .search_select { width: 26% !important; }
    .msr_search .s_text { width: 52% !important; height: 28px; }
    .msr_search .s_button { display: inline-block; }

    /* 행복갤러리: 2열 */
    .gallery-list { width: 100% !important; margin: 0 !important; overflow: hidden; }
    .gallery-list li, .gallery-list li.first {
        float: left !important;
        width: 50% !important;
        margin: 0 0 14px !important;
        padding: 0 5px !important;
        -webkit-box-sizing: border-box; box-sizing: border-box;
    }
    .gallery-list li:nth-child(2n+1) { clear: left; }
    .gallery-list li div { width: 100% !important; height: auto !important; aspect-ratio: 214 / 134; overflow: hidden; }
    .gallery-list li div img { width: 100% !important; height: 100% !important; object-fit: cover; }
    .gallery-list li p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* 신청서/회원가입 폼 */
    .application-con .top-script { float: none; }
    .dn-form th, .dn-form td, .dn-form2 th, .dn-form2 td { padding-left: 8px; padding-right: 4px; }

    /* 재단법인 행복마을 */
    .happyvillage, .purpose { width: 100% !important; }

    /* ---------- 팝업 레이어 ---------- */
    .pop-layer { width: 92% !important; left: 4% !important; margin-left: 0 !important; -webkit-box-sizing: border-box; box-sizing: border-box; }

    /* ---------- 푸터 ---------- */
    #footer { margin-top: 30px; }
    #footer .footer_zone { width: auto !important; padding: 22px 14px 30px; text-align: center !important; font-size: 12px; line-height: 1.6; }
    #footer .footer_zone .logo img { max-width: 100%; height: auto; }
    #footer .footer_zone .footer_menu,
    #footer .footer_zone address {
        position: static !important; float: none !important;
        top: auto !important; right: auto !important;
        margin: 12px 0 0;
    }
    #footer .footer_zone {
        display: -webkit-flex; display: flex;
        -webkit-flex-direction: column; flex-direction: column;
        -webkit-align-items: center; align-items: center;
    }
    #footer .footer_zone .logo img { width: 240px; }
    /* 약관 메뉴: 2열 정렬 */
    #footer .footer_zone .footer_menu {
        display: -webkit-flex; display: flex;
        -webkit-flex-wrap: wrap; flex-wrap: wrap;
        -webkit-justify-content: center; justify-content: center;
        width: 100%; max-width: 360px; margin: 14px 0 0; padding: 0;
    }
    #footer .footer_zone .footer_menu li,
    #footer .footer_zone .footer_menu li:first-child {
        float: none; height: auto; width: 50%;
        padding: 5px 2px; background: none;
        -webkit-box-sizing: border-box; box-sizing: border-box;
        font-size: 12px; line-height: 1.4; white-space: nowrap;
    }
    #footer .footer_zone .footer_menu li b { font-size: 12px !important; }
    /* 재단 정보: 항목별 한 줄씩 */
    #footer .footer_zone .foot-info {
        margin-top: 16px !important; padding-top: 14px;
        border-top: 1px solid #dcdcdc; width: 100%; max-width: 360px;
    }
    #footer .footer_zone .foot-info .foot-name { display: block; font-size: 13px; margin-bottom: 6px; }
    #footer .footer_zone .foot-info p { margin: 0; line-height: 1.75; word-break: keep-all; }
    #footer .footer_zone .foot-info .pc-br { display: none; }
    #footer .footer_zone .foot-info .fi { display: block; }
    #footer .footer_zone .foot-info a { color: inherit; text-decoration: underline; }
    /* 저작권 문구는 맨 아래로 */
    #footer .footer_zone address {
        -webkit-order: 10; order: 10;
        margin: 14px 0 0; font-size: 11px; color: #888; font-style: normal;
    }
}

/* 작은 휴대폰 (600px 이하) */
@media (max-width: 600px) {
    /* 게시판 목록: 파일/작성자 칸 숨김 */
    .board-list col.file, .board-list .file,
    .board-list col.writer, .board-list .writer { display: none; }
    .board-list col.num { width: 48px; }
    .board-list col.date { width: 82px; }
    .board-list td.date { font-size: 12px; }

    /* 신청서/회원가입: 라벨을 위로 */
    .dn-form2 th { display: none; }
    .member .join table th, .member .join_input table th { display: none; }
    .member .join table td, .member .join_input table td { width: 100%; padding-left: 1em; }
    .application-con .top-script { display: none; }
    .top-script-mobile { display: block !important; padding: 0 0 20px 10px; }
}

@media (min-width: 1024px) {
    .top-script-mobile, .gender-mobile { display: none; }
}