/* #region Pages With Navigation */
.pages-description {
    display: flex;
    margin: auto;
    padding-top: var(--LOGO-height);
    justify-content: center;
}

.pages-description .placeholder {
    width: var(--navigationWidth);
}

.pages-description .content {
    flex: 1;
    min-width: 0;
    padding: 0 120px;
}

.pages-description .large-title {
    font-family: var(--serif);
    display: block;
    font-size: var(--font-size-XL);
    font-weight: 800;
    color: var(--text);
    padding: 30px 0;
}

/* #endregion */

body {
    background-color: var(--bg-dark);
    margin: 0;
}

button {
    font-family: var(--sans);
    font-weight: 400;
}

#header {
    height: var(--LOGO-height);
}

.header-container {
    display: flex;
    height: 100%;
    border: 1px solid;
    border-color: #ffffff00;
    max-width: 100%;
}

#LOGO {
    position: absolute;
    left: calc((100vw - var(--LOGO-height)) / 2);
}

/*--------------------內文--------------------*/

.container {
    padding-top: var(--LOGO-height);
}

#content {
    width: 60%;
}

.desktop-blank {
    height: 150px;
}

#list {
    width: 35%;
    padding-top: 12%;
}

@media (max-width:767px) {

    /* Pages With Navigation */
    .pages-description {
        max-width: 100vw;
    }

    .pages-description .placeholder {
        display: none;
    }

    .pages-description .content {
        max-width: 80%;
        padding: 0;
        margin: auto;
    }

    /* end */

    #mobile-pages-closed {
        font-size: 26px;
        line-height: 51px;
        width: auto;
        position: fixed;
        background-color: #0d0d0de0;
        height: 100%;
        top: 0;
        padding: 9% 10%;
        left: 0;
        transform: translateX(-246px);
        transition: transform 330ms cubic-bezier(0.78, 0.11, 0.46, 1.01);
    }

    #mobile-pages {
        font-size: 26px;
        line-height: 51px;
        width: auto;
        position: fixed;
        background-color: #0d0d0de0;
        height: 100%;
        top: 0;
        padding: 9% 10%;
        left: 0;
        transform: translateX(0px);
        transition: transform 330ms cubic-bezier(0.78, 0.11, 0.46, 1.01);
    }

    #content-title {
        font-size: 40px;
        line-height: 50px;
        padding: 27% 0;
    }

    .desktop-blank {
        display: none;
    }

}