﻿.ng_page {
    .banner {
        .el-carousel__container {
            .el-carousel__arrow {
                width: 50px;
                height: 50px;
                font-size: 30px;
            }
        }
    }

    .youshibox_bg {
        padding: 40px 0;
        border-bottom: 1px #eee solid;

        .youshibox {
            ul {
                li {
                    width: 20%;
                    float: left;
                    border-right: 1px #eee solid;

                    &:last-child {
                        border: none;
                    }

                    .item {
                        @iconw: 60px;
                        padding: 10px;

                        .iconbox {
                            float: left;
                            width: @iconw;
                            height: @iconw;
                            line-height: @iconw;
                            border-radius: 100%;
                            background: #eaeaf9;
                            text-align: center;

                            i {
                                font-size: 35px;
                                color: #585acd;
                            }
                        }

                        .note {
                            float: right;
                            width: calc(~"100% - 20px - @{iconw}");

                            h3 {
                                line-height: 40px;
                                color: #333;
                                font-size: 20px;
                            }

                            p {
                                color: #666;
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }
    }

    .candobox_bg {
        padding: 40px 0;

        .candobox {
            .tit {
                .tbox {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;

                    .name {
                        font-size: 40px;
                        color: #082863;
                        font-weight: 700;
                        padding: 0 20px
                    }
                }

                p {
                    text-align: center;
                    line-height: 22px;
                    color: #666;
                }
            }

            .list {
                margin-top: 40px;

                li {
                    width: 25%;
                    float: left;

                    .item {
                        width: 280px;
                        margin: 0 auto;

                        .name {
                            height: 90px;
                            text-align: center;
                            background: #5d5cd0;
                            padding-top: 25px;

                            .n1 {
                                line-height: 30px;
                                font-size: 22px;
                                color: #fff;
                            }

                            .n2 {
                                color: #e5e1e1;
                                font-size: 10px;
                            }
                        }

                        .note {
                            font-size: 14px;
                            color: #666;
                            padding-top: 20px;
                            height: 120px;
                            line-height: 22px;
                        }
                    }


                    &:nth-child(2) {
                        .item {
                            .name {
                                background: #51b87a;
                            }
                        }
                    }

                    &:nth-child(3) {
                        .item {
                            .name {
                                background: #ef867a;
                            }
                        }
                    }

                    &:nth-child(4) {
                        .item {
                            .name {
                                background: #c972e0;
                            }
                        }
                    }
                }
            }
        }
    }

    .wmyoushi_bg {
        padding-top: 40px;
        background: #f5f5fb;

        .wmyoushi {

            .tit {
                .tbox {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;

                    .name {
                        font-size: 40px;
                        color: #082863;
                        font-weight: 700;
                        padding: 0 20px
                    }
                }
            }

            .note {
                margin-top: 50px;
                text-align: center;
                padding: 30px 0;
                position: relative;
                left: 0;
                top: 0;
                z-index: 12;


                .bg {
                    background: url(../../../Images/hbg1.jpg) no-repeat center;
                    width: 739px;
                    height: 606px;
                    margin: 0 auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 202px;
                        height: 86px;
                    }
                }

                ul {
                    li {
                        position: absolute;
                        z-index: 122;
                        width: 310px;


                        h2 {
                            color: #6070d8;
                            line-height: 40px;
                            font-size: 23px;
                        }

                        p {
                            color: #666;
                        }

                        &:nth-child(1) {
                            text-align: right;
                            left: 113px;
                            top: 105px;
                        }

                        &:nth-child(2) {
                            text-align: left;
                            left: 988px;
                            top: 105px;
                        }

                        &:nth-child(3) {
                            text-align: right;
                            left: 30px;
                            top: 307px;
                        }

                        &:nth-child(4) {
                            text-align: left;
                            left: 1070px;
                            top: 307px;
                        }

                        &:nth-child(5) {
                            text-align: right;
                            left: 113px;
                            top: 526px;
                        }

                        &:nth-child(6) {
                            text-align: left;
                            left: 988px;
                            top: 526px;
                        }
                    }
                }
            }
        }
    }



    .qudaoBox_bg {
        background: #f5f5fb url(../../../Images/hbg2.png) no-repeat center top;
        padding-top: 188px;
        padding-bottom: 60px;

        .qudaoBox {
            .tit {
                .tbox {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;

                    .name {
                        font-size: 40px;
                        color: #fff;
                        font-weight: 700;
                        padding: 0 20px
                    }
                }
            }

            .list {
                margin-top: 50px;

                li {
                    width: 20%;
                    padding: 2px;
                    float: left;

                    .item {
                        background: #fff;
                        text-align: center;
                        @itemH: 120px;
                        height: @itemH;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;

                        img {
                            max-height: calc(~"@{itemH} - 20px");
                            transition: all 0.5s;
                        }

                        &:hover {
                            img {
                                transform: scale(1.1);
                            }
                        }
                    }
                }
            }
        }
    }

    .userdian_bg {
        padding: 40px 0;

        .userdian {
            .tit {
                .tbox {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;

                    .name {
                        font-size: 40px;
                        color: #082863;
                        font-weight: 700;
                        padding: 0 20px
                    }
                }

                p {
                    text-align: center;
                    line-height: 22px;
                    color: #666;
                }
            }


            .list {
                margin-top: 40px;

                li {
                    float: left;
                    width: 16.6%;
                    margin-bottom: 10px;
                    @itemH: 120px;

                    .item {
                        text-align: center;
                        height: @itemH;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            max-height: @itemH;
                        }
                    }
                }
            }
        }
    }



    .fuwubox_bg {
        padding: 40px 0;
        background: #f5f5fb;

        .fuwubox {
            .tit {
                .tbox {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;

                    .name {
                        font-size: 40px;
                        color: #082863;
                        font-weight: 700;
                        padding: 0 20px
                    }
                }

                p {
                    text-align: center;
                    line-height: 22px;
                    color: #666;
                }
            }

            .iconlist {
                margin-top: 40px;

                li {
                    float: left;
                    width: 16.6%;

                    .icon {
                        @iconH: 80px;
                        width: @iconH;
                        height: @iconH;
                        line-height: @iconH;
                        margin: 0 auto;
                        border-radius: 100%;
                        text-align: center;
                        background: #e1e1f5;

                        i {
                            font-size: 40px;
                            color: #5a59ce;
                        }
                    }
                }
            }

            .stepbox {
                padding-top: 30px;
            }
        }
    }

    .newsBox_bg {
        padding: 40px 0;

        .newsBox {


            .itembox {
                width: 400px;
                float: left;

                &:nth-child(2) {
                    margin-left: 100px;
                    float: left;
                }

                &:nth-child(3) {
                    float: right;
                }

                .title {
                    height: 40px;
                    line-height: 40px;

                    .name {
                        width: 200px;
                        float: left;
                        font-size: 20px;
                        font-weight: 700;

                        a {
                            color: #082863;
                        }
                    }

                    a.more {
                        float: right;
                        width: 100px;
                        text-align: center;
                        font-size: 16px;
                        border-radius: 10px;
                        line-height: 35px;
                        height: 35px;
                    }
                }

                .img {
                }

                .list {
                    li {
                        border-bottom: 1px #eee dashed;

                        a {
                            color: #666;
                            height: 30px;
                            line-height: 30px;
                            font-size: 14px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            display: block;

                            &:hover {
                                color: #5a59ce;
                            }

                            i {
                            }
                        }
                    }
                }
            }
        }
    }
}
