@charset "UTF-8";

.wrap-notice {position:relative; display: table; overflow:hidden; width: 100%; padding: 0 0; min-height: 640px; background: #fff; table-layout: fixed;}
.wrap-notice > ul > li {width: 100%;}
.wrap-notice > ul > li .list {display: none;}
.wrap-notice > ul > li.on .list {display: block; position: absolute; width: calc(100% - 350px); height: 100%; padding: 75px 0;}

.wrap-notice .recents-title-bx {display: table-cell; width: 350px; padding: 75px 5%; box-sizing: border-box; vertical-align: top; }
.wrap-notice .recents-title-bx > p {font-family:'TitilliumWeb-Bold'; font-size: 65px; color: #010101; margin-bottom: 70px; white-space: nowrap; line-height: 1;}

.wrap-notice > ul {display: table-cell; vertical-align: top;}
.wrap-notice .title {position:absolute; width: 15%; left: 5%; top: 237px; display:inline-block; font-family:'Noto Demilight';}
.wrap-notice > ul > li:nth-child(2) .title {top: 287px;}
.wrap-notice > ul > li:nth-child(3) .title {top: 337px;}
.wrap-notice > ul > li:nth-child(4) .title {top: 387px;}
.wrap-notice > ul > li:nth-child(5) .title {top: 437px;}

.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: #6b6b6b;}
.wrap-notice .recentBbsMore {display: none; position: absolute; right: 0; top: 9px; text-indent:-99999px;  width:13px; height:13px; background:url('../images/ic_plus.png') no-repeat center center;}

.wrap-notice .slider {overflow: hidden; display: inline-block; width: 100%; height: 100%;}
.wrap-notice .slider li {position: relative; float: left; width: 33.33%; height: 100%; padding: 0 3%; border-left: 1px solid #E0E0E0;}
.wrap-notice .slider li:nth-child(4n),
.wrap-notice .slider li:first-child {border-left: 0;}
.wrap-notice .slider li.nodata {width: 100%; text-align: center;}

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

.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: 255px; overflow: hidden; margin: 15px 0 35px; font-weight: 300;}
.wrap-notice .date {position: absolute; left: 35px; bottom: 0; display: block; font-family:'TitilliumWeb-Regular'; 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: #000000;}

.wrap-notice .con a:hover .con-title {color: #006276;}

.wrap-notice > ul > li.on .title button , .wrap-notice > ul > li .title .title-inner:hover button {color: #006276; 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: #006276;}
.wrap-notice > ul > li.on .recentBbsMore, .wrap-notice > ul > li .title-inner:hover .recentBbsMore {display: block;}

.nodata {min-height: 435px;}

.list-mobile {display: none;}
.wrap-header .head-util > ul > li::before {display: none;}

@media all and (max-width:1023px) {
    .wrap-notice { min-height: 800px; padding: 30px;}
    .wrap-notice,
	.wrap-notice .recents-title-bx,
    .wrap-notice > ul {display: block;}
    .wrap-notice > ul > li {display: inline-block; width: auto;}
    .wrap-notice > ul > li.on .list {left: 0px; width: 100%; height: auto; margin: 20px 0 0 0; padding: 0;}
    .wrap-notice .recents-title-bx {width: auto; padding: 0;}
    .wrap-notice .recents-title-bx > p {margin: 0 0 20px 0;}
    .wrap-notice .title {position: static; width: auto;}
    .wrap-notice .title button {display: inline-block;}
    .wrap-notice .title-inner {position: static;}
    .wrap-notice .slider li {float: none; width: 100%; padding: 10px 30px; border: 0 solid #000;}
    .wrap-notice .subject {height: 75px; margin: 0 0 10px 0;}
    .wrap-notice .date {position: static;}
    .wrap-notice .con .con-title {height: 62px; margin-bottom: 10px;}
    .wrap-notice .recentBbsMore {right: 35px; top: 60px;}
}