@keyframes banner {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.container {
    width: 100vw;
    height: 100vh;
}

.container .head {
    width: 100%;
    height: 200px;
    background-color: #ccc;
    background-image: linear-gradient(to right,#0066c5,#0084ff,#abd2ff);
    background-repeat: no-repeat;
    background-size: 400% 400%;
    animation: banner 10s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .head .box p {
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    color: #fff;
}

.container .head .box p img {
    width: 45px;
    margin: 0 auto;
    margin-bottom: 10px;
    border: 2px solid #fff;
}

.container .main {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.container .main .search {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .main .search input {
    display: block;
    flex: 1 1 70%;
    padding: 7px 15px;
    border-width: 0.5px 0px 0.5px 0.5px;
    border-style: solid;
    border-color: #0084ff;
    box-sizing: border-box;
    border-radius: 8px 0px 0px 8px;
}

.container .main .search button {
    display: block;
    flex: 1 1 30%;
    background-color: #0084ff;
    border: 1px solid #0084ff;
    color: #fff;
    padding: 7px 15px;
    box-sizing: border-box;
    border-radius: 0px 8px 8px 0px;
}

.container .main .show {
    width: 100%;
    box-sizing: border-box;
}

.container .main .show table {
    width: 100%;
}

.container .main .show table tr {
    width: 100%;
}

.container .main .show table tr.thead {
    width: 100%;
}

.container .main .show table tr.thead td {
    background-color: #e9e9e9;
    text-align: center;
    color: #0084ff;
    font-weight: bolder;
}

.container .main .show table td {
    border: 0.5px solid #cecece;
    padding: 7px;
    box-sizing: border-box;
}

.container .main .show table td.title {
    width: 28%;
    background-color: #f7f7f7;
    text-align: center;
    font-weight: bolder;
}

.container .main .show table td.content {
    width: 72%;
}

.container .main .show table td.content .verify {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .main .show table td.content .verify input {
    display: block;
    width: 50%;
    padding: 5px 10px;
    border-width: 0.5px 0px 0.5px 0.5px;
    border-style: solid;
    border-color: #ccc;
    box-sizing: border-box;
    font-size: 15px;
    border-radius: 8px 0px 0px 8px;
}

.container .main .show table td.content .verify button,
.container .main .show table td.content .confirm button {
    display: block;
    flex: 0 0 50%;
    background-color: #0084ff;
    border: 1px solid #0084ff;
    color: #fff;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 15px;
    border-radius: 0px 8px 8px 0px;
}

.container .main .show table td.content .confirm button {
    border-radius: 8px;
}

.container .main .show table td.content .verify button.disabled,
.container .main .show table td.content .confirm button.disabled {
    border: 1px solid #e9e9e9;
    background-color:#e9e9e9;
    color: #000;
}

.container .main .show table td.content .confirm {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px auto;
}

.container .main .show table td.content p {
    font-size: 15px;
    text-align: justify;
}

.container .foot {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .foot .copyright {
    width: 100%;
    padding-bottom: 20px;
}

.container .foot .copyright p {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0px;
}