.DF_01{
	width: 500px;
	height: 440px;
	background: url(../img/d0.png)no-repeat;
	position: absolute;
	background-size:100% ;
	margin-top: 90px;
	margin-left: 30px;
}
.DF_02{
	background: url(../img/d01.png)no-repeat;
	background-size:100% ;
	position: absolute;
	animation: c1 6s infinite ease;
}
@keyframes c1{
	0%{
		transform: translate(300px,230px);
		width: 0px;
		height: 0px;
	}
	30%{
		transform: translate(380px,200px);
		width: 260px;
		height: 220px;
	}
	60%{
		transform: translate(300px,230px);
		width: 0px;
		height: 0px;
	}
	100%{
		transform: translate(300px,230px);
		width: 0px;
		height: 0px;
	}
}
.DF_03{
	width: 150px;
	height: 70px;
	background: url(../img/ap.png)no-repeat;
	background-size:100% ;
	margin-top: 380px;
	margin-left: 160px;
	position: absolute;
}
.DF_04{
	background: url(../img/ap2.png)no-repeat;
	background-size:100% ;
	position: absolute;
	animation: zz 8s infinite ease;
}
@keyframes zz{
	0%{
		transform: translate(175px,382px);
		width:116px;
		height: 70px;
	}
	10%{
		transform: translate(160px,370px);
		width:130px;
		height: 75px;
	}
	60%{
		transform: translate(160px,370px);
		width:130px;
		height: 75px;
	}
	70%{
		transform: translate(175px,382px);
		width:116px;
		height: 70px;
	}
	100%{
		transform: translate(175px,382px);
		width:116px;
		height: 60px;
	}
}
.DF_05{
	background: url(../img/ap3.png)no-repeat;
	background-size:100% ;
	position: absolute;
	animation: btn1 8s infinite ease;
}
@keyframes btn1{
	0%{
		transform: translate(50px,20px);
		width: 0px;
		height: 0px;
	}
	10%{
		transform: translate(50px,20px);
		width: 0px;
		height: 0px;
	}
	15%{
		transform: translate(0px,0px);
		width: 30px;
		height: 40px;
	}
	50%{
		transform: translate(0px,0px);
		width: 30px;
		height: 40px;
	}
	65%{
		transform: translate(50px,20px);
		width: 0px;
		height: 0px;
	}
	100%{
		transform: translate(50px,20px);
		width: 0px;
		height: 0px;
	}
}
.DF_06{
	background: url(../img/ap4.png)no-repeat;
	background-size:100% ;
	position: absolute;
	animation: btn2 8s infinite ease;
}
@keyframes btn2{
	0%{
		transform: translate(80px,20px);
		width: 0px;
		height: 0px;
	}
	10%{
		transform: translate(80px,20px);
		width: 0px;
		height: 0px;
	}
	15%{
		transform: translate(50px,40px);
		width: 30px;
		height: 40px;
	}
	50%{
		transform: translate(50px,40px);
		width: 30px;
		height: 40px;
	}
	65%{
		transform: translate(80px,20px);
		width: 0px;
		height: 0px;
	}
	100%{
		transform: translate(80px,20px);
		width: 0px;
		height: 0px;
	}
}
.DF_07{
	background: url(../img/ap5.png)no-repeat;
	background-size:100% ;
	position: absolute;
	animation: btn3 8s infinite ease;
}
@keyframes btn3{
	0%{
		transform: translate(90px,20px);
		width: 0px;
		height: 0px;
	}
	10%{
		transform: translate(90px,20px);
		width: 0px;
		height: 0px;
	}
	15%{
		transform: translate(70px,-10px);
		width: 30px;
		height: 40px;
	}
	50%{
		transform: translate(70px,-10px);
		width: 30px;
		height: 40px;
	}
	65%{
		transform: translate(90px,20px);
		width: 0px;
		height: 0px;
	}
	100%{
		transform: translate(90px,20px);
		width: 0px;
		height: 0px;
	}
}
.DF_08{
	background: url(../img/ap6.png)no-repeat;
	background-size:100% ;
	position: absolute;
	animation: btn4 8s infinite ease;
}
@keyframes btn4{
	0%{
		transform: translate(50px,20px);
		width: 0px;
		height: 0px;
	}
	10%{
		transform: translate(50px,20px);
		width: 0px;
		height: 0px;
	}
	15%{
		transform: translate(0px,40px);
		width: 30px;
		height: 40px;
	}
	50%{
		transform: translate(0px,40px);
		width: 30px;
		height: 40px;
	}
	65%{
		transform: translate(50px,20px);
		width: 0px;
		height: 0px;
	}
	100%{
		transform: translate(50px,20px);
		width: 0px;
		height: 0px;
	}
}
.b01{
	animation: b1 4s ease;
}
@keyframes b1{
	0%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	15%{
		transform: translate(0px,0px);
	}
	20%{
		transform: translate(0px,15px);
	}
	28%{
		transform: translate(0px,0px);
	}
	100%{
		transform: translate(0px,0px);
	}
}
.b02{
	animation: b2 4s ease;
}
@keyframes b2{
	0%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	15%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	30%{
		transform: translate(0px,0px);
	}
	35%{
		transform: translate(0px,15px);
	}
	43%{
		transform: translate(0px,0px);
	}
	100%{
		transform: translate(0px,0px);
	}
}
.b03{
	animation: b3 4s ease;
}
@keyframes b3{
	0%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	30%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	45%{
		transform: translate(0px,0px);
	}
	50%{
		transform: translate(0px,15px);
	}
	58%{
		transform: translate(0px,0px);
	}
	100%{
		transform: translate(0px,0px);
	}
}
.b04{
	animation: b4 4s ease;
}
@keyframes b4{
	0%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	45%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	60%{
		transform: translate(0px,0px);
	}
	65%{
		transform: translate(0px,13px);
	}
	73%{
		transform: translate(0px,0px);
	}
	100%{
		transform: translate(0px,0px);
	}
}
.b05{
	animation: b5 4s ease;
}
@keyframes b5{
	0%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	60%{
		transform: translate(0px,500px);
		opacity: 0;
	}
	75%{
		transform: translate(0px,0px);
	}
	78%{
		transform: translate(0px,10px);
	}
	85%{
		transform: translate(0px,0px);
	}
	100%{
		transform: translate(0px,0px);
	}
}
.L_text_1{
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 2.2rem;
	color: white;
	padding-top:100px ;
}
.L_text_2{
	color: red;
	font-size: 2.0rem;
	font-weight: initial;
	padding-bottom: 50px;
}
.Lz{
	line-height: 30px;
	font-size: 0.9rem;
	color: white;
}
.APP_photo{
	width: 400px;
	height: 500px;
	background: url(../img/app_1.png)no-repeat;
	background-position:center center ;
	background-size:100% ;
	margin: auto;
}
.pc_photo{
	width: 500px;
	height: 500px;
	background: url(../img/pc.png)no-repeat;
	background-size:100% ;
	background-position:center center;
	margin: auto;
}
.L1,.L2{
	width: 1280px;
}
.L2{
	position: absolute;
	animation: ap1 10s infinite linear;
}
@keyframes ap1{
	0%{
		transform: translate(0px,0px);
		opacity: 1;
	}
	7%{
		transform: translate(0px,0px);
		opacity: 0;
	}
	50%{
		transform: translate(0px,0px);
		opacity: 0;
	}
	57%{
		transform: translate(0px,0px);
		opacity: 1;
	}
	100%{
		transform: translate(0px,0px);
		opacity: 1;
	}
}
.L1{
	position: absolute;
	animation: ap2 10s infinite linear;
}
@keyframes ap2{
	0%{
		transform: translate(0px,0px);
		opacity: 0;
	}
	7%{
		transform: translate(0px,0px);
		opacity: 1;
	}
	50%{
		transform: translate(0px,0px);
		opacity: 1;
	}
	57%{
		transform: translate(0px,0px);
		opacity: 0;
	}
	100%{
		transform: translate(0px,0px);
		opacity: 0;
	}
}
.LX{
	width: 100%;
	height: 500px;
	position: absolute;
	z-index: 1;
}
.Lx_1{
	width: 50px;
	height: 50px;
	background: url(../img/LX.png)no-repeat;
	background-size:100% ;
	animation: LX 6s infinite ease;
}
@keyframes LX{
	0%{
		transform: translate(300px,0px);
		opacity: 0.6;
	}
	30%{
		transform: translate(0px,300px);
		opacity: 0;
	}
	100%{
		transform: translate(0px,300px);
		opacity: 0;
	}
}
.Lx_2{
	width: 60px;
	height: 60px;
	background: url(../img/LX.png)no-repeat;
	background-size:100% ;
	animation: LX2 4s infinite linear;
	transition-delay:3s;
}
@keyframes LX2{
	0%{
		transform: translate(900px,0px);
		opacity: 0.4;
	}
	10%{
		transform: translate(800px,100px);
		opacity: 0;
	}
	100%{
		transform: translate(800px,100px);
		opacity: 0;
	}
}
.Lx_3{
	width: 40px;
	height: 40px;
	background: url(../img/LX.png)no-repeat;
	background-size:100% ;
	animation: LX3 10s infinite linear;
	transition-delay:1s;
}
@keyframes LX3{
	0%{
		transform: translate(1300px,0px);
		opacity: 0.5;
	}
	20%{
		transform: translate(900px,400px);
		opacity: 0;
	}
	100%{
		transform: translate(900px,400px);
		opacity: 0;
	}
}
.XQ_all{
	width: 100%;
	height: 1500px;
}
.now_details{
	width: 1280px;
	height: auto;
	margin: auto;
	margin-top: 60px;
}
.details_01{
	margin: auto;
	margin-top: 20px;
}
.tu1{
	width: 60%;
	height: 350px;
	background: url(../img/01.jpg)no-repeat;
	background-size:70% ;
	background-position:center center;
	float: left;
}
.zi1{
	width: 40%;
	height: 350px;
	line-height: 300px;
	font-size: 2.0rem;
	font-weight: bold;
	color:black ;
	text-align: center;
	float: left;
}
.tu2{
	width: 60%;
	height: 350px;
	background: url(../img/02.jpg)no-repeat;
	background-size:85% ;
	background-position:center center;
	float: right;
}
.zi2{
	width: 40%;
	height: 350px;
	line-height: 300px;
	font-size: 2.0rem;
	font-weight: bold;
	color:black ;
	text-align: center;
	float: left;
}
.tu3{
	width: 60%;
	height: 350px;
	background: url(../img/03.jpg)no-repeat;
	background-size:85% ;
	background-position:center center;
	float: left;
}
.zi3{
	width: 40%;
	height: 350px;
	line-height: 300px;
	font-size: 2.0rem;
	font-weight: bold;
	color:black ;
	text-align: center;
	float: left;
}
.tu4{
	width: 60%;
	height: 350px;
	background: url(../img/04.jpg)no-repeat;
	background-size:85% ;
	background-position:center center;
	float: right;
}
.zi4{
	width: 40%;
	height: 350px;
	line-height: 300px;
	font-size: 2.0rem;
	font-weight: bold;
	color:black ;
	text-align: center;
	float: left;
}