/* =============================================
   Addmission specific styles 
   1) Admission
   2) Fees
   3) Important Dates
============================================= */

:root {
  --theme-green: #7FEF35;
}


/* =============================================
   1) Admission
============================================= */

.admissions-content {
  position: relative;
  width: 66vw;
  margin-bottom: 12vw;
  overflow: visible; 
  z-index: 2;
  display: block;
}

.admissions-image {
  position: absolute;
  width: 47vw; /* Reduce image width */
  height: auto;
  padding-top: 4vw;
  z-index: 1;
}

.admissions-image img {
  width: 115%;
  height: auto; /* Scale proportionally with width */
  object-fit: contain; /* Ensure complete display without cropping */
  margin-left: 14vw;
  display: block;
}

.admissions-content h1 {
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: bold;
  padding-top: 30vh; /* 减少顶部内边距 */
  margin-bottom: 2vw;
  text-transform: uppercase;
  line-height: 1.2;
}

.admissions-content .title::before {
  content: "#";
  color: #7FEF35;
  margin-right: 10px;
}


.admissions-content p {
  font-size: clamp(1rem, 1.33vw, 1.23rem);
  line-height:1.4;
  margin-bottom: 1.5vw;
  max-width: none; /* 移除宽度限制 */
  color: #ddd;
}

.green {
  font-weight:bold;
  color: #7FEF35;
}

.green :hover {
  font-weight:bold;
  color: #7FEF35;
}


/* =============================================
   2) Fees Section
============================================= */

.fees-section {
  position: relative;
  width: 66vw;
  margin-top: 0vh;
  z-index: 2;
}

.fees-title {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: bold;
  margin-bottom: 4vh;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: #ffffff;
}

.fees-title::before {
  content: "#";
  color: #7FEF35;
  margin-right: 10px;
}

/* 学费信息布局 */
.fees-info {
  display: flex;
  gap: 8vw;
  margin-bottom: 8vh;
}

.tuition-info,
.scholarship-info {
  flex: 1;
}

/* 学费金额显示 */
.tuition-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 2vh;
  flex-wrap: wrap;
  gap: 1vw;
  font-family: 'HYFangDieF', 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

}

.amount-number {
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: bold;
  color: #7FEF35 !important;
  margin: 0 0 1vh 0 !important;
  line-height: 0.5 !important;
  font-family: 'HYFangDieF', 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

}

.tuition-description {
  font-size: clamp(1rem, 1.33vw, 1.23rem);
  line-height: 1.4 !important;
  color: #ddd !important;
  margin: 0 !important;
}

/* 奖学金信息 */
.scholarship-percentage {
  margin-bottom: 2vh;
}

.percentage-range {
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: bold;
  color: #7FEF35 !important;
  margin: 0 0 1vh 0 !important;
  line-height: 0.5 !important;
  font-family: 'HYFangDieF', 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.sub-fee {
  font-size: clamp(1rem, 1.33vw, 1.23rem);
  color: #7FEF35 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-family: 'HYFangDieF', 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

.scholarship-description {
  font-size: clamp(1rem, 1.33vw, 1.23rem);
  line-height: 1.4 !important;
  color: #ddd !important;
  margin: 0 !important;
}


/* =============================================
   3) Important Dates
============================================= */


/* Important Dates */
.important-dates {
  margin-top: 8vw;
  width: 57vw;
  height: auto;
  padding-bottom: 5vh;
}

.dates-title {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: bold;
  margin-bottom: -3vw;
  text-transform: uppercase;
  letter-spacing: 0px;
  color: #ffffff;
}

.dates-title::before {
  content: "#";
  color: #7FEF35;
  margin-right: 10px;
}

/* 时间轴 */
.timeline {
  position: relative;
  margin-top: 4vh;
  height: 300px;
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 0vw;
  right: -11vw;
  height: 0.7vw;
  background: #ffffff;
  transform: translateY(-50%);

  z-index: 0;
}
.timeline-ticks {
  position: absolute;  
  margin-top: 10px;

  top: calc(50% + 5px); /* 紧贴时间线下缘 */
  left: 0;
  right: -11vw; /* 与 timeline-line 保持同宽 */
  height: 10px; /* 与短竖线同高 */
  display: flex;
  justify-content: space-between; /* 13 根线两端贴边，之间等间距 -> 12 段 */
  align-items: flex-start;
  pointer-events: none;
}
.timeline-ticks .tick {
  width: 6px;
  height: 10px;
  background: white;
  flex: 0 0 auto;
}

.timeline-ticks .tick-long {
  height: 60px;
  margin-top: -45px;
}

/* 时间线上方的日期项 */
.date-item-above {
  position: absolute;
  bottom: 52%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transform: translateY(10px);
}

/* 时间线下方的日期项 */
.date-item-below {
  position: absolute;
  top: 52%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* 位置定位 */
.applications-open {
  left: 9.7%;
  transform: translateX(-50%);
  align-items: flex-start;
  text-align: left;
}

.china-deadline {
  right: 31.5%;
  transform: translateX(50%);
  align-items: flex-end;
  text-align: right;
}

.international-deadline {
  left: 60.5%;
  transform: translateX(-50%);
  align-items: flex-end;
  text-align: right;
}

.program-start {
  right: -3.3%;
  transform: translateX(50%);
  align-items: flex-start;
  text-align: left;
}

/* 日期卡片样式 */
.date-card {
  padding: 0.5rem 0.5rem 0.3rem 0.5rem;
  height: 100px;
}
.date-left-card {
  text-align:left;
}

/* 上方卡片样式 */
.date-item-above .date-card {
  margin-bottom: 0;
}

/* 下方卡片样式 */
.date-item-below .date-card {
  margin-top: 0;
}

/* 渐变背景 */
.applications-open .date-card {
  background: linear-gradient(to right, 
  rgba(0, 0, 255, 1) 20%,
  rgba(0, 102, 255, 0) 100%
  );
}

.china-deadline .date-card {
  background: linear-gradient(to right, 
    rgba(127, 239, 53, 0) 20%, 
    rgba(127, 239, 53, 1) 100%
  );
}
.applications-open .date-marker {
  align-self: flex-start;
}

.china-deadline .date-marker {
  margin-bottom: -12px;
  align-self: flex-end;
}

.international-deadline .date-card {
  background: linear-gradient(to right, 
    rgba(127, 239, 53, 0) 20%, 
    rgba(127, 239, 53, 1) 100%
  );
}
.international-deadline .date-marker {
  align-self: flex-end;
}

.program-start .date-card {
  background: linear-gradient(to right, 
  rgba(0, 0, 255, 1) 20%,
  rgba(0, 102, 255, 0) 100%
  );
}
.program-start .date-marker {
  align-self: flex-start;
}

/* 连接点 */
.date-marker {
  border-radius: 0;
  background: #7FEF35;
  margin: 0;
  position: relative;
  z-index: 3;
}

.applications-open .date-marker {
  width: 6px;
  height: 40px;
  margin-top: -12px;
  background: #0000FE;
}

.china-deadline .date-marker {
  width: 6px;
  height: 20px;
  margin-top: 0;
  background: #7FEF35;
}

.international-deadline .date-marker {
  width: 6px;
  height: 40px;
  margin-top: -12px;
  background: #7FEF35;
}
.up-line {
  padding-top: -50px;
}

.program-start .date-marker {
  width: 6px;
  height: 40px;
  margin-top: -12px;
  background: #0000FE;
}

/* 卡片中的所有文字 - 白色 */
.date-card .date-number {
  font-size: clamp(1rem, 1.33vw, 1.23rem);
  font-weight: bold;
  margin: 0 0 0.5vh 0 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  font-family: 'HYFangDieF', 'AlibabaPuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

}

.date-card .date-label {
  font-size: clamp(1rem, 1.33vw, 1.23rem);
  color: #ffffff !important;
  margin: 0 0 0.3vh 0 !important;
  line-height: 1.2 !important;
}

.date-card .date-sublabel {
  font-size: clamp(1rem, 1.33vw, 1.23rem);
  font-weight:bold;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  opacity: 0.9;
}



/* =============================
   响应式：>1600px（大屏桌面）
============================= */
@media (min-width: 1901px) {
  .applications-open {
    left: 7.5%; /* 大于1600px时往左移动 */
  }
  
  .china-deadline {
    right: 28%; /* 大于1600px时往左移动 */
  }
  
  .international-deadline {
    left: 64%; /* 大于1600px时往左移动 */
  }
  
  .program-start {
    right: -1%; /* 大于1600px时往左移动 */
  }
}

/* =============================
   响应式：1200px-1600px（中等桌面）
============================= */
@media (min-width: 1200px) and (max-width: 1400px) {
  .applications-open {
    left: 9.5%; /* 中等桌面屏幕位置 - 介于1024-1200px(12%)和1600px+(7.5%)之间 */
  }
  
  .china-deadline {
    right: 31%; /* 中等桌面屏幕位置 - 介于1024-1200px(34%)和1600px+(28%)之间 */
  }
  
  .international-deadline {
    left: 57.5%; /* 中等桌面屏幕位置 - 介于1024-1200px(57%)和1600px+(58%)之间 */
  }
  
  .program-start {
    right: -3.5%; /* 中等桌面屏幕位置 - 介于1024-1200px(-5.6%)和1600px+(-1%)之间 */
  }
}

/* =============================
   响应式：1024px-1200px（小桌面）
============================= */
@media (min-width: 1024px) and (max-width: 1199px) {
  .applications-open {
    left: 12%; /* 小桌面屏幕位置 */
  }
  
  .china-deadline {
    right: 34%; /* 小桌面屏幕位置 */
  }
  
  .international-deadline {
    left: 57%; /* 小桌面屏幕位置 */
  }
  
  .program-start {
    right: -5.6%; /* 小桌面屏幕位置 */
  }
}

/* =============================
   响应式：≤1024px（平板）
============================= */
@media (max-width: 1024px) {
  .fees-section,
  .admissions-content {
    width: 75vw;
  }

  .fees-info {
    gap: 4vh;
  }

  .timeline {
    height: 220px;
  }

  .timeline-line {
    height: 8px; /* 略薄 */
    right: -6vw; /* 与桌面比例保持近似宽度 */
  }

  .timeline-ticks {
    top: calc(50% + 4px);
    right: -6vw;
  }

  .applications-open {
    left: 14%; /* 平板屏幕位置 - 比1024-1200px(12%)更靠右 */
  }
  .china-deadline {
    right: 36%; /* 平板屏幕位置 - 比1024-1200px(34%)更靠右 */
  }
  .international-deadline {
    left: 55%; /* 平板屏幕位置 - 比1024-1200px(57%)更靠左 */
  }
  .program-start {
    right: -7%; /* 平板屏幕位置 - 比1024-1200px(-5.6%)更靠右 */
  }
}

/* =============================
   响应式：≤768px（手机）
============================= */
@media (max-width: 768px) {
  .fees-section,
  .admissions-content {
    width: 90vw;
  }

  /* 手机版admissions样式调整 */
  .admissions-image {
    position: relative;
    width: 100%;
    padding: 2vh 0;
    text-align: center;
    z-index: 1;
  }

  .admissions-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  .admissions-content {
    text-align: justify;
    width: 100%;
    padding: 1vh;
    word-wrap: break-word;
    hyphens: auto;
  }

  .admissions-content h1 {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    padding-top: 2vh;
  }

  .admissions-content p {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1.2rem;
    max-width: 100%;
    word-wrap: break-word;
    hyphens: auto;
  }

  .fees-section
  {
    padding-right: 5vh;
  }

  .dates-title {
    font-size: clamp(1rem, 4vw, 1.5rem);
    text-align: left;
    white-space: nowrap;
  }

  .fees-info {
    flex-direction: column;
    gap: 3vh;
    text-align: center;
  }

  .fees-title {
    font-size: clamp(1rem, 4vw, 1.5rem);
    text-align: left;
  }

  .tuition-amount {
    justify-content: center;
    text-align: center;
  }

  .amount-number {
    text-align: center;
  }

  .percentage-range,
  .amount-number {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1 !important;
  }
  .sub-fee,
  .tuition-description,
  .scholarship-description,
  .date-card .date-label,
  .date-card .date-sublabel {
    
    font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  }

  /* 手机版文字换行使用连字符 */
  .tuition-description,
  .scholarship-description {
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }

  /* 时间线改为纵向布局 */
  .timeline {
    height: 500px; /* 增加高度，确保tick能均匀分布 */
    display: flex;
    flex-direction: column;
    gap: 2vh;
    position: relative;
    margin-left: -5vw; /* 往左移动5vw */
  }
  
  /* 竖着的timeline线位于中间 */
  .timeline-line {
    position: absolute;
    left: 50%; /* 位于中间 */
    top: 0;
    bottom: 0;
    width: 6px; /* 竖线宽度 */
    height: 500px;
    transform: translateX(-50%); /* 精确居中 */
    margin: 0;
  }
  
  /* 横着的tick位于timeline左侧 */
  .timeline-ticks {
    position: absolute;
    left: 50%; /* 与timeline对齐 */
    top: 0;
    width: 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start; /* 向左对齐 */
    pointer-events: none;
    transform: translateX(-50%);
  }
  
  .timeline-ticks .tick {
    width: 12px; /* 短tick宽度 */
    height: 6px; /* 横着的tick高度 */
    background: white;
    flex: 0 0 auto;
    margin-left: -12px; /* 向左偏移，从timeline线向左延伸 */
    margin-top: -10px;
    margin-bottom: 0;
  }
  
  .timeline-ticks .tick-long {
    width: 20px; /* 第四根tick很长 */
    height: 6px;
    margin: 0;
    margin-left: -10px; /* 长tick向左延伸，与timeline相交于中点 */
  }

  .date-item {
    position: relative;
    transform: none;
    left: auto;
    right: auto;
    bottom: auto;
    margin-left: calc(50% + 30px); /* 位于timeline右侧 */
    margin-bottom: 3vh;
  }
  
  .date-item-above,
  .date-item-below {
    position: relative;
    transform: none;
    align-items: flex-start;
    text-align: left;
    margin-left: calc(50% + 30px); /* 位于timeline右侧 */
    margin-bottom: 3vh;
  }

  .applications-open,
  .china-deadline,
  .international-deadline,
  .program-start {
    position: relative;
    transform: none;
    left: auto;
    right: auto;
    align-items: flex-start;
    text-align: left;
    margin-left: calc(50% + 30px); /* 位于timeline右侧 */
    margin-bottom: 3vh;
  }

  /* 手机端位置交换：china deadline 和 international deadline 交换位置 */
  .china-deadline {
    margin-top: 480px; /* 向下移动480px，与<480px格式保持一致 */
  }

  .international-deadline {
    margin-top: 0px; /* 向上移动，原来 china deadline 的位置 */
  }

  .date-card { 
    width: 140px;
    height: 130px;
    padding: 0.5rem 0.5rem; 
    margin-left: 0; /* 不需要额外偏移 */
  }
  
  .date-marker { 
    display: none; /* 在手机版隐藏date marker */
  }
  
  /* 手机版渐变方向调整 */
  .international-deadline .date-card,
  .china-deadline .date-card {
    background: linear-gradient(to top, 
      rgba(127, 239, 53, 1) 0%,
      rgba(127, 239, 53, 0) 100%
    );
  }
  
  .program-start .date-card,
  .applications-open .date-card {
    background: linear-gradient(to bottom, 
      rgba(0, 0, 255, 1) 0%,
      rgba(0, 102, 255, 0) 100%
    );
  }
}

/* =============================
   响应式：≤780px（中等手机）
============================= */
@media (max-width: 780px) {
  .fees-section,
  .admissions-content {
    width: 90vw;
  }

  .fees-info {
    flex-direction: column;
    gap: 3vh;
    text-align: center;
  }

  .fees-title {
    font-size: clamp(1rem, 4vw, 1.5rem);
    text-align: left;
  }

  .tuition-amount {
    justify-content: center;
    text-align: center;
  }

  .amount-number {
    text-align: center;
  }

  .percentage-range,
  .amount-number {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1 !important;
  }
  .sub-fee,
  .tuition-description,
  .scholarship-description,
  .date-card .date-label,
  .date-card .date-sublabel {
    font-size: clamp(0.9rem, 3.2vw, 1.05rem);
  }

  /* 中等手机版文字换行使用连字符 */
  .tuition-description,
  .scholarship-description {
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }

  .dates-title { 
    margin-bottom: 0.5rem;
    font-size: clamp(0.9rem, 5vw, 1.3rem);
    text-align: left;
    white-space: nowrap;
  }

  .timeline {
    margin-left: -10px; /* 往左移动10px */
  }

  .timeline-line { 
    width: 4px; /* 更细的竖线 */
    left: 85%; /* 保持居中 */
    height: 510px;
    transform: translateX(-50%);
  }
  
  .timeline-ticks {
    left: 85%;
    width: 4px;
    transform: translateX(-50%);
  }
  
  .timeline-ticks .tick {
    width: 10px; /* 短tick宽度 */
    height: 4px;
    margin-left: -10px; /* 向左延伸 */
  }
  
  .timeline-ticks .tick-long {
    width: 20px; /* 第四根tick很长 */
    height: 4px;
    margin-left: -8px; /* 长tick向左延伸，与timeline相交于中点 */
  }
  
  .date-item,
  .date-item-above,
  .date-item-below {
    margin-left: calc(85% + 25px); /* 位于timeline右侧，间距更小 */
  }
  
  /* 将指定日期项移到时间轴左边 */
  .applications-open,
  .international-deadline,
  .program-start {
    margin-left: calc(85% - 175px); /* 位于timeline左侧，150px卡片宽度 + 25px间距 */
  }
  
  /* international-deadline现在也使用date-item-below，需要调整样式 */
  .international-deadline {
    margin-left: calc(85% - 175px); /* 位于timeline左侧 */
  }
  
  .applications-open {
    margin-top: -660px; /* 恢复原来的位置 */
  }

  /* 通过margin-top调整位置 */
  .international-deadline {
    margin-top: 55px; /* 恢复原来的位置 */
  }
  
  .program-start {
    margin-top: 90px; /* 恢复原来的位置 */
  }
  
  /* 中国学生截止日期保持在右边 */
  .china-deadline {
    margin-left: calc(80% + 25px); /* 位于timeline右侧，间距更小 */
    margin-top: 480px; /* 向下移动更多 */
  }
  
  .date-card {
    width: 150px;
    height: 130px;
    margin-left: 0;
  }
  
  .date-marker {
    display: none; /* 在中等手机版也隐藏date marker */
  }
  
  /* 中等手机版渐变方向调整 */
  .international-deadline .date-card,
  .china-deadline .date-card {
    background: linear-gradient(to top, 
      rgba(127, 239, 53, 1) 0%,
      rgba(127, 239, 53, 0) 100%
    );
  }
  
  .program-start .date-card,
  .applications-open .date-card {
    background: linear-gradient(to bottom, 
      rgba(0, 0, 255, 1) 0%,
      rgba(0, 102, 255, 0) 100%
    );
  }
}

/* =============================
   响应式：≤480px（小屏手机）
============================= */
@media (max-width: 480px) {
  .fees-section,
  .admissions-content {
    width: 95vw;
  }

  /* 小屏手机版admissions样式调整 */
  .admissions-image {
    position: relative;
    width: 100%;
    padding: 2vh 0;
    text-align: center;
    z-index: 1;
  }

  .admissions-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  .admissions-content {
    text-align: justify;
    width: 100%;
    padding: 1vh;
    word-wrap: break-word;
    hyphens: auto;
  }

  .admissions-content h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    padding-top: 2vh;
  }

  .admissions-content p {
    font-size: clamp(0.8rem, 4.5vw, 0.95rem);
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 0.9rem;
    max-width: 100%;
    word-wrap: break-word;
    hyphens: auto;
  }

  .fees-info {
    text-align: center;
  }

  .fees-title {
    font-size: clamp(0.9rem, 5vw, 1.3rem);
    text-align: left;
  }

  .tuition-amount {
    justify-content: center;
    text-align: center;
  }

  .amount-number {
    text-align: center;
  }

  /* 小屏手机版文字换行使用连字符 */
  .tuition-description,
  .scholarship-description {
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }

  .dates-title { 
    margin-bottom: 0.5rem;
    font-size: clamp(0.9rem, 5vw, 1.3rem);
    text-align: left;
    white-space: nowrap;
  }
  .percentage-range,
  .amount-number { font-size: clamp(1.7rem, 9vw, 2.4rem); }
  .date-card .date-number { font-size: clamp(0.85rem, 4.5vw, 1.1rem); }
  .date-card .date-label,
  .date-card .date-sublabel { font-size: clamp(0.75rem, 4vw, 1rem); }

  .timeline {
    margin-left: -10px; /* 往左移动5vw */
  }

  .timeline-line { 
    width: 4px; /* 更细的竖线 */
    left: 85%; /* 保持居中 */
    height: 510px;
    transform: translateX(-50%);
  }
  
  .timeline-ticks {
    left: 85%;
    width: 4px;
    transform: translateX(-50%);
  }
  
  .timeline-ticks .tick {
    width: 10px; /* 短tick宽度 */
    height: 4px;
    margin-left: -10px; /* 向左延伸 */
  }
  
  .timeline-ticks .tick-long {
    width: 20px; /* 第四根tick很长 */
    height: 4px;
    margin-left: -8px; /* 长tick向左延伸，与timeline相交于中点 */
  }
  
  .date-item,
  .date-item-above,
  .date-item-below {
    margin-left: calc(85% + 25px); /* 位于timeline右侧，间距更小 */
  }
  
  /* 将指定日期项移到时间轴左边 */
  .applications-open,
  .international-deadline,
  .program-start {
    margin-left: calc(85% - 175px); /* 位于timeline左侧，150px卡片宽度 + 25px间距 */
  }
  
  /* international-deadline现在也使用date-item-below，需要调整样式 */
  .international-deadline {
    margin-left: calc(85% - 175px); /* 位于timeline左侧 */
  }
  
  .applications-open
  {
    margin-top: -660px; /* 恢复原来的位置 */
  }

  /* 通过margin-top调整位置 */
  .international-deadline {
    margin-top: 55px; /* 恢复原来的位置 */
  }
  
  .program-start {
    margin-top: 90px; /* 恢复原来的位置 */
  }
  
  /* 中国学生截止日期保持在右边 */
  .china-deadline {
    margin-left: calc(80% + 25px); /* 位于timeline右侧，间距更小 */
    margin-top: 480px; /* 向下移动更多 */
  }
  
  .date-card {
    width: 150px;
    height: 130px;
    margin-left: 0;
  }
  
  .date-marker {
    display: none; /* 在小屏手机版也隐藏date marker */
  }
  
  /* 小屏手机版渐变方向调整 */
  .international-deadline .date-card,
  .china-deadline .date-card {
    background: linear-gradient(to top, 
      rgba(127, 239, 53, 1) 0%,
      rgba(127, 239, 53, 0) 100%, 

    );
  }
  
  .program-start .date-card,
  .applications-open .date-card {
    background: linear-gradient(to bottom, 
      rgba(0, 0, 255, 1) 0%,
      rgba(0, 102, 255, 0) 100%
    );
  }
}