/*** FOOTER *****/
/* --- Footer 基础容器 --- */
.apin-site-footer {
    background: linear-gradient(180deg, #434343 0%, #000000 100%);
    color: #cccccc; /* 默认文字使用浅灰色，降低长期阅读的刺眼感 */
    padding: 80px 0 30px;
    border-top: 5px solid #e0242b; /* 顶部加一条极细的红线，压住阵脚 */
    font-family: inherit;
}

.apin-footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- 上半部分：4列 Grid 布局 --- */
.apin-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; /* 品牌栏稍宽，联系栏次宽 */
    gap: 60px;
    margin-bottom: 60px;
}

/* 第 1 列品牌区特有样式 */
.apin-footer-logo {
    display: block;
    margin-bottom: 25px;
}
.apin-footer-logo img {
    height: 40px;
    width: auto;
}
.apin-footer-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 300px;
}
.apin-social-links {
    display: flex;
    gap: 15px;
}
.apin-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #333333;
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.apin-social-icon:hover {
    background-color: #e0242b;
    border-color: #e0242b;
    color: #ffffff;
    transform: translateY(-3px); /* 悬浮微动效 */
	text-decoration:none;
}

/* 标题样式 */
.apin-footer-heading {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    position: relative;
}

/* 链接列表 */
.apin-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.apin-footer-links li {
    margin-bottom: 15px;
}
.apin-footer-links a {
    color: #cccccc;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}
.apin-footer-links a:hover {
    color: #ffffff;
    padding-left: 5px; /* 悬浮时链接向右微微缩进，极具交互感 */
}
/* 用红色方块作为列表悬浮时的前缀 */
.apin-footer-links a::before {
    content: "■";
    color: transparent;
    font-size: 8px;
    margin-right: 0;
    width: 0;
    display: inline-block;
    transition: all 0.3s ease;
}
.apin-footer-links a:hover::before {
    color: #e0242b;
    margin-right: 8px;
    width: auto;
}

/* 地址与联系方式 */
.apin-footer-address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
}
.apin-footer-address p {
    margin-bottom: 10px;
}
.apin-footer-address strong {
    color: #ffffff;
    font-size: 16px;
}
.apin-contact-line {
    display: flex;
    margin-top: 15px;
}
.apin-contact-label {
    color: #888888;
    width: 60px;
}
.apin-contact-line a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.apin-contact-line a:hover {
    color: #e0242b;
}

/* --- 下半部分：版权区 --- */
.apin-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid #1a1a1a; /* 极暗的分割线 */
    font-size: 13px;
    color: #666666;
}
.apin-legal-links a {
    color: #666666;
    text-decoration: none;
    transition: color 0.3s ease;
}
.apin-legal-links a:hover {
    color: #ffffff;
}
.apin-separator {
    margin: 0 10px;
    color: #333333;
}

/* --- 移动端响应式处理 --- */
@media (max-width: 1024px) {
    .apin-footer-top {
        grid-template-columns: 1fr 1fr; /* 平板端变为2列 */
    }
}

@media (max-width: 768px) {
    .apin-site-footer {
        padding: 50px 0 20px;
    }
    .apin-footer-container {
        padding: 0 20px;
    }
    .apin-footer-top {
        grid-template-columns: 1fr; /* 手机端变为单列垂直堆叠 */
        gap: 40px;
    }
    .apin-footer-desc {
        max-width: 100%;
    }
    .apin-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}



/*** 移动端不显示 *****/
.hide-on-mobile {
    display: block; /* 确保在大屏幕时显示 */
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}


/*** PC 端隐藏，移动端显示 ***/
.hide-on-pc {
  display: none;
}

@media (max-width: 768px) {
  .hide-on-pc {
    display: block;
  }
}


.font-size-10 {
    font-size: 10px
}

.font-size-11 {
    font-size: 11px
}

.font-size-12 {
    font-size: 12px
}

.font-size-13 {
    font-size: 13px
}

.font-size-14 {
    font-size: 14px
}

.font-size-15 {
    font-size: 15px
}

.font-size-16 {
    font-size: 16px
}

.font-size-17 {
    font-size: 17px
}

.font-size-18 {
    font-size: 18px
}

.font-size-19 {
	font-size:19px;
}

.font-size-20 {
    font-size: 20px
}

.font-size-21 {
    font-size: 21px
}

.font-size-22 {
    font-size: 22px
}

.font-size-23 {
    font-size: 23px
}

.font-size-24 {
    font-size: 24px
}

.font-size-25 {
    font-size: 25px
}

.font-size-26 {
    font-size: 26px
}

.font-size-27 {
    font-size: 27px
}

.font-size-28 {
    font-size: 28px
}

.font-size-29 {
    font-size: 29px
}

.font-size-30 {
    font-size: 30px
}

.font-size-31 {
    font-size: 31px
}

.font-size-32 {
    font-size: 32px
}

.font-size-33 {
    font-size: 33px
}

.font-size-34 {
    font-size: 34px
}

.font-size-35 {
    font-size: 35px
}

.font-size-36 {
    font-size: 36px
}

.font-size-37 {
    font-size: 37px
}

.font-size-38 {
    font-size: 38px
}

.font-size-39 {
    font-size: 39px
}

.font-size-40 {
    font-size: 40px
}

.font-size-41 {
    font-size: 41px
}

.font-size-42 {
    font-size: 42px
}

.font-size-43 {
    font-size: 43px
}

.font-size-44 {
    font-size: 44px
}

.font-size-45 {
    font-size: 45px
}

.font-size-46 {
    font-size: 46px
}

.font-size-47 {
    font-size: 47px
}

.font-size-48 {
    font-size: 48px
}

.font-size-49 {
    font-size: 49px
}

.font-size-50 {
    font-size: 50px
}

.font-size-51 {
    font-size: 51px
}

.font-size-52 {
    font-size: 52px
}



/* --- Header 基础 --- */
.apin-site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
background: #fff;
    border-bottom: 1px solid #eeeeee;
    z-index: 1000;
    transition: transform 0.4s ease;
}

.apin-header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- 导航列表 --- */
.apin-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.apin-nav-item {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 25px;
    text-decoration: none;
    color: #000000; /* 默认状态：黑色 */
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* --- 核心细节逻辑：Focus Out 效果 --- */

/* 1. 当鼠标进入列表区域时，所有项默认变为灰色 */
.apin-nav-list:hover .apin-nav-item {
    color: #bbbbbb; 
	text-decoration:none;
}

/* 2. 当前被直接悬浮的一级菜单项保持黑色 */
.apin-nav-list .apin-nav-item:hover {
    color: #000000;
		text-decoration:none;
}

/* 3. 新增：当鼠标在二级下拉面板内移动时，对应的一级菜单项也保持黑色 */
.apin-has-dropdown:hover > .apin-nav-item {
    color: #000000 !important;
}

/* --- 宽幅下拉区块 (Mega Menu) --- */
.apin-dropdown-pane {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: -1;
}

.apin-has-dropdown:hover .apin-dropdown-pane {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.apin-dropdown-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.apin-dropdown-column h3 {
    font-size: 18px;
    color: black;
	font-weight:600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.apin-dropdown-column p {
    padding-right: 60px;
}

.apin-dropdown-column a::before {
  content: "■";      /* 插入方块符号 */
  margin-right: 8px; /* 设置方块与文字之间的间距 */
  display: inline-block;
}

.apin-dropdown-column a {
    display: block;
    text-decoration: none;
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.apin-dropdown-column a:hover {
    color: #e0242b; /* 二级菜单悬浮变红，提供反馈 */
}

/* 特色列样式 */
.apin-promo-card {
    background-color: #f9f9f9;
    padding: 30px;
    border-left: 3px solid #e0242b;
}

.apin-promo-card span {
    color: #e0242b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* 背景遮罩 */
.apin-nav-overlay-bg {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 999;
}

.apin-has-dropdown:hover ~ .apin-nav-overlay-bg {
    opacity: 1;
    visibility: visible;
}





/* 默认隐藏移动端组件 */
.apin-mobile-header, .apin-mobile-drawer {
    display: none;
}

@media (max-width: 1024px) {
    /* 1. 隐藏 PC 端 Header (请根据你 PC header 的类名微调) */
    .apin-site-header { display: none !important; }

    /* 2. 移动端 Header 条 */
    .apin-mobile-header {
        display: block;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 60px;
        background: #fff; border-bottom: 1px solid #eee;
        z-index: 2000;
    }
    .apin-mobile-header-inner {
        display: flex; justify-content: space-between; align-items: center;
        height: 100%; padding: 0 20px;
    }

    /* 汉堡按钮（参考你要求的方框风格） */
    .apin-mobile-menu-btn {
        background: none; border: 1.5px solid #000;
        padding: 6px 8px; cursor: pointer;
    }
    .apin-menu-line {
        display: block; width: 18px; height: 2px;
        background: #000; position: relative;
    }
    .apin-menu-line::before, .apin-menu-line::after {
        content: ""; position: absolute; width: 18px; height: 2px;
        background: #000; left: 0;
    }
    .apin-menu-line::before { top: -6px; }
    .apin-menu-line::after { bottom: 6px; }

    /* 3. 抽屉式菜单 */
    .apin-mobile-drawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; right: 0;
        width: 100%; height: 100vh;
        background: #fff; z-index: 3000;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .apin-mobile-drawer.active { transform: translateX(0); }

    .apin-drawer-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 20px; border-bottom: 1px solid #eee;
    }
    .apin-drawer-title { font-weight: 800; letter-spacing: 2px; }
    .apin-drawer-close { background: none; border: none; font-weight: 700; cursor: pointer; }

    /* 菜单列表 */
    .apin-drawer-nav { flex: 1; overflow-y: auto; padding: 20px; }
    
    .apin-drawer-link-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 0; border-bottom: 1px solid #f5f5f5;
    }
    .apin-drawer-link-row a, .apin-drawer-solo-link {
        font-size: 20px; font-weight: 700; text-decoration: none; color: #000;
    }
    .apin-submenu-toggle { font-size: 24px; cursor: pointer; padding: 0 10px; }

    /* 二级菜单折叠 */
    .apin-drawer-submenu {
        max-height: 0; overflow: hidden;
        transition: max-height 0.3s ease-out;
        background: #fafafa;
    }
    .apin-drawer-item.open .apin-drawer-submenu { max-height: 500px; padding: 10px 0; }
    .apin-drawer-submenu a {
        display: block; padding: 12px 15px;
        text-decoration: none; color: #444; font-size: 16px;
    }
    .apin-drawer-submenu a::before { content: "■"; margin-right: 10px; font-size: 8px; color: #e0242b; }

    .apin-drawer-cta-link {
        display: block; margin-top: 20px; padding: 15px;
        background: #000; color: #fff; text-align: center; text-decoration: none;
    }

    .apin-drawer-footer { padding: 30px 20px; font-size: 13px; color: #999; line-height: 1.6; }
}




.grey-red-button {
    display: inline-block;
    background-color: #fff0;
    color: #fff;
    border: 2px solid #fff;
    padding: 8px 20px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0px;
    transition: all 0.3s ease;
	cursor: pointer;
}

.grey-red-button:hover {
    background-color: #fff;
    color: black;
    border: 2px solid #fff;
    font-weight: bold;
    text-decoration: none;
	cursor: pointer;
}


/**** container with bg ****/
.container-with-background {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1px 0;
}



/****交互悬浮变色容器 ****/
/* --- 独立卡片组件 --- */
.apin-feature-card {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    text-decoration: none; /* 消除 a 标签默认下划线 */
}

/* 背景图处理 */
.apin-card-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* 确保图片完美填充 */
    /* 如果你的图片比例不一，可以强制设置一个高度或比例，例如：
       aspect-ratio: 4 / 3; */
}

/* 底部交互栏 */
.apin-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 25px; /* 内边距，可根据视觉需求微调 */
    display: flex;
    justify-content: space-between; /* 文字靠左，箭头靠右 */
    align-items: center;
    background-color: #454545; /* 默认透明，显示原本的黑色底图 */
    transition: background-color 0.3s ease; /* 顺滑的颜色切换动效 */
    box-sizing: border-box;
}

/* 文字样式 */
.apin-card-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* 箭头样式 */
.apin-card-arrow {
    color: #ffffff;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

/* --- 核心交互：Hover 效果 --- */

.apin-feature-card:hover .apin-card-footer {
    background-color: #ff101085;
}

.apin-feature-card:hover .apin-card-text,
.apin-feature-card:hover .apin-card-arrow {
    color: #ffffff;
}

.apin-feature-card:hover .apin-card-arrow {
    transform: translateX(6px);
}

/*** text black ***/
.text-black {
    color: #000000;
}


/* 可复用的 class */
.corner-square-container-bottom-right {
  /* 必须设置为相对定位，这样右下角的方块才会相对于这个容器进行绝对定位 */
  position: relative; 
}

/* 使用 ::after 伪元素生成黑方块 */
.corner-square-container-bottom-right::after {
  content: ""; /* 伪元素必须要有 content 属性才能显示 */
  position: absolute;
  
  /* 定义方块尺寸和颜色 */
  width: 50px;
  height: 50px;
  background-color: black;
  
  /* 距离右下角各 30px (等同于你要求的 margin-right 和 margin-bottom) */
  bottom: 60px;
  right: 60px;
  
  /* 可选：设置 z-index 确保方块不会被容器内的其他内容遮挡 */
  z-index: 10; 
}


/* 可复用的 class */
.corner-square-container {
  /* 必须设置为相对定位，这样右下角的方块才会相对于这个容器进行绝对定位 */
  position: relative; 
}

/* 使用 ::after 伪元素生成黑方块 */
.corner-square-container::after {
  content: ""; /* 伪元素必须要有 content 属性才能显示 */
  position: absolute;
  
  /* 定义方块尺寸和颜色 */
  width: 50px;
  height: 50px;
  background-color: black;
  
  /* 距离右下角各 30px (等同于你要求的 margin-right 和 margin-bottom) */
  top: 60px;
  right: 60px;
  
  /* 可选：设置 z-index 确保方块不会被容器内的其他内容遮挡 */
  z-index: 10; 
}

/* 变体容器基础设置 */
.corner-square-bottom-left {
  position: relative; 
}

/* 变体伪元素：白色，左下角 */
.corner-square-bottom-left::after {
  content: ""; 
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #ffffff; /* 颜色改为白色 */
  
  /* 关键修改：基于左下角定位 */
  bottom: 30px;
  left: 30px;
  
  z-index: 10; 
}

.apin-grid-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-around;
    align-items: center;
    gap: 20px; 
}

.apin-grid-item {
    text-align: center;
    /* 必须取消注释并给一个基础宽度，否则 flex-wrap 无法判断何时换行 */
    width: 120px; 
}

/* --- 移动端适配 --- */
@media (max-width: 768px) {
    .apin-grid-container {
       display:none;
    }
    
    .apin-grid-item {
       display:none;
    }
}

/* =========================================
   博客卡片主容器改进
========================================= */
.blog-apin-product-card {
    position: relative; 
    display: flex !important; /* 强制使用 Flex 布局 */
    flex-direction: column;
    width: 100%;
    height: 100%; /* 配合父级 d-flex 实现等高 */
    overflow: hidden; 
    background-color: #fff;
    cursor: pointer; 
    border: 1px solid #eaeaea; 
    text-decoration: none !important; 
    color: inherit !important; 
    transition: box-shadow 0.3s ease;
}

.blog-apin-product-card:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.08);
}

/* =========================================
   1. 图片对齐方案
========================================= */
.blog-apin-image-container {
    width: 100%;
    height: 130px; 
    overflow: hidden;
    background-color: #f5f5f5;
}

.blog-apin-product-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important; 
    object-fit: fit; 
    object-position: center;
    transition: transform 0.5s ease;
}

/* =========================================
   2. 标题与正文对齐方案
========================================= */

.blog-apin-title-wrapper {
    min-height: 3.2em; 
    margin-bottom: 8px;
}

.blog-apin-line-clamp-2 {
    margin: 0;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.blog-apin-excerpt-wrapper {
    height: 4.8em; 
    overflow: hidden;
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}

.blog-apin-excerpt-wrapper p {
    margin: 0;
}

/* =========================================
   3. Quick View 标签
========================================= */
.blog-apin-quick-view-badge {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #6b6b6b; 
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800; 
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 2;
}

.blog-apin-product-card:hover .blog-apin-quick-view-badge {
    opacity: 1;
    transform: translateY(0);
}

.blog-apin-search-icon {
    width: 14px;
    height: 14px;
}

/* =========================================
   静态客户引文组件样式 (blog- 前缀)
========================================= */

.blog-apin-review-wrapper {
    background-color: #000000;
    color: #ffffff;
    width: 100%;
    padding: 30px 0;
    font-family: inherit;
    overflow: hidden;
    margin: 50px auto;
}

.blog-apin-review-container {
    max-width: 1300px; 
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.blog-apin-quote-text-area {
    position: relative;
    padding: 0 20px; 
    margin-bottom: 50px;
}

.blog-apin-main-quote {
    color: #ffffff;
    font-size: 21px; 
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
    margin: 0;
}

.blog-apin-quote-icon {
    position: absolute;
    color: #333333; 
    font-size: 60px;
    opacity: 0.5;
}

.blog-apin-icon-left {
    top: -30px;
    left: 0;
}

.blog-apin-icon-right {
    bottom: -30px;
    right: 0;
}

.blog-apin-attribution-name {
    color: #cccccc; 
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 15px;
}

.blog-apin-institution-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.blog-apin-institution-symbol {
    color: #ffffff;
    font-size: 24px;
}

.blog-apin-institution-text {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

@media (max-width: 768px) {
    .blog-apin-review-wrapper { padding: 60px 0; }
    .blog-apin-main-quote { font-size: 24px; }
    .blog-apin-quote-icon { font-size: 40px; }
    .blog-apin-icon-left { left: 10px; top: -20px; }
    .blog-apin-icon-right { right: 10px; bottom: -20px; }
}


/* =========================================
   静态客户引文组件样式 ( 前缀)
========================================= */

.apin-review-wrapper {
    background-color: #000000;
    color: #ffffff;
    width: 100%;
    padding: 30px 0;
    font-family: inherit;
    overflow: hidden;
    margin: 50px auto;
}

.apin-review-container {
    max-width: 1300px; 
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.apin-quote-text-area {
    position: relative;
    padding: 0 20px; 
    margin-bottom: 50px;
}

.apin-main-quote {
    color: #ffffff;
    font-size: 21px; 
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
    margin: 0;
}

.apin-quote-icon {
    position: absolute;
    color: #333333; 
    font-size: 60px;
    opacity: 0.5;
}

.apin-icon-left {
    top: -30px;
    left: 0;
}

.apin-icon-right {
    bottom: -30px;
    right: 0;
}

.apin-attribution-name {
    color: #cccccc; 
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 15px;
}

.apin-institution-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.apin-institution-symbol {
    color: #ffffff;
    font-size: 24px;
}

.apin-institution-text {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
}

@media (max-width: 768px) {
    .apin-review-wrapper { padding: 60px 0; }
    .apin-main-quote { font-size: 24px; }
    .apin-quote-icon { font-size: 40px; }
    .apin-icon-left { left: 10px; top: -20px; }
    .apin-icon-right { right: 10px; bottom: -20px; }
}


/* --- 图文对半卡片组件 --- */

/* 卡片主容器：使用 Flexbox 实现左右布局 */
.apin-split-card {
    display: flex;
    width: 100%;
    background-color: #f7f7f7; /* 左侧的浅灰底色 */
    overflow: hidden; /* 确保内部元素不会溢出 */
}

/* --- 左侧文本区域 --- */
.apin-split-content {
    flex: 1; /* 占据一半空间 */
    position: relative; /* 为底部水印提供定位参考 */
    padding: 60px 80px 60px 60px; /* 上、右、下、左 内边距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.apin-split-title {
    color: #333333;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 25px 0;
    letter-spacing: 0.5px;
    max-width: 90%;
}

.apin-split-text {
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 40px 0;
    max-width: 95%;
}

/* --- 行动号召按钮 (CTA) --- */
.apin-split-cta {
    color: #e0242b; /* 品牌红 */
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
    align-self: flex-start; /* 按钮靠左，不拉伸 */
}

/* 纯 CSS 绘制的红色小三角 */
.apin-cta-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #e0242b; /* 三角形指向右侧 */
    margin-left: 10px;
    transition: transform 0.3s ease, border-left-color 0.3s ease;
}

/* 悬浮交互动效 */
.apin-split-cta:hover {
    color: #b01a20; /* 悬浮时文字变深红 */
	text-decoration:none;
}
.apin-split-cta:hover .apin-cta-arrow {
    transform: translateX(5px); /* 悬浮时箭头向右微动 */
    border-left-color: #b01a20;
}

/* --- 底部 += 水印 --- */
.apin-watermark {
    position: absolute;
    bottom: 20px;
    right: 40px;
    font-size: 65px;
    font-weight: 900;
    color: #ebebeb; /* 极浅的灰色，融入背景 */
    display: flex;
    gap: 5px;
    line-height: 1;
    pointer-events: none; /* 防止遮挡鼠标点击 */
    user-select: none;
}
.apin-watermark span {
    display: inline-block;
}

/* --- 右侧图片区域 --- */
.apin-split-image-wrapper {
    flex: 1; /* 同样占据一半空间 */
    position: relative;
    min-height: 350px; /* 防止内容过少时图片高度塌陷 */
}

.apin-split-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心魔法：保证图片填满整个容器，比例不对自动裁剪，绝不拉伸 */
    display: block;
}

/* --- 移动端响应式处理 --- */
@media (max-width: 992px) {
    /* 平板和手机端：改为上下堆叠结构 */
    .apin-split-card {
        flex-direction: column;
    }
    .apin-split-content {
        padding: 50px 40px;
    }
    .apin-split-image-wrapper {
        min-height: 300px; /* 移动端设定一个固定的图片高度 */
        order: -1; /* 可选：让图片在移动端排在上面，如果想让文字在上面删掉这行即可 */
    }
    .apin-split-title {
        font-size: 26px;
    }
    .apin-watermark {
        right: 20px;
        bottom: 10px;
        font-size: 50px;
    }
}


/* --- 回到顶部按钮 --- */
.apin-back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    
    /* 👇 新增：去掉点击时的浏览器默认外部黑框和移动端高亮 */
    outline: none; 
    -webkit-tap-highlight-color: transparent; 

    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 淡淡的阴影产生悬浮感 */
    
    /* 初始状态：隐藏，并稍微向下偏移 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 如果你还想确保键盘 Tab 键选中时也不显示（可选，但通常加上 outline: none 就够了） */
.apin-back-to-top:focus {
    outline: none;
}

.apin-back-to-top svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

/* 悬浮交互：背景变品牌红，箭头向上微动 */
.apin-back-to-top:hover {
    background-color: #e0242b;
}

.apin-back-to-top:hover svg {
    transform: translateY(-1px);
}

/* JS 控制的显示状态 */
.apin-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 移动端调整：缩小按钮并靠边一些，防止挡住内容 */
@media (max-width: 768px) {
    .apin-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    .apin-back-to-top svg {
        width: 20px;
        height: 20px;
    }
}


/* --- 面包屑导航组件 --- */

/* 外层容器，确保与你整个网站的边距对齐 */
.apin-breadcrumb-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px; 上下边距较小，显得紧凑专业 */
}

/* 导航基础 */
.apin-breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 移动端过长时自动换行 */
    align-items: center;
}

/* 层级项字体排版 */
.apin-breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 14px; /* 较小的字号，不抢正文风头 */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888888;
}

/* 链接样式：默认为深灰色 */
.apin-breadcrumb-item a {
    color: #888888;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 悬浮交互：变为品牌红 */
.apin-breadcrumb-item a:hover {
    color: #e0242b;
}

/* 核心魔法：使用伪元素自动生成分隔符 */
.apin-breadcrumb-item + .apin-breadcrumb-item::before {
    content: "/"; /* 工业风经典的斜杠分隔符 */
    color: #cccccc; /* 颜色比文字更浅，弱化存在感 */
    margin: 0 12px; /* 控制分隔符前后的间距 */
    font-weight: 400;
}

/* 当前活动页面样式 (最后一项) */
.apin-breadcrumb-item.apin-active {
    color: #000000; /* 纯黑色，高亮当前位置 */
    font-weight: 700;
}

/* --- 移动端响应式 --- */
@media (max-width: 768px) {
    .apin-breadcrumb-container {
        padding: 15px 20px;
    }
    
    .apin-breadcrumb-item {
        font-size: 11px; /* 手机端进一步缩小 */
    }
    
    .apin-breadcrumb-item + .apin-breadcrumb-item::before {
        margin: 0 8px; /* 缩小间距，防止过早折行 */
    }
}



/* --- 工业产品详情卡片组件 --- */

.apin-product-detail-card {
    background-color: #ffffff;
    width: 100%;
    position: relative;
    /* 给底部三角留出空间，防止它被下方元素遮挡 */
    margin-bottom: 30px; 
}

/* 核心细节：底部向下指示的白色小三角 */
.apin-product-detail-card::after {
    content: "";
    position: absolute;
    bottom: -15px; /* 向下突出 15px */
    left: 50%;
    transform: translateX(-50%); /* 居中对齐 */
    width: 0;
    height: 0;
    /* 用 CSS 边框画三角形 */
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 15px solid #ffffff; /* 颜色与卡片背景一致 */
    z-index: 10;
}

/* --- 顶部图片区 --- */
.apin-pd-image-wrapper {
    width: 100%;
    background-color: #000000; /* 纯黑背景，凸显设备的高级感 */
    text-align: center;
}

.apin-pd-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px; /* 防止图片过高，可根据实际需求调整 */
    object-fit: cover; /* 保证图片不变形 */
}

/* --- 内容区 --- */
.apin-pd-content {
    padding: 60px 60px; 
}

.apin-pd-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
}

.apin-pd-subtitle {
    font-size: 24px;
    font-weight: 400;
    color: #555555;
    margin: 0;
}

/* 极简细灰分割线 */
.apin-pd-divider {
    border: none;
    border-bottom: 1px solid #cccccc;
    margin: 30px 0;
}

.apin-pd-body p {
    font-size: 18px;
    line-height: 1.6;
    color: #444444;
    margin: 0 0 20px 0;
}

/* --- 优点列表区 --- */
.apin-pd-benefits-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 40px 0 15px 0;
}

.apin-pd-benefits-list {
    list-style: none; /* 移除默认圆点 */
    padding: 0;
    margin: 0;
}

.apin-pd-benefits-list li {
    position: relative;
    padding-left: 15px;
    font-size: 18px;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 8px;
}

/* 自定义列表黑点 */
.apin-pd-benefits-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000000;
    font-weight: bold;
}

/* --- 移动端响应式 --- */
@media (max-width: 768px) {
    .apin-pd-content {
        padding: 40px 20px;
    }
    .apin-pd-title {
        font-size: 24px;
    }
    .apin-pd-subtitle {
        font-size: 18px;
    }
    /* 移动端稍微缩小底部的三角 */
    .apin-product-detail-card::after {
        border-left-width: 15px;
        border-right-width: 15px;
        border-top-width: 10px;
        bottom: -10px;
    }
}


/* --- 切换卡片组件基础 --- */
.apin-tabs-component {
    width: 100%;
    font-family: inherit;
    margin: 0px 0;
	padding-left:60px;
	padding-right:60px;
}

/* --- 选项卡头部 --- */
.apin-tabs-header {
    display: flex;
    border-bottom: 1px solid #eeeeee; /* 底部基准线 */
}

.apin-tab-btn {
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    background-color: #e6e6e6; /* 未激活的浅灰色背景 */
    color: #333333;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-right: 2px; /* 标签之间的一点点缝隙 */
		outline:none;
}

.apin-tab-btn:hover {
    background-color: #d4d4d4;
		outline:none;
	
}

/* 激活状态：纯黑底白字 */
.apin-tab-btn.active {
    background-color: #000000;
    color: #ffffff;
		outline:none;
}

/* --- 选项卡内容区 --- */
.apin-tabs-content {
    padding: 30px 0;
}

.apin-tab-panel {
    display: none; /* 默认隐藏所有面板 */
    animation: apinFadeIn 0.4s ease; /* 切换时的淡入动效 */
}

.apin-tab-panel li{
margin-top:10px;
}


.apin-tab-panel.active {
    display: block; /* 只显示带 active 类的面板 */
}

@keyframes apinFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 两列列表布局 (CSS Grid) --- */
.apin-list-2col {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 平分两列 */
    column-gap: 80px; /* 两列之间的间距 */
    list-style: none;
    padding: 0;
    margin: 0;
}

.apin-list-2col li {
    position: relative;
    padding: 20px 0 20px 15px; /* 左侧留出符号的空间 */
    border-bottom: 1px solid #f0f0f0; /* 极细的浅灰分割线 */
    font-size: 15px;
    color: #444444;
    line-height: 1.5;
}

/* 列表前的小横杠 (-) */
.apin-list-2col li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 20px;
    color: #e0242b; /* 品牌红点缀 */
    font-weight: bold;
}

/* --- 移动端响应式处理 --- */
@media (max-width: 768px) {
    /* 手机端标签变为垂直排列 */
    .apin-tabs-header {
        flex-direction: column;
        border-bottom: none;
    }
    .apin-tab-btn {
        width: 100%;
        text-align: left; /* 手机端靠左对齐更好看 */
        margin-right: 0;
        margin-bottom: 2px;
    }
    /* 手机端列表变为单列排列 */
    .apin-list-2col {
        grid-template-columns: 1fr; 
    }
	
	.apin-tabs-component {
	padding-left:10px;
	padding-right:10px;
	}
}


/* --- CORTEX DC 规格表组件 (纯 CSS 版) --- */

.apin-specs-container {
    width: 100%;
    margin: 40px 0;
    font-family: inherit;
}

/* 1. 隐藏所有 Radio Inputs */
.apin-specs-radio {
    display: none;
}

/* 2. Tab 按钮导航栏样式 */
.apin-specs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid #000000; /* 底部粗黑线，稳住视觉重心 */
    margin-bottom: 30px;
    justify-content: center;
}

.apin-specs-label {
    padding: 12px 24px;
    background-color: #f5f5f5;
    color: #666666;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-bottom: none;
}

.apin-specs-label:hover {
    background-color: #e8e8e8;
    color: #000000;
}

/* 3. 纯 CSS 魔法：当 Radio 被选中时，对应 Label 高亮 */
#spec-tab-1:checked ~ .apin-specs-nav label[for="spec-tab-1"],
#spec-tab-2:checked ~ .apin-specs-nav label[for="spec-tab-2"],
#spec-tab-3:checked ~ .apin-specs-nav label[for="spec-tab-3"],
#spec-tab-4:checked ~ .apin-specs-nav label[for="spec-tab-4"],
#spec-tab-5:checked ~ .apin-specs-nav label[for="spec-tab-5"] {
    background-color: #000000;
    color: #ffffff;
}

/* 4. 隐藏所有内容面板 */
.apin-specs-panel {
    display: none;
    animation: fadeInSpecs 0.4s ease;
}

@keyframes fadeInSpecs {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 5. 纯 CSS 魔法：当 Radio 被选中时，对应 Panel 显示 */
#spec-tab-1:checked ~ .apin-specs-content-wrapper #panel-1,
#spec-tab-2:checked ~ .apin-specs-content-wrapper #panel-2,
#spec-tab-3:checked ~ .apin-specs-content-wrapper #panel-3,
#spec-tab-4:checked ~ .apin-specs-content-wrapper #panel-4,
#spec-tab-5:checked ~ .apin-specs-content-wrapper #panel-5 {
    display: block;
}

/* --- 表格与数据区块样式 --- */
.apin-specs-model-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.product-specification {
    margin-bottom: 40px;
}

/* 规格区块标题 (带红色工业点缀) */
.specification-caption h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    background-color: black;
    padding: 10px 15px;
    margin: 0 0 15px 0;
   /*  border-left: 3px solid #e0242b; 品牌红基准线 */
    letter-spacing: 1px;
}

/* 数据表格极简排版 */
.specification-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.specification-table th, 
.specification-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
    vertical-align: top;
}

/* 参数名列 (灰字) */
.specification-table th {
    width: 40%; /* 固定左侧参数名的宽度 */
    color: #666666;
 /*   font-weight: 500; */
}

/* 参数值列 (黑字) */
.specification-table td {
    width: 60%;
    color: #000000;
   /* font-weight: 600; */
}

/* 斑马线与悬浮：提升密集数据的可读性 */
.specification-table tbody tr:nth-child(even) {
    background-color: #fafafa; /* 极浅的灰色间隔 */
}

.specification-table tbody tr:hover {
    background-color: #f0f0f0; /* 鼠标悬浮反馈 */
}

/* 针对表格内嵌套 ul 的特殊处理 (如 SAS 和 BATTERY 区块) */
.specification-table td ul {
    margin: 0;
    padding-left: 18px;
}
.specification-table td li {
    margin-bottom: 5px;
    font-weight: 400; /* 长句描述减弱字重 */
    color: #333;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .apin-specs-nav { flex-direction: column; border-bottom: none; }
    .apin-specs-label { width: 100%; text-align: center; border-bottom: 1px solid #eee; }
    .specification-table th, .specification-table td { display: block; width: 100%; padding: 8px 10px; }
    .specification-table th { border-bottom: none; padding-bottom: 0; color: #888; font-size: 13px; }
    .specification-table td { margin-bottom: 10px; }
}

.specification-table {
    width: 100%;
    table-layout: fixed; /* 关键：强制固定布局，不再由内容撑开 */
    border-collapse: collapse; /* 确保边框合并整齐 */
}

/* 控制第一列（参数名）的宽度 */
.specification-table th {
    width: 35%; /* 根据你的需要调整，比如 30% 或 40% */
    vertical-align: top; /* 文字靠上对齐更好看 */
    padding: 10px; /* 适当增加内边距 */
}

/* 控制第二列（参数值）的宽度 */
.specification-table td {
    width: 65%;
    vertical-align: top;
    padding: 10px;
    word-wrap: break-word; /* 关键：强制长串英文字母或数字换行，防止撑破表格 */
}

/* --- CORTEX DC 选型表组件 (Model Table) --- */

.apin-model-table-wrapper {
    width: 100%;
    overflow-x: auto; /* 移动端防撑爆，支持横向滑动 */
    margin: 30px 0;
    border: 1px solid #eeeeee;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* 微弱的悬浮阴影 */
}

.apin-model-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 14px;
    background-color: #ffffff;
    text-align: center; /* 默认数据列居中，整齐划一 */
    min-width: 800px; /* 保证表格在小屏幕上不会挤成一团 */
}

/* 纯黑表头，工业质感 */
.apin-model-table th {
    background-color: #000000;
    color: #ffffff;
    padding: 16px 12px;
    font-weight: 600;
    white-space: nowrap;
    border-right: 1px solid #333333; /* 暗色表头分割线 */
}
.apin-model-table th:last-child {
    border-right: none;
}

/* 单元格基础样式 */
.apin-model-table td {
    padding: 14px 12px;
    color: #333333;
    border-bottom: 1px solid #eeeeee;
    vertical-align: middle;
}

/* 特殊列对齐：型号名称保持左对齐 */
.apin-model-table th:first-child,
.apin-model-table td:first-child {
    text-align: left;
    padding-left: 20px;
    font-weight: 600;
    color: #000000;
}

/* 斑马线与悬浮高亮 */
.apin-model-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}
.apin-model-table tbody tr:hover {
    background-color: #f0f0f0;
    transition: background-color 0.2s ease;
}

/* CE 认证小图标 */
.ce-icon {
    display: inline-block;
    width: 20px;
    height: 15px;
    background-image: url('https://www.actionpowertest.com/wp-content/uploads/2025/10/CE-mark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: 8px;
    opacity: 0.8;
}

/* 询价按钮 (品牌红) */
.btn-inquire {
    background-color: #e0242b;
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-inquire:hover {
    background-color: #000000; /* 悬浮变成纯黑，强烈交互反馈 */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(224, 36, 43, 0.3);
}
/* ==========================================================================
   === DataTables 交互式组件 (支持排序、分页、固定列) ===
   ========================================================================== */

/* --- 容器与整体布局 --- */
.apin-datatable-container {
    width: 100%;
    font-family: inherit;
    color: #333;
    margin: 20px 0;
}

/* 顶部与底部控制栏 */
.apin-dt-header, .apin-dt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    font-size: 14px;
}

.apin-dt-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

/* --- 表格样式 (加入响应式滚动) --- */
.apin-dt-table-wrapper {
    width: 100%;
    overflow-x: auto; /* 超出宽度出现横向滚动条 */
    -webkit-overflow-scrolling: touch; /* 让苹果 iOS 设备横向滑动更丝滑 */
    border: 1px solid #eeeeee;
    border-radius: 4px;
    position: relative; /* 为内部固定列做准备 */
}

.apin-dt-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    text-align: center;
}

/* 纯黑表头，极致工业感 */
.apin-dt-table th {
    background-color: #000000;
    color: #ffffff;
    padding: 14px 12px;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    user-select: none;
    white-space: nowrap; /* 强制所有表头不换行 */
}
.apin-dt-table th:last-child {
    border-right: none;
}

/* 排序交互 - 悬浮变为深灰色 */
.apin-dt-table th.sortable {
    cursor: pointer;
    transition: background-color 0.2s;
}
.apin-dt-table th.sortable:hover {
    background-color: #222222; 
}

/* 排序箭头图标 */
.sort-icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.2s;
}
th.asc .sort-icon {
    border-top: none;
    border-bottom: 5px solid #ffffff;
}
th.desc .sort-icon {
    border-top: 5px solid #ffffff;
}

/* 行样式 */
.apin-dt-table td {
    padding: 12px;
    border-bottom: 1px solid #eeeeee;
    vertical-align: middle;
    white-space: nowrap; /* 强制所有表格数据不换行 */
}
.apin-dt-table tbody tr:nth-child(even) {
    background-color: #fcfcfc;
}
.apin-dt-table tbody tr:hover {
    background-color: #f0f0f0;
}

/* --- 型号列特殊对齐与颜色处理 (伪元素绝对防遮挡法) --- */

/* 1. 表头第一列 */
.apin-dt-table th:first-child {
    text-align: left;
    padding-left: 20px;
    font-weight: 600;
    color: #ffffff; 
    min-width: 120px;
    position: sticky; 
    left: 0; 
    z-index: 10; 
    background-color: #000000;
    border-right: none; /* 清掉原生边框 */
}

/* ★ 魔法：在表头第一列右侧画一条硬线 */
.apin-dt-table th:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px; /* 1像素宽度 */
    height: 100%;
    background-color: #333333; /* 表头用深灰线分割，保持质感 */
}

/* 2. 数据行第一列 */
.apin-dt-table td:first-child {
    text-align: left;
    padding-left: 20px;
    font-weight: 600;
    color: #000000; 
    position: sticky; 
    left: 0; 
    z-index: 5; 
    background-color: #ffffff; 
    border-right: none; /* 清掉原生边框 */
}

.apin-dt-table td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px; /* 你可以把它改成 2px，如果想要更粗更明显的话 */
    height: 100%;
    background-color: #000000; /* 你要求的纯黑边线 */
    box-shadow: 3px 0 6px rgba(0,0,0,0.06); /* 附带一个微弱的立体阴影，让滑动时更有层次 */
}

/* 3. 完美同步固定的斑马纹颜色 */
.apin-dt-table tbody tr:nth-child(even) td:first-child {
    background-color: #fcfcfc;
}

/* 4. 完美同步固定的鼠标悬浮颜色 */
.apin-dt-table tbody tr:hover td:first-child {
    background-color: #f0f0f0;
}

/* --- 分页按钮 --- */
.apin-dt-pagination {
    display: flex;
    gap: 5px;
}
.apin-page-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    color: #333;
    transition: all 0.2s;
}
.apin-page-btn:hover:not(:disabled) {
    background: #f0f0f0;
}
.apin-page-btn.active {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
.apin-page-btn:disabled {
    color: #bbb;
    cursor: not-allowed;
    background: #f9f9f9;
}
/* ==========================================================================
   APIN 专属分页样式 - 黑白主题版 (apin-core-pagination)
   ========================================================================== */

/* 1. 消除 WordPress 默认列表样式 */
.apin-core-pagination ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 稍微加宽间距，增加呼吸感 */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 2. 基础页码块设计 */
.apin-core-pagination ul.page-numbers li a,
.apin-core-pagination ul.page-numbers li span {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 600; /* 加粗字体，适应黑白高对比度 */
    color: #1a1a1a;   /* 纯深灰色/接近黑色 */
    background-color: #ffffff;
    border: 1px solid #000000; /* 纯黑边框 */
    border-radius: 4px;        /* 稍微减小圆角，显得更加硬朗专业 */
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}

/* 3. 悬停交互效果 (反色效果：黑底白字) */
.apin-core-pagination ul.page-numbers li a:hover {
    color: #ffffff;
    background-color: #333333; /* 悬停时使用深灰色，避免视觉过于死板 */
    border-color: #333333;
    transform: translateY(-1px); /* 轻微上浮 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 黑色系阴影 */
}

/* 4. 当前页 (高亮状态：全黑背景) */
.apin-core-pagination ul.page-numbers li span.current {
    color: #ffffff;
    background-color: #000000; /* 纯黑背景 */
    border-color: #000000;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: default;
}

/* 5. 省略号 (...) 的处理 */
.apin-core-pagination ul.page-numbers li span.dots {
    background-color: transparent;
    border-color: transparent;
    color: #000000;
    min-width: auto;
    padding: 0 4px;
    letter-spacing: 2px;
    font-weight: bold;
}

/* 6. 上一页/下一页图标的特殊优化 */
.apin-core-pagination ul.page-numbers li a i {
    font-size: 16px;
}

/* 7. 移动端自适应缩放 */
@media (max-width: 576px) {
    .apin-core-pagination ul.page-numbers li a,
    .apin-core-pagination ul.page-numbers li span {
        min-width: 38px;
        height: 38px;
        font-size: 14px;
        padding: 0 8px;
    }
}


/**** ==== 主图卡片  ======*****/
/* =========================================
   卡片主容器
========================================= */
.apin-product-card,
.apin-product-card:hover,
.apin-product-card:focus,
.apin-product-card:active {
  position: relative; 
  display: inline-block; /* 如果在 Grid 中使用，可以改成 display: block; */
  overflow: hidden; 
  background-color: #fff;
  cursor: pointer; 
  border: 1px solid #eaeaea; 
  
  /* ！！！强力清除所有可能的下划线样式 ！！！ */
  text-decoration: none !important; 
  color: inherit !important; 
}

/* 针对内部文字的保险措施（保持原样即可） */
.apin-product-card h3,
.apin-product-card p {
  text-decoration: none !important; 
  border-bottom: none !important;
  box-shadow: none !important;
}

/* 产品图片 */
.apin-product-image {
  display: block;
  width: 100%;
  max-width: 400px; /* 根据你的实际需求调整 */
  height: auto;
  transition: opacity 0.3s ease;
}

/* =========================================
   Quick View 标签 (默认隐藏)
========================================= */
.apin-quick-view-badge {
  position: absolute;
  top: 0;
  left: 0;
  
  /* 还原图片中的深灰色背景和白色文字 */
  background-color: #6b6b6b; 
  color: #ffffff;
  
  /* 布局与排版 */
  display: flex;
  align-items: center;
  gap: 6px; /* 图标和文字的间距 */
  padding: 8px 12px;
  
  /* 字体设置（使用粗体模拟截图效果） */
  font-size: 14px;
  font-weight: 800; 
  letter-spacing: 0.5px;
  
  /* 核心动画设置：初始透明度为 0，并稍微向上偏移 */
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease; /* 平滑过渡动画 */
}

/* 设置 SVG 图标的大小 */
.apin-search-icon {
  width: 16px;
  height: 16px;
}

/* =========================================
   鼠标悬浮时的交互 (Hover 效果)
========================================= */

/* 1. 标签显现并归位 */
.apin-product-card:hover .apin-quick-view-badge {
  opacity: 1;
  transform: translateY(0);
}

/* 外层容器 */
.alter-interactive-section {
  position: relative;
  width: 100%;
  background-color: #000;
  overflow: hidden; /* 桌面端隐藏右侧抽屉 */
}

/* 核心 1：滚动容器 (防止移动端图片过度挤压) */
.alter-banner-scroller {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS 顺滑滚动 */
  scrollbar-width: none; /* 隐藏滚动条让视觉更干净 */
}
.alter-banner-scroller::-webkit-scrollbar {
  display: none;
}

/* 核心 2：绑定图片的定位层 */
.alter-banner-wrapper {
  position: relative;
  width: 100%;
  /* 移动端保护：如果屏幕小于 800px，图片依然保持 800px 宽，用户可横向滑动查看。*/
  /* 如果您的原图不需要滑动，把这行注释掉即可，图片会自适应缩放且点位依然精准。 */
  min-width: 800px; 
}

.alter-banner-img {
  width: 100%;
  height: auto; /* 高度自动，由图片撑开 */
  display: block;
  pointer-events: none; /* 防止用户长按图片触发保存菜单 */
}

/* --- 热点按钮样式 (保持不变) --- */
.alter-hotspot {
  position: absolute;
  width: 36px; height: 36px;
  background-color: #007aff;
  border: 2px solid #fff; border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s, background-color 0.2s;
}
.alter-hotspot:hover { background-color: #0056b3; transform: translate(-50%, -50%) scale(1.1); }
.alter-hotspot-icon { font-size: 24px; font-weight: 300; line-height: 1; }
.alter-hotspot::after {
  content: ''; position: absolute;
  top: -6px; left: -6px; right: -6px; bottom: -6px;
  border: 2px solid #007aff; border-radius: 50%;
  animation: alter-pulse 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
}
@keyframes alter-pulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* --- 遮罩层与桌面端抽屉 --- */
.alter-drawer-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
  z-index: 15;
}
.alter-drawer-overlay.active { opacity: 1; pointer-events: auto; }

.alter-side-drawer {
  position: absolute; top: 0; right: -450px;
  width: 400px; height: 100%;
  background-color: #000; color: #ffffff;
  transition: right 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 20; display: flex; flex-direction: column;
}
.alter-side-drawer.open { right: 0; }

.alter-drawer-close {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  font-size: 28px; width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 25;
}
.alter-drawer-close:hover { background: rgba(255,255,255,0.2); }

.alter-drawer-body { padding: 40px 30px; overflow-y: auto; height: 100%; box-sizing: border-box; }
.alter-drawer-content { display: none; animation: alter-fade-in 0.5s ease forwards; }
.alter-drawer-content.active { display: block; }
@keyframes alter-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.alter-drawer-image { width: 100%; height: auto; margin-bottom: 24px; border-radius: 8px;}
.alter-drawer-title { font-size: 36px; font-weight: 600; margin: 0 0 16px 0; line-height: 1.3; }
.alter-drawer-text { font-size: 18px; color: #aaaaaa; line-height: 1.6; margin: 0; }

/* =========================================
   移动端增强：底部半屏弹窗 (Bottom Sheet) 完美适配
========================================= */
@media (max-width: 768px) {
  
  /* 解除外层包裹，允许 fixed 元素突破 */
  .alter-interactive-section { overflow: visible; }
  
  /* 遮罩层改为全局覆盖 */
  .alter-drawer-overlay { position: fixed; z-index: 9998; }

  /* 抽屉改为 Fixed 定位，从屏幕底部升起 */
  .alter-side-drawer {
    position: fixed;
    top: auto; 
    bottom: -100%; /* 初始隐藏在屏幕下方 */
    left: 0; right: 0;
    width: 100%; 
    height: auto;
    max-height: 75vh;
    border-radius: 24px 24px 0 0;
    transition: bottom 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 9999; /* 保证在最顶层 */
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  }

  .alter-side-drawer.open { right: 0; bottom: 0; }

  .alter-side-drawer::before {
    content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; background-color: rgba(255, 255, 255, 0.3); border-radius: 2px; z-index: 30;
  }

  .alter-drawer-body { padding: 30px 20px; }
  .alter-drawer-title { font-size: 26px; margin-bottom: 12px; }
  .alter-drawer-text { font-size: 16px; }
  
  .alter-drawer-close {
    top: 15px; right: 15px; width: 32px; height: 32px; font-size: 22px;
    background: rgba(255, 255, 255, 0.15);
  }
  
  .alter-hotspot { width: 44px; height: 44px; }
  .alter-hotspot-icon { font-size: 28px; }
}


.hot-bar {
    display: inline-block;
    width: 3.2rem;
    height: 0.24rem;
    background-color: #000;
    vertical-align: middle;
    margin: 0 0.6rem;
}


.apin-channel-section {
    position: relative;
    width: 100%;
    background-color: #fff;
    padding-top: 160px;
    overflow: hidden;
    padding-right: 220px;
    padding-bottom: 80px;
    padding-left: 220px;
}

/* 导航按钮样式 */
.apin-nav-controls {
    position: absolute;
    top: 40px;
    left: 15%;
    z-index: 10;
    display: flex;
    gap: 15px;
}

.apin-nav-btn {
    background: #fff;
    border: 1px solid #000;
    color: #000;
    width: 45px;
    height: 45px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    outline: none;
    padding: 0;
}

.apin-nav-btn:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.apin-nav-btn svg, 
.apin-nav-btn i {
    fill: currentColor;
    stroke: currentColor;
}

/* 滚动容器 */
.apin-channel-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 10%;
}

.apin-channel-container:active {
    cursor: grabbing;
}

.apin-channel-container::-webkit-scrollbar {
    display: none;
}

/* 产品卡片 - 已增加后缀 */
.apin-product-card-channel {
    flex: 0 0 450px;
    margin-right: 40px;
    scroll-snap-align: start;
    user-select: none;
}

.apin-card-inner-channel {
    background: white;
    padding-bottom: 30px;
}

.apin-product-card-channel img {
    width: 100%;
    height: auto;
    object-fit: cover;
    pointer-events: none;
}

.apin-info-channel {
    margin-top: 25px;
    padding: 0 20px;
}

.apin-info-channel h4 {
    color: #2d2d2d;
    font-size: 22px;
    margin: 0 0 8px 0;
}

.apin-info-channel p {
    color: #666;
    font-size: 15px;
}

/* 右侧大面积留白占位 */
.apin-spacer {
    flex: 0 0 50vw;
}
/* 移动端响应式优化 */
@media (max-width: 768px) {
    /* 1. 外层容器：修复边距继承，调整上下留白 */
    .apin-channel-section {
        padding-top: 60px;       /* 移动端屏幕小，上下留白稍微收紧 */
        padding-bottom: 220px;
        padding-right: 0;        /* 清除桌面的 220px 右边距 */
        padding-left: 0;         /* 【关键修复】必须清除桌面的 220px 左边距，否则手机端会崩溃！ */
    }

    /* 隐藏导航按钮，手机端靠手势滑动 */
    .apin-nav-controls {
        display: none;
    }

    /* 2. 滚动通道：定义手机端的左侧起始线 */
    .apin-channel-container {
        padding-left: 20px;      /* 手机端常规安全边距，视觉上更轻盈 */
    }

    /* 3. 卡片容器：制造“露出感”暗示用户滑动 */
    .apin-product-card-channel {
        flex: 0 0 280px;         /* 宽度设为280px，能让下一张卡片露出一小截边缘 */
        margin-right: 16px;      /* 稍微缩小卡片间距，让视觉流更连贯 */
    }

    /* 4. 图片比例：避免过扁 */
    .apin-product-card-channel img {
        height: 200px;           /* 从180px稍微提高到200px，约4:3比例，更适合展示工业设备 */
    }

    /* 5. 内部文本排版：紧凑精致 */
    .apin-info-channel {
        margin-top: 16px;
        padding: 0 4px;          /* 手机端内部两侧留白不需要太大，对齐图片边缘更好看 */
    }

    .apin-info-channel h4 {
        font-size: 18px;
        margin: 0 0 6px 0;
    }

    .apin-info-channel p {
        font-size: 14px;
        line-height: 1.5;        /* 增加行高，提升手机端小字的阅读体验 */
    }

    /* 6. 结尾留白占位 */
    .apin-spacer {
        flex: 0 0 25vw;          /* 末尾保留 1/4 屏幕宽度的空白，明确提示已划到底 */
    }
}

/* 外层容器：使用 Flexbox 实现左右分栏 */
.apin-vtabs-container {
    display: flex;
    width: 100%;
    margin: 40px auto;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    min-height: 400px; /* 保证有一个基础高度 */
}

/* 左侧侧边栏 */
.apin-vtabs-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

/* Tab 按钮样式 */
.apin-vtab-btn {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 20px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease; /* 仅保留背景和文字的轻微过渡 */
    outline: none;
}

.apin-vtab-btn:hover {
    background: #f0f2f5;
    color: #111;
}

/* 激活状态的 Tab */
.apin-vtab-btn.active {
    background: #ffffff;
    color: #000; /* 文字加深 */
    font-weight: 600;
    /* 利用负的右边距和纯白背景，盖住侧边栏的右边框，形成视觉连通 */
    margin-right: -1px;
    border-right: 1px solid #ffffff; 
    z-index: 2;
}

/* 左侧指示条 - 细节优化 */
.apin-vtab-indicator {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    /* 1. 修改颜色为黑色 */
    background: #000; 
    
    /* 2. 实现“直接出现”的核心改动 */
    /* 我们用不可见代替 scaleY(0)，以确保瞬间切换 */
    opacity: 0; 
    visibility: hidden; 

    /* 去掉所有过渡效果 (Transition) 和 变换原点 (Transform-origin) */
    transition: none !important;
}

/* 激活状态下的指示条 */
.apin-vtab-btn.active .apin-vtab-indicator {
    /* 瞬间变为可见，无需任何动画 */
    opacity: 1;
    visibility: visible;
}

/* 右侧内容区 */
.apin-vtabs-content-area {
    flex-grow: 1;
    padding: 40px;
    background: #ffffff;
    position: relative;
    z-index: 1;
}

/* 面板样式 */
.apin-vtab-pane {
    display: none; /* 默认隐藏 */
}

.apin-vtab-pane.active {
    display: block; /* 激活时显示 */
    /* 这里依然保留一个极微小的淡入动画，避免内容切换过于生硬，但这不影响Tab装饰条的直接出现 */
    animation: apin-fade-in 0.2s ease forwards;
}

/* 内容显示时的淡入动画 */
@keyframes apin-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 内容排版 */
.apin-pane-title {
    margin: 0 0 15px 0;
    font-size: 24px;
    color: #111;
    font-weight: 600;
}

.apin-pane-text {
    color: #666;
    font-size: 18px;
    line-height: 1.6;
}
/* 移动端适配：屏幕变窄时改为上下结构的水平 Tabs */
@media (max-width: 768px) {
    /* 1. 容器全宽扁平化，去除冗余阴影和左右边框 */
    .apin-vtabs-container {
        flex-direction: column;
        max-width: 100%;
        margin: 20px 0; /* 贴紧屏幕边缘 */
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none; 
    }
    
    /* 2. 侧边栏（此时变为了顶部导航栏） */
    .apin-vtabs-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto; /* 水平滑动 */
        -webkit-overflow-scrolling: touch; /* 增加 iOS 丝滑滚动支持 */
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
        scrollbar-width: none; /* 隐藏滚动条 */
    }
    
    .apin-vtabs-sidebar::-webkit-scrollbar {
        display: none;
    }
    
    /* 3. Tab 按钮：优化触摸热区，去除竖向分割线 */
    .apin-vtab-btn {
        border-bottom: none;
        border-right: none; /* 去掉竖线，移动端横向排列时更干净 */
        white-space: nowrap; 
        justify-content: center;
        padding: 16px 24px; /* 增加触摸热区 */
        flex: 0 0 auto;
    }
    
    /* 4. 激活状态：依靠底部黑条，重置冗余边框逻辑 */
    .apin-vtab-btn.active {
        margin-right: 0;
        margin-bottom: 0; 
        border-right: none;
        border-bottom: none;
        background: transparent; /* 手机端不需要白色背景的高亮错觉 */
    }
    
    /* 5. 底部黑色指示条 */
    .apin-vtab-indicator {
        left: 0; 
        right: 0; 
        top: auto; 
        bottom: 0; /* 稳稳贴在底部边缘 */
        width: 100%; 
        height: 3px;
    }

    /* 6. 缩小内容区内边距，释放屏幕空间 */
    .apin-vtabs-content-area {
        padding: 24px 20px; 
    }

    /* 7. 字体适配微调 */
    .apin-pane-title {
        font-size: 20px; /* 标题缩小，防止换行过多 */
        margin-bottom: 12px;
    }

    .apin-pane-text {
        font-size: 14px; /* 正文缩小，提升阅读体验 */
    }
}


/* --- 基础布局 --- */
.load-apin-split-slider-wrapper {
  display: flex;
  width: 100%;
  margin: 60px auto;
  background: #ffffff;
  border-radius: 3px;
  overflow: hidden;
  border:1px solid #eaeaea;
}

/* 左侧区块 */
.load-apin-slider-left {
  flex: 0 0 35%; /* 左侧固定占据 35% 宽度 */
  background: #f8f9fa;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 内容在上，按钮在下 */
  border-right: 1px solid #e0e0e0;
}

.load-apin-left-title {
  font-size: 28px;
  color: #111;
  margin: 0 0 20px 0;
  font-weight: 700;
}

.load-apin-left-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* 控制按钮 */
.load-apin-slider-controls {
  display: flex;
  gap: 15px;
  margin-top: 40px;
}

.load-apin-nav-btn {
  width: 48px;
  height: 48px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
  
  /* 彻底根除浏览器默认的点击跳动和闪烁 */
  outline: none; 
  box-shadow: none; 
  user-select: none; 
  -webkit-tap-highlight-color: transparent; 
}

/* 强制清除任何点击瞬间的形变 */
.load-apin-nav-btn:active {
  transform: none !important; 
  outline: none !important;
}

.load-apin-nav-btn:hover:not(:disabled) {
  background: #111111; /* 悬浮时黑底 */
  border-color: #111111; /* 边框同步变黑，整体感更强 */
  color: #ffffff; /* 白箭头 */
}

.load-apin-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 右侧滑动区块 */
.load-apin-slider-right {
  flex: 0 0 65%; /* 右侧占据 65% 宽度 */
  padding: 25px 20px 25px 15px; /* 右侧不留 padding，让下一张卡片有截断感 */
  overflow: hidden; /* 隐藏滑出视口的容器 */
  position: relative;
}

/* 滑动轨道 */
.load-apin-slider-track {
  display: flex;
  gap: 20px; /* 容器之间的间距 */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* 极其丝滑的滑动动画 */
}

/* 独立容器项 (你的自定义容器) */
.load-apin-slider-item {
  /* 【核心计算】：右侧视口宽度减去一个 20px 的 gap，然后除以 2，保证正好看到两个完整的卡片 */
  flex: 0 0 calc((100% - 20px) / 2); 
}

.load-apin-item-inner {
  background: #ffffff;
  border-radius: 8px;
  height: 100%;
  min-height: 280px;
  transition: box-shadow 0.3s ease;
}

.load-apin-item-inner:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .load-apin-split-slider-wrapper {
    flex-direction: column;
    margin: 20px auto;
  }
  
  .load-apin-slider-left {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 30px 20px;
  }
  
  .load-apin-slider-right {
    flex: none;
    width: 100%;
    padding: 30px 20px;
  }

  .load-apin-slider-item {
    /* 手机端通常太窄，改为只显示 1 个容器，或者你可以改成 (100% - 10px)/1.5 露出半个 */
    flex: 0 0 100%; 
  }
}



/* 外层卡片容器 */
.load-overlay-card {
  position: relative; /* 关键：作为遮罩层的定位基准 */
  width: 100%;
  max-width: 400px; /* 你可以根据需要调整卡片宽度 */
  min-height: 380px; /* 给定一个最小高度，让背景图有足够的展示空间 */
  border-radius: 3px;
  overflow: hidden;
  
  /* 背景图的自适应属性 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* 使用 Flex 布局来控制内部元素的垂直排列 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 半透明灰色遮罩 */
.load-card-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 44, 52, 0.65); /* 深灰/带点蓝灰的半透明色 */
  z-index: 1; /* 放在背景图之上 */
  transition: background-color 0.4s ease;
}

/* 悬浮交互：鼠标放上去时遮罩稍微变暗，让文字更凸显 */
.load-overlay-card:hover .load-card-mask {
  background-color: rgba(20, 22, 26, 0.85);
}

/* 内容层 */
.load-card-body {
  position: relative;
  z-index: 2; /* 必须大于遮罩的 z-index，保证文字和按钮可点击 */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 撑满卡片的剩余高度 */
  padding: 40px 35px;
}

.load-card-title {
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 15px 0;
  line-height: 1.3;
}

.load-card-desc {
  color: #e2e8f0; /* 使用极浅的灰色代替纯白，更有高级感且护眼 */
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 20px 0;
}


/* 底部按钮 */
.load-card-btn {

  margin-top: auto; 
  align-self: flex-start; /* 按钮宽度包裹文字，而不是撑满整行 */
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.load-card-btn:hover {
  background: #f0f0f0; /* 悬浮变成高级的灰白色 */
  color: #111111; /* 文字保持深色，确保在灰白底色上的高对比度与可读性 */
  text-decoration: none; /* 明确保证悬浮时无下划线 */
}


/* ------  feature card  ------*/
.load-feature-card {
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 40px 30px;
  height: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.load-feature-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.load-feature-icon-wrapper {
  width: 70px;
  height: 70px;
  background-color: #f5f5f5; /* 去掉偏蓝的底色，改为纯粹的浅灰底色 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px auto;
  transition: all 0.3s ease;
}

/* 如果想增加一点交互质感，可以让悬浮时图标底色反转（可选） */
.load-feature-card:hover .load-feature-icon-wrapper {
  background-color: #111111; 
}
.load-feature-card:hover .load-feature-icon-wrapper i {
  color: #ffffff; 
}

.load-feature-icon-wrapper i {
  color: #111111; /* 原本的深蓝色改为深黑色 */
  transition: all 0.3s ease;
}

.load-feature-title {
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 15px;
}

.load-feature-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #555555; /* 正文保持中灰色，拉开视觉层次 */
  margin: 0;
}


/* 外层包裹器 */
.apin-slide-cycle-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px; /* 根据你的页面调整 */
  margin: 40px auto;
  padding: 20px 0;
}

/* 轮播视口：需要给一个固定的高度，因为内部是绝对定位 */
.apin-slide-cycle-container {
  position: relative;
  width: 100%;
  height: 400px; /* 你可以根据你的卡片高度自定义 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 基础卡片样式 (默认状态：隐藏/缩小在后方) */
.apin-slide-cycle-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%; /* 中心卡片占据的宽度比例 */
  height: 100%; /* 卡片高度 */
 /*  background: #ffffff; */  
/*   border: 1px solid #ddd; */  
 /*  border-radius: 12px; */  
  
  /* 极其平滑的过渡动画 */
  transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease, z-index 0s;
  
  /* 默认全部隐藏在中间且缩小 */
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  z-index: 0;
  filter: blur(10px);
}

/* ================= 核心状态类 ================= */

/* 1. 当前中间激活的卡片 */
.apin-slide-cycle-slide.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  filter: blur(0px); /* 取消模糊 */
  box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* 给中间卡片加个阴影凸显 */
}

/* 2. 左侧的卡片 */
.apin-slide-cycle-slide.prev {
  /* X轴向左偏，Scale缩小，形成透视 */
  transform: translate(-90%, -50%) scale(0.8);
  opacity: 0.8;
  z-index: 2;
  filter: blur(3px); /* 半透明+模糊 */
}

/* 3. 右侧的卡片 */
.apin-slide-cycle-slide.next {
  /* X轴向右偏，Scale缩小，形成透视 */
  transform: translate(-10%, -50%) scale(0.8);
  opacity: 0.8;
  z-index: 2;
  filter: blur(3px); /* 半透明+模糊 */
}

/* 左右按钮容器 */
.apin-slide-cycle-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

/* 左右按钮基础样式 (你可以自己覆盖修改) */
.apin-slide-cycle-btn {
  padding: 10px 24px;
  background-color: #111;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  outline: none;
  box-shadow: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.apin-slide-cycle-btn:active {
  transform: none !important;
  outline: none !important;
}

.apin-slide-cycle-btn:hover {
  background-color: #444;
}


/* --- 外部白色主容器 --- */
.text-img-apin-split-card {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
 background: #f1f1f1;  
 /* border-radius: 12px; */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
/*  padding: 50px; */
  gap: 60px; /* 左右两部分的间距 */
  max-width: 1100px;
  margin: 40px auto;
  transition: box-shadow 0.4s ease;
}

.text-img-apin-split-card:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08); /* 整体悬浮时阴影微微加深 */
}

/* --- 左侧文字承载区 --- */
.text-img-apin-split-card-left {
  flex: 1; /* 自动占据剩余的全部宽度 */
}

/* --- 右侧图片容器区 --- */
.text-img-apin-split-card-right {
  flex: 0 0 45%; /* 右侧固定占据 45% 的宽度，防止被文字挤压 */
  position: relative;
}

/* --- 核心：错位包装器 --- */
.text-img-apin-img-dislocation-wrapper {
  position: relative;
  width: 100%;
  z-index: 1;
}

/* 隐藏在图片底部的“错位块” */
.text-img-apin-img-dislocation-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#e0242b;

  z-index: -1;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 图片本体样式 */
.text-img-apin-img-dislocation-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 触发错位交互 --- */
/* 当鼠标悬浮在整个长方形容器上时，触发图片的错位动画 */
.text-img-apin-split-card:hover .text-img-apin-img-dislocation-wrapper img {
  transform: translate(-12px, -12px); /* 图片向左上方位移 */
}

.text-img-apin-split-card:hover .text-img-apin-img-dislocation-wrapper::before {
  transform: translate(12px, 12px); /* 底块向右下方位移，撕扯出错位感 */
}

/* --- 移动端自适应 --- */
@media (max-width: 768px) {
  .text-img-apin-split-card {
    flex-direction: column; /* 屏幕变窄时改为上下排列 */
    padding: 30px 20px;
    gap: 40px;
  }
  
  .text-img-apin-split-card-right {
    width: 100%;
    flex: none;
    /* 移动端由于宽度变窄，错位距离可以稍微调小一点防止溢出屏幕 */
  }
  
  .text-img-apin-split-card:hover .text-img-apin-img-dislocation-wrapper img {
    transform: translate(-8px, -8px); 
  }

  .text-img-apin-split-card:hover .text-img-apin-img-dislocation-wrapper::before {
    transform: translate(8px, 8px); 
  }
}



.border-radius-5 {
	border-radius:5px;
}


.apin-grid-stats-container {
  display: flex;
  width: 100%;
  height: 400px; 
  background: #fff;
  margin: 20px auto;
  overflow: hidden;
  box-sizing: border-box;
}

.apin-grid-image-box {
  overflow: hidden;
}

.apin-grid-main-box {
  flex: 0 0 48%; 
}

.apin-grid-edge-box {
  flex: 0 0 22%; 
  border-left: 1px solid #eee;
}

.apin-grid-content-image {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}

.apin-grid-stats-content {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; 
  align-items: center;
  padding: 20px 0;
}

.apin-grid-stat-group {
  text-align: center;
}

.apin-grid-number {
  font-size: 3.5rem;
  font-weight: 700;
  color: #000;
  line-height: 1;
}

.apin-grid-label {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
}

.apin-grid-divider {
  width: 60%;
  height: 1px;
  background-color: #eee;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .apin-grid-stats-container {
    flex-direction: column;
    height: auto;
  }
  .apin-grid-main-box, .apin-grid-stats-content {
    flex: 0 0 100%;
  }
  .apin-grid-main-box {
    height: 250px;
  }
  .apin-grid-edge-box {
    display: none; 
  }
  .apin-grid-stats-content {
    padding: 40px 0;
  }
}

/* --- 主容器：预留外部空间，防止溢出部分被网页其他内容遮挡 --- */
  .apin-breakout-container {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 1100px;
    margin: 60px auto; /* 上下预留 120px 的空间给溢出的机器 */
    background-color: #ffffff; /* 容器底色 */
    border-radius:3px;
    box-sizing: border-box;
  }

  /* --- 左侧内容区：只管宽度，高度由你的文字自然撑开 --- */
  .apin-breakout-left {
    flex: 0 0 55%; /* 占据 55% 的宽度 */
    position: relative;
    z-index: 2; /* 确保文字层级在图片上方（如果有重叠） */
  }

  /* --- 右侧图片定位区 --- */
  .apin-breakout-right {
    flex: 0 0 45%; /* 占据 45% 的宽度 */
    position: relative;
  }

  /* --- 核心：溢出图片特效 --- */
  .apin-breakout-right img {
    position: absolute;
    right: -20px; /* 允许图片向右侧稍微突破一点容器边缘 */
    top: 50%;
    transform: translateY(-50%); /* 绝对的垂直居中 */
    
    /* 核心高度控制：让图片高度始终是容器高度的 130% */
    /* 这样它必然会上下溢出容器，且左右等比例缩放 */
    width: auto; 
    max-width: 100%; /* 防止极端情况下图片过宽 */
    object-fit: contain;
    z-index: 10;
    
    /* 增加一个极其柔和的真实阴影，让透明 PNG 具有 3D 悬浮感 */
    filter: drop-shadow(0px 25px 25px rgba(0, 0, 0, 0.15));
  }

  /* --- 移动端响应式 --- */
  @media (max-width: 768px) {
    .apin-breakout-container {
      flex-direction: column;
      margin: 80px auto;
      padding: 40px 20px;
    }
    .apin-breakout-left {
      flex: 1;
      width: 100%;
      padding-right: 0;
      margin-bottom: 40px; /* 移动端给下方的机器留出空间 */
    }
    .apin-breakout-right {
      width: 100%;
      height: 250px; /* 移动端需要给一个固定高度来承载绝对定位的图片 */
    }
    .apin-breakout-right img {
      height: 140%; /* 移动端让机器溢出得更夸张一点 */
      right: auto;
      left: 50%;
      transform: translate(-50%, -50%); /* 移动端改为水平垂直双居中 */
    }
  }


/* ==========================================================
   ActionPower India - EV Testing Section 
   完整样式：水平错落布局 + 丝滑灰黑色遮罩展开动效
   ========================================================== */

/* --- 外部容器布局 --- */
.apin-staggered-slider-section {
    width: 100%;
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: inherit;
}

/* --- 头部与导航按钮 (已更新为灰黑色主题) --- */
.apin-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}
.apin-header-text h2 {
    font-size: 45px;
   /* color: #333;  标题颜色改为深灰黑 */
    margin: 0 0 10px 0;
}
.apin-header-text p {
    font-size: 16px;
    color: #666;
    margin: 0;
}
.apin-slider-controls {
    display: flex;
    gap: 15px;
}
.apin-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.3s ease;
}
.apin-nav-btn:hover {
    background: #333; /* 按钮悬浮色改为深灰黑 */
    color: #fff;
    border-color: #333;
}

/* --- 核心：横向滑动轨道 --- */
.apin-staggered-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: thin;
}
.apin-staggered-track::-webkit-scrollbar { height: 8px; }
.apin-staggered-track::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.apin-staggered-track::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
.apin-staggered-track::-webkit-scrollbar-thumb:hover { background: #333; }

/* --- 列容器 --- */
.apin-stagger-col {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 600px;
}
.apin-stagger-col.col-tall .apin-reveal-card { height: 100%; }
.apin-stagger-col.col-stacked .apin-reveal-card { height: calc(50% - 10px); }
.apin-stagger-col.col-offset { padding-top: 60px; }

/* --- 移动端响应式 --- */
@media (max-width: 768px) {
    .apin-slider-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .apin-stagger-col { flex: 0 0 280px; height: 500px; }
    .apin-stagger-col.col-offset { padding-top: 0; }
}

/* ==========================================================
   卡片交互动效：灰黑色丝滑遮罩展开
   ========================================================== */
.apin-reveal-card {
    position: relative;
    width: 100%;
    background-color: #333; /* 图片失效时的深灰背景 */
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

/* 默认遮罩层：灰黑色渐变 */
.apin-reveal-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    /* 核心修改：改为灰黑色系渐变 */
    background: linear-gradient(to top, rgba(40, 40, 40, 0.9) 0%, rgba(40, 40, 40, 0) 100%);
    transition: height 0.6s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.8s ease;
    z-index: 1;
}

.apin-reveal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.apin-reveal-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.apin-reveal-desc {
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.apin-reveal-desc p {
    color: #f0f0f0; /* 文字使用浅白，在灰黑底色上对比度更好 */
    font-size: 15px;
    line-height: 1.5;
    margin: 10px 0 0 0;
}

/* 触发状态：悬浮后变为灰黑色实心底 */
.apin-reveal-card:hover .apin-reveal-overlay {
    height: 100%;
    background-color: rgba(40, 40, 40, 0.85); /* 覆盖灰黑色 */
}

.apin-reveal-card:hover .apin-reveal-desc {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
}

.apin-reveal-card:hover .apin-reveal-title {
    transform: translateY(-5px);
}


/* --- 外层主容器 --- */
.ap-industrial-tabs-container {
    width: 100%;
    margin: 40px auto;
}

/* --- 标签栏容器 --- */
.ap-tab-header {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #e1e1e1;
    
    /* 移动端优化：支持横向滑动 */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* iOS 滑动惯性 */
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
}

/* 隐藏滚动条 (Webkit内核) */
.ap-tab-header::-webkit-scrollbar {
    display: none;
}

/* --- 单个标签的基础样式 --- */
.ap-tab-link {
    padding: 12px 0;
    margin-right: 40px;
    cursor: pointer;
    background-color: transparent;
    color: #999999;
    font-size: 36px;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    flex-shrink: 0; /* 防止标签在容器内被压缩 */
}

.ap-tab-link:hover { color: #333333; }

.ap-tab-link.active {
    color: #000000;
    border-bottom: 3px solid #000000;
}

/* --- 下方主内容容器 --- */
.ap-tab-content-wrapper {
    border: none;
    background-color: transparent;
    padding: 40px 0;
    min-height: 300px;
}

.ap-tab-content {
    display: none;
    animation: ap-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ap-tab-content.active { display: block; }

@keyframes ap-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   移动端响应式适配 (断点：768px)
   ========================================= */
@media (max-width: 768px) {
    .ap-industrial-tabs-container {
        margin: 24px auto;
    }

    .ap-tab-link {
        font-size: 20px;     /* 缩小字号，防止溢出 */
        margin-right: 24px;  /* 减小标签间距 */
        padding: 10px 0;
    }

    .ap-tab-content-wrapper {
        padding: 24px 0;     /* 优化内容区域留白 */
        min-height: 200px;
    }
}

/* 时间线外层容器 */
.apin-timeline-container {
    position: relative;
    max-width: 800px;
    padding-left: 30px; /* 为左侧的轴线留出空间 */
}

/* 贯穿始终的垂直轴线 */
.apin-timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 9px; /* 让线条居中对齐圆点 */
    width: 2px;
    background-color: #e0e0e0; /* 浅灰色的轨道线 */
}

/* 单个时间线项目 */
.apin-timeline-item {
    position: relative;
    margin-bottom: 40px;
}

/* 最后一个项目去掉底部边距 */
.apin-timeline-item:last-child {
    margin-bottom: 0;
}

/* 时间线上的圆点 (Marker) */
.apin-timeline-marker {
    position: absolute;
    left: -27px; /* 定位到轴线上 */
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #333333; /* 深灰色外圈 */
    transition: all 0.3s ease;
    z-index: 2;
}

/* 内容卡片容器 */
.apin-timeline-content {
    background-color: #f9f9f9; /* 极简的浅灰底色 */
    padding: 20px 25px;
    border-radius: 4px;
    border-left: 4px solid transparent; /* 预留左侧高亮边框空间 */
    transition: all 0.3s ease;
}

/* 日期样式 */
.apin-timeline-date {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #666666;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* 职位标题 */
.apin-timeline-title {
    margin: 0 0 5px 0;
    font-size: 22px;
    color: #000000;
    font-weight: 700;
}

/* 公司名称 */
.apin-timeline-company {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: #555555;
    font-weight: 600;
}

/* 职位描述 */
.apin-timeline-desc {
    margin: 0;
    font-size: 16px;
    color: #444444;
    line-height: 1.6;
}

/* --- 鼠标悬停(Hover)交互效果 --- */

/* 鼠标悬停时，左侧圆点变成纯黑 */
.apin-timeline-item:hover .apin-timeline-marker {
    background-color: #000000;
    border-color: #000000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1); /* 增加一层微弱的光环效果 */
}

/* 鼠标悬停时，内容卡片左侧出现黑色粗线，并伴随微小位移和阴影 */
.apin-timeline-item:hover .apin-timeline-content {
    background-color: #ffffff;
    
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateX(5px); /* 整体向右微微浮动 */
}

/* 响应式设计：在移动端调整间距 */
@media screen and (max-width: 768px) {
    .apin-timeline-container {
        padding-left: 20px;
    }
    .apin-timeline-container::before {
        left: 5px;
    }
    .apin-timeline-marker {
        left: -21px;
    }
    .apin-timeline-title {
        font-size: 20px;
    }
}