@charset "utf-8";

.pageTit { font-weight:300; color:#333; margin-bottom:10px; font-size:2.0rem; font-weight:500;}

/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 카테고리  //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
.snb_menu3 { display:flex; margin-bottom:30px; gap:1px; border-bottom:1px solid #ddd;  }
.snb_menu3 li { width:20%; flex-grow:1; background:#f1f1f1; height:4.6rem; display:flex; justify-content:center; align-items:center; border-radius:6px 6px 0 0; cursor:pointer;}
.snb_menu3 li a,
.snb_menu3 li span { width:100%; display:block; text-align:center; font-size:1.5rem; color:var(--text-dkgrey); margin-top:2px; cursor:pointer; }
.snb_menu3 li.current { background:var(--gra-main);}
.snb_menu3 li.current a,
.snb_menu3 li.current span { color:#fff;}

/* ================================== 반응형 ================================== */
@media all and (max-width: 768px) { 
	.snb_menu3 li a,
	.snb_menu3 li span { font-size:1.4rem;}
}	

@media all and (max-width: 480px) { 
	.snb_menu3 li a,
	.snb_menu3 li span { font-size:1.3rem;}
}

/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 검색 //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
.boardListTop { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.boardSearch { display:flex; width:80%; max-width:400px; gap:5px; justify-content:space-between; }
.boardSearch .srcSel { width:90px; flex-shrink:0;}
.boardSearch .srcInput { flex-grow:1; } 
.boardSearch select, 
.boardSearch input { width:100%; border-radius:4px; }
.boardSearch .srcBtn { background:var(--pink); color:#fff; border:0; padding:0 15px; cursor:pointer; border-radius:4px;}

/* ================================== 반응형 ================================== */
@media all and (max-width: 768px) { 
	/* 검색 */
	.boardListTop {flex-wrap:wrap; }
	.boardSearch { width:100%; max-width:100%;}
	.boardSearch .srcSel { width:70px; flex-shrink:0;}
}	

/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 목록페이지 (기본)  //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
/*admin*/	
.s_default_admin a{ color:red; }

/* 목록 테이블 */
.boardList { border-top:2px solid var(--main);  }
.boardList td {border-bottom:1px solid #efefef; padding:12px 15px ; text-align:center; font-size:1.5rem; color:var(--text-dkgrey); box-sizing:border-box;}
.boardList td a { color:var(--text-dkgrey); }
.boardList th { /*background:#f9f3f6;*/ font-weight:300; color:var(--text-ltgrey); text-align:center; padding:12px 15px; border-bottom:1px solid var(--main); font-size:1.5rem; text-align:center; }
.boardList tr td, .boardList tr { background:#fff; }
.boardList tr:hover td, .boardList tr:hover { background:#f9f9f9; }
.listBtmBtns { margin-top:10px;}
.boardList .notice img {vertical-align:middle; }
.boardList tr:has(td.notice), .boardList tr:has(td.notice) td { background:#fbf7f9; }
.boardList tr:has(td.notice):hover, .boardList tr:has(td.notice):hover td { background:#fbf7f9; }
.boardList tr:has(td.notice) .title a { font-weight:500;}
.boardList td.num { width:100px; }
.boardList td.title { text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.boardList td.writer { width:150px; white-space:nowrap; }
.boardList td.date { width:150px; font-size:1.4rem; white-space:nowrap;  }
.boardList td.counter { width:80px; white-space:nowrap;}

/* ================================== 반응형 ================================== */
@media all and (max-width: 1024px) { 
	/* 목록 테이블 */
	.boardList td, .boardList td { font-size:1.4rem; }		
}

@media all and (max-width: 768px) { 
	/* 목록 테이블 */
	.boardList { border-top:0; }
	.boardList thead { display:none; }
	.boardList tr { display:flex; width:100%; border:1px solid #efefef; flex-wrap:wrap; gap:5px; padding:15px;  }
	.boardList tr + tr { margin-top:5px; }
	.boardList td { border-bottom:0; padding:0; display:block; text-align:left;}
	.boardList tr:hover td { background:#fff; } 
	.boardList td.num:not(.notice) { display:none;}	
	.boardList td.title { width:100%; font-size:1.5rem;}
	.boardList td.writer { width:auto; max-width:none; font-size:1.3rem; color:#999; }
	.boardList td.date { width:auto; font-size:1.3rem; color:#999; }
	.boardList td.counter { display:none;}
	.boardList tr:hover td, .boardList tr:hover { background:#fff; }
}	

@media all and (max-width: 480px) { 
	/* 목록 테이블 */
	.boardList tr { padding:10px;  }
	.boardList td.title { white-space:initial; overflow:visible; }
}	

/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 목록페이지 (갤러리형) //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
/* 갤러리 목록 */
.galleryList { display:flex; gap:20px; flex-wrap:wrap; }
.galleryList a { display:block;}
.galleryList .thumbImg { width:100%;}
.galleryList .thumbImg img { width:100% !important; }
.galleryList.finished .thumbImg img { filter: grayscale(100%);  }
.galleryList.col2 .galleryItem { width:calc(50% - 10px);}

/* 이벤트 목록 제목 */
.eventBoardTit { padding-bottom:10px; font-size:2.4rem; font-weight:500; color:var(--text-main); }
.eventBoardTit.finished { color:var(--text-grey); margin-top:50px; }


/* ================================== 반응형 ================================== */
@media all and (max-width: 768px) { 
	/* 갤러리 목록 */
	.galleryList { gap:10px; }
	.galleryList.col2 .galleryItem { width:calc(50% - 5px);}

	/* 이벤트 목록 제목 */
	.eventBoardTit { padding-bottom:5px; font-size:2.0rem;  }
	.eventBoardTit.finished { margin-top:40px; }
}	

@media all and (max-width: 480px) { 
	/* 갤러리 목록 */
	.galleryList.col2 .galleryItem { width:100%;}

	/* 이벤트 목록 제목 */
	.eventBoardTit { font-size:1.8rem;  }
	.eventBoardTit.finished { margin-top:30px; }
}

/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// faq 목록  //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
.faqBoardList { }
.faqBoardList .faqList { border:1px solid #efefef; }
.faqBoardList .faqList + .faqList { margin-top:5px; }
.faqBoardList .faqList .questionWrap { padding:12px; display:flex; justify-content:space-between; align-items:center; transition:all 0.3s; }
.faqBoardList .faqList .questionWrap .question { cursor:pointer; font-size:1.6rem; color:var(--text-dkgrey); font-weight:300; flex-grow:1; display:flex; justify-content:space-between;}
.faqBoardList .faqList .questionWrap .question:after { width:26px; height:26px; background: url(images/faq_down.png)center no-repeat; background-size:contain; content:''; display:block; }
.faqBoardList .faqList.open .questionWrap .question:after { background: url(images/faq_up_white.png)center no-repeat; background-size:contain; }
.faqBoardList .answerWrap { padding:20px; background:#f9f9f9; display:none; }
.faqBoardList .faqList.open .questionWrap { background:var(--main); }
.faqBoardList .faqList.open .questionWrap .question { color:#fff}
.faqBoardList .answerWrap * { font-family:'SBAggro', 'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif  !important;}

/* ================================== 반응형 ================================== */
@media all and (max-width: 768px) { 
	.faqBoardList .faqList .questionWrap { flex-wrap:wrap; }
	.faqBoardList .faqList .questionWrap .question { width:100%;}
}


/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 상세페이지  //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
.boardView .borderViewTop { border-top:2px solid var(--main); border-bottom:1px solid var(--main); width:100%; }
.boardView .borderViewTop .boardTit { font-weight:500;  font-size:2.0rem; color:var(--text-dkgrey); padding:15px 20px; }
.boardView .borderViewTop .boardInfo { padding:15px 20px; font-size:1.4rem; color:var(--text-ltgrey); border-top:1px solid #f1f1f1;}
.boardView .borderViewTop .boardInfo li { display:flex; align-items:center; }
.boardView .borderViewTop .boardInfo li + li { margin-top:5px;}
.boardView .borderViewTop .boardInfo li > span { display:flex; align-items:center; }
.boardView .borderViewTop .boardInfo li > span + span:before { content:""; margin:0 10px; width:1px; height:12px; background:#ccc; display:block;}
.boardView .boardCnts { padding:20px; font-size:1.5rem; color:var(--text-dkgrey); line-height:1.6; border-bottom:1px solid #efefef; min-height:200px; }
.viewBtmBtns { margin-top:20px; }
.viewBtmBtns .left,
.viewBtmBtns .right { display:flex; gap:5px; align-items:center; }
.viewBtmBtns .left { float:left;}
.viewBtmBtns .right { float:right;}
.viewBtmBtns:after { display:block; content:''; width:100%; clear:both; height:0; }


/* 상세페이지 폰트 설정 */
.boardView .boardCnts * { font-family:'SBAggro', 'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif !important; }
.boardView .boardCnts img { max-width:100%;}

/* ================================== 반응형 ================================== */
@media all and (max-width: 480px) { 
.boardView .borderViewTop .boardTit { font-size:1.8rem; padding:15px; }
.boardView .borderViewTop .boardInfo { padding:15px; font-size:1.3rem; }
.boardView .borderViewTop .boardInfo li { flex-wrap:wrap;}
.boardView .borderViewTop .boardInfo li.info2 span { width:100%;}
.boardView .borderViewTop .boardInfo li.info2 > span + span:before { display:none;}
.viewBtmBtns .left,.viewBtmBtns .right {gap:2px; }
}


/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 글쓰기  //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
.boardWrite { border-top:2px solid var(--main);}
.boardWrite th, 
.boardWrite td { border-bottom:1px solid #efefef; padding:10px 15px; font-size:1.5rem; color:var(--text-dkgrey); text-align:left; position:relative}
.boardWrite th .required { position:absolute; top:12px; left:3px; color:#ff8400;}
.boardWrite th { font-weight:300; width:15%; max-width:200px; vertical-align:top; line-height:4.0rem; }
.boardWrite td { /*display:flex; width:100%; gap:5px; align-items:center;*/}
#boardSkin_s_faq_write_editor,
#boardSkin_s_default_modify_editor { width:100%;}
.writeBtmBtns { margin-top:20px; }
.writeBtmBtns:after { content:''; display:block; clear:both; width:100%; }
.writeBtmBtns .left { float:left; }
.writeBtmBtns .right { float:right; }
.writeBtmBtns .left,
.writeBtmBtns .right { display:flex; gap:5px; align-items:center; }
.boardWrite .captcha { display:flex; gap:10px; align-items:center; width:100%; }
.boardWrite .captcha span { display:flex; gap:5px; align-items:center; flex-grow:1;}
.boardWrite .captcha span input { max-width:180px;}
.boardWrite .captcha img { height:4.0rem; width:auto;}
.boardWrite .flexDiv { display:flex; gap:5px; align-items:center; }

/* ================================== 반응형 ================================== */
@media all and (max-width: 480px) {		
	.boardWrite tr, .boardWrite th, .boardWrite td { display:block; width:100%; max-width:100%; }
	.boardWrite th { background:#f9f9f9; line-height:1.0; }
	.boardWrite td { padding:10px 0;}
	.boardWrite .captcha { flex-wrap:wrap; gap:5px; }
	.boardWrite .captcha span { width:100%;}
}


/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 비밀번호입력  //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
.writePwd .title { text-align:center;}
.writePwd .title h2 { font-size:2.0rem; color:var(--text-main); font-weight:300; }
.writePwd .pwdBox { width:100%; max-width:360px; margin:30px auto;}
.writePwd .pwdBox .pwdBtns { display:flex; justify-content:center; align-items:center; gap:5px; margin-top:20px; }

/* ================================== 반응형 ================================== */
@media all and (max-width: 1024px) {		
}



/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// paging  //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
.paging {margin-top:30px; display:flex; justify-content:center; align-items:center; gap:3px; }
.paging a { width:44px; height:44px; border:1px solid #f2f2f2; color:#666; font-size:1.4rem; line-height:44px; text-align:center; border-radius:3px;}
.paging a:hover {background:#efefef; border-color:#ccc; }
.paging a.current { color:#fff; border-color:var(--main); color:var(--text-main); }
.paging button  { display:block; border-radius:3px; width:44px; height:44px; aspect-ratio:1/1 !important; border:1px solid #ccc; text-indent:-9999px; background:url(images/ico_paging.png) no-repeat; background-size:500%; cursor:pointer; }
.paging button.pg_first.disable {background-position:0 50%; cursor:default;}
.paging button.pg_prev.disable {background-position:25% 50%; cursor:default;}
.paging button.pg_next.disable {background-position:50% 50%; cursor:default;}
.paging button.pg_last.disable {background-position:75% 50%; cursor:default;}
.paging button.pg_first {background-position:0 0;}
.paging button.pg_prev {background-position:25% 0;}
.paging button.pg_next {background-position:50% 0;}
.paging button.pg_last {background-position:75% 0;}
.paging button.disable {cursor:default;}

@media all and (max-width:768px){
	.paging { margin-top:20px; gap:2px; }
	.paging a,
	.paging button {width:30px; height:30px; line-height:34px; }
}

@media all and (max-width:480px){
	.paging {flex-wrap:wrap;}
	.paging button {width:24px; height:24px; line-height:26px; }
	.paging a { font-size:1.3rem; width:auto; min-width:22px; padding:0 3px; height:24px; line-height:24px; }
}