@charset "UTF-8";

.wrap-notice {background: #e9ecf0; min-height:310px; border-bottom: 1px solid #ccc;}
.wrap-notice .title {position: absolute; left: 0; top: 0; padding: 0 0 0 35px; background: url('../images/ico-notice-title.png') no-repeat left center; font-family: 'Mont Medium'; font-size: 34px; color: #222;}
.wrap-notice .title span {position: relative;}
.wrap-notice .title span::after {content: ''; position: absolute; left: 133%; top: 50%; width: 37px; height: 1px; background: #000;}
.wrap-notice > ul {position: relative; display: inline-block; width: 100%; padding: 9px 0 0 240px;}
.wrap-notice > ul > li {float: left;}
.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 {padding: 0 30px 0 0; font-family: 'Noto Light'; font-size: 22px; color: #888;}
.wrap-notice > ul > li.on > button {font-family: 'Noto Medium'; color: #0054a7;}
.wrap-notice .list > ul > li.nodata{text-align: center; padding: 30px 0;}
.wrap-notice .info {position: absolute; top: 50px; left: 0; width: 100%;}
.wrap-notice .info .first {padding: 20px 0 26px 0 !important; margin: 0 0 10px 0; border-bottom: 1px dashed #d2d2d2;}
.wrap-notice .info .first a {display: table; width: 100%; table-layout: fixed;}
.wrap-notice .info .first .num {display: table-cell; width: 105px; text-align: center;vertical-align: top; line-height: 1;}
.wrap-notice .info .first .day {display: block; font-family: 'Mont SemiBold'; font-size: 48px; color: #000;}
.wrap-notice .info .first .month {display: none;}
.wrap-notice .info .first .eng {display: block; font-family: 'Noto Regular'; font-size: 14px; color: #666;}
.wrap-notice .info .first strong {display: table-cell; font-family: 'Noto Regular'; font-size: 20px; color: #000; vertical-align: top;}
.wrap-notice .info .first a:hover strong {color: #007a93;}
.wrap-notice .more {position: absolute; top: 7px; right: 0; width: 33px; height: 33px; background: url('../images/btn-notice-more.png') no-repeat center center; text-indent: -9999px;}
.wrap-notice .list .slice.left {float: left; width: 48%;}
.wrap-notice .list .slice.right {float: right; width: 48%;}
.wrap-notice .list .liEle {padding: 6px 0; font-size: 0;}
.wrap-notice .list .subject {position: relative; display: inline-block; width: 75%; font-size: 18px; font-family: 'Noto Light'; padding-left: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
.wrap-notice .list .subject:after {content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; background: #a0bec2; border-radius: 100%;}
.wrap-notice .list .subject a {position: relative; font-family: 'Noto DemiLight'; font-size: 16px; color: #666;}
.wrap-notice .list .subject a:hover {color: #007a93;}
.wrap-notice .list .date {display: inline-block; width: 25%; font-family: 'Mont Light'; font-size: 16px; color: #666; text-align: right; vertical-align: middle;}

@media all and (max-width: 768px) {
    .wrap-notice {min-height: 353px;}
    .wrap-notice .title {position: static;}
    .wrap-notice > ul {padding: 10px 0 0 0;}
    .wrap-notice .list .slice.left {width: 100%;}
    .wrap-notice .list .slice.right {display: none;}
}
