@charset = 'utf-8';

.data-slider { margin: 0 -17px !important}
.data-slider li { position: relative; top: 0; padding: 0 17px; }
.data-slider li > a { display: block; position: relative; top: 0; padding: 30px 20px; height: 100%; background: #fff; transition: all .2s; border: 2px solid transparent; }
.data-slider li > a:hover { top: -20px; border: 2px solid #0088cf; color:#333;  }
.data-slider li > a .cate { padding: 0 0 20px; font-size: 18px; color: #0066b3; font-weight: 500; line-height: 0.9;}
.data-slider li > a .img-wrap { }
.data-slider li > a .na-title {  padding: 30px 0 10px; }
.data-slider li > a .na-title .na-item { overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.8em; font-size: 20px; font-weight: 700; color: #333; line-height: 1.4; word-break:keep-all; text-overflow: ellipsis;}
.data-slider li > a .na-content {  overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 0 0 20px; height: 4.5em; line-height: 1.5em;  font-size: 16px; word-break:keep-all; text-overflow: ellipsis;}


@media (max-width:991px){
    .data-slider { margin: 0 -10px !important}
    .data-slider li { padding: 0 10px; }    
 
}
@media (max-width:768px){
    .data-slider { margin: 0 -5px !important}
    .data-slider li { padding: 0 5px; }
    .data-slider li > a { padding: 20px 10px;}
    .data-slider li > a .na-title { padding: 20px 0 10px;}
    .data-slider li > a .na-title .na-item { font-size: 18px;} 
}

@media (max-width:577px){ 
    .data-slider li { padding: 0 5px; margin: 0 0 20px;}
    .data-slider li > a { padding: 30px 10px;}
}



@media (min-width:450px) and (max-width:576px) {
    .data-slider li > a .na-title .na-item { -webkit-line-clamp: 1; height: 1.4em; }
}