@charset "utf-8";


#board-v2.listBox { 
    --board-v2-font-size-pc:10;
    --board-v2-font-size-mob:10;
    font-size: min( calc( var(--board-v2-font-size-mob) / 500 * 100vw ), calc(var(--board-v2-font-size-pc) * 1px) );
    display:grid;
    border-top: 1px solid #959595;
}
/* list item1 */
@media all {
    #board-v2.listBox > li {  
        border-bottom: 1px solid #959595;
        padding: 2.3em 5em 3em 5.8em; display: flex; align-items: center;
        gap: 2em;
    }
    #board-v2.listBox > li .box1 {flex: 1;}
    #board-v2.listBox > li .box1 > h5 {
        color: var(--main-color); font-size: max(13px, 1.5em);
        font-weight: bold; margin-bottom: 1em;
    }
    #board-v2.listBox > li .box1 > h3 {
        font-size: max(16px, 1.8em); color: #434343;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden; line-height: 1.4;
        font-weight: bold;
        width: 100%; max-width: 490px; 
        height: 2.9em;
    } 
    #board-v2.listBox > li .box1 > h3 > a {color: inherit;}
    
    #board-v2.listBox > li .box2 {display: flex; align-items: center; gap: 3.5em;}
    #board-v2.listBox > li .box2 .date {
        color: #434343; font-size: max(15px, 1.8em); font-weight: 400;
        white-space: nowrap;
    }
    #board-v2.listBox > li .box2 a {
        border-radius: 50%; width: 3.6em; height: 3.6em;
        background: var(--main-color); line-height: 4em;
        text-align: center; color: #fff; display: block;
    }
    #board-v2.listBox > li .box2 a i {font-size: 14px;}
}

@media (max-width: 680px) {
    #board-v2.listBox > li {flex-direction: column; align-items: start; padding: 2.3em 3em 3em;}
    #board-v2.listBox > li .box2 {align-self: end;}
}