@charset "utf-8";


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	포토갤러리 게시판 리스트

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.photo_list li a .photo span img
{
	transition : all 0.3s ease;
	-webkit-transition : all 0.3s ease;
}
.photo_list {width:100%; border-top:2px solid #444;}
.photo_list:after{content:""; display:block; clear:both;}
.photo_list li{position:relative; float:left; width:32%; margin-right:2%; margin-top:15px;}
.photo_list li:nth-child(3n){margin-right:0;}
.photo_list li a{overflow:hidden; display:block; width:100%; line-height:20px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; color:#404040; text-decoration:none;}
.photo_list li a span,
.photo_list li a strong{display:block; font-weight:normal;}
.photo_list li a .photo{overflow:hidden; display:block; position:relative; width:100%; height:200px; background-color:#eee;}
.photo_list li a .photo span{display:block; position:absolute; left:50%; top:0; width:2000px; height:100%; margin-left:-1000px; text-align:center;}
.photo_list li a .photo span img{height:100%; display:block; margin:0 auto;}
.photo_list li a p{border:1px solid #eaeaea; border-top:0; margin:0; padding:18px 15px;}
.photo_list li a strong.title{font-size:16px; font-weight:600;}
.photo_list li a span.date{font-size:13px; color:#969696; margin-top:7px; background:url(../../images/mec/skin/clock.png) no-repeat left 50%; padding:0 0 0 22px;}
.photo_list li a:hover .photo span img,
.photo_list li a:active .photo span img{transform:scale(1.2); -webkit-transform:scale(1.2);}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	보도형 게시판 리스트

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.bodo_list li,
.bodo_list li a .photo span img
{
	transition : all 0.3s ease;
	-webkit-transition : all 0.3s ease;
}
.bodo_list {width:100%; border-top:2px solid #444;}
.bodo_list li{position:relative; border-bottom:1px solid #eaeaea; padding:15px 0;}
.bodo_list li:hover,
.bodo_list li:active{background:#f6f6f6;}
.bodo_list li a{overflow:hidden; display:block; position:relative; box-sizing:border-box; padding:0 0 0 300px; min-height:150px; text-decoration:none;}
.bodo_list li a span,
.bodo_list li a strong{display:block; font-weight:normal; color:#404040;}
.bodo_list li a .photo{overflow:hidden; display:block; position:absolute; left:0; top:0; width:300px; height:100%; background-color:#eee;}
.bodo_list li a .photo span{display:block; position:absolute; left:50%; top:0; width:2000px; height:100%; margin-left:-1000px; text-align:center;}
.bodo_list li a .photo span img{height:100%; display:block; margin:0 auto;}
.bodo_list li a p{margin:0; padding:35px 25px;}
.bodo_list li a strong.title{font-size:16px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.bodo_list li a span.date{font-size:13px; color:#969696; margin-top:7px; background:url(../../images/mec/skin/clock.png) no-repeat left 50%; padding:0 0 0 22px;}
.bodo_list li a:hover .photo span img,
.bodo_list li a:active .photo span img{transform:scale(1.2); -webkit-transform:scale(1.2);}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	FAQ 게시판 리스트

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.faq_list li .question
{
	transition : all 0.3s ease;
	-webkit-transition : all 0.3s ease;
}
.faq_list{width:100%; border-top:2px solid #444;}
.faq_list li{border-bottom:1px solid #e0e0e0; position:relative; z-index:1;}
.faq_list li .question{display:block; text-decoration:none; width:auto; max-width:100%; box-sizing:border-box; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding:10px; padding-left:45px; padding-right:140px; font-weight:600; color:#404040; font-size:15px; line-height:27px; background:url(../../images/mec/skin/icon_q.png) no-repeat 10px 10px;}
.faq_list li .question:hover,
.faq_list li .question:active,
.faq_list li .question.on{background:#f6f6f6 url(../../images/mec/skin/icon_q.png) no-repeat 10px 10px;}
.faq_list li .answer{padding:13px 10px; display:none; padding-left:45px; background:#fafafa; border-top:1px solid #e0e0e0; background:url(../../images/mec/skin/icon_a.png) no-repeat 10px 10px;}
.faq_list li .btns{position:absolute; right:10px; top:8px; z-index:10;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	게시판 상세보기

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.board_view{width:100%; border-top:2px solid #444; border-bottom:1px solid #444;}
.board_view .subject{display:block; width:100%; height:auto; line-height:26px; padding:20px; background:#fafafa; font-size:20px; font-weight:700; box-sizing:border-box;}
.board_view .detail{overflow:hidden; background:#fff; border-bottom:1px solid #e0e0e0; box-sizing:border-box;}
.board_view .detail li{float:left; position:relative; width:100%; min-height:42px; padding-left:180px; border-top:1px solid #ccc; box-sizing:border-box;}
.board_view .detail li.fix{width:33.33%;}
.board_view .detail li .titles{position:absolute; top:0; left:0; width:180px; height:100%; background:#fafafa;}
.board_view .detail li .titles span{display:table; table-layout:fixed; width:100%; height:100%;}
.board_view .detail li .titles span strong{display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle;}
.board_view .detail li .titles span strong .red{display:inline-block; width:auto; height:auto; margin-top:-5px; padding-left:2px; vertical-align:top;}
.board_view .detail li .txts{width:100%; padding:10px 8px; box-sizing:border-box;}
.board_view .detail li .txts span{display:inline-block; padding-right:15px;}
.board_view .detail li.no_title{padding-left:0;}
/*내용*/
.board_view .detail li .contents{width:100%; min-height:300px; padding:14px 10px; box-sizing:border-box;}
.board_view .detail li.no_title .contents{padding:20px 25px;}
.board_view .detail li .contents iframe{display:block; width:100%; max-width:800px; margin:0 auto 20px; height:450px;}
/*첨부파일*/
.board_view .detail li.filebox ul{padding:14px 10px;}
.board_view .detail li.filebox ul li{float:none; min-height:auto; margin-top:1px; padding-left:0; border-top:0;}
.board_view .detail li.filebox ul li:first-child{margin-top:0;}
.board_view .detail li.filebox ul li a.icon_file{display:inline-block; line-height:21px; padding-left:20px; background:url(../../../images/mec/skin/icon_file.png) no-repeat left top; word-break:break-all; box-sizing:border-box;}
/*안에 인풋 요소들*/
.board_view ul li input[type="text"],
.board_view ul li textarea{border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
.board_view ul li input[type="text"]{width:100%;}
.board_view ul li textarea{width:100%; min-height:150px;}
.board_view ul li input[type="text"].js_cal{width:100%; max-width:130px; text-align:center;}
/*이전글, 다음글*/
.prev_next_link{width:100%; border-bottom:1px solid #444; margin-top:-1px;}
.prev_next_link li{position:relative; padding-left:100px;}
.prev_next_link li:nth-child(2){border-top:1px solid #d7d7d7;}
.prev_next_link li strong{display:block; position:absolute; left:0px; top:0; width:60px; padding:12px 15px; text-align:left; background:url(../../images/mec/skin/board_parent_link_down.gif) no-repeat right center;}
.prev_next_link li:first-child strong{background:url(../../images/mec/skin/board_parent_link_up.gif) no-repeat right center;}
.prev_next_link li a{overflow:hidden; display:inline-block; vertical-align:top; padding:12px 15px; width:auto; max-width:100%; box-sizing:border-box; text-overflow:ellipsis; white-space:nowrap;}
.prev_next_link li a:hover,
.prev_next_link li a:active{color:#404040;}
/*댓글*/
.board_view .reply{position:relative; margin:10px 0 5px; padding:0 15px;}
.board_view .reply div{position:relative; margin-top:5px;}
.board_view .reply input[type="text"]{opacity:0; overflow:hidden; position:absolute; left:-2000px; width:1px;}
.board_view .reply textarea{width:100%; height:80px; padding-right:95px; box-sizing:border-box;}
.board_view .reply .btn_ok{position:absolute; top:0; right:0; width:80px; height:80px; line-height:80px; background:#0067a6; text-align:center; color:#fff;}
.board_view .reply .btn_ok:hover,
.board_view .reply .btn_ok:active,
.board_view .reply .btn_ok:link{text-decoration:none;}
.board_view .reply_box{margin-bottom:15px; padding:0 15px;}
.board_view .reply_box .txts{position:relative; width:100%; padding:10px 110px 10px 0; border-top:1px solid #ccc; box-sizing:border-box;}
.board_view .reply_box .txts:nth-child(1){border-top:0;}
.board_view .reply_box .txts .writer,
.board_view .reply_box .txts .date{vertical-align:middle;}
.board_view .reply_box .txts .writer{display:inline-block; padding-right:10px; font-size:14px; font-weight:700;}
.board_view .reply_box .txts .date{display:inline-block; font-size:12px; color:#868686;}
.board_view .reply_box .txts p{margin-top:5px;}
.board_view .reply_box .txts .btns{position:absolute; top:50%; right:0; margin-top:-16px;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	게시판 데이터 없을때

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.no_board_data{padding:50px 0; border-top:2px solid #444; border-bottom:1px solid #e0e0e0; text-align:center;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
     
    Page
     
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.page{text-align:center; margin-top:25px;}
.page a{
	overflow:hidden; display:inline-block; width:27px; height:27px; line-height:29px; margin:0px 2px; vertical-align:middle; font-size:14px;
	transition:all 0.3s ease; -webkit-transition:all 0.3s ease;
}
.page a:link,
.page a:visited,
.page a:active{text-decoration:none;}
.page a:hover,
.page a.on{
	background:#0067a6; font-weight:700; color:#fff;
	border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
}
.page a.page_first,
.page a.page_left,
.page a.page_right,
.page a.page_end{width:20px; margin:0; text-indent:-200px;}
.page a.page_left{margin-right:4px;}
.page a.page_right{margin-left:4px;}
.page a.page_first{background:url(../../images/mec/skin/icon_page_first.gif) no-repeat center center;}
.page a.page_left{background:url(../../images/mec/skin/icon_page_left.gif) no-repeat center center;}
.page a.page_right{background:url(../../images/mec/skin/icon_page_right.gif) no-repeat center center;}
.page a.page_end{background:url(../../images/mec/skin/icon_page_end.gif) no-repeat center center;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	버튼 스타일
	
	<a href="#" class="btn ty_1">보기</a>
	<a href="#" class="btn ty_1">확인</a>
	<a href="#" class="btn ty_1">등록</a>
	<a href="#" class="btn ty_2">저장</a>
	<a href="#" class="btn ty_2">수정</a>
	<a href="#" class="btn ty_3">삭제</a>
	<a href="#" class="btn ty_4">목록</a>
	<a href="#" class="btn ty_4">취소</a>
	<a href="#" class="btn ty_1 small">권한</a>
	<a href="#" class="btn ty_2 small">관리</a>
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.cms .btn
{
	transition : all 0.3s ease;
	-webkit-transition : all 0.3s ease;
}
.cms .btn {display:inline-block; vertical-align:middle; line-height:14px; margin:1px 0; padding:9px 15px; text-align:center; font-size:14px; text-decoration:none; border:1px solid #7f8592; color:#fff; border-radius:5px; -webkit-border-radius:5px; box-sizing:border-box; opacity:0.8; -webkit-opacity:0.8;}
.cms .btn.small{min-width:32px; height:30px; line-height:18px; padding:5px 10px; font-weight:normal; font-size:13px; opacity:1; -webkit-opacity:1;}
.cms .btn.ty_1,
.cms .btn.ty_1:link,
.cms .btn.ty_1:visited,
.cms .btn.ty_1:active{border:1px solid #616161; color:#fff; background-color:#616161;}
.cms .btn.ty_1:hover{border:1px solid #616161; color:#616161; background-color:#fff;}
.cms .btn.ty_2,
.cms .btn.ty_2:link,
.cms .btn.ty_2:visited,
.cms .btn.ty_2:active{border:1px solid #0067a6; color:#fff; background-color:#0067a6;}
.cms .btn.ty_2:hover{border:1px solid #0067a6; color:#0067a6; background-color:#fff;}
.cms .btn.ty_3,
.cms .btn.ty_3:link,
.cms .btn.ty_3:visited,
.cms .btn.ty_3:active{border:1px solid #cf2d36; color:#fff; background-color:#cf2d36;}
.cms .btn.ty_3:hover{border:1px solid #cf2d36; color:#cf2d36; background-color:#fff;}
.cms .btn.ty_4,
.cms .btn.ty_4:link,
.cms .btn.ty_4:visited,
.cms .btn.ty_4:active{border:1px solid #7f8592; color:#fff; background-color:#7f8592;}
.cms .btn.ty_4:hover{border:1px solid #7f8592; color:#7f8592; background-color:#fff;}
.cms .btn.bor{min-width:90px; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px;}
.cms input[type="submit"].btn{height:32px; background:#7f8592; border:1px solid #7f8592;}
.cms input[type="submit"].btn:hover{background:#fff; border:1px solid #7f8592; color:#383838;}

/*파일다운로드아이콘(글없음)*/
.cms .btn.file_down:link,
.cms .btn.file_down:visited,
.cms .btn.file_down:active{overflow:hidden; width:32px; background-image:url(../../images/mec/skin/icon_down.png); background-repeat:no-repeat; background-position:center center; text-indent:-2000px;}
.cms .btn.file_down:hover{background-image:url(../../images/mec/skin/icon_down2.png);}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	.atch : 등록/수정화면 첨부파일 추가 리스트

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
td.atch p{margin-bottom:3px;}


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	.search_cal : 날짜입력하는 검색폼

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.cms .controls .search_cal{position:relative; float:left; padding:0 10px;}
.cms .controls .search_cal:before,
.cms .controls .search_cal:after{content:""; position:absolute; top:50%; width:1px; height:16px; margin-top:-8px; background:#ccc;}
.cms .controls .search_cal:before{left:0;}
.cms .controls .search_cal:after{right:0;}
.cms .controls .search_cal .js_cal{float:none !important; width:100px !important;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	.no_date_picker : 데이트피커 날짜가 없을 경우

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.no_date_picker .ui-datepicker-calendar{display:none;}
.no_date_picker .ui-datepicker .ui-datepicker-buttonpane{margin:0; border:0;}
/*달력아이콘*/
.ui-datepicker-trigger{padding-left:5px; vertical-align:middle; cursor:pointer;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
     
    #js_popup : 관리자 레이어팝업
     
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#js_popup{display: none; position:fixed; z-index:999; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); border-radius:20px;}
#js_popup .popuo_group{
	position:absolute; left:50%; top:50%; width:700px; height:700px; margin-left:-350px; margin-top:-350px; background:#fff;
	border-radius:20px; -webkit-border-radius:5px; -moz-border-radius:5px;
}
#js_popup .popuo_group .titles{position:relative; height:55px; line-height:55px; padding:0 20px; background:#4a5466; border-radius:5px 5px 0 0; box-sizing:border-box;}
#js_popup .popuo_group .titles strong{font-size:20px; color:#fff;}
#js_popup .popuo_group .titles a{
	overflow:hidden; position:absolute; top:0; right:0; display:block; width:55px; height:55px; background:url(../../images/mec/skin/btn_popup_close.png) no-repeat center center; text-indent:-2000px;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
}
#js_popup .popuo_group .titles a:hover{transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg);}
#js_popup .popuo_group .popup_content{width:100%; height:auto; padding:20px 20px 25px; box-sizing:border-box;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
     
    .js_accordion : 게시판 권한 관리 아코디언 메뉴
     
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.js_accordion li .titles,
.js_accordion li .titles:after{transition : all 0.3s ease; -webkit-transition : all 0.3s ease; -moz-transition : all 0.3s ease;}
.js_accordion{width:100%; box-sizing:border-box;}
.js_accordion li{position:relative; z-index:1; background:#fff; border-bottom:1px solid #e0e0e0;}
.js_accordion li:first-child{border-top:1px solid #e0e0e0;}
.js_accordion li .titles{overflow:hidden; position:relative; display:block; width:100%; line-height:27px; padding:10px 35px 10px 20px; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:700; box-sizing:border-box;}
.js_accordion li .titles:hover,
.js_accordion li .titles:active,
.js_accordion li .titles.on{background:#eee;}
.js_accordion li .titles:after{
	content:""; position:absolute; top:0; right:2px; width:47px; height:47px; background:url(../../images/mec/skin/btn_arrow.png) no-repeat center center;
	transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg);
}
.js_accordion li .titles.on:after{transform:rotate(270deg); -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg);}
.js_accordion li .txtbox{display:none; padding:13px 20px; border-top:1px solid #e0e0e0;}