body {
	font-family:'Arial','微軟正黑體';
	background-size: 100% 110%;
	background-image: url('../images/b.jpg');
	background-repeat: no-repeat; 
	background-position: center center;
}

.page{
	width: 800px;
	height: 600px;
	background-size: 100% 100%;
	background-image: url('../images/index.png');
	background-repeat: no-repeat; 
	background-position: center center;
	margin: 0 auto;
	box-shadow: 0 0 10px black;
}

.box{
	background-image: url('../images/bb.jpg');
	width: 800px;
	height: 600px;
	margin: 0 auto;
	-webkit-animation: 15s double infinite;
	animation: 15s double infinite;
}

@-webkit-keyframes double {
  from{
	background-image: url('../images/bb.jpg');
  }
  
  25% {
	background-image: url('../images/aa.jpg');
  }
  
  50% {
	background-image: url('../images/cc.jpg');
  }
  
  75% {
	background-image: url('../images/dd.jpg');
  }
  to {
	background-image: url('../images/bb.jpg');
  }
}


@keyframes double {
  from{
	background-image: url('../images/bb.jpg');
  }
  
  25% {
	background-image: url('../images/aa.jpg');
  }
  
  50% {
	background-image: url('../images/cc.jpg');
  }
  
  75% {
	background-image: url('../images/dd.jpg');
  }
  to {
	background-image: url('../images/bb.jpg');
  }
}

.logo{
	position: relative;
	top: 50%;
	left: 50%;
	margin-top: -77px;
	margin-left: -181px;
}

.enter{
	border: 0px solid gray;
	margin: 10px auto;
	text-align: center;
}

.enter img{	
	border-radius: 10px;	
}

.enter img:hover{
	box-shadow: 5px 5px 5px gray;	
}