@charset "utf-8";
/* CSS Document */
/* 全局变量 跟首页保持一致 */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
	--primary:#0F52BA;
	--primary-light:#4A90E2;
	--bg-light:#F5F8FF;
	--text-dark:#333;
	--text-gray:#666;
	--white:#fff;
	--shadow:0 4px 20px rgba(15,82,186,0.15);
}

 body{font-family:"Microsoft Yahei",sans-serif;color:var(--text-dark);background:var(--bg-light);}
.container{width:90%;max-width:1200px;margin:0 auto;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.btn{display:inline-block;padding:12px 28px;border-radius:6px;font-weight:50;transition:all 0.3s;white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);border:none;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(15,82,186,0.3);}
.btn-outline{border:1px solid var(--primary);color:var(--primary);background:transparent;}
.btn-outline:hover{background:var(--primary);color:var(--white);}
/* 导航栏 */
header{position:fixed;top:0;width:100%;background:rgba(255, 255, 255, 0.95);box-shadow:var(--shadow);z-index:999;transition: background 0.3s;}
.nav-wrap{display:flex;justify-content:space-between;align-items:center;height:70px;}
.logo{margin-top:13px; }
.nav-menu{display:flex;align-items: center;}
.nav-menu li {margin-left: 30px;}
.nav-menu a{font-weight:50;color:var(--text-dark);transition:color 0.3s;}
.nav-menu a.active{color:var(--primary);font-weight:bold;}
.nav-menu a:hover{color:var(--primary);}
.nav-actions{display:flex;align-items:center;}
.nav-actions > * {margin-left: 15px;}
.search-box{position:relative;}
.search-box input{padding:8px 15px 8px 35px;border-radius:20px;border:1px solid #ddd;outline:none;width:200px;transition:width 0.3s;}
.search-box input:focus{width:250px;border-color:var(--primary);}
.hamburger{display:none;font-size:24px;cursor:pointer;}
/* 分页  */
.page-box{ display:flex;justify-content:center;margin-bottom:60px; }
.page-item{ width:40px;height:40px;line-height:40px;text-align:center;/*border-radius:50%;*/border:1px solid #ddd;cursor:pointer;transition:all 0.3s;margin:0 5px; }
.page-item.active{ background:var(--primary);color:var(--white);border-color:var(--primary); }
.page-item:hover{ border-color:var(--primary);color:var(--primary); } 
/* 页脚 */
footer{background:var(--primary);color:rgba(255,255,255,0.8);padding:60px 0 30px;}
.footer-grid{  display:flex;flex-wrap:wrap;justify-content:space-between;}
.footer-col{ width:calc(25% - 20px);margin-bottom:30px; }
.footer-col h3{color:var(--white);font-size:18px;margin-bottom:20px;}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{color:rgba(255,255,255,0.8);transition:color 0.3s;}
.footer-col ul li a:hover{color:var(--white);}
.copyright{text-align:center;padding-top:30px;border-top:1px solid rgba(255,255,255,0.1);font-size:14px;}
/* 消息框 */
.mask{ position:absolute; top:0; width:100%; height:300%; z-index:9999; background:#000; filter:alpha(opacity=90);  -moz-opacity:0.9;-khtml-opacity: 0.9; opacity: 0.9;overflow-y:hidden;  }
.msg_dialog{ position: fixed;z-index:5;margin:auto;left:0; right:0; top:0; bottom:0; width:400px; height:180px; background:#fff;border:3px solid #3399FF;box-shadow: 1px 1px 1px #ccc;}
.dialog_title{ width:100%; height:30px; background:#3399FF; }
.msg_title{ display:block; float:left;  margin-left:20px; margin-top:1px; font-size:16px; color:#fff; } /*消息框标题*/
.closed{ display:block;float:right; text-align:center; }
.closed a{ display:block; width:30px; height:28px; font-size:16pt;  color:#FC0; }   
.closed a:hover{ background:#C00; color:#FFF; }
.msg_content{ text-align:center; font-size:20px; color:#000;  }  
.msg_content span{ display:block; margin-top:40px; }
.op_btn{ margin-top:1em; width:40%;margin-left:30%;overflow:hidden; text-align:center; }
.op_btn a{ display:block; width:100%; height:30px; line-height:30px; font-size:14px; border:1px solid #CCC;border-radius:5px; background:#09F; color:#FFF; }      
.op_btn a:hover{ background:#AFDEF8; border:1px solid #3C7FB1; }
.op_btn input { padding:0.3em; margin-right:1em; width:20%; }
/* 热门课程 */
.courses{background:var(--bg-light);}
.courses-grid{display:flex;flex-wrap:wrap;justify-content:space-between;}
.course-card{  background:var(--white); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); transition:transform 0.3s; position: relative; width:calc(33.333% - 20px); margin-bottom:30px; }
.course-card:hover{transform:translateY(-5px);}
.course-img{width:100%;height:180px;object-fit:cover;}
.course-tag{position:absolute;top:10px;left:10px;background:var(--primary);color:var(--white);padding:4px 10px;border-radius:4px;font-size:12px;z-index: 2;}
.course-body{padding:20px;}
.course-title{font-size:18px;margin-bottom:10px;}
.course-meta{display:flex;justify-content:space-between;color:var(--text-gray);font-size:14px;margin-bottom:15px;}
.course-price{color:var(--primary);font-weight:bold;font-size:18px;}

/* 全局滚动条整体宽高 */
::-webkit-scrollbar {  width: 10px;    /* 垂直滚动条宽度 */  height: 8px;   /* 水平滚动条高度 */ }
/* 滚动条轨道（背景槽） */
::-webkit-scrollbar-track {  background: #f1f5fc;  border-radius: 4px; }
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {  background: #0056b3; /* 主蓝色，和网站主题统一 */  border-radius: 4px;  transition: background 0.2s; }
/* 鼠标悬浮滑块加深颜色 */
::-webkit-scrollbar-thumb:hover {  background: #00428c; }
/* 滚动条两端按钮（隐藏） */
::-webkit-scrollbar-button {  display: none; }

/* ========== 重点：滚动容器 最终正确写法 ========== */
/* ID 容器 #scroll-box */
.scroll-box{
  display: block !important;
  width: 100% !important;
  max-height: 510px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* 适配父级 flex 布局，禁止被压缩 */
  flex: none !important;
  flex-shrink: 0 !important;
  /* 内边距不撑大盒子（你全局已开 box-sizing:border-box，这里做兜底） */
  box-sizing: border-box !important;
}

/* 移动端 */
@media (max-width: 1200px) {
  .course-card {
    width: calc(50% - 12.5px);
  }
}
@media (max-width: 992px) {
  .category-card {width:calc(50% - 15px);}
  .teacher-card,.feature-card,.footer-col {width:calc(50% - 15px);}
}

@media (max-width: 768px){	  
       .banner h1{font-size:36px;}
       .banner p{font-size:16px;}
       .section-title h2{font-size:28px;}
       .category-card,.teacher-card,.feature-card{width:45%;margin-right:3%;}
       .feature-card h3{ font-size:20px; }
      .course-card{width:100% !important; min-width:auto;}
      .trial-form input{width:55%;}
	  
      .nav-menu,.nav-actions{display:none;}
      .hamburger{display:block;}
	  .footer-col {width:25%;}
	  .nav-menu.active {
		  display: flex !important;
		  flex-direction:column;
		  position:absolute;
		  top:70px;
		  left:0;
		  width:100%;
		  background:#1e40af;
		  padding:20px;
		  box-shadow:var(--shadow);
	  }
	  .nav-actions.active {
		  display: flex !important;
		  position: absolute;
		  top: 310px;
		  left: 0;
		  width: 100%;
		  padding: 0 20px 20px;
		 background:#1e40af;
		  justify-content:center;
	  }
	
	  .nav-menu li {margin-left:0;margin-bottom:15px;}
	.nav-menu li a{ color:#fff; font-size:15pt;font-weight:bold; }
	.nav-menu li a.active{ color:#ffc857;  }

/* ========================= 公共 end========================================= */