.banner {
    height: 6rem;
    position: relative;
}

.banner img {
    display: block;
    width: 100%;
    height: 100%;
}

.blogs-con {
    margin-top: .7rem;
}

.blogs-item {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    margin-bottom: .5rem;
    box-shadow: 12px -1px 29px 0px rgba(239, 238, 238, 0.96);
    border-radius: 6px;
    cursor: pointer;
}

.blogs-item img {
    display: block;
    width: 3.7rem;
    height: 2.5rem;
    border-radius: 6px;
}

.msg-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .65rem;
    box-sizing: border-box;
}

.title {
    width: 7.5rem;
    font-size: .24rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    line-height: .36rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.desc {
    width: 7.3rem;
    font-size: .14rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #666666;
    line-height: .24rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: .17rem;
    box-sizing: border-box;
}

.date {
    margin-top: .21rem;
    font-size: .14rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #999999;
    line-height: .3rem;
    box-sizing: border-box;
}

.btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-line {
    display: block;
    width: .8rem;
    height: 1px;
    background: #A0A0A0;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: .5rem;
    height: .5rem;
    font-size: .14rem;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #999999;
    /* border-radius: 0% .5rem .5rem 0%; */
    border-radius: 50%;
    border: 1px solid #A0A0A0;
    border-left: none;
    margin-left: .08rem;
}

.blogs-item:hover .btn-line {
    animation-direction: alternate;
    animation: hide 0.5s linear;
    animation-fill-mode: forwards;
}

.blogs-item:hover .btn {
    animation-direction: alternate;
    animation: rotate 0.5s linear;
    animation-fill-mode: forwards;
}

.blogs-item:hover img {
    -webkit-filter: grayscale(45%);
    -moz-filter: grayscale(45%);
    -ms-filter: grayscale(45%);
    -o-filter: grayscale(45%);
    animation-direction: alternate;
    animation: scale 0.5s linear;
    animation-fill-mode: forwards;

}

.page-btn-box {
    display: flex;
    justify-content: center;
}

.page-btn-box span {
    color: #666666 !important;
    border-color: #CCCCCC !important;
}

.page-btn-box .active span {
    background-color: #FE0605 !important;
    border-color: #FE0605 !important;
}

.page-btn-box .active span {
    color: #fff !important;
    background-color: #FE0605 !important;
    border-color: #FE0605 !important;
}

.page-btn-box span:hover {
    color: #fff !important;
    background-color: #FE0605 !important;
    border-color: #FE0605 !important;
    cursor: pointer;
}

@keyframes scale {
    from {

        transform: scale(1);
    }

    to {

        transform: scale(1.1);
    }
}

@keyframes rotate {
    from {
        margin-left: .08rem;
        transform: rotate(0deg);
        color: #999999;
        border-color: #A0A0A0;
        background: none;
    }

    to {
        margin-left: .88rem;
        color: #fff;
        transform: rotate(360deg);
        border-color: #FE0605;
        background: #FE0605;
    }
}

@keyframes hide {
    from {
        width: .8rem;
    }

    to {
        width: 0;
    }
}

@media screen and (max-width: 769px) {
    .blogs-con {
        padding: 0.25rem;
        box-sizing: border-box;
    }

    .blogs-item {
        flex-wrap: wrap;
    }

    .blogs-item img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .title,
    .desc {
        width: 5.2rem;
    }
    .msg-box{
        flex-wrap: wrap;
    }
    .btn-box {
        margin-top: .2rem;
    }
}