.main{width: 100%;}

.y4{width: 100%;position: relative;}

.y4 .y4tab{margin-top: 50px;text-align: center;}

.y4tab li{display: inline-block;margin-bottom: 10px;

    border-top: #dddddd 1px solid;

    border-bottom: #dddddd 1px solid;

    margin-right: 45px;text-align: center;line-height: 35px}

.y4tab li:hover{background:#71B100}

.y4tabhover{background:#e33151}

.y4tab li:hover a{color: #fff;}

.y4tab li a{color: #000;font-size: 16px;}



.y5{width: 100%;position: relative;}

.y5 ul{width: 100%;float: left;margin-top: 50px;}

.y5 ul li{width: 25%;height: 310px;float: left;overflow: hidden;position: relative;}

.y5 ul li span{position: absolute;bottom: 0;left: 0;

    width: 100%;height: 0px;

    color: #fff;

    text-align: center;

    background: #71B100;

    filter:alpha(opacity=80);  

    -moz-opacity:0.8;  

    -khtml-opacity: 0.8;  

    opacity: 0.8;    

   

    transition:height 1s;

    -moz-transition: height 1s;

    -webkit-transition: height 1s; 

    -o-transition: height 1s; 

}



.y5 ul li:hover span {height: 310px;} 

.y5 ul li span p{margin-top: 135px;font-size: 18px;}



.y5 ul li .y5share{position: absolute;top:0;right: 0;display: none;width: 61px;height: 61px;}

.y5 ul li:hover .y5share{display: block;}

.y5 ul li .y5op {position: absolute;top:0;left:0;width: 200px;height: 20px;}

.y5 ul li .y5share:hover #y5op{display: block;}



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

    .y5 ul li{width: 50%;height: 150px;margin-bottom: 10px;}

}