@charset "UTF-8";

.boardContainer { /* padding-top: 2rem; */ }


/* ------ gridWrap ------ */

.gridWrap > ul { font-size: 0; margin-left: -1.5rem; margin-top: -1.5rem; }
.gridWrap > ul > li { font-size: 1.4rem; display: inline-block; padding-left: 1.5rem; padding-top: 1.5rem; vertical-align: middle; width: 100%; }
.gridWrap > ul > li > .inner { display: block; width: 100%; }

.gridWrap.grid_2 > ul > li { width: 50%; }
.gridWrap.grid_3 > ul > li { width: 33.333%; }
.gridWrap.grid_4 > ul > li { width: 25%; }
.gridWrap.grid_5 > ul > li { width: 20%; }
.gridWrap.grid_6 > ul > li { width: 16.666%; }
.gridWrap.grid_7 > ul > li { width: 14.2857142857%; }

@media (min-width: 500px) and (max-width: 799px){
	.gridWrap.grid_min2 > ul > li { width: 50%; }
	.gridWrap.grid_min3 > ul > li { width: 33.333%; }
	.gridWrap.grid_min4 > ul > li { width: 25%; }	
	.gridWrap.grid_min5 > ul > li { width: 20%; }	
}

@media (min-width: 800px) and (max-width: 999px){
	.gridWrap.grid_to2 > ul > li { width: 50%; }
	.gridWrap.grid_to3 > ul > li { width: 33.333%; }
	.gridWrap.grid_to4 > ul > li { width: 25%; }
	.gridWrap.grid_to5 > ul > li { width: 20%; }
}

@media (min-width: 1000px){
	.gridWrap.grid_max2 > ul > li { width: 50%; }
	.gridWrap.grid_max3 > ul > li { width: 33.333%; }
	.gridWrap.grid_max4 > ul > li { width: 25%; }
	.gridWrap.grid_max5 > ul > li { width: 20%; }
}


.boardTab { float: left; margin-top: 1.1rem; font-size: 0; }
.boardTab li { display:inline-block; padding: 0 1.5rem; position: relative;}
.boardTab li:first-child { padding-left: 0; }
.boardTab li + li:after {  content: ''; width: 1px; height: 40%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #c1c1c1; }
.boardTab li button { position: relative; color: #899195; font-size: 1.4rem; font-weight: 400; border-radius: 2rem; padding: 0.5rem 1rem; }
.boardTab li button:hover { color: #333; }
.boardTab li button.active { background-color: #028b55; color: #fff; padding: 0.5rem 2rem; }

.basicBoard { width: 100%; text-align: center; border-bottom: 1px solid #666; border-top: 2px solid #333; table-layout: fixed; }
.basicBoard th { padding: 1.2rem 1rem; border-bottom: 1px solid #aaa; font-weight: 400; }
.basicBoard td { padding: 1.2rem 1rem; font-size: 1.4rem;  }
.basicBoard td a { display: block; }
.basicBoard td a strong { font-size: 1.5rem; color: #333; font-weight: 300; }
.basicBoard td a strong em { color: #ec6f26; font-size: 1.4rem; padding-right: 0.8rem;}
.basicBoard td a strong i { color: #be1521; padding-left: 0.8rem; }
.basicBoard td a:hover { text-decoration: underline; text-decoration-color:#000;}
.basicBoard tr + tr { border-top: 1px solid #dedede; }
.boxIcon { border: 1px solid #ec6f26; color: #ec6f26; font-size: 1.3rem; line-height: 2rem; width: 5.5rem; display: inline-block; text-align: center; }
.basicBoard .boardCategory { font-weight: 400; color: var(--special-color); display: block; margin-bottom: 0.5rem; font-size: 1.5rem; }


.galleryBoard > ul > li > .inner > button { display: block; width: 100%; background-color: #fff; }
.galleryBoard .galleryImg-wrap > ul { font-size: 0; }
.galleryBoard .galleryImg-wrap > ul li { display: inline-block; }

.galleryBoard .galleryImg_1 > ul { margin-left: 0; }
.galleryBoard .galleryImg_1 > ul > li { width: 100%; }

.galleryBoard .galleryImg_2 > ul > li { display: block; width: 100%; }
.galleryBoard .galleryImg_2 > ul > li:first-child { margin-bottom: 2px; }
.galleryBoard .galleryImg_2 .imgContainer-fit { padding-bottom: calc(50% - 1px); }

.galleryBoard .galleryImg_3 > ul > li:first-child { display: block; width: 100%; margin-bottom: 2px; }
.galleryBoard .galleryImg_3 > ul > li:first-child .imgContainer-fit { padding-bottom: calc(50% - 1px); }
.galleryBoard .galleryImg_3 > ul > li:nth-child(n + 2) { width: calc(50% - 1px); }
.galleryBoard .galleryImg_3 > ul > li:last-child { margin-left: 2px; }

.galleryBoard .galleryImg-alpha > ul > li:last-child { position: relative; }
.galleryBoard .galleryImg-alpha > ul > li:last-child:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right:0; display: block; background-color: rgba(0,0,0,0.4); }
.galleryBoard .galleryImg-alpha .alphaCount { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size:4rem; z-index: 1; font-weight: 500; }

.galleryBoard .galleryText { padding: 1.5rem 1.5rem; text-align: left; }
.galleryBoard .galleryText h5, .galleryBoard .date { padding: 0; }
.galleryBoard .date { line-height: 1.2; height: inherit; }
.galleryBoard .galleryText h5 strong { font-size: 1.7rem; font-weight: 400; }
.galleryBoard .galleryText p { margin: 1rem 0 1.5rem; color: #777; font-size: 1.4rem; }
.galleryBoard .date { padding-top: 0.5rem; display: block; color: #aaa; }


.galleryBoard .galleryImg-wrap > ul > li .galleryVideo video { height: 100%; object-fit: cover; }
.galleryBoard .galleryImg-wrap > ul > li .postVideo:before {
	content: "\ea3e"; font-family: xeicon; font-size: 5rem; color: #fff; box-shadow: 0px 0px 2rem rgba(0,0,0,0.5); border: 0.3rem solid #fff;
	position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.5); line-height: 5.9rem; width: 6.5rem; height: 6.5rem; text-align: center; border-radius: 50%; text-indent: 0.5rem;
}


.galleryBoard button dl { border-top: 1px solid #dedede; padding: 1.5rem; text-align: left; }
.galleryBoard button dl dt { font-size: 1.6rem; }
.galleryBoard button dl dd { font-size: 1.3rem; color: #ccc; margin-top: 1rem; }

.galleryBoard .onlyText button { position: relative; }
/* .galleryBoard .onlyText .onlyText-date { position: absolute; bottom: 0; left: 0; }  */
.galleryBoard .onlyText h5 { padding-bottom: 0; text-align: left; padding: 0 1.5rem; }
.galleryBoard .onlyText-content { position: relative; padding-bottom: 100%; }
.galleryBoard .onlyText-content > .inner { padding: 1.5rem; border-top: 1px solid #ededed; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.galleryBoard .onlyText-content > .inner > div { font-size: 1.4rem; text-align: left; }


.gallerySlider-wrap { margin-top: 2rem;  font-size: 0; }
.gallerySlider { border-radius: 1rem; overflow: hidden; background-color: #f4f7f9; }
.gallerySlier-item { position: relative; width: 500px; }
.gallerySlier-item a.galleryVideo { display: block; padding-bottom: 100%; }
.gallerySlier-item a.galleryVideo:before {
	content: "\ea3e"; font-family: xeicon; font-size: 4rem; color: #fff; box-shadow: 0px 0px 2rem rgba(0,0,0,0.5); border: 0.3rem solid #fff;
	position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.5); line-height: 5.9rem; width: 6.5rem; height: 6.5rem; text-align: center; border-radius: 50%; text-indent: 0.5rem;
} 
.gallerySlier-item video { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }

.gallerySlider-wrap .gallerySlier-item a { opacity: 0.3; transition: opacity 0.5s linear; }
.gallerySlider-wrap .slick-center .gallerySlier-item a { opacity: 1; }
.gallerySlider-wrap .sliderControl-wrap { text-align: center; padding: 1rem 0; }

.slick-lightbox-slick-item-inner video { width: 100%; }
.slick-lightbox-inner .slick-prev,
.slick-lightbox-inner .slick-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 100; font-size: 0; width: 4rem; height: 4rem; line-height: 3rem; background-color: rgba(0,0,0,0.5); border-radius: 2rem; }
.slick-lightbox-inner .slick-prev { left: 1rem !important; }
.slick-lightbox-inner .slick-next { right: 1rem !important; }
.slick-lightbox-inner .slick-prev:before { content: "\e93d"; }
.slick-lightbox-inner .slick-next:before { content: "\e940"; }
.slick-lightbox-inner .slick-prev:before, .slick-lightbox-inner .slick-next:before {
    font-family: 'xeicon'; font-size: 2rem; line-height: 4rem; opacity: .75; color: white; 
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 600;
}




/** video **/

.videoList-wrap > ul { margin: -2rem 0 0 -2rem; font-size: 0; }
.videoList-wrap > ul > li { padding: 2rem 0 0 2rem; }
.videoList-wrap button { border: 1px solid #dedede; border-radius: 0.3rem; overflow: hidden; display: block; width: 100%; background-color: #fff; }
.videoList-wrap .imgContainer-fit { padding-bottom: 56.25%; }
.videoList-wrap .galleryText { border-top: 1px solid #dedede; padding: 1.5rem; }
.videoList-wrap .galleryText h5 { font-size: 1.6rem; }
.videoList-wrap .galleryText .date { display: block; font-size: 1.3rem; color: #ccc; margin-top: 1rem; }

@media (min-width: 720px){ 
	.videoList-wrap > ul > li { display: inline-block; vertical-align: middle; width: 50%; }
}

@media (min-width: 1150px){ 
	.videoList-wrap > ul > li { width: 33.33333%; }
}

/** video end **/





.basicBorad-controls > ul { border-bottom: 1px solid #333; }
.basicBoard-view h3 { font-size: 3rem; font-weight: 500; padding: 1.5rem 0.2rem; }
.basicBoard-view .basicBoard-info { /* background-color: #f1f2f8; */ border-bottom: 1px solid #dadada; padding: 0 0.2rem 2rem; }
.basicBoard-view .basicBoard-info ul { font-size: 0; }
.basicBoard-view .basicBoard-info ul li { display: inline-block; font-size: 1.3rem; position: relative; padding-right: 1rem; color: #888; }
.basicBoard-view .basicBoard-info ul li + li { padding: 0 1rem; }
.basicBoard-view .basicBoard-info ul li + li:after { content: ''; width: 1px; height: 60%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #c1c1c1; }
.basicBoard-view .basicBoard-content { padding: 2.5rem 0.2rem; font-size: 1.4rem; line-height: 170%; }
.basicBoard-view .basicBoard-content img{max-width: 100%;}
.basicBoard-view .basicBoard-content .fullImg { display: inline-block; }

.basicBoard-view .basicBorad-controls li { padding: 1.5rem 0.2rem; border-top: 1px solid #dadada; }
.basicBoard-view .basicBorad-controls li:last-child { border-bottom: 1px solid #999; }
.basicBoard-view .basicBorad-controls li span { font-size: 1.4rem; color: #367bc0; padding-right: 0.5rem; }
.basicBoard-view .basicBorad-controls li a { font-size: 1.4rem; color: #333; }
.basicBoard-view .basicBorad-controls li a:hover { text-decoration: underline; }

.waringContainer .inner { border: 1px solid #e0e0e0; background-color: #fafafa; padding: 2.3rem; }
.waringContainer h3 { font-size: 1.7rem; padding: 0 0 1rem; font-weight: 500; }
.waringContainer ul li { font-size: 1.4rem; position: relative; padding-left: 1.7rem; }
.waringContainer ul li + li { margin-top: 0.5rem; }
.waringContainer ul li i { position: absolute; left: 0; top: 0.5em; font-size: 1.2rem; }

.boardFile { padding-bottom: 2.5rem; }
.boardFile h4 { margin-bottom: 0.5rem; padding: 0 0.3rem; font-weight: 400; }
.boardFile h4 i { margin-right: 0.5rem;}
.boardFile .fileBtn { overflow: hidden; }
.boardFile .fileBtn li { padding-left: 0.5rem; width: 33.333%; float: left; }
.boardFile .fileBtn a { border-radius: 0.3rem; background: #f9f9f9; border: 1px solid #ddd; padding: 0.7rem 1.2rem; margin: 0.7rem 0px 0.5rem; font-size: 1.3rem; color: #555; }
.boardFile .fileBtn a i { color: #dd792b; position: relative; top: 0.2rem; transform: rotate(-45deg); margin-right: 0.5rem; }

.viewContainer .viewBtn-warp { margin: 2.5rem auto; text-align: center; }
.viewContainer .viewBtn { max-width: 20rem; display: inline-block; vertical-align: middle; border-radius: 0.3rem; padding: 1.2rem 0.2rem; }


.insertContainer { padding: 0 0 6rem }
.insertBoard { width: 100%; border-bottom: 1px solid #333; }
.insertBoard th { border-top: 2px solid #333; }
.insertBoard td { border-top: 1px solid #dcdcdc; padding: 1rem; }
.insertBoard td input, .insertBoard td textarea { font-size: 1.4rem; }
.insertBoard td textarea { min-height: 30rem; }

.insertContainer .resultBtn { margin: 2.5rem auto 0; max-width: 40rem; }

.pageArea { padding: 2rem 1rem 1rem; }
.pageBtn { font-size: 0; text-align: center; }
.pageBtn li { display: inline-block; vertical-align: middle; padding: 0 0.5rem; font-size: 1.3rem; }
.pageBtn li span { padding: 0 1rem; font-size: 1.6rem; }
.pageBtn li span.nowPage { color: #367bc0; font-weight: 500; }
.pageBtn li i { position: relative; top: -0.1rem; }
.pageBtn li:first-child { margin-right: 1.5rem; font-size: 0; }
.pageBtn li:last-child { margin-left: 1.5rem; font-size: 0; }
.pageBtn li:first-child button, .pageBtn li:last-child button { font-size: 0; }
.pageBtn li button { line-height: 3rem; width: 3rem; height: 3rem; display: block; font-size: 1.5rem; } 
.pageBtn li button i { font-size: 1.8rem; color: #999; vertical-align: middle; }
.pageBtn li button i:hover { color: #333; }
.pageBtn li.active button { background-color: #222; color: #fff; font-weight: 400; border-radius: 50%; }



.comment-wrap { margin-bottom: 2rem; }
.comment-wrap h4 { font-size: 1.6rem; font-weight: 400; border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 2rem; }
.comment-wrap h4 i { font-size: 1.9rem; position: relative; top: 2px; }
.comment-wrap h4 em { font-size: 1.7rem; padding: 0 3px 0 5px; color: #ee7300; }


.commentInsert-wrap { background-color: #f4f7f9; border: 1px solid #e7ecef; padding: 2rem; border-radius: 0.4rem; }
.subComment-insert .commentInsert-wrap { border: 0; padding: 0; }
.commentInsert { background-color: #fff; border-radius: 0.4rem; overflow: hidden; border: 1px solid #dae0e3; }
.commentInsert .commentInfo { padding: 1rem 1.5rem 0; }
.commentInsert .nonUser { padding: 1rem 1.5rem; border-bottom: 1px solid #e7ecef;  }
.commentInsert .nonUser input { padding: 0.8rem 1rem; border: 0; font-size: 1.4rem; max-width: 48%; color: #fff; border-radius: 0.4rem; border: 1px solid #e7ecef; }
.commentInsert .nonUser input + input { margin-left: 0.5rem; padding-left: 1.5rem; }

.commentInsert textarea { width: 100%; font-size: 1.4rem; padding: 1rem 1.5rem; background-color: #fff; line-height: 130%; }
.commentInsert-btns { background-color: #fff; border-top: 1px solid #e7ecef; text-align: right; position: relative;}
.commentInsert-btns button, .commentInsert-btns .commentImg-add, .commentInsert-btns .commentCounter { display: inline-block; vertical-align: middle; }
.commentInsert-btns button { background-color: #367bc0; color: #fff; font-size: 1.4rem; font-weight: 400; line-height: 40px; width: 110px; }
.commentInsert-btns .commentImg-add input[type="file"] { display: none; }
.commentInsert-btns .commentImg-add label { font-size: 2.2rem; margin-right: 1rem; font-weight: 100; cursor: pointer; }
.commentInsert-btns .commentImg-add label i { color: #666 }
.commentInsert-btns .commentImg-add label:hover i { color: #208bcc;  }
.commentInsert-btns .commentImg-add label span { font-size: 0; text-indent: -9999px; }
.commentInsert-btns .commentCounter { line-height: 39px; font-size: 1.3rem; padding: 0 15px; position: absolute; left: 0rem; top: 0rem; }
.commentInsert-btns .commentCounter em { color: #367bc0; font-size: 1.3rem; } 

.commentInsert-wrap .commentImg-wrap { position: relative; }
.commentInsert-wrap .commentImg-wrap .resetBtn { 
	position: absolute; right: 0; top: 1.5rem; color: #fff; background-color: #3a3f44; 
	font-size: 1.3rem; border-radius: 4rem; line-height: 2.3rem; width: 2.3rem; height: 2.3rem;
}
.commentInsert-wrap .commentImg-wrap .resetBtn:hover { background-color: #585f66; }
.commentInsert-wrap .commentImg-wrap.insertImg { padding: 1.5rem 0 0; position: relative; }
.commentInsert-wrap .commentImg-wrap.commentImg { padding: 0.5rem 0 0; }
.commentInsert-wrap .commentImg-wrap div, .comment-wrap .commentImg-wrap button, .comment-wrap .commentImg-wrap a { background-color: #ededed; border-radius: 1.5rem; overflow: hidden; max-width: 15rem; display: inline-block; }
.commentInsert-wrap .commentImg-wrap img, .commentImg-wrap img { max-width: 100%; max-height: 15rem; }


.comment-wrap > .inner { margin-top: 1rem; }
.comment-wrap .commentInfo .commentThumb { display: inline-block; width: 3rem; border-radius: 50%; overflow: hidden; vertical-align: middle; margin-right: 0.5rem; }
.comment-wrap .commentInfo .commentBasic { display: inline-block; vertical-align: middle; }
.comment-wrap .commentInfo .commentBasic * { display: block; line-height: 130%; }
.comment-wrap .commentInfo .commentBasic em { font-size: 1.2rem; font-weight: 500; }
.comment-wrap .commentInfo .commentBasic span { color: #7e8995; font-size: 1.1rem; }

.comment-wrap > .inner > ul { border-bottom: 1px solid #e7ecef; }
.comment-wrap .inner > ul > li { position: relative; }
.comment-wrap .inner > ul > li + li { border-top: 1px solid #e7ecef; }
.comment-wrap ul li { padding: 1.5rem 0; }
.comment-wrap ul li .comment .commentContent { font-size: 1.4rem; padding: 1rem 0; }
.comment-wrap ul li .comment .commentContent p { font-size: 1.4rem; line-height: 130%; }

.commentEdit-wrap { vertical-align: top; width: 3rem; position: absolute; right: 0rem; top: 1.6rem; }
.commentEdit-wrap .commentEdit-btn { display: inline-block; color: #b0b3b8; border-radius: 4rem; width: 3rem; line-height: 3rem; height: 3rem; font-size: 1.8rem; }
.commentEdit-wrap .commentEdit-btn:hover { color: #3a3f44; }
.commentEdit-wrap .commentEdit { 
	display: none; position: absolute; top: calc(100% + 0.5rem); right: -1rem; z-index: 1; padding: 0.8rem; 
	border-radius: 0.5rem; background-color: #24272b; box-shadow: 0 12px 28px 0 rgba(0,0,0,0.2),0 2px 4px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.2);
}
.commentEdit-wrap .commentEdit:before { 
	content: ''; display: block; width: 1rem; height: 1rem; position: absolute; top: 0; right: 1.5rem; background-color: #24272b; 
    transform: translate(-50%, -50%) rotate(-45deg); box-shadow: inset -1px 1px 1px rgba(255,255,255,0.2); 
}
@media (min-width: 1200px) { 
	.commentEdit-wrap .commentEdit { right: 50%; transform: translateX(50%); }
	.commentEdit-wrap .commentEdit:before { right: inherit; left: 50%; background-color: #24272b; transform: translate(-50%, -50%) rotate(-45deg); }
}
.commentEdit-wrap .commentEdit ul li { padding: 0; }
.commentEdit-wrap .commentEdit ul li button { color: #fff; font-size: 1.3rem; font-weight: 300; padding: 0.8rem 1rem; width: 10rem; text-align: left; border-radius: 0.3rem; }
.commentEdit-wrap .commentEdit ul li button:hover { background-color: #3a3f44; }

.comment-wrap ul li .commentModify .cancelModify { font-size: 1.2rem; padding: 0.3rem 0 0.2rem; color: #7e8995; font-weight: 300; }
.comment-wrap ul li .commentModify .cancelModify em { color: #4599ff; }
.comment-wrap ul li .commentModify .cancelModify:hover { text-decoration: underline; }


.commentAdd-btn * { display: inline-block; color: #7e8995; font-size: 1.3rem; vertical-align: middle; }

.commentAdd-btn em { font-size: 1.4rem; font-weight: 700; padding-right: 0.5rem;}
.commentAdd-btn i { font-size: 1.7rem; transform: translateY(2px); color: #367bc0; padding-left: 0.5rem; }
.commentAdd-btn:hover span { text-decoration: underline; }

.subComment-wrap { margin-top: 1.5rem; padding: 2rem 3rem; background-color: #f4f7f9; border-top: 1px solid #e7ecef; display: none;; }
.comment-wrap .subComment-wrap ul li:first-child .comment { padding-top: 0; }

.commentMore { padding-top: 1rem; }
.commentMore button { font-size: 1.4rem; font-weight: 400; }
.commentMore button em { font-size: 1.6rem; font-weight: 700; }
.commentMore button i { font-size: 1.7rem; transform: translateY(2px); color: #367bc0; }
.commentMore button:hover { text-decoration: underline; }


.writeContainer .dashedBottom { border-bottom: 1px dashed #ccc; padding-bottom: 1.2rem; margin-bottom: 0.8rem;  }
.writeContainer h4 { margin-bottom: 0.5rem; padding: 0; font-weight: 400; font-size: 1.6rem; }
.writeContainer h4 i { margin-right: 0.5rem; transform: translateY(1px); }
.writeTitle-wrap input { width: 100%; font-size: 1.5rem; border-radius: 0.5rem; border: 1px solid #ededed; padding: 1.2rem 1.5rem; }
.writeInsert-wrap { border-radius: 0.5rem; border: 1px solid #ededed; overflow: hidden; }
.writeInsert-wrap textarea { width: 100%; font-size: 1.5rem; padding: 1.2rem 1.5rem; border: 0; }
.writeContainer .boardFile .fileBtn a { padding: 0.7rem 4rem 0.7rem 1.2rem; position: relative; }
.writeContainer .boardFile .fileBtn a .removeFile { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.writeContainer .boardFile .fileBtn a .removeFile i { transform: rotate(0deg); font-size: 2rem; top: 0.1rem; margin: 0; width: 2.5rem; line-height: 2.5rem; height: 2.5rem; display: block; }
.writeContainer .boardFile .fileBtn a .removeFile:hover { background-color: #dd792b; }
.writeContainer .boardFile .fileBtn a .removeFile:hover i { color: #fff; }
.writeBtn { margin-bottom: 2rem; }



.faqCategory { text-align: center; background: #f7f7f9; padding: 30px 15px; margin: 25px 0; overflow-x: auto; white-space: nowrap; }
.faqCategory ul { font-size: 0; text-align: center; }
.faqCategory li { display: inline-block; vertical-align: middle; }
.faqCategory li button { padding: 0 20px; } 
.faqCategory li.sa_bar { width: 1px; height: 10px; background-color: #aaa; padding: 0; }
.faqCategory .active button { color: #f5486f; }


.faqArea { border-top: 1px solid #333; border-bottom: 1px solid #333; }
.faqArea .faqQ { padding: 18px 20px; margin: 0; background-color: #fff; border: 0; }
.faqArea h3.faqQ { border-top: 1px solid #ccc; }
.faqArea h3.ui-state-active { color: #333; }
.faqArea .faqQ img, .faqArea .faqA img { height: 30px; margin-right: 15px; }
.faqArea .faqQ em { font-weight: 600; margin-right: 10px; }
.faqArea .faqA { display: none; position:relative; padding: 30px 20px 30px 50px; background-color: #f8f8fb; font-size: 14px; border: 0; border-top: 1px solid #e8eaf1; }
.faqArea .faqA img { position: absolute; top:30px; left: 20px; }
.faqArea .faqQ .ui-icon { display: none; }


@media (max-width: 800px) {
	.boardContainer { padding-top: 0rem; }
	.insertContainer { padding: 2.5rem 0 6rem }
	
	.boardSearch { padding: 2rem 0; }
	.searchContainer .customSelect, .searchContainer .pageSearch { width: 100%; display: block;  }
	.searchContainer .customSelect { margin: 0 0 1rem; }
	
	.boardTab { float: none; text-align: center; margin-bottom: 1rem; }
	.boardSearch-right .searchContainer { float: none; }
	.boardSearch-right .searchContainer .pageSearch { width: 100%; }
	.boardTab li button { padding: 0; }
	.boardTab li button.active { color: #028b55; padding: 0.5rem 0; background-color: unset; }
	
	.basicBoard { border-top: 1px solid #333; }
	.basicBoard thead, .basicBoard colgroup { display: none; }
	.basicBoard { display: block; text-align: left; }
	.basicBoard tbody, .basicBoard tbody tr { display: block; }
	.basicBoard td.alignLeft { display: block; text-align: left; padding: 0; }
	.basicBoard td.alignLeft a { position: relative; }
	.basicBoard td.alignLeft a strong span { position: relative; top: 1px; }
	.basicBoard td.alignLeft a { display: block; padding: 1.3rem 0.5rem; }
	.basicBoard td.alignLeft a:hover { text-decoration: none; }
	.basicBoard td.alignLeft a .boardInfo { padding: 0.3rem 0 0; display: block; }
	.basicBoard td.alignLeft a .boardInfo em + em { padding-left: 0.5rem; } 
	.basicBoard td.alignLeft a .boardInfo * { font-size: 1.2rem; color: #999; font-weight: 300;  }
	
	
	.basicBoard-view h3 { font-size: 2rem; }
	
	.pageArea { padding: 3rem 0rem 2rem; }
	
	.viewContainer{ padding: 1rem 0rem 5rem; }
	.boardFile .fileBtn li { padding: 0; float: none; width: 100%; }
	
	.insertBoard, .insertBoard * { display: block; width: 100%; }
	.insertBoard caption, .insertBoard colgroup { display: none; }
	.insertBoard th { text-align: left; padding: 0.8rem 1.5rem 0.5rem; }
	.insertBoard td { padding: 1rem 0; }
	.mobileNone { display: none !important; }
}

@media (min-width: 800px) {	
	.pcNone { display: none !important; }
	.boardFile .fileBtn { overflow: hidden; margin-left: -0.5rem; }
	.writeBtn { width: 12rem; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); margin-bottom: 0; }
	.writeBtn a { padding: 0; line-height: 4rem; }
}


@media (max-width: 600px) {
	.gridBoard .gridWrap.grid_3 > ul { margin-left: -1rem; }
	.gridBoard .gridWrap.grid_3 > ul > li { padding-left: 1rem; }
	.gridBoard .gridWrap.grid_3 > ul > li:nth-child( n + 3) { padding-top: 1rem; }
}

@media (max-width: 500px) {
	.gridBoard .gridWrap.grid_3 > ul { margin-left: 0rem; }
	.gridBoard .gridWrap.grid_3 > ul > li { padding-left: 0rem; width: 100%; }
	.gridBoard .gridWrap.grid_3 > ul > li:nth-child( n + 2) { padding-top: 1rem; }
}




/** video **/

.videoList-wrap > ul { margin: -2rem 0 0 -2rem; font-size: 0; }
.videoList-wrap > ul > li { padding: 2rem 0 0 2rem; }
.videoList-wrap button { border: 1px solid #dedede; border-radius: 0.3rem; overflow: hidden; display: block; width: 100%; }
.videoList-wrap .imgContainer-fit { padding-bottom: 56.25%; }
.videoList-wrap button dl { border-top: 1px solid #dedede; padding: 1.5rem; }
.videoList-wrap button dl dt { font-size: 1.6rem; }
.videoList-wrap button dl dd { font-size: 1.3rem; color: #ccc; margin-top: 1rem; }

@media (min-width: 720px){ 
	.videoList-wrap > ul > li { display: inline-block; vertical-align: middle; width: 50%; }
}

@media (min-width: 1150px){ 
	.videoList-wrap > ul > li { width: 33.33333%; }
}

.viewVideo-wrap { width: 100%; max-width: 900px; margin: 20px auto 30px; border-radius: 8px; background-color: #f0f0f0; padding: 10px; box-sizing: border-box; box-shadow: 0px 8px 15px #ccc; }
.viewVideo { position: relative; width: 100%; height: auto; padding-top: 56.25%; }
.viewVideo iframe,
.viewVideo object,
.viewVideo embed { z-index: 1; top: 0; left: 0; position: absolute; width: 100%; height: 100%; }	
.viewVideo .video-js .vjs-big-play-button .vjs-icon-placeholder:before { top: 50% !important; transform: translateY(-40%); }	

/** video end **/