@media screen and (min-width: 769px) {
    .bar-ul-box {
        width: 100%;
        display: flex;
    }

    .bar-ul-box div {
        width: 13.42%;
        height: 50px;
        color: #FFFFFF;
        background-color: #0B3798;
        border-radius: 2px;
        margin-left: 1%;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bar-ul-box div span {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .select_bar {
        background-color: #07276D;
    }

    .bar-ul-box div:hover {
        cursor: pointer;
        background-color: #07276D;
    }

    .bar-ul-box div:first-child {
        margin-left: 0;
    }

    .all_bar_icon {
        margin-right: 16px;
        margin-top: -3px;
    }

}

@media (max-width: 768px) {
    .bar-ul-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .bar-ul-box div {
        width: 23.84%;
        height: 36px;
        margin-top: 12px;
        color: #FFFFFF;
        background-color: #0B3798;
        border-radius: 2px;
        margin-left: 1%;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bar-ul-box div span {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}