@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编辑器，条件加载)
 * ===================================================
 */
 
 
 .nav-dropdown .menu-item-has-children>a, .nav-dropdown .nav-dropdown-col>a, .nav-dropdown .title>a {
    color: #000;
    font-size: 1em;
    font-weight: bolder;
    text-transform: capitalize;
}


 /* 容器设置 */
.cat-button-wrapper {
    display: flex;
    justify-content: center; 
    flex-wrap: wrap;         
    gap: 10px;               
    padding: 20px 15px;
    width: 100%;
    box-sizing: border-box;
}

/* 默认状态：白色边框 + 20%透明度白色背景 */
.cat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    
    /* 未选中状态 */
    border: 1.5px solid #ffffff;           /* 纯白线条 */
    background-color: rgba(255, 255, 255, 0.2); /* 背景色透明度 0.2 */
    color: #ffffff;                        /* 文字白色 */
    
    text-decoration: none;
    border-radius: 228px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    backdrop-filter: blur(4px); /* 可选：增加毛玻璃效果，更高级 */
}

/* 激活状态：填充主题主色调 */
.cat-btn.active {
    background-color: var(--fs-color-primary);
    border-color: var(--fs-color-primary);
    color: #ffffff;
    opacity: 1;
}

/* 悬停效果 */
.cat-btn:hover {
    background-color: rgba(255, 255, 255, 0.3); /* 悬停时稍微亮一点 */
    border-color: #ffffff;
    color: #ffffff;
}

/* 手机端布局：1行2个 */
@media (max-width: 768px) {
    .cat-button-wrapper {
        justify-content: center; 
    }
    
    .cat-btn {
        /* 计算宽度：(100% - 1个间距10px) / 2 */
        flex: 0 0 calc(50% - 5px); 
        box-sizing: border-box;
        white-space: normal; 
        min-height: 45px;    
        padding: 5px 8px;
    }
}

/* PC端设置 */
@media (min-width: 769px) {
    .cat-btn {
        flex: 0 0 auto;
        min-width: 100px;
    }
}




.home-tabs-list .nav a{
    padding: 10px 20px;
}


@media (max-width: 549px) {
.home-tabs-list .nav a{
    width: 100%;
}

}

.icon-color-main .icon-inner * {
    fill: var(--fs-color-primary); /* 现在有效了！ */

}

.icon-color-main img * {
    fill: var(--fs-color-primary); /* 现在有效了！ */

}


/*地图闪烁的点*/

.marker {
    border-radius: 50%;
    padding: 0 3px 3px 0;
    width: 40px;
    height: 40px;
    background: #000;
    position: absolute;
    left:15%;
    top: 51%;
    margin: -35px 0 0 -15px;
    -webkit-box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
    -moz-box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
    box-shadow: -1px 1px 4px rgba(0, 0, 0, .5);
}
.marker:after {
    content: '';
    width: 16px;
    height: 16px;
    margin: 12px 12px 11px -6px;
    background: #3da052;
    position: absolute;
    border-radius: 50%;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    -moz-box-shadow: inset -2px 2px 4px hsla(0, 0, 0, .5);
    -webkit-box-shadow: inset -2px 2px 4px hsla(0, 0, 0, .5);
    box-shadow: inset -2px 2px 4px hsla(0, 0, 0, .5);
}
.beacon {
    position: absolute;
    top: 50%;
    left: 21%;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -1;
    margin-top: -39px;
}
.beacon:before,
.beacon:after {
  position: absolute;
  content: "";
  height: 48px;
  width: 48px;
  left: 0;
  top: 0;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #3da052;
  -webkit-animation: active 2s infinite linear;
  -moz-animation: active 2s infinite linear;
  animation: active 2s infinite linear;
}

.beacon:after {
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes active {
  0% {
    -webkit-transform: scale(.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes active {
  0% {
    transform: scale(.1);
    transform: box-shadow(0px 0px 0px 1px #3da052);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}