@charset "UTF-8";

#header {width:100%;}
#header.fixed {position:fixed; top:0px; z-index:1000; background:rgba(255,255,255,0.9); -webkit-transition: background 0.3s ease-out; transition: background 0.3s ease-out;}
#header .headBg {position:relative; width:100%; z-index:10; border-bottom:1px solid #aaa;}
#header .headCont {max-width:1400px; margin:0 auto; padding:10px 0; height:58px; *zoom:1;}
#header .headCont:after {content:''; clear:both; display:block;}
#header .headCont h1 {float:left; width:20%;}
#header .headCont h1 a {}

#navi {float:left; width:40%; padding-left:22%;}
#navi>li {position:relative; display:inline-block; width:24%; text-align:center;}
#navi>li>a {display:block; padding:5px 0 10px; font-size:18px; /* font-family: 'Noto Sans L', 'dotum', sans-serif; *//*font-family: 'Roboto', sans-serif;*/    font-family: system-ui;}
#navi>li.on>a {color:#0068b6;}
#navi li .subnavi {display:none; position:fixed; top:81px; left:0; width:100%; height:210px; background:#fff url(../images/navi_logo.png) 55% bottom no-repeat; overflow:hidden; text-align:center; z-index:11;}
#navi li .subnavi a {display:block; padding:3px 0; font-size:16px;}
#navi li .subnavi a:hover {}
#navi li .naviCont {max-width:1400px; height:100%; margin:0 auto; text-align:left; background:right 20px no-repeat; background-size:270px;}
#navi li .naviCont:after {content:''; display:block; clear:both;}
#navi li .naviCont.bg1 {background-image:url(../images/navi_bg1.jpg);}
#navi li .naviCont.bg2 {background-image:url(../images/navi_bg2.jpg);}
#navi li .naviCont.bg3 {background-image:url(../images/navi_bg3.jpg);}
#navi li .naviCont.bg4 {background-image:url(../images/navi_bg4.jpg);}
#navi li .naviCont .txt {float:left; width:30%; height:100%; padding:30px 35px 0; box-sizing:border-box; background:#f3f3f3;}
#navi li .naviCont .txt span {display:block; font-size:24px;}
#navi li .naviCont .txt em {display:block; font-size:16px; color:#888;}
#navi li .naviCont .depth {float:left; /* width:70%; */width:55%; padding:30px 35px 0; box-sizing:border-box;}
#navi li .naviCont .depth li {float:left; /* margin-right:8%; */margin-right:7%;}
#navi li .naviCont .depth a {color:#666; /* font-family:'Noto Sans B', 'dotum', sans-serif; font-family: 'Roboto', sans-serif; */font-weight:700;}
#navi li .naviCont .depth a:hover {color:#0068b6;}
#navi li .naviCont .depth2 {display:block;}
#navi li .naviCont .depth2 a {font-weight:500; font-size:14px; /* font-family:'Noto Sans L', 'dotum', sans-serif; */font-family: 'Roboto', sans-serif; padding:2px 0 2px 8px; background:url(../images/dot.jpg) 0 center no-repeat;}

#navi li.naviTop {display:none; background:#fff; height:40px;}
#navi li.naviTop > ul.depth3 > li > a {display:block; font-size:13px; /* font-family:'Noto Sans L', 'dotum', sans-serif;  */font-family: 'Roboto', sans-serif; color:#858585; background:none; float:left; position:relative; padding:0 10px; margin:10px 0;}
#navi li.naviTop > ul.depth3 > li > a:after {content:''; display:block; position:absolute; top:8px; left:0; width:1px; height:7px; background:#e5e5e5;}
#navi li.naviTop > ul.depth3 > li > a:first-child:after {display:none;}
#navi li.naviTop:after {content:''; clear:both; display:block;}

#header .menuUser {float:left; width:12%; margin-top:8px;}
#header .menuUser li {float:left; position:relative; padding:0 10px;}
#header .menuUser li:after {content:''; display:block; position:absolute; top:8px; left:0; width:1px; height:7px; background:#e5e5e5;}
#header .menuUser li:first-child:after {display:none;}
#header .menuUser li a {font-size:13px; /* font-family:'Noto Sans L', 'dotum', sans-serif; */font-family: 'Roboto', sans-serif; color:#858585;}

#header .topMenu {float:right; width:6%; text-align:right;/* margin-top:8px;*/}
#header .topMenu li {display:inline-block; margin-left:2px;}
#header .topMenu li a.icon {display:inline-block;  width:50px; padding:2px 3px; text-align:center; border-radius:50px; font-size:13px; color:#fff; background:#0068b6;}
#header .topMenu .langCont {display:inline-block; position:relative; border:1px solid #e5e5e5; border-radius:50px; z-index:15;}
#header .topMenu .langCont.on {background:#e5e5e5; border-radius:10px 10px 0 0;}
#header .topMenu .langCont a {display:block; width:50px; padding:1px 3px 2px; text-align:center;}
#header .topMenu .langCont a em {font-size:13px; padding-right:13px; font-family:'Roboto', 'dotum', sans-serif; background:url(../images/select2.png) right center no-repeat;}
#header .topMenu .langCont .cont {display:none; position:absolute; top:21px; left:-1px; padding:3px 0; border-radius:0 0 10px 10px; z-index:10; background:#e5e5e5;}
#header .topMenu .langCont .cont a {font-size:12px; padding-left:11px; width:44px; text-align:left;}
#header .topMenu .langCont .cont a:hover {color:#000;}

#menu, #menux {display:none;}

#wrap {max-width:1400px; margin:0 auto; padding:40px 0 140px;}
#wrap:after{content:""; display:block; clear:both;}

.stateArea {max-width:1400px; margin:0 auto; text-align:right; padding:30px 0 0px;}
.stateArea em {display:inline-block; vertical-align:middle; padding-left:22px; color:#b2b2b2; font-size:15px; background:url(../images/ico_home.png) 0 2px no-repeat;}
.stateArea span {display:inline-block; position:relative; vertical-align:middle; padding-left:8px; color:#b2b2b2; font-size:15px;}
.stateArea span:before {content:'>'; padding-right:5px;    display: none;}

#sublocation {float:left; width:20%;}
#sublocation .sub {display:none;}
#sublocation h2 {font-size:26px;/*  letter-spacing:-1px; */ padding:9px 0 19px; border-bottom:3px solid #33383b;}
#sublocation .link {}
#sublocation .link li {border-bottom:1px solid #d9e6ec;}
#sublocation .link li a {display:block; padding:15px 10px; color:#333; font-size:16px;}
#sublocation .link li.on>a {color:#0068b7;/*  font-family:'Noto Sans B', 'dotum', sans-serif;  font-family: 'Roboto', sans-serif; */font-weight:700;}
#sublocation .linkCont {display:none; border-top:1px solid #d9e6ec; padding:15px 10px 15px 20px; background:#f4f5f6;}
#sublocation .linkCont .sublink b {display:block; font-size:15px; color:#666; padding-top:15px;}
#sublocation .linkCont .sublink:first-child b {padding-top:0;}
#sublocation .linkCont .sublink a {padding:3px 0; font-size:15px; color:#999;}
#sublocation .linkCont .sublink a:before {content:'-'; padding-right:5px;}
#sublocation .linkCont .sublink a.on {color:#0068b7;}
#sublocation .linkCont .sublink a em {font-size:12px;}

.contents {float:right; width:78%;}
.contents h3 {font-size:38px; letter-spacing:-1px; padding-bottom:10px; margin-bottom:55px; border-bottom:3px solid #33383b;}
.contents h4 {font-size:27px; margin:30px 0 5px;}
.subtxt {font-size:17px;}

.fullcontent {max-width:1400px; padding:10px 0 95px; margin:0 auto;}

.sidebox {margin-top:70px; border-top:3px solid #0068b7;}
.sidebox h4 {font-size:21px; color:#333; margin:15px 0;}
.sidebox ul {margin-bottom:3px;}
.sidebox ul li {margin-bottom:3px;}
.sidebox ul li input[type=text], input[type=password] {width:100%; padding:8px 10px; background:#f7f7f7; border:1px solid #d9e6ec; border-radius:5px;}
.sidebox ul li select {width:100%; color:#999; background:#f7f7f7 url(../images/select3.png) no-repeat 98% 12px; background-size:14px; border:1px solid #d9e6ec; border-radius:5px;}
.sidebox ul li .board_pa {padding:8px 23px 8px 10px;}
.sidebox ul li textarea {width:100%; height:60px; background:#f7f7f7; border:1px solid #d9e6ec; border-radius:5px;}


#footer {width:100%; background-color:#e2e2e2;}
#footer .footCont {max-width:1400px; margin:0 auto; padding:35px 10px;}
#footer .footCont:after {content:''; display:block; clear:both;}
#footer .footlogo {float:left; width:23%; padding-top:5px; text-align:center;}
#footer .footAddr {float:left; width:75%;}
#footer .footAddr .link {}
#footer .footAddr .link a {position:relative; display:inline-block; padding-right:9px; margin-right:5px; font-size:15px;}
#footer .footAddr .link a:after {content:''; clear:both; display:block; position:absolute; top:8px; right:0; width:1px; height:8px; background:#858585;}
#footer .footAddr .link a:last-child:after {display:none;}
#footer .footAddr address {margin-top:15px;}
#footer .footAddr address span {position:relative; display:inline-block; padding-right:9px; margin-right:5px; color:#858585; font-size:14px; font-style:normal;}
#footer .footAddr address span:after {content:''; clear:both; display:block; position:absolute; top:7px; right:0; width:1px; height:8px; background:#858585;}
#footer .footAddr address span:last-child:after {display:none;}
#footer .footAddr .copy {color:#858585; margin-top:5px; font-size:12px;}

.bgLayer {display:none; position:fixed; top:0; left:0; width:100%; height:100%; opacity:.7; background:#000; z-index:11;}

@media (max-width: 1250px) {
#header .headCont h1 {/*width:19%; */padding-left:1%;}
#navi {width:60%; padding-left:0;}
#header .topMenu {padding-right:1%;}
#navi li .naviCont {background:97% 30px no-repeat; background-size:230px;}
#navi li .naviCont .txt {width:20%; padding:30px 15px 0;}
#navi li .naviCont .depth li {margin-right:6%; width:auto;}
}
@media (max-width: 1000px) {
#header .headCont {padding:20px 10px 10px; height:90px;}
#header .headCont h1 {float:none; margin:0 auto 10px; padding-left:0; /*width:100%; */text-align:center;}

#navi {float:none; /*width:100%;*/}
#navi>li {display:block; float:left; width:25%;}
#navi li .subnavi {top:121px;}
#navi li .naviCont {background-image:none !important;}
#navi li .naviCont .txt {display:none;}
#navi li .naviCont .depth {float:none; width:100%; padding:30px 5% 0;}
#navi li .naviCont .depth li {margin-right:8%;}

#header .menuUser {position:absolute; top:10px; right:95px; z-index:5; padding-right:0; width:auto;}
#header .topMenu {/*position:absolute; */top:10px; right:10px; z-index:5; padding-right:0; width:auto;}

#subTop {margin:0; padding:50px 0;}
#subTop h3 {font-size:27px;}

.contents h3 {font-size:30px; padding-bottom:14px; border-bottom:2px solid #33383b;}
.contents h4 {font-size:24px;}
#sublocation h2 {font-size:21px;}

#footer .footCont {text-align:center; padding:20px 2%;}
#footer .footlogo {float:none; width:100%; padding:0 0 15px;}
#footer .footlogo img {width:30%;}
#footer .footAddr {float:none; width:100%;}
}
@media (max-width: 700px) {
#header .headBg {border-bottom:1px solid #ddd;}
#header .headCont {height:28px;}
#header .headCont h1 {/*margin:0 auto; height:30px;*/      margin:0 auto;  height: 50px;
        width: 35%;}
#header .headCont h1 a {width:110px; height:21px; margin-top:5px; background-size:110px;}
#header .headCont {padding:10px 0;}
#header .menuUser {display:none;}
#header .topMenu {margin-top:0;}

#navi {position:fixed; top:0px; left:-80%; width:80%; height:100%; padding-left:0; background:#0068b7; z-index:13; overflow:auto; -webkit-overflow-scrolling:touch; -ms-overflow-style:-ms-autohiding-scrollbar;}
#navi li {float:none; display:block; text-align:left; width:100% !important; border-bottom:1px solid #08548e; padding:0;}
#navi li>a {margin:10px; font-size:16px; padding-bottom:0; color:#fff; background:url(../images/arr_down.png) right center no-repeat;}
#navi li.on>a {background:url(../images/arr_up.png) right center no-repeat; color:#fff;}
#navi li.off>a {background-image:none;}
#navi li .subnavi {display:none; position:static; padding-top:0; text-align:left; background:#fff; height:auto;}
#navi li .subnavi a {font-size:14px; color:#0068b7;}
#navi li .naviCont {background-image:none !important;}
#navi li .naviCont .txt {display:none;}
#navi li .naviCont .depth {float:none; width:100%; padding:0;}
#navi li .naviCont .depth li {margin-right:0; border-color:#ddd;}
#navi li .naviCont .depth a:hover {color:#666;}
#navi li .naviCont .depth>li.more>a {background:url(../images/arr_down2.png) right center no-repeat;}
#navi li .naviCont .depth>li.more.active>a {background:url(../images/arr_up2.png) right center no-repeat;}
#navi li .naviCont .depth2 {display:none; padding:10px; border-top:1px solid #ddd; background:#f5f5f5;}

#navi li.naviTop {display:block;}

#menu {display:block; position:absolute; top:13px; left:3%; z-index:11;}
#menu a {display:block; width:30px; height:21px; text-align:left; text-indent:-999em; background:url(../images/btn_menu.png) 0 0 no-repeat; background-size:100%;}
#menux {position:absolute; top:14px; right:10%; z-index:14;}
#menux a {display:block; width:30px; height:21px; text-align:left; text-indent:-999em; background:url(../images/btn_menux.png) 0 0 no-repeat; background-size:100%;}

#wrap {padding:30px 0 80px;}

#subTop {padding:40px 0;}
#subTop h3 {font-size:28px;}
#sublocation {display:none;}
.stateArea {display:none;}

.contents {float:none; width:94%; padding:0 3%;}
.contents h4 {font-size:22px;}

.subtxt {font-size:15px;}

}

@media (max-width:540px) {
#header .topMenu li a.icon {width:40px; font-size:12px;}
#header .topMenu .langCont {border:0.5px solid #e5e5e5;}
#header .topMenu .langCont a {width:40px; padding:0px 2px; line-height:22px; text-align:center;}
#header .topMenu .langCont a em {font-size:12px; padding-right:10px;}
#header .topMenu .langCont .cont {top:21px; left:0;}
#header .topMenu .langCont .cont a {font-size:12px; padding-left:8px; width:34px;}

#subTop h3, .contents h4 {/* font-family:'Noto Sans R', 'dotum', sans-serif; letter-spacing:-1px; */font-family: 'Roboto', sans-serif;}

.contents h3 {font-size:25px; margin-bottom:30px;}

#footer .footAddr .link a {font-size:13px;}
#footer .footAddr address span {font-size:13px;}
#footer .footAddr .copy {font-size:12px;}
}

@media (max-width:320px) {

}