body { padding:0; margin:0; font-family:Tahoma,Verdana,sans-serif; }
#header { padding:; background-color:#ffffff; }
	#header > img { width:90%; margin:5% 5% 3%; }
#banner { height:auto; background-image:url(/img/Top_Banner.jpg); background-position:top center; background-size:2062px 508px; background-repeat:no-repeat; background-color:#000000; text-align:center; }
	#banner > .content { box-sizing:border-box; width:100%; max-width:1200px; height:100%; padding:30px; margin:0 auto; text-align:left; color:#ffffff; font-size:30px; }
		#banner > .content > p { margin:30px 0 0; font-weight:bold; }
			#banner > .content > p > .tag { display:inline-block; padding:5px 22px 9px; border-radius:17px; background-color:red; font-weight:medium; }
			#banner > .content > p > .small { display:block; font-size:0.6em; padding:8px 6px 6px; font-weight:medium; }
			#banner > .content > p > .phone { font-size:1.2em; }

#usage { padding:20px 0; }
	#usage > .content { display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; width:100%; max-width:1200px; padding:0px 20px 20px; margin:0 auto; list-style:none; }
		#usage > .content > li { box-sizing:border-box; width:100%; padding:0px; margin:20px 0 0; border:1px solid #dddddd; border-radius:36px; }
			#usage > .content > li > img { display:block; width:100%; }
			#usage > .content > li > .info { box-sizing:border-box; padding:22px 16px; text-align:center; }
				#usage > .content > li > .info > h3 { display:block; height:50px; }
				#usage > .content > li > .info > img { display:block; margin:0 auto; }

#introduction { background-color:#dddddd; }
	#introduction > .content { display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; width:100%; max-width:1200px; padding:35px 20px; margin:0 auto; }
		#introduction > .content > h2 { width:100%; text-align:center; font-size:32px; margin:0 0 30px; }
		#introduction > .content > .youtube { position:relative; width:100%; height:0; padding-bottom:56.25%; }
			#introduction > .content > .youtube > iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
		#introduction > .content > ol { box-sizing:border-box; list-style:none; padding:20px 0 0; margin:0; font-size:20px; }
			#introduction > .content > ol > li { box-sizing:border-box; padding:0 0 10px 26px; background-image:url(/img/Arrow_right.png); background-position:top 2px left; background-size:20px 19px; background-repeat:no-repeat; }

#solution { padding:20px 0; }
	#solution > .content { box-sizing:border-box; width:100%; max-width:1200px; padding:35px 20px; margin:0 auto; }
		#solution > .content > h2 { width:100%; text-align:center; font-size:32px; margin:0 0 30px; }
		#solution > .content > p { width:100%; }

		#solution > .content > ol { display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; list-style:none; padding:20px 0 0; margin:0; font-size:20px; }
			#solution > .content > ol > li { box-sizing:border-box; width:100%; padding:0 0 5px; }
				#solution > .content > ol > li > h3 { box-sizing:border-box; width:100%; padding:8px; border-radius:9px; margin:10px auto; text-align:center; font-size:22px; color:#ffffff; background-color:#000000; }
				#solution > .content > ol > li > ol { list-style:disc; padding:0 0 0 24px; margin:0; }
					#solution > .content > ol > li > ol > li { width:100%; padding:0 0 8px; }

#location { background-color:#dddddd; }
	#location > h2 { box-sizing:border-box; width:100%; padding:16px; margin:0; text-align:center; color:#ffffff; background-color:#000000; }
	#location > .content { box-sizing:border-box; width:100%; max-width:1200px; padding:35px 20px; margin:0 auto; }
		#location > .content > ol { display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; list-style:none; padding:20px 0 0; margin:0; font-size:20px; }
			#location > .content > ol > li { box-sizing:border-box; width:100%; padding:0 0 22px; text-align:center; }
				#location > .content > ol > li > img { width:100%; }
				#location > .content > ol > li > p { margin:10px 0 0; }

#contact { }
	#contact > .content { display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; width:100%; max-width:1200px; padding:35px 20px 0; margin:0 auto; }
		#contact > .content > .info { width:100%; font-size:22px; }
			#contact > .content > .info > .tag { display:block; padding:8px 32px; border-radius:8px; margin:0 auto; text-align:center; font-size:28px; font-weight:bold; color:#ffffff; background-color:#000000; }
			#contact > .content > .info > h3 { margin:38px 0; text-align:center; }
			#contact > .content > .info > ol { padding:0 0 0 24px; margin:0; }
				#contact > .content > .info > ol > li { padding:0 0 24px; }
					#contact > .content > .info > ol > li > h4 { margin:0; }
					#contact > .content > .info > ol > li > .em { color:red; }
					#contact > .content > .info > ol > li > p { font-size:14px; margin:4px 0 0; }

		#contact > .content > form {  display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; width:100%; margin:30px 0 0; }		
			#contact > .content > form input,
			#contact > .content > form textarea,
			#contact > .content > form button { all:unset; }

			#contact > .content > form label { display:block; width:100%; padding:0 0 16px; }
			#contact > .content > form label.half { width:49%; }
				#contact > .content > form label > div { padding:0 0 2px; font-size:14px; color:#666666; }
					#contact > .content > form label > div > .required { color:red; }

			#contact > .content > form input,
			#contact > .content > form textarea { box-sizing:border-box; width:100%; padding:8px 11px; border:1px solid #dfdfdf; border-radius:3px; font-size:17px; letter-spacing:normal; background-color:#f6f6f6; }
			#contact > .content > form button { display:inline-block; padding:8px 32px; border-radius:8px; margin:20px auto; text-align:center; font-size:28px; font-weight:bold; color:#ffffff; background-color:#000000; }
			#contact > .content > form button:hover { cursor:pointer; }

			#contact > .content > form textarea { height:110px; }

#footer { }
	#footer > .content { width:100%; max-width:1200px; padding:0 0 16px 8px; margin:0 auto; font-size:12px; text-align:center; color:#999999; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

	#usage > .content > li { width:49%; }

	#solution > .content > ol > li { width:49%; }

	#location > .content > ol > li { width:49%; }

	#contact > .content > .info > .tag { display:inline-block; }
	#contact > .content > .info > h3 { text-align:left; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	#header > img { width:50%; margin:3% 25%; }
	#banner { height:220px; }
			#banner > .content > p > .small { display:inline-block; }

	#contact > .content > .info { width:40%; }
	#contact > .content > form { width:56%; margin:0; }
		#contact > .content > form button { margin:20px 0; }

	#footer > .content { text-align:left; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	#usage > .content > li { width:24%; }

		#introduction > .content > .youtube { width:48%; padding-bottom:27%; }
		#introduction > .content > ol { width:50%; padding:0; }

	#solution > .content > ol > li { width:24%; }
	#location > .content > ol > li { width:18.5%; }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
	#header > img { display:block; width:400px; margin:35px auto 25px; }

	#banner { height:500px; }
		#banner > .content { padding:100px 42px; font-size:36px; }

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}