@charset "utf-8";
/* Style Reset */
*{ margin:0; padding:0}
ul, ol, li, dl, dt, dd {list-style:none;}
a{text-decoration:none;outline:0px; color:#333}
img{ border:0;max-width: 100%;}
.ccsl{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;}
.clear {clear:both;}
body{ width:100%;max-width:512px; margin:0 auto; background:#fff; font-size:12px; line-height:24px; color:#333; }

.headerbox{width:100%;max-width:512px; margin:0 auto; position:relative; overflow:hidden}
.headerbox img.bg{ display:block; width:100%}
.headerbox .topBox{ position:absolute; top:10px; width:100%; z-index:1}
.headerbox .topBox .L{ flex:1; height:35px; line-height:35px; background:#fff; border-radius:5px;}
.headerbox .topBox .L img{ display:block; float:left; height:25px; margin:5px;}
.headerbox .topBox .L input{ height:35px; line-height:35px;outline:none; float:left; border:0; background:none; color:#666; width:70%;letter-spacing:1px}
.headerbox .topBox .R{ height:35px; padding-left:10px;}
.headerbox .topBox .R img{ display:block; height:25px; margin-top:5px;}


.h54{ width:100%; height:54px; overflow:hidden}
.footerBox{width:100%; max-width:512px; margin:0 auto;}
.footerBox .footer{position:fixed;width:100%;max-width:512px;bottom:0;height:54px;z-index:999;}
.footerBox .footer ul{ 
    display: flex;              /* 使用Flexbox布局 */
    justify-content: space-between; /* 两端对齐，子元素等距分布 */
    border-top:1px solid #E7E7E7;
    box-sizing: border-box; 
    background:#fff;
    margin: 0;
    padding: 0;
    width: 100%;
}
.footerBox .footer ul li{ 
    flex: 1;                    /* 每个li元素等分宽度 */
    height:54px; 
    overflow:hidden;
    list-style: none;           /* 去除列表样式 */
}
.footerBox .footer ul li a{ 
    display:flex;              /* 链接内部使用flex布局 */
    flex-direction: column;    /* 垂直方向排列图标和文字 */
    align-items: center;       /* 水平居中对齐 */
    justify-content: center;   /* 垂直居中对齐 */
    height: 100%;
    text-decoration: none;     /* 去除下划线 */
}
.footerBox .footer ul li img{ 
    height:26px;
    margin:2px 0;
}
.footerBox .footer ul li p{ 
    text-align:center; 
    height:24px; 
    line-height:24px; 
    color:#969696; 
    letter-spacing:1px;
    margin: 0;
}
.footerBox .footer ul li.on p{ color:#0E4ACD}

/* 立即购买按钮样式 - 仅对产品详情页生效 */
.product-detail-page .footerBox .footer ul li:last-child { 
    flex: 5; /* 占据3个图标的大小 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.product-detail-page .footerBox .footer ul li:last-child a.btn-buy {
    background: #0E4ACD; /* 高饱和度红色背景 */
    color: white; /* 白色文字 */
    font-size: 12px; /* 12px字体大小 */
    text-align: center; /* 水平居中 */
    border-radius: 421px; /* 超大圆角，胶囊状 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏溢出内容 */
    display: block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: bold;
}


.typebox{ overflow:hidden}
.typebox ul{ overflow:hidden; padding:15px 0}
.typebox ul li{ float:left; width:25%;}
.typebox ul li img{ display:block; margin:0 auto; height:50px;}
.typebox ul li p{ text-align:center; line-height:30px; font-size:13px; letter-spacing:1px}

.allbox{ background:#F1F1F1; width:100%; height:10px}

/* 课程容器基础样式：上下左右内边距15px（新增上下边距），溢出内容隐藏，浅灰色背景 */
.courseBox{
  padding:15px; /* 上下左右均15px内边距，满足上下边距需求 */
  overflow:hidden;
  background: #ffffff;
}

/* 标题区域样式：保持原有flex布局，仅做代码格式化 */
.courseBox .titbox{ 
  display:flex; 
  height:50px; 
  overflow:hidden;
}

.courseBox .titbox img{ 
  display:block; 
  height:20px; 
  margin:15px 0;
}

.courseBox .titbox p{ 
  flex:1; 
  height:50px; 
  line-height:50px; 
  font-size:15px; 
  padding-left:5px; 
  color:#000; 
  letter-spacing:1px;
}

/* 课程列表容器样式：使用CSS Grid布局实现行列对齐 */
.courseBox ul.ul_1{ 
  display:grid; /* 使用Grid布局 */
  grid-template-columns: repeat(2, 1fr); /* 创建两列，每列等宽 */
  grid-gap: 2%; /* 列之间的间距 */
  row-gap:15px; /* 行之间的间距 */
  padding-bottom:15px;
  border-bottom:1px solid #eee;
  margin:0; /* 清除默认ul边距 */
  padding-left:0; /* 清除默认ul内边距 */
}

/* 列表项样式：Grid布局下的统一样式 */
.courseBox ul.ul_1 li{ 
  list-style:none; /* 清除默认列表样式 */
  box-sizing:border-box; /* 确保宽度包含padding和border */
  /* 不需要设置宽度，由grid-template-columns控制 */
}

/* 加载中状态样式：加载状态占满整行 */
.courseBox ul.ul_1 li.loading{ 
  grid-column: span 2; /* 强制加载状态横跨所有列 */
  margin-left:0;
  margin-right:0;
}

/* 列表项内容容器样式：统一卡片样式 */
.courseBox ul.ul_1 li > div,
.courseBox ul.ul_1 li > a > div{ 
  background:#fff; 
  border-radius:8px; 
  overflow:hidden; 
  width:100%; /* 确保容器占满列表项宽度 */
  height:100%; /* 卡片高度100%，填充整个网格项 */
  box-shadow: #eee 0px 0px 10px 2px;
}

/* 列表项内图片容器：使用padding-bottom创建1:1正方形比例 */
.courseBox ul.ul_1 li img{ 
  display:block; 
  width:100%; 
  aspect-ratio: 1 / 1; /* 使用aspect-ratio直接指定1:1的宽高比 */
  object-fit:cover; /* 保持图片内容，裁剪超出部分 */
  border-radius:8px 8px 0 0;
}

/* 课程标题样式：保持原有 */
.courseBox ul.ul_1 li .tit{ 
  font-size:12px; 
  line-height:16px; 
  padding:4px 5% 0;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* 标签容器样式 */
.courseBox ul.ul_1 li .tags{ 
  padding:0 5%;
  margin:2px 0 4px;
  overflow:hidden;
}

/* 单个标签样式 */
.courseBox ul.ul_1 li .tags .tag-item{ 
  display:inline-block;
  padding:1px 6px;
  margin-right:4px;
  margin-bottom:2px;
  border-radius:10px;
  font-size:10px;
  color:#fff;
  line-height:16px;
  background-color: #ff6b6b; /* 默认颜色 */
  
  /* 通过nth-child选择器实现不同标签不同颜色 */
}

/* 使用CSS伪类为不同位置的标签设置不同背景色 */
.courseBox ul.ul_1 li .tags .tag-item:nth-child(1) { background-color: #ff6b6b; }
.courseBox ul.ul_1 li .tags .tag-item:nth-child(2) { background-color: #4ecdc4; }
.courseBox ul.ul_1 li .tags .tag-item:nth-child(3) { background-color: #45b7d1; }
.courseBox ul.ul_1 li .tags .tag-item:nth-child(4) { background-color: #f9ca24; }
.courseBox ul.ul_1 li .tags .tag-item:nth-child(5) { background-color: #6c5ce7; }

/* 超过5个标签时，从第6个开始循环使用颜色 */
.courseBox ul.ul_1 li .tags .tag-item:nth-child(6n+1) { background-color: #ff6b6b; }
.courseBox ul.ul_1 li .tags .tag-item:nth-child(6n+2) { background-color: #4ecdc4; }
.courseBox ul.ul_1 li .tags .tag-item:nth-child(6n+3) { background-color: #45b7d1; }
.courseBox ul.ul_1 li .tags .tag-item:nth-child(6n+4) { background-color: #f9ca24; }
.courseBox ul.ul_1 li .tags .tag-item:nth-child(6n+5) { background-color: #6c5ce7; }

/* 价格区域样式：保持原有 */
.courseBox ul.ul_1 li .price{ 
  color:#F34B06; 
  height:24px;
  line-height:24px; 
  font-size:16px; 
  padding:0 5% 10px;
}

/* 价格区域内右侧文字样式：保持原有 */
.courseBox ul.ul_1 li .price span{ 
  float:right; 
  font-size:12px; 
  color:#bbb;
}


.courseBox ul.ul_2{overflow:hidden;  padding-bottom:15px}
.courseBox ul.ul_2 li{ overflow:hidden;border-bottom:1px solid #eee; padding:10px 0}
.courseBox ul.ul_2 li:first-child{ padding-top:0}
.courseBox ul.ul_2 li:last-child{ border-bottom:none}
.courseBox ul.ul_2 li .L{ float:left; width:100px; height:115px; margin-right:15px}
.courseBox ul.ul_2 li .L img{ display:block; width:100px; height:115px;}
.courseBox ul.ul_2 li .R{ flex:1}
.courseBox ul.ul_2 li .R .tit{ font-size:14px; padding-top:10px;}
.courseBox ul.ul_2 li .R .sub{ color:#bbb;}
.courseBox ul.ul_2 li .R .pri{padding-top: 20px;font-size: 16px; color:#F34B06}
.courseBox ul.ul_2 li .R .pri a{ display:block; float:right; width:100px; height:26px; background:#0E4ACD; color:#fff; text-align:center; line-height:26px; font-size:12px; border-radius:15px; letter-spacing:1px}


.header{width:100%; max-width:512px; margin:0 auto;}
.header .box{height:46px;position:fixed;width:100%;max-width:512px;top:0;z-index:9999;border-bottom:1px solid #eee;background:#fff}
.header .box .L{position:absolute; left:0; top:0; height:46px; padding-left:15px;}
.header .box .L img{ display:block;height:22px;padding-top:14px;}
.header .box .C{width:100%; height:46px; line-height:46px; text-align:center}
.header .box .C p{ text-align:center; font-size:16px; color:#333; letter-spacing:1px}
.hbox{ width:100%; height:46px; overflow:hidden}

.categoryBox{ padding:15px 0; overflow:hidden}
.categoryBox .category{ padding:0 15px}
.categoryBox .category img{ display:block; width:100%;}
.categoryBox .titbox{ padding:15px 15px 5px; overflow:hidden}
.categoryBox .titbox p{ font-size:15px; color:#000;letter-spacing: 1px;}
.categoryBox .titbox span{ color:#999; font-size:12px;letter-spacing: 1px; padding-top:3px; display:block}
.categoryBox ul{ 
  margin:0;
  padding:10px 15px;
  list-style:none;
  overflow:hidden;
}

/* 卡片容器 */
.categoryBox ul li{
  width:100%;
  height:90px;
  display:flex; /* 左右布局 */
  align-items:center; /* 垂直居中 */
  box-shadow:#eee 0 0 10px 2px;
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
}

/* 左侧图片区域（1:1比例） */
.categoryBox ul li .L{ 
  width:90px;
  height:100%;
  flex-shrink:0;
  padding:0; /* 移除内边距，让图片贴紧外框 */
  box-sizing:border-box;
  border-radius:10px 0 0 10px; /* 左侧上下圆角，与外层li圆角匹配 */
  overflow:hidden; /* 裁剪图片超出部分 */
}

/* 左侧图片 */
.categoryBox ul li .L .left-img{ 
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0; /* 移除图片自身圆角 */
}

/* 调整卡片容器的圆角实现左右区分 */
.categoryBox ul li{
  /* 其他样式保持不变 */
  border-radius:10px 10px 10px 10px; /* 保持整体圆角 */
}

/* 右侧内容区 */
.categoryBox ul li .R{ 
  flex:1; /* 占满剩余宽度 */
  padding:0 15px;
  position:relative; /* 用于按钮定位 */
  height:60px; /* 控制文字区域高度 */
}

/* 第一排文字（标题） */
.categoryBox ul li .R .tit{ 
  margin:0;
  color:#000;
  font-size:14px;
  font-weight:bold;
  letter-spacing:1px;
}

/* 第二排文字（时间） */
.categoryBox ul li .R .time{ 
  margin:8px 0 0 0;
  color:#666;
  font-size:12px;
}

/* 回放按钮 */
.categoryBox ul li .R .a1{ 
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%); /* 垂直居中 */
  display:block;
  width:70px;
  height:24px;
  line-height:24px;
  text-align:center;
  border:1px solid #0E4ACD;
  color:#0E4ACD;
  border-radius:5px;
  font-size:12px;
  text-decoration:none;
}


.courseBox ul.ul_3{overflow:hidden;  padding:15px 0}
.courseBox ul.ul_3 li{ overflow:hidden;border-bottom:1px solid #eee; padding:10px 15px}
.courseBox ul.ul_3 li:first-child{ padding-top:0}
.courseBox ul.ul_3 li:last-child{ border-bottom:none}
.courseBox ul.ul_3 li .L{ float:left; height:80px; margin-right:15px}
.courseBox ul.ul_3 li .L img{ display:block; height:80px;}
.courseBox ul.ul_3 li .R{ flex:1}
.courseBox ul.ul_3 li .R .tit{ font-size:14px; padding-top:5px;}
.courseBox ul.ul_3 li .R .sub{ color:#bbb;}
.courseBox ul.ul_3 li .R .xx{ overflow:hidden; height:30px; line-height:30px;}
.courseBox ul.ul_3 li .R .xx span{ display:block; float:left; width:70%; height:10px; margin-top:10px; background:#E9ECF6;border-radius:10px;}
.courseBox ul.ul_3 li .R .xx p{ float:right; font-size:12px;}


.subscribebox{ padding:0 15px; overflow:hidden}
.subscribebox .item{ overflow:hidden;height:60px; display:flex; padding:10px 0; border-bottom:1px solid #eee}
.subscribebox .item .L{ float:left; width:60px; height:60px;}
.subscribebox .item .L img{ display:block; width:60px; height:60px; border-radius:100%}
.subscribebox .item .C{ flex:1; padding:0 10px;}
.subscribebox .item .C p{ letter-spacing:1px; font-size:14px; padding-top:5px; color:#000}
.subscribebox .item .C span{ color:#666; font-size:12px; letter-spacing:1px;}
.subscribebox .item .R{ float:right;height:60px; line-height:60px; font-size:12px;color:#666;}


.myHeader{ width:100%;max-width:512px; background:url(../images/mybg.jpg) no-repeat; background-size:100% 100%}
.myHeader .my_1{ display:flex; padding:40px 0 30px; width:100%; height:76px; line-height:76px; color:#fff;}
.myHeader .my_1 .tx{ float:left; display:block; margin-right:10px; width:70px; height:70px; border:3px solid #fff; border-radius:100%; margin-left:20px;}
.myHeader .my_1 span{ flex:1; display:block; font-size:16px; letter-spacing:1px;}
.myHeader .my_1 .more{ display:block; float:right; margin-right:20px; height:24px; margin-top:26px}
.myHeader .my_2{ padding:0 35px 20px; overflow:hidden}
.myHeader .my_2 a{ border:1px solid #fff; border-radius:25px; height:36px; line-height:36px; text-align:center; color:#fff; letter-spacing:1px; font-size:14px; display:block; width:40%}
.myHeader .my_2 a.L{ float:left;}
.myHeader .my_2 a.R{ float:right;}






.mybox_1{overflow:hidden; padding:13px 15px 0}
.mybox_1 .box{ display:flex;box-shadow: #eee 0px 0px 10px 2px;border-radius: 10px;margin-bottom: 10px; padding:10px 0; overflow:hidden}
.mybox_1 .box .L{ float:left; width:50px; margin-right:10px; margin-left:10px}
.mybox_1 .box .L img{ display:block; width:50px; height:50px;}
.mybox_1 .box .C{ flex:1}
.mybox_1 .box .C p{ color:#000; letter-spacing:1px; font-size:15px}
.mybox_1 .box .C span{ letter-spacing:1px; font-size:12px; color:#666; display:block}
.mybox_1 .box .R{ float:right; padding-right:15px}
.mybox_1 .box .R a{ display:block; border:1px solid #3F81F1; color:#3F81F1; width:65px; height:26px; line-height:26px; text-align:center; letter-spacing:1px; border-radius:5px; margin-top:11px}


.mybox_2{overflow:hidden; padding:10px 15px}
.mybox_2 ul{ box-shadow: #eee 0px 0px 10px 2px;border-radius: 10px;margin-bottom: 10px; padding:10px 0; overflow:hidden}
.mybox_2 ul li{ width:33.3%; float:left}
.mybox_2 ul li p{ text-align:center; color:#000; font-size:16px; letter-spacing:1px}
.mybox_2 ul li span{ text-align:center; color:#666; display:block; font-size:13px; letter-spacing:1px;}


.mybox_3{overflow:hidden; padding:10px 15px}
.mybox_3 ul{box-shadow: #eee 0px 0px 10px 2px;border-radius: 10px;margin-bottom: 10px; padding:10px 0; overflow:hidden}
.mybox_3 ul li{ float:left; width:25%; padding:5px 0}
.mybox_3 ul li img{ display:block; width:28px; margin:0 auto}
.mybox_3 ul li p{ text-align:center; letter-spacing:1px; line-height:26px}
/* 菜单标题样式（放在ul内部的li） */
.mybox_3 ul li.menu-title {
  width: 100%;       /* 占满卡片整行宽度 */
  float: none;       /* 取消左浮动，单独成行 */
  padding: 0 0 15px 0; /* 底部留间距，与下方图标分隔 */
  /* border-bottom: 1px solid #f5f5f5; 可选：添加分隔线，区分标题和内容 */
}

/* 标题文字样式 */
.mybox_3 ul li.menu-title p {
  text-align: left;  /* 强制居左对齐（覆盖原有p标签的center） */
  padding-left: 15px; /* 若需要元素内部与左边的间距  */
  margin: 0 15px;    /* 左右留边距，与卡片边缘对齐 */
  font-size: 14px;   /* 标题字体稍大 */
  /* font-weight: bold; 标题加粗 */
  color: #666;       /* 标题颜色加深 */
  letter-spacing: 0; /* 取消字间距（根据需求调整） */
}

.feedbackBox{ overflow:hidden; padding:5px 15px 0}
.feedbackBox .titbox{ font-size:14px; letter-spacing:1px; height:35px; line-height:35px; padding-left:10px}
.feedbackBox .sub{ padding:10px; overflow:hidden; background:#fff; border-radius:5px; height:150px;}
.feedbackBox .sub textarea{ width:100%; height:150px; border:0; outline:none;}
.feedbackBox .btn{ overflow:hidden; padding-top:40px}
.feedbackBox .btn a{ background:#3F82ED; color:#fff; display:block; height:40px; line-height:40px; letter-spacing:1px; font-size:14px; border-radius:5px; text-align:center;} 


.chartsBox{ overflow:hidden}
.chartsBox .charts_1{ width:170px; margin:0 auto; padding:30px 0; height:50px; line-height:50px; overflow:hidden}
.chartsBox .charts_1 .L{ float:left;color:#666; letter-spacing:1px;}
.chartsBox .charts_1 .L span{ color:#4486FF; font-weight:bold; padding:0 3px; font-size:16px;}
.chartsBox .charts_1 .R{ float:left; color:#666; letter-spacing:1px;}
.chartsBox .charts_1 img{ float:left; display:block; width:50px; height:50px; border-radius:100%; margin:0 5px}
.chartsBox ul{ border-top:1px solid #eee;padding:0 15px; }
.chartsBox ul li{ border-bottom:1px solid #eee; height:50px; line-height:50px; overflow:hidden}
.chartsBox ul li .num{ width:42px; float:left; text-align:center; font-size:14px}
.chartsBox ul li .num img{ display:block; height:34px; margin:8px auto;}
.chartsBox ul li .num p{ text-align:center; font-size:14px}
.chartsBox ul li .tx{ float:left; width:50px}
.chartsBox ul li .tx img{ display:block; width:34px;border-radius:100%; margin:8px auto}
.chartsBox ul li .tit{ float:left; padding-left:5px}
.chartsBox ul li .R{ float:right; color:#666;}
.chartsBox ul li .R span{ font-size:16px; color:#F83B32; padding-right:3px}


.helpBox{ padding:18px 15px; overflow:hidden}
.helpBox ul{ overflow:hidden}
.helpBox ul li{ height:46px; line-height:46px; background:#fff; margin-bottom:10px}
.helpBox ul li .icon{ float:left; display:block; height:30px; margin:8px}
.helpBox ul li p{ float:left}
.helpBox ul li .go{ display:block; float:right; height:18px; margin-top:14px; margin-right:10px}



.setBox{  overflow:hidden}
.setBox ul{overflow:hidden; background:#fff; padding:10px}
.setBox ul li{height:46px; line-height:46px;border-bottom:1px solid #eee; font-size:14px;}
.setBox ul li:last-child{ border:0}
.setBox ul li p{ float:left;}
.setBox ul li span{ float:right; display:block;}
.setBox ul li span.blue{ color:#3F82ED}
.setBox ul li img{ display:block; float:right;height:18px; margin-top:14px;}
.setBox .btn{ overflow:hidden; height:45px; background:#fff; margin-top:25px}
.setBox .btn a{ display:block; text-align:center;line-height:45px; height:45px;font-size:14px; letter-spacing:1px; color:#3F82ED}


.meansBox{ overflow:hidden}
.meansBox ul.ul_1{ background:#fff; overflow:hidden; padding:10px 0 3px; margin-bottom:10px}
.meansBox ul.ul_1 li{ float:left; text-align:center; width:33.3%}
.meansBox ul.ul_1 li img{ display:block; margin:0 auto; width:50px;}
.meansBox ul.ul_1 li p{ text-align:center; height:30px; line-height:30px; color:#666; letter-spacing:1px;}
.meansBox ul.ul_2{ overflow:hidden;}
.meansBox ul.ul_2 li{ margin-bottom:2px; padding:5px; background:#fff; padding-right:10px; overflow:hidden}
.meansBox ul.ul_2 li .L{ float:left;width:110px; height:80px; margin-right:10px}
.meansBox ul.ul_2 li .L img{ display:block; width:110px; height:80px;}
.meansBox ul.ul_2 li .R{ flex:1;}
.meansBox ul.ul_2 li .R .tit{ font-size:14px; letter-spacing:1px; line-height:1.5; color:#333;}
.meansBox ul.ul_2 li .R .sub{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical; line-height:1.5; color:#666; letter-spacing:1px;}
.meansBox ul.ul_2 li .R .date{ color:#666; font-size:12px; float:right}
.meansBox ul.ul_2 li .R .date span{ display:inline-block; background:#EC482D; color:#fff; border-radius:5px;height: 16px; width:40px; margin-left:5px;line-height: 16px;text-align: center;}

/* 详情页   卡片样式   */
/* 外层容器：控制整体内边距与溢出 */
.detailBox{ padding:2px 0; overflow:hidden;}

/* 标题样式：13px、黑色、居下 */
.detailBox ul li .titbox{ 
  margin-top:3px; 
  font-size:16px; 
  color:#000; 
  line-height:1.4; /* 文字换行时更美观 */
  margin:0;
}
/* 主标题文字：调整后样式 */
.detailBox .titbox p{ margin-top:3px; font-size:13px; color:#000; letter-spacing:1px; margin-bottom:0;}
/* 辅助文字：浅灰小字，与主标题区分层级 */
.detailBox .titbox span{ color:#999; font-size:12px; letter-spacing:1px; padding-top:3px; display:block; margin:0;}

/* 详情页标签样式 */
.detailBox .tags {
    margin-top: 8px;
}

/* 单个标签样式 */
.detailBox .tags .tag-item {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 4px;
    margin-bottom: 2px;
    border-radius: 10px;
    font-size: 10px;
    color: #fff;
    line-height: 16px;
    background-color: #ff6b6b; /* 默认颜色 */
}

/* 使用CSS伪类为不同位置的标签设置不同背景色 */
.detailBox .tags .tag-item:nth-child(1) { background-color: #ff6b6b; }
.detailBox .tags .tag-item:nth-child(2) { background-color: #4ecdc4; }
.detailBox .tags .tag-item:nth-child(3) { background-color: #45b7d1; }
.detailBox .tags .tag-item:nth-child(4) { background-color: #f9ca24; }
.detailBox .tags .tag-item:nth-child(5) { background-color: #6c5ce7; }

/* 超过5个标签时，从第6个开始循环使用颜色 */
.detailBox .tags .tag-item:nth-child(6n+1) { background-color: #ff6b6b; }
.detailBox .tags .tag-item:nth-child(6n+2) { background-color: #4ecdc4; }
.detailBox .tags .tag-item:nth-child(6n+3) { background-color: #45b7d1; }
.detailBox .tags .tag-item:nth-child(6n+4) { background-color: #f9ca24; }
.detailBox .tags .tag-item:nth-child(6n+5) { background-color: #6c5ce7; }

/* 价格样式：红色、21px、居上 */
.detailBox ul li .price{ 
  color:red; 
  font-size:21px; 
  margin:0 0 8px 0; /* 底部外边距8px，与标题拉开距离 */
  font-weight: bold; /* 价格加粗突出 */
}
/* 列表容器：清除默认样式，控制内边距 */
.detailBox ul{ 
  margin:0; 
  padding:5px 10px; 
  list-style:none; 
  overflow:hidden;
  box-sizing: border-box; /* 确保padding不影响整体宽度 */
}

/* 卡片容器 */
.detailBox ul li{
  width:100%;
  padding:15px; /* 内部间距，避免内容贴边 */
  align-items:center; /* 垂直居中 */
  box-shadow:#eee 0 0 10px 2px;
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
  box-sizing: border-box; /* 关键：padding不会增加总宽度，避免右移 */
}
/* 字段与内容的容器（确保一排展示） */
.detailBox ul li .info-row{
  display: flex; /* 弹性布局，强制子元素一排显示 */
  align-items: center; /* 垂直居中对齐 */
}

/* 字段样式（灰色） */
.detailBox ul li .field{
  color: #999; /* 灰色字段 */
  font-size: 14px; /* 可根据需要调整字号 */
  flex-shrink: 0; /* 字段不压缩，固定宽度 */
}

/* 内容样式（黑色） */
.detailBox ul li .content{
  color: #000; /* 黑色内容 */
  font-size: 14px; /* 与字段字号保持一致 */
  margin-left: 14px; /* 与字段中间保持8px间距 */
  flex: 1; /* 内容占满剩余宽度，避免溢出 */
  white-space: nowrap; /* 强制不换行（可选，根据内容长度调整） */
  overflow: hidden; /* 内容过长时隐藏超出部分 */
  text-overflow: ellipsis; /* 内容过长时显示省略号 */
}

/* 详情页   分割   */
/* 外层容器：控制整体居中并限制横线总宽度为70% */
.detail-push-container {
  width: 70%; /* 横线总宽度占父容器的70% */
  margin: 0 auto; /* 整体居中显示 */
}

/* 标题与横线容器 */
.detail-push {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 继承外层70%的宽度 */
  
  /* 文字样式 */
  font-size: 13px;
  color: #ababab;
  font-weight: 500;
  padding: 15px 0; /* 上下留白 */
}

/* 左右横线样式 */
.detail-push::before,
.detail-push::after {
  content: "";
  flex: 1; /* 横线均分70%宽度内的剩余空间 */
  height: 1px;
  background-color: #ababab; /* 横线颜色 */
  margin: 0 12px; /* 横线与文字的间距 */
}