/* 基础重置（新增，避免样式继承问题） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
html, body {
    overflow-x: hidden;
    font-family: "Microsoft Yahei", sans-serif; /* 统一字体，避免默认字体暴露 */
}

.sy_p4 {
    width:100vw;height:80vh;
    /* 差异化1：背景从单一图片改为渐变+图片叠加，且调整透明度和定位 */
    background: linear-gradient(rgba(0, 20, 50, 0.6), rgba(0, 30, 80, 0.8)), 
                url(../picture/earth.jpg) center center / cover no-repeat fixed;
    position:relative;overflow:hidden;
    /* 新增：硬件加速，同时轻微模糊背景，降低和原版的相似度 */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sy_p4 .main {width:100%;height:100%;position:relative;padding:0 20px;}

/* 差异化2：标题样式完全重构（配色、圆角、阴影、下划线） */
.sy_nr1 {
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    pointer-events: none; /* 新增：防止遮挡卡片交互 */
}
.bt {
    font-size:60px; /* 微调字号 */
    color:#fff;
    font-weight:700; /* 调整字重 */
    padding:20px 50px; /* 调整内边距 */
    /* 替换背景：从浅黑改为深蓝渐变 */
    background: linear-gradient(135deg, rgba(0, 40, 100, 0.7), rgba(0, 60, 150, 0.5));
    /* 差异化圆角+阴影 */
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 10, 30, 0.5);
    /* 新增文字描边，强化视觉特征 */
    text-shadow: 0 0 8px rgba(100, 180, 255, 0.5);
}
.sy_p4 .sy_nr1 .bt:after {
    content: '';
    width: 1.2em; /* 调整下划线宽度 */
    height: 4px;
    /* 替换主色调：从黄色改为科技蓝 */
    background: linear-gradient(90deg, #3498db, #67c2f3);
    display: block;
    margin: 15px auto 0; /* 调整间距 */
    /* 新增下划线圆角 */
    border-radius: 2px;
}

/* 差异化3：卡片样式完全重构（配色、圆角、阴影、hover效果） */
.u1 li {
    position:absolute;color:#fff;
    display:flex;align-items:center;justify-content:center;
    padding:22px 18px; /* 微调内边距 */
    perspective:2800px; /* 微调透视距离 */
    transform-style:preserve-3d;
    /* 核心修改：圆角加大+阴影重构+渐变背景 */
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 20, 50, 0.4);
    /* 替换卡片背景：从纯黑/深灰改为深蓝系渐变 */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 替换动画曲线 */
    border: 1px solid rgba(100, 180, 255, 0.1); /* 新增边框，增加细节 */
}
/* 差异化4：重构卡片hover效果（原版是简单缩放，改为带偏移+发光） */
.u1 li:hover {
    transform: translate3d(0, -8px, 30px) scale(1.08);
    box-shadow: 0 12px 30px rgba(0, 40, 100, 0.6);
    /* hover时背景提亮+发光边框 */
    background: linear-gradient(135deg, rgba(0, 50, 120, 0.8), rgba(0, 70, 160, 0.7)) !important;
    border-color: rgba(100, 180, 255, 0.3);
}

/* 差异化5：重新定义所有卡片背景色（改为深蓝系渐变/半透明） */
.u1 li:nth-child(1) {width:30vw;height:26vh;left:35vw;top:30vh;background:rgba(0, 40, 100, 0.65);z-index:999;}
.u1 li:nth-child(2) {width:13vw;height:12vh;left:40vw;top:25vh;background:rgba(0, 35, 90, 0.55);}
.u1 li:nth-child(3) {width:12.5vw;height:10vh;right:28.4vw;top:30vh;background:rgba(0, 50, 120, 0.75);}
.u1 li:nth-child(4) {width:14vw;height:11vh;right:26.8vw;top:30vh;background:rgba(0, 35, 90, 0.55);}
.u1 li:nth-child(5) {width:12vw;height:21vh;right:20vw;top:30vh;background:rgba(0, 50, 120, 0.85);}
.u1 li:nth-child(6) {width:16vw;height:13vh;left:30vw;bottom:45vh;background:rgba(0, 45, 110, 0.45);}
.u1 li:nth-child(7) {width:14vw;height:11vh;left:35vw;bottom:27vh;background:rgba(0, 50, 120, 0.75);}
.u1 li:nth-child(8) {width:12vw;height:14vh;left:38vw;top:37vh;background:rgba(0, 50, 120, 0.75);}
.u1 li:nth-child(9) {width:13vw;height:20vh;right:26.3vw;bottom:23vh;background:rgba(0, 50, 120, 0.75);}
.u1 li:nth-child(10){width:14vw;height:14vh;right:25.5vw;bottom:42vh;background:rgba(0, 50, 120, 0.75);}
.u1 li:nth-child(11){width:14vw;height:14vh;right:23vw;bottom:25vh;background:rgba(0, 40, 100, 0.65);}
.u1 li:nth-child(12){width:13vw;height:13vh;left:35vw;bottom:20vh;background:rgba(0, 50, 120, 0.85);}

/* 差异化6：文字样式调整（强调色改为蓝色，调整间距/字号） */
.u1 .f1 {width:100%;font-size:1.1vw; /* 微调字号 */
    margin-bottom: 10px; /* 新增间距 */
    text-shadow: 0 2px 8px rgba(0, 10, 30, 0.4); /* 强化文字阴影 */
}
.u1 .f2 {margin-top:0; /* 重置间距 */
    width:100%;font-size:1.3vw; /* 微调字号 */
    /* 强调色从黄色改为科技蓝 */
    color: #67c2f3;
    font-weight: 700; /* 加大字重 */
}
/* 首卡片文字特殊调整 */
.u1 li:nth-child(1) .f1 {font-size:2.9vw;}
.u1 li:nth-child(1) .f2 {font-size:1.9vw;margin-top:1.8vw;color:#fff;}

/* 差异化7：动画曲线修改（从linear改为ease-in-out，节奏不同） */
@keyframes zoomin{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-top:-50vh;margin-left:-14vw;}}
@keyframes zoomin1{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-top:70vh;margin-left:4vw;}}
@keyframes zoomin2{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-top:-50vh;margin-right:-20vw;}}
@keyframes zoomin3{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-left:-40vw;}}
@keyframes zoomin5{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-top:-10vh;margin-right:-40vw;}}
@keyframes zoomin6{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-bottom:-20vh;margin-right:-40vw;}}
@keyframes zoomin7{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-bottom:-40vh;margin-right:-40vw;}}
@keyframes zoomin8{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-top:-40vh;margin-left:-40vw;}}
@keyframes zoomin9{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-bottom:-10vh;margin-left:-40vw;}}
@keyframes zoomin10{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-bottom:-40vh;margin-left:-20vw;}}
@keyframes zoomin11{0%{opacity:0.5;transform:perspective(400px) scale(0.5);}100%{opacity:1;transform:perspective(400px) scale(1.6);margin-bottom:-40vh;margin-right:-20vw;}}

/* 所有动画调用处：替换linear为ease-in-out，改变动画节奏 */
.u1 li:nth-child(1){animation:zoomin1 12s -.3s ease-in-out infinite;}
.u1 li:nth-child(2){animation:zoomin 14s -3s ease-in-out infinite;}
.u1 li:nth-child(3){animation:zoomin2 13.5s -6s ease-in-out infinite;}
.u1 li:nth-child(4){animation:zoomin2 11s -8s ease-in-out infinite;}
.u1 li:nth-child(5){animation:zoomin5 9s -7s ease-in-out infinite;}
.u1 li:nth-child(6){animation:zoomin3 10s -4s ease-in-out infinite;}
.u1 li:nth-child(7){animation:zoomin9 9.5s -5s ease-in-out infinite;}
.u1 li:nth-child(8){animation:zoomin8 13s -10s ease-in-out infinite;}
.u1 li:nth-child(9){animation:zoomin11 11s -9s ease-in-out infinite;}
.u1 li:nth-child(10){animation:zoomin6 12s -13s ease-in-out infinite;}
.u1 li:nth-child(11){animation:zoomin7 17s -3s ease-in-out infinite;}
.u1 li:nth-child(12){animation:zoomin10 17s -5s ease-in-out infinite;}

.earthMapWaper {
    position:absolute;width:60%;height:100%;right:0;top:50%;margin-top:-450px;
    transform:scale3d(0.01,0.01,1);transition:all 1s ease-in-out; /* 动画曲线修改 */
    z-index:1;opacity:0.6; /* 微调透明度 */
}
.sy_p4.active .earthMapWaper {transform:scale3d(1,1,1);}

/* 差异化8：小屏样式同步调整（配色、圆角、阴影） */
@media (max-width:1200px) {
    .u1 {display:none;}
    .u2 {
        display:block;height:30vh;width:90%;margin:0 auto;
        position:absolute;left:0;right:0;bottom:28vh;
    }
    .u2 .global-promotion {height:calc(100% - 40px);width:100%;}
    .u2 .swiper-slide .cs {
        width:100%;height:100%;display:flex;align-items:center;justify-content:center;
        /* 小屏卡片背景同步改为深蓝系 */
        background:rgba(0, 40, 100, 0.65);
        padding:20px;border-radius:16px; /* 同步加大圆角 */
        box-shadow: 0 6px 20px rgba(0, 10, 30, 0.4); /* 新增阴影 */
        border: 1px solid rgba(100, 180, 255, 0.1); /* 新增边框 */
    }
    .u2 .conts {color:#fff;font-size:16px;font-weight:600;}
    .u2 .conts .f2 {color: #67c2f3;} /* 小屏强调色同步 */
    .ntns {text-align:center;position:relative;}
    .swiper-button-prev,.swiper-button-next {
        position:absolute;top:10px;width:36px;height:36px;line-height:36px;
        /* 按钮配色改为深蓝 */
        background:#0050a0;color:#fff;border-radius:50%;text-align:center;
        outline:none;
        box-shadow: 0 4px 10px rgba(0, 10, 30, 0.3); /* 按钮新增阴影 */
    }
    .swiper-button-prev {left:30%;}
    .swiper-button-next {right:30%;}
    /* 按钮hover色改为深青蓝 */
    .swiper-button-prev:hover,.swiper-button-next:hover {background:#0070c0;}
    .earthMapWaper {width:80% !important;}
    /* 小屏标题字号适配 */
    .bt {font-size:28px; /* 微调字号 */
        padding:15px 30px;}
}
@media (max-width:760px) {
    .earthMapWaper {width:100% !important;}
}
@media (min-width:1200px) {
    .u2 {display:none;}
}