/* 重置默认样式 */
* {
    margin: 0; /* 清除所有元素的外边距 */
    padding: 0; /* 清除所有元素的内边距 */
    box-sizing: border-box; /* 使用边框盒模型计算元素尺寸 */
}

/* 设置body的基本样式 */
body {
    font-family: "微软雅黑", Arial, sans-serif; /* 设置字体 */
    background-color: #f5f5f5; /* 设置背景颜色 */
    position: relative; /* 设置相对定位 */
    min-height: 100vh; /* 最小高度为视窗高度 */
}

/* 顶部大屏展示区域样式 */
.dingbu-daping {
    height: 80vh; /* 高度占据视窗高度的80% */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    position: relative; /* 相对定位 */
    z-index: 10; /* 层级在背景图片之上 */
}

/* 居中内容容器样式 */
.neirong-juzhong {
    text-align: center; /* 文字居中 */
    color: white; /* 文字颜色为白色 */
}

/* 导航网名字样式 */
.daohang-wangming {
    font-size: 48px; /* 字体大小48像素 */
    font-weight: bold; /* 字体加粗 */
    margin-bottom: 20px; /* 下外边距20像素 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影效果 */
}

/* 一言句子样式 */
.yiyan-juzi {
    font-size: 24px; /* 字体大小24像素 */
    font-style: italic; /* 斜体 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影效果 */
}

/* 向下滚动提示箭头样式 */
.xiangxia-jiantou {
    position: absolute; /* 绝对定位 */
    bottom: 30px; /* 距离底部30像素 */
    left: 50%; /* 距离左侧50% */
    transform: translateX(-50%); /* 水平居中 */
    color: white; /* 文字颜色为白色 */
    font-size: 30px; /* 字体大小30像素 */
    cursor: pointer; /* 鼠标指针样式 */
    animation: arrowBounce 2s infinite; /* 应用弹跳动画 */
}

/* 箭头弹跳动画关键帧 */
@keyframes arrowBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-20px);
    }
    60% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* 背景图片样式 */
.beijing-tupian {
    position: fixed; /* 固定定位 */
    top: 0; /* 距离顶部0像素 */
    left: 0; /* 距离左侧0像素 */
    width: 100%; /* 宽度占满屏幕 */
    height: 100%; /* 高度占满屏幕 */
    z-index: -1; /* 设置层级在最底层 */
}

/* 背景图片标签样式 */
#id-beijing-img {
    width: 100%; /* 宽度占满容器 */
    height: 100%; /* 高度占满容器 */
    object-fit: cover; /* 图片覆盖整个容器 */
}

/* 主体内容区域样式（左右结构） */
.zhuti-neirong {
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 子元素之间均匀分布 */
    padding: 30px; /* 内边距30像素 */
    max-width: 1200px; /* 最大宽度1200像素 */
    margin: 0 auto; /* 居中显示 */
    gap: 20px; /* 子元素间距20像素 */
}

/* 左侧区域样式 */
.zuobian-quyu {
    flex: 0.8; /* 调整占据空间的比例 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    gap: 20px; /* 子元素间距20像素 */
}

/* 左侧框样式（通用） */
.zuobian-kuang {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    padding: 20px; /* 内边距20像素 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    position: sticky; /* 粘性定位 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 子元素水平居中 */
}

/* 左上部分备用区域样式 */
#id-zuoshang-beiyong {
    height: 200px; /* 固定高度 */
    justify-content: center; /* 垂直居中 */
    top: 20px; /* 距离顶部20像素 */
}

/* 左下部分（头像和个人信息）样式 */
#id-zuoxia-touxiang {
    top: 240px; /* 距离顶部240像素 */
}

/* 时间显示样式 */
.shijian-xianshi {
    font-size: 24px; /* 字体大小24像素 */
    font-weight: bold; /* 字体加粗 */
    color: #333; /* 文字颜色 */
    margin-bottom: 10px; /* 下外边距10像素 */
    text-align: center; /* 文字居中 */
}

/* 日期显示样式 */
.riqi-xianshi {
    font-size: 18px; /* 字体大小18像素 */
    color: #666; /* 文字颜色 */
    margin-bottom: 5px; /* 下外边距5像素 */
    text-align: center; /* 文字居中 */
}

/* 网站运行时间样式 */
.wangzhan-yunxing {
    font-size: 16px; /* 字体大小16像素 */
    color: #666; /* 文字颜色 */
    text-align: center; /* 文字居中 */
}

/* 头像区域样式 */
.touxiang-quyu {
    width: 100%; /* 宽度占满容器 */
    text-align: center; /* 文字居中 */
    margin-bottom: 20px; /* 下外边距20像素 */
}

/* 头像图片样式 */
.touxiang-tupian {
    width: 120px; /* 宽度120像素 */
    height: 120px; /* 高度120像素 */
    border-radius: 50%; /* 圆形边框 */
    object-fit: cover; /* 图片覆盖整个容器 */
    border: 3px solid transparent; /* 默认边框透明 */
    transition: border 2s ease 1s; /* 添加边框过渡效果，延迟2秒 */
}

/* 头像图片悬停效果 */
.touxiang-tupian:hover {
    border: 3px solid #ffc0cb; /* 悬停时显示粉色边框 */
    transition: border 0.5s ease 0s; /* 悬停时立即显示，无延迟 */
}

/* 个人信息标题样式 */
.geren-xinxi-biaoti {
    font-size: 22px; /* 字体大小22像素 */
    font-weight: bold; /* 字体加粗 */
    margin-bottom: 15px; /* 下外边距15像素 */
    color: #333; /* 文字颜色 */
    text-align: center; /* 文字居中 */
}

/* 个人信息项样式 */
.mingzi, .zhiye, .youxiang, .jianjie {
    margin-bottom: 10px; /* 下外边距10像素 */
    color: #555; /* 文字颜色 */
    line-height: 1.6; /* 行高1.6倍 */
    text-align: center; /* 文字居中 */
    width: 100%; /* 宽度占满容器 */
}

/* 右侧区域样式 */
.youbian-quyu {
    flex: 2; /* 占据更大的空间 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    gap: 20px; /* 子元素间距20像素 */
}

/* 导航区域通用样式（包括上部横向区域和所有下部区域） */
.shangbu-daohang, .xiabu-daohang {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    padding: 20px; /* 内边距20像素 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 导航标题样式 */
.daohang-biaoti {
    font-size: 22px; /* 字体大小22像素 */
    font-weight: bold; /* 字体加粗 */
    margin-bottom: 15px; /* 下外边距15像素 */
    color: #333; /* 文字颜色 */
    text-align: center; /* 文字居中 */
    background-color: rgba(255, 192, 203, 0.8); /* 粉色背景，80%透明度 */
    padding: 10px; /* 内边距 */
    border-radius: 10px; /* 圆角与所在方框保持一致 */
    margin: -20px -20px 15px -20px; /* 调整外边距以填满容器 */
}

/* 搜索表单样式 */
.sousuo-biaodan {
    display: flex; /* 使用弹性布局 */
    margin-bottom: 15px; /* 下外边距 */
    border-radius: 5px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    align-items: center; /* 垂直居中对齐 */
}

/* 搜索图标样式 */
.sousuo-tubiao {
    width: 24px; /* 宽度 */
    height: 24px; /* 高度 */
    margin: 0 10px; /* 左右外边距 */
}

/* 搜索输入框样式 */
.sousuo-shuru {
    flex: 1; /* 占据剩余空间 */
    padding: 12px 15px; /* 内边距 */
    border: none; /* 无边框 */
    font-size: 16px; /* 字体大小 */
    outline: none; /* 无轮廓 */
}

/* 搜索按钮样式 */
.sousuo-anniu {
    padding: 12px 20px; /* 内边距 */
    background-color: #ffc0cb; /* 背景颜色 */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标指针样式 */
    font-size: 16px; /* 字体大小 */
    transition: background-color 0.3s; /* 背景颜色过渡效果 */
    width: 125px; /* 固定宽度使按钮一样长 */
    text-align: center; /* 文字居中对齐 */
}

/* 搜索按钮悬停效果 */
.sousuo-anniu:hover {
    background-color: #ff99a7; /* 悬停时的背景颜色 */
}

/* 备用区域内容样式 */
.beiyong-neirong {
    padding: 15px; /* 内边距15像素 */
    background-color: #f0f0f0; /* 背景颜色 */
    border-radius: 5px; /* 圆角边框 */
    text-align: center; /* 文字居中 */
}

/* 备案信息样式 */
.beian-xinxi {
    padding: 5px 15px; /* 缩小上下内边距 */
    text-align: center; /* 文字居中 */
    line-height: 1.6; /* 行高 */
}

/* 备案信息中的链接样式 */
.beian-xinxi a {
    color: #ff254a; /* 链接颜色 */
    text-decoration: none; /* 移除下划线 */
    transition: color 0.3s; /* 颜色过渡效果 */
}

/* 备案信息中的链接悬停效果 */
.beian-xinxi a:hover {
    color: #ffc0cb; /* 悬停时的颜色 */
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* iudog链接样式 */
.iudog-link {
    color: #000000; /* 默认蓝色 */
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
    text-decoration: none; /* 移除下划线 */
}

/* iudog链接悬停效果 */
.iudog-link:hover {
    color: #ff2a4e; /* 悬停时变为粉色 */
}

/* 公安备案图标样式 */
.gongan-tubiao {
    width: 16px; /* 宽度 */
    height: 16px; /* 高度 */
    vertical-align: middle; /* 垂直居中 */
    margin-right: 5px; /* 右外边距 */
}

/* 导航列表样式 */
.daohang-liebiao {
    list-style: none; /* 移除列表默认样式 */
}

/* 横向导航列表样式 */
.daohang-hengxiang {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 居中对齐 */
    gap: 75px;
}

/* 横向导航列表项样式 */
.daohang-hengxiang li {
    margin-bottom: 0; /* 清除下外边距 */
    text-align: center; /* 文字居中 */
}

/* 网站图标容器样式 */
.daohang-liebiao.daohang-hengxiang a {
    text-decoration: none; /* 移除下划线 */
    display: inline-block; /* 显示为行内块元素 */
    width: 56px; /* 宽度56像素 */
    height: 56px; /* 高度56像素 */
    border-radius: 12px; /* 圆角12像素 */
    background-color: transparent; /* 默认背景透明 */
    padding: 10px; /* 内边距10像素 */
    transition: all 0.3s ease; /* 添加所有属性的过渡效果 */
}

/* 网站图标容器悬停效果 */
.daohang-liebiao.daohang-hengxiang a:hover {
    transform: scale(1.1); /* 悬停时放大1.1倍 */
    background-color: #ffc0cb; /* 悬停时使用粉色背景 */
}

/* 导航链接样式 */
.daohang-liebiao a {
    text-decoration: none; /* 移除下划线 */
    color: #ffc0cb; /* 链接颜色 */
    font-size: 16px; /* 字体大小16像素 */
    transition: color 0.3s; /* 颜色变化过渡效果 */
    display: block; /* 显示为块级元素 */
    padding: 8px 12px; /* 内边距 */
    border-radius: 5px; /* 圆角边框 */
}

/* 导航链接悬停效果 */
.daohang-liebiao a:hover {
    background-color: #ffc0cb; /* 背景颜色 */
    color: white; /* 文字颜色 */
}

/* 网站图标样式 */
.wangzhi-tubiao {
    width: 100%; /* 宽度占满容器 */
    height: 100%; /* 高度占满容器 */
    border-radius: 6px; /* 圆角6像素 */
    object-fit: contain; /* 保持图片比例 */
}

/* 图标说明文字样式 */
.tubiao-shuoming {
    margin-top: 8px; /* 上外边距8像素 */
    font-size: 14px; /* 字体大小14像素 */
    color: #333; /* 文字颜色 */
    text-align: center; /* 文字居中 */
}

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) {
    .zhuti-neirong {
        flex-direction: column; /* 垂直排列 */
    }
    
    .shijian-xianshi {
        font-size: 20px; /* 减小字体大小 */
    }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 480px) {
    .zhuti-neirong {
        padding: 15px; /* 减小内边距 */
    }
    
    .zuoshang-beiyong, .zuoxia-touxiang, .shangbu-daohang, .xiabu-daohang {
        padding: 15px; /* 减小内边距 */
    }
    
    .shijian-xianshi {
        font-size: 18px; /* 进一步减小字体大小 */
    }
    
    .huanying-ci {
        font-size: 16px; /* 减小字体大小 */
    }
}