@charset "UTF-8";

/* Notice */
.wrap-notice .container {overflow: hidden; padding-left: 38.5%;}
.wrap-notice .container > ul {position: relative; min-height: 340px;}
.wrap-notice .container > ul::before {content: ''; display: inline-block; vertical-align: middle; width: 81px; height: 81px; margin-right: 15px; background: #4394cc url('../images/ic-notice.png') no-repeat center center; border-radius: 100%;}
.wrap-notice .container > ul > li {display: inline-block; vertical-align: middle;}
.wrap-notice .btn-tab {position: relative; display: inline-block; margin-right: 13px; padding-right: 23px; font-family: 'Dream Regular'; font-size: 20px; vertical-align: middle; color: #838383;}
.wrap-notice .btn-tab::after {content: ''; position: absolute; right: 0; top: 11px; width: 6px; height: 6px; background: #808080; border-radius: 100%;}
.wrap-notice li:last-child .btn-tab::after {display: none;}
.wrap-notice .on .btn-tab {font-family: 'Dream Medium'; font-size: 27px; color: #000200;}
.wrap-notice .on .btn-tab::after {top: 16px;}
.wrap-notice .list {display: none; position: absolute; left: 0; top: 100px; }
.wrap-notice .on .list {display: block;}
.wrap-notice .list .first {float: left; display: table; width: 51.5%; table-layout: fixed;}
.wrap-notice .list .short {float: left; width: 48.5%;}
.wrap-notice .list .ani {right: -80px;}
.ani-on .wrap-notice .list .ani {right: 0;}
.ani-on .wrap-notice .list .ani1 {transition-delay: 1s;}
.ani-on .wrap-notice .list .ani2 {transition-delay: 1.4s;}
.wrap-notice .date {display: table-cell; width: 60px; vertical-align: top; text-align: center;}
.wrap-notice .date .day {font-family: 'Titil SemiBold'; font-size: 50px; line-height: 1; color: #464646;}
.wrap-notice .date .month {font-family: 'Dream Regular'; font-size: 14px; color: #888;}
.wrap-notice .desc {display: table-cell; padding-left: 20px; padding-right: 30px; vertical-align: top;}
.wrap-notice .desc a {display: block;}
.wrap-notice .desc .subject {overflow: hidden; display: inline-block; width: 100%; height: 55px; font-family: 'Dream Regular'; font-size: 18px; line-height: 1.6; color: #333;}
.wrap-notice .first .desc .subject span {position: relative; background: linear-gradient(to bottom, transparent 55%, rgba(15,99,186,.2) 0) left center no-repeat; background-size: 0; transition: background-size 1s;}
.wrap-notice .first .desc a:hover .subject span {background-size: 100% auto;}
.wrap-notice .desc .text {overflow: hidden; height: 95px; margin-top: 13px; font-family: 'Dream Regular'; font-size: 14px; line-height: 1.7; color: #797979;}
.wrap-notice .short > div {display: table; width: 100%; margin-bottom: 6px; table-layout: fixed;}
.wrap-notice .short .subject {overflow: hidden; position: relative; display: table-cell; padding-left: 15px; font-family: 'Dream Regular'; font-size: 15px; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis;}
.wrap-notice .short .subject a {position: relative; color: #4f4f4f;}
.wrap-notice .short .subject a::after {content: ''; position: absolute; left: 0; bottom: -1px; width: 0px; height: 1px; background: #4f4f4f; transition: 1s;}
.wrap-notice .short .subject a:hover::after {width: 100%;}
.wrap-notice .short .subject::after {content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 3px; background: #212121;}
.wrap-notice .short .date {display: table-cell; width: 90px; font-family: 'Dream Regular'; font-size: 14px; vertical-align: middle; color: #888;}
.wrap-notice .btn-more {display: none; position: absolute; right: 0; top: 21px; width: 40px; height: 40px; border: 1px solid #000; text-indent: -99999px;}
.wrap-notice .on .btn-more {display: block;}
.wrap-notice .btn-more::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/btn-notice-more.png') no-repeat center center; transform: rotate(0); transition: 1s;}
.wrap-notice .btn-more:hover::after {transform: rotate(180deg);}

@media all and (max-width: 1000px) {
    .wrap-notice .container {padding-left: 15%;}
}

@media all and (max-width: 900px) {
    .wrap-notice .container {padding-left: 45%;}
    .wrap-notice .container > ul {min-height: 440px;}
    .wrap-notice .list .first,
    .wrap-notice .list .short {float: none; width: 100%;}
    .wrap-notice .list .short {margin-top: 10px;}
    .wrap-notice .short > div:nth-child(n+5) {display: none;}
    .wrap-notice .desc .text {overflow: hidden; height: 46px; margin-top: 6px;}
    .wrap-notice .btn-tab {font-size: 18px;}
    .wrap-notice .on .btn-tab {font-size: 24px;}
}

@media all and (max-width: 800px) {
    .wrap-notice .container {padding-left: 28%;}
}

@media all and (max-width: 585px) {
    .wrap-notice .container {padding-left: 20px;}
}

@media all and (max-width: 500px) {
    .wrap-notice .container {padding-left: 20px;}
    .wrap-notice .container > ul {min-height: 410px}
    .wrap-notice .container > ul::before {width: 51px; height: 51px; background-size: 70%;}
    .wrap-notice .list {top: 60px;}
    .wrap-notice .on .btn-tab {font-size: 22px;}
    .wrap-notice .btn-tab {font-size: 17px;}
    .wrap-notice .desc .text {margin-top: 8px;}
    .wrap-notice .btn-more {top: 5px;}
}