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

@import url("reset.css");

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

div{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

a{
	text-decoration: none;	
}


#main{
	width:100%;
	max-width:1920px;
	min-height:100%;
	
}
.mainBox{
	position:relative;
	max-width:1000px;
	margin:auto;
	overflow:hidden;
}



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

.mainLogo{
	position:relative;
	width:56.7%;
	margin:auto;
	margin-top:109px;
}
.mainLogoImg{
	position:relative;
}
.mainLogoImg>img{
	display:block;
	width:100%;
	height:auto;
}
.mainLogoImg2{
	position:absolute;
	width:24%;
	top:-8%;
	left:67%;
}
.mainLogoImg2>img{
	display:block;
	width:100%;
	height:auto;
}
.animation{
	position:relative;
	width:100%;
	margin-top:-3%;
}

.animation_kid img, .animation_boy img, .animation_girl img, .animationImg>img{
	display:block;
	width:100%;
	height:auto;
}

.animation_kid{
	position:absolute;
	width:33%;
	left:34%;
	top:0px;
}
.animation_boy{
	position:absolute;
	width:46%;
	left:0%;/*54.5%*/
	top:0px;
}
.animation_girl{
	position:absolute;
	width:33%;
	left:65%;/*5.5*/
	top:0px;
}
.js_kid_anim,.js_boy_anim,.js_girl_anim{
	position:relative;
	z-index:1;
}
.kid_shadow{
	position:absolute;
	bottom:-4%;
	left:24%;
	width:50%;
	-webkit-transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	-moz-transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	-webkit-transform:scale(0,0);
	-moz-transform:scale(0,0);
	transform:scale(0,0);
}

.kid_shadow_open{
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	transform:scale(1,1);
}
.girl_shadow{
	position:absolute;
	bottom:-3%;
	left:30%;
	width:50%;
}
.boy_shadow{
	position:absolute;
	bottom:-3%;
	left:34%;
	width:32%;
}





.copyright{
	width:100%;
	padding-top:20px;
	padding-bottom:50px;
	text-align:center;
	font-family: 'Acme', sans-serif;
	font-size:26px;
	color:#fff;
}

.smartBtn{
	position:absolute;
	top:80px;
	left:80%;
}
.smartBtn>p{
	position:absolute;
	display:block;
	top:0;
	left:0;
	width:160px;
	height:160px;
	background-image:url(/Images/index/Smart_btn_b.png);
}

.smartBtn>a{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:160px;
	height:160px;
	background-image:url(/Images/index/Smart_btn_over.png);
}
.smartBtn>a:hover{
	background-image:url(/Images/index/Smart_btn.png);
}


.Contact{
	position:relative;
	width:95%;
	max-width:833px;
	/*min-height:98px;*/
	margin:auto;
	background-color:#fff; /*#deeecf*/
	border-radius:100px; 
	overflow:hidden;
	text-align:center;
	padding-bottom:20px;
	padding-top:20px;
}

.Contact>div{
	display:inline-block;
	position:relative;
	font-size:17px;
	font-weight:700;
	color:#1f9400;
	font-family: 'Quicksand','Noto Sans TC', "微軟正黑體", sans-serif;
	line-height:25px;
	text-align: left;
	padding-left:6px;
	padding-right:6px;
}
.Contact>div:first-child{
	position:relative;
	width:170px;
	margin-right:20px;
}
.Contact>div:first-child>img{
	width:170px;
}



.Contact_cn{
	position:relative;
	width:95%;
	max-width:833px;
	/*min-height:98px;*/
	margin:auto;
	background-color:#fff; /*#deeecf*/
	border-radius:100px; 
	overflow:hidden;
	text-align:center;
	padding-bottom:5px;
	padding-top:5px;
}

.Contact_cn>div{
	position:relative;
	overflow:hidden;
	width:580px;
	margin:auto;
}

.Contact_cn>div>div{
	float:left;
}

.Contact_cn>div>div:nth-child(1)>img{
	display:block;
	width:200px;
	margin-right:50px;
	margin-top:25px;
}

.Contact_cn>div>div:nth-child(2){
	margin-right:10px;
}

.Contact_cn>div>div:nth-child(3){
	text-align:left;
	font-size: 17px;
	font-weight: 700;
	font-family: 'Quicksand','Noto Sans TC', "微軟正黑體", sans-serif;
	color:#1f9400;
	line-height:25px;
}
.Contact_cn>div>div:nth-child(3)>p:nth-child(1){
	font-size:20px;
	color:#F00;
	padding-top:6px;
}
.qrCode>img{
	display:block;
	width:110px;
	height:auto;
}


.indexLogo_cn{
	margin-top:-20px;
}
.indexLogo_cn>div{
	position:relative;
	margin:auto;
	width:272px;
}
.indexLogo_cn>div>img{
	display:block;
	width:100%;
	height:auto;
}
.copyrightCn{
	font-size:40px !important;
}

} /*大於1000-------------電腦*/




/*740~999-------------平板*/
@media screen and (min-width: 740px) and (max-width: 999px){

.mainLogo{
	position:relative;
	width:56.7%;
	margin:auto;
	margin-top:109px;
}
.mainLogoImg{
	position:relative;
}
.mainLogoImg>img{
	display:block;
	width:100%;
	height:auto;
}
.mainLogoImg2{
	position:absolute;
	width:24%;
	top:-8%;
	left:67%;
}
.mainLogoImg2>img{
	display:block;
	width:100%;
	height:auto;
}
.animation{
	position:relative;
	width:100%;
	margin-top:-3%;
}

.animation_kid img, .animation_boy img, .animation_girl img, .animationImg>img{
	display:block;
	width:100%;
	height:auto;
}

.animation_kid{
	position:absolute;
	width:33%;
	left:34%;
	top:0px;
}
.animation_boy{
	position:absolute;
	width:46%;
	left:0%;/*54.5%*/
	top:0px;
}
.animation_girl{
	position:absolute;
	width:33%;
	left:65%;/*5.5*/
	top:0px;
}
.js_kid_anim,.js_boy_anim,.js_girl_anim{
	position:relative;
	z-index:1;
}
.kid_shadow{
	position:absolute;
	bottom:-4%;
	left:24%;
	width:50%;
	-webkit-transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	-moz-transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	-webkit-transform:scale(0,0);
	-moz-transform:scale(0,0);
	transform:scale(0,0);
}

.kid_shadow_open{
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	transform:scale(1,1);
}
.girl_shadow{
	position:absolute;
	bottom:-3%;
	left:30%;
	width:50%;
}
.boy_shadow{
	position:absolute;
	bottom:-3%;
	left:34%;
	width:32%;
}



.copyright{
	width:100%;
	padding-top:20px;
	padding-bottom:50px;
	text-align:center;
	font-family: 'Acme', sans-serif;
	font-size:22px;
	color:#fff;
}

.smartBtn{
	display:none;
}



.Contact{
	position:relative;
	width:95%;
	max-width:833px;
	/*min-height:98px;*/
	margin:auto;
	background-color:#fff; /*#deeecf*/
	border-radius:100px; 
	overflow:hidden;
	text-align:center;
	padding-bottom:10px;
	padding-top:10px;
}

.Contact>div{
	display:inline-block;
	position:relative;
	font-size:18px;
	font-weight:700;
	color:#1f9400;
	font-family: 'Quicksand','Noto Sans TC', "微軟正黑體", sans-serif;
	line-height:25px;
	text-align: left;
	padding-left:5px;
	padding-right:5px;
}
.Contact>div:first-child{
	display:block;
	position:relative;
	width:130px;
	margin-right:20px;
	margin:auto;
	padding-bottom:5px;
}
.Contact>div:first-child>img{
	width:130px;
}


.Contact_cn{
	position:relative;
	width:95%;
	max-width:833px;
	/*min-height:98px;*/
	margin:auto;
	background-color:#fff; /*#deeecf*/
	border-radius:100px; 
	overflow:hidden;
	text-align:center;
	padding-bottom:5px;
	padding-top:5px;
}

.Contact_cn>div{
	position:relative;
	overflow:hidden;
	width:580px;
	margin:auto;
}

.Contact_cn>div>div{
	float:left;
}

.Contact_cn>div>div:nth-child(1)>img{
	display:block;
	width:200px;
	margin-right:50px;
	margin-top:25px;
}

.Contact_cn>div>div:nth-child(2){
	margin-right:10px;
}

.Contact_cn>div>div:nth-child(3){
	text-align:left;
	font-size: 17px;
	font-weight: 700;
	font-family: 'Quicksand','Noto Sans TC', "微軟正黑體", sans-serif;
	color:#1f9400;
	line-height:25px;
}
.Contact_cn>div>div:nth-child(3)>p:nth-child(1){
	font-size:20px;
	color:#F00;
	padding-top:6px;
}
.qrCode>img{
	display:block;
	width:110px;
	height:auto;
}


.indexLogo_cn{
	margin-top:-20px;
}
.indexLogo_cn>div{
	position:relative;
	margin:auto;
	width:172px;
}
.indexLogo_cn>div>img{
	display:block;
	width:100%;
	height:auto;
}
.copyrightCn{
	font-size:30px !important;
}


} /*740~999-------------平板*/



/*420~739--------------手機橫*/
@media screen and (min-width: 420px) and (max-width: 739px){
	
/* js控制頁面scroll消失*/	
.mainClose{ 
	overflow-y: hidden;
}
.mainScrollClose::-webkit-scrollbar
{
    width: 0px;
    height: 0px;
}
.mainScrollClose {
    width:100%;
    height:100%;
    overflow-y: auto;
}
/* js控制頁面scroll消失*/	

	
.mainLogo{
	position:relative;
	width:56.7%;
	margin:auto;
	margin-top:25px;
}
.mainLogoImg{
	position:relative;
}
.mainLogoImg>img{
	display:block;
	width:100%;
	height:auto;
}
.mainLogoImg2{
	position:absolute;
	width:24%;
	top:-8%;
	left:67%;
}
.mainLogoImg2>img{
	display:block;
	width:100%;
	height:auto;
}
.animation{
	position:relative;
	width:100%;
}

.animation_kid img, .animation_boy img, .animation_girl img, .animationImg>img{
	display:block;
	width:100%;
	height:auto;
}

.animation_kid{
	position:absolute;
	width:33%;
	left:34%;
	top:0px;
	margin-top:-5%;
}
.animation_boy{
	position:absolute;
	width:46%;
	left:0%;/*54.5%*/
	top:0px;
	margin-top:-5%;
}
.animation_girl{
	position:absolute;
	width:33%;
	left:65%;/*5.5*/
	top:0px;
	margin-top:-5%;
}
.js_kid_anim,.js_boy_anim,.js_girl_anim{
	position:relative;
	z-index:1;
}
.kid_shadow{
	position:absolute;
	bottom:-4%;
	left:24%;
	width:50%;
	-webkit-transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	-moz-transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	-webkit-transform:scale(0,0);
	-moz-transform:scale(0,0);
	transform:scale(0,0);
}

.kid_shadow_open{
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	transform:scale(1,1);
}
.girl_shadow{
	position:absolute;
	bottom:-3%;
	left:30%;
	width:50%;
}
.boy_shadow{
	position:absolute;
	bottom:-3%;
	left:34%;
	width:32%;
}




.copyright{
	width:100%;
	padding-top:20px;
	padding-bottom:50px;
	text-align:center;
	font-family: 'Acme', sans-serif;
	font-size:16px;
	color:#fff;
}

.smartBtn{
	display:none;
}
	
	
	
.Contact{
	position:relative;
	width:95%;
	max-width:833px;
	/*min-height:98px;*/
	margin:auto;
	background-color:#fff; /*#deeecf*/
	border-radius:100px; 
	overflow:hidden;
	text-align:center;
	padding-bottom:10px;
	padding-top:10px;
	margin-top:-5%;
}

.Contact>div{
	display:block;
	position:relative;
	font-size:16px;
	font-weight:700;
	color:#1f9400;
	font-family: 'Quicksand','Noto Sans TC', "微軟正黑體", sans-serif;
	line-height:20px;
	text-align: center;
	padding-left:10px;
	padding-right:10px;
}
.Contact>div:first-child{
	display:block;
	position:relative;
	width:130px;
	margin:auto;
	padding-bottom:5px;
}
.Contact>div:first-child>img{
	width:100%;
}	
	

.Contact_cn{
	position:relative;
	width:95%;
	max-width:833px;
	/*min-height:98px;*/
	margin:auto;
	background-color:#fff; /*#deeecf*/
	border-radius:100px; 
	overflow:hidden;
	text-align:center;
	padding-bottom:5px;
	padding-top:5px;
	margin-top:-5%;
}

.Contact_cn>div{
	position:relative;
	overflow:hidden;
	width:335px;
	margin:auto;
}

.Contact_cn>div>div{
	
}

.Contact_cn>div>div:nth-child(1)>img{
	display:block;
	width:100px;
	margin:auto;
	margin-bottom:5px;
	margin-top:5px;
}

.Contact_cn>div>div:nth-child(2){
	float:left;
	margin-right:10px;
	margin-left:10px;
}
.Contact_cn>div>div:nth-child(3){
	text-align:left;
	font-size: 17px;
	font-weight: 700;
	font-family: 'Quicksand','Noto Sans TC', "微軟正黑體", sans-serif;
	color:#1f9400;
	line-height:25px;
	float:left;
	
}
.Contact_cn>div>div:nth-child(3)>p:nth-child(1){
	font-size:20px;
	color:#F00;
	margin-top:5px;
}


.qrCode>img{
	display:block;
	width:110px;
	height:auto;
}

	
.indexLogo_cn{
	margin-top:-50px;
}
.indexLogo_cn>div{
	position:relative;
	margin:auto;
	width:172px;
}
.indexLogo_cn>div>img{
	display:block;
	width:100%;
	height:auto;
}
	
	
} /*420~739--------------手機橫*/



/*419-----------------手機直*/
@media screen and (max-width: 419px){
	
/* js控制頁面scroll消失*/	
.mainClose{ 
	overflow-y: hidden;
}
.mainScrollClose::-webkit-scrollbar
{
    width: 0px;
    height: 0px;
}
.mainScrollClose {
    width:100%;
    height:100%;
    overflow-y: auto;
}
/* js控制頁面scroll消失*/	

	
.mainLogo{
	position:relative;
	width:85%;
	margin:auto;
	margin-top:40px;
}
.mainLogoImg{
	position:relative;
}
.mainLogoImg>img{
	display:block;
	width:100%;
	height:auto;
}
.mainLogoImg2{
	position:absolute;
	width:24%;
	top:-8%;
	left:67%;
	display:none;
}
.mainLogoImg2>img{
	display:block;
	width:100%;
	height:auto;
}
.animation{
	position:relative;
	width:100%;
	/*height:550px;*/
}
.animationImg{
	display:none;
}

.animation_kid img, .animation_boy img, .animation_girl img, .animationImg>img{
	display:block;
	width:100%;
	height:auto;
}

.animation_kid{
	position:absolute;
	width:33%;
	left:34%;
	top:0px;
	margin-top:-5%;
	display:none;
}
.animation_boy{
	position:absolute;
	width:46%;
	left:0%;/*54.5%*/
	top:0px;
	margin-top:-5%;
	display:none;
}
.animation_girl{
	position: relative;
	width:80%;
	left:65%;/*5.5*/
	top:0px;
	margin-left:7%;
	margin-bottom:21%;
}
.js_kid_anim,.js_boy_anim,.js_girl_anim{
	position:relative;
	z-index:1;
}
.kid_shadow{
	position:absolute;
	bottom:-4%;
	left:24%;
	width:50%;
	-webkit-transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	-moz-transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	transition: all 0.3s cubic-bezier(0,1.23,.28,1.19);
	-webkit-transform:scale(0,0);
	-moz-transform:scale(0,0);
	transform:scale(0,0);
}

.kid_shadow_open{
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	transform:scale(1,1);
}
.girl_shadow{
	position:absolute;
	bottom:-3%;
	left:30%;
	width:50%;
}
.boy_shadow{
	position:absolute;
	bottom:-3%;
	left:34%;
	width:32%;
}


.copyright{
	width:100%;
	padding-top:20px;
	padding-bottom:50px;
	text-align:center;
	font-family: 'Acme', sans-serif;
	font-size:16px;
	color:#fff;
}

.smartBtn{
	display:none;
}


.Contact{
	position:relative;
	width:95%;
	max-width:833px;
	/*min-height:98px;*/
	margin:auto;
	background-color:#fff; /*#deeecf*/
	border-radius:50px; 
	overflow:hidden;
	text-align:center;
	padding-bottom:10px;
	padding-top:10px;
	margin-top:-5%;
}

.Contact>div{
	display:block;
	position:relative;
	font-size:14px;
	font-weight:700;
	color:#1f9400;
	font-family: 'Quicksand','Noto Sans TC', "微軟正黑體", sans-serif;
	line-height:20px;
	text-align: center;
	padding-left:10px;
	padding-right:10px;
}
.Contact>div:first-child{
	display:block;
	position:relative;
	width:130px;
	margin:auto;
	padding-bottom:5px;
}
.Contact>div:first-child>img{
	width:100%;
}	



.Contact_cn{
	position:relative;
	width:95%;
	max-width:833px;
	/*min-height:98px;*/
	margin:auto;
	background-color:#fff; /*#deeecf*/
	border-radius:100px; 
	overflow:hidden;
	text-align:center;
	padding-bottom:5px;
	padding-top:5px;
	margin-top:-5%;
}

.Contact_cn>div{
	position:relative;
	overflow:hidden;
	width:260px;
	margin:auto;
}

.Contact_cn>div>div{
	
}

.Contact_cn>div>div:nth-child(1)>img{
	display:block;
	width:100px;
	margin:auto;
	margin-bottom:10px;
	margin-top:5px;
}

.Contact_cn>div>div:nth-child(2){
	float:left;
	margin-right:5px;
	margin-left:0px;
}
.Contact_cn>div>div:nth-child(3){
	text-align:left;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Quicksand','Noto Sans TC', "微軟正黑體", sans-serif;
	color:#1f9400;
	line-height:20px;
	float:left;
	
}
.Contact_cn>div>div:nth-child(3)>p:nth-child(1){
	font-size:18px;
	color:#F00;
}


.qrCode>img{
	display:block;
	width:80px;
	height:auto;
}

.indexLogo_cn{
	margin-top:-20px;
}
.indexLogo_cn>div{
	position:relative;
	margin:auto;
	width:172px;
}
.indexLogo_cn>div>img{
	display:block;
	width:100%;
	height:auto;
}


} /*419-----------------手機直*/






/* 草地背景縮小RWD*/

@media screen and (min-width: 1001px){ 
#main{
	background-image:url(/Images/index/bg_4.jpg),url(/Images/index/bg_1.jpg),url(/Images/index/bg_3.png),url(/Images/index/bg_2.png);
	background-repeat:no-repeat,no-repeat, repeat-x, repeat;
	background-position:center 90px,center 90px,left top,center top;/*109*/
}
}
@media screen and (min-width: 740px) and (max-width: 1000px) { 
#main{
	background-image:url(/Images/index/bg_4.jpg),url(/Images/index/bg_1.jpg),url(/Images/index/bg_3.png),url(/Images/index/bg_2.png);
	background-repeat:no-repeat,no-repeat,repeat-x, repeat;
	background-position:center 90px,center 90px,left top,center top;
	background-size:192% auto,192% auto,5px 150px,99.2% auto;
}
}
@media screen and (min-width: 420px) and (max-width: 739px) { 
#main{
	background-image:url(/Images/index/bg_4.jpg),url(/Images/index/bg_1.jpg),url(/Images/index/bg_3.png),url(/Images/index/bg_2.png);
	background-repeat:no-repeat,no-repeat,repeat-x, repeat;
	background-position:center 25px,center 25px,left top,center top;
	background-size:192% auto,192% auto,5px 150px,99.2% auto;
}
}

@media screen and (max-width: 419px) { 
#main{
	background-image:url(/Images/index/bg_1.jpg),url(/Images/index/bg_3.png),url(/Images/index/bg_2.png);
	background-repeat:no-repeat,repeat-x, repeat;
	background-position:center 60px,left top,center top;
	background-size:250% auto,5px 150px,99.2% auto;
}
}










/* === Sprite sheet animation (boy / girl / kid) === */
.js_boy_anim, .js_girl_anim, .js_kid_anim {
	width: 100%;
	overflow: hidden;
}
.js_boy_anim { padding-bottom: 102.174%; }  /* 470/460 */
.js_girl_anim { padding-bottom: 139.394%; } /* 460/330 */
.js_kid_anim { padding-bottom: 145.455%; }  /* 480/330 */
.js_boy_anim > img,
.js_girl_anim > img,
.js_kid_anim > img {
	position: absolute !important;
	top: 0;
	left: 0;
	height: 100% !important;
	width: auto !important;
	max-width: none;
	display: block;
}