/* =================================== header */
header { position: fixed; height: 10rem; line-height: 10rem; top: 0; left: 0; right: 0; z-index: 1000; background: var(--c-mono-19); padding: 0 15%; transition: top 0.2s ease-in-out; box-shadow: 0px 15px 50px var(--c-mono-19); }
.nav-up { top: -15rem; }
header .header_wrap { display: flex; align-items: center; justify-content: space-between; }
header .header_wrap a { color:var(--c-mono-0); font-size: 1.8rem; font-weight: 800; }
header .header_wrap .logo { display: block; width: 110px; height: 50px; background: url("../images/logo_wh.png") no-repeat center; background-size: contain; color: transparent; text-indent: -999999px; }
header .header_wrap nav a { display: block; position: relative; letter-spacing: 0; }
header .header_wrap nav ul li a:hover { color: var(--c-mono-0); transition: 0.3s; }
header .header_wrap nav a.hoverWd:before { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--c-mono-0); transition: width 0.5s; }
header .header_wrap nav ul { display: flex; }
header .header_wrap nav a:hover:before { width: 100%; }
header .header_wrap .close,
header .header_wrap .all,
header .header_wrap > div > div,
header .header_wrap h2 { display: none; }
header .header_wrap > div { float: left; }
header .header_wrap > div nav li { padding: 0 1rem; margin-right: 3rem;  }
/* 메인빼고 다른페이지들 */
header.plushead { background: var(--c-mono-0); border-bottom: 1px solid var(--c-mono-3); box-shadow: none; }
header.plushead .header_wrap nav a:hover { color: var(--c-main); transition: 0.3s; }
header.plushead .header_wrap nav a.hoverWd:before { background: var(--c-main); }
header.plushead .header_wrap a { color: var(--c-mono-19); }
header.plushead .header_wrap .logo { background: url(../images/logo_nv.png) no-repeat center; background-size: contain; color: transparent; }




/* =================================== Business 드롭다운 */
header .header_wrap nav .dropdown { float: left; overflow: hidden; }
header .header_wrap nav .dropdown .dropbtn { height: 10rem; line-height: 10rem; font-size: 1.8rem; font-weight: 800; letter-spacing: 0; border: none; outline: none; color: var(--c-mono-0); background-color: inherit; font-family: inherit; margin: 0; cursor: pointer; }
header .header_wrap nav .dropdown ul { display: flex; position: absolute; top: 10rem; visibility: hidden; opacity: 0; min-width: 160px; height: 0; line-height: 0; z-index: 1; background-color: var(--c-mono-15); -webkit-transition: height .3s; transition: height .3s; -webkit-transition-delay: .1s; transition-delay: .1s; }
header .header_wrap nav .dropdown ul li { display: inline-block; vertical-align: top; }
header .header_wrap nav .dropdown ul li::after { display: block; position: fixed; content: ''; left: 0; top: 10rem; right: auto; bottom: auto; width: 100%; height: 0; background-color: var(--c-mono-15); transition: height .3s; }
header .header_wrap nav .dropdown ul li a { float: none; display: block; font-size: 1.8rem; font-weight: 700; color: var(--c-mono-0); text-decoration: none; text-align: left; }
/* header .header_wrap nav .dropdown:hover .dropbtn { color: var(--c-main); } */
header .header_wrap nav .dropdown:hover ul { visibility: visible; opacity: 1; height: 60px; line-height: 60px; }
header .header_wrap nav .dropdown:hover ul li::after { height: 60px; top: 10rem; z-index: -1; }
header .header_wrap nav .dropdown ul li a:hover { color: var(--c-mono-0); opacity: .6; transition: opacity .3s; }
/* 메인빼고 다른페이지들 */
header.plushead .header_wrap nav .dropdown .dropbtn { color: var(--c-mono-19); }
header.plushead .header_wrap nav .dropdown:hover .dropbtn { color: var(--c-main); }




/* =================================== 언어 전환 버튼 */
header .header_wrap nav ul .right_icwrap { display: flex; align-items: center; gap: 3rem; margin-left: 4rem; }
header .header_wrap nav ul .right_icwrap .lang_btn_wrap { z-index: 1; }
header .header_wrap nav ul .right_icwrap .lang_btn_wrap .wrap_inner { display: flex; gap: 2rem; height: 35px; line-height: 35px; padding: 0 2rem; border-radius: 10rem; background-color: var(--c-mono-16); box-sizing: content-box; }
header .header_wrap nav ul .right_icwrap .lang_btn_wrap .wrap_inner .lang_btn { position: relative; font-size: 1.6rem; }
header .header_wrap nav ul .right_icwrap .lang_btn_wrap .wrap_inner .lang_btn:first-child:after { position: absolute; content: ''; top: 50%; right: -10px; transform: translateY(-50%); width: 1px; height: 13px; background-color: var(--c-mono-13); }
header.plushead .header_wrap nav ul .right_icwrap .lang_btn_wrap .wrap_inner { background-color: var(--c-mono-3); }
header.plushead .header_wrap nav ul .right_icwrap .lang_btn_wrap .wrap_inner .lang_btn:first-child:after { background-color: var(--c-mono-5); }




/* =================================== Drawer Menu */
header .header_wrap nav ul .right_icwrap .hamburger-button { position: relative; top: 4px; right: 0; display: block; width: 30px; height: 30px; z-index: 100; transition: .3s ease-in-out; }
header .header_wrap nav ul .right_icwrap .hamburger-button span { position: absolute; top: 0; width: 100%; height: 2px; border-radius: 0.5rem; background-color: var(--c-mono-0); transition: transform .2s ease-in-out, opacity .2s ease-in-out; }
header .header_wrap nav ul .right_icwrap .hamburger-button span:nth-child(1) { top: 0px; }
header .header_wrap nav ul .right_icwrap .hamburger-button span:nth-child(2),
header .header_wrap nav ul .right_icwrap .hamburger-button span:nth-child(3) { top: 10px; }
header .header_wrap nav ul .right_icwrap .hamburger-button span:nth-child(4) { top: 20px; }
header .header_wrap nav ul .right_icwrap .hamburger-button.active span:nth-child(1),
header .header_wrap nav ul .right_icwrap .hamburger-button.active span:nth-child(4) { opacity: 0; }
header .header_wrap nav ul .right_icwrap .hamburger-button.active span:nth-child(2) { transform: rotate(45deg); background: var(--c-mono-18); }
header .header_wrap nav ul .right_icwrap .hamburger-button.active span:nth-child(3) { transform: rotate(-45deg); background: var(--c-mono-18); }

header .header_wrap nav .ham_overlay { position: fixed; top: 0; right: 0; left: 0; display: flex; width: 100%; height: 0; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s; background-color: var(--c-mono-4); }
header .header_wrap nav .ham_overlay.visible { height: 100%; opacity: 1; visibility: visible; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .background { position: absolute; display: flex; justify-content: space-between; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .background .lft_bg { flex: 0 0 40%; position: relative; width: 100%; height: 100%; background: url(../images/img_drawermn_left.png) no-repeat center; background-size: cover; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .background .lft_bg::after { position: absolute; content: ''; width: 100%; height: 100%; background-color: var(--c-mono-18-RGBA); top: 0; left: 0; right: 0; bottom: 0; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .background .rgt_bg { flex: 0 0 60%; width: 100%; height: 100%; background: url(../images/img_drawermn_right.png) no-repeat center; background-size: cover; background-color: var(--c-mono-0); }

header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container { display: flex; justify-content: space-between; align-items: center; position: absolute; width: 100%; min-height: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 15%; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide:first-child { flex: 0 0 45%; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide:last-child { flex: 0 0 55%; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide ul li { opacity: 0; transition: all 0.9s 0s ease; margin-left: 60px; line-height: 1; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide ul li:last-child { margin-bottom: 0; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide ul li a { position: relative; display: inline-block; transition: all 0.6s 0s ease; color: var(--c-mono-0); text-decoration: none; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_title li { margin-bottom: 6rem; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_title li a { font-size: 4rem; font-weight: 700; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_cont ul { display: none; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_cont ul.on { display: block; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_cont ul li { margin-bottom: 4rem; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_cont ul li:last-child { margin-bottom: 0; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_cont ul li a { font-size: 3rem; font-weight: 700; color: var(--c-mono-8); }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_cont ul li a:hover { color: var(--c-main); }

header .header_wrap nav .ham_overlay .menu .ham_mnWrap ul,
header .header_wrap nav .ham_overlay .menu .ham_mnWrap ul li { display: block; position: static; margin: 0; padding: 0; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_title li a:after { content: ""; position: absolute; left: 0; bottom: -1rem; width: 0; opacity: 0; height: 3px; background: var(--c-mono-0); transition: all 0.6s 0s ease; }
header .header_wrap nav .ham_overlay .menu .ham_mnWrap .menu_container .part_divide .tab_title li a:hover:after { width: 100%; opacity: 1; }

header .header_wrap nav .ham_overlay.overlay .menu .ham_mnWrap .menu_container .part_divide ul li:nth-child(1) { transition: all 0.9s 0.3s ease; }
header .header_wrap nav .ham_overlay.overlay .menu .ham_mnWrap .menu_container .part_divide ul li:nth-child(2) { transition: all 0.9s 0.5s ease; }
header .header_wrap nav .ham_overlay.overlay .menu .ham_mnWrap .menu_container .part_divide ul li:nth-child(3) { transition: all 0.9s 0.7s ease; }
header .header_wrap nav .ham_overlay.overlay .menu .ham_mnWrap .menu_container .part_divide ul li:nth-child(4) { transition: all 0.9s 0.9s ease; }
header .header_wrap nav .ham_overlay.overlay .menu .ham_mnWrap .menu_container .part_divide ul li:nth-child(5) { transition: all 0.9s 1.1s ease; }
header .header_wrap nav .ham_overlay.overlay .menu .ham_mnWrap .menu_container .part_divide ul li:nth-child(6) { transition: all 0.9s 1.3s ease; }
header .header_wrap nav .ham_overlay.overlay .menu .ham_mnWrap .menu_container .part_divide ul li:nth-child(7) { transition: all 0.9s 1.5s ease; }
header .header_wrap nav .ham_overlay.overlay .menu { position: fixed; top: 0; right: 0; left: 0; bottom: 0; max-height: 1200px; opacity: 1; z-index: 100; transition: all 0.3s ease; }
header .header_wrap nav .ham_overlay.overlay .menu .ham_mnWrap .menu_container .part_divide ul li { margin-left: 0; opacity: 1; }
/* 메인빼고 다른페이지들 */
header.plushead .header_wrap nav ul .hamburger-button span { background: var(--c-mono-18); }
.screen { display: none; }




/* =============== media queries =============== */
@media (max-width: 1920px){
    header .header_wrap nav .ham_overlay .menu .ham_mnWrap { gap: 12rem; }
}

@media (max-width: 1700px){
    header { padding: 0 14%; }
    header .header_wrap nav .ham_overlay .menu .ham_mnWrap { gap: 10rem; }
}

@media (max-width: 1400px){
    header.sticky { padding: 3% 10%; }
    header .header_wrap { padding: 2rem 0; }
    header .header_wrap .logo { float: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6); padding: 0; } 
    header .header_wrap .all { display: block; position: relative; width: 32px; height: 14px; border-top: 2px solid var(--c-mono-0); border-bottom: 2px solid var(--c-mono-0); color:transparent; transform: scale(0.8); }
    header .header_wrap .all:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: var(--c-mono-0); margin-top: -1px; }
    header.sticky .header_wrap .all { border-top: 2px solid var(--c-mono-18); border-bottom: 2px solid var(--c-mono-18); } 
    header.sticky .header_wrap .all:before { background: var(--c-mono-18); } 

    header .header_wrap > div { float: none; }
    header .header_wrap > ul li { display: none; }

    /* 모바일 메뉴 */
    header { display: none; }
    
    .screen { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 80px; z-index: 9999; }
    .screen nav { position: absolute; top: 0; left: 0; width: 100%; height: 80px; background-color: var(--c-mono-0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); border-bottom: 1px solid var(--c-mono-3); }
    .screen nav.main { background: var(--c-mono-18); border-bottom: none; }
    .screen nav.is-visible { background: var(--c-mono-18); }

    .screen nav .toggle_wrap .logo { position: absolute; top: 0; left: 10%; bottom: 0; width: 100px; height: 80px; background: url(../images/logo_nv.png) no-repeat center; background-size: contain; }
    .screen nav .toggle_wrap .m_right_icwrap { position: absolute; right: 10%; display: flex; height: 100%; justify-content: flex-end; align-items: center; gap: 3rem; }
    .screen nav.is-visible .toggle_wrap .logo { background: url(../images/logo_wh.png) no-repeat center; background-size: contain; }
    .screen nav.main .toggle_wrap .logo { position: absolute; top: 0; left: 10%; bottom: 0; width: 100px; height: 80px; background: url(../images/logo_wh.png) no-repeat center; background-size: contain; }

    /* =================================== 언어 전환 버튼 */
    .m_right_icwrap .wrap_inner { display: flex; gap: 2rem; }
    .m_right_icwrap .wrap_inner .lang_btn { position: relative; font-size: 1.8rem; font-weight: bold; }
    .m_right_icwrap.ic_wh .wrap_inner .lang_btn { color: var(--c-mono-0);}
    .m_right_icwrap.ic_bk .wrap_inner .lang_btn { color: var(--c-mono-18);}
    .m_right_icwrap .wrap_inner .lang_btn:first-child:after { position: absolute; content: ''; top: 50%; right: -50%; transform: translate(-50%, -50%); width: 1px; height: 12px; }
    .m_right_icwrap.ic_wh .wrap_inner .lang_btn:first-child:after { background-color: var(--c-mono-0); }
    .m_right_icwrap.ic_bk .wrap_inner .lang_btn:first-child:after { background-color: var(--c-mono-18); }
    .is-visible .m_right_icwrap .wrap_inner .lang_btn { color: var(--c-mono-0); }
    .is-visible .m_right_icwrap .wrap_inner .lang_btn:first-child:after { background-color: var(--c-mono-0); }

    /* =================================== 햄버거 메뉴 */
    .toggle { display: flex; align-items: center; height: 80px; cursor: pointer; }
    .toggle span { position: relative; width: 30px; height: 2px; align-self: center; transition: background-color 0.2s ease-out; font-size: 0; background-color: var(--c-mono-18); border-radius: 10rem; }
    .toggle span:before,
    .toggle span:after { content: ""; position: absolute; width: 100%; height: 100%; background-color: var(--c-mono-18); border-radius: 10rem; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out; }
    .toggle span:before { bottom: calc(100% + 7px); }
    .toggle span:after { top: calc(100% + 7px); }

    .toggle.toggle_wh span,
    .toggle.toggle_wh span:before,
    .toggle.toggle_wh span:after { background: var(--c-mono-0); }

    .toggle.toggle_bk span,
    .toggle.toggle_bk span:before,
    .toggle.toggle_bk span:after { background: var(--c-mono-18); }

    .is-visible .toggle.toggle_wh span { background-color: transparent; }
    .is-visible .toggle span,
    .is-visible .toggle.toggle_bk span { background-color: transparent; }
    .is-visible .toggle span:before,
    .is-visible .toggle.toggle_bk span:before { bottom: auto; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--c-mono-0); }
    .is-visible .toggle span:after,
    .is-visible .toggle.toggle_bk span:after { top: auto; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: var(--c-mono-0); }

    .screen .menu-container { position: relative; -webkit-transform: translateX(0); transform: translateX(0); transition: -webkit-transform 0.25s ease-out;transition: transform 0.25s ease-out; transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; }
    .screen .view-submenu .menu-container { -webkit-transform: translateX(-100%); transform: translateX(-100%); }

    .screen ul { position: absolute; top: 60px; width: 100%; height: 100vh; color: var(--c-mono-0); background-color: var(--c-mono-18); }
    .screen ul li:first-child { margin-top: 4rem; }
    .screen ul li a { opacity: 0; display: block; padding: 3rem 10%; position: relative; cursor: pointer; text-decoration: none; color: var(--c-mono-0); border-bottom: 1px solid rgba(255,255,255,0.2); font-size: 2rem; font-weight: 700; -webkit-transform: translateY(12px); transform: translateY(12px); transition: opacity 0.15s 0.1s ease-out, -webkit-transform 0.15s 0.1s ease-out; transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out; transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out, -webkit-transform 0.15s 0.1s ease-out; }
    .screen ul li.has-children span { position: absolute; top: 0; right: 10%; bottom: 0; width: 100%; margin: auto; padding: 12px 16px; text-indent: -9999px; }
    .screen ul li.has-children span:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; padding: 5px; width: 0px; height: 0px; cursor: pointer; font-size: 0; border-bottom: 1px solid var(--c-mono-3); border-right: 1px solid var(--c-mono-3); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    .screen ul li.has-children span:hover:after { border-color: var(--c-mono-6); }
    .screen ul li.top_mg { margin-top: 4rem; }

    .screen .menu { opacity: 0; transition: background-color 0.25s ease-out, opacity 0.15s ease-out; }
    .screen .menu.is-visible { opacity: 1; }
    .screen .menu.is-visible li a { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
    .screen .view-submenu .menu { background-color: #3e3e3e; }
    .screen .view-submenu .menu > li > a { opacity: 0; transition: opacity 0.15s ease-out; }
      
    ul.sub_menu { position: absolute; top: 0; left: 100%; background-color: var(--c-mono-18); }
    ul.sub_menu li { margin-left: 60px; }
      
    .hide-submenu { position: absolute; top: 0; left: 0; width: 60px; height: 100vh; cursor: pointer; background-color: var(--c-mono-18); transition: background-color 0.25s ease-out; }
    .hide-submenu:before { opacity: 0; content: ""; position: absolute; top: 0; right: 12px; bottom: 0; margin: auto; padding: 5px; width: 5px; height: 5px; cursor: pointer; font-size: 0; border-bottom: 1px solid var(--c-mono-3); border-right: 1px solid var(--c-mono-3); -webkit-transform: rotate(135deg); transform: rotate(135deg); left: 0; right: -6px; transition: opacity 0.1s ease-out; }
    .view-submenu .hide-submenu { background-color: var(--c-mono-18); }
    .view-submenu .hide-submenu:before { opacity: 1; transition: opacity 0.15s 0.3s ease-out; }
      
    .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; }

    .dim { display: none; position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background: var(--c-mono-18-RGBA); }

    /* 드롭다운 메뉴 */
    header .header_wrap .navbar .dropdown .dropbtn { width: 100%; height: 40px; line-height: 40px; padding: 0; color: var(--c-mono-18); text-align: left; }
    header .header_wrap .navbar .dropdown .dropbtn::after { float: right; width: 3rem; content: '\002B'; font-size: 3rem; text-align: center; }
    header .header_wrap .navbar .dropdown .dropbtn.on::after { width: 3rem; content: '\2212'; font-size: 3rem; text-align: center; }
    header .header_wrap .navbar .dropdown .dropdown-content { display: none; position: unset; background-color: transparent;box-shadow: none; transition: 0.3s; }
    header .header_wrap .navbar .dropdown .dropdown-content a { height: 50px; line-height: 50px; padding: 0 1rem; border-bottom: unset; text-align: left; }
}

@media (max-width: 768px){
}

@media (max-width: 683px){
    .screen ul li a { padding: 3rem 7%; }
    .screen nav .toggle_wrap .logo { left: 7%; }
    .screen nav .toggle_wrap .m_right_icwrap { right: 7%; }
    .screen nav.main .toggle_wrap .logo { left: 7%; }
}

@media (max-width: 450px){
}

@media (max-width: 290px){
}