.swiper-container,
.swiper-wrapper,
.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    background: rgb(167, 227, 255);
    background-size: 100% 100%;
    opacity: 0;
}

.swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.touch .swiper-slide::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    /*-webkit-transform: scaleX(0.5);*/
    /*background-size: 100% 100%;*/
    /*animation: next 1.5s infinite;*/
}

@-webkit-keyframes next {
    0% {
        bottom: 1rem;
    }
    50% {
        bottom: 2rem;
    }
    100% {
        bottom: 1rem;
    }
}

.swiper-wrapper .swiper-slide:last-child::after {
    display: none;
}

.s1 {
    background: url(../img/bg1.jpg) no-repeat;
    background-size: 100% 100%;
}

.s1 .title {
    position: absolute;
    top: 13%;
}

.s1 .t1 {
    position: absolute;
    top: 26%;
}

.s1 .t2 {
    position: absolute;
    top: 33%;
    left: 8rem;
}

.s1 .girl {
    position: absolute;
    bottom: 3%;
    -webkit-animation: drive 3s linear forwards;
}

@-webkit-keyframes drive {
    from {
        left: -30%;
    }
    to {
        left: 70%;
    }
}

.s1 .t3 {
    position: absolute;
    bottom: 2%;
}

.s2 {
    background: url(../img/s2/bg.jpg) no-repeat;
    background-size: 100% 100%;
}

.s2_box {
    width: 100%;
    height: 46.86%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    top: 10%;
}

.s2 .child {
    position: absolute;
    bottom: 2%;
}

.bg_box {
    background-color: #fff;
}

.bg_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.bgl {
    width: 100%;
}

.point {
    position: relative;
}

.s3 .star {
    position: absolute;
    bottom: 15%;
    left: 45%;
    -webkit-animation: star 1s linear infinite;
}

@-webkit-keyframes star {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    33% {
        opacity: 1;
        transform: scale(1.5);
    }
    66% {
        opacity: 1;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.s4 .star {
    position: absolute;
    bottom: 29%;
    left: 60%;
    -webkit-animation: star 1s linear infinite;
}

.s5 .star {
    position: absolute;
    bottom: 35%;
    left: 13%;
    -webkit-animation: star 1s linear infinite;
}

.s6 .star {
    position: absolute;
    top: 8%;
    right: 12%;
    -webkit-animation: star 1s linear infinite;
    transform: scale(2);
}

.s7 .star {
    position: absolute;
    bottom: 10%;
    left: 50%;
    -webkit-animation: star 1s linear infinite;
    transform: scale(2);
}

.s8 .star {
    position: absolute;
    bottom: 20%;
    left: 15%;
    -webkit-animation: star 1s linear infinite;
    transform: scale(2);
}

.s9 {
    background: url(../img/s9/bg.jpg) no-repeat;
    background-size: 100% 100%;
}

.s9_box {
    position: absolute;
    top: 15%;
}

.s9_t_box {
    width: 100%;
    position: absolute;
    top: 16%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s9 .girl {
    position: absolute;
    bottom: -5%;
    left: 5%;
}

.again {
    position: absolute;
    bottom: 5%;
    right: 5%;
}


/*******************************/

.mc {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.mc_box {
    width: 80%;
    position: relative;
    display: flex;
    justify-content: center;
    display: none;
}

.bord {
    width: 100%;
}

.close {
    position: absolute;
    top: 1%;
    right: -6%;
}

.mc_m {
    position: absolute;
    top: 15%;
}

.mc_t {
    position: absolute;
    width: 100%;
    top: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mc_t img {
    width: 80%;
}

.hide {
    display: none;
}

.c {
    position: absolute;
    bottom: -5%;
    right: -5%;
}



/***************************/

.menu_box {
    position: absolute;
    right: 0%;
    top: -4%;
    transform: translateX(50%);
    z-index: 2;
    transition: 1s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu_box_active {
    top: 0%;
    transform: translateX(0%);
}

.menus {
    transition: 1s;
    height: 0rem;
    overflow: hidden;
}

.menus_active {
    height: 15rem;
}

.menu {
    margin-top: 5px;
}


.s3 .shou {
    bottom: -15%;
    left: 52%;
}

.s4 .shou {
    bottom: 6%;
    left: 68%;
}

.s5 .shou {
    bottom: 6%;
    left: 19%;
}

.s6 .shou {
    top: 28%;
    right: 6%;
}

.s7 .shou {
    bottom: -11%;
    left: 65%;
}

.s8 .shou {
    bottom: -11%;
    left: 18%;
}

.hidden{
    opacity: 0;
    pointer-events: none;
}
.page1{
    background: url(../img/bg1.jpg) no-repeat;
    background-size: 100% 100%;
}
.page .center{
    width: 100%;
    height: 25.5rem;
}
.p1{
    position: absolute;
    left: 36%;
    top: 8rem;
    -webkit-animation: p1 2.2s linear infinite;
}
@-webkit-keyframes p1 {
    from{
        -webkit-transform: scale(1);
    }
    50%{
        -webkit-transform: scale(1.1);
    }
    to{
        -webkit-transform: scale(1);
    }
}
.p2{
    position: absolute;
    left: 4rem;
    top: 6rem;
    -webkit-animation: p2 6s linear infinite;
}
@-webkit-keyframes p2 {
    from{
        -webkit-transform: rotateZ(0);
    }
    to{
        -webkit-transform: rotateZ(360deg);
    }
}
.page2{
    background: #001399;
    z-index: 1;
}
.page3{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-animation: page2 6s both;
}
@-webkit-keyframes page2 {
    from{
        -webkit-transform: translateY(0);
    }
    to{
        -webkit-transform: translateY(calc(100vh - 62.975rem));
    }
}
.page3-bg{
    width: 100%;
}
.p4{
    position: absolute;
    top: 33.8rem;
    left: 0;
}
.skip{
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
}
.p6{
    position: absolute;
    left: 4%;
    top: 7%;
    -webkit-animation: fadeOut 1s 2s both;
}
.p7{
    position: absolute;
    left: 9.8%;
    top: 63%;
}
.p71{
    position: absolute;
    left: 9.8%;
    top: 63%;
    -webkit-animation: p71 1s 1.9s both;
}
@-webkit-keyframes p71 {
    from{
        opacity: 0;
    }
    to{
        opacity: 0.3;
    }
}

.page2 .center img{
    width: 100%;
}
.p82{
    -webkit-animation: fadeInUp 2s 3.5s both;
}
.p83{
    -webkit-animation: fadeInUp 2s 3s both;
}
.p84{
    -webkit-animation: fadeInRight 2s 2.5s both;
}
.p85{
    -webkit-animation: fadeInLeft 2s 2s both;
}
.p86{
    -webkit-animation: fadeInUp 1.5s 1.5s both;
}
.swiper-slide{
    background: url("../img/bg-sw.png") no-repeat;
    background-size: 100% 100%;
}
.p1-1{
    position: absolute;
    right: 0;
    top: 0;
    -webkit-animation: p1-1 12s linear infinite;
    -webkit-transform-origin: 100% 40%;
}
@-webkit-keyframes p1-1 {
    from{
        opacity: 0;
        -webkit-transform: scale(1);
    }
    15%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    to{
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}
.s1 .page{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.pl1{
    position: absolute;
    bottom: 3rem;
    right: 1.5rem;
    -webkit-animation-name: pl1;
}
@-webkit-keyframes pl1 {
    from{
        opacity: 0;
        -webkit-transform: translate(-2rem, 1rem) rotateZ(15deg);
    }
    to{
        opacity: 1;
        -webkit-transform: translate(0)  rotateZ(0deg);
    }
}
.ts1{
    position: absolute;
    bottom: 2rem;
    right: 5.5rem;
    width: 1.3rem;
    height: 2rem;
}
.t1{
    -webkit-animation: t1 3s linear infinite;
}
@-webkit-keyframes t1 {
    from{
        opacity: 0;
        -webkit-transform: translateX(0);
    }
    15%{
        opacity: 1;
    }
    85%{
        opacity: 1;
    }
    to{
        opacity: 0;
        -webkit-transform: translateX(-3rem);
    }
}
.s2{
    background: url("../img/bg2-1.png") no-repeat;
    background-size: 100% 100%;
}

.p2-1{
    position: absolute;
    left: 1rem;
    top: 2rem;
}
.p2-2{
    position: absolute;
    right: 1rem;
    top: 3rem;
}
.pl2{
    position: absolute;
    bottom: 0rem;
    left: 1.5rem;
    -webkit-animation-name: pl2;
}
@-webkit-keyframes pl2 {
    from{
        opacity: 0;
        -webkit-transform: translate(-2rem, 1rem) rotateZ(15deg);
    }
    to{
        opacity: 1;
        -webkit-transform: translate(0)  rotateZ(0deg);
    }
}
.ts2{
    position: absolute;
    bottom: 1rem;
    left: 10.5rem;
    width: 1.3rem;
    height: 2rem;
}

.pl4{
    position: absolute;
    top: 1rem;
    left: 2.5rem;
    -webkit-animation-name: pl4;
}
@-webkit-keyframes pl4 {
    from{
        opacity: 0;
        -webkit-transform: translate(-2rem, -1rem) rotateZ(-15deg);
    }
    to{
        opacity: 1;
        -webkit-transform: translate(0)  rotateZ(0deg);
    }
}
.ts4{
    position: absolute;
    top: 2rem;
    right: 5.5rem;
    width: 1.3rem;
    height: 2rem;
}
.p5-1{
    position: absolute;
    top: 0;
    left: 0;
}
.p5-2{
    position: absolute;
    top: 52%;
    left: 0;
}
.p5-3{
    position: absolute;
    top: 68%;
    left: 0;
}
.p5-4{
    position: absolute;
    top: 9.9rem;
    left: 0;
    pointer-events: none;
}
.p5-5{
    position: absolute;
    top: 34%;
    right: 3%;
}