@charset "utf-8";

/* ---------- Reset ---------- */

/* 박스 모델 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form,
fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea,
button { margin: 0; padding: 0; }
div { -webkit-box-sizing: border-box !important; box-sizing: border-box !important; }

/* 헤딩 */
h1, h2, h3, h4, h5, h6 { font-weight: normal; }

/* 텍스트 레벨 시멘틱 */
address, caption, cite, code, dfn, em, var { font-family: inherit; font-style: normal; font-weight: normal; }
a { color: inherit; text-decoration: none; }

/* 멀티미디어 */
img { vertical-align: middle; border: 0; }

/* 목록 */
li { list-style: none; }

/* 표 */
table { width: 100%; border-collapse: collapse; }

/* 인터랙티브 */
button { border: none; background: none; cursor: pointer; outline: none; }
fieldset { border: solid 0 #000; padding: 0; }
button, input, select, textarea, pre { font-family: inherit; font-size: 1rem; font-weight: normal; outline: 0; }

/* ---------- Elements ---------- */
html, body { height: 100%; }
html { font-size: 19px; }
body { color: #000; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; text-rendering: optimizeLegibility; word-break: break-word; word-break: keep-all; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@media screen and (max-width: 900px) {
 html { font-size: 18px; }
}

@media screen and (max-width: 768px) {
 html { font-size: 16px; }
}

@media screen and (max-width: 600px) {
 html { font-size: 14px; }
}

/* ---------- Layout ---------- */

/* 헤더 */
.header { position: fixed; top: 0; right: 0; left: 0; z-index: 10; background-color: #fff; }
.header_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 110px; }
.body { padding-top: 110px; }
.header_brand { position: relative; display: block; height: 60%; max-height: 70px; }
.header_brand_mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.header_brand img { pointer-events: none; }
.header_nav { -ms-flex-item-align: end; align-self: flex-end; }
.header_nav_group { display: -webkit-box; display: -ms-flexbox; display: flex; }
.header_nav_item:not(:last-child) { margin-right: 2.35rem; }
.header_nav_holder { position: relative; }
.header_nav_link { display: block; font-family: 'PT Sans', sans-serif; font-size: 20px; font-weight: 700; line-height: 48px; text-transform: uppercase; }
.lang_en .header_nav_item:not(:last-child) { margin-right: 1.5rem; }
.lang_en .header_nav_link { letter-spacing: -0.025em; }
.header_nav_backdrop { position: absolute; top: 100%; left: calc(50% - 50vw); height: 65px; width: 100vw; background-color: #009ac7; visibility: hidden; }
.header_nav_subgroup { position: absolute; top: 100%; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; height: 65px; color: #fff; visibility: hidden; }
.header_nav_item:hover .header_nav_backdrop,
.header_nav_item:hover .header_nav_subgroup { visibility: visible; }
.lang_en .ir .header_nav_subgroup { left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); }
.header_nav_link, .header_nav_sublink { display: block; white-space: nowrap; -ms-touch-action: manipulation; touch-action: manipulation; }
.header_nav_subitem { position: relative; }
.header_nav_subitem:not(:last-child) { margin-right: 12px; padding-right: 12px; }
.header_nav_subitem:not(:last-child)::after { content: ''; position: absolute; top: calc(50% - .4em); right: 0; height: .8em; border-left: 1px solid currentColor; }
.header_nav_sublink { font-size: 18px; line-height: 63px; }
.header_nav_sublink br { display: none; }
.header_util { position: absolute; top: 20px; right: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.header_lang_select { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; font-weight: 300; letter-spacing: 0; text-transform: uppercase; }
.header_lang_select > *:not(:last-child)::after { content: ''; display: inline-block; height: .9em; margin: 0 .35em; vertical-align: -0.05em; border-left: 1px solid currentColor; }
span.header_lang { font-weight: 700; }
.header_menu { position: fixed; top: 90px; bottom: 0; right: 0; width: 100%; max-width: 860px; padding-bottom: 100px; -webkit-box-sizing: content-box; box-sizing: content-box; z-index: 50; background-color: #fff; color: #000; visibility: hidden; }
.header_menu > .content_holder { width: auto; height: auto; /* 스크롤 활성화 */ }
.header_toggler { z-index: 51; }
.header_menu_item { border: solid #c4c4c4; border-width: 0 0 1px; }
.header_menu_item:first-child { border-top-width: 1px; }
.header_menu_link, .header_menu_sublink { display: block; -ms-touch-action: manipulation; touch-action: manipulation; }
.header_menu_link br, .header_menu_sublink br { display: none; }
.header_menu_link { position: relative; height: 80px; width: 100%; padding: 0 30px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #f2f3f5; color: #080e3d; font-family: 'PT Sans', sans-serif; font-size: 30px; font-weight: 700; line-height: 78px; text-transform: uppercase; cursor: pointer; }
.header_menu_link:not(:only-child)::before,
.header_menu_link:not(:only-child)::after { content: ''; position: absolute; top: 50%; right: 24px; height: 4px; width: 25px; background-color: #c4c4c4; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; }
.header_menu_link:not(:only-child)::after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.header_menu_subgroup { display: none; }
.header_menu_subitem:not(:last-child) { border-bottom: 1px solid #c4c4c4; }
.header_menu_item.active .header_menu_link { background: #009ac8; color: #fff; }
.header_menu_item.active .header_menu_subgroup { display: block; }
.header_menu_item.active .header_menu_link:not(:only-child)::before { background-color: #fff; }
.header_menu_item.active .header_menu_link:not(:only-child)::after { display: none; }
.header_menu_sublink { font-size: 26px; color: #009ac8; font-family: 'PT Sans', sans-serif; font-weight: 400; height: 80px; line-height: 78px; padding: 0 30px; }
.header_toggler { position: absolute; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; width: 50px; margin: auto; margin-right: -9px; /* (50 - 32) / 2 */ visibility: hidden; cursor: pointer; }

/* 🍔 */
.hamburger { position: relative; display: block; width: 25px; height: 22px; }
.hamburger_line { position: absolute; right: 0; display: block; width: 100%; height: 4px; background-color: currentColor; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; pointer-events: none; }
.hamburger_line1 { top: 0; }
.hamburger_line2 { top: 0; margin: auto; bottom: 0; }
.hamburger_line3 { bottom: 0; }
input:checked ~ .hamburger .hamburger_line1 { top: 9px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
input:checked ~ .hamburger .hamburger_line2 { display: none; }
input:checked ~ .hamburger .hamburger_line3 { bottom: 9px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

@media screen and (max-width: 1300px) {
 .header_inner { height: 90px; }
 .body { padding-top: 90px; }
 .header_nav_link { font-size: 18px; }
 .header_nav_backdrop, .header_nav_subgroup { height: 58px; }
 .header_nav_sublink { font-size: 16px; line-height: 56px; }
}

@media screen and (max-width: 1200px) {
 .header_util { position: static; top: auto; right: auto; margin-right: 20px; }
 .header_nav { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
 .header_nav_group { display: none; }
 .header_toggler { position: static; visibility: visible; }
 .menu-is-open .header_menu { visibility: visible; }
}

@media screen and (max-width: 600px) {
 .header_inner { height: 70px; }
 .body { padding-top: 70px; }
 .header_menu { top: 70px; }
 .header .wrap h1.logo img { width: 70px; }
 .header_menu_link { height: 65px; padding: 0 30px 0 20px; font-size: 24px; line-height: 63px; }
 .header_menu_sublink { height: 65px; padding: 0 20px; font-size: 21px; line-height: 63px; }
 .header_menu_link:not(:only-child)::before,
 .header_menu_link:not(:only-child)::after { right: 26px; width: 20px; height: 3px; }
}

@media screen and (max-width: 480px) {
 .header_menu_link { font-size: 21px; }
 .header_menu_sublink { font-size: 19px; }
}

/* 페이지 랩퍼 */
.body { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 100%; min-height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: -0.02em; }

/* 본문 영역 */
.body_content { position: relative; }

/* 푸터 */
.footer { position: relative; background: #22242e; color: #9699a7; }
.footer_front { padding: 35px 0; }
.footer_nav_group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.footer_nav_item { min-width: 6em; }
.footer_nav_link { display: inline-block; margin-bottom: .75em; color: #9699a7; font-size: .75rem; font-weight: 500; text-transform: uppercase; }
.footer_nav_sublink { display: inline-block; color: #9699a7; font-size: .7rem; font-weight: 200; line-height: 1.6em; }
.footer_rear { padding: 20px 0; border-top: 1px solid #3c3e46; }
.footer_brand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.footer_logo { width: 60px; height: auto; margin-right: 40px; opacity: .2; }
.footer_copyright { color: #4d4f57; font-size: .7rem; font-weight: 400; line-height: 1.4em; text-transform: uppercase; }

@media screen and (max-width: 640px) {
 .footer { text-align: center; }
 .footer_front { display: none; }
}