@charset "utf-8";

.board155 {width: 100%;height:100%;}
.board155 ul.board_wrap {display:flex; position:relative;width:100%;height:100%;padding-right: 45px;box-sizing: border-box;}
.board155 ul.board_wrap > li {display:inline-block;width:auto;max-width:calc(100% / 3); box-sizing:border-box;}
.board155 ul.board_wrap > li h3 {display:inline-block;width:100%;float: left;}
.board155 ul.board_wrap > li .board_name a {position:relative; float:left; padding: 15px 20px 15px 5px; width:100%;text-overflow: ellipsis; white-space: nowrap;overflow: hidden; font-size:20px;line-height:22px;box-sizing:border-box;letter-spacing:-1px;font-weight: 300;color: #333;}
.board155 ul.board_wrap > li .board_name a:after {content: ""; display: block; position: absolute; top: 22px; right: 0; width: 0.8rem; border-top: 0.31rem dotted #d5d5d5; transform: rotate(90deg);}
.board155 ul.board_wrap > li:last-child .board_name a:after {display: none;}
.board155 ul.board_wrap > li.active .board_name a {color:#293d74; font-weight: 600;}

.board155 ul.board_wrap li div ul {display:none;position:absolute;height: 250px;border-radius: 35px;background: #f5f5f5;}
.board155 ul.board_wrap > li.active div ul {display:block;top: 60px;left:0;width:100%;padding:30px;box-sizing:border-box;}

.board155 ul.board_wrap ul li {position:relative;float:left;width:50%;}
.board155 ul.board_wrap ul li:first-child {display: flex;height: 255px;padding: 0 30px;margin-bottom:0;box-shadow: 3px 3px 3px #bbb;border: 1px solid #eee;box-sizing: border-box;border-radius: 35px 35px 0 35px;align-items: center;background: #fff;}
.board155 ul.board_wrap ul li:first-child a p.tit {font-weight: 600;}
.board155 ul.board_wrap ul li:first-child a p.tit:hover {color: #293d74;}
.board155 ul.board_wrap ul li:first-child a .date {margin-top:20px;}

.board155 ul.board_wrap ul li + li:nth-child(n+2) {position:relative;}
.board155 ul.board_wrap ul li + li:nth-child(n+2):after {content:'';display:block;position:absolute;top: 14px;left: 28px;width:5px;height:10px;background: #333;border-radius: 15px;}
.board155 ul.board_wrap ul li + li:nth-child(n+3) {margin-top:8px;}

.board155 ul.board_wrap ul li:nth-child(n+2) {padding-left: 30px; box-sizing: border-box;}
.board155 ul.board_wrap ul li:nth-child(n+2) a p.tit {width: calc(100% - 105px);padding: 10px 0 10px 10px;font-size: 16px;}
.board155 ul.board_wrap ul li:nth-child(n+2) a {display: flex;justify-content:space-between;border-bottom: 1px dashed #bbb;align-items: center;}

.board155 ul.board_wrap ul li a {position:relative; float:left; width:100%;}
.board155 ul.board_wrap ul li a p.tit {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size: 19px;letter-spacing:-1px;box-sizing:border-box;}
.board155 ul.board_wrap ul li a p.tit:hover {font-weight:600;}
.board155 ul.board_wrap ul li a .date {font-size: 15px;color: #666;}
.board155 ul.board_wrap ul li a .date:before {content:'\f017'; display:inline-block; font-family: FontAwesome; margin-right:5px;}
.board155 ul.board_wrap ul li a .co {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;float:left;box-sizing:border-box;font-size: 15px;font-weight: 300;color: #333;}

.board155 ul.board_wrap ul li:first-child a p.tit {height: 2.8em;line-height: 1.4em;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;white-space: normal;padding-left:0;margin-top:0;}
.board155 ul.board_wrap ul li:first-child a .co {float: none;overflow:hidden;margin-top: 20px;height: 4.2em;line-height: 1.4em;-webkit-line-clamp: 3;-webkit-box-orient:vertical;display:-webkit-box;white-space:normal;}
.board155 ul.board_wrap ul li:first-child a .co:hover {text-decoration: underline;}

/* 더보기 버튼 */
.board155 ul.board_wrap > li .btnBox {display:none;}
.board155 ul.board_wrap > li.active .btnBox {display: inline; position: absolute; top: 0px; right: 0;}
.board155 ul.board_wrap > li.active .btnBox a {display: inline-block;font-family: arial;width: 45px;height: 45px;line-height: 45px;background: #0b1966;font-size: 30px;color: #fff;text-align: center;border-radius: 50%;transition: ease 0.2s;cursor: pointer;}
.board155 ul.board_wrap > li.active .btnBox a:hover {opacity:0.7; transform: rotate(360deg); transition:ease 0.2s;}

/* no_data */
.board155 ul.board_wrap li div ul li.no_data p.tit {padding-left: 10px; font-size: 16px; color: #555; letter-spacing: -1px;}
.board155 ul.board_wrap ul li.no_data {width:100%; height:100px; padding-left:0;}
.board155 ul.board_wrap ul li + li.no_data:after {left:0; top:3px;}

/* layout setting */
.layout_height_H .board155, .layout_01 .board155 {height: 350px;}
.layout_height_M .board155 {height:250px;}

.layout_height_M .board155 ul.board_wrap > li.active div ul li:nth-child(n+4) {display:none;}
.layout_height_M .board155 ul.board_wrap ul li:first-child a p.tit {display: block; white-space: nowrap; -webkit-line-clamp: 1; height: 1.4em;}
.layout_height_M .board155 ul.board_wrap ul li:first-child {height: 155px!important;padding:20px;}
.layout_height_M .board155 ul.board_wrap ul li:first-child a .co {height: 1.4em; -webkit-line-clamp: 1; margin-top:10px;}
.layout_height_M .board155 ul.board_wrap ul li:first-child a .date {margin-top:10px;}
.layout_height_M .board155 ul.board_wrap > li.active div ul {height: 150px;padding:30px;}

.layout_03 .board155 ul.board_wrap ul li:nth-child(n+2) a .date {display: none;}
.layout_03 .board155 ul.board_wrap ul li:nth-child(n+2) a p.tit {width:100%;}



	@media (max-width:799px){
		/* .board155 {padding: 0 10px; box-sizing: border-box;} */
		.layout_01 .board155 ul.board_wrap > li.active div ul {height: 170px;}
		
		.board155 ul.board_wrap ul li {width:100%;}	
		.board155 ul.board_wrap ul li:first-child {height: 170px!important;margin-bottom: 10px;padding:0 20px;}
		.board155 ul.board_wrap ul li:first-child a .co {height: 2.8em;-webkit-line-clamp: 2;}
		.board155 ul.board_wrap ul li:first-child a p.tit {display: block; height: 1.4em; white-space: nowrap;}

		.board155 ul.board_wrap li div ul {height: 170px;}

		.board155 ul.board_wrap ul li:nth-child(n+2) a p.tit {font-size: 15px;font-weight:400;}
		.board155 ul.board_wrap ul li:nth-child(n+2) {padding-left:0;}
		.board155 ul.board_wrap ul li + li:nth-child(n+2):after {left:0;}

		.board155 ul.board_wrap > li.active div ul {padding:20px!important;}
		.board155 ul.board_wrap > li .board_name a {font-size:17px;}
	
		.layout_height_M .board155 ul.board_wrap > li.active div ul {height:130px;}
		.layout_height_M .board155 ul.board_wrap ul li:first-child {height:122px!important;}
	}