/*******css初始化********/
*{ padding:0; margin:0; border:0; box-sizing:border-box;}
a{ text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
ul,li,ol{ list-style:none;}
input{ outline:none;}

body{ background:#f0f0f0;}


#map{
    height: 100vh;
}
#gisNav{
    position: absolute;
    top:10px;
    left: 50px;
    z-index: 999;
}
.gisNavUl{
    display: flex;
}
.gisNavUl li{
    cursor: pointer;
    border-radius:3px;
    background: #fff;
    margin-right: 20px;
    padding: 5px 10px;
}
.gisNavUl li.on{
    background: red;
    color: #fff;
}
.top-left-menu{
    width: 200px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 9999;
}
.top-left-main{
    padding:10px;
}
.top-left-toggle{
    text-align: center;
}
.selectBox{
    position: relative;
}
.select{
    border:1px solid #eee;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    padding-left: 10px;
}
.selectUl{
    display: none;
    width: 100%;
    border: 1px solid #eee;
    border-top: 0;
    border-radius: 5px;
    background:#fff;
    position: absolute;
    top: 40px;
}
.selectUl li{
    border-bottom: 1px solid #eee;
    padding: 5px 10px;
}
.selectUl li:last-child{
    border-bottom: 0;
}
.selectUl li:hover{
    background:rgb(130, 177, 247);
    color: #fff;
}
.bottom-left-menu{
    display: flex;
    height: 200px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9999
}
.bottom-left-main{
    flex:1;
    width: 500px;
    height: 200px;
    padding: 5px 10px;
}
.gis-title{
    font-weight: normal;
}
.gis-note{
    font-size: 16px;
    color: #666;
}
.bottom-left-toggle{
    line-height: 200px;
}
.right-menu{
    display: flex;
    background: #fff;
    height: 500px;
    border:1px solid #eee;
    border-radius: 3px;
    position: absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%);
    z-index: 9999
}
.right-main{
    flex: 1;
    width: 150px;
}
.right-toggle{
    line-height: 500px;
}
.rotate{
    transform: rotate(180deg)
}




/*******common css*******/
.fl{float: left;}
.fr{float: right;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;}
.playFlex{ display:-webkit-box; display:-webkit-flex; display:flex;}
.overHidden{overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; width:100%;}
.overTwo {display: -webkit-box; text-overflow: ellipsis; overflow : hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.playNone{ display:none;}