.feat-swiper{
    max-width: 1100px;
    margin: 80px auto 0;
    height: 360px;
}
.feat-swiper .feat-list{
    gap: 20px;
    justify-content: center;
}
.feat-swiper .feat-list .swiper-slide{
    position: relative;
    width: calc((100% - 60px)/4);
    border-radius: 20px;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: none;
    transition: transform .5s ease-in-out;
}
.feat-swiper .swiper-slide[data-name="패파 상품 라인업"]{
    background: url('/wp-content/themes/fastfive/assets/images/feat/feat-card1.png') no-repeat center;
    background-size: cover;
}
.feat-swiper .swiper-slide[data-name="가까운 오피스 찾기"]{
    background: url('/wp-content/themes/fastfive/assets/images/feat/feat-card2.png') no-repeat center;
    background-size: cover;
}
.feat-swiper .swiper-slide[data-name="맞춤 견적 받기"]{
    background: url('/wp-content/themes/fastfive/assets/images/feat/feat-card3.png') no-repeat center;
    background-size: cover;
}
.feat-swiper .swiper-slide a{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}
.feat-swiper .swiper-slide a::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.feat-swiper .swiper-slide[data-name="패파 상품 라인업"] a:hover:after{
  background: url('/wp-content/themes/fastfive/assets/images/feat/img_card_hover1.png') no-repeat center;
  background-size: cover;
}
.feat-swiper .swiper-slide[data-name="가까운 오피스 찾기"] a:hover:after{
  background: url('/wp-content/themes/fastfive/assets/images/feat/img_card_hover2.png') no-repeat center;
  background-size: cover;
}
.feat-swiper .swiper-slide[data-name="맞춤 견적 받기"] a:hover:after{
  background: url('/wp-content/themes/fastfive/assets/images/feat/img_card_hover3.png') no-repeat center;
  background-size: cover;
}
.feat-swiper .swiper-slide:hover{
    transform:translateY(-5%);
}
.feat-swiper .swiper-slide .txt-box{
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
}
.feat-swiper .swiper-slide .tit{
    font-size: 20px;
    line-height: 1.7;
    font-weight: 700;
    color: #222;
}
.feat-swiper .swiper-slide.color-white .arrow-card{
    fill:#fff
}
.feat-swiper .swiper-slide.color-white .tit{
    color: #fff;
}
.sec-feat .swiper-pagination-num{
    display: none;
}
@media (max-width: 960px){
    .feat-swiper{
        margin-top: 40px;
        position: relative;
    }
    .feat-swiper .feat-list{
        gap:0;
        justify-content: flex-start;
    }
    .feat-swiper.swiper-container-horizontal>.swiper-pagination-progressbar,
    .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal {
        width: calc(100% - 80px);
        height: 2px;
        left: auto;
        right: 20px;
        top: auto;
        bottom: -32px;
        background-color: rgba(109, 117, 124, 0.30);
    }
    .sec-feat .swiper-pagination-fraction {
        width: auto;
        color: #000;
        display: inline-block;
        position: absolute;
        bottom: -46px;
        left: 0;
    }
    .feat-swiper .feat-list .swiper-slide {
        width: 260px;
        margin-right: 20px;
    }
    .feat-swiper .swiper-slide a:after{
        background: rgba(0,0,0,0.4);
        z-index: 2;
    }
    .feat-swiper .swiper-slide-active a:after{
        background: none;
    }
    .feat-swiper .swiper-slide:hover{
        transform: translateY(0);
    }
    .sec-feat .feat-swiper .swiper-slide a:hover:after{
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
        background: rgba(0,0,0,0.4);
    }

    .sec-feat .feat-swiper .swiper-slide-active a:hover:after{
        background: none;
    }
    .sec-feat .swiper-pagination-num{
        display: inline-block;
        color: rgba(109, 117, 124, 0.3);
    }
    .sec-feat .swiper-pagination-num .swiper-pagination-current{
        margin-right: 2px;
        color: #6D757C;
    }
    .sec-feat .swiper-pagination-num .swiper-pagination-total{
        margin-left: 2px;
    }
    .feat-swiper .swiper-slide .txt-box{
        justify-content: flex-start;
        align-items: flex-end;
    }
    .feat-swiper .swiper-slide .tit{
        font-size: 18px;
    }
    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
        background: #6D757C;
    }
}