@charset "utf-8";
/* CSS Document */

 .slider {
    width: 100%;
    max-width: 1320px;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 560px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.10);
	margin: auto;
  }

  /* ========== 左侧面板 ========== */
  .text-panel {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #ffffff;
    z-index: 2;
  }

  /* Grid 重叠：所有 slide 叠在同一个位置，容器高度 = 最高那屏 */
  .slides-container {
    flex: 1;
    display: grid;
    padding: 70px 56px;
  }

  .text-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease;
  }

  .text-slide.active {
    opacity: 1;
    visibility: visible;
  }

  .text-slide .line {
    width: 44px;
    height: 3px;
    background-color: #2a2a2a;
    margin-bottom: 26px;
  }

  .text-slide .en-title {
    font-size: 15px;
    font-weight: 300;
    color: #8a8a8a;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  .text-slide .cn-title {
    font-size: 40px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 2px;
    margin-bottom: 32px;
  }

  .text-slide .desc {
    font-size: 16px;
    line-height: 26px;
    color: #9a9a9a;
    font-weight: 400;
    letter-spacing: 0.5px;
  }

  /* ========== 按钮区域（固定高度占位） ========== */
  .btn-wrap {
    min-height: 56px;
    display: flex;
    align-items: center;
    margin-top: 28px;
  }

  .jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background-color: transparent;
    color: #333333;
    text-decoration: none;
    border: 1.5px solid #333333;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }

  .jump-btn:hover {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
  }

  .jump-btn:focus { outline: none; }

  .btn-arrow { transition: transform .25s ease; }
  .jump-btn:hover .btn-arrow { transform: translateX(3px); }

  /* ========== 底部箭头（固定，不参与切换） ========== */
  .controls {
    display: flex;
    gap: 14px;
    padding: 0 56px 44px;
  }

  .controls button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #d4d4d4;
    background-color: transparent;
    color: #555555;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: border-color .25s ease, color .25s ease, background-color .25s ease;
  }

  .controls button:hover {
    border-color: #1a1a1a;
    color: #1a1a1a;
    background-color: #f7f7f7;
  }
  .controls button:focus { outline: none; }

  /* ========== 右侧图片面板 ========== */
  .image-panel {
    flex: 0 0 62%;
    position: relative;
    overflow: hidden;
    background-color: #ddd6cc;
  }

  .image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
  }

  .image-panel img.active {
    opacity: 1;
    position: relative;
  }

  /* ========== 手机端自适应 ========== */
  @media (max-width: 820px) {
    .slider { flex-direction: column; min-height: auto; }
    .image-panel { flex: none; width: 100%; height: 340px; order: 0; }
    .text-panel { flex: none; width: 100%; order: 1; }
    .slides-container { padding: 44px 32px; }
    .text-slide .cn-title { font-size: 32px; margin-bottom: 22px; }
    .text-slide .desc { line-height: 1.8; }
    .text-slide .line { margin-bottom: 20px; }
    .btn-wrap { min-height: 48px; margin-top: 20px; }
    .controls { padding: 0 32px 32px; }
  }

  @media (max-width: 420px) {
    .slides-container { padding: 36px 24px; }
    .text-slide .cn-title { font-size: 28px; }
    .text-slide .en-title { font-size: 13px; letter-spacing: 4px; }
    .image-panel { height: 280px; }
    .controls { padding: 0 24px 24px; }
    .jump-btn { width: 100%; justify-content: center; }
  }