html{
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    height: 100%;
}
body { height: 100%; }
svg { overflow: visible !important; }
.wrap { min-height: 100%; height: 100%; }
.wrap--main { padding-top: 0; }
.wrap--main .main{
    overflow-x: auto; overflow-y: hidden;
    z-index: 1; padding: 0; position: relative;
    width: auto; height: 100%; min-height: 680px;
    background-image: url(/child/img/main/bg.png);
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
}
.wrap--main .footer {
    display: none;
}

.wrap--main #text{
    display: none;
}

.main-spot{
    overflow: hidden;
    position: relative;
    margin: auto;
    padding: 0;
    max-width: 1920px;
    min-width: 1280px;
    max-height: 960px;
    min-height: 660px;
    height: 100%;
}
.main-spot__background{
    max-width: 1920px;
    min-width: 1280px;
    width: 100%;
    max-height: 960px;
    min-height: 660px;
    height: 100%;
}
@media(max-width:1200px){
    .wrap--main { padding-top: 0; }
}
@media(max-width:768px){

}


/* Top */
.main-spot-bg::before{
    content: "";
    display: block;
    position: absolute;
    width: 834px;
    height: 846px;
    background-image: url(/child/img/main/logo-light-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    left: 50%;
    top: 100px;
    opacity: 0;
    transform: translate(-50%, 0);
    z-index: -1;
    animation: lightBg ease 1.7s 1s forwards;
}

@keyframes lightBg {
    0%{
        opacity: 0;
        top: 100px;
    }
    100%{
        opacity: 1;
        top: 0;
    }
}

.header-logo{
    z-index: 10000; position: absolute; top: 68px; right: 0; left: 0; margin: auto; width: 202px; height: 37px; background-image: url('/child/img/ci.svg');
    opacity: 0; transform: translateY(100px);
    animation: logo ease 2.1s 1.4s forwards;
}
.header-logo a { display: block; width: 100%; height: 100%; }
.header-logo.dark { background-image: url('/child/img/ci.svg'); }

.header-menu-button{
    z-index: 10000; position: absolute; top: 194px; right: 0; left: 0; margin: auto; width: 86px; height: 67px; -webkit-transition: all ease-out .15s; transition: all ease-out .15s;
    animation: menu 1s ease 2s both; animation: logo ease 1.7s 1.2s forwards; opacity: 0; transform: translateY(100px);
}

@keyframes logo {
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

.header-menu-button .button { position: relative; padding: 0; width: 100%; height: 100%; }

.header-button{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/child/img/main/header-menu_button.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all ease-in-out .5s;
    transform: rotateY(0);
    backface-visibility: hidden;
}

.header-button-hover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/child/img/main/header-menu_button-on.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all ease-in-out .5s;
    transform: rotateY(-180deg);
    backface-visibility: hidden;
}

.header-menu-button .button[aria-pressed="true"] .header-button{
    transform: rotateY(540deg);
}

.header-menu-button .button[aria-pressed="true"] .header-button-hover{
    transform: rotateY(360deg);
}

.header-menu{
    z-index: 9999; position: absolute; top: 280px; right: 0; left: 0;
    margin: auto; max-width: 1300px; width: 100%; max-height: 0;
    background: #ffffff; box-shadow: 0 20px 25px rgba(36, 36, 36, 0.3);
    transform: translateY(-50px);
    -webkit-transition: all ease .35s; transition: all ease .35s;
    visibility: hidden;
    opacity: 0;
}
.header-menu__inner { padding: 70px 100px 60px;}
.header-menu .customer-menu { position: absolute; top: 38px; right: 50px; }
.header-menu__columns { display: flex; margin: 0 -12px; }
.header-menu__column { flex: 1; margin: 0 12px; }
.header-menu__title { display: block; margin-bottom: 10px; padding-bottom: 20px; line-height: 1; text-align: center; font-size: 18px; font-weight: 600; border-bottom: 2px solid #ff9597; }
.header-menu__link { display: inline-block; margin-top: 12px; padding: 2px 2px 2px 20px; font-size: 16px; color: #999999; font-weight: 300; }

.header-menu--opened{
    max-height: 505px;
    -webkit-transform: translateY(0); transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.notice-wrap{
    width: 300px;
    height: 36px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translate(-50%, 100px);
    padding: 0 16px;
    border-radius: 18px;
    background-color: #fff;
    border: 2px solid #ff9597;
    color: #777;
    font-size: 18px;
    z-index: 9999;
    opacity: 0;
    animation: notice ease 1.9s 1.3s forwards;
}

@keyframes notice {
    0%{
        opacity: 0;
        transform: translate(-50%, 100px);
    }
    100%{
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media(min-width:1025px){
    /* .header-menu-button:hover { box-shadow: 0px 0px 10px 0px rgba(36,36,36,.35); } */

    .header-menu__link:hover { color: #333333; }

    .header-menu{
        border-radius: 20px;
    }
}
@media(max-width:1024px){
    .header-logo { top: 30px; left: 30px; right: auto; width: 188px; height: 26px; background-size: auto 24px; }
    .header-menu-button { top: 20px; right: 30px; left: auto; width: 54px; height: 42px;}
    .header-menu-button::before { content: none; }
    .header-menu-button .button span { -webkit-transform: scale(.8); transform: scale(.8); }

    .header-menu { overflow-x: hidden; overflow-y: auto; position: fixed; top: 0; height: 100%; }
    .header-menu__inner { padding: 100px 30px 30px; }
    .header-menu .customer-menu { top: 90px; left: 30px; right: auto; margin-top: 0; }
    .header-menu .customer-menu a { font-size: 12px; }
    .header-menu .customer-menu a img { -webkit-transform: scale(.9); transform: scale(.9); }

    .header-menu__columns { flex-direction: column; margin: 0; }
    .header-menu__column { flex: auto; margin: 0 0 45px; width: 100%; }
    .header-menu__title { margin-bottom: 5px; padding-bottom: 15px; text-align: left; font-size: 15px; }
    .header-menu__link { padding: 2px; font-size: 15px; color: #333333; }

    .header-menu--opened { max-height: 100vh; }

    .notice-wrap{
        width: 250px;
        height: 32px;
        top: 114px;
        font-size: 16px;
    }
}
@media(max-width:768px){

}


/* confetti */
.confetti-conatiner{
    z-index: 10001;
    position: absolute;
    top: 194px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 86px;
    height: 67px;
    opacity: 0;
    animation: confettiFade 0.1s 3s forwards;
}

@media (max-width: 1024px){
    .confetti-conatiner{
        top: 146px;
    }
}


@keyframes confettiFade {
    0%{
        opacity: 0;
    }
    99%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.confetti-wrap{
    width: 100%;
    height: 100%;
    position: relative;
}

.confetti-left,
.confetti-right{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.confetti-right{
    transform: scaleX(-1);
}

.confetti{
    position: absolute;
    top: 25px;
    left: 30px;
    opacity: 0;
}

.confetti1{
    animation: confetti1 0.5s 3s ease-out forwards;
    transform: rotate(180deg);
}

@keyframes confetti1 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    70%{
        top: 16
    }
    100%{
        opacity: 1;
        top: 31px;
        left: -56px;
        transform: rotate(0);
    }
}

.confetti2{
    animation: confetti2 0.4s 3s ease-out forwards;
    transform: rotate(45deg);
}

@keyframes confetti2 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    50%{
        top: 20px;
    }
    100%{
        opacity: 1;
        top: 38px;
        left: -46px;
        transform: rotate(0);
    }
}

.confetti3{
    animation: confetti3 0.5s 3s ease-out forwards;
    transform: rotate(30deg);
}

@keyframes confetti3 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    30%{
        top: 40px;
        transform: rotate(0);
    }
    100%{
        opacity: 1;
        top: 64px;
        left: -13px;
    }
}

.confetti4{
    animation: confetti4 0.5s 3s ease-out forwards;
    transform: rotate(270deg);
}

@keyframes confetti4 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    50%{
        top: 50px;
    }
    100%{
        opacity: 1;
        top: 95px;
        left: -23px;
        transform: rotate(0);
    }
}

.confetti5{
    animation: confetti5 0.5s 3s ease-out forwards;
    transform: rotate(-360deg);
}

@keyframes confetti5 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    50%{
        top: 50px;
    }
    100%{
        opacity: 1;
        top: 88px;
        left: -69px;
        transform: rotate(0);
    }
}

.confetti6{
    animation: confetti6 0.5s 3s ease-out forwards;
    transform: rotate(210deg);
}

@keyframes confetti6 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    50%{
        top: -10px;
        transform: rotate(100deg);
    }
    100%{
        opacity: 1;
        top: 33px;
        left: -142px;
        transform: rotate(0);
    }
}

.confetti7{
    animation: confetti7 0.5s 3s ease-out forwards;
    transform: rotate(450deg);
}

@keyframes confetti7 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    60%{
        top: 40px;
        transform: rotate(0);
    }
    100%{
        opacity: 1;
        top: 105px;
        left: -120px;
    }
}

.confetti8{
    animation: confetti8 0.5s 3s ease-out forwards;
    transform: rotate(360deg);
}

@keyframes confetti8 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    40%{
        top: 60px;
    }
    100%{
        opacity: 1;
        top: 111px;
        left: -86px;
        transform: rotate(0);
    }
}

.confetti9{
    animation: confetti9 0.5s 3s ease-out forwards;
    transform: rotate(-70deg);
}

@keyframes confetti9 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    50%{
        top: 16px;
    }
    60%{
        transform: rotate(0);
    }
    100%{
        opacity: 1;
        top: 144px;
        left: -80px;
    }
}

.confetti10{
    animation: confetti10 0.5s 3s ease-out forwards;
    transform: rotate(-360deg);
}

@keyframes confetti10 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    50%{
        top: 12px;
    }
    100%{
        opacity: 1;
        top: 155px;
        left: -144px;
        transform: rotate(0);
    }
}

.confetti11{
    animation: confetti11 0.5s 3s ease-out forwards;
}

@keyframes confetti11 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
    }
    20%{
        top: 40px;
    }
    100%{
        opacity: 1;
        top: 78px;
        left: -169px;
    }
}

.confetti12{
    animation: confetti12 0.5s 3s ease-out forwards;
    transform: rotate(210deg);
}

@keyframes confetti12 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
        transform: rotate(210deg);
    }
    60%{
        top: 70px;
    }
    opacity: 1;
    100%{
        top: 97px;
        left: -187px;
        transform: rotate(0);
    }
}

.confetti13{
    animation: confetti13 0.5s 3s ease-out forwards;
    transform: rotate(-470deg);
}

@keyframes confetti13 {
    0%{
        opacity: 0;
        top: 25px;
        left: 30px;
        transform: rotate(-470deg);
    }
    40%{
        top: 50px;
    }
    100%{
        opacity: 1;
        top: 189px;
        left: -173px;
        transform: rotate(0);
    }
}

.confetti-star{
    position: absolute;
    display: block;
    top: 52px;
    left: -187px;
    max-width: unset;
    opacity: 0;
    animation: confettiStar 0.8s 3.8s ease-out forwards;
}

@keyframes confettiStar {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.main-popup{
    animation: main-popup .3s ease 2.5s forwards;
    opacity: 0;
}
@keyframes main-popup {
    from { opacity: 0; }
    to { opacity: 1; }
}

.main-spot-con{
    background-image: url(/child/img/main/ground.png);
    background-position: center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: 0;
    animation: mainFade 3s ease 0.5s forwards;
}

@keyframes mainFade {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.main--link-group{
    width: 100%;
    height: 100%;
    position: relative;
    animation: box 0.8s 3s ease-out forwards;
}

.main--link-group::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(/child/img/main/ground-obj.png);
    background-position: center bottom;
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: 1;
}

.main--link-wrap{
    position: absolute;
    width: 17.3%;
    max-width: 315px;
}

.main--link{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
}

.main--link-button-off,
.main--link-button-on,
.main--link-button-obj{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
}

.main--link-button-off{
    z-index: 1;
    opacity: 1;
    animation: buttonOff 0.1s 3.7s ease-out forwards;
}

.main--link-button-on{
    z-index: 2;
    opacity: 0;
    animation: buttonOn 0.7s 3s ease-out forwards;
}

.main--link-button-obj{
    z-index: 3;
    transform: scale(0);
    top: 20px;
    opacity: 0;
    animation: buttonObj 0.7s 3s ease-out forwards;
}

.main--link::before{
    content: "";
    width: 100%;
    height: calc(100% + 8px);
    background-image: url(/child/img/main/button/sd.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.spot--button{
    display: block;
    position: absolute;
    z-index: 5;
    bottom: 300px;
    left: 50%;
    transform: translate(-50%, 30px);
    pointer-events: none;
    opacity: 0;
    transition: all ease .3s;
    max-width: unset;
}

.main--link-wrap1{
    bottom: 26.25%;
    left: 14.95%;
    height: 42.8%;
    z-index: 2;
}
.main--link-wrap1 .main--link-button-off{
    background-image: url(/child/img/main/button/button1-off.svg);
}
.main--link-wrap1 .main--link-button-on{
    background-image: url(/child/img/main/button/button1-on.svg);
}
.main--link-wrap1 .main--link-button-obj{
    background-image: url(/child/img/main/button/button1-obj.svg);
}

.main--link-wrap2{
    bottom: 10.62%;
    left: 28.8%;
    height: 40.2%;
    z-index: 3;
}
.main--link-wrap2 .main--link-button-off{
    background-image: url(/child/img/main/button/button2-off.svg);
}
.main--link-wrap2 .main--link-button-on{
    background-image: url(/child/img/main/button/button2-on.svg);
}
.main--link-wrap2 .main--link-button-obj{
    background-image: url(/child/img/main/button/button2-obj.svg);
}

.main--link-wrap3{
    bottom: 26.25%;
    left: 50%;
    transform: translate(-50%, 0);
    height: 38.85%;
    z-index: 2;
}
.main--link-wrap3 .main--link-button-off{
    background-image: url(/child/img/main/button/button3-off.svg);
}
.main--link-wrap3 .main--link-button-on{
    background-image: url(/child/img/main/button/button3-on.svg);
}
.main--link-wrap3 .main--link-button-obj{
    background-image: url(/child/img/main/button/button3-obj.svg);
}

.main--link-wrap4{
    bottom: 10.62%;
    right: 28.8%;
    height: 44.79%;
    z-index: 3;
}
.main--link-wrap4 .main--link-button-off{
    background-image: url(/child/img/main/button/button4-off.svg);
}
.main--link-wrap4 .main--link-button-on{
    background-image: url(/child/img/main/button/button4-on.svg);
}
.main--link-wrap4 .main--link-button-obj{
    background-image: url(/child/img/main/button/button4-obj.svg);
}

.main--link-wrap5{
    bottom: 26.25%;
    right: 14.95%;
    height: 36.15%;
    z-index: 2;
}
.main--link-wrap5 .main--link-button-off{
    background-image: url(/child/img/main/button/button5-off.svg);
}
.main--link-wrap5 .main--link-button-on{
    background-image: url(/child/img/main/button/button5-on.svg);
}
.main--link-wrap5 .main--link-button-obj{
    background-image: url(/child/img/main/button/button5-obj.svg);
}

.main--link-wrap4 .main--link::after{
    content: "";
    display: block;
    position: absolute;
    width: 8.4%;
    height: 19.8%;
    background-image: url(/child/img/main/button4-after.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    bottom: 12%;
    left: -7%;
}

@keyframes box {
    0%{
        top: 0
    }
    25%{
        top: 30px;
    }
    50%{
        top: -20px;
    }
    75%{
        top: 15px;
    }
    100%{
        top: 0;
    }
}

@keyframes buttonObj {
    0%{
        transform: scale(0);
        top: 20px;
        opacity: 0;
    }
    100%{
        transform: scale(1);
        top: 0px;
        opacity: 1;
    }
}

@keyframes buttonOn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes buttonOff {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@media (min-width: 1025px){
    .main--link:hover .spot--button{
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@media (min-width:1201px){
    .main--link-wrap1{
        min-height: 411px;
    }

    .main--link-wrap2{
        min-height: 386px;
    }

    .main--link-wrap3{
        min-height: 373px;
    }

    .main--link-wrap4{
        min-height: 430px;
    }

    .main--link-wrap5{
        min-height: 347px;
    }
}

@media (max-width: 1200px){

}
@media (max-width: 1024px){

}
@media (max-width: 768px){

}

.star-wrap{
    position: absolute;
    z-index: 4;
    opacity: 0;
    animation: confettiStar 0.8s 3.8s ease-out forwards;
}

.star-wrap1{
    width: 24px;
    height: 29px;
    left: 15.54%;
    bottom: 64%;
}

.star-wrap2{
    width: 16px;
    height: 19px;
    right: 14%;
    bottom: 85%;
}

.star-wrap3{
    width: 20px;
    height: 20px;
    left: 32%;
    bottom: 89%;
}

.star-wrap4{
    width: 8px;
    height: 8px;
    right: 34%;
    bottom: 65%;
}

.star-wrap5{
    width: 6px;
    height: 6px;
    right: 25%;
    bottom: 77%;
}

.star-wrap6{
    width: 20px;
    height: 28px;
    left: 20%;
    bottom: 79%;
}

.star-wrap7{
    width: 24px;
    height: 32px;
    left: 23%;
    bottom: 67%;
}

.star-wrap8{
    width: 30px;
    height: 38px;
    left: 16%;
    bottom: 96%;
}

.star-wrap9{
    width: 17px;
    height: 26px;
    right: 7%;
    bottom: 94%;
}

.star-wrap .star-group{
    position: relative;
    width: 100%;
    height: 100%;
}

.star-wrap .star{
    position: absolute;
}

.star-wrap .star-s15{
    width: 15px;
    height: 15px;
}

.star-wrap .star-s12{
    width: 12px;
    height: 12px;
}

.star-wrap .star-s8{
    width: 8px;
    height: 8px;
}

.star-wrap .star-s6{
    width: 6px;
    height: 6px;
}

.star-wrap .star1{
    top: 0;
    left: 0;
}

.star-wrap .star2{
    bottom: 0;
    right: 0;
}

.star-wrap .star3{
    top: 0;
    right: 0;
}

.star-wrap .star4{
    bottom: 0;
    left: 0;
}

.star-wrap .star5{
    top: 0;
    right: 5px;
}

.star-wrap .star6{
    top: 8px;
    left: 0;
}

.star-wrap .star span{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(/child/img/main/star.svg);
    z-index: 2;
    animation: star ease-in-out 5.5s 6s infinite;
    transform: rotateY(-180deg);
}

@keyframes star {
    0%{
        transform: rotateY(-1080deg);
    }
    30%{
        transform: rotateY(0deg);
    }
    50%{
        transform: rotateY(0deg);
    }
    80%{
        transform: rotateY(1080deg);
    }
    100%{
        transform: rotateY(1080deg);
    }
}

.balloon-conatiner{
    opacity: 0;
    animation: mainFade 1.5s ease 4s forwards;
}

.balloon{
    position: absolute;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
}


.balloon-yellow{
    background-image: url(/child/img/main/balloon-yellow.svg);
}

.balloon-blue{
    background-image: url(/child/img/main/balloon-blue.svg);
}

.balloon-pink{
    background-image: url(/child/img/main/balloon-pink.svg);
}

.balloon1{
    width: 1.77%;
    height: 5.83%;
    min-height: 56px;
    top: 36.56%;
    left: 3.75%;
    animation: ballon 10s ease-out infinite;
}

.balloon2{
    width: 2.29%;
    height: 7.7%;
    min-height: 74px;
    top: 21.45%;
    left: 8.54%;
    animation: ballon 10s 3s ease-out infinite;
}

.balloon3{
    width: 1.2%;
    height: 3.85%;
    min-height: 37px;
    top: 26.25%;
    left: 14.17%;
    animation: ballon 10s 1.8s ease-out infinite;
}

.balloon4{
    width: 2.03%;
    height: 6.87%;
    min-height: 66px;
    top: 19%;
    right: 14.63%;
    animation: ballon 10s 3.5s ease-out infinite;
}

.balloon5{
    width: 1.2%;
    height: 3.85%;
    min-height: 37px;
    top: 29.8%;
    right: 10.26%;
    animation: ballon 10s ease-out infinite;
}

.balloon6{
    width: 2.66%;
    height: 8.96%;
    min-height: 86px;
    top: 26.35%;
    right: 1.67%;
    animation: ballon 10s 1.4s ease-out infinite;
}

@keyframes ballon {
    0%, 90%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-40%);
    }
}

.firecracker-conatiner{
    opacity: 0;
    animation: mainFade 1.5s ease 4s forwards;
}

.firecracker{
    position: absolute;
    transform: scale(0);
    opacity: 0;
}

.firecracker-a1{
    animation: firecracker 8s 5.5s ease infinite;
}

.firecracker-a2{
    animation: firecracker 8s 6.5s ease infinite;
}

.firecracker-s30{
    width: 1.95%;
    height: auto;
}

.firecracker-s40{
    width: 2.45%;
    height: auto;
}

.firecracker-s70{
    width: 3.85%;
    height: auto;
}

.firecracker-s100{
    width: 5.57%;
    height: auto;
}

.firecracker1{
    left: 0.93%;
    top: 38.64%;
}

.firecracker2{
    left: 1.61%;
    top: 16.98%;
}

.firecracker3{
    left: 7.65%;
    top: 32.5%;
}

.firecracker4{
    left: 16.78%;
    top: 20.2%;
}

.firecracker5{
    left: 22.4%;
    top: 23.86%;
}

.firecracker6{
    right: 17.43%;
    top: 17.19%;
}

.firecracker7{
    right: 15.63%;
    top: 25%;
}

.firecracker8{
    right: 4.53%;
    top: 17.81%;
}

.firecracker9{
    right: 1.78%;
    top: 36.35%;
}

@keyframes firecracker {
    0%{
        opacity: 0;
        transform: scale(0);
    }
    8%{
        opacity: 1;
        transform: scale(1);
    }
    50%{
        transform: scale(1);
        opacity: 1;
    }
    70%{
        transform: scale(1);
        opacity: 0;
    }
    100%{
        transform: scale(0);
        opacity: 0;
    }
}