.ui-page-article-list {
    overflow: hidden;
}

    .ui-page-article-list .auto-img-box {
        float: left;
        width: 300px;
    }

    .ui-page-article-list .data-list-box {
        margin-top: 20px;
    }

    .ui-page-article-list .data-item-box {
        display: block;
        overflow: hidden;
        background: #fff;
    }

        .ui-page-article-list .data-item-box + .data-item-box {
            margin-top: 20px;
        }

    .ui-page-article-list .data-item-info-box {
        margin: 0 160px 0 330px;
        padding-top: 30px;
    }

    .ui-page-article-list .data-item-remark {
        -webkit-line-clamp: 2;
        color: #999;
        line-height: 24px;
        height: 48px;
    }

    .ui-page-article-list .data-item-title {
        font-size: 20px;
        font-weight: bold;
        color: rgba(31, 30, 30, 0.90);
        word-break: break-word;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all ease 0.3s;
        -ms-transition: all ease 0.3s;
        -o-transition: all ease 0.3s;
        transition: all 0.3s ease;
    }

    .ui-page-article-list .data-item-box:hover .data-item-title {
        text-indent: 5px;
    }

    .ui-page-article-list .data-item-time {
        float: right;
        width: 150px;
        color: #999;
        padding-top: 30px;
    }

        .ui-page-article-list .data-item-time .data-item-time-day {
            font-size: 40px;
            line-height: 45px;
        }

        .ui-page-article-list .data-item-time .data-item-time-date {
            font-size: 20px;
        }

    .ui-page-article-list .data-item-time1 {
        color: #999;
    }

    .ui-page-article-list .data-item-box:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .ui-page-article-list .data-list-box.layout-1 {
        font-size: 0;
    }

        .ui-page-article-list .data-list-box.layout-1 .data-item-time,
        .ui-page-article-list .data-list-box.layout-1 .data-item-remark {
            display: none;
        }

        .ui-page-article-list .data-list-box.layout-1 .data-item-info-box {
            margin: 0;
            padding: 0 15px;
        }

        .ui-page-article-list .data-list-box.layout-1 .auto-img-box {
            float: none;
            width: auto;
        }

        .ui-page-article-list .data-list-box.layout-1 .data-item-box {
            width: 25%;
            display: inline-block;
            vertical-align: top;
            padding: 0 10px;
            box-sizing: border-box;
            background: none;
        }

        .ui-page-article-list .data-list-box.layout-1 .data-item-title {
            line-height: 60px;
            font-size: 16px;
            text-align: center;
            font-weight: 400;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        .ui-page-article-list .data-list-box.layout-1 .data-item-box + .data-item-box {
            margin: 0;
        }

        .ui-page-article-list .data-list-box.layout-1 .data-item-box:hover {
            box-shadow: none;
        }

            .ui-page-article-list .data-list-box.layout-1 .data-item-box:hover .auto-img {
                transform: scale(1.05);
            }

            .ui-page-article-list .data-list-box.layout-1 .data-item-box:hover .data-item-title {
                text-indent: 0;
            }

    .ui-page-article-list .data-list-box.layout-2 .auto-img-box,
    .ui-page-article-list .data-list-box.layout-2 .data-item-time {
        display: none;
    }

    .ui-page-article-list .data-list-box.layout-2 .data-item-info-box {
        margin: 0;
        padding: 30px;
    }

    .ui-page-article-list .data-list-box.layout-2 .data-item-remark {
        -webkit-line-clamp: 1;
        height: 30px;
        line-height: 30px;
    }

    .ui-page-article-list .data-list-box.layout-2 .data-item-title {
        font-weight: normal;
    }

    .ui-page-article-list .data-list-box.layout-2 .data-item-time1 {
        display: block;
    }

    .ui-page-article-list .main.layout-0 .data-item-remark {
        margin-right: 120px;
    }

    .ui-page-article-list .center-3 {
        position: relative;
        background: #ffffff;
    }

        .ui-page-article-list .center-3 .list {
            padding: 20px 50px;
            overflow: hidden;
        }

            .ui-page-article-list .center-3 .list .item {
                width: 100%;
                height: auto;
                border-bottom: 1px solid #f0f0f0;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all ease 0.3s;
                -ms-transition: all ease 0.3s;
                -o-transition: all ease 0.3s;
                transition: all 0.3s ease;
                background: #fff;
            }

                .ui-page-article-list .center-3 .list .item:hover h3 {
                    transform: translateX(6px);
                }

                .ui-page-article-list .center-3 .list .item .cell {
                    position: relative;
                    padding: 20px 150px 20px 0;
                }

                    .ui-page-article-list .center-3 .list .item .cell h3 {
                        padding: 0 0 0 30px;
                        line-height: 30px;
                        font-weight: normal;
                        font-size: 18px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        transition: all 0.3s ease;
                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOBAMAAADtZjDiAAAAJFBMVEUAAAB4eHh1dXVsbGxnZ2dVVVVgYGB0dHRwcHA2NjYAAAB0dHTDQoYqAAAADHRSTlMAcmY8NCEoXEkTBFYtakUAAAAANUlEQVQI12OAAeYACM0q5ABhKAp2gmlHQcEyEM0oKCiovICBgVsQCMRgfIg8VD1UP8I8TAAAl4UG0GfevHIAAAAASUVORK5CYII=) 0 8px no-repeat;
                    }

                    .ui-page-article-list .center-3 .list .item .cell .time {
                        position: absolute;
                        right: 0;
                        top: 20px;
                        color: #aaaaaa;
                        line-height: 30px;
                    }

                        .ui-page-article-list .center-3 .list .item .cell .time span {
                            font-size: 16px;
                        }

.auto-img-box {
    position: relative;
    overflow: hidden;
}

    .auto-img-box:after {
        padding-bottom: 100%;
        content: "";
        display: block;
    }

    .auto-img-box.img-size-1:after {
        padding-bottom: 75%;
    }

    .auto-img-box.img-size-2:after {
        padding-bottom: 133%;
    }

    .auto-img-box.img-size-3:after {
        padding-bottom: 56%;
    }

    .auto-img-box.img-size-4:after {
        padding-bottom: 180%;
    }

    .auto-img-box .auto-img {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
        object-fit: cover;
        background: #f9f9f9;
    }

@keyframes slide-in {
    0% {
        transform: translateX(100%);
    }
    /* 初始位置不变 */
    100% {
        transform: translateX(0);
    }
    /* 结束位置向右移动 */
}

.animated-in {
    animation-name: slide-in; /* 指定动画序列名称 */
    animation-duration: 2s; /* 动画持续时间 */
    animation-fill-mode: forwards; /* 保持动画结束状态 */
}

@keyframes slide-down {
    0% {
        transform: translateY(-100%);
    }
    /* 初始位置在元素之外 */
    100% {
        transform: translateY(0);
    }
    /* 结束位置与原始位置相同 */
}

.animated-down {
    animation-name: slide-down; /* 指定动画序列名称 */
    animation-duration: 2s; /* 动画持续时间 */
    animation-fill-mode: forwards; /* 保持动画结束状态 */
}

@media (max-width:768px) {
    .ui-page-article-list .auto-img-box {
        width: 100%;
    }

    .ui-page-article-list .data-list-box.layout-1 .data-item-box {
        width: 50%;
    }

    /*.ui-page-article-list .data-item-time {
        float: right;
        width: 50%;
    }*/

    .ui-page-article-list .data-item-time .data-item-time-day {
        font-size: 25px;
    }

    .ui-page-article-list .data-item-info-box {
        float: left;
        width: 100%;
        margin: 0;
    }
}

@media (max-width:425px) {
    .ui-page-article-list .auto-img-box {
        width: 100%;
    }

    .ui-page-article-list .data-item-time {
        width: 100%;
        padding-top: 10px;
    }

        .ui-page-article-list .data-item-time .data-item-time-day {
            font-size: 20px;
        }

    .ui-page-article-list .data-list-box.layout-1 .data-item-box {
        width: 100%;
    }
}

.mutiple-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}