.Banner {
        position: relative;
}

.list {
        position: absolute;
        right: 17.7%;
        bottom: 20px;
        text-align: center;
        color: #fff;
        font-size: 20px;
}

.list span {
        font-size: 34px;
}

.banner a::before {
        content: '';
        display: block;
        width: 100%;
        height: 137px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 1);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.banner a {
        display: block;
        position: relative;
}

.bannerPic {
        padding-bottom: 41.67%;
}


.banner .slick-prev {
        width: 50px;
        height: 50px;
        left: 13.56%;
        margin: 0;
        top: calc(100% - 75px);
        background: url(../images/prev.png) no-repeat;
}

.banner .slick-prev:hover {
        background: url(../images/prev2.png) no-repeat;
}

.banner .slick-next {
        width: 50px;
        height: 50px;
        right: 13.56%;
        margin: 0;
        top: calc(100% - 75px);
        background: url(../images/next.png) no-repeat;
}

.banner .slick-next:hover {
        background: url(../images/next2.png) no-repeat;
}

.banner .slick-dots {
        bottom: 38px;
        left: 17.71%;
        display: inline-block;
        width: auto;
}

.banner .slick-dots li {
        width: 60px;
        height: 10px;
}

.banner .slick-dots li button {
        background: none;
        border: 1px solid #fff;
        width: 10px;
        transition: all .3s ease-in-out;
}

.banner .slick-dots li.slick-active button {
        background: #fff;
        width: 60px;
        height: 6px;
        border-radius: 6px;
}

/* main */
main {
        display: block;
}

/* mode1 */
.mode1 {
        overflow: hidden;
}

.title {
        padding: 50px 0 30px;
}

.tit {
        display: inline-block;
        color: #333;
        vertical-align: bottom;
}

.more {
        color: #397848;
        font-weight: bold;
        display: inline-block;
        margin-left: 2.1%;
        vertical-align: bottom;
        font-family: 'BerlinSansFBDemi-Bold';
}

.mode1Ul {
        margin: 0 -20px;
        overflow: hidden;
}

.mode1Ul li {
        width: 50%;
        float: left;
        margin-bottom: 50px;
}

.mode1Ul li a {
        display: block;
        margin: 0 20px;
        background: #fff;
        padding: 50px 30px;
        box-sizing: border-box;
}

.time {
        padding-left: 30px;
        color: #999;
        position: relative;
        margin-bottom: 30px;
}

.time::before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background: url(../images/time.png) no-repeat;
        position: absolute;
        left: 0;
        top: 0;
}

.mode1txt {
        line-height: 28px;
        height: 56px;
        overflow: hidden;
        color: #333;
        margin-bottom: 50px;
}

.mode1Pic {
        padding-bottom: 64.2%;
}

.mode1Ul2 {
        margin: 0 -20px;
        overflow: hidden;
}

.mode1Ul2 li {
        width: 50%;
        float: left;
        margin-bottom: 30px;
        transition: all .3s ease-in-out;
}

.mode1Ul2 li a {
        display: block;
        margin: 0 20px;
        overflow: hidden;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding-bottom: 30px;
}

.time2 {
        color: #999;
        margin-left: 10px;
}

.mode1txt2 {
        padding-left: 16px;
        position: relative;
        transition: all .3s ease-in-out;
}

.mode1Ul2 li:hover {
        transform: translateX(4px);
}

.mode1Ul2 li:hover .mode1txt2 {
        padding-left: 20px;
}

.mode1Ul2 li:hover .mode1txt2::before {
        width: 10px;
        border-radius: 6px;
}

.mode1txt2::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: #397848;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: calc(50% - 3px);
        transition: all .3s ease-in-out;
}

.mode1Ul2 li:nth-child(5) a, .mode1Ul2 li:nth-child(6) a {
        border: none;
}
/* mode2 */
.mode2{
        overflow: hidden;
}
.mode2Ul li a{
        background: #65A392;
        color: #fff !important;
}
.mode2Ul .time {
        color: #fff !important;
}

.mode2Ul .time::before {
        background: url(../images/time2.png) no-repeat;
       
}
.mode2Ul .mode1txt{
        color: #fff !important;
        font-weight: bold;
}
.mode2 .title{
        padding-top: 35px;
}
.mode2 .mode1Ul li{
        margin-bottom: 0;
}
/* mode3 */
.mode3{
        overflow: hidden;
        padding-bottom: 120px;
        box-sizing: border-box;
        background: url(../images/mode3.png) no-repeat;
        background-size: cover;
}
.mode3 .tit{
        color: #397848;
}
.mode3 .title{
        padding: 50px 0 65px;
}
.mode3Bot{position: relative;}
.mode3Bot::before{
        content: '';
        display: block;
        width: 150%;
        height: 1px;
        background: #397848;
        position: absolute;
        left: -150%;
        top: 15px;
}
.mode3Bot::after{
        content: '';
        display: block;
        width: 150%;
        height: 1px;
        background: #397848;
        position: absolute;
        right: -150%;
        top: 15px;
}
.mode3Ul{
        position: relative;
        z-index: 10;
        /* margin: 0 -10px; */
        /* overflow: hidden; */
}
.mode3Ul a::before{
        content: '';
        display: block;
        width: calc(50% - 15px);
        height: 1px;
        background: #397848;
        position: absolute;
        left: 0;
        top: 15px;
}
.mode3Ul a::after{
        content: '';
        display: block;
        width: calc(50% - 15px);
        height: 1px;
        background: #397848;
        position: absolute;
       right: 0;
        top: 15px;
}
.mode3Ul li{
        width: calc(100% / 4);
        float: left;
}
.mode3Ul li a{
        display: block;
        /* margin: 0 10px; */
        text-align: center;
        /* overflow: hidden; */
        position: relative;
}
.mode3Ul li.on .mode3Top i{
        background: #397848;
}
.mode3Ul li.on .mode3txt{
        top: 70px;
}
.mode3Ul li.on .mode3txt::before{
        width: 50px;
        height: 50px;
        top: -69px;
}
.mode3Ul li.on  .mode3txt{
        color: #397848;
}
.mode3Top{
        margin-bottom: 30px;
}
.mode3Top i{
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid #397848;
        transition: all .3s ease-in-out;
}
.mode3txt{
        color: #333;
        position: relative;
        top: 10px;
        transition: all .3s ease-in-out;
}
.mode3txt::before{
        content: '';
        transition: all .3s ease-in-out;
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: calc(50% - 25px);
        top: 0;
        background: url(../images/jt.png) no-repeat;
}
@media screen and (max-width: 1600px) {
        .banner .slick-prev {
                left: 4.56%;

        }


        .banner .slick-next {
                right: 4.56%;

        }

        .banner .slick-dots {
                left: 8.71%;
        }

        .list {
                right: 9.7%;
                bottom: 26px;

        }
}

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

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

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

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



@media screen and (max-width:996px) {
        .list {
                right: 10.7%;
                bottom: 30px;
        }

        .mode1Ul li a {
                padding: 40px 20px;
                margin: 0 10px;
        }

        .mode1Ul2 li a {
                margin: 0 10px;
                padding-bottom: 15px;
        }

        .mode1Ul, .mode1Ul2 {
                margin: 0 -10px;
        }

        .mode1Ul li, .mode1Ul2 li {
                margin-bottom: 20px;
        }

        .mode1txt {
                margin-bottom: 30px;
        }

        .time {
                margin-bottom: 20px;
        }

}

@media screen and (max-width:767px) {
        .mode1Ul li, .mode1Ul2 li {
                width: 100%;
        }

        .mode1Ul2 li:nth-child(5) a {
                border-bottom: 1px solid rgba(0, 0, 0, .1);
        }
        .mode2 .title {
                padding-top: 0;
            }
            .mode1txt{
                height: auto;
                font-size: 1.8rem;
            }
            .mode2 .mode1Ul li{
                margin-bottom:20px;
        }
}

@media screen and (max-width:600px) {
        .list {
                display: none;

        }

        .banner .slick-dots {
                left: 12.71%;
        }

}

@media screen and (max-width:479px) {
        .banner a::before {
                height: 45px;
        }

        .banner .slick-dots li {
                width: 30px;

        }


        .banner .slick-dots li.slick-active button {
                width: 30px;

        }

        .banner .slick-dots {
                left: 15.71%;
                bottom: 10px;
        }

        .banner .slick-prev {
                left: 4.56%;
                top: calc(100% - 48px);
        }


        .banner .slick-next {
                right: 4.56%;
                top: calc(100% - 48px);

        }

        .list {
                display: block;
                right: 13.7%;
                bottom: 7px;
        }
        .title {
                padding: 26px 0 20px !important;
            }
            .mode1Ul li a {
                padding: 20px 10px;
                margin: 0 10px;
            }
            


}

@media screen and (max-width:414px) {
        .list {
                display: none;

        }
}