.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
  padding: 0.6rem 0;
}

.navbar {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.logo {
  margin-right: 2rem;
}

.logo img {
  height: 16px;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
  flex-grow: 1;
  position: relative;
}

.nav-item {
  position: relative;
  margin-right: 2.2rem;
}

.nav-link {
  color: #000;
  text-decoration: none;
  font-size: 1rem;
  padding: 0.5rem;
  font-weight: bold;
  position: relative;
}

.nav-link:hover {
  color: #666;
}

.banner {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-top: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left center;
}

.banner-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}

.banner-slide.active {
  opacity: 1;
  animation: zoomEffect 5s ease-in-out;
}

@keyframes zoomEffect {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.banner-text {
  position: absolute;
  top: 30%;
  left: 10%;
  z-index: 3;
  color: #fff;
}

.banner-text h1 {
  font-size: 120px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-text p {
  font-size: 32px;
  margin-top: 20px;
  letter-spacing: 1px;
  animation: fadeInUp 1s ease-out 0.3s;
  animation-fill-mode: both;
}

body {
  margin: 0;
  padding: 0;
}

/* 添加蒙版样式 */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35); /* 黑色蒙版，透明度0.9 */
    z-index: 2; /* 确保在图片上层，文字下层 */
}

.banner-text .download-text {
    display: flex;
    font-size: 1rem;
    margin-top: 15px;
    letter-spacing: 1px;
    animation: fadeInUp 1s ease-out 0.6s; /* 添加0.6s延迟，在第二行文字之后显示 */
    animation-fill-mode: both;
    align-items: center;
    margin-top: 3rem;
}
.banner-text .download-text img{
  width: 25px;
  padding-right: 5px;
}

.download-buttons {
    display: flex;
    gap: 1rem; /* 按钮之间的间距 */
    margin-top: 1rem;
    animation: fadeInUp 1s ease-out 0.9s;
    animation-fill-mode: both;
    margin-top: 2rem;
}

.download-btn {
    width: 3rem;
    height: 3rem;
    border: 1px solid #fff;
    display: block;
    transition: all 0.3s ease;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70% auto;
    position: relative;
}

/* 为每个按钮添加不同的背景图 */
.download-buttons a:nth-child(1) {
    background-image: url('../img/xz01.png');
}

.download-buttons a:nth-child(2) {
    background-image: url('../img/xz02.png');
}

.download-buttons a:nth-child(3) {
    background-image: url('../img/xz03.png');
}

/* 修改悬停效果 */
.download-btn:hover {
    background-color: #07b53b;
    border-color: #07b53b;
    background-image: url('../img/down.svg') !important;
    background-size: 60% auto;
}

/* 加内容 box 样式 */
.content-box {
    text-align: center;
    padding: 6rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

.content-box h2 {
    font-size: 4rem;
    font-weight: bold;
    margin: 0;
    color: #333;
}

.content-box p {
    font-size: 1.5rem;
    color: #666;
    margin: 1rem 0;
}

.content-box .description {
    font-size: 1.2rem;
    color: #888;
    max-width: 800px;
    margin: 1rem auto;
    line-height: 1.6;
}

/* 添加新的 box 样式 */
.life-box {
    padding: 1rem 0;
}

.life-content {
    max-width: 1200px;
    margin: 0 auto;
}

.life-box h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5rem;
}

.life-box p {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
}

.life-list{
  display: flex;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.life-txt{
  width:50%;
  padding: 2rem;
  position: relative;
  box-sizing: border-box;
}
.life-txt .top-pic{
  border-radius: 10px;
  border: 1px solid #eee;
  width: 80px;
}
.life-txt .top-pic img{
  width: 100%;
}
.life-txt .life-tit{
  font-size: 2.2rem;
  font-weight: bold;
  margin-top: 1rem;
  color: #000;
}
.life-txt .life-ftit{
  font-size: 0.8rem;
  color:#07b53b;
  margin-top: 1rem;
}
.life-txt .life-ftit p{
  margin: 0;
  padding: 0;
  color:#07b53b;
}

.life-txt .life-smtext{
  font-size: 1.1rem;
  color:#777;
  margin-top: 2rem;
  line-height: 1.8;
  width: 100%;
  box-sizing: border-box;
}
.r-l{
  flex-direction:row-reverse;
}

.life-pic{
  width: 50%;
  box-sizing: border-box;
}
.life-pic img{
  width: 100%;
  display: block;
  position: relative;
}

.life-line{
  position: relative;
  border-right: 1px dashed #eee;
  box-sizing: border-box;

}
.life-line::before{
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border:1px solid #888;
  border-radius: 50%;
  position: absolute;
  top:0;
  right: -3.5px;
  background: #fff;
  box-sizing: border-box;
  z-index: 99;
}

/* 添加平滑滚动效果 */
html {
    scroll-behavior: smooth;
}

/* 添加 messenger box 样式 */
.messenger-box {
    background-color: #fff;
    padding: 6rem 0;
}

.messenger-content {
    max-width: 1200px;
    margin: 0 auto;
}

.messenger-box h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5rem;
}

.messenger-box p {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
    padding: 0 4rem;
}

.messenger-tit{
  text-align: center;
}


/* 修改导航菜单相关样式 */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
    flex-grow: 1;
    position: relative;
}

.nav-item {
    position: relative;
    margin-right: 2.2rem;
}

.nav-link {
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.5rem;
    font-weight: bold;
    position: relative;
}

/* 修改下划线样式 */
.nav-menu::after {
    content: '';
    position: absolute;
    bottom: -15px;
    height: 4px;
    background-color: #000; /* 改为黑色 */
    transition: all 0.3s ease;
    /* 使用 CSS 变量控制下划线位置和宽度 */
    left: var(--underline-offset, 0);
    width: var(--underline-width, 80px);
}

/* 激活状态的导航项样式 */
.nav-link.active {
    color: #000; /* 改为黑色 */
}

/* 修改缩小状态的样式 */
.banner.shrink {
    width: 88%;
    height: 88vh;
    margin: 0 auto;
    margin-top: 80px;
    transform: scale(0.88) translateX(7%);
}

/* 添加展开动画的类 */
.banner.expanding {
    transform-origin: left center;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 添加网格布局样式 */
.messenger-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    padding: 0 2rem;
}

.messenger-item {
    text-align: center;
    padding: 1rem 0.5rem;
    background: #fff;
    transition: all 0.3s ease;
}

.messenger-item:hover {
    transform: translateY(-5px);
}

.item-pic {
   width: 100%;
   text-align: center;
   margin-bottom: 20px;
}

.item-pic img {
    width: 90%;
    object-fit: contain;
}

.messenger-item h3 {
    font-size: 1.2rem;
    color: #333;
    margin: 0 0 1rem;
}

.messenger-item p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    padding: 0;
}

/* 修改 messenger-box 的样式 */
.messenger-box {
    background-color: #fff;
    padding: 6rem 0;
}

.messenger-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* 添加响应式样式 */
@media screen and (max-width: 768px) {
    /* 导航栏响应式 */
    .navbar {
        padding: 0.5rem;
    }

    .logo img {
        height: 14px;
    }

    .nav-item {
        margin-right: 1rem;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    /* Banner 响应式 */
    .banner-text {
        left: 5%;
        top: 25%;
    }

    .banner-text h1 {
        font-size: 3rem;
    }

    .banner-text p {
        font-size: 1.2rem;
    }

    /* Content box 响应式 */
    .content-box {
        padding: 3rem 1rem;
    }

    .content-box h2 {
        font-size: 2.5rem;
    }

    /* Life box 响应式 */
    .life-list {
        flex-direction: column;
    }

    .life-txt, .life-pic {
        width: 100%;
        padding: 1rem;
    }

    .life-txt .life-tit {
        font-size: 1.8rem;
    }

    .r-l {
        flex-direction: column;
    }

    .life-line {
        border-right: none;
        border-bottom: 1px dashed #eee;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .life-line::before {
        right: 50%;
        top: auto;
        bottom: -4px;
        transform: translateX(50%);
    }

    /* Messenger grid 响应式 */
    .messenger-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .messenger-item {
        padding: 1rem;
    }

    .messenger-box p {
        padding: 0 1rem;
    }

    /* 下载按钮响应式 */
    .download-buttons {
        gap: 0.5rem;
    }

    .download-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* 修改下载按钮显示规则 */
    .mobile-download {
        display: block !important; /* 强制显示 */
        padding: 0.8rem;
    }

    .mobile-download-btn a {
        width: 80px; /* 调整按钮大小 */
    }

    .mobile-download-text {
        font-size: 0.9rem;
    }

    .mobile-download-text img {
        width: 18px;
    }

    /* 隐藏 banner 中的下载按钮 */
    .banner .download-buttons,
    .banner .download-text {
        display: none;
    }

    /* 为底部添加内边距，防止被下载按钮遮挡 */
    .footer {
        margin-bottom: 70px;
    }

    /* Banner 响应式调整 */
    .banner {
        height: 70vh; /* 降低 banner 高度 */
    }

    .banner.shrink {
        height: 60vh; /* 缩小状态的高度也相应调整 */
    }

    .banner-text {
        left: 5%;
        top: 30%;
    }

    .banner-text h1 {
        font-size: 2.5rem; /* 调整标题大小 */
    }

    .banner-text p {
        font-size: 1rem; /* 调整副标题大小 */
        margin-top: 1rem;
    }

    .mobile-download-btn {
        margin-top: 1.5rem;
    }
}

/* 确保在更小的屏幕上也能正常显示 */
@media screen and (max-width: 375px) {
    .mobile-download-btn a {
        width: 70px;
    }

    .mobile-download {
        padding: 0.6rem;
    }
}

/* 中等屏幕设备 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .messenger-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .banner-text h1 {
        font-size: 4rem;
    }

    .banner-text p {
        font-size: 1.5rem;
    }

    .life-txt {
        padding: 1.5rem;
    }
}

/* 小屏幕设备的横屏模式 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .banner {
        height: 100vh;
    }

    .banner-text {
        top: 40%;
    }

    .banner-text h1 {
        font-size: 2.5rem;
    }
}

/* 确保基础字体大小响应式 */
html {
    font-size: 16px;
}

@media screen and (max-width: 375px) {
    html {
        font-size: 14px;
    }
}

/* 添加触摸设备的优化 */
@media (hover: none) {
    .download-btn:hover {
        background-color: transparent;
        border-color: #fff;
    }

    .messenger-item:hover {
        transform: none;
    }
}

/* 优化动画性能 */
.banner-slide,
.banner-text,
.download-btn,
.messenger-item {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 添加 footer 样式 */
.footer {
    background-color: #f8f8f8;
    padding: 2rem 0;
    text-align: center;
    margin-top: 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* 在响应式部分添加 footer 的移动端样式 */
@media screen and (max-width: 768px) {
    .footer {
        padding: 1.5rem 0;
        margin-bottom: 0; /* 移除之前为下载按钮预留的边距 */
    }
    
    .footer p {
        font-size: 0.8rem;
    }

    /* banner 中的下载按钮保持显示 */
    .banner .download-buttons,
    .banner .download-text {
        display: block;
    }
}

/* PC端下载按钮样式 */
.pc-only {
    display: flex;
}

/* 移动端下载按钮样式 */
.mobile-download-btn {
    display: block;
    margin-top: 2rem;
}

.mobile-download-btn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2.5rem;
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    white-space: nowrap;
    cursor: pointer;
}

.mobile-download-btn .btn img {
    width: 20px;
    margin-right: 10px;
    display: block;
}

/* 移除之前的媒体查询中的显示控制 */
@media screen and (max-width: 768px) {
    .mobile-download-btn {
        margin-top: 1.5rem;
    }

    .mobile-download-btn .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* 移除之前的 PC 端隐藏规则 */
.pc-only {
    display: none !important;
}