html,
body {
    background-color: #000;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    font-size: 14px;
}

.mytoolbar {
    list-style: none;
    position: absolute;
    z-index: 101;
    height: 32px;
    padding: 0;
    margin: 0;
    left: 10px;
    top: 10px;
    background-color: #000;
}

.mytoolbar li {
    float: left;
    margin-left: 10px;
    line-height: 32px;
    color: #fff;
    cursor: pointer;
}

.mytoolbar li:last-child {
    margin-right: 10px;
}

.leftPanel {
    list-style: none;
    position: absolute;
    z-index: 101;
    width: 250px;
    height: 500px;
    padding: 0;
    margin: 0;
    left: 10px;
    top: 50px;
    background-color: #000;
}

.leftPanel li {
    margin-left: 10px;
    line-height: 32px;
    color: #fff;
}

.geojsonPanel {
    list-style: none;
    position: absolute;
    z-index: 101;
    width: 250px;
    height: auto;
    padding: 0;
    margin: 0;
    left: 10px;
    top: 50px;
    background-color: #000;
    min-height: 48px;
    max-height: 700px;
    overflow-y: auto;
}

.geojsonPanel li {
    margin-left: 10px;
    line-height: 32px;
    color: #fff;
}

.lyrControl {
    list-style: none;
    width: 250px;
    height: auto;
    padding: 0;
    margin: 0;
}

.lyrControl li {
    margin-left: 10px;
    line-height: 32px;
    color: #fff;
}

#cesiumContainer {
    width: 100%;
    height: 100%;
}

.cesium-viewer-animationContainer,
/* 左下角动画控件 */
.cesium-viewer-timelineContainer,
/* 时间线 */
.cesium-viewer-bottom

/* logo信息 */
    {
    display: none;
}

.cesium-viewer-fullscreenContainer

/* 全屏按钮 */
    {
    position: absolute;
    top: -999em;
}

.map3d-btn {
    border-radius: 5px;
    height: 28px;
    width: 28px;
    position: absolute;
    left: 6px;
    top: 6px;
    border: 1px solid #303336;
    background-size: cover;
    z-index: 6;
    cursor: pointer;
}

.map3d-btn:hover {
    color: #fff;
    fill: #fff;
    background-size: cover;
    border-color: #aef;
    box-shadow: 0 0 8px #fff;
}

.map3d-btn img {
    height: 28px;
    width: 28px;
}

/*加载效果（遮罩）*/
.masking{
    position:absolute;
    z-index: 1001;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

.loader {
    text-indent: -9999em;    
    width: 200px;
    height: 200px;
    box-shadow: inset 0 0 0 15px #FFF;
    border-radius: 50%;
    position:absolute;
    z-index: 101;
    left: 40%;
    top: 40%;
}

.loader::before {
    position: absolute;
    content: '';
    width: 100px;
    height: 200px;
    background: #4ea980;

    /*半圆*/
    border-radius: 0 200px 200px 0;
    left: 100px;
    /*原点从（0,0）移至圆心处（0,100），绕圆心旋转*/
    transform-origin: 0px 100px;
    animation: load-effect 2s infinite linear;
}

/*最上层（即::before之前）绘制透明白色圆环*/
.loader::after {
    position: absolute;
    content: '';
    width: 200px;
    height: 200px;
    border-radius: 50%;
    left: 0;
    box-shadow: inset 0 0 0 15px rgba(255, 255, 255, .2);
}

/*动画：旋转360°*/
@keyframes load-effect {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}