.article8 {
    position: relative;
    padding-bottom: 0;
}

.article8 .article-wrapper {
    width: 100%;
    z-index: 12;
}

.a8Swiper {
    width: 100%;
}

.a8Swiper .swiper-wrapper {
    padding-bottom: 40px;
}

.a8Swiper .swiper-slide {
    position: relative;
    height: 500px;
    padding: 50px;
    display: flex;
    align-items: flex-end;
    border-radius: 30px;
    transition: all .7s;
    overflow: hidden;
    filter: grayscale(1) brightness(80%);
}

.a8Swiper .swiper-slide::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, #000000b6 0%, transparent 100%);
}

.a8Swiper .ss-1 {
    background: url(../images/a8-1.jpg) no-repeat;
    background-size: cover;
}
.a8Swiper .ss-2 {
    background: url(../images/a8-2.jpg) no-repeat;
    background-size: cover;
}
.a8Swiper .ss-3 {
    background: url(../images/a8-3.jpg) no-repeat;
    background-size: cover;
}
.a8Swiper .ss-4 {
    background: url(../images/a8-4.jpg) no-repeat;
    background-size: cover;
}
.a8Swiper .ss-5 {
    background: url(../images/a8-5.jpg) no-repeat;
    background-size: cover;
}
.a8Swiper .ss-6 {
    background: url(../images/a8-6.jpg) no-repeat;
    background-size: cover;
}

.a8Swiper .ss-text {
    margin-bottom: 20px;
    opacity: 0;
    transition: all .7s;
    z-index: 10;
}

.a8Swiper .swiper-slide-active {
    filter: grayscale(0) brightness(100%);
}

.a8Swiper .swiper-slide-active .ss-text {
    transition-delay: .5s;
    margin-bottom: 0;
    opacity: 1;
}

.a8-sns-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.a8-sns {
    border-radius: 100%;
    transition: all .3s;
}

.a8-sns:hover {
    background-color: rgba(255, 255, 255, .1);
}


/*==================================================*/
@media (max-width: 1350px) {
    .article8 .article-wrapper {
        padding: 0;
    }
}



@media (max-width: 650px) {
    .article8 .article-wrapper {
        padding: 0 20px;
    }

    .a8Swiper .swiper-slide {
        height: 450px;
        padding: 30px;
        transition: all .5s;
    }

    .a8Swiper .swiper-slide-active .ss-text {
        transition-delay: .2s;
        margin-bottom: 0;
        opacity: 1;
    }

    .a8-sns-wrapper {
        width: 90%;
        margin-top: 4rem;
    }
}


@media (max-width: 450px) {
    .a8-sns-wrapper {
        width: 80%;
        gap: 1rem;
        margin-top: 3rem;
    }
}