.event{ background: #fff; }
.event .wrap {
    max-width: 1780px;
    padding: 180px 0;
}
.event .board_wrap {
    max-width: 1440px;
    margin: 0 auto;
}
.event .board_head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.event .board_head .total {
    font-size: 16px;
    line-height: calc(80/16);
    font-weight: 500;
}
.event .board_head .total>span {
    color: #ee88a6;
}
.event .board_head .search_area {
    display: flex;
    align-items: center;
    position: relative;
}
.event .board_head .search_area input {
    background: transparent;
    font-size: 16px;
    color: #000;
    border-radius: 25px;
    border: 1px solid #999;
    max-width: 350px;
    position: relative;
    caret-color: #000;
    padding: 14px 26px;
}
.event .board_head .search_area input::placeholder{ color: #999; }

.event .board_head .search_area button {
    border: none;
    background: transparent;
    position: absolute;
    right: 26px;
    padding: 0;
    cursor: pointer;
}
.event .board_head .search_area button i { font-size: 20px; }
.event .board_head .search_area button:hover i { color: #ee88a6;}
.event .board_body .num { min-width: 145px; }
.event .board_body .title { flex: 1; width: 100%;  min-width: 0;  display: block;  overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; }
.event .board_body .date { min-width: 140px; text-align: center; }
.event .board_body .view { min-width: 145px; text-align: center; }
.event .board_body ul { width: 100%; }
.event .board_body ul>li.head {
    display: flex;
    padding: 26px 60px;
    box-sizing: border-box;
    background: #ee88a6;
    color: #fff;
    border-radius: 33px;
    font-size: 16px;
    font-weight: 600;
}
.event .board_body ul>li.head .title { text-align: center; }
.event .board_body ul li>a {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    box-sizing: border-box;
    padding: 35px 60px;
}
.event .board_body ul li.noti > a .num{ color: #ee88a6; }
.event .board_body ul li.noti > a .title{ color: #ee88a6; }
/* .event .board_body ul li>a .num.noti { color: #ee88a6; } */
.event .board_body ul li>a .title { width: 100%; font-size: 20px; }
.event .board_body ul li>a .title br {display: none;}
/* .event .board_body ul li>a .title.noti { color: #ee88a6; } */
.event .board_body ul li+li:not(:last-child) { border-bottom: 1px solid #00000033; }
.event .board_body ul li:last-child { border-bottom: 2px solid #000; }

.event .board_body ul li:hover a{ background-color: #f0f0f0; }


/* archive 아카이빙 */
.archive{ background: #fff; }
.archive .wrap { padding: 180px 0;}
.archive .board_wrap { margin: 0 auto; }
.archive .board_wrap ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 80px 25px;
}
.archive .board_wrap ul li { width: calc((100% - 75px) / 4); }
.archive .board_wrap ul li a{ display: block; width: 100%; height: 100%; }
.archive .board_wrap ul li .img_area {
    width: 100%; position: relative;
    border-radius: 15px;
    overflow: hidden;
}
.archive .board_wrap ul li .img_area::after{ display: block; content: '';  padding-top: calc(480 / 337 * 100%); }
.archive .board_wrap ul li .img_area img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.archive .board_wrap ul li .txt_area { margin-top: 30px; }
.archive .board_wrap ul li .txt_area p {
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 600;
    min-width: 0;  display: block;  overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;
}
.archive .board_wrap ul li .txt_area span { font-size: 16px; font-weight: 500; }


/* view  */
/* .view{ background: #fff; } */
.viewpage{ background-color: #fff; }

.viewpage .view_wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 180px 0;
}
.viewpage .tit_area {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.viewpage .tit_area h3 { font-size: 48px; font-weight: 600; text-align: center; line-height: 1.3; word-break: keep-all;}
.viewpage .tit_area span { font-size: 16px; }
.viewpage .view_cont {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 20px 0;
    min-height: 500px;
}
.viewpage .post_wrap { margin: 40px 0; }
.viewpage .post_wrap ul li {
    display: flex;
    align-items: center;
    padding: 30px 0;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
}
.viewpage .post_wrap ul li p{
    width: 100%; min-width: 0;  display: block;  overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;
}
.viewpage .post_wrap ul li { border-top: 1px solid #d4c9b1; color: #7c7c7c; }
.viewpage .post_wrap ul li i { padding-right: 10px; }
.viewpage .post_wrap ul li span { padding-right: 8px; }
.viewpage .post_wrap ul li.next:hover,
.viewpage .post_wrap ul li.prev:hover { color: #ee88a6; }
.viewpage .post_wrap ul li.prev { border-bottom: 1px solid #d4c9b1; }
.viewpage .btn_area { display: flex; justify-content: center; }
.viewpage .btn_area a {
    width: 160px;
    padding: 22px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    background: #ee88a6;
    color: #fff;
    font-size: 18px;
    transition: background .3s ease-in;
}
.viewpage .btn_area a:hover{ background: #555; } 

@media screen and (max-width: 1600px) {
    .event .board_body ul li>a .title {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
@media screen and (max-width: 1024px) {
    .sub h3 { font-size: 60px; }
    .sub .category { line-height: 1; margin-bottom: 20px;}

    .event .board_body ul>li.head { padding: 20px 60px; }
    .event .board_body ul li>a { font-weight: 500; } 
    .event .board_body .num { min-width: 100px; }
    .event .board_body .view { min-width: 100px; }

    .archive .board_wrap ul { gap: 40px 25px; }
    .archive .board_wrap ul li { width: calc((100% - 50px) / 3);}

    .viewpage .tit_area { gap: 20px; margin-bottom: 56px; }
    .viewpage .tit_area h3 { font-size: 42px; }
    .viewpage .btn_area a {
        font-size: 16px;
        gap: 20px;
        padding: 20px 0;
    }
}
@media screen and (max-width: 820px) {
    .evnet .wrap{ padding: 140px 0 100px; }
    .event .board_head .search_area input { max-width: 180px; }
    .event .board_body ul li>a { font-size: 15px; }
    .event .board_body ul li>a .title { font-size: 16px; }
    .event .board_body{ overflow-x: auto; -webkit-oveflow-scrolling: touch; }
    .event .board_body ul{ min-width: 700px; }

    .archive .wrap{ padding: 140px 0 100px; }
    .archive .board_wrap ul li { width: calc((100% - 25px) / 2);}
    .archive .board_wrap ul li .txt_area { margin-top: 22px; }
    .archive .board_wrap ul li .txt_area p { font-size: 22px; margin-bottom: 10px; }
    .archive .board_wrap ul li .txt_area span { font-size: 14px; }

    .viewpage .view_wrap{ padding: 140px 0 100px; }
    .viewpage .tit_area { gap: 12px; }
    .viewpage .tit_area h3 { font-size: 36px; }
    .viewpage .post_wrap ul li { font-size: 16px; }
}
@media screen and (max-width: 500px) {
    .sub h3 { font-size: 50px; }
    .sub .category { margin-bottom: 10px; }
    
    .event .board_body{ overflow-x: auto; -webkit-oveflow-scrolling: touch; }
    .event .board_body ul{ min-width: 700px; }

    .archive .board_wrap ul{ gap: 24px 18px; }
    .archive .board_wrap ul li { width: calc((100% - 18px) / 2); }

    .viewpage .tit_area h3 { font-size: 28px; } 
    .viewpage .tit_area span { font-size: 14px; }
    .viewpage .post_wrap ul li { font-size: 14px; padding: 25px 0; }
    .viewpage .btn_area a {
        font-size: 14px;
        gap: 10px;
        padding: 16px 0;
        max-width: 146px;
    }
}
@media screen and (max-width: 360px){
    .evnet .wrap{ padding: 120px 0 70px; }
    .event .board_head{ flex-direction: column-reverse; align-items: flex-start; }
    .event .board_head .search_area{ width: 100%; }
    .event .board_head .search_area input{ width: 100%; max-width: unset; }

    .archive .wrap{ padding: 120px 0 70px; }
    .archive .board_wrap ul li{ width: 100%; }

    .viewpage .view_wrap{ padding: 120px 0 70px; }
}