@charset "UTF-8";
/* CSS Document */
/* 此文件专门设置metaldomes页面的样式*/

/*下面是弹片规格列表页X-series.html设置，设置标题文字样式*/
 /* 外层容器：核心是flex让子元素同行，加内边距/边框方便查看（可删除） */
        .outer-box {
            display: flex; /* 关键：让子div横向排列 */
            align-items: center; /* 垂直居中对齐（可选，让文字和图片中心对齐更美观） */
            justify-content: space-between; /* 关键：左右子元素分别贴左右边 */
            padding: 20px; /* 内边距，避免内容贴边 */
            border: 0px solid #eee; /* 边框，方便看布局范围，可删除 */
            width: 90%; /* 占满父容器宽度，可自定义如800px */
            margin: 0 auto;/*左右居中对齐*/
            box-sizing: border-box; /* 内边距不撑大盒子，布局更稳定 */
            background: linear-gradient(to right, #f5f5f5, #e0e0e0); /* 左浅灰→右稍深灰 横向渐变 */
            border-radius: 8px; /* 圆角 */
            margin-bottom: 20px; /* 新增：下方间距20px，核心属性 */
        }

        /* 左侧文字div：左对齐（flex默认左对齐，可显式声明） */
        .text-box {
            text-align: left; /* 文字左对齐 */
        }

        /* 左侧标题文字：标题格式、大字体，用h2（可换h1/h3，按需调整大小） */
        .text-box h2 {
            margin: 0; /* 清除标题默认外边距，避免布局错位 */
            font-size: 24px; /* 字体大小，可自定义 */
            font-weight: 700; /* 粗体，标题默认样式 */
        }

        /* 右侧图片div：右对齐 */
        .img-box {
            text-align: right; /* 图片右对齐 */
        }

        /* 图片：固定180×100，防止图片本身尺寸不符 */
        .img-box img {
            width: 200px;
            height: 100px;
            object-fit: cover; /* 可选：图片比例不符时，裁剪填充不拉伸，可删 */
        }

/* 核心表格样式 - 满足所有定制要求 */
        .modern-table {
            width: 90%; /* 表格宽度，可根据需求修改（如800px/100%） */
            margin: 0 auto; /* 关键：让表格左右居中对齐 */
            border-collapse: collapse; /* 合并单元格边框，简洁无间隙 */
            border-spacing: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 轻微阴影，增加现代感 */
            border-radius: 4px; /* 轻微圆角，避免直角生硬 */
            overflow: hidden; /* 配合圆角，隐藏边框溢出 */
        }

        /* 表格单元格通用样式：内边距+边框+【文字居中对齐】 */
        .modern-table th,
        .modern-table td {
            padding: 2px 6px; /* 内边距适中，避免内容拥挤 前面数值控制上下 后面控制左右*/
            text-align: center; /* 核心修改：从left改为center，所有单元格内容居中 */
            border: 0px solid #e0e0e0; /* 浅灰色边框，区分单元格 */
            line-height: 30px; /* 核心：设置行高，数值越大行越高，可自定义 */
        }

        /* 表头样式：第一行深蓝色背景+白色字体 */
        .modern-table thead tr {
            background-color: #194880; /* 现代深蓝色，不刺眼 */
            color: #ffffff;
            font-weight: 500; /* 字体粗细适中，不突兀 */
        }

        /* 表格主体：奇数行浅灰，偶数行白色，深灰色字体 */
        .modern-table tbody tr:nth-child(odd) {
            background-color: #f5f5f5; /* 柔和浅灰色，不晃眼 */
        }
        .modern-table tbody tr:nth-child(even) {
            background-color: #ffffff;
        }
        .modern-table tbody tr {
            color: #333333; /* 深灰色字体，兼顾可读性和现代感 */
        }

        /* 鼠标悬停行高亮（可选优化）：增加交互性，不影响核心要求 */
        .modern-table tbody tr:hover {
            background-color: #e8f4ff;
            cursor: default;
            transition: background-color 0.2s ease;
        }

       
/*下面是弹片分类页面index.html设置*/

 /* 产品列表容器 */
        .product-list {
            width: 80%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px; /* 卡片之间的间距 */
        }

        /* 金属质感卡片样式 */
        .product-card {
            display: flex;
            align-items: center;
            background: linear-gradient(145deg, #e1e1e1, #ffffff);
            /* 金属质感核心：多层阴影+渐变 */
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.8),
                0 2px 5px rgba(0,0,0,0.1),
                0 4px 15px rgba(0,0,0,0.05);
            border: 1px solid #d1d1d1;
            border-radius: 12px;
            padding: 15px;
            overflow: hidden;
            cursor: pointer;
            /* 基础过渡效果，让动画更丝滑 */
            transition: all 0.3s ease;
            position: relative;
        }

        /* 金属质感的高光效果 */
        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                120deg, 
                rgba(255,255,255,0.2) 0%, 
                rgba(255,255,255,0) 50%, 
                rgba(255,255,255,0.1) 100%
            );
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        /* 鼠标悬浮效果 */
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.8),
                0 8px 20px rgba(0,0,0,0.15),
                0 10px 30px rgba(0,0,0,0.1);
        }

        .product-card:hover::before {
            opacity: 0.8;
        }

        /* 卡片左侧图片容器 */
        .product-img {
            width: 120px;    /* 容器宽度 */
            height: 120px;
            border-radius: 8px;
            display: flex;   /* 开启flex布局 */
            overflow: hidden;
            margin-right: 20px;
            object-position: center; /* 图片在容器中居中显示（可选，默认也是center） */
            align-items: center; /* 垂直居中 */
        }

        .product-img img {
           max-width: 100%; /* 图片最大宽度不超过容器 */
            max-height: 100%; /* 图片最大高度不超过容器 */
            height: auto;    /* 高度自动，保持宽高比 */
            object-fit: cover; /* 保持图片比例，填充容器 */
            
            transition: transform 0.3s ease;
        }

        .product-card:hover .product-img img {
            transform: scale(1.05); /* 图片轻微放大 */
        }

        /* 卡片右侧内容容器 */
        .product-content {
            flex: 0.95; /* 占满剩余空间的90% */
            padding: 10px;
            margin-left:30px;
        }

        /* 产品标题 */
        .product-title {
            font-size: 1.45rem;
            font-weight: 600;
            color: #222;
            margin-bottom: 10px;
            transition: color 0.3s ease;
            text-align: left;
        }

        .product-card:hover .product-title {
            color: #1a73e8; /* 悬浮时标题变色 */
        }

        /* 产品说明文字 */
        .product-desc {
            font-size: 1.15rem;
            color: #666;
            line-height: 1.5;
            text-align: left;
        }

/* 弹片具体型号页面设置*/

.md_main{/* 总页面，含左侧菜单和右侧型号页面*/
    display: flex;
   
    height: 100%;
    
}
.md_main_desc{/* 右侧具体型号页面*/
    margin:50px;
}

.md_detail_title1{/* 右侧具体型号页面第1行标题*/
    font-size: 28px;
}
.md_detail_title2{/* 右侧具体型号页面第2行标题*/
    font-size: 18px;
}


/*下面是弹片规格列表页X-series.html设置，设置标题文字样式*/
   /* 全局布局：左侧菜单容器 */
        .md_sidebar {
            width: 280px;
            
            height: 100%;
            padding: 20px 0;
            
        }

        /* 菜单列表样式重置：左对齐，清除默认间距 */
        .md_menu, .md_submenu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* 菜单项基础样式 */
        .md_menu-item, .md_submenu-item {
            margin: 5px 0;
            position: relative;
            text-align: left;
        }

        /* 隐藏所有层级的复选框（核心切换控件） */
        .md_menu-toggle {
            display: none;
        }

        /* 菜单标题样式：分层级缩进，左对齐 */
        .md_menu-title {
            display: block;
            padding: 10px 20px;
            background: #fff;
            cursor: pointer;
            border-left: 3px solid transparent;
            transition: all 0.2s;
            margin: 0;
        }
        /* 一级标题：基础缩进 */
        .md_menu-title.level1 { padding-left: 20px; }
        /* 二级标题：增加缩进 */
        .md_menu-title.level2 { padding-left: 35px; }
        /* 三级标题：仅作为示例，如需四级可扩展 */
        .md_menu-title.level3 { padding-left: 50px; }
        
        .md_menu-title:hover {
            background: #e9e9e9;
            border-left-color: #409eff;
        }

        /* 子菜单容器：默认隐藏，分层级控制缩进 */
        .md_submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .md_submenu.level1 { padding-left: 0; }   /* 一级子菜单（二级标题） */
        .md_submenu.level2 { padding-left: 15px; } /* 二级子菜单（三级标题/最终项） */
        .md_submenu.level3 { padding-left: 30px; } /* 三级子菜单（如需扩展） */

        /* 最下层菜单项样式 */
        .md_submenu-desc {
            display: block;
            padding: 8px 20px;
            color: #666;
            text-decoration: none;
            margin: 0;
            cursor: pointer;
        }
        .md_submenu-desc:hover {
            color: #409eff;
            text-decoration: underline;
        }

        /* 核心展开逻辑：分级控制 */
        /* 一级复选框选中 → 展开一级子菜单（二级标题） */
        .md_menu-toggle.level1:checked ~ .md_submenu.level1 { max-height: 800px; }
        /* 二级复选框选中 → 展开二级子菜单（三级标题/最终项） */
        .md_menu-toggle.level2:checked ~ .md_submenu.level2 { max-height: 800px; }
        /* 三级复选框选中 → 展开三级子菜单（如需扩展） */
        .md_menu-toggle.level3:checked ~ .md_submenu.level3 { max-height: 800px; }

        /* 联动收回：上级收起时，强制收回所有下级 */
        .md_menu-toggle:not(:checked) ~ .md_submenu .md_menu-toggle { display: none; }
        .md_menu-toggle:not(:checked) ~ .md_submenu .md_submenu { max-height: 0 !important; }

        /* 菜单图标：展开/收起旋转 */
        .md_menu-title::before {
            content: "▶";
            font-size: 12px;
            margin-right: 8px;
            transition: transform 0.3s;
        }
        .md_menu-toggle:checked ~ .md_menu-title::before {
            transform: rotate(90deg);
        }