/* 暗黑模式规则已迁入 dark-mode-unified.css（原 teacher_list.css） */
@charset "utf-8";
/**
 * ==========================================
 * 老师列表页样式
 * ==========================================
 */

/* ========================================
   筛选布局覆盖：二元素布局（筛选 + 搜索）
   - 左侧（筛选）：固定宽度，靠左
   - 中间（搜索）：flex: 1，靠右（两端对齐效果）
   - 右侧（空）：隐藏，不占空间
   ======================================== */
body .filter-horizontal .filter-left-box {
  flex: 0 0 auto;
}

body .filter-horizontal .filter-center-box {
  flex: 1;
  justify-content: flex-end;
}

/* 筛选条文字/搜索配色已统一在 css/web/design-system.css 的 --filter-* 变量（全站 list-filter / 老师主页共用） */

/* 右侧盒子 - 布局切换按钮 */
body .filter-horizontal .filter-right-box {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ========================================
   🔧 移动端筛选下拉菜单修复
   确保下拉菜单在手机端能正确显示
   ======================================== */
@media (max-width: 878px) {
    /* 确保筛选区域不阻挡下拉菜单 */
    .filter-horizontal {
        overflow: visible;
    }
    
    .filter-horizontal .filter-left-box {
        overflow: visible;
    }
    
    /* ⚠️ 不要覆盖 .filter-items-wrapper 的 overflow */
    /* 让它使用 filter_horizontal.css 的设置：overflow-x: auto, overflow-y: visible */
    /* 下拉菜单使用 position: fixed，不受父容器 overflow 影响 */
    
    /* 下拉菜单使用最高层级 */
    .filter-horizontal .filter-menu {
        z-index: 99999;
    }
}

/* 布局切换：与 sound_list 共用 filter_horizontal 的 .layout-btn / .layout-btn-icon（currentColor） */

/* ========================================
   布局切换：居中 vs 靠左
   ======================================== */

/* 布局模式样式已迁移到 components/teacher_card.css */

/* ========================================
   靠左对齐模式 - 以播放器左边缘为基准
   ======================================== */

#teacher_list.layout-left .Teacher {
  align-items: stretch;
  text-align: left;
}

/* 卡片头部靠左 */
#teacher_list.layout-left .Teacher .card-header {
  align-items: flex-start;
  text-align: left;
}

/* 头像靠左 */
#teacher_list.layout-left .Teacher .headimg-link {
  display: block;
  width: fit-content;
}

#teacher_list.layout-left .Teacher .HeadImg {
  margin: 0 0 12px 0;
}

/* 名字靠左 */
#teacher_list.layout-left .Teacher .teacherName,
#teacher_list.layout-left .Teacher .teacher-name,
#teacher_list.layout-left .Teacher .teacher-code {
  text-align: left;
  justify-content: flex-start;
}

/* 详情容器靠左 */
#teacher_list.layout-left .Teacher .teacher-details {
  align-items: flex-start;
}

/* 标签靠左 */
#teacher_list.layout-left .Teacher .TagBox,
#teacher_list.layout-left .Teacher .teacher-tags,
#teacher_list.layout-left .Teacher .style-tags {
  justify-content: flex-start;
  text-align: left;
}

/* 信息行靠左（语言、性别等标签） */
#teacher_list.layout-left .Teacher .teacher-info-line {
  text-align: left;
  justify-content: flex-start;
}

/* teacher-info-text 左对齐样式已迁移到 components/teacher_card.css */

/* 播放器全宽 */
#teacher_list.layout-left .Teacher .player-container,
#teacher_list.layout-left .Teacher .module-player {
  width: 100%;
}

/* 功能按钮靠左 */
#teacher_list.layout-left .Teacher .teacher-actions,
#teacher_list.layout-left .Teacher .sample-actions {
  justify-content: flex-start;
}

/* 信息行靠左 */
#teacher_list.layout-left .Teacher .info-line,
#teacher_list.layout-left .Teacher .price-line {
  justify-content: flex-start;
  text-align: left;
}

/* 弹窗打开时禁用整卡悬停动效（与 teacher_card 一致） */
body.popup-open .Teacher:hover {
  transform: none;
  box-shadow: none;
  transition: none;
}

/* 新的柔和渐变背景 */
.AdBar.M_B2 {
    height: 120px;
    width: 100%;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    background-size: 300% 300%;
    position: relative;
    overflow: hidden;
    animation: softGradient 20s ease infinite;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }

  .AdBar.M_B2::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    animation: gentleRipple 8s linear infinite;
  }

  @keyframes softGradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  @keyframes gentleRipple {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .AdBar.M_B2 a {
    color: #5a6c7d;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    z-index: 1;
    padding: 10px 20px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  }

  .AdBar.M_B2 a:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.03);
    color: #445566;
  }
  
  /* 隐藏原有的图片 */
  .AdBar.M_B2 a img {
    display: none;
  }
 

/*-- 筛选条件样式已迁移至 css/web/components/filter_horizontal.css --*/
/*-- .Selected 和 .NoFilters 样式统一在 filter_horizontal.css 中管理 --*/

/* 搜索表单 */
form#seacher_form {
    display: flex;
}
  .Search1 input.Btn {
    float: right;
    width: 46px;
    height: 31px;
    border-left: 2px solid transparent;
    background-color: rgba(229, 232, 222, 0.01);
    background-image: url(../../images/web/Icon_Search.png);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: center;
    margin-top: -2px;
    margin-right: -2px;
    cursor: pointer;
}
.ChoiceContainer {
    display: flex;
    justify-content: center; /* Center the Choice div */
    width: 100%;
}

.Choice {
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0; /* 统一为0，间距由.filter-horizontal的padding控制，与sound_list保持一致 */
    margin: 0px;
    margin-top: 0;
    border: 0px solid #666;
    position: relative;
    z-index: 5;
}



.Choice .Row {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    align-content: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 0 9px;
}

.Choice .Category {
	font-weight: bold;
    color: #0a0e27;
    border-radius: 0px;
    
    font-style: inherit;
	}
.Choice .Conditions {
	float: left;
    width: 79%;
    padding-bottom: 0px;
    padding-top: 2px;
    line-height: 26px;
	}
.Choice .Conditions a {
	margin-right: 4px;
    white-space: nowrap;
    padding: 3px 3px 3px 3px;
    border-radius: 2px;
   
    border: 1px #969696 solid;
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.Choice .Conditions a:hover{
	background: #8f55bc;
    color: #fff;
};
.Choice .Conditions a span {color:#969696; font-family:Arial;}

.Choice .Conditions p {float:left;width:100px;margin-right:20px;}
.Choice .Conditions p input {margin-right:5px;}
.Choice .Options {float:right; width:100px; padding-top:5px;}
.Choice .Options a {float:left;width:40px; height:20px; display:inline-block; border:1px solid #D7D7D7; background:#F5F5F5; text-align:center; line-height:20px; font-size:12px;}
.Choice .Options input {float:left;width:40px; height:22px; display:inline-block; border:1px solid #FF3C00; background: #FF4B23; margin-right:5px; text-align:center; line-height:20px; color:#FFF;cursor:pointer; }
.Choice .Options input:hover{background: #C80A00;}
.Solid {height:0px; overflow:hidden; border-top:1px solid #D7D7D7;}
.Dotted {height:4px; overflow:hidden; border-top:1px dotted #D7D7D7;}

.Sort {
	 
    background: rgb(255, 255, 255);
}
.Sort ul {
	float: left;
    height: 18px;
    border-top: 0px solid #D7D7D7;
    border-bottom: 0px solid #000;
    margin-top: 10px;
    margin-left: 0px;
}
.Sort li {float:left; height:18px; border-left:0px solid #D7D7D7; border-right:0px solid #000; padding:0px 10px 0px 10px;background: 0; cursor:pointer; line-height:16px;}
.Sort li a {
	float: left;
    height: 18px;
    display: inline-block;
    color: #171515;
    
    font-weight: bold;
}
.Sort li a:hover{ background-color:#F08200;}
.Sort li span {float:left; width:10px; height:18px;display:inline-block; background:url(../../images/web/Icon_Sort.gif)  center right no-repeat;}
.Sort li.Current span {background:url(../../images/web/Icon_SortCurrent.gif) center no-repeat;}
.Sort li.ReCurrent span {background:url(../../images/web/Icon_ReSortCurrent.gif) center no-repeat;}
.Sort p {
  float: right;
    line-height: 29px;
    text-align: right;
    color: #00000042;
    font-size: 14px;
    margin-right: 16px;
}}
.Sort p span {padding:0px 5px;}

.Result {
	padding: 100px 0px;
    line-height: 64px;
    color: #666;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 确保在grid布局中占满整行 */
    grid-column: 1 / -1;
    width: 100%;
}
.Result img,.Result span {display:inline-block; margin-right:15px;  font-size:16px;}
.Result svg {display: block; margin: 0 auto 15px auto;}
.Result span {margin-right: 0; font-size: 15px; color: #666;}




/*-- 老师列表 --*/
/* ✅ 旧版 .Teacher_3-4 布局已废弃 */

/* ========== 老师列表容器 ========== */
/* 列表页特有样式，卡片样式已迁移到 components/teacher_card.css */

/* Updated Teacher container for responsive grid layout */
/* ✅ 使用CSS Grid；列数由 .teacher-cols-5 / .teacher-cols-6 与筛选区按钮联动 */
#teacher_list {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
}

#teacher_list.teacher-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

#teacher_list.teacher-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* 版心宽度由全站 body.site-layout-wide 控制（site-layout-preference.css） */

/* 筛选栏右侧：对齐 + 列数在同一分段条内（见 .layout-toggle-wrapper--teacher） */
body.teacher-list-page .filter-horizontal .filter-right-box {
  gap: 0;
  flex-wrap: nowrap;
}

/* 密度按钮（仅图标）：与 filter_horizontal 的 .layout-btn 同宽高，勿用 min-width+padding 拉宽 */
body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn--cols {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 978px) {
  body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn--cols {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn--cols {
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    height: 26px;
  }
}

/* 桌面：5/6 列密度图标；手机：单列/双列图标（与下方断点网格一致） */
body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn--mobile-cols {
  display: none;
}

@media (max-width: 768px) {
  body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn--desktop-cols {
    display: none !important;
  }

  body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn--mobile-cols {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  body.teacher-list-page .layout-toggle-wrapper--teacher #teacher_list_mobile_col_toggle .mobile-col-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
  }

  body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn-icon--mobile-cols-icon {
    display: block;
  }

}

@media (max-width: 480px) {
  body.teacher-list-page .layout-toggle-wrapper--teacher #teacher_list_mobile_col_toggle {
    gap: 0;
  }

  body.teacher-list-page .layout-toggle-wrapper--teacher #teacher_list_mobile_col_toggle .layout-btn-icon--mobile-cols-icon {
    width: 16px;
    height: 16px;
  }
}

/* 桌面密度切换：仅图标，与相邻 .layout-btn 同盒尺寸 */
body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn--col-toggle {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* 对齐图标：描边矢量，靠左图标左侧装订线略淡 */
body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn-icon--text-align {
  display: block;
}

body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn-icon--text-align .layout-align-guide {
  opacity: 0.45;
}

body.teacher-list-page .filter-horizontal .layout-btn.active .layout-btn-icon--text-align .layout-align-guide {
  opacity: 0.55;
}

/* 列数切换：仅密度图标 */
body.teacher-list-page .layout-toggle-wrapper--teacher #teacher_list_col_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body.teacher-list-page .layout-toggle-wrapper--teacher #teacher_list_col_toggle .col-toggle-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

body.teacher-list-page .layout-toggle-wrapper--teacher .layout-btn-icon--col-density {
  display: block;
}

@media (max-width: 878px) {
  body.teacher-list-page .filter-horizontal .filter-right-box {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* ✅ 老师卡片悬停/边框以 components/teacher_card.css 为准，列表页不再单独覆盖 */

/* ✅ 老师卡片的基础样式已迁移到 /css/web/components/teacher_card.css */
/* 页面会通过 teacher_card.html 组件自动加载 */

/* 播放按钮 - 旧版兼容（如果还有旧版HTML） */
.controls {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 10;
  width: 27px;
  border-radius: 50%;
  cursor: pointer;
}

.controls .btn-primary {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #000000;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: none;
    box-shadow: none;
    position: relative;
}

.controls .btn-primary:hover {
  background: #ff9800;
  border-color: #ff9800;
}

/* 播放状态时三角形变为暂停竖条 */
.controls .glyphicon-play.glyphicon-pause,
.controls .btn-primary .glyphicon-play.glyphicon-pause {
    border: none;
}

.controls .btn-primary:has(.glyphicon-pause),
.controls .btn-primary .glyphicon-pause {
  background: #ff9800;
  border-color: #ff9800;
}

.controls .btn-primary:has(.glyphicon-pause):hover {
  background: #ff9800;
    border-color: #ff9800;
}

/* 使时间显示元素在正确位置 - 纯自适应方法 */
.current-time-on-pointer {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(calc(-100% - 5px), -50%);
    background-color: var(--player-time-bg-color, rgba(34, 62, 72, 0.95));
    color: var(--player-time-text-color, white);
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 11px;
    z-index: 11;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 价格显示 */
.teacher-price-display {
    display: none;
}

/* ✅ 旧版 .Operate 容器样式已废弃，现在使用 teacher_actions 组件 */
/* 功能按钮样式已统一在 /css/web/components/card_actions.css 中控制 */

/* ✅ 旧版按钮样式已迁移到 /css/web/components/card_actions.css */
/* - .voice-actions 按钮容器 */
/* - .action-icon 图标按钮 */
/* - .voice-action-btn 文字按钮 */
/* - 暗黑模式和悬停效果 */

/* 🎯 列表模式：第一个列表项的下拉菜单向下弹出（避免超出顶部） */
.teacher-list.list-view .teacher-item:first-child .action-dropdown,
.samples-grid.list-view .sample-item:first-child .action-dropdown {
    bottom: auto;
    top: calc(100% + 8px);
    transform-origin: right top;
}

/* 第一个列表项的三角箭头改为向上（因为菜单在按钮下方） */
.teacher-list.list-view .teacher-item:first-child .action-dropdown::after,
.samples-grid.list-view .sample-item:first-child .action-dropdown::after {
    bottom: auto;
    top: -6px;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #fff transparent;
}

/* 暗色模式收藏图标样式已统一在 /css/web/components/card_actions.css 中控制 */

/* 价格显示区域改为横向布局 */
.info {
  display: none;
}

.txt {
  display: none;
}

.txt1 {
  float: none;
  margin: 0 auto;
  width: 90%;
  display: block;
  position: static;
  text-align: center;
}

/* ✅ 旧版 .Teacher .Price 样式已废弃（价格现在通过弹窗显示） */

/* ========== 响应式布局 ========== */
/* ✅ .Teacher 卡片的响应式样式已迁移到 /css/web/components/teacher_card.css */
/* 此处仅保留列表容器的响应式样式 */

/* 较窄屏逐级减列（两种模式共用断点，小屏一致） */
@media (max-width: 1480px) {
    #teacher_list.teacher-cols-6 {
      grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    #teacher_list.teacher-cols-6,
    #teacher_list.teacher-cols-5 {
      grid-template-columns: repeat(4, 1fr);
    }
}

/* 1024px以下：3列布局 */
@media (max-width: 1024px) {
    #teacher_list.teacher-cols-6,
    #teacher_list.teacher-cols-5 {
      grid-template-columns: repeat(3, 1fr);
    }
}

/* 全站宽屏：同断点下多一列（桌面，≥769px 仍生效；手机保持原样） */
@media (min-width: 1481px) {
  body.site-layout-wide #teacher_list.teacher-cols-6 {
    grid-template-columns: repeat(7, 1fr);
  }
  body.site-layout-wide #teacher_list.teacher-cols-5 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 1480px) and (min-width: 769px) {
  body.site-layout-wide #teacher_list.teacher-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  body.site-layout-wide #teacher_list.teacher-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1200px) and (min-width: 769px) {
  body.site-layout-wide #teacher_list.teacher-cols-6,
  body.site-layout-wide #teacher_list.teacher-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  body.site-layout-wide #teacher_list.teacher-cols-6,
  body.site-layout-wide #teacher_list.teacher-cols-5 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
    #teacher_list.teacher-cols-6,
    #teacher_list.teacher-cols-5 {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 100%;
      overflow: hidden; /* 🔧 防止卡片溢出 */
    }

    /* 手机端可选单列/双列（由 .teacher-mobile-cols-* 与筛选区按钮联动） */
    #teacher_list.teacher-mobile-cols-1.teacher-cols-6,
    #teacher_list.teacher-mobile-cols-1.teacher-cols-5 {
      grid-template-columns: repeat(1, 1fr);
    }
    
    /* 🔧 确保卡片不会超出网格单元格 */
    #teacher_list .Teacher {
      width: 100%;
      max-width: 100%;
      min-width: 0; /* 🔧 关键：允许flex/grid子项收缩 */
      overflow: hidden;
    }
}

@media (max-width: 576px) {
    #teacher_list.teacher-cols-6,
    #teacher_list.teacher-cols-5 {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    #teacher_list.teacher-mobile-cols-1.teacher-cols-6,
    #teacher_list.teacher-mobile-cols-1.teacher-cols-5 {
      grid-template-columns: repeat(1, 1fr);
    }
    
    #teacher_list .Teacher {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }
}

/* ✅ 以下旧版HTML结构样式已废弃，现在使用新的组件化结构 */
/* .Teacher h4, .Teacher h5 - 旧版老师信息显示 */
/* .Teacher dl, dt, dd - 旧版标签显示 */
/* .Teacher .Price - 旧版价格显示（重复定义） */
/* .Teacher h6 - 旧版样式 */
 

/*-- 推荐老师 --*/
/* ✅ 旧版 .RecommendTeacher 样式已废弃，现在使用 voice-card 组件 */

/*-- 客服推荐需求单 --*/
.Demand {height:710px;background:#C8C8C8;}
.Demand h1 {height:55px; padding:5px 10px 0px 10px; background:#282828; line-height:24px; font-size:16px; color:#FFF;}
.Demand h1 span {font-size:12px;color:#FFF;}
.Demand ul {padding:10px 10px 0px 10px;}
.Demand li { min-height:25px; margin-bottom:5px;line-height:20px;}
.Demand li span,.Demand li input,.Demand li select {float:left;}
.Demand li input,.Demand li textarea,.Demand li select {border-radius:5px; padding:2px 5px; border:none;}
.Demand li textarea {width:260px; height:150px;}
.Demand h6 {height:70px; text-align:center;}
.Demand h6 input {width:210px; height:50px;border:none; background:#FF3C00; font-size:22px; color:#FFF;}

/*-- 声音列表 --*/
.Sound_4-4 {
    border-top: 3px solid #e7e7e7;
    padding-top: 18px;
}
.Sound_list { width:1250px;}

.Sound  {
	float: left;
    width: 585px;
    border: 1px rgb(255, 255, 255) solid;
    margin: 0px 10px 13px 0px;
    border-right-color: rgba(29, 28, 28, 0.58);
    border-right-width: 3px;
    border-right-style: double;
    /* border-bottom-style: double; */
    /* border-bottom-width: 3px; */
    /* border-bottom-color: rgba(29, 28, 28, 0.38); */
}

.Sound:hover{ 
    border:2px solid #ff3300;
	
}
.Sound .SoundBox { 
       position: relative;
    background: url(../../images/web/s2ound_bg.jpg) no-repeat;
    background-position: -7px -287px;
    background: rgb(214, 199, 171);
	}
.Sound h2 {
	height: 23px;
    padding: 6px 0px 0px 9px;
    background: url(../../images/web/sound_name.png) no-repeat;
    background-position: -2px 9px;
    overflow: hidden;
    border-bottom: 0px dotted #FFFFFF;
    line-height: 20px;
    font-size: 15px;
    color: #000000;
    margin: 0 0 0 17px;
    font-weight: 600;
}
.Sound p { min-height:20px; padding:0px; background:0; border-top:1px dotted #FFFFFF; border-bottom:1px dotted #D7D7D7;}
.Sound h4 {
	height: 16px;
    border-bottom: 0px dotted #D7D7D7;
    overflow: hidden;
    padding: 1px 14px 6px 41px;
    line-height: 28px;
    font-weight: normal;
    color: #8c8c8c;
    margin-bottom: -1px;
}
.Sound .Operate {
    clear: both;
    height: 29px;
    padding: 15px 0px 0px 0px;
    background: #F3F2F2;
    text-align: center;
    margin-top: -9px;
}

.Sound .Operate a {
	padding: 1px 8px;
    border-radius: 3px;
    border: 1px solid #FFFFFF;
    background: #D4A472;
    margin: 5px 5px 0px 0px;
    font-size: 14px;
}
a.addBtn1.small {
    background: url(../../images/web/iconfont-chakan.png) no-repeat;
    background-position: 5px 5px;
   	padding: 3px 9px 2px 34px;
    margin-left: 13px;
}
a.addBtn1.small:hover {
    background: url(../../images/web/iconfont-chakan2.png) #FF4419 no-repeat;
    background-position: 5px 5px;
    padding: 3px 9px 2px 34px;
	
	color:#FFF;
}
a.addBtn2.small {
    background: url(../../images/web/iconfont-download.png) no-repeat;
    background-position: 6px 2px;
    padding: 3px 9px 2px 32px;
    
}
a.addBtn2.small:hover {
    background: url(../../images/web/iconfont-download2.png) #FF4419 no-repeat;
    background-position: 6px 2px;
    padding: 3px 9px 2px 32px;
	
	color:#FFF;
}
a.addBtn3.small {
    background: url(../../images/web/iconfont-hezuojihui.png) no-repeat;
    background-position: 6px 3px;
    padding: 3px 9px 2px 32px;
  
}
a.addBtn3.small:hover {
    background: url(../../images/web/iconfont-hezuojihui2.png) #FF4419 no-repeat;
    background-position: 6px 3px;
    padding: 3px 9px 2px 32px;
	
	color:#FFF;
}
/*.Sound .Operate a:hover */{
	background: #FF4419;
    border: 1px solid #FE4A0B;
	color:#FFF;
	padding:2px 3px 2px 3px;
	}
.AudioBar p { width: 460px;float: left;margin: -98px 0px -1px -4px;position: relative;}

/*-- 推荐声音 --*/
.RecommendSound {height:475px;background:url(../../images/web/ListSound_Recommend.jpg) no-repeat 0px 40px;} 
.RecommendSound h1 {height:40px; padding:0px 10px; background:#FF3C00; line-height:38px;font-size:16px; color:#FFF;}
.RecommendSound h1 span {float:right; font-size:12px;color:#FFF;cursor:pointer;}
.RecommendSound .RecommendSoundBox  {width:290px; height:134px; padding:10px 0px 0px 0px; overflow:hidden; margin:0px; border-bottom:1px #FFF dotted;}
.RecommendSound .RecommendSoundBox h2 {height:25px; margin:0px 10px; font-size:16px; color:#FFF;}
.RecommendSound .RecommendSoundBox p {height:20px; padding:5px 0px; background:url(../../images/web/ListSound_RecommendBar.png) no-repeat center; text-align:center;}
.RecommendSound .RecommendSoundBox h4 {height:20px; margin:0px 10px; overflow:hidden; line-height:24px; font-size:12px; color:#FFF;}
.RecommendSound .RecommendSoundBox .Operate {padding:10px 0px; text-align:center;}
.RecommendSound .RecommendSoundBox .Operate a {padding:2px 8px; border-radius:5px;border:1px solid #FFF; background:#A6E2FF; margin-right:10px; font-size:12px; color:#00699B;}
.RecommendSound .RecommendSoundBox .Operate a:hover {background: #00699B;border:1px solid #A6E2FF; color:#FFF;}
/*-- 试听排行 --*/
.HotSound {height:410px; overflow:hidden; background:#FFF url(../../images/web/Index_HotSound.png) no-repeat 10px 30px;}
.HotSound h1 {height:30px; padding:0px 10px; background:#282828; line-height:28px; font-size:16px; color:#FFF;}
.HotSound .HotSoundBox {padding-left:60px;}
.HotSound .HotSoundBox h2 {height:18px;overflow:hidden; color:#FF3C00;}
.HotSound .HotSoundBox h3 {height:18px;overflow:hidden; line-height:18px; font-size:12px;color:#969696;}
.HotSound .HotSoundBox h3 a {font-size:12px;}
.HotSound .HotSoundBox p {height:20px; overflow:hidden;}
.HotSound .Dotted {height:0px; overflow:hidden; border-top:1px dotted #D7D7D7;}
/*-瀑布流-*/
#Waterfall{ width:1250px; height:auto; position:relative;overflow:hidden;}

/*-- 资讯列表 --*/
.NewsBox {float:left; width:270px; height:auto; overflow:hidden; background:#FFF; display:inline; margin:0px 10px 10px 0px;}
.NewsBox .Pic {width:290px;height:auto;}
.NewsBox img {width:290px;height:auto;}
.NewsBox p {margin:5px 10px; border-bottom:1px dotted #D7D7D7; line-height:24px;}
.NewsBox h2 {height:25px; margin:0px 10px; }
.NewsBox h2 a {font-size:16px; color:#FF3C00;}
.NewsBox h3 {height:25px; margin:0px 10px; font-size:12px; color:#969696;}
/*-- 优惠活动列表 --*/
.ListActivities {width:890px; margin:0px auto; padding:10px 0px;}
.ActivitieBox {height:260px; margin-bottom:10px; background:#FFF;}
.ActivitieBox dt {float:left; width:590px; }
.ActivitieBox dd {float:left; width:280px; margin-left:10px;}
.ActivitieBox dd h2 {height:30px; margin:10px 0px 0px 0px; }
.ActivitieBox dd h2 a {font-size:18px;color:#FF3C00;}
.ActivitieBox dd h3 {height:35px; background: #EBEBEB url(../../images/web/Icon_Time.png) no-repeat 10px 9px; padding-left:35px;}
.ActivitieBox dd h3 span {float:left; margin-right:10px; line-height:34px;}
.ActivitieBox dd h3 span.Cn {font-size:12px;}
.ActivitieBox dd h3 span.Time {font-family:Arial; font-size:20px;}
.ActivitieBox dd h4 {height:110px;margin:10px 0px; line-height:22px;}
.ActivitieBox dd h6 .Go {width:100px; height:40px; display:block; border:none; margin:0px auto; background:#FF3C00; line-height:38px; font-size:20px; color:#FFF;}
.ActivitieBox dd h6 .End {width:100px; height:40px; display:block; border:none; margin:0px auto; background:#D7D7D7; text-align:center; line-height:38px; font-size:20px;}
/*-- 发现视频 --*/
.VideoCase_Banner {
	height: 149px;
}
.VideoList {
	background: #fbfafa;
    margin-top: 23px;
}
.RecommendVideo {width:1200px;}
.RecommendVideo h1 {clear:both; height:30px; background:url(../../images/web/Title_01.png) no-repeat center;text-align:center; font-size:20px; color: #282828;}
.RecommendVideo dl {float:left; width:580px; height:240px; display:inline; background: url(../../images/web/VideoCase_Box01Bg.png);margin:0px 20px 10px 0px;} 
.RecommendVideo dt {float:left; width:240px; padding:30px 20px; overflow:hidden; text-align:center; }
.RecommendVideo dd {float:left; width:280px; height:240px; padding:30px 0px 0px 0px; color:#FFF;}
.RecommendVideo dd a {color:#FFF;}
.RecommendVideo dd a:hover {color: #FF6;}
.RecommendVideo dd h2 {height:25px;overflow:hidden; line-height:24px;}
.RecommendVideo dd h2 a {font-size:16px; font-weight:bold;}
.RecommendVideo dd h3 {height:24px; margin-bottom:5px; line-height:24px;}
.RecommendVideo dd h4 {height:24px; overflow:hidden; border-top:1px dotted #D7D7D7; border-bottom:1px dotted #D7D7D7; margin-bottom:5px; line-height:22px;}
.RecommendVideo dd p {height:104px; overflow:hidden;line-height:26px;}
.VideoChoice {
	    height: 35px;
    padding: 1px 20px;
    overflow: hidden;
    line-height: 38px;
    font-size: 19px;
    color: #B58A55;
    margin: 49px 0 0 0;
    background: url(../../images/web/VideoCase_Til.png) no-repeat;
    font-weight: 900;
}
.VideoChoice p {float:right; font-size:16px;}
.VideoChoice p a { 
    display: inline-block;
    color: #B59522;
    font-size: 14px;
    padding-right: 9px;
	}
.VideoChoice p span {float:right; padding-left:5px; line-height:36px; color:#C8E4FF; font-family:Arial;}
.VideoChoice p a:hover,.VideoChoice p a:hover span {color:#FF6;}
.OrdinaryVideo {width:1200px;}
.OrdinaryVideo dl {
	float: left;
    width: 276px;
    height: 330px;
    display: inline;
    background: url(../../images/web/VideoCase_Box02Bg.png) no-repeat;
    margin: 11px 20px 10px 0px;
    border: 2px solid #ffffff;
}
.OrdinaryVideo dl:hover {
   border: 2px solid #ffffff;
}
.OrdinaryVideo dt {height:180px; overflow:hidden; padding:30px 20px; margin-bottom:5px; text-align:center;}
.OrdinaryVideo dd {margin:0px 10px;}
.OrdinaryVideo dd h2 {height:29px; overflow:hidden; border-bottom:1px dotted #D7D7D7; line-height:24px;font-size:16px;}
.OrdinaryVideo dd h3 {height:24px;overflow:hidden;  line-height:24px;}
.OrdinaryVideo dd h3 a:hover {color:#06C;}

/*-- 流程&通告 --*/
.Infor {width:288px; height:190px; border:1px solid #D7D7D7; margin:0px 0px 10px 0px;}
.Infor h2 {height:24px; background:url(../../images/web/Notice_TabBg.jpg) no-repeat;}
.Infor h2 a {float:left; width:142px; height:24px; display:inline; margin:0px 1px; cursor:pointer; text-align:center; line-height:24px; color:#969696;}
.Infor h2 a.Current {background:#FFF; color:#3C3C3C;}
.Infor ul{padding-top:5px;}
.Infor li {height:26px; overflow:hidden; margin:0px 10px; background:url(../../images/web/Dot_01.gif) no-repeat 0px 12px; padding-left:10px; line-height:26px;}

/*-- 文章单页 --*/
.Article {width:810px;padding:20px 40px; background:#FFF;}
.Article h2 {height:60px; text-align:center; line-height:60px; font-size:26px; color: #000; font-family:Microsoft YaHei; *font-family:Microsoft YaHei;*font-family:SimHei;}
.Article h3 {padding:5px 0px; border-bottom:1px solid #DCDCDC;}
.Article .Detail {line-height:180%; font-size:18px;}
.ArticleAd {margin-bottom:10px;}


/*-- 名音定制--*/
.Famous {}
.FamousBanner {height:265px; background:url(../../images/web/ListFamous_Banner.jpg) no-repeat top center;}
.FamousBanner p {}
.FamousMain {background:url(../../images/web/ListFamous_MainBg.jpg) no-repeat top center;}

.accordion{width:1170px;margin:5px auto 0px auto;padding:0px; background:#000;position:relative;overflow:hidden;}
.accordion img, .accordion .caption{position:absolute;left:-9999px;}
.accordion .panel{position:absolute;overflow:hidden;}
.accordion .shadow{position:absolute;}
.accordion .preloader{position:absolute;}
.accordion .caption{overflow:hidden;position:absolute;z-index:20;}
.accordion .caption-background{background:rgba(0,0,0,0.7);position:absolute;width:100%;height:100%;}
.accordion .caption p {padding:0px 10px; line-height:36px; font-size:20px; color:#E1D296; }
.FamousBottom {border-top:5px solid #53466E; background: #2F2446; padding:10px;}
.FamousBottom dl {width:1180px; margin:0px auto;}
.FamousBottom dt {height:210px;}
.FamousBottom dd {height:300px;}

span.LineThrough {text-decoration:line-through; color:#999;}

/* 价格按钮样式 */
.price-button-container {
  display: none;
}

/* 价格弹窗样式已移至 css/web/components/teacher_price_popup.css */

/* 筛选结果容器 */
.shaixuanjieguo {
   display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
     
}

/* 当没有筛选条件时，筛选结果容器高度为0 */
.shaixuanjieguo.no-filters {
    margin: 0;
    padding: 0;
    height: 0;
    min-height: 0;
    overflow: hidden;
}

/* 移动端：筛选结果容器允许横向滚动 */
@media (max-width: 768px) {
    .shaixuanjieguo.has-filters {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 顺滑滚动 */
        width: 100%;
        max-width: 100vw; /* 确保不超过视口宽度 */
    }
    
    /* 隐藏滚动条（可选，保持美观） */
    .shaixuanjieguo.has-filters::-webkit-scrollbar {
        height: 0;
    }
    
    /* 确保内部 .Selected 容器可以超出父容器宽度并滚动 */
    .shaixuanjieguo.has-filters > .Selected {
        min-width: 100%; /* 至少占满父容器 */
        width: max-content; /* 内容宽度可以超出 */
        flex-shrink: 0; /* 不被压缩 */
    }
    
    /* 确保内部其他内容不被压缩 */
    .shaixuanjieguo.has-filters > * {
        flex-shrink: 0;
    }
}

/* ========================================
   筛选样式已移至组件
   /css/web/components/filter_horizontal.css
   ======================================== */

/* ========== 静态横幅样式 ========== */
.static-banner {
   position: relative;
       height: 110px; /* 统一高度，不区分大屏 */
       border-radius: 12px;
       overflow: hidden;
       /* box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15); */
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0; /* 移除额外margin */
       z-index: 20;
}

/* 小屏优化 */
@media (max-width: 960px) {
  .static-banner {
    height: 90px;
  }
}

.banner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #0f2027 0%, #182153 25%, #341766 50%, #203a43 75%, #0d384a 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  z-index: 1;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.banner-content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 0 50px;
  max-width: 800px;
  text-align: center;
}

.banner-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* 打字机效果样式 */
.typewriter-text {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 2px;
  border-right: 3px solid #ffffff;
  animation: typing 3.5s steps(15, end), blink-caret 0.75s step-end infinite;
  display: inline-block;
}

/* 打字动画 */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #ffffff;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .static-banner {
    height: 80px; /* 减小高度 */
    margin: 0; /* 移除额外margin */
        width: calc(100%);
  }
  
  .typewriter-text {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .static-banner {
    height: 70px; /* 进一步减小 */
  }
  
  .typewriter-text {
    font-size: 18px;
  }
  
  /* 小屏幕时间指针进一步调整 */
  .current-time-on-pointer {
    font-size: 9px;
    padding: 2px 5px;
    transform: translate(calc(-100% - 3px), -50%);
  }
}

/* 筛选样式已移至 /css/web/components/filter_horizontal.css */

/* 深色模式：dark-mode-unified.css（teacher_list 迁入） */





/* 筛选深色模式样式已移至 /css/web/components/filter_horizontal.css */

/* 价格弹窗深色模式样式已移至 css/web/components/teacher_price_popup.css */

/* ===== 平板电脑 769px-1200px - 两边留白 ===== */
@media screen and (max-width: 1200px) and (min-width: 769px) {
    body {
        padding: 0 20px;
    }
    
    .sample-item {
        padding: 5px 0 5px 0;
    }
}

/* ========================================
   分享弹窗样式已移至组件CSS
   css/web/components/card_actions.css
   包含: 分享弹窗、移动端提示、深色模式、响应式适配
   ======================================== */