.home {
    width: 100vw;
    height: 100vh;
    background: url('../../assets/image/bg.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .title {
        width: 1219px;
        height: 96px;
        background: url('../../assets/image/title.png');
        background-size: 100% 100%;
    }
    .content {
        flex: 1;
        width: 100%;
        overflow: hidden;
        display: flex;
        transform-style: preserve-3d;
        position: relative;
        .imageFile {
            position: absolute;
            bottom: -70px;
            left: 0;
            right: 0;
            margin: auto;
            width: 100%;
            // height: 500px;
            display: block;
        }
    }
    .footer {
        height: 86px;
        width: 1115px;
        background: url('../../assets/image/footer.png');
        background-size: 100% 100%;
    }
}

.drag-container {
    position: relative;
    display: flex;
    margin: auto;
    transform-style: preserve-3d;
    perspective: 500;
    transform: rotateX(-11deg);
}

.spin-container {
    position: relative;
    display: flex;
    margin: auto;
    width: 0;
    height: 320px;
    transform-style: preserve-3d;
    transform: rotateX(-11deg);
    animation: 60s linear 0s infinite normal none running spinRevert;
    &:hover {
        animation-play-state: paused;
    }
}

.drag-container img {
    // transform-style: preserve-3d;
    position: absolute;
    left: -123px;
    top: 0;
    width: 245px;
    height: 362px;
    cursor: pointer;
}

@keyframes spin {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

@keyframes spinRevert {
    from {
        transform: rotateY(360deg);
    }
    to {
        transform: rotateY(0deg);
    }
}