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

body,html {
 background:#ececec;
 height: 100%;
 margin: 0;
}

#pagetop{
	position: fixed;
	right: -60px;
	bottom: 10px;
	z-index: 1000;
}

@keyframes feed{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.contents{
	animation-duration: 1s;
    animation-name: feed;
    animation-iteration-count: 1;
}

input[type=radio] {
display: none; 
}

.cg_label {
position: relative;	
padding: 0 0 0 42px;	
}
.cg_label:after, .cg_label:before {
position: absolute;	
content: "";	
display: block;	
top: 50%;	
}
.cg_label:after {
left: 15px;	 
margin-top: -10px;	
width: 16px;	
height: 16px;	
border: 2px solid #ccc;	
border-radius: 50%;	
}
.cg_label:before {
left: 20px;	 
margin-top: -5px;	
width: 10px;	
height: 10px;	
background: #000;
border-radius: 50%;	
opacity: 0;	
}
input[type=radio]:checked + .cg_label:before {
opacity: 1;
}
.cg_label:hover:after {
border-color: #000;	
}

@media screen and (min-width: 1025px){
.header {	
display: block;
float: left;
top: 0;	
left: 0;
text-align: center;
width: 100%;	
height: 150px;	
padding: 0 5px;	
color: #000000;	
}

.header nav {
	text-align: center;
	height: 30px;
	
}
.header nav ul {
	margin: 0;
	left: 0;
	padding: 1em;
	list-style-type: none;
	border-top: solid 2px #000;
	border-bottom: double 3px #000;
	
}
.header nav ul li {
	display: inline;
	margin-left: 1em;
	
}
.header nav ul li:first-child {
	margin-left: 0;
}

a {
	color: #000;
	text-decoration: none;
	font-weight: bolder;
	
}
a:hover {
	color: #fd0054;
}
a, a:hover {
	transition: color 0.25s ease-in;
}
	
#wrapper{
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	}
	
.contents {
width: 900px;
margin: 0 auto;
min-height: 100%;
overflow: auto; 
color: #000;
text-align: center;
overflow: hidden;
padding-bottom: 80px;
}

.footer {
position: absolute;
bottom: 0;
left: 0;
margin-top: 10px;
text-align: center;
width: 100%;	
height: 35px;	
padding:10px;
background-color: #000;
color: #fff;	
font-size: 12px;
}
	
#thm ul {
	overflow:hidden;  
	list-style:none;
	width: 500px;
	margin: 0 auto;
}
#thm li {
	float:left; 
	display:inline;
}
	
#thm .bg {
	display:none;
	width: 900px;
	height: 700px;
	
}

#thm .bg .text{
	width: 900px;
	height: 150px;
	overflow: auto;
	text-align: left;
	background: rgba(255,255,255,.7);
	position: relative;
	margin: 0 auto;
	left: 0px;
	top: -152px;
	font-size: 0.8em;
	z-index: 50;
}
	
#thm .bg p{
	padding: 1em;
	}
	
#thm .bg img{
	width: 900px;
	margin-top: 2em;
	position: relative;
	z-index: 46;
	}
	
.btnarea{
	margin-bottom: -30px;
}
	
	#right{
		text-align: right;
	}
}

@media screen and (min-width:768px) and ( max-width:1024px) { 
	
.header {	
display: block;
float: left;
top: 0;	
left: 0;
text-align: center;
width: 100%;	
height: 150px;	
padding: 0 5px;	
color: #000000;	
}

.header nav {
	text-align: center;
	height: 30px;
	
}
.header nav ul {
	margin: 0;
	left: 0;
	padding: 1em;
	list-style-type: none;
	border-top: solid 2px #000;
	border-bottom: double 3px #000;
	
}
.header nav ul li {
	display: inline;
	margin-left: 1em;
	
}
.header nav ul li:first-child {
	margin-left: 0;
}

a {
	color: #000;
	text-decoration: none;
	font-weight: bolder;
	
}
a:hover {
	color: #fd0054;
}
a, a:hover {
	-webkit-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
}
	
#wrapper{
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	}
	
.contents {
width: 750px;
height: 800px;
margin: 0 auto;
min-height: 100%;
overflow: auto; 
color: #000;
text-align: center;
overflow: hidden;

}

h2{ 
	padding: 10px;
	margin: 0 auto 10px;
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	background-color: #000;
}

h4{
	margin: 0 auto;
	font-weight: bold;
	font-size: 1.2em;
	padding: 10px;
	background-color: #000;
	color: #fff;
}

.footer {
position: fixed;
left: 0;
text-align: center;
width: 100%;	
height: 35px;	
padding:10px;
background-color: #000;
color: #fff;	
font-size: 12px;
z-index: 9800;
}
.footer,
.push {
  height: 35px;
}
	
#thm ul {
	overflow:hidden;  
	list-style:none;
	width: 500px;
	margin: 0 auto;
}
#thm li {
	float:left; 
	display:inline;
}

#thm .bg {
	display:none;
	width: 750px;
	height: 422px;
	margin-bottom: 10px;
	
}
#thm .bg .text{
	width: 750px;
	height: 150px;
	overflow: auto;
	text-align: left;
	background: rgba(255,255,255,.7);
	position: relative;
	left: 0px;
	top: -150px;
	font-size: 0.8em;
	z-index: 50;
}
#thm .bg p{
	padding: 1em;
	}
	
#thm .bg img{
	width: 750px;
	height: 448px;
	position: relative;
	z-index: 46;
	}
	
	#right{
		text-align: right;
	}

	
}

@media screen and (max-width:767px){
#line{
	width: 100%;
	border-bottom: double 3px #000;
	}
	
.header {	
display: block;
float: left;
top: 0;	
left: 0;
text-align: center;
width: 100%;	
height: 90px;	
padding: 0 5px;	
color: #000000;	
}

.header nav {
	text-align: center;
	height: 30px;
	
}
.header nav ul {
	margin: 0;
	left: 0;
	padding: 1em;
	list-style-type: none;
	border-top: solid 2px #000;
	border-bottom: double 3px #000;
	
}
.header nav ul li {
	display: inline;
	margin-left: 1em;
	
}
.header nav ul li:first-child {
	margin-left: 0;
}

a {
	color: #000;
	text-decoration: none;
	font-weight: bolder;
	
}
a:hover {
	color: #fd0054;
}
a, a:hover {
	-webkit-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
}
	
.contents {
width: 100%;
min-height: 100%;
margin: 0 auto; 
color: #000;
text-align: center;
overflow: hidden;
padding-bottom: 35px;
}

h2{ 
	padding: 10px;
	margin: 0 auto 10px;
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
	background-color: #000;
}

h4{
	margin: 0 auto;
	font-weight: bold;
	font-size: 1.2em;
	padding: 10px;
	background-color: #000;
	color: #fff;
}

.footer {
position: fixed;
bottom: 0;
left: 0;
text-align: center;
width: 100%;	
height: 35px;	
padding:10px;
background-color: #000;
color: #fff;	
font-size: 12px;
z-index: 9800;
}
.footer,
.push {
  height: 35px;
}

#thm ul {
	overflow:hidden;  
	list-style:none;
	width: 250px;
	margin: 0 auto;
}
#thm li {
	float:left; 
	display:inline;
}
	
#thm li img{
	width: 50px;
	height: 25px;
	}
	
#thm .bg {
	display:none;
	width: 100%;
	
}

#thm .bg img{
	width: 100%;
	}
	
#thm .bg .text{
	width: 100%;
	text-align: left;
	position: relative;
	font-size: .8em;
	margin-bottom: 50px;
}
#thm .bg p{
	padding: 1em;
	}
	
.bg img{
	width: 100%;
	}
	
}