@charset "utf-8";
/*
 * Name     : board.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-05-26
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. COMMON
    02. LIST
    03. MEDIA QUERIES
---------------------------------------------------
*/

/* ------------------------------
 * COMMON
------------------------------ */
/* section */
.board {padding-top: 160px; padding-bottom: 160px}
.board .board-header {margin-bottom: 3rem}

/* search */
.search-group {margin-top: 56px}
.search-group .search-items {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center}
.search-group .search-items .search-category {width: 140px}
.search-group .search-items .input-group, .search-group .search-items .form-input, .search-group .search-items .button {height: 100%}

/* write page */
.check-option-list {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap}
.check-option-list li {margin-right: 16px}
.agreement-box {font-size: 14px; font-weight: 500; color: var(--grey-500); letter-spacing: -0.02em; line-height: 1.55; padding: 1.25rem; height: 10rem; border: 1px solid #ced4da; border-radius: 0.625rem; overflow-y: auto}
.agreement-box p + p {margin-top: 1rem}

/* view page */
.view-top-buttons {padding-top: 2rem; padding-bottom: 2rem}
.view-container .header {padding-bottom: 16px; border-bottom: 3px solid var(--grey-700)}
.view-container .header h3 {font-size: 1.625rem; font-weight: 700; color: var(--black); letter-spacing: -0.02em}
.view-container .header h3 small {display: inline-flex; width: 18px; height: 18px; font-size: 13px; font-weight: 700; color: #f59f00; margin-left: 6px; border-radius: 50%; background-color: #fff3bf; justify-content: center; align-items: center; vertical-align: super}
.view-container .header .date {font-size: 14px; color: var(--grey-500)}
.view-container .content {font-size: 15px; line-height: 1.7}
.view-container .content .contact-info {margin-bottom: 24px}
.view-container .content .contact-info ul > li {font-size: 0; padding: 4px 0}
.view-container .content .contact-info ul > li > b, .view-container .content .contact-info ul > li > p {display: inline-flex; font-size: 15px; line-height: 1.6; align-items: flex-start}
.view-container .content .contact-info ul > li > b {font-weight: 700; color: var(--grey-800); width: 80px}
.view-container .content .contact-info ul > li > p {color: var(--grey-500); max-width: calc(100% - 80px)}
/* #view-image {margin-bottom: 20px} */
.view-container .footer {margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #f1f3f5}
.view-container .footer .article-control > li {font-size: 0}
.view-container .footer .article-control > li + li {margin-top: 4px}
.view-container .footer .article-control > li > b, .view-container .footer .article-control > li > p {display: inline-block; font-size: 14px; vertical-align: top}
.view-container .footer .article-control > li > b {width: 72px; font-weight: normal; color: var(--grey-500)}
.view-container .footer .article-control > li > p {width: calc(100% - 72px)}
.view-container .footer .article-control > li > p a {display: inline-block; font-weight: 500; color: var(--grey-800); white-space: nowrap; text-overflow: ellipsis; max-width: 100%; overflow: hidden}

/* pagination */

/* ------------------------------
 * LIST
------------------------------ */
.board .list-article-wrapper > ul > li {position: relative}
.board .list-article-wrapper > ul > li .px-form-check {position: absolute; top: 2px; left: 0; z-index: 5}
.board .list-article-wrapper > ul > li > a {display: block; padding: 2rem 0; border-bottom: 1px solid #f1f3f5}
.board .list-article-wrapper > ul > li > a.reply-article {background-color: var(--grey-50)}
.board .list-article-wrapper > ul > li > a .article-header {display: -ms-flexbox; display: flex; margin-bottom: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center}
.board .list-article-wrapper > ul > li > a .article-header .category {font-size: 13px; font-weight: 500; color: var(--grey-600); padding: 4px 8px; border-radius: 8px; background-color: var(--grey-100)}
.board .list-article-wrapper > ul > li > a .article-header .category.complete {color: var(--white); background-color: var(--secondary)}
.board .list-article-wrapper > ul > li > a .article-header .date {font-size: 14px; color: var(--grey-400); margin-left: 8px}
.board .list-article-wrapper > ul > li > a .article-header .date + .date::before {content: '|'; color: var(--grey-300); margin-right: 8px}
.board .list-article-wrapper > ul > li > a .article-content .subject {display: inline-block; font-size: 18px; color: var(--grey-800); letter-spacing: -0.02em; transition: opacity .15s ease-in-out}
.board .list-article-wrapper > ul > li > a .article-content .badge-new {display: inline-flex; width: 18px; height: 18px; font-size: 13px; font-weight: 700; color: #f59f00; margin-left: 6px; border-radius: 50%; background-color: #fff3bf; justify-content: center; align-items: center; vertical-align: top}
.board .list-article-wrapper > ul > li > a:hover .article-content .subject {opacity: .6}

/* ------------------------------
 * MEDIA QUERIES
------------------------------ */
@media (max-width: 767px) {
    .board {padding-top: 120px; padding-bottom: 80px}
}

@media (max-width: 575px) {
    .search-group .search-items .search-category {width: 110px}
    .search-group .search-items .form-input {width: 150px}

    .view-container .header h3 {margin-bottom: 4px}
}