.body .sitePage {
    position: relative;
    padding-top: 15vw
}

.body .sitePage .text {
    position: absolute;
    left: 5em;
    top: 15vw;
    z-index: 10
}

.body .sitePage .text .title {
    font-size: 4.5vw;
    text-transform: capitalize;
    font-family: "PingFang SC", "Calibri", "opensans", "GothicArial", "Arial", "Microsoft YaHei", "San Francisco", 'Hiragino Sans GB', "Helvetica Neue";
    font-weight: 600
}

.body .sitePage .text .title span {
    display: inline-block;
    position: relative
}

.body .sitePage .text .title span::after {
    content: '';
    display: block;
    background: #C9FF85;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 40%;
    width: 100%;
    opacity: .8;
    z-index: -1
}

.body .sitePage .text .des {
    color: #000;
    font-size: .9vw;
    font-weight: 300;
    width: 26vw;
    margin: 1vw 0;
    line-height: 1.6
}

.body .sitePage .sleaf {
    position: absolute;
    right: 5%;
    top: 70%
}

.body .sitePage .sleaf img {
    max-width: 100%
}

.body .project {
    width: 100%;
    margin-bottom: 5vw;
    position: relative
}

.body .project .item {
    position: relative
}

.body .project .item .box1 {
    width: 70vw;
    margin: 0 auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 5vw;
    position: relative
}

.body .project .item .box1 .t1 {
    color: #000;
    font-size: 1.8vw;
    font-weight: 600;
    transition: all 600ms
}

.body .project .item .box1 .t2 {
    color: #000;
    font-size: 1vw;
    font-weight: 300;
    margin: 1vw 0;
    transition: all 600ms
}

.body .project .item .box1 .tags {
    display: flex;
    flex-wrap: wrap;
}

.body .project .item .box1 .tags .tg {
    display: inline-block;
    border-radius: 50px;
    border: 1px solid #C9FF85;
    background: #C9FF85;
    color: #000;
    font-size: .9vw;
    padding: 4px 25px 3px 25px;
    text-align: center;
    margin-right: 0.6vw;
}

.body .project .item .box1 .way {
    margin-top: 3vw
}

.body .project .item .box1 .way .t3 {
    color: #000;
    font-size: 1vw;
    font-weight: 600;
    transition: all 600ms
}

.body .project .item .box1 .way .txt {
    margin-top: 1vw
}

.body .project .item .box1 .way .txt p {
    color: #000;
    font-size: .9vw;
    font-weight: 300;
    transition: all 600ms
}

.body .project .item .box1 .rt {
    position: absolute;
    right: 5vw;
    bottom: 5vw;
    width: 30%
}

.body .project .item .box1 .rt .dt {
    display: flex;
    align-items: center
}

.body .project .item .box1 .rt .dt span {
    width: 8px;
    height: 8px;
    background-color: #000;
    border-radius: 50%;
    transition: all 600ms
}

.body .project .item .box1 .rt .dt p {
    margin-left: 1vw;
    color: #000;
    font-size: 1vw;
    font-weight: 300;
    transition: all 600ms
}

.body .project .item .box2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: all 600ms
}

.body .project .item .box2 img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.body .project .active-Item .box1 .t1,
.body .project .active-Item .box1 .t2,
.body .project .active-Item .box1 .t3 {
    color: white
}

.body .project .active-Item .box1 .way .txt p {
    color: white
}

.body .project .active-Item .box1 .way .t3 {
    color: white
}

.body .project .active-Item .box1 .rt .dt span {
    background-color: #fff
}

.body .project .active-Item .box1 .rt .dt p {
    color: #fff
}

.body .project .active-Item .box2 {
    opacity: 1
}

@media screen and (max-width: 1024px) {
    .body .sitePage .text {
        left: 5%;
        width: 90%;
        top: 80px
    }

    .body .sitePage .text .title {
        font-size: 32px
    }

    .body .sitePage .text .des {
        font-size: 16px;
        width: 100%
    }

    .body .project .item .box1 {
        width: 100%;
        padding: 60px 30px
    }

    .body .project .item .box1 .t1 {
        color: white;
        font-size: 24px
    }

    .body .project .item .box1 .t2 {
        font-size: 16px;
        color: white;
        margin: 15px 0;
        line-height: 1.6
    }

    .body .project .item .box1 .tags .tg {
        font-size: 16px;
        padding: 5px 25px;
        margin-bottom: 10px;
    }

    .body .project .item .box1 .way {
        margin-top: 20px
    }

    .body .project .item .box1 .way .t3 {
        font-size: 16px;
        color: white
    }

    .body .project .item .box1 .way .txt {
        margin-top: 10px
    }

    .body .project .item .box1 .way .txt p {
        font-size: 16px;
        color: white
    }

    .body .project .item .box1 .rt {
        position: static;
        margin-top: 15px;
        width: 100%
    }

    .body .project .item .box1 .rt .dt span {
        background-color: white
    }

    .body .project .item .box1 .rt .dt p {
        font-size: 16px;
        color: white
    }

    .body .project .item .box2 {
        opacity: 1
    }
}

@media screen and (max-width: 700px) {
    .body .CardText-text.on {
        opacity: 1 !important
    }

    .body .sitePage .text {
        left: 5%;
        width: 90%;
        top: 80px
    }

    .body .sitePage .text .title {
        font-size: 32px
    }

    .body .sitePage .text .des {
        font-size: 16px;
        width: 100%
    }

    .body .project .item .box1 {
        width: 100%;
        padding: 60px 30px
    }

    .body .project .item .box1 .t1 {
        color: white;
        font-size: 24px
    }

    .body .project .item .box1 .t2 {
        font-size: 16px;
        color: white;
        margin: 15px 0;
        line-height: 1.6
    }

    .body .project .item .box1 .tags .tg {
        font-size: 16px;
        padding: 5px 25px
    }

    .body .project .item .box1 .way {
        margin-top: 20px
    }

    .body .project .item .box1 .way .t3 {
        font-size: 16px;
        color: white
    }

    .body .project .item .box1 .way .txt {
        margin-top: 10px
    }

    .body .project .item .box1 .way .txt p {
        font-size: 16px;
        color: white
    }

    .body .project .item .box1 .rt {
        position: static;
        margin-top: 15px;
        width: 100%
    }

    .body .project .item .box1 .rt .dt span {
        background-color: white
    }

    .body .project .item .box1 .rt .dt p {
        font-size: 16px;
        color: white
    }

    .body .project .item .box2 {
        opacity: 1
    }
}