.main-container{
    font-weight: 500;
    line-height: 1.6;
}
.main-container img,.main-container video{
    width: 100%;
}
.main-container video{
    display: block;
}
.main-container .section{
    position: relative;
}
.blur-up {
    filter: blur(20px);
    transition: filter .2s;
    will-change: filter;
}
.blur-up.lazyloaded {
    filter: blur(0)
}

.header-top{
    top: 0;
}
.full-height{
    height: 100vh;
}
.hidden-web{
    display: none;
}
.hidden-inline-web{
    display: none;
}
.space-300{
    height: 15.625vw;
}
.space-200{
    height: 10.416vw;
}
.space-160{
    height: 8.33vw;
}
.space-120{
    height: 6.25vw;
}
.space-100{
    height: 5.2vw;
}
.space-96{
    height: 5vw;
}
.space-80{
    height: 4.16vw;
}
.space-64{
    height: 3.333vw;
}
.space-60{
    height: 3.125vw;
}
.space-40{
    height: 2.08vw;
}
.space-30{
    height: 1.5625vw;
}
.space-20{
    height: 1.04vw;
}
.main-container sup{
    font-size: .6em;
    cursor: pointer;
}
sup.half-sup{
    font-size: .4em;
}
.main-container sup a{
    color: inherit;
}
.main-container .big-title{
    font-size: 7vw;
    line-height: 1.25;
}
.main-container .h2{
    font-size: 6.25vw;
    font-weight: bold;
    line-height: 1.25;
}
.main-container .h2 div{
    line-height: inherit;
}
.linear-grey{
    display: flex;
    justify-content: center;
}
.linear-grey div{
    color: #F4F2ED;
}
.main-container .h3{
    color: #18191A;
    font-size: 4.167vw;
    font-weight: bold;
    line-height: 1.25;
}
.main-container .title-highlight{
    color: #0433FE;
    font-size: 1.2em;
}
.main-container .subtitle{
    font-size: 1.66vw;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: .25em;
}
.main-container .h4{
    color: #18191A;
    font-size: 2.5vw;
    line-height: 1.25;
}
.main-container p{
    color: #575A5C;
    font-size: 1.25vw;
    line-height: 1.6;
}
.main-container .black-text{
    color: #18191A;
    font-weight: bold;
}
.main-container .smaller-text{
    font-size: 1.04vw;
    line-height: 1.6;
}
.main-container .disclaimer{
    font-size: 12px;
}
@media (min-width:1920px){
    .main-container .disclaimer{
        font-size: .625vw;
    }
}
.canvas-fallback{
    display: none;
}
.inline-video-fallback{
    display: none;
}
.space-50vh{
    height: 50vh;
}
.space-80vh{
    height: 80vh;
}
.space-100vh{
    height: 100vh;
}
.sticky-viewport{
    position: sticky;
    height: 100vh;
    top: 0;
}
.sticky-container{
    position: sticky;
    top: 0;
}
.sequence-animation canvas{
    width: 100%;
    height: 100%;
}
.video-pop-play{
    cursor: pointer;
    color: #F5F6F7;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25vw;
    font-weight: bold;
    white-space: nowrap;
}

.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;
}
.auto-video-btn.show-btn{
    opacity: 1;
    visibility: visible;
}
.auto-video-btn svg{
    width: 1.5em;
    height: 1.5em;
    margin-right: .3em;
}
.video-fallback{
    display: none;
}
.ie-fallback{
    display: none;
}
.common-transform-show{
    opacity: 0;
    transform: translateY(2.08vw);
    transition: all .5s cubic-bezier(0,0,0.5,1);
    will-change: transform;
}
.common-transform-show.active{
    opacity: 1;
    transform: translateY(0);
}



.kv-image-container{
    position: relative; 
}
.kv-image{
    position: relative;
}
.kv-signature{
    display: flex;
    width: 4.89%;
    position: absolute;
    left: 2%;
    bottom: 4.25%;
}
.kv-signature svg{
    width: 100%;
    height: auto;
}
.kv-main-logo{
    position: absolute;
    top: 40%;
    left: 2%;
    width: 28.9%;
}
.kv-main-logo svg{
    width: 100%;
    height: auto;
}
.kv-disclaimer{
    display: flex;
    position: absolute;
    bottom: 4.25%;
    right: 2%;
}
.kv-disclaimer svg{
    width: 18.7166vw;
    height: .51718vw;
}
.kv-subtitle{
    position: absolute;
    top: 40%;
    right: 2%;
    width: 21.67%;
}
.kv-subtitle svg{
    width: 100%;
    height: auto;
}
.kv-harmonyos{
    position: absolute;
    bottom: 7%;
    right: 2%;
    width: 7.3%;
}
.kv-harmonyos svg{
    width: 100%;
    height: auto;
}
.kv-content-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.08%;
}
.kv-product-icon{
    margin-left: 4.16%;
    width: 24%;
}
.kv-shop-container{
    display: flex;
    align-items: center;
}

.kv-price{
    line-height: 1.25;
    margin-right: 1.5625vw;
    font-size: 1.46vw;
    font-weight: 400;
    color: #000;
}
.kv-price span {
    font-size: 0.677083vw;
    font-weight: 500;
}
.kv-buy-btn{
    background-color: #000;
    color: #fff;
    font-size: 13px;
    border: 2px solid #000;
    display: inline-block;
    line-height: 24px;
    font-weight: 800;
    padding: 10px 26px;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: .3s ease-out;
    will-change: transform;
}
.kv-buy-btn:hover{
    opacity: .8;
}
.kv-buy-btn a{
    color: #fff;
}
.kv-subtitle-container{
    margin-right: 4.16%;
}
.kv-subtitle{
    display: flex;
    font-size: 3.125vw;
    font-weight: bold;
}
.kv-content-feature{
    font-size: .833vw;
}
.kv-new-plan{
    position: relative;
}
.kv-new-plan-image-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.kv-new-plan-title{
    font-size: 4.16vw;
    font-weight: bold;
    line-height: 1.25;
}
.kv-new-plan-text{
    color: #7A7C80;
    font-size: .833vw;
    margin-right: 2.08vw;
    width: 26vw;
}
.sellpoint-container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 74.8%;
    margin: 0 auto;
}
.sellpoint-item{
    cursor: pointer;
    width: 31.48%;
    position: relative;
    z-index: 2;
}
.sellpoint-item-1{
    z-index: 3;
}
.sellpoint-item-4{
    margin-top: 2.08vw;
}
.sellpoint-item-4 .sellpoint-item-title{
    color: #18191A;
}
.sellpoint-item-5{
    margin-top: -2.45vw;
}
.sellpoint-item-6{
    margin-top: 2.08vw;
}
.sellpoint-item-container{
    position: relative;
    transform: translateY(5vw);
    opacity: 0;
    transition: all .4s ease;
}
.sellpoint-item.active .sellpoint-item-container{
    transform: translateY(0);
    opacity: 1;
}
.sellpoint-item-main{
    border-radius: 2.08vw;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.sellpoint-item-title{
    color: #FFFFFF;
    font-size: 1.875vw;
    font-weight: bold;
    line-height: 1.25;
    position: absolute;
    top: 1.8vw;
    left: 2.08vw;
}
.sellpoint-item-arrow-container{
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 23.45%;
}
.sellpoint-item-arrow-container img{
    border-right: 1px #FFFFFF solid;
    border-bottom: 1px #FFFFFF solid;
    display: flex;
    transform: scale(0);
    transform-origin: 100% 100%;
    transition: transform .4s ease;
    will-change: transform;
}
.sellpoint-item-bg{
    transform: scale(1);
    transition: transform .4s ease;
}
.sellpoint-item:hover .sellpoint-item-bg{
    transform: scale(1.1);
}
.sellpoint-item:hover .sellpoint-item-arrow-container img{
    transform: scale(1);
}
.sellpoint-item-1 .sellpoint-item-special-container{
    border-radius: 2.08vw;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 150%;
    overflow: hidden;
    z-index: 1;
    will-change: transform;
    pointer-events: none;
}
.sellpoint-item-1 .sellpoint-item-special-image{
    width: 42.325vw;
    transform: translate(-47%,25%) scale(.8);
    transition: transform .6s ease ;
}
.sellpoint-item-1.active .sellpoint-item-special-image{
    transform: translate(-31%,11%) scale(1);
}
.sellpoint-item-1 .sellpoint-item-special-image img{
    transition: transform .4s ease ;
}
.sellpoint-item-1.active:hover .sellpoint-item-special-image img{
    transform: scale(1.05);
}
.sellpoint-item-5 .sellpoint-item-special-container{
    position: absolute;
    left: 0;
    top: 67.5%;
    width: 22.65vw;
}
.sellpoint-item-5 .sellpoint-item-special-image{
    transform: translate(10%,-15%) scale(.6);
    transition: transform .4s ease .2s;
}
.sellpoint-item-5.active .sellpoint-item-special-image{
    transform: translate(0,0) scale(.9);
}
.sellpoint-item-5 .sellpoint-item-special-image img{
    transition: transform .4s ease;
}
.sellpoint-item-5.active:hover .sellpoint-item-special-image img{
    transform: translate(-7.5%,7.5%) scale(1.1);
}
.section-big-title-container{
    position: relative;
}
.section-big-title-text{
    font-weight: bold;
    position: absolute;
    top: 42%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}
.section-big-title-container.active .big-title-line{
    transform: scale(1);
}
.big-title-line-1{
    transform-origin: 100% 50%;
    transform: scale(0);
    transition: transform .6s ease;
}
.big-title-line svg{
    width: 100%;
    height: auto;
}
.big-title-line>div{
    display: flex;
}
.big-title-line-2{
    transform-origin: 0% 50%;
    transform: scale(0);
    transition: transform .6s ease;
}
.design-title-container{
    width: 100%;
}
.design-title-container .section-big-title-bg{
    margin-left: 21.67%;
    width: 64.5%;
}
.design-title-container .big-title-line-1{
    width: 31.8%;
    margin-left: 24.85%;
}
.design-title-container .big-title-line-2{
    width: 41.1%;
    position: absolute;
    margin-left: 36.55%;
}
.design-intro-media{
    border-radius: 4.16vw;
    margin: 0 auto;
    width: 85.4%;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.design-intro-play-btn{
    position: absolute;
    right: 2.5%;
    bottom: 4.5%;
}
.video-pop-text{
    margin-right: 1em;
}
.video-pop-text:hover{
    text-decoration: underline;
    text-underline-offset: 0.5em;
}
.video-pop-play-svg{
    display: flex;
    width: 3.33vw;
    height: 3.33vw;
}
.video-pop-play-svg svg{
    width: 100%;
    height: 100%;
}
.design-intro-disclaimer{
    color: #18191A;
    margin: 0 auto;
    width: 85.4%;
    text-align: center;
    opacity: .5;
}
.design-printed-pu-title{
    text-align: center;
}
.design-printed-pu-image-container{
    position: relative;
}
.design-printed-pu-image-bg{
    background: linear-gradient(to bottom,#EBEAEA,#FAF9FA);
    border-radius: 4.16vw;
    margin: 0 auto;
    width: 85.4%;
    height: 32.2vw;
    overflow: hidden;
    will-change: transform;
}
.design-printed-pu-phone-1{
    position: absolute;
    top: 0;
    left: 0;
    width: 64.479%;
    overflow: hidden;
}
.design-printed-pu-phone-1 img{
    transform: translateY(-5%) scale(.8);
    transform-origin: right top;
    will-change: transform;
}
.design-printed-pu-phone-2{
    position: absolute;
    right: 2.65625%;
    bottom: 0;
    width: 60.5729%;
    overflow: hidden;
}
.design-printed-pu-phone-2 img{
    transform: translateY(5%) scale(.8);
    transform-origin: left bottom;
    will-change: transform;
}
.design-printed-pu-text{
    margin: 0 auto;
    width: 33.3%;
    text-align: center;
    opacity: 1;
    transform: translateY(0);
}
.design-color-container{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
}
.design-color-left-container{
    position: absolute;
    width: 100%;
    height: 100%;
}
.design-color-right-container{
    margin-top: 0;
    width: 100%;
}
.design-color-full-phone-container{
    border-radius: 4.16vw;
    display: none;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.design-color-full-phone-item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity .1s ease .6s,transform .1s ease .6s;
    z-index: 1;
}
.design-color-full-phone-item:first-child{
    position: relative;
}
.design-color-full-phone-container[data-index="0"] .design-color-full-phone-item[data-id="0"]{
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.design-color-full-phone-container[data-index="1"] .design-color-full-phone-item[data-id="1"]{
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.design-color-full-phone-container[data-index="2"] .design-color-full-phone-item[data-id="2"]{
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.design-color-full-phone-container[data-index="3"] .design-color-full-phone-item[data-id="3"]{
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.design-color-select-container{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: absolute;
    right: 16.51%;
    bottom: 8.0625%;
    z-index: 1;
}
.design-color-select-btns{
    display: flex;
}
.design-color-select-title{
    margin-right: 1.7vw;
    position: relative;
}
.design-color-select-btn{
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.08vw;
    height: 2.08vw;
    transform: scale(1);
    transition: transform .6s ease;
    position: relative;
    overflow: hidden;
    margin-right: 1vw;
    will-change: transform;
}
.design-color-select-btn.active{
    transform: scale(1.3);
}
.design-color-select-btn > div{
    border-radius: 100%;
    width: 79.5%;
    height: 79.5%;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
@media (max-width:1366px) and (min-width:1300px){
    .design-color-select-btn > div{
        transform: translate(-.5px,-.5px);
    }
}
.design-color-select-btn[data-id="0"]:before{
    background-color: #0433FE;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .3;
}
.design-color-select-btn[data-id="0"] > div{
    background: linear-gradient(to bottom,#0433FE,#041F95);
}
.design-color-select-btn[data-id="1"]:before{
    background: linear-gradient(to bottom,#000000,#545454);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .3;
}
.design-color-select-btn[data-id="1"] > div{
    background: linear-gradient(to bottom,#000000,#545454);
}
.design-color-select-btn[data-id="2"]:before{
    background: linear-gradient(to bottom,#EDEFF2,#DCDFE0);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .3;
}
.design-color-select-btn[data-id="2"] > div{
    background: linear-gradient(to bottom,#EDEFF2,#DCDFE0);
}
.design-color-select-btn[data-id="3"]:before{
    background: linear-gradient(to bottom,#F2E5E7,#E5C8CE);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .3;
}
.design-color-select-btn[data-id="3"] > div{
    background: linear-gradient(to bottom,#F4DCE3,#E3C5CD);
}
.design-color-select-title-item{
    color: #18191A;
    font-size: 2.08vw;
    font-weight: bold;
    line-height: 1.25;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: translateX(-15%);
    pointer-events: none;
    transition: opacity .5s ease,transform .5s ease;
}
.design-color-select-title-item:first-child{
    position: relative;
}
.design-color-select-title[data-index="0"] .design-color-select-title-item[data-id="0"]{
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
    transition-delay: .3s;
}
.design-color-select-title[data-index="1"] .design-color-select-title-item[data-id="1"]{
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
    transition-delay: .3s;
}
.design-color-select-title[data-index="2"] .design-color-select-title-item[data-id="2"]{
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
    transition-delay: .3s;
}
.design-color-select-title[data-index="3"] .design-color-select-title-item[data-id="3"]{
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
    transition-delay: .3s;
}
.design-color-text-container{
    position: absolute;
    top: 13.4%;
    right: 11.8%;
    width: 26%;
    z-index: 1;
    text-align: center;
}
.design-color-text-item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.design-color-text-item:first-child{
    position: relative;
}
.design-color-text-container[data-index="0"] .design-color-text-item[data-id="0"]{
    opacity: 1;
    pointer-events: all;
}
.design-color-text-container[data-index="1"] .design-color-text-item[data-id="1"]{
    opacity: 1;
    pointer-events: all;
}
.design-color-text-container[data-index="2"] .design-color-text-item[data-id="2"]{
    opacity: 1;
    pointer-events: all;
}
.design-color-text-container[data-index="3"] .design-color-text-item[data-id="3"]{
    opacity: 1;
    pointer-events: all;
}
.design-color-detail-container{
    border-radius: 4.16vw;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.design-color-detail-item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: scale(1);
    pointer-events: none;
    transition: opacity .1s ease .6s,transform .1s ease .6s;
    z-index: 1;
}
.design-color-detail-item:first-child{
   position: relative;
}
.design-color-detail-container[data-index="0"] .design-color-detail-item[data-id="0"]{
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.design-color-detail-container[data-index="1"] .design-color-detail-item[data-id="1"]{
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.design-color-detail-container[data-index="2"] .design-color-detail-item[data-id="2"]{
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.design-color-detail-container[data-index="3"] .design-color-detail-item[data-id="3"]{
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.design-thin-container{
    position: relative;
}
.design-thin-image{
    margin-left: 92.6%;
    width: 3.229%;
    position: relative;
    transform: translateX(0);
    opacity: 0;
    transition: transform 1s ease,opacity .4s ease;
    will-change: transform;
    z-index: 5;
}
.design-thin-content{
    border-radius: 4.1677vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 13.589%;
    left: 3.8194%;
    width: 91.667%;
    height: 67.84%;
    overflow: hidden;
}
.design-thin-content .camera-intro-bg img{
    height: 100%;
    object-fit: cover;
}
.design-thin-left-content{
    margin-left: 11.38%;
    width: 35%;
    position: relative;
}
.design-thin-title-right{
    display: block;
    margin-left: 1em;
}
.design-thin-text{
    margin-top: 2.448vw;
}
.design-thin-right-content{
    border-radius: 2.08vw;
    display: flex;
    justify-content: center;
    width: 32.1875vw;
    clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
    transition: all 1s ease;
    will-change: clip-path;
}
.design-thin-feature{
    color: #0433FE;
    font-size: 1.25vw;
}
.design-thin-feature-text1{
    color: #575A5C;
}
.design-thin-feature-text2{
    font-size: 3.58333em;
}
.design-thin-container.active .design-thin-right-content{
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}
.design-thin-container.active .design-thin-image{
    transform: translateX(-31vw);
    opacity: 1;
}
.design-screen-container{
    position: relative;
}
.design-screen-content{
    position: absolute;
    top: 4.16vw;
    left: 7.3vw;
    width: 34%;
    z-index: 5;
}
.design-screen-title-right{
    display: block;
    margin-left: 1em;
}
.design-screen-text{
    width: 80.5%;
}
.design-screen-image{
    margin-left: 26.7%;
    width: 58.5%;
    position: relative;
}
.design-screen-image video{
    width: 100%;
}
.design-screen-feature-bg{
    background: radial-gradient(#DFEDFD,#FDFEFF);
    clip-path: polygon(19.5% 0,100% 0,100% 100%,0 100%,0 34%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.design-screen-feature-container{
    border-radius: 2.08vw;
    box-sizing: border-box;
    position: absolute;
    right: 7.8%;
    bottom: 6%;
    padding: 4.16% 3.3%;
    width: 29.27%;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    will-change: transform;
}
.design-screen-feature-row{
    display: flex;
    justify-content: space-between;
    margin-top: 3vw;
    position: relative;
}
.design-screen-feature-row::after{
    background-color: #000000;
    content: "";
    display: block;
    width: 1px;
    height: 80%;
    position: absolute;
    left: 34%;
    top: 10%;
    opacity: .1;
}
.design-screen-feature-row:nth-of-type(2){
    margin-top: 0;
}
.design-screen-feature-row .design-screen-feature-item:nth-of-type(2){
    width: 55%;
}
.design-screen-feature-title{
    color: #575A5C;
    font-size: .833vw;
}
.design-screen-feature-text{
    color: #0433FE;
    font-size: 1.66vw;
    font-weight: bold;
}
.design-screen-feature-text span{
    font-size: .75em;
}
.design-kunlun-main-container{
    background: radial-gradient(#D2E4F8,#FDFEFF);
    border-radius: 4.16vw;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 91.67%;
    overflow: hidden;
    will-change: transform;
}
.design-kunlun-content{
    margin-right: 6.8%;
    width: 38.5%;
}
.design-kunlun-icon{
    width: 4.3vw;
}
.design-kunlun-icon svg{
    width: 100%;
    height: auto;
}
.design-kunlun-title{
    margin-left: -0.05em;
}
.design-kunlun-title .title-highlight{
    margin-left: -0.04em;
}
.design-kunlun-text{
    width: 81.25%;
    opacity: 1;
    transform: translateY(0);
}
.design-kunlun-image{
    width: 54.6%;
}
.camera-title-container .section-big-title-bg{
    margin-left: 21.5%;
    width: 62.6%;
}
.camera-title-container .section-big-title-text{
    top: 58%;
}
.camera-title-container .big-title-line-1{
    margin-left: 24.7%;
    width: 41.58%;
}
.camera-title-container .big-title-line-2{
    margin-left: 37.1%;
    width: 40.5%;
}
.camera-intro-main{
    margin: 0 auto;
    width: 91.67%;
    position: relative;
}
.camera-intro-image{
    margin: 0 auto;
    width: 45.625%;
    position: relative;
    z-index: 1;
    transform: translateY(10%);
    transition: transform .4s cubic-bezier(0,0,0.5,1) .3s;
}
.camera-intro-main.active .camera-intro-image{
    transform: translateY(0);
}
.camera-intro-content{
    border-radius: 4.16vw;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    overflow: hidden;
    will-change: transform;
}
.camera-intro-bg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.camera-intro-content .animation-trigger{
    position: absolute;
    top: 15%;
}
.camera-intro-feature-row{
    position: absolute;
    right: 8.5%;
    top: 15%;
    z-index: 2;
}
.camera-intro-feature-mob-title{
    display: none;
}

.camera-intro-feature{
    margin-top: 3.125vw;
}
.camera-intro-feature:nth-of-type(2){
    margin-top: 0;
}
.camera-intro-feature-row:nth-of-type(2){
    position: absolute;
    left: 12%;
    right: auto;
    top: 15%;
}
.camera-intro-feature-row-2{
    top: 37.5%;
}
.camera-intro-title{
    color: #18191A;
    font-size: 1.25vw;
    font-weight: bold;
    line-height: 1.25;
}
.camera-intro-text{
    color: #575A5C;
    font-size: 1.14vw;
    margin-top: .75vw;
}
.camera-selfie-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 85.4%;
}
.camera-selfie-content{
    width: 34.5%;
}
.camera-selfie-subtitle{
    color: #575A5C;
    display: flex;
    align-items: center;
    font-size: 1.66vw;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 1em;
}
.camera-selfie-subtitle::before{
    background-color: #575A5C;
    content: "";
    display: block;
    margin-right: 0.8vw;
    width: 3.33vw;
    height: 2px;
}
.camera-selfie-right-title{
    display: block;
    margin-left: 1em;
}
.camera-selfie-image-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 57.5%;
}
.camera-selfie-left-container{
    border-radius: 2.08vw;
    width: 72.1%;
    position: relative;
    overflow: hidden;
    will-change: transform;
    z-index: 3;
    transform: translateZ(0.1px);
}
.camera-selfie-item{
    border-radius: 2.08vw;
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    left: 0px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: scale(1.1) translateZ(.1px);
    transition: opacity .1s ease .4s,transform .1s ease .4s;
    z-index: 1;
    will-change: transform;
}
.camera-selfie-item:first-child{
    position: relative;
}
.camera-selfie-left-container[data-index="0"] .camera-selfie-item[data-id="0"]{
    opacity: 1;
    transform: scale(1) translateZ(.1px);;
    pointer-events: all;
    transition: opacity .4s ease,transform .4s ease;
    z-index: 2;
}
.camera-selfie-left-container[data-index="1"] .camera-selfie-item[data-id="1"]{
    opacity: 1;
    transform: scale(1) translateZ(.1px);;
    pointer-events: all;
    transition: opacity .4s ease,transform .4s ease;
    z-index: 2;
}
.camera-selfie-left-container[data-index="2"] .camera-selfie-item[data-id="2"]{
    opacity: 1;
    transform: scale(1) translateZ(.1px);;
    pointer-events: all;
    transition: opacity .4s ease,transform .4s ease;
    z-index: 2;
}
.camera-selfie-content-container{
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8.9vw;
    padding: 1.5vw 2.5vw 0;
    z-index: 2;
}
.camera-selfie-content-container::before{
    background-color: #F1F3F5CC;
    backdrop-filter: blur(50px) brightness(2);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.camera-selfie-item-content{
    position: absolute;
    top: 1.5vw;
    left: 2.5vw;
    right: 2.5vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.camera-selfie-item-content:first-child{
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}
.camera-selfie-content-container[data-index="0"] .camera-selfie-item-content[data-id="0"]{
    opacity: 1;
    pointer-events: all;
}
.camera-selfie-content-container[data-index="1"] .camera-selfie-item-content[data-id="1"]{
    opacity: 1;
    pointer-events: all;
}
.camera-selfie-content-container[data-index="2"] .camera-selfie-item-content[data-id="2"]{
    opacity: 1;
    pointer-events: all;
}
.camera-selfie-item-title{
    color: #18191A;
    font-size: 2.08vw;
    font-weight: bold;
    position: relative;
}
.camera-selfie-item-text{
    position: relative;
}
.camera-selfie-right-container{
    width: 17.4%;
    position: relative;
}
.camera-selfie-mode-item{
    border: .208vw #C9C3C300 solid;
    border-radius: 1.5625vw;
    cursor: pointer;
    position: relative;
    padding: .208vw;
    overflow: hidden;
    margin: 0 auto 3.25vw;
    width: 83%;
    opacity: .5;
    transition: opacity .4s ease,transform .4s ease;
    will-change: opacity,transform;
}
.camera-selfie-mode-item:last-child{
    margin-bottom: 0;
}
.camera-selfie-mode-item.active{
    border: .208vw #C9C3C3 solid;
    transform: scale(1.2);
    opacity: 1;
}
.camera-selfie-mode-item-image{
    border-radius: 1.25vw;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.camera-selfie-mode-item-content{
    background-color: rgba(201,195,195);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: .6vw 0;
    text-align: center;
}
.camera-selfie-mode-item.active .camera-selfie-mode-item-content{
    background-color: #C9C3C3;
}
.camera-selfie-mode-item-title{
    color: #FFFFFF;
    font-size: 1.5vw;
    font-weight: bold;
}
.camera-zoom-main{
    display: flex;
    align-items: center;
    margin-left: 7.15%;
}
.camera-zoom-content{
    width: 30%;
}
.camera-zoom-right-title{
    display: block;
    margin-left: 1em;
}
.camera-zoom-subtitle{
    color: #575A5C;
    display: flex;
    align-items: center;
    font-size: 1.66vw;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 1em;
}
.camera-zoom-subtitle::before{
    background-color: #575A5C;
    content: "";
    display: block;
    margin-right: 0.8vw;
    width: 3.33vw;
    height: 2px;
}
.camera-zoom-image-container{
    margin-right: 6.25%;
    width: 55.463%;
    position: relative;
}
.camera-zoom-text{
    width: 90%;
}
.camera-zoom-image-row{
    border-radius: 2.08vw;
    position: relative;
    overflow: hidden;
    will-change: transform;
}
.camera-zoom-image-item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(1.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease .6s ,transform .1s ease .6s;
    z-index: 1;
}
.camera-zoom-image-item:first-child{
    position: relative;
}
.camera-zoom-image-row[data-index="0"] .camera-zoom-image-item[data-id="0"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-zoom-image-row[data-index="1"] .camera-zoom-image-item[data-id="1"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-zoom-image-row[data-index="2"] .camera-zoom-image-item[data-id="2"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-zoom-image-btns{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 7.15%;
    left: 0;
    width: 100%;
    z-index: 5;
}
.camera-zoom-image-btn{
    background-color: RGBA(0,0,0,.3);
    border-radius: 100%;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .833vw;
    font-weight: bold;
    width: 2.917vw;
    height: 2.917vw;
    transition: all .6s ease;
    will-change: transform;
}
.camera-zoom-image-poing{
    border-radius: 100%;
    background-color: #FFFFFF;
    margin: 0 1.5625vw;
    width: .208vw;
    height: .208vw;
    opacity: .5;
    overflow: hidden;
    will-change: transform;
}
.camera-zoom-image-btn.active{
    background-color: RGBA(255,255,255,1);
    color: #000000;
    transform: scale(1.42857);
}

.camera-aperture-container{
    margin: 0 auto;
    width: 85.4%;
}
.camera-aperture-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 80%;
}
.camera-aperture-title-container{
    width: 50.6%;
}
.camera-aperture-title-container .title-highlight{
    white-space: nowrap;
}
.camera-aperture-text-container{
    width: 40.1%;
}
.camera-aperture-right-title{
    display: block;
    margin-left: 1em;
}
.camera-aperture-subtitle{
    color: #575A5C;
    display: flex;
    align-items: center;
    font-size: 1.66vw;
    font-weight: bold;
    margin: 0 auto;
    width: 80%;
    line-height: 1.25;
    margin-bottom: 1em;
}
.camera-aperture-subtitle::before{
    background-color: #575A5C;
    content: "";
    display: block;
    margin-right: 0.8vw;
    width: 3.33vw;
    height: 2px;
}
.camera-aperture-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.camera-aperture-left-image-container{
    border-radius: 2.08vw;
    position: relative;
    width: 31.7%;
    overflow: hidden;
    will-change: transform;
}
.camera-aperture-left-image-item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(1.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease .6s,transform .1s ease .6s;
    z-index: 1;
}
.camera-aperture-left-image-item:first-child{
    position: relative;
}
.camera-aperture-left-image-container[data-index="0"] .camera-aperture-left-image-item[data-id="0"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-aperture-left-image-container[data-index="1"] .camera-aperture-left-image-item[data-id="1"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-aperture-left-image-container[data-index="2"] .camera-aperture-left-image-item[data-id="2"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-aperture-right-image-container{
    border-radius: 2.08vw;
    position: relative;
    width: 65.8%;
    overflow: hidden;
    will-change: transform;
}
.camera-aperture-right-image-item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(1.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease .6s,transform .1s ease .6s;
    z-index: 1;
}
.camera-aperture-right-image-item:first-child{
    position: relative;
}
.camera-aperture-right-image-container[data-index="0"] .camera-aperture-right-image-item[data-id="0"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-aperture-right-image-container[data-index="1"] .camera-aperture-right-image-item[data-id="1"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-aperture-right-image-container[data-index="2"] .camera-aperture-right-image-item[data-id="2"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .6s ease,transform .6s ease;
    z-index: 2;
}
.camera-aperture-control-container{
    background: radial-gradient(#DFEDFD,#F3F9FE);
    border-radius: 2.08vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3.3% 6.22% 3.3% 6.22%;
    overflow: hidden;
    will-change: transform;
}
.camera-aperture-control-btns{
    width: 37.333%;
}
.camera-aperture-control-text-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 57.4%;
}
.camera-aperture-control-btns-row-container{
    background-color: #FFFFFF;
    border-radius: 1.7vw;
    padding: 4px 4px;
    overflow: hidden;
    position: relative;
    will-change: transform;
}
.camera-aperture-control-btns-row{
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: .292vw 0;
}
.camera-aperture-control-btns-row::before{
    background-color: #0433FE;
    border-radius: 1.7vw;
    content: "";
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 24%;
    height: 100%;
    transition: transform .4s ease;
    will-change: transform;
}
.camera-aperture-control-btns-row[data-index="0"]::before{
    transform: translateX(0);
}
.camera-aperture-control-btns-row[data-index="1"]::before{
    transform: translateX(158.3%);
}
.camera-aperture-control-btns-row[data-index="2"]::before{
    transform: translateX(316%);
}
.camera-aperture-control-btn{
    border-radius: 1.7vw;
    color: #000000;
    cursor: pointer;
    font-size: 1.458vw;
    font-weight: bold;
    width: 24%;
    overflow: hidden;
    position: relative;
    transition: all .4s ease;
    text-align: center;
    will-change: transform;
}
.camera-aperture-control-btn.active{
    color: #FFFFFF;
}
.camera-aperture-control-btns-image{
    margin: 1.25vw auto 0;
    width: 92%;
}
.camera-aperture-control-btns-image svg{
    width: 100%;
    height: auto;
}
.camera-aperture-control-mode-icon{
    border: 2px #CCCED2 solid;
    border-radius: 100%;
    width: 6.7vw;
    height: 6.7vw;
    will-change: transform;
}
.camera-aperture-icon-container{
    padding: 5%;
}
.camera-aperture-icon-row{
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    will-change: transform;
    transform: translateY(-0.5px);
}
.camera-aperture-icon-background{
    background: linear-gradient(to bottom,#E7EBEF,#97999F);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    will-change: transform;
}
.camera-aperture-icon-items-container{
    position: relative;
    z-index: 5;
    transition: transform .6s ease;
}
.camera-aperture-control-mode-icon[data-index="2"] .camera-aperture-icon-items-container{
    transform: scale(1) rotate(0deg);
}
.camera-aperture-control-mode-icon[data-index="1"] .camera-aperture-icon-items-container{
    transform: scale(1.5) rotate(30deg);
}
.camera-aperture-control-mode-icon[data-index="0"] .camera-aperture-icon-items-container{
    transform: scale(2.5) rotate(60deg);
}
.camera-aperture-icon-item{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.camera-aperture-icon-item:nth-of-type(1){
    position: relative;
    z-index: 2;
}
.camera-aperture-icon-item:nth-of-type(2){
    transform: rotate(60deg);
}
.camera-aperture-icon-item:nth-of-type(3){
    transform: rotate(120deg);
    z-index: 2;
}
.camera-aperture-icon-item:nth-of-type(4){
    transform: rotate(180deg);
}
.camera-aperture-icon-item:nth-of-type(5){
    transform: rotate(240deg);
    z-index: 2;
}
.camera-aperture-icon-item:nth-of-type(6){
    transform: rotate(300deg);
}
.camera-aperture-icon-mask{
    background: radial-gradient(rgba(24,25,26,0) 0,rgba(186,191,196,0) 50%,rgba(144,149,154,1) 100%);
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 6;
    will-change: transform;
}
.camera-aperture-control-mode-icon svg{
    filter: drop-shadow(0px .208vw .4167vw rgba(87,90,92,40%));
    width: 6.16vw;
    height: 6.16vw;
    will-change: transform;
}
.camera-aperture-control-text-title{
    font-size: 2.08vw;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: .6em;
}
.camera-aperture-control-text-row{
    width: 78.8%;
    position: relative;
}
.camera-aperture-control-text-item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: all .6s ease;
}
.camera-aperture-control-text-item:first-child{
    position: relative;
}
.camera-aperture-control-text-row[data-index="0"] .camera-aperture-control-text-item[data-id="0"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}
.camera-aperture-control-text-row[data-index="1"] .camera-aperture-control-text-item[data-id="1"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}
.camera-aperture-control-text-row[data-index="2"] .camera-aperture-control-text-item[data-id="2"]{
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}
.camera-sample-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 60.88%;
}
.camera-sample-title{
    width: 46%;
}
.camera-sample-right-title{
    display: block;
    margin-left: .8em;
}
.camera-sample-text-container{
    width: 45.4%;
}
.camera-sample-text{
    will-change: transform;
}
.camera-sample-container{
    overflow: hidden;
}
.camera-sample-swiper-container .swiper{
    overflow: initial;
}
.camera-sample-swiper-container .swiper-slide{
    display: flex;
    position: relative;
}
.camera-sample-tips{
    position: absolute;
    left: 7%;
    bottom: 6%;
}
.camera-sample-tips p{
    color: #FFFFFF;
}
.camera-sample-swiper-container .swiper-slide{
    perspective: 60vw;
}
.camera-sample-item{

}
.camera-sample-swiper-container .swiper-slide img{
    border-radius: 2.08vw;
    overflow: hidden;
    will-change: transform;
}
.camera-sample-swiper-navigation-container{
    display: flex;
    margin: 0 auto;
    width: 8%;
    padding-left: .25vw;
}
.camera-sample-swiper-prev,.camera-sample-swiper-next{
    cursor: pointer;
    width: 50%;
}
.camera-sample-swiper-prev svg,.camera-sample-swiper-next svg{
    width: 100%;
    height: auto;
}
.camera-sample-swiper-next svg{
    transform: translate(-1%,0.5%) rotate(180deg);
}
.camera-sample-swiper-prev path,
.camera-sample-swiper-next path{
    transition: all .3s ease;
}
.camera-sample-swiper-prev:hover path,
.camera-sample-swiper-next:hover path{
    fill: #0433FE;
    opacity: 1;
}
.performance-title-container .section-big-title-bg{
    margin-left: 22.9%;
    width: 62.16%;
    -webkit-user-select: none;
}
.performance-title-container .section-big-title-text{
    top: 55%;
}
.performance-title-container .big-title-line-1{
    margin-left: 25.18%;
    width: 32.85%;
}
.performance-title-container .big-title-line-2{
    margin-left: 36.85%;
    width: 40.825%;
}
.performance-title-container img{
    user-select: none;
}
.performance-connect-title-container{
    margin-left: 7.5%;
}
.performance-connect-text-container{
    margin-left: 7.5%;
    width: 75%;
}
.performance-connect-container{
    overflow: hidden;
}
.performance-connect-image-container{
    margin: 0 auto;
    width: 85.4%;
}
.performance-connect-image-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.performance-connect-image-item-1{
    grid-row: 1/3;
    grid-column: 1/2;
}
.performance-connect-image-item-2{
    grid-row: 2/3;
    grid-column: 2/3;
}
.performance-connect-image-item-3{
    grid-row: 2/4;
    grid-column: 3/4;
}
.performance-connect-image-item-4{
    grid-row: 3/4;
    grid-column: 1/3;
}
.performance-connect-image-item-container{
    position: relative;
}
.performance-connect-image-item-content{
    position: absolute;
    top: 3.125vw;
    left: 3.125vw;
    right: 3.125vw;;
    z-index: 1;
}
.performance-connect-image-item-title{
    color: #FFFFFF;
    font-size: 1.67vw;
    font-weight: bold;
    line-height: 1.25;
}
.performance-connect-image-item-content .performance-connect-image-item-text{
    color: #FFFFFF;
    font-weight: bold;
}
.performance-connect-image-item-text .grey-text{
    opacity: .7;
    font-weight: 400;
}
.performance-connect-image-container{
    position: relative;
}
.performance-connect-content-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 44.2%;
}
.performance-connect-image-item-1{
    width: 54.878%;
}
.performance-connect-image-item-2{
    margin-top: 2.4756%;
    width: 42.68%;
}
.performance-connect-image-item-3{
    margin-top: 2.4756%;
    width: 54.878%;
}
.performance-connect-image-item-4 .swiper-pagination{
    width: 2.667vw;
    left: 3.125vw;
    bottom: 2.08vw;
}
.performance-connect-image-item-4 .swiper-pagination-bullet{
    background-color: #FFFFFF;
    width: .625vw;
    height: .625vw;
    opacity: .3;
}
.performance-connect-image-item-4 .swiper-pagination-bullet-active{
    background-color: #FFFFFF;
    opacity: 1;
}
.performance-connect-image-item-4 .performance-connect-image-item-text{
    width: 60%;
}
.performance-connect-icon{
    color: #575A5C;
    display: flex;
    align-items: center;
    font-size: 1.25vw;
    font-weight: bold;
    margin-top: 1vw;
}
.performance-connect-icon svg{
    margin-right: .5vw;
    width: 1.53vw;
    height: auto;
}
.performance-connect-image-item-container{
    opacity: 0;
    transform: translateY(2.08vw);
    transition: all .6s ease;
}
.performance-connect-image-item.active .performance-connect-image-item-container{
    opacity: 1;
    transform: translateY(0);
}
.performance-connect-image-item-3 .performance-connect-image-item-container{
    transition-delay: .15s;
}
.performance-connect-image-item-bg{
    border-radius: 2.08vw;
    overflow: hidden;
    will-change: transform;
}
.performance-connect-image-item-bg .swiper-slide img{
    transform: scale(1.2);
    transition: transform .6s ease;
}
.performance-connect-image-item-bg .swiper-slide-active img{
    transform: scale(1);
}
.performance-connect-image-satellite-1{
    position: absolute;
    top: 14.5vw;
    right: 1.9vw;
    width: 10.36vw;
    opacity: 0;
    transform: translate(-50%,-50%) scale(.5);
    transition: all .6s ease;
}
.performance-connect-image-satellite-2{
    position: absolute;
    top: 34.9vw;
    left: 1.26vw;
    width: 23vw;
    /* opacity: 0;
    transform: translate(25%,-50%) scale(.5); */
    transition: all .6s ease;
}
.performance-connect-image-satellite.active{
    opacity: 1;
    transform: translate(0,0) scale(1);
}
.performance-cooldown-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 22.8645%;
    width: 58.33333%;
}
.performance-cooldown-title{
    width: 44%;
}
.performance-cooldown-text-container{
    width: 46.43%;
}
.performance-cooldown-right-title{
    display: block;
    margin-left: 1em;
}
.performance-cooldown-main{
    background-color: #F5F6F7;
    border-radius: 2.0833vw;
    display: flex;
    align-items: center;
    margin: 3.3854% auto 0;
    width: 85.416%;
    overflow: hidden;
    padding: 6.057vw 0;
    will-change: transform;
    position: relative;
}
.performance-cooldown-disclaimer{
    color: #18191A;
    font-size: 1.04vw;
    position: absolute;
    bottom: 10.68%;
    left: 3.96%;
    opacity: .5;
}
.performance-cooldown-image{
    margin: 0 3.963%;
    width: 47.317%;
}
.performance-cooldown-feature-container{
    width: 31.7%;
}
.performance-cooldown-feature-item{
    border-bottom: #BBBEC3 1px solid;
    margin-top: 2.333vw;
    padding-bottom: 2.333vw;
}
.performance-cooldown-feature-item:first-child{
    margin-top: 0;
}
.performance-cooldown-feature-item:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.performance-cooldown-feature-title{
    color: #0433FE;
    font-size: 1.667vw;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 1.19vw;
}
.performance-cooldown-feature-text{
    color: #575A5C;
    font-size: 1.25vw;
}
.performance-supercharge-container{
    position: relative;
    overflow: hidden;
}
.performance-supercharge-title{
    position: absolute;
    top: 1%;
    left: 7.3%;
    width: 28.5%;
    z-index: 1;
}
.performance-supercharge-right-title{
    display: block;
    margin-left: 1em;
}
.performance-supercharge-image{
    margin-left: 1.25%;
    width: 73.8%;
    position: relative;
}
.performance-supercharge-image::before{
    background-color: #FFFFFF;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
}
.performance-supercharge-image::after{
    background-color: #FFFFFF;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
}
.performance-supercharge-image video{
    width: 100%;
}
.performance-supercharge-feature-container{
    position: absolute;
    top: 24.5vw;
    right: 7.3%;
    width: 27.08%;
    z-index: 2;
}
.performance-supercharge-feature-row{
    background: #F5F6F7;
    border-radius: 2.08vw;
    box-sizing: border-box;
    padding: 2.4vw 2.08vw;
    overflow: hidden;
    will-change: transform;
}
.performance-supercharge-feature-item-title{
    color: #0433FE;
    font-size: 2.9vw;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: .25em;
}
.performance-supercharge-feature-item-title >span{
    font-size: .57em;
}
.performance-supercharge-feature-item-title .smaller-text{
    font-size: .875em;
    line-height: 1.25;
    margin-top: -.25em;
}
.performance-supercharge-feature-item-title .small-sup{
    font-size: .3214em;
}
.performance-supercharge-feature-item-subtitle{
    color: #0433FE;
    font-size: 1.25vw;
    font-weight: bold;
    margin-bottom: .5vw;
}
.performance-supercharge-feature-item:first-child{
    margin-bottom: 2.3vw;
}
.performance-supercharge-feature-item:last-child{
    margin-top: 2.3vw;
}
.performance-supercharge-feature-line{
    background-color: #000000;
    width: 100%;
    height: 1px;
    opacity: .1;
}
.performance-turbo-container{
    margin-top: -5.2%;
    position: relative;
}
.performance-turbo-content{
    text-align: center;
}
.performance-turbo-text-container{
    margin: 1.5625vw auto 0;
    width: 33.4%;
}
.performance-turbo-image{
    margin: 0 auto;
    width: 70.73%;
}
.performance-turbo-image video{
    width: 100%;
}
.performance-turbo-feature-row{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 43.3%;
}
.performance-turbo-feature-item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}
.performance-turbo-feature-text{
    color: #000000;
    font-size: 1.25vw;
    font-weight: bold;
    margin-top: .5em;
}
.performance-turbo-feature-icon{
    display: flex;
    justify-content: center;
}
.performance-turbo-feature-item-1 svg{
    width: 5vw;
    height: auto;
}
.performance-turbo-feature-item-2 svg{
    width: 5vw;
    height: auto;
}
.performance-turbo-feature-item-3 svg{
    width: 5vw;
    height: auto;
}
.performance-turbo-feature-item-4 svg{
    width: 5vw;
    height: auto;
}
.harmonyos-title-container{
    margin-left: 21.5%;
    width: 62.6%;
}
.harmonyos-intro-container{
    display: flex;
    position: relative;
    margin: 0 auto;
    width: 91.67%;
}
.harmonyos-intro-left-part{
    display: flex;
    flex-direction: column;
    width: 48%;
    position: relative;
}
.harmonyos-intro-content{
    margin-left: 5.833vw;
    position: relative;
}
.harmonyos-intro-title{
    background-color: #FFFFFF;
    border-radius: 0 0 4.167vw 0;
    padding-bottom: 3.125vw;
    overflow: hidden;
    position: relative;
    z-index: 2;
    will-change: transform;
}
.harmonyos-intro-bg-box{
    background-color: #F5F6F7;
    width: 5vw;
    height: 5vw;
    position: absolute;
    bottom: -1px;
    right: 0;
}
.harmonyos-intro-nav-container{
    background-color: #F5F6F7;
    border-radius: 4.167vw 0 0 4.167vw;
    height: 100%;
    will-change: transform;
}
.harmonyos-intro-right-part{
    background-color: #F5F6F7;
    border-radius: 4.167vw 4.167vw 4.167vw 0;
    width: 52.1%;
    padding: 4.167vw 0;
    will-change: transform;
}
.harmonyos-intro-image-swiper .swiper-wrapper{
    margin: 0 auto;
    width: 40.5%;
    position: relative;
}
.harmonyos-intro-image-swiper .swiper-slide{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
}
.harmonyos-intro-image-swiper .swiper-slide:first-child{
    position: relative;
}
.harmonyos-intro-image-swiper .swiper-wrapper[data-index="0"] .swiper-slide[data-id="0"]{
    opacity: 1;
    pointer-events: all;
}
.harmonyos-intro-image-swiper .swiper-wrapper[data-index="1"] .swiper-slide[data-id="1"]{
    opacity: 1;
    pointer-events: all;
}
.harmonyos-intro-image-swiper .swiper-wrapper[data-index="2"] .swiper-slide[data-id="2"]{
    opacity: 1;
    pointer-events: all;
}
.harmonyos-intro-nav-container{
    display: flex;
    align-items: center;
}
.harmonyos-intro-nav-row{
    display: flex;
    margin-left: 5.833vw;
}
.harmonyos-intro-nav-progress-container{
    border-radius: 4.16vw;
    width: .5vw;
    margin-right: 4.16vw;
    overflow: hidden;
    will-change: transform;
}
.harmonyos-intro-nav-progress-line{
    background-color: #FFFFFF;
    border-radius: 4.16vw;
    height: 13vw;
    overflow: hidden;
    will-change: transform;
}
.harmonyos-intro-nav-progress-slide{
    border-radius: 4.16vw;
    background-color: #0433FE;
    height: 44.5%;
    overflow: hidden;
    transition: transform .6s ease;
    will-change: transform;
}
.harmonyos-intro-nav-progress-line[data-index="0"] .harmonyos-intro-nav-progress-slide{
    transform: translateY(0);
}
.harmonyos-intro-nav-progress-line[data-index="1"] .harmonyos-intro-nav-progress-slide{
    transform: translateY(124%);
}
.harmonyos-intro-nav-progress-line[data-index="2"] .harmonyos-intro-nav-progress-slide{
    transform: translateY(124%);
}
.harmonyos-intro-nav-content{
    width: 88%;
    opacity: 1;
    transform: translateY(0);
}
.harmonyos-intro-nav-content-item{
    margin-bottom: 2.86vw;
}
.harmonyos-intro-nav-content-item:last-child{
    margin-bottom: 0;
}
.harmonyos-intro-nav-content-item .harmonyos-intro-nav-content-text{
    color: #575A5C;
    line-height: 1.5;
}
.harmonyos-intro-nav-content-title{
    color: #18191A;
    font-size: 1.66vw;
    font-weight: bold;
    line-height: 1.25;
    transition: all .6s ease;
}
.harmonyos-intro-nav-content-text{
    transition: height .6s ease;
    overflow: hidden;
}
.harmonyos-intro-nav-content-item.active .harmonyos-intro-nav-content-title{
    font-size: 2.08vw;
}
.harmonyos-intro-nav-content-item.active .harmonyos-intro-nav-content-text{
    margin-top: 2.03125vw;
}
.harmonyos-more-btn{
    border: 2px rgba(24,25,26,.3) solid;
    border-radius: .416vw;
    margin: 0 auto;
    width: 23.5%;
    text-align: center;
    overflow: hidden;
    transition: border-color .6s ease;
}
.harmonyos-more-btn:hover{
    border-color: rgba(24,25,26);
}
.harmonyos-more-btn a{
    display: block;
    font-size: 1.25vw;
    font-weight: bold;
    line-height: 1.25;
    padding: .8em 0;
}

.disclaimer-container {
    border-top: 1px #D1D1D1 solid;
    color: #797979;
    font-size: 12px;
    margin: 0 auto;
    width: 91.67%;
    padding-top: 1.5vw;
    overflow: hidden;
}
.disclaimer-container ol {
    list-style-type: decimal;
    padding-left: 2em;
}
.disclaimer-container li {
    line-height: 1.6em;
    padding-left: 0.5em;
}
.disclaimer-container .price{
    list-style: none;
    position: relative;
}
.disclaimer-container .price::before {
    content: "*";
    position: absolute;
    top: 0;
    left: -9px;
}
.disclaimer-container .more-discalimer{
    list-style: none;
    margin-top: 2vw;
}
.disclaimer-container .active{
    color: #000000;
    opacity: 1;
}
@media (min-width: 1920px){
    .disclaimer-container {
        font-size: .625vw;
    }
}

@media (max-aspect-ratio: 11 / 10){
    .header-top{
        top: 0;
    }
    .hidden-web{
        display: block;
    }
    .hidden-mob{
        display: none;
    }
    .hidden-inline-web{
        display: inline-block;
    }
    .space-300{
        height: 55.5vw;
    }
    .space-200{
        height: 27.7vw;
    }
    .space-160{
        height: 22.22vw;
    }
    .space-120{
        height: 16.6vw;
    }
    .space-100{
        height: 13.88vw;
    }
    .space-96{
        height: 13.33vw;
    }
    .space-80{
        height: 11.11vw;
    }
    .space-64{
        height: 8.88vw;
    }
    .space-60{
        height: 8.33vw;
    }
    .space-40{
        height: 5.55vw;
    }
    .space-30{
        height: 4.16vw;
    }
    .space-20{
        height: 2.77vw;
    }
    .sticky-viewport{
        height: 100vh;
        top: 0;
    }
    .main-container{
        font-size: 3.6vw;
    }
    .main-container .big-title{
        font-size: 13.89vw;
        line-height: normal;
    }
    .main-container .small-title{
        font-size: 6.66vw;
        font-weight: bold;
        line-height: 1.25;
    }
    .main-container .h2{
        font-size: 13.8vw;
        line-height: normal;
    }
    .main-container .h3{
        font-size: 10vw;
    }
    .main-container .title-highlight{
        font-size: 1.222em;
    }
    .main-container .subtitle{
        font-size: 6.667vw;
        font-weight: bold;
        line-height: 1.25;
    }
    .main-container .h4{
        font-size: 11.11vw;
        line-height: normal;
    }
    .main-container .big-title-xs{
        font-size: 11.1vw;
        line-height: normal;
    }
    .main-container .h2-xs{
        font-size: 8.8vw;
        line-height: normal;
    }
    .main-container .h3-xs{
        font-size: 11.1vw;
        line-height: normal;
    }
    .main-container .h4-xs{
        font-size: 9.16vw;
        line-height: normal;
    }
    .main-container p{
        font-size: 4.44vw;
    }
    .main-container .smaller-text{
        font-size: 3.6vw;
        line-height: 1.6;
    }
    .main-container .disclaimer{
        font-size: 3vw;
    }
    .video-pop-play{
        font-size: 5vw;
    }
    .auto-video-btn{
        font-size: 5vw;
    }
    .video-pop-play-svg{
        width: 12.8vw;
        height: 12.8vw;
    }
    .common-transform-show{
        opacity: 0;
        transform: translateY(5.55vw);
    }

    .kv-main-logo{
        margin: 22.2% auto 0;
        position: relative;
        top: 0;
        left: 0;
        width: 69.44%;
    }
    .kv-subtitle{
        margin: 6.66% auto 0;
        position: relative;
        top: 0;
        left: 0;
        width: 57.5%;
    }
    .kv-content-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
    }
    .kv-product-icon{
        order: 1;
        margin: 0;
        width: 78%;
    }
    .kv-signature{
        left: 4.4%;
        width: 12.2%;
    }
    .kv-signature path{
        fill: #FFFFFF;
    }
    .kv-disclaimer{
        right: 7%;
        bottom: 4.416vw;
        width: 47.318%;
    }
    .kv-disclaimer svg{
        width: 47.318vw;
        height: 4.975vw;
    }
    .kv-subtitle-container{
        margin: 0;
        order: 2;
        text-align: center;
    }
    .kv-subtitle{
        font-size: 7.78vw;
    }
    .kv-content-feature{
       font-size: 2.78vw; 
    }
    .kv-shop-container{
        flex-direction: column;
        margin-top: 16.05%;
    }
    .kv-price{
        font-size: 5.56vw;
    }
    .kv-price span{
        font-size: 3.611111111vw;
    }
    .kv-buy-btn-container{
        margin-top: 24px;
    }
    .kv-harmonyos{
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .kv-harmonyos a{
        display: block;
        margin: 11.94% 0 0 77%;
        position: relative;
        top: 0;
        left: 0;
        width: 18.5%;
    }
    .kv-new-plan{
        margin: 0 auto;
        width: 91.1%;
    }
    .kv-new-plan-title{
        font-size: 10vw;
    }
    .kv-new-plan-text{
        font-size: 3.87vw;
        margin-top: 6.6vw;
        width: 44vw;
    }
    .sellpoint-container{
        width: 91.1%;
    }
    .sellpoint-item-main{
        border-radius: 5.55vw;
    }
    .sellpoint-item-title{
        font-size: 5vw;
        top: 4.7vw;
        left: 4.4vw;
    }
    .sellpoint-item{
        border-radius: 5.56vw;
        margin-bottom: 3.33vw;
    }
    .sellpoint-item-container{
        transform: translateY(5.55vw);
    }
    .sellpoint-item-1{
        order: 1;
        width: 100%;
    }
    .sellpoint-item-1 .sellpoint-item-special-container{
        top: auto;
        bottom: 0;
        height: 120%;
        width: 104%;
    }
    .sellpoint-item-1 .sellpoint-item-special-image{
        transform: translate(-23%,20%) scale(.8);
        width: 94.6333vw;
        transform-origin: 100% 50%;
        transition-duration: .6s;
    }
    .sellpoint-item-1.active .sellpoint-item-special-image{
        transform: translate(5%,2%) scale(1.1);
    }
    .sellpoint-item-2,.sellpoint-item-3,.sellpoint-item-4,.sellpoint-item-6{
        width: 48.17%;
    }
    .sellpoint-item-2{
        order: 2;
    }
    .sellpoint-item-3{
        order: 3;
    }
    .sellpoint-item-3 .sellpoint-item-container{
        transition-delay: .15s;
    }
    .sellpoint-item-4{
        margin-top: -8.25vw;
        order: 4;
    }
    .sellpoint-item-5{
        margin-top: 0;
        width: 100%;
        order: 6;
    }
    .sellpoint-item-6{
        margin-top: 0;
        order: 5;
    }
    .sellpoint-item-5 .sellpoint-item-special-container{
        top: 43.5%;
        left: 8vw;
        width: 73.4vw;
    }
    .sellpoint-item-5 .sellpoint-item-special-image{
        transform: translate(50%,-80%) scale(.3);
        transition-duration: .8s;
        transition-delay: 0s;
    }
    .sellpoint-item-5.active .sellpoint-item-special-image{
        transform: scale(1);
    }
    .sellpoint-item:hover .sellpoint-item-bg{
        transform: scale(1);
    }
    .sellpoint-item-arrow-container{
        transform: scale(1);
    }
    .sellpoint-item-1.active:hover .sellpoint-item-special-image img{
        transform: scale(1);
    }
    .sellpoint-item-5.active:hover .sellpoint-item-special-image img{
        transform: scale(1);
    }
    .sellpoint-item-arrow-container{
        border: none;
        right: 2.22vw;
        bottom: 2.22vw;
        width: 8.88vw;
        height: 8.88vw;
    }
    .sellpoint-item-arrow-container svg{
        width: 100%;
        height: auto;
    }
    .design-title-container{
        margin-top: 14.7%;
        margin-left: 0;
        width: 100%;
    }
    .design-title-container .section-big-title-bg{
        margin-left: 0;
        width: 100%;
    }
    .design-title-container .section-big-title-text{
        top: 46%;
    }
    .design-title-container .big-title-line-1{
        margin-left: 11.11%;
        width: 60%;
    }
    .design-title-container .big-title-line-2{
        margin-left: 35.4%;
        width: 53.19%;
    }
    .design-intro-media{
        border-radius: 5.55vw;
        width: 91.1%;
    }
    .design-intro-play-btn{
        right: 4.44vw;
        bottom: 4.44vw;
    }
    .design-intro-disclaimer{
        font-size: 2.78vw;
        width: 77.8%;
        text-align: left;
    }
    .design-printed-pu-image-bg{
        border-radius: 5.55vw;
        width: 77.8%;
        height: 108vw;
    }
    .design-printed-pu-title{
        margin-bottom: 5%;
        margin-left: 11.1%;
        text-align: left;
    }
    .design-printed-pu-phone-1{
        top: -10%;
        right: auto;
        bottom: auto;
        left: 11.1%;
        width: 83.6%;
    }
    .design-printed-pu-phone-2{
        width: 84%;
        top: auto;
        bottom: -10%;
        right: 11.1%;
    }
    .design-printed-pu-phone-1 img{
        transform: translateX(-7.5%) scale(.75);
        transform-origin: left 80%;
    }
    .design-printed-pu-phone-2 img{
        transform: translateX(7.5%) scale(.75);
        transform-origin: right 20%;
    }
    .design-printed-pu-image-container.active .design-printed-pu-phone img{
        transform: translateX(0) scale(1);
        transition: transform .5s ease;
    }
    .design-printed-pu-text{
        margin-top: 10%;
        width: 77.8%;
    }
    .design-color-container{
        flex-direction: column-reverse;
        width: 91.1%;
    }
    .design-color-left-container{
        margin-top: 5.55vw;
        width: 100%;
        position: relative;
    }
    .design-color-detail-container,.design-color-full-phone-container{
        display: block;
        border-radius: 5.55vw;
    }
    .design-color-full-phone-item{
        transform-origin: 28% 50%;
    }
    .design-color-right-container{
        margin-top: 0;
        width: 100%;
    }
    .design-color-text-container{
        margin-top: 0;
        position: absolute;
        top: 50%;
        left: 49.5%;
        width: 44.7%;
        transform: translateY(-50%);
        text-align: left;
        z-index: 5;
    }
    .design-color-select-container{
        background-color: #F5F7FA;
        border-radius: 5.55vw;
        box-shadow: 0 2.22vw 3.33vw 0 rgba(0,0,0,.08);
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        margin: 5.55vw auto 0;
        position: sticky;
        bottom: 5vw;
        padding: 4.44vw;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        width: 84.4%;
        transition: opacity .4s ease;
        z-index: 6;
    }
    .design-color-select-container.active{
        opacity: 1;
        pointer-events: all;
    }
    .design-color-select-container.hidden-mob{
        display: none;
    }
    .design-color-select-title{
        margin-top: 0;
        margin-right: 6.67vw;
        text-align: center;
    }
    .design-color-select-title-item{
        font-size: 6.67vw;
    }
    .design-color-select-btn{
        margin-right: 4.167vw;
        width: 7.69vw;
        height: 7.69vw;
    }
    .design-color-select-btn:last-child{
        margin-right: 0;
    }
    .design-thin-content{
        background: none;
        border-radius: 0;
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }
    .design-thin-left-content{
        margin: 0 auto;
        width: 77.777%;
    }
    .design-thin-title-right{
        margin-left: 0;
    }
    .design-thin-text{
        margin-top: 8.47vw;
    }
    .design-thin-right-content{
        border-radius: 0;
        clip-path: none;
        display: block;
        margin: 10.4166% auto 0;
        width: 91.111%;
        position: relative;
    }
    .design-thin-container.active .design-thin-right-content{
        clip-path: none;
    }
    .design-thin-feature-container{
        background: radial-gradient(#D2E4F8,#FDFEFF);
        border-radius: 11.111vw;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 9.7%;
        left: 0;
        width: 100%;
        height: 79.6839%;
    }
    .design-thin-feature{
        display: flex;
        justify-content: center;
        font-size: 4.44vw;
        width: 68.75vw;
        transition: all 1s ease;
        will-change: clip-path;
        clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
    }
    .design-thin-container.active .design-thin-feature{
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    }
    .design-thin-container.active .design-thin-image{
        transform: translateX(-64vw);
    }
    .design-thin-feature-text2{
        font-size: 2.6875em;
    }
    .design-thin-image{
        margin-left: 83.19444vw;
        width: 7.916666vw;
    }
    .design-screen-content{
        position: relative;
        top: 0;
        left: 0;
        margin: 0 auto;
        width: 77.78%;
    }
    .design-screen-title-right{
        margin-left: 0;
        text-align: left;
    }
    .design-screen-text{
        width: 100%;
    }
    .design-screen-image{
        margin: 8.33% auto 0;
        width: 94%;
    }
    .design-screen-feature-container{
        margin: 5.8% auto 0;
        position: relative;
        right: 0;
        bottom: 0;
        width: 86.9444%;
        padding: 0;
        opacity: 0;
        transform: translateY(5.55vw);
    }
    .design-screen-feature-row::after {
        display: none;
    }
    .design-screen-feature-row .design-screen-feature-item:nth-of-type(2){
        width: 55%;
    }
    .design-screen-feature-container::after {
        background-color: #000000;
        content: "";
        display: block;
        width: 1px;
        height: 80%;
        position: absolute;
        left: 34%;
        top: 10%;
        opacity: .1;
    }
    .design-screen-feature-bg{
        display: none;
    }
    .design-screen-feature-title{
        color: #575A5C;
        font-size: 3.33vw;
    }
    .design-screen-feature-text{
        font-size: 6.67vw;
    }
    .design-screen-feature-text span{
        font-size: .66667em;
    }
    .design-kunlun-main-container{
        background: linear-gradient(to bottom,RGBA(218,232,249,0),RGBA(218,232,249,1));
        border-radius: 0;
        flex-direction: column;
        width: 100%;
    }
    .design-kunlun-content{
        margin: 0 auto;
        width: 77.78vw;
    }
    .design-kunlun-icon{
        width: 13.8vw;
    }
    .design-kunlun-text{
        width: 100%;
    }
    .design-kunlun-image{
        margin-top: 13.89vw;
        width: 91.1%;
    }
    .camera-title-container{
        margin-top: .5%;
        margin-left: 0;
        width: 100%;
    }
    .camera-title-container .section-big-title-bg{
        margin-left: 0;
        width: 100%;
    }
    .camera-title-container .section-big-title-text{
        top: 53%;
    }
    .camera-title-container .big-title-line-1{
        margin-left: 11.1111%;
        width: 72.22%;
    }
    .camera-title-container .big-title-line-2{
        margin-left: 32.5%;
        width: 56.388%;
    }
    .camera-intro-main{
        display: flex;
        background: linear-gradient(to bottom,RGBA(218,232,249,0),RGBA(218,232,249,1));
        flex-direction: column-reverse;
        width: 100%;
        opacity: 1;
        transform: translateY(0);
    }
    .camera-intro-content{
        background: none;
        border-radius: 0;
        position: relative;
        height: auto;
    }
    .camera-intro-content .animation-trigger{
        position: relative;
        top: 0;
    }
    .camera-intro-feature-row{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 auto;
        position: relative;
        top: 0;
        left: 0;
        width: 77.78%;
    }
    .camera-intro-feature-row:nth-of-type(2){
        position: relative;
        top: 0;
        right: 0;
        left: 0;
    }
    .camera-intro-feature-row-2{
        margin-top: 12.64vw;
    }
    .camera-intro-feature-mob-title{
        border-bottom: 1px rgba(24,25,26,.1) solid;
        color: #0433FE;
        display: block;
        font-size: 4.44vw;
        font-weight: bold;
        margin-bottom: 5vw;
        padding-bottom: 5.55vw;
        width: 100%;
    }
    .camera-intro-feature{
        width: 41%;
    }
    .camera-intro-feature:nth-of-type(2){
        margin-top: 0;
    }
    .camera-intro-feature-row-1 .camera-intro-feature:nth-of-type(2){
        width: 50%;
    }
    .camera-intro-feature:nth-of-type(3){
        margin-top: 0;
    }
    .camera-intro-feature:last-child{
        margin-top: 0;
    }
    .camera-intro-feature-row-1 .camera-intro-feature:nth-of-type(4){
        margin-top: 8.33vw;
    }
    .camera-intro-feature-row-1 .camera-intro-feature:last-child{
        margin-top: 8.33vw;
    }
    .camera-intro-feature-row-2 .camera-intro-feature:nth-of-type(2){
        width: 100%;
    }
    .camera-intro-title{
        font-size: 5vw;
    }
    .camera-intro-text{
        font-size: 3.89vw;
        margin-top: 3.75vw;
    }
    .camera-intro-image{
        margin-top: 11.1%;
        transform: translateY(0);
        width: 100%;
    }
    .camera-selfie-main{
        flex-direction: column;
        width: 100%;
    }
    .camera-selfie-content{
        width: 77.78vw;
    }
    .camera-selfie-right-title{
        margin-left: 0;
        text-align: left;
    }
    .camera-selfie-subtitle{
        margin-bottom: 2.5%;
        font-size: 5vw;
    }
    .camera-selfie-subtitle::before{
        width: 9.2vw;
    }
    .camera-selfie-image-container{
        background: linear-gradient(to bottom,#FDFEFF,#F1F3F5);
        box-sizing: border-box;
        flex-direction: column;
        padding: 0 4.45% 16%;
        width: 100%;
    }
    .camera-selfie-left-container{
        border-radius: 5.55vw;
        margin-top: 10.1vw;
        width: 100%;
    }
    .camera-selfie-item img{
        border-radius: 5.55vw;
        overflow: hidden;
        will-change: transform;
    }
    .camera-selfie-right-container{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 12vw;
        width: 81.4%;
        height: 34vw;
    }
    .camera-selfie-mode-item{
        border-radius: 3.33vw;
        width: 25.46%;
    }
    .camera-selfie-mode-item{
        margin: 0;
        padding: .55vw;
    }
    .camera-selfie-mode-item{
        border-width: .55vw;
    }
    .camera-selfie-mode-item.active {
        border: .55vw #C9C3C3 solid;
    }
    .camera-selfie-mode-item-image{
        border-radius: 2.5vw;
    }
    .camera-selfie-mode-item-title{
        font-size: 4.16vw;
    }
    .camera-selfie-content-mob-container{
        margin: 6.7vw auto 0;
        position: relative;
        width: 81.4%;
    }
    .camera-selfie-item-content{
        background: none;
        height: auto;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        transition: opacity .6s ease;
        text-align: center;
    }
    .camera-selfie-content-mob-container[data-index="0"] .camera-selfie-item-content[data-id="0"]{
        opacity: 1;
        pointer-events: all;
    }
    .camera-selfie-content-mob-container[data-index="1"] .camera-selfie-item-content[data-id="1"]{
        opacity: 1;
        pointer-events: all;
    }
    .camera-selfie-content-mob-container[data-index="2"] .camera-selfie-item-content[data-id="2"]{
        opacity: 1;
        pointer-events: all;
    }
    .camera-selfie-item-content:first-child{
        position: relative;
    }
    .camera-selfie-item-content::before{
        display: none;
    }
    .camera-selfie-item-title{
        display: none;
    }
    .camera-zoom-main{
        flex-direction: column-reverse;
        margin-left: 0;
        width: 100%;
    }
    .camera-zoom-content{
        width: 77.78%;
    }
    .camera-zoom-right-title{
        margin-left: 0;
        text-align: left;
    }
    .camera-zoom-subtitle{
        font-size: 5vw;
        margin-bottom: 2.5%;
    }
    .camera-zoom-subtitle::before{
        width: 9.2vw;
    }
    .camera-zoom-text{
        width: 100%;
    }
    .camera-zoom-image-container{
        margin: 8.33% 0 0;
        width: 91.1%;
    }
    .camera-zoom-image-row{
        border-radius: 4.16vw;
    }
    .camera-zoom-image-btn{
        font-size: 3.88vw;
        width: 12.22vw;
        height: 12.22vw;
    }
    .camera-zoom-image-btn.active{
        transform: scale(1.18);
    }
    .camera-zoom-image-poing{
        width: 0.87vw;
        height: 0.87vw;
        margin: 0 5.55vw;
    }
    .camera-zoom-image-btns{
        bottom: 6.6vw;
    }
    .camera-aperture-container{
        width: 100%;
    }
    .camera-aperture-subtitle{
        font-size: 5vw;
        margin: 0 auto 2.5%;
        width: 77.78%;
    }
    .camera-aperture-subtitle::before{
        width: 9.2vw;
    }
    .camera-aperture-content{
        flex-direction: column;
        margin: 0 auto;
        width: 77.78%;
    }
    .camera-aperture-title-container{
        width: 100%;
        white-space: nowrap;
    }
    .camera-aperture-right-title{
        margin-left: 0;
    }
    .camera-aperture-text-container{
        margin-top: 7vw;
        width: 100%;
    }
    .camera-aperture-row{
        flex-direction: column;
        margin: 0 auto;
        width: 91.1%;
    }
    .camera-aperture-left-image-container{
        border-radius: 5.5vw;
        width: 100%;
    }
    .camera-aperture-right-image-container{
        border-radius: 5.5vw;
        margin-top: 4.44vw;
        width: 100%;
    }
    .camera-aperture-control-container{
        background: none;
        margin: 2.7% auto 0;
        width: 88.89%;
        padding: 0;
    }
    .camera-aperture-control-text-container{
        width: 100%;
    }
    .camera-aperture-control-text-title{
        font-size: 5.5vw;
        margin-bottom: .6em;
    }
    .camera-aperture-control-mode-icon{
        margin-right: 0;
        width: 21%;
        height: auto;
    }
    .camera-aperture-control-mode-icon svg{
        filter: drop-shadow(0px .5555px 1.1111px rgba(87,90,92,40%));
        width: 100%;
        height: auto;
    }
    .camera-aperture-icon-row{
        transform: translate(0.5px,0.5px);
    }
    .camera-aperture-control-text-row{
        width: 72.65%;
    }
    .camera-aperture-control-text-item .camera-aperture-control-text{
        font-size: 3.88vw;
    }
    .camera-aperture-control-btns{
        margin: 8.33% auto 0;
        width: 84.4%;
    }
    .camera-aperture-control-btns.active{
        opacity: 1;
        pointer-events: all;
    }
    .camera-aperture-control-btns{
        opacity: 0;
        position: sticky;
        bottom: 5vw;
        z-index: 6;
        pointer-events: none;
        transition: opacity .4s ease;
    }
    .camera-aperture-control-btns:active{
        opacity: 1;
        pointer-events: all;
    }
    .camera-aperture-control-btns-row-container{
        box-shadow: 0 2.22vw 3.33vw 0 rgba(0,0,0,.08);
        background-color: #F1F3F5;
        border-radius: 5.5vw;
        padding: .55vw;
    }
    .camera-aperture-control-btns-row{
        padding: 1.8vw 0;
    }
    .camera-aperture-control-btn{
        font-size: 5.55vw;
        width: 31.7%;
    }
    .camera-aperture-control-btns-row::before{
        border-radius: 5.5vw;
        width: 31.7%;
    }
    .camera-aperture-control-btns-row[data-index="1"]::before {
        transform: translateX(107.7%);
    }
    .camera-aperture-control-btns-row[data-index="2"]::before {
        transform: translateX(215.45%);
    }
    .camera-aperture-control-btns-image{
        margin-top: 3.33vw;
        width: 76.8%;
    }
    .camera-sample-content{
        flex-direction: column;
        margin: 0 auto;
        width: 77.78%;
    }
    .camera-sample-title{
        width: 100%;
    }
    .camera-sample-right-title{
        margin-left: 0;
    }
    .camera-sample-text-container{
        margin-top: 8.333vw;
        width: 100%;
    }
    .camera-sample-swiper-container .swiper-3d {
        perspective: 50vw;
    }
    .camera-sample-swiper-container .space-40{
        height: 6.667vw;
    }
    .camera-sample-swiper-navigation-container{
        width: 29.2%;
    }
    .camera-sample-swiper-container .swiper-slide img{
        border-radius: 5.55vw;
    }
    .camera-sample-swiper-prev:hover path, .camera-sample-swiper-next:hover path{
        fill: #b2b2b2;
    }
    .camera-sample-swiper-prev.active path, .camera-sample-swiper-next.active path{
        fill: #0433FE;
        opacity: 1;
    }
    .camera-sample-swiper-prev path,
    .camera-sample-swiper-next path{
        transition: all .1s ease;
    }
    .performance-title-container{
        margin-left: 0;
        width: 100%;
    }
    .performance-title-container .section-big-title-bg{
        margin-left: 0;
        width: 100%;
    }
    .performance-title-container .section-big-title-text{
        top: 57%;
    }
    .performance-title-container .big-title-line-1{
        margin-left: 11.11%;
        width: 57.777%;
    }
    .performance-title-container .big-title-line-2{
        margin-left: 35.416%;
        width: 53.19%;
    }
    .performance-connect-title-container{
        text-align: left;
        margin-left: 0;
    }
    .performance-connect-title{
        text-align: left;
    }
    .performance-connect-image-container{
        width: 100%;
    }
    .performance-connect-image-item-bg{
        border-radius: 5.55vw;
    }
    .performance-connect-text-container{
        margin: 0;
        width: 90%;
        position: relative;
        top: 0;
        left: 0;
    }
    .performance-connect-icon{
        font-size: 4.4vw;
        margin-top: 5.2%;
        width: 65%;
    }
    .performance-connect-icon svg{
        margin-right: 2.78vw;
        width: 5.2vw;
        flex-shrink: 0;
    }
    .performance-connect-image-grid{
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        width: 91.1%;
    }
    .performance-connect-content-container{
        margin-left: 7.3%;
        margin-bottom: 10.43vw;
        width: 100%;
    }
    .performance-connect-image-item-1{
        order: 1;
        width: 100%;
    }
    .performance-connect-image-item-1 .performance-connect-image-item-text{
        width: 81%;
    }
    .performance-connect-image-item-2{
        order: 2;
        width: 48.1%;
    }
    .performance-connect-image-item-2 .performance-connect-image-item-container{
        transition-delay: 0;
    }
    .performance-connect-image-item-2 .performance-connect-image-item-text{
        width: 90%;
    }
    .performance-connect-image-item-3{
        order: 3;
        width: 48.1%;
    }
    .performance-connect-image-item-3 .performance-connect-image-item-container{
        transition-delay: 0s;
    }
    .performance-connect-image-item-4{
        order: 3;
        width: 48.1%;
    }
    .performance-connect-image-item-container{
        transition-duration: .4s;
    }
    .performance-connect-image-item-4 .performance-connect-image-item-container{
        transition-delay: .15s;
    }
    .performance-connect-image-item-4 .performance-connect-image-item-text{
        width: 100%;
    }
    .performance-connect-image-item-4 .swiper-pagination{
        width: 7.5vw;
    }
    .performance-connect-image-item-title{
        font-size: 5vw;
    }
    .performance-connect-image-item-content{
        top: 4.7vw;
        left: 7vw;
        right: 2vw;
    }
    .performance-connect-image-item-2,.performance-connect-image-item-3{
        margin-top: 3.3333vw;
    }
    .performance-connect-image-item-content .performance-connect-image-item-text{
        font-size: 3.88vw;
    }
    .performance-connect-image-item-3 .performance-connect-image-item-content{
        left: 4vw;
    }
    .performance-connect-image-satellite-2{
        top: 23.9vw;
        left: 21vw;
        width: 72vw;
    }
    .performance-cooldown-content{
        display: block;
        margin: 0 auto;
        width: 77.777%;
    }
    .performance-cooldown-title{
        width: 100%;
    }
    .performance-cooldown-text-container{
        margin-top: 8.6vw;
        width: 100%;
    }
    .performance-cooldown-right-title{
        margin-left: 0;
    }
    .performance-cooldown-main{
        background-color: transparent;
        border-radius: 0;
        display: block;
        width: 100%;
        margin: 16% 0 0;
        padding: 0;
    }
    .performance-cooldown-disclaimer{
        font-size: 3.05vw;
        margin-top: 6.25%;
        margin-left: 44.86%;
        position: relative;
        bottom: 0;
        left: 0;
    }
    .performance-cooldown-feature-container{
        margin: 15.83% auto 0;
        width: 77.777%;
        position: relative;
    }
    .performance-cooldown-feature-trigger{
        position: absolute;
        top: -10vh;
    }
    .performance-cooldown-feature-item{
        margin-top: 5.972vw;
        padding-bottom: 5.972vw;
    }
    .performance-cooldown-feature-title{
        font-size: 5.55555vw;
    }
    .performance-cooldown-feature-text{
        font-size: 4.44444vw;
        margin-top: 3.194444vw;
    }
    .performance-cooldown-image{
        margin: 0 auto;
        width: 86.11%;
    }
    .performance-supercharge-title{
        margin: 0 auto;
        position: relative;
        left: 0;
        top: 0;
        width: 77.78%;
    }
    .performance-supercharge-right-title{
        margin-left: 0;
        text-align: left;
    }
    .performance-supercharge-image{
        margin-top: 8.33vw;
        margin-left: -14%;
        width: 110%;
    }
    .performance-supercharge-feature-container{
        margin: 0 auto;
        position: relative;
        top: 0;
        right: 0;
        width: 77.78%;
    }
    .performance-supercharge-feature-trigger{
        position: absolute;
        top: -10vh;
    }
    .performance-supercharge-feature-item-title >span{
        font-size: .625em;
    }
    .performance-supercharge-feature-item-title .smaller-text{
        font-size: 1em;
    }
    .performance-supercharge-feature-row{
        background: none;
        padding: 0;
    }
    .performance-supercharge-feature-item-title{
        display: inline-block;
        font-size: 8.89vw;
        margin-bottom: 0;
    }
    .performance-supercharge-feature-item-title .small-sup{
        font-size: .34375em;
    }
    .performance-supercharge-feature-item-subtitle{
        display: inline-block;
        font-size: 4.44vw;
        margin-bottom: 0;
    }
    .performance-supercharge-feature-item-text{
        margin-top: 2.22vw;
    }
    .performance-supercharge-feature-item:first-child{
        margin-bottom: 6vw;
    }
    .performance-supercharge-feature-item:last-child{
        margin-top: 5.2vw;
    }
    .performance-turbo-container{
        margin-top: 25%;
    }
    .performance-turbo-content{
        margin: 0 auto;
        width: 77.78%;
        text-align: left;
    }
    .performance-turbo-text-container{
        width: 100%;
    }
    .performance-turbo-image{
        width: 91.1%;
    }
    .performance-turbo-feature-row{
        flex-wrap: wrap;
        width: 82.2%;
    }
    .performance-turbo-feature-item{
        width: calc(50% - .5px);
    }
    .performance-turbo-feature-text{
        font-size: 4.44vw;
        margin-top: .5em;
    }
    .performance-turbo-feature-item-1,.performance-turbo-feature-item-2{
        padding-bottom: 6.7vw;
    }
    .performance-turbo-feature-item-3,.performance-turbo-feature-item-4{
        margin-top: -1px;
        padding-top: 6.7vw;
    }
    .performance-turbo-feature-item-1 svg{
        width: 13.33vw;
    }
    .performance-turbo-feature-item-2 svg{
        width: 13.33vw;
    }
    .performance-turbo-feature-item-3 svg{
        width: 13.33vw;
    }
    .performance-turbo-feature-item-4 svg{
        width: 13.33vw;
    }
    .performance-turbo-feature-item-1{
        border-right: 1px rgba(24,25,26,.1) solid;
        border-bottom: 1px rgba(24,25,26,.1) solid
    }
    .performance-turbo-feature-item-4{
        border-left: 1px rgba(24,25,26,.1) solid;
        border-top: 1px rgba(24,25,26,.1) solid
    }
    .harmonyos-intro-container{
        flex-direction: column-reverse;
        width: 100%;
    }
    .harmonyos-intro-content{
        margin-left: 11.1%;
        width: 88%;
    }
    .harmonyos-intro-right-part{
        background-color: #F5F6F7;
        border-radius: 5.55vw;
        margin: 8.33vw auto 0;
        padding: 11.1vw 0;
        width: 91.1%;
    }
    .harmonyos-intro-image-swiper{
        width: 72%;
    }
    .harmonyos-intro-image-swiper .swiper-wrapper{
        width: 100%;
    }
    .harmonyos-intro-image-swiper .swiper-slide{
        position: relative;
        opacity: 1;
    }
    .harmonyos-intro-image-swiper .swiper-wrapper[data-index="0"] .swiper-slide[data-id="0"]{
        opacity: 1;
    }
    .harmonyos-intro-left-part{
        margin: 0 auto;
        width: 78.78%;
    }
    .harmonyos-intro-nav-row{
        display: block;
        margin-left: 0;
    }
    .harmonyos-intro-nav-container{
        background: none;
        height: auto;
        margin-top: 10.44vw;
    }
    .harmonyos-intro-nav-progress-container{
        margin: 4.5vw auto 8.3vw;
        width: 41.6vw;
        height: 1.1vw;
    }
    .harmonyos-intro-nav-progress-line{
        background-color: #F5F6F7;
        width: 100%;
        height: 100%;
    }
    .harmonyos-intro-nav-progress-slide{
        display: none;
    }
    .harmonyos-intro-nav-progress-line .swiper-scrollbar-drag{
        background-color: #0433FE
    }
    .harmonyos-intro-nav-content{
        width: 100%;
        position: relative;
    }
    .harmonyos-intro-nav-content-item{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity .6s ease;
    }
    .harmonyos-intro-nav-content-item:first-child{
        position: relative;
    }
    .harmonyos-intro-nav-content-item.active{
        opacity: 1;
        pointer-events: all;
    }
    .harmonyos-intro-nav-content-title,.harmonyos-intro-nav-content-item.active .harmonyos-intro-nav-content-title{
        font-size: 5.55vw;
    }
    .harmonyos-intro-nav-content-item.active .harmonyos-intro-nav-content-text,.harmonyos-intro-nav-content-text{
        margin-top: 4.44vw;
    }
    .harmonyos-intro-nav-content-item .harmonyos-intro-nav-content-text{
        font-size: 4.44vw;
    }
    .harmonyos-more-btn{
        border-radius: 1.1vw;
        border-color: rgba(24,25,26,.5);
        width: 71.8%;
    }
    .harmonyos-more-btn a{
        font-size: 3.88vw;
    }

    
   
    .disclaimer-container {
        font-size: 3.33vw;
        width: 87.5%;
        padding-top: 8.33%;
        padding-bottom: 8.33%;
    }
    .disclaimer-container .more-discalimer{
        margin-top: 10vw;
    }
}

.no-inline-video .video-fallback{
    display: block;
}
.no-inline-video video{
    display: none;
}
.no-inline-video .performance-supercharge-image{
    margin-left: 0;
    width: 100%;
}

.kv-main-logo svg {
    width: 28.64vw;
    height: 3.339vw;
}
.kv-subtitle svg{
    width: 21.47vw;
    height: 3.08vw;
}
.design-title-container .big-title-line-1 svg{
    width: 31.517vw;
    height: 11.168vw;
}
.design-title-container .big-title-line-2 svg{
    width: 40.735vw;
    height: 11.8579vw;
}
.camera-title-container .big-title-line-1 svg{
    width: 41.21vw;
    height: 11.98vw;
}
.camera-title-container .big-title-line-2 svg{
    width: 40.14vw;
    height: 11.88vw;
}
.performance-title-container .big-title-line-1 svg{
    width: 32.558vw;
    height: 11.66vw;
}
.performance-title-container .big-title-line-2 svg{
    width: 40.46vw;
    height: 11.9vw;
}
@media (max-aspect-ratio: 11 / 10){
    .kv-main-logo svg {
        width: 100%;
        height: auto;
    }
    .kv-subtitle svg{
        width: 100%;
        height: auto;
    }
    .design-title-container .big-title-line-1 svg{
        width: 100%;
        height: auto;
    }
    .design-title-container .big-title-line-2 svg{
        width: 100%;
        height: auto;
    }
    .camera-title-container .big-title-line-1 svg{
        width: 100%;
        height: auto;
    }
    .camera-title-container .big-title-line-2 svg{
        width: 100%;
        height: auto;
    }
    .performance-title-container .big-title-line-1 svg{
        width: 100%;
        height: auto;
    }
    .performance-title-container .big-title-line-2 svg{
        width: 100%;
        height: auto;
    }
}