body {background: transparent;}
.gmap_wrap {width: 100%;}

#gmap {
width: 100%;
height: 640px;
}
#gmap div .name,
#gmap div .time {
    color:#000;
    display: block;
}
@media screen and (max-width: 920px) {
#gmap {
height: 520px;
}
}
@media screen and (max-width: 639px) {
#gmap {
height: 360px;
}
}
@media screen and (max-width: 479px) {
#gmap {
height: 256px;
}
}


.gm-ui-hover-effect {outline: none;}

#marker_list {
width: 100%;
height: 400px;
padding-top: 10px;
overflow-y: scroll;
}


@media screen and (max-width: 920px) {
#marker_list {height: 300px;}
}
@media screen and (max-width: 639px) {
    #marker_list {height: 220px;}
}
@media screen and (max-width: 479px) {
    #marker_list {height: 160px;}
}


.marker_list li {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}
.marker_list li:last-child {display: none;}
.marker_list li::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: radial-gradient(circle farthest-side, #fff, #fff 50%, transparent 50%, transparent);
  background-size: 6px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}
@media screen and (max-width: 920px) {
  .marker_list li::before {
    display: none;
  }
}
.marker_list li:not(:last-child) {
  margin-bottom: 0.35em;
}
@media screen and (max-width: 450px) {
  .marker_list li:not(:last-child) {
    margin-bottom: 0.15em;
  }
}
.marker_list li > * {
  display: inline-block;
  padding: 0 5px;
  background-color: #133157;
  color: #fff;
  font-size: 16px;
}
@media screen and (max-width: 920px) {
  .marker_list li > * {
    font-size: 1.75vw;
  }
}
@media screen and (max-width: 450px) {
  .marker_list li > * {
    font-size: 3vw;
  }
}
@media screen and (max-width: 920px) {
  .marker_list li .name {
    width: 60%;
  }
}
@media screen and (max-width: 920px) {
  .marker_list li .time {
    width: 40%;
    text-align: right;
  }
}


/*body:not(.mobile) .marker_list li:hover {background: #e8ebf5;}*/