﻿

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;
    }

.article {
    width: 100%;
    display: flex;
    height: 100vh;
    padding-top: 100px;
}

.m-aside .wrap {
    float: right;
    height: 100%;
    position: relative;
    width: 200px
}

    .m-aside .wrap .small-logo {
        height: 83px;
        margin: 40px auto 0;
        width: 80px
    }

        .m-aside .wrap .small-logo img {
            width: 100%
        }

    .m-aside .wrap .news-collection {
        margin-top: 50px
    }

        .m-aside .wrap .news-collection li {
            box-sizing: border-box;
            color: #3f3b3a;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            margin-bottom: 18px;
            padding-right: 20px;
            text-align: right
        }

            .m-aside .wrap .news-collection li.active, .m-aside .wrap .news-collection li:hover {
                background-color: #de412e;
                color: #fff
            }

            .m-aside .wrap .news-collection li .title {
                font-size: 16px
            }

@media screen and (max-width:1366px) {
    .m-aside .wrap .small-logo {
        margin-top: 20px
    }

    .m-aside .wrap .news-collection {
        margin-top: 30px
    }

        .m-aside .wrap .news-collection li {
            height: 26px;
            line-height: 26px;
            margin-bottom: 10px;
            padding-right: 20px
        }

            .m-aside .wrap .news-collection li .title {
                font-size: 14px
            }
}

.news-container {
    background: #f5f5f5 url(../images/article-bg.78c4de2.png) top 20px left no-repeat;
    box-sizing: border-box;
    height: 100%;
    overflow-y: scroll;
    padding-left: 122px;
}

    .news-container .cont {
        margin: auto
    }

        .news-container .cont .remark {
            color: #666;
            font-size: 18px;
            line-height: 24px;
            padding-right: 70px;
            text-align: justify;
            text-indent: 2em;
            text-justify: newspaper;
            word-break: break-all
        }

    .news-container .remark {
        color: #333;
        font-size: 18px;
        line-height: 30px;
        text-align: center
    }

    .news-container .title {
        color: #333;
        font-size: 36px;
        padding-top: 80px;
        text-align: center
    }

.web_intro img {
    width: 98%;
}

.news-container .cont {
    padding-top: 40px
}

    .news-container .cont .item {
        background: #fff;
        display: inline-table;
        height: 220px;
        margin-bottom: 30px;
        margin-right: 30px;
        position: relative;
        width: calc(50% - 30px)
    }

        .news-container .cont .item .name, .news-container .cont .item .number {
            padding-top: 20px;
            text-align: center;
            font-size: 60px;
            color: #eeb77a;
            font-weight: 800;
            font-style: italic;
        }

        .news-container .cont .item .name {
            color: #e7a052;
            font-size: 24px;
            line-height: 24px
        }

        .news-container .cont .item .cont-text {
            color: #666;
            font-size: 14px;
            line-height: 24px;
            padding: 30px 70px 0
        }

    .news-container .cont .nomargin {
        margin-right: 0
    }

@media screen and (max-width:1366px) {
    .news-container .remark {
        font-size: 12px
    }

    .news-container .title {
        font-size: 24px;
        padding-top: 15px
    }

    .news-container .cont {
        padding-top: 15px
    }

        .news-container .cont .item {
            margin-bottom: 15px;
            margin-right: 15px;
            width: calc(50% - 15px)
        }

        .news-container .cont .nomargin {
            margin-right: 0
        }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .news-container .remark {
        font-size: 26px
    }

    .news-container .title {
        font-size: 44px
    }

    .news-container .cont {
        padding-top: 40px
    }

        .news-container .cont .item {
            height: 360px
        }

            .news-container .cont .item .number {
                padding-top: 40px;
                font-size: 60px;
                color: #eeb77a;
                font-weight: 800;
                font-style: italic;
            }



            .news-container .cont .item .name {
                font-size: 36px;
                padding-top: 40px
            }

            .news-container .cont .item .cont-text {
                font-size: 24px;
                line-height: 40px;
                padding-top: 60px
            }

        .news-container .cont .nomargin {
            margin-right: 0
        }
}

@media screen and (max-width:1366px) {
    .news-container .cont .remark {
        font-size: 16px
    }
}

@media screen and (min-width:1367px)and (max-width:1920px) {
    .news-container .cont .remark {
        font-size: 16px
    }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .news-container .cont .remark {
        font-size: 18px
    }
}

.ewm {
    width: 200px;
}

.news-container .link-list {
    padding-bottom: 60px;
    padding-top: 60px
}

    .news-container .link-list .item {
        background-color: #fff;
        float: left;
        height: 120px;
        margin-right: 20px;
        margin-top: 20px;
        position: relative;
        text-align: center;
        width: calc(20% - 20px)
    }

        .news-container .link-list .item img {
            bottom: 0;
            left: 0;
            margin: auto;
            max-height: 90%;
            position: absolute;
            right: 0;
            top: 0;
            width: 90%
        }

.no-data {
    font-size: 20px
}

@media screen and (max-width:1366px) {
    .news-container .remark {
        font-size: 12px;
        padding: 0 50px
    }

    .news-container .link-list {
        padding-bottom: 20px;
        padding-top: 20px
    }

        .news-container .link-list .item {
            background-color: #fff;
            float: left;
            height: 90px;
            margin-right: 10px;
            margin-top: 10px;
            position: relative;
            text-align: center;
            width: calc(20% - 10px)
        }

            .news-container .link-list .item img {
                bottom: 0;
                left: 0;
                margin: auto;
                max-height: 80%;
                max-width: 80%;
                position: absolute;
                right: 0;
                top: 0
            }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .news-container .remark {
        font-size: 28px
    }

    .news-container .link-list {
        padding-bottom: 60px;
        padding-top: 60px
    }

        .news-container .link-list .item {
            background-color: #fff;
            float: left;
            height: 180px;
            margin-right: 30px;
            margin-top: 30px;
            position: relative;
            text-align: center;
            width: calc(20% - 30px)
        }

            .news-container .link-list .item img {
                bottom: 0;
                left: 0;
                margin: auto;
                max-height: 80%;
                max-width: 80%;
                position: absolute;
                right: 0;
                top: 0
            }
}

.production-container {
    background: #f5f5f5 url(../images/production-bg.8aa5449.png) top 20px left no-repeat;
    box-sizing: border-box;
    height: 100%;
    overflow-y: scroll;
    padding-left: 50px;
    padding-right: 30px;
    padding-top: 50px;
    position: relative
}

    .production-container .vue-waterfall-column {
        position: relative
    }

        .production-container .vue-waterfall-column .cell-item img {
            width: 100% !important
        }

    .production-container .cell-item {
        float: left;
        height: 300px;
        padding-bottom: 20px;
        padding-left: 10px;
        width: calc(25% - 10px)
    }

        .production-container .cell-item .title {
            color: #3f3b3a;
            font-size: 14px;
            font-weight: 700;
            padding-top: 10px
        }

        .production-container .cell-item .image-wrap {
            position: relative
        }

            .production-container .cell-item .image-wrap:hover .cover {
                display: block
            }

            .production-container .cell-item .image-wrap img {
                height: 260px;
                width: 100%
            }

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

            .production-container .cell-item .cover .border-box {
                height: 100%;
                position: relative;
                width: 100%
            }

                .production-container .cell-item .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%
                }

                .production-container .cell-item .cover .border-box .detail {
                    background-color: #eeb77a;
                    bottom: 0;
                    color: #fff;
                    cursor: pointer;
                    font-size: 14px;
                    height: 36px;
                    left: 0;
                    line-height: 36px;
                    margin: auto;
                    position: absolute;
                    right: 0;
                    text-align: center;
                    top: 0;
                    width: 100px;
                    z-index: 10
                }

                    .production-container .cell-item .cover .border-box .detail:hover {
                        color: #de412e
                    }

                .production-container .cell-item .cover .border-box:after, .production-container .cell-item .cover .border-box:before {
                    border: 1px solid transparent;
                    box-sizing: border-box;
                    content: " ";
                    height: 0;
                    position: absolute;
                    width: 0
                }

                .production-container .cell-item .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
                }

                .production-container .cell-item .cover .border-box:after {
                    bottom: 0;
                    right: 0;
                    transition: border-color 0s ease-in .4s,width .2s ease-in .2s,height .2s ease-in
                }

                .production-container .cell-item .cover .border-box:hover:after, .production-container .cell-item .cover .border-box:hover:before {
                    height: 100%;
                    width: 100%
                }

                .production-container .cell-item .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
                }

                .production-container .cell-item .cover .border-box:hover:before {
                    border-right-color: #eeb77a;
                    border-top-color: #eeb77a;
                    transition: width .2s ease-out,height .2s ease-out .2s
                }

.no-data {
    font-size: 20px
}

@media screen and (max-width:1366px) {
    .production-container .cell-item {
        height: 140px
    }

        .production-container .cell-item .title {
            font-size: 14px
        }

        .production-container .cell-item .image-wrap {
            position: relative
        }

            .production-container .cell-item .image-wrap:hover .cover {
                display: block
            }

            .production-container .cell-item .image-wrap img {
                height: 100px;
                width: 100%
            }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .production-container .cell-item {
        height: 390px
    }

        .production-container .cell-item .title {
            font-size: 18px
        }

        .production-container .cell-item .image-wrap {
            position: relative
        }

            .production-container .cell-item .image-wrap:hover .cover {
                display: block
            }

            .production-container .cell-item .image-wrap img {
                height: 360px;
                width: 100%
            }
}



.news-container .list .item {
    background: #fff;
    cursor: pointer;
    height: 240px;
    margin-bottom: 50px
}

    .news-container .list .item:hover .news-cont .cont-left .title {
        color: #e60012
    }

    .news-container .list .item .news-img {
        float: left;
        height: 240px;
        width: 25%
    }

        .news-container .list .item .news-img img {
            height: 100%;
            width: 100%
        }

    .news-container .list .item .news-cont {
        float: left;
        height: 240px;
        position: relative;
        width: 75%
    }

        .news-container .list .item .news-cont .cont-left {
            float: left;
            height: 100%;
            padding-left: 60px;
            padding-top: 50px;
            width: calc(80% - 60px)
        }

            .news-container .list .item .news-cont .cont-left .title {
                color: hsla(0,0%,7%,.8);
                font-size: 24px;
                font-weight: 700;
                height: 60px;
                line-height: 1.4;
                overflow: hidden;
                text-overflow: ellipsis;
                transition: color .4s;
                white-space: nowrap
            }

            .news-container .list .item .news-cont .cont-left .remark {
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                box-orient: vertical;
                color: hsla(0,0%,7%,.8);
                display: -webkit-box;
                font-size: 14px;
                line-height: 1.9;
                max-height: 54px;
                overflow: hidden
            }

            .news-container .list .item .news-cont .cont-left .more-btn {
                color: hsla(0,0%,7%,.8);
                cursor: pointer;
                display: inline-block;
                font-family: "FutworaProTrialMedium";
                font-size: 12px;
                letter-spacing: 1px;
                padding-bottom: 5px;
                padding-right: 20px;
                padding-top: 30px;
                position: relative;
                text-transform: uppercase;
                transition: color .4s ease-out
            }

                .news-container .list .item .news-cont .cont-left .more-btn:after {
                    backface-visibility: hidden;
                    background-color: hsla(0,0%,7%,.8);
                    bottom: 3px;
                    content: "";
                    display: block;
                    height: 1px;
                    left: 0;
                    position: absolute;
                    right: 20px;
                    transition: bottom .3s,background .3s
                }

                .news-container .list .item .news-cont .cont-left .more-btn:hover {
                    color: #e60012
                }

                    .news-container .list .item .news-cont .cont-left .more-btn:hover i {
                        transform: translateX(5px)
                    }

                    .news-container .list .item .news-cont .cont-left .more-btn:hover:after {
                        background-color: #e60012;
                        bottom: 0
                    }

        .news-container .list .item .news-cont .cont-right {
            float: left;
            height: 100%;
            text-align: center;
            width: 20%
        }

            .news-container .list .item .news-cont .cont-right .year {
                color: rgba(32,32,32,.5);
                font-family: "FutworaProTrialRegular";
                font-size: 40px;
                letter-spacing: 1px;
                margin-bottom: 14px;
                padding-top: 70px
            }

            .news-container .list .item .news-cont .cont-right .dd, .news-container .list .item .news-cont .cont-right .mm {
                color: rgba(32,32,32,.5);
                font-family: "FutworaProTrialRegular";
                font-size: 16px;
                letter-spacing: 1px
            }

            .news-container .list .item .news-cont .cont-right .line {
                color: hsla(0,0%,7%,.5);
                font-size: 16px
            }

.no-data {
    font-size: 20px;
    padding: 100px;
    text-align: center
}

@media screen and (max-width:1366px) {
    .news-container .list .item {
        background: #fff;
        cursor: pointer;
        height: 180px;
        margin-bottom: 30px
    }

        .news-container .list .item:hover .news-cont .cont-left .title {
            color: #e60012
        }

        .news-container .list .item .news-img {
            float: left;
            height: 180px;
            width: 25%
        }

            .news-container .list .item .news-img img {
                height: 100%;
                width: 100%
            }

        .news-container .list .item .news-cont {
            float: left;
            height: 180px;
            position: relative;
            width: 75%
        }

            .news-container .list .item .news-cont .cont-left {
                float: left;
                height: 100%;
                padding-left: 30px;
                padding-top: 20px;
                width: calc(80% - 30px)
            }

                .news-container .list .item .news-cont .cont-left .title {
                    font-size: 18px;
                    height: 40px
                }

                .news-container .list .item .news-cont .cont-left .more-btn {
                    padding-top: 20px
                }

            .news-container .list .item .news-cont .cont-right .year {
                font-size: 26px;
                padding-top: 50px
            }

            .news-container .list .item .news-cont .cont-right .dd, .news-container .list .item .news-cont .cont-right .line, .news-container .list .item .news-cont .cont-right .mm {
                font-size: 14px
            }
}

@media screen and (min-width:1923px)and (max-width:2560px) {
    .news-container .list .item, .news-container .list .item .news-cont, .news-container .list .item .news-img {
        height: 340px
    }

        .news-container .list .item .news-cont .cont-left {
            float: left;
            height: 100%;
            padding-left: 100px;
            padding-top: 70px;
            width: calc(80% - 100px)
        }

            .news-container .list .item .news-cont .cont-left .title {
                font-size: 30px;
                height: 70px
            }

            .news-container .list .item .news-cont .cont-left .remark {
                font-size: 18px;
                max-height: 74px
            }

            .news-container .list .item .news-cont .cont-left .more-btn {
                font-size: 16px;
                padding-top: 50px
            }

        .news-container .list .item .news-cont .cont-right {
            float: left;
            height: 100%;
            text-align: center;
            width: 20%
        }

            .news-container .list .item .news-cont .cont-right .year {
                font-size: 50px;
                margin-bottom: 20px;
                padding-top: 100px
            }

            .news-container .list .item .news-cont .cont-right .dd, .news-container .list .item .news-cont .cont-right .mm {
                font-size: 22px
            }

            .news-container .list .item .news-cont .cont-right .line {
                color: hsla(0,0%,7%,.5);
                font-size: 22px
            }
}
