.main-home {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.homepage1 {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}



.homebox1-1 {
    width: 100vw;
    height: 80vh;
    display: flex;
    flex-direction: row;
    position: relative;
}

.homeimg1-1 {
    position: absolute;
    width: 20vw;
    height: auto;
    left: 1vw;
    top: 13vh;
    z-index: 10;
}

.homeimg1-2 {
    width: 55vw;
    height: 10vh;
}

.homeimg1-3 {
    width: 100vw;
    height: auto;
}

.homeimg1-4 {
    width: auto;
    position: absolute;
    bottom: 0;
    height: 27vh;
    left: 20vw;
}

.homeimg1-5 {
    position: absolute;
    width: 20vw;
    height: auto;
    right: 6vw;
    bottom: -38vh;
}

.homeimg1-6 {
    width: 8vw;
    height: 23vh;
    right: 3vw;
    bottom: 0;
    position: absolute;
}

.homeimg1-7 {
    width: 20vh;
    height: 18vh;
    position: absolute;
    z-index: 10;
    opacity: 1;
    /* 初始透明度 */
    animation-name: moveAndFade;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

/* 定义动画的关键帧 */
@keyframes moveAndFade {

    0% {
        top: 15vh;
        left: 30vw;
        opacity: 1;
        /* 初始和结束时完全不透明 */
    }

    50% {
        top: 12vh;
        left: 50vw;
        opacity: 1;
        /* 移动过程中不透明 */
    }

    100% {
        top: 17vh;
        left: 61vw;
        opacity: 0;
        /* 渐变消失 */
    }
}

.homepage2 {
    width: 100vw;
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    position: relative;
}

.homeimg2-1 {
    width: 17vw;
    margin-top: -35vh;
    position: absolute;
    left: -62vw;
    animation-name: slideIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

/* 定义动画的关键帧 */
@keyframes slideIn {
    from {
        left: -62vw;
    }

    to {
        left: 55vw;
    }
}

.homeimg2-2 {
    width: 40vw;
    height: auto;
    position: absolute;
    transition: top 0.5s ease, left 0.5s ease;
    margin-top: 13vh;
    margin-left: -3vw;
}

.homeimg2-3 {
    width: 3vw;
    margin-top: 42vh;
    position: absolute;
}

.homepage3 {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.homebox3-1 {
    width: 100vw;
    height: 50vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.homeimg3-1 {
    width: 50vw;
    height: 40vh;
}

.homebox3-3 {
    display: flex;
    flex-direction: column;
    position: relative;
}

.homeimg3-2 {
    width: 37vw;
    height: 25vh;
    margin-left: 1vw;
    margin-top: -39vh;
}

.homeimg3-3 {
    width: 18vw;
    height: 41vh;
    margin-left: 65vw;
    transform: scaleX(-1);

    position: absolute;
    transition: top 0.5s ease, left 0.5s ease;
    margin-left: 65vw;
    margin-top: 0vw;
}

.homebox3-2 {
    width: 100vw;
    height: 50vh;
    display: flex;
    flex-direction: row;
    position: relative;
}

.homeimg3-4 {
    margin-left: 16vw;
    width: 18vw;
    height: 41vh;
    position: absolute;
    transition: top 0.5s ease, left 0.5s ease;
    margin-top: 0vw;
}

.homeimg3-5 {
    width: 50vw;
    height: 40vh;
    position: absolute;
    right: 0;
}

.homeimg3-6 {
    width: 38vw;
    height: 22vh;
    position: absolute;
    margin-left: 58vw;
    margin-top: 2vh;
}

.homepage4 {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.homebox4-1 {
    width: 100vw;
    height: 50vh;
    display: flex;
    flex-direction: row;
}

.homeimg4-1 {
    width: 41vw;
    height: 37vh;
    margin-top: 5vh;
}

.homeimg4-2 {
    width: 46vw;
    height: 51vh;
    margin-left: 6vw;
}

.homeimg4-3box {
    width: 59vw;
    height: 50vh;
    display: flex;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.homeimg4-3 {
    width: 40vh;
    height: 40vh;
    position: absolute;
    left: -0;
    /* 初始位置设置为盒子外面 */
    animation-name: slideHorizontal;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

/* 定义动画的关键帧 */
@keyframes slideHorizontal {

    0%,
    100% {
        left: 10vw;
    }

    50% {
        left: calc(20vw);
    }
}

.homeimg4-4 {
    width: 41vw;
    height: 37vh;
    margin-left: 5vw;
    margin-top: 4vh;
}

.homepage5 {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.homebox5-1 {
    width: 100vw;
    height: 50vh;
    display: flex;
    flex-direction: row;
}

.homeimg5-1 {
    width: 50vw;
    height: 40vh;
}

.homeimg5-2box {
    width: 50vw;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
}

.homeimg5-2 {
    width: 15vw;
    height: auto;
    animation: jumpBoxHandler 1.5s infinite;
}

@keyframes jumpBoxHandler {

    /* css事件 */
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(0px, 4vh);
        /* 可配置跳动方向 */
    }

    100% {
        transform: translate(0px, 0px);
    }
}

.homeimg5-3box {
    width: 50vw;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
}

.homeimg5-3 {
    width: 26vw;
    height: 50vh;
}

.homeimg5-4 {
    width: 50vw;
    height: 40vh;
    margin-left: 3vw;
}

.homeimg4-5 {
    width: 29vw;
    height: 50vh;
    margin-left: 10vw;
}

.homeimg4-6 {
    width: 31vw;
    height: 56vh;
}

.homeimg5-5 {
    width: 45vw;
    height: 50vh;
}

.lastpage {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.lastContent1 {
    font-size: 9vw;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 600;
    margin-top: 5vh;
    margin-left: 4vw;
}

.lastContent2 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 4vw;
    font-weight: 500;
    margin-left: 4vw;
}

.lastimg1 {
    width: 100vw;
    height: 70vh;
    position: absolute;
    top: 30vh;
}

.lastimg2 {
    width: 8vw;
    position: absolute;
    right: 28vw;
    top: 19vh;
}

.logo {
    width: 20vh;
    height: 20vh;
    top: 0;
    right: 5vw;
    position: absolute;
}

.lastimg3 {
    position: absolute;
    width: 4vh;
    right: 27vw;
    top: 18vh;
}

.lastBox {
    width: 20vw;
    font-size: 1.3vw;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 400;
    position: absolute;
    right: 7vw;
    top: 16vh;
}

.homeimg4-7 {
    width: 43vw;
    height: 39vh;
    margin-top: 5vh;
}

.homeimg5-6 {
    width: 26vw;
    height: 46vh;
}

.homebox3-3:hover,
.homeimg4-1:hover,
.homeimg4-4:hover,
.homeimg5-1:hover,
.homeimg5-4:hover,
.homeimg4-7:hover,
.homebox3-2:hover,
.homeimg1-5:hover {
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    cursor: default;
}

@keyframes hvr-wobble-vertical {
    16.65% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.homeimg5-6:hover,
.homeimg4-6:hover,
.homeimg5-3:hover,
.homeimg2-3:hover,
.homeimg1-6:hover,
.lastimg2:hover,
.homeimg1-1:hover {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@keyframes hvr-wobble-horizontal {
    16.65% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    33.3% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }

    49.95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    66.6% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }

    83.25% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}