.rotate {
    margin: -25vw 0 -7.5vw;
}

.rotate_content {
    position: relative;
    width: 60%;
    height: 60vw;
    margin: 0 auto;
    background: url('../images/rotate_BG.png') center no-repeat;
    background-size: contain;
}

.rotate_back {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
}

.rotate_award {
    position: absolute;
    top: 19%;
    left: 19%;
    width: 62%;
    animation-name: rotate_spin;
    transition: 3s;
    animation-duration: 25s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

.rotate_pointer {
    position: absolute;
    top: 42%;
    left: 42%;
    width: 20%;
    transition: .3s;
    cursor: pointer;
}

.rotate_pointer:hover {
    top: 41%;
}


@keyframes rotate_spin {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 1024px) {

    .rotate_content {
        width: 100%;
        height: 100vw;
        background-size: cover;
    }

    .rotate_back {
        top: 5%;
        left: 5%;
        width: 90%;
    }
    
    .rotate_award {
        top: 10%;
        left: 10%;
        width: 80%;
    }

}