@charset "utf-8";


/* new 서브 키비주얼  */
#sub_kv { width: 100%; position: relative; margin: 0 auto; }
#sub_kv { width: 100%; height: 250px; position: relative; margin-top: 180px; }

/* #sub_kv.sub-vis1 { height: calc(100vh - 230px); } */
.sub-vis::after { content: ''; width: 100%; max-width: 1760px; height: 100%; position: absolute; right: 0; top: 0; }
.sub-vis.sub-vis1::after { background: url('/resources/img/sub/sub_vis_240605_1.jpg') no-repeat center top/cover; }
.sub-vis.sub-vis2::after { background: url('/resources/img/sub/sub_vis_240605_2.jpg') no-repeat center top/cover; }
.sub-vis.sub-vis3::after { background: url('/resources/img/sub/sub_vis_240605_3.jpg') no-repeat center top/cover; }
.sub-vis.sub-vis4::after { background: url('/resources/img/sub/sub_vis_240605_4.jpg') no-repeat center top/cover; }

#sub_kv h2 { color: #fff; }
#sub_kv h2 > span { display: block; }
#sub_kv h2 > span.en_tit { width: 170px; height: 15px; background: url('/resources/img/common/mini_logo_wh.svg') no-repeat center/contain; }
#sub_kv h2 > span.tit { font: 700 32px/100% 'Pretendard'; margin: 20px 0 75px; letter-spacing: -0.8px; }

/* #sub_kv .sub-vis-box { width: 100%; max-width: 500px; padding: 60px; background-color: var(--key-color); position: absolute; top: -90px; left: calc(((100% - 1600px) / 2 + 100px) ); z-index: 5;  background:linear-gradient(-135deg, transparent 25px,  var(--key-color) 0);} */
#sub_kv .sub-vis-box { width: 100%; max-width: 420px; height: 250px; padding: 40px; position: absolute; top: -60px; left: calc(((100% - 1600px) / 2 + 100px) ); z-index: 5; background: url('/resources/img/sub/sub_kv_bg.png') no-repeat left top/100%; }


/* 브레드크럼블형 lnb 스타일(단순 경로) */
.lnb.brdc-lnb { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; color: #fff; }

.lnb.brdc-lnb .home { width: 18px; height: 18px; background: url("/resources/img/common/sub_vis_ico_home.png") no-repeat left/contain; border-right: 1px solid #fff; padding-right: 20px; box-sizing: content-box; }
.lnb.brdc-lnb .home a { display: inline-block; width: 100%; height: 100%; text-indent: -9999px; }

.lnb.brdc-lnb .depth1-name { display: block; border-right: 1px solid #fff; }
.lnb.brdc-lnb .depth1-name span { font: 500 18px/100% 'Pretendard'; color: #fff; padding: 0 20px; text-align: center; }

.lnb.brdc-lnb .lnb-menu { position: relative; }
.lnb.brdc-lnb .lnb-menu .lnb-title { display: block; padding-left: 20px; line-height: 20px; font-size: 18px; }
.lnb.brdc-lnb .lnb-menu ul,
.lnb.brdc-lnb .lnb-menu .more-btn { display: none; }

@media screen and (max-width:1600px){
    #sub_kv .sub-vis-box { left: 20px; }
}
@media screen and (max-width:1280px){
    #sub_kv .sub-vis-box { max-width: 380px; padding: 40px; }
    #sub_kv h2 > span.tit { font: 700 30px / 100% 'Pretendard'; margin: 10px 0 60px; }
    .lnb.brdc-lnb .depth1-name span { font-size: 15px; }
    .lnb.brdc-lnb .lnb-menu .lnb-title { font-size: 15px; }
}
@media screen and (max-width:768px){
    #sub_kv { height: 240px; }
    /* #sub_kv .sub-vis-box { display: flex; align-items: flex-end; justify-content: space-between;  width: calc(100% - 40px); padding: 40px; } */
    /* #sub_kv h2 > span.tit { margin-bottom: 0; } */
    
    .lnb.box-lnb .home { background: #005383 url('/resources/img/common/home_ico.png')no-repeat center/25px 22px; }
    .lnb.box-lnb .depth1-name { display: none; }
    .lnb.box-lnb .lnb-menu { width: calc(100% - 70px); }
}
@media screen and (max-width:640px){
    #sub_kv { height: 280px; margin-top: 70px; }
    #sub_kv::after { height: calc(100% - 60px); }
    .sub-vis.sub-vis1::after { background-position: 60% top; }
    .sub-vis.sub-vis2::after { background-position: 60% top; }
    .sub-vis.sub-vis3::after { background-position: 60% top; }
    .sub-vis.sub-vis4::after { background-position: 60% top; }

    #sub_kv .sub-vis-box { width: calc(100% - 40px); top: auto; bottom: -20px; padding: 30px; left: 20px; }
    #sub_kv h2 { margin-bottom: 40px; }
    #sub_kv h2 > span.tit { font-size: 28px;}

    .lnb.brdc-lnb .home { width: 16px; height: 16px; padding-right: 15px; }
    .lnb.brdc-lnb .depth1-name span { font-size: 14px; padding: 0 15px; }
    .lnb.brdc-lnb .lnb-menu .lnb-title { font-size: 14px; padding-left: 15px; }
}