@charset "UTF-8";
@font-face {title
    font-family: '华文行楷';
    src: url('./index_src/fonts/hwxk.ttf') format('truetype');
    font-display: swap;
}

/* --- CSS 变量定义：默认是浅色模式 --- */
:root {
    /* 浅色模式变量 */
    --body-bg: #7a7a7a42;
    --body-color: #37474f; /* 主体文字颜色 */
    --nv-title-bg: rgb(248 245 255 / 28%);
    --nv-title-link-color: #5f5f5f;
    --nv-title-a-hover: #589cdd;
    --album-category-active-color: #5f5f5f;
    --lightbulb-bg: #e9e9e9;
    --footer-bg:#f8f5ffd6;
    --login-1-bg: #efefef; /* 新增：登录按钮背景色 */
    --login-1-hover-color: #1d1d1f; /* 新增：登录按钮悬停文字颜色 */
    --button-bg-color: #f0f0f0;      /* 按钮背景色 */
}

/* 当 body 元素有 dark-mode-active 类时，覆盖上述变量为深色模式的值 */
body.dark-mode-active {
    /* 深色模式变量 */
    --body-bg: #dce9ed;
    --body-color: #f9f9f9; /* 深色模式下主体文字颜色 */
    --nv-title-bg: rgb(25 25 25 / 40%);
    --nv-title-link-color: #ffffff;
     --nv-title-a-hover: #3ec270;
    --album-category-active-color: #ffffff;
    --lightbulb-bg: #736f6f;
    --footer-bg: #232425;
    --login-1-bg: #35363a; /* 深色模式：登录按钮背景色 */
    --login-1-hover-color: #fff; /* 深色模式：登录按钮悬停文字颜色 */
    --button-bg-color: #444444;    
}

body.dark-mode-active  {
    background-color: #212121ba;
    color: #c9c9c9;
    background-blend-mode: overlay;
}


/* --- 应用 CSS 变量到你的样式中，并添加过渡效果 --- */
body {
    font-family: sans-serif;
    margin: 0;
    min-height: 100vh;
    padding-bottom: 60px;
    box-sizing: border-box;
    /* 应用变量并添加过渡 */
    background-color: var(--body-bg);
    
    /*background-image: url(https://img.ximi.me/user/src/img.php?=1750729631_685a039f354f8.webp);*/ 
    background-size: cover; /* 让背景图片覆盖整个元素，可能会裁剪图片 */
    background-position: center center; /* 可选：确保图片居中显示 */
    background-repeat: no-repeat; /* 可选：防止图片重复 */
background-attachment: fixed;

overflow-x: hidden; /* 隐藏横向滚动条 */
    color: var(--body-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

header {
    background-color: #2e2c2c; /* 蓝色头部 - 保持不变 */
    color: #fff;
    padding: 15px 20px;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
        background: radial-gradient(100% 225% at 100% 0%, #5517d5 0%, #000000 100%), linear-gradient(35deg, #003105 0%, #17001F 75%), linear-gradient(55deg, #2400FF 0%, #000000 100%), linear-gradient(314deg, #FFE037 0%, #FFE037 40%, #1DCD9F 40%, #1DCD9F 50%, #088C6F 50%, #088C6F 70%, #23033C 70%, #23033C 100%), linear-gradient(180deg, #a70080 0%, #FF8FE5 45%, #FBFF64 45%, #ffffff 60%, #76E3FF 60%, #76E3FF 80%, #6EB6E7 80%, #6EB6E7 100%);
    background-blend-mode: screen, overlay, overlay, darken, normal;
}

header .w_title {
    font-size: 1.5em;
    font-weight: 500;
    letter-spacing: 0.5px;
}

header .w_title a {
    text-decoration: none;
    color: #fff; /* 保持不变 */
}

header .w_title a:hover {
    color: #b3e5fc; /* 保持不变 */
    
}

.mobile-menu-icon {
    width: 33px;
    height: 33px;
    cursor: pointer;
    padding: 1px;
    display: none;
}

.mobile-menu-icon svg {
    width: 100%;
    height: 100%;
    fill: #fff; /* 保持不变 */
}

.mobile-menu {
    background-color: #5d5c5c; /* 保持不变，除非你也想让它跟随模式切换 */
    border-radius: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-top: 5px;
    overflow: hidden;
    display: none;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    z-index: 10;
}

.mobile-menu.open {
    /*transform: translateY(0);*/
    opacity: 1;
    display: block !important;
}

.mobile-menu a {
    display: block;
    padding: 10px 15px;
    color: #03a9f4;
    text-decoration: none;
    /* border-bottom: 1px solid #eee; */
    transition: background-color 0.3s ease-in-out;
}

.mobile-menu a:last-child {
    border-bottom: none;
}

.mobile-menu a:hover {
    background-color: #423f3f; /* 保持不变 */
}

.Nv_title {
  /* 新增的固定顶部属性 */
    position: fixed; /* 使元素固定在视口位置 */
    top: 0;          /* 距离视口顶部 0 */
    left: 0;         /* 距离视口左侧 0 */
    width: 100%;     /* 占据整个视口宽度 */
    z-index: 1000;   /* 确保它在其他内容之上（数字越大，层级越高） */

    /* 应用变量并添加过渡 */
    background-color: var(--nv-title-bg);
    transition: background-color 0.3s ease;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 20px 20px;
}

.Nv_title a {
    padding: 8px 15px;
    text-decoration: none;
    font-weight: 400;
    color: var(--nv-title-link-color);
    transition: color 0.3s ease-in-out;
    font-family: '华文行楷', cursive;
    text-decoration: none;
    color: #fff;
    margin-right: auto;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.Nv_title a:hover {
    /*  color: #0277bd;悬停颜色 - 保持不变 */
        color: var(--nv-title-a-hover); /* #3ec270;*/
    font-size: 1.03em;
}

.album-category {
    cursor: pointer;
    color: #37474f; /* 保持不变 */
}

.album-category:hover {
    color: #03a9f4; /* 保持不变 */
}



.album-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 2fr));
    gap: 15px;
    padding: 15px;
    max-width: 1540px;
    margin: 10px auto;
    margin-bottom: 40px;
}



.album-list.hidden {
    display: none;
}

.album-item {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: none;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    display: block;
    max-width: 1500px;
    position: relative;
    padding: 0px;
    border: none;
}

.album-cover:hover {
   /* transform: scale(1.0001); */
}

.album-item.hidden {
    display: none;
}

/* album-item 内部的链接作为主要点击区域 */
.album-item > a {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    
}

.album-cover {
    width: 100%;
    height: 100%;
        max-height: 260px;
    object-fit: cover;
    background-color: #ddd; /* 保持不变 */
    display: block;
    transition: transform 0.3s ease-in-out;
}

/* 默认仅在图片左上角显示的分类名称 */
.album-category-default {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #8458adb5; /* 保持不变 */
    color: #fff; /* 保持不变 */
    padding: 5px 10px;
    border-radius: 13px;
    font-size: 0.6em;
    z-index: 3;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

/* 鼠标悬停时，默认分类名称隐藏 */
.album-item:hover .album-category-default {
    opacity: 0;
}

/* 鼠标悬停时显示的叠加层 */
.album-info {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: rgba(0, 0, 0, 0.5); /* 保持不变 */
    color: #fff; /* 保持不变 */
    padding: 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 2;
    pointer-events: none;
    text-align: center;
    margin:0px;
}

/* 鼠标悬停时，album-info 显示 */
.album-item:hover .album-info {
    opacity: 1;
}

.album-info .album-category-hover {
    align-self: flex-start;
    background-color: rgba(0, 0, 0, 0.5); /* 保持不变 */
    padding: 5px 10px;
    border-radius: 0px;
    font-size: 0.9em;
    pointer-events: auto;
}

.album-title{
font-size: 4em;
font-family: '华文行楷';
font-weight: 400;
margin-top: 38px;
}

.album-count{
font-size: 2em;
font-family: '华文行楷';
}

.album-info .album-title-hover {
    margin: auto 0 10px 0;
   /* font-size: 1.8em;*/
    color: #fff; /* 保持不变 */
    pointer-events: auto;
}

.album-info .album-count-hover {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* 保持不变 */
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    pointer-events: auto;
}

footer {
    text-align: center;
    padding: 15px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    /* 应用变量并添加过渡 */
    background-color: var(--footer-bg);
    color: var(--body-color); /* 通常页脚文字颜色也与主体文字颜色一致 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hidden-footer {
    display: none;
}

.album-category.active {
    /* 应用变量并添加过渡 */
    color: var(--album-category-active-color);
    transition: color 0.3s ease;
}

.w_title {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 33px;
}

.ll {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.09em;
    padding-top: 3px;
}

.rr {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2em;
        padding-top: 5px;
}

.rr:hover {
    /* 保持不变 */
}

.login_1 {
    margin-right: 15px;

    transition: background-color 0.3s ease, color 0.3s ease; /* 为 color 也添加过渡 */
}

.login_1:hover {
    /* 应用变量并添加过渡 */
    color: var(--login-1-hover-color);
}

.Nv_title_defaul {
    display: none;
}



/* 媒体查询，针对小屏幕设备 */
@media (max-width: 1080px) {
	


 }
 
 
@media (max-width: 1364px) {
	
.album-list {
    grid-template-columns: repeat(auto-fit, minmax(430px, 2fr));
    	}
.album-cover {
    max-height: 350px;
}


/* 鼠标悬停时显示的叠加层 */
.album-info {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    background: rgba(0, 0, 0, 0.5); /* 保持不变 */
    color: #fff; /* 保持不变 */
    padding: 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 2;
    pointer-events: none;
    text-align: center;
    margin:0px;
}

/* 鼠标悬停时，album-info 显示 */
.album-item:hover .album-info {
    opacity: 1;
}

.album-info .album-category-hover {
    align-self: flex-start;
    background-color: rgba(0, 0, 0, 0.5); /* 保持不变 */
    padding: 5px 10px;
    border-radius: 0px;
    font-size: 0.9em;
    pointer-events: auto;
}



.album-count{
font-size: 2em;
font-family: '华文行楷';
}

.album-info .album-title-hover {
    margin: auto 0 10px 0;
   /* font-size: 1.8em;*/
    color: #fff; /* 保持不变 */
    pointer-events: auto;
}

.album-info .album-count-hover {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* 保持不变 */
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.9em;
    pointer-events: auto;
}


.album-title{
font-size: 6em;  /* 1364 */
font-family: '华文行楷';
font-weight: 400;
    margin-top: 50px;

}





 }






@media (max-width: 768px) {

body{
background-color:#3f4243;
}

    .swiper-slide img {
 background-color:#3f4243;
    }



    .Nv_title_defaul {
        display: block;
    }

    .Nv_title {
        display: none;
    }

    .mobile-menu-icon {
        display: block;
    }

    /* Adjustments for smaller screens */
    .album-list {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        padding: 10px;
            margin-bottom: 40px;
    }

    .album-item {
        max-width: none;
        height:audio;
        padding: 0px;
    }
.album-info {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    margin:0px;
}
.album-title{
font-size: 4em; /* 768 */
font-family: '华文行楷';
font-weight: 400;
    margin-top: 50px;

}
.album-count {
    font-size: 1.5em;
    font-family: '华文行楷';
    margin-bottom: 20px;
}

}

*,
*:before,
*:after {
  box-sizing: inherit;
}


.heading {
  font-size: 1.5em;
  margin-bottom: 12px;
}

.card {
  background: #fff;
  /*background-image: linear-gradient(48deg, #fff 0%, #e5efe9 100%);*/
  background-image: linear-gradient(228deg, #fff 0%, #5da2bd 100%);
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  box-shadow: -20px 20px 35px 1px rgba(10, 49, 86, 0.18);
  display: flex;
  flex-direction: column;
  padding: 32px;
  margin: 40px;
  max-width: 400px;
  width: 100%;
      color: #000;
}

.content-wrapper {
  font-size: 1.1em;
  margin-bottom: 24px;
}
.content-wrapper:last-child {
  margin-bottom: 0;
}

.button {
  align-items: center;
  background: #e5efe9;
  border: 1px solid #5a72b5;
  border-radius: 4px;
  color: #121943;
  cursor: pointer;
  display: flex;
  font-size: 1em;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  width: 150px;
}
.button:focus {
  border: 2px solid transparent;
  box-shadow: 0px 0px 0px 2px #121943;
  outline: solid 4px transparent;
}

.link {
  color: #121943;
}
.link:focus {
  box-shadow: 0px 0px 0px 2px #121943;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
}
.input-wrapper .label {
  align-items: baseline;
  display: flex;
  font-weight: 700;
  justify-content: space-between;
  margin-bottom: 8px;
}
.input-wrapper .optional {
  color: #5a72b5;
  font-size: 0.9em;
}
.input-wrapper .input {
  border: 1px solid #5a72b5;
  border-radius: 4px;
  height: 40px;
  padding: 8px;
}

code {
  background: #e5efe9;
  border: 1px solid #5a72b5;
  border-radius: 4px;
  padding: 2px 4px;
}

.modal-header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.close {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  height: 16px;
  text-decoration: none;
  width: 16px;
        animation: glow 5s ease-in-out infinite alternate;
      transition: transform 0.5s ease;
      /* 添加过渡效果，控制旋转时的过渡时间和缓动方式 */
    }
    /* 添加鼠标悬停时旋转的效果 */
  .close:hover {
      transform: rotate(180deg);
      /* 鼠标悬停时应用旋转动画，旋转一圈（360度） */
    }

.close svg {
  width: 16px;
}

.modal-wrapper {
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
   top: 0px;
    bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;

}

#modalA,
#modalC,
#modalvx,
#modalpay,
#modalB {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  visibility: hidden;
}
#modalA:target,
#modalC:target,
#modalvx:target,
#modalpay:target,
#modalB:target {
  opacity: 1;
  visibility: visible;
}
#modalA:target .modal-body,
#modalC:target .modal-body,
#modalvx:target .modal-body,
#modalpay:target .modal-body,
#modalB:target .modal-body {
  opacity: 1;
  transform: translateY(1);
}
#modalA .modal-body,
#modalC .modal-body,
#modalvx .modal-body,
#modalpay .modal-body,
#modalB .modal-body {
  max-width: 500px;
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 0.25s ease-in-out;
  width: 100%;
  z-index: 1;
}

.outside-trigger {
  bottom: 0;
  cursor: default;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.button__link {
  text-decoration: none;
}

.modal-body.card a {
    color: green;
}
.modal-body.card a:hover {
    color: #ff6a6a; /* 鼠标悬停时的字体颜色 */
}





    /* ------------------------------------------- */
    /* 轮播图专属 CSS 样式 */
    /* 请确保这些样式不被其他页面的全局CSS覆盖或冲突 */
    /* ------------------------------------------- */

    /* 轮播图的根容器 */
.index-banner {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    /* margin: 20px auto; */
    position: relative;
    overflow: hidden;
    /* border-radius: 15px; */
    padding: 0px;
    background: white;
    /* margin-top: 100px; */
}
    

.swiper {
    width: 100%;
    /* 将 height:auto; 移除或改为明确的高度 */
    height: 100vh; /* 显式设置高度，使其与 max-height 一致，确保容器有固定尺寸 */
    /*max-height: 500px;  PC端轮播图最大高度 */
    border-radius: 0px; /* 圆角 */
    overflow: hidden; /* 确保图片不会溢出圆角 */
}

        .swiper-wrapper {
            /* Swiper 内部会自动处理 transform，这里不需要额外设置绝对定位 */
            height: 100%; /* 确保 wrapper 填满 swiper 容器 */
            width: 100%;
        }

.swiper-slide {
    /* height: 100%; 确保 slide 容器有明确高度 */
    display: flex;
    justify-content: center;
    align-items: center; /* 使用 flex 居中内容，这对于图片也有效 */
        width: 100vw;   /* 容器宽度等于视口宽度 */
    height: 100vh;  /* 容器高度等于视口高度 */
    overflow: hidden; /* 隐藏超出容器的图片部分，实现裁剪 */
}

.swiper-slide a {
    width: 100%;
    height: 100%; /* 确保图片本身高度填充容器 */
   
}
.swiper-slide img {
    width: 100%;
    height: 100%; /* 确保图片本身高度填充容器 */
    object-fit: cover; /* 覆盖并裁剪 */
    object-position: center; /* 关键：确保裁剪时居中 */
    display: block; /* 避免图片下方有额外的空白 */
}

        /* 当没有图片时，如果显示“暂无图片”的p标签，清除其默认margin */
        .swiper-slide p {
            margin: 0;
            padding: 20px; /* 可以适当增加内边距让文字更易读 */
        }


    /* 导航按钮样式 */
    .swiper-button-next,
    .swiper-button-prev {
        color: #fff; /* 按钮箭头颜色 */
        background-color: rgba(0, 0, 0, 0.2); /* 默认透明度 0.2 */
        padding: 30px 30px; /* 按钮大小 */
        border-radius: 50%; /* 圆形按钮 */
        transition: background-color 0.3s ease, opacity 0.3s ease; /* 添加透明度过渡 */
        top: 50%; /* 垂直居中 */
        transform: translateY(-5%);
        opacity: 0; /* 默认隐藏 */
        visibility: hidden; /* 默认隐藏 */
        pointer-events: none; /* 默认不响应鼠标事件 */
        width: 30px; /* 按钮宽度 */
        height: 30px; /* 按钮高度 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10; /* 确保按钮在图片之上 */
        display:none;
    }

    /* 鼠标指向轮播图区域时显示按钮 */
    .index-banner:hover .swiper-button-next,
    .index-banner:hover .swiper-button-prev {
        opacity: 1; /* 显示按钮 */
        visibility: visible; /* 显示按钮 */
        pointer-events: auto; /* 响应鼠标事件 */
    }

    /* 鼠标悬停在按钮上时的透明度 */
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background-color: rgba(0, 0, 0, 0.5); /* hover 时透明度 0.5 */
    }

    /* Swiper 内置的按钮样式调整（为了减小默认箭头大小） */
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 20px !important; /* 减小箭头字体大小 */
    }

    /* 分页器（小圆点）样式 */
    .swiper-pagination-bullet {
        background-color: #fff; /* 小圆点颜色 */
        opacity: 0.7;
        z-index: 10; /* 确保分页器在图片之上 */
    }

    .swiper-pagination-bullet-active {
        background-color: #007aff; /* 激活的小圆点颜色 */
        opacity: 1;
    }

    /* 手机端适配 (屏幕宽度小于等于 768px) */
    @media (max-width: 768px) {
        footer {
         background-color: #2e2c2c;
        }

        .index-banner {
            width: 95%; /* 手机端宽度可以稍微大一些，比如95% */
            margin: 10px auto; /* 调整手机端外边距 */
   
    padding: 0px;
    background: white;
}

  .swiper {
        height: calc(100vw * 0.5);
        /* border-radius: 8px; */
        overflow: hidden;
        background-color: var(--body-bg, #f0f0f0);
    }

.album-cover{
      max-height: 600px;
}

    .swiper-button-next,
    .swiper-button-prev {
        color: #fff; /* 按钮箭头颜色 */
        background-color: rgba(0, 0, 0, 0.2); /* 默认透明度 0.2 */
        padding: 25px 25px; /* 按钮大小 */
        border-radius: 50%; /* 圆形按钮 */
        transition: background-color 0.3s ease, opacity 0.3s ease; /* 添加透明度过渡 */
        top: 50%; /* 垂直居中 */
        transform: translateY(-1%);
        opacity: 0; /* 默认隐藏 */
        visibility: hidden; /* 默认隐藏 */
        pointer-events: none; /* 默认不响应鼠标事件 */
        width: 20px; /* 按钮宽度 */
        height: 20px; /* 按钮高度 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10; /* 确保按钮在图片之上 */
    }

.album-category-default {
    position: absolute;
    top: 20px;
    left: 20px;
}

        }

/* Swiper 分页器容器样式 */
.swiper-pagination {
    bottom: var(--swiper-pagination-bottom, 8px); /* 保持底部距离 */
    top: var(--swiper-pagination-top, auto);      /* 顶部距离自动 */
    left: 0;                                      /* 确保没有负值偏移 */
    right: 0;                                     /* 确保没有负值偏移 */

    /* 关键的居中设置 */
    width: auto; /* 允许宽度根据内容自适应 */
    max-width: fit-content; /* 让宽度适应内容，同时兼容性更好 */
                          /* 也可以用一个固定值如 max-width: 200px; 根据实际分页点数量调整 */
    margin: 0 auto;       /* 水平居中 */

    background: rgb(0 0 0 / 20%); /* 背景色 */
    text-align: center;  /* 确保内部文本和行内元素居中 */
    display: flex;       /* 启用 Flexbox */
    justify-content: center; /* Flexbox 水平居中其内容（分页点） */
    align-items: center;     /* Flexbox 垂直居中其内容（如果分页器有高度） */
    padding: 5px 15px;   /* 增加内边距，让胶囊更饱满，特别是左右 */
    border-radius: 13px; /* 圆角 */
    box-sizing: border-box; /* 确保 padding 不会增加总宽度导致溢出 */
}

/* Swiper 分页器小圆点样式 (确保它们在胶囊内对齐) */
.swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.7); /* 分页点颜色 */
    opacity: 1; /* 确保点点可见 */
    margin: 0 4px; /* 调整点点之间的间距 */
    transition: all 0.3s ease; /* 过渡效果 */
}

.swiper-pagination-bullet-active {
    background-color: #ffffff; /* 激活状态的点点颜色 */
    transform: scale(1.2); /* 激活状态的点点略微放大 */
}

/* 如果你的 Swiper 是全宽的，可能需要给 .swiper-container 额外设置 */
/* 例如，如果 .swiper-container 自身有 padding 或 margin 导致分页器无法靠边 */
.swiper-container {
    overflow: hidden; /* 防止内容溢出 */
    /* position: relative; /* 确保子元素的 absolute 定位是相对于它 */
}


    
    
    /* --- 模式切换按钮样式 --- */
.lightbulb {
    position: fixed; /* 固定定位，使其不随页面滚动 */
    bottom: 35px;    /* 距离页面底部30像素 */
    right: 30px;     /* 距离页面右侧30像素 */
    z-index: 1000;   /* 确保按钮在其他内容之上 */
    cursor: pointer; /* 鼠标悬停时显示手型，表示可点击 */
    padding: 10px;   /* 内部填充 */
    border-radius: 50%; /* 变成圆形按钮 */
    /* background-color: var(--button-bg-color); 应用按钮背景色变量 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    display: flex;   /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 48px;     /* 固定宽度 */
    height: 48px;    /* 固定高度，使其成为一个正方形，然后 border-radius 使其变圆 */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* 过渡动画 */
}

.lightbulb:hover {
    background-color: var(--button-hover-color); /* 鼠标悬停时的背景色 */
    transform: scale(1.08); /* 鼠标悬停时轻微放大 */
}

/* SVG 图标基础样式 */
.lightbulb svg {
    width: 24px;   /* SVG 宽度 */
    height: 24px;  /* SVG 高度 */
    fill: var(--icon-fill-color); /* 应用图标填充色变量 */
    transition: fill 0.3s ease; /* SVG 填充颜色过渡 */
}

.lightbulb:hover svg {
    fill: var(--icon-hover-color); /* 鼠标悬停时图标颜色变亮 */
}

    /* 输入框样式 */
.login_dvi input[type="text"],
.login_dvi input[type="password"],
.login_dvi input[type="email"],
.login_dvi input[type="submit"] {
 width:100%;
    padding: 10px 10px;
    margin-bottom: 15px;
    border: 1px solid #4CAF50;
    border-radius: 3px;
    font-size: 16px;
    box-shadow: none;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
    background-color: rgb(10 10 10);
    color: #fff;
}

/* 设置文本框和密码框透明度 */
.login_dvi input[type="text"],
.login_dvi input[type="password"] {
    opacity: 0.45; /* 设置透明度为0.75 */
}
.login_dvi input[type="submit"] :hover {
background-color: rgba(255, 255, 255, 0.15);    
}

/* 输入框聚焦样式 */
.login_dvi input[type="text"]:focus,
.login_dvi input[type="password"]:focus,
.login_dvi input[type="email"]:focus {
border-color: #45a049;
    box-shadow: 0 0 10px #6dbb70;
    outline: none;
}
/* 按钮样式 */
.login_dvi input[type="submit"] {
    background-color: #4CAF50; /* 按钮背景颜色 */
    color: white; /* 按钮文本颜色 */
    cursor: pointer; /* 鼠标悬停时显示手势 */
    border: none; /* 移除按钮边框 */
 border-radius: 3px; /* 设置圆角 */
 margin-bottom: 15px;
}

.login_dvi input[type="submit"]:hover {
    background-color: #45a049; /* 悬停时按钮背景颜色变深 */
}

    .fullscreen-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 5;
    width: 90%;
    max-width: 900px;
}
    
.fullscreen-overlay h1 {
    font-size: 4.5em; /* 更大的标题 */
    margin-bottom: 25px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* 更强的阴影 */
    color: white; /* 确保颜色在深色模式下也保持白色 */
    line-height: 1.2;
    font-weight: 400;
}

.fullscreen-overlay p {
    font-size: 1.6em; /* 更大的段落文字 */
    line-height: 1.6;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    color: white; /* 确保颜色在深色模式下也保持白色 */
    font-weight: 300; /* 更细的字体 */
}
.swiper-pagination {
    display: none; /* 隐藏 Swiper 分页器小点点 */
}

.img_list{
margin-bottom:80px;
}

@media (max-width: 768px) {
.index-banner{
    display: none;
}

    .img_list{
margin-bottom:10px;
}
}