@charset "utf-8";
/* CSS Document */


/******* bbsWrap 검색(search) CSS *********/
#bbsWrap {
	overflow: hidden;	
}
/*#bbsWrap #search {
    background-color: #f7f7f7;
    padding: 3rem;
}*/
#bbsWrap #search {
    padding: 0 0 2rem 0;
}
#bbsWrap #search .flex {
	max-width: 102rem;
	min-width: 28rem;
	margin: 0 auto;
	box-sizing: border-box;
}
#bbsWrap #search .flex .k-input.k-combobox {
	margin: 0 auto;
}

#bbsWrap #search .flex .searchInput {
	width: calc(100% - 30rem);
}
#bbsWrap #search .flex .ui.button.grey {
	width: 5.4rem;
	height: 3.8rem;
	margin: 0;
	padding: 1rem;
}
#bbsWrap #search .flex .ui.button.grey .icon {
	font-size: 1.8rem;
	line-height: 1.8rem;
	margin: 0;	
}
#bbsWrap #search .flex .k-input.k-combobox + .searchInput,
#bbsWrap #search .flex .searchInput + .ui.button,
#bbsWrap #search td .k-input.k-combobox + .k-textbox {
	margin-left: 0.3rem;
}
#bbsWrap #search .nbsp {
	display: inline-block;
	margin: 0 0.5rem;	
}
#bbsWrap #search th,
#bbsWrap #search td {
	border: none;	
}
#bbsWrap #search td .k-textbox {
	width: 48rem;
	vertical-align: bottom;
}
#bbsWrap #search table + .txtCenter {
	margin-top: 1rem;
}


/******* bbsWrap 리스트(bbsList) CSS *********/
#search + #bbsList {
	margin-top: 6rem
}
#bbsList .totalNum + table,
#bbsList .totalNum + .gallery {
	margin-top: 2rem;
}
#bbsList .ui.table + .paginateContainer,
#bbsList .gallery + .paginateContainer {
	margin-top: 4rem;	
}
#bbsList .ui.table td a .icon {
    margin-left: 0.5rem;
}

#bbsList {
	overflow: hidden;
}
#bbsList table {
	width: calc(100% + 0.2rem);
	margin: 0 -0.1rem;	
}
#bbsList table.tdLeft-01 td:nth-child(1),
#bbsList table.tdLeft-02 td:nth-child(2),
#bbsList table.tdLeft-03 td:nth-child(3),
#bbsList table.tdLeft-04 td:nth-child(4),
#bbsList table.tdLeft-05 td:nth-child(5),
#bbsList table.tdLeft-06 td:nth-child(6),
#bbsList table.tdLeft-07 td:nth-child(7),
#bbsList table.tdLeft-08 td:nth-child(8),
#bbsList table.tdLeft-09 td:nth-child(9),
#bbsList table.tdLeft-10 td:nth-child(10) {
	text-align: left;	
}
#bbsList table th,
#bbsList table td {
	text-align: center;	
    padding: 1.2rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.075);
    border-left: none;
}
#bbsList table th {
	cursor: pointer; /* 헤더에 포커스 시 클릭 가능한 느낌 */
}
#bbsList table th {
	font-size: 1.5rem;
    cursor: auto;
	border-top: 0.1rem solid rgba(0, 0, 0, 0.3);
    background: #f7f7f7;
    color: #333;
    font-weight: 700;
	cursor: pointer;
}
#bbsList table td {
	font-size: 1.5rem;
	line-height: 150%;
    background: #fff;
    color: #999;
}
#bbsList table td a {
	font-size: 1.6rem;
	line-height: 150%;
}
#bbsList table td a .icon {
	display: inline-block;
	margin-left: 0.5rem;
}
#bbsList table td .newIcon {
    display: inline-block;
	font-size: 1.1rem;
    line-height: 100%;
	font-weight: 500;
    color: #fff;
    border-radius: 0.3rem;
    padding: 0.3rem 0.5rem;
    background-color: #F90;
    margin-left: 0.5rem;
	vertical-align: text-top;
}

/* 정렬 상태 표시를 위한 작은 화살표 (CSS 의사요소) */
#bbsList table th.sorted-asc::after,
#bbsList table th.sorted-desc::after {
	content: "";
	display: inline-block;
	margin-left: 0.5rem;
	width: 0;
	height: 0;
	border-left: 0.5rem solid transparent;
	border-right: 0.5rem solid transparent;
}
#bbsList th.sorted-asc::after {
	border-bottom: 0.7rem solid #333; /* ↑ 모양 */
}
#bbsList th.sorted-desc::after {
	border-top: 0.7rem solid #333; /* ↓ 모양 */
}

/******* bbsWrap pagination CSS *********/
.pagination-wrapper {
	display : block;
	margin-top: 4rem;
	text-align: center;
}
.pagination-wrapper ul {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.pagination-wrapper li {
	float: left;
	display: inline-block;
	margin: 0 0.0rem;
}

.pagination-wrapper a {
	display: block;
	text-decoration: none !important;
	cursor: pointer;
	float: left;
	/* Select None */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	height: 3.2rem;
	/*width: 3.2rem;*/
	padding: 0 1.2rem;
	line-height: 3.2rem;
	font-weight: 500;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-left: none;
	font-size: 1.4rem;
	color: #666;
}
.pagination-wrapper li:first-child a {
	border-left: 1px solid rgba(0, 0, 0, 0.15);
}
.pagination-wrapper li.liTxt a {
	width: 8rem;
}
.pagination-wrapper a:hover {
	background-color: #f7f7f7;
}
.pagination-wrapper a.active {
	background-color: #333;
	color: #fff;
	border-color: #333;
}
.pagination-wrapper + .txtRight,
.pagination-wrapper + .txtCenter {
	margin-top: 4rem;	
}

/******* gallList 리스트 CSS *******/
#bbsList .gallery {
	display: grid;
	gap: 4rem 6rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
#bbsList .gallery.two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
#bbsList .gallery.four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
#bbsList .gallery.five{
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

#bbsWrap .gallery-item {
    display: grid;
    grid-template-rows: auto 1fr;
    background: #fff;
    border-radius: 1.2rem
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#bbsWrap .gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.6rem 1.8rem rgba(0,0,0,.06);
    border-color: #d1d5db;
}
#bbsWrap .bbsCon.gallery .gallery-item:hover {	
	transform: translateY(0);
    box-shadow: none;
    border-color: transparent;
}
#bbsWrap .gallery-item dt.img {
    width: 100%;
    position: relative;
    display: block;
}
#bbsWrap .gallery-item dt.img img {
    width: 100%;
    display: block;
    object-fit: cover;
}

#bbsWrap .gallery-item dd.con {
    padding: 2rem;
}
#bbsWrap .gallery-item dd.con h6 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	color: #333;
}
#bbsWrap .gallery-item dd.con p {
    color: #6b7280;
	margin-top: 0.5rem;	
}
#bbsWrap .gallery-item .description {
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #999;
}
#bbsList .gallery .gallery-item .img {
	width: 100%;
	position: relative;
	display: block;
	height: auto;
}
#bbsList .gallery .gallery-item .img .time {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    background-color: #333;
    text-align: center;
    padding: 0rem 0.5rem;
    color: #fff;
    font-size: 1.2rem;
    line-height: 140%;
    border-radius: 0.3rem;
    font-weight: 700;
}

/* =========================
   공통 레이아웃 / 타이포
   ========================= */
#bbsWrap .listStage { margin: 0; }
#bbsWrap .titZone h2 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
    color: #111827;
}
#bbsWrap .documentInfo {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: #6b7280;
    font-size: 13px;
}
#bbsWrap .documentInfo .item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
#bbsWrap .documentInfo .item + .item::before {
    content: "";
    width: 1px; height: 12px;
    background: #e5e7eb;
    margin-right: 12px;
}


#bbsWrap .bbsCon.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#bbsWrap .bbsCon.gallery .gallery-item:hover {
    transform: translateY(-2px);
}
#bbsWrap .bbsCon.gallery .gallery-item img.lazy {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* 원본 전체 보려면 contain */
    background: #f3f4f6;
}
#bbsWrap .bbsCon.gallery .gallery-item .downImg {
    position: absolute;
    left: 1rem;
	bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    font-size: 1.3rem;
    border-radius: 0.6rem;
    color: #fff;
    background: rgba(17,24,39,.85);
    text-decoration: none;
    opacity: 0;
    transform: translateY(0.4rem);
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
#bbsWrap .bbsCon.gallery .gallery-item:hover .downImg,
#bbsWrap .bbsCon.gallery .gallery-item:focus-within .downImg {
    opacity: 1;
    transform: translateY(0);
}
#bbsWrap .bbsCon.gallery .gallery-item .downImg:hover {
	background: rgba(17,24,39,.95);
}




/* -----------------------------
   Card News Swiper (scoped)
   ----------------------------- */
/*#bbsWrap #cardNewsWrap {
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: 22px;
    --swiper-pagination-color: #111827;
    position: relative;
    width: 100%;
}
#bbsWrap #cardNewsWrap .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

#bbsWrap #cardNewsWrap .img {
    width: 100%;
    background: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
}
#bbsWrap #cardNewsWrap .img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

#bbsWrap #cardNewsWrap .swiper-slide:hover .img img {
    transform: scale(1.02);
}

#bbsWrap #cardNewsWrap .swiper-button-prev,
#bbsWrap #cardNewsWrap .swiper-button-next {
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: rgba(17, 24, 39, .65);
    backdrop-filter: saturate(140%) blur(2px);
    transition: background .2s ease, transform .2s ease;
}
#bbsWrap #cardNewsWrap .swiper-button-prev:hover,
#bbsWrap #cardNewsWrap .swiper-button-next:hover {
    background: rgba(17, 24, 39, .85);
    transform: translateY(-1px);
}
#bbsWrap #cardNewsWrap .swiper-button-prev:focus-visible,
#bbsWrap #cardNewsWrap .swiper-button-next:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.reivewItem.is-editing {
    outline: 2px dashed #999;
    border-radius: 6px;
}*/

#cardNewsWrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto 6rem auto;
}
#cardNewsWrap .swiper-wrapper {
	height: auto;
}
#cardNewsWrap .swiper-slide .img {
	width: 100%;
}
#cardNewsWrap .swiper-slide .img img {
	width: 100%; display: block;
}
#cardNewsWrap .swiper-button-prev,
#cardNewsWrap .swiper-button-next {
	box-sizing: content-box;
	background-color: rgba(0,0,0,0.6);
	padding: 1rem;
	color: #fff;
	border-radius: 0.3rem;
	z-index: 20;
}
#cardNewsWrap .swiper-button-prev:after {
	content: 'prev' !important;
}
#cardNewsWrap .swiper-button-next:after {
	content: 'next' !important;
}
#cardNewsWrap .swiper-pagination {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.4rem 0.8rem;
	border-radius: 0.3rem;
	z-index: 20;
}
#cardNewsWrap .swiper-pagination-bullet {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.8rem;
	background-color: #fff;
	opacity: 1;
	cursor: pointer;
	margin: 0 0.4rem;
}
#cardNewsWrap .swiper-pagination-bullet-active {
	background-color: #0066b3;
	width: 4rem;
}
#cardNewsWrap .btn {
	position: absolute;
	bottom: 6rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 1rem;
	z-index: 20;
}
#cardNewsWrap .btn button {
	width: 2.6rem;
	height: 2.6rem;
	background-color: #0066b3;
	background-position: center center;
	background-repeat: no-repeat;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
#stopButton {
	background-image: url('../../main/images/white_stop_icon.png');
}
#startButton {
	background-image: url('../../main/images/white_start_icon.png');
	display: none;
}







/******* bbsWrap 상세페이지(bbsView) CSS *********/
#bbsView .titZone,
#bbsView .bbsBox,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox {
	padding: 2rem 0 3rem 0;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);	
}
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox + .bbsBox {
	margin-top: 3rem;	
}
#bbsView .titZone h2 {
    font-weight: 500;
	text-align: center;
    color: #333;
    display: block;
    width: 100%;
}
#bbsView .titZone .documentInfo {
	margin-top: 1rem;
}
#bbsView .titZone .documentInfo .item {
	display: inline-block;
	color: #333;
}
#bbsView .titZone .documentInfo .item b {
	display: inline-block;
	margin-right: 0.5rem;
	color: #999;
	font-weight: 500;
}

#bbsView .titZone .documentInfo .item:before {
    content: "·";
    margin: 0rem 1rem;
    display: inline-block;
}
#bbsView .titZone .documentInfo .item:first-child:before {
	display: none;	
}
#bbsView .bbsBox h6 + .iconUI,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox h6 + .iconUI {
	margin-top: 1rem;	
}
#bbsView .bbsBox .iconUI li,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox  .iconUI li {
	position: relative;
    padding-left: 3rem;
}
#bbsView .bbsBox .iconUI li + li,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox  .iconUI li + li {
	margin-top: 0.5rem;	
}
#bbsView .bbsBox .iconUI .icon,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox .iconUI .icon {
	position: absolute;
    display: block;
    top: 0.1rem;
    left: 0;
}
#bbsView .bbsBox .fileDownload,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox .fileDownload  {
    border: 0.1rem solid rgba(0, 0, 0, 0.15);	
    border-radius: 0.3rem;
    width: 2.2rem;
    height: 2.2rem;
    background-color: #fff;
    background-image: url(../../main/images/download_icon.jpg);
    background-position: center center;
    background-repeat: no-repeat;
}
#bbsView .bbsBox .urlAddr,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .urlAddr  {
	color: #999;
}
#bbsView .bbsBox .ui.button {
	margin: 0;	
}
#bbsView .bbsCon {
	padding: 4rem 0;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
}
#bbsView .shortList dl {
	margin: 0;
	padding: 2rem 0;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
}
#bbsView .shortList dl dt {
	margin: 0;
	width: 14rem;
	color: #999;
}
#bbsView .shortList dl dt .icon {
	display: inline-block;
	margin: 0 0 0 2rem;	
}
#bbsView .shortList dl dd {
	margin: 0;
	width: calc(100% - 14rem);
}
#bbsView .shortList dl dd a {
	color: #333;	
}
#bbsView .bbsCon + .txtCenter,
#bbsView .shortList + .txtCenter {
	margin-top: 6rem;
}

#bbsView .bbsCon.gallery .gallery-item {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0 auto;	
}
#bbsView .bbsCon.gallery .gallery-item .loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #333;
}
#bbsView .bbsCon.gallery .gallery-item.loaded .loading-overlay {
	display: none;
}
#bbsView .bbsCon.gallery .gallery-item img {
	display: block;
}
#bbsView .bbsCon.gallery .downImg {
	margin-top: 2rem;	
	display: block;	
}
#bbsView .bbsCon .mov {
	padding:56.25% 0 0 0;
	position:relative;
}
#bbsView .bbsCon .mov iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#bbsView .bbsCon.gallery p + .gallery-item,
#bbsView .bbsCon.gallery .gallery-item  + .gallery-item,
#bbsView .bbsCon.gallery .gallery-item + p,
#bbsView .bbsCon .mov  + .mov,
#bbsView .bbsCon .mov + p,
#bbsView .bbsCon .mov + h1,
#bbsView .bbsCon .mov + h2,
#bbsView .bbsCon .mov + h3,
#bbsView .bbsCon .mov + h4,
#bbsView .bbsCon .mov + h5,
#bbsView .bbsCon .mov + h6,
#bbsView .bbsCon #cardNewsWrap + p,
#bbsView .bbsCon #cardNewsWrap + h1,
#bbsView .bbsCon #cardNewsWrap + h2,
#bbsView .bbsCon #cardNewsWrap + h3,
#bbsView .bbsCon #cardNewsWrap + h4,
#bbsView .bbsCon #cardNewsWrap + h5,
#bbsView .bbsCon #cardNewsWrap + h6  {
	margin-top: 4rem;	
}


/******* 카드뉴스 CSS *******/
#bbsWrap #cardNewsWrap .swiper-pagination {
	bottom: 1rem !important;
}
#bbsWrap #cardNewsWrap .swiper-pagination-bullet {
	width: 0.8rem;
	height: 0.8rem;
	background: #d1d5db;
	opacity: 1;
	transition: width .2s ease, background-color .2s ease;
}
#bbsWrap #cardNewsWrap .swiper-pagination-bullet-active {
	width: 2.4rem;
	border-radius: 999.9rem;
	background: var(--swiper-pagination-color);
}
/* 재생/정지 버튼 컨테이너 */
#bbsWrap #cardNewsWrap .btn {
	position: absolute;
	right: 1.2rem;
	bottom: 1.2rem;
	z-index: 10;
	display: flex;
	gap: 0.8rem;
}
/* 재생/정지 버튼 스타일 (텍스트 아이콘) */
#bbsWrap #cardNewsWrap #startButton, #bbsWrap #cardNewsWrap #stopButton {
	width: 3.6rem;
	height: 3.6rem;
	border: 0;
	border-radius: 999.9rem;
	background: rgba(17, 24, 39, .75);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
#bbsWrap #cardNewsWrap #startButton:hover, #bbsWrap #cardNewsWrap #stopButton:hover {
	background: rgba(17, 24, 39, .92);
	transform: translateY(-1px);
}
#bbsWrap #cardNewsWrap #startButton:focus-visible, #bbsWrap #cardNewsWrap #stopButton:focus-visible {
	outline: 0.2rem solid #2563eb;
	outline-offset: 0.2rem;
}
/* 버튼 아이콘 표시 (문자 기반) */
#bbsWrap #cardNewsWrap #startButton::before {
	content: "▶";
	font-size: 1.4rem;
	transform: translateX(0.1rem);
}
#bbsWrap #cardNewsWrap #stopButton::before {
	content: "⏸";
	font-size: 1.4rem;
}



/******* faqList CSS *******/
#faqList {
	border-top: 0.1rem solid rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}
#faqList .title {
	position: relative;
	padding: 3rem 10rem 3rem 3rem;
	margin: 0;
	border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
	cursor: pointer;
}
#faqList .title dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0;
}
#faqList .title dt {
	width: 7rem;
	margin: 0;
	padding: 0;
}
#faqList .title dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: calc(100% - 7rem);
	font-size: 2rem;
	line-height: 150%;
	font-family: 'Pretendard-SemiBold';
	color: #333;
	margin: 0;
	padding: 0;
}
#faqList.ui.accordion .number {
	display: block;
	width: 5rem;
	height: 5rem;
	font-size: 2rem;
	line-height: 5rem;
	font-family: 'Pretendard-SemiBold';
	background-color: #2185d0;
	text-align: center;
	color: #fff;
	border-radius: 50%;
}
#faqList .title:not(.ui) i {
	position: absolute;
	top: 3rem;
	right: 3rem;
	color: #bababa;
	font-size: 3rem;
}
#faqList .title .chevron.down.icon {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transition:all 300ms linear;
}
#faqList .title.active .chevron.down.icon {
	top: 4rem;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	transition:all 300ms linear;
	color: #484848;
}
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) {
	padding: 4rem 10rem;
	background-color: #f7f7f7;
	border-bottom: 0.1rem solid #f0f0f0;
	color: #333;
	position: relative;
}
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .txtCenter {
	text-align: center;
	overflow: hidden;
}
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox + .faqCon,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .faqCon + .txtCenter,
#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .faqCon p + p {
	margin-top: 4rem;	
}
#faqList + .txtCenter,
#faqList + .txtRight {
	margin-top: 6rem;	
}


/******* bbsWrap 입력(bbsInput) CSS *********/
.fieldList {
	position: relative;
	overflow: hidden;
	border-top: 0.2rem solid rgba(0, 0, 0, 0.3);
	border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
	padding: 2rem 4rem;
}
.fieldList:before {
	content: "";
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 26rem;
	height: 100%;
	background-color: #f6f6f6;
	z-index: 1;
}
.fieldList li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.fieldList li + li {
	margin-top: 2rem;	
}

.fieldList li .tit {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: #333;
	font-family: 'Pretendard-Medium';
	width: 18rem;
	z-index: 2;
}
.fieldList li .tit .certainly {
	display: inline-block;
	color: #999;
	font-size: 1.3rem;
	margin-left: 0.5rem;
	margin-top: 0rem;
}
.fieldList li .con {
	width: calc(100% - 26rem);
}
.fieldList li .con .fields {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.fieldList li .con .fields.three .field:nth-child(3),
.fieldList li .con .fields.four .field:nth-child(4),
.fieldList li .con .fields.five .field:nth-child(5),
.fieldList li .con .fields.six .field:nth-child(6) {
	margin: 1rem 0 0 0;	
}

 
.fieldList li .con .fields li {
	margin: 0;
	font-size: 1.5rem;
	line-height: 140%;
}
#bbsInput + .txtCenter,
.fieldList + .txtCenter {
	margin-top: 6rem;	
}
#bbsInput .k-editor {
	height: 40rem;
	resize: vertical;
}
.tip {
	margin-top: 1rem;
	display: block;
	font-size: 1.5rem;
	line-height: 140%;
	padding-left: 2rem;
	background-image: url(../../main/images/tip_ico.png);
	background-position: left 0.4rem;
	background-repeat: no-repeat;
}
#bbsInput .hidden { 
	display:none !important;
}

.yt-info-thumb img {
	width: 16rem;
	border-radius: 0.8rem;
	border: 0.1rem solid rgba(0, 0, 0, 0.15);
	background: #f6f6f6;
}
.yt-info-embed textarea {
	width: 100%;
	height: 8rem;
	resize: none;
}
.yt-info-duration input[type="text"] {
	width:20rem;
}

#bbsView .reply {
    background-color: #eee;
    position: relative;
	padding: 4rem;
}
#bbsView form.reply {
	padding: 0 4rem 4rem 4rem;
}
#bbsView form.reply .fieldList {
    border-top: 0.1rem solid rgba(0, 0, 0, 0.15);
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.15);
    padding: 2rem 0;
}
#bbsView form.reply .fieldList li .con {
    width: calc(100% - 20rem);
}
#bbsView form.reply .fieldList:before {
	display: none;	
}
#bbsView form.reply .fieldList + .txtCenter {
    margin-top: 0rem;
}
#bbsView .reply .reView + .ReWriter {
	margin-top: 2rem;
}
#bbsView .reply .ui.button.tiny + .reView,
#bbsView .reply .ReWriter + .ReDate {
	margin-top: 1rem;
}
#bbsView .reply .reView p,
#bbsView .reply .ReWriter,
#bbsView .reply .ReDate {
	color: #333;
}


/****** kendo ui CSS *****/
.k-toolbar.k-toolbar-resizable {
    flex-wrap: wrap;
}
.k-textbox,
.k-input.k-combobox .k-input-inner,
.k-numerictextbox .k-input,
.k-textarea .k-input,
.k-combobox .k-dropdown-wrap .k-input,
.k-datepicker .k-input-inner {
	font-size: 1.6rem;
	width: 100%;
	padding: 0.5rem;
	border-radius: .25rem;
}
.k-textbox {
	height: 4rem;
	border: 0.1rem solid rgba(0, 0, 0, 0.1);
}
.k-textarea {
	width: 100%;
}
.k-checkbox {
	width: 2.4rem;
    height: 2.4rem;
	border-radius: 0.3rem;
}
.k-radio {
    width: 2.4rem;
    height: 2.4rem;
}
.k-checkbox::before {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 2.4rem;
	mask-size: 1.7rem;
	mask-position: center center;
    background-color: transparent;
}

.k-combobox,
.k-numerictextbox,
.k-maskedtextbox,
.k-datepicker,
.k-timepicker {
	width: 24rem;
}

.k-numerictextbox .k-input,
.k-combobox .k-dropdown-wrap .k-input,
.k-input.k-combobox,
.k-datepicker .k-input-inner,
.k-numerictextbox.k-input,
.k-input.k-maskedtextbox,
.k-multiselect.k-input,
.k-datetimepicker.k-input,
.k-timepicker.k-input {
	height: 4rem;	
}
.k-combobox .k-clear-value {
	height: 100%;	
}

.k-radio + label,
.k-checkbox + label,
.k-timepicker + label,
.k-input + label {
	margin-left: 0.5rem;
}
.k-radio + label,
.k-checkbox + label {
	cursor: pointer;	
}
.fields + .fields {
	margin-top: 0.5rem;	
}
.k-upload + label {
	display: block;
	margin-top: 1rem;	
}
input::placeholder,
.k-input::placeholder {
    color: #999 !important;
    font-size: 1.6rem;
}
select {
	font-size: 1.6rem;
}
.k-list .k-item,
.k-popup .k-list .k-list-item-text,
.k-upload .k-upload-files .k-file-name {
	font-size: 1.5rem;
	line-height: 140%;
}

.k-toolbar .k-input {
    width: 20rem;
}
.k-toolbar .k-input.k-combobox .k-input-inner {
    font-size: 1.5rem;
    width: 100%;
    padding: 0.2rem 1rem;
    border-radius: 0rem;
}
.k-toolbar .k-input.k-combobox {
	height: 3rem;
}
.k-toolbar .k-button {
	width: 3rem;
	height: 3rem;	
}
.k-picker-md.k-icon-picker>.k-input-inner {
	height: 100%;	
}

.k-upload .k-upload-files .k-file-size,
.k-upload .k-upload-files .k-file-summary,
.k-upload .k-upload-files .k-file-validation-message {
    font-size: 1.1rem;
	line-height: 140%;
}
.k-window-title {
    padding-block: 0rem;
    margin-block: 0em;
    font-size: 1.4rem;
	line-height: 140%;
}
.k-form .k-form-field>.k-label,
.k-form .k-form-field>kendo-label,
.k-form .k-form-label {
	font-size: 1.4rem;
	line-height: 140%;
    margin-bottom: 0.5rem;
}
.k-checkbox-label {
	font-size: 1.4rem;
	line-height: 140%;
    margin-bottom: 0.5rem;
}
.k-input-md .k-input-inner,
.k-picker-md .k-input-inner {
	font-size: 1.5rem;
	line-height: 140%;
    padding-block: 0rem;
    padding-inline: 0rem;
	padding: 0.2rem 1rem;
}
.k-input-md .k-input-button,
.k-picker-md .k-input-button,
.k-picker-md .k-spinner-increase,
.k-picker-md .k-spinner-decrease {
	width: 3rem;
    padding-block: 0rem;
    padding-inline: 0rem;
	padding: 0.1rem;
}
.k-window label,
.k-window span {
    font-size: 1.3rem;
    line-height: 140%;
    word-break: keep-all;
}
.k-window .k-textbox,
.k-window .k-input.k-combobox .k-input-inner,
.k-window .k-numerictextbox .k-input,
.k-window .k-textarea .k-input,
.k-window .k-combobox .k-dropdown-wrap .k-input,
.k-window .k-datepicker .k-input-inner {
	font-size: 1.3rem;
	width: 100%;
	height: auto;
	padding: 0rem;
	border-radius: .25rem;
}

.k-window .k-checkbox-wrap + .k-checkbox-label {
	margin-left: 0.5rem;	
}
.k-window .k-combobox,
.k-window .k-numerictextbox,
.k-window .k-maskedtextbox,
.k-window .k-datepicker,
.k-form-field-wrap .k-numerictextbox {
	width: 100%;
}
.k-window  .k-checkbox {
	width: 1.5rem;
    height: 1.5rem;
	border-radius: 0.3rem;
}
.k-window  .k-checkbox::before {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
	mask-size: 1.2rem;
}
.k-window .k-color-preview {
    width: 100%;
    height: 100%;
    border-width: 1px;
    border-radius: var(--kendo-border-radius-md, 0.25rem);
    box-sizing: border-box;
    border-style: solid;
    display: inline-flex;
    flex-flow: row nowrap;
    position: relative;
    overflow: hidden;
}
.k-window .k-input-md.k-icon-picker>.k-input-inner,
.k-window .k-picker-md.k-icon-picker>.k-input-inner {
    height: calc(var(--kendo-line-height, normal) * 1em);
}
.k-window .k-input-md .k-input-inner,
.k-window .k-picker-md .k-input-inner {
	font-size: 1.3rem;
	line-height: 140%;
	padding: 0.5rem;
}
.k-window .k-input-md.k-textarea .k-input-inner {
	font-size: 1.5rem;
	line-height: 160%;
	padding: 1rem;
}

.k-switch-md .k-switch-track {
    width: 7rem;
    height: 3.2rem;
}
.k-switch-md .k-switch-thumb {
    width: 3.2rem;
    height: 3.2rem;
}
.k-switch-md .k-switch-label-on {
    left: 1rem;
}
.k-switch-md .k-switch-label-off {
    right: 1rem;
}
.k-switch-on .k-switch-thumb {
    transform: translate(0%, -50%);
}
.k-switch-off .k-switch-thumb {
    transform: translate(-50%, -50%);
}
.k-switch-on .k-switch-track {
    border-color: #007bff;
    background-color: #007bff;
}


/******* Semantic UI CSS ********/
.ui.table {
	width: calc(100% + 0.2rem);
	margin: 0 -0.1rem;	
}
.ui.table thead th,
.ui.table tbody td {
	text-align: center;	
    padding: 1.2rem;
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.075);
    border-left: none;
}
.ui.table thead th {
	font-size: 1.5rem;
    cursor: auto;
    background: #f7f7f7;
    color: #333;
    font-weight: 700;
}
.ui.table tbody td {
	font-size: 1.5rem;
	line-height: 150%;
    background: #fff;
    color: #999;
}
.ui.table tbody td a {
	font-size: 1.6rem;
	line-height: 150%;
	color: #333;	
}
.ui.table.tdLeft-01 td:nth-child(1),
.ui.table.tdLeft-02 td:nth-child(2),
.ui.table.tdLeft-03 td:nth-child(3),
.ui.table.tdLeft-04 td:nth-child(4),
.ui.table.tdLeft-05 td:nth-child(5),
.ui.table.tdLeft-06 td:nth-child(6),
.ui.table.tdLeft-07 td:nth-child(7),
.ui.table.tdLeft-08 td:nth-child(8),
.ui.table.tdLeft-09 td:nth-child(9),
.ui.table.tdLeft-10 td:nth-child(10) {
	text-align: left;	
}

.ui.button.mini,
#bbsList table td a.ui.button.mini {
    font-size: 1.2rem;
    line-height: 140%;
    padding: 0.4rem 0.82rem;
    border-radius: 0.3rem;
}
.ui.button.tiny {
    font-size: 1.3rem;
    line-height: 140%;
    padding: 0.4rem 1rem;
    border-radius: 0.3rem;
}
.ui.button {
	font-size: 1.4rem;
	line-height: 100%;
	padding: 1.2rem 2.4rem;
	border-radius: 0.3rem;	
}
.ui.button.big {
	font-size: 1.6rem;
	line-height: 100%;
	padding: 1.5rem 3rem;
	border-radius: 0.3rem;	
}
.ui.button.small {
	font-size: 1.3rem;
	line-height: 100%;
	padding: 0.8rem 1.6rem;
	border-radius: 0.3rem;	
}
.ui.basic.label {
	font-size: 1.2rem;
	line-height: 100%;
	padding: 0.5rem 1rem;
	border-radius: 0.3rem;	
    border: 0.1rem solid rgba(0, 0, 0, 0.075);
    color: #666;
}

/****** modal CSS *******/
.ui.modal {
	position: relative;
	border-radius: 1.2rem;
	padding: 2rem 4rem;
}
.ui.modal>.header {
	border: none;
	text-align: left;
	padding: 0;
}
.mClose {
	position: absolute;
	display: block;
	right: 4rem;
	top: 2rem;
	width: 2.4rem;
	height: 2.4rem;
	background-image: url(../../main/images/btn_close.png);
	background-position: center center;
	background-repeat: no-repeat;
}
.ui.modal .con {
	margin-top: 2rem;
}
.ui.modal .con .fieldList {
	border-top: 0.1rem solid rgba(0, 0, 0, 0.3);
	border-bottom: 0.1rem solid rgba(0, 0, 0, 0.075);
	background-color: #fff;
	padding: 2rem;
}
.ui.modal .con .fieldList:before {
	display: none;	
}
.ui.modal .con .fieldList .tit {
    width: 100%;
}
.ui.modal .con .fieldList .con {
	width: 100%;
	margin-top: 1rem;
}
.footer {
	margin-top: 4rem;	
}

/******** PDFView css *******/
#pdfView {
	position: relative;
	width: 100%;
	height: calc(100vh - 6rem);
	margin-bottom: 6rem;
}
#pdfView #toolbar {
	top: 0;
	left: 0;
	right: 0;
	height: 5rem;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.8rem;
	padding: 0 1.2rem;
	z-index: 100;
}
#pdfView #toolbar button .icon {
	margin: 0;	
}
#pdfView #viewerContainer {
	position: absolute;
	top: 5rem;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	background: #e0e0e0;
}
#pdfView  .pageContainer {
	margin: 1rem 0;
	box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.2);
	background: #fff;
}
#pdfView  .pageContainer canvas {
	display: block;
	width: auto;
	height: auto;
	max-height: calc(100vh - 6rem);
}
#pdfView  #pageNum {
	width: 4rem;
	text-align: center;
}
#pdfView  #loadingOverlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
}
#pdfView  .spinner {
	width: 4.5rem;
	height: 5rem;
	border: 0.5rem solid #ccc;
	border-top-color: #1a73e8;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}


.youtube-preview {
    display: flex;
    gap: 12px;
    align-items: center;
}
.youtube-preview img {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}
#bbsWrap .Multi-stage .inputStage .fieldList li .con .att-list.dot {
	margin-top: 2rem;	
}
#bbsWrap .Multi-stage .inputStage .fieldList li .con .att-list.dot .icon {
	display: none;
}
#bbsWrap .Multi-stage .inputStage .fieldList li + li {
    margin-top: 3rem;
}


.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: var(--border);
}
#bbsWrap #search.card-body,
.card-body {
    padding: 2rem;
}
#bbsWrap .listStage #search {
    padding: 2rem 3rem;
    background-color: #f7f7f7;
}
#search .search-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 5;
}
#search .search-left .ui.button,
#search .search-02 .ui.button {
    flex: 0.4;
    min-width: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
#search .search-left .searchInput,
#search .search-02 .searchInput {
    flex: 3;
    min-width: 18rem;
}
#bbsView .reply .ui.button.tiny.orange + .reivewItem {
	margin-top: 2rem;	
}
#bbsView .reply .reivewItem .answer-actions {
	margin-top: 1rem;	
}
#bbsView .reply .reivewItem + .reivewItem {
	margin-top: 3rem;	
}

@media (max-width: 1299px) {
	.inner2 {
		padding: 2rem;	
	}

	/*#cardNewsWrap .swiper-pagination {
		bottom: 1rem;
	}
	#cardNewsWrap .swiper-pagination-bullet {
		width: 1rem;
		height: 1rem;
		border-radius: 0.5rem;
		margin: 0 0.2rem;
	}
	#cardNewsWrap .swiper-pagination-bullet-active {
		width: 2.5rem;
	}*/
	#bbsList .gallery.four {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	#bbsList .gallery.five{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.fieldList {
		padding: 2rem;
	}
	.fieldList:before {
		width: 20rem;
	}
	.fieldList li .tit {
		width: 16rem;
	}
	.fieldList li .con {
		width: calc(100% - 20rem);
	}
	#bbsView form.reply .fieldList li .tit {
		width: 12rem;
	}
	#bbsView form.reply .fieldList li .con {
		width: calc(100% - 12rem);
	}
	
	#faqList .title {
		padding: 2rem 8rem 2rem 2rem;
	}
	#faqList .title:not(.ui) i {
		top: 2rem;
		right: 2rem;
	}
	#faqList .title.active .chevron.down.icon {
		top: 3rem;
	}
	#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) {
		padding: 3rem 9rem;
	}
	#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) .bbsBox {
		padding: 0 0 3rem 0;	
	}

	 #bbsWrap .gallery,
	 #bbsList .gallery.four,
	 #bbsList .gallery.five {
		 grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	#bbsWrap #search {
		padding: 2rem;
	}
	#bbsWrap #search .flex .k-input.k-combobox {
		width: 100%;
		margin-bottom: 0.3rem;
	}
	#bbsWrap #search .flex .k-input.k-combobox + .searchInput {
    	margin-left: 0;
	}
	#bbsWrap #search .flex .searchInput {
		width: calc(100% - 5.8rem);
	}
	#search + #bbsList {
    	margin-top: 4rem;
	}
	#bbsList table thead,
	#bbsList table colgroup {
		display: none;	
	}
	#bbsList table {
		border-top: 0.1rem solid rgba(0, 0, 0, 0.3);	
	}
	#bbsList table tbody td {
		display: block;
		width: 100%;
		text-align: left;
		border-bottom: none;
		padding: 0.5rem;
		background-color: transparent;
	}
	#bbsList table tbody tr {
		display: block;
		padding: 2rem 1rem;
		border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);	
	}
	#bbsList table tbody tr:nth-child(2n) {
		background-color: #f7f7f7;	
	}
	
	#bbsView .titZone h2 {
		line-height: 130%;
	}
	#bbsView .titZone .documentInfo {
		margin-top: 2rem;
		flex-wrap: wrap;
	}
	#bbsView .titZone .documentInfo .item {
		display: block;
		width: 100%;
	}
	#bbsView .titZone .documentInfo .item:before {
		display: none;
	}
	#pdfView {
		height: calc(100vh - 8.4rem);
		margin-bottom: 4rem;
	}
	#pdfView #toolbar {
		height: 7.4rem;
		gap: 0.6rem;
		padding: 1.2rem;
	}
	#pdfView #viewerContainer {
		top: 7.4rem;
	}
	#bbsView .shortList dl dt,
	#bbsView .shortList dl dd {
		width: 100%;
	}
	
	#bbsView .reply {
		padding: 3rem;
	}
	#bbsView form.reply {
		padding: 0 3rem 3rem 3rem;
	}
	.fieldList {
		padding: 2rem 0;
	}
	.fieldList:before {
		display: none;
	}
	.fieldList li .tit,
	.fieldList li .con,
	#bbsView form.reply .fieldList li .tit,
	#bbsView form.reply .fieldList li .con {
		width: 100%;
	}
	#bbsView form.reply .fieldList li .con {
		margin-top: 1rem;
	}
	#faqList .title dt {
		width: 6rem;
	}
	#faqList.ui.accordion .number {
		width: 4.2rem;
		height: 4.2rem;
		font-size: 1.7rem;
		line-height: 4.2rem;
	}
	#faqList .title dd {
		width: calc(100% - 6rem);
		font-size: 1.7rem;
	}
	#faqList .title:not(.ui) i {
		top: 2.4rem;
		font-size: 2rem;
	}
	#faqList.ui.accordion:not(.styled) .title~.content:not(.ui) {
        padding: 3rem;
    }
	
	#bbsList .gallery.two,
	#bbsWrap .gallery,
	#bbsList .gallery.four,
	#bbsList .gallery.five {
		grid-template-columns: 1fr;
	}
	
	/*#bbsView .bbsCon #cardNewsWrap .swiper-button-prev,
	#bbsView .bbsCon #cardNewsWrap .swiper-button-next {
		padding: 0.5rem 0.3rem;
	}
	.swiper-button-next:after, .swiper-button-prev:after {
		font-size: 2.2rem;
	}*/
	
	#bbsWrap .listStage #search {
		padding: 1.5rem 2rem;
		border-radius: 0.8rem;
	}
	#search .search-left {
		flex-wrap: wrap;
	}
	#search .search-left .ui.button,
	#search .search-02 .ui.button {
		flex: 0.5;
		min-width: 6rem;
	}
	#search .search-left .searchInput,
	#search .search-02 .searchInput {
		flex: auto;
		min-width: 18rem;
	}
	.k-combobox,
	.k-numerictextbox,
	.k-maskedtextbox,
	.k-datepicker,
	.k-timepicker {
    	width: 100%;
		min-width: 18rem;
	}
	
	#bbsWrap #cardNewsWrap .swiper-button-prev, 
	#bbsWrap #cardNewsWrap .swiper-button-next {
		width: 2.6rem;
		height: 2.6rem;
	}
	#bbsWrap #cardNewsWrap .swiper-button-next:after,
	#bbsWrap #cardNewsWrap .swiper-button-prev:after {
		font-size: 2rem;
	}
	#bbsWrap #cardNewsWrap .btn {
		right: 0.8rem;
		bottom: 0.8rem;
	}
	#bbsWrap #cardNewsWrap #startButton,
	#bbsWrap #cardNewsWrap #stopButton {
		width: 3.2rem;
		height: 3.2rem;
	}
	#bbsWrap #cardNewsWrap .img {
		border-radius: 1rem;
	}
	#bbsWrap #cardNewsWrap .img img {
		max-height: 72vh;
		margin-inline: auto;
	}
}

@keyframes spin {
	to {
		transform:rotate(360deg);
	}
}
@media print {
	body, html {
		overflow: visible;
	}
	#toolbar, #loadingOverlay {
		display: none !important;
	}
	.pageContainer {
		page-break-after: always;
	}
}

@media (prefers-reduced-motion: reduce) {
	#bbsWrap #cardNewsWrap .img img,  #bbsWrap #cardNewsWrap .swiper-button-prev,  #bbsWrap #cardNewsWrap .swiper-button-next {
		transition: none !important;
	}
}
/* ============================================================
 * radio/checkbox — 라벨(텍스트)/필드 클릭 가능 표시 (커서 포인터)
 *   • admin_con.js / addJs.js 의 라벨 클릭 토글과 짝을 이룸
 * ============================================================ */
.field:has(> input[type="checkbox"]),
.field:has(> input[type="radio"]) { cursor: pointer; }
.field input[type="checkbox"],
.field input[type="radio"],
.field:has(> input[type="checkbox"]) label,
.field:has(> input[type="radio"]) label { cursor: pointer; }
.field > input[type="checkbox"]:disabled,
.field > input[type="radio"]:disabled { cursor: default; }