main {
    min-height: 10vh;
}

.section-member {
    /* min-height: 100vh; */
    margin-top: 95px;
    padding-top: 60px;
    padding-bottom: 60px;
}


.section-member .item {
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgb(61 65 96 / 20%), 0 0 1px 0 rgb(61 6 96 / 5%);
}
    .section-member .item.message-item {
    }

        .section-member .item.message-item ul {
        overflow-y: auto;
        max-height: 400px;
            padding-left: 0;
        }

            .section-member .item.message-item ul li + li {
                border-top: 1px solid #ccc;
            }

            .section-member .item.message-item ul li {
                padding: 10px;
                list-style: none;
                font-family: 'Noto Sans TC';
                font-size: 15px;
            }
            .section-member .item.message-item ul li.user {
                background: #fff;

            }

                .section-member .item.message-item ul li .date-time {
                    font-size: 14px;
                    color: #444;
                }
        .section-member .item.message-item .pic-item {
            position: relative;
            width: 50px;
            padding-bottom: 50px;
            overflow: hidden;
            border: 1px solid #ccc;
            border-radius: 100%;
        }

            .section-member .item.message-item .pic-item img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        .section-member .item.message-item .title-item{
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .section-member .item.message-item .title-item span{
            display: inline-block;
            color: #666;
            font-weight: bolder;
            font-size: 18px;
            margin-left: 10px;
        }

@media (min-width: 1200px) {
    .section-member {
        margin-top: 99px;
        padding: 100px 0;
    }

    .section-member .item {
        padding: 60px 30px;
    }
        .section-member .item.message-item{
        padding: 30px;

        }
}

.section-member .item .item-title {
    font-size: 20px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    margin-top: 30px;
    border-bottom: 1px solid #eee;
    text-align: left;
    color: #666;
}
.section-member .item ul {
    list-style: none;
    padding-left: 0;
}
.section-member .item ul li{
    background: #eee;
    padding: 15px 10px;
    position: relative;
}
    .section-member .item ul li+li {
        margin-top: 20px;
    }
    .section-member .item ul li .text-name {
        font-size: 18px;
        font-weight: bolder;
    }
    .section-member .item ul li button {
        outline: none;
        border-radius: 0;
        padding: 5px 20px;
        background: #004989;
        color: #fff;
        border: none;
        position: absolute;
        right: 0px;
        height: 100%;
        top: 50%;
        transform: translateY(-50%);
    }

        .section-member .item ul li button.btn-copy {
            background: #666;
        }

        .section-member .item ul li button:hover {
            background: rgba(220, 53, 69);
        }

        .section-member .item ul li button.btn-copy:hover {
            background: #888;
        }

.section-member .list-group {
    box-shadow: 0 2px 5px 0 rgb(61 65 96 / 20%), 0 0 1px 0 rgb(61 6 96 / 5%);
}

    .section-member .list-group .list-group-item {
        border: none;
    }

        .section-member .list-group .list-group-item + .list-group-item {
            border-top: 1px solid #eee;
        }

            .section-member .list-group .list-group-item + .list-group-item.active {
                background: #004989;
            }

.section-member .previous-form a {
    color: #004989;
}

.section-member .previous-form .btn-form, .section-member .item .btn-form {
    padding: 10px 60px;
    background-color: #666;
    color: #fff;
    border-radius: 25px;
    letter-spacing: 1.5px;
    border: none;
    transition: all 0.2s ease-in-out;
}

    .section-member .previous-form .btn-form:hover, .section-member .item .btn-form:hover {
        background-color: #004989;
    }

    .section-member .previous-form .btn-form:disabled, .section-member .item .btn-form:disabled {
        background-color: #aaa;
    }
.num {
    font-family: 'Noto Sans TC';
}

.message-num {
    animation: messageNum 2s infinite ease-in-out;
    border: 1px solid rgba(220, 53, 69, 0.6);
    color: #fff;
}

@keyframes messageNum {
    0% {
        background: rgba(220, 53, 69);
    }

    50% {
        background: rgba(220, 53, 69, 0.6);
    }

    100% {
        background: rgba(220, 53, 69);
    }
}


.section-member #captchaApp .captcha-box {
    display: flex;
    align-items: center;
    border: 1px solid #dee2e6;
    border-right: none;
}
    .section-member #captchaApp .captcha-box button {
        border: none;
        height: 100%;
    }
.section-member #captchaApp .form-control {
    border-radius: 0 0.375rem 0.375rem 0;
    border-left: none;
}