/* 基础布局重置 */
html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* 禁用默认滚动 */
    width: 100%;
    height: 100%;
}

/* 滚动容器 */
.screen-container {
    position: relative;
    /*height: calc(100vh - 60px);*/
    height: 100vh;
    /* 修正高度计算 */
    /* padding-top: 68px; */
    overflow-y: auto;
    /* scroll-behavior: smooth; */
    scroll-snap-type: y mandatory;

    overscroll-behavior: contain;
}

/* 单屏通用样式 */
.screen-section {
    position: relative;
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* 增加强制对齐 */
}

.banner {
    position: relative;
}

.banner-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 168px;
    text-align: center;
}

.content-title {
    font-weight: 700;
    font-size: 36px;
    color: #ffffff;
}
.content-sub-title {
    font-size: 24px;
    color: #ffffff;
    margin-top: 4px;
    opacity: 0;
    transform: translateY(600px);
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
}
.screen-section.active .content-sub-title {
    opacity: 1;
    transform: translateY(0);
}

.hub-list {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 51px;
    margin-top: 32px;
}

.hub-item {
    width: 486px;
    position: relative;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
}
.screen-section.active .hub-item {
    opacity: 1;
    transform: none;
}
.screen-section.active .hub-item:nth-child(2) {
    transition-delay: 0.3s;
}
.screen-section.active .hub-item:nth-child(1) {
    transition-delay: 0.6s;
}


.hub-item img {
    width: 100%;
}

.foot-title {
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
    margin-top: 22px;
}

.top-box {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 20px;
    padding-left: 38px;
    text-align: left;
}

.top-title {
    font-weight: 500;
    font-size: 28px;
    color: #FFFFFF;
}

.top-desc {
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
}

.tip-1 {
    position: absolute;
    top: 99px;
    right: 67px;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
}

.tip-2 {
    position: absolute;
    top: 190px;
    left: 158px;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
}

.ar-bg {
    width: 1254px;
    margin-top: 32px;
    opacity: 0;
    transform: translateY(200px);
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
}
.screen-section.active .ar-bg {
    opacity: 1;
    transform: translateY(0);
}

.ar-desc {
    font-weight: 400;
    font-size: 20px;
    color: #FFFFFF;
}

.ar-content {
    display: flex;
    justify-content: center;
}

.ar2-bg {
    width: 695px;
}

.ar-left, .ar-right {
    padding-top: 250px;

}
.ar-left{
    opacity: 0;
    transform: translateX(-500px);
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
}
.ar-right{
    transform: translateX(500px);
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
}
.screen-section.active .ar-left {
    opacity: 1;
    transform: translateX(0)
}
.screen-section.active .ar-right {
    opacity: 1;
    transform: translateX(0)
}

.ar-left-text, .ar-right-text {
    font-weight: 400;
    font-size: 28px;
    color: #FFFFFF;
}

.ar-left-desc, .ar-right-desc {
    font-weight: 400;
    font-size: 16px;
    color: #C7C7C7;
    margin-top: 8px;
}

.safe-bg {
    width: 901px;
    margin-top: 32px;
}

.safe-text {
    position: relative;
    font-weight: 350;
    font-size: 16px;
    color: #FFFFFF;
    left: 450px;
    top: 16px;
}

.stand-list {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 30px;
    margin-top: 28px;
}

.stand-item {
    width: 350px;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
}
.screen-section.active .stand-item {
    opacity: 1;
    transform: none;
}
.screen-section.active .stand-item:nth-child(3) {
    transition-delay: 0.6s;
}
.screen-section.active .stand-item:nth-child(2) {
    transition-delay: 0.4s;
}
.screen-section.active .stand-item:nth-child(1) {
    transition-delay: 0.2s;
}

.img-box {
    position: relative;
    width: 307px;
    margin: 0 auto;
}

.img-box img {
    width: 100%;
}

.img-title {
    position: absolute;
    top: 16px;
    left: 24px;
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
}

.img-content {
    position: absolute;
    top: 44px;
    left: 62px;
    font-weight: 500;
    font-size: 144px;
    color: #FFFFFF;
}

.img-content span:nth-child(2) {
    font-weight: 400;
    font-size: 36px;
    color: #FFFFFF;
}

.foot-box {
    margin-top: 31px;
    text-align: center;
}

.foot-box .foot-title {
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    margin: 0;
}

.foot-box .foot-desc {
    font-weight: 200;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 12px;
}

.app-list{
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 58px;
    margin-top: 35px;
}

.app-item{
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
    will-change: transform, opacity;
}
.screen-section.active .app-item {
    opacity: 1;
    transform: none;
}
.screen-section.active .app-item:nth-child(4) {
    transition-delay: 0.8s;
}
.screen-section.active .app-item:nth-child(3) {
    transition-delay: 0.6s;
}
.screen-section.active .app-item:nth-child(2) {
    transition-delay: 0.4s;
}
.screen-section.active .app-item:nth-child(1) {
    transition-delay: 0.2s;
}

.app-item  .foot-box{
    margin-top: 16px;
}

.app-item img {
    width: 178px;
    height: 362px;

}
.app-item .foot-box .foot-desc{
    font-size: 14px;
}

.screen-bg {
    width: 978px;
    margin: 0 auto;
    margin-top: 38px;
}

.screen-text {
    font-weight: 350;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 33px;
    position: relative;
    left: 500px;

}