/*update time: 2025.09.05 11:23*/
:root {
            --primary: #008890;
            --secondary: #7FCBCD;
            --accent: #2273B7;
            --dark: #1A1A1A;
            --light: #f5f5f7;
            --gray-5:#1A1A1A;
            --gray-4:#333333;
            --gray-3:#595959;
            --gray-2:#909FAC;
            --gray-1:#8C8C8C;
            --gray-0:#CCCCCC;
            
            --red:#D33941;
            --orange:#DB6500;
            --yellow:#F0C800;
            --green:#008890;
            --blue:#2273B7;
            --purple:#4C4D8E;
            --red_1:#F06B72;
            --orange_1:#FFA54F;
            --yellow_1:#FFDF6E;
            --green_1:#7FCBCD;
            --blue_1:#67A2D7;
            --purple_1:#9191C9;
            --red_2:#F7A0A5;
            --orange_2:#FFCC99;
            --yellow_2:#FEEBA3;
            --green_2:#B3E0E2;
            --blue_2:#A4C6E7;
            --purple_2:#C8C8E6;
        }

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

  .custom-link {
    color: var(--gray-3); /* 链接默认颜色 */
    text-decoration: none; /* 去除默认下划线 */
  }
  .custom-link:hover {
    color: var(--secondary); /* 鼠标悬停时的颜色 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
  }

.rectangle {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--primary);
  z-index: -1;
}

.profile-image {
  display: flex;
  flex-direction: column;/* 垂直堆叠 */
  position: fixed;
  object-fit: contain;

  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  width: 20vw;
  height: 10vw;
  transition: all 0.2s ease;
  transform: translate(-50%, -50%);
}

.profile-image img {
            width: 50%; /* 图片宽度占容器宽度的 100% */
            height: auto; /* 高度自动计算，保持图片宽高比 */
            object-fit: contain;
        }

.button-container {
  position: fixed;
  top:78vh;
  left:30vw;
  width: 40vw;
  display: flex;
  justify-content: space-between;
  transform: all 0.3s ease;
}

.ui-button {
  display: inline-block;
  text-decoration: none;
}

.ui-button img {
  width: 3vw;
  height: 3vw;
  object-fit: contain;  
}

.ui-button img:hover {
  opacity: 0.7; /* 鼠标悬停时图片透明度变为 0.7 */
  transform: scale(1.1); /* 鼠标悬停时图片放大 1.1 倍 */
        }

.video-module{
    width: 50%;
    max-width: 800px;
    margin: 0 auto;
}
.image-module{
align-items: center;
}  
.image-module img{
  width: 54vw;
  height: auto;
}

.game-container {
  width: 55vw;
  max-width: 1080px;
}

.iframe-container {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 74.07%;
  height: 0;
  /* height设置为0可以用padding-bottom设置宽高比，padding相对的是父元素的宽度 */
  position: relative;
}

/* 让iframe正确填充容器 */
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;/* 去除边框*/
}

.fix-text{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 可根据需要调整其他样式，如宽度、高度、边框等 */
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.intro_text{
    position: fixed;
    font-size: 4vh;
    text-align: center;
    transform: translate(-50%, 0);
    margin:2vh;
    color: #FFFFFF;
    /*font-style: italic;*/
    font-weight: bold;
}
#top_text {
    top: 0px;
}
#bottom_text {
    bottom: 0px;
}
.content {
  margin-left: 20vw;
  margin-bottom: 8vh;
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  width: 60vw;
}

.section{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:5vh;
}

.static-text {
  width: 44vw;
  height: 20vh;
  font-size: 2vh;
  margin-top:48vh;
  text-align: center;
  color: var(--gray-2);
}

.title1 {
    width: 100%;
  font-size: 4vh;
  font-weight: bold;
  align-self: flex-start;
  margin-top:5vh;
  color: var(--primary);
}

.title2 {
  font-size: 3vh;
  font-weight: normal;
  margin-left: 2vw;
  align-self: flex-start;
  margin-top:3vh;
  margin-bottom:1vh;
  color: var(--gray-4);
}

.title3 {
  font-size: 2.5vh;
  font-weight: bold;
  margin-top:2vh;
  margin-bottom:2vh;
  color: var(--gray-3);
  /*margin-left: 50%;*/
  /*transform: translate(-50%, 0);*/
}

.title4 {
    font-size: 2vh;
    font-weight: normal;
    margin-left: 2vw;
    margin-top:1vh;
    margin-bottom:1vh;
    align-self: flex-start;
    color: var(--gray-3);
}

.title4 img {
  height: 2.383vh; /* 图标高度等于字号带来的框的视觉效果产生的表达 */
  width: auto; /* 宽度按比例自动调整 */
  vertical-align: middle; /* 垂直居中对齐文字 */
  margin-left: 6px; /* 图标与文字间距 */
}

.timeline {
    margin-left: 3vw;
    border-left: 0.2vw solid var(--primary);
    align-self: flex-start;
}

/* 右侧导航栏 */
        #sideNav {
            position: fixed;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 50;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .nav-item {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            color: var(--primary);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .nav-item:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .nav-active {
            background-color: var(--primary);
            color: white;
        }
        
        
        
        
/* 项目卡片容器，用于展示多个卡片 */
    .waterfall-container {
      max-width: 60vw;
      margin: 0 auto;
      position: relative;
      padding-left: 5%;  /* 左内边距（内部留白） */
      padding-right: 5%; /* 右内边距（内部留白） */
    }

    .waterfall-columns {
      display: flex;
      gap: 20px;
      width: 100%;
    }

    .waterfall-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .card-image-container {
      position: relative;
      width: 100%;
    }
    
    .is-leader {
      position: absolute;
      top: 12px;
      right: 12px;
      background-color: white;
      color: var(--orange);
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    /* 卡片样式 - 固定宽度基础 */
    .card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: transform 0.3s ease;
      cursor: pointer;
      width: 100%; /* 确保卡片宽度与列一致 */
    }

    .card:hover {
      transform: translateY(-5px);
    }
    .card.hover-no-move:hover {
      transform: translateY(0); /* 设置为 0，取消位移 */
    }

    .card-image {
      width: 100%;
      display: block;
      object-fit: cover;
    }

    .card-content {
      padding: 16px;
      /* 移除固定高度限制，允许内容自然扩展 */
      background-color: white;
    }

    /* 标题与状态容器 */
    .title-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
    }

    /* 状态样式 - 文字+右侧圆点 */
    .status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .status-landed {color: var(--green); }
    .status-landed .status-dot {background-color: var(--green); /* 落地 - 绿色 */}
    .status-inter {color: var(--blue); }
    .status-inter .status-dot {background-color: var(--blue); /* 内部孵化 - 蓝色 */}
    .status-storage {color: var(--purple_1); }
    .status-storage .status-dot {background-color: var(--purple_1); /* 技术储备 - 紫色 */}
    .status-unfinish {color: var(--gray-1); }
    .status-unfinish .status-dot {background-color: var(--gray-1);; /* 未完成 - 红色 */}

    /* 标签与单位信息容器 - 核心修改 */
    .tags-container {
      display: flex;
      width: 100%; /* 固定总宽度 */
      flex-wrap: wrap; /* 允许标签区域换行后单位信息自动下移 */
      gap: 8px 0; /* 行间距 */
    }

    /* 标签区域 - 固定宽度并允许内部换行 */
    .tags {
      flex: 0 0 76%; /* 占70%宽度 */
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      /* 移除最大高度限制，允许自然扩展 */
      align-items: flex-start; /* 顶部对齐，避免垂直方向空间浪费 */
    }

    /* 单位信息区域 - 固定宽度 */
    .unit-info-wrapper {
      flex: 0 0 24%; /* 占30%宽度 */
      display: flex;
      justify-content: flex-end; /* 右对齐 */
      align-items: center; /* 垂直居中 */
    }

    /* 单位信息 - logo在文字右侧 */
    .unit-info {
      display: flex;
      flex-direction: column; /* 改为垂直排列 */
      align-items: end;
      gap: 6px;
      font-size: 12px;
      color: #666;
     /* white-space: nowrap;  防止文字换行 */
      overflow: hidden;
      text-overflow: ellipsis; /* 超出显示省略号 */
      max-width: 100%; /* 限制在父容器内 */
    }

    .unit-logo {
      width: auto;
      height: 12px;
      /*border-radius: 50%;*/
      object-fit: cover;
    }
    
    .duty {
        text-align: right;
    }

    /* 响应式调整 */
    @media (max-width: 900px) {
      .waterfall-columns {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .waterfall-columns {
        display: grid;
        grid-template-columns: 1fr;
      }
      
      /* 移动端调整宽度比例 */
      .tags {
        flex: 0 0 60%;
      }
      
      .unit-info-wrapper {
        flex: 0 0 40%;
      }
    }
    
    
/* 游戏按钮 */
        .button-group-game {
            display: flex;
            height: 36px; /* 自定义高度 */
            /* gap: 1px; /* 按钮之间的分隔线效果 */
            border-radius: 0.5rem 0.5rem 0 0; /* 只有上半部分圆角 */
            overflow: hidden; /* 确保子元素圆角正确显示 */
        }

        .switch-btn {
            flex: 1; /* 按钮平均分配宽度 */
            padding: 0.5rem;
            font-size: 16px; 
            background-color: var(--secondary);
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            /*gap: 0.5rem;*/
        }

        .switch-btn:hover {
            background-color: var(--primary);
        }

        .switch-btn.active {
            background-color: var(--primary);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }