html,
body {
padding: 0;
margin: 0;
overflow: initial;
}

body.is-overHidden {
overflow: hidden;
}

.honor-x5c {
opacity: 1;
transition: opacity 0.2s ease;
will-change: opacity;
position: relative;
z-index: 2;
color: #000;
background-color: #fff;
}

.honor-x5c.is-loading {
opacity: 0;
}

.honor-x5c.is-loading * {
transition: none !important;
}

.honor-x5c a:focus-visible,
.honor-x5c button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}

.honor-x5c a:focus-visible,
.honor-x5c button:focus-visible,
.honor-x5c div:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}

.honor-x5c section {
position: relative;
}

.honor-x5c div,
.honor-x5c h2,
.honor-x5c h3,
.honor-x5c h4,
.honor-x5c ul,
.honor-x5c ol,
.honor-x5c li,
.honor-x5c p,
.honor-x5c form,
.honor-x5c table,
.honor-x5c th,
.honor-x5c td,
.honor-x5c figure,
.honor-x5c button {
border: none;
margin: 0px;
padding: 0px;
color: inherit;
font-weight: normal;
}

.honor-x5c h2,
.honor-x5c h3,
.honor-x5c h4 {
line-height: 1.25;
}

.honor-x5c p,
.honor-x5c span {
line-height: 1.4;
}

.honor-x5c button {
background-color: transparent;
cursor: pointer;
font-family: inherit;
line-height: 1.25;
}

.honor-x5c button img,
.honor-x5c button svg {
overflow: initial;
}

.honor-x5c sup {
position: relative !important;
font-size: 60% !important;
line-height: 0 !important;
vertical-align: super !important;
top: 0 !important;
}

.honor-x5c sup.smaller {
font-size: 40% !important;
top: -0.5208333333vw !important;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c sup.smaller {
top: -1.3333333333vw !important;
}
}

.honor-x5c sup.placeholder {
display: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c sup.placeholder {
display: inline-block;
opacity: 0;
}
}

.honor-x5c sup.static {
position: static !important;
}

.honor-x5c picture,
.honor-x5c img,
.honor-x5c video,
.honor-x5c canvas {
display: block;
width: 100%;
height: 100%;
max-width: none;
}

.honor-x5c a {
color: inherit;
text-decoration: none;
}

.honor-x5c *,
.honor-x5c *::before,
.honor-x5c *::after {
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
text-rendering: optimizeLegibility;
}

.honor-x5c *:focus,
.honor-x5c *:active {
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.honor-x5c .nowrap {
white-space: nowrap;
}

.honor-x5c .object-fit {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}

.honor-x5c .object-contain {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}

.honor-x5c.ff-demiBold {
font-family: "HONOR Sans World DemiBold", sans-serif;
}

.honor-x5c.ff-medium {
font-family: "HONOR Sans World Medium";
}

.honor-x5c.ff-regular {
font-family: "HONOR Sans World Regular";
}

.honor-x5c .ff-demiBold {
font-family: "HONOR Sans World DemiBold";
}

.honor-x5c .ff-medium {
font-family: "HONOR Sans World Medium";
}

.honor-x5c .ff-regular {
font-family: "HONOR Sans World Regular";
}

.honor-x5c .fs-56 {
font-size: 2.9166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .fs-56 {
font-size: 7.4666666667vw;
}
}

.honor-x5c .sticky-container {
position: sticky;
top: 52px;
height: calc(100vh - 52px);
overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .sticky-container {
top: 52px;
height: calc(100vh - 52px);
}
}

.honor-x5c .section-kv {
height: 56.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv {
height: 200vw;
overflow: hidden;
}
}

.honor-x5c .section-kv #trigger-ga {
position: absolute;
top: 20vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .bg {
width: 100%;
height: 200vw;
position: absolute;
top: -13.3333333333vw;
left: 0;
}
}

.honor-x5c .section-kv .copy-wrapper {
position: absolute;
width: 39.9479166667vw;
top: 21.875vw;
left: 58.0208333333vw;
text-align: center;
z-index: 2;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .copy-wrapper {
width: 86vw;
left: 7vw;
top: 18.3333333333vw;
}
}

.honor-x5c .section-kv .copy-wrapper .slogan {
font-size: 2.5vw;
margin-bottom: 2.34375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .copy-wrapper .slogan {
font-size: 4.8vw;
}
}

.honor-x5c .section-kv .copy-wrapper .copy {
display: flex;
justify-content: space-between;
font-size: 0.9375vw;
align-items: center;
margin-bottom: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .copy-wrapper .copy {
margin-bottom: 2.6666666667vw;
}
}

.honor-x5c .section-kv .copy-wrapper .copy span {
display: inline-block;
width: 1px;
height: 1.8229166667vw;
background-color: #000;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .copy-wrapper .copy span {
width: 0.2666666667vw;
height: 4.8vw;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .copy-wrapper .copy {
font-size: 2.1333333333vw;
}
}

.honor-x5c .section-kv .kvBuyBtn {
position: relative;
display: inline-block;
text-align: center;
font-size: 0.9375vw;
border-radius: 2.6041666667vw;
border: 1.5px solid #7f7f7f;
padding: 0.5208333333vw 1.5625vw;
line-height: 1;
transition: border-color 0.1s linear;
margin: 0 0.78125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .kvBuyBtn {
font-size: 3.7333333333vw;
transform: none;
padding: 2.1333333333vw 4.8vw;
border-radius: 8vw;
margin: 0 1.3333333333vw;
}
}

@media (min-aspect-ratio: 12/10) and (min-width: 1366px) {
.honor-x5c .section-kv .kvBuyBtn:hover {
border-color: #000;
}
}

.honor-x5c .section-kv .turbo-wrapper {
position: absolute;
z-index: 2;
top: 48.4375vw;
right: 2.34375vw;
display: flex;
flex-direction: column;
align-items: flex-end;
transform: translateY(1.3020833333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .turbo-wrapper {
top: 170.6666666667vw;
right: 4vw;
}
}

.honor-x5c .section-kv .turbo-wrapper .turbo-copy {
font-size: 12px;
margin-top: 2.34375vw;
width: 1300px;
text-align: right;
color: rgba(0, 0, 0, 0.6);
transform: scale(0.3);
transform-origin: 100% 0%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-kv .turbo-wrapper .turbo-copy {
font-size: 16px;
margin-top: 3.6vw;
width: 1700px;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-kv .turbo-wrapper .turbo-copy {
font-size: 8px;
width: 850px;
}
}

.honor-x5c .section-highlights .highlights-wrapper {
width: 72.9166666667vw;
margin: 0 auto;
padding: 5.2083333333vw 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper {
width: 89.3333333333vw;
padding: 9.6vw 0 17.6vw;
}
}

.honor-x5c .section-highlights .highlights-wrapper .highlights-title {
width: 100%;
margin-bottom: 3.125vw;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .highlights-title {
margin-bottom: 9.6vw;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper1 {
width: 40vw;
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item {
position: relative;
width: 40vw;
height: 22.9166666667vw;
border-radius: 1.25vw;
overflow: hidden;
cursor: pointer;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item {
width: 89.3333333333vw;
height: 64vw;
border-radius: 3.2vw;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item .img {
transition: all 0.5s ease;
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item:hover .img {
transform: scale(1.05);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item:hover .img {
transform: scale(1);
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item .copy-wrapper {
position: absolute;
top: 2.34375vw;
left: 1.875vw;
text-align: left;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item .copy-wrapper {
top: 4.5333333333vw;
left: 3.7333333333vw;
text-align: left;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item .copy-wrapper .copy-title {
font-size: 1.6666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item .copy-wrapper .copy-title {
font-size: 4.8vw;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item2 {
width: 40vw;
height: 20.8333333333vw;
margin-top: 0.625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper1 .item2 {
width: 89.3333333333vw;
height: 58.1333333333vw;
margin-top: 1.0666666667vw;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper2 {
width: 31.9791666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper2 {
width: 89.3333333333vw;
display: flex;
justify-content: space-between;
margin-top: 1.3333333333vw;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item {
position: relative;
width: 31.9791666667vw;
height: 24.5833333333vw;
border-radius: 1.25vw;
overflow: hidden;
cursor: pointer;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item {
width: 43.4666666667vw;
height: 53.8666666667vw;
border-radius: 3.2vw;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item .img {
transition: all 0.5s ease;
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item:hover .img {
transform: scale(1.05);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item:hover .img {
transform: scale(1);
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item .copy-wrapper {
position: absolute;
top: 1.34375vw;
left: 1.875vw;
text-align: left;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item .copy-wrapper {
top: 4.5333333333vw;
left: 3.7333333333vw;
text-align: left;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item .copy-wrapper .copy-title {
font-size: 1.5vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item .copy-wrapper .copy-title {
font-size: 4.0vw;
}
}

.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item4 {
width: 31.9791666667vw;
height: 19.1666666667vw;
margin-top: 0.625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-highlights .highlights-wrapper .wrapper2 .item4 {
width: 43.4666666667vw;
height: 53.8666666667vw;
margin-top: 0;
}
}

.honor-x5c .section-nature {
height: 170vh;
z-index: 10;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-nature {
pointer-events: none;
}
}

.honor-x5c .section-nature.is-active .copy-wrapper .copy-title p {
background-position: 0% 50%;
}

.honor-x5c .section-nature.is-active2 .bg {
opacity: 0;
}

.honor-x5c .section-nature.is-active2 .copy-wrapper .copy-title .copy-title-top {
transform: translateY(-20.8333333333vw);
opacity: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-nature.is-active2 .copy-wrapper .copy-title .copy-title-top {
transform: translateY(-106.6666666667vw);
}
}

.honor-x5c .section-nature.is-active2 .copy-wrapper .copy-title .copy-title-bottom {
transform: translateY(20.8333333333vw);
opacity: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-nature.is-active2 .copy-wrapper .copy-title .copy-title-bottom {
transform: translateY(106.6666666667vw);
}
}

.honor-x5c .section-nature #trigger-nature-2 {
position: absolute;
top: 50vh;
}

.honor-x5c .section-nature .bg {
transition: all 0.7s ease;
}

.honor-x5c .section-nature .copy-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-nature .copy-wrapper {
width: 89.3333333333vw;
text-align: center;
}
}

.honor-x5c .section-nature .copy-wrapper .copy-title {
font-size: 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-nature .copy-wrapper .copy-title {
font-size: 9.6vw;
}
}

.honor-x5c .section-nature .copy-wrapper .copy-title .copy-title-top,
.honor-x5c .section-nature .copy-wrapper .copy-title .copy-title-bottom {
transition: all 0.7s ease;
}

.honor-x5c .section-nature .copy-wrapper .copy-title .copy-title-text {
background-image: url(https://www-file.honor.com/content/dam/honor/global/products/smartphone/honor-x5c/imgs/section-nature/tit-bg.jpg);
background-size: 300% 100%;
background-repeat: no-repeat;
background-position: 100% 50%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: all 1s ease;
}

.honor-x5c .section-cmf {
height: 170vh;
margin-top: -170vh;
background-color: #fff;
z-index: 9;
}

.honor-x5c .section-cmf #trigger-ga {
position: absolute;
top: 50vh;
}

.honor-x5c .section-cmf #trigger-cmf-1 {
position: absolute;
top: 50vh;
}

.honor-x5c .section-cmf.is-active .cmf-white-alpha {
transform: scale(12);
}

.honor-x5c .section-cmf.is-color-green .cmf-img-container .img2,
.honor-x5c .section-cmf.is-color-green .cmf-img-container .img3,
.honor-x5c .section-cmf.is-color-green .cmf-img-container .img4 {
opacity: 0;
}

.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-text-wrapper .cmf-title2,
.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-text-wrapper .cmf-title3,
.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-text-wrapper .cmf-title4 {
opacity: 0;
}

.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-text-wrapper .cmf-title1 {
opacity: 1;
}

.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-btn .cmfBtn1 {
clip-path: circle(1.3020833333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-btn .cmfBtn1 {
clip-path: circle(5.3333333333vw);
}
}

.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-btn .cmfBtn2,
.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-btn .cmfBtn3,
.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-btn .cmfBtn4 {
clip-path: circle(1.0416666667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {

.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-btn .cmfBtn2,
.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-btn .cmfBtn3,
.honor-x5c .section-cmf.is-color-green .cmf-text-container .cmf-btn .cmfBtn4 {
clip-path: circle(2.6666666667vw);
}
}

.honor-x5c .section-cmf.is-color-blue .cmf-img-container .img2 {
opacity: 1;
}

.honor-x5c .section-cmf.is-color-blue .cmf-img-container .img1,
.honor-x5c .section-cmf.is-color-blue .cmf-img-container .img3,
.honor-x5c .section-cmf.is-color-blue .cmf-img-container .img4 {
opacity: 0;
}

.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-text-wrapper .cmf-title1,
.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-text-wrapper .cmf-title3,
.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-text-wrapper .cmf-title4 {
opacity: 0;
}

.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-text-wrapper .cmf-title2 {
opacity: 1;
}

.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-btn .cmfBtn2 {
clip-path: circle(1.3020833333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-btn .cmfBtn2 {
clip-path: circle(5.3333333333vw);
}
}

.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-btn .cmfBtn1,
.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-btn .cmfBtn3,
.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-btn .cmfBtn4 {
clip-path: circle(1.0416666667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {

.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-btn .cmfBtn1,
.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-btn .cmfBtn3,
.honor-x5c .section-cmf.is-color-blue .cmf-text-container .cmf-btn .cmfBtn4 {
clip-path: circle(2.6666666667vw);
}
}

.honor-x5c .section-cmf.is-color-silver .cmf-img-container .img3 {
opacity: 1;
}

.honor-x5c .section-cmf.is-color-silver .cmf-img-container .img1,
.honor-x5c .section-cmf.is-color-silver .cmf-img-container .img2,
.honor-x5c .section-cmf.is-color-silver .cmf-img-container .img4 {
opacity: 0;
}

.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-text-wrapper .cmf-title1,
.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-text-wrapper .cmf-title2,
.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-text-wrapper .cmf-title4 {
opacity: 0;
}

.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-text-wrapper .cmf-title3 {
opacity: 1;
}

.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-btn .cmfBtn3 {
clip-path: circle(1.3020833333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-btn .cmfBtn3 {
clip-path: circle(5.3333333333vw);
}
}

.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-btn .cmfBtn2,
.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-btn .cmfBtn1,
.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-btn .cmfBtn4 {
clip-path: circle(1.0416666667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {

.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-btn .cmfBtn2,
.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-btn .cmfBtn1,
.honor-x5c .section-cmf.is-color-silver .cmf-text-container .cmf-btn .cmfBtn4 {
clip-path: circle(2.6666666667vw);
}
}

.honor-x5c .section-cmf.is-color-black .cmf-img-container .img4 {
opacity: 1;
}

.honor-x5c .section-cmf.is-color-black .cmf-img-container .img1,
.honor-x5c .section-cmf.is-color-black .cmf-img-container .img2,
.honor-x5c .section-cmf.is-color-black .cmf-img-container .img3 {
opacity: 0;
}

.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-text-wrapper .cmf-title1,
.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-text-wrapper .cmf-title2,
.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-text-wrapper .cmf-title3 {
opacity: 0;
}

.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-text-wrapper .cmf-title4 {
opacity: 1;
}

.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-btn .cmfBtn4 {
clip-path: circle(1.3020833333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-btn .cmfBtn4 {
clip-path: circle(5.3333333333vw);
}
}

.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-btn .cmfBtn2,
.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-btn .cmfBtn1,
.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-btn .cmfBtn3 {
clip-path: circle(1.0416666667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {

.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-btn .cmfBtn2,
.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-btn .cmfBtn1,
.honor-x5c .section-cmf.is-color-black .cmf-text-container .cmf-btn .cmfBtn3 {
clip-path: circle(2.6666666667vw);
}
}

.honor-x5c .section-cmf .cmf-img-container {
position: relative;
width: 100%;
height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf .cmf-img-container {
height: 150%;
transform: translateY(-29.3333333333vw);
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-cmf .cmf-img-container {
height: 100%;
transform: translateY(0vw);
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-cmf .cmf-img-container {
height: 200%;
transform: translateY(-40vw);
}
}

.honor-x5c .section-cmf .cmf-img-container .img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf .cmf-img-container .img {
transform: scale(0.7);
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-cmf .cmf-img-container .img {
transform: scale(1);
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-cmf .cmf-img-container .img {
transform: scale(0.5);
}
}

.honor-x5c .section-cmf .cmf-img-container .img2,
.honor-x5c .section-cmf .cmf-img-container .img3,
.honor-x5c .section-cmf .cmf-img-container .img4 {
opacity: 0;
z-index: 10;
}

.honor-x5c .section-cmf .cmf-text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 30;
width: 62.5vw;
display: flex;
align-items: center;
justify-content: space-between;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf .cmf-text-container {
width: 80vw;
top: 18.6666666667vw;
left: 50%;
transform: translate(-50%, calc(-50% + 90.6666666667vw)) scale(0.7);
flex-direction: column;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-cmf .cmf-text-container {
width: 80vw;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 66.6666666667vw)) scale(1);
flex-direction: column;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 375px) {
.honor-x5c .section-cmf .cmf-text-container {
width: 80vw;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 61.3333333333vw)) scale(1);
flex-direction: column;
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-cmf .cmf-text-container {
width: 80vw;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 32vw)) scale(0.5);
}
}

.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper {
position: relative;
text-align: center;
}

.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper .cmf-title1 {
font-size: 2.9166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper .cmf-title1 {
font-size: 7.4666666667vw;
}
}

.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper .cmf-title2,
.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper .cmf-title3,
.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper .cmf-title4 {
font-size: 2.9166666667vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
white-space: nowrap;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {

.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper .cmf-title2,
.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper .cmf-title3,
.honor-x5c .section-cmf .cmf-text-container .cmf-text-wrapper .cmf-title4 {
font-size: 7.4666666667vw;
width: 80vw;
}
}

.honor-x5c .section-cmf .cmf-text-container .cmf-btn {
display: flex;
justify-content: center;
align-items: center;
width: 10vw;
height: 4.4791666667vw;
border-radius: 2.1875vw;
background: rgba(0, 0, 0, 0.2);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf .cmf-text-container .cmf-btn {
width: 27.28vw;
height: 11.4666666667vw;
border-radius: 6.1333333333vw;
margin: 5.3333333333vw auto 0;
}
}

.honor-x5c .section-cmf .cmf-text-container .cmf-btn .cmfBtn {
width: 2.3958333333vw;
height: 2.3958333333vw;
margin: 0 0.625vw;
clip-path: circle(1.0416666667vw);
transition: all 0.7s ease;
}

.honor-x5c .section-cmf .cmf-text-container .cmf-btn .cmfBtn:focus-visible {
clip-path: circle(100%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf .cmf-text-container .cmf-btn .cmfBtn {
width: 7.4666666667vw;
height: 7.4666666667vw;
border-radius: 7.4666666667vw;
clip-path: circle(2.6666666667vw);
margin: 0 1.6vw;
}
}

.honor-x5c .section-cmf .cmf-text-container .cmf-btn .cmfBtn1 {
clip-path: circle(1.3020833333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-cmf .cmf-text-container .cmf-btn .cmfBtn1 {
clip-path: circle(5.3333333333vw);
}
}

.honor-x5c .section-cmf .cmf-white-alpha {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 50;
transition: all 0.7s ease;
pointer-events: none;
}

.honor-x5c .section-battery {
height: 170vh;
}

.honor-x5c .section-battery #trigger-battery-2 {
position: absolute;
top: 50vh;
}

.honor-x5c .section-battery.is-active .sticky-container .img1 {
transform: translate(calc(-50% + 14.5833333333vw), calc(-50% - 3.125vw)) scale(0.5);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery.is-active .sticky-container .img1 {
transform: translate(-50%, calc(-50% + 10.9375vw));
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-battery.is-active .sticky-container .img1 {
transform: translate(-50%, calc(-50% + 10.9375vw)) scale(0.6);
}
}

.honor-x5c .section-battery.is-active .sticky-container .copy-wrapper {
opacity: 1;
}

.honor-x5c .section-battery.is-active2 .sticky-container .img1 {
transform: translate(calc(-50% + 14.5833333333vw), calc(-50% - 3.125vw)) scale(0.5);
opacity: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery.is-active2 .sticky-container .img1 {
transform: translate(-50%, calc(-50% + 10.9375vw));
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-battery.is-active2 .sticky-container .img1 {
transform: translate(-50%, calc(-50% + 10.9375vw)) scale(0.6);
}
}

.honor-x5c .section-battery.is-active2 .sticky-container .copy-wrapper {
opacity: 0;
}

.honor-x5c .section-battery.is-active2 .sticky-container .img2 {
opacity: 1;
transform: translate(calc(-50% + 20.8333333333vw), calc(-50% - 2.6041666667vw));
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery.is-active2 .sticky-container .img2 {
transform: translate(-50%, calc(-50% + 40vw));
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-battery.is-active2 .sticky-container .img2 {
transform: translate(-50%, calc(-50% + 26.6666666667vw)) scale(0.6);
}
}

.honor-x5c .section-battery.is-active2 .sticky-container .copy-wrapper2 {
opacity: 1;
transform: translate(calc(-50% - 20.8333333333vw), calc(-50% - 2.6041666667vw));
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery.is-active2 .sticky-container .copy-wrapper2 {
transform: translate(-50%, calc(-50% - 40vw)) scale(0.8);
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-battery.is-active2 .sticky-container .copy-wrapper2 {
transform: translate(-50%, calc(-50% - 53.3333333333vw)) scale(1);
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-battery.is-active2 .sticky-container .copy-wrapper2 {
transform: translate(-50%, calc(-50% - 22.6666666667vw)) scale(0.55);
}
}

.honor-x5c .section-battery .sticky-container {
background: linear-gradient(180deg, #fff 50%, #e7f4ee 100%);
}

.honor-x5c .section-battery .sticky-container .img1 {
width: 90.4166666667vw;
height: 93.2291666667vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, calc(-50% + 10.9375vw));
transition: all 0.7s ease;
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-battery .sticky-container .img1 {
transform: translate(-50%, calc(-50% + 10.9375vw)) scale(0.6);
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper {
width: 34.0833333333vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 20.8333333333vw), -50%);
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper {
width: 85vw;
transform: translate(-50%, calc(-50% - 40vw)) scale(0.8);
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper {
width: 80vw;
transform: translate(-50%, calc(-50% - 53.3333333333vw)) scale(1);
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper {
transform: translate(-50%, calc(-50% - 21.3333333333vw)) scale(0.6);
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-title {
font-size: 2.9166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-title {
font-size: 7.0vw;
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-text {
font-size: 1.875vw;
margin-top: 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-text {
font-size: 4.2666666667vw;
margin-top: 8vw;
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-subtitle {
font-size: 2.9166666667vw;
background: linear-gradient(0deg, #589388 0%, #8fc6b0 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #8fc6b0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-subtitle {
font-size: 6.4vw;
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-subtitle sup {
position: static !important;
}

.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-text2 {
font-size: 1.25vw;
opacity: 0.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper .copy-text2 {
font-size: 3.2vw;
}
}

.honor-x5c .section-battery .sticky-container .img2 {
width: 60.15625vw;
height: 56.25vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(calc(-50% + 20.8333333333vw), calc(-50% + 41.6666666667vw));
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .img2 {
transform: translate(-50%, calc(-50% + 41.6666666667vw));
width: 100vw;
height: 136.2666666667vw;
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper2 {
width: 27.0833333333vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 20.8333333333vw), calc(-50% - 53.3333333333vw));
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper2 {
width: 80vw;
transform: translate(-50%, -50%) scale(0.8);
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper2 {
width: 80vw;
transform: translate(-50%, -50%) scale(1);
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-title {
font-size: 2.9166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-title {
font-size: 7.4666666667vw;
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-text {
font-size: 1.875vw;
margin-top: 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-text {
font-size: 4.2666666667vw;
margin-top: 6.6666666667vw;
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-subtitle {
font-size: 2.9166666667vw;
background: linear-gradient(0deg, #589388 0%, #8fc6b0 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #8fc6b0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-subtitle {
font-size: 6.4vw;
margin-top: 2.6666666667vw;
}
}

.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-subtitle sup {
position: static !important;
}

.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-text2 {
font-size: 1.25vw;
opacity: 0.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-battery .sticky-container .copy-wrapper2 .copy-text2 {
font-size: 3.2vw;
margin-top: 2.6666666667vw;
}
}

.honor-x5c .section-large {
height: 150vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large .sticky-container {
height: 120vh;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-large .sticky-container {
height: calc(100vh - 52px);
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 375px) {
.honor-x5c .section-large .sticky-container {
height: calc(110vh - 52px);
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-large {
height: 189.3333333333vw;
}

.honor-x5c .section-large .sticky-container {
height: 189.3333333333vw;
}
}

.honor-x5c .section-large.is-active .copy-wrapper {
transform: translate(calc(-50% + 26.0416666667vw), calc(-50% + 0vw));
opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large.is-active .copy-wrapper {
transform: translate(-50%, calc(-50% + 53.3333333333vw));
}
}

.honor-x5c .section-large.is-active .img-wrapper .large-icon1 {
opacity: 0;
transform: rotate(35deg) translateY(-10.4166666667vw) translateX(5.2083333333vw);
transform-origin: 20% 70%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large.is-active .img-wrapper .large-icon1 {
transform: rotate(0) translateY(2.6666666667vw) translateX(0vw) scale(0.75);
transform-origin: 50% 50%;
opacity: 1;
}
}

.honor-x5c .section-large.is-active .img-wrapper .large-icon2 {
opacity: 1;
transform: rotate(0deg) translateY(0vw);
transform-origin: 0% 100%;
}

.honor-x5c .section-large.is-active .img-wrapper .large-icon3 {
transform: translate(0vw, 0vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large.is-active .img-wrapper .large-icon3 {
transform: translate(2.6666666667vw, -13.3333333333vw);
}
}

.honor-x5c .section-large .copy-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 26.0416666667vw), calc(-50% + 20.8333333333vw));
width: 30.6875vw;
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large .copy-wrapper {
width: 78.1333333333vw;
transform: translate(-50%, calc(-50% + 106.6666666667vw));
}
}

.honor-x5c .section-large .copy-wrapper .copy-title {
font-size: 2.9166666667vw;
margin-bottom: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large .copy-wrapper .copy-title {
font-size: 7.0vw;
margin-bottom: 4vw;
}
}

.honor-x5c .section-large .copy-wrapper .copy-text {
font-size: 1.2vw;
opacity: 0.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large .copy-wrapper .copy-text {
font-size: 3.0vw;
opacity: 1;
}
}

.honor-x5c .section-large .img-wrapper {
width: 63.421875vw;
height: 50.625vw;
position: absolute;
left: 2.6041666667vw;
top: 50%;
transform: translateY(-50%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large .img-wrapper {
width: 100vw;
height: 143.7333333333vw;
left: 0;
transform: translateY(calc(-50% - 18.6666666667vw));
}
}

.honor-x5c .section-large .img-wrapper .product {
z-index: 10;
position: relative;
}

.honor-x5c .section-large .img-wrapper .large-icon1,
.honor-x5c .section-large .img-wrapper .large-icon2,
.honor-x5c .section-large .img-wrapper .large-icon3 {
width: 63.421875vw;
height: 50.625vw;
position: absolute;
left: 0vw;
top: 0vw;
transition: all 0.7s ease;
z-index: 11;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {

.honor-x5c .section-large .img-wrapper .large-icon1,
.honor-x5c .section-large .img-wrapper .large-icon2,
.honor-x5c .section-large .img-wrapper .large-icon3 {
width: 100vw;
height: 143.7333333333vw;
}
}

.honor-x5c .section-large .img-wrapper .large-icon2 {
opacity: 0;
transform: rotate(-45deg) translateY(20.8333333333vw);
transform-origin: 0% 100%;
}

.honor-x5c .section-large .img-wrapper .large-icon3 {
z-index: 9;
transform: translate(-10.4166666667vw, 5.2083333333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-large .img-wrapper .large-icon3 {
transform: translate(-26.6666666667vw, 0);
}
}

.honor-x5c .section-ram {
background-color: #f5f5f5;
height: 200vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-ram {
height: 133.3333333333vw;
background-color: #fff;
}
}

.honor-x5c .section-ram .sticky-container {
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-ram .sticky-container {
height: 133.3333333333vw;
}
}

.honor-x5c .section-ram .ram-wrapper {
width: 83.3333333333vw;
height: 41.6666666667vw;
background-color: #fff;
border-radius: 1.25vw;
display: flex;
align-items: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-ram .ram-wrapper {
width: 89.3333333333vw;
height: 128.5333333333vw;
position: relative;
}
}

.honor-x5c .section-ram .ram-wrapper .copy-wrapper {
width: 41.6666666667vw;
padding: 0 4.375vw 0 9.0625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-ram .ram-wrapper .copy-wrapper {
position: absolute;
left: 5.3333333333vw;
top: 12.8vw;
color: #fff;
width: 80vw;
padding: 0;
z-index: 10;
}
}

.honor-x5c .section-ram .ram-wrapper .copy-wrapper .copy-title {
font-size: 2.9166666667vw;
margin-bottom: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-ram .ram-wrapper .copy-wrapper .copy-title {
font-size: 7.4666666667vw;
margin-bottom: 8vw;
}
}

.honor-x5c .section-ram .ram-wrapper .copy-wrapper .copy-text {
font-size: 1.25vw;
opacity: 0.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-ram .ram-wrapper .copy-wrapper .copy-text {
font-size: 3.7333333333vw;
opacity: 1;
}
}

.honor-x5c .section-ram .ram-wrapper .img {
width: 41.6666666667vw;
height: 41.6666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-ram .ram-wrapper .img {
width: 89.3333333333vw;
height: 128.5333333333vw;
}
}

.honor-x5c .section-power {
height: 100vh;
margin-top: -100vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-power {
height: 133.3333333333vw;
margin-top: 0;
}
}

.honor-x5c .section-power .sticky-container {
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-power .sticky-container {
height: 133.3333333333vw;
}
}

.honor-x5c .section-power .power-wrapper {
width: 83.3333333333vw;
height: 41.6666666667vw;
background-color: #fff;
border-radius: 1.25vw;
display: flex;
align-items: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-power .power-wrapper {
width: 89.3333333333vw;
height: 128.5333333333vw;
position: relative;
}
}

.honor-x5c .section-power .power-wrapper .copy-wrapper {
width: 41.6666666667vw;
padding: 0 4.375vw 0 9.0625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-power .power-wrapper .copy-wrapper {
position: absolute;
left: 5.3333333333vw;
top: 12.8vw;
color: #fff;
width: 80vw;
padding: 0;
}
}

.honor-x5c .section-power .power-wrapper .copy-wrapper .copy-title {
font-size: 2.9166666667vw;
margin-bottom: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-power .power-wrapper .copy-wrapper .copy-title {
font-size: 7.4666666667vw;
margin-bottom: 8vw;
}
}

.honor-x5c .section-power .power-wrapper .copy-wrapper .copy-text {
font-size: 1.25vw;
opacity: 0.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-power .power-wrapper .copy-wrapper .copy-text {
font-size: 3.7333333333vw;
opacity: 1;
}
}

.honor-x5c .section-power .power-wrapper .img {
width: 41.6666666667vw;
height: 41.6666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-power .power-wrapper .img {
width: 89.3333333333vw;
height: 128.5333333333vw;
}
}

.honor-x5c .section-brighter {
height: 67.7083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-brighter {
height: 184vw;
margin-top: 10.6666666667vw;
overflow: hidden;
}
}

.honor-x5c .section-brighter .copy-wrapper {
position: absolute;
width: 80%;
left: 10%;
text-align: center;
top: 7.2916666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-brighter .copy-wrapper {
text-align: left;
top: 21.3333333333vw;
width: 78.1333333333vw;
left: 10.6666666667vw;
}
}

.honor-x5c .section-brighter .copy-wrapper .copy-title {
font-size: 2.9166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-brighter .copy-wrapper .copy-title {
font-size: 7.4666666667vw;
}
}

.honor-x5c .section-brighter .data-wrapper {
display: flex;
width: 68.0208333333vw;
justify-content: space-between;
position: absolute;
left: 15.9895833333vw;
top: 54.1145833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-brighter .data-wrapper {
left: 10.6666666667vw;
width: 80vw;
top: 118.6666666667vw;
flex-wrap: wrap;
}
}

.honor-x5c .section-brighter .data-wrapper .item {
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-brighter .data-wrapper .item {
text-align: left;
margin-bottom: 8vw;
}
}

.honor-x5c .section-brighter .data-wrapper .item h3 {
background: linear-gradient(0deg, #589388 0%, #8fc6b0 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.9166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-brighter .data-wrapper .item h3 {
font-size: 6.4vw;
}
}

.honor-x5c .section-brighter .data-wrapper .item h3 sup {
position: static !important;
}

.honor-x5c .section-brighter .data-wrapper .item p {
font-size: 1.25vw;
opacity: 0.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-brighter .data-wrapper .item p {
font-size: 3.2vw;
}
}

.honor-x5c .section-magic {
height: 150vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-magic {
height: 189.3333333333vw;
overflow: hidden;
}

.honor-x5c .section-magic .sticky-container {
height: 189.3333333333vw;
position: static;
}
}

.honor-x5c .section-magic.is-active .img-wrapper {
transform: translate(calc(-50% + 15.625vw), calc(-50% + 2.6041666667vw)) scale(0.5);
}

.honor-x5c .section-magic.is-active .magic-icon1 {
transform: translate(calc(-50% + 23.9583333333vw), calc(-50% - 6.6666666667vw));
opacity: 1;
}

.honor-x5c .section-magic.is-active .magic-icon2 {
transform: translate(calc(-50% + 14.0625vw), calc(-50% - 2.0833333333vw));
opacity: 1;
}

.honor-x5c .section-magic.is-active .copy-wrapper {
transform: translate(calc(-50% - 23.4375vw), calc(-50% + 0vw));
opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-magic.is-active .copy-wrapper {
transform: translate(-50%, calc(-50% - 66.6666666667vw));
}
}

.honor-x5c .section-magic .img-wrapper {
width: 94.3229166667vw;
height: 97.3958333333vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 41.6666666667vw));
transition: all 0.7s ease;
z-index: 10;
}

.honor-x5c .section-magic .magic-icon1 {
width: 17.8993055556vw;
height: 4.5659722222vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 2.0833333333vw), calc(-50% + 6.6666666667vw));
opacity: 0;
transition: all 0.7s ease;
z-index: 11;
}

.honor-x5c .section-magic .magic-icon2 {
width: 34.21875vw;
height: 11.5798611111vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 11.9791666667vw), calc(-50% + 11.25vw));
opacity: 0;
transition: all 0.7s ease;
z-index: 9;
}

.honor-x5c .section-magic .copy-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 23.4375vw), calc(-50% + 10.4166666667vw));
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-magic .copy-wrapper {
width: 80vw;
transform: translate(-50%, calc(-50% - 53.3333333333vw));
text-align: left;
}
}

.honor-x5c .section-magic .copy-wrapper .copy-title {
font-size: 2.9166666667vw;
margin-bottom: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-magic .copy-wrapper .copy-title {
font-size: 7.4666666667vw;
}
}

.honor-x5c .section-magic .copy-wrapper .copy-text {
font-size: 1.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-magic .copy-wrapper .copy-text {
font-size: 3.7333333333vw;
}
}

.honor-x5c .section-camera {
height: 240vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera {
height: 140vh;
}
}

.honor-x5c .section-camera.is-active .copy-wrapper .copy-title {
background-position: 0% 50%;
}

.honor-x5c .section-camera.is-active2 .copy-wrapper {
opacity: 0;
}

.honor-x5c .section-camera.is-active2 .copy-wrapper .copy-title {
background-position: 0% 50%;
}

.honor-x5c .section-camera.is-active2 .img-wrapper .img1 {
opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera.is-active2 .img-wrapper .img2 {
opacity: 1;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera.is-active2 .icon-wrapper {
opacity: 1;
transform: translate(-50%, calc(-50% - 45.3333333333vw));
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-camera.is-active2 .icon-wrapper {
opacity: 1;
transform: translate(-50%, calc(-50% - 72vw));
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-camera.is-active2 .icon-wrapper {
opacity: 1;
transform: translate(calc(-50% - 13.3333333333vw), calc(-50% - 26.6666666667vw)) scale(0.7);
}
}

.honor-x5c .section-camera.is-active3 .copy-wrapper {
opacity: 0;
}

.honor-x5c .section-camera.is-active3 .copy-wrapper .copy-title {
background-position: 0% 50%;
}

.honor-x5c .section-camera.is-active3 .img-wrapper .img1 {
opacity: 1;
}

.honor-x5c .section-camera.is-active3 .img-wrapper .img2 {
opacity: 0.3;
}

.honor-x5c .section-camera.is-active4 .copy-wrapper {
opacity: 0;
}

.honor-x5c .section-camera.is-active4 .copy-wrapper .copy-title {
background-position: 0% 50%;
}

.honor-x5c .section-camera.is-active4 .img-wrapper {
transform: translate(calc(-50% - 10.4166666667vw), calc(-50% + 57.2916666667vw));
}

.honor-x5c .section-camera.is-active4 .img-wrapper .img1 {
opacity: 1;
}

.honor-x5c .section-camera.is-active4 .img-wrapper .img2 {
opacity: 1;
}

.honor-x5c .section-camera.is-active4 .icon-wrapper {
opacity: 1;
transform: translate(calc(-50% - 15.625vw), calc(-50% - 3.6458333333vw));
}

.honor-x5c .section-camera #trigger-camera-2 {
position: absolute;
top: 40vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera #trigger-camera-2 {
top: 20vh;
}
}

.honor-x5c .section-camera #trigger-camera-3 {
position: absolute;
top: 80vh;
}

.honor-x5c .section-camera #trigger-camera-4 {
position: absolute;
top: 120vh;
}

.honor-x5c .section-camera .copy-wrapper {
width: 52.0833333333vw;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .copy-wrapper {
width: 93.3333333333vw;
}
}

.honor-x5c .section-camera .copy-wrapper .copy-title {
font-size: 16.6666666667vw;
line-height: 1;
background-image: url(https://www-file.honor.com/content/dam/honor/global/products/smartphone/honor-x5c/imgs/section-camera/text-bg.jpg);
background-size: 300% 100%;
background-repeat: no-repeat;
background-position: 100% 50%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: all 1.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .copy-wrapper .copy-title {
font-size: 17.0666666667vw;
line-height: 1.1;
}
}

.honor-x5c .section-camera .copy-wrapper .copy-text {
font-size: 4.375vw;
line-height: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .copy-wrapper .copy-text {
font-size: 8.5333333333vw;
}
}

.honor-x5c .section-camera .img-wrapper {
width: 242.5vw;
height: 242.5vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 31.25vw), calc(-50% + 57.2916666667vw));
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .img-wrapper {
width: 489.3333333333vw;
height: 489.3333333333vw;
transform: translate(calc(-50% - 53.3333333333vw), calc(-50% + 133.3333333333vw));
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honor-x5c .section-camera .img-wrapper {
width: 489.3333333333vw;
height: 489.3333333333vw;
transform: translate(calc(-50% - 53.3333333333vw), calc(-50% + 106.6666666667vw));
}
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honor-x5c .section-camera .img-wrapper {
transform: translate(calc(-50% - 26.6666666667vw), calc(-50% + 74.6666666667vw)) scale(0.6);
}
}

.honor-x5c .section-camera .img-wrapper .img1 {
width: 242.5vw;
height: 242.5vw;
position: absolute;
left: 0;
top: 0;
z-index: 10;
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .img-wrapper .img1 {
width: 489.3333333333vw;
height: 489.3333333333vw;
}
}

.honor-x5c .section-camera .img-wrapper .img2 {
width: 242.5vw;
height: 242.5vw;
position: absolute;
left: 0;
top: 0;
z-index: 5;
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .img-wrapper .img2 {
width: 489.3333333333vw;
height: 489.3333333333vw;
}
}

.honor-x5c .section-camera .icon-wrapper {
position: absolute;
width: 26.0416666667vw;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 15.625vw), -50%);
display: flex;
align-items: center;
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .icon-wrapper {
width: 80vw;
transform: translate(-50%, calc(-50% - 53.3333333333vw));
}
}

.honor-x5c .section-camera .icon-wrapper .camera-icon1 {
width: 5.2083333333vw;
height: 5.2083333333vw;
margin-right: 1.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .icon-wrapper .camera-icon1 {
width: 16vw;
height: 16vw;
margin-right: 3.7333333333vw;
}
}

.honor-x5c .section-camera .icon-wrapper h3 {
font-size: 4.1666666667vw;
background: linear-gradient(180deg, #8fc6b0 0%, #589388 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .icon-wrapper h3 {
font-size: 12.8vw;
}
}

.honor-x5c .section-camera .icon-wrapper p {
font-size: 1.25vw;
opacity: 0.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-camera .icon-wrapper p {
font-size: 3.7333333333vw;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved {
height: 189.3333333333vw;
background: linear-gradient(0deg, #f9feff 0%, #fafffd 100.65%);
}

.honor-x5c .section-improved .sticky-container {
height: 189.3333333333vw;
}
}

.honor-x5c .section-improved.is-active-1 .img-wrapper .item2 {
opacity: 1;
}

.honor-x5c .section-improved.is-active-1 .copy-wrapper .line-btn-wrapper .line-container .item-line {
transform: translateY(3.6458333333vw);
}

.honor-x5c .section-improved.is-active-1 .copy-wrapper .line-btn-wrapper .line-btn-item .line-btn1 {
opacity: 0.4;
}

.honor-x5c .section-improved.is-active-1 .copy-wrapper .line-btn-wrapper .line-btn-item .line-btn2 {
opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved.is-active-1 .pagination-wrapper-outside .pagination {
width: 16vw;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved.is-active-2 .pagination-wrapper-outside .pagination {
width: 32vw;
}
}

.honor-x5c .section-improved .sticky-container {
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved .sticky-container {
flex-direction: column;
}
}

.honor-x5c .section-improved .copy-wrapper {
margin-right: 4.7708333333vw;
width: 26.1979166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved .copy-wrapper {
width: 78.6666666667vw;
margin-right: 0;
}
}

.honor-x5c .section-improved .copy-wrapper .copy-title {
font-size: 2.9166666667vw;
margin-bottom: 8.8541666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved .copy-wrapper .copy-title {
font-size: 7.4666666667vw;
}
}

.honor-x5c .section-improved .copy-wrapper .line-btn-wrapper {
display: flex;
}

.honor-x5c .section-improved .copy-wrapper .line-btn-wrapper .line-container {
position: relative;
width: 0.4166666667vw;
height: 7.2916666667vw;
border-radius: 0.5208333333vw;
background-color: #d9d9d9;
}

.honor-x5c .section-improved .copy-wrapper .line-btn-wrapper .line-container .item-line {
position: absolute;
left: 0;
top: 0;
width: 0.4166666667vw;
height: 3.6458333333vw;
border-radius: 0.5208333333vw;
background-color: #589388;
transition: all 0.7s ease;
}

.honor-x5c .section-improved .copy-wrapper .line-btn-wrapper .line-btn-item .line-btn {
display: flex;
font-size: 1.3vw;
margin: 1.1458333333vw 0.9375vw 0;
}

.honor-x5c .section-improved .copy-wrapper .line-btn-wrapper .line-btn-item .line-btn .ai-star {
width: 2.2619791667vw;
height: 1.1833333333vw;
transform: translateY(15%);
}

.honor-x5c .section-improved .copy-wrapper .line-btn-wrapper .line-btn-item .line-btn2 {
margin-top: 1.71875vw;
opacity: 0.4;
}

.honor-x5c .section-improved .img-wrapper {
width: 36.4583333333vw;
height: 38.5416666667vw;
position: relative;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved .img-wrapper {
width: 78.6666666667vw;
height: 106.6666666667vw;
overflow: initial;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved .img-wrapper .item {
position: relative;
}

.honor-x5c .section-improved .img-wrapper .item .item-text {
position: absolute;
font-size: 4.1vw;
top: 5.3333333333vw;
left: 5.8666666667vw;
}

.honor-x5c .section-improved .img-wrapper .item .item-text .ai-star {
width: 7.7333333333vw;
height: 4.0533333333vw;
display: inline-block;
transform: translateY(-15%);
}
}

.honor-x5c .section-improved .img-wrapper .item2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-improved .img-wrapper .item2 {
position: relative;
opacity: 1;
}
}

.honor-x5c .section-improved .btn-swiper-outside {
display: flex;
width: 74.6666666667vw;
justify-content: space-between;
z-index: 10;
position: absolute;
left: 12.8vw;
bottom: 10.6666666667vw;
}

.honor-x5c .section-improved .btn-swiper-outside .swiperBtn {
width: 10.6666666667vw;
height: 10.6666666667vw;
}

.honor-x5c .section-improved .btn-swiper-outside .swiperBtn.swiper-button-disabled {
opacity: 0.3;
}

.honor-x5c .section-improved .pagination-wrapper-outside {
width: 32vw;
height: 0.2666666667vw;
background-color: #a7a7a7;
position: absolute;
left: 34.1333333333vw;
bottom: 16vw;
}

.honor-x5c .section-improved .pagination-wrapper-outside .pagination {
position: absolute;
width: 16vw;
height: 0.5333333333vw;
left: 0;
top: -0.2vw;
background-color: #000;
border-radius: 8vw;
transition: all 0.5s ease;
}

.honor-x5c .section-experience {
text-align: center;
height: 200vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-experience {
height: 213.3333333333vw;
background: linear-gradient(0deg, #f9feff 0%, #fafffd 100.65%);
}

.honor-x5c .section-experience .sticky-container {
height: 213.3333333333vw;
}
}

.honor-x5c .section-experience .sticky-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.honor-x5c .section-experience.is-active .img-mob-wrapper .item .experience-icon1 {
transform: scale(0.75) translateX(-13.3333333333vw);
opacity: 0;
}

.honor-x5c .section-experience.is-active .img-mob-wrapper .item .img1-one {
opacity: 1;
}

.honor-x5c .section-experience.is-active .img-mob-wrapper .item .img1-two {
opacity: 1;
transition-delay: 0.5s;
}

.honor-x5c .section-experience.is-active-2 .pagination-wrapper-experience .pagination {
width: 32vw;
}

.honor-x5c .section-experience.is-active-2 .img-mob-wrapper .item .experience-icon3 {
animation: push 0.5s ease 2;
animation-fill-mode: forwards;
opacity: 0;
transition-delay: 1s;
}

.honor-x5c .section-experience.is-active-2 .img-mob-wrapper .item .img3-wrapper .img3 {
animation: move 0.5s ease 2;
animation-fill-mode: forwards;
opacity: 0;
transition-delay: 1s;
}

.honor-x5c .section-experience.is-active-2 .img-mob-wrapper .item .img4 {
opacity: 1;
transform: scale(0.45);
transform-origin: 0% 100%;
transition: opacity 0.7s ease 1s, transform 0.5s ease 1.4s;
}

.honor-x5c .section-experience.is-active2 .img-wrapper .item .img1-two {
opacity: 1;
}

.honor-x5c .section-experience #trigger-experience-2 {
position: absolute;
top: 40vh;
}

.honor-x5c .section-experience #trigger-experience-3 {
position: absolute;
top: 80vh;
}

.honor-x5c .section-experience .copy-title {
font-size: 2.9166666667vw;
margin-top: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .section-experience .copy-title {
font-size: 7.4666666667vw;
margin-top: 8vw;
transform: translateY(10.6666666667vw);
}
}

.honor-x5c .section-experience .img-wrapper {
display: flex;
width: 70.3125vw;
justify-content: space-between;
margin: 2.6041666667vw auto 0;
}

.honor-x5c .section-experience .img-wrapper .item {
width: 34.375vw;
height: 39.0625vw;
background: #effdf9;
border-radius: 1.25vw;
position: relative;
overflow: hidden;
}

.honor-x5c .section-experience .img-wrapper .item .item-text {
width: 24.1041666667vw;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 2.0833333333vw;
z-index: 20;
}

.honor-x5c .section-experience .img-wrapper .item .item-text h3 {
font-size: 1.7vw;
}

.honor-x5c .section-experience .img-wrapper .item .item-text p {
font-size: 0.9375vw;
opacity: 0.6;
margin-top: 1.0416666667vw;
}

.honor-x5c .section-experience .img-wrapper .item .img1 {
width: 34.375vw;
height: 31.40625vw;
position: absolute;
left: 0;
bottom: 0;
}

.honor-x5c .section-experience .img-wrapper .item .img1-one {
width: 34.375vw;
height: 31.40625vw;
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
}

.honor-x5c .section-experience .img-wrapper .item .img1-two {
width: 34.375vw;
height: 31.40625vw;
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
transition: all 0.5s ease;
}

.honor-x5c .section-experience .img-wrapper .item .experience-icon1 {
position: absolute;
left: 22.2395833333vw;
top: 17.7083333333vw;
width: 9.5833333333vw;
height: 15.3993055556vw;
z-index: 10;
}

.honor-x5c .section-experience .img-wrapper .item .experience-icon2 {
position: absolute;
left: 22.2395833333vw;
top: 17.7083333333vw;
width: 9.5833333333vw;
height: 15.3993055556vw;
z-index: 8;
}

.honor-x5c .section-experience .img-wrapper .item .img2 {
width: 34.375vw;
height: 39.0625vw;
position: absolute;
top: 0;
left: 0;
}

.honor-x5c .section-experience .img-wrapper .item .img3 {
width: 31.25vw;
height: 31.25vw;
position: absolute;
left: 0.6770833333vw;
top: 11.1458333333vw;
z-index: 10;
transform: rotate(5deg);
transform-origin: 50% 100%;
}

.honor-x5c .section-experience .img-wrapper .item .experience-icon3 {
width: 6.5104166667vw;
height: 6.5104166667vw;
position: absolute;
top: 23.2291666667vw;
left: 13.6458333333vw;
z-index: 9;
}

.honor-x5c .section-experience .img-wrapper .item .img4 {
width: 13.4375vw;
height: 24.21875vw;
position: absolute;
left: 10.46875vw;
bottom: 0;
opacity: 0;
transform-origin: 0% 100%;
}

.honor-x5c .section-experience .img-mob-wrapper {
width: 89.76vw;
height: 186.6666666667vw;
margin: 0 auto;
}

.honor-x5c .section-experience .img-mob-wrapper .item {
position: relative;
}

.honor-x5c .section-experience .img-mob-wrapper .item .img {
position: absolute;
width: 89.76vw;
height: 153.2266666667vw;
top: 0;
left: 0;
}

.honor-x5c .section-experience .img-mob-wrapper .item .img1-one,
.honor-x5c .section-experience .img-mob-wrapper .item .img1-two {
opacity: 0;
transition: all 0.7s ease;
}

.honor-x5c .section-experience .img-mob-wrapper .item .experience-icon1 {
position: absolute;
top: 0;
left: 0;
width: 89.76vw;
height: 153.2266666667vw;
transition: all 0.5s ease;
}

.honor-x5c .section-experience .img-mob-wrapper .item .img2 {
transform: scale(1.1) translateY(5.3333333333vw);
}

.honor-x5c .section-experience .img-mob-wrapper .item .experience-icon3 {
width: 20.8vw;
height: 20.8vw;
position: absolute;
top: 64vw;
left: 34.6666666667vw;
transition: all 0.5s ease;
}

.honor-x5c .section-experience .img-mob-wrapper .item .img3-wrapper {
width: 95.7333333333vw;
height: 114.6666666667vw;
overflow: hidden;
position: absolute;
top: 26.6666666667vw;
left: 0;
}

.honor-x5c .section-experience .img-mob-wrapper .item .img3-wrapper .img3 {
width: 95.7333333333vw;
height: 114.6666666667vw;
position: absolute;
left: -5.3333333333vw;
top: 0vw;
transform: rotate(5deg);
transform-origin: 0% 100%;
transition: all 0.5s ease;
}

@keyframes push {
0% {
transform: scale(1);
}

50% {
transform: scale(1.25);
}

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

@keyframes move {
0% {
transform: rotate(5deg);
}

50% {
transform: rotate(0deg);
}

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

.honor-x5c .section-experience .img-mob-wrapper .item .img4 {
width: 40.2666666667vw;
height: 85.8666666667vw;
position: absolute;
top: 37.3333333333vw;
left: 24.5333333333vw;
opacity: 0;
transition: opacity 0.7s ease, transform 0.5s ease;
}

.honor-x5c .section-experience .img-mob-wrapper .item .item-text {
position: absolute;
width: 69.3333333333vw;
top: 148vw;
left: 10.6666666667vw;
}

.honor-x5c .section-experience .img-mob-wrapper .item .item-text h3 {
font-size: 4.8vw;
}

.honor-x5c .section-experience .img-mob-wrapper .item .item-text p {
font-size: 3.2vw;
opacity: 0.6;
margin-top: 1.3333333333vw;
}

.honor-x5c .section-experience .btn-swiper-experience {
display: flex;
width: 74.6666666667vw;
justify-content: space-between;
z-index: 10;
position: absolute;
left: 12.8vw;
bottom: 10.6666666667vw;
}

.honor-x5c .section-experience .btn-swiper-experience .swiperBtn {
width: 10.6666666667vw;
height: 10.6666666667vw;
}

.honor-x5c .section-experience .btn-swiper-experience .swiperBtn.swiper-button-disabled {
opacity: 0.3;
}

.honor-x5c .section-experience .pagination-wrapper-experience {
width: 32vw;
height: 0.2666666667vw;
background-color: #a7a7a7;
position: absolute;
left: 34.1333333333vw;
bottom: 16vw;
}

.honor-x5c .section-experience .pagination-wrapper-experience .pagination {
position: absolute;
width: 16vw;
height: 0.5333333333vw;
left: 0;
top: -0.2vw;
background-color: #000;
border-radius: 8vw;
transition: all 0.5s ease;
}

.honor-x5c .honor-x5c-mobShow {
display: none !important;
}

.honor-x5c .honor-x5c-inline-mobShow {
display: none !important;
}

.honor-x5c .honor-x5c-flex-mobShow {
display: none !important;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .honor-x5c-mobShow {
display: block !important;
}

.honor-x5c .honor-x5c-flex-mobShow {
display: flex !important;
}

.honor-x5c .honor-x5c-inline-mobShow {
display: inline-block !important;
}

.honor-x5c .honor-x5c-pcShow {
display: none !important;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) and (min-width: 501px) {
.honor-x5c .honor-x5c-padHide {
display: none !important;
}

.honor-x5c .honor-x5c-padShow {
display: block !important;
}
}

.honor-x5c .popup {
position: fixed;
top: 52px;
left: 0;
width: 100%;
height: 100%;
background: rgb(0, 0, 0);
display: none;
z-index: 99999;
}

.honor-x5c .popup.is-active {
display: block;
}

.honor-x5c .popup .popupcloseBtn {
position: absolute;
top: calc(15vh + 0.2604166667vw);
right: -4.5833333333vw;
width: 2.2916666667vw;
height: 2.2916666667vw;
display: block;
cursor: pointer;
mix-blend-mode: difference;
overflow: hidden;
clip-path: inset(1px);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .popup .popupcloseBtn {
right: -8vw;
width: 5.3333333333vw;
height: 5.3333333333vw;
}
}

.honor-x5c .popup .popupcloseBtn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 3.2291666667vw;
height: 1px;
background-color: #fff;
transform: rotate(45deg);
transform-origin: 0% 0%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .popup .popupcloseBtn::before {
width: 8.5333333333vw;
}
}

.honor-x5c .popup .popupcloseBtn::after {
content: "";
position: absolute;
bottom: -0.1041666667vw;
left: -0.1041666667vw;
width: 3.2291666667vw;
height: 1px;
background-color: #fff;
transform: rotate(-45deg);
transform-origin: 0% 0%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .popup .popupcloseBtn::after {
width: 8.5333333333vw;
}
}

.honor-x5c .popup .popup-container {
position: relative;
width: 70%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}

.honor-x5c .popup .popup-container.is-video .videoWrapper {
display: block;
}

.honor-x5c .popup .videoWrapper {
display: none;
height: 70%;
}

.honor-x5c .popup .videoWrapper #video-popup {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
border-radius: 0.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honor-x5c .popup .videoWrapper.spec {
height: auto;
}
}

.section-note {
padding: 5.2083333333vw 0;
background-color: #fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note {
padding: 10.6666666667vw 0;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.section-note {
padding: 21.3333333333vw 0;
}
}

.section-note.ff-regular {
font-family: "HONOR Sans World Regular", sans-serif;
}

.section-note .note-container {
width: 62.5vw;
margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note .note-container {
width: 84vw;
}
}

.section-note .line {
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.6);
}

.section-note .decimal {
list-style: decimal;
padding-left: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note .decimal {
padding-left: 2.1333333333vw;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.section-note .decimal {
padding-left: 4vw;
}
}

.section-note .decimal li {
margin-bottom: 0.5208333333vw;
list-style: decimal;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note .decimal li {
margin-bottom: 1.3333333333vw;
}
}

.section-note .decimal li:not(last-of-type) {
margin-bottom: 0;
}

.section-note .pdp-star {
list-style: none;
padding-left: 1.5625vw;
margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note .pdp-star {
padding-left: 2.1333333333vw;
}
}

@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.section-note .pdp-star {
padding-left: 4vw;
}
}

.section-note .pdp-star li::after {
content: "*";
position: absolute;
top: 0;
left: 0;
transform: translateX(calc(-100% - 0.1041666667vw));
}

.section-note p {
padding: 0 0.5208333333vw;
margin: 3.6458333333vw 0 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note p {
padding: 0;
margin: 9.3333333333vw 0 4vw;
}
}

.section-note p,
.section-note li {
position: relative;
font-size: 14px;
line-height: 1.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {

.section-note p,
.section-note li {
font-size: 12px;
}
}

.section-note .nowrap {
white-space: nowrap;
}

.whole-scene-component {
padding: 5.2083333333vw 0 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.whole-scene-component {
padding: 21.3333333333vw 0 10vw;
}
}

/*# sourceMappingURL=style.css.map */



.honor-x5c .section-kv .productname {
width: 100%;
height: 3.3691666667vw;
margin: 0 auto 2vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.honor-x5c .section-kv .productname {
width: 100%;
width: 60.5333333333vw;
height: auto;
}
}