* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0;
}
/* 基础设置 */
body {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
font-size: 14px;
color: #333;
}
i, em, cite, address, dfn, var { font-style: normal; }
ul, li { list-style: none; }
a { text-decoration: none; color: #555; transition: color 0.2s; }
a:hover { color: #ff9900; }
img { border: none; vertical-align: middle; width: 100%; height: auto; object-fit: cover; }
.clear { clear: both; }
/* ================= Visual Loading (视觉加载 - 滚动视差) ================= */
/* 初始状态：透明且下沉 */
.scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
will-change: opacity, transform;
}
/* 激活状态：显示并回位 */
.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* SEO: 视觉隐藏的 H1 标签 */
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.w1200 { width: 1200px; margin: 0 auto; position: relative; }
/* --- 2. 顶部条 (35px 保持锁定) --- */
.top-bar { background: #f8f8f8; border-bottom: 1px solid #eee; line-height: 35px; height: 35px; color: #666; font-size: 12px; position: relative; z-index: 2000; }
.top-bar .top-left { float: left; min-width: 10px; }
.top-bar .top-links { float: right; display: flex; }
.top-bar .top-links > li { position: relative; padding: 0 12px; cursor: pointer; display: flex; align-items: center; height: 35px; }
.top-bar .top-links > li:hover { background: #fff; color: #009199; }
.arrow-icon { width: 8px; height: 8px; margin-left: 6px; position: relative; display: inline-block; }
.arrow-icon::after { content: ""; position: absolute; right: 0; top: 1px; width: 5px; height: 5px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; transform: rotate(45deg); transition: 0.3s; }
li:hover .arrow-icon::after { border-color: #009199; transform: rotate(-135deg); top: 4px; }
.icon-site-nav { width: 16px; height: 12px; position: relative; margin-right: 6px; display: inline-block; }
.icon-site-nav::before, .icon-site-nav span, .icon-site-nav::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: #00b5be; }
.icon-site-nav::before { top: 0; }
.icon-site-nav span { top: 5px; }
.icon-site-nav::after { top: 10px; }
.dropdown { display: none; position: absolute; top: 35px; background: #fff; border: 1px solid #ddd; z-index: 2001; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.top-links > li:hover .dropdown { display: block; }
.account-box { width: 100%; left: 0; min-width: 90px; }
.account-box a { display: block; border-bottom: 1px solid #f5f5f5; color: #666; text-align: center; }
.wx-box { width: 220px; height: 88px; left: 0; overflow: hidden; }
.wx-box img { width: 220px; height: 88px; display: block; }
/* 网站导航下拉框核心排版 */
.site-nav-box {
display: none; position: absolute; top: 35px; right: -1px; width: 630px;
background: #fff; border: 1px solid #ddd; border-top: none; z-index: 2001;
padding: 5px 0;
justify-content: space-between;
}
.top-links > li:hover .site-nav-box { display: flex; }
.nav-col { flex: 1; padding: 0 9px; border-left: 1px solid #f0f0f0; }
.nav-col:first-child { border-left: none; }
.nav-col dt { font-size: 16px; font-weight: bold;}
.nav-col dd { line-height: 1.98; }
.nav-col dd a { color: #666; font-size: 12px; }
.nav-col dd a:hover { color: #991B1B; text-decoration: underline; }
/* 各列标题颜色设置 */
.col-blue dt { color: #00b5be; }
.col-lblue dt { color: #446eb3; }
.col-orange dt { color: #c49a3d; }
.col-purple dt { color: #7f4f96; }
.col-green dt { color: #438f4d; }
/* 出游宝典两列排列 */
.col-purple .dict-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
/* --- 3. 中间区域与搜索框 (1px 边框保持锁定) --- */
.header-mid { height: 100px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1000; }
.logo-container { width: 320px; height: 54px; overflow: hidden; }
.logo-container img { width: 320px; height: 54px; display: block; }
.search {
width: 526px;
margin: 0 auto;
position: relative;
background: #fff;
height: 42px;
border: 2px solid #B45309; /* 橙色边框 */
box-sizing: content-box; /* 保持老代码习惯 */
}
/* 按钮核心样式 */
.search-btn {
/* 关键：使用 Flexbox 布局 */
display: inline-flex;
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中 */
/* 视觉样式 */
background-color: #FFA500; /* 截图中的橙色 */
color: white;
border: none;
padding: 10px 24px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
line-height: 1; /* 防止文字行高影响对齐 */
}
.search-btn:hover {
background-color: #e69500;
}
/* SVG 图标样式 */
.icon-glass {
width: 20px;
height: 20px;
margin-right: 7px; /* 图标和文字之间的间距 */
stroke-width: 2.5; /* 加粗一点线条以匹配截图 */
/* 视觉修正：向下微调 1px，解决汉字重心偏低导致的图标显高问题 */
transform: translateY(4px);
}
#header_s {
display: flex;
height: 100%;
}
/* --- 左侧下拉选择 (.s_type) --- */
.s_type {
width: 90px;
position: relative;
cursor: pointer;
border-right: 1px solid #ffaa01;
}
.s_type p {
line-height: 42px;
text-align: center;
color: #666;
font-size: 14px;
overflow: hidden;
background: #fffcf5;
}
/* 下拉箭头图标模拟 */
.s_type i {
position: absolute;
right: 8px;
top: 18px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid #999;
}
/* 增加hover效果样式 */
.s_type i.hover {
border-top: none;
border-bottom: 5px solid #ff6600; /* 箭头向上变色 */
}
/* 下拉列表 */
.s_type ul {
display: none; /* 默认隐藏 */
position: absolute;
top: 42px;
left: -1px;
width: 90px; /* 与父级同宽 */
background: #fff;
border: 1px solid #ddd;
z-index: 999;
}
.s_type ul li {
height: 32px;
line-height: 32px;
text-align: center;
color: #666;
font-size: 13px;
cursor: pointer;
}
.s_type ul li:hover {
background: #f2f2f2;
color: #ff6600;
}
/* --- 中间输入框 (.s_input) --- */
.s_input {
flex: 1; /* 占据剩余空间 */
}
.s_input p {
height: 100%;
}
.s_intext {
width: 100%;
height: 42px;
line-height: 42px;
border: none;
outline: none;
text-indent: 10px;
font-size: 14px;
color: #333; /* 默认提示文字颜色 */
}
/* 输入时的文字颜色 */
.s_intext.active {
color: #333;
}
/* --- 右侧按钮 (.s_btn) --- */
.s_btn {
width: 96px;
}
.s_btn button {
width: 96px;
height: 42px;
border: none;
background: #B45309;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.s_btn button:hover {
background: #e55c00;
}
/* --- 热门搜索弹窗 (.pop) --- */
.pop {
display: none; /* 默认隐藏 */
position: absolute;
top: 45px;
left: 0;
width: 100%;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 15px;
box-sizing: border-box;
z-index: 998;
}
.pop h3 {
font-size: 14px;
color: #999;
margin-bottom: 10px;
font-weight: normal;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.pop h3 i {
float: right;
cursor: pointer;
font-family: Arial;
}
.pop h3 i:hover { color: #ff6600; }
.pop dl { margin-bottom: 10px; overflow: hidden; }
.pop dt { float: left; width: 50px; color: #ff6600; font-weight: bold; font-size: 14px; line-height: 24px;}
.pop dd { overflow: hidden; line-height: 24px;}
.keyword-btn {
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 4px 8px !important;
margin: 0 2px !important;
color: #4b5563 !important;
cursor: pointer !important;
font-size: 14px !important;
font-family: inherit !important;
text-decoration: none !important;
transition: all 0.2s;
display: inline-block;
appearance: none;
-webkit-appearance: none;
}
/* 模拟 a 标签 hover 效果 */
.keyword-btn:hover {
color: #009199 !important;
text-decoration: underline !important;
}
/* 高亮关键词样式 (橙红色) */
.keyword-btn.hot {
color: #f97316 !important;
font-weight: bold !important;
}
/* 辅助样式 */
.mt20 { margin-top: 10px; }
.phone-box { display: flex; align-items: center; width: 320px; justify-content: flex-end; }
.headset-icon { width: 32px; height: 32px; position: relative; margin-right: 12px; }
.headset-icon .beam { position: absolute; top: 0; left: 4px; width: 24px; height: 22px; border: 2.5px solid #b5b5b5; border-bottom: none; border-radius: 12px 12px 0 0; }
.headset-icon .ear-l, .headset-icon .ear-r { position: absolute; bottom: 4px; width: 8px; height: 15px; border: 2.5px solid #b5b5b5; border-radius: 4px; background: #fff; z-index: 2; }
.headset-icon .ear-l { left: 0; }
.headset-icon .ear-r { right: 0; }
.headset-icon::after { content: ""; position: absolute; bottom: 8px; left: 6px; width: 20px; height: 2px; background: #eee; }
.phone-text { text-align: right; }
.phone-text p { font-size: 14px; color: #333; margin-bottom: 0px; line-height: 1; letter-spacing: 0px; }
.phone-text p span { margin-left: 12px; font-family: "Arial", sans-serif; }
.phone-text h2 {
font-size: 26px;
color: #009199;
font-weight: normal;
}
/* --- 4. 底部主导航 (宽度完全锁定) --- */
.main-nav { background: #00b5be; height: 40px; position: relative; z-index: 500; }
.nav-inner { display: flex; align-items: flex-start; }
.nav-cat-title { width: 220px; background: #007a75; color: #fff; font-size: 18px; height: 40px; line-height: 40px; padding-left: 20px; display: flex; align-items: center; }
.icon-four-bars { width: 16px; height: 14px; margin-right: 12px; position: relative; flex-shrink: 0; }
.icon-four-bars::before { content: ""; position: absolute; width: 100%; height: 2px; background: #fff; box-shadow: 0 4px 0 #fff, 0 8px 0 #fff, 0 12px 0 #fff; top: 0; }
.nav-menu { display: flex; flex: 1; height: 40px; }
.nav-menu > li { position: relative; text-align: center; }
.nav-menu > li > button {
display: inline-block;
padding: 0 15px; /* 根据你原来的间距调整 */
line-height: 40px; /* 确保和原来导航高度一致 */
color: #ffffff; /* 导航文字颜色 */
background: none;
border: none;
cursor: pointer;
/* --- 核心：修复字体变化的关键代码 --- */
font-family: inherit !important;
font-size: 16px !important; /* 或者使用 inherit */
font-weight: inherit !important;
-webkit-font-smoothing: antialiased;
text-decoration: none;
vertical-align: middle;
}
.nav-menu > li > button:hover { background: #009199; }
.nav-menu > li > a { display: block; line-height: 40px; color: #fff; font-size: 16px; }
.nav-menu > li > a:hover { background: #009199; }
.nav-item-home { width: 60px; } .nav-item-home a { width: 60px; }
.nav-item-common { width: 110px; } .nav-item-common a { width: 110px; }
.nav-menu .gl-item { margin-left: auto; background: #007a75; position: relative; }
.gl-item a { padding: 0 15px; }
.gl-item .arrow-icon { margin-left: 4px; }
.gl-item .arrow-icon::after { border-color: #fff; top: 0px; }
.gl-item:hover .arrow-icon::after { transform: rotate(-135deg); top: 3px; }
.gl-dropdown {
display: none;
position: absolute;
top: 40px;
right: 0;
width: 240px;
height: 360px;
background: #fff;
z-index: 2000;
color: #666;
}
.gl-item:hover .gl-dropdown { display: block; }
.gl-dropdown ul { display: flex; flex-wrap: wrap; border-left: 1px dashed #eee; border-top: 1px dashed #eee; height: 100%; }
.gl-dropdown li { width: 33.33% !important; height: 50px; line-height: 50px; text-align: center; border-right: 1px dashed #eee; border-bottom: 1px dashed #eee; box-sizing: border-box; }
.gl-dropdown li a { display: block; font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; width: 100% !important; }
.gl-dropdown li.hot a { color: #ff6600; }
.badge { position: absolute; top: -8px; right: 5px; padding: 0 3px; height: 16px; line-height: 16px; font-size: 10px; color: #fff; border-radius: 3px; font-style: normal; z-index: 100; pointer-events: none; }
.badge-hot { background: #ff4e00; }
.badge-new { background: #ffb400; }
.badge::after { content: ""; position: absolute; bottom: -3px; left: 5px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid inherit; }
.badge-hot::after { border-top-color: #ff4e00; }
.badge-new::after { border-top-color: #ffb400; }
/* 主容器 */
.main {
width: 1200px;
display: flex;
background: #fff;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
padding-bottom: 5px;
}
/* --- 左侧：线路分类区 --- */
.navbox {
width: 220px;
height: 441px;
position: relative;
z-index: 1000;
background: #fff;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-right-color: #b8e4e6;
border-bottom-color: #b8e4e6;
padding-right: 10px;
}
.nb_item {
width: 100%;
height: 88px;
border-bottom: 1px dashed #c8c8c8;
position: relative;
padding: 5px 5px 15px 30px; /* 修正：左侧留出52px，顶部18px确保不变形 */
z-index: 1002;
background: #fff;
}
.nb_item:last-child { border-bottom: none; }
/* 鼠标悬停：仅变色，保持结构稳定 */
.nb_item:hover {
background: #fff;
width: 221px;
margin-right: -1px;
border-top-color: #b8e4e6;
border-bottom: 1px solid #b8e4e6;
border-left: 3px solid #ffaa01;
z-index: 1005;
}
.nb_item:last-child:hover {
border-bottom: none; /* 移除最后一项悬停时的底边框 */
}
.nb_item:hover h3 a { color: #ffaa01; }
/* 文字样式校准 */
.nb_item h3 a { color: #00807c; display: inline-block; }
.nb_item h3 { height: 26px; line-height: 26px; font-size: 15px; font-weight: bold; position: relative; margin-bottom: 10px; }
.nb_item h3 span { color: #00807c; display: inline-block; }
.nb_item p span { padding-right: 6px; font-size: 13px; color: #333; }
.nb_item p span:hover { color: #33b5e5; }
.nb_item h3 i { position: absolute; right: 0; top: 10px; width: 6px; height: 6px; border-top: 1.5px solid #ccd5db; border-right: 1.5px solid #ccd5db; transform: rotate(45deg); }
.nb_item p { display: flex; flex-wrap: wrap; width: 100%; }
.nb_item p a { padding-right: 6px; font-size: 13px; color: #333; }
.nb_item p a:hover { color: #33b5e5; }
/* 图标逻辑：绝对垂直居中 */
.nb_item::before {
content: "";
position: absolute;
left: 3px; /* 稍微向右移一点更美观 */
top: 50%;
margin-top: -26px; /* 高度22px的一半，实现完美垂直居中 */
width: 22px;
height: 22px;
background-repeat: no-repeat;
background-size: contain;
transition: background-image 0.2s;
}
/* 默认图标背景数据 */
.nb_go::before { background-image: url('data:image/svg+xml,'); }
.nb_xj::before { background-image: url('data:image/svg+xml,'); }
.nb_cj::before { background-image: url('data:image/svg+xml,'); }
.nb_camp::before { background-image: url('data:image/svg+xml,'); }
.nb_theme::before { background-image: url('data:image/svg+xml,'); }
/* 悬停时图标变色数据 */
.nb_go:hover::before { background-image: url('data:image/svg+xml,'); }
.nb_xj:hover::before { background-image: url('data:image/svg+xml,'); }
.nb_cj:hover::before { background-image: url('data:image/svg+xml,'); }
.nb_camp:hover::before { background-image: url('data:image/svg+xml,'); }
.nb_theme:hover::before { background-image: url('data:image/svg+xml,'); }
/* 弹出层对齐 */
.pl_item {
display: none;
position: absolute;
left: 218px;
width: 730px;
height: 441px;
background: #fff;
z-index: 1004;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-right-color: #b8e4e6;
border-bottom-color: #b8e4e6;
}
.pl_item dl {
display: flex;
flex-wrap: nowrap; /* 强制 dt 和 dd 在一行起始 */
align-items: flex-start;
line-height: 24px; /* 增加行高，换行后更美观 */
}
.pl_item dt {
white-space: nowrap;
margin-right: 15px;
font-weight: bold;
flex-shrink: 0; /* 防止标题被挤压 */
color: #333;
}
.pl_item dd {
margin: 0;
flex: 1;
white-space: normal; /* 允许 DD 内部内容正常换行 */
word-break: break-all;
}
.pl_item dd a {
display: inline-block; /* 链接作为块级元素更易点击和换行 */
}
.pl_item dd span {
margin: 0 5px;
color: #ccc;
}
.nb_item:nth-child(1) .pl_item { top: 0px; }
.nb_item:nth-child(2) .pl_item { top: -88px; }
.nb_item:nth-child(3) .pl_item { top: -176px; }
.nb_item:nth-child(4) .pl_item { top: -264px; }
.nb_item:nth-child(5) .pl_item { top: -352px; }
.nb_item:hover .pl_item { display: block; }
.pl_item div {
float: left;
height: 425px;
overflow: hidden;
padding-left: 15px;
}
.pl_item div dl {
overflow: hidden;
padding-top: 7px;
}
.pl_item div dl dt { font-size: 14px; color: #666; font-weight: bold; border-bottom: 1px solid #fafafa; font-family: "SimSun", "宋体", "Microsoft YaHei", "微软雅黑", "Verdana;", "Helvetica", "Arial Narrow"; }
.pl_item div dl dt { height: 30px; line-height: 30px; }
.pl_item div dl dt a { color: #666; }
.pl_item div dl dt a:hover { color: #991B1B; text-decoration: underline; }
.pl_item div dl dt span { margin: 0 6px; color: #f0f0f0; font-weight: normal; font-family: "SimSun", "宋体", "Microsoft YaHei", "微软雅黑", "Verdana;", "Helvetica", "Arial Narrow"; }
.pl_item div dl dd {
height: 30px;
line-height: 30px;
font-size: 12px;
color: #f0f0f0;
font-weight: normal;
}
.pl_item div dl dd a { color: #666; }
.pl_item div dl dd a:hover { color: #991B1B; text-decoration: underline; }
.pl_item div dl dd span { margin: 0 6px; }
.pl_item div dl a.hot { color: #991B1B; }
/* --- 5. 幻灯片 (Banner) --- */
.probox { width: 720px; margin: 10px; position: relative; }
.pb_big { position: relative; width: 720px; height: 350px; overflow: hidden; background: #eee; border-radius: 4px; }
.pb_slide { width: 100%; height: 100%; }
.pb_slide li { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; display: none; }
.pb_slide li.active { opacity: 1; display: block; }
/* 兼容系统调用的图片样式 */
.pb_slide li img { width: 720px; height: 350px; object-fit: cover; display: block; }
.pb_slide li a { display: block; width: 100%; height: 100%; }
/* 图片上的文字叠层 */
.banner-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
padding: 40px 50px;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
font-family: "PingFang SC", "Microsoft YaHei";
z-index: 5;
}
.banner-top-line { font-size: 18px; letter-spacing: 12px; margin-bottom: 20px; color: #e0f7fa; font-weight: 300; }
.banner-main-title { display: flex; align-items: baseline; margin-bottom: 10px; }
.banner-main-title h2 { font-size: 68px; font-weight: 900; font-style: italic; margin-right: 15px; }
.banner-main-title span { font-size: 42px; color: #ffeb3b; font-weight: bold; }
.banner-badge {
display: inline-block;
background: linear-gradient(to right, #ff9800, #f44336);
padding: 4px 15px;
border-radius: 20px;
font-size: 14px;
margin-bottom: 15px;
box-shadow: 0 2px 10px rgba(255,152,0,0.4);
}
.banner-spots { font-size: 16px; color: #fff; opacity: 0.9; word-spacing: 10px; }
/* 底部导航色块 - 与图片 image_3c7517.png 一致 */
ol.pb_ctrl {
width: 700px;
height: 30px;
overflow: hidden;
position: absolute;
bottom: 10px;
left: 12px;
z-index: 6;
list-style: none;
font-size: 12px;
line-height: 30px;
}
.pb_ctrl li { float: left; margin: 0 2px; width: 170px; height: 30px; line-height: 30px; text-align: center; background: #fff; filter: alpha(opacity=80); opacity: 0.8; }
.pb_ctrl li a { display: block; width: 170px; height: 30px; text-align: center; }
.pb_ctrl li.active { filter: alpha(opacity=100); opacity: 1; background: #333; }
.pb_ctrl li.active a { color: #fff; }
/* --- 6. 下方小图区 (一行三图 + SEO优化) --- */
.pb_small { width: 100%; height: 70px; margin-top: 10px; }
.pb_small ul { display: flex; gap: 10px; height: 100%; }
.pb_small li { flex: 1; height: 100%; border-radius: 4px; overflow: hidden; position: relative; }
.pb_small li a { display: block; width: 100%; height: 100%; overflow: hidden; }
.pb_small li img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.4s ease;
}
.pb_small li:hover img { transform: scale(1.08); }
/* --- 右侧：功能区 --- */
.siteinfo {
width: 240px;
height: 430px;
margin-top: 10px;
margin-left: auto; /* 关键点：右对齐设置 */
display: flex;
flex-direction: column;
}
.si_top_box {
height: 350px;
border-right: 0; /* 根据要求：将卡片右边框设为 0 */
background: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
}
.si_data ul {
display: flex;
padding: 12px 0;
border: 1px solid #d4d4d4;
}
.si_data li { flex: 1; text-align: center; border-right: 1px solid #f2f2f2; }
.si_data li:last-child { border-right: none; }
.si_data h3 { font-size: 12px; color: #333; font-weight: normal; margin-bottom: 2px; }
/* 响应用户要求：数据数字增大，单位在右下角并对准中间 */
.si_data p { font-size: 24px; color: #b45309; line-height: 1; }
.si_data p i {
font-size: 12px;
font-style: normal;
margin-left: 2px;
vertical-align: 2px; /* 通过向上偏移 2px 实现"对准数字中间"的视觉效果 */
}
/* 功能图标样式 - 优化图标语义化 */
.si_trait {
padding-top: 10px;
padding-bottom: 10px;
}
.si_trait ul { display: flex; flex-wrap: wrap; gap: 8px; }
.si_trait li {
width: 116px; height: 32px; border: 1px solid #e6e6e6; border-radius: 4px;
display: flex; align-items: center; overflow: hidden; background: #fff;
transition: 0.2s;
}
.si_trait li i {
width: 32px; height: 100%; display: flex; align-items: center; justify-content: center;
background: #f9f9f9; border-right: 1px solid #eee;
}
.si_trait li i svg { width: 15px; height: 15px; fill: #999; transition: 0.2s; }
.si_trait li a { flex: 1; font-size: 14px; color: #666; text-align: center; }
/* 交互效果 */
.si_trait li:hover { border-color: #33b5e5; }
.si_trait li:hover a { color: #33b5e5; }
.si_trait li:hover i svg { fill: #33b5e5; }
/* 公告逐行向上滚动 */
.si_news {
overflow: hidden;
position: relative;
height: 36px;
font-size: 12px;
color: #b45309;
display: flex;
align-items: center;
padding-right: 5px;
}
.si_news p { font-weight: bold; margin-right: 5px; z-index: 2; background: #fff; display: flex; align-items: center; }
.si_news p svg { margin-right: 4px; }
.si_news_list {
position: absolute;
left: 65px;
top: 0;
width: 165px;
/* 核心修复：必须有过渡动画属性 */
transition: top 0.5s ease-in-out;
}
.si_news_list li {
height: 36px;
line-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #666;
}
/* --- 选项卡切换区域 --- */
.si_list { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.sl_tab {
display: flex;
height: 28px;
border-bottom: 1px solid #33b5e5;
}
.sl_tab a {
flex: 1;
text-align: center;
line-height: 28px;
font-size: 14px;
color: #333;
cursor: pointer;
border: 1px solid transparent;
border-bottom: none;
}
.sl_tab a.cur {
color: #0369A1 ;
background: #fff;
border: 1px solid #0369A1 ;
border-bottom: 1px solid #fff;
position: relative;
top: 0px;
z-index: 5;
height: 28px;
}
.sl_tab button{
flex: 1;
text-align: center;
line-height: 28px;
font-size: 14px;
color: #333;
cursor: pointer;
border: 1px solid transparent;
border-bottom: none;
background-color: #FFF;
}
.sl_tab button.cur {
color: #0369A1 ;
background: #fff;
border: 1px solid #0369A1 ;
border-bottom: 1px solid #fff;
position: relative;
top: 0px;
z-index: 5;
height: 28px;
}
.sl_con_wrapper { flex: 1; position: relative; overflow: hidden; background: #fff; }
.sl_con { display: none; height: 100%; }
.sl_con.active {
display: block;
height: 170px;
}
/* Q&A 内部样式 */
.sl_con_list { position: absolute; width: 100%; top: 0; left: 0; }
.sl_con_list li { height: 160px; display: flex; flex-direction: column; }
.sl_con_list h3 {
color: #1e9dc8;
font-size: 14px;
height: 28px;
line-height: 28px;
overflow: hidden;
margin-bottom: 2px;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
font-weight: normal;
}
.sl_con_list h3::before {
content: ""; position: absolute; left: 0; top: 8px; width: 2px; height: 12px; background: #33b5e5;
}
.sl_con_list h3 a:hover { color: #ff9d00; }
.sl_con_list span { display: flex; align-items: center; gap: 90px; font-size: 12px; color: #333; }
.sl_fo {
background: #f2f6f9;
padding: 2px 10px;
border-radius: 12px;
font-size: 11px;
color: #333;
font-style: normal;
display: inline-flex;
align-items: center;
}
.sl_fo::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 4px;
background-color: #33b5e5;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.sl_cs { font-style: normal; display: flex; align-items: center; }
.sl_cs::before {
content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 4px; background-color: #999;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
-webkit-mask-size: contain; mask-size: contain;
}
.sl_con_list p {
font-size: 12px;
color: #666;
line-height: 1.8;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
padding: 7px;
}
/* 玩转新疆列表样式 */
#sl_con_xj {
padding-top: 5px;
padding-right: 14px;
padding-bottom: 14px;
padding-left: 0px;
}
#sl_con_xj ul li { padding: 3px 0; border-bottom: 1px dotted #eee; font-size: 13px; color: #555; position: relative; padding-left: 10px; }
#sl_con_xj ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 3px; height: 3px; background: #33b5e5; border-radius: 50%; }
#sl_con_xj ul li a:hover { color: #33b5e5; text-decoration: underline; }
.si_qapic {
width: 240px; height: 84px; }
.si_qapic a { color: #fff; font-size: 15px; font-weight: bold; letter-spacing: 1px; }
/* 主容器 - 固定 1200px */
.repro {
width: 1200px;
margin: 0px auto;
display: flex;
justify-content: space-between; /* 使用两端对齐确保宽度精确分配 */
}
/* 左侧主内容区 - 固定 950px */
.rp_main {
width: 950px;
flex-shrink: 0;
padding-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #f0f0f0;
}
/* 标题导航条 */
.ex_nav {
border-bottom: 1px solid #991B1B;
display: flex;
justify-content: flex-start;
align-items: flex-end;
margin-bottom: 20px;
padding-bottom: 0;
height: 45px;
}
.ex_nav h2 {
font-size: 22px;
color: #C2410C ;
padding-bottom: 5px;
display: flex;
align-items: baseline;
flex-shrink: 0;
font-weight: normal;
}
.ex_nav h2 span {
font-size: 12px;
color: #065F46 ;
font-weight: normal;
margin-left: 18px;
}
.ex_nav ul {
display: flex;
margin-bottom: -2px;
margin-left: 300px;
}
.ex_nav ul li {
padding: 8px 25px;
cursor: pointer;
font-size: 14px;
color: #333;
border: 1px solid transparent;
border-bottom: 2px solid transparent;
transition: color 0.2s;
margin-left: 5px;
line-height: 1;
}
.ex_nav ul li.cur {
color: #991B1B;
background: #fff;
border-color: #991B1B;
border-bottom-color: #fff;
font-weight: bold;
}
/* 产品列表样式 */
.ex_box .ex_item { display: none; }
.ex_box .ex_item.cur { display: block; }
.ex_item ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
font-weight: normal;
}
.ex_item ul li { padding-bottom: 10px; transition: transform 0.3s, box-shadow 0.3s; background: #fff; }
.ex_item ul li:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.img-box { position: relative; width: 100%; height: 150px; overflow: hidden; }
.img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-mask {
position: absolute; left: 0; bottom: -100%; width: 100%; height: 50%;
background: rgba(0, 0, 0, 0.75); color: #fff; padding: 12px 15px;
transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none;
display: flex; align-items: center; justify-content: center; text-align: center;
}
.img-box:hover .intro-mask { bottom: 0; }
.intro-mask p { color: #fff !important; font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex_item h3 {
padding: 10px 10px 5px;
font-size: 14px;
height: 52px;
line-height: 1.4;
overflow: hidden;
font-weight: normal;
}
.price-box {
padding: 0 10px;
font-weight: normal;
color: #333;
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 12px;
}
.price-box span i em {
font-style: normal;
color: #991B1B;
font-size: 20px;
margin-right: 2px;
font-weight: 900;
}
.price-box span i {
color: #991B1B;
font-style: normal;
font-size: 12px;
font-weight: 600;
}
/* 右侧侧边栏 - 固定 232px */
.rp_side {
width: 232px;
flex-shrink: 0;
background: #fffcfa;
margin-top: 28px;
}
.rp_item { position: relative; }
/* 标题样式：胶囊形+横向贯穿线 */
.rp_item .title-wrap {
position: relative;
text-align: center;
margin-bottom: 10px;
}
.rp_item .title-wrap::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: #991B1B;
z-index: 1;
}
.rp_item .title-wrap h3 {
display: inline-block;
position: relative;
z-index: 2;
background: #fff;
color: #991B1B;
border: 1px solid #991B1B;
border-radius: 16px;
padding: 3px 64px; /* 缩小一点 padding 以适应 232px 宽度 */
font-size: 16px;
font-weight: normal;
}
/* 推荐线路联动 */
.rp_list { min-height: 250px; padding: 0 5px; }
.rp_list > div { display: none; }
.rp_list > div.cur { display: block; }
.rp_recommend_box { position: relative; margin-bottom: 10px; }
.rp_recommend_box img { width: 100%; border-radius: 4px; display: block; }
.rp_recommend_box .price_tag {
position: absolute; right: 0; bottom: 8px;
background: rgba(255,255,255,0.9); color: #991B1B;
padding: 2px 8px; font-size: 12px; border-radius: 4px 0 0 4px; font-weight: bold;
}
info-date { font-weight: normal; color: #991B1B; font-size: 13px; margin: 8px 0 5px; }
.rp_list h4 { font-size: 14px; color: #333; line-height: 2.9; }
/* 快速查询还原 - 三排排版与虚线 */
.rp_attr { min-height: 200px; padding: 0 5px; }
.rp_attr > div { display: none; }
.rp_attr > div.cur { display: block; }
.rp_attr dl {
padding: 15px 0 15px 40px;
position: relative;
}
.rp_attr dl:first-child { padding-top: 0; }
.rp_attr dl + dl {
border-top: 1px dashed #ddd;
}
/* 图标定位 */
.rp_attr dl::before {
content: "";
position: absolute;
left: 5px;
top: 18px;
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.7;
}
.rp_attr dl:first-child::before { top: 3px; }
/* 行程图标 - 质感蓝色日历 */
.rp_attr dl.date::before {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Crect x="3" y="4" width="18" height="18" rx="2" ry="2" fill="%233498db"/%3E%3Cpath d="M3 10h18V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2z" fill="%232980b9"/%3E%3Crect x="7" y="2" width="2" height="6" rx="1" fill="%23ecf0f1"/%3E%3Crect x="15" y="2" width="2" height="6" rx="1" fill="%23ecf0f1"/%3E%3Ccircle cx="12" cy="16" r="3" fill="white" opacity="0.3"/%3E%3C/svg%3E');
}
/* 目的地图标 - 亮红色定位针 */
.rp_attr dl.des::before {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="%23e74c3c"/%3E%3Ccircle cx="12" cy="9" r="3" fill="white"/%3E%3C/svg%3E');
}
/* 价格图标 - 亮橙色斜向标签 */
.rp_attr dl.price::before {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" fill="%23f39c12"/%3E%3Ccircle cx="7" cy="7" r="2" fill="white"/%3E%3C/svg%3E');
}
.rp_attr dd p {
display: flex;
justify-content: flex-start;
gap: 10px;
margin-bottom: 8px;
}
.rp_attr dd p:last-child { margin-bottom: 0; }
.rp_attr dd a {
font-size: 14px; /* 缩小字体以适应 232px 宽度 */
color: #556677;
white-space: nowrap;
}
.rp_attr dd a:hover { color: #991B1B; }
/* --- 推荐线路区域修复版 --- */
/* 1. 容器基础高度，防止加载时跳动 */
#recommendTabs { min-height: 200px; }
/* 2. 默认隐藏所有内容，仅显示带有 .cur 的项 */
/* 注意：这里合并了选择器，去掉了不必要的重复定义 */
#recommendTabs > div {
display: none;
}
#recommendTabs > div.cur {
display: block !important;
}
/* 3. 列表项排版：间距与虚线 */
.rec-card {
border-bottom: 1px dashed #eee;
padding-bottom: 12px;
}
/* 最后一项去掉虚线，保持整洁 */
.rec-card:last-child {
border-bottom: none;
}
/* 4. 图片容器：必须是 relative，否则价格标签会乱飞 */
.rec-img {
position: relative;
width: 100%;
height: 135px;
border-radius: 4px;
overflow: hidden;
background: #f0f0f0;
}
.rec-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 5. 价格标签：精准定位在图片右下角 */
.rec-price-tag {
position: absolute;
right: 0;
bottom: 10px;
background: rgba(255, 255, 255, 0.95); /* 半透明白底，更有高级感 */
color: #991B1B;
padding: 2px 10px;
font-size: 12px;
font-weight: bold;
border-radius: 4px 0 0 4px; /* 仅左侧圆角 */
z-index: 5;
box-shadow: -1px 1px 3px rgba(0,0,0,0.1);
}
/* 确保推荐线路和快速查询默认隐藏，仅显示当前项 */
#recommendTabs > div, #searchTabs > div {
display: none;
}
/* 强制激活项显示 */
#recommendTabs > div.cur, #searchTabs > div.cur {
display: block !important;
}
/*国内旅游*/
/* --- 2. 核心展示区域布局 --- */
.route { width: 1200px; margin: 20px auto; display: flex; justify-content: space-between; align-items: flex-start; }
.routebox {
width: 950px;
border-bottom: 1px solid #f0f0f0;
}
.routeside { width: 232px; background: #faffff; flex-shrink: 0; }
.rb_area {
padding-bottom: 26px;
}
/* --- 3. 导航条极致还原 (指示器对齐文字 + 边框断路) --- */
.rb_nav {
border-bottom: 1px solid #5cc7cc;
display: flex;
align-items: center;
height: 40px;
margin-bottom: 15px;
position: relative;
background: #fff;
}
.rb_nav h2 {
font-size: 22px;
color: #5cc7cc;
font-weight: normal;
display: flex;
align-items: baseline;
flex-shrink: 0; /* 标题部分绝对固定 */
}
.rb_nav h2 span { font-size: 12px; color: #999; font-weight: normal; margin-left: 12px; letter-spacing: 1px; }
.rb_nav ul { display: flex; height: 100%; align-items: center; }
.rb_nav ul li { position: relative; height: 100%; padding: 0 8px; display: flex; align-items: center; cursor: pointer; }
.rb_nav ul li a {
display: inline-block;
font-size: 15px;
color: #303030;
transition: color 0.2s;
position: relative;
z-index: 10;
font-weight: normal;
}
.rb_nav ul li:hover a, .rb_nav ul li.cur a { color: #991B1B; }
.rb_nav ul li.cur a::before {
content: "";
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 2px;
background: #fff;
z-index: 5;
}
.rb_nav ul li.cur a::after {
content: "";
position: absolute;
bottom: -11px;
left: 0;
width: 100%;
height: 8px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='8' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpolyline points='0,8 46,8 50,2 54,8 100,8' fill='none' stroke='%23ff6600' stroke-width='3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 6;
}
/* --- 4. 右侧分类随动胶囊逻辑 --- */
.rb_nav_right { margin-left: auto; display: flex; align-items: center; }
.rb_nav_right a {
font-size: 13px; color: #991B1B; padding: 4px 9px;
border-radius: 20px; transition: all 0.2s ease; cursor: pointer;
display: inline-block; white-space: nowrap;
}
.rb_nav_right a:hover { background: #5cc7cc !important; color: #fff !important; }
.rb_nav_right:not(:hover) a.active { background: #00b7bf; color: #fff !important; }
.rb_nav_right:hover a.active:not(:hover) { background: transparent; color: #991B1B !important; }
/* --- 5. 左侧内容布局与文字链接列表 --- */
.rb_box { display: flex; justify-content: space-between; }
.rb_side { width: 224px; height: 360px; overflow: hidden; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.rb_side img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block; }
.rb_main { width: 710px; }
.rb_mainbox ul { display: flex; justify-content: space-between; }
.rb_mainbox li { width: 224px; background: #fff; }
.rb_mainbox li img { width: 224px; height: 150px; object-fit: cover; border-radius: 4px; display: block; }
.rb_mainbox h3 { padding: 12px 0 6px; font-size: 14px; height: 54px; line-height: 1.5; overflow: hidden; font-weight: normal; color: #333; }
.rb_list_wrap { margin-top: 10px; border-top: 1px dashed #eee; padding-top: 15px; }
.rb_list_wrap ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.rb_list_wrap li { display: flex; justify-content: space-between; align-items: flex-start; border-left: 1px solid #5cc7cc; padding-left: 12px; }
.rb_list_info h4 {
font-size: 15px;
color: #00BFFF;
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
}
.rb_list_meta { gap: 15px; font-size: 12px; color: #999; }
.rb_list_meta span { display: inline-flex; align-items: center; padding-left: 18px; background-repeat: no-repeat; background-position: left center; background-size: 14px; }
/* 图标 SVG Data-URI */
.meta_loc { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.meta_day { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E"); }
.meta_hot { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); }
.rb_list_price {
color: #991B1B;
font-size: 15px;
white-space: nowrap;
margin-left: 10px;
font-weight: 900;
}
/* --- 6. 右侧侧边栏线路排行 (循环变色逻辑) --- */
.rs_item { margin-bottom: 25px; position: relative; }
.rs_title_pill { position: relative; text-align: center; margin: 22px 0 10px; }
.rs_title_pill::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #5cc7cc; opacity: 0.3; z-index: 1; }
.rs_title_pill h3 {
display: inline-block;
position: relative;
z-index: 2;
background: #fff;
border: 1px solid #5cc7cc;
border-radius: 20px;
padding: 2px 62px;
font-size: 16px;
color: #5cc7cc;
font-weight: normal;
line-height: 27px;
}
/* 关键：启用 CSS 计数器，即便 HTML 是一模一样的循环代码，也会自动从 1 开始数 */
.rs_ranking_list { padding: 2px 12px 0px; counter-reset: rank-count; }
.rs_ranking_list li {
border-bottom: 1px dashed #eee;
counter-increment: rank-count;
}
.rs_ranking_list li:last-child { border-bottom: none; }
/* 排行项全 A 标签封装，SEO 友好 */
.rs_ranking_list li a.rs_rank_link {
padding: 13px 0;
display: flex;
align-items: flex-start;
width: 100%;
transition: 0.2s;
}
.rs_ranking_list li a.rs_rank_link:hover { background: #fcfdfe; }
.rs_ranking_list li a.rs_rank_link:hover h4 { color: #991B1B; }
/* 图片容器固定为 66*66 */
.rs_img_box { position: relative; width: 66px; height: 66px; flex-shrink: 0; border-radius: 2px; overflow: hidden; margin-right: 12px; }
.rs_img_box img { width: 100%; height: 100%; object-fit: cover; }
/* 关键：勋章样式 (精致书签形状) */
.rs_top_medal {
position: absolute; top: 0; left: 0; width: 28px; height: 25px;
color: #fff; z-index: 5;
text-align: center; font-family: "Arial", sans-serif; font-weight: bold;
/* 制作底部向内凹陷的尖角 */
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.rs_top_medal::before { content: "TOP"; font-size: 7px; line-height: 1; transform: scale(0.8); margin-top: -2px; }
/* 勋章里的数字由 CSS 计数器全自动生成 */
.rs_top_medal::after { content: counter(rank-count); font-size: 13px; line-height: 1; display: block; }
/* 关键变色：利用 :nth-child 捕获循环后的物理位置，给前三名分配固定颜色 */
.rs_ranking_list li:nth-child(1) .rs_top_medal { background: #ff4e00; } /* 第1名：红橙 */
.rs_ranking_list li:nth-child(2) .rs_top_medal { background: #ff8400; } /* 第2名：亮橙 */
.rs_ranking_list li:nth-child(3) .rs_top_medal { background: #ffaa01; } /* 第3名：金黄 */
.rs_ranking_list li:nth-child(n+4) .rs_top_medal { background: #bbb; } /* 第4名以后：灰色 */
.rs_info { flex: 1; min-width: 0; }
.rs_info h4 { font-size: 13px; line-height: 1.4; height: 36px; overflow: hidden; margin-bottom: 5px; font-weight: normal; color: #333; transition: color 0.2s; }
.rs_stats { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.rs_stats .view { color: #999; }
.rs_stats .price {
color: #991B1B;
font-weight: 900;
}
/* --- 7. 侧边栏树状分类 (方形连接点) --- */
.rs_tree_container { position: relative; }
.rs_tree_container::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: #5cc7cc;
opacity: 0.3;
z-index: 1;
transform: translateX(-50%); /* 核心修复：确保1px线条在数学中心，实现绝对居中 */
}
.rs_tree_row { display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; margin: 17px 0; }
.rs_tree_row a { width: 85px; text-align: center; font-size: 13px; color: #555; transition: color 0.2s; }
.rs_tree_row a:hover { color: #5cc7cc; }
.rs_tree_marker { width: 7px; height: 7px; border: 1px solid #5cc7cc; background: #fff; margin: 0 10px; flex-shrink: 0; }
/* --- 1. 三大板块总导航 (psnav) 极致精简版 --- */
.psnav {
width: 1200px;
margin: 20px auto 0;
border: 1px solid #e1e1e1;
height: 60px;
}
.psnav ul {
display: flex;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.psnav li {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: .3s;
}
/* 图标尺寸控制 */
.psnav li i {
width: 35px;
height: 35px;
margin-right: 12px;
display: flex;
align-items: center;
opacity: .8;
transition: .3s;
}
.psnav li i svg { width: 100%; height: 100%; fill: currentColor; } /* 图标随文字变色 */
/* 状态切换 */
.psnav li:hover { background: #f5f5f5; }
.psnav li:hover i, .psnav li.cur i { opacity: 1; }
/* 2. 核心颜色定义 */
.ps_rc { color: #1E90FF; } /* 租车蓝 */
.ps_htl { color: #92400E; } /* 酒店金 */
.ps_tkt { color: #009933; } /* 景点绿 */
.clear { clear: both; }
/* SEO: Visually hidden h1 for search engines */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* ================= Layout Containers ================= */
.proserver {
width: 1200px;
margin: 20px auto;
}
.ps_item {
background: #fff;
margin-bottom: 10px;
}
/* --- New: Scroll Reveal Animation Styles (滚动显现动画) --- */
.scroll-reveal {
opacity: 0; /* 初始隐藏 */
transform: translateY(30px); /* 初始位置向下偏移30px */
transition: all 0.8s ease-out; /* 0.8秒缓动动画 */
will-change: opacity, transform; /* 性能优化 */
}
.scroll-reveal.visible {
opacity: 1; /* 显示 */
transform: translateY(0); /* 回到原位 */
}
/* Clearfix for internal floats */
.ps_item::after, .ps_box::after, .ps_nav::after {
content: "";
display: block;
clear: both;
}
.ps_box {
padding: 10px 0;
}
/* --- Column Widths (Per User Request) --- */
/* Main Content (Left visually in standard web, but user called it 950) */
.ps_main {
float: left;
width: 950px;
border-bottom: 1px solid #ddd; /* Visual separator */
padding-bottom: 12px;
}
/* Sidebar (Right visually, user called it 232) */
.ps_side {
float: right;
width: 232px;
background: #fafcff;
}
/* ================= Section 1: Navigation Bar (The Header Strip) ================= */
.ps_nav {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #bfa15f;
position: relative;
}
/* Title Area */
.ps_nav h2 {
float: left;
font-size: 20px;
color: #333;
margin-right: 20px;
font-weight: bold;
}
.ps_nav h2 span {
font-size: 12px;
color: #333;
margin-left: 10px;
font-weight: normal;
}
/* Steps Area (Rent Process) */
.ps_nav dl {
float: left;
color: #888;
font-size: 12px;
margin-right: 30px;
}
.ps_nav dl dt, .ps_nav dl dd { display: inline-block; }
.ps_nav dl dt { color: #333; font-weight: bold; margin-right: 5px; }
/* --- CAPSULE BUTTONS (The Core Request) --- */
/* Center Tabs (Car Types / Hotel Stars) */
.ps_nav div {
float: left;
}
.ps_nav div p a {
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 15px;
margin: 12px 5px 0 0;
border-radius: 13px; /* Full Capsule Rounding */
font-size: 14px;
color: #666;
background-color: transparent;
cursor: pointer;
transition: all 0.3s ease;
}
/* Active/Hover State for Capsules */
.ps_nav div p a.cur,
.ps_nav div p a:hover {
background-color: #ff9900; /* Orange highlight */
color: #fff;
text-decoration: none;
}
/* Different Colors for different sections if needed */
.ps_hotel .ps_nav div p a.cur { background-color: #bfa15f; } /* Hotel Gold */
.ps_ticket .ps_nav div p a.cur { background-color: #009933; } /* Ticket Green */
/* Right Side Tabs (Guides/Strategy) embedded in Header */
.ps_nav ul {
float: right;
width: 232px; /* Matches sidebar width */
text-align: center;
}
.ps_nav ul li {
display: inline-block;
margin: 0 5px;
}
.ps_nav ul li a {
display: inline-block;
padding: 0 10px;
height: 50px;
font-size: 14px;
font-weight: bold;
color: #333;
border-bottom: 3px solid transparent;
cursor: pointer;
}
/* Tab Active State */
.ps_nav ul li.cur a {
color: #ff9900;
border-bottom-color: #ff9900;
}
/* Hotel Section Tabs color */
.ps_hotel .ps_nav ul li.cur a { color: #bfa15f; border-bottom-color: #bfa15f; }
.ps_ticket .ps_nav ul li.cur a { color: #009933; border-bottom-color: #009933; }
/* ================= Section 2: Main Content (The Images Grid) ================= */
/* The logic: 1 Large item (dt) + 3 Small items (dd) in a row */
.ps_main dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
.ps_main dl:last-child {
margin-bottom: 0;
}
/* Large Item (Leftmost) - 350px width */
.ps_main dl dt {
width: 350px;
float: left; /* Fallback */
margin-right: 15px;
position: relative;
}
/* Small Items */
.ps_main dl dd {
width: 180px;
float: left; /* Fallback */
margin-right: 15px;
}
.ps_main dl dd:last-child {
margin-right: 0;
}
/* Common Styles for Image Cards */
.ps_comm, .ps_main dl dd {
background: #fff;
transition: transform 0.2s;
}
/* Make sure ps_comm (Large card container) is relative for absolute positioning */
.ps_comm {
position: relative;
width: 350px;
height: 196px; /* Explicit height helps with layout stability */
overflow: hidden; /* Ensures image doesn't spill */
}
.ps_comm:hover, .ps_main dl dd:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
/* Images */
.ps_main img {
width: 350px;
height: 196px;
display: block;
border-radius: 4px;
}
.ps_main dl dd img {
width: 180px;
height: 120px;
display: block;
border-radius: 4px;
}
/* ================== LARGE IMAGE OVERLAY STYLE (NEW) ================== */
/* This applies the user's specific CSS to the text container inside large images */
.ps_comm .overlay-box {
width: 278px;
height: 54px;
padding: 2px 8px; /* Slight adjust to 8px horizontal padding for text breathing room */
background: rgba(255, 255, 255, 0.8);
position: absolute;
bottom: 0px;
left: 32px; /* Per user instruction */
border-top-left-radius: 2px;
border-top-right-radius: 2px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
/* Top Row inside Overlay: Title + Price */
.ps_comm .overlay-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.ps_comm .overlay-top h3 {
font-size: 14px;
font-weight: bold;
color: #333;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.ps_comm .overlay-top .price {
font-size: 16px;
font-weight: bold;
color: #ff6600;
}
.ps_comm .overlay-top .price em {
font-style: normal;
}
/* Bottom Row inside Overlay: Subtitle + Focus Button */
.ps_comm .overlay-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.ps_comm .overlay-bottom h6 {
font-size: 12px;
color: #666;
font-weight: normal;
margin: 0;
}
.ps_comm .overlay-bottom .focus-btn {
background-color: #ff6600;
color: #fff;
font-size: 12px;
border-radius: 10px; /* Capsule shape */
line-height: 1.2;
width: 102px;
padding-top: 1px;
padding-right: 8px;
padding-bottom: 1px;
padding-left: 8px;
}
/* ================== SMALL CARD STYLES (UNCHANGED) ================== */
/* Text Content in Small Cards */
.ps_main dl dd h3 {
font-size: 16px;
margin: 8px 0 5px;
height: 22px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.info-box {
font-size: 12px;
color: #999;
font-weight: normal;
margin-bottom: 5px;
}
.ps_main dl dd p {
display: flex;
justify-content: space-between;
align-items: center;
color: #333;
font-size: 12px;
}
.ps_main dl dd p span em {
font-style: normal;
font-size: 18px;
font-weight: 900;
color: #991B1B;
margin-right: 2px;
}
/* ================= Section 3: Sidebar (Right Column) ================= */
/* Sidebar List Content */
.ps_art {
display: none;
padding-right: 10px;
padding-left: 10px;
}
.ps_art.cur {
display: block; /* Show active */
}
.ps_art ul li {
line-height: 30px;
padding-left: 10px;
position: relative;
}
.ps_art ul li::before {
content: "•";
color: #ccc;
position: absolute;
left: 0;
}
.ps_art ul li a { font-size: 13px; }
/* Custom Form (Car Rental Specific) */
/* ================= 定制租车模块样式 (1:1 还原) ================= */
/* 容器去色，保持清爽 */
.custom-rental-box {
}
/* --- 标题区域 (胶囊 + 横线) --- */
.cr-title {
position: relative;
text-align: center;
margin-bottom: 23px;
height: 30px;
}
/* 背景横线 */
.cr-title::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #7b9be8; /* 浅蓝色线条 */
z-index: 0;
}
/* 胶囊标题实体 */
.cr-title h3 {
position: relative;
z-index: 1;
display: inline-block;
padding: 0 70px;
height: 30px;
line-height: 28px; /* 垂直居中 */
background-color: #fff; /* 白底遮住横线 */
border: 1px solid #7b9be8; /* 蓝色边框 */
border-radius: 15px; /* 大圆角形成胶囊状 */
color: #5b7ce3; /* 蓝色文字 */
font-size: 16px;
font-weight: normal;
margin: 0;
box-sizing: border-box;
}
/* --- 表单区域 --- */
.cr-form {
padding-top: 0;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}
.cr-row {
display: flex;
align-items: center;
margin-bottom: 12px;
}
/* 标签样式 (右对齐，深灰色) */
.cr-row label {
width: 70px;
text-align: right;
margin-right: 10px;
font-size: 14px;
color: #555;
}
/* 输入框样式 (细边框) */
.cr-row input {
flex: 0; /* 占满剩余宽度 */
height: 24px;
border: 1px solid #ddd; /* 浅灰边框 */
padding: 0 0px;
outline: none;
font-size: 12px;
color: #666;
border-radius: 2px;
}
.cr-row input:focus {
border-color: #ff9900;
}
/* --- 提交按钮 (橙色圆角) --- */
.cr-row.submit-row {
justify-content: center; /* 按钮居中 */
margin-top: 15px;
margin-bottom: 0;
}
.cr-row button {
width: 100px;
height: 32px;
background-color: #ff9900; /* 亮橙色 */
color: #fff;
border: none;
border-radius: 4px; /* 圆角 */
font-size: 15px;
cursor: pointer;
transition: background-color 0.3s;
}
.cr-row button:hover {
background-color: #e68a00;
}
/* City Selector (Hotel Sidebar) */
.ph_area {
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
}
.ph_area ul { overflow: hidden; margin-bottom: 10px; }
.ph_area ul li { float: left; width: 100%; }
.ph_area ul li a {
float: left;
margin-right: 8px;
font-size: 13px;
color: #666;
}
.ph_area input[type="text"] {
width: 70%;
border: 1px solid #ddd;
height: 26px;
}
.ph_area button {
width: 25%;
background: #8e7a56;
color: #fff;
border: none;
height: 26px;
cursor: pointer;
}
/* ================= 修复版：侧边栏选项卡样式 (解决文字消失问题) ================= */
/* 1. 容器定位 */
.ps_nav .sidebar-tabs {
float: right;
width: 232px;
height: 50px;
padding-top: 15px;
box-sizing: border-box;
text-align: center;
border-bottom: 1px solid transparent;
margin: 0;
}
/* 2. 列表项布局 */
.ps_nav .sidebar-tabs li {
float: left;
width: 50%;
margin: 0;
padding: 0;
list-style: none;
display: block;
}
/* 3. 链接（按钮）基础样式 */
.ps_nav .sidebar-tabs li a {
display: block;
width: 100%;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #333; /* 默认黑色文字 */
background: transparent;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s;
font-weight: normal;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* ================= 各板块配色方案 (修复Hover冲突) ================= */
/* --- 1. 租车板块 (蓝色 #5b7ce3) --- */
.ps_car .sidebar-tabs { border-bottom-color: #5b7ce3; }
/* 选中状态：蓝底白字 */
.ps_car .sidebar-tabs li.cur a {
background-color: #5b7ce3;
color: #fff !important; /* 强制白色，防止被覆盖 */
}
/* 鼠标悬停（仅针对未选中的）：文字变蓝 */
.ps_car .sidebar-tabs li:not(.cur) a:hover {
color: #5b7ce3;
}
/* 鼠标悬停（针对已选中的）：保持白字 */
.ps_car .sidebar-tabs li.cur a:hover {
color: #fff;
}
/* --- 2. 酒店板块 (金色 #a87b08) --- */
.ps_hotel .sidebar-tabs { border-bottom-color: #a87b08; }
/* 选中状态：金底白字 */
.ps_hotel .sidebar-tabs li.cur a {
background-color: #a87b08;
color: #fff !important;
}
/* 鼠标悬停（仅针对未选中的）：文字变金 */
.ps_hotel .sidebar-tabs li:not(.cur) a:hover {
color: #a87b08;
}
/* 鼠标悬停（针对已选中的）：保持白字 */
.ps_hotel .sidebar-tabs li.cur a:hover {
color: #fff;
}
/* --- 3. 门票板块 (绿色 #009933) --- */
.ps_ticket .sidebar-tabs { border-bottom-color: #009933; }
/* 选中状态：绿底白字 */
.ps_ticket .sidebar-tabs li.cur a {
background-color: #009933;
color: #fff !important;
}
/* 鼠标悬停（仅针对未选中的）：文字变绿 */
.ps_ticket .sidebar-tabs li:not(.cur) a:hover {
color: #009933;
}
/* 鼠标悬停（针对已选中的）：保持白字 */
.ps_ticket .sidebar-tabs li.cur a:hover {
color: #fff;
}
/* ================= Colors per Section ================= */
/* Hotel Override */
.ps_hotel .ps_nav h2 { color: #8e7a56; } /* Gold/Brown title */
.ps_hotel .ps_nav h2 span {
color: #a87b08;
}
.ps_hotel p span em { color: #ff6600; } /* Price is always orange usually */
/* Ticket Override */
.ps_ticket .ps_nav h2 { color: #009933; } /* Green title */
/*视觉加载*/
/* --- 新增：视差加载动画样式 (追加到文件底部即可) --- */
/* 选中您想做动画的板块类名，例如 .rb_area (国内/新疆游), .ps_item (租车/酒店), .rs_item (侧边栏) */
.rb_area, .ps_item, .rs_item {
opacity: 0; /* 初始隐藏 */
transform: translateY(50px); /* 初始下沉50像素 */
transition: all 1s ease-out; /* 1秒慢进慢出动画 */
will-change: opacity, transform; /* 性能优化 */
}
/* 动画触发后的状态 */
.rb_area.visible, .ps_item.visible, .rs_item.visible {
opacity: 1; /* 显示 */
transform: translateY(0); /* 回位 */
}
/* ================= Visual Loading (视觉加载 - 滚动视差) ================= */
/* 初始状态：透明且下沉 */
.scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
will-change: opacity, transform;
}
/* 激活状态：显示并回位 */
.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* SEO: 视觉隐藏的 H1 标签 */
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
/* ================= 原有样式 (保持不变) ================= */
footer {
width: 100%;
background: #fff;
/* 移除了原有的 animation: fadeIn，改用 scroll-reveal 控制 */
border-top: 1px solid #e0e0e0;
}
/* ================= Top Bar (Service Features) ================= */
.footbarser {
width: 100%;
background-color: #009f9d;
height: 70px;
border-bottom: 1px solid #008f8d;
}
.fb_ser {
width: 1200px;
margin: 0 auto;
height: 100%;
}
.fb_ser ul {
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
padding: 0; margin: 0; list-style: none;
background: #009199;
}
.fb_ser li {
flex: 1;
height: 50px;
border-right: 1px solid rgba(255,255,255,0.3);
display: flex;
justify-content: center;
align-items: center;
}
.fb_ser li:last-child {
border-right: none;
}
.fb_ser dl {
display: flex;
align-items: center;
color: #fff;
margin: 0;
}
.fb_ser dt {
width: 46px;
height: 46px;
border: 2px solid rgba(255,255,255,0.6);
border-radius: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-right: 12px;
}
.fb_ser dt svg {
width: 24px;
height: 24px;
fill: #fff;
}
.fb_ser dd p {
font-size: 16px;
font-weight: bold;
margin: 0 0 4px 0;
}
.fb_ser dd span {
font-size: 12px;
color: rgba(255,255,255,0.8);
}
/* ================= Middle Menu (Links) ================= */
.footbarmenu {
background-color: #fff;
border-bottom: 1px solid #eee;
width: 100%;
margin-bottom: 20px;
padding-top: 30px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
}
.fb_menu {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.fb_menu > ul {
display: flex;
width: 75%;
padding: 0; margin: 0; list-style: none;
}
.fb_menu > ul > li {
flex: 1;
border-right: 1px solid #f0f0f0;
}
.fb_menu > ul > li:last-child {
border-right: none;
}
.fb_menu dl { margin: 0; }
.fb_menu dl dt {
font-size: 16px;
color: #333;
font-weight: bold;
margin-bottom: 15px;
padding-left: 10px;
border-left: 3px solid #009f9d;
}
.fb_menu dl dd {
line-height: 26px;
padding-left: 13px;
margin: 0;
}
.fb_menu dl dd a {
color: #666;
font-size: 12px;
text-decoration: none;
transition: color 0.2s;
}
.fb_menu dl dd a:hover { color: #009f9d; }
.fb_menu > div {
width: 25%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.qr-placeholder {
display: flex;
gap: 15px;
}
.qr-item {
text-align: center;
}
.qr-img-box {
width: 120px;
height: 120px;
background: #f0f0f0;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 10px;
}
.qr-img-box svg {
width: 60px;
height: 60px;
fill: #999;
}
/* ================= Bottom Copyright ================= */
.footnavcopy {
background-color: #fff;
padding: 20px 0;
text-align: center;
color: #666;
line-height: 24px;
width: 100%;
}
.fb_nav, .fb_copyright {
width: 1200px;
margin: 0 auto;
font-size: 14px;
font-style: normal;
line-height: 28px;
font-weight: normal;
text-align: center;
}
.fb_nav {
margin-bottom: 10px;
font-size: 14px;
font-style: normal;
line-height: 30px;
font-weight: normal;
background-position: center;
clear: both;
height: 30px;
}
.fb_nav p {
margin: 0;
text-align: center;
}
.fb_nav a {
margin: 0 8px;
color: #555;
text-decoration: none;
}
.fb_nav span {
color: #ddd;
font-size: 10px;
}
.fb_copyright p { margin: 0; }
.fb_copyright a {
color: #666;
text-decoration: none;
}
.footlink {
border-top: 1px solid #eee;
font-size: 12px;
width: 100%;
}
.f_pro, .f_subs, .f_link {
width: 1200px;
margin: 0 auto;
line-height: 24px;
color: #888;
}
.f_pro p, .f_link p {
margin-bottom: 10px; margin-top: 0;
}
.f_pro a, .f_link a, .f_subs a {
color: #888;
text-decoration: none;
}
.f_pro span, .f_subs span {
margin: 0 5px;
color: #ddd;
}
.f_subs {
display: flex;
margin-bottom: 10px;
}
.f_subs dt {
width: 70px;
font-weight: bold;
color: #666;
}
.f_subs dd {
flex: 1;
margin: 0;
}
.f_subs a {
white-space: nowrap;
}
/* ================= Police Badge Area ================= */
.police-badge {
width: 100%;
background: #fff;
padding: 15px 0;
text-align: center;
border-top: 1px solid #eee;
}
.police-box {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.police-box svg {
width: 18px;
height: 18px;
fill: #0264b4;
margin-right: 5px;
}
/* === 酒店侧边栏固定搜索框样式 === */
.ph_search_fixed {
clear: both;
margin: 0 4px 0px; /* 上0 左右15 下15 */
}
/* 标题 "新疆酒店查询" */
.ph_search_fixed dt {
font-size: 15px;
font-weight: bold;
color: #444;
margin-bottom: 10px;
}
/* 表单容器 (Flex布局核心) */
.ph_search_fixed dd form {
display: flex; /* 启用弹性布局 */
gap: 6px; /* 输入框和按钮之间的间距 */
align-items: center; /* 垂直居中对齐 */
}
/* 输入框样式 */
.ph_search_fixed input[type="text"] {
flex-grow: 1; /* 自动占满剩余空间 */
width: 100px; /* 覆盖旧样式 */
height: 24px; /* 固定高度 */
line-height: 30px; /* 垂直居中 */
border: 1px solid #ddd;
padding: 0 8px;
font-size: 12px;
color: #666;
outline: none;
border-radius: 2px;
transition: border-color 0.2s;
}
/* 输入框聚焦效果 */
.ph_search_fixed input[type="text"]:focus {
border-color: #ff9900;
}
/* 搜索按钮样式 */
.ph_search_fixed button {
flex-shrink: 0; /* 防止按钮被挤压 */
width: 76px; /* 固定宽度 */
height: 24px; /* 与输入框高度一致 */
background: #ff9900; /* 橙色背景 */
color: #fff;
border: none;
border-radius: 2px;
cursor: pointer;
font-size: 13px;
/* 按钮内部图标和文字居中 */
display: flex;
align-items: center;
justify-content: center;
}
/* 按钮图标样式 */
.ph_search_fixed button svg {
width: 14px;
height: 14px;
fill: #fff;
margin-right: 4px;
}
/* 按钮悬停效果 */
.ph_search_fixed button:hover {
background: #e68a00;
}
div.footlink { width: 1200px; margin: 15px auto; border-top: 1px solid #fafafa; color: #999; }
div.f_pro { }
.f_pro p { height: 24px; line-height: 24px; }
.f_pro a { color: #999; }
.f_pro a:hover { color: #666; text-decoration: underline; }
.f_pro span { color: #c8c8c8; margin: 0 4px; }
dl.f_subs { }
.f_subs dt { float: left; width: 60px; height: 48px; line-height: 24px; }
.f_subs dd { float: left; width: 1140px; height: 24px; line-height: 24px; }
.f_subs dd a { color: #999; }
.f_subs dd a:hover { color: #666; text-decoration: underline; }
.f_subs dd span { color: #c8c8c8; margin: 0 4px; }
div.f_link { }
.f_link p { height: 24px; line-height: 24px; }
.f_link table { width: 95%; float: right; text-align: left; }
.f_link a { color: #999; padding-right: 4px; }
.f_link a:hover { color: #666; text-decoration: underline; }
.beian-box {
width: 100%; /* 容器占满宽，内容居中 */
padding: 20px 0;
text-align: center; /* 让内部的链接居中显示 */
}
/* 链接容器：使用 Flex 布局核心 */
.beian-box a {
display: inline-flex; /* 关键：让链接变为弹性盒子，内容自动横排 */
align-items: center; /* 关键：让图标和文字垂直居中对齐 */
justify-content: center;
text-decoration: none;
color: #939393; /* 文字颜色 */
cursor: pointer;
}
/* 图片样式 */
.beian-box img {
width: 20px !important; /* 强制固定宽度 */
height: 20px !important; /* 强制固定高度 */
margin-right: 6px; /* 图标和文字之间的间距 */
border: none;
display: block; /* 防止图片底部产生空隙 */
}
/* 文字样式 */
.beian-box p {
margin: 0; /* 去掉段落默认边距 */
padding: 0;
font-size: 14px; /* 字号 */
line-height: 20px; /* 行高与图片高度一致 */
color: #939393;
white-space: nowrap; /* 强制文字不换行 */
}
.main-nav {
width: 100%;
min-width: 1200px;
background-color: #00807c;
}
/* 确保内部容器居中且宽度正确 */
.nav-inner {
width: 1200px;
margin: 0 auto;
position: relative; /* 确保下拉菜单定位准确 */
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ============================================================
1. 解决"必须依赖颜色辨识链接"报错 (针对 PHP 输出的登录注册)
============================================================ */
/* 给 [请登录]、[免费注册]、[退出] 增加强制下划线 */
i a[title="请登录"],
em a[title="免费注册"],
i a[title="退出"] {
text-decoration: underline !important;
text-underline-offset: 3px !important;
color: #005A57 !important; /* 深度青绿色 */
font-weight: bold !important;
}
/* ============================================================
2. 解决"低对比度"报错 (针对 PHP 输出的红色用户名)
============================================================ */
/* 强制覆盖 PHP 里的 */
font[color="red"] b,
font[color="red"] {
color: #991B1B !important; /* 深红色，确保白底过审 */
}
/* ================= 侧边栏客服与回到顶部样式 ================= */
.right-sidebar { position: fixed; right: 0; top: 0; height: 100%; width: 32px; background-color: #00b5be; z-index: 2147483647; font-family: "Microsoft YaHei", sans-serif; display: flex !important; flex-direction: column; justify-content: center; padding-top: 50px; }
.rs-item { position: relative; width: 32px; height: 32px; margin-bottom: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s; }
.rs-item:hover { background-color: #ff6600; }
.rs-item svg { width: 18px; height: 18px; fill: #fff; }
.rs-item.custom-btn { height: 145px; background-color: #ff3300; flex-direction: column; align-items: center; padding-top: 15px; margin-bottom: 20px; z-index: 100002; }
.rs-item.custom-btn:hover, .rs-item.custom-btn.expanded { background-color: #8B1A1A; }
.rs-item.custom-btn svg { width: 20px; height: 20px; }
.rs-item.custom-btn span { font-size: 15px; color: #fff; width: 14px; line-height: 22px; display: block; text-align: center; }
.rs-drawer { position: absolute; right: 32px; top: 0; width: auto; min-width: 110px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: none; border-radius: 4px 0 0 4px; white-space: nowrap; z-index: 100001; }
.rs-item:not(.custom-btn):hover .rs-drawer { display: block; animation: slideIn 0.2s ease-out; }
.rs-item.custom-btn.expanded .rs-drawer { display: block !important; animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.custom-drawer-header { padding: 12px 10px; border-bottom: 1px solid #f9f9f9; display: flex; align-items: center; justify-content: center; background-color: #fff; }
.custom-avatar { width: 38px; height: 38px; background: linear-gradient(135deg, #cca060 0%, #b88a4d 100%); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 8px; box-shadow: 0 2px 4px rgba(184, 138, 77, 0.3); }
.custom-avatar svg { width: 22px; height: 22px; fill: #fff; }
.custom-title { font-size: 14px; color: #555; font-weight: bold; letter-spacing: 0.5px; }
.custom-links { padding: 10px 10px 12px; background: #fff; display: flex; flex-direction: column; align-items: center; }
.custom-links a { display: flex; align-items: center; justify-content: center; width: 125px; height: 30px; background-color: #8B1A1A; color: #fff; text-decoration: none; border-radius: 15px; margin-bottom: 6px; padding: 0 5px; font-size: 13px; transition: all 0.2s; }
.custom-links a:hover { background-color: #ff4400; transform: translateX(-2px); }
.custom-links a svg { width: 14px; height: 14px; fill: #fff; margin-right: 4px; opacity: 0.95; }
.rs-links { padding: 8px; }
.rs-links-item { display: block; padding: 8px 12px; color: #666; text-decoration: none; border-bottom: 1px dashed #eee; font-size: 14px; text-align: left; }
.rs-links-item:last-child { border-bottom: none; }
.rs-links-item:hover { color: #ff6600; background-color: #fcfcfc; }
.rs-phone-num { color: #ff6600; font-weight: bold; font-family: Arial, sans-serif; margin-left: 5px; }
.rs-qr-box { padding: 10px; text-align: center; background: #fff; }
.rs-qr-box img.fixed-wechat { width: 310px !important; height: 250px !important; max-width: none !important; display: block; margin: 0 auto; }
.rs-qr-box img.fixed-feedback { width: 300px !important; height: 110px !important; max-width: none !important; display: block; margin: 0 auto; }
.rs-item.to-top { margin-top: 10px; background-color: #999; display: none; }
.rs-item.to-top:hover { background-color: #ff6600; }
/* 强力屏蔽 Live800 默认 UI 样式 */
div[id*="live800"]:not(#live800-box),
div[id^="live800"]:not(#live800-box),
div[id*="float"],
div[id*="lim_"],
iframe[src*="live800"],
.live800_float,
#live800_icon,
#live800_float_icon,
a[href*="live800"][target="_blank"] img,
#live800_cfloat_icon,
.live800_cfloat {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: fixed !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
z-index: -99999 !important;
}