@font-face {
    font-family: 'pagefont';
	src:url(Letter_Gothic.ttf) format('truetype');
	font-weight:normal;
	font-style:normal;
}

body, html{
	margin:0;
	padding:0;
	font-family:"pagefont", sans-serif;
	width:100%;
	background-color:#efefef;
	overflow-x:hidden;
}

.logo, .logo_viewer{
	padding-top:32px;
	width:100%;
	text-align:center;
	position:fixed;
	top:0;
	cursor:pointer;
	z-index:10;
}
.logo_img{
	width:180px;
}


.container, .container_viewer{
	width:100%;
	margin:140px auto 0;
}
.container_viewer{
	text-align:center;
}
.navigation{
	margin:0 auto 20px;
	width:100%;
	max-width:900px;
	text-align:center;
}
.navi_btn{
	display:inline-block;
	text-transform:uppercase;
}
.navi_btn a{
	text-decoration:none;
	font-size:18px;
	color:#3b3b3b;
}
.navi_btn a:hover, .navi_btn .selected{
	color:#999;
}
.navi_btn .selected{
	text-decoration:underline;
}


.gallery_holder{
	opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
	width:100%;
}
.gallery_folder{
	width:19%;
	margin:0 0.5% 10px;
}
.gallery_folder:hover{
	text-decoration:underline;
	cursor:pointer;	
}
.folder_name{
	width:100%;
	text-align:center;
	padding:10px 0;
	font-size:18px;
}


.viewer_top_txt{
	font-size:30px;
	color:#666;
}
#viewer_holder{
	max-width:900px;
	width:100%;
	margin:0 auto;	
}
.viewer_img{
	width:100%;
	margin-top:10px;
}
.web_btn{
	width:100%;
	padding:20px;
	width:auto;
	margin:0 auto;
	cursor:pointer;
	color:#333333;
	font-size:20px;
	text-align:center;
}
.totop_btn{
	position:relative;
	z-index:5;
	background-color:#efefef;
	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
.totop_btn span{
    color: #000000;
}

.animation_image { margin:10px auto 0; text-align:center; padding:10px; background-color:#FFF; width:24px;}

.page_content{
	width:100%;
	max-width:1000px;
	margin:0 auto;
}
.inner_content{
	width:90%;
	max-width:780px;
	margin:0 auto;
	text-align:center;
	line-height:25px;
}
.map{
	width:100%;
	height:350px;	
}

.footer{
	position:fixed;
	bottom:0;
	width:100%;
	z-index:2;
}
.footer_content{
	width:99%;
	height:43px;
	margin:0 auto;
	position:relative;
}
.footer_icon{
	position:absolute;
	right:0; top:0;
	cursor:pointer;
}
.social_icon{
	border:none;
	outline:none;
}
.copyright{
	position:absolute;
	top:16px; left:0;
	font-size:12px;
	background-color:#efefef;
	padding:3px;
}
.copyright a{
	text-decoration:none;
	color:#000;
}
.copyright a:hover{
	text-decoration:underline;
	color:#999;
}

@media (min-width:1641px) and (max-width:5000px){
	.gallery_folder{
		width:19%;
	}
}

@media (min-width:1301px) and (max-width:1640px){
	.gallery_folder{
		width:24%;
	}
}

@media (min-width:961px) and (max-width:1300px){
	.gallery_folder{
		width:32.333333333%;
	}
}

@media (min-width:641px) and (max-width:960px){
	.gallery_folder{
		width:49%;
	}
}

@media (max-width:640px){
	.logo, .logo_viewer{ padding-top:15px;}
	.logo_img{
		width:130px;
	}
	.container, .container_viewer{
		margin:85px auto 0;
	}
	
	.gallery_folder{
		width:99%;
	}
	.viewer_top_txt{
		font-size:20px;
	}
	
	.navi_btn a, .folder_name{font-size:16px;}
	.map{
		height:80vw;	
	}
	.copyright{
		top:0px; left:0;
		font-size:10px;
		background-color:#efefef;
		padding:3px;
		width:60vw;
	}
}