.scrollpic{max-width:1048px;min-height:550px;margin:20px auto;}
#myscroll{display:block; width:100%; position:relative; height:1130px; overflow:hidden;}
#myscroll #myscrollbox{display:block; float:left; position:absolute; left:0; top:0; width:1200px;}
#myscroll ul{display:block; float:left; list-style-type:none; padding:0; margin:0;}
#myscroll ul li{display:block; float:left;  overflow:hidden; width: 400px; margin-bottom: 6px;}
#myscroll ul li a{display:block; float:left; width:384px; margin: 5px; position:relative;  color:#333;}
#myscroll a .intro{position:absolute; left:0; z-index:10; background-color: rgb(255 255 255 / 65%);;padding:0 10px;}
#myscroll a .intro h5{ font-size:16px; font-weight:bold; padding:0 47px 0 15px;  height:40px; width:180px; line-height:40px;  }
#myscroll a .intro p{font-size:13px; line-height:20px; margin:10px 15px; height:40px; overflow:hidden;}
#myscroll a .intro{bottom:-61px;width: 100%;}
#myscroll a:hover .intro{bottom:0px;}

#mybtns{margin:10px; width:100%; display:block; height:42px;}
#mybtns a{width:42px; height:42px; display:block; float:left; margin-right:1px; background-color: #c1c1c1;}
#mybtns a:hover{background-color: #d7000f;}
#mybtns a:hover, #myscroll, #mybtns a,#myscroll a:hover .intro, #myscroll a .intro,#myscroll #myscrollbox{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
 
@media(min-width:1200px){
.scrollpic{max-width:1200px; width:100%;}
#myscroll{width:1200px;}
}
@media(max-width:1571px){
.scrollpic{max-width:1310px; width:100%;}
#myscroll{width:1310px;}
}
@media(max-width:1309px){
.scrollpic{max-width:1048px; width:100%;}
#myscroll{width:1048px;}
}
@media(max-width:1047px){
.scrollpic{max-width:786px; width:100%;}
#myscroll{width:786px;}
}
@media(max-width:767px){
.scrollpic{max-width:524px; width:100%;}
#myscroll{width:524px;}
}
@media(max-width:523px){
.scrollpic{max-width:262px; width:100%;}
#myscroll{width:262px;}
}