@import '../css/index.css';

/*  */

.information {
    top: 2vw;
}


/* 拔河 */

.tug-of-war {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}


/* 绳子 */

.string {
    width: 52vw;
    position: absolute;
    left: 53%;
    top: 22vw;
    transform: translateX(-50%);
}


/* 人 */

#people1 {
    width: 12vw;
    position: absolute;
    left: 26vw;
    top: 14.5vw;
}

#people2 {
    width: 12vw;
    position: absolute;
    left: 68vw;
    top: 13.5vw;
}

#people3 {
    width: 12vw;
    position: absolute;
    left: 68vw;
    top: 35vw;
    z-index: 2;
}


/* 旗子 */

#banner {
    width: 6vw;
    position: absolute;
    left: 51.5vw;
    top: 18vw;
}


/* 球 */

#ball {
    width: 3vw;
    position: absolute;
    left: 50.5vw;
    top: 27.5vw;
    z-index: 2;
    opacity: 0;
    /* animation: roll3 1.5s linear forwards; */
}


/* 滚动一 */

.roll1 {
    animation: roll1 1.5s linear forwards;
}

@keyframes roll1 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }
    20% {
        opacity: 0;
        transform: translate3d(-8vw, -3vw, 0) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate3d(-9vw, -3vw, 0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate3d(-18vw, -6.5vw, 0);
    }
}


/* 滚动二 */

.roll2 {
    animation: roll2 1.5s linear forwards;
}

@keyframes roll2 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }
    20% {
        opacity: 0;
        transform: translate3d(8vw, -4vw, 0) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate3d(9vw, -4vw, 0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate3d(18vw, -7.5vw, 0);
    }
}


/* 滚动三 */

.roll3 {
    animation: roll3 1.5s linear forwards;
}

@keyframes roll3 {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }
    20% {
        opacity: 0;
        transform: translate3d(4vw, 4.2vw, 0) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate3d(6vw, 4.2vw, 0) scale(1);
    }
    100% {
        opacity: 1;
        transform: translate3d(17vw, 11vw, 0);
    }
}


/* 选项 */

#option-box {
    width: 100%;
    /* height: 6vw; */
    position: absolute;
    left: 0;
    top: 0;
}

#option-box div {
    width: 24vw;
    height: 8vw;
    color: #fedf50;
    text-align: center;
    line-height: 10vw;
    cursor: pointer;
}

#option-box div:nth-child(1) {
    position: absolute;
    left: 12.5vw;
    top: 8vw;
}

#option-box div:nth-child(2) {
    position: absolute;
    left: 51vw;
    top: 8vw;
}

#option-box div:nth-child(3) {
    position: absolute;
    left: 27vw;
    top: 44vw;
}

#option-box div img {
    width: 140%;
}