/*
 * INSUNG SUB VISUAL / SNB v2.0.0 ROUTINE RESTORE FINAL
 * Reference principle: PC SNB inside sub_visual, mobile SNB separated below it.
 * Current Insung geometry is preserved: 360 / 285 / 330 / 340 / 350px.
 * Page CSS must not redefine #sub_visual or .left_snb.
 * PHP 5.5 compatible theme markup.
 */

/* ---------- background mapping only ---------- */
#sub_visual.insung-skin-visual { background-image:url('../img/sub/sub03_top.jpg'); background-position:center 44%; }
#sub_visual.insung-gongjindan-visual { background-image:url('../img/sub/sub04_top.jpg'); background-position:center 48%; }
#sub_visual.insung-pain-visual { background-image:url('../img/sub/sub05_top.jpg'); background-position:center center; }
#sub_visual.insung-customer-visual { background-image:url('../img/sub/sub06_top.jpg'); background-position:center center; }

/* sub10/sub20 remain available from sub.css or the current theme image mapping. */

/* ---------- one geometry / typography routine ---------- */
html body #sub_visual {
    position:relative !important;
    display:flex !important;
    height:360px !important;
    min-height:0 !important;
    overflow:hidden !important;
    align-items:center !important;
    justify-content:center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    text-align:center !important;
}
html body #sub_visual:before {
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:rgba(255,255,255,.14);
    pointer-events:none;
}
html body #sub_visual > .inner {
    position:relative !important;
    z-index:1 !important;
    width:calc(100% - 40px) !important;
    max-width:1400px !important;
    margin:0 auto !important;
    padding:38px 20px 0 !important;
    box-sizing:border-box !important;
}
html body #sub_visual > .inner > p {
    margin:0 0 18px !important;
    padding:0 !important;
    color:#3f342e !important;
    font-family:'Pretendard',sans-serif !important;
    font-size:18px !important;
    font-weight:300 !important;
    line-height:1.4 !important;
    letter-spacing:.16em !important;
    text-shadow:0 1px 3px rgba(255,255,255,.72) !important;
    white-space:nowrap !important;
}
html body #sub_visual > .inner > h2 {
    margin:0 0 46px !important;
    padding:0 !important;
    color:#3f342e !important;
    font-family:'Pretendard',sans-serif !important;
    font-size:40px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:-.045em !important;
    text-shadow:0 1px 3px rgba(255,255,255,.72) !important;
}

/* ---------- PC SNB: reference-site inline routine ---------- */
html body #sub_visual .insung-subnav-pc { display:block !important; }
html body #sub_visual .left_snb { width:100%; margin:0 auto; padding:0; text-align:center; }
html body #sub_visual .left_snb ul { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0; width:100%; margin:0; padding:0; list-style:none; }
html body #sub_visual .left_snb li { display:block; position:relative; width:auto; margin:0 20px; padding:0; text-align:center; }
html body #sub_visual .left_snb li a {
    display:block;
    position:relative;
    padding:6px 0 11px;
    border:0 !important;
    color:#3f342e !important;
    font-size:17px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:-.035em !important;
    text-decoration:none !important;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(255,255,255,.62);
}
html body #sub_visual .left_snb li a:after {
    content:'' !important;
    position:absolute !important;
    right:50% !important;
    bottom:2px !important;
    left:50% !important;
    width:auto !important;
    height:2px !important;
    background:#a7775d !important;
    transition:left .22s ease,right .22s ease !important;
}
html body #sub_visual .left_snb li:hover a,
html body #sub_visual .left_snb li.on a { color:#8f624b !important; font-weight:700 !important; }
html body #sub_visual .left_snb li:hover a:after,
html body #sub_visual .left_snb li.on a:after { right:15% !important; left:15% !important; }

/* ---------- Mobile SNB: physically separated from the image ---------- */
html body .insung-subnav-mobile-wrap { display:none !important; }
html body .insung-mobile-snb {
    width:100%;
    border-top:1px solid #eee6df;
    border-bottom:1px solid #e6ddd5;
    background:#fff;
    box-shadow:0 5px 16px rgba(65,48,38,.04);
}
html body .insung-mobile-snb-scroll { width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
html body .insung-mobile-snb-scroll::-webkit-scrollbar { display:none; }
html body .insung-mobile-snb ul { display:flex; width:max-content; min-width:100%; margin:0; padding:0 10px; align-items:stretch; justify-content:flex-start; list-style:none; box-sizing:border-box; }
html body .insung-mobile-snb li { display:flex; flex:1 0 auto; min-width:86px; margin:0; padding:0; }
html body .insung-mobile-snb li a {
    display:flex;
    position:relative;
    width:100%;
    min-height:52px;
    padding:0 14px;
    align-items:center;
    justify-content:center;
    color:#64564e;
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    letter-spacing:-.04em;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    word-break:keep-all;
    box-sizing:border-box;
}
html body .insung-mobile-snb li.on a { color:#956a53; font-weight:700; }
html body .insung-mobile-snb li.on a:after {
    content:'';
    position:absolute;
    right:14px;
    bottom:0;
    left:14px;
    height:2px;
    background:#a7775d;
}

@media all and (max-width:1024px) {
    html body #sub_visual { height:285px !important; }
    html body #sub_visual > .inner { padding-top:34px !important; }
    html body #sub_visual > .inner > p { margin-bottom:14px !important; font-size:14px !important; }
    html body #sub_visual > .inner > h2 { margin-bottom:34px !important; font-size:35px !important; }
    html body #sub_visual .left_snb li { margin-right:13px; margin-left:13px; }
    html body #sub_visual .left_snb li a { font-size:15px !important; }
}

@media all and (max-width:767px) {
    html body #sub_visual {
        height:330px !important;
        min-height:330px !important;
        background-position:center 50% !important;
        box-shadow:inset 0 14px 24px rgba(28,20,16,.06);
    }
    html body #sub_visual:before { background:rgba(255,255,255,.16); }
    html body #sub_visual > .inner {
        display:flex !important;
        width:100% !important;
        max-width:none !important;
        min-height:330px !important;
        padding:48px 18px 28px !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
    }
    html body #sub_visual > .inner > p {
        width:100% !important;
        margin:0 0 16px !important;
        font-size:11px !important;
        font-weight:400 !important;
        line-height:1.45 !important;
        letter-spacing:.075em !important;
        white-space:nowrap !important;
    }
    html body #sub_visual > .inner > h2 {
        margin:0 !important;
        font-size:34px !important;
        line-height:1.2 !important;
    }
    html body #sub_visual .insung-subnav-pc { display:none !important; }
    html body .insung-subnav-mobile-wrap { display:block !important; width:100% !important; }

    html body #sub_visual.insung-gongjindan-visual { background-image:url('../img/sub/sub04_top_m.jpg?ver=200') !important; }
    html body #sub_visual.insung-skin-visual { background-position:68% center !important; }
}

@media all and (max-width:430px) {
    html body #sub_visual { height:340px !important; min-height:340px !important; }
    html body #sub_visual > .inner { min-height:340px !important; padding-top:50px !important; }
    html body .insung-mobile-snb li { min-width:82px; }
    html body .insung-mobile-snb li a { min-height:50px; padding-right:12px; padding-left:12px; font-size:13px; }
}

@media all and (max-width:380px) {
    html body #sub_visual { height:350px !important; min-height:350px !important; }
    html body #sub_visual > .inner { min-height:350px !important; padding-right:14px !important; padding-left:14px !important; }
    html body #sub_visual > .inner > p { max-width:270px !important; font-size:10px !important; letter-spacing:.055em !important; white-space:normal !important; }
    html body #sub_visual > .inner > h2 { font-size:31px !important; }
    html body .insung-mobile-snb li { min-width:78px; }
    html body .insung-mobile-snb li a { font-size:12px; }
}