@charset "UTF-8";

.main-board {}
#_contentBuilder .main-board ._fnctWrap {height: auto;}
.wrap-notice.area {position:relative; overflow:hidden; min-height: 420px;  margin-top: 240px;}
.wrap-notice > ul > li .list {display: none;}
.wrap-notice > ul > li.on .list {display: block;background: #fff;padding: 40px 0 45px;}


.wrap-notice .recents-title-bx {float: left; width: 31%;  box-sizing: border-box; }
.wrap-notice .recents-title-bx > p {font-size: 45px; color: #010101; font-weight: 700; margin-bottom: 70px; white-space: nowrap;}


.wrap-notice > ul {float: left; width: 67%;}
.wrap-notice .title {position:absolute; width: 15%; left: 16.5%; top: 15px; display:inline-block; font-size:1.25vw; font-family:'Noto Demilight';}
.wrap-notice > ul > li:nth-child(2) .title {top: 60px;}
.wrap-notice > ul > li:nth-child(3) .title {top: 105px;}
.wrap-notice > ul > li:nth-child(4) .title {top: 150px;}
.wrap-notice > ul > li:nth-child(5) .title {top: 195px;}

.wrap-notice .title-inner {position: relative; display: inline-block; padding-right: 25px;}
.wrap-notice .title button {position: relative; display: inline-block; font-size: 20px; color: #333333;font-family: 'Noto Regular';}
.wrap-notice .recentBbsMore {display: none; position: absolute; right: 0; top: 14px; text-indent:-99999px;  width:13px; height:13px; background:url('../images/ic_plus.png') no-repeat center center;}

.wrap-notice .slider {table-layout:fixed; overflow: hidden; display: table; width: 100%;}
.wrap-notice .slider li {position: relative; display: table-cell; width: 33.33%; padding: 0 3.33%; border-left: 1px solid #E0E0E0;}
.wrap-notice .slider li:first-child {border-left: 0;}
.wrap-notice .slider .con {}

.wrap-notice .con .con-title {position: relative; padding-top: 30px; font-size: 24px; color: #000000; line-height: 30px; height: 90px; overflow: hidden; margin-bottom: 35px; font-weight: 400;font-family: 'Noto Regular';}
.wrap-notice .con .con-title::before {content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 3px; background: #0090ff;}

.wrap-notice .con .recentBbsThumb {width: 100%; height: 160px; overflow: hidden;}

.wrap-notice .con a {position:relative; display: block;}
.wrap-notice .subject {display: block; height: 16px; line-height: 25px; color: #666666; height: 230px; overflow: hidden; margin: 15px 0 55px; font-weight: 300;font-size: 18px;}
.wrap-notice .date {position: absolute; left: 35px; bottom: 0; display: block; font-size: 18px; line-height: 25px; color: #333333;}
.wrap-notice .con a:hover .con-title, .wrap-notice .con a:hover .subject, .wrap-notice .con a:hover .date {color: #0090ff;}

.wrap-notice > ul > li.on .title button , .wrap-notice > ul > li .title .title-inner:hover button {color: #0090ff; padding-left: 20px;}
.wrap-notice > ul > li.on .title button::before, .wrap-notice > ul > li .title .title-inner:hover button::before {content:""; position: absolute; left:0; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #0090ff;}
.wrap-notice > ul > li.on .recentBbsMore, .wrap-notice > ul > li .title-inner:hover .recentBbsMore {display: block;}

.nodata {min-height: 435px;}

.list-mobile {display: none;}

@media all and (max-width:1600px) {
.wrap-notice.area{padding-left:25px;}
.wrap-notice .recents-title-bx{width: 18.2%;}
.wrap-notice > ul{width:66.5%;}
.wrap-notice .title{left:25px;top:115px;}
.wrap-notice > ul > li:nth-child(2) .title {top: 160px;}
.wrap-notice > ul > li:nth-child(3) .title {top: 205px;}
.wrap-notice > ul > li:nth-child(4) .title {top: 250px;}
.wrap-notice > ul > li:nth-child(5) .title {top: 295px;}
}

@media all and (max-width:1200px) {
	.wrap-notice.area{min-height:140px;}
	.wrap-notice .slider li {text-align: left; padding: 0 20px; min-height: 140px;}
}

@media all and (max-width:1024px) {
	.wrap-notice.area {padding: 40px 0;min-height:auto;margin-top:40px;}
	.wrap-notice .recents-title-bx > p {margin-bottom: 30px; line-height: 65px;}
	.wrap-notice .recents-title-bx {float: none; width: 100%; padding: 0 3%;}
	.wrap-notice > ul {position: relative; float: none; width: 100%; padding: 0 3%; box-sizing: border-box;}

	.wrap-notice .title {position: static;}
	.wrap-notice .title-inner {position: static;}
	.wrap-notice > ul::after {content: ""; display: block; clear:both;}
	.wrap-notice > ul > li {float: left; height: 405px;}
	.wrap-notice > ul > li .list {position: absolute;width: calc(100% - 50px);top: 75px;left: 25px;}

	.wrap-notice .title button {padding-top: 15px;}
	.wrap-notice .recentBbsMore {top: 23px; right: 23px;}
	.wrap-notice > ul > li.on .title button , .wrap-notice > ul > li .title .title-inner:hover button {color: #004eff; padding-left: 0px; padding-top: 15px;}
	.wrap-notice > ul > li.on .title button::before, .wrap-notice > ul > li .title .title-inner:hover button::before {content:""; position: absolute; left:50%; margin-left: -5px; top: 0px; width: 10px; height: 10px; border-radius: 50%; background: #004EFF;}
	.wrap-notice > ul > li.on .recentBbsMore, .wrap-notice > ul > li .title-inner:hover .recentBbsMore {display: block;}
	.wrap-notice .con .con-title{font-size:20px;padding-top:20px;margin-bottom:25px;}
	.wrap-notice .subject{height:130px;}
	.wrap-notice .slider li {min-height: 300px;}
}

@media all and (max-width:767px) {
	.wrap-notice.area {padding: 20px 0 0; min-height: 425px;}
	.wrap-notice .recents-title-bx > p {font-size: 40px; line-height: 40px;}

	.wrap-notice .title {width: auto;}
	.wrap-notice .title-inner {padding-right: 15px;}
	.wrap-notice .title button {font-size: 2.6vw; display: none;}
	.wrap-notice .recentBbsMore, .wrap-notice > ul > li.on .recentBbsMore, .wrap-notice > ul > li .title-inner:hover .recentBbsMore {display: none;}
	.wrap-notice .slider li {border-right: 0; border-left: 0 solid #000; min-height: 250px;}
	.wrap-notice .subject {height: 95px;}
	.wrap-notice > ul > li {height: auto;}
	.wrap-notice > ul > li .list {bottom: unset;top: 5px;}
	.wrap-notice .date {left: 25px;}

	.list-mobile {position: absolute; right: 3%; top: 18px; display: block; width: 140px; border-bottom: 1px solid #004EFF; background: url("../images/select_arrow.png") no-repeat 95% center; padding-left: 20px;}
	.list-mobile::before {content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 10px; background: #004EFF; border-radius: 50%; }
	.list-mobile > p {cursor: pointer; font-size: 18px; line-height: 40px; color: #004EFF;}
	.list-mobile ul {display: none; position: absolute; z-index: 15; background: #fff; border: 1px solid #ddd; width: 100%; left: 0px; top: 41px;}
	.list-mobile ul li button {display: block; width: 100%; padding: 5px 10px; font-size: 16px;}
}