/* 基础样式 */
:root {
    --primary: #8B5A2B;
    --secondary: #D2B48C;
    --accent: #FFA500;
    --dark: #3E2723;
    --light: #F5F5DC;
    --white: #ffffff;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    --green-500: #4CAF50;
    --blue-500: #2196F3;
    --purple-500: #9C27B0;
    --yellow-500: #FFEB3B;
}

body {
    font-family: 'Inter', 'system-ui', 'sans-serif';
    line-height: 1.6;
    color: var(--dark);
 
    }
   section a{color:blue;}
 section{ margin-bottom: 5rem;}
.hero-section{ background-image:url(http://jiajiao.100hsl.com/file/source/pc/6/kaixuebanner.jpg); 
    background-repeat:no-repeat;background-size:cover; position: relative;
    display: flex;flex-wrap: wrap;justify-content: space-around;
height: 360px;
}
.hero-title-div{ height: 300px; margin-left: 100px; width:45%;}
.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    margin-top: 6rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-title-highlight {
    color: var(--primary);
}
.hero-description {
 
    font-size: clamp(1rem, 1vw, 1.5rem);
    color: var(--gray-700);
    margin-bottom: 2rem;
    max-width: 32rem;
}

 

    .hero-img{ width:40%;display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center; 
   }
   figure{display: flex;flex-wrap: wrap;justify-content: space-around;  margin: 0; padding: 0;}
   figcaption{ width:100%; }
     .hero-img img,figure img{ max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */
  }

figure img{width: 100%;border-radius: 20px 0 20px 0;}


.hero-wave{ position: absolute; bottom:-9px;  width: 100%;}


.features-container{display: flex;flex-wrap: wrap;justify-content: space-around; list-style: none; padding: 0; margin: 0; }

.features-title,.subjects-title{ text-align: center; }

.features-container>li{ 
     background-color: var(--white);
    width: 25%; height:200px;
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
   padding: 12px; line-height: 30px; letter-spacing: 2px;
}

.subject-container>li{  width: 40%;  height:auto; margin: 10px auto; }

.subject-container>li h3{ margin: 0;}
.subject-links{ width: 100%;  list-style: none; padding: 0; margin: 0;display: flex;flex-wrap: wrap; }
.subject-links li{width: auto; margin-right: 20px;}
.features-container>li:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.features-container>li h3 {text-align: center; }

 

.teachSty-section{display: flex;flex-wrap: wrap;justify-content: space-around; list-style: none; padding: 0; margin: 0;}



.teachSty-section>div{ width: 42%; }
.teachSty-title{text-align: center; width: 100%; }



.teachSty-section figure{display: flex;flex-wrap: wrap;justify-content: space-around;  margin: 10px auto;
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.teachSty-section figure:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}


.teachSty-section figure img{width: 45%; height: auto;  border-radius: 0 20px 0 20px;}
.teachSty-section figure figcaption{width: 45%; height: auto;}
.teachSty-section figure figcaption a,.teachSty-section figure figcaption span{ display: block; text-align: center;}
.teachSty-section figure figcaption a{ color: red; font-weight: bold;}
.teachSty-section figure figcaption span{text-align:left; font-size: clamp(0.8rem, 1vw, 1.2rem); line-height: 30px; letter-spacing: 1px;}


.faq-section{ margin: 10px auto; width: 80%; margin-bottom: 80px;}
.faq-item{ list-style: none;}
.faq-item span{color: red;  line-height: 40px;}
.faq-item span,.faq-item p{ position: relative;

&:before {
		content: " ";
	 
		position: absolute;
		height: 30px;
		width:30px;
        vertical-align: top;
		 background-image: url(http://jiajiao.100hsl.com/file/source/pc/6/question.png);
		background-position: center center;
		background-repeat: no-repeat;
	    left: -40px;
        background-size: 30px 30px;
	}


}

.faq-item p:before{ background-image: url(http://jiajiao.100hsl.com/file/source/pc/6/answer.png);  }




@media (max-width: 768px) {
  
    .hero-title-div{ margin-left: 30px;  width: 45%;}
    .hero-img{ width: 45%;}
 
.features-container>li{width: 80%;  margin:10px auto; }

.teachSty-section>div{ width: 90%; }
}

@media (max-width: 475px) {

      .hero-title-div{ margin-left: 30px;  width:100%;}
    .hero-img{ width: 100%;}

    .hero-description {
        font-size: 1.25rem;
        padding-left: 50px;
    }
.hero-title-div{ height: 300px; margin:0 auto; width:100%;}
    .hero-section{ height: auto; height: 500px;background-size:100% 100%;}
.hero-title { padding-left: 50px;}

.teachSty-section>div{ width: 100%; }

}