.slider {
    padding-left: 8px;
    padding-right: 15px;
  }
  
  .slider-rule span {
    margin-top: -10px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    border: none;
    background-color: #d6c5b3;
  }
  
  .slider-rulelabel span {
    margin-top: -4px;
    color: #555;
    font-weight: 500;
    font-size: 13px;
    transform: translateX(-50%);
  }
  
  .slider-inner {
    position: relative;
    height: 3px;
    top: 10px;
    text-align: left;
    background-repeat: repeat-x;
    border: none;
  }
  
  .slider-inner:before {
    content: "";
    display: block;
    width: 0%;
    height: 0;
    top: 10px;
    border-top: 2px solid #fff;
  }
  
  .slider-tip {
    display: flex;
    padding-bottom: 2px;
    margin-top: -15px;
    margin-left: -30px !important;
    width: 64px;
    height: 22px;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    background-color:#854B5B;
  }
  
  .slider-tip:after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: calc(50% - 4px);
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background-color:#854B5B;
    z-index: 10;
  }
  
  .slider-handle {
    z-index: 2;
    width: 16px;
    height: 16px;
    margin-top: -10px;
    margin-left: -6px;
    border: 2px solid #fff;
    background-image: none;
    border-radius: 10px;
    background-color: #9E6F6D;
  }
  
  .slider-handle:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 10px;
  }
  

  .time-slider {
    width: 120px;
    padding-left: 20px;
  }

  
  .btn-ctl {
    border: 1px dotted #555;
    font-size: 9pt;
  }
  
  .e-charts {
    position: absolute;
    bottom: 18px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .info_box {
    box-sizing: border-box;
    width: 100%;
    padding: 23px 46px 33px;
    color: #444;
  }
  
  .info_box #info_date {
    height: 54px;
    color: #000;
  }
  
  .info_box hr {
    border-top: 2px solid #55447b;
  }
  
  
 
  .info_box .table {
    margin-top: 30px;
    margin-bottom: 18px;
    width: 100%;
  }
  
  .info_box .table th,
  .info_box .table td {
    padding: 4px 0;
    text-align: center;
    font-size: 13pt;
    font-weight: 500;
    border: none;
  }
  
  .info_box .table tr:first-child th {
    padding: 3px 0;
    border-top: 2px solid #999;
    border-bottom: 1px dashed #999;
  }
  
  .info_box .table tr th:first-child {
    width: 88px;
    border-right: 1px dashed #999;
  }
  
  .info_box .table td {
    vertical-align: middle;
    font-size: 9.5pt;
    color: #666;
  }
  
  .info_box img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  
  /* 2019.09.20 */
  /* 공통 */
  #header{z-index: 999;}
  #footer{padding: 0;border-top: 0;}
  .clfix{*zoom:1;}
  .clfix::after{content:'';display: table;clear:both;}
  
  #mapid {width: 100%;height:780px;z-index: 0;}
  .map-area{float:left;position: relative;}
  .map-area.left{width:calc(100% - 400px)}
  .map-area.right{position:relative;width: 400px;height: 100%;border-left:1px solid #ddd;box-sizing: border-box;z-index: 100;}
  .map-area.right>div{box-sizing: border-box}
  
  .device .map-area.left{width:calc(100% - 340px)}
  .device .map-area.right{width: 340px;}



  /* ==========좌측 */
  #slideDate{float:right;width: 1028px;height: 80px;box-sizing: border-box;}
  #slideDate>div{height:100%;box-sizing: border-box;}
  .date-area{display:inline-block;width:760px;padding-top: 36px;margin: 0 auto;}
  .control-area{float:right;width: 260px;}
  .control-area>div{float:left;}
  .btn-box{height: 100%;padding-top:30px;margin-left:19px;margin-right: 30px;text-align: center;box-sizing: border-box}
  .time-box{padding-top: 37px;}
  
.device #slideDate{width: 928px;}
.device .control-area{width: 200px;}
.device .date-area{width: 728px;}

  #playBtn, #pauseBtn, #stopBtn {width: 36px;height: 36px;font-size:18px;line-height:1;vertical-align: top;text-align: center;}
#playBtn, #pauseBtn {color:rgb(92, 126, 133,1);background-color: #fff;border:1px solid rgb(92, 126, 133,0.4);border-radius: 50%;}
#playBtn:active,#pauseBtn:active,#playBtn:hover,#pauseBtn:hover{color: #fff;background-color: rgb(92, 126, 133,1)}
#playBtn{vertical-align: middle}
#pauseBtn{line-height: 20px;}


.leaflet-control-layers-scrollbar{overflow-y: hidden}  



#Chart{position: absolute;display:inline-block;right: 218px;bottom: 60px;width: 800px;height:125px;margin: 0 auto;}
.device #Chart{right: 0;left: 50%;margin-left: -400px;}

  #Chart:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;opacity: 0.5;}
  #Chart div:last-child {display: none;width: 70px;text-align: center;line-height: 18px;}
  #Chart div:last-child:after {content: "";position: absolute;bottom: -4px;left: calc(50% - 4px);width: 10px;height: 10px;transform: rotate(45deg);background-color: #103B7C;}
  

  #footer{position:absolute;bottom:0;right:0;width: 100%;height: 30px;background:#F6F7FA;line-height:30px;font-size:13px;transition: background 1s;}
  #footer .footer-area{width:100%;}
  #footer:hover{background:#fff;opacity: 1;}
  





  /* ==========우측 */
  .tit-main{position:relative;width: 100%;padding:6vh 0 5vh;border-bottom:1px solid #ddd;border-top:0;color:#21252B;background:rgba(163,174,206,0.1);text-align: center;background:url("../images/bg_asf.png") no-repeat right center;background-size:cover;color:#fff;}
  /* .tit-main:before{position:absolute;top: 0;left:0;display:inline-block;content:'';width: 100%;height: 100%;z-index: 0;
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
    background: -o-linear-gradient(left, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
    background: -moz-linear-gradient(left, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
    background: linear-gradient(to right,  rgba(0,0,0,0.1), rgba(0,0,0,0.5)); 
} */
  .tit-main span{display:block;font-size:28px;font-weight:200;color:#fff;letter-spacing:-4px;z-index: 90;}
  .tit-main strong{font-size:24px;font-weight: 500;color:#fff;letter-spacing: -1.5px;z-index: 90;}
  
  .con-area{padding:40px 30px 30px 30px;}
  .device .con-area{padding-top:8px;}
  #info_date{margin-bottom: 30px;border-bottom:1px solid #aaa;font-size:34px;color:#666;font-weight: 200;line-height: 62px;}
  .device #info_date{margin-bottom: 12px;font-size:28px;line-height: 50px;}
  .cnt-area li{margin-bottom: 40px;}
  .device .cnt-area li{margin-bottom: 17px;}
  .cnt-area .tit-cnt{font-size:20px;color:#1264A3;font-weight:600;line-height: 30px;}
  .cnt-area .tit-cnt span{margin-left: 6px;font-size:16px;line-height: 32px;font-weight: 300;opacity: 0.8;}
  .device .tit-cnt span{line-height: 27px;}
  .cnt-area .cnt-sum{display:inline-block;margin-top: 4px;font-size: 58px;color: #3a3a3a;;font-weight: 500;line-height: 1;}
  .device .cnt-area .cnt-sum{font-size:46px;}
  .cnt-area .cnt-sum:after{display:inline-block;margin-left: 6px;font-size: 24px;line-height: 1;font-weight: 500;opacity: 0.6;}
  .cnt-area .cnt-sum#cnt1:after{content:'건'}
  .cnt-area .cnt-sum#cnt2:after{content:'마리'}
  .con-area .txt-detail{position:absolute;bottom: 60px;font-size:12px;color:#444;line-height:20px;}
  .con-area .txt-detail a{display: inline;margin-left: 5px;text-decoration: underline;}
  .con-area .txt-detail a:hover{font-weight: 600}
  .last-update{position:absolute;bottom:0;right:0;width: 100%;height: 30px;background:#ccc;line-height:30px;font-size:13px;color:#000;letter-spacing: -0.5px;font-weight:500;text-align:center;box-sizing: border-box}
  
  #mapid table.d1 tbody tr:first-child td:first-child {background-color: #981151;}
  #mapid table.d2 tbody tr:first-child td:first-child {background-color: #118898;}
  
.leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 0;
  }
  
  .leaflet-popup-content {
    margin: 0;
  }
  
  /* .leaflet-popup-content table tr:first-child td {
    line-height: 2;
  } */
  
  .leaflet-popup-content table tr:nth-child(2) td {
    line-height: 1.8;
    color: #444;
  }
  
  .leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    display: block;
    right: 20px;
    top: 10px;
    width: 25px;
    height: 25px;
    color: #55447b;
    text-indent: -9999px;
  }
  
  .leaflet-container a.leaflet-popup-close-button:before,
  .leaflet-container a.leaflet-popup-close-button:after {
    content: "";
    position: absolute;
    top: -2px;
    left: 12px;
    height: 30px;
    width: 1px;
  }
  
  .leaflet-container a.leaflet-popup-close-button:before {
    border-left: 1px solid #fff;
    transform: rotate(45deg);
  }
  
  .leaflet-container a.leaflet-popup-close-button:after {
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
  }
  
  .leaflet-container a.leaflet-popup-close-button:hover:before {
    border-left-width: 3px;
  }
  
  .leaflet-container a.leaflet-popup-close-button:hover:after {
    border-right-width: 3px;
  }
  
  .leaflet-control-layers label{font-size:13px;font-family: 'notokr';font-weight: 500;color:#333;}
  .leaflet-control-layers-expanded{background:rgba(250,250,250,0.8);padding:6px 10px 8px 6px;}
  .leaflet-control-layers label span{line-height: 23px;}
  .slider-inner{background:rgb(197, 219, 236) }


  .badge {
    border-radius: 50%;
    border: 2px solid white;
    background-color: red;
    padding: 0px 0px 3px 0px;
    text-align: center;
    font-size: 11pt;
    font-weight: 900;
    color: white;
  }