div {
	box-sizing: border-box;
}

img {
	width: 100%;
}

.item-img {
	height: 480px;
}

.slider-wrap {
	position: relative;
	width: 100%;
	height: 480px;
}

@media screen and (min-width: 1200px) {
	.slider-wrap {
		height: 480px;
	}
}

@media screen and (min-width:768px) and (max-width:992px) {
	.slider-wrap {
		height: 400px;
	}
}

@media screen and (max-width:768px) {
	.slider-wrap {
		max-height: 240px;
	}
}

@media screen and (max-width:768px) {
	.item-img {
		height: 240px;
	}
}

.slider {
	height: 100%;
}

	.slider .slider-list {
		position: relative;
		height: 100%;
	}

		.slider .slider-list .item {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

			.slider .slider-list .item.cur {
				display: block;
			}

.yuan {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
}

	.yuan .yuan-item {
		display: block;
		position: relative;
		float: left;
		width: 18px;
		height: 18px;
		margin-right: 1px;
		cursor: pointer;
	}

		.yuan .yuan-item::after {
			content: "";
			display: block;
			position: absolute;
			top: 4px;
			left: 4px;
			width: 10px;
			height: 10px;
			border: 2px solid rgba(255, 255, 255, .4);
			border-radius: 50%;
			box-sizing: border-box;
		}

		.yuan .yuan-item.cur::after {
			background: #fff;
		}

		.yuan .yuan-item::before {
			content: "";
			display: block;
			width: 18px;
			height: 18px;
			background-color: rgba(255, 255, 255, 0);
			border-radius: 50%;
		}

		.yuan .yuan-item.cur::before {
			background-color: rgba(255, 255, 255, .2);
		}