@charset "utf-8";

/* new 서브 키비주얼  */
#sub_kv { width: 100%; height: 480px; position: relative; background: url("/resources/img/sub/sub_vis_img1.jpg")no-repeat center/cover; }
#sub_kv .vis-cont { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
#sub_kv h2 { width: max-content; font: 800 60px/125% var(--font-family); color: #fff; margin: 0 auto; }
#sub_kv.sub-vis1 { background: url("/resources/img/sub/sub_vis_img1.jpg")no-repeat center/cover; }
#sub_kv.sub-vis2 { background: url("/resources/img/sub/sub_vis_img2.jpg")no-repeat center/cover; }
#sub_kv.sub-vis3 { background: url("/resources/img/sub/sub_vis_img3.jpg")no-repeat center/cover; }
#sub_kv.sub-vis4 { background: url("/resources/img/sub/sub_vis_img4.jpg")no-repeat center/cover; }
#sub_kv.sub-vis5 { background: url("/resources/img/sub/sub_vis_img5.jpg")no-repeat center/cover; }
#sub_kv.sub-vis6 { background: url("/resources/img/sub/sub_vis_img6.jpg")no-repeat center/cover; }


/* 박스형 lnb 스타일(형제 메뉴들이 슬라이드) */
.lnb.box-lnb { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 24px; opacity: 0.7; }

.lnb.box-lnb .home { width: 22px; height: 22px;  }
.lnb.box-lnb .home a { display: inline-block; width: 100%; height: 100%; background: url("/resources/img/sub/sub_ico_home.png")no-repeat center/contain; text-indent: -9999px; }

.lnb.box-lnb .depth1-name { display: flex; align-items: center; gap: 12px;  position: relative; }
.lnb.box-lnb .depth1-name::before { content: ''; display: block; width: 6px; height: 12px; background: url("/resources/img/sub/sub_ico_arr.png") no-repeat center/contain; }
.lnb.box-lnb .depth1-name span { display: block; width: max-content; font: 700 18px/22px var(--font-family); color: #fff; }

.lnb.box-lnb .lnb-menu { display: flex; align-items: center; gap: 12px; position: relative; }
.lnb.box-lnb .lnb-menu::before { content: ''; display: block; width: 6px; height: 12px; background: url("/resources/img/sub/sub_ico_arr.png") no-repeat center/contain; }
.lnb.box-lnb .lnb-menu .lnb-title { font: 700 18px/22px var(--font-family); color: #fff; white-space: nowrap; }
.lnb.box-lnb .lnb-menu ul { position: absolute; left: 50%; bottom:0; transform: translate(-50%,100%); display: none; }
.lnb.box-lnb .lnb-menu .more-btn { display: none; }

@media screen and (max-width:1440px){
    #sub_kv h2 { font-size: 56px; }
}
@media screen and (max-width:1280px){
    #sub_kv { height: 400px; }
    #sub_kv .vis-cont { top: 55%; }
    #sub_kv h2 { font-size: 52px; }
}
@media screen and (max-width:1024px){
    #sub_kv h2 { font-size: 46px; }
}
@media screen and (max-width:768px){
    #sub_kv { height: 340px; }
    #sub_kv h2 { font-size: 42px; }

    .lnb.box-lnb { margin-bottom: 16px; }
    .lnb.box-lnb .home { width: 20px; height: 20px; }
    .lnb.box-lnb .depth1-name span, 
    .lnb.box-lnb .lnb-menu .lnb-title { font-size: 17px; line-height: 20px; }
}
@media screen and (max-width:640px){
    #sub_kv { height: 320px; }
    #sub_kv h2 { font-size: 38px; }
}
@media screen and (max-width:480px){
    #sub_kv { height: 290px; }
    #sub_kv h2 { font-size: 32px; }

    .lnb.box-lnb { gap: 10px; }
    .lnb.box-lnb .home { width: 19px; height: 19px; }
    .lnb.box-lnb .depth1-name,
    .lnb.box-lnb .lnb-menu  { gap: 10px; }
    .lnb.box-lnb .depth1-name span, 
    .lnb.box-lnb .lnb-menu .lnb-title { font-size: 16px; line-height: 19px; }
}