<style>
body{
	
}

body{
	background: linear-gradient(#965166,#854055);
	overflow:hidden;
	height:100%;
	font-family:"Heiti TC";
	font-family:"微軟正黑體";
	color:white;
}

::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
margin:80px 0 5px 0;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 4px;
border-radius: 4px;
background: rgb(255,255,255,0.5);
}

h1{
  font-size:22pt;
  text-align:center;
  letter-spacing:3px;
  }
  
  h2{
  font-weight:normal;
  font-size:14pt;
  line-height:30px;
  letter-spacing:2px;
   padding-right:5%;
    padding-left:5%;
  }
  
  h3{

  font-size:20pt;
  text-align:center;
  line-height:30px;
  letter-spacing:2px;
  }
  
  
   p{
  font-size:12pt;
  line-height:22px;
  text-align:right;
  letter-spacing:1.5px;
  padding-right:5%;
  }

img{
	width:100%;
	height:auto;
}

.all{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	background-image:url('./img/bg.png');
}

.title{
	width:110px;
	position:absolute;
	top:50px;
	left:50%;
	float:left;
	
	animation-name:title;
	animation-duration:1s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

.text{
	width:350px;
	position:absolute;
	top:160px;
	left:35%;
	float:left;
	opacity:0;
	
	animation-name:text;
	animation-delay:0.5s;
	animation-duration:3s;
	animation-timing-function:linear;
	animation-fill-mode:forwards;
}

.seal{
	width:350px;
	position:absolute;
	left:35%;
	top:60%;
	float:left;
}

.btn{
	width:120px;
	position:absolute;
	top:70%;
	left:48%;
	float:left;
	cursor: pointer;
	transition: 0.5s;
}

.logo{
	width:180px;
	position:absolute;
	left:50%;
	margin-left:-90px;
	bottom:20px;
	
}


.btn:hover{
	transform:scale(1.2,1.2);
}

@keyframes title{
	0%{
		top:-800px;
	}
	80%{
		top:100px;
	}
	100%{
		top:70px;
	}
}

@keyframes text{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}

@media only screen and (max-width:1024px){
	
.title{
	width:150px;
}

.text{
	width:400px;
	top:300px;
	left:25%;
	
}

.seal{
	width:400px;
	left:25%;
}

.btn{
	width:150px;
	top:75%;
}


}

@media only screen and (max-width:768px){
	
.title{
	width:120px;
}

.text{
	width:350px;
	top:230px;
	left:18%;
	
}

.seal{
	width:400px;
	left:18%;
}

.btn{
	width:120px;
	top:78%;
}


}

@media only screen and (max-width:480px){
	
.title{
	width:90px;
}

.text{
	width:250px;
	top:150px;
	left:12%;
	
}

.seal{
	width:250px;
	top:55%;
	left:12%;
}

.btn{
	width:80px;
	top:75%;
}

.logo{
	width:150px;
	margin-left:-75px;
	
}

}

@media only screen and (max-width:375px){
	
.title{
	width:80px;
}

.text{
	width:230px;
	top:100px;
	left:12%;
	
}
	
.seal{
	width:250px;
	left:10%;
}

.logo{
	bottom:10px;
	
}

	
@keyframes title{
	0%{
		top:-800px;
	}
	80%{
		top:35px;
	}
	100%{
		top:15px;
	}
}

}

@media only screen and (max-width:320px){

.title{
	width:70px;
}

.text{
	width:200px;
	top:120px;
}

.seal{
	width:250px;
	left:5%;
}
.btn{
	top:75%;
}
	
}



</style>