.cm-map {
  position: relative;
  overflow: hidden;
  margin: 0 5vw 10vh;
  border: 2.5vw solid #fff2;
  border-radius: 0.25rem;
  box-shadow: 0 0 8em #fff2;
}
@media screen and (max-width: 960px) {
  .cm-map {
    display: none;
  }
}
.cm-map::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 10vw 1vw #0003;
}
.cm-map h5 {
  position: absolute;
  color: rgba(0, 0, 255, 0.9);
  border: none;
  transform: translateX(-50%) translateY(-2rem);
}
.cm-map .h5, .cm-map h5 {
  text-shadow: 2px 2px 0 #fffa, -2px 2px 0 #fffa, 2px -2px 0 #fffa, -2px -2px 0 #fffa;
}
.cm-map > .marker {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top: 10%;
  left: 10%;
  transform: translateX(-50%);
  z-index: 20;
}
.cm-map > .marker > .marker-point {
  transition: opacity 0.25s;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  outline: 0.2em solid rgba(255, 0, 0, 0.4);
  background-color: rgba(255, 0, 0, 0.9);
}
.cm-map > .marker > figure {
  background-color: rgba(0, 0, 255, 0.9);
  position: relative;
  transform: translateY(1.5rem);
}
.cm-map > .marker > figure::before {
  transition: opacity 0.25s;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateY(-100%) translateX(50%);
  border-bottom: 1rem solid rgba(0, 0, 255, 0.9);
  border-left: 1rem solid transparent;
  border-top: 0 transparent;
  border-right: 1rem solid transparent;
  bottom: -1rem;
}
.cm-map aside {
  position: absolute;
  z-index: 20;
  bottom: 0;
  right: 0;
  padding: 0.2em 0.5em;
  background-color: rgba(0, 0, 255, 0.9);
  border-top-left-radius: 0.5em;
  font-size: 70%;
  opacity: 0.5;
}
.cm-map figure {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 10;
  margin: 0;
  width: min-content;
  transform: translateY(-50%) translateX(1rem);
  padding: 1em 1.5em;
  border-radius: 0.5em;
  background-color: rgba(30, 30, 30, 0.9);
  box-shadow: 0 0 2rem #fff8;
  text-align: center;
  color: #fff;
  line-height: 1.5;
}
.cm-map figure:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -0.95rem;
  transform: translateY(-50%);
  border-right: 1rem solid rgba(30, 30, 30, 0.9);
  border-top: 1rem solid transparent;
  border-left: 0 transparent;
  border-bottom: 1rem solid transparent;
}
.cm-map figure::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -1em;
  right: -1em;
  bottom: -1em;
  left: -1em;
}
.cm-map figure .cm-map-logo {
  margin: 0.5rem;
  height: 3rem;
  padding-right: 1.5em;
}
.cm-map figure .btn {
  display: block;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}
.cm-map figure .btn:last-of-type {
  margin-bottom: 0;
  display: none;
}
.cm-map figure.location-1 {
  top: 36%;
  left: 35%;
}
.cm-map figure.location-1:hover ~ picture:nth-of-type(2) {
  opacity: 1;
  animation: 2s ease forwards map-in;
}
.cm-map figure.location-1 > div:nth-child(1) {
  min-width: 8vw;
}
.cm-map figure.location-2 {
  top: 77%;
  left: 65%;
}
.cm-map figure.location-2 > div:nth-child(1) {
  min-width: 8vw;
}
.cm-map figure.location-2:hover ~ picture:nth-of-type(3) {
  opacity: 1;
  animation: 2s ease forwards map-in;
}
.cm-map picture {
  overflow: hidden;
  width: 100%;
  transition: all 0.5s ease;
  animation-duration: 0.5s;
}
.cm-map picture img {
  width: 100%;
  border-radius: 0.25rem;
}
.cm-map picture.active {
  opacity: 1;
  animation: 2s ease forwards map-in;
}
.cm-map picture ~ picture {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.cm-map picture:nth-of-type(1) {
  z-index: 1;
}
.cm-map picture:nth-of-type(1) img {
  filter: saturate(5%) contrast(50%) brightness(110%);
}
.cm-map picture:nth-of-type(2) {
  z-index: 2;
  filter: saturate(10%) contrast(75%);
}
.cm-map picture:nth-of-type(3) {
  z-index: 3;
}
.cm-map picture:nth-of-type(3) img {
  filter: saturate(5%) contrast(50%) brightness(110%);
}
.cm-map picture:nth-of-type(4) {
  z-index: 4;
}
.cm-map:hover .marker:hover > figure {
  z-index: 19;
}
.cm-map:hover .marker:hover > figure::before {
  opacity: 0;
}
.cm-map:hover .marker:hover > .marker-point {
  opacity: 0;
}
.cm-map:hover .marker:not(:hover) {
  animation: 2s ease forwards z-in;
}
.cm-map:hover .marker:hover + picture {
  pointer-events: none;
  z-index: 18;
  opacity: 1;
  animation: 2s ease forwards map-in;
}
@keyframes map-in {
  0% {
    clip-path: circle(0%);
  }
  100% {
    clip-path: circle(100%);
  }
}
@keyframes z-in {
  0% {
    z-index: 19;
  }
  100% {
    z-index: 10;
  }
}