@charset "utf-8";

/*
font-family: 'Roboto', sans-serif;
*/

/* 리스트 상단 */
#board .list_top {min-height: 42px; position: relative;  margin-bottom: 16px; font-size: 0; display:flex; justify-content:left; align-items:center; table-layout:fixed;}
#board .list_top .count {font-family: 'Roboto', sans-serif; font-size: 14px; color: #888888; width: calc(100% - 260px); word-break: break-all;}
#board .list_top .count strong {font-size: 18px; color: #222222; font-weight: 500; margin-left: 5px;}
#board .list_top .search_bx {width: 233px; position: absolute; right: 0; top: 0;}
#board .list_top .search_bx input {height: 42px; width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid #aaaaaa; background-color: transparent; font-size: 14px; color: #666666; left: -0.05em; word-break: keep-all; outline: none; padding: 0 46px 0 8px;}
#board .list_top .search_bx input::placeholder {font-family: 'Roboto', sans-serif; letter-spacing: 0; color: #888888;}
#board .list_top .search_bx .btn {position: absolute; width: 42px; height: 46px; background: url(../images/icon/search.png) no-repeat center; top: 0; right: 0;}



/* 리스트 */
#board .list_bx {border-top: 2px solid #222222;}
#board .list_bx table {width: 100%; table-layout: fixed;}
#board .list_bx table tr {border-bottom: 1px solid #dddddd;}
#board .list_bx table td {height: 64px; box-sizing: border-box; text-align: center; font-size: 16px; color: #888888; letter-spacing: -0.05em; word-break: keep-all;}
#board .list_bx table .num {width: 100px;}
#board .list_bx table .subject {text-align: left; padding: 0 24px;}
#board .list_bx table .subject div {width: 80%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
#board .list_bx table .subject div a {color: #666666; cursor: pointer;}
#board .list_bx table .date {width: 160px;}

#board .list_bx ul li {border-bottom: 1px solid #dddddd;}
#board .list_bx ul li a {display: block; position: relative; padding: 0 160px 0 100px; height: 64px; display:flex; justify-content:left; align-items:center; table-layout:fixed; cursor: pointer; font-size: 16px; color: #888888; letter-spacing: -0.05em; word-break: keep-all;}
#board .list_bx ul .num {position: absolute; width: 100px; height: 100%; text-align: center; left: 0; top: 0; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#board .list_bx ul .subject {padding: 0 24px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; color: #666666; width: 85%;}
#board .list_bx ul .date {position: absolute; width: 160px; height: 100%; text-align: center; right: 0; top: 0; display:flex; justify-content:center; align-items:center; table-layout:fixed;}

#board .no_data {text-align: center!important; font-size: 16px!important; color: #c7c7c7!important; letter-spacing: -0.05em!important; word-break: keep-all!important; padding: 100px 0;}
#board ul .no_data {display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#main #board .no_data {height: 322px; padding: 0;}



/* 페이징 */
#board .page_bx {text-align: center; font-size: 0; padding-top: 38px;}
#board .page_bx a {display: inline-block; vertical-align: middle; height: 33px; box-sizing: border-box;}
#board .page_bx .num {line-height: 33px; font-size: 14px; color: #888888; letter-spacing: -0.05em; margin: 0 10px;}
#board .page_bx .num span {display: inline-block; position: relative; min-width: 20px;}
#board .page_bx .num.on span::before {content: ''; width: 100%; height: 2px; background-color: #035ca3; position: absolute; bottom: 0; left: 0;}
#board .page_bx .page_prev {width: 22px; background: url(../images/icon/page_prev.png) no-repeat center; margin-right: 22px;}
#board .page_bx .page_next {width: 22px; background: url(../images/icon/page_next.png) no-repeat center; margin-left: 22px;}



/* 상세 */
#board .view_bx .subject_bx strong {display: block; font-size: 28px; color: #222222; font-weight: 700; letter-spacing: -0.05em; word-break: keep-all; margin-bottom: 11px;}
#board .view_bx .subject_bx p {font-size: 16px; color: #888888; letter-spacing: -0.05em; word-break: keep-all;}
#board .view_bx .txt_bx {font-size: 16px; line-height: 30px; letter-spacing: -0.05em; word-break: keep-all; color: #666666; padding: 47px 0 0;}
#board .view_bx .txt_bx img {max-width: 100%;}
#board .view_bx .file_bx {border-top: 1px solid #dddddd; padding-top: 12px; font-size: 0; margin-top: 33px;}
#board .view_bx .file_bx li {display: inline-block; margin-right: 30px; margin-top: 8px;}
#board .view_bx .file_bx li:last-child {margin-right: 0;}
#board .view_bx .file_bx li a {display: block; font-size: 14px; color: #888888; letter-spacing: -0.05em; word-break: keep-all; padding-left: 37px; line-height: 28px; background: url(../images/icon/file.png) no-repeat left center;}

/* PC */
@media all and (min-width:1025px){
	/* 리스트 */
	#board .list_bx table .subject div a {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
	#board .list_bx table .subject div a:hover {text-decoration: underline; color: #222222;}
	
	#board .list_bx ul li a .subject {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
	#board .list_bx ul li a:hover .subject span {text-decoration: underline;}
	#board .list_bx ul li a:hover .subject {color: #222;}
	
	
	/* 상세 */
	#board .view_bx .file_bx li a {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
	#board .view_bx .file_bx li a:hover {text-decoration: underline; color: #222222;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* 리스트 상단 */
	#board .list_top {min-height: 30px; margin-bottom: 10px;}
	#board .list_top .count {width: calc(100% - 200px); font-size: 12px;}
	#board .list_top .count strong {font-size: 13px; margin-left: 4px;}
	#board .list_top .search_bx {width: 180px;}
	#board .list_top .search_bx input {height: 30px; font-size: 12px; padding: 0 28px 0 6px;}
	#board .list_top .search_bx .btn {width: 28px; height: 30px; background-size: 16px auto;}
	


	/* 리스트 */
	#board .list_bx table td {height: 45px; font-size: 11px;}
	#board .list_bx table .num {width: 60px;}
	#board .list_bx table .subject {padding: 0 12px;}
	#board .list_bx table .date {width: 100px;}
	
	#board .list_bx ul li a {height: 45px; font-size: 11px; padding: 0 65px 0 45px;}
	#board .list_bx ul .num {width: 45px;}
	#board .list_bx ul .subject {padding: 0 12px;}
	#board .list_bx ul .date {width: 65px;}
	
	#board .no_data {font-size: 11px!important; padding: 50px 0;}
	#main #board .no_data {height: 255px}
	


	/* 페이징 */
	#board .page_bx {padding-top: 24px;}
	#board .page_bx a {height: 22px;}
	#board .page_bx .num {line-height: 22px; font-size: 12px; margin: 0 5px; min-width: 20px;}
	#board .page_bx .num span {min-width: 10px;}
	#board .page_bx .page_prev {width: 20px; margin-right: 8px;}
	#board .page_bx .page_next {width: 20px; margin-left: 8px;}
	


	/* 상세 */
	#board .view_bx .subject_bx strong {margin-bottom: 7px; font-size: 18px; line-height: 26px;}
	#board .view_bx .subject_bx p {font-size: 12px;}
	#board .view_bx .txt_bx {padding-top: 29px; font-size: 12px; line-height: 20px;}
	#board .view_bx .file_bx {margin-top: 20px; padding-top: 9px;}
	#board .view_bx .file_bx li {margin-right: 20px; margin-top: 5px;}
	#board .view_bx .file_bx li a {font-size: 12px; line-height: 20px; padding-left: 26px; background-size: 20px auto;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* 리스트 */
	#board .list_bx table tr {display: block; padding: 11px 10px 10px;}
	#board .list_bx table td {width: 100%; display: block; height: auto; text-align: left;}
	#board .list_bx table .num {display: none;}
	#board .list_bx table .subject {padding: 0 0 4px;}
	#board .list_bx table .subject div {width: 100%;}
	#board .list_bx table .date {width: 100%;}
	
	#board .list_bx ul li a {padding: 11px 10px 10px; display: block; height: auto;}
	#board .list_bx ul .num {display: none;}
	#board .list_bx ul .subject {padding: 0 0 4px; width: 100%;}
	#board .list_bx ul .date {display: block; position: relative; width: 100%; height: auto; right: auto; top: auto; text-align: left;}
	
	#main #board .no_data {display:flex; justify-content:center; align-items:center; table-layout:fixed;}
}