@charset "utf-8";
/*=========================== Common ============================*/

html, body{
  height: 100%;
  overflow:hidden;
}
body { 
  background-image:url(../../images/index_bg.jpg) ;
  background-position: center center;
  background-repeat:  no-repeat;
  background-attachment: fixed;
  background-size:  cover;
  background-color: #999;
}
div, body{
  margin: 0;
  padding: 0;
}
#wrapper {
  position:relative;
  height: 100%; 
  width: 100%; 
}
.box {
	width: 80%;
	height: 300px;
	position:absolute;
	left:50%;
	top:55%;
	margin-top:-170px;
	margin-left:-40%;
	text-align:center;
	
}
.index_logo{
	max-width:160px;
	width:40%;
	display:none;
	animation: 1s ease-out 0s 1 dropHeader;
}
.index_title{
	color:#FFF;
	font-size:36px;
	letter-spacing:1px;
	padding:20px;
	font-size: 4.75vw; 		
	display:none;	
	animation: 2s ease-out 0s 1 dropHeader;	
}
.index_solgan{
	color:#FFF;
	font-size:30px;
	letter-spacing:1px;
	padding:20px;	
	font-size: 3.75vw;
	line-height:4.0vw; 
	display:none;	
	animation: 2s ease-out 0s 1 dropHeader;	
}


/*=========================== New Earth ============================*/

.wrapper_circle, .inner_circle {
  position: absolute;
  max-width: 1000px;
  right:0;
  left:0;
  
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  margin: 0 auto;
}

.inner_circle img{ 
	width:100%;
}

.wrapper_circle {

 	bottom:35%; 
  	max-width:1000px;

    -webkit-animation-duration: 2.5s;
    -webkit-animation-play-state: paused;
    -webkit-animation-direction: reverse;
    animation-duration: 2.5s;
    animation-play-state: paused;
    animation-direction: reverse;
	
}
.wrapper_circle:hover {
	/*
	//圓圈跑動效果
    -webkit-animation-play-state: running;
    animation-play-state: running;
	*/
}
.inner_circle {
    opacity:0;
    -webkit-animation-duration: 10.5s;
    animation-duration: 10.5s;
}
@keyframes rotate {
  from { transform: rotate(0deg);  }
  to {    transform: rotate(360deg);  }
}    
@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg);  }
  to {    -webkit-transform: rotate(360deg);  }
}    

@media screen and (max-width: 768px) {

.wrapper_circle, .inner_circle {

  right:auto;
  left:auto;

}

.inner_circle img{ 
	width:auto;
}

}

@media screen and (max-width: 480px) {



}


/*=========================== Common RWD ============================*/

@media screen and (min-width: 768px) {
  .index_title {
     font-size: 36px;
  }
  .index_solgan {
     font-size: 30px;
  }  
}
/*Animation*/
@keyframes dropHeader {  0% {
 transform: translateY(-15%);
}
 100% {
 transform: translateY(0);
}
}

/*=========================== Main Site ============================*/

#wrapper_main{
	display:none;
	position:absolute;
	top:0;
	left:0;
  	height: 100%; 
  	width: 100%;
	background:url(../../images/index_bg2.jpg);
	background-size: 100% 100%;
}
#wrapper_main .square{
	width:25%;
	height:100%;
	float:left;	
	display:flex; 
	align-items:center; 
	justify-content: center;
	border:1px solid #a0b5c3;
	box-sizing:border-box;
	cursor:hand;
	cursor:pointer;
	overflow:hidden;	
}
#wrapper_main .square_text{
	box-sizing:border-box;
	padding:0 10%;
	color:#feffff;
	letter-spacing:1px;
	
}
#wrapper_main .square_title{
	text-align:center;	font-size: 1.95vw; padding:10px 0; border-bottom:1px solid #fff;	
}
#wrapper_main .square_content{ 	font-size: 0.95vw; text-align:justify; padding:20px 0; line-height:25px; height:50px;	
}

.home_btn{ position:absolute; left:0; right:0; margin:0 auto; bottom:0; text-align:center; }
	
@media screen and (max-width: 768px) {
	
    #wrapper_main .square{ width:50%; height:50%; }
	#wrapper_main .square_title{ font-size:20px; } 	
	#wrapper_main .square_content{ font-size:12px; }  
}

@media screen and (max-width: 480px) {
	
	#wrapper_main .square_content{ display:none; } 
	/*
	#square1{ background:url(../../images/square1.jpg); background-position:center; }
	#square2{ background:url(../../images/square2.jpg); background-position:center; }
	#square3{ background:url(../../images/square3.jpg); background-position:center; }
	#square4{ background:url(../../images/square4.jpg); background-position:center; }		
	*/
}
	
	
/*=========================== 晃動效果 ============================*/
	
	
/*------css3å‹•ç•«--------*/
@-webkit-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:1;}
  100% {bottom:20px; opacity:1;}
}
@-moz-keyframes upDown {
  0%     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:1;}
  100% {bottom:20px; opacity:1;}
}
@keyframes upDown {
  from     {bottom:20px; opacity:1;}
  50%   {bottom:28px; opacity:1;}
  to {bottom:20px; opacity:1;}
}
.upDown{
	-webkit-animation: upDown ease-out 1s infinite;
	-moz-animation: upDown ease-out 1s infinite;
	-o-animation: upDown ease-out 1s infinite;
	animation: upDown ease-out 1s infinite;}