a {
    text-decoration: none;
    color: var(--text-color); /*000000*/
}

a:hover {
    text-decoration: none;
}
li {
    list-style-type: none;
}
#map{
top:65px;
width: 100%;
height: 93%;
position:absolute;

}
#map .ol-zoom .ol-zoom-out {
margin-top: 204px;
}
#map .ol-zoomslider {
background-color: transparent; 
top: 2.3em;
}
#map .ol-zoom-extent {
top: 280px;
}
.custom-mouse-position{
position: absolute;
bottom:10px;
right:10px;
color:#ff2d51;
font-size: 20px;
font-family: "微软雅黑";

}
/*自定义鹰眼样式*/
.myOverview,.myOverview.ol-uncollapsible
{
    bottom:auto;
    left:auto;
    right:0px;
    top:10px;
}
/*鹰眼控件展开时的控件外边框*/
.myOverview:not(.ol-collapsed)
{
    border:1px solid black;
}
/*鹰眼控件地图容器边框样式*/
.myOverview .ol-overviewmap-map
{
    border:none;
    width:300px;
    height:200px
}
/*鹰眼控件中显示当前窗口区域的边框样式*/
.myOverview .ol-overviewmap-box
{
    border:2px solid red;
}
/*鹰眼控件展开时其控件按钮图标的样式*/
.myOverview:not(.ol-collapsed) button
{
    bottom:auto;
    left:auto;
    right:1px;
    top:1px;
}
#navigation{
    background-color: var(--bg-color);  /*250, 250, 250*/
    height:50px;
    border-bottom:3px solid rgb(35, 80, 218);
}
#navigation a{
    display:inline-block;
    height:40px;
    padding: 0 5px;
    margin:0;
    /* 水平居中 */
    text-align: center;
    /* 上下居中 */
    line-height: 40px;
    font-size:18px;
    color: var(--text-color);  /*000000*/
    /* 取消下划线 */
    text-decoration: none;
}
/* 设置鼠标悬停时的样式 */
#navigation a:hover{
    background-color: rgb(240, 240, 240);
    color:rgb(35, 80, 218);
}

#navigation ul {
    width: 100%;
    height: 40px;
    margin:5px 0 5px 0 ;

}
#navigation ul li {
    float: left;
    width: 350px;  
    height: 100%;
    text-align: center;
    line-height: 50px;
    margin-left: 10px;
}
#navigation ul li div {
    overflow: hidden;
    position: absolute;
    width: 400px;
    height: 0;
    background-color: var(--bg-color);  /*fff*/
    /*border: 1px solid rgb(189, 189, 189);*/
    /* border-radius: 10px; */
    transition: height 0.2s ,border 0.2s linear;
    -moz-transition:height 0.2s ,border 0.2s linear;
    /* Safari and Chrome */
    -webkit-transition:height 0.2s ,border 0.2s linear;
    /* Opera */
    -o-transition:height 0.2s ,border 0.2s linear;
}
#navigation ul li:hover div {
    position:relative;
    height: 480px;
    left:75px;
    width: 200px;
    border: 1px solid rgb(35, 80, 218);
    z-index: 10;
}
#navigation ul li div ul {
    padding:0;
    width: 100%;
    height: 480px;
    background-color:rgba(255,255,255,0.4);
}
#navigation ul li div ul li {
    margin: 0 0 0 0;
    width: 200px;
    height: 40px;
    line-height: 30px;
}
#navigation ul li div ul li a{
    display: block;     /*填充li*/
    color: var(--text-color);  /*000000*/
}
.layerControl{ 
    position:absolute;
    bottom:5px;
    min-width:200px;
    max-height:200px;
    right:0px;
    top:300px;
    z-index:2001;
    color:#ffffff;background-color: rgba(0,10,168,0.4);
    border-width:10px;
    border-radius:10px;
    border-color:#000 #000 #000 #000; 
}
.layerControl .title{
    font-weight:bold;
    font-size:15px;
    margin:10px;
}
.layerTree li{
    list-style:none;
    margin:5px 10px;
}
.layerTree{
    padding:0 0 0 0;
}