body{
    background-color: #eef1e9;
}

section{
    position: relative;
}

.font-display {
    font-family: 'Playfair Display', serif;
}

.font-body {
    font-family: 'Chivo', sans-serif;
}

.tp-dfwv {
    z-index: 2;
}

.ls-logo{
    z-index: 1000;
}

#app {
    height: 100vh;
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
}

#app canvas {
    height: 100%;
    position: absolute;
    width: 100%;
}

#slides {
    align-self: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    /* mix-blend-mode: difference; */
    padding: 0 60px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    color: #fff;
    text-shadow: 0 0 1px #000;
    /* mix-blend-mode: difference; */
}

.main-desc{
    text-align: start;
    text-indent: 2em;
    background-color: rgba(70, 71, 70, 0.45);
    border-radius: 25px;
    /* background-color: red; */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

@media (min-width: 1024px) {
    #slides {
        padding: 0 100px;
    }
}

.slide {
    align-items: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.slide__title {
    font-size: 34px;
    line-height: 0.7;
    margin-bottom: 0.85em;
}

@media (min-width: 1024px) {
    .slide__title {
        font-size: 80px;
        line-height: 1;
        margin-bottom: 0.25em;
    }
}

.slide__subtitle {
    letter-spacing: 0.1em;
}

@media (min-width: 1024px) {
    .slide__subtitle {
        font-size: 22px;
    }
}

.slide:not([data-current]) {
    display: none;
}

/* other */
#top2::before {
    content: '已落地项目';
}
#top1::before {
    content: '合作模式';
}

.stat-box-wrapper,
.stat-box{
    z-index: 1000;
}

.main-container{
    z-index: 0;
}

.stat-drop-wrapper {
    z-index: 10;
}

.slide__subtitle .main-desc{
    white-space: normal;
}

/* article */
#art-wrapper {
    --i: var(--wide, 1);
    --j: calc(1 - var(--i));
    overflow-x: hidden;
    height: 100%;
    position: relative;
    font: 400 1em/ 1.25 koho, trebuchet ms, verdana, century gothic, arial, sans-serif;
    z-index: 2;
}

#art-behind{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
}
.art-ball:nth-child(1){
    position: absolute;
    top: 105px;
    left: 10px;
    width: 15vmin;
    height: 15vmin;
    background: green;
    border-radius: 100%;
}
.art-ball:nth-child(2){
    position: absolute;
    right: 15px;
    top: 350px;
    width: 20vmin;
    height: 20vmin;
    border-radius: 100%;
    background: rgb(187, 236, 50);
}

.art-ball:nth-child(3){
    position: absolute;
    left: calc(50vw - 25vmin);
    top: 600px;
    width: 20vmin;
    height: 20vmin;
    border-radius: 100%;
    background: rgb(187, 236, 50);
}


@media (max-width: 39em) {
    #art-wrapper {
        --wide: 0;
    }
}

@media (max-width: 15em) {
    #art-wrapper {
        font-size: .75em;
    }
}

#art-wrapper article {
    --p: var(--parity, 1);
    --q: calc(1 - var(--p));
    --s: calc(1 - 2*var(--p));
    display: grid;
    grid-template: calc(var(--j)*2.5em) 5em 1fr/calc(var(--i)*(var(--q)*13.5em + var(--p)*5em) + var(--j)*3.5em) 1fr calc(var(--i)*(var(--p)*13.5em + var(--q)*5em) + var(--j)*3.5em);
    overflow: hidden;
    margin: 1em auto;
    max-width: 39em;
    min-height: 10em;
    border-radius: calc(var(--i)*10em);
    /* box-shadow: 15px 15px 17px rgba(0, 0, 0, 0.25); */
    /* background: linear-gradient(#f0f0f0, #fafafa 5em, #eaeaea 0, #dadada) 0 100% / 100% calc(100% - var(--j)*2.5em); */
    background-color: rgba(70, 71, 70, 0.45);
    counter-increment: idx;
}

#art-wrapper article:before,
#art-wrapper article :after {
    --m: 0;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.65);
    transform-origin: calc(var(--p)*100%) calc((1 - var(--m))*100%);
    transform: skewx(calc(var(--i)*var(--s)*(1 - 2*var(--m))*27deg));
    background: linear-gradient(calc(var(--s)*(1 - 2*var(--m))*90deg), HSL(var(--hsl0)), HSL(var(--hsl1)));
    content: '';
}

#art-wrapper article:before,
#art-wrapper article h3 {
    grid-row: 1/calc(2 + 2*var(--i));
    grid-column: calc(1 + 2*var(--i)*var(--p))/span calc(1 + 2*var(--j));
}

#art-wrapper article:after {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 2/ 3;
    grid-column: calc(3 - 2*var(--i)*var(--p))/span 1;
    font-size: calc(var(--i)*1.5625em + var(--j)*1.75em);
    content: attr(data-icon);
}

#art-wrapper article:nth-of-type(odd) {
    --parity: 0;
}

#art-wrapper h3 {
    display: grid;
    grid-template: repeat(calc(var(--i) + 1), 2em)/repeat(calc(var(--j) + 1), 3.5em);
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: calc(var(--i)*1.75em) calc(var(--i)*var(--q)*2.05em) 0 calc(var(--i)*var(--p)*2.05em);
    color: #fff;
    font-size: 1.25em;
    font-weight: 400;
    text-transform: uppercase;
}

#art-wrapper h3:before {
    font-size: calc(var(--i)*1.5em + 1em);
    font-weight: 500;
    content: var(--c);
    /* content: counter(idx, decimal-leading-zero); */
}

#art-wrapper h3:after {
    --m: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

#art-wrapper h4,
#art-wrapper p {
    padding: var(--pv, 0) calc(var(--i)*1.75rem + var(--j)*2vw);
}

#art-wrapper h4 {
    grid-row: 2/ 3;
    grid-column: calc(1 + var(--i))/3;
    align-self: self-end;
    color: HSL(var(--hsl1));
    font-size: 1.75em;
    font-weight: 900;
    text-transform: uppercase;
}

#art-wrapper h4:before {
    white-space: pre;
    font-weight: 500;
    /* content: '小标题\A'; */
}

#art-wrapper p {
    --pv: .5em;
    /* grid-row: 1/4; */
    grid-column: calc(1 + var(--i))/calc(3 + var(--j));
}

#art-wrapper p:before {
    display: block;
    margin-bottom: .5em;
    width: 0.75em;
    height: 0.75em;
    box-shadow: 1.5em 0 HSLa(var(--hsl1), 0.8), 3em 0 HSLa(var(--hsl1), 0.6), 4.5em 0 HSLa(var(--hsl1), 0.4), 6em 0 HSLa(var(--hsl1), 0.2);
    background: HSL(var(--hsl1));
    border-radius: 50%;
    content: '';
}

@media screen and (max-width: 619px) {
    .slide__subtitle .main-desc{
        width: 320px;
        text-indent: 1.5em;
        white-space: normal;
        height: auto;
        max-height: 420px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 5px;
    }

    .mainer .main-left{
        /* margin-top: 127.5px; */
        padding-top: 45px;
    }
}