.banner {
    position: relative;
    width: 100%;
}

.banner__item {
    position: absolute;
}

.banner__BG {
    width: 100%;
}




.banner__title {
    width: 40%;
    top: 12.5%;
    right: 15%;
    opacity: 0;
    transform: scale(0.15);
    transition-duration: .6s;
    transition-delay: .3s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.show .banner__title {
    opacity: 1;
    transform: scale(1);
    animation-name: pulse;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}




.banner__chineseZodiac {
    width: 27.5%;
    bottom: -15%;
    left: 20%;
    opacity: 0;
    transition-duration: .6s;
    transition-delay: .6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.show .banner__chineseZodiac {
    bottom: -10%;
    opacity: 1;
}




.banner__subtitle {
    width: 20%;
    bottom: -5%;
    right: 29%;
    opacity: 0;
    transform: scale(0.15);
    transition-duration: .6s;
    transition-delay: .3s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.show .banner__subtitle {
    opacity: 1;
    transform: scale(1);
}




.banner__hanabi__1 {
    width: 10%;
    bottom: 0;
    right: 15%;
    opacity: 0;
    transition-duration: .6s;
    transition-delay: .5s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.show .banner__hanabi__1 {
    bottom: 15%;
    opacity: 1;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}



.banner__hanabi__2 {
    width: 10%;
    top: 0;
    left: 35%;
    opacity: 0;
    transition-duration: .6s;
    transition-delay: .5s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.show .banner__hanabi__2 {
    top: 10%;
    opacity: 1;
    animation-name: pulse;
    animation-duration: 1s;
    animation-delay: .5s;
    animation-iteration-count: infinite;
}



@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(0);
    }
}



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

    .banner {
        overflow: hidden;
    }

    .banner__BG {
        width: 220%;
        margin: 0 -60%;
    }
    
    
    .banner__title {
        width: 80%;
        top: 10%;
        right: -10%;
    }

    .show .banner__title {
        width: 80%;
        top: 10%;
        right: -10%;
        animation: none;
    }



    .banner__chineseZodiac {
        width: 42.5%;
        bottom: -10%;
        left: -2.5%;
    }

    .show .banner__chineseZodiac {
        bottom: 5%;
    }




    .banner__subtitle {
        width: 45%;
        bottom: 5%;
        right: 16.5%;
    }





    .banner__hanabi__1 {
        width: 10%;
        bottom: 0;
        right: 15%;
        opacity: 0;
        transition-duration: .6s;
        transition-delay: .5s;
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .show .banner__hanabi__1 {
        bottom: 15%;
        opacity: 1;
        animation-name: pulse;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }



    .banner__hanabi__2 {
        width: 10%;
        top: 0;
        left: 35%;
        opacity: 0;
        transition-duration: .6s;
        transition-delay: .5s;
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .show .banner__hanabi__2 {
        top: 10%;
        opacity: 1;
        animation-name: pulse;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-iteration-count: infinite;
    }
}