.portfolioSlider {overflow: visible;}

.portfolioSlider .swiper-slide {transition: .3s linear; position: relative; opacity: 1;}

.portfolioSlider .swiper-slide-active {transform: translateY(-4.6875rem);}
.portfolioSlider .swiper-slide-prev,
.portfolioSlider .swiper-slide-next {transform: translateY(-3.125rem);}
.portfolioSlider .swiper-slide-next +  .swiper-slide,
.portfolioSlider .swiper-slide.on {transform: translateY(-1.5625rem);}
.portfolioSlider .swiper-slide-next + .swiper-slide + .swiper-slide + .swiper-slide,.portfolioSlider .swiper-slide.on3 {transform: translateY(1.5625rem);}

.portfolioSlider .swiper-slide .txt_box {opacity: 0; transition: 0.3s linear; pointer-events: none;}
.portfolioSlider .swiper-slide:hover .txt_box {opacity: 1; pointer-events: auto;}

.portfolioSlider .swiper-slide::after {content: ''; background-color: var(--pointcolor); position: absolute; left: 50%; transform: translateX(-50%) ; top: -1.750rem; width: 0; max-width: 5rem; height: .5rem; transition: .3s linear; }
.portfolioSlider .swiper-slide:hover::after {width: 50%;}


@media (max-width: 500px) {
    .portfolioSlider .swiper-slide-active {transform: translateY(-1.5625rem);}
    .portfolioSlider .swiper-slide:hover .txt_box {opacity: 0; pointer-events: auto;}
    .portfolioSlider .swiper-slide:hover::after {width: 0;}
    .portfolioSlider .swiper-slide-next:after,
    .portfolioSlider .swiper-slide-next:hover:after {width: 50%;}
    .portfolioSlider .swiper-slide-next .txt_box,
    .portfolioSlider .swiper-slide-next:hover .txt_box {opacity: 1; pointer-events: auto;}
}