@media (max-width: 820px) {
    #logo {
        width: 36%;
        height: 36%;
    }

    .logo_box {
        width: 100%;
    }

    .ub_li {
        font-size: 2.6vw;
    }
}

@media (min-width:821px) {
    #logo {
        width: 100%;
        height: 100%;
    }

    .logo_box {
        width: 14%;
    }
}

#upper_bar {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    align-items: center;

    background-color: rgb(29, 59, 124);
}

#ub_content {
    position: absolute;
    right: 2%;

    list-style-type: none;
    margin-bottom: 30px;
}

.ub_li {
    float: left;
}

.ub_li a {
    display: block;
    text-align: center;
    padding: 10px;
    color: rgb(255, 255, 255);
}

.ub_li a:hover {
    text-decoration: underline;
}

#ub_line {
    width: 100%;
    background-color: rgb(103, 175, 216);
    border-color: rgb(193, 224, 245);
}