﻿

ul, ol, li, dl, dt, dd {
    margin: 0px;
    padding: 0px;
    list-style: url(none) none;
}

a {
    blr: expression(this.onFocus=this.blur());
    outline: none;
}

    a:link {
        color: #555555;
        text-decoration: none;
    }

    a:visited {
        color: #555555;
        text-decoration: none;
    }

    a:hover {
        color: #a32e00;
        text-decoration: none;
    }

    a:active {
        color: #555555;
        text-decoration: none;
    }

.nav {
    float: right;
    margin-top: 0;
    margin-right: 20px;
    height: 100px;
    padding-right: 2px;
}

    .nav li {
        width: 93px;
        margin-left: 1px;
        float: left;
        height: 100px;
        text-align: center;
        display: inline;
        line-height: 100px;
        font-size: 14px;
        font-family: "微软雅黑";
    }



    .nav a {
        color: #FFF !important;
    }

    .nav div {
        display: none;
    }

    .nav .nav_li div {
        overflow: hidden;
        width: 170px;
        background: #000000;
        opacity: 0.6;
        position: absolute;
        left: -40px;
        top: 100px;
        display: block;
        line-height: 26px;
        padding-bottom: 10px;
        z-index: 12;
    }

    .nav .nav_li {
        background: #de422e;
        position: relative;
        white-space: nowrap;
        z-index: 100;
    }

    .nav p a:hover {
        text-decoration: underline;
    }

.products {
    background: url(../images/products-bg.8902167.png) no-repeat;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    height: 100vh;
    position: relative;
    width: auto
}

    .products .products-content {
        position: absolute;
        top: 0;
        display: flex;
        width: 100%
    }

    .products .product {
        width: 100%;
    }

    .products .products-content .wrap {
        position: relative;
        width: 100%;
    }

    .products .products-serve {
        margin-left: 20px
    }

    .products .el-col {
        position: relative;
        width: 16.6%;
        overflow: hidden;
    }

        .products .el-col .products-tip {
            float: right;
            position: absolute;
            right: 0;
            z-index: 0
        }

        .products .el-col .products-idea {
            float: right;
            margin-bottom: 50px;
            margin-top: 117px;
            position: relative;
            right: 40px
        }

        .products .el-col .product-4 {
            margin-top: 0 !important;
            position: relative;
            z-index: 10
        }

        .products .el-col:nth-child(2n) .wrap {
            margin-top: 438px
        }

        .products .el-col:nth-child(odd) .wrap {
            margin-top: 230px
        }

        .products .el-col .cover {
            background-color: rgba(63,59,58,.75);
            box-sizing: border-box;
            display: none;
            height: 100%;
            left: 0;
            padding: 20px;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 10
        }

            .products .el-col .cover.active {
                display: block
            }

            .products .el-col .cover .border-box {
                height: 100%;
                position: relative;
                width: 100%
            }

                .products .el-col .cover .border-box .txt {
                    color: #fff;
                    font-size: 28px;
                    font-weight: 700;
                    position: absolute;
                    text-align: center;
                    top: 45%;
                    transition: all .28s ease-in .1s;
                    width: 100%
                }

                .products .el-col .cover .border-box .more {
                    bottom: 10%;
                    cursor: pointer;
                    left: 0;
                    margin: auto;
                    position: absolute;
                    right: 0;
                    text-align: center;
                    z-index: 20
                }

                    .products .el-col .cover .border-box .more a {
                        color: #eeb77a;
                        font-size: 14px
                    }

                        .products .el-col .cover .border-box .more a:hover {
                            color: #de412e
                        }

                .products .el-col .cover .border-box:after, .products .el-col .cover .border-box:before {
                    border: 1px solid transparent;
                    box-sizing: border-box;
                    content: " ";
                    height: 0;
                    position: absolute;
                    width: 0
                }

                .products .el-col .cover .border-box:before {
                    left: 0;
                    top: 0;
                    transition: border-color 0s ease-in .8s,width .2s ease-in .6s,height .2s ease-in .4s
                }

                .products .el-col .cover .border-box:after {
                    bottom: 0;
                    right: 0;
                    transition: border-color 0s ease-in .4s,width .2s ease-in .2s,height .2s ease-in
                }

                .products .el-col .cover .border-box:hover:after, .products .el-col .cover .border-box:hover:before {
                    height: 100%;
                    width: 100%
                }

                .products .el-col .cover .border-box:hover:after {
                    border-bottom-color: #eeb77a;
                    border-left-color: #eeb77a;
                    transition: border-color 0s ease-out .4s,width .2s ease-out .4s,height .2s ease-out .6s
                }

                .products .el-col .cover .border-box:hover:before {
                    border-right-color: #eeb77a;
                    border-top-color: #eeb77a;
                    transition: width .2s ease-out,height .2s ease-out .2s
                }

    .products .titleMore {
        color: #333;
        cursor: pointer;
        font-size: 19px;
        font-weight: 600;
        position: absolute;
        right: 8em;
        text-align: right;
        top: 46em
    }

@media screen and (max-width:1366px) {
    .products .el-col .products-idea {
        margin-bottom: 20px;
        margin-top: 60px
    }

    .products .el-col:nth-child(2n) .wrap {
        margin-top: 328px
    }

    .products .el-col:nth-child(odd) .wrap {
        margin-top: 150px
    }

    .products .titleMore {
        font-size: 16px;
        position: absolute;
        right: 6em;
        top: 42em
    }
}

@media screen and (min-width:1367px)and (max-width:1720px) {
    .products .el-col .products-idea {
        margin-top: 80px
    }

    .products:nth-child(2n) .wrap {
        margin-top: 378px
    }

    .products:nth-child(odd) .wrap {
        margin-top: 200px
    }

    .products .titleMore {
        font-size: 16px;
        position: absolute;
        right: 6em;
        top: 44em
    }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .products {
        padding-top: 80px
    }

        .products .products-content {
            top: 80px
        }

        .products .el-col .products-idea {
            margin-top: 80px
        }

        .products:nth-child(2n) .wrap {
            margin-top: 378px
        }

        .products:nth-child(odd) .wrap {
            margin-top: 200px
        }

        .products .titleMore {
            font-size: 24px;
            right: 10em;
            top: 47em
        }
}

.m-title {
    padding-top: 65px;
    text-align: center
}

    .m-title .title {
        font-size: 36px;
        line-height: 36px
    }

    .m-title .sub-title {
        height: 20px;
        margin: 20px auto 0;
        min-width: 418px;
        overflow: hidden
    }

        .m-title .sub-title > div {
            display: inline-block
        }

        .m-title .sub-title .left {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAAUCAYAAABVhbkHAAAAd0lEQVRoge3YywmAMBQF0RuxDu3AHqzdPgStxIWftVkEHZizfoEHA4GkrPMU/caQZEkyvp3t2u6j1gwIZ0A4A8IZEM6AcAaEMyCcAeH6nC/67etF9NhrhvvrQGmziyrdX2mveYXCGRDOgHAGhDMgnAHhDAhnQLgDmG0G/6NeeScAAAAASUVORK5CYII=) no-repeat;
            height: 20px;
            width: 112px
        }

        .m-title .sub-title .title {
            font-size: 16px;
            line-height: 20px;
            margin: 0 20px;
            vertical-align: top
        }

        .m-title .sub-title .right {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAAAUCAYAAAC6R9I5AAAAc0lEQVRoge3YwQmAMBAF0a9YR+zAHqzdErx7sBEtQRJFZZh33sDCwB7SbfNUkixJxlyrmdVL+q8X0H1GBDAigBEBjAhgRAAjAhgRwIgAQ8ObkuR4ehE1W1si7vHb7Vc8pwBGBDAigBEBjAhgRAAjAhgR4AQmHQZqva8GGQAAAABJRU5ErkJggg==) no-repeat;
            height: 20px;
            width: 113px
        }

@media screen and (max-width:1366px) {
    .m-title {
        padding-top: 35px
    }
}


.m-summary {
    background-color: #3f3b3a;
    height: 100vh;
    overflow: hidden;
}

    .m-summary .m-title {
        color: #de412e;
    }

    .m-summary .desc {
        margin-top: 56px
    }

        .m-summary .desc p {
            color: hsla(0,0%,100%,.65);
            font-size: 16px;
            line-height: 30px;
            text-align: center
        }

    .m-summary .more {
        margin-top: 69px !important
    }

    .m-summary .el-row {
        margin-top: 58px;
        display: flex;
        width: 100%;
    }

        .m-summary .el-row .el-col {
            width: 33%;
        }

        .m-summary .el-row .flip {
            margin-left: 10%;
            width: 80%;
            position: relative;
            transform: translateZ(0)
        }

            .m-summary .el-row .flip:hover .front {
                transform: rotateY(180deg)
            }

            .m-summary .el-row .flip:hover .back {
                transform: rotateY(0deg)
            }

        .m-summary .el-row .wrap {
            backface-visibility: hidden;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            transition: all .5s ease-in-out;
            width: 100%
        }

            .m-summary .el-row .wrap img {
                width: 100%
            }

        .m-summary .el-row .front {
            transform: rotateY(0deg)
        }

        .m-summary .el-row .back {
            transform: rotateY(180deg)
        }

        .m-summary .el-row .cover {
            background-color: rgba(81,84,89,.5);
            height: 100%;
            left: 0;
            position: absolute;
            text-align: center;
            top: 0;
            width: 100%;
            z-index: 2
        }

            .m-summary .el-row .cover .title {
                color: #fff;
                font-size: 30px;
                margin-top: 90px
            }

            .m-summary .el-row .cover .sub-title {
                color: #eeb77a;
                font-size: 16px;
                margin-top: 19px
            }

        .m-summary .el-row .back-cover {
            background: url(../images/back-bg.eb42e03.png) no-repeat;
            background-size: cover;
            height: 100%;
            left: 0;
            position: absolute;
            text-align: center;
            top: 0;
            width: 100%;
            z-index: 1
        }

            .m-summary .el-row .back-cover .title {
                color: #3f3b3a;
                font-size: 34px;
                font-weight: 700;
                line-height: 48px;
                margin-top: 50px
            }

            .m-summary .el-row .back-cover .sub-title {
                color: #999;
                font-size: 18px;
                line-height: 24px;
                padding: 0 50px
            }

@media screen and (max-width:1366px) {
    .m-summary .desc {
        margin-top: 36px
    }

    .m-summary .more {
        margin-top: 20px !important
    }

    .m-summary .el-row {
        margin-top: 20px
    }

        .m-summary .el-row .cover .title {
            font-size: 20px;
            margin-top: 50px
        }

        .m-summary .el-row .cover .sub-title {
            font-size: 16px;
            margin-top: 25px
        }

        .m-summary .el-row .back-cover .title {
            font-size: 20px;
            margin-top: 10px
        }

        .m-summary .el-row .back-cover .sub-title {
            font-size: 12px
        }
}

@media screen and (min-width:1367px)and (max-width:1720px) {
    .m-summary .more {
        margin-top: 49px !important
    }

    .m-summary .el-row {
        margin-top: 100px
    }

        .m-summary .el-row .cover .title {
            font-size: 24px;
            margin-top: 70px
        }

        .m-summary .el-row .cover .sub-title {
            font-size: 18px;
            margin-top: 25px
        }

        .m-summary .el-row .back-cover .title {
            font-size: 28px;
            margin-top: 30px
        }

        .m-summary .el-row .back-cover .sub-title {
            font-size: 14px
        }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .m-summary {
        padding-top: 80px
    }

        .m-summary .desc {
            margin-top: 56px
        }

            .m-summary .desc p {
                font-size: 20px;
                line-height: 40px
            }

        .m-summary .el-row {
            margin-top: 120px
        }

            .m-summary .el-row .cover .title {
                font-size: 36px;
                margin-top: 140px
            }

            .m-summary .el-row .cover .sub-title {
                font-size: 24px
            }

            .m-summary .el-row .back-cover .title {
                color: #3f3b3a;
                font-size: 34px;
                font-weight: 700;
                line-height: 48px;
                margin-top: 90px
            }

            .m-summary .el-row .back-cover .sub-title {
                color: #999;
                font-size: 24px;
                line-height: 35px;
                padding: 0 50px
            }
}


.read-more {
    border: 1px solid #de412e;
    color: #de412e;
    cursor: pointer;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    margin: 0 auto;
    text-align: center;
    width: 140px
}

    .read-more:hover {
        background-color: #de412e;
        color: #fff
    }

.m-publicity {
    background: #fff url(../images/publicity-bg.e416517.png) no-repeat 0;
    height: 100vh;
    width: 100%
}

    .m-publicity .el-row {
        width: 100%;
        margin-top: 180px;
        display: flex;
    }

        .m-publicity .el-row .el-col .item {
            margin-left: 230px
        }

            .m-publicity .el-row .el-col .item:first-of-type {
                margin-top: 20px
            }

            .m-publicity .el-row .el-col .item:nth-of-type(2), .m-publicity .el-row .el-col .item:nth-of-type(3) {
                margin-top: 40px
            }

            .m-publicity .el-row .el-col .item .topTitle {
                color: #333;
                font-size: 24px
            }

            .m-publicity .el-row .el-col .item .desc {
                color: #999;
                font-size: 16px;
                line-height: 28px;
                max-width: 528px
            }

            .m-publicity .el-row .el-col .item .sub-item {
                border-left: 6px solid #eeb77a;
                margin-top: 18px;
                padding-left: 30px
            }

                .m-publicity .el-row .el-col .item .sub-item p {
                    color: #3f3b3a;
                    font-size: 16px;
                    line-height: 30px
                }

                .m-publicity .el-row .el-col .item .sub-item .subNum {
                    font-size: 16px
                }

                    .m-publicity .el-row .el-col .item .sub-item .subNum .num {
                        color: red;
                        font-size: 34px;
                        font-weight: 700
                    }

        .m-publicity .el-row .el-col .video-wrap, .m-publicity .el-row .el-col .video-wrap .play-bg {
            height: 444px;
            margin-left: 100px;
            position: relative;
            width: 790px
        }

            .m-publicity .el-row .el-col .video-wrap .play-bg img {
                bottom: 0;
                cursor: pointer;
                height: 114px;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                top: 0;
                width: 117px
            }

        .m-publicity .el-row .el-col .film {
            box-shadow: 7px 10px 6px rgba(81,84,89,.45);
            outline: none;
            width: 790px
        }

@media screen and (max-width:1366px) {
    .m-publicity .el-row {
        margin-top: 80px
    }

        .m-publicity .el-row .el-col .item {
            margin-left: 130px
        }

            .m-publicity .el-row .el-col .item .topTitle {
                font-size: 22px
            }

            .m-publicity .el-row .el-col .item:first-of-type {
                margin-top: 0
            }

            .m-publicity .el-row .el-col .item:nth-of-type(2), .m-publicity .el-row .el-col .item:nth-of-type(3) {
                margin-top: 25px
            }

            .m-publicity .el-row .el-col .item .desc {
                font-size: 14px
            }

            .m-publicity .el-row .el-col .item .sub-item p {
                font-size: 12px;
                line-height: 18px
            }

            .m-publicity .el-row .el-col .item .sub-item .subNum {
                font-size: 12px
            }

                .m-publicity .el-row .el-col .item .sub-item .subNum .num {
                    font-size: 32px
                }

        .m-publicity .el-row .el-col .video-wrap {
            height: 314.7px;
            width: 560px
        }

            .m-publicity .el-row .el-col .video-wrap .play-bg {
                background-size: cover;
                height: 314.7px;
                width: 560px
            }

        .m-publicity .el-row .el-col .film {
            width: 560px
        }
}

@media screen and (min-width:1367px)and (max-width:1720px) {
    .m-publicity .el-row {
        margin-top: 120px
    }

        .m-publicity .el-row .el-col .item {
            margin-left: 140px
        }

            .m-publicity .el-row .el-col .item:first-of-type {
                margin-top: 10px
            }

            .m-publicity .el-row .el-col .item:nth-of-type(2), .m-publicity .el-row .el-col .item:nth-of-type(3) {
                margin-top: 45px
            }

            .m-publicity .el-row .el-col .item .topTitle {
                font-size: 22px
            }

            .m-publicity .el-row .el-col .item .desc {
                font-size: 14px
            }

            .m-publicity .el-row .el-col .item .sub-item p {
                font-size: 12px;
                line-height: 22px
            }

            .m-publicity .el-row .el-col .item .subNum {
                font-size: 12px
            }

                .m-publicity .el-row .el-col .item .subNum .num {
                    font-size: 32px
                }

        .m-publicity .el-row .el-col .video-wrap {
            height: 393.4px;
            width: 700px
        }

            .m-publicity .el-row .el-col .video-wrap .play-bg {
                background-size: cover;
                height: 393.4px;
                width: 700px
            }

        .m-publicity .el-row .el-col .film {
            width: 700px
        }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .m-publicity {
        padding-top: 80px
    }

        .m-publicity .el-row {
            margin-top: 180px
        }

            .m-publicity .el-row .el-col .item {
                margin-left: 230px
            }

                .m-publicity .el-row .el-col .item:first-of-type {
                    margin-top: 20px
                }

                .m-publicity .el-row .el-col .item:nth-of-type(2), .m-publicity .el-row .el-col .item:nth-of-type(3) {
                    margin-top: 75px
                }

                .m-publicity .el-row .el-col .item .topTitle {
                    font-size: 40px
                }

                .m-publicity .el-row .el-col .item .desc {
                    color: #999;
                    font-size: 24px;
                    line-height: 40px;
                    max-width: 828px
                }

                .m-publicity .el-row .el-col .item .sub-item {
                    border-left: 6px solid #eeb77a;
                    margin-top: 18px;
                    padding-left: 30px
                }

                    .m-publicity .el-row .el-col .item .sub-item p {
                        color: #3f3b3a;
                        font-size: 32px;
                        line-height: 60px
                    }

                    .m-publicity .el-row .el-col .item .sub-item .subNum {
                        font-size: 32px
                    }

                        .m-publicity .el-row .el-col .item .sub-item .subNum .num {
                            font-size: 60px
                        }

            .m-publicity .el-row .el-col .video-wrap, .m-publicity .el-row .el-col .video-wrap .play-bg {
                height: 644px;
                position: relative;
                width: 990px
            }

                .m-publicity .el-row .el-col .video-wrap .play-bg img {
                    bottom: 0;
                    cursor: pointer;
                    height: 114px;
                    left: 0;
                    margin: auto;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 117px
                }

            .m-publicity .el-row .el-col .film {
                box-shadow: 7px 10px 6px rgba(81,84,89,.45);
                outline: none;
                width: 790px
            }
}

.m-news {
    background: url(../images/news-bg.b953094.png) no-repeat 50%;
    background-color: #433f3f;
    background-size: 100%;
    height: 100vh;
    width: 100%
}

    .m-news .el-row {
        display: flex;
        padding-left: 100px;
        margin-top: 180px
    }

    .m-news .main-news {
        height: 350px;
        overflow: hidden;
        position: relative;
        width: 448px
    }

        .m-news .main-news img {
            height: 100%;
            width: 100%
        }

        .m-news .main-news .title {
            background-color: rgba(0,0,0,.7);
            bottom: 0;
            color: #fff;
            height: 60px;
            left: 0;
            line-height: 60px;
            position: absolute;
            text-indent: 15px;
            width: 100%
        }

    .m-news .news-wrap {
        margin-left: 30px;
        overflow: hidden
    }

    .m-news .same-news {
        float: left;
        overflow: hidden;
        padding-bottom: 20px;
        width: 50%
    }

        .m-news .same-news:nth-of-type(3), .m-news .same-news:nth-of-type(4) {
            margin-top: 70px
        }

        .m-news .same-news img {
            display: block;
            float: left;
            height: 140px;
            width: 180px
        }

        .m-news .same-news .wrap {
            float: left;
            margin-left: 30px;
            width: 289px
        }

            .m-news .same-news .wrap .title {
                color: #fff;
                font-size: 16px
            }

            .m-news .same-news .wrap .summary {
                color: #999;
                display: -webkit-box;
                font-size: 14px;
                margin-top: 20px;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden
            }

            .m-news .same-news .wrap .date {
                color: #999;
                font-size: 14px;
                margin-top: 5px
            }

    .m-news .more {
        margin-top: 110px !important
    }

@media screen and (max-width:1366px) {
    .m-news .el-row {
        margin-top: 60px
    }

    .m-news .main-news {
        margin-left: -40px
    }

    .m-news .news-wrap {
        margin-left: 10px
    }

    .m-news .same-news img {
        height: 80px !important;
        width: 120px !important
    }

    .m-news .same-news .wrap {
        width: 219px !important
    }

        .m-news .same-news .wrap .summary {
            margin-top: 5px
        }

    .m-news .more {
        margin-top: 40px !important
    }
}

@media screen and (min-width:1367px)and (max-width:1720px) {
    .m-news .el-row {
        margin-top: 120px
    }

    .m-news .main-news {
        margin-left: -30px
    }

    .m-news .same-news img {
        height: 80px !important;
        width: 120px !important
    }

    .m-news .same-news .wrap {
        width: 240px !important
    }

        .m-news .same-news .wrap .summary {
            margin-top: 10px
        }

    .m-news .more {
        margin-top: 80px !important
    }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .m-news {
        padding-top: 80px
    }

        .m-news .el-row {
            margin-top: 180px
        }

        .m-news .main-news {
            height: 450px !important;
            overflow: hidden;
            position: relative;
            width: 548px !important
        }

            .m-news .main-news img {
                height: 100%;
                width: 100%
            }

            .m-news .main-news .title {
                font-size: 18px
            }

        .m-news .news-wrap {
            margin-left: 30px;
            overflow: hidden
        }

        .m-news .same-news {
            float: left;
            overflow: hidden;
            padding-bottom: 40px;
            width: 50%
        }

            .m-news .same-news:nth-of-type(3), .m-news .same-news:nth-of-type(4) {
                margin-top: 70px
            }

            .m-news .same-news img {
                display: block;
                float: left;
                height: 220px;
                width: 280px
            }

            .m-news .same-news .wrap {
                float: left;
                margin-left: 30px;
                width: 389px
            }

                .m-news .same-news .wrap .title {
                    color: #fff;
                    font-size: 24px
                }

                .m-news .same-news .wrap .summary {
                    color: #999;
                    display: -webkit-box;
                    font-size: 18px;
                    margin-top: 20px;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden
                }

                .m-news .same-news .wrap .date {
                    color: #999;
                    font-size: 18px;
                    margin-top: 5px
                }

        .m-news .more {
            margin-top: 110px !important
        }
}

.m-cooperation {
    background: url(../images/links-bg-1.f99ba8b.png) bottom no-repeat,url(../images/links-bg-2.0610ebe.png) 0 no-repeat;
    height: 100vh;
    width: 100%
}

    .m-cooperation .desc {
        color: #333;
        font-size: 16px;
        margin-top: 80px;
        text-align: center
    }

    .m-cooperation .el-carousel {
        bottom: 100px;
        height: 490px;
        left: 0;
        margin: auto;
        right: 0;
        top: 250px
    }

        .m-cooperation .el-carousel .carousel__indicators {
            bottom: 30px
        }

        .m-cooperation .el-carousel .carousel__indicator {
            padding: initial
        }

        .m-cooperation .el-carousel .is-active .el-carousel__button {
            background-color: #de412e
        }

        .m-cooperation .el-carousel .el-carousel__button {
            background-color: #3f3b3a;
            border-radius: 50%;
            height: 12px;
            width: 12px
        }

    .m-cooperation .links {
        margin-top: 50px;
        overflow: hidden;
        width: 100%
    }

        .m-cooperation .links .el-col {
            border: 1px solid #eee
        }

        .m-cooperation .links li {
            background-color: #fff;
            border-bottom: 1px solid #eee;
            border-right: 1px solid #eee;
            box-sizing: border-box;
            float: left;
            height: 180px;
            overflow: hidden;
            position: relative;
            width: 20%
        }

            .m-cooperation .links li:nth-of-type(10), .m-cooperation .links li:nth-of-type(5) {
                border-right: none
            }

            .m-cooperation .links li:nth-of-type(10), .m-cooperation .links li:nth-of-type(6), .m-cooperation .links li:nth-of-type(7), .m-cooperation .links li:nth-of-type(8), .m-cooperation .links li:nth-of-type(9) {
                border-bottom: none
            }

            .m-cooperation .links li img {
                bottom: 0;
                left: 0;
                margin: auto;
                max-height: 90%;
                position: absolute;
                right: 0;
                top: 0;
                width: 90%
            }

@media screen and (max-width:1366px) {
    .m-cooperation .desc {
        margin-top: 10px
    }

    .m-cooperation .el-carousel {
        top: 250px
    }
}

@media screen and (min-width:1367px)and (max-width:1720px) {
    .m-cooperation .desc {
        margin-top: 40px
    }

    .m-cooperation .el-carousel {
        top: 250px
    }

    .m-cooperation .links {
        margin-top: 40px
    }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .m-cooperation {
        padding-top: 80px
    }

        .m-cooperation .desc {
            color: #333;
            font-size: 24px;
            margin-top: 80px;
            text-align: center
        }

        .m-cooperation .el-carousel {
            bottom: 100px;
            height: 690px;
            left: 0;
            margin: auto;
            right: 0;
            top: 300px
        }

            .m-cooperation .el-carousel .carousel__indicators {
                bottom: 30px
            }

            .m-cooperation .el-carousel .carousel__indicator {
                padding: initial
            }

            .m-cooperation .el-carousel .is-active .el-carousel__button {
                background-color: #de412e
            }

            .m-cooperation .el-carousel .el-carousel__button {
                background-color: #3f3b3a;
                border-radius: 50%;
                height: 12px;
                width: 12px
            }

        .m-cooperation .links {
            margin-top: 50px;
            overflow: hidden;
            width: 100%
        }

            .m-cooperation .links .el-col {
                border: 1px solid #eee
            }

            .m-cooperation .links li {
                background-color: #fff;
                border-bottom: 1px solid #eee;
                border-right: 1px solid #eee;
                box-sizing: border-box;
                float: left;
                height: 250px;
                overflow: hidden;
                position: relative;
                width: 20%
            }

                .m-cooperation .links li:nth-of-type(10), .m-cooperation .links li:nth-of-type(5) {
                    border-right: none
                }

                .m-cooperation .links li:nth-of-type(10), .m-cooperation .links li:nth-of-type(6), .m-cooperation .links li:nth-of-type(7), .m-cooperation .links li:nth-of-type(8), .m-cooperation .links li:nth-of-type(9) {
                    border-bottom: none
                }

                .m-cooperation .links li img {
                    bottom: 0;
                    left: 0;
                    margin: auto;
                    max-height: 90%;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 90%
                }
}

.m-footer {
    background: #3f3b3a url(../images/map-bg.b0d13a1.png) no-repeat;
    background-size: 100%;
    height: 100vh;
    width: 100%;
}

    .m-footer .el-row {
        display: flex;
        padding-left: 100px;
        padding-right: 100px;
    }

    .m-footer .map {
        background: url(../images/map.2c7865c.png) no-repeat;
        height: 410px;
        margin-top: 59px;
        position: relative;
        width: 510px
    }

        .m-footer .map .city {
            height: 38px;
            left: 300px;
            position: absolute;
            top: 187px;
            width: 96px
        }

        .m-footer .map .wave-wrap {
            height: 122px;
            left: 290px;
            position: absolute;
            top: 153px;
            width: 122px
        }

            .m-footer .map .wave-wrap .xu {
                bottom: 0;
                height: 24px;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                top: 0;
                width: 24px;
                z-index: 5
            }

                .m-footer .map .wave-wrap .xu img {
                    width: 100%;
                }

            .m-footer .map .wave-wrap .wave {
                border-radius: 122px;
                height: 30px;
                left: calc(50% - 15px);
                position: absolute;
                top: calc(50% - 15px);
                width: 30px
            }

            .m-footer .map .wave-wrap .wave0 {
                animation: w-5104eb5e 2s ease infinite forwards;
                background: linear-gradient(rgba(89,68,50,.1),rgba(128,82,38,.2));
                background-size: auto 106%;
                z-index: 2
            }

            .m-footer .map .wave-wrap .wave1 {
                animation: w-5104eb5e 2s ease 1s infinite forwards;
                background: linear-gradient(rgba(89,68,50,.2),rgba(128,82,38,.3));
                z-index: 3
            }

            .m-footer .map .wave-wrap .wave2 {
                animation: w-5104eb5e 2s ease 2s infinite forwards;
                background: linear-gradient(rgba(89,68,50,.3),rgba(128,82,38,.4));
                z-index: 4
            }

@keyframes w-5104eb5e {
    0% {
        height: 30px;
        left: calc(50% - 15px);
        top: calc(50% - 15px);
        width: 30px
    }

    to {
        height: 122px;
        left: calc(50% - 61px);
        top: calc(50% - 61px);
        width: 122px
    }
}

.m-footer .contact {
    margin-left: 37px;
    margin-top: 189px
}

    .m-footer .contact li {
        overflow: hidden
    }

        .m-footer .contact li:nth-of-type(2) {
            margin-bottom: 20px;
            margin-top: 20px
        }

    .m-footer .contact .icon {
        float: left;
        height: 30px;
        width: 30px
    }

    .m-footer .contact .right {
        float: left
    }

    .m-footer .contact .val {
        color: #fff;
        font-size: 16px;
        text-align: left;
        text-indent: 20px
    }

    .m-footer .contact .location, .m-footer .contact .mail {
        color: #fff;
        font-size: 16px;
        line-height: 30px;
        text-indent: 20px;
        white-space: nowrap
    }

    .m-footer .contact .phone {
        color: #fff;
        font-size: 24px;
        text-indent: 20px
    }

    .m-footer .contact .icon-location {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAACdklEQVRIib2WzUuUURjFzwyDkUFfRFq0yJCJ0qhF6KZFgoILJZlFbm2d7XKRCBEiraLPnX+A0EbEltKmoE1IZkSgbaYPUSSVYIxMfy3mDF5tnPedRnzgMPOc5+Pce9/7PjMCVAbqgSfADPDbmDFXX06vBKCYdkfSPUnfJT2X9NH8eUnXJZ2UdFfS/VjdYq7wAbAODABVReJVjq07N7JnHNEu8nYjRm6Pc7sqFU4Cn4CRgDsLjAM5Y9xcIT7immQlwk3eQaP9NLACTAE3jSlzaec0uqapEuHbQDbwR4F3QHXAVZsbDbisa3fsnYy4e7WSsoHfLumxpFzA5cy1B1zWtTtalHBO0v4gd5+k5SJ5y44V+h3YtriyhV9JuiTptKQNSe8lZYrkZRzbkHRG0kVJr0t2jnjGKeAb8NR+ty/OIHDMGDTX7ZxnrklVcrkE9AJrQIP9W8Aqm7ZqTsA58mO0N6rv9pF5SNKRwF+U9EvSW39ekfRH0lF/l4/0hx/bS0mHJV2WdNAo2JKklWJHnQLm2Wo9bL7Pa8BQiV0MOKfw/j7a1ms+PP6wsMUJGeCqURvE+4ANoLOIaCv5Od0XcPVBn4x7txQTfghMl9hRgvyQ+AlcCPg0sORYokT9tDX+Ef4ccZSFKTUJfAFOATWum2TrNCuGIeduEW7wUTRHFAs4DswCH7yLWS8gqq7ZGg2hcD8wR8QvSoA64KtRF7MmaY3+UPgNMByzQQEnjHJqhq0l+Zh2uq27jU5r1SQldXg4TJScrbtjE9bqSABjJq/tgbAkjUn5Mdcm6cUeicpabSlJC8rvdlFS7P+6/2kJay2I/LibY+9sDmj9C2ULpTqHVxEtAAAAAElFTkSuQmCC) 50% no-repeat
    }

    .m-footer .contact .icon-phone {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAeCAYAAADQBxWhAAACX0lEQVRIib2XPWgUURCAvyRGxCZETDT+JFECWhgMGAgWgqQTKxVBItiYxkLs7CSVWFpoI1pYBBRBiJaJitiEYBOQFOJPEX+JolGjkpj4WexbWPb27nbvJAPD7s57876dmXdzbxtUapRdwEy4fwNMAw+BO8BcJceGOqDNwCmgFdgJ7Af2AsvAKDASXqZU1Cw9pk6oB8uMl9Mu9aL6Tf2hDmfNy3I8qa6oC+ovdbAgGHWzOmYkV9SmStAYeF9tU6fqADeoFxLgTGgSuDbYWnKAm6vAY/BwGnokAxhrJXCbuqj+VB+oQyHCdMRjRjXeGkN3hPqNZwCT4JnwYvtSC55QR9SnIaIJdUPKv0P9rl6PodfUrxkTkzoQnD6q7RXmHQ8BPMlI+yV1Sd2I+l69WmGhDvWz+iyks9oGOhQiPpeyd6t/1TOECWcrLDKi/o7rkVPH1FcZ9mn1biPwBeiq0HnagXlgoUC3uh26VGfKPgn0NQL3gGGgu8wCN4EWYDxc88iLcN2Usr8GOuOafVBfqtvKpGvQ6CczZbSTq6W3UT2srknZT6sr8UOv+uk/g7N0ndqXNKwWuKT3rgo4y1gEPKmuzxjvVvuLQIuCH6XAPUbd649RJ8sNrRW8W31r1OWeG/2Zl4Cr5T8veFGdU5fV2RBtm1HrLAHnKXwe8IB6WT2vtibsmeC8Oy4PuJwmwf1FoPWCe0LqbxWF1gpOnjwO1AItCs486tQCzQsue7aqFZoGb0+NdZQDqnV9VgD0En2/NAE3gHfAHmAIWAKOAo9LvOqINNYudVSdN5JZo8P1lnI+/wCvkCNfjf6agQAAAABJRU5ErkJggg==) 50% no-repeat;
        margin-top: 10px
    }

    .m-footer .contact .icon-mail {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAYAAACeXl35AAABQklEQVRIie2WMU4CURRFzwwkxJbOigZWIJWhwMJGazdATHQNNG7B0kQLVkFnYoKVRunYAZQsgESOBY9ER8QRGSpfcpPJe/fdO//9P/mDeqqOLT7G6mmijoEH4A6QYiIBzoE24X6k1tULtaSyJZRCsx4epvEGAvvANdAHqltYVTW0rkNbgPQDYQAcAg3gFWj+wawZGo3QHCwLaYY4BA6AEfAIdDYw60TvKLSGn6qxh+3M7FP1Sp2rt2olx35VgjuP3jRTbxsPqwyXOFGn6rNaW2NWC840elZx2h8PzXfRj/0oAy/A8QrOcdTKwe2vVfxhhUvsqT31Te2qSaAbuV5w1mnkGmkWl+pMvQ/MIpenN9dIs3EDtIBpoBW53FH+pSHAE3C2QR/w9TssPP4NCzNMduCVwOKUTlhcjlD8BTzBHf9ivAPSpb9ZZdHSdgAAAABJRU5ErkJggg==) 50% no-repeat
    }

    .m-footer .contact .tel {
        color: hsla(0,0%,100%,.4);
        font-size: 16px;
        line-height: 30px;
        margin-top: 20px;
        overflow: hidden;
        text-align: left
    }

        .m-footer .contact .tel > div {
            float: left
        }

.m-footer .form .hello {
    color: #de412e;
    font-size: 18px;
    line-height: 24px;
    margin-top: 60px;
    text-align: left
}

.m-footer .form .el-button {
    background-color: #de412e;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    padding: 9px 20px;
    width: 126px
}

.m-footer .el-form {
    margin-top: 25px
}

    .m-footer .el-form .el-input__inner, .m-footer .el-form .el-textarea__inner {
        background-color: #534f4e;
        border: none;
        color: #fff
    }

.m-footer .line-horizontal {
    background-color: rgba(0,0,0,.08);
    height: 1px;
    margin-top: 55px;
    width: 100%
}

.m-footer .menus-wrap {
    margin-top: 60px
}

.m-footer .menus-box {
    overflow: hidden
}

    .m-footer .menus-box .menus {
        width: 100%
    }

        .m-footer .menus-box .menus .el-col {
            overflow-x: hidden;
        }

    .m-footer .menus-box .line {
        background-color: #de412e;
        height: 74px;
        margin-left: 37px;
        width: 5px;
    }

    .m-footer .menus-box ul li {
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 20px
    }

        .m-footer .menus-box ul li .link {
            color: #827e7c
        }

            .m-footer .menus-box ul li .link:hover {
                color: #de412e
            }

        .m-footer .menus-box ul li:first-child .link {
            color: #fff
        }

.m-footer .copyright {
    background-color: rgba(0,0,0,.5);
    bottom: 0;
    color: hsla(0,0%,100%,.3);
    font-size: 16px;
    height: 60px;
    line-height: 60px;
    position: absolute;
    text-align: center;
    width: 100%
}

@media screen and (max-width:1366px) {
    .m-footer .map {
        background-size: cover;
        height: 313px;
        margin-top: 10px;
        width: 383px
    }

        .m-footer .map .city {
            left: 230px;
            top: 157px
        }

        .m-footer .map .wave-wrap {
            left: 220px;
            top: 153px;
        }

    .m-footer .contact {
        margin-left: 23px;
        margin-right: -40px;
        margin-top: 139px
    }

    .m-footer .line-horizontal {
        margin-top: 15px
    }

    .m-footer .menus-wrap {
        margin-top: 5px
    }

    .m-footer .form .hello {
        margin-top: 10px
    }

    .m-footer .menus-box ul li {
        margin-bottom: 10px
    }

    .m-footer .copyright {
        height: 40px;
        line-height: 40px
    }
}

@media screen and (min-width:1367px)and (max-width:1720px) {
    .m-footer .map {
        background-size: cover;
        height: 313px;
        width: 383px
    }

        .m-footer .map .city {
            left: 230px;
            top: 157px
        }

        .m-footer .map .wave-wrap {
            left: 220px;
            top: 153px;
        }

    .m-footer .contact {
        margin-left: -20px
    }

    .m-footer .line-horizontal {
        margin-top: 30px
    }

    .m-footer .menus-wrap {
        margin-top: 40px
    }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .m-footer {
        padding-top: 80px
    }

        .m-footer .map {
            background: url(../images/map.2c7865c.png) no-repeat;
            background-size: 100%;
            height: 495px;
            margin-top: 59px;
            position: relative;
            width: 583px
        }

            .m-footer .map .city {
                height: 60px;
                left: 360px;
                position: absolute;
                top: 217px;
                width: 126px
            }

            .m-footer .map .wave-wrap {
                height: 152px;
                left: 350px;
                position: absolute;
                top: 203px;
                width: 152px
            }

        .m-footer .contact {
            margin-left: 37px;
            margin-top: 189px
        }

            .m-footer .contact li {
                overflow: hidden
            }

                .m-footer .contact li:nth-of-type(2) {
                    margin-bottom: 20px;
                    margin-top: 20px
                }

            .m-footer .contact .icon {
                float: left;
                height: 50px;
                width: 50px
            }

            .m-footer .contact .right {
                float: left
            }

            .m-footer .contact .val {
                color: #fff;
                font-size: 24px;
                padding-top: 5px;
                text-align: left;
                text-indent: 20px
            }

            .m-footer .contact .location, .m-footer .contact .mail {
                color: #fff;
                font-size: 24px;
                line-height: 30px;
                padding-top: 10px;
                text-indent: 20px;
                white-space: nowrap
            }

            .m-footer .contact .phone {
                color: #fff;
                font-size: 24px;
                text-indent: 20px
            }

            .m-footer .contact .icon-location {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAACdklEQVRIib2WzUuUURjFzwyDkUFfRFq0yJCJ0qhF6KZFgoILJZlFbm2d7XKRCBEiraLPnX+A0EbEltKmoE1IZkSgbaYPUSSVYIxMfy3mDF5tnPedRnzgMPOc5+Pce9/7PjMCVAbqgSfADPDbmDFXX06vBKCYdkfSPUnfJT2X9NH8eUnXJZ2UdFfS/VjdYq7wAbAODABVReJVjq07N7JnHNEu8nYjRm6Pc7sqFU4Cn4CRgDsLjAM5Y9xcIT7immQlwk3eQaP9NLACTAE3jSlzaec0uqapEuHbQDbwR4F3QHXAVZsbDbisa3fsnYy4e7WSsoHfLumxpFzA5cy1B1zWtTtalHBO0v4gd5+k5SJ5y44V+h3YtriyhV9JuiTptKQNSe8lZYrkZRzbkHRG0kVJr0t2jnjGKeAb8NR+ty/OIHDMGDTX7ZxnrklVcrkE9AJrQIP9W8Aqm7ZqTsA58mO0N6rv9pF5SNKRwF+U9EvSW39ekfRH0lF/l4/0hx/bS0mHJV2WdNAo2JKklWJHnQLm2Wo9bL7Pa8BQiV0MOKfw/j7a1ms+PP6wsMUJGeCqURvE+4ANoLOIaCv5Od0XcPVBn4x7txQTfghMl9hRgvyQ+AlcCPg0sORYokT9tDX+Ef4ccZSFKTUJfAFOATWum2TrNCuGIeduEW7wUTRHFAs4DswCH7yLWS8gqq7ZGg2hcD8wR8QvSoA64KtRF7MmaY3+UPgNMByzQQEnjHJqhq0l+Zh2uq27jU5r1SQldXg4TJScrbtjE9bqSABjJq/tgbAkjUn5Mdcm6cUeicpabSlJC8rvdlFS7P+6/2kJay2I/LibY+9sDmj9C2ULpTqHVxEtAAAAAElFTkSuQmCC) 50% no-repeat;
                background-size: 100%
            }

            .m-footer .contact .icon-phone {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAeCAYAAADQBxWhAAACX0lEQVRIib2XPWgUURCAvyRGxCZETDT+JFECWhgMGAgWgqQTKxVBItiYxkLs7CSVWFpoI1pYBBRBiJaJitiEYBOQFOJPEX+JolGjkpj4WexbWPb27nbvJAPD7s57876dmXdzbxtUapRdwEy4fwNMAw+BO8BcJceGOqDNwCmgFdgJ7Af2AsvAKDASXqZU1Cw9pk6oB8uMl9Mu9aL6Tf2hDmfNy3I8qa6oC+ovdbAgGHWzOmYkV9SmStAYeF9tU6fqADeoFxLgTGgSuDbYWnKAm6vAY/BwGnokAxhrJXCbuqj+VB+oQyHCdMRjRjXeGkN3hPqNZwCT4JnwYvtSC55QR9SnIaIJdUPKv0P9rl6PodfUrxkTkzoQnD6q7RXmHQ8BPMlI+yV1Sd2I+l69WmGhDvWz+iyks9oGOhQiPpeyd6t/1TOECWcrLDKi/o7rkVPH1FcZ9mn1biPwBeiq0HnagXlgoUC3uh26VGfKPgn0NQL3gGGgu8wCN4EWYDxc88iLcN2Usr8GOuOafVBfqtvKpGvQ6CczZbSTq6W3UT2srknZT6sr8UOv+uk/g7N0ndqXNKwWuKT3rgo4y1gEPKmuzxjvVvuLQIuCH6XAPUbd649RJ8sNrRW8W31r1OWeG/2Zl4Cr5T8veFGdU5fV2RBtm1HrLAHnKXwe8IB6WT2vtibsmeC8Oy4PuJwmwf1FoPWCe0LqbxWF1gpOnjwO1AItCs486tQCzQsue7aqFZoGb0+NdZQDqnV9VgD0En2/NAE3gHfAHmAIWAKOAo9LvOqINNYudVSdN5JZo8P1lnI+/wCvkCNfjf6agQAAAABJRU5ErkJggg==) 50% no-repeat;
                background-size: 100%;
                margin-top: 10px
            }

            .m-footer .contact .icon-mail {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAYAAACeXl35AAABQklEQVRIie2WMU4CURRFzwwkxJbOigZWIJWhwMJGazdATHQNNG7B0kQLVkFnYoKVRunYAZQsgESOBY9ER8QRGSpfcpPJe/fdO//9P/mDeqqOLT7G6mmijoEH4A6QYiIBzoE24X6k1tULtaSyJZRCsx4epvEGAvvANdAHqltYVTW0rkNbgPQDYQAcAg3gFWj+wawZGo3QHCwLaYY4BA6AEfAIdDYw60TvKLSGn6qxh+3M7FP1Sp2rt2olx35VgjuP3jRTbxsPqwyXOFGn6rNaW2NWC840elZx2h8PzXfRj/0oAy/A8QrOcdTKwe2vVfxhhUvsqT31Te2qSaAbuV5w1mnkGmkWl+pMvQ/MIpenN9dIs3EDtIBpoBW53FH+pSHAE3C2QR/w9TssPP4NCzNMduCVwOKUTlhcjlD8BTzBHf9ivAPSpb9ZZdHSdgAAAABJRU5ErkJggg==) 50% no-repeat;
                background-size: 100%
            }

            .m-footer .contact .tel {
                color: hsla(0,0%,100%,.4);
                font-size: 24px;
                line-height: 30px;
                margin-top: 40px;
                overflow: hidden;
                text-align: left
            }

                .m-footer .contact .tel > div {
                    float: left
                }

        .m-footer .form .hello {
            font-size: 24px;
            line-height: 24px;
            margin-top: 100px
        }

        .m-footer .form .el-button {
            font-size: 20px
        }

        .m-footer .el-form {
            margin-top: 25px
        }

            .m-footer .el-form .el-input__inner, .m-footer .el-form .el-textarea__inner {
                font-size: 24px
            }

            .m-footer .el-form .el-form-item__error {
                font-size: 18px
            }

            .m-footer .el-form .el-form-item {
                margin-bottom: 35px
            }

        .m-footer .menus-box .line {
            height: 110px
        }

        .m-footer .menus-box ul li {
            font-size: 24px;
            line-height: 24px;
            margin-bottom: 40px
        }

        .m-footer .copyright {
            font-size: 24px;
            height: 120px;
            line-height: 120px
        }
}
