@media screen and (max-width:768px) {
    .swiper-box {
        width: 100vw;
        height: 169.87vw;
    }

    .swiper {
        width: 300vw;
    }

    .swiper__img {
        width: 100vw;
        height: 80vw;
        position: unset;
    }

    .article {
        position: relative;
        width: 80.53vw;
        margin: 5.17vw auto 0;
        bottom: unset;
        right: unset;
    }

    .article h2 {
        font-size: 9.33vw;
        line-height: 8vw;
        margin-bottom: 3.2vw;
    }

    .article h2::after {
        font-size: 3.47vw;
        margin-left: 0.52vw;
    }

    .article p {
        font-size: 3.73vw;
        line-height: 4.8vw;
    }

    .article li {
        font-size: 3.73vw;
        line-height: 4.8vw;
        margin-left: 2vw;
    }

    .article--first {
        font-size: 4vw;
        line-height: 5.33vw;
        left: unset;
    }

    .swiper__line {
        right: 0;
        top: 66.93vw;
        width: 90.27vw;
        height: 1.33vw;
    }

    .progress {
        position: absolute;
        top: 54.13vw;
        left: 16.8vw;
        margin: unset;
        height: 1.73vw;
    }

    .progress__arrow--left,
    .progress__arrow--right {
        width: 2.4vw;
        height: 3.33vw;
    }

    .progress__arrow--left {
        left: -6.67vw;
    }

    .progress__arrow--right {
        right: -3.74vw;
    }

    .dots {
        width: 1.73vw;
        height: 1.73vw;
        margin-right: 2.93vw;
    }

    .dots__body {
        width: 4.93vw;
        height: 5.07vw;
        top: 2.53vw;
    }

    .swiper-next,
    .swiper-pre {
        display: none;
    }
}