<style>
  
  body{
     background-color:#F09999;  
	 display:block;
  }
  
   img{
      width:100%;
	  height:auto;
	  display:block;
	  }
	  
	.today{
		width:70px;
		height:auto;
		position:absolute;
		top:170px;
		left:50%;
		transform:scale(0,0); 
		
		margin-left:-40px;
		
		
		animation-name:a;
		   animation-duration:1.5s;
		   animation-delay:0.5s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards;
		
		
	}
	  
	.div1 {
	       width:500px;
		   display:block;
		   position:absolute;
		   left:50%;
		   top:50%;
		   
		   margin-left:-270px;
		   margin-top:-444px;
		   
		   
		   float:left;
		   z-index:2;

	}
	
	.div1 img{
		 animation-name:a;
		   animation-duration:2.5s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards;
		
	}
	
	.div2 img{
		
		width:400px;
		height:auto;
		
	}
	
	.dialogue1 {
	    
           position:absolute;
           top:210px; 
           left:30px; 	
           transform:scale(0,0); 		   
		   
           float:left;
           z-index:2;		   
		   
		   
		   animation-name:a;
		   animation-duration:3s;
		   animation-delay:0.2s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards;
		   
	

	    }
	
		.dialogue2 {
	       
           position:absolute;
           top:300px; 
           left:30px;
           transform:scale(0,0); 	       
		   
           float:left;
           z-index:2;		   
		   
		   animation-name:a;
		   animation-duration:3s;
		   animation-delay:1s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards;
		   

	    }
	
		
		.dialogue3 {
		   
           position:absolute;
           top:400px; 
           right:30px;
           transform:scale(0,0); 	       
		   
           float:left;
           z-index:2;		   
		   
		   animation-name:a;
		   animation-duration:3s;
		   animation-delay:2s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards;
		   

	    }
	
			.dialogue4 {
	       
           position:absolute;
           top:530px; 
           left:30px;
           transform:scale(0,0); 	       
		   
           float:left; 
           z-index:2;		   
		   
		   animation-name:a;
		   animation-duration:3s;
		   animation-delay:4.5s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards;
		   

	    }
	
	
			.dialogue5 {
	       
           position:absolute;
           top:640px; 
           left:30px;
           transform:scale(0,0); 	       
		   
           float:left; 
           z-index:2;		   
		   
		   animation-name:a;
		   animation-duration:3s;
		   animation-delay:6s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards;
		   

	}
	
	
	.div4 {
	       width:100%;
		   height:auto; 
		   opacity:0;
           position:absolute;
           right:0px;
		   background:rgba(0,0,0,0.8);
		   
		   bottom:0px;
           float:left;  
		   z-index:50;
		   text-align:center;
		   

		   animation-name:c;
		   animation-duration:1s;
		   animation-delay:8s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards; 

	}
	
	
	.div4:hover{
		
		 background:rgba(0,0,0,0.9);
	}
	.div4 h1{
		font-family:微軟正黑體;
		color:white;
		font-size:20pt;
		letter-spacing:2px;

	}
	
	.div5{
		width:100%;
		height:100%;
		background-color:black;
		position:absolute;
		top:0px;
		left:0px;
		opacity:0;
		float:left;
		z-index:20;
		
		animation-name:c1;
		   animation-duration:0.5s;
		   animation-delay:8s;
		   animation-timing-function: ease-out;
		   animation-fill-mode:forwards;
	}
	
	

	
	/*跳出動畫*/
    @keyframes a{
	
	   0% , 25%{
	   transform:scale(0,0);
	   }
	   
	   	35% , 100%{
	   transform:scale(1,1);
	   }
	   
	}
	
	/*消失動畫*/
	
	@keyframes b{
		
	   0% {
		   
	    opacity:0.7;
	   }
	   
	   100% {
		   
	   opacity:0;
	   visibility:hidden;
	   
	   }
	
	}
	
@keyframes c{
	   0%{
	   display:none;
	   opacity:0;
	   }
	   
	   100%{
		display:block;
		opacity:1;
	   }
	
	}
	
	@keyframes c1{
	   0%{
	   opacity:0;
	   }
	   
	   100%{
		opacity:0.2;
	   }
	
	}
	    
	
	@media only screen and (max-width:768px){
		
		.div1{
			width:400px;
			
		   margin-left:-200px;
		   margin-top:-350px;
			
		}
		
		.div2 img{
			
			width:300px;
			
		}
		
		.today{
			width:60px;
			top:140px;
			margin-left:-30px;
				
		}
		
		.dialogue1{
			
			top:170px; 
            left:20px; 
			
		}
		
		.dialogue2{
			
			  top:240px; 
           left:20px; 
			
		}
		
		.dialogue3{
			
			  top:310px; 
          right:20px; 
			
		}
		
		.dialogue4{
			
			  top:410px; 
           left:20px; 
			
		}
		
		.dialogue5{
			
			  top:500px; 
           left:20px; 
			
		}
		
		.dialogue6{
			
			  top:550px; 
           left:20px; 
			
		}
		
		.div4 h1{
			font-size:16pt;
		}
		
	}
	
		@media only screen and (max-width:480px){
		
		.div1{
			width:300px;
			
		   margin-left:-150px;
		   margin-top:-265px;
			
		}
		
		.div2 img{
			
			width:240px;
			
		}
		
		.today{
			width:40px;
			top:110px;
			margin-left:-20px;
				
		}
		
		.dialogue1{
			
			  top:130px; 
           left:15px; 
			
		}
		
		.dialogue2{
			
			  top:190px; 
           left:15px; 
			
		}
		
		.dialogue3{
			
			  top:250px; 
           right:15px; 
			
		}
		
		.dialogue4{
			
			  top:330px; 
           left:15px; 
			
		}
		
		.dialogue5{
			
			  top:400px; 
          left:15px; 
			
		}
		
		.dialogue6{
			
			  top:410px; 
           left:15px; 
			
		}
		
		.div4 h1{
			font-size:13pt;
		}
		
		}
		
		@media only screen and (max-width:320px){
		
		.div1{
			width:250px;
			
		   margin-left:-125px;
		   margin-top:-222px;
			
		}
		
		.div2 img{
			
			width:200px;
			
		}
		
		.today{
			width:30px;
			top:90px;
			margin-left:-15px;
		}
		
		.dialogue1{
			
			  top:110px; 
           left:10px; 
			
		}
		
		.dialogue2{
			
			  top:150px; 
           left:10px; 
			
		}
		
		.dialogue3{
			
			  top:200px; 
           right:10px; 
			
		}
		
		.dialogue4{
			
			  top:260px; 
           left:10px; 
			
		}
		
		.dialogue5{
			
			  top:320px; 
           left:10px; 
			
		}
		
		.dialogue6{
			
			  top:350px; 
           left:10px; 
			
		}
		
		.div4 h1{
			font-size:12pt;
		}
		
	}
  
  </style>