/* 이벤트 */

.event_wrap, .view-board {
    margin-top: 2rem;
}

.event_list {
    display: flex;
    flex-wrap: wrap;
}

.event_list li{
    width: calc((100% - 4rem) / 3);
    border-radius: 12px;
    margin-right: 2rem;
    margin-bottom: 40px;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #ddd;
    padding: 5px;
    box-shadow: 2px 3px 5px #f1f1f1;
    transition: 0.2s all linear;
}

.event_list li:hover {
    border:1px solid var(--color-sub-red);
    transition:0.2s all linear;
}

.event_list li:nth-child(3n){
    margin-right: 0;
}

.event_list .img_box{
    padding-bottom: 64%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #ddd;
}

.event_list .img_box img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.event_list .text_box{
    padding: 24px 14px;
}

.event_list .event_title{
    font-size: 18px;
    margin-bottom: 1rem;
    font-weight: 600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    transition:0.2s all linear;
}

.event_list li:hover .event_title {
    color: var(--color-sub-red);
    transition:0.2s all linear;
}

.event_list .date{
    font-size: 16px;
    color: #888;
    transition:0.2s all linear;
}

.event_list li:hover .date {
    color: #333;
    transition:0.2s all linear;
}

/* 이벤트 상세 */
.view-board .board-title-wrap .board-title-info {
    padding-bottom: 0;
    border-bottom: none;
}

.view-board .board-title-wrap .board-title-info .board-title {
    margin-top: 0;
    font-weight: 600;
}

.view-board .board-member-wrap .date:before {
    display: none;
}

.view-board .board-member-wrap .date {
    font-size: 1.125rem;
    color: #666;
}

.view-board .board-member-wrap .end {
    background: var(--color-main-red);
    color: #fff;
    padding: 3px 1.5rem;
    border-radius: 5px 2rem 2rem;
}

.view-board .board-member-wrap .writer img {
    width: 22px;
    margin-right:0.625rem;
}


/* 반응형 */
@media(max-width:1360px){

}

@media(max-width:1200px){

}

@media(max-width:1024px){
    /* 이벤트 */
    .event_list li {
        width: calc((100% - 2rem) / 3);
        margin-right: 1rem;
        margin-bottom: 1rem;
    }
    .event_list .event_title {
        font-size: 17px;
    }
    .event_list .date {
        font-size: inherit;
    }

    /* 이벤트 상세 */
    .view-board .board-member-wrap .writer img {
        width: 20px;
        vertical-align: middle;
        margin-top: -3px;
    }
    .view-board .board-member-wrap .date {
        font-size: 17px;
        padding-left: 0;
    }
}

@media(max-width:970px){

}

@media(max-width:768px){

    /* 이벤트 */
    .event_list li {
        width: calc((100% - 1.5rem) / 2);
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .event_list li:nth-child(3n) {
        margin-right: 1.5rem;
    }
    .event_list li:nth-child(2n) {
        margin-right: 0;
    }

    /* 이벤트 상세 */
    .view-board .board-title-wrap .board-title-info {
        margin-bottom: 0.5rem;
    }
    .view-board .board-member-wrap .end {
        padding: 2px 1rem;
        font-size: 13px;
    }
    .view-board .board-member-wrap .writer img {
        width: 18px;
    }
    .view-board .board-member-wrap .date {
        font-size: 15px;
    }

}

@media(max-width:640px){
    /* 이벤트 */
    .event_list li {
        width: calc((100% - 1rem) / 2);
        margin-right: 1rem;
        margin-bottom: 1rem;
    }
    .event_list li:nth-child(3n) {
        margin-right: 1rem;
    }
    .event_list .event_title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    .event_list .text_box {
        padding: 1.25rem 1rem;
    }

    /* 이벤트 상세 */


}


@media(max-width:480px){
    /* 이벤트 */
    .event_list li {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .event_list li:nth-child(3n) {
        margin-right: 0;
    }
    .empty_box img {
        width: 60px;
    }

}

@media(max-width:360px){

}