#main-warp
{
    background-color: #e9ecef;
    background-size: 100vw auto;
    background-repeat: no-repeat;
    padding-top: 200px;
}

#card-warp
{
    border-radius: 20px 20px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
}

.left-menu-card
{
    float: left;
    border-radius: 15px;
    padding: 10px;
}

.left-menu-card .left-menu-card-title
{
    text-align: center;
    color: rgb(255, 255, 255);
    font-weight: bold;
    margin-top: 20px;
}

.left-menu-card .left-menu-card-item
{
    height: 40px;
    padding-left: 60px;
    display: flex;
    align-items: center;
}

.left-menu-card .left-menu-card-item a
{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.left-menu-card .left-menu-card-item img
{
    width: 20px;
    margin-right: 5px;
}

.left-menu-card .active
{
    background-color: #dee2e6;
}

.left-menu-card .active a
{
    color: rgb(46,39,0);
}

.left-menu-card-content
{
    margin-top: 20px;
}

.right-content
{
    min-height: 100vh;
    background-color: #fff;
    border-radius: 15px;
    padding: 25px;
}

.right-content .list-item a
{
    text-decoration: none;
}

.right-content .list-item .list-item-right
{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
}

.right-content .list-item .list-item-footer
{
    display: flex;
    justify-content: space-between;
}

.list-item-title
{
    font-size: 20px;
    color: rgb(0, 0, 0);
}

.list-item-content
{
    font-size: 15px;
    color: rgb(138, 138, 138);
    margin-top: 15px;
}

.list-item-time
{
    font-size: 12px;
    color: rgb(138, 138, 138);
}

.list-item-view
{
    font-size: 12px;
    color: rgb(236, 88, 55);
}

/* 移动端 */
@media screen and (max-width: 768px) {
    .left-menu-card
    {
        
    }

    #main-warp
    {
        padding-top: 0px;
    }

    #main-warp .left-menu-card
    {
        width: 100vw;
    }

    .left-menu-card-content
    {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .left-menu-card .left-menu-card-item
    {
        padding-left: 0px;
        width: 33.33%;
        text-align: center;
    }

    .left-menu-card .left-menu-card-item a
    {
        margin-left: auto;
        margin-right: auto;
    }

    .right-content
    {
        float: left;
        width: 100%;
    }

    .right-content .list-item .list-item-image img
    {
        width: 100%;
    }
}

/* 电脑端 */
@media screen and (min-width: 768px) {
    #card-warp
    {
        width: 1320px;
    }

    #main-warp .left-menu-card
    {
        background-color: rgb(0 92 151);
        width: 275px;
    }

    .right-content
    {
        width: 988px;
        float: right;
    }

    .left-menu-card
    {
        min-height: 300px;
    }

    .right-content .list-item a
    {
        display: flex;
    }

    .right-content .list-item .list-item-image img
    {
        width: 300px;
    }

    .right-content .list-item .list-item-right
    {
        margin-left: 30px;
    }

    .list-item
    {
        margin-top: 15px;
        border-bottom: 1px solid #cccccc;
        padding-bottom: 15px;
    }
}