@charset "UTF-8";
/* mobile style */
*{-webkit-text-size-adjust:none}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select{margin:0;padding:0;font-family:'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;font-weight:normal}
body{-webkit-user-select:none;/* -webkit-touch-callout:none;*/-webkit-tap-highlight-color:rgba(0,0,0,0)}
/* li{list-style:none} */
a{text-decoration:none}
a[href^="tel"]{ font-style:normal}
address, caption, em, var{font-style:normal;font-weight:normal}
input, textarea, select{letter-spacing:normal}
ol, ul, dl{list-style:none}
fieldset, img{border:0}
legend, caption{display:none}
img{border:0;vertical-align:top}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
br{letter-spacing:normal}
p{letter-spacing:normal}
input{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none}
/*
input[type="checkbox"]{-webkit-appearance:none;-webkit-border-radius:0}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{border:none;-webkit-appearance:none} 
*/
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
textarea{-webkit-appearance:none}
select{-webkit-appearance:menulist-text}



/* 공통 CSS */
body, button, h1, h2, h3, h4, h5, input, select, table, textarea {
font-size:14px;
line-height:1.267em;
}
html,body {
height:100%;
overflow-x:hidden;
overflow-y:auto;
}

/* LAYOUT */
#wrap {
background-color:#e5e5e5;
}
.contents {
position:relative;
margin:0;
padding-bottom:30px;
min-height:280px;
}

/* /////// 공통적용 /////// */
.hide {
visibility:hidden;
}
.mt50 {
margin-top:50px;
}
.m10 {
margin:10px;
}
/* 공통 - 버튼 */
.btn {
padding:10px 7px;
font-size:1em;
text-align:center;
color:#fff;	
border:none;
border-radius:4px;
}
button.aqua {
background:#00d1e5;	
}

.btn_right {
margin:10px 0;
text-align:right;
}
.btn_center {
margin:10px 0;
text-align:center;
}
.btn_header {
float:left;
margin-top:5px;
}
button.gotop {
position:absolute;
bottom:5px;
right:10px;
width:30px;
height:30px;
border:1px solid #b8b8b8;
border-radius:5px;
text-indent:-999em;
opacity:0.85;
background-image:url(../images/btn_gotop.png);
background-color:#fafafa;
background-repeat:no-repeat;
background-size:100%;
background-position:center;
z-index:800;
}
button.more {
margin:5px 10px;
padding:5px;
width:97%;
font-size:0.9em;
text-align:center;
border:1px solid #ccc;
background:#f7f7f7;
}

/* /////// HEADER /////// */
.header{
position:relative;
}
/* HEADER - 활용사례, 새소식, 보도자료 등 */
.sub h1 {
width:250px;
height:100px;
margin:0 auto;
text-indent:-999em;
background:url(../images/logo_sub.png) no-repeat center;
background-size:220px auto;
}



/* HEADER - 메뉴 */
.gnb {
position:absolute;
top:38px;
left:10px;
width:40px;
height:40px;
border-radius:7px;
cursor:pointer;
text-indent:-999em;	
background-color:#000;
background-image:url(../images/bullet_trigger.png);
background-repeat:no-repeat;
background-position:center;
z-index:800;

}
.gnb_sub {
position:absolute;
top:80px;
left:10px;
width:100px;
border-radius:10px;
background-color:#000;
z-index:600;		
}
.gnb_sub li {
margin:0 10px;
padding:20px 0;
border-bottom:1px solid #626262;
text-align:center;
cursor:pointer;
color:#fff;
font-size:1.2em;
}
.gnb_sub li:last-child {
border:none;
}
.gnb_sub li a {
color:white;
font-size:20px;
}

/* /////// FOOTER /////// */
.footer {
clear:left;
position:relative;
height:200px;
padding:5px;
color:#FFF;
text-align:right;
background:url(../images/footer_bg.jpg) repeat-x;
background-size:100% auto;
}
.footer .copyright {
position:absolute;
right:10px;
bottom:0;
height:80px;
padding-top:70px;
/* background:url(../images/logo_footer.png) no-repeat right top;
background-size:120px auto; */
}
.footer .copyright p {
margin-bottom:0px;
font-size:0.8em;
}
.footer .copyright p.footerLogo {
display:inline-block;
position:absolute;
right:10px;
top:0px;
height:80px;
width:120px;
background:url(../images/logo_footer.png) no-repeat right top;
background-size:120px auto;
}
.footer .sns {
position:absolute;
top:20px;
left:10px;
text-align:left;	
}
.footer .sns p {
font-size:1.1em;
letter-spacing:-1px;
}
.footer .sns a {
display:inline-block;
width:50px;
height:50px;
text-indent:-999em;
background-repeat:no-repeat;
background-position:center;
background-size:80% auto;	
}
.footer .sns a span {
display:none;
}
.footer .sns a.facebook {
background-image:url(../images/ico_sns_facebook.png);
}
.footer .sns a.googleplus {
background-image:url(../images/ico_sns_googleplus.png);
}
.footer .sns a.twitter {
background-image:url(../images/ico_sns_twitter.png);
}
.footer .sns a.blog {
background-image:url(../images/ico_sns_blog.png);

}

/* /////// 메인 /////// */
.main {
background-image:url(../images/header_main.jpg);
background-repeat:no-repeat;
background-position:top left;
background-size:100% auto;	
}
/* 메인 - HEADER */
.main h1 {
width:300px;
height:100px;
margin:0 auto;
cursor:pointer;
text-indent:-999em;
background:url(../images/logo.png) no-repeat center;
background-size:220px auto; 	
}
.main ul.mainmenu {
height:130px;
margin:0;
padding:0;
}
.main ul.mainmenu li {
display:inline-block;
position:relative;
width:50%;
height:100%;
margin:0 -5px 0 0;
padding:0;
background-repeat:no-repeat;
background-position:center 50%;	
background-size:80px auto;
}
.main ul.mainmenu li.cloud {
background-color:#00b7ee;
background-image:url(../images/ico_cloud.png);	
}
.main ul.mainmenu li.case {
background-color:#1565a2;
background-image:url(../images/ico_case.png);		
}
.main ul.mainmenu li.theme {
background-color:#367037;
background-image:url(../images/ico_theme.png);		
}
.main ul.mainmenu li.map {
background-color:#2896ea;
background-image:url(../images/ico_map.png);	
}
.main ul.mainmenu li span {
display:inline-block;
width:100%;
color:#FFF;
position:absolute;
bottom:10px;
font-size:1.5em;
text-align:center;
letter-spacing:-1px;
}

.totalsearch {
position:relative;
margin:0 auto;
margin-bottom:30px;
width:85%;
padding:5px 10px;
border-radius:4px;
background-color:#f3f3f3;
}
.totalsearch input {
width:85%;
margin-bottom:3px;
padding:3px;
border:none;
font-size:1.0em;
color:#000;
background-color:#f3f3f3;
}
.totalsearch button {
position:absolute;
top:3px;
right:0px;
width:50px;
height:30px;
margin:0;
text-indent:-999em;
border:none;
background-color:transparent;
background-image:url(../images/mapsearch_btn.png);
background-repeat:no-repeat;
background-size:60%;
}

/* 메인 - CONTENTS */
/* 메인 - 활용사례 */
.casewrap {
position:relative;
padding:10px;
background-color:#c8cfd1;
}
.casewrap span.info {
padding-left:15px;
color:#000;
font-size:0.9em;
letter-spacing:-1px;
background-image:url(../images/bullet_info.png);
background-repeat:no-repeat;
background-position:left 50%;
background-size:10px auto;
}
.casewrap button {
display:inline-block;
position:absolute;
top:10px;
right:5px;
border:none;
color:#000;
font-size:0.9em;
background-color:#c8cfd1;
}
.maincase {
margin:5px 0;
width:100%;
white-space:normal;
text-align:center;
}
.maincase li {
position:relative;
display:inline-block;
width:19%;
margin-right:-1px;
text-align:center;
border-radius:7px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center 5px;
background-size: 30px auto;
}
.maincase li.GIS {
background-image:url(../images/ico_category_main_geo.png);
}
.maincase li.OCEAN {
background-image:url(../images/ico_category_main_ocean.png);
}
.maincase li.LAND {
background-image:url(../images/ico_category_main_soil.png);
}
.maincase li.DISASTER {
background-image:url(../images/ico_category_main_disaster.png);
}
.maincase li.ENVIRONMENT {
background-image:url(../images/ico_category_main_environment.png);
}
/* .maincase li p {
position:absolute;
bottom:5px;
width:100%;
text-align:center;
font-size:1.3em;
color:#32849b;
letter-spacing:-1px;	
} */
.maincase li p.caseTitle {
	margin:35px 0 5px;
	text-align:center;
font-size:1.2em;
color:#205767;
letter-spacing:-1px;
}
/* 활용예시 숫자 폰트 사이즈 */
.maincase li p.caseTitle span {
font-size:0.8em;
}
.maincase li p.caseText {
	padding:5px;
	color:#bfe9f4;
	font-size:0.9em;
	text-align:left;
	height:35px;
	background-color:#005982;	
}
.maincase li p.caseImg {
	padding:5px;
	border-radius:0 0 7px 7px;
	background-color:#005982;
}
.maincase li p.caseImg img {
	width:50px;
	height:50px;
	border-radius:50%;
}

/* 메인 - 테마영상 */
.themewrap {
clear:left;
position:relative;
padding:10px 10px 30px 10px;
background-color:#2d374f;
}
.themewrap span.info {
padding-left:15px;
color:#fff;
font-size:0.9em;
background-image:url(../images/bullet_info.png);
background-repeat:no-repeat;
background-position:left 50%;
background-size:10px auto;
}
.themewrap button {
display:inline-block;
position:absolute;
top:10px;
right:5px;
border:none;
color:#fff;
font-size:0.9em;
background-color:#2d374f;
}
.maintheme * {
	vertical-align:top;
}
.maintheme {
overflow:hidden;
margin:5px 0;
width:100%;
white-space:normal;
text-align:center;
}
.maintheme li {
display:inline-block;
width:32%;
border-radius:10px;
background-color:#fff;	
}
.maintheme li p.ico {
position:relative;
display:inline-block;
width:100%;
height:70px;
margin:10px 0 0 0;
padding:0;
text-align:center;
background-repeat:no-repeat;
background-position:center top;
background-size:40px auto;	
}
.maintheme li p.ico span {
position:absolute;
top:45px;
left:0;
display:inline-block;
width:100%;
text-align:center;
font-size:1.2em;
color:#000;
letter-spacing:-1px;		
}
.maintheme li.nature p.ico {
background-image:url(../images/ico_theme_nature.png);
}
.maintheme li.disaster p.ico {
background-image:url(../images/ico_theme_disaster.png);
}
.maintheme li.culture p.ico {
background-image:url(../images/ico_theme_culture.png);
}
.maintheme li.city p.ico {
background-image:url(../images/ico_theme_city.png);
}
.maintheme li p.ico {
width:100%;
text-align:center;
font-size:1em;
color:#000;
letter-spacing:-1px;	
}
.maintheme li img {
width:100%;
}
.maintheme li p.name {
padding-bottom:10px;
text-align:center;
color:#777;		
}
.maintheme li p.name span {
display:block;
width:100%;
letter-spacing:-1px;
font-size:1em;
color:#4c4c4c;
}
.maintheme li p.name span.where {
margin:5px 0;
font-size:1.2em;
color:#000;	
/* 말줄임 */
	overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.slide {
padding:0;
padding-top:10px;
text-align:center;
background:#fff;
}
.slide span {
display:inline-block;
width:10px;
height:5px;
text-indent:-9999em;
background:#e2e2e2;
}
.slide span.on {
width:25px;
background:#53b7e8;	
}

/* 메인 - 새소식 보도자료 유튜브 */
.newswrap {
float:left;
width:100%;
background:#137362;
}
.newswrap p {
float:left;
width:20%;
height:145px;
position:relative;
background-repeat:no-repeat;
background-position:center;
background-size:60px auto;
}
.newswrap p.paper {
background-color:#3db39e;
background-image:url(../images/ico_notice.png);	
}
.newswrap p.bbs {
background-color:#349886;	
background-image:url(../images/ico_news.png);	
}
.newswrap p span {
position:absolute;
bottom:20px;
width:100%;
color:#000;
text-align:center;
font-size:1.1em;
}
.youtube {
float:right;
position:relative;
width:56%;
padding:5px;
text-align:center;
background:#137362;
margin:0 auto;
}
.youtube li {
position:relative;
display:inline-block;
width:75px;
height:auto;
margin:0 0 4px 0;
padding:3px 0;
border-radius:4px;
background-color:#000;
}
.youtube  li a img {
max-width:100%;
}
.youtube  li a span {
position:absolute;
display:inline-block;
width:100%;
height:100%;
opacity:0.9;
text-indent:-999em;
background-image:url(../images/btn_play.png);
background-repeat:no-repeat;
background-position:center;
background-size:30px auto;	
z-index:500;
}
.youtube  p.kari {
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
margin:-25px 0 0 -25px;
padding:2px;
text-indent:-999em;
background-image:url(../images/ico_youtube.png);
background-repeat:no-repeat;
background-position:center;
background-size:50px auto;
background-color:#cb9373;
border-radius:25px;	
z-index:900;
}

@media (min-width:361px) and (max-width:568px) {
.youtube {
width:200px;
}
}
@media (min-width:569px) {
.youtube .kari {
display:none;
}
}
@media (min-width:569px) and (max-width:640px) {
.youtube {
width:380px;
margin:30px auto 0;
margin-left:-15px;
}
.youtube li {
width:90px;
}
}

@media (min-width:641px) and (max-width:768px) {
.youtube {
width:420px;
margin:20px auto 0;
margin-left:-10px;
}
.youtube li {
width:100px;
}
}

@media (min-width:769px) {
.youtube {
margin:15px auto 0;
text-align:left;
width:500px;
}
.youtube li {
width:120px;
}	
}



/* /////// CONTENTS /////// */
/* TITLE */
.title {
position:relative;
margin:10px;
}
.title h2 {
margin-bottom:10px;
padding-left:22px;
font-size:1.5em;
color:#000;
font-weight:bold;
background:url(../images/bullet_h2.png) no-repeat left 50%;
background-size:0.7em auto;
}
.title .sorting {
position:absolute;
top:5px;
right:0;
}
.title .sorting label {
margin-left:10px;
font-size:12px;
}


/* 카테고리 - 활용사례 */
.category {
}
.category .case_all {
padding:5px;
font-size:15px;
color:#000;
text-align:center;
cursor:pointer;
border:1px solid #74a836;
background:#fff;
}
.category .case_all.on {
background-color:#FFC;	
}
.category .case {
margin:5px;
white-space:nowrap;
}
.category .case li {
position:relative;
display:inline-block;
width:20%;
height:70px;
margin-right:-2px;
text-align:center;

background-color:#fff;	
background-repeat:no-repeat;
background-position:center 7px;
background-size:40px auto;	
}
.category .case li.on {
background-color:#FFC;
}
.category .case li.GIS {
background-image:url(../images/ico_category_main_geo.png);
}
.category .case li.OCEAN {
background-image:url(../images/ico_category_main_ocean.png);
}
.category .case li.LAND {
background-image:url(../images/ico_category_main_soil.png);
}
.category .case li.DISASTER {
background-image:url(../images/ico_category_main_disaster.png);
}
.category .case li.ENVIRONMENT {
background-image:url(../images/ico_category_main_environment.png);
}
.category .case li p {
position:absolute;
bottom:5px;
width:100%;
text-align:center;
font-size:1em;
letter-spacing:-1px;
}

/* 카테고리 - 테마 */
.category {
margin:10px;
}
.category .theme_all {
padding:5px;
font-size:15px;
color:#000;
text-align:center;
cursor:pointer;
border:1px solid #e74c3c;
background:#fff;
}
.category .theme {
margin-top:5px;
white-space:nowrap;
}
.category .theme li {
position:relative;
display:inline-block;
width:32.5%;
height:75px;
margin-right:-1px;
text-align:center;
background-color:#fff;	
background-repeat:no-repeat;
background-position:center 7px;
background-size:50px auto;	
}
.category .theme li.on {
background-color:#ffe9e3;	
}
.category .theme li.nature {
background-image:url(../images/ico_theme_nature.png);
}
.category .theme li.disaster {
background-image:url(../images/ico_theme_disaster.png);
}
.category .theme li.culture {
background-image:url(../images/ico_theme_culture.png);
}
.category .theme li p {
position:absolute;
bottom:5px;
width:100%;
text-align:center;
font-size:1em;
letter-spacing:-1px;
}

/* 테마영상 */
.scene {
position:relative;
margin:10px;
}
.scene p.title {
height:20px;
margin:0;
padding:5px;
color:#FFF;
font-size:1.3em;
background:#434343;
z-index:500;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;	
}
.scene p.title span {
font-weight:bold;
}
/* 테마영상 내 이미지 가로사이즈 */
@media (min-width: 360px) {
.scene img {
width:100%;
}
}
/* 테마영상 - nav */
.themenav {
position:relative;
height:25px;
text-align:center;
margin:0 10px;
}
.themenav p {
position:relative;
margin:0 auto;
width:70%;
padding:5px 0;
border-radius:15px;
background-color:#fff;
}
.themenav p span {
font-weight:bold;
color:#e74c3c;
}
.themenav button {
display:inline-block;
width:30px;
height:30px;
text-indent:-999em;
border:none;	
background-repeat:no-repeat;
background-position:center 50%;
background-size:80%;
background-color:#e5e5e5;
}
.themenav button.goleft {
position:absolute;
left:0;
top:0;
background-image:url(../images/bullet_theme_goleft.png);
}
.themenav button.goright {
position:absolute;
right:0;
top:0;
background-image:url(../images/bullet_theme_goright.png);	
}




/* /////// CONTENTS 게시판 /////// */
/* 새소식 - 목록 */
.board_list {
margin:10px;
border-top:2px solid #999;	
}
.board_list li {
padding:7px 0;
border-bottom:1px solid #ccc;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;	
}
.board_list li span {
display:block;
margin-top:5px;
font-size:1.1em;
color:#999;
}
.board_list li.msip {
padding-left:50px;
background-image:url(../images/ico_msip.png);
background-position:left 10px;
background-repeat:no-repeat;
background-size:40px auto;

}
.board_list li.kari {
padding-left:50px;
background-image:url(../images/ico_kari.png);
background-position:left 10px;
background-repeat:no-repeat;
background-size:40px auto;

}


/* 활용사례 - 목록 */
.board_list_img {
margin:10px;

}
.board_list_img li {
clear:left;
float:left;
width:100%;
padding:5px;
margin-bottom:10px;
border-radius:3px;
background:#fff;
}
.board_list_img li p.img {
float:left;
width:100px;
height:auto;
}
.board_list_img li p.img img {
max-width:100%;
}
.board_list_img li p.noimg {
float:left;
width:100px;
height:100px;
background-color:#e5e5e5;
background-image:url(../images/logo_footer.png);
background-repeat:no-repeat;
background-position:center;
background-size:70%;
}
.board_list_img li p.listunit {
position:absolute;
right:10px;
overflow:hidden;
left:120px;

max-height:100px;
margin-left:3px;
display:inline-block;
}
.board_list_img li p.listunit .tit {
display:block;
width:100%;
margin-bottom:10px;
font-size:1.2em;
font-weight:bold;

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.board_list_img li p.listunit .text {
display: inline-block;
text-overflow:ellipsis;
font-size:0.9em;
line-height:1.5em;
white-space: normal;
word-wrap: break-word;
vertical-align: middle;
letter-spacing:-1px;
/*	
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;*/
}


/* 활용사례, 보도자료, 새소식 - 상세보기 */
.board_view {margin:10px;
}
.board_view .titgroup {
margin-bottom:10px;
padding:0;
border-top:2px solid #55606e;
border-bottom:1px solid #55606e;
}
.board_view .titgroup li {
margin:0;
padding:0px;
border-bottom:1px solid #55606e;
}
.board_view .titgroup li span {
float:left;
width:45px;
display:inline-block;
margin-right:5px;	
padding-right:5px;
font-weight:bold;
background:url(../images/board_title_bar.png) no-repeat right 50%;
}
.board_view .viewtext {
font-size:0.9em;
line-height:1.7em;
}
.board_view .viewtext p img {
margin:10px 0;
}
/* 글보기 내 이미지 가로사이즈 */
@media (min-width: 320px) {
.board_view .viewtext p img {
width:100%;
}
}
@media (min-width: 736px) {
.board_view .viewtext p img {
width:auto;
}
}

/* 출처 이전글 다음글 */
.board_view ul {
margin:10px 0;
padding:0px;
border-top:1px solid #bfbfbf;
border-bottom:1px solid #bfbfbf;		
}
.board_view ul li span {
float:left;
width:45px;
display:inline-block;
margin-right:5px;
padding-right:5px;
font-weight:bold;
background:url(../images/board_title_bar.png) no-repeat right 50%;
}
.board_view ul li p {
margin:5px 0;
font-size:0.9em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.board_view ul.index li:first-child {
border-bottom:1px solid #bfbfbf;	
}


/* /////// CONTENTS 통합검색 /////// */
.searchwrap {
margin:10px;
padding:15px;
border:2px solid #000;
background:#fff;
}
.searchwrap input {
width:96%;
padding:7px;
border:1px solid #959595;
}
.tab {
height:30px;
margin:15px 10px 10px 10px;
border-bottom:1px solid #000;
}
.tab li {
height:29px;
display:inline-block;
padding:0;
color:#585858;
border-top:1px solid #b5b5b5;
border-left:1px solid #b5b5b5;
border-right:1px solid #b5b5b5;		
background:#dcdcdc;
}
.tab li.on {
color:#000;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #fff;		
background:#fff;
}
.tab li p {
margin:5px 5px 0 5px;
}


/* /////// CONTENTS 맵 /////// */
#mapwrap {
width:100%;
height:100%;
}
.map {
width:100%;
height:100%;
z-index:100;
}

/* HEADER - 맵 */
.mapheader{
position:absolute;
width:100%;
height:50px;
background-color:#535353;
opacity:0.95;
z-index:100;
}
.mapheader h1 {
display:none;
}
.mapheader * {
vertical-align:middle;
}
.mapgnb {
float:left;
width:40px;
height:40px;
margin:5px;
border-radius:7px;
cursor:pointer;
text-indent:-999em;	
background-color:#000;
background-image:url(../images/bullet_trigger.png);
background-repeat:no-repeat;
background-position:center;
z-index:100;	
}
.mapgnb_sub {
position:absolute;
top:50px;
left:5px;
border-radius:10px;
background-color:#000;
z-index:800;	
}
.mapgnb_sub li {
margin:0 10px;
padding:10px 0;
border-bottom:1px solid #626262;
text-align:center;
cursor:pointer;
color:#fff;
font-size:1.2em;
}

.mapgnb_sub li:last-child {
border:none;
}
.mapgnb_sub li a {
color:white;
font-size:20px;
}
/* 맵 - 맵검색 */
.mapsearch {
float:left;
margin:4px;
padding:2px;
background:#f6f6f6;	
}
.mapsearch input {
margin:3px;
padding:6px;
border:none;
border:1px solid #cacaca;
background:#fff;
}
.mapsearch button {
width:30px;
height:30px;
margin:0;
text-indent:-999em;
border:1px solid #008cb8;
background-color:#0099c8;
background-image:url(../images/mapsearch_btn.png);
background-repeat:no-repeat;
background-position:center;
background-size:70%;
}

@media (max-width: 320px) {
.btn_header .btn {
width:40px;
height:40px;
border:none;
border-radius:4px;
text-indent:-9999em;
background-image:url(../images/btn_areasearch.png);
background-repeat:no-repeat;
background-position:center;
background-color:#00d1e5;	
}
}


/* 맵- 면적검색 */
.areawrap {
position:absolute;
left:0;
top:0px;
width:100%;
z-index:110;
}
.areasearch {
height:50px;
background-color:#d2d2d2;
}
.areasearch ul {
text-align:center;
}
.areasearch ul li {
display:inline-block;
width:50px;
height:50px;
margin:0 3px;
padding:0;
background-image:url(../images/mapbtn_off.png);
background-repeat:no-repeat;
background-position:center;
background-size:50px;
}
.areasearch ul li.on {
background-image:url(../images/mapbtn_on.png);	
}
.areasearch ul li span {
display:inline-block;
width:100%;
padding-top:15px;
text-align:center;
vertical-align:middle;
}

.btn_close {
position:absolute;
top:10px;
right:10px;
width:35px;
height:35px;	
text-indent:-9999em;
border:none;	
background-image:url(../images/btn_close.png);
background-repeat:no-repeat;
background-position:center;
background-size:70%;
background-color:#d2d2d2;	

}

/* 맵- 면적검색 - 결과 */
.searchresult {
width:100%;
background-color:#00d1e5;
opacity:0.95;
}
.searchresult ul {
padding:5px 0;
}
.searchresult ul li {
margin:0 10px;
list-style:inside;
font-weight:bold;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

}
.searchresult ul li span {
display:inline-block;
margin-right:10px;
font-weight:normal;
}
.searchresult .resultnav button {
display:inline-block;
width:30px;
height:30px;
text-indent:-999em;
border:none;
background-color:#00d1e5;	
background-repeat:no-repeat;
background-position:center 50%;
background-size:80%;
}
.searchresult .resultnav button.goleft {
position:absolute;
left:0;
top:0;
background-image:url(../images/bullet_goleft.png);
}
.searchresult .resultnav button.goright {
position:absolute;
right:0;
top:0;
background-image:url(../images/bullet_goright.png);	
}
.searchresult .resultnav {
position:relative;
text-align:center;
margin:7px 7px 0 7px;
}
.searchresult .resultnav p {
width:100%;	
border-radius:15px;
background-color:#fff;
}
.searchresult .resultnav p span {
font-weight:bold;
}
.searchresult .resultnav p button {
display:inline-block;
width:70px;
height:30px;
margin:0 0;
padding-bottom:3px;
font-size:0.9em;
color:#000;
text-indent:0;
background-image:url(../images/button_view.png);
background-repeat:no-repeat;
background-position:center 50%;
background-size:70px 25px;
background-color:#fff;
}
.searchresult .resultnav p button * {
vertical-align:middle;
}

.showhide {
width:100%;
height:10px;
text-align:center;
border-top:5px solid #00d1e5;
}
.showhide button {
display:inline-block;
width:30px;
height:15px;
text-indent:-999em;
border-radius:0 0 3px 3px;
border:none;	
background-image:url(../images/mapbtn_bar.png);
background-repeat:no-repeat;
background-position:center;
background-size:80%;
background-color:#00d1e5;	
}

/* 맵- 면적검색 - 상세보기 레이어 */
.layer {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
z-index:999;
overflow:scroll;
}
.sceneWrap {
/* min-height:300px; */
height:300px;
margin-bottom:10px;
border:2px solid #bfbfbf;
}
button.zoomin {
padding:5px 7px;
color:#000;
border:none;
font-size:1.1em;
font-family:"Courier New", Courier, monospace;
border-radius:20px;
background-color:#00d1e5;
}
.layer p.viewtitle {
padding:5px;
color:#fff;
font-size:1.2em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;		
background-color:#0068b7;
}
.layer table {
width:100%;
border-collapse:collapse;
}
.layer table th {
padding:5px;
border:1px solid #bfbfbf;
text-align:left;
color:#0068b7;
background-color:#dcdcdc;
}
.layer table td {
padding:5px;
border:1px solid #bfbfbf;
}
.layer button.close {
width:35px;
height:35px;
margin-right:5px;	
text-indent:-9999em;
border:none;	
background-image:url(../images/btn_close.png);
background-repeat:no-repeat;
background-position:center;
background-size:70%;
background-color:#fff;	
}

/* 경고메세지 */
.errorwrap {
height:100%;
background-color:#fbfbfb;	
}
.error {
position:absolute;
top:50%;
left:50%;
width:300px;
margin:-150px 0 0 -150px;
padding-top:120px;
text-align:center;
background-image:url(../images/error.png);
background-repeat:no-repeat;
background-position:top center;
}
.error p.title {
font-size:1.8em;
height:35px;
border-bottom:1px solid #e7e7e7;
}
.error .errorlist {
margin:20px 0;
}
.error .btnerror {
padding:5px 20px;
border:1px solid #c1c1c1;
}
.error .btnerror:hover {
padding:5px 20px;
border:1px solid #c1c1c1;
background:#eee;
}

/* 20160418 추가 */
.tablewrap {
padding:10px;
}
.tablewrap table {
width:100%;
margin:10px;
}
.tablewrap table th {
padding:5px;
font-weight:bold;
text-align:left;
border-top:2px solid #36495b;	
}
.tablewrap table td {
padding:12px 5px;
border-top:1px solid #36495b;
border-bottom:1px solid #36495b;	
font-size:0.9em;
}
.tablewrap table td.viewworld {
text-align:center;
font-weight:bold;
}

/* 20160816 추가 */
/* 메인 - HEADER */
.headerMap {
position:relative;
/*
height:100px;
*/
padding:0;
background-color:#434343;
}
.headerMap h1 {
width:300px;
height:50px;
margin:0 auto;
cursor:pointer;
text-indent:-999em;
background:url(../images/logo.png) no-repeat center;
background-size:150px auto; 	
}
.kariLogo {
position:absolute;
top:-30px;
right:-10px;
width:100px;
height:100px;
background: url(../images/logo_footer.png) no-repeat center;
background-size:auto 32px;
z-index:800;
}

/* 맵 / 검색 */
.searchPart {
position:relative;
margin:0;
padding:10px 5px;
}
.searchPart .search {
position:relative;
width:190px;
padding:4px;
border-radius:4px;
background-color:#f3f3f3;
}
.search * {
vertical-align:middle;
}
.search input {
width:150px;
padding:3px;
border:none;
font-size:1.0em;
color:#000;
background-color:#f3f3f3;
}

.search > button.msearch {
width:25px;
height:25px;
text-indent:-999em;
border:none;
background-color:transparent;
background-image:url(../images/mapsearch_btn.png);
background-repeat:no-repeat;
background-position:0 0px;
background-size:100%;
}

p.btns {
position:absolute;
top:10px;
right:3px;
}
p.btns button {
	min-height:35px;
	min-width:53px;
	padding:0.4em;
	font-size:1.0em;
	color:#9dc8e8;
	border:1px solid #242628;
	border-radius:2px;
	background-color:#393f47;
	letter-spacing:-1px;
}
p.btns button.on {
	color:#fff;
	border:1px solid #c35736;
	background-color:#ec6941;
}
/*
.searchPart > p.btns button.image {
width:75px;
height:35px;
border:none;
padding:0;
cursor:pointer;
text-indent:-999em;
background-color:transparent;
background-repeat:no-repeat;
background-image:url(../images/btn_aoi.png);
background-repeat:no-repeat;
background-size:auto 100px;
background-position:-309px -6px;
}
.searchPart > p.btns button.image.on {
background-position:-258px -44px;	
}
.searchPart > p.btns button.search {
width:75px;
height:35px;
border:none;
padding:0;
cursor:pointer;
text-indent:-999em;
background-color:transparent;
background-repeat:no-repeat;
background-image:url(../images/btn_aoi.png);
background-repeat:no-repeat;
background-size:auto 100px;
background-position:-398px -6px;
}
.searchPart > p.btns button.search.on {
background-position:-398px -55px;	
}
*/
.mapBtns {
clear:left;
position:relative;
width:100%;
height:40px;
overflow-x:auto;
margin:0;
padding:0;
background-color:#c9c9c9;
z-index:900;
}
.mapBtns .aoi {
	padding-left:40px;
	background-image:url(../images/aoi.png);
	background-repeat:no-repeat;
	background-position:left 50%;
	background-size:auto 15px;
}
.mapBtns .btns {
	position:absolute;
	top:0;
	right:0;
}

.mapBtns.disable .aoi > button {
opacity:0.3;
}

/* 임영욱 추가 8.22 */
.mapBtns.disable > button.btnList {
opacity:1;
}
.mapBtns.disable > button.option {
opacity:1;
}
.mapBtns p.aoi > button {
height:35px;
margin:3px 0;
text-indent:-999em;
border:none;
background-color:transparent;
background-repeat:no-repeat;
background-position:center;
background-image:url(../images/btn_aoi.png);
background-repeat:no-repeat;
background-size:auto 100px;
margin-left : 8px;
}


.mapBtns p.aoi button.point {
width:28px;
background-position:-7px -8px;
}
.mapBtns p.aoi button.point.on {
background-position:-7px -55px;;
}
.mapBtns p.aoi button.circle {
width:40px;
background-position:-52px -8px;
}
.mapBtns p.aoi button.circle.on {
background-position:-52px -55px;
}
.mapBtns p.aoi button.square {
width:40px;
background-position:-108px -8px;
}
.mapBtns p.aoi button.square.on {
background-position:-108px -55px;
}
.mapBtns p.aoi button.polygon {
width:42px;
background-position:-171px -8px;
}
.mapBtns p.aoi button.polygon.on {
background-position:-171px -55px;
}

/*
.mapBtns p.btns  button.option {
width:75px;
background-position:-222px -8px;
}
.mapBtns p.btns  button.option.on {
background-position:-222px -55px;
}
.mapBtns p.btns  button.btnList {
width:75px;
background-position:-490px -8px;

}
.mapBtns p.btns button.btnList.on {
background-position:-490px -55px;
}
*/
.mapBtns p.btns {
position:absolute;
top:2px;
right:3px;
}
.mapBtns p.btns > button {
	min-height:35px;
	min-width:53px;
	padding:0.4em;
	font-size:1.0em;
	letter-spacing:-1px;
	color:#9dc8e8;
	border:1px solid #242628;
	border-radius:2px;
	background-color:#393f47;
}
.mapBtns p.btns button.on {
	color:#fff;
	border:1px solid #c35736;
	background-color:#ec6941;
}

/* 맵 / 씬정보 */
.sceneinfo {
position:absolute;
left:0;
width:100%;
opacity:0.9;
background:#ddd;
}
.sceneinfo ul {
margin:10px;
}
.sceneinfo ul li {
padding-left:8px;
color:#000;
background:url(../images/bullet_result.png) no-repeat left 7px;
background-size:4px;
}
.sceneinfo ul li:first-child {
font-weight:bold;
padding-left:0;
background:none;
}
.sceneinfo > button {
float:right;
margin:-50px 5px 5px;
padding:10px;
color:#000;
border:none;
font-size:1.2em;
font-family:"Courier New", Courier, monospace;
border-radius:20px;
background-color:#fff;
}

/* 맵 / 목록 */
/* 임영욱 수정 8.26 top: 198px → 188px */
div.list {
z-index:500;
position:absolute;
top:143px;
bottom:0px;
left:0;
width:165px;
background-color:#9dc8e8;
opacity : 0.85;
overflow : auto;
}
#scroller{
position:absolute;
z-index:5;
width:165px;
transform: translateZ(0);
user-select: none;
/* text-size-adjust: none; */
top: 0;
bottom: 0;
}
/* .list > ul {
overflow-x:hidden;
overflow-y:auto;
margin:0;
padding:0;
}
임영욱 수정 8.22
.list > ul li {
float:left;
position:relative;
width:100%;
padding:4px 0 4px 2px;
border-bottom:1px solid #0068b7;
}
.list > ul li.selected {
background-color:#dbe8f2;
}
.list > ul li.city {
background-color:#fff799;
}
.list > ul li.nature {
background-color:#8fc31f;
}
.list > ul li.disaster {
background-color:#ec6941;
}
.list > ul li p {
display:inline-block;
}
.list > ul li .img {
float:left;
}
.list > ul li .img img {
max-width:70px;
}
.list > ul li p.listinfo {
float:left;
margin-left:10px;
font-size:0.85em;
}
.list > ul li p.listinfo span {
display:block;
} */
/*테스트*/
#scroller > ul {
/* overflow-x:hidden; */
/* overflow-y:auto; */
margin:0;
padding:0;
}
#scroller > ul li {
float:left;
position:relative;
width:100%;
padding:4px 0 4px 2px;
border-bottom:1px solid #0068b7;
}
#scroller > ul li.selected {
background-color:#dbe8f2;
}
#scroller > ul li.city {
background-color:#fff799;
}
#scroller > ul li.nature {
background-color:#8fc31f;
}
#scroller > ul li.disaster {
background-color:#ec6941;
}
#scroller > ul li p {
display:inline-block;
}
#scroller > ul li .img {
float:left;
}
#scroller > ul li .img img {
width:70px;
height:70px;
}
#scroller > ul li p.listinfo {
float:left;
margin-left:10px;
font-size:0.85em;
}
#scroller > ul li p.listinfo span {
display:block;
}
/* PAGER */
.pager	{
position:absolute;
border:0;
width:100%;
text-align:center; 
font-family:Arial, Helvetica, sans-serif;
background:#0068b7;
}
.pager * { 
vertical-align:middle;
}
.pager a {
display:inline-block;
margin:0;
padding:3px 7px;
color:#c6ccd2;
font-weight:bold;
}
.pager a:hover {
text-decoration:none;
}
.pager .tsp {
padding:2px 7px;
color:#383737;
}
/* 임영욱 추가 8.16*/
.pager span .selected {
padding:2px 7px;
color:#383737;
}
/* OPTION */
div.option {
position:absolute;
margin:0 auto;
top:143px;
width:100%;
border-radius:5px;
border:1px solid #3197d9;
background-color:#55b0ed;
z-index:999;
}
div.option ul {
margin:5px;
}
div.option ul li {
margin-bottom:3px;
padding-bottom:3px;
border-bottom:1px solid #7bcaff;
}
div.option ul li:last-child {
	border-bottom:none;
}
div.option label {
/* display:none; */
color:#fff;
width:35px;
}
/* 임영욱 수정 8.26 */
div.option ul li > select {
margin-top:0.2px;
border:none;
height:26px;
}
div.option ul li > input {
padding:1px 0;
border:none;
width:100px;
font-size:0.9em;
height:25px;
}
div.option ul li > button {
margin-top:0.5px;
margin-right:-2px;
padding:7px 12px;
border-radius:4px;
border:none;
background-color:#fff;
}
div.option ul li > button.on {
color:#fff;
background:#0068b7;
}

div.option > p {
margin:3px;
text-align:center;
}
div.option > p button {
padding:7px 20px;;
color:#fff;
font-size:1.1em;
border:1px solid #1b5e8c;
border-radius:5px;
background: linear-gradient(#2d8dcd, #1b5e8c);
}

/* 20160418 추가 */
.contents table.list {
           width:95%;
           margin:10px;
}
.contents table.list th {
           padding:5px;
           font-weight:bold;
           text-align:left;
           border-top:2px solid #36495b;     
}
.contents table.list td {
           padding:12px 5px;
           border-top:1px solid #36495b;
           border-bottom:1px solid #36495b;
           font-size:0.9em;
}
.contents table.list td.viewworld {
           text-align:center;
           font-weight:bold;
}