.dh-wrap {
	overflow: hidden;
}

.dh-bg,
.dh-bg1 {
	position: relative;
	z-index: 10;
}

.dh-bg2 {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 11;
}
.dh-bg3 {
	position: absolute;
	left: 0;
	top: 33.7%;
	z-index: 11;
}

.dh-bg img {
	width: 100%;
}

.dh-bg-ls {
	position: absolute;
	background: #8dcbed;
	/* z-index: 12; */

	width: 15%;
}

.dh-bg-ls0 {
	height: 9%;
	left: 0;
	top: 43%;
	animation: dh1 linear infinite 10s;
	-webkit-animation: dh1 linear infinite 10s;
	/* Safari and Chrome */
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
}

.dh-bg-ls1 {
	height: 5%;
	left: 0;
	top: 39.5%;
	animation: dh1 linear infinite 10s;
	-webkit-animation: dh1 linear infinite 10s;
	/* Safari and Chrome */
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
}

.dh-bg-ls2 {
	height: 9%;
	left: 0;
	top: 43%;
	animation: dh1 linear infinite 10s;
	-webkit-animation: dh1 linear infinite 10s;
	/* Safari and Chrome */
	animation-delay: 2s;
	-webkit-animation-delay: 2s;
}

.dh-bg-ls3 {
	height: 8%;
	left: 0;
	top: 47.5%;
	animation: dh1 linear infinite 10s;
	-webkit-animation: dh1 linear infinite 10s;
	/* Safari and Chrome */

}

.dh-bg-ls4 {
	height: 5%;
	left: 0;
	top: 39.5%;
	animation: dh1 linear infinite 10s;
	-webkit-animation: dh1 linear infinite 10s;
	/* Safari and Chrome */
	animation-delay: 8s;
	-webkit-animation-delay: 8s;
}

@keyframes dh1 {
	0% {
		left: 0;
	}

	100% {
		left: 100%;
	}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes dh1 {
	0% {
		left: 0;
	}

	100% {
		left: 100%;
	}
}

.dh-wrap {
	position: relative;
	align-items: center;
	background-color: #fff;
	overflow: hidden;
}

.dh-wrap:before,
.dh-wrap:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 55%;
	min-width: 300vw;
	min-height: 300vw;
	background-color: #8dcbed;
	animation-name: rotate;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	
}

.dh-wrap:before {
	bottom: 15vh;
	border-radius: 45%;
	animation-duration: 10s;
}

.dh-wrap:after {
	bottom: 12vh;
	opacity: .5;
	border-radius: 47%;
	animation-duration: 10s;
}

@keyframes rotate {
	0% {
		transform: translate(-50%, 0) rotateZ(0deg);
	}

	50% {
		transform: translate(-50%, -2%) rotateZ(180deg);
	}

	100% {
		transform: translate(-50%, 0%) rotateZ(360deg);
	}
}
 

.dh-img1{
	animation: dh2 linear infinite 2s;
	-webkit-animation: dh2 linear infinite 2s;
	/* Safari and Chrome */
}
.dh-img2{
	animation: dh3 linear infinite 2s;
	-webkit-animation: dh3 linear infinite 2s;
	/* Safari and Chrome */
}
.dh-img3{
	animation: dh4 linear infinite 2s;
	-webkit-animation: dh4 linear infinite 2s;
	/* Safari and Chrome */
}
.dh-img4{
	animation: dh5 linear infinite 2s;
	-webkit-animation: dh5 linear infinite 2s;
	/* Safari and Chrome */
}


@keyframes dh2 {
	0% {
		left: 0;
	}
	50%{
		left: 10px;
	}
	100% {
		left: 0;
	}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes dh2 {
	0% {
		left: 0;
	}
	50%{
		left: 10px;
	}
	100% {
		left: 0;
	}
}


@keyframes dh3 {
	0% {
		transform: scale(1);
	}
	50%{
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes dh3 {
	0% {
		transform: scale(1);
	}
	50%{
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes dh4 {
	0% {
		top: 33.7%;
	}
	50%{
		top: 30%;
	}
	100% {
		top: 33.7%;
	}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes dh4 {
	0% {
		top: 33.7%;
	}
	50%{
		top: 30%;
	}
	100% {
		top: 33.7%;
	}
}
@keyframes dh5 {
	0% {
		transform:rotate(0deg);
	-ms-transform:rotate(0deg); /* IE 9 */
	-webkit-transform:rotate(0deg); /* Safari and Chrome */
		
	}
	50%{
		transform:rotate(5deg);
	-ms-transform:rotate(5deg); /* IE 9 */
	-webkit-transform:rotate(5deg); /* Safari and Chrome */
	}
	100% {
		transform:rotate(0deg);
	-ms-transform:rotate(0deg); /* IE 9 */
	-webkit-transform:rotate(0deg); /* Safari and Chrome */
	}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes dh5 {
	0% {
		transform:rotate(0deg);
	-ms-transform:rotate(0deg); /* IE 9 */
	-webkit-transform:rotate(0deg); /* Safari and Chrome */
		
	}
	50%{
		transform:rotate(5deg);
	-ms-transform:rotate(5deg); /* IE 9 */
	-webkit-transform:rotate(5deg); /* Safari and Chrome */
	}
	100% {
		transform:rotate(0deg);
	-ms-transform:rotate(0deg); /* IE 9 */
	-webkit-transform:rotate(0deg); /* Safari and Chrome */
	}
}

@media (min-width:320px) and (max-width:640px)  {
	.dh-wrap{
		margin-top: 53px;
	}
}