div.bgmap{
  position: relative;
  margin: 0 auto;
  padding: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(/assets/img/44_map.png);
}
div.bgmap img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  z-index: 0;
}
div.bgmap img#rdr_img1,
div.bgmap img#rdr_img2{
  z-index: 0;
}
div.bgmap img#rdr_mapline1,
div.bgmap img#rdr_mapline2{
  z-index: 1;
}
div.bgmap img#rdr_legend1,
div.bgmap img#rdr_legend2{
  z-index: 2;
}

div.radar_target_time{
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  font-size: 1.5rem;
  padding: 5px 10px;
}

.customrange{
  appearance: none;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  border: 1px solid #333333;
  border-radius: 9999px;
  background: linear-gradient(90deg, #377494 50%, #dddddd 50%);
  cursor: pointer;
}
.customrange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border: 2px solid #333333;
  border-radius: 9999px;
  background: #06b6d4;
  box-shadow: none;
}
.customrange::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border: 2px solid #333333;
  border-radius: 9999px;
  background: #06b6d4;
  box-shadow: none;
}

datalist#tlist1,
datalist#tlist2{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  writing-mode: horizontal-tb;
  width: 100%;
  font-size: 0.675rem;
}

datalist#tlist1 option,
datalist#tlist2 option{
  padding: 0;
}

/* media queries*/
@media (width < 720px) {
  div.bgmap{
    width: 332px;
    height: 245px;
  }
  datalist#tlist1,
  datalist#tlist2{
    font-size: 0.5rem;
  }
}
@media (720px <= width) {
  div.bgmap{
    width: 664px;
    height: 490px;
  }
}