@media (max-width:1024px) {
    hr {
        color: #ccc;
        margin: .5em;
        /* border: 1px solid #ccc; */
    }

    .content {
        padding: 1em;
    }

    .search {
        justify-content: center;
    }

    .search input {
        border: 1px solid #ccc;
    }

    .search input:nth-child(1) {
        flex: 4;
        max-width: 300px;
        height: 2em;
        padding: 0 0.5em;
    }

    /* .search input[type="text"] {
        flex: 4;
        max-width: 300px;
        height: 2em;
        padding: 0 0.5em;
    } */

    .search input:nth-child(2) {
        flex: 1;
        max-width: 50px;
        justify-content: center;
    }

    /* .search input[type="submit"] {
        flex: 1;
        max-width: 50px;
        justify-content: center;
    } */

    .search input:nth-child(2):hover {
        background-color: #0DA3E2;
        color: white;
    }

    /* .search input[type="submit"]:hover {
        background-color: #0DA3E2;
        color: white;
    } */

    .main-ul {
        /* height: calc(100vh - 115px); */
        flex-direction: column;
    }

    .main-ul li {
        margin: 10px 0;
    }

    .main-ul li a {
        flex-direction: column;
        background-color: rgb(237, 237, 237);
        border-radius: 10px;
        padding: 1em;
        color: black;
    }

    .main-ul li a p:nth-last-child(1) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        /* line-clamp: 3; */
        overflow: hidden;
    }

}