@charset "utf-8";

.img-thumbnail { max-width: 100%; height: auto; }

/* 게시판 검색창 */
.searchBox { text-align: right; }
.searchBox select { display: inline-block; width: 88px; height: 28px; line-height: 28px; box-sizing: border-box; vertical-align: middle; border: 1px solid #dedede;}
.searchBox input { display: inline-block; height: 28px; line-height: 28px; box-sizing: border-box; vertical-align: middle; border: 1px solid #dedede;}
.searchBox input[type=button] { background: #99173e; font-size: 0.75em; width: 40px; text-align: center; border: none; color: #fff; cursor: pointer; }

/* 게시판 페이지상태 */
.pageState { margin-top: -6px; font-size: 0.813em; margin-bottom: 5px; }
.pageState span { font-weight: 600; }


/* BOARD LIST */
.boardList { width: 100%; border-top: 3px solid #99173e; }
.boardList .post { padding: 15px 10px; box-sizing: border-box; display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; }
/*.boardList .post:hover { background: #f7fbff; }*/

.boardList .postNum { display: block; width: 7%; text-align: center; color: #767676; font-size: 0.875em; }
.boardList .postWrap { width: 70%; box-sizing: border-box; padding: 0 10px; }
.boardList .postTitle { font-size: 1em; margin-bottom: 7px; }
.boardList .postTitle a:hover { text-decoration: underline; color: #99173e; }
.boardList .postInfo { display: flex; font-size: 0.75em; color: #767676; }
.boardList .postInfo li::after { content: '|'; padding-left: 10px; margin-right: 10px; }
.boardList .postInfo li:last-child::after { display: none; }
.boardList .postInfo strong { font-weight: 400; padding-left: 3px;}

.boardList .postName { width: 23%; text-align: right; align-self: center; font-size: 0.925em; }

.boardList .pwdWin { position:absolute; left:350px; border:solid 2px #99173e; padding:6px 8px 8px 8px; background:#fff; display:none; }
.boardList .pwdWin input { height: 25px; border: 1px solid #ccc; box-sizing: border-box; }
.boardList .pwdWin button { padding: 5px 15px; font-size: 0.813em; border: 1px solid #dcdcdc; border-radius: 2px; background: #efefef; }
.boardList .pwdWin button:hover { background: #dde8f2; }

.boardList .staticDate { width: 15%; box-sizing: border-box; padding: 0 10px; }
.boardList .staticCnt { width: 5%; text-align: center; font-size: 0.925em; }
.boardList .staticBar { width: 73%; font-size: 0.925em; }
 
#progress {
    appearance: none;
}
#progress::-webkit-progress-bar {
    background:#f0f0f0;
    border-radius:10px;
    box-shadow: inset 3px 3px 10px #ccc;
}
#progress::-webkit-progress-value {
    border-radius:10px;
    background: #1D976C;
    background: -webkit-linear-gradient(to right, #93F9B9, #1D976C);
    background: linear-gradient(to right, #93F9B9, #1D976C);

}

/* 썸네일형 게시판 */
.thumBoardList { width: 100%; border-top: 3px solid #99173e; display: flex; flex-wrap: wrap; border-bottom: 1px solid #ccc; padding: 20px 0 10px; }
.thumBoardList .post { width: calc(25% - 30px); padding-bottom: 35%; box-sizing: border-box; height: 0; position: relative;  margin: 0 30px 40px 0; border: 1px solid #ccc; }
.thumBoardList .post a { display: block; width: 100%;  position: relative; height: 100%; overflow: hidden; position: absolute; padding: 10px; box-sizing: border-box; }

.thumBoardList figure { width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat;  }

.thumBoardList .postOver { position: absolute; background: #fff;; left: 0; bottom: 0; z-index: 10; width: 100%; height: 100px; display: flex; flex-wrap: wrap; padding: 10px; box-sizing: border-box; justify-content: center; align-content: center; border: 3px solid #b33258; box-sizing: border-box; }
.thumBoardList a:hover .postOver { background: #b33258; color: #fff; }
.thumBoardList .postTitle { font-weight: 500; margin-bottom: 0px; text-align: center; word-break: keep-all; color: #b33258; }
.thumBoardList .postDate { display: block; width: 100%; text-align: center; font-size: 0.875em; color: #b33258; opacity: 0.7; }
.thumBoardList a:hover  .postTitle { color: #fff; }


/* 비디오 게시판 */
.videoBoardList { width: 100%; border-top: 3px solid #99173e; display: flex; flex-wrap: wrap; border-bottom: 1px solid #ccc;  }
.videoBoardList .post { width: 50%; box-sizing: border-box; position: relative; padding: 10px 10px 25px; }

.videoBoardList figure { width: 100%; margin-bottom: 10px;  }
.videoBoardList figure iframe { width: 100%; height: 375px;  }

.videoBoardList .postTitle { font-weight: 500; margin-bottom: 7px; word-break: keep-all; text-align:center; }
.videoBoardList .postDate { display: block; width: 100%; font-size: 0.875em; opacity: 0.7; }



/* 비디오 게시판2 */
.videoBoardList2 { width: 100%; border-top: 3px solid #99173e; display: flex; flex-wrap: wrap; border-bottom: 1px solid #ccc;  }
.videoBoardList2 .post { width: 33%; box-sizing: border-box; position: relative; padding: 10px 10px 25px; }

.videoBoardList2 figure { width: 100%; margin-bottom: 10px;  }
.videoBoardList2 figure iframe { width: 100%; height: 250px;  }

.videoBoardList2 .postTitle { font-weight: 500; margin-bottom: 7px; word-break: keep-all; text-align:center; }
.videoBoardList2 .postDate { display: block; width: 100%; font-size: 0.875em; opacity: 0.7; }


/* 채용 게시판 */
.recrBoard { width: 100%;  display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px 20px; justify-items: center; align-items: center; box-sizing: border-box;  }
.recrBoard .post { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid #ccc; }
.recrBoard a { display: flex;  background: #fff; width: 100%; height: 100%; box-sizing: border-box; border-radius: 8px; }
.recrBoard .post a:hover { background: #87bd15; color: #fff; }
.recrBoard figure { width: 40%; background: #fff; text-align: center; overflow: hidden; box-sizing: border-box; padding: 10px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.recrBoard figure img { max-height: 90px; border-radius: 8px 8px 0 0; }
.recrInfo { width: 40%; padding: 10px; box-sizing: border-box;  }
.recrInfo p { font-size: 1.125em; font-weight: 700;}
.recrInfo span { font-size: 0.8em; }






.pagination { text-align: center; margin: 30px auto 0; clear:both; }

.pagination a {color:#767676; border:solid 1px #dedede; display:inline-block; margin:2px; width:25px; height:25px; text-align:center; font-size:12px; line-height:25px; vertical-align:middle;}
.pagination a.on {color:#ffffff; background:#99173e; border:1px solid #99173e; display:inline-block; margin:2px; width: 25px;  height: 25px; text-align: center; font-size: 12px; line-height: 25px; vertical-align: middle;}
.pagination .prev_g a, .pagination .next_g a {width:25px; height:25px; background:url('../img/pagination_arrow.png') no-repeat;}
.pagination .prev_g a.page_p_end {background-position:0 0;}
.pagination .prev_g a.page_p {background-position:-25px 0;}
.pagination .next_g a.page_n_end {background-position:-75px 0;}
.pagination .next_g a.page_n {background-position:-50px 0;}

.pagination a.M_on { color:#fff; background:#99173e; border:#606060 solid 1px; font-weight:500; }
.pagination a.Arrow { padding:1px 0 1px 0;}

.pagination .pager span {color:#777777; border:solid 1px #dedede; display:inline-block; margin:0 2px; width:25px; height:25px; text-align:center; font-size:12px; line-height:25px; vertical-align:middle; cursor:pointer; }
.pagination .pager span.on {color:#ffffff; background:#555e65; border:1px solid #6c777f; display:inline-block; margin:0 2px; width: 25px;  height: 25px; text-align: center; font-size: 12px; line-height: 25px; vertical-align: middle; cursor:pointer;}


/* 게시판 버튼 */
.boardBtnList { width: 100%; text-align: right; margin-top: 20px; }
.boardBtnList::after { content: ''; display: block; clear: both; float: none; }
.boardBtnList li { display: inline-block; margin-bottom: 5px; }
.boardBtnList li.left { float: left; }
.boardBtnList li a { display: block; padding: 5px 15px; font-size: 0.813em; border: 1px solid #dcdcdc; border-radius: 2px; background: #efefef; }
.boardBtnList li a:hover { background: #dde8f2; }
.boardBtnList li a:hover { background: #dde8f2; }
.boardBtnList li button { display: block; padding: 5px 15px; font-size: 0.813em; border: 1px solid #dcdcdc; border-radius: 2px; background: #efefef; }
.boardBtnList li button:hover { background: #dde8f2; }







/* BOARD VIEW */
.boardView { width: 100%; border-top: 3px solid #99173e; border-bottom: 1px solid #ccc; margin-bottom: 20px;  }

.boardView .postTop { padding: 17px; box-sizing: border-box; border-bottom: 1px solid #ccc; }
.boardView .postTitle { font-size: 1.125em; font-weight: 500; margin-bottom: 7px; color: #222; }
.boardView .postInfo { display: flex; flex-wrap: wrap; font-size: 0.75em; color: #888; }
.boardView .postInfo li::after { content: '|'; padding-left: 10px; margin-right: 10px; }
.boardView .postInfo li:last-child::after { display: none; }
.boardView .postInfo strong { font-weight: 600; padding-left: 3px;}

.boardView .postAttachment { padding: 17px; background: #efefef; border-top: 1px solid #ccc; display: flex;  }
.boardView .postAttachment dt { font-size: 0.75em; width: 62px; line-height: 25px; }
.boardView .postAttachment dd li { margin-top: 5px;}
.boardView .postAttachment dd li:first-child { margin-top: 0;}
.boardView .postAttachment dd span { font-size: 0.875em; text-decoration: underline; margin-right: 10px; }
.boardView .postAttachment dd a { display: inline-block; padding: 3px 7px 3px 23px; border: 1px solid #ccc; font-size: 0.688em; border-radius: 3px; }
.boardView .postAttachment dd a.fileDown { background: #fff url('../img/downIcon.png') no-repeat left 7px center; }
.boardView .postAttachment dd a.filePreview { background: #fff url('../img/previewIcon.png') no-repeat left 7px center; }
.boardView .postCon { padding: 28px 17px; font-size: 0.875em; }


.boardViewList { width: 100%; border-top: 3px solid #333; margin-top: 50px; }
.boardViewList dl { padding: 11px 30px 11px 0; box-sizing: border-box; display: flex; border-bottom: 1px solid #ccc; font-size: 0.875em; align-items: baseline;  word-break: keep-all; }
.boardViewList dl dt { width: 15%; text-align: center; border-right: 1px solid #e4e4e4; font-weight: 500; }
.boardViewList dl dd { width: 85%; box-sizing: border-box; padding-left: 20px; }
.boardViewList dl a:hover { text-decoration: underline; }

/* 댓글 */
.comment { width: 100%; margin-top: 20px; border-top: 1px solid #ccc; }
.comtView dl { display: flex; flex-wrap: wrap; padding: 10px; box-sizing: border-box; border-bottom: 1px solid #ccc; position: relative; font-size: 0.975em; }
.comtView dl dt { font-weight: 500; line-height: 1.5; margin-right: 10px; }
.comtView dl dd.date { font-size: 0.75em; line-height: 1.5; padding: 4px 0 0; color: #666; }
.comtView dl dd.edit { position: absolute; right: 5px; top: 0px;}
.comtView dl dd.edit button { color: transparent; text-indent: -9999px; font-size: 0; display: inline-block; width: 12px; height: 12px;}
.comtView dl dd.edit button.editBtn { background: url('../img/editIcon.png') no-repeat center center; margin-right: 3px; }
.comtView dl dd.edit button.delBtn { background: url('../img/btn_allNavClose.png') no-repeat center center; }
.comtView dl dd:last-child { width: 100%; margin-top: 10px; font-size: 0.875em; }

.comtWrite { width: 100%; margin-top: 10px; }
.comtWrite form { width: 100%; display: block; box-sizing: border-box; padding: 10px; display: flex; flex-wrap: wrap; }
.comtWrite dl { display: flex; flex-wrap: wrap; width: 30%; font-size: 0.875em; }
.comtWrite dl dt label { line-height: 1.8; }
.comtWrite dl dd { margin-left: 10px; }
.comtWrite dl dd input { height: 25px; border: 1px solid #ccc; box-sizing: border-box; }
.comtWrite textarea { width: 100%; height: 80px; border: 1px solid #ccc; box-sizing: border-box; padding: 10px; margin-top: 10px; }
.comtWrite .boardBtnList { margin-top: 10px; }
.comtWrite .req { font-size: 0.813em; color: #E20000; }

.deletebtn { background: #f2f2f2; text-align: center; padding: 30px 5px;margin-bottom: 15px; border-bottom: 1px solid #ccc; }
.deletebtn label { margin-right: 10px;}
.deletebtn input#delPW { height: 25px; border: 1px solid #ccc; box-sizing: border-box; }
.deletebtn button { padding: 2px 15px; font-size: 0.813em; border: 1px solid #222; border-radius: 2px; background: #4b4b4b; margin-left: 5px; color: #fff; }

.editbtn { background: #f2f2f2; padding: 15px 10px;margin-bottom: 15px; border-bottom: 1px solid #ccc; }
.editbtn label { margin-right: 10px;}
.editbtn input { height: 25px; border: 1px solid #ccc; box-sizing: border-box; }
.editbtn textarea { width: 100%; height: 80px; border: 1px solid #ccc; box-sizing: border-box; padding: 10px; margin-top: 10px; }


/* 온라인채용관 VIEW */
.recrBoardView { width: 100%; box-sizing: border-box;  }
.cpnInfo { display: flex; width: 100%; border-top: 3px solid #99173e; border-bottom: 1px solid #ccc; margin-bottom: 20px;  box-sizing: border-box; padding: 0 5px; }
.cpnInfo input { width:100%; height: 30px; border: 1px solid #ccc; box-sizing: border-box; }
.cpnInfo figure { width: 30%; text-align: center; display: flex; justify-content: center; align-items: center; padding: 10px; }
.cpnInfo div { padding: 10px 0 10px 20px; }
.cpnInfo div dl { display: flex; padding: 5px 0; }
.cpnInfo div dl dt { font-weight: 500; width: 80px; margin-right: 10px;}


.cpnInfo2 { width: 100%; border-top: 3px solid #99173e; border-bottom: 1px solid #ccc; margin-bottom: 20px;  box-sizing: border-box; padding: 0 5px; }
.cpnInfo2 textarea { width: 100%; box-sizing: border-box; padding: 5px; height: 50px; }
.cpnInfo2 input { width:100%; height: 30px; border: 1px solid #ccc; box-sizing: border-box; }
.cpnInfo2 div { padding: 10px 0 10px 20px; }
.cpnInfo2 div dl { display: flex; padding: 5px 0; }
.cpnInfo2 div dl dt { font-weight: 500; width: 80px; margin-right: 10px;}
.cpnInfo2 div dl dd { width: calc(100% - 90px);}

.recrInfo2 input { width:100%; height: 30px; border: 1px solid #ccc; box-sizing: border-box; }

table.recrInfo2 { width: 100%; box-sizing: border-box; border-bottom: 1px solid #ccc; }
table.recrInfo2 thead th { height:40px; padding: 0px 5px 0px; font-weight: 500; color:#333; text-align: center; vertical-align: middle; border-bottom: 3px solid #99173e; vertical-align: middle;  }
table.recrInfo2 tbody td { text-align: center; padding: 9px 7px 5px; vertical-align: middle; font-size: 0.925em; }

div.recrInfo2 { display: flex; flex-wrap: wrap; width: 100%; border-bottom: 1px solid #ccc; margin-bottom: 20px; box-sizing: border-box; padding: 10px 5px; }
div.recrInfo2 dl { width: 100%; display: flex;  }
div.recrInfo2 dl dt { width: 15%; min-width: 85px; padding: 5px 5px 5px 36px; font-weight: 600; }
div.recrInfo2 dl dd { width: 80%; padding: 5px; word-break: keep-all; }

.recrWrite { width: 100%; border-top: 3px solid #99173e; border-bottom: 1px solid #ccc; margin-bottom: 20px; overflow: hidden; box-sizing: border-box; }
.recrWrite form { display: block; width: 100%; box-sizing: border-box; }
.recrWrite .req { font-size: 0.813em; color: #E20000; }
.recrWrite dl { display: flex; font-size: 0.875em; padding: 12px 0; border-bottom: 1px solid #ccc; width: 100%; box-sizing: border-box;  }
.recrWrite dl dt { width: 15%; box-sizing: border-box; padding: 0 10px; text-align: center;  line-height: 25px; }
.recrWrite dl dd { width: 85%; box-sizing: border-box; padding: 0 10px; }

.recrWrite dl dd input[type=text] { height: 30px; border: 1px solid #ccc; box-sizing: border-box;  }
.recrWrite dl dd input[type=tel] { width: 50px; height: 30px; border: 1px solid #ccc; box-sizing: border-box; }
.recrWrite dl dd select { height: 30px; border: 1px solid #ccc; box-sizing: border-box; }
.recrWrite dl dd input[type=radio] { line-height: 30px; }

.policy { width: 100%; height: 150px; box-sizing: border-box; padding: 10px; overflow-y: scroll; background: #f2f2f2; border: 1px solid #ccc; font-size: 0.875em; margin-bottom: 5px; }
.recrBoardView > p { margin-bottom: 10px; }
.recrBoardView >span { display: block; text-align: right; font-weight: 500; line-height: 15px; margin-top: 10px; }
.recrBoardView >span input { width: 15px; height: 15px; margin: 0 5px; vertical-align: bottom;}

#recUpload { width: 150px; background: #87bd15; padding: 10px; color: #fff; display: block; margin: 40px auto 20px; border-radius: 100px;  }


/* 채용설명회 */

.bdTopTextBox { box-sizing: border-box; padding: 15px 15px 10px; border: 5px solid #efefef; font-size: 0.95em; line-height: 1.8; margin-bottom: 20px; }
.bdTopTextBox span { color: #db0000; margin-top: 5px; font-size: 0.875em; }
.bdTopTextBox strong { display: inline-block; line-height: 1.4; background: linear-gradient(to top, #ffe400 50%, transparent 50%); }

.bdTopList li { padding-left: 10px; position: relative; font-size: 0.95em; line-height: 1.2; margin: 0 0 10px; }
.bdTopList li::before { content: '-'; position: absolute; left: 0; top: 2px; }
.bdTopList li span.warning { display: block;  color: #ef0000; font-size: 0.9em; word-break: keep-all; position: relative; padding-left: 15px; margin: 3px 0 0; }
.bdTopList li span.warning::before { content: '※'; display: block; position: absolute; left: 0; top: 1px; color: #ef0000; text-align: center; font-size: 12px;  }


/* BOARD WRITE */
.boardWrite { width: 100%; border-top: 3px solid #99173e; border-bottom: 1px solid #ccc; margin-bottom: 20px;  }
.boardWrite .req { font-size: 0.813em; color: #E20000; }
.boardWrite dl { display: flex; font-size: 0.875em; padding: 12px 0; border-bottom: 1px solid #ccc; width: 100%; }
.boardWrite dl dt { width: 15%; box-sizing: border-box; padding: 0 10px; text-align: center;  line-height: 25px; }
.boardWrite dl dd { width: 85%; box-sizing: border-box; padding: 0 10px; }

.boardWrite dl dd input[type=text] { height: 30px; border: 1px solid #ccc; box-sizing: border-box;  }
.boardWrite dl dd input[type=tel] { width: 50px; height: 30px; border: 1px solid #ccc; box-sizing: border-box; }
.boardWrite dl dd select { height: 30px; border: 1px solid #ccc; box-sizing: border-box; }
.boardWrite dl dd input[type=radio] { line-height: 30px; }


.boardWrite .postTitle input[type=text] { width: 100%; }
.boardWrite .postTitle input[type=password] { width: 200px; height: 30px; border: 1px solid #ccc; box-sizing: border-box; }
.boardWrite .postDate p { display: inline-block; }
.boardWrite .postDate p:first-child { margin-right: 5px;}
.boardWrite .postDate input[type=text] { width: 100px; margin-right: 5px; }
.boardWrite .postDate .calendarBtn { line-height: 30px; margin-right: 5px; }
.boardWrite .postDate .calendarBtn img { width: 20px; vertical-align: middle;}

.boardWrite .postCon { padding: 15px 12px; box-sizing: border-box; border-bottom: 1px solid #ccc;  }
.boardWrite .postCon p { font-size: 0.875em; line-height: 1.2; margin-bottom: 10px; }
.boardWrite .postCon textarea { width: 100%; height: 300px; box-sizing: border-box; border: 1px solid #ccc; }

.boardWrite .postFile { border: 0; }
.boardWrite .postFile li { margin-bottom: 5px; }