*{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑";}
/* 全局入场动画 */
body{
    animation: pageFadeIn 0.8s ease-in-out;
    background: #f7fff9;
    color:#333;
    line-height:1.6;
}
@keyframes pageFadeIn {
    from{opacity:0; transform: translateY(15px);}
    to{opacity:1; transform: translateY(0);}
}
/* 页面切换淡入动画 */
.content-box{
    display:none;
    animation: contentFade 0.4s ease;
}
.content-box.active{
    display:block;
}
@keyframes contentFade{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
}
/* 文字延迟渐显 */
.word-fade{
    opacity:0;
    animation:textFade 1s ease forwards;
}
@keyframes textFade{to{opacity:1;}}
.delay1{animation-delay:0.2s;}
.delay2{animation-delay:0.4s;}
/* 头部 */
header{
    background:#367d3b;
    color:#fff;
    padding:30px;
    text-align:center;
}
header p{margin-top:8px;opacity:0.9;}
/* 导航粘性置顶 */
nav{
    background:#26547c;
    padding:15px;
    position:sticky;
    top:0;
    z-index:998;
}
nav ul{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    list-style:none;
}
nav li a{
    color:#fff;
    text-decoration:none;
    padding:8px 16px;
    border-radius:5px;
    transition:all 0.3s ease;
    display:inline-block;
    cursor:pointer;
}
nav li a:hover{
    background:#5998d1;
    transform:scale(1.08);
}
.wrap{
    max-width:1200px;
    margin:40px auto;
    padding:0 15px;
}
.intro-box{
    background:#fff;
    padding:25px;
    border-radius:10px;
    box-shadow:0 2px 12px #ddd;
    margin-bottom:40px;
}
.intro-box h2{color:#367d3b;margin-bottom:10px;}
/* 首页卡片布局 */
.card-box{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}
.card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 15px #e2e9e3;
    cursor:pointer;
    transition:all 0.3s ease;
}
.card:hover{
    transform:translateY(-8px) scale(1.02);
}
.card img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:0.4s;
}
.card:hover img{transform:scale(1.07);}
.card h3{padding:15px 15px 5px;color:#367d3b;}
.card p{padding:0 15px 18px;color:#666;font-size:14px;}
/* 分类板块标题 */
.green-title{color:#2b7030;}
.blue-title{color:#347abc;}
.cyan-title{color:#2399a8;}
.green-btn{background:#2b7030;}
.blue-btn{background:#347abc;}
.cyan-btn{background:#2399a8;}
/* 植物列表卡片 */
.plant-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:20px;
    margin:20px 0;
}
.plant-item{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px #ddd;
    cursor:pointer;
    transition:0.3s;
}
.plant-item:hover{transform:translateY(-6px) scale(1.02);}
.plant-item img{
    width:100%;
    height:170px;
    object-fit:cover;
    transition:0.4s;
}
.plant-item:hover img{transform:scale(1.06);}
.plant-item h3{text-align:center;padding:12px;}
/* 详情图文模块 */
.detail{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    align-items:center;
    background:#fff;
    padding:25px;
    border-radius:10px;
    box-shadow:0 2px 12px #ddd;
    margin:25px 0;
}
.bigimg{
    width:320px;
    height:320px;
    object-fit:cover;
    border-radius:8px;
    transition:0.4s;
}
.bigimg:hover{transform:scale(1.03);}
.word{flex:1;min-width:280px;}
.video-btn{
    display:inline-block;
    padding:6px 14px;
    color:#fff;
    border-radius:5px;
    margin-top:12px;
    cursor:pointer;
    transition:0.3s;
}
.video-btn:hover{transform:scale(1.05);opacity:0.9;}
/* 图集 */
.img-group{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:15px;
    margin-bottom:30px;
}
.img-group img{
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:6px;
    transition:0.3s;
}
.img-group img:hover{transform:scale(1.05);}
/* 视频弹窗遮罩 */
.video-pop{
    position:fixed;
    left:0;top:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.85);
    display:none;
    z-index:9999;
    align-items:center;
    justify-content:center;
    animation:maskFade 0.3s ease;
}
@keyframes maskFade{from{opacity:0;}to{opacity:1;}}
.video-box{width:90%;max-width:750px;}
.video-box video{width:100%;border-radius:8px;}
.close-btn{
    color:#fff;
    font-size:30px;
    position:absolute;
    top:30px;right:30px;
    cursor:pointer;
    transition:0.2s;
}
.close-btn:hover{transform:scale(1.2);}
/* 返回顶部按钮 */
#backTop{
    position:fixed;
    bottom:30px;right:30px;
    width:45px;height:45px;
    background:#367d3b;
    color:#fff;
    border-radius:50%;
    text-align:center;
    line-height:45px;
    font-size:20px;
    cursor:pointer;
    opacity:0;
    transition:all 0.3s ease;
    z-index:999;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
#backTop.show{opacity:1;}
#backTop:hover{transform:translateY(-5px);}
footer{
    background:#26547c;
    color:#fff;
    text-align:center;
    padding:20px;
    margin-top:60px;
}
@media(max-width:700px){
    .detail{justify-content:center;text-align:center;}
    .bigimg{width:100%;max-width:320px;height:auto;}
}