@charset "utf-8";

.searchBox {border: 1px solid #ddd; background: #f5f5f5; padding:20px; text-align:center; margin-bottom:40px; }
.searchBox > * {vertical-align: top; border:1px solid #ccc; padding:0 10px; line-height:40px; height:40px; font-size:15px; margin:0 2px; }
.searchBox input[type="text"] {width:300px;}
.searchBox a,
.searchBox input[type="submit"] { display:inline-block; background:#555; color:#fff; border:0; padding:0 20px;}

.board .list > p { width:50%; font-size:17px; margin-bottom:10px; }
.board .list > p.fr {text-align:right; }
.board .list > p span {color:#019139; font-weight:600; }
.board .list ul {clear:both; border-top:2px solid #333;}
.board .list li {border-bottom:1px solid #eee;}
.board .list li a {display:block; overflow:hidden; }
.board .list li a:hover {background:#555;}
.board .list li a:hover span {color:#fff;}
.board .list li span {display:block; float:left; padding:15px 5px; text-align:center; font-size:15px; color:#666; }
.board .list li span.no {width:8%;}
.board .list li span.title {width:58%; text-align:left; font-size:16px; color:#222; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.board .list li span.write {width:12%;}
.board .list li span.date {width:12%;}
.board .list li span.hit {width:10%;}
.boardWrap h4 {font-size:55px; font-weight:600; color:#1f677f; text-align:center; margin-bottom:20px; font-family: 'TmonMonsori'; }

@media all and (max-width:1023px){
  .board .list li span.hit {display:none;}
  .board .list li span.title {width:62%;}
  .board .list li span.write {width:15%;}
  .board .list li span.date {width:15%;}
}
@media all and (max-width:768px){
  .board .list li a {padding:10px;}
  .board .list li span {padding:5px 10px 5px 0; font-size:14px;}
  .board .list li span.no {display:none;}
  .board .list li span.title {width:100%; font-size:17px; padding:5px 0;}
  .board .list li span.write, .board .list li span.date {width:auto;}
}

.board .button {margin-top:30px; overflow:hidden; }
.board .button a { display:inline-block; padding:10px 20px; border-radius:10px; border:1px solid #555; font-weight:600;}
.board .button a.point { background:#555; color:#fff; font-weight:400; }

.pagination {text-align:center; margin-top:30px;}
.pagination a { display:inline-block; width:30px; line-height:30px; height:30px; text-align:center; font-size:14px; border-radius:50%; }
.pagination a.active {background:#019139; color:#fff; font-weight:600; }
.pagination a.page-arrow {position:relative; text-indent:-9999px; }
.pagination a.page-arrow::before,
.pagination a.page-arrow::after {content:''; position:absolute; left:50%; top:50%; margin:-4px 0 0 -4px; width:8px; height:8px; border-left:2px solid #666; border-top:2px solid #666; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.pagination a.page-arrow::after {margin:-4px 0 0 1px;}
.pagination a.page-arrow.next::before,
.pagination a.page-arrow.last::before,
.pagination a.page-arrow.last::after { transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.pagination a.page-arrow.next::after, .pagination a.page-arrow.prev::after {display:none;}

.board .view .top {border-top:2px solid #333; text-align:center;}
.board .view .top dt { border-bottom:1px solid #eee; font-size:20px; font-weight:600; padding:15px 0; }
.board .view .top dd { border-bottom:1px solid #eee; padding:10px 0; background:#f7f7f7;}
.board .view .top dd p {display:inline-block; font-size:15px; margin:0 10px; }
.board .view .cont {padding:40px;}
.board .view .file { position:relative; padding:20px 20px 20px 300px; border-top:1px solid #eee; border-bottom:1px solid #eee; }
.board .view .file::before {content:''; position:absolute; left:0; top:0; width:250px; height:100%; background:#f7f7f7;}
.board .view .file dt {position:absolute; left:0; top:0; width:250px; text-align:center; padding:20px; font-weight:600; }
@media all and (max-width:768px){
  .board .view .file { padding:20px 20px 20px 180px; }
  .board .view .file::before {width:150px;}
  .board .view .file dt {width:150px;}
  .board .view .file dd a {font-size:14px;}
}
@media all and (max-width:480px){
  .board .view .top dd {padding:10px 20px;}
  .board .view .top dd p { position:relative; display:block; text-align:left; padding:5px 0 5px 13px;}
  .board .view .top dd p::before {content:''; position:absolute; left:0; top:15px; width:4px; height:4px; border-radius:50%; background:#555; }
  .board .view .cont {padding:30px 20px;}
  .board .view .file {padding:0;}
  .board .view .file::before {display:none;}
  .board .view .file dt { position:relative; width:100%; background:#f7f7f7; padding:10px;}
  .board .view .file dd {padding:15px;}
}

.board .writeForm { position:relative; border-top:2px solid #333; }
.writeForm::before {content:''; position:absolute; left:0; top:0; width:30%; height:100%; background:#f7f7f7; z-index:-1; }
.board .writeForm dl {overflow:hidden; border-bottom:1px solid #eee;}
.board .writeForm dt {float:left; width:30%; padding:10px 20px; font-weight:600; color:#222; }
.board .writeForm dd {float:right; width:70%; padding:10px 20px;}
.board .writeForm dd input,
.board .writeForm dd textarea,
.board .writeForm dd select {line-height:40px; height:40px; border:1px solid #bbb; padding:0 10px; border-radius:5px; max-width:100%; width:300px; margin:2px 0;}
.board .writeForm dd input[type="file"] { height:auto; line-height:normal; padding:10px;}
.board .writeForm dd textarea { width:100%; height:300px; line-height:1.5; padding:10px;}
.board .writeForm dd select {width:auto;}
.board .writeForm .email {width:150px;}
.board .writeForm .phone {width:90px;}
.board .writeForm a.btn { display:inline-block; background:#555; color:#fff; line-height:40px; height:40px; border-radius:5px; padding:0 15px; margin-left:5px; font-size:14px;}
.board .writeForm .phoneCode {display:none; margin-top:10px;}
@media all and (max-width:768px){
  .board .writeForm .email {width:90px;}
  .board .writeForm .phone {width:60px;}
}
@media all and (max-width:480px){
  .board .writeForm .email {width:44%;}
  .board .writeForm .phone {width:50px;}
}

/*김현수 작업*/
.boardWrap .btn {clear:both; text-align:center; }
.boardWrap .btn a { position:relative; display:inline-block; margin:0 auto; font-size:20px; font-weight:600; border-bottom:0; padding:0; } /*0309*/
@media all and (max-width:768px){
  .boardWrap .btn a {font-size:18px;}
}
.boardWrap h4 {font-size:70px; font-weight:600; color:#1f677f; text-align:center; margin-bottom:20px; font-family: 'TmonMonsori'; /* display:none; */ }
.boardWrap .tab { background:none; text-align:center; margin-bottom:5%; border-bottom:1px solid #ddd; } /*0215*/
.boardWrap .tab a {position:relative; display:inline-block; margin:0 30px 0 0; font-size:30px; color:#aaa; line-height:48px; }/*0215*/
.boardWrap .tab a.on {font-weight:600; color:#2f62ae;}/*0210*/
.boardWrap .tab a.on::before {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#333;}/*0215*/





/*.boardWrap .tab a:hover {font-weight:600; text-decoration:underline; }*/ /*0210*/
.boardWrap .searchInput {text-align:right;}
.boardWrap .searchInput input {border:0; height:30px; font-size:18px; vertical-align: top; }
.boardWrap .searchInput a { display:inline-block; width:30px; height:30px; background:url('/img/sub/boardSearch.jpg') no-repeat center; color:transparent; vertical-align: top; }
.boardWrap.list .list a { position:relative; float:left; width:22.75%; minheight:500px; margin:40px 0 0 3%; border:1px solid #ddd; padding:40px 50px; transition: all 0.2s ease; text-align:center}
.boardWrap.list .list a img { margin-bottom:5% }
.boardWrap.list .list a:nth-child(4n+1) { clear:both; margin:40px 0 0 0; text-align:center}
.boardWrap.list .list a:hover {border:1px solid #1f677f; box-shadow:0px 10px 20px 1px rgba(0, 0, 0, 0.2); }
.boardWrap.list .list p.subj { display:-webkit-box; text-overflow:ellipsis; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow:hidden; max-height:102px; line-height:34px; margin-bottom:25px; font-size:24px; font-weight:600;  }
.boardWrap.list .list p.subj img { width:100%; padding-bottom: 3% }
.boardWrap.list .list p.txt { display:-webkit-box; text-overflow:ellipsis; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow:hidden; line-height:30px; height: 90px; font-size:18px; margin-bottom: 50px}
.boardWrap.list .list p.date { bottom:40px; font-size:16px; text-align:center; margin: 0 auto}
.boardWrap.list .btn {padding-top:50px; }



a.moreBtn::before {content:''; position:absolute; left:0; bottom:0; top:auto; right:auto; width:0; height:2px; background:#111; transition:width 0.6s ease; } /*0309*/
a.moreBtn:hover::before {width:100%;}

/*영상리스트*/
.boardWrap.list .movie a { height:430px; padding:240px 50px 40px; } /*0309*/
.boardWrap.list .movie iframe { position:absolute; width:100%; height:200px; top:0; left:0; } /*0309*/
/*달력리스트*//*0309 추가시작*/
.boardWrap.list .calSrch { text-align:center; margin:50px 0 20px; }
.boardWrap.list .calSrch > * {display:inline-block; margin:0 5px; vertical-align:top; line-height:40px; height:40px; }
.boardWrap.list .calSrch > a { position:relative; text-indent:-9999px; width:40px; }
.boardWrap.list .calSrch > a::before {content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-top:3px solid #222; border-left:3px solid #222; transform:rotate(-45deg);}
.boardWrap.list .calSrch > a.next::before { transform:rotate(135deg);  margin:-5px 0 0 -8px; }
.boardWrap.list .calSrch select { padding:0 5px; font-size:16px; border:1px solid #ddd; }
.boardWrap.list .calendar .mark {text-align:right; display:none}
.boardWrap.list .calendar .mark p { display:inline-block; position:relative; padding:1px 0 1px 30px; margin-left:10px; }
.boardWrap.list .calendar .mark p::before { position:absolute; left:0; top:50%; margin-top:-12.5px; width:25px; height:25px; line-height:25px; border-radius:50%; text-align:center; color:#fff; font-size:14px; }
.boardWrap.list .calendar .mark p.co::before { content:'Co'; background:#eb6381; }
.boardWrap.list .calendar .mark p.ex::before { content:'Ex'; background:#55a5be; }
.boardWrap.list .calendar .mark p.ev::before { content:'Ev'; background:#b0b3dc; }
.boardWrap.list .calendar .cal { overflow:hidden; margin-top:20px; }
.boardWrap.list .calendar table { width:100%; table-layout:fixed; border-top:2px solid #000; margin-left:-1px;  }
.boardWrap.list .calendar table th { background:#e1e1e1; border-bottom:1px solid #ccc; border-left:1px solid #ccc; padding:10px 0;  }
.boardWrap.list .calendar table td { position:relative; border-bottom:1px solid #ccc; border-left:1px solid #ccc; padding:45px 10px 10px; height:100px;}
.boardWrap.list .calendar table td .day { position:absolute; left:10px; top:10px; font-weight:500; }
.boardWrap.list .calendar table td:nth-child(1) .day  { color:#ce0000; }
.boardWrap.list .calendar table td:nth-child(7) .day  { color:#0066ce; }
.boardWrap.list .calendar table td a { display:block; font-size:15px; }
.boardWrap.list .calendar table td a::before { display:inline-block; width:25px; height:25px; line-height:25px; border-radius:50%; text-align:center; color:#fff; font-size:14px; margin-right:5px; }
.boardWrap.list .calendar table td a.co::before { content:'Co'; background:#eb6381; }
.boardWrap.list .calendar table td a.ex::before { content:'Ex'; background:#55a5be; }
.boardWrap.list .calendar table td a.ev::before { content:'Ev'; background:#b0b3dc; display:none}
.boardWrap.list .calendar .detailPop { top:50%; } /*0311*/
.boardWrap.list .calendar .detailPop.on { left:50%;top:50%; transform:translate(-50%,-50%); width:950px; height:450px; } /*0311*/
.boardWrap.list .calendar .detailPop dt { position:absolute; left:-99999px; }
.boardWrap.list .calendar .detailPop li { position:relative; padding:5px 0 5px 130px; min-height:40px; }
.boardWrap.list .calendar .detailPop li strong { position:absolute; left:10px; top:5px; }
/*0309 추가끝*/




@media all and (max-width:1200px){
  .boardWrap h4 {font-size:50px;}
}
@media all and (max-width:1023px){
  .boardWrap .tab a { margin:0 20px 0 0; }/*0215*/
  .boardWrap.list .list a { width:31.33%; margin:30px 0 0 3%; }
  .boardWrap.list .list a:nth-child(4n+1) { clear:none; margin:30px 0 0 3%;}
  .boardWrap.list .list a:nth-child(3n+1) { clear:both; margin:30px 0 0 0;}
  .boardWrap.list .calendar .detailPop.on { width:90%; } /*0311*/
}
@media all and (max-width:768px){
  .boardWrap h4 {font-size:35px;  font-family: 'TmonMonsori'; margin-bottom:10px}
  .boardWrap .tab  {text-align:center; margin-bottom:5%; border:1px solid #ddd;}/*0215*/
  .boardWrap .tab a { margin:5px;  font-size:17px;line-height:40px; padding: 0px 3px; }/*0215*/
  .boardWrap.list .list a { width:48%; height:300px; margin:30px 0 0 4%; padding:30px 30px; }
  .boardWrap.list .list a:nth-child(3n+1) { clear:none; margin:30px 0 0 4%; height:auto}
  .boardWrap.list .list a:nth-child(2n+1) { clear:both; margin:30px 0 0 0;}
  .boardWrap.list .list p.subj {font-size:20px; height:68px;  -webkit-line-clamp:2;}
  .boardWrap.list .list p.txt {font-size:16px; line-height:1.5}
  .boardWrap.list .list p.date {font-size:14px; left:30px; }
  .boardWrap.list .movie a { height:370px; padding:220px 30px 30px; } /*0309*/

  .boardWrap.list .calendar table th {display:none;}
  .boardWrap.list .calendar table td { overflow:hidden; width:100% !important; padding:0; height:auto; padding:0; }
  .boardWrap.list .calendar table colgroup {display:none;}
  .boardWrap.list .calendar table td.on {display:block;}


  .boardWrap.list .calendar table td .day { position:relative; left:auto; top:auto; float:left; width:60px; padding:5px; }
  .boardWrap.list .calendar table td a { margin:5px 0;}
  .boardWrap.list .calendar .detailPop li {min-height:30px; } /*0309*/
}




@media all and (max-width:480px){
.boardWrap .searchInput input {font-size:13px; font-weight:normal }
	.boardWrap .tab { background:none; text-align:center ; border:1px solid #ddd; } /*0215*/



  .boardWrap .tab a {font-size:15px; line-height:29px; margin:3px; padding:0px 4px;}
  .boardWrap.list .list a { width:100%; height:auto; margin:20px 0 0 0 !important; padding:25px; }
  .boardWrap.list .movie a { height:370px; padding:220px 25px 25px; } /*0309*/
 .boardWrap.list .list p.subj {font-size:20px; height:30px !important;  -webkit-line-clamp:2;}
}



.boardWrap.view .top {position:relative; border-bottom:1px solid #ccc; padding-bottom:60px; margin-bottom:60px; }
.boardWrap.view .top .subj {font-size:35px; font-weight:500; margin:0 100px 20px 0; line-height:1.4;}
.boardWrap.view .top .date {font-size:17px;}
.boardWrap.view .top a.back {position:absolute; right:0; top:20px; width:45px; height:30px; background:url('/img/sub/boardBack.png') no-repeat center; text-indent:-9999px; }
.boardWrap.view .txt { padding-bottom:60px; }
.boardWrap.view .btn {border-top:1px solid #ccc; padding-top:60px; }
.boardWrap.view .listBtn { border:1px solid #ccc; padding:20px 40px; transition: all 0.2s ease; }
.boardWrap.view .listBtn:hover {color:#fff;}
.boardWrap.view .listBtn::before {content:''; position:absolute; left:0; bottom:0; width:100%; height:0; background:#1f677f; transition:height 0.6s ease; z-index:-1;}
.boardWrap.view .listBtn:hover::before {height:100%;}
@media all and (max-width:768px){
  .boardWrap.view .top .subj {font-size:30px; margin:0 0 20px;}
  .boardWrap.view .top a.back {top:auto; bottom:55px;}
  .boardWrap.view .listBtn {padding:15px 30px;}
		.filedownBtDiv {
	width:100% !important
}
}
@media all and (max-width:480px){
  .boardWrap.view .top .subj {font-size:20px;}
		.filedownBtDiv {
	width:100% !important
}
}


.pagingBtn { width:360px; margin:0 auto; }
.pagingBtn > strong { font-size:18px; font-weight:bold; width:20px; background-color:#136; color:#fff; padding:5px 20px; margin-right:20px; }
.pagingBtn > a:not(.prev), .pagingBtn > a:not(.next) { font-size:16px !important; margin-right:20px; }
.pagingBtn > .prev { float:left; }
.pagingBtn > .next { float:right; }


.filedownBtDiv {
	background: #2f62ae url(/img/sub/btnIcon.png) no-repeat left;
	background-position:5%;
	padding: 10px 20px 10px 60px;
	border-radius: 20px;
	width:20%;
	margin-bottom:1rem
}
.filedownBtDiv a {
	color:#fff !important
}
