.comment-item {
    margin-bottom: 30px;
}
.comment-item::before,
.comment-item::after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    zoom: 1;
}

.foot {
    background-color: #fafafa;
    padding: 8px;
    display: none
}

.comment {
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;
}

.comment .desc {
    margin-bottom: 10px;
}

.comment-item {
    display: flex;
    margin-bottom: 20px;
}

.comment-item img {
    width: 30px;
    margin-right: 8px;
}

.comment-item .nick-name {
    color: #695e5ee3;
    margin-right: 8px;
    font-size: 14px;
}

.comment-item .native-place {
    color: #9e9e9ed1;
    font-size: 14px;
}

.comment-item .native-like {
    float: right;
    color: #9e9e9ed1;
    font-size: 14px;
}

.comment-item .native-date {
    color: #9e9e9ed1;
    margin-left: 8px;
    font-size: 14px;
}

.comment-item .content {
    padding-top: 5px;
    white-space: pre-line;
}

.comment-item .more-reply {
    margin-top: 10px;
    color: #9e9e9ed1;
}

.comment-item .reply {
    display: flex;
    margin-top: 10px;
}

.comment-item .reply img {
    width: 20px;
    margin-right: 8px;
}