@import url('fonts.css');
@import url('style.css');

body {
    font-family: 'IBM-Plex-Sans','Helvetica Neue','Arial','sans-serif' !important;
    /*overflow-x: hidden;*/
  }

*,
*:before,
*:after {
  box-sizing: border-box;
}

.hero {
    background-image: url(../img/home_image.png);
    position: absolute;
    overflow: hidden;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    margin: 0 auto;
    background-size: contain;
    display: block;
    bottom: 0px;
}
@media only screen and (max-width: 1670px) {
    .hero {
    background-repeat: no-repeat;
    }
}
@media screen and (min-width: 1360px) {
    .hero {
        bottom: calc(0vh - 95px);
    }
    .hero {
        background-repeat: repeat;
        }
}
.hero .point {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 0;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}
.hero .point:hover {
  z-index: 1;
  -webkit-transition: none;
  transition: none;
}
.hero .point.pulsing .dot:before,
 .hero .point.pulsing .dot:after,
 .distribution-map .map-point.pulsing .dot:before,
 .distribution-map .map-point.pulsing .dot:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  -webkit-animation: 2s pulse linear;
          animation: 2s pulse linear;
}
@media only screen and (max-width: 768px) {
.mac-os .hero .point.pulsing .dot:before,
.mac-os .hero .point.pulsing .dot:after,
.mac-os .distribution-map .map-point.pulsing .dot:before,
.mac-os .distribution-map .map-point.pulsing .dot:after {
 content: '';
 position: absolute;
 top: 50%;
 left: 30%;
 -webkit-transform: translate(-50%, -50%) scale(1);
         transform: translate(-50%, -50%) scale(1);
 width: 50px;
 height: 50px;
 border: 2px solid rgba(255, 255, 255, 0.5);
 border-radius: 50%;
 -webkit-animation: 2s pulse linear;
         animation: 2s pulse linear;
}
}
.hero .point.pulsing .dot:after,
.distribution-map .map-point.pulsing .dot:after {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.hero .dot {
  position: relative;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hero .dot .plus:before, .hero .dot .plus:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 10px;
  height: 1px;
  background-color: white;
  border-radius: 5px;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hero .dot .plus:after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
}
.hero .dot:hover {
  background-color: white;
}
.hero .dot:hover .plus:before, .hero .dot:hover .plus:after {
  background-color: #0072CE;
}
.hero .dot:hover + .content {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  -webkit-transition: none;
  transition: none;
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.hero .dot:hover + .content > div {
  background-color: white;
  -webkit-transition: 0s;
  transition: 0s;
}
.hero .dot:hover + .content > div, .hero .dot:hover + .content:after {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.hero .dot:hover + .content:after {
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.hero .dot:hover + .content:before {
  -webkit-animation: 0.5s swipe-right ease-in-out;
          animation: 0.5s swipe-right ease-in-out;
}
.hero .dot:hover + .content.left:before {
  -webkit-animation: 0.5s swipe-left ease-in-out;
          animation: 0.5s swipe-left ease-in-out;
}
.hero .dot:hover:after {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.hero .content {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 70px;
  width: 400px;
  -webkit-transform: translate(10px, -50%);
          transform: translate(10px, -50%);
  opacity: 0;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.hero .content > div {
  padding: 2rem 1.5rem;
  background-color: transparent;
}
.hero .content > div, .hero .content:after {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s ease-in-out 0.3s;
  transition: 0.3s ease-in-out 0.3s;
}
.hero .content:before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  left: 0;
  background-color: #dddddd;
  background-color: #0072CE;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  z-index: 5;
}
.hero .content:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 0;
  border: 10px solid white;
  border-color: transparent white transparent transparent;
  -webkit-transform: translate(100%, -50%);
          transform: translate(100%, -50%);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.hero .content.left {
  left: auto;
  right: 70px;
  -webkit-transform: translate(-10px, -50%);
          transform: translate(-10px, -50%);
}
.hero .content.left:before {
  right: 0;
  left: 100%;
}
.hero .content.left:after {
  right: auto;
  left: 100%;
  border-color: transparent transparent transparent white;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}
.hero .content .heading {
  font-weight: bold;
  font-size: 1.5rem;
}
.hero .content .description {
  margin: 0;
}

.points .point:nth-of-type(1) {
  top: 30%;
  left: 42%;
}
.points .point:nth-of-type(2) {
  top: 58%;
  left: 20%;
}
.points .point:nth-of-type(3) {
  top: 20%;
  left: 45%;
}
.points .point:nth-of-type(4) {
  top: 80%;
  left: 67%;
}

@-webkit-keyframes pulse {
  to {
    -webkit-transform: translate(-50%, -50%) scale(4);
            transform: translate(-50%, -50%) scale(4);
    border: 1px solid rgba(255, 255, 255, 0);
  }
}

@keyframes pulse {
  to {
    -webkit-transform: translate(-50%, -50%) scale(4);
            transform: translate(-50%, -50%) scale(4);
    border: 1px solid rgba(255, 255, 255, 0);
  }
}
@-webkit-keyframes swipe-right {
  0% {
    right: 100%;
  }
  40% {
    left: 0;
  }
  50% {
    right: 0;
  }
  100% {
    right: 0;
    left: 100%;
  }
}
@keyframes swipe-right {
  0% {
    right: 100%;
  }
  40% {
    left: 0;
  }
  50% {
    right: 0;
  }
  100% {
    right: 0;
    left: 100%;
  }
}
@-webkit-keyframes swipe-left {
  0% {
    left: 100%;
  }
  40% {
    right: 0;
  }
  50% {
    left: 0;
  }
  100% {
    left: 0;
    right: 100%;
  }
}
@keyframes swipe-left {
  0% {
    left: 100%;
  }
  40% {
    right: 0;
  }
  50% {
    left: 0;
  }
  100% {
    left: 0;
    right: 100%;
  }
}


.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .centered-y {
    position: absolute;
    width: 400px;
    top: 50%;
    padding: 10px;
    text-align: left;
    display: block;
    color:var(--white-color);
  }
  .centered-y h5{
      font-weight: bold;
  }
  
  .distribution-map {
    position: absolute;
    width: 100%;
    padding: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    background-size: contain;
    display: block;
    top: -80px;
  }
  .mac-os .distribution-map{
    top: 0px;
  }

  .distribution-map > img {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
  }
  .distribution-map .map-point {
    cursor: pointer;
    outline: none;
    z-index: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -moz-transition: opacity 0.25s ease-in-out 0.25s,
      width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s,
      z-index 0.25s ease-in-out 0.25s;
    -o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s,
      height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out,
      height 0.25s ease-in-out, z-index 0.25s ease-in-out;
    -webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
    -webkit-transition: opacity 0.25s ease-in-out 0.25s,
      width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s,
      z-index 0.25s ease-in-out 0.25s;
    transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s,
      height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
      background: rgba(26, 26, 26, 0.85);
    border: 2px solid #7fcff7;
  }
  .distribution-map .map-point .content {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
    width: 100%;
    height: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    overflow: overlay;
  }

  .distribution-map .map-point:hover + .right-note-box{
    opacity: 0.2;
    }
    .opClass{
        opacity: 0.1;
    }
  /*.distribution-map .map-point:hover,
  .distribution-map .map-point:hover {
    margin: 0;
    padding: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    width: 300px;
    height: 220px;
    color: #e5e5e5;
    z-index: 1;
    -webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out,
      height 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out,
      height 0.25s ease-in-out;
  }
  .distribution-map .map-point:hover .content,
  .distribution-map .map-point:hover .content {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    -moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out,
      overflow 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out,
      overflow 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out,
      overflow 0.25s ease-in-out;
    -webkit-transition-delay: 0.25s, 0s, 0s;
    -webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out,
      overflow 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out,
      overflow 0.25s ease-in-out;
    overflow: hidden;
  }
  
  .distribution-map .map-point:hover .content a:hover {
    color: #afe1fa;
  }*/
  @media screen and (max-width: 991px) and (min-width: 768px) {
    .distribution-map {
        top: 0px;
    }
    video {
        margin-top: 0px;
    }
  }
  @media only screen and (max-width: 768px) {
    .distribution-map{
        top: 0px;
    }
  }
  
  
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  

  .map-point .content .ping {
    transform: translateY(-4px);
  }
  .map-point .content .ping:before {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    height: .75px;
    width: 100%;
    background: black;
}

.map-point-1 .map-point .content-info,
.map-point-2 .map-point .content-info,
.map-point-3 .map-point .content-info,
.map-point-4 .map-point .content-info,
.map-point-5 .map-point .content-info,
.map-point-6 .map-point .content-info,
.map-point-7 .map-point .content-info{
    display: none;
}

.map-point-1 .map-point:hover .content-info,
.map-point-2 .map-point:hover .content-info,
.map-point-3 .map-point:hover .content-info,
.map-point-4 .map-point:hover .content-info,
.map-point-5 .map-point:hover .content-info,
.map-point-6 .map-point:hover .content-info,
.map-point-7 .map-point:hover .content-info{
    display: block;
    position: absolute;
    top: 50%;
}
.map-point-1 .map-point{
    top:30%;
    left:46%
}
.map-point-2 .map-point{
    top: 32.2%;
    left: 37.9%;
}
.map-point-3 .map-point{
    top:34.5%;
    left:30%  
}
.map-point-4 .map-point{
    top:56%;
    left:25%  
}
.map-point-5 .map-point{
    top:64.3%;
    left:45%  
}
.map-point-6 .map-point{
    top: 87.8%;
    left: 43.8%;
}
.map-point-7 .map-point{
    top: 97%;
    left: 36%;
}
.map-point:hover .content-info .centered-y{
    animation: fadeInAnimation ease 2s;

}
.map-point:hover .line-1,
.map-point:hover .line-2,
.map-point:hover .line-3,
.map-point:hover .line-4,
.map-point:hover .line-5,
.map-point:hover .line-6,
.map-point:hover .line-7{
    animation: fadeInAnimation ease 1s; 
}
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
    } 
}

.map-point-1 .map-point:hover .line-1,
.map-point-1 .map-point:hover .line-2,
.map-point-1 .map-point:hover .line-3,
.map-point-1 .map-point:hover .line-4,
.map-point-1 .map-point:hover .line-5,
.map-point-1 .map-point:hover .line-6,
.map-point-1 .map-point:hover .line-7,
.map-point-2 .map-point:hover .line-1,
.map-point-2 .map-point:hover .line-2,
.map-point-2 .map-point:hover .line-3,
.map-point-2 .map-point:hover .line-4,
.map-point-2 .map-point:hover .line-5,
.map-point-2 .map-point:hover .line-6,
.map-point-2 .map-point:hover .line-7,
.map-point-3 .map-point:hover .line-1,
.map-point-3 .map-point:hover .line-2,
.map-point-3 .map-point:hover .line-3,
.map-point-3 .map-point:hover .line-4,
.map-point-3 .map-point:hover .line-5,
.map-point-3 .map-point:hover .line-6,
.map-point-3 .map-point:hover .line-7,
.map-point-4 .map-point:hover .line-1,
.map-point-4 .map-point:hover .line-2,
.map-point-4 .map-point:hover .line-3,
.map-point-4 .map-point:hover .line-4,
.map-point-4 .map-point:hover .line-5,
.map-point-4 .map-point:hover .line-6,
.map-point-4 .map-point:hover .line-7,
.map-point-5 .map-point:hover .line-1,
.map-point-5 .map-point:hover .line-2,
.map-point-5 .map-point:hover .line-3,
.map-point-5 .map-point:hover .line-4,
.map-point-5 .map-point:hover .line-5,
.map-point-5 .map-point:hover .line-6,
.map-point-5 .map-point:hover .line-7,
.map-point-6 .map-point:hover .line-1,
.map-point-6 .map-point:hover .line-2,
.map-point-6 .map-point:hover .line-3,
.map-point-6 .map-point:hover .line-4,
.map-point-6 .map-point:hover .line-5,
.map-point-6 .map-point:hover .line-6,
.map-point-6 .map-point:hover .line-7,
.map-point-7 .map-point:hover .line-1,
.map-point-7 .map-point:hover .line-2,
.map-point-7 .map-point:hover .line-3,
.map-point-7 .map-point:hover .line-4,
.map-point-7 .map-point:hover .line-5,
.map-point-7 .map-point:hover .line-6,
.map-point-7 .map-point:hover .line-7{
    background-color: #fff;
    display: block;
    position: absolute;
}

@media screen and (min-width: 1366px) {
    .map-point-1 .map-point:hover .line-1{
        width: 200px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
       .map-point-2 .map-point:hover .line-1{
        width: 417px;
        height: 1px;
        left: 24px;
        top: 8px;
    }
        .map-point-3 .map-point:hover .line-1{
        width: 516px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
       .map-point-4 .map-point:hover .line-1{
        width: 603px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-5 .map-point:hover .line-1{
        width: 234px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-6 .map-point:hover .line-1{
        width: 334px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-7 .map-point:hover .line-1{
        width: 333px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-1 .map-point:hover .line-2{
        width: 1px;
        height: 50px;
        left: 221px;
    }
    .map-point-2 .map-point:hover .line-2{
        width: 1px;
        height: 78px;
        left: 440px;
        top: 8px;
    }
    .map-point-3 .map-point:hover .line-2{
        width: 1px;
        height: 73px;
        left: 538px;
        top: 8px;
    }

    .map-point-4 .map-point:hover .line-2{
        width: 1px;
        height: 40px;
        left: 625px;
        top: -31px;
    }

    .map-point-5 .map-point:hover .line-2{
        width: 1px;
        height: 91px;
        left: 255px;
        top: -82px;
    }

    .map-point-6 .map-point:hover .line-2{
        width: 1px;
        height: 200px;
        left: 355px;
        top: -191px;
    }

    .map-point-7 .map-point:hover .line-2{
        width: 1px;
        height: 200px;
        left: 355px;
        top: -191px;
    }
    .map-point-1 .map-point:hover .line-3{
        width: 50px;
        height: 1px;
        left: 221px;
        top: 180px;
    }
    .map-point-2 .map-point:hover .line-3{
        width: 5px;
        height: 1px;
        left: 440px;
        top: 142px;
    }
    .map-point-3 .map-point:hover .line-3{
        width: 5px;
        height: 1px;
        left: 548px;
        top: 130px;
    }
    .map-point-4 .map-point:hover .line-3{
        width: 5px;
        height: 1px;
        left: 626px;
        top: -102px;
    }
    .map-point-5 .map-point:hover .line-3{
        width: 23px;
        height: 1px;
        left: 256px;
        top: -192px;
    }
    .map-point-6 .map-point:hover .line-3{
        width: 1px;
        height: 194px;
        left: 355px;
        top: -384px;
    }
    .map-point-7 .map-point:hover .line-3{
        width: 1px;
        height: 194px;
        left: 355px;
        top: -384px;
    }
    .map-point-1 .map-point:hover .line-4{
        width: 1px;
        height: 123px;
        left: 221px;
        top: 58px;
    }
    .map-point-2 .map-point:hover .line-4{
        width: 1px;
        height: 56px;
        left: 440px;
        top: 86px;
    }
    .map-point-3 .map-point:hover .line-4{
        width: 1px;
        height: 50px;
        left: 538px;
        top: 81px;
    }
    .map-point-4 .map-point:hover .line-4{
        width: 1px;
        height: 71px;
        left: 625px;
        top: -102px;
    }
    .map-point-5 .map-point:hover .line-4{
        width: 1px;
        height: 110px;
        left: 255px;
        top: -192px;
    }
    .map-point-6 .map-point:hover .line-4{
        width: 36px;
        height: 1px;
        left: 355px;
        top: -384px;
    }
    .map-point-7 .map-point:hover .line-4{
        width: 36px;
        height: 1px;
        left: 355px;
        top: -384px;
    }
    .map-point-1 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 271px;
        top: 180px;
    }
    .map-point-2 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 440px;
        top: 142px;
    }
    .map-point-3 .map-point:hover .line-5{
        width: 36px;
        height: 1px;
        left: 538px;
        top: 130px;
    }
    .map-point-4 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 625px;
        top: -102px;
    }
    .map-point-5 .map-point:hover .line-5{
        width: 68px;
        height: 1px;
        left: 279px;
        top: -192px;
    }
    .map-point-6 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 391px;
        top: -384px;
    }
    .map-point-7 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 391px;
        top: -384px;
    }
    .map-point-1 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 306px;
        top: 145px;
    }
    .map-point-2 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 475px;
        top: 110px;
    }
    .map-point-3 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 573px;
        top: 97px;
    }
    .map-point-4 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 661px;
        top: -135px;
    }
    .map-point-5 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 347px;
        top: -223px;
    }
    .map-point-6 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 426px;
        top: -412px;
    }
    .map-point-7 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 426px;
        top: -412px;
    }
    .map-point-1 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 306px;
        top: 144px;
    }
    .map-point-2 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 475px;
        top: 110px;
    }
    .map-point-3 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 573px;
        top: 96px;
    }
    .map-point-4 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 661px;
        top: -136px;
    }
    .map-point-5 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 347px;
        top: -224px;
    }
    .map-point-6 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 426px;
        top: -413px;
    }
    .map-point-7 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 426px;
        top: -413px;
    }
    .map-point-1 .map-point:hover .content-info {
        left: 310px;
        top: 145px;
    }
    .map-point-2 .map-point:hover .content-info {
        left: 480px;
        top: 107px;
    }
    .map-point-3 .map-point:hover .content-info {
        left: 575px;
        top: 97px;
    }
    .map-point-4 .map-point:hover .content-info {
        left: 666px;
        top: -135px;
    }
    .map-point-5 .map-point:hover .content-info {
        left: 350px;
        top: -223px;
    }
    .map-point-6 .map-point:hover .content-info {
        left: 430px;
        top: -415px;
    }
    .map-point-7 .map-point:hover .content-info {
        left: 430px;
        top: -415px;
    }
}
@media screen and (max-width: 1367px) and (min-width: 1266px) {

    .map-point-1 .map-point:hover .line-1{
        width: 160px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
       .map-point-2 .map-point:hover .line-1{
        width: 260px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
       .map-point-3 .map-point:hover .line-1{
        width: 344px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
       .map-point-4 .map-point:hover .line-1{
        width: 415px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-5 .map-point:hover .line-1{
        width: 160px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-6 .map-point:hover .line-1{
        width: 240px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-7 .map-point:hover .line-1{
        width: 263px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-1 .map-point:hover .line-2{
        width: 1px;
        height: 87px;
        left: 182px;
        top: 8px;
    }
    .map-point-2 .map-point:hover .line-2{
        width: 1px;
        height: 50px;
        left: 281px;
        top: 8px;
    }

    .map-point-3 .map-point:hover .line-2{
        width: 1px;
        height: 50px;
        left: 365px;
        top: 8px;
    }
    .map-point-4 .map-point:hover .line-2{
        width: 1px;
        height: 23px;
        left: 437px;
        top: -14px;
    }

    .map-point-5 .map-point:hover .line-2{
        width: 1px;
        height: 37px;
        left: 181px;
        top: -29px;
    }

    .map-point-6 .map-point:hover .line-2{
        width: 1px;
        height: 201px;
        left: 262px;
        top: -192px;
    }
    .map-point-7 .map-point:hover .line-2{
        width: 1px;
        height: 251px;
        left: 285px;
        top: -242px;
    }
    .map-point-1 .map-point:hover .line-3{
        width: 53px;
        height: 1px;
        left: 183px;
        top: 156px;
    }
    .map-point-2 .map-point:hover .line-3{
        width: 74px;
        height: 1px;
        left: 282px;
        top: 123px;
    }
    .map-point-3 .map-point:hover .line-3{
        width: 75px;
        height: 1px;
        left: 365px;
        top: 120px;
    }
    .map-point-4 .map-point:hover .line-3{
        width: 68px;
        height: 1px;
        left: 438px;
        top: -29px;
    }
    .map-point-5 .map-point:hover .line-3{
        width: 71px;
        height: 1px;
        left: 182px;
        top: -91px;
    }
    .map-point-6 .map-point:hover .line-3{
        width: 25px;
        height: 1px;
        left: 262px;
        top: -250px;
    }
    .map-point-7 .map-point:hover .line-3{
        width: 60px;
        height: 1px;
        left: 285px;
        top: -305px;
    }
    .map-point-1 .map-point:hover .line-4{
        width: 1px;
        height: 62px;
        left: 182px;
        top: 95px;
    }
    .map-point-2 .map-point:hover .line-4{
        width: 1px;
        height: 66px;
        left: 281px;
        top: 58px;
    }
    .map-point-3 .map-point:hover .line-4{
        width: 1px;
        height: 62px;
        left: 365px;
        top: 58px;
    }
    .map-point-4 .map-point:hover .line-4{
        width: 1px;
        height: 15px;
        left: 437px;
        top: -29px;
    }
    .map-point-5 .map-point:hover .line-4{
        width: 1px;
        height: 62px;
        left: 181px;
        top: -91px;
    }
    .map-point-6 .map-point:hover .line-4{
        width: 1px;
        height: 58px;
        left: 262px;
        top: -250px;
    }
    .map-point-7 .map-point:hover .line-4{
        width: 1px;
        height: 62px;
        left: 285px;
        top: -304px;
    }
    .map-point-1 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 236px;
        top: 156px;
    }
    .map-point-2 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 356px;
        top: 123px;
    }
    .map-point-3 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 440px;
        top: 120px;
    }
    .map-point-4 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 506px;
        top: -29px;
    }
    .map-point-5 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 253px;
        top: -91px;
    }
    .map-point-6 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 285px;
        top: -250px;
    }
    .map-point-7 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 345px;
        top: -305px;
    }
    .map-point-1 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 270px;
        top: 124px;
    }
    .map-point-2 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 391px;
        top: 90px;
    }
    .map-point-3 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 475px;
        top: 92px;
    }
    .map-point-4 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 540px;
        top: -59px;
    }
    .map-point-5 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 288px;
        top: -121px;
    }
    .map-point-6 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 320px;
        top: -280px;
    }
    .map-point-7 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 380px;
        top: -336px;
    }
    .map-point-1 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 270px;
        top: 123px;
    }
    .map-point-2 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 392px;
        top: 90px;
    }
    .map-point-3 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 475px;
        top: 91px;
    }
    .map-point-4 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 541px;
        top: -59px;
    }
    .map-point-5 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 289px;
        top: -121px;
    }
    .map-point-6 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 321px;
        top: -280px;
    }
    .map-point-7 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 380px;
        top: -337px;
    }
    .map-point-1 .map-point:hover .content-info {
        left: 275px;
        top: 120px;
    }
    .map-point-2 .map-point:hover .content-info {
        left: 395px;
        top: 88px;
    }
    .map-point-3 .map-point:hover .content-info {
        left: 475px;
        top: 90px;
    }
    .map-point-4 .map-point:hover .content-info {
        left: 540px;
        top: -61px;
    }
    .map-point-5 .map-point:hover .content-info {
        left: 288px;
        top: -120px;
    }
    .map-point-6 .map-point:hover .content-info {
        left: 320px;
        top: -280px;
    }
    .map-point-7 .map-point:hover .content-info {
        left: 382px;
        top: -335px;
    }

}
@media screen and (max-width: 1266px) and (min-width: 991px) {

    .map-point-1 .map-point:hover .line-1{
        width: 105px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
        .map-point-2 .map-point:hover .line-1{
        width: 171px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
       .map-point-3 .map-point:hover .line-1{
        width: 259px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
       .map-point-4 .map-point:hover .line-1{
        width: 306px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-5 .map-point:hover .line-1{
        width: 115px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-6 .map-point:hover .line-1{
        width: 179px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-7 .map-point:hover .line-1{
        width: 186px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-1 .map-point:hover .line-2{
        width: 1px;
        height: 37px;
        left: 127px;
        top: 8px;
    }
    .map-point-2 .map-point:hover .line-2{
        width: 1px;
        height: 47px;
        left: 192px;
        top: 8px;
    }
    .map-point-3 .map-point:hover .line-2{
        width: 1px;
        height: 37px;
        left: 280px;
        top: 8px;
    }
    .map-point-4 .map-point:hover .line-2{
        width: 1px;
        height: 6px;
        left: 327px;
        top: 3px;
    }
    .map-point-5 .map-point:hover .line-2{
        width: 1px;
        height: 46px;
        left: 136px;
        top: -37px;
    }
    .map-point-6 .map-point:hover .line-2{
        width: 1px;
        height: 172px;
        left: 200px;
        top: -164px;
    }
    .map-point-7 .map-point:hover .line-2{
        width: 1px;
        height: 211px;
        left: 208px;
        top: -202px;
    }
    .map-point-1 .map-point:hover .line-3{
        width: 3px;
        height: 1px;
        left: 127px;
        top: 95px;
    }
    .map-point-2 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 192px;
        top: 75px;
    }
    .map-point-3 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 280px;
        top: 73px;
    }
    .map-point-4 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 328px;
        top: -47px;
    }
    .map-point-5 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 136px;
        top: -87px;
    }
    .map-point-6 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 200px;
        top: -215px;
    }
    .map-point-7 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 209px;
        top: -252px;
    }
    .map-point-1 .map-point:hover .line-4{
        width: 1px;
        height: 50px;
        left: 127px;
        top: 45px;
    }
    .map-point-2 .map-point:hover .line-4{
        width: 1px;
        height: 20px;
        left: 192px;
        top: 55px;
    }
    .map-point-3 .map-point:hover .line-4{
        width: 1px;
        height: 30px;
        left: 280px;
        top: 44px;
    }
    .map-point-4 .map-point:hover .line-4{
        width: 1px;
        height: 50px;
        left: 327px;
        top: -47px;
    }
    .map-point-5 .map-point:hover .line-4{
        width: 1px;
        height: 50px;
        left: 136px;
        top: -87px;
    }
    .map-point-6 .map-point:hover .line-4{
        width: 1px;
        height: 50px;
        left: 200px;
        top: -214px;
    }
    .map-point-7 .map-point:hover .line-4{
        width: 1px;
        height: 50px;
        left: 208px;
        top: -252px;
    }
    .map-point-1 .map-point:hover .line-5{
        width: 3px;
        height: 1px;
        left: 130px;
        top: 95px;
    }
    .map-point-2 .map-point:hover .line-5{
        width: 35px;
        height: 1px;
        left: 194px;
        top: 75px;
    }
    .map-point-3 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 281px;
        top: 73px;
    }
    .map-point-4 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 330px;
        top: -47px;
    }
    .map-point-5 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 138px;
        top: -87px;
    }
    .map-point-6 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 202px;
        top: -215px;
    }
    .map-point-7 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 211px;
        top: -252px;
    }
    .map-point-1 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 133px;
        top: 72px;
    }
    .map-point-2 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 229px;
        top: 45px;
    }
    .map-point-3 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 291px;
        top: 40px;
    }
    .map-point-4 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 339px;
        top: -77px;
    }
    .map-point-5 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 147px;
        top: -118px;
    }
    .map-point-6 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 211px;
        top: -245px;
    }
    .map-point-7 .map-point:hover .line-6{
        width: 1px;
        height: 60px;
        left: 220px;
        top: -285px;
    }
    .map-point-1 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 133px;
        top: 71px;
    }
    .map-point-2 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 230px;
        top: 45px;
    }
    .map-point-3 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 292px;
        top: 40px;
    }
    .map-point-4 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 340px;
        top: -77px;
    }
    .map-point-5 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 148px;
        top: -118px;
    }
    .map-point-6 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 212px;
        top: -245px;
    }
    .map-point-7 .map-point:hover .line-7{
        width: 60px;
        height: 1px;
        left: 220px;
        top: -285px;
    }
    .map-point-1 .map-point:hover .content-info {
        left: 135px;
        top: 70px;
    }
    .map-point-2 .map-point:hover .content-info {
        left: 228px;
        top: 43px;
    }
    .map-point-3 .map-point:hover .content-info {
        left: 291px;
        top: 45px;
    }
    .map-point-4 .map-point:hover .content-info {
        left: 340px;
        top: -75px;
    }
    .map-point-5 .map-point:hover .content-info {
        left: 147px;
        top: -119px;
    }
    .map-point-6 .map-point:hover .content-info {
        left: 212px;
        top: -245px;
    }
    .map-point-7 .map-point:hover .content-info {
        left: 220px;
        top: -285px;
    }

}
@media screen and (max-width: 991px) and (min-width: 768px) {

    .centered-y {
        width: 300px;
    }
    .map-point-1 .map-point:hover .line-1{
        width: 77px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
     .map-point-2 .map-point:hover .line-1{
        width: 150px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
    .map-point-3 .map-point:hover .line-1{
        width: 198px;
        height: 1px;
        left: 22px;
        top: 8px;
    } 
    .map-point-4 .map-point:hover .line-1{
        width: 235px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-5 .map-point:hover .line-1{
        width: 86px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-6 .map-point:hover .line-1{
        width: 134px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-7 .map-point:hover .line-1{
        width: 140px;
        height: 1px;
        left: 22px;
        top: 8px;
    }
    .map-point-1 .map-point:hover .line-2{
        width: 1px;
        height: 56px;
        left: 99px;
        top: 8px;
    }
   
    .map-point-2 .map-point:hover .line-2{
        width: 1px;
        height: 33px;
        left: 172px;
        top: 8px;
    }
   
    .map-point-3 .map-point:hover .line-2{
        width: 1px;
        height: 30px;
        left: 219px;
        top: 8px;
    }
   
    .map-point-4 .map-point:hover .line-2{
        width: 1px;
        height: 10px;
        left: 257px;
        top: -1px;
    }

    .map-point-5 .map-point:hover .line-2{
        width: 1px;
        height: 22px;
        left: 107px;
        top: -13px;
    }

    .map-point-6 .map-point:hover .line-2{
        width: 1px;
        height: 118px;
        left: 155px;
        top: -109px;
    }

    .map-point-7 .map-point:hover .line-2{
        width: 1px;
        height: 154px;
        left: 162px;
        top: -145px;
    }
    .map-point-1 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 100px;
        top: 100px;
    }
    .map-point-2 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 173px;
        top: 77px;
    }
    .map-point-3 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 219px;
        top: 75px;
    }
    .map-point-4 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 257px;
        top: -20px;
    }
    .map-point-5 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 108px;
        top: -50px;
    }
    .map-point-6 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 155px;
        top: -146px;
    }
    .map-point-7 .map-point:hover .line-3{
        width: 2px;
        height: 1px;
        left: 163px;
        top: -182px;
    }
    .map-point-1 .map-point:hover .line-4{
        width: 1px;
        height: 37px;
        left: 99px;
        top: 64px;
    }
    .map-point-2 .map-point:hover .line-4{
        width: 1px;
        height: 37px;
        left: 172px;
        top: 41px;
    }
    .map-point-3 .map-point:hover .line-4{
        width: 1px;
        height: 37px;
        left: 219px;
        top: 38px;
    }
    .map-point-4 .map-point:hover .line-4{
        width: 1px;
        height: 18px;
        left: 257px;
        top: -19px;
    }
    .map-point-5 .map-point:hover .line-4{
        width: 1px;
        height: 37px;
        left: 107px;
        top: -50px;
    }
    .map-point-6 .map-point:hover .line-4{
        width: 1px;
        height: 37px;
        left: 155px;
        top: -146px;
    }
    .map-point-7 .map-point:hover .line-4{
        width: 1px;
        height: 37px;
        left: 162px;
        top: -182px;
    }
    .map-point-1 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 102px;
        top: 100px;
    }
    .map-point-2 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 175px;
        top: 77px;
    }
    .map-point-3 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 221px;
        top: 75px;
    }
    .map-point-4 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 259px;
        top: -20px;
    }
    .map-point-5 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 110px;
        top: -50px;
    }
    .map-point-6 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 157px;
        top: -146px;
    }
    .map-point-7 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 165px;
        top: -182px;
    }
    .map-point-1 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 112px;
        top: 73px;
    }
    .map-point-2 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 185px;
        top: 53px;
    }
    .map-point-3 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 231px;
        top: 48px;
    }
    .map-point-4 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 269px;
        top: -46px;
    }
    .map-point-5 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 120px;
        top: -75px;
    }
    .map-point-6 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 167px;
        top: -171px;
    }
    .map-point-7 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 174px;
        top: -207px;
    }
    .map-point-1 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 112px;
        top: 72px;
    }
    .map-point-2 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 186px;
        top: 53px;
    }
    .map-point-3 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 232px;
        top: 48px;
    }
    .map-point-4 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 270px;
        top: -46px;
    }
    .map-point-5 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 121px;
        top: -75px;
    }
    .map-point-6 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 167px;
        top: -172px;
    }
    .map-point-7 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 175px;
        top: -207px;
    }
    .map-point-1 .map-point:hover .content-info {
        left: 110px;
        top: 70px;
    }
    .map-point-2 .map-point:hover .content-info {
        left: 184px;
        top: 50px;
    }
    .map-point-3 .map-point:hover .content-info {
        left: 233px;
        top: 50px;
    }
    .map-point-4 .map-point:hover .content-info {
        left: 271px;
        top: -42px;
    }
    .map-point-5 .map-point:hover .content-info {
        left: 119px;
        top: -77px;
    }
    .map-point-6 .map-point:hover .content-info {
        left: 170px;
        top: -173px;
    }
    .map-point-7 .map-point:hover .content-info {
        left: 177px;
        top: -206px;
    }

}
@media screen and (max-width: 768px) {
    .distribution-map .map-point{
        background: transparent;
        border: none;
        background-image: url(../img/dot-circle.png);
        background-position: 0px 0px;
        background-repeat: no-repeat; 
        border-radius:none;
    }
    .distribution-map > img{
        width: 260%;
        position: relative;
        margin: 0;
        padding: 0;
        min-height: 92vh;
        position: relative;
        right: 50%;
    }
    .centered-y{
        width: 160px;
        background-color: rgba(0, 0, 0,1);
    }
    .centered-y h5{
font-size: 15px;
color: var(--main-color);
    }
    .centered-y p{
        font-size: 13px;
        line-height: 1.6;
    }

    .distribution-map .map-point{
        width: 18px;
        height: 18px;
        max-width: 18px;
    }

    .map-point-1 .map-point{
        top:30%;
        left:70%
    }
    .map-point-2 .map-point{
        top: 32.5%;
        left: 48.4%;
    }
    .map-point-3 .map-point{
        top:34.5%;
        left:28%  
    }
    .map-point-4 .map-point{
        top:56%;
        left:14%  
    }
    .map-point-5 .map-point{
        top:64.3%;
        left:67%  
    }
    .map-point-6 .map-point{
        top: 88%;
        left: 64.5%;
    }
    .map-point-7 .map-point{
        top: 97%;
        left: 44.6%;
    }

    .map-point-1 .map-point:hover .line-1{
        width: 50px;
        height: 1px;
        left: 18px;
        top: 8px;
    }
    .map-point-2 .map-point:hover .line-1{
        width: 4px;
        height: 1px;
        left: 18px;
        top: 8px;
    }
    .map-point-3 .map-point:hover .line-1{
        width: 69px;
        height: 1px;
        left: 18px;
        top: 8px;
    }
    .map-point-4 .map-point:hover .line-1{
        width: 113px;
        height: 1px;
        left: 17px;
        top: 8px;
    }
    .map-point-5 .map-point:hover .line-1{
        width: 55px;
        height: 1px;
        left: -64px;
        top: 8px;
    }
    .map-point-6 .map-point:hover .line-1{
        width: 55px;
        height: 1px;
        left: -62px;
        top: 8px;
    }
    .map-point-7 .map-point:hover .line-1{
        width: 1px;
        height: 18px;
        left: 10px;
        top: -22px;
    }
    .map-point-1 .map-point:hover .line-2{
        width: 1px;
        height: 3px;
        left: 67px;
        top: 9px;
    }

    .map-point-2 .map-point:hover .line-2{
        width: 1px;
        height: 0px;
        left: 21px;
        top: 8px;
    }

    .map-point-3 .map-point:hover .line-2{
        width: 1px;
        height: 0px;
        left: 86px;
        top: 9px;
    }

    .map-point-4 .map-point:hover .line-2{
        width: 1px;
        height: 126px;
        left: 129px;
        top: -117px;
    }

    .map-point-5 .map-point:hover .line-2{
        width: 1px;
        height: 29px;
        left: -64px;
        top: -21px;
    }

    .map-point-6 .map-point:hover .line-2{
        width: 1px;
        height: 207px;
        left: -62px;
        top: -199px;
    }

    .map-point-7 .map-point:hover .line-2{
        width: 1px;
        height: 324px;
        left: 10px;
        top: -346px;
    }
    .map-point-1 .map-point:hover .line-3{
        width: 1px;
        height: 13px;
        left: 67px;
        top: 10px;
    }
    .map-point-2 .map-point:hover .line-3{
        width: 1px;
        height: 0px;
        left: 20px;
        top: 11px;
    }
    .map-point-3 .map-point:hover .line-3{
        width: 1px;
        height: 5px;
        left: 86px;
        top: 9px;
    }
    .map-point-4 .map-point:hover .line-3{
        width: 1px;
        height: 20px;
        left: 129px;
        top: -136px;
    }
    .map-point-5 .map-point:hover .line-3{
        width: 1px;
        height: 100px;
        left: -64px;
        top: -120px;
    }
    .map-point-6 .map-point:hover .line-3{
        width: 1px;
        height: 100px;
        left: -62px;
        top: -297px;
    }
    .map-point-7 .map-point:hover .line-3{
        width: 1px;
        height: 100px;
        left: 10px;
        top: -446px;
    }

    .map-point-1 .map-point:hover .line-4{
        width: 92px;
        height: 1px;
        left: -24px;
        top: 22px;
    }
    .map-point-2 .map-point:hover .line-4{
        width: 1px;
        height: 0px;
        left: 20px;
        top: 15px;
    }
    .map-point-3 .map-point:hover .line-4{
        width: 1px;
        height: 5px;
        left: 86px;
        top: 13px;
    }
    .map-point-4 .map-point:hover .line-4{
        width: 1px;
        height: 15px;
        left: 129px;
        top: -150px;
    }
    .map-point-5 .map-point:hover .line-4{
        width: 1px;
        height: 100px;
        left: -64px;
        top: -220px;
    }
    .map-point-6 .map-point:hover .line-4{
        width: 1px;
        height: 100px;
        left: -62px;
        top: -396px;
    }
    .map-point-7 .map-point:hover .line-4{
        width: 1px;
        height: 15px;
        left: 10px;
        top: -460px;
    }
    .map-point-1 .map-point:hover .line-5{
        width: 1px;
        height: 7px;
        left: -24px;
        top: 23px;
    }
    .map-point-2 .map-point:hover .line-5{
        width: 10px;
        height: 0px;
        left: 11px;
        top: 20px;
    }
    .map-point-3 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 86px;
        top: 18px;
    }
    .map-point-4 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: 129px;
        top: -151px;
    }
    .map-point-5 .map-point:hover .line-5{
        width: 10px;
        height: 1px;
        left: -63px;
        top: -220px;
    }
    .map-point-6 .map-point:hover .line-5{
        width: 21px;
        height: 1px;
        left: -62px;
        top: -396px;
    }
    .map-point-7 .map-point:hover .line-5{
        width: 17px;
        height: 1px;
        left: 11px;
        top: -460px;
    }
    .map-point-1 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: -58px;
        top: 30px;
    }
    .map-point-2 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 20px;
        top: -5px;
    }
    .map-point-3 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 95px;
        top: -6px;
    }
    .map-point-4 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 138px;
        top: -176px;
    }
    .map-point-5 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: -53px;
        top: -244px;
    }
    .map-point-6 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: -42px;
        top: -423px;
    }
    .map-point-7 .map-point:hover .line-6{
        width: 1px;
        height: 50px;
        left: 27px;
        top: -485px;
    }
    .map-point-1 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: -57px;
        top: 30px;
    }
    .map-point-2 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 20px;
        top: -6px;
    }
    .map-point-3 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 95px;
        top: -6px;
    }
    .map-point-4 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 138px;
        top: -177px;
    }
    .map-point-5 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: -53px;
        top: -244px;
    }
    .map-point-6 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: -42px;
        top: -423px;
    }
    .map-point-7 .map-point:hover .line-7{
        width: 50px;
        height: 1px;
        left: 27px;
        top: -485px;
    }

    .map-point-1 .map-point:hover .content-info {
        left: -50px;
        top: 36px;
        /* background: #000; */
    }
    .map-point-2 .map-point:hover .content-info {
        left: 25px;
        top: -1px;
    }
    .map-point-3 .map-point:hover .content-info {
        left: 100px;
        top: -1px;
    }
    .map-point-4 .map-point:hover .content-info {
        left: 145px;
        top: -172px;
    }
    .map-point-5 .map-point:hover .content-info {
        left: -45px;
        top: -238px;
    }
    .map-point-6 .map-point:hover .content-info {
        left: -35px;
        top: -418px;
    }
    .map-point-7 .map-point:hover .content-info {
        left: 35px;
        top: -479px;
    }

}