@charset "utf-8";

/****************************************************************************************************************************************
list-table
*****************************************************************************************************************************************/
.scroll-wrap {position: relative;}

.list-table {position: relative; margin:10px 0; width: 100%; border: 1px solid #c2c2c2; border-bottom: none;}
.list-table thead tr {background: #fff6e8}
.list-table tbody tr {background: #fff;}

.list-table th,
.list-table td {padding:10px 10px; text-align: center; font-weight: 600; color:#000; border-bottom: 1px solid #c2c2c2;}
.list-table td.td-left {text-align: left;}
.list-table td.td-cursor {cursor: pointer;}
.list-table td > p {width: 500px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.answer-ing {color:var(--red-color)}
.answer-ok {color:var(--secondary)}
.message-notCheck {color:#ff0000;}
.message-check {color:#555;}

@media (hover: hover) and (pointer: fine) {
    .list-table tbody tr:hover {background: #f5f5f5;}
}

/****************************************************************************************************************************************
view-table
*****************************************************************************************************************************************/
.view-table {position: relative; width: 100%; border: 1px solid #c2c2c2; border-bottom: none;}
.view-table thead tr {background: #fff6e8}
.view-table tbody tr {background: #fff;}

.view-table th,
.view-table td {padding:10px 10px; text-align: center; font-weight: 600; color:#000; border-bottom: 1px solid #c2c2c2;}
.view-table td {padding:20px 10px;}

/****************************************************************************************************************************************
write-table
*****************************************************************************************************************************************/
.write-table {position: relative; width: 100%; border: 1px solid #c2c2c2; border-bottom: none;}
.write-table th,
.write-table td {padding:10px 10px; border-bottom: 1px solid #c2c2c2;}
.write-table th {width: 150px; text-align: center; color:#000; background: #fff6e8; border-right: 1px solid #c2c2c2;}
.write-table td {width: calc(100% - 150px); text-align: left; background:#fff;}
.write-table td > input {margin:0 auto; padding:10px 10px; width: 100%; text-align: left; color: #000; background:#fff; border:1px#555 solid;}
.write-table td > input::placeholder {color: #969696;}
.write-table td > textarea {margin:0 auto; padding:10px 10px; width: 100%; height: 250px; text-align: left; color: #000; background: #fff; border:1px#555 solid;}
.write-table td > textarea::placeholder {color: #969696;}

/* ul.moneyBtns */
ul.moneyBtns {position: relative; margin:15px auto 0 auto; padding:0; width: 100%; display: flex; flex-wrap: wrap; gap:5px; justify-content: center; align-items: center;}
ul.moneyBtns > li {margin:0 auto; padding:10px 0; width: calc(100% / 6 - 5px); text-align: center; font-weight: 600; color:#000; background: #eee6d9; cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    ul.moneyBtns > li:hover {background:#f4eee6;}
}

/****************************************************************************************************************************************
게시판 가이드
*****************************************************************************************************************************************/
.bo-guide {position: relative; margin-bottom:20px; padding:20px 20px; width: 100%; text-align: center; background:#fff; border: 1px solid #ddd;}
.guide-tit {position: relative; margin-bottom:15px; width: 100%; display: flex; justify-content: flex-start; align-items: center; font-size:16px; font-weight: 600; color:var(--orange-color);}
.guide-tit > svg {margin:0 5px 0 0; font-size: 20px;}

ul.guide-list {position: relative; margin:0; padding:0; width:100%; text-align: left;}
ul.guide-list > li {list-style:disc; display: list-item; margin-left:40px; padding:0; line-height: 1.8; font-weight: 500; color:var(--color);}
.account-btn {position: relative; margin:0 5px; padding:5px 20px; font-weight: 600; color:#fff; background:#c25151;}

@media (hover: hover) and (pointer: fine) {
    .account-btn:hover {background: #c25151aa;}
}

/****************************************************************************************************************************************
게시판 버튼
*****************************************************************************************************************************************/
.board-btn {position: relative; margin:30px auto 50px auto; padding:0; width: 100%; display: flex; gap:5px; justify-content: center; align-items: center;}
.board-btn > button {margin:0; padding:15px 20px; width: 140px; text-align: center;font-size: 16px; font-weight: 600; color: #fff; border-radius: 5px;}
.board-btn > button:nth-child(1) {background: #6ca7d1;}
.board-btn > button:nth-child(2) {background: #c25151;}
.board-btn > button:nth-child(3) {background: var(--darkOrange-color);}

@media (hover: hover) and (pointer: fine) {
    .board-btn > button:hover {filter: brightness(120%);}
}


/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:992px) {
    .bo-tit {margin:0 auto 15px auto; padding:0 15px; height: 80px;}
    .bo-tit > h3 {line-height: 80px;} 
    .bo-tit > img {margin-top:10px; height: 70px;}

    /* list-table */
    .list-table td > p {width: 250px;}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) {
    /* list-table */
    .scroll-wrap {overflow-x: auto;}
    .list-table {margin-bottom:10px; min-width: 767px;}

    /* write-table */
    .write-table th {width: 70px;}
    .write-table td {width: calc(100% - 70px);}

    ul.guide-list > li {margin-left: 20px;}
    .account-btn {display: block; margin:10px auto; width: 100%;}

    /* moneyBtns  */
    ul.moneyBtns > li {width: calc(100% / 3 - 5px);}

    /* 게시판 버튼 */
    .board-btn > button {padding:10px 15px; width: 120px; font-size: 15px;}
}/* 미디어쿼리문 끝 */