.project{
    padding-top: 190rem;
}
.project .title{
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 67rem;
    color: #000000;
    line-height: 78rem;
    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 .classify{
    gap: 10rem;
    display: flex;
    justify-content: center;

    margin-top: 30rem;

    opacity: 0;
    transform: translateY(50rem);
    animation: 1s title 2s both;
}
.project .classify span,
.project .classify a{
    display: block;
    width: fit-content;
    height: 38rem;
    border: 1rem solid #000;
    border-radius: 19rem;
    padding: 0 30rem;
    font-weight: 300;
    font-size: 18.23rem;
    line-height: 38rem;
    text-align: center;
}
.project .classify .back{
    display: flex;
    align-items: center;
    gap: 20rem;
    padding-right: 5rem;
}
.project .classify .back::after{
    display: block;
    content: '';
    width: 28rem;
    height: 28rem;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAVhJREFUeAG1l41xgzAMRpVOwAgeIRsUNmADvAHdAG9ANzAbtBvQTkA3MBvQDVyJmDtKe4kk4Lt7Fy4X5Vm2+bsALznynD5NgvKNjMgX8om8p+92JUd6JDKZEL8alChGKNsSEAuCXFNRPICGIzRwm6J4IP6R8KgO2R37k4QL+VZoTxYS/VY6aP+sqqpYlqW426tWWNd1pHRdJ+7WaYRN08xC55ykjs6MDEBxEVAKf01xkBS1bbtHSFiQFHjvZ6G1ViuMaTl5PzbGxGmaYgghZlm2S/oEzFvROI5QFMV83Pc94CBAmdkXJCOljqlbgo4ltYmSpJ20cKfYkNQqRqsVh2WO6WRV3c5oQw3DEHGN2ZsIVnEa6SIW7Gazlqq7FeDgn7ycKAxwJ68nCQ08yJFiWrIrMOMOELI63MaA7kFtSoPOYEfosvUGvM4cR3YBWXL4+y5DfMDtnYaVH6DgpUJJ9BKiAAAAAElFTkSuQmCC");
    background-size: contain;
    background-repeat: no-repeat;
}
.project .tag{
    width: 900rem;
    gap: 10rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin-top: 80rem;
    margin-left: auto;
    margin-right: auto;

    opacity: 0;
    transform: translateY(50rem);
    animation: 1s title 3s both;
}
.project .tag span,
.project .tag a{
    display: block;
    width: fit-content;
    height: 38rem;
    border: 1rem solid #000;
    border-radius: 8rem;
    padding: 0 18rem;
    font-weight: 300;
    font-size: 18.23rem;
    line-height: 38rem;
    text-align: center;
}
.project .cover{
    width: 1595rem;
    height: 898rem;
    margin: 88rem auto 0;
    /*display: flex;*/
    /*justify-content: center;*/
}
.project .text{
    width: 570rem;
    margin-top: 98rem;
    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 .name{
    font-size: 36rem;
    line-height: 56rem;
    margin-bottom: 50rem;
}
.project .cover-big{
    width: 100%;
    margin-top: 220rem;
    text-align: center;
}
.project .cover-right{
    margin-top: 200rem;
    display: flex;
    justify-content: flex-end;
    padding: 0 165rem;
}
.project .cover-center{
    margin-top: 200rem;
    display: flex;
    justify-content: center;
}
.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));
}
.project .cover-swiper{
    position: relative;
}
.project .cover-swiper .swiper-pagination{
    position: unset;
    width: fit-content;
    margin: 50rem auto;
}
.project .swiper{
    margin-left: unset;
    margin-right: unset;
}
.project .swiper img{
    width: 100%;
}
.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;
    }
}