body{
    width: 100%;
    height: 100%;
    background-color: #040c30;
}
#all{
    width: 100%;
    min-width: 1800px;
    max-width: 1920px;
    min-height: 800px;
    max-height: 1080px;
    margin: 0 auto;
    background-color: #040c30;
    h1{
        height: 75px;
        background-image: url("../src/images/headimg1.png");
        background-position: center;
        background-size: 100% 100%;
        text-align: center;
        line-height: 75px;
        font-size: 32px;
        color: #01c5f5;
        letter-spacing: 5px;
        font-family:'Microsoft YaHei';
    }
    >.top{
        margin-top: 60px;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
        >div{
            margin: 0 20px;
        }
        >.left{
            width: 29%;
            height: 350px;
            // background-image: url("../src/images/bg_01\(第一排左右两个\).png");
            // background-position: center;
            // background-size: 100% 100%;
            background-color: #0e2039;
            border-radius: 20px;
            position: relative;
            box-sizing: border-box;
            >h2{
                font-size: 18px;
                color: #01dbfc;
                background-image: url("../src/images/kuang_da.png");
                width: 220px;
                height: 36px;
                background-position: center;
                background-size: 100% 100%;
                text-align: center;
                line-height: 36px;
                position: absolute;
                left: 28%;
                top: -16px;
                vertical-align: baseline;
                img{
                    width: 20px;
                    height: 20px;
                }
            }
            .service{
                width: 90%;
                height: 110px;
                margin: 0 auto;
                margin-top: 40px;
                margin-bottom: 30px;
                position: relative;
                .top{
                    width: 100%;
                    height: 4px;
                    background-image: url("../src/images/line.png");
                    background-position: center;
                    background-size: 100% 100%;
                }
                .bot{
                    width: 100%;
                    height: 4px;
                    background-image: url("../src/images/line.png");
                    background-position: center;
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: 0;
                }
                h3{
                    font-family:'Microsoft YaHei';
                    font-size: 12px;
                    color: #02dafe;
                    background-image: url("../src/images/kuang_xiao.png");
                    width: 95px;
                    height: 24px;
                    background-position: center;
                    background-size: 100% 100%;
                    text-align: center;
                    line-height: 24px;
                    position: absolute;
                    left: 40%;
                    top: -10px;
                }
                .context{
                    display: flex;
                    justify-content: space-evenly;
                    p{
                        text-align: center;
                        margin-top: 24px;
                        font-size: 24px;
                        color: #a8b3e6;
                        span{
                            display: block;
                            b{
                                font-size: 14px;
                                color: #5280b6;
                            }
                            img{
                                width: 16px;
                                height: 16px;
                                vertical-align: middle;
                            }

                        }
                    }
                }
            }
            .settled{
                width: 90%;
                height: 110px;
                margin: 0 auto;
                margin-top: 40px;
                position: relative;
                .top{
                    width: 100%;
                    height: 4px;
                    background-image: url("../src/images/line.png");
                    background-position: center;
                    background-size: 100% 100%;
                }
                .bot{
                    width: 100%;
                    height: 4px;
                    background-image: url("../src/images/line.png");
                    background-position: center;
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: 0;
                }
                h3{
                    font-family:'Microsoft YaHei';
                    font-size: 12px;
                    color: #02dafe;
                    background-image: url("../src/images/kuang_xiao.png");
                    width: 95px;
                    height: 24px;
                    background-position: center;
                    background-size: 100% 100%;
                    text-align: center;
                    line-height: 24px;
                    position: absolute;
                    left: 40%;
                    top: -10px;
                }
                .context{
                    padding: 0 10px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    p{
                        text-align: center;
                        margin-top: 24px;
                        font-size: 24px;
                        color: #a8b3e6;
                        >span{
                            display: block;
                            b{
                                font-size: 14px;
                                color: #5280b6;
                            }
                            img{
                                width: 16px;
                                height: 16px;
                                vertical-align: middle;
                            }
                        }
                        &:nth-of-type(1)>span:last-child{
                            color: #01f6ff;
                        }
                        &:nth-of-type(2)>span:last-child{
                            color: #22c223;
                        }
                        &:nth-of-type(3)>span:last-child{
                            color: #f8b01b;
                        }
                    }
                }
            }
        }
        >.middle{
            width: 40%;
            height: 350px;
            // background-image: url("../src/images/bg_02（第一排中间）.png");
            // background-position: center;
            // background-size: 100% 100%;
            background-color: #0e2039;
            border-radius: 20px;
            position: relative;
            padding: 0 20px;
            box-sizing: border-box;
            >h2{
                font-family:'Microsoft YaHei';
                font-size: 18px;
                color: #01dbfc;
                background-image: url("../src/images/kuang_zhong.png");
                width: 320px;
                height: 36px;
                background-position: center;
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                left:32%;
                top: -15px;
                vertical-align: baseline;
                img{
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                }
            }
            #echarts1{
                width: 90%;
                height: 150px;
                margin: 10px auto;
                margin-top: 20px;
            }
            #echarts3{
                width: 90%;
                height: 150px;
                margin: 10px auto;
            }
        }
        >.right{
            width: 29%;
            height: 350px;
            // background-image: url("../src/images/bg_01\(第一排左右两个\).png");
            // background-position: center;
            // background-size: 100% 100%;
            background-color: #0e2039;
            border-radius: 20px;
            position: relative;
            >h2{
                font-family:'Microsoft YaHei';
                font-size: 18px;
                color: #01dbfc;
                background-image: url("../src/images/kuang_da.png");
                width: 220px;
                height: 36px;
                background-position: center;
                background-size: 100% 100%;
                text-align: center;
                line-height: 36px;
                position: absolute;
                left: 30%;
                top: -16px;
                vertical-align: baseline;
                img{
                    width: 20px;
                    height: 20px;
                }
            }
            #echarts2{
                width: 94%;
                height: 300px;
                margin: 30px auto;
            }
            
        }
    }
    >.bottom{
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: 50px;
        padding-bottom: 31px;
        >div{
            margin: 0 20px;
        }
        >.left{
            width: 49%;
            height: 480px;
            background-color: #0e2039;
            border-radius: 20px;
            position: relative;
            >h2{
                font-family:'Microsoft YaHei';
                font-size: 18px;
                color: #01dbfc;
                background-image: url("../src/images/kuang_da.png");
                width: 220px;
                height: 36px;
                background-position: center;
                background-size: 100% 100%;
                text-align: center;
                line-height: 36px;
                position: absolute;
                left: 36%;
                top: -16px;
                vertical-align: baseline;
                img{
                    width: 24px;
                    height: 20px;
                }
            }
            #echarts5{
                width: 30%;
                height: 200px;
                margin-top: 20px;
                
            }
            #echarts6{
                width: 94%;
                height: 230px;
                margin-top: 20px;
            }
            #echarts7{
                width: 68%;
                height: 200px;
                margin-top: 20px;
            }
        }
        >.middle{
            width: 49%;
            height: 480px;
            background-color: #0e2039;
            border-radius: 20px;
            position: relative;
            >h2{
                font-family:'Microsoft YaHei';
                font-size: 18px;
                color: #01dbfc;
                background-image: url("../src/images/kuang_zhong.png");
                width: 280px;
                height: 36px;
                background-position: center;
                background-size: 100% 100%;
                text-align: center;
                line-height: 36px;
                position: absolute;
                left:36%;
                top: -15px;
                vertical-align: baseline;
                img{
                    width: 20px;
                    height: 20px;
                }
            }
            #echarts4{
                width: 96%;
                height: 460px;
                margin: 20px auto;
                margin-left: 40px;
            }
        }
    }
}