.main-content-all{
    width: 100%;
}
.main-content{
    width: 1200px;
    margin: 36px auto;
}
.left-main-content-all{
    box-sizing: border-box;
    width: 880px;

}
.left-main-content{
    padding: 16px; 
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 8px 12px rgba(0, 0, 0, .04);
}
.right-main-content-all{
    box-sizing: border-box;
    width: 280px;

}
.left-main-screen-all{
    width: 100%;
    flex-wrap: wrap;
    padding: 4px 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eeeeee;
}
.main-screen-param{
    width: 90%;
    flex-wrap: wrap;
}
.left-main-screen{
    font-size: 12px;
}
.main-screen-title{
    color: #aaaaaa;
    margin-bottom: 8px;
    min-width: 8%;
    padding: 4px 8px;
}
.main-screen-items{
    color: #444444;
    padding: 4px 8px;
    margin-right: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
    transition: .2s ease-in-out;
}
.main-screen-items:hover{
    background-color: rgba(40, 42, 49, 0.12);
}
.main-screen-items-on{
    color: #ffffff;
    background-color: #282a31;
    border-radius: 4px;
    padding: 4px 8px;
    margin-right: 16px;
    margin-bottom: 8px;
}
.left-main-list-all{
    width: 100%;
    margin-top: 24px;
}
.main-list-single-now-text{
    margin-bottom: 16px;
    font-size: 12px;
    color: #777777;
}
.left-main-list-single{
    background-color: #f8f8f8;
    
    transition: .2s ease-in-out;
    padding: 12px 0;
}
.left-main-list-single:nth-child(odd){
    background-color: #eeeeee;
}
.left-main-list-single:hover{
    background-color: #dddddd;
}
.left-main-list-single:first-child{
    border-radius: 4px 4px 0 0;
}
.left-main-list-single:last-child{
    border-radius: 0 0 4px 4px;
}
.main-list-single-view{
    width: 12%;
    
    font-size: 15px;
    color: #777777;
}
.main-list-single-content{
    width: 72%;
    
    padding-left: 24px;
    flex-direction: column;
}
.main-list-single-content-title{
    font-size: 14px;
    color: #555555;
    transition: .2s ease-in-out;
}
.main-list-single-content-title:hover{
    color: #282a31;
    text-decoration: underline;
}
.main-list-single-content-info-all{
    margin-top: 12px;
    flex-wrap: wrap;
}
.main-list-single-content-info-tags{
    padding: 4px 8px;
    background: #e8e8e8;
    color: #999999;
    font-size: 12px;
    border-radius: 16px;
    margin-right: 8px;
}
.main-list-single-content-info-author{
    font-size: 12px;
    color: #999999;
    transition: .2s ease-in-out;
    margin-right: 20px;
}
.main-list-single-content-info-author:hover{
    color: #282a31;
    
}
.main-list-single-content-info-time{
    font-size: 12px;
    color: #999999;
    transition: .2s ease-in-out;
    margin-right: 20px;
}
.left-main-list-page-all{
    margin-top: 16px;
    padding: 16px 0;
    flex-wrap: wrap;
}
.main-list-page-single{
    font-size: 12px;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #999999;
    transition: .3s ease-in-out;
    margin-bottom: 8px;
}
.main-list-page-on{
    color: #282a31;
    border: 1px solid #282a31;
    background-color: rgba(40, 42, 49, 0.2);
}
.main-list-page-single:hover{
    color: #282a31;
    border: 1px solid #282a31;
    background-color: rgba(40, 42, 49, 0.2);
}

.right-main-content{
    padding: 16px; 
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 8px 12px rgba(0, 0, 0, .04);
}
.recommend-content-all{
    width: 100%;
}
.recommend-content-title{
    font-size: 15px;
    font-weight: 400;
    color: #222222;

    margin-bottom: 12px;
}
.recommend-content{
    width: 100%;
}
.recommend-content-single{
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding-bottom: 8px;
    padding-left: 12px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 12px;
    font-size: 12px;
    color: #777777;
    line-height: 20px;
    position: relative;
    transition: .2s ease-in-out;
}
.recommend-content-single::before{
    content: '';
    background-color: #777777;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 8px;
    left: 0;
    transition: .2s ease-in-out;
}
.recommend-content-single:hover{
    color: #282a31;
}
.recommend-content-single:hover::before{
    background-color: #282a31;
}

@media screen and (max-width: 1200px){
    
}

@media screen and (max-width: 640px){
    .main-content{
        width: 100%;
    }
    .left-main-content-all{
        width: 100%;
    }
    .right-main-content-all .right-main-content{
        width: 100%;
    }
    .right-main-content-all{
        display: none;
    }
}
@media screen and (max-width: 360px){
    .main-content{
        width: 360px;
    }
    .left-main-content-all{
        width: 360px;
    }
    .right-main-content-all .right-main-content{
        width: 100%;
    }
    .right-main-content-all{
        display: none;
    }
}