@charset "utf-8";

#contents { width:100%} 
#board-top {padding:0}
#board-top .col-sm-3 {height:415px;color:#fff;padding:0}
#board-top .col-sm-3 h4 {padding-top:150px;text-align:center}
#board-top .col-sm-3:nth-child(1) {background:url('img/img1.jpg') center no-repeat;background-size:cover}
#board-top .col-sm-3:nth-child(2) {background:url('img/img2.jpg') center no-repeat;background-size:cover}
#board-top .col-sm-3:nth-child(3) {background:url('img/img3.jpg') center no-repeat;background-size:cover}
#board-top .col-sm-3:nth-child(4) {background:url('img/img4.jpg') center no-repeat;background-size:cover}


.board-category {list-style:none;margin:0;padding:0}
.board-category li {float:left;width:25%}
.menu500300 .board-category li {width:33.3%}
.board-category li a {display:block;line-height:43px;text-align:center;background:#fff;color:#000;position:relative;border:1px solid #ccc;position:relative;font-size:16px}
.board-category li a i {position:absolute;left:50%;bottom:-13px;display:block;color:#34afad;display:none;font-size:1.2em}
.board-category li a em {display:none}
.board-category li a.on {background:#34afad;border:1px solid #34afad;color:#fff !important}
.board-category li a.on i {display:block}
.board-category li a:hover, .board-category li a:focus {color:#e03138;text-decoration:none;}
.board-category:after {display:block;content:'';clear:both;margin-bottom:55px}

.board-list,
.board-list li {list-style:none;margin:0;padding:0;margin-bottom:30px}
.board-list li a {display:block;border:1px solid #c8c8c8;padding:0 0 20px;background:#fff;color:#000}
.board-list li a .info {padding:0 30px}
.board-list li a .header {font-size:1.2em;margin:0px;padding:30px 0 20px;border-bottom:1px solid #c8c8c8}
.board-list li a p.cgray {margin:15px 0px}
.board-list li a time {float:left}
.board-list li a .more {float:right}
.board-list li a .info:after {display:block;content:'';clear:both}
.board-list li a img {width:100%;display:block}
.board-list li .img-wrap img {height:230px}

.board-list li a:hover,
.board-list li a:focus {border-color:#e03138}
.board-list li a:hover img,
.board-list li a:focus img {
    --ms-transform: scale(1.05, 1.05); /* IE 9 */
    --webkit-transform: scale(1.05, 1.05); /* Safari */
    -transform: scale(1.05, 1.05);
}

.board-list li a img.img-tag {width:auto;position:absolute;margin-top:-50px;height:auto}
.board-list:after {display:block;content:'';clear:both}

.board-list .empty {width:100%;float:none;text-align:center}


@media (max-width:768px) {
	.board-wrap {padding:0}
	#board-top .col-sm-3 {padding:20% 0;height:auto;min-height:250px}
	#board-top .col-sm-3 h4 {padding:20% 0 0 0}
	.board-category li {width:50%}
	.board-category li a {font-size:inherit}

	.board-list li .img-wrap {float:left;width:50%;position:relative}
	.board-list li .img-wrap img {position:absolute;height:100%}
	.board-list li .img-wrap img.img-tag {height:auto;width:50%;margin:0;bottom:0}
	.board-list li .info {float:right;width:50%}
	.board-list li a {padding:0px 0;overflow:hidden;position:relative}
	.board-list li a .info {padding:10px 10px}
	.board-list li a .header {font-size:1em;margin:0px;padding:10px 0 10px;border-bottom:1px solid #c8c8c8}
	.board-list li a p.cgray {margin:10px 0px;overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 라인수 */
        -webkit-box-orient: vertical;
        word-wrap:break-word; 
    }
    .board-list li a time {float:left;font-size:.7em;letter-spacing:-1px}
	.board-list li a .more {float:right;font-size:.7em;letter-spacing:-1px}
	.board-list a:after {display:block;content:'';clear:both}

}


@media (min-width:768px) {
	.board-list li {float:left;width:30%;margin-right:5%;margin-bottom:60px}
	.board-list li:nth-child(3),
	.board-list li:nth-child(6),
	.board-list li:nth-child(9),
	.board-list li:nth-child(12),
	.board-list li:nth-child(15),
	.board-list li:nth-child(18) {margin-right:0}

	.board-list li:nth-child(4),
	.board-list li:nth-child(7),
	.board-list li:nth-child(10),
	.board-list li:nth-child(13),
	.board-list li:nth-child(16),
	.board-list li:nth-child(19) {clear:both}
}


.board-write { width: 100%; border-collapse: collapse}
.board-write th, .board-write td { border-bottom: 1px solid #d9d9d9; border-top: 1px solid #dbdbdb; padding: 8px 0; background: #fff }
.board-write th { background: #eef0f4; font-weight: normal; text-align: center }
.board-write td { padding-left: 10px }
.board-write .end th,.board-write .end td {border-bottom:2px solid #484546;border-left:0;border-right:0}
.board-write .first th, .board-write .first td {border-top:2px solid #232021}

@media (min-width:768px) {
	.board-write th {width:15%;vertical-align:middle}
	.board-write td {width:85%}
}

@media (max-width:768px) {
	.board-write {table-layout:fixed}
	.board-write th {width:30%;vertical-align:middle}
	.board-write td {width:70%;overflow:hidden}
}

.board-write #wr_3 {
}


.board-view { width: 100%; border-collapse: collapse; margin-top:50px}
.board-view th, .board-view td { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 13px 0}
.board-view tr.first th,
.board-view tr.first td {border-top:3px solid #000}
.board-view th { background: #e0e0e0; font-weight: bold; text-align: center}
.board-view td { padding-left: 10px }
.board-view td {}
.board-view .viewContentTD {padding:40px 50px}
#writeContents,
#writeContents td {color:#3e3e3e}
#commentContents td {border:0}
.attach-file {width:100%;margin-bottom:20px}
.attach-file td {border:1px solid #cdcdcd}


.comment_view { width: 100%; border-collapse: collapse }


#contents-wrap {background:#f7f7f7}
.board-wrap {margin-top:75px;padding-bottom:110px;}
.board_search {margin-bottom:20px}

@media (min-width:768px) {
	#contents .container {padding:0 35px}
	.board-wrap {}
}