/* list */
.bbs-list {}
.bbs-list .wrap {}
.bbs-list .bbs-post {
    display:flex; align-items: center; color:#777; border-bottom:1px solid #ccc; padding:30px 0;
    background:#fff; transition:all 300ms;
}
.bbs-list .bbs-post > div {}
.bbs-list .bbs-post .date {flex:0 0 auto; width:160px; text-align:center;}
.bbs-list .bbs-post .subject {flex:1;}
.bbs-list .bbs-post .subject div {word-break: keep-all;}
.bbs-list .bbs-post .arr {flex:0 0 auto; width:140px; display:flex; justify-content: center; align-items: center;}
.bbs-list .bbs-post .arr i {
    width:45px; height:45px; display:flex; justify-content: center; align-items: center;
    border-radius:100%; transition:all 300ms;
}
.bbs-list .bbs-post:hover {background:#fbfbfb;}
.bbs-list .bbs-post:hover .arr i {background:#000; color:#fff;}

@media(max-width:768px){
    .bbs-list .bbs-post .date {width:100px;}
    .bbs-list .bbs-post .arr {display:none;}
}
@media(max-width:425px){
    .bbs-list .bbs-post {flex-wrap:wrap;}
    .bbs-list .bbs-post .date {
        width:100%; display:flex; flex-direction: row-reverse; justify-content: flex-end; margin-bottom:10px;
    }
    .bbs-list .bbs-post .date > div {font-size:18px;}
    .bbs-list .bbs-post .date > div:first-child {margin-left:4px; position:relative;}
    .bbs-list .bbs-post .date > div:first-child:before {content:'.'; width:1px; position:absolute; left:-4px;}
    .bbs-list .bbs-post .arr {display:none;}

}