/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    /* 为整体背景设置一个渐变，参考图片主色调 */
    background: linear-gradient(135deg, #e0f9e5, #c9f2d0);
    color: #2c5e3a;
    overflow: hidden;
    /* 防止出现浏览器默认滚动条 */
}

/* 全屏滚动容器 */
#fullpage {
    height: 100vh;
}

.section {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 中间节气卡片组 */
.season-cards {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
    flex: 1;
    max-width: 960px;
    padding: 50px 20px;
    position: relative;
    left: 0;
    /* 给卡片区域留出左右边距 */
}

.card {
    position: relative;
    transition: all 0.5s;
    min-width: 84px;
}

.card:hover {
    transform: translateY(-10px) scale(1.2);
    transition: all 0.5s;
}

.card-inner {
    height: 100%;

}

.card-inner img {
    width: 100%;
min-width: 84px;
}

.season-cards .card:nth-child(2N) {
    position: relative;
    top: 80px;
}

/* 卡片上的箭头按钮（模拟点击进入详情） */
.arrow-btn {
    margin-top: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    cursor: pointer;
    background: url('../images/arrow.png')100% 100%;
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -19px;
}

/* 右侧艺术字和装饰 */
.spring-art {
    position: absolute;
    width: 15%;
    max-width: 300px;
    right: 5%;
    top: 5%;
}

.spring-art img {
    width: 100%;
}

.page1 {
    background: url('../images/page1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

.page2 {
    background: url('../images/spring/spring_bg.png');
    background-repeat: no-repeat;
    background-position: center center;
}

.summer-content {
    background: url('../images/summer/summer_bg.png');
    background-repeat: no-repeat;
    background-position: center center;
}

.autumn-content {
    background: url('../images/autumn/autumn_bg.png');
    background-repeat: no-repeat;
    background-position: center center;
}

.winter-content {
    background: url('../images/winter/winter_bg.png');
    background-repeat: no-repeat;
    background-position: center center;
}

/* 左侧季节导航 */
.season-nav {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 10;
}

.season-nav::after {
    content: "";
    background: url(../images/line.png);
    width: 3px;
    height: 210%;
    position: fixed;
    top: -50%;
    left: 40px;
}

.nav-btn {
    width: 83px;
    height: 83px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 0;
    outline: none;
    /* 确保按钮在最上层 */
}


.nav-btn:hover {
    transform: scale(1.05);
}

.nav-btn.active {
    transform: scale(1.1);
}

.nav-btn—back {
    background: url('../images/back_button.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.nav-btn—spring {
    background: url('../images/spring_button.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.nav-btn—summer {
    background: url('../images/summer_button.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.nav-btn—autumn {
    background: url('../images/autumn_button.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.nav-btn—winter {
    background: url('../images/winter_button.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.nav-btn—back.active {
    background: url('../images/back_button_active.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.nav-btn—spring.active {
    background: url('../images/spring_button_active.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.nav-btn—summer.active {
    background: url('../images/summer_button_active.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.nav-btn—autumn.active {
    background: url('../images/autumn_button_active.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.nav-btn—winter.active {
    background: url('../images/winter_button_active.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fp-overflow {
    height: 90%;
    display: flex;
    align-items: center;
}

@media (max-width: 1320px) {
    .season-nav {
        left: 5%;    
    }
    .card {
        width: 12%
    }
}

@media (max-width: 980px) {
    .spring-art {
        width: 22%;
        top: 0;
        right: 0;
    }

    .season-cards {
        flex-wrap: wrap;
        gap: 11%;
        justify-content: flex-start;
        padding-left: 18%;

    }
.season-cards{
    padding-left: 15%;
}
    .season-cards .card {
        width: 17%;
    }

    .season-cards .card:nth-child(2N) {
        position: relative;
        top: 0;

    }

    .fp-overflow {
        height: 100%;
    }

    .season-nav::after {
        left: 40px;
        top: -60%;
        height: 220%;
        width: 2px;
    }

    .season-nav {
        left: 2%;
    }

    .page1 {

        background: url(../images/page1_mobile.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: top center;
    }
}

@media (max-width: 620px) {
    .spring-art {
        width: 16%;
        top: 0px;
        right: 0;
    }

    .season-nav {
        left: 2%;
    }

    .season-cards {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        padding-left:8%;
    }

    .season-cards .card {
        width: 25%;
    }

    .season-cards .card:nth-child(2N) {
        position: relative;
        top: 0;

    }

    .fp-overflow {
        height: 100%;
    }

    .nav-btn {
        width: 60px;
        height: 60px;
    }

    .season-nav::after {
        left: 30px;
        top: -60%;
        height: 220%;
        width: 2px;
    }

    .page1 {

        background: url(../images/page1_mobile.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: top center;
    }
}<!--ecms sync check [sync_thread_id="3bcee7cc5a424330844ab778a62d31c1" sync_date="2026-05-11 18:00:38" check_sum="3bcee7cc5a424330844ab778a62d31c1]-->