@charset "utf-8";

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight:400;
    font-display:swap;
}
@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight:500;
    font-display:swap;
}
@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight:600;
    font-display:swap;
}
@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight:700;
    font-display:swap;
}

:root {
    --yh-navy: #0f2340;
    --yh-navy-mid: #1a3358;
    --yh-navy-light: #2a4a7a;
    --yh-accent: #4a7fd4;
    --yh-gray-bg: #eef0f3;
    --yh-text: #222;
    --yh-text-sub: #666;
}

html {
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
}
body.yh_body {
    font-family:'Pretendard', sans-serif;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:rgba(26,51,88,.12);
}

body.yh_body img,
body.yh_body video {
    max-width:100%;
    height:auto;
}
body.yh_body iframe,
body.yh_body embed,
body.yh_body object {
    max-width:100%;
}

.yh_inner {max-width:1200px;margin:0 auto;padding:0 20px}

#container_wr.yh_main_container_wr {max-width:100%;width:100%;padding:0}
#container.yh_main_container {position:static;float:none;width:100%;margin:0;min-height:auto}

/* ===== 헤더 ===== */
#hd.yh_hd {background:#fff;position:relative;z-index:1000;min-width:0}
#wrapper, #ft.yh_ft {min-width:0;width:100%}

#hd_top {border-bottom:1px solid #eee;background:#fff}
#hd_top .yh_inner {display:flex;align-items:center;justify-content:flex-end;height:36px}
.hd_util {display:flex;align-items:center}
.hd_util li {position:relative;padding:0 12px}
.hd_util li:not(:last-child):after {content:"";position:absolute;right:0;top:50%;width:1px;height:12px;background:#ddd;transform:translateY(-50%)}
.hd_util li a {display:flex;align-items:center;gap:5px;font-size:12px;color:#666;transition:color .2s}
.hd_util li a:hover {color:var(--yh-navy-mid)}
.hd_util li a i {font-size:11px;color:var(--yh-navy-light)}
.hd_lang {display:flex;align-items:center;margin-left:20px;gap:0}
.hd_lang li a {display:block;padding:0 8px;font-size:12px;color:#999;cursor:pointer}
.hd_lang li.active a {color:#333;font-weight:700}
.hd_lang li + li {border-left:1px solid #ddd}

/* 구글 번역 위젯: 셀렉트는 유지하고 상단 바만 숨김 (display:none 사용 금지) */
#yh_google_translate {position:absolute!important;left:-9999px!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
html, html body,
html.translated-ltr, html.translated-ltr body,
html.translated-rtl, html.translated-rtl body {top:0!important;position:static!important}
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd {visibility:hidden!important;opacity:0!important;pointer-events:none!important;height:0!important;max-height:0!important;border:0!important;position:absolute!important;top:-9999px!important;left:-9999px!important}
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-te-spinner-pos {visibility:hidden!important;opacity:0!important;pointer-events:none!important}

#hd_main {border-bottom:1px solid #eee}
#hd_main .yh_inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    height:72px;
    position:relative;
    box-sizing:border-box;
}
/* default.css #logo { float; padding-top:30px } 초기화 */
#hd.yh_hd #hd_main #logo {
    float:none;
    flex-shrink:0;
    padding:0;
    margin:0;
    display:flex;
    align-items:center;
    align-self:stretch;
    height:auto;
}
#hd.yh_hd #logo a {
    display:flex;
    align-items:center;
    line-height:1;
}
#hd.yh_hd #logo img,
#hd.yh_hd #logo .yh_logo_img {
    display:block;
    height:36px;
    width:auto;
    max-width:min(200px, 48vw);
    object-fit:contain;
    object-position:left center;
}
#hd.yh_hd .yh_logo_text {font-size:20px;font-weight:700;color:var(--yh-navy);letter-spacing:-.5px;line-height:1}

#gnb {flex:1;display:flex;justify-content:flex-end;align-items:center;min-width:0}
#gnb #gnb_1dul {display:flex;align-items:center;justify-content:flex-end;float:none;padding:0;margin:0;border:0}
#gnb .gnb_1dli {position:relative;float:none;line-height:normal;padding:0;display:flex;align-items:center}
#gnb .gnb_1da {
    display:flex;
    align-items:center;
    height:72px;
    padding:0 20px;
    font-size:16px;
    font-weight:500;
    color:#444;
    line-height:1.3;
    white-space:nowrap;
    transition:color .2s;
    box-sizing:border-box;
}
#gnb .gnb_1dli:hover > .gnb_1da {color:var(--yh-navy)}
#gnb .gnb_2dul {display:none;position:absolute;top:100%;left:50%;min-width:200px;transform:translateX(-50%);z-index:10}
#gnb .gnb_1dli:hover .gnb_2dul {display:block}
#gnb .gnb_2dul_box {background:#fff;border:1px solid #eee;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.08);overflow:hidden}
#gnb .gnb_2da {display:block;padding:0 20px;line-height:44px;font-size:14px;color:#444;white-space:nowrap;transition:all .2s}
#gnb .gnb_2da:hover {background:#f0f4fa;color:var(--yh-navy-mid)}

.gnb_mobile_btn {
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:0;
    background:none;
    font-size:22px;
    color:#333;
    cursor:pointer;
    flex-shrink:0;
    margin-left:4px;
}

#gnb_mobile {position:fixed;top:0;right:-500px;width:300px;height:100%;background:#fff;z-index:10001;overflow-y:auto;transition:right .3s ease;box-shadow:-4px 0 20px rgba(0,0,0,.1)}
#gnb_mobile.active {right:0}
.gnb_mobile_head {display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee}
.gnb_mobile_head strong {font-size:16px;color:#222}
.gnb_mobile_close {width:36px;height:36px;border:0;background:none;font-size:20px;color:#666;cursor:pointer}
.gnb_mobile_list > li {border-bottom:1px solid #f0f0f0}
.gnb_mobile_list > li > a {display:block;padding:14px 20px;font-size:15px;font-weight:600;color:#222}
.gnb_mobile_list ul {background:#f9f9f9;padding:4px 0;display:none}
.gnb_mobile_list > li.open > ul {display:block}
.gnb_mobile_list ul li a {display:block;padding:10px 20px 10px 32px;font-size:14px;color:#666}
#gnb_mobile_bg {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:10000}
#gnb_mobile_bg.active {display:block}
body.gnb_open {overflow:hidden}

/* ===== 푸터 ===== */
#ft.yh_ft {position:relative;z-index:2;background:var(--yh-navy);color:rgba(255,255,255,.75)}
.yh_ft_inner {display:flex;align-items:flex-start;justify-content:space-between;padding:48px 20px 36px;gap:40px}
.yh_ft_logo img,
.yh_ft_logo .yh_logo_img {display:block;height:36px;width:auto;max-width:200px;object-fit:contain}
.yh_ft_logo--color a {
    display:inline-block;
    background:#fff;
    padding:10px 14px;
    border-radius:8px;
}
.yh_ft_logo--color .yh_logo_img {height:32px}
.yh_ft_logo .yh_logo_text {color:#fff;font-size:20px}
.yh_ft_info {flex:1;font-size:13px;line-height:1.9}
.yh_ft_info strong {color:#fff;font-weight:700;font-size:14px}
.yh_ft_info a {color:rgba(255,255,255,.85);text-decoration:none}
.yh_ft_info a:hover {text-decoration:underline}
.yh_ft_sns {display:flex;gap:12px;flex-shrink:0}
.yh_ft_sns a {display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.25);border-radius:50%;color:#fff;font-size:16px;transition:all .2s}
.yh_ft_sns a:hover {background:#fff;color:var(--yh-navy)}
.yh_ft_copy {border-top:1px solid rgba(255,255,255,.12);padding:16px 20px;text-align:center;font-size:12px;color:rgba(255,255,255,.5)}
.yh_ft_copy strong {color:rgba(255,255,255,.8)}

#top_btn {position:fixed;bottom:20px;right:20px;width:48px;height:48px;line-height:44px;border:1px solid #ddd;border-radius:50%;color:#666;text-align:center;font-size:16px;z-index:90;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .2s}
#top_btn:hover {border-color:var(--yh-navy-mid);background:var(--yh-navy-mid);color:#fff}

/* ===== 메인 공통 ===== */
#yh_main {width:100%}
#yh_main .yh_section_head {margin-bottom:36px;text-align:center}
#yh_main .yh_section_head h2 {font-size:28px;font-weight:700;color:var(--yh-text);line-height:1.35}
#yh_main .yh_section_head p {margin-top:10px;font-size:15px;color:var(--yh-text-sub);line-height:1.6}
#yh_main .yh_section_head_link {
    display:inline-flex;align-items:center;gap:6px;margin-top:14px;
    font-size:14px;font-weight:600;color:var(--yh-navy-mid);text-decoration:none;
}
#yh_main .yh_section_head_link:hover {color:var(--yh-accent)}

/* 메인 비주얼 — 이미지는 뷰포트에 고정, 섹션이 윈도우처럼 스크롤됨 */
.yh_main_visual {position:relative;width:100%;height:520px;overflow:hidden;z-index:0}
.yh_main_visual_slider {position:relative;width:100%;height:100%}
.yh_main_visual_slide {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .6s ease, visibility .6s}
.yh_main_visual_slide.active {opacity:1;visibility:visible;z-index:1}
.yh_main_visual_bg {position:absolute;inset:0;z-index:0}
.yh_main_visual_bg:after {content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg, rgba(15,35,64,.72) 0%, rgba(15,35,64,.25) 55%, transparent 100%)}
body.yh_body .yh_main_visual_bg img {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center center;
    display:block;
    pointer-events:none;
}
.yh_main_visual_txt {
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-bottom:40px;
}
.yh_main_visual_txt h2 {font-size:36px;font-weight:700;color:#fff;line-height:1.45;letter-spacing:-.5px;text-align:left}
.yh_main_visual_txt p {margin-top:18px;font-size:15px;color:rgba(255,255,255,.88);line-height:1.7;text-align:left;max-width:520px}
.yh_main_visual_btn {display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:14px 28px;background:#fff;color:var(--yh-navy);font-size:15px;font-weight:600;border-radius:999px;width:fit-content;transition:all .2s;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.yh_main_visual_btn:hover {background:var(--yh-navy);color:#fff}
.yh_main_visual_btn i {font-size:12px}

.yh_main_visual_ctrl {display:none;position:absolute;bottom:32px;left:50%;transform:translateX(-50%);width:100%;max-width:1200px;align-items:center;justify-content:space-between;z-index:3;padding:0 20px}
.yh_main_visual_ctrl.is-multi {display:flex}
.yh_main_visual_count {font-size:14px;color:rgba(255,255,255,.65)}
.yh_main_visual_count em {font-style:normal;font-size:18px;font-weight:700;color:#fff}
.yh_main_visual_arrows {display:flex;gap:8px}
.yh_main_visual_prev,
.yh_main_visual_next {width:40px;height:40px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:13px;cursor:pointer;transition:all .2s}
.yh_main_visual_prev:hover,
.yh_main_visual_next:hover {background:rgba(255,255,255,.22)}

/* 창호 시스템 */
.yh_window_system {position:relative;z-index:2;padding:88px 0;background:#fff}
.yh_window_grid {display:grid;grid-template-columns:280px 1fr 240px;gap:32px;align-items:center}
.yh_window_intro h2 {font-size:26px;font-weight:700;color:var(--yh-text);line-height:1.4}
.yh_window_intro p {margin-top:14px;font-size:14px;color:var(--yh-text-sub);line-height:1.7}
.yh_window_intro .yh_btn_line {display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:12px 22px;border:1px solid var(--yh-navy);color:var(--yh-navy);font-size:14px;font-weight:600;border-radius:4px;transition:all .2s}
.yh_window_intro .yh_btn_line:hover {background:var(--yh-navy);color:#fff}
.yh_window_visual {position:relative;aspect-ratio:1/1;max-height:380px;background:#f4f6f9;border-radius:12px;overflow:hidden}
.yh_window_panel {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s;
}
.yh_window_panel.active {opacity:1;visibility:visible;z-index:1;pointer-events:auto}
.yh_window_panel:not(.active) {pointer-events:none}
.yh_window_panel_link {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:36px;
    color:inherit;
}
.yh_window_panel_link img {max-width:72%;max-height:72%;width:auto;height:auto;object-fit:contain;display:block;transition:transform .25s ease}
.yh_window_panel_link:hover img {transform:scale(1.02)}
.yh_window_panel_more {
    position:absolute;
    right:16px;
    bottom:16px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    background:rgba(15,35,64,.82);
    color:#fff;
    font-size:12px;
    font-weight:600;
    border-radius:999px;
    opacity:0;
    transform:translateY(6px);
    transition:opacity .2s, transform .2s;
}
.yh_window_panel_link:hover .yh_window_panel_more,
.yh_window_panel_link:focus .yh_window_panel_more {opacity:1;transform:translateY(0)}
.yh_window_panel_empty {text-align:center;color:#b0b8c4}
.yh_window_panel_empty i {font-size:80px;display:block;margin-bottom:12px}
.yh_window_panel_empty p {font-size:14px;margin:0}
.yh_window_tabs {display:flex;flex-direction:column;gap:0;border:1px solid #e8eaed;border-radius:8px;overflow:hidden;position:relative;z-index:2}
.yh_window_tab {display:flex;align-items:center;gap:12px;padding:18px 20px;background:#fff;border:0;border-bottom:1px solid #eee;text-align:left;cursor:pointer;transition:background .2s;width:100%;position:relative;z-index:1;text-decoration:none;box-sizing:border-box}
.yh_window_tab:last-child {border-bottom:0}
.yh_window_tab_num {font-size:13px;font-weight:700;color:var(--yh-navy-light);min-width:22px}
.yh_window_tab_tit {font-size:14px;font-weight:600;color:#444;line-height:1.4}
.yh_window_tab.active {background:var(--yh-navy)}
.yh_window_tab.active .yh_window_tab_num,
.yh_window_tab.active .yh_window_tab_tit {color:#fff}

/* 시공사례 */
.yh_main_cases {position:relative;z-index:2;padding:88px 0;background:var(--yh-gray-bg)}
.yh_main_cases .yh_section_head {text-align:left}
.yh_case_cards {display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}
.yh_case_card {display:block;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .2s, box-shadow .2s;color:inherit}
.yh_case_card:hover {transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.1);color:inherit}
.yh_case_card_thumb {aspect-ratio:16/10;background:#2a3544;overflow:hidden}
.yh_case_card_thumb img {width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.yh_case_card_body {padding:20px 22px 24px}
.yh_case_card_body h3 {font-size:17px;font-weight:700;color:var(--yh-text)}
.yh_case_card_body p {margin-top:8px;font-size:13px;color:var(--yh-text-sub);line-height:1.5}
.yh_case_more_wrap {margin-top:40px;text-align:center}
.yh_case_more {display:inline-flex;align-items:center;justify-content:center;min-width:220px;padding:14px 32px;background:var(--yh-navy);color:#fff;font-size:15px;font-weight:600;border-radius:4px;transition:background .2s}
.yh_case_more:hover {background:var(--yh-navy-mid);color:#fff}

/* 공지 · 새소식 · 고객문의 */
.yh_main_info {position:relative;z-index:2;padding:88px 0;background:#fff}
.yh_info_grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:28px}
.yh_info_box {border:1px solid #e8eaed;border-radius:10px;padding:28px 26px;min-height:320px}
.yh_info_box_head {display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--yh-navy)}
.yh_info_box_head h3 {font-size:18px;font-weight:700;color:var(--yh-text)}
.yh_info_box_head a {font-size:13px;color:var(--yh-text-sub);display:flex;align-items:center;gap:4px}
.yh_info_box_head a:hover {color:var(--yh-navy-mid)}
.yh_info_list li {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #f0f0f0;font-size:14px}
.yh_info_list li:last-child {border-bottom:0}
.yh_info_list a {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
.yh_info_list a:hover {color:var(--yh-navy-mid)}
.yh_info_list .date {flex-shrink:0;font-size:12px;color:#999}

.yh_contact_box {background:linear-gradient(145deg, var(--yh-navy) 0%, var(--yh-navy-mid) 100%);border:0;color:#fff}
.yh_contact_box .yh_info_box_head {border-bottom-color:rgba(255,255,255,.2)}
.yh_contact_box .yh_info_box_head h3 {color:#fff}
.yh_contact_tel {display:flex;align-items:center;gap:12px;margin-top:8px;font-size:28px;font-weight:700;color:#fff;letter-spacing:-.5px}
.yh_contact_tel a {color:#fff}
.yh_contact_tel i {font-size:22px;opacity:.9}
.yh_contact_hours {margin-top:16px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.8)}
.yh_contact_btns {display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.yh_contact_btns a {flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:6px;font-size:13px;font-weight:600;color:#fff;transition:background .2s}
.yh_contact_btns a:hover {background:rgba(255,255,255,.22);color:#fff}

/* 공식채널 & 파트너 */
.yh_main_channel {position:relative;z-index:2;padding:80px 0 100px;background:#f6f7f9}
.yh_channel_wrap {display:flex;align-items:stretch;gap:0;padding:28px;background:#fff;border:1px solid #e6e9ed;border-radius:16px;box-shadow:0 8px 30px rgba(15,35,64,.05)}
.yh_channel_sns {display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;flex:0 0 480px;padding-right:28px;border-right:1px solid #edf0ee}
.yh_channel_sns a {display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:120px;padding:12px 8px;border:1px solid transparent;border-radius:11px;color:#555;transition:transform .2s, border-color .2s, box-shadow .2s}
.yh_channel_sns a:hover {transform:translateY(-3px);border-color:#dce4ef;box-shadow:0 7px 18px rgba(15,35,64,.08)}
.yh_channel_sns a img {display:block;width:58px;height:58px;margin-bottom:2px;object-fit:contain}
.yh_channel_sns a i {font-size:42px;line-height:1}
.yh_channel_sns a strong {font-size:15px;font-weight:700;color:#222;text-align:center;line-height:1.25}
.yh_channel_sns a span {font-size:11px;color:#888}
.yh_sns_blog i {color:#03c75a}
.yh_sns_insta i {color:#e1306c}
.yh_sns_youtube i {color:#ff0000}
.yh_sns_shop i {color:var(--yh-navy-light)}

.yh_channel_partner {flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding-left:28px}
.yh_partner_slider_wrap {flex:1;min-width:0;overflow:hidden}
.yh_partner_slider li {height:88px;display:flex!important;align-items:center;justify-content:center;padding:12px}
.yh_partner_slider li img {max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .25s, opacity .25s}
.yh_partner_slider li:hover img {filter:grayscale(0);opacity:1}
.yh_partner_empty {color:#999;font-size:13px}
.yh_partner_prev,
.yh_partner_next {flex-shrink:0;width:38px;height:38px;border:1px solid #dfe5e1;border-radius:50%;background:#fff;color:#777;font-size:12px;cursor:pointer;transition:all .2s}
.yh_partner_prev:hover,
.yh_partner_next:hover {border-color:var(--yh-navy-mid);background:var(--yh-navy-mid);color:#fff}

/* 서브페이지 레이아웃 (그누보드 기본) */
#container_wr:not(.yh_main_container_wr) {max-width:1200px;margin:0 auto;padding:0 20px}
#container:not(.yh_main_container) {float:none;width:100%;margin:20px 0}
#container_wr:has(.yh_sub_page),
#container_wr:has(.yh_board_page) {max-width:100%;width:100%;padding-left:0;padding-right:0}

/* ===== 반응형 ===== */
@media (max-width:1200px) {
    .yh_inner {padding:0 16px}
    #gnb .gnb_1da {padding:0 18px;font-size:15px}
    .yh_window_grid {grid-template-columns:240px 1fr 220px;gap:24px}
}

@media (max-width:1024px) {
    #gnb {display:none}
    .gnb_mobile_btn {
        display:flex;
        align-items:center;
        justify-content:center;
    }
    #gnb_mobile {
        width:min(320px, 100%);
        padding-bottom:env(safe-area-inset-bottom);
    }
    .gnb_mobile_list > li.has_sub > a {position:relative;padding-right:44px}
    .gnb_mobile_list > li.has_sub > a:after {
        content:"\f078";
        font-family:"Font Awesome 5 Free";
        font-weight:900;
        position:absolute;
        right:20px;
        top:50%;
        transform:translateY(-50%);
        font-size:12px;
        color:#999;
        transition:transform .2s;
    }
    .gnb_mobile_list > li.has_sub.open > a:after {
        transform:translateY(-50%) rotate(180deg);
    }

    #aside {display:none !important}
    #container:not(.yh_main_container) {float:none;width:100%;max-width:100%}

    #yh_main .yh_section_head h2 {font-size:24px}
    #yh_main .yh_section_head {margin-bottom:28px}

    .yh_main_visual {height:440px}
    .yh_main_visual_txt h2 {font-size:30px}
    .yh_main_visual_txt {align-items:flex-start;text-align:left}

    .yh_window_system {padding:64px 0}
    .yh_window_grid {
        grid-template-columns:1fr 1fr;
        grid-template-areas:
            "intro intro"
            "visual tabs";
        gap:24px;
        align-items:stretch;
    }
    .yh_window_intro {grid-area:intro}
    .yh_window_visual {grid-area:visual;max-height:none;aspect-ratio:4/3}
    .yh_window_panel_link {padding:24px}
    .yh_window_panel_link img {max-width:80%;max-height:80%}
    .yh_window_tabs {grid-area:tabs;align-self:stretch}
    .yh_window_tab {padding:14px 16px}

    .yh_main_cases,
    .yh_main_info {padding:64px 0}
    .yh_main_channel {padding:64px 0 80px}

    .yh_case_cards {grid-template-columns:repeat(2, 1fr);gap:20px}

    .yh_info_grid {
        grid-template-columns:1fr 1fr;
        gap:20px;
    }
    .yh_contact_box {grid-column:1 / -1;min-height:auto}

    .yh_channel_wrap {flex-direction:column;padding:22px}
    .yh_channel_sns {
        flex:none;width:100%;
        grid-template-columns:repeat(4, 1fr);
        padding:0 0 20px;
        border-right:0;
        border-bottom:1px solid #edf0ee;
    }
    .yh_channel_partner {padding:20px 0 0;padding-left:0}

    #container_wr:not(.yh_main_container_wr) {padding:0 16px}
    #container_wr:has(.yh_sub_page),
    #container_wr:has(.yh_board_page) {padding-left:0;padding-right:0}
}

@media (max-width:768px) {
    .yh_inner {padding:0 16px}

    /* 헤더 */
    #hd_top .yh_inner {
        justify-content:space-between;
        height:auto;
        min-height:40px;
        flex-wrap:nowrap;
        gap:8px;
        padding-top:4px;
        padding-bottom:4px;
    }
    .hd_util {min-width:0;flex:1;overflow:hidden}
    .hd_util li a {font-size:11px;min-height:36px;padding:8px 2px}
    .hd_util li a span {display:none}
    .hd_lang {margin-left:0;flex-shrink:0}
    .hd_lang li a {min-height:36px;line-height:36px;padding:0 10px}

    #hd_main .yh_inner {height:60px;justify-content:space-between}
    #hd.yh_hd #logo img,
    #hd.yh_hd #logo .yh_logo_img {height:30px}
    #gnb .gnb_1da {height:60px;padding:0 12px;font-size:14px}
    .yh_logo_text {font-size:18px}
    #gnb {display:none}
    #gnb .gnb_1dli {float:none}
    .gnb_mobile_btn {
        display:flex;
        align-items:center;
        justify-content:center;
    }

    #gnb_mobile {
        width:min(320px, 100%);
        padding-bottom:env(safe-area-inset-bottom);
    }
    .gnb_mobile_list > li.has_sub > a {position:relative;padding-right:44px}
    .gnb_mobile_list > li.has_sub > a:after {
        content:"\f078";
        font-family:"Font Awesome 5 Free";
        font-weight:900;
        position:absolute;
        right:20px;
        top:50%;
        transform:translateY(-50%);
        font-size:12px;
        color:#999;
        transition:transform .2s;
    }
    .gnb_mobile_list > li.has_sub.open > a:after {
        transform:translateY(-50%) rotate(180deg);
    }

    /* 메인 비주얼 */
    .yh_main_visual {height:min(72vh, 420px);min-height:320px}
    .yh_main_visual_bg:after {
        background:linear-gradient(180deg, rgba(15,35,64,.78) 0%, rgba(15,35,64,.35) 55%, rgba(15,35,64,.2) 100%);
    }
    .yh_main_visual_txt {
        max-width:100%;
        padding-bottom:20px;
        justify-content:center;
        align-items:flex-start;
        text-align:left;
        padding-top:24px;
    }
    .yh_main_visual_txt h2 {font-size:24px;line-height:1.4}
    .yh_main_visual_txt p {font-size:14px;margin-top:12px}
    .yh_main_visual_btn {
        margin-top:22px;
        padding:12px 22px;
        font-size:14px;
    }

    #yh_main .yh_section_head {margin-bottom:22px;text-align:left}
    #yh_main .yh_section_head h2 {font-size:22px}
    #yh_main .yh_section_head p {font-size:14px}

    .yh_window_system,
    .yh_main_cases,
    .yh_main_info,
    .yh_main_channel {padding:48px 0}
    .yh_main_channel {padding-bottom:64px}

    .yh_window_grid {
        grid-template-columns:1fr;
        grid-template-areas:
            "intro"
            "visual"
            "tabs";
        gap:20px;
    }
    .yh_window_intro h2 {font-size:22px}
    .yh_window_visual {aspect-ratio:4/3;max-height:320px}
    .yh_window_panel_link {padding:20px}
    .yh_window_panel_link img {max-width:82%;max-height:82%}
    .yh_window_tabs {
        flex-direction:column;
        border:1px solid #e8eaed;
        border-radius:8px;
        gap:0;
    }
    .yh_window_tab {
        flex:none;
        width:100%;
        border:0;
        border-bottom:1px solid #eee;
        border-radius:0;
    }
    .yh_window_tab:last-child {border-bottom:0}

    .yh_case_cards {grid-template-columns:1fr;gap:16px}
    .yh_case_card:hover {transform:none}
    .yh_case_more {width:100%;min-width:0}

    .yh_info_grid {grid-template-columns:1fr;gap:16px}
    .yh_info_box {
        min-height:auto;
        padding:22px 20px;
    }
    .yh_info_list li {
        flex-wrap:wrap;
        align-items:flex-start;
        gap:4px 10px;
        padding:12px 0;
    }
    .yh_info_list a {
        flex:1 1 100%;
        white-space:normal;
        line-height:1.45;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .yh_info_list .date {flex:0 0 auto;font-size:11px}

    .yh_contact_tel {font-size:24px;flex-wrap:wrap}
    .yh_contact_btns {flex-direction:column}
    .yh_contact_btns a {width:100%;min-width:0}

    .yh_channel_wrap {padding:18px;border-radius:12px}
    .yh_channel_sns {
        grid-template-columns:repeat(2, 1fr);
        gap:8px;
    }
    .yh_channel_sns a {
        min-height:100px;
        padding:10px 6px;
    }
    .yh_channel_sns a i {font-size:34px}
    .yh_channel_sns a img {width:48px;height:48px}
    .yh_channel_sns a strong {font-size:13px}
    .yh_channel_sns a:hover {transform:none}
    .yh_channel_partner {gap:8px}
    .yh_partner_prev,
    .yh_partner_next {width:34px;height:34px}
    .yh_partner_slider li {height:72px}

    /* 푸터 */
    #ft.yh_ft {padding-bottom:max(8px, env(safe-area-inset-bottom))}
    .yh_ft_inner {
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        padding:40px 16px 32px;
        gap:24px;
    }
    .yh_ft_info {font-size:12px;line-height:1.75;word-break:keep-all}
    .yh_ft_sns {align-self:flex-start}

    #top_btn {
        width:44px;
        height:44px;
        line-height:40px;
        bottom:max(16px, env(safe-area-inset-bottom));
        right:16px;
    }

    /* 서브페이지 */
    #container_wr:not(.yh_main_container_wr) {padding:0 12px}
    #container_wr:has(.yh_sub_page),
    #container_wr:has(.yh_board_page) {padding-left:0;padding-right:0}
    #container:not(.yh_main_container) {
        float:none;
        width:100%;
        margin:12px 0;
        padding:0;
    }
    #container_title {font-size:1.15em}
    #container_title span {line-height:1.4;padding:0 4px}
    #aside {
        float:none;
        width:100%;
        margin:0 0 20px;
    }
}

@media (max-width:480px) {
    .yh_inner {padding:0 12px}

    .hd_util li {padding:0 6px}
    .hd_util li a {gap:3px;font-size:10px}
    .hd_lang li a {padding:0 6px;font-size:11px}

    #hd_main .yh_inner {height:54px}
    #hd.yh_hd #logo img,
    #hd.yh_hd #logo .yh_logo_img {height:26px}
    #gnb .gnb_1da {height:54px;padding:0 10px;font-size:13px}
    .yh_logo_text {font-size:16px}
    .gnb_mobile_btn {width:40px;height:40px;font-size:20px}

    .yh_main_visual {height:min(68vh, 360px);min-height:280px}
    .yh_main_visual_txt h2 {font-size:20px}
    .yh_main_visual_txt p {font-size:13px}
    .yh_main_visual_btn {width:auto;max-width:100%;justify-content:center}

    .yh_window_tab {padding:12px 14px}
    .yh_window_tab_tit {font-size:13px}
    .yh_window_visual {max-height:260px}
    .yh_window_panel_link {padding:16px}
    .yh_window_panel_more {opacity:1;transform:none;font-size:11px;padding:6px 12px}

    .yh_contact_tel {font-size:20px}

    .yh_channel_sns a {min-height:88px}
    .yh_channel_sns a i {font-size:30px}
    .yh_channel_sns a img {width:44px;height:44px}

    #container_wr:not(.yh_main_container_wr) {padding:0 10px}
    #container_wr:has(.yh_sub_page),
    #container_wr:has(.yh_board_page) {padding-left:0;padding-right:0}
    #container:not(.yh_main_container) {margin:8px 0;font-size:0.95em}

    .yh_ft_inner {padding:36px 12px 28px}
    .yh_ft_copy {font-size:11px;padding:14px 12px}
}

@media (hover:none) and (pointer:coarse) {
    .yh_case_card:hover,
    .yh_channel_sns a:hover {
        transform:none;
        box-shadow:none;
    }
    .yh_window_panel_more {
        opacity:1;
        transform:none;
    }
    .yh_window_panel_link:hover img {transform:none}
}

/* iOS 등 고정 배경이 흔들리는 환경에서는 일반 스크롤 유지 */
@supports (-webkit-touch-callout: none) {
    body.yh_body .yh_main_visual_bg img {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }
}

/* ===== 모바일 최적화 보완 ===== */
@media (max-width:768px) {
    body.yh_body input[type="text"],
    body.yh_body input[type="password"],
    body.yh_body input[type="email"],
    body.yh_body input[type="tel"],
    body.yh_body input[type="search"],
    body.yh_body input[type="url"],
    body.yh_body input[type="number"],
    body.yh_body textarea,
    body.yh_body select {
        font-size:16px;
        max-width:100%;
        box-sizing:border-box;
    }

    .yh_main_visual_txt h2,
    .yh_main_visual_txt p,
    .yh_window_intro h2,
    .yh_window_intro p {
        word-break:keep-all;
        overflow-wrap:break-word;
    }
    .yh_main_visual_btn {max-width:100%;box-sizing:border-box}

    html.translated-ltr .yh_window_tab_tit,
    html.translated-rtl .yh_window_tab_tit {
        white-space:normal;
        line-height:1.35;
    }

    #hd_login_msg {display:none}

    .tbl_wrap,
    .tbl_head01 {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        max-width:100%;
    }
}

@media (max-width:480px) {
    .yh_main_visual_ctrl {padding:0 4px 8px}
    .yh_main_visual_prev,
    .yh_main_visual_next {width:36px;height:36px}
    .yh_window_intro .yh_btn_line {width:100%;justify-content:center;box-sizing:border-box}
    .yh_section_head_link {word-break:keep-all}
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}