@import url('content.css?v=240327_2');

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SUIT-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SUIT-SemiBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SUIT-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* layout */
html, body {height:100%;}
#wrap {float:left; position:relative; overflow:hidden; width:100%; min-width:320px; min-height:100%; background:#EEE;}
#wrap>.skip {position:absolute; top:-1px; left:-1px; overflow:hidden; width:1px; height:1px;}
#wrap>.skip:focus {display:block; position:static; width:auto; height:3em; background:#333; color:#FFF; line-height:3em; text-align:center;}
#wrap>.skip:hover {color:#FFF; text-decoration:none;}

#header {position:relative; background:#FFF; box-shadow:0 0 20px rgba(0,0,0,0.2); z-index:400;}
#header>.inner {width:100%; max-width:1200px; margin:0 auto; text-align:center;}
#header h1 {padding:30px 0;}
#header h2 {display:inline-block; position:relative; height:38px; padding:0 1em; border:1px solid #C5C5C7; border-radius:20px; font-weight:normal; font-family:'SUIT-Medium'; font-size:18px; color:#000; line-height:38px;}
#header h2:before, #header h2:after {position:absolute; top:0; bottom:0; width:50vw; height:1px; margin:auto 0; background:#C5C5C7; content:'';}
#header h2:before {right:100%;}
#header h2:after {left:100%;}

#lnb {display:flex; overflow:auto; margin:0; padding:0 10px 20px; list-style:none; scrollbar-width:none;}
#lnb::-webkit-scrollbar {display:none;}
#lnb li {flex-grow:1; margin:0; padding:5px 0;}
#lnb li:before {display:inline-block; width:1px; height:100%; margin-left:-1px; vertical-align:middle; content:'';}
#lnb a {display:inline-block; padding:15px 10px; font-family:'SUIT-SemiBold'; font-size:22px; color:#000; line-height:1.2; vertical-align:middle;}
#lnb a:hover {color:#1540A5;}
html[lang="ko"] #lnb a {white-space:nowrap;}

#visual {z-index:100;}
.bn_ic {display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; height:200px; padding:0 10px; background:url(../design/visual_sub.jpg) no-repeat 50% 50%/cover; font-family:'SUIT-Medium'; color:#FFF; text-align:center;}
.bn_ic p:first-child {margin-bottom:10px; font-family:'SUIT-Bold'; font-size:1.75em; color:#FFF; line-height:1.2;}

#content {width:100%; max-width:1200px; margin:0 auto; padding:0 70px 90px; background:#FFF; box-sizing:border-box; z-index:200;}
#content:after {display:block; clear:both; content:'';}

#footer {background:#292929; color:#C9C7C7; z-index:300;}
#footer .copyright {padding:50px 20px; text-align:center;}
#footer address {font-style:normal; letter-spacing:-1px;}
#footer .addr, #footer .tel {margin-right:9px;}
#footer .tel, #footer .fax {white-space:nowrap;}

@media screen and (max-width:1200px) {
    #content {padding-right:6%; padding-left:6%;}
}

@media screen and (max-width:899px) {
    .h_content {height:auto; border-bottom:1px solid #CCC; background:none;}
    .h_content h3 {float:none; height:50px; margin-top:0; font-size:18px; line-height:50px; text-align:center;}
    .h_content .path {display:none;}
}

@media screen and (max-width:600px) {
    #header h1 {padding:20px 0;}
    #header h1 img {height:25px;}
    #header h2 {height:30px; border-radius:16px; font-size:12px; line-height:30px;}

    #lnb {padding-bottom:16px;}
    #lnb a {padding:5px 10px; font-size:1rem;}

    .bn_ic p:first-child {font-size:1.25em;}

    .ev_info {font-size:0.875em;}

    #footer .copyright {font-size:12px;}
}