body {  
    font-family: 'Arial', sans-serif;  
    margin: 0;  
    padding: 0;  
    background-color: #FFFFFF; 
    
    
    background-image: url('images/bei.png'); /* 设置背景图片 */
    background-repeat: no-repeat; /* 防止背景图片重复 */

    background-position: top;
}  

.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;  
    color: #131415;  
    font-size: 16px;  
    font-weight: 300; /* 300 表示轻量级 */  
    line-height: 40px; /* 与“联系我们”方框一致的高度 */  
    white-space: nowrap; /* 防止链接文本换行 */  
    position: relative; /* 设置为相对定位 */  
}  

/* 当前活动链接下方的圆点 */  
.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; /* 设置圆点与文字之间的距离 */  
} 

.logo-container { 
    margin-right: var(--large-spacing); /* Logo右侧留出大比例空间 */
    
    display: flex;                     
    align-items: center;              
    border: 1px solid black;          
    background-color: black;          
    padding: 10px 20px;              
    text-decoration: none;             
    transition: background-color 0.3s, border-color 0.3s;   
}  

.contact-link {  
    display: inline-flex; /* 确保与其他链接相同的布局 */  
    align-items: center;  
    justify-content: center;  
    padding: 21.5px 32.5px;  
    text-decoration: none;  
    color: #000; /* 字体颜色 */  
    background-image: linear-gradient(to bottom, #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); /* 用于悬停时显示 */  
    opacity: 0;  
    transition: opacity 0.5s ease;  
    z-index: -1; /* 确保伪元素在链接下方 */  
}  

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

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

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

.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; /* 可调距离，这里的值可以自由修改以左右移动按钮 */  
} 

.dropdown-nav {  
    display: none; /* 默认隐藏下拉菜单 */  
    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);  
} 

.dropdown-nav li {  
    padding: 10px;  
}

.dropdown-nav li a {  
    text-decoration: none; /* 确保链接没有下划线 */  
    color: black; /* 修改下拉菜单链接颜色为黑色 */ 
    font-size: 16px; /* 菜单字体大小 */  
    font-weight: 300; /* 300 表示轻量级 */ 
}

@media (max-width: 800px) { /* 当屏幕宽度小于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;  
}  

.description {  
    font-size: 16px;  
    margin-bottom: 20px;  
    color: black; 
    font-weight: 300; /* 300 表示轻量级 */
}  

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

.footer {  
    padding: 20px;  
    text-align: center;  
    background-color: #F7F7F7;  
}  

.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-black-1.png'); /* 悬停时使用黑色 logo 图片 */  
}  

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