@import url(common.css); 
@import url("./font.css");
/*
@media (max-width: 900px){
	header .subMenu 
    	{left: 19%!important;}
	}
	@media (max-width: 800px){
	header .subMenu 
    	{left: 19%!important;}
	}
	@media (max-width: 700px){
	header .subMenu 
    	{left: 19%!important;}
	}
	@media (max-width: 600px){
	header .subMenu 
    	{left: 19%!important;}
	}
	@media (max-width: 500px){
	header .subMenu 
    	{left: 19%!important;}
	}
	@media (max-width: 400px){
	header .subMenu 
    	{left: 19%!important;}
	}
*/
.wrapper {width: 100%; height: auto; overflow: hidden;	min-width: 980px;}

header { width: 100%; border-bottom: 1px solid #ced6dd; }
/* 2020년 SGIS고도화 3차 추가 시작*/
/*.menuWrap{width:100%; height:116px; background:#868c94; position: relative; }*/
.menuWrap{width:100%; height:138px; background:#868c94; position: relative; }
/*.menu{width:1078px; border-left:solid 1px #787f87; border-right:solid 1px #787f87; background:url(/img/newhelp/menu_bg.png) no-repeat top right; margin:0 auto; overflow: hidden; height:98px;padding-top:20px;}*/
.menu{width:1078px; border-left:solid 1px #787f87; border-right:solid 1px #787f87; background:url(/img/newhelp/menu_bg.png) no-repeat top right; margin:0 auto; overflow: hidden; height:118px;padding-top:20px;}
/* 2020년 SGIS고도화 3차 추가 끝*/
.pt{padding-top:18px;}/*2015-07-24�߰�*/
.menu li{width:145px; float:left; color:#fff; font-size:12px; background:url(/img/newhelp/icon_menu.png) no-repeat left ; text-indent:7px; line-height:35px;}
.menu li:first-child{/* margin-left:83px; */ margin-left: 53px; width:145px; } /* 20240801 김보림 자연재해 통계지도 추가 */
.menu li a{color:#fff; font-size:13px;}
.menu li a:hover{text-decoration: underline;/*  background-color: #fff ;  */}
.menu li.lh{line-height:28px;}/*2015-07-24�߰�*/


.container{width:1080px; overflow:hidden; background:url(/img/newhelp/left_bg.png) repeat-y left top;  clear: both; margin:0 auto;}

.leftWrap{width:200px; float:left; }
.leftTitle{margin-top:25px; background:url(/img/newhelp/left_title.png) no-repeat 0 0; font-size:18px; color:#fff; text-align:center; line-height:60px; height:65px;}
.leftmenu{}

/*mng_s 20230822 이진호, 웹품질진단 기준 미달로 color 수정*/
.leftmenu li{width:174px;  line-height:38px; padding-left:21px; font-size:13px; color:#595959; border-bottom:solid 1px #d5d5d5; position: relative;}
.leftmenu li a:hover{color:#0058AC;}
.leftmenu li a.on{color:#0058AC;}
/*mng_e 20230822 이진호*/
.sub{}
.sub li{color:#868c94; background:#e5e7e8; border-bottom:none; padding-left: 30px;  width: 173px; line-height: 30px; height:30px; border-left:solid 1px #d5d5d5; border-right:solid 1px #d5d5d5; margin-left: -31px;}
.sub li:first-child{border-top:solid 1px #d5d5d5;}
.sub li a{color:#868c94;}
.sub li a:hover{text-decoration:underline; color:#868c94;}

.contentsWrap{width:731px; margin-top:25px; margin-left:49px; float:left; margin-bottom:50px;}
.contents h1{font-size:20px; color:#595959; background:url(/img/newhelp/icon.png) no-repeat top left ; text-indent:7px;     font-weight: 500;}
.contents h2{font-size:14px; color:#595959; text-indent:7px; margin-top:10px; font-weight: 100;}

/*mng_s 20210408 이진호, width 값 조정*/
/*.contents img{border:0px solid #d5d5d5; margin-left:7px; margin-top:30px; width:722px;}*/
.contents img{border:0px solid #d5d5d5; margin-left:7px; margin-top:30px; width:745px;}
/*mng_e 20210408 이진호*/

.contents li{font-size:14px; color:#595959; text-indent:7px; margin-top:10px; font-weight: 100; line-height:13px;}
/*border-color: whitegray; border-style:silid;제거*/
.contents img{border-width:1px; margin-left: 0px}

.footerWrap{width:100%; border-top:solid 2px #1c2e63; height:75px;}
.footer{width:980px; margin:0 auto;}

/*sitemap*/

.mapContentsWrap{float:left;}
.mapContents{width:226px;}
.mapTitle{width:224px; height:41px; border:solid 1px #4584b6; line-height:41px; text-align:center; font-size:15px; color:#4584b6;}
.mapTitle img{border:0; margin:0; width:60px;   margin-left: 69px; float: left;}
.mapTitle span{float:left; margin-left:5px;}
.mapTitle a{color:#4584b6; font-weight:500; }
.mapTitle a:hover{color:#4584b6; text-decoration:underline;}
.mapContents li{line-height:37px; border-bottom:solid 1px #e5e7e8; width:200px; padding-left:26px;   clear: both; margin-top:0;}
.mapContents li.bg{background:url(/img/newhelp/maplogo2.png) no-repeat 32px 7px; cursor: pointer;    text-indent: 58px;}
.mapContents li img{border:0; margin:0; width:45px;   margin-left: 5px; float: left;}
.mapContents li span{float:left; margin-left:5px}
.mapContents li a{color:#595959; font-size:13px;}
.mapContents li a:hover{text-decoration:underline;}
.ml26{margin-left:26px;}
.list{height:170px; overflow:hidden; }
.list li{line-height:33px; border-bottom:solid 0px #e5e7e8; width:180px; padding-left:9px; margin-top:0; background:url(/img/newhelp/icon2.png)no-repeat 8px 15px ;}
.list li a{color:#595959;}
.list li a:hover{text-decoration:underline;}
.mt38{margin-top:38px;}
th, td{font-size:13px;}

 /* reset */
html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,blockquote,a,button,abbr,address,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,footer,header,section,summary{margin:0;padding:0;border:0;font:inherit;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}/* HTML5 display-role reset for older browsers */
body,html{width:100%;height:100%;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:fixed;}
img{border:none;vertical-align:top;}
a{display:inline-block;text-decoration:none;color:inherit;}
address{font-style:normal;}
button{display:inline-block;border:none;background-color:transparent;cursor:pointer;}
input,button,a,select,option{font-family:inherit;font-size:inherit;}
input[type="checkbox"]{border:none!important;}/* for lte IE10 */
input[type="radio"]{border:none!important;}/* for lte IE10 */
caption,hr{display:none;}

/* 추가 */
ul,li{padding:0;}
li{list-style:none;}
p{font-size:14px;line-height:1.5;margin:0;padding:0;}
textarea{resize:none;overflow: auto;}
em{font-style:normal;}
a{text-decoration:none}
a:hover{text-decoration:none;}
select,input,button,textarea{font-family:"Nanum Gothic","나눔고딕","맑은 고딕","Malgun Gothic",Dotum,sans-serif;font-size:14px;}
.blind{display:block;left:0;overflow:hidden;position:absolute;top:-1000em;}

/*190311 방민정 수정 끝*/
		/* Firefox */							/* Safari and Chrome */
/*
select{-moz-appearance:menulist-button; 	-webkit-appearance:menulist-button;appearance:menulist-button;}
select::-ms-expand {display:menulist-button}
*/
/*190311 방민정 수정 끝*/
/* css val 오류수정. leekh 20190610*/
select{-webkit-appearance:none;appearance:none; -moz-appearance:menulist-button;}
select::-ms-expand {display:list-item;}

/* common */
body,html,pre{font-family: "Nanum Gothic", "나눔고딕", "맑은 고딕", "Malgun Gothic", Dotum, sans-serif;font-size:14px;color: #000;letter-spacing:-0.045em !important;}
.clearFix:after{content: "";display: block;clear: both;}
.hidden{margin: 0;padding: 0;width: 0;height: 0;overflow: hidden;font-size: 0;line-height: 0;}
html,body,#warp{width:100%;height:100%;min-width:1100px;}
.notoBold{font-family: 'Noto Sans Medium';}

/* Accessibility Navigation */
.accNav {position:absolute; top:0; left:0; z-index:500; width:100%; height:0;}
.accNav a {display:block; position:absolute; left:0; top:0; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#fff; white-space:nowrap; font-size:0.75em;}
.accNav a:focus,
.accNav a:hover,
.accNav a:active {z-index:1000; width:100%; height:auto; padding:5px 0; background:#125aac; color:#fff; font-weight:700;}

/* 공통 영역 */
.inner {width: 1080px;margin: 0 auto;position: relative;}
.inner:after { content: ""; display: block; clear: both; }
.pagination { text-align: center; }
.pagination a { display: inline-block; width: 9px; height: 9px; margin: 0 2px; background: #bababa; border-radius: 50%; }
.pagination a.active { width: 28px; background: #3680c7; border-radius: 4px; }
header { width: 100%; border-bottom: 1px solid #ced6dd; }
header h1 {position: absolute;top: 17px;left: 0;}
header .util { width: 100%; height: 28px; background: #213967; }
header .util ul { float: right; }
header .util li { float: left; margin-left: 22px; }
header .util a { display: inline-block; color: #abb8d0; line-height: 28px; font-size: 12px; }
header .util a:hover { color: #fff; }
header .searchArea { position: absolute; top: 25px; right: 0; }
header .searchArea > div { position: relative; z-index: 2; width: 70px; height: 30px; border-radius: 15px; background: #213967; color: #fff; }
header .searchArea .btn_submit { float: left; color: #fff; display: block; width: 45px; height: 30px; line-height: 30px; text-indent: 5px; }
header .searchArea .btn_sizeCtr { float: left; display: block; width: 25px; height: 30px; background: url("../images/common/btn_plus.png") no-repeat 0px center; line-height: 30px; }
header .searchArea .inputTxt {position: absolute;top: 0px;left: -125px;z-index: 1;width: 195px;height: 30px;border: 2px solid #213967;box-sizing: border-box;border-radius: 19px;background: #fff;}
header .searchArea.expand .btn_sizeCtr { background: url("../images/common/btn_minus.png") no-repeat 0px center; }
header .searchArea.expand .inputTxt { top: -8px; left: -286px; width: 360px; height: 48px; border-radius: 24px; }
header .searchArea.expand .inputTxt input[type="text"] { display: block; width: 284px; height: 43px; font-size: 16px; line-height: 48px; }
header .searchArea input[type="text"] { border: 0; display: block; width: 150px; height: 25px; line-height: 25px; background: none; text-indent: 10px; font-size: 14px; }
header #gnb { width: 100%; }
header #gnb ul {height: 74px;margin-left: 199px;}
header #gnb ul li {float: left;width: 143px;height: 100%;text-align: center;height: 74px;}
header #gnb ul li.active a, header #gnb ul li:hover a { border-bottom: 2px solid #3986d0; box-sizing: border-box; background: url("../images/common/bg_selectOn.png") no-repeat center bottom; color: #3680c7; }
header #gnb a {display: block;width: 114px;margin: 0 auto;font-size: 16px;color: #454545;font-family: "Nanum Gothic", sans-serif; font-weight:700; line-height: 100%;padding-top: 33px;padding-bottom: 22px;}
/* header #gnb a { display: block; width: 114px; margin: 0 auto; font-size: 16px; color: #454545;font-family: "Nanum Gothic", sans-serif; font-weight:700; line-height: 72px; } */
header .subMenu {position: absolute;margin: 0 auto;top: 102px;width:100%;background: #fff;  border: 1px solid #1878cc; /**//* box-shadow: 3px 2px 0px rgba(33, 33, 33, 0.4); */}
/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	header .subMenu {position: absolute;margin: 0 auto;top: 102px;left: 29%;}
}*/

.subMenu {}
header .subMenu:before{content:'';display:block;width:100%;position:absolute;z-index:2;top:0px;border-bottom:1px solid #ced6dd;}
header .subMenu .inner {background: #fff;/*border: 1px solid #1878cc;box-shadow: 3px 2px 0px rgba(33, 33, 33, 0.4);width: 715px;*/left:210px;}
header .subMenu div {padding-left: 0;}
header .subMenu p {position: absolute;top: 0;left: -38px;display: block;width: 260px;padding: 160px 0 0 38px;background: url("../images/common/bg_gnbSgis.png") no-repeat;text-align: center;color: #9fa3a7;font-size: 13px;}
header .subMenu ul {float: left;width: 143px;height: 325px;padding-top: 20px;border-right: 1px solid #e7ebee;box-sizing: border-box;}/*20210225 박은식 height 수정*/
header .subMenu ul.active{ background:#f3f3f3;}
header .subMenu ul:first-child { border-left: 1px solid #e7ebee; }
header .subMenu li {/* margin-top: 15px; */}
header .subMenu li:first-child a {/* padding-top: 0; */}
header .subMenu a {display: block;font-size: 14px;padding: 7px 8px;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-o-transition: all 0.2s;-ms-transition: all 0.2s;transition: all 0.2s;}
header .subMenu a:hover { text-decoration: underline; color: #176ab9;font-family: "Nanum Gothic", sans-serif; font-weight:700; }
header {width : 100%;}

footer > div { width: 100%; border-top: 1px solid #e8ecf0; }
footer .inner { position: relative; }
footer h2 { float: left; width: 210px; height: 100%; line-height: 73px; background: url("../../images/common/ico_arrow.png") no-repeat 167px center; }
footer h2 a { display: block; width: 100%; height: 100%; }
footer h2 a img { vertical-align: middle; margin-left: 17px; }
footer h2:hover { background: url("../../images/common/ico_arrow_on.png") no-repeat 167px center; }
footer .otherLink { height: 73px; float: left; }
footer .otherLink li { width: 145px; float: left; line-height: 73px; margin-left: 73px; }
footer .otherLink li a { display: block; height: 100%; padding-left: 40px; font-size: 14px; }
footer .otherLink li a:hover { color: #176ab9; font-family: 'Nanum Gothic Bold'; }
footer .otherLink li:first-child { margin-left: 48px; }
footer .otherLink .menu_01 { background: url("../../images/common/img_sgis.png") no-repeat 0 center; }
footer .otherLink .menu_02 { background: url("../../images/common/img_news.png") no-repeat 0 center; }
footer .otherLink .menu_03 { background: url("../../images/common/img_video.png") no-repeat 0 center; }
footer .otherLink .menu_04 { background: url("../../images/common/img_note.png") no-repeat 5px center; }
footer .companyInfo { padding: 15px 0 35px; }
footer .companyInfo > p { float: left; }
footer .companyInfo > div { float: left; margin-left: 54px; width: 920px; }
footer .companyInfo .textLink { margin: 13px 0 0 0; }
footer .companyInfo .textLink li { float: left; position: relative; padding: 0 15px; }
footer .companyInfo .textLink li:before { content: ""; display: inline-block; position: absolute; width: 1px; height: 11px; background: #d2d2d2; top: 2px; left: 0; }
footer .companyInfo .textLink li:first-child:before { display: none; }
footer .companyInfo .textLink li:first-child { padding-left: 0; }
footer .companyInfo .textLink li a { color: #838383; font-family: 'Nanum Gothic Bold'; }
footer .companyInfo .textLink li a:hover { color: #2573bd; }
footer .companyInfo .address { margin-top: 15px; }
footer .companyInfo .address address { float: left; color: #838383; font-size: 12px; }
footer .companyInfo .address ul { float: left; width: 550px; }
footer .companyInfo .address ul li { float: left; color: #838383; font-size: 12px; margin-left: 15px; }
footer .companyInfo .address .copyright { display: block; padding-top: 5px; clear: both; font-size: 12px; color: #a1a1a1; }
/*	css오류 수정 leekh 20190610
footer .companyInfo select { position: absolute; top: 20px; right: 0; display: block; width: 170px; height: 30px; border: 1px solid #cacaca; color: #666666; -moz-appearance: menulist-button;-webkit-appearance: menulist-button; appearance: menulist-button;}
*/
footer .companyInfo select { position: absolute; top: 20px; right: 0; display: block; width: 170px; height: 30px; border: 1px solid #cacaca; color: #666666;}
.btnTop { position: fixed; bottom: 20px; left: 50%; margin-left: 560px; width: 44px; height: 44px; background: url("../../images/main/btn_top_scrolling.png") no-repeat; }

/* 상단 그래프 & 배너 */
.topGraph { position: relative; background: #c6ddf1; padding: 18px 0 17px;}
.topGraph:before {content: "";display: block;position: absolute;z-index: 0;background: url("../../images/main/bg_mainTop_01.png") no-repeat;width: 116px;height: 150px;top: 0;left: 50%;margin-left: -622px;}
.topGraph:after { content: ""; display: block; position: absolute; z-index: 0; background: url("../../images/main/bg_mainTop_02.png") no-repeat; width: 116px; height: 150px; top: 0; left: 50%; margin-left: 534px; }
.topGraph .rollGraphArea { position: relative; z-index: 1; background: #fff; width: 797px; height: 305px; float: left; }
.topGraph .rollGraphArea h3 { position: absolute; height: 28px; top: 20px; left: 20px; font-size: 19px; padding-left: 37px; color: #111111; background: url("../../images/main/bullet_map.png") no-repeat 0 bottom; line-height: 40px; font-family: 'Nanum Square Bold'; }
.topGraph .rollGraph { height: 100%; }
.topGraph .rollGraph .cont { height: 100%; }
.topGraph .rollGraph .txtInfo { float: left; width: 243px; height: 73px; background: #f3f3f3; margin-top: 80px; padding-top: 17px; text-align: center; }
.topGraph .rollGraph .txtInfo strong { font-weight: normal; font-family: 'Nanum Gothic Bold'; }
.topGraph .rollGraph .txtInfo .percent { margin-top: 10px; font-family: 'Nanum Gothic Bold'; font-size: 26px; color: #1a65ad; }
.topGraph .rollGraph .txtInfo .percent span { display: inline-block; width: 37px; height: 38px; font-size: 12px; font-family: 'Nanum Gothic'; color: #fff; line-height: 38px; vertical-align: middle; }
.topGraph .rollGraph .txtInfo .percent span.ico_up { background: url("../../images/main/ico_arrow_up.png") no-repeat center top; }
.topGraph .rollGraph .txtInfo .percent span.ico_down { background: url("../../images/main/ico_arrow_down.png") no-repeat center bottom; }
.topGraph .rollGraph .txtInfo + div {float: left;width: 544px;height: 100%;margin-left: 10px;}
.topGraph .controllBox { position: absolute; left: 58px; bottom: 17px; }
.topGraph .controllBox .controller { float: left; }
.topGraph .controllBox .controller button { display: inline-block; width: 8px; height: 15px; margin: 0 3px; vertical-align: bottom; }
.topGraph .controllBox .controller .btn_prev { background: url("../../images/main/btn_prev.png") no-repeat center; }
.topGraph .controllBox .controller .btn_next { background: url("../../images/main/btn_next.png") no-repeat center; }
.topGraph .controllBox .controller .btn_pause { background: url("../../images/main/btn_pause.png") no-repeat center; }
.topGraph .controllBox .pagination { float: left; text-align: left; margin-top: -2px; }
.topGraph .controllBox .pagination a { vertical-align: bottom; }
.topGraph .ad_banner { position: relative; z-index: 1; width: 265px; height:305px; float: left; margin-left: 13px; overflow: hidden; }
.topGraph .ad_banner .slick-dots { position: absolute; top: 5px; right: 10px; text-align: right; width:90%; height: 25px;}
.topGraph .ad_banner .slick-dots button { background: #7f7f7f; }
.topGraph .ad_banner .slick-dots button:before { display: none; }
.topGraph .ad_banner .slick-dots li { margin: 0 3px; width: 9px; height: 9px; }
.topGraph .ad_banner .slick-dots li button { width: 100%; height: 9px; border-radius: 50%; }
.topGraph .ad_banner .slick-dots li.slick-active { width: 28px; }
.topGraph .ad_banner .slick-dots li.slick-active button { background: #3680c7; border-radius: 4px; }
.topGraph .ad_banner .slick-next.slick-arrow, .topGraph .ad_banner .slick-prev.slick-arrow { display: none !important; }

/* 메인 중앙 컨텐츠 */
.boxCont{float:left;width: 797px;padding: 10px 0;}
.boxCont .row{vertical-align:  top;margin-top: 10px;border:1px solid #e1e5e9;box-sizing:border-box;}
.boxCont .row:first-child{margin-top:0;}
.boxCont .row:after{content:"";display:block;clear:both;}
.boxCont .row .rowTit{box-sizing: border-box;float:left;width: 137px;height:100%;padding: 30px 0 0 18px;color:#fff;font-size:20px;font-family:'Nanum Square Bold';}
.boxCont .row .rowTit + div{float: right;}
.boxCont .row.type01 .rowTit{height: 201px;background-color:#1878cc;background-image:url("../../images/main/bg_img_monitor.png");background-position: 70px 110px;background-repeat:no-repeat;}
.boxCont .row.type02 .rowTit{height: 135px;background-color:#13b098;background-image:url(../../images/main/bg_img_graph.png);background-position: 77px 71px;background-repeat:no-repeat;}
.boxCont .row.type03 .rowTit{height: 135px;background-color:#f39128;background-image:url("../../images/main/bg_img_global.png");background-position: 76px 63px;background-repeat:no-repeat;}
.boxCont .tabArea{width: 630px;margin: 13px 14px 11px;box-sizing: border-box;}
.boxCont .tabArea .mainTab li{position:relative;float:left;width: 119px;line-height: 34px;border-top:1px solid #e1e5e9;border-bottom:1px solid #e1e5e9;border-left:1px solid #c8cacd;background:#f3f3f3;text-align:center;box-sizing:border-box;height:  34px;}
.boxCont .tabArea .mainTab li a{cursor:pointer;color:#686868;font-size:15px;font-family:'Nanum Gothic Bold';display:block;width:100%;height: 100%;}
.boxCont .tabArea .mainTab li.active a, .boxCont .tabArea .mainTab li:hover a {position:relative;color: #fff;}
.boxCont .tabArea .mainTab li.active, .boxCont .tabArea .mainTab li:hover {height: 34px;line-height: 34px;background: #3986d0;border: 1px solid #3986d0;}
.boxCont .tabArea .mainTab li:first-child {border-left: 1px solid #e1e5e9;}
.boxCont .tabArea .mainTab li.active:first-child, .boxCont .tabArea .mainTab li.hover:first-child{border-left: 1px solid #3986d0;}
.boxCont .tabArea .mainTab li.active a span,.boxCont .tabArea .mainTab li:hover a span{text-align:left;padding-left: 37px;height: 32px;line-height: 32px;}
.boxCont .tabArea .mainTab li.active span::before,.boxCont .tabArea .mainTab li:hover span::before{position:absolute;content:'';vertical-align:middle;line-height:34px;background-image:url(../../images/main/ico_mainTab.png);background-repeat:no-repeat;left: 13px;top: 8px;text-align:  center;background-position: left center;}
.boxCont .tabArea .mainTab li:nth-child(1).active span::before, .boxCont .tabArea .mainTab li:nth-child(1):hover span::before{background-position:-7px -10px;width: 16px;height:17px;}
.boxCont .tabArea .mainTab li:nth-child(2).active span::before, .boxCont .tabArea .mainTab li:nth-child(2):hover span::before{background-position:-7px -36px;width:18px;height:16px;}
.boxCont .tabArea .mainTab li:nth-child(3).active span::before, .boxCont .tabArea .mainTab li:nth-child(3):hover span::before{background-position:-7px -61px;width:17px;height:17px;}
.boxCont .tabArea .mainTab li:nth-child(4).active span::before, .boxCont .tabArea .mainTab li:nth-child(4):hover span::before{background-position:-7px -87px;width:19px;height:16px;}
.boxCont .tabArea .mainTab li:nth-child(5).active span::before, .boxCont .tabArea .mainTab li:nth-child(5):hover span::before{background-position:-7px -111px;width:14px;height:18px;}
.boxCont .tabArea .mainTab li:hover::after,.boxCont .tabArea .mainTab li.active::after{content:' ';position:absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:5px solid #3986d0;bottom:-5px;left:45%;}
.boxCont .tabArea .mainTab li.btnMore {width: 34px;height: 34px;background: #fff url("../../images/main/btn_more.png") no-repeat center;box-sizing:  border-box;border-left: 1px solid #d7dce1;border-right: 1px solid #e1e5e9;}
.boxCont .tabArea .mainTab li.btnMore:hover {border: 1px solid #e1e5e9;border-left: 1px solid #e1e5e9;background: url("../../images/main/btn_more_on.png") no-repeat center;}
.boxCont .tabArea .mainTab li.btnMore:hover::after,.boxCont .tabArea .mainTab li.btnMore.active::after { display: none; }

.boxCont .mainTabCont {margin-top: 21px;}
.boxCont .mainTabCont .cont > div {position: relative;float: left;width: 186px;height: 121px;padding: 0 12px;}
.boxCont .mainTabCont .cont > div:before { content: ""; position: absolute; top: 5px; left: -1px; width: 1px; height: 114px; background: #e9eaeb; }
.boxCont .mainTabCont .cont > div:first-child:before { display: none; }
.boxCont .mainTabCont .cont > div strong { display: block; color: #222; font-size: 15px; font-weight: normal; font-family: 'Nanum Gothic Bold'; }
.boxCont .mainTabCont .cont > div p {display: block;height: 70px;margin-top: 10px;font-size: 13px;color: #888888;line-height: 18px;}
.boxCont .mainTabCont .cont > div p + div {position: absolute;bottom: 0px;left: 12px;}
.boxCont .mainTabCont .cont .tag { text-align: left; }
.boxCont .mainTabCont .cont .tag a {display: inline-block;margin-right: 3px;padding: 0 7px;height: 17px;color: #fff;line-height: 17px;font-size: 11px;vertical-align: middle;}
/* .boxCont .mainTabCont .cont .tag a { display: inline-block; margin-right: 3px; padding: 0 7px; height: 17px; color: #fff; line-height: 17px; font-size: 11px; background: #3680c7; } */
.boxCont .mainTabCont .cont .tag a.blue { background: #3680c7; }
.boxCont .mainTabCont .cont .tag a.green { background: #1cb48e; }
.boxCont .mainTabCont .cont .tag a.orange { background: #f58711; }
.boxCont .mainTabCont .cont .tag a.sky { background: #23c2d2; }
.boxCont .mainTabCont .cont .tag a.purple { background: #835ed8; }
.boxCont .menustats {position: relative;overflow: hidden;width: 558px;padding: 0 50px;}
.boxCont .menustats ul {padding-bottom: 17px;}
.boxCont .menustats .menuRoll {width: 1000px;padding-top: 29px;}
.boxCont .menustats li {float: left;width: 64px;margin-left: 60px;text-align: center;}
.boxCont .menustats li:first-child { margin-left: 0; }
.boxCont .menustats li.menu_01 {background: url("../../images/main/img_upgrage.png") no-repeat center 5px;}
.boxCont .menustats li.menu_02 {background: url("../../images/main/img_house.png") no-repeat center 5px;}
.boxCont .menustats li.menu_03 { background: url("../../images/main/img_sprout.png") no-repeat center top; }
.boxCont .menustats li.menu_04 {background: url("../../images/main/img_building.png") no-repeat center 2px;}
.boxCont .menustats li.menu_05 {background: url("../../images/main/img_pieChart.png") no-repeat 1px 5px;}
.boxCont .menustats li.menu_06 { background: url("../../images/main/img_cloud.png") no-repeat center top; }
.boxCont .menustats li.menu_07 { background: url("../../images/main/img_data.png") no-repeat center top; }

.boxCont .menustats li a{display:block;color:#666666;padding-top: 47px;}
.boxCont .menustats li:hover a{color:#279d98;font-family:'Nanum Gothic Bold';}
.boxCont .menustats li a >  span{display: inline-block;margin-top: 12px;white-space:nowrap;font-size:13px;}
.boxCont .menustats button{position:absolute;top:50px;width:15px;height:36px;}
.boxCont .menustats button.btn_prev{left:15px;background:url("../../images/main/btn_menuPrev.png") no-repeat;}
.boxCont .menustats button.btn_next{right:15px;background:url("../../images/main/btn_menuNext.png") no-repeat;}
.boxCont .menuMap{position:relative;overflow:hidden;width: 558px;padding: 0 50px;margin-top:30px;}
.boxCont .menuMap li{float:left;width: 63px;margin-left:60px;text-align:center;}
.boxCont .menuMap li:first-child{margin-left:0;}
.boxCont .menuMap li.menu_01{background:url("../../images/main/img_monitor.png") no-repeat center top;}
.boxCont .menuMap li.menu_02{background:url("../../images/main/img_people.png") no-repeat center top;}
.boxCont .menuMap li.menu_03{background:url("../../images/main/img_old.png") no-repeat center top;}
.boxCont .menuMap li.menu_04{background:url("../../images/main/img_docPie.png") no-repeat center top;}
.boxCont .menuMap li.menu_05{background: url("../../images/main/img_prepare.png") no-repeat center 4px;}
.boxCont .menuMap li:hover a{color:#d16e26;font-family:'Nanum Gothic Bold';}
.boxCont .menuMap a{display:block;padding-top: 47px;color:#666666;}
.boxCont .menuMap a > span{display:inline-block;margin-top:12px;white-space:nowrap;font-size:13px;}
.serviceArea{float:left;padding: 10px 0;}
.serviceArea .serviceBox{position:relative;width: 270px;height: 348px;margin:0 0 0 13px;border:1px solid #e1e5e9;box-sizing:border-box;}
.serviceArea .serviceTit{position:relative;width:100%;height:48px;background:#20abc4;color:#fff;font-family:'Nanum Square Bold';font-size:19px;line-height:48px;text-indent:20px;border-bottom:1px solid #e1e5e9;}
.serviceArea .serviceTit .btnService{position:absolute;right:20px;top:17px;}
.serviceArea .serviceTit .btnService button{display:inline-block;width:9px;height:16px;float:left;margin-left:11px;}
.serviceArea .serviceTit .btnService button:first-child{margin-left:0;}
.serviceArea .serviceTit .btnService button.btn_prev{background:url("../../images/main/btn_prevService.png") no-repeat;}
.serviceArea .serviceTit .btnService button.btn_prev:hover{background:url("../../images/main/btn_prevService_on.png") no-repeat;}
.serviceArea .serviceTit .btnService button.btn_next{background:url("../../images/main/btn_nextService.png") no-repeat;}
.serviceArea .serviceTit .btnService button.btn_next:hover{background:url("../../images/main/btn_nextService_on.png") no-repeat;}
.serviceArea .serviceCont {position: relative;width: 203px;margin: 0px auto 0 33px;overflow: hidden;}
.serviceArea .serviceCont ul {width: 484px;margin: 0 0 0 -43px;}
.serviceArea .serviceCont li{font-family:'Nanum Gothic';float:left;width: 76px;margin: 19px 0 0 44px;text-align:center;}
.serviceArea .serviceCont li.menu_01{background:url("../../images/main/img_statistics.png") no-repeat;}
.serviceArea .serviceCont li.menu_02{background:url("../../images/main/img_myhouse.png") no-repeat;}
.serviceArea .serviceCont li.menu_03{background:url("../../images/main/img_paper.png") no-repeat;}
.serviceArea .serviceCont li.menu_04{background:url("../../images/main/img_map.png") no-repeat;}
.serviceArea .serviceCont li.menu_05{background:url("../../images/main/img_earth.png") no-repeat;}
.serviceArea .serviceCont li.menu_06{background:url("../../images/main/img_comm.png") no-repeat;}
.serviceArea .serviceCont li.menu_07{background:url("../../images/main/img_gallery.png") no-repeat;}
.serviceArea .serviceCont li a{font-size: 13px;display:block;padding-top: 81px;color: #555;}
.serviceArea .serviceCont li:hover a{color:#1aa1ba;font-family:'Nanum Gothic Bold';}
.serviceArea .pagination{position:absolute;left:0;bottom: 7px;width:100%;}
.serviceArea .pagination a.active{background:#25aec7;}
.serviceArea .boardLink{position:relative;width:270px;height: 135px;margin: 12px 0 0 13px;background:#f8f2ea url("../../images/main/img_books.png") no-repeat 8px 31px;overflow:hidden;}
.serviceArea .boardLink strong{font-weight:normal;font-family:'Nanum Square Bold';font-size:20px;display:block;color:#222;margin-bottom:5px;}
.serviceArea .boardLink span{margin-top:6px;font-size:13px;color:#888;}
.serviceArea .boardLink a{display:block;padding: 29px 7px 30px 93px;}
.serviceArea .boardLink:after{content:"";display:block;position:absolute;bottom: 13px;right:18px;width:51px;height:12px;background:url("../../images/main/bg_service_enter.png") no-repeat;}

.listArea{background:#f3f5f7;padding: 13px 0;}
.listArea .inner{overflow:hidden;}
.listArea .inner > ul{margin:-19px 0 0 -24px;}
.listArea .inner > ul > li{position:relative;float:left;width:312px;height:154px;background:#fff;margin:19px 0 0 24px;padding: 20px 16px;}
.listArea .inner > ul > li > strong{display:block;margin-bottom:16px;font-weight:normal;font-family:'Nanum Square Bold';color:#222222;font-size:19px;text-indent: 0px;}
.listArea li li{position:  relative;margin-top:11px;}
.listArea li li:first-child{margin-top:0;}
.listArea li li:before{content: '';display:inline-block;width: 2px;height: 2px;background: #666;position: absolute;top: 8px;margin-left: 2px;}
.listArea li li a{display:inline-block;width:240px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left: 8px;}
.listArea li li a:hover{color:#3680c7;text-decoration:underline;}
.listArea li li:hover:before { background: #3680c7;}
.listArea li li span{color:#a5a5a5;font-size:13px;float:right;padding-right:10px;}
.listArea .imgArticle{border:1px solid #f1f2f4;box-sizing:border-box;background:#f1f2f4;}
.listArea .imgArticle > div{position:relative;float:left;width:130px;height:74px;padding:25px 15px 15px;}
.listArea .imgArticle > div:first-child{width:150px;padding:0;}
.listArea .imgArticle strong,.listArea .imgArticle span{display:block;}
.listArea .imgArticle strong a{white-space:normal;width:136px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;line-height:1.2;height:2.4em;text-align:left;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.listArea .imgArticle strong{display:block;height:57px;font-size:17px;color:#555555;font-family:'Nanum Square Bold';}
.listArea .imgArticle span{position:absolute;bottom:15px;left:15px;font-size:13px;color:#a6a6a6;}
.listArea .sgs{padding-top:13px;}
.listArea .sgs li{position:relative;float:left;background:url("../../images/main/img_gear.png") no-repeat center 0;font-family:'Nanum Square Bold';color:#777;font-size:17px;text-align:center;width:156px;margin:0;}
.listArea .sgs li:first-child{background:url("../../images/main/img_thinking.png") no-repeat center 0;}
.listArea .sgs li:before{content:"";position:absolute;top:10px;left:0;width:1px;height:110px;background:#e3e6ea;}
.listArea .sgs li:first-child:before{display:none;}
.listArea .sgs a{display:block;width:100%;height:100%;padding-top:110px;color:#222222;padding-left:0;}
.listArea .sgs a:hover{color:#222222;text-decoration:none;}
.listArea .btn_more{position:absolute;top:28px;right:25px;width:14px;height:14px;background:url("../../images/main/btn_more.png") no-repeat;}

/* 알럿팝업 */
.popupWrapper{background:rgba(0,0,0,0.8); position: absolute; top: 0; width: 100%; height: 100%; z-index: 30000;}
.alertPopupWrapper{border:1px solid #ccc;background:#fff;width:400px;height:auto;overflow:hidden;position:absolute;left:50%;margin-left:-200px;}
.alertPopupWrapper .topbar{border-bottom:1px solid #ccc;width:100%;height:32px;line-height:32px;overflow:hidden;background:#f5f5f5;position:relative;}
.alertPopupWrapper .topbar>span{display:block;margin:0 0 0 10px}
.alertPopupWrapper .topbar a{opacity:.4;display:block;width:32px;height:32px;overflow:hidden;position:absolute;right:0;top:0;background:url(/img/ico/ico_close01.png) no-repeat center center;text-indent:-2000px;  transition-duration: .3s; transition-property: transform; transition-timing-function: ease-in-out; cursor: pointer; }
.alertPopupWrapper .topbar a:hover{transform: rotate(90deg);opacity:1;}
.alertPopupWrapper .popContents{width:100%;height:auto;overflow:hidden;padding:15px 0;}
.alertPopupWrapper .txt{position:relative;display:block;height:auto;padding-left:15px;overflow:hidden;margin:5px 0 0 72px;color:#666;font-size:11px;line-height:1.5em;text-align:left;}
.alertPopupWrapper .txt:before{content:"※";font-size:13px;position:absolute;left:0;top:0;}
.alertPopupWrapper .btnBox{width:100%; height:auto; overflow:hidden;margin:15px auto 0 auto;text-align:center;}
.alertPopupWrapper .messageBox{ width:90%; height:auto; overflow:hidden; text-align:center; margin:20px auto;line-height:25px;}
.alertPopupWrapper .btnStyle01 {display:inline-block;padding:5px 10px;font-size:13px;height:20px;line-height:20px;background:#dcdcdc;color:#666;margin:0 5px; cursor: pointer; }
.alertPopupWrapper .btnStyle01:hover, .btnStyle01:focus,.btnStyle01.on{background:#21b699;color:#fff} /* 2017.12.21 [개발팀] 접근성시정조치 */
.deem{background:rgba(0,0,0,0.8);display:block;height:170%;left:0;opacity:0.6;filter:alpha(opacity=60);position:fixed;top:0;width:100%;z-index:20000;}
.errorBody{height:200px;}
.errorMessage{width:400px;/*height: auto; */overflow:hidden;border:3px solid #656972;border-radius:5px;padding:20px 20px 20px 70px;font-size:20px;margin:100px auto;color:#333;box-shadow:1px 1px 3px #ccc;background:url(/img/im/icon_warning.gif) no-repeat 20px center;word-break:break-all;}
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled{opacity:1}

/* 추가 2018-07-20 */
.pdl5{padding-left:5px;}
.txtL{text-align:left!important;}

/* margin */
.m0{margin:0}
.m5{margin:5px}
.m10{margin:10px}
.m15{margin:15px}
.m20{margin:20px}
.m25{margin:25px}
.m30{margin:30px}
.m35{margin:35px}
.m40{margin:40px}
.m45{margin:45px}
.m50{margin:50px}
.mr0{margin-right:0}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr25{margin-right:25px}
.mr30{margin-right:30px}
.mr35{margin-right:35px}
.mr40{margin-right:40px}
.mr45{margin-right:45px}
.mr50{margin-right:50px}

.mt0{margin-top:0}
.mt5{margin-top:5px}
.mt8{margin-top:8px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt25{margin-top:25px}
.mt30{margin-top:30px}
.mt35{margin-top:35px}
.mt40{margin-top:40px}
.mt45{margin-top:45px}
.mt50{margin-top:50px}
.mt57{margin-top:57px}

.mb0{margin-bottom:0!important;}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb25{margin-bottom:25px}
.mb30{margin-bottom:30px}
.mb35{margin-bottom:35px}
.mb40{margin-bottom:40px}
.mb45{margin-bottom:45px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:105px}

.ml0{margin-left:0}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml25{margin-left:25px}
.ml30{margin-left:30px}
.ml35{margin-left:35px}
.ml40{margin-left:40px}
.ml45{margin-left:45px}
.ml50{margin-left:50px}

.p0{padding:0}
.p5{padding:5px}
.p10{padding:10px}
.p15{padding:15px}
.p20{padding:20px}
.p25{padding:25px}
.p30{padding:30px}
.p35{padding:35px}
.p40{padding:40px}
.p45{padding:45px}
.p50{padding:50px}

.pr0{padding-right:0}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr25{padding-right:25px}
.pr30{padding-right:30px}
.pr35{padding-right:35px}
.pr40{padding-right:40px}
.pr45{padding-right:45px}
.pr50{padding-right:50px}

.pt0{padding-top:0}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt25{padding-top:25px}
.pt30{padding-top:30px}
.pt35{padding-top:35px}
.pt40{padding-top:40px}
.pt45{padding-top:45px}
.pt50{padding-top:50px}
.pt100{padding-top:100px}

.pb0{padding-bottom:0}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb25{padding-bottom:25px}
.pb30{padding-bottom:30px}
.pb35{padding-bottom:35px}
.pb40{padding-bottom:40px}
.pb45{padding-bottom:45px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:105px}

.pl0{padding-left:0}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl25{padding-left:25px}
.pl30{padding-left:30px}
.pl35{padding-left:35px}
.pl40{padding-left:40px}
.pl45{padding-left:45px}
.pl50{padding-left:50px}

.spbox{display:inline-block;text-align:center;margin:0 5px 0 0;padding:5px;color:#fff;font-size:11px;font-family:"dotum","돋움",sans-serif;}
/* .spbox{display:inline-block;min-width:40px;text-align:center;margin:0 5px 0 0;padding:5px;color:#fff;font-size:11px;border-radius:5px; font-family: "dotum", "돋움", sans-serif;} */
.spbox.type01{background:#3680c7;}
.spbox.type02{background:#1e90ff;}
.spbox.type03{background:#3680c7;}
.rstxt{color:#606060;font-size:15px;display:block;padding:10px 20px;border-bottom:1px solid #d6d6d6;}
.spbox.type04{background:#d2691e;}
.spbox.type05{background:#ff8c00;}
.spbox.type06{background:#1cb48e;}
.spbox.type07{background:#23c2d2;}
.spbox.type08{background:#f58711;}
.spbox.type09{background:#835ed8;}
.spbox.type10{background:#8C8C8C;}

header #gnb ul li:hover .subMenu {     background-color: #f2f2f2;}
.main-hover-map{position:relative;float:left;width: 554px;height:100%;margin-left:-10px;display:block;}
.national-box{position: absolute;width: 204px;border: 1px solid #c6ddf1;box-sizing:  border-box;height: 260px;z-index: 1;background-color: #fff;}
.national-box h4{position:  absolute;font-family:Nanum Gothic Bold;font-size: 13px;line-height:24px;top: 5px;left: 10px;background: #20abc4;padding: 2px 7px;color:  #fff;}
.national-box p{position:  absolute;font-size: 0;color:#888;padding:0 15px;word-break:keep-all;top: 30px;}

/*map*/
.submap-box{width:661px;height:449px;position:absolute;right:0;top:0;z-index:10;}
.map-layer-bg{padding:0;box-sizing:border-box;/* background-image:url(/images/main/map-bg.png); */background-position:center;width:100%;height:100%;}
#submap-box{width: 547px;height:100%;position: absolute;left: 0;}
.main-hover-map > div{display:inline-block;float: left;/* height: 100%; */}
#wmap{width:auto;height: 100%;display:block;padding:30px 0 10px;box-sizing:border-box;}
#wmap img{display:block;height:100%;margin: 0 auto;}
#submap-box img{display:block;height:100%;margin:0 auto;}
/*header .util li{margin-left:3px !important;}2019-03-18 박길섭*/





/* 20191112 leekh helpHeader.jsp 에 정의되어 있던 CSS.
 해당 jsp 파일이 body에 include 되어 있어서 웹표준에 위배됨
해당 css는 도움말의 돋보기 부분의 일부  도움말에 적용
 */
 
 
 	.cdontdents {
		display : inline-block;
		word-break : break-all;
		white-space : pre-line;
	}
	
	.contents h2:not(.Type_4) {
		font-size:14px; color:#595959; text-indent:7px; margin-top:10px; font-weight: 100;
		text-indent : -15px;
		padding-left : 18px;
	}
	
	.contents li {
		font-size:14px; color:#595959; margin-top:10px; font-weight: 100; line-height:13px;
		text-indent : -15px;
		padding-left : 18px;
	}
	
	#fontplusbtn img {
		width : 30px; height:30px; margin-top : 1px;
	}
	
	h2.Type_2 {
		background:url(/img/newhelp/bullet_1.png) no-repeat 6px 4px; padding-left:22px; line-height:1.5; text-indent:0 !important;
		font-weight:normal; margin-bottom:15px;
	}
	.Cont_List li { 
		background:url(/img/newhelp/bullet_1.png) no-repeat 6px 4px; padding-left:22px; line-height:1.5; text-indent:0; font-weight:normal;
	}
	
	.mapSiteContents li {
		line-height:37px;border-bottom:solid 1px #e5e7e8;padding-left:26px;clear: both;margin-top:0; text-indent:inherit;
	}
/* 2020년 SGIS고도화 3차 추가 시작*/
#helperPictures .helper_table {
		border: 1px solid #444444;
		border-collapse: collapse;
	}

#helperPictures .helper_table td {
	border: 1px solid #444444;
	text-align: center;
	vertical-align: middle;
}
/* 2020년 SGIS고도화 3차 추가 끝*/