ul{list-style: none; display: flex; flex-wrap:wrap; justify-content:center;  width: 100%; padding: 0; margin: 0;}

.top-header{background: linear-gradient(to right,
				#2231b9,
				#5351e8); width: 100%; height:auto;
                padding: 20px;
            display: flex; flex-wrap: wrap;
            justify-content: space-between;
         box-sizing: border-box;
            }
h1{  font-size: clamp(1.8rem,5vw,3rem);color: white;}    
.top-header>div{width: 45%;}        
.top-header>div:first-child{ color: white; }

.service{list-style: none; display: flex; margin: 0; padding: 0;}
.service>li{ padding:10px 10px 10px 40px; border-radius: 20px; background-color: rgb(81, 96, 210); margin-right: 10px; position: relative;

&::before{ position: absolute; content:"✔️"; padding: 2px; border-radius: 50%; font-size: 0.7em;
     left: 10px; top:25%; background-color: white;}

}


.top-header>div:first-child>a{ margin: 20px auto; color: #2231b9; display: inline-block; padding: 10px 40px 10px 10px; border-radius: 10px; background-color: white; position: relative;
  text-decoration: none; font-weight: bold; letter-spacing: 1px;
&::after{position: absolute; content:"➜";    color: #2231b9;
     right: 10px; top:0;  width: 20px;  font-size: 2em; font-weight: bold; 
 
  transform: scale(0.7);
   transform-origin: left center;

    }

}

.top-header>div:last-child{
	display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center;
  height: auto;
}

.top-header>div:last-child img {

	max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */
  border-radius: 10px;
  box-shadow: 0 0 10px #8a8ed6;
}
 
/*section 标题部分*/
.area h2,.area>p,.Advantages h2,.Advantages>p,.Curriculum h2,.Curriculum p,.teachers h2,.teachers p,.students h2,.students p,.yuyue h2,.yuyue p{ text-align: center; margin: 20px auto; width: 100%;}
.area h2>span,.Advantages>h2>span,.Curriculum h2>span,.teachers h2>span,.students h2>span,.yuyue h2>span{position: relative;

&::after{ position: absolute; content: ""; height: 3px; width: 80px; background-color: #5351e8;
 bottom:-10px; left: calc(50% - 40px);

}

}
.yuyue h2>span,.yuyue >p{color: white;}
.yuyue h2>span::after{ background-color: white;}

.area{ width:98%; margin:0 auto;}
.area>ul:nth-child(3){ margin:10px auto;}
.area>ul:nth-child(3)>li{ margin: 5px; padding: 4px 8px; border-radius: 8px; background-color: rgb(229, 231, 243);font-size: clamp(0.8rem,5vw,1rem);}

.area-detail{ justify-content: space-around;   box-sizing: border-box; padding: 20px 0; margin: 20px 0;}
.area-detail>li{width:31%; 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;
  }

.area-detail>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);
}

.area-detail>li>*{width:100%;}
.area-detail>li>img{border-radius: 20px 20px 0 0;}
.area-detail>li>p{ padding-left: 20px; font-size: 0.8em;
  position: relative;
&::before{ position: absolute; content:"✓"; padding: 2px 4px; border-radius: 50%; font-size: 8px; color:white;
     left: 2px; top:calc(50% - 8px); background-color: rgb(177, 177, 234);}
    }

.area-Explanation{ color: #777777;}

.area>a { width:clamp(12rem,21vw,14rem); margin: 20px auto; color: white; display: block; padding: 10px 40px 10px 10px; border-radius: 10px; background-color: #2231b9; position: relative;
  text-decoration: none; font-weight: bold; letter-spacing: 1px;
&::after{position: absolute; content:"➜";    color: white;
     right: 10px; top:0;  width: 20px;  font-size: 2em; font-weight: bold; 
 
  transform: scale(0.7);
 

    }

}

/*区域优势*/

.Advantages{ background-color: rgb(242, 248, 246); padding: 20px 0;justify-content: space-around;}
.Advantages ul{justify-content: space-around;}
.Advantages ul li{ background-color: white; width:30%; border-radius: 8px;   padding: 6px; box-sizing: border-box; position: relative;
  &::before{content: attr(data-emoji); width: 50px; height: 50px;  background-color: aqua; position: absolute; border-radius: 8px; text-align: center; line-height: 50px; font-size: 1.5rem; }
}
.Advantages li h3{ margin-top: 60px; 
}
.Advantages li p{ color: #555555; 
}



/*课程*/

.Curriculum-list{justify-content: space-around;}
.Curriculum-list li{width:30%; padding: 0; margin: 5px auto; }
.Curriculum-list li img{width:100%; border-radius:8px 8px 0 0; vertical-align: top;}
.Curriculum-list li div{width:100%; background-color:rgb(242, 248, 246); border-radius: 0 0 8px 8px; padding: 8px; box-sizing: border-box;}
.Curriculum-list li div>p:first-child{ height: 2.4rem;}

.Curriculum-list li div>p:first-child>a{ margin-right: 5px; text-decoration: none; display:inline-block;}
.Curriculum-list li div>p:first-child>span{ margin-right: 5px; text-decoration: none; display: inline-block;}
.Curriculum-list li div>p{ margin:0; text-align: left;}


/*老师*/
.teachers{background-color: rgb(242, 248, 246); padding: 20px 6px; text-align: center; }
 
.teachers-list{justify-content: space-around;}
.teachers-list li{ width: 24%; margin: 5px auto; background-color: white; padding: 8px; box-sizing: border-box; border-radius: 8px; 
  display: flex; flex-wrap: wrap;justify-content: center;
}
.teachers-list li>*{width:100%; }
.teachers-list li>div{width:40%;padding:2px;  border-radius:50%; border: #2231b9 1px solid; box-sizing: border-box;
  display: flex; 
	justify-content: center;
	/* 水平居中 */
	align-items: center;
  height:auto;
    box-shadow: 0 0 10px #8a8ed6;
}

 
.teachers-list li>div img {

	max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */
 border-radius:50%;
}
 
.teachers-list li h3{ text-align: center;}
.teachers-list li>p:nth-child(3)>span:first-child{ font-weight: bold; position: relative;  margin-right: 6px;
&::after{position: absolute; content: "|"; color: red; height: 100%; width: 4px; right:-5px;}

}
 
.teachers-list li>p:nth-child(4){ display: flex; justify-content: space-around; flex-wrap: wrap;}
.teachers-list li>p:nth-child(4) span{ padding: 4px; border-radius: 4px; 
  box-sizing: border-box; background-color: aqua;
 margin: 8px;

}
.teachers>a{ border-radius: 8px; padding: 6px; border: #2231b9 1px solid; 
  text-decoration: none; margin: 10px auto; display:inline-block;
}
.teachers>a:hover{ background-color:#2231b9; color: white; border: white 1px solid; 
}


/*学生*/

.students{background-color: white; padding: 20px 6px; text-align: center; }
 
.students-list{justify-content: space-around;}
.students-list li{ width: 24%; margin: 5px auto; background-color: rgb(242, 248, 246); padding: 8px; box-sizing: border-box; border-radius: 8px; 
  display: flex; flex-wrap: wrap;justify-content: center;
}
.students-list li>*{width:100%; }
.students-list li>div{width:40%;padding:2px;  border-radius:12px; border: #2231b9 1px solid; box-sizing: border-box;
  display: flex; 
	justify-content: center;
	/* 水平居中 */
	align-items: center;
  height:auto;
    box-shadow: 0 0 10px #8a8ed6;
}

 
.students-list li>div img {

	max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */

  border-radius:12px;

}
 
.students-list li h3{ text-align: center;}
.students-list li>p:nth-child(4)>span:first-child{ font-weight: bold; position: relative;  margin-right: 6px;
}
  

/*预约老师*/
.yuyue{background: linear-gradient(to right,
				#2231b9,
				#5351e8); width: 100%; height:auto;
                padding: 10px;
            
         box-sizing: border-box;
        }
#yuyue{display: flex; flex-wrap: wrap;
            justify-content: space-around;
             flex-wrap: wrap;
             max-width: 1100px;
              margin: 0 auto;
  margin-bottom: 40px;
            }



#yuyue>div{ display: flex; flex-wrap: wrap;
            justify-content: space-around;
         box-sizing: border-box;
           padding: 20px;
          background-color: white;
           border-radius: 8px;
            margin: 20px auto;
            max-width: 800px;
            
             flex-wrap: wrap;
        }
#yuyue>div>div{width: 45.5%;  box-sizing: border-box; display: flex; flex-wrap: wrap; margin-bottom: 10px;}
       #yuyue>div>div label, #yuyue>div>div input{ display: block; height: 26px; line-height: 26px; width: 70%;}
        #yuyue>div>div input{ border: #DCDCDC solid 1px; border-radius: 4px;  
          transition: border-color 0.3s ease; /* 平滑过渡效果 */
            outline: none; /* 移除浏览器默认的焦点轮廓 */}
       #yuyue>div>div input:focus{border-color: #4a90e2;}
       #yuyue>div>div:nth-child(5){width:calc(94% + 12px) }
       #yuyue>div>div:nth-child(5)  input{width:86% }
      
       .Verify-button,#tj{padding: 2px 4px; border-radius: 4px; cursor: pointer; margin-left: 8px; height: 26px; line-height: 26px; font-size: 0.8rem;
   
            background-color: #4a90e2; /* 初始背景色 */
            color: white;
            
            /* 过渡设置：对背景色应用0.3秒的平滑过渡 */
            transition: background-color 0.3s ease; }
        .Verify-button:hover,#tj:hover  {
            background-color: #357abd; /* 悬停时的背景色 */
        }
        
        /* 点击时的样式 */
        .Verify-button:active,#tj:active {
            background-color: #285a8e; /* 点击时的背景色 */
        }

 #tj{width:90%; margin:0 auto; border: 0; letter-spacing: 2px; font-size: 1rem;}


   #yuyue>figure{ width: 150px; border: #2231b9 1px solid; padding: 10px; border-radius: 8px; background-color: white;}
    #yuyue>figure img{ width: 150px; }
            #yuyue figcaption{text-align: center;}   
         #yuyue figcaption span{ color: red; font-weight: bold;}   
 /* max-width: 1000px */

@media screen and (max-width: 1000px) {

 
.area-detail>li{width:45%; }

}

/* max-width: 768px */

@media screen and (max-width: 768px) {

	.top-header>div{
     width: 100%;
	}
  .Curriculum-list li{width:98%;}
    .teachers-list li,.students-list li{ width: 48%; }
    
    #yuyue>div>div{width:96%;}
    #yuyue>div>div:nth-child(5){width: 96%;}
    .yuyue>div>div:nth-child(5)  input{width:70% }
}
 /* max-width: 468px */

@media screen and (max-width: 468px) {
.area>ul:nth-child(3)>li{ padding: 4px 6px;}
.area-detail>li{width:100%; }
.service>li{ margin: 5px auto; width: 100%;}
.Advantages ul li{  width:96%; margin: 10px auto;}
  .teachers-list li{ width: 98%; }


}