*{
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
}
body{width: 100%;}
.road{
	width: 1200px;
	height: 1010px;
	background: url("../imgs/liumai_bei.jpg")no-repeat center;
	position: relative;
}
/*圆点开始*/
.road .circle{
	width: 100%;
	height: 100%;
	position: absolute;
}
.circle ul li{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #daf214;
	position: absolute;
	box-shadow: 0 0 10px 6px #daf214;
	transition: all 1s;
	animation: scale 3s linear infinite;
	opacity: 0;
}
.circle li:nth-of-type(1){
	top: 20.4%;
    left: 24.7%;
    animation: opcitys .1s linear 1 forwards;
}
.circle li:nth-of-type(2){
	top: 37.4%;
    left: 24.7%;
    animation: opcitys .2s linear 1 0.2s forwards;
}
.circle li:nth-of-type(3){
	top: 37.4%;
    left: 42.3%;
    animation: opcitys .3s linear 1 0.5s forwards;
}
.circle li:nth-of-type(4){
	top: 60.4%;
    left: 54.4%;
    animation: opcitys .3s linear 1 1s forwards;
}
.circle li:nth-of-type(5){
	top: 60.4%;
    left: 70.2%;
    animation: opcitys .2s linear 1 1.2s forwards;
}
.circle li:nth-of-type(6){
	top: 36.4%;
    left: 70.2%;
    animation: opcitys .3s linear 1 1.5s forwards;
} 
/*圆点结束*/

/*线开始*/
.road .line{
	width: 100%;
	height: 100%;
	position: absolute;
}
.line li{
	width: 0;
	height: 0;
	position: absolute;
	background: #daf214;
	box-shadow: 0 0 46px 6px #dbdbad;
}
.line li:nth-of-type(1){
    top: 23.2%;
    left: 25.3%;
    animation: line_1 0.2s linear 1 forwards;
}
.line li:nth-of-type(2){
    top: 38.4%;
    left: 26.5%;
    animation: line_2 0.2s linear 1 .3s forwards;
}
.line li:nth-of-type(3){
    top: 40%;
    left: 43%;
    animation: line_3 0.2s linear 1 .6s forwards;
}
.line li:nth-of-type(4){
    top: 61.1%;
    left: 43.6%;
    animation: line_4 0.2s linear 1 .8s forwards;
}
.line li:nth-of-type(5){
    top: 61.3%;
    left: 56.4%;
    animation: line_5 0.2s linear 1 1s forwards;
}
.line li:nth-of-type(6){
    top: 60.6%;
    left: 71%;
    animation: line_6 0.3s linear 1 1.2s forwards;
}
/*线结束*/

.test li{
	width: 276px;
	position: absolute;
	opacity: 0;
}
.test li h3{
	font-size: 30px;
    color: #daf214;
    padding-bottom: 5px;
    line-height: 30px;
}
.test li p{
	color: #fff;
}

.test li:nth-of-type(1){
	top: 208px;
    left: 400px;
    animation: opcitys .1s linear 1 0.1s forwards;
}
.test li:nth-of-type(2){
	top: 294px;
    left: 60px;
    animation: opcitys .2s linear 1 0.2s forwards;
}
.test li:nth-of-type(3){
	top: 366px;
    left: 655px;
    animation: opcitys .3s linear 1 0.5s forwards;
}
.test li:nth-of-type(4){
	top: 656px;
    left: 804px;
    animation: opcitys .3s linear 1 1s forwards;
}
.test li:nth-of-type(5){
	top: 514px;
    left: 1050px;
	 animation: opcitys .2s linear 1 1.2s forwards;
}
.test li:nth-of-type(6){
	top: 240px;
    left: 1050px;
    animation: opcitys .3s linear 1 1.5s forwards;
}

/*
#ddd{
	width: 1000px;
	position: relative;
	margin: 0 auto;
	
}
#ddd img{position: absolute;top: 0;left: 50%;margin-left: -960px;}*/
/*圆点动画*/
@-webkit-keyframes scale{
	0%{		
		transform: scale(1);
	}
	50%{
		transform: scale(1.2);
	}
	100%{
		transform: scale(1);
	}
}
@-webkit-keyframes opcitys{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

/*线动画开始*/
@-webkit-keyframes line_1{
	from{
		width: 11px;
		height: 0;
	}
	to{
		transform: all .1s;
		width: 11px;
    	height: 150px;
	}
}
@-webkit-keyframes line_2{
	from{
		height: 12px;
		width: 0;
	}
	to{
		transform: all .3s;
		height: 12px;
    	width: 231px;
	}
}
@-webkit-keyframes line_3{
	from{
		width: 11px;
		height: 0;
	}
	to{
		transform: all .3s;
		width: 11px;
    	height: 225px;
	}
}
@-webkit-keyframes line_4{
	from{
		width: 0;
		height: 12px;
	}
	to{
		transform: all .3s;
		width: 160px;
    	height: 12px;
	}
}
@-webkit-keyframes line_5{
	from{
		width: 0;
		height: 12px;
	}
	to{
		transform: all .3s;
		width: 200px;
    	height: 12px;
	}
}
@-webkit-keyframes line_6{
	0%{
		width: 11px;
    	height: 0;
	}
	25%{
		transform: translateY(-30%);
		height: 0px;
	}
	50%{
		transform: translateY(-70%);
		height: 70px;
	}
	75%{
		transform: translateY(-100%);
		width: 11px;
    	height: 160px;
	}
	100%{
		transform: translateY(-100%);
		width: 11px;
    	height: 220px;
	}
}
/*线动画结束*/