@charset "UTF-8";

/* Notice */
.wrap-notice {background: #fff url('../images/bg-notice.png') repeat-x;}
.wrap-notice .title {padding-top: 205px; font-family: 'Arita Bold'; font-size: 60px; text-align: center; line-height: 1; color: #333;}
.check .wrap-notice .title {padding-top: 64px;}
.check .wrap-notice .desc {padding-bottom: 584px;}
.wrap-notice .desc {position: relative; padding-top: 76px; padding-bottom: 564px; text-align: center;}
.wrap-notice .desc > ul {position: relative;}
.wrap-notice .desc > ul > li {display: inline-block; vertical-align: middle;}
.wrap-notice .desc .btn-tab {position: relative; margin-right: 35px; padding-right: 45px; font-family: 'Dream Regular'; font-size: 23px; color: #868686;}
.wrap-notice .desc .btn-tab::after {content: ''; position: absolute; right: 0; top: 39%; width: 6px; height: 6px; background: #7e7e7e; border-radius: 100%;}
.wrap-notice .desc > ul > li:last-child .btn-tab {margin-right: 0; padding-right: 0;}
.wrap-notice .desc > ul > li:last-child .btn-tab::after {display: none;}
.wrap-notice .desc .btn-tab:hover,
.wrap-notice .desc .on .btn-tab {font-family: 'Dream Medium'; color: #003dc7;}
.wrap-notice .list {display: none; position: absolute; left: 0; top: 95px; width: 100%;}
.wrap-notice .on .list {display: block;}
.wrap-notice .list li {float: left; width: 20%; padding: 0 7.5px; padding-top: 20px;}
.wrap-notice .list li.nodata {padding-top: 35%;}
.wrap-notice .list .box {overflow: hidden; position: relative; left: 0; top: 0; padding: 34px 25px; background: #fff; border: 1px solid #dcdcdc; text-align: left; letter-spacing: -1px; transition: top 1s, left 1s;}
.wrap-notice .list .box::after {content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(100% + 2px); height: calc(100% + 2px); background: #007ce5; transform: translate(-50%, -50%); opacity: 0; transition: 0s;}
.wrap-notice .list .box a {display: block;}
.wrap-notice .list .date {display: inline-block; width: 100%; font-family: 'Dream Regular'; font-size: 16px; color: #666;}
.wrap-notice .list .subject {overflow: hidden; display: inline-block; width: 100%; height: 61px; margin: 27px 0 20px 0; font-family: 'Dream Medium'; font-size: 22px; line-height: 1.4; color: #222;}
.wrap-notice .list .subject span {position: relative; background: linear-gradient(to bottom, transparent 97%, rgba(255,255,255,.64) 0) left center no-repeat; background-size: 0; transition: background-size 1s;}
.wrap-notice .list a:hover .subject span{background-size: 100% auto;}
.wrap-notice .list .text {overflow: hidden; height: 75px; font-family: 'Dream Regular'; font-size: 16px; color: #444;}
.wrap-notice .list .more {position: relative; display: inline-block; margin-top: 26px; font-family: 'Dream Regular'; font-size: 14px; letter-spacing: 0; color: #333;}
.wrap-notice .list .more::after {content: ''; display: inline-block; width: 25px; height: 5px; margin-left: 10px; background: url('../images/btn-notice-view.png') no-repeat right center;  vertical-align: middle; transition: 1s;}
.wrap-notice .list li:hover .box {top: -20px; left: 0; z-index: 1;}
.wrap-notice .list li:hover .box::after { opacity: 1;}
.wrap-notice .list li:hover .subject {color: #fff;}
.wrap-notice .list li:hover .date,
.wrap-notice .list li:hover .text,
.wrap-notice .list li:hover .more {color: #c4e4ff;}
.wrap-notice .list li:hover .more::after {background-position: left center; transition: 1s;}
.wrap-notice .btn-more {position: absolute; right: 0; top: -7px; display: none; width: 45px; height: 45px; background: #bfbfbf url('../images/btn-notice-more.png') no-repeat center center; border-radius: 100%; text-indent: -99999px; transition: 1s;}
.wrap-notice .btn-more:hover {background-color: #2b64b1;}
.wrap-notice .on .btn-more {display: block;}
.wrap-notice .control {position: absolute; left: 0; top: 614px; width: 100%; text-align: center; font-size: 0;}
.wrap-notice .control .button,
.wrap-notice .control .paging {display: inline-block; vertical-align: middle; font-size: 0;}
.wrap-notice .control .button {position: relative; top: -1px;}
.wrap-notice .control .button button {display: inline-block; width: 24px; height: 5px; vertical-align: middle; text-indent: -9999px;}
.wrap-notice .control .button .prev {margin-right: 25px; background: url('../images/btn-notice-control-prev.png') no-repeat left center;}
.wrap-notice .control .button .prev:hover {background-position: right center; transition: 1s;}
.wrap-notice .control .button .next {background: url('../images/btn-notice-control-next.png') no-repeat right center; transition: 1s;}
.wrap-notice .control .button .next:hover {background-position: left center; transition: 1s;}
.wrap-notice .control .paging {width: 68%; padding-left: 45px; }
.wrap-notice .control .paging ul {overflow: hidden; display: none !important; width: 100%; border-radius: 10px; table-layout: fixed;}
.wrap-notice .control .paging ul.on {display: table !important;}
.wrap-notice .control .paging li {display: table-cell; height: 6px; background: #dbdbdb;}
.wrap-notice .control .paging li.slick-active {background: #3b3b3b; border-radius: 10px;}
.wrap-notice .control .paging button {width: 100%; height: 100%; font-size: 0; text-indent: -99999px;}

.wrap-notice .list .ani {bottom: -100px;}
.wrap-notice .clicked .list .ani {transition: none;}
.ani-on .wrap-notice .list .ani {bottom: 0;}
.ani-on .wrap-notice .list .ani1 {transition-delay: 0s;}
.ani-on .wrap-notice .list .ani2 {transition-delay: .2s;}
.ani-on .wrap-notice .list .ani3 {transition-delay: .4s;}
.ani-on .wrap-notice .list .ani4 {transition-delay: .6s;}
.ani-on .wrap-notice .list .ani5 {transition-delay: .8s;}
.ani-on .wrap-notice .list .ani6 {transition-delay: 1s;}

@media all and (max-width: 900px) {
    .check .wrap-notice .title {padding-top: 66px; font-size: 38px;}
    .check .wrap-notice .desc {padding-top: 51px; padding-bottom: 495px;}
    .wrap-notice .desc .btn-tab {margin-right: 23px; padding-right: 33px; font-size: 20px;}
    .wrap-notice .list {top: 80px;}
    .wrap-notice .list .subject {margin: 22px 0 10px 0; height: 56px; font-size: 20px;}
    .wrap-notice .list .text {height: 45px; font-size: 15px;}
    .wrap-notice .list .box {padding: 25px 25px;}
    .wrap-notice .list .more {margin-top: 20px;}
    .wrap-notice .control {top: 488px;}
    .wrap-notice .control .paging ul {max-width: 660px;}
    .wrap-notice .on .btn-more {display: none;}
}

@media all and (max-width: 650px) {
    .wrap-notice .desc .btn-tab {margin-right: 4px; padding-right: 15px; font-size: 18px; letter-spacing: -1px;}
}

@media all and (max-width: 500px) {
    .wrap-notice .container {padding: 0;}
    .check .wrap-notice .title {padding-top: 47px; font-size: 32px;}
    .check .wrap-notice .desc {padding-top: 17px; padding-bottom: 409px;}
    .wrap-notice .list {top: 45px;}
    .wrap-notice .list .subject {font-size: 19px;}
    .wrap-notice .control {top: 394px;}
    .wrap-notice .control .paging ul {max-width: 250px}
}

@media all and (min-width: 2000px) {
  .wrap-notice {max-width: 1920px; margin: 0 auto;}
}