@charset "utf-8";
/* ============================================================
   재단법인 비웰공익재단 (dbcom91) — 반응형
   PC 디자인(1920/콘텐츠 1200)을 좁은 폭에 맞춰 줄인다.
   레이아웃을 새로 설계하지 않는다. 가로 스크롤이 생기지 않는 것이 기준이다.
   ============================================================ */

@media screen and (max-width:1240px){
    :root{--wrap:100%}
    .hd_contaner,#snb,#container,#container02,.hero_text,.main_quick_in,
    #ft_link #container_1200,#ft_wr{width:100%;padding-left:20px;padding-right:20px}
    #container,#container02{padding-bottom:90px}

    /* 상단 — 1차 메뉴만, 간격을 줄인다 */
    #hd_wrapper{gap:20px;justify-content:space-between}
    #logo > a{gap:10px}
    #logo img{height:34px}
    #logo .logo_txt{font-size:19px}
    #gnb_1dul{width:auto;gap:4px}
    .gnb_1dli{width:auto}
    .gnb_1da{padding:0 16px;font-size:17px}
    #tnb{position:static;transform:none;flex:none}

    /* 메인 */
    .main_visual .bxslider > li{height:620px}
    .hero_text{padding-top:170px}
    .hero_text strong{font-size:36px}
    .hero_text p{font-size:16px}
    .hero_wave{width:120%;height:110px}
    .main_quick h2{height:52px}
    .quick_links li{width:25%}
    .quick_links li a{height:300px}
    .quick_links .q_txt{padding:32px 0 0 24px}

    /* 서브 공통 */
    .sub_top{height:250px}
    .sub_top_text{width:100%;padding:0 20px}
    .sub_top_text strong{font-size:30px}
    .sub_top_text p{font-size:17px}
    #snb .snb2d > a{min-width:0;padding:0 20px;font-size:17px}
    .navi_wrap h2{font-size:30px;line-height:38px}
    .sub_page{margin-top:50px}

    /* 서브 개별 */
    .greeting_img{margin-bottom:46px}
    .greeting_img img{height:auto;max-height:428px}
    .greeting_body{gap:40px}
    .greeting_body .g_lead{width:38%;padding-left:0;font-size:28px}
    .vm_card{width:calc(50% - 12px);padding:36px}
    .vm_card .vm_tit{font-size:24px}
    .value_item{width:calc((100% - 48px)/3);padding:36px 24px}
    .ci_name{gap:40px}
    .ci_logo{width:40%;height:240px}
    .ci_logo img{width:72%}
    .org_wrap{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:30px}
    .program_card{width:calc(50% - 12px)}
    .program_card .p_img{height:auto;aspect-ratio:588/260}
}

@media screen and (max-width:1024px){
    /* 1차 메뉴를 접고 모바일 드로어로 넘긴다 */
    #hd_wrapper{height:70px;gap:0}
    #logo > a{gap:8px}
    #logo img{height:30px}
    #logo .logo_txt{font-size:18px;letter-spacing:-.6px}
    #mobile_open{display:block;order:2;margin-left:auto;font-size:26px;color:var(--navy);cursor:pointer;line-height:1}
    #gnb{display:none}
    #tnb{display:none}

    #aside{position:fixed;left:-305px;top:0;width:280px;height:100%;margin:0;padding:70px 0 20px;background:#2b2b2b;z-index:1000000000;overflow-y:auto}
    .close_menu{position:fixed;display:block;height:0;top:14px;left:-30px;z-index:1000000001}
    .close_menu > i{font-size:34px;color:#fff;cursor:pointer}
    .mobile_tnb{display:flex;gap:8px;padding:0 16px 14px;border-bottom:1px solid #444}
    .mobile_tnb li{flex:1}
    .mobile_tnb a{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid #555;border-radius:4px;color:#fff;font-size:15px}
    .mobile_menu{display:block}
    .mobile_menu > ul{padding-bottom:15px}
    .mobile_menu > ul > li{position:relative;width:100%;padding:14px 0 0}
    .mobile_menu > ul > li > i{position:absolute;right:16px;top:16px;color:#fff;font-size:20px;cursor:pointer}
    .mobile_menu > ul > li > ul{display:none;margin-top:12px;padding:6px 0 10px;background:#1f1f1f}
    .mobile_menu > ul > li > ul > li{width:100%;padding:9px 16px 0 22px}
    .mobile_menu > ul > li > ul > li a{color:#ddd;font-size:15px}
    .mobile_menu > ul > li > ul > li > a:hover{color:#fff;font-weight:700}
    .mobile_menu .gnb_1da{display:block;height:auto;margin-left:16px;color:#fff;font-size:17px;font-weight:600}
    .mobile_menu .gnb_1da:after{display:none}

    .main_visual .bxslider > li{height:520px}
    .hero_text{padding-top:140px}
    .hero_text strong{font-size:30px}
    .main_quick h2{height:44px}
    .quick_links li a{height:260px}
    .quick_links .q_en{font-size:21px}
    .quick_links .q_ko{font-size:16px}

    .greeting_body{display:block}
    .greeting_body .g_lead{width:100%;font-size:26px}
    .greeting_body .g_txt{margin-top:28px}
    .org_wrap{grid-template-columns:minmax(0,1fr)}
    .org_panel{padding:48px 20px}
    .map_wrap,.map_wrap .root_daum_roughmap .wrap_map{height:380px !important}
}

@media screen and (max-width:768px){
    .sub_top{height:190px}
    .sub_top_text strong{font-size:24px}
    .sub_top_text p{font-size:15px}
    #snb .snb2dul{flex-wrap:wrap}
    #snb .snb2d{width:50%;border-bottom:1px solid var(--line-strong)}
    #snb .snb2d:nth-child(2n){border-right:0}
    #snb .snb2d > a{height:50px;padding:0 10px;font-size:15px}
    .navi_wrap{padding:36px 0 0}
    .navi_wrap h2{font-size:25px;line-height:32px}
    .sub_page{margin-top:36px;font-size:14px}

    .main_visual .bxslider > li{height:420px}
    .hero_text{padding-top:110px}
    .hero_text strong{font-size:24px}
    .hero_text p{margin-top:10px;font-size:14px}
    .hero_wave{height:70px}
    .main_quick{padding:10px 0 40px}
    .main_quick h2{height:38px}
    .quick_links{flex-wrap:wrap;margin-top:24px}
    .quick_links li{width:50%}
    .quick_links li a{height:200px}
    .quick_links .q_txt{padding:24px 0 0 20px}
    .quick_links .q_ko{margin-top:8px}

    .vm_row{display:block}
    .vm_card{width:100%;padding:28px}
    .vm_card + .vm_card{margin-top:16px}
    .vm_card .vm_tit{font-size:21px}
    .vm_card .vm_txt{font-size:15px}
    .core_values{margin-top:44px}
    .core_values > h3{font-size:22px}
    .value_row{display:block;margin-top:20px}
    .value_item{width:100%;padding:28px 20px}
    .value_item + .value_item{margin-top:12px}

    /* 명칭과 CI소개 */
    .ci_tit{margin-bottom:24px;font-size:24px}
    .ci_name{display:block}
    .ci_logo{width:100%;height:200px}
    .ci_logo img{width:260px;max-width:72%}
    .ci_desc{margin-top:28px}
    .ci_desc dt{font-size:18px}
    .ci_desc dd{font-size:15px}
    .ci_desc dd + dt{margin-top:24px}

    /* 조직도 — 절대배치를 풀고 세로로 쌓는다 */
    .officer_tbl{font-size:15px}
    .officer_tbl th{height:48px}
    .officer_tbl td{height:46px}
    .org_panel{padding:28px 20px}
    .org_chart{width:100%;height:auto;padding:0}
    .org_box{position:static;width:100%;max-width:280px;margin:0 auto;font-size:17px}
    .org_box.is_board{margin-top:14px}
    .org_box.is_exec{margin-top:14px}
    .org_line_v,.org_line_h{display:none}

    .map_wrap,.map_wrap .root_daum_roughmap .wrap_map{height:300px !important}
    .map_info{display:block;margin-top:20px;padding:0;font-size:15px}
    .map_info dt{margin-top:10px}
    .map_info dt:first-child{margin-top:0}

    .program_lead{font-size:16px}
    .program_grid{display:block;margin-top:28px}
    .program_card{width:100%}
    .program_card + .program_card{margin-top:16px}
    .program_card .p_body{padding:22px 20px}
    .program_card .p_tit{font-size:19px}
    .program_card .p_txt{font-size:15px}

    .greeting_img{margin-bottom:30px}
    .greeting_body .g_lead{font-size:21px}
    .greeting_body .g_txt{font-size:14px;line-height:1.85}
    .g_sign em{font-size:32px}

    /* 하단 */
    #ft_link #container_1200{flex-wrap:wrap;gap:8px 18px;height:auto;padding-top:14px;padding-bottom:14px}
    #ft_wr{padding:24px 20px 30px}
    .ft_wrap{display:block}
    .ft_text{font-size:12px}
    .ft_call{margin-top:20px;text-align:left}
    .ft_call strong{font-size:22px}
    #ft_copy{margin-top:26px}
    #top_btn{right:12px;bottom:12px;width:42px;height:42px;line-height:38px}
}

@media screen and (max-width:480px){
    /* 회원 스킨이 400px 고정폭이라 좁은 폭에서 가로 스크롤이 생긴다 */
    #container .mbskin{width:100%;max-width:100%}
    #logo > a{gap:6px}
    #logo img{height:24px}
    #logo .logo_txt{font-size:16px}
    .quick_links li{width:100%}
    .quick_links li a{height:170px}
    #snb .snb2d{width:100%;border-right:0}
    .main_visual .bxslider > li{height:360px}
    .hero_text strong{font-size:21px}
}