@charset "UTF-8";

footer { border-top: none;}

#hometop { width: 100%; overflow: hidden;}
	#hometop span { display: block; width: 70%; height: 600px; overflow: hidden; background-position: center; background-size: cover; }
		#hometop1 span { background-image: url("../images/hometop18.jpg");}
		#hometop2 span { background-image: url("../images/hometop21.jpg");}
		#hometop3 span { background-image: url("../images/hometop23.jpg");}
		#hometop4 span { background-image: url("../images/hometop8.jpg");}
		#hometop5 span { background-image: url("../images/hometop4.jpg");}
		#hometop6 span { background-image: url("../images/hometop5.jpg");}
		#hometop7 span { background-image: url("../images/hometop3.jpg");}
		#hometop8 span { background-image: url("../images/hometop2.jpg");}
		#hometop9 span { background-image: url("../images/hometop1.jpg");}
		#hometop10 span { background-image: url("../images/hometop6.jpg");}
		#hometop11 span { background-image: url("../images/hometop7.jpg");}
		#hometop12 span { background-image: url("../images/hometop11.jpg");}
	#hometop img { display: none;}

#concept { padding:40px 20px;}
	#concept .inner { max-width: 960px;}
		#concept h2 { padding: 10px 0; text-align: center; font-size: 40px;}
		#concept p { padding: 10px 0; text-align: center; font-weight: bold;}


#homenav { padding:0 20px;}
	#homenav .inner { max-width: 1200px;}
	#homenav ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
	#homenav li { display: block; background-repeat: no-repeat; background-size: cover; background-position: center; }
		li#homenav1 { background-image: url("../images/homenav1-bg.jpg");}
		li#homenav2 { background-image: url("../images/homenav2-bg.jpg");}
		li#homenav3 { background-image: url("../images/homenav3-bg.jpg");}
		li#homenav4 { background-image: url("../images/homenav4-bg.jpg");}
		li#homenav5 { background-image: url("../images/homenav5-bg.jpg");}
		li#homenav6 { background-image: url("../images/homenav6-bg.jpg");}
	#homenav li a { width: 100%; display: block; text-align: center; background: rgba(255,255,255,0);padding: 40px;}
		#homenav li a:hover { background: rgba(255,255,255,.4);}


@media all and (min-width:320px) {
	/* 320px+ settings */
	#hometop span {padding-top: 50%; }
	#concept p {font-size: 16px;}
	#homenav li { width: 100%;}

}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#hometop span {padding-top: 40%; }
	#concept p {font-size: 20px;}
	#homenav li { width: 50%;}
}


@media all and (min-width:960px) {
	/* 960px+ settings */
	#hometop span {padding-top: 480px; }
	#homenav li { width: calc(100% / 3);}
		#homenav li a {padding: 60px;}
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
}