/* 颜色和字体变量定义 - 基于樱花主题 */  
:root {  
    /* 主色调 */  
    --cherry-blossom: #f8c8dc;      /* 樱花粉 */  
    --cherry-dark: #c4648a;         /* 更深的樱花粉 - 调整后 */  
    --cherry-darker: #a5436b;       /* 最深樱花粉 - 新增 */  
    --cherry-darkest: #a5436b;       /* 最深樱花粉 - 新增 */ 

    
    --pure-white: #ffffff;          /* 纯白色 */  
    --off-white: #f9f7f8;           /* 米白色 */  
    
	/* 蓝色系列 */  
	--sky-blue: #d4f1f9;            /* 天空蓝 */  
	--sky-blue-dark: #a8dff1;       /* 深天空蓝 */  
	--sky-blue-light: #a8d8f0;      /* 浅蓝色 */  
	--sky-blue-deep: #62C5E0;       /* 更深的蓝色 */
	--sky-blue-deep2: #27A2C3;       /* 更深的蓝色 */

  
    
    /* 紫色系主色调 */
    --game-bg: #F8F2FF;          /* 浅紫背景（明度97%） */
    --game-card: #FFFFFF;        /* 卡片白 */
    --game-border: #E9D4FF;      /* 浅紫边框 */
    
    /* 文字色 */
    --game-text: #5A3D7A;        /* 深紫文字 */
    --game-text-light: #FFFFFF;  /* 白色文字 */

    
    
    /* 辅助色 */  
    --soft-purple: #e0cfe6;         /* 柔和紫色 */  
    --soft-peach: #ffecd9;          /* 柔和桃色 */  
    --mint-green: #d5e8d4;          /* 薄荷绿 */  
    
    /* 文本颜色 */  
    --text-dark: #4a4a4a;           /* 深灰色文本 */  
    --text-medium: #6a6a6a;         /* 中灰色文本 */  
    --text-light: #8a8a8a;          /* 浅灰色文本 */  
    --text-white: #ffffff;          /* 白色文本 */
    
    /* 渐变色 */  
    --gradient-cherry: linear-gradient(135deg, var(--cherry-blossom), var(--cherry-dark));  
    --gradient-sky: linear-gradient(135deg, var(--sky-blue), var(--sky-blue-dark));  
    
    /* 效果 */  
    --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  
    --transition: all 0.3s ease;  
    
    /* 字体集合 - 中文字体 */  
    --base-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Heiti SC", -apple-system, sans-serif;  
    --heading-font: "Noto Serif SC", "Source Han Serif CN", "STZhongsong", "Microsoft YaHei", serif;  
    --title-font: "Noto Serif SC", "STKaiti", "KaiTi", "楷体", serif;  
    --decorative-font: "YouYuan", "STXingkai", "华文行楷", cursive;  
    
    /* 西文衬线字体配对 */  
    --serif-western: "Playfair Display", "Georgia", serif;  
    --sans-western: "Montserrat", "Helvetica Neue", "Arial", sans-serif;  
}  

body {  
    font-family: var(--base-font);  
    line-height: 1.6;  
    color: var(--text-medium);  
    background-color: var(--off-white);  
    margin: 0;  
    padding: 0;  
}  

h1, h2, h3, h4, h5, h6 {  
    font-family: var(--heading-font);  
    color: var(--text-dark);  
}  

/* 容器样式 */  
.container {  
    width: 90%;  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 0 15px;  
}  

/* 头部样式 */  
header {  
    background-color: rgba(255, 255, 255, 0.9);  
    width: 100%;  
    top: 0;  
    left: 0;  
    z-index: 1000;  
    padding: 0px 0;  
    box-shadow: var(--box-shadow);  
    transition: var(--transition);  
}  

header .container {  
    display: flex; /* 使用Flexbox布局 */  
    align-items: center; /* 垂直居中 */  
    justify-content: space-between; /* 水平间隔 */  
    padding: 10px; /* 内边距 */  
}  

.logo {  
    margin-right: 5px; /* Logo和导航之间的间距 */  
}  


.logo h1 {  
    font-size: 1.5rem;  
    margin: 0;  
    color: var(--cherry-dark);  
    font-family: var(--heading-font);  
    font-weight: 400;  
}  

.logo img {  
    width: 48px;  
    height: 48px;  
    object-fit: contain;  
}  

nav ul {  
    display: flex; /* 使用Flexbox布局 */  
    margin: 0; /* 去除外边距 */  
    padding: 0; /* 去除内边距 */  
    list-style-type: none; /* 去掉默认列表样式 */  

}  

nav ul li {  
    margin: 0 5px; /* 导航项之间的间隔 */  
}  

nav ul li a {  
    text-decoration: none;  
    color: var(--text-dark);  
    font-weight: 500;  
    transition: var(--transition);  
    position: relative;  
    padding: 5px 0;  
    font-family: var(--heading-font);  
    font-size: 1.1rem;  
}  

nav ul li a:after {  
    content: '';  
    position: absolute;  
    width: 0;  
    height: 2px;  
    background: var(--cherry-dark);  
    bottom: 0;  
    left: 0;  
    transition: var(--transition);  
}  

nav ul li a:hover:after,  
nav ul li.active a:after {  
    width: 100%;  
}  

nav ul li.active a {  
    color: var(--cherry-dark);  
    font-weight: 700;  
}  

/* 英雄区样式 - 使用您提供的樱花图片 */  
.hero {  
    background: url('../image/banner5.jpg') no-repeat center center/cover;  
    background-color: var(--sky-blue); /* 作为背景图片加载前的占位色 */  
    color: var(--text-dark);  
    padding: 20px 0 40px;  /* 上边距20px，下边距改为40px */  
    text-align: center;  
    margin-top: 0;  
}   

.hero-content {  
    background-color: rgba(255, 255, 255, 0);  
    backdrop-filter: blur(5px);  
    
    border-radius: 12px;  
    display: inline-block;  
    max-width: 80%;  
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0);  
}  

.hero h1 {  
    font-size: 3.8rem;  
    line-height: 1.2;  
    margin-bottom: 20px;  
    animation: fadeInDown 1s ease-out;  
    font-family: var(--decorative-font);  
    color: var(--cherry-dark);  
    font-weight: 400;  
    letter-spacing: 2px;  
}  

.hero p {  
    font-size: 1.5rem;  
    margin-bottom: 30px;  
    max-width: 600px;  
    margin-left: auto;  
    margin-right: auto;  
    animation: fadeInUp 1s ease-out;  
    font-family: var(--title-font);  
    color: var(--text-medium);  
}  

.cta-buttons {  
    display: flex;  
    justify-content: center;  
    gap: 20px;  
    margin-top: 30px;  
    animation: fadeIn 1.5s ease-out;  
}  

.btn {  
    display: inline-block;  
    padding: 12px 30px;  
    border-radius: 50px;  
    text-decoration: none;  
    font-weight: 500;  
    text-transform: uppercase;  
    letter-spacing: 1px;  
    transition: var(--transition);  
    box-shadow: var(--box-shadow);  
    font-family: var(--sans-western), var(--base-font);  
}  

.btn.primary {  
    background: var(--gradient-cherry);  
    color: white;  
}  

.btn.secondary {  
    background: rgba(255, 255, 255, 0.9);  
    color: var(--cherry-dark);  
    border: 1px solid var(--cherry-dark);  
}  

.btn:hover {  
    transform: translateY(-3px);  
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);  
}  


/* 手工作品展示区样式 */  
.gallery-section {  
    padding-top: 0;  
    padding-bottom: 80px;  
    background-color: rgba(248, 240, 243, 0.3); /* 非常淡的樱花粉背景 */  
    position: relative;  
} 

@media (max-width: 768px) {
    .gallery-section {
        padding-top: 10px; /* 手机端额外加高一点 */
    }
}

.gallery-section h2 {  
    text-align: center;  
    font-family: var(--decorative-font);  
    color: var(--cherry-dark);  
    font-size: 2.5rem;  
    margin-bottom: 10px;  
    position: relative;  
    display: inline-block;  
    left: 50%;  
    transform: translateX(-50%);  
}  

.gallery-section h2::after {  
    content: "";  
    display: block;  
    width: 80px;  
    height: 3px;  
    background: var(--cherry-dark);  
    margin: 10px auto 0;  
    border-radius: 2px;  
}  

.gallery-subtitle {  
    text-align: center;  
    color: var(--text-medium);  
    margin-bottom: 40px;  
    font-family: var(--title-font);  
    font-size: 1.1rem;  
}  

/* 分类过滤器 */  
.gallery-filter {  
    display: flex;  
    justify-content: center;  
    gap: 15px;  
    margin-bottom: 35px;  
    flex-wrap: wrap;  
}  

.filter-btn {  
    padding: 8px 20px;  
    border: none;  
    background: white;  
    color: var(--text-medium);  
    border-radius: 30px;  
    cursor: pointer;  
    transition: all 0.3s ease;  
    font-family: var(--title-font);  
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);  
    font-size: 0.95rem;  
}  

.filter-btn.active, .filter-btn:hover {  
    background: var(--cherry-dark);  
    color: white;  
    box-shadow: 0 5px 15px rgba(196, 100, 138, 0.2);  
}  

/* 网格布局 */  
.gallery-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  
    gap: 30px;  
    padding: 10px 5px;  
}  

/* 作品卡片样式 */  
.gallery-item {  
    border-radius: 12px;  
    overflow: hidden;  
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);  
    transition: all 0.4s ease;  
    background: white;  
    position: relative;  
    height: 100%;  
    display: flex;  
    flex-direction: column;  
    transform: translateY(0);  
}  

.gallery-item:hover {  
    transform: translateY(-10px);  
    box-shadow: 0 15px 35px rgba(196, 100, 138, 0.15);  
}  

/* 图片容器 */  
.gallery-img-container {  
    position: relative;  
    height: 240px;  
    overflow: hidden;  
}  

.gallery-img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    transition: transform 0.6s ease;  
    background-color: #f9f9f9; /* 图片加载前的背景色 */  
}  

.gallery-item:hover .gallery-img {  
    transform: scale(1.05);  
}  

/* 分类标签 */  
.gallery-tag {  
    position: absolute;  
    top: 15px;  
    right: 15px;  
    padding: 5px 12px;  
    background-color: rgba(255, 255, 255, 0.85);  
    color: var(--cherry-dark);  
    font-size: 0.8rem;  
    border-radius: 20px;  
    font-family: var(--title-font);  
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);  
}  

/* 内容区域 */  
.gallery-content {  
    padding: 20px;  
    text-align: center;  
    flex-grow: 1;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    position: relative;  
}  



.gallery-title {  
    font-size: 1.25rem;  
    color: var(--cherry-dark);  
    font-family: var(--title-font);  
    margin-bottom: 8px;  
    font-weight: 500;  
}  

.gallery-desc {  
    font-size: 0.95rem;  
    color: var(--text-medium);  
    line-height: 1.5;  
    margin-bottom: 0;  
}  

/* 添加图片加载中的渐入效果 */  
.gallery-img {  
    opacity: 0;  
    transition: opacity 0.3s ease, transform 0.6s ease;  
}  

.gallery-img.loaded {  
    opacity: 1;  
}  

/* 响应式调整 */  
@media (max-width: 768px) {  
    .gallery-grid {  
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));  
        gap: 20px;  
    }  
    
    .gallery-img-container {  
        height: 220px;  
    }  
    
    .gallery-section h2 {  
        font-size: 2rem;  
    }  
}  

@media (max-width: 576px) {  
    .gallery-grid {  
        grid-template-columns: 1fr;  
        max-width: 320px;  
        margin: 0 auto;  
    }  
}

/* 软件展示区域 - 蓝色主题优化 */  
.software-showcase {  
    padding-top: 20px;  
    padding-bottom: 80px;  
    background-color: var(--sky-blue); /* 使用已定义的天空蓝 */  
    position: relative;
} 

@media (max-width: 768px) {
    .software-showcase {
        padding-top: 10px; /* 手机端额外加高一点 */
    }
}

.software-showcase h2 {  
    text-align: center;  
    font-size: 2.5rem;  
    margin-bottom: 60px;  
    position: relative;  
    color: var(--text-dark);  
    font-family: var(--title-font);  
}  

.software-showcase h2:after {  
    content: '';  
    position: absolute;  
    width: 80px;  
    height: 3px; /* 稍微加粗下划线 */  
    background: var(--cherry-darker); /* 新变量：更深的蓝色 */  
    bottom: -15px;  
    left: 50%;  
    transform: translateX(-50%);  
    border-radius: 1.5px; /* 稍微圆角处理 */  
}  

.software-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  
    gap: 30px;  
}  

.software-item {  
    background: var(--pure-white);  
    border-radius: 15px; /* 稍微增加圆角 */  
    overflow: hidden;  
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);  
    transition: all 0.3s ease;  
    position: relative;  
    border: 1px solid var(--sky-blue-dark); /* 使用已定义的深天空蓝 */  
}  

.software-item-light {  
    background: var(--pure-white);  
    border-radius: 15px; /* 稍微增加圆角 */  
    overflow: hidden;  
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);  
    transition: all 0.3s ease;  
    position: relative;  
    border: 1px solid var(--sky-blue-dark); /* 使用已定义的深天空蓝 */ 
    padding-top: 10px; 
    
} 

.software-item:hover {  
    transform: translateY(-8px);  
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);  
}  

.software-img {  
    height: 180px;  
    overflow: hidden;  
    position: relative;  
}  

.software-img img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    transition: transform 0.5s ease; /* 添加图片变换效果 */  
}  

.software-item:hover .software-img img {  
    transform: scale(1.05); /* 悬停时轻微放大图片 */  
}  

.software-icon {  
    position: absolute;  
    top: 15px;  
    right: 15px;  
    width: 50px;  
    height: 50px;  
    background: white;  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);  
    transition: all 0.3s ease;  
}  

.software-icon i {  
    font-size: 24px;  
    color: var(--cherry-darker);   
    transition: all 0.3s ease;  
}  

.software-item:hover .software-icon {  
    transform: rotate(5deg) scale(1.05); /* 悬停时图标微动效果 */  
}  

.software-content {  
    padding: 25px;  
}  

.software-title {  
    font-size: 1.5rem;  
    margin: 0 0 10px;  
    color: var(--text-dark);  
    font-family: var(--title-font);  
}  

.software-desc {  
    color: var(--text-medium);  
    margin-bottom: 20px;  
    line-height: 1.7;  
}  

.software-btn {  
    display: inline-block;  
    background: var(--cherry-dark); 
    color: white;  
    padding: 10px 22px; /* 稍微增加按钮内边距 */  
    border-radius: 30px;  
    text-decoration: none;  
    font-size: 0.95rem; /* 稍微增大字体 */  
    transition: all 0.3s ease;  
    font-weight: 500;  
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);  
}  

.software-btn:hover {  
    transform: translateY(-3px);  
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);  
    background: var(--cherry-darkest); 
}

.info-btn {  
    display: inline-block;  
    background: var(--sky-blue-deep2); /* 蓝色系背景 */  
    color: white;  
    padding: 10px 22px; /* 增加按钮内边距 */  
    border-radius: 30px;  
    text-decoration: none;  
    font-size: 0.95rem; /* 字体大小 */  
    transition: all 0.3s ease;  
    font-weight: 500;  
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);  
}  

.info-btn:hover {  
    transform: translateY(-3px);  
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);  
    background: var(--sky-blue-deep2); /* 深蓝色背景效果 */  
}

  
  /* 游戏展示区 */
  /* 软件展示区域 - 蓝色主题优化 */  
.game-showcase {  
    padding-top: 20px;  
    padding-bottom: 80px;  
    background-color: var(--game-bg); /* 使用已定义的天空蓝 */  
}  

@media (max-width: 768px) {
    .game-showcase {
        padding-top: 10px; /* 手机端额外加高一点 */
    }
}

.game-showcase h2 {  
    text-align: center;  
    font-size: 2.5rem;  
    margin-bottom: 60px;  
    position: relative;  
    color: var(--text-dark);  
    font-family: var(--title-font);  
}  

.game-showcase h2:after {  
    content: '';  
    position: absolute;  
    width: 80px;  
    height: 3px; /* 稍微加粗下划线 */  
    background: var(--cherry-darker); 
    bottom: -15px;  
    left: 50%;  
    transform: translateX(-50%);  
    border-radius: 1.5px; /* 稍微圆角处理 */  
}  

.game-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  
    gap: 30px;  
}  

.game-item {  
    background: var(--pure-white);  
    border-radius: 15px; /* 稍微增加圆角 */  
    overflow: hidden;  
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);  
    transition: all 0.3s ease;  
    position: relative;  
    border: 1px solid var(--game-border); /* 使用已定义的深天空蓝 */  
}  

.game-item:hover {  
    transform: translateY(-8px);  
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);  
}  

.game-img {  
    height: 180px;  
    overflow: hidden;  
    position: relative;  
}  

.game-img img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    transition: transform 0.5s ease; /* 添加图片变换效果 */  
}  

.game-item:hover .game-img img {  
    transform: scale(1.05); /* 悬停时轻微放大图片 */  
}  

.game-icon {  
    position: absolute;  
    top: 15px;  
    right: 15px;  
    width: 50px;  
    height: 50px;  
    background: white;  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);  
    transition: all 0.3s ease;  
}  

.game-icon i {  
    font-size: 24px;  
    color: var(--cherry-darker); /* 新变量：更深的蓝色 */  
    transition: all 0.3s ease;  
}  

.game-item:hover .game-icon {  
    transform: rotate(5deg) scale(1.05); /* 悬停时图标微动效果 */  
}  

.game-content {  
    padding: 25px;  
}  

.game-title {  
    font-size: 1.5rem;  
    margin: 0 0 10px;  
    color: var(--text-dark);  
    font-family: var(--title-font);  
}  

.game-desc {  
    color: var(--text-medium);  
    margin-bottom: 20px;  
    line-height: 1.7;  
}  

.game-btn {  
    display: inline-block;  
    background: var(--cherry-dark); /* 新变量：更深的蓝色，解决按钮背景太浅问题 */  
    color: white;  
    padding: 10px 22px; /* 稍微增加按钮内边距 */  
    border-radius: 30px;  
    text-decoration: none;  
    font-size: 0.95rem; /* 稍微增大字体 */  
    transition: all 0.3s ease;  
    font-weight: 500;  
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);  
}  

.game-btn:hover {  
    transform: translateY(-3px);  
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);  
    background: var(--cherry-darkest); /* 新变量：最深的蓝色，悬停时使用 */  
}

/* 漫画系列导航栏专用容器 */
/* 漫画系列导航栏 - 透明风格 */
.comic-nav {
    background-color: transparent;
    padding: 0px 0;
    margin-top: 100px;
}

.comic-nav-container {
    max-width: 350px;
    width: 100%;
    margin: 0 auto;
    padding: 0 5px;
    font-family: var(--base-font);
}

.comic-nav h3 {
    font-size: 1.5rem;
    color: var(--cherry-dark);
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
}

#comicNavList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#comicNavList li a {
    display: block;
    padding: 10px 16px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.7); /* 悬浮时加点背景便于阅读 */
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
    border-left: 4px solid transparent;
}

#comicNavList li a:hover,
#comicNavList li a.active {
    background-color: var(--cherry-blossom);
    color: var(--cherry-darker);
    border-left-color: var(--cherry-darker);
}

/* 动漫展示区 */
.comic-series-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.comic-series-container img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

.comic-showcase {
    padding: 10px 0 ; 
    background-color: #f9f9f9;
}

.blog-section {
    padding: 0px 0 ; 
    background-color: var(--sky-blue);
    width: 100%;
}

/* PC 端单独设置（桌面） */
@media (min-width: 769px) {
    .comic-series-container img {
        max-width: 700px;
        min-height: 300px; /* 保证图片有一定高度 */
        object-fit: cover; /* 更加饱满的裁剪方式 */
    }
}

/* 手机和平板 */
@media (max-width: 768px) {
    .comic-showcase {
        padding-top: 10px; 
    }

    .comic-nav {
        margin-top: 40px;
    }

    .comic-nav-container {
        max-width: 90%; /* 更宽地适应手机屏幕 */
        padding: 0 10px;
    }

    #comicNavList li a {
        font-size: 0.9rem;
        padding: 8px 12px;
        white-space: normal;
        word-break: break-all; /* 解决长文字换行问题 */
    }

    .comic-series-container img {
        max-width: 100%;
        object-fit: cover; /* 更加饱满的裁剪方式 */
    }
}

.comic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.comic-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.comic-item:hover {
    transform: translateY(-5px);
}

.comic-img-container {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.comic-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.comic-item:hover .comic-img {
    transform: scale(1.05);
}

.comic-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.comic-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.comic-desc {
    color: #666;
    flex-grow: 1;
}

.comic-btn {
    align-self: flex-start;
    margin-top: 10px;
}


/* 页脚 */  
footer {  
    background: var(--text-dark);  
    color: var(--pure-white);  
    padding: 70px 0 30px;  
}  

.footer-content {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
    gap: 40px;  
    margin-bottom: 30px;  
}  

.footer-about h3,  
.footer-links h3,  
.footer-contact h3 {  
    color: var(--pure-white);  
    font-size: 1.4rem;  
    margin-bottom: 20px;  
    font-family: var(--title-font);  
}  

.footer-about p {  
    line-height: 1.8;  
    opacity: 0.9;  
}  

.footer-links ul {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
}  

.footer-links ul li {  
    margin-bottom: 12px;  
}  

.footer-links ul li a {  
    color: var(--pure-white);  
    text-decoration: none;  
    transition: var(--transition);  
    opacity: 0.85;  
}  

.footer-links ul li a:hover {  
    color: var(--cherry-blossom);  
    padding-left: 5px;  
    opacity: 1;  
}  

.footer-contact p {  
    margin-bottom: 15px;  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    opacity: 0.9;  
}  

.footer-contact i {  
    color: var(--pure-white);  
    font-size: 18px;  
}  

.social-icons {  
    display: flex;  
    gap: 15px;  
    margin-top: 20px;  
}  

.social-icons a {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 40px;  
    height: 40px;  
    background: rgba(255, 255, 255, 0.1);  
    border-radius: 50%;  
    color: white;  
    transition: var(--transition);  
}  

.social-icons a:hover {  
    background: var(--cherry-blossom);  
    transform: translateY(-3px);  
}  


.email-link {  
    color: var(--pure-white);           /* 文字白色 */  
    text-decoration: none; /* 去掉下划线，根据需要可保留 */  
    font-weight: 500;      /* 字体稍加粗一些，看起来更友好 */  
    font-size: 16px;       /* 字体大小可根据需要调节 */  
    transition: color 0.2s;/* 鼠标悬停渐变 */  
}  

.email-link:hover {  
    color: var(--cherry-blossom);        /* 鼠标悬停时浅粉色，保持主题风格 */  
}  

.copyright {  
    text-align: center;  
    padding-top: 20px;  
    border-top: 1px solid rgba(255, 255, 255, 0.1);  
    font-size: 0.9rem;  
    opacity: 0.7;  
}  

/* 动画效果 */  
@keyframes fadeInDown {  
    from {  
        opacity: 0;  
        transform: translateY(-30px);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  

@keyframes fadeInUp {  
    from {  
        opacity: 0;  
        transform: translateY(30px);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  

@keyframes fadeIn {  
    from {  
        opacity: 0;  
    }  
    to {  
        opacity: 1;  
    }  
}  

/* 樱花动画效果 - 为页面添加飘落的樱花花瓣 */  
.cherry-petals {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    pointer-events: none;  
    z-index: -1;  
    overflow: hidden;  
}  

.petal {  
    position: absolute;  
    background-color: var(--cherry-blossom);  
    border-radius: 150% 0 150% 0;  
    animation: falling linear infinite;  
    opacity: 0.8;  
}  

@keyframes falling {  
    0% {  
        top: -10%;  
        transform: rotate(0deg) translateX(0);  
    }  
    100% {  
        top: 110%;  
        transform: rotate(360deg) translateX(100px);  
    }  
}  

/* 特殊效果：樱花主题的按钮悬停效果 */  
.cherry-btn {  
    position: relative;  
    overflow: hidden;  
}  

.cherry-btn:before {  
    content: "";  
    position: absolute;  
    top: 0;  
    left: -100%;  
    width: 100%;  
    height: 100%;  
    background: linear-gradient(  
        120deg,  
        transparent,  
        rgba(255, 255, 255, 0.3),  
        transparent  
    );  
    transition: all 0.8s;  
}  

.cherry-btn:hover:before {  
    left: 100%;  
}  

/* 响应式设计 */  
@media (max-width: 1024px) {  
    .hero h1 {  
        font-size: 3.2rem;  
    }  
    
    .gallery-grid, .software-grid {  
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  
    }  
}  

@media (max-width: 768px) {  
    .hero {  
        padding: 10px 0 40px;  
    }  
    
    .hero h1 {  
        font-size: 2.8rem;  
    }  
    
    .hero p {  
        font-size: 1.3rem;  
    }  
    
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* 缩小间隙 */
    margin-top: 20px;
    flex-wrap: wrap;
    animation: fadeIn 1.5s ease-out;
}

.cta-buttons a.btn {
    padding: 6px 12px; /* 减小内边距 */
    font-size: 0.8rem; /* 更小字体 */
    white-space: nowrap;
    width: calc(50% - 10px); /* 每个按钮占一半宽度减去 gap 的影响 */
    box-sizing: border-box;
    text-align: center;
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 48%; /* 安全上限 */
}

@media (max-width: 480px) {  
    
    .logo h1 {  
        font-size: 1em; /* 调整字体大小 */  
         
    }  
    
    header nav ul {  
        display: flex;  
        flex-wrap: wrap; /* 允许换行 */  
        justify-content: center; /* 居中对齐 */  
        padding: 0;  
    }  
    
    header nav ul li {  
        flex: 1 1 ; /* 每行显示3个菜单项 */  
        text-align: center; /* 居中菜单项文本 */  
    }  

    header nav ul li a {  
        font-size: 1em; /* 调整字体大小 */  
        padding: 0px; /* 调整内边距 */  
        display: inline-block; /* 确保链接为块状元素 */  
    }  
}  

/* 手机端进一步优化按钮布局 */
@media (max-width: 768px) {
    .cta-buttons a.btn {
        width: calc(50% - 10px);
        min-width: 80px;
        padding: 6px 10px;
        font-size: 0.75rem;
        margin: 5px 0;
    }

    .cta-buttons {
        gap: 10px;
        margin-top: 15px;
    }
}
    
    .gallery-grid, .software-grid {  
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));  
    }  
    
    .stat-item h3 {  
        font-size: 2.5rem;  
    }  
}  

@media (max-width: 576px) {  
    header .container {  
        flex-direction: row; /* 在小屏幕上保持水平布局 */ 
        align-items: flex-start; /* 左对齐 */ 
    }  

    header .logo h1 {  
        font-size: 1.2em; /* 小屏幕上标题字体大小 */  
    }  
    
    nav ul {  
        
        justify-content: center;  
    }  
    
    nav ul li {  
        margin: 0 5px;  
    }  
    
    .hero h1 {  
        font-size: 2.2rem;  
    }  
    
    .hero p {  
        font-size: 1.1rem;  
    }  
    
    .gallery-section h2, .software-showcase h2 {  
        font-size: 2rem;  
    }  
    
    .gallery-grid, .software-grid {  
        grid-template-columns: 1fr;  
    }  
    
    .stats-grid {  
        grid-template-columns: 1fr 1fr;  
    }  
    
    .footer-content {  
        grid-template-columns: 1fr;  
    }  
	
	
}  

.button-container {  
		display: flex ;  
		justify-content: space-between ;  
		align-items: center;  
	}  

/* 让选中的文本也符合主题色彩 */  
::selection {  
    background-color: var(--cherry-blossom);  
    color: white;  
}