/* 图片容器 */
.img-slide {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.img-slide .hd {
	overflow: hidden;
}

/* 前后切换按钮 */
.img-slide  .prev, .img-slide .next {
	display: block;
	cursor: pointer;
	width: 32px;
	height: 40px;
	background: url(../images/slider-arrow.png) no-repeat;
	z-index: 2;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	z-index: 10;
}

.img-slide .prev {
	left: 5%;
	background-position: -110px 5px;
}

.img-slide .next {
	right: 5%;
}

/* 指示标识 */
.img-slide .hd ul {
    bottom: 13px;
	position: absolute;
	z-index: 3;
	right: 50%;
    overflow: hidden;
}

.img-slide .hd ul li {
	float: left;
	width: 12px;
	height: 12px;
	margin-right: 5px;
	text-indent: -999px;
	cursor: pointer;
    background: url("../images/icoCirCle.png")  no-repeat;
}

.img-slide .hd ul li.on {
    background: url("../images/icoCirCle-hov.png")  no-repeat;
}

/* 指示数字 */
.pageState {
	bottom: 22px;
	position: absolute;
	z-index: 3;
	right: 20%
}

.tempWrap {
	overflow: visible !important;
}

/* 图片列表 */
.img-slide .bd {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	height: 100%;
}

.img-slide .bd:before, .img-slide .bd:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	z-index: 1;
	background: rgba(0, 0, 0, .5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,
		endColorstr=#88000000);
}

.img-slide .bd:before {
	left: -100%;
}

.img-slide .bd:after {
	right: -100%;
}

.img-slide .bd ul {
	overflow: hidden;
	height: 100%;
	/*height 必须 */
}

.img-slide .bd ul li {
	float: left;
	_display: inline;
	overflow: hidden;
	text-align: center;
	height: 100%;
	position: relative;
}

.img-slide .bd ul li .pic {
	height: 100%;
	width: 100%;
	border-left: 1px solid #fff;
	overflow: hidden;
}

.img-slide .bd ul li .title ,#banner .title{
	line-height: 40px;
	height:40px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	text-align: left;
	padding: 0 10px;
	margin: 0 auto;
	box-sizing: border-box;
}

.img-slide .bd ul li .title p,#banner .title p {
	color: #fff;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;    
	margin: 0;
}

@media \0screen\,screen\9 { /* 只支持IE6、7、8 */
	.img-slide .bd ul li .title ,#banner .title{
		background-color: #000000;
		filter: Alpha(opacity = 50);
		position: static;
		/* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
		*zoom: 1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
	}
	.img-slide .bd ul li .title p,#banner .title p {
		position: relative; /* 设置子元素为相对定位，可让子元素不继承Alpha值 */
	}
}

.img-slide .bd ul li img {
	width: 100%;
	height: 100%;
}
/* 效果1 横向可全屏设置宽度为100%，或者设置固定宽度宽度为固定尺寸*/
.banner1 .bd, .banner1 .bd ul li {
	width: 100%;
}
/* 效果2 三个图片，可看到前一个后一个图片*/
.banner2 {
	min-width: 1200px;
}

.banner2 .bd {
	width: 1200px;
}

.banner2 .bd ul li {
	/* margin: 0 2px; */
}

.banner2 .bd ul li .pic img {
	width: 1200px;
	/*width 必须,如果有间距需要加上间距之后为容器的宽度 */
}
/* 效果3 背景随图片变化*/
.banner3.img-slide .bd ul li img {
	width: 1200px;
	overflow: hidden;
	margin: 0 auto;
}

.banner3.img-slide .bd ul li .title {
	width: 1200px;
}

.banner3 .bd ul li+li {
	background: #A9DBE0
}

.banner3 .bd ul li+li+li {
	background: #8FCFFE
}

.banner3 .bd ul li+li+li+li {
	background: #147E9B
}

.banner3 .bd ul li+li+li+li+li {
	background: #13789B
}

.banner3 .bd ul li+li+li+li+li+li {
	background: orange
}