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;
}
.con_font2_03 br:nth-of-type(2){ display: none;
}
.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;
	    line-height: 210px;
}
.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;
	
	     /* 新增：隐藏img原图（核心） */
      text-indent: -9999px; /* 原图移出可视区，比opacity更稳定 */
      overflow: hidden;     /* 隐藏溢出内容 */
      border: none;         /* 去掉默认边框 */
      display: block;       /* 避免行内元素间隙 */
      
      /* PC端背景图（替换为你的PC端图片地址） */
      background-size: cover;    /* 等比铺满，适配100vw宽度 */
      background-position: center;/* 背景图居中 */
      background-repeat: no-repeat;
	height: 1080px;
}
.sub-screen-1 img{background-image: url(../img/con3_1_up.png);}
.sub-screen-2 img{background-image: url(../img/con3_2_up.png);}
.sub-screen-3 img{background-image: url(../img/con3_3_up.png);}

        /* 单个小屏幕基础样式 */
        .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: 2px 20px;
			border: 1px solid #093979;
			color: #093979;
			background: transparent;
			cursor: pointer;
			font-size: 16px;
			font-weight: bold;
			transition: all 0.3s ease;
			display: block;
			min-width: 93px;
    min-height: 30px;
			line-height: 30px;
			float: left;
        }
        .join-btn:hover {
            background: #093979;
            color: #fff;
            border-color: #093979;
        }

.about_slogn {
	font-family: "pfhfonts", "思源黑体 CN", "Noto Sans CJK SC", sans-serif;
    font-size: 64px;
    line-height: 50px;
    color: #dbf0fe;
    position: absolute;
    top: 70vh;
	text-align: center;
    z-index: 10;
	font-weight: 600;
}
@media (min-width: 1400px) {
	.about_slogn {
		font-size: 64px;
		text-align: center;
	}
}
@media (min-width: 1600px) {
	.about_slogn {
		font-size:66px;
		text-align: center;
	}
}
@media (min-width: 1800px) {
	.about_slogn {
		font-size: 68px;
		text-align: center;
	}
}
.about_slogn span {
    text-transform: uppercase;
    font-size: 16px;
    text-align-last: justify;
}
.mobile_hidden{background: url(../img/con3_1_up.png) no-repeat;}



/*======================== 移动端样式 =====================*/
@media (pointer:coarse) and (min-width: 375px) and (max-width: 480px) {
	* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
	.mobile_hidden{
	  text-indent: -9999px;  
      overflow: hidden;      
      width: 300px;          
      height: 200px;        
      display: block;        
      background-image: url("../img/b1_02.png"); 
      background-size: cover;
      background-position: center; 
      background-repeat: no-repeat;
	}
	 .about_slogn {
      font-size: 36px;
      line-height: 50px;
      color: #dbf0fe;
      position: absolute;
      top: 70vh;
        width: 343px;
        margin: 0 auto;
        text-align: center;
        z-index: 10;

    }
	.con_3_2_tit .con_font2_03 {
      font-size: 14px;
        position: absolute;
        margin-left: 26%;
                top: 480px;
        margin-top: auto;
        color: #3d3d3d;
        line-height: 28px;
        text-align: right;
        right: 5%;
        width: 84vw;
    }
	.con_font2_01 .join-btn{ 
	 float:right;position: absolute;
        right: 0;
        top: 580px;
	}
	.con_font2_03 br:nth-of-type(2) { display: block; }
	.sub-nav-dots{ display: none;}
	.main-nav-dots{ display: none;}
    .con_3_3_tit .con_font3_03 {
        font-size: 14px;
        position: absolute;
        top: 480px;
        color: #666;
        line-height: 28px;
        text-align: center;
        width: 90vw;
        left: 0;
        margin: 0 auto;
    }
	.con_font3_03 .join-btn{ 
	 margin: 0 auto !important; float: none !important;width: 100px;
	}
    .con_3_1_tit .con_font_03 {
      font-size: 14px;
      position: absolute;
              left: 5%;
               top: 480px;
        margin-top: auto;
      color: #666;
      line-height: 28px;
      text-align: left;
    }
    .sub-screen img {
      width: 100vw;
      background-size: 100%;
	  height: 100vh;
	  margin-left: 0;
	  margin-top: 0;
	  left: 0;
	  top: 0;
    }
	.con_3_1_tit {
	width: 100vw;
    height: 100vh;
    position: absolute;
	left: 0;
    right: 0;
	top:0;
	margin-left: 0;
	margin-top: 0;
	}
	.con_3_2_tit {
	width: 100vw;
    height: 100vh;
    position: absolute;
	left: 0;
    right: 0;
	top:0;
	margin-left: 0;
	margin-top: 0;
	}
	.con_3_3_tit {
	width: 100vw;
    height: 100vh;
    position: absolute;
	left: 0;
    right: 0;
	top:0;
	margin-left: 0;
	margin-top: 0;
	}
	.sub-screen.active {
    background: url(../img/mobile_bg.jpg) no-repeat;
    background-size: 100% 100%;
}
	.con_3_1{ background: none;}
	.con_3_2{ background: none;}
	.con_3_3{ background: none;}
	.con_3_1_tit .con_font_01 {right: 5%; font-size: 60px;top: 50px;margin-top: auto;}
	.con_3_1_tit .con_font_02{ font-size: 26px; line-height: 36px;  }
	.con_3_2_tit .con_font2_01 {left: 5%; font-size: 60px;top: 50px;margin-top: auto;}
	.con_3_2_tit .con_font2_02{ font-size: 26px; line-height: 360px; top:-10% ;width: 90vw;height: 100vh;}
	.con_3_3_tit .con_font3_01 {left: 5%; top: 50px;margin-top: auto; font-size: 60px;width: 90vw;text-align: center;}
	.con_3_3_tit .con_font3_02{ font-size: 26px;top: 20%;width: 90vw;text-align: center;}

	.sub-screen-1 img{background-image: url(../img/mobile-1_index_1.jpg);    background-position: center top 280px;}
    .sub-screen-2 img{background-image: url(../img/mobile-1_index_2.jpg);    background-position: center top 280px;}
    .sub-screen-3 img{background-image: url(../img/mobile-1_index_3.jpg);    background-position: center top 280px;}
	
	
	.total-container{ width: 90%; }
	
	.join-btn {
    padding: 0 12px;
    border: 1px solid #093979;
    color: #093979;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
    display: block;
    min-width: 115px;
    min-height: 30px;
    line-height: 30px;
    float: left;
}
	.text-title{ font-size: 34px;}
	  .text-highlight {
		  font-size: 34px;
	  }
	.text-highlight span{ font-size: 60px; }
	 .banner-text {
      transform: scale(0.8);
      position: absolute;
      bottom: 16%;
      left: -8px;
      width: 300px;
      height: 310px;
      float: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: baseline;
      text-align: left;
      box-sizing: border-box;
	  line-height: 0;
    }
	.banner-text .join-btn{ 
	   position: relative;	left: 320px;
        top: -70px;}
	
	    .banner-text .join-btn {
        position: relative;
        left: 320px;
        top: -70px;
    }
	.banner-container {margin-top: 31%;
        transform: scale(0.4);margin-left: 0;transform-origin: top left;}
.banner-text .join-btn {position: relative;left: 320px;top: -70px;}	
	.banner-text a{ height:1px; display: block; }
	.block-text {font-size: 18px;}
	.banner-block:hover .block-text {font-size: 22px;width: 120px;}
}



/*=======================平板样式=====================*/
@media (pointer:coarse) and (min-width: 481px) and (max-width:1024px){
	* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
	.about_slogn {
    font-family: "pfhfonts", "思源黑体 CN", "Noto Sans CJK SC", sans-serif;
    font-size: 36px;
    line-height: 50px;
    color: #dbf0fe;
    position: absolute;
    top: 65dvh;
    text-align: center;
    z-index: 10;
    font-weight: 600;
}
	.main-screen {
    width: 100vw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    flex-shrink: 0;
}
	.sub-screen-1 img {
    background-image: url(../img/con3_1_ipad.png);
}
	.sub-screen-2 img {
    background-image: url(../img/con3_2_ipad.png);
}
	.sub-screen-3 img {
    background-image: url(../img/con3_3_ipad.png);
}
	.con_3_1 {
    width: 1200px;
    height: 900px;
    background-image: url(../img/con3_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 120px;
    image-rendering: optimizeQuality;
}	
	.con_3_2 {
    width: 1200px;
    height: 900px;
    background-image: url(../img/con3_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 120px;
    image-rendering: optimizeQuality;
}	
	.con_3_3 {
    width: 1200px;
    height: 900px;
    background-image: url(../img/con3_3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 120px;
    image-rendering: optimizeQuality;
}	
.con_3_1_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 50%;
    margin-top: -50vh;
    transform: scale(0.6);
    transform-origin: center center;
}
	.con_3_2_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 50%;
    margin-top: -50vh;
    transform: scale(0.6);
    transform-origin: center center;
}
	.con_3_3_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 50%;
    margin-top: -50vh;
    transform: scale(0.6);
    transform-origin: center center;
}
	.sub-screen img {
            width: 100%;
        position: absolute;
        left: 0;
        margin-left: 0;
        top: 0;
        margin-top: auto !important;
        text-indent: -9999px;
        overflow: hidden;
        border: none;
        display: block;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100dvh;
        transform: scale(1.1);
        transform-origin: center center;
}
	    .total-container {
        width: 95%;
			    margin: 160px auto 0px;
    }
	.banner-container {
    width: 130%;
    height: 310px;
    float: left;
    display: flex;
    gap: 5px;
    overflow: hidden;
    position: relative;
    zoom:0.85
}
	    .banner-text {
         transform: scale(1); 
        position: absolute;
        bottom: 18%;
        left: 5%;
        width: 90%;
        height: 310px;
        float: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: baseline;
        text-align: left;
        box-sizing: border-box;
        line-height: 0;
    }
	    .text-title {
        font-size: 34px;
    }
	    .text-highlight {
        font-size: 34px;
    }
	    .text-highlight span {
        font-size: 60px;
    }
	    .banner-text .join-btn {
                position: absolute;
               right: 0;
        top: 47%;
    }
	
.main-screen {
    width: 100vw;
    height: 100dvh !important;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    flex-shrink: 0;
}
	footer{ height: 120px !important; bottom:20px !important;
	}
	.sub-nav-dots,.main-nav-dots{ display: none;}
	.block-text {font-size: 18px;}
	.banner-block:hover .block-text {font-size: 22px;width: 120px;}
}


@media (pointer:coarse) and (min-width:1025px) and (max-width:1366px) {
	* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
	.sub-nav-dots,.main-nav-dots{ display: none;}
	
		.about_slogn {top: 75dvh; font-size: 36px;}
		.sub-screen-1 img {
    background-image: url(../img/con3_1_ipad.png);
}
	.sub-screen-2 img {
    background-image: url(../img/con3_2_ipad.png);
}
	.sub-screen-3 img {
    background-image: url(../img/con3_3_ipad.png);
}
	.con_3_1 {
    width: 1200px;
    height: 900px;
    background-image: url(../img/con3_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 120px; 
    image-rendering: optimizeQuality;
}	
	.con_3_2 {
    width: 1200px;
    height: 900px;
    background-image: url(../img/con3_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 120px;
    image-rendering: optimizeQuality;
}	
	.con_3_3 {
    width: 1200px;
    height: 900px;
    background-image: url(../img/con3_3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 120px;
    image-rendering: optimizeQuality;
}	
.con_3_1_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 50%;
    margin-top: -50vh;
    transform: scale(0.78);
    transform-origin: center center;
}
	.con_3_2_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 50%;
    margin-top: -50vh;
    transform: scale(0.78);
    transform-origin: center center;
}
	.con_3_3_tit {
    width: 1200px;
    height: 100vh;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 50%;
    margin-top: -50vh;
    transform: scale(0.78);
    transform-origin: center center;
}
	.sub-screen img {
    width: 100%;
        position: absolute;
        left: 0;
        margin-left: 0;
        top: 0;
        margin-top: 0;
        text-indent: -9999px;
        overflow: hidden;
        border: none;
        display: block;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
        transform: scale(1.28);
        transform-origin: center center;}
	    .total-container {
                width: 100%;
        margin: 0 auto 70px;
			
    }
	.banner-container {
    width: 870px;
    height: 310px;
    float: left;
    display: flex;
    gap: 5px;
    overflow: hidden;
    position: relative;
    transform: scale(0.7);
}
	.banner-container {
    width: 870px;
    height: 310px;
    float: left;
    display: flex;
    gap: 5px;
    overflow: hidden;
    position: relative;
    transform: scale(0.75);
    margin-left: -70px;
}
	
	    .banner-text {
                  transform: scale(0.8);
        position: absolute;
        right: 70px;
        /* width: 90%; */
        height: 410px;
        float: right;
        display: block;
        flex-direction: column;
        justify-content: center;
        align-items: baseline;
        text-align: right;
        box-sizing: border-box;

    }
	    .text-title {
        font-size: 34px;
			text-align: right;
        width: 100%;
    }
	    .text-highlight {
        font-size: 34px;
			text-align: right;
        width: 100%;
    }
	    .text-highlight span {
        font-size: 60px;
    }
	    .banner-text .join-btn {
                position: absolute;
       left: 57%;
        top: 58%;
    }
	footer{ height: 147px;bottom: 25px;
	}	  
	.block-text {font-size: 18px;}
	.banner-block:hover .block-text {font-size: 22px;width: 120px;}
}