@charset "utf-8";
/* CSS Document */

@import url("reset.css");

html,body{
	height:100%;
	font-family:  /*"Helvetica Neue", Helvetica, Arial,*/ "微軟正黑體", sans-serif;
	-webkit-text-size-adjust:none;
}

body{
	background-color:#FFF;
	background-image:url(/Images/index/bgColor_morning.png);
	background-repeat:repeat-x;
	
}

#main{
	position:relative;
	/*height:100%;*/
	width:100%;
	overflow:hidden;
}


#amPark{
	position:relative;
	margin:auto;
	/* 202609（抄 proulex）：容器高度改用 CSS aspect-ratio（寬:高=100:66，對齊 index.js 的 width*0.66）。
	   原本高度只由 index.js Resize() 設，JS 跑之前 #amPark 高度=0，裡面 top:% 的場景圖會塌到頂端疊成一坨（FOUC）。
	   有了 aspect-ratio，首次繪製就有正確高度、圖直接就定位；index.js 仍會設 px 高度（同值）並處理 resize。 */
	aspect-ratio:100 / 66;
	-webkit-animation:OPENING1 1s cubic-bezier(.2,1.6,.72,.95);
	animation:OPENING1 1s cubic-bezier(.2,1.6,.72,.95);
}

#amPark img{
	width:100%;
	/*height:auto;*/
}
/*
#tttest{
	display:none;
}
*/

#cloud_left{
	position:absolute;
}

#cloud_right{
	position:absolute;
}
#cloud_left img,#cloud_right img{
	width:100%;
}

#Logo{
	position:absolute;
	z-index:9999;
}
#Logo img{
	width:100%;
}

#mainBack{
	position:absolute;
	-webkit-animation:mainBack 3s ease-out;
	animation:mainBack 3s ease-out;
	top:-55%;
	left:-26%;
	width:152%;
}

#park_cloud01{
	position:absolute;
	top:54.5%;
	left:0%;
	width:100%;
	/*display:none;*/

}
#park_ballon01{
	position:absolute;
	top:55.2%;
	left:19.8%;
	width:45.5%;
}
#park_rainbow{
	position:absolute;
	top:54.8%;
	left:64.32%;
	width:18.75%;
	/*display:none;*/
}
#park_castle01{
	position:absolute;
	top:54%;
	left:0%;
	width:100%;
	/*display:none;*/
}
#park_castle02{
	position:absolute;
	top:9.1%;
	left:20.5%;
	width:54.7%;
}
#park_cloud02{
	position:absolute;
	top:41%;
	left:0%;
	width:100%;
	/*display:none;*/
}
#park_castle03{
	position:absolute;
	top:31.3%;
	left:74.8%;
	width:4.63%;
}
#park_FerrisWheel01{
	position:absolute;
	top:27.2%;
	left:38.44%;
	width:23.1%;	
}
#park_FerrisWheel02{
	position:absolute;
	top:3.68%;
	left:36.3%;
	width:27.3%;
	height:41.4%;
}
#FerrisWheel_A{
	position:absolute;
	width:100%;
	height:100%;
	top:0%;
	left:0%;
	-webkit-animation:FerrisWheelRotate 15s 1.5s linear infinite;
	animation:FerrisWheelRotate 15s 1.5s linear infinite;
}

#FerrisWheel_A_01{
	position:absolute;
	width:100%;
	top:0%;
	left:0%;
}
#box01{
	position:absolute;
	width:33.3%;
	top:-8.5%;
	left:33.2%;
}
#box02{
	position:absolute;
	width:33.3%;
	top:3.6%;
	left:62.6%;
}
#box03{
	position:absolute;
	width:33.3%;
	top:33%;
	left:75%;
}
#box04{
	position:absolute;
	width:33.3%;
	top:63%;
	left:62.6%;
}
#box05{
	position:absolute;
	width:33.3%;
	top:75%;
	left:33.2%;
}
#box06{
	position:absolute;
	width:33.3%;
	top:63%;
	left:3%;
}
#box07{
	position:absolute;
	width:33.3%;
	top:33%;
	left:-8.8%;
}
#box08{
	position:absolute;
	width:33.3%;
	top:3.6%;
	left:3%;
}

.boxRotate{
	-webkit-animation:everyBoxRotate 15s 1.5s linear infinite;
	animation:everyBoxRotate 15s 1.5s linear infinite;
}


#FerrisWheel_B{
	position:absolute;
	width:100%;
	height:100%;
	top:0%;
	left:0%;
}

#park_castle04{
	position:absolute;
	width:100%;
	top:18.6%;
	left:0%;
}

#star_01{
	position:absolute;
	width:11.8%;
	top:29.5%;
	left:5.7%;
	
}
#star_02{
	position:absolute;
	width:11.8%;
	left:73.7%;
	
}
/**/
#star_03{
	position:absolute;
	width:9.1%;
	top:9.8%;
	left:13.9%;
}
#star_03_2>img{
	display:block;
}
#star_03_2{
	position:absolute;
	width:12%;
	top:11.5%;
	left:12.9%;
	cursor:pointer;
	background-image:url(/Images/index/smartClassroom_button_over.png);
	background-size:100% auto;
}


#star_03_3>img{
	display:block;
}
#star_03_3{
	position:absolute;
	width:12%;
	top:11.5%;
	left:12.9%;
	cursor:pointer;
	background-image:url(/Images/index/mp3Dowanload_btn.png);
	background-size:100% auto;
}




@media screen and (max-width: 1099px) { 
#star_03_2{
	display:block;
	position:absolute;
	width:15%;
	top:6%;
	left:11%;
	cursor:pointer;
	background-image:url(/Images/index/smartClassroom_button_over.png);
	background-size:100% auto;
}

#star_03_3{
	display:block;
	position:absolute;
	width:15%;
	top:6%;
	left:11%;
	cursor:pointer;
	background-image:url(/Images/index/mp3Dowanload_btn.png);
	background-size:100% auto;
}


}

#star_03_2:hover{
	background-position:0% -103%;
}

#star_03_3:hover{
	background-position:0% -103%;
}


#star_04{
	position:absolute;
	width:9.1%;
	top:19.5%;
	left:88.5%;
	
}

#star_05{
	position:absolute;
	width:10%;
	top:33.5%;
	left:82.5%;
	
}
#star_06{
	position:absolute;
	width:9.1%;
	top:16.5%;
	left:0.8%;
	
}

#ballon_a{
	position:absolute;
	width:8.3%;
	top:78.8%;
	left:18.4%;
}
#ballon_b{
	position:absolute;
	width:6.8%;
	top:76.5%;
	left:24.6%;
}
#ballon_c{
	position:absolute;
	width:3%;
	top:88%;
	left:26.7%;
}
#smallStar{
	position:absolute;
	width:100%;
	top:59%;
}

.ACTA01{-webkit-animation:ACT1 1s ease-out;animation:ACT1 1s ease-out;}
.ACTA02{-webkit-animation:ACT2 1s ease-out;animation:ACT2 1s ease-out;}
.ACTA03{-webkit-animation:ACT3 1s ease-out;animation:ACT3 1s ease-out;}
.ACTA04{-webkit-animation:ACT4 1s ease-out;animation:ACT4 1s ease-out;}
.ACTA05{-webkit-animation:ACT5 1s ease-out;animation:ACT5 1s ease-out;}
.ACTA06{-webkit-animation:ACT6 1s ease-out;animation:ACT6 1s ease-out;}
.ACTA07{-webkit-animation:ACT7 1s ease-out;animation:ACT7 1s ease-out;}
.ACTA08{-webkit-animation:ACT8 1s ease-out;animation:ACT8 1s ease-out;}

.starACT1{-webkit-animation:starACT1 2s ease-out;animation:starACT1 2s ease-out;}
.starACT2{-webkit-animation:starACT1 2.5s ease-out;animation:starACT1 2.5s ease-out;}
/*
.cloudACT{-webkit-animation:cloudACT 2s ease-out;animation:cloudACT 2s ease-out;}
*/


#Copyright{
	position:relative;
	width:100%;
	color:#ff6000;
	text-align:center;
	margin-top:20px;
	margin-bottom:40px;
	font-size:18px; 
}


.FameTable tr{
	height:31px;
	text-align:center;
}

.FameTable tr:nth-child(odd){
	background-color:#f2f2f2;
}

.FameTable img{
	margin-bottom:-6px;
	width:30px;
	height:30px;
}


.ListConter{
	width:100%;
}
.ListConterBox{
	height:31px;
	line-height:31px;
}
.ListConterBox:nth-child(odd){
	background-color:#f2f2f2;
}

.ListConterBox>div:nth-child(1){
	padding-left:10px;
	float:left;
	width:95px;
	color:#5aa2df;
}
.ListConterBox>div:nth-child(2){
	/*margin-left:10px;*/
	padding-left:10px;
	padding-right:15px;
	overflow:hidden;
	white-space:nowrap; 
	text-overflow:ellipsis;
}

@media screen and (max-width: 700px) {
.ListConterBox>div:nth-child(1){
	display:none;
} 
}
.contact{
	position:relative;
}
.contact>p{
	height:31px;
	line-height:31px;
	overflow:hidden;
	text-overflow:ellipsis;	
	padding-left:10px;
}
.contact>p:nth-child(odd){
	background-color:#f2f2f2;
}
/*-----------微信QRcode--------------*/

.contact>div{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}


@media screen and (min-width: 1200px){
.contact img{
	position:absolute;
	bottom:0px;
	right:-10px;
	width:auto;
	height:100%;
	display:block;
}	
}

@media screen and (min-width: 1000px) and (max-width: 1199px) { 
.contact img{
	position:absolute;
	bottom:4px;
	right:-6px;
	width:auto;
	height:70%;
	display:block;
}	
}

@media screen and (min-width: 501px) and (max-width: 999px) { 
.contact img{
	position:absolute;
	bottom:0px;
	right:-10px;
	width:auto;
	height:100%;
	display:block;
}
}
@media screen and (max-width: 500px) {
.contact img{
	position:absolute;
	bottom:4px;
	right:-6px;
	width:auto;
	height:70%;
	display:block;
}	
	
}
/*-----------微信QRcode--------------*/

/*========================================摩天輪動畫============================================*/
@-webkit-keyframes FerrisWheelRotate{
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}

	100%{
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
} 
@keyframes FerrisWheelRotate{
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}

	100%{
		-webkit-transform:rotate(360deg);
		transform:rotate(360deg);
	}
} 

@-webkit-keyframes everyBoxRotate{
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}

	100%{
		-webkit-transform:rotate(-360deg);
		transform:rotate(-360deg);
	}
} 
@keyframes everyBoxRotate{
	0%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}

	100%{
		-webkit-transform:rotate(-360deg);
		transform:rotate(-360deg);
	}
} 


/*========================================OPENING============================================*/

@-webkit-keyframes OPENING1{
	0%{
		-webkit-transform:translateY(-400px);
		transform:translateY(-400px);
		
		/*opacity:0;top:-50px;*/
	}

	100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
		
		/*opacity:1;top:0px;*/
	}
} 
@keyframes OPENING1{
	0%{
		-webkit-transform:translateY(-400px);
		transform:translateY(-400px);
		
		/*opacity:0;top:-50px;*/
	}

	100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
		
		/*opacity:1;top:0px;*/
	}
} 

@-webkit-keyframes mainBack{
	0%{
		opacity:0;
	}
	40%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@keyframes mainBack{
	0%{
		opacity:0;
	}
	40%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

@-webkit-keyframes ACT1{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	40%{
		-webkit-transform:translateY(10px);
		transform:translateY(10px);
	}
}
@keyframes ACT1{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	40%{
		-webkit-transform:translateY(10px);
		transform:translateY(10px);
	}
}

@-webkit-keyframes ACT2{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	70%{
		-webkit-transform:translateY(15px);
		transform:translateY(15px);
	}
}
@keyframes ACT2{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	70%{
		-webkit-transform:translateY(15px);
		transform:translateY(15px);
	}
}

@-webkit-keyframes ACT3{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(20px);
		transform:translateY(20px);
	}
}
@keyframes ACT3{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(20px);
		transform:translateY(20px);
	}
}

@-webkit-keyframes ACT4{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(25px);
		transform:translateY(25px);
	}
}
@keyframes ACT4{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(25px);
		transform:translateY(25px);
	}
}

@-webkit-keyframes ACT5{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(30px);
		transform:translateY(30px);
	}
}
@keyframes ACT5{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(30px);
		transform:translateY(30px);
	}
}

@-webkit-keyframes ACT6{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	40%{
		-webkit-transform:translateY(35px);
		transform:translateY(35px);
	}
}
@keyframes ACT6{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	40%{
		-webkit-transform:translateY(35px);
		transform:translateY(35px);
	}
}

@-webkit-keyframes ACT7{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(40px);
		transform:translateY(40px);
	}
}
@keyframes ACT7{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(40px);
		transform:translateY(40px);
	}
}

@-webkit-keyframes ACT8{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(50px);
		transform:translateY(50px);
	}
}
@keyframes ACT8{
	0%,100%{
		-webkit-transform:translateY(0px);
		transform:translateY(0px);
	}
	50%{
		-webkit-transform:translateY(50px);
		transform:translateY(50px);
	}
}

@-webkit-keyframes starACT1{
	0%{
		-webkit-transform:scale(0) rotate(-10deg);
		transform:scale(0) rotate(-10deg);
		opacity:0;
	}
	50%{
		-webkit-transform:scale(0) rotate(-10deg);
		transform:scale(0) rotate(-10deg);
		opacity:0;
	}
	60%{
		-webkit-transform:scale(1.5) rotate(10deg);
		transform:scale(1.5) rotate(10deg);
		opacity:1;
	}
	70%{
		-webkit-transform:scale(0.8) rotate(-5deg);
		transform:scale(0.8) rotate(-5deg);
		opacity:1;
	}
	80%{
		-webkit-transform:scale(1.1) rotate(0deg);
		transform:scale(1.1) rotate(0deg);
		opacity:1;
	}
	90%{
		-webkit-transform:scale(1) rotate(0deg);
		transform:scale(1) rotate(0deg);
		opacity:1;
	}
	100%{
		-webkit-transform:scale(1) rotate(0deg);
		transform:scale(1) rotate(0deg);
		opacity:1;
	}
}
@keyframes starACT1{
	0%{
		-webkit-transform:scale(0) rotate(-10deg);
		transform:scale(0) rotate(-10deg);
		opacity:0;
	}
	50%{
		-webkit-transform:scale(0) rotate(-10deg);
		transform:scale(0) rotate(-10deg);
		opacity:0;
	}
	60%{
		-webkit-transform:scale(1.5) rotate(10deg);
		transform:scale(1.5) rotate(10deg);
		opacity:1;
	}
	70%{
		-webkit-transform:scale(0.8) rotate(-5deg);
		transform:scale(0.8) rotate(-5deg);
		opacity:1;
	}
	80%{
		-webkit-transform:scale(1.1) rotate(0deg);
		transform:scale(1.1) rotate(0deg);
		opacity:1;
	}
	90%{
		-webkit-transform:scale(1) rotate(0deg);
		transform:scale(1) rotate(0deg);
		opacity:1;
	}
	100%{
		-webkit-transform:scale(1) rotate(0deg);
		transform:scale(1) rotate(0deg);
		opacity:1;
	}
}

@-webkit-keyframes cloudACT{
	0%{
		opacity:0;
	}
	20%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@keyframes cloudACT{
	0%{
		opacity:0;
	}
	20%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}



/*=======================================RWD 遊樂園=============================================*/

/*1680以上*/
@media screen and (min-width: 1680px) { 
	body{
		background-size:60px;
	}
	#amPark{
		width:1100px;
		top:0px;
		margin-top:0px;
	}
	#cloud_left{
		width:630px;
		top:0px;
		left:0px;
		display:block;
		pointer-events: none;
	}
	#cloud_right{
		width:630px;
		top:0px;
		right:0px;
		display:block;
		pointer-events: none;
	}
	#Logo{
		top:20px;
		left:3%;
		width:258px;
	}
	#star_02{
		top:13.5%;
	}

}

/*1100~1679*/
@media screen and (min-width: 1100px) and (max-width: 1679px) { 
	body{
		background-size:3.65%;
	}
	#amPark{
		width:65.5%;
		top:0px;
		margin-top:0px;
	}
	#cloud_left{
		width:37.5%;
		top:0px;
		left:0px;
		display:block;
		pointer-events: none;
	}
	#cloud_right{
		width:37.5%;
		top:0px;
		right:0px;
		display:block;
		pointer-events: none;
	}

	#Logo{
		top:15px;
		left:3%;
		width:15%;
	}

	#star_02{
		top:13.5%;
	}
}

/*最大道1099  0~1099*/
@media screen and (max-width: 1099px) {
	body{
		background-size:6%;
	}
	#amPark{
		width:100%;
		top:0px;
		margin-top:50px;
	} 
	#cloud_left{
		width:37.5%;
		top:0px;
		left:0px;
		display:none;
	}
	#cloud_right{
		width:37.5%;
		top:0px;
		right:0px;
		display:none;

	}  
	#Logo{
		top:20px;
		left:3%;
		width:129px;/*146px*/
	}
	#star_02{
		top:7%;
	}
}



/*=======================================RWD content=============================================*/

/*小於999*/
@media screen and (max-width: 999px) { 

#Content{
	position:relative;
	width:80%;
	max-width:1150px;
	margin:auto;
	margin-top:-5px;
}

#ContentBigBox{
	position:relative;
	width:100%;
	overflow:hidden;
}

.ContentBox{
	position:relative;
	width:100%;
	height:200px;
	border:2px solid #ff6000;
	background:#fff;
	float:left;
	border-radius:15px;
	overflow:hidden;
	
	background-image:url(/Images/index/border02.png);
	background-repeat:repeat-x;
	
	
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	margin-bottom:5px;
}

.CB--01{
	position:relative;
	border-bottom:4px solid #ffc6a4;
	font-size:26px;
	width:100%;
	height:53px;
	line-height:54px;
	color:#fff;
	font-weight: bold;
	margin-bottom:8px;
}
.CB--01 p{
	padding-left:15px;
}

.CB--02{
	position:relative;
	background-image:url(/Images/index/border01.png);
	margin-top:3px;
	margin-bottom:5px;
	width:100%;
	height:5px;
}
.CB--03{
	position:relative;
	width:100%;
	height:100px;
	font-size:15px;
	padding-left:15px;
	padding-right:15px;
	color:#363636;

	-webkit-box-sizing:border-box;
	box-sizing:border-box;

}

.CB--03>p{
	margin-bottom:6px;
}

.CB--03 a{
	color:#363636;
	text-decoration: none;
}
/*
.CB--03 a:before{
	content:"● ";
	color:#363636;
	
}*/
.CB--03 a:hover{
	color:#ffad2b;
}
.CB--03-2{
	white-space:nowrap;
}
.CB--04 a{
	display:block;
	position:absolute;
	bottom:6px;
	right:15px;
	font-size:25px;
	color:#ff6000;
	text-decoration: none;
}
/**/
.CB--04 a:before{
	content: "";
	display: inline-block;
	width:22px;
	height:20px;
	background-image:url(/Images/index/index_fameImg01.png);
	background-repeat:no-repeat;
	background-size:14px;
	background-position:left 9px;
	background-size:11px auto;
	
}


.CB--04 a:hover{
	color:#ffad2b;
}

}

/* 大於1000*/
@media screen and (min-width: 1000px) { 

#Content{
	position:relative;
	width:95%;
	max-width:1150px;
	margin:auto;
	margin-top:-5px;
}

#ContentBigBox{
	position:relative;
	width:100%;
	overflow:hidden;
}

.ContentBox{
	position:relative;
	width:32.65%;
	height:205px;
	border:2px solid #ff6000;
	background:#fff;
	float:left;
	border-radius:15px;
	/**/overflow:hidden;
	
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	
	background-image:url(/Images/index/border02.png);
	background-repeat:repeat-x;
}
.ContentBox:nth-child(even){
	margin-left:1%;
	margin-right:1%;
}




.CB--01{
	position:relative;
	/*padding-left:15px;*/
	/*margin-top:3px;*/
	border-bottom:4px solid #ffc6a4;
	font-size:26px;
	width:100%;
	height:53px;
	line-height:54px;
	color:#fff;
	font-weight: bold;

	
	
}

.CB--01 p{
	padding-left:15px;
}

.CB--02{
	position:relative;
	background-image:url(/Images/index/border01.png);
	margin-top:3px;
	margin-bottom:5px;
	width:100%;
	height:5px;
}
.CB--03{
	position:relative;
	width:100%;
	height:100px;
	font-size:15px;
	padding-left:10px;
	padding-right:10px;
	color:#363636;
	margin-top:10px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

.CB--03>p{
	margin-bottom:8px;
}
.CB--03 a{
	color:#363636;
	text-decoration: none;
}
/*
.CB--03 a:before{
	content:"● ";
	color:#363636;
	
}*/
.CB--03 a:hover{
	color:#ffad2b;
}
.CB--03-2{
	white-space:nowrap;
}
.CB--04 a{
	display:block;
	position:absolute;
	bottom:6px;
	right:12px;
	font-size:28px;
	color:#ff6000;
	text-decoration: none;
}
/**/
.CB--04 a:before{
	content: "";
	display: inline-block;
	width:20px;
	height:20px;
	background-image:url(/Images/index/index_fameImg01.png);
	background-repeat:no-repeat;
	background-position:left 8px;
	background-size:12px auto;
	
}

.CB--04 a:hover{
	color:#ffad2b;
}
}