html,body{height: 100%}

.loading,.toast {
  position: fixed;
  min-width: 130px;
  left: 50%;
  bottom: 60px;
  background: rgba(0,0,0,.7);
  text-align: center;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
  padding: 10px 14px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.loading span {
  position: relative;
  display: inline-block;
  line-height: 41px;
  padding-left: 33px;
}
.loading span i {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  margin-top: -12px;
  left: 0;
  background: url(http://wx-img.jhrx.cn/fw2020/img/loading_g.png) no-repeat;
  background-size: 24px auto;
  margin-right: 8px;
  vertical-align: -2px;
  z-index: 2;
  -webkit-animation: loading 1s linear infinite;
  animation: loading 1s linear infinite;
}

@-webkit-keyframes loading {100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(360deg);transform: rotate3d(360deg);}}
@keyframes loading {100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate(360deg);transform: rotate3d(360deg);}}

.flexbox{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;}
.flex-grow{-webkit-flex-grow: 1;flex-grow: 1;}
.flex-sub-center{-webkit-align-items:center;align-items:center}
.flex-main-center{-webkit-justify-content:center;justify-content:center}
.flexbox .box_col{display: block;-webkit-box-flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;flex: 1;}

.tab_bar{height: 45px;line-height: 45px;background-color: #fff;}
.tab_bar .tab_tit{position: relative;text-align: center;font-size: 14px;overflow: hidden;}
.tab_bar .tab_tit>.tit{display: inline-block;vertical-align: middle;overflow: hidden;}
.icon_triangle_down{width: 9px;height: 8px;background-position-y: -133px;display: inline-block;}
.icon_triangle_down{-webkit-transform: translate3D(5px,-2px,0);transform: translate3D(5px,-2px,0);}
.tab_bar .tab_tit .icon_triangle_down{color: gray;vertical-align: middle;}
.tab_bar .tab_tit.active, .tab_bar .tab_tit.active .icon_triangle_down {background-position-y: -124px;color: #f35257;}

.filter_box .content{position: fixed; background: #fff; top: 2.8125rem; width: 100%; color: #394043;}
.filter_box .filter_item{position: absolute; background: #fff; top: 0; left: 0; right: 0; -webkit-transition: -webkit-transform .5s ease; -moz-transition: transform .5s ease,-moz-transform .5s ease; -o-transition: transform .5s ease,-o-transform .5s ease; transition: transform .5s ease; transition: transform .5s ease,-webkit-transform .5s ease,-moz-transform .5s ease,-o-transform .5s ease; -webkit-transform: translate3d(0,-100%,0); -moz-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); opacity: 0; z-index: 1;max-height: 357px;overflow: hidden;overflow-y: auto;}
.filter_box .filter_item.active{-webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; z-index: 2;}
.filter_box .filter_item li{font-size:15px; line-height: 50px; overflow: hidden; white-space: nowrap;}
.filter_box .filter_item li.active a{color: #FF725C; -webkit-tap-highlight-color: transparent;}
.filter_box .filter_item ul{width: 100%; padding-left: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.filter_box .filter_item li{height: 50px; line-height: 50px; border-bottom: 1px solid #f1f1f1; overflow: hidden; white-space: nowrap;}
.layer_fixed{position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 1000;}
.layer_fixed, body.filter_show{top: 0; left: 0; overflow: hidden; bottom: 0; right: 0;}
.layer_fixed .content a{color: #394043; line-height: 50px; display: block;}
.filter_box .tab_bar{position: relative; z-index: 10;}
.filter_box .tab_bar, .layer_fixed .content .li a, .layer_fixed .lists li{border-bottom: 1px solid #eee;}
.flex_grow{-webkit-flex-grow: 1; flex-grow: 1;}

.list-tab {
    text-align: center;
}
.list-tab ul {
    width: 176px!important;
    height: 26px;
    margin: 9px auto;
    border: 1px solid #f35257;
    border-radius: 3px;
    font-size: 13px;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}
.list-tab li {
    width: 50%;
    height: 24px;
    line-height: 25px;
    background: #fff;
}
.list-tab li.cur {
    background: #f35257;
}
.list-tab li a {
    display: block;
    color: #f35257!important;
}
.list-tab li.cur a {
    color: #ffffff!important;
}


.border-right{border-right:1px solid #c0c0c0;}
.text-center{text-align:center;}
#findMapBox{width:100%;}


/*地图区域显示层*/
.area-layer{width:100px;height:60px;border-radius:5px;display:inline-block;text-align:center;font-size:16px;border: 1px solid #835b5d;}
.area-title{width:100%;height:30px;background:#fff;color:#835b5d;line-height:30px;border-top-left-radius:5px;border-top-right-radius:5px;}
.area-content{width:100%;height:30px;background-color: #835b5d;color:#fff;line-height:30px;}


.needle {
    padding: 5px 15px;
    background-color: hsla(7,100%,70%,.96);
    border: 1px solid #f76;
    border-radius: 4px;
    box-shadow: 0 1px 10px 0 rgba(0,0,0,.14);
}
.needle .zone {
    display: block;
    line-height: 18px;
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    color: #fff;
}
.needle .num {
    display: block;
    line-height: 14px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
}
.map-marker-arrow {
    position: relative;
    width: 100%;
    height:10px;
    z-index: 100;
    text-align: center
}
.map-marker-arrow .map-marker-down {
    border-width:7px;
    border-color: #f76 transparent transparent;
    border-style: solid dashed dashed dashed;
    font-size: 0;
    line-height: 0;
    display: inline-block;
}

.leixing1 .needle{background-color: rgba(255,161,64,.96);border: 1px solid #ffa140;}
.leixing2 .needle{background-color: rgba(249,22,36,.96);border: 1px solid #f91624;}
.leixing3 .needle{background-color: rgba(61,158,82,.96);border: 1px solid #3d9e52;}
.leixing4 .needle{background-color: rgba(100,142,249,.96);border: 1px solid #648ef9;}
.leixing5 .needle{background-color: rgba(186,186,186,.96);border: 1px solid #BABABA;}

.leixing1 .map-marker-arrow .map-marker-down{border-color: #ffa140 transparent transparent;}
.leixing2 .map-marker-arrow .map-marker-down{border-color: #f91624 transparent transparent;}
.leixing3 .map-marker-arrow .map-marker-down{border-color: #3d9e52 transparent transparent;}
.leixing4 .map-marker-arrow .map-marker-down{border-color: #648ef9 transparent transparent;}
.leixing5 .map-marker-arrow .map-marker-down{border-color: #BABABA transparent transparent;}