@charset "utf-8";
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css');

@media screen and (min-width:1024px), print {



/* layout */
html, body {height:100%;}
#wrap {float:left; position:relative; overflow:hidden; width:100%; min-height:100%;}
#wrap>.skip {position:absolute; top:-1px; left:-1px; overflow:hidden; width:1px; height:1px;}
#wrap>.skip:active, #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; height:150px; border-bottom:1px solid #CCC; background:#FFF; z-index:400;}
#header:before {position:absolute; top:111px; right:0; left:0; height:1px; background:#CCC; content:'';}
#header>.inner {position:relative; width:98%; max-width:1200px; height:80px; margin:0 auto;}
#header h1 {position:absolute; width:200px; top:40%; left:0;}
#header h1 img {float:left; width:100%;}

#snb {position:absolute; top:16px; right:0; height:24px; margin:0; padding:0; list-style:none;}
#snb li {float:left; height:12px; margin:6px 0; padding:0 8px; border-left:1px solid #777;}
#snb li:first-child {border:0;}
#snb a {float:left; height:24px; margin:-6px 0; font-size:14px; line-height:30px; white-space:nowrap;}
#snb .hc a, #snb .hc a:hover {font-weight:600; color:#04468D;}
#snb .hc a:before {display:inline-block; width:20px; height:20px; margin-right:2px; background:url(/front/images/bg_ico_normal.png) no-repeat 0 0/20px auto; vertical-align:middle; content:'';}

.btn_srch {display:none;}

#oxsrch {position:absolute; top:58px; right:10px; width:269px; height:34px; border:1px solid #B7B7B7; border-right:0; border-radius:6px 0 0 6px; background:#FFF;}
#oxsrch input[type="search"] {float:left; width:225px; height:24px; margin:5px 0 5px 10px; padding:0; border:0; border-radius:0; background:#FFF; font-size:15px; line-height:24px;}
#oxsrch button[type="submit"] {float:right; overflow:hidden; width:36px; height:36px; margin:-1px -10px -1px 0; padding:0; border:0; border-radius:6px; background:#F39800; color:#FFF; line-height:36px;}
#oxsrch button[type="submit"]:before {float:left; width:20px; height:20px; margin:8px; background:url(../design/bg_ico_normal.png) no-repeat 0 -250px/20px auto; content:'';}
#oxsrch label, #oxsrch button[type="reset"] {display:none;}

#gnb {position:absolute; top:110px; right:0; left:0; height:20px; margin:0; padding:0; list-style:none;}
#gnb li {margin:0; padding:0; letter-spacing:-1px;}
#gnb>li {float:left; position:relative; width:25%; text-align:center;}
#gnb>li:nth-child(n+6) {display:none;}
#gnb>li:before {float:left; width:1px; height:20px; margin:10px -1px 0 0; background:#CCC; content:'';}
#gnb>li:first-child:before {display:none;}
#gnb>li>a {display:block; height:20px; font-family:'NanumSquare'; font-size:16px; color:#333; line-height:40px;}
#gnb a:hover {color:#333; text-decoration:none;}
#gnb ul {position:absolute; top:38px; left:0; overflow:hidden; width:100%; height:0; margin:0; padding:0; border-left:1px solid #EEE; list-style:none; z-index:490;}
#gnb>li:nth-child(5) ul {border-right:1px solid #EEE;}
#gnb ul li {padding:3px 10%; line-height:30px; text-align:left;}
#gnb ul li:first-child {padding-top:22px;}
#gnb ul a {display:inline-block; position:relative; overflow:hidden; max-width:100%; color:#555; text-overflow:ellipsis; vertical-align:top; white-space:nowrap;}
#gnb ul a:before {position:absolute; bottom:0; left:0; width:0; height:1px; background:#2A676A; transition:width 0.3s; content:'';font-size:16px;}
#gnb ul a:hover {font-weight:600; color:#2A676A;}
#gnb ul a:hover:before {width:100%;}
#gnb>.on ul {background:#FAFAFA;}
.gnb_bg {position:absolute; top:150px; right:0; left:0; overflow:hidden; height:0; background:#FFF; box-shadow:0 10px 20px rgba(0,0,0,0.1); z-index:480;}
#gnb ul, .gnb_bg {transition:height 0.3s;}
#gnb.on ul, .gnb_bg.on {height:200px;} /* (3px + 3px + 30px) * n + 19px + 19px */

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

#footer {border-top:60px solid #373A43; background:#4C505B; color:#FFF; z-index:300;}
#footer a, #footer a:hover {color:#FFF;}
#footer .copyright {position:relative; width:98%; max-width:1200px; margin:-30px auto 0;}
#footer .go {height:30px; margin:0; padding:0; list-style:none;}
#footer .go li {float:left; height:30px; margin:0; padding:0; line-height:0px; white-space:nowrap;}
#footer .go li+li:before {margin:0 15px; content:'\002F';}
#footer address {padding:30px 0; font-style:normal;}
#footer strong {font-weight:normal; color:#97C0C1;}

#copy_sitelink {position:absolute; top:0; right:0; width:220px; white-space:nowrap;}
#copy_sitelink b {display:block; overflow:hidden; height:70px; padding:0 60px 0 20px; background:#2F3032; font-weight:normal; line-height:70px; text-overflow:ellipsis; cursor:pointer;}
#copy_sitelink b:after {position:absolute; top:5px; right:0; width:60px; height:60px; line-height:60px; text-align:center; transform:rotate(-90deg); content:'\003E';}
#copy_sitelink ul {position:absolute; top:0; left:0; overflow:auto; width:100%; max-height:500px; margin:0; padding:0; border:1px solid #000; background:#FFF; box-sizing:border-box; list-style:none;}
#copy_sitelink li {margin:0; padding:0;}
#copy_sitelink li a {display:block; overflow:hidden; height:2em; padding:0 15px; color:#333; line-height:2em; text-overflow:ellipsis;}
#copy_sitelink li a:hover {background:#EEE; color:#333; text-decoration:none;}
#copy_sitelink .fold {overflow:hidden; width:1px; height:1px; border:0; background:none; z-index:-1;}

#quick {position:absolute; width:97px; border-left:1px solid #D7D7D7; border-right:1px solid #D7D7D7; border-radius:48px; background:#FFF; font-size:13px; text-align:center; transition:top 0.3s; z-index:390;}
#quick h2 {margin:-15px auto 10px;}
#quick ul {margin:0; padding:0; list-style:none;}
#quick li {margin:0; padding:0;}
#quick li a {display:block; padding:5px 0; color:#5A656B;}
#quick li a:hover {color:#5A656B;}
#quick li a:before {display:block; width:69px; height:69px; margin:0 auto; border-radius:50%; background:#F2C85D url(../design/bg_ico_main.png) no-repeat -215px -15px/350px auto; content:'';}
#quick li:nth-child(2) a:before {background-color:#FCA7A7; background-position:-215px -115px;}
#quick li:nth-child(3) a:before {background-color:#8DE0D3; background-position:-215px -215px;}
#quick li:nth-child(4) a:before {background-color:#AA96D7; background-position:-215px -315px;}
#quick .top {overflow:hidden; width:97px; height:32px; padding-top:16px; border-radius:0 0 48px 48px;}
#quick .top button {width:97px; height:32px; margin:0; padding:0; border:0; background:#5A656B; font-size:13px; color:#FFF; line-height:30px;}
#quick .top button:after {font-size:10px; content:'\25B2';}

.btn_menu {display:none;}

/* responsive */
@media screen and (max-width:1400px) {
    #quick {display:none;}
}

}

@media screen and (max-width:1023px) {

/* layout */
html, body {height:100%;}
#wrap {float:left; position:relative; overflow:hidden; width:100%; min-width:320px; min-height:100%;}
#wrap>.skip {position:absolute; top:-1px; left:-1px; overflow:hidden; width:1px; height:1px;}
#wrap>.skip:active, #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; width:100%; height:90px; background:#FFF; z-index:400;}
#header h1 {float:left; padding:25px 0 25px 10px;}
#header h1 img {float:left; height:40px;}

.btn_edit {display:none;}

.btn_srch {position:absolute; top:25px; right:80px; overflow:hidden; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:0; background:none; text-indent:-999px; z-index:490;}
.btn_srch:before {position:absolute; top:21px; left:26px; width:5px; height:16px; background:#273C4F; transform:rotate(-45deg); content:'';}
.btn_srch:after {position:absolute; top:4px; left:4px; width:15px; height:15px; border:5px solid #273C4F; border-radius:50%; content:'';}

.btn_menu {position:absolute; top:20px; right:10px; overflow:hidden; width:50px; height:50px; margin:0; padding:0; border:0; border-radius:0; background:none; text-indent:-999px;}
.btn_menu:before, .btn_menu:after {position:absolute; left:5px; width:40px; height:5px; content:'';}
.btn_menu:before {top:12px; border:5px solid #273C4F; border-left:0; border-right:0;}
.btn_menu:after {top:32px; background:#273C4F;}

.btn_menu.close {position:fixed; width:35px; height:35px; z-index:99999;}
.btn_menu.close:before, .btn_menu.close:after {top:16px; width:25px; height:2px; background:#FFF;}
.btn_menu.close:before {border:0; transform:rotate(-45deg);}
.btn_menu.close:after {transform:rotate(45deg);}

#oxsrch {visibility:hidden; position:absolute; top:-90px; right:0; left:0; overflow:hidden; height:40px; padding:25px 0; background:#FFF; line-height:40px; text-align:center; white-space:nowrap; z-index:499; transition:all 0.3s;}
#oxsrch.open {visibility:visible; top:0;}
#oxsrch label {position:absolute; overflow:hidden; width:1px; height:1px;}
#oxsrch input[type="search"] {width:60%; max-width:250px; height:40px; margin:0 5px; padding:0 5px; border:0; border-bottom:3px solid #DDD; border-radius:0; background:#FFF; line-height:38px; -webkit-appearance:none;}
#oxsrch button[type="submit"] {position:relative; overflow:hidden; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:0; background:none; text-indent:-999px;}
#oxsrch button[type="submit"]:before {position:absolute; top:21px; left:26px; width:5px; height:16px; background:#273C4F; transform:rotate(-45deg); content:'';}
#oxsrch button[type="submit"]:after {position:absolute; top:4px; left:4px; width:15px; height:15px; border:5px solid #273C4F; border-radius:50%; content:'';}
#oxsrch button[type="reset"] {position:relative; overflow:hidden; width:29px; height:29px; margin:0; padding:0; border:0; border-radius:50%; background:#DDD; text-indent:-999px;}
#oxsrch button[type="reset"]:before {position:absolute; top:5px; left:14px; width:1px; height:19px; background:#FFF; transform:rotate(45deg); content:'';}
#oxsrch button[type="reset"]:after {position:absolute; top:14px; left:5px; width:19px; height:1px; background:#FFF; transform:rotate(45deg); content:'';}

#navgrp {position:fixed; top:0; right:-360px; overflow:auto; width:100%; max-width:360px; height:100%; border-top:75px solid #273C4F; background:#FFF; box-sizing:border-box; transition:right 0.3s; z-index:99998;}
#navgrp.open {right:0; box-shadow:0 0 600px rgba(0,0,0,0.5); transition:none;}

#snb {float:left; width:100%; border-bottom:1px solid #DDD; margin:0; padding:0.5em 0; list-style:none;}
#snb li {float:left; margin:0; padding:0.5em 0 0.5em 1em;}
#snb a {float:left; height:2em; padding:0 1em; border-radius:1em; background:#EEE; color:#333; line-height:2em;}
#snb a:hover {color:#333; text-decoration:none;}
#snb .admin, #snb .edit {display:none;}

#gnb {clear:both; margin:0; padding:0; list-style:none;}
#gnb li {margin:0; padding:0;}
#gnb>li {border-bottom:1px solid #DDD;}
#gnb>li>a {position:relative; padding:20px 40px; font-size:1em;}
#gnb a {display:block; color:#333;}
#gnb a:hover {color:#333; text-decoration:none;}
#gnb ul {display:none; margin:0; padding:20px 0; background:#EEE; list-style:none;}
#gnb ul a {padding:5px 40px;}
#gnb .more:before, #gnb .go:before {position:absolute; top:0; right:22px; bottom:0; width:10px; height:10px; margin:auto 0; border-right:2px solid #888; border-bottom:2px solid #888; transform:rotate(-45deg); content:'';}
#gnb .more:before {bottom:5px; transform:rotate(45deg); transition:all 0.3s;}
#gnb .on>a {font-weight:600;}
#gnb .on ul {display:block;}
#gnb .on .more:before {top:5px; bottom:0; transform:rotate(225deg);}

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

#footer {background:#4C505B; color:#FFF; z-index:300;}
#footer a, #footer a:hover {color:#FFF;}
#footer .copyright {padding:20px 10px 50px; font-size:12px;}
#footer .go {margin:0; padding:0; list-style:none;}
#footer .go li {display:inline-block; margin:0; padding:0; vertical-align:middle;}
#footer .go li+li:before {margin:0 5px; content:'\002F';}
#footer address {font-style:normal;}
#footer strong {font-weight:normal; color:#97C0C1;}

#copy_sitelink {position:relative; margin:20px 0; white-space:nowrap;}
#copy_sitelink b {display:block; overflow:hidden; height:40px; padding:0 40px 0 20px; background:#2F3032; font-weight:normal; line-height:40px; text-overflow:ellipsis; cursor:pointer;}
#copy_sitelink b:after {position:absolute; top:0; right:0; width:40px; height:40px; line-height:40px; text-align:center; transform:rotate(-90deg); content:'\003E';}
#copy_sitelink ul {position:absolute; top:0; left:0; overflow:auto; width:100%; max-height:500px; margin:0; padding:0; border:1px solid #000; background:#FFF; box-sizing:border-box; list-style:none;}
#copy_sitelink li {margin:0; padding:0;}
#copy_sitelink li a {display:block; overflow:hidden; height:2em; padding:0 15px; color:#333; line-height:2em; text-overflow:ellipsis;}
#copy_sitelink li a:hover {background:#EEE; color:#333; text-decoration:none;}
#copy_sitelink .fold {overflow:hidden; width:1px; height:1px; border:0; background:none; z-index:-1;}

/* responsive */
@media screen and (max-width:600px) {
    #header {height:75px;}
    #header h1 {padding:20px 0 20px 10px;}
    #header h1 img {height:35px;}

    .btn_srch {top:24px; right:60px; width:28px; height:28px;}
    .btn_srch:before {top:15px; left:18px; width:3px; height:9px;}
    .btn_srch:after {top:4px; left:4px; width:9px; height:9px; border-width:3px;}

    .btn_menu {width:35px; height:35px;}
    .btn_menu:before {top:10px; width:25px; height:3px; border-width:3px;}
    .btn_menu:after {top:22px; width:25px; height:3px;}

    #oxsrch {padding:18px 0 17px;}
    #oxsrch button[type="submit"] {width:28px; height:28px;}
    #oxsrch button[type="submit"]:before {top:15px; left:18px; width:3px; height:9px;}
    #oxsrch button[type="submit"]:after {top:4px; left:4px; width:9px; height:9px; border-width:3px;}
}

}




@media print {
    #wrap {min-width:1080px;}
}