@charset "utf-8";

/* new 서브 키비주얼  */
#sub_kv { width: 100%; height: auto; padding-top: 200px; overflow: hidden; margin: 0 auto; position: relative; }
#sub_kv::after { content: ''; display: block; width: 1600px; height: 420px; border-radius: 40px; background-repeat: no-repeat; background-position: center 70%; background-size: auto; position: relative; left: 50%; transform: translateX(-50%); transition: all 1s ease-in-out; }

#sub_kv.sub-vis1::after { background-image: url('/resources/img/sub/sub_vis1.jpg'); }
#sub_kv.sub-vis2::after { background-image: url('/resources/img/sub/sub_vis2.jpg'); }
#sub_kv.sub-vis3::after { background-image: url('/resources/img/sub/sub_vis3.jpg'); }
#sub_kv.sub-vis4::after { background-image: url('/resources/img/sub/sub_vis4.jpg'); }

#sub_kv.on::after { width: 100%; max-width: unset; border-radius: 0; }


#sub_kv h2 { display: flex; align-items: flex-end; gap: 20px; width: 94%; max-width: 1600px; margin: 0 auto 40px; }
#sub_kv h2 > span { display: block; }
#sub_kv h2 > span.en_tit { font: 700 54px/100% var(--font-family); color: var(--main-black); }
#sub_kv h2 > span.tit { font: 400 15px/100% var(--font-family); color: var(--sub-color-blu); padding-bottom: 4px; }


/* 박스형 lnb 스타일(형제 메뉴들이 슬라이드) */
.lnb.box-lnb { width: 94%; max-width: 1440px; margin: 30px auto; padding: 0 40px; }
.lnb.box-lnb > div { float: left; }

.arr { margin-right: 20px; position: relative; }
.arr::after { content: ''; width: 20px; height: 20px; background: url('/resources/img/sub/sub_ico_arr_forward.png') no-repeat center/contain; position: absolute; right: -20px; top: calc(50% - 10px); }

.lnb.box-lnb .home { width: 60px; height: 20px; padding-right: 40px; position: relative; }
.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 { padding: 0 40px; }
.lnb.box-lnb .depth1-name span { display: block; font: var(--gnb-dep1); color: var(--main-black); }

.lnb.box-lnb .lnb-menu { position: relative; }
.lnb.box-lnb .lnb-menu .lnb-title { padding: 0 80px 0 40px; font: var(--gnb-dep1); position: relative; cursor: pointer; }
.lnb.box-lnb .lnb-menu .lnb-title::after { content: ''; width: 20px; height: 20px; background: url('/resources/img/sub/sub_ico_arr_down.png') no-repeat center/contain; position: absolute; right: 0; top: 0; transition: all 0.3s ease; }
.lnb.box-lnb .lnb-menu .lnb-title.add::after { transform: rotate(180deg); }
.lnb.box-lnb .lnb-menu ul { width: max-content; max-width: 360px; min-width: 200px; overflow: hidden; padding: 8px; border-radius: 24px; background-color: #fff; box-shadow: 2px 3px 6px rgba(0,0,0,0.15); border-top: none; border-bottom: none; position: absolute; left: 0; top: 50px; z-index: 100; display: none; }
.lnb.box-lnb .lnb-menu li + li { margin-top: 2px; }
.lnb.box-lnb .lnb-menu li a { display: block; width: 100%; padding: 16px 30px; border-radius: 14px; font: var(--gnb-dap2); transition: .3s ease;  }
.lnb.box-lnb .lnb-menu li a:hover,
.lnb.box-lnb .lnb-menu li.on a { background-color: #02325111; }
.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 { display: none; }
.lnb_menu .more-btn.more-add { transform: translateY(-50%) rotate(-180deg); top: 45%; }


#lf_lnb { display: none; }

@media screen and (max-width:1600px){
    #sub_kv::after { width: 94%; }
}
@media screen and (max-width:1440px){
    #sub_kv { padding-top: 180px; }
    #sub_kv h2 > span.en_tit { font-size: 50px; }

    .lnb.box-lnb { padding: 0 10px; }
}
@media screen and (max-width:1280px){
    #sub_kv { padding-top: 160px; }
    #sub_kv::after { height: 360px; border-radius: 32px; background-size: 1490px; }
    #sub_kv h2 { margin-bottom: 32px; }
    #sub_kv h2 > span.en_tit { font-size: 48px; }

    .lnb.box-lnb .lnb-menu li a { padding: 14px 24px }
}
@media screen and (max-width:1024px){
    #sub_kv { padding-top: 150px; }
    #sub_kv::after { height: 330px; border-radius: 32px; background-size: auto 330px;  }
    #sub_kv h2 > span.en_tit { font-size: 42px; }

    .lnb.box-lnb { margin: 20px auto; padding: 0; }
    .lnb.box-lnb .home { padding-right: 32px; }
    .lnb.box-lnb .depth1-name { padding: 0 32px; }
    .lnb.box-lnb .lnb-menu .lnb-title { padding: 0 72px 0 32px; }

    .lnb.box-lnb .lnb-menu ul { min-width: 180px; }
}
@media screen and (max-width:768px){
    #sub_kv { padding-top: 140px; }
    #sub_kv::after { height: 300px; background-size: auto 300px;  }
    #sub_kv h2 > span.en_tit { font-size: 40px; }
    #sub_kv h2 { margin-bottom: 24px; }

    .lnb.box-lnb .home { padding-right: 24px; }
    .lnb.box-lnb .depth1-name { padding: 0 24px; }
    .lnb.box-lnb .lnb-menu .lnb-title { padding: 0 64px 0 24px; }

    .lnb.box-lnb .lnb-menu ul { min-width: 160px; }
    .lnb.box-lnb .lnb-menu li a { padding: 12px 20px; }
}
@media screen and (max-width:640px){
    #sub_kv::after { height: 280px; background-size: auto 280px;  }
    #sub_kv h2 > span.en_tit { font-size: 36px; }

    .lnb.box-lnb .home { width: 18px; height: 18px; padding-right: 16px; box-sizing: content-box; }
    .arr::after { width: 18px; height: 18px; top: calc(50% - 9px); }
    .lnb.box-lnb .depth1-name { padding: 0 20px; }
    .lnb.box-lnb .lnb-menu .lnb-title { padding: 0 60px 0 20px; }
    .lnb.box-lnb .lnb-menu .lnb-title::after { width: 18px; height: 18px; }

    .lnb.box-lnb .lnb-menu ul { min-width: 150px; border-radius: 16px; }
    .lnb.box-lnb .lnb-menu li a { padding: 12px 16px; border-radius: 8px }
}
@media screen and (max-width:480px){
    #sub_kv { padding-top: 120px; }
    #sub_kv::after { height: 240px; border-radius: 24px; background-size: auto 240px;  }
    #sub_kv h2 { align-items: flex-start; flex-direction: column-reverse; gap: 8px; margin-bottom: 20px; }
    #sub_kv h2 > span.en_tit { font-size: 30px; }

    .lnb.box-lnb { margin: 16px auto; }
    .arr { margin-right: 16px; }
    .arr::after { width: 16px; height: 16px; top: calc(50% - 8px); }
    .lnb.box-lnb span { letter-spacing: -0.32px; }
    .lnb.box-lnb .home { width: 16px; height: 16px; padding: 0 4px 0 2px; }
    .lnb.box-lnb .depth1-name { padding: 0 10px; }
    .lnb.box-lnb .lnb-menu .lnb-title { padding: 0 40px 0 10px; }
}