@charset "utf-8";

/* 서브 키비주얼  */
.sub-visual { display: flex; align-items: center; justify-content: center; width: 100%; height: 330px; position: relative; background: url("/resources/img/main/main_vis_sam1.jpg") no-repeat center/cover; }
.sub-visual .inner { display: flex; justify-content: space-between; align-items: end; }
.sub-visual { width: 100%; position: relative; margin: 0 auto; }
.sub-visual h2 { color:white; }
.sub-visual h2 > span { display: block; }
.sub-visual h2 > span.en-tit { margin-bottom: 1.4rem; font-size: var(--fs-18); font-weight: 800; color:var(--key-color) }
.sub-visual h2 > span.tit { font-size: var(--fs-56); line-height: 1.4; font-weight: 800; }


/* lnb 스타일 */
#df-lnb { width: 100%; max-width: 600px; z-index: 5; }
.lnb.box-lnb { width: 100%; height: 6rem; display: flex; gap:1rem; }

.lnb.box-lnb .home { width: 6rem; aspect-ratio: 1/1; background: black url("/resources/img/common/home_ico.png") no-repeat center/2.4rem; border-radius: 50%; }
.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%; }


@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; }
}