@charset "utf-8";

#board {padding-bottom: 120px;}


/* 리스트 상단 */
#board .list_top {min-height: 60px; display:flex; justify-content:left; align-items:center; table-layout:fixed; position: relative; margin-bottom: 26px; flex-flow: wrap;}
#board .list_top .count {width: calc(100% - 600px); font-size: 17px; color: #666666; letter-spacing: -0.025em; word-break: keep-all;}
#board .list_top .count strong {font-size: 700; color: #111111;}
#board .list_top .search_bx {width: 566px; position: absolute; right: 0px; top: 0;}
#board .list_top .search_bx .s_w {display: flex; flex-flow: wrap; position: relative;}
#board .list_top .search_bx select {width: 160px; margin-right: 6px; height: 60px; border: none; outline: none; box-sizing: border-box; padding: 0 45px 0 24px; font-size: 16px; color: #111111; letter-spacing: -0.025em; word-break: keep-all; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../images/icon/arrow2.png) no-repeat right 22px center #f0f0f0;}
#board .list_top .search_bx input {width: calc(100% - 166px); height: 60px; border: none; outline: none; background-color: #f0f0f0; box-sizing: border-box; padding: 0 60px 0 24px; font-size: 16px; color: #111111; letter-spacing: -0.025em; word-break: keep-all;}
#board .list_top .search_bx input::placeholder {color: #888888;}
#board .list_top .search_bx .btn {position: absolute; width: 60px; height: 60px; background: url(../images/icon/search.png) no-repeat center; right: 0; top: 0; font-size: 0; z-index: 1;}


/* 리스트 */
.no_list{ padding:100px 0; font-size:16px; line-height:26px; color:#666; letter-spacing:-0.05em; text-align:Center; }

.boardS01 ul{border-top: 3px solid #333333;}
#main .boardS01 ul{border-top: none;}
.boardS01 ul li{ border-bottom:1px solid #dcdcdc; }
.boardS01 ul li a{ position:relative; display:flex; flex-wrap:wrap; align-items: center;height:150px; }
.boardS01 ul li a:after{ content:''; position:absolute; right:20px; top:50%; margin-top:-30px; width:60px; height:60px; border-radius:50%; border:1px solid #e6e6e6; background:url('../images/icon/boards1_ar.png') no-repeat center; box-sizing:border-box; }
.boardS01 ul li a > div{ box-sizing:border-box; }
.boardS01 ul li a .date{ width:105px; text-align:center; }
.boardS01 ul li a .date strong{ display:block; font-size:56px; line-height:1em; color:#111; font-weight:700; font-family: 'Poppins', sans-serif; }
.boardS01 ul li a .date span{ display:block; font-size:16px; line-height:26px; color:#aaa; font-family: 'Poppins', sans-serif; }
.boardS01 ul li a .txt{ padding:0 150px 0 60px; width:calc(100% - 105px); }
.boardS01 ul li a .txt strong{ display:block; margin-bottom:5px; font-size:24px; line-height:34px; color:#111; letter-spacing:-0.05em; font-weight:600; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.boardS01 ul li a .txt p{ font-size:16px; line-height:26px; color:#666; letter-spacing:-0.025em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}


/* 페이징 */
#board .page_bx {text-align: center; font-size: 0; padding-top: 40px;}
#board .page_bx a {display: inline-block; vertical-align: middle;}
#board .page_bx .num {width: 30px; line-height: 42px; font-size: 16px; color: #666666; margin: 0 6px;}
#board .page_bx .num span {display: inline-block; line-height: 24px;}
#board .page_bx .num.on {font-weight: 600; color: #111111;}
#board .page_bx .num.on span {border-bottom: 1px solid #6b6b6b;}
#board .page_bx .page_first {width: 42px; height: 42px; box-sizing: border-box; border: 1px solid #c3c3c3; background: url(../images/icon/page_first.png) no-repeat center; margin-right: 10px;}
#board .page_bx .page_prev {width: 42px; height: 42px; box-sizing: border-box; border: 1px solid #c3c3c3; background: url(../images/icon/page_prev.png) no-repeat center; margin-right: 20px;}
#board .page_bx .page_next {width: 42px; height: 42px; box-sizing: border-box; border: 1px solid #c3c3c3; background: url(../images/icon/page_next.png) no-repeat center; margin-left: 20px;}
#board .page_bx .page_last {width: 42px; height: 42px; box-sizing: border-box; border: 1px solid #c3c3c3; background: url(../images/icon/page_last.png) no-repeat center; margin-left: 10px;}


/* 상세 */
#board .view_bx {border-top: 3px solid #333333;}
#board .view_bx .subject {display: flex; flex-flow: wrap; border-bottom: 1px solid #dcdcdc; padding: 43px 30px 41px; min-height: 38px;}
#board .view_bx .subject strong {width: calc(100% - 100px); font-size: 28px; line-height: 38px; color: #111111; font-weight: 500; letter-spacing: -0.025em; word-break: keep-all;}
#board .view_bx .subject p {width: 100px; text-align: right; font-size: 17px; color: #666666; letter-spacing: -0.025em; word-break: keep-all; display:flex; justify-content:right; align-items:center; table-layout:fixed}
#board .view_bx .file {background-color: #fafafa; border-bottom: 1px solid #dcdcdc; display: flex; flex-flow: wrap; padding: 20px 30px;}
#board .view_bx .file span {width: 105px; font-size: 17px; color: #111111; line-height: 30px; letter-spacing: -0.025em; word-break: keep-all; display: inline-block;}
#board .view_bx .file ul {width: calc(100% - 105px); font-size: 0;}
#board .view_bx .file ul li {display: inline-block; font-size: 16px; color: #888888; letter-spacing: -0.025em; word-break: keep-all;}
#board .view_bx .file ul li::after {content: ','; margin-right: 8px;}
#board .view_bx .file ul li:last-child::after {display: none;}
#board .view_bx .file ul li a {display: inline-block; color: #888888; line-height: 30px;}
#board .view_bx .txt {padding: 40px 30px 90px; font-size: 17px; color: #666666; line-height: 34px; letter-spacing: -0.025em; border-bottom: 1px solid #dcdcdc;}
#board .view_bx .txt img {max-width: 100%;}
#board .view_bx .page {margin-top: 40px; min-height: 60px; position: relative; text-align: center; font-size: 0;}
#board .view_bx .page .page_btn {position: absolute; top: 0; display: inline-block; font-size: 18px; color: #111111; line-height: 60px; letter-spacing: -0.025em; word-break: keep-all; font-weight: 500;}
#board .view_bx .page .page_btn::before {content: ''; width: 60px; height: 60px; border: 1px solid #d0d0d0; border-radius: 50%; position: absolute; left: 0px; top: 0; background: url(../images/icon/view_page.png) no-repeat center;}
#board .view_bx .page .prev {left: 0; padding-left: 75px;}
#board .view_bx .page .next {right: 0; padding-right: 75px;}
#board .view_bx .page .next::before {left: auto; right: 0; transform: rotate(180deg);}
#board .view_bx .page .btn {line-height: 60px; background-color: #222222; width: 160px; border-radius: 30px; text-align: center; font-size: 20px; color: #ffffff; letter-spacing: -0.025em; word-break: keep-all; font-weight: 500; display: inline-block;}

/* PC */
@media all and (min-width:1025px){
	/* 리스트 */
	.boardS01 ul li a:hover .txt strong{ text-decoration:underline; }
	.boardS01 ul li a:after {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	.boardS01 ul li a:hover:after {border-color: #111; background:url('../images/icon/boards1_ar2.png') no-repeat center; }
	
	
	/* 상세 */
	#board .view_bx .file ul li a:hover {text-decoration: underline;}
	#board .view_bx .page .page_btn::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	#board .view_bx .page .page_btn:hover::before {border-color: #111; background: url(../images/icon/view_page2.png) no-repeat center;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	#board {padding-bottom: 60px;}
	
	
	/* 리스트 상단 */
	#board .list_top {margin-bottom: 15px; min-height: 40px;}
	#board .list_top .count {font-size: 13px; width: calc(100% - 400px);}
	#board .list_top .search_bx {width: 366px;}
	#board .list_top .search_bx select {height: 40px; font-size: 12px; padding: 0 26px 0 12px; background-size: 8px auto; background-position: right 12px center; width: 90px; margin-right: 3px;}
	#board .list_top .search_bx input {height: 40px; padding: 0 46px 0 12px; font-size: 12px; width: calc(100% - 93px);}
	#board .list_top .search_bx .btn {width: 46px; height: 40px; background-size: 22px auto;}
	
	
	/* 리스트 */
	.no_list{padding: 50px 0; font-size: 12px;}
	
	.boardS01 ul li a {height: 80px;}
	.boardS01 ul li a:after {width: 40px; height: 40px; background-size: 6px auto; right: 0px; margin-top: -20px;}
	.boardS01 ul li a .date {width: 47px;}
	.boardS01 ul li a .date strong {font-size: 33px; line-height: 31px;}
	.boardS01 ul li a .date span {font-size: 10px; line-height: 13px;}
	.boardS01 ul li a .txt {padding: 0 0 0 15px; width: calc(100% - 117px);}
	.boardS01 ul li a .txt strong {margin-bottom: 7px; font-size: 15px; line-height: 18px;}
	.boardS01 ul li a .txt p {font-size: 11px; line-height: 13px;}
	
	
	/* 페이징 */
	#board .page_bx {padding-top: 25px;}
	#board .page_bx .num {line-height: 21px; width: 18px; margin: 0 3px; font-size: 8px;}
	#board .page_bx .num span {line-height: 12px;}
	#board .page_bx .page_first {width: 21px; height: 21px; background-size: 20px auto; margin-right: 5px;}
	#board .page_bx .page_prev {width: 21px; height: 21px; background-size: 20px auto; margin-right: 8px;}
	#board .page_bx .page_next {width: 21px; height: 21px; background-size: 20px auto; margin-left: 8px;}
	#board .page_bx .page_last {width: 21px; height: 21px; background-size: 20px auto; margin-left: 5px;}
	

	/* 상세 */
	#board .view_bx .subject {padding: 17px 10px; min-height: 21px;}
	#board .view_bx .subject strong {font-size: 16px; line-height: 21px;}
	#board .view_bx .subject p {font-size: 12px;}
	#board .view_bx .file {padding: 9px 10px 7px;}
	#board .view_bx .file span {font-size: 12px; line-height: 25px; width: 58px;}
	#board .view_bx .file ul {width: calc(100% - 58px);}
	#board .view_bx .file ul li {font-size: 12px; line-height: 25px;}
	#board .view_bx .file ul li::after {font-size: 12px; margin-right: 5px;}
	#board .view_bx .file ul li a {line-height: 25px;}
	#board .view_bx .txt {padding: 17px 10px 39px; font-size: 12px; line-height: 19px;}
	#board .view_bx .page {margin-top: 25px; min-height: 35px;}
	#board .view_bx .page .page_btn {font-size: 0; padding: 0!important; width: 35px; height: 35px;}
	#board .view_bx .page .page_btn::before {width: 35px; height: 35px; background-size: 6px auto!important;}
	#board .view_bx .page .btn {line-height: 35px; width: 90px; font-size: 14px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* 리스트 상단 */
	#board .list_top .count {width: 100%; text-align: center; margin-bottom: 12px;}
	#board .list_top .search_bx {position: relative; width: 100%; top: auto; right: auto;}
	

	/* 상세 */
	#board .view_bx .subject strong {width: 100%;}
	#board .view_bx .subject p {width: 100%; text-align: left; display: block; margin-top: 5px;}
}