@font-face {
    font-family: 'futianB';
    src: url('../../fonts/FotonType-Bold.woff2');
}
@font-face {
    font-family: 'futianL';
    src:url('../../fonts/FotonType-Light.woff2');
}
@font-face {
    font-family: 'futianM';
    src:url('../../fonts/FotonType-Medium.woff2');
}
*{
    font-family: "futianL";
    padding: 0;
    margin: 0;
    color: #101010;
}
html,body{
   width: 100%;
  height: 100%; /* 固定视口高度 */
  overflow: hidden; /* 禁止全局滚动 */
}

.map-content{
    width: 100%;
    height: calc(100vh - 97px);
    background-color: #ccc;
    position: relative;
}
#map{
  height: calc(100vh - 99px) !important;
}

.filtrate{
    width: 500px;
    border-radius: 0px;
    background-color: #f0f0f0;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 60px;
    left: 60px;
    padding-bottom: 20px;
    padding-top: 20px;
    padding: 20px;
}
.list{
    width: 490px;
    max-height: 60vh;
    overflow-y: scroll;
    margin-left: 9px;
}
.list div{
    margin-top: 20px;
}
.list p{
    font-family: "futianM";
    font-size: 16px;
    line-height: 24px;
    position: relative;
    display: flex;
    align-items: center;
}
.list p img{
   /* position: absolute;
    right: 5px;
    top: -3px;*/
    width: 27px;
    margin-left: 17px;
}
.list span{
    display: block;
    font-size: 14px;
    line-height: 20px;
}
/* 整个滚动条容器 */
.list::-webkit-scrollbar {
  width: 2px;          /* 垂直滚动条宽度 */
  height: 10px;         /* 水平滚动条高度 */
}

/* 滚动条轨道（背景） */
.list::-webkit-scrollbar-track {
  background: #e3e3e3; 
  border-radius: 10px;
}

/* 滚动条滑块 */
.list::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
  border: 2px solid #555; /* 创建边框效果 */
}

/* 滑块悬停效果 */
.list::-webkit-scrollbar-thumb:hover {
  background: red; 
}

/* 滚动条按钮（上下箭头） */
.list::-webkit-scrollbar-button {
  display: none; /* 隐藏箭头按钮 */
}



/* 整个滚动条容器 */
select::-webkit-scrollbar {
  width: 2px;          /* 垂直滚动条宽度 */
  height: 10px; 
  display: none !important;        /* 水平滚动条高度 */
}

/* 滚动条轨道（背景） */
select::-webkit-scrollbar-track {
  background: #e3e3e3; 
  border-radius: 10px;
}

/* 滚动条滑块 */
select::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 10px;
  border: 2px solid #555; /* 创建边框效果 */
}

/* 滑块悬停效果 */
select::-webkit-scrollbar-thumb:hover {
  background: red; 
}

/* 滚动条按钮（上下箭头） */
select::-webkit-scrollbar-button {
  display: none; /* 隐藏箭头按钮 */
}
select{
    font-size: 14px;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    outline: none;
    margin-left: 5px;
}
/* 针对Webkit内核浏览器 (Chrome, Safari, Edge) */
select::-webkit-scrollbar {
  width: 10px;
}

select::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 10px;
}

select::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 10px;
  border: 3px solid #f1f1f1;
}

select::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* 针对Firefox */
@supports (scrollbar-width: thin) {
  select {
    scrollbar-width: thin; /* 可选：auto | thin | none */
    scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
  }
}

/* 针对IE/Edge旧版 */
select {
  -ms-overflow-style: -ms-autohiding-scrollbar; /* 自动隐藏滚动条 */
  /* 或者强制显示 */
  /* -ms-overflow-style: scrollbar; */
}




#getArea{
  width: 60px;
    background-color: #de0033;
    flex-shrink: 0;
    border: navajowhite;
    border: none;
    color: #fff;
    font-size: 14px;
    font-family: 'futianM';
    letter-spacing: 2px;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}
.location .info>div{
  display: flex;
  justify-content: space-between;
}


.foot{
    width: 100%;
    background-color: #f0f0f0;
    padding: 20px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    display: none;
}
.info{
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 768px){
  .page{
    overflow-x: hidden;
  }
  .map-content{
    width: 100%;
    height: calc(100vh - 64px);
    background-color: #fff;
    position: relative;
}

   .filtrate{
        width: 98%;
        border-radius: 10px;
        background-color: #f3f3f3;
        box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
        position: absolute;
        top: auto;
        bottom: 20px;
        left: 1%;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
    } 
    .list span{
        display: block;
        font-size: 12px;
        line-height: 18px;
    }
    .list{
      width: 96%;
      max-height: 150px;
      overflow-y: auto; /* 容器内启用滚动 */
      -webkit-overflow-scrolling: touch; /* 启用 iOS 弹性滚动 */
    }
    /* 显示垂直滚动条 */
    .list::-webkit-scrollbar {
      width: 4px; /* 滚动条宽度 */
      height: 10px;
      -webkit-overflow-scrolling:auto;
    }
    ::-webkit-scrollbar {
      width: 4px; /* 滚动条宽度 */
      height: 10px;
      -webkit-overflow-scrolling:auto;
    }
    .list::-webkit-scrollbar-track {
      background: #ccc; /* 轨道背景 */
    }
    .list::-webkit-scrollbar-track-piece {
      background: #ccc; /* 轨道背景 */
    }
    .list::-webkit-scrollbar-thumb {
      background: #888; /* 滑块颜色 */
      min-height: 10px;
    }
    .list::-webkit-scrollbar-thumb:hover {
      background: #555; /* 悬停效果 */
    }
    .list div{
      width: calc(97% - 20px);
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #f8f8f8;
      border-bottom: solid 1px #ccc;
    }
    .list p img{
      width: 20px;
    }
    .info{
      margin-top: 0px;
      padding-bottom: 0px;
    }
    .location .info>div{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-items: flex-start;
      width: 100%;
      margin-left: 0;
    }
    select {
      font-size: 12px;
      border: none;
      border-radius: 5px;
      padding: 5px 3px;
      outline: none;
      margin-left: 5px;
      margin-bottom: 10px;
    }
    #getArea{
      height: 24px;
      font-size: 13px;
      width: 50px;
    }
    .foot{
      display: none;
      padding-top: 10px;
    }
    #map{
      height: calc(100vh - 220px) !important;
    }
    #s_province{
      width: 65px;
    }
}