/* @font-face {
    font-family: 'MaoKenShared';
    src: url('../Fonts/MaoKenWangXingYuan-2.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
} */

button {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    display: flex;
    font-family: 'MaoKenShared', "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    width: 100vw; /* 锁定宽度为视口宽度 */
}

    
/* 
button,
input,
select,
textarea {
    font-family: inherit;
}

.main-content-wrapper,
.nav-btn,
.nav-btn .btn-title,
.nav-btn .btn-subtitle,
.controls,
.control-btn,
.site-footer,
.footer-table,
.footer-table th,
.footer-table td,
.footer-table td a,
.footer-table td p,
.divider {
    font-family: 'MaoKenShared', "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
} */
.main-content-wrapper {
    width: 100%;
    overflow-x: hidden; /* 防止内部溢出导致页面变宽 */
}

.top{
    width: 100%;
    height: 83vh;
    background: linear-gradient(to bottom, #a6defc 0%, #ebf9fe 100%);
    background-size: cover;
    display: flex;
    flex-direction: column;
    /* 上下边距一致，左右不设边距 */
    padding: 5% 0;
    position: relative; /* 为子元素 .title 的绝对定位提供参考 */
}
.title{
    position: absolute;
    top: -5%; /* 保持与父级 padding 顶部的视觉一致性 */
    left: 50%;
    transform: translateX(-50%) scale(0); /* 初始缩放为0，结合 translateX */
    width: 50%;
    height: 40%;
    z-index: 9999; /* 层级最高 */
    background-image: url(../img/index/title.png);
    /* background-color: #fff; */
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    animation: titleSpringEntry 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
}

@keyframes titleSpringEntry {
    0% {
        transform: translateX(-50%) scale(0.3);
        opacity: 0;
    }
    70% {
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

.top .cloud{
    width: 100%;
    height: 45%;
    /* background-color: #fff; */
    padding: 0 10%;
    display: flex;
    position: relative;
    .left{
        position: absolute;
        width: 42%;
        height: 52%;
        background-image: url(../img/index/cloud-left.png);
        background-size: contain;
        background-repeat: no-repeat;
        /* background-color: #bdbdbd; */
        align-self: flex-end;
        will-change: transform;
        animation: cloudScroll 30s linear infinite;
    }
    .right{
        position: absolute;
        top: -15%;
        left: -10%;
        width: 35%;
        height: 60%;
        background-image: url(../img/index/cloud-right.png);
        background-size: contain;
        background-repeat: no-repeat;
        /* background-color: #caea56; */
        will-change: transform;
        animation: cloudScroll 30s linear -15s infinite;
    }
}

@keyframes cloudScroll {
    from {
        transform: translateX(-10vw) translateY(-2px);
    }
    to {
        transform: translateX(100vw) translateY(-2px);
    }
}

.h3-bgi {
    width: 30%;
    /* font-size: 50px; */
    /* font-style: inherit; */
    /* background-image: url(../img/index-history/h3-bgi.png); */
    background-size: contain;
    background-repeat: no-repeat;
/* background-color: #fff; */
    /* transform: scale(1.5); */
}

.btn{
    width: 100%;
    /* height: 20%; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    margin-bottom: 5%;
}
.container {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    justify-content: center;
    /* background-color: #412f2f; */
    height: 130%;
}

/* 新增：按钮包裹层，确保装饰和按钮为同级，且装饰在下方 */
.nav-btn-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 200px;
    height: 200px; */
}

.nav-btn {
    width: 210px;
    height: 210px;
    color: rgb(255, 255, 255);

    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    border: none;
    position: relative;



}

/* 按钮装饰元素通用样式 */
.btn-decoration {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 100px;
    height: 100px;
    z-index: 0;
    pointer-events: none;
    /* 默认样式，可根据需要调整 */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.92;
    transition: transform 0.3s;
}

/* 针对每个按钮的不同装饰，可自定义不同图片或颜色 */
.btn-decoration-storyline {
    background-image: url('../img/index/small1.1.png');
    left: 18%;
    top: 18%;
    opacity: 0;
    rotate: -10deg;
    transition: all 0.3s ease;
}
.nav-btn-wrapper:hover .btn-decoration-storyline {
    /* transform: translate( 20%, 0); */
    left: -3%;
    top: -5%;
    opacity: 1;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
}

.btn-decoration-rpg {
    background-image: url('../img/index/small2.1.png');
    width: 130px;
    height: 115px;
    left: 30%;  
    top: 26%;
    rotate: 10deg;
    transition: all 0.3s ease;
}
.nav-btn-wrapper:hover .btn-decoration-rpg {
     left: 35%;  
    top: -5%;
    opacity: 1;

    transition: all 0.3s ease;
    transition-delay: 0.1s;
}

.btn-decoration-module3 {
     width: 130px;
    height: 125px;
    background-image: url('../img/index/small3.1.png');
    left: 15%;
    top: 25%;
    rotate: 1deg;
    transition: all 0.3s ease;
}
.nav-btn-wrapper:hover .btn-decoration-module3 {
    left: 10%;
    top: 3%;
    opacity: 1;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
}

.btn-decoration-module5 {
    width: 130px;
    height: 115px;
    background-image: url('../img/index/samll4.1.png');
    left: 30%;
        top: 10%;
        transition: all 0.3s ease;
}
.nav-btn-wrapper:hover .btn-decoration-module5{
       left: 30%;
        top: -30%;
    opacity: 1;
        transition: all 0.3s ease;
        transition-delay: 0.1s;
    }

.nav-btn .btn-title {
    /* font-size: 24px; */
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(18, 14, 14, 0.715);
        font-size: 30px;
       

    font-weight: bold;
}

.nav-btn .btn-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.nav-btn:hover {
    /* 鼠标悬停时的阴影效果 */
    filter: drop-shadow(4px 4px 5px rgba(81, 87, 77, 0.479));
    scale: 1.1;
    animation: btn-bg-rotate 0.6s cubic-bezier(0.23, 1, 0.32, 1) 1;
}

.nav-btn {
    transition: all 0.3s, filter 0.3s;
    /* 保证动画流畅 */
}

/* 背景图旋转动画关键帧 */
@keyframes btn-bg-rotate {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}


.btn-storyline {
    background-image: url(../img/index/btn01.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* opacity: 0.5; */
    margin-bottom: auto;

}
.btn-rpg {
    background-image: url(../img/index/btn02.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* opacity: 0.5; */
    margin-top: auto;

}
.btn-module3 {
    background-image: url(../img/index/btn03.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* opacity: 0.5; */
    margin-top: auto;

}
/* .btn-module4 {
    background-image: url(../img/index/btn04.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: auto;
} */
.btn-module5 {
    background-image: url(../img/index/btn04.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* opacity: 0.5; */
    margin-bottom: auto;

}

.tree{
    display: flex;
    width: 100%;
    height: 60vh;
    position: absolute;
    /* background-color: #fff; */
    top: 0;

    .left{
        width: 50%;
        height: 100%;
        background-image: url(../img/index/tree-left.png);
        background-size: contain;
        background-repeat: no-repeat;
        transform: translateX(-65%);
        will-change: transform;
        animation: treeSlideInLeft 0.6s ease-out 0s forwards;
    }
    .right{
        width: 50%;
        height: 100%;
        background-image: url(../img/index/tree-right.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position-x: right;
        transform: translateX(65%);
        will-change: transform;
        animation: treeSlideInRight 0.6s ease-out 0s forwards;
        /* background-color: #fff; */
    }
}

@keyframes treeSlideInLeft {
    from {
        transform: translateX(-65%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes treeSlideInRight {
    from {
        transform: translateX(65%);
    }
    to {
        transform: translateX(0);
    }
}

.branch{
    width: 100%;
    height: 50vh;
    /* background-color: #eef9fe; */
    /* background-color: #fff; */
    position: relative;
    display: flex;
    justify-content: space-between;
    transform: translateY(-45%);
}

.branch .branch1,
.branch .branch5 {
    width: 30%;
    height: 100%;
}


.branch .branch2,
.branch .branch3,
.branch .branch4 {
    position: absolute;
    bottom: 0;
}
.branch .branch1 {
    /* background-color: #ff9f9f; */
    width: 27%;
    height: 110%;
    background-image: url(../img/index/branch01.png);
    background-position: bottom ;
    background-size: contain;
    background-repeat: no-repeat;
    rotate: -5deg;
    /* margin-bottom: 30%; */
    transform: translateY(-5%);
}

.branch .branch5 {
    /* background-color: #9fc5ff; */
    background-image: url(../img/index/branch05.png);
    background-size: contain;
    background-repeat: no-repeat;
}


/* 2 贴底且部分叠在 1 上 */

/* 出场动画关键帧 */
@keyframes branchUpIn {
    0% {
        transform: translateY(80%) scale(0.95);
        opacity: 0;
    }
    70% {
        transform: translateY(-8%) scale(1.05);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.branch .branch2 {
    width: 25%;
    height: 90%;
    left: 25%;
    /* background-color: #9ff0a8; */
    background-image: url(../img/index/branch02.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
    animation: branchUpIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
}

/* 3 左侧从父容器一半位置开始 */
.branch .branch3 {
    width: 20%;
    height: 80%;
    left: 45%;
    /* background-color: #ffd58e; */
    background-image: url(../img/index/branch03.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    animation: branchUpIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
}

/* 4 贴底且大部分叠在 5 上 */
.branch .branch4 {
    width: 22%;
    height: 50%;
    left: 55%;
    /* background-color: #d9a8ff; */
    background-image: url(../img/index/branch04.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center bottom;
    z-index: 4;
    animation: branchUpIn 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.6s both;
}



.divider {
    width: 100%;
    height: 30vh; 
   position: relative;
/* transform: translateY(-20%); */
    /* background: linear-gradient(to bottom, #ebf9fe 0%, #d9eacc 100%); */
    background-color: #ebf9fe;

    .guanmu{
        position: absolute;
        /* top: 50%; */
        bottom: -10%;
    width: 100%;
    height: 42%;
    background-position: bottom 0;
    background-size: contain;
        display: flex;
    }

}
.guanmu-prepare {
    transform: scale(0.3);
    opacity: 0;
    transition: none;
}
.guanmu-appear {
    animation: guanmuSpringEntry 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes guanmuSpringEntry {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    70% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.guanmu1{
    width: 60%;
    height: 100%;
    background-image: url(../img/index/guanmu1.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* background-color: #ae6e6e; */
}
.guanmu2{
    width: 60%;
    height: 100%;
    background-image: url(../img/index/guanmu2.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.guanmu3{
    width: 60%;
    height: 100%;
    background-image: url(../img/index/guanmu1.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.guanmu4{
    width: 60%;
    height: 100%;
    background-image: url(../img/index/guanmu2.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.content-box {
    /* width: min(92%, 1400px); */
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
      background: linear-gradient(to top, #e9f3e7 90%, #e9f3e7 100%);
    /* background-color: ; */
}

.content-area {
    width: 80%;
    max-width: 1860px;
    margin: 0 auto;
padding-left: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0vh;
}

.era-row {
    width: 90%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5%;
    box-sizing: border-box;

    /* background-color: #fff; */

}

.era-text {
    /* font-family: 'MaoKenShared', "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; */
width: 50%;
aspect-ratio: 4 / 3;
    line-height: 1.8;
    background-color: transparent;
    padding: 10vh;
    max-width: 80%;
    margin: 0 auto;
    text-align: left;
    background-size: contain;
    background-repeat: no-repeat;
    /* background-color: #fff; */
}

.era-text b {
    color: #7aa96e;
}


.era-text h3.animate-in {
    animation: h3FadeInUp 0.8s cubic-bezier(0.23,1,0.32,1) forwards;
}

@keyframes h3FadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    70% {
        opacity: 1;
        transform: translateY(-8px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.era-text p {
    text-indent: 2em;
    /* margin-top: 0; */
    margin-bottom: 0.75em;
    font-size: 2.5vh;
    opacity: 0;
    /* transform: translateY(32px); */
    transition: none;
    /* background-color: #763838; */
}

.era-text p.animate-in {
    animation: pFadeInUp 0.7s cubic-bezier(0.23,1,0.32,1) forwards;
}

@keyframes pFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(32px);
    }
    70% {
        opacity: 1;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 960px) {
    .era-row {
        padding: 5%;
    }

    .era-text h3 {
        font-size: 26px;
    }
}
.history-title{
    width: 80%;
    height: 30vh;
    /* background-color: #fff; */
    background-image: url(../img/index-history/history-title.png);
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    opacity: 0;
    transform: translateX(-80px);
    transition: none;
}

.history-title.animate-in {
    animation: historyTitleIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes historyTitleIn {
    0% {
        opacity: 0;
        transform: translateX(-80px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 首页右侧固定悬浮色块：默认半露出，悬停后完整显示 */
.right-floating-block {
    position: fixed;
    top: 50%;
    right: -72px;
    transform: translateY(-50%);
    width: 144px;
    height: 180px;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, #f2b16b 0%, #db8451 100%);
    box-shadow: -8px 12px 26px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    z-index: 999;
}

.right-floating-block:hover {
    right: 0;
}