html,
body {
    position: relative;
    font-family: SF Pro, sans-serif;
    height: 100vh;
    width: 100%;
    margin: 0;
    background-color: #000000;
}

img {
    max-width: 100%;
    display: block;
}

.c-white {
    color: #fff;
}

.c-yellow {
    color: #ffe81a;
}

.background,
.background .base {
    position: relative;
    display: block;
}

.background .back {
    position: relative;
    display: block;
    width: 100%;
    z-index: 0;
}

.background .front {
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.header {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 18.32rem;
    z-index: 100;
    top: .3rem;
    left: .5rem;
}

.header img {
    position: relative;
    display: block;
    width: 3.6rem;
}

.header-nav {
    position: relative;
    display: flex;
    gap: 10px;
}

.header-nav a {
    position: relative;
    display: block;
    width: 1.5rem;
    line-height: .5rem;
    border-radius: .5rem;
    font-size: .21rem;
    font-weight: 700;
    text-align: center;
    border: none;
    cursor: pointer;
}

.sign-in-btn {
    background: white;
    color: #ff0000;
}

.sign-up-btn {
    background: linear-gradient(89.62deg, #ff1f1f 25.29%, #ff1360 43.88%, #fe01b2 97.88%);
    color: white;
}

.main {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: auto;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    padding-top: 3.33rem;
    padding-left: .74rem;
}

.description {
    position: relative;
    margin-bottom: .65rem;
}

.description img {
    width: 8.29rem;
}

.btn-download {
    animation: zoomInOut 5s infinite;
    margin-bottom: .8rem;
}

.btn-download img {
    width: 4rem;
}

.icons {
    position: relative;
    margin-bottom: .24rem;
}

.icons img {
    width: 1.51rem;
}

.download {
    position: relative;
    display: flex;
    gap: .15rem;
    margin-bottom: .4041rem;
}

.download img {
    width: 1.7143rem;
}

.group-logo img {
    width: 5.1015rem;
}

@media (max-width: 1024px) {
    html,
    body {
        height: auto;
        min-height: 100vh;
    }

    .web-view {
        display: none;
    }

    .background,
    .background .base,
    .background .base .h5-view {
        height: 100%;
        min-height: 100vh;
    }

    .background .base {
        min-height: 13.34rem;
    }

    .background .back {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top center;
    }

    .background .front {
        object-fit: cover;
    }

    .background .front.top {
        top: 0;
        bottom: 0;
        height: 3.86rem;
        object-position: top;
    }
    .background .front.btm {
        height: 9.16rem;
        top: auto;
        bottom: 0;
        object-position: bottom;
    }

    .header {
        width: 6.98rem;
        top: .2rem;
        left: .32rem;
    }

    .header img {
        width: 2.96rem;
    }

    .header-nav a {
        width: 1.4rem;
        line-height: .6rem;
        font-size: .22rem;
    }

    .main {
        padding-top: 3.5rem;
        padding-bottom: .7824rem;
        padding-left: 0;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
    }

    .description {
        margin-bottom: auto;
    }

    .description img {
        width: 6.84rem;
    }

    .btn-download {
        margin-bottom: .52rem;
    }

    .btn-download img {
        width: 5.3102rem;
    }

    .download {
        gap: .2rem;
        margin-bottom: .2rem;
    }

    .download img {
        width: 1.72rem;
    }
    .group-logo img {
        width: 6.24rem;
    }
}

@media (min-width: 1025px) {
    .h5-view {
        display: none;
    }

    .background .front {
        height: 100%;
    }
}


.firework-container {
	position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.firework-container .stage-container {
    overflow: hidden;
    box-sizing: initial;
}
  
.firework-container .canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-filter 0.3s;
    transition: -webkit-filter 0.3s;
    transition: filter 0.3s;
    transition: filter 0.3s, -webkit-filter 0.3s;
}
.firework-container .canvas-container canvas {
    position: absolute;
    mix-blend-mode: lighten;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}