@keyframes light {
    50% {
        opacity: .6;
    } 
    100% {
        opacity: 0;
    }
}@keyframes light2 {
    50% {
        opacity: .4;
    } 
    100% {
        opacity: 0;
    }
}
.mapWrap {
    width: calc(100% - 3rem);
    margin-bottom: 3.8rem;
    margin-left: 3rem;
    position: relative;
}
.mapWrap img {
    display: block;
    width: 100%;
}
.dotWrap > span {
    opacity: 0.1;
    width: 1.1%;
    border-radius: 50%;
    background-color: #b3f4ff;
    position: absolute;
    transition: all .3s;
    animation: light 1.4s linear infinite alternate;
}
.dotWrap > span:nth-child(2n+1) {
    animation: light 1.4s linear2 infinite alternate;
    animation-delay: 0.65s;
}
.dotWrap > span:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}
.dotWrap > span.dot1 {
    top: 37.9%;
    left: 7.8%;
    animation-delay: 0.8s;
}
.dotWrap > span.dot2 {
    top: 44.1%;
    left: 7.8%;
}
.dotWrap > span.dot3 {
    top: 50.4%;
    left: 9.5%;
}
.dotWrap > span.dot4 {
    top: 50.4%;
    left: 15.8%;
}
.dotWrap > span.dot5 {
    top: 44.1%;
    left: 20.5%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot6 {
    top: 25.1%;
    left: 20.5%;
    animation-delay: 0.4s;
}
.dotWrap > span.dot7 {
    top: 25.1%;
    left: 22%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot8 {
    top: 22.2%;
    left: 22%;
}
.dotWrap > span.dot9 {
    top: 22.2%;
    left: 23.6%;
    animation-delay: .7s;
}
.dotWrap > span.dot10 {
    top: 37.8%;
    left: 26.7%;
}
.dotWrap > span.dot11 {
    top: 41%;
    left: 31.45%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot12 {
    top: 31.6%;
    left: 31.45%;
    animation-delay: 0.5s;
}
.dotWrap > span.dot12 {
    top: 31.6%;
    left: 31.45%;
}
.dotWrap > span.dot13 {
    top: 22.2%;
    left: 33%;
}
.dotWrap > span.dot14 {
    top: 31.6%;
    left: 36.2%;
}
.dotWrap > span.dot15 {
    top: 38%;
    left: 36.2%;
}
.dotWrap > span.dot16 {
    top: 44.2%;
    left: 36.2%;
}
.dotWrap > span.dot17 {
    top: 15.9%;
    left: 39.3%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot18 {
    bottom: 31.5%;
    left: 40.8%;
}
.dotWrap > span.dot19 {
    bottom: 25.3%;
    left: 42.4%;
}
.dotWrap > span.dot20 {
    bottom: 22.1%;
    left: 44%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot21 {
    top: 15.9%;
    left: 45.6%;
}
.dotWrap > span.dot22 {
    top: 15.9%;
    right: 44%;
}
.dotWrap > span.dot23 {
    top: 12.8%;
    right: 39.3%;
}
.dotWrap > span.dot24 {
    top: 47.4%;
    right: 28.3%;
}
.dotWrap > span.dot25 {
    top: 19.2%;
    right: 26.71%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot26 {
    top: 38%;
    right: 23.6%;
    animation-delay: 0.4s;
}
.dotWrap > span.dot27 {
    top: 31.6%;
    right: 18.9%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot28 {
    top: 22.2%;
    right: 18.9%;
}
.dotWrap > span.dot29 {
    top: 15.9%;
    right: 17.3%;
}
.dotWrap > span.dot30 {
    top: 9.7%;
    right: 15.8%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot31 {
    top: 28.5%;
    right: 15.8%;
}
.dotWrap > span.dot32 {
    top: 31.6%;
    right: 15.8%;
}
.dotWrap > span.dot33 {
    bottom: 9.5%;
    right: 15.8%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot34 {
    top: 25.2%;
    right: 14.2%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot35 {
    bottom: 31.5%;
    right: 14.2%;
    animation-delay: 0.9s;
}
.dotWrap > span.dot36 {
    top: 12.8%;
    right: 12.6%;
}
.dotWrap > span.dot37 {
    bottom: 12.7%;
    right: 12.6%;
}
.dotWrap > span.dot38 {
    bottom: 19.1%;
    right: 11.1%;
}
.dotWrap > span.dot39 {
    bottom: 25.3%;
    right: 11.1%;
}
.dotWrap > span.dot40 {
    top: 6.5%;
    right: 6.4%;
    animation-delay: 0.2s;
}
.dotWrap > span.dot41 {
    top: 3.3%;
    right: 3.2%;
}
.dotWrap > span.dot42 {
    top: 19.1%;
    right: 3.2%;
    animation-delay: 0.9s;
}
@media screen and (max-width: 1024px) {
    .mapWrap {
        width: calc(100% - 1rem);
        margin-left: 1rem;
    }
}

@media screen and (max-width: 767px) {
    @keyframes light {
        50% {
            opacity: .8;
        } 
        100% {
            opacity: 0;
        }
    }@keyframes light2 {
        50% {
            opacity: .6;
        } 
        100% {
            opacity: 0;
        }
    }
    .mapWrap {
        width: 100%;
        margin: 0;
    }
}