.project{
    padding-top: 190rem;
}
.project .title{
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 67rem;
    color: #000000;
    line-height: 100%;
    text-align: center;

    opacity: 0;
    transform: translateY(50rem);
    animation: 1s title 1s both;
}
.project .stitle{
    font-size: 36rem;
    line-height: 100%;
    text-align: center;

    opacity: 0;
    transform: translateY(50rem);
    animation: 1s title 1.5s both;
    margin-top: 20rem;
}
@keyframes title {
    100%{ transform:translateY(0); opacity: 1 }
}
.project .tag{
    gap: 5rem;
    display: flex;
    justify-content: center;

    margin-top: 110rem;

    opacity: 0;
    transform: translateY(50rem);
    animation: 1s title 2s both;
}
.project .tag span{
    display: block;
    width: 159rem;
    height: 38rem;
    border: 1rem solid #000;
    font-weight: 300;
    font-size: 18.23rem;
    line-height: 38rem;
    text-align: center;
}
.project .cover{
    width: 1595rem;
    height: 898rem;
    margin: 100rem auto 0;
}
.project .text{
    width: 570rem;
    margin-top: 215rem;
    padding: 0 165rem;
}
.project .text .name{
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 22rem;
    color: #7C7C7C;
    line-height: 34.34rem;
}
.project .text .txt{
    font-family: PingFangSC, PingFang SC;
    font-weight: 300;
    font-size: 22rem;
    color: #000000;
    line-height: 34.34rem;
    /*text-align: justify;*/
    hyphens: auto;
    margin-top: 50rem;
}
.en .project .text .name,
.en .project .text .txt{
    font-size: 20rem;
    line-height: 1.56;
}
.project .cover-big{
    width: 100%;
    margin-top: 220rem;
}
.project .cover-right{
    margin-top: 200rem;
    display: flex;
    justify-content: flex-end;
    padding: 0 165rem;
}
.project .cover-left{
    margin-top: 200rem;
    padding: 0 165rem;
}
.project .cover-left img,
.project .cover-right img{
    width: 1000rem
}
.project .next{
    width: 100%;
    height: 200vh;
    position: relative;
}
.project .next .wrap{
    position: sticky;
    top: 0;
    left: 0;

    padding: 200rem 200rem 0;
    box-sizing: border-box;
}
.project .next .name{
    font-family: PingFangSC, PingFang SC;
    font-weight: 300;
    font-size: 28rem;
    color: #000000;
    line-height: 26.34rem;
    text-align: center;
}
.project .next .title{
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 67rem;
    color: #000000;
    line-height: 100%;
    text-align: center;

}
.project .next .stitle{
    font-size: 36rem;
    line-height: 100%;
    text-align: center;
}
.project .next .next-cover{
    width: 1000rem;
    margin: 105rem auto 0;
}
.project .next .progress{
    width: fit-content;
    margin: 110rem auto;
    position: relative;
}
.project .next .progress::before{
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-64rem - 420rem);
    width: 420rem;
    height: 2rem;
    background: -webkit-gradient(linear, right top, left top, from(#000), to(#e1e1e1));
    background: linear-gradient(270deg, #000 var(--progress), #e1e1e1 var(--progress));
}
.project .next .progress::after{
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-64rem - 420rem);
    width: 420rem;
    height: 2rem;
    background: -webkit-gradient(linear,  left top, right top,from(#000), to(#e1e1e1));
    background: linear-gradient(90deg, #000 var(--progress), #e1e1e1 var(--progress));
}
.next.to .name,
.next.to .progress{
    opacity: 0;
}
.next.to .next-cover{
    animation: next 1s both;
}
@keyframes next {
    70%{ transform: scale(1.595);}
    100%{ transform: scale(1.595) translateY(103rem); }
}

@media screen and (max-width: 767px) {
    .project .title{
        font-weight: 500;
        font-size: 64rem;
        color: #000000;
        line-height: 61.81rem;
    }
    .project .text {
        width: 570rem;
        margin-top: 140rem;
        padding: 0 45rem;
    }
    .project .cover{
        width: 750rem;
        height: 419rem;
        margin-top: 130rem;
    }
    .project .text .name{
        font-weight: 500;
        font-size: 24rem;
        color: #A5A5A5;
        line-height: 32.13rem;
    }
    .project .text .txt{
        font-size: 18rem;
        color: #000000;
        line-height: 32.13rem;
    }
    .project .cover-big{
        margin-top: 90rem;
    }
    .project .cover-right{
        margin-top: 110rem;
        padding: 0 45rem;
    }
    .project .cover-left{
        margin-top: 110rem;
        padding: 0 45rem;
    }
    .project .cover-left img,
    .project .cover-right img{
        width: 460rem
    }
    .project .next {
        height: fit-content;
    }
    .project .next .wrap{
        padding: 200rem 45rem;
    }
    .project .next .next-cover {
        width: 100%;
        margin: 105rem auto 0;
    }
}