*{
	margin: 0 auto;
	text-align: center;
}
body{
	font-family: Arial,sans-serif;
	font-size: 15px;
	/* background-color: #F2F2F2; */
}

/* index.htm */
#wrapper{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}
#wrapper #logo{
	padding-top: 10%;
}
#wrapper #form{
	margin-top: 18px;
	padding-bottom: 5%;
}
#wrapper #form .info{
	margin-top: 18px;
	padding: 8px;
	padding-bottom: 18px;
	text-align: left;
	width: 100%;
	max-width: 584px;
	border-left: 5px solid #FFFFFF;
}

/* /search? Page , /9/5/95***.htm Font Page */
#page{
	/*
	margin-left: 10%;
	margin-right: 10%;
	*/
	padding-bottom: 58px;
}
#page *{
	text-align: left;
}
#page #logo{
	display: flex;
	min-width: 700px;
	border-bottom: 1px solid #EBEBEB;
}
#page #form{
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 28px;
	width: 100%;
}
#page #content{
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 18px;
	padding-bottom: 18px;
	line-height: 28px;
	color: #70757A;
	border-bottom: 1px solid #EBEBEB;
}
#page #content .info{
	padding: 8px;
	padding-bottom: 18px;
	border-left: 5px solid #FFFFFF;
}
#page #content .item{
	margin-top: 18px;
	padding: 8px;
	/*
	cursor: hand;
	cursor: pointer;
	*/
	border-left: 5px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}



/* Font Info */
#page #content .fontinfo table{
	margin-left: 0px;
}

#page #content .fontinfo table td{
	padding: 5px;
	border: 1px solid #F2F2F2;
}
#page #content .fontinfo table td.key{
	padding-left: 0px;
	border-left: 0px;
	font-weight: bold;
}
#page #content .fontinfo table td.value{
	border-right: 0px;
}
#page #content .fontinfo table td.select a{
	color: #4285F4;
	text-decoration: none;
}
#page #content .fontinfo table td.select a:hover{
	text-decoration: underline;
}
#page #content .fontinfo table td.image{
	border-left: 0px;
	border-right: 0px;
	text-align: center;
}

#page #content .fontinfo table .name{
}

/* Font Extend Info */
#page #content .fontinfo table td.exkey{
	padding: 5px;
	border: 0px;
	border-top: 1px solid #F2F2F2;
	
	font-weight: bold;
	background-color: rgba( 241 , 5 , 5 , 0.1 );
	/* background-color: rgba( 242 , 85 , 0 , .1 ); */
}
#page #content .fontinfo table td.exval{
	border: 0px;
	border-bottom: 1px solid #F2F2F2;
}





#page #content span.fontName{
	color: #F2A51A;
}

#page #content span.fontName a{
	color: #4285F4;
	text-decoration: none;
}
#page #content span.fontName a:hover{
	text-decoration: underline;
}


#page #content span.fontType{
	color: #F2A51A;
}
#page #content span.fontSize{
	color: #F25500;
}
#page #content span.fontFiles{
	color: #D81E06;
}
#page #content img{
	margin-top: 18px;
}




/*
B : 4285F4
B : 1A0DAB
Y : F2A51A
R1: F25500
R2: D81E06
*/
#page #content .item:hover{
	/*
	background-image: url("/misc/cornor.png");
	background-position: top left;
	background-repeat: no-repeat;
	*/
	border-left: 5px solid #EB5E5C;
	border-bottom: 1px solid #EB5E5C;
	/* border-left: 5px solid #F2A51A; */
}
#page #content .item .title{
	font-size: 15px;
	line-height: 38px;
}
#page #paginate{
	padding-left: 5%;
	width: 500px;
	margin-left: 0px;
	padding-top: 18px;
	color: #D81E06;
}
#page #paginate table{
}
#page #paginate td{
	text-align: center;
}


#paginate .f{
	background: url("/misc/f.png") no-repeat;
}
#paginate .o{
	background: url("/misc/o.png") no-repeat;
}
#paginate .n{
	background: url("/misc/n.png") no-repeat;
}
#paginate .t{
	background: url("/misc/t.png") no-repeat;
}
#paginate .prev{
	background: url("/misc/prev.png") no-repeat;
}
#paginate .next{
	background: url("/misc/next.png") no-repeat;
}
#paginate .active{
	background: url("/misc/active.png") no-repeat;
}
#paginate .f,#paginate .o,#paginate .n,#paginate .t,#paginate .prev,#paginate .next,#paginate .active{
	display: block;
	margin-bottom: 5px;
	background-position: bottom center;
	width: 20px;
	height: 40px;
}
#paginate a{
	color: #4285F4;
	text-decoration: none;
}
#paginate a:hover{
	text-decoration: underline;
}
#paginate a.current{
	color: #D81E06;
}


#page input.search{
	width: 85%;
}


img#previewImage{
	max-width: 800px;
}


/* Search Input */
input.search{
	color: #0C0D0F;
	line-height: 20px;
	border: 1px solid transparent;
	border-radius: 18px;
	box-sizing: border-box;
	height: 40px;
	width: 100%;
	max-width: 584px;
	border-color: rgba(0,0,0,.12);
	padding: 0 15px 0 16px;
	vertical-align: middle;
	display: inline;
	text-align: left;
}
input.search:focus{
	background-color: #FFFFFF;
	border-color: rgba(0,0,0,.30);
	outline: none;
}
input.button{
	position: relative;
	margin-left: 8px;
	top: initial;
	right: initial;
	border: 1px solid transparent;
	border-radius: 4px;
	box-sizing: border-box;
	height: 40px;
	vertical-align: bottom;
}


input.preview{
	color: #0C0D0F;
	line-height: 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	box-sizing: border-box;
	height: 40px;
	width: 85%;
	max-width: 584px;
	border-color: rgba(0,0,0,.12);
	padding: 0 15px 0 16px;
	vertical-align: middle;
	display: inline;
	text-align: left;
}

input#previewButton{
	height: 40px;
	text-align: center;
	padding: 8px;
}

#about a{
	text-decoration: none;
	color: #E51815;
}
#about a:hover{
	text-decoration: underline;
}

#footer{
    padding-top: 18px;
    padding-left: 5%;
    text-align: left;
    width: 95%;
    color: #70757a;
}


@media (max-width:767px) {
	#page input.search,input.search{
		width: 300px;
		padding-left: 8px;
	}

	#page *{
		padding-left: 0px;
	}
	#page #logo{
		min-width: 350px;
	}

	#page #logo img{
		width: 150px;
	}
	#page #form {
		padding-top: 8px;
	}
	#page #content .item img,#page #content .fontinfo img{
		width: 330px;
	}
	#page input.search{
		width: 150px;
	}
	#page input.preview{
		width: 58%;
	}

	#page #paginate{
		width: 350px;
	}

	#about{
		margin-top: 5%;
	}






	#wrapper.error #logo{
		padding-top: 30%;
	}
	#wrapper.error #logo img{
		width: 350px;
		border-bottom: 1px solid rgba( 228 , 22 , 18 , .58 );
	}

}