@charset "utf-8";

.slide3 {
    position: relative;
}

.slide3 .bike {
    width: 3vw;
    position: absolute;
    top: 36%;
    left: 6%;
    opacity: 0;
    transition: opacity 500ms linear;
}

.MacOS .slide3 .bike {
    width: 4vw;
}

.slide3.slick-active .bike {
    animation: bike linear 5s infinite;
    animation-delay: 2s;
}

.slide3 .slideImage {
    width: 104.2%;
    margin-top: 10.4%;
    margin-left: 0%;
    opacity: 0;
    transition: opacity 500ms linear;
}

.slide3 .light1 {
    width: 2.77vw;
    position: absolute;
    top: 35.7%;
    left: 13.8%;
    opacity: 0;
    transition: opacity 500ms linear;
}

.slide3 .light2 {
    width: 2.77vw;
    position: absolute;
    top: 46.9%;
    left: 29.1%;
    opacity: 0;
    transition: opacity 500ms linear;
}

.MacOS .slide3 .light1,
.MacOS .slide3 .light2 {
    width: 3.77vw;
}

.slide3 .girl-first {
    width: 5.6%;
    position: absolute;
    top: 47.3%;
    left: 16.3%;
    opacity: 0;
    transition: opacity 500ms linear;
}

.slide3 .girl-first img {
    width: 100%;
}

.slide3 .girl-second {
    position: absolute;
    right: 55%;
    bottom: 18%;
    width: 4.5%;
    transform: rotateY(180deg);
    opacity: 0;
    transition: opacity 500ms linear;
}

.slide3 .girl-second img {
    width: 100%;
}

.slide3 .popup3 {
    position: absolute;
    right: 3.7%;
    bottom: 3%;
    width: 26.9%;
}

.slide3 .popup3 .popupAvatar {
    width: 57.4%;
    opacity: 0;
    transition: opacity 500ms linear;
}

.slide3 .popup3 .popupText {
    position: absolute;
    right: -15.5%;
    bottom: 67.5%;
    width: 99%;
    opacity: 0;
    transition: opacity 500ms linear;
    z-index: 1;
}

.slide3 .popup3 .popupClick {
    position: absolute;
    top: -12.9%;
    right: -13%;
    width: 28%;
    opacity: 0;
    transition: opacity 500ms linear;
    z-index: 1;
}

.slide3 .yurikago {
    position: absolute;
    bottom: 18%;
    right: 28.2%;
    width: 7.89%;
    opacity: 0;
    transition: opacity 500ms linear;
}

@keyframes bike {
    0% {
        top: 36%;
        left: 6%;
        opacity: 0;
        animation-timing-function: ease-out;
    }

    5% {
        opacity: 1;
    }

    94% {
        opacity: 1;
    }

    100% {
        top: 59%;
        left: 40%;
        opacity: 0;
        animation-timing-function: ease-out;
    }
}

@media (max-width: 768px) {
    .slide3 .bike {
        width: 6vw;
    }
    .MacOS .slide3 .bike {
        width: 6vw;
    }

    .slide3 .light1 {
        width: 6.07vw;
    }

    .slide3 .light2 {
        width: 6.07vw;
    }

    .MacOS .slide3 .light1,
    .MacOS .slide3 .light2 {
        width: 6.07vw;
    }
}