/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 23 2026 | 08:22:06 */
/* 假设你的橘色胶囊类名是 .banner-tag */
.banner-tag {
	display: inline-flex;
   align-items: center;
   text-transform: uppercase;
	border-radius:12px;
}

/* 在文字前面生成白点 */
.banner-tag::before {
   content: "";
   display: inline-block;
   width: 8px;   /* 圆点直径 */
   height: 8px;
   background-color: white; /* 圆点颜色 */
   border-radius: 50%;      /* 变成圆形 */
   margin-right: 10px;      /* 与文字的间距 */
}
.header-radius{
	border-radius:12px;
}
.header-radius2{
	border-radius:35px
}
.shrink0{
	flex-shrink:0;
}
.cursor{
	cursor:pointer;
}
.custom-line {
    width: 100%;             /* 宽度根据你的布局调整 */
    height: 2px;
    background-color: rgba(31, 216, 219, 0.32); /* #1FD8DB 对应的 RGB 值，0.32 为透明度 */
    border: none;            /* 如果是用 <hr> 标签，需去掉默认边框 */
}
.number-box,.number-box-no-border {
    /* 基础尺寸 */
	  flex: 0 0 64px !important; /* 不放大、不缩小、基础宽度 64px */
    width: 64px;
    height: 64px;
    
    /* 背景颜色 (参考你之前的 #1FD8DB) */
    background-color: #1FD8DB;
    
    /* 圆角 (图片看起来约有 8px 到 12px) */
    border-radius: 12px;
    
    /* 外边框：4px 宽度，颜色为半透明白或浅淡蓝，达到图片中的厚度感 */
    border: 4px solid #F0F5FF; 
    
    /* 内部文字居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 文字样式 */
    color: #2D3436;           /* 深灰色文字 */
    font-size: 24px;          /* 根据需要调整大小 */
    font-weight: bold;        /* 加粗 */
    font-family: sans-serif;
    
    /* 确保边框不会撑大盒子 */
    box-sizing: border-box;
}
/* --- 在你原本的 .number-box 样式后面添加这个 hover 规则 --- */
.number-box-no-border{
	border: none;
}
.number-box:hover {
    /* 鼠标移上去时，将中心背景换成同色系深色 */
    background-color: #16B5B8 !important; /* 加 !important 是为了防止 Spectra 插件的样式覆盖它 */
}
/* 修改后的实际应用代码 */
.my-step-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    cursor: pointer;
/*     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
}

.my-step-card:hover {
    transform: translateY(-10px) !important; /* 这里我稍微加大到了 10px */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}
/* 仅在屏幕宽度小于等于 767px 时生效 */
@media (max-width: 767px) {
    .min-height {
        min-height: 1200px !important;
    }
}
/* 1. 确保最外层容器（Slider 容器）成为定位基准 */
.uagb-slider-container {
    position: relative !important;
}

/* 2. 移除 Spectra 默认可能存在的导航包裹层（如果有的话）对定位的干扰 */
.uagb-slider-navigation {
    position: static !important;
    display: contents !important; /* 忽略这个包裹层，让按钮直接相对于 Container 定位 */
}

/* 3. 核心：强制左右按钮脱离文档流，定位到右上角 */
.uagb-slider-container .swiper-button-prev,
.uagb-slider-container .swiper-button-next {
    position: absolute !important;
    top: 40px !important;    /* 距离卡片顶部距离 */
    bottom: auto !important; /* 显式重置默认可能存在的 bottom */
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    
    width: 40px !important;
    height: 40px !important;
    background-color: #ffffff !important;
    border: 1px solid #169999CC !important; /* 图 2 中的青色边框颜色 */
    border-radius: 10px !important; /* 稍微圆润的方形 */
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important; /* 确保在最上层 */
}

/* 4. 调整两个按钮之间的间距并靠右排列 */
/* 上一个按钮在左侧 */
.uagb-slider-container .swiper-button-prev {
    right: 120px !important; /* 30px + 按钮宽度 + 间距 */
}
/* 下一个按钮在最右侧 */
.uagb-slider-container .swiper-button-next {
    right: 70px !important; /* 距离右侧边缘 30px */
}

/* 5. 修正内部箭头大小和颜色 */
.uagb-slider-container .swiper-button-prev::after,
.uagb-slider-container .swiper-button-next::after {
    font-size: 14px !important; /* 调小箭头 */
    color: #169999CC !important;  /* 箭头颜色 */
}
/* 表单样式 */
/* 重点：使用容器类名打头，后面紧跟插件原有的输入框类名 */
.my-custom-form-input .srfm-input-common.srfm-input-input {
    background-color: #1FD8DB33 !important; /* 你的背景色 */
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
}

/* 如果是多行文本域（需求详情） */
.my-custom-form-input textarea.srfm-input-common {
    background-color: #1FD8DB33 !important;
    border: none !important;
    border-radius: 8px !important;
}

/* 占位符颜色 */
.my-custom-form-input .srfm-input-common::placeholder {
    color: #999 !important;
}
/* 针对下拉框控制区域的样式 */
.my-custom-form-input .ts-wrapper.srfm-dropdown-common .ts-control {
    background-color: #1FD8DB33 !important; /* 统一背景色 */
    border: none !important;               /* 去掉边框 */
    border-radius: 8px !important;         /* 圆角 */
    padding: 12px 16px !important;         /* 内边距 */
    box-shadow: none !important;
    min-height: auto !important;           /* 防止高度被脚本强制锁定 */
    display: flex !important;
    align-items: center !important;
}

/* 调整下拉框内文字的颜色 */
.my-custom-form-input .ts-wrapper .ts-control .item, 
.my-custom-form-input .ts-wrapper .ts-control input {
    color: #333333 !important;
}

/* 下拉弹出的选项列表 */
.my-custom-form-input .ts-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #1FD8DB33 !important;
    border-radius: 0 0 8px 8px !important;
}

/* 鼠标悬停在选项上的颜色 */
.my-custom-form-input .ts-dropdown .active {
    background-color: #1FD8DB33 !important;
    color: #333 !important;
}
/* 1. 关键：强制重置图标容器的定位，让它变回普通元素 */
.my-custom-form-input .srfm-icon-container {
    position: static !important;    /* 彻底取消绝对定位 */
    margin-right: 8px !important;   /* 图标右侧留出间距，推开文字 */
    display: flex !important;       /* 确保内部 SVG 居中 */
    padding: 0 !important;
}

/* 2. 容器：背景设为墨蓝色，并调换内容顺序 */
.my-custom-form-input .srfm-block-content-wrap {
    display: flex !important;
    flex-direction: row-reverse !important; /* 因为 HTML 结构里图标在后，用这个调换到左边 */
    align-items: center !important;         /* 垂直居中 */
    justify-content: center !important;     /* 水平居中 */
    background-color: #1FD8DB33 !important;   /* 墨蓝色背景 */
    padding: 8px 10px !important;           /* 胶囊的内边距 */
    border-radius: 50px !important;         /* 胶囊圆角 */
	 gap:0 !important;
}

/* 3. 文字：改为白色 */
.my-custom-form-input .srfm-multi-choice-label {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 14px !important;
}

/* 4. 图标本身：如果是 SVG，确保它是白色的 */
.my-custom-form-input .srfm-icon-container svg {
    stroke: #ffffff !important; /* 描边变白 */
    width: 16px !important;
    height: 16px !important;
}

/* 5. 清理：去掉选项外层原本的背景和边框 */
.my-custom-form-input .srfm-option-container {
    background: none !important;
    border: none !important;
    padding: 0 !important;
	 flex:none !important;
}
.my-custom-form-input .editor-styles-wrapper .srfm-button, .srfm-form-container .srfm-button {
	padding:15px 30px;
}

/* ==========================================================================
   1. 电脑端（PC）的基础样式与结构
   ========================================================================== */

/* 默认隐藏移动端 */
.custom-translate-wrapper-mod {
    display: none !important;
}

/* 电脑端外层容器 */
.custom-translate-wrapper-pc {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0 12px;
    height: 100%;
}

/* 图标基础样式 */
.custom-translate-wrapper-pc .globe-icon {
    font-size: 18px; 
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s ease;
}

/* 鼠标悬停到外层容器时：图标微动，并触发下拉菜单显示 */
.custom-translate-wrapper-pc:hover .globe-icon {
    transform: scale(1.05);
}

.custom-translate-wrapper-pc:hover .translate-dropdown-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* ==========================================================================
   2. 完美复刻的“半透明毛玻璃”下拉卡片
   ========================================================================== */
.translate-dropdown-content {
    position: absolute;
    top: 173%;
    left: 0; /* 改为右对齐，防止靠右时菜单溢出屏幕 */
    min-width: 180px;
    padding: 12px 0 !important;
    z-index: 999;
    
    /* 核心修改：复刻你提供的半透明毛玻璃质感 */
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important; /* 兼容苹果Safari浏览器 */
    border-radius: 16px !important; /* 保持大圆角 */
    
    /* 上下微弱的高级细边框 */
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    
    /* 发散软阴影 */
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.12) !important;
    
    /* 间距与隐藏初始状态 */
    margin-top: 12px; /* 让下拉框往下错开，显得更高级 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateY(5px); /* 带有轻微向下沉的进场效果 */
}

/* 当显示时，把位移回正 */
.custom-translate-wrapper-pc:hover .translate-dropdown-content,
.custom-translate-wrapper-mod:hover .translate-dropdown-content {
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   🔥 【核心魔法】解决 Hover 中断的透明桥梁
   -------------------------------------------------------------------------- */
.translate-dropdown-content::before {
    content: "";
    position: absolute;
    top: -30px; /* 往上延伸 15px，完美覆盖 margin-top 的 12px 空隙 */
    left: 0;
    width: 100%;
    height: 30px; /* 高度必须大于或等于上面的 top 负值 */
    background: transparent !important; /* 完全透明，肉眼不可见 */
    cursor: pointer;
}


/* ==========================================================================
   3. 下拉菜单内的文字样式
   ========================================================================== */
.translate-dropdown-content a {
    color: #333333 !important; 
    padding: 12px 24px !important; 
    text-decoration: none !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    text-align: left;
}

.translate-dropdown-content a:hover {
    background-color: rgba(0, 0, 0, 0.03) !important; /* 毛玻璃下，悬停用淡淡的微黑透明罩最漂亮 */
    color: #ff6f00 !important; /* 变成你的主题橙色 */
    padding-left: 28px !important; 
}


/* ==========================================================================
   4. 移动端响应式兼容样式
   ========================================================================== */
@media screen and (max-width: 768px) {
    .custom-translate-wrapper-pc {
        display: none !important;
    }
    
    .custom-translate-wrapper-mod {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        padding: 0 10px;
    }
    
    .custom-translate-wrapper-mod .globe-icon {
        font-size: 24px !important;
        line-height: 1;
    }
    
    /* 移动端悬停/点击后显示 */
    .custom-translate-wrapper-mod:hover .translate-dropdown-content {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    .custom-translate-wrapper-mod .translate-dropdown-content {
        min-width: 150px;
        margin-top: 8px;
    }
    
    /* 移动端的保护桥梁微调 */
    .custom-translate-wrapper-mod .translate-dropdown-content::before {
        top: -10px;
        height: 10px;
    }
}


/* ==========================================================================
    核心：简体、繁体、英文三语图片无缝切换
   ========================================================================== */
.img-zh-ver {
    display: block !important;
}
.img-tw-ver, /* 繁体类名 */
.img-en-ver { /* 英文类名 */
    display: none !important;
}

/* 4.2 当切换到【英文】状态时 (lang="en") */
html[lang="en"] .img-zh-ver { display: none !important; }
html[lang="en"] .img-tw-ver { display: none !important; }
html[lang="en"] .img-en-ver { display: block !important; }

/* 4.3 当切换到【繁体中文】状态时 (lang="zh-TW") */
html[lang="zh-TW"] .img-zh-ver { display: none !important; }
html[lang="zh-TW"] .img-en-ver { display: none !important; }
html[lang="zh-TW"] .img-tw-ver { display: block !important; }