@charset "UTF-8";
#hometop { width:100%; text-align: center; background: url("../images/hometop-bg.jpg") no-repeat center / cover;}
	#hometop h1 { display: flex; justify-content: flex-start; align-items: center; padding:0 20px; width: 100%; max-width: 1200px; margin: 0 auto; font-size: 18px; font-weight: normal; color:#FFF; }

#greetings { padding: 20px 0; text-align: center;}
	#greetings h2 { padding: 10px 0;}
	#greetings h3{ display: block; font-size: 18px; padding: 10px 0; max-width: 720px; margin: 0 auto; text-align: left; font-weight: normal;}
	#greetings p { display: block; font-size: 16px; padding: 10px 0; max-width: 720px; margin: 0 auto; text-align: center;}
		#greetings p a { display: inline-block; width:320px; margin: 10px auto; padding: 12px 0; text-align: center; font-size: 18px; color:#333; text-decoration: none; font-weight: bold; border-radius: 40px; border: 1px solid #9A9A9A;background: rgba(154,154,154,0);}
		#greetings p a:hover { color:#FFF; background: rgba(154,154,154,1);}

#business { padding: 20px 0; text-align: center;background: url("../images/business-bg.jpg") no-repeat center / cover; }
	#business ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; width: 100%; padding:20px 0; margin: 0;}
	#business li { text-align: left;}
		li.business1 { background: url("../images/business1.jpg") no-repeat center / cover; }
		li.business2 { background: url("../images/business2.jpg") no-repeat center / cover; }
	#business li a { display: block;  text-align: center; width: 100%; height: 100%; color:#FFF; font-weight: bold; text-decoration: none; background:rgba(0,0,0,.45);}
		#business li a::after { display: block; content:""; width: 20px; height: 20px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; transform: rotate(45deg); margin: 0 auto 40px auto; order: +1;}
		#business li a:hover { background:rgba(0,0,0,.65);}
		#business li span {display: block; padding: 60px 0 20px 0; text-align: center;}
			#business li span:after { display: block; text-align: center; font-size: 12px; font-weight: normal;}
				li.business1 span:after {content:"Substation construction";}
				li.business2 span:after {content:"Factory, building, tenant construction";}

#homenav { padding: 20px 0; text-align: center;}
	#homenav ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; width: 100%; padding: 0 0 20px 0; margin: 0;}
	#homenav li { display: inline-flex; text-align: left; border: 1px solid #CCC; margin-top: 20px; align-self: stretch;}
	#homenav a { display: flex; flex-wrap: wrap; align-items: center; width: 100%; height: 100%; text-decoration: none; color:#000;}
		#homenav a::after { display: block; content:""; width: 20px; height: 20px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg); transition: .3s;}
			#homenav a:hover::after { border-top: 1px solid #0072BF; border-right: 1px solid #0072BF; }
		#homenav a:hover { color:#0072BF;}
	#homenav h2 { font-size:21px; padding:10px 0 0 0;}
		#homenav h2::after { display: block; font-size: 12px;}
			li.homenav1 h2::after { content:"Recruit";}
			li.homenav2 h2::after { content:"About Us";}
			li.homenav3 h2::after { content:"Access Map";}
	#homenav p { font-size: 16px; padding: 20px 0;}

@media all and (min-width:320px) {
	/* 320px+ settings */
	#hometop h1 { height:80vw;}
	#greetings h2 { font-size: 20px; }
	#business li { width:100%;}
		#business li a { padding: 30px;font-size: 20px;}
		#business li a img { padding-bottom: 20px;}
	li.business2 { margin: 20px 0 0 0 ;}
	#homenav li { width: 100%; }
		#homenav li a {justify-content: space-between;padding: 20px 30px;}
		#homenav li a div { width:calc(100% - 40px);}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#hometop  h1 { height: 50vw;}
	#greetings h2 { font-size: 24px; }
		#greetings h2 br { display: none;}
	#business li a { padding: 40px;font-size: 24px;}
		#business li a img { padding-bottom: 40px;}
	#homenav li a { padding: 20px 40px;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#hometop  h1 { height: 500px;}
	#business li { width:48.5%;}
	#business li a { padding: 60px;}
	li.business2 { margin: 0 0 0 0 ;}
	#homenav li { max-width: calc(100% / 3); border:none; border-right:1px solid #CCC;}
		#homenav li:first-of-type { border-left:1px solid #CCC;} 
	#homenav li a {justify-content: center; padding: 0 50px 20px 50px;}
	#homenav a::after { align-self: flex-end;}
		#homenav li a div { width:100%;}
	#homenav h2 {text-align: center; }
		#homenav h2::after {text-align: center; }
}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	#business li a { padding:80px 60px;}
}