.rightCommon {
    animation: rightCommon 2s forwards 1.5s;
    opacity: 0.0;
}

@keyframes rightCommon {
    to {
        opacity: 1.0;
    }
}

#main .page.pg1 .base.glasses {
    animation: pg1Glasses 1s forwards 0.5s;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    transform: translateY(-100%) translateX(-50%);
}

@keyframes pg1Glasses {
    to {
        transform: translateY(0) translateX(-50%);
    }
}

#main .page.pg1 .text1 {
    animation: pg1Text 2s forwards;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
}

#main .page.pg1 .text2 {
    animation: pg1Text 2s forwards 0.3s;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
}

#main .page.pg1 .text3 {
    animation: pg1Text 2s forwards 0.5s;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
}

#main .page.pg1 .text4 {
    animation: pg1Text 2s forwards 0.7s;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
}

#main .page.pg1 .text5 {
    animation: pg1Text 1.5s forwards 1.1s;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    opacity: 0;
}

#main .page.pg1 .text6 {
    animation: pg1Text 2s forwards 0.9s;
    animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
    opacity: 0;
}

#main .page.pg1 .date {
    animation: pg1Text 2s forwards 1s;
    animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
    opacity: 0;
}

@keyframes pg1Text {
    from {
        transform: translateX(-10vw);
    }
    to {
        opacity: 1.0;
    }
}

#main .page.pg1 .text7 {
    animation: pg1Text7 1.5s forwards;
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
    opacity: 0;
    transform-origin: 3% 133%;
}

@keyframes pg1Text7 {
    from {
        transform: rotate(90deg);
    }
    to {
        opacity: 1.0;
    }
}

#main .page.pg1 .right {
    animation: rightPic 1.5s forwards 0.5s;
    transform: translateX(100%);
}

@keyframes rightPic {
    to {
        transform: translateX(0);
    }
}

#main .page.pg3>.slides .slide.s1 .photo.main {
    animation: pg3_1main 1s forwards;
    opacity: 0;
}

@keyframes pg3_1main {
    from {
        transform: scaleX(0);
    }
    to {
        opacity: 1.0;
    }
}

#main .page.pg3>.slides .slide.s1 .photo.a1 {
    animation: pg3_1a1 1s forwards 0.1s;
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
    opacity: 0;
    transform-origin: 44% 57%;
}

@keyframes pg3_1a1 {
    from {
        transform: rotate(60deg);
    }
    to {
        opacity: 1.0;
    }
}

#main .page.pg3>.slides .slide.s1 .photo.a2 {
    animation: pg3_1a2 1s forwards 0.5s;
    animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
    opacity: 0;
    transform-origin: 53% 70%;
}

@keyframes pg3_1a2 {
    from {
        transform: rotate(-60deg);
    }
    to {
        opacity: 1.0;
    }
}

#main .page.pg3>.slides .slide.s2 .photo.a1 {
    animation: pg3_2a1 1s forwards;
    transform-origin: 46.53% 52.22%;
}

@keyframes pg3_2a1 {
    from {
        transform: translateY(-100%) rotate(360deg);
    }
}

#main .page.pg3>.slides .slide.s2 .photo.a2 {
    animation: pg3_2a2 1s forwards 0.3s;
    transform-origin: 32.04% 69.95%;
    transform: translateY(-100%) rotate(0);
}

@keyframes pg3_2a2 {
    to {
        transform: translateY(0) rotate(360deg);
    }
}

#main .page.pg3>.slides .slide.s2 .photo.a3 {
    animation: pg3_2a3 1s forwards 0.6s;
    transform-origin: 21.42% 78.91%;
    transform: translateY(-100%) rotate(0);
}

@keyframes pg3_2a3 {
    to {
        transform: translateY(0) rotate(360deg);
    }
}

#main .page.pg3>.slides .slide.s3 .photo.a1 {
    animation: pg3_3a1 1s forwards;
}

@keyframes pg3_3a1 {
    from {
        transform: translateX(-100%);
    }
}

#main .page.pg3>.slides .slide.s3 .photo.a2 {
    animation: pg3_3a2 1s forwards 0.5s;
    transform: translateX(100%);
}

@keyframes pg3_3a2 {
    to {
        transform: translateX(0);
    }
}

#main .page.pg3>.slides .slide.s4 .photo.a1 {
    animation: pg3_4a1 1s forwards 0.5s;
    transform: translateY(100%);
}

@keyframes pg3_4a1 {
    to {
        transform: translateX(0);
    }
}

#main .page.pg3>.slides .slide.s4 .photo.a2 {
    animation: pg3_4a2 2s forwards 1.5s;
    opacity: 0.0;
}

@keyframes pg3_4a2 {
    to {
        opacity: 1.0;
    }
}