@media screen and (max-width: 1200px) {
    .backImg {
        height: 1000rem !important; /* Remove height property when width is less than 1200px */
    }
}
@media screen and (min-width: 1200px) {
    .backImg {
        height: 100% !important; /* Set height to 100% when width is greater than or equal to 1200px */
    }
}
.backImg{
}
.backImg img{
    width: 100%;
    height: 100%;
}
.backImg .text{
    position: relative;
    left: 75rem;
    top: -650rem;
    width: 595rem;
    height: 200rem;
    opacity: 1;
    font-size: 80rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 100rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;

}
.backImg .text-detail{
    position: relative;
    left: 75rem;
    top: -615rem;
    width: 540rem;
    height: 56rem;
    opacity: 0.8;
    /** 文本1 */
    font-size: 18rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 28rem;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;

}
.example-title{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    top: -140rem;
    z-index: 4;
    width: 1280rem;
    margin: auto;
}
.example-title .title-one{
    width: 290rem;
    height: 316rem;
    opacity: 0;
    border-radius: 10rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0rem 10rem 40rem rgba(230, 230, 230, 0.5);
    backdrop-filter: blur(60rem);

}
.example-title .title-two{
    width: 290rem;
    height: 316rem;
    opacity: 0;
    border-radius: 10rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0rem 10rem 40rem rgba(230, 230, 230, 0.5);
    backdrop-filter: blur(60rem);

}
.example-title .title-three{
    width: 290rem;
    height: 316rem;
    opacity: 0;
    border-radius: 10rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0rem 10rem 40rem rgba(230, 230, 230, 0.5);
    backdrop-filter: blur(60rem);

}
.example-title .title-four{
    width: 290rem;
    height: 316rem;
    opacity: 0;
    border-radius: 10rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0rem 10rem 40rem rgba(230, 230, 230, 0.5);
    backdrop-filter: blur(60rem);

}
.example-title .title-one .top-img{
    width: 90rem;
    height: 80rem;
    opacity: 1;
    margin: auto;
    padding-top: 30rem;

}
.example-title .title-one .top-img img{
width: 100%;
    height: 100%;
}
.example-title .title-one .text-p{
    font-size: 22rem;
    font-weight: 500;
    letter-spacing: 0rem;
    line-height: 28rem;
    color: rgba(0, 0, 0, 1);
    vertical-align: top;
    text-align: center;
    padding-top: 30rem;
}
.example-title .title-one .text-span{
    opacity: 0.6;
    font-size: 16rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 22rem;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    vertical-align: top;
    display: block;
    margin: 10rem;
}


.example-title .title-two .top-img{
    width: 90rem;
    height: 80rem;
    opacity: 1;
    margin: auto;
    padding-top: 30rem;

}
.example-title .title-two .top-img img{
    width: 100%;
    height: 100%;
}
.example-title .title-two .text-p{
    font-size: 22rem;
    font-weight: 500;
    letter-spacing: 0rem;
    line-height: 28rem;
    color: rgba(0, 0, 0, 1);
    vertical-align: top;
    text-align: center;
    padding-top: 30rem;
}
.example-title .title-two .text-span{
    opacity: 0.6;
    font-size: 16rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 22rem;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    vertical-align: top;
    display: block;
    margin: 10rem;
}





.example-title .title-three .top-img{
    width: 90rem;
    height: 80rem;
    opacity: 1;
    margin: auto;
    padding-top: 30rem;

}
.example-title .title-three .top-img img{
    width: 100%;
    height: 100%;
}
.example-title .title-three .text-p{
    font-size: 22rem;
    font-weight: 500;
    letter-spacing: 0rem;
    line-height: 28rem;
    color: rgba(0, 0, 0, 1);
    vertical-align: top;
    text-align: center;
    padding-top: 30rem;
}
.example-title .title-three .text-span{
    opacity: 0.6;
    font-size: 16rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 22rem;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    vertical-align: top;
    display: block;
    margin: 10rem;
}


.example-title .title-four .top-img{
    width: 90rem;
    height: 80rem;
    opacity: 1;
    margin: auto;
    padding-top: 30rem;

}
.example-title .title-four .top-img img{
    width: 100%;
    height: 100%;
}
.example-title .title-four .text-p{
    font-size: 22rem;
    font-weight: 500;
    letter-spacing: 0rem;
    line-height: 28rem;
    color: rgba(0, 0, 0, 1);
    vertical-align: top;
    text-align: center;
    padding-top: 30rem;
}
.example-title .title-four .text-span{
    opacity: 0.6;
    font-size: 16rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 22rem;
    color: rgba(0, 0, 0, 1);
    text-align: center;
    vertical-align: top;
    display: block;
    margin: 10rem;
}

.basic-text{
}
.basic-text .text{
    opacity: 1;
    font-size: 44rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 59rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    text-align: center;
}

.example-second{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    opacity: 0;
    margin-top: 100rem;
}
.example-second.animated{
    opacity: 1;
}
.example-second .left{

}
.example-second .right{
}
.example-second .left img{
    width: 911.19rem;
    height: 598.64rem;
    opacity: 1;
    border-radius: 10px;
}
.example-second .right .title{
    opacity: 1;
    /** 文本1 */
    font-size: 44rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 59rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;

}
.example-second .right .explain{
    width: 389.48rem;
    height: 24.78rem;
    opacity: 1;
    /** 文本1 */
    font-size: 18rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 10rem;
    font-family: math;

}
.example-second .right .line{
    width: 62.32rem;
    height: 1.03rem;
    opacity: 1;
    background: rgba(196, 196, 196, 1);
    margin-top: 32rem;

}
.example-second .right .text{
    width: 485rem;
    height: 195rem;
    opacity: 0.6;
    /** 文本1 */
    font-size: 22rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 44rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 40rem;
}
.example-second .right .more{
    width: 126.71rem;
    height: 49.56rem;
    display: flex;
    opacity: 1;
    border-radius: 50rem;
    background: rgba(34, 144, 255, 1);
    justify-content: center;
    align-items: center;
    margin-top: 190rem;
}
.example-second .right .more .more-text{
    font-size: 22rem;

}



.example-third{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
    margin-top: 100rem;
}
.example-third.animated{
    opacity: 1;
}
.example-third .left .title{
    height: 60.91rem;
    opacity: 1;
    /** 文本1 */
    font-size: 44rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 59rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;

}
.example-third .left .explain{
    opacity: 1;
    /** 文本1 */
    font-size: 18rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 10rem;
    font-family: math;

}
.example-third .left .line{
    width: 62.32rem;
    height: 1.03rem;
    opacity: 1;
    background: rgba(196, 196, 196, 1);
    margin-top: 32rem;

}
.example-third .left .text{
    width: 485rem;
    height: 195rem;
    opacity: 0.6;
    /** 文本1 */
    font-size: 22rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 44rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 40rem;
}
.example-third .left .more{
    width: 126.71rem;
    height: 49.56rem;
    display: flex;
    opacity: 1;
    border-radius: 50rem;
    background: rgba(34, 144, 255, 1);
    justify-content: center;
    align-items: center;
    margin-top: 240rem;
}
.example-third .left .more .more-text{
    font-size: 22rem;

}

.example-third .right img{
    height: 643.71rem;
    opacity: 1;
    border-radius: 10px;
}



.example-four{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 200rem;
    opacity: 0;
    margin-top: 100rem;
}
.example-four.animated{
    opacity: 1;
}
.example-four .left{

}
.example-four .right{
}
.example-four .left img{
    width: 911.19rem;
    height: 598.64rem;
    opacity: 1
}
.example-four .right .title{
    opacity: 1;
    /** 文本1 */
    font-size: 44rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 59rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;

}
.example-four .right .explain{
    width: 389.48rem;
    height: 24.78rem;
    opacity: 1;
    /** 文本1 */
    font-size: 18rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 24rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 10rem;
    font-family: math;

}
.example-four .right .line{
    width: 62.32rem;
    height: 1.03rem;
    opacity: 1;
    background: rgba(196, 196, 196, 1);
    margin-top: 32rem;

}
.example-four .right .text{
    width: 485rem;
    height: 195rem;
    opacity: 0.6;
    /** 文本1 */
    font-size: 22rem;
    font-weight: 400;
    letter-spacing: 0rem;
    line-height: 44rem;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 40rem;
}
.example-four .right .more{
    width: 126.71rem;
    height: 49.56rem;
    display: flex;
    opacity: 1;
    border-radius: 50rem;
    background: rgba(34, 144, 255, 1);
    justify-content: center;
    align-items: center;
    margin-top: 240rem;
}
.example-four .right .more .more-text{
    font-size: 22rem;

}

.and-more{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30rem;
    margin-bottom: 30rem;
}
.and-more .line-one{
    width: 610rem;
    opacity: 1;
    border: 1rem solid rgba(128, 128, 128, 1);


}
.and-more .line-two{
    width: 610rem;
    opacity: 1;
    border: 1rem solid rgba(128, 128, 128, 1);
}
.and-more .text{
    font-size: 40rem;
    font-weight: 400;
    width: 184rem;
    line-height: 57.92rem;
    color: rgba(128, 128, 128, 1);
    text-align: left;
    vertical-align: top;
    padding: 0 20rem;

}
@keyframes moveLeftToRight {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes moveRightToLeft {
    from {
        transform: translateX(15%);
    }
    to {
        transform: translateX(0);
    }
}
.animated {
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.animated .left{
    animation: moveLeftToRight 1s forwards;
}

.animated .right{
    animation: moveRightToLeft 1s forwards;
}