.cream {
	width: 100%;
	height: 776px;
	background: url(https://www.zyjiajiao.com/Public/modules/home/images/advantage/creamBg.jpg) no-repeat;
	background-position:center center;
}

.cream .campus_con_title h2 {
	color: #fff;
}

.cream_detail {
	width: 60%;
	height: 334px;
	background: url(https://www.zyjiajiao.com/Public/modules/home/images/advantage/creamLine.png) no-repeat;
	margin: 40px auto;
	position: relative;
}

.cream_info li {
	color: #fff;
	font-size: 24px;
}

.cream_info li:nth-child(1) {
	position: absolute;
	left: -135px;
	bottom: 65px;
}

.cream_info li:nth-child(2) {
	position: absolute;
	left: -94px;
	bottom: 218px;
}

.cream_info li:nth-child(3) {
	position: absolute;
	left: 57px;
	bottom: 316px;
}

.cream_info li:nth-child(4) {
	position: absolute;
	right: -103px;
	top: -17px;
}

.cream_info li:nth-child(5) {
	position: absolute;
	right: -111px;
	top: 84px;
}

.cream_info li:nth-child(6) {
	position: absolute;
	right: -193px;
	top: 228px;
}

.circles li {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(to right, #9dc92a, #9dc92a);
}

.circles li:first-child span {
	padding-left: 10px;
}

.circles li span {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	padding-top: 30px;
	padding-left: 18px;
}

.circles li:last-child img {
	display: block;
	padding-top: 17px;
	padding-left: 20px;
}

.circles li:nth-child(1) {
	position: absolute;
	left: 0;
	bottom: 42px;
}

.circles li:nth-child(2) {
	position: absolute;
	left: 86px;
	bottom: 191px;
}

.circles li:nth-child(3) {
	position: absolute;
	left: 232px;
	bottom: 278px;
}

.circles li:nth-child(4) {
	position: absolute;
	left: 424px;
	bottom: 284px;
}

.circles li:nth-child(5) {
	position: absolute;
	left: 595px;
	bottom: 191px;
}

.circles li:nth-child(6) {
	position: absolute;
	right: -38px;
	bottom: 43px;
}

/* 创建动画，声明一个动画的关键帧 */

@keyframes myani {
	0% {
		margin-left: 200px;
		transform: rotateZ(180deg);
		opacity: 0;
	}
	100% {
		margin-left: 0px;
		transform: rotateZ(0deg);
		opacity: 1;
	}
}

.roll li[id*='css'] {
	/* 调用创建的动画 */
	animation-name: myani;
	/* 设置动画时间 */
	animation-duration: 3s;
	/* 缓动,由快到慢 */
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.61, 1.32);
}

li[id=css2] {
	animation-delay: .3s;
}

li[id=css3] {
	animation-delay: .6s;
}

li[id=css4] {
	animation-delay: .9s;
}

li[id=css5] {
	animation-delay: 1.2s;
}

li[id=css6] {
	animation-delay: 1.5s;
}

#css1 {
	animation-name: myani;
	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.61, 1.32);
}

#css2 {
	animation-name: myani;
	animation-duration: 3.5s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.61, 1.32);
}

#css3 {
	animation-name: myani;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.61, 1.32);
}

#css4 {
	animation-name: myani;
	animation-duration: 4.5s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.61, 1.32);
}

#css5 {
	animation-name: myani;
	animation-duration: 5s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.61, 1.32);
}

#css6 {
	animation-name: myani;
	animation-duration: 5.5s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.61, 1.32);
}