.product-bg.every{
                height: 800vh;
                overflow: initial !important;
            }
            .tp-brand-title h3{
                text-transform: capitalize;
            }
            .product-bg.every .m-img{
                position: absolute;
                width: 90%;
                left: 5%;
                top: 0;
                z-index: 0;
                transition: all .5s;
            }
            .product-bg.mood .mod{
                position: absolute;
                width: 100%;
                height: 100%;
                top: calc(14vw);
            }
            .product-bg.mood .r{
                position: absolute;
                width: 41vw;
                top: 11.5vw;
                left: 29.5vw;
                z-index: 1;
                transition: all .8s;
                opacity: .25;
            }
            .product-bg.mood .r2{
                display: none;
            }
            .product-bg.mood .mod img{
                position: absolute;
                left: 0%;
                top: 0;
                display: block;
                width: 100%;
                z-index: 3;
                transform: translateY(-7vw);
            }
            .product-bg.mood .line{
                padding: 1vw 12vw;
            }
            .product-bg.mood .line .info{
                width: 46%;
            }
            .mood-area{
                height: 100%;
                background: url('/assets/img/products/mana/mbg-1.webp') no-repeat center;
                background-size: cover;
                transition: all .5s;
            }
            .mood-area.t2{
                background: url('/assets/img/products/mana/mbg-2.webp') no-repeat center;
                background-size: cover;
            }
            .mood-area.t3{
                background: url('/assets/img/products/mana/mbg-3.webp') no-repeat center;
                background-size: cover;
            }
            .mood-area.t4{
                background: url('/assets/img/products/mana/mbg-4.webp') no-repeat center;
                background-size: cover;
            }
            .mood-area.t5{
                background: url('/assets/img/products/mana/ibg-1.webp') no-repeat center;
                background-size: cover;
            }
            .mood-area.t6{
                background: url('/assets/img/products/mana/ibg-2.webp') no-repeat center;
                background-size: cover;
            }
            .mood-area.t7{
                background: url('/assets/img/products/mana/ibg-3.webp') no-repeat center;
                background-size: cover;
            }
            .mood-area.t8{
                background: url('/assets/img/products/mana/ibg-4.webp') no-repeat center;
                background-size: cover;
            }
            .mod1{
                z-index: 2;
            }
            .mod2{
                z-index: 3;
                opacity: 0;
            }
            .mod3{
                z-index: 4;
                opacity: 0;
            }
            .mod4{
                z-index: 5;
                opacity: 0;
            }
            .mod5{
                z-index: 6;
                opacity: 0;
            }
            .mod6{
                z-index: 7;
                opacity: 0;
            }
            .mod7{
                z-index: 8;
                opacity: 0;
            }
            .mod8{
                z-index: 9;
                opacity: 0;
            }
            .mood .action h2{
                padding: 1vw 2vw;
                line-height: 1;
                text-align: center;
                font-size: 1.2vw;
                color: #fff;
                width: 8vw;
                cursor: pointer;
                transition: all .5s;
            }
            .mood .action .s{
                background: #ffa60b7c;
                border-top-left-radius: 2vw;
                border-bottom-left-radius: 2vw;
            }
            .mood .action .i{
                background: #0ba1ff6c;
                border-top-right-radius: 2vw;
                border-bottom-right-radius: 2vw;
            }
            .mood .action .s.active{
                background: linear-gradient(90deg, #FF6715 0%, #FFA50B 100%);
            }
            .mood .action .i.active{
                background: linear-gradient(90deg, #3179FF 0%, #0BA1FF 100%);
            }
            .product-bg.beauty{
                position: relative;
                background: url('/assets/img/products/mana/bg-beauty.webp') no-repeat center;
                background-size: cover;
                background-attachment: fixed;
                height: 300vh;
                overflow: initial !important;
            }
            .product-bg.beauty .info{
                opacity: 0;
                padding-top: 15vw;
                transform: translateY(30px);
            }
            .product-bg.beauty .info h3{
                color: #fff;
            }
            .product-bg.beauty .info p{
                color: rgba(255, 255, 255, .8);
            }
            .gtext{
                background: linear-gradient(to right, #94FFB0 25%, #FF8D2A 60%, #FF6F00); 
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .product-bg.cloud .info p{
                max-width: 50vw;
            }
            .product-bg.cloud{
                padding: 6vw 0;
                flex-wrap: wrap;
            }
            .product-bg.cloud .boost{
                width: 77vw;
                height: 28.75vw;
                margin: 0 auto;
            }
            .product-bg.cloud .tp-skill-bar{
                width: 33.3%;
                border-top-left-radius: 3vw;
                border-bottom-left-radius: 3vw;
                background-color: #000;
                padding: 3vw 2vw;
            }
            .product-bg.cloud .tp-skill-bar label{
                color: rgba(255, 255, 255, 1);
                font-size: 1.2vw;
                margin-bottom: 1vw;
            }
            .product-bg.cloud .tp-skill-bar label.active{
                color: var(--tp-theme-color-2);
                font-family: 'inter-b';
            }
            
            .product-bg.cloud .box{
                width: 33.3%;
                transition: all .3s;
                cursor: pointer;
            }
            .product-bg.cloud .box.p{
                background: url('/assets/img/products/mana/boost-1.webp') no-repeat center;
                background-size: 100%;
            }
            .product-bg.cloud .box.c{
                background: url('/assets/img/products/mana/boost-2.webp') no-repeat center;
                background-size: 100%;
                border-top-right-radius: 3vw;
                border-bottom-right-radius: 3vw;
            }
            .product-bg.cloud .box:hover{
                background-size: 110%;
            }
            .product-bg.cloud .progress-outer{
                border: none;
                position: relative;
            }
            .product-bg.cloud .progress-outer p{
                color: var(--tp-theme-color-2);
                font-size: 2vw;
                position: absolute;
                right: -0.35vw;
                top: -0.65vw;
                font-family: 'inter-b';
            }
            .product-bg.cloud .tp-skill-item{
                margin-bottom: 1.6vw;
            }
            .product-bg.cloud .tp-skill-item.m{
                margin-bottom: 5vw;
            }
            .product-bg.cloud .progress-outer.n .progress-bar{
                background-color: rgba(255, 255, 255, .4);
            }
            .product-bg.cloud .progress-outer.n p{
                color: rgba(255, 255, 255, .4);
                font-size: 1.2vw;
                top: -0.3vw;
                right: 6vw;
                font-family: 'inter-m';
            }
            .product-bg.cloud .progress-outer.nt p{
                right: 10.2vw;
            }
            .product-bg.screen{
                height: 400vh;
                overflow: initial !important;
            }
            .product-bg.screen .section-sticky{
                display: flex;
                flex-wrap: wrap;
                background: url('/assets/img/products/mana/bg-uni.webp') no-repeat center;
                background-size: cover;
            }
            .product-bg.screen .canvas-bg{
                width: 31.8vw;
                height: 36.4vw;
                margin: 0 auto;
                margin-top: 3vw;
            }   
            .product-bg.screen .canvas-bg canvas{
                transition: all .3s;
            }
            .product-bg.screen .tips{
                font-weight: 700;
                transition: all .3s;
                display: flex;
                align-items: center;
                gap: 1vw;
                max-width: 20vw;
                font-size: 1.4vw;
                color: #fff;
                line-height: 1.3;
                transition: all .5s;
                transform: translateY(30px);
                opacity: 0;
            }
            .product-bg.screen .tips.show{
                transform: translateY(0);
                opacity: 1;
            }
            .product-bg.screen .tips.left{
                position: absolute;
                top: 4vw;
                left: -9.5vw;
                text-align: right;
            }
            .product-bg.screen .tips.left.l2{
                top: 20vw;
                left: -7.5vw;
            }
            .product-bg.screen .tips.right{
                position: absolute;
                top: 7vw;
                right: -10vw;
                text-align: left;
            }
            .product-bg.screen .tips.right.r2{
                top: 25vw;
            }
            .product-pack{
                background: url('/assets/img/products/mana/bg-pack.webp') no-repeat center;
                background-size: cover;
            }
            .product-bg.power{
                height: 250vh;
                overflow: initial !important;
            }
            .product-bg.power .info{
                position: relative;
                z-index: 3;
            }
            .product-bg.power .bg{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                transition: all .3s;
                display: flex;
                align-items: center;
            }
            .product-bg.power .bg .label{
                gap: 2vw;
                margin-left: 11.5vw;
                text-align: right;
                max-width: 30vw;
                transform: translateY(3.5vw);
            }
            .product-bg.power .bg.bg-30 .label{
                text-align: left;
                margin-left: 58vw;
                flex-direction: row-reverse;
                max-width: 35vw;
            }
            .product-bg.power .bg .label p{
                color: #000;
                font-size: 1.2vw;
            }
            .product-bg.power .bg .label h4{
                font-size: 1.2vw;
            }
            .product-bg.power .bg .label h5{
                font-size: 1.3vw;
                padding: 1vw 2vw;
                background-color: #fff;
                border-radius: 2vw;
            }
            .product-bg.power .bg-50{
                z-index: 0;
                background: url('/assets/img/products/mana/power-1.webp') no-repeat center;
                background-size: cover;
            }
            .product-bg.power .bg-30{
                z-index: 1;
                opacity: 0;
                background: url('/assets/img/products/mana/power-2.webp') no-repeat center;
                background-size: cover;
            }
            /** mob **/
            @media (max-width: 991px) {
                .banner-sales{
                    padding-top: .8rem;
                }
                .product-bg.mood .mod img{
                    transform: translateY(0) scale(.72);
                }
                .product-bg.mood .mod{
                    top: 3rem;
                }
                .product-bg.mood .line{
                    padding: 0 .3rem;
                    flex-wrap: wrap;
                    justify-content: center !important;
                }
                .product-bg.mood .line .info{
                    width: 100%;
                    text-align: center;
                    padding-top: .5rem;
                    padding-bottom: .3rem;
                }
                .mood .action h2{
                    width: 2rem;
                    padding: .3rem .6rem;
                    font-size: .32rem;
                }
                .mood .action .s{
                    border-top-left-radius: 1rem;
                    border-bottom-left-radius: 1rem;
                }
                .mood .action .i{
                    border-top-right-radius: 1rem;
                    border-bottom-right-radius: 1rem;
                }
                .product-bg.mood .r{
                    width: 5rem;
                    top: 5.6rem;
                    left: 1.25rem;
                }
                .product-bg.beauty{
                    background: #000;
                }
                .product-bg.every .section-sticky{
                    padding-bottom: 1.6rem;
                }
                .product-bg.beauty .section-sticky{
                    background: #000 url('/assets/img/products/mana/mob/bg-beauty.webp') no-repeat center;
                    background-size: cover;
                }
                .product-bg.beauty .info{
                    padding-top: 7rem;
                }
                .product-bg.power .bg-50{
                    background: url('/assets/img/products/mana/mob/power-1.webp') no-repeat center;
                    background-size: cover;
                }
                .product-bg.power .bg-30{
                    background: url('/assets/img/products/mana/mob/power-2.webp') no-repeat center;
                    background-size: cover;
                }
                .product-bg.power .bg .label{
                    margin: 0 .6rem !important;
                    max-width: 100% !important;
                    flex-wrap: wrap !important;
                    justify-content: center !important;
                    text-align: center !important;
                    flex-direction: column-reverse !important;
                    gap: .2rem !important;
                    transform: translateY(3.5rem) !important;
                }
                .product-bg.power .bg .label h4{
                    font-size: .36rem;
                    color: #fff;
                    margin-bottom: .12rem;
                }
                .product-bg.power .bg .label p{
                    font-size: .32rem;
                    color: #fff;
                    line-height: 1.2;
                }
                .product-bg.power .bg .label h5{
                    font-size: .4rem;
                    padding: .18rem .6rem;
                    border-radius: 1rem;
                    margin-bottom: .3rem;
                }
                .product-bg.power .bg .label .l1{
                    background-color: #54FFA3;
                }
                .product-bg.power .bg .label .l2{
                    background-color: #FF9B15;
                }
                .product-bg.cloud .info p{
                    max-width: 100%;
                    margin-bottom: 0;
                }
                .product-bg.cloud{
                    height: auto;
                    padding: .8rem .3rem .6rem .3rem;
                }
                .product-bg.cloud .boost{
                    width: 100%;
                    height: auto;
                    flex-wrap: wrap;
                }
                .product-bg.cloud .tp-skill-bar{
                    width: 100%;
                    border-radius: 0;
                    border-top-left-radius: .32rem;
                    border-top-right-radius: .32rem;
                    padding: .8rem .4rem;
                }
                .product-bg.cloud .box{
                    width: 50%;
                    height: 4.2rem;
                }
                .product-bg.cloud .box.p{
                    border-radius: 0;
                    border-bottom-left-radius: .32rem;
                    background-size: cover;
                }
                .product-bg.cloud .box.c{
                    border-radius: 0;
                    border-bottom-right-radius: .32rem;
                    background-size: cover;
                }
                .product-bg.cloud .tp-skill-item{
                    margin-bottom: .2rem;
                }
                .product-bg.cloud .tp-skill-item.m{
                    margin-bottom: .6rem;
                }
                .product-bg.cloud .tp-skill-bar label{
                    font-size: .36rem;
                    margin-bottom: .3rem;
                }
                .product-bg.cloud .progress-outer p{
                    font-size: .48rem;
                    right: 0;
                    top: -0.12rem;
                }
                .product-bg.cloud .progress-outer.n p{
                    font-size: .48rem;
                    right: 1.3rem;
                    top: -0.12rem;
                }
                .product-bg.cloud .progress-outer.nt p{
                    right: 2.5rem;
                }
                .product-bg.beauty .info p{
                    text-align: center;
                }
                .product-pack{
                    background: url('/assets/img/products/mana/mob/bg-pack.webp') no-repeat center;
                    background-size: cover;
                }
                .product-bg.screen .section-sticky{
                    background: #04112c;
                }
                .product-bg.screen .info{
                    padding-top: 1.8rem;
                    z-index: 2;
                }
                .product-bg.screen .v-bg{
                    position: relative;
                    transform: scale(.6);
                }
                .product-bg.screen .v-bg::after{
                    position: absolute;
                    left: 0;
                    content: '';
                    bottom: -4rem;
                    width: 100%;
                    height: 5rem;
                    background-color: #000615;
                    filter: blur(20px);
                }
                .product-bg.screen .canvas-bg{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .product-bg.screen .tips.left{
                    top: 8.5rem;
                    left: .2rem;
                }
                .product-bg.screen .tips{
                    font-size: .28rem;
                }
                .product-bg.screen .tips img{
                    width: .6rem;
                }
                .product-bg.screen .tips.left.l2{
                    top: 12rem;
                    left: -0.2rem;
                }
                .product-bg.screen .tips.right{
                    top: 8.5rem;
                    right: 0;
                }
                .product-bg.screen .tips.right.r2{
                    top: 11.5rem;
                    right: -0.2rem;
                }
                .product-bg.screen{
                    height: 250vh;
                }
            }

            @media screen and (min-width: 767px) and (max-width: 991px){
                .product-bg.screen .v-bg{
                    transform: scale(1);
                    margin-top: 3rem;
                }
                .product-bg.screen .tips.left{
                    top: 7rem;
                }
                .product-bg.screen .tips.left.l2{
                    top: 9rem;
                }
                .product-bg.screen .tips.right{
                    top: 7.5rem;
                    right: .2rem;
                }
                .product-bg.screen .tips.right.r2{
                    top: 10rem;
                    right: .2rem;
                }
            }