/* Eric Meyer's CSS Reset */
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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.3;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

html{
	
}

body {
	font-family:"Microsoft JhengHei", "微軟正黑體", "Apple LiGothic Medium", "蘋果儷中黑", "Lucida Grande", "Lucida Sans Unicode", Helvetica;
	font-size:10pt;
	background: url(../images/landingImg.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

  -webkit-transition: 0.3s; /* Safari */
  transition: 0.3s;
}
a{
	text-decoration: none;
	color:inherit;
	-webkit-transition: 0.2s; /* Safari */
    transition: 0.2s;
    cursor: pointer;
}
a:hover{
	color:#73cde5;
}

.wrapper {
	width: 100%;
}


/* Header
-----------------------------------------------------------------------------*/
.header {
	overflow: hidden;
}
	.headerBar{
		width:100%;
		height:15px;
		background-color:#FFF;
	}
	.logoBar{
		width:450px;
		height:71px;
		background: url(../images/logoBar.png) no-repeat center center;
	}

/* Middle
-----------------------------------------------------------------------------*/
.content{
	width:100%;
	height: 260px;
	margin:-170px 0 0 -50%; /* -(height/2+80/2) -(width/2)*/
	position:fixed;
	top:50%;
	left:50%;
	background-color:rgba(0,0,0,0.5);
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;

	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
}
	.landingText{
		width:100%;
		height:120px;
		background: url(../images/landingText.png) no-repeat center center;
		
		animation-name: landingTextAni;
    	animation-duration: 2s;
    	animation-fill-mode: forwards;
	}
	@keyframes landingTextAni {
	    0%   {opacity:0;}
	    20%  {opacity:0;height:80px;}
	    100% {opacity:1;height:120px;}
	}
	.landingInfo{
		margin:0 auto;
		width:100%;
		max-width:640px;
		min-height:70px;
		padding:10px;

		font-size:12pt;
		color:#FFF;
		text-align: center;
		
		animation-name: enterBtnAni;
    	animation-duration: 3s;
    	animation-fill-mode: forwards;
	}
	.enterBtn{
		margin:0 auto;
		width:300px;
		height:40px;
		padding:20px;
		padding-left:110px;
		
		font-size:14pt;
		color:#FFF;
		background: url(../images/arrowRight.png) no-repeat 70% center;

		cursor: pointer;
		text-decoration: none;

		animation-name: enterBtnAni;
    	animation-duration: 3s;
    	animation-fill-mode: forwards;
	}
	.enterBtn:hover{
		padding-left:120px;
		background: url(../images/arrowRight.png) no-repeat 80% center;
	}
	
	@keyframes enterBtnAni {
	    0%   {opacity:0;}
	    40%  {opacity:0;height:40px;line-height:0}
	    100% {opacity:1;height:60px;line-height:1.25}
	}

/* Footer
-----------------------------------------------------------------------------*/
.footer{
	position:fixed;
    bottom:0px;
    width:100%;

	min-height: 80px;
	padding:12px;
	background:#003571;
	font: 12px Arial, sans-serif;

	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
	.footerContent{
		width:960px;
		max-width:960px;
	}
	@media screen and (max-width:599px) {
	  .footerContent{
	    display: inline;
	  }
	}
	.footerText{
		float:left;
		color:#629fbe;
	}
	.footerLogo{
		float:right;
		-webkit-flex: none;
		flex: none;
		
		width: 220px;
		height:28px;
		margin:12px 0 0 0;
	}
	@media screen and (max-width:599px) {
		.footerLogo{
			margin-bottom:0;
		}
	}