*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #001c27;
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.container{
    background-color: transparent;
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-self: flex-start;
    overflow: hidden;
    overflow-y: scroll;
}

a{
    text-decoration: none;
}

.card{
    position: relative;
    background-color: #003449;
    width: 100%;
    height: auto;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.container-data{
    width: 100%;
}

.container-data .grupo{
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.container-options{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 5px;
    text-decoration: none;
}

.name-grupo{
    background-color: rgb(0, 75, 161);
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
}

.preview{
    position: relative;
    background-color: rgb(0, 75, 161);;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 2px;
    z-index: 1;
}

.preview path{
    fill: #fff;
}

.view-lightstick{
    background-color: #001c27;
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 10px;
    opacity: 0;
}

.ck-input{
    display: none;
}

.img-lightstickView{
    width: 55px;
    height: auto;
    object-fit: cover;
}

#prev-aespa:has(#ck-aespa:checked){
    opacity: 1;
}

#prev-bp:has(#ck-blackpink:checked){
    opacity: 1;
}

#prev-gidle:has(#ck-gidle:checked){
    opacity: 1;
}

#prev-newjeans:has(#ck-newjeans:checked){
    opacity: 1;
}

#prev-twice:has(#ck-twice:checked){
    opacity: 1;
}

#prev-straykids:has(#ck-straykids:checked){
    opacity: 1;
}

#prev-bts:has(#ck-bts:checked){
    opacity: 1;
}

/********************************* NEWJEANS ***********************************/

.container-lightstick-newjeans{
    position: relative;
    background-color: transparent;
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-lightstick-newjeans svg{
    width: 95%;
    height: auto;
    margin-bottom: -55px;
    z-index: 0;
}

.container-lightstick-newjeans svg path{
    fill: #ffffffc4;
}

.bottons{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
    top: 45%;
    margin-right: 5px;
}

.bottons svg{
    width: 50px;
    height: 50px;
    margin-bottom: -45px;
    filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.3));
    cursor: pointer;
    z-index: 1;
}

.bottons svg path{
    fill: #fff;
}

.bottons .btnCircle{
    background-color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 1px 1px 10px -1px rgba(0,0,0,0.4);
    cursor: pointer;
    z-index: 1;
}

.base{
    width: 32%;
    height: auto;
    margin-left: -10px;
    z-index: 1;
}

.eyes{
    position: absolute;
    width: 100%;
    top: 25%;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 110px;
}

.eye{
    background-color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 3;
}

.corazon_estrella,
.newjeans_l, .newjeans_k,
.minji_l, .minji_k,
.hanni_l, .hanni_k,
.danielle_l, .danielle_k,
.haerin_l, .haerin_k,
.hyein_l, .hyein_k{
    position: absolute;
    width: 100%;
    top: 25%;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 100px;
    z-index: 3;
}

.coes_lat,
.newjeans_lat, .newjeans_kor,
.minji_lat, .minji_kor,
.hanni_lat, .hanni_kor,
.danielle_lat, .danielle_kor,
.haerin_lat, .haerin_kor,
.hyein_lat, .hyein_kor{
    width: 45px;
    height: 45px;
    z-index: 3;
}

@keyframes newjeans-mode-1 {
    0%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ffffff99) drop-shadow(0px 8px 120px #ffffff99); 
    }

    50%{
        filter: none;
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ffffff99) drop-shadow(0px 8px 120px #ffffff99);
    }
}

@keyframes newjeans-mode-2 {
    0%{
        filter: drop-shadow(0px 2px 10px #1eff00cc) drop-shadow(0px 5px 50px #1eff00cc) drop-shadow(0px 8px 80px #1eff0099) drop-shadow(0px 8px 120px #1eff0099); 
    }

    50%{
        filter: none;
    }

    100%{
        filter: drop-shadow(0px 2px 10px #1eff00cc) drop-shadow(0px 5px 50px #1eff00cc) drop-shadow(0px 8px 80px #1eff0099) drop-shadow(0px 8px 120px #1eff0099);
    }
}

@keyframes newjeans-mode-3 {
    0%{
        filter: drop-shadow(0px 2px 10px #ff00eacc) drop-shadow(0px 5px 50px #ff00eacc) drop-shadow(0px 8px 80px #ff00ea99) drop-shadow(0px 8px 120px #ff00ea99); 
    }

    50%{
        filter: none;
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ff00eacc) drop-shadow(0px 5px 50px #ff00eacc) drop-shadow(0px 8px 80px #ff00ea99) drop-shadow(0px 8px 120px #ff00ea99);
    }
}

@keyframes newjeans-mode-4 {
    0%{
        filter: drop-shadow(0px 2px 10px #0059ffcc) drop-shadow(0px 5px 50px #0059ffcc) drop-shadow(0px 8px 80px #0059ff99) drop-shadow(0px 8px 120px #0059ff99); 
    }

    50%{
        filter: none;
    }

    100%{
        filter: drop-shadow(0px 2px 10px #0059ffcc) drop-shadow(0px 5px 50px #0059ffcc) drop-shadow(0px 8px 80px #0059ff99) drop-shadow(0px 8px 120px #0059ff99);
    }
}

@keyframes newjeans-mode-5 {
    0%{
        filter: drop-shadow(0px 2px 10px #ff1100cc) drop-shadow(0px 5px 50px #ff1100cc) drop-shadow(0px 8px 80px #ff110099) drop-shadow(0px 8px 120px #ff110099); 
    }

    50%{
        filter: none;
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ff1100cc) drop-shadow(0px 5px 50px #ff1100cc) drop-shadow(0px 8px 80px #ff110099) drop-shadow(0px 8px 120px #ff110099);
    }
}

@keyframes newjeans-mode-6 {
    0%{
        filter: drop-shadow(0px 2px 10px #ffee00cc) drop-shadow(0px 5px 50px #ffee00cc) drop-shadow(0px 8px 80px #ffee0099) drop-shadow(0px 8px 120px #ffee0099); 
    }

    50%{
        filter: none;
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ffee00cc) drop-shadow(0px 5px 50px #ffee00cc) drop-shadow(0px 8px 80px #ffee0099) drop-shadow(0px 8px 120px #ffee0099);
    }
}

/********************************* AESPA ***********************************/

.container-lightstick-aespa{
    position: relative;
    background-color: transparent;
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-lightstick-aespa .circlelight{
    position: relative;
    background-color: rgba(255, 255, 255, 0.3);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin-bottom: -35px;
    display: flex;
    align-items: end;
    justify-content: center;
}

.container-lightstick-aespa .base{
    width: auto;
    height: 455px;
    margin-left: 0px;
    z-index: 1;
}

.container-lightstick-aespa .circlelight .figure01{
    position: relative;
    width: 80%;
    bottom: 20px;
    left: 0;
}

.container-lightstick-aespa .circlelight .figure02{
    position: absolute;
    width: 80%;
    height: auto;
    bottom: -54px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
}

.container-lightstick-aespa .circlelight .figure02 path{
    fill: #ffffff46;
}

.container-lightstick-aespa .circlelight .figure03{
    position: absolute;
    width: 80%;
    height: auto;
    bottom: 19px;
    left: 50%;
    transform: translateX(-50%);
}

.container-lightstick-aespa .circlelight .aespa-logo{
    position: absolute;
    width: 80%;
    height: auto;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}

.container-lightstick-aespa .circlelight .aespa-logo path{
    fill: #ffffff62;
}

.container-lightstick-aespa .circlelight2{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: end;
    justify-content: center;
}

.bases{
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 45px;
    bottom: 65px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 30px;
}

.basetxt1{
    background-color: #ffffff17;
    width: 4px;
    height: 100%;
}

.basetxt2{
    background-color: #ffffff17;
    width: 4px;
    height: 45%;
}

.container-lightstick-aespa .btnhidden{
    position: absolute;
    background-color: transparent;
    width: 25px;
    height: 25px;
    top: 320px;
    border-radius: 50%;
    z-index: 3;
}

@keyframes mode-aespa {
    0%{
        filter: drop-shadow(
            0px 2px 10px #9a64ffcc
        ) drop-shadow(
            0px 5px 50px #9a64ffcc
        ) drop-shadow(
            0px 8px 80px #9a64ff99
        ) drop-shadow(
            0px 8px 120px #9a64ff99
        ); 
    }

    50%{
        filter: drop-shadow(10px 50px 10px rgba(0,0,0,.2));
    }

    100%{
        filter: drop-shadow(
            0px 2px 10px #9a64ffcc
        ) drop-shadow(
            0px 5px 50px #9a64ffcc
        ) drop-shadow(
            0px 8px 80px #9a64ff99
        ) drop-shadow(
            0px 8px 120px #9a64ff99
        );
    }
}


@keyframes light-aespa {
    0%{
        fill: #ba95ff8a; 
    }

    50%{
        fill: #ffffff11;
    }

    100%{
        fill: #ba95ff8a; 
    }
}

/********************************* (G)I-dle ***********************************/

.container-lightstick-gidle{
    position: relative;
    background-color: transparent;
    width: 80%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-lightstick-gidle .containercircle{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-lightstick-gidle .circlelight{
    position: relative;
    width: 80%;
    margin-bottom: -5px;
}

.container-lightstick-gidle .base{
    width: auto;
    height: 455px;
    margin-left: 3px;
    z-index: 1;
}

.container-lightstick-gidle .figure01{
    position: absolute;
    width: 80%;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
}

.container-lightstick-gidle .figure02{
    position: absolute;
    width: 80%;
    height: auto;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
}

.container-lightstick-gidle .figure02-copy{
    position: absolute;
    width: 80%;
    height: auto;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
}

.container-lightstick-gidle .figure02 path:nth-child(1){/*4*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02 path:nth-child(2){/*2*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02 path:nth-child(3){/*3*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02 path:nth-child(4){/*1*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02 path:nth-child(5){/*1.5*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02-copy path:nth-child(1){/*4*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02-copy path:nth-child(2){/*2*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02-copy path:nth-child(3){/*3*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02-copy path:nth-child(4){/*1*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure02-copy path:nth-child(5){/*1.5*/
    fill: #ffffff46;
}

.container-lightstick-gidle .figure03{
    position: absolute;
    width: 80%;
    height: auto;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
}

.container-lightstick-gidle .circlelight2{
    position: absolute;
    width: 80%;
    margin-bottom: -5px;
}

.container-lightstick-gidle .btnhidden{
    position: absolute;
    background-color: transparent;
    width: 30px;
    height: 30px;
    top: 44%;
    border-radius: 50%;
    z-index: 3;
}

.container-lightstick-gidle .capuchaback{
    position: absolute;
    width: 100%;
    top: -45px;
    opacity: 0;
}

.container-lightstick-gidle .capuchafront{
    position: absolute;
    width: 100%;
    top: -45px;
    z-index: 2;
    opacity: 0;
}

@keyframes mode-gidle {
    0%{
        filter: drop-shadow(
            0px 2px 10px #9a64ffcc
        ) drop-shadow(
            0px 5px 50px #9a64ffcc
        ) drop-shadow(
            0px 8px 80px #9a64ff99
        ) drop-shadow(
            0px 8px 120px #9a64ff99
        ); 
    }

    50%{
        filter: drop-shadow(10px 50px 10px rgba(0,0,0,.2));
    }

    100%{
        filter: drop-shadow(
            0px 2px 10px #9a64ffcc
        ) drop-shadow(
            0px 5px 50px #9a64ffcc
        ) drop-shadow(
            0px 8px 80px #9a64ff99
        ) drop-shadow(
            0px 8px 120px #9a64ff99
        );
    }
}

@keyframes mode-gidle-red {
    0%{
        filter: drop-shadow(
            0px 2px 10px #ff0000ef
        ) drop-shadow(
            0px 5px 50px #ff0000ef
        ) drop-shadow(
            0px 8px 80px #ff000099
        ) drop-shadow(
            0px 8px 120px #ff000099
        ); 
    }

    50%{
        filter: drop-shadow(10px 50px 10px rgba(0,0,0,.2));
    }

    100%{
        filter: drop-shadow(
            0px 2px 10px #ff0000ef
        ) drop-shadow(
            0px 5px 50px #ff0000ef
        ) drop-shadow(
            0px 8px 80px #ff000099
        ) drop-shadow(
            0px 8px 120px #ff000099
        );
    }
}

@keyframes mode-gidle-path01 {
    0%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ba95ff99) drop-shadow(0px 8px 120px #ba95ff99);
        fill: #ffffffa4;
    }

    15%{
        filter: drop-shadow(0px 2px 10px #ffffff8c) drop-shadow(0px 5px 50px #ffffff8c) drop-shadow(0px 8px 80px #ba95ff6c) drop-shadow(0px 8px 120px #ba95ff6c);
        fill: #ffffffa4;
    }

    30%{
        filter: none;
        fill: #ffffff46;
    }

    45%{
        filter: none;
        fill: #ffffff46;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path02 {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: drop-shadow(0px 2px 10px #ffffff8c) drop-shadow(0px 5px 50px #ffffff8c) drop-shadow(0px 8px 80px #ba95ff6c) drop-shadow(0px 8px 120px #ba95ff6c);
        fill: #ffffffa4;
    }

    30%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ba95ff99) drop-shadow(0px 8px 120px #ba95ff99);
        fill: #ffffffa4;
    }

    45%{
        filter: none;
        fill: #ffffff46;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path03 {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: none;
        fill: #ffffff46;
    }

    30%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ba95ff99) drop-shadow(0px 8px 120px #ba95ff99);
        fill: #ffffffa4;
    }

    45%{
        filter: drop-shadow(0px 2px 10px #ffffff8c) drop-shadow(0px 5px 50px #ffffff8c) drop-shadow(0px 8px 80px #ba95ff6c) drop-shadow(0px 8px 120px #ba95ff6c);
        fill: #ffffffa4;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path04 {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: none;
        fill: #ffffff46;
    }

    30%{
        filter: none;
        fill: #ffffff46;
    }

    45%{
        filter: drop-shadow(0px 2px 10px #ffffff8c) drop-shadow(0px 5px 50px #ffffff8c) drop-shadow(0px 8px 80px #ba95ff6c) drop-shadow(0px 8px 120px #ba95ff6c);
        fill: #ffffffa4;
    }

    60%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ba95ff99) drop-shadow(0px 8px 120px #ba95ff99);
        fill: #ffffffa4;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path01-red {
    0%{
        filter: drop-shadow(0px 2px 10px #ff5656cc) drop-shadow(0px 5px 50px #ff5656cc) drop-shadow(0px 8px 80px #ff565699) drop-shadow(0px 8px 120px #ff565699);
        fill: #ff5656cc;
    }

    15%{
        filter: drop-shadow(0px 2px 10px #ff56568c) drop-shadow(0px 5px 50px #ff56568c) drop-shadow(0px 8px 80px #ff56566c) drop-shadow(0px 8px 120px #ff56566c);
        fill: #ff5656cc;
    }

    30%{
        filter: none;
        fill: #ffffff46;
    }

    45%{
        filter: none;
        fill: #ffffff46;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path02-red {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: drop-shadow(0px 2px 10px #ff56568c) drop-shadow(0px 5px 50px #ff56568c) drop-shadow(0px 8px 80px #ff56566c) drop-shadow(0px 8px 120px #ff56566c);
        fill: #ff5656cc;
    }

    30%{
        filter: drop-shadow(0px 2px 10px #ff5656cc) drop-shadow(0px 5px 50px #ff5656cc) drop-shadow(0px 8px 80px #ff565699) drop-shadow(0px 8px 120px #ff565699);
        fill: #ff5656cc;
    }

    45%{
        filter: none;
        fill: #ffffff46;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path03-red {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: none;
        fill: #ffffff46;
    }

    30%{
        filter: drop-shadow(0px 2px 10px #ff5656cc) drop-shadow(0px 5px 50px #ff5656cc) drop-shadow(0px 8px 80px #ff565699) drop-shadow(0px 8px 120px #ff565699);
        fill: #ff5656cc;
    }

    45%{
        filter: drop-shadow(0px 2px 10px #ff56568c) drop-shadow(0px 5px 50px #ff56568c) drop-shadow(0px 8px 80px #ff56566c) drop-shadow(0px 8px 120px #ff56566c);
        fill: #ff5656cc;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path04-red {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: none;
        fill: #ffffff46;
    }

    30%{
        filter: none;
        fill: #ffffff46;
    }

    45%{
        filter: drop-shadow(0px 2px 10px #ff56568c) drop-shadow(0px 5px 50px #ff56568c) drop-shadow(0px 8px 80px #ff56566c) drop-shadow(0px 8px 120px #ff56566c);
        fill: #ff5656cc;
    }

    60%{
        filter: drop-shadow(0px 2px 10px #ff5656cc) drop-shadow(0px 5px 50px #ff5656cc) drop-shadow(0px 8px 80px #ff565699) drop-shadow(0px 8px 120px #ff565699);
        fill: #ff5656cc;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path01-white {
    0%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ffffff99) drop-shadow(0px 8px 120px #ffffff99);
        fill: #ffffffcc;
    }

    15%{
        filter: drop-shadow(0px 2px 10px #ffffff8c) drop-shadow(0px 5px 50px #ffffff8c) drop-shadow(0px 8px 80px #ffffff6c) drop-shadow(0px 8px 120px #ffffff6c);
        fill: #ffffffcc;
    }

    30%{
        filter: none;
        fill: #ffffff46;
    }

    45%{
        filter: none;
        fill: #ffffff46;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path02-white {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: drop-shadow(0px 2px 10px #ffffff8c) drop-shadow(0px 5px 50px #ffffff8c) drop-shadow(0px 8px 80px #ffffff6c) drop-shadow(0px 8px 120px #ffffff6c);
        fill: #ffffffcc;
    }

    30%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ffffff99) drop-shadow(0px 8px 120px #ffffff99);
        fill: #ffffffcc;
    }

    45%{
        filter: none;
        fill: #ffffff46;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path03-white {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: none;
        fill: #ffffff46;
    }

    30%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ffffff99) drop-shadow(0px 8px 120px #ffffff99);
        fill: #ffffffcc;
    }

    45%{
        filter: drop-shadow(0px 2px 10px #ffffff8c) drop-shadow(0px 5px 50px #ffffff8c) drop-shadow(0px 8px 80px #ffffff6c) drop-shadow(0px 8px 120px #ffffff6c);
        fill: #ffffffcc;
    }

    60%{
        filter: none;
        fill: #ffffff46;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes mode-gidle-path04-white {
    0%{
        filter: none;
        fill: #ffffff46;
    }

    15%{
        filter: none;
        fill: #ffffff46;
    }

    30%{
        filter: none;
        fill: #ffffff46;
    }

    45%{
        filter: drop-shadow(0px 2px 10px #ffffff8c) drop-shadow(0px 5px 50px #ffffff8c) drop-shadow(0px 8px 80px #ffffff6c) drop-shadow(0px 8px 120px #ffffff6c);
        fill: #ffffffcc;
    }

    60%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) drop-shadow(0px 5px 50px #ffffffcc) drop-shadow(0px 8px 80px #ffffff99) drop-shadow(0px 8px 120px #ffffff99);
        fill: #ffffffcc;
    }

    90%{
        filter: none;
        fill: #ffffff46;
    }

    100%{
        filter: none;
        fill: #ffffff46;
    }
}

@keyframes light-gidle {
    0%{
        fill: #ba95ff8a; 
    }

    50%{
        fill: #ffffff11;
    }

    100%{
        fill: #ba95ff8a; 
    }
}

/********************************* BlackPink ***********************************/

.container-lightstick-blackpink{
    position: relative;
    background-color: transparent;
    width: 80%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-lightstick-blackpink .lightBP{
    position: absolute;
    width: 90%;
    overflow: visible;
}

.container-lightstick-blackpink .lightBP path{
    fill: #fea5b8cb;
    z-index: 100;
}

.container-lightstick-blackpink .base-bp{
    position: absolute;
    width: 90%;
    z-index: 1;
}

.container-lightstick-blackpink .btnhidden{
    position: absolute;
    width: 90%;
    z-index: 3;
}

.container-lightstick-blackpink .btnhidden circle{
    fill: transparent;
}

.container-lightstick-blackpink .pathleft{
    position: absolute;
    background-color: transparent;
    width: 90px;
    height: 150px;
    top: 10%;
    left: 5%;
    z-index: 3;
}

.container-lightstick-blackpink .pathright{
    position: absolute;
    background-color: transparent;
    width: 90px;
    height: 150px;
    top: 10%;
    right: 5%;
    z-index: 3;
}

@keyframes mode-bp-01 {
    0%{
        filter: none; 
    }

    50%{
        filter: drop-shadow(
            0px 2px 10px #f7aeffcc
        ) drop-shadow(
            0px 5px 50px #f7aeffcc
        ) drop-shadow(
            0px 8px 80px #f7aeffe1
        ) drop-shadow(
            0px 8px 120px #f7aeffe1
        );
    }

    65%{
        filter: drop-shadow(
            0px 2px 10px #f7aeffcc
        ) drop-shadow(
            0px 5px 50px #f7aeffcc
        ) drop-shadow(
            0px 8px 80px #f7aeffe1
        ) drop-shadow(
            0px 8px 120px #f7aeffe1
        );
    }

    100%{
        filter: none;
    }
}

@keyframes mode-bp-02 {
    0%{
        filter: none; 
    }

    10%{
        filter: drop-shadow(
            0px 2px 10px #f7aeffcc
        ) drop-shadow(
            0px 5px 50px #f7aeffcc
        ) drop-shadow(
            0px 8px 80px #f7aeffe1
        ) drop-shadow(
            0px 8px 120px #f7aeffe1
        );
    }

    20%{
        filter: none;
    }

    30%{
        filter: drop-shadow(
            0px 2px 10px #f7aeffcc
        ) drop-shadow(
            0px 5px 50px #f7aeffcc
        ) drop-shadow(
            0px 8px 80px #f7aeffe1
        ) drop-shadow(
            0px 8px 120px #f7aeffe1
        );
    }

    40%{
        filter: none;
    }

    100%{
        filter: none;
    }
}

@keyframes mode-bp-03 {
    0%{
        filter: none;
    }

    20%{
        filter: drop-shadow(
            0px 2px 10px #ffffffcc
        ) drop-shadow(
            0px 5px 50px #ffffffcc
        ) drop-shadow(
            0px 8px 80px #ffffffe1
        ) drop-shadow(
            0px 8px 120px #ffffffe1
        );
        fill: #fea5b8a1;
    }

    40%{
        filter: drop-shadow(
            0px 2px 10px #f7aeffcc
        ) drop-shadow(
            0px 5px 50px #f7aeffcc
        ) drop-shadow(
            0px 8px 80px #f7aeffe1
        ) drop-shadow(
            0px 8px 120px #f7aeffe1
        );
        fill: #fea5b8a1;
    }

    60%{
        filter: drop-shadow(
            0px 2px 10px #ff0000cc
        ) drop-shadow(
            0px 5px 50px #ff0000cc
        ) drop-shadow(
            0px 8px 80px #ff0000e1
        ) drop-shadow(
            0px 8px 120px #ff0000e1
        );
        fill: #fea5b8a1;
    }

    80%{
        filter: drop-shadow(
            0px 2px 10px #55d7ffcc
        ) drop-shadow(
            0px 5px 50px #55d7ffcc
        ) drop-shadow(
            0px 8px 80px #55d7ffe1
        ) drop-shadow(
            0px 8px 120px #55d7ffe1
        );
        fill: #fea5b8a1;
    }

    100%{
        filter: none;
    }
}

/********************************* TWICE ***********************************/

.container-lightstick-twice{
    position: relative;
    background-color: transparent;
    width: 80%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-lightstick-twice .twice-img-01{
    position: absolute;
    width: 90%;
    z-index: 1;
}

.container-lightstick-twice .twice-img-02{
    position: absolute;
    width: 90%;
    z-index: 1;
}

.container-lightstick-twice .twice-img-04{
    position: absolute;
    width: 90%;
}

.container-lightstick-twice .colorsEfect{
    position: absolute;
    width: 90%;
}

.container-lightstick-twice .colorsEfect .circle{
    fill: #ffffff79;
}

.container-lightstick-twice .btnhidden{
    position: absolute;
    background-color: transparent;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }
}

/********************************* STRAYKIDS ***********************************/

.container-lightstick-straykids{
    position: relative;
    background-color: transparent;
    width: 80%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-lightstick-straykids .straykids-img-01{
    position: absolute;
    width: 90%;
    z-index: 1;
}

.container-lightstick-straykids .straykids-img-02{
    position: absolute;
    width: 90%;
    z-index: 1;
}

.container-lightstick-straykids .straykids-img-02 circle{
    fill: #ffffff42;
}

.container-lightstick-straykids .straykids-img-03{
    position: absolute;
    width: 90%;
}


.container-lightstick-straykids .straykids-img-04{
    position: absolute;
    width: 90%;
    overflow: visible;
}

.container-lightstick-straykids .straykids-img-04 path{
    fill: #ffffffbd;
}

.container-lightstick-straykids .straykids-img-04-run{
    position: absolute;
    width: 90%;
    overflow: visible;
    transition: all .2s ease-in-out;
}

.container-lightstick-straykids .straykids-img-04-run path{
    fill: transparent;
    stroke: transparent;
}

.container-lightstick-straykids .btnhidden{
    position: absolute;
    width: 90%;
    z-index: 2;
}

.container-lightstick-straykids .btnhidden circle{
    fill: transparent;
}

@keyframes stray-mode-01{
    0%{
        filter: none;
        
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) 
                drop-shadow(0px 5px 50px #ffffffcc) 
                drop-shadow(0px 8px 80px #ffffff99) 
                drop-shadow(0px 8px 120px #ffffff99);
    }
}

@keyframes stray-mode-02{
    0%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) 
                drop-shadow(0px 5px 50px #ffffffcc) 
                drop-shadow(0px 8px 80px #ffffff99) 
                drop-shadow(0px 8px 120px #ffffff99);
        
    }

    10%{
        filter: drop-shadow(0px 2px 10px #ffffffbb) 
                drop-shadow(0px 5px 50px #ffffffbb) 
                drop-shadow(0px 8px 80px #ffffffbb) 
                drop-shadow(0px 8px 120px #ffffffbb);
    }

    20%{
        filter: drop-shadow(0px 2px 10px #ffffff83) 
                drop-shadow(0px 5px 50px #ffffff83) 
                drop-shadow(0px 8px 80px #ffffff83) 
                drop-shadow(0px 8px 120px #ffffff83);
    }

    30%{
        filter: drop-shadow(0px 2px 10px #ffffff48) 
                drop-shadow(0px 5px 50px #ffffff48) 
                drop-shadow(0px 8px 80px #ffffff48) 
                drop-shadow(0px 8px 120px #ffffff48);
    }

    40%{
        filter: none;
    }

    50%{
        filter: none;
        
    }

    60%{
        filter: none;
    }

    70%{
        filter: drop-shadow(0px 2px 10px #ffffff48) 
                drop-shadow(0px 5px 50px #ffffff48) 
                drop-shadow(0px 8px 80px #ffffff48) 
                drop-shadow(0px 8px 120px #ffffff48);
    }

    80%{
        filter: drop-shadow(0px 2px 10px #ffffff83) 
                drop-shadow(0px 5px 50px #ffffff83) 
                drop-shadow(0px 8px 80px #ffffff83) 
                drop-shadow(0px 8px 120px #ffffff83);
    }

    90%{
        filter: drop-shadow(0px 2px 10px #ffffffbb) 
                drop-shadow(0px 5px 50px #ffffffbb) 
                drop-shadow(0px 8px 80px #ffffffbb) 
                drop-shadow(0px 8px 120px #ffffffbb);
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) 
                drop-shadow(0px 5px 50px #ffffffcc) 
                drop-shadow(0px 8px 80px #ffffff99) 
                drop-shadow(0px 8px 120px #ffffff99);
    }
}

@keyframes stray-mode-03{
    0%{
        filter: none;
        
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ffffffcc) 
                drop-shadow(0px 5px 50px #ffffffcc) 
                drop-shadow(0px 8px 80px #ffffff99) 
                drop-shadow(0px 8px 120px #ffffff99);
    }
}

@keyframes stray-mode-run{
    from{
        transform: translateX(0%) translateY(0px);
        
    }

    to{
        transform: translateX(42%) translateY(15px);
    }
}

/********************************* BTS ***********************************/

.container-lightstick-bts{
    position: relative;
    background-color: transparent;
    width: 80%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-lightstick-bts .bts01{
    position: absolute;
    width: 90%;
    z-index: 1;
}

.container-lightstick-bts .bts02{
    position: absolute;
    width: 90%;
    z-index: 1;
    overflow: visible;
}

.container-lightstick-bts .bts03{
    position: absolute;
    width: 90%;
    z-index: 1;
    overflow: visible;
}

.container-lightstick-bts .bts03 path{
    fill: #ffffff9f;
}

.container-lightstick-bts .bts04{
    position: absolute;
    width: 90%;
    z-index: 1;
    overflow: visible;
}

.container-lightstick-bts .bts04 path{
    fill: #ffffffd2;
}

.container-lightstick-bts .bts05{
    position: absolute;
    width: 90%;
    z-index: 1;
    overflow: visible;
}

.container-lightstick-bts .bts05 path{
    fill: #e20000d2;
}

.container-lightstick-bts .btnhidden{
    position: absolute;
    width: 90%;
    z-index: 3;
}

.container-lightstick-bts .btnhidden circle{
    fill: transparent;
}

@keyframes bts-mode-01{
    0%{
        filter: none;
        
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ffffffbe) 
        drop-shadow(0px 5px 50px #ffffffbe) 
        drop-shadow(0px 8px 80px #ffffff96) 
        drop-shadow(0px 8px 120px #ffffff96);
    }
}

@keyframes bts-mode-red-01{
    0%{
        filter: none;
        
    }

    100%{
        filter: drop-shadow(0px 2px 10px #e20000be) 
        drop-shadow(0px 5px 50px #e20000be) 
        drop-shadow(0px 8px 80px #e2000096) 
        drop-shadow(0px 8px 120px #e2000096);
    }
}

@keyframes bts-mode-02{
    0%{
        filter: drop-shadow(0px 2px 10px #ffffffbe) 
        drop-shadow(0px 5px 50px #ffffffbe) 
        drop-shadow(0px 8px 80px #ffffff96) 
        drop-shadow(0px 8px 120px #ffffff96);
        
    }

    10%{
        filter: drop-shadow(0px 2px 10px #ffffff9f) 
        drop-shadow(0px 5px 50px #ffffff9f) 
        drop-shadow(0px 8px 80px #ffffff9f) 
        drop-shadow(0px 8px 120px #ffffff9f);
    }

    20%{
        filter: drop-shadow(0px 2px 10px #ffffff4d) 
        drop-shadow(0px 5px 50px #ffffff4d) 
        drop-shadow(0px 8px 80px #ffffff4d) 
        drop-shadow(0px 8px 120px #ffffff4d);
        
    }

    30%{
        filter: drop-shadow(0px 2px 10px #ffffff2f) 
        drop-shadow(0px 5px 50px #ffffff2f) 
        drop-shadow(0px 8px 80px #ffffff2f) 
        drop-shadow(0px 8px 120px #ffffff2f);
    }

    40%{
        filter: drop-shadow(0px 2px 10px #ffffff18) 
        drop-shadow(0px 5px 50px #ffffff18) 
        drop-shadow(0px 8px 80px #ffffff18) 
        drop-shadow(0px 8px 120px #ffffff18);
        
    }

    50%{
        filter: none;
    }

    60%{
        filter: drop-shadow(0px 2px 10px #ffffff18) 
        drop-shadow(0px 5px 50px #ffffff18) 
        drop-shadow(0px 8px 80px #ffffff18) 
        drop-shadow(0px 8px 120px #ffffff18);
        
    }

    70%{
        filter: drop-shadow(0px 2px 10px #ffffff2f) 
        drop-shadow(0px 5px 50px #ffffff2f) 
        drop-shadow(0px 8px 80px #ffffff2f) 
        drop-shadow(0px 8px 120px #ffffff2f);
    }

    80%{
        filter: drop-shadow(0px 2px 10px #ffffff4d) 
        drop-shadow(0px 5px 50px #ffffff4d) 
        drop-shadow(0px 8px 80px #ffffff4d) 
        drop-shadow(0px 8px 120px #ffffff4d);
        
    }

    90%{
        filter: drop-shadow(0px 2px 10px #ffffff9f) 
        drop-shadow(0px 5px 50px #ffffff9f) 
        drop-shadow(0px 8px 80px #ffffff9f) 
        drop-shadow(0px 8px 120px #ffffff9f);
    }

    100%{
        filter: drop-shadow(0px 2px 10px #ffffffbe) 
        drop-shadow(0px 5px 50px #ffffffbe) 
        drop-shadow(0px 8px 80px #ffffff96) 
        drop-shadow(0px 8px 120px #ffffff96);
        
    }
}

@keyframes bts-mode-red-02{
    0%{
        filter: drop-shadow(0px 2px 10px #e20000be) 
        drop-shadow(0px 5px 50px #e20000be) 
        drop-shadow(0px 8px 80px #e2000096) 
        drop-shadow(0px 8px 120px #e2000096);
        
    }

    10%{
        filter: drop-shadow(0px 2px 10px #e200009f) 
        drop-shadow(0px 5px 50px #e200009f) 
        drop-shadow(0px 8px 80px #e200009f) 
        drop-shadow(0px 8px 120px #e200009f);
    }

    20%{
        filter: drop-shadow(0px 2px 10px #e200004d) 
        drop-shadow(0px 5px 50px #e200004d) 
        drop-shadow(0px 8px 80px #e200004d) 
        drop-shadow(0px 8px 120px #e200004d);
        
    }

    30%{
        filter: drop-shadow(0px 2px 10px #e200002f) 
        drop-shadow(0px 5px 50px #e200002f) 
        drop-shadow(0px 8px 80px #e200002f) 
        drop-shadow(0px 8px 120px #e200002f);
    }

    40%{
        filter: drop-shadow(0px 2px 10px #e2000018) 
        drop-shadow(0px 5px 50px #e2000018) 
        drop-shadow(0px 8px 80px #e2000018) 
        drop-shadow(0px 8px 120px #e2000018);
        
    }

    50%{
        filter: none;
    }

    60%{
        filter: drop-shadow(0px 2px 10px #e2000018) 
        drop-shadow(0px 5px 50px #e2000018) 
        drop-shadow(0px 8px 80px #e2000018) 
        drop-shadow(0px 8px 120px #e2000018);
        
    }

    70%{
        filter: drop-shadow(0px 2px 10px #e200002f) 
        drop-shadow(0px 5px 50px #e200002f) 
        drop-shadow(0px 8px 80px #e200002f) 
        drop-shadow(0px 8px 120px #e200002f);
    }

    80%{
        filter: drop-shadow(0px 2px 10px #e200004d) 
        drop-shadow(0px 5px 50px #e200004d) 
        drop-shadow(0px 8px 80px #e200004d) 
        drop-shadow(0px 8px 120px #e200004d);
        
    }

    90%{
        filter: drop-shadow(0px 2px 10px #e200009f) 
        drop-shadow(0px 5px 50px #e200009f) 
        drop-shadow(0px 8px 80px #e200009f) 
        drop-shadow(0px 8px 120px #e200009f);
    }

    100%{
        filter: drop-shadow(0px 2px 10px #e20000be) 
        drop-shadow(0px 5px 50px #e20000be) 
        drop-shadow(0px 8px 80px #e2000096) 
        drop-shadow(0px 8px 120px #e2000096);
        
    }
}