.m-container {
    background-color: #fff;
    color: #000;
    font-weight: 400;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    position: relative;
}

.m-container picture,
.m-container img,
.m-container video {
    display: block;
    width: 100%;
}

.m-container video {
    display: block;
}

.m-container .section {
    position: relative;
}

.m-container .blur-up {
    filter: blur(20px);
    transition: filter .2s;
    will-change: filter;
}

.m-container .blur-up.lazyloaded {
    filter: blur(0)
}

.m-container .visuallyhidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(0 0 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}

body {
    overflow-x: hidden;
}

html body {
    --scrollbar-width: 0px;
}

html.html-model-active body {
    overflow: hidden;
    padding-right: var(--scrollbar-width);
}

.html-model-active .second-navigation-new-version {
    display: none;
}

.m-container .header-top {
    top: 0;
}

.m-container .full-height {
    height: 100vh;
}

.m-container .hidden-web {
    display: none;
}

.m-container .show-pad {
    display: none;
}

.m-container .show-padandmob {
    display: none;
}

.m-container .show-mob {
    display: none;
}

.m-container .hidden-inline-web {
    display: none;
}

.m-container .space-300 {
    height: 15.625vw;
}

.m-container .space-280 {
    height: 14.583vw;
}

.m-container .space-240 {
    height: 12.5vw;
}

.m-container .space-200 {
    height: 10.416vw;
}

.m-container .space-180 {
    height: 9.375vw;
}

.m-container .space-160 {
    height: 8.333vw;
}

.m-container .space-140 {
    height: 7.291vw;
}

.m-container .space-120 {
    height: 6.25vw;
}

.m-container .space-100 {
    height: 5.2vw;
}

.m-container .space-80 {
    height: 4.166vw;
}

.m-container .space-64 {
    height: 3.333vw;
}

.m-container .space-60 {
    height: 3.125vw;
}

.m-container .space-48 {
    height: 2.5vw;
}

.m-container .space-40 {
    height: 2.083vw;
}

.m-container .space-32 {
    height: 1.667vw;
}

.m-container .space-30 {
    height: 1.5625vw;
}

.m-container .space-24 {
    height: 1.25vw;
}

.m-container .space-20 {
    height: 1.0416vw;
}

.m-container .space-16 {
    height: .8333vw;
}

.m-container sup {
    font-size: .6em;
    cursor: pointer;
}

.m-container sup.half-sup {
    font-size: .4em;
}

.m-container sup a {
    color: inherit;
}

.m-container .big-title {
    font-size: 6.25vw;
    line-height: 1.25;
}

.m-container .h2 {
    display: flex;
    justify-content: center;
    font-size: 5vw;
    line-height: 1.25;
    font-weight: 400;
    text-align: center;
}

.m-container .h2>div {
    background: linear-gradient(140deg, #161F8F 30%, #3945AC 50%, #9AA5E8 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    line-height: inherit;
}

.m-container .h3 {
    color: #000000;
    font-size: 3.333333vw;
    font-weight: 400;
    line-height: 1.25;
}

.m-container .h4 {
    color: #FFFFFF;
    font-size: 2.5vw;
    font-weight: 400;
    line-height: 1.25;
}

.m-container .h5 {
    color: #FFFFFF;
    font-size: 1.67vw;
    font-weight: 400;
    line-height: 1.25;
}

.m-container p {
    color: #666666;
    font-size: 1.145833vw;
    font-weight: 400;
    line-height: 1.6;
}

.m-container .highlight-text {
    color: #FFFFFF;
    font-weight: 500;
}

.m-container .highlight-text-bold {
    color: #FFFFFF;
    font-weight: bold;
}

.m-container .smaller-text {
    font-size: 1.04vw;
    line-height: 1.6;
}

.m-container .product-disclaimer {
    color: #FFFFFF;
    font-size: max(8px, .625vw);
    opacity: 0.6;
    will-change: transform;
}


.m-container .product-disclaimer-light {
    color: #F2F2F2;
}

.m-container .product-disclaimer-light-1 {
    color: #cfc7c7;
}

.m-container .product-disclaimer-darken {
    color: #606067;
}

.m-container .canvas-fallback {
    display: none;
}

.m-container .inline-video-fallback {
    display: none;
}

.m-container .space-50vh {
    height: 50vh;
}

.m-container .space-80vh {
    height: 80vh;
}

.m-container .space-100vh {
    height: 100vh;
}

.m-container .sticky-viewport {
    position: sticky;
    height: 100vh;
    top: 0;
    overflow: hidden;
}

.m-container .sticky-container {
    position: sticky;
    top: 0;
}

.m-container .video-pop-play-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.m-container .video-pop-play-container::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    backdrop-filter: blur(.260417vw);
    z-index: -1;
}

.m-container .video-pop-play {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.m-container .video-pop-play-hover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.m-container .video-pop-play-hover-bg {
    content: '';
    position: absolute;
    width: 2.083333vw;
    height: 2.083333vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background-image: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
    filter: blur(5px);
    opacity: 0;
}

.m-container .video-pop-play-hover svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

@media (any-hover: hover) and (pointer: fine) {

    .m-container .video-pop-play .video-pop-play-icon-bg,
    .m-container .video-pop-play .video-pop-play-text {
        transition: opacity .6s ease;
    }

    .m-container .video-pop-play .video-pop-play-hover,
    .m-container .video-pop-play .video-pop-play-hover-bg {
        transition: opacity .3s ease;
    }

    .m-container .video-pop-play-style2 .video-pop-play .video-pop-play-icon-bg {
        will-change: filter;
        transition: filter .6s ease;
    }

    .m-container .video-pop-play:hover .video-pop-play-icon-bg,
    .m-container .video-pop-play:hover .video-pop-play-text {
        opacity: .6;
    }

    .m-container .video-pop-play:hover .video-pop-play-hover,
    .m-container .video-pop-play:hover .video-pop-play-hover-bg {
        opacity: 1;
    }

    .m-container .video-pop-play:hover .video-pop-play-icon-bg,
    .m-container .video-pop-play-style2 .video-pop-play:hover .video-pop-play-icon-bg {
        opacity: 1;
        filter: blur(2px);
    }
}

.m-container .video-pop-play-text {
    color: #fff;
    font-size: 1.25vw;
    font-weight: 500;
    margin-right: .833333vw;
}

.m-container .video-pop-play svg {
    width: 2.916667vw;
    height: 2.916667vw;
}

.m-container .video-pop-play-icon {
    display: flex;
    position: relative;
    width: 2.916667vw;
    height: 2.916667vw;
    border-radius: 9999px;
}

.m-container .video-pop-play-icon-pc {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    width: 100%;
    height: 100%;
    will-change: opacity;
    transition: opacity .3s ease-in-out;
    background: linear-gradient(30deg, #434CBE, #A4AEF1);
}

.m-container .video-pop-btn-highlight {
    width: 2.1875vw;
    height: .885417vw;
    position: absolute;
    top: .15625vw;
    right: .182292vw;
    pointer-events: none;
    filter: blur(1px);

}

.m-container .btn-highlight {
    width: 1.875vw;
    height: .78125vw;
    position: absolute;
    top: .15625vw;
    right: .15625vw;
    pointer-events: none;
    filter: blur(1px);

}

.m-container .hmos-tips {
    position: absolute;
    left: 1.5625vw;
    bottom: 1.5625vw;
    width: 13.453vw;
    will-change: transform;
    z-index: 2;
}

.m-container .common-popup-btn-container {
    display: flex;
    align-items: center;
    position: relative;
}

.m-container .common-popup-btn-container svg {
    width: 3.333vw;
    height: 3.333vw;
}

.m-container .common-popup-btn {
    display: flex;
}

.m-container .common-popup-btn-light {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease;
    animation-play-state: paused;
    animation: popup-btn-rotate 3s linear 0s infinite forwards;
}

.m-container .common-popup-btn-container:hover .common-popup-btn-light {
    opacity: 1;
    animation-play-state: running;
}

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

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

.m-container .auto-video-btn {
    color: #3174FF;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.04vw;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
}

.m-container .auto-video-btn.show-btn {
    opacity: 1;
    visibility: visible;
}

.m-container .auto-video-btn svg {
    width: 1.5em;
    height: 1.5em;
    margin-right: .3em;
}

.m-container .video-replay-btn {
    color: #306FDB;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: .9375vw;
    font-weight: 400;
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    width: 2.08333vw;
    pointer-events: none;
    transition: opacity .6s ease;
    will-change: transform;
}

.m-container .video-replay-btn-row {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.m-container .video-replay-btn.show-btn {
    opacity: 1;
    pointer-events: all;
}

.m-container .video-replay-btn.show-btn .video-replay-btn-svg img {
    opacity: 1;
}

.m-container .video-replay-btn.show-btn .video-replay-btn-svg::before {
    opacity: 1;
}

.m-container .video-replay-btn-svg {
    display: flex;
    position: relative;
    width: 100%;
}

.m-container .video-replay-btn-svg img {
    position: relative;
    opacity: 0;
    transition: opacity .6s ease;
    will-change: transform;
}

.m-container .video-replay-btn-svg::before {
    background-color: #49494F64;
    backdrop-filter: blur(.2vw) brightness(1.4);
    border-radius: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity .6s ease;
    will-change: transform;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .video-replay-btn.show-btn:hover .video-replay-btn-svg::before {
        opacity: .6;
    }

    .m-container .video-pop-play:hover .video-pop-play-icon-pc {
        opacity: .6;
    }
}

.m-container .video-replay-btn svg {
    box-sizing: border-box;
    width: .78125vw;
    height: .868vw;
    padding: 1px;
}

.m-container .video-fallback {
    display: none;
}

.m-container .video-control-btn-container {
    cursor: pointer;
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    width: 2.083333vw;
    will-change: transform;
    transition: opacity .6s ease;
    z-index: 2;
}

.m-container .video-control-btn-container .shine-wrapper .shine-background {
    width: 1.5625vw;
    height: 1.5625vw;
}

.m-container .video-control-btn-container::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    will-change: opacity;
    transition: opacity .3s;
    background: rgba(128, 128, 128, 0.5);
    backdrop-filter: blur(2.260417vw) brightness(1);
}

.m-container .video-control-btn-light-container::before {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2.260417vw) brightness(1.2);
}

.m-container .video-control-btn-light2-container::before {
    background: rgba(188, 188, 188, 0.5);
    backdrop-filter: blur(2.260417vw) brightness(1.2);
}

.video-control-btn-container .btn-highlight {
    width: 1.5625vw;
    height: .625vw;
    top: .104167vw;
    right: .104167vw;
}

.m-container .video-control-btn-play-btn {
    display: flex;
    position: relative;
    transition: opacity .4s ease-in-out;
    width: 100%;
    will-change: transform;
}

.m-container .video-control-btn-pause-btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    width: 100%;
}

.m-container .video-control-btn-replay-btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    width: 100%;
}

.m-container .video-control-btn-container img {
    height: auto;
}

.m-container .video-control-btn-container[data-index="0"] .video-control-btn-play-btn {
    opacity: 1;
    transition-delay: .2s;
    z-index: 2;
}

.m-container .video-control-btn-container[data-index="1"] .video-control-btn-pause-btn {
    opacity: 1;
    transition-delay: .2s;
    z-index: 2;
}

.m-container .video-control-btn-container[data-index="2"] .video-control-btn-replay-btn {
    opacity: 1;
    transition-delay: .2s;
    z-index: 2;
}


.m-container .ie-fallback {
    display: none;
}

.m-container .common-transform-show {
    opacity: 0;
    transform: translateY(2.08vw);
    transition: all 1s cubic-bezier(0.26, 0.67, 0.48, 0.91);
    will-change: transform;
}

.m-container .common-transform-show.active {
    opacity: 1;
    transform: translateY(0);
}

.m-container .product-image-parallax {
    position: relative;
}

.m-container .product-image-parallax img {
    display: inline-block;
}

.m-container .swiper-control-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.m-container .swiper-control-btn.justify-center {
    justify-content: center;
}

.m-container .swiper-prev-btn,
.m-container .swiper-next-btn {
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    transition: opacity .4s ease;
    position: relative;
    will-change: transform;
    width: 2.5vw;
}

.m-container .swiper-prev-btn::before,
.m-container .swiper-next-btn::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    will-change: opacity;
    transition: opacity .3s ease-in-out;
    background: linear-gradient(-30deg, #A4AEF1, #434CBE);
}

.m-container .swiper-prev-btn::before {
    background: linear-gradient(30deg, #434CBE, #A4AEF1);
}

.m-container .swiper-prev-btn {
    margin-right: 1.25vw;

}

.m-container .swiper-prev-btn.swiper-button-disabled,
.m-container .swiper-next-btn.swiper-button-disabled {
    cursor: default;
    opacity: .3;
}

.m-container .swiper-prev-btn svg,
.m-container .swiper-next-btn svg {
    width: 2.5vw;
    height: 2.5vw;
    position: relative;
    z-index: 2;
}

.m-container .swiper-prev-btn,
.m-container .swiper-next-btn {
    opacity: 1;
    transition: opacity .3s ease-in-out;
}

.m-container .swiper-prev-btn.btn-disable,
.m-container .swiper-next-btn.btn-disable {
    opacity: .3;
}

.swiper-prev-btn svg path,
.swiper-next-btn svg path {
    fill: #878787;
    transition: fill .3s ease-in-out;
}


.m-container .btn-hover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 1;
    left: 0;
    will-change: opacity;
    transition: opacity .3s ease-in-out;
}



@media (any-hover: hover) and (pointer: fine) {

    .m-container .swiper-prev-btn.btn-disable:hover,
    .m-container .swiper-next-btn.btn-disable:hover {
        cursor: default;
        opacity: .3;
    }

    .m-container .swiper-prev-btn:not(.btn-disable):hover::before,
    .m-container .swiper-next-btn:not(.btn-disable):hover::before {
        opacity: 0.6;
    }

    .m-container .video-control-btn-container:hover::before {
        opacity: 0.6;
    }
}

@media (any-hover: hover) and (pointer: fine) {

    .m-container .swiper .swiper-slide:not(.no-clickto):not(.swiper-slide-active) {
        cursor: pointer;
    }

    .m-container .design-color-control-text-swiper .swiper-slide:not(.no-clickto):not(.swiper-slide-active) {
        cursor: unset;
    }
}

.m-container .swiper .swiper-slide-thumb-active {
    cursor: pointer;
}

.m-container .kv-container {
    position: relative;
}

.m-container .kv-content-container {
    padding: 4.166667vw 0 0;
}

.m-container .kv-container .kv-image-container {
    position: relative;
    min-height: 39.166667vw;
}

.m-container .kv-container .product-disclaimer {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
}

.m-container .kv-product-name {
    position: relative;
    display: flex;
    justify-content: center;
    padding-bottom: 2.1875vw;
}

.m-container .kv-product-name svg {
    width: 26.979167vw;
    height: 2.604167vw;
}

.m-container .kv-slogan-container {
    display: flex;
    justify-content: center;
    font-size: 2.083333vw;
    letter-spacing: .9em;
    line-height: 1.25;
    font-weight: 400;
    margin-top: .416667vw;
    text-align: center;
}

.m-container .kv-slogan-container span {
    display: inline-block;
    transform: translateX(.45em);
}

.m-container .huawei-product-buy-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 0;
}

.m-container .huawei-product-buy-btn-price {
    font-size: 1.46vw;
    font-weight: 400;
    line-height: 1.25;
}

.m-container .huawei-product-buy-btn-price div {
    color: inherit;
    cursor: pointer;
    display: inline-block;
}

.m-container .huawei-product-buy-btn-price span {
    font-size: 0.677083vw;
    font-weight: 500;
}

.m-container .huawei-product-buy-btn-price span[data-footnote] {
    font-size: 1em;
    vertical-align: inherit;
    cursor: pointer;
}

.m-container .huawei-product-buy-btn {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    display: inline-block;
    padding: 6px 20px;
    border: 2px solid #000000;
    background: #000000;
    transition: 0.3s ease-out;
    margin-top: 24px;
    cursor: pointer;
    border-radius: 6px;
    will-change: transform;
}

.m-container .huawei-product-buy-btn:hover {
    opacity: .8;
}


.m-container .kv-reasontobuy {
    position: relative;
}

.m-container .kv-reasontobuy-bg {
    position: absolute;
    top: 0;
    left: -76.979167vw;
    width: 105.3125vw;
    height: 105.3125vw;
    transform: scaleY(0.77);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .reasontobuy-container {
    overflow: hidden;
}

.m-container .reasontobuy-container .swiper-slide {
    overflow: hidden;
}

.m-container .reasontobuy-container .reasontobuy-main-swiper {
    margin: 0 auto;
    width: 67.5vw;
    overflow: initial;
}

.m-container .reasontobuy-item-container {
    display: flex;
    justify-content: center;
    overflow: hidden;
    will-change: transform;
}

.m-container .reasontobuy-item-container .product-disclaimer {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
}

.m-container .reasontobuy-item-image-container {
    border-radius: 1.666667vw;
    position: relative;
    overflow: hidden;
    width: 100%;
    will-change: transform;
}

.m-container .reasontobuy-item-1 .reasontobuy-item-image {
    background-color: #000000;
    min-height: 37.5vw;
}

.m-container .reasontobuy-item-content {
    position: absolute;
    top: 2.5vw;
    left: 2.5vw;
    will-change: transform;
    width: 68%;
    transition: cubic-bezier(0.65, 0.05, 0.36, 1);
    text-align: left;
    pointer-events: none;
}

.m-container .reasontobuy-item-content-subtitle {
    color: #000000;
    font-size: 1.145833vw;
    line-height: 1.5;
    font-weight: 500;
    margin-top: .625vw;
    position: relative;
    will-change: transform;
    opacity: 0.8;
    pointer-events: all;
    z-index: 2;
}

.m-container .reasontobuy-item-content-title {
    color: #000000;
    font-size: 1.666667vw;
    line-height: 1.5;
    font-weight: 500;
    position: relative;
    will-change: transform;
    opacity: 1;
    pointer-events: all;
    z-index: 2;
}

.m-container .reasontobuy-item-content.text-light .reasontobuy-item-content-title,
.m-container .reasontobuy-item-content.text-light .reasontobuy-item-content-subtitle {
    color: #fff;
}

.m-container .reasontobuy-item-content-title sup {
    font-size: .5em;
}

.m-container .reasontobuy-item-content-text {
    color: #FFFFFFB2;
    font-size: 1.145vw;
    margin-top: .25em;
    transition: opacity .4s ease;
    opacity: 1;
}

.m-container .reasontobuy-item-inner-content {
    position: absolute;
    font-size: 1.145833vw;
    font-weight: 500;
    line-height: 1.5;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(1px);
    will-change: transform;
    pointer-events: none;
    z-index: 2;
    display: flex;
    color: #FFFFFF;
}

.m-container .reasontobuy-item-large-text {
    font-size: 7.34375vw;
    width: max-content;
    line-height: 1.25;
    background: linear-gradient(151deg, #161F8F 35%, #3945AC 52%, #9AA5E8 72%, #9AA5E8 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}
.m-container .reasontobuy-item-large-text:first-child{
    background: linear-gradient(151deg, #161F8F 35%, #161F8F 100%);    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}
.m-container .reasontobuy-item-large-text:last-child {
    margin-left: 16.354167vw;
}

.m-container .reasontobuy-item-large-text span {
    font-size: 0.327em;
}

.m-container .reasontobuy-swiper-btn-container {
    will-change: transform;
    position: relative;
}

.m-container .swiper-slide-active .reasontobuy-item-5-phone-item {
    opacity: 1;
}

.m-container .reasontobuy-item-5-phone-item:nth-of-type(1) {
    transform: translateX(75%);
}

.m-container .reasontobuy-item-5-phone-item:nth-of-type(2) {
    transform: translateX(25%);
}

.m-container .reasontobuy-item-5-phone-item:nth-of-type(4) {
    transform: translateX(-25%);
}

.m-container .reasontobuy-item-5-phone-item:nth-of-type(5) {
    transform: translateX(-75%);
}

.m-container .swiper-slide-active .reasontobuy-item-5-phone-item:nth-of-type(3) {
    transition: opacity 1s ease .1s;
}

.m-container .swiper-slide-active .reasontobuy-item-5-phone-item:nth-of-type(2),
.m-container .swiper-slide-active .reasontobuy-item-5-phone-item:nth-of-type(4) {
    transform: translateX(0);
    transition: opacity 1s ease .5s, transform 1s ease .5s;
}

.m-container .swiper-slide-active .reasontobuy-item-5-phone-item:nth-of-type(1),
.m-container .swiper-slide-active .reasontobuy-item-5-phone-item:nth-of-type(5) {
    transform: translateX(0);
    transition: opacity 1s ease .9s, transform 1s ease .5s;
}

.m-container .reasontobuy-swiper-btn-container:hover .btn-border-bg-item,
.m-container .reasontobuy-swiper-btn-container:hover .btn-shodow-bg-item {
    background-image: conic-gradient(#2997FF 0%, #2997FF 15%, #2997FF 15%, #2997FF 50%, #2997FF 50%, #2997FF 64%, #2997FF 64%);
    animation-play-state: paused;
}

.m-container .reasontobuy-swiper-btn-container:hover .btn-border-shodow-container {
    opacity: 1;
}

.m-container .reasontobuy-swiper-btn-shdow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.m-container .reasontobuy-swiper-btn-shdow-top-bottom {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 2px;
    border-radius: 4.167vw;
    z-index: 2;
    will-change: transform;
}

.m-container .reasontobuy-swiper-btn-shdow-top-bottom::before {
    position: absolute;
    display: block;
    content: "";
    border-radius: 100%;
    background-color: #BCB09E;
    filter: blur(13px);
    will-change: transform;
    top: 0;
    left: 50%;
    width: 64%;
    height: 60%;
    opacity: .2;
    transition: opacity 0.6s;
    transform: translate3d(-50%, -50%, 0);
}

.m-container .reasontobuy-swiper-btn-shdow-top-bottom::after {
    position: absolute;
    display: block;
    content: "";
    border-radius: 100%;
    background-color: #BCB09E;
    filter: blur(13px);
    will-change: transform;
    bottom: 0;
    left: 50%;
    width: 64%;
    height: 60%;
    opacity: .2;
    transition: opacity 0.6s;
    transform: translate3d(-50%, 50%, 0);
}

.m-container .reasontobuy-swiper-btn-shdow-left-right::before {
    position: absolute;
    display: block;
    content: "";
    border-radius: 100%;
    background-color: #BCB09E;
    filter: blur(7px);
    will-change: transform;
    top: 50%;
    left: 0;
    width: 30%;
    height: 52.5%;
    opacity: .4;
    transition: opacity 0.6s;
    transform: translate3d(-50%, -50%, 0);
}

.m-container .reasontobuy-swiper-btn-shdow-left-right::after {
    position: absolute;
    display: block;
    content: "";
    border-radius: 100%;
    background-color: #BCB09E;
    filter: blur(7px);
    will-change: transform;
    top: 50%;
    right: 0;
    width: 30%;
    height: 52.5%;
    opacity: .4;
    transition: opacity 0.6s;
    transform: translate3d(50%, -50%, 0);
}

.m-container .reasontobuy-swiper-btn-shdow-left-right {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 2px;
    border-radius: 4.167vw;
    z-index: 2;
    will-change: transform;
}

.m-container .reasontobuy-swiper-btns {
    display: flex;
    align-items: center;
    height: 3.333vw;
    padding: 0 1.041667vw;
    border-radius: 999px;
    will-change: transform;
    background: #F5F6FD;
    z-index: 2;
}


.m-container .btns-highlight {
    width: 5.416667vw;
    position: absolute;
    top: 1px;
    right: .390625vw;
    pointer-events: none;
    filter: blur(1px);
}

.m-container .btns-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    box-shadow: -.260417vw .3125vw .416667vw #000000;
    opacity: 0.05;
}

.m-container .reasontobuy-swiper-btns .reasontobuy-swiper-prev-btn,
.m-container .reasontobuy-swiper-btns .reasontobuy-swiper-next-btn {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 0;
    transition: opacity 0.3s;
    outline: 0;
    width: 2.083333vw;
}

@media (any-hover: hover) and (pointer: fine) {


    .m-container .reasontobuy-swiper-prev-btn:hover,
    .m-container .reasontobuy-swiper-next-btn:hover {
        opacity: 0.6;
    }
}

.m-container .reasontobuy-control-container .reasontobuy-swiper-btns .btn-disable {
    cursor: default;
    opacity: 0.3;
}

.m-container .reasontobuy-swiper-btns .reasontobuy-swiper-pagination {
    display: flex;
    justify-content: center;
    width: auto;
    margin: 0 0.9375vw;
}

.m-container .reasontobuy-control-container {
    position: relative;
    display: flex;
    justify-content: center;
}

.m-container .reasontobuy-control-container .reasontobuy-swiper-btns .swiper-pagination-bullet {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.520833vw;
    height: 0.520833vw;
    margin-right: 0.520833vw;
    margin-left: 0;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0.3;
    border-radius: 100%;
    outline: 0;
    background: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .reasontobuy-control-container .reasontobuy-swiper-btns .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
        opacity: 0.6;
    }
}

.m-container .reasontobuy-control-container .reasontobuy-swiper-btns .swiper-pagination-bullet-active {
    cursor: default;
    opacity: 1;
}

.m-container .reasontobuy-swiper-btns .swiper-pagination-bullet:last-child {
    margin-right: 0;
}

.m-container .shine-wrapper .shine-item {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(-0.0001px);
}

.m-container .shine-wrapper .shine-item::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    content: "";
    background-image: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
    filter: blur(5px);
}

.m-container .shine-wrapper .shine-background {
    width: 1.5625vw;
    height: 1.5625vw;
}

.m-container .video-control-btn-container.shine-wrapper .shine-background {
    width: 1.5625vw;
    height: 1.5625vw;
}

.m-container .shine-wrapper .shine-background.scale {
    transform: scale(1.3);
}

.m-container .shine-wrapper .shine-background::after {
    opacity: 1;
}

.m-container .swiper-prev-btn .shine-background,
.m-container .swiper-next-btn .shine-background {
    width: 1.875vw;
    height: 1.875vw;
}

.m-container .shine-wrapper .shine-border {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* padding: 4px; */
    pointer-events: none;
    border-radius: 9999px;
    -webkit-border-radius: 9999px;
    transform: translateZ(0.0001px);
    will-change: transform;
}

.m-container .shine-wrapper .shine-border::before {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 9999px;
    -webkit-border-radius: 9999px;
    transform: translateZ(-0.0001px);
    will-change: transform;
}

.m-container .shine-wrapper .shine-border::after {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 9999px;
    -webkit-border-radius: 9999px;
}

.m-container .shine-wrapper.shine-cursor {
    transition: --shine-x 0.3s linear, --shine-y 0.3s linear, opacity 0.3s linear;
}

.m-container .shine-wrapper.shine-cursor .shine-item {
    transform: translate3d(calc(var(--shine-x, 0) - 50%), calc(var(--shine-y, 0) - 50%), 0);
    opacity: 0;
    transition: opacity .3s;
}

.m-container .shine-wrappev::after {
    transform: scale(0);
    transition: all .3s;
}


.m-container .shine-on-bullet.shine-wrapper.shining .shine-item {
    opacity: 0.8;
}


.m-container .swiper-other-btn.shine-wrapper.shining .shine-item {
    opacity: 0.8;
}

.m-container .shine-on-swiperbtn.shine-wrapper.shining .shine-item {
    opacity: 0.8;
}

.m-container .shine-wrapper.shining .shine-item::after {
    transform: scale(0.8);
}

.m-container .shine-wrapper.shine-on-bullet .shine-item::after {
    transform: scale(0.9);
}

.m-container .shine-wrapper.shine-on-swiperbtn .shine-item::after {
    transform: scale(1.5);
}

.m-container .product-subtitle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25vw;
}

.m-container .design-intro {
    overflow: hidden;

}

.m-container .design-intro .design-intro-text {
    width: 37.708333vw;
    margin: 1.45833333vw auto 0;
}

.m-container .design-intro-subtitle .product-subtitle-icon {
    width: 6.25vw;
}

.m-container .intro-title {
    display: none;
}

.m-container .intro-title-video {
    width: 50vw;
    margin: 0 auto;
}

.m-container .product-subtitle-text {
    color: #111B9B;
    font-size: 1.25vw;
    line-height: 1.25;
}

.m-container .visuals-intro {
    position: relative;
    z-index: 2;
}

.m-container .visuals-intro-subtitle .product-subtitle-icon {
    width: 6.25vw;
}

.m-container .design-intro-video-popup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.m-container .design-color {
    position: relative;
    width: 100%;
}

.m-container .design-color-swiper-container {
    margin: 0 auto;
    width: 100%;
}

.m-container .design-color-swiper-container .swiper {
    width: 100%;
}
.m-container .design-color-swiper-container .swiper .swiper-slide{
    
    will-change: opacity;
}
.m-container .design-color-swiper-container .product-disclaimer {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    opacity: 0.66;
}

.m-container .design-color-image {
    width: 100%;
    will-change: opacity;
}

.m-container .design-color-image img {
    width: 100%;
    height: auto;
}

.m-container .design-color-text-swiper-container {
    margin: 0 auto;
    width: 81.25vw;
    text-align: center;
}

.m-container .design-color-text {
    text-align: center;
}

.m-container .design-color-control-btns-container {
    position: relative;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: max-content;
    height: 3.333vw;
    will-change: transform;
}

.m-container .design-color-control-btn {
    cursor: pointer;
    margin-right: .8333vw;
    line-height: 1;
    position: relative;
}

.m-container .design-color-control-btn[data-id="3"] {
    margin-right: 0;
}

.m-container .design-color-control-btn-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.m-container .design-color-control-btn-image {
    position: relative;
}

.m-container .design-color-control-btn-image svg {
    width: 2.03125vw;
    height: 2.03125vw;
    overflow: visible;
}

.m-container .design-color-control-btn-image .design-color-change-opacity {
    opacity: 0;
    will-change: opacity;
    transition: opacity .4s;
}

.m-container .design-color-control-btns-container[data-index="0"] [data-id="0"] .design-color-change-opacity {
    opacity: 1;
}

.m-container .design-color-control-btns-container[data-index="1"] [data-id="1"] .design-color-change-opacity {
    opacity: 1;
}

.m-container .design-color-control-btns-container[data-index="2"] [data-id="2"] .design-color-change-opacity {
    opacity: 1;
}

.m-container .design-color-control-btns-container[data-index="3"] [data-id="3"] .design-color-change-opacity {
    opacity: 1;
}

.m-container .design-color-control-btn .design-color-control-btn-item {
    border-radius: 9999px;
}


.m-container .design-color-control-text-swiper-container {
    margin: 0 .833333vw 0 auto;
    width: 53.333333vw;
}

.m-container .design-color-control-text-swiper-container .swiper-slide[data-id="0"] .design-color-control-text {
    color: #111B9B;
}

.m-container .design-color-control-text-swiper-container .swiper-slide[data-id="2"] .design-color-control-text {
    color: #333333;
}

.m-container .design-color-control-text-swiper-container .swiper-slide .swiper-slide:nth-child(1) {
    position: relative;
}

.m-container .design-color-control-text-swiper-container .swiper-slide {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .3s;
    transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
    will-change: opacity;
}

.m-container .design-color-control-text-swiper-container[data-index="0"] [data-id="0"] {
    opacity: 1;
}

.m-container .design-color-control-text-swiper-container[data-index="1"] [data-id="1"] {
    opacity: 1;
}

.m-container .design-color-control-text-swiper-container[data-index="2"] [data-id="2"] {
    opacity: 1;
}

.m-container .design-color-control-text-swiper-container[data-index="3"] [data-id="3"] {
    opacity: 1;
}

.m-container .swiper-fade.design-color-control-text-swiper .swiper-slide:not(.swiper-slide-active) {
    transition-delay: 0s;
}

.m-container .design-color-control-container {
    display: flex;
    width: 67.5vw;
    margin: 0 auto;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 9.770833vw;
    z-index: 2;
}

.m-container .design-color-control-text-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m-container .design-color-control-text-swiper .swiper-slide:first-child {
    position: relative;
}

.m-container .design-color-control-des {
    color: #333333;
    font-size: 1.145833vw;
    font-weight: 400;
}

.m-container .design-color-control-text {
    width: auto;
    color: #000;
    font-size: 1.145833vw;
    font-weight: 500;
    text-align: center;
}

.m-container .design-color-control-line {
    display: none;
}

.m-container .design-color-phone-swiper-container {
    width: 20.104167vw;
    position: absolute;
    top: 1.583333vw;
    left: 42vw;
    pointer-events: none;
    z-index: 3;
    transform: rotate(45deg) scale(0.7);
    transform-origin: 50%;
}

.m-container .design-color-phone-image {
    position: relative;
}

.m-container .design-color-phone-image-reflection {
    position: absolute;
    left: 76%;
    transform: translateX(-50%);
    bottom: -21.5vw;
    width: 100%;
    transform: translateX(0) rotate(-27deg);
}

.m-container .design-color-phone-swiper {
    overflow: visible;
}

@keyframes moving {
    0% {
        -webkit-transform: translate(0) rotateY(0deg) rotateX(0deg) rotate(0deg);
        -moz-transform: translate(0) rotateY(0deg) rotateX(0deg) rotate(0deg);
        transform: translate(0) rotateY(0) rotateX(0) rotate(0)
    }

    50% {
        -webkit-transform: translate(5px, 10px) rotateY(8deg) rotateX(5deg) rotate(0deg);
        -moz-transform: translate(5px, 10px) rotateY(8deg) rotateX(5deg) rotate(0deg);
        transform: translate(5px, 10px) rotateY(8deg) rotateX(5deg) rotate(0deg)
    }

    to {
        -webkit-transform: translate(0) rotateY(0deg) rotateX(0deg) rotate(0deg);
        -moz-transform: translate(0) rotateY(0deg) rotateX(0deg) rotate(0deg);
        transform: translate(0) rotateY(0) rotateX(0) rotate(0)
    }
}


.m-container .design-color-phone-swiper-container.animated .swiper-slide {
    -webkit-animation: moving 5s ease-in-out infinite forwards;
    -moz-animation: moving 5s ease-in-out infinite forwards;
    animation: moving 5s ease-in-out infinite forwards;
}

.m-container .design-color-phone-swiper-container .swiper-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity .4s linear .2s;
    will-change: opacity;
}

.m-container .design-color-phone-swiper-container .swiper-slide:first-child {
    position: relative;
}


.m-container .design-color-phone-swiper-container[data-index="0"] [data-id="0"] {
    opacity: 1;
    transition-delay: 0s;
    z-index: 2;
}

.m-container .design-color-phone-swiper-container[data-index="1"] [data-id="1"] {
    opacity: 1;
    transition-delay: 0s;
    z-index: 2;
}

.m-container .design-color-phone-swiper-container[data-index="2"] [data-id="2"] {
    opacity: 1;
    transition-delay: 0s;
    z-index: 2;
}

.m-container .design-color-phone-swiper-container[data-index="3"] [data-id="3"] {
    opacity: 1;
    transition-delay: 0s;
    z-index: 2;
}

.m-container .design-color-handwriting-container {
    width: 26.041667vw;
    height: 6.302083vw;
    position: absolute;
    top: -1vw;
    left: 46vw;
    z-index: 2;
}

.m-container .design-color-handwriting-item {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .2s linear;
    will-change: opacity;
    top: 0;
    left: 0;
}

.m-container .design-color-handwriting-item:first-child {
    position: relative;
}

.m-container .design-color-handwriting-container[data-index="0"] [data-id="0"] {
    opacity: 1;
}

.m-container .design-color-handwriting-container[data-index="1"] [data-id="1"] {
    opacity: 1;
}

.m-container .design-color-handwriting-container[data-index="2"] [data-id="2"] {
    opacity: 1;
}

.m-container .design-color-handwriting-container[data-index="3"] [data-id="3"] {
    opacity: 1;
}

.m-container .design-color-handwriting-icon {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.m-container .design-color-handwriting-icon-1 {
    width: 2.083333vw;
    left: 0;
    top: .2vw;
    transform: translate(0, 1.5625vw) rotate(41deg);
}

.m-container .design-color-handwriting-icon-2 {
    width: 2.864583vw;
    left: 2.8vw;
    top: -.9167vw;
    transform: translate(.104167vw, 2.916667vw) rotate(9deg);
}

.m-container .design-color-handwriting-icon-3 {
    width: 3.489583vw;
    left: 6.458333vw;
    top: -.9375vw;
    transform: translate(0, 2.708333vw) rotate(-15deg);
}

.m-container .design-color-handwriting-icon-4 {
    width: 2.916667vw;
    left: 10.364583vw;
    top: .833333vw;
    transform: translate(0, 1.041667vw) rotate(-26deg)
}

.m-container .design-color-handwriting-icon-5 {
    width: 2.864583vw;
    left: 13.65vw;
    top: 2.083vw;
    transform: translate(0, -.3125vw) rotate(-16deg);
}


.m-container .design-color-handwriting-icon-6 {
    width: 3.854167vw;
    left: 16.875vw;
    top: 3.229167vw;
    transform: translate(0, -.833333vw) rotate(0deg);
}

.m-container .design-popup {
    position: relative;
}

.m-container .design-popup .product-disclaimer {
    width: 81.25vw;
    margin: 1.822917vw auto 0;
    color: #999999;
    text-align: right;
    opacity: 1;
}

.m-container .section-percent {
    position: absolute;
    width: 100%;
    left: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.m-container .section-percent-1 {
    min-height: 93.28125vw;
    top: 186.770833vw;
    display: none;
}

.m-container .section-percent-1 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: 57.65625vw;
    width: 93.28125vw;
    height: 93.28125vw;
    transform: scaleX(0.95);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-2 {
    min-height: 93.28125vw;
    top: 92.770833vw;
    opacity: 0;
}

.m-container .section-percent-2 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: 57.65625vw;
    width: 93.28125vw;
    height: 93.28125vw;
    transform: scaleX(0.95);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-3 {
    min-height: 113.020833vw;
    top: 98.583333vw;
}

.m-container .section-percent-3 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: 52.864583vw;
    width: 124.166667vw;
    height: 124.166667vw;
    transform: scaleX(0.91);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-15 {
    min-height: 93.28125vw;
    top: 281vw;
}

.m-container .section-percent-15 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: -41.65625vw;
    width: 93.28125vw;
    height: 93.28125vw;
    transform: scaleX(0.95);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-4 {
    min-height: 113.020833vw;
    top: 175.583333vw;
}

.m-container .section-percent-4 .circle-gradient-bg {
    position: absolute;
    top: 0;
    right: 52.864583vw;
    width: 124.166667vw;
    height: 124.166667vw;
    transform: scaleX(0.91);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-5 {
    min-height: 93.28125vw;
    top: 84vw;
}

.m-container .section-percent-5 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: 57.65625vw;
    width: 93.28125vw;
    height: 93.28125vw;
    transform: scaleX(0.95);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-6 {
    min-height: 93.28125vw;
    top: 108.020833vw;
}

.m-container .section-percent-6 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: -71.65625vw;
    width: 106.6875vw;
    height: 106.6875vw;
    transform: scaleX(0.91);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-7 {
    min-height: 93.28125vw;
    top: 110.020833vw;
}

.m-container .section-percent-7 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: 57.65625vw;
    width: 93.28125vw;
    height: 93.28125vw;
    transform: scaleX(0.91);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-8 {
    min-height: 93.28125vw;
    top: 297vw;
}

.m-container .section-percent-8 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: -71.65625vw;
    width: 106.6875vw;
    height: 106.6875vw;
    transform: scaleX(0.91);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-9 {
    min-height: 93.28125vw;
    top: 410vw;
}

.m-container .section-percent-9 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: 57.65625vw;
    width: 93.28125vw;
    height: 93.28125vw;
    transform: scaleX(0.95);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-10 {
    min-height: 93.28125vw;
    top: 450vw;
    opacity: 0;
}

.m-container .section-percent-10 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: -68.3125vw;
    width: 128.25vw;
    height: 128.25vw;
    transform: scaleY(0.6156);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-11 {
    min-height: 93.28125vw;
    top: 529vw;
}

.m-container .section-percent-11 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: 57.65625vw;
    width: 93.28125vw;
    height: 93.28125vw;
    transform: scaleX(0.95);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .section-percent-12 {
    min-height: 93.28125vw;
    top: 660vw;
}

.m-container .section-percent-12 .circle-gradient-bg {
    position: absolute;
    top: 0;
    left: -68.3125vw;
    width: 114.25vw;
    height: 114.25vw;
    transform: scaleY(0.6156);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
}

.m-container .design-popup-container {
    margin: 0 auto;
    width: 81.25vw;
    position: relative;
}

.m-container .design-popup-image {
    border-radius: 1.666667vw;
    will-change: transform;
    overflow: hidden;
    mix-blend-mode: darken;
}

.m-container .design-popup-video-popup-container {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 2.083333vw;
    right: 2.083333vw;
}

.m-container .visuals-intro-image {
    width: 100%;
    height: 50vw;
    overflow: hidden;
}

.m-container .visuals-intro-image img {
    width: 100%;
    will-change: transform;
    transform: translateY(-25vw) scale(1.1);
}

.m-container .visuals-intro-text {
    width: 54.0625vw;
    margin: 0 auto;
    text-align: center;
}

.m-container .visuals-scroll {
    position: relative;
}

.m-container .visuals-scroll-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.m-container .visuals-scroll-mask {
    width: 46.875vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    pointer-events: none;
    bottom: -31vw;
    z-index: 3;
}

.m-container .visuals-scroll-mask::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 30vw;
    left: 0;
    top: 0vw;
    background: linear-gradient(to bottom, transparent 0%, #ffffff 18%);
    opacity: 1;
}

.m-container .visuals-scroll-title {
    width: 20vw;
}

.m-container .visuals-carousel-box {
    width: 26.5625vw;
    height: 35.416667vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.m-container .visuals-carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
}

.m-container .visuals-carousel-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    cursor: none;
    overflow: hidden;
}

.m-container .visuals-carousel-wrapper {
    width: 26.5625vw;
    height: 35.416667vw;
    position: relative;
    overflow: visible;
}

.m-container .visuals-carousel-wrapperswiper {
    height: 100%;
}

.m-container .visuals-carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.m-container .visuals-carousel-slide-1 {
    z-index: 4;
}

.m-container .visuals-carousel-slide-2 {
    z-index: 3;
}

.m-container .visuals-carousel-slide-3 {
    z-index: 2;
}

.m-container .visuals-carousel-slide-4 {
    z-index: 1;
}

.m-container .visuals-carousel-slide-1,
.m-container .visuals-carousel-slide-2 {
    transform: scale(0.81889) translateX(-10%) translateY(105%) rotate(20deg);
}

.m-container .visuals-carousel-slide-3,
.m-container .visuals-carousel-slide-4 {
    opacity: 0;
    transform: scale(0.81889) translateX(0%) translateY(150%) rotate(-15deg);
}

.m-container .visuals-carousel-slide.prev {
    opacity: 0;
    transform: scale(0.81889) translateX(50%) translateY(-130%) rotate(15deg);
}

.m-container .visuals-carousel-slide.before {
    opacity: 0;
    transform: scale(0.81889) translateX(50%) translateY(-130%) rotate(15deg);
}

.m-container .visuals-carousel-slide-2.prev {
    transform: scale(0.81889) translateX(-50%) translateY(-130%) rotate(-20deg);
}

.m-container .visuals-carousel-slide-2 .section-picture {
    opacity: 0;
    transform: translateY(2vw);
    will-change: opacity;
    transition: all .5s;
}

.m-container .visuals-carousel-slide-2 .section-picture.animated {
    transform: translateY(0);
    opacity: 1;
}

.m-container .visuals-carousel-slide.active {
    opacity: 1;
    transform: scale(1) translateX(0%) translateY(0%) rotate(0deg);
}

.m-container .visuals-carousel-slide.next {
    opacity: 1;
    transform: scale(0.81889) translateX(-10%) translateY(105%) rotate(20deg);
}

.m-container .visuals-carousel-slide.next+.visuals-carousel-slide {
    opacity: 0;
}

.m-container .visuals-carousel-arrow-wrap {
    position: absolute;
    width: 3.333333vw;
    height: 3.333333vw;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 1;
    pointer-events: none;
    transform: scale(0.5);
    will-change: transform, opacity;
    transition: opacity .5s;
}

.m-container .visuals-carousel-arrow-wrap.show {
    opacity: 1;
    transform: scale(1);
}

.m-container .visuals-carousel-arrow-wrap .visuals-carousel-arrow-container {
    transform: scale(0.5);
}

.m-container .visuals-carousel-arrow-wrap.show .visuals-carousel-arrow-container {
    transform: scale(1);
}

.m-container .visuals-carousel-arrow-wrap.change-opacity {
    opacity: 0;
}

.m-container .visuals-carousel-arrow-container {
    will-change: transform;
}

.m-container .visuals-carousel-arrow-wrap.change-opacity .visuals-carousel-arrow-container {
    transform: scale(0.5);
}

.m-container .visuals-carousel-arrow {
    width: 1.041667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: .416667vw 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.3;
    will-change: opacity;
    transition: opacity .5s;
}

.m-container .visuals-carousel-arrow-up {
    top: .15625vw;
}

.m-container .visuals-carousel-arrow-down {
    bottom: .15625vw;
}

.m-container .visuals-carousel-arrow .section-picture,
.m-container .visuals-carousel-arrow img {
    width: 100%;
}

.m-container .visuals-carousel-arrow.active {
    opacity: 1;
}

.m-container .visuals-carousel-arrow.disabled {
    opacity: 0.3;
}


@media (any-hover: hover) and (pointer: fine) {
    .m-container .visuals-scroll-swiper-container .swiper-slide:not(.no-clickto):not(.swiper-slide-active) {
        cursor: default;
    }

}

.m-container .visuals-scroll-swiper-container .section-picture {
    width: 26.5625vw;
    margin: 0 auto;
    border-radius: 1.666667vw;
    overflow: hidden;
}

.m-container .visuals-scroll-text {
    width: 20.052083vw;
    will-change: margin;
    margin-left: 3.697917vw;
}

.m-container .visuals-carousel-arrow-container {
    width: 100%;
    height: 100%;
}

.m-container .visuals-carousel-arrow-container::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    box-shadow: inset 0 0.45vw 0.525vw #434CBE78;
}

.m-container .visuals-carousel-arrow-container::after {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 9999px;
    pointer-events: none;
    -webkit-border-radius: 9999px;
    box-shadow: inset 0 -0.125vw 0.25625vw #A4AEF1;
    transform: translateZ(-0.0001px);
    will-change: transform;
}

.m-container .visuals-arrow-bg {
    width: 2.5vw;
    height: 2.5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 9999px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
    filter: blur(.260417vw);
    z-index: -1;
}

.m-container .visuals-arrow-btn .btn-highlight {
    width: 2.34375vw;
    height: .989583vw;
    top: .15625vw;
    right: .208333vw;
}


.m-container .visuals-gallery {
    overflow: hidden;
}

.m-container .visuals-gallery-container {
    position: relative;
}

.m-container .visuals-gallery-swiper-container {
    position: relative;
    width: 100%;
    transform: rotate(-5deg) translateX(8%) translateY(10%);
    opacity: 0;
    transition: all .6s linear;
    will-change: transform, opacity;
}

.m-container .visuals-gallery-container.animated .visuals-gallery-swiper-container {
    opacity: 1;
    transform: rotate(0deg) translateX(0%) translateY(0%);
}

.m-container .visuals-gallery-swiper-container>.swiper {
    overflow: inherit;
    width: 83.333333vw;
    margin: 0 auto 0 3.66667vw;
    overflow: visible;
}

.m-container .visuals-gallery-swiper-container .swiper-slide {
    transform-origin: top;
    will-change: transform, opacity;
    width: 20.9375vw;
    transition-property: transform, opacity;
}

.m-container .visuals-gallery-swiper-container .swiper-slide-next {
    transform: rotate(-20deg) scale(0.854) translateY(-33%);
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .visuals-gallery-swiper-container .swiper .swiper-slide:not(.no-clickto):not(.swiper-slide-active) {
        cursor: default;
    }
}

.m-container .visuals-gallery-swiper-container .swiper-slide-active {
    transform: rotate(-10deg) scale(0.9343) translateY(-8%);
}

.m-container .before {
    transform: rotate(5deg) scale(1.1) translateX(-50%) translateY(8%);
    opacity: 0
}


.m-container .before2 {
    transform: rotate(5deg) translateY(-8%);
}

.m-container .before3 {
    transform: rotate(-10deg) scale(0.9343) translateY(-8%);
}

.m-container .after {
    transform: rotate(-30deg) scale(0.787) translateY(-82%);
}

.m-container .after3 {
    transform: rotate(-30deg) scale(0.787) translateY(-150%);
}

.m-container .after2 {
    transform: rotate(-30deg) scale(0.787) translateY(-150%);
}

.m-container .visuals-gallery-swiper-highlight {
    width: 22.916667vw;
    height: 33.333333vw;
    position: absolute;
    top: -3.911111vw;
    left: 36.1vw;
    background-image: linear-gradient(163deg, #EEF0FB 11%, #DAE0FF 80%, #DAE0FF);
    border-radius: 1.666667vw;
    transform: rotate(-10deg);
    transition: all .5s linear;
    opacity: 0;
}

.m-container .visuals-gallery-container.animated3 .visuals-gallery-swiper-highlight {
    opacity: 1;
}

.m-container .visuals-gallery-swiper-highlight::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.666667vw;
    box-shadow: 0 .15625vw .520833vw #000000;
    opacity: 0.1;
}

.m-container .visuals-gallery-swiper-control-btn {
    position: relative;
}

.m-container .visuals-gallery-content {
    width: 47.291667vw;
    margin: 0 auto;
    text-align: center;
}


.m-container .visuals-gallery .section-picture {
    border-radius: 1.666667vw;
    overflow: hidden;
    will-change: transform;
    width: 100%;
    transition-duration: .8s;
}

.m-container .visuals-gallery-text-swiper-container {
    width: 18.958333vw;
    transform: rotate(-10deg);
    color: #333333;
    position: absolute;
    left: 40.625vw;
    bottom: 9.8vw;
    font-size: 1.041667vw;
    opacity: 0;
    will-change: transform, opacity;
    transition: all .6s linear;
}

.m-container .visuals-gallery-container.animated3 .visuals-gallery-text-swiper-container {
    opacity: 1;
}

.m-container .visuals-gallery-text-swiper-container .swiper-slide {
    opacity: 0 !important;
}

.m-container .visuals-gallery-text-swiper-container .swiper-slide-active {
    opacity: 1 !important;
}

.m-container .visuals-gallery-des {
    font-weight: 500;
    text-align: left;
    line-height: 1.6;
    color: #333333;
}


.m-container .visuals-gallery-icon-container {
    position: absolute;
    width: 13.958333vw;
    height: 3.59375vw;
    bottom: 38.177083vw;
    left: 17vw;
    opacity: 0;
    transform: translateX(2vw);
    will-change: transform, opacity;
    transition: all .5s linear;
}

.m-container .visuals-gallery-container.animated2 .visuals-gallery-icon-container {
    opacity: 1;
    transform: translateX(0);
}

.m-container .visuals-gallery-icon-1 {
    width: 6.822917vw;
}

.m-container .visuals-gallery-icon-2 {
    width: 7.03125vw;
    position: absolute;
    bottom: 0;
    right: 0;
}

.m-container .visuals-gallery-swiper-control-container {
    opacity: 0;
    pointer-events: none;
    transition: all .5s linear;
}

.m-container .visuals-gallery-swiper-control-container .shine-wrapper .shine-background {
    width: 1.5625vw;
    height: 1.5625vw;
}

.m-container .visuals-gallery-swiper-control-container .shine-wrapper.shining .shine-item::after {
    transform: scale(1);
}

.m-container .visuals-gallery-container.animated3 .visuals-gallery-swiper-control-container {
    opacity: 1;
    pointer-events: all;
}

.m-container .xmage-video-container {
    position: relative;
}

.m-container .xmage-video-wrap {
    width: 100%;
    height: 50vw;
    position: relative;
    overflow: hidden;
}

.m-container .xmage-video-wrap .product-disclaimer {
    position: absolute;
    right: 1.666667vw;
    bottom: 1.666667vw;
}

.m-container .xmage-video-image {
    position: relative;
    mix-blend-mode: darken;
    will-change: transform;
    transform: translateY(-20vw) scale(1.1);
}

.m-container .xmage-video .product-subtitle-icon {
    width: 6.510417vw;
}

.m-container .xmage-video-popup-container {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 3.333333vw;
    left: 50%;
    transform: translateX(-50%);
}

.m-container .section-xmage {
    position: relative;
}

.m-container .xmage-intro-title {
    width: 67.5vw;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.m-container .xmage-intro-title h3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.m-container .xmage-intro-web {
    display: block;
}

.m-container .xmage-change-padding {
    position: relative;
    display: inline-block;
    height: 5.3125vw;
    padding: 0;
}

.m-container .xmage-intro-icon {
    width: 5.3125vw;
    height: 5.3125vw;
    position: absolute;
    top: .260417vw;
    left: 50%;
    transform: translate(-50%, 0) rotate(60deg) scale(0.1);
    opacity: 0;
}

.m-container .xmage-intro-image {
    position: relative;
    width: 67.5vw;
    border-radius: 1.666667vw;
    overflow: hidden;
    margin: 0 auto;
}

.m-container .xmage-intro-image .product-disclaimer {
    position: absolute;
    left: 1.25vw;
    bottom: 1.25vw;
}

.m-container .xmage-intro-image-2 {
    border: solid 2px #4F4840;
}

.m-container .xmage-intro-disclaimer {
    position: relative;
    width: 81.25vw;
    margin: 0 auto;
    text-align: right;
}

.m-container .xmage-intro-text {
    width: 47.03125vw;
    margin: 0 auto;
    text-align: center;
}

.m-container .xmage-intro-image video,
.m-container .xmage-intro-image img {
    border-radius: .8333vw;
}

.m-container .video-pop-play-container.video-pop-play-style2 {
    width: max-content;
    padding: 0 .833333vw 0 1.666667vw;
    height: 3.333333vw;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    will-change: transform;
    box-shadow: inset 0 0.45vw 0.525vw #434CBE78;
}

.m-container .video-pop-play-container.video-pop-play-style2 .video-pop-play-icon {
    width: 1.666667vw;
    height: 1.666667vw;
}

.m-container .video-pop-play-container.video-pop-play-style2::after {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 9999px;
    pointer-events: none;
    -webkit-border-radius: 9999px;
    box-shadow: inset 0 -0.125vw 0.25625vw #A4AEF1;
    transform: translateZ(-0.0001px);
    will-change: transform;
}

.m-container .video-pop-play-style2 .video-pop-play-icon::before {
    content: none;
}

.m-container .video-pop-play-style2 .video-pop-play-text {
    color: #fff;
    font-size: .9375vw;
}

.m-container .video-pop-play-style2 .video-pop-play-icon-bg {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
    z-index: -1;
}

.m-container .video-pop-play-style2 .video-pop-play svg {
    width: 1.666667vw;
    height: 1.666667vw;
}

.m-container .video-pop-play-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 9999px;
}

.m-container .xmage-video-text {
    width: 39.583333vw;
    margin: 0 auto;
    text-align: center;
}

.m-container .xmage-intro-item-text {
    color: #85858A;
    font-size: .9375vw;
    line-height: 1.5;
}

.m-container .xmage-intro-item-text {
    font-size: 1.041667vw;
}

.m-container .xmage-intro-item-text {
    color: #CECECE;
}

.m-container .xmage-intro-item-text {
    line-height: 1.6;
}

.m-container .xmage-intro-space {
    width: 9.895833vw;
}

.m-container .xmage-intro-icon {
    width: 5.104167vw;
}

.m-container .section-harmonyos .harmonyos-title {
    width: max-content;
    margin: 0 auto;
    position: relative;
}

.m-container .section-harmonyos .intro-title-video {
    width: 100%;
}

.m-container .section-harmonyos .product-media-video-container {
    clip-path: inset(0 0 2px 2px);
}
.m-container .section-harmonyos .product-media-video-container video{
    mix-blend-mode: darken;
}

.m-container .section-harmonyos .h2 {
    font-size: 8.333333vw;
    color: #1F69FF;
    font-weight: bold;
    position: relative;
}

.m-container .section-harmonyos .harmonyos-icon {
    position: absolute;
}

.m-container .section-harmonyos .harmonyos-icon-1 {
    width: 2.864583vw;
    left: -1.979167vw;
    top: 4.427083vw;
}

.m-container .section-harmonyos .harmonyos-icon-2 {
    width: 4.322917vw;
    top: -1.22917vw;
    left: 21.75vw;
}

.m-container .section-harmonyos .harmonyos-icon-3 {
    width: 3.489583vw;
    top: 3.65vw;
    left: 38.5vw;
}

.m-container .harmonyos-text {
    width: 80%;
    margin: .833333vw auto 0;
    font-size: 4.166667vw;
    line-height: 1.25;
    text-align: center;
    color: #000;
}

.m-container .theme-intro {
    position: relative;
    z-index: 2;
}

.m-container .theme-intro-animation {
    position: relative;
    display: inline-block;
}

.m-container .theme-intro-animation::before {
    width: 100%;
    height: 1.1vw;
    content: '';
    position: absolute;
    top: 0.33vw;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
}

.m-container .theme-intro-animation::after {
    width: 3vw;
    height: .208333vw;
    content: '';
    position: absolute;
    top: .85vw;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
}

.m-container .theme-intro-title .theme-intro-animation img {
    width: 4.166667vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0.9vw;
}

.m-container .theme-intro-container {
    width: 47.1875vw;
    margin: 0 auto;
    text-align: center;
}

.m-container .theme-popup-video-popup-container .video-pop-play-text {
    color: #666666;
    font-size: 1.041667vw;
    margin-right: .416667vw;
}

.m-container .theme-popup-video-popup-container .video-pop-play-icon {
    width: 1.666667vw;
    height: 1.666667vw;
}

.m-container .theme-popup-video-popup-container .video-pop-play-icon::before {
    box-shadow: inset -.104167vw .208333vw .3125vw #434CBE78;
}

.m-container .theme-popup-video-popup-container .video-pop-play-hover-bg {
    filter: blur(4px);
    width: 60%;
    height: 60%;
}

.m-container .theme-popup-video-popup-container .video-pop-play svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.m-container .theme-popup-video-popup-container .video-pop-btn-highlight {
    width: 1.25vw;
    height: .520833vw;
    filter: blur(.6px);
}

.m-container .theme-popup-video-popup-container {
    margin-top: 1.458333vw;
}

.m-container .theme-feature-bg {
    position: absolute;
    width: 100%;
    top: 16vw;
    left: 0;
}

.m-container .theme-feature-swiper {
    margin: 0 auto;
    width: 81.25vw;
    overflow: visible;
}

.m-container .theme-feature-swiper .product-disclaimer {
    color: #999999;
    opacity: 1;
    text-align: right;
}

.m-container .swiper-fade.theme-feature-swiper .swiper-slide:not(.swiper-slide-active) {
    transition-delay: 0s;
}

.m-container .theme-feature-disclaimer {
    text-align: right;
}

.m-container .theme-feature-item-row {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    position: relative;
}

.m-container .theme-feature-item-row .theme-feature-item-swiper-3 .swiper-slide {
    z-index: 2;
}

.m-container .theme-feature-item-row .theme-feature-item-swiper-3 .swiper-slide-4 {
    z-index: 1;
}

.m-container .theme-feature-item-row .swiper {
    margin: 0;
    overflow: visible;
}

.m-container .theme-feature-item-row .swiper-slide {
    width: 14.583333vw;
    position: relative;
    margin-left: 4.166667vw;
    opacity: 0;
    transform-origin: left bottom;
    will-change: transform, opacity;
}

.m-container .performance-content-item-image {
    width: 13.7vw;
    margin: 0 auto;
    border-radius: 1.875vw;
    overflow: hidden;
}

.m-container .theme-feature-item-row .swiper-slide-1 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    opacity: 1;
    transform: translateX(28.125vw);
    transform-origin: center;
}


.m-container .theme-feature-item-row .swiper-slide-2 {
    transform: rotate(-5deg);
}

.m-container .theme-feature-item-row .swiper-slide-3 {
    transform: rotate(-5deg);
}

.m-container .theme-feature-item-row .swiper-slide-4 {
    transform: rotate(-5deg);
}

.m-container .theme-feature-item-row .swiper-slide:nth-child(2) {
    margin-left: 18.59375vw;
}

.m-container .theme-feature-item-row .swiper-slide:first-child {
    margin-left: 0;
}

.m-container .theme-feature-item-phone {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.m-container .performance-content-item-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0.17vw;
}

.m-container .theme-feature-item-icon {
    width: 8.229167vw;
    position: absolute;
    transition: transform .4s ease;
    z-index: -1;
}

.m-container .theme-feature-item-icon-1 {
    width: 8.020833vw;
    top: -4.5vw;
    left: -3.6vw;
    transform: translate(4vw, 4.5vw);
}

.m-container .theme-feature-item-icon-2 {
    bottom: 0.08vw;
    right: -5.5vw;
    transform: translate(-5.5vw, 0) rotate(-5deg);
}

.m-container .theme-feature-item-icon-3 {
    bottom: 0.3vw;
    left: -7.5vw;
    transform: translate(7.5vw, 0) rotate(2deg);
}

.m-container .theme-feature-item-icon-4 {
    width: 7.083333vw;
    top: -4vw;
    left: -2.7vw;
    transform: translate(2vw, 4vw);
}

.m-container .theme-feature-item-icon-5 {
    width: 8.072917vw;
    top: -4.4vw;
    left: -2.7vw;
    transform: translate(3.1vw, 4.3vw) rotate(5deg)
}

.m-container .theme-feature-item-icon-6 {
    bottom: 0.2vw;
    right: -7.3vw;
    transform: translate(-7vw, 0);
}

.m-container .theme-feature-animation[data-index='0'].active .theme-feature-item-icon-1 {
    transform: translate(0, 0);
}

.m-container .theme-feature-animation[data-index='0'].active .theme-feature-item-icon-2 {
    transform: translate(0, 0) rotate(-5deg);
    transition-delay: .2s;
}

.m-container .theme-feature-animation[data-index='1'].active .theme-feature-item-icon-3 {
    transform: translate(0, 0) rotate(2deg);
}

.m-container .theme-feature-animation[data-index='1'].active .theme-feature-item-icon-4 {
    transform: translate(0, 0);
    transition-delay: .2s;
}

.m-container .theme-feature-animation[data-index='2'].active .theme-feature-item-icon-5 {
    transform: translate(0, 0);
}

.m-container .theme-feature-animation[data-index='2'].active .theme-feature-item-icon-6 {
    transform: translate(0, 0) rotate(-2deg);
    transition-delay: .2s;
}


.m-container .theme-feature-icon-container {
    position: absolute;
    width: 14.166667vw;
    height: 4.0625vw;
    top: 4.5vw;
    left: 52.5vw;
    opacity: 0;
    transform: translateX(-2vw);
}

.m-container .theme-feature-icon-1 {
    width: 8.4375vw;
}

.m-container .theme-feature-icon-2 {
    width: 8.489583vw;
    position: absolute;
    bottom: 0;
    right: 0;
}

.m-container .theme-feature-item-swiper-text {
    font-size: .833333vw;
    line-height: 1.6;
    text-align: center;
    margin: .520833vw auto 0;
    color: #999999;
}

.m-container .theme-feature-control-row {
    position: relative;
    width: 100%;
    height: 2.916667vw;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.m-container .theme-feature-control-row::after {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 9999px;
    pointer-events: none;
    -webkit-border-radius: 9999px;
    transform: translateZ(-0.0001px);
    will-change: transform;
}

.m-container .theme-feature-control-container {
    margin: 0 auto;
    width: 19.166667vw
}

.m-container .theme-feature-control-title-container {
    display: flex;
    justify-content: space-between;
    width: 83%;
}

.m-container .theme-feature-control-title-item {
    cursor: pointer;
    font-size: .9375vw;
    font-weight: 500;
    line-height: 1.25;
    opacity: 1;
    transition: all .6s ease;
    /* margin: 0 1.25vw; */
    will-change: transform, color, opacity;
    color: #666666;
}

@media (any-hover: hover) and (min-aspect-ratio: 6 / 5) {
    .m-container .theme-feature-control-title-item:hover {
        opacity: .6;
    }

    .m-container .theme-feature-control-row[data-index="0"] .theme-feature-control-title-item[data-id="0"]:hover {
        opacity: 1;
    }

    .m-container .theme-feature-control-row[data-index="1"] .theme-feature-control-title-item[data-id="1"]:hover {
        opacity: 1;
    }


    .m-container .theme-feature-control-row[data-index="2"] .theme-feature-control-title-item[data-id="2"]:hover {
        opacity: 1;
    }
}

.m-container .theme-feature-control-icon-container {
    display: flex;
    position: absolute;
    justify-content: space-around;
    width: 100%;
}

.m-container .theme-feature-control-icon-item {
    width: 2.1875vw;
    transform: translate(0, -2%) rotate(15deg);
    will-change: transform;
    transition: all .6s ease;
    opacity: 0;
}

.m-container .theme-feature-control-icon-item.active {
    transform: translate(0, -61%) rotate(15deg);
    opacity: 1;
}

.m-container .theme-feature-control-progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: 9999px;
    background: #F5F6FD;
}

.m-container .theme-feature-control-progress {
    width: 100%;
    height: 100%;
}

.m-container .theme-feature-control-progress-bar {
    will-change: transform;
    width: 33.33%;
    height: calc(100% - .416667vw);
    position: absolute;
    top: .208333vw;
    left: 0;
    border-radius: 9999px;
    content: "";
    background-image: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
    transition: all .6s;
}

.m-container .theme-feature-control-row[data-index="0"] .theme-feature-control-title-item[data-id="0"] {
    color: #fff;
}

.m-container .theme-feature-control-row[data-index="1"] .theme-feature-control-title-item[data-id="1"] {
    color: #fff;
}

.m-container .theme-feature-control-row[data-index="2"] .theme-feature-control-title-item[data-id="2"] {
    color: #fff;
}


.m-container .theme-feature-control-row[data-index="0"] .theme-feature-control-progress-bar {
    transform: translateX(.208333vw);
}

.m-container .theme-feature-control-row[data-index="1"] .theme-feature-control-progress-bar {
    transform: translateX(100%);
}

.m-container .theme-feature-control-row[data-index="2"] .theme-feature-control-progress-bar {
    transform: translateX(calc(200% - .208333vw));
}

.m-container .feature-control-progress-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: 9999px;
    background: #F5F6FD;
}

.m-container .feature-control-progress {
    width: 100%;
    height: 100%;
}

.m-container .feature-control-progress-bar {
    will-change: transform;
    width: 33%;
    height: calc(100% - .416667vw);
    position: absolute;
    top: .208333vw;
    left: 0;
    border-radius: 9999px;
    content: "";
    background-image: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
    transition: all .6s;
}

.m-container .feature-control-row[data-index="0"] .feature-control-title-item[data-id="0"] {
    color: #fff;
}

.m-container .feature-control-row[data-index="1"] .feature-control-title-item[data-id="1"] {
    color: #fff;
}

.m-container .feature-control-row[data-index="2"] .feature-control-title-item[data-id="2"] {
    color: #fff;
}


.m-container .feature-control-row[data-index="0"] .feature-control-progress-bar {
    transform: translateX(.208333vw);
}

.m-container .feature-control-row[data-index="1"] .feature-control-progress-bar {
    transform: translateX(calc(100% + .625vw));
}

.m-container .feature-control-row[data-index="2"] .feature-control-progress-bar {
    transform: translateX(calc(200% - .208333vw));
}

.m-container .section-theme {
    overflow: hidden;
}

.m-container .theme-intro .eyes-wrap {
    width: 1.979167vw;
    height: .885417vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: .55vw;
    z-index: 3;
}

.m-container .theme-intro .eyes {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.m-container .theme-intro .eyes .pupil {
    position: absolute;
    left: 0;
    top: 0;
    width: .833333vw;
    height: .833333vw;
    z-index: 1;
    transition: transform .15s ease;
    animation: m-blink 5s infinite;

}

@keyframes m-blink {
    0% {
        transform: scaleY(.1);
    }

    10% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1);
    }
}

.m-container .theme-intro .eyes .right {
    left: auto;
    right: 0;
    z-index: 0;
}

.m-container .theme-intro .eyes .pupil div {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 50%;
    overflow: hidden;
}

.m-container .theme-intro .eyes .pupil div>span {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.m-container .theme-intro .eyes .pupil div>span span {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: .416667vw;
    height: .416667vw;
    background-color: #9DA4CE;
    border: solid 1px #707070;
    border-radius: 50%;
    filter: blur(2px);
    transition: background-color .2s ease;
}

.m-container .disclaimer-container {
    color: #85858A;
    font-size: 12px;
    margin: 0 auto;
    width: 67.5vw;
    padding-bottom: 80px;
}

.m-container .disclaimer-container ol {
    list-style-type: decimal;
    padding-left: 2em;
}

.m-container .disclaimer-container .price {
    margin-top: 1.6em;
}

.m-container .disclaimer-container li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1.6em;
    position: relative;
}

.m-container .disclaimer-container .price {
    list-style: none;
    position: relative;
}

.m-container .disclaimer-container .price::before {
    content: "*";
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-125%);
}

.m-container .disclaimer-container .no-num {
    list-style: none;
}

.m-container .disclaimer-container .other {
    list-style: none;
    position: relative;
    margin-bottom: 0;
}

.m-container .disclaimer-container .other::before {
    content: "**";
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-125%);
}

.m-container .disclaimer-container .more-discalimer {
    list-style: none;
    margin-top: 2vw;
}

.m-container .disclaimer-container .active {
    color: #fff;
    font-weight: 800;
    opacity: 1;
}

.m-container .disclaimer-link {
    color: #2997FF;
    word-wrap: break-word;
}

.m-container .disclaimer-tips-container {
    margin-bottom: 2.08vw;
}

@media (min-width: 1920px) {
    .m-container .disclaimer-container {
        font-size: .625vw;
    }
}


/* 折叠屏 */

@media (max-aspect-ratio: 6 / 5) {
    .m-container .header-top {
        top: 0;
    }

    .m-container .hidden-web {
        display: none;
    }

    .m-container .show-web {
        display: none;
    }

    .m-container .show-pad {
        display: block;
    }

    .m-container .show-padandmob {
        display: block;
    }

    .m-container .hidden-inline-web {
        display: inline-block;
    }

    .m-container .space-300 {
        height: 21.42vw;
    }

    .m-container .space-280 {
        height: 20vw;
    }

    .m-container .space-240 {
        height: 17.14vw;
    }

    .m-container .space-200 {
        height: 14.28vw;
    }

    .m-container .space-180 {
        height: 12.857vw;
    }

    .m-container .space-160 {
        height: 11.428vw;
    }

    .m-container .space-140 {
        height: 10vw;
    }

    .m-container .space-120 {
        height: 8.57vw;
    }

    .m-container .space-100 {
        height: 7.14vw;
    }

    .m-container .space-80 {
        height: 5.71vw;
    }

    .m-container .space-64 {
        height: 4.57vw;
    }

    .m-container .space-60 {
        height: 4.28vw;
    }

    .m-container .space-48 {
        height: 3.42vw;
    }

    .m-container .space-40 {
        height: 2.85vw;
    }

    .m-container .space-32 {
        height: 2.28vw;
    }

    .m-container .space-30 {
        height: 2.14vw;
    }

    .m-container .space-24 {
        height: 1.71vw;
    }

    .m-container .space-20 {
        height: 1.428vw;
    }

    .m-container .space-16 {
        height: 1.142857vw;
    }

    .m-container .sticky-viewport {
        height: 100vh;
        top: 0;
    }

    .m-container {
        font-size: 1.14vw;
    }

    .m-container .big-title {
        font-size: 13.89vw;
        line-height: normal;
    }

    .m-container .small-title {
        font-size: 6.66vw;
        font-weight: bold;
        line-height: 1.25;
    }

    .m-container .h2 {
        font-size: 6.857vw;
    }

    .m-container .h3 {
        font-size: 4.57vw;
    }

    .m-container .subtitle {
        font-size: 6.667vw;
        font-weight: bold;
        line-height: 1.25;
    }

    .m-container .h4 {
        font-size: 3.42vw;
    }

    .m-container .h5 {
        font-size: 3.42vw;
    }

    .m-container .big-title-xs {
        font-size: 11.1vw;
    }

    .m-container .h2-xs {
        font-size: 13.333333vw;
    }

    .m-container .h3-xs {
        font-size: 11.1vw;
    }

    .m-container .h4-xs {
        font-size: 4.57vw;
    }

    .m-container p {
        font-size: 2.285vw;
    }

    .m-container .smaller-text {
        font-size: 3.6vw;
        line-height: 1.6;
    }

    .m-container .product-disclaimer {
        font-size: max(8px, 1vw);
    }

    .m-container .product-subtitle {
        font-size: 3.888vw;
    }

    .m-container .video-pop-play {
        font-size: 3.888vw;
    }

    .m-container .video-pop-play-container::before {
        backdrop-filter: blur(1vw);
    }

    .m-container .video-pop-play-container.video-pop-play-style2::after {
        box-shadow: inset 0 -.142857vw .857143vw #A4AEF1;
    }

    .m-container .video-pop-play-container.video-pop-play-style2::after .auto-video-btn {
        font-size: 3.8vw;
    }

    .m-container .common-transform-show {
        opacity: 0;
        transform: translateY(5.55vw);
    }

    .m-container .video-replay-btn {
        font-size: 4.44444vw;
        right: 1.714285vw;
        bottom: 1.714285vw;
        width: 4.571428vw;
    }

    .m-container .video-replay-btn svg {
        box-sizing: border-box;
        width: 4.44vw;
        height: 4.93vw;
        padding: 1px;
    }

    .m-container .swiper-control-container {
        margin-top: 4.571429vw;
    }

    .m-container .swiper-btn-before {
        display: none;
    }

    .m-container .swiper-prev-btn {
        margin-right: 2.857vw;
    }

    .m-container .swiper-prev-btn,
    .m-container .swiper-next-btn {
        width: 5.714vw;
        height: 5.714vw;
    }


    .m-container .swiper-prev-btn.shine-wrapper .shine-border::before,
    .m-container .swiper-next-btn.shine-wrapper .shine-border::before {
        opacity: 0;
    }

    .m-container .swiper-prev-btn .btn-highlight,
    .m-container .swiper-next-btn .btn-highlight {
        width: 4.285714vw;
        height: 1.714286vw;
        top: .285714vw;
        right: .357143vw;
    }

    .m-container .video-control-btn-container {
        right: 1.714285vw;
        bottom: 1.714285vw;
        width: 4.571428vw;
    }

    .m-container .common-popup-container .video-control-btn-container img.btn-highlight {
        width: 3.428571vw;
        height: 1.357143vw;
        top: .214286vw;
        right: .285714vw;
    }

    .m-container .huawei-product-buy-btn-container {
        flex-direction: column;
    }

    .m-container .huawei-product-buy-btn {
        margin-top: 24px;
        margin-left: 0;
    }

    .m-container .huawei-product-buy-btn-price {
        font-size: 2.857vw;
    }

    .m-container .huawei-product-buy-btn-price span {
        font-size: 1.85vw;
    }

    .m-container .product-common-swiper-item-image .video-control-btn-container {
        right: 5.55vw;
        bottom: 5.83vw;
    }

    .m-container .reasontobuy-item-container {
        flex-direction: column;
        height: 100%;
    }

    .m-container .reasontobuy-item-container .product-disclaimer {
        right: 1.714286vw;
        bottom: 1.714286vw;
    }

    .m-container .reasontobuy-item-inner-content {
        font-size: 19.583333vw;
        left: 50%;
        top: 40%;
        transform: translateX(-50%) translateY(0) translateZ(1px);
        text-align: center;
    }

    .m-container .reasontobuy-item-large-text:last-child {
        margin-left: 24vw;
    }

    .m-container .reasontobuy-item-1 .reasontobuy-item-image {
        min-height: 71.42857vw;
    }

    .m-container .reasontobuy-item-image-container {
        border-radius: 2.2857vw;
    }

    .m-container .reasontobuy-item-5-phone-container {
        display: none;
    }

    .m-container .reasontobuy-item-4-content-container {
        bottom: 43.5%;
    }

    .m-container .reasontobuy-item-4-content-text {
        font-size: 1.71428vw;
        margin-bottom: 2.428571vw;
    }

    .m-container .reasontobuy-item-4-content-num {
        font-size: 14.285714vw;
    }

    .m-container .reasontobuy-item-4-content-num:last-child {
        filter: blur(.3vw);
    }

    .m-container .kv-product-name {
        margin-top: 7.857143vw;
        padding-bottom: 5.357143vw;
    }

    .m-container .kv-content-container {
        margin-top: 7.857143vw;
        padding: 0;
    }

    .m-container .kv-product-name svg {
        width: 32.714286vw;
        height: 4.428571vw;
    }

    .m-container .kv-container .kv-image-container {
        min-height: 39.214286vw;
    }

    .m-container .kv-container .product-disclaimer {
        bottom: 1.714286vw;
        right: 1.714286vw;
    }

    .m-container .kv-slogan-container {
        font-size: 3.428571vw;
        font-weight: 500;
        margin-top: 1.714285vw;
    }

    .m-container .kv-reasontobuy {
        margin-top: 0;
    }

    .m-container .reasontobuy-item-content {
        top: 4.285714vw;
        left: 3.428571vw;
        width: 88%;
    }

    .m-container .reasontobuy-item-content-subtitle,
    .m-container .reasontobuy-item-content.text-light .reasontobuy-item-content-subtitle {
        font-size: 2.285714vw;
    }

    .m-container .reasontobuy-item-text {
        font-size: 1.571429vw;
    }

    .m-container .reasontobuy-item-large-text {
        font-size: 7.642857vw;
    }

    .m-container .reasontobuy-container.pausing .reasontobuy-item-content-title {
        opacity: 1;
    }

    .m-container .reasontobuy-item-content-subtitle,
    .m-container .reasontobuy-item-content.text-light .reasontobuy-item-content-subtitle {
        margin-top: .857143vw;
        font-size: 2.285714vw;
    }

    .m-container .reasontobuy-item-content-title {
        font-size: 2.857143vw;
        width: 100%;
    }

    .m-container .reasontobuy-item-content-text {
        color: #FFFFFF;
        font-size: 4.44vw;
    }


    .m-container .reasontobuy-container {
        padding-bottom: 0;
    }

    .m-container .reasontobuy-swiper-btns {
        border-radius: 6.28vw;
        height: 6.85714vw;
        padding: 0 0.8571428vw;
    }

    .m-container .reasontobuy-swiper-btns .reasontobuy-swiper-prev-btn,
    .m-container .reasontobuy-swiper-btns .reasontobuy-swiper-next-btn {
        width: 6.85714vw;
    }

    .m-container .reasontobuy-swiper-btns .reasontobuy-swiper-pagination {
        margin: 0 .571428vw;
    }

    .m-container .reasontobuy-control-container .reasontobuy-swiper-btns .swiper-pagination-bullet {
        margin-right: 1.714vw;
        width: 1.142vw;
        height: 1.142vw;
    }

    .m-container .reasontobuy-control-container .reasontobuy-swiper-btns .swiper-pagination-bullet:last-child {
        margin-right: 0;
    }

    .m-container .reasontobuy-container .reasontobuy-main-swiper {
        width: 90.857vw;
    }

    .m-container .kv-reasontobuy .shine-wrapper .shine-border::before {
        box-shadow: inset 0 -.142857vw .857143vw #A4AEF1;
    }

    .m-container .btns-shadow {
        box-shadow: -.571429vw .714286vw 1vw #000000;
    }

    .m-container .btns-highlight {
        width: 11.428571vw;
        top: .214286vw;
        right: .714286vw;
        filter: blur(0.8px);
    }

    .m-container .btn-highlight {
        width: 8.333333vw;
        height: 3.333333vw;
        top: .555556vw;
        right: .694444vw;
        filter: blur(0.6px);
    }


    .m-container .video-control-btn-container .btn-highlight {
        width: 3.428571vw;
        height: 1.357143vw;
        top: .214286vw;
        right: .285714vw;
        filter: blur(1px);
    }

    .m-container .product-subtitle-container {
        margin-bottom: 1.142857vw;
    }

    .m-container .design-color-handwriting-container {
        width: 37.142857vw;
        height: 9.428571vw;
        top: 1vw;
        left: 46.979167vw;
    }

    .m-container .design-color-handwriting-icon-1 {
        width: 3.571429vw;
        transform: translate(0, 0.625vw) rotate(41deg);
    }

    .m-container .design-color-handwriting-icon-2 {
        width: 5vw;
        left: 4.6vw;
        top: -1.5vw;
    }

    .m-container .design-color-handwriting-icon-3 {
        width: 5.642857vw;
        left: 11vw;
        top: -.7vw;
        transform: translate(0, 1.708333vw) rotate(-15deg);
    }

    .m-container .design-color-handwriting-icon-4 {
        width: 5.035714vw;
        left: 18.364583vw;
        top: 1.833333vw;
        transform: translate(0, -0.958333vw) rotate(-26deg);
    }

    .m-container .design-color-handwriting-icon-5 {
        width: 4.821429vw;
        left: 24.4375vw;
        top: 3.3vw;
        transform: translate(0, -2.3125vw) rotate(-16deg);
    }

    .m-container .design-color-handwriting-icon-6 {
        width: 6.642857vw;
        left: 29.875vw;
        top: 5.529167vw;
        transform: translate(0, -3.833333vw) rotate(0deg);
    }

    .m-container .design-color-control-text-swiper .swiper-slide {
        flex-direction: row-reverse;
        justify-content: center;
    }

    .m-container .design-color-control-text {
        width: auto;
    }

    .m-container .design-color-control-line {
        display: block;
        height: 2.285714vw;
        width: .142857vw;
        min-width: 1px;
        background: #E5E5E5;
        margin: 0 1.142857vw;
    }

    .m-container .design-color-control-des {
        font-size: 2.285714vw;
        color: #666666;
    }

    .m-container .design-color-swiper-container .product-disclaimer {
        right: 1.714286vw;
        bottom: 1.714286vw;
    }

    .m-container .design-intro-subtitle .product-subtitle-icon {
        width: 8.571429vw;
    }

    .m-container .design-intro .design-intro-text {
        margin-top: 2vw;
        width: 71.428571vw;
    }

    .m-container .product-subtitle-text {
        font-size: 2vw;
    }

    .m-container .design-popup-container {
        width: 90.857143vw;
    }

    .m-container .video-pop-play-text,
    .m-container .video-pop-play-style2 .video-pop-play-text {
        font-size: 2vw;
        margin-right: 1.714286vw;
    }

    .m-container .video-pop-play-icon,
    .m-container .video-pop-play-style2 .video-pop-play svg,
    .m-container .video-pop-play-container.video-pop-play-style2 .video-pop-play-icon,
    .m-container .video-pop-play svg {
        width: 3.5714285vw;
        height: 3.5714285vw;
    }

    .m-container .video-pop-play-icon-mob {
        width: 3.5714285vw;
        height: 3.5714285vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .m-container .video-pop-play-icon-mob svg {
        position: absolute;
        top: 0;
        left: 0;
    }

    .m-container .design-intro-image img,
    .m-container .design-intro-image video {
        object-fit: cover;
        height: 57.143vw;
    }

    .m-container .design-color-swiper-container {
        width: 100%;
    }

    .m-container .design-color-text-swiper-container {
        margin: 1.714vw auto 2.285vw;
    }

    .m-container .design-color-control-btns-container {
        width: 14.2857142vw;
        height: auto;
    }

    .m-container .design-color-control-text {
        font-size: 2.285714vw;
    }

    .m-container .design-color-control-btn {
        margin-right: 2.142857vw;
        width: 4.142857vw;
        height: auto;
    }

    .m-container .design-color-control-btn-image svg {
        width: 4.142857vw;
        height: 4.142857vw;
    }

    .m-container .design-color-phone-swiper-container {
        width: 27.571429vw;
        top: 5.583333vw;
        left: 38.285714vw;
    }

    .m-container .design-color-phone-image-reflection {
        left: 77%;
        bottom: -29vw;
    }

    .m-container .design-color-control-btns-container {
        width: 29.142857vw;
    }

    .m-container .design-color-control-container {
        flex-direction: column-reverse;
        text-align: center;
        bottom: 8vw;
    }

    .m-container .design-color-control-text-swiper-container {
        width: 100%;
        margin: 3.428571vw auto 0;
        text-align: center;
    }

    .m-container .design-color-control-text-swiper-container .swiper {
        overflow: visible;
    }

    .m-container .design-color-control-text-swiper-container .swiper-wrapper {
        height: auto;
    }

    .m-container .design-popup-image {
        border-radius: 2.285714vw;
    }

    .m-container .design-popup-video-popup-container {
        bottom: 3.428571vw;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .m-container .design-popup .product-disclaimer {
        width: 90.857143vw;
        margin-top: 1.571429vw;
    }

    .m-container .video-pop-play {
        height: 6.857143vw;
        padding: 0 1.714286vw 0 3.428571vw;
    }

    .m-container .section-visuals {
        overflow: hidden;
    }
    .m-container .visuals-intro{
        margin-top: 0;
    }
    .m-container .visuals-intro-subtitle .product-subtitle-icon {
        width: 8.571429vw;
    }

    .m-container .visuals-intro-text {
        width: 71.428571vw;
    }

    .m-container .visuals-intro-image {
        height: auto;
    }
    .m-container .visuals-intro-image img{
        transform: none;
    }
    .m-container .visuals-scroll-mask,
    .m-container .visuals-carousel-mask {
        display: none;
    }

    .m-container .visuals-scroll-container {
        height: auto;
        flex-direction: column;
        overflow: visible;
    }

    .m-container .visuals-scroll-title,
    .m-container .visuals-scroll-text {
        width: 71.428571vw;
        margin: 0 auto;
        text-align: center;
    }

    .m-container .visuals-carousel {
        position: relative;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        transform: unset;
    }

    .m-container .visuals-carousel-wrapper {
        width: 40.714286vw;
        height: auto;
    }

    .m-container .visuals-carousel-box {
        width: 100%;
        height: auto;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-top: 4.571429vw;
    }

    .m-container .visuals-carousel-slide {
        position: relative;
        transform: none;

    }

    .m-container .visuals-carousel-slide-2 .section-picture {
        opacity: 1;
    }

    .m-container .visuals-carousel-arrow-wrap {
        opacity: 0;
    }

    /* .m-container .visuals-carousel-slide-3,
    .m-container .visuals-carousel-slide-4 {
        opacity: 1;
    } */

    .m-container .visuals-carousel-slide {
        position: relative;
        transform: none;
    }

    .m-container .visuals-carousel-slide-2 {
        transform: scale(0.88) translateX(-6%) translateY(5%) rotate(15deg);
    }

    .m-container .visuals-carousel-slide-3 {
        transform: scale(0.88) translateX(-6%) translateY(0%) rotate(-15deg);
    }

    .m-container .visuals-carousel-slide-4 {
        transform: scale(0.88) translateX(-6%) translateY(2%) rotate(15deg);
    }

    .m-container .visuals-carousel-slide-1.swiper-slide-prev {
        transform: scale(0.88) translateX(-6%) translateY(0%) rotate(-15deg);
    }

    .m-container .visuals-carousel-slide.swiper-slide-prev {
        opacity: 0;
    }

    .m-container .visuals-carousel-slide-3.swiper-slide-next,
    .m-container .visuals-carousel-slide-4.swiper-slide-next {
        opacity: 1;
    }

    .m-container .visuals-carousel-slide.swiper-slide-active {
        opacity: 1;
        transform: scale(1) translateX(0%) translateY(0%) rotate(0deg);
    }

    .m-container .visuals-scroll-swiper-container .section-picture {
        width: 100%;
        border-radius: 2.285714vw;
    }

    .m-container .visuals-gallery-content {
        width: 71.428571vw;
    }

    .m-container .visuals-gallery-swiper-container .swiper {
        width: 100%;
        margin: 0;
    }

    .m-container .visuals-gallery-swiper-container .swiper-slide {
        width: 36.857143vw;
    }

    .m-container .visuals-gallery .section-picture {
        border-radius: 2.285714vw;
    }

    .m-container .visuals-gallery-swiper-highlight {
        width: 39.142857vw;
        height: 56.214286vw;
        border-radius: 2.285714vw;
        top: -6.611111vw;
        left: 34.2vw;
    }

    .m-container .visuals-gallery-text-swiper-container {
        font-size: 2.285714vw;
        left: 41vw;
        bottom: 17vw;
    }

    .m-container .visuals-gallery-swiper-highlight::after {
        border-radius: 2.285714vw;
    }

    .m-container .visuals-gallery-icon-container {
        bottom: 68.714286vw;
        width: 21.357143vw;
        left: 8.571429vw;
        height: 6.571429vw;
    }

    .m-container .visuals-gallery-icon-1 {
        width: 11.642857vw;
    }

    .m-container .visuals-gallery-icon-2 {
        width: 12vw;
    }

    .m-container .section-harmonyos .harmonyos-icon-1 {
        width: 3.5vw;
        left: -3.5vw;
    }

    .m-container .section-harmonyos .harmonyos-icon-2 {
        width: 5.214286vw;
        top: -2vw;
        left: 25.75vw;
    }

    .m-container .section-harmonyos .harmonyos-icon-3 {
        width: 4.285714vw;
        top: 3.65vw;
        left: 45.5vw;
    }

    .m-container .xmage-video-wrap {
        height: auto;
    }

    .m-container .xmage-video-wrap .product-disclaimer {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.714286vw;
    }

    .m-container .xmage-intro-image .product-disclaimer {
        left: 1.714286vw;
        bottom: 1.714286vw;
    }

    .m-container .xmage-video-popup-container {
        bottom: 3.428571vw;
    }

    .m-container .xmage-video-text {
        width: 71.428571vw;
    }

    .m-container .xmage-video .product-subtitle-icon {
        width: 10.285714vw;
    }

    .m-container .xmage-intro-icon {
        width: 7.285714vw;
        height: 7.285714vw;
        top: -1vw;
    }

    .m-container .video-pop-play-container {
        border-radius: 9999px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        will-change: transform;
        box-shadow: inset -.285714vw 1.142857vw .857143vw #434CBE78;
    }

    .m-container .video-pop-play-icon::before {
        box-shadow: none;
        background: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
    }

    .m-container .video-pop-play-container::after {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        content: "";
        border-radius: 9999px;
        pointer-events: none;
        -webkit-border-radius: 9999px;
        box-shadow: inset 0 -.142857vw .857143vw #A4AEF1;
        transform: translateZ(-0.0001px);
        will-change: transform;
    }

    .m-container .video-pop-play-container.video-pop-play-style2 {
        height: 6.857143vw;
        padding: 0;
        box-shadow: inset -.285714vw 1.142857vw .857143vw #434CBE78;
    }

    .m-container .xmage-intro-item-num {
        font-size: 4.571428vw;
    }

    .m-container .theme-feature-control-icon-container {
        opacity: 0;
    }

    .m-container .theme-feature-control-row {
        width: 42.285714vw;
        height: 6.857143vw;
    }

    .m-container .theme-feature-control-progress-bar {
        height: calc(100% - 1.142857vw);
        top: .571429vw;
    }

    .m-container .theme-feature-control-row[data-index="0"] .theme-feature-control-progress-bar {
        transform: translateX(.571429vw);
    }

    .m-container .theme-feature-control-row[data-index="2"] .theme-feature-control-progress-bar {
        transform: translateX(calc(200% - .571429vw));
    }

    .m-container .theme-feature-control-container {
        width: 42.285714vw;
    }


    .m-container .theme-intro-animation::before {
        width: 4.142857vw;
        height: 1.5vw;
        top: .2vw;
    }

    .m-container .theme-intro-animation::after {
        width: 4.142857vw;
        top: 1vw;
        height: 0.38vw;
    }

    .m-container .theme-intro .eyes-wrap {
        width: 2.642857vw;
        height: 1.142857vw;
        top: 0.61429vw;
        left: 50%;
    }

    .m-container .theme-intro .eyes .pupil {
        width: 1.142857vw;
        height: 1.142857vw;
    }

    .m-container .theme-intro .eyes .pupil div>span span {
        width: .571429vw;
        height: .571429vw;
    }

    .m-container .theme-intro-container {
        width: 71.428571vw;
    }

    .m-container .theme-intro-title .theme-intro-animation img {
        width: 5vw;
        top: 1.1vw;
    }

    .m-container .theme-feature-icon-container {
        width: 19.428571vw;
        height: 5.571429vw;
        left: 59.571429vw;
        top: 3.125vw;
    }

    .m-container .theme-feature-icon-1 {
        width: 11.571429vw;
    }

    .m-container .theme-feature-icon-2 {
        width: 11.642857vw;
    }

    .m-container .theme-feature-swiper .product-disclaimer {
        width: 96.571429vw;
        margin: 0 auto;
    }

    .m-container .section-harmonyos .h2 {
        font-size: 11.428571vw;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play {
        padding: 0;
        height: auto;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play-icon {
        width: 3.428571vw;
        height: 3.428571vw;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play-icon::before {
        display: none;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play-text {
        font-size: 2vw;
        margin-right: 1.142857vw;
    }

    .m-container .theme-popup-video-popup-container {
        margin-top: 3vw;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play-container {
        box-shadow: none;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play-container::before,
    .m-container .theme-popup-video-popup-container .video-pop-play-container::after {
        display: none;
    }

    .m-container .theme-popup-video-popup-container .video-pop-btn-highlight {
        width: 2.571429vw;
        height: 1.035714vw;
        top: .142857vw;
        right: .142857vw;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play-icon {
        box-shadow: inset -.142857vw .571429vw .714286vw #434CBE78;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play svg {
        width: 3.428571vw;
        height: 3.428571vw;
    }

    .m-container .theme-feature-swiper {
        width: 100%;
    }

    .m-container .theme-feature-item-left {
        width: 36.857vw;
    }

    .m-container .theme-feature-item-card {
        border-radius: 1.142857vw;
        display: flex;
        justify-content: center;
    }

    .m-container .theme-feature-item-right {
        width: 52.2857vw;
    }

    .m-container .theme-feature-item-left .theme-feature-item-image {
        width: 100%;
    }

    .m-container .theme-feature-item-left .theme-feature-item-text {
        top: 5.71428vw;
        left: 50%;
        width: 80%;
    }

    .m-container .theme-feature-item-text {
        font-size: 2vw;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-2 .theme-feature-item-content {
        top: 50%;
        left: 2.85714vw;
        width: 22.42857vw;
        transform: translateY(-50%);
        z-index: 1;
    }

    .m-container .theme-feature-card-icon-container {
        margin-top: 2.28571vw;
    }

    .m-container .theme-feature-card-icon {
        width: 6.02571vw;
    }

    .m-container .theme-feature-card-icon-text {
        font-size: 1.42857vw;
        margin-top: .8571428vw;
    }

    .m-container .theme-feature-item-right .theme-feature-item-card:first-child {
        margin-bottom: 1.7142vw;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-3 .theme-feature-item-text {
        left: 2.2857vw;
        width: 45%;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-left {
        width: 44.571428vw;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-left .theme-feature-item-text {
        top: 8vw;
        width: 69%;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-right {
        width: 44.571428vw;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-right .theme-feature-item-card:first-child {
        margin-bottom: 0;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-card:first-child {
        margin-bottom: 0;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-card-2 .theme-feature-item-text {
        left: 3.42857vw;
        width: 49%;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-card-3 .theme-feature-item-text {
        top: 8vw;
        width: 24.928571vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-left .theme-feature-item-text {
        font-size: 2.857vw;
        top: 7.1428vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-card {
        display: block;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-subtitle {
        font-size: 1.714285vw;
        margin-top: 8.571428vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-day {
        font-size: 6.857vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-text {
        font-size: 2.2857vw;
        margin: 4.857142vw 0 3.42857142vw 6.42857vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-icons-container {
        width: 45.42857vw;
    }

    .m-container .theme-feature-item-icon-item {
        width: 10.2857vw;
    }

    .m-container .theme-feature-item-icon {
        border-radius: 1.142857vw;
        width: 11.285714vw;
    }

    .m-container .theme-feature-item-icon-1 {
        width: 11vw;
        top: -5.2vw;
        left: -4.2vw;
        transform: translate(3.9vw, 4.5vw);
    }

    .m-container .theme-feature-item-icon-2 {
        bottom: 0.5vw;
        right: -7vw;
    }

    .m-container .theme-feature-item-icon-3 {
        bottom: 0.75vw;
        left: -7.5vw;
        transform: translate(6vw, 0) rotate(5deg);
    }

    .m-container .theme-feature-item-icon-4 {
        width: 9.714286vw;
        top: -5.8vw;
        left: -3.6vw;
    }

    .m-container .theme-feature-item-icon-5 {
        width: 11.071429vw;
        top: -5.8vw;
        left: -4.1vw;
    }

    .m-container .theme-feature-item-icon-6 {
        right: -9.3vw;
        transform: translate(-6vw, -2vw) rotate(-2deg);
    }

    .m-container .theme-feature-animation[data-index='0'].active .theme-feature-item-icon-2 {
        transform: translate(0, 0) rotate(-5deg);
    }

    .m-container .theme-feature-animation[data-index='1'].active .theme-feature-item-icon-3 {
        transform: translate(0, 0) rotate(5deg);
    }

    .m-container .theme-feature-animation[data-index='2'].active .theme-feature-item-icon-5 {
        transform: translate(0, 0) rotate(5deg);

    }

    .m-container .theme-feature-item-icon-text {
        font-size: 1.71428vw;
        margin-top: 1.14285vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-icons-row:nth-of-type(2) {
        margin-top: 4vw;
    }

    .m-container .theme-feature-item-icon-item:nth-of-type(5n) {
        margin-top: 2.857vw;
        margin-right: 4vw;
    }

    .m-container .theme-feature-item-icon-item:nth-of-type(4n) {
        margin-right: 0;
    }

    .m-container .theme-feature-item-icon-item:nth-of-type(n + 5) {
        margin-top: 2.857vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-disclaimer {
        right: 1.71428vw;
        bottom: 1.71428vw;
        width: 44vw;
    }

    .m-container .theme-feature-control-title-item {
        font-size: 2vw;
    }

    .m-container .theme-feature-bg {
        top: 25vw;
    }

    .m-container .theme-feature-item-row .swiper-slide {
        width: 19.785714vw;
    }

    .m-container .performance-content-item-image {
        width: 18.4vw;
        border-radius: 2.285714vw;
        margin-top: .214286vw;
    }

    .m-container .theme-feature-item-row .swiper-slide-1 {
        transform: translateX(35.125vw);
    }

    .m-container .theme-feature-item-row .swiper-slide:nth-child(2) {
        margin-left: 21vw;
    }

    .m-container .theme-feature-item-row .swiper {
        margin: 0 auto 0 6.928571vw;
    }

    .m-container .theme-feature-item-row .swiper-slide {
        margin-left: 1.428571vw;
    }

    .m-container .theme-feature-item-swiper-text {
        font-size: 1.571429vw;
        margin-top: .857143vw;
    }

    .m-container .disclaimer-container {
        font-size: 1.71428vw;
        width: 90.857vw;
        padding-top: 0;
    }

    .m-container .disclaimer-container .more-discalimer {
        margin-top: 2.3vw;
    }

}

@media (max-aspect-ratio: 7 / 10) {
    .m-container .header-top {
        top: 0;
    }

    .m-container .hidden-web {
        display: block;
    }

    .m-container .show-pad {
        display: none;
    }

    .m-container .show-mob {
        display: block;
    }

    .m-container .hidden-mob {
        display: none;
    }

    .m-container .hidden-inline-web {
        display: inline-block;
    }

    .m-container .space-300 {
        height: 34.722vw;
    }

    .m-container .space-280 {
        height: 27.777vw;
    }

    .m-container .space-240 {
        height: 33.333vw;
    }

    .m-container .space-200 {
        height: 27.77vw;
    }

    .m-container .space-180 {
        height: 25vw;
    }

    .m-container .space-160 {
        height: 22.222222vw;
    }

    .m-container .space-140 {
        height: 19.444vw;
    }

    .m-container .space-120 {
        height: 16.666vw;
    }

    .m-container .space-100 {
        height: 13.888vw;
    }

    .m-container .space-80 {
        height: 11.111vw;
    }

    .m-container .space-64 {
        height: 8.88vw;
    }

    .m-container .space-60 {
        height: 8.33vw;
    }

    .m-container .space-48 {
        height: 6.66vw;
    }

    .m-container .space-42 {
        height: 5.833333vw;
    }

    .m-container .space-40 {
        height: 5.55vw;
    }

    .m-container .space-32 {
        height: 4.44vw;
    }

    .m-container .space-30 {
        height: 4.167vw;
    }

    .m-container .space-24 {
        height: 3.33vw;
    }

    .m-container .space-20 {
        height: 2.77vw;
    }

    .m-container .space-16 {
        height: 2.22vw;
    }

    .m-container .sticky-viewport {
        height: 100vh;
        top: 0;
    }

    .m-container {
        font-size: 3.6vw;
    }

    .m-container .big-title {
        font-size: 13.89vw;
        line-height: normal;
    }

    .m-container .small-title {
        font-size: 6.66vw;
        font-weight: bold;
        line-height: 1.25;
    }

    .m-container .h2 {
        font-size: 13.333333vw;
    }

    .m-container .h3 {
        font-size: 8.88vw;
    }

    .m-container .subtitle {
        font-size: 6.667vw;
        font-weight: bold;
        line-height: 1.25;
    }

    .m-container .h4 {
        font-size: 6.667vw;
    }

    .m-container .h5 {
        font-size: 6.667vw;
    }

    .m-container .big-title-xs {
        font-size: 11.1vw;
    }

    .m-container .h2-xs {
        font-size: 8.8vw;
    }

    .m-container .h3-xs {
        font-size: 11.1vw;
    }

    .m-container .h4-xs {
        font-size: 6.6666vw;
    }

    .m-container p {
        font-size: 4.444444vw;
    }

    .m-container .smaller-text {
        font-size: 3.6vw;
        line-height: 1.6;
    }

    .m-container .product-disclaimer {
        font-size: 2.222222vw;
    }

    .m-container .product-subtitle {
        font-size: 3.888vw;
    }

    .m-container .video-pop-play {
        font-size: 3.888vw;
    }

    .m-container .auto-video-btn {
        font-size: 3.8vw;
    }

    .m-container .common-transform-show {
        opacity: 0;
        transform: translateY(5.55vw);
    }

    .m-container .video-replay-btn {
        right: 3.3333vw;
        bottom: 3.3333vw;
        width: 8.8888vw;
    }

    .m-container .video-replay-btn svg {
        box-sizing: border-box;
        width: 4.44vw;
        height: 4.93vw;
        padding: 1px;
    }

    .m-container .video-control-btn-container {
        right: 3.3333vw;
        bottom: 3.3333vw;
        width: 8.8888vw;
    }

    .m-container .swiper-control-container {
        width: 100%;
        margin: 0 auto;
    }

    .m-container .swiper-btn-before {
        display: none;
    }

    .m-container .swiper-prev-btn {
        margin-right: 5.55vw;
    }

    .m-container .swiper-prev-btn,
    .m-container .swiper-next-btn {
        width: 11.1111vw;
        height: 11.1111vw;
    }

    .m-container .swiper-prev-btn .btn-highlight,
    .m-container .swiper-next-btn .btn-highlight {
        width: 8.333333vw;
        height: 3.333333vw;
        top: .583333vw;
        right: .666667vw;
    }

    .m-container .shine-wrapper .shine-border::before {
        box-shadow: inset 0 -1px .833333vw #A4AEF1;
    }


    .m-container .btn-highlight {
        width: 8.333333vw;
        height: 3.333333vw;
        top: .555556vw;
        right: .694444vw;
        filter: blur(0.6px);
    }

    .m-container .huawei-product-buy-btn {
        margin-top: 24px;
        margin-left: 0;
    }

    .m-container .huawei-product-buy-btn-price {
        font-size: 5.56vw;
    }

    .m-container .huawei-product-buy-btn-price span {
        font-size: 3.611111111vw;
    }

    .m-container .product-common-swiper-item-image .video-control-btn-container {
        right: 5.55vw;
        bottom: 5.83vw;
    }

    .m-container .reasontobuy-item-container {
        flex-direction: column;
        height: 100%;
    }

    .m-container .reasontobuy-item-image-container {
        border-radius: 4.444444vw;
    }

    .m-container .reasontobuy-item-1 .reasontobuy-item-image {
        min-height: 111.111vw;
    }

    .m-container .reasontobuy-item-content-subtitle,
    .m-container .reasontobuy-item-content.text-light .reasontobuy-item-content-subtitle {
        font-size: 3.888889vw;
        margin-top: 2.222222vw;
    }

    .m-container .reasontobuy-item-text {
        font-size: 3.055556vw;
    }

    .m-container .reasontobuy-item-large-text {
        font-size: 14.861111vw;
    }

    .m-container .reasontobuy-item-4-content-container {
        bottom: 44.25%;
    }

    .m-container .reasontobuy-item-4-content-text {
        font-size: 4.4444vw;
        margin-bottom: 6.1111vw;
    }

    .m-container .reasontobuy-item-4-content-num {
        font-size: 27.7777vw;
    }

    .m-container .reasontobuy-item-4-content-num:last-child {
        filter: blur(.4vw);
    }

    .m-container .kv-content-container {
        margin-top: 15.277778vw;
        margin-bottom: 0;
    }

    .m-container .kv-product-name {
        margin-top: 0;
        padding-bottom: 10.416667vw;
    }

    .m-container .kv-product-name svg {
        width: 62.5vw;
        height: 8.402778vw;
    }

    .m-container .kv-container .kv-image-container {
        min-height: 105.694444vw;
    }

    .m-container .kv-container .product-disclaimer {
        width: 45.555556vw;
        text-align: right;
        bottom: 3.333333vw;
        right: 3.333333vw;
    }

    .m-container .kv-slogan-container {
        font-size: 6.666667vw;
        margin-top: 3.888889vw;
    }

    .m-container .kv-reasontobuy {
        margin-top: 0;
    }

    .m-container .reasontobuy-item-content {
        margin: 5.833333vw auto 0;
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
        width: 79%;
    }

    .m-container .reasontobuy-container.pausing .reasontobuy-item-content-title {
        opacity: 1;
    }

    .m-container .reasontobuy-item-content-subtitle {
        font-size: 3.888889vw;
        margin-top: 2.222222vw;
        color: #666666;
    }

    .m-container .reasontobuy-item-content-title {
        font-size: 5.555556vw;
        margin-top: 0;
        opacity: 1;
        width: 100%;
        color: #000;
    }

    .m-container .reasontobuy-item-container .product-disclaimer {
        width: 68.055556vw;
        bottom: 3.333333vw;
        right: 3.333333vw;
        transform: none;
        text-align: right;
    }

    .m-container .reasontobuy-item-inner-content {
        font-size: 10vw;
        display: none;
    }

    .m-container .reasontobuy-item-content.text-light .reasontobuy-item-content-title {
        color: #000;
    }

    .m-container .reasontobuy-item-content.text-light .reasontobuy-item-content-subtitle {
        color: #666666;
    }

    .m-container .reasontobuy-item-content-text {
        color: #FFFFFF;
        font-size: 4.44vw;
        opacity: 1;
    }

    .m-container .reasontobuy-container {
        padding-bottom: 0;
    }

    .m-container .reasontobuy-swiper-btns {
        border-radius: 12.2222vw;
        height: 13.3333vw;
        padding: 0 1.6667vw;
    }


    .m-container .reasontobuy-swiper-prev-btn:hover,
    .m-container .reasontobuy-swiper-next-btn:hover {
        opacity: 1;
    }

    .m-container .reasontobuy-swiper-btns .reasontobuy-swiper-prev-btn,
    .m-container .reasontobuy-swiper-btns .reasontobuy-swiper-next-btn {
        width: 13.3333vw;
    }

    .m-container .reasontobuy-swiper-btns .reasontobuy-swiper-pagination {
        margin: 0 1.1111vw;
    }

    .m-container .reasontobuy-swiper-btns svg {
        width: 2.51vw;
        height: 4.32vw;
    }

    .m-container .reasontobuy-control-container {
        margin-top: 0;
    }

    .m-container .reasontobuy-control-container .reasontobuy-swiper-btns .swiper-pagination-bullet {
        margin-right: 3.33vw;
        width: 2.22vw;
        height: 2.22vw;
    }

    .m-container .reasontobuy-control-container .reasontobuy-swiper-btns .swiper-pagination-bullet:last-child {
        margin-right: 0;
    }

    .m-container .reasontobuy-container .reasontobuy-main-swiper {
        width: 82.222vw;
    }

    .m-container .product-subtitle-container {
        margin-bottom: 2.222222vw;
    }

    .m-container .design-intro-subtitle .product-subtitle-icon {
        width: 16.666667vw;
    }

    .m-container .product-subtitle-text {
        font-size: 3.888vw;
    }

    .m-container .design-intro-image img,
    .m-container .design-intro-image video {
        height: auto;
    }

    .m-container .design-intro .design-intro-text {
        margin-top: 3.888888vw;
        width: 77.777778vw;
    }

    .m-container .design-color-handwriting-container {
        width: 66.944444vw;
        left: 25.694444vw;
        top: 0;
    }

    .m-container .design-color-handwriting-icon-1 {
        width: 5.416667vw;
        left: 3vw;
        top: 1.8vw;
        transform: translate(0, 0.625vw) rotate(50deg);
    }

    .m-container .design-color-handwriting-icon-2 {
        width: 8.888889vw;
        left: 10.829167vw;
        top: -0.27vw;
    }

    .m-container .design-color-handwriting-icon-3 {
        width: 10.833333vw;
        left: 22vw;
        top: 0vw;
        transform: translate(0, 1.708333vw) rotate(-10deg);
    }

    .m-container .design-color-handwriting-icon-4 {
        width: 9.722222vw;
        left: 34vw;
        top: 2.833333vw;
        transform: translate(0, -0.958333vw) rotate(-17deg);
    }

    .m-container .design-color-handwriting-icon-5 {
        width: 9.305556vw;
        left: 45vw;
        top: 5.5vw;
        transform: translate(0, -4.3125vw) rotate(-17deg);
    }

    .m-container .design-color-handwriting-icon-6 {
        width: 12.777778vw;
        left: 55.5vw;
        top: 8.8vw;
        transform: translate(0, -5.833333vw) rotate(0deg);
    }


    .m-container .design-color-control-btn-image svg {
        width: 8.055556vw;
        height: 8.055556vw;
    }

    .m-container .design-color-swiper-container .product-disclaimer {
        right: 3.333333vw;
        bottom: 3.333333vw;
    }

    .m-container .design-color-phone-image-reflection {
        left: 59%;
        bottom: -62vw;
        transform: translateX(0) rotate(-10deg);
    }

    .m-container .video-pop-play-text {
        font-size: 3.8888vw;
        margin-right: 3.333333vw;
    }

    .m-container .video-pop-play-style2 .video-pop-play-text {
        font-size: 3.888889vw;
    }

    .m-container .video-pop-play-icon,
    .m-container .video-pop-play-icon-mob,
    .m-container .video-pop-play svg,
    .m-container .video-pop-play-style2 .video-pop-play svg,
    .m-container .video-pop-play-container.video-pop-play-style2 .video-pop-play-icon {
        width: 6.666667vw;
        height: 6.666667vw;
    }

    .m-container .design-color-swiper-container {
        width: 100%;
    }

    .m-container .design-color-image {
        border-radius: 0;
    }

    .m-container .design-color-control-container {
        width: 100%;
        flex-direction: column-reverse;
        bottom: 0;
    }

    .m-container .design-color-container {
        padding-bottom: 13.888889vw;
    }

    .m-container .design-color-text-swiper-container {
        width: 74.777vw;
    }

    .m-container .design-color-control-btn {
        margin-right: 3.333vw;
        width: 8.88889vw;
        height: auto;
    }

    .m-container .design-color-control-text-swiper-container {
        width: 100%;
        margin: 6.666667vw auto 0;
    }

    .m-container .design-color-control-text {
        font-size: 4.444444vw;
        width: auto;
    }

    .m-container .design-color-control-des {
        font-size: 4.444444vw;
        width: auto;
    }

    .m-container .design-color-control-line {
        width: .277778vw;
        height: 4.444444vw;
        margin: 0 2.222222vw;
    }

    .m-container .design-popup-container {
        width: 91.111111vw;
    }

    .m-container .design-popup-image {
        border-radius: 4.444444vw;
    }

    .m-container .design-popup-video-popup-container {
        bottom: 6.666667vw;
    }

    .m-container .design-popup .product-disclaimer {
        width: 91.111111vw;
        margin-top: 3.333333vw;
    }

    .m-container .video-pop-play {
        height: 13.333333vw;
        padding: 0 3.333333vw 0 6.666667vw;
    }

    .m-container .video-pop-play-container {
        box-shadow: inset -.555556vw 2.222222vw 1.666667vw #434CBE78;
    }

    .m-container .video-pop-play-container::after {
        box-shadow: inset 0 -.277778vw 1.666667vw #A4AEF1;
    }

    .m-container .design-color-phone-swiper-container {
        width: 53.611111vw;
        left: 22.285714vw;
        top: 12vw;
    }

    .m-container .visuals-intro-subtitle .product-subtitle-icon {
        width: 16.666667vw;
    }

    .m-container .visuals-intro-image {
        height: auto;
    }
    .m-container .visuals-intro-image img{
        transform: none;
    }
    .m-container .visuals-intro-text {
        width: 77.777778vw;
    }

    .m-container .visuals-scroll-container {
        flex-direction: column;
    }

    .m-container .visuals-scroll-title,
    .m-container .visuals-scroll-text {
        width: 77.777778vw;
        margin: 0 auto;
        text-align: center;
    }

    .m-container .visuals-carousel {
        position: relative;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        transform: unset;
    }

    .m-container .visuals-carousel-wrapper {
        width: 70.833333vw;
        height: auto;
    }

    .m-container .visuals-carousel-box {
        margin-top: 8.888889vw;
    }

    .m-container .visuals-carousel-slide {
        position: relative;
        transform: none;
    }

    .m-container .visuals-carousel-slide-2 {
        transform: scale(0.81889) translateX(-10%) translateY(12%) rotate(15deg);
    }

    .m-container .visuals-carousel-slide-3 {
        transform: scale(0.81889) translateX(-10%) translateY(0%) rotate(-15deg);
    }

    .m-container .visuals-carousel-slide-4 {
        transform: scale(0.81889) translateX(-10%) translateY(8%) rotate(15deg);
    }

    .m-container .visuals-carousel-slide-1.swiper-slide-prev {
        transform: scale(0.81889) translateX(-10%) translateY(0%) rotate(-15deg);
    }

    .m-container .visuals-carousel-slide.swiper-slide-prev {
        opacity: 0;
    }

    .m-container .visuals-carousel-slide.swiper-slide-active {
        transform: scale(1) translateX(0%) translateY(0%) rotate(0deg);
    }

    .m-container .visuals-gallery-content {
        width: 80.972222vw;
    }

    .m-container .visuals-gallery-icon-container {
        width: 41.527778vw;
        height: 12.777778vw;
        left: 7.638889vw;
        bottom: 127.555556vw;
    }

    .m-container .visuals-gallery-icon-1 {
        width: 22.5vw;
    }

    .m-container .visuals-gallery-icon-2 {
        width: 23.333333vw;
    }

    .m-container .visuals-gallery-container .visuals-gallery-swiper-container {
        margin-top: 8.333333vw;
    }

    .m-container .visuals-scroll-swiper-container .section-picture {
        width: 100%;
        border-radius: 4.444444vw;
    }

    .m-container .visuals-gallery-swiper-container .swiper {
        width: 94%;
        margin: 0 auto 0 0;
    }

    .m-container .visuals-gallery-swiper-container .swiper-slide-active {
        transform: rotate(-10deg) scale(1) translateY(-8%);
    }

    .m-container .visuals-gallery-swiper-container .swiper-slide {
        width: 58.335vw;
    }

    .m-container .visuals-gallery-swiper-container .swiper-slide-next+.swiper-slide {
        transform: rotate(-20deg) scale(0.854) translateY(-80%);
    }

    .m-container .visuals-gallery-text-swiper-container {
        width: 58.335vw;
        font-size: 3.888889vw;
        left: 35.625vw;
        bottom: 35vw;
    }

    .m-container .visuals-gallery .section-picture {
        border-radius: 4.444444vw;
    }

    .m-container .visuals-gallery-swiper-highlight {
        width: 66.666667vw;
        height: 95.833333vw;
        left: 20vw;
        top: -11vw;
        border-radius: 4.444444vw;
    }

    .m-container .visuals-gallery-swiper-highlight::after {
        border-radius: 4.444444vw;
    }

    .m-container .section-harmonyos .h2 {
        font-size: 13.333333vw;
    }

    .m-container .theme-feature-bg {
        top: 36.444444vw;
    }

    .m-container .theme-feature-container {
        width: 100%;
    }

    .m-container .theme-feature-swiper {
        width: 100%;
    }

    .m-container .theme-feature-item-row {
        padding: 0;
    }

    .m-container .theme-feature-item-row .swiper {
        margin: 0 auto;
    }

    .m-container .theme-feature-item-row .swiper-slide {
        width: 100%;
        transform: scale(0.857988);
        transition: .6s linear;
        transform-origin: center;
        will-change: transform;
        margin-left: 0;
        opacity: 1;
    }

    .m-container .theme-feature-item-row .swiper-slide-active {
        transform: scale(1);
        opacity: 1;
    }

    .m-container .theme-feature-item-row .swiper-slide-1 {
        position: relative;
    }

    .m-container .theme-feature-item-row .swiper-slide:nth-child(2) {
        margin-left: 0;
    }

    .m-container .theme-feature-swiper .product-disclaimer {
        text-align: center;
    }

    .m-container .theme-feature-disclaimer {
        text-align: center;
    }

    .m-container .theme-feature-item-swiper-text {
        font-size: 3.055556vw;
        margin-top: 3.333333vw;
    }

    .m-container .theme-feature-item-row::-webkit-scrollbar {
        display: none;
    }

    .m-container .theme-feature-item-left {
        flex-shrink: 0;
        margin-right: 4.4444vw;
        width: 77.7777vw;
    }

    .m-container .theme-feature-item-card {
        border-radius: 2.2222vw;
    }

    .m-container .theme-feature-item-text {
        font-size: 3.8888vw;
    }

    .m-container .theme-feature-item-left .theme-feature-item-text {
        top: 6.6666vw;
        left: 50%;
        width: 56.38vw;
        transform: translateX(-50%);
    }

    .m-container .theme-feature-item-2 .theme-feature-item-left .theme-feature-item-text {
        top: 6.6667vw;
    }

    .m-container .theme-feature-item-right {
        background-color: #171718;
        border-radius: 2.2222vw;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
        overflow: hidden;
    }

    .m-container .theme-feature-item-card {
        flex-shrink: 0;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-2 {
        width: 102.6388vw;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-2 .theme-feature-item-content {
        display: flex;
        align-items: center;
        top: 6.6666vw;
        left: 7.7777vw;
        transform: none;
        width: 89.2222vw;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-2 .theme-feature-item-text {
        text-align: left;
        width: 66.4444vw;
    }

    .m-container .theme-feature-card-icon-container {
        margin-top: 2.2222vw;
        margin-left: 3.3333vw;
    }

    .m-container .theme-feature-card-icon {
        width: 11.7166vw;
    }

    .m-container .theme-feature-card-icon-text {
        font-size: 2.7777vw;
        margin-top: 1.6667vw;
    }

    .m-container .theme-feature-item-row .swiper {
        overflow: hidden;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-3 {
        width: 80.83333vw;
    }

    .m-container .theme-feature-item-image {
        width: 100%;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-2 .theme-feature-item-image {
        width: 100%;
        padding: 0;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-3 .theme-feature-item-text {
        top: 6.6666vw;
        left: 5.8vw;
        width: 87%;
        text-align: left;
        transform: none;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-4 {
        padding: 39.8611vw 11.1111vw 21.8vw 9.305vw;
        width: 63.8888vw;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-4 .theme-feature-item-image {
        width: 100%;
        padding: 0;
    }

    .m-container .theme-feature-item-1 .theme-feature-item-card-4 .theme-feature-item-text {
        top: 6.6666vw;
        left: 9.305vw;
        width: 73%;
        text-align: left;
    }

    .m-container .theme-feature-item-right .theme-feature-item-card:first-child {
        margin-bottom: 0;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-left {
        width: 86.6666vw;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-right {
        width: auto;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-card-2 {
        width: 70.55555vw;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-card-3 {
        width: 70.55555vw;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-card-2 .theme-feature-item-text {
        top: 6.6667vw;
        left: 10.6666vw;
        width: 78.5%;
        text-align: center;
        transform: none;
    }

    .m-container .theme-feature-item-2 .theme-feature-item-card-3 .theme-feature-item-text {
        top: 6.6667vw;
        width: 64%;
        text-align: center;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-left .theme-feature-item-text {
        font-size: 5.5555vw;
        top: 11.1111vw;
        width: 100%;
        text-align: center;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right {
        width: 101.1111vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-card {
        box-sizing: border-box;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-subtitle {
        font-size: 3.3333vw;
        margin-top: 11.1111vw;
        margin-left: 8.8888vw;
        text-align: left;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-day {
        font-size: 13.3333vw;
        margin-left: 8.8888vw;
        text-align: left;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-text {
        font-size: 4.4444vw;
        margin: 1.2222vw 0 4.6666vw 8.8888vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-icons-container {
        margin-left: 7.2222vw;
        width: 88.3333vw;
    }

    .m-container .theme-feature-item-icon {
        width: 17.222222vw;
    }

    .m-container .theme-feature-item-icon.active {
        transform: translate(0, 0);
        transition-delay: .8s;
        opacity: 1;
    }

    .m-container .theme-feature-item-icon-text {
        font-size: 3.3333vw;
        margin-top: 2.2222vw;
    }

    .m-container .theme-feature-item-icon-1 {
        top: auto;
        bottom: 0;
        left: -11.4167vw;
        transform: translate(12.9vw, -3.5vw);
    }

    .m-container .theme-feature-item-icon-2 {
        width: 19.444444vw;
        bottom: auto;
        top: 13.333333vw;
        right: -11vw;
        transform: translate(-12vw, 0) rotate(0deg);
    }

    .m-container .theme-feature-item-icon-7 {
        width: 19.444444vw;
        top: 25vw;
        left: -11.111111vw;
        transform: translate(11.11111vw, 0);
    }

    .m-container .theme-feature-item-icon-8 {
        right: -15.6vw;
        top: 73.944444vw;
        transform: translate(-14.88889vw, 0);
    }

    .m-container .theme-feature-item-icon-9 {
        right: -12vw;
        top: auto;
        bottom: 0;
        transform: translate(-13.88889vw, -1vw);
    }

    .m-container .theme-feature-item-icon-10 {
        width: 19.444444vw;
        right: -9.722222vw;
        top: 39.027778vw;
        transform: translate(-9.88889vw, -1vw);
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-item-icons-row:nth-of-type(2) {
        margin-top: 5vw;
    }

    .m-container .theme-feature-item-3 .theme-feature-item-right .theme-feature-disclaimer {
        right: 3.3333vw;
        bottom: 3.3333vw;
        width: 84vw;
    }

    .m-container .theme-feature-control-tips {
        transition: opacity .6s ease;
        position: absolute;
        top: 52.75vw;
        left: 8.888889vw;
    }

    .m-container .theme-feature-control-tips.active {
        opacity: 0;
    }

    .m-container .theme-feature-control-tips-row {
        display: flex;
        justify-content: center;
        align-items: center;
        animation: tipsBlink 2.5s ease infinite;
    }

    .m-container .theme-feature-control-tips-icon {
        display: flex;
        width: 3.611111vw;
    }

    .m-container .theme-feature-control-tips-text {
        color: #999999;
        font-size: 2.5vw;
        line-height: 1.5;
    }

    @keyframes tipsBlink {
        0% {
            opacity: 1;
        }

        40% {
            opacity: 1;
        }

        80% {
            opacity: 0.4;
        }

        100% {
            opacity: 1;
        }
    }

    .m-container .theme-feature-control-container {
        width: 82.222222vw;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
    }

    .m-container .theme-feature-control-container::-webkit-scrollbar {
        display: none;
    }

    .m-container .theme-feature-control-row {
        width: 82.222222vw;
        height: 13.333333vw;
    }

    .m-container .theme-feature-control-title-item {
        font-size: 3.888889vw;
        /* margin: 0 5.555556vw; */
    }

    .m-container .theme-feature-control-progress-bar {
        height: calc(100% - 2.222222vw);
        top: 1.111111vw;
    }

    .m-container .theme-feature-control-row[data-index="0"] .theme-feature-control-progress-bar {
        transform: translateX(1.111111vw);
    }

    .m-container .theme-feature-control-row[data-index="2"] .theme-feature-control-progress-bar {
        transform: translateX(calc(200% - 1.111111vw));
    }

    .m-container .theme-intro-container {
        width: 82.222222vw;
    }

    .m-container .theme-popup-video-popup-container {
        margin-top: 5.833333vw;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play-text {
        font-size: 3.888889vw;
        margin-right: 2.222222vw;
    }

    .m-container .theme-popup-video-popup-container .video-pop-play-icon,
    .m-container .theme-popup-video-popup-container .video-pop-play svg {
        width: 6.666667vw;
        height: 6.666667vw;
    }

    .m-container .theme-feature-icon-container {
        width: 43.472222vw;
        height: 14.027778vw;
        left: 6.527778vw;
        top: 8.333333vw;
        transition: all .6s;
        transform: translate(5vw, 0);
    }

    .m-container .theme-feature-icon-1 {
        width: 28.055556vw;
    }

    .m-container .theme-feature-icon-2 {
        width: 28.055556vw;
    }

    .m-container .theme-feature-icon-container.animated {
        transform: translate(0, 0);
        opacity: 1;
    }

    .m-container .theme-intro .eyes-wrap {
        width: 5.138889vw;
        height: 2.222222vw;
        top: 1.2vw;
        left: 50%;
    }

    .m-container .theme-intro .eyes .pupil {
        width: 2.222222vw;
        height: 2.222222vw;
    }

    .m-container .theme-intro .eyes .pupil div>span span {
        width: .833333vw;
        height: .833333vw;
        filter: blur(1px);
    }

    .m-container .theme-intro-animation::before {
        width: 8.055556vw;
        height: 3vw;
        top: 0.65vw;
    }

    .m-container .theme-intro-animation::after {
        width: 8.055556vw;
        height: .694444vw;
        top: 2vw;
    }

    .m-container .theme-intro-title .theme-intro-animation img {
        width: 9.722222vw;
        top: 2.59792vw;
    }

    .m-container .disclaimer-container {
        font-size: 3.33vw;
        width: 86.25%;
        padding-top: 0;
    }

    .m-container .disclaimer-container .more-discalimer {
        margin-top: 5vw;
    }
}

html.overflow-hidden body {
    padding-right: var(--scrollbar-width);
}

.no-inline-video .video-fallback {
    display: block;
}

.no-inline-video video {
    display: none;
}

.no-inline-video .video-replay-btn {
    display: none;
}

.no-inline-video .video-control-btn-container {
    display: none;
}

.no-inline-video .camera-live-photo-icon {
    display: none;
}

.m-container .section-wrapper {
    position: relative;
}


@media (max-aspect-ratio: 6 / 5) {
    .m-container .intro-title-video {
        width: 68.571429vw;
    }

    .m-container .harmonyos-text {
        font-size: 6.857143vw;
    }

    .m-container .xmage-intro-web {
        display: none;
    }

    .m-container .xmage-intro-space {
        width: 8.571428vw;
    }

    .m-container .xmage-intro-image-1 {
        width: 75.428571vw;
        border-radius: 2.285714vw;
    }

    .m-container .xmage-intro-image-1 video,
    .m-container .xmage-intro-image-1 img {
        border-radius: 2.285714vw;
    }

    .m-container .xmage-intro-image-2 {
        width: 90.857142vw;
        border-radius: 1.142857vw;
    }

    .m-container .xmage-intro-disclaimer {
        width: 90.857142vw;
    }

    .m-container .xmage-intro-image-2 video,
    .m-container .xmage-intro-image-2 img {
        border-radius: 1.142857vw;
    }

    .m-container .xmage-intro-text {
        width: 71.428571vw;
        font-size: 2.285714vw;
    }

    .m-container .xmage-intro-item-num-small {
        font-size: 0.5em;
    }
}

@media (max-aspect-ratio: 7 / 10) {
    .m-container .intro-title-video {
        width: 100%;
    }

    .m-container .harmonyos-text {
        font-size: 13.333333vw;
    }

    .m-container .xmage-video-text {
        width: 77.777778vw;
    }

    .m-container .xmage-video .product-subtitle-icon {
        width: 20.277778vw;
    }

    .m-container .xmage-video-wrap {
        height: auto;
    }

    .m-container .xmage-video-wrap .product-disclaimer {
        width: 90%;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 3.333333vw;
        text-align: center;
    }

    .m-container .xmage-intro-image-1 {
        width: 91.111111vw;
        border-radius: 4.444444vw;
    }

    .m-container .xmage-intro-image-1 video,
    .m-container .xmage-intro-image-1 img {
        border-radius: 4.444444vw;
    }

    .m-container .xmage-intro-image-2 {
        width: 91.111111vw;
        border-radius: 2.222222vw;
    }

    .m-container .xmage-intro-disclaimer {
        width: 91.111111vw;
        text-align: center;
    }

    .m-container .xmage-intro-image-2 video,
    .m-container .xmage-intro-image-2 img {
        border-radius: 2.222222vw;
    }

    .m-container .xmage-intro-image .product-disclaimer {
        left: 3.333333vw;
        bottom: 3.333333vw;
    }

    .m-container .xmage-intro-title {
        width: 84%;
    }

    .m-container .xmage-intro-title h3 {
        display: block;
    }

    .m-container .xmage-intro-text {
        width: 77.777778vw;
        font-size: 2.777778vw;
    }

    .m-container .xmage-intro-icon {
        width: 14.166667vw;
        height: 14.166667vw;
        top: 0;
    }

    .m-container .xmage-intro-item-num {
        font-size: 6.666667vw;
    }

    .m-container .xmage-intro-item-num-small {
        font-size: 4.444444vw;
    }

    .m-container .xmage-intro-item-text {
        font-size: 2.777778vw;
        color: #CECECE;
    }

    .m-container .section-harmonyos .harmonyos-icon-1 {
        width: 4.722222vw;
        top: 6.427083vw;
    }

    .m-container .section-harmonyos .harmonyos-icon-2 {
        width: 6.944444vw;
        top: -3vw;
        left: 34.75vw;
    }

    .m-container .section-harmonyos .harmonyos-icon-3 {
        width: 5.694444vw;
        top: 4.65vw;
        left: 61.5vw;
    }

    .m-container .video-control-btn-container .btn-highlight {
        width: 6.666667vw;
        top: .458333vw;
        right: .541667vw;
    }

    .m-container .xmage-video-popup-container {
        bottom: 6.666667vw;
    }

    .m-container .xmage-change-padding {
        height: 1.25em;
    }
}

.m-container .section-disclaimer {
    font-size: 14px;
    --arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23434343'/%3E%3Cpath d='M3.239,8.986,3.233,8.98a.688.688,0,0,1-.014-.972L5.942,5.28H.689A.685.685,0,0,1,.2,5.089l-.009-.01A.689.689,0,0,1,0,4.6V4.589a.7.7,0,0,1,.188-.48L.194,4.1a.681.681,0,0,1,.494-.213H5.911L3.225,1.178a.694.694,0,0,1,0-.979l0,0A.669.669,0,0,1,3.7,0a.772.772,0,0,1,.473.171l.021.017L7.838,3.845a1.151,1.151,0,0,1,.222.331l.008.019V4.2a1.036,1.036,0,0,1,.076.39v0a1.082,1.082,0,0,1-.312.76L4.212,8.976a.683.683,0,0,1-.487.2.715.715,0,0,1-.486-.194' transform='translate(3.411 12.076) rotate(-90)' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat;
    --arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23e7e7e8'/%3E%3Cpath d='M3.239,8.986,3.233,8.98a.688.688,0,0,1-.014-.972L5.942,5.28H.689A.685.685,0,0,1,.2,5.089l-.009-.01A.689.689,0,0,1,0,4.6V4.589a.7.7,0,0,1,.188-.48L.194,4.1a.681.681,0,0,1,.494-.213H5.911L3.225,1.178a.694.694,0,0,1,0-.979l0,0A.669.669,0,0,1,3.7,0a.772.772,0,0,1,.473.171l.021.017L7.838,3.845a1.151,1.151,0,0,1,.222.331l.008.019V4.2a1.036,1.036,0,0,1,.076.39v0a1.082,1.082,0,0,1-.312.76L4.212,8.976a.683.683,0,0,1-.487.2.715.715,0,0,1-.486-.194' transform='translate(3.411 12.076) rotate(-90)' fill='%23000'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.m-container .section-disclaimer i {
    position: absolute;
    bottom: 0;
    display: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
    transform: translateY(-4.2px);
    background: var(--arrow-light);
}

@media (max-aspect-ratio: 6 / 5) {
    .m-container .section-disclaimer {
        font-size: 1.714286vw;
    }

    .m-container .section-disclaimer i {
        width: 2.428571vw;
        height: 2.428571vw;
        transform: translateY(calc(-0.1571433vw - 1px));
    }
}

@media (max-aspect-ratio: 7/10) {
    .m-container .section-disclaimer {
        font-size: 3.333333vw;
    }

    .m-container .section-disclaimer i {
        width: 4.722222vw;
        height: 4.722222vw;
        transform: translateY(calc(-0.3055554vw - 1px));
    }
}

.m-container .section-disclaimer li.current i {
    display: inline-block;
}

.m-container .theme-feature-item-2 .theme-feature-item-card-2 .theme-feature-item-text {
    width: 35%;
}

@media (max-aspect-ratio: 7 / 10) {
    .m-container .theme-feature-item-2 .theme-feature-item-card-2 .theme-feature-item-text {
        width: 78.5%;
    }
}



.m-container .disclaimer-container li {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.m-container .disclaimer-container li a {
    color: #000;
}

.m-container .disclaimer-container li.current,
.m-container .disclaimer-container li.current a {
    color: #000;
    font-weight: 800;
}

@media screen and (min-aspect-ratio: 7 / 10) and (max-aspect-ratio: 6 / 5) {
    .m-container .disclaimer-container li {
        font-size: 1.71428vw;
    }

}

@media (max-aspect-ratio: 7 / 10) {
    .m-container .disclaimer-container li {
        font-size: 3.333333vw;
    }
}


.m-container .camera-xmage-detail-title {
    text-align: center;
}

.m-container .camera-xmage-detail-swiper-container {
    border-radius: 1.66667vw;
    margin: 0 auto;
    width: 67.5vw;
    overflow: hidden;
}

.m-container .camera-xmage-detail-swiper-container .product-disclaimer {
    position: absolute;
    left: 1.25vw;
    bottom: 1.25vw;
}

.m-container .camera-xmage-detail-item-3 {
    display: none;
}

.m-container .camera-xmage-detail-item-4 {
    display: none;
}

.m-container .camera-xmage-detail-text-3 {
    display: none;
}

.m-container .camera-xmage-detail-text-4 {
    display: none;
}

.m-container .camera-xmage-detail-swiper-switch-btn {
    width: 50%;
    text-align: center;
    font-weight: 500;
}

.m-container .camera-xmage-detail-swiper-switch-btn[data-id="2"] {
    display: none;
}

.m-container .camera-xmage-detail-swiper-switch-btn[data-id="3"] {
    display: none;
}

.m-container .camera-xmage-detail-swiper-switch-container {
    margin: 0 auto;
    width: 14.0625vw;
}

.m-container .camera-xmage-detail-swiper-switch-scroll-container {
    position: relative;
    width: 100%;
    height: 2.916667vw;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.m-container .camera-xmage-detail-feature-control-container .feature-control-progress-bar {
    width: calc(50% - .416667vw);
}

.m-container .camera-xmage-detail-swiper-switch-btn-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: .9375vw;
    position: relative;
    line-height: 1.25;
}

.m-container .camera-xmage-detail-swiper-switch-btn {
    cursor: pointer;
    transition: opacity .4s ease, color .6s ease;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .camera-xmage-detail-swiper-switch-btn:hover {
        opacity: .5;
    }
}

.m-container .camera-xmage-detail-swiper-switch-btn-row[data-index="0"] .camera-xmage-detail-swiper-switch-btn[data-id="0"] {
    color: #fff;
    opacity: 1;
}

.m-container .camera-xmage-detail-swiper-switch-btn-row[data-index="1"] .camera-xmage-detail-swiper-switch-btn[data-id="1"] {
    color: #fff;
    opacity: 1;
}

.m-container .camera-xmage-detail-swiper-switch-btn-row[data-index="2"] .camera-xmage-detail-swiper-switch-btn[data-id="2"] {
    color: #fff;
    opacity: 1;
}

.m-container .camera-xmage-detail-swiper-switch-line {
    background-color: #E8EAF1;
    height: 2px;
}

.m-container .camera-xmage-detail-swiper-switch-line-bar {
    background: linear-gradient(to right, #434CBE, #A4AEF1);
    height: 100%;
    width: 6.8vw;
    transition: all .6s ease;
}

.m-container .camera-xmage-detail-text {
    margin: 0 auto;
    width: 46.14583vw;
    text-align: center;
}

.m-container .camera-xmage-cards-container {
    margin: 0 auto;
    width: 67.5vw;
}

.m-container .camera-xmage-cards-container {
    margin: 0 auto;
    width: 67.5vw;
}

.m-container .camera-xmage-cards-row {
    display: flex;
    justify-content: space-between;
}

.m-container .camera-xmage-card {
    width: 33.125vw;
}

.m-container .camera-xmage-card-1 .product-disclaimer {
    position: absolute;
    left: 1.25vw;
    bottom: 1.25vw;
}

.m-container .camera-xmage-card-image-container {
    border-radius: 1.67777vw;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.m-container .camera-xmage-card-text {
    margin-top: 2.08333vw;
    margin-left: .83333vw;
    width: 26.5625vw;
}

.m-container .camera-xmage-card-text-highlight {
    color: #000;
    font-weight: 500;
}

.m-container .camera-xmage-card-image-before {
    position: relative;
}

.m-container .camera-xmage-card-image-before-text {
    color: #FFFFFF;
    font-size: 1.145833vw;
    position: absolute;
    top: 2.083333vw;
    right: 2.083333vw;
}

.m-container .camera-xmage-card-image-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
}

.m-container .camera-xmage-card-image-after .camera-xmage-card-image-after-image {
    width: 33.125vw;
}

.m-container .camera-xmage-card-image-after-text {
    color: #fff;
    font-size: 1.145833vw;
    position: absolute;
    top: 2.083333vw;
    left: 2.083333vw;
    width: 3em;
}

.m-container .camera-xmage-card-split-line {
    background: linear-gradient(to bottom, #FFFFFF00 0%, #FFFFFFFF 40%, #FFFFFFFF 60%, #FFFFFF00 100%);
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
}

.m-container .camera-xmage-card-split-line-icon {
    cursor: grab;
    position: absolute;
    left: 50%;
    width: 3.3333vw;
    height: 3.33333vw;
    bottom: 12.5vw;
    transform: translate(-50%, 0%);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.m-container .camera-xmage-card-split-line-icon::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
}


.m-container .camera-xmage-card-split-line-icon-mask {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5vw) opacity(1) brightness(1);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.m-container .camera-xmage-card-split-line-icon-bg {
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 3.3333vw;
    height: 3.33333vw;
    opacity: 1;
    overflow: hidden;
}

.m-container .camera-xmage-card-image-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.m-container .camera-xmage-card-split-line-icon-svg {
    position: relative;
    pointer-events: none;
}

.m-container .camera-xmage-color-card-container {
    position: relative;
}

.m-container .camera-xmage-color-card-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity .6s ease;
}

.m-container .camera-xmage-color-card-item:first-child {
    position: relative;
}

.m-container .camera-xmage-color-card-item.active {
    opacity: 1;
}

.m-container .camera-xmage-color-card-nav-container {
    position: absolute;
    right: 0;
    top: 50%;
    width: 6.875vw;
    height: 12.3vw;
    transform: translateY(-50%);
}

.m-container .camera-xmage-color-card-nav-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.m-container .camera-xmage-color-card-nav-item {
    margin-bottom: 1.1vw;
    overflow: hidden;
}

.m-container .camera-xmage-color-card-nav-item:last-child {
    margin-bottom: 0;
}

.m-container .camera-xmage-color-card-nav-item-image {
    border: .15625vw #FFFFFF00 solid;
    border-radius: .416667vw;
    cursor: pointer;
    width: 4.583333vw;
    overflow: hidden;
    transition: all .6s ease;
}

.m-container .camera-xmage-color-card-nav-item.active .camera-xmage-color-card-nav-item-image {
    border-color: rgba(255, 255, 255, 0.8);
    cursor: default;
}

.m-container .camera-xmage-color-card-nav-item.active .camera-xmage-color-card-nav-item-text {
    opacity: 1;
    cursor: default;
}

.m-container .camera-xmage-color-card-nav-item-text {
    color: #FFFFFF;
    font-size: .9375vw;
    margin-top: .2vw;
    text-align: center;
    width: 4.89583vw;
    opacity: .5;
    cursor: pointer;
    will-change: transform;
    transition: all .6s ease;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .camera-xmage-color-card-nav-item:hover .camera-xmage-color-card-nav-item-text {
        opacity: 1;
    }
}

.m-container .camera-xmage-color-card-nav-background-item {
    background: rgba(255, 255, 255, 0.26);
    border-top-left-radius: 1.6667vw;
    border-bottom-left-radius: 1.6667vw;
    backdrop-filter: blur(.4vw) brightness(1);
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.m-container .camera-xmage-color-card-nav-row {
    padding-top: .98958vw;
    padding-left: .98958vw;
}

.m-container .system-feature-container {
    overflow: hidden;
}

.m-container .system-feature-swiper {
    margin: 0 auto;
    width: 67.5vw;
    overflow: initial;
}

.m-container .system-feature-image {
    border-radius: 1.6667vw;
    will-change: transform;
    overflow: hidden;
}

.m-container .system-feature-image .product-disclaimer {
    position: absolute;
    left: 1.25vw;
    bottom: 1.25vw;
}

.m-container .system-feature-content {
    margin: 2.08333vw 0 0 .83333vw;
    width: 43.75vw;
}

.m-container .system-feature-highlight-text {
    color: #000;
    font-weight: 500;
}

.m-container .system-screen-lock-title {
    text-align: center;
}

.m-container .system-screen-lock-image {
    position: relative;
    border-radius: 1.66667vw;
    margin: 0 auto;
    width: 67.5vw;
    overflow: hidden;
}

.m-container .system-screen-lock-image .product-disclaimer {
    position: absolute;
    left: 1.25vw;
    bottom: 1.25vw;
}

.m-container .system-screen-lock-text {
    margin: 0 auto;
    width: 46.145833vw;
    text-align: center;
}

.m-container .system-screen-lock-more-container {
    display: flex;
    justify-content: center;
}

.m-container .system-xiaoyi-row {
    display: flex;
    align-items: center
}

.m-container .system-xiaoyi-content {
    margin-left: 25vw;
    width: 21.25vw;
}

.m-container .system-xiaoyi-image-container {
    margin-left: 12.65625vw;
    width: 17.8125vw;
}

.m-container .system-xiaoyi-switch-container {
    display: flex;
}

.m-container .system-xiaoyi-image {
    width: 16.666667vw;
    position: absolute;
    left: .572917vw;
    top: .416667vw;
    border-radius: 1.25vw;
    overflow: hidden;
}

.m-container .system-xiaoyi-switch-line {
    background-color: rgba(0, 0, 0, 0.1);
    margin-right: 1.25vw;
    width: 2px;
    flex-shrink: 0;
}

.m-container .system-xiaoyi-switch-line-bar {
    background: linear-gradient(to bottom, #434CBE 0%, #A4AEF1 100%);
    width: 100%;
    height: 7.135417vw;
    transition: transform .6s ease;
}

.m-container .system-xiaoyi-switch-line[data-index="1"] .system-xiaoyi-switch-line-bar {
    transform: translateY(50%);
}

.m-container .system-xiaoyi-switch-line[data-index="2"] .system-xiaoyi-switch-line-bar {
    transform: translateY(104%);
}

.m-container .system-xiaoyi-switch-item {
    cursor: pointer;
    margin-bottom: 1.6667vw;
}

.m-container .system-xiaoyi-switch-item:last-child {
    margin-bottom: 0;
}

.m-container .system-xiaoyi-switch-item-title {
    color: #000000;
    opacity: 0.6;
    font-size: 1.4583333vw;
    line-height: 1.25;
    font-weight: 500;
    will-change: opacity;
    transition: all .6s ease;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .system-xiaoyi-switch-item-title:hover {
        opacity: 0.3;
    }

    .m-container .system-xiaoyi-switch-item.active .system-xiaoyi-switch-item-title:hover {
        opacity: 1;
    }
}

.m-container .system-xiaoyi-switch-item-text {
    color: #666666;
    font-size: 1.04vw;
    height: 0;
    opacity: 0;
    margin-top: 0;
    transition: all .6s ease;
    overflow: hidden;
}

.m-container .system-xiaoyi-switch-item.active {
    cursor: default;
}

.m-container .system-xiaoyi-switch-item.active .system-xiaoyi-switch-item-title {
    opacity: 1;
}

.m-container .system-xiaoyi-switch-item.active .system-xiaoyi-switch-item-text {
    height: 4.8em;
    margin-top: .8333vw;
    opacity: 1;
}

.m-container .system-safety-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m-container .system-safety-subtitle {
    display: flex;
    margin-bottom: .5vw;
}

.m-container .system-safety-subtitle-icon {
    margin-right: .73vw;
    width: 3.23vw;
}

.m-container .system-safety-subtitle-text {
    color: #0071FF;
    font-size: 2.65625vw;
    line-height: 1.25;
    font-weight: 500;
}

.m-container .system-safety-row {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 67.5vw;
}

.m-container .system-safety-item {
    width: 33.125vw;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .system-safety-item:hover:not(.no-clickto):not(.swiper-slide-active) {
        cursor: inherit;
    }
}

.m-container .system-safety-item-image {
    border-radius: 1.67777vw;
    position: relative;
    overflow: hidden;
}

.m-container .system-safety-item-text {
    margin-top: 2.08333vw;
    margin-left: .83333vw;
    width: 25.520833vw;
}

.m-container .system-safety-text-highlight {
    color: #000;
    font-weight: 500;
}

.m-container .system-safety-des {
    width: 67.5vw;
    margin: 1.770833vw auto 0;
    font-size: max(8px, .625vw);
    text-align: right;
    color: #999999;
}


.m-container .section-performance {
    overflow: hidden;
}

.m-container .performance-scale-wrapper {
    position: relative;
}

.m-container .performance-main-title {
    position: relative;
    background-color: #fff;
    z-index: 2;
}

.m-container .performance-main-title-container {
    padding-top: 4.948vw;
    position: relative;
}

.m-container .performance-main-title-bg {
    position: absolute;
    top: 0;
    left: 16.98vw;
    width: 66.041666vw;
    opacity: 0;
    transform: translateY(10%);
    transition: all .8s ease .2s;
}

.m-container .performance-main-title-container.active .performance-main-title-bg {
    opacity: 1;
    transform: translateY(0);
}

.m-container .performance-top-container,
.m-container .performance-intro-container {
    position: relative;
    width: 67.5vw;
    margin: 0 auto;
}

.m-container .performance-top-container .product-subtitle-icon {
    width: 6.25vw;
}

.m-container .performance-intro-image {
    position: relative;
    border-radius: 1.666667vw;
    overflow: hidden;
}

.m-container .performance-intro-image .product-disclaimer {
    position: absolute;
    left: 1.25vw;
    bottom: 1.25vw;
}

.m-container .performance-intro-title-container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.m-container .performance-intro-text {
    width: 45.208333vw;
    text-align: center;
    margin: 0 auto;
}

.m-container .performance-intro-content-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
}

.m-container .performance-intro-content-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.m-container .performance-intro-content-item-large {
    font-size: 2.5vw;
    line-height: 1.25;
    font-weight: bold;
    color: #FFFFFF;
}

.m-container .performance-intro-content-item-large-2 {
    background: linear-gradient(140deg, #434CBE 30%, #FBAC8C 50%, #A4AEF1 82%, #A4AEF1 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.m-container .performance-intro-content-item-title {
    color: #FFFFFF;
    font-size: 1.145833vw;
    line-height: 1.25;
    font-weight: 500;
}

.m-container .performance-intro-content-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 46.302083vw;
}

.m-container .performance-intro-content-line {
    width: 1px;
    opacity: .5;
}

.m-container .performance-intro-content-item-text {
    font-size: 3.33333vw;
    font-weight: 500;
    line-height: 1.25;
    margin-top: .4vw;
    background: linear-gradient(151deg, #434CBE 35%, #FBAC8C 52%, #A4AEF1 72%, #A4AEF1 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.m-container .performance-intro-content-item-text-small {
    font-size: .5em;
}

.m-container .performance-scale {
    position: relative;
}

.m-container .performance-scale .space-200 {
    background: #fff;
    position: relative;
    z-index: 2;
}

.m-container .performance-scale .performance-scale-image {
    position: relative;
    width: 59.166667vw;
    transform: scale(1.9) translateY(-1.2vw);
    transform-origin: top;
    /* overflow: hidden; */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-container .performance-scale-phone {
    width: 100%;
    height: 100%;
    position: absolute;
    top: auto;
    left: auto;
    transform-origin: top;
    /* transform: scale(1.69); */
    opacity: 0;
}

.m-container .performance-scale-image-copy {
    width: 67.083333vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -13vw;
    z-index: -1;
}

.m-container .performance-scale-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 47.916667vw;
    margin: 0 auto;
    text-align: center;
    transform: translateY(2vw);
    flex-direction: column;
    opacity: 0;
}

.m-container .performance-scale-right {
    position: absolute;
    right: 26.041667vw;
    bottom: -3.75vw;
    transform: translateY(2vw);
    opacity: 0;
}

.m-container .performance-scale-text {
    width: 31.25vw;
    text-align: left;
}

.m-container .performance-scale-right-large-text {
    font-size: 5.572917vw;
    line-height: 1;
    background: linear-gradient(151deg, #161F8F 35%, #3945AC 52%, #9AA5E8 72%, #9AA5E8 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.m-container .performance-scale-right-large-text span {
    font-size: 0.327em;
}

.m-container .performance-detail-title {
    text-align: center;
}

.m-container .performance-detail-container {
    width: 67.5vw;
    margin: 0 auto;
    will-change: transform;
}

.m-container .performance-detail-image {
    border-radius: 1.6667vw;
    background: linear-gradient(to bottom, #F5F6FD, #DEE6FC);
    overflow: hidden;
}

.m-container .performance-detail-text {
    width: 48.75vw;
    margin: 0 auto;
    text-align: center;
}

.m-container .performance-detail-large-text {
    font-size: 7.34375vw;
    position: absolute;
    top: 19.9375vw;
    left: 10vw;
    transform: translateZ(1px);
    width: max-content;
    display: flex;
    background: linear-gradient(to right, #161F8F 0%, #3945AC 42%, #3945AC 52%, #3945AC 80%, #9AA5E8 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    z-index: 3;
    display: none;
}

.m-container .performance-detail-large-text>div:last-child {
    margin-left: 17vw;
}

.m-container .performance-highlight-text {
    font-weight: 500;
    color: #000;
}

.m-container .performance-detail-content {
    margin: 2.08333vw 0 0 .83333vw;
    width: 35.5vw;
}


.m-container .performance-detail-highlight-text {
    color: #000;
    font-weight: 500;
}

.m-container .performance-feature-title {
    text-align: center;
}

.m-container .performance-feature-container {
    overflow: hidden;
}

.m-container .performance-feature-swiper {
    margin: 0 auto;
    width: 67.5vw;
    overflow: initial;
}

.m-container .performance-feature-image {
    border-radius: 1.6667vw;
    will-change: transform;
    overflow: hidden;
}

.m-container .performance-feature-image .product-disclaimer {
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
}

.m-container .performance-feature-content {
    margin: 2.08333vw 0 0 .83333vw;
    width: 41.354167vw;
}

.m-container .performance-feature-highlight-text {
    font-weight: 500;
    color: #000;
}

.m-container .accessory-cards-title {
    text-align: center;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .swiper .accessory-card:not(.no-clickto):not(.swiper-slide-active) {
        cursor: inherit;
    }
}

.m-container .accessory-cards-row {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 67.5vw;
}

.m-container .accessory-card {
    background-color: #F7F9FC;
    border-radius: 1.66667vw;
    width: 33.125vw;
    height: auto;
    overflow: hidden;
}

.m-container .accessory-card-image {
    position: relative;
    width: 67.5vw;
    margin: 0 auto;
    border-radius: 1.666667vw;
    overflow: hidden;
}

.m-container .accessory-cards-swiper .product-disclaimer {
    width: 67.5vw;
    text-align: right;
    margin: 0 auto;
    opacity: 1;
    color: #999999;
}

.m-container .accessory-card-image-container {
    margin: 0 auto;
    width: 13.020833vw;
    padding-top: 3.333333vw;
}

.m-container .accessory-card-image-swiper-1-switch-container {
    display: flex;
    justify-content: center;
}

.m-container .accessory-card-image-swiper-1-switch-item {
    margin-right: .73vw;
    transition: opacity .4s ease;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .accessory-card-image-swiper-1-switch-item:not(.active):hover {
        cursor: pointer;
        opacity: .5;
    }
}

.m-container .accessory-card-text {
    font-size: 1.041667vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.666667vw;
    color: #666666;
}

.m-container .accessory-card-image-swiper-1-switch-item:last-child {
    margin-right: 0;
}

.m-container .accessory-card-image-swiper-1-switch-item-bg {
    width: 100%;
}

.m-container .accessory-card-image-swiper-1-switch-item {
    position: relative;
    width: 1.5625vw;
    flex-shrink: 0;
}

.m-container .accessory-card-image-swiper-1-switch-item .accessory-card-image-swiper-1-switch-item-border {
    opacity: 0;
    will-change: opacity;
    transition: all .6s ease;
}

.m-container .accessory-card-image-swiper-1-switch-item.active .accessory-card-image-swiper-1-switch-item-border {
    opacity: 1;
}

.m-container .accessory-card-image-swiper-1-switch-item-border {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.accessory-card-image-swiper-2-switch-item circle:nth-of-type(2) {
    opacity: 0;
    transition: opacity 0.6s;
}

.accessory-card-image-swiper-2-switch-item.active circle:nth-of-type(2) {
    opacity: 1;
}

.m-container .accessory-card-image-swiper-2-switch-container {
    display: flex;
    justify-content: center;
}

.m-container .accessory-card-image-swiper-2-switch-item {
    margin-right: .73vw;
    transition: opacity .4s ease;
}

.m-container .accessory-card-image-swiper-2-switch-item svg {
    width: 1.5625vw;
    height: 1.5625vw;
    overflow: visible;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .accessory-card-image-swiper-2-switch-item:not(.active):hover {
        cursor: pointer;
        opacity: .5;
    }
}

.m-container .accessory-card-image-swiper-2-switch-item:last-child {
    margin-right: 0;
}

.m-container .accessory-card-image-swiper-2-switch-item-bg {
    width: 100%;
}


.m-container .accessory-card-link {
    text-align: center;
    margin-bottom: 1.5625vw;
}

.m-container .accessory-card-link a {
    color: #666666;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.041667vw;
    will-change: opacity;
    transition: .4s;
}

.m-container .accessory-card-link a svg {
    margin-left: .416667vw;
    width: .83333vw;
    height: .83333vw;
    transform: translateX(-4px);
    will-change: transform;
    transition: .4s;
}

@media (any-hover: hover) and (pointer: fine) {

    .m-container .accessory-card-link:hover a {
        opacity: .6;
    }

    .m-container .accessory-card-link:hover svg {
        transform: translateX(0);
    }
}

.m-container .product-popup-button-container {
    display: flex;
    justify-content: center;
}

.m-container .product-popup-button {
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.m-container .product-popup-button-row {
    position: relative;
    border-radius: 1.6667vw;
    display: flex;
    align-items: center;
    height: 3.33333vw;
    box-shadow: inset 0 0.45vw 0.525vw #434CBE78;
}

.m-container .product-popup-button-row::after {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 9999px;
    pointer-events: none;
    -webkit-border-radius: 9999px;
    box-shadow: inset 0 -0.125vw 0.25625vw #A4AEF1;
    transform: translateZ(-0.0001px);
    will-change: transform;
}

.m-container .product-popup-button-text {
    font-size: .9375vw;
    font-weight: 500;
    margin-left: 1.77vw;
    will-change: opacity;
    transition: opacity .6s ease;
}

.m-container .product-popup-button-icon {
    border-radius: 100%;
    margin: 0 .83333vw;
    width: 1.66667vw;
    height: 1.66667vw;
    position: relative;
}

.m-container .product-popup-button-icon-bg {
    border-radius: 1.66667vw;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(-32deg, #A4AEF1 20%, #434CBE 80%);
    will-change: filter;
    transition: filter .6s ease;
    z-index: 0;
}

.m-container .product-popup-button-icon svg {
    width: .833333vw;
    height: .833333vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.m-container .product-popup-button-icon-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.66667vw;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .product-popup-button-container:hover .product-popup-button-icon-bg {
        filter: blur(2px);
    }

    .m-container .product-popup-button-container:hover .product-popup-button-text {
        opacity: 0.6;
    }
}

.m-container .common-popup-container {
    padding-inline-end: var(--scrollbar-width);
    overflow: auto;
    z-index: -1;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(62, 62, 62, 0.4);
    transform: translateZ(0);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    transition: opacity .3s cubic-bezier(0, 0, 0.5, 1);
    overflow: hidden;
}

:root.overflow-hidden {
    overflow: hidden;
}

.overflow-hidden {
    overflow: hidden;
}

.m-container .common-popup-container.allow-scroll {
    overflow: auto;
    padding-inline-end: 0;
}

.m-container .common-popup-container.popup-open {
    top: 0;
    z-index: 999;
    opacity: 1;
}

.m-container .common-popup-column {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

.m-container .common-popup-content-container {
    padding-top: 3.3%;
    padding-bottom: 3.3%;
    width: 81.25vw;
    transform: translateY(100vh);
    transition: transform .6s cubic-bezier(0, 0, 0.5, 1);
}

.m-container .common-popup-container img {
    width: 100%;
}

.m-container .common-popup-container img.btn-highlight {
    width: 1.875vw;
    top: 0;
    right: 0;
}

.m-container .common-popup-container video {
    width: 100%;
}

.m-container .common-popup-container.popup-open .common-popup-content-container {
    transform: translateY(0);
}

.m-container .common-popup-content-wrapper {
    background-color: #FFFFFF;
    border-radius: .833333vw;
    will-change: transform;
}

.m-container .common-popup-close-btn-container {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    top: 1.6667vw;
    z-index: 5;
}

.m-container .common-popup-close-btn {
    cursor: pointer;
    margin-right: 1.6667vw;
}

.m-container .common-popup-close-btn-icon {
    border-radius: 100%;
    width: 2.08333vw;
    height: 2.08333vw;
    position: relative;
}

.m-container .common-popup-close-btn-icon-shadow {
    box-shadow: inset 0 0.45vw 0.525vw #434CBE78;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 2.08333vw;
    height: 2.08333vw;
    opacity: 1;
}

.m-container .common-popup-close-btn-icon-bg {
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #FFFFFFFF, #FFFFFF00);
    backdrop-filter: blur(1vw);
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: -1;
}

.m-container .common-popup-close-btn-icon-bg::after {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 9999px;
    pointer-events: none;
    -webkit-border-radius: 9999px;
    box-shadow: inset 0 -0.125vw 0.25625vw #A4AEF1;
    transform: translateZ(-0.0001px);
    will-change: transform;
}

.m-container .common-popup-close-btn-icon-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.08333vw;
}

.m-container .common-popup-close-btn-icon-highlight {
    filter: blur(1px);
    position: absolute;
    top: .208333vw;
    left: .1302vw;
    width: 2.08333vw;
}

.m-container .common-popup-close-btn-icon-cross,
.m-container .common-popup-close-btn-icon-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.m-container .common-popup-close-btn-icon-hover {
    opacity: 0;
    will-change: opacity;
    transition: opacity .6s ease;
}

.m-container .common-popup-close-btn-icon-cross svg,
.m-container .common-popup-close-btn-icon-hover svg {
    width: .846875vw;
    height: .846875vw;
}

.m-container .common-popup-close-btn-icon-cross rect {
    transition: fill .6s ease;
}

@media (any-hover: hover) and (pointer: fine) {
    .m-container .common-popup-close-btn:hover .common-popup-close-btn-icon-cross rect {
        fill: #FFFFFF;
    }

    .m-container .common-popup-close-btn:hover .common-popup-close-btn-icon-hover {
        opacity: 1;
    }
}

.m-container .system-screen-lock-learn-more-popup .common-popup-content-wrapper {
    padding-top: 1.6667vw;
}

.m-container .system-screen-lock-learn-more-title {
    text-align: center;
}

.m-container .system-screen-lock-learn-more-popup-container {
    position: relative;
    overflow: hidden;
}

.m-container .system-screen-lock-more-image {
    position: relative;
    border-radius: 1.66667vw;
    margin: 0 auto;
    width: 67.5vw;
    overflow: hidden;
}

.m-container .system-screen-lock-more-image .product-disclaimer {
    position: absolute;
    left: 1.25vw;
    bottom: 1.25vw;
}

.m-container .system-screen-lock-more-text {
    margin: 0 auto;
    width: 46.145833vw;
    text-align: center;
}

.m-container .system-screen-lock-more-text .system-screen-lock-more-highlight {
    color: #000000;
    font-weight: 500;
}

.m-container .system-screen-lock-learn-more-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 1.66667vw;
}

.m-container .system-screen-lock-learn-more-bg::before {
    content: '';
    width: 137.604167vw;
    height: 137.604167vw;
    transform: scaleY(0.48902);
    background-image: radial-gradient(circle, #4B62D9, #FFFFFF 59%, #FFFFFF 100%);
    opacity: 0.2;
    border-radius: 9999px;
    position: absolute;
    top: -47.208333vw;
    left: 30.416667vw;
    z-index: -1;
}

@media (max-aspect-ratio: 6 / 5) {
    .m-container .camera-xmage-detail-swiper-switch-scroll-container {
        height: 6.857143vw;
        flex-direction: column;
    }

    .m-container .camera-xmage-detail-feature-control-container .feature-control-progress-bar {
        width: calc(50% - .571429vw);
    }

    .m-container .feature-control-row[data-index="0"] .feature-control-progress-bar {
        transform: translateX(.571429vw);
    }

    .m-container .feature-control-progress-bar {
        top: .571429vw;
        height: calc(100% - 1.142857vw);
    }

    .m-container .camera-xmage-detail-swiper-switch-line-bar {
        width: 15.7187vw;
    }


    .m-container .camera-xmage-detail-swiper-switch-container {
        width: 31vw;
    }

    .m-container .camera-xmage-detail-swiper-switch-line-row {
        width: 100%;
    }

    .m-container .camera-xmage-detail-swiper-switch-btn-row {
        justify-content: space-between;
        font-size: 2vw;
    }

    .m-container .camera-xmage-detail-swiper-container {
        border-radius: 2.2857vw;
        width: 75.42857vw;
    }

    .m-container .camera-xmage-detail-swiper-switch-line-bar {
        width: 15.7187vw;
    }

    .m-container .camera-xmage-detail-swiper-switch-scroll-container::after {
        box-shadow: inset 0 -.142857vw .857143vw #A4AEF1;
    }

    .m-container .camera-xmage-detail-text {
        width: 71.42857vw;
    }

    .m-container .camera-xmage-detail-compare-container {
        border-radius: 2.2857vw;
        position: relative;
        overflow: hidden;
    }

    .m-container .camera-xmage-detail-compare-item {
        position: relative;
    }

    .m-container .camera-xmage-detail-compare-item-after {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        overflow: hidden;
    }

    .m-container .camera-xmage-detail-compare-item-after img {
        width: 75.42857vw;
    }

    .m-container .camera-xmage-detail-compare-item-before-text {
        color: #FFFFFF;
        font-size: 1.57142857vw;
        position: absolute;
        top: 2.857vw;
        right: 2.857vw;
        width: 4em;
    }

    .m-container .camera-xmage-detail-compare-item-after-text {
        color: #FFFFFF;
        font-size: 1.57142857vw;
        position: absolute;
        top: 2.857vw;
        left: 2.857vw;
        width: 4em;
    }

    .m-container .camera-xmage-detail-compare-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 13.857vw;
        height: 100%;

    }

    .m-container .camera-xmage-detail-compare-line-block {
        background: linear-gradient(to right, #FFBF7E00 0, #FFBF7EB7 65%, #FFFDF1FF 100%);
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
    }

    .m-container .camera-xmage-cards-container {
        width: 75.428571vw;
    }

    .m-container .camera-xmage-detail-swiper-container .product-disclaimer {
        left: 1.714286vw;
        bottom: 1.714286vw;
    }

    .m-container .camera-xmage-card {
        width: 36.857143vw;
    }

    .m-container .camera-xmage-card-image-container {
        border-radius: 1.142857vw;
    }

    .m-container .camera-xmage-card-text {
        margin-top: 2.8571vw;
        margin-left: 1.142857vw;
        width: 32.857vw;
    }

    .m-container .camera-xmage-card-image-after .camera-xmage-card-image-after-image {
        width: 36.857142vw;
    }

    .m-container .camera-xmage-card-image-before-text {
        font-size: 1.57142vw;
    }

    .m-container .camera-xmage-card-image-after-text {
        font-size: 1.57142vw;
    }

    .m-container .camera-xmage-card-split-line {
        width: 1px;
    }

    .m-container .camera-xmage-card-split-line-icon,
    .m-container .camera-xmage-card-split-line-icon-bg {
        width: 4.57142857vw;
        height: 4.57142857vw;
    }

    .m-container .camera-xmage-card-split-line-svg {
        transform: none;
    }

    .m-container .camera-xmage-card-split-line-icon .btn-highlight {
        width: 3.428571vw;
        height: 1.357143vw;
    }

    .m-container .camera-xmage-color-card-nav-container {
        width: 13.2857vw;
        height: 23.142857vw;
    }

    .m-container .camera-xmage-color-card-nav-background-item {
        border-top-left-radius: 2.2857vw;
        border-bottom-left-radius: 2.2857vw;
    }

    .m-container .camera-xmage-color-card-nav-row {
        padding: 2.07142857vw 0 0 2.07142857vw;
    }

    .m-container .camera-xmage-color-card-nav-item-image {
        border-radius: .57142857vw;
        border-width: 1.5px;
        width: 9vw;
    }

    .m-container .camera-xmage-color-card-nav-item-text {
        font-size: 1.7142857vw;
        margin-top: .5vw;
        width: 9vw;
    }

    .m-container .camera-xmage-color-card-nav-item {
        margin-bottom: 2vw;
    }

    .m-container .camera-xmage-card-text {
        width: 34.285714vw;
        margin-top: 3.428571vw;
        margin-left: 1.142857vw;
    }

    .m-container .system-feature-swiper {
        width: 75.42857vw;
    }

    .m-container .system-feature-image {
        border-radius: 2.2857vw;
    }

    .m-container .system-feature-image .product-disclaimer {
        left: 1.714286vw;
        bottom: 1.714286vw;
    }

    .m-container .system-feature-content {
        margin: 3.42857vw 0 0 1.142857vw;
        width: 59.857vw;
    }

    .m-container .system-screen-lock-image {
        border-radius: 2.2857vw;
        width: 75.42857vw;
    }

    .m-container .system-screen-lock-image .product-disclaimer {
        left: 1.714286vw;
        bottom: 1.714286vw;
    }

    .m-container .system-screen-lock-text {
        width: 71.42857vw;
    }

    .m-container .system-assistant-image {
        border-radius: 2.2857vw;
        width: 75.42857vw;
    }

    .m-container .system-assistant-text {
        width: 71.42857vw;
    }

    .m-container .system-xiaoyi-content {
        margin-left: 15.714286vw;
        width: 29vw;
    }

    .m-container .system-xiaoyi-switch-line {
        margin-right: 1.7142857vw;
    }

    .m-container .system-xiaoyi-image-container {
        margin-left: 12.428571vw;
        width: 27.142857vw;
    }

    .m-container .system-xiaoyi-image {
        width: 25.571429vw;
        top: .357143vw;
        left: .714286vw;
        border-radius: 2.857143vw;
    }

    .m-container .system-xiaoyi-switch-item {
        margin-bottom: 2.142857vw;
    }

    .m-container .system-xiaoyi-switch-item-title {
        font-size: 2.857142857vw;
    }

    .m-container .system-xiaoyi-switch-item-text {
        font-size: 1.57142857vw;
        margin-top: 1.357vw;
    }

    .m-container .system-xiaoyi-switch-item.active .system-xiaoyi-switch-item-text {
        margin-top: 1.428571vw;
    }

    .m-container .system-xiaoyi-switch-item.active[data-id="0"] .system-xiaoyi-switch-item-text {
        height: 6.4em;
    }

    .m-container .system-xiaoyi-switch-line-bar {
        transition: all .6s ease;
    }

    .m-container .system-xiaoyi-switch-line[data-index="0"] .system-xiaoyi-switch-line-bar {
        height: 14.5vw;
    }

    .m-container .system-xiaoyi-switch-container {
        margin-top: .57142857vw;
    }

    .m-container .system-xiaoyi-switch-line-bar {
        height: 10.785714vw;
    }

    .m-container .system-xiaoyi-switch-line[data-index="1"] .system-xiaoyi-switch-line-bar {
        transform: translateY(69%);
    }

    .m-container .system-xiaoyi-switch-line[data-index="2"] .system-xiaoyi-switch-line-bar {
        transform: translateY(146.5%);
    }

    .m-container .system-safety-container {
        overflow: hidden;
    }

    .m-container .system-safety-subtitle-icon {
        margin-right: 1vw;
        width: 4.42857vw;
    }

    .m-container .system-safety-subtitle-text {
        font-size: 3.642857vw;
        line-height: 1.6;
    }

    .m-container .system-safety-subtitle {
        margin-bottom: .7vw;
    }

    .m-container .system-safety-swiper {
        margin: 0 auto;
        width: 75.428571vw;
        overflow: initial;
    }

    .m-container .system-safety-row {
        width: 100%;
    }

    .m-container .system-safety-item {
        width: 36.857143vw;
    }

    .m-container .system-safety-item-image {
        border-radius: 2.2857vw;
    }

    .m-container .system-safety-item-text {
        margin: 3.428571vw auto 0 1.142857vw;
        width: 34.285714vw;
    }

    .m-container .system-safety-des {
        font-size: max(8px, 1vw);
        width: 90%;
        text-align: center;
        margin-top: 6.714286vw;
    }

    .m-container .product-popup-button-row {
        border-radius: 3.42857vw;
        height: 6.857vw;
        box-shadow: inset -.285714vw 1.142857vw .857143vw #434CBE78;
    }

    .m-container .product-popup-button-text {
        font-size: 2vw;
        margin-left: 3.42857vw;
    }

    .m-container .product-popup-button-icon {
        margin: 0 1.7142857vw;
        width: 3.42857vw;
        height: 3.42857vw;
    }

    .m-container .product-popup-button-icon-shadow {
        top: .2857vw;
        width: 3.42857vw;
        height: 3.42857vw;
    }

    .m-container .product-popup-button-icon-bg {
        border-radius: 100%;
        width: 3.42857vw;
        height: 3.42857vw;
    }

    .m-container .product-popup-button-icon-bg-mask {
        width: 3.42857vw;
        height: 3.42857vw;
    }

    .m-container .product-popup-button-icon-mask {
        border-radius: 100%;
        width: 3.42857vw;
        height: 3.42857vw;
    }

    .m-container .product-popup-button-icon-bg-left {
        left: -2.857vw;
        width: 3.42857vw;
        height: 3.42857vw;
    }

    .m-container .product-popup-button-icon-bg-right {
        right: -2.857vw;
        width: 3.42857vw;
        height: 3.42857vw;
    }

    .m-container .product-popup-button-icon-border {
        width: 100%;
    }

    .m-container .product-popup-button-icon-highlight {
        top: .2857vw;
        left: .2142857vw;
        width: 3vw;
    }

    .m-container .product-popup-button-icon svg {
        width: 1.7142857vw;
        height: 1.7142857vw;
    }

    .m-container .product-popup-button-row::after {
        box-shadow: inset 0 -.142857vw .857143vw #A4AEF1;
    }

    .m-container .performance-top-container .product-subtitle-icon {
        width: 8.571429vw;
    }

    .m-container .performance-top-container,
    .m-container .performance-intro-container {
        width: 75.428571vw;
    }

    .m-container .performance-intro-content-container {
        bottom: 5.7142857vw;
        left: 56.142857vw;
    }

    .m-container .performance-detail-container {
        width: 75.428571vw;
    }

    .m-container .performance-detail-large-text {
        font-size: 10.071429vw;
        top: 26.9375vw;
        left: 5vw;
    }

    .m-container .performance-detail-large-text>div:last-child {
        margin-left: 23vw;
    }

    .m-container .performance-intro-text,
    .m-container .performance-detail-text {
        width: 71.428571vw;
    }

    .m-container .performance-intro-content-row {
        width: auto;
    }

    .m-container .performance-intro-image {
        border-radius: 2.285714vw;
    }

    .m-container .performance-intro-image .product-disclaimer {
        left: 1.714286vw;
        bottom: 1.714286vw;
    }

    .m-container .performance-intro-content-item-title {
        font-size: 1.571429vw;
    }

    .m-container .performance-intro-content-item-text {
        font-size: 4.57vw;
        margin-top: 1.428571vw;
    }

    .m-container .performance-detail-swiper {
        width: 75.42857vw;
    }

    .m-container .performance-detail-image {
        border-radius: 2.2857vw;
    }

    .m-container .performance-detail-content {
        margin: 3.42857vw 0 0 1.142857vw;
        width: 59.857vw;
    }

    .m-container .performance-feature-swiper {
        width: 75.42857vw;
    }

    .m-container .performance-feature-image {
        border-radius: 2.2857vw;
    }

    .m-container .performance-feature-content {
        margin: 3.42857vw 0 0 1.142857vw;
        width: 59.857vw;
    }

    .m-container .performance-scale .performance-scale-image {
        width: 80.428571vw;
        transform: scale(1.9) translateY(-2vw);
        border-radius: 5vw;
        overflow: hidden;
    }

    .m-container .performance-scale-content {
        width: 69.714286vw;
    }

    .m-container .performance-scale-text {
        width: 42.857143vw;
        transform: none;
        opacity: 1;
    }

    .m-container .performance-scale-text p,
    .m-container .performance-scale-right-text p {
        font-size: 1.571429vw;
    }

    .m-container .performance-scale-right {
        text-align: left;
        right: 15.142857vw;
        bottom: -5vw;
    }

    .m-container .performance-scale-right-large-text {
        font-size: 7.642857vw;
    }

    .m-container .performance-scale-image-copy {
        width: 92vw;
        bottom: -22.4vw;
    }

    .m-container .common-popup-content-wrapper {
        border-radius: 2.2857vw;
    }

    .m-container .camera-learn-more-popup .common-popup-close-btn-container {
        padding-top: 2.857vw;
    }

    .m-container .common-popup-content-container {
        width: 88.57142857vw;
        padding: 5.7142857vw 0;
    }

    .m-container .common-popup-close-btn {
        margin-right: 2.857vw;
    }

    .m-container .camera-learn-more-popup-container {
        margin-top: -8.5vw;
    }

    .m-container .system-screen-lock-learn-more-popup .common-popup-content-wrapper {
        padding-top: 2.857143vw;
    }

    .m-container .common-popup-close-btn-container {
        top: 2.857143vw;
    }

    .m-container .common-popup-close-btn-icon {
        width: 5.7142857vw;
        height: 5.7142857vw;
    }

    .m-container .common-popup-close-btn-icon-shadow {
        top: 0;
        width: 100%;
        height: 100%;
        box-shadow: inset -.142857vw .571429vw .714286vw #434CBE78;
    }

    .m-container .common-popup-close-btn-icon-bg {
        width: 100%;
        height: 100%;
    }

    .m-container .common-popup-close-btn-icon-bg::after {
        box-shadow: inset 0 -1px .428571vw #A4AEF1;
    }

    .m-container .common-popup-close-btn-icon-border {
        width: 100%;
    }

    .m-container .common-popup-container img.btn-highlight {
        height: auto;
        top: 0;
        right: .342857vw;
        width: 4.285714vw;
    }

    .m-container .common-popup-close-btn-icon-cross svg,
    .m-container .common-popup-close-btn-icon-hover svg {
        width: 2.32357vw;
        height: 2.32357vw;
    }

    .m-container .system-screen-lock-learn-more-bg {
        border-radius: 2.2857vw;
    }

    .m-container .system-screen-lock-more-image {
        width: 77.142857vw;
        border-radius: 2.285714vw;
    }

    .m-container .system-screen-lock-more-image .product-disclaimer {
        left: 1.714286vw;
        bottom: 1.714286vw;
    }

    .m-container .system-screen-lock-more-text {
        width: 66.2142857vw;
    }

    .m-container .accessory-cards-row,
    .m-container .accessory-cards-swiper .product-disclaimer {
        width: 75.428571vw;
    }

    .m-container .accessory-cards-swiper .product-disclaimer {
        font-size: max(8px, 1.285714vw);
    }

    .m-container .accessory-card {
        background-color: transparent;
        border-radius: 0;
        width: 36.857143vw;
    }

    .m-container .accessory-card-bg-container {
        background-color: #EFF3F780;
        border-radius: 2.2857vw;
    }

    .m-container .accessory-card-image-container {
        width: 20.857143vw;
        padding-top: 4.57vw;
    }

    .m-container .accessory-card-image-swiper-1-switch-container {
        padding: 3.428571vw 0;
    }

    .m-container .accessory-card-image-swiper-1-switch-item {
        margin-right: 2.2857vw;
    }

    .m-container .accessory-card-image-swiper-1-switch-item,
    .m-container .accessory-card-image-swiper-2-switch-item {
        width: 3.714286vw;
    }

    .m-container .accessory-card-image-swiper-2-switch-container {
        padding: 3.428571vw 0;
        line-height: 0;
    }

    .m-container .accessory-card-image-swiper-2-switch-item {
        margin-right: 2.2857vw;
    }

    .m-container .accessory-card-image-swiper-2-switch-item svg {
        width: 3.714286vw;
        height: 3.714286vw;
    }

    .m-container .accessory-card-image {
        width: 75.428571vw;
    }

    .m-container .accessory-card-text {
        font-size: 2.285714vw;
    }

    .m-container .accessory-card-link {
        margin-top: 3.142857vw;
        margin-bottom: 0;
    }

    .m-container .accessory-card-link a {
        font-size: 2vw;
    }

    .m-container .accessory-card-link a svg {
        margin-left: .571429vw;
        width: 2.142857vw;
        height: 2.142857vw;
    }
}

@media (max-aspect-ratio: 7 / 10) {
    .m-container .camera-xmage-detail-swiper-container {
        border-radius: 4.44444vw;
        width: 91.11111vw;
    }

    .m-container .camera-xmage-detail-compare-item-after img {
        width: 91.11111vw;
    }

    .m-container .camera-xmage-detail-compare-item-before-text {
        top: 5.55vw;
        right: 5.555vw;
        font-size: 4.444vw;
        display: none;
    }

    .m-container .camera-xmage-detail-compare-item-after-text {
        top: 5.55vw;
        left: 5.555vw;
        font-size: 4.444vw;
        display: none;
    }

    .m-container .camera-xmage-detail-swiper-switch-container {
        box-sizing: border-box;
        width: 100%;
        overflow: auto;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
    }

    .m-container .camera-xmage-detail-swiper-switch-container::-webkit-scrollbar {
        display: none;
    }

    .m-container .camera-xmage-detail-swiper-switch-scroll-container {
        width: max-content;
        height: auto;
        padding: 0 8.88888vw;
    }

    .m-container .camera-xmage-detail-swiper-switch-scroll-container::after {
        display: none;
    }

    .m-container .camera-xmage-detail-swiper-container .product-disclaimer {
        left: 3.333333vw;
        bottom: 3.333333vw;
    }

    .m-container .camera-xmage-detail-swiper-switch-btn {
        width: auto;
        opacity: 0.6;
        margin: 0 4.444444vw;
    }

    .m-container .camera-xmage-detail-swiper-switch-btn:first-child {
        margin-right: 4.444444vw;
        margin-left: 0;
    }

    .m-container .camera-xmage-detail-swiper-switch-btn:last-child {
        margin-right: 0;
    }

    .m-container .camera-xmage-color-card-nav-container {
        top: auto;
        bottom: 0;
        right: 50%;
        width: 36.94444vw;
        height: 22.22222vw;
        transform: translateX(50%);
    }

    .m-container .camera-xmage-color-card-nav-row {
        display: flex;
        padding: 3.33333vw 0 0 3.33333vw;
    }

    .m-container .camera-xmage-color-card-nav-background-item {
        border-top-left-radius: 4.44444vw;
        border-top-right-radius: 4.44444vw;
        border-bottom-left-radius: 0;
    }

    .m-container .camera-xmage-color-card-nav-item-image {
        border-radius: 1.11111vw;
        width: 12.5vw;
    }

    .m-container .camera-xmage-color-card-nav-item.active .camera-xmage-color-card-nav-item-image {
        border-color: #fff;
    }

    .m-container .camera-xmage-color-card-nav-item {
        margin-right: 4.44444vw;
        margin-bottom: 0;
    }

    .m-container .camera-xmage-color-card-nav-item:last-child {
        margin-right: 0;
    }

    .m-container .camera-xmage-color-card-nav-item-text {
        font-size: 3.333333vw;
        margin-top: 1.5vw;
        width: 12.5vw;
    }

    .m-container .feature-control-row[data-index="0"] .feature-control-title-item[data-id="0"],
    .m-container .feature-control-row[data-index="1"] .feature-control-title-item[data-id="1"],
    .m-container .feature-control-row[data-index="2"] .feature-control-title-item[data-id="2"],
    .m-container .feature-control-row[data-index="3"] .feature-control-title-item[data-id="3"] {
        opacity: 1;
    }

    .m-container .camera-xmage-detail-swiper-switch-btn-row {
        font-size: 5.5555vw;
        margin-bottom: 3.3333vw;
    }

    .m-container .camera-xmage-detail-swiper-switch-line-bar {
        width: 30.56416vw;
    }

    .m-container .camera-xmage-detail-text {
        width: 77.7777vw;
    }

    .m-container .camera-xmage-detail-item-3 {
        display: block;
    }

    .m-container .camera-xmage-detail-item-4 {
        display: block;
    }

    .m-container .camera-xmage-detail-text-3 {
        display: block;
    }

    .m-container .camera-xmage-detail-text-4 {
        display: block;
    }

    .m-container .camera-xmage-detail-swiper-switch-btn[data-id="2"] {
        display: block;
    }

    .m-container .camera-xmage-detail-swiper-switch-btn[data-id="3"] {
        display: block;
    }

    .m-container .feature-control-row[data-index="0"] .feature-control-title-item[data-id="0"],
    .m-container .feature-control-row[data-index="1"] .feature-control-title-item[data-id="1"],
    .m-container .feature-control-row[data-index="2"] .feature-control-title-item[data-id="2"],
    .m-container .feature-control-row[data-index="3"] .feature-control-title-item[data-id="3"] {
        color: #000;
    }

    .m-container .system-xiaoyi-row {
        display: block;
    }

    .m-container .system-xiaoyi-content {
        margin: 0 auto;
        width: 91.11111vw;
        text-align: center;
    }

    .m-container .system-xiaoyi-image-container {
        margin: 8.88888vw auto 0;
        width: 46.944444vw;
    }

    .m-container .system-xiaoyi-image {
        width: 44.1vw;
        left: 1.4vw;
        border-radius: 5.857143vw;
        top: .75vw;
    }

    .m-container .system-xiaoyi-switch-container {
        display: none;
    }

    .m-container .system-xiaoyi-control-scroll-container {
        box-sizing: border-box;
        width: 100%;
        overflow: auto;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
        position: relative;
    }

    .m-container .system-xiaoyi-control-scroll-container::-webkit-scrollbar {
        display: none;
    }

    .m-container .system-xiaoyi-control-row {
        width: max-content;
        padding: 0 8.88888vw;
    }

    .m-container .system-xiaoyi-control-title-item {
        margin: 0 4.444444vw;
    }

    .m-container .system-xiaoyi-control-title-item:first-child {
        margin-left: 0;
    }

    .m-container .system-xiaoyi-control-title-item:last-child {
        margin-right: 0;
    }

    .m-container .system-xiaoyi-control-title-container {
        display: flex;
        justify-content: space-between;
        font-size: 5.5555vw;
        margin-bottom: 3.3333vw;
    }

    .m-container .system-xiaoyi-control-title-item {
        color: #666666;
        transition: opacity .4s ease, color .6s ease;
    }

    .m-container .system-xiaoyi-control-row[data-index="0"] .system-xiaoyi-control-title-item[data-id="0"] {
        color: #000;
        opacity: 1;
    }

    .m-container .system-xiaoyi-control-row[data-index="1"] .system-xiaoyi-control-title-item[data-id="1"] {
        color: #000;
        opacity: 1;
    }

    .m-container .system-xiaoyi-control-row[data-index="2"] .system-xiaoyi-control-title-item[data-id="2"] {
        color: #000;
        opacity: 1;
    }

    .m-container .system-xiaoyi-control-progress {
        background-color: #E8EAF1;
        height: 2px;
    }

    .m-container .system-xiaoyi-control-progress-bar {
        background: linear-gradient(to right, #434CBE, #A4AEF1);
        height: 100%;
        width: 26vw;
        transition: all .6s ease;
    }

    .m-container .system-xiaoyi-text-swiper {
        width: 100%;
    }

    .m-container .system-xiaoyi-text-item {
        margin: 0 auto;
        width: 77.7777vw;
        text-align: center;
    }

    .m-container .system-feature-swiper {
        width: 91.11111vw;
    }

    .m-container .system-feature-swiper .swiper-control-container {
        width: 95.122%;
        margin: 0;
    }

    .m-container .system-safety-swiper .swiper-control-container {
        width: 95.122%;
        margin: 0;
    }

    .m-container .system-feature-swiper .swiper-slide {
        width: 86.66667vw;
    }

    .m-container .system-feature-content {
        margin: 6.66667vw 0 0 2.22222vw;
        width: 79.44444vw;
    }

    .m-container .system-feature-image {
        border-radius: 4.44444vw;
    }

    .m-container .system-feature-image .product-disclaimer {
        left: 3.333333vw;
        bottom: 3.333333vw;
    }

    .m-container .common-popup-close-btn-icon {
        width: 11.111111vw;
        height: 11.111111vw;
    }

    .m-container .common-popup-close-btn-icon-shadow {
        box-shadow: inset -.277778vw 1.111111vw 1.388889vw #434CBE78;
    }

    .m-container .common-popup-close-btn-icon-bg::after {
        box-shadow: inset 0 -.277778vw 1.666667vw #A4AEF1;
    }

    .m-container .common-popup-container img.btn-highlight {
        width: 8.333333vw;
        height: 3.333333vw;
        top: .555556vw;
        right: .666667vw;
    }

    .m-container .common-popup-close-btn-icon-cross svg,
    .m-container .common-popup-close-btn-icon-hover svg {
        width: 4.166667vw;
        height: 4.166667vw;
    }

    .m-container .system-screen-lock-learn-more-popup .common-popup-content-wrapper {
        padding-top: 3.333333vw;
    }

    .m-container .system-screen-lock-learn-more-bg {
        border-radius: 2.222222vw;
    }

    .m-container .common-popup-close-btn {
        margin-right: 3.333333vw;
    }

    .m-container .system-screen-lock-image {
        border-radius: 4.44444vw;
        width: 91.11111vw;
    }

    .m-container .system-screen-lock-more-image {
        border-radius: 4.44444vw;
    }

    .m-container .system-screen-lock-text {
        width: 80.27777vw;
    }

    .m-container .system-screen-lock-image .product-disclaimer {
        left: 3.333333vw;
        bottom: 3.333333vw;
    }

    .m-container .system-screen-lock-more-image .product-disclaimer {
        left: 3.333333vw;
        bottom: 3.333333vw;
    }

    .m-container .system-assistant-image {
        border-radius: 4.44444vw;
        width: 91.11111vw;
    }

    .m-container .system-assistant-text {
        width: 77.77777vw;
    }

    .m-container .system-safety-subtitle {
        margin-bottom: 1vw;
    }

    .m-container .system-safety-subtitle-icon {
        margin-right: 2.7777vw;
        width: 8.61111vw;
    }

    .m-container .system-safety-subtitle-text {
        font-size: 6.944444vw;
    }

    .m-container .system-safety-swiper {
        width: 91.11111vw;
    }

    .m-container .system-safety-item {
        width: 86.66667vw;
    }

    .m-container .system-safety-item-image {
        border-radius: 4.44444vw;
    }

    .m-container .system-safety-item-text {
        margin: 6.66667vw 0 0 2.22222vw;
        width: 79.44444vw;
    }

    .m-container .system-safety-des {
        font-size: 2.222222vw;
        margin-top: 13.888889vw;
    }

    .m-container .product-popup-button-row {
        height: 13.333333vw;
        border-radius: 6.666667vw;
        box-shadow: inset -.555556vw 2.222222vw 1.666667vw #434CBE78;
    }

    .m-container .product-popup-button-text {
        font-size: 3.888889vw;
        margin-left: 6.666667vw;
    }

    .m-container .product-popup-button-icon,
    .m-container .product-popup-button-icon-bg {
        width: 6.666667vw;
        height: 6.666667vw;
    }

    .m-container .product-popup-button-row::after {
        box-shadow: inset 0 -.277778vw 1.666667vw #A4AEF1;
    }

    .m-container .product-popup-button-icon {
        margin: 0 3.333333vw;
    }

    .m-container .product-popup-button-icon svg {
        width: 3.333333vw;
        height: 3.333333vw;
    }

    .m-container .performance-scale .performance-scale-image {
        width: 100%;
        border-radius: 0;
        transform: none;
    }

    .m-container .performance-scale-content {
        width: 77.777778vw;
        transform: none;
        align-items: center;
        opacity: 1;
    }

    .m-container .performance-scale-right {
        top: 124vw;
        bottom: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
    }

    .m-container .performance-scale-right p,
    .m-container .performance-scale-text p {
        font-size: 4.444444vw;
    }

    .m-container .performance-scale-right-text p {
        color: #333333;
        font-size: 4.444444vw;
    }

    .m-container .performance-scale-right-large-text {
        font-size: 20.277778vw;
    }

    .m-container .performance-scale-text {
        width: 100%;
        text-align: center;
    }

    .m-container .performance-top-container {
        width: 100%;
    }

    .m-container .performance-top-container .product-subtitle-icon {
        width: 16.666667vw;
    }

    .m-container .performance-intro-container,
    .m-container .performance-detail-container {
        width: 91.111111vw;
    }

    .m-container .performance-intro-title-container {
        width: 100%;
    }

    .m-container .performance-intro-text,
    .m-container .performance-detail-text {
        width: 77.777778vw;
    }

    .m-container .performance-detail-large-text {
        display: none;
    }

    .m-container .performance-intro-image,
    .m-container .performance-detail-image,
    .m-container .performance-feature-image,
    .m-container .accessory-card-image {
        border-radius: 4.444444vw;
    }

    .m-container .performance-intro-content-container {
        top: auto;
        bottom: 13.611111vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .m-container .performance-intro-image .product-disclaimer {
        left: 3.333333vw;
        bottom: 3.333333vw;
    }

    .m-container .performance-intro-content-row {
        flex-direction: row;
    }

    .m-container .performance-intro-content-item {
        width: max-content;
    }

    .m-container .performance-intro-content-item:last-child {
        margin-left: 11.111111vw;
    }

    .m-container .performance-intro-content-item-title {
        font-size: 2.777778vw;
    }

    .m-container .performance-intro-content-item-text {
        font-size: 8.888889vw;
        font-weight: 600;
    }

    .m-container .performance-content-item-image {
        width: 41.65vw;
        top: 0.4vw;
        left: 49.9%;
        border-radius: 5vw;
    }

    .m-container .performance-feature-swiper,
    .m-container .accessory-card-image {
        width: 91.111111vw;
    }

    .m-container .performance-feature-swiper .swiper-slide {
        width: 86.66667vw;
    }

    .m-container .performance-feature-content {
        width: 79.305556vw;
        margin: 6.666667vw auto 0 2.222222vw;
    }

    .m-container .performance-feature-swiper-control-container {
        width: 95.122%;
        margin: 0;
    }

    .m-container .performance-feature-image .product-disclaimer {
        right: 3.333333vw;
        left: auto;
        bottom: 3.333333vw;
    }

    .m-container .accessory-cards-row,
    .m-container .accessory-cards-swiper .product-disclaimer {
        width: 100%;
    }

    .m-container .accessory-cards-container {
        overflow: hidden;
    }

    .m-container .accessory-cards-swiper {
        margin: 0 auto;
        width: 91.11111vw;
        overflow: initial;
    }

    .m-container .accessory-cards-swiper .swiper-slide {
        width: 86.66667vw;
    }

    .m-container .accessory-cards-swiper-control-container {
        width: 95.122%;
        margin: 0;
        margin-top: 5.138889vw;
    }

    .m-container .accessory-card-image-container {
        padding-top: 8.88888vw;
        width: 40.555556vw;
    }

    .m-container .accessory-card-bg-container {
        border-radius: 4.44444vw;
    }

    .m-container .accessory-card-image-swiper-1-switch-container {
        padding: 6.666667vw 0;
    }

    .m-container .accessory-card-image-swiper-2-switch-container {
        padding: 6.666667vw 0;
    }

    .m-container .accessory-card-image-swiper-1-switch-item {
        margin-right: 4.4444vw;
    }

    .m-container .accessory-card-image-swiper-2-switch-item {
        margin-right: 4.4444vw;
    }

    .m-container .accessory-card-image-swiper-1-switch-item,
    .m-container .accessory-card-image-swiper-2-switch-item {
        width: 7.222222vw;
    }

    .m-container .accessory-cards-swiper .product-disclaimer {
        width: 100%;
        text-align: center;
        font-size: 2.5vw;
    }

    .m-container .accessory-card-image-swiper-2-switch-item svg {
        width: 7.222222vw;
        height: 7.222222vw;
    }

    .m-container .accessory-card-link {
        margin-top: 6.666667vw;
    }

    .m-container .accessory-card-link a {
        font-size: 3.88888vw;
    }

    .m-container .accessory-card-link a svg {
        width: 4.166667vw;
        height: 4.166667vw;
    }
}

.m-container .shining-title-section {
    width: 100%;
    overflow: hidden;
}

.m-container .shining-title-section .shining-title-content {
    width: fit-content;
    position: relative;
    /* margin: 0 auto; */
    overflow: hidden;
    clip-path: inset(2% 2% 2% 2%);
    left: 50%;
    transform: translateX(-50%);
}

.m-container .shining-title-section .shining-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(60deg, #161F8F, #161F8F 10%, #3945AC 69%, #9AA5E8 90%, #9AA5E8);
    top: 0;
    left: 0;
    will-change: transform;
}

.m-container .shining-title-section .shining-text-content div {
    will-change: transform;
    transform-origin: 50% 50%;
}

.m-container .shining-title-section .shining-text-content .char1,
.m-container .shining-title-section .shining-text-content .char5 {
    transform: translateX(-1.041667vw);
}

.m-container .shining-title-section .shining-text-content .char2,
.m-container .shining-title-section .shining-text-content .char6 {
    transform: translateX(-.520833vw);
}

.m-container .shining-title-section .shining-text-content .char3,
.m-container .shining-title-section .shining-text-content .char7 {
    transform: translateX(.520833vw);

}

.m-container .shining-title-section .shining-text-content .char4,
.m-container .shining-title-section .shining-text-content .char8 {
    transform: translateX(1.041667vw);
}

.m-container .shining-title-section.shining-title-section-4 .shining-text-content .char3,
.m-container .shining-title-section.shining-title-section-4 .shining-text-content .char8 {
    transform: translateX(.520833vw);

}

.m-container .shining-title-section.shining-title-section-4 .shining-text-content .char4,
.m-container .shining-title-section.shining-title-section-4 .shining-text-content .char9 {
    transform: translateX(1.041667vw);
}

.m-container .shining-title-section .shining-shadow {
    width: 8.333333vw;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 50%;
    transform: translate(-10vw, -50%);
}

.m-container .shining-title-section .shining-shadow img {
    transform: rotate(-30deg);
}

.m-container .shining-title-section .shining-headline {
    font-size: 5.833333vw;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.m-container .shining-title-section .shining-text-content {
    padding: 1.041667vw 1.5625vw;
    position: relative;
    z-index: 3;
    background: white;
    color: #000;
    mix-blend-mode: lighten;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.m-container .shining-title-section .shining-subtitle-content {
    margin-bottom: 0;
}

.m-container .shining-title-section p {
    text-align: center;
}

.m-container .shining-title-section .shining-subtitle-content {
    position: relative;
    z-index: 6;
    transform: translateY(.78125vw);
    opacity: 0;
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content {
    padding: 1.041667vw 2.604167vw;
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char1,
.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char6 {
    transform: translateX(-.520833vw);
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char2,
.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char7 {
    transform: translateX(.520833vw);
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char5 {
    transform: translateX(-1.041667vw);
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char8 {
    transform: translateX(1.041667vw);
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char4 {
    transform: translateX(-1.5625vw);
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char9 {
    transform: translateX(1.5625vw);
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char3 {
    transform: translateX(-2.083333vw);
}

.m-container .shining-title-section.shining-title-section-3 .shining-text-content .char10 {
    transform: translateX(2.083333vw);
}

@media (max-aspect-ratio: 12 / 10) {

    .m-container .shining-title-section .shining-text-content .char1,
    .m-container .shining-title-section .shining-text-content .char5 {
        transform: translateX(-1.428571vw);
    }

    .m-container .shining-title-section .shining-text-content .char2,
    .m-container .shining-title-section .shining-text-content .char6 {
        transform: translateX(-.714286vw);
    }

    .m-container .shining-title-section .shining-text-content .char3,
    .m-container .shining-title-section .shining-text-content .char7 {
        transform: translateX(.714286vw);

    }

    .m-container .shining-title-section .shining-text-content .char4,
    .m-container .shining-title-section .shining-text-content .char8 {
        transform: translateX(1.428571vw);
    }

    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char3,
    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char8 {
        transform: translateX(.714286vw);

    }

    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char7 {
        transform: translateX(0);

    }

    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char4,
    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char9 {
        transform: translateX(1.428571vw);
    }

    .m-container .shining-title-section .shining-shadow {
        width: 11.428571vw;
        transform: translate(-13.714286vw, -50%);
    }

    .m-container .shining-title-section .shining-headline {
        font-size: 8vw;
    }

    .m-container .shining-title-section .shining-text-content {
        padding: 1.428571vw 2.142857vw;
    }

    .m-container .shining-title-section .shining-subtitle-content {
        transform: translateY(1.071429vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content {
        padding: 1.428571vw 3.571429vw;
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char1,
    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char6 {
        transform: translateX(-.714286vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char2,
    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char7 {
        transform: translateX(.714286vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char5 {
        transform: translateX(-1.428571vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char8 {
        transform: translateX(1.428571vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char4 {
        transform: translateX(-2.142857vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char9 {
        transform: translateX(2.142857vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char3 {
        transform: translateX(-2.857143vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char10 {
        transform: translateX(2.857143vw);
    }

}

@media (max-aspect-ratio: 7 / 10) {

    .m-container .shining-title-section .shining-text-content .char1,
    .m-container .shining-title-section .shining-text-content .char5 {
        transform: translateX(-2.777778vw);
    }

    .m-container .shining-title-section .shining-text-content .char2,
    .m-container .shining-title-section .shining-text-content .char6 {
        transform: translateX(-1.388889vw);
    }

    .m-container .shining-title-section .shining-text-content .char3,
    .m-container .shining-title-section .shining-text-content .char7 {
        transform: translateX(1.388889vw);

    }

    .m-container .shining-title-section .shining-text-content .char4,
    .m-container .shining-title-section .shining-text-content .char8 {
        transform: translateX(2.777778vw);
    }

    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char3,
    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char8 {
        transform: translateX(1.388889vw);

    }

    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char4,
    .m-container .shining-title-section.shining-title-section-4 .shining-text-content .char9 {
        transform: translateX(2.777778vw);
    }

    .m-container .shining-title-section .shining-shadow {
        width: 22.222222vw;
        transform: translate(-26.666667vw, -50%);
    }

    .m-container .shining-title-section .shining-headline {
        font-size: 13.888889vw;
    }

    .m-container .shining-title-section .shining-text-content {
        padding: 2.777778vw 4.166667vw;
    }

    .m-container .shining-title-section .shining-subtitle-content {
        transform: translateY(2.083333vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content {
        padding: 2.777778vw 6.944444vw;
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char1,
    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char6 {
        transform: translateX(-1.388889vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char2,
    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char7 {
        transform: translateX(1.388889vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char5 {
        transform: translateX(-2.777778vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char8 {
        transform: translateX(2.777778vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char4 {
        transform: translateX(-4.166667vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char9 {
        transform: translateX(4.166667vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char3 {
        transform: translateX(-5.555556vw);
    }

    .m-container .shining-title-section.shining-title-section-3 .shining-text-content .char10 {
        transform: translateX(5.555556vw);
    }
}

.product-media-video-container {
    position: relative;
    will-change: transform;
}

.product-media-video-container.video-canplay .product-media-video-poster-image {
    opacity: 0;
    pointer-events: none;
}

.product-media-video-poster-image {
    position: relative;
}

.product-media-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.product-media-video-fallback {
    display: none;
}

.product-media-video-control-container {
    cursor: pointer;
    position: absolute;
    right: 1.25vw;
    bottom: 1.25vw;
    width: 2.08333333vw;
    height: 2.08333333vw;
}

.product-media-video-control-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.product-media-video-control-bg-mask {
    background: linear-gradient(to bottom, #FFFFFFCC, #FFFFFF33);
    border-radius: 100%;
    backdrop-filter: blur(3px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .85;
}

.product-media-video-control-bg-color {
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: .2;
    transition: opacity .3s ease;
}

.product-media-video-control-bg-color-left {
    background: radial-gradient(#3DBFD4, #3DBFD4);
    filter: blur(.5vw);
    position: absolute;
    top: 50%;
    left: -120%;
    transform: translateY(-50%);
    width: 170%;
    height: 170%;
}

.product-media-video-control-bg-color-right {
    background: radial-gradient(#FB5705, #FB5705);
    filter: blur(.5vw);
    position: absolute;
    top: 50%;
    right: -120%;
    transform: translateY(-50%);
    width: 170%;
    height: 170%;
}

.product-media-video-control-bg-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.product-media-video-control-icon-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.product-media-video-control-icon-container>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .3s ease;
}

.product-media-video-control-icon-container[data-index="0"] .product-media-video-control-play-icon {
    opacity: 1;
}

.product-media-video-control-icon-container[data-index="1"] .product-media-video-control-pause-icon {
    opacity: 1;
}

.product-media-video-control-icon-container[data-index="2"] .product-media-video-control-replay-icon {
    opacity: 1;
}

@media (any-hover: hover) and (pointer: fine) {
    .product-media-video-control-container:hover .product-media-video-control-bg-color {
        opacity: .4;
    }
}


.no-inline-video .product-media-video-fallback {
    display: block;
}

.no-inline-video .product-media-video {
    display: none;
}

.no-inline-video .product-media-video-poster-image {
    display: none;
}

.no-inline-video .product-media-video-control-container {
    display: none;
}

@media (max-aspect-ratio: 6 / 5) {
    .product-media-video-control-container {
        right: 1.7142857vw;
        bottom: 1.7142857vw;
        width: 4.57142857vw;
        height: 4.57142857vw;
    }
}

@media (max-aspect-ratio: 7 / 10) {
    .product-media-video-control-container {
        right: 3.33333333vw;
        bottom: 3.33333333vw;
        width: 8.8888888vw;
        height: 8.88888888vw;
    }
}
.product-media-video-container.first-played.video-canplay .product-media-video-poster-image{
    opacity: 0;
    transition: opacity .2s ease .3s!important;
    z-index: 2;
    will-change: opacity;
}
.product-media-video-container.first-played.show-start-frame .product-media-video-poster-image {
    opacity: 1;
}
@media (max-aspect-ratio: 7 / 10) {
    .m-container .shining-title-section.shining-title-section-1 .shining-title-content {
        clip-path: inset(2% 2.3% 2% 2%);
    }

    .m-container .shining-title-section.shining-title-section-4 .shining-title-content {
        clip-path: inset(2% 2% 2% 2.3%);
    }
}