/*整体布局*/
 
main{width:1200px; margin:0 auto;}
 
 .employ-a-tutor-wrap,.course,.teachers-students-wrap,.tutor-news,.faq-section{
  	border-radius:10px;  padding:12px; 
 	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);
     box-sizing: border-box;
     margin:24px auto;
    }
 
 
 
.breadcrumbs{font-size:14px; color:#777777;display: -webkit-flex;display: flex; margin:0; padding:10px 0 0 0; margin:12px auto;}
.breadcrumbs>li{ position:relative; margin-right:15px;}
.breadcrumbs>li:not(:last-child):after{ position:absolute; content:"/"; padding:0 5px; top:1px;}
 

 
 
 
/*大图展示*/
 
    #headerCarousel { height: 280px; }
        #headerCarousel .carousel-item{ height:100%; width:100%; display: flex; justify-content: center; align-items: center;}
    #headerCarousel img {	max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */ }
 
 
 



/*找家教 做家教*/
 .employ-a-tutor-wrap>div:first-child{grid-column: 1;  text-indent:2em; letter-spacing:3px; line-height:36px; padding:1rem; }
.employ-a-tutor{grid-column:2;display: grid; grid-template-rows: 1fr 1fr;  gap:1rem;}
.employ-a-tutor dl:nth-child(1){grid-row:1;}
.employ-a-tutor dl:nth-child(2){grid-row:2;}
.employ-a-tutor dl dt,.employ-a-tutor dl dd{ border:solid 1px #E8FFD4;}
.employ-a-tutor dl{display: grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(5, 1fr);gap:5px; width:560px;height:120px; }
.employ-a-tutor dl dt{grid-row:1/span 5;  grid-column: 1/span 2;font-size:50px; display:block; text-align:center;  letter-spacing:3px;  background-color:#D7FFBA; color:#D72FEE;}
.employ-a-tutor dl dd:nth-of-type(1){grid-row:1;  grid-column: 3/span 4; text-align:center;}
.employ-a-tutor dl dd:nth-of-type(2){grid-row:2/span 4;  grid-column: 3;}
.employ-a-tutor dl dd:nth-of-type(2) img{ width:100%; height:auto;}
.employ-a-tutor dl dd:nth-of-type(3){grid-row:2/span 4;  grid-column: 4/span 3;display: -webkit-flex;display: flex; justify-content: center; align-items: center;flex-wrap:wrap;}

 
 /*标题*/
 

.teachers-h2,.course-h2,.online-teachers-h2{ position: relative;  
             letter-spacing: 2px;  font-size:24px;
            margin:0 auto; margin-bottom:20px; padding: 5px; min-width:50px; max-width: 80%; width:max-content;
            
            
            padding-bottom: 15px;
border-bottom:solid 2px rgb(98, 152, 234);
&::before{content: "";
    position: absolute;    
      width: 100%;
      left:10px;
      border-bottom: solid 2px rgb(102, 224, 102);   
      bottom:-10px;
   }
   &::after{content: "";
    position: absolute;    
      width: 100%;
      right:10px;
      border-bottom: solid 2px rgb(180, 178, 34);   
      bottom:-6px;
   }
    }
    
   .online-teachers-h2{ font-size:16px;} 
    








#headerCarousel figure{position:relative; }


#headerCarousel figure figcaption{ position:absolute; 
                                width:100%; height:40px; line-height:40px; text-indent:5px;
	                         z-index:100;  display:block;
	                         text-align:left; left:0; bottom:0; font-size:16px; padding:5px 0; letter-spacing:1px; color:White;    
                                background: -webkit-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.7)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(up, rgba(0,0,0,0),rgba(0,0,0,0.7)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(up,rgba(0,0,0,0),rgba(0,0,0,0.7)); /* Firefox 3.6 - 15 */
    background: linear-gradient( rgba(0,0,0,0),rgba(0,0,0,0.7)); /* 标准的语法（必须放在最后）   背景色透明且渐变*/ 
  }

    /* 默认分页器样式 */
  #headerCarousel   .carousel-pagination {
     left: calc( 100% - 50px);  
    
    }






  
    /*家教课程*/
   .course{ min-height:130px;}
.course ul,.oneCourse li a,.twoCourse li a{display: -webkit-flex;display: flex;justify-content:space-between; align-items: center;width:100%;flex-wrap:wrap;row-gap:10px;}

.course ul li{border:solid 1px #EDEDED; box-sizing: border-box; padding:3px; border-radius:10px 10px 0 0;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);transition: all 0.3s ease;}
.course ul li:hover, .course ul li:hover {transform: translateY(-1px);  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }

 .twoCourse li{ width:49%;  } 
 .threeCourse li{ width:32%;  } 
 .fourCourse li{ width:24%;  } 
.oneCourse figure,.twoCourse figure{ width:40%; } 
.oneCourse div,.twoCourse div{ width:calc(60% - 6px); } 
.course ul li img{ 
 max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */
	border-radius:10px 10px 0 0;
}
.course ul li  figcaption{ padding:5px 2px;box-sizing: border-box; font-size:1.2rem; font-weight:bold;}


 
.course ul li div p span{ color:Red;}    
 
.course ul li div p{ font-size:1rem; line-height:36px; letter-spacing:1px; margin: 15px 0;}   

.course .twoCourse li  figcaption{ font-size:1.3rem; }
 
.course ul li .studentNum{ text-align:center;  color:#666666; font-weight:bold; width:100%;}
.course ul li .studentNum span{ color:Blue;}
	
	
	
    
/*老师*/

.shangmen,.online,.students{ border:solid 1px red; width:100%;margin:5px auto;border:dashed 1px #D0FFAF; border-radius:10px; padding:5px;}

.teachers-students-wrap h3{ color:#2ABEEE;}

.teachersOuter{ width:1200px; margin:20px auto;min-height:50px;}

.teachers{ width:100%;min-height:50px; padding:2px;display: -webkit-flex;display: flex; justify-content:space-between; flex-wrap:wrap; }
.teachers>li{ display:block; width:96%; margin:15px auto; position:relative;border-bottom:dashed 1px #EDEDED; padding-bottom:3px;}
  .teachers>li:before{ top:20%; left:-12px; position:absolute; border-left:solid 5px #20C1FF; content:""; border-top:solid 5px transparent;border-bottom:solid 5px transparent; z-index:99;}
   .teachers>li:hover:before{ border-left:solid 5px red;}

   .teachers>li>a:hover{color:Red} 
   .teachers>li>a{ display: -webkit-flex;display: flex; justify-content:space-between; }

.teachers>li>a>span:first-child{ font-size:16px; font-weight:bold;}
.teachers>li>a>span:nth-child(2){font-size:12px;width:30px; color:red;margin-right:5px;}
.teachers>li>a>span:nth-child(3),.teachers>li>a>span:nth-child(4){ width:120px;}
 
.teachers>li>a>span:nth-child(5){ width:220px; }
.teachers>li>a>span:nth-child(6){ width:350px; }
 .teachers>li>a>span:nth-child(7){ width:80px; }













/*资讯*/
.tutor-news{width:1200px;min-height:400px;display: -webkit-flex;display: flex;align-items: center; justify-content:space-between ;flex-wrap:wrap; }

 .tutor-news a:not(:nth-child(6),:last-child)  article { margin-bottom:14px;border-bottom:dashed 1px #DCDCDC; height:100px; padding:10px 0 20px 0; width:580px; }
 
 article:hover a{ color:BlueViolet;}

 .noImg>p{ text-indent:2em; margin-top:10px; line-height:20px;color:#9E9E9E;  letter-spacing:1px;}
 
.oneImg>h3{ width:100%;} 
.oneImg>div{ width:100%; height:80px; display: -webkit-flex;display: flex;align-items: center; justify-content:space-between ;margin-top:10px;} 
.oneImg>div>div,.oneImg>div>div>img{ width:100px; height:80px; border-radius:5px;} 
 .oneImg>div> p{width:470px; color:#9E9E9E;  letter-spacing:1px; text-indent:2em; line-height:22px;height:80px;} 








/* 评论轮播 */
    #commentCarousel { height: 260px;  }
    .carousel-list,#commentCarousel .carousel-item { box-sizing: border-box;}
    #commentCarousel .carousel-item { padding: 10px; text-align: left;}
    
 #commentCarousel .carousel-list{max-width: 80%;  margin:20px auto; }
    
    .comment-header{display: flex;align-items: center; gap:10px;}
        .comment-header>div:nth-child(1){ background-color:#DCDCDC; border-radius:50%;border:solid 1px #CDCDCD; height:60px; width:45px;display: flex; justify-content: center; align-items: center;}
        .comment-header>div:nth-child(1) img{ 	max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */ border-radius:50%;}
    
    .comment-content { color: #666; font-size: 14px; line-height: 1.4;}
   .comment-content>p{ margin:5px auto;}
    /* 评论图片样式（关键：标记直接加在img上，容器仅做布局） */
    .comment-img-group { display: flex; gap: 8px; flex-wrap: wrap; }
    /* 缩略图img直接加标记，容器仅负责样式 */
    .comment-img { 
      width: 60px; height: 60px; border-radius: 4px; 
      cursor: pointer; object-fit: cover;
    }


/* 评论图片预览弹窗（自定义类名） */
   /* 图片预览弹窗样式 */
    .preview-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.95);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      padding: 20px;
    }
    .preview-modal.show {
      display: flex;
    }
    .preview-close {
      position: absolute;
      top: 20px;
      right: 60px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: #fff;
      color: #333;
      font-size: 20px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .preview-close:hover {
      background: #eee;
    }
    #previewCarousel {
      width: 90%;
      max-width: 1200px;
      height: 80vh;
    }
    .preview-carousel-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .preview-carousel-item.preview-active {
      opacity: 1;
      z-index: 1;
    }
    #previewCarousel img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    #previewCarousel .carousel-pagination {
      bottom: 20px;
    }
    #previewCarousel .carousel-dot.preview-active {
      background: #fff;
      transform: scale(1.2);
    }

    /* 响应式适配 */
    @media (max-width: 768px) {

      .comment-single-carousel {
        height: 250px;
      }
      .comment-img {
        width: 60px;
        height: 60px;
      }
      #previewCarousel {
        width: 95%;
        height: 70vh;
      }
      #previewCarousel .carousel-pagination {
        bottom: 15px;
      }
      .carousel-nav {
        display: none !important;
      }
    }

    @media (min-width: 769px) {
      .show-nav-on-pc .carousel-nav {
        display: block !important;
      }
    }


/*星星开始*/

 .rating-dual 
 {
 	 margin-top:10px;
            position: relative;
            left:100px;
            width: 100px;
            height: 20px;
     line-height: 20px;
        }
        
        .rating-dual::before,.rating-dual::after {
            content: '★★★★★';
            position: absolute;
            left:-105%;
            top: 0;
            width: 100%;
            height: 100%;
            color: #ddd;
            font-size: 20px;
            line-height: 20px;
            letter-spacing: 0;
             font-family:Monospace;
        }
        
        .rating-dual::after {
            
            color: #ffc107;
            overflow: hidden;
           width: calc(100px * var(--rating-percent, 0) / 5);/* 5是总分，如果 --rating-percent 的值是百分比，直接用：width: calc(100px * var(--rating-percent, 0));*/
        }


/*星星结束*/