@media screen and (min-width: @mobile-device) {
    .anime-card {
        margin-right: @margin-general;
        margin-top: @margin-general;
        height: 30rem;
        width: 98%;
        border-radius: 20px;
        overflow: hidden;
        border: @border-line solid @themeColor;
        background-color: @bgColor;
        &:hover {
            .elimg {
                width: 0%;
                height: 100%;
            }
            .info {
                opacity: 0;
                color: @bgTextColor;
            }
            .info-detail {
                opacity: 1;
            }
        }
    }

    // 容器
    .card {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        transition: all 0.5s ease;
        position: relative;
        .font-normal();
        .elimg {
            width: 100%;
            height: 70%;
            flex-shrink: 0;
            transition: all 0.5s ease;
        }
        .title {
            font-size: @big-text;
        }

        .info {
            padding: @padding-general;
            flex: 1;
            width: 100%;
            height: 30%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 1s ease;
            .rating {
                display: flex;
                justify-content: space-between;
            }

            .rank {
                color: @linkColor;
            }
        }

        .info-detail-container {
            width: 100%;
            height: 100%;
        }

        .info-detail {
            padding: @padding-general;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: @textColor;
            height: 100%;
            opacity: 0;
            .hanyaku {
                font-family: '黑体';
            }
            .desc {
                .text-line-show(8);
                margin-bottom: 0.3rem;
            }
        }
    }
}

@media screen and (min-width: @pad-device) {
    .anime-card {
        height: 34rem;

        &:hover {
            width: 98%;
            background-color: @bgColor;
            .elimg {
                cursor: pointer;
                width: 40%;
                height: 100%;
            }
            .info {
                opacity: 0;
            }
            .info-detail {
                opacity: 1;
            }
        }
    }

    .card .info-detail-container {
        width: 60%
    }
}

@media screen and (min-width: @smallpc-device) {
    .anime-card {
        margin-right: @margin-general;
        height: 26rem;
        width: 20rem;
        flex-shrink: 0;
        transition: all 0.5s ease;
        &:hover {
            width: 50rem;
            background-color: @bgColor;
        }
    }

    .card {
        .elimg {
            width: 100%;
        }
    }
}