/* 加载页样式 */
#loading-page {
  background-color: #1A1A1A;
  background-image: radial-gradient(circle at center, #1A1A1A 0%, #000000 100%);
}

#loading-bar {
  background: linear-gradient(90deg, #DAA520 0%, #F0E68C 50%, #DAA520 100%);
  background-size: 200% 100%;
  animation: gradientFlow 2s ease infinite;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #464646;
}

::-webkit-scrollbar-thumb {
  background: #8B0000;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #660000;
}
/* 加载页 */
/* 全局样式 */
* {
    cursor: url(../source/image/shouye/shubiao.png), default;
    /*鼠标样式*/
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    /* 设置字体为 Inter 或系统默认无衬线字体 */
    scroll-behavior: smooth;
    /* 设置滚动行为为平滑滚动 */
    margin: 0;
    /* 去除页面外边距 */
    padding: 0;
    /* 去除页面内边距 */
    background-color: #1a1a1a;
    /* 设置背景颜色 */
    color: #f5f5f5;
    /* 设置文本颜色 */
    /*cursor: url(source/image/the_2d/鼠标光标.png), auto;*/
    /* 设置自定义鼠标样式，需替换为实际路径 */
}



/* 导航栏样式 */
#sidebar {
    position: fixed;
    /* 固定导航栏位置 */
    left: 0;
    /* 左对齐 */
    top: 25%;
    /* 距离顶部 25% */
    height: 60%;
    /* 高度为 60% */
    width: 32px;
    /* 初始宽度为 32px */
    background: rgba(15, 15, 15, 0.5);
    /* 设置背景颜色和透明度 */
    backdrop-filter: blur(8px);
    /* 设置背景模糊效果 */
    z-index: 50;
    /* 设置层级 */
    transition: width 0.5s ease-in-out;
    /* 设置宽度变化的过渡效果 */
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列子元素 */
    align-items: center;
    /* 子元素水平居中 */
    justify-content: space-between;
    /* 子元素均匀分布 */
    padding: 2px;
    /* 设置内边距 */
    border-top-right-radius: 20px;
    /* 设置右上角圆角 */
    border-bottom-right-radius: 20px;
    /* 设置右下角圆角 */
}

#sidebar:hover {
    width: 120px;
    /* 鼠标悬停时宽度变为 120px */
    height: 60%;
}

#sidebar:hover .nav-items {
    display: block;
    /* 鼠标悬停时显示导航菜单项 */
}

#sidebar:hover .nav-text {
    opacity: 0;
    /* 鼠标悬停时导航菜单项文本透明度为 0 */
}



.nav-items {
    display: none;
    /* 初始隐藏导航菜单项 */
    width: 100%;
    /* 宽度为 100% */
    margin-top: 32px;
    /* 顶部外边距为 32px */
}

.nav-item {
    list-style: none;
    /* 去除列表项的默认样式 */
}

.nav-item a {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 子元素垂直居中 */
    padding: 8px;
    /* 设置内边距 */
    border-radius: 8px;
    /* 设置圆角 */
    transition: all 0.3s ease;
    /* 设置过渡效果 */
    color: white;
    /* 设置文本颜色为白色 */
}

.nav-item a:hover {
    background: rgba(255, 255, 255, 0.1);
    /* 鼠标悬停时背景颜色变为半透明白色 */
}

.nav-text {
    margin-left: 8px;
    /* 左侧外边距为 8px */
    opacity: 0;
    /* 初始透明度为 0 */
    transition: opacity 0.3s ease;
    /* 设置透明度变化的过渡效果 */
}

/* 首页样式 */
#home {
    position: relative;
    /* 相对定位 */
    height: 100vh;
    /* 高度为视口高度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 子元素垂直居中 */
    justify-content: center;
    /* 子元素水平居中 */
    overflow: hidden;
    /* 隐藏溢出内容 */

}

#home .shouye .overlay {
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    width: 100%;
    /* 宽度为 100% */
    height: 100%;
    /* 高度为 100% */
    background: linear-gradient(to bottom, rgba(26, 26, 26, 0), rgba(0, 0, 0, 0.5) 100%);
    /* 设置背景渐变 */
}

#history .container .overlay {
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    width: 100%;
    /* 宽度为 100% */
    height: 100%;
    /* 高度为 100% */
    background: linear-gradient(to bottom, rgba(26, 26, 26, 0.909), rgba(26, 26, 26, 0) 100%);
    /* 设置背景渐变 */
}



#home .content {
    position: absolute;
    /* 绝对定位 */
    top: 50%;
    /* 距离顶部 50% */
    left: 50%;
    /* 距离左侧 50% */
    transform: translate(-50%, -50%);
    /* 水平和垂直居中 */
    text-align: center;
    /* 文本居中 */
    width: 100%;
    /* 宽度为 100% */
}



@keyframes fadeInUp {
    to {
        opacity: 1;
        /* 最终透明度为 1 */
        transform: translateY(0);
        /* 最终偏移量为 0 */
    }
}





#home .scroll-indicator {
    position: absolute;
    /* 绝对定位 */
    bottom: 40px;
    /* 距离底部 40px */
    left: 50%;
    /* 距离左侧 50% */
    transform: translateX(-50%);
    /* 水平居中 */
    animation: bounce 2s infinite;
    /* 应用弹跳动画 */
}

#home .scroll-indicator a {
    color: rgba(212, 175, 55, 0.7);
    /* 设置文本颜色和透明度 */
    transition: color 0.3s ease;
    /* 设置颜色变化的过渡效果 */
}

#home .scroll-indicator a:hover {
    color: #d4af37;
    /* 鼠标悬停时文本颜色变为 #d4af37 */
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
        /* 特定时间点垂直偏移量为 0 */
    }

    40% {
        transform: translateY(-20px);
        /* 40% 时间点向上偏移 20px */
    }

    60% {
        transform: translateY(-10px);
        /* 60% 时间点向上偏移 10px */
    }
}

/* 历史渊源部分样式 */
#history {
    position: relative;
    /* 相对定位 */
    min-height: 100vh;
    /* 最小高度为视口高度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 子元素垂直居中 */
    justify-content: center;
    /* 子元素水平居中 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    background-image: url("../source/image/shouye/BACK2.png");
    background-size: cover;
    /* 设置背景图片 */
}

#history .container {
    width: 90%;
    /* 宽度为 100% */
    max-width: 100pv;
    /* 最大宽度为 1200px */

}

#history .grid {
    height: 120vh;
    display: grid;
    /* 使用网格布局 */
    grid-template-columns: 1.5fr;
    /* 初始为单列布局 */
    gap: 64px;
    /* 网格项间距为 64px */
    align-items: center;
    /* 网格项垂直居中 */
}

@media (min-width: 1024px) {
    #history .grid {
        grid-template-columns: 1fr 1fr;
        /* 屏幕宽度大于等于 1024px 时，变为双列布局 */
    }
}

#history .left-content .fact-cards {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100vh;


    /* 自动适应列数，最小列宽为 200px */

    /* 网格项间距为 32px */
}



#history .left-content .fact-card:hover {
    border: 1px solid rgba(212, 175, 55, 0.5);
    /* 鼠标悬停时边框颜色变深 */
}

#history .left-content .fact-card .number {
    font-size: 48px;
    /* 设置字体大小 */
    font-family: 'Ma Shan Zheng', cursive;
    /* 设置字体为 Ma Shan Zheng 或手写体 */
    color: #d4af37;
    /* 设置文本颜色 */
    margin-bottom: 8px;
    /* 底部外边距为 8px */
}

#history .left-content .fact-card .text {
    font-size: 14px;
    /* 设置字体大小 */
    color: rgba(245, 245, 245, 0.8);
    /* 设置文本颜色和透明度 */
}

#history .left-content .fact-card2:hover {
    border: 1px solid rgba(212, 175, 55, 0.5);
    /* 鼠标悬停时边框颜色变深 */
}

#history .left-content .fact-card2 .number {
    font-size: 48px;
    /* 设置字体大小 */
    font-family: 'Ma Shan Zheng', cursive;
    /* 设置字体为 Ma Shan Zheng 或手写体 */
    color: #d4af37;
    /* 设置文本颜色 */
    margin-bottom: 8px;
    /* 底部外边距为 8px */
}

#history .left-content .fact-card2 .text {
    font-size: 14px;
    /* 设置字体大小 */
    color: rgba(245, 245, 245, 0.8);
    /* 设置文本颜色和透明度 */
}



/* 传世名作部分样式 */
#masterpieces {
    position: relative;
    /* 相对定位 */
    min-height: 100vh;
    /* 最小高度为视口高度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 子元素垂直居中 */
    justify-content: center;
    /* 子元素水平居中 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    background-image: url(../source/image/shouye/footback1.png);
    background-size: cover;
    /* 设置背景图片 */

    /* 设置背景颜色 */
}

#masterpieces .container {
    width: 100%;
    /* 宽度为 100% */
    max-width: 1200px;
    /* 最大宽度为 1200px */
    margin: 0 auto;
    /* 水平居中 */
    padding: 96px 24px;
    /* 设置内边距 */
}

#masterpieces .header {
    text-align: center;
    /* 文本居中 */
    margin-bottom: 64px;
    /* 底部外边距为 64px */
    opacity: 0;
    /* 初始透明度为 0 */
    animation: fadeIn 1s ease 0.5s forwards;
    /* 应用淡入动画 */
}

@keyframes fadeIn {
    to {
        opacity: 1;
        /* 最终透明度为 1 */
    }
}



#masterpieces .header h2 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    /* 设置字体大小，根据视口宽度自适应 */
    font-family: 'Noto Serif SC', serif;
    /* 设置字体为 Noto Serif SC 或衬线字体 */
    font-weight: 600;
    /* 设置字体粗细 */
    color: rgb(69, 47, 0);

    /* 设置文本颜色 */
    margin-top: 10px;
    /* 顶部外边距为 8px */
    margin-bottom: 24px;
    /* 底部外边距为 24px */
}

#masterpieces .header p {
    color: rgb(69, 47, 0);
    /* 设置文本颜色和透明度 */
    max-width: 800px;
    /* 最大宽度为 800px */
    margin: 0 auto;
    /* 水平居中 */
    line-height: 1.6;
    /* 设置行高 */
}



/* 文化内涵部分样式 */
#culture {
    position: relative;
    /* 相对定位 */
    min-height: 100vh;
    /* 最小高度为视口高度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 子元素垂直居中 */
    justify-content: center;
    /* 子元素水平居中 */
    overflow: hidden;
    background-image: url(../source/image/shouye/footback.png);
    background-size: cover;
    /* 设置背景图片 */
    /* 隐藏溢出内容 */
}



#culture .background .overlay {
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    width: 100%;
    /* 宽度为 100% */
    height: 100%;
    /* 高度为 100% */
    background: #1a1a1a;
    /* 设置背景颜色 */
}

#culture .container {
    width: 100%;
    /* 宽度为 100% */
    max-width: 1200px;
    /* 最大宽度为 1200px */
    margin: 0 auto;
    /* 水平居中 */
    padding: 96px 24px;
    /* 设置内边距 */
    position: relative;
    /* 相对定位 */
    z-index: 1;
    /* 设置层级 */
}

#culture .header {
    text-align: center;
    /* 文本居中 */
    margin-bottom: 64px;
    /* 底部外边距为 64px */
    opacity: 0;
    /* 初始透明度为 0 */
    animation: fadeIn 1s ease 0.5s forwards;
    /* 应用淡入动画 */
}

#culture .header span {
    color: rgba(212, 175, 55, 0.7);
    /* 设置文本颜色和透明度 */
    font-weight: 500;
    /* 设置字体粗细 */
    letter-spacing: 2px;
    /* 设置字母间距 */
    text-transform: uppercase;
    /* 文本转换为大写 */
    font-size: 14px;
    /* 设置字体大小 */
}

#culture .header h2 {
    font-size: clamp(1.8rem, 5vw, 3rem);
    /* 设置字体大小，根据视口宽度自适应 */
    font-family: 'Noto Serif SC', serif;
    /* 设置字体为 Noto Serif SC 或衬线字体 */
    font-weight: 600;
    /* 设置字体粗细 */
    color: #f5f5f5;
    /* 设置文本颜色 */
    margin-top: 8px;
    /* 顶部外边距为 8px */
    margin-bottom: 24px;
    /* 底部外边距为 24px */
}

#culture .header p {
    color: rgba(245, 245, 245, 0.7);
    /* 设置文本颜色和透明度 */
    max-width: 800px;
    /* 最大宽度为 800px */
    margin: 0 auto;
    /* 水平居中 */
    line-height: 1.6;
    /* 设置行高 */
}

#culture .grid {
    display: grid;
    /* 使用网格布局 */
    grid-template-columns: 1fr;
    /* 初始为单列布局 */
    gap: 64px;
    /* 网格项间距为 64px */
    align-items: center;
    /* 网格项垂直居中 */
}

@media (min-width: 1024px) {
    #culture .grid {
        grid-template-columns: 1fr 1fr;
        /* 屏幕宽度大于等于 1024px 时，变为双列布局 */
    }
}

#culture .left-content {
    opacity: 0;
    /* 初始透明度为 0 */
    transform: translateX(-100px);
    /* 初始向左偏移 100px */
    animation: slideInLeft 1s ease 0.5s forwards;
    /* 应用左滑进入动画 */
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        /* 最终透明度为 1 */
        transform: translateX(0);
        /* 最终偏移量为 0 */
    }
}




#culture .right-content .image-container {
    position: relative;
    /* 相对定位 */
    z-index: 1;
    /* 设置层级 */
    border-radius: 4px;
    /* 设置圆角 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    /* 设置阴影 */
    transform: rotate(2deg);
    /* 初始旋转 2 度 */
    transition: all 0.5s ease;
    /* 设置过渡效果 */
}

#culture .right-content .image-container:hover {
    transform: rotate(0);
    /* 鼠标悬停时旋转角度变为 0 */
}

#culture .right-content .image-container img {
    width: 100%;
    /* 宽度为 100% */
    height: 100%;
    /* 高度为 100% */
    object-fit: cover;
    /* 图片自适应填充容器 */
}

/* 页脚样式 */
footer {
    background: #0f0f0f;
    /* 设置背景颜色 */
    padding: 48px 0;
    /* 设置内边距 */
    position: relative;
    /* 相对定位 */
}

footer .container {
    width: 100%;
    /* 宽度为 100% */
    max-width: 1200px;
    /* 最大宽度为 1200px */
    margin: 0 auto;
    /* 水平居中 */
    padding: 0 24px;
    /* 设置内边距 */
}

footer .grid {


    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    /* 使用网格布局 */

}

footer .footbig {
    font-size: 20px;


}




footer .col-span-1.md:col-span-2 p {
    font-size: 14px;
    /* 设置字体大小 */
    color: rgba(245, 245, 245, 0.7);
    /* 设置文本颜色和透明度 */
    max-width: 400px;
    /* 最大宽度为 400px */
}

footer .copyright {

    margin-top: 24px;
    /* 顶部外边距为 48px */
    padding-top: 32px;
    /* 顶部内边距为 32px */
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    /* 设置顶部边框 */
    text-align: center;
    /* 文本居中 */
}

footer .copyright p {

    font-size: 12px;
    /* 设置字体大小 */
    color: rgba(245, 245, 245, 0.5);
    /* 设置文本颜色和透明度 */
}

footer .copyright a {

    font-size: 12px;
    /* 设置字体大小 */
    color: rgba(245, 245, 245, 0.5);
    /* 设置文本颜色和透明度 */
}


/* 返回顶部按钮样式 */
#back-to-top {
    position: fixed;
    /* 固定定位 */
    bottom: 32px;
    /* 距离底部 32px */
    right: 32px;
    /* 距离右侧 32px */
    width: 48px;
    /* 宽度为 48px */
    height: 48px;
    /* 高度为 48px */
    border-radius: 50%;
    /* 设置圆角为 50% */
    background: rgba(212, 175, 55, 0.2);
    /* 设置背景颜色和透明度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 子元素垂直居中 */
    justify-content: center;
    /* 子元素水平居中 */
    color: #d4af37;
    /* 设置文本颜色 */
    border: none;
    /* 去除边框 */
    cursor: pointer;
    /* 设置鼠标指针为手型 */
    transition: all 0.3s ease;
    /* 设置过渡效果 */
    opacity: 0;
    /* 初始透明度为 0 */
    visibility: hidden;
    /* 初始隐藏 */
}

#back-to-top:hover {
    background: rgba(212, 175, 55, 0.4);
    /* 鼠标悬停时背景颜色变深 */
    color: #1a1a1a;
    /* 鼠标悬停时文本颜色变为 #1a1a1a */
}

/* ___________________________________ */
/* 引入 Inter 字体，支持不同的样式和粗细 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


.shouye>img {
    width: 100%;
    /* 设置图片宽度为 100% */
    height: 100%;
    /* 设置图片高度为 100% */
    top: 4%;
    /* 设置图片距离顶部 10% */
    left: 0;
    /* 设置图片距离左侧 0 */
    object-fit: cover;
    /* 设置图片填充方式为覆盖 */
    opacity: 100%;
}



/* 为所有元素的伪元素设置盒模型为 border-box */

.shouye {
    height: 100vh;
    width: 100vw;


    overflow: hidden;
    /* 隐藏溢出的内容 */
}



/* Background-images */
.shouye img {
    position: absolute;
    /* 设置图片的定位为绝对定位 */
    bottom: -12%;
    /* 设置图片距离底部 -12% */
}

.contentone {
    margin: 0px;
    padding: 0px;

}

.contentone img {

    position: absolute;

    width: 100%;

    /* 设置图片距离左侧 0 */
    object-fit: cover;
    /* 设置图片填充方式为覆盖 */
    opacity: 100%;

}

@keyframes bottomIn {
    from {
        transform: translateY(300px);
        /* 动画起始状态，元素向下移动 200px */
    }

    to {
        transform: translateY(80px);
        /* 动画结束状态，元素回到初始位置 */
    }
}

@keyframes bottomInchu {
    from {
        transform: translateY(0px);
        /* 动画起始状态，元素向下移动 200px */
    }

    to {
        transform: translateY(-100px);
        /* 动画结束状态，元素回到初始位置 */
    }
}

.back-1 {
    animation: bottomIn 1s ease-out forwards;
    /* 为 back-1 类元素添加 bottomIn 动画，持续时间 1 秒，缓出效果，动画结束后保持最终状态 */
}

.back-4 {
    animation: bottomIn 1s ease-out forwards;
    /* 为 back-1 类元素添加 bottomIn 动画，持续时间 1 秒，缓出效果，动画结束后保持最终状态 */
}



.back-2 {
    animation: bottomIn 1.5s ease-out forwards;
    /* 为 back-2 类元素添加 bottomIn 动画，持续时间 1.3 秒，缓出效果，动画结束后保持最终状态 */
}

.back-3 {
    animation: bottomIn 1.7s ease-out forwards;
    /* 为 back-3 类元素添加 bottomIn 动画，持续时间 1.5 秒，缓出效果，动画结束后保持最终状态 */
}

.back-he {
    animation: bottomIn 1.7s ease-out forwards;
    /* 为 back-3 类元素添加 bottomIn 动画，持续时间 1.5 秒，缓出效果，动画结束后保持最终状态 */
}

.back-yun {
    animation: bottomIn 1.2s ease-out forwards;
    /* 为 back-3 类元素添加 bottomIn 动画，持续时间 1.5 秒，缓出效果，动画结束后保持最终状态 */
}

.back-yun2 {
    animation: bottomIn 1.2s ease-out forwards;
    /* 为 back-3 类元素添加 bottomIn 动画，持续时间 1.5 秒，缓出效果，动画结束后保持最终状态 */
}

.back-chuyun2 {
    animation: bottomInchu 1.2s ease-out forwards;
    /* 为 back-3 类元素添加 bottomIn 动画，持续时间 1.5 秒，缓出效果，动画结束后保持最终状态 */
}

.back-chuyun {
    position: absolute;
    top: 4%;
    left: 50%;
}

.back-chuyun2 {

    position: absolute;
    top: -1%;
    left: 0%;

    pointer-events: none;

    height: 90%;

    object-fit: cover;
    opacity: 100%;
}


@keyframes bottomInText {
    from {
        transform: translateY(500px);
        /* 动画起始状态，元素向下移动 500px */
        opacity: 0;
        /* 动画起始状态，元素透明度为 0 */
    }

    to {
        transform: translateY(0);
        /* 动画结束状态，元素回到初始位置 */
        opacity: 1;
        /* 动画结束状态，元素透明度为 1 */
    }
}






button {
    animation: bottomInText 1.2s ease-out forwards;
    /* 为按钮元素添加 bottomInText 动画，持续时间 1.2 秒，缓出效果，动画结束后保持最终状态 */
    animation-delay: 0.3s;
    /* 设置按钮元素动画延迟 0.3 秒 */
    opacity: 0;
    /* 初始状态按钮元素透明度为 0 */
}

@keyframes backgroundImage {
    from {
        background-position: center 0%;
        /* 动画起始状态，背景图片位置为顶部 */
    }

    to {
        background-position: center 14%;
        /* 动画结束状态，背景图片位置为水平居中，垂直 14% */
    }
}

.shouye {
    animation: backgroundImage 2.0s ease-out forwards;
    /* 为 body 元素添加 backgroundImage 动画，持续时间 1.6 秒，缓出效果，动画结束后保持最终状态 */
}

@keyframes topIn {
    from {
        transform: translateY(-100%);
        /* 动画起始状态，元素向上移动 100% */
        opacity: 0;
        /* 动画起始状态，元素透明度为 0 */
    }

    to {
        transform: translateY(0);
        /* 动画结束状态，元素回到初始位置 */
        opacity: 1;
        /* 动画结束状态，元素透明度为 1 */
    }
}

nav {
    animation: topIn 1.2s ease-out forwards;
    /* 为导航栏元素添加 topIn 动画，持续时间 1.2 秒，缓出效果，动画结束后保持最终状态 */
}

@keyframes zoomOut {
    from {
        transform: scale(1.5);
        /* 动画起始状态，元素放大 1.5 倍 */
        opacity: 0;
        /* 动画起始状态，元素透明度为 0 */
    }

    to {
        transform: scale(1);
        /* 动画结束状态，元素回到初始大小 */
        opacity: 1;
        /* 动画结束状态，元素透明度为 1 */
    }
}

.slider {
    animation: zoomOut 1.2s ease-out forwards;
    /* 为滑块区域元素添加 zoomOut 动画，持续时间 1.2 秒，缓出效果，动画结束后保持最终状态 */
}

.carousel-container {
    position: relative;
    max-width: 72rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.carousel-wrapper {
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    will-change: transform;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    position: relative;
    min-height: 18.75rem;
    max-height: 31.25rem;
    overflow: hidden;
    flex-shrink: 0;
    width: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 5s ease-in-out;
}

.carousel-slide:hover img {
    transform: scale(1.05);
}

.carousel-slide .absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-out 0.2s;
}

.carousel-slide.active .absolute {
    opacity: 1;
    transform: translateY(0);
}

.carousel-slide .absolute .p-6 {
    padding: 1.5rem;
}

.carousel-slide .absolute .md:p-10 {
    padding: 2.5rem;
}

.carousel-slide .absolute .text-white {
    color: #fff;
}

.carousel-slide .absolute .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.carousel-slide .absolute .md:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.carousel-slide .absolute .font-bold {
    font-weight: 700;
}

.carousel-slide .absolute .mb-2 {
    margin-bottom: 0.5rem;
}

.carousel-slide .absolute .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.carousel-slide .absolute .md:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.carousel-slide .absolute .opacity-90 {
    opacity: 0.9;
}

/* 控制按钮样式 */
.carousel-control {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
    transition: all 0.3s ease;
    z-index: 10;
    position: absolute;
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.carousel-control.prev {
    left: 1rem;
}

.carousel-control.next {
    right: 1rem;
}

.carousel-wrapper:hover .carousel-control {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* 指示器样式 */
.carousel-indicators {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background-color: #fff;
    transform: scale(1.3);
    box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.8);
}

/* 次视图样式 */
.subviews-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 0.5rem;
    overflow: hidden;
}

.subview {
    position: relative;
    width: calc(100% / 3);
    max-width: calc(100% / 4);
    height: 6rem;
    max-height: 8rem;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.subview:hover {
    opacity: 0.9;
    transform: scale(0.98);
}

.subview.active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.subview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subview .absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.subview:hover .absolute {
    background-color: rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .carousel-slide {
        max-height: 18.75rem;
    }

    .subviews-container {
        gap: 0.625rem;
    }

    .subview {
        height: 7.5rem;
    }
}

.airpoods-scrolling {
    /* 将 canvas 元素固定在页面上 */
    position: fixed;
    /* 将 canvas 元素水平居中 */
    left: 50%;
    /* 将 canvas 元素垂直居中 */
    top: 50%;
    /* 通过 transform 进一步精确居中 */
    transform: translate(-50%, -50%);
    /* 设置 canvas 元素的最大高度为视口高度 */
    height: 100vh;
    /* 设置 canvas 元素的最大宽度为视口宽度 */
    width: 100vw;
}

.airpoods {
    /* 将 canvas 元素固定在页面上 */
    position: fixed;
    /* 将 canvas 元素水平居中 */
    left: 50%;
    /* 将 canvas 元素垂直居中 */
    top: 50%;
    /* 通过 transform 进一步精确居中 */
    transform: translate(-50%, -50%);
    /* 设置 canvas 元素的最大高度为视口高度 */
    height: 100vh;
    /* 设置 canvas 元素的最大宽度为视口宽度 */
    width: 100vw;
}

/* ————————————————————————————————————————————滚轮 */
.shell {
    width: 100%;
    position: relative;
    padding: 80px 0;
    background-attachment: fixed;
    background-size: cover;
    /* 添加过渡效果 */
    /* 1 */
    transition: background-image 0.3s ease-in-out;
}


/* 时间轴容器样式 */
.timeline {
    /* 使用 flex 布局 */
    display: flex;
    /* 水平居中对齐 */
    margin: 0 auto;
    /* 允许子元素换行 */
    flex-wrap: wrap;
    /* 子元素垂直排列 */
    flex-direction: column;
    /* 最大宽度为 700px */
    max-width: 700px;
    /* 相对定位，为绝对定位的子元素提供参考 */
    position: relative;

}

.contentgunlun {

    height: 1000px;
    width: 700px;
    padding: 100px 0px 0px 0px;



}

/* 时间轴项目标题样式 */
.contentgunlun-title {
    /* 字体粗细为正常 */
    font-weight: normal;
    /* 字体大小为 66px */
    font-size: 48px;
    /* 上外边距为 -10px，其余为 0 */
    margin: -100px 0 0 0;
    /* 添加过渡效果，过渡时间为 0.4 秒 */
    transition: 0.4s;
    /* 内边距为左右 10px */
    padding: 0 10px;
    /* 内边距和边框包含在元素的宽度和高度内 */
    box-sizing: border-box;
    /* 文字颜色为白色 */
    color: #fff;
}

/* 时间轴项目描述样式 */
.contentgunlun-desc {
    /* 外边距为 0 */
    margin: 0;
    /* 字体大小为 15px */
    font-size: 18px;
    /* 内边距和边框包含在元素的宽度和高度内 */
    box-sizing: border-box;
    /* 文字颜色为半透明白色 */
    color: rgba(255, 255, 255, 1);
    /* 行高为 25px */
    line-height: 25px;
    text-indent: 2em;


}

/* 在 .timeline 元素之前插入一个伪元素，用于显示时间轴的中心线 */
.timeline:before {
    /* 绝对定位，相对于 .timeline 元素 */
    position: absolute;
    /* 左偏移量为 50% */
    left: 50%;
    /* 宽度为 2px */
    width: 2px;
    /* 高度占满父元素 */
    height: 100%;
    /* 左外边距为 -1px，使其居中 */
    margin-left: -1px;
    /* 伪元素的内容为空 */
    content: "";
    /* 背景颜色为半透明白色 */
    background: rgba(255, 255, 255, 0.1);
}

/* 时间轴项目样式 */
.item {
    /* 上下内边距为 40px */
    padding: 40px 0;
    /* 初始透明度为 0.3 */
    opacity: 0.01;
    /* 添加模糊效果 */
    filter: blur(2px);
    /* 添加过渡效果，过渡时间为 0.5 秒 */
    transition: 0.8s;
    /* 内边距和边框包含在元素的宽度和高度内 */
    box-sizing: border-box;
    /* 宽度为父元素宽度的一半减去 40px */
    width: calc(50% - 40px);
    /* 使用 flex 布局 */
    display: flex;
    /* 相对定位，为绝对定位的子元素提供参考 */
    position: relative;
    /* 向上偏移 80px */
    transform: translateY(80px);
}

/* 在 .item 元素之前插入一个伪元素，用于显示时间轴项目的时间信息 */
.item:before {
    /* 设置在伪元素before中的内容  */
    content: attr(data-text);
    letter-spacing: 3px;
    width: 100%;
    position: absolute;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    top: 70%;
    margin-top: -5px;
    padding-left: 15px;
    opacity: 0;
    right: calc(-100% - 56px);
    font: 900 20px '';
    letter-spacing: 5px;
    /* 添加过渡效果 */
    /* 2 */
    transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* 偶数位置的时间轴项目样式 */
.item:nth-child(even) {
    /* 右对齐 */
    align-self: flex-end;
}

/* 偶数位置的时间轴项目的伪元素样式 */
.item:nth-child(even):before {
    /* 取消右偏移 */
    right: auto;
    /* 文本右对齐 */
    text-align: right;
    /* 左偏移量为负的父元素宽度减去 56px */
    left: calc(-100% - 56px);
    /* 取消左内边距 */
    padding-left: 0;
    /* 取消左边框 */
    border-left: none;
    /* 右边框为 2px 半透明白色 */
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    /* 右内边距为 15px */
    padding-right: 15px;
}

/* 激活状态的时间轴项目样式 */
.item--active {
    /* 透明度为 1 */
    opacity: 0.8;
    /* 取消向上偏移 */
    transform: translateY(0);
    /* 取消模糊效果 */
    filter: blur(0px);
}

/* 激活状态的时间轴项目的伪元素样式 */
.item--active:before {
    /* 上偏移量为 50% */
    top: 50%;
    /* 添加过渡效果，过渡时间为 0.3 秒，延迟 0.2 秒 */
    transition: 0.3s all 0.2s;
    /* 透明度为 1 */
    opacity: 0.8;
}

/* 激活状态的时间轴项目标题样式 */
.item--active .contentgunlun-title {
    /* 上外边距为 -50px，下外边距为 20px，其余为 0 */
    margin: -50px 0 20px 0;
}

/* 图片样式 */
.img {
    /* 最大宽度为父元素宽度 */
    max-width: 100%;
    /* 添加阴影效果 */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}




/* 当屏幕宽度小于等于 767px 时的样式 */
@media only screen and (max-width: 767px) {
    .item {
        align-self: baseline !important;
        width: 100%;
        padding: 0 30px 150px 80px;
    }


    .item:last-child {
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .timeline:before {
        left: 40px;
    }
}

/* ——————————————————————————————————————————————————首页滚动动画 */








@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');



.logo {
    font-size: 2em;
    color: #359381;
    pointer-events: none;
    margin-right: 270px;
}

.navigation a {
    text-decoration: none;
    color: #359381;
    padding: 6px 15px;
    border-radius: 20px;
    margin: 0 10px;
    font-weight: 600;
}

.navigation a:hover,
.navigation a.active {
    background: #359381;
    color: #fff;
}

.parallax {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#text {
    position: absolute;
    font-size: 5em;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}


.sec {
    position: relative;
    background: #070707;
    padding: 100px;
}

.sec h2 {
    font-size: 3em;
    color: #fff;
    margin-bottom: 10px;
}

.sec p {
    font-size: 1em;
    color: #fff;
    font-weight: 300;
}

.back-he {

    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    pointer-events: none;
}

.back-yun {

    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    pointer-events: none;
}

.back-yun2 {

    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    pointer-events: none;
}

.back-1 {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.back-4 {

    position: absolute;
    top: 0;
    left: 0;

    pointer-events: none;
}

.back-3 {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.back-2 {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

/* ——————————————————————————————————文字下滑—————————————————————— */

.scroll-text1 {
    /* 为元素的transform属性添加过渡效果，持续时间0.5秒，缓动函数为ease-out */
    transition: transform 0.5s ease-out;
    /* 设置字体为Arial或无衬线字体 */
    font-family: 'Ma Shan Zheng', cursive;

    font-size: clamp(3rem, 20vw, 18rem);
    position: absolute;
    /* 绝对定位 */
    top: 0%;
    /* 顶部对齐 */
    left: 34%;

}

.scroll-text2 {
    /* 为元素的transform属性添加过渡效果，持续时间0.5秒，缓动函数为ease-out */
    transition: transform 0.5s ease-out;
    /* 设置字体为Arial或无衬线字体 */
    font-family: 'Ma Shan Zheng', cursive;

    font-size: clamp(3rem, 12vw, 18rem);
    position: absolute;
    /* 绝对定位 */
    top: 10%;
    /* 顶部对齐 */
    left: 55%;

}

.scroll-text3 {
    /* 为元素的transform属性添加过渡效果，持续时间0.5秒，缓动函数为ease-out */
    transition: transform 0.5s ease-out;
    /* 设置字体为Arial或无衬线字体 */
    font-family: 'Ma Shan Zheng', cursive;

    font-size: clamp(3rem, 12vw, 18rem);
    position: absolute;
    /* 绝对定位 */
    top: 10%;
    /* 顶部对齐 */
    left: 70%;

}

.scroll-text4 {
    /* 为元素的transform属性添加过渡效果，持续时间0.5秒，缓动函数为ease-out */
    transition: transform 0.5s ease-out;
    /* 设置字体为Arial或无衬线字体 */
    font-family: 'Ma Shan Zheng', cursive;

    font-size: clamp(3rem, 20vw, 15rem);
    position: absolute;
    /* 绝对定位 */
    top: 2%;
    /* 顶部对齐 */
    left: 82%;

}

/* ——————————————首页文字滚动———————————————— */



.text-containerdong {
    width: 100%;
    max-width: 800px;
    text-align: center;
    position: absolute;

    top: 40%;

    right: 0;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;

}

.slide-in-text {
    opacity: 0;
    transform: translateX(100%);
    transition: all 1s ease-out;
    margin: 20px 0;
    font-size: 24px;
}

.slide-in-text.visible {
    opacity: 1;
    transform: translateX(0);
}

.spacer {
    height: 100vh;
}

/* ______________________________圆轮图片 */

/* 定义图片的样式 */
.photoyuan {
    /* 设置为绝对定位，相对于.photoyuan-gallery容器定位 */
    position: absolute;
    /* 将图片的顶部对齐到容器的顶部 */
    top: 30%;
    /* 将图片的左侧对齐到容器的水平中心 */
    right: 10%;
    /* 设置图片的旋转原点为左上角 */
    transform-origin: top left;
    /* 设置图片的宽度为300px */
    width: 240px;
    /* 设置图片的高度为200px */
    height: 320px;
    /* 设置图片的填充模式，使图片覆盖整个容器 */

    /* 设置图片变换的过渡效果，持续时间为0.5秒，过渡方式为ease-out */
    transition: transform 1s ease-out, top 1s ease-out, right 1s ease-out;
}


/* ——————————————————滑块1———————————————————————————— */




.nnnnnn {
    background: rgba(215, 218, 202, 0.1);
    /* 设置背景颜色和透明度 */
    padding: 24px;
    /* 设置内边距 */
    border-radius: 4px;
    /* 设置圆角 */
    border: 1px solid rgba(212, 175, 55, 0.2);
    /* 设置边框 */
    top: 65%;
    height: 30%;
    width: 40%;
    /* 设置过渡效果 */


    transition: left 1.2s ease-out, opacity 0.8s ease-out;
    position: absolute;
    left: -800px;
    transform: translateY(-50%);

}

.nnnnnn p {
    font-size: 18px;
    color: rgba(245, 245, 245, 0.8);
    font-family: 'Inter', cursive;
    padding: 30px 50px;
    line-height: 2em;
    ;
    text-indent: 2em;



}

.nnnnnn2 {
    background: rgba(215, 218, 202, 0.1);
    /* 设置背景颜色和透明度 */
    padding: 24px;
    /* 设置内边距 */
    border-radius: 4px;
    /* 设置圆角 */
    border: 1px solid rgba(212, 175, 55, 0.2);
    /* 设置边框 */
    top: 35%;
    height: 25%;
    width: 40%;
    /* 设置过渡效果 */


    transition: left 1.5s ease-out, opacity 0.8s ease-out;
    position: absolute;
    left: -800px;
    transform: translateY(-50%);


}


.nnnnnn2 .pone {
    font-size: 18px;
    color: rgba(245, 245, 245, 0.8);
    font-family: 'Inter', cursive;
    padding: 0px 30px 30px 30px;
    line-height: 2em;
    ;
    text-indent: 2em;

}

.nnnnnn2 .ptow {
    font-size: 18px;
    color: rgba(245, 245, 245, 0.8);
    font-family: 'Inter', cursive;
    padding: 30px 0px;


}

.nnnnnn.uuuuuu {
    left: calc(10% - 100px);
    /* 移动到中心位置 */

}

.nnnnnn2.nnnnnn {
    left: calc(10% - 100px);
    /* 移动到中心位置 */

}



#history .left-content .fact-card2 .number {
    font-size: 48px;
    /* 设置字体大小 */
    font-family: 'Ma Shan Zheng', cursive;
    /* 设置字体为 Ma Shan Zheng 或手写体 */
    color: #d4af37;
    /* 设置文本颜色 */
    margin-bottom: 8px;
    /* 底部外边距为 8px */
}

#history .left-content .fact-card2 .text {
    font-size: 14px;
    /* 设置字体大小 */
    color: rgba(245, 245, 245, 0.8);
    /* 设置文本颜色和透明度 */
}

/* ——————————————————视觉差—————————————————————— */

.parallax {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;

}

.pl1 {
    background-image: url(../source/image/shouye/yuewangjian.png);
}

.pl2 {
    background-image: url(../source/image/shouye/kunwujian.png);
}

.pl3 {
    background-image: url(../source/image/shouye/qinwangjian.png);
}

.contentshijuecha {
    width: 100%;

    height: 40vh;
    background-image: url(../source/image/shouye/mengban.png);
    background-size: cover;
    background-repeat: no-repeat;
    color: rgba(0, 0, 0, 0.585);


}





.dibu {

    width: 80%;
    height: 80%;
}

.animation-container {
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 120px 0px 200px 0px;
}

.animated-text {
    font-size: 24px;
    color: #332300c5;
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    margin: 0.5rem 0;
    font-family: 'Noto Serif SC', serif;
}


.animated-text.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ————————————————小图标跳动 */


.animation-element {
    width: 50px;
    height: 50px;
    margin: 50px auto;
    background-image: url(../source/image/shouye/tubiao.png);


    transition: all 0.3s ease;
    position: absolute;
    top: 35%;
    right: 30%;
}


.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 20px;
        border-radius: 50%;

    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px;
        border-radius: 50%;
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 20px;
        border-radius: 50%;
    }
}

.sollm {
    font-size: 18px;
    color: rgba(245, 245, 245, 0.8);
    font-family: 'Inter', cursive;
    padding: 50px 10% 20px 30%;
    line-height: 2em;
    ;
    text-indent: 2em;
    align-items: center;

}

.big {
    font-weight: normal;
    /* 字体大小为 66px */
    font-size: 48px;
    /* 上外边距为 -10px，其余为 0 */
    ;
    /* 内边距为左右 10px */
    padding: 20px 30% 0px 30%;
    /* 内边距和边框包含在元素的宽度和高度内 */
    box-sizing: border-box;
    /* 文字颜色为白色 */
    color: #fff;
    align-items: center;
    font-family: 'Noto Serif SC', serif;
}