/*
================================================================================
상단메뉴
================================================================================
*/

#menu{ z-index:20;}
.logo {position:absolute;top:50px; left:0; z-index:5001; width:20%; line-height:110px; }

.gnb_bg.over { height:400px; border-top:1px solid #3c84b9;}


#gnb{position:relative; padding:0; z-index:20;  width:70%; padding-left:28%;  min-height:110px;line-height:1.2em;}
#gnb .topmenu { }
#gnb .topmenu > li{ float:left; padding-right:30px; box-sizing:border-box;}
#gnb .topmenu > li:last-child {padding-right:0;}
#gnb .topmenu > li > a{position:relative;display:inline-block; color:#333;text-decoration:none; box-sizing:border-box; min-height:110px; line-height:110px; font-size:20px; display:block; letter-spacing:-0.05em;}
#gnb .topmenu > li > a::after{position:absolute;left:0;  bottom:0px; width:0; height:3px; content:''; transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;background:#5380d2}
#gnb .topmenu > li > div.depth2-wrap{visibility: hidden;position:absolute;  opacity:0;overflow:hidden;transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; box-sizing:border-box; height:0; box-sizing:border-box; border-left:1px solid #dedede; padding:40px 20px;}
#gnb .topmenu > li:last-child > div.depth2-wrap {border-right:1px solid #dedede;}
#gnb .topmenu.on > li > div.depth2-wrap {visibility: visible;top:110px;opacity:1; height:400px;}
#gnb .topmenu.on div.depth3-wrap {display:none;}
#gnb .topmenu > li > div.depth2-wrap h2 {color:#35393b; margin-bottom:20px; font-size:18px; letter-spacing:-0.05em; line-height:22px; font-weight:500;}
#gnb .topmenu > li.hv > div.depth2-wrap h2 {color:#fff;}
#gnb .topmenu > li > div.depth2-wrap ul li {margin-bottom:10px;}
#gnb .topmenu > li > div.depth2-wrap ul li  a {font-size:14px; font-weight:400;}
#gnb .topmenu > li > div.depth2-wrap ul li  a:hover {color:#74bfff;}
#gnb .topmenu > li > div.depth2-wrap ul li  a[target="_blank"] {padding-right:20px; background:url(/common/img/icon_newwin04.png) no-repeat right 3px;}
#gnb .topmenu div.tmenucopy {visibility: hidden; position:absolute; top:0; left:0; color:#333; background:url(/common/img/sub_commonbg.png) no-repeat right 180px; top:110px; height:0px;  width:20%; transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; overflow:hidden; visibility: hidden; box-sizing:border-box; padding:10px;}
#gnb .topmenu div.tmenucopy h2 {font-size:36px; font-weight:400; margin-bottom:20px; margin-top:40px; letter-spacing:-0.05em;}
#gnb .topmenu.on div.tmenucopy {visibility: visible; opacity:1; height:400px;}




.open {width:100%; height:60px; z-index:3000; position:relative; font-size:15px;
	background: -webkit-gradient(linear, left top, right top, color-stop(0, #333694), color-stop(1, #23776f));
	background: -moz-linear-gradient(left, #333694 0%, #23776f 100%);
	background: -webkit-linear-gradient(left,  #333694 0%, #23776f 100%);
	background: -o-linear-gradient(left,  #333694 0%, #23776f 100%);
	background: -ms-linear-gradient(left,  #333694 0%, #23776f 100%);
	background: linear-gradient(left,  #333694 0%, #23776f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333694', endColorstr='#23776f', gradientType=1);}

.open div.open_wrap {width:1200px; margin:0 auto;}
.open div span.home {line-height:60px; color:#fff; display:block; width:60px; text-align:center; border-right:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2); box-sizing:border-box; float:left;}
.open div ul li {float:left; line-height:60px; position:relative;}
.open div ul li > a.current {color:#fff; display:block;  line-height:60px; box-sizing:border-box; padding:0px 15px; width:240px; border-right:1px solid rgba(255,255,255,0.2); position:relative;  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;}
.open div ul li > a.current::after {content:''; display:block; width:10px; height:5px; background:url(/opendata/img/common/open_down.png) no-repeat 0 0; position:absolute; top:28px; right:15px;}
.open div ul li .openwrap {position:absolute; top:0; left:0; background:#fff; border:3px solid #333694; width:100%; box-sizing:border-box; padding:0px 0px 10px 0px; display:none;}
.open div ul li .openwrap a {display:block; line-height:30px; padding:0 15px;}
.open div ul li .openwrap span {line-height:60px; display:block; color:#333694; padding:0 15px; position:relative;}
.open div ul li .openwrap span::after {content:''; display:block; width:10px; height:5px;  background:url(/opendata/img/common/open_up.png) no-repeat 0 0; position:absolute; top:28px; right:15px;}

@media only screen and (max-width:1200px) {
	.open div.open_wrap {width:100%; margin:0 auto;}
	}

@media only screen and (max-width:680px) {
	.open {width:100%; height:40px;}
	.open div span.home {display:none;}
	.open div ul li.ttb01 {display:none;}
	.open div ul li {width:50%;}
	.open div ul li > a.current { line-height:40px; width:100%;}
	.open div ul li > a.current::after {top:18px;}
	.open div ul li .openwrap a {line-height:20px; padding:0 15px; margin-top:10px;}
	.open div ul li .openwrap span {line-height:40px; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
	.open div ul li .openwrap span::after {top:18px;}
}

.subcontent {margin:0 auto;}
.cont-top {margin:30px auto; border-bottom:1px solid #dedede;}
.cont-top:after {display:none;}

.cont-top .open_link {position:absolute; top:0; right:0;}
.cont-top .open_link a{display:inline-block; width:40px; height:40px; border-radius:50%; text-indent:-9999px; background:#f3f3f3; background-repeat:no-repeat; background-position:50% 50%;}
.cont-top .open_link a.URL_copy {background-image:url(/opendata/img/common/copy.png); }
.cont-top .open_link a.print {background-image:url(/opendata/img/common/print.png); }

.conts {margin-bottom:50px;}
.conts h4.black {color:#333; font-size:16px; margin-top:15px;}


.topsearch {padding:30px; background:#f9f9f9; position:relative; margin-bottom:40px;}

div#select_box {position: relative; width:150px;height:46px; border: 1px solid #dedede;background:#fff; box-sizing:border-box; float:left; margin-right:5px;}
.topsearch input.sear {width:46px; height:46px; flaot:left; background:#204ee3 url(/common/img/s_sear.png) no-repeat 50% 50%; text-indent:-9999px; vertical-align:top;}
.topsearch div.ssbtn {position:absolute; top:30px; right:30px;}
.topsearch div.ssbtn a {display:inline-block;}

.topsearch select {height: 46px;min-height: 46px;line-height: 46px;padding: 0 20px  0 10px ; background:#fff url(/opendata/img/common/select.png) no-repeat 90% 50% ; width:130px; margin-bottom:3px;
	-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.topsearch select::-ms-expand {
    display: none;
 }
 



@media only screen and (max-width:680px) {
	.topsearch{text-align:center;padding:20px;}
	div#select_box {position: relative; width:calc(50% - 28px);}
	.topsearch select {width:120px;}
}

.graph_box {border:1px solid #dedede; padding:20px; text-align:center;}

@media only screen and (max-width:680px) {
	.cont-tit h2 {
	    display: block;
	    font-size:24px;
	    line-height: 120%;
	    font-weight: 800;
	    color: #29303a;
	    padding-top:5px;
	    width:calc(100% - 90px);
	}
}