*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.header_nav{
	z-index: 99999;
	width: 100%;
	position: fixed;
}
.fixed-bg{
	background: green;
}
.wrap{ 
	width: 100vw;
}
.index{
	width: 100%;
	height: auto;
	position: relative;
}

.index img{
	width: 100%;
	z-index: -1;
}
.index-title{
	width: 20vw;
	position: absolute;
	left: 50%;
	margin-left: -10vw;
	top: 15vw;
	animation: title linear 1.5s;
}
.index-titles{
	width: 70vw;
	position: absolute;
	left: 50%;
	margin-left: -35vw;
	top: 24vw;
	animation: titles linear 1.5s;
	z-index: 9999;
}

.index-titless{
	width: 50vw;
	position: absolute;
	left: 50%;
	margin-left: -25vw;
	top: 35vw;
	animation: titless linear 1.5s;
	z-index: 9999;
}


@keyframes title{
	from{
		opacity: 0;
		top: 0;
	}
	to{
		opacity: 1;
		top: 15vw;
	}
}
@keyframes titles{
	from{
		opacity: 0;
		top: 100%;
	}
	to{
		opacity: 1;
		top: 24vw;
	}
}
@keyframes titless{
	from{
		opacity: 0;
		top: 100%;
	}
	to{
		opacity: 1;
		top: 35vw;
	}
}
.rains{
	width: 100%;
}
.rains img{
	display: block;
	z-index: 999;
}
.rains .img1{
	width: 10vw;
	position: absolute;
	left: 10vw;
	top: 10vw;
	animation:img1 1.5s linear;
}
@keyframes img1{
	0%{
		left: 0;
		top: 20vw;
	}
	100%{
		left: 10vw;
		top: 10vw;
	}
}
.rains .img2{
	width: 10vw;
	position: absolute;
	left: 30vw;top: 5vw;
	animation:img2 1.5s linear;
}
@keyframes img2{
	0%{
		left:60vw;
		top: -10vw;
	}
	100%{
		left: 30vw;
		top: 5vw;
	}
}

.rains .img3{
	width: 15vw;
	position: absolute;
	left: 70vw;top: 10vw;
	animation:img3 1.5s linear;
}
@keyframes img3{
	0%{
		left:100vw;
		top: -10vw;
	}
	100%{
		left: 70vw;
		top: 10vw;
	}
}

.rains .img4{
	width: 5vw;
	position: absolute;
	right:30vw;top: 8vw;
	animation:img4 1.5s linear;
}
@keyframes img4{
	0%{
		right:60vw;
		top: 28vw;
	}
	100%{
		right: 30vw;
		top: 8vw;
	}
}
.house_box{
	width: 100%;
	position: relative;
	background: #f2ffeb;
	padding: 5vw;
}
.house_box>img{
	width: 100%;
	height: auto;
}
.left{
	width: 50vw;
	position: absolute;
	left: 0;
	top: 0;
	animation: left 1s linear;
}
.left img{
	width: 100%;
	height: auto;
}
.right{
	width: 50vw;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
	padding: 5vw;
	margin-right: 3vw;
	animation: right 1s linear;
}
.right_a{
	width: 10vw;
}
.right_b{
	width: 20vw;
	margin-top: -2vw;
}
.right_c{
	width: 45vw;
}
@keyframes left{
	0%{
		left: -50vw;
	}
	100%{
		left: 0;
	}
}
@keyframes right{
	0%{
		right:-50vw;
	}
	100%{
		right:0;
	}
}

.serve_object{
	width: 100%;
	height: auto;
	padding:10px 0;
}
.serve_head{
	width: 100%;
	height: 15vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	animation:head 1s linear;
}
.serve_head img{
	width: 8vw;
}
.serve_main{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding:10px 30px;
	animation: serve_main 2s linear;
}

.serve_main img{
	width: 23vw;
	height: 19vw;
}
.serve_main_img0{
	animation: serve_main_img1 1s linear;
}
.serve_main_img1{
	animation: serve_main_img1 1.5s linear;
}
.serve_main_img2{
	animation: serve_main_img1 2s linear;
}
.serve_main_img3{
	animation: serve_main_img1 2.5s linear;
}
@keyframes serve_main_img1{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.serve_main img:hover{
	transform:scale(1.2);
	transition: all .5s linear;
}
.practice{
	width: 100%;
	height: auto;
	position: relative;
}
.practice>img{
	width: 100%;
	height: 53vw;
	z-index: -1;
}
.practice_head{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 3vw;
	position: absolute;
	top: 0;
	animation: head 1s linear;
}
.practice_head img{
	width: 8vw;
}
.zuofa{
	width: 4.5vw !important;
}
.car_left{
	width: 28vw;
	position: absolute;
	top: 17vw;
	left: 10vw;
}
.car_left div{
	width: 48vw;
	height: 5vw;
	display: flex;
	justify-content: space-between;
}
.car_list_a{
	position: absolute;
	top: 1vw;
	left: 20vw;
	animation: cara 2s linear;
}
@keyframes cara{
	0%{
		opacity: 0;
		left: 0;
	}
	100%{
		opacity: 1;
		left: 20vw;
	}
}
.car_list_b{
	position: absolute;
	top: 8vw;
	left: 25vw;
	animation: carb 2s linear;
}
@keyframes carb{
	0%{
		opacity: 0;
		left: 0;
	}
	100%{
		opacity: 1;
		left: 25vw;
	}
}
.car_list_c{
	position: absolute;
	top: 15vw;
	left: 25vw;
	animation: carc 2s linear;
}
@keyframes carc{
	0%{
		opacity: 0;
		left: 0;
	}
	100%{
		opacity: 1;
		left: 25vw;
	}
}
.car_list_d{
	position: absolute;
	bottom: 1vw;
	left: 20vw;
	animation:card 2s linear;
}
@keyframes card{
	0%{
		opacity: 0;
		left: 0;
	}
	100%{
		opacity: 1;
		left: 20vw;
	}
}
.car_logo{
	width: 70% !important;
	position: absolute;
	left: 15%;
	top: 15%;
	animation: car 2s linear;
}
.car_logo:hover{
	animation: rotation 2s linear infinite;
}
@keyframes rotation{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
@keyframes car{
	0%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(360deg);
	}
}
.car_left>img{
	width: 100%;
}
.car_left div:hover{
	transform: scale(1.2);
	transition: .5s all linear;
}
.car_foot{
	width: 100%;
	height: auto;
	padding: 1vw 10vw;
	position: absolute;
	bottom: 0;
}
.car_foot video{
	width: 100%;
}
.price{
	width: 100%;
	height: auto;
}
.price_head{
	width: 100%;
	height: 15vw;
	animation:head 1s linear;
}
.price_head img{
	width: 10vw;
	margin: auto;
	margin-top: 3vw;
}
.price_main{
	width: 100%;
	padding: 0  6vw 0 10vw;
	display: flex;
	animation:price_main 2.5s linear;
}
@keyframes price_main{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.price_main_left{
	width: 40%;
}
.price_main_left>div{
	width: 120%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-self: center;
}
.price_main_left>div img:hover{
	transform: scale(1.2);
	animation:serve_main_img1 1s linear;
}
.price_main_lefta{
	width: 45%;
	margin: 1%;
}
.price_main_text{
	width: 100%;
	margin:2vw 0;
}
.price_main_right{
	width: 60%;
}
.price_main_right img{
	width: 100%;
}
.price_video{
	width: 100vw;
	height: 60vw;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10vw;
}
.price_video video{
	width: 100%;
}

@keyframes head{
	0%{
		opacity: 0;
	}
	25%{
		opacity: 0.5;
	}
	50%{
		opacity: 0;
	}
	75%{
		opacity: 0.75;
	}
	100%{
		opacity: 1;
	}
}
::-webkit-scrollbar:{
	display: none;
}
img{
	display: block;
}