body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-image: url('images/bei-k.png'); /* 设置背景图片 */
        background-repeat: no-repeat; /* 防止背景图片重复 */
        background-position: top;
    }
 
    .logo {
        cursor: pointer; /* 使Logo可点击 */
    } 

.body2 {  
    font-family: 'Arial', sans-serif;  
    margin: 0;  
    padding: 0;  

    background-image: url('images/bei22.png'); /* 设置背景图片 */
}

.header {  
    padding: 20px;  
    position: relative;  
    z-index: 10;  
    margin-top: 30px; /* 上方留有50px空白区域 */  
}  

.navbar {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    margin-right: 50px;  
    flex-wrap: nowrap; /* 防止换行 */   
}     

:root {
    --large-spacing: 5vw; /* 大比例间距，使用视口宽度百分比 */
    --small-spacing: 1.2vw;  /* 小比例间距 */
    --medium-spacing: 3vw; /* 中等比例间距 */
}


.logo {  
    margin-right: auto; /* Logo左侧留出空间，浮动到左边 */  
}  

.logo img {
    width: 4vw; /* 根据视口宽度调整Logo大小 */
    height: auto;
    margin-right: calc(var(--large-spacing) / 10); /* Logo和文本之间的小比例间距 */
    
    /*width: 30px; /* Logo width */  
}  

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto; /* 确保导航项靠右 */
    white-space: nowrap; /* 防止文本换行 */
} 

.nav-links li {
    margin: 0 calc(var(--small-spacing) * 2); /* 每个链接之间的小比例间距 */
    white-space: nowrap; /* 防止列表项内的文本换行 */
}   

.nav-links a {  
    text-decoration: none;  
    font-size: 16px;  
    font-weight: 300; /* 300 表示轻量级 */  
    line-height: 40px; /* 与“联系我们”方框一致的高度 */  
    white-space: nowrap; /* 防止链接文本换行 */  
    position: relative; /* 设置为相对定位 */  
    color: var(--link-color); /* 使用链接颜色变量 */  
    transition: color 0.3s; /* 加入颜色变化的过渡效果 */  
}  

/* 当前活动链接下方的圆点 */  
.nav-links a.active::after,  
.nav-links a:hover::after { /* 添加 hover 状态 */  
    content: '';  
    display: inline-block;  
    width: 5px;  
    height: 5px;  
    background-color: black; /* 默认状态为黑色 */  
    border-radius: 50%;  
    position: absolute; /* 设置为绝对定位 */  
    left: 50%; /* 垂直中心对齐 */  
    margin-left: -4px; /* 向左移动半个圆点的宽度以确保居中 */  
    top: 100%; /* 使圆点位于文字下方 */  
    margin-top: 4px; /* 设置圆点与文字之间的距离 */  
}  

/* 暗主题下的小圆点颜色为白色 */  
:root.dark .nav-links a.active::after,  
:root.dark .nav-links a:hover::after {  
    background-color: white; /* 设置为白色 */  
} 

  

.contact-link {  
    display: inline-flex; /* 确保与其他链接相同的布局 */  
    align-items: center;  
    justify-content: center;  
    padding: 20px 40px;  
    text-decoration: none;  
    color: #000; /* 字体颜色 */  
    /* background-image: linear-gradient(to bottom, #fff, #fff); /* 初始背景色 */  
    background-image: linear-gradient(to top, #fff, #fff); /* 初始背景色 */ 
    border: 1px solid #000; /* 边框 */  
    transition: background-image 0.5s ease, color 0.5s ease; /* 平滑过渡效果 */  
    position: relative; /* 为了添加伪元素 */  
    z-index: 1; /* 确保伪元素在链接下方 */
    white-space: nowrap; /* 防止文本换行 */
}  

.contact-link::before {  
    content: '';  
    position: absolute;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    /* background-image: linear-gradient(to bottom, #000, #000); /* 用于悬停时显示 */  
    background-image: linear-gradient(to top, #000, #000); /* 用于悬停时显示 */  
    opacity: 0;  
    transition: opacity 0.5s ease;  
    z-index: -1; /* 确保伪元素在链接下方 */  
}  

.contact-link:hover {  
    color: #fff;  /* 悬停时的字体颜色 */  
    /*background-image: linear-gradient(to bottom, #000, #fff); /* 悬停时的渐变效果 */ 
    background-image: linear-gradient(to top, #000, #fff); /* 悬停时的渐变效果 */ 
}  

.contact-link:hover::before {  
    opacity: 1; /* 显示伪元素以覆盖原始背景 */  
}  

.main-content {
    text-align: left; /* 将文本对齐方式设置为左对齐 */
    position: relative; /* 设置相对定位，虽然在这个情况下不是必需的，但可以作为后续布局调整的基础 */
    left: 10%; /* 将元素向左移动，占据页面宽度的10%作为左边距 */
    width: 50%; /* 设置元素宽度为页面宽度的40% */
    padding: 200px 20px; /* 保留原有的内边距设置 */
}

.main2-content {  
    text-align: center; /* 中间对齐 */  
    padding: 10px; /* 可调整的内边距以容纳内容 */  
}


.contact-container { 
    margin-left: calc(var(--medium-spacing) / 2); 
} 

.menu-toggle {  
    display: none; /* 默认隐藏菜单按钮 */  
    background: transparent; /* 去掉背景 */  
    border: none; /* 去掉边框 */  
    color: black; /* 菜单文字颜色 */  
    padding: 10px;  
    cursor: pointer;   
    font-size: 16px; /* 菜单字体大小 */  
    font-weight: 300; /* 300 表示轻量级 */ 
    margin-right: 20px; /* 可调距离，这里的值可以自由修改以左右移动按钮 */  
}
/* 在黑色主题下将文字颜色改为白色 */  
:root.dark .menu-toggle {  
    color: white; /* 黑色主题下菜单文字颜色 */  
}

.dropdown-nav {  
    display: none; /* 默认隐藏下拉菜单，可能需要通过JavaScript控制显示 */  
    list-style: none;  
    margin: 0;  
    padding: 0;  
    position: absolute; 
    right: 0; /* 确保下拉菜单在页面最右侧 */ 
    background-color: white;  
    border: 1px solid #ccc;  
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* 稍微增加阴影可见度 */
}

.dropdown-nav li {  
    padding: 4px;  
    position: relative; /* 确保伪元素可以正确定位 */
}

.dropdown-nav li a {  
    text-decoration: none; /* 去除链接下划线 */  
    color: black; /* 链接颜色设置为黑色 */ 
    font-size: 16px; /* 菜单字体大小 */  
    font-weight: 300; /* 字体粗细 */ 
    padding-left: 10px; /* 为圆点预留空间 */
    position: relative; /* 确保伪元素可以正确定位 */
}

/* 为活动链接和悬停链接添加圆点 */
.dropdown-nav li a.active::before,
.dropdown-nav li a:hover::before {
    content: "";
    position: absolute;
    left: 0; /* 圆点位于文字前方 */
    top: 50%; /* 圆点垂直居中 */
    transform: translateY(-50%); /* 垂直居中调整 */
    width: 4px; /* 圆点直径 */
    height: 4px; /* 圆点直径 */
    background-color: black; /* 圆点颜色 */
    border-radius: 50%; /* 使圆点成为圆形 */
}


@media (max-width: 820px) { /* 当屏幕宽度小于768px时 */  
    .contact-link {
        padding: 20px 10px;
    }
}

@media (max-width: 768px) { /* 当屏幕宽度小于768px时 */  
    :root {
        --large-spacing: 5vw; /* 在小屏幕上减少大比例间距 */
        --small-spacing: 1.5vw; /* 在小屏幕上减少小比例间距 */
        --medium-spacing: 1vw; /* 在小屏幕上减少中等比例间距 */
    }
    

    .nav-links {  
        display: none; /* 隐藏原始导航链接 */  
    }  

    .logo-container {  
        padding: 10px 5px; /* 收缩 Logo 和文字的内边距 */  
    }  

    .menu-toggle {  
        display: block; /* 显示菜单按钮 */  
    }  

    .dropdown-nav.active {  
        display: block; /* 显示下拉菜单 */  
    }  

    .contact-link {  
        display: none; /* 隐藏“联系我们”按钮 */  
    }
    
    .main-content {
    text-align: left; /* 将文本对齐方式设置为左对齐 */
    position: relative; /* 设置相对定位，虽然在这个情况下不是必需的，但可以作为后续布局调整的基础 */
    left: 10%; /* 将元素向左移动，占据页面宽度的10%作为左边距 */
    width: 80%; /* 设置元素宽度为页面宽度的40% */
    padding: 200px 20px; /* 保留原有的内边距设置 */
}
    
} 

.main-title {  
    font-size: 36px;  
    font-weight: bold;  
    margin: 20px 0;  
}
.sub-title {  
    font-size: 30px;  
    font-weight: bold;  
    margin: 20px 0;  
}

.description {  
    font-size: 16px;  
    margin-bottom: 40px;  /* 增加段落之间的距离 */
    font-weight: 300; /* 300 表示轻量级 */
    line-height: 3.2;  /* 增加行与行之间的距离 */
}


.description2 {
    font-size: 1vw; /* 使用视口宽度单位，字体大小按比例缩放 */ 
    /* font-size: 16px;  */ 
    margin-bottom: 40px;  /* 增加段落之间的距离 */
    font-weight: 300; /* 300 表示轻量级 */
    line-height: 3.2;  /* 增加行与行之间的距离 */
    text-align: left; /* 左对齐文本内容 */  
    margin: 0; /* 去掉默认的外边距 */  
    padding-left: 50px; /* 可以添加一些左侧内边距来增加可读性 */  
}


/* 设置一个 flex 容器，使其在同一行排列 */  
.introduction2 {  
    display: flex;   
    justify-content: center; /* 居中对齐 */  
    align-items: flex-start; /* 主要将项顶部对齐 */  
    padding-top: 30px; /* 根据需要调整此值 */  
}

/* 左侧文本容器设置 */  
.text-container2 {  
    /*width: 40%; /* 设置宽度为40% */  
    padding-top: 50px; /* 向上偏移，使内容稍微向上对齐 */  
}  

/* 图片容器设置 */  
.image-container {  
    /*width: 60%; /* 设置宽度为60% */  
    display: flex;   
    justify-content: center; /* 图片水平居中 */  
    align-items: center; /* 图片垂直居中 */  
    max-width: 50%; /* 限制图片容器最大宽度 */  
}  

.leaf {  
    max-width: 100%; /* 确保图片根据父容器自适应 */  
    height: auto; /* 保持宽高比例 */  
    flex-shrink: 1; /* 在容器宽度缩小时允许图片缩小 */  
} 

/* 媒体查询：当像素宽度小于768px时，调整字体尺寸并隐藏图片 */  
@media (max-width: 768px) {  
    .description2 {  
        font-size: 14px; /* 更小的字体大小 */  
    }  
    .image-container {  
        display: none; /* 隐藏图片 */  
    }  
}  



.support-text {  
    font-size: 16px;  
    color: #999;
    font-weight: 300; /* 300 表示轻量级 */
}  

.footer {  
    padding: 20px;  
    text-align: center;  
}  
.footer a {  
    font-size: 14px;
} 

.contact-info {  
    color: #666;  
}



.logo-text-container .sub-text {
    font-size: 11px; /* 设置字号 */
    margin-top: 2px; /* 设置很小的上边距以控制行间距 */
    color: white; /* 设置与Breaking相同的颜色 */
    white-space: nowrap; /* 防止文本换行 */
}


.logo-container {  
    display: flex;                     /* 使用flexbox布局 */  
    align-items: center;               /* 垂直居中对齐Logo和文字 */  
    border: 1px solid black;          /* 黑色边框 */  
    background-color: black;          /* 黑色背景 */  
    padding: 10px 10px;               /* 添加填充以增加间距 */  
    border-radius: 0px;               /* 可选的边角圆润效果 */  
    text-decoration: none;             /* 取消链接下划线 */  
    transition: background-color 0.3s, border-color 0.3s; /* 添加背景颜色和边框颜色变化的过渡效果 */  
}  

.logo-container:hover {  
    background-color: white;          /* 悬停时背景变为白色 */  
}  

.logo img {  
    width: 40px;                      /* 根据需要调整Logo的宽度 */  
    height: auto;                     /* 保持原始宽高比 */  
    margin-right: 10px;              /* Logo和文本之间的间距 */  
    transition: content 0.3s;        /* 添加图片变化的过渡效果 */  
}  

.logo-text {  
    color: white;                     /* 默认文字颜色为白色 */  
    font-size: 16px;                 /* 调整文本大小 */  
    margin: 0;                       /* 去除默认的上下外边距 */  
    font-weight: 300;                /* 300 表示轻量级 */  
    white-space: nowrap; /* 防止文本换行 */
}  

/* 悬停时的文字颜色变化 */  
.logo-container:hover .logo-text,
.logo-container:hover .sub-text {  
    color: black;                     /* 悬停时文字颜色变为黑色 */  
} 



/* 悬停时改变 logo 图片 */  
.logo-container:hover .logo img {  
    content: url('images/logo-red.png'); /* 悬停时使用黑色 logo 图片 */  
}  

                /* 针对Webkit浏览器 */  
::-webkit-scrollbar {  
    width: 0px; /* 滚动条的宽度 */  
}


.content-area {  
    display: flex;  
    flex-direction: column;  
    width: 100%;  
}  

    /* 内容区域的样式 */  
    .region {  
        display: flex;  
        align-items: center;  
        justify-content: space-between;  
        height: 300px;  
        width: 100%;  
        border-top: 1px solid #ccc; /* 顶部灰色边框 */  
        border-bottom: 1px solid #ccc; /* 底部灰色边框 */  
        position: relative; /* 确保区域位置 */  
        overflow: hidden; /* 防止图片溢出 */  
        transition: background-color 0.5s, color 0.5s;  
    }  

    /* 默认悬停效果 */  
    .region:hover {  
        background-color: black;  
        color: white;  
    }  

    /* 暗主题悬停效果 */  
    :root.dark .region:hover {  
        background-color: white; /* 黑色主题下悬停时背景为白色 */  
        color: black; /* 黑色主题下悬停时文字颜色为黑色 */  
    }  

.region .left-part {
    padding: 15vw; /* 修改 padding，使内容更紧凑 */  
    /* padding: 150px; /* 修改 padding，使内容更紧凑 */  
    flex: 1; /* 使左部分占据剩余空间 */  
}  

.region .left-part h2,  
.region .left-part p,  
.region .left-part a {  
    margin: 0 0 20px 0;  
    color: inherit; /* 继承父元素的颜色 */  
    text-decoration: none; /* 去除链接下划线 */  
}  

.region .left-part a:last-child {  
    margin-bottom: 0;  
}  

.right-part {  
    width: 600px; /* 或者其他适合你的设计的宽度 */  
    margin: 0; /* 删除右边距以避免影响区域边界 */  
    display: flex;  
    justify-content: flex-end;  
}  

.region .right-part img {  
    display: none; /* 默认隐藏图片 */  
    width: 100%;   
    height: 100%; /* 限定为 100% 高度以适应区域 */  
    object-fit: cover; /* 确保图片填充整个右侧框 */  
}  

.region:hover .right-part img {  
    display: block; /* 鼠标悬停时显示图片 */  
}


.content-area-s {  
  display: flex;  
  flex-direction: column;  
  width: 100%;  
  margin: 0 auto;  
  padding: 0;  
  box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */  
}  

.region-s {  
  display: flex;  
  width: 100%; /* 宽度占满 */  
  margin: 0;  
  aspect-ratio: 16 / 4;  
  border: none;  
  border-radius: 0;  
  border-top: 1px solid #ccc;  
  border-bottom: 1px solid #ccc;  
  transition: background-image 0.3s ease, color 0.3s ease;  
  background-size: cover;  
  background-position: center;  
}


/* 左侧和右侧文本保持白色 */  
.region-s.active .left-part-s,   
.region-s.active .right-part-s {  
  color: white; /* 保持为白色 */  
} 

/* 添加不同区域的活动状态样式 */  
.region-bg-1.active {  
  background-image: url('images/cloud1.jpg'); /* 替换为云服务背景图片 */  
  color: white; /* 文本颜色变为白色 */  
}  

.region-bg-1:hover {  
  background-image: url('images/cloud1.jpg'); /* 替换为云服务悬停时的背景图片 */  
  color: white; /* 悬停时文本颜色变为白色 */  
}  

.region-bg-2.active {  
  background-image: url('images/s-wangzhan1.png'); /* 替换为网站设计背景图片 */  
  color: white; /* 文本颜色变为白色 */  
}  

.region-bg-2:hover {  
  background-image: url('images/s-wangzhan1.png'); /* 替换为网站设计悬停时的背景图片 */  
  color: white; /* 悬停时文本颜色变为白色 */  
}

.region-bg-3.active {  
  background-image: url('images/yunwei.jpg'); /* 替换为网站设计背景图片 */  
  color: white; /* 文本颜色变为白色 */  
}  

.region-bg-3:hover {  
  background-image: url('images/yunwei.jpg'); /* 替换为网站设计悬停时的背景图片 */  
  color: white; /* 悬停时文本颜色变为白色 */  
}

.region-bg-4.active {  
  background-image: url('images/zhichi.png'); /* 替换为网站设计背景图片 */  
  color: white; /* 文本颜色变为白色 */  
}  

.region-bg-4:hover {  
  background-image: url('images/zhichi.png'); /* 替换为网站设计悬停时的背景图片 */  
  color: white; /* 悬停时文本颜色变为白色 */  
}

.region-bg-5.active {  
  background-image: url('images/jk.jpg'); /* 替换为网站设计背景图片 */  
  color: white; /* 文本颜色变为白色 */  
}  

.region-bg-5:hover {  
  background-image: url('images/jk.jpg'); /* 替换为网站设计悬停时的背景图片 */  
  color: white; /* 悬停时文本颜色变为白色 */  
}

.region-bg-6.active {  
  background-image: url('images/wf.jpg'); /* 替换为网站设计背景图片 */  
  color: white; /* 文本颜色变为白色 */  
}  

.region-bg-6:hover {  
  background-image: url('images/wf.jpg'); /* 替换为网站设计悬停时的背景图片 */  
  color: white; /* 悬停时文本颜色变为白色 */  
}



.left-part-s {  
  flex: 1;  
  padding: 5vw 2vw 0 15vw; /* 使用视口宽度单位进行适应 */   /* 调整内边距以适应高度 */  
  box-sizing: border-box; /* 确保内边距和边框不会影响元素的宽度 */  
}  

.right-part-s {  
  flex: 1;  
  padding: 13vw 15vw 0 2vw; /* 调整内边距以适应高度 */  
  color: black;  
  font-size: 10px;  
  box-sizing: border-box; /* 确保内边距和边框不会影响元素的宽度 */  
}  

/* 悬停时文本颜色变化 */  
.region-s:hover .left-part-s a,  
.region-s:hover .right-part-s {  
  color: white; /* 悬停时文本颜色变为白色 */  
}  

/* 响应式文字调整 */  
h2 {  
  font-size: calc(1.3rem + 0.5vw); /* 文字大小响应式调整 */   
}  

p {  
  font-size: calc(0.5rem + 0.5vw); /* 文字大小响应式调整 */  
  font-weight: 300;   
}  

/* 在小于768px时的样式 */  
@media (max-width: 768px) {  
  .region-s {  
    flex-direction: column; /* 垂直排列 */  
    height: auto; /* 高度自适应 */  
  }  

  .left-part-s {  
    padding: 30px; /* 调整内边距 */  
  }  

  .right-part-s {  
    padding: 30px; /* 调整内边距 */  
  }  

  .right-part-s {  
    order: 2; /* 移动到左侧下方 */  
  }  

  .left-part-s {  
    order: 1; /* 保留在上方 */  
  }  
}

.keyword-title {  
  background-color: #FFD700; /* 设置背景色为蓝色 #FFC0CB  #4BC0C0 */  
  color: black; /* 设置文字颜色为黑色 */  
  padding: 5px 10px; /* 添加内边距以使背景色悬浮 */  
  display: inline-block; /* 让背景色只包裹文字内容 */  
  margin: 10px 7px; /* 添加上下间距 */  
  border-radius: 5px; /* 轻微的圆角 */  
  font-size: 16px; /* 自定义字体大小，可以根据需要调整 */  
  font-weight: 300; /* 300 表示轻量级 */  
} 

.keyword-title2 {  
  background-color: #FFC0CB; /* 设置背景色为蓝色 #FFC0CB  #4BC0C0 */  
  color: black; /* 设置文字颜色为黑色 */  
  padding: 5px 5px; /* 添加内边距以使背景色悬浮 */  
  display: inline-block; /* 让背景色只包裹文字内容 */  
  margin: 10px 0px; /* 添加上下间距 */  
  border-radius: 15px; /* 轻微的圆角 */  
  font-size: 16px; /* 自定义字体大小，可以根据需要调整 */  
  font-weight: 300; /* 300 表示轻量级 */  
}