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

.contain{
	width:75%;
	margin:auto;
	overflow:hidden;
	font-size:14px;
}
.b01{
	width:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
}
.b02{
width:83%;
	margin:auto;
	overflow:hidden;
}

.b22{
	width:83%;
	margin:auto;
	overflow:hidden;
}
.b03{
	width:100%;
	margin:0px;
	overflow:hidden;
}
.col-3{
	width:23%;
	padding-left:6px;	
	float:left;
	background-color: #fff;
}
.col-6{
	width:45%;
	padding-left:6px;	
		float:left;
		background-color:#FFF
}


ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: #666;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
    margin:0px;
    float:left;
}

li a:hover:not(.active) {
    background-color: #555;
}

.active {
    background-color:#F30;

}

.col-3 a{
	display:block;
	margin:auto;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:10px;
	
}
.col-3 a:hover{
	background:#CCC;
	border-radius:8px;
	color: #000;
	text-shadow:1px 1px 3px #555;
	
}
.col-6 a:hover img{
	transform:scale(1.1,1.1);
}
.col-8{
	float:left;
	width:70%;
	overflow:hidden;
	padding:15px;
}
	
	
hr{
	margin:0;
}


@media screen and (max-width: 800px) {
    .contain{
	display:block;
	width:100%;
	margin:0;
	font-size:14px;
}


.col-3 {width:98%;float:none;}

.col-3 a{padding:10px;}
.col-6 {width:95%;float:none;}

.b22 ul li a{float:none;width:100%;text-align:center;}
.col-3 img{width:60%;}

}