/* style.css - 网站主样式文件 */

/* 通用重置样式 */
*{
    margin:0;  /* 清除所有元素的外边距 */
    padding:0;  /* 清除所有元素的内边距 */
    text-decoration: none;  /* 清除所有链接的下划线 */
    list-style: none;  /* 清除列表的默认样式（圆点/数字） */
    box-sizing: border-box;  /* 设置盒模型为边框盒（宽度包含padding和border） */
}

/* 页面主体样式 */
body{
    background-color: #f8f5f2;  /* 设置页面背景颜色为浅米色 */
    font-family: "Microsoft YaHei", Arial, sans-serif;  /* 设置字体族，优先使用微软雅黑 */
    color: #333;  /* 设置默认文字颜色为深灰色 */
}

/* 主要内容区域容器 */
main{
    width: 1200px;  /* 设置主内容区宽度为1200像素 */
    margin:auto;  /* 水平居中显示 */
    background-color: #fff;  /* 设置背景色为白色 */
    box-shadow: 0 0 25px rgba(150, 0, 0, 0.08);  /* 添加红色调的微弱阴影效果 */
    border-radius: 8px;  /* 设置圆角半径为8像素 */
    overflow: hidden;  /* 隐藏溢出内容（保持圆角效果） */
    transition: all 0.3s ease;  /* 为所有属性变化添加0.3秒的缓动过渡效果 */
}

/* 网站Logo区域 */
.logo{
    display: flex;  /* 使用弹性布局 */
    align-items: center;  /* 垂直居中对齐子元素 */
    justify-content: space-between;  /* 子元素两端对齐 */
    padding:0 30px 0 20px;  /* 内边距：上0 右30 下0 左20 */
    background: linear-gradient(135deg, #a50000 0%, #c62828 100%);  /* 135度红色渐变背景 */
    position: relative;  /* 设置为相对定位，为伪元素定位做准备 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* Logo区域的闪烁光效伪元素 */
.logo::before {
    content: '';  /* 伪元素必须有content属性 */
    position: absolute;  /* 绝对定位 */
    top: 0;  /* 顶部对齐 */
    left: 0;  /* 左侧对齐 */
    right: 0;  /* 右侧对齐 */
    bottom: 0;  /* 底部对齐 */
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);  /* 45度透明-半透明白色-透明渐变 */
    animation: logoShine 6s infinite linear;  /* 应用logoShine动画：持续6秒，无限循环，线性速度 */
}

/* Logo闪烁光效动画定义 */
@keyframes logoShine {
    0% { transform: translateX(-100%); }  /* 动画开始：从左侧完全隐藏 */
    100% { transform: translateX(100%); }  /* 动画结束：移动到右侧完全隐藏 */
}

/* Logo左侧部分（图标和文字） */
.logo_left{
    padding:12px 5px;  /* 上下12像素，左右5像素的内边距 */
    display: flex;  /* 使用弹性布局 */
    align-items: center;  /* 垂直居中对齐子元素 */
    position: relative;  /* 相对定位 */
    z-index: 2;  /* 设置层级为2，确保在伪元素之上 */
}

/* Logo图标图片样式 */
.logo_left>img{
    width:95px;  /* 设置图片宽度为95像素 */
    border-radius: 50%;  /* 设置为圆形 */
    border: 3px solid rgba(255, 255, 255, 0.4);  /* 添加半透明白色边框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  /* 添加黑色阴影效果 */
    transition: transform 0.5s ease, box-shadow 0.5s ease;  /* 为变换和阴影添加0.5秒过渡效果 */
}

/* Logo图标悬停效果 */
.logo_left>img:hover {
    transform: rotate(15deg) scale(1.05);  /* 旋转15度并放大1.05倍 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);  /* 加深阴影效果 */
}

/* Logo文字样式 */
.logo_left>span{
    font-size: 22px;  /* 设置字体大小为22像素 */
    letter-spacing: 5px;  /* 设置字符间距为5像素 */
    margin-left: 18px;  /* 左侧外边距18像素 */
    color: #fff;  /* 文字颜色为白色 */
    font-weight: bold;  /* 文字加粗 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);  /* 添加黑色文字阴影 */
}

/* 搜索框区域样式 */
.logo>.search{
    margin-right: 15px;  /* 右侧外边距15像素 */
    border:2px solid #ffb74d;  /* 2像素橙色边框 */
    color:white;  /* 文字颜色白色 */
    height:40px;  /* 高度40像素 */
    width:300px;  /* 宽度300像素 */
    border-radius: 25px;  /* 圆角半径25像素，形成椭圆形 */
    overflow: hidden;  /* 隐藏溢出内容 */
    background-color: rgba(255, 255, 255, 0.15);  /* 半透明白色背景 */
    position: relative;  /* 相对定位 */
    z-index: 2;  /* 设置层级为2 */
    transition: all 0.3s ease;  /* 所有属性0.3秒过渡效果 */
}

/* 搜索框悬停效果 */
.search:hover {
    border-color: #ff9800;  /* 边框颜色变为更亮的橙色 */
    background-color: rgba(255, 255, 255, 0.2);  /* 背景透明度增加 */
    transform: translateY(-2px);  /* 向上移动2像素 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* 添加阴影效果 */
}

/* 搜索输入框样式 */
.search>input{
    border: none;  /* 无边框 */
    width: 220px;  /* 宽度220像素 */
    padding-left: 18px;  /* 左侧内边距18像素 */
    background-color: transparent;  /* 透明背景 */
    color: #fff;  /* 文字颜色白色 */
    font-size: 15px;  /* 字体大小15像素 */
    height: 100%;  /* 高度100%填充父元素 */
}

/* 搜索输入框获取焦点时的样式 */
.search>input:focus{
    outline: none;  /* 移除浏览器默认的聚焦轮廓线 */
}

/* 搜索输入框占位符文字样式 */
.search>input::placeholder {
    color: rgba(255, 255, 255, 0.85);  /* 半透明白色占位符文字 */
}

/* 搜索按钮样式 */
.search>button{
    cursor: pointer;  /* 鼠标悬停时显示手形指针 */
    width: 72px;  /* 宽度72像素 */
    background-color: #ff9800;  /* 橙色背景 */
    color:#fff;  /* 白色文字 */
    border: none;  /* 无边框 */
    height: 36px;  /* 高度36像素 */
    font-weight: bold;  /* 文字加粗 */
    transition: all 0.3s ease;  /* 所有属性0.3秒过渡效果 */
    border-radius: 0 25px 25px 0;  /* 右侧圆角，左侧直角 */
}

/* 搜索按钮悬停效果 */
.search>button:hover{
    background-color: #ffb74d;  /* 背景变为更浅的橙色 */
    transform: scale(1.05);  /* 放大1.05倍 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* 添加阴影效果 */
}

/* 轮播图容器样式 */
.swiper {
    position: relative;  /* 相对定位 */
    width: 1200px;  /* 宽度1200像素 */
    height: 380px;  /* 高度380像素 */
    margin: 0 auto 25px auto;  /* 上下0，左右自动（居中），底部25像素外边距 */
    overflow: hidden;  /* 隐藏溢出内容 */
    border-radius: 0 0 8px 8px;  /* 底部左右圆角8像素 */
}

/* 轮播图包装容器样式 */
.wrap {
    position: relative;  /* 相对定位 */
    width: 100%;  /* 宽度100%填充父元素 */
    height: 100%;  /* 高度100%填充父元素 */
    margin: auto;  /* 水平居中 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 轮播图无序列表样式 */
.wrap ul {
    position: absolute;  /* 绝对定位 */
    width: 100%;  /* 宽度100% */
    height: 100%;  /* 高度100% */
}

/* 轮播图列表项样式 */
.wrap ul li {
    width: 100%;  /* 宽度100% */
    height: 100%;  /* 高度100% */
    position: relative;  /* 相对定位 */
}

/* 轮播图图片样式 */
.wrap ul li img {
    width: 100%;  /* 宽度100% */
    height: 380px;  /* 高度380像素 */
    object-fit: cover;  /* 图片填充方式：保持比例，裁剪填充 */
    transition: transform 8s ease;  /* 变换属性8秒过渡效果 */
}

/* 轮播图图片悬停效果 */
.wrap ul li:hover img {
    transform: scale(1.05);  /* 悬停时放大1.05倍 */
}

/* 轮播图指示器（小圆点）容器样式 */
.wrap ol {
    position: absolute;  /* 绝对定位 */
    right: 5%;  /* 距离右侧5% */
    bottom: 25px;  /* 距离底部25像素 */
    z-index: 10;  /* 设置层级为10，确保在最上层 */
}

/* 轮播图指示器（小圆点）样式 */
.wrap ol li {
    list-style: none;  /* 清除列表样式 */
    height: 14px;  /* 高度14像素 */
    width: 14px;  /* 宽度14像素 */
    border: 2px solid rgba(255, 255, 255, 0.8);  /* 半透明白色边框 */
    border-radius: 50%;  /* 设置为圆形 */
    margin-left: 10px;  /* 左侧外边距10像素 */
    float: left;  /* 向左浮动 */
    cursor: pointer;  /* 鼠标悬停时显示手形指针 */
    font-size: 0px;  /* 字体大小0，隐藏文字内容 */
    background-color: rgba(255, 255, 255, 0.2);  /* 半透明白色背景 */
    transition: all 0.4s ease;  /* 所有属性0.4秒过渡效果 */
}

/* 轮播图指示器悬停效果 */
.wrap ol li:hover {
    background-color: rgba(255, 184, 77, 0.7);  /* 悬停时背景变为半透明橙色 */
    transform: scale(1.2);  /* 放大1.2倍 */
}

/* 当前激活的轮播图指示器样式 */
.wrap ol .on {
    background: #ff9800;  /* 橙色背景 */
    transform: scale(1.3);  /* 放大1.3倍 */
    border-color: #ff9800;  /* 橙色边框 */
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);  /* 橙色发光阴影 */
}

/* 导航菜单样式 */
nav{
    background: linear-gradient(to right, #b71c1c, #c62828);  /* 从左到右的红色渐变背景 */
    height:62px;  /* 高度62像素 */
    display: flex;  /* 弹性布局 */
    justify-content: center;  /* 水平居中对齐子元素 */
    align-items: center;  /* 垂直居中对齐子元素 */
    box-shadow: 0 4px 15px rgba(183, 28, 28, 0.15);  /* 红色调阴影效果 */
    position: relative;  /* 相对定位 */
    z-index: 10;  /* 设置层级为10 */
}

/* 导航菜单顶部装饰线 */
nav::before {
    content: '';  /* 伪元素必须有content属性 */
    position: absolute;  /* 绝对定位 */
    top: 0;  /* 顶部对齐 */
    left: 0;  /* 左侧对齐 */
    right: 0;  /* 右侧对齐 */
    height: 3px;  /* 高度3像素 */
    background: linear-gradient(90deg, #ff9800, #ffb74d, #ff9800);  /* 橙色渐变装饰线 */
    z-index: 1;  /* 设置层级为1 */
}

/* 导航菜单项样式 */
nav>li{
    line-height: 62px;  /* 行高等于容器高度，实现垂直居中 */
    text-align: center;  /* 文字水平居中 */
    float: left;  /* 向左浮动 */
    color:white;  /* 文字颜色白色 */
    width:200px;  /* 宽度200像素 */
    font-size: 17px;  /* 字体大小17像素 */
    font-weight: 600;  /* 字体粗细600（中等粗体） */
    transition: all 0.4s ease;  /* 所有属性0.4秒过渡效果 */
    position: relative;  /* 相对定位 */
    z-index: 2;  /* 设置层级为2 */
}

/* 导航菜单项悬停背景效果伪元素 */
nav>li::before {
    content: '';  /* 伪元素必须有content属性 */
    position: absolute;  /* 绝对定位 */
    top: 0;  /* 顶部对齐 */
    left: 50%;  /* 从中间开始 */
    transform: translateX(-50%);  /* 向左平移自身宽度的50%，实现居中 */
    width: 0;  /* 初始宽度为0 */
    height: 100%;  /* 高度100%填充父元素 */
    background: rgba(255, 255, 255, 0.15);  /* 半透明白色背景 */
    transition: width 0.4s ease;  /* 宽度属性0.4秒过渡效果 */
    border-radius: 4px;  /* 4像素圆角 */
}

/* 导航菜单项悬停时背景效果 */
nav>li:hover::before {
    width: 80%;  /* 悬停时宽度变为80% */
}

/* 导航菜单项悬停效果 */
nav>li:hover{
    transform: translateY(-3px);  /* 向上移动3像素 */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);  /* 添加文字阴影效果 */
}

/* 导航菜单链接样式 */
nav>li>a{
    color:white;  /* 链接文字颜色白色 */
    display: block;  /* 块级显示 */
    width: 100%;  /* 宽度100% */
    height: 100%;  /* 高度100% */
    position: relative;  /* 相对定位 */
    z-index: 3;  /* 设置层级为3，确保在伪元素之上 */
    transition: color 0.3s ease;  /* 颜色属性0.3秒过渡效果 */
}

/* 导航菜单链接悬停效果 */
nav>li>a:hover{
    color:#ffb74d;  /* 悬停时文字颜色变为浅橙色 */
}

/* 当前激活的导航菜单项样式 */
nav>li.active{
    background-color: rgba(255, 152, 0, 0.25);  /* 半透明橙色背景 */
}

/* 当前激活的导航菜单项底部指示器 */
nav>li.active::after {
    content: '';  /* 伪元素必须有content属性 */
    position: absolute;  /* 绝对定位 */
    bottom: 0;  /* 底部对齐 */
    left: 0;  /* 左侧对齐 */
    width: 100%;  /* 宽度100% */
    height: 4px;  /* 高度4像素 */
    background: linear-gradient(90deg, #ff9800, #ffb74d);  /* 橙色渐变背景 */
    z-index: 4;  /* 设置层级为4 */
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);  /* 橙色发光阴影 */
}

/* 内容区域容器样式 */
.container{
    padding:30px 15px 20px 15px;  /* 内边距：上30 右15 下20 左15 */
    width:100%;  /* 宽度100% */
    min-height: 500px;  /* 最小高度500像素 */
    background-color: #faf8f5;  /* 浅米色背景 */
}

/* 页脚样式 */
footer{
    letter-spacing: 3px;  /* 字符间距3像素 */
    font-family: "楷体", "STKaiti", serif;  /* 设置字体为楷体 */
    width:100%;  /* 宽度100% */
    height: 85px;  /* 高度85像素 */
    background: linear-gradient(to right, #b71c1c, #c62828);  /* 红色渐变背景 */
    color:white;  /* 文字颜色白色 */
    text-align: center;  /* 文字水平居中 */
    font-size: 26px;  /* 字体大小26像素 */
    line-height: 85px;  /* 行高等于容器高度，实现垂直居中 */
    font-weight: bold;  /* 文字加粗 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);  /* 黑色文字阴影 */
    position: relative;  /* 相对定位 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 页脚闪烁光效伪元素 */
footer::before {
    content: '';  /* 伪元素必须有content属性 */
    position: absolute;  /* 绝对定位 */
    top: 0;  /* 顶部对齐 */
    left: 0;  /* 左侧对齐 */
    right: 0;  /* 右侧对齐 */
    bottom: 0;  /* 底部对齐 */
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);  /* 45度渐变光效 */
    animation: footerShine 8s infinite linear;  /* 应用footerShine动画：持续8秒，无限循环，线性速度 */
}

/* 页脚闪烁光效动画定义 */
@keyframes footerShine {
    0% { transform: translateX(-100%); }  /* 动画开始：从左侧完全隐藏 */
    100% { transform: translateX(100%); }  /* 动画结束：移动到右侧完全隐藏 */
}