/* 主标题与首页样式 */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 2rem;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
}

.hero-title-img {
    max-width: 100%;
    scale: 1.4;
    height: auto;
    margin-bottom: 40px;
    display: block;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg .container {
    width: 100%;
    height: 100%;
    background: #dcede2;
    background-image: radial-gradient(4px 100px at 0px 235px, #5bc45e, #0000),
      radial-gradient(4px 100px at 300px 235px, #5BC45E, #0000),
      radial-gradient(1.5px 1.5px at 150px 117.5px, #4CAF50 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 252px, #5BC45E, #0000),
      radial-gradient(4px 100px at 300px 252px, #5BC45E, #0000),
      radial-gradient(1.5px 1.5px at 150px 126px, #4CAF50 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 150px, #5BC45E, #0000),
      radial-gradient(4px 100px at 300px 150px, #5BC45E, #0000),
      radial-gradient(1.5px 1.5px at 150px 75px, #4CAF50 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 253px, #5BC45E, #0000),
      radial-gradient(4px 100px at 300px 253px, #5BC45E, #0000),
      radial-gradient(1.5px 1.5px at 150px 126.5px, #4CAF50 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 204px, #5BC45E, #0000),
      radial-gradient(4px 100px at 300px 204px, #5BC45E, #0000),
      radial-gradient(1.5px 1.5px at 150px 102px, #4CAF50 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 134px, #5BC45E, #0000),
      radial-gradient(4px 100px at 300px 134px, #5BC45E, #0000),
      radial-gradient(1.5px 1.5px at 150px 67px, #4CAF50 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 179px, #5BC45E, #0000),
      radial-gradient(4px 100px at 300px 179px, #5BC45E, #0000),
      radial-gradient(1.5px 1.5px at 150px 89.5px, #4CAF50 100%, #0000 150%);
    background-size:
      300px 235px,
      300px 235px,
      300px 235px,
      300px 252px,
      300px 252px,
      300px 252px,
      300px 150px,
      300px 150px,
      300px 150px,
      300px 253px,
      300px 253px,
      300px 253px,
      300px 204px,
      300px 204px,
      300px 204px,
      300px 134px,
      300px 134px,
      300px 134px,
      300px 179px,
      300px 179px,
      300px 179px;
    animation: hi 150s linear infinite;
}

@keyframes hi {
    0% {
      background-position:
        0px 220px,
        3px 220px,
        151.5px 337.5px,
        25px 24px,
        28px 24px,
        176.5px 150px,
        50px 16px,
        53px 16px,
        201.5px 91px,
        75px 224px,
        78px 224px,
        226.5px 350.5px,
        100px 19px,
        103px 19px,
        251.5px 121px,
        125px 120px,
        128px 120px,
        276.5px 187px,
        150px 31px,
        153px 31px,
        301.5px 120.5px;
    }
    to {
      background-position:
        0px 6800px,
        3px 6800px,
        151.5px 6917.5px,
        25px 13632px,
        28px 13632px,
        176.5px 13758px,
        50px 5416px,
        53px 5416px,
        201.5px 5491px,
        75px 17175px,
        78px 17175px,
        226.5px 17301.5px,
        100px 5119px,
        103px 5119px,
        251.5px 5221px,
        125px 8428px,
        128px 8428px,
        276.5px 8495px,
        150px 9876px,
        153px 9876px,
        301.5px 9965.5px;
    }
}

.hero-content {
    max-width: 800px;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 8rem;
    font-family: serif;
    margin-bottom: 1rem;
    color: #333;
}

.slogan {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: #666;
    letter-spacing: 10px;
    text-shadow: #62977e 0 0 8px;
}

.scroll-down {
    position: absolute;
    top: 22rem;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    cursor: pointer;
}

.scroll-down p {
    font-size: 1rem;
    padding-left: 10px;
}

.scroll-down span {
    font-size: 30px;
    margin-bottom: 1rem;
}