.demark-categories{padding:80px 0;}
.demark-categories .tit{text-align:center;}
.demark-categories .tit h3{font-size:30px;line-height:1.6;color:#0271b7;border-bottom:2px solid #0271b7;font-weight:700;display:inline-block;}


.demark-categories .hd{margin:40px 0 0;}
.demark-categories .hd ul{display:flex;justify-content:center;text-align:center;flex-wrap:wrap;}
.demark-categories .hd ul li{display:inline-flex;justify-content:center;align-items:center;padding:0;border-radius:5px;height:47px;line-height:22px;font-size:17px;cursor:pointer;color:#0271b7;font-weight:600;background:#fff;border:1px solid #0271b7;position:relative;width:31.3333333%;margin:10px 1% 0;}
.demark-categories .hd ul li:hover,.demark-categories .hd ul li.on{color:#fff;background:#1A64BE;border-color:#1A64BE;}

.demark-categories .tab-box{margin:65px 0 0;}
.demark-categories .bd ul{}
.demark-categories .bd ul li{float:left; width: calc((100% - 180px) / 4);;position:relative;text-align:center;background:#fff;margin-right:3%;cursor:pointer;}
.demark-categories .bd ul li:last-child{margin-right:0;}
.demark-categories .bd ul li .pic{width:100%;position:relative;display:block;border:2px solid #f5f5f5;overflow:hidden;}
.demark-categories .bd ul li .pic img{width:100%;transition:all 0.3s ease 0s;}
.demark-categories .bd ul li .pic .t{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(42,42,63,0.9);display:block;opacity:0;display:flex;justify-content:center;align-items:center;text-align:center;padding:0 20px;}
.demark-categories .bd ul li .pic .t p{font-size:16px;line-height:24px;color:#fff;}
.demark-categories .bd ul li h6{font-size:18px;font-weight:600;color:#333;margin:15px 0 0;}
.demark-categories .bd ul li h6 a:hover{color:#1A64BE;}

@media screen and (min-width:768px){
.demark-categories .bd ul li:hover .t{opacity:1;}
.demark-categories .bd ul li:hover .pic::after{opacity:1;}
.demark-categories .bd ul li:hover img{transform:scale(1.05);-webkit-transform:scale(1.05);}
}

.demark-categories .page{margin:50px 0 0;font-size:0;text-align:center;}
.demark-categories .prev,.demark-categories .next{display:inline-block;text-align:center;width:70px;height:50px;background:#393C4D;}
.demark-categories .next{margin-left:20px;}
.demark-categories .prev i,.demark-categories .next i{font-size:25px;color:#fff;line-height:50px;}
.demark-categories .prev:hover,.demark-categories .next:hover{background:#1A64BE;}



@media screen and (max-width:1441px) {
.demark-categories{padding:70px 0;}
.demark-categories .tit h3{font-size:29px;}

}

@media screen and (max-width:1367px) {
.demark-categories{padding:65px 0;}
.demark-categories .tit h3{font-size:28px;}

.demark-categories .hd ul li{font-size:16px;}

.demark-categories .tab-box{margin:60px 0 0;}

.demark-categories .page{margin:40px 0 0;}
.demark-categories .prev,.demark-categories .next{width:60px;height:44px;}
.demark-categories .prev i,.demark-categories .next i{font-size:23px;line-height:44px;}


}

@media screen and (max-width:1281px){
.demark-categories{padding:60px 0;}
.demark-categories .tit h3{font-size:27px;}

.demark-categories .tab-box{margin:50px 0 0;}
.demark-categories .bd ul li h6{font-size:17px;}

}

@media screen and (max-width:1171px){
.demark-categories{padding:50px 0;}
.demark-categories .tit h3{font-size:26px;}
.demark-categories .hd ul{justify-content:center;}
.demark-categories .hd ul li{font-size:15px;}
}

@media screen and (max-width:992px){
.demark-categories{padding:40px 0;}
.demark-categories .tit h3{font-size:25px;}
}

@media screen and (max-width:768px){
.demark-categories{padding:30px 0;}
.demark-categories .tit h3{font-size:24px;}

.demark-categories .tab-box{margin:15px -1% 0;}
.demark-categories .bd{}
.demark-categories .bd ul li{width:48%;margin:15px 1% 0;cursor:pointer;}
.demark-categories .bd ul li:last-child{margin-right:1%;}
.demark-categories .bd ul li h6{font-size:16px;line-height:22px;height:44px;overflow:hidden;}

.demark-categories .page{display:none;}

}

@media screen and (max-width:576px) {
.demark-categories .tit h3{font-size:23px;}
.demark-categories .hd{margin:20px 0 0;}
.demark-categories .hd ul{justify-content:space-between;}
.demark-categories .hd ul li{margin:10px 0 0;width:49%;padding:0;height:40px;line-height:18px;font-size:14px;}

}

@media screen and (max-width:480px) {
.demark-categories .tit h3{font-size:22px;}
.demark-categories .bd ul li h6{font-size:15px;}
  
}	


@media screen and (max-width:420px) {
.demark-categories .tit h3{font-size:21px;}

}