.swiper-container {
	height: auto;
	width: 100%;
}
.swiperimg {
	background-size: contain|cover;
	height: auto;
	width: 100%;
	min-height:696px;
}
.animation-div {
	height: 696px;
	width: 100%;
	background-color: #111521;
	display: flex;
	flex-direction: row;
}
.animation-left {
	width: 50%;
	height: 100%;
	position: relative;
}

.animation-left-div {
	position: absolute;
	right: 45px;
}

.animation-left-img {
	width: 521px;
	height: 501px;
}

.animation-right {
	width: 50%;
	height: 100%;
	margin-left: 220px;
	margin-top: 34px;
}

.animation-right-div {
	width: 321px;
	height: 561px;
	position: relative;
}

.anmition-BAR {
	position: absolute;
	top: 45%;
	left: 56px;
}
.man {
	width: 321px;
	height: auto;
	position: relative;
	animation: mymove 5s infinite;
	-moz-animation: mymove 5s infinite;
	/* Firefox */
	-webkit-animation: mymove 5s infinite;
	/* Safari and Chrome */
	-o-animation: mymove 5s infinite;
	/* Opera */
}
@keyframes mymove {
	0% {
		top: 0px;
	}

	50% {
		top: 20px;
	}

	100% {
		top: 0px;
	}
}

@-moz-keyframes mymove

/* Firefox */
	{
	0% {
		top: 0px;
	}

	50% {
		top: 20px;
	}

	100% {
		top: 0px;
	}
}

@-webkit-keyframes mymove

/* Safari and Chrome */
	{
	0% {
		top: 0px;
	}

	50% {
		top: 20px;
	}

	100% {
		top: 0px;
	}
}

@-o-keyframes mymove

/* Opera */
	{
	0% {
		top: 0px;
	}

	50% {
		top: 20px;
	}

	100% {
		top: 0px;
	}
}

.move {
	position: absolute;
	top: 15px;
	left: 65px;
	width: 78px;
	height: 8px;
	background: rgba(0, 0, 0, 0) !important;
	border: 1px solid #0DDEE5;
	-webkit-appearance: none;
}

.move1 {
	position: absolute;
	top: 35px;
	left: 65px;
	width: 78px;
	height: 8px;
	background: rgba(0, 0, 0, 0) !important;
	border: 1px solid #0DDEE5;
	-webkit-appearance: none;
}

.move2 {
	position: absolute;
	top: 55px;
	left: 65px;
	width: 78px;
	height: 8px;
	background: rgba(0, 0, 0, 0) !important;
	border: 1px solid #0DDEE5;
	-webkit-appearance: none;
}

.move3 {
	position: absolute;
	top: 75px;
	left: 65px;
	width: 78px;
	height: 8px;
	background: rgba(0, 0, 0, 0) !important;
	border: 1px solid #0DDEE5;
	-webkit-appearance: none;
}

.p {
	position: relative;
	width: 78px;
	height: 8px;
	background-color: #0DDEE5;
	animation: mymoves 2s infinite;
	-moz-animation: mymoves 2s infinite;
	/* Firefox */
	-webkit-animation: mymoves 2s infinite;
	/* Safari and Chrome */
	-o-animation: mymoves 2s infinite;
	/* Opera */
}

@keyframes mymoves {
	0% {
		width: 63px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 50px;
	}
}

@-moz-keyframes mymoves

/* Firefox */
	{
	0% {
		width: 63px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 50px;
	}
}

@-webkit-keyframes mymoves

/* Safari and Chrome */
	{
	0% {
		width: 63px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 50px;
	}
}

@-o-keyframes mymoves

/* Opera */
	{
	0% {
		width: 63px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 50px;
	}
}

.p1 {
	position: relative;
	width: 78px;
	height: 8px;
	background-color: #0DDEE5;
	animation: mymove1 4s infinite;
	-moz-animation: mymove1 4s infinite;
	/* Firefox */
	-webkit-animation: mymove1 4s infinite;
	/* Safari and Chrome */
	-o-animation: mymove1 4s infinite;
	/* Opera */
}

@keyframes mymove1 {
	0% {
		width: 36px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 25px;
	}
}

@-moz-keyframes mymove1

/* Firefox */
	{
	0% {
		width: 36px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 25px;
	}
}

@-webkit-keyframes mymove1

/* Safari and Chrome */
	{
	0% {
		width: 36px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 25px;
	}
}

@-o-keyframes mymove1

/* Opera */
	{
	0% {
		width: 36px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 25px;
	}
}

.p2 {
	position: relative;
	width: 78px;
	height: 8px;
	background-color: #0DDEE5;
	animation: mymove2 2s infinite;
	-moz-animation: mymove2 2s infinite;
	/* Firefox */
	-webkit-animation: mymove2 2s infinite;
	/* Safari and Chrome */
	-o-animation: mymove2 2s infinite;
	/* Opera */
}

@keyframes mymove2 {
	0% {
		width: 18px;
	}

	50% {
		width: 80px;
	}

	100% {
		width: 0px;
	}
}

@-moz-keyframes mymove2

/* Firefox */
	{
	0% {
		width: 18px;
	}

	50% {
		width: 80px;
	}

	100% {
		width: 0px;
	}
}

@-webkit-keyframes mymove2

/* Safari and Chrome */
	{
	0% {
		width: 18px;
	}

	50% {
		width: 80px;
	}

	100% {
		width: 0px;
	}
}

@-o-keyframes mymove2

/* Opera */
	{
	0% {
		width: 18px;
	}

	50% {
		width: 80px;
	}

	100% {
		width: 0px;
	}
}

.p3 {
	position: relative;
	width: 78px;
	height: 8px;
	background-color: #0DDEE5;
	animation: mymove3 8s infinite;
	-moz-animation: mymove3 8s infinite;
	/* Firefox */
	-webkit-animation: mymove3 8s infinite;
	/* Safari and Chrome */
	-o-animation: mymove3 8s infinite;
	/* Opera */
}

@keyframes mymove3 {
	0% {
		width: 55px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 36px;
	}
}

@-moz-keyframes mymove3

/* Firefox */
	{
	0% {
		width: 55px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 36px;
	}
}

@-webkit-keyframes mymove3

/* Safari and Chrome */
	{
	0% {
		width: 55px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 36px;
	}
}

@-o-keyframes mymove3

/* Opera */
	{
	0% {
		width: 55px;
	}

	50% {
		width: 78px;
	}

	100% {
		width: 36px;
	}
}

.text {
	position: relative;
	bottom: 480px;
	left: -20px;
	width: 14px;
	height: 125px;
	animation:
		animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
		animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
		scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}

.text1 {
	position: relative;
	bottom: 600px;
	left: 60px;
	width: 14px;
	height: 113px;
}

.text2 {
	position: relative;
	bottom: 730px;
	left: 325px;
	width: 14px;
	height: 125px;
}

.dot {
	margin: 150px auto;
	width: 200px;
	height: 200px;
	background-color: #E3E3E3;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
	-webkit-animation-name: 'ripple';
	/*动画属性名，也就是我们前面keyframes定义的动画名*/
	-webkit-animation-duration: 2s;
	/*动画持续时间*/
	-webkit-animation-timing-function: ease;
	/*动画频率，和transition-timing-function是一样的*/
	-webkit-animation-delay: 0s;
	/*动画延迟时间*/
	-webkit-animation-iteration-count: infinite;
	/*定义循环资料，infinite为无限次*/
	-webkit-animation-direction: alternate;
	/*定义动画方式*/
}

@keyframes ripple {
	0% {

		opacity: 0.35;
		width: 190px;
		height: 190px;
	}

	100% {

		opacity: 0.2;
		width: 250px;
		height: 250px;
	}
}

.anmition-bottom {
	width: 380px;
	height: auto;
	position: relative;
	bottom: 190px;
	left: -31px;
}

.anmition-png {
	position: absolute;
	top: 0px;
	left: 0px;
}