.content-box {
    position: relative;
}

.swiper-box {
    width: 85.16vw;
    height: 31.25vw;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.swiper {
    width: 215.47vw;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.swiper__item {
    width: 70.83vw;
    height: 100%;
}

.swiper__img {
    width: 49.06vw;
    height: 31.25vw;
    position: absolute;
    right: calc(100% - 49.06vw);
    background-size: cover;
    transition: right .5s linear;
}

.swiper__img--first {
    right: 0;
    opacity: 0;
}

.swiper__img--main {
    background-image: url('/static/home/images/space/1.png');
}

.swiper__img--cafe {
    background-image: url('/static/home/images/space/2.png');
}

.swiper__img--large {
    background-image: url('/static/home/images/space/3.png');
}

.swiper__img--small {
    background-image: url('/static/home/images/space/4.png');
}

.swiper__img--work {
    background-image: url('/static/home/images/space/5.png');
}

.swiper__line {
    width: 100%;
    height: 0.26vw;
    background: black;
    position: absolute;
    bottom: 3.31vw;
    opacity: 0;
}

.swiper-slide {
    overflow: hidden;
}

.swiper__item--main {
    overflow: visible;
}

.swiper-slide-next .swiper__line {
    transition: opacity .3s linear;
    opacity: 1;
}

.article {
    width: 16.93vw;
    position: absolute;
    bottom: 5.63vw;
    right: 3.26vw;
    opacity: 0;
}

.article:not(.article--first) {
    transform: translateX(100px);
    transition: all .5s linear;
}

.article--first {
    width: 27.5vw;
    height: 31.25vw;
    left: -6.61vw;
    top: 0;
    bottom: unset;
    font-size: 1.35vw;
    line-height: 1.98vw;
    font-family: Montserrat-ExtraBold;
    transform: unset;
}

.article h2 {
    font-size: 3.13vw;
    font-family: Montserrat-Black;
    line-height: 2.6vw;
    margin-bottom: 1.61vw;
}

.article h2::after {
    content: attr(data-mintitle);
    font-size: 0.94vw;
    margin-left: 0.52vw;
}

.article p {
    font-size: 0.94vw;
    line-height: 1.3vw;
    font-family: Montserrat-Medium;
}

.article ul {
    margin: 0.83vw 0;
    margin-left: 0.5vw;
}

.article li {
    font-size: 0.94vw;
    line-height: 1.3vw;
    font-family: Montserrat-Medium;
}

.article li::before {
    content: '· ';
    position: absolute;
    left: 0;
}

/* 进度条 */
.progress {
    height: 0.57vw;
    margin: 2.34vw 0 4.48vw 17.15vw;
    display: inline-block;
    position: relative;
    font-size: 0;
}

.progress--hideleft .progress__arrow--left,
.progress--hideright .progress__arrow--right {
    opacity: 0;
    cursor: unset;
}

.progress__arrow--left,
.progress__arrow--right {
    background-image: url("/static/home/images/space/space_arrow.png");
    background-size: 100% 100%;
    width: 1.09vw;
    height: 1.41vw;
    position: absolute;
    top: 50%;
    transform-origin: 50% 50%;
    cursor: pointer;
    transition: opacity .2s linear;
}

.progress__arrow--left {
    left: -3.13vw;
    transform: translateY(-50%) rotate(180deg);
}

.progress__arrow--right {
    right: -2.25vw;
    transform: translateY(-50%);
}

.dots {
    height: 100%;
    width: 0.57vw;
    border-radius: 50%;
    background: black;
    margin-right: 0.94vw;
    display: inline-block;
}

.dots--move {
    background: transparent;
    position: absolute;
    left: 0;
}

.dots__body {
    width: 1.67vw;
    height: 1.72vw;
    background: black;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    position: absolute;
    top: 0.83vw;
    left: 50%;
    transform: translateX(-50%);
}

.swiper-next,
.swiper-pre {
    position: absolute;
    width: 5.68vw;
    height: 100%;
    opacity: 0;
}

.swiper-next {
    right: 0;
}

.swiper-pre {
    left: 0;
}

.swiper-slide-active .swiper__img:not(.swiper__img--main) {
    right: 0;
}

.swiper-slide-next:not(.swiper__item--main) .article {
    transform: translateX(0);
    opacity: 1;
}