#slides {

	position:relative;

	top:15px;

	left:15px;

	height:379px;

	z-index:100;

}



.slides_container {

	position:relative;

	overflow:hidden;

	width:960px;

	height:379px

}



.slides_container .slides_item {

	width:960px;

	height:379px}



#slides .next, #slides .prev {

	position:absolute;

	top:172px;

	left:-25px;

	display:block;

	width:25px;

	height:40px;

	background:url(../images/slider_arrows.png) -25px 0 no-repeat;

	overflow:hidden;

	text-indent:-200px;

	z-index:101;

	cursor:pointer

}



#slides .next {

	left:960px;

	background:url(../images/slider_arrows.png) 0 0 no-repeat;

}



.paginationBody {

	position:absolute;

	top:320px;

	right:55px;

	z-index:505;

	height:12px;}



.pagination {

	float:right

}



.pagination li {

	display: block;

	float:left;

	margin:0 3px;

	list-style:none;

}



.pagination li a {

	float:left;

	display:block;

	width:10px;

	height:11px;

	background-image:url(../images/slider_pagination.png);

	background-position:0 0;

	float:left;

	overflow:hidden;

	text-indent:-300px;

	text-align:left

}



.pagination li.current a {

	background-position:0 -11px;

}



.caption {

	z-index:500;

	position:absolute;

	bottom:0;

	left:0;

	height:66px;

	width:860px;

	padding:30px 56px 0 44px;

	background:url(../images/point.png);

	line-height:1.33;

}



@media only screen and (min-width: 280px) and (max-width: 767px) {	

	#slides {

		top:10px;

		left:0px;

		height:118px;

		-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);

		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);

		background:#232323}

		

	.header .caption,

	.paginationBody {

		display:none;}

	

	.slides_container,

	.slides_container .slides_item {

		width:300px;

		height:118px}

	

	#slides .next, #slides .prev {

		top:40px;

		left:0px;

		background:url(../images/slider_arrows.png) -25px 0 no-repeat;	}

	

	#slides .next {

		left:275px;

		background:url(../images/slider_arrows.png) 0 0 no-repeat;	}

}



@media only screen and (min-width: 480px) and (max-width: 767px) {



	#slides {

		top:10px;

		height:182px;}

		

	.slides_container,

	.slides_container .slides_item {

		width:460px;

		height:182px}

	

	#slides .next, #slides .prev {

		left: -25px;

        top:75px;}

	

	#slides .next {

		left:460px;}



}



@media only screen and (min-width: 768px) and (max-width: 989px) {

	

	#slides {

		top:10px;

		left:25px;

		height:274px;}

		

	.slides_container,

	.slides_container .slides_item {

		width:694px;

		height:274px}

	

	#slides .slides_container {

		-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);

		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);

		background:#232323}

	

	.paginationBody {

		top:214px;

		right:65px;}

	

	.caption {

		height:66px;

		width:600px;

		padding:20px 56px 0 38px;}

	

	#slides .next, #slides .prev {

		top:115px;}

	

	#slides .next {

		left:694px;}

		

}




@media (max-width:980px)
{
    .container.four_image .baners_top
    {   max-width: 480px; left: 0; right: 0; margin: auto;        
    }
    .middle .container
    {   padding-top: 150px !important;        
    }
}
@media (max-width:767px)
{
    .baner-item
    {   width: 47%;        
    }
    .baner-item img
    {   width: 100%;        
    }
}

@media (max-width: 480px)
{
    .middle .container
    {   padding-top: 0px !important;         
    }
    .baner-item img
    {   width: 100%; height: auto;        
    }
    .baner-item
    {	width: 210px;    	
    }
}