@charset "UTF-8";

.wrap-notice {background: #fff;padding: 35px;min-height: 420px;box-sizing: border-box;}
.wrap-notice .title {font-size: 32px;color: #000;font-family: 'Titillium Web Bold';margin-bottom: 20px;}
.wrap-notice > ul {position: relative; display: inline-block; width: 100%;}
.wrap-notice > ul > li {float: left; width: calc(33.333% - 1px); margin-right:1px;}
.wrap-notice > ul > li .info {display: none;}
.wrap-notice > ul > li.on .info {display: block;}
.wrap-notice > ul > li .more {display: none;}
.wrap-notice > ul > li.on .more {display: block;}
.wrap-notice > ul > li > button {height: 40px; line-height: 40px; text-align: center; background: #84a3af; color: #fff; font-family: 'Noto Light'; display: block; width: 100%; font-size: 18px;}
.wrap-notice > ul > li.on > button {background: #0047bd;}
.wrap-notice .info {position: absolute;top: 90px;left: 0;width: 100%;}
/**.wrap-notice .info .first {margin-top: 35px; margin-bottom: 35px; padding-left: 150px; background: url('../images/ico-notice.png') no-repeat left center;}
.wrap-notice .info .first strong {position: relative; font-family: 'Noto Medium'; font-size:24px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.wrap-notice .info .first strong:hover {color: #0047bd;}
.wrap-notice .info .first strong:after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #0047bd; transition: all .5s ease;}
.wrap-notice .info .first strong:hover:after {width: 100%;}
.wrap-notice .info .first p {font-family: 'Noto Light'; font-size: 18px; overflow: hidden; height: 80px;}**/
.wrap-notice .more {position: absolute;top: -140px;right: 0;width: 30px;height: 30px;background: url('../images/btn-notice-more.png') no-repeat center center;text-indent: -9999px;}
.wrap-notice .list  > ul > li {overflow: hidden;margin-bottom: 12px;}
.wrap-notice .list .subject {position: relative;float: left;font-size: 18px;font-family: 'Noto Light';padding-left: 25px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 72%;letter-spacing: -.5px;}
.wrap-notice .list .subject:after {content: ''; position: absolute; left: 0; top: 13px; width: 9px; height: 3px; background: #008edd;}
.wrap-notice .list .subject a {position: relative;}
.wrap-notice .list .subject a:hover {color: #0047bd;}
.wrap-notice .list .subject a:after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #0047bd; transition: all .5s ease;}
.wrap-notice .list .subject a:hover:after {width: 100%;}
.wrap-notice .list .date {float: right; font-size: 18px; font-family: 'Noto Light'; color: #666;}

@media all and (max-width:767px) {
.wrap-notice{padding: 35px 0 25px;min-height: 340px;border-bottom: 1px solid #ccc;margin-bottom: 40px;}
.wrap-notice .title{font-size: 30px;margin-bottom: 12px;}
.wrap-notice .info{top:55px;}
.wrap-notice > ul > li.on .more{top:-105px;}
.wrap-notice > ul > li > button{font-size: 15px;height: 30px;line-height: 30px;}
.wrap-notice > ul > li + li{padding-left:5px;}

.wrap-notice .list .subject {font-size: 16px;}
.wrap-notice .list .date {font-size: 16px;}
}

@media all and (max-width:540px) {

}