.news{
    background: #F7F7F7;
    overflow: hidden;
}
.news .nav{
    width: 100%;
    height: 120px;
    background: #F7F7F7;
    padding-top: 35px;
}
.news .nav .content{
    text-align: center;
}
.news .nav .content a{
    display: inline-block;
    margin-right: 20px;
    width: 160px;
    height: 50px;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    text-align: center;
    line-height: 50px;
    font-size:18px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(38,38,38,1);
    transition-duration: .3s;
    border-radius: 50px;
}
.news .nav .content a:last-of-type{
    margin-right: 0;
}
.news .nav .content a.on,.news .nav .content a:hover{
    background: #9B1C22;
    border-color: #9B1C22;
    color: #fff;
}
.news>.content{
    background: #FFF;
}
.news .content .item{
    display: block;
    width: 100%;
    padding:30px;
    height: 240px;
    border-bottom: 1px solid #E6E6E6;
    box-sizing: border-box;
    transition-duration: .3s;
}
.news .content .item .imgBox{
    width: 280px;
    height: 180px;
    float: left;
    overflow: hidden;
}
.news .content .item .imgBox img{
    width: 100%;
    height: auto;
}
.news .content .item .wordsBox{
    width: 690px;
    float: left;
    position: relative;
    height: 180px;
    margin-left: 30px;
}
.news .content .item .wordsBox h2{
    font-size:24px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(38,38,38,1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news .content .item .wordsBox h3{
    margin-top: 15px;
    font-size:16px;
    font-family:Microsoft YaHei;
    font-weight:400;
    line-height:30px;
    color:rgba(153,153,153,1);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news .content .item .wordsBox p{
    position: absolute;
    bottom: 0;
    font-size:12px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(153,153,153,1);
}
.news .content .item .dateBox{
    width: 110px;
    height: 100px;
    float: left;
    margin-top: 40px;
    margin-left: 30px;
    position: relative;
    overflow: hidden;
}
.news .content .item .dateBox h2{
    font-size:55px;
    font-family:Microsoft YaHei;
    font-weight:500;
    color:rgba(102,102,102,1);
    border-bottom: 1px solid #999999;
    text-align: center;
    width: fit-content;
    width: -moz-fit-content;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}
.news .content .item .dateBox p{
    font-size:16px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(153,153,153,1);
    text-align: center;
}
.news .content .item .dateBox .mask{
    width: 100%;
    height: 100%;
    border-left: 1px solid #9B1C22;
    background:#FFF url("../images/na.png") no-repeat center center;
    top: 0;
    right: -100%;
    position: absolute;
    transition-duration: .3s;
}
.news .content .item:hover{
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
}
.news .content .item:hover .wordsBox h2,.news .content .item:hover .wordsBox p{
    color: #9B1C22;
}
.news .content .item:hover .dateBox .mask{
    right: 0;
}
.news .content2{
    width: 1200px;
    margin: 0 auto;
    background: #FFF;
    padding: 30px;
}
.news .content2 .item2{
    display: block;
    width: 360px;
    height: 300px;
    float: left;
    margin-right: 30px;
    cursor: pointer;
}
.news .content2 .item2:nth-of-type(3n){
    margin-right: 0;
}
.news .content2 .item2 .imgBox{
    width: 360px;
    height: 240px;
    position: relative;
    overflow: hidden;
}
.news .content2 .item2 .imgBox>img{
    width: 100%;
    height: auto;
}
.news .content2 .item2 .imgBox>.mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: -100%;
    left: 0;
    background: rgba(0, 0, 0,0.6);
    transition-duration: .3s;
}
.news .content2 .item2 .imgBox>.mask img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.news .content2 .item2 .wordsBox{
    width: 100%;
    height: 60px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 60px;
    background: #F7F7F7;
    font-size:18px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color:rgba(38,38,38,1);
}
.news .content2 .item2:hover .imgBox .mask{
    top: 0;
}
.news .content2 .item2:hover .wordsBox{
    background: #9B1C22;
    color: #FFF;
}
.news .content2 .item2 .detail{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 5;
    display: none;
}
.news .content2 .item2 .detail .main{
    width: 960px;
    height: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 12px solid #9B1C22;
}
.news .content2 .item2 .detail .main .swiper-container {
    width: 100%;
    height: 100%;
}
.news .content2 .item2 .detail .main .swiper-slide{
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.news .content2 .item2 .detail .main img{
    width: 100%;
    height: auto;
}
.news .content2 .item2 .detail .detail-navigation{
    position: absolute;
    width: 50px;
    height: 50px;
    background: #FFF;
    border-radius: 50%;
    color: #9B1C22;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.news .content2 .item2 .detail .detail-navigation.detail-prev{
    left: -100px;
}
.news .content2 .item2 .detail .detail-navigation.detail-next{
    right: -100px;
}
.news .content2 .item2 .detail .close{
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    right: -25px;
    background: #FFF;
    text-align: center;
    border-radius: 50%;
    line-height: 50px;
    z-index: 2;
    font-size: 20px;
    color: #9B1C22;
}
.news .content2 .item2 .detail .close:hover,.news .content2 .item2 .detail .detail-navigation:hover{
    background: #9B1C22;
    color: #FFF;
}
#maxImg{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99;
    display: none;
}
#maxImg img{
    display: block;
    margin: 0 auto;
    height: 100%;
    width: auto;
}
#maxImg .close{
    position: absolute;
    width: 50px;
    height: 50px;
    right: 0;
    background: #FFF;
    text-align: center;
    border-radius: 50%;
    line-height: 50px;
    font-size: 20px;
    color: #9B1C22;
    z-index: 999;
}
#maxImg .close:hover{
    background: #9B1C22;
    color: #FFF;
}

.news-nav{
    width: 1200px;
    margin: 40px auto;
    background: #FFF;
}
.news-nav .item{
    width: 100%;
    border: 1px solid #E6E6E6;
    height: auto;
}
.news-nav .item.two{
    border-top: 0;
}
.news-nav .item .titleBox{
    width: 98px;
    float: left;
    line-height: 60px;
    border-right: 1px solid #E6E6E6;
    text-align: center;
}
.news-nav .item .selectBox{
    width: 1100px;
    height: auto;
    padding-bottom: 12px;
    padding-left: 10px;
    float: left;
}
.news-nav .item .selectBox a{
    display: block;
    float: left;
    height: 35px;
    margin-top: 12px;
    padding:0 26px;
    line-height: 35px;
    font-size:14px;
    font-weight:400;
    color:rgba(102,102,102,1);
    border-radius: 5px;
}
.news-nav .item .selectBox a.on{
    background: #CC0000;
    color: #fff;
}