html, body {
	margin:0;
	padding:0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
    overflow-x: hidden;
}
body {
	position: absolute;
    height: 100%;
    overflow-x: hidden;
    width: 100%;
	transform: translate3d(0,0,0);
	top: 0; 
    left: 0;
	-webkit-text-size-adjust: 100%;
}

.landingContainer {

	display:block;
	
	height:1080px;
	width:1920px;
	position: absolute;
	margin: auto;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	overflow:hidden;
}
.landingPortraitContainer {
	width:1080px;
	height:1700px;
	height:auto;
	position:relative;
}
.landing {
	margin:0;
	padding:0;
	position:relative;

	-webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    transform-origin: top left;
    -ms-transform-origin: top left;
}
.landscape .logo {
	margin:0;
	padding:0;
	position:absolute;
	width:236px;
	height:58px;
	top:55px;
	left:85px;
	z-index:100;
}
.landscape .lang {
	margin:0;
	padding:0;
	position:absolute;
	top:80px;
	left:680px;
	z-index:100;
}
.lang p {
	margin:0;
	padding:0;
	color:#3f3b3c;
	font-size:20px;
}
.lang p a {
	margin:0;
	padding:0 5px;
	color:#3f3b3c;
	font-size:20px;
	text-decoration:none;
}
.landscape .title {
	margin:0;
	padding:0;
	position:absolute;
	width:324px;
	height:137px;
	top:226px;
	left:85px;
	z-index:100;
}
.landscape .flip1Holder {
	overflow: hidden;
	position:absolute;
	top:265px;
	left:565px;
	z-index:1;
}
.landscape .flip1 {
	width:1736px;
	height:815px;
	background: url('../images/flip1.png') no-repeat top left transparent;
}
.landscape .student {
	margin:0;
	padding:0;
	position:absolute;
	width:361px;
	height:378px;
	top:489px;
	left:1493px;
	z-index:2;
	opacity:0;
}
.landscape .drama {
	margin:0;
	padding:0;
	position:absolute;
	width:166px;
	height:183px;
	top:332px;
	left:1694px;
	z-index:2;
	opacity:0;
}
.landscape .computer {
	margin:0;
	padding:0;
	position:absolute;
	width:114px;
	height:136px;
	top:633px;
	left:1282px;
	z-index:2;
	opacity:0;
}
.landscape .flip2Holder {
	overflow: hidden;
	position:absolute;
	top:0px;
	left:7px;
	z-index:1;
}
.landscape .flip2 {
	width:2292px;
	height:891px;
	background: url('../images/flip2.png') no-repeat top left transparent;
	opacity:0;
}
.landscape .bank {
	margin:0;
	padding:0;
	position:absolute;
	width:306px;
	height:279px;
	top:319px;
	left:384px;
	z-index:2;
	opacity:0;
}
.landscape .plant {
	margin:0;
	padding:0;
	position:absolute;
	width:185px;
	height:225px;
	top:196px;
	left:980px;
	z-index:2;
	opacity:0;
}
.landscape .table {
	margin:0;
	padding:0;
	position:absolute;
	width:797px;
	height:1041px;
	top:796px;
	left:1041px;
	z-index:3;
	opacity:0;
}
.landscape .player1 {
	margin:0;
	padding:0;
	position:absolute;
	width:142px;
	height:127px;
	top:738px;
	left:982px;
	z-index:2;
	opacity:0;
}
.landscape .player2 {
	margin:0;
	padding:0;
	position:absolute;
	width:89px;
	height:140px;
	top:851px;
	left:1217px;
	z-index:4;
	opacity:0;
}
.landscape .ball {
	margin:0;
	padding:0;
	position:absolute;
	width:20px;
	height:13px;
	top:810px;
	left:1113px;
	z-index:3;
	opacity:0;
}
.landscape .tree1 {
	margin:0;
	padding:0;
	position:absolute;
	width:34px;
	height:127px;
	top:102px;
	left:1732px;
	z-index:2;
	opacity:0;
}
.landscape .tree2 {
	margin:0;
	padding:0;
	position:absolute;
	width:43px;
	height:156px;
	top:771px;
	left:872px;
	z-index:2;
	opacity:0;
}
.landscape .handicapped {
	margin:0;
	padding:0;
	position:absolute;
	width:185px;
	height:203px;
	top:71px;
	left:1145px;
	z-index:2;
	opacity:0;
}
.landscape .hi {
	margin:0;
	padding:0;
	position:absolute;
	width:165px;
	height:182px;
	top:44px;
	left:1510px;
	z-index:2;
	opacity:0;
}
.landscape .slogan {
	margin:0;
	padding:0;
	position:absolute;
	width:437px;
	height:180px;
	top:242px;
	left:1196px;
	z-index:3;
	opacity:0;
}
.landscape .drop1 {
	margin:0;
	padding:0;
	position:absolute;
	width:3px;
	height:3px;
	top:322px;
	left:1068px;
	z-index:3;
	display:none;
}
.landscape .drop2 {
	margin:0;
	padding:0;
	position:absolute;
	width:12px;
	height:11px;
	top:333px;
	left:1067px;
	z-index:3;
	display:none;
}
.landscape .drop3 {
	margin:0;
	padding:0;
	position:absolute;
	width:12px;
	height:12px;
	top:340px;
	left:1068px;
	z-index:3;
	display:none;
}
.landscape .drop4 {
	margin:0;
	padding:0;
	position:absolute;
	width:15px;
	height:12px;
	top:345px;
	left:1069px;
	z-index:3;
	display:none;
}

.landscape .menu {
	margin:0;
	padding:0;
	position:absolute;
	width:700px;
	height:180px;
	top:630px;
	left:246px;
	z-index:2;
	display:none;
}
.landscape .menu ul {
	margin:0;
	padding:0;
	list-style:none;
}
.landscape .menu ul li {
	margin:0;
	padding:0;
	opacity:0;
}
.landscape .menu ul li.snapshot {
	background: url('../images/icon1.png') no-repeat top left transparent;
	min-height:80px;
	image-rendering: auto;
}
.landscape .menu ul li.fullreport {
	background: url('../images/icon2.png') no-repeat top left transparent;
	min-height:71px;
	image-rendering: auto;
}
.landscape .menu ul li.print {
	padding-top:10px;
	background: url('../images/icon3.png') no-repeat top left transparent;
	min-height:71px;
	image-rendering: auto;
}
.landscape .menu ul li.feedback {
	padding-top:10px;
	background: url('../images/icon4.png') no-repeat top left transparent;
	min-height:71px;
	image-rendering: auto;
}
.landscape .menu ul li a {
	margin:0;
	padding:10px 0 10px 80px;
	font-size:32px;
	font-weight:bold;
	color:#71bf44;
	text-decoration:none;
}
.landscape .menu ul li a span {
	font-size:16px;
	font-weight:normal;
}

.landscape .copyright {
	margin:0;
	padding:0;
	position:absolute;
	top:991px;
	left:85px;
	width:700px;
}
.landscape .copyright p {
	margin:0;
	padding:5px 0 0 0;
	color:#5a5758;
	font-size:11px;
}
.landscape .copyright p a {
	color:#5a5758;
	text-decoration:none;
}
.landscape .copyright p.member {
	margin:0;
	padding:2px 0 0 0;
	color:#000;
	font-size:14px;
}

.portrait .logo {
	margin:0;
	padding:0;
	position:absolute;
	width:274px;
	height:66px;
	top:68px;
	left:57px;
	z-index:100;
}
.portrait .title {
	margin:0;
	padding:0;
	position:absolute;
	width:315px;
	height:132px;
	top:257px;
	left:57px;
	z-index:100;
}
.portrait .lang {
	margin:0;
	padding:0;
	position:absolute;
	width:150px;
	top:70px;
	left:900px;
	z-index:100;
}
.portrait .lang p {
	margin:0;
	padding:0;
	color:#fff;
	font-size:36px;
}
.portrait .lang p a {
	margin:0;
	padding:0 5px;
	color:#fff;
	font-size:36px;
	text-decoration:none;
}
.portrait .student {
	margin:0;
	padding:0;
	position:absolute;
	width:360px;
	height:330px;
	top:1000px;
	left:699px;
	z-index:3;
	opacity:0;
}
.portrait .drama {
	margin:0;
	padding:0;
	position:absolute;
	width:144x;
	height:159px;
	top:748px;
	left:113px;
	z-index:2;
	opacity:0;
}
.portrait .computer {
	margin:0;
	padding:0;
	position:absolute;
	width:103px;
	height:122px;
	top:769px;
	left:825px;
	z-index:2;
	opacity:0;
}
.portrait .bank {
	margin:0;
	padding:0;
	position:absolute;
	width:331px;
	height:301px;
	top:427px;
	left:52px;
	z-index:2;
	opacity:0;
}
.portrait .plant {
	margin:0;
	padding:0;
	position:absolute;
	width:157px;
	height:190px;
	top:204px;
	left:538px;
	z-index:2;
	opacity:0;
}
.portrait .drop1 {
	margin:0;
	padding:0;
	position:absolute;
	width:3px;
	height:3px;
	top:327px;
	left:625px;
	z-index:3;
	display:none;
}
.portrait .drop2 {
	margin:0;
	padding:0;
	position:absolute;
	width:12px;
	height:11px;
	top:336px;
	left:624px;
	z-index:3;
	display:none;
}
.portrait .drop3 {
	margin:0;
	padding:0;
	position:absolute;
	width:12px;
	height:12px;
	top:343px;
	left:625px;
	z-index:3;
	display:none;
}
.portrait .drop4 {
	margin:0;
	padding:0;
	position:absolute;
	width:15px;
	height:12px;
	top:348px;
	left:626px;
	z-index:3;
	display:none;
}
.portrait .table {
	margin:0;
	padding:0;
	position:absolute;
	width:159px;
	height:151px;
	top:928px;
	left:464px;
	z-index:3;
	opacity:0;
}
.portrait .player1 {
	margin:0;
	padding:0;
	position:absolute;
	width:116px;
	height:107px;
	top:867px;
	left:396px;
	z-index:2;
	opacity:0;
}
.portrait .player2 {
	margin:0;
	padding:0;
	position:absolute;
	width:65px;
	height:106px;
	top:978px;
	left:616px;
	z-index:4;
	opacity:0;
}
.portrait .ball {
	margin:0;
	padding:0;
	position:absolute;
	width:17px;
	height:11px;
	top:938px;
	left:523px;
	z-index:3;
	opacity:0;
}
.portrait .tree1 {
	margin:0;
	padding:0;
	position:absolute;
	width:34px;
	height:127px;
	top:243px;
	left:995px;
	z-index:2;
	opacity:0;
}
.portrait .tree2 {
	margin:0;
	padding:0;
	position:absolute;
	width:36px;
	height:136px;
	top:958px;
	left:64px;
	z-index:2;
	opacity:0;
}
.portrait .handicapped {
	margin:0;
	padding:0;
	position:absolute;
	width:174px;
	height:191px;
	top:120px;
	left:731px;
	z-index:2;
	opacity:0;
}
.portrait .slogan {
	margin:0;
	padding:0;
	position:absolute;
	width:419px;
	height:189px;
	top:446px;
	left:609px;
	z-index:3;
	opacity:0;
}
.portrait .flip1Holder {
	overflow: hidden;
	position:absolute;
	top:419px;
	left:260px;
	z-index:1;
}
.portrait .flip1 {
	width:822px;
	height:810px;
	background: url('../images/portrait/flip1.png') no-repeat top left transparent;
}
.portrait .flip2Holder {
	overflow: hidden;
	position:absolute;
	top:0px;
	left:1px;
	z-index:1;
}
.portrait .flip2 {
	width:1080px;
	height:916px;
	background: url('../images/portrait/flip2.png') no-repeat top left transparent;
	opacity:0;
}

.portrait .menu {
	margin:0;
	padding:0;
	position:absolute;
	width:948px;
	height:180px;
	top:1212px;
	left:135px;
	z-index:2;
	display:none;
}
.portrait .menu ul {
	margin:0;
	padding:0;
	list-style:none;
}
.portrait .menu ul li {
	margin:0;
	padding:0;
	opacity:0;
}
.portrait .menu ul li.snapshot {
	background: url('../images/portrait/icon1.png') no-repeat top left transparent;
	min-height:100px;
}
.portrait .menu ul li.fullreport {
	background: url('../images/portrait/icon2.png') no-repeat top left transparent;
	min-height:91px;
}
.portrait .menu ul li.print {
	padding-top:10px;
	background: url('../images/portrait/icon3.png') no-repeat top left transparent;
	min-height:91px;
}
.portrait .menu ul li.feedback {
	padding-top:10px;
	background: url('../images/portrait/icon4.png') no-repeat top left transparent;
	min-height:91px;
}
.portrait .menu ul li a {
	margin:0;
	padding:10px 0 10px 119px;
	font-size:44px;
	font-weight:bold;
	color:#71bf44;
	text-decoration:none;
}
.portrait .menu ul li a span {
	font-size:25px;
	font-weight:normal;
}

.portrait .copyright {
	margin:0;
	padding:0;
	position:absolute;
	top:1620px;
	left:57px;
	width:700px;
}
.portrait .copyright p, .portrait .copyright a {
	margin:0;
	padding:5px 0 0 0;
	color:#5a5758;
	font-size:11px;
}
.portrait .copyright a {
	text-decoration:underline;
}
.portrait .copyright p.member {
	margin:0;
	padding:2px 0 0 0;
	color:#000;
	font-size:14px;
}

/* portrait */
@media screen and (orientation:portrait) {
	.portrait {
		display:block;
	}
	.landscape {
		display:none;
	}
	.landing {
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		transform-origin: 0 0;
		-ms-transform-origin: 0 0;
	}
	
}
/* landscape */
@media screen and (orientation:landscape) {
	.portrait {
		display:none;
	}
	.landscape {
		display:block;
	}
}

/* ipad */
@media all and (max-width: 1024px) {
	.landing {
		-webkit-transform-origin: -130px 0;
		-moz-transform-origin: -130px 0;
		transform-origin: -130px 0;
		-ms-transform-origin: -130px 0;
	}
}

@media all and (max-width: 768px) {
	.landing {
		-webkit-transform-origin: top left;
		-moz-transform-origin: top left;
		transform-origin: top left;
		-ms-transform-origin: top left;
	}
}

/* mobile */
@media only screen and (max-device-width : 640px) {
	.landscape .lang {
		top:70px;
	}
	.lang p, .lang p a {
		font-size:30px;
	}
	.landscape .menu ul li a {
		font-size:38px;
	}
}