/* =Reset
-------------------------------------------------------------- */
.ie8 { -ms-behavior: url(backgroundsize.min.htc);}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
html {position: relative; height: 100%; overflow-y: scroll; font-size: 1.000em; -moz-text-size-adjust: 1.000em; -o-text-size-adjust: 1.000em; text-size-adjust: 1.000em; -webkit-text-size-adjust: 1.000em; -ms-text-size-adjust: 1.000em; -webkit-min-device-pixel-ratio:0; text-align: center;}
body {margin: 0; padding: 0; height: 100%; color: #ffffff; text-align: center; font-family: Arial, sans-serif; background: url(../img/background.jpg) no-repeat center center; background-size: cover;}
h1, h2, h3, h4, h5, h6 {clear: both;}
h1 {font-size: 2.813em; font-weight: 400; letter-spacing: 1px; font-family: 'Fjalla One', Arial, sans-serif; text-transform: uppercase;}
h2 {font-size: 1.250em; font-weight: 400; letter-spacing: 1px; font-family: 'Fjalla One', Arial, sans-serif; text-transform: uppercase;}
h3 {font-size: 0.813em; font-family: 'Maven Pro', Arial, sans-serif; font-weight: 700;}
img {border: 0; -ms-interpolation-mode: bicubic;}
a {outline: none;}



#page {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	#logoBox {position: absolute; top: 35px; right: 35px; display: block; width: 130px; height: 35px; overflow: hidden; z-index: 73;}
		#logoBox a {position: relative; display: block; padding: 0 0 0 350px; width: 130px; height: 35px;}
			#logoBox a img {position: absolute; top: 0; left: 0; width: 130px; height: 35px;}
	#copyrightBox {position: absolute; left: 20px; right: 25px; bottom: 25px; height: 33px; line-height: 32px; overflow: hidden; color: #ffffff; font-size: 0.813em; text-align: center;}
	#buttonMail {position: absolute; bottom: 15%; left: 50%; margin: 0 0 0 -160px; border: 1px solid #ffffff; width: 320px; height: 56px; line-height: 56px; color: #ffffff; font-size: 1.250em; font-weight: 400; letter-spacing: 1px; font-family: 'Fjalla One', Arial, sans-serif; text-transform: uppercase; text-decoration: none;}
		#buttonMail:hover {background: #333333; opacity: 0.4; filter: alpha(opacity=40);}
		#buttonMail img {position: absolute; top: 14px; right: 20px; width: 28px; height: 27px;}
/* css content */
#pageWait {position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 680px; min-width: 768px; z-index: 50; background: #393939;}
	#pageWait.hidden {opacity: 0.0; filter: alpha(opacity=0);}
#pageBox {position: absolute; top: 50%; left: 0; right: 0; margin: -55px 0 0 0; width: 100%;}
#pageBoxHome {position: relative; margin: 0 auto; width: 100%; max-width: 678px; height: 376px; font-family: 'Fjalla One', Arial, sans-serif; text-transform: uppercase; z-index: 51;}
	#pageBoxHome.step1 {margin-top: -55px;}
		#pageBoxHome.step1.step2 {margin-top: -183px;}
	#pageBoxHomeTop {position: absolute; top: 0; left: 0; right: 0; width: 100%x; height: 110px; z-index: 5; overflow: hidden;}
		#pageBoxHome.step1 #pageBoxHomeTop {height: 265px;}
		#pageBoxHomeTopContent {position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 248px; background: rgb(0,0,0); background: rgba(0,0,0,0.3); z-index: 7;}
			#pageBoxHomeTopContent h1 {position: absolute; top: 92px; left: 0; right: 0; width: 100%; opacity: 0.0; filter: alpha(opacity=0); text-align: center;}
				#pageBoxHomeTopContent h1.activated   {opacity: 1; filter: alpha(opacity=100);}
			#pageBoxHomeTopContent h2 {position: absolute; top: 149px; left: 0; right: 0; width: 100%; opacity: 0.0; filter: alpha(opacity=0); text-align: center;}
				#pageBoxHomeTopContent  h2.activated {opacity: 1; filter: alpha(opacity=100);}
			#pageBoxHomeTopContentLineTop {position: absolute; top: 29px; left: 5%; right: 5%; width: 90%; height: 47px;}
				#pageBoxHomeTopContentLineTop img {position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -45px; width: 90px; height: 18px;}
				.lineLeft {position: absolute; top: 50%; left: 0; width: 35%; height: 1px; background: #ffffff;}
					.lineLeft span {position: absolute; top: -3px; right: 0; display: block; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; width: 7px; height: 7px; background: #ffffff;}
				.lineRight {position: absolute; top: 50%; right: 0; width: 35%; height: 1px; background: #ffffff;}
					.lineRight span {position: absolute; top: -3px; left: 0; display: block; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; width: 7px; height: 7px; background: #ffffff;}
			#pageBoxHomeTopContentLineBottom {position: absolute; bottom: 32px; left: 5%; right: 5%; width: 90%; height: 26px; line-height: 26px; font-size: 1.125em; opacity: 0.0; filter: alpha(opacity=00);}
				#pageBoxHomeTopContentLineBottom.activated  {opacity: 1; filter: alpha(opacity=100);}
		#pageBoxHomeTopShadow {position: absolute; top: 248px; left: 0; right: 0; width: 100%; height: 17px; background: url(../img/pageShadow.png) no-repeat top center; background-size: contain; opacity: 0.0; filter: alpha(opacity=00);}
			#pageBoxHomeTopShadow.activated  {opacity: 1; filter: alpha(opacity=100);}
	#pageBoxHomeBottom {position: absolute; top: 248px; left: 0; right: 0; width: 100%; height: 0; background: rgb(0,0,0); background: rgba(0,0,0,0.4); z-index: 4; overflow: hidden;}
		#pageBoxHome.step1.step2 #pageBoxHomeBottom {height: 128px;}
		#pageBoxHomeBottomContent {position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 128px; z-index: 6; opacity: 0.0; filter: alpha(opacity=00);}
			#pageBoxHomeBottomContent.activated  {opacity: 1; filter: alpha(opacity=100);}
			#pageBoxHomeBottomContent h2 {line-height: 35px; letter-spacing: 0;}
				#pageBoxHomeBottomContentLeft {position: absolute; top: 40px; left: 5%; width: 28%;}
				#pageBoxHomeBottomContentMiddle {position: absolute; top: 40px; left: 33%; width: 34%;}
					#pageBoxHomeBottomContentMiddle img#iconLeft {position: absolute; top: 10px; left: 0; margin: 0 0 0 -10px; width: 20px; height: 19px;}
					#pageBoxHomeBottomContentMiddle img#iconRight {position: absolute; top: 10px; right: 0; margin: 0 -10px 0 0; width: 20px; height: 19px;}
				#pageBoxHomeBottomContentRight {position: absolute; top: 40px; right: 5%; width: 28%;}

.animated {-webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

/* css no javascript */


/* response */
@media (max-width: 660px) {
	body{font-size: 0.813em;}
	#copyrightBox {bottom: 15px;}
	#logoBox {width: 120px; height: 33px;}
		#logoBox a {width: 120px; height: 33px;}
			#logoBox a img {width: 120px; height: 33px;}
	#buttonMail {bottom: 60px; margin: 0 0 0 -130px; width: 260px; height: 45px; line-height: 45px;}
		#buttonMail img {top: 7px; width: 28px; height: 27px;}
	#pageBoxHome {height: 308px;}
		#pageBoxHomeTop {height: 79px;}
		#pageBoxHome.step1 {margin-top: -40px;}
			#pageBoxHome.step1.step2 {margin-top: -154px;}
				.mobile #pageBoxHome.step1.step2 {margin-top: -90px;}
			#pageBoxHome.step1 #pageBoxHomeTop {height: 225px;}
			#pageBoxHomeTopContent {height: 208px;}
				#pageBoxHomeTopContent h1 {top: 82px;}
				#pageBoxHomeTopContent h2 {position: absolute; top: 130px;}
				#pageBoxHomeTopContentLineTop {top: 15px;}
					#pageBoxHomeTopContentLineTop img {margin: -7px 0 0 -35px; width: 70px; height: 14px;}
				#pageBoxHomeTopContentLineBottom {bottom: 17px;}
			#pageBoxHomeTopShadow {top: 208px;}
		#pageBoxHomeBottom {top: 208px;}
			#pageBoxHome.step1.step2 #pageBoxHomeBottom {height: 100px;}
			#pageBoxHomeBottomContent {height: 100px;}
					#pageBoxHomeBottomContentLeft {top: 35px;}
					#pageBoxHomeBottomContentMiddle {top: 35px;}
					#pageBoxHomeBottomContentRight {top: 35px;}
}
@media (max-width: 530px) {
	body{font-size: 0.563em;}
	#logoBox {width: 90px; height: 24px;}
		#logoBox a {width: 90px; height: 24px;}
			#logoBox a img {width: 90px; height: 24px;}
	#buttonMail {margin: 0 0 0 -100px; width: 200px; height: 35px; line-height: 35px;}
		#buttonMail img {top: 7px; width: 20px; height: 19px;}
	#pageBoxHome {height: 220px;}
		#pageBoxHomeTop {height: 73px;}
		#pageBoxHome.step1 {margin-top: -37px;}
			#pageBoxHome.step1.step2 {margin-top: -110px;}
				.mobile #pageBoxHome.step1.step2 {margin-top: -90px;}
			#pageBoxHome.step1 #pageBoxHomeTop {height: 170px;}
			#pageBoxHomeTopContent {height: 150px;}
				#pageBoxHomeTopContent h1 {top: 55px;}
				#pageBoxHomeTopContent h2 {position: absolute; top: 87px;}
				#pageBoxHomeTopContentLineTop {top: 12px;}
					#pageBoxHomeTopContentLineTop img {margin: -5px 0 0 -25px; width: 50px; height: 10px;}
				#pageBoxHomeTopContentLineBottom {bottom: 10px;}
			#pageBoxHomeTopShadow {top: 150px;}
		#pageBoxHomeBottom {top: 150px;}
			#pageBoxHome.step1.step2 #pageBoxHomeBottom {height: 70px;}
			#pageBoxHomeBottomContent {height: 70px;}
					#pageBoxHomeBottomContentLeft {top: 20px;}
					#pageBoxHomeBottomContentMiddle {top: 20px;}
						#pageBoxHomeBottomContentMiddle img#iconLeft {top: 10px; left: 0; margin: 0 0 0 -5px; width: 10px; height: 10px;}
						#pageBoxHomeBottomContentMiddle img#iconRight {top: 10px; right: 0; margin: 0 -5px 0 0; width: 10px; height: 10px;}
					#pageBoxHomeBottomContentRight {top: 20px;}
}
@media (max-width: 360px) {
	body{font-size: 0.438em;}
	#logoBox {width: 100px; height: 27px;}
		#logoBox a {width: 100px; height: 27px;}
			#logoBox a img {width: 100px; height: 27px;}
	#pageBoxHomeBottomContentMiddle img#iconLeft {top: 6px; left: 0; margin: 0 0 0 -5px; width: 10px; height: 10px;}
	#pageBoxHomeBottomContentMiddle img#iconRight {top: 6px; right: 0; margin: 0 -5px 0 0; width: 10px; height: 10px;}
}
@media (max-height: 740px) {
	#buttonMail {bottom: 70px;}
}
@media (min-width: 660px) and (max-height: 650px) {
	html, body{height: 650px;}
}
@media (min-width: 531px) and (max-width: 660px) and (max-height: 600px) {
	html, body{height: 600px;}
}
@media (max-width: 530px) and (max-height: 500px) {
	html, body{height: 500px;}
}