/* #region 响应式布局，当宽度大于1024的时候 */
/*#region 基础设置 */
/* --- 隐藏滚动条但保留滚动功能 --- */

/* 针对 Firefox 浏览器 */
html {
    scrollbar-width: none;
}

/* 针对 Chrome, Safari, Edge 等 WebKit 内核的浏览器 */
body::-webkit-scrollbar {
    display: none;
}
html{
    scroll-behavior: smooth; /* 核心属性，实现平滑滚动 */
    scroll-padding-top: 64px; /* 滚动时避开固定导航栏高度 */
    background-color: rgb(255, 255, 255); 
    user-select: none;
}
body{
    font-size: 14px;
    color: #888;
    overflow-x: hidden;
    /* position: relative; */
}
body.lightbox-open{
    overflow: hidden;
}

.container{
    width: 92%;
    margin: 0 auto;
    /* background-color: aqua; */
}
/* 移除WebKit浏览器（Chrome、Safari等）的增减按钮 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 移除Firefox的增减按钮 */
input[type="number"] {
  appearance: textfield;
}
/* #endregion基础设置 */

/* #region 字体 */
@font-face {
    font-family: 'iconfont';
    src: url('./font/iconfont.ttf') format('truetype'),
         url('./font/iconfont.woff') format('woff'),
         url('./font/iconfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'qdu';
    src: url('./font/SanJiXingKaiJianTi-Cu-2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'quotation';
    src: url('./font/douyuFont-2.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'huodong';
    src: url('./font/HongLeiXingShuJianTi-2.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.iconfont {
  font-family: "iconfont" !important;
  font-size: 28px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  font-weight:600;
  user-select: none;
}

.qdu{
    font-family: 'qdu';
    font-size: 24px;
    color: #333;
    user-select: none;
}

.quotation{
    font-family: 'quotation';
    font-size: 36px;
    color: white;
    user-select: none;
}

.huodong{
    font-family: 'huodong';
    font-size: 32px;
    color: black;
    user-select: none;
}
/* #endregion字体 */

/* #region顶部导航栏 */
.topbar{
    height: 64px;
    background-color: transparnt;
    position: fixed;/* 固定定位，脱离文档流 */
    top: 0;
    left: 0;
    right: 0; /* 让导航栏占满宽度 */
    z-index: 100; /* 确保导航栏在最上层 */
    transition: background-color 0.2s;
}
/* 这个是用JS动态添加的类 */
.scrolled{
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.scrolled .nav a.active,
.scrolled .nav li:hover{
    color: black;
}
.topbar-container{
    line-height: 64px;
    display: flex;
}
.topbar .iconfont{
    vertical-align: top;
    display: inline-block;
    margin-top: 2px;
    margin-right: 10px;
}

.topbar .nav{
    margin-left: 48px;
    width: 70%;
    display: flex;
    justify-content: baseline;
    align-items: center;
}
.topbar .nav li{
    /* height: 40px; */
    margin: 0 20px;
    position: relative;
    overflow: hidden;
}
.scrolled .nav li a.active::after,
.scrolled .nav li a::after,
.topbar .nav li a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 0; 
    height: 1px;
    background-color: #666;
    transition: width 0.5s;
    transition: background-color 0.3s;
}
.topbar .nav li :hover::after,
.topbar .nav li a.active:hover::after{
    width: 100%;
    background-color: white;
}
.scrolled .nav li :hover::after,
.scrolled .nav li a.active:hover::after{
    width: 100%;
    background-color: black;
}
.scrolled .nav li a,
.topbar .nav li a{
    color: #888;
    font-size: 14px;
    transition: color 0.5s;
    /* transition: font-size 0.3s; */
    transition: letter-spacing 0.5s;
}
.topbar .nav li a:hover{
    color: white;
    /* font-size: 16px; */
    letter-spacing: 3px;
}
.scrolled .nav li a:hover{
    color: black;
    /* font-size: 16px; */
    letter-spacing: 3px;
}
.topbar .nav li a.active{
    color: white;
    letter-spacing: 3px;
}
.scrolled .nav li a.active{
    color: black;
    letter-spacing: 3px;
}
/* #endregion顶部导航栏 */

/* #region 宣传展示页 */
.display{
    width: 100vw;
    height: 100vh;
    /* background-color: aqua; */
    /* background-image: url(../img/IMG_5427.JPG); */
    background-size:cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.display span{
    transition: letter-spacing 0.8s;
    position: absolute;
    z-index: 100;
}
.display span:hover{
    letter-spacing: 5px;
}
video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
}
.slider-container{
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    /* background-color: #333; */
}
.slider-track{
    position: absolute;
    height: 100%;
    display: flex;
    transition: transform 0.8s;
}
.slider-item{
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    position: relative;

    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.slider-item::before{
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    background: inherit;
    filter: blur(20px);
}
.slider-item img{   
    height: 100%;
    width: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
}
.slider-arrow{
    width: 40px;
    height: 300px;
    background-color: transparent;
    font-size: 36px;
    color: white;
    position: absolute;
    z-index: 10;
    text-align: center;
    line-height: 300px;
    top: 32%;
    opacity: 0;
    transition: opacity 0.6s;
    transition: background-color 0.6s;
}
.slider-arrow:hover{
    color: red;
    background-color: rgb(0, 0, 0,0.1);
    opacity: 1;
}
.slider-container .prev{
    left: 0;
}
.slider-container .next{
    right: 0;
}

/* 小圆点容器样式 */
.slider-dots{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    z-index: 10;
    display: flex;
    gap: 12px; /* 圆点之间的间距 */
}

/* 单个小圆点样式 */
.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* 激活状态的小圆点 */
.slider-container .active {
    background-color: white;
}



/* #endregion宣传展示页 */

/* #region 文字分割 */
.works-display-text,
.hot-activitise-text{
    background-color: transparent;
    text-align: center;
    margin-top: 70px;
    transition: all 0.3s;
}

.works-display-text a,
.hot-activitise-text a{
    font-size: 3vw;
    color: black;
    transition: all 0.3s;
}
.works-display-text:hover,
.hot-activitise-text:hover{
    transform:translateY(-2px) scale(1.01);
}
/* #endregion 作品展示文字分隔 */

/* #region 作品展示 */

.works-display{
    /* height: 1000px; */
    /* background-color: antiquewhite; */
}
.works-display .container{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
/* 分类导航 */

/* 作品分类导航 */
.works-display .nav,
.works-display .authorNav{
    /* margin-top: 1vw; */
    display: flex;
    /* justify-content:space-evenly; */
    justify-content: center;
    width: 100%;
    height: 36px;
    /* background-color: #333; */
}

.works-display .nav .nav-items{
    width: 130px;
    height: 36px;
    cursor: pointer;
    text-align: center;
    line-height: 36px;
    background-color: transparent;
    margin: 0 16px;
    font-size: large;
    border: 1px solid black;
    border-radius: 10px;
    color: black;
    transition: all 0.3s;
    overflow: hidden;
}

.works-display .nav .nav-items:hover{
    color: white;
    background-color: #333;
    box-shadow: 0 10px 15px -3px rgb(0, 0, 0,0.2);
    transform: translateY(-5px);
}
.works-display .nav .active,
.works-display .authorNav.active{
    color: white;
    background-color: #333;
}

/* 作者分类导航 */
.works-display .authorNav .authorNav-items{
    width: 12.6vw;
    height: 2.4vw;
    background-color: transparent;
    border-radius: 2px;
    /* border: 1px solid #666; */
    display: flex;
    align-items: center;
    justify-content:baseline;
    cursor: pointer;
    /* margin-top: 0.5vw; */
    transition: all 0.3s;
    overflow: hidden;
}
.works-display .authorNav .authorNav-items:hover{
    box-shadow: 0 3px 15px -5px rgb(0, 0, 0,0.2);
    transform: translateY(-2px);
    margin: 0 10px;
}
.works-display .authorNav .authorNav-items .img{
    width: 2.4vw;
    height: 2.4vw;
    border-radius: 1.2vw;
    background-image: url(../img/QQ图片20250827131933.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}
.works-display .authorNav .authorNav-items .authorName{
    width: 62%;
    margin-left: 0.5vw;
}
.works-display .authorNav .authorNav-items.active{
    box-shadow: 0 3px 15px -5px rgb(0, 0, 0,0.2);
    transform: translateY(-2px);
    margin: 0px 10px;
}
/* 作者导航滑动显示 */
.works-display .author-Nav{
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.works-display .author-Nav .author-nav-wrapper{
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    /* background-color: #333; */
    overflow: hidden;
}
.works-display .author-Nav .author-nav-wrapper .authorNav{
    /* background-color: #00AB6B; */
    height: 42px;
    width: auto;
    transition: all 0.3s;
}
.works-display .author-Nav .author-arrow{
    display: inline-block;
    width: 32px;
    height: 56px;
    /* background-color: #00AB6B; */
    font-size: 16px;
    background-color: transparent;
    transition: all 0.3s;
    cursor: pointer;
}
.works-display .author-Nav .author-arrow:hover{
     background-color: rgb(0, 0, 0,0.1);
}
.works-display .author-Nav .author-arrow.prev{
    
}
.works-display .author-Nav .author-arrow.next{

}

/* 作品展示 */
.works-display .works{
    margin-top: 36px;
    display: grid;
    grid-template-columns:repeat(4,1fr);
    gap: 24px;
}
.works-display .works .work-items{
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    aspect-ratio:4/3;
    background-image: url(../img/QQ图片20250827131933.jpeg);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s;
}
.works-display .works .work-items:hover{
    transform:translateY(-2px) scale(1.01);
    box-shadow: 0 10px 15px -3px rgb(0, 0, 0,0.2);
}
.works-display .works .work-items .workDetail{
    width: 100%;
    height: 100%;
    background:linear-gradient(to top,rgba(0, 0, 0, 0.306),rgba(0, 0, 0, 0));
    display: flex;
    align-items: end;
    justify-content:space-around;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.works-display .works .work-items:hover .workDetail{
    opacity: 1;
    visibility: visible;
}
.works-display .works .work-items .workDetail .avatar{
    width: 2.3vw;
    height: 2.3vw;
    border-radius:100%;
    background-image: url(../img/QQ图片20250827131933.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 0.8vw;
    margin-left: 1vw;
}
.works-display .works .work-items .workDetail .authorName{
    width: 9vw;
    height: 3vw;
    /* background-color: aqua; */
    display: flex;
    align-items:center;
    justify-content:baseline;
    margin-bottom: 0.5vw;
    margin-left: 1vw;
    font-size: 0.9vw;
    color:white;
}
.works-display .works .work-items .workDetail .workName{
    width: 9vw;
    height: 3vw;
    /* background-color:antiquewhite; */
    display: flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 0.5vw;
    color: #d6cece;
}
/* 页码部分 */
.works-display .pagination-container{
    width: auto;
    height: 36px;
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: 8px;
    /* background-color: #333; */
    margin-top: 30px;
    justify-content: space-between;
    align-items: center;
    
}
.works-display .pagination-container button{
    width: 36px;
    height: 36px;
    background-color: transparent;
    transition: all 0.3s;
    cursor: pointer;
    
}
.works-display .pagination-container .active{
    color: white;
    background-color: #333;
    box-shadow: 0 10px 15px -3px rgb(0, 0, 0,0.2);
    font-size: 16px;
}
.works-display .pagination-container button:hover{
    color: white;
    background-color: #333;
    box-shadow: 0 10px 15px -3px rgb(0, 0, 0,0.2);
    transform: translateY(-1px);
    font-size: 16px;
}
.works-display .pagination-container span{
    font-size: 16px;
    color: black;
}
.works-display .pagination-container input{
    width: 36px;
    height: 36px;
    background-color: rgba(245, 245, 245, 0.37);
    font-size: 16px;
    text-align: center;
    transition: all 0.3s;
    border-radius: 1px;
}

.works-display .pagination-container input:hover{
    background-color: #8888887d;
    width: 40px;
}

/* #endregion 作品展示 */


/* #region 活动展示 */
.hot-activities{
    /* height: 1000px; */
}
.hot-activities .container{
    display: grid;
    grid-template-columns: (1 , 1fr);
}
.hot-activities .container .itemSection{
    margin-top: 2vw;
    border-radius: 16px;
    background-color: white;
    aspect-ratio: 7/1;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    margin-bottom: 2vw;
}
.hot-activities .container .itemSection:hover{
    transform:translateY(-2px) scale(1.01);
    box-shadow: 0 10px 15px -3px rgb(0, 0, 0,0.2);
}
.hot-activities .container .rightDetail{
    width: 82%;
    height: 90%;
    /* background-color: #33333325; */
    margin-left: 2vw;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
}

.hot-activities .container .itemSection .leftImg{
    width: 13%;
    height: 91%;
    border-radius: 8px;
    margin-left: 1vw;
    /* background-color: #666; */
    background-image: url(../照相机.png);
    background-size: cover;
}
.hot-activities .container .itemSection .mainDetails{
    height: 20%;
    /* background-color: #666; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.4vw;
    font-weight: bold;
    color: #555;
}
.hot-activities .container .itemSection .mainDetails .active{
    color: black;
}
.hot-activities .container .itemSection .mainDetails .item{
    /* margin-right: 7vw; */
}

.hot-activities .container .itemSection .mainDetails .time{
    display: flex;
}
.hot-activities .container  .startTimeDiv{
    width: 20vw;
    margin-right: 12vw;
}
.hot-activities .container .itemSection .mainDetails .time .timeItem{
    margin-right: 6vw;
}
.hot-activities .container .itemSection .topNameAndState{
    height: 30%;
    /* background-color: #666; */
    
}
.hot-activities .container .itemSection .topNameAndState{
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.hot-activities .container .itemSection .topNameAndState .name{
    font-size: 3vw;
    color: black;
}
.hot-activities .container .itemSection .topNameAndState .prompt{
    font-size: 1vw;
    margin-right: 8vw;
}
.hot-activities .container .itemSection .topNameAndState .state{
    width: 6vw;
    height: 1.5vw;
    text-align: center;
    font-size: 1vw;
    color: white;
    font-weight: 600;
    background-color: #00AB6B;
    border-radius: 8px;
    vertical-align:top
}

/* #endregion 活动展示 */

/* #region灯箱部分 */
.lightbox{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:rgb(0, 0, 0);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.lightbox.lightbox-open{
    opacity: 1;
    visibility: visible;
}
.lightbox .imgDisplay{
    height: 100%;
    width: 80%;
    /* background-color: #888; */
    border-right: 1px solid #8888883b;
}
.lightbox .imgDisplay .topNav{
    width: 100%;
    height: 6%;
    display: flex;
    /* background-color: #00AB6B; */
    justify-content: end;
}
.lightbox .imgDisplay .topNav button{
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3vw;
    background-color: transparent;
    font-weight: 200;
    height: 6vh;
    width: 6vh;
    /* background-color: #333; */
    transition: all 0.3s;
    cursor: pointer;

}
.lightbox .imgDisplay .topNav button:hover{
    font-size: 1.6vw;
}

.lightbox .imgDisplay .midImg{
    width: 100%;
    height: 94%;
    display: flex;
    justify-items: center;
    align-items: center;
    position: relative;
}
.lightbox .imgDisplay .midImg img{
    height: 100%;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1);
    cursor: grab;
    transition: transform 0.1s linear;
}
.lightbox .imgDisplay .midImg img.dragging{
    cursor: grabbing;
    transform: none;
}
.lightbox .detailDisplay{
    
    height: 100%;
    width: 20%;
    /* background-color: #555; */

}

.lightbox .detailDisplay .topDetail{
    width: 100%;
    height: 6%;
    display: flex;
    justify-content: baseline;
    /* background-color: aliceblue; */
    display: flex;
    justify-content: baseline;
    align-items:center;
    border-bottom: 1px solid #8888883b;
}
.lightbox .detailDisplay .topDetail div{
    margin:0 1vw;
    font-size: 1.5vw;
    color: rgba(255, 255, 255, 0.47);
    /* background-color: #00AB6B; */
}

.lightbox .detailDisplay .author{
    width: 100%;
    height: 10%;
    /* background-color: aquamarine; */
    display: flex;
    border-bottom: 1px solid #8888883b;
}
.lightbox .detailDisplay .author .avatar{
    width: 5vw;
    height: 5vw;
    /* background-color: #555; */
    margin-left: 1vw;
    border-radius: 5vw;
    background-image: url(../img/QQ图片20250827131933.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
}
.lightbox .detailDisplay .author .rightData{
    margin-left: 2vw;
}
.lightbox .detailDisplay .author .rightData .name{
    width: 10vw;
    height: 2vw;
    /* background-color: #555; */
    margin-top: 0.5vw;
    font-size: 1.2vw;
    color: white;
    display: flex;
    align-items: center;
}
.lightbox .detailDisplay .author .rightData .time{
    width: 10vw;
    height: 2vw;
    /* color: #666; */
    display: flex;
    align-items: center;
    /* background-color: #555; */
    
}
.lightbox .detailDisplay .worksDescription{
    margin-top: 1vw;
    width: 100%;
    height: 15%;
    /* background-color: #00AB6B; */
    border-bottom: 1px solid #8888883b;
}
.lightbox .detailDisplay .worksDescription .workName{
    font-size: 1vw;
    color: white;
    padding-left: 1vw;
}
.lightbox .detailDisplay .worksDescription .workDescription{
    margin-top: 1vw;
    font-size: 0.8vw;
    color: white;
    padding-left: 1vw;
}
.lightbox .detailDisplay .worksParam{
    width: 100%;
    height: 20%;
    /* background-color:antiquewhite; */
    padding-left: 1vw;
    margin-top: 1vw;
    border-bottom: 1px solid #8888883b;
}
.lightbox .detailDisplay .worksParam .data{
    width: 90%;
}
/* #endregion 灯箱部分 */
/* #endregion 当宽度大于1024的时候 */

/* #region 响应式布局，当宽度大于768小于等于1024的时候 */
@media (max-width: 1024px){

    /* 顶部导航栏部分 */
    .topbar .nav{
    margin-left: 36px;
    width: 46%;
    display: flex;
    justify-content: baseline;
    align-items: center;
    }
    .topbar .nav li{
    /* height: 40px; */
    margin: 0 10px;
    position: relative;
    overflow: hidden;
    }
    .topbar .iconfont{
    vertical-align: top;
    display: inline-block;
    margin-top: 20px;
    margin-right: 10px;
    }
    .scrolled .nav li a.active::after,
    .scrolled .nav li a::after,
    .topbar .nav li a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 0; 
    height: 1px;
    background-color: #666;
    transition: width 0.5s;
    transition: background-color 0.3s;
    }
    .topbar .qdu{
    font-family: 'qdu';
    font-size: 24px;
    color: #333;
    user-select: none;
    line-height: 100px;
    }
    .scrolled .nav li a,
    .topbar .nav li a{
    color: #888;
    font-size: 16px;
    transition: color 0.5s;
    /* transition: font-size 0.3s; */
    transition: letter-spacing 0.5s;
    }
    /* 活动文字分隔部分 */
    .works-display-text,
    .hot-activitise-text{
        background-color: transparent;
        text-align: center;
        margin-top: 70px;
        transition: all 0.3s;
        overflow: hidden;
    }
    .works-display-text a,
    .hot-activitise-text a{
    font-size: 36px;
    color: black;
    transition: all 0.3s;
}

}


/* #endregion 响应式布局，当宽度大于768小于等于1024的时候 */