section {
    /* padding: 60px 0; */
    overflow: hidden;
}

.portfolio .portfolio-item {
    margin-bottom: 30px;
}
/*淇敼*/
.portfolio .portfolio-item .portfolio-info {
    /*opacity: 0;*/
    position: absolute;
    left: 30px;
    right: 30px;
    /*bottom: 0;*/
    bottom: 20px;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    background: rgba(255, 255, 255, 0.9);
    /*padding: 15px;*/
    height: 35px;
}

.portfolio .portfolio-item a .portfolio-info h4 {
font-size: 18px;
color: #fff;
font-weight: 600;
color: #191919;
text-align: center;
line-height: 35px;
}

.portfolio .portfolio-item .portfolio-info p {
color: #4c4c4c;
font-size: 14px;
margin-bottom: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
position: absolute;
right: 40px;
font-size: 24px;
top: calc(50% - 18px);
color: #333333;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
color: #cc1616;
}

.portfolio .portfolio-item .portfolio-info .details-link {
right: 10px;
}

.portfolio .portfolio-item .portfolio-links {
opacity: 0;
left: 0;
right: 0;
text-align: center;
z-index: 3;
position: absolute;
transition: all ease-in-out 0.3s;
}

.portfolio .portfolio-item .portfolio-links a {
color: #fff;
margin: 0 2px;
font-size: 28px;
display: inline-block;
transition: 0.3s;
}

.portfolio .portfolio-item .portfolio-links a:hover {
color: #e82d2d;
}

/*.portfolio .portfolio-item:hover .portfolio-info {*/
/*    opacity: 1;*/
/*    bottom: 20px;*/
/*}*/

/* @media (min-width: 1200px){
.container{
    max-width: 1300px;
}
} */

.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 25px auto;
list-style: none;
text-align: center;
border-radius: 50px;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
color: #2589ff;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 10px 15px;
font-size: 15px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
color: #444444;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
font-family: "Poppins", sans-serif;
list-style: none;
}
.portfolio #portfolio-flters li a{
    color: #444444;
}
.portfolio #portfolio-flters li a:hover{
color:#0675f2;
}

.portfolio #portfolio-flters li a:hover  .f2-in-all{
    background:url('../images/cse1_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
    /*background-position: 0 0;*/
}
.portfolio #portfolio-flters li a:hover .f2-in0{
    background:url('../images/cse2_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}
.portfolio #portfolio-flters li a:hover .f2-in1{
    background:url('../images/cse3_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}

.portfolio #portfolio-flters li a:hover .f2-in2{
    background:url('../images/cse4_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}
.portfolio #portfolio-flters li a:hover .f2-in3{
    background:url('../images/cse5_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}

.portfolio #portfolio-flters li a:hover .f2-in4{
    background:url('../images/cse6_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}


.f2-icon{
    display: block;
    height: 56px;
    width: 56px;
    margin: 10px auto 6px;
    background: url(../img/icon_bg.png) center no-repeat;
    background-size: 100% auto;
    background-position: 0 0;
}

.filter-active .f2-title{
color:#0675f2;
}
.filter-active  .f2-in-all{
    background:url('../images/cse1_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
    /*background-position: 0 0;*/
}

.f2-in-all{
    background:url('../images/cse1.png') no-repeat left top;
/*background-position: 0 0;*/
}
.f2-in0{
    background:url('../images/cse2.png') no-repeat left top;
    /*background-position: 0px -201px;*/
}

.filter-active  .f2-in0{
    background:url('../images/cse2_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}
.f2-in1{
    background:url('../images/cse3.png') no-repeat left top;
/*background-position: 0px -266.7px;*/
}
.filter-active  .f2-in1{
    background:url('../images/cse3_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}
.f2-in2{
    background:url('../images/cse4.png') no-repeat left top;
    /*background-position: 0px -333.9px;*/
}
.filter-active  .f2-in2{
    background:url('../images/cse4_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}
.f2-in3{
    background:url('../images/cse5.png') no-repeat left top;
    /*background-position: 0px -402px;*/
}
.filter-active  .f2-in3{
    background:url('../images/cse5_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}
.f2-in4{
    background:url('../images/cse6.png') no-repeat left top;
/*background-position: 0px -469.2px;*/
}
.filter-active  .f2-in4{
    background:url('../images/cse6_h.png') no-repeat left top;
/*background-image: url(../img/hIcon.png);*/
}
.f2-in5{
    background:url('../images/cse7.png') no-repeat left top;
    /*background-position: 0px -537.45px;*/
}
.filter-active  .f2-in5{
    background:url('../images/cse7_h.png') no-repeat left top;
    /*background-image: url(../img/hIcon.png);*/
}
.f2-in6{
    background:url('../images/cse8.png') no-repeat left top;
/*background-position: 0px -606.63px;*/
}
.filter-active  .f2-in6{
    background:url('../images/cse8_h.png') no-repeat left top;
/*background-image: url(../img/hIcon.png);*/
}
.f2-in7{
    background:url('../images/cse9.png') no-repeat left top;
/*background-position: 0px -671.8px;*/
}
.filter-active  .f2-in7{
    background:url('../images/cse9_h.png') no-repeat left top;
/*background-image: url(../img/hIcon.png);*/
}
.f2-in8{
background-position: 0px -61.18px;
}
.filter-active  .f2-in8{
background-image: url(../img/hIcon.png);
}
.f2-in9{
background-position: 0px -130.36px;
}

.filter-active  .f2-in9{
background-image: url(../img/hIcon.png);
}