#banner{
	margin-bottom: 30px;
	position: relative;
	height: 300px;
	@include user-select(none);
	.image{
		width: 1120px;
		position: absolute;
		left: 40px;
		height: 100%;
		overflow: hidden;
		background: #000;
		.wrap{
			position: absolute;
			left: 0;
			height: 100%;
		}
		img{
			height: 100%;
			position: absolute;
			&:first-child{
				display: block;
			}
		}
	}
	.loading, .error{
		width: 1200px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #000;
		color: #fff;
		&:before{
			position: absolute;
			top: 50%;
			margin-top: -20px;
			width: 100%;
			text-align: center;
			font: 40px/1 $symbol;
		}
		div{
			position: absolute;
			top: 50%;
			width: 100%;
			text-align: center;
			margin-top: 40px;
		}
	}
	.loading{
		&:before{
			content: "P";
		}
	}
	.error{
		&:before{
			content: "'";
		}
	}
	.prev, .next{
		position: absolute;
		height: 100%;
		width: 35px;
		background: $black;
		cursor: pointer;
		&:before{
			position: absolute;
			top: 50%;
			font: 20px/1 $symbol;
			color: #fff;
			margin-top: -10px;
		}
		&:hover{
			background: #000;
		}
	}
	.prev{
		left: 0;
		&:before{
			content: "<";
			left: 10px;
		}
	}
	.next{
		right: 0;
		&:before{
			content: ">";
			right: 10px;
		}
	}
	.dots{
		position: absolute;
		bottom: -40px;
		right: 0;
		z-index: 1;
		li{
			display: inline-block;
			margin-left: 10px;
			background: $black;
			cursor: pointer;
			overflow: hidden;
			position: relative;
			@include square(10px);
			&.current, &:hover{
				background: $main;
			}
		}
	}
}