@CHARSET "UTF-8";
.sub_article ul{width: 650px;}

.sub_article ul li{width:  33%;}


.portfolio_article{width:1200px;margin:0 auto;height:  98px;display: block;margin-bottom:  58px;}
.category_search{width:  100%;height: 98px;background: #f7f7f7;float:right;/* margin-top:31px; */text-align:center;/* margin-bottom:  30px; */}
.category_search select {width:112px;height:42px;text-indent: 15px;display:  inline-block;float:  left;margin:  0 auto;margin-right:  5px;/* margin-top:  28px; */}
.category_search input{height: 36px;width:  320px;float:  left;display:  inline-block;margin:  0 auto;}
.category_div div{width:98px;height:42px;color:#fff;background:#000;line-height:42px;margin-left:  5px;display:  inline-block;float:  left;}
.category_div{display:  inline-block; margin-top:  28px;}

#filter{margin:0 auto;text-align:  center;margin-bottom: 40px;}
#filter a{padding:0px 25px;}
#filter a.active{color:#2ca2d2;}
.sub_article{border-bottom:none;margin-bottom: 85px;}
.portfolio_article2{width: 100%;margin:0 auto;display: block;margin-bottom:  58px;text-align:center;}
.pfAllDivBox{width: 1920px;margin:0 auto;display:inline-block;}
.pfAllDivBox ul li{float:left;width:20%}
.pfDivBox{float:left;margin-right: 8px;position: relative;margin-bottom: 8px;overflow:hidden;box-sizing: border-box;width:  377px;height:  377px;}
.pfDivBox:nth-child(5n){margin-right: 0px;}
.pfTextBox{width: 377px;height: 377px;position:  absolute;top: 0;/* background-color: rgba(0,0,0,0.6); */}
.pfTextBox h2{/* line-height:307px; */font-size: 30px;margin-top: 135px;color:#fff;margin-bottom: 10px;}
.pfTextBox p{font-size: 13px;color:#fff;line-height:  20px;}
.pfTextBox a:hover{color:#fff;}
.pfTextBox a:link{color:#fff;}
.pfTextBox a:visited{color:#fff;}

.pfDivBox a {
  pointer-events: none;
}


.pfImgBox img{
  width:  377px;
  height:  377px;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  }
  
  .pfImgBox img.hovers{  transform: scale(1.2) !important;
  -webkit-transform: scale(1.2) !important;
  -moz-transform: scale(1.2) !important;
  -ms-transform: scale(1.2) !important;
  -o-transform: scale(1.2) !important;
  }
  
  .pagDiv{text-align:center;position:  relative;height:  37px;margin-bottom:  127px;width:  100%;display: inline-block;}
  .paging{/* position:  absolute; */text-align:center;height:  37px;display: inline-block;top: 0;margin:  0 auto;/* left: 50%; *//* transform: translateX(-50%); */}
  .paging li{float:left;line-height:  37px;}
  .paging ul{margin:0 auto; text-align:center;}
  .middle ul li{padding:0 10px;}
  .paging .left{float:left;}
  .paging .left ul li{margin-left: 7px;}
  .paging .right ul li{margin-left:7px;}
  .paging .middle{float:left;}
  .paging .right{float:left;}



@media screen and (max-width: 768px) {
  .pfDivBox{width:100%;height:  202px;}
  .pageTitle{margin-top: 41px;}
  .sub_article p{font-size:12px !important;margin-bottom: -30px;}
  .pfTextBox{float:left;width: 100% !important;height: 202px;}
  .pfAllDivBox ul li{width: 49% !important;height:202px;margin-top: 7px;}
  .pfAllDivBox ul li:nth-child(2n){float:right;}
  .pfImgBox img{width:100%;height:202px;}
  .pfImgBox{width:100%;height:202px;}
  .pfTextBox h2{margin-top: 60px;}
  .pfTextBox h2 img{width:50%}
  .pfTextBox p{font-size:11px;line-height:16px;}
}

@media (min-width: 1200px){

}

@media only screen and (min-width: 640px) and (max-width: 1199px) {
  .pfAllDivBox ul li {
    width:100% !important;
    flex: 0 0 40%;
    height: auto !important;
    display: flex;
    justify-content: center;
  }
  #stage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:15px;
  }
}