.index-div5{
    height: 520px;
    background: url(../images/index-map.png) no-repeat center center;
    background-size:cover;
    position: relative;
}
.map_wrap{
    position: absolute;
    width: 633px;
    height: 520px;
    top: 0;
    left: 30%;
    background-color: #fff;
    background: url(../images/china.png) no-repeat center center;
    background-size: 100% 100%;
}
.map-box {width: 100%; position: absolute;}
.map-box .point {width:6px;height:6px;background: #fff;border-radius: 50%;cursor: pointer;position: absolute;}
.map-box .point .line {width: 55px; height: 24px; top: -31px; background: url(../images/index_part4_line_r.png) no-repeat 0 0; background-size: 55px 24px;}
.map-box .point .info {width: 98px; background: rgba(255, 255, 255, .05); left: 55px; top: -31px; overflow: hidden; padding: 5px 0px 5px 5px;position: relative;text-align: center;}

.map-box .point .info i {width: 30px; height:20px; background-size: cover !important;display: block;position: absolute;}
.map-box .point .info .i1 {background: url(../images/map_info_icon1.gif) no-repeat; background-size: 100% 100%; top: 0; left: 0; }
.map-box .point .info .i2 {background: url(../images/map_info_icon2.gif) no-repeat; background-size: 100% 100%; top: 0; right: 0;}
.map-box .point .info .i3 {background: url(../images/map_info_icon1.gif) no-repeat; background-size: 100% 100%; bottom: 0; right: 0; transform: rotate(180deg);}
.map-box .point .info .i4 {background: url(../images/map_info_icon2.gif) no-repeat; background-size: 100% 100%; bottom: 0; left: 0; transform: rotate(180deg);}
.map-box .point .breath {transform: translateX(-50%) translateY(-50%);left: 50%;top: 50%;border-radius: 50%;background: rgba(255, 255, 255, .6);animation: map_point 2s infinite;position: absolute;}
.map-box .point > * {display: block;}
.map-box .point.active11 .breath{display: block !important;}
.map-box .point .info .city{font-size: 16px;color: #fff; text-align: left;}
@keyframes map_point {
    0% {width: 0; height: 0; box-shadow: 0 0 0 0 rgba(255, 255, 255, .2);}
    50% {width: 30px; height: 30px; box-shadow: 0 0 0 15px rgba(255, 255, 255, .2);}
    100% {width: 0; height: 0; box-shadow: 0 0 0 0 rgba(255, 255, 255, .2);}
}

.beijing{
    left:460px; top:192px;
}

.zhengzhou{
    left: 434px; top: 267px;
}

.shijiazhuang{
    left: 434px; top: 227px;
}

.shanghai{
    left: 554px; top: 330px;
}

.guangzhou{
    left: 450px; top: 436px
}

.shenzhen{
    left: 475px; top: 446px
}

@media screen and (max-width: 1400px) {
    .map_wrap{
        left: 20%;
    }
}

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

    .map_wrap{
        left: 15%;
    }

}

@media screen and (max-width: 720px) {

    .map_wrap{
        left: 10%;
    }

}

@media screen and (max-width: 600px) {
    .index-div5{
        height: 320px;
    }

    .map_wrap{
        width: 360px;
        height: 296px;
        left: calc((100vw - 360px)/2);
    }

    .beijing{
        left:260px; top:118px;
    }

    .shijiazhuang{
        left: 256px; top: 136px;
    }

    .zhengzhou{
        left: 254px; top: 153px;
    }

    .shanghai{
        left: 313px; top: 186px;
    }

    .guangzhou{
        left: 250px; top: 239px
    }

    .shenzhen{
        left: 275px; top: 252px
    }
}

@media screen and (max-width: 500px) {

}