.news{
    width: 100%;
}
.news .backgroundImg{
    width: 100%;
    height: 470px;
    position: relative;
}
.news .backgroundImg .background{
    width: 100%;
    height: 470px;
    overflow: hidden;
}
.news .listBox{
    width: 100%;
    padding-top: 30px;
}
.news .listBox .tabsBox{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(158,158,158,0.17);
    margin-bottom: 60px;
    
}
.news .listBox .tabs{
    width: 1200px;
    height: 60px;
    margin: 0 auto;
}
.news .listBox .tab{
    float: left;
    width: 300px;
    height:60px;
    text-align: center;
    line-height: 60px;
}
.news .listBox .tab span{ 
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: #333333;
    display: inline-block;
    margin: 0 auto;
    cursor: pointer;
}
.news .listBox .tabs span:hover{
    color:#FF4936;
    border-bottom: 2px solid #FF4936;
}
.news .listBox .tabs span.active{
    color:#FF4936;
    border-bottom: 2px solid #FF4936;   
}
.news .listBox .list{
    width: 1200px;
    height:918px;  
    margin: 0 auto;
    margin-bottom: 50px;
}
.news .listBox ul li{
    float: left;
    width:370px;
    height:370px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 3px 0px rgba(184,184,184,0.34);
    padding: 20px;  
    overflow: hidden; 
    margin-right:45px;
    margin-bottom: 50px;
    cursor: pointer;
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s;
}
.news .listBox ul li:hover{
    box-shadow:0px 0px 17px 0px rgba(184,184,184,0.34);
}
.news .listBox ul li:nth-child(3n){
    margin-right:0;
}
.news .listBox ul li .top{
    width:330px;
    height:50px;
    /* border-bottom: 1px solid rgba(235,235,235,1); */
}
.news .listBox ul li .top h3{
    width:330px;
    height:40px;
    font-size:16px;
    font-family:MicrosoftYaHei;
    color:rgba(51,51,51,1);
    line-height:20px;
    margin-bottom: 14px;
    transition: color .3s;
    -webkit-transition: color .3s;
    overflow:hidden;
    /* overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap */
}
.news .listBox ul li .top p{
    width:330px;
    height:16px;
    font-size:12px;
    font-family:MicrosoftYaHei;
    color:rgba(153,153,153,1);
    line-height:16px;

}
.news .listBox ul li .top p span{
    display: inline-block;
    width: 209px;
    height:16px;
    font-size:12px;
    font-family:MicrosoftYaHei;
    color:rgba(153,153,153,1);
    line-height:16px;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
 }
.news .listBox ul li .top p .left{
    margin-right: 40px;
    width:67px;
    
}
.news .listBox ul li .jianjie{
    width:330px;
    height:77px;
    font-size:14px;
    font-family:MicrosoftYaHei;
    color:#999999;
    line-height:19px;
    /* margin: 20px 0 35px; */
    overflow: hidden;
}
.news .listBox ul li .bot{
    width:330px;
    height:210px;
    overflow: hidden;
    position: relative;
}
.news .listBox ul li .bot .moreBox{
    width:80px;
    height:30px;
    background:rgba(229,229,229,1);
    border-radius:2px 2px 0px 0px;
    position: relative;
}
.news .listBox ul li .bot .moreBox .more{
    width:80px;
    height:30px;
    line-height: 30px;
    text-align: center;
    border-radius:2px 2px 0px 0px;
    font-size:12px;
    font-family:MicrosoftYaHei;
    color:rgba(255,255,255,1);  
    position: absolute;
    left: 0;
    top: 0;
}
.news .listBox ul li .bot .moreBox .moreActive{
    width:0px;
    height:30px;
    background:rgba(255,73,54,1);
    transition: width .5s;
    -webkit-transition: width .5s;
    position: absolute;
    left: 0;
    right: 0;  
}
.news .listBox ul li .bot .sanjiao{
    display: inline-block;
    width: 0px; 
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color:  #ffffff transparent transparent transparent;
    position: absolute;
    left: 155px;
    top: 0px;
    -webkit-transition: top .3s;
    transition: top .3s;
    z-index: 1;
}
.news .listBox ul li .bot .imgbox{
    width: 330px;
    height: 200px;
    overflow: hidden;
}
.news .listBox ul li .bot .imgbox img{
    width: 330px;
    height: 200px;
     transition: transform .7s;
    -webkit-transition: transform .7s; 
}
.news .listBox ul li .bot .solid{
    position: absolute;
    top: 50px;
    left: 20px;
    width:290px;
    height:160px;
    border:1px solid rgba(255,255,255,1);
    opacity: 0;
    z-index: 1;
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
}
.news .listBox ul li .bot .jia{
    position: absolute;
    top: 50px;
    left: 145px;
    width:32px;
    height:32px;
    background:rgba(0,0,0,0.5);
    text-align: center;
    line-height: 32px;
    color:rgba(255,255,255,1);
    opacity: 0;
    z-index: 1;
    transition: top .5s,opacity .3s;
    -webkit-transition: top .5s,opacity .3s;

}
.news .listBox ul li:hover .top h3{
    color:rgba(255,73,54,1);    
}
.news .listBox ul li:hover .bot .solid{
    /* z-index: 1; */
    opacity: 1;
}
.news .listBox ul li:hover .bot .jia{
    opacity: 1; 
    top: 114px;

}
.news .listBox ul li:hover .bot .sanjiao{
    top: 30px;
}
.news .listBox ul li:hover .bot .imgbox img{
    transform: scale(1.2);/*鼠标经过图片放大的倍数*/
}
.news .listBox ul li:hover .bot .moreBox .moreActive{
    width:80px;
    /* opacity: 1;     */
}