.cny-gifting-se {
    position: relative;
    overflow: hidden;
}

.main [data-module-template="heroes"].collection-module [data-unit-id="cny-se-2026"] {
    margin-top: 12px;
}

.star {
    position: absolute;
    z-index: 2003;
    top: 100%;
    height: auto;
    will-change: filter;
    pointer-events: none;
}

.gifting-star-container {
    position: absolute;
    top: 0px !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 2003;
    width: 100%;
    height: 100%;
    pointer-events: none;
    max-width: 1366px;
    margin: 0 auto;
}

@media (min-width: 1069px) and (max-width: 1366px) {
    .gifting-star-container {
        max-width: 1068px;
    }
}

@media (min-width: 735px) and (max-width: 1068px) {
    .gifting-star-container {
        max-width: 735px;
    }
}

@media (max-width: 734px) {
    .gifting-star-container {
        max-width: 375px;
    }
}

.gifting-star-container .unit-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.show {
    opacity: 0;
    animation: 0.3s fadeIn forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.2;
    }
}

/* 星星出现效果 */

.cny-se-2026{
    position: unset !important;
   
}
.cny-se-2026 .unit-wrapper a.unit-link{
    z-index: 2005 !important;
}
.cny-se-2026 .unit-wrapper .unit-image-wrapper{
    position: unset !important;
    z-index: unset !important;
}
.cny-se-2026 .unit-copy-wrapper{
    z-index: 1001;
}
.cny-se-2026 .unit-copy-wrapper{
     z-index: 2211 !important;
}


.cny-se-2026 .img-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
}
.cny-se-2026 .img-wrapper *{
    pointer-events: none;
}

.cny-se-2026 .img-wrapper .img-cloud-back {
    position: absolute;
    z-index: 2001;
    left: 50%;
    bottom: 0;
    width: 2150px;
    transform: translate(-50%);
    
}

.cny-se-2026 .img-wrapper .img-product {
    width: 247px;
    z-index: 2003;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3vw;
}

.cny-se-2026 .img-wrapper .img-cloud-front {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2004;
    width: 1850px;
    transform: translate(-41%);
}


.star-4,.star-5,.star-6,.star-7 {
    z-index: 2000;
    /* filter: blur(1px); */
}

/* 星星变色动画 */
/* .hue-0 {
    animation: changeColor-0 2.4s forwards;
}

.hue-1 {
    animation: changeColor-1 2.4s forwards;
}

.hue-2 {
    animation: changeColor-2 2.4s forwards;
}

.hue-3 {
    animation: changeColor-3 2.4s forwards;
}

.hue-8,.hue-12 {
    animation: changeColor-8 2.4s forwards;
}

.hue-9,.hue-13 {
    animation: changeColor-9 2.4s forwards;
}

.hue-10,.hue-14 {
    animation: changeColor-10 2.4s forwards;
}

.hue-11,.hue-15 {
    animation: changeColor-11 2.4s forwards;
} */

/* @keyframes changeColor-0 {
    0% {
        filter: sepia(0%) brightness(1);
    }
    100% {
        filter: sepia(60%) brightness(2.2);
    }
}
@keyframes changeColor-1 {
    0% {
        filter: sepia(0%) brightness(1);
    }
    100% {
        filter: sepia(84%) brightness(2.2);
    }
}
@keyframes changeColor-2 {
    0% {
        filter: sepia(0%) brightness(1);
    }
    100% {
        filter: sepia(60%) brightness(1.5);
    }
}
@keyframes changeColor-3 {
    0% {
        filter: sepia(0%) brightness(1);
    }
    100% {
        filter: sepia(76%) brightness(1.4);
    }
}
@keyframes changeColor-8 {
    0% {
        filter: sepia(0%) brightness(1);
    }
    100% {
        filter: sepia(60%) brightness(1.7);
    }
}
@keyframes changeColor-9 {
    0% {
        filter: sepia(0%) brightness(1);
    }
    100% {
        filter: sepia(75%) brightness(1.5);
    }
}
@keyframes changeColor-10 {
    0% {
        filter: sepia(0%) brightness(1);
    }
    100% {
        filter: sepia(95%) brightness(1.4);
    }
}
@keyframes changeColor-11 {
    0% {
        filter: sepia(0%) brightness(1);
    }
    100% {
        filter: sepia(62%) brightness(1.4);
    }
} */
/* 
@keyframes changeColor-0 {
    0% {
        filter: sepia(0%) hue-rotate(0deg) contrast(1);
    }
    100% {
        filter: sepia(100%) hue-rotate(205deg) contrast(3);
    }
}
@keyframes changeColor-1 {
    0% {
        filter: sepia(0%) hue-rotate(0deg) brightness(1) contrast(1);
    }
    100% {
        filter: sepia(100%) hue-rotate(195deg) brightness(1.1) contrast(3);
    }
}
@keyframes changeColor-2 {
    0% {
        filter: sepia(0%) contrast(1);
    }
    100% {
        filter: sepia(100%) contrast(1.8);
    }
}
@keyframes changeColor-3 {
    0% {
        filter: sepia(0%) hue-rotate(0deg) contrast(1);
    }
    100% {
        filter: sepia(100%) hue-rotate(200deg) contrast(1.8);
    }
}
@keyframes changeColor-8 {
    0% {
        filter: sepia(0%) hue-rotate(0deg) contrast(1);
    }
    100% {
        filter: sepia(100%) hue-rotate(203deg) contrast(2);
    }
}
@keyframes changeColor-9 {
    0% {
        filter: sepia(0%) hue-rotate(0deg) contrast(1);
    }
    100% {
        filter: sepia(100%) hue-rotate(203deg) contrast(1.8);
    }
}
@keyframes changeColor-10 {
    0% {
        filter: sepia(0%) hue-rotate(0deg) contrast(1);
    }
    100% {
        filter: sepia(100%) hue-rotate(182deg) contrast(1.5);
    }
}
@keyframes changeColor-11 {
    0% {
        filter: sepia(0%) hue-rotate(0) contrast(1);
    }
    100% {
        filter: sepia(100%) hue-rotate(194deg) contrast(1.5);
    }
} */


/* .hue-0 {
    animation: changeColor-0 2.4s forwards;
}

.hue-1 {
    animation: changeColor-1 2.4s forwards;
}

.hue-2 {
    animation: changeColor-2 2.4s forwards;
}

.hue-3 {
    animation: changeColor-3 2.4s forwards;
} */


.final-stop-motion-star {
    z-index: 2002;
}

.hue-0,
.hue-1,
.hue-2,
.hue-9,
.hue-11 {
    animation: changeColor-0 2.4s forwards;
}

.hue-10 {
    animation: changeColor-1 2.4s forwards;
}

.hue-3,
.hue-12,
/* .hue-14, */
.hue-8 {
    animation: changeColor-2 2.4s forwards;
}

.hue-13 {
    animation: changeColor-3 2.4s forwards;
}

.hue-14 {
    animation: changeColor-4 2.4s forwards;
}

@keyframes changeColor-0 {
    0% {
        filter: sepia(0%) saturate(1) brightness(1) contrast(1);
    }
    100% {
        filter: sepia(70%) saturate(3.5) brightness(0.7) contrast(1.2);
    }
}

/* 10 */
@keyframes changeColor-1 {
    0% {
        filter: sepia(0%) saturate(1) brightness(1) contrast(1);
    }
    100% {
        filter: sepia(40%) saturate(3.5) brightness(0.7) contrast(1.2);
    }
}

/* 12 */
@keyframes changeColor-2 {
    0% {
        filter: sepia(0%) saturate(1) contrast(1);
    }
    100% {
        filter: sepia(90%) saturate(2) contrast(0.9);
    }
}

/* 13 */
@keyframes changeColor-3 {
    0% {
        filter: sepia(0%) saturate(1) brightness(1) contrast(1);
    }
    100% {
        filter: sepia(80%) saturate(3.3) brightness(0.7) contrast(1.2);
    }
}

/* 14 double star */
/* @keyframes changeColor-5 {
    0% {
        filter: sepia(0%) saturate(1) brightness(1) contrast(1);
    }
    100% {
        filter: sepia(82%) saturate(5.9) brightness(0.7) contrast(0.9);
    }
} */

/* 14 snow flower */
@keyframes changeColor-4 {
    0% {
        filter: sepia(0%) saturate(1) brightness(1) contrast(1);
    }
    100% {
        filter: sepia(90%) saturate(5.5) brightness(0.7) contrast(1.2);
    }
}

/* .flash-star {
    animation: flashAnimation 4s 3;
    transition: opacity 0.6s;
}

@keyframes flashAnimation {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
} */

.flash-star-9 {
    animation: flashAnimation-9 4s infinite;
}

@keyframes flashAnimation-9 {
    0%,
    100% {
        filter: sepia(0) saturate(1);
    }

    50% {
        filter: sepia(20%) saturate(1.4);
    }
}

.flash-star-10 {
    animation: flashAnimation-10 4s infinite;
}

@keyframes flashAnimation-10 {
    0%,
    100% {
        filter: sepia(0) hue-rotate(0) saturate(1);
    }

    50% {
        filter: sepia(9%) hue-rotate(7deg) saturate(1.4);
    }
}

.flash-star-11 {
    animation: flashAnimation-11 4s infinite;
}

@keyframes flashAnimation-11 {
    0%,
    100% {
        filter: sepia(0) hue-rotate(0) saturate(1);
    }

    50% {
        filter: sepia(20%) hue-rotate(70deg) saturate(1.4);
    }
}

.flash-star-12 {
    animation: flashAnimation-12 4s infinite;
}

@keyframes flashAnimation-12 {
    0%,
    100% {
        filter: sepia(0) saturate(1);
    }

    50% {
        filter: sepia(25%) saturate(1.8);
    }
}

.flash-star-1 {
    animation: flashAnimation-1 4s infinite;
}

@keyframes flashAnimation-1 {
    0%,
    100% {
        filter: sepia(0) hue-rotate(0) saturate(1) brightness(1);
    }

    50% {
        filter: sepia(30%) hue-rotate(52deg) saturate(4) brightness(0.9);
    }
}

.flash-star-2 {
    animation: flashAnimation-2 4s infinite;
}

@keyframes flashAnimation-2 {
    0%,
    100% {
        filter: sepia(0) saturate(1) brightness(1);
    }

    50% {
        filter: sepia(40%) saturate(2.5) brightness(0.9);
    }
}