/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道
内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

  background-color: #F5F5F5;
}

/*定义滑块
内阴影+圆角*/
::-webkit-scrollbar-thumb {

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

background-color: #85afff;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  opacity: 0;
  animation: page-fade-in 500ms forwards;
}

@keyframes page-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.query_bar {
  height: calc(10% - 40px);
  padding: 20px 30px;
  width: 70%;
  float: right;
}

.query_bar div {
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.query_bar>div:nth-child(1) {
  width: 28%;
  color: #00d8ff;
  font-size: 1.375rem;
  position: relative;
  margin-right: 2%;
  text-align: right;
}

.map_content {
  width: calc(100%);
  height: calc(100%);
  overflow: auto;
}

.map_content>div {
  position: relative;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid rgba(231, 234, 243, 1);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#map {
  width: 100%;
  height: 100%;
  z-index: 9;
}

.map_tool {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.map_tool_search {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 22%;
  height: 50px;
  background-image: url(../images/search.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}

#mapSearch {
  width: 25px;
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 100;
}

#mapSearchText {
  width: 100%;
  height: 100%;
  background-color: rgba(3, 212, 209, 0);
  border: 0;
  color: white;
}

#mapSearchText::-webkit-input-placeholder {
  color: white;
}

#mapSearchText::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: white;
}

#mapSearchText:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: white;
}

#mapSearchText:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.map_tool_tool {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 25%;
  height: 50px;
  background-image: url(../images/search.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}

.map_tool_facility {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 100;
}

.map_tool_facility>div {
  width: 180px;
  height: 100px;
  background-image: url(../images/map-facility.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.map_tool_facility>div>div {
  position: relative;
  height: 100%;
  width: 100px;
  color: white;
}

.map_tool_facility>div>div>img {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
}

.map_tool_facility>div:nth-child(1)>div>img {
  top: 22%;
}

.map_tool_facility>div:nth-child(2)>div>img {
  top: 30%;
}

.map_tool_facility>div:nth-child(4)>div>img {
  top: 24%;
}

.map_tool_facility>div>div>span {
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 55%;
  transform: translateX(-50%);
}

.map_tool_facility>div>p {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #1ff1ff;
  font-size: 2.5rem;
  /* font-family: "液晶数字字体"; */
}

.map_tool_monitor {
  position: absolute;
  min-height: 100px;
  right: 20px;
  width: 20%;
  top: 80px;
  min-width: 300px;
  background-image: url(../images/monitor-top.png);
  background-repeat: no-repeat;
  background-size: 100% 40px;
  z-index: 100;
  display: none;
}

.monitorClose {
  position: absolute;
  width: 60px;
  height: 22px;
  right: 0px;
  top: 0px;
}

.map_tool_monitor>div:nth-child(1) span {
  position: absolute;
  color: white;
  font-size: 0.8rem;
  width: 100%;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
  display: inline-block;
}

.map_tool_monitor>div.monitorClose img {
  position: absolute;
  width: 100%;
  top: 15px;
  right: 0px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 12;
}

.map_tool_monitor>div.monitorClose p {
  position: absolute;
  color: rgb(3, 212, 209);
  font-size: 0.8rem;
  width: 100%;
  top: 15px;
  right: -8px;
  transform: translateY(-50%);
  text-align: center;
  display: inline-block;
  z-index: 11;
}

.mon-title {
  width: 120px;
  height: 40px;
  background: url(../images/monitor-title.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
  line-height: 30px;
}

.map_tool_monitor>div.map_tool_monitor_content {
  width: 100%;
  background-image: url(../images/monitor-bottom.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100px;
  height: auto;
  overflow: hidden;
  z-index: 100;
}

.map_tool_monitor_content .map_tool_box>div {
  width: calc(100% - 30px);
  height: 60px;
  margin: 10px;
  background-image: url(../images/61.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.map_tool_monitor_content .map_tool_box>div>div {
  width: 100px;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  float: left;
}

.map_tool_monitor_content .map_tool_box>div>div>span:nth-child(1) {
  color: white;
}

.map_tool_monitor_content .map_tool_box>div>div>span:nth-child(3) {
  color: #2ca3fd;
  font-size: 1.5rem;
}

.map_tool_monitor_content .map_tool_box>div>p {
  width: calc(100% - 110px);
  float: left;
  position: relative;
  color: white;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  padding-right: 10px;
  font-size: 1.25rem;
}

.map_tool_monitor_content .map_tool_box>div>p>span {
  color: #1ff1ff;
  font-size: 1.6rem;
  padding-right: 5px;
}