@charset "utf-8";



/* 페이지 번호  */
.pageWrap {margin-top: 3.3rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center;}
.pageWrap .linkBtn {max-width: 220px; width: 30%; height: 3.3rem; font-size: 1.1rem;}
.pageWrap .linkBtn .icon i {width: 1.5rem; height: 1.5rem;}
.pageWrap ul {display: flex; gap: 0.6rem; justify-content: center; width: 100%;}
.pageWrap ul li {width: 2.2rem; height: 2.2rem;}
.pageWrap ul li a {background: #fff; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .5s ease; border: 1px solid #ddd; font-weight: 500; box-sizing: border-box;}
.pageWrap ul li.arrow {border-radius: .6rem; box-sizing: border-box; background: #fff; border-radius: 50%;}
.pageWrap ul li.arrow a {background: transparent; background-size: 60%; background-repeat: no-repeat; background-position: center;}
.pageWrap ul li.first a {background-image: url(../../images/ico_page_first.svg);}
.pageWrap ul li.first.active a {background-image: url(../../images/ico_page_first_active.svg);}
.pageWrap ul li.prev a {background-image: url(../../images/ico_page_prev.svg);}
.pageWrap ul li.prev.active a {background-image: url(../../images/ico_page_prev_active.svg);}
.pageWrap ul li.next a {background-image: url(../../images/ico_page_next.svg);}
.pageWrap ul li.next.active a {background-image: url(../../images/ico_page_next_active.svg);}
.pageWrap ul li.last a {background-image: url(../../images/ico_page_last.svg);}
.pageWrap ul li.last.active a {background-image: url(../../images/ico_page_last_active.svg);}
.pageWrap ul li.now a {background: var(--mainColor3); color: #fff; border-color: transparent; border-color: var(--mainColor3); font-weight: 600;}
.aos-init + .pageWrap {opacity: 0; transition: .5s ease;}
.aos-init.aos-animate + .pageWrap {animation: opacityMove 1s .1s ease both;}


/* 연꽃갤러리 */
.lotus_gallery .grid {margin-bottom: -2.2em; width: calc(100% + 2.2rem);}
.lotus_gallery .grid .grid-sizer, .lotus_gallery .grid .grid-item {width: calc((100% / 4) - 2.2rem);}
.lotus_gallery .grid .grid-item {margin-bottom: 2.2rem; border-radius: .9rem; overflow: hidden; position: relative; border: 1px solid #ddd; box-sizing: border-box;}
.lotus_gallery .grid .grid-item .img img {width: 100%; transition: .5s ease;}
.lotus_gallery .grid .grid-item .textBox {position: absolute; width: 100%; height: 100%; top: 100%; left: 0; display: flex; flex-direction: column; gap: .6rem; align-items: center; justify-content: center; color: #fff; background: #00000040; transition: .5s ease;}
.lotus_gallery .grid .grid-item .textBox .icon {width: 1.35rem; height: 1.35rem; background: url(../../images/ico_eyes_white.svg) no-repeat center / contain;}


/* 사진 게시판 공통 */
.board_list {display: flex; flex-wrap: wrap; gap: 2.2rem;}
.board_list li {position: relative;}
.board_list li:after {content: ""; position: absolute; top: -.7rem; left: -.7rem; width: 0; height: calc(100% + 1.4rem); border-radius: 1.3rem; background: #fca5a81c; z-index: -1; transition: .5s ease;}
.board_list li a {width: 100%; display: flex; flex-direction: column; gap: .9rem;}
.board_list li .imgBox {border-radius: .9rem; overflow: hidden; position: relative; width: 100%; padding-bottom: 65%;}
.board_list li .imgBox img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-position: center; object-fit: cover; transition: .5s ease;}
.board_list li .textBox {display: flex; flex-direction: column; gap: .4rem;}
.board_list li .textBox .title {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #000; font-size: 1.1rem; font-weight: 500; transition: .5s ease;}
.board_list li .textBox .date {font-size: .9rem; color: #999; font-weight: 600;}


/* 포토갤러리 & 궁남지 사계 */
.board_list.type1 li {width: calc(100% / 4 - ((2.2rem / 4) * 3));}


/* 동영상 */
.video_board .board_list li {width: calc(100% / 3 - ((2.2rem / 3) * 2));}


/* 테이블 게시판 */
.tableBox tr > * {padding: 5px; vertical-align: middle; text-align: center; box-sizing: border-box;}
.tableBox thead th {font-weight: 600; font-size: 1.1rem;}
.tableBox.style1 .check {width: 2rem;}
.tableBox.style1 .th1 {width: 4.5rem;}
.tableBox.style1 .th3 {width: 7.3rem;}
.tableBox.style1 thead {border-bottom: 2px solid #333;}
.tableBox.style1 thead th {height: 2.6rem;}
.tableBox.style1 tbody tr {transition: .5s ease; border-bottom: 1px solid #eee;}
.tableBox.style1 tbody tr > * {height: 4rem;}
.tableBox.style1 tbody td:not(.titleBox) {color: #999; font-size: .9rem;}
.tableBox.style1 tbody tr.notice {background: #FCA5A816;}
.tableBox.style1 tbody tr.notice .num p {padding: .25rem .7rem; border-radius: 3rem; background: #fca5a8; color: #fff; display: inline-block; font-weight: 600;}
.tableBox.style1 tbody .titleBox {text-align: left; line-height: 1;}
.tableBox.style1 tbody .titleBox .title {display: inline-block; font-weight: 600; max-width: calc(100% - 4rem);}
.tableBox.style1 tbody .titleBox .title p {overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.tableBox.style1 tbody .titleBox .hit {display: inline-flex; gap: .4rem; align-items: center; color: #999; font-size: .8rem; font-weight: 500; vertical-align: text-top; margin-left: .4rem;}
.tableBox.style1 tbody .titleBox .hit .icon {width: .9rem; height: .9rem; background: url(../../images/ico_eyes_gray.svg)  no-repeat center / contain;}

.board_view .titleBox {padding: 0 1.1rem .9rem; display: flex; flex-direction: column; gap: 1.1rem; position: relative; border-bottom: 1px solid #eee;}
.board_view .titleBox .shareBtn {position: absolute; right: 1rem; top: 0;}
.board_view .titleBox .shareBtn .icon {width: 2.2rem; height: 2.2rem; background: url(../../images/ico_share_gray.svg) no-repeat center / contain; transition: .5s ease;}
.board_view .titleBox .title {font-size: 1.35rem; padding-right: 2rem;}
.board_view .titleBox .date {display: flex; align-items: center; gap: .4rem; color: #999; font-size: .9rem;}
.board_view .titleBox .date .icon {width: 1.35rem; height: 1.35rem; background: url(../../images/ico_time_gray.svg) no-repeat center / contain;}
.board_view .textWrap {border-bottom: 1px solid #eee;}
.board_view .textWrap .edit_view {padding: 2.2rem;}
.board_view .textWrap .edit_view p {color: #666666; font-weight: 500; line-height: 160%;}
.board_view .textWrap .edit_view strong {color: #333;}
.board_view .textWrap .edit_view figure {margin-top: 2.2rem;}
.board_view .textWrap .fileDown {padding: 2.2rem; padding-top: 0; display: flex; flex-wrap: wrap; gap: 10px;}
.board_view .textWrap .fileDown li a {border-radius: 5rem; border: 1px solid #ddd; padding: .9rem 1.35rem; display: flex; align-items: center; gap: .6rem; font-weight: 500;}
.board_view .textWrap .fileDown li a .icon {width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #FCA5A840 url(../../images/ico_down_point.svg) no-repeat center / contain; flex: none;}

.view_page .linkBtn {max-width: 220px; height: 3.3rem; font-size: 1.1rem;}
.view_page .buttonWrap {margin-top: 2.2rem;}
.board_view + .linkBtn {margin: 0 auto; margin-top: 2.2rem;}
.edit_view ol, .edit_view ul {list-style: none;}

/* 에디터 글쓰기 */
.writeBox.type1 {display: flex; flex-direction: column; gap: 1.4rem;}
.writeBox.type1 > li {display: flex; flex-direction: column; gap: 8px;}
.writeBox.type1 .titleBox {padding: 0 .9rem; display: flex; align-items: center; gap: 8px;}
.writeBox.type1 .titleBox .text {font-size: .9rem; color: #666; font-weight: 600;}
.writeBox.type1 .titleBox .essential {font-size: 12px; color: #fff; width: 41px; height: 20px; border-radius: 50px; background: var(--mainColor3); display: flex; align-items: center; justify-content: center;}
.writeBox.type1 .fileText {display: flex; flex-wrap: wrap; gap: 10px;}
.writeBox.type1 .fileText li {border-radius: 5rem; border: 1px solid #ddd; padding: .9rem 1.35rem; display: flex; gap: .6rem;}
.writeBox.type1 .fileText li a {width: 100%; display: flex; align-items: center; gap: .6rem; font-weight: 500;}
.writeBox.type1 .fileText li a .icon {width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #FCA5A840 url(../../images/ico_down_point.svg) no-repeat center / contain; flex: none;}
.writeBox.type1 .fileText li .deletBtn .icon {width: 1.35rem; height: 1.35rem; background: url(../../images/ico_close_gray.svg) no-repeat center / contain; transition: .5s ease;}

.edit_page .writeBox.type1 {margin-bottom: 2.2rem;}
.edit_page .uploadBtn {position: relative; max-width: 220px; width: 100%}
.edit_page .uploadBtn label {width: 100%; height: 3.3rem; display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--mainColor3); color: #fff; font-size: 1.1rem; font-weight: 500; border-radius: .6rem;}
.edit_page .uploadBtn input {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -100; opacity: 0;}
.edit_page .uploadBtn label .icon {width: 1.6rem; height: 1.6rem; background: url(../../images/ico_down_white.svg) no-repeat center / 80%;}

/* 텍스트박스 */
.container .inputWrap {display: flex; gap: .9rem;}
.container .inputWrap.row {flex-direction: column; gap: 8px;}
.container .inputWrap:not(.row) {align-items: center;}
.container .inputBox {width: 100%; position: relative;}
.container .inputBox:has(button) input {padding-right: 3rem;}
.container .inputBox label {width: 100%;}
.container .inputBox label * {width: 100%; height: 100%; padding: 0 .9rem; border-radius: .9rem; border: 1px solid #DDDDDD; height: 2.6rem; font-weight: 500; box-sizing: border-box;}
.container .inputBox label *::placeholder {color: #AAAAAA;}
.container .inputBox label input {border-radius: 5rem;}
.container .inputBox label textarea {padding: .9rem; height: 18.8rem; resize: none; outline: none;} 
.container .inputBox button {position: absolute; top: 50%; right: .9rem; transform: translateY(-50%);}
.container .inputBox button .icon {transition: .5s ease;}
.container .inputBox button.deletBtn .icon {width: 1.35rem; height: 1.35rem; background: url(../../images/ico_close_gray.svg) no-repeat center / contain;}


@media screen and (min-width: 1025px) {

	/* 페이지 번호  */
	.pageWrap ul li:not(.arrow) a:hover {color: var(--mainColor3); background: #FCA5A820;}
	.pageWrap ul li.arrow.active:hover {background: #FCA5A820;}
	.pageWrap ul li.first.active:hover a {background-image: url(../../images/ico_page_first_point.svg);}
	.pageWrap ul li.prev.active:hover a {background-image: url(../../images/ico_page_prev_point.svg);}
	.pageWrap ul li.next.active:hover a {background-image: url(../../images/ico_page_next_point.svg);}
	.pageWrap ul li.last.active:hover a {background-image: url(../../images/ico_page_last_point.svg);}

	/* 연꽃갤러리 */
	.lotus_gallery .grid .grid-item:hover .textBox {top: 0;}
	.lotus_gallery .grid .grid-item:hover .img img {filter: blur(10px); transform: scale(1.05);}

	/* 포토갤러리 & 궁남지 사계 */
	.board_list li:hover:after {width: calc(100% + 1.4rem);}
	.board_list li:hover .imgBox img {transform: scale(1.05);}
	.board_list li:hover .textBox .title {color: var(--mainColor2);}

	/* 테이블 게시판 */
	.tableBox.style1 tbody tr:not(.notice):hover {background: #00000005;}

	.board_view .titleBox .shareBtn .icon:hover {background-image: url(../../images/ico_share_point.svg);}
	.board_view .textWrap .fileDown li a:hover {box-shadow: 0 0 8px #fca5a860; border-color: var(--mainColor3); color: var(--mainColor2);}

	.container .inputBox button:hover .icon {transform: rotate(90deg);}
	.writeBox.type1 .fileText li a:hover {color: var(--mainColor3);}
	.writeBox.type1 .fileText li .deletBtn:hover .icon {transform: rotate(90deg);}

}

@media screen and (max-width: 1200px) {
	/* 포토갤러리 & 궁남지 사계 */
	.board_list.type1 {gap: 2rem 1.4rem;}
	.board_list.type1 li {width: calc(100% / 4 - ((1.4rem / 4) * 3));}
}

@media screen and (max-width: 1024px) {
	/* 연꽃갤러리 */
	.lotus_gallery .grid {width: calc(100% + 1rem); margin-bottom: -1rem;}
	.lotus_gallery .grid .grid-sizer, .lotus_gallery .grid .grid-item {width: calc((100% / 4) - 1rem);}
	.lotus_gallery .grid .grid-item {margin-bottom: 1rem;}

	/* 포토갤러리 & 궁남지 사계 */
	.board_list.type1 li {width: calc(100% / 3 - ((1.4rem / 3) * 2));}

	.pageWrap .linkBtn, .view_page .linkBtn {font-size: 1rem;}

}

@media screen and (max-width: 768px) {
	/* 연꽃갤러리 */
	.lotus_gallery .grid .grid-sizer, .lotus_gallery .grid .grid-item {width: calc((100% / 3) - 1rem);}

	.board_view .titleBox .title {padding-right: 0;}
	.board_view .titleBox .shareBtn {top: auto; bottom: 1.1rem;}
	.board_view .textWrap .edit_view, .board_view .textWrap .fileDown {padding: 1.5rem;}
	.board_view .textWrap .fileDown li a {padding: .5rem 1rem; font-size: .9rem;}

	.pageWrap {flex-wrap: wrap;}
	.pageWrap ul {order: -1;}
	.pageWrap .linkBtn {width: calc(50% - .5rem);}
}

@media screen and (max-width: 640px) {
	/* 페이지 번호  */
	.pageWrap ul {gap: 0 .5rem;}
	.pageWrap ul li {width: 1.75rem; height: 1.75rem;}

	/* 포토갤러리 & 궁남지 사계 */
	.board_list.type1 li {width: calc(100% / 2 - ((1.4rem / 2) * 1));}

	/* 테이블 게시판 */
	.tableBox.style1 thead {display: none;}
	.tableBox.style1 tbody tr {display: block; border: 1px solid #eee; border-radius: 1rem; margin-bottom: 1rem; position: relative;}
	.tableBox.style1 tbody tr:last-child {margin-bottom: 0;}
	.tableBox.style1 tbody tr > * {height: auto; padding: 0; text-align: left; width: 100%; display: block;}
	.tableBox.style1 tbody tr .title {font-size: 1.1rem;}
	.tableBox.style1 tbody .num {position: absolute; top: 1rem; left: 1rem;}
	.tableBox.style1 tbody .titleBox .title {max-width: none; padding: 3rem 1rem 3rem; width: 100%; box-sizing: border-box;}
	.tableBox.style1 tbody .titleBox .title p {overflow: visible; word-break: break-word; display: block; -webkit-line-clamp: none; -webkit-box-orient: vertical; line-height: 1.5;}
	.tableBox.style1 tbody .date {position: absolute; left: 1rem; bottom: 1rem;}
	.tableBox.style1 tbody .hit {position: absolute; right: 1rem; bottom: 1rem;}

	.tableBox.style1 tbody tr td:has(.checkBox) {position: absolute; top: 50%; left: 1.1rem; transform: translateY(-50%);}
	.tableBox.style1 tbody tr:has(.checkBox) {padding-left: 2.5rem;}
	.tableBox.style1 tbody tr:has(.checkBox) .num, .tableBox.style1 tbody tr:has(.checkBox) .date {left: 3.5rem;}
}
@media screen and (max-width: 480px) {

	.view_page .buttonWrap {flex-direction: column; gap: .5rem;}
	.view_page .linkBtn {max-width: none;}

	.edit_page .buttonWrap {flex-direction: column; gap: .5rem;}
	.edit_page .buttonWrap .uploadBtn {max-width: none;}
}


@media screen and (max-width: 400px) {
	/* 포토갤러리 & 궁남지 사계 */
	.board_list.type1 {gap: 1.7rem 1rem;}
	.board_list.type1 li {width: calc(100% / 2 - ((1rem / 2) * 1));}
}