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

    #container{
        margin: 0 auto;
        max-width: 550px;
    }
	.thumbnail{
		overflow: hidden;
		margin: 0 0 10px;
        padding: 0;
        width: 100%;
		max-width: 100%;
	}
	.thumbnail li{
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
		list-style: none;
		overflow: hidden;
		height: 65px;
		max-width: 16%;
	}
    .thumbnail li:last-child{
        margin-right: 0;
    }
	.thumbnail li img{
        width: 100%;
		opacity: 0.5;
        filter: alpha(opacity=50); 
	}
	.thumbnail li.current img{
		opacity: 1;
        filter: alpha(opacity=100);
	}
	.main_photo{
		position: relative;
        height: 500px;
	}
	.main_photo img{
		position: absolute;
		top:0;
		width: 100%;
	}


.ex_height li{
	width: 49%;
	float: left;
	overflow: hidden;
	height: 300px;
}
.ex_height li div{
	width: 100%;
	overflow: hidden;
}
.ex_height li img{
	width: 100%;
	overflow: hidden;
}

.ex_height li:nth-of-type(2n){
	margin-left: 2%;
}


.ex_height li p{
	 font-family: "Noto Sans SC";
font-weight: bold ;
	line-height: 1.2;
}

@media screen and (max-width: 768px) {
		.thumbnail li{
        float: left;
        margin-right: 1.8%;
        margin-bottom: 5px;
		list-style: none;
		overflow: hidden;
		height: 50px;
		max-width: 31.5%;
	}
.ex_height li{
	width: 49%;
	float: left;
	overflow: hidden;
	height: auto;
}

.ex_height li div{
	width: 100%;
	overflow: hidden;
}

}