@charset "utf-8";

/* 서브 키비주얼  */
.sub-visual-head { padding-top: 5rem; text-align: center; }
.sub-visual-head .en-tit { display: block; font-size: var(--fs-20); font-weight: 800; }
.sub-visual-head .tit { display: block; font-size: var(--fs-52); font-weight: 600; }

.sub-visual { display: flex; align-items: center; justify-content: center; width: 96%; max-width: 1720px; aspect-ratio: 1720/320; padding: 2rem 0; position: relative; margin: 5rem auto 0; background: url("/resources/img/sub/sub_vis.jpg") no-repeat center/cover; overflow: hidden; }
.sub-visual .inner { display: flex; flex-direction: column; justify-content: center; gap:4.5rem }
.sub-visual-copy { color:white; }
.sub-visual-copy-ko { font-size: var(--fs-52); line-height: 1.4; font-weight: 800; color:#56C2F1; }
.sub-visual-copy-en { margin-top: 1rem; font-size: var(--fs-26); line-height: 1.4; font-weight: 300; color:#fff; }
.sub-visual .sub-visual-logo { width: 100%; display: flex; justify-content: right; }
.sub-visual .sub-visual-logo span { display: block; width: 35rem; padding-left: 4rem; border-left:1px solid white; }

/* lnb 스타일 */
#df-lnb { display: none; 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){
    .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; }

    .sub-visual .inner  { gap:3rem; }
    .sub-visual .sub-visual-logo span  { width: 25rem; }
}
@media screen and (max-width:768px){
    .sub-visual { aspect-ratio: auto; padding: 5rem 0; background-position:right; }
    .sub-visual .inner  { gap:4rem; }
    .sub-visual .sub-visual-logo { justify-content: start; }
    .sub-visual-copy-en{ margin-top: 5px; }
    .sub-visual .sub-visual-logo span { padding-left: 2rem; width: 22rem; }
}
@media screen and (max-width:480px){
    .lnb.box-lnb .depth1-name { display: none; }
    .sub-visual-copy-ko { font-size: 23px; }
    .sub-visual-copy-en { font-size: 13px; }
}