@font-face{
 font-family:"pyunji";
 src:url('pyunji.eot') format('eot');
 src:url('pyunji.TTF.woff') format('woff');
}
@font-face{
 font-family:"bradley";
 src:url('bradley.eot') format('eot');
 src:url('bradley.TTF.woff') format('woff');
}
@font-face{
 font-family:"CommercialScript BT";
 src:url('pilgi.eot') format('eot');
 src:url('pilgi.woff') format('woff');
}
@font-face{
 font-family:"monotype";
 src:url('monotype.eot') format('eot');
 src:url('monotype.TTF.woff') format('woff');
}

@font-face{
 font-family:"HYMyeongJo-Extra";
 src:url('myeongjo.eot') format('eot');
 src:url('myeongjo.woff') format('woff');
}
@font-face{
 font-family:"inkburrow";
 src:url('inkburrow.eot') format('eot');
 src:url('inkburrow.woff') format('woff');
}
@font-face{
 font-family:"Malgun Gothic";
 src:url('MalgunGothic.eot') format('eot');
 src:url('MalgunGothic.woff') format('woff');
}
@font-face{
 font-family:"HYhaeseo";
 src:url('haeseo.eot') format('eot');
 src:url('haeseo.woff') format('woff');
}
@font-face{
 font-family:"mistral";
 src:url('mistral.eot') format('eot');
 src:url('mistral.TTF.woff') format('woff');
}
@font-face{
 font-family:"Cre CoolJazz";
 src:url('CreCooljazzM.eot') format('eot');
 src:url('CreCooljazzM.woff') format('woff');
}
@font-face{
 font-family:"HYbdal";
 src:url('HYbdal.eot') format('eot');
 src:url('HYbdal.TTF.woff') format('woff');
}
@font-face{
 font-family:"sd02";
 src:url('sd02.eot') format('eot');
 src:url('sd02.woff') format('woff');
}








@font-face{
 font-family:"rageltaly";
 src:url('rageltaly.eot') format('eot');
  src:url('rageltaly.TTF.woff') format('woff');
}
@font-face{
 font-family:"yangjaesnscho";
  src:url('yangjaenancho.eot') format('eot');
  src:url('yangjaenancho.woff') format('woff');
  src:url('yangjaenancho.TTF') format('ttf');
}
@font-face{
 font-family:"nanumson";
  src:url('nanumson.eot') format('eot');
    src:url('nanumson.woff') format('woff');
}
@font-face{
 font-family:"batang";
 src:url('batang.ttc') format('ttc');
  src:url('batang.ttc.eot') format('eot');
}
@font-face{
 font-family:"yet";
  src:url('yet.eot') format('eot');
   src:url('yet.woff') format('woff');
   src:url('yet.ttf') format('ttf');
}
@font-face{
font-family:"Snell Roundhand";
src:url('SnellRoundhandScript.eot') format('eot');
src:url('SnellRoundhandScript.woff') format('woff');
}
@font-face{
font-family:"Nanum SonPyeonJiCe";
src:url('NanumSonPyeonJiCe.eot') format('eot');
src:url('NanumSonPyeonJiCe.woff') format('woff');
src:url('NanumSonPyeonJiCe.woff2') format('woff2')
}

.contain{
	width: 100%;
	height: auto;
	margin:0 auto;
	text-align: center;
}

.search { margin:50px auto; }

#input{
	width:30%;
	height:48px;
	background-color:#eee;
	color:#999;
	border:1px solid #fff;
	font-size:18px;
	font-weight:300;
	word-spacing:normal;
	text-transform:none;
	text-indent:0px;
	text-shadow:none;
	display:inline-block;
	text-align:start;
	text-indent:18px;
	border:1px solid #000;
	box-sizing:border-box;
	line-height:normal;
	font-family:inherit;
	margin:0;

}

.button{
	background-color:#000;
	color:#fff;
	border:1px solid #000;
	box-sizing:border-box;
	padding:12px 20px;
	font-weight:600;
	font-size:18px;
}

button {
	transition-property: background-color;
	transition-duration: 1s;
}

button:hover {
	background-color: #fff;
	color:#000;
	border:1px solid #000;
	box-sizing:border-box;
	cursor:pointer;
}

.explain { margin:0 auto; text-align:center; width:95%; font-size:18px; font-weight:500; paading:30px; border:1px solid #999; }
.explain img { margin:20px 0 15px; }
.explain p a, .explain p a:link, .explain p a:visited { text-decoration:none; color:#ff0000; }
.explain p a:hover { color:#ccc; }

.img{
	width:100%;
	height:auto;
}

.center { width:100%; text-align:center; margin:0 auto;}
.font-view{
	float:left;
	display:inline;
	width:calc(100% / 5);
	margin-left:5px;
	margin-right:5px;
	padding:30px 0 50px;
	border-bottom:2px solid #ddd ;
	margin-right: auto;
	margin-left: auto;
}

.blank01 { display:none;}

#output1, #output2, #output3, #output4, #output5, #output6, #output7, #output8, #output9, #output10,
#output11 , #output12, #output13, #output14, #output15, #output16, #output17, #output18, #output19, 
#output20, #output21, #output22, #output23, #output24, .output{
	background-color:#f0f0f0; 
	height:50px;
	font-size:30px;
	overflow:auto;
    overflow-x:auto;
	width:300px;
	margin:0 auto;
	line-height:40px;	
	width:90%;
}

#output1{ font-family: 'pyunji'; }
#output2{ font-family: 'bradley'; }
#output3{ font-family: 'CommercialScript BT'; }
#output4{	font-family: 'monotype'; }
#output5{ font-family: 'HYMyeongJo-Extra'; }
#output6{ font-family: 'inkburrow'; }
#output7{	font-family: 'MalgunGothic'; }
#output8{	font-family: 'HYhaeseo'; }
#output9{	font-family: 'mistral'; }
#output10{ font-family: 'Cre CoolJazz'; }

#output11{ font-family: 'HYbdal'; }
#output12{ font-family: 'sd02'; }
#output13{ font-family: 'monotype'; }
#output14{ font-family: 'inkburrow'; }
#output15{ font-family: 'rageltaly'; }
#output16{ font-family: 'Cre CoolJazz'; }
#output17{ font-family: 'bradley'; }
#output18{ font-family: 'nanumson'; }
#output19{ font-family: 'Nanum SonPyeonJiCe'; }
#output20{ font-family: 'HYhaeseo'; }
#output21{ font-family: 'batang'; }
#output22{ font-family: 'batang'; }
#output23{ font-family: 'yet'; }

@media screen and (max-width:1200px){
	.font-view{ width:calc(100% / 4);}
	.blank { display:none; }

}

@media screen and (max-width:1024px){
	.font-view{ width:calc(100% / 3);}
	#output23 { display:block; background-color:#fff; }
}

@media screen and (max-width:980px){
	.search { margin-top:80px !important; }
	.font-view{ width:calc(100% / 2);}
	#output21 { display:none; background-color:#fff; }
	#input{ width:95%; height:150px; font-size:50px;  margin-bottom:20px; text-align:center;}
	.button{width:95%; margin:-2px 0 0;	padding:20px 20px; font-size:50px;}
	.f_s { font-size:50px !important; }
	.f_s_s { font-size:30px !important; }
	#output1, #output2, #output3, #output4, #output5, #output6, #output7, #output8, #output9, #output10,
	#output11 , #output12, #output13, #output14, #output15, #output16, #output17, #output18, #output19, 
	#output20, #output21, #output22, #output23, #output24, .output{height:100px;	font-size:50px; padding-top:15px; }
	.explain { font-size:30px; font-weight:500; paading:30px; border:1px solid #999; }
	.explain img {width:50px; margin:20px 0 15px; }

}