.banner > img {
    width: 100%;
}

.article-type {
    background-color: #fff;
}

    .article-type .flex-type {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 77px;
    }

        .article-type .flex-type .item {
            font-size: 16px;
            color: #999999;
            padding: 0 30px;
        }

            .article-type .flex-type .item + .item {
                border-left: 1px dashed #A0A0A0;
            }

            .article-type .flex-type .item.active, .article-type .flex-type .item:hover {
                color: #4C9ED9;
            }

.article-class {
    background-color: #f6f5f7;
}

    .article-class .flex-class {
        display: flex;
        flex-wrap: wrap;
        padding: 40px 0;
    }

        .article-class .flex-class .item {
            height: 48px;
            background: #FFFFFF;
            border: 1px solid #E1E1E1;
            border-radius: 8px;
            padding: 0 40px;
            font-size: 14px;
            color: #666666;
            margin-right: 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .article-class .flex-class .item.active, .article-class .flex-class .item:hover {
                color: #fff;
                background: #4C9ED9;
            }


.article-list {
    background-color: #f6f5f7;
}

    .article-list .list-video {
        display: flex;
        flex-wrap: wrap;
    }

        .article-list .list-video .item {
            width: 337px;
            height: 418px;
            cursor: pointer;
            margin-right: 17px;
            margin-bottom: 22px;
            background-color: #fff;
        }

            .article-list .list-video .item:hover {
                box-shadow: 0px 2px 18px 0px rgba(22, 53, 81, 0.24);
            }

            .article-list .list-video .item:nth-child(4n) {
                margin-right: 0;
            }

            .article-list .list-video .item .video {
                width: 337px;
                height: 318px;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .article-list .list-video .item .video > .poster {
                    width: 337px;
                    height: 318px;
                }

                .article-list .list-video .item .video .info {
                    background-color: rgba(0,0,0,.49);
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    color: #fff;
                }

                    .article-list .list-video .item .video .info .type {
                        font-size: 18px;
                        padding: 0 18px;
                        border-bottom: 1px solid rgba(255,255,255,.27);
                    }

                    .article-list .list-video .item .video .info .name {
                        font-size: 20px;
                        margin-top: 10px;
                    }

                    .article-list .list-video .item .video .info .btn-play {
                        margin-top: 30px;
                    }

            .article-list .list-video .item .activity-title {
                font-size: 20px;
                color: #333333;
                padding: 20px 0 15px;
                text-align: center;
            }

            .article-list .list-video .item:hover .activity-title {
                color: #4C9ED9;
            }

            .article-list .list-video .item .activity-next {
                display: flex;
                justify-content: center;
            }

                .article-list .list-video .item .activity-next > a {
                    font-size: 12px;
                    color: #535353;
                    text-decoration: underline;
                    display: flex;
                    align-items: center;
                }

                    .article-list .list-video .item .activity-next > a:after {
                        content: "";
                        width: 5px;
                        height: 5px;
                        border-top: 2px solid #535353;
                        border-right: 2px solid #535353;
                        transform: rotate(45deg);
                    }


    .article-list .list-case {
        display: flex;
        flex-wrap: wrap;
    }

        .article-list .list-case .item {
            width: 453px;
            box-shadow: 0px 2px 18px 0px rgba(22, 53, 81, 0.24);
            cursor: pointer;
            margin-right: 17px;
            margin-bottom: 40px;
        }

.case-top {
    width: 1400px;
    height: 508px;
    box-shadow: 0px 2px 18px 0px rgba(22, 53, 81, 0.24);
    cursor: pointer;
    margin-right: 0;
    margin-bottom: 50px;
    display: flex;
}

.article-list .list-case .item:nth-child(3n) {
    margin-right: 0;
}

.article-list .list-case .item img {
    width: 453px;
    height: 297px;
    background: #173652;
    border-radius: 8px;
}

.case-top img {
    width: 790px;
    height: 508px;
    flex-shrink: 0;
    border-radius: 8px 0 0 8px;
}

.article-list .list-case .item .info {
    padding: 0 30px 30px;
}

.case-top .info {
    padding: 0 50px;
    background-color: #4C9ED9;
    flex: 1;
}

.article-list .list-case .item .info .title {
    padding: 20px 0 9px;
    font-size: 18px;
    display: block;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.case-top .info .title {
    padding: 120px 0 15px;
    font-size: 24px;
    color: #fff;
    display: block;
}

.article-list .list-case .item .info .pubtime {
    font-size: 14px;
    color: #999999;
}

.case-top .info .pubtime {
    font-size: 14px;
    color: #fff;
}


.article-list .list-case .item .info .desc {
    font-size: 13px;
    color: #666;
    margin: 25px 0 25px;
    line-height: 22px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 44px;
}

.case-top .info .desc {
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    padding: 35px 0 30px;
    border-top: 1px dashed #fff;
    margin-top: 30px;
}

.article-list .list-case .item .info .btn a.btn-detail {
    width: 142px;
    height: 40px;
    border: 1px solid #535353;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #535353;
    margin-top: 30px;
}


    .article-list .list-case .item .info .btn a.btn-detail > span {
        width: 15px;
        height: 15px;
        background: #535353;
        border-radius: 50%;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .article-list .list-case .item .info .btn a.btn-detail > span:after {
            content: "";
            width: 4px;
            height: 4px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
            transform: rotate(45deg);
            margin-right: 2px;
        }

.case-top .info .btn a.btn-detail {
    width: 142px;
    height: 40px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #ffffff;
}

    .case-top .info .btn a.btn-detail > span {
        width: 15px;
        height: 15px;
        background: #fff;
        border-radius: 50%;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .case-top .info .btn a.btn-detail > span:after {
            content: "";
            width: 4px;
            height: 4px;
            border-top: 2px solid #4C9ED9;
            border-right: 2px solid #4C9ED9;
            transform: rotate(45deg);
            margin-right: 2px;
        }


.article-list .list-news {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #E7E7E7;
}

    .article-list .list-news .item {
        width: 453px;
        height: 547px;
        box-shadow: 0px 2px 18px 0px rgba(22, 53, 81, 0.24);
        cursor: pointer;
        margin-right: 17px;
        margin-bottom: 40px;
    }

.news-top {
    width: 1400px;
    height: 508px;
    box-shadow: 0px 2px 18px 0px rgba(22, 53, 81, 0.24);
    cursor: pointer;
    margin-right: 0;
    margin-bottom: 50px;
    display: flex;
}

.article-list .list-news .item:nth-child(3n) {
    margin-right: 0;
}

.article-list .list-news .item img {
    width: 453px;
    height: 297px;
    background: #173652;
    border-radius: 8px;
}

.news-top a {
    display: block;
}

.news-top img {
    width: 790px;
    height: 508px;
    flex-shrink: 0;
    border-radius: 8px 0 0 8px;
}

.article-list .list-news .item .info {
    padding: 0 30px;
}

.news-top .info {
    padding: 0 50px;
    background-color: #4C9ED9;
    flex: 1;
}

.article-list .list-news .item .info .title {
    padding: 20px 0 5px;
    font-size: 18px;
    display: block;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news-top .info .title {
    padding: 120px 0 15px;
    font-size: 24px;
    color: #fff;
    display: block;
}

.article-list .list-news .item .info .pubtime {
    font-size: 14px;
    color: #999999;
}

.news-top .info .pubtime {
    font-size: 14px;
    color: #fff;
}


.article-list .list-news .item .info .desc {
    font-size: 13px;
    color: #666;
    margin: 20px 0 25px;
    line-height: 22px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 44px;
}

.news-top .info .desc {
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    padding: 35px 0 30px;
    border-top: 1px dashed #fff;
    margin-top: 30px;
}

.article-list .list-news .item .info .btn a.btn-detail {
    width: 142px;
    height: 40px;
    border: 1px solid #535353;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #535353;
    margin-top: 30px;
}


    .article-list .list-news .item .info .btn a.btn-detail > span {
        width: 15px;
        height: 15px;
        background: #535353;
        border-radius: 50%;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .article-list .list-news .item .info .btn a.btn-detail > span:after {
            content: "";
            width: 4px;
            height: 4px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
            transform: rotate(45deg);
            margin-right: 2px;
        }

.news-top .info .btn a.btn-detail {
    width: 142px;
    height: 40px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #ffffff;
}

    .news-top .info .btn a.btn-detail > span {
        width: 15px;
        height: 15px;
        background: #fff;
        border-radius: 50%;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .news-top .info .btn a.btn-detail > span:after {
            content: "";
            width: 4px;
            height: 4px;
            border-top: 2px solid #4C9ED9;
            border-right: 2px solid #4C9ED9;
            transform: rotate(45deg);
            margin-right: 2px;
        }