ul.gall_list * {transition: all 0.3s ease-out; word-break: normal; }
ul.gall_list {width:100%; display:flex; flex-wrap:wrap; gap:20px; }
ul.gall_list li {width:calc(25% - 15px);  position:relative; cursor:pointer }


ul.gall_list li .img {position:relative; height:400px; overflow:hidden; cursor:pointer; }
ul.gall_list li img {width:100%;  }
ul.gall_list li div.img_bg {width:100%; height:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);  }
ul.gall_list li:hover div.img_bg {border:1px solid red; width:115%; height:115%}


ul.gall_list li .text { margin-top:10px; box-sizing:border-box; color:#fff; box-sizing:border-box;}
ul.gall_list li h5 {font-size:1.1em; color:#fff; font-weight:500; margin-bottom:3px; line-height:1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; }
ul.gall_list li h5 b {font-weight:700}
ul.gall_list li h5 + p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
ul.gall_list li p.date {font-size:15px; margin-top:4px; letter-spacing:0; color:#fff; font-weight:300;  display: -webkit-box; -webkit-line-clamp: 20; -webkit-box-orient: vertical;}

 

 @media all and (max-width:800px) {
		ul.gall_list {gap:20px 0; justify-content:space-between }
		ul.gall_list li {width:49% }
		ul.gall_list li .img {height:70vw }
		ul.gall_list li p.date {font-size:13.5px; color:rgba(255,255,255,.8)}
 

}
 

.table { width: 100%; display: table; }

.table .row {display: table-row; font-size:16px; }
.table .row.th {font-weight:500; color: #fff; background:#333; }
 
 
.table .cell { padding:13px 12px; display:table-cell; vertical-align:middle; text-align:Center; border-bottom:1px solid #666; color:#fff}
.table .cell a {color:#fff}
.table .row.th .cell { color: #fff; padding:11px 12px; border-bottom:none}

.table .cell.td_tit {width:55%; text-align:left; line-height:1.3; font-size:1em; font-weight:400}
.table .cell.td_tit a:hover {text-decoration:underline}
 
.table .cell.td_tit a {color:#fff}

.table .cell.td_tit span {background-color:var(--main_c); color:#fff; width:20px; height:20px; display:inline-flex; align-items:center; font-weight:300; font-size:13px;  justify-content:center; line-height:0; border-radius:2px; margin-left:5px; vertical-align:5px; box-sizing:border-box}
.table .cell.no {width:50px; }
.table .cell.class {width:100px; }
 

@media screen and (min-width:800px) {
 
  .table .cell.name {width:100px; white-space:nowrap; }
  .table .cell.date {width:100px; white-space:nowrap;  }
  .table .cell.hit {width:80px; white-space:nowrap; }

}
 
@media screen and (max-width:1100px) {
	 .table .cell.td_tit {width:50%; }
 }


@media screen and (max-width:800px) {
	.table { display: block; font-size:1em }
  .table * {line-height:1.3}
	.table .row {padding:13px 2%; display: block; border-bottom:1px solid #ddd}
	.table .row.th {padding: 0; height: 2px; }
	.table .row.th .cell { display: none; }
	 
	.table .row .cell:before { margin-bottom: 3px; content:attr(data-title); text-transform: uppercase;color:#555;}
	.table .cell { padding:0; padding-right:5px; display: block; border-bottom:none; text-align:left}
 	.table .cell_col {display:inline-block; width:auto; font-size:.9em; }
	 
	.table .cell.td_tit {width:100%; font-size:1.05em; display:inline-block}
  .table .cell.no {display:none}
	.table .cell_col.cell_select {width:100%; margin-bottom:8px }

 
}
 
 
/*뷰페이지*/
 
.board_view_wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* 제목 */
.view_title h3 {
  font-size: 28px;
  font-weight: 700;
  padding-bottom:10px;
 }
.view_title h3 + P {margin-top:-10px}


/* 정보 */
.view_info {
  display: flex;
  gap: 20px;
  padding: 15px 0;
  font-size:.9em;
  color: #fff;
  border-bottom: 1px solid #666;
 }

.view_info b {
  color: #fff;
  margin-right: 6px;
}

/* 첨부파일 */
.view_file {
  padding: 15px 0;
  border-bottom: 1px solid #666;
 font-size:.9em;
 }

.view_file a {
  margin-left: 10px;
  color: #005bac;
  text-decoration: underline;
}

/* 내용 */
.view_content { padding: 40px 0; }

/* 이전/다음글 */
.view_nav { margin-top: 30px; border-top: 1px solid #666; }

.view_nav dl { display: flex; padding: 12px 0; border-bottom: 1px solid #666; font-size:.9em; }
.view_nav dt { width: 80px; font-weight: 600; color: #fff; }
.view_nav dd a { color: #fff; }
.view_nav dd a:hover { text-decoration: underline; }

/* 버튼 */
.view_btns { margin-top: 40px; text-align: center; }

.btn_list { display: inline-block; padding: 12px 40px; border: 1px solid #fff; color: #fff; font-weight: 600; }

.btn_wrap {width:100%; display:inline-block }
 
 a.list_btn {
  text-align: center;
  line-height: 31px;
  padding: 0 20px;
  font-weight: 400;
  font-size: 0.90em;
  float: right;
  margin-top: 15px;
  margin-left: 5px;
  background-color: #fff;
	border:1px solid #ddd; 
  border-radius: 3px;
  color: #444;
}


 
/*페이지*/


.page {text-align:center;  width:100%; margin-top:30px; display:inline-block; font-size:0}
.page ul { width:100%; text-align:center; gap:5px; display:flex; justify-content:Center }
.page li { display:inline-block; font-size:14px; font-weight:300; }
 
.page li.angle {margin:0 10px}
.page a { border-radius:3px; display:inline-block; text-decoration:none; vertical-align:middle; width:28px; line-height:28px; height:28px; background: rgba(255, 255, 255, 0.1); color:#999; text-align:center; }
.page li.angle a {background:none}

 
.page a.ov { background:var(--main_c); color:#fff; }

 
 

/*search*/
 						
.search {margin-top:30px; width:100%; display:flex; justify-content:flex-end}
.search input {width:220px; background: rgba(255, 255, 255, 0.2); border:none; padding-left:10px; font-size:15px; color:#fff; }
.search a {background-color:#333; color:#fff; line-height:36px; font-size:15px; font-weight:400; padding:0 20px; display:inline-block; vertical-align:middle;}
									  
 


.faq_list { border-top: 2px solid #666; }

.faq_item { border-bottom: 1px solid #666; }

.faq_q { width: 100%; padding: 15px 10px; display: flex; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; text-align: left; font-size:1em; color:#fff; }
.faq_q .farrow { width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .3s ease; }
.faq_item.active .faq_q .farrow { transform: rotate(-135deg); }
.faq_a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq_a p { padding: 0 10px 20px; }


.tbl { width:100%; border-collapse:collapse; border:1px solid #666; margin-top:10px; font-size:16px}
.tbl th, .tbl td { border-bottom:1px solid #666; background:rgba(0,0,0,.7); padding:12px; vertical-align:middle;  line-height:1.35; }

.tbl + h4 {margin-top:50px; }

.tbl .cell-head { text-align:left; width:160px; font-weight:400 }
.tbl .input, .textarea, .select {  box-sizing:border-box;  padding:8px 10px; height:42px; outline:none; font-size:.95em}
.tbl .textarea {width:100%}
.tbl .textarea{ min-height:92px; resize:vertical; }

.tbl .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tbl .row > * { flex:0 0 auto; }

.tbl .grow { flex:1 1 auto; min-width:180px; }

.tbl .checks { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.tbl .checks label { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }
.tbl .note { font-size:.93em; color:#fff; line-height:1.45; margin-top:9px; font-weight:200; }
 
.tbl .narrow { width:120px; min-width:120px; }
.tbl .small { width:90px; min-width:90px; }
.tbl input {border-radius:5px}
.tbl input[type="date"] { width:150px;  -webkit-appearance: none; appearance: none; text-align:left }
.tbl input[type="time"] { width:150px; -webkit-appearance: none; appearance: none;  text-align:left  }
.tbl input[type="file"] {font-size:15.5px  }
.tbl input.input100 {width:100%}

.tbl input[type="button"] {border:none; height:28px; width:40px; background-color:#fff; border-radius:3px; color:#333}
.tbl button {border:none;  height:28px; width:40px; background-color:#fff; border-radius:3px; color:#333}
.tbl .delete-time-row {border:1px solid #ddd; width:20px; line-height:0; border-radius:2px; height:20px; display: flex; justify-content: center; align-items: center; }
.tbl .date-remove-btn {border:1px solid #ddd; width:20px; line-height:0; border-radius:2px; height:20px; display: flex; justify-content: center; align-items: center; }
.tbl .extra-remove-btn {border:1px solid #ddd; width:20px; line-height:0; border-radius:2px; height:20px; display: flex; justify-content: center; align-items: center; }


.textarea1 {width:100%; margin-top:10px; border:1px solid #ddd; padding:10px; box-sizing:border-box; height:200px}
.row  + .row  { margin-top:5px }
 .checks  + .checks  { margin-top:5px }


 @media all and (max-width:800px) {
		.tbl {border:none; padding:0; font-size:15px; border-top:1px solid rgba(255,255,255,.5)}
		.tbl th, .tbl td {display:block; width:100%; box-sizing:border-box; border:none; border-bottom:1px solid  rgba(255,255,255,.5); padding:13px 0}
		.tbl .input, .textarea, .select {font-size:15.5px}
		.tbl .cell-head {font-size:1.1em; font-weight:600;  width:100%; padding-bottom:0; border:none; margin-bottom:-4px}
		.tbl .narrow {width:100%}
		.tbl .row {gap:5px}
		.tbl .checks {gap:6px 5px; font-size:14px}
		.tbl .checks label {color:rgba(255,255,255,.9)}
		.tbl input.m_input100 {width:100% !important}

		.tbl input[type="date"] {width:38vw; color:#333}
		.tbl input[type="time"] {width:38vw; color:#333}
		.tbl .input, .textarea, .select {    padding:8px 5px;  }
		
		
 }