@charset "utf-8";
/* ============================================================
   首页「应用及解决方案」板块 —— 独立样式文件
   作用域：.index__solution.sol-sec
   PC（≥1201px）：rem 等比，基准 1920px（1rem = 100px）
   平板（769-1200px）：固定 px
   手机（≤768px）：基准 750px，单个产品图横向滑动
   ============================================================ */

.index__solution.sol-sec{
    --sol-red:#bf0008;
    --sol-ink:#4a4a4a;
    --sol-mark:#e3e4e9;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    padding:0 1.28rem;
    background:#f4f5f7;
    overflow:hidden;
}
.sol-inner{
    width:100%;
    max-width:16.64rem;
    margin:0 auto;
    box-sizing:border-box;
}

/* ---------- 标题 ---------- */
.sol-head{
    position:relative;
    padding-top:.42rem;
    text-align:center;
}
.sol-head__en{
    position:absolute;
    left:50%;
    top:.04rem;
    transform:translateX(-50%);
    font-family:Arial,Helvetica,"Microsoft YaHei",sans-serif;
    font-size:.42rem;
    line-height:1;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--sol-mark);
    white-space:nowrap;
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
}
.sol-head__cn{
    position:relative;
    margin:0;
    padding:0;
    font-size:.44rem;
    line-height:1.1;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--sol-red);
}
.sol-head__cn:after{
    content:"";
    display:block;
    width:.76rem;
    height:.03rem;
    margin:.26rem auto 0;
    background:var(--sol-red);
}

/* ---------- 说明文字 ---------- */
.sol-br-m{display:none;}
.sol-desc{
    margin:.44rem 0 0;
    font-size:.2rem;
    line-height:1.5;
    color:#333;
    text-align:center;
}

/* ---------- 类目 tabs ----------
   设计稿：每个类目是一个「等大的正方形」占位块（1920 下约 142×142）
   未选中 —— 无底色，深灰图标 + 深灰文字
   选中   —— 整块 #bf0008 红底，图标与文字转纯白
   关键：块用固定宽高（正方形），不靠 padding 撑，这样 7 个类目在
   任何屏幕下都是等大方块、间距均匀，激活态切换时不会跳动、也不会
   因为标签字数不同而变成宽窄不一的长方形
   ------------------------------------------------------------ */
.sol-tabs{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:center;
    gap:.26rem .3rem;
    margin-top:.5rem;
}
.sol-tab{
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:1.42rem;
    height:1.42rem;
    padding:0;
    border:0;
    background:transparent;
    color:var(--sol-ink);
    font-family:inherit;
    cursor:pointer;
    outline:none !important;
    -webkit-tap-highlight-color:transparent;
    transition:color .25s ease,background-color .25s ease;
}
.sol-tab__ico{
    display:block;
    height:.56rem;
    width:auto;
    max-width:1rem;
    transition:filter .25s ease;
}
.sol-tab__txt{
    display:block;
    margin-top:.19rem;
    font-size:.22rem;
    line-height:1;
    white-space:nowrap;
    color:inherit;
}
@media (hover:hover){
    .sol-tab:not(.is-active):hover{
        background:rgba(191,0,8,.06);
    }
}
.sol-tab.is-active{
    background:var(--sol-red);
    color:#fff;
}
.sol-tab.is-active .sol-tab__ico{
    filter:brightness(0) invert(1);
    -webkit-filter:brightness(0) invert(1);
}

/* ---------- 产品区 ---------- */
.sol-panels{
    position:relative;
    margin-top:.24rem;
}
.sol-panel{
    display:none;
}
.sol-panel.is-active{
    display:block;
}
.sol-track{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
}
.sol-card{
    position:relative;
    overflow:hidden;
    background:#f5f5f5;
    aspect-ratio:1.2146;
}
.sol-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.sol-card:hover img{
    transform:scale(1.045);
}
.sol-card__name{
    position:absolute;
    left:0;
    right:0;
    bottom:.13rem;
    text-align:center;
    font-size:.165rem;
    line-height:1;
    color:#5a5a5a;
    text-shadow:0 0 .06rem rgba(255,255,255,.55);
    pointer-events:none;
}

/* 手机端分页点：PC 不显示 */
.sol-dots{
    display:none;
}

/* ============================================================
   中等屏幕（997 - 1200px）
   ============================================================ */
@media all and (min-width:997px) and (max-width:1200px){
    /* 这些断点下 .hb-100 变成 height:auto，需要显式撑满整屏 */
    .index__solution.sol-sec{padding:0 30px;min-height:100%;}
    .sol-inner{max-width:1100px;}
    .sol-head{padding-top:48px;}
    .sol-head__en{font-size:40px;top:0;}
    .sol-head__cn{font-size:42px;}
    .sol-head__cn:after{width:62px;height:3px;margin-top:18px;}
    .sol-desc{margin-top:26px;font-size:16px;line-height:1.6;}
    .sol-tabs{margin-top:18px;gap:14px 12px;}
    .sol-tab{width:96px;height:96px;}
    .sol-tab__ico{height:38px;max-width:68px;}
    .sol-tab__txt{margin-top:12px;font-size:15px;}
    .sol-panels{margin-top:18px;}
    .sol-card__name{bottom:12px;font-size:14px;}
}

/* ============================================================
   平板（769 - 996px）
   ============================================================ */
@media all and (min-width:769px) and (max-width:996px){
    .index__solution.sol-sec{padding:0 20px;min-height:100%;}
    .sol-inner{max-width:1100px;}
    .sol-head{padding-top:40px;}
    .sol-head__en{font-size:32px;top:0;}
    .sol-head__cn{font-size:34px;}
    .sol-head__cn:after{width:50px;height:3px;margin-top:14px;}
    .sol-desc{margin-top:20px;font-size:14px;line-height:1.6;}
    .sol-tabs{margin-top:14px;gap:12px 8px;}
    .sol-tab{width:88px;height:88px;}
    .sol-tab__ico{height:36px;max-width:62px;}
    .sol-tab__txt{margin-top:11px;font-size:14px;}
    .sol-panels{margin-top:14px;}
    .sol-card__name{bottom:9px;font-size:12px;}
}

/* ============================================================
   手机竖屏（≤768px）：基准 750px
   标题居中 → 说明 → 4+3 类目 → 单图横向滑动
   ============================================================ */
@media all and (max-width:768px){
    .index__solution.sol-sec{
        display:block;
        height:auto;
        padding:26px 24px 34px;
    }
    .sol-inner{max-width:none;}

    /* 手机版水印在标题上方独立成行，避免与标题重叠 */
    .sol-head{padding-top:20px;}
    .sol-head__en{
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        display:block;
        margin:0 0 8px;
        font-size:42px;
        letter-spacing:.02em;
    }
    .sol-head__cn{font-size:53px;}
    .sol-head__cn:after{width:71px;height:4px;margin-top:16px;}

    .sol-br-m{display:inline;}
    .sol-desc{margin-top:64px;font-size:21px;line-height:2;text-align:center;}

    /* 4 + 3 两行，整体居中；每项固定 166 方形块，7 项等大
       max-width + aspect-ratio：极窄视口下自动缩成方形，仍保持 4 个一排 */
    .sol-tabs{margin-top:50px;gap:24px 6px;}
    .sol-tab{
        width:166px;
        height:auto;
        aspect-ratio:1/1;
        max-width:calc((100% - 18px) / 4);
    }
    .sol-tab__ico{height:clamp(44px,9.87vw,74px);max-width:124px;}
    .sol-tab__txt{margin-top:clamp(9px,1.87vw,14px);font-size:clamp(15px,3.33vw,25px);}

    .sol-panels{margin-top:70px;}

    /* 单图满宽，左右滑动切换 */
    .sol-track{
        display:flex;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }
    .sol-track::-webkit-scrollbar{display:none;width:0;height:0;}
    .sol-card{
        flex:0 0 100%;
        width:100%;
        aspect-ratio:1.334;
        scroll-snap-align:center;
        scroll-snap-stop:always;
    }
    .sol-card:hover img{transform:none;}
    .sol-card__name{bottom:20px;font-size:22px;}

    .sol-dots{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        margin-top:22px;
    }
    .sol-dots i{
        width:8px;
        height:8px;
        border-radius:50%;
        background:#d8d8d8;
        transition:background-color .25s ease,width .25s ease;
    }
    .sol-dots i.is-on{
        width:18px;
        border-radius:4px;
        background:var(--sol-red);
    }
}