@charset "UTF-8";

.wrap-notice {background-color: #f1f7ff; padding: 30px 59px 24.5px; border-right: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;}
.wrap-notice.ani {right: -100px;}
.ani-on .wrap-notice.ani {right: 0;}
.wrap-notice .title::after {content:""; display: table; clear: both;}
.wrap-notice .title strong {float: left; position: relative; padding-top: 20px; font-family:'Dream Medium'; font-size: 22px; color: #383838;}
.wrap-notice .title strong::before {content:""; display: block; position: absolute; left: 0; top: 0; width: 46px; height: 3px;  background-color: #000000;}
.wrap-notice a {display: block;}
.wrap-notice a.btn-more {position: absolute; right: 60px; top: 50px; display: block; width: 21px; height: 21px; border: 1px solid #000000; text-indent: -9999px;}
.wrap-notice a.btn-more::after {content:""; position: absolute; left: 50%; top: 50%; display: block; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: url(../images/btn-notice-more.png) no-repeat center center; transition: all 1s;}
.wrap-notice a.btn-more:hover::after {transform: rotate(180deg);}
.wrap-notice .first {margin-bottom: 10px;}
.wrap-notice .first .line::after {content:""; display: table; clear: both;}
.wrap-notice .first .first-line-box::after {content:""; display: table; clear: both;}
.wrap-notice .first .line .date {float: left; width: 65px; margin-right: 20px;}
.wrap-notice .first .line .date .day {display: block; font-family:'Titil SemiBold'; font-size: 50px; text-align: center; line-height: 1; color: #464646;}
.wrap-notice .first .line .date .month {display: block; font-family:'Dream Regular'; font-size: 15px; text-align: center; color: #8C8C8C;}
.wrap-notice .first .line .subject {float: right; width: calc(100% - 85px); margin-top: 5px;}
.wrap-notice .first .line .subject strong {position: relative; font-family: 'Dream Medium'; font-size: 17px; color: #2a2a2a;}
.wrap-notice .first .line .subject strong::after {content:""; position: absolute; left: 0; bottom: -9px; display: block; width: 0; height: 15px; background-color: rgba(34,63,85,0.15); transition: all 1s;}
.wrap-notice .first .line a:hover .subject strong::after {width: 100%;}
.wrap-notice .first .line p {overflow: hidden; height: 44px; margin-top: 5px; font-family: 'Dream Regular'; font-size: 14px; line-height: 22px; color: #7b7b7b;}
.wrap-notice .list li:not(.first) a {overflow: hidden; position: relative; display: block; padding-left: 15px; font-family: 'Dream Regular'; font-size: 14px; letter-spacing: -0.075em; text-overflow: ellipsis; white-space: nowrap; color: #4f4f4f;}
.wrap-notice .list li:not(.first) a::before {content:""; display: block; position: absolute; left: 0; top: 50%; width: 6px; height: 3px; margin-top: -1.5px; background-color: #212121;}
.wrap-notice .list li:not(.first) a span {position: relative;}
.wrap-notice .list li:not(.first) a span::after {content:""; display: block; position: absolute; left:0; bottom: 0; width: 0; height: 1px; background-color:#212121; transition: all 1s;}
.wrap-notice .list li:not(.first) a:hover span::after {width: 100%;}
.wrap-notice .list li:not(.first) {margin-bottom: 8px;}
.wrap-notice > li:last-child {margin-bottom: 0;}

@media all and (max-width: 1800px) {
    .wrap-notice {padding: 30px 20px 24.5px;}
    .wrap-notice a.btn-more {right: 20px;}
}

@media all and (max-width: 900px) {
    .wrap-notice {padding: 30px 34px 24.5px;}
    .wrap-notice a.btn-more {right: 40px;}
}

@media all and (max-width: 700px) {
    .wrap-notice {border-right: 0;}
}

@media all and (max-width: 500px) {
    .wrap-notice {padding: 42px 20px 28.5px; border-right: 0;}
    .wrap-notice a.btn-more {right: 20px;}
}