/* =================================================
   PART 2 / 8
   HERO
   VIDEO SYSTEM
================================================= */
/* =========================
   HERO主体
========================= */
.hero{
    position:relative;
    width:100%;
    height:100vh;
    min-height: 70rem;
    overflow:hidden;
    background:#000;
}
/* =========================
   所有媒体层统一
========================= */
.hero-poster,
.hero-video,
.video-transition{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
/* =========================
   Poster封面
========================= */
.hero-poster{
    z-index:3;
    overflow:hidden;
    transform:
    scale(1);
    opacity:1;
    transition:
    opacity 1s ease,
    transform 1.5s cubic-bezier(.22,1,.36,1);
}
.hero-poster img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/*
播放后：
封面放大退出
*/
.hero.is-playing .hero-poster{
    opacity:0;
    transform:
    scale(1.12);
}
/* =========================
   视频层
========================= */
.hero-video{
    z-index:5;
    opacity:0;
    transform:
    scale(1.08);
    transition:
    opacity 1s ease,
    transform 1.5s cubic-bezier(.22,1,.36,1);
}
.hero-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}
/*
播放后：
视频进入
*/
.hero.is-playing .hero-video{
    opacity:1;
    transform:
    scale(1);
}
/* =========================
   黑色扩散转场
========================= */
.video-transition{
    z-index:4;
    pointer-events:none;
    background:#000;
    border-radius:50%;
    width:10rem;
    height:10rem;
    left:50%;
    top:50%;
    inset:auto;
    transform:
    translate(-50%,-50%)
    scale(0);
}
.hero.is-playing .video-transition{
    animation:
    revealVideo
    1.2s
    cubic-bezier(.77,0,.18,1)
    forwards;
}
@keyframes revealVideo{
    0%{
        transform:
        translate(-50%,-50%)
        scale(0);
    }
    100%{
        transform:
        translate(-50%,-50%)
        scale(40);
    }
}
/* =========================
   内容层
========================= */
.hero-content{
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;
}
/* =========================
   左右内容基础
========================= */
.hero-left,
.hero-right{
    position:absolute;
    pointer-events:auto;
    transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.65,0,.35,1);
}
/* =========================
   左侧
========================= */
.hero-left{
    left:6rem;
    top:18rem;
    width:65rem;
}
/* =========================
   右侧
========================= */
.hero-right{
    right:6rem;
    top:18rem;
    width:32rem;
}
/* =========================
   播放后内容退出
========================= */
.hero.is-playing .hero-left{
    opacity:0;
    transform:
    translateX(-20rem);
    pointer-events:none;
}
.hero.is-playing .hero-right{
    opacity:0;
    transform:
    translateX(20rem);
    pointer-events:none;
}
/* =========================
   播放按钮层
========================= */
.play-trigger{
    position:absolute;
    left:50%;
    top:50%;
    z-index:25;
    width:10rem;
    height:10rem;
    border-radius:50%;
    background:white;
    color:var(--blue);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    transform:
    translate(-50%,-50%);
    transition:
    .45s cubic-bezier(.22,1,.36,1);
    pointer-events:auto;
}
.play-trigger:hover{
    transform:
    translate(-50%,-50%)
    scale(1.12);
}
.hero.is-playing .play-trigger{
    opacity:0;
    transform:
    translate(-50%,-50%)
    scale(.5);
    pointer-events:none;
}
/* =========================
   播放按钮外圈
========================= */
.play-trigger::before{
    content:"";
    position:absolute;
    inset:-1.5rem;
    border-radius:50%;
    border:
    .2rem solid rgba(255,255,255,.8);
    animation:
    playPulse
    2s
    infinite;
}
@keyframes playPulse{
    0%{
        transform:scale(1);
        opacity:.8;
    }
    100%{
        transform:
        scale(1.8);
        opacity:0;
    }
}
/* =================================================
   PART 3 / 8
   HERO LEFT CONTENT
================================================= */
/* =========================
   左侧初始状态
========================= */
.hero-left{
    opacity:0;
    transform:
    translateX(-8rem);
}
/* 页面加载 */
.hero.loaded:not(.is-playing) .hero-left{
    animation:
    heroLeftIn
    1.2s
    cubic-bezier(.22,1,.36,1)
    forwards;
}
@keyframes heroLeftIn{
    from{
        opacity:0;
        transform:
        translateX(-8rem);
    }
    to{
        opacity:1;
        transform:
        translateX(0);
    }
}
/* =========================
   标签
========================= */
.hero-label{
    display:flex;
    align-items:center;
    gap:1.5rem;
    margin-bottom:3rem;
    font-size:1.4rem;
    font-weight:600;
    color:var(--blue);
    letter-spacing:.1rem;
    opacity:0;
    transform:
    translateY(3rem);
}
.hero-label span{
    width:3rem;
    height:.3rem;
    background:var(--blue);
}
.hero.loaded .hero-label{
    animation:
    fadeUp
    .8s
    .3s
    forwards;
}
/* =========================
   主标题
========================= */
.hero-left h1{
    font-size:8rem;
    line-height:.95;
    letter-spacing:-.3rem;
    font-weight:900;
    color:var(--dark);
    overflow:hidden;
}
.hero-left h1 span{
    display:block;
    opacity:0;
    transform:
    translateY(8rem);
}
.hero.loaded 
.hero-left h1 span:nth-child(1){
    animation:
    titleReveal
    .9s
    .45s
    forwards;
}
.hero.loaded 
.hero-left h1 span:nth-child(2){
    animation:
    titleReveal
    .9s
    .6s
    forwards;
}
.hero.loaded 
.hero-left h1 span:nth-child(3){
    animation:
    titleReveal
    .9s
    .75s
    forwards;
}
@keyframes titleReveal{
    from{
        opacity:0;
        transform:
        translateY(8rem);
    }
    to{
        opacity:1;
        transform:
        translateY(0);
    }
}
.hero-left h1 em{
    color:var(--orange);
    font-style:normal;
}
/* =========================
   描述文字
========================= */
.hero-left p{
    width:46rem;
    margin-top:3.5rem;
    font-size:1.7rem;
    line-height:1.7;
    color:#000000;
    opacity:0;
    transform:
    translateY(3rem);
}
.hero.loaded .hero-left p{
    animation:
    fadeUp
    .8s
    1s
    forwards;
}
/* =========================
   按钮区域
========================= */
.hero-buttons{
    display:flex;
    align-items:center;
    gap:2rem;
    margin-top:3.5rem;
    opacity:0;
    transform:
    translateY(3rem);
}
.hero.loaded .hero-buttons{
    animation:
    fadeUp
    .8s
    1.2s
    forwards;
}
/* 主按钮 */
.product-btn{
    height: 5rem;
    display: flex;
    padding: 0 2rem 0 2.5rem;
    border-radius: .8rem;
    background: var(--blue);
    color: white;
    font-size: 1.5rem;
    transition: .35s;
    align-items: center;
    font-weight: bold;
}
.product-btn img{
    width: 1.5rem;
    margin-left: 2rem;
    padding: 0.5rem;
    box-sizing: content-box;
    background-color: white;
    border-radius: 50%;
}
.product-btn:hover{
    transform:
    translateY(-.4rem);
    box-shadow:
    0 1.5rem 3rem rgba(20,91,232,.3);
}
/* 视频按钮 */
.watch-btn{
    height: 5rem;
    padding: 0 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: .8rem;
    background: white;
    color: #222;
    font-size: 1.5rem;
    transition: .35s;
    border: 1px solid #145be8;
    font-weight: bold;
}
.watch-btn img{
    width: 2rem;
    margin-right: 1rem;
    padding: 0.3rem;
    box-sizing: content-box;
    background-color: white;
    border-radius: 50%;
    border: 2px solid #145be8;
}
.watch-btn:hover{
    transform:
    translateY(-.4rem);
    box-shadow:
    0 1rem 3rem rgba(0,0,0,.12);
}
/* =========================
   通用上浮动画
========================= */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:
        translateY(3rem);
    }
    to{
        opacity:1;
        transform:
        translateY(0);
    }
}
/* =========================
   播放后强化隐藏
========================= */
.hero.is-playing .hero-label,
.hero.is-playing .hero-left p,
.hero.is-playing .hero-buttons{
    transition:.5s;
}
/* =================================================
   PART 4 / 8
   HERO RIGHT CONTENT
================================================= */
/* =========================
   右侧初始状态
========================= */
.hero-right{
    opacity:0;
    transform:
    translateX(8rem);
}
.hero.loaded .hero-right{
    animation:
    heroRightIn
    1.2s
    .4s
    cubic-bezier(.22,1,.36,1)
    forwards;
}
@keyframes heroRightIn{
    from{
        opacity:0;
        transform:
        translateX(8rem);
    }
    to{
        opacity:1;
        transform:
        translateX(0);
    }
}
/* =========================
   参数玻璃卡
========================= */
.spec-box{
    width: 25rem;
    padding:0rem 2rem;
    border-radius:2.5rem;
    background:
    rgba(255,255,255,.93);
    backdrop-filter:
    blur(2rem);
    box-shadow:
    0 2rem 5rem rgba(0,0,0,.12);
    border:
    .1rem solid rgba(255,255,255,.5);
}
/* =========================
   参数项目
========================= */
.spec-box .banrid{
    position: relative;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
}
.spec-box .banrid img{
    width: 4rem;
    margin-right: 2rem;
}
/* 小标题 */
.spec-box small{
    display: block;
    font-size: 1.2rem;
    letter-spacing: .05rem;
    color: #3a3a3a;
    margin-bottom: .8rem;
}
/* 数值 */
.spec-box strong{
    display: block;
    font-size: 3rem;
    line-height: 1;
    font-weight: bold;
    color: var(--dark);
    letter-spacing: 0.1rem;
}
.spec-box .banrid2{
    padding: 2rem 0;
    border-top: 1px solid #b5b5b5;
}
.spec-box .banrid2 div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.spec-box .banrid2 div span{
    font-size: 1.5rem;
    font-weight: bold;
    transition: .35s;
}
.spec-box .banrid2 div:hover span{
    color: #145be8;
}
.spec-box .banrid2 div img{
    width: 1.6rem;
}
/* =========================
   数字依次进入
========================= */
.spec-box > div{
    opacity:0;
    transform:
    translateY(3rem);
}
.hero.loaded 
.spec-box > div:nth-child(1){
    animation:
    fadeUp
    .7s
    .7s
    forwards;
}
.hero.loaded 
.spec-box > div:nth-child(2){
    animation:
    fadeUp
    .7s
    .9s
    forwards;
}
.hero.loaded 
.spec-box > div:nth-child(3){
    animation:
    fadeUp
    .7s
    1.1s
    forwards;
}
.hero.loaded 
.spec-box > div:nth-child(4){
    animation:
    fadeUp
    .7s
    1.3s
    forwards;
}
/* =========================
   产品卡
========================= */
.product-card{
    position: relative;
    width: 38rem;
    margin-top: 3rem;
    padding: 2rem;
    border-radius: 2.5rem;
    background: white;
    display: flex;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, .15);
    overflow: hidden;
    transition: .45s;
}
.product-card:hover .product-card__inner{
    transform:
    translateY(-1rem);
    box-shadow:
    0 3rem 7rem rgba(0,0,0,.2);
}
/* 产品图片 */
.product-card .procad{
    opacity: 0;
    transform: translateY(3rem);
    animation: fadeUp .7s 1s forwards;
}
.product-card .procarimg{
    width: 12rem;
    object-fit: contain;
    opacity: 0;
    transform: translateY(3rem);
    animation: fadeUp .7s .7s forwards;
    transition: .6s cubic-bezier(.22, 1, .36, 1);
}
.product-card:hover .procarimg{
    transform:
    scale(1.1)
    translateX(.5rem);
}
.product-card .procad1 img{
    width: 1.6rem;
}
.product-card .procad1 div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #145be8;
}
/* 产品文字 */
.product-card h3{
    font-size: 1.8rem;
    color: var(--orange);
    margin-bottom: 0.8rem;
}
.product-card p{
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 1.8rem;
    line-height: 1.5;
}
/* =========================
   产品卡光效
========================= */
.product-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.8),
    transparent
    );
    transition:
    .8s;
}
.product-card:hover::before{
    left:140%;
}
/* =========================
   播放状态退出
========================= */
.hero.is-playing .spec-box,
.hero.is-playing .product-card{
    opacity:0;
    transform:
    translateX(15rem);
    transition:
    .8s cubic-bezier(.65,0,.35,1);
}
/* =========================
   参数卡浮动
========================= */
.spec-box{
    animation:
    cardFloat
    6s
    ease-in-out
    infinite;
}
@keyframes cardFloat{
    0%{
        transform:
        translateY(0);
    }
    50%{
        transform:
        translateY(-1rem);
    }
    100%{
        transform:
        translateY(0);
    }
}
/* =================================================
   PART 5 / 8
   VIDEO CONTROL SYSTEM
================================================= */
/* =========================
   控制栏主体
========================= */
.video-control{
    position:absolute;
    left:6rem;
    right:6rem;
    bottom:3rem;
    z-index:30;
    height:6rem;
    padding:
    0 2.5rem;
    display:flex;
    align-items:center;
    gap:2rem;
    border-radius:3rem;
    background:
    rgba(0,0,0,.35);
    backdrop-filter:
    blur(2rem);
    border:
    .1rem solid rgba(255,255,255,.15);
    opacity:0;
    transform:
    translateY(3rem);
    transition:
    .5s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
}
/* 播放状态显示 */
.hero.is-playing .video-control{
    opacity:1;
    transform:
    translateY(0);
    pointer-events:auto;
}
/* 鼠标控制 */
.hero.control-hidden .video-control{
    opacity:0;
    transform:
    translateY(3rem);
}
/* =========================
   控制按钮
========================= */
.control-btn{
    width:3.5rem;
    height:3.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:1.8rem;
    border-radius:50%;
    transition:
    .35s;
}
.control-btn:hover{
    background:
    rgba(255,255,255,.15);
    transform:
    scale(1.1);
}
/* =========================
   进度条
========================= */
.progress{
    flex:1;
    height:.4rem;
    background:
    rgba(255,255,255,.35);
    border-radius:1rem;
    overflow:hidden;
    cursor:pointer;
}
.progress-inner{
    height:100%;
    width:0;
    background:white;
    border-radius:inherit;
    position:relative;
}
/* 进度光点 */
.progress-inner::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:1.2rem;
    height:1.2rem;
    background:white;
    border-radius:50%;
    transform:
    translateY(-50%);
    opacity:0;
    transition:.3s;
}
.progress:hover 
.progress-inner::after{
    opacity:1;
}
/* =========================
   时间
========================= */
.time-box{
    display:flex;
    gap:.8rem;
    color:white;
    font-size:1.3rem;
    min-width:9rem;
    justify-content:center;
}
/* =========================
   全屏按钮
========================= */
.fullscreen-btn{
    width:3.5rem;
    height:3.5rem;
    color:white;
    font-size:2rem;
}
/* =========================
   视频加载状态
========================= */
.hero.video-loading
.video-control{
    opacity:0;
}
/* =========================
   视频播放微动画
========================= */
.hero.is-playing 
.hero-video video{
    animation:
    videoStart
    1.5s
    cubic-bezier(.22,1,.36,1);
}
@keyframes videoStart{
    from{
        filter:
        brightness(.7);
    }
    to{
        filter:
        brightness(1);
    }
}
/* =================================================
   PART 6 / 8
   ADVANCED INTERACTION
   Mouse / Depth / Glow
================================================= */
/* =========================
   HERO 3D空间
========================= */
.hero{
    perspective:
    120rem;
}
.hero-content{
    transform-style:
    preserve-3d;
}
/* =========================
   Poster景深
========================= */
.hero-poster img{
    will-change:
    transform;
    transition:
    transform 1s cubic-bezier(.22,1,.36,1);
}
.hero:hover .hero-poster img{
    transform:
    scale(1.03);
}
/* =========================
   视频按钮高级效果
========================= */
.play-trigger{
    overflow:visible;
    box-shadow:
    0 2rem 5rem rgba(0,0,0,.25);
    will-change:
    transform;
}
/* 内部圆 */
.play-trigger::after{
    content:"";
    position:absolute;
    inset:1rem;
    border-radius:50%;
    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.9),
    rgba(255,255,255,.5)
    );
    z-index:-1;
}
/* hover 光晕 */
.play-trigger:hover{
    box-shadow:
    0 3rem 8rem rgba(20,91,232,.45);
}
/* =========================
   播放文字提示
========================= */
.play-tip{
    position:absolute;
    top:12rem;
    left:50%;
    transform:
    translateX(-50%);
    color:white;
    font-size:1.3rem;
    letter-spacing:.3rem;
    opacity:0;
    transition:
    .4s;
}
.play-trigger:hover 
.play-tip{
    opacity:1;
    transform:
    translateX(-50%)
    translateY(.5rem);
}
/* =========================
   鼠标靠近效果
========================= */
.hero.mouse-active 
.play-trigger{
    transition:
    transform .15s linear;
}
/* =========================
   光影覆盖
========================= */
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    background:
    radial-gradient(
    circle at center,
    transparent 0,
    rgba(0,0,0,.12)
    75%
    );
}
/* =========================
   视频播放后取消暗角
========================= */
.hero.is-playing::after{
    opacity:0;
    transition:
    1s;
}
/* =========================
   产品卡 3D
========================= */
.product-card{
    transform-style:
    preserve-3d;
    will-change:
    transform;
}
.product-card:hover{
    transform:
    translateY(-1rem)
    rotateX(3deg);
}
/* =========================
   参数卡玻璃增强
========================= */
.spec-box{
    position:relative;
    overflow:hidden;
    padding-top: 1rem;
}
.spec-box::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-50%;
    width:100%;
    height:100%;
    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
    );
    transform:
    rotate(30deg);
    opacity:0;
}
.spec-box:hover::before{
    animation:
    glassMove
    1s
    forwards;
}
@keyframes glassMove{
    from{
        transform:
        translateX(-5rem)
        rotate(30deg);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    to{
        transform:
        translateX(25rem)
        rotate(30deg);
        opacity:0;
    }
}
/* =========================
   页面进入光感
========================= */
.hero.loaded::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:7;
    pointer-events:none;
    background:
    linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.18),
    transparent 70%
    );
    animation:
    lightSweep
    1.5s
    .5s
    forwards;
}
@keyframes lightSweep{
    from{
        transform:
        translateX(-120%);
    }
    to{
        transform:
        translateX(120%);
    }
}
/* =========================
   禁用动画优化
========================= */
@media(prefers-reduced-motion:reduce){
    *{
        animation:none!important;
        transition:none!important;
    }
}
/* =================================================
   PART 7 / 8
   RESPONSIVE SYSTEM
================================================= */
/* =========================
   超大屏 1920+
========================= */
    .hero-left{
        left:6rem;
        top:15rem;
        width:60rem;
    }
    .hero-left h1{
        font-size:8rem;
    }
    .hero-left p{
        font-size: 1.8rem;
    }
    .hero-right{
        right: 8rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
/* =========================
   平板横屏
========================= */
/* =================================================
   PART 8 / 8
   PERFORMANCE
   FINAL FIX
================================================= */
/* =========================
   GPU动画优化
========================= */
.hero-poster,
.hero-video,
.hero-video video,
.hero-left,
.hero-right,
.play-trigger,
.video-transition,
.spec-box,
.product-card{
    will-change:
    transform,
    opacity;
    backface-visibility:
    hidden;
    transform-style:
    preserve-3d;
}
/* =========================
   视频渲染优化
========================= */
.hero-video video{
    object-position:center;
    background:#000;
}
/* =========================
   防止点击穿透
========================= */
.hero.is-playing 
.hero-content{
    pointer-events:none;
}
.hero.is-playing 
.video-control{
    pointer-events:auto;
}
/* =========================
   动画只执行一次
========================= */
.hero.loaded 
.hero-left,
.hero.loaded 
.hero-right{
    animation-fill-mode:
    forwards;
}
/* =========================
   防止重复进入动画
========================= */
.hero.loaded.once 
.hero-left,
.hero.loaded.once 
.hero-right{
    animation-play-state:
    paused;
}
/* =========================
   视频播放状态
========================= */
.hero.is-playing 
.play-trigger{
    display:none;
}
/* =========================
   视频结束保持状态
========================= */
.hero.video-ended 
.hero-content{
    opacity:0;
    pointer-events:none;
}
/* =========================
   视频结束重新播放
========================= */
.hero.video-ended 
.hero-video video{
    opacity:1;
}
/* =========================
   Loading动画
========================= */
.hero.loading::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:4rem;
    height:4rem;
    border-radius:50%;
    border:
    .3rem solid rgba(255,255,255,.3);
    border-top-color:white;
    transform:
    translate(-50%,-50%);
    animation:
    loadingRotate
    1s
    linear
    infinite;
    z-index:50;
}
@keyframes loadingRotate{
    to{
        rotate:360deg;
    }
}
/* =========================
   浏览器兼容
========================= */
@supports not
(backdrop-filter:blur(1rem)){
    .spec-box,
    .video-control{
        background:
        rgba(255,255,255,.95);
    }
}
/* =========================
   页面初始化状态
========================= */
/* =========================
   防止FOUC
========================= */
.no-animation *{
    animation:none!important;
    transition:none!important;
}
/* =========================
   最终按钮保护
========================= */
button{
    user-select:none;
    -webkit-tap-highlight-color:
    transparent;
}
/* 视频结束恢复Banner */
.hero.video-reset .hero-left,
.hero.video-reset .hero-right{
    opacity:1;
    transform:translateX(0);
}
.hero.video-reset .hero-poster{
    opacity:1;
}
.hero.video-reset .play-trigger{
    opacity:1;
    pointer-events:auto;
}

/*第二屏*/
/*==================================================
Strength Section
==================================================*/
:root{
    --strength-width:165rem;
    --strength-height:70rem;
    --primary:#0057ff;
    --secondary:#0d8bff;
    --title:#111111;
    --text:#666666;
    --border:#e9edf4;
    --radius-lg:2.4rem;
    --radius-md:2rem;
    --radius-sm:1.4rem;
    --shadow:
    0 1rem 4rem rgba(0,40,120,.08);
    --transition:
    .6s cubic-bezier(.22,1,.36,1);
}
/*==================================================
Section
==================================================*/
.strength-section{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#ffffff;
    padding-bottom: 5rem;
}
/*==================================================
Background Glow
==================================================*/
.strength-section::before{
    content:"";
    position:absolute;
    width:60rem;
    height:60rem;
    left:-15rem;
    top:-15rem;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(0,95,255,.10),
    transparent 70%);
    filter:blur(3rem);
    animation:
    glowLeft 8s ease-in-out infinite;
}
.strength-section::after{
    content:"";
    position:absolute;
    width:55rem;
    height:55rem;
    right:-10rem;
    bottom:-15rem;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(0,160,255,.08),
    transparent 70%);
    filter:blur(4rem);
    animation:
    glowRight 10s ease-in-out infinite;
}
/*==================================================
Container
==================================================*/
.strength-container{
    position:relative;
    width:165rem;
    height:100%;
    margin:0 auto;
    z-index:5;
}
/*==================================================
Top
==================================================*/
.strength-top{
    display: flex;
    align-items: flex-start;
    padding-top: 7rem;
    justify-content: space-between;
}
/*==================================================
Left
==================================================*/
.strength-heading{
    width: 117rem;
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity .9s ease, transform .9s cubic-bezier(.25, .46, .45, .94);
    will-change: transform, opacity;
}
.strength-section.show .strength-heading{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}
/*==================================================
Tag
==================================================*/
.strength-tag{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    font-size:1.4rem;
    font-weight:600;
    color: var(--blue);
    letter-spacing: .1rem;
    text-transform:uppercase;
    overflow:hidden;
}
.strength-tag::before{
    content:"";
    width:5rem;
    height:.2rem;
    background:var(--blue);
    transform:scaleX(0);
    transform-origin:left;
    transition:1s;
}
.strength-section.show .strength-tag::before{
    transform:scaleX(1);
}
/*==================================================
Title
==================================================*/
.strength-heading div{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.strength-heading h2{
    margin-top: 2.6rem;
    font-size: 5rem;
    line-height: 1.08;
    color: var(--title);
    font-weight: 700;
    letter-spacing: -.15rem;
    white-space: nowrap;
}
.strength-heading h2 span{
    color: var(--orange);
}
.strength-heading div p{
    font-size: 1.5rem;
    line-height: 1.5;
    margin-left: 3rem;
    padding: 0.3rem 3rem;
    border-left: 1px solid #e5e5e5;
}
/*==================================================
Right
==================================================*/
.strength-intro{
    opacity:0;
    transform:translateY(3rem);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.25,.46,.45,.94);
    will-change:transform,opacity;
}
.strength-section.show .strength-intro{
    opacity:1;
    transform:translateY(0);
}
/*==================================================
Button
==================================================*/
.strength-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    margin-top:3.2rem;
    height:5.4rem;
    padding:0 2.8rem;
    border-radius:1rem;
    text-decoration:none;
    color:#ffffff;
    background:
    linear-gradient(
    135deg,
    #0057ff,
    #2e9bff);
    overflow:hidden;
    transition:var(--transition);
}
.strength-btn span{
    position:relative;
    z-index:2;
    font-size:1.6rem;
    font-weight:600;
}
.strength-btn svg{
    position:relative;
    width:2rem;
    height:2rem;
    z-index:2;
    transition:.4s;
}
.strength-btn::before{
    content:"";
    position:absolute;
    left:-130%;
    top:0;
    width:60%;
    height:100%;
    transform:skewX(-25deg);
    background:
    rgba(255,255,255,.25);
    transition:.8s;
}
.strength-btn:hover::before{
    left:140%;
}
.strength-btn:hover{
    transform:translateY(-.5rem);
    box-shadow:
    0 1rem 3rem rgba(0,95,255,.28);
}
.strength-btn:hover svg{
    transform:translateX(.6rem);
}
/*==================================================
Glow Animation
==================================================*/
@keyframes glowLeft{
0%{
transform:translate(0,0);
}
50%{
transform:translate(2rem,1rem);
}
100%{
transform:translate(0,0);
}
}
@keyframes glowRight{
0%{
transform:translate(0,0);
}
50%{
transform:translate(-2rem,-1rem);
}
100%{
transform:translate(0,0);
}
}
/*==================================================
Statistics
==================================================*/
.strength-stats{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2.4rem;
    margin-top:6rem;
}
/*==================================================
Card
==================================================*/
.stat-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:2rem;
    height:15rem;
    padding:0 2rem;
    background:#ffffff;
    border:.1rem solid var(--border);
    border-radius:2rem;
    overflow:hidden;
    cursor:pointer;
    opacity:0;
    transform:translateY(3rem);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.25,.46,.45,.94);
    will-change:transform,opacity;
}
/*==================================================
Scroll Show
==================================================*/
.strength-section.show .stat-card{
    opacity:1;
    transform:translateY(0);
}
.strength-section.show .stat-card:nth-child(1){
    transition-delay:.10s;
}
.strength-section.show .stat-card:nth-child(2){
    transition-delay:.18s;
}
.strength-section.show .stat-card:nth-child(3){
    transition-delay:.26s;
}
.strength-section.show .stat-card:nth-child(4){
    transition-delay:.34s;
}
/*==================================================
Hover
==================================================*/
.stat-card:hover{
    transform:translateY(-.8rem);
    border-color:#d6e6ff;
    box-shadow:
    0 2rem 5rem rgba(0,70,180,.12);
}
/*==================================================
Blue Background
==================================================*/
.stat-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
    135deg,
    rgba(0,87,255,.05),
    rgba(0,170,255,.02));
    opacity:0;
    transition:.5s;
}
.stat-card:hover::before{
    opacity:1;
}
/*==================================================
Top Light
==================================================*/
.stat-card::after{
    content:"";
    position:absolute;
    left:-60%;
    top:0;
    width:40%;
    height:100%;
    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.7),
    transparent);
    transform:skewX(-25deg);
    transition:1s;
}
.stat-card:hover::after{
    left:140%;
}
/*==================================================
Icon
==================================================*/
.stat-icon{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:8rem;
    height:8rem;
    flex-shrink:0;
    border-radius:50%;
    background:#fff;
    box-shadow:
        0 1rem 3rem rgba(16,70,180,.08),
        0 .3rem 1rem rgba(16,70,180,.04);
    overflow:visible;
}
.stat-icon::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:6rem;
    height:6rem;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(0,95,255,.12),
    transparent 72%);
    filter:blur(1rem);
    opacity:.55;
    transition:.5s;
}
.stat-icon img{
    position:relative;
    z-index:5;
    width:5rem;
    transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    filter .45s;
}
.icon-ring{
    position:absolute;
    inset:-.2rem;
    width:calc(100% + .4rem);
    height:calc(100% + .4rem);
    overflow:visible;
    transform:rotate(-90deg);
    z-index: 5;
}
.ring-bg{
    fill:none;
    stroke:#edf2fa;
    stroke-width:4;
}
.ring-progress{
    fill:none;
    stroke:#ff8c1a;
    stroke-width:4;
    stroke-linecap:round;
    /*
        圆周长≈289
    */
    stroke-dasharray:72 289;
    stroke-dashoffset:0;
    transition:
    stroke-dasharray
    .8s cubic-bezier(.15,.85,.3,1);
}
.stat-card{
    transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s;
}
.stat-card:hover{
    transform:translateY(-.8rem);
    box-shadow:
    0 2rem 5rem rgba(0,90,200,.12);
}
.stat-card:hover .ring-progress{
    stroke-dasharray:289 289;
}
.stat-card:hover .stat-icon::after{
    opacity:1;
    transform:
    translate(-50%,-50%)
    scale(1.18);
}
.stat-card:hover .stat-icon img{
    transform:scale(1.08);
    filter:
    drop-shadow(0 0 .8rem rgba(0,95,255,.28));
}
.stat-icon{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:8.6rem;
    height:8.6rem;
    flex-shrink:0;
}
/*==================================================
Content
==================================================*/
.stat-content{
    position:relative;
    z-index:3;
}
/*==================================================
Number
==================================================*/
.stat-content div{
    position: relative;
    display: flex;
    font-size: 1.6rem;
    font-weight: bold;
    color: black;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.stat-content h3{
    position: relative;
    margin: 0;
    font-size: 3rem;
    font-weight: bold;
    color: #145be8;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -.08rem;
}
.stat-content p{
    color: #145be8;
    font-size: 3rem;
    font-weight: bold;
    margin-left: 0.5rem;
}
.stat-content h4{
    margin-left: 1.2rem;
}
/*==================================================
Light Sweep
==================================================*/
.stat-content div::after{
    content:"";
    position:absolute;
    left:-104%;
    top:0;
    width:50%;
    height:100%;
    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.9),
    transparent);
    transform:skewX(-20deg);
}
.stat-card:hover .stat-content div::after{
    animation:
    numberSweep 1s ease;
}
/*==================================================
Text
==================================================*/
.stat-content span{
    display: block;
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #7a7a7a;
    line-height: 1.3;
}
/*==================================================
Floating Glow
==================================================*/
.stat-card .hover-glow{
    position:absolute;
    width:18rem;
    height:18rem;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(0,120,255,.12),
    transparent 70%);
    pointer-events:none;
    opacity:0;
}
/*==================================================
Connection Line
==================================================*/
.stat-card:not(:last-child)::marker{
    display:none;
}
.strength-stats::before{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    top:7.5rem;
    height:.1rem;
    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(0,95,255,.12),
    transparent);
    z-index:0;
}
/*==================================================
Energy Dot
==================================================*/
.strength-stats::after{
    content:"";
    position:absolute;
    top:7rem;
    left:12%;
    width:.8rem;
    height:.8rem;
    border-radius:50%;
    background:#1a7cff;
    box-shadow:
    0 0 1rem rgba(0,120,255,.6);
    animation:
    energyMove 4s linear infinite;
}
/*==================================================
Animation
==================================================*/
@keyframes numberSweep{
    from{
        left:-80%;
    }
    to{
        left:100%;
    }
}
@keyframes energyMove{
    0%{
        left:12%;
        opacity:0;
    }
    10%{
        opacity:1;
    }
    90%{
        opacity:1;
    }
    100%{
        left:88%;
        opacity:0;
    }
}
/*==================================================
Feature Cards
==================================================*/
.strength-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2.4rem;
    margin-top:4.8rem;
}
/*==================================================
Card
==================================================*/
.feature-card{
    position:relative;
    height:25rem;
    border-radius:2.4rem;
    overflow:hidden;
    background:#ffffff;
    cursor:pointer;
    box-shadow:0 1rem 4rem rgba(0,40,120,.06);
    opacity:0;
    transform:translateY(3rem);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.25,.46,.45,.94);
    will-change:transform,opacity;
}
/*==================================================
Scroll Show
==================================================*/
.strength-section.show .feature-card{
    opacity:1;
    transform:translateY(0);
}
.strength-section.show .feature-card:nth-child(1){
    transition-delay:.42s;
}
.strength-section.show .feature-card:nth-child(2){
    transition-delay:.50s;
}
.strength-section.show .feature-card:nth-child(3){
    transition-delay:.58s;
}
/*==================================================
Hover
==================================================*/
.feature-card:hover{
    transform:translateY(-.8rem);
    box-shadow:0 2rem 5rem rgba(0,70,180,.15);
}
/*==================================================
Image
==================================================*/
.feature-image{
    position:absolute;
    inset:0;
    overflow:hidden;
}
.feature-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
    transform 1s cubic-bezier(.22,1,.36,1),
    filter .8s;
}
.feature-card:hover .feature-image img{
    transform:scale(1.08);
}
/*==================================================
Overlay
==================================================*/
.feature-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
    180deg,
    rgba(0,0,0,.05),
    rgba(0,0,0,.55));
    transition:.5s;
}
.feature-card:hover .feature-overlay{
    background:
    linear-gradient(
    180deg,
    rgba(0,70,180,.10),
    rgba(0,0,0,.65));
}
/*==================================================
Sweep Light
==================================================*/
.feature-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:40%;
    height:100%;
    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.30),
    transparent);
    transform:skewX(-25deg);
    transition:1s;
    z-index:3;
}
.feature-card:hover::before{
    left:140%;
}
/*==================================================
Content
==================================================*/
.feature-content{
    position:absolute;
    left:3rem;
    right:3rem;
    bottom:3rem;
    z-index:5;
    transition:.5s;
}
.feature-card:hover .feature-content{
    transform:translateY(-.6rem);
}
/*==================================================
Tag
==================================================*/
.feature-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:3rem;
    padding:0 1.4rem;
    border-radius:5rem;
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:.12rem;
    color:#ffffff;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(1rem);
}
/*==================================================
Title
==================================================*/
.feature-content h3{
    margin-top:1.6rem;
    font-size:2.8rem;
    color:#ffffff;
    line-height:1.2;
    font-weight:700;
}
/*==================================================
Text
==================================================*/
.feature-content p{
    margin-top:1.4rem;
    font-size:1.5rem;
    line-height:1.8;
    color:rgba(255,255,255,.82);
}
/*==================================================
List
==================================================*/
.feature-list{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:2rem;
}
.feature-list li{
    list-style:none;
    height:3.4rem;
    padding:0 1.5rem;
    border-radius:5rem;
    display:flex;
    align-items:center;
    background:rgba(255,255,255,.16);
    color:#ffffff;
    font-size:1.3rem;
    backdrop-filter:blur(.8rem);
    transform:translateY(1rem);
    opacity:0;
    transition:.5s;
}
.feature-card:hover .feature-list li{
    transform:translateY(0);
    opacity:1;
}
.feature-card:hover .feature-list li:nth-child(1){
    transition-delay:.05s;
}
.feature-card:hover .feature-list li:nth-child(2){
    transition-delay:.12s;
}
.feature-card:hover .feature-list li:nth-child(3){
    transition-delay:.19s;
}
/*==================================================
Link
==================================================*/
.feature-content>a{
    display:inline-flex;
    align-items:center;
    margin-top:2rem;
    font-size:1.5rem;
    font-weight:600;
    color:#ffffff;
    text-decoration:none;
    transition:.4s;
}
.feature-content>a::after{
    content: "\2192";
    margin-left:.8rem;
    transition:.4s;
}
.feature-card:hover .feature-content>a{
    letter-spacing:.05rem;
}
.feature-card:hover .feature-content>a::after{
    transform:translateX(.8rem);
}
/*==================================================
Support Items
==================================================*/
.support-items{
    display:flex;
    gap:1rem;
    margin-top:2rem;
}
.support-item{
    flex:1;
    padding:1.4rem;
    border-radius:1.4rem;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(.8rem);
    text-align:center;
    transform:translateY(1rem);
    opacity:0;
    transition:.45s;
}
.feature-card:hover .support-item{
    transform:translateY(0);
    opacity:1;
}
.feature-card:hover .support-item:nth-child(1){
    transition-delay:.05s;
}
.feature-card:hover .support-item:nth-child(2){
    transition-delay:.15s;
}
.feature-card:hover .support-item:nth-child(3){
    transition-delay:.25s;
}
.support-item strong{
    display:block;
    font-size:2.2rem;
    color:#ffffff;
}
.support-item span{
    display:block;
    margin-top:.6rem;
    font-size:1.2rem;
    color:rgba(255,255,255,.82);
}
/*==================================================
Section Enter Animation
==================================================*/
.strength-section{
    --enter-distance:4rem;
}
.strength-section.show .strength-tag{
    animation:
    tagFade .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tagFade{
    from{
        opacity:0;
        transform:
        translateY(2rem);
    }
    to{
        opacity:1;
        transform:
        translateY(0);
    }
}
/*==================================================
Mouse Glow
==================================================*/
.stat-card,
.feature-card{
    isolation:isolate;
}
.stat-card::selection,
.feature-card::selection{
    background:transparent;
}
.mouse-glow{
    position:absolute;
    width:22rem;
    height:22rem;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(0,102,255,.14) 0%,
        rgba(0,102,255,.05) 45%,
        transparent 75%
    );
    transform:
    translate(-50%,-50%);
    pointer-events:none;
    opacity:0;
    transition:
        opacity .35s ease;
    filter:blur(1rem);
    z-index:1;
}
.stat-card:hover .mouse-glow,
.feature-card:hover .mouse-glow{
    opacity:1;
}
/*==================================================
Card Border Glow
==================================================*/
.stat-card{
    position:relative;
}
.stat-card .border-light{
    position:absolute;
    inset:0;
    border-radius:2rem;
    padding:.1rem;
    background:
    linear-gradient(
        135deg,
        rgba(0,102,255,.6),
        transparent,
        rgba(255,180,0,.5)
    );
    opacity:0;
    transition:.45s;
    pointer-events:none;
    z-index:2;
}
.stat-card:hover .border-light{
    opacity:1;
}
/*==================================================
3D Perspective
==================================================*/
.feature-card{
    transform-style:preserve-3d;
    perspective:120rem;
}
.feature-image{
    transform:
    translateZ(0);
    transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.feature-card:hover .feature-image{
    transform:
    translateZ(2rem);
}
.feature-content{
    transform:
    translateZ(4rem);
}
/*==================================================
Title Hover
==================================================*/
.feature-content h3{
    transition:
    transform .45s ease,
    letter-spacing .45s ease;
}
.feature-card:hover h3{
    transform:
    translateY(-.2rem);
    letter-spacing:.05rem;
}
/*==================================================
Paragraph
==================================================*/
.feature-content p{
    transition:
    color .35s ease,
    transform .45s ease;
}
.feature-card:hover p{
    transform:
    translateY(-.2rem);
}
/*==================================================
Image Saturation
==================================================*/
.feature-image img{
    filter:
    saturate(.92)
    contrast(1);
}
.feature-card:hover img{
    filter:
    saturate(1.08)
    contrast(1.05);
}
/*==================================================
Button Interaction
==================================================*/
.strength-btn{
    will-change:
    transform;
}
.strength-btn:active{
    transform:
    scale(.96);
}
/*==================================================
Counter
==================================================*/
.counter{
    display:inline-block;
}
/*==================================================
Performance
==================================================*/
.feature-card,
.stat-card,
.feature-image img,
.strength-btn{
    will-change:
    transform,
    opacity;
}
/*==================================================
Reduce Motion
==================================================*/
@media (prefers-reduced-motion:reduce){
    *{
        animation:none!important;
        transition:none!important;
    }
}
/*第三屏-产品*/
/*==================================================
                INDEX 03
            PRODUCT CENTER
==================================================*/
.ind3_product{
    position: relative;
    overflow: hidden;
    padding: 3rem 0;
}
.ind3_container{
    width: 165rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
/*==================================================
                    Background
==================================================*/
.ind3_bg{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.ind3_bg_circle{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(26,115,232,.08),
    transparent 70%);
}
.ind3_bg_circle1{
    width:70rem;
    height:70rem;
    left:-20rem;
    top:-15rem;
}
.ind3_bg_circle2{
    width:80rem;
    height:80rem;
    right:-25rem;
    bottom:-20rem;
}
.ind3_bg_grid{
    position:absolute;
    inset:0;
    opacity:.05;
    background-image:
    linear-gradient(rgba(0,0,0,.1) .1rem,transparent .1rem),
    linear-gradient(90deg,rgba(0,0,0,.1) .1rem,transparent .1rem);
    background-size:4rem 4rem;
}
/*==================================================
                    Header
==================================================*/
.ind3_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8rem;
    margin-bottom: 3rem;
}
.ind3_header_left{
    width: 117rem;
}
.ind3_subtitle{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: .1rem;
    text-transform: uppercase;
    overflow: hidden;
}
.ind3_subtitle::before{
    content: "";
    width: 5rem;
    height: .2rem;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s;
}
.ind3_product.ind3_show .ind3_subtitle::before{
    transform: scaleX(1);
}
.ind3_header_left div{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.ind3_heading{
    margin-top: 2.6rem;
    font-size: 5rem;
    line-height: 1.08;
    color: var(--title);
    font-weight: 700;
    letter-spacing: -.15rem;
    white-space: nowrap;
}
.ind3_heading span{
    color: var(--orange);
}
.ind3_desc{
    font-size: 1.5rem;
    line-height: 1.5;
    margin-left: 3rem;
    padding: 0.3rem 3rem;
    border-left: 1px solid #e5e5e5;
}
.ind3_header_right{
    flex-shrink:0;
}
.ind3_more_btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:1.6rem 3.4rem;
    border:.1rem solid #1a73e8;
    border-radius:1rem;
    font-size:1.5rem;
    font-weight:600;
    color:#1a73e8;
    text-decoration:none;
    transition:.35s;
}
.ind3_more_btn:hover{
    background:#1a73e8;
    color:#fff;
    transform:translateY(-.3rem);
    box-shadow:0 1rem 3rem rgba(26,115,232,.18);
}
.ind3_more_arrow{
    width:.8rem;
    height:.8rem;
    border-top:.2rem solid currentColor;
    border-right:.2rem solid currentColor;
    transform:rotate(45deg);
}
/*==================================================
                    Tabs
==================================================*/
.ind3_tabs{
    position: relative;
    display: flex;
    align-items: center;
    width: 65rem;
    height: 5.2rem;
    border-radius: 3rem;
    background: #fff;
    border: 1px solid #e8edf7;
    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .05);
    margin-bottom: 1rem;
}
/* 蓝色滑块 */
.ind3_tab_bg{
    position: absolute;
    width: calc(50%);
    height: calc(100%);
    border-radius: 3rem;
    background: #1559ff;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    z-index: 0;
}
/* 按钮 */
.ind3_tab{
    position:relative;
    z-index:1;
    flex:1;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
    border:0;
    background:none;
    cursor:pointer;
    color:#46536b;
    font-size:1.6rem;
    font-weight:600;
    transition:.35s;
}
/* icon */
.ind3_tab_icon{
    width:4rem;
    height:4rem;
    display:flex;
}
/* active文字 */
.ind3_tab.active{
    color:#fff;
}
/*==================================================
                    Main Panel
==================================================*/
.ind3_panel{
    display: flex;
    gap: 3rem;
    padding: 3rem;
    border-radius: 3rem;
    background: #fff;
    box-shadow: 0 2rem 6rem rgba(15, 23, 42, .08);
    position: relative;
    overflow: hidden;
    justify-content: flex-start;
}
.ind3_panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(135deg,
    rgba(26,115,232,.03),
    transparent 45%);
    pointer-events:none;
}
/*==================================================
                    Sidebar
==================================================*/
.ind3_sidebar{
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    position: relative;
    z-index: 2;
    width: 45rem;
}
.ind3_content{
    position:relative;
}
.ind3_content_item{
    display:none;
    gap:3rem;
    animation:none;
    flex-direction: row;
}
.ind3_content_item.active{
    display: flex;
    animation: ind3ContentShow .45s ease;
    justify-content: flex-start;
}
@keyframes ind3ContentShow{
    from{
        opacity:0;
        transform:translateY(2rem);
    }
    to{
        opacity:1;
        transform:none;
    }
}
.ind3_series{
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    min-height: 8.8rem;
    padding: 1.8rem;
    background: #f8fafc;
    border: .1rem solid #edf2f7;
    border-radius: 2rem;
    text-decoration: none;
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
    overflow: hidden;
}
.ind3_series::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:.4rem;
    height:100%;
    background:#1a73e8;
    transform:scaleY(0);
    transform-origin:center;
    transition:transform .35s ease;
}
.ind3_series:hover{
    transform:translateX(.6rem);
    border-color:rgba(26,115,232,.35);
    background:#edf2fe;
    box-shadow:0 1.2rem 3rem rgba(15,23,42,.08);
}
.ind3_series.active{
    background:#edf2fe;
    border-color:#1a73e8;
    box-shadow:0 1.5rem 3.5rem rgba(26,115,232,.14);
}
.ind3_series.active::before{
    transform:scaleY(1);
}
.ind3_series_icon{
    width: 7.2rem;
    height: 7.2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    transition: .35s;
    border: 1rem solid #fff;
}
.ind3_series:hover .ind3_series_icon,
.ind3_series.active .ind3_series_icon{
    background:#eef5ff;
}
.ind3_series_icon div{
    width:3rem;
    height:3rem;
    object-fit:contain;
    transition:transform .35s ease;
    background-image: url(../images/jiancha-999.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.ind3_series:hover .ind3_series_icon div{
    transform:scale(1.08);
    background-image: url(../images/jiancha-blue.png);
}
.ind3_series.active .ind3_series_icon div{
    transform:scale(1.08);
    background-image: url(../images/jiancha-blue.png);
}
.ind3_series_name{
    flex:1;
    font-size:1.7rem;
    color:#20242b;
    transition:color .3s;
}
.ind3_series:hover .ind3_series_name h4,
.ind3_series.active .ind3_series_name h4{
    color:#1a73e8;
}
.ind3_series_name span{
    font-size: 1.3rem;
    display: block;
    margin: 0.5rem 0rem;
}
.ind3_series_name p{
    color: #1a73e8;
    font-size: 1.3rem;
    font-weight: bold;
}
.ind3_series_arrow{
    width:1rem;
    height:1rem;
    flex-shrink:0;
    border-top:.2rem solid #c7ccd5;
    border-right:.2rem solid #c7ccd5;
    transform:rotate(45deg);
    transition:.3s;
}
.ind3_series:hover .ind3_series_arrow,
.ind3_series.active .ind3_series_arrow{
    border-color:#1a73e8;
    transform:translateX(.4rem) rotate(45deg);
}
/*==================================================
            Sidebar Entrance Animation
==================================================*/
.ind3_series{
    opacity:0;
    transform:translateX(-2rem);
    animation:ind3SeriesIn .6s forwards;
}
.ind3_series:nth-child(1){
    animation-delay:.05s;
}
.ind3_series:nth-child(2){
    animation-delay:.12s;
}
.ind3_series:nth-child(3){
    animation-delay:.19s;
}
.ind3_series:nth-child(4){
    animation-delay:.26s;
}
.ind3_series:nth-child(5){
    animation-delay:.33s;
}
.ind3_series:nth-child(6){
    animation-delay:.40s;
}
@keyframes ind3SeriesIn{
    from{
        opacity:0;
        transform:translateX(-2rem);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}
/*==================================================
                    Center Stage
==================================================*/
.ind3_stage{
    position: relative;
    border-radius: 3rem;
    overflow: hidden;
    background: linear-gradient(145deg, #ffffff, #f7faff);
    z-index: 2;
}
.ind3_stage_bg{
    position:absolute;
    inset:0;
    background:
    radial-gradient(
        circle at 70% 50%,
        rgba(26,115,232,.12),
        transparent 35%
    );
    pointer-events:none;
}
/* 光晕 */
.ind3_stage_light{
    position:absolute;
    width:45rem;
    height:45rem;
    right:10%;
    top:50%;
    transform:translateY(-50%);
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(26,115,232,.18),
        transparent 70%
    );
    filter:blur(2rem);
    animation:
    ind3LightMove 6s ease-in-out infinite;
}
@keyframes ind3LightMove{
    0%,
    100%{
        opacity:.6;
        transform:
        translateY(-50%)
        scale(1);
    }
    50%{
        opacity:1;
        transform:
        translateY(-50%)
        scale(1.08);
    }
}
/* 产品阴影 */
.ind3_stage_shadow{
    position:absolute;
    right:15%;
    bottom:8rem;
    width:32rem;
    height:5rem;
    border-radius:50%;
    background:
    rgba(0,0,0,.12);
    filter:blur(2rem);
}
/* 内部左右结构 */
.ind3_stage_inner{
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    background-image: url(../images/ind3probigback.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/*==================================================
                    Stage Info
==================================================*/
.ind3_stage_info{
    width:45%;
    position:relative;
    z-index:3;
}
.ind3_tag{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.8rem;
    height: 2.2rem;
    padding: 0 1.4rem;
    border-radius: 99rem;
    background: linear-gradient(
        180deg,
        #ffb257 0%,
        #ff8a36 48%,
        #ff6b1b 100%
    );
    color:#fff;
    font-size:1.3rem;
    font-weight:700;
    letter-spacing:.03rem;
    box-shadow:
        0 .3rem .8rem rgba(255,111,20,.28),
        inset 0 .1rem .15rem rgba(255,255,255,.35);
    overflow:hidden;
}
.ind3_tag::before{
    content:"";
    position:absolute;
    top:.15rem;
    left:.5rem;
    width:3rem;
    height:.7rem;
    border-radius:99rem;
    background:rgba(255,255,255,.45);
    filter:blur(.2rem);
    transform:rotate(-8deg);
}
.ind3_model{
    display:block;
    font-size:1.8rem;
    font-weight:700;
    color:#1a73e8;
    margin-bottom:1.2rem;
}
.ind3_stage_info .ind3_title{
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 700;
    color: #15191f;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
}
.ind3_stage_info .ind3_title::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: .2rem;
    background: #ff7a00;
}
.ind3_intro{
    font-size: 1.4rem;
    line-height: 1.4;
    color: #6b7280;
    max-width: 38rem;
    margin-bottom: 2rem;
}
/* 参数 */
.ind3_specs{
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-bottom:1.5rem;
}
.ind3_spec{
    display: flex;
    align-items: center;
    gap: 1.8rem;
    justify-content: flex-start;
    width: 22rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 1rem;
}
.ind3_spec .ind3_spec_img{
    background-color: #edf2fe;
    border-radius: 50%;
    padding: 0.5rem;
}
.ind3_spec .ind3_spec_img img{
    width: 2.5rem;
}
.ind3_spec p{
    font-size:1.7rem;
    color:#111827;
    font-weight:600;
}
.ind3_spec span{
    font-size:1.3rem;
    color:#7b8492;
}
/* Button */
.ind3_btn{
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    padding: 0.5rem 1.2rem;
    border-radius: 999rem;
    color: #1a73e8;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
    width: 22rem;
    transition: .35s;
    justify-content: space-between;
}
.ind3_btn:hover{
    transform:translateY(-.4rem);
}
.ind3_btn_arrow{
    width:.9rem;
    height:.9rem;
    border-top:.2rem solid #1a73e8;
    border-right:.2rem solid #1a73e8;
    transform:rotate(45deg);
}
/*==================================================
                    Product Media
==================================================*/
.ind3_stage_media{
    width:57rem;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:2;
}
.ind3_product_glow{
    position:absolute;
    width:40rem;
    height:40rem;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(26,115,232,.2),
        transparent 70%
    );
}
.ind3_product_shadow{
    position:absolute;
    bottom:9rem;
    width:35rem;
    height:4rem;
    background:
    rgba(0,0,0,.16);
    border-radius:50%;
    filter:blur(2rem);
}
.ind3_product_img{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.ind3_product_img img{
    width:100%;
    object-fit:contain;
    position:relative;
    z-index:2;
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.ind3_stage:hover .ind3_product_img img{
    transform:
    translateY(-1rem)
    scale(1.03);
}
/*==================================================
                Right Product Grid
==================================================*/
.ind3_grid{
    position:relative;
    z-index:2;
}
.ind3_grid_list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.8rem;
}
/*==================================================
                    Product Card
==================================================*/
.ind3_forr{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: .1rem solid #d9d9d9;
    padding: 1.5rem 1.5rem;
    border-radius: 2rem;
    margin-top: 2rem;
}
.ind3_forr .ind3_forrimg{
    width: 5rem;
    height: 5rem;
    background-color: #edf2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1rem;
}
.ind3_forr .ind3_forrimg img{
    width: 5rem;
}
.ind3_forr .ind3_forrtit{
    margin-left: 2rem;
}
.ind3_forr .ind3_forrtit p{
    font-size: 1.7rem;
    color: #1a73e8;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.ind3_forr .ind3_forrtit span{
    font-size: 1.3rem;
}
.ind3_card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    min-height: 20rem;
    border: .1rem solid #edf1f7;
    border-radius: 2rem;
    background: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
    width: 18rem;
}
.ind3_card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        180deg,
        rgba(26,115,232,.04),
        transparent 55%
    );
    opacity:0;
    transition:.35s;
}
.ind3_card:hover{
    transform:
    translateY(-.8rem);
    border-color:
    rgba(26,115,232,.3);
    box-shadow:
    0 2rem 4rem rgba(15,23,42,.08);
}
.ind3_card:hover::before{
    opacity:1;
}
.ind3_card.active{
    border-color:#1a73e8;
    box-shadow:
    0 2rem 4rem rgba(26,115,232,.15);
}
/*==================================================
                    Product Image
==================================================*/
.ind3_card_img{
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
    border-radius: 2rem;
    overflow: hidden;
}
.ind3_card_img::after{
    content:"";
    position:absolute;
    bottom:1rem;
    width:65%;
    height:1.6rem;
    background:rgba(0,0,0,.08);
    border-radius:50%;
    filter:blur(1rem);
    transition:.4s;
}
.ind3_card_img img{
    width: 13rem;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: transform .45s ease;
}
.ind3_card:hover .ind3_card_img img{
    transform:
    translateY(-.6rem)
    scale(1.06);
}
.ind3_card:hover .ind3_card_img::after{
    transform:scale(.88);
    opacity:.55;
}
.ind3_card_content div svg{
    width: 2.5rem;
}
/*==================================================
                    Card Text
==================================================*/
.ind3_card_content div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ind3_card_content div p{
    font-size: 1.3rem;
}
.ind3_card_model{
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d2129;
    transition: .3s;
    margin-bottom: 1rem;
    padding-right: 0rem;
    height: 4rem;
    width: 16rem;
}
.ind3_card:hover .ind3_card_model,
.ind3_card.active .ind3_card_model{
    color:#1a73e8;
}
/*==================================================
                    Arrow
==================================================*/
.ind3_card_arrow{
    position:absolute;
    top:1.8rem;
    right:1.8rem;
    width:2.8rem;
    height:2.8rem;
    border-radius:50%;
    background:#f4f7fb;
    opacity:0;
    transform:
    translate(.6rem,-.6rem);
    transition:.35s;
}
.ind3_card_arrow::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:.7rem;
    height:.7rem;
    border-top:.2rem solid #1a73e8;
    border-right:.2rem solid #1a73e8;
    transform:
    translate(-60%,-40%)
    rotate(45deg);
}
.ind3_card:hover .ind3_card_arrow{
    opacity:1;
    transform:
    translate(0,0);
}
/*==================================================
                Card Entrance
==================================================*/
.ind3_card{
    opacity:0;
    transform:
    translateY(2rem);
    animation:
    ind3CardIn .65s forwards;
}
.ind3_card:nth-child(1){animation-delay:.05s;}
.ind3_card:nth-child(2){animation-delay:.10s;}
.ind3_card:nth-child(3){animation-delay:.15s;}
.ind3_card:nth-child(4){animation-delay:.20s;}
.ind3_card:nth-child(5){animation-delay:.25s;}
.ind3_card:nth-child(6){animation-delay:.30s;}
@keyframes ind3CardIn{
    from{
        opacity:0;
        transform:
        translateY(2rem);
    }
    to{
        opacity:1;
        transform:
        translateY(0);
    }
}
/*==================================================
                    Bottom Feature
==================================================*/
.ind3_features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
    width: 165rem;
    margin: 4rem auto 0rem auto;
}
.ind3_feature{
    position:relative;
    display:flex;
    align-items:center;
    gap:1.8rem;
    padding:2.2rem;
    border:.1rem solid #edf2f7;
    border-radius:2rem;
    background:#fff;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
    overflow:hidden;
}
.ind3_feature::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:.3rem;
    background:#1a73e8;
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}
.ind3_feature:hover{
    transform:translateY(-.6rem);
    border-color:rgba(26,115,232,.25);
    box-shadow:0 1.5rem 3rem rgba(15,23,42,.08);
}
.ind3_feature:hover::before{
    transform:scaleX(1);
}
.ind3_feature_icon{
    width:5.6rem;
    height:5.6rem;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:1.6rem;
    background:#eef5ff;
    transition:.35s;
}
.ind3_feature:hover .ind3_feature_icon{
    transform:rotate(-8deg) scale(1.08);
}
.ind3_feature_icon img{
    width:3rem;
    height:3rem;
    object-fit:contain;
}
.ind3_feature_text{
    flex:1;
}
.ind3_feature_title{
    font-size:1.7rem;
    font-weight:700;
    color:#1d2129;
    margin-bottom:.8rem;
}
.ind3_feature_desc{
    font-size:1.4rem;
    line-height:1.7;
    color:#7a808a;
}
/*==================================================
                Product Panel Animation
==================================================*/
.ind3_group{
    display:none;
    opacity:0;
    transform:translateY(3rem);
}
.ind3_group.active{
    display:block;
    animation:ind3PanelShow .6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes ind3PanelShow{
    from{
        opacity:0;
        transform:
        translateY(3rem)
        scale(.98);
    }
    to{
        opacity:1;
        transform:
        translateY(0)
        scale(1);
    }
}
/*==================================================
                Stage Float Animation
==================================================*/
.ind3_product_img{
    animation:ind3Float 5s ease-in-out infinite;
}
@keyframes ind3Float{
    0%,
    100%{
        transform:
        translateY(0);
    }
    50%{
        transform:
        translateY(-1rem);
    }
}
/*==================================================
                Scroll Reveal
==================================================*/
.ind3_header,
.ind3_tabs,
.ind3_panel,
.ind3_features{
    opacity:0;
    transform:translateY(4rem);
    transition:
        opacity .8s ease,
        transform .8s ease;
}
.ind3_product.ind3_show .ind3_header,
.ind3_product.ind3_show .ind3_tabs,
.ind3_product.ind3_show .ind3_panel,
.ind3_product.ind3_show .ind3_features{
    opacity:1;
    transform:translateY(0);
}
.ind3_product.ind3_show .ind3_tabs{
    transition-delay:.08s;
}
.ind3_product.ind3_show .ind3_panel{
    transition-delay:.16s;
}
.ind3_product.ind3_show .ind3_features{
    transition-delay:.28s;
}
/*第四屏-案例*/
/*==========================================================
IND4
==========================================================*/
.ind4{
    position:relative;
    overflow:hidden;
    padding-bottom:5rem;
    background:#ffffff;
}
.ind4_bg{
    position:absolute;
    inset:0;
    z-index:0;
}
.ind4_bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.ind4_overlay{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.90);
    z-index:1;
}
.ind4_gradient{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:radial-gradient(circle at left center,rgba(47,131,255,.08),transparent 55%);
    pointer-events:none;
    z-index:2;
}
.ind4_container{
    position:relative;
    width:170rem;
    margin:0 auto;
    z-index:5;
}
/*==========================================================
Header
==========================================================*/
/*==================================================
Top
==================================================*/
.ind4_title{
    display: flex;
    align-items: flex-start;
    padding-top: 5rem;
    justify-content: space-between;
    margin-bottom: 4rem;
}
/*==================================================
Left
==================================================*/
.ind4_title_small{
    width: 117rem;
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity .9s ease, transform .9s cubic-bezier(.25, .46, .45, .94);
    will-change: transform, opacity;
}
.ind4_title.ind4_show .ind4_title_small{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}
/*==================================================
Right
==================================================*/
.strength-intro{
    opacity:0;
    transform:translateY(3rem);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.25,.46,.45,.94);
    will-change:transform,opacity;
}
.ind4_title.ind4_show .strength-intro{
    opacity:1;
    transform:translateY(0);
}
/*==================================================
Title
==================================================*/
.ind4_title_small div{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.ind4_title_small h2{
    margin-top: 2.6rem;
    font-size: 5rem;
    line-height: 1.08;
    color: var(--title);
    font-weight: 700;
    letter-spacing: -.15rem;
    white-space: nowrap;
}
.ind4_title_small h2 span{
    color: var(--orange);
}
.ind4_title_small div p{
    font-size: 1.6rem;
    line-height: 1.5;
    margin-left: 3rem;
    padding: 0.3rem 3rem;
    border-left: 1px solid #e5e5e5;
}
@keyframes ind4_title_in{
    to{
        opacity:1;
        transform:translateX(0);
    }
}
@keyframes ind4_title_up{
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.ind4_title_small .strength-tag::before{
    content: "";
    width: 5rem;
    height: .2rem;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s;
}
.ind4_title.ind4_show .strength-tag::before{
    transform: scaleX(1);
}
/*==========================================================
Tabs
==========================================================*/
.ind4_tabs{
    display:flex;
    gap:1.6rem;
    margin-bottom:4rem;
}
.ind4_tab{
    height:5rem;
    padding:0 3rem;
    border:none;
    border-radius:5rem;
    background:#f5f7fa;
    color:#666666;
    font-size:1.5rem;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
}
.ind4_tab:hover{
    color:#2f83ff;
    background:#edf5ff;
}
.ind4_tab.ind4_active{
    color:#ffffff;
    background:#2f83ff;
    box-shadow:0 1rem 3rem rgba(47,131,255,.25);
}
/*==========================================================
Panel
==========================================================*/
.ind4_panel{
    display:none;
}
.ind4_panel.ind4_active{
    display:block;
}
/*==========================================================
Grid
==========================================================*/
.ind4_grid{
    display:flex;
    justify-content: space-between;
}
/*==========================================================
Left Feature
==========================================================*/
.ind4_feature{
    position:relative;
    overflow:hidden;
    height:50rem;
    border-radius:2rem;
    background:#f8f9fb;
    box-shadow:0 2rem 6rem rgba(0,0,0,.08);
}
.ind4_feature_media{
    inset:0;
}
.ind4_feature_media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}
.ind4_feature_gradient{
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgb(239 239 239 / 98%) 0%, rgb(243 243 243 / 94%) 22%, rgba(255, 255, 255, .78) 38%, rgb(255 255 255 / 30%) 58%, rgba(255, 255, 255, 0) 78%);
    z-index:1;
}
.ind4_feature_gradient2{
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, rgb(233 233 233 / 93%) 0%, rgb(255 255 255 / 94%) 22%, rgb(255 255 255 / 71%) 38%, rgb(255 255 255 / 0%) 58%, rgba(255, 255, 255, 0) 78%);
    z-index:1;
}
.ind4_feature_content{
    position: absolute;
    left: 2rem;
    top: 2rem;
    width: 31rem;
    z-index: 2;
    padding-left: 1rem;
}
.ind4_feature_content::before{
    content: "";
    position: absolute;
    left: 0;
    top: 6rem;
    width: .2rem;
    height: 7rem;
    background: #ff7a00;
}
.ind4_feature_badge{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.8rem;
    height: 2.2rem;
    padding: 0 1.4rem;
    border-radius: 99rem;
    background: linear-gradient(
        180deg,
        #ffb257 0%,
        #ff8a36 48%,
        #ff6b1b 100%
    );
    color:#fff;
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:.03rem;
    box-shadow:
        0 .3rem .8rem rgba(255,111,20,.28),
        inset 0 .1rem .15rem rgba(255,255,255,.35);
    overflow:hidden;
}
.ind4_feature_badge::before{
    content:"";
    position:absolute;
    top:.15rem;
    left:.5rem;
    width:3rem;
    height:.7rem;
    border-radius:99rem;
    background:rgba(255,255,255,.45);
    filter:blur(.2rem);
    transform:rotate(-8deg);
}
.ind4_feature_no{
    display: block;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: #ff7a00;
    margin-bottom: 2rem;
    margin-top: 3rem;
    padding-left: 1.5rem;
}
.ind4_feature_title{
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 700;
    color: #111111;
    margin-bottom: 2rem;
}
.ind4_feature_desc{
    font-size: 1.5rem;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 3rem;
}
.ind4_feature_list{
    display:flex;
    flex-direction:column;
    gap:1.8rem;
}
.ind4_feature_list li{
    display:flex;
    align-items:center;
    gap:1.2rem;
    font-size:1.5rem;
    color: #767676;
    font-weight: 600;
}
.ind4_feature_list li img{
    width:3rem;
}
/*==========================================================
Right Layout
==========================================================*/
.ind4_right{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-left: 3rem;
}
.ind4_right_top{
    display: flex;
    gap: 2rem;
    flex-direction: row;
    justify-content: space-between;
}
.ind4_right_bottom{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}
/*==========================================================
Card
==========================================================*/
.ind4_card{
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 2.4rem;
    background: #ffffff;
    border: 0.1rem solid rgba(0, 0, 0, .06);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .06);
    transition: .45s cubic-bezier(.22, .61, .36, 1);
    display: flex;
    flex-direction: column;
}
.ind4_right_top .ind4_card{
    width: 40rem;
}
.ind4_right_bottom .ind4_card{
    width: 27.5rem;
}
.ind4_card_no{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    color: #2f83ff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    transition: .35s;
    font-size: 2rem;
    font-weight: bold;
    color: #ff7a00;
}
.ind4_card_title{
    font-size: 2rem;
    font-weight: bold;
    color: #111111;
    margin-bottom: 2rem;
    transition: .35s;
}
.ind4_right_bottom .ind4_card_title{
    font-size:2rem;
    transition:.35s;
}
.ind4_card .ind4_img{
    transition:.35s;
}
.ind4_card .ind4_img img{
}
.ind4_card .ind4_tit{
    position: absolute;
    top: 0;
    display: flex;
    height: 100%;
    width: 100%;
    align-content: space-around;
    flex-wrap: wrap;
    padding: 0 2rem;
    z-index: 2;
    transition: .35s;
}
.ind4_card .ind4_tit2{
    width: 100%;
    transition:.35s;
}
.ind4_card .ind4_tit2 p{
}
.ind4_card .ind4_tit2 h3{
}
.ind4_card .ind4_card_tags{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:4rem;
}
.ind4_card .ind4_card_tags li{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.2rem;
    padding: 0 1.4rem;
    border-radius: 0.7rem;
    background: #f5f7fa;
    color: #666666;
    font-size: 1.3rem;
    font-weight: bold;
    transition: .35s;
}
/*==========================================================
Hover
==========================================================*/
.ind4_feature:hover{
    transform:translateY(-0.8rem);
    box-shadow:0 3rem 8rem rgba(0,0,0,.12);
}
.ind4_card:hover{
    transform:translateY(-0.8rem);
    box-shadow:0 3rem 8rem rgba(0,0,0,.12);
    border-color:rgba(47,131,255,.18);
}
/*==========================================================
Panel Switch Animation
==========================================================*/
.ind4_panel{
    display:none;
    opacity:0;
    transform:translateY(3rem);
}
.ind4_panel.ind4_active{
    display:block;
    opacity:1;
    transform:translateY(0);
    animation:ind4Panel .6s cubic-bezier(.22,.61,.36,1);
}
@keyframes ind4Panel{
    0%{
        opacity:0;
        transform:translateY(3rem);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}
/*==========================================================
Scroll Animation
==========================================================*/
.ind4_title,
.ind4_tabs,
.ind4_feature,
.ind4_card{
    opacity:0;
    transform:translateY(5rem);
    transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.61,.36,1);
}
.ind4_title.ind4_show,
.ind4_tabs.ind4_show,
.ind4_feature.ind4_show,
.ind4_card.ind4_show{
    opacity:1;
    transform:translateY(0);
}
/*==========================================================
Mouse Light
==========================================================*/
.ind4{
    --mouse-x:50%;
    --mouse-y:50%;
}
.ind4::before{
    content:"";
    position:absolute;
    left:var(--mouse-x);
    top:var(--mouse-y);
    width:55rem;
    height:55rem;
    transform:translate(-50%,-50%);
    background:
    radial-gradient(
        circle,
        rgba(47,131,255,.10),
        rgba(47,131,255,.05) 45%,
        transparent 75%
    );
    border-radius:50%;
    pointer-events:none;
    z-index:2;
    opacity:0;
    transition:opacity .35s;
}
.ind4:hover::before{
    opacity:1;
}
/*==========================================================
Cursor
==========================================================*/
.ind4_cursor{
    position:fixed;
    left:0;
    top:0;
    width:16rem;
    height:16rem;
    border-radius:50%;
    pointer-events:none;
    transform:translate(-50%,-50%);
    background:
    radial-gradient(
        circle,
        rgba(47,131,255,.12),
        rgba(47,131,255,.05) 45%,
        transparent 75%
    );
    opacity:0;
    z-index:999;
    transition:opacity .3s;
}
.ind4:hover .ind4_cursor{
    opacity:1;
}
/*==========================================================
Transition
==========================================================*/
.ind4_feature,
.ind4_card,
.ind4_feature_media img,
.ind4_card_media img,
.ind4_card_no,
.ind4_card_title,
.ind4_card_tags li{
    transition:all .45s cubic-bezier(.22,.61,.36,1);
}
/*第五屏-研发实力*/
/* =====================================================
   ind5 Engineering Technology
===================================================== */
.ind5_section{
    position:relative;
    width:100%;
    overflow:hidden;
    padding-bottom: 7rem;
    background:#fff;
}
.ind5_container{
    width:165rem;
    margin:0 auto;
    position:relative;
    z-index:2;
}
/* =====================================================
   背景科技层
===================================================== */
.ind5_bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}
.ind5_grid{
    position:absolute;
    width:120rem;
    height:120rem;
    left:50%;
    top:45%;
    transform:
    translate(-50%,-50%)
    perspective(80rem)
    rotateX(65deg);
    background-image:
    linear-gradient(
    rgba(20,150,255,.08) 1px,
    transparent 1px
    ),
    linear-gradient(
    90deg,
    rgba(20,150,255,.08) 1px,
    transparent 1px
    );
    background-size:
    6rem 6rem;
    opacity:0;
}
.ind5_scan_light{
    position:absolute;
    width:100%;
    height:20rem;
    left:0;
    top:-20rem;
    background:
    linear-gradient(
    to bottom,
    transparent,
    rgba(20,160,255,.18),
    transparent
    );
    opacity:0;
}
/* 粒子 */
.ind5_particles i{
    position:absolute;
    width:.5rem;
    height:.5rem;
    background:#25a5ff;
    border-radius:50%;
    opacity:0;
    box-shadow:
    0 0 1rem #25a5ff;
}
.ind5_particles i:nth-child(1){
    left:20%;
    top:25%;
}
.ind5_particles i:nth-child(2){
    left:80%;
    top:20%;
}
.ind5_particles i:nth-child(3){
    left:15%;
    top:70%;
}
.ind5_particles i:nth-child(4){
    left:85%;
    top:65%;
}
.ind5_particles i:nth-child(5){
    left:50%;
    top:15%;
}
.ind5_particles i:nth-child(6){
    left:50%;
    top:85%;
}
/* =====================================================
   标题
===================================================== */
.strength-container{
    position:relative;
    width:165rem;
    height:100%;
    margin:0 auto;
    z-index:5;
}
/*==================================================
Top
==================================================*/
.ind5_title{
    display: flex;
    align-items: flex-start;
    padding-top: 7rem;
    justify-content: space-between;
}
/*==================================================
Left
==================================================*/
.ind5_title_small{
    width: 117rem;
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity .9s ease, transform .9s cubic-bezier(.25, .46, .45, .94);
    will-change: transform, opacity;
}
.ind5_section.active .ind5_title_small{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}
/*==================================================
Tag
==================================================*/
.strength-tag{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    font-size:1.4rem;
    font-weight:600;
    color: var(--blue);
    letter-spacing: .1rem;
    text-transform:uppercase;
    overflow:hidden;
}
.strength-tag::before{
    content:"";
    width:5rem;
    height:.2rem;
    background:var(--blue);
    transform:scaleX(0);
    transform-origin:left;
    transition:1s;
}
.ind5_section.active .strength-tag::before{
    transform:scaleX(1);
}
/*==================================================
Title
==================================================*/
.ind5_title_small div{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.ind5_title_small h2{
    margin-top: 2.6rem;
    font-size: 5rem;
    line-height: 1.08;
    color: var(--title);
    font-weight: 700;
    letter-spacing: -.15rem;
    white-space: nowrap;
}
.ind5_title_small h2 span{
    color: var(--orange);
}
.ind5_title_small div p{
    font-size: 1.6rem;
    line-height: 1.5;
    margin-left: 3rem;
    padding: 0.3rem 3rem;
    border-left: 1px solid #e5e5e5;
}
/*==================================================
Right
==================================================*/
.strength-intro{
    opacity:0;
    transform:translateY(3rem);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.25,.46,.45,.94);
    will-change:transform,opacity;
}
.ind5_section.active .strength-intro{
    opacity:1;
    transform:translateY(0);
}
/*==================================================
Button
==================================================*/
.strength-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    margin-top:3.2rem;
    height:5.4rem;
    padding:0 2.8rem;
    border-radius:1rem;
    text-decoration:none;
    color:#ffffff;
    background:
    linear-gradient(
    135deg,
    #0057ff,
    #2e9bff);
    overflow:hidden;
    transition:var(--transition);
}
.strength-btn span{
    position:relative;
    z-index:2;
    font-size:1.6rem;
    font-weight:600;
}
.strength-btn svg{
    position:relative;
    width:2rem;
    height:2rem;
    z-index:2;
    transition:.4s;
}
.strength-btn::before{
    content:"";
    position:absolute;
    left:-130%;
    top:0;
    width:60%;
    height:100%;
    transform:skewX(-25deg);
    background:
    rgba(255,255,255,.25);
    transition:.8s;
}
.strength-btn:hover::before{
    left:140%;
}
.strength-btn:hover{
    transform:translateY(-.5rem);
    box-shadow:
    0 1rem 3rem rgba(0,95,255,.28);
}
.strength-btn:hover svg{
    transform:translateX(.6rem);
}
.ind5_section::before{
    content:"";
    position:absolute;
    width:60rem;
    height:60rem;
    left:-15rem;
    top:-15rem;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(0,95,255,.10),
    transparent 70%);
    filter:blur(3rem);
    animation:
    glowLeft 8s ease-in-out infinite;
}
.ind5_section::after{
    content:"";
    position:absolute;
    width:55rem;
    height:55rem;
    right:-10rem;
    bottom:-15rem;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(0,160,255,.08),
    transparent 70%);
    filter:blur(4rem);
    animation:
    glowRight 10s ease-in-out infinite;
}
/*==================================================
Glow Animation
==================================================*/
@keyframes glowLeft{
0%{
transform:translate(0,0);
}
50%{
transform:translate(2rem,1rem);
}
100%{
transform:translate(0,0);
}
}
@keyframes glowRight{
0%{
transform:translate(0,0);
}
50%{
transform:translate(-2rem,-1rem);
}
100%{
transform:translate(0,0);
}
}
/* =====================================================
   核心系统区域
===================================================== */
.ind5_system{
    position:relative;
    width:165rem;
    height:60rem;
    margin-top:2rem;
}
/* 中心图片 */
.ind5_core{
    position:absolute;
    left:50%;
    top:50%;
    width:83rem;
    transform:
    translate(-50%,-50%)
    scale(.88);
    opacity:0;
    filter:blur(1.5rem);
    z-index:5;
}
.ind5_core img{
    display:block;
    width:100%;
}
/* 定位框 */
.ind5_locator{
    position:absolute;
    left:50%;
    top:50%;
    width:90rem;
    height:52rem;
    transform:
    translate(-50%,-50%);
    opacity:0;
}
.ind5_locator span{
    position:absolute;
    width:5rem;
    height:5rem;
}
.ind5_locator span:nth-child(1){
    left:0;
    top:0;
    border-left:.2rem solid #1ba3ff;
    border-top:.2rem solid #1ba3ff;
}
.ind5_locator span:nth-child(2){
    right:0;
    top:0;
    border-right:.2rem solid #1ba3ff;
    border-top:.2rem solid #1ba3ff;
}
.ind5_locator span:nth-child(3){
    left:0;
    bottom:0;
    border-left:.2rem solid #1ba3ff;
    border-bottom:.2rem solid #1ba3ff;
}
.ind5_locator span:nth-child(4){
    right:0;
    bottom:0;
    border-right:.2rem solid #1ba3ff;
    border-bottom:.2rem solid #1ba3ff;
}
/* =====================================================
   环形系统
===================================================== */
.ind5_orbit{
    position:absolute;
    left:50%;
    top:50%;
    transform:
    translate(-50%,-50%);
    border-radius:50%;
    opacity:0;
}
.ind5_orbit_outer{
    width:96rem;
    height:96rem;
    border:
    .1rem solid rgba(25,160,255,.25);
}
.ind5_orbit_inner{
    width:72rem;
    height:72rem;
    border:
    .1rem dashed rgba(25,160,255,.4);
}
/* 能量波 */
.ind5_energy_wave{
    position:absolute;
    left:50%;
    top:50%;
    width:10rem;
    height:10rem;
    transform:
    translate(-50%,-50%);
    border-radius:50%;
    border:
    .2rem solid rgba(20,160,255,.6);
    opacity:0;
}
/* =====================================================
   SVG 网络线路
===================================================== */
.ind5_network{
    position:absolute;
    left:0;
    top:0;
    width:165rem;
    height:60rem;
    z-index:6;
}
.ind5_path{
    fill:none;
    stroke:#159cff;
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    opacity:.75;
}
/* 节点 */
.ind5_point{
    fill:#fff;
    stroke:#159cff;
    stroke-width:3;
    opacity:0;
    filter:
    drop-shadow(0 0 1.5rem #159cff);
}
/* =====================================================
   数据流光点
===================================================== */
.ind5_stream{
    position:absolute;
    width:1rem;
    height:1rem;
    border-radius:50%;
    background:#fff;
    box-shadow:
    0 0 1rem #1aa4ff,
    0 0 3rem #1aa4ff;
    opacity:0;
    z-index:4;
}
.ind5_stream_lt{
    left:40rem;
    top:21rem;
}
.ind5_stream_rt{
    right:40rem;
    top:21rem;
}
.ind5_stream_lb{
    left:40rem;
    bottom:25rem;
}
.ind5_stream_rb{
    right:40rem;
    bottom:25rem;
}
/* =====================================================
   四个工程节点
===================================================== */
.ind5_node{
    position:absolute;
    width:32rem;
    z-index:6;
    opacity:0;
    transform:translateY(3rem);
}
/* 节点位置 */
.ind5_node_lt{
    left:0;
    top:10rem;
}
.ind5_node_rt{
    right:0;
    top:10rem;
    text-align:left;
}
.ind5_node_lb{
    left:0;
    bottom:11rem;
}
.ind5_node_rb{
    right:0;
    bottom:11rem;
}
.ind5_stat-card{
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 15rem;
    padding: 0 2rem;
    background: #ffffff;
    border: .1rem solid var(--border);
    border-radius: 2rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s;
}
.ind5_stat-icon{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8.6rem;
    height: 8.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1rem 3rem rgba(16, 70, 180, .08), 0 .3rem 1rem rgba(16, 70, 180, .04);
    overflow: visible;
}
.ind5_icon-ring{
    position: absolute;
    inset: -.2rem;
    width: calc(100% + .4rem);
    height: calc(100% + .4rem);
    overflow: visible;
    transform: rotate(-90deg);
    z-index: 5;
}
.ind5_ring-bg{
    fill: none;
    stroke: #edf2fa;
    stroke-width: 4;
}
.ind5_ring-progress{
    fill: none;
    stroke: #ff8c1a;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 72 289;
    stroke-dashoffset: 0;
    transition: stroke-dasharray .8s cubic-bezier(.15, .85, .3, 1);
}
.ind5_stat-icon img{
    position: relative;
    z-index: 5;
    width: 5rem;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .45s;
}
.ind5_stat-icon::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6rem;
    height: 6rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 95, 255, .12), transparent 72%);
    filter: blur(1rem);
    opacity: .55;
    transition: .5s;
}
.ind5_stat-content{
    position: relative;
    z-index: 3;
}
.ind5_stat-content div{
    position: relative;
    display: flex;
    font-size: 1.6rem;
    font-weight: bold;
    color: black;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.ind5_stat-content div h4{
    font-size: 2.2rem;
}
.ind5_stat-content div::after {
    content: "";
    position: absolute;
    left: -104%;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    transform: skewX(-20deg);
}
.ind5_stat-content span {
    display: block;
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #7a7a7a;
    line-height: 1.3;
}
.ind5_stat-card:hover {
    border-color: #d6e6ff;
    box-shadow: 0 2rem 5rem rgba(0, 70, 180, .12);
}
.ind5_stat-card:hover .ind5_ring-progress {
    stroke-dasharray: 289 289;
}
.ind5_stat-card:hover .ind5_stat-icon img {
    transform: scale(1.08);
    filter: drop-shadow(0 0 .8rem rgba(0, 95, 255, .28));
}
.ind5_stat-card:hover .ind5_stat-content div::after {
    animation: numberSweep 1s ease;
}
/* =====================================================
   底部工程流程
===================================================== */
.ind5_process{
    margin-top:2rem;
    opacity:0;
    transform:translateY(5rem);
}
/*==========================================
 Fifth Screen Bottom Workflow
==========================================*/
.ind5bot_wrap{
    background: #ffffff;
    border: .1rem solid var(--border);
    border-radius: 2rem;
    padding: 3rem 3rem 3rem 6rem;
    width: 111rem;
    margin: 0 auto;
}
.ind5bot_inner{
    width: 98rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
/*=====================
 item
======================*/
.ind5bot_item{
    width: 9rem;
    display: flex;
    flex-direction: column;
    transition: .35s;
    align-items: flex-start;
}
/*=====================
 icon
======================*/
.ind5bot_icon{
    width: 8.8rem;
    height: 8.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fcfdff 48%, #f5f9ff 72%, #edf4ff 100%);
    box-shadow: inset 0 .15rem .3rem rgba(255, 255, 255, .95), inset 0 -.25rem .6rem rgba(124, 168, 255, .10), 0 .2rem .5rem rgba(36, 98, 255, .04), 0 .8rem 2rem rgba(36, 98, 255, .08);
    transition: all .35s ease;
    overflow: visible;
    aspect-ratio: 1;
    border: .1rem solid rgb(131 182 255 / 18%);
    outline: .1rem solid rgb(134 183 254 / 18%);
}
.ind5bot_icon img{
    width: 64%;
    height: 70%;
    object-fit: contain;
    opacity: .72;
    transition: .35s;
}
/*=====================
 title
======================*/
.ind5bot_title{
    margin-top:1.5rem;
    font-size:1.8rem;
    font-weight:500;
    color:#3b465d;
    line-height:1;
    transition:.35s;
}
/*=====================
 arrow
======================*/
.ind5bot_arrow{
    width: 12rem;
    height: 4.8rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    user-select: none;
    justify-content: center;
}
.ind5bot_dot{
    width:.45rem;
    height:.45rem;
    border-radius:50%;
    background:#2d7cff;
    box-shadow:
        0 0 .5rem rgba(45,124,255,.7),
        0 0 1rem rgba(45,124,255,.25);
    flex-shrink:0;
}
.ind5bot_line{
    width:5.6rem;
    height:.2rem;
    margin:0 .45rem;
    background:
        radial-gradient(circle,
            #5b96ff .11rem,
            transparent .13rem);
    background-size:.75rem .2rem;
    background-repeat:repeat-x;
    background-position:center;
}
.ind5bot_head{
    width:.8rem;
    height:.8rem;
    border-top:.18rem solid #2d7cff;
    border-right:.18rem solid #2d7cff;
    transform:rotate(45deg);
    margin-left:-.15rem;
    flex-shrink:0;
}
.ind5bot_inner2{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 102rem;
    margin: 2rem auto 0rem auto;
}
.ind5bot_inner2 div{
    width: 21.5rem;
}
.ind5bot_inner2 div:nth-child(5){
    width: 18rem;
}
.ind5bot_inner2 div h4{
    font-size: 1.6rem;
    color: #2a2a2a;
    margin-bottom: 1rem;
}
.ind5bot_inner2 div p{
    font-size: 1.4rem;
}
/*=====================
 hover
======================*/
.ind5bot_item:hover{
    transform:translateY(-.2rem);
}
.ind5bot_item:hover .ind5bot_icon img{
    opacity:1;
    transform:scale(1.06);
}
.ind5bot_item:hover .ind5bot_title{
    color:#1d4ed8;
}
/* =====================================================
   ACTIVE 动画
===================================================== */
/* 背景启动 */
.ind5_section.active .ind5_grid{
    animation:
    ind5_grid_show
    2s
    forwards;
}
.ind5_section.active .ind5_scan_light{
    animation:
    ind5_scan_move
    2.5s
    .5s
    forwards;
}
.ind5_section.active .ind5_particles i{
    animation:
    ind5_particle_float
    5s
    infinite;
}
.ind5_particles i:nth-child(1){
    animation-delay:.2s!important;
}
.ind5_particles i:nth-child(2){
    animation-delay:1s!important;
}
.ind5_particles i:nth-child(3){
    animation-delay:1.5s!important;
}
.ind5_particles i:nth-child(4){
    animation-delay:2s!important;
}
.ind5_particles i:nth-child(5){
    animation-delay:2.5s!important;
}
.ind5_particles i:nth-child(6){
    animation-delay:3s!important;
}
/* 中心系统 */
.ind5_section.active .ind5_locator{
    animation:
    ind5_locator_show
    1s
    1.5s
    forwards;
}
.ind5_section.active .ind5_core{
    animation:
    ind5_core_load
    1.5s
    2s
    forwards;
}
.ind5_section.active .ind5_orbit_outer{
    animation:
    ind5_rotate_show
    1s
    3s
    forwards,
    ind5_rotate 25s linear 4s infinite;
}
.ind5_section.active .ind5_orbit_inner{
    animation:
    ind5_rotate_show
    1s
    3.2s
    forwards,
    ind5_reverse_rotate 18s linear 4s infinite;
}
.ind5_section.active .ind5_energy_wave{
    animation:
    ind5_wave
    1.5s
    3.8s
    infinite;
}
/* 线路 */
.ind5_section.active .ind5_point1{
    opacity:0;
    fill: #fff;
    stroke: #159cff;
    stroke-width: 3px;
    filter: drop-shadow(0 0 0.5rem #168cff) drop-shadow(0 0 0.5rem #168cff) drop-shadow(0 0 2rem rgba(20, 156, 255, .9));
    animation: ind5_path_draw 1s 4s forwards;
}
.ind5_start_point_lb{
    animation-delay:5.1s!important;
    stroke: rgb(255, 106, 0)!important;
    filter: drop-shadow(0 0 0.5rem #ff6a00) drop-shadow(0 0 0.5rem #ff6a00) drop-shadow(0 0 2rem rgba(20, 225, 106, 0))!important;
}
.ind5_start_point_rt{
    animation-delay:4.7s!important;
}
.ind5_start_point_rb{
    animation-delay:5.5s!important;
    stroke: rgb(255, 106, 0)!important;
    filter: drop-shadow(0 0 0.5rem #ff6a00) drop-shadow(0 0 0.5rem #ff6a00) drop-shadow(0 0 2rem rgba(20, 225, 106, 0))!important;
}
.ind5_section.active .ind5_path{
    animation: ind5_path_draw 1.5s 4.7s forwards;
}
.ind5_path_rt{
    animation-delay:5.1s!important;
}
.ind5_path_lb{
    animation-delay:5.5s!important;
    fill:none!important;
    stroke:url(#ind5_line_gradient)!important;
    stroke-width:2!important;
}
.ind5_path_rb{
    animation-delay:5.9s!important;
    fill:none!important;
    stroke:url(#ind5_line_gradientrt)!important;
    stroke-width:2!important;
}
/* 节点 */
.ind5_section.active .ind5_point{
    animation:
    ind5_point_show
    .6s
    6.3s
    forwards;
}
/* 流光 */
.ind5_section.active .ind5_stream{
    animation:
    ind5_stream_move
    2.5s
    5.5s
    infinite;
}
/* 模块 */
.ind5_section.active .ind5_node{
    animation:
    ind5_node_show
    1s
    5.5s
    forwards;
}
.ind5_node_rt{
    animation-delay:5.8s!important;
}
.ind5_node_lb{
    animation-delay:6.1s!important;
}
.ind5_node_rb{
    animation-delay:6.4s!important;
}
/* 底部 */
.ind5_section.active .ind5_process{
    animation:
    ind5_process_show
    1s
    7s
    forwards;
}
/* =====================================================
   KEYFRAMES
===================================================== */
/* =========================
   背景网格出现
========================= */
@keyframes ind5_grid_show{
    0%{
        opacity:0;
        transform:
        translate(-50%,-50%)
        perspective(80rem)
        rotateX(65deg)
        scale(.8);
    }
    100%{
        opacity:1;
        transform:
        translate(-50%,-50%)
        perspective(80rem)
        rotateX(65deg)
        scale(1);
    }
}
/* =========================
   扫描光
========================= */
@keyframes ind5_scan_move{
    0%{
        opacity:0;
        top:-20rem;
    }
    20%{
        opacity:1;
    }
    80%{
        opacity:.8;
    }
    100%{
        opacity:0;
        top:100%;
    }
}
/* =========================
   粒子漂浮
========================= */
@keyframes ind5_particle_float{
    0%{
        opacity:0;
        transform:
        translateY(0)
        scale(.5);
    }
    20%{
        opacity:.8;
    }
    50%{
        transform:
        translateY(-4rem)
        scale(1);
    }
    100%{
        opacity:0;
        transform:
        translateY(-8rem)
        scale(.6);
    }
}
/* =========================
   标题
========================= */
@keyframes ind5_title_in{
    to{
        opacity:1;
        transform:translateX(0);
    }
}
@keyframes ind5_title_up{
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* =========================
   中心定位框
========================= */
@keyframes ind5_locator_show{
    0%{
        opacity:0;
        transform:
        translate(-50%,-50%)
        scale(.8);
    }
    100%{
        opacity:1;
        transform:
        translate(-50%,-50%)
        scale(1);
    }
}
/* =========================
   中心图片加载
========================= */
@keyframes ind5_core_load{
    0%{
        opacity:0;
        filter:blur(2rem);
        transform:
        translate(-50%,-50%)
        scale(.85);
    }
    60%{
        opacity:1;
    }
    100%{
        opacity:1;
        filter:blur(0);
        transform:
        translate(-50%,-50%)
        scale(1);
    }
}
/* =========================
   环显示
========================= */
@keyframes ind5_rotate_show{
    from{
        opacity:0;
        transform:
        translate(-50%,-50%)
        scale(.8);
    }
    to{
        opacity:1;
        transform:
        translate(-50%,-50%)
        scale(1);
    }
}
/* =========================
   环旋转
========================= */
@keyframes ind5_rotate{
    from{
        transform:
        translate(-50%,-50%)
        rotate(0deg);
    }
    to{
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }
}
@keyframes ind5_reverse_rotate{
    from{
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }
    to{
        transform:
        translate(-50%,-50%)
        rotate(0deg);
    }
}
/* =========================
   中心能量波
========================= */
@keyframes ind5_wave{
    0%{
        opacity:.8;
        width:8rem;
        height:8rem;
    }
    100%{
        opacity:0;
        width:110rem;
        height:110rem;
    }
}
/* =========================
   SVG线路绘制
========================= */
@keyframes ind5_path_draw{
    from{
        stroke-dashoffset:1200;
        opacity:0;
    }
    30%{
        opacity:1;
    }
    to{
        stroke-dashoffset:0;
        opacity:1;
    }
}
/* =========================
   节点亮起
========================= */
@keyframes ind5_point_show{
    0%{
        opacity:0;
        transform:scale(.5);
    }
    50%{
        opacity:1;
        transform:scale(1.5);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}
/* =========================
   数据流移动
========================= */
@keyframes ind5_stream_move{
    0%{
        opacity:0;
        transform:
        scale(.5);
    }
    20%{
        opacity:1;
    }
    80%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:
        translateX(40rem)
        scale(1);
    }
}
/* =========================
   节点出现
========================= */
@keyframes ind5_node_show{
    0%{
        opacity:0;
        filter:blur(1rem);
        transform:
        translateY(5rem);
    }
    100%{
        opacity:1;
        filter:blur(0);
        transform:
        translateY(0);
    }
}
/* =========================
   底部流程
========================= */
@keyframes ind5_process_show{
    0%{
        opacity:0;
        transform:
        translateY(5rem);
    }
    100%{
        opacity:1;
        transform:
        translateY(0);
    }
}
/* =========================
   节点持续呼吸
========================= */
.ind5_section.active .ind5_node_circle{
    animation:
    ind5_node_breath
    3s
    7s
    infinite;
}
@keyframes ind5_node_breath{
    0%,100%{
        box-shadow:
        0 0 0 rgba(20,155,255,0);
    }
    50%{
        box-shadow:
        0 0 3rem rgba(20,155,255,.45);
    }
}
/*第六屏-关于我们*/
/* =====================================
   SECTION 6
   BASE
   1rem = 10px
===================================== */
.ind6_section{
    width:100%;
    position:relative;
    overflow:hidden;
    padding-bottom: 7rem;
}
.strength-container{
    position:relative;
    width:165rem;
    height:100%;
    margin:0 auto;
    z-index:5;
}
/*==================================================
Top
==================================================*/
.ind6_title{
    display: flex;
    align-items: flex-start;
    padding-top: 7rem;
    justify-content: space-between;
}
/*==================================================
Left
==================================================*/
.ind6_title_small{
    width: 117rem;
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity .9s ease, transform .9s cubic-bezier(.25, .46, .45, .94);
    will-change: transform, opacity;
}
.ind6_section.active .ind6_title_small{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}
/*==================================================
Tag
==================================================*/
.strength-tag{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    font-size:1.4rem;
    font-weight:600;
    color: var(--blue);
    letter-spacing: .1rem;
    text-transform:uppercase;
    overflow:hidden;
}
.strength-tag::before{
    content:"";
    width:5rem;
    height:.2rem;
    background:var(--blue);
    transform:scaleX(0);
    transform-origin:left;
    transition:1s;
}
.ind6_section .strength-tag::before{
    transform:scaleX(1);
}
/*==================================================
Title
==================================================*/
.ind6_title{
    width: 165rem;
    margin: auto;
}
.ind6_title_small div{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.ind6_title_small h2{
    margin-top: 2.6rem;
    font-size: 5rem;
    line-height: 1.08;
    color: var(--title);
    font-weight: 700;
    letter-spacing: -.15rem;
    white-space: nowrap;
}
.ind6_title_small h2 span{
    color: var(--orange);
}
.ind6_title_small div p{
    font-size: 1.6rem;
    line-height: 1.5;
    margin-left: 3rem;
    padding: 0.3rem 3rem;
    border-left: 1px solid #e5e5e5;
}
/*==================================================
Right
==================================================*/
.strength-intro{
    opacity:0;
    transform:translateY(3rem);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.25,.46,.45,.94);
    will-change:transform,opacity;
}
.ind6_section.active .strength-intro{
    opacity:1;
    transform:translateY(0);
}
/*==================================================
Button
==================================================*/
.strength-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    margin-top:3.2rem;
    height:5.4rem;
    padding:0 2.8rem;
    border-radius:1rem;
    text-decoration:none;
    color:#ffffff;
    background:
    linear-gradient(
    135deg,
    #0057ff,
    #2e9bff);
    overflow:hidden;
    transition:var(--transition);
}
.strength-btn span{
    position:relative;
    z-index:2;
    font-size:1.6rem;
    font-weight:600;
}
.strength-btn svg{
    position:relative;
    width:2rem;
    height:2rem;
    z-index:2;
    transition:.4s;
}
.strength-btn::before{
    content:"";
    position:absolute;
    left:-130%;
    top:0;
    width:60%;
    height:100%;
    transform:skewX(-25deg);
    background:
    rgba(255,255,255,.25);
    transition:.8s;
}
.strength-btn:hover::before{
    left:140%;
}
.strength-btn:hover{
    transform:translateY(-.5rem);
    box-shadow:
    0 1rem 3rem rgba(0,95,255,.28);
}
.strength-btn:hover svg{
    transform:translateX(.6rem);
}
.ind6_section::before{
    content:"";
    position:absolute;
    width:60rem;
    height:60rem;
    left:-15rem;
    top:-15rem;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(0,95,255,.10),
    transparent 70%);
    filter:blur(3rem);
    animation:
    glowLeft 8s ease-in-out infinite;
}
/*==================================================
Glow Animation
==================================================*/
@keyframes glowLeft{
0%{
transform:translate(0,0);
}
50%{
transform:translate(2rem,1rem);
}
100%{
transform:translate(0,0);
}
}
@keyframes glowRight{
0%{
transform:translate(0,0);
}
50%{
transform:translate(-2rem,-1rem);
}
100%{
transform:translate(0,0);
}
}
/* 主体165rem */
.ind6_container{
    width:165rem;
    max-width:calc(100% - 8rem);
    margin:2rem auto;
    display:grid;
    grid-template-columns:100rem 60rem;
    gap:5rem;
    align-items:start;
    opacity:0;
    transform:translateY(3rem);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.25,.46,.45,.94);
    will-change:transform,opacity;
}.ind6_section.active .ind6_container{
    opacity:1;
    transform:translateY(0);
}
/* =====================================
   VIDEO AREA
===================================== */
.ind6_video_card{
    width:100rem;
    height:58rem;
    position:relative;
    border-radius:2.8rem;
    overflow:hidden;
}
.ind6_video_media{
    position:absolute;
    inset:0;
}
.ind6_video_cover,
.ind6_video_player{
    width:100%;
    height:100%;
    object-fit:cover;
}
.ind6_video_cover{
    transition:
    opacity .8s ease,
    transform 10s ease;
}
.ind6_video_card:hover
.ind6_video_cover{
    transform:scale(1.05);
}
.ind6_video_player{
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.05);
    transition:
    opacity .8s ease,
    transform .8s ease;
}
.ind6_video_mask{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.05),
        rgba(0,0,0,.65)
    );
    transition:.5s ease;
}
/* 扫描光 */
.ind6_video_scan{
    position:absolute;
    width:20rem;
    height:100%;
    top:0;
    left:-30rem;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(0,160,255,.45),
        transparent
    );
    transform:skewX(-15deg);
    animation:
    ind6_scan 7s infinite;
}
@keyframes ind6_scan{
    0%{
        left:-30rem;
    }
    45%{
        left:120rem;
    }
    100%{
        left:120rem;
    }
}
/* =====================================
 VIDEO DATA CARDS
===================================== */
.ind6_video_stats{
    position:absolute;
    right:3.5rem;
    top:3.5rem;
    display:flex;
    gap:1rem;
    z-index:5;
    transition:.6s ease;
}
.ind6_video_stat{
    width: 18rem;
    height: 13rem;
    padding: 1.8rem 1rem 1.8rem 2rem;
    box-sizing: border-box;
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, .56);
    border: .1rem solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(1rem);
    color: #607092;
}
.ind6_video_stat p{
    font-size: 3rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.ind6_video_stat span{
    font-size: 1.4rem;
    opacity: .8;
    font-weight: 400;
}
.ind6_video_stat_icon{
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
.ind6_video_stat_icon img{
    height: 3rem;
    margin-right: 0.6rem;
}
.ind6_video_stat_icon h4{
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
}
/* =====================================
 VIDEO INTRO
===================================== */
.ind6_video_intro{
    position:absolute;
    left:4rem;
    bottom:4rem;
    display:flex;
    align-items:center;
    gap:2rem;
    z-index:5;
    transition:.6s ease;
}
.ind6_video_play{
    width:7rem;
    height:7rem;
    border-radius:50%;
    border:none;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
}
.ind6_video_play span{
    width:0;
    height:0;
    border-top:1rem solid transparent;
    border-bottom:1rem solid transparent;
    border-left:1.6rem solid #087cff;
    margin-left:.5rem;
}
.ind6_video_text h3{
    margin:0;
    color:#fff;
    font-size:2.4rem;
}
.ind6_video_text p{
    margin-top:1rem;
    color:rgba(255,255,255,.8);
    font-size:1.5rem;
}
/* PLAY STATE */
.ind6_video_playing
.ind6_video_cover{
    opacity:0;
}
.ind6_video_playing
.ind6_video_player{
    opacity:1;
    transform:scale(1);
}
.ind6_video_playing
.ind6_video_stats{
    opacity:0;
    transform:translateX(8rem);
}
.ind6_video_playing
.ind6_video_intro{
    opacity:0;
    transform:translateX(-12rem);
}
/* =====================================
 VIDEO CONTROL
===================================== */
.ind6_video_controls{
    position:absolute;
    left:4rem;
    right:4rem;
    bottom:3rem;
    display:flex;
    align-items:center;
    gap:2rem;
    z-index:10;
    transition:.5s ease;
}
.ind6_video_playing .ind6_video_mask{
    opacity:0;
    display: none;
}
.ind6_video_time,
.ind6_video_duration{
    color:white;
    font-size:1.4rem;
}
.ind6_video_progress{
    flex:1;
    height:.4rem;
    background:rgba(255,255,255,.35);
}
.ind6_video_progress_bar{
    width:0;
    height:100%;
    background:#1687ff;
}
/* =====================================
 RIGHT AREA
===================================== */
.ind6_right{
    display:flex;
    flex-direction:column;
    gap:2.5rem;
}
/* =====================================
 CERTIFICATION
===================================== */
.ind6_certification{
    height: 29rem;
    padding: 3rem;
    border-radius: 2.5rem;
    background: #fefefe;
    border-color: #d6e6ff;
    box-shadow: 0 1rem 5rem rgba(0, 70, 180, .12);
}
.ind6_cert_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ind6_cert_title h3{
    margin:0;
    font-size:1.9rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #2e2e2e;
}
.ind6_cert_title h3 img{
    width: 3rem;
    margin-right: 1rem;
}
.ind6_cert_title p{
    font-size: 1.4rem;
    color: var(--blue);
    font-weight: 400;
}
.ind6_network_map{
    width: 17rem;
    margin-top: 6rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #343434;
}
.ind6_cert_grid{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 0rem 2rem;
}
.ind6_cert_item{
    width: 11rem;
    height: 8rem;
    background: white;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(3rem);
    transition: .6s ease;
}
.ind6_cert_item.ind6_show{
    opacity:1;
    transform:none;
    border: .1rem solid rgb(131 182 255 / 18%);
    outline: .1rem solid rgb(134 183 254 / 18%);
}
.ind6_cert_item img{
    width: 60%;
}
/* =====================================
 GLOBAL NETWORK
===================================== */
.ind6_network{
    height: 26rem;
    padding: 3rem;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    border-radius: 2rem;
    border-color: #d6e6ff;
    box-shadow: 0 2rem 5rem rgba(0, 70, 180, .12);
    background-image: url(../images/ind6right2.jpg);
    background-repeat: no-repeat;
    background-size: auto;
}
.ind6_network_title{
    position:absolute;
    top:2.5rem;
    left:3rem;
    z-index:3;
    color:#111;
}
.ind6_network_title h3{
    margin:0;
    font-size:2.6rem;
}
.ind6_network_title span{
    font-size:1.4rem;
    opacity:.7;
}
.ind6_network_world{
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:.4;
}
.ind6_network_lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.ind6_network_line{
    fill:none;
    stroke:#1590ff;
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:600;
    stroke-dashoffset:600;
}
.ind6_network_active
.ind6_network_line{
    animation:
    ind6_draw_line 2.5s forwards;
}
@keyframes ind6_draw_line{
    to{
        stroke-dashoffset:0;
    }
}
.ind6_network_point{
    position:absolute;
    width:1.2rem;
    height:1.2rem;
    border-radius:50%;
    background:#1687ff;
}
.ind6_network_active
.ind6_network_point{
    animation:
    ind6_pulse 2s infinite;
}
@keyframes ind6_pulse{
    50%{
        box-shadow:
        0 0 0 2rem rgba(22,135,255,0);
    }
}
.ind6_network_america{
    left:20%;
    top:45%;
}
.ind6_network_europe{
    left:48%;
    top:38%;
}
.ind6_network_asia{
    right:20%;
    top:50%;
}
/* =====================================
 ADVANTAGE
===================================== */
.ind6_advantage{
    width: 165rem;
    max-width: calc(100% - 8rem);
    margin: 5rem auto 0;
    display: flex;
    transition: opacity .9s ease, transform .9s cubic-bezier(.25, .46, .45, .94);
    will-change: transform, opacity;
    justify-content: center;
    align-items: center;
    border: .1rem solid var(--border);
    border-radius: 2rem;
    box-shadow: 0 2rem 5rem rgba(0, 70, 180, .12);
    padding: 3rem;
}
.ind6_section.active .ind6_advantage{
    opacity:1;
    transform:translateY(0);
}
.ind6_advantage_item{
    padding-left:5rem;
    width: 40rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-right: 1px solid #ededed;
}
.ind6_advantage_item:nth-child(4){
    border:none;
}
.ind6_advantage_icon{
    width:8rem;
    height:8rem;
    border-radius:50%;
    background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fcfdff 48%, #f5f9ff 72%, #edf4ff 100%);
    box-shadow: inset 0 .15rem .3rem rgba(255, 255, 255, .95), inset 0 -.25rem .6rem rgba(124, 168, 255, .10), 0 .2rem .5rem rgba(36, 98, 255, .04), 0 .8rem 2rem rgba(36, 98, 255, .08);
    transition: all .35s ease;
    overflow: visible;
    aspect-ratio: 1;
    border: .1rem solid rgb(131 182 255 / 18%);
    outline: .1rem solid rgb(134 183 254 / 18%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4rem;
}
.ind6_advantage_icon img{
    width: 5.4rem;
}
.ind6_advantage_item h4{
    margin: 0;
    font-size: 2rem;
    color: #1a1a1a;
}
.ind6_advantage_item p{
    margin-top: 1rem;
    color: #525252;
    font-size: 1.4rem;
    line-height: 2rem;
}
/*第七屏-资料下载*/
/*第八屏-新闻资讯*/
/*==================================================
=            IND8 NEWS CENTER
==================================================*/
:root{
    --ind8-orange:#f08201;
    --ind8-blue:#2f6bff;
    --ind8-title:#1d2939;
    --ind8-text:#667085;
    --ind8-bg:#f7fbff;
    --ind8-border:#e6edf5;
    --ind8-radius:2rem;
    --ind8-shadow:0 2rem 5rem rgba(16,24,40,.05);
    --ind8-ease:cubic-bezier(.22,.61,.36,1);
}
/*==================================================
Layout
==================================================*/
.ind8_section{
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 5rem;
    padding-bottom: 3rem;
    background: var(--ind8-bg);
}
.ind8_container{
    position:relative;
    width:100%;
    max-width:165rem;
    margin:0 auto;
    z-index:2;
}
.ind8_main{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52rem;
    gap: 6rem;
    align-items: start;
    margin-top: 4rem;
}
/*==================================================
Background
==================================================*/
.ind8_bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}
.ind8_bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 12% 18%,rgba(47,107,255,.05),transparent 28%),
    radial-gradient(circle at 88% 75%,rgba(246,139,31,.04),transparent 24%);
}
.ind8_bg::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(47,107,255,.025) .1rem,transparent .1rem),
    linear-gradient(90deg,rgba(47,107,255,.025) .1rem,transparent .1rem);
    background-size:20rem 20rem;
}
.ind8_bg_line{
    position:absolute;
    height:.1rem;
    background:linear-gradient(90deg,transparent,rgba(47,107,255,.18),transparent);
}
.ind8_bg_line1{
    width:52rem;
    top:18rem;
    left:-10rem;
    transform:rotate(-8deg);
}
.ind8_bg_line2{
    width:68rem;
    top:45rem;
    right:-14rem;
    transform:rotate(7deg);
}
.ind8_bg_line3{
    width:60rem;
    bottom:18rem;
    left:28%;
    transform:rotate(-5deg);
}
.ind8_bg_dot{
    position:absolute;
    width:.6rem;
    height:.6rem;
    border-radius:50%;
    background:var(--ind8-blue);
    opacity:.35;
}
.ind8_bg_dot1{
    top:18rem;
    left:15%;
}
.ind8_bg_dot2{
    right:16%;
    top:56rem;
}
.ind8_bg_dot3{
    left:62%;
    bottom:18rem;
}
/*==================================================
Header
==================================================*/
.ind8_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8rem;
    margin-bottom: 3rem;
}
.ind8_header_left{
    width: 117rem;
}
.ind8_subtitle{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: .1rem;
    text-transform: uppercase;
    overflow: hidden;
}
.ind8_subtitle::before{
    content: "";
    width: 5rem;
    height: .2rem;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s;
}
.ind8_section.ind8_active .ind8_subtitle::before{
    transform: scaleX(1);
}
.ind8_header_left div{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.ind8_heading{
    margin-top: 2.6rem;
    font-size: 5rem;
    line-height: 1.08;
    color: var(--title);
    font-weight: 700;
    letter-spacing: -.15rem;
    white-space: nowrap;
}
.ind8_heading span{
    color: var(--orange);
}
.ind8_desc{
    font-size: 1.5rem;
    line-height: 1.5;
    margin-left: 3rem;
    padding: 0.3rem 3rem;
    border-left: 1px solid #e5e5e5;
}
.ind8_header_right{
    flex-shrink:0;
}
.ind8_more_btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:1.6rem 3.4rem;
    border:.1rem solid #1a73e8;
    border-radius:1rem;
    font-size:1.5rem;
    font-weight:600;
    color:#1a73e8;
    text-decoration:none;
    transition:.35s;
}
.ind8_more_btn:hover{
    background:#1a73e8;
    color:#fff;
    transform:translateY(-.3rem);
    box-shadow:0 1rem 3rem rgba(26,115,232,.18);
}
.ind8_more_arrow{
    width:.8rem;
    height:.8rem;
    border-top:.2rem solid currentColor;
    border-right:.2rem solid currentColor;
    transform:rotate(45deg);
}
.ind8_header{
    opacity:0;
    transform:translateY(4rem);
    transition:
        opacity .8s ease,
        transform .8s ease;
}
.ind8_section.ind8_active .ind8_header{
    opacity:1;
    transform:translateY(0);
}
/*==================================================
Tabs
==================================================*/
.ind8_tabs{
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-top: 4rem;
    padding-bottom: 2rem;
}
.ind8_tabs::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.1rem;
    width: 64.7%;
    height: .2rem;
    background: var(--ind8-border);
}
.ind8_tab{
    position: relative;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.7rem;
    font-weight: 600;
    color: #98a2b3;
    transition: color .35s var(--ind8-ease);
    z-index: 2;
}
.ind8_tab::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2.1rem;
    width:100%;
    height:.2rem;
    background:var(--ind8-orange);
    transform:scaleX(0);
    transform-origin:left center;
    transition:
    transform .45s var(--ind8-ease);
}
.ind8_tab:hover{
    color:var(--ind8-title);
}
.ind8_tab_active{
    color:var(--ind8-orange);
}
.ind8_tab_active::after{
    transform:scaleX(1);
}
/*==================================================
Left News List
==================================================*/
.ind8_news_list{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
}
.ind8_news{
    position:relative;
}
.ind8_news_link{
    display: grid;
    grid-template-columns: 35.5rem minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    text-decoration: none;
    padding: 1.6rem 2.6rem;
    border: 0.1rem solid var(--ind8-border);
    border-radius: var(--ind8-radius);
    background: #ffffff;
    overflow: hidden;
    transition: transform .45s var(--ind8-ease), border-color .45s var(--ind8-ease), box-shadow .45s var(--ind8-ease);
}
/*==================================================
Image
==================================================*/
.ind8_news_cover{
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 1.6rem;
    aspect-ratio: 16 / 9;
    background: #eef4fb;
}
.ind8_news_cover_inner{
    width:100%;
    height:100%;
    overflow:hidden;
}
.ind8_news_cover img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
    transform 1s var(--ind8-ease),
    filter .45s var(--ind8-ease);
}
/*==================================================
Content
==================================================*/
.ind8_news_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.ind8_news_date{
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ind8-blue);
}
.ind8_news_date::before{
    content:"";
    width:.5rem;
    height:.5rem;
    border-radius:50%;
    background:var(--ind8-orange);
    flex-shrink:0;
}
.ind8_news_title{
    margin: 0;
    font-size: 2.3rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--ind8-title);
    transition: color .35s var(--ind8-ease);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ind8_news_desc{
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--ind8-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/*==================================================
Read More
==================================================*/
.ind8_news_more{
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ind8-orange);
}
.ind8_news_more_text{
    display:block;
}
.ind8_news_more_icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:2rem;
    height:2rem;
    transition:
    transform .35s var(--ind8-ease);
}
.ind8_news_more_icon svg{
    width:100%;
    height:100%;
}
/*==================================================
Hover
==================================================*/
.ind8_news_link:hover{
    transform:translateY(-0.6rem);
    border-color:rgba(246,139,31,.35);
    box-shadow:var(--ind8-shadow);
}
.ind8_news_link:hover .ind8_news_cover img{
    transform:scale(1.05);
    filter:brightness(1.05);
}
.ind8_news_link:hover .ind8_news_title{
    color:var(--ind8-orange);
}
.ind8_news_link:hover .ind8_news_more_icon{
    transform:translateX(.6rem);
}
/*==================================================
Right Sidebar
==================================================*/
.ind8_sidebar{
    position: relative;
    top: -9rem;
}
.ind8_media{
    position: sticky;
    top: 10rem;
    padding: 3rem;
    background: #ffffff;
    border: .1rem solid var(--ind8-border);
    border-radius: var(--ind8-radius);
    overflow: hidden;
    transition: border-color .4s var(--ind8-ease), box-shadow .4s var(--ind8-ease);
}
.ind8_media:hover{
    border-color:rgba(246,139,31,.28);
    box-shadow:var(--ind8-shadow);
}
/*==================================================
Header
==================================================*/
.ind8_media_head{
    margin-bottom: 2.6rem;
}
.ind8_media_label{
    display: inline-flex;
    align-items: center;
    font-size: 2.3rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ind8-orange);
    margin-bottom: 1rem;
}
.ind8_media_heading{
    margin:1.2rem 0 0;
    font-size:2.8rem;
    font-weight:700;
    line-height:1.3;
    color:var(--ind8-title);
}
/*==================================================
Featured
==================================================*/
.ind8_media_feature{
    margin-bottom:2.8rem;
}
.ind8_media_feature_link{
    display:block;
    text-decoration:none;
}
.ind8_media_cover{
    margin: 0;
    overflow: hidden;
    border-radius: 1.6rem;
    aspect-ratio: 16 / 9;
    background: #eef4fb;
}
.ind8_media_cover_inner{
    width:100%;
    height:100%;
    overflow:hidden;
}
.ind8_media_cover img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:
    transform 1s var(--ind8-ease),
    filter .45s var(--ind8-ease);
}
.ind8_media_content{
    margin-top:2rem;
}
.ind8_media_date{
    display:inline-block;
    font-size:1.4rem;
    font-weight:600;
    color:var(--ind8-blue);
}
.ind8_media_title{
    margin:1.2rem 0 0;
    font-size:2rem;
    line-height:1.45;
    font-weight:700;
    color:var(--ind8-title);
    transition:color .35s var(--ind8-ease);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ind8_media_feature_link:hover .ind8_media_cover img{
    transform:scale(1.05);
    filter:brightness(1.05);
}
.ind8_media_feature_link:hover .ind8_media_title{
    color:var(--ind8-orange);
}
/*==================================================
Media List
==================================================*/
.ind8_media_list{
    border-top:.1rem solid var(--ind8-border);
}
.ind8_media_item{
    border-bottom:.1rem solid var(--ind8-border);
}
.ind8_media_item:last-child{
    border-bottom:none;
}
.ind8_media_item_link{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;
    padding:2rem 0;
    text-decoration:none;
}
.ind8_media_item_content{
    flex:1;
    min-width:0;
}
.ind8_media_item_date{
    display:block;
    font-size:1.3rem;
    font-weight:600;
    color:#98a2b3;
}
.ind8_media_item_title{
    margin:.9rem 0 0;
    font-size:1.6rem;
    line-height:1.7;
    font-weight:600;
    color:var(--ind8-title);
    transition:
    color .35s var(--ind8-ease),
    transform .35s var(--ind8-ease);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ind8_media_item_arrow{
    width:2rem;
    height:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ind8-orange);
    flex-shrink:0;
    transition:
    transform .35s var(--ind8-ease);
}
.ind8_media_item_arrow svg{
    width:100%;
    height:100%;
}
.ind8_media_item_link:hover .ind8_media_item_title{
    color:var(--ind8-orange);
    transform:translateX(.4rem);
}
.ind8_media_item_link:hover .ind8_media_item_arrow{
    transform:translateX(.6rem);
}
/*==================================================
Footer
==================================================*/
.ind8_media_footer{
    margin-top:2.8rem;
}
.ind8_view_all{
    display:inline-flex;
    align-items:center;
    gap:1.2rem;
    text-decoration:none;
    font-size:1.5rem;
    font-weight:600;
    color:var(--ind8-orange);
}
.ind8_view_all_icon{
    width:2rem;
    height:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:
    transform .35s var(--ind8-ease);
}
.ind8_view_all_icon svg{
    width:100%;
    height:100%;
}
.ind8_view_all:hover .ind8_view_all_icon{
    transform:translateX(.6rem);
}
/*==================================================
Animation - Default State
==================================================*/
.ind8_title_item,
.ind8_intro,
.ind8_tabs,
.ind8_news,
.ind8_sidebar{
    opacity:0;
    transform:translateY(4rem);
}
.ind8_title_item,
.ind8_intro,
.ind8_tabs,
.ind8_news,
.ind8_sidebar{
    transition:
    opacity .8s var(--ind8-ease),
    transform .8s var(--ind8-ease);
}
/*==================================================
Image Reveal
==================================================*/
.ind8_news_cover_inner,
.ind8_media_cover_inner{
    clip-path:inset(0 100% 0 0);
    transition:
    clip-path 1s var(--ind8-ease);
}
.ind8_news_cover img,
.ind8_media_cover img{
    transform:scale(1.08);
    transition:
    transform 1.4s var(--ind8-ease),
    filter .45s var(--ind8-ease);
}
/*==================================================
Background Motion
==================================================*/
.ind8_bg_line{
    animation:ind8LineMove 24s linear infinite;
}
.ind8_bg_line2{
    animation-delay:8s;
}
.ind8_bg_line3{
    animation-delay:16s;
}
.ind8_bg_dot{
    animation:ind8Dot 5s ease-in-out infinite;
}
.ind8_bg_dot2{
    animation-delay:1.5s;
}
.ind8_bg_dot3{
    animation-delay:3s;
}
/*==================================================
Active
==================================================*/
.ind8_section.ind8_active .ind8_tabs{
    opacity:1;
    transform:translateY(0);
    transition-delay:.7s;
}
/*==================================================
News Stagger
==================================================*/
.ind8_section.ind8_active .ind8_news{
    opacity:1;
    transform:translateY(0);
}
.ind8_section.ind8_active .ind8_news:nth-child(1){
    transition-delay:.85s;
}
.ind8_section.ind8_active .ind8_news:nth-child(2){
    transition-delay:1s;
}
.ind8_section.ind8_active .ind8_news:nth-child(3){
    transition-delay:1.15s;
}
.ind8_section.ind8_active .ind8_news_cover_inner{
    clip-path:inset(0);
}
.ind8_section.ind8_active .ind8_news img{
    transform:scale(1);
}
/*==================================================
Sidebar
==================================================*/
.ind8_section.ind8_active .ind8_sidebar{
    opacity:1;
    transform:translateY(0);
    transition-delay:1.3s;
}
.ind8_section.ind8_active .ind8_media_cover_inner{
    clip-path:inset(0);
    transition-delay:1.45s;
}
.ind8_section.ind8_active .ind8_media_cover img{
    transform:scale(1);
}
/*==================================================
Reading Focus
==================================================*/
.ind8_news_list:hover .ind8_news{
    opacity:.55;
}
.ind8_news_list:hover .ind8_news:hover{
    opacity:1;
}
.ind8_media_list:hover .ind8_media_item{
    opacity:.55;
}
.ind8_media_list:hover .ind8_media_item:hover{
    opacity:1;
}
.ind8_news,
.ind8_media_item{
    transition:
    opacity .35s var(--ind8-ease),
    transform .35s var(--ind8-ease);
}
/*==================================================
IND8 Tab Switch Animation
==================================================*/
.ind8_news_list,
.ind8_media{
    transition:
    opacity .35s var(--ind8-ease),
    transform .35s var(--ind8-ease);
}
.ind8_news_list{
    opacity:1;
    transform:translateX(0);
}
.ind8_media{
    opacity:1;
    transform:translateX(0);
}
/* 离开 */
.ind8_switch_out{
    opacity:0 !important;
    transform:translateX(-2rem);
    pointer-events:none;
}
/* 进入 */
.ind8_switch_in{
    opacity:0;
    transform:translateX(2rem);
}
.ind8_switch_in.ind8_switch_show{
    opacity:1;
    transform:translateX(0);
}
/*==================================================
IND8 Tab Display
==================================================*/
/* 默认全部隐藏 */
.ind8_news_list,
.ind8_media{
    display:none;
}
/* 当前显示 */
.ind8_news_list.ind8_show{
    display:grid;
}
.ind8_media.ind8_show{
    display:block;
}

/* ===== Banner 丝滑优化 ===== */

.hero {
    visibility: visible !important;
    perspective: none !important;
}

/* 关闭全屏扫光 */
.hero.loaded::before {
    content: none !important;
    animation: none !important;
}

/* 关闭鼠标进入时整张 Banner 放大 */
.hero:hover .hero-poster img {
    transform: none !important;
}

.hero-poster img {
    transition: none !important;
    will-change: auto !important;
}

.hero-content {
    transform-style: flat !important;
}

/* 参数卡不再边模糊边移动 */
.spec-box {
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.97);
}