body { overflow: hidden !important;} 
#threejs-container {
            width: 100vw;
            height: 100vh;
            border: none;
            margin: 0;
            padding: 0;
        }

/* 纵向主容器 - 容纳3个主屏幕 */
        .main-container {
            width: 100vw;
            height: 300vh;
            overflow: hidden;
            transition: transform 0.5s ease-in-out;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        /* 单个主屏幕样式 */
        .main-screen {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            flex-shrink: 0;
        }

        /* 横向子容器 - 容纳3个小屏幕 */
        .sub-container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            transition: transform 0.5s ease-in-out;
            display: flex;
            position: relative;
			
        }

/* 每个小屏：占满100vw，确保横向排列 */
.sub-screen-1, .sub-screen-2, .sub-screen-3 {
    width: 100vw;
    height: 100vh;
    flex: 0 0 100vw; /* 禁止伸缩，固定100vw宽度 */
    overflow: hidden;
}

/* 第二大屏容器：隐藏溢出，只显示当前小屏 */
.main-screen-2 {
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: 100vh;
}
.in_3_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.in_3_ovhi {
    width: 1200px;
    height: 1078px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
	top: 50%;
    margin-top: -540px;
}
.con_3_1_wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    transform-origin: top center;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}
.sub-screen.active .con_3_1_wrap {  
            -webkit-animation: slideFromTop 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            animation: slideFromTop 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }
        @keyframes slideFromTop {
            0% {
                transform: translateY(-100%); 
                opacity: 0.98; 
            }
            100% {
                transform: translateY(0); 
                opacity: 1;
            }
        }
        @-webkit-keyframes slideFromTop {
            0% {
                transform: translateY(-100%);
                opacity: 0.98;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }
.con_3_1 {
    width: 1200px;
    height: 1080px;
    background-image: url(../img/con3_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    image-rendering: optimizeQuality;
}
.con_3_1_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
	top: 50%;
	margin-top: -50vh;
}
.con_3_1_tit .con_font_01 {
    font-size: 110px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -240px;
    color: #e57922;
    font-weight: bold;
    width: 484px;
    line-height: 230px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(to bottom, #fccfbf, #ffdbce, #fff, #fff);
    text-align: right;
}
.sub-screen.active .con_3_1_tit .con_font_01 {
    -webkit-animation: fullScreenSlideLeft 1s ease-out forwards;
    animation: fullScreenSlideLeft 1s ease-out forwards;
    opacity: 0;
    transform: translateY(-100%);
    will-change: transform, opacity;
}
.con_3_1_tit .con_font_02 {
    font-size: 36px;
    position: absolute;
    right: 0;
    top: 60%;
    color: #093979;
    font-weight: bold;
	line-height: 60px;
}
.sub-screen.active .con_3_1_tit .con_font_03 {
    -webkit-animation: fullScreenSlideRight 1s ease-out forwards;
    animation: fullScreenSlideRight 1s ease-out forwards;
    opacity: 0;
    transform: translateX(-100%);
    will-change: transform, opacity;
}
/* 1. 定义整屏背景动画关键帧 */
	@keyframes fullScreenSlideDown {
	  0% {
		transform: translateY(-100%);/* 初始：背景完全在视口上方 */
		opacity: 1; /* 可选：渐显效果 */
	  }
	  100% {
		transform: translateY(0); /* 最终：背景铺满整屏 */
		opacity: 1;
	  }
	}
	@keyframes fullScreenSlideUp {
	  0% {
		transform: translateY(100%); /* 初始：背景完全在视口上方 */
		opacity: 0; /* 可选：渐显效果 */
	  }
	  100% {
		transform: translateY(0); /* 最终：背景铺满整屏 */
		opacity: 1;
	  }
	}
	@keyframes fullScreenSlideLeft {
	  0% {
		transform: translateX(100%); /* 初始：背景完全在视口上方 */
		opacity: 0; /* 可选：渐显效果 */
		}
	  100% {
		transform: translateX(0); /* 最终：背景铺满整屏 */
		opacity: 1;
	  }
	}
@keyframes fullScreenSlideRight {
	  0% {
		transform: translateX(-100%); /* 初始：背景完全在视口上方 */
		opacity: 0; /* 可选：渐显效果 */
		}
	  100% {
		transform: translateX(0); /* 最终：背景铺满整屏 */
		opacity: 1;
	  }
	}

	/* 兼容webkit内核（可选，现代浏览器可省略） */
	@-webkit-keyframes fullScreenSlideDown {
	  0% {
		-webkit-transform: translateY(-100%);
		opacity: 0;
	  }
	  100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	  }
	}

.con_3_1_tit .con_font_03 {
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: 65px;
    color: #666;
    line-height: 50px;
    text-align: left;
}
.con_3_1_tit .con_font_04 {
    color: #093979;
    font-weight: bold;
}
.sub-screen.active .con_3_2_wrap {
    -webkit-animation: slideFromTop 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation: slideFromTop 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.con_3_2 {
    width: 1200px;
    height: 1080px;
    background-image: url(../img/con3_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    image-rendering: optimizeQuality;
}
.con_3_2_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 0;
}
.sub-screen.active .con_3_2_tit .con_font2_01 {
    -webkit-animation: fullScreenSlideDown 1s ease-out forwards;
    animation: fullScreenSlideDown 1s ease-out forwards;
    opacity: 0;
    transform: translateY(-100%);
    will-change: transform, opacity;
}
.con_3_2_tit .con_font2_01 {
    font-size: 110px;
    position: absolute;
    top: 50%;
    margin-top: -260px;
    font-weight: bold;
    width: 365px;
    line-height: 230px;
    text-align: left;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(to bottom, #fccfbf, #ffdbce, #fff, #fff);
    left: 0;
}
.con_3_2_tit .con_font2_02 {
    font-size: 36px;
    position: absolute;
    left: 0;
    top: 30%;
    color: #093979;
    font-weight: bold;
}
.sub-screen.active .con_3_2_tit .con_font2_03 {
    -webkit-animation: fullScreenSlideDown 1.3s ease-out forwards;
    animation: fullScreenSlideDown 1.3s ease-out forwards;
    opacity: 0;
    transform: translateY(-100%);
    will-change: transform, opacity;
}

.con_3_2_tit .con_font2_03 {
    font-size: 20px;
    position: absolute;
    /* margin-left: -20px; */
    top: 50%;
    margin-top: -190px;
    color: #666;
    line-height: 50px;
    text-align: right;
    right: 0;
}
.con_3_2_tit .con_font2_04 {
    color: #093979;
    font-weight: bold;
}
.sub-screen.active .con_3_3_wrap {
    -webkit-animation: fullScreenSlideUp 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation: fullScreenSlideUp 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.con_3_3 {
    width: 1200px;
    height: 1077px;
    background-image: url(../img/con3_3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    image-rendering: optimizeQuality;
}
.con_3_3_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 0;
}
.sub-screen.active .con_3_3_tit .con_font3_01 {
    -webkit-animation: fullScreenSlideDown 1s ease-out forwards;
    animation: fullScreenSlideDown 1s ease-out forwards;
    opacity: 0;
    transform: translateY(-100%);
    will-change: transform, opacity;
}
.con_3_3_tit .con_font3_01 {
    font-size: 110px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -230px;
    color: #e57922;
    font-weight: bold;
    width: 365px;
    line-height: 230px;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(to bottom, #fccfbf, #ffdbce, #fff, #fff);
    text-align: right;
}
.con_3_3_tit .con_font3_02 {
    font-size: 36px;
    position: absolute;
    right: 0;
    top: 30%;
    color: #093979;
    font-weight: bold;
}
.sub-screen.active .con_3_3_tit .con_font3_03 {
    -webkit-animation: fullScreenSlideUp 1.3s ease-out forwards;
    animation: fullScreenSlideUp 1.3s ease-out forwards;
    opacity: 0;
    transform: translateY(-100%);
    will-change: transform, opacity;
}
.con_3_3_tit .con_font3_03 {
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: 25px;
    color: #666;
    line-height: 50px;
    text-align: right;
}
.con_3_3_tit .con_font3_04 {
    color: #093979;
    font-weight: bold;
}
.sub-screen img {
    width: 1920px;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    top: 50%;
    margin-top: -540px;
}
        /* 单个小屏幕基础样式 */
        .sub-screen {
            position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #333;
        }
.sub-screen.active {
    display: flex;
    animation: in_3_fadeIn 0.5s ease;
}
        /* 3个小屏幕主色调背景 */
        .sub-screen-1 { background-color: #fff; }
        .sub-screen-2 { background-color: #fff; }
        .sub-screen-3 { background-color: #fff; }

        /* 主屏幕背景色 */
        .main-screen-1 { background-color: #072d61; }
        .main-screen-3 { background: url("../img/index_3.jpg") no-repeat;
		background-position: center center;
		background-size: cover;
}

        /* 提示文字样式 */
        .tip {
            font-size: 1rem;
            margin-top: 50px;
            opacity: 0.9;
        }

        /* 垂直导航标记样式（原有） */
        .main-nav-dots {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .nav-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(9, 57, 121, 0.5);
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }
        .nav-dot.active {
            background-color: #e57922;
            width: 14px;
            height: 14px;
            box-shadow: 0 0 12px rgba(229, 121, 34, 0.9);
        }

        /* ========== 新增：横屏标记样式（主屏幕2下方居中） ========== */
        .sub-nav-dots {
            position: absolute; /* 基于主屏幕2定位，不随小屏偏移 */
            bottom: 30px; /* 距离底部30px，可调整 */
            left: 50%; /* 水平居中第一步 */
            transform: translateX(-50%); /* 水平居中第二步，精准对齐 */
            z-index: 99; /* 在主屏幕2内置顶，不被小屏遮挡 */
            display: flex; /* 横向排列圆点 */
            gap: 15px; /* 横屏圆点之间的间距，比垂直标记稍小更协调 */
        }

        /* 横屏圆点默认样式（与垂直标记风格统一） */
        .sub-nav-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(9, 57, 121, 0.7); /* 比垂直标记稍不透明，提升可视性 */
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }

        /* 横屏圆点激活状态（主色调#e57922高亮，与垂直标记统一） */
        .sub-nav-dot.active {
            background-color: #e57922;
            width: 14px;
            height: 14px;
            box-shadow: 0 0 12px rgba(229, 121, 34, 0.9);
        }


       /* 总容器：限定1200px宽度，居中显示，清除浮动高度塌陷 */
        .total-container {
            width: 1200px;
            height: 310px;
            margin: 0 auto 70px;
            overflow: hidden;
        }

        /* 左侧梯形拼凑区域：还原宽度为870px，保留5px间距，弹性布局适配 */
        .banner-container {
            width: 870px; /* 核心修改：还原左侧区域宽度为870px */
            height: 310px;
            float: left;
            display: flex;
            gap: 5px; /* 保留5px区块间距，不删除 */
            overflow: hidden;
            position: relative;
        }

        /* 梯形区块通用样式：适配870px容器+5px间距，调整区块宽度，保留梯形形状 */
        .banner-block {
            width: 250px; /* 核心适配：平均分配870px容器宽度（扣除3个5px间距） */
            flex: none;
            height: 100%;
            position: relative;
            overflow: hidden;
            clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
            z-index: 1;
            transition: all 0.3s ease;
            margin: 0;
            cursor: pointer;
        }

        /* 1号区块：左直角、右斜边、上宽下窄（梯形形状固定不变） */
        .banner-block:first-child {
            clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
        }
.banner-block:first-child .block-text{
	    left: 33%;
}

        /* 2号区块：倒梯形（梯形形状固定不变） */
        .banner-block:nth-child(2) {
            clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
			position: relative;
			left: -98px;
     		width: 320px;
        }

        /* 3号区块：左右斜边、上宽下窄（梯形形状固定不变） */
        .banner-block:nth-child(3) {
            clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
			position: relative;
			left: -198px;
			width: 350px;
        }

        /* 4号区块：左斜边、右直角、上窄下宽（梯形形状固定不变） */
        .banner-block:last-child {
            clip-path: polygon(44% 0, 100% 0, 100% 100%, 0 100%);
			position: relative;
			left: -300px;
			width: 235px;
        }

        /* 背景图：适配梯形区域，不变形 */
        .block-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;
            transition: transform 0.3s ease;
        }

        /* 蓝色透明遮罩：色值#093979，半透明保证文字可读性 */
        .block-mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(9, 57, 121, 0.5); /* #093979 转rgba保持0.5透明度 */
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* 基础可见文字：底部定位，带阴影提升辨识度 */
        .block-text {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translate(-50%);
            color: #fff;
            font-size: 22px;
            font-weight: bold;
			width: 46px;
        }

        /* 隐藏内容：悬停下滑显示 */
        .block-hidden {
			text-align: center;
            color: #fff;
            font-size: 16px;
            line-height: 1.5;
            text-shadow: 0 0 3px rgba(0,0,0,0.7);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 2;
        }
.block-hidden img{ 
	width: 60px;margin-top: 110px;
}
.banner-block:first-child:hover .block-hidden img{ width: 60px;  position: relative; right: 30px;}
.banner-block:last-child:hover .block-hidden img{ width: 60px; position: relative; left: 18px;}
        /* 悬停交互效果合集 */
        .banner-block:hover {
            z-index: 10;
            transform: scale(1.02);
        }
        .banner-block:hover .block-bg {
            transform: scale(1.05);
        }
        .banner-block:hover .block-mask {
            opacity: 1;
        }
        .banner-block:hover .block-hidden {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .banner-block:hover .block-text {
           font-size: 26px;
		   width: 110px;
		   bottom: 80px;	
        }
        
.banner-block:first-child:hover .block-text{ left: 38%}
.banner-block:last-child:hover .block-text{ left: 58%}
.banner-block:hover .block-text {
           font-size: 26px;
		   width: 110px;
		   bottom: 80px;	
        }

        /* 右侧文字区域：居中对齐，适配左侧870px宽度，黄色100px+蓝色44px+文字加粗 */
        .banner-text {
            width: 300px;
            height: 310px;
            float: right;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            text-align: right;
            box-sizing: border-box;
        }
        .text-title {
            font-size: 36px; /* 蓝色文字设置为44px */
            color: #093979; /* 蓝色色值#093979 */
            font-weight: bold; /* 文字加粗 */
            margin: 0;
        }
        .text-highlight {
            font-size: 44px; /* 蓝色文字设置为44px */
            color: #093979; /* 蓝色色值#093979 */
            font-weight: bold; /* 文字加粗 */
            margin: 30px 0;
        }
        .text-highlight span {
            color: #e57a22; /* 黄色色值#e57a22 */
            font-size: 80px; /* 黄色文字单独设置为100px */
            font-weight: bold; /* 文字加粗 */
            line-height: 1; /* 消除大字体默认行高过高的问题，保持布局紧凑 */
        }
        .join-btn {
            padding: 8px 20px;
            border: 1px solid #093979; /* 按钮边框蓝色#093979，视觉统一 */
            color: #093979; /* 按钮文字蓝色#093979，44px配套视觉 */
            background: transparent;
            cursor: pointer;
            font-size: 16px; /* 按钮文字尺寸单独适配，避免过大/过小 */
            font-weight: bold; /* 文字加粗 */
            transition: all 0.3s ease;
        }
        .join-btn:hover {
            background: #093979;
            color: #fff;
            border-color: #093979;
        }

.about_slogn {
	font-family: "Source Han Sans CN", "思源黑体 CN", "Noto Sans CJK SC", sans-serif;
    font-size: 32px;
    line-height: 50px;
    color: #fff;
    position: absolute;
    top: 70vh;
    left: 50%;
    margin-left: -500px;
    width: 1000px;
	text-align: center;
    z-index: 10;
    text-align-last: justify;
}
@media (min-width: 1400px) {
	.about_slogn {
		font-size: 34px;
		margin-left: -550px;
		text-align: center;
		width: 1100px;
	}
}
@media (min-width: 1600px) {
	.about_slogn {
		font-size: 36px;
		margin-left: -550px;
		text-align: center;
		width: 1100px;
	}
}
@media (min-width: 1800px) {
	.about_slogn {
		font-size: 38px;
		margin-left: -550px;
		text-align: center;
		width: 1100px;
	}
}
.about_slogn span {
    text-transform: uppercase;
    font-size: 16px;
    text-align-last: justify;
}