.slider {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.slides {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	/* Simple clear fix */
	/**	
		 * Prevent blinking issue
		 * Not tested. Experimental.
		 */
	/**
		 * Here is CSS transitions 
		 * responsible for slider animation in modern broswers
		 */
	/*幻灯切换时间*/	
	/*ie9及以下时间设置无效*/
	-webkit-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	-moz-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	-ms-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	-o-transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	transition: all 1000ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	
}
.back-history{
	
	padding: 4px 7px;
	border: 1px solid #fff;
	position: absolute;
	left: 35%;
	bottom: 10px;
	z-index: 2;
	color: #fff;
	
	
}
.slide {
	height: 100%;
	float: left;
	clear: none;
}

.box {
	width: 100%;
	height: 100%;
	position: relative;
	/*20180910:text-transform: capitalize;*/
}


/*盒子带容器*/
.slide .box img {
	width: 100%;
	height: 100%;
	position: relative !important;
}

.slide .caption {
	transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	position: absolute;
	padding: 0.75em 1.5em;
	z-index: 9;
	font-size: 1.5em;
	
	color: #fff;
	opacity: .8;
	-o-opacity: .8;
	-ms-opacity: .8;
	-moz-opacity: .8;
	-webkit-opacity: .8;
	filter:alpha(opacity=80);
	
}

.slide .caption span {
	opacity: 1;
	-o-opacity: 1;
	-ms-opacity: 1;
	-moz-opacity: 1;
	-webkit-opacity: 1;
	filter:alpha(opacity=100); 
}

._caption {
	position: relative;
	font-size: 1em;
	width: 100%;
	height: 15%;

	color: #fff;
	opacity: .8;
	-o-opacity: .8;
	-ms-opacity: .8;
	-moz-opacity: .8;
	-webkit-opacity: .8;
	filter:alpha(opacity=80); 
	transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;

}
._caption1{
	background:#df0024;
}
._caption2{
	background:#000000;
}
._caption3{
	background:#e2292a;
}
._caption4{
	background:#454545;
}
._caption5{
	background:#e2292a;
}
._caption span {
	width: 90%;
	opacity: 1;
	-o-opacity: 1;
	-ms-opacity: 1;
	-moz-opacity: 1;
	-webkit-opacity: 1;
	filter:alpha(opacity=100); 
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

._caption:hover {
	background: #A71D5D;
}

.slide ._caption {
	display: none;
}

.slide .caption1 {
	left: 4%;
	bottom: 10%;background:#df0024;

}
.slide .caption:hover{
	background: #8f3931;
}

.slide .caption2 {
	right: 4%;
	bottom: 10%;
	background:#000000;
}

.slide .caption3 {
	left: 4%;
	bottom: 10%;
	background:#e2292a;
}

.slide .caption4 {
	right: 4%;
	bottom: 10%;
	background:#454545;
}

.slide .caption5 {
	right: 4%;
	bottom: 10%;
	background:#e2292a;
}

.slider:hover .slider-arrow {
	opacity: .8;
	-o-opacity: .8;
	-ms-opacity: .8;
	-moz-opacity: .8;
	-webkit-opacity: .8;
	filter:alpha(opacity=80); 
}

.slider-arrow {
	z-index: 2;
	transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	opacity: 0.2;
	-o-opacity: 0.2;
	-ms-opacity: 0.2;
	-moz-opacity: 0.2;
	-webkit-opacity: 0.2;
	filter:alpha(opacity=20); 
	position: absolute;
	display: block;
	margin-bottom: -20px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	text-align: center;
	color: #fff;
	font-size: 1em;
	background-color: #000;
	border-radius: 50%;
}


/*左右按钮样式及放置位置*/

.slider-arrow--right {
	bottom: 50%;
	right: 10px;
}

.slider-arrow--left {
	bottom: 50%;
	left: 10px;
}




.slider-nav {
	z-index: 2;
	position: absolute;
	bottom: 20px;
}

.slider-nav__item {
	/*nav样式*/
	width: 12px;
	height: 12px;
	float: left;
	clear: none;
	display: block;
	margin: 0 5px;
	opacity: 0.6;
	-o-opacity: 0.6;
	-ms-opacity: 0.6;
	-moz-opacity: 0.6;
	-webkit-opacity: 0.6;
	filter:alpha(opacity=60);
	background: #fff;
	border-radius: 100%;
	
}

.slider-nav__item:hover {
	background: #f96807;
}

.slider-nav__item--current {
	background: #f96807;
	opacity: 1;
	-o-opacity: 1;
	-ms-opacity: 1;
	-moz-opacity: 1;
	-webkit-opacity: 1;
	filter:alpha(opacity=100); 
}


/*被选中后的样式*/

@media only screen and (max-width:1200px) {
	.slider {
		height: 0;
		padding-top: 26.6%;
	}
	.caption {
		font-size: 1em !important;
	}
	.content{
		width: 100%;
	}
}

@media only screen and (max-width: 800px) {
	.slider {
		height: 0;
		padding-top: 31.6%;
	}
	.slider-nav {
		display: none;
	}
	.caption {
		display: none;
	}
	._caption {
		display: block !important;
	}
	.box {
		height: 80% !important;
	}
	.back-history{
		left: 80%;
		font-size: 0.75em;
	}
}

@media only screen and (max-width:500px) {
	.slider {
		height: 0;
		padding-top: 26.6%;
	}
	.slider-arrow {
		width: 20px;
		height: 20px;
		font-size: 0.75em !important;
		line-height: 20px;
		margin-bottom: -10px;
	}
	._caption {
		font-size: 0.85em;
	}
}

@media only screen and (max-width:400px) {
	._caption {
		font-size: 0.8em !important;
	}
}