@font-face {
    font-family: 'Conv_DINNEXTW1G-MEDIUM';
    src: url("../fonts/DINNEXTW1G-MEDIUM.eot");
    src: local("☺"), url("../fonts/DINNEXTW1G-MEDIUM.ttf") format("truetype"), url("../fonts/DINNEXTW1G-MEDIUM.svg") format("svg");
    font-weight: normal;
    font-style: normal; }


.map-province {
    white-space: nowrap;
    position: absolute;
    z-index: 888;
    margin: -10px 0 0 10px;
    width: 40px;
    height: 10px;
    pointer-events: none;
    color: #333;
    font-size: 12px;
    text-align: center;
}

.map-province span {
    display: block;
    /*font-size: 18px;*/
    font-size: 12px;
    color: #505050;
    position: relative;
}
.map-province span::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #e57b11;
    position: absolute;
    top: 1px;
    left: -14px;
}
.map-province .sheng,
.map-province .num {
    display: none;
}

.map-province.cur {
    position: absolute;
    z-index: 990;
}
.map-province.cur span {
    display: none;
}
.map-province.cur .sheng,
.map-province.cur .num {
    color: #fff;
    display: block;
    position: absolute;
    z-index: 900;
}

.map-province.cur .sheng {
    font-size: 20px;
    transform: translateX(-49%);
    top: -30px;
}

.map-province.cur .num {
    font-size: 35px;
    font-family: 'Conv_DINNEXTW1G-MEDIUM';
    transform: translateX(-49%);
}


.map-province::before {
    content: '';
    width: 0;
    height: 0;
    border-radius: 100%;
    background-color: rgba(235, 97, 0, .9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 600;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.map-province.cur::before {
    width: 108px;
    height: 108px;
    top: -54px;
    left: -54px;
}

.map-province::after {
    content: '';
    width: 0;
    height: 0;
    border-radius: 100%;
    background-color: rgba(229,123,17,.1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.map-province.cur::after {
    width: 94px;
    height: 94px;
    top: -47px;
    left: -47px;
    animation: shengDa 2s infinite linear;
}

@keyframes shengDa {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2); }
}

@media all and (max-width: 480px) {
    .map-province::before,
    .map-province::after {
        display: none;
    }
    .map-province span {
        font-size: 12px;
    }
    .map-province.cur span {
        display: block;
    }
    .map-province.cur .sheng, .map-province.cur .num {
        display: none;
    }
}