@charset "utf-8";
.map-content-info {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 76px;
    align-items: center;
    position: relative;
}

.map_img {
    display: inline-block;
    width: 100%;
    max-width: 1330px;
    height: auto;
}

.map_box {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.branch-map-l {
    width: 100%;
    max-width: 1330px;
    height: 100%;
    position: relative;
}

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

.map-dot {
    position: absolute;
    text-align: center;
    cursor: pointer;
}

.map-dot-o {
    position: absolute;
    text-align: center;
    cursor: pointer;
}

.zhongguo {
    top: 45.75%;
    left: 79.3%;
}
.huzhou {
    top: 43%;
    left: 80%;
}
.tangshan {
    top: 40%;
    left: 80%;
}
.malai {
    top: 60.9%;
    left: 76.9%;
}

.yindu {
    top: 51.4%;
    left: 68.4%;
}

.bajisitan {
    top: 44.8%;
    left: 66.4%;
}

.tuerqi {
    top: 39.5%;
    left: 56.3%;
}
.yuedan {
    top: 48.5%;
    left: 57.3%;
}
.nanfei {
    top: 82.5%;
    left: 53.3%;
}
.ruidian {
    top: 21.9%;
    left: 51.2%;
}

.xibanya {
    top: 38.6%;
    left: 46%;
}

.baxi {
    top: 69.1%;
    left: 31.9%;
}


/*案例 橙色圆点*/

.dw1 {
    left: 18%;
    top: 52.6%;
}

.dw2 {
    left: 22.4%;
    top: 55.4%;
}

.dw3 {
    left: 24.4%;
    top: 52.9%;
}

.dw4 {
    left: 26.5%;
    top: 53.4%;
}

.dw5 {
    left: 26.9%;
    top: 69.1%;
}

.dw6 {
    left: 34.1%;
    top: 69.5%;
}

.dw7 {
    left: 28.5%;
    top: 87.2%;
}

.dw8 {
    left: 45.7%;
    top: 42.6%;
}

.dw9 {
    left: 47.5%;
    top: 45.1%;
}

.dw10 {
    left: 48%;
    top: 33.9%;
}

.dw11 {
    left: 49.7%;
    top: 32%;
}

.dw12 {
    left: 50.3%;
    top: 37.6%;
}

.dw13 {
    left: 51.1%;
    top: 34.1%;
}

.dw14 {
    left: 51.4%;
    top: 30.8%;
}

.dw15 {
    left: 52.6%;
    top: 34.5%;
}

.dw16 {
    left: 54.2%;
    top: 27.1%;
}

.dw17 {
    left: 54.5%;
    top: 48.2%;
}

.dw18 {
    left: 55.1%;
    top: 63.5%;
}

.dw19 {
    left: 54.6%;
    top: 74.4%;
}

.dw20 {
    left: 58.1%;
    top: 65.4%;
}

.dw21 {
    left: 59.4%;
    top: 45.7%;
}

.dw22 {
    left: 59.9%;
    top: 51.2%;
}

.dw23 {
    left: 62.2%;
    top: 51.1%;
}

.dw24 {
    left: 68%;
    top: 42%;
}

.dw25 {
    left: 69.5%;
    top: 49.5%;
}

.dw26 {
    left: 70.5%;
    top: 52.5%;
}

.dw27 {
    left: 74.5%;
    top: 41.5%;
}

.dw28 {
    left: 77%;
    top: 54.5%;
}

.dw29 {
    left: 76.8%;
    top: 66.5%;
}

.dw30 {
    left: 80%;
    top: 67.5%;
}

.dw31 {
    left: 82%;
    top: 61.5%;
}

.dw32 {
    left: 86%;
    top: 41.5%;
}

.map-dot:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 50%;
    border: 5px solid #195D9C;
    z-index: 2;
    position: relative;
}

.map-dot-o:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    border-radius: 50%;
    z-index: 2;
    position: relative;
    background: #fff;
    border: 5px solid #f49a05;
}

.branch-map-data {
    position: absolute;
    box-sizing: border-box;
    font-size: 24px;
    letter-spacing: 2px;
    font-weight: bold;
    color: #195D9C;
    border-radius: 10px;
    z-index: 4;
    display: none;
    margin-left: 8px;
}

a,
button,
input,
textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}


/* .map-dot.cur:before */

/* .map-dot:before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(25, 93, 156, 1);
    animation: dot 3s infinite;
    z-index: 1;
} */

.map-dot-o:before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(244, 154, 5, .62);
    // border: 1px solid #f49a05;
    animation: dot2 3s infinite;
}

@keyframes dot {
    100% {
        transform: translateX(0%) scale(1);
        opacity: .1;
    }
    50% {
        transform: translateX(0%) scale(1);
        opacity: 0.64;
    }
    0% {
        transform: translateX(0%) scale(1);
        opacity: .1;
    }
}

@keyframes dot1 {
    100% {
        transform: translateX(0%) scale(1);
        opacity: .1;
    }
    50% {
        transform: translateX(0%) scale(1);
        opacity: 0.64;
    }
    0% {
        transform: translateX(0%) scale(1);
        opacity: .1;
    }
}

@keyframes dot2 {
    100% {
        transform: translateX(0%) scale(1);
        opacity: .1;
    }
    50% {
        transform: translateX(0%) scale(1);
        opacity: 1;
    }
    0% {
        transform: translateX(0%) scale(1);
        opacity: .1;
    }
}

@media screen and (max-width:1280px) {
    .branch-map-data {
        font-size: 20px;
        margin-left: 10px;
    }
}

@media screen and (max-width:1024px) {
    .branch-map-data {
        font-size: 16px;
        margin-left: 10px;
    }
}