@charset "utf-8";

/* new 서브 키비주얼  */
.sub-visual { padding: 18rem 0 0; }
.sub-visual .inner { max-width: 1300px; display: flex; justify-content: space-between; align-items: end; }
#sub-kv { width: 100%; position: relative; margin: 0 auto; }
#sub-kv h2 > span { display: block; }
#sub-kv h2 > span.en-tit { margin-bottom: 1.4rem; font-size: var(--fs-18); font-weight: 800; color:var(--key-color) }
#sub-kv h2 > span.tit { font-size: var(--fs-56); line-height: 1.4; font-weight: 800; }

#df-lnb { width: 100%; max-width: 600px; z-index: 5; }


/* 박스형 lnb 스타일(형제 메뉴들이 슬라이드) */
.lnb.box-lnb { width: 100%; height: 6rem; display: flex; gap:1rem; }

.lnb.box-lnb .home { width: 6rem; aspect-ratio: 1/1; background: url("/resources/img/sub/ico_home.svg") no-repeat center/contain; }
.lnb.box-lnb .home a { display: inline-block; width: 100%; height: 100%; text-indent: -9999px; }

.lnb.box-lnb .depth1-name { display: table; flex:1; border-radius: 6rem; background: #F8F8F8; }
.lnb.box-lnb .depth1-name span { display: table-cell; width: 100%; height: 100%; font-size: var(--fs-18); font-weight: 800; vertical-align: middle; padding: 0 32px; }

.lnb.box-lnb .lnb-menu { display: inline-block; width: 100%; flex:1; position: relative; z-index: 1; vertical-align: middle;  border-radius: 6rem; background: #F8F8F8; }
.lnb.box-lnb .lnb-menu .lnb-title { display: block; height: 100%; display: flex; align-items: center; padding: 0 32px; cursor: pointer; font-size: var(--fs-18); font-weight: 800; }
.lnb.box-lnb .lnb-menu ul { width: 100%; position: absolute; left: 0; display: none; background: #f8f8f8; border-radius: 2rem; padding: 1rem; margin-top: 1rem; }
.lnb.box-lnb .lnb-menu li a { display: block; width: 100%; margin:3px 0; padding: 1rem 2rem; transition: .3s ease; border-radius: 5rem; }
.lnb.box-lnb .lnb-menu li a:hover { background: #EEE; }
.lnb.box-lnb .lnb-menu li.on a { background: black; color:white; }
.lnb.box-lnb .lnb-menu li.on a span { display: table-cell; vertical-align: middle; transform: skew(-0.03deg); }
.lnb.box-lnb .lnb-menu .more-btn { width: 10px; height: 10px; background: url("/resources/img/sub/ico_lnb.svg") no-repeat left 0px bottom 0px; position: absolute; top: 50%; right: 20px; text-indent: -99999px; transform: translateY(-50%); cursor: pointer; transition: all .3s ease-in-out; }
.lnb-menu .more-btn.more-add { transform: translateY(-50%) rotate(-180deg); top: 45%; }


/* 브레드크럼블형 lnb 스타일(단순 경로) */
.lnb.brdc-lnb { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: absolute; top: 28%; left: 50%; transform: translateX(-50%); z-index: 1; color: #fff; }

.lnb.brdc-lnb .home { height: 20px; background: url("/resources/img/common/home_ico.png") no-repeat center/contain; border-right: 1px solid #fff; padding: 0 25px; }
.lnb.brdc-lnb .home a { display: inline-block; width: 20px; text-indent: -9999px; }

.lnb.brdc-lnb .depth1-name { display: block; border-right: 1px solid #fff; }
.lnb.brdc-lnb .depth1-name span { font-size: 16px; font-weight: 500; color: #fff; line-height: 20px; padding: 0 30px; text-align: center; }

.lnb.brdc-lnb .lnb-menu .lnb-title { display: block; padding: 0 25px; line-height: 20px; font-size: 17px; }
.lnb.brdc-lnb .lnb-menu ul,
.lnb.brdc-lnb .lnb-menu .more-btn { display: none; }

@media screen and (max-width:1024px){
    .sub-visual .inner { flex-direction: column; gap:3rem; justify-content: start; align-items: start; }
    .lnb.box-lnb { height: 4.4rem; }
    .lnb.box-lnb .home { width: 4.4rem; }
    .lnb.box-lnb .depth1-name span { padding: 0 2rem; }
    .lnb.box-lnb .lnb-menu .lnb-title { padding: 0 2rem; }
    .lnb.box-lnb .lnb-menu { flex:1.5; }
}
@media screen and (max-width:480px){
    .lnb.box-lnb .depth1-name { display: none; }
}


/* 좌측세로형 lnb 스타일(dep3 메뉴 역할) */
#lf-lnb { display: none; }

.lf-lnb-type > .inner { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }
.lf-lnb-type #lf-lnb  { display: block; width: 200px; }
.lf-lnb-type .cont-wrap  { width: calc(100% - 240px); }

.left-lnb .depth1-name { width: 100%; font-size: 24px; font-weight: 600; padding: 35px; border-radius: 15px; background-color: rgb(0, 54, 104); text-align: center; color: #fff; }
.left-lnb .lnb-menu { margin-top: 10px; }
.left-lnb .lnb-menu > ul > li a { display: block; padding: 15px; background-color: #f9f9f5; border-bottom: 1px solid #eee; font-weight: 400; }
.left-lnb .lnb-menu > ul > li.on a { font-weight: 600; }
.left-lnb .lnb-menu > ul > li:last-child a { border-bottom: 0; }