<div class="loading-main" style="background-image: url(images/fly/loading-bg.png);">
	<div class="fly-box">
		<img src="images/fly/fly.png" alt="">
	</div>
	<div class="loading-bottom">
		<div class="loading-box">
			<div class="arrow-left"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
			<div class="arrow-item"></div>
		</div>
		<div class="loading-text">正在加载~~~</div>
	</div>
</div>

/* 5.7 */
.fly-banner{
	display: block;
	position: relative;
	margin-bottom: 10px;
}
.fly-banner .fly-name{
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0;
}
.fly-name img{
	width: 155px;
}
.fly-banner-link{
	position: relative;
	display: block;
}
.fly-banner .arrow{
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -11px;
	width: 22px;
	height: 22px;
    background: url(../images/fly/arrow.png) center no-repeat;
	background-size: contain;
	animation: leftAni 1s linear alternate infinite;
}

.loading-main{
	position: relative;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	overflow: hidden;
}
.fly-box{
	position: absolute;
	top: 50%;
	left: -40px;
	right: -40px;
	transform: translateY(-50%);
	font-size: 0;
}
.fly-box img{
	animation: fly 6s linear forwards;
}
@keyframes fly
{
    0% {transform:scale(.7) rotateZ(-25deg);}
	50% {transform:scale(.9) rotateZ(0deg);}
	100% {transform:scale(1) rotateZ(-10deg);}
}
.loading-bottom{
	position: absolute;
	left: 50%;
	bottom: 60px;
	transform: translateX(-50%);
}
.loading-box{
	display: flex;
	align-items: center;
	width: 310px;
	height: 31px;
	background: url(../images/fly/loading-box.png) no-repeat;
	background-size: 100% 100%;
}
.loading-text{
	text-align: center;
	color: #ffffff;
	margin-top: 15px;
}
.arrow-item{
	width: 28px;
	height: 25px;
	background: url(../images/fly/load-arrow.png) center no-repeat;
	background-size: contain;
	margin-left: -7px;
	opacity: 0;
	animation: arrowshow 2s linear forwards infinite;
}
.arrow-animated{
	animation: arrowshow .2s linear forwards alternate;
}
.arrow-left{
	
	width: 44px;
	height: 25px;
	margin-left: 6px;
	background: url(../images/fly/loading-left.png) center no-repeat;
	background-size: contain;
}

@keyframes leftAni
{
	0% {transform: translateX(-6px);}
	100% {transform: translateX(0);}
}
@keyframes arrowshow
{
	50% {opacity: 1;}
}
.arrow-item:nth-child(2){
	animation-delay: .1s;
}
.arrow-item:nth-child(3){
	animation-delay: .2s;
}
.arrow-item:nth-child(4){
	animation-delay: .3s;
}
.arrow-item:nth-child(5){
	animation-delay: .4s;
}
.arrow-item:nth-child(6){
	animation-delay: .5s;
}
.arrow-item:nth-child(7){
	animation-delay: .6s;
}
.arrow-item:nth-child(8){
	animation-delay: .7s;
}
.arrow-item:nth-child(9){
	animation-delay: .8s;
}
.arrow-item:nth-child(10){
	animation-delay: .9s;
}
.arrow-item:nth-child(11){
	animation-delay: 1s;
}
.arrow-item:nth-child(12){
	animation-delay: 1.1s;
}
.arrow-item:nth-child(13){
	animation-delay: 1.2s;
}
.arrow-item:nth-child(14){
	animation-delay: 1.3s;
}