.music-card{
    flex: 1 1 auto;
    background-color: #181818;
    border-radius: 0.6rem;
    margin-bottom: 16px;
    position: relative;
    max-height: 230px;
    white-space: nowrap;
}

.music-card-hover{
    background-color: #282828;
}

.music-img-box{
    position: relative;
}

.music-img{
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    width: 100%;
    height: auto;
    min-width: 70px;
    max-width: 140px;
}

.play-icon, .pause-icon {
    position: absolute;
    bottom:0.5rem;
    right: 0.5rem;
    cursor: pointer;
    display: none;
}

.music-card:hover .play-icon {
    display: inline-block;
}

.music-card:hover .pause-icon {
    display: none;
}

.stickers-card{
    position: relative;
    min-height: 600px;
}

.sticker-content{
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%,50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}



.artistWrap {
    width: 16rem;
    height: 26rem;
    border-radius: 1rem;
    background-image: url(../image/img_model_placeholder.webp);
    background-position: center;
    background-size: cover;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .artistWrap{
        width: 12rem;
        height: 19.5rem;
    }

    .stk1{
        width: 1.25rem !important;
        height: 1.25rem !important;
        top: 21.5% !important;
        left: 7% !important;
    }

    .stk2{
        width: 7rem !important;
        height: 7rem !important;
        top: 19% !important;
        left: -4% !important;
    }

    .stk3{
        width: 6rem !important;
        height: 6.58rem !important;
        top: 50% !important;
        left: -2% !important;
    }

    .stk4{
        width: 14rem !important;
        height: 2rem !important;
        top: 81.5% !important;
        left: -12% !important;
    }

    .stk5{
        width: 1.5rem !important;
        height: 3rem !important;
        top: 30% !important;
        left: 56% !important;
    }

    .stk6{
        width: 2rem !important;
        height: 2rem !important;
        top: 40.5% !important;
        left: 53% !important;
    }

    .stk7{
        width: 10.5rem !important;
        height: 14.6rem !important;
        top: 46% !important;
        left: 31% !important;
    }

    .stk8{
        width: 6rem !important;
        height: 6rem !important;
        top: 27% !important;
        left: 84% !important;
    }

    .stk9{
        width: 6rem !important;
        height: 9.17rem !important;
        top: 46.5% !important;
        left: 75% !important;
    }

    .stk10{
        width: 8rem !important;
        height: 8rem !important;
        top: 76% !important;
        left: 72.5% !important;
    }
}


.stk1 {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: -8.5%;
    left: -2%;
    opacity: 0;
    transform-origin: center center;
}

.stk1.show {
    opacity: 1 ;
    transform: translateX(0%) translateY(0%) rotate(-30deg);
    animation: stk1-shake3d .3s ease-in-out ;
}

@keyframes stk1-shake3d {
    0% { transform: translateX(80%) translateY(80%) rotate(-30deg); }
    75% { transform: translateX(-5%) translateY(-5%) rotate(-30deg); }
    100% { transform: translateX(0%) translateY(0%) rotate(-30deg); }
}

.stk2 {
    position: absolute;
    width: 11rem;
    height: 11rem;
    top: -12%;
    left: -17%;
    opacity: 0;
}

.stk2.show {
    opacity: 1 ;
    transform: translateX(0%) translateY(0%);
    animation: stk2-shake3d .3s ease-in-out ;
}

@keyframes stk2-shake3d {
    0% { transform: translateX(15%) translateY(15%) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    75% { transform: translateX(-5%) translateY(-5%) rotateX(-5deg) rotateY(-5deg) rotateZ(-5deg); }
    100% { transform: translateX(0%) translateY(0%) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
}

.stk3 {
    position: absolute;
    width: 8rem;
    height: 8.77rem;
    top: 24%;
    left: -12%;
    opacity: 0;
}

.stk3.show {
    opacity: 1 ;
    transform: translateX(0%) translateY(0%) rotate(90deg);
    animation: stk3-shake3d .3s ease-in-out ;
}

@keyframes stk3-shake3d {
    0% { transform: translateX(20%) translateY(-20%) rotate(90deg); }
    75% { transform: translateX(-5%) translateY(5%) rotate(90deg); }
    100% { transform: translateX(0%) translateY(0%) rotate(90deg); }
}

.stk4 {
    position: absolute;
    width: 21rem;
    height: 3rem;
    top: 56%;
    left: -28%;
    opacity: 0;
    z-index: 2;
}

.stk4.show {
    opacity: 1 ;
    transform: translateX(0%) translateY(0%);
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

.stk5 {
    position: absolute;
    width: 2rem;
    height: 4rem;
    top: 1.5%;
    left: 58%;
    opacity: 0;
}

.stk5.show {
    opacity: 1 ;
    transform: translateX(0%) translateY(0%);
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}


.stk6 {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 12.5%;
    left: 52.5%;
    opacity: 0;
}

.stk6.show {
    opacity: 1 ;
    transform: translateX(0%) translateY(0%);
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

.stk7 {
    position: absolute;
    width: 13.5rem;
    height: 18.75rem;
    top: 20%;
    left: 29%;
    opacity: 0;
}

.stk7.show {
    opacity: 1 ;
    transform: translateX(0) translateY(0);
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}

.stk8 {
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    top: -2%;
    left: 91%;
    opacity: 0;
}

.stk8.show {
    opacity: 1 ;
    transform: translateX(0%) translateY(0%);
    animation: stk8-shake3d .3s ease-in-out ;
}

@keyframes stk8-shake3d {
    0% { transform: translateX(-40%) translateY(10%) }
    75% { transform: translateX(5%) translateY(-5%) }
    100% { transform: translateX(0%) translateY(0%) }
}

.stk9 {
    position: absolute;
    width: 8rem;
    height: 12.2rem;
    top: 20%;
    left: 80%;
    opacity: 0;
}

.stk9.show {
    opacity: 1 ;
    transform: translateX(0) translateY(0) rotate(180deg);
    animation: stk9-shake3d .3s ease-in-out ;
}

@keyframes stk9-shake3d {
    0% { transform: translateX(-40%) translateY(10%) rotate(180deg); }
    75% { transform: translateX(5%) translateY(-5%) rotate(180deg); }
    100% { transform: translateX(0%) translateY(0%) rotate(180deg); }
}

.stk10 {
    position: absolute;
    width: 11rem;
    height: 11rem;
    top: 51.5%;
    left: 75.5%;
    opacity: 0;
}

.stk10.show {
    opacity: 1 ;
    transform: translateX(0) translateY(0) rotate(40deg);
    animation: stk10-shake3d .3s ease-in-out ;
}

@keyframes stk10-shake3d {
    0% { transform: translateX(-50%) translateY(-20%) rotate(40deg); }
    75% { transform: translateX(10%) translateY(10%) rotate(40deg); }
    100% { transform: translateX(0%) translateY(0%) rotate(40deg); }
}

.activity-box {
    width: 95%;
    max-width: 1200px;
    height: 240px;
    background-color: #282828;
    margin: 0 auto;
    border-radius: 30px;
}

.activity-text {
    padding: 0 50px;
}

.go {
    cursor: pointer;
    border-radius: 6px;
    margin-top: 20px;
    width: 100px;
    height: 35px;
    background-color: #494949
}

@media (max-width: 767px) {
    .activity-box {
        max-width: 576px;
        height: auto;
        padding: 30px 10px 20px;
    }
    .go {
        border-radius: 70px;
        width: 140px;
        height: 50px;
    }
}