/* ------------------------banner--------------------------- */



.banner {

    width: 100%;

    overflow: hidden;

}



.banner img {

    width: 100%;

    object-fit: cover;

}



/* ------------------------sun-nav--------------------------- */



.sun-nav {

    width: 100%;

    height: 60px;

    background-color: rgba(255, 255, 255, 0.9);

    position: absolute;

    margin-top: -60px;

}



.sun-nav ul {

    text-align: center;

    font-size: 0;

}



.sun-nav ul li {

    display: inline-block;

    width: 600px;

    text-align: center;

    font-size: 16px;

    color: #171717;

    line-height: 60px;

    cursor: pointer;

    transition: all .5s ease;

    -moz-user-select: none;

    -webkit-user-select: none;

    -ms-user-select: none;

    -khtml-user-select: none;

    user-select: none;

}



.sun-nav-active {

    background-color: #00a54f;

    color: #fff !important;

}



.sun-nav ul li:hover {

    background-color: #00a54f;

    color: #fff;

}



/* --------------------------------matter-list--------------------------------- */



.matter-box {

    width: 100%;

}



.matter-list {

    width: 1200px;

    margin: 0 auto;

    overflow: hidden;

    padding: 30px 0 60px 0;

}

.matter-list ul{

    margin-left: -1.2%;

}

.matter-list ul li{

    float: left;

    width: 31.8%;

    margin-left: 1.5%;

    margin-top: 30px;

    -moz-box-shadow: 0 6px 6px 0px #fafafa;

    -webkit-box-shadow: 0 6px 6px 0px #fafafa;

    box-shadow:  0 6px 6px 0px #fafafa;

}

.matter-list ul li:hover{

    -moz-box-shadow: 0 10px 15px 0px #e6e6e6;

    -webkit-box-shadow: 0 10px 15px 0px #e6e6e6;

    box-shadow:  0 10px 15px 0px #e6e6e6;

}

.list-top{

    width: 100%;

    height: 266px;

    overflow: hidden;

}



.list-top img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: all 1s ease-in-out;

}

.list-top img:hover{

    /*transform: scale(1.1);*/

}



.list-bottom{

    width: 100%;

    height: 196px;

}



.list-bottom h2{

    width: 90%;

    margin-left: 5%;

    font-size: 14px;

    color: #00a54f;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    padding-top: 30px;

}

.list-bottom h3{

    width: 90%;

    margin-left: 5%;

    font-size: 18px;

    color: #333;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    margin-top: 8px;

}

.list-bottom h3:hover{

    color: #00a54f;

}

.list-bottom p{

    width: 90%;

    margin-left: 5%;

    height: 38px;

    overflow: hidden;

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    font-size: 14px;

    color: #8f8e8e;

    line-height: 18px;

    margin-top: 20px;

}

.list-bottom h4{

    font-size: 14px;

    color: #00a54f;

    margin-left: 5%;

    margin-top: 16px;

}

.list-bottom h4:hover{

    color: #18a097;

}



/* --------page------ */



.paging {

    width: 100%;

    height: 26px;

    margin: 16px 0 100px 0;

    text-align: center;

}



.paging a {

    display: inline-block;

    background-color: #cdcdcd;

    color: #fff;

    text-align: center;

    font-size: 12px;

    margin: 0 2px 0 2px;

}



.paging .page-num-current{

    background-color: #00a54f;

}



.page-ud {

    width: 50px;

    height: 26px;

    line-height: 26px;

}



.page-num {

    width: 26px;

    height: 26px;

    line-height: 26px;

}



.page-active {

    background-color: #00a54f !important;

}



/* --------page------ */















/* -------------------------PC端--------------------------- */



@media all and (max-width:1700px) {}



@media all and (max-width:1460px) {}



@media all and (max-width:1380px) {}



@media all and (max-width:1300px) {}



@media all and (max-width:1280px) {}



@media all and (max-width:1240px) {

    .sun-nav ul li {

        width: 400px;

    }

    .matter-list {

        width: 100%;

    }

}

















/* ------------------------手机端-------------------------- */



@media all and (max-width:900px) {

    .sun-nav {

        width: 100%;

        height: auto;

        position: relative;

        margin-top: 0px;

    }

    .sun-nav ul li {

        display: block;

        float: left;

        width: 50%;

        font-size: 16px;

        line-height: 50px;

        border-bottom: 1px solid #f3f3f3;

    }

    .matter-list {

        width: 96%;

        margin-left: 2%;

        padding: 0px 0 30px 0;

    }

    .matter-list ul {

        margin-left: -1.5%;

    }

    .matter-list ul li {

        width: 48.5%;

        margin-left: 1.5%;

        margin-top: 20px;

    }

    .list-top {

        height: 170px;

    }

    .list-bottom h3 {

        font-size: 14px;

    }

    .list-bottom h4 {

        font-size: 13px;

    }

    .list-bottom p {

        font-size: 12px;

    }





}