@media (min-width: 768px) {
    .main_map {
        width: 100%;
        box-sizing: border-box;
        display: flex;
    }

    .main_map .container {
        display: inline-block;
        width: 80%;
        box-sizing: border-box;
        vertical-align: top;
    }

    .main_map .map_guide_list {
        margin: 0;
        padding: 0 0 0 30px;
        list-style: none;
        display: inline-block;
        width: 20%;
        box-sizing: border-box;
        vertical-align: top;
    }

    .container object {
        width: 100%;
        /* max-width:800px; */
    }

    .zoomControll {
        display: none;
    }

}

@media (max-width: 767px) {
    .container {
        width: 100vw;
        height: 90vh;
        margin: 0 -20px;
    }

    .container .map {
        max-width: 100%;
        max-height: 100%;
        border: solid 1px;
        overflow: auto;
    }

    .zoomControll {
        position: relative;
        user-select: none;
        z-index: 100;
    }

    .zoomControll .Up,
    .zoomControll .Down {
        display: inline-block;
        position: absolute;
        box-sizing: border-box;
        border: solid 1px;
        background: #fff;
        line-height: 1em;
        padding: .5em;
        cursor: pointer;

    }

    .zoomControll .disable {
        background: #AAA;
        pointer-events: none;
    }

    .zoomControll .Up {
        top: 10px;
        left: 3%;
    }

    .zoomControll .Down {
        top: calc(2em + 20px);
        left: 3%;
    }
    .main_map .map_guide_list {
        display: none;
    }
}
.main_map{display: flex !important; }