.swiper {
	width: 100vw;
	height: 33vw;
	overflow: hidden;
	position: relative;
}

#swiper-item-box {
	width: 100vw;
}

.swiper-left-btn {
	position: absolute;
	top: 15vw;
	left: 2vw;
	color: #FFFFFF;
}

.swiper-right-btn {
	position: absolute;
	top: 15vw;
	right: 2vw;
}

.swiper-btn {
	color: rgba(255, 255, 255, .3);
	width: 4vw;
	height: 4vw;
	font-size: 4vw;
	background-color: rgba(100, 100, 100, .1);
	border-radius: .2vw;
}

.swiper-btn:hover {
	color: rgba(255, 255, 255, .8);
	width: 4vw;
	height: 4vw;
	font-size: 4vw;
	background-color: rgba(100, 100, 100, .3);
}

.swiper-item {
	width: 100vw;
	min-width: 100vw;
	/* display: inline; */
}

.swiperAnimation-left {
	animation-name: swiperAnimation-left;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	animation-delay: .1s;
	animation-iteration-count: 1;
	animation-direction: normal;
}

.swiperAnimation-right {
	animation-name: swiperAnimation-right;
	animation-duration: 0.4s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
}

/* 动画 */
@keyframes swiperAnimation-left {
	0% {
		margin-left: 100vw;
	}

	25% {
		margin-left: 60vw;
	}

	50% {
		margin-left: 30vw;
	}

	100% {
		margin-left: 0vw;
	}
}

@keyframes swiperAnimation-right {
	0% {
		margin-left: -100vw;
	}

	25% {
		margin-left: -60vw;
	}

	50% {
		margin-left: -30vw;
	}

	100% {
		margin-left: 0vw;
	}
}

#dot-box {
	width: 100vw;
	position: absolute;
	bottom: 1vw;
}

.dot-item {
	width: 6vw;
	height: .2vw;
	border-radius: .1vw;
	background: rgba(230, 230, 230, .7);
	margin: 0 .3vw;
	position: relative;
	overflow: hidden;
}

.dot-shadow {
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 1);
	position: absolute;
	top: 0;
	left: -100%;
	border-radius: .1vw;
}
.dot-shadow-end{
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 1);
	position: absolute;
	top: 0;
	left: 0;
	border-radius: .1vw;
}

.dotAnimation {
	animation-name: dotAnimation;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
}
/* 动画 */
@keyframes dotAnimation {
	0% {
		left: -100%;
	}

	10% {
		left: -90%;
	}

	20% {
		left: -80%;
	}

	30% {
		left: -70%;
	}

	40% {
		left: -60%;
	}

	50% {
		left: -50%;
	}

	60% {
		left: -40%;
	}

	70% {
		left: -30%;
	}

	80% {
		left: -20%;
	}

	90% {
		left: -10%;
	}

	100% {
		left: 0;
	}
}