html, body {
	width:100%;
	height: 100%;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000;
}
.Mount {
	height: 50%;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	min-width: 1200px;
	background-image: url(../img/mount.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
.Water {
	height: 50%;
	width: 100%;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-repeat: no-repeat;
	background-position: center -50px;
	background-size: auto;
	/*background-image: url(../img/wave5.gif);*/
	background-size: 100% 110%;
	min-width: 1200px;
	overflow: hidden;
}
.Water .Wraper {
	position: absolute;
	height: 100%;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	left: 0px;
	right: 0px;
	z-index: 1;
	background: transparent;
}
.Water .Wraper .Logo {
	position: absolute;
	height: 166px;
	width: 353px;
	left: 10%;
	top: 30px;
}
.Water .Wraper .Logo .Yang {
	background-image: url(../img/logo.png);
	height: 83px;
	width: 353px;
	z-index: 99999;
}
.Water .Wraper .Logo .Ying {
	background-image: url(../img/logo2.png);
	height: 83px;
	width: 353px;
	z-index: 99999;
}
.Water .Wraper .Bridge {
	height: 100%;
	width: 800px;
	right: 0px;
	top: 0px;
}
.Water .Wraper .Bridge .BridgeImg {
	position: absolute;
	right: 85px;
	top: 80px;
	z-index:1;
}
.Water .Wraper .Bridge .Boat {
	position: absolute;
	height: 107px;
	width: 426px;
	top: 90px;
	right: 30px;
}
.Water .Wraper .Navi {
	height: 100%;
	position: absolute;
	left: 570px;
	top: 20px;
	width: 600px;
	float: left;
}
.Water .Wraper .Navi .Unit a {
	font-family: "Microsoft JhengHei UI", Verdana, geneva, sans-serif, "Heiti TC";
	font-size: 14px;
	color: #555;
	background-color: rgba(255,255,255,0.4);
	text-decoration: none;
	float: left;
	padding-top: 2px;
	padding-right: 20px;
	padding-bottom: 2px;
	padding-left: 20px;
	width: auto;
	opacity: 0;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-duration: 2s;
    -webkit-animation-delay: 0;
}
.Water .Wraper .Navi .Unit a:link {
	color: #555;
	text-decoration: none;
}
.Water .Wraper .Navi .Unit a:hover {
	color: #555;
	text-decoration: none;
	background-color: rgba(255,255,255,0.9);
}
video#bgvid {
    position: absolute;
    z-index: 0;
    background: url(../img/water.jpg) no-repeat;
    background-size: 100% 100%;
    top: -10%;
    left: -10%; /* fixed to left. Replace it by right if you want.*/
    min-width: 110%;
    min-height: 110%;
    width: auto;
    height: auto;
}
canvas {
	position: fixed; 
	z-index: -10;
}
#lake-img {
	width: 100%;
	height: 100%;
	display:none;
	position: absolute;
}
video::-webkit-media-controls {display: none !important}

/* Height problem */
@media all and (min-height: 1100px) {
	.Water .Wraper .Bridge .BridgeImg { 
		top: auto;
		bottom: 0;
	}
	.Water .Wraper .Bridge .Boat {
		top: auto;
		bottom: 320px;
	}
}

/* Device Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 768px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	 
	.Mount, .Water {
		max-width:768px;
	}
	.Water .Wraper .Bridge .BridgeImg { 
		top: auto;
		bottom: 0;
	}
	.Water .Wraper .Bridge .Boat {
		top: auto;
		bottom: 320px;
	}
}