.animation {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	top: 0;
	left: 0;
	z-index: 9999999;
}

.circular_one {
	width: 20.5rem;
	height: 20.5rem;
	border-radius: 100%;
	/* background: -moz-linear-gradient(top, #ccc -213%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(-213%,#ccc), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #ccc -213%,#ffffff 100%);
    background: -o-linear-gradient(top, #ccc -213%,#ffffff 100%);
    background: -ms-linear-gradient(top, #ccc -213%,#ffffff 100%);
    background: linear-gradient(to bottom, #ccc -213%,#ffffff 100%); */
	background: url(../images/left.png);
	background-size: 100% 100%;
	position: absolute;
	top: 8.9rem;
	right: 5.175rem;
	animation: fadeInLeft 1.5s infinite;
	-webkit-animation: fadeInLeft 1.5s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
}

.circular_tow {
	width: 13.4rem;
	height: 13.4rem;
	border-radius: 100%;
	/* background: -moz-linear-gradient(top, #ccc 0%, #ffffff 115%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #ccc 0%,#ffffff 115%);
    background: -o-linear-gradient(top, #ccc 0%,#ffffff 115%);
    background: -ms-linear-gradient(top, #ccc 0%,#ffffff 115%);
    background: linear-gradient(to right, #ccc 20%,#ffffff 101%);
    position: absolute; */
	position: absolute;
	background: url(../images/top.png);
	background-size: 100% 100%;
	top: 6.85rem;
	left: 2.8rem;
	z-index: 7;
	animation: fadeInRight 1.5s infinite;
	-webkit-animation: fadeInRight 1.5s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
}

.circular_three {
	width: 24.75rem;
	height: 24.75rem;
	border-radius: 100%;
	background: url(../images/down.png);
	background-size: 100% 100%;
	position: absolute;
	top: 16.8rem;
	left: -17px;
	z-index: 1;
	animation: fadeInUpLeft 1.5s infinite;
	-webkit-animation: fadeInUpLeft 1.5s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
}

.circular_four {
	width: 9.05rem;
	height: 9.05rem;
	border-radius: 100%;
	/* background: -moz-linear-gradient(top, #ccc -213%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(-213%,#ccc), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #ccc -213%,#ffffff 100%);
    background: -o-linear-gradient(top, #ccc -213%,#ffffff 100%);
    background: -ms-linear-gradient(top, #ccc -213%,#ffffff 100%);
    background: linear-gradient(to bottom, #ccc -78%,#ffffff 135%); */
	background: url(../images/right.png);
	background-size: 100% 100%;
	position: absolute;
	top: 15.025rem;
	left: 8.6rem;
	z-index: 22;
	animation: fadeInRight 1.5s infinite;
	-webkit-animation: fadeInRight 1.5s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
}

.dialogue {
	width: 2.75rem;
	height: 14.35rem;
	background: url(../images/8.png);
	background-size: 100% 100%;
	position: absolute;
	top: 7.8rem;
	left: 7.75rem;
	z-index: 9999;
	opacity: 0;
	animation: fadeInUpLefTtext 4s infinite;
	-webkit-animation: fadeInUpLefTtext 2s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
}
.text_logo{
	position: absolute;
	width: 9.525rem;
	height: 1.75rem;
	bottom: 10.5rem;
	background: url(../images/twologo.png);
	background-size: 100% 100%;
	left: 4.55rem;
	z-index: 9999;
	opacity: 0;
	animation: toShow 1.5s infinite;
	-webkit-animation: toShow 1.5s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
	-webkit-animation-delay: 1s;
}
.text_time {
	width: 7.45rem;
	height: 2.675rem;
	position: absolute;
	bottom: 6.5rem;
	background: url(../images/6.png);
	background-size: 100% 100%;
	left: 5.5rem;
	z-index: 9999;
	opacity: 0;
	animation: toShow 1.5s infinite;
	-webkit-animation: toShow 1.5s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
	-webkit-animation-delay: 1s;
}

/* .text_onlin {
	width: 6.95rem;
	height: 1.425rem;
	position: absolute;
	background: url(../images/9.png);
	background-size: 100% 100%;
	bottom: 6rem;
	left: 5.775rem;
	opacity: 0;
	animation: toShow 1.5s infinite;
	-webkit-animation: toShow 1.5s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
	-webkit-animation-delay: 1s;
} */
.bighh{
	animation: bigHide 1s ;
	-webkit-animation: bigHide 1.5s;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
	-webkit-animation-delay: 1s;
}
.start {
	width: 6.325rem;
	height: 0.925rem;
	position: absolute;
	background: url(../images/7.png);
	background-size: 100% 100%;
	bottom: 2.925rem;
	opacity: 1;
	display:none;
	left: 6.225rem;
	-webkit-animation:scaleDraw 1.5s infinite;
	/*Safari and Chrome*/
	animation-fill-mode: forwards;
}

/*动画*/
/*从右到左*/
@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate(300px, 0);
	}

	80% {
		opacity: 1;
		-webkit-transform: translate(-10px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate(0px, 0);
	}
}

/*从左到右*/
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate(-1000px, 0);
		transform: stranslate(-1000px, 0);
	}

	80% {
		opacity: 1;
		-webkit-transform: translate(20px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate(0px, 0);
		transform: stranslate(-10px, 0);
	}
}

/*从上到下*/
@-webkit-keyframes fadeInUpLeft

/* Safari 与 Chrome */
	{
	0% {
		opacity: 0;
		-webkit-transform: translate(-1000px, 1000px);
		/* Safari */
	}

	80% {
		opacity: 1;
		-webkit-transform: translate(20px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate(0, 0px);
		/* Safari */
	}
}

/*从上到下1*/
@-webkit-keyframes fadeInUpLefTtext

/* Safari 与 Chrome */
	{
	0% {
		opacity: 0;
		-webkit-transform: translate(0px, 0px);
		/* Safari */
	}

	50% {
		opacity: 1;
		-webkit-transform: translate(0px, 0px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate(0, -100px);
		/* Safari */
	}
}

/*显示隐藏*/
@-webkit-keyframes toShow {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*放大*/
@keyframes enlarge {
	from {
		opacity: 0;
		-ms-transform: scale(0.1, 0.1);
		/* IE 9 */
		-webkit-transform: scale(0.1, 0.1);
		/* Safari */
		transform: scale(0.1, 0.1);
		/* 标准语法 */
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}
/*开始为原始大小*/
@keyframes scaleDraw {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	25% {
		opacity: 1;
		transform: scale(1.1);
		/*放大1.1倍*/
	}

	50% {
		opacity: 1;
		transform: scale(1);
	}

	75% {
		opacity: 1;
		transform: scale(1.1);
	}
}
/*点击放大*/
@keyframes bigHide {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity:0;
		z-index:1;
		display:none;
		transform: scale(2.5);
	}
}