@charset "utf-8";

/****************************************************************************************************************************************
게시판 및 고객센터 시작
*****************************************************************************************************************************************/
/* bo-tit */
.bo-tit {margin:0 auto; padding:15px 0; width: 100%; text-align: left; font-size: 16px; font-weight: 500; color:var(--gray-color);}

/* list-tb */
.list-tb {margin:0 0 30px 0; padding:0; width: 100%;}
.list-tb tbody tr {cursor: pointer;}
.list-tb th,
.list-tb td {padding:10px 5px; text-align: center; font-weight:600;}
.list-tb th {color:var(--white-color); background:var(--th-bg);}
.list-tb td {color:var(--secondary); border-bottom: 1px var(--border3-color) solid;}
.list-tb td.td_cursor {cursor: pointer;}
.list-tb td.td_cursor > p {min-width: 100%; width: 400px; font-weight: 600; text-align:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.answer-finish {font-weight: 600; color:var(--secondary);}
.answer-ing {font-weight: 600; color:var(--red-color);}

@media (hover: hover) and (pointer: fine) {
    .list-tb tbody tr:hover {background: var(--bg-layer3);}
}

/* view-tb */
.view-tb {margin:0 0 30px 0; padding:0; width: 100%;}
.view-tb th,
.view-tb td {padding:10px 5px; text-align: center; font-weight:600;}
.view-tb th {color:var(--white-color); background:var(--th-bg);}
.view-tb td {border-bottom: 1px var(--border3-color) solid;}

/* write-tb */
.write-tb {margin:0 0 30px 0; padding:0; width: 100%; border-top:2px var(--red-bg) solid;}
.write-tb th,
.write-tb td {padding:10px 10px; border-bottom: 1px var(--border3-color) solid;}
.write-tb th {width: 150px; text-align: center; color:var(--black-color); background:var(--bg-layer3);}
.write-tb td {width: calc(100% - 150px); text-align: left;}
.write-tb td > input {margin:0 auto; padding:8px 10px; width: 100%; text-align: left; color:var(--color); background:var(--bg-layer3);}
.write-tb td > textarea {margin:0 auto; padding:8px 10px; width: 100%; height: 150px; text-align: left; color:var(--color); background:var(--bg-layer3); border: none;}

/* board-btn  */
.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:10px 20px; width: 130px; text-align: center; font-weight: 600; color:var(--white-color); border-radius: 5px;}
.board-btn > button:nth-child(1) {background:var(--red-bg);}
.board-btn > button:nth-child(2) {background:var(--blue-bg);}
.board-btn > button:nth-child(3) {background:var(--green-bg);}

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

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:992px) { 
    /* list */
	.list-tb td.td_cursor > p {width: 300px;}
}/* 미디어쿼리문 끝 */

@media (max-width:767px) { 
    /* list */
	.bo-mo-hid {display:none;}
}/* 미디어쿼리문 끝 */

@media (max-width:639px) {
    /* list */
    .list-tb th {font-size: 12px;}
    .list-tb td {font-size: 13px;} 
	.list-tb td.td_cursor > p {width: 150px;}

    /* view */
    .view-tb th,
    .view-tb td {font-size: 13px;} 

    /* write-tb */
    .write-tb th {padding: 10px 5px; width: 20%; font-size: 12px;} 
    .write-tb td {padding: 10px 5px; width: 80%; font-size: 13px;} 
    .write-tb td > input, 
    .write-tb td > textarea {font-size: 13px;}

    /* board-btn */
    .board-btn > button {padding: 10px 0; width: 100%; font-size: 13px;}
}/* 미디어쿼리문 끝 */