@charset "utf-8";
/* CSS Document */


.boardTop {padding:0 2%;}
.boardList {position:relative; padding:0 2%;}
.boardList ul {overflow:hidden; margin:-1% -1% -0.8%;}
.boardList li {overflow:hidden; float:left; width:25%; padding:1% 1% 0.8%;}
.boardList li:nth-child(4n+1) {clear:both;}
.boardList .img_wrap {overflow:hidden; position:relative; padding-bottom:100%;}
.boardList .img_wrap img {position:absolute; top:0; left:0; width:100%; height:100%;}
.boardList li > div {position:relative;}
.boardList li .txt {display:block; padding-top:15px; font-size:24px; color:#333333; font-weight:400; text-align:center;}
.boardList li .txt small {display:block; font-size:16px; color:#888888;}
.boardList li .ovr {display:block; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.8); opacity:0; transition:all 0.4s ease; -webkit-transition:all 0.4s ease;}
.boardList li .ovr .ovr_txt {position:absolute; top:50%; left:0; width:100%; height:220px; margin-top:-110px;}
.boardList li .ovr em {position:relative; display:inline-block; padding-top:56px; font-size:40px; color:#ffffff; font-weight:400; transition:all 0.4s ease; -webkit-transition:all 0.4s ease;}
.boardList li .ovr em:before {position:absolute; top:30px; left:50%; width:1px; height:23px; background:#ed1c24; content:''; transition:all 0.4s ease; -webkit-transition:all 0.4s ease;}
.boardList li .ovr p {margin-top:50px; padding-top:5px;  font-family: "Montserrat", sans-serif; font-size:14px; color:#cccccc; font-weight:500; letter-spacing:0.02em; transition:all 0.4s ease; -webkit-transition:all .4s ease;}
.boardList li .ovr .view {display:inline-block; width:64px; height:64px; margin-top:40px; border-radius:50%; font-family: "Montserrat", sans-serif; font-size:14px; color:#ed1c24; font-weight:700; line-height:58px; border-radius:50%; -webkit-border-radius:50%; border:3px solid #ed1c24; transition:all 0.8s ease; -webkit-transition:all 0.8s ease;}
.pc .boardList li:hover .ovr {opacity:1; }
.pc .boardList li:hover .ovr em {padding-top:36px;}
.pc .boardList li:hover .ovr em:before {top:0;}
.pc .boardList li:hover .ovr p {margin-top:0;}
.pc .boardList li .ovr .view {margin-top:32px;}
.boardList .btn_more.top {position:absolute; top:10px; right:40px;}


.mbtn_area {margin-top:23px; text-align:center; border-top:1px solid #dedede; border-bottom:1px solid #dedede;}
.mbtn_area .more_view {display:block; line-height:58px; font-family: "Montserrat", sans-serif; letter-spacing:0; font-size:13px; color:#1a1c1f; font-weight:700; transition:all 0.4s ease; -webkit-transition:all .4s ease;}
.mbtn_area .more_view span {padding-right:30px; background:url('/images/common/ico_plus.png') no-repeat right center; }
.pc .mbtn_area:hover .more_view {color:#ed1c24;}




@media (max-width: 1400px) {	
	.boardList li {width:33.33%;}
	.boardList li:nth-child(4n+1) {clear:none;}
	.boardList li:nth-child(3n+1) {clear:both;}
}
@media (max-width: 1000px) {
	.boardList li .ovr {display:none;}
	.boardList {padding:0 16px;}
	.boardList ul {margin:-8px -8px;}
	.boardList li {width:50%; padding:8px 8px 10px;}
	.boardList li:nth-child(3n+1) {clear:none;}
	.boardList li:nth-child(4n+1) {clear:none;}
	.boardList li:nth-child(2n+1) {clear:both;}
}

@media (max-width: 767.98px) {
	.boardTop {margin-bottom:5px; padding:0 16px;}

	.boardList .btn_more.top {top:5px; right:15px;}
	.boardList li .txt {padding-top:7px;}
	.boardList li .txt {font-size:16px;}
	.boardList li .txt small {font-size:12px;}
	

	.mbtn_area {margin-top:10px;}
	.mbtn_area .more_view {font-size:13px; line-height:40px;}
	.mbtn_area .more_view span {padding-right:15px; background-size:8px auto;}
}