/* ==========================================================
* theme.css —— 全站配色与交互状态统一层
* ----------------------------------------------------------
* 【作用】
* 品牌色、文字灰阶、边框灰阶、深色区块底色，以及导航、
* 鼠标悬停、当前项/激活态、分页、按钮、加粗强调的配色规则
* 全部集中在本文件。以后调整网站颜色风格，只改这一个文件。
*
* 【引入方式】
* 在每个模板 拉撕维加斯3499com官网(中国)有限公司 里、所有其他 css 之后引入：
*
* 必须最后加载。CSS 同优先级下后加载者生效，这样本文件
* 才能覆盖 base/common/index 等文件里的原有规则，而不需要
* 靠 !important 或堆高选择器权重。
*
* 【浏览器兼容】
* 本文件只写 var(--xxx)，不重复写字面色值。不支持 CSS 变量
* 的浏览器（IE11 及更早）会忽略本文件的颜色声明，自动回退到
* base.css / common.css / index.css 等文件里原有的字面色值，
* 页面不会失色，只是无法通过本文件统一调色。现代浏览器不受
* 影响。若确实需要兼容 IE，请把对应规则的色值双写一行。
*
* 创建日期：2026-09-10
* ========================================================== */
/* ==========================================================
* 一、设计变量（改配色从这里开始）
* ========================================================== */
:root{
/* --- 品牌色 --- */
--brand: #D62B27; /* 品牌红：主色，导航强调/按钮/激活态/悬停 */
--brand-deep: #8B0000; /* 深红：渐变起点、标签条、次级强调 */
/* --- 深红的 RGB 分量，用于生成半透明底（下拉导航等）--- */
--brand-deep-rgb: 139, 0, 0;
/* --- 文字灰阶（由深到浅）--- */
--text-strong: #121212; /* 最深：正文链接、大标题 */
--text-title: #333333; /* 区块标题 */
--text-body: #666666; /* 正文 */
--text-sub: #999999; /* 辅助信息：日期、面包屑、计数 */
--text-inverse: #FFFFFF; /* 深色底上的文字 */
/* --- 线条与分隔 --- */
--line: #DBDBDB; /* 常规边框 */
--line-light: #EBEBEB; /* 浅分隔线、面包屑底 */
/* --- 背景 --- */
--bg-soft: #F5F5F5; /* 浅灰底：案例区、视频区、图片卡 */
--bg-dark: #191919; /* 页脚底 */
--bg-dark-2: #222222; /* 移动端抽屉导航底 */
--bg-dark-3: #2E2E2E; /* 移动端抽屉导航二级底 */
}
/* ==========================================================
* 二、全局链接与悬停反馈
* ----------------------------------------------------------
* 原 base.css 里 a:hover 的颜色与常态相同（都是 #121212），
* 正文链接悬停没有任何反馈。这里统一改为品牌红。
* 导航、页脚等处的白色链接有更高优先级的专属规则，不受影响。
* ========================================================== */
a,
a:visited{
color:var(--text-strong);
}
a:hover,
a:active{
color:var(--brand);
}
/* 面包屑：常态浅灰，悬停品牌红 */
.nei_crumbs i{
color:var(--brand);
}
.nei_crumbs .nc_a,
.nei_crumbs .nc_a a{
color:var(--text-sub);
}
.nei_crumbs .nc_a a:hover{
color:var(--brand);
}
/* 详情页「上一篇/下一篇」：base.css 里 .fanye ul li a 特异性较高（13），
* 会压住上面的全局 a:hover（11），必须单独写一条同路径规则才能生效。 */
.fanye{
border-top-color:var(--line-light);
}
.fanye ul li{
color:var(--text-title);
}
.fanye ul li a{
color:var(--text-body);
}
.fanye ul li a:hover{
color:var(--brand);
}
/* ==========================================================
* 三、PC 端主导航
* ========================================================== */
/* 常态：透明底上的白字；吸顶后与内页：深色字 */
.pc_nav .f_nav .f_li .f_n a{
color:var(--text-inverse);
}
.top.topfix .f_nav .f_li .f_n a{
color:var(--text-strong);
}
body.nei_body .top .f_nav .f_li .f_n a{
color:var(--text-strong);
}
/* 悬停：文字上滑移出，用 ::after 复制一份品牌红加粗文字滑入。
* 这是本站主导航的核心悬停效果。 */
.pc_nav .f_nav .f_li .f_n a:after{
color:var(--brand);
font-weight:bold;
}
/* 二级下拉导航：深红半透明底 + 品牌红顶边 */
.pc_nav .f_nav .f_li .s_nav{
background:rgba(var(--brand-deep-rgb), .85);
border-top:2px solid var(--brand);
}
.pc_nav .f_nav .f_li .s_nav a{
color:var(--text-inverse);
}
/* 二级项悬停：原样式底色与本体相同、仅靠加粗区分，反馈太弱。
* 这里改为品牌红实底，悬停时一眼可辨。 */
.pc_nav .f_nav .f_li .s_nav a:hover{
background:var(--brand);
color:var(--text-inverse);
font-weight:bold;
}
/* ==========================================================
* 四、移动端抽屉导航
* ========================================================== */
.top .nav .nav_box{
background:var(--bg-dark-2);
}
.top .nav .nav_one>li>.li_a{
border-bottom-color:var(--bg-dark-3);
}
.top .nav .nav_one>li>.li_a>a,
.top .nav .nav_one>li>.li_a>i{
color:var(--text-inverse);
}
.top .nav .nav_one>li>ul{
background:var(--bg-dark-3);
}
/* 二级项文字：选择器与 common.css:72 原规则完全一致，
* 权重相同、本文件后加载，故生效。单独成条便于日后查找。 */
.top .nav .nav_one>li>ul>li>a{
color:var(--text-inverse);
}
/* 当前栏目高亮 */
.top .nav .nav_one>li>.li_a>a.on{
background:var(--brand);
color:var(--text-inverse);
}
/* 汉堡按钮 */
.top .nav .push-nav{
background:var(--brand);
}
.top .nav .push-nav i{
color:var(--text-inverse);
}
/* ==========================================================
* 五、内页栏目切换条（sub_cnav）
* ========================================================== */
.sub_cnav{
background:var(--line-light);
}
.sub_cnav a{
border-right-color:var(--text-inverse);
}
.sub_cnav a:hover{
color:var(--brand);
}
.sub_cnav a.on{
background:var(--brand);
color:var(--text-inverse);
}
/* ==========================================================
* 六、加粗与强调
* ----------------------------------------------------------
* 分三种情况，避免"正文里一加粗就变红"导致页面发花：
* 1) 正文加粗 —— 用最深文字色，靠字重突出；
* 2) 标题、激活态、悬停态的加粗 —— 用品牌红；
* 3) 需要红色强调的零散文字 —— 加 .em-brand 类即可。
* ========================================================== */
/* 1) 正文加粗：统一深色，不抢品牌色 */
.fld_company .fldc_txt b,
.fld_company .fldc_txt strong,
.fld_nshow .fldns_left .fldns_txt b,
.fld_nshow .fldns_left .fldns_txt strong,
.fld_pbtwshow .fldpbs_l .fldpbs_txt b,
.fld_pbtwshow .fldpbs_l .fldpbs_txt strong,
.ab_img b,
.ab_img strong{
color:var(--text-strong);
font-weight:bold;
}
/* 2) 标题类加粗：统一标题色 */
.pb_tit,
.fld_company .fldc_title,
.fld_pbtwshow .fldpbs_l .fldpbs_title,
.fld_case .fldc_ul .fldc_txt p:first-child,
.fld_news .fldn_content .fldn_left a .fldn_txt p:first-child,
.fld_nlist .fldn_li .fldn_right .fldn_txt .fldn_t{
color:var(--text-title);
font-weight:bold;
}
/* 深色底上的标题加粗 */
.fld_youshi .pb_tit,
.foot .ft_tit,
.com_foot p,
.friendlink span{
color:var(--text-inverse);
font-weight:bold;
}
/* 3) 可选工具类：需要品牌红强调时直接加 class="em-brand" */
.em-brand{
color:var(--brand);
font-weight:bold;
}
/* ==========================================================
* 七、分页
* ----------------------------------------------------------
* 站内实际生效的是 .pagination（base.css 末尾那套）。
* 原样式当前页是 #333 深灰底，与全站品牌红不一致，这里归正。
* ========================================================== */
.pagination a{
background:var(--text-inverse);
border:1px solid var(--line);
color:var(--text-title);
}
.pagination span{
color:var(--text-title);
}
.pagination a:hover{
color:var(--brand);
border-color:var(--brand);
}
.pagination a.page-num-current{
background:var(--brand);
border-color:var(--brand);
color:var(--text-inverse);
font-weight:bold;
}
/* 旧版分页 .manu：当前模板未使用，一并归正以保持一致 */
.manu a{
border-color:var(--line);
color:var(--text-title);
}
.manu a:hover{
border-color:var(--brand);
color:var(--brand);
}
.manu .current{
background:var(--brand);
border-color:var(--brand);
color:var(--text-inverse);
font-weight:bold;
}
.manu .disabled{
border-color:var(--line);
color:var(--line);
}
/* ==========================================================
* 八、页脚
* ========================================================== */
.foot{
background:var(--bg-dark);
}
.foot .ft_txt .ftt_pp p,
.foot .ft_txt .ft_ewm .fte_img p,
.foot .ft_nav .ftn_a a,
.footbottom span,
.footbottom a{
color:var(--text-inverse);
}
.foot .ft_nav .ftn_a a:hover{
color:var(--brand);
}
.friendlink .fl_a a{
color:#AFAFAF;
}
.friendlink .fl_a a:hover{
color:var(--text-inverse);
}
/* 页脚留言表单：当前模板未渲染此区块，一并归正 */
.foot .ft_form{
background:var(--bg-soft);
}
.foot .ft_form input,
.foot .ft_form textarea{
background:var(--text-inverse);
color:var(--text-strong);
}
.foot .ft_form .ftf_btn{
background:var(--brand);
color:var(--text-inverse);
}
/* 底部通栏 CTA：当前模板未使用，原为遗留蓝色 #2396E5，归正为深红 */
.com_foot{
background:var(--brand-deep);
}
.com_foot .comf_btn a{
background:var(--brand);
color:var(--text-inverse);
border-bottom-color:var(--brand-deep);
}
/* ==========================================================
* 九、悬浮工具：返回顶部 / 移动端底部栏
* ----------------------------------------------------------
* .m_float 原被 base.css 与 common.css 各定义一次，颜色互相
* 冲突，后加载的 common.css 让它实际显示为灰色 #8A8A8A，与
* 全站品牌红脱节。此处统一为品牌红。
* ========================================================== */
.scroll_top{
background:var(--brand);
}
.scroll_top i{
color:var(--text-inverse);
}
.m_float{
background:var(--brand);
}
.m_float .ma i,
.m_float .ma p{
color:var(--text-inverse);
}
/* 左侧固定联系栏：当前模板未使用，原为蓝/青/黑杂色，一并归正 */
.pc_fixed li a{
background:var(--bg-dark);
color:var(--text-inverse);
}
.pc_fixed li.ltel a,
.pc_fixed li.ltel:hover a span{
background:var(--brand);
}
.pc_fixed li.leml a,
.pc_fixed li.leml:hover a span{
background:var(--brand-deep);
}
.pc_fixed li.lly a{
background:var(--brand);
}
/* 右侧客服菜单：当前模板未使用，原为 #E60C00，归正为品牌红 */
.izl-rmenu .iz_btn,
.izl-rmenu .btn-phone .phone{
background:var(--brand);
}
.izl-rmenu .iz_btn span,
.izl-rmenu .btn-phone .phone{
color:var(--text-inverse);
}
/* ==========================================================
* 十、右侧栏（产品/新闻推荐，用于 news、product 详情页）
* ========================================================== */
.pb_right .pr_tit{
color:var(--text-strong);
border-bottom-color:var(--text-strong);
}
.pb_right .pr_pro,
.pb_right .pr_news{
border-color:var(--line);
}
.pb_right .pr_pro .pr_ul .pr_li .pr_img{
border-color:var(--line);
}
.pb_right .pr_news .pr_nul a{
color:var(--text-body);
}
.pb_right .pr_news .pr_nul a:before{
background:var(--text-body);
}
/* 悬停：文字与圆点同时转品牌红 */
.pb_right .pr_news .pr_nul a:hover{
color:var(--brand);
}
.pb_right .pr_news .pr_nul a:hover:before{
background:var(--brand);
}
/* ==========================================================
* 十一、首页各区块
* ========================================================== */
/* 轮播指示点：当前项品牌红 */
.fld_banner .swiper-pagination-bullet{
background:var(--text-inverse);
}
.fld_banner .swiper-pagination-bullet.swiper-pagination-bullet-active{
background:var(--brand);
}
/* 产品分类侧栏：文字常态深灰，悬停/选中时渐变红底白字 */
.fld_product .fldp_left .fldpl_li p{
color:var(--text-title);
}
.fld_product .fldp_left .fldpl_li:before{
background:-webkit-gradient(linear, left top, right top, color-stop(0.34%, var(--brand-deep)), color-stop(99.63%, var(--brand)));
background:-webkit-linear-gradient(left, var(--brand-deep) 0.34%, var(--brand) 99.63%);
background:-moz-linear-gradient(left, var(--brand-deep) 0.34%, var(--brand) 99.63%);
background:linear-gradient(90deg, var(--brand-deep) 0.34%, var(--brand) 99.63%);
}
.fld_product .fldp_left .fldpl_li.on p,
.fld_product .fldp_left .fldpl_li:hover p{
color:var(--text-inverse);
}
/* 产品卡片：原为 Bootstrap 灰阶 #CED4DA / #DEE2E6，归入统一灰阶 */
.fld_product .fldp_right .fldpr_li{
border-color:var(--line);
background:var(--bg-soft);
}
.fld_product .fldp_right .fldpr_li p{
background:var(--text-inverse);
color:var(--text-title);
}
.fld_product .fldp_right .fldpr_li:hover p{
color:var(--brand);
}
/* 优势区：深色蒙版上的白字 */
.fld_youshi .fldy_txt{
color:var(--text-inverse);
}
.fld_youshi .fldy_ul .fldy_li p:first-of-type{
color:var(--text-inverse);
font-weight:bold;
}
/* 案例区 */
.fld_case{
background:var(--bg-soft);
}
.fld_case .fldc_ul .fldc_txt{
background:var(--text-inverse);
}
.fld_case .fldc_ul .fldc_txt p{
color:var(--text-body);
}
.fld_case .fldc_ul .swiper-scrollbar{
background:#E0E0E0;
}
.fld_case .fldc_ul .swiper-scrollbar .swiper-scrollbar-drag{
background:var(--brand);
}
/* 拉撕维加斯3499com官网/数据区 */
.fld_info .fldi_right .fldi_txt b{
color:var(--text-strong);
}
.fld_info .fldi_right .fldi_txt p{
color:var(--text-body);
}
.fld_info .fldi_right .fldi_txt .fldi_btn a{
background:var(--brand);
}
.fld_info .fldi_right .fldi_txt .fldi_btn a span{
color:var(--text-inverse);
}
.fld_info .fldi_right .fldi_txt .fldi_num .fldi_li{
background:var(--text-inverse);
}
.fld_info .fldi_right .fldi_txt .fldi_num .fldi_li .fldi_n span{
color:var(--brand);
}
.fld_info .fldi_right .fldi_txt .fldi_num .fldi_li em{
color:var(--text-sub);
}
/* 视频区 */
.fld_video{
background:var(--bg-soft);
}
.fld_video .fldv_ul .fldv_txt p,
.fld_video .fldv_ul .fldv_txt span{
color:var(--text-inverse);
}
.fld_video .fldv_ul .fldv_txt span:hover{
background:var(--brand);
border-color:var(--brand);
}
/* 新闻区 */
.fld_news .fldn_content .fldn_left a,
.fld_news .fldn_content .fldn_right a{
background:var(--text-inverse);
}
.fld_news .fldn_content .fldn_left a .fldn_txt p:first-child{
color:var(--text-strong);
}
.fld_news .fldn_content .fldn_left a .fldn_txt p{
color:#7B7B7B;
}
.fld_news .fldn_content .fldn_left a .fldn_txt p:nth-child(2){
border-top-color:#E9E9E9;
}
.fld_news .fldn_content .fldn_left a .fldn_txt p:last-child{
color:var(--text-sub);
}
.fld_news .fldn_content .fldn_right a p:first-child{
color:var(--brand);
}
.fld_news .fldn_content .fldn_right a p{
color:#7B7B7B;
}
/* 新闻按钮：常态品牌红描边，悬停填充品牌红 */
.fld_news .fldn_content .fldn_right a .fldn_btn{
border-color:var(--brand);
color:var(--brand);
}
.fld_news .fldn_content .fldn_right a:hover .fldn_btn{
color:var(--text-inverse);
}
.fld_news .fldn_content .fldn_right a:hover .fldn_btn:before{
background:var(--brand);
}
.fld_news .fldn_content .fldn_right a.n1:before{
background:var(--brand);
}
.fld_news .fldn_content .fldn_right a.n1 .nc_date span{
color:var(--brand);
}
.fld_news .fldn_content .fldn_right a.n1 .nc_pp p:first-child{
color:var(--text-strong);
}
.fld_news .fldn_content .fldn_right a.n1 .nc_date i{
background:var(--line);
}
/* ==========================================================
* 十二、内页区块
* ========================================================== */
/* 拉撕维加斯3499com官网我们：数字统计原为遗留蓝紫 #464A83，归正为品牌红 */
.fld_company .fldc_title{
color:var(--text-title);
}
.fld_company .fldc_txt{
color:var(--text-body);
}
.fld_company .fldc_num .fldc_span .fldc_tit span{
color:var(--brand);
}
.fld_company .fldc_num .fldc_span .fldc_tit em,
.fld_company .fldc_num .fldc_span p{
color:var(--text-body);
}
/* 联系我们：提交按钮原为遗留蓝紫 #464A83，归正为品牌红 */
.fld_contact .fldc_t{
color:var(--text-strong);
}
.fld_contact .fldc_left .fldc_txt p,
.fld_contact .fldc_right p{
color:var(--text-body);
}
.fld_contact .fldc_right .fldc_input span{
color:var(--text-sub);
}
.fld_contact .fldc_right .fldc_input input,
.fld_contact .fldc_right .fldc_input textarea{
border-color:#E1E1E1;
background:#FCFCFC;
color:var(--text-strong);
}
.fld_contact .fldc_right .fldc_input input::placeholder,
.fld_contact .fldc_right .fldc_input textarea::placeholder{
color:var(--text-sub);
}
.fld_contact .fldc_right .fldc_input input:focus,
.fld_contact .fldc_right .fldc_input textarea:focus{
border-color:var(--brand);
}
.fld_contact .fldc_right .fldc_input .fldc_btn{
background:var(--brand);
color:var(--text-inverse);
}
.fld_contact .fldc_right .fldc_input .fldc_btn:hover{
background:var(--brand-deep);
}
/* 新闻列表：悬停标题原为遗留蓝紫 #363971，归正为品牌红 */
.fld_nlist .fldn_li{
background:var(--text-inverse);
}
.fld_nlist .fldn_li .fldn_right .fldn_txt .fldn_p p{
color:#A2A2A2;
}
.fld_nlist .fldn_li .fldn_right .fldn_data span{
color:var(--text-sub);
}
.fld_nlist .fldn_li .fldn_right .fldn_data em{
border-color:#DEDFE1;
color:var(--line);
}
.fld_nlist .fldn_li:hover .fldn_right .fldn_t{
color:var(--brand);
}
/* 新闻详情 */
.fld_nshow .fldns_left .fldns_ifno,
.fld_nshow .fldns_left .fldns_txt{
color:var(--text-body);
}
.fld_nshow .fldns_left .fldns_ifno{
border-bottom-color:var(--line);
}
/* 产品详情：标签条原为遗留蓝紫 #363971，归正为深红 */
.fld_pbtwshow .fldpbs_l .fldpbs_title{
color:var(--text-title);
}
.fld_pbtwshow .fldpbs_l .fldpbs_info{
color:var(--text-title);
border-bottom-color:var(--line);
}
.fld_pbtwshow .fldpbs_l .fldpbs_ul{
background:#E5E5E5;
}
.fld_pbtwshow .fldpbs_l .fldpbs_ul span{
background:var(--brand-deep);
color:var(--text-inverse);
}
/* 产品/图片列表 */
.fld_pbtuwen .fldpbt_ul .fldpbt_li .fldpbt_img{
border-color:var(--bg-soft);
}
.fld_pbtuwen .fldpbt_ul .fldpbt_li p{
background:var(--bg-soft);
color:var(--text-body);
}
.fld_pbtuwen .fldpbt_ul .fldpbt_li:hover p{
background:var(--brand);
color:var(--text-inverse);
}
/* ==========================================================
* 十三、响应式段落中的品牌色
* ----------------------------------------------------------
* index.css 在 @media (max-width:1359px) 里把产品分类侧栏的
* 悬停背景单独写成了字面 #D62B27（窄屏下取消渐变、改纯色）。
* 该规则位于媒体查询内，必须在这里同段重写，否则窄屏下改
* token 不会生效。
* ========================================================== */
@media screen and (max-width:1359px){
.fld_product .fldp_left .fldpl_li{
border-left-color:var(--text-inverse);
}
.fld_product .fldp_left .fldpl_li.on,
.fld_product .fldp_left .fldpl_li:hover{
background:var(--brand);
}
}
@media screen and (max-width:1023px){
/* 窄屏下顶部栏改为白底，导航文字转深色 */
.top{
background:var(--text-inverse);
}
.top .f_nav .f_li .f_n a{
color:var(--text-strong);
}
}
@media screen and (max-width:767px){
.fld_product .fldp_left .fldpl_li{
border-top-color:var(--text-inverse);
}
.fld_info .fldi_right .fldi_txt .fldi_num .fldi_li{
border-color:#F2F2F2;
}
}