/* 容器 */
    .container {
      max-width: 1400px;
      margin:-14px auto;
  
       
    }

    /* 标题样式 */
    .title {
      font-size: 50px;
      font-weight: bold;
      margin-bottom: 8px;
      color: #000;
    }
    .description{font-size:23px;}

    .highlight {
      color: #ff6f28;
    }

    .description {
      color: #666;
      margin-bottom: 40px;
    }

    /* 内容区布局 */
    .content-wrapper {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    @media (min-width: 768px) {
      .content-wrapper {
        flex-direction: row;
      }
    }

    /* 左侧导航 */
    .navigation {
      flex: 1;
    }

    @media (min-width: 768px) {
      .navigation {
        flex: 0 0 33%;
      }
    }

    /* 分类项样式 */
    .category {
      margin-bottom: 32px;
      cursor: pointer;
    }

    .category-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
          width: 322px;
    }

    .category-name {
      font-size: 30px;
      font-weight: 550;
      color: #5c5c5c;
      transition: color 0.3s ease;
      letter-spacing: 3px;
    }

    .category-eng {
      font-size: 20px;
      color: #888;
    }

    .category-icon {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #5c5c5c;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      transition: background-color 0.3s ease;
    }

    .arrow-down, .arrow-right {
      font-size: 26px;
    }

    .arrow-down {
      display: none;
    }

    .category-line {
      height: 2px;
      background-color: #5c5c5c;
      transition: background-color 0.3s ease;
      width: 322px;
    }

    /* 激活状态样式 */
    .category.active .category-name {
      color: #000;
    }

    .category.active .category-icon {
      background-color: #ff6f23;
    }

    .category.active .arrow-right {
      display: none;
    }

    .category.active .arrow-down {
      display: block;
    }

    .category.active .category-line {
      background-color: #ff6f23;
     width:322px;
    }

    /* 悬停效果 */
    .category:hover .category-name {
      color: #000;
    }

    .category:hover .category-icon {
      background-color: #ff6f23;
      
    }

    .category:hover .arrow-right {
      display: none;
    }

    .category:hover .arrow-down {
      display: block;
    }

    .category:hover .category-line {
      background-color: #ff6f23;
      width: 322px;
    }

    /* 右侧图片展示 */
    .image-showcase {
      flex: 2;
      position: relative;
      height: 554px;
      overflow: hidden;
    }

    .image-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .image-container.active {
      opacity: 1;
      z-index: 1;
    }

    .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    
    }