@charset "utf-8";

.basic-post-list .post-list { list-style:none; padding:0px; margin:-2px 0px; line-height:22px; }
.basic-post-list .post-list li { padding:0px; margin:0px; }
.basic-post-list .post-list li b { letter-spacing:-1px; padding-right:1px; }
.basic-post-list .post-list li .name { letter-spacing:-1px; color:#888; padding-left:4px; padding-right:1px;}
.basic-post-list .post-list .txt-normal { letter-spacing:0; }
.basic-post-list .post-none { padding:50px 10px; text-align:center; color:#888; }
.basic-post-list .wr-text { font-family:dotum; font-size:11px; letter-spacing:-1px; line-height:11px; font-weight:normal; }
.basic-post-list .wr-icon { display:inline-block; padding:0px; margin:0px; line-height:12px; vertical-align:middle; background-repeat: no-repeat; background-position: 0px 0px; }
.basic-post-list .wr-new { width:12px; height:12px; background-image: url('./img/icon_new.gif'); }
.basic-post-list .wr-secret { width:12px; height:12px; background-image: url('./img/icon_secret.gif'); }
.basic-post-list .wr-video { width:12px; height:12px; background-image: url('./img/icon_video.gif'); }
.basic-post-list .wr-image { width:12px; height:12px; background-image: url('./img/icon_image.gif'); }
.basic-post-list .wr-file { width:12px; height:12px; background-image: url('./img/icon_file.gif'); }



.post-list_a {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: space-between;  
    align-items: center;
    position: relative;
    padding: 2rem 0 2rem 2rem;
    width: 100%;
   
    /* border-bottom: 1px solid #ccc; */
    &:before{
        content:'';
        display: block;
        position: absolute;
        left: 0; top: 50%; transform: translate(0, -50%);
        width: .4rem; height: .4rem;
        border-radius: 50%;
        background: #ccc;    
        transition: 0.2s;
    }
    &:after{
        content:'';
        display: block;
        position: absolute;
        right:0; bottom: 0;
        width: 200%; height: 1px;
        background: linear-gradient(to right, #ff1e00 50%, #ccc 50%);        
        transition: 0.2s;
    }
    span[class^="pull"] {
        width: 15rem;
        font-size: 1em;
        float: inherit !important;
        text-align: right;
    }
    &:hover{
        &:before{
            background: #ff1e00;
        }    
        &:after{
            right: -20%;
        }
    }
}
.post-list_subject {
    overflow: hidden;
    flex:1;
    display: block;    
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 1.9rem;
    color: #333;
}

@media(width<=768px){
    .post-list_a span[class^="pull"] {
        width: 12rem;
    }
}
@media(width<=576px){    
    .post-list_subject { font-size: 1.6rem;}
    .post-list_a span[class^="pull"] {
        display: none;
    }
}