﻿  /* 标题层级：SEO友好+视觉清晰 */
 
      .main-content   h2 {
            font-size: 24px;
            color: #2c3e50;
            margin: 25px auto;
            padding-left: 18px;
            border-left: 5px solid #3498db;
            font-weight: 600;
            text-align:left;
        }
        .main-content h3 {
            font-size: 20px;
            color: #3498db;
            margin: 25px 0 15px;
            font-weight: 600;
        }
        /* 段落优化：控制长度+增加留白 */
       .main-content  p {
            font-size: 16px;
            margin: 15px 0;
            text-indent: 2em;
            color: #3498db;
            max-width: 1000px;
            line-height: 1.7;
        }
         
 
 
        /* 强调样式：突出核心考点 */
       .main-content  strong {
            color: #2c3e50;
            font-weight: 600;
        }
       .main-content  em {
            color: #e74c3c;
            font-style: italic;
            font-weight: 500;
        }
 
 
    
        
        
  
  .container{ display:flex;min-height:100vh; justify-content:center; width:1200px; margin:20px auto;}
  
   .sidebar{ padding:20px 0; order:2;  width:340px; }
  .main-content{ flex:1;max-width:100%;padding:20px; }
   
   
    .container:has(.sidebar)  .main-content{max-width:none; margin-right:20px;}
  
  
  
  

 .container:has(.sidebar){ justify-content:flex-start;}
  .container:has(.sidebar).main-content{ margin-left:20px;}

.sidebar h2,.sidebar h2 >a,.teachers>h2 a{ font-size:1.4rem; letter-spacing:2px; color:#EC530A;}


.newCourse{ margin-top:30px; }
.newCourse>h2,.newCourse>h2 a{ font-size:1.2rem; text-indent:6px;}

.newCourseList>li{ padding:10px 6px; border-bottom:solid 1px #EDEDED;}
 
.newCourseList>li>a>span{  margin-right:15px; font-size:0.9rem;}
.newCourseList>li>a>span:first-child{  margin-right:5px;}
.courseMenus>li,.moreTeacher{font-size:1.1rem; margin-top:20px; font-size:1.2rem; letter-spacing:2px;}
 
.moreTeacher>a{  letter-spacing:2px; color:#2AA3FB;font-size:1.2rem;}
time{ display:inline-block;}






 aside{
  	border-radius:10px;  padding:20px; 
 	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    }
 






 .course-list li:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }
   .course-list{display: -webkit-flex;display: flex; gap:2rem;width:800px;  margin:0 auto;flex-wrap:wrap;}  
   .course-list>li{    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);border-radius:10px 10px 0 0;  padding:10px;}  
 .courseMessage{
     display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr); gap:1rem; height:180px; width:100%;
 
    }   
     .course-img{grid-column:1 / span 5; grid-row:1 / span 12;}

 .course-img img{	 
	 width: 100%;
 
	height:100%;
 
	border-radius:10px 10px 0 0;
	}
 
 .course-content h1{ font-size:16px;}
    .course-content  h1,.feature,.tags{grid-column:6 / span 7; grid-row:1 / span 3; display: -webkit-flex;display: flex;justify-content:space-around; align-items: center; flex-wrap:wrap;}
     .feature{ grid-row:4 / span 7;}
     .feature>p{ width:100%;font-size:14px; line-height:20px; letter-spacing:2px; margin: 5px;}
     .feature span{ color:Blue;}
     .tags{ grid-row:11 / span 2;}
    
    
 
      .tags>span{ color:#2ABEEE;}
            .tags>span:nth-child(2){ color:#008890;}
                  .tags>span:nth-child(3){ color:#999936;}
                  
                  
                  .courseTip{ padding-top:10px;}
             .courseTip>a,.courseTip>span{ margin-left:20px;}

/*课程目录*/
 
 .catalogue-item li{ margin: 15px 0; letter-spacing:1px;}
 
 
 
 
/*老师*/
.teachers{ padding: 20px 0; text-align: center; }
 
.teachers-list{justify-content: space-around;list-style: none; display: flex; flex-wrap:wrap;  width: 100%; padding: 0; margin: 0 auto;gap:10px;}
 .teachers-list li{  margin: 5px auto; background-color: white;  box-sizing: border-box; border-radius: 8px; 

 width: 48%;
                     
                     
         padding:6px; 
 	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);          
                     
                     
                      }
                      
                      
                      
.teachers-list li>a>figure{width:100%;padding:2px;  
  display: flex; 
	justify-content: center;
	/* 水平居中 */
	align-items: center;
  height:auto;
  

 flex-wrap:nowrap; 
 gap:20px;
}

 
 
.teachers-list li>a>figure img {

	 height: 200px;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
 
 border-radius:50%;


	max-width: 30%;

}
 
 
 
 .teacher-feature{ display: flex; flex-wrap:wrap;  
	justify-content: center;
	/* 水平居中 */
	align-items: center;
  height:100px;}
 
   .teacher-image-caption{ width:100%;}
 .teacher-image-caption h3{ font-size:1.4rem; color:Blue;}
 

    .teacher-tags{justify-content: space-around;list-style: none; display: flex;  min-height:50px; gap:10px;flex-wrap:wrap;  }
  .teacher-tags span{ text-align:center;text-indent:0; font-size:1rem; width:47%;}
  

  .teacherNoImg .teacher-tags span{width:auto;}

.teacher-tags>span:nth-child(1){color:#BFD4FF;}
.teacher-tags>span:nth-child(2){color:#88FF88;}
.teacher-tags>span:nth-child(3){color:#20C1FF;}
.teacher-tags>span:nth-child(4){color:#20FF20;}


  .teacherNoImg h3>span{ display:inline-block; width:100%;  text-align:left;}
  .teacherNoImg h3>span:last-child{font-size:1.1rem; color:#00FFFF;}
  
  
  
  .teacher-feature span{ text-align:left; width:100%; text-indent:0; font-size:1.1rem; color:#8D8D95;}
  
  






  
   .studentComment ul li{ width:100%;padding-left:5px;  min-height:39px; min-line-height:39px; padding-top:10px;}
   .studentComment ul li a{ width:50%; font-size:1.4rem;justify-content: space-between;list-style: none; display: flex; position:relative;}
 .studentComment ul li a span{ width:75%; margin-left:10px;display:inline-block; }

  .studentComment ul>li:not(:last-child){border-bottom:dashed 1px #DCDCDC;}
  .studentComment ul>li:hover{ background-color:#D3FFB3;}

  .studentComment ul>li>a:before{ top:10px;  position:absolute; border-left:solid 5px #20C1FF; content:""; border-top:solid 5px transparent;border-bottom:solid 5px transparent; z-index:99;}
  .studentComment ul>li>a:hover:before{border-left:solid 5px red; }

  .studentComment ul>li>a:hover:before{ border-left:solid 5px red;}
 
 
 
 
 
 
 
   /* 核心重点样式：突出关键信息 */
        .core-focus {
            color: #666;
            font-size: 15px;
            margin: 10px 0 20px;
            text-indent: 0;
            padding: 12px 20px;
            background-color: #f8fafc;
            border-left: 4px solid #3498db;
            border-radius: 4px;
        }
        /* 模块分块：避免文字堆砌 */
        .faq-section, .base-info,.teachers,.catalogue-item, .advantage-item, .teacher-item, .footer {
             border-radius:10px;  padding:12px;  margin:20px auto;
 	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
        }
        
        
        
        
        
        
        
        
        /* 预约模块：视觉突出+转化引导 */
        .reserve-module {
            background-color: #3498db;
            color: #fff;
            padding: 35px 25px;
            border-radius: 8px;
            text-align: center;
            margin: 40px 0;
        }
        .reserve-module h2 {
            border: none;
            padding: 0;
            margin: 0 0 20px;
            color: #fff;
            text-align: center;
        }
        .reserve-module p {
            text-indent: 0;
            color: #fff;
            opacity: 0.9;
            margin: 10px auto;
            max-width: 800px;
        }
  /* FAQ模块标题 */
        .faq-section-title {
            font-size: 22px;
            color: #2c3e50;
            margin-bottom: 24px;
            font-weight: 600;
            border-left: 4px solid #3498db;
            padding-left: 12px;
        }

        /* FAQ列表容器 */
        .course-faq-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* 单个FAQ项 */
        .course-faq-item {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* 鼠标悬浮效果 */
        .course-faq-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        /* FAQ问题（折叠标题） */
        .course-faq-item summary {
            padding: 18px 20px;
            font-size: 16px;
            color: #2c3e50;
            font-weight: 500;
            cursor: pointer;
            list-style: none; /* 隐藏默认三角 */
            position: relative;
            display: flex;
            align-items: center;
        }

        /* 自定义折叠箭头 */
        .course-faq-item summary::after {
            content: "▼";
            color: #3498db;
            font-size: 12px;
            margin-left: auto;
            transition: transform 0.3s ease;
        }

        /* 展开后箭头旋转 */
        .course-faq-item details[open] summary::after {
            transform: rotate(180deg);
        }

        /* 去除Chrome默认的focus样式（可选） */
        .course-faq-item summary::-webkit-details-marker {
            display: none;
        }

        /* FAQ回答区域 */
        .faq-answer {
            padding: 0 20px 20px;
            color: #586675;
            line-height: 1.8;
            font-size: 15px;
        }

        /* 回答内的表格样式 */
        .faq-answer table {
            width: 100%;
            border-collapse: collapse;
            margin: 16px 0;
            background: #f9f9f9;
            border-radius: 4px;
            overflow: hidden;
        }

        .faq-answer th, .faq-answer td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e6e6e6;
        }

        .faq-answer th {
            background-color: #3498db;
            color: #ffffff;
            font-weight: 500;
        }

        .faq-answer tr:last-child td {
            border-bottom: none;
        }

        /* 回答内的图片样式 */
        .faq-answer img {
            max-width: 100%;
            border-radius: 4px;
            margin: 16px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .faq-section-title {
                font-size: 20px;
            }
            .course-faq-item summary {
                padding: 15px 16px;
                font-size: 15px;
            }
            .faq-answer {
                padding: 0 16px 16px;
                font-size: 14px;
            }
            .faq-answer th, .faq-answer td {
                padding: 10px 12px;
                font-size: 14px;
            }
        }
        
        
/*底部内容-1  */
footer{min-height:10px;    }
 
 