@charset "UTF-8";
/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 1.0.1
*/

/**
 * ==================== 性能优化说明 ====================
 * 所有CSS文件已通过 functions/script-style.php 使用 wp_enqueue_style 并行加载
 * 原18个 @import 串行加载已优化为并行加载，性能提升5-10倍
 *
 * 加载的CSS文件列表：
 * - diy.css (基础样式)
 * - css/product.css (产品单页)
 * - css/page.css (单页面)
 * - css/single-archive.css (文章存档)
 * - css/single.css (文章单页)
 * - css/block-faq-list.css (折叠卡)
 * - css/plugin.css (插件)
 * - css/font-type.css (字体)
 * - css/header.css (头部)
 * - css/footer.css (底部)
 * - css/block-btn.css (按钮)
 * - css/clean-layout.css (布局/间距/填充/阴影)
 * - css/icon.css (图标)
 * - css/block-breadcrumb.css (面包屑)
 * - css/block-slider.css (轮播)
 * - css/block-lightbox.css (弹窗)
 * - css/block-tabs.css (切换卡)
 * - css/block-UX.css (UX编辑器，条件加载)
 * ===================================================
 

 
**/


/* ==========================================================================
   电脑端：透明导航栏 Hover 变白、字变黑特效
   ========================================================================== */
@media screen and (min-width: 851px) {
    
    /* 1. 默认状态：确保文字是白色的 */
    #header.transparent .header-main .nav > li > a {
        color: #ffffff !important;
        transition: color 0.3s ease; /* 让文字颜色变化更平滑 */
    }
    
    /* 2. 默认状态：确保小图标（如菜单图标、搜索图标）也是白色的 */
    #header.transparent .header-main .nav-icon i {
        color: #ffffff !important;
        transition: color 0.3s ease;
    }

    /* 3. Hover 状态：鼠标移入时，导航栏整体变白 bg */
    #header.transparent:hover {
        background-color: #ffffff !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 加一点点阴影，让白色导航栏有层次感 */
    }
    
    /* 4. Hover 状态：因为 Flatsome 的背景色在内部层，同步把背景层也变白 */
    #header.transparent:hover .header-bg-color {
        background-color: #ffffff !important;
        opacity: 1 !important;
    }

    /* 5. Hover 状态：鼠标移入时，文字变成黑色 */
    #header.transparent:hover .header-main .nav > li > a {
        color: #222222 !important; /* 优雅的深黑色 */
    }

    /* 6. Hover 状态：鼠标移入时，小图标变成黑色 */
    #header.transparent:hover .header-main .nav-icon i {
        color: #222222 !important;
    }
}

.nav-line-bottom > li > a,
.nav-line-grow > li > a,
.nav-line > li > a {
    position: relative;
}

.nav-line-bottom > li > a:before,
.nav-line-grow > li > a:before,
.nav-line > li > a:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--fs-color-primary);

    opacity: 0;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .35s ease, opacity .25s ease;
}

/* hover 平滑展开 */
.nav-line-bottom > li:hover > a:before,
.nav-line-grow > li:hover > a:before,
.nav-line > li:hover > a:before,
.nav-line-bottom > li.active > a:before,
.nav-line-grow > li.active > a:before,
.nav-line > li.active > a:before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

.home-about {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* 内容层级 */
.home-about .section-content {
  position: relative;
  z-index: 3;
}

/* 背景层级 */
.home-about .section-bg {
  z-index: 0;
}

/* 两个球体 */
.home-about::before,
.home-about::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: rgba(220, 7, 42, 0.16);
  filter: blur(60px);
  -webkit-filter: blur(60px);
  will-change: transform;
}

/* 大球：左上 */
.home-about::before {
  width: 260px;
  height: 260px;
  left: 8%;
  top: 18%;
  opacity: 0.55;
  animation: homeAboutBlobMove1 8s ease-in-out infinite alternate;
}

/* 小球：左下 */
.home-about::after {
  width: 170px;
  height: 170px;
  left: 24%;
  bottom: 12%;
  opacity: 0.42;
  background: rgba(220, 7, 42, 0.18);
  filter: blur(50px);
  -webkit-filter: blur(50px);
  animation: homeAboutBlobMove2 10s ease-in-out infinite alternate;
}

/* 飘动动画 1 */
@keyframes homeAboutBlobMove1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(35px, -24px) scale(1.08);
  }
  100% {
    transform: translate(65px, 20px) scale(0.96);
  }
}

/* 飘动动画 2 */
@keyframes homeAboutBlobMove2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-22px, 28px) scale(1.1);
  }
  100% {
    transform: translate(38px, -18px) scale(0.95);
  }
}

/* 手机端弱化 */
@media (max-width: 849px) {
  .home-about::before {
    width: 190px;
    height: 190px;
    left: -60px;
    top: 120px;
    opacity: 0.45;
  }

  .home-about::after {
    width: 130px;
    height: 130px;
    left: 36%;
    bottom: 160px;
    opacity: 0.35;
  }
}
   .dak-meta *{
    font-size: 14px !important;  
  }
 .dak-meta{
     border-top: 1px solid #eee;
     border-bottom: 1px solid #eee;
     padding: 15px 5px;
     margin-bottom: 30px;
     
 }
 .nav-left {
    justify-content: center;
}

.nav-spacing-xlarge>li {
    margin: 0 22px;
}


.case-card-hover,
.border-a-10,
.border-a-10 *{
    border-radius: 0px;
    overflow: hidden;
}


 /* ==========================================================================
时间轴
   ========================================================================== */
 
 
.timeline-pro-2 {
  position: relative;
}
.timeline-pro-2:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #e2dcdc;
}
.timeline-pro-2 .timeline-pro-2-item {
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  animation: tp1In .72s ease forwards;
}
.timeline-pro-2 .timeline-pro-2-item:nth-child(2) { animation-delay: .12s; }
.timeline-pro-2 .timeline-pro-2-item:nth-child(3) { animation-delay: .24s; }
.timeline-pro-2 .timeline-pro-2-item:nth-child(4) { animation-delay: .36s; }

.timeline-pro-2 .timeline-pro-2-item:nth-child(even) {
  flex-direction: row-reverse;
}
.timeline-pro-2 .timeline-pro-2-item:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 999px;
  background: var(--fs-color-primary);
  box-shadow: 0 0 0 4px #f6f9fc;
}

.timeline-pro-2 .timeline-pro-2-item > .timeline-pro-2-media {
  padding-right: 24px !important;
}
.timeline-pro-2 .timeline-pro-2-item > .timeline-pro-2-content {
  padding-left: 24px !important;
}
.timeline-pro-2 .timeline-pro-2-item:nth-child(even) > .timeline-pro-2-media {
  padding-left: 24px !important;
  padding-right: 0 !important;
}
.timeline-pro-2 .timeline-pro-2-item:nth-child(even) > .timeline-pro-2-content {
  padding-right: 24px !important;
  padding-left: 0 !important;
}

.timeline-pro-2 .timeline-pro-2-media .img-inner {
  border-radius: 12px;
  overflow: hidden;
}
.timeline-pro-2 .timeline-pro-2-content > .col-inner {
  background: rgba(255,255,255,.9);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.timeline-pro-2 .tp1-date,
.timeline-pro-2 .tp1-date * {
  margin: 0 0 6px;


}
.timeline-pro-2 .tp1-title,
.timeline-pro-2 .tp1-title * {
  margin: 0 0 6px;
  color: #0f172a;

}
.timeline-pro-2 .tp1-desc,
.timeline-pro-2 .tp1-desc * {
  margin: 0;
  color: #475569;
  line-height: 1.64;
}

@keyframes tp1In {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 849px) {
  .timeline-pro-2:before {
    left: 14px;
    margin-left: 0;
  }
  .timeline-pro-2 .timeline-pro-2-item:nth-child(even) {
    flex-direction: row;
  }
  .timeline-pro-2 .timeline-pro-2-item:after {
    left: 14px;
    margin-left: -6px;
  }
  .timeline-pro-2 .timeline-pro-2-item > .timeline-pro-2-media,
  .timeline-pro-2 .timeline-pro-2-item > .timeline-pro-2-content,
  .timeline-pro-2 .timeline-pro-2-item:nth-child(even) > .timeline-pro-2-media,
  .timeline-pro-2 .timeline-pro-2-item:nth-child(even) > .timeline-pro-2-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 849px) {
  /* 确保每一行都是 flex 容器，并改为纵向排列 */
  .timeline-pro-2 .timeline-pro-2-item.text-img-box {
    display: flex;
    flex-direction: column !important; /* 默认纵向排列 */
    align-items: flex-start;
  }

  /* 强制图片容器排在第一位 */
  .timeline-pro-2 .timeline-pro-2-item.text-img-box > .img {
    order: 1; 
    width: 88%;
    margin-bottom: 15px; /* 给图片下方留点间距 */
  }
  .timeline-pro-2 .timeline-pro-2-media .img-inner{
      border-radius: 10px;
  }


  /* 强制文字容器排在第二位 */
  .timeline-pro-2 .timeline-pro-2-item.text-img-box > .text {
    order: 2;
    width: 88%;
    margin-bottom: 10px;
  }

  /* 覆盖你原本 nth-child(even) 的 row-reverse 效果，防止在手机端乱序 */
  .timeline-pro-2 .timeline-pro-2-item:nth-child(even).text-img-box {
    flex-direction: column !important;
  }
}




/* 1. 容器：居中，移除所有 Flatsome 默认样式 */
.my-custom-tabs {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0 !important;
    margin: 0 auto !important;
    gap: 8px;
}

/* 2. 标签项：强制无圆角 (border-radius: 0) */
.my-custom-tabs .tab a {
    display: block;
    padding: 0px 20px; 
    font-size: 16px;
    font-weight: 500;
    color: #555;
    background-color: #FFF;
    text-decoration: none;
    border-radius: 0 !important; /* 明确去除圆角 */
    
    /* 裁剪为平行四边形，不影响内部文字 */
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    transition: all 0.3s ease;
}

/* 3. 激活与悬停状态 */
.my-custom-tabs .tab.active a,
.my-custom-tabs .tab a:hover {
    background-color: var(--fs-color-primary);
    color: #fff;
    border-radius: 0 !important; /* 确保激活态也无圆角 */
}

/* 4. 手机端适配 */
@media (max-width: 600px) {
    .my-custom-tabs .tab a {
        padding: 2px 12px;
        font-size: 14px;
    }
}
 /* ==========================================================================
   项目业绩归档页 - 完整样式表
   ========================================================================== */

/* 1. 列表入场动画 */
.case-archive-row .case-item {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0s !important;
    will-change: opacity, transform;
    visibility: visible !important;
}

.case-archive-row .case-item.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 2. 画廊排版适配 */
.custom-gallery-wrap .gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}
.custom-gallery-wrap .gallery-item {
    flex: 1 1 30% !important;
    max-width: 32% !important;
    margin: 0 !important;
}


.case-card { 
    position: relative; 
    transition: all 0.3s ease;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 4. 图片及悬停效果 */
.case-card-link { display: block; text-decoration: none !important; color: #111 !important; }
.case-card-image { position: relative; overflow: hidden; background: #f5f5f5; }
.case-card-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    backface-visibility: hidden;
}

/* 5. 遮罩层及文字清晰度优化 */
.case-card-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.35s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
}

.case-card-hover-inner {
    color: #fff;
    padding: 24px;
    transform: translateY(10px);
    transition: transform 0.35s ease;
}

/* 文字清晰度核心逻辑：移除伪影，增强对比 */
.case-card-hover-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #ffffff;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-card-hover-icon i {
    font-size: 28px;
    color: #ffffff;
    transition: transform 0.3s ease;
}

/* 6. 交互触发 */
.case-card-link:hover .case-card-hover { opacity: 1; }
.case-card-link:hover .case-card-hover-inner { transform: translateY(0); }
.case-card-link:hover .case-card-image img { transform: scale(1.05); }
.case-card-link:hover .case-card-hover-icon i { transform: translate(4px, -4px); }

/* 7. 底部信息区域 */
.case-card-content { padding-top: 18px; }
.case-card-title { font-size: 18px; font-weight: 600; margin: 0 0 10px; color: #000; }
.case-card-meta { margin-top: 12px; }
.meta-row { font-size: 13px; margin-bottom: 6px; }
.meta-row strong { color: #222; font-weight: 600; }
.meta-row span { color: #555; }