/*=========================================================================================================================
* 프로젝트: 한국보육진흥원 홈페이지 고도화 사업 - 영문
* 파일명: board.css  게시판 전용 css
* 작업자: 한정성
* 작업일: 2020.1 ~ 
=========================================================================================================================*/
@charset "utf-8";

table {border-collapse: collapse;border-spacing: 0; width:100%;}
table tr.on th,
table tr.on td {background:#f5fcf9; text-align:left;}
table tr .notice {display:inline-block; width:18px; height:15px; margin-top:5px; background:url(../img/icon/icon_notice.png) no-repeat 50% 50%; text-indent:-9999em;}
td,th {padding: 0}

/* boardList */
.boardList {margin-bottom:30px;border-top: 2px solid #4b4b4b;border-bottom: 1px solid #ccc; position:relative;}
.boardList table {width:100%;}
.boardList table thead th {text-align:center;line-height:130%; padding:15px 0 15px; background:#f4f4f4; border-bottom:1px solid #ccc; color:#000;vertical-align:middle;}
.boardList table thead th:first-child {background-image:none;} 
.boardList table tbody td {line-height:140%;/*height:16px;*/padding:10px 5px;border-top: 1px solid #ccc;vertical-align:middle;text-align:center; font-size:14px;}
.boardList table tbody td.tal{text-align:left;}
.boardList table tbody td a{font-size:14px; color:#000; /*width:90%; display: block;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;*/}
.boardList table tbody td a:hover{font-weight:bold;}
.boardList table tbody tr.on{background:#f5fcf9;}
.boardList table thead th.member, .boardList table tbody td.member{width:7%;}
.boardList table thead th.division, .boardList table tbody td.division{width:7%;}
.boardList table thead th.tit{text-align:center; /*width:auto;*/ width:50%;}
.boardList table tbody td.tit{text-align:left; /*width:44%;*/ width:50%;}
.boardList table thead th.tit1{text-align:center; width:40%;}
.boardList table tbody td.tit1{text-align:left; width:40%;}
.boardList table thead th.region, .boardList table tbody td.region{width:15%;}
.boardList table thead th.writer, .boardList table tbody td.writer{width:10%;}
.boardList table thead th.date, .boardList table tbody td.date{width:13%;}
.boardList table thead th.term, .boardList table tbody td.term{width:14%;}
.boardList table thead th.result, .boardList table tbody td.result{width:13%;}
.boardList table thead th.open, .boardList table tbody td.open{width:10%;} /*공개여부*/
.boardList table thead th.id, .boardList table tbody td.id{width:16%;} /*아이디*/
.boardList table thead th.state, .boardList table tbody td.state{width:15%;}
.boardList table thead th.lookup, .boardList table tbody td.lookup{width:8%;}
.boardList table thead th.file, .boardList table tbody td.file{width:8%;}
.boardList table thead th.column, .boardList table tbody td.column{width:10%;}
.boardList table thead th.Agency, .boardList table tbody td.Agency{width:15%;}
.boardList table thead th.year, .boardList table tbody td.year{width:8%;}
.boardList table thead th.area, .boardList table tbody td.area{width:10%;}
.boardList table thead th.object, .boardList table tbody td.object{width:13%;}
.boardList table thead th.part, .boardList table tbody td.part{width:13%;}
.boardList table thead th.kinds, .boardList table tbody td.kinds{width:13%;}
.boardList table tbody td.nopost{padding:50px; text-align:center;}
.boardList table thead th.process, .boardList table tbody td.process{width:12%;}
.boardList table thead th.feedback, .boardList table tbody td.feedback{width:15%;}

.boardMList{display:none;}

/*boardView*/
.boardView{margin-top:40px; border-top: 2px solid #4b4b4b;}
.boardView h3{display: inline-block; position:relative;padding:15px 20px 0;font-size:20px;font-weight:600;word-break:break-all;}
.boardView dl.infor{overflow:hidden;padding:6px 20px 15px;border-bottom:1px solid #d2d2d2;color:#4b4b4b;font-size:15px;}
.boardView dl.infor dt,
.boardView dl.infor dd{display:inline-block;float:left;position:relative;}
.boardView dl.infor dt{margin-right:4px;padding-right:8px;}
.boardView dl.infor dt:after{position:absolute;top:0;right:0;content:":";}
.boardView dl.infor dd{margin-right:20px;padding-right:20px;}
.boardView dl.infor dd:last-child{padding-right:0;margin-right:0;}
.boardView dl.infor dd:before{position:absolute;top:22%;right:0;width:1px;height:14px;background:#f4f4f4;content:"";}
.boardView dl.infor dd:last-child:before{display:none;}
.boardView .txt.file_wrap{padding:15px 20px;}
.boardView .file_wrap:after{display:none;}
.boardView .txt{padding:50px 20px;border-bottom:1px solid #d2d2d2;font-size:15px;word-break:break-all;line-height:1.5em;}
.boardView .txt:after{display:block;clear:both;content:"";}
.boardView .txt img{max-width:100%;height:auto;vertical-align:middle; border:1px solid #d2d2d2;}
.boardView_tit{background: #f4f4f4;}
.boardView + .btnArea {padding-top: 0;}

/*영상view*/
.movieView{margin-bottom:30px; margin-top:50px; border-top:2px solid #4b4b4b; position:relative;}
.movieView_tit{background: #f4f4f4;}
.movieView h3{display: inline-block; position:relative;padding:15px 20px 0;font-size:20px;font-weight:600;word-break:break-all;}
.movieView dl.infor{overflow:hidden;padding:6px 20px 15px;border-bottom:1px solid #d2d2d2;color:#4b4b4b;font-size:15px;}
.movieView dl.infor dt,
.movieView dl.infor dd{display:inline-block;float:left;position:relative;}
.movieView dl.infor dt{margin-right:4px;padding-right:8px;}
.movieView dl.infor dt:after{position:absolute;top:0;right:0;content:":";}
.movieView dl.infor dd{margin-right:20px;padding-right:20px;}
.movieView dl.infor dd:last-child{padding-right:0;margin-right:0;}
.movieView dl.infor dd:before{position:absolute;top:22%;right:0;width:1px;height:14px;background:#f4f4f4;content:"";}
.movieView dl.infor dd:last-child:before{display:none;}
.movieView .txt.file_wrap{padding:15px 20px;}
.movieView .file_wrap:after{display:none;}
.movieView .txt{padding:50px 20px;border-bottom:1px solid #d2d2d2;font-size:17px;word-break:break-all;line-height:1.5em;}
.movieView .txt:after{display:block;clear:both;content:"";}
.movieView .txt img{max-width:100%;height:auto;vertical-align:middle; border:1px solid #d2d2d2;}
.movieArea {position:relative;}
.movieArea .movie{float:left; position:relative; z-index:11; border:1px solid #d2d2d2; width:100%; height:400px;}
.movieArea .movie object{width:100%; height:100%; position: absolute; top: 0; left:0;}
.movieArea .note{border:1px solid #d2d2d2; float:left; z-index:10; width:100%; margin-top:30px;}
.movieArea .sinTitleDesc{background:#f4f4f4; font-size:14px; text-align:center; padding:1%;}
.movieArea .noteArea{}
.movieArea .noteArea > div{overflow-y:scroll;position:relative;padding:2%;word-wrap:break-word; font-size:14px; height:270px;}


/*페이징*/
.paging {width: 100%;margin: 20px auto 20px 0;padding:0;color:#454545;font-size: 13px;}
.pagination {width: auto;text-align: center;font-size: 13px;}
.pagination .pageNum {width: 100%;}
.pagination * {display: inline;margin: 0 0 3px 0;text-decoration: none;line-height: normal;color: #333;vertical-align: middle;}
.pagination strong {width: auto;padding:8px 15px;font-weight: 500;color: #fff;border: 1px solid #333;margin-right: 3px;background: #333;}
.pagination a {display: inline-block;width: auto;padding:8px 15px;font-weight: 500;color: #737373;border: 1px solid #d9d9d9;margin: 5px 0 5px 0;}
.pagination a.first {display: inline-block;}
.pagination a.last {display: inline-block;}
.pagination a:hover, .pagination a:active, .pagination a:focus {text-decoration:none;}
.pagination .direction {border: 1px solid #d9d9d9;background: #fff;}
.pagination .direction:hover, .pagination .direction:active, .pagination .direction:focus {text-decoration: none;font-weight: 600;color: #fff;}

/* board_이전,다음글 */
.boardNext {overflow:hidden;margin-bottom:30px;border-top:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;margin-top: 20px;}
.boardNext ul {overflow:hidden;}
.boardNext li {float:left; width:100%; border-top:1px solid #d2d2d2;}
.boardNext li:first-child {border-top:none;}
.boardNext li > strong {display:block; float:left; width:20%; background: #f2f3f3; text-align:center; line-height:150%; min-height:20px; padding:11px 16px 11px 20px; vertical-align:middle; box-sizing:border-box;}
.boardNext li > div {display:block; float:right; width:80%; line-height:150%; min-height:20px; padding:11px 0 11px 20px; vertical-align:middle; box-sizing:border-box;}
.boardNext li > div > a > span {margin-left:5px}

.file_wrap{padding:20px;border-bottom:1px solid #d2d2d2;font-size:17px;word-break:break-all;line-height:1.5em;}
.file_wrap img{/*max-width:100%;*/height:auto;vertical-align:middle; margin-top:0; margin-right:5px; border:1px solid #d2d2d2;}
.fileList li{margin-bottom:5px; line-height:27px;}
.fileList li a{font-size:15px;}
.fileList li a:hover, 
.fileList li a:focus{text-decoration:underline;}

/* 버튼 */
.btnArea {text-align:center;overflow:hidden; margin-top:40px;}
.btnArea .btnRight {float:right;}
.btnArea .btnLeft {float:left;}
.btnMd01 {display: inline-block; vertical-align: middle;}
.btnMd01 span {display: block; padding: 0 50px; height:50px; line-height:46px; border: 1px solid #4b4b4b; background: #4b4b4b; color: #fff; font-size:16px; font-weight:bold;}

.btnMd02{display: block; vertical-align:bottom;padding-top:70px;}
.btnMd02 span {display: block; padding: 0 10px; height:30px; line-height:30px; border: 1px solid #4b4b4b; background:#fff; color:#000; font-size:16px; text-align:center;}

.btnMd03 {display: inline-block; vertical-align: middle;}
.btnMd03 span {display: block; padding: 0 10px; height:32px; line-height:32px; border: 1px solid #4b4b4b; background: #4b4b4b; color: #fff; font-size:14px;}

.btnMd04 {display: inline-block; vertical-align: middle;}
.btnMd04 span {display: block; padding: 0 30px; height:50px; line-height:46px; border: 1px solid #4b4b4b; background: #4b4b4b; color: #fff; font-size:16px; font-weight:bold;}

.btnbg4b span{border:1px solid #4b4b4b; background:#4b4b4b;}
.btnbg4b span:hover{background:#292929; border: 1px solid #292929; font-weight:bold}
.btnbg4b span:focus{background:#292929; font-weight:bold}

.btnbg30 span{border:1px solid #305b86; background:#305b86;}
.btnbg30 span:hover{background:#254666;}
.btnbg30 span:focus{background:#254666;}

.btnbg2f span{border:1px solid #2f5b85; background:#2f5b85;}
.btnbg2f span:hover{background:#244462;}
.btnbg2f span:focus{background:#244462;}

.btnbgef span{border: 1px solid #d6d6d9; background:#eff0f0; color:#000;}
.btnbgef span:hover{border: 1px solid #ccc; background:#ddd;}

.btnbg51 span{border:1px solid #51a121; background:#51a121;}

/*게시판위의 검색부분*/
/* boardSearch */
.boardSearch {min-height:40px; margin-bottom:10px; margin-top:50px;}
.boardSearch .total_board {float:left; margin-top: 10px;margin-right:5px;color:#000; font-size:15px;}
.boardSearch .total_board .now {color: #2d498f; font-weight:bold;}
.boardSearch .total_board .now_page {color: #2d498f; font-weight:bold;}
.boardSearch .total_board .total_page{color:#000;}
.boardSearch .search {float:right;}
.boardSearch .selectBox {display: block;;min-width:100px; height:35px; float: left; margin-right: 5px;}
.boardSearch .selectBox label {height: 33px; line-height: 33px;}

.boardSearch.Issued{border:1px solid #ccc; background:#f4f4f4; padding:20px 30px; margin-top:50px; text-align:left; font-size:14px; position:relative;}
.boardSearch.Issued select{width:100%;}
.boardSearch.Issued .oneline{float:left; width:100%;}
.boardSearch.Issued .search_btn{position:absolute; top:12%; right:25px;}
.search_btn {width:100px; height:84px; border:none; background:#305b93; color:#fff; cursor:pointer; font-size:15px; font-weight:bold; margin-top:3px;}

.selectBox {position: relative; display:inline-block; /*min-width:200px;*/ min-height:28px; vertical-align:middle; 
	       background:url(../img/icon/bg_selectbox_arrow.png) no-repeat right center; 
	       background-size:40px 35px; background-color: #fff;}
.selectBox span {position: relative; display: block; color: #6c6e6f; height:35px; line-height:33px; padding-left: 10px; padding-right: 37px; overflow:hidden; white-space:nowrap;
	            text-overflow:ellipsis; -o-text-overow: ellipsis; border: 1px solid #ccc;  z-index:10; font-size:14px;}
.selectBox.focus span {border-color: #ccc;}
.selectBox select {width:100%; height:35px; line-height:35px; padding: 0 10px; opacity: 0; filter: alpha(opacity=0);-webkit-appearance:none; appearance:none; position:absolute; left:0; top:0; z-index:90;}
.selectBox.half {width: 40%; display:inline-block; vertical-align:middle;}

.emailBox .inputEmail1 {float: left; width: 30%; margin-right: 2%;}
.emailBox .inputEmail2 {float: left; position: relative; width: 30%; margin-right: 2%;}
.emailBox .inputEmail2 input[type="text"] {display: block; padding-left:10px; width: 100%;}
.emailBox .inputEmail2 span {position: absolute; top: 3px; left:-14px; color: #6c6e6f; font-family: "notoKrM", sans-serif; font-weight: 500; display: block;}

.inCk {display:inline-block; vertical-align:middle;} /* radio, checkbox Group*/
.inCk > li {display:inline-block;}
.inCk input[type="radio"] + label {padding-left:18px; /*margin:0 18px 0 -15px;*/}
.inCk input[type="radio"]{width:15px; height:15px;}

.boardSearch .search .inText {position:relative;float: left; left:0;display:block;width:300px;line-height:1;border:1px solid #ccc;box-sizing: border-box; margin-right:5px;}
.boardSearch .search .inText input[type="text"] {display: block; width:100%;padding-left:5px;border:0;/*height:33px; line-height:33px;*/ vertical-align:baseline;}
.ie10 .boardSearch .search .inText input[type="text"] {width:100%; padding:0; border:0;}
.ie7 .boardSearch .search .inText input[type="text"] {text-indent:10px;}
.boardSearch .search .btnSch {line-height:35px; background:#4b4b4b ; color:#fff; cursor: pointer; width:80px;}
.boardSearch .search .search_tit{float:left; margin-right:5px; line-height:33px; font-weight:bold;}

.tblType1 table{margin-bottom:30px;border-top: 2px solid #4b4b4b;border-bottom: 1px solid #ccc; position:relative;}
.tblType1 table {width:100%;}
.tblType1 table tbody th {text-align:center;line-height:130%; padding:15px 0 15px; background:#f4f4f4; border-bottom:1px solid #ccc; color:#000;vertical-align:middle;}
.tblType1 table tbody td {line-height:140%;/*height:16px;*/padding:10px 5px;border-top: 1px solid #ccc;vertical-align:middle; font-size:14px;}
.tblType1 table tbody td input{border:1px solid #ddd;padding:5px}
.tblType1 table tbody td .addFile{display:inline-block;width:47%;}
.tblType1 table tbody td .input_search{display:inline-block;width:50%;}
.tblType1 table tbody td .input_search input[type="file"]{text-indent:0 !important;width:70%} 
.tblType1 table tbody th em.txt_red{color:#ff0000}


@media all and (max-width:1200px){
	.btnMd01{width:100%; margin-bottom:2%;}
	.btnArea .btnRight{float:none;}
	.file_wrap img{width:auto;}
	.boardSearch .total_board{float:none; width:100%; margin-bottom:10px; margin-top:35px;}
	.boardSearch .search {float:none;}
	.boardSearch .search .persons{width:100%; display:block; margin-bottom:5px;}
	.boardSearch .search input.input[type="text"]{margin-bottom:5px;}


	.tblType1 table tbody td .input_search{display:block;margin-top:5px;width:99%;}
    .tblType1 table tbody td .input_search input[type="file"]{text-indent:0 !important;width:70%} 
	.tblType1 table tbody td .addFile{display:inline-block;width:99%;}

}

@media all and (max-width: 1024px){
	/*.boardSearch.Issued div{margin-bottom:0 !important;}*/
	.boardSearch.Issued select{width:100%; margin-bottom:2%; margin-right:0 !important;}
	.boardSearch.Issued select.w40{width:100% !important;}
	.boardSearch.Issued input[type="text"]{width:100% !important; margin-top:5px;}
	.boardSearch.Issued .search_btn{position:static; width:100%; height:50px; margin-top:2%;}

}

/*@media all and (max-width: 879px){
	.selectBox{width:100%; margin-bottom:2%;}
}*/

@media all and (max-width: 830px){
	.boardSearch .total_board{float:none; width:100%; margin-bottom:10px; margin-top:35px;}
	.boardSearch .search {float:none;}
	.boardSearch .search .inText {width:100%; margin-bottom:5px;}
	.boardSearch .search .inText input[type="text"] {width:77%;}
	.boardSearch .selectBox{width:100%; margin-right:0; margin-bottom:5px;}
	.boardSearch .search .btnSch{width:100%;}
	
}

@media all and (max-width: 768px){
	.boardSearch {min-height: 35px; margin-bottom:10px; margin-top:35px;}
	.boardSearch .total_board {float: none; margin-bottom:10px; margin-right:0;}
	.boardSearch .search {float:none;}
	.boardSearch .search .inText {width:100%; margin-bottom:5px;}
	.boardSearch .search .inText input[type="text"] {width:77%;}
	.boardSearch .selectBox{width:100% !important; margin-right:0; margin-bottom:5px;}
	.boardSearch .search .btnSch{width:100%;}

	.boardList {display:none;}
	.boardMList {border-top: 2px solid #4b4b4b; display:block; margin:0 0 15px;}
	.boardMList > li {width:100%; position:relative; border-bottom:1px solid #ccc; padding:8px 0; overflow:hidden;}
	.boardMList > li.on{background:#f5fcf9;}
	.boardMList > li.on div .notice{display:inline-block;width: 18px; height: 15px;margin-top:5px; background:url(../img/icon/icon_notice.png) no-repeat 50% 50%; text-indent:-9999em;}
	.boardMList > li div {padding:0 0 0 0; overflow:hidden;}
	.boardMList > li div > a {display:block; margin:0 0 5px;}
	.boardMList > li div > a > img {margin-left:5px;}
	.boardMList > li div > span {position:relative; color:#000; font-size:15px; line-height:160%;}
	.boardMList > li div > span.icon { color: #fff; }
	.boardMList > li div > span.iconState { color: #fff; line-height: 20px; }/* 아이콘 */
	.boardMList > li div > span.iconState2 { color: #fff; line-height: 20px; }/* 아이콘 */
	.boardMList > li div > span + span {margin-left:4px; padding-left:7px;}
	.boardMList > li div > span + span.borafter {margin-left:0; padding-left:0;}
	.boardMList > li div > span + span.borafter:after {content:""; width:1px; height:10px; border-left:none; position:absolute; left:0; top:3px;}
	.boardMList > li div > span + span:after {content:""; width:1px; height:10px; border-left:1px solid #ccc; position:absolute; left:0; top:6px;}
	.boardMList > li div > span + span.display {margin-left:0; padding-left:0; display:block;}
	.boardMList > li div > span + span.display:after {content:""; border:none;}
	.boardMList > li .file {position:absolute;/* width:12px; */top:50%; right:5px; margin-top:-9px;}
	.boardMList > li .file a { display: block; }
	.boardMList > li .file img {width:100%;}
	.boardMList > li .sort {color:#000;}
	.boardMList > li .tag02 {color:#fff; width:auto; margin:0; padding:3px 7px;}
	.boardMList > li .tag02 + span:after, .boardMList > li .tag:after {border:0;}
	.boardMList > li .tag {color:#fff; width:auto; padding:3px 7px;}
	.boardMList > li span + .tag {margin-left:15px;}

	.orange{color:#ff6600 !important; font-weight:bold !important;}
	.emailBox .inputEmail1{margin-right:0; margin-bottom:2%;}
	.emailBox .inputEmail2{width:100%; margin-right:0; margin-bottom:2%;}
	.emailBox .inputEmail2 span{left:12px;}
	.emailBox .inputEmail2 input[type="text"] {display: block; padding-left:30px; width: 100%;}

	.boardView dl.infor dd{display:block;float:none;margin:0;padding:0;}
	.boardView dl.infor dd:before{display:none;}
	.boardView .fileList li{margin-bottom:3px; height:auto; line-height:auto;}
	.boardNext li > strong{width:22%; padding:11px 0 11px 0; text-align:center; background:none;}
	.boardNext li > div{width:78%;}
	.boardView .txt img{width:100%;}
	.boardView .txt{padding:50px 0;}

	.selectBox{width:100%; margin-bottom:1%;}
}