/* Header UI (시안 기준) */

header.siteHeader { position: sticky; top: 0; z-index: 999; background: transparent; border-bottom: 0; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
/* 다크 헤더 스킨  */
body.sub_01_01 header.siteHeader, body.sub_01_02 header.siteHeader, body.sub_02_01_01 header.siteHeader, body.sub_02_01_02 header.siteHeader, body.sub_02_01_03 header.siteHeader, body.sub_02_01_04 header.siteHeader { border-bottom-color: rgba(253, 191, 191, 0.1); backdrop-filter: none; }
/* 로그인 메시지 */
#hd_login_msg { position: sticky; top: 2%; width: 100%; background: transparent; color: #111; font-size: 13px; font-weight: 600; line-height: 36px; text-align: left; padding: 0 90px 0; box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
#hd_login_msg a { display: inline-flex; align-items: center; justify-content: center; order: -1; padding: 0px 12px; margin-right: 0; font-family: 'Poppins', sans-serif; border-radius: 999px; background: #f3f3f3; color: #111111; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
/* 브라우저 기본 :visited · 클릭/포커스 시 글자색 유지 */
#hd_login_msg a:link, #hd_login_msg a:visited, #hd_login_msg a:active, #hd_login_msg a:focus { color: #111111; }
#hd_login_msg a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#hd_login_msg a:hover { background: #e4e4e4; color: #111111; }
body.main #hd_login_msg { color: #fff; }
body.sub_01_01 #hd_login_msg, body.sub_01_02 #hd_login_msg, body.sub_02_01_01 #hd_login_msg, body.sub_02_01_02 #hd_login_msg, body.sub_02_01_03 #hd_login_msg, body.sub_02_01_04 #hd_login_msg, body.sub_02_02_01 #hd_login_msg { color: #fff; }
body.main #hd_login_msg a, body.sub_01_01 #hd_login_msg a, body.sub_01_02 #hd_login_msg a, body.sub_02_01_01 #hd_login_msg a, body.sub_02_01_02 #hd_login_msg a, body.sub_02_01_03 #hd_login_msg a, body.sub_02_01_04 #hd_login_msg a, body.sub_02_02_01 #hd_login_msg a { background: #1d1d1d; border-color: #1d1d1d; color: #ffffff; }
body.main #hd_login_msg a:hover, body.sub_01_01 #hd_login_msg a:hover, body.sub_01_02 #hd_login_msg a:hover, body.sub_02_01_01 #hd_login_msg a:hover, body.sub_02_01_02 #hd_login_msg a:hover, body.sub_02_01_03 #hd_login_msg a:hover, body.sub_02_01_04 #hd_login_msg a:hover, body.sub_02_02_01 #hd_login_msg a:hover { background: #2e2e2e; border-color: #2e2e2e; color: #ffffff; }
body.main #hd_login_msg a:link, body.main #hd_login_msg a:visited, body.main #hd_login_msg a:active, body.main #hd_login_msg a:focus, body.sub_01_01 #hd_login_msg a:link, body.sub_01_01 #hd_login_msg a:visited, body.sub_01_01 #hd_login_msg a:active, body.sub_01_01 #hd_login_msg a:focus, body.sub_01_02 #hd_login_msg a:link, body.sub_01_02 #hd_login_msg a:visited, body.sub_01_02 #hd_login_msg a:active, body.sub_01_02 #hd_login_msg a:focus, body.sub_02_01_01 #hd_login_msg a:link, body.sub_02_01_01 #hd_login_msg a:visited, body.sub_02_01_01 #hd_login_msg a:active, body.sub_02_01_01 #hd_login_msg a:focus, body.sub_02_01_02 #hd_login_msg a:link, body.sub_02_01_02 #hd_login_msg a:visited, body.sub_02_01_02 #hd_login_msg a:active, body.sub_02_01_02 #hd_login_msg a:focus, body.sub_02_01_03 #hd_login_msg a:link, body.sub_02_01_03 #hd_login_msg a:visited, body.sub_02_01_03 #hd_login_msg a:active, body.sub_02_01_03 #hd_login_msg a:focus, body.sub_02_01_04 #hd_login_msg a:link, body.sub_02_01_04 #hd_login_msg a:visited, body.sub_02_01_04 #hd_login_msg a:active, body.sub_02_01_04 #hd_login_msg a:focus, body.sub_02_02_01 #hd_login_msg a:link, body.sub_02_02_01 #hd_login_msg a:visited, body.sub_02_02_01 #hd_login_msg a:active, body.sub_02_02_01 #hd_login_msg a:focus { color: #ffffff; }
body.is-scrolled #hd_login_msg { color: #111; }
body.sub_01_01 header.siteHeader nav > ul.gnb > li > a, body.sub_01_02 header.siteHeader nav > ul.gnb > li > a, body.sub_02_01_01 header.siteHeader nav > ul.gnb > li > a, body.sub_02_01_02 header.siteHeader nav > ul.gnb > li > a, body.sub_02_01_03 header.siteHeader nav > ul.gnb > li > a, body.sub_02_01_04 header.siteHeader nav > ul.gnb > li > a, body.sub_02_02_01 header.siteHeader nav > ul.gnb > li > a { color: rgba(255, 255, 255, 0.92); }
body.sub_01_01 header.siteHeader nav > ul.gnb > li.active > a, body.sub_01_01 header.siteHeader nav > ul.gnb > li > a:hover, body.sub_01_02 header.siteHeader nav > ul.gnb > li.active > a, body.sub_01_02 header.siteHeader nav > ul.gnb > li > a:hover, body.sub_02_01_01 header.siteHeader nav > ul.gnb > li.active > a, body.sub_02_01_01 header.siteHeader nav > ul.gnb > li > a:hover, body.sub_02_01_02 header.siteHeader nav > ul.gnb > li.active > a, body.sub_02_01_02 header.siteHeader nav > ul.gnb > li > a:hover, body.sub_02_01_03 header.siteHeader nav > ul.gnb > li.active > a, body.sub_02_01_03 header.siteHeader nav > ul.gnb > li > a:hover, body.sub_02_01_04 header.siteHeader nav > ul.gnb > li.active > a, body.sub_02_01_04 header.siteHeader nav > ul.gnb > li > a:hover, body.sub_02_02_01 header.siteHeader nav > ul.gnb > li.active > a, body.sub_02_02_01 header.siteHeader nav > ul.gnb > li > a:hover { color: #ffffff; }
/* 로고 이미지 색 반전*/
body.sub_01_01 header.siteHeader h1 img, body.sub_01_02 header.siteHeader h1 img, body.sub_02_01_01 header.siteHeader h1 img, body.sub_02_01_02 header.siteHeader h1 img, body.sub_02_01_03 header.siteHeader h1 img, body.sub_02_01_04 header.siteHeader h1 img, body.sub_02_02_01 header.siteHeader h1 img { filter: brightness(0) invert(1); }
body.sub_01_01 header.siteHeader .rightMenu > a.poppinsFont, body.sub_01_02 header.siteHeader .rightMenu > a.poppinsFont, body.sub_02_01_01 header.siteHeader .rightMenu > a.poppinsFont, body.sub_02_01_02 header.siteHeader .rightMenu > a.poppinsFont, body.sub_02_01_03 header.siteHeader .rightMenu > a.poppinsFont, body.sub_02_01_04 header.siteHeader .rightMenu > a.poppinsFont, body.sub_02_02_01 header.siteHeader .rightMenu > a.poppinsFont { background: #1d1d1d; border-color: #1d1d1d; color: #ffffff; }
body.sub_01_01 header.siteHeader .rightMenu > a.poppinsFont:hover, body.sub_01_01 header.siteHeader .rightMenu > a.poppinsFont:focus-visible, body.sub_01_02 header.siteHeader .rightMenu > a.poppinsFont:hover, body.sub_01_02 header.siteHeader .rightMenu > a.poppinsFont:focus-visible, body.sub_02_01_01 header.siteHeader .rightMenu > a.poppinsFont:hover, body.sub_02_01_01 header.siteHeader .rightMenu > a.poppinsFont:focus-visible, body.sub_02_01_02 header.siteHeader .rightMenu > a.poppinsFont:hover, body.sub_02_01_02 header.siteHeader .rightMenu > a.poppinsFont:focus-visible, body.sub_02_01_03 header.siteHeader .rightMenu > a.poppinsFont:hover, body.sub_02_01_03 header.siteHeader .rightMenu > a.poppinsFont:focus-visible, body.sub_02_01_04 header.siteHeader .rightMenu > a.poppinsFont:hover, body.sub_02_01_04 header.siteHeader .rightMenu > a.poppinsFont:focus-visible, body.sub_02_02_01 header.siteHeader .rightMenu > a.poppinsFont:hover, body.sub_02_02_01 header.siteHeader .rightMenu > a.poppinsFont:focus-visible { background: #2e2e2e; border-color: #2e2e2e; color: #ffffff; }
body.sub_01_01 header.siteHeader .lang > button, body.sub_01_02 header.siteHeader .lang > button, body.sub_02_01_01 header.siteHeader .lang > button, body.sub_02_01_02 header.siteHeader .lang > button, body.sub_02_01_03 header.siteHeader .lang > button, body.sub_02_01_04 header.siteHeader .lang > button, body.sub_02_02_01 header.siteHeader .lang > button, body.sub_01_01 header.siteHeader .mobMenu button, body.sub_01_02 header.siteHeader .mobMenu button, body.sub_02_01_01 header.siteHeader .mobMenu button, body.sub_02_01_02 header.siteHeader .mobMenu button, body.sub_02_01_03 header.siteHeader .mobMenu button, body.sub_02_01_04 header.siteHeader .mobMenu button, body.sub_02_02_01 header.siteHeader .mobMenu button { background: transparent; border-color: transparent; }
body.sub_01_01 header.siteHeader .lang img, body.sub_01_02 header.siteHeader .lang img, body.sub_02_01_01 header.siteHeader .lang img, body.sub_02_01_02 header.siteHeader .lang img, body.sub_02_01_03 header.siteHeader .lang img, body.sub_02_01_04 header.siteHeader .lang img, body.sub_02_02_01 header.siteHeader .lang img, body.sub_01_01 header.siteHeader .mobMenu img, body.sub_01_02 header.siteHeader .mobMenu img, body.sub_02_01_01 header.siteHeader .mobMenu img, body.sub_02_01_02 header.siteHeader .mobMenu img, body.sub_02_01_03 header.siteHeader .mobMenu img, body.sub_02_01_04 header.siteHeader .mobMenu img, body.sub_02_02_01 header.siteHeader .mobMenu img { filter: brightness(0) invert(1); }
/* 텍스트 언어 버튼 + span 햄버거 대응(다크스킨) */
body.sub_01_01 header.siteHeader .lang .langBtn, body.sub_01_02 header.siteHeader .lang .langBtn, body.sub_02_01_01 header.siteHeader .lang .langBtn, body.sub_02_01_02 header.siteHeader .lang .langBtn, body.sub_02_01_03 header.siteHeader .lang .langBtn, body.sub_02_01_04 header.siteHeader .lang .langBtn, body.sub_02_02_01 header.siteHeader .lang .langBtn { color: rgba(255, 255, 255, 0.92); }
body.sub_01_01 header.siteHeader .mobMenu .hamburger::before, body.sub_01_01 header.siteHeader .mobMenu .hamburger::after, body.sub_01_02 header.siteHeader .mobMenu .hamburger::before, body.sub_01_02 header.siteHeader .mobMenu .hamburger::after, body.sub_02_01_01 header.siteHeader .mobMenu .hamburger::before, body.sub_02_01_01 header.siteHeader .mobMenu .hamburger::after, body.sub_02_01_02 header.siteHeader .mobMenu .hamburger::before, body.sub_02_01_02 header.siteHeader .mobMenu .hamburger::after, body.sub_02_01_03 header.siteHeader .mobMenu .hamburger::before, body.sub_02_01_03 header.siteHeader .mobMenu .hamburger::after, body.sub_02_01_04 header.siteHeader .mobMenu .hamburger::before, body.sub_02_01_04 header.siteHeader .mobMenu .hamburger::after, body.sub_02_02_01 header.siteHeader .mobMenu .hamburger::before, body.sub_02_02_01 header.siteHeader .mobMenu .hamburger::after { background: #fff; }
/* 다크에서 햄버거 가운데 막대는 투명 유지(2줄만) */
body.sub_01_01 header.siteHeader .mobMenu .hamburger, body.sub_01_02 header.siteHeader .mobMenu .hamburger, body.sub_02_01_01 header.siteHeader .mobMenu .hamburger, body.sub_02_01_02 header.siteHeader .mobMenu .hamburger, body.sub_02_01_03 header.siteHeader .mobMenu .hamburger, body.sub_02_01_04 header.siteHeader .mobMenu .hamburger, body.sub_02_02_01 header.siteHeader .mobMenu .hamburger { background: transparent; }
/* 다크 스킨에서 햄버거 선 흰색 */
body.sub_01_01 header.siteHeader .mobMenu button, body.sub_01_02 header.siteHeader .mobMenu button, body.sub_02_01_01 header.siteHeader .mobMenu button, body.sub_02_01_02 header.siteHeader .mobMenu button, body.sub_02_01_03 header.siteHeader .mobMenu button, body.sub_02_01_04 header.siteHeader .mobMenu button, body.sub_02_02_01 header.siteHeader .mobMenu button { color: #fff; }
/* 메인 페이지도 다크 헤더 스킨 적용 */
body.main header.siteHeader { border-bottom-color: rgba(255, 255, 255, 0.10); backdrop-filter: none; }
body.main header.siteHeader nav > ul.gnb > li > a { color: #ffffff; }
body.main header.siteHeader nav > ul.gnb > li.active > a, body.main header.siteHeader nav > ul.gnb > li > a:hover { color: #ffffff; }
body.main header.siteHeader h1 img { filter: brightness(0) invert(1); }
body.main header.siteHeader .rightMenu > a.poppinsFont { background: #1d1d1d; border-color: #1d1d1d; color: #ffffff; }
body.main header.siteHeader .rightMenu > a.poppinsFont:hover, body.main header.siteHeader .rightMenu > a.poppinsFont:focus-visible { background: #2e2e2e; border-color: #2e2e2e; color: #ffffff; }
body.main header.siteHeader .lang > button, body.main header.siteHeader .mobMenu button { background: transparent; border-color: transparent; }
body.main header.siteHeader .lang .langBtn { color: rgba(255, 255, 255, 0.92); }
body.main header.siteHeader .mobMenu .hamburger::before, body.main header.siteHeader .mobMenu .hamburger::after { background: #fff; }
body.main header.siteHeader .mobMenu .hamburger { background: transparent; }
body.main header.siteHeader .mobMenu button { color: #fff; }
body.main header.siteHeader .subMenu, body.main header.siteHeader .lang > div { background: #111111; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
body.main header.siteHeader .subMenu a, body.main header.siteHeader .lang a { color: rgba(255, 255, 255, 0.86); }
body.main header.siteHeader .subMenu li.active > a, body.main header.siteHeader .subMenu a:hover, body.main header.siteHeader .lang a.active, body.main header.siteHeader .lang a:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
/* ----- 스크롤 후 라이트 헤더  ----- */
body.main header.siteHeader.home.scroll, body.sub_01_01 header.siteHeader.scroll, body.sub_01_02 header.siteHeader.scroll, body.sub_02_01_01 header.siteHeader.scroll, body.sub_02_01_02 header.siteHeader.scroll, body.sub_02_01_03 header.siteHeader.scroll, body.sub_02_01_04 header.siteHeader.scroll, body.sub_02_02_01 header.siteHeader.scroll { background: #ffffff; border-bottom: 1px solid rgba(11, 15, 26, 0.08); backdrop-filter: none; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 0 rgba(11, 15, 26, 0.04); }
body.main header.siteHeader.home.scroll h1 img, body.sub_01_01 header.siteHeader.scroll h1 img, body.sub_01_02 header.siteHeader.scroll h1 img, body.sub_02_01_01 header.siteHeader.scroll h1 img, body.sub_02_01_02 header.siteHeader.scroll h1 img, body.sub_02_01_03 header.siteHeader.scroll h1 img, body.sub_02_01_04 header.siteHeader.scroll h1 img, body.sub_02_02_01 header.siteHeader.scroll h1 img { filter: none; }
body.main header.siteHeader.home.scroll nav > ul.gnb > li > a, body.sub_01_01 header.siteHeader.scroll nav > ul.gnb > li > a, body.sub_01_02 header.siteHeader.scroll nav > ul.gnb > li > a, body.sub_02_01_01 header.siteHeader.scroll nav > ul.gnb > li > a, body.sub_02_01_02 header.siteHeader.scroll nav > ul.gnb > li > a, body.sub_02_01_03 header.siteHeader.scroll nav > ul.gnb > li > a, body.sub_02_01_04 header.siteHeader.scroll nav > ul.gnb > li > a, body.sub_02_02_01 header.siteHeader.scroll nav > ul.gnb > li > a { color: #111111; }
body.main header.siteHeader.home.scroll nav > ul.gnb > li.active > a, body.main header.siteHeader.home.scroll nav > ul.gnb > li > a:hover, body.sub_01_01 header.siteHeader.scroll nav > ul.gnb > li.active > a, body.sub_01_01 header.siteHeader.scroll nav > ul.gnb > li > a:hover, body.sub_01_02 header.siteHeader.scroll nav > ul.gnb > li.active > a, body.sub_01_02 header.siteHeader.scroll nav > ul.gnb > li > a:hover, body.sub_02_01_01 header.siteHeader.scroll nav > ul.gnb > li.active > a, body.sub_02_01_01 header.siteHeader.scroll nav > ul.gnb > li > a:hover, body.sub_02_01_02 header.siteHeader.scroll nav > ul.gnb > li.active > a, body.sub_02_01_02 header.siteHeader.scroll nav > ul.gnb > li > a:hover, body.sub_02_01_03 header.siteHeader.scroll nav > ul.gnb > li.active > a, body.sub_02_01_03 header.siteHeader.scroll nav > ul.gnb > li > a:hover, body.sub_02_01_04 header.siteHeader.scroll nav > ul.gnb > li.active > a, body.sub_02_01_04 header.siteHeader.scroll nav > ul.gnb > li > a:hover, body.sub_02_02_01 header.siteHeader.scroll nav > ul.gnb > li.active > a, body.sub_02_02_01 header.siteHeader.scroll nav > ul.gnb > li > a:hover { color: #053377; }
body.main header.siteHeader.home.scroll .rightMenu > a.poppinsFont, body.sub_01_01 header.siteHeader.scroll .rightMenu > a.poppinsFont, body.sub_01_02 header.siteHeader.scroll .rightMenu > a.poppinsFont, body.sub_02_01_01 header.siteHeader.scroll .rightMenu > a.poppinsFont, body.sub_02_01_02 header.siteHeader.scroll .rightMenu > a.poppinsFont, body.sub_02_01_03 header.siteHeader.scroll .rightMenu > a.poppinsFont, body.sub_02_01_04 header.siteHeader.scroll .rightMenu > a.poppinsFont, body.sub_02_02_01 header.siteHeader.scroll .rightMenu > a.poppinsFont { background: #f3f3f3; border-color: transparent; color: #111111; }
body.main header.siteHeader.home.scroll .rightMenu > a.poppinsFont:hover, body.main header.siteHeader.home.scroll .rightMenu > a.poppinsFont:focus-visible, body.sub_01_01 header.siteHeader.scroll .rightMenu > a.poppinsFont:hover, body.sub_01_01 header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible, body.sub_01_02 header.siteHeader.scroll .rightMenu > a.poppinsFont:hover, body.sub_01_02 header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible, body.sub_02_01_01 header.siteHeader.scroll .rightMenu > a.poppinsFont:hover, body.sub_02_01_01 header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible, body.sub_02_01_02 header.siteHeader.scroll .rightMenu > a.poppinsFont:hover, body.sub_02_01_02 header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible, body.sub_02_01_03 header.siteHeader.scroll .rightMenu > a.poppinsFont:hover, body.sub_02_01_03 header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible, body.sub_02_01_04 header.siteHeader.scroll .rightMenu > a.poppinsFont:hover, body.sub_02_01_04 header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible, body.sub_02_02_01 header.siteHeader.scroll .rightMenu > a.poppinsFont:hover, body.sub_02_02_01 header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible { background: #e4e4e4; color: #111111; }
body.main header.siteHeader.home.scroll .lang .langBtn, body.sub_01_01 header.siteHeader.scroll .lang .langBtn, body.sub_01_02 header.siteHeader.scroll .lang .langBtn, body.sub_02_01_01 header.siteHeader.scroll .lang .langBtn, body.sub_02_01_02 header.siteHeader.scroll .lang .langBtn, body.sub_02_01_03 header.siteHeader.scroll .lang .langBtn, body.sub_02_01_04 header.siteHeader.scroll .lang .langBtn, body.sub_02_02_01 header.siteHeader.scroll .lang .langBtn { color: rgba(11, 15, 26, 0.88); }
body.main header.siteHeader.home.scroll .mobMenu button, body.sub_01_01 header.siteHeader.scroll .mobMenu button, body.sub_01_02 header.siteHeader.scroll .mobMenu button, body.sub_02_01_01 header.siteHeader.scroll .mobMenu button, body.sub_02_01_02 header.siteHeader.scroll .mobMenu button, body.sub_02_01_03 header.siteHeader.scroll .mobMenu button, body.sub_02_01_04 header.siteHeader.scroll .mobMenu button, body.sub_02_02_01 header.siteHeader.scroll .mobMenu button { color: #111111; }
body.main header.siteHeader.home.scroll .mobMenu .hamburger::before, body.main header.siteHeader.home.scroll .mobMenu .hamburger::after, body.sub_01_01 header.siteHeader.scroll .mobMenu .hamburger::before, body.sub_01_01 header.siteHeader.scroll .mobMenu .hamburger::after, body.sub_01_02 header.siteHeader.scroll .mobMenu .hamburger::before, body.sub_01_02 header.siteHeader.scroll .mobMenu .hamburger::after, body.sub_02_01_01 header.siteHeader.scroll .mobMenu .hamburger::before, body.sub_02_01_01 header.siteHeader.scroll .mobMenu .hamburger::after, body.sub_02_01_02 header.siteHeader.scroll .mobMenu .hamburger::before, body.sub_02_01_02 header.siteHeader.scroll .mobMenu .hamburger::after, body.sub_02_01_03 header.siteHeader.scroll .mobMenu .hamburger::before, body.sub_02_01_03 header.siteHeader.scroll .mobMenu .hamburger::after, body.sub_02_01_04 header.siteHeader.scroll .mobMenu .hamburger::before, body.sub_02_01_04 header.siteHeader.scroll .mobMenu .hamburger::after, body.sub_02_02_01 header.siteHeader.scroll .mobMenu .hamburger::before, body.sub_02_02_01 header.siteHeader.scroll .mobMenu .hamburger::after { background: #111111; }
body.main header.siteHeader.home.scroll .subMenu, body.main header.siteHeader.home.scroll .lang > div, body.sub_01_01 header.siteHeader.scroll .subMenu, body.sub_01_01 header.siteHeader.scroll .lang > div, body.sub_01_02 header.siteHeader.scroll .subMenu, body.sub_01_02 header.siteHeader.scroll .lang > div, body.sub_02_01_01 header.siteHeader.scroll .subMenu, body.sub_02_01_01 header.siteHeader.scroll .lang > div, body.sub_02_01_02 header.siteHeader.scroll .subMenu, body.sub_02_01_02 header.siteHeader.scroll .lang > div, body.sub_02_01_03 header.siteHeader.scroll .subMenu, body.sub_02_01_03 header.siteHeader.scroll .lang > div, body.sub_02_01_04 header.siteHeader.scroll .subMenu, body.sub_02_01_04 header.siteHeader.scroll .lang > div, body.sub_02_02_01 header.siteHeader.scroll .subMenu, body.sub_02_02_01 header.siteHeader.scroll .lang > div { background: #ffffff; border: 1px solid rgba(11, 15, 26, 0.10); box-shadow: 0 18px 40px rgba(11, 15, 26, 0.08); }
body.main header.siteHeader.home.scroll .subMenu a, body.main header.siteHeader.home.scroll .lang a, body.sub_01_01 header.siteHeader.scroll .subMenu a, body.sub_01_01 header.siteHeader.scroll .lang a, body.sub_01_02 header.siteHeader.scroll .subMenu a, body.sub_01_02 header.siteHeader.scroll .lang a, body.sub_02_01_01 header.siteHeader.scroll .subMenu a, body.sub_02_01_01 header.siteHeader.scroll .lang a, body.sub_02_01_02 header.siteHeader.scroll .subMenu a, body.sub_02_01_02 header.siteHeader.scroll .lang a, body.sub_02_01_03 header.siteHeader.scroll .subMenu a, body.sub_02_01_03 header.siteHeader.scroll .lang a, body.sub_02_01_04 header.siteHeader.scroll .subMenu a, body.sub_02_01_04 header.siteHeader.scroll .lang a, body.sub_02_02_01 header.siteHeader.scroll .subMenu a, body.sub_02_02_01 header.siteHeader.scroll .lang a { color: rgba(11, 15, 26, 0.80); }
body.main header.siteHeader.home.scroll .subMenu li.active > a, body.main header.siteHeader.home.scroll .subMenu a:hover, body.main header.siteHeader.home.scroll .lang a.active, body.main header.siteHeader.home.scroll .lang a:hover, body.sub_01_01 header.siteHeader.scroll .subMenu li.active > a, body.sub_01_01 header.siteHeader.scroll .subMenu a:hover, body.sub_01_01 header.siteHeader.scroll .lang a.active, body.sub_01_01 header.siteHeader.scroll .lang a:hover, body.sub_01_02 header.siteHeader.scroll .subMenu li.active > a, body.sub_01_02 header.siteHeader.scroll .subMenu a:hover, body.sub_01_02 header.siteHeader.scroll .lang a.active, body.sub_01_02 header.siteHeader.scroll .lang a:hover, body.sub_02_01_01 header.siteHeader.scroll .subMenu li.active > a, body.sub_02_01_01 header.siteHeader.scroll .subMenu a:hover, body.sub_02_01_01 header.siteHeader.scroll .lang a.active, body.sub_02_01_01 header.siteHeader.scroll .lang a:hover, body.sub_02_01_02 header.siteHeader.scroll .subMenu li.active > a, body.sub_02_01_02 header.siteHeader.scroll .subMenu a:hover, body.sub_02_01_02 header.siteHeader.scroll .lang a.active, body.sub_02_01_02 header.siteHeader.scroll .lang a:hover, body.sub_02_01_03 header.siteHeader.scroll .subMenu li.active > a, body.sub_02_01_03 header.siteHeader.scroll .subMenu a:hover, body.sub_02_01_03 header.siteHeader.scroll .lang a.active, body.sub_02_01_03 header.siteHeader.scroll .lang a:hover, body.sub_02_01_04 header.siteHeader.scroll .subMenu li.active > a, body.sub_02_01_04 header.siteHeader.scroll .subMenu a:hover, body.sub_02_01_04 header.siteHeader.scroll .lang a.active, body.sub_02_01_04 header.siteHeader.scroll .lang a:hover, body.sub_02_02_01 header.siteHeader.scroll .subMenu li.active > a, body.sub_02_02_01 header.siteHeader.scroll .subMenu a:hover, body.sub_02_02_01 header.siteHeader.scroll .lang a.active, body.sub_02_02_01 header.siteHeader.scroll .lang a:hover { background: rgba(5, 51, 119, 0.08); color: #053377; }
body.main header.siteHeader.home.scroll .subMenu ul.subMenu__child, body.sub_01_01 header.siteHeader.scroll .subMenu ul.subMenu__child, body.sub_01_02 header.siteHeader.scroll .subMenu ul.subMenu__child, body.sub_02_01_01 header.siteHeader.scroll .subMenu ul.subMenu__child, body.sub_02_01_02 header.siteHeader.scroll .subMenu ul.subMenu__child, body.sub_02_01_03 header.siteHeader.scroll .subMenu ul.subMenu__child, body.sub_02_01_04 header.siteHeader.scroll .subMenu ul.subMenu__child, body.sub_02_02_01 header.siteHeader.scroll .subMenu ul.subMenu__child { background: #ffffff; border-color: rgba(11, 15, 26, 0.10); box-shadow: none; }
/* ----- 스크롤 후 라이트 헤더: sub_05 (기술자료·FAQ·정책 등 밝은 배경) ----- */:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll { background: #ffffff; border-bottom: 1px solid rgba(11, 15, 26, 0.08); backdrop-filter: none; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 0 rgba(11, 15, 26, 0.04);

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll h1 img { filter: none;

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll nav > ul.gnb > li > a { color: #111111;

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll nav > ul.gnb > li.active > a,:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll nav > ul.gnb > li > a:hover { color: #053377;

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .rightMenu > a.poppinsFont { background: #f3f3f3; border-color: transparent; color: #111111;

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .rightMenu > a.poppinsFont:hover,:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible { background: #e4e4e4; color: #111111;

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .lang .langBtn { color: rgba(11, 15, 26, 0.88);

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .mobMenu button { color: #111111;

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .mobMenu .hamburger::before,:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .mobMenu .hamburger::after { background: #111111;

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .subMenu,:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .lang > div { background: #ffffff; border: 1px solid rgba(11, 15, 26, 0.10); box-shadow: 0 18px 40px rgba(11, 15, 26, 0.08);

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .subMenu a,:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .lang a { color: rgba(11, 15, 26, 0.80);

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .subMenu li.active > a,:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .subMenu a:hover,:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .lang a.active,:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .lang a:hover { background: rgba(5, 51, 119, 0.08); color: #053377;

}:is(body.sub_05_01, body.sub_05_02, body.sub_05_03, body.sub_06_01, body.sub_06_02, body.sub_06_03) header.siteHeader.scroll .subMenu ul.subMenu__child { background: #ffffff; border-color: rgba(11, 15, 26, 0.10); box-shadow: none; }
header.siteHeader .siteHeader__inner { max-width: 1740px; width: calc(100% - 180px); margin: 0 auto; height: 130px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 42px; }
header.siteHeader h1 { margin: 0; line-height: 0; flex: 0 0 auto; }
header.siteHeader h1 img { height: 38px; width: auto; display: block; }
header.siteHeader .gnbBox { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-start; gap: 28px; }
header.siteHeader nav > ul.gnb { display: flex; align-items: center; justify-content: flex-start; gap: 42px; margin: 0; padding: 0; list-style: none; }
header.siteHeader nav > ul.gnb > li { position: relative; }
header.siteHeader nav > ul.gnb > li > a { display: inline-flex; align-items: center; color: #111; font-size: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; word-break: keep-all; }
header.siteHeader nav > ul.gnb > li.active > a, header.siteHeader nav > ul.gnb > li > a:hover { color: #053377; }
/* 2depth 드롭다운 (hover) */
header.siteHeader .subMenu { --subMenuPadX: 14px; --subMenuItemPadX: 12px; --subMenuTextAlignOffset: calc(var(--subMenuPadX) + var(--subMenuItemPadX)); position: absolute; top: 100%; left: calc(0px - var(--subMenuTextAlignOffset)); transform: translateY(18px); min-width: 180px; padding: var(--subMenuPadX) var(--subMenuPadX); border-radius: 16px; background: #ffffff; border: 1px solid rgba(11, 15, 26, 0.10); z-index: 50; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; }
/* hover 끊김 방지: 메뉴와 드롭다운 사이 투명 브릿지 */
header.siteHeader .subMenu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
header.siteHeader .subMenu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
/* 제품소개: 우측 flyout(2중 박스) */
header.siteHeader .subMenu li.hasChildren { position: relative; }
header.siteHeader .subMenu li.hasChildren > a { font-weight: 700; position: relative; padding-right: calc(var(--subMenuItemPadX) + 18px); }
header.siteHeader .subMenu li.hasChildren > a::after { content: ""; position: absolute; right: var(--subMenuItemPadX); top: 50%; transform: translateY(-50%) rotate(-45deg); width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 0.55; }
header.siteHeader .subMenu ul.subMenu__child { position: absolute; top: calc(0px - var(--subMenuPadX) - 2px); left: calc(100% + 18px); min-width: 180px; padding: var(--subMenuPadX) var(--subMenuPadX); border-radius: 16px; background: #ffffff; border: 1px solid rgba(11, 15, 26, 0.10); box-shadow: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; transform: translateY(0); }
/* 다크 헤더 스킨에서 flyout */
body.sub_01_01 header.siteHeader .subMenu ul.subMenu__child, body.sub_01_02 header.siteHeader .subMenu ul.subMenu__child, body.sub_02_01_01 header.siteHeader .subMenu ul.subMenu__child, body.sub_02_01_02 header.siteHeader .subMenu ul.subMenu__child, body.sub_02_01_03 header.siteHeader .subMenu ul.subMenu__child, body.sub_02_01_04 header.siteHeader .subMenu ul.subMenu__child, body.sub_02_02_01 header.siteHeader .subMenu ul.subMenu__child, body.main header.siteHeader .subMenu ul.subMenu__child { background: #111111; border-color: rgba(255, 255, 255, 0.10); box-shadow: none; }
header.siteHeader nav > ul.gnb > li:has(ul.subMenu__child) > .subMenu { box-shadow: none; }
/* hover 끊김 방지: flyout 브릿지 */
header.siteHeader .subMenu ul.subMenu__child::before { content: ""; position: absolute; left: -18px; top: 0; width: 18px; height: 100%; }
header.siteHeader .subMenu li.hasChildren:hover > ul.subMenu__child, header.siteHeader .subMenu li.hasChildren:focus-within > ul.subMenu__child { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 160ms ease, transform 160ms ease, visibility 0s; }
header.siteHeader .subMenu a { display: block; padding: 10px var(--subMenuItemPadX); border-radius: 12px; text-decoration: none; font-family: 'Pretendard', sans-serif; font-size: 16px; line-height: 1.2; font-weight: 600; color: rgba(11, 15, 26, 0.80); white-space: nowrap; }
header.siteHeader .subMenu li.active > a, header.siteHeader .subMenu a:hover { background: rgba(5, 51, 119, 0.08); color: #053377; }
header.siteHeader nav > ul.gnb > li:hover > .subMenu, header.siteHeader nav > ul.gnb > li:focus-within > .subMenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(16px); transition: opacity 160ms ease, transform 160ms ease, visibility 0s; }
/* 다크 헤더 스킨에서 드롭다운 */
body.sub_01_01 header.siteHeader .subMenu, body.sub_01_02 header.siteHeader .subMenu, body.sub_02_01_01 header.siteHeader .subMenu, body.sub_02_01_02 header.siteHeader .subMenu, body.sub_02_01_03 header.siteHeader .subMenu, body.sub_02_01_04 header.siteHeader .subMenu, body.sub_02_02_01 header.siteHeader .subMenu, body.sub_01_01 header.siteHeader .lang > div, body.sub_01_02 header.siteHeader .lang > div, body.sub_02_01_01 header.siteHeader .lang > div, body.sub_02_01_02 header.siteHeader .lang > div, body.sub_02_01_03 header.siteHeader .lang > div, body.sub_02_01_04 header.siteHeader .lang > div, body.sub_02_02_01 header.siteHeader .lang > div { background: #111111; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
body.sub_01_01 header.siteHeader .subMenu a, body.sub_01_02 header.siteHeader .subMenu a, body.sub_02_01_01 header.siteHeader .subMenu a, body.sub_02_01_02 header.siteHeader .subMenu a, body.sub_02_01_03 header.siteHeader .subMenu a, body.sub_02_01_04 header.siteHeader .subMenu a, body.sub_02_02_01 header.siteHeader .subMenu a, body.sub_01_01 header.siteHeader .lang a, body.sub_01_02 header.siteHeader .lang a, body.sub_02_01_01 header.siteHeader .lang a, body.sub_02_01_02 header.siteHeader .lang a, body.sub_02_01_03 header.siteHeader .lang a, body.sub_02_01_04 header.siteHeader .lang a, body.sub_02_02_01 header.siteHeader .lang a { color: rgba(255, 255, 255, 0.86); }
body.sub_01_01 header.siteHeader .subMenu li.active > a, body.sub_01_01 header.siteHeader .subMenu a:hover, body.sub_01_02 header.siteHeader .subMenu li.active > a, body.sub_01_02 header.siteHeader .subMenu a:hover, body.sub_02_01_01 header.siteHeader .subMenu li.active > a, body.sub_02_01_01 header.siteHeader .subMenu a:hover, body.sub_02_01_02 header.siteHeader .subMenu li.active > a, body.sub_02_01_02 header.siteHeader .subMenu a:hover, body.sub_02_01_03 header.siteHeader .subMenu li.active > a, body.sub_02_01_03 header.siteHeader .subMenu a:hover, body.sub_02_01_04 header.siteHeader .subMenu li.active > a, body.sub_02_01_04 header.siteHeader .subMenu a:hover, body.sub_02_02_01 header.siteHeader .subMenu li.active > a, body.sub_02_02_01 header.siteHeader .subMenu a:hover, body.sub_01_01 header.siteHeader .lang a.active, body.sub_01_01 header.siteHeader .lang a:hover, body.sub_01_02 header.siteHeader .lang a.active, body.sub_01_02 header.siteHeader .lang a:hover, body.sub_02_01_01 header.siteHeader .lang a.active, body.sub_02_01_01 header.siteHeader .lang a:hover, body.sub_02_01_02 header.siteHeader .lang a.active, body.sub_02_01_02 header.siteHeader .lang a:hover, body.sub_02_01_03 header.siteHeader .lang a.active, body.sub_02_01_03 header.siteHeader .lang a:hover, body.sub_02_01_04 header.siteHeader .lang a.active, body.sub_02_01_04 header.siteHeader .lang a:hover, body.sub_02_02_01 header.siteHeader .lang a.active, body.sub_02_02_01 header.siteHeader .lang a:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
header.siteHeader .rightMenu { flex: 0 0 auto; display: flex; align-items: center; gap: 25px; margin-left: auto; /* 문의하기/KOR/메뉴를 우측 끝으로 */
}
header.siteHeader .rightMenu > a.poppinsFont { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; margin-right: 40px; font-family: 'Poppins', sans-serif; border-radius: 999px; background: #f3f3f3; color: #111; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
header.siteHeader .rightMenu > a.poppinsFont:hover, header.siteHeader .rightMenu > a.poppinsFont:focus-visible { background: #e4e4e4; color: #111; }
header.siteHeader .rightMenu > a.poppinsFont:focus-visible { outline: 2px solid rgba(5, 51, 119, 0.35); outline-offset: 2px; }
header.siteHeader .rightMenu > a.poppinsFont i { font-size: 14px; line-height: 1; }
header.siteHeader .rightMenu > a.poppinsFont .ctaArrow { width: 14px; height: 14px; display: inline-block; }
header.siteHeader .rightMenu > a.poppinsFont .ctaArrow path { fill: currentColor; }
header.siteHeader .lang { position: relative; width: max-content; flex: 0 0 auto; }
/* 버튼 ↔ 패널 사이 빈 구간에서 hover가 풀리지 않도록 브릿지 (.subMenu::before 와 동일 역할) */
header.siteHeader .lang::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
header.siteHeader .lang > button { display: inline-flex; align-items: center; justify-content: center; height: 36px; border: none; background: rgba(255, 255, 255, 0); cursor: pointer; }
header.siteHeader .lang img { width: 16px; height: 16px; display: block; }
/* header.php에서 텍스트(KOR/ENG) 버튼을 쓰는 케이스 */
header.siteHeader .lang .langBtn { font-size: 16px; font-weight: 600; font-family: 'Pretendard', sans-serif; letter-spacing: 0.02em; color: #111; white-space: nowrap; }
/* 언어 패널: .subMenu 와 같은 타이포·색, 가로는 라벨 폭에 맞춤 */
header.siteHeader .lang > div { --subMenuPadX: 12px; --subMenuItemPadX: 10px; display: none; position: absolute; top: calc(100% + 8px); left: -16px; right: auto; padding: var(--subMenuPadX); width: max-content; min-width: 0; max-width: min(260px, calc(100vw - 48px)); border-radius: 16px; background: #ffffff; border: 1px solid rgba(11, 15, 26, 0.10); box-shadow: 0 18px 40px rgba(2, 8, 20, 0.12); box-sizing: border-box; z-index: 51; }
header.siteHeader .lang:hover > div, header.siteHeader .lang:focus-within > div { display: block; }
header.siteHeader .lang ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
header.siteHeader .lang a { display: block; padding: 10px var(--subMenuItemPadX); border-radius: 12px; text-decoration: none; font-family: 'Pretendard', sans-serif; font-size: 16px; line-height: 1.2; font-weight: 600; color: rgba(11, 15, 26, 0.80); white-space: nowrap; }
header.siteHeader .lang a.active, header.siteHeader .lang a:hover { background: rgba(5, 51, 119, 0.08); color: #053377; }
header.siteHeader .mobMenu { display: inline-flex; align-items: center; flex: 0 0 auto; }
header.siteHeader .mobMenu button { display: inline-flex; align-items: center; justify-content: center; height: 36px; width: auto; border-radius: 999px; border: 0; background: transparent; cursor: pointer; color: #111; padding: 0; box-sizing: border-box; overflow: hidden; line-height: 0; }
header.siteHeader .mobMenu img { width: 18px; height: 18px; display: block; }
/* header.php에서 span 햄버거를 쓰는 케이스 */
header.siteHeader .mobMenu .hamburger { width: 36px; height: 14px; background: transparent; position: relative; display: block; box-sizing: border-box; }
header.siteHeader .mobMenu .hamburger::before, header.siteHeader .mobMenu .hamburger::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
header.siteHeader .mobMenu .hamburger::before { top: 2px; }
header.siteHeader .mobMenu .hamburger::after { top: 10px; }
body.is-headerDrawerOpen { overflow: hidden; }
header.siteHeader .siteHeader__drawerBackdrop, header.siteHeader .siteHeader__drawer { display: block; }
header.siteHeader .siteHeader__drawerBackdrop { position: fixed; inset: 0; background: rgba(5, 8, 16, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 0s linear 180ms; z-index: 1200; }
header.siteHeader .siteHeader__drawer { position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100vh; height: 100dvh; background: #111111; color: #ffffff; transform: translateX(100%); transition: transform 220ms ease; z-index: 1201; box-shadow: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
header.siteHeader .siteHeader__drawerHead { height: 72px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.12); position: sticky; top: 0; z-index: 2; background: #111111; }
header.siteHeader .siteHeader__drawerHead strong { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; }
header.siteHeader .siteHeader__drawerClose { width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer; position: relative; }
header.siteHeader .siteHeader__drawerClose span { display: none; }
header.siteHeader .siteHeader__drawerClose::before, header.siteHeader .siteHeader__drawerClose::after { content: ""; position: absolute; left: 9px; top: 17px; width: 18px; height: 2px; background: #ffffff; transform-origin: 50% 50%; }
header.siteHeader .siteHeader__drawerClose::before { transform: rotate(45deg); }
header.siteHeader .siteHeader__drawerClose::after { transform: rotate(-45deg); }
header.siteHeader .siteHeader__drawerBody { height: auto; max-height: none; overflow: visible; padding: 22px 22px calc(96px + env(safe-area-inset-bottom)); }
header.siteHeader .siteHeader__drawerActions { display: grid; gap: 14px; }
header.siteHeader .siteHeader__drawerCta { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 999px; background: #f3f3f3; color: #111111; font-size: 16px; font-weight: 700; text-decoration: none; }
header.siteHeader .siteHeader__drawerLang { display: flex; gap: 8px; }
header.siteHeader .siteHeader__drawerLang a { flex: 1 1 0; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 13px; font-weight: 700; }
header.siteHeader .siteHeader__drawerLang a.active { border-color: rgba(255, 255, 255, 0.44); color: #ffffff; }
header.siteHeader .siteHeader__drawerNav { margin-top: 20px; }
header.siteHeader .siteHeader__drawerNav nav { display: block; }
header.siteHeader .siteHeader__drawerNav ul.gnb { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
header.siteHeader .siteHeader__drawerNav ul.gnb > li { border-bottom: 1px solid rgba(255, 255, 255, 0.10); padding-bottom: 16px; }
header.siteHeader .siteHeader__drawerNav ul.gnb > li > a { display: block; padding: 4px 0; color: #ffffff; font-size: 17px; font-weight: 700; text-decoration: none; }
header.siteHeader .siteHeader__drawerNav ul.gnb > li.active > a, header.siteHeader .siteHeader__drawerNav ul.gnb > li > a:hover, header.siteHeader .siteHeader__drawerNav ul.gnb > li > a:focus-visible { color: #ffffff !important; background: transparent !important; }
header.siteHeader .siteHeader__drawerNav .subMenu { position: static; left: auto; top: auto; transform: none; min-width: 0; margin-top: 8px; padding: 0 0 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; }
header.siteHeader .siteHeader__drawerNav .subMenu::before { display: none; }
header.siteHeader .siteHeader__drawerNav .subMenu ul { gap: 0; }
header.siteHeader .siteHeader__drawerNav .subMenu a { display: block; padding: 7px 0; border-radius: 0; background: transparent; color: rgba(255, 255, 255, 0.78); font-size: 14px; font-weight: 500; }
header.siteHeader .siteHeader__drawerNav .subMenu li.active > a { color: #ffffff; background: transparent; }
header.siteHeader .siteHeader__drawerNav .subMenu a:hover { background: transparent; color: #ffffff; }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > a { padding-right: 0; }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > a::after { display: none; }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren { position: relative; padding-right: 34px; }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle { position: absolute; right: 0; top: 5px; width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer; }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle::before, header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle::after { content: ""; position: absolute; left: 6px; top: 11px; width: 12px; height: 2px; background: rgba(255, 255, 255, 0.84); }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > .siteHeader__drawerToggle::after { transform: rotate(90deg); }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren.is-open > .siteHeader__drawerToggle::after { opacity: 0; }
header.siteHeader .siteHeader__drawerNav .subMenu ul.subMenu__child { position: static; top: auto; left: auto; min-width: 0; margin: 0; padding: 0 0 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
header.siteHeader .siteHeader__drawerNav .subMenu ul.subMenu__child::before { display: none; }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren > ul.subMenu__child { display: none; }
header.siteHeader .siteHeader__drawerNav .subMenu li.hasChildren.is-open > ul.subMenu__child { display: block; }
/* 드로어 내부 nav는 PC hover 드롭다운 translate 규칙 영향 제외 */
header.siteHeader .siteHeader__drawerNav nav > ul.gnb > li:hover > .subMenu, header.siteHeader .siteHeader__drawerNav nav > ul.gnb > li:focus-within > .subMenu { transform: none !important; transition: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
/* 드로어 안에서는 데스크톱 드롭다운 스킨을 완전히 비활성화 */
header.siteHeader .siteHeader__drawerNav .subMenu, header.siteHeader .siteHeader__drawerNav .subMenu ul.subMenu__child { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
header.siteHeader .siteHeader__drawerNav .subMenu li.active > a, header.siteHeader .siteHeader__drawerNav .subMenu a:hover { box-shadow: none !important; }
header.siteHeader.is-drawerOpen .siteHeader__drawerBackdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 180ms ease; }
header.siteHeader.is-drawerOpen .siteHeader__drawer { transform: translateX(0); box-shadow: -24px 0 56px rgba(0, 0, 0, 0.36); }
/* 스크롤 시 헤더(상단 GNB)만 밝은 배경·어두운 글자 — 오프캔버스는 항상 어두운 패널 + 밝은 글자
   (.scroll + nav/.subMenu 규칙이 드로어 내부 동일 마크업까지 적용되어 글자가 사라지는 현상 방지) */
header.siteHeader.scroll .siteHeader__drawer { background: #111111; color: #ffffff; }
header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerHead { background: #111111; color: #ffffff; }
header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerHead strong { color: #ffffff; }
header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerCta { background: #f3f3f3 !important; color: #111111 !important; }
header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerLang a { color: rgba(255, 255, 255, 0.82) !important; }
header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerLang a.active { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.44) !important; }
header.siteHeader.scroll .siteHeader__drawer nav > ul.gnb > li > a { color: #ffffff !important; background: transparent !important; }
header.siteHeader.scroll .siteHeader__drawer nav > ul.gnb > li.active > a, header.siteHeader.scroll .siteHeader__drawer nav > ul.gnb > li > a:hover, header.siteHeader.scroll .siteHeader__drawer nav > ul.gnb > li > a:focus-visible { color: #ffffff !important; background: transparent !important; }
header.siteHeader.scroll .siteHeader__drawer .subMenu a { color: rgba(255, 255, 255, 0.78) !important; background: transparent !important; }
header.siteHeader.scroll .siteHeader__drawer .subMenu li.active > a, header.siteHeader.scroll .siteHeader__drawer .subMenu a:hover, header.siteHeader.scroll .siteHeader__drawer .subMenu a:focus-visible { color: #ffffff !important; background: transparent !important; }
header.siteHeader.scroll .siteHeader__drawer .subMenu ul.subMenu__child a { color: rgba(255, 255, 255, 0.78) !important; }
header.siteHeader.scroll .siteHeader__drawer .subMenu ul.subMenu__child li.active > a, header.siteHeader.scroll .siteHeader__drawer .subMenu ul.subMenu__child a:hover, header.siteHeader.scroll .siteHeader__drawer .subMenu ul.subMenu__child a:focus-visible { color: #ffffff !important; }
header.siteHeader.scroll .siteHeader__drawer .subMenu li.hasChildren > .siteHeader__drawerToggle::after { background: rgba(255, 255, 255, 0.84); }
header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerClose::before, header.siteHeader.scroll .siteHeader__drawer .siteHeader__drawerClose::after { background: #ffffff; }
/* 반응형 */
@media (max-width:1600px) {
    header.siteHeader .siteHeader__inner {width:90%;}
}
@media (max-width:1440px) {
    #hd_login_msg { padding: 0 5%; }
    header.siteHeader .siteHeader__inner { width: auto; padding: 0 5%; gap: 20px; }
    header.siteHeader nav { display: none; }
    header.siteHeader .rightMenu > a.poppinsFont { display: none; }
    header.siteHeader .gnbBox { justify-content: flex-end; }
    header.siteHeader .rightMenu { gap: 14px; }
    body.main #hd_login_msg { padding: 0 5%; }
}
@media (max-width:1024px) {
    body.main #hd_login_msg { padding: 0 5%; }
    header.siteHeader .gnbBox { justify-content: flex-end; }
    header.siteHeader nav { display: none; }
}
@media (max-width:480px) {
    body.main #hd_login_msg { padding: 0 5%; }
    header.siteHeader h1 img { height: 30px; width: auto; display: block; }
    header.siteHeader .siteHeader__inner{height:80px;}
}
/* 그 외 서브·게시판(bbs_*): 위에서 지정하지 않은 페이지도 스크롤 시 라이트 헤더 */
body.sub:not(.main) header.siteHeader.scroll { background: #ffffff; border-bottom: 1px solid rgba(11, 15, 26, 0.08); backdrop-filter: none; box-shadow: 0 1px 0 rgba(11, 15, 26, 0.04); }
body.sub:not(.main) header.siteHeader.scroll h1 img { filter: none; }
body.sub:not(.main) header.siteHeader.scroll nav > ul.gnb > li > a { color: #111111; }
body.sub:not(.main) header.siteHeader.scroll nav > ul.gnb > li.active > a, body.sub:not(.main) header.siteHeader.scroll nav > ul.gnb > li > a:hover { color: #053377; }
body.sub:not(.main) header.siteHeader.scroll .rightMenu > a.poppinsFont { background: #f3f3f3; border-color: transparent; color: #111111; }
body.sub:not(.main) header.siteHeader.scroll .rightMenu > a.poppinsFont:hover, body.sub:not(.main) header.siteHeader.scroll .rightMenu > a.poppinsFont:focus-visible { background: #e4e4e4; color: #111111; }
body.sub:not(.main) header.siteHeader.scroll .lang .langBtn { color: rgba(11, 15, 26, 0.88); }
body.sub:not(.main) header.siteHeader.scroll .mobMenu button { color: #111111; }
body.sub:not(.main) header.siteHeader.scroll .mobMenu .hamburger::before, body.sub:not(.main) header.siteHeader.scroll .mobMenu .hamburger::after { background: #111111; }
body.sub:not(.main) header.siteHeader.scroll .subMenu, body.sub:not(.main) header.siteHeader.scroll .lang > div { background: #ffffff; border: 1px solid rgba(11, 15, 26, 0.10); box-shadow: 0 18px 40px rgba(11, 15, 26, 0.08); }
body.sub:not(.main) header.siteHeader.scroll .subMenu a, body.sub:not(.main) header.siteHeader.scroll .lang a { color: rgba(11, 15, 26, 0.80); }
body.sub:not(.main) header.siteHeader.scroll .subMenu li.active > a, body.sub:not(.main) header.siteHeader.scroll .subMenu a:hover, body.sub:not(.main) header.siteHeader.scroll .lang a.active, body.sub:not(.main) header.siteHeader.scroll .lang a:hover { background: rgba(5, 51, 119, 0.08); color: #053377; }