@charset "utf-8";

.basic-post-list1 {
    --border-color:#dcdcdc;
    --font-size-pc: 10;
    --font-size-mob: 10;
    font-size: min( calc( var(--font-size-mob) / 450 * 100vw ), calc(var(--font-size-pc) * 1px) );
    /* transform:translateY(-4em); */
    position: relative; padding-top: 4em;
}
.basic-post-list1 .more {
    position: absolute; right: 0; top: -4em;
    width: 100%; display: flex; justify-content: end;
}
.basic-post-list1 .more .widget_btn {
    display: inline-block;
    color: var(--basic-border-color);
    font-size: 4.5em; line-height: 0.7;
}
.basic-post-list1 .post-list { 
    list-style:none; padding:0px;
    font-size: 1.6em;
}
.basic-post-list1 .post-list li { padding:0px; margin:0px; }
.basic-post-list1 .post-list li b { letter-spacing:-1px; padding-right:1px; }
.basic-post-list1 .post-list li .name { letter-spacing:-1px; color:#888; padding-left:4px; padding-right:1px;}
.basic-post-list1 .post-list .txt-normal { letter-spacing:0; }
.basic-post-list1 .post-none { padding:50px 10px; text-align:center; color:#888; }
.basic-post-list1 .wr-text { font-family:dotum; font-size:11px; letter-spacing:-1px; line-height:11px; font-weight:normal; }
.basic-post-list1 .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-list1 .wr-new { width:12px; height:12px; background-image: url('./img/icon_new.gif'); }
.basic-post-list1 .wr-secret { width:12px; height:12px; background-image: url('./img/icon_secret.gif'); }
.basic-post-list1 .wr-video { width:12px; height:12px; background-image: url('./img/icon_video.gif'); }
.basic-post-list1 .wr-image { width:12px; height:12px; background-image: url('./img/icon_image.gif'); }
.basic-post-list1 .wr-file { width:12px; height:12px; background-image: url('./img/icon_file.gif'); }



/* 리스트 첫번째 */
@media all {
    .basic-post-list1 .post-list li.item-first > a {
        border-bottom: 1px solid var(--border-color);
        padding: 2em 0.8em; display: grid; grid-template-columns: auto 1fr; 
        gap:1.6em; align-items:center;
        border-top: 3px solid var(--border-color);
    }
    .basic-post-list1 .post-list li.item-first > a .dateBox {
        background: var(--main-color); width: 5.7em; height: 5.7em;
        text-align: center; color: #fff; border-radius:50%;
        display: grid; align-content: center;
    }
    .basic-post-list1 .post-list li.item-first > a .dateBox .day { 
        font-size: 2.8125em;
    }
    .basic-post-list1 .post-list li.item-first > a .dateBox .Ym { 
        font-size: 1em; margin-top: 0.2em;
    }
    .basic-post-list1 .post-list li.item-first > a .textBox { overflow: hidden; }
    .basic-post-list1 .post-list li.item-first > a .textBox .titleV2 {
        margin: 0.5em 0; font-size: 1.25em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        height: 1em;
    } 
    .basic-post-list1 .post-list li.item-first > a .textBox .titleV2 { 
        font-weight: bold; color: #000; 
    }
    .basic-post-list1 .post-list li.item-first > a .textBox .text { 
        --line-height:1.5;
        --line-clamp:2;
        color: #707070; font-size: 1em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--line-clamp);
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        height: calc(var(--line-height) * var(--line-clamp) * 1em); 
        line-height: var(--line-height);
    }
    .basic-post-list1 .post-list li.item-first > a:hover {
        background: #f1f1f1;
    }
    .basic-post-list1 .post-list li.item-first > a:hover .textBox .text {
        color: #444;
    }
}

/* 리스트 일반 */
.basic-post-list1 .post-list li.basic > a {
    display: grid; grid-template-columns: 2.5fr 1fr;
    align-items: center;
    padding: 0.9em 1em; font-size: 1.125em;
    border-bottom: 1px solid var(--border-color);
}
.basic-post-list1 .post-list li.basic > a .wr_subject {
    padding-left: 0.7em; position: relative; color: #313131;
}
.basic-post-list1 .post-list li.basic > a .wr_subject:before {
    content: '·'; position: absolute; left: 0; top: 0;
    color: var(--main-color);
}
.basic-post-list1 .post-list li.basic > a .dateV1 {
    justify-self: end; color: #535353; font-size: 0.83em;
}
.basic-post-list1 .post-list li.basic > a:hover {
    background: #f1f1f1;
}

/* 반응형 */
@media (max-width:768px) {
    .basic-post-list1 .post-list li.item-first > a {
        gap:1.2em;
    }
    .basic-post-list1 .post-list li.basic > a {
        grid-template-columns: 1fr auto; gap:1em;
    }
}