.scaler {
    position: absolute;
    top: 15%;
    right: 15px;
    width: 30px;
    height: 140px;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 1px 0 rgba(125, 134, 150, .25);
    box-shadow: 2px 2px 1px 0 rgba(125, 134, 150, .25);
    background: #fff;
    border: 1px solid #7d8696;

    button {
        width: 30px;
        height: 24px;
        font-size: 0;
        vertical-align: top;
        background-color: #fff;
        border: none;
        cursor: pointer;
    }

    button:focus {
        box-shadow: 0 0 15px 0 rgba(49, 118, 184, 0.33);
        border: solid 1px #2f5bba;
        background-color: #ffffff;
        color: #212121;
    }

    .zoom-in {
        background: url(/images/map/zoom_range_box.png) no-repeat 1px 0px;
    }

    .zoom-out {
        background: url(/images/map/zoom_range_box.png) no-repeat 1px -141px;
    }

    .scaler-bar {
        position: relative;
        width: 30px;
        height: 92px;
        cursor: default;
        background: url(/images/map/zoom_range_box.png) no-repeat 1px -24px;
    }

    .scaler-bar .scaler-control {
        position: absolute;
        width: 30px;
        height: 8px;
        cursor: pointer;
        background: url(/images/map/zoom_range_box.png) no-repeat 1px -167px;
    }

    .scaler-bar .scaler-box {
        display: none;
        position: absolute;
        top: 0;
        left: -40px;
    }

    &:hover .scaler-bar .scaler-box {
        display: inline-block;
    }

    .scaler-bar .scaler-box span {
        position: absolute;
        width: 30px;
        height: 15px;
        border: 1px solid #b5b5b5;
        background-color: #fff;
        display: block;
        font-size: 10px;
        text-align: center;
        font-weight: 500;
        padding: 1px 2px;
    }

    .scaler-bar .scaler-box span::after {
        position: absolute;
        top: -2px;
        right: -5px;
        width: 5px;
        height: 19px;
        content: "";
        display: inline-block;
        background-image: url(/images/map/map-1.png);
        background-position: -322px -1px;
    }
}

.direction{position:absolute;top:15%;right:50px;z-index:9999;display: flex;flex-wrap: wrap;width:160px}
.direction li{width:50%;display: flex; justify-content: center;align-items: center;}
.direction li:nth-child(1),.direction li:nth-child(4){width: 100%;}
.direction li button{width: 40px;height: 40px;background-color: #fff;border-radius: 50px;background-image: url(/images/map/direction.png);background-repeat: no-repeat;border: none;box-shadow: rgba(0, 0, 0, 0.7) 0 0 2px 0;}
.direction li button span{display: none;}
.direction li .up{background-position: 0 0;}
.direction li .up:hover,.direction li.on .up{background-position: -40px 0 ;}
.direction li .left{background-position: 0 -40px;}
.direction li .left:hover,.direction li.on .left{background-position: -40px -40px ;}
.direction li .right{background-position: 0 -80px;}
.direction li .right:hover,.direction li.on .right{background-position: -40px -80px ;}
.direction li .down{background-position: 0 -120px;}
.direction li .down:hover,.direction li.on .down{background-position: -40px -120px ;}