@charset "utf-8";

/* =================================================================
* 파일명: board.css (효율화 버전)
* 작업자: 유상민 / 김수연 / 김준연
* 작업일: 2024. 08. 20 / 2025. 12. 09 (최적화) / 2026. 01. 23
/* =============================================================== */

/* root */
:root {
  /* ==================== 🔍 검색영역 (Search Form) ==================== */
  --srcform-bg: #fff;
  /* 배경 */
  --srcform-border: #d9d9d9;
  /* 보더 */
  --srcform-beforeBg: #f1f1f1;
  /* 그림자 */
  --srcform-inputBdr: #d9dadc;
  /* input 보더 */
  --srcform-btn: #ffffff;
  /* 버튼 텍스트 */
  --srcform-btnBg: #444b59;
  /* 버튼 배경 */
  --srcform-btnBgHover: #757d8e;
  /* 버튼 배경(호버) */
  --srcform-btnBdr: #3a404d;
  /* 버튼 보더 */
  --srcform-btnBdrHover: #444b59;
  /* 버튼 보더(호버) */

  /* ==================== ✍️ 폰트 가중치 (Font Weight) ==================== */
  --fw-thin: 300;
  /* 폰트 thin */
  --fw-regular: 400;
  /* 폰트 regular */
  --fw-medium: 500;
  /* 폰트 medium */
  --fw-bold: 600;
  /* 폰트 bold */

  /* ==================== 📋 테이블 (Table) ==================== */
	

  --th-fw: 600;
  /* th 굵기 */
  --th-color: #000;
  /* th 색상 */
  --th-bg: #f8f8f8;
  /* th 배경 */
  --brdr-color: #ccc;
  /* border color */
  --tbl-fs: 16px;
  /* 테이블 폰트크기 */
  --tbl-inputHeight: 36px;
  /* 테이블 input 크기 */
  --tbl-inputPadding: 6px 10px;
  /* 테이블 input padding */
  --inputBdr: #ccc;
  /* 테이블 input 보더 */

  /* ==================== 🏷️ 게시판/공통 (Board/Global) ==================== */
  --board-topBdr: #454b56;
  --board-btmBdr: #cdcfd3;

  /* 추가 변수 (통일성 강화) */
  --color-default-text: #000;
  --color-secondary-text: #333;
}

/* --------------------------------------------
 * 검색폼
/* ------------------------------------------ */
.searchForm * {
  box-sizing: border-box;
}

.searchForm {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  padding: 15px 20px;
  background: var(--srcform-bg);
  border: 1px solid var(--srcform-border);
  text-align: center;
  justify-content: center;
}

.searchForm:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -1px;
  display: block;
  width: 100%;
  height: 3px;
  background: var(--srcform-beforeBg);
}

.searchForm input,
.searchForm select {
  vertical-align: middle;
}

.searchForm input[type="text"],
.searchForm input[type="date"] {
  height: var(--tbl-inputHeight);
  padding: var(--tbl-inputPadding);
  border: 1px solid var(--srcform-inputBdr);
}

.searchForm input[type="submit"],
.searchForm input[type="button"],
.searchForm a.btn,
.searchForm button.btn {
  height: var(--tbl-inputHeight);
  padding: 0 20px;
  margin: 0;
  border: 1px solid var(--srcform-btnBdr);
  background: var(--srcform-btnBg);
  letter-spacing: 0;
  color: var(--srcform-btn) !important;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
  vertical-align: top !important;
  border-radius: 3px;
  line-height: 31px;
  transition: 0.4s ease;
  font-size: 14px;
}

.searchForm select {
  min-width: 90px;
  height: var(--tbl-inputHeight, 48px);
  padding: 0 35px 0 15px;
  font-size: 16px;
  border: 1px solid var(--srcform-inputBdr, #d9e0e9);
}

.searchForm input[type="text"] {
    /* flex: 2 1 200px; */
    width: 50%;
}

.searchForm label:not(.sr-only) {
  margin: 2px 0;
  text-align: left;
  font-size: 15px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.searchForm label.inpt_radio,
.searchForm label.inpt_chk {
  width: auto;
}

.searchForm>div {
  margin-bottom: 5px;
}

.searchForm input[type="checkbox"] {
  border: 1px solid var(--srcform-inputBdr);
  background: #fff;
}

.searchForm.left {
  text-align: left;
}

.searchForm.right {
  text-align: right;
}

.searchForm div {
  margin-bottom: 10px;
}

.searchForm div:last-child {
  margin-bottom: 0;
}

.searchForm .date {
  background: url("../images/calendar-month.svg") no-repeat right center #fff;
  padding-right: 25px !important;
}

/* 게시판 리스트보기 개수 - Flexbox로 정리 */
.tbl-top {
  position: relative;
  margin-bottom: 1em;
  display: flex;
  justify-content: space-between;
  /* 양쪽 정렬 */
  align-items: center;
  /* 수직 중앙 정렬 */
  text-align: initial;
  /* 자식 요소에 영향을 주지 않도록 초기화 */
}

/* float 기반의 .tbl-top:after는 Flexbox 사용으로 불필요해져 제거 */
/* .tbl-top:after { content: ""; display: block; clear: both; } */

.tbl-top .fl {
  /* float: left; margin-right:auto; 제거 */
  position: relative;
  display: flex;
  align-items: center;
  min-height: 33px;
  margin-right: auto;
}

.tbl-top .fr {
  /* float: right; margin-left:auto; 제거 */
  position: relative;
  margin-left: auto;
}

.tbl-top select {
  display: inline-block;
  height: 36px;
}

.tbl-top input {
  cursor: pointer;
}

.tbl-top .fr .btn.left,
.tbl-top .fr .btn.right {
  vertical-align: middle;
  background: #637895;
  border: 1px solid #637895;
  color: #fff !important;
  /* 여기는 유지 (다른 버튼 스타일과 충돌 방지) */
  text-align: center !important;
  /* 여기는 유지 */
  font-size: 16px !important;
  /* 여기는 유지 */
  padding-top: 5px;
}

.tbl-top .fr .btn.left:hover,
.tbl-top .fr .btn.right:hover {
  background: #394e6b;
  border: 1px solid #394e6b;
}

/* 반응형 테이블 */
/* 테이블 공통 기본 스타일 */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--tbl-fs);
}

/* 테이블 공통 th, td 속성 통합 및 margin-left: -1px 제거 */
.tbl-basic th,
.tbl-basic td,
.tbl-board th,
.tbl-board td,
.tbl-control th,
.tbl-control td {
  vertical-align: middle;
  text-align: center;
  overflow-wrap: break-word;
  /* word-wrap 표준화 */
  word-break: keep-all;
  border: 1px solid transparent;
}

.tbl-basic ,.tbl-board {
  width: 100%;
  border-top: 2px solid #000;
  border-bottom: 1px solid #ddd;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 10px;
}

.tbl-basic th,.tbl-board th {
  font-weight: var(--th-fw);
  color: var(--th-color);
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 10px;
  vertical-align: middle;
  word-wrap: break-word;
  word-break: keep-all;
  background-color: #f9f9f9;
}

.tbl-basic td,.tbl-board td {
  border: 1px solid #ccc;
  padding: 10px;
  vertical-align: middle;
  word-wrap: break-word;
  word-break: keep-all;
  text-align: center;
}

/* thead, tbody, tfoot th 공통 속성 */
.tbl-basic thead th,
.tbl-basic tbody th,
.tbl-basic tfoot th,
.tbl-board thead th,
.tbl-board tbody th,
.tbl-board tfoot th{
  background-image: none;
}

.tbl-basic thead th,.tbl-board thead th {
  color: var(--color-secondary-text);
  /* #333 */
  background: var(--th-bg);
}

.tbl-basic tbody th,
.tbl-basic tfoot th,
.tbl-board tbody th,
.tbl-board tfoot th {
  color: var(--color-secondary-text);
  /* #333 */
  background-color: var(--th-bg);
}

/* 좌우 정렬 클래스 통합 */
.tbl-basic.left td,
.tbl-board.left td,
.tbl-control.left td {
  text-align: left;
}

.tbl-basic.top td,
.tbl-board.top td,
.tbl-control.top td {
  vertical-align: top;
}

.tbl-basic .noStyle td,
.tbl-board .noStyle td {
  padding: 0;
}

.tbl-basic .toolbar td,
.tbl-board .toolbar td {
  padding: 0;
}

.tbl-basic .date,
.tbl-board .date{
  background: url("../images/ic_calendar.png") no-repeat right center #fff;
}

.tbl-basic.left td,
.tbl-board.left td
{text-align:left!important}


/* 테이블(게시판) */

.tbl-board td.tit a[href="javascript:void(0);"]:hover{
	color: inherit;
	cursor: auto;
}

.tbl-board td input[type="text"],
.tbl-board td input[type="number"],
.tbl-board td input[type="password"],
.tbl-board td input[type="url"],
.tbl-board td input[type="date"],
.tbl-board select {
  height: var(--tbl-inputHeight);
  padding: var(--tbl-inputPadding);
  vertical-align: middle;
  width: 100%;
}

.tbl-board td label, .tbl-board td input {
  vertical-align: middle;
  line-height: normal;
}

.tbl-board td input[type="file"] {
  padding: var(--tbl-inputPadding);
  /* display: inline-block; */
  background: #fff;
}

.tbl-board td .btn-file {
  font-size: 12px;
}

.tbl-board td label {
  vertical-align: middle;
  cursor: pointer;
}

/* 테이블(드래그) */
.list_control {
  display: none;
}

.tbl-wrap {
  overflow: auto;
}

.tbl-control {
  margin-bottom: 10px;
  min-width: 990px;
  font-size: 14px;
  border-top: 2px solid #000;
  border-bottom: 1px solid #ddd;
}

.tbl-control th {
  padding: 7px 10px;
  font-weight: 500;
  color: #333;
  border-bottom-color: #ccc;
  border-color: #ccc;
}

.tbl-control td {
  padding: 7px 10px;
  color: #333;
  border-bottom-color: #ccc;
  border-color: #ccc;
}

.tbl-control thead th {
  color: #333;
  background: var(--th-bg);
}

.tbl-control tbody th {
  color: #333;
}

.tbl-control td table {
  border: 1px solid #cccccc;
  font-size: 14px;
}

.tbl-control td table th {
  background: var(--th-bg);
  font-size: 14px;
}

.tbl-control td table th,
.tbl-control td table td {
  border-bottom: 1px solid #cccccc;
  text-align: left;
  padding: 8px 10px;
  font-size: 14px;
}

.tbl-control .noStyle td {
  padding: 0;
}

.tbl-control .toolbar td {
  padding: 0;
}

.tbl-control td input[type="text"],
.tbl-control td input[type="number"],
.tbl-control td input[type="password"],
.tbl-control td input[type="url"],
.tbl-control td input[type="date"],
.tbl-control select {
  padding: var(--tbl-inputPadding);
  font-size: 13px !important;
  vertical-align: middle;
}

.tbl-control td input[type="file"] {
  border: 1px solid #ccc;
  padding: var(--tbl-inputPadding);
  display: inline-block;
}

.tbl-control td textarea {
  padding: var(--tbl-inputPadding);
}

.tbl-control td .btn-file {
  font-size: 12px;
}

.tbl-control #egovComFileList div {
  margin: 3px 0;
}

.tbl-control #egovComFileList div:first-child {
  margin-top: 15px;
}

.tbl-control #egovComFileList div input[type="button"] {
  display: inline-block;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  margin: 0 10px;
  padding: 2px 10px;
  cursor: pointer;
}

.notice_tag {
  background-color: #017eff;
  color: #fff;
  padding: 5px 12px;
  border-radius: 30px;
  font-size: 12px;
}

.touch {
  display: none;
}

/* 좌우정렬 (!important 사용 최소화) */
/* HTML에서 특정 컴포넌트 클래스(.tbl-basic)에 .left를 조합하여 사용하는 것을 권장 */
.left {
  text-align: left !important;
}

.center {
  text-align: center !important;
}

.right {
  text-align: right !important;
}

.top {
  vertical-align: top !important;
}

.middle {
  vertical-align: middle !important;
}

/* 이전글 다음글 */
.prev-next-zone {
  overflow: hidden;
  border-top: 2px solid #434343;
  margin-top: 20px;
}

.prev-next-zone dt {
  float: left;
  width: 15%;
  border-bottom: 1px solid #d5d5d5;
  border-right: 1px solid #d5d5d5;
  padding: 10px 0;
  text-align: center;
}

.prev-next-zone dd {
  float: left;
  width: 85%;
  border-bottom: 1px solid #d5d5d5;
  padding: 10px;
}

/* 리스트 타이틀 */
.listTitle {
  font-size: 15px;
  color: var(--color-default-text);
  /* #000 */
  vertical-align: middle;
}

/* 리스트 내용 - 통합 */
.listCenter,
.listLeft,
.listRight {
  font-size: 15px;
  color: var(--color-default-text);
  /* #000000 */
  height: 24px;
  vertical-align: middle;
}

.listCenter {
  text-align: center;
}

.listLeft {
  text-align: left;
}

.listRight {
  text-align: right;
}

/* 페이징 */
.paging {
  margin: 50px 0 0;
  text-align: center;
}

.paging .page-wrap {
	display: inline-block;
}

.paging strong {
  vertical-align: top;
}

.paging a,
.paging strong {
  position: relative;
  min-width: 46px;
  height: 46px;
  line-height: 46px;
  text-decoration: none;
  padding: 0 5px;
  color: #656565;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: -1px;
  font-size: 16px;
  display: inline-block;
  transition: background 100ms ease-out, border 100ms ease-out;
}

.paging a:hover,
.paging .current:hover,
.paging a:focus,
.paging .current:focus {
  z-index: 2;
  color: #000;
  background-color: #eeeeee;
  border-color: #ddd;
}

.paging strong {
  display: inline-block;
}
.paging .current,
.paging .current:hover,
.paging .current:focus,
.paging strong {
  z-index: 3;
  color: #fff;
  cursor: default;
  background: #000;
  border-color: #55555b;
  font-family: 'Pretendard', sans-serif !important;
  font-weight:500;
}

.paging>.disabled>span,
.paging>.disabled>span:hover,
.paging>.disabled>span:focus,
.paging>.disabled>a,
.paging>.disabled>a:hover,
.paging>.disabled>a:focus {
  color: #777777;
  background-color: #fff;
  border-color: #ddd;
  cursor: not-allowed;
}

.paging .page-count {
	display: none;
}

.listMore {
  display: none;
}

/* View 페이지 */
.bbs_view_wrap {
  border-top: 2px solid var(--board-topBdr);
  border-bottom: 1px solid var(--board-btmBdr);
}

.bbs_view_tit {
  position: relative;
  padding: 30px 20px;
  border-bottom: 1px solid var(--board-btmBdr);
}

.bbs_view_tit p {
  word-break: keep-all;
  line-height: 150%;
  font-size: 26px;
  color: var(--color-default-text);
  font-weight: var(--fw-bold);
  margin-bottom: 15px;
}

.bbs_view_tit .bbs_info li {
  display: inline-block;
  margin-right: 20px;
  font-size: var(--tbl-fs);
  color: var(--color-default-text);
  width: auto;
}

.bbs_view_tit .bbs_info li span {
	color: #555;
}

.bbs_contents {
  position: relative;
  display: block;
  width: 100%;
  padding: 30px 20px;
  min-height: 250px;
  font-size: var(--tbl-fs);
  word-break: break-word;
}

.bbs_file {
	position: relative;
	display: flex;
	gap: 30px;
	align-items: flex-start;
	padding: 0;
	font-size: var(--tbl-fs);
	border-bottom: 1px solid var(--board-btmBdr);
	padding: 20px;
	background: #fcfdfd;
}
.bbs_file strong {
	display: inline-block;
	margin: 0;
	font-size: 16px;
}
.bbs_file ul {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
    gap: 5px;
    padding: 0;
}
.bbs_file ul li {
	display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 5px;
	width: 100%;
	padding: 0;
}
.bbs_file ul li:first-child {
	margin-top: 0;
}
.bbs_file ul li a {
	position: relative;
    align-items: center;
    gap: 4px;
    color: #0054ae;
}
.bbs_file ul li a i {color: #000;}
.bbs_file ul li .sr_text_wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	margin-left: 15px;
	font-size: 15px;
	color: #444;
}
.bbs_file ul li .sr_text_wrap .sr_more_btn {
	background: transparent;
	border-bottom: 1px solid #777;
	color: #222;
}
.bbs_file ul li .tts_copy {
	margin-left: 18px;
	flex-basis: 100%;
	font-size: 15px;
	color: #444;
}
.file_del_btn {
	font-size: 18px;
	background: none;
}
/* 첨부파일 */
.fileplus {
  position: relative;
  display: inline-block;
  width: 100%;
}

.fileplus input {
  font-size: inherit;
  padding: var(--tbl-inputPadding);
  border: 1px solid #d6d9df;
  vertical-align: top;
  background: #fff;
  height: var(--tbl-inputHeight);
}

.fileplus input[disabled="disabled"] {
  width: calc(100% - 100px);
  border-radius: 3px 0 0 3px;
}

#displayFileName {
	width: calc(100% - 76.95px);
	border-radius: 3px 0 0 3px;
}
.fileplus .file_upload_btn {
  position: relative;
  display: inline-block;
  height: var(--tbl-inputHeight);
  line-height: var(--tbl-inputHeight)!important;
  padding: 0 15px;
  font-weight: 400;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid var(--srcform-btnBdr);
  background: var(--srcform-btnBg);
  letter-spacing: 0;
  color: var(--srcform-btn);
  margin-left: -4px;
  overflow: hidden;
  border-radius: 0 3px 3px 0;
  font-size: 13px;
  outline: none;
}
.fileplus input[type="file"] {
	position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.fileplus input[type="file"]:focus-visible + .file_upload_btn,
.file_upload_btn:focus-visible {
  outline: 1px dashed #017eff;
  outline-offset: 2px;
}

#atchFileIdList:has(.label_file_list) {
  margin-top: 10px;
}

.label_file_list {
	display: flex;
	align-items: center;
    gap: 5px;
    margin-top: 5px;
}
.label_file_list:first-child {
	margin-top: 0;
}

/* 업로드된 첨부파일 */
.uploaded {
  margin-top: 3px;
}

.uploaded .btn_del {
  background: transparent;
  color: red;
  font-size: 20px;
}

.uploaded .btn_del span {
  font-size: 0;
  color: transparent;
}

/* 첨부파일 업로드 대체 텍스트 추가 */
.file_upload_wrap {
	margin-bottom: 15px;
}
.label_file_list, .file_upload_wrap li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 10px;
	border-bottom: 1px dashed #999;
	padding-bottom: 10px;
}
.liImagesforUpdate {
	gap: 0 8px;
}
.label_file_list:first-child, .file_upload_wrap li:first-child {
	margin-top: 0;
}
.label_file_list:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.label_file_list .sr_text_wrap_wrap, .file_upload_wrap li .sr_text_wrap_wrap {
	display: flex;
	align-items: center;
	width: 100%;
	margin-top: 5px;
}
.label_file_list .sr_text_wrap_wrap label.sr_text_wrap_label, .file_upload_wrap li .sr_text_wrap_wrap label.sr_text_wrap_label {
	margin: 0;
	width: 100px;
}


/** 유튜브 반응형 **/
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: url("/assets/images/novideo.png") center center no-repeat;
}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-wrap iframe {
  width: 100% !important;
}

.bbs_contents .video-wrap {
  width: 50%;
  padding-bottom: 30%;
}

/* 게시판 레이아웃 */
.wrapper {
  background: #fff;
}

.content_wrap {
  margin-bottom: 30px;
}

/* 게시판 타이틀 */
.headline {
  display: block;
  margin: 10px 0 25px 0;
  border-bottom: 1px dotted #e4e9f0;
}

.headline h2,
.headline h3,
.headline h4 {
  margin: 0 0 -2px 0;
  padding-bottom: 5px;
  display: inline-block;
  border-bottom: 2px solid #72c02c;
  font-size: 30px;
}


/* --------------------------------------------
 *  포토게시판
/* ------------------------------------------ */
.photo_wrap a:hover {
  text-decoration: none !important;
}
.photo_wrap {
	width: 100%;
	padding: 35px 10px;
	border-top: 2px solid var(--board-topBdr);
	border-bottom: 1px solid var(--board-btmBdr);
}
.photo_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	column-gap: 20px;
	row-gap: clamp(20px, 2vw + 10px, 30px);
}
.photo_wrap ul li {
	width: calc((100% - 40px) / 3);
}
.photo_wrap ul li:nth-child(3) {
	margin-right: 0;
}
.photo_wrap figure {
	border: 1px solid var(--brdr-color);
}
.photo_wrap figure:hover {
	box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.2);
}
.photo_wrap figure a {
	display: block;
}
.photo_wrap .photo_caption {
	position: relative;
	min-height: 132px;
	padding: clamp(1.25rem, 0.5060rem + 1.1905vw, 1.5625rem) clamp(1.5625rem, 0.8185rem + 1.1905vw, 1.875rem);
	border-top: 1px solid var(--brdr-color);
}
.photo_wrap .photo_caption > span {
	color: #ec2727;
	font-size: 16px;
	font-weight: 500;
	display: inline-block;
	width: 50%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.photo_wrap .photo_caption strong {
	display: block;
	font-weight: 600;
	height: 60px;
	margin-bottom: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	line-height: 1.5;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #333;
	font-size: 20px;
}
.photo_wrap .photo_caption .meta_info {
	display: flex;
	gap: 15px;
}
.photo_wrap .photo_caption .meta_info span {
	position: relative;
	font-size: 16px;
	font-weight: 500;
	display: inline-block;
	color: #8a8a8a;
}
.photo_wrap .photo_caption .meta_info span:after {
	content: '';
	position: absolute;
	top: 3px;
	right: -8px;
	width: 1px;
	height: 12px;
	background: #afafaf;
}
.photo_wrap .photo_caption .meta_info span:last-child:after {
	display: none;
}
.photo_wrap .img {
	overflow: hidden;
	width: 100%;
	height: clamp(12.5rem, 5.0595rem + 11.9048vw, 15.625rem);
	position: relative;
}
.photo_wrap .img > img {
	width: 100%;
	height: clamp(12.5rem, 5.0595rem + 11.9048vw, 15.625rem);
	object-fit: cover;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
	-webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.photo_wrap a:hover img {
	transition-duration: 0.3s;
	-webkit-transform: scale(1.1) translateX(-45%);
	-ms-transform: scale(1.1) translateX(-45%);
	transform: scale(1.1) translateX(-45%);
}


/* --------------------------------------------
 * 이전글/다음글
/* ------------------------------------------ */
.pageMove {
  margin-top: 50px;
  border-top: 1px solid var(--board-btmBdr);
  border-bottom: 1px solid var(--board-btmBdr);
  overflow: hidden;
}

.pageMove > li {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  border-top: 1px solid var(--board-btmBdr);
  vertical-align: middle;
  padding: 20px 4%;
}

.pageMove > li > span {
  position: relative;
  display: inline-block;
  width: 110px;
  text-align: left;
  color: var(--color-secondary-text);
  font-weight: var(--fw-bold);
  font-size: var(--tbl-fs);
}

.pageMove > li > span:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  font-family:'tabler-icons';
  color: var(--color-secondary-text);
  font-size: 19px;
}

.pageMove > li.prev > span:before {
  content: '\ea62';
  color: var(--color-secondary-text);
}

.pageMove > li.next > span:before {
  content: '\ea5f';
  color: var(--color-secondary-text);
}

.pageMove > li > a {
  position: relative;
  display:block;
  flex:1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-secondary-text);
  font-size: var(--tbl-fs);
}
.pageMove > li:not(:has(a)) {
	font-size: var(--tbl-fs);
}

.pageMove > li > a:hover {
	text-decoration: underline;
}

.pageMove > li:first-child {
  border-top: none;
}


/* --------------------------------------------
 * 댓글입력
/* ------------------------------------------ */
.board_comment {
	position: relative;
	border: 1px solid var(--board-btmBdr);
	box-sizing: border-box;
	padding: 15px;
}
.board_comment .comm_write_id {
	display: flex;
	align-items: center;
	overflow:hidden;
	font-weight: var(--fw-bold);
	font-size: var(--tbl-fs);
}
.board_comment .comm_write_id i {
	margin-right: 10px;
	font-size: 20px;
}
.board_comment .comm_write_id input{
	height:30px;
}
.board_comment .comm_write_id input[type="password"]{
	float:right;
}
.board_comment .comm_cct{
	padding: 10px 0;
}
.board_comment .comm_cct textarea {
	border: none;
	width: 100%;
	height: 60px!important;
	resize: none;
	padding:0;
}
 .board_comment .comm_cct textarea::placeholder {
	color: #aab2bd;
	opacity: 1;
	font-size:15px!important;
}
.board_comment .comm_cct textarea::-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #aab2bd; }
.board_comment .comm_cct textarea::-ms-input-placeholder { /* Microsoft Edge */ color: #aab2bd; }
.board_comment .comm_btn {
	position: relative;
	display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.board_comment .comm_btn p {
	color: #656d78;
	font-size: 13px;
}
.board_comment .comm_btn button {
	vertical-align: middle;
	padding: 8px 16px;
    border-radius: 4px;
	background: transparent;
	color: #fff;
	border: none;
}
/* --------------------------------------------
 * 댓글리스트
/* ------------------------------------------ */
.commlist_wrap {
  width: 100%;
  margin: 20px 0;
}
.commlist_wrap .board_commlist {
  border-top: 1px solid var(--board-btmBdr);
  border-bottom: 1px solid var(--board-btmBdr);
}
.commlist_wrap .board_commlist > .comm_list,
.commlist_wrap .board_commlist > .comm_modify {
  padding: 15px;
  font-size: var(--tbl-fs);
  border-bottom: 1px dashed var(--board-btmBdr);
}
.commlist_wrap .board_commlist > li:last-child {
  border-bottom: none;
}
.commlist_wrap .comm_head {
  position: relative;
}
.commlist_wrap .comm_head:after {
  content: '';
  display: block;
  clear: both;
}
.commlist_wrap .comm_head .comm_text {
  font-size: var(--tbl-fs);
}
.commlist_wrap .comm_head .comm_text li {
  margin: 8px 0;
  display: inline-block;
}
.commlist_wrap .comm_head .comm_text li.comm_list_id {
	margin: 0 0 8px;
}
.commlist_wrap .comm_head .comm_text li.comm_list_date {
	margin: 8px 0 0;
}
.commlist_wrap .comm_head .comm_list_view {
  display: block !important;
  clear: both;
  word-break: keep-all;
  margin: 0!important;
}
.commlist_wrap .comm_list_id {
  font-weight: var(--fw-bold);
  margin-right: 10px;
}
.commlist_wrap .comm_head .comm_list_date {
  color: #aaa;
  font-size: 15px;
}
.commlist_wrap .comm_head .comm_btnArea {
  position: absolute;
  right: 0;
  top: 0;
}
.commlist_wrap .comm_byte {
	color: #656d78;
    font-size: 13px;
}
.commlist_wrap .comm_modify textarea {
  width: 100%;
  height: 80px;
  margin-top: 6px;
  padding: 10px;
  resize: none;
}
.commlist_wrap .board_commlist > .comm_list .comm_btn {
	background: none;
    border: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    margin-left: 8px;
}
.commlist_wrap .board_commlist > .comm_list .comm_btn.btn_delete:hover {color: #ff6b6b;}
.commlist_wrap .board_commlist > .comm_list .comm_btn.btn_edit:hover {color: #007bff;}

.bbs_contents img {
  max-width: 100%;
}

.bbs_contents .content {
  background: none;
  padding: 0;
  min-height: auto;
  transition: none;
}

.bbs_contents .content:before {
  height: auto;
  background: none;
}

/* 원본 코드의 중복된 마지막 스타일 블록 제거 및 정리 */
/*
.webzine_wrap .photo_caption > ul > li {
  margin-top: 5px;
  display: inline-block;
  font-size: 1em;
  color: #333;
}
.webzine_wrap .photo_caption > p {
  word-break: keep-all;
  font-size: 1em;
  height: 72px;
  overflow: hidden;
}
.webzine_wrap .photo_caption .tit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 130%;
  min-height: 46px;
  color: #333;
  letter-spacing: -0.05em;
  word-break: keep-all;
  width: 100%;
}
*/
/* --------------------------------------------
 * 테이블 디자인
/* ------------------------------------------ */

.tbl-basic,.tbl-board{
  
  border:none;
  border-top: 3px solid #004b85;
}

.tbl-basic th,
.tbl-board th,
.tbl-basic td strong{
font-weight:var(--th-fw)
}

.tbl-basic th,
.tbl-board th,
.tbl-basic td,
.tbl-board td{
border-top:none;
border-bottom:1px solid #ccc
}



.tbl-basic th:first-child,
.tbl-board th:first-child,
.tbl-basic td:first-child,
.tbl-board td:first-child{
border-left:none
}
.tbl-basic th:last-child,
.tbl-board th:last-child,
.tbl-basic td:last-child,
.tbl-board td:last-child{
border-right:none
}


/* --------------------------------------------
 *  991
/* ------------------------------------------ */

@media screen and (max-width: 1000px) {
  /********** 서치폼(모바일) **********/
  .searchForm {
  	padding: 20px;
  	display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .searchForm button.btn{
  	margin: 0;
  }
  .searchForm input[type="text"] {
  	flex: unset;
    min-width: 0;
    width:100%;
  }
  
  
  /********** 모바일 게시판 **********/
  .tbl-board.tbl-mb {
    display: block;
  }
  .tbl-board.tbl-mb thead,
  .tbl-board.tbl-mb colgroup,
  .tbl-board.tbl-mb col {
    display: none;
  }

  .tbl-board.tbl-mb tbody,
  .tbl-board.tbl-mb tbody td,
  .tbl-board.tbl-mb tbody tr,
  .tbl-board.tbl-mb tbody th {
    border-left: none;
    display: block;
    width: 100%;
  }
  .tbl-board.tbl-mb tbody th {
    background: none;
    border-bottom-color: #fff;
    text-align: left;
    padding-bottom: 0;
  }
  .tbl-board.tbl-mb tbody td select,
  .tbl-board.tbl-mb tbody td input[type='text'],
  .tbl-board.tbl-mb.left td input[type='password'] {
    width: 100% !important;
  }
  .tbl-board.tbl-mb tbody tr {
  	display:block;
    border-bottom: 1px solid #ccc;
    padding: 12px 10px;
  }
  .tbl-board.tbl-mb tbody tr:last-child {
    border-bottom: none;
  }
  .tbl-board.tbl-mb tbody tr td {
  	display: block;
    padding: 0;
    border: 0 none;
    text-align: left;
    line-height: 1.6;
  }
  .tbl-board.tbl-mb tbody td {
    border: none;
  }
  .tbl-board.tbl-mb tbody td.elem {
    display: inline-block;
    border-bottom: none;
    font-size: 14px;
  }
  .tbl-board.tbl-mb tbody td.tit {
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .tbl-board.tbl-mb tbody td.tit a,
  .tbl-board.tbl-mb tbody td.tit a[href="#none"] {
    font-size: 18px;
    font-weight: var(--fw-bold);
    color: var(--th-color);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tbl-board.tbl-mb tbody td.ctgr {
    display: inline-block;
    width: auto !important;
    border-bottom: none;
    font-size: 13px;
    padding: 4px 10px 4px;
    background: #219cfa;
    border-radius: 20px;
    color: #fff !important;
    margin-top: 15px;
  }
  .tbl-board.tbl-mb td.no_result {
    display: block;
  }
  .tbl-board.tbl-mb .border_line {
    border-left: none;
    border-right: none;
  }
  .tbl-board.tbl-mb .m_ta_l {
    text-align: left;
  }
  
  .notice_tag {
  	display: inline-block;
  	margin: 0 0 3px;
  }

  .tbl-board.tbl-mb .catg_textarea textarea {
    width: 100% !important;
  }
  
  .bbs_view_tit, .bbs_contents {
  	padding: 25px 10px;
  	
  }
  
  .bbs_view_tit {
  	text-align: center;
  }

  .bbs_file {
    font-size: 16px;
    padding: 10px 20px 10px 15px;
  }
  .bbs_view_tit .bbs_info {
    width: 100%;
  }
  .bbs_view_tit p {
    font-size: 21px;
    line-height: 140%;
    margin-bottom: 10px;
  }
  .bbs_view_tit .bbs_info li {
  	font-size: 15px;
  	margin-right: 10px;
  }
  .bbs_file, .bbs_file strong {
  	font-size: 16px;
  }
  .pageMove > li > span {
  	width: 80px;
  }
  .pageMove > li > span:before {
  	right: 5px;
  }
  .photo_wrap ul li {
  	width: calc((100% - 20px) / 2);
  }
  .bbs_file a {
  	font-size: 15px;
  }
  
  .commlist_wrap .board_commlist > .comm_list {
	  padding: 15px 10px;
  }
  
  /********** 모바일 페이지네비게이션 **********/
  .paging a, .paging strong {
  	min-width: 28px;
    height: 28px;
    line-height: 27px;
    margin: 0 2px 7px;
    font-size: 13px;
  }
  .paging a i {
  	font-size: 15px;
  }
}


/* Tablet ~1200 */
@media (max-width: 1200px) {
	/* 첨부파일 */
	.bbs_file {
		padding: 20px;
		align-items: flex-start;
		flex-direction: column;
		gap:7px;
	}
	.bbs_file ul {
		gap: 5px;
	}
	.bbs_file ul li {
		width: 100%;
		padding: 0;
	}
	.bbs_file ul li .sr_text_wrap {
		margin-left: 0;
		gap: 10px;
		font-size: 14px;
		flex-basis: 100%;
	}
	.bbs_file ul li .tts_copy {
		font-size: 14px;
		margin-left: 0;
	}
	
}


/* Mobile ~768 */
@media screen and (max-width: 768px) {
	
	/* 포토 게시판 */
	.photo_wrap {
		padding: 20px 10px;
	}
	.photo_wrap ul li {
		width: 100%;
	}
	.photo_wrap .photo_caption {
		padding: 1rem 1.225rem;
		min-height: auto;
	}
	.photo_wrap .photo_caption strong {
		margin-bottom: 10px;
		font-size: 19px;
	}
	.photo_wrap .img {
		height: clamp(12.5rem, 7.8125rem + 20.8333vw, 15.625rem);
	}
	.photo_wrap .img > img {
		width: 100%; 
		height: clamp(12.5rem, 7.8125rem + 20.8333vw, 15.625rem);
	}
	
	.h_scroll {position: relative; overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		background:
		linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
		linear-gradient(to left, white 30%, rgba(255, 255, 255, 0)) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
		background-attachment: local, local, scroll, scroll;
		background-color: white;
	 }
	.h_scroll .dev_scroll_check {position: relative; width: 100%; min-width: 1000px;}
	.touch {display:block;font-size:16px;margin-bottom:10px;}
	.touch i {font-size:22px;color:#017eff;}
	.touch span {font-weight:500;color:#017eff;}
	.h_scroll .tbl-basic {margin-bottom:0;}
}


/**
 * 출판관리에서 동영상 삽입했을때 사용
   여환승 / 김준연 (20260204)
 */

.embed-container {
	position: relative;
	width: 560px;
    margin: 0 auto;
}
.embed-container:nth-last-child(n+2) ~ .embed-container {
	margin-top: 20px;
}
.embed-container .embed-content { 
	width: 100%;
	padding-top: 56.25%;
	height: 0;
}
.embed-container .embed-content iframe,
.embed-container .embed-content object,
.embed-container .embed-content embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Tablet ~1200 */
@media (max-width: 1200px) {
	
}

/* Mobile ~768 */
@media (max-width: 768px) {
	.embed-container {
		width: 100% !important;
	}
}