.content-container {
    position: relative;
    display: flex;
    height: 100%;

    .map-scene {
        flex: 1;
        // position: relative;
        // top: 0;
        // left: 0;
        height: 100%;

        // z-index: 1;
        &>div {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .tool-content {
            position: absolute;
            top: 90px;
            right: 11px;
            height: auto;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            color: #666;
            cursor: pointer;
            background: #fff;
            z-index: 99;
            box-shadow: 0px 0px 4px 1px #ccc;
        }

        #map {
            .ol-layer {
                canvas {
                    width: 100% !important;
                    height: 100% !important;
                }
            }

            .ol-attribution {
                display: none;
            }

            .cesium-credit-logoContainer {
                display: none !important;
            }
        }
    }

    .main-content {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        height: 100%;

        // z-index: 99;
        .el-card {
            box-sizing: border-box;
        }
    }

    .bulletin-btn {
        padding: 0 2px;
        position: fixed;
        top: 302px;
        right: 10px;
        background: #C1E6F3;
        border-color: #C1E6F3;
        color: #606266;
        width: 32px;
        height: 64px;
        text-align: center;
        line-height: 32px;
        border-radius: 5px;
        white-space: inherit !important;
        box-shadow: 0px 0px 4px 1px #ccc;
    }

    .flexible-btn {
        padding: 0 2px;
        position: fixed;
        top: 50%;
        left: 0px;
        z-index: 11;
        width: 32px;
        height: 64px;
        color: #606266;
        background: #C1E6F3;
        border-color: #C1E6F3;
        text-align: center;
        line-height: 32px;
        border-radius: 0 5px 5px 0;
        white-space: inherit !important;
        box-shadow: 1px 0px 4px 1px #ccc;
        transform: translate(0px, -50%);
        i {
            font-size: 16px;
        }
    }

    .modele-name {
        position: fixed;
        top: 60px;
        left: 0;
        width: 54px;
        height: auto;
        padding: 20px;
        font-size: $font48;
        text-align: center;
        z-index: 11;
    }

    .general-situation-box {
        padding: 24px;
        position: fixed;
        top: 90px;
        right: 52px;
        width: 30%;
        height: auto;
        z-index: 11;
        border-radius: 10px;
        font-size: $font30;
        color: #000;
        background: rgba(255, 255, 255, 0.5);
        letter-spacing: 2px;
        word-break: break-all;

        span {
            margin: 0;
            width: 100%;
            overflow-y: auto;
            text-indent: 2em;
            font-size: $font30;
            line-height: 40px;

            i {
                font-style: normal;
            }
        }

        .el-button {
            padding: 0px;
            border: 0px;
            span {
                color: #03a9f4;
                font-size: $font28;
            }
        }

        .el-button:hover,
        .el-button:focus {
            background: transparent;
            border: 0px;
        }
    }

    .general-situation-box:hover {
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 0px 16px 2px #999;
    }

    .el-button:hover {
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
    }

}