/**组件样式*/
.leftnav-menu-con-li .biaoshi{    background: url(images/leftnav_menu_tb.png) center no-repeat;

width: 40px;
    height: 56px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
        cursor: pointer;}

.leftnav-menu-con-li .biaoshi.on{background: url(images/leftnav_menu_tb_on.png) center no-repeat;}

.togglebtn {
    position: absolute;
    top:0;
    right:0;
    width: 20px;
    height:20px;
    background: #000;
    background:url(images/leftnav_sj_jt.png) no-repeat center;
    cursor:pointer;}

/* 现代浏览器：四级导航与三级导航区分样式 */
/* 通过左侧边框、缩进、字体大小和颜色差异体现层级关系 */
ul.siji {
  margin-left: 20px !important; /* 相对三级导航额外缩进，增强层级感 */
  padding-left: 15px !important;
  border-left: 2px solid rgba(162, 15, 26, 0.2); /* 主题红色半透明左边框作为层级指示线 */
  width: calc(100% - 20px) !important; /* 减去缩进保持右对齐 */
  margin-top: 8px;
  margin-bottom: 8px;
  box-sizing: border-box;}

.siji-li {
  position: relative;
  margin: 3px 0;
  border-radius: 4px;
  transition: background-color 0.3s ease;}

.siji-li:hover {
  background-color: rgba(162, 15, 26, 0.06);}

.siji-li a {
  display: block;
  font-size: 14px !important; /* 字体比三级导航小1px：14px vs 15px，视觉上次级 */
  color: #777777 !important; /* 颜色比三级导航浅：#777 vs #666 */
  line-height: 26px !important; /* 行高略小于三级导航的24px调整版 */
  padding: 2px 10px 2px 18px !important; /* 左侧预留空间用于装饰点 */
  position: relative;
  transition: all 0.3s ease;
  border-radius: 3px;
  text-decoration: none;}

/* 使用伪元素添加圆形层级指示点 */
.siji-li a::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background-color: #a20f1a;
  border-radius: 50%;
  opacity: 0.4;
  transition: opacity 0.3s ease;}

/* 悬停交互效果 */
.siji-li a:hover,
.siji-li a.hover {
  color: #a20f1a !important;
  background-color: rgba(162, 15, 26, 0.1);
  padding-left: 22px !important;}



.siji-li:hover a::before {
  opacity: 1;}