@charset "utf-8";

.wrapper{
	position:relative;
	width:100%; 
	height:100vh;
	background:url(../images/welcome.jpg) no-repeat center;
	background-size:cover;
	text-align:center;
}

.logo{
	position:absolute;
	z-index:10;
	top:0px;
	left:1%;
	max-width:530px;
	display:none;
}

.slogan-company{
	position:absolute;
	z-index:10;
	bottom:10px;
	left:1%;
	max-width:300px;	
}

.slogan-pure{
	position:absolute;
	z-index:10;
	top:50%;
	right:18%;
	margin-top:-50px;
	max-width:350px;	
}


.slogan-concept{
	position:absolute;
	z-index:10;
	bottom:10px;
	right:5%;
	max-width:450px;	
}

.logo img , .slogan-company img , .slogan-pure img , .slogan-concept img{ width:100%; height:auto; }


.enterpage-btn{
	position:absolute;
	z-index:10;
	top:40px;
	right:5%;
	display:inline-block;
	font-size:2em;
	letter-spacing:0px;
	text-align:center;
	
	animation:goto 2s linear infinite;
	-moz-animation:goto 2s linear infinite;
	-webkit-animation:goto 2s linear infinite;
	-o-animation:goto 2s linear infinite;
}

.enterpage-btn a{ color:#000; }
.enterpage-btn a:hover{  text-shadow:1px 1px 1px #000; }



@media (max-width:1024px) {
	
	.slogan-pure , .slogan-concept , .enterpage-btn{ right:1%; }
	.slogan-pure{ max-width:300px; }
	.slogan-concept{ max-width:400px; }
}

@media (max-width:768px) {
	.logo , .enterpage-btn{ 
		/*position:relative; 
		top:auto;
		bottom:auto;
		left:auto; 
		right:auto; 
		margin-left:auto; 
		margin-right:auto;
		margin-top:0px;*/
	}
	
	.logo{ max-width:400px;display:block;	}
	.enterpage-btn{ margin-top:80px; padding-left:25px;}
	
	.slogan-pure{display:none;top:auto; bottom:70px; right:50%; margin-top:0px; margin-right:-120px; max-width:240px; }
	.slogan-company{ left:50%; bottom:2px; max-width:200px; margin-left:-100px;}
	.slogan-concept{ display:none;}
}	

@media (max-width:768px) and (orientation: landscape) {
	.enterpage-btn{ margin-top:30px;}
	.slogan-pure{ display:none; }
}

@media (max-width:640px){
	.wrapper{
		background:url(../images/welcome.jpg) no-repeat center;
		background-size:cover;
	}
	.enterpage-btn a{
		text-shadow:1px 1px 1px #000;
	}
}

/* <<==========================================>> */

@keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}

/* Firefox */
@-moz-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}


/* Safari和Chrome */
@-webkit-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}

/* Opera */
@-o-keyframes goto {
  0% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  5% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  10% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  15% {
	-moz-transform:translateX(-3px);
	-webkit-transform:translateX(-3px);
	-o-transform:translateX(-3px);
	-ms-transform:translateX(-3px);
	transform:translateX(-3px);
  }
  20% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  25% {
	-moz-transform:translateX(3px);
	-webkit-transform:translateX(3px);
	-o-transform:translateX(3px);
	-ms-transform:translateX(3px);
	transform:translateX(3px);
  }
  30% {
	-moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
  
  100% {
    -moz-transform:translateX(0px);
	-webkit-transform:translateX(0px);
	-o-transform:translateX(0px);
	-ms-transform:translateX(0px);
	transform:translateX(0px);
  }
}