@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/* CSS Document*/
/*Define the body element's color*/
body{
	background:#c4c4c4;
	padding:1%;
	font-family: 'Nanum Gothic', Dotum, "돋움", Gulim, "굴림", Verdana, Arial, "Trebuchet MS";
	font-size:2.0em;
}
A:link, A:active, A:visited	{color: #000; text-decoration: none;}
#first .top{
	text-align:center;
	vertical-align:middle;
	background: #00b0d1; /* Old browsers */
	background: -moz-linear-gradient(top,  #00b0d1 0%, #04a2bf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b0d1), color-stop(100%,#04a2bf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #00b0d1 0%,#04a2bf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #00b0d1 0%,#04a2bf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #00b0d1 0%,#04a2bf 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #00b0d1 0%,#04a2bf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b0d1', endColorstr='#04a2bf',GradientType=0 ); /* IE6-9 */
	padding:3% 3% 3% 3%;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border:1px solid #009dba;
	color:#ffffff;
	font-size:1.1em;
	line-height:1.1em;
	font-weight:bold;
}
#first .top h1{
	width:100%;
	display:block;
	margin:0;
	padding:0;
	font-size:1.0em;
}
#first .bottom{
	
	vertical-align:middle;
	background: #fefefe; /* Old browsers */
	background: -moz-linear-gradient(top,  #fefefe 0%, #eaeaea 99%, #ffffff 100%, #eaeaea 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(99%,#eaeaea), color-stop(100%,#ffffff), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fefefe 0%,#eaeaea 99%,#ffffff 100%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fefefe 0%,#eaeaea 99%,#ffffff 100%,#eaeaea 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fefefe 0%,#eaeaea 99%,#ffffff 100%,#eaeaea 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fefefe 0%,#eaeaea 99%,#ffffff 100%,#eaeaea 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
	padding:3%;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	border:1px solid #adadad;
	border-top:none;
	color:#404040;
	font-weight:bold;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
	margin-bottom:2%;
	overflow:hidden;
	font-size:0.7em;
	line-height:0.1em;
}
#first .top img{
	margin:auto;
	vertical-align:middle;
}
#second{
	background: #ffffff;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border:1px solid #adadad;
	border-bottom:none;
}
#second .detail {
	display:table;
	border-collapse: separate;
	border-spacing: 20px;
	background-image:url(./img/hr.png);
	background-repeat: no-repeat;
	background-size:90%;
	background-position:bottom center;
	padding-bottom:8%;
}
#second .detail_link{
	display:table-cell;
	text-align:center;
	padding:2%;
	border-radius:10px;
	border:1px solid #dadada;
	background:#f9f9f9;
	box-shadow: -1px -1px 0 rgba(64, 64, 64, 0.1);
	text-decoration:none;
	color:#575757;
}
#second .detail_link img {
	margin-bottom:10%;
	border:1px solid #858585;
}

#second .paging {
	text-align:center;	
	padding-bottom:4%;
}
#second .paging div{
	border:1px solid #d9d9d9;
	font-size:40px;
	line-height:70px;
	width:70px;
	margin:5px;
	display:inline-block;
}
#second .paging .back{
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
}
#second .paging .next{
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
}
#second .paging .selected{
	background:#404040;
	bolder:#404040 1px solid;
	color:#ffffff;
}
#third {
	background:#00b0d1;
	background-image:url(./img/bottom.png);
	background-repeat: no-repeat;
	background-size:100%;
	padding:4% 1% 2.5% 4%;
}
#third  a{
	display:inline-block;
	width:23%;
}
#footer {
	padding:3%;
	font-size:0.5em;
	color:#2c2c2c;
}
#footer h2{
	font-size:1.7em;
	font-weight:bold;
}
#footer .copyright{
	font-size:0.6em;
	color:#666666;
}
.f_left{
	float:left;
}
.f_right{
	float:right;
}


.loader{
	background-image:url('../../js/JQuery-mobile/images/loader.gif'); 
	background-repeat:no-repeat; 
	background-position:50% 50%;
	background-color:#000000;
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	width:100px;
	height:100px;
	margin-left:-50px;
	margin-top:-50px;
	text-align:center;
	vertical-align: bottom;
	color:#FFFFFF;
	z-index:100;
	line-height: 13em;
	font-size:10pt;
	font-weight:bold;
}

.log {
	display:none;
	position:absolute;
	background-color:#FFF;
	border:1px solid #e8e8e8;
	left:0;
	top:50%;
	width:100%;
	height:150px;
	margin-top:-75px;
	text-align:center;
	z-index:9999;
	overflow:scroll;
		
}
#map-canvas
{
	
	width:96%;
	height:828px;
	z-index:9999;
}
#folder_out  {
	display:none;
	position:absolute;
	left:100px;
	top:100px;
	width:243px;
	height:264px;
	background-color:#000;
	opacity:0.6;
	filter:alpha(opacity=60, finishopacity=60,style=1);
	z-index:9999;
}
#folder_layer {
	display:none;
	position:absolute;
	left:100px;
	top:100px;
	width:729px;
	height:792px;
	z-index:9999;	
}

#folder_title {
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	width:729px;
	height:111px;
	background-color:#989898;
}
#folder_title #back {
	position:relative;
	left:18px;
	top:21px;
	width:126px;
	height:60px;
	float:left;
	margin-left:0px;
	background:url('img/back.png');
	background-repeat:no-repeat; 
	cursor:pointer;
}
#folder_title #fnavi {
	position:relative;
	left:0px;
	top:21px;
	width:501px;
	height:60px;
	float:left;
	text-align:center;
	color:#fff;
	font-size:39pt;
}

#folder_title #close {
	position:relative;
	left:0px;
	top:21px;
	width:60px;
	height:60px;
	float:right;
	margin-right:24px;
	background:url('img/x2.png');
	background-repeat:no-repeat;
	cursor:pointer;
}

#folder_list {
	display:block;
	position:absolute;
	left:0px;
	top:111px;
	width:723px;
	height:675px;
	overflow:hidden;
	background-color:#fff;
	border:1px solid #989898;
	overflow:hidden;
	-webkit-overflow-scrolling: touch;
}
#folder_list_scroll {
	position:relative;
	left:0px;
	top:0px;
	width:723px;
	height:300px;
	z-index:3000;
	-webkit-overflow-scrolling: touch;
}
#folder_list_scroll ul {
	list-style:none;

	width:723px;
	height:114px;

	background:url('img/allow.png');
	background-repeat:no-repeat;
	background-position:636px 39px;
	
	padding:0px;
	margin:0px;
	cursor:pointer;
	border-bottom:1px solid #d9d9d9;

}
#folder_list_scroll ul li {
	list-style:none;
	width:555px;
	height:114px;
	margin-left:78px;
	line-height:3em;
	padding:0px;
	border:0px solid red;
	overflow:hidden;
}

#app_layer {
	position:absolute;
	left:0px;
	top:0px;
	width:750px;
	height:750px;
	overflow:hidden;
	background-color:#fff;
	border:1px solid #989898;
	z-index:9999;
}

#app_layer .title {
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	width:750px;
	height:111px;
	background-color:#989898;
}
#app_layer #app_close {
	position:relative;
	left:0px;
	top:30px;
	width:60px;
	height:60px;
	float:right;
	margin-right:30px;
	background:url('img/x2.png');
	background-repeat:no-repeat;
	cursor:pointer;
}
#app_layer .button {
	position:relative;
	display: inline-block; 
	outline: none; 
	cursor: pointer; 
	text-align: center; 
	text-decoration: none; 
	font: 45px Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em;  border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);} 
#app_layer .orange {color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top,  #faa51a,  #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}

#sPanel {
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;

	border:1px solid black;
	position:absolute;
	top:100px;
	left:0;
	bottom:0;
	width:100%;
	height:120px;
	background:url('img/back_black.png');
	z-index:9999;
	text-align:center;
	display:none;
}

#sPanel  .slink{
	width:120px;
	display:table-cell;
	text-align:center;
	padding:3% 3% 3% 3%;
	text-decoration:none;
	z-index:9999;
	opacity:1.0;
}

#sPanel .back {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:black;
	opacity:0.6;
	z-index:1;
	filter:alpha(opacity=60, finishopacity=60,style=1);
}