body{
   background-color:#F1E48D;
   }

img{
  width:100%;
  height:auto;
  display:block;
  }
  
.div1{
  width:1200px;
  display:block;
  position:absolute;
  left:50%;
  top:60%;
  
  margin-left:-600px;
  margin-top:-500px;
  
  float:left;
  z-index:1;

  }
 
.div2 img{
         width:180px;
		 position:relative;
		 right:50px;
		 left:50px;
		 
		 transform:scale(1,1);
		 transition:all 0.5s ease-out;
		 }

.div2 img:hover{
              transform:scale(1.3,1.3);
           }
		   
.div3 img {
   position:relative; 
   left:260px;
   top:120px;
   
   float:left;
}	

.div4 img {
   position:relative; 
   left:280px;
   top:170px;
   
    float:left;
}	

.div5 img {
   position:relative; 
   left:280px;
   top:150px;
   
    float:left;
}	

.div6 img {
   position:relative; 
   left:260px;
   top:250px;
   
    float:left;
}		

.footer {
    height:80px;
	width:100%;
	background-color:#534741;
	position:absolute;
	bottom:0;
	left:0;
	z-index:100;
	}
.footer img{
       height:50px;
	   width:auto;
	   display:block;
	   position:relative;
	   top:15px;
	   margin:auto;
	   }
	   
.sound {
	width:40px;
	height:40px;
	position:absolute;
	top:50px;
	right:260px;
	
	float:left;
	z-index:100;
}

.sound2 {
	width:40px;
	height:40px;
	display:none;
	position:absolute;
	top:50px;
	right:260px;
	
	float:left;
	z-index:100;
}

  .history {
      position: absolute;
      bottom: 15%;
      font-size: 1.5em;
      left: 45%;
      color: #fff;
  }

  .history a {
      background: #000;
      padding: 10px 10px;
      color: #fff;
      border-radius: 5px;
      text-decoration: none;
      font-family: 'Microsoft JhengHei';
      font-weight: bold;
      transition: .5s all;

      display: inline-block;
  }

  .history a:hover {
      transition: .5s all;
      background: #534741;
      transform: rotate(-7deg);
  }
	   

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

.div1{
    width:1000px;
	 margin-left:-500px;
  margin-top:-400px;
   }
   
    .div2   img{
        width:150px;  
   }
   
.div3 img{

  position:relative; 
   left:210px;
   top:100px;
   
   float:left;

 }
 
.div4 img{

  position:relative; 
   left:230px;
   top:120px;
   
   float:left;

 }
 
.div5 img{

  position:relative; 
   left:230px;
   top:140px;
   
   float:left;   

 }
 
.div6 img{

  position:relative; 
   left:220px;
   top:200px;
   
   float:left;   

}


	.footer {
    height:60px;
	width:100%;
	background-color:#534741;
	position:absolute;
	bottom:0;
	left:0;
	}


.footer img{
       height:40px;
	   width:auto;
	   display:block;
	   position:relative;
	   top:10px;
	   margin:auto;
	   }
	   
.sound{ 
display:none;
}

.sound2{
	 width:40px;
	 height:40px;
	 display:block;
	 top:30px;
	 right:30px;
	 
 }
	body{
		overflow: hidden;
	}
	.history{
		bottom: 0;
	}
}

@media only screen and (max-width:480px){
.div1{
    width:500px;
	 margin-left:-250px;
  margin-top:-250px;
   }

.div2   img{
        width:80px;  
   }
   
.div3 img{

  position:relative; 
   left:100px;
   top:50px;
   
   float:left;

 }
 
.div4 img{

  position:relative; 
   left:100px;
   top:70px;
   
   float:left;

 }
 
.div5 img{

  position:relative; 
   left:110px;
   top:70px;
   
   float:left;   

 }
 
.div6 img{

  position:relative; 
   left:100px;
   top:100px;
   
   float:left;   

 }
 
 
 	.footer {
    height:40px;
	width:100%;
	background-color:#534741;
	position:absolute;
	bottom:0;
	left:0;
	}


.footer img{
   height:30px;
   width:auto;
   display:block;
   position:relative;
   top:5px;
   margin:auto;
   }
	   
.sound{ 
display:none;
}

.sound2{
	 width:30px;
	 height:30px;
	 display:block;
	 top:30px;
	 right:30px;
	 
 }
	   
}
 


 @media only screen and (max-width:320px){
	.div1{
	    width:450px;
		 margin-left:-225px;
	  margin-top:-220px;
	   }

	.div2   img{
	        width:70px;  
	   }
	   
	.div3 img{
	  position:relative; 
	   left:100px;
	   top:50px;
	   float:left;

	 }
	 
	.div4 img{
	  position:relative; 
	   left:100px;
	   top:60px;	   
	   float:left;

	 }
	 
	.div5 img{
	  position:relative; 
	   left:105px;
	   top:60px;	   
	   float:left;
	 }
	 
	.div6 img{
  position:relative; 
   left:90px;
   top:90px;   
   float:left;
 }
	 
  	.footer {
    height:30px;
	width:100%;
	background-color:#534741;
	position:absolute;
	bottom:0;
	left:0;
	}


	.footer img{
       height:20px;
	   width:auto;
	   display:block;
	   position:relative;
	   top:5px;
	   margin:auto;
	   }
 
	.sound{ 
	display:none;
	}

	.sound2{
	 width:25px;
	 height:25px;
	 display:block;
	 top:25px;
	 right:25px;
	 
 }
}