@charset "utf-8";


.wrap-notice {position: relative;}
.wrap-notice .inner {padding:0;}
.wrap-notice .notice-header {display: flex; justify-content: space-between; align-items: start;}
.wrap-notice .control {display: flex; align-items: center; position: absolute; top:-90px; right:0; z-index: 1;}
.wrap-notice .control button,
.wrap-notice .control a {width:50px; height:50px; border:1px solid #fff; text-indent: -9999px; display: inline-block; vertical-align: top; margin-left: 10px; transition: background .3s; padding:0;}

.wrap-notice .prev {background:url('../images/prev.png') no-repeat center;}
.wrap-notice .next {background:url('../images/next.png') no-repeat center;}
.wrap-notice .more {background:url('../images/more.png') no-repeat center;}
.wrap-notice .prev:hover {background:#fff url('../images/prev-on.png') no-repeat center;}
.wrap-notice .next:hover {background:#fff url('../images/next-on.png') no-repeat center;}
.wrap-notice .more:hover {background:#fff url('../images/more-on.png') no-repeat center;}
@media screen and (max-width:1200px) {
    @media (hover:none) {
        .wrap-notice .prev:hover {background:url('../images/prev.png') no-repeat center;}
        .wrap-notice .next:hover {background:url('../images/next.png') no-repeat center;}
        .wrap-notice .more:hover {background:url('../images/more.png') no-repeat center;}
    }
}

.wrap-notice .btn-list {margin-bottom: 50px;}
.wrap-notice .tab-btn {font-size: 30px; color:#4B99DD; font-family: 'SUITE SemiBold'; padding-right:17px; margin-right:8px; display:inline-block; position: relative; transition:color .3s;}
.wrap-notice .tab-btn:hover {color:#fff;}
.wrap-notice .tab-btn::after {content:''; width:5px; height:5px; background:#4B99DD; position: absolute; top:50%; margin-top:-2px; right:0; border-radius:50%;}
.wrap-notice .tab-btn:last-child::after {display: none;}
.wrap-notice .tab-btn.on {color:#fff; font-family: 'SUITE ExtraBold';}
.wrap-notice .row > li {display: none;}
.wrap-notice .row > li.active {display: block;}
.wrap-notice .row {position: relative;}
.wrap-notice .slider {padding-right:2px; }
.wrap-notice .slider .slick-list {padding-right: 2px;}
.wrap-notice li.nodata {text-align: center; color:#fff; min-height:441px; display: flex !important; align-items: center; justify-content: center; font-family: 'HG Regular';}
.wrap-notice li a {color:#fff; padding:30px 40px 37px 32px;  display: block; position: relative;}
.wrap-notice li a::after {content:''; width:1px; height:100%; position: absolute; right:-1px; top:0; background:rgba(255,255,255,0.5);}
.wrap-notice .date {margin-bottom: 38px; position: relative;}
.wrap-notice .date span {font-size: 16px; font-family: 'SUITE SemiBold'; color:#eee; display: block; }
.wrap-notice .date strong {font-size: 40px; font-family: 'SUITE Bold'; display:inline; line-height: 1;}
.wrap-notice .sj {font-size: 28px; font-family: 'SUITE SemiBold'; background:linear-gradient(to bottom, transparent 98%, rgba(255,255,255,1) 0) left center no-repeat; background-size:0; transition: background-size .5s; line-height: 38px;}
.wrap-notice .cn {font-size: 18px; font-family: 'SUITE Light'; color:#85B9E6; margin-top: 23px; display:-webkit-box; -webkit-line-clamp: 3; overflow:hidden; -webkit-box-orient:vertical; line-height: 1.65;}
.wrap-notice .detail {font-size: 16px; line-height: 30px; font-family: 'SUITE Light'; display: inline-block; margin-top: 38px; padding-right:38px; position: relative; background:url('../images/detail-arrw.png') no-repeat right center;}
.wrap-notice .detail::after {content:''; width:0%; height:1px; background:#fff; position: absolute; bottom:0; left:0; transition:width .5s;}
.wrap-notice a:hover .sj {background-size:100% auto;}
.wrap-notice a:hover .detail::after {width:100%;}
.wrap-notice .new::after {content:'NEW'; width:60px; height:60px; display: inline-flex; align-items: center; justify-content: center; background:#518EFF; color:#fff; font-family: 'SUITE Bold'; font-size: 16px; border-radius:50%; position: absolute; right: 0; top:0;}
@media screen and (max-width:1800px) {
    .wrap-notice {margin:0 20px;}
}
@media screen and (max-width:1200px) {
    .wrap-notice {margin:0 40px;}
    .wrap-notice .date {margin-bottom: 25px;}
    .wrap-notice .cn {margin-top: 15px;}
    .wrap-notice li.nodata {min-height:381px;}
}
@media screen and (max-width:768px) {
    .wrap-notice {margin:0 20px;}
    .wrap-notice .notice-header {flex-direction: column;}
    .wrap-notice .tab-btn {font-size: 26px;}
    .wrap-notice .control {align-items: start;}
    .wrap-notice .btn-list {margin-bottom: 10px;}
    .wrap-notice .control {position: relative; top:0 !important;}
    .wrap-notice .control button, 
    .wrap-notice .control a {width:30px; height: 30px; margin-left: 5px;}
    .wrap-notice .prev {margin:0 !important;}
    .wrap-notice .slider {padding-right: 0; margin-top: 30px;}
    .wrap-notice .slider .slick-list {padding-right: 0;}
    .wrap-notice li a {padding:0;}
    .wrap-notice li a::after {display: none;}
    .wrap-notice .date {display: flex; align-items:end; margin-bottom: 20px;}
    .wrap-notice .date span {line-height: 1; margin-right: 10px;}
    .wrap-notice .date strong {font-size: 30px;}
    .wrap-notice .new::after {content:'N'; width:40px; height:40px; font-size: 16px; right: 20px;}
    .wrap-notice .sj {font-size: 22px;}
    .wrap-notice .cn {font-size: 16px; margin-top: 25px;}
    .wrap-notice .detail {margin-top: 18px;}
    .wrap-notice li.nodata {min-height:215px;}

}