@charset "utf-8";
/* CSS Document */
body{padding: 0; margin: 0}

.top{ width:100%; display: table; background-color: #ffeeda;}
.topMenu{ max-width: 1270px; margin: 0 auto; height: 100px;}
.topMenu ul{ padding: 0; margin: 0; float: right; margin-top: 50px;}
.topMenu ul li { padding: 0; margin: 0; list-style-type: none; float: left; margin-right: 50px;}
.topMenu ul li:nth-of-type(1) { width: 36px; HEIGHT:50px; background-image: url(../images/menu1.png);background-position: center top; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer;margin-top: -1px; }
/*
.topMenu ul li:nth-of-type(1):hover { background-image: url(../images/menu1o.png);transition:  0.3s ease; }
*/
.banner{  background-image: url(../images/bgBanner.jpg);background-color: #ffeeda; background-position: center; background-repeat: no-repeat; height: 660px; }
.banner.sc{  background-image: url(../images/bgBannerSC.jpg);}
.banner.en{  background-image: url(../images/bgBannerEN.jpg);}
.topMenu ul li:nth-of-type(2) { width: 141px; HEIGHT:35px; background-image: url(../images/menu2.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul li:nth-of-type(2):hover { background-image: url(../images/menu2o.png);transition:  0.3s ease; }

.topMenu ul li:nth-of-type(3) { width: 141px; HEIGHT:35px; background-image: url(../images/menu3.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul li:nth-of-type(3):hover { background-image: url(../images/menu3o.png);transition:  0.3s ease; }

.topMenu ul li:nth-of-type(4) {width: 141px; HEIGHT:35px; background-image: url(../images/menu4.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul li:nth-of-type(4):hover { background-image: url(../images/menu4o.png);transition:  0.3s ease; }


.topMenu ul.sc li:nth-of-type(2) { width: 141px; HEIGHT:35px; background-image: url(../images/menu2sc.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul.sc li:nth-of-type(2):hover { background-image: url(../images/menu2sco.png);transition:  0.3s ease; }

.topMenu ul.sc li:nth-of-type(3) { width: 141px; HEIGHT:35px; background-image: url(../images/menu3sc.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul.sc li:nth-of-type(3):hover { background-image: url(../images/menu3sco.png);transition:  0.3s ease; }

.topMenu ul.sc li:nth-of-type(4) {width: 141px; HEIGHT:35px; background-image: url(../images/menu4sc.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul.sc li:nth-of-type(4):hover { background-image: url(../images/menu4sco.png);transition:  0.3s ease; }



.topMenu ul.en li:nth-of-type(2) { width: 141px; HEIGHT:35px; background-image: url(../images/menu2en.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul.en li:nth-of-type(2):hover { background-image: url(../images/menu2eno.png);transition:  0.3s ease; }

.topMenu ul.en li:nth-of-type(3) { width: 141px; HEIGHT:35px; background-image: url(../images/menu3en.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul.en li:nth-of-type(3):hover { background-image: url(../images/menu3eno.png);transition:  0.3s ease; }

.topMenu ul.en li:nth-of-type(4) {width: 141px; HEIGHT:35px; background-image: url(../images/menu4en.png);background-position: center; background-repeat: no-repeat;transition: 0.3s ease;cursor: pointer; }
.topMenu ul.en li:nth-of-type(4):hover { background-image: url(../images/menu4eno.png);transition:  0.3s ease; }




.topMenu ul li ul{display: none;margin-right: -50px;margin-top: 41px;transition: 0.3s ease;}

.topMenu ul li:hover ul{	display:block;margin-top: 41px; transition: 0.3s ease;}
.topMenu ul li ul li{	margin-bottom: 5px;}
.topMenu ul li ul li:nth-of-type(1) { width: 36px!important; HEIGHT:36px!important; background-image: url(../images/langCN.png)!important;background-position: center!important; background-repeat: no-repeat!important;transition: 0.3s ease!important;cursor: pointer!important; }
.topMenu ul li ul li:nth-of-type(1):hover { background-image: url(../images/langCNo.png)!important;transition: 0.3s ease!important; } 
.topMenu ul li ul li:nth-of-type(2) { width: 36px!important; HEIGHT:36px!important; background-image: url(../images/langSC.png)!important;background-position: center!important; background-repeat: no-repeat!important;transition: 0.3s ease!important;cursor: pointer!important; } 
.topMenu ul li ul li:nth-of-type(2):hover {background-image: url(../images/langSCo.png)!important;transition: 0.3s ease!important; }
.topMenu ul li ul li:nth-of-type(3) { width: 36px!important; HEIGHT:36px!important; background-image: url(../images/langEN.png)!important;background-position: center!important; background-repeat: no-repeat!important;transition: 0.3s ease!important;cursor: pointer!important;}
.topMenu ul li ul li:nth-of-type(3):hover { background-image: url(../images/langENo.png)!important;transition: 0.3s ease!important; }

.bannerM {  display: none; }
.banner .bannerBtn{width: 100px; margin:  0 auto}
.banner .bannerBtn .btnStart{top: 500px;   left: 50%;    position: absolute;    margin-left: -475px; background-image: url(../images/btnStart.png); width: 346px; height: 70px;transition:  0.3s ease;cursor: pointer;background-repeat: no-repeat}
.banner .bannerBtn .btnStart:hover{padding-top: 450px;   left: 50%;    position: absolute;    margin-left: -475px; background-image: url(../images/btnStarto.png); width: 346px; height: 70px;transition:  0.3s ease; background-repeat: no-repeat}


.banner .bannerBtn .btnStart.sc{ background-image: url(../images/btnStartSC.png); }
.banner .bannerBtn .btnStart.sc:hover{background-image: url(../images/btnStartSCo.png); }

.banner .bannerBtn .btnStart.en{ background-image: url(../images/btnStartEN.png); }
.banner .bannerBtn .btnStart.en:hover{background-image: url(../images/btnStartENo.png); }


.bannerM .bannerBtn .btnStart.sc{ background-image: url(../images/btnStartSC.png); }
.bannerM .bannerBtn .btnStart.sc:hover{background-image: url(../images/btnStartSCo.png); }

.bannerM .bannerBtn .btnStart.en{ background-image: url(../images/btnStartEN.png); }
.bannerM .bannerBtn .btnStart.en:hover{background-image: url(../images/btnStartENo.png); }



.intro{width:100%; display: table; background-color: #731f1a;padding-top: 50px; padding-bottom: 50px; }
.intro .introInside{max-width: 850px; margin: 0 auto; text-align: center;font-family: 微軟正黑體, Verdana, Arial, Helvetica, sans-serif; color: #fff; padding-left: 25px; padding-right: 25px}
.intro .introInside .title{ font-size:50px;    font-weight: bold; }
.intro .introInside .content{font-size:17px;font-weight: 400; margin-bottom: 20px; margin-top: 20px; }
.intro .introInside .content1{font-size:17px;font-weight: 400; line-height: 24px; }

#actTitleEN .title{ font-size:42px;    font-weight: bold; }
#actTitleEN .content{font-size:16px;font-weight: 200; margin-bottom: 20px; margin-top: 20px; }
#actTitleEN .content1{font-size:16px;font-weight: 200; line-height: 28px; }

.four{ max-width: 1312px; margin: 0 auto ; background-color: #fff}
.circle{ max-width: 1100px; margin: 0 auto; height: 100px;}
.circle ul{ padding: 0; margin: 0;}
.circle ul li{ padding: 0; margin: 0;list-style-type: none; float: left; height: 249px;    background-repeat: no-repeat;
    background-position: center;
    width: 25%; }


.circle ul li:nth-of-type(1){background-image: url(../images/cicle01.png);    }
.circle ul li:nth-of-type(2){background-image: url(../images/cicle02.png);        }

.circle ul li:nth-of-type(3){background-image: url(../images/cicle03.png);   
    }

.circle ul li:nth-of-type(4){background-image: url(../images/cicle04.png);    }

.circle .ContentText{font-family: 微軟正黑體, Verdana, Arial, Helvetica, sans-serif; color: #fff; text-align: center;
    margin: 0 auto;
    margin-top: 140px; }
.circle .ContentText .title{  font-weight:bold; font-size: 25px; margin-bottom: 1px; }
.circle .ContentText .text{font-size: 14px; }

.four .TitleFour{ text-align: center; color:#731f1a;font-family: 微軟正黑體, Verdana, Arial, Helvetica, sans-serif;font-size:50px;    font-weight: bold; margin-top: 30px; margin-bottom: 15px; }
#fourEN .TitleFour{font-size:42px;  }
#fourEN .title{font-size:24px;  }

.four .grass{    position: absolute;margin-top: 70px;background-image: url(../images/grass.png); background-position: center bottom; background-repeat: no-repeat;    background-size: 100%;  }

.four .grass img.bird{ width: 100%  }
.footerBTn{      max-width: 1000px;    margin: 0 auto;       position: relative;    text-align: center;    top: 290px;background-image: url(../images/btnStart.png); width: 346px; height: 70px;transition:  0.3s ease;cursor: pointer;background-repeat: no-repeat}
.footerBTn:hover{ background-image: url(../images/btnStarto.png);transition:  0.3s ease; }

.footerBTn.sc{   background-image: url(../images/btnStartSC.png); }
.footerBTn.sc:hover{ background-image: url(../images/btnStartSCo.png);}

.footerBTn.en{   background-image: url(../images/btnStartEN.png); }
.footerBTn.en:hover{ background-image: url(../images/btnStartENo.png);}


.footer{ max-width: 1270px; margin: 0 auto;margin-top: 340px;    text-align: center; }
.footer .footerTitle{font-family: 微軟正黑體, Verdana, Arial, Helvetica, sans-serif;color:#731f1a;font-size:50px;    font-weight: bold; }

#footerTitleEN { font-size: 30px;}
.footer  .eng{ font-family: 微軟正黑體, Verdana, Arial, Helvetica, sans-serif;color:#731f1a; font-size: 20px;font-weight: bold;    margin-top: -10px;}

.footer .footerLogo{width: 400px;    display: table;    margin: 0 auto; margin-top: 20px; }
.footer .footerLogo ul {padding:0; margin:0}
.footer .footerLogo ul li:nth-of-type(1){padding:0; margin:0; float:left;list-style-type: none;margin-left:10%; margin-right:5%; width: 35%}
.footer .footerLogo ul li:nth-of-type(2){padding:0; margin:0; float:left;list-style-type: none;margin-left:5%; margin-right:10%; width: 35%}
.footer .footerLogo ul li img{ width:100%}
.copyright{ width:100%; background-color: #731f1a; color:#fff;font-family: 微軟正黑體, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; padding-top: 15px; padding-bottom: 15px; margin-top: 40px;}
.copyright.loading{ position: absolute; bottom: 0;}
.copyrightM{ display: none;}
.copyrightM.loading{ display: none;} 
#actTitleSC{display: none;}
#actTitleEN{display: none;}
#fourSC{display: none;}
#fourEN{display: none;}
#footerTitleSC{display: none;}
#footerTitleEN{display: none;}
@media screen and (max-width: 1599px) { 
	/*.banner .bannerBtn .btnStart{margin-left:16.5%;}*/
	
}




@media screen and (max-width: 1000px) { 
	.banner {
   
    background-position: -290px;
   
}
	

}
@media screen and (max-width: 640px)
{
	.banner{  display: none; }
	.bannerM {  display: grid;background-color: #ffeeda; padding: 0 ; margin: 0  }
	.bannerM img{width:100%;}
	
	.bannerM .bannerBtn {
    width: 100px;
    margin: 0 auto;
}
	
	.bannerM .bannerBtn .btnStart{    margin-top: 48%;left: 0%;
    /* left: 25%; */
    position: absolute;
    /* margin-left: -475px; */
    background-image: url(../images/btnStart.png);
    width: 100%;
    height: 5%;
    transition: 0.3s ease;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;}
.bannerM .bannerBtn .btnStart:hover{ background-image: url(../images/btnStarto.png);  transition:  0.3s ease;}
	
	.topMenu {    width: 88%; height: 80px;}
	.topMenu ul{ float:left; margin-top: 20px;	}
	.topMenu ul li{ margin-right:	11px;background-size: 100%;    width: 85px!important;}
	.topMenu ul li:nth-of-type(1){width: 26px!important;margin-top: 4px;}
		.topMenu ul li:nth-of-type(4){margin-right:	0px;}

	
	.four .TitleFour, .intro .introInside .title {
    font-size: 30px;
    font-weight: bold;
	}
	
.intro { padding-top: 35px}
	.intro .introInside .content{font-size: 	14px;}
	.intro .introInside .content1{font-size: 	14px;}
	.circle{ width:	94%}
	.circle ul li {  width: 49%;
    background-size: 100%;
    background-position: center top;
    height: auto;
    margin-bottom: 10px;
    /* min-height: 50%; */
    /* line-height: 100%; */
    padding-top: 29%;
    padding-bottom: 17%;
	}
	
	
	
	   
	
	.circle ul li:nth-of-type(1) {  margin-right: 1%;}
	.circle ul li:nth-of-type(2) {  margin-left: 1%;}
	.circle ul li:nth-of-type(3) {  margin-right: 1%;}
	.circle ul li:nth-of-type(4) {  margin-left: 1%;}
	.circle .ContentText .title {font-size: 18px;}
	.circle .ContentText .text {font-size: 12px;}
.circle .ContentText {
   
    margin-top: auto;
	
}
	.four .grass{ position: relative;    background-size: 103%;}	
	.footerBTn{ width:100%; background-size:50% ;position: static;
    background-position: center; }
	.footer { margin-top:0px}
	.footer .footerTitle{ font-size: 	30px;}
	.footer .eng{
	    font-size: 12px;
    font-weight: bold;
		margin-top: -5px;}
	.footer .footerLogo {width:200px;   }
	.footer .footerLogo ul li{ width:45%; margin-left: 2.5%;margin-right: 2.5%; }
	.footer .footerLogo ul li img { width:100%}
	.copyrightM{ margin-top: 20px; font-size: 12px; display: block; width:100%; background-color: #731f1a; color:#fff;font-family: 微軟正黑體, Verdana, Arial, Helvetica, sans-serif; text-align: center; padding-top: 15px; padding-bottom: 15px; }
	.copyright{ display: none;}
		
.copyrightM.loading{ position: absolute; bottom: 0; display: block}
	.logo {
    width: 75vw;
   
    margin-top: 25vh;
   
}#progressBar .txt {
   
   
    margin-top: 1.5vh;
}
	#progressBar{    width: 75vw;}
	#progressBar .txt img{width: 40vw;
} .centered {
   
    margin-top: -20px;
}
	.topMenu ul li ul li:nth-of-type(1) {    width: 26px!important;    HEIGHT: 26px!important; position: relative; z-index: 9999  }
	.topMenu ul li ul li:nth-of-type(2) {    width: 26px!important;    HEIGHT: 26px!important; position: relative; z-index: 9999 }
	.topMenu ul li ul li:nth-of-type(3) {    width: 26px!important;    HEIGHT: 26px!important; position: relative; z-index: 9999 }
	.topMenu ul li ul{ margin-right: 0px;}
	.topMenu ul li:hover ul {
    margin-top: 28px;
 
	}
	#actTitleEN .title {
    font-size: 28px;
    font-weight: bold;
}
	#actTitleEN .content {
    font-size: 14px;
   
    line-height: 26px;
}
	#actTitleEN .content1 {
    font-size: 14px;
   
    line-height: 24px;
}
	#fourEN .TitleFour {
    font-size:28px;
}
	#fourEN .title {
    font-size: 18px;
    line-height: 21px;
}
	#fourEN .ContentText{    margin-top: auto;}
	#footerTitleEN {
    font-size: 20px;
}
}