[v-cloak] {
    display: none;
}

html {
    scroll-padding-top: 100px;
}

#search {
    margin: 2% auto 4% auto;
}

#search table {
    width: 100%;
}

#search th {
    width: 11em;
    background: #000;
    color: #fff;
    padding: 1% 2%;
    border: 1px solid #fff;
}

#search td {
    padding: 1% 2%;
    border: 1px solid #000;
}

.search_btn {
    width: 30%;
    margin: 3% auto;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background: #000;
    padding: 1%;
    border-radius: 30px;
    cursor: pointer;
}

.search_btn input {
    cursor: pointer;
}

#free_word {
    border: 1px solid;
    width: 30%;
}

#list {
    margin-bottom: 5% !important;
}

.pagination {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 1%;
}

li.page {
    padding: 1%;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    margin: 1% 0;
}

li.page.navi-active {
    padding: 1%;
    background: #fff;
    color: #000;
    font-weight: 600;
}

.search_none {
    text-align: center;
    font-size: larger;
    font-weight: 600;
}

@media (max-width:767px) {

    #search table {
        width: 90%;
        margin: 0 auto;
    }

    #search th {
        display: block;
        width: 100%;
        background: #000;
        color: #fff;
        padding: 1% 2%;
        border: none;
    }

    #search td {
        display: block;
        padding: 1% 2%;
        border: 1px solid #000;
        line-height: 1.8;
    }

    .search_btn {
        width: 90%;
        padding: 2% 1%;
    }

    #free_word {
        width: 100%;
    }

    html {
        scroll-padding-top: 200px;
    }

    .pagination {
        gap: 2%;
    }
}