﻿.img-fill{width:100%}
.banner{margin-top:5.3rem}
.news-type {
    display: flex;
    justify-content: center;
    line-height: 5rem;
    font-size: 1.25rem;
    border-bottom: 1px solid #d7d4d4;
}
.news-type .type{margin:0 1.5rem;color:#898989}
.news-type .type.active{color:#000;border-bottom:3px solid #6e8d4a;font-size:1.35rem}

.news-wrap{padding: 7rem 12%;text-align:center;}

.item_news{
    display:flex;
    margin-bottom:2.5rem
}
.news_pic {
    width: 35%;
    line-height: 0;
}
.news_content {
    flex: 1;
    text-align: left;
    padding: 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #f3f3f3;
}
.news_type{color:#6e8d4a}
.news_title{
    font-weight:bold;
    font-size:1.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.know-More {
    display: flex;
    align-items: center;
    color: #5a5a5a;
    width: max-content;
}
.arrow-line {
    height: 1px;
    background: #5a5a5a;
    width: 40px;
    margin-left: 10px;
    transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
}
.arrow-right {
    width: 5px;
    height: 5px;
    border-top: 5px solid transparent;
    border-left: 5px solid;
    border-bottom: 5px solid transparent;
}
.news_b {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #5a5a5a;
}
.item_news:hover .news_content {
    background: #6e8d4a;
    color: #fff;
}
.item_news:hover .news_type {
    color: #fbe399;
}
.item_news:hover .news_b {
    color: #fff;
}
.item_news:hover .news_content .know-More {
    color: #fbe399;
}
.item_news:hover .news_content .arrow-line {
    background: #fbe399;
}
.moreBtn {
    text-align: center;
    display: inline-block;
    margin-top: 3rem;
    padding: 0 3rem;
    font-size: 1.25rem;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    line-height: 3rem;
}

@media screen and (max-width:700px) {
    .types{margin:0}
    .types p{flex:1;padding:0}
    .item_news{flex-direction:column}
    .news_pic,.news_content{width:100%;}
    .news_content{padding:2rem}
    .news_b{margin-top:2rem}
    .look_f{display:none}
}