@media screen and (max-width: 1280px) {

    .container {
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
    }

    .motto img {
        width: 60vw;
    }

    .nav {
        width: 100%;
        margin-top: 5vw;
    }

    .intro {
        padding: 0 15px 15px;
    }

    .intro p {
        margin: 0;
        padding: 15px 15px 0;
    }

    .wrapper {
        padding: 0 15px 15px;
    }

    .wrapper .box {
        margin: 0 0 10px;
        padding: 15px;
    }

    .work {
        margin: 10px -10px;
    }

    .work li > a {
        /*padding: 3px 12px;*/
    }

    .work li {
        width: calc(33.33% - 20px);
        margin: 10px;
    }

}

@media screen and (max-width: 768px) {

    .container {
        padding: 0 15px;
    }

    .work li {
        float: left;
        width: calc(50% - 20px);
    }

}

@media screen and (max-width: 600px) {

    .header .logo img {
        height: auto;
    }

    .motto img {
        width: 90vw;
    }

    .nav {
        margin-top: 20px;
    }

    .menu {
        height: 55px;
        white-space: nowrap;
        overflow: scroll;
        border-radius: 10px;
        background: linear-gradient(91deg, #31D0FD 0%, #1E70CE 58%, #1948E0 100%);
    }

    .menu li {
        margin: 0 15px;
    }

    .intro p, .wrapper .box {
        line-height: 1.5em;
    }

    .work {
        margin: 10px 0;
    }

    .work li {
        float: left;
        width: 100%;
        margin: 10px 0;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .enter {
        flex-grow: 1;
        position: relative;
        height: auto;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 0.5rem;
    }

    .enter li {
        width: 80vw;
        height: auto;
        margin: 0.5rem 0;
    }

    .enter li a p {
        height: 4.5em;
    }

}