@charset "utf-8";
/* 煙火1*/
  #fireworks{
            position: absolute;
            left: 20%;
            margin-left: -250px;
            bottom: 95%;
            margin-bottom: -180px;
            transform: scale(0);
            animation: fireworks 5s 3s;
            z-index:97;
        }

        @keyframes fireworks {
            0%{
                transform: scale(0.6);
            }
            80%{
                transform: scale(1);
            }
            100%{
                opacity: 0;
            }
        }
        #firecracker{
            position: absolute;
            left: 10%;
            bottom: 0%;
            margin-left: -4px;
            animation: firecracker 3s forwards;
            z-index:97;
        }

        @keyframes firecracker {
            0%{
                transform: scale(1);
                bottom: 0%;
            }
            100%{
                bottom: 60%;
                transform: scale(0);
            }
        }
 /* 煙火2*/       
        #fireworks2{
            position: absolute;
            right: 20%;
            margin-right: -250px;
            bottom: 70%;
            margin-bottom: -180px;
            transform: scale(0);
            animation: fireworks 5s 3s;
            z-index:97;
        }

        @keyframes fireworks2 {
            0%{
                transform: scale(0.6);
            }
            80%{
                transform: scale(1);
            }
            100%{
                opacity: 0;
            }
        }
        #firecracker2{
            position: absolute;
            right: 10%;
            bottom: 0%;
            margin-left: -4px;
            animation: firecracker 3s forwards;
            z-index:97;
        }

        @keyframes firecracker2 {
            0%{
                transform: scale(1);
                bottom: 0%;
            }
            100%{
                bottom: 60%;
                transform: scale(0);
            }
        }
/* 煙火3*/
         #fireworks3{
           position: absolute;
            left: 25%;
            margin-left: -250px;
            bottom: 80%;
            margin-bottom: -180px;
            transform: scale(0);
            animation: fireworks 7s 5s;
            z-index:97;
        }

        @keyframes fireworks3 {
            0%{
                transform: scale(0);
            }
            80%{
                transform: scale(1);
            }
            100%{
                opacity: 0;
            }
        }
        #firecracker3{
            position: absolute;
            left: 10%;
            bottom: 0%;
            margin-left: -4px;
            animation: firecracker 3s forwards;
            z-index:97;
        }

        @keyframes firecracker3 {
            0%{
                transform: scale(1);
                bottom: 0%;
            }
            100%{
                bottom: 60%;
                transform: scale(0);
            }
        }
/* 煙火4*/
  #fireworks4{
            position: absolute;
            right: 10%;
            margin-left: -250px;
            bottom: 95%;
            margin-bottom: -180px;
            transform: scale(0);
            animation: fireworks 7s 5s;
            z-index:97;
        }

        @keyframes fireworks4 {
            0%{
                transform: scale(0.6);
            }
            80%{
                transform: scale(1);
            }
            100%{
                opacity: 0;
            }
        }
        #firecracker4{
            position: absolute;
            left: 15%;
            bottom: 0%;
            margin-left: -4px;
            animation: firecracker 3s forwards;
            z-index:97;
        }

        @keyframes firecracker4 {
            0%{
                transform: scale(1);
                bottom: 0%;
            }
            100%{
                bottom: 60%;
                transform: scale(0);
            }
        }
 /* 煙火5*/       
        #fireworks5{
            position: absolute;
            left: 40%;
            margin-left: -250px;
            bottom: 80%;
            margin-bottom: -180px;
            transform: scale(0);
            animation: fireworks 5s 3s;
            z-index:97;
        }

        @keyframes fireworks5 {
            0%{
                transform: scale(0);
            }
            80%{
                transform: scale(1);
            }
            100%{
                opacity: 0;
            }
        }
        #firecracker5{
            position: absolute;
            left: 40%;
            bottom: 0%;
            margin-left: -4px;
            animation: firecracker 3s forwards;
            z-index:97;
        }

        @keyframes firecracker5 {
            0%{
                transform: scale(1);
                bottom: 0%;
            }
            100%{
                bottom: 60%;
                transform: scale(0);
            }
        }
/* 煙火6*/
         #fireworks6{
            position: absolute;
            left: 20%;
            margin-left: -250px;
            bottom: 70%;
            margin-bottom: -180px;
            transform: scale(0);
            animation: fireworks 5s 3s;
            z-index:97;
        }

        @keyframes fireworks6 {
            0%{
                transform: scale(0.6);
            }
            80%{
                transform: scale(1);
            }
            100%{
                opacity: 0;
            }
        }
        #firecracker6{
            position: absolute;
            left: 10%;
            bottom: 0%;
            margin-left: -4px;
            animation: firecracker 3s forwards;
            z-index:97;
        }

        @keyframes firecracker6 {
            0%{
                transform: scale(1);
                bottom: 0%;
            }
            100%{
                bottom: 60%;
                transform: scale(0);
            }
        }