.htmleaf-content{
	display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width:100%;
  height:100%;
	
}
p {
  margin: 0;
  padding: 0;
  line-height: 1.6;
 
  color: white;
  text-align: center;
  font-weight:bold;
}

@media screen and (max-width: 768px) {
  html{ 
  font-size:12px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1280px) {
  html{ 
  font-size:10px;
  }
}
@media screen and (min-width: 1281px){
  html{ 
  font-size:16px;
  }
}
.ex1 {
  opacity: 1;
  font-size: 2.6rem;
  perspective: 200px;
  text-shadow:0 0 8px #ffffef;
  margin-bottom:.2rem;
   letter-spacing: .6rem;
   
}
.ex1 span {
	position:relative;
	display:inline-block;
	animation-name : ani1;
	animation-duration : 6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
}
.ex1 span:nth-child(2){
	animation-delay :.2s;
}
.ex1 span:nth-child(3){
	animation-delay :.4s;
}
.ex1 span:nth-child(4){
	animation-delay :.6s;
}
.ex1 span:nth-child(5){
	animation-delay :.8s;
}
.ex1 span:nth-child(6){
	animation-delay :1s;
}
.ex2 {
  width:10rem;
  height:2.6rem;
  line-height:2.6rem;
  color:white;
  background-color:#ba3a34;
  border-radius:10px;
  font-size: 1.5rem;
  perspective: 200px;
   letter-spacing: .3rem;
   animation-name : ani;
	animation-duration : 6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
}
.ex3{
	height:2.6rem;
	  line-height:2.6rem;
	  font-size: .9rem;
	  animation-name : ani;
	animation-duration : 6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
	font-family:sans-serif;
	text-shadow:0 0 8px #ffffef;
}
.exnext{
	position:absolute;
	right:2%;
	width:16%;
	height:20%;
	display:flex;
	justify-content:space-between;
}
.exnext span{
	width:24%;
	height:100%;
	background:url(../imgs/next.png) no-repeat;
	background-size:contain;
	background-position:center;
	animation-name : aniNext;
	animation-duration : 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count:infinite;
	
}
.exnext span:nth-child(2){
	animation-delay :.5s;
}
.exnext span:nth-child(3){
	animation-delay :1s;
}
.exnext span:nth-child(4){
	animation-delay :1.5s;
}

@keyframes ani1{
	0% {
		transform: rotateY(-70deg);
		opacity:0;
	}
	25% {
		transform: rotateY(0);
		opacity:1;
	}
	75% {
		transform: rotateY(0);
		opacity:1;
	}
	100% {
		transform: rotateY(-70deg);
		opacity:0;
	}
}
@keyframes ani{
	0% {
		opacity:0;
	}
	40% {
		opacity:1;
	}
	80% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes aniNext{
	0% {
		opacity:.3;
	}
	20%{
		opacity:.3;
	}
	50% {
		opacity:1;
	}
	80%{
		opacity:.3;
	}
	100% {
		opacity:.3;
	}
}