* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Inter', system-ui, sans-serif;
    }
    
    /* 全局样式 */
    body {
      color: #333;
      line-height: 1.6;
    }
    body,div,p,h1,h2,h3,h4,h5,i{
      margin: 0;
      padding: 0;
    }
    .h5-display{
      display: block;
    }
    .pc-display{
      display: none;
    }
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    .section {
      padding: 2rem 0;
    }
    
    h1, h2, h3 {
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    
    a{

      text-decoration: none;
    }
    
    .btn {
      display: inline-block;
      background-color: #FF9130;
      color: white;
      height: 3.34rem;
      width: 100%;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      transition: background-color 0.3s ease;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2rem;
    }
    .btn img{
      margin-left: 0.5rem;
    }

    .card {
      background: linear-gradient( 180deg, #FFFBF7 0%, #FFF2EE 100%), #FFFFFF;
      border-radius: 16px;
      padding: 1.5rem;

    }
    
    /* 头部区域 */
    .hero {
       background: url(../images/h5Banner.png) no-repeat bottom center;
       background-size: 100% auto;
    }
    .h5Banner-text{
      width: 100%;
    }
    
    .hero-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    
    .hero-text {
      text-align: center;
      margin-bottom: 2rem;

    }
    
    .hero-title {
      font-size: clamp(1.8rem, 5vw, 2.5rem);
      color: #333;
    }
    
    .hero-highlight {
      margin-top: 0.6rem;
      color: #FF5500;
    }
    
    .hero-image {
      height: 286px;
    }
    
    /* 特点区域 */
    .features-title {
      text-align: center;
      font-size: clamp(1.5rem, 3vw, 2rem);
      margin-bottom: 0.5rem;
      color: #7A3E22;
      line-height: 40px;
    }
    .features-title text{
      color:#FF5100 ;
    }
    
    .features-subtitle {
      text-align: center;
      color: #71584E;
      margin-bottom: 2rem;
    }
    
    .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    
    .feature-icon {
      color: #FF7A00;
      text-align: center;
      margin-bottom: 1rem;
    }
    
    .feature-title {
      text-align: center;
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      color: #462D23;
    }
    
    .feature-desc {
      text-align: center;
      color: #7D635D;
    }
    
    /* 证书区域 */
    .certificate-top{
        text-align: center;
      }
      .certificate-title{
        color: #7A3E22;
        font-size: clamp(1.5rem, 3vw, 2rem);
        line-height: 40px;
      }
      .certificate-title text{
        color: #FF5100;
      }
      .certificate-top-text{
        color: #71584E;
        font-size: 1.2rem;
      }
    .certificate-details {
        flex: 1;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -4px rgba(241,127,85,0.1), 0px 10px 15px -3px rgba(241,127,85,0.1);
        border-radius:16px;
      }
      
    .certificate-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 3rem;
    }
    
    .certificate-image {
      margin-bottom: 2rem;
    }
    
    .certificate-image img {
      width: 100%;
      max-width: 400px;
      border-radius: 8px;
    }
    
    .certificate-list {
      list-style: none;
      padding: 1rem 0;
    }
    
    .certificate-item {
      padding: 0.75rem 1.25rem 0.75rem 0;
      display: flex;
    }
    .certificate-list .certificate-item:nth-child(2n) {
      background-color: #FFFBF7; 
    }
    .certificate-icon {
      color: #22c55e;
      margin:  0.16rem 0.9rem 0 1rem;
      margin-top:;
    }
    
    .certificate-text h3 {
      font-size: 1.2rem;
      margin-bottom: 0.25rem;
      color: #253858;
      display: flex;
      align-items: center;
    }
    
    .certificate-text p ,.certificate-text a{
      color: #4B5563;
      margin-bottom: 0;
    }
    .certificate-text a:hover{
      color: #1E7DFF;
    }
    /* 课程目录 */
    .title {
        text-align: center;
        margin: 0rem 0;
        color: #7A3E22;
        font-size: clamp(1.5rem, 3vw, 2rem);;
        line-height: 40px;
    }

    .title .highlight {
        color: #FF5100;
    }
    .table-container {
        max-width: 1200px;
        margin: 0 auto;
        box-shadow: 0px 4px 6px -4px rgba(241,127,85,0.1), 0px 10px 15px -3px rgba(241,127,85,0.1);
        border-radius: 16px 16px 16px 16px;
        padding: 16px;
        box-sizing: border-box;
    }
    .course-table .table-list{
      background-color: #fff;
     border-collapse: collapse;
    border-radius: 16px ;
    border: 1px solid #FF9130;
    overflow: hidden;
    }
    .course-table {
        width: 100%;
        border-collapse: collapse;
        background-color: #fff;
    }

    .course-table th,
    .course-table td {
        padding: 8px 4px 8px 16px;
        text-align: left;
        vertical-align: middle;
    }
    .course-table td{
      border-bottom: 1px solid #FFDABA;
      color: #666;
      border-right: 1px solid #FFDABA;
    }
    .course-table td:last-of-type,.course-table th:last-of-type{
      border-right: 0;
      padding: 0;
      text-align: center;
      min-width: 60px;
    }

    .course-table th {
        font-weight: bold;
        color: #333;
        font-size:clamp(1.1rem, 3vw, 1.5rem);;
    }
    .course-table .table-left{
      border-right: 1px solid #FFDABA;
      color: #333;
    }
    .course-table .table-bottom{
      border-bottom: 0;
    }
    /*名师团队*/
    .team-top-img{
      position: absolute;
      top: -6px;
      left: 50%;
      width: 208px;
      height: 52px;
      margin-left: -104px;
    }

    /* 容器样式 */
    .team-container {
        max-width: 1200px;
        margin: 0 auto;
        border: 1px solid #ffb070;
        border-radius: 12px;
        padding: 20px 20px 60px 20px;
        position: relative;
        margin-top: 48px;
    }

    /* 名师卡片网格 */
    .teacher-grid {
      margin-top: 70px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }

    /* 名师卡片样式 */
    .teacher-card {
      background: linear-gradient(rgba(241, 127, 85, 0.2) 10%, #fff 50%);
      border-left: 1px solid #F2BA6D;
      border-radius: 16px;
      padding: 15px 20px;
      min-height: 120px;
    }

    .teacher-card h3 {
        color: #FF9130;
        margin-bottom: 10px;
        font-size: 1.25rem;
        font-weight: normal;
    }

    .teacher-card p {
        color: #4B5563;
        font-size: 0.9rem;
        line-height: 1.6;
    }
    /* 表单区域 */
    .form-section-title {
      text-align: center;
      font-size: clamp(1.5rem, 3vw, 2rem);
      margin-bottom: 0.5rem;
      color: #7A3E22;
    }
    
    .form-section-subtitle {
      text-align: center;
      color: #71584E;
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }
    .form-section{
      width: 100%;
      max-width: 57.86rem;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .form-container {
      background: #F9FAFB;
      box-shadow: 0px 4px 6px -4px rgba(0,0,0,0.1), 0px 10px 15px -3px rgba(0,0,0,0.1);
      border-radius: 16px;
      padding:1rem;
      width: 100%;
    }
    
    .form-box .form-group {
      margin-bottom: 1.5rem;
      width: 100%;
    }
    .form-box{
      flex-direction: column;
       align-items: center;
      justify-content: space-between;
    }
    .form-label {
      display: block;
      margin-bottom: 0.5rem;
      color: #333;
      font-weight: 500;
    }
    
    .form-required {
      color: #ef4444;
    }
    
    .form-input {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #D1D5DB;
      border-radius: 8px;
      font-size: 1rem;
    }
    
    .form-input:focus {
      outline: none;
      border-color: #FF7A00;
      box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.2);
    }
    
    .form-row {
      display: flex;
      gap: 1rem;
    }
    
    .form-row .form-group {
      flex: 1;
      margin-bottom: 0;
    }
    .form-code{
      width: 100%;
    }
    .form-captcha{
      background: none;
      border: 0;
      font-size: 1rem;
      padding:0.75rem;
      flex: 8;
    }
    .form-captcha:focus {
      outline: none;
    }
    .form-inputBox:focus-within{
      border-color: #FF7A00;
      box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.2);
    }
    .form-inputBox{
      border: 1px solid #D1D5DB;
      display: flex;
      width: 100%;
      border-radius: 8px;
      background: #fff;
      justify-content: space-between;
    }
    .form-numble{
      border: 0;
      background: none;
      color: #1E7DFF;
      width: 132px;
      text-align: center;
      font-size: 1rem;
      cursor: pointer;
    }
    .form-submit {
      width: 100%;
      padding: 1rem;
      font-size: 1rem;
      margin: 24px auto; 16px auto;
    }
    
    .form-note {
      text-align: center;
      font-size: 0.875rem;
      color: #6B7280;
    }
    
    /* 响应式设计 - 平板及以上设备 */
    @media (min-width: 768px) {
      .pc-display{
      display: block;
    }
    .h5-display{
      display: none;
    }
      .section {
      padding: 4rem 0;
      }
      .hero{
       background:url(../images/banner.png) no-repeat bottom center #FFF5EE;
      }
      .hero-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 492px;
      }
      
      .hero-text {
        text-align: left;
        flex: 1;
        margin-right: 2rem;
        margin-bottom: 0;
        
      }
      .btn{
        width:9.6rem;
      }

      
      .features-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      
      .certificate-content {
        flex-direction: row;
        align-items: center;
      }
      
      .certificate-image {
        flex: 1;
        margin-right: 2rem;
        margin-bottom: 0;
      }
      .form-container{
        padding:2.5rem;
      }
      .form-box{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
    .form-submit {
      width: 12.5rem;

    }
    .table-container{
      padding: 32px;
    }
    .course-table th, .course-table td {
      padding: 12px 32px;
    }
    .title{
      margin: 2rem 0;
    }
    }