.wrap {
    min-width: 1200px;
}

    .wrap .el-header {
        padding: 0;
        position: relative;
        height: 625px;
        overflow: hidden;
    }

    .wrap .el-main {
        padding: 0;
        overflow: hidden;
    }

    .wrap .el-footer {
        padding: 0;
    }

.layout-wrap {
    display: flex;
    flex-flow: column;
}

    .layout-wrap .head-wrap {
        overflow: hidden;
    }

    .layout-wrap .main-wrap {
    }

    .layout-wrap .foot-wrap {
        border-top: 1px solid rgba(209,209,209,0.7);
        background-color: #f2f2f2;
        user-select: text;
    }

.main-area {
    width: 1200px;
    margin: auto;
    padding: 50px 0;
}

.main-navigation {
    width: 1200px;
    margin: auto;
    height: 30px;
}

    .main-navigation .data-ul, .data-li {
        margin: 0;
        padding: 0;
        list-style: none;
        margin-left: -20px;
    }

    .main-navigation .data-li {
        display: flex;
        flex-flow: row;
        flex-wrap: nowrap;
        font-size: 12px;
    }

        .main-navigation .data-li > div {
            display: inline-block;
            line-height: 30px;
        }

        .main-navigation .data-li .data-label {
            width: 100px;
            flex-grow: 0;
            text-align: right;
            padding-right: 10px;
            flex-shrink: 0;
        }

        .main-navigation .data-li .data-value {
            flex-grow: 1;
        }

            .main-navigation .data-li .data-value .class-item {
                font-size: 0;
            }

                .main-navigation .data-li .data-value .class-item + .class-item {
                    margin-left: 20px;
                }

                .main-navigation .data-li .data-value .class-item .el-breadcrumb {
                    line-height: 30px;
                    font-size: 0;
                    vertical-align: middle;
                    display: inline-block;
                }

    .main-navigation .class-item .el-breadcrumb__item:last-child .el-breadcrumb__inner, .class-item .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .class-item .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .class-item .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
        color: #4cb6e2;
        cursor: pointer;
        font-weight: normal;
    }

    .main-navigation .class-item .el-breadcrumb__inner a, .class-item .el-breadcrumb__inner.is-link {
        font-weight: normal;
        color: #4cb6e2;
        font-size: 12px;
        margin-left: -5px;
    }

    .main-navigation .class-item .el-breadcrumb__separator[class*=icon] {
        font-size: 12px;
        line-height: 30px;
        vertical-align: middle;
        color: #4cb6e2;
        margin-left: 0px;
    }

    .main-navigation .class-item .class-wrap {
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;
        letter-spacing: 5px;
    }

.foot-area {
    width: 1200px;
    margin: 0 auto;
    height: 150px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

    .foot-area a {
        color: #409EFF;
    }

    .foot-area p > * {
        display: inline-block;
        vertical-align: middle;
        line-height: 25px;
    }

    .foot-area p .icon {
        margin: 0 5px;
    }

.head-area {
}

.popularize-area {
    width: 1200px;
    margin: auto;
}

.head-bar {
    width: 1200px;
    margin: auto;
    display: flex;
    flex-flow: row;
    height: 80px;
}

    .head-bar .logo-area {
        display: flex;
        align-items: center;
    }

    .head-bar .head-nav {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .head-bar .user-area {
        display: flex;
        align-items: center;
        width: 180px;
        justify-content: flex-end;
    }

.nva-url {
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
}

    .nva-url .head-nav {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.head-menu.el-menu {
    width: 1200px;
    border-bottom: 0 !important;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin: 5px 0;
}

.head-menu .el-menu-item {
    font-size: 16px;
    height: 36px !important;
    line-height: 36px !important;
    color: #303133;
    flex-shrink: 1;
    flex-grow: 1;
    width: 100%;
    text-align: center;
    padding: 0 !important;
}

    .head-menu .el-menu-item a {
        transition: none;
        display: inline-block;
        width: 100%;
        line-height: 36px !important;
        /*        color: #4cb6e2;*/
    }

    .head-menu .el-menu-item:hover {
        color: #fff !important;
        background-color: #4cb6e2 !important;
        /*background-color: #409EFF !important;*/
    }

        .head-menu .el-menu-item:hover .iconfont {
            color: #fff;
        }

    .head-menu .el-menu-item.is-active {
        color: #303133;
        border-bottom: 0px;
    }

        .head-menu .el-menu-item.is-active:hover {
            border-bottom: 0px;
            color: #303133;
        }

.user-area .el-button {
    font-size: 14px;
}

.foot-area p {
    font-size: 14px;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 1.75;
}

.foot-container {
    height: 200px;
    border-top: 1px solid #999;
    background-color: #f2f2f2;
}

.banner-wrap {
    position: relative;
    background-color: #333;
    width: 10000px;
    height: 399px;
    top: 0;
    left: 50%;
    margin-left: -5000px;
    transition: all linear .3s;
    background-color: transparent;
}

.banner-wrap-left-bg {
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: transparent;
    transition: all linear .3s;
}

.banner-wrap-right-bg {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
    background-color: transparent;
    transition: all linear .3s;
}

.banner-wrap-bg-1 {
    background-color: #0767CD;
}

    .banner-wrap-bg-1 .banner-wrap-left-bg {
        background-color: #0767CD;
    }

    .banner-wrap-bg-1 .banner-wrap-right-bg {
        background-color: #0767CD;
    }

.banner-wrap-bg-2 {
    background-color: #4281FE;
}

    .banner-wrap-bg-2 .banner-wrap-left-bg {
        background-color: #58A7FD;
    }

    .banner-wrap-bg-2 .banner-wrap-right-bg {
        background-color: #4281FE;
    }

.banner-wrap-bg-3 {
    background-color: #0880FC;
}

    .banner-wrap-bg-3 .banner-wrap-left-bg {
        background-color: #00A8FF;
    }

    .banner-wrap-bg-3 .banner-wrap-right-bg {
        background-color: #0880FC;
    }

.banner-wrap-bg-4 {
    background-color: #4CB6E2;
}

    .banner-wrap-bg-4 .banner-wrap-left-bg {
        background-color: #4DB6E3;
    }

    .banner-wrap-bg-4 .banner-wrap-right-bg {
        background-color: #4DB6E3;
    }

.banner-area {
    position: relative;
    width: 1920px;
    height: 399px;
    margin: 0 auto;
}

    .banner-area .banner-item {
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
    }

    .banner-area .banner-item-1 {
        background-image: url('../Images/home_page/banner_duibi.png');
    }

        .banner-area .banner-item-1 .dl-soft-area {
            top: 270px;
            left: 526px;
        }

            .banner-area .banner-item-1 .dl-soft-area button {
                color: #0767CD;
            }

    .banner-area .banner-item-2 {
        background-image: url('../Images/home_page/banner_huyan.png');
    }

        .banner-area .banner-item-2 .dl-soft-area {
            top: 270px;
            left: 466px;
        }

            .banner-area .banner-item-2 .dl-soft-area button {
                color: #4E95FD;
            }

    .banner-area .banner-item-3 {
        background-image: url('../Images/home_page/banner_qiangtiao.png');
    }

        .banner-area .banner-item-3 .dl-soft-area {
            top: 270px;
            left: 464px;
        }

            .banner-area .banner-item-3 .dl-soft-area button {
                color: #009AFF;
            }

    .banner-area .banner-item-4 {
        background-image: url('../Images/home_page/banner_tongbu.png');
    }

        .banner-area .banner-item-4 .dl-soft-area {
            top: 270px;
            left: 1025px;
        }

            .banner-area .banner-item-4 .dl-soft-area button {
                color: #4DB6E3;
            }

.dl-soft-area {
    color: #fff;
    position: absolute;
    top: 270px;
    left: 486px;
    cursor: default;
}

    .dl-soft-area button {
        width: 224px;
        height: 44px;
        line-height: 1;
        border: 0;
        background-color: #fff;
        border-radius: 8px;
        font-size: 16px;
        margin: 0;
        padding: 0;
        color: #409EFF;
        letter-spacing: 2px;
        cursor: pointer;
        transition: all linear .3s;
    }

    .dl-soft-area .el-button.is-round {
        border-radius: 8px;
    }

    .dl-soft-area button:focus,
    .dl-soft-area button:active {
        background-color: #fff;
        color: #409EFF;
    }

    .dl-soft-area button:hover {
        background-color: #409EFF;
        color: #fff !important;
    }

.dl-pc-wrap {
    font-size: 14px;
    display: inline-flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    vertical-align: top;
}

    .dl-pc-wrap .pc-soft-version {
        margin-top: 5px;
    }

.dl-app-wrap {
    display: inline-block;
    margin-left: 15px;
    cursor: pointer;
    position: relative;
}

    .dl-app-wrap .dl-app-icon {
        /* border: 1px solid #fff; */
    }

        .dl-app-wrap .dl-app-icon img {
        }

    .dl-app-wrap .dl-app-qrcode {
        position: absolute;
        opacity: 0;
        filter: opacity(0);
        transition: all .3s;
        top: -80%;
        left: 120%;
        pointer-events: none;
    }

        .dl-app-wrap .dl-app-qrcode img {
            width: 100px;
            height: 100px;
            pointer-events: none;
        }

    .dl-app-wrap:hover .dl-app-qrcode {
        opacity: 1;
        filter: opacity(100);
    }

.main-area .module-title {
    text-align: center;
    padding: 0 20px;
}

    .main-area .module-title h3 {
        font-size: 25px;
        margin: 0;
        letter-spacing: 5px;
    }

    .main-area .module-title span {
        display: inline-block;
        font-size: 14px;
        margin-top: 10px;
    }

/*搜索框*/
.wrap .demo-input-suffix {
    margin-top: 25px;
    margin-left: 190px;
}

    .wrap .demo-input-suffix .el-input__inner {
        height: 30px;
        line-height: 1px !important;
        width: 330px;
    }

    .wrap .demo-input-suffix .el-input-group__append {
        padding: 0;
    }

        .wrap .demo-input-suffix .el-input-group__append .el-button--normal {
            margin-top: -12px;
            margin-left: -50.5px;
            padding-left: 23px;
            background-color: #169BD5;
            color: #fff;
            height: 28px;
            line-height: 2px;
            width: 50px
        }

            .wrap .demo-input-suffix .el-input-group__append .el-button--normal span {
                margin-left: -13px;
            }

/*头部*/
.login_bar_container {
    width: 100%;
    height: 30px;
    float: left;
    background-color: #4cb6e2;
    color: #fff;
}

    .login_bar_container a {
        color: #fff;
        text-decoration: none;
    }

.login_bar {
    width: 1200px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
}

.login_bar_left {
    float: left;
    font-size: 0;
}

    .login_bar_left > span {
        margin-right: 30px;
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
    }

    .login_bar_left > a {
        vertical-align: middle;
        display: inline-block;
        height: 30px;
    }

        .login_bar_left > a > img {
            margin-top: 2px;
            vertical-align: baseline;
        }

.login_bar_right {
    float: right;
    margin-top: -5px;
}

    .login_bar_right span {
        margin-left: 10px;
        color: #fff;
    }

.logo_bar_container {
    width: 100%;
    height: 110px;
    float: left;
    background-color: #fff;
}

.logo_bar {
    width: 960px;
    margin: 0 auto;
}

    .logo_bar::after {
        content: '';
        clear: both;
        display: block;
    }

.righturl {
    margin-top: 25px;
    padding-left: 205px;
}

    .righturl a {
        padding-left: 30px;
        color: #4cb6e2;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
    }