@keyframes circleScale {
    0% {
        opacity: 1;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes hvr-ripple-out {
    100% {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0
    }
}

@keyframes hvr-ripple-out {
    100% {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0
    }
}

@keyframes jump {
    0% {
        transform: translateY(0) scale(1, 1)
    }

    50% {
        transform: translateY(-20px) scale(1, 1)
    }

    100% {
        transform: translateY(0) scale(1, 1)
    }
}

.wangdian1 {
    position: absolute;
    top: 28%;
    right: 65%;
    z-index: 2
}

.changzhoutu {
    position: absolute;
    width: 225px;
    height: 0;
    right: -240%;
    top: -75%;
    transition: all .4s;
    z-index: 0;
    opacity: 0
}

.map p {
    display: none
}

.shenzhentu {
    position: absolute;
    width: 225px;
    height: 0;
    right: -288%;
    top: 43%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.szjd {
    position: absolute;
    width: 225px;
    height: 0;
    right: -288%;
    top: 43%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.jidi1:hover .szjd {
    z-index: 99;
    height: 177px;
    opacity: 1;
    visibility: inherit
}

.suzhoutu {
    position: absolute;
    width: 225px;
    height: 0;
    right: -653%;
    top: -698%;
    transition: all .4s;
    opacity: 0;
    z-index: 0
}

.wdslt1 {
    position: absolute;
    width: 225px;
    height: 0;
    right: 157%;
    top: -698%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wdslt2 {
    position: absolute;
    width: 225px;
    height: 0;
    right: 156%;
    top: -698%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wdslt3 {
    position: absolute;
    width: 225px;
    height: 0;
    right: 143%;
    top: -698%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wdslt4 {
    position: absolute;
    width: 225px;
    height: 0;
    right: 135%;
    top: -698%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wdslt5 {
    position: absolute;
    width: 225px;
    height: 0;
    right: -653%;
    top: -698%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wdslt7 {
    position: absolute;
    width: 225px;
    height: 0;
    right: 157%;
    top: -700%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wdslt8 {
    position: absolute;
    width: 225px;
    height: 0;
    right: -670%;
    top: -698%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wdslt9 {
    position: absolute;
    width: 225px;
    height: 0;
    right: -700%;
    top: 80%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wdslt10 {
    position: absolute;
    width: 225px;
    height: 0;
    top: -700%;
    right: -653%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.wd1:hover .wdslt1 {
    z-index: 99;
    height: 177px;
    visibility: inherit;
    opacity: 1
}

.wd2:hover .wdslt2 {
    z-index: 99;
    height: 177px;
    visibility: inherit;
    opacity: 1
}

.wangdian1:hover .changzhoutu {
    z-index: 99;
    height: 177px;
    opacity: 1
}

.jidi2:hover .shenzhentu {
    z-index: 99;
    height: 177px;
    opacity: 1;
    visibility: inherit
}

.wd6:hover .suzhoutu {
    z-index: 99;
    height: 177px;
    opacity: 1
}

.diqu1 {
    position: absolute;
    top: 34%;
    left: 18%;
    animation: jump 2s ease infinite;
    z-index: 3
}

.diqu2 {
    position: absolute;
    top: 47%;
    left: 24%;
    animation: jump 2s ease infinite;
    z-index: 3
}

.diqu3 {
    position: absolute;
    top: 13%;
    left: 46.3%;
    animation: jump 2s ease infinite;
    z-index: 3
}

.diqu4 {
    position: absolute;
    top: 48%;
    left: 63.3%;
    display: flex;
    flex-flow: row-reverse;
    animation: jump 2s ease infinite;
    z-index: 3
}

.wangdian1 img {
    z-index: 33;
    position: relative
}

.jidi1 {
    position: absolute;
    right: 21%;
    top: 46%;
    color: #2a878b
}

.jidi2 {
    position: absolute;
    right: 21%;
    top: 41%;
    color: #2a878b
}

.bsc1 {
    position: absolute;
    width: 225px;
    height: 0;
    right: -300%;
    top: -446%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.bsc2 {
    position: absolute;
    width: 225px;
    height: 0;
    right: -302%;
    top: -445%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.bsc3 {
    position: absolute;
    width: 225px;
    height: 0;
    right: -308%;
    top: -449%;
    transition: all .4s;
    opacity: 0;
    z-index: 0;
    visibility: hidden
}

.bsc4 {
    position: absolute;
    width: 225px;
    height: 0;
    right: 131%;
    visibility: hidden;
    top: 25%;
    transition: all .4s;
    opacity: 0;
    z-index: 0
}

.diqu1:hover .bsc1 {
    z-index: 99;
    height: 177px;
    opacity: 1;
    visibility: inherit
}

.diqu2:hover .bsc2 {
    z-index: 99;
    height: 177px;
    opacity: 1;
    visibility: inherit
}

.diqu3:hover .bsc3 {
    z-index: 99;
    height: 177px;
    visibility: inherit;
    opacity: 1
}

.diqu4:hover .bsc4 {
    z-index: 99;
    height: 177px;
    opacity: 1;
    visibility: inherit
}

.zongbu {
    display: flex;
    flex-flow: column;
    text-align: center;
    color: #2a878b;
    font-size: 26px;
    font-weight: 400
}


.wd1 {
    position: absolute;
    top: 24%;
    left: 8.5%;
    z-index: 2
}

.wd2 {
    position: absolute;
    top: 31%;
    left: 6.6%;
    z-index: 2
}

.wd3 {
    position: absolute;
    top: 33%;
    right: 85%;
    z-index: 2
}

.wd4 {
    position: absolute;
    top: 38.5%;
    left: 8.5%;
    z-index: 2
}

.wd5 {
    position: absolute;
    top: 40%;
    right: 93%;
    z-index: 2
}

.wd6 {
    position: absolute;
    top: 36%;
    right: 84.5%;
    z-index: 9
}

.wd7 {
    position: absolute;
    top: 75%;
    left: 11%;
    z-index: 2
}

.wd8 {
    position: absolute;
    top: 25.5%;
    left: 69%;
    z-index: 2
}

.wd9 {
    position: absolute;
    top: 39%;
    right: 26%;
    z-index: 2
}

.wd10 {
    position: absolute;
    top: 50%;
    left: 72.2%;
    z-index: 2
}

.wd11 {
    position: absolute;
    top: 70%;
    left: 83%;
    z-index: 2
}

.wd12 {
    position: absolute;
    top: 92%;
    left: 26.5%;
    z-index: 2
}

.wd13 {
    position: absolute;
    top: 90%;
    left: 25%;
    z-index: 2
}

.wd14 {
    position: absolute;
    top: 62%;
    right: 21.4%;
    z-index: 2
}

.wd15 {
    position: absolute;
    top: 42%;
    right: 17%;
    z-index: 2
}

.wd16 {
    position: absolute;
    top: 42%;
    right: 14%;
    z-index: 2
}

.circle dd {
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: scale(0);
    border-radius: 50%;
    background-color: rgb(185 185 185 / 35%);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-animation: circleScale 2s linear infinite;
    -moz-animation: circleScale 2s linear infinite;
    -ms-animation: circleScale 2s linear infinite;
    animation: circleScale 2s linear infinite;
    width: 100%
}

.circle {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: absolute;
    left: -26px;
    bottom: 15%;
    top: auto;
    z-index: 88
}

.circle dd {
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: scale(0);
    border-radius: 50%;
    background-color: rgb(42 135 139 / 0%);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-animation: circleScale 2s linear infinite;
    -moz-animation: circleScale 2s linear infinite;
    -ms-animation: circleScale 2s linear infinite;
    animation: circleScale 2s linear infinite;
    width: 100%;
    border: solid 4px rgb(42 135 139)
}

.circle1 dd {
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: scale(0);
    border-radius: 50%;
    background-color: #2a878b !important;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-animation: circleScale 2s linear infinite;
    -moz-animation: circleScale 2s linear infinite;
    -ms-animation: circleScale 2s linear infinite;
    animation: circleScale 2s linear infinite;
    width: 100%;
    border: solid 0px #398eeb !important
}

.ditu img {
    filter: blur(0);
    transition: filter 1s;
    width: 94%
}

.circle2 {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: absolute;
    left: 40%;
    bottom: -40%;
    top: auto;
    z-index: 88
}

.circle2 dd {
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: scale(0);
    border-radius: 50%;
    background-color: #2a878b !important;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-animation: circleScale 2s linear infinite;
    -moz-animation: circleScale 2s linear infinite;
    -ms-animation: circleScale 2s linear infinite;
    animation: circleScale 2s linear infinite;
    width: 100%;
    border: solid 0px rgb(42 135 139) !important
}

.circle3 {
    width: 320px;
    height: 320px;
    margin: 0 auto;
    position: absolute;
    left: 36%;
    top: -6%;
    z-index: 0
}

.circle4 {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    position: absolute;
    left: 4%;
    top: 9%;
    z-index: 0
}

.circle5 {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: absolute;
    left: 16%;
    top: 29%;
    z-index: 0
}

.circle3 dd,
.circle4 dd,
.circle5 dd {
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: scale(0);
    border-radius: 50%;
    background-color: rgb(243 99 37 / 0%);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-animation: circleScale 2s linear infinite;
    -moz-animation: circleScale 2s linear infinite;
    -ms-animation: circleScale 2s linear infinite;
    animation: circleScale 2s linear infinite;
    width: 100%;
    border: solid 4px rgb(42 135 139)
}


@media screen and (min-width: 769px) {
    .ditu {
        width: 100% !important
    }

    .circle dd {
        height: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        transform: scale(0);
        border-radius: 50%;
        background-color: rgb(243 99 37 / 0%);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -webkit-animation: circleScale 2s linear infinite;
        -moz-animation: circleScale 2s linear infinite;
        -ms-animation: circleScale 2s linear infinite;
        animation: circleScale 2s linear infinite;
        width: 100%;
        border: solid 4px rgb(42 135 139)
    }

    .circle dd:nth-of-type(2) {
        animation-delay: 0.5s
    }

    .circle dd:nth-of-type(3) {
        animation-delay: 1s
    }

    .circle dd:nth-of-type(4) {
        animation-delay: 1.5s
    }

    .map {
        width: 100%;
        height: 100%;
        position: relative
    }

    .circle dt {
        cursor: pointer;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background: #c0184c;
        border-radius: 50%
    }
}


@media screen and (min-width: 769px) {}

@media screen and (max-width: 1024px) and (min-width: 769px) {}

@media screen and (max-width: 1580px) and (min-width: 1367px) {}

@media screen and (max-width: 1366px) and (min-width: 1279px) {}

.ditu-img{position: relative;width: 100%;z-index: 0;height:570px;}