@charset "utf-8";
/* CSS Document */
  
/* 全局重置与基础样式：企业级规范 */
     
     

        /* 全局动画变量：统一缓动曲线，所有动画保持一致节奏 */
        :root {
            --animate-duration: 0.6s;
            --animate-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
            --theme-color: #1890ff;
            --theme-light: #e6f7ff;
            --border-color: #f0f0f0;
            /* 新增：产品文字基础字号，方便统一控制 */
            --product-font-base: 16px;
        }

        /* 页面入场渐入动画：整体从透明到显示，轻微上移 */
        .page-container {
            max-width: 1340px;
            margin: 0 auto;
            display: flex;
            gap: 2rem;
            background: #fff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
            opacity: 0;
            transform: translateY(20px);
            animation: pageFadeIn var(--animate-duration) var(--animate-ease) forwards;
            animation-delay: 0.1s;
        }
        @keyframes pageFadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 核心：两个主区块强制等高 + 固定宽度比例，边框/圆角统一视觉
           新增：padding-left同步，让左右内容严格对齐 */
        .product-section, .solution-section {
            flex: none;
            display: flex;
            flex-direction: column;
            height: 100%;
            border-radius: 6px;
            padding: 0 0 0 0.5rem; /* 左内边距同步，实现左右内容对齐 */
            /* 区块子元素渐入动画：逐个延迟显示 */
            > * {
                opacity: 0;
                transform: translateY(10px);
                animation: itemFadeIn 0.5s var(--animate-ease) forwards;
            }
            > .section-header { animation-delay: 0.3s; }
            > .product-cards, > .solution-cards { animation-delay: 0.5s; }
        }
        @keyframes itemFadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .product-section {
            width: 70%;
        }
        .solution-section {
            width: 30%;
            /* 电脑端核心：右侧留白保留，左内边距与产品区块同步 */
            padding-right: 1.5rem;
        }

        /* 区块标题：通用样式，底部分隔线，视觉分区
           新增：字体放大，与产品文字层级匹配 */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.2rem;
            padding-bottom: 0.6rem;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        .section-header h2 {
            font-size: 1.4rem; /* 放大2号，原1.3rem */
           /* font-weight: 700;*/
            color: #222;
            transition: all 0.3s var(--animate-ease);
        }
        /* 标题悬浮轻微放大 */
        .section-header:hover h2 {
            color: var(--theme-color);
            transform: scale(1.02);
        }
        .view-all {
            color: var(--theme-color);
            text-decoration: none;
            font-size: 1rem; /* 放大2号，原0.9rem */
            display: flex;
            align-items: center;
            transition: all 0.3s var(--animate-ease);
        }
        .view-all:hover {
            color: #096dd9;
            transform: translateX(2px);
        }
        .view-all::after {
            content: " ";
            font-size: 0.9rem; /* 放大2号，原0.8rem */
            margin-left: 0.3rem;
            transition: transform 0.2s var(--animate-ease);
        }
        .view-all:hover::after {
            transform: translateX(3px) scale(1.1);
        }

        /* 产品卡片容器：大屏四项一行，手机端强制2行2列 */
        .product-cards {
            display: flex;
            gap: 1rem;
            flex-grow: 1;
        }
        /* 产品卡片：核心交互升级，悬浮上移+阴影+边框+内部元素微动
           新增：padding微调，配合字体放大，布局更舒展 */
        .product-card {
            background-color: #fafafa;
            padding: 1.4rem 1.2rem; /* 内边距放大，适配字体 */
            border-radius: 6px;
            flex: 1;
            min-width: 0;
           /* border: 1px solid var(--border-color);
            transition: all 0.4s var(--animate-ease);*/
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }
        /* 卡片悬浮：上移+深阴影+主题色边框+背景轻微提亮 */
       /* .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(24, 144, 255, 0.08);
            border-color: var(--theme-color);
            background-color: #fff;
        }*/
        /* 产品卡片标题：字体放大2号，链接样式统一
           左侧主题色条：悬浮从3px变8px，强化视觉 */
        .product-card h3 {
            font-size: 1.15rem; /* 放大2号，原1.05rem */
            /*font-weight: 700;*/
            margin-bottom: 1rem; /* 间距放大，适配字体 */
            color: #222;
            padding-left: 0.5rem;
            border-left: 3px solid var(--theme-color);
            flex-shrink: 0;
            transition: all 0.3s var(--animate-ease);
        }
        /* 产品所有链接基础样式：取消下划线，继承颜色，hover统一主题色 */
       /* .product-card a {
            text-decoration: none;
            color: inherit;
            transition: all 0.2s var(--animate-ease);
        }*/
       /* .product-card a:hover {
            color: var(--theme-color);
        }*/
       /* .product-card:hover h3 {
            border-left-width: 8px;
            color: var(--theme-color);
        }*/
        .product-card ul {
            list-style: none;
            margin-bottom: 1rem; /* 间距放大，适配字体 */
            flex-grow: 1;
        }
        /* 产品列表项：字体放大2号，加链接，行高适配 */
        .product-card ul li {
            margin-bottom: 0.6rem; /* 间距放大，适配字体 */
            color: #666;
            font-size: 1rem; /* 放大2号，原0.9rem */
            line-height: 1.6; /* 行高加大，避免文字拥挤 */
            white-space: nowrap;
            overflow: hidden;
/*            text-overflow: ellipsis;
            transition: all 0.2s var(--animate-ease);*/
        }
        /* 列表项悬浮轻微右移+变色 */
        .product-card:hover ul li {
            color: #444;
            /*transform: translateX(2px);*/
        }
        /* 更多链接：字体放大2号，下划线渐显效果保留 */
        .product-card .more-link {
            color: var(--theme-color);
            text-decoration: none;
            font-size: 0.95rem; /* 放大2号，原0.85rem */
            display: inline-block;
            flex-shrink: 0;
           /* transition: all 0.3s var(--animate-ease);*/
            position: relative;
        }
        .product-card .more-link::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
           /* background-color: #096dd9;
            transition: width 0.3s var(--animate-ease);*/
        }
        .product-card .more-link:hover {
            /*color: #096dd9;
            transform: translateX(3px);*/
        }
        .product-card .more-link:hover::after {
            width: 100%;
        }
        /* 产品卡片背景微光动效：悬浮从左到右扫过 */
        .product-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            /*background: linear-gradient(90deg, transparent, rgba(24,144,255,0.05), transparent);
            transition: left 0.6s var(--animate-ease);*/
            z-index: 0;
        }
        .product-card:hover::before {
            left: 100%;
        }
        .product-card > * {
            position: relative;
            z-index: 1;
        }

        /* 解决方案容器：占满剩余高度，卡片均分 */
        .solution-cards {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            flex-grow: 1;
            justify-content: space-between;
            width: 100%; /* 调整为100%，配合左右区块内边距同步，实现严格对齐 */
        }
        /* 解决方案卡片：交互升级，背景图视差+悬浮右移+阴影+遮罩变浅 */
        .solution-card {
            padding: 1.33rem 1.2rem;
            border-radius: 6px;
            font-size: 1.1rem;
            font-weight: 500;
            color: #0071d0;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            border: 1px solid var(--border-color);
            transition: all 0.4s var(--animate-ease);
            z-index: 1;
            width: 100%;
            cursor: pointer;
        }
        /* 背景图视差效果：悬浮时背景图轻微移动，增加空间感 */
        .solution-card:hover {
            transform: translateX(5px) scale(1.02);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            border-color: var(--theme-light);
        }
        /* 背景图遮罩：hover变浅，背景图更清晰 */
        .solution-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*background: linear-gradient(135deg, rgba(0,0,255,0.6) 0%, rgba(193,225,255,0.6) 100%);*/
            z-index: -1;
            transition: background 0.4s var(--animate-ease);
        }
        .solution-card:hover::before {
            background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
        }
        /* 六边形装饰：悬浮旋转+放大+透明度提升 */
        .solution-card::after {
            content: "";
            position: absolute;
            top: -10px;
            right: -10px;
            width: 80px;
            height: 80px;
            /*background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgba(255,255,255,0.3)" d="M50 15L85 40L85 60L50 85L15 60L15 40Z"/></svg>') no-repeat;*/
            background-size: contain;
            opacity: 0.8;
            z-index: -1;
            transition: all 0.4s var(--animate-ease);
        }
        .solution-card:hover::after {
            transform: rotate(30deg) scale(1.1);
            opacity: 1;
            right: 0;
            top: 0;
        }
        /* 解决方案文字：悬浮轻微放大+发光效果 */
        .solution-card span {
            position: relative;
            z-index: 2;
            transition: all 0.3s var(--animate-ease);
        }
        .solution-card:hover span {
            transform: scale(1.05);
            text-shadow: 0 0 10px rgba(255,255,255,0.8);
        }

        /* 四个解决方案卡片：独立背景图，居中覆盖不变形 */
        .card-1 {
            background: url("../images/bgr-1.png") no-repeat center center;
            background-size: cover;
            transition: background-position 0.5s var(--animate-ease);
        }
        .card-1:hover {
            background-position: 10% 50%;
        }
        .card-2 {
            background: url("../images/bgr-2.png") no-repeat center center;
            background-size: cover;
            transition: background-position 0.5s var(--animate-ease);
        }
        .card-2:hover {
            background-position: 20% 50%;
        }
        .card-3 {
            background: url("../images/bgr-3.png") no-repeat center center;
            background-size: cover;
            transition: background-position 0.5s var(--animate-ease);
        }
        .card-3:hover {
            background-position: 30% 50%;
        }
        .card-4 {
            background: url("../images/bgr-4.png") no-repeat center center;
            background-size: cover;
            transition: background-position 0.5s var(--animate-ease);
        }
        .card-4:hover {
            background-position: 40% 50%;
        }

        /* 响应式核心：手机端（≤1200px）产品严格2行2列，取消动画过度效果
           新增：字体适配，内边距微调，保持移动端体验 */
        @media (max-width: 1200px) {
            .page-container {
                flex-direction: column;
                gap: 1.5rem;
                padding: 1.5rem;
                animation: none;
                opacity: 1;
                transform: none;
            }
            .product-section, .solution-section {
                width: 100%;
                height: auto;
                padding: 0; /* 移动端取消左右内边距，全屏对齐 */
                > * {
                    animation: none;
                    opacity: 1;
                    transform: none;
                }
            }
            .product-cards {
                flex-wrap: wrap;
                gap: 1rem;
                flex-grow: 0;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(2, 1fr);
            }
            .product-card {
                flex: none;
                width: 100%;
                height: 100%;
                min-width: 0;
                margin: 0;
                padding: 1.2rem 1rem; /* 移动端内边距微调 */
                /* 手机端弱化悬浮效果，避免误触 */
                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.06);
                }
            }
            /* 移动端产品文字字体微调，避免过大 */
            .product-card h3 {
                font-size: 1.1rem;
            }
            .product-card ul li {
                font-size: 0.95rem;
            }
            .solution-cards {
                flex-grow: 0;
                height: auto;
                justify-content: flex-start;
                width: 100%;
            }
            .solution-card {
                padding: 1.8rem 1.2rem;
                font-size: 1rem;
                /* 手机端弱化解决方案悬浮放大 */
                &:hover {
                    transform: translateX(3px) scale(1.01);
                }
            }
        }

        /* 超小屏（≤480px）：兜底微调 */
        @media (max-width: 480px) {
            body {
                padding: 0.8rem;
            }
            .page-container {
                padding: 1rem;
            }
            .product-cards {
                gap: 0.8rem;
            }
            .product-card ul li {
                font-size: 0.9rem; /* 超小屏字体再微调 */
                padding-right: 0.3rem;
            }
            .solution-card {
                padding: 1.5rem 1rem;
            }
        }