.banner_box {

    position: relative;

    overflow: hidden;

}

.banner {

	width: 100%;

	height: 600px;

	position: relative;

	overflow: hidden;

	cursor: pointer;

}

.banner11{

	display:none;

	

	}

.imgbox {

	width: 100%;

	height: 600px;

	position: relative;

	

	overflow: hidden;

}

.img {

	position: absolute;

	display: none;

	left: 50%;

	margin-left: -960px;

	display: inline;

}



.im {

	display: block;

}

.change {

	height: 100px;

	display: block;

	position: absolute;

	z-index: 20;

	opacity: 0.4;

	transition: 0.4s;

	top: 50%;

	margin-top: -50px

}

.change:hover {

	opacity: 1;

}

.pre {

	left: 1%;

}

.next {

	right: 1%;

}

.cirbox {

	width: 88px;

	position: absolute;

	bottom: 15px;

	z-index: 10;

	left: 50%;

	margin-left: -20px;

	cursor: pointer;

}

.cir {

	width: 12px;

	height: 12px;

	background-color: white;

	opacity: 0.4;

	float: left;

	border-radius: 6px;

	margin: 0 5px 0 5px;

	cursor: pointer;

}

.cir:hover {

	background-color: cyan;

	transition: 0.8s;

}

.cr {

	opacity: 1;

}

.cr:hover {

	background-color: white;

}

#slider { width: 100%; margin: 0 auto; }

#slider img{width:100%;}

.controls li { top: 50%; margin-top: -30px }

.controls li:nth-child(1) { left: 0; }

.controls li:nth-child(2) { right: 0; }

.pagination li { background-color: #ddd;}

.pagination li.active { background-color: #000; }

.responsive { width: 100%; height: auto; }

.clearfix:after { content: ""; display: table; clear: both; }

#slider{display:none;}

@media screen and (max-width:640px) {

.banner{

	display:none;

	

	}	

#slider{

	display:block;

	}

.banner11 .imgbox img{

	width:100%;

	

	}		



.banner11 {

	width: 100%;

	overflow: hidden;

	

}





	

	}