@import "/assets/css/_lib";

.banner_card {
    position: relative;
    display: inline-block;
    width: 36vw;
    vertical-align: top;
    @include pc {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
    &.main {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        animation: fadeIn 0.1s linear;
        @include pc {
            padding: 10px;
        }
        .title {
            top: 21px;
            left: 20px;
            right: 20px;
            max-height: 84px;
            font-size: 32px;
            line-height: 42px;
        }
        @include pc {
            .title {
                top: 25px;
                left: 33px;
                right: 33px;
                max-height: 136px;
                font-size: 52px;
                line-height: 68px;
            }
        }
    }
}
.card_box {
    overflow: hidden;
    position: relative;
    display: block;
    padding-top: 100%;
    border-radius: 12px;
    background-color: #f5f5f5;
}
.thumb {
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    margin: auto;
}
.title {
    @include multi-ellipsis(18px, 2);
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    color: #fff;
    font-size: 13px;
    @include pc {
        top: 21px;
        left: 20px;
        right: 20px;
        max-height: 50px;
        font-size: 18px;
        line-height: 25px;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}