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



/*----------  zoom   -----------*/

.zoom-img li {
	overflow:hidden;
	display:block;
	margin-bottom:10px;
}

.zoom-img li img {
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: transform 0.5s linear;
}

.zoom-img li img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor:pointer;
}


/*----------  page-body   -----------*/
.page-body {
	width:100%;
	height:auto;
	margin:0 auto;
	overflow:hidden;
	clear:both;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.entrance {
    height:auto;
	background:url(../img/gallery/12.jpg);
	background-size:cover;
	background-position:center;
}


/*----------  top-banner   -----------*/
.top-banner {
	width:100%;
	max-width:960px;
	margin:0 auto;
	margin-top:80px;
	opacity:0.8;
}

/*----------  body-in   -----------*/
.body-in {
	width:100%;
	max-width:960px;
	height:auto;
	margin:0 auto;
	margin-bottom:50px;
}


.body-in img {
	width:100%;
}


/*----------  box-list   -----------*/
.box-list {
	
}

img.box {
	width:33.3%;
	float:left;
	vertical-align: bottom;
}

img.box2 {
	width:66.6%;
	float:left;
	vertical-align: bottom;
}

img.box3 {
	width:66.6%;
	float:left;
	vertical-align: bottom;
}

/*----------  footer   -----------*/


/* smartphone  */
@media screen and (max-width:480px){
	.top-banner {
	width:90%;
	}
	
	.body-in {
	width:90%;
	height:100%;
	}
	
	.top-banner img {
	width:100%;
	margin-top:50px;
	margin-bottom:50px;
	}
	
	img.box {
	width:100%;
	float:none;
	vertical-align: bottom;
	}

	img.box2 {
	width:100%;
	float:none;
	vertical-align: bottom;
	}

	img.box3 {
	width:100%;
	float:none;
	vertical-align: bottom;
	}
}

/* tablet */
@media screen and (min-width:481px) and ( max-width:768px) {
	.top-banner {
	width:90%;
	
	}
	
	.top-banner img {
	width:100%;
	margin-top:50px;
	margin-bottom:50px;
	}
	
	.body-in {
	width:90%;
	height:auto;
	margin-bottom:120px;
	overflow:hidden;
	}

}


/* below 769px~1170px */
@media screen and (min-width:769px) and ( max-width:1170px) {
	.top-banner {
	width:90%;
	margin-top:120px;
	}
	
	.top-banner img {
	width:100%;
	}
	
	.body-in {
	width:90%;
	height:auto;
	margin-top:80px;
	margin-bottom:150px;
	overflow:hidden;
	}
}

/* above 1171px */
@media screen and (min-width:1171px) {
	.top-banner {
	width:100%;
	margin-top:120px;
	}
	
	.top-banner img {
	width:100%;
	}
	
	.body-in {
	width:100%;
	height:auto;
	margin-top:100px;
	margin-bottom:150px;
	overflow:hidden;
	}
}