.subject-box {
    width: 265px;
    height: 239px;
    cursor: pointer;
    outline: none;
    &:hover {
        .box-image img {
            transform: scale(1.1);
        }
        .box-info {
            .info-title {
                color: $primary-color;
            }
        }
    }
    .box-image {
        width: 100%;
        height: 159px;
        // background-color: $primary-color;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            transition: all 0.5s;
            object-fit: cover;
        }
    }
    .box-info {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid $line-color;
        border-top: none;
        border-bottom: 2px solid $primary-color;
        // padding: 13px 14px 10px;
        transition: all 0.3s;
        .info-title {
            transition: all 0.3s;
            color: #000;
            padding-bottom: 6px;
        }
        .info-start {
            font-size: 14px;
            color:rgba($color: #000000, $alpha: 0.65);
            // i {
            //     padding-right: 10px;
            // }
        }
        // .info-end {
        //     font-size: 14px;
        //     i {
        //         padding-right: 10px;
        //     }
        // }
    }
}