main {
  width: 100svw;
  height: 100svh;
  position: absolute;
  top: 0;
  right: 0;
}

#main-point-container {
  font-size: 25px;
}

#mainUI-zoom {
  /* position: absolute; */
  /* top: 50%; */
  /* right: 50%; */
}

.point-container {
  width: 1em;
  height: 1em;
  position: absolute;
}

.point-container:hover,
.point-container.hover_effect {
  animation: blink 1s infinite;
}

.point {
  width: 100%;
  height: 100%;
  background-image: url("../static/image/Main/Point/PointDefaut.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

.point:hover,
.point.hover_effect {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.title-point {
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  transform: translate(0, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: none;
}

.title-point2 {
  position: absolute;
  top: 50%;
  right: calc(100% + 2px);
  transform: translate(0, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: none;
}

.point:hover + .title-point,
.point.hover_effect + .title-point {
  display: block !important;
}

.point:hover + .title-point2,
.point.hover_effect + .title-point2 {
  display: block !important;
}

#main-point-1-container {
  top: 75%;
  right: 30%;
}

#title-main-point-1 {
  width: calc(272em / 220);
  height: calc(151em / 220);
  background-image: url("../static/image/Main/Title/16.png");
}

#main-point-2-container {
  top: 66.3%;
  right: 49.3%;
}

#title-main-point-2 {
  width: calc(557em / 220);
  height: calc(149em / 220);
  background-image: url("../static/image/Main/Title/15.png");
}

#main-point-3-container {
  top: 69%;
  right: 55%;
}

#title-main-point-3 {
  width: calc(1174em / 220);
  height: calc(140em / 220);
  background-image: url("../static/image/Main/Title/13.png");
}

#main-point-4-container {
  top: 63%;
  right: 27%;
}

#title-main-point-4 {
  width: calc(653em / 220);
  height: calc(147em / 220);
  background-image: url("../static/image/Main/Title/8.png");
}

#main-point-5-container {
  top: 58%;
  right: 30.5%;
}

#title-main-point-5 {
  width: calc(649em / 220);
  height: calc(147em / 220);
  background-image: url("../static/image/Main/Title/7.png");
}

#main-point-6-container {
  top: 51.7%;
  right: 33.5%;
}

#title-main-point-6 {
  width: calc(676em / 220);
  height: calc(149em / 220);
  background-image: url("../static/image/Main/Title/10.png");
}

#main-point-7-container {
  top: 64%;
  right: 56%;
}

#title-main-point-7 {
  width: calc(555em / 220);
  height: calc(149em / 220);
  background-image: url("../static/image/Main/Title/14.png");
}

#main-point-8-container {
  top: 62%;
  right: 36.8%;
}

#title-main-point-8 {
  width: calc(783em / 220);
  height: calc(154em / 220);
  background-image: url("../static/image/Main/Title/6.png");
}

#main-point-9-container {
  top: 56%;
  right: 22.5%;
}

#title-main-point-9 {
  width: calc(749em / 220);
  height: calc(158em / 220);
  background-image: url("../static/image/Main/Title/11.png");
}

#main-point-10-container {
  top: 59%;
  right: 40%;
}

#title-main-point-10 {
  width: calc(676em / 220);
  height: calc(149em / 220);
  background-image: url("../static/image/Main/Title/10.png");
}

#main-point-11-container {
  top: 40%;
  right: 58.3%;
}

#title-main-point-11 {
  width: 130px;
  height: 130px;
  background-image: url("../static/image/Main/Title/5.png");
}

#main-point-12-container {
  top: 52%;
  right: 58.2%;
}

#title-main-point-12 {
  width: 130px;
  height: 130px;
  background-image: url("../static/image/Main/Title/3.png");
}

#main-point-13-container {
  top: 58%;
  right: 59.7%;
}

#title-main-point-13 {
  width: calc(1045em / 220);
  height: calc(140em / 220);
  background-image: url("../static/image/Main/Title/1.png");
}

#main-point-14-container {
  top: 55%;
  right: 63.5%;
}

#title-main-point-14 {
  width: calc(1335em / 220);
  height: calc(140em / 220);
  background-image: url("../static/image/Main/Title/4.png");
}

#main-point-15-container {
  top: 61%;
  right: 63.4%;
}

#title-main-point-15 {
  width: calc(1265em / 220);
  height: calc(140em / 220);
  background-image: url("../static/image/Main/Title/2.png");
}

#main-point-16-container {
  top: 69.5%;
  right: 58.7%;
}

#title-main-point-16 {
  width: calc(1472em / 220);
  height: calc(156em / 220);
  background-image: url("../static/image/Main/Title/9-2.png");
}

#main-point-17-container {
  top: 66.5%;
  right: 58.5%;
}

#title-main-point-17 {
  width: calc(676em / 220);
  height: calc(152em / 220);
  background-image: url("../static/image/Main/Title/12.png");
}

#main-point-18-container {
  top: 68.5%;
  right: 60.8%;
}

#title-main-point-18 {
  width: calc(1158em / 220);
  height: calc(140em / 220);
  background-image: url("../static/image/Main/Title/9-3.png");
}

#main-point-19-container {
  top: 54.7%;
  right: 22.5%;
}

#title-main-point-19 {
  width: calc(676em / 220);
  height: calc(155em / 220);
  background-image: url("../static/image/Main/Title/northBuilding.png");
}

#main-point-20-container {
  top: 51.6%;
  right: 31.6%;
}

#title-main-point-20 {
  width: calc(676em / 220);
  height: calc(152em / 220);
  background-image: url("../static/image/Main/Title/10-1.png");
}

#main-point-21-container {
  top: 57%;
  right: 19.8%;
  display: none;
}

#title-main-point-21 {
  width: calc(759em / 220);
  height: calc(140em / 220);
  background-image: url("../static/image/Main/Title/ComingSoon.png");
}

.main-gate-tower {
  width: calc(415em / 100);
  height: calc(88em / 100);
  background-image: url("../static/image/Main/TitleMain/gateTower.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: top right;
  position: absolute;
}

.main-park-tower {
  width: calc(1005em / 100);
  height: calc(109em / 100);
  background-image: url("../static/image/Main/TitleMain/parkTower.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: top right;
  position: absolute;
}

.main-umekita-park {
  width: calc(415em / 100);
  height: calc(88em / 100);
  background-image: url("../static/image/Main/TitleMain/umekitaPark.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: top right;
  position: absolute;
}

.main-north-tower {
  width: calc(415em / 100);
  height: calc(88em / 100);
  background-image: url("../static/image/Main/TitleMain/northTower.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: top right;
  position: absolute;
}

#main-gate-tower-1 {
  top: 57.9%;
  right: 65.1%;
}

#main-park-tower-1 {
  top: 41.1%;
  right: 60.3%;
}

#main-umekita-park-1 {
  top: 56.5%;
  right: 38.8%;
}

#main-north-tower-1 {
  top: 45.5%;
  right: 16.5%;
}

@media (max-width: 768px) {
  #main-point-container {
    font-size: 15px;
  }
  #title-main-point-11 {
    width: 92px;
    height: 92px;
  }
  #title-main-point-12 {
    width: 92px;
    height: 92px;
  }
}

@media (min-width: 769px) and (max-width: 1220px) {
  #main-point-container {
    font-size: 15px;
  }
  #title-main-point-11 {
    width: 92px;
    height: 92px;
  }
  #title-main-point-12 {
    width: 92px;
    height: 92px;
  }
}

@media (min-width: 1201px) and (max-width: 1366px) {
  #main-point-container {
    font-size: 18px;
  }
  #title-main-point-11 {
    width: 92px;
    height: 92px;
  }
  #title-main-point-12 {
    width: 92px;
    height: 92px;
  }
}

@media (max-width: 991px) and (max-height: 568px) {
  #title-main-point-11 {
    width: 65px;
    height: 65px;
  }
  #title-main-point-12 {
    width: 65px;
    height: 65px;
  }
  #main-point-container {
    font-size: 11px;
  }

  .main-gate-tower {
    width: calc(415em / 70);
    height: calc(88em / 70);
  }

  .main-park-tower {
    width: calc(787em / 70);
    height: calc(88em / 70);
  }

  .main-umekita-park {
    width: calc(415em / 70);
    height: calc(88em / 70);
  }

  .main-north-tower {
    width: calc(415em / 70);
    height: calc(88em / 70);
  }

  #main-point-1-container {
    top: 73%;
    right: 30%;
  }

  #main-umekita-park-1 {
    top: 52.5%;
    right: 37%;
  }

  #main-gate-tower-1 {
    top: 57.9%;
    right: 66.1%;
  }
}