@charset "utf-8";
/* CSS Document */

.scroll{width:1100px; margin:30px auto 0px auto; overflow:hidden;}
.scroll_left{width:23px;height:210px;background:url(../img/left_btn.png) no-repeat;float:left; margin-top:0px;}
.scroll_left:hover {background:url(../img/left_btn_red.png) no-repeat;}
.scroll_right{width:23px;height:210px;background:url(../img/right_btn.png) left no-repeat;float:left; margin-top:0px; float:right;}
.scroll_right:hover {background:url(../img/right_btn_red.png) left no-repeat;}
.pic{float:left; padding-left:2px; overflow:hidden;}
.pic ul li{float:left;display:inline;width:265px;text-align:center;}
.pic ul li a img { width:255px; height:192px; padding:0px 0px;
	transition:All 0.4s ease-in-out;
	-webkit-transition:All 0.4s ease-in-out;
	-moz-transition:All 0.4s ease-in-out;
	-o-transition:All 0.4s ease-in-out;
}
.pic ul li a:hover img { opacity:0.7;}
.pic ul li a p { display:block; padding-top:8px; color:#454545; font-size:14px;}
.pic ul li a:hover p { color:#ec2c00;}


@media only screen and (max-width: 767px){
.scroll {
    width: 100%;
    margin: 0;
}
.pic{ max-width:65%;    margin-left: 12%;}
}



@media only screen and (max-width: 320px){
.pic{ max-width:80%;    margin-left: 2%;}
}