/* common */
@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.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://fastly.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://fastly.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://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@media screen and (min-width:1200px) {
    body, input, textarea, button, select, pre, .btn, .inp_date {font-size:1.125rem;}
    .btn_a {font-size:0.875rem;}
    .btn_s {font-size:0.90625rem;}
    .btn_b {font-size:1.5rem;}
    .btn_i {font-size:1rem;}
}

/* layout */
html, body {height:100%;}
#wrap {float:left; position:relative; overflow:hidden; width:100%; min-width:1080px; min-height:100%;}
#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:#292929; color:#FFF; line-height:3em; text-align:center;}
#wrap>.skip:hover {color:#FFF; text-decoration:none;}

#header {position:relative; height:175px; z-index:400;}
#header:before {position:absolute; top:100px; left:0; width:100%; height:1px; background:#BABDBE; content:'';}
#header>.inner {position:relative; width:98%; max-width:1200px; height:175px; margin:0 auto;}
#header h1 {position:absolute; top:32px; left:0;}
#header h1 img {float:left;}

#snb {float:right; height:32px; margin:34px 0 0; padding:0; list-style:none;}
#snb li {float:left; height:32px; margin:0; padding:0 6px; line-height:32px;}
#snb a {float:left; font-family:'SUIT-Regular'; font-size:1rem; white-space:nowrap;}
#snb .home a, #snb .login a, #snb .logout a, #snb .register a, #snb .mypage a {min-width:4em; height:30px; padding:0 14px; border:1px solid #C7C7C9; border-radius:16px; line-height:30px; text-align:center;}
#snb .home a:hover, #snb .login a:hover, #snb .logout a:hover, #snb .register a:hover, #snb .mypage a:hover {border-color:#4C73CD; color:#1047C7; text-decoration:none;}
#snb .sitemap a {overflow:hidden; width:37px; height:32px; background:url(../design/sp_common.png) no-repeat 2px 2px; color:transparent; text-align:center;}

.sys_menu {position:absolute; top:10px; left:101%; margin:0; padding:0; list-style:none;}
.sys_menu li {margin:0; padding:4px 0;}
.sys_menu a {display:block; height:30px; padding:0 14px; border:1px solid #C7C7C9; border-radius:16px; font-family:'SUIT-Regular'; font-size:1rem; line-height:30px; white-space:nowrap;}
.sys_menu a:hover {border-color:#4C73CD; background:#4C73CD; color:#FFF; text-decoration:none; transition:all 0.3s;}

#gnb {position:absolute; top:101px; right:0; left:0; height:74px; margin:0; padding:0; list-style:none;}
#gnb li {margin:0; padding:0;}
#gnb>li {float:left; position:relative; width:20%; height:74px;}
#gnb>li:nth-child(n+6) {display:none;}
#gnb>li>a {display:block; position:relative; height:74px; font-family:'SUIT-Medium'; font-size:26px; color:#000; line-height:74px; text-align:center; white-space:nowrap;}
#gnb>li>a:after {position:absolute; bottom:-1px; left:0; width:0; height:3px; background:#3260CA; content:''; transition:width 0.3s; z-index:499;}
#gnb a:hover {color:#1540A5; text-decoration:none;}
#gnb .on>a {color:#1540A5;}
#gnb .on>a:after {width:100%; transition:width 0.3s 0.01s;}
#gnb ul {position:absolute; top:74px; right:0; left:0; overflow:hidden; height:0; margin:0; padding:0; list-style:none; z-index:498;}
#gnb ul li {padding:4px 5px;}
#gnb ul li:first-child {padding-top:24px;}
#gnb ul a {display:block; overflow:hidden; height:44px; padding:0 2% 0 6%; border:1px solid #B9B5B5; border-radius:3px; font-family:'SUIT-Regular'; font-size:17px; color:#555; line-height:44px; white-space:nowrap; text-overflow:ellipsis; transition:all 0.1s;}
#gnb ul a:before {float:left; width:13px; height:13px; margin:14px 5% 0 0; border:1px solid #B9B5B5; border-radius:3px; background:#F5F5F5; font-size:9px; color:#666; line-height:13px; text-align:center; content:'\25B6'; transition:all 0.1s;}
#gnb ul a[target="_blank"]:after {display:inline-block; width:12px; height:12px; margin:-1px 0 1px 5px; background:url(../thema/image/ico_pop.svg) no-repeat; vertical-align:middle; content:'';}
#gnb ul a:hover {border-color:#3260CA;}
#gnb ul a:hover:before {border-color:#3260CA; background:#3260CA; color:#FFF;}
.gnb_bg {position:absolute; top:175px; left:0; width:100%; height:0; background:#FFF; box-shadow:0 10px 20px rgba(0,0,0,0.1); z-index:490;}
.gnb_bg.on {border-top:1px solid #BABDBE;}
#gnb ul, .gnb_bg {transition:height 0.3s;}
#gnb.on ul, .gnb_bg.on {height:364px;} /* (4px + 1px + 44px + 1px + 4px) * n + 20px + 20px */

#visual {z-index:100;}
#container, #content {z-index:200;}

#footer {position:relative; background:#292929; color:#FFF; z-index:300;}
#footer:before {position:absolute; top:86px; right:0; left:0; height:1px; background:#818182; content:'';}
#footer a, #footer a:hover {color:#FFF;}
#footer .copyright {width:96%; max-width:1200px; margin:0 auto; padding:20px 0 50px;}
#footer .go {height:46px; margin:0 0 50px; padding:0; list-style:none;}
#footer .go li {float:left; height:46px; margin:0; padding:0; line-height:46px; white-space:nowrap;}
#footer .go li+li:before {margin:0 15px; content:'\002F';}
#footer address {font-style:normal; color:#C9C7C7;}
#footer .addr, #footer .tel, #footer .eml {margin-right:9px;}
#footer .tel, #footer .eml {white-space:nowrap;}
#footer p {color:#C9C7C7;}

/* responsive */
.btn_menu {display:none;}

@media screen and (-webkit-min-device-pixel-ratio:2) {
    #snb .sitemap a {background-image:url(../design/sp_common_x2.png); background-size:100px auto;}
}