* {
    margin : 0;
    padding: 0;
}

html,
body {
    margin     : 0;
    height     : 100%;
    overflow   : hidden;
    font-size  : 14px;
    font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
}

/* 头部菜单 */
.header {
    width           : 100%;
    height          : 60px;
    background-color: #485D86;
    line-height     : 60px;
    text-align      : center;
}

.header span {
    display: inline-block;
    width  : 100px;
    color  : #fff;
    cursor : pointer;
    font-size: 16px;
}

.header span.active {
    background           : url('../images/titleBg.png') center no-repeat;
    background-size      : 100% 70%;
    background-position-y: 12px;
}

/* 地图 */
.fengMap {
    width   : 100%;
    outline: none;
    height  : calc(100% - 60px);
    position: relative;
    background           : url('../images/bg.jpg') center no-repeat;
}


/* 操作按钮组 */
.tools {
    width   : 30px;
    position: absolute;
    left    : 15px;
    top     : 120px;
    display : none;
}

.tools>div {
    width           : 100%;
    margin-bottom   : 5px;
    box-shadow      : 0px 2px 8px 0px rgba(42, 51, 85, 0.58);
    background-color: rgba(10, 24, 66, 0.5);
}

.tools>div:last-child {
    margin: 0;
}

.tools div.rotateBtn,
.tools div.viewModeBtn {
    height: 30px;
    cursor: pointer;
}

.tools div.rotateBtn {
    background: url(../images/rotate.png) center no-repeat rgba(10, 24, 66, 0.5);
    ;
    background-size: 70% auto;
}

.tools div.rotateBtn.active {
    background     : url(../images/rotateActive.png) center no-repeat rgba(10, 24, 66, 0.5);
    background-size: 70% auto;
}

.tools div.viewModeBtn {
    background     : url(../images/2D.png) center no-repeat rgba(10, 24, 66, 0.5);
    background-size: 70% auto;
}

.tools div.viewModeBtn.active {
    background     : url(../images/3D.png) center no-repeat rgba(10, 24, 66, 0.5);
    background-size: 70% auto;
}

/* 楼层控件 */
.floorCtrl>span {
    display: block;
    width  : 100%;
    height : 30px;
    cursor : pointer;
}

.floorCtrl .layer {
    background     : url(../images/layer.png) center no-repeat;
    background-size: 70% auto;
}

.floorCtrl .layers {
    background     : url(../images/layers.png) center no-repeat;
    background-size: 70% auto;
}

.floorCtrl ul {
    width     : 100%;
    color     : #E5E9F6;
    box-shadow: 0px 3px 8px 0px rgba(65, 75, 114, 0.58);
}

.floorCtrl ul li {
    width        : 100%;
    height       : 28px;
    line-height  : 28px;
    text-align   : center;
    border-bottom: 1px solid #697491;
    cursor       : pointer;
    padding-top  : 2px;
}

.floorCtrl li:last-child {
    border-bottom: none;
}

.floorCtrl ul li span {
    display: inline-block;
    width  : 26px;
    height : 26px;
    color  : #fff;
}

.floorCtrl ul li.active span {
    background-color: #7A9EEC;
    border-radius   : 4px;
}

/* 光效集合 */
.effects {
    width   : 170px;
    color   : #fff;
    position: absolute;
    top     : 90px;
    left    : 20px;
    display : none;
}

.effects .effectCont {
    width           : 160px;
    background-color: rgba(9, 23, 66, 0.5);
    padding         : 20px 0;
}

.effects .effectCont>div {
    width      : 104%;
    text-align : center;
    font-size  : 16px;
    line-height: 60px;
    cursor     : pointer;
    text-indent: -4%;
}

.effects .effectCont>div.active {
    background     : url('../images/effect_bg.png') center no-repeat;
    background-size: 100% auto;
}
/*所有组件的容器*/
.fm-control-groups {
    width: 42px;
    position: absolute;
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px;
    border-radius: 2px;
    top: 30px;
    z-index: 20;
    right: 30px;
  }
  
  /* 视图切换 */
  .fm-view {
    display: block;
    margin-bottom: 10px;
    width: 42px;
    height: 42px;
    padding: 0px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px;
    border-radius: 2px;
  }
  
  .fm-view-3d {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAAEgklEQVR4nO1bu04bQRS9WaUPfAETfiBI0MdIpI4b0kIaKJMOumW60JkSN4E2bkKNpZAPsBQ+IGT5AuAHhuiiM8kwzHofnrtrZB/JMrvz8L1n7mNevLi/v6dZxss2dFfadIjogIje4tVPfs7S5KJpWRq1AKXNChH1HMV9MBGfszT51ZRMjRCgtFEY8a2STU5hEZmwaLIEKG0WeETxeeUV3+E9wSpC5fy+l6XJrZSMYgQobT5j1AsVK0EUW0NPQs7oBChtulBwKVA81rQLXOUa8eF7THmjERCI7C4qBbeCYBk1Y0xMQMGoXULxWsKCVCbiTaA4SqCsTYDjt2mg+BrCnUwinPNb2yA55FZ6kkBZiwCY6EWTkbtEoOzUmT/UJSALjMYpzF0sZdF/InoBl7vO0kRV7S+pIcBKjimyv3ar9lcDXfyWjyXIVgl11gILOe+ZlK/WX2PP6wuyTJFsuYixGLr2LIIF/KG0OYNLTBSlkWXY5N9PLupTVHaBAHjEP4IIFyzwH6VND35bCdyG23IfUsozYhBAnO4QgDQisotPXEVpc1C2P9TN0FYUUQhwiGDBmYgjr4jTVsrZAzEiT/FtZJg0kOpEEJUAkHCbpQnn6tdEdOYV20B5gaBmFe/wOy7LyTBiENsRQvDr5kRvN1CSpI8XIboF+OB0mKVJZ0ygbE15hjgBFgWBsjU0RoBDhA2UlzNJACFQEpHomqEsWiFgmjAnYApkaBVzAqZAhlYxJyBCH6HdmWeDygQEdnoKV3lNoc4uVF0L0N5zcJXXMHyZ5AjAdHY9sLixq7wmiWAZ1iFTZcQ4GRp3aJF7eoP1/7gNziJEOXyJeTaYdxpMoTODCQiIelocLQ1CoLzl7pbdF6yzQQrcoW8V86hc5H4AlDzI2dS0x2edChZwhFGPvoKUviFS9WqMD/GrMk3eETqpMOJ8B2D72d8R8lHieKvx63KtXJTENZoD5+LDJRSPev2lDGb+puh8NTgFMrSKmSdA7GhMabNKRDtEtEFEy0Q0JKIRER1maXLj1fuS080VPoMsTa4k5JSaCW4S0becYlZ+zSqktGGCzkt0OyCiXZe8GIjuAkqbRSI6dpTdJaJ3RLSPd1y+l9O8j3r200cfDCb1HP1Hg4QLbEJJxocsTYb4e6i0WYZbrOa0HTj1H6C02YeL2Hb8fRhLWIn7ATxqazyCvjIOliv0d5OlyS7iB42xnloQyQJZmoyyNHk0Sgh2m3gc1Oi2j+9F9BUFov8yo7TZcZTewPfQiQdVMHLqRosD0vOARShulb+Bn1eO5GxVzmNpFyqCNAEjL6I/ZAilzXGJto/gRf9oFiDqAgiC/wKh0maEFLmjtOl7o1oE1++rtBsLEQvgdBcKVMgQFhtPGo6HWz/arFBiIsQj/NuZDLllrumWjgMg06a/YcxpsYQLWPNcVdrs2XQI5d05fygVchv/3QYmPxZ1MkgupNYC517kH3kmvGvdocJa4Abt6swhciH5b3N7GDk3ZbHwfXeGWLAaJIfAfuyFEGO+JTYFMrSK2SaAiP4CqdESq7xRwWUAAAAASUVORK5CYII=") no-repeat white;
    background-size: 100% 100%;
  }
  
  .fm-view-2d {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsSAAALEgHS3X78AAAEdUlEQVR4nO1bvU4bQRCeROkDT4DDCwQJ+oDk1LghLaRhyqSDDtOFzpTjJtDGTaixFPIAlsIDBNlPYHgCoiHfJsuy57tb794Z2Z9k2b69W89+O/PN/vnF/f09zTNe1dF2Zt4kojYRvcOln/pdRK6qtqVSD2DmNSLqWA13oUR8FpFfVdlUCQHM3ECP7xZ85BweMUxsWloCmHlJexSv107xHa4TvMJXrtc7InKbysZkBDDzZ/R6bsMKEKXe0ElhZ3QCmLmFBq54iie6dk6ojKAP32PaG40Aj7LbKCVuOWIZNWNMTUBOr12j4UHGglQl4q2nOIpQBhNgxe2Rp3gE486mMc76rT2Q7Aur42mEMogAuOhVlcpdQCg3Q8YPoQQMPb1xDndPlrLoPxEdT8iNRKRRtr6XAQasZbiixmurbH0BaOG3XKzAtlIImQssZVxXUr6aeI09rs/JMnm2ZSLGZGjkeIQa+IOZLxASU6k0soy6/Pb0pj5FDAK0xxselVaDt5n5FB5RShsQ61rnpwg2ZqK0Bvig6Q4CdAxFtqENGDJzu2h9uHeYuvGKKAQYiEgb3nDqFGnaOtLsAY3wQsuQYY48qS4JohJAf0m4FRHN1W+I6MIpNkJ5BVF7gH7Wa1qWkWGSIdmKEMSvlaHetlBSKoErguge4ELToYgoCR+RMWxs19l4RXICDHKEsjZURoBFhBHK67kkgCCURJR0zlAUtRAwS1gQMAM21IoFATNgQ61YEBChDt/qzLNBaQI8Kz25s7yqELIKFeoBx8537yyvYrg2pSMAw9ktz+TGzPKqJEJt2IJNpRFjZ2jSpkXm7g3m/5MWOPMQZfMl5t5g1m4w+fYMpiAg6m5xtDQIg7Kmu7tmXRCLnSG4Q92NmFvlSc4H5Kzomu2zzRIeELSyXASpT4iUPRrjIvlRmSrPCJ2V6HE9A7D37M8IuSiwvVX5cblaDkriGE3bOvhwjYZHPf5SBHN/UnQxG5wBG2rF3BOQbGuMmdeJaJ+ImkS0SkR9IhoQ0YmIjJ37vmRUc4NXT0RuUtiZaiS4Q0TfMoq18RumQcysBF0WqLant9vkxUD0EGDmZZ0aWI1lInpPRIe4puUHGY93cZ95dVGHQkm9RP3RkCIEdtBIxQcR6eNzn5lXERbrGc/2rPsfwMyHCBHznL6fxDI2xfkA7bUN7UG3MRZWS9Q3FhGGftAE7wlCkiwgIgMRedRLELsdfO0FVNvF+zLqioKkf5lh5n2r0U289y09KIOBdW80HUg9DlhGw03jx4jz0kquXmV9LRxCeUhNwMBR9IcMwcxS4NlHcNQ/mgckDQGI4D8hZOYBUuQ+M3edXs2DHfdlnpuIJB6g6c4nVMgQBs0nD06GfX+0UWGKgZD28G9rMGSX2a5bWAdApkl//ZjD4hQhYNxznZkPTDpE4+0xvy8V6jPutSYGPwYhGSQTqeYCl47yDxwXZhMOJeYCYzwXMobIRMq/zR2g5+yUpcZ37RFizmyQLAK7sSdCisWS2AzYUCvmmwAi+gPQcQvBT6vKtAAAAABJRU5ErkJggg==") no-repeat white;
    background-size: 100% 100%;
  }
  
  /* 楼层切换 */
  .fm-layer {
    height: 42px;
    width: 42px;
    cursor: pointer;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .fm-layer-image-one {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAMAAADyHTlpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA0lBMVEUAAAAegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoAAABMZOkLAAAARHRSTlMAJQsRbtXylzE6oPbJYwwPbNPwlS84nvXHYQpq0JMsnPPFXQT5hTKZVMjqiQ6W/r9YB2TK7I0nmMFbZs3tjyk0m8QJT9xaIWkAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAAqklEQVQ4y2NgGAWjgDLAyEScOmYWVhc2dg7CCjm5uF3AgIeXD586fgFBFwQQEhbBpVBUTNwFDUhISmExUFrGBRsQkpVDVSgir+CCEygqKSMFjooLXqCKUKqGX6WLOpIDNDTxKNTS1kF1ra4QVnV6+gaGGGHAZ2SModDE1AxHyKqZsyErtLA0ZMAN+KysoepsbO0IpgJ7B2AYOyo5EU4vQKDjTNjAUTAK8AMAeypG+KfRwzwAAAAASUVORK5CYII=") no-repeat white;
    background-size: 100% 100%;
    height: 24px;
    width: 24px;
  }
  
  .fm-layer-image-many {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABa1BMVEUAAAAegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoegvoAAAAEmJR8AAAAd3RSTlMAJozoB1e+/iSJ6QVVuyKHUrn9IITmKLS12errUedUuiMGvSWLWb+vzK6N7a3j5YMfXMJbPNFOAxxPOqD25IEdEG7U/LNMEaL34n4bEnDXsEkCP6X44MXuzmwPFHPYE831njcBQacqttBqtyvznDVnDZozy2UM8sXx3pEAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAB5UlEQVQ4y81U+TsCQRheKtvh6hBRlJJEJBGSUI5KoUNJzgoR5Zx/387M2tm2Vf3k8f6wz3zf9+77zHwXRf0jdHVLJN1d7VhSWQ8NGNA9MmkLmlyhBByUCrk4S9XbR4MG0H29qiZa/4AEiEAy0N8gNqjWgF+gUQ/+yGp1Q6AlhnRahqYf1oC20IzoKUN7GoSBGu2MOEYZTZ3wTEbmyeMTdGsWPTHOPtzMr4gQSoWZl0mLbFJUlp6UWYS1sdqa3jVqs4q3zpSdJ0vbpxoaaNoxYySl1ztnMW3WqScVNs45pikX451fcBPZRQ8AniUi5l6YZyguyruMa7Ti40Krq9zRtzaCKrzsZYx1/wY8BzaDwksHNwMwsuFfZx1b2zvQEQrvElnKtxsOQe/O9h7/Z+/+AfRGojFsx6IRaB/se5uScxhPINmj45OT4yMklogfio9NMpWG8UwGftOpZEPwNJs7y3PWeeEC5/GicMk582e57BVq3OubW85bLJXT6XKpyDlub65R497do0Q9VIislGQ7X3lAaX58IsNVfX4R3vnluQojeLj445qr1QmrXsshMTKuCOwCqL6+YfvtFYkJFgCWZVfK+8fn58c7ajSxlYLALqmvLzwCvywp/ODO1h4Cs0gD7RfpX+IbsgQXrPXbyDgAAAAASUVORK5CYII=") no-repeat white;
    background-size: 100% 100%;
    height: 24px;
    width: 24px;
  }
  
  /* 楼层列表 */
  .fm-floor-list-group {
    margin-top: 0px;
  }
  
  .fm-floor-list {
    overflow: hidden;
    background-color: #FFFFFF;
    width: 42px;
    overflow: hidden;
    /* 不能指定高度,动态计算生成*/
  }
  
  .fm-floor-line {
    height: 1px;
    border-top: 1px solid rgba(153, 153, 153, 0.45);
    border-right: none;
    border-bottom: none;
    border-left: none;
    border-image: initial;
    width: 60%;
    margin: 0px 20%;
  }
  
  .fm-floor-name {
    display: inline-block;
    text-align: center;
    --size: 42px;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    margin: 0px;
    cursor: pointer;
  }
  
  .fm-floor-name-normal {
    font-size: 0.8em;
    font-weight: bold;
    color: rgb(102, 102, 102);
  }
  
  .fm-floor-name-active {
    font-size: 0.8em;
    font-weight: bold;
    color: rgb(30, 130, 250);
  }
  
  /* 楼层上下切换按钮 */
  .fm-scroll {
    height: 18px;
    cursor: pointer;
  }
  
  .fm-scroll-up {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAbklEQVQI133NoQ3CUBiF0VNIagkLPAUbMEERnaVLVPwjwDJgOgCsUNUNap/CvCBeCVd+OcmlWoo8pMhD3ZsKdXiU3i9jO21ginzCC8eSVlyWsZ2/MEU+4I1z9TgXvDYp8h5PXP3ehH6H+x8EHW4fybsaVZb+mXYAAAAASUVORK5CYII=") 50% 50% no-repeat white;
  }
  
  .fm-scroll-up-grey {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAZ0lEQVQI133NMQ3CYBgE0FcQUBO1AAI6EJx8qZ5OJ6UMVYAD8EBQAEvD8EO48e4lR5MkU5Kp7bsGjVjwwrmq1i+YZMAV/VY9cKyq+wcm6Tc0NI83HKrq2SXZ44LR76w47TD/QbZtfgP0tBvnAWb0twAAAABJRU5ErkJggg==") 50% 50% no-repeat white;
  }
  
  .fm-scroll-down {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAb0lEQVQI133PsQ3CMAAF0RcXbtnAFSswBJSIJVJkBRceArbJBGwAVRZAbg0FTZBQQLny/jW/S6Wd0VvnEjBgXIlGDB2k0ja4YruIbthNOdYAU44Ve9Sv6IHDvAkfO+V4xxEvPHGa3X9SaX0q7efcG8DBHdeJEiXGAAAAAElFTkSuQmCC") 50% 50% no-repeat white;
  }
  
  .fm-scroll-down-grey {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAAZUlEQVQI133PMQ0CQQBE0bdnAESAAzACIjZXgJwjIwYMYOFEQA8JzW4D5Kb8ec2UJBNGy7sMOOG6gG44F0iywh3bLzRjX2t9lF6SbBpet/TErtY6w9BhC0e88Maho79LMib5OfcBZrcc5/hnjOIAAAAASUVORK5CYII=") 50% 50% no-repeat white;
  }