/* scrollpic */
.scrollpic{width:976px;height:351px; background:url(../images/ysindex_r6_c2.jpg) center 0 no-repeat; text-align:center; margin:auto; position:relative}
#myscroll{display:block; position:relative; height:351px; overflow:hidden;position:relative}
#myscroll #myscrollbox{display:block; float:left; position:absolute; left:6%; top:0;width:100000px; }
#myscroll ul{display:block; float:left; list-style-type:none; padding:0; margin:0;}
#myscroll ul li{display:block; float:left; padding:0; margin:0;  }
.coll{ width:100%; }
.y_l{ float:left; margin-top:5%; margin-right:30px  }
.y_r{ float:right;margin-top:5%; text-align:left; color:#666; font-size:14px; margin-right:30px;}
.y_r h5{ font-size:24px; color:#0787EA; font-weight:bold; padding:3% 0}
#myscroll a .intro{position:absolute; left:0; z-index:10; background-color:rgba(255,255,255,.80); padding:0 10px;}
#myscroll a .intro h5{padding:0; margin:0; font-size:16px; font-weight:bold; padding:0 47px 0 15px; background:url(images/go.png) right no-repeat; height:40px; width:180px; line-height:40px; border-bottom:1px solid rgba(215,0,15,.2);}
#myscroll a .intro p{font-size:13px; line-height:20px; margin:10px 15px; height:40px; overflow:hidden;}
#myscroll a .intro{bottom:-61px;}
#myscroll a:hover .intro{bottom:0px;}

#mybtns{ width:100%; display:block; height:42px; text-align:center; margin:auto; padding-top:20px;}
#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;
}
#mybtns #left{background-image:url(../images/jt_l.png); margin-left:45%}
#mybtns #right{background-image:url(../images/jt_r.png);}

@media(min-width:1572px){
.scrollpic{max-width:976px; width:100%;}
#myscroll{width:786px; }
}
@media(max-width:1571px){
.scrollpic{max-width:976px; width:100%;}
#myscroll{width:786px;}
}
@media(max-width:1309px){
.scrollpic{max-width:964px; width:100%;}
#myscroll{width:786px;}
}
@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%; background:none; height:250px}
#myscroll{width:262px; height:250px}
.y_r{ float:none;margin-top:5%; text-align:left; color:#666; font-size:14px; width:262px ; margin-right:0}
#myscroll #myscrollbox {
    display: block;
    float: left;
    position: absolute;
    left: 0%;
    top: 0;
    width: 100000px;
}
#mybtns{ width:100%; display:block; height:42px; text-align:center; margin:auto; padding-top:0px;}
#mybtns #left {
    background-image: url(../images/jt_l.png);
    margin-left: 35%;
}
}