@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) );
}
.basic-post-list1 .post-list { 
    --border-color1:#b5b5b5;
    list-style:none; padding:0px;
    font-size: 1.6em;
    border-top: 1px solid var(--border-color1);
    border-bottom: 1px solid var(--border-color1);
}
.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 3.6em; display: grid; grid-template-columns: auto 1fr auto; 
        gap:clamp(1.6em,calc(50 / 1920 * 100vw),50px); 
        align-items:center;
    }
    .basic-post-list1 .post-list li.item-first > a .dateBox {
        text-align: center; color: #000;
        display: grid; align-content: center;
    }
    .basic-post-list1 .post-list li.item-first > a .dateBox .day { 
        font-size: 3.125em; font-weight: bold; margin-bottom: 0.4em;
    }
    .basic-post-list1 .post-list li.item-first > a .dateBox .Ym { 
        font-size: 1.25em;
    }
    .basic-post-list1 .post-list li.item-first > a .textBox { 
        overflow: hidden; padding-left: 1em;
    }
    .basic-post-list1 .post-list li.item-first > a .textBox .titleV2 {
        font-size: 1.25em; height: 1em; line-height: 1em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    } 
    .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 { 
        margin-top: 1.5em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        color: #626262; line-height: 1.5;
    }
    .basic-post-list1 .post-list li.item-first > a .img {
        width: calc(var(--width) * 1px);
        height: calc(var(--height) * 1px);
        overflow: hidden; position: relative;
    }
    .basic-post-list1 .post-list li.item-first > a .img img {
        position: absolute; left: 50%; top: 50%;
        transform:translate(-50%,-50%); width: 100%; height: 100%;
    }
    .basic-post-list1 .post-list li.item-first > a .img.no-img img {
        height: auto;
    }
    .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;
    }
}

/* 반응형 */
@media (max-width:991px) {
    .basic-post-list1 .post-list li.item-first > a {
        grid-template-columns: 1fr auto; padding: 2em 1.5em;
    }
    .basic-post-list1 .post-list li.item-first > a .dateBox {
        display: none;
    }
}
@media (max-width:580px) {
    .basic-post-list1 .post-list li.item-first > a {
        grid-template-columns: 1fr;
    }
    .basic-post-list1 .post-list li.item-first > a .img {
        order:1; justify-self: center;
    }
    .basic-post-list1 .post-list li.item-first > a .textBox {
        order:2; padding-left: 0; text-align: center;
    }
}