/* 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;
	position:relative;
}
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;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:9999;	
}
	.headerBar{
		width:100%;
		height:15px;
		background-color:#FFF;
	}
	.logoBar{
		width:836px;
		height:73px;
		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%;*/
	bottom:53%;
	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:1000px;
		min-height:130px;
		padding:10px;

		font-size:15pt;
		color:#FFF;
		text-align: center;
		
		animation-name: enterBtnAni;
    	animation-duration: 3s;
    	animation-fill-mode: forwards;
	}
	.enterBtn{
		margin:0 auto;
		width:420px;
		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:100%;
	}
	@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;
		}
	}
	
	
/* video bg */
* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
	padding:150px;
	background-color: rgba(0, 53, 113, 0.3);
	opacity:0;
}
#vidtop-content h1 {
	text-align:center;
	font-size:36px;
	letter-spacing:5px;
	margin-bottom:0px;
	text-shadow:1px 1px 0 rgba(0,0, 0, 0.5);
	
	animation-duration:3s;
	animation-fill-mode:forwards;
	animation-name:enterBtnAni;
}
#vidtop-content:hover{
	opacity:1;
}

@media screen and (max-width:599px) {
	#vidtop-content h1 {
		font-size:28px;
	}
	.landingInfo {
		min-height: 190px;
	}
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  /*.video-foreground { height: 300%; top: -100%; }*/
}
@media (max-aspect-ratio: 16/9) {
  /*.video-foreground { width: 300%; left: -100%; }*/
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
@media screen and (max-width:768px) {
	.content{
		width:100%;
		height: 260px;
		margin:-170px 0 0 -50%; /* -(height/2+80/2) -(width/2)*/
		position:fixed;
		bottom:30%;
		left:50%;
	}
	#vidtop-content {
		top: 0;
		color: #fff;
		padding:60px;
		background-color: rgba(0, 53, 113, 0.3);
		opacity:1;
	}
}