/* 弹窗的基础样式 */
.modal {  
    display: none; /* 默认将弹窗隐藏，通常通过JavaScript来控制显示 */
    position: fixed; /* 使用固定定位，使弹窗相对于浏览器窗口进行定位 */
    z-index: 1; /* 设置弹窗的堆叠顺序，确保它位于其他内容之上 */
    left: 0; /* 弹窗的左边距为0，与浏览器窗口的左边对齐 */
    top: 0; /* 弹窗的顶边距为0，与浏览器窗口的顶部对齐 */
    width: 100%; /* 弹窗的宽度占满整个屏幕 */
    height: 100%; /* 弹窗的高度占满整个屏幕 */
    overflow: auto; /* 如果弹窗内容超出其高度，则显示滚动条以便用户可以滚动查看 */
    background-color: #00000058; /* 弹窗的背景色为半透明的黑色，透明度为40% */
    backdrop-filter: blur(10px); /* 模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
}  

/* 弹窗内容样式 */
.modal-content {  
    background-color: #ffffff; /* 弹窗内容的背景色为浅黄色 */
    margin: 15% auto; /* 弹窗内容距离弹窗顶部和底部的边距为15%，并且水平方向上自动居中 */
    padding: 20px; /* 弹窗内容内部的填充（内边距）为20px */
    border: 1px solid #888; /* 弹窗内容的边框为1px宽，颜色为深灰色 */
    width: 65%; /* 弹窗内容的宽度为弹窗宽度的80%，由于弹窗宽度占满屏幕，所以这里也是屏幕宽度的80% */
    text-align: center; /* 弹窗内容中的文本居中显示 */
    border-radius: 10px; /* 弹窗内容的边框圆角为10px，使外观更加柔和 */
    color: #07224d;
    font-weight: 400;
}

/* 弹窗关闭按钮样式 */
.close-btn {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
  
/* 关闭按钮样式 */  
.close {  
    color: #aaa; /* 关闭按钮的文本颜色为浅灰色 */  
    float: right; /* 关闭按钮浮动到右侧，通常用于放置在弹窗的右上角 */  
    font-size: 28px; /* 关闭按钮的字体大小为28px，确保它足够大，易于点击 */  
    font-weight: bold; /* 关闭按钮的字体加粗，使其更加显眼 */  
}  

/* 当鼠标悬停在关闭按钮上或按钮获得焦点时的样式 */  
.close:hover,  
.close:focus {  
    color: black; /* 鼠标悬停或获得焦点时，关闭按钮的文本颜色变为黑色 */  
    text-decoration: none; /* 移除默认的文本装饰（如下划线），因为这里我们不需要它 */  
    cursor: pointer; /* 鼠标悬停时，光标变为手指形状，表示这是一个可点击的元素 */  
}

/* 导航栏样式 */  
nav ul {  
    list-style: none; /* 移除列表前的默认标记（如小圆点） */  
    padding: 0; /* 移除列表内部默认的内边距 */  
    margin: 0; /* 移除列表外部默认的外边距 */  
    display: flex; /* 使用Flexbox布局模型，使列表项水平排列 */  
    background-color: #07224dd8; /* 设置导航栏的背景颜色为深灰色 */  
}  
    
/* 导航栏按钮样式 */  
nav ul li a.nav-link {  
    color: rgb(255, 255, 255); /* 设置链接文字的颜色为青蓝色 */  
    text-decoration: none; /* 移除链接文本的下划线 */  
    display: block; /* 使链接元素显示为块级元素，从而充满整个列表项的空间 */  
    padding: 10px 20px; /* 设置链接的内边距为上下8px，左右20px */  
    transition: background-color 0.3s; /* 为背景颜色变化设置平滑过渡效果，持续时间为0.3秒 */ 
    font-size: 20px; 
}  
  
/* 导航栏按钮点击样式 */  
nav ul li a.nav-link:hover {  
    background-color: #07224d; /* 设置鼠标悬停在链接上时，链接的背景颜色变为灰色 */  
}  

.content {  
    display: none; /* 默认不显示内容区域 */  
    padding: 20px; /* 设置内容区域的内边距为20px */  
    border: 1px solid #ccc; /* 设置内容区域的边框为1px实线，颜色为浅灰色 */  
    margin-top: 10px; /* 设置内容区域与上方元素的间距为10px */  
    border-radius: 5px; /* 设置内容区域的边框圆角为5px */
    background-color: #07224d79;  
}  

.active {  
    display: block; /* 当类名为active时，显示该元素 */  
} 

  
/* 默认样式，可能适用于大屏设备（电脑端） */  
body {  
    /* 设置背景图像 */  
    background-image: url('/ele/c.jpg');  
    /* 背景图像固定，滚动页面时不会移动 */  
    background-attachment: fixed;  
    /* 背景图像不重复 */  
    background-repeat: no-repeat;  
    /* 背景图像覆盖整个元素区域，可能会裁剪图像以完全覆盖 */  
    background-size: cover;  
    /* 文本对齐方式为居中 */  
    text-align: center;   
    color: #ffffff;
    background-position: center;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}  
    
/* 当屏幕宽度小于或等于某个值时（比如600px，这通常对应小屏幕设备如手机），使用不同的背景图片 */  
@media (max-width: 1080px) {  
body {  
    background-image: url('/ele/d.jpg');  
    /* 背景图像固定，滚动页面时不会移动 */  
    background-attachment: fixed;  
    /* 背景图像不重复 */  
    background-repeat: no-repeat;  
    /* 背景图像覆盖整个元素区域，可能会裁剪图像以完全覆盖 */  
    background-size: cover;  
    /* 文本对齐方式为居中 */  
    text-align: center; 
    background-position: center;  
    }  
}

/* 自定义按钮样式 */  
.ca-button {  
    padding: 10px 20px; /* 设置按钮的内边距为上下10px，左右20px */  
    font-size: 16px; /* 设置按钮内文本的字体大小为16px */  
    color: rgb(255, 255, 255); /* 设置按钮内文本的颜色为深蓝色 */  
    background-color: #07224dd8; /* 设置按钮的初始背景颜色为浅蓝色 */  
    border: none; /* 移除按钮的边框 */  
    border-radius: 5px; /* 设置按钮边框的圆角为5px */  
    cursor: pointer; /* 设置鼠标悬停在按钮上时显示的手形图标，表示可点击 */  
    transition: transform 0.3s ease, background-color 0.3s ease; /* 为按钮的变形和背景色变化设置平滑过渡效果，持续时间为0.3秒，过渡方式为ease（缓动） */  
}  
  
/* 鼠标悬停在按钮上时的样式 */  
.ca-button:hover {  
    transform: scale(1.1); /* 当鼠标悬停在按钮上时，将按钮放大到原始尺寸的1.1倍 */  
    background-color: #07224d; /* 更改鼠标悬停时按钮的背景颜色为更深的蓝色 */  
}
  
/* 固定按钮样式 */
.fixed-btn {
    width: 45px;
    height: 45px;
    padding: 5px 10px; /* 设置按钮的内边距为上下5px，左右10px */  
    font-size: 26px; /* 设置按钮内文本的字体大小为14px */  
    color: rgb(0, 0, 0); /* 设置按钮内文本的颜色为深蓝色 */  
    background-color: #ffffffe7;
    border: none; /* 移除按钮的边框 */  
    border-radius: 5px; /* 设置按钮边框的圆角为5px */  
    cursor: pointer; /* 设置鼠标悬停在按钮上时显示的手形图标，表示可点击 */  
    z-index: 100;
    position: fixed; /* 固定定位 */
    right: 20px; /* 距离右侧20px */
    bottom: 20px; /* 距离底部20px */
    transition: transform 0.3s ease, background-color 0.3s ease; /* 为按钮的变形和背景色变化设置平滑过渡效果，持续时间为0.3秒，过渡方式为ease（缓动） */  
}
  
.fixed-btn:hover {  
    transform: scale(1.1); /* 当鼠标悬停在按钮上时，将按钮放大到原始尺寸的1.1倍 */  
    background-color: #ffffff; /* 更改鼠标悬停时按钮的背景颜色为更深的蓝色 */  
}

.datetime {
    font-family: Arial, sans-serif;
    text-align: left;
}
.date {
    color: #000;
    font-weight: bold;
}

.weekday {
    color: #000000;
    font-weight: bold;
}

.time {
    color: #000000;
     font-weight: bold;
}
/* copyright ZYZ 2024 */