@charset "UTF-8";

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

.boardSearch { text-align: center; padding: 4rem 0; }

.searchContainer { text-align: center; font-size: 0; }
.searchContainer .customSelect, .searchContainer .pageSearch  { display: inline-block; vertical-align: middle; }
.searchContainer .customSelect { margin-right: 1rem; width: 17rem; text-align: left; }
.searchContainer .customSelect select { font-size: 1.4rem; }
.searchContainer .customSelect label { font-size: 1.4rem; }

.pageSearch { font-size: 0; }

.searchContainer .pageSearch { padding-right: 9rem; position: relative; width: 50rem; max-width: 100%; }
.searchContainer .pageSearch input { border: 1px solid #dcdcdc; font-size: 1.4rem; width: 100%; } 
.searchContainer .pageSearch-btn { position: absolute; right: 0; top: 0; width: 9rem; background-color: rgba(81,175,184,1); color: #fff; font-size: 1.4rem; padding: 1rem 0px; border: 1px solid rgba(71,165,174,1); font-weight: 400; }

.boardSearch-right { margin-bottom: 1.5rem;  }
.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; }

.boardSearch-right .searchContainer { float: right; }
.boardSearch-right .searchContainer .pageSearch { padding-right: 4.3rem; width: 32rem; }
.boardSearch-right .searchContainer .pageSearch .pageSearch-btn { width: 4.3rem; }
.boardSearch-right:after, .boardTab ul:after { content: ''; display: block; clear: both; }

.basicBoard { width: 100%; text-align: center; border-bottom: 1px solid #666; border-top: 2px solid #333; }
.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 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; }


.gridBoard ul > li > .inner .imgContainer-fit { padding-bottom:56.25% }
.gridBoard button .playIcon { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); z-index: 5; width: 28%; }
.gridBoard .gridBoard-text { position: relative; text-align: left; padding: 1.5rem 1.5rem; }
.gridBoard h5 { padding-bottom: 0.5rem ;}
.gridBoard h5 strong { font-size: 1.6rem; font-weight: 500; } 
.gridBoard .info { display: block; font-size: 1.4rem; color: #365dcf; opacity: 0.6; font-weight: 400; }
.gridBoard .info.category_1 { color: #22ac38; }
.gridBoard .info.category_2 { color: #365dcf; }
.gridBoard .info.category_3 { color: #be1521; }
.gridBoard .info.category_4 { color: #888; }
.gridBoard > .gridWrap > ul > li > .inner {
	display: block; width: 100%; position: relative;
	border: 1px solid #e3e5e4; border-radius: 0.3rem; overflow: hidden; 
} 


.clickBoard tbody tr:hover td { background-color: #f8f8f8; cursor: pointer; }

.viewContainer { padding: 5rem 5rem 5rem;  }
.basicBoard-view { 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 span { font-size: 1.4rem; color: rgba(81,175,184,1); 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; margin-left: -0.5rem; }
.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 .listBtn { max-width: 20rem; margin: 2.5rem auto 0; }


.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: 5rem 1rem 0; }
.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: rgba(81,175,184,1); 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: rgba(81,175,184,1); color: #fff; font-weight: 400; border-radius: 50%; }


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

.commentInsert { background-color: #fbfbfb; padding: 20px; margin: 10px 0; border: 1px solid #e5e5e5; }
.commentInsert textarea { width: 100%; font-size: 1.4rem; padding: 10px 15px 10px; background-color: #fff; border: 1px solid #ccc; border-bottom: 0; }

.commentInsertBtn { background-color: #fff; border: 1px solid #ccc; border-top-color: #f0f0f1; text-align: right; font-size: 0; }
.commentCounter, .commentInsertBtn button { display: inline-block; vertical-align: middle }
.commentInsertBtn button { background-color: rgba(81,175,184,1); color: #fff; font-size: 1.4rem; font-weight: 400; line-height: 40px; width: 110px;}
.commentCounter { line-height: 39px; font-size: 1.3rem; padding: 0 15px;}
.commentCounter em { color: rgba(81,175,184,1); font-size: 1.3rem; }

.commentList ul li { padding: 17px 4px; position: relative; min-height: 90px; }
.commentList ul li + li { border-top: 1px solid #eee; }
.commentUser { margin-bottom: 10px; }
.commentUser em { font-size: 1.4rem; }
.commentUser span { color: #888; font-size: 1.3rem; padding-left: 10px;}
.commentUser span i { font-size: 1.3rem; }
.commnetList-btn { float: right; color: #888; }
.commnetList-btn button { font-size: 1.3rem; padding: 0 3px; font-weight: 300; color: #888; }
.commnetList-btn i { color: #bababa; font-size: 1.2rem; position: relative; top: 0px; padding-right: 1px; }
.commnetText { font-size: 1.4rem; }

.commentList ul li.commentList-photo { padding-left: 88px;}
.commentList ul li.commentList-photo .mentorImg { position: absolute; width: 70px; height: 70px; top: 15px; left: 4px; padding: 0; border-radius: 40px; overflow: hidden; }


@media (max-width: 800px) {
	.boardContainer { padding-top: 0rem; }
	.insertContainer { padding: 2.5rem 0 6rem }
	
	.boardSearch { padding: 2rem 0; }
	.searchContainer .customSelect, .searchContainer .pageSearch { margin: 0 0 1rem; width: 100%; display: block;  }
	
	.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; }
}


@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; }
}