@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


*	{
	margin:0 auto;
	padding:0;
}

a {
	text-decoration:none;
	color:#222222;
}

a:hover {
	font-weight:bold;
}

body	{
	font-size:8pt;
	font-family:'Nanum Gothic';
	line-height:2.0;
	word-wrap:break-word;
	background-repeat: repeat;
	background-image: url('./images/background.png');
	background-attachment: fixed;
	background-position: top center;
	scrollbar-3dlight-color: #222222 !important;
  	scrollbar-arrow-color: #ffffff !important;
  	scrollbar-track-color: #ffffff !important;
  	scrollbar-darkshadow-color: #222222 !important;
  	scrollbar-face-color: #222222 !important;
  	scrollbar-highlight-color: #222222 !important;
  	scrollbar-shadow-color: #222222 !important;
}

::-webkit-scrollbar {
    height: 5px;
    width: 5px;
    background: #ffffff !important;
}

::-webkit-scrollbar-thumb {
    background: #222222 !important;
}

img {
	border:0;
}

ol, ul, li	{
	list-style:none;
}

#menu_m {
  position:absolute;
  width:190px;
  height:100%;
  display:block;
  left:-190px;
  z-index: 1000;
  background-color: #ffffff;
  top: 0;
}

#menu_m img 	{
	width: 190px;
}

#button {
  position: absolute;
  left: 5%;
  top: 10px;
  z-index: 1000;
}

#button a {
  font-size:20px;
  color:#222222;
  width:20px;
}

.head_m, #button, #background_m  {
  display:none;
}  

#wrapper	{
	width:650px;
	padding-top: 88px;
	padding-bottom: 88px;
	margin:0 auto;
	position: relative;
}

#header	{
	text-align: center;
	width: 100%;
	position: relative;
}

.menu1	{
	position: absolute;
	top: 69px;
	left: 14px;
	height: 20px;
	width: 102px;
	background: url('./images/menu1.png') top;
}

.menu2	{
	position: absolute;
	top: 89px;
	left: 14px;
	height: 20px;
	width: 102px;
	background: url('./images/menu2.png') top;
}

.menu3	{
	position: absolute;
	top: 109px;
	left: 14px;
	height: 20px;
	width: 102px;
	background: url('./images/menu3.png') top;
}

.menu4	{
	position: absolute;
	top: 129px;
	left: 14px;
	height: 20px;
	width: 102px;
	background: url('./images/menu4.png') top;
}

.menu5	{
	position: absolute;
	top: 149px;
	left: 14px;
	height: 20px;
	width: 102px;
	background: url('./images/menu5.png') top;
}

.menu1:hover, .menu2:hover, .menu3:hover, .menu4:hover, .menu5:hover	{
	cursor: pointer;
	background-position: bottom;
}

#content	{
	padding: 50px;
	background-color: #ffffff;
	border-right: solid 1px #222222;
	border-left: solid 1px #222222;
}

.searchList li	{
	height:40px;
	margin-top:20px;
}

.searchlist_date	{
	float:right;
	font-size:7.5pt;
}

.small	{
	font-size:8pt;
}

.smallcolor	{
	font-size:8pt;
}

#tistorytoolbarid {display: none;}

.entryNotice, .entryProtected	{
	text-align:center;
}

.entryProtected > .small	{
	margin-bottom:20px;
}

.entryProtected .protect_input	{
	border:0;
	border-bottom:1px solid #cccccc;
	width:100px;
}

.entryProtected .protect_submit	{
	border:0;
	background-color:#222222;
	color:#ffffff;
	font-size:7.5pt;
	padding:3px;
}

.article_info	{
	text-align:center;
	margin-bottom:30px;
}

 .fixed_img_col ul{overflow:hidden;position:relative;margin:0;padding:0;margin-left:-55px;}
 .fixed_img_col li{overflow:hidden;float:left;width:150px; height:180px; margin-left:50px; margin-bottom:20px; font-weight:bold;}
 .fixed_img_col .thumb{display:block;overflow:hidden;width:200px;height:200px;text-align:center;white-space:nowrap; margin-bottom:3px;}
 .fixed_img_col .thumb img{display:block;width:150px;height:150px;border:0;}
.fixed_img_col li a .thumb img:hover {
	opacity:0.6; filter:alpha(opacity=60);
-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;}

	
.comment ul	{ 
	padding:8px; margin:10px 0 0 30px;	
	}
.comment .whole	{
	margin-bottom:20px;
}
.comment input		{width: 150px; border:0; border-bottom:1px solid #ececec; margin-bottom:10px;}
.comment textarea 	{padding:2px .5em;width:98%;height:100px;border:1px solid #ddd; overflow:hidden;}

.guest ul	{ 
	padding:8px; margin:10px 0 0 30px;	
	}
.guest input		{width: 150px; border:0; border-bottom:1px solid #ececec; margin-bottom:10px;}
.guest textarea 	{width:98%;height:100px;border:1px solid #ddd; overflow:hidden;}
.homepage	{width:300px !important;}
.submit {width:50px !important; height:20px; margin-top:10px; margin-bottom:30px; color:#ffffff; background:#222222; cursor:pointer; font-size:7.5pt;}
.date {color:#eeeeee;}

input[id="secret"] {display:none;}
input[id="secret"]:checked + label {color:#222222;}
input[id="secret"] + label {color:#e7e7e7;}
input[id="secret"]:checked + label:before {content:"●";}
input[id="secret"] + label:before {content:"○";}

.paging	{
	margin:50px auto 0 auto;
	text-align:center;
	font-size:7.5pt;
	 }

.num	{
	margin-left:4px;
	margin-right:4px;
	}

.paging .selected	{
	font-weight:bold;
}

@media only screen and (max-width : 450px) { 
	body	{
		background-image: none;
	}

	img {
		max-width: 100%;
	}

	#wrapper	{
		width:100%;
		padding-top: 10px;
		padding-bottom: 10px;
		z-index: 850;
	}

	#header, #footer, .menu1, .menu2, .menu3, .menu4, .menu5	{
		display: none;
	}

	.head_m, #button, #background_m	{
		display: block;
	}

	.head_m	{
		width: 249px;
		position: absolute;
		right: 5%;
		top: 20px;
	}

	#content	{
		padding: 5%;
		overflow-x: hidden;
		border-bottom: 1px solid #222222;
		border-top: 10px solid #222222;
		position: relative;
		padding-top: 130px;
	}

	.fixed_img_col ul{margin:0 auto;}
	.fixed_img_col li{overflow:visible; clear:both; width:100%; margin:0 auto; margin-bottom:50px; font-weight:bold;}
	.fixed_img_col .thumb{display:block;overflow:visible;width:100%;height:auto;text-align:center;white-space:nowrap; margin-bottom:3px;}
	.fixed_img_col .thumb img{display:block;width:70%;max-width:150px;height:auto;border:0;margin:0 auto;}

	#footer	{
		text-align: center;
	}

  	#opacity  {
    	display: block;
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 900;
    	background-color: rgba(0,0,0,0.5);
    	left: -1000px;
  	}

  	#background_m {
    	display: block;
    	position: fixed;
    	width: 100%;
    	height: 100%;
    	z-index: 1;
    	top: 0;
    	left: 0;
  	}

  	#background_m img   {
    	height: auto;
    	width: 100%;
  	}
}