.ak-filter{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px;
margin:25px 0 40px;
} .ak-filter-item{
display:flex;
align-items:center;
justify-content:center;
height:46px;
padding:0 22px;
background:#FFFFFF;
border:1px solid #E5E7EB;
border-radius:10px;
color:#1F2937;
font-size:15px;
font-weight:600;
line-height:1;
white-space:nowrap;
cursor:pointer;
user-select:none;
transition:
background-color .25s,
border-color .25s,
color .25s,
transform .2s,
box-shadow .25s;
} .ak-filter-item:hover{
border-color:#148CFF;
color:#148CFF;
background:#F7FBFF;
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(20,140,255,.12);
} .ak-filter-item.active{
background:#148CFF;
border-color:#148CFF;
color:#FFFFFF !important;
box-shadow:0 8px 20px rgba(20,140,255,.20);
}
.ak-filter-item.active *{
color:#FFFFFF !important;
} @media (max-width:849px){
.ak-filter{
flex-wrap:nowrap;
justify-content:flex-start;
overflow-x:auto;
gap:10px;
padding-bottom:6px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.ak-filter::-webkit-scrollbar{
display:none;
}
.ak-filter-item{
flex:0 0 auto;
height:42px;
padding:0 18px;
font-size:14px;
}
} .ak-project{
opacity:1;
transform:translateY(0);
transition:
opacity .3s ease,
transform .3s ease;
}