@charset "utf-8";

/************************************* 
BBS Style Sheet
Version : 1.0
Author : uracle(sejong) - sk.k
Create date : 2025. 05.
*************************************/

@media only screen and (max-width:1280px) {
	
	.thumb-type .item{
		gap: 3rem;
	}
	.album-type > li{
		padding: 2rem 1rem;
	}
}
@media only screen and (max-width:1024px) {
	
	.album-type > li{
		width: calc(100% / 2);
	}
	.album-type .thumb{
		max-width: 100%;
		/* height: 27vw;
		max-height: 34rem; */
	}
	.photo-list .tit{
		font-size: 2.4rem;
	}
}

@media only screen and (max-width:768px) {
	
	
	.table-wrap{
		overflow-x: auto;
	}
	.table-wrap [class^="tstyle-"]{
		margin-bottom: 0;
	}
	.table-wrap.response{
		overflow: visible;
	}
	.table-wrap.response [class^="tstyle-list"]{
		table-layout: fixed; 
	}
	.table-wrap.response [class^="tstyle-list"] colgroup,
	.table-wrap.response [class^="tstyle-list"] thead{
		display: none;
	}
	.table-wrap.response [class^="tstyle-list"] > tbody > tr{
		display: block;
		width: 100%;
		padding: 10px 0;
		border-bottom: 1px #e5e5e5 solid;
	}
	.table-wrap.response [class^="tstyle-list"] > tbody > tr > td{
		display: block;
		padding: 0.2rem 0.5rem;
		border: none;
		text-align: left;
		white-space: nowrap;
		color: #555;
	}
	.table-wrap.response [class^="tstyle-list"] > tbody > tr > td:before{
		content: attr(aria-label);
		margin-right: 0.5rem;
		vertical-align: middle;
		color: #333;
		font-weight: 600;
	}
	.table-wrap.response .tstyle-list .num{
		width: auto;
		text-align: left;
	}
	.table-wrap.response .tstyle-list .num:before{
		display: none;
	}
	.table-wrap.response .tstyle-list td.subject{
		display: block;
		width: 100%;
	}
	.table-wrap.response .tstyle-list td.subject a{
		display: inline-block;
		width: 90%;
		vertical-align: middle;
		color: #000;
	}
	.table-wrap.response .tstyle-list td.file i{
		display: inline-block;
		vertical-align: middle;
	}
	
	.photo-list .tit{
		font-size: 2rem;
	}
	.thumb-type .item{
		gap: 2rem;
	}
	
	.faq-list>li .question{
		padding: 2rem 4rem 2rem 4rem;
	}
	.faq-list>li .question::after{
		right: 1rem;
	}
	.faq-list .txt-qa{
		left: 0.5rem;
		width: 2.4rem;
	}
	.faq-list .answer{
		padding: 0 3rem;
	}
	.faq-list>li.active .answer{
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	.faq-list .answer .txt-qa{
		top: 2rem;
	}
	/* view  */
	.board-view .view-top,
	.download-list{
		padding: 2rem 1rem;
	}
}

@media only screen and (max-width:580px) {
	.search-box{
		display: block;
	}
	.search-box select{
		width: 100%;
		margin-bottom: 1rem;
	}
	.search-box .input-group input{
		width: calc(100% - 10rem);
	}
		
	.bbs-basics02 .search-box{
		position: inherit;
		display: block;
		margin-bottom: var(--number-14);
		padding: var(--number-12) var(--number-10);
		background-color: #ededed;
	}
	
	.thumb-type li{
		padding: 3rem 2rem;
	}
	.thumb-type .thumb{
		width: 100%;
		max-width: 35.8rem;
		/* height: 24rem; */
		margin: 0 auto;
		text-align: center;
	}
	.thumb-type .item{
		flex-direction: column;
	}
	.thumb-type .desc{
		width: 100%;
	}
	
	/*모바일용 페이징 주석 처리
	[class*="pagination"]{
		display: grid;
		grid-template-areas:
			"pagenumbers pagenumbers pagenumbers pagenumbers pagenumbers pagenumbers"
			". pagefirst pageprev pagenext pagelast .";
		justify-items: center;
		gap: 1rem 0.5rem;
	}
	[class*="pagination"] .page-navi.first{
		grid-area: pagefirst;
	}
	[class*="pagination"] .page-navi.prev{
		grid-area: pageprev;
	}
	[class*="pagination"] .page-navi.next{
		grid-area: pagenext;
	}
	[class*="pagination"] .page-navi.last{
		grid-area: pagelast;
	}
	*/
	[class*="pagination"]{
		gap: 1rem 0.5rem;
	}
	
	[class*="pagination"] .page-navi{
		width: 3rem;
		min-width: initial;
		height: 3rem;
		border: 1px #ddd solid;
		border-radius: 0.6rem;
	}
	[class*="pagination"] .page-numbers{
		/*모바일용 페이징 주석 처리
		grid-area: pagenumbers;
		flex-wrap: wrap;
		width: 100%;
		*/
		gap: inherit;
	}
	[class*="pagination"] .page-link{
		min-width: 3rem;
		height: 3rem;
		border: 1px #ddd solid;
	}
	[class*="pagination"] .page-link.active,
	[class*="pagination"] li.active a{
		border-color: transparent;
	}
	
}

@media only screen and (max-width:440px) {
	
}