@font-face {
    font-family: "NotoSansKR";
    font-weight: 700;
    src: url("../fonts/NotoSansKR-Bold.woff2") format("woff2"), url("../fonts/NotoSansKR-Bold.woff") format("woff"), url("../fonts/NotoSansKR-Bold.otf") format("opentype");
}
@font-face {
    font-family: "NotoSansKR";
    font-weight: 500;
    src: url("../fonts/NotoSansKR-Medium.woff2") format("woff2"), url("../fonts/NotoSansKR-Medium.woff") format("woff"), url("../fonts/NotoSansKR-Medium.otf") format("opentype");
}
@font-face {
    font-family: "NotoSansKR";
    font-weight: 400;
    src: url("../fonts/NotoSansKR-Regular.woff2") format("woff2"), url("../fonts/NotoSansKR-Regular.woff") format("woff"), url("../fonts/NotoSansKR-Regular.otf") format("opentype");
}
@font-face {
    font-family: "NotoSansKR";
    font-weight: 300;
    src: url("../fonts/NotoSansKR-Light.woff2") format("woff2"), url("../fonts/NotoSansKR-Light.woff") format("woff"), url("../fonts/NotoSansKR-Light.otf") format("opentype");
}
@font-face {
    font-family: "NotoSansKR";
    font-weight: 100;
    src: url("../fonts/NotoSansKR-Thin.woff2") format("woff2"), url("../fonts/NotoSansKR-Thin.woff") format("woff"), url("../fonts/NotoSansKR-Thin.otf") format("opentype");
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
* {
    font-family: "Pretendard-Regular", sans-serif;
    font-weight: 400;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    box-sizing: border-box;
    letter-spacing: -0.5px;
}


body, html, ul, li, p, h2 {padding:0; margin:0;}
li {list-style: none;}
a {text-decoration: none; color:#444;}
h2 {font-weight: bold;}

html { overflow-y: scroll;}
html.hidden { overflow: hidden;}

body { position: relative;  font-size:14px;}


#wrap { width: 1440px; margin:0 auto; position: relative;}
#wrap:after { display: block; content: ''; clear: both; width: 100%;}

#header-wrap { width: 100%; padding: 0 32px;}

#header { width: 100%; height: 80px; position: sticky; top:0; left:0; background:#FFF; z-index: 10; min-width: 1440px; transition: top 1s;}
#header.noActive {top: -80px;}
#header .logo { width: 140px;  height: 80px; display: block; float: left; background: url("../../image/new/logo.svg") no-repeat left center; background-size: 100% auto;}
#header .menu { float:right; height: 80px;}
#header .menu > li {  float:left; display: flex; align-items: center; justify-items: center; height: 80px; padding: 0 16px;  margin: 0 0 0 48px;}
#header .menu > li:first-child {margin: 0 0 0;}
#header .menu > li.menu_mb {display: none;}
#header .menu > li > a { color:#222; font-size:18px; font-weight: 500;}
#header .menu > li > a:hover {color: #7A7D7F;}
#header .menu > li > a.active {color: #098956;}
#header .menu .xi-close {display: none;}
#header .xi-bars {display: none;}

#footer-wrap { width: 100%; height: 370px; padding: 60px 120px 0; display: inline-block;}

#footer {background: #000; color:#fff; min-width: 1440px; position: relative; z-index: 1;}
#footer .footer-left {float: left;}
#footer .footer-left .footer-logo {margin: 0 0 24px;}
#footer .footer-left .footer-logo dt {height: 40px; margin: 0 0 8px; background: url("../../image/new/logo_w.svg") no-repeat left center;}
#footer .footer-left .footer-logo dd {height: 26px; line-height: 26px; margin: 0 0 0; font-size: 16px; letter-spacing: -0.08px; font-weight: 500;}

#footer .footer-left .footer-info {margin: 0 0 16px;}
#footer .footer-left .footer-info > span {height: 18px; line-height: 18px; display: block; margin: 0 0 2px; font-weight: 400; color: #989B9E; font-size: 12px;}
#footer .footer-left .footer-info > span:last-child {margin: 0 0 0;}

#footer .footer-left .footer-copy {}
#footer .footer-left .footer-copy > span {height: 18px; line-height: 18px; display: block; font-weight: 400; color: #989B9E; font-size: 12px;}

#footer .footer-right {float: right;}
#footer .footer-right .footer-memu {width: 130px; float: left; margin: 0 40px 0 0;}
#footer .footer-right .footer-memu:last-child {margin: 0 0 0;}
#footer .footer-right .footer-memu > dt {height: 28px; line-height: 28px; margin: 0 0 24px; font-size: 18px; letter-spacing: -0.27px; font-weight: 600; color: #FFF;}
#footer .footer-right .footer-memu > dd {margin: 0 0 0; text-align: left;}
#footer .footer-right .footer-memu > dd > ul {}
#footer .footer-right .footer-memu > dd > ul > li {margin: 0 0 8px; height: 22px; line-height: 22px;}
#footer .footer-right .footer-memu > dd > ul > li:last-child {margin: 0 0 0;}
#footer .footer-right .footer-memu > dd > ul > li a {color: #989B9E; letter-spacing: -0.14px; font-weight: 500; font-size: 14px;}




/* ***** TABLET ***** */
@media screen and (max-width:1440px) {
    #header { min-width: 100%;}
    #header .menu > li {margin: 0 0 0 24px;}
    #header-wrap {padding: 0 20px;}

    #footer {min-width: 100%;}
    #footer-wrap {padding: 32px 20px; height: 226px;}
    #footer .footer-left .footer-logo dt {width: 124px; height: 32px; background-size: auto 32px;}
    #footer .footer-left .footer-logo dd {height: auto; line-height: 18px; font-size: 12px; color: #989B9E;}
    #footer .footer-left .footer-info > span {height: auto; line-height: 15px; font-size: 10px;}
    #footer .footer-left .footer-copy > span {height: auto; line-height: 15px; font-size: 10px;}

    #footer .footer-right .footer-memu {min-width: 96px; width: max-content;}
    #footer .footer-right .footer-memu > dt {height: auto; line-height: 22px; letter-spacing: -0.14px; font-size: 14px;}
    #footer .footer-right .footer-memu > dd > ul > li {height: auto; line-height: 18px; font-size: 12px;}
}


/* ***** MOBILE ***** */
@media screen and (max-width:720px) {
    #header {height: 56px;}
    #header .logo {width: 96px; height: 56px; background-size: contain;}
    #header .menu {position: fixed; right: -200%; height: 100%; transition: right 0.5s; display: block; width: 100%; height: 100%; background: #FFF; float: initial;  top: 0; padding: 56px 20px 0;}
    #header .menu.show {right: 0;}
    #header .menu.show .xi-close {background: url('../../image/new/i_mb_close.svg') no-repeat center; width: 24px; height: 24px; display: block; position: absolute; right: 16px; top: 16px;}
    #header .menu > li {float: initial; width: 100%; margin: 0 0 0;  padding: 0 0 4px; height: 66px; line-height: 66px;}
    #header .menu > li.menu_mb {display: block;}
    #header .menu > li > a {letter-spacing: -0.252px; font-weight: 700;font-size: 36px;}
    #header .xi-bars {width: 24px; height: 24px; background: url('../../image/new/i_mb_bars.svg') no-repeat center; display: block; position: absolute; right: 16px; top: 16px;}
    #header-wrap {padding: 0 16px;}


    #footer-wrap {height: auto; display: flex;flex-direction: column;align-items: flex-start;gap: 56px;align-self: stretch;}
    
}