< type="text/css">@charset "UTF-8";
html,
body {
padding: 0;
margin: 0;
overflow: initial;
}
.brand-2024 {
font-family: 'HONOR Sans Brand Regular';
background: #f9f9f9;
}
.brand-2024 .blur-up {
filter: blur(20px);
transition: filter 0.2s;
}
.brand-2024 .blur-up.lazyloaded {
filter: blur(0);
}
.brand-2024 section,
.brand-2024 div,
.brand-2024 h2,
.brand-2024 h3,
.brand-2024 h4,
.brand-2024 ul,
.brand-2024 ol,
.brand-2024 li,
.brand-2024 p,
.brand-2024 form,
.brand-2024 table,
.brand-2024 th,
.brand-2024 td,
.brand-2024 figure,
.brand-2024 button {
border: none;
margin: 0px;
padding: 0px;
color: inherit;
font-weight: normal;
box-sizing: border-box;
}
.brand-2024 h2,
.brand-2024 h3,
.brand-2024 h4 {
line-height: 1.3;
}
.brand-2024 p,
.brand-2024 span {
line-height: 1.3;
font-weight: 400;
}
.brand-2024 button {
background-color: transparent;
cursor: pointer;
}
.brand-2024 sup {
position: relative !important;
font-size: 50% !important;
line-height: 0 !important;
vertical-align: super !important;
top: 0 !important;
}
.brand-2024 sup.static {
position: static !important;
}
.brand-2024 .oneline {
white-space: nowrap;
}
.brand-2024 sup.smaller {
font-size: 40% !important;
top: -0.78125vw !important;
}
.brand-2024 picture,
.brand-2024 img,
.brand-2024 canvas {
display: block;
width: 100%;
height: 100%;
max-width: none;
}
.brand-2024 picture{
border-radius: 1.25vw;
overflow: hidden;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px){
.brand-2024 picture{
border-radius: 3.2vw;
}
}
.brand-2024 a {
color: inherit;
text-decoration: none;
}
.brand-2024 *,
.brand-2024 *::before,
.brand-2024 *::after {
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
text-rendering: optimizeLegibility;
}
.brand-2024 *:focus,
.brand-2024 *:active {
outline: none;
}
.brand-2024 .object-fit {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.brand-2024 .ff-demiBold {
font-family: 'HONOR Sans Brand DemiBold';
font-weight: 600;
}
.brand-2024 .ff-medium {
font-family: 'HONOR Sans Brand Medium';
font-weight: 400;
}
.brand-2024 .mob-show {
display: none !important;
}
.brand-2024 .mob-show-inline {
display: none !important;
}
.brand-2024 .pc-show-inline {
display: inline-block !important;
}
.honor-v3 .btn {
background-color: #000;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 400;
padding: 12px 24px;
border-radius: 40px;
border: 2px solid #000;
}
.honor-v3 .btn--white {
background-color: #fff;
color: #000;
border-color: #fff;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.brand-2024 .mob-show {
display: block !important;
}
.brand-2024 .mob-show-inline {
display: inline-block !important;
}
.brand-2024 .pc-show {
display: none !important;
}
.brand-2024 .pc-show-inline {
display: none !important;
}
}
#brand-2024 .tit-warper {
width: 26.0416666667vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .tit-warper {
width: 93.3333333333vw;
}
}
#brand-2024 .tit-warper .tit {
width: 100%;
text-align: center;
font-size: 1.875vw;
color: #000;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .tit-warper .tit {
font-size: 5.3333333333vw;
}
}
#brand-2024 .tit-warper .tit-line {
width: 2.0833333333vw;
height: 2px;
background: #000;
margin-top: 1.0416666667vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .tit-warper .tit-line {
margin-top: 3.2vw;
width: 8vw;
}
}
#brand-2024 .bottom-des {
width: 55.0833333333vw;
display: flex;
justify-content: center;
align-items: center;
margin: 3.125vw auto;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .bottom-des {
width: 93.3333333333vw;
/* margin: 8vw auto; */
margin: 8vw auto;
}
}
#brand-2024 .bottom-des .des {
width: -moz-max-content;
width: max-content;
padding: 0 1.0416666667vw;
font-size: 1.5625vw;
color: #000;
opacity: 0.8;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .bottom-des .des {
text-align: center;
padding: 0 2.6666666667vw;
font-size: 4.8vw;
}
}
#brand-2024 .bottom-des .left-icon {
width: 3.125vw;
height: 2px;
background: linear-gradient(90deg#9199a3 0%rgba(1151151150) 100%);
transform: rotate(180deg);
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .bottom-des .left-icon {
width: 10.6666666667vw;
}
}
#brand-2024 .bottom-des .right-icon {
width: 3.125vw;
height: 2px;
background: linear-gradient(90deg#9199a3 0%rgba(1151151150) 100%);
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .bottom-des .right-icon {
width: 10.6666666667vw;
}
}
#brand-2024 .sec1 {
height: 50vh;
background: yellow;
}
#brand-2024 .sec2 {
background: #000;
padding: 6.25vw 0 0 0;
color: #fff;
}
#brand-2024 .sec2 .tit-warper .tit {
color: #fff;
}
#brand-2024 .sec2 .tit-warper .tit-line {
background: #fff;
}
#brand-2024 .sec2-last {
padding-bottom: 7.8125vw;
}
#brand-2024 .sec2 .sec2-des {
width: 41.6666666667vw;
font-size: 1.0416666667vw;
margin: 0 auto;
margin-top: 3.6458333333vw;
text-align: center;
line-height: 1.8;
margin-bottom: 5.2083333333vw;
}
#brand-2024 .sec2 .sec2-dots {
display: flex;
justify-content: center;
align-items: center;
margin-top: 3.1666666667vw;
width: 60.0833333333vw;
}
#brand-2024 .sec2 .sec2-dots .item {
width: -moz-max-content;
width: max-content;
margin: 0 2.6041666667vw;
}
#brand-2024 .sec2 .sec2-dots .item .num {
font-size: 2.1875vw;
text-align: center;
color: #fff;
}
#brand-2024 .sec2 .sec2-dots .item .item-des {
font-size: 0.7291666667vw;
margin-top: 0.5208333333vw;
color: #fff;
text-align: center;
}
#brand-2024 .sec2 .sec2-dots .line {
width: 1px;
height: 2.0833333333vw;
background: #d9d9d9;
}
#brand-2024 .oneline {
white-space: nowrap;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec2 {
padding: 10.25vw 0 0 0;
}
#brand-2024 .sec2-last {
padding-bottom: 20vw;
}
}
#brand-2024 .sec2 .sec2-des {
width: 41.6666666667vw;
font-size: 1.0416666667vw;
margin: 3.6458333333vw auto 0 auto;
text-align: center;
line-height: 1.8;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec2 .sec2-des {
width: 93.3333333333vw;
margin: 8vw auto 0 auto;
font-size: 3.7333333333vw;
}
}
#brand-2024 .sec2 .sec2-dots {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 4.1666666667vw;
width: 60.0833333333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec2 .sec2-dots {
width: 93.3333333333vw;
margin-top: 2.6666666667vw;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
}
#brand-2024 .sec2 .sec2-dots .item {
width: -moz-max-content;
width: max-content;
margin: 0 2.6041666667vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec2 .sec2-dots .item {
width: 40vw;
margin: 8vw 0vw;
}
}
#brand-2024 .sec2 .sec2-dots .item .num {
font-size: 2.1875vw;
text-align: center;
color: #fff;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec2 .sec2-dots .item .num {
/* font-size: 8.5333333333vw; */
font-size: 6.666667vw;
}
}
#brand-2024 .sec2 .sec2-dots .item .item-des {
font-size: 0.7291666667vw;
margin-top: 0.5208333333vw;
color: #fff;
text-align: center;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec2 .sec2-dots .item .item-des {
/* font-size: 2.6666666667vw; */
font-size: 3.333333vw;
margin-top: 2.6666666667vw;
}
}
#brand-2024 .sec2 .sec2-dots .line {
width: 1px;
height: 2.0833333333vw;
background: #d9d9d9;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec2 .sec2-dots .line {
opacity: 0;
}
}
/* add2 */
#brand-2024 .sticky-container {
height: calc(100vh - 52px);
overflow: hidden;
position: sticky;
top: 52px;
display: flex;
justify-content: center;
align-items: center;
}
#brand-2024 .sticky-container .sec2-canvas {
width: 90vw;
height: 56.458333vw;
margin: 0 auto;
object-fit: cover;
transform: scale(0.8);
}
#brand-2024 .section-add2 {
height: 400vh;
color: #fff;
position: relative;
background-color: #000;
position: relative;
z-index: 2;
}
#brand-2024 .section-add2 .trigger1 {
top: 0;
position: absolute;
}
#brand-2024 .section-add2 h2 {
font-size: 2.083333vw;
}
#brand-2024 .section-add2 .text1 {
font-size: 1.041667vw;
margin-top: 0.833333vw;
}
#brand-2024 .section-add2 .add2-text-wrap {
padding-top: 2.5vw;
-webkit-mask-image: linear-gradient(to bottomtransparent 0%#000 20%#000 100%);
mask-image: linear-gradient(to bottomtransparent 0%#000 20%#000 100%);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%calc(-50% + 14.5vw)) translateY(5vw);
transition: all 0.7s;
opacity: 0;
}
#brand-2024 .section-add2 .add2-text {
width: 47.395833vw;
font-size: 1.041667vw;
/* bottom: 2.333333vw; */
transition: all 0.7s;
text-align: center;
}
#brand-2024 .section-add2 .txts-wrapper {
width: 47.395833vw;
margin: 0 auto;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%calc(-50% + 16vw)) translateY(5vw);
/* bottom: 2.333333vw; */
opacity: 0;
transition: all 0.7s;
}
#brand-2024 .section-add2.step1 .add2-text-wrap {
opacity: 1;
transform: translate(-50%calc(-50% + 14.5vw));
}
#brand-2024 .section-add2.step2 .add2-text {
transform: translateY(-100%);
opacity: 0;
}
#brand-2024 .section-add2.step2 .txts-wrapper {
transform: translate(-50%calc(-50% + 16vw));
opacity: 1;
}
#brand-2024 .section-add2.step3 .txts-wrapper {
transition: all 0s;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .section-add2 {
padding-bottom: 0;
height: 150vh;
clip-path: inset(0);
}
#brand-2024 .sticky-container .sec2-canvas {
width: 100vw;
height: 100vw;
transform: scale(1) translateY(24%);
}
#brand-2024 .section-add2 .add2-text {
transition: all 0s;
}
#brand-2024 .section-add2 .sticky-container {
height: auto;
overflow: visible;
overflow-x: clip;
display: block;
}
#brand-2024 .section-add2 h2,
#brand-2024 .section-add1 h2 {
font-size: 5.333333vw;
}
#brand-2024 .section-add2 .text1,
#brand-2024 .section-add1 .text1 {
font-size: 3.733333vw;
margin-top: 2.133333vw;
}
#brand-2024 .section-add2 .add2-text-wrap {
transform: translateX(-50%);
top: auto;
bottom: -50vw;
padding-top: 5vw;
-webkit-mask-image: linear-gradient(to bottomtransparent 0%#000 10%#000 100%);
mask-image: linear-gradient(to bottomtransparent 0%#000 10%#000 100%);
}
#brand-2024 .section-add2 .add2-text {
width: 89.333333vw;
font-size: 3.733333vw;
opacity: 1;
line-height: 1.6;
}
#brand-2024 .section-add2 .txts-wrapper,
#brand-2024 .section-add1 .txts-wrapper {
width: 89.333333vw;
position: static;
margin: 0 auto 0;
position: relative;
z-index: 3;
text-align: center;
}
#brand-2024 .section-add2.step1 .add2-text-wrap {
transform: translateX(-50%);
}
#brand-2024 .section-add2.step1 .add2-text {
opacity: 1;
}
#brand-2024 .section-add2.step1 .txts-wrapper {
transform: translateX(0);
opacity: 1;
}
#brand-2024 .section-add2.step2 .add2-text {
opacity: 0;
transform: translateY(-110%);
}
}
@media (min-aspect-ratio: 661/759) and (max-width: 1000px) {
#brand-2024 .section-add2.step2 .add2-text {
}
}
@media (aspect-ratio: 768/1024)(aspect-ratio: 1024/1366) {
#brand-2024 .section-add2 {
height: 170vh;
}
#brand-2024 .section-add2 .add2-text-wrap {
bottom: -20vw;
}
#brand-2024 .section-add2.step2 .add2-text {
transform: translateY(0);
opacity: 1;
transition: all 0s;
}
}
/* add1 */
#brand-2024 .sec3-wrap {
margin-top: -100vh;
transform: translateY(100vh);
position: relative;
z-index: 4;
background: #f9f9f9;
}
#brand-2024 .add1-sec2 .add1-trigger {
top: 0;
position: absolute;
background-color: #000;
}
#brand-2024 .add1-sec2 {
height: calc(43.29vw + 500vh);
position: relative;
background-color: #000;
z-index: 3;
will-change: margin-top;
}
#brand-2024 .section-add1 {
background: #000;
color: #fff;
padding-bottom: 2.083333vw;
position: relative;
z-index: 3;
}
#brand-2024 .add1-sec2-sticky {
position: sticky;
/* top: -15vw; */
top: calc(100vh - (var(--height) * 1px));
}
#brand-2024 .section-add1 .swiper-container {
width: 60.625vw;
margin: 0 auto 0;
}
#brand-2024 .section-add1 .swiper-container .slide-img {
clip-path: inset(0 0 1px);
height: 34.13vw;
border-radius: 1.25vw;
overflow: hidden;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px){
#brand-2024 .section-add1 .swiper-container .slide-img{
border-radius: 3.2vw;
}
}
#brand-2024 .section-add1 .swiper-container .slide-texts {
text-align: center;
}
#brand-2024 .section-add1 .swiper-container .slide-text1 {
font-size: 1.666667vw;
margin-top: 1.875vw;
}
#brand-2024 .section-add1 .swiper-container .slide-text2 {
font-size: 1.041667vw;
margin-top: 0.625vw;
}
#brand-2024 .section-add1 .swiper-pagination {
bottom: auto;
top: 32.770833vw;
display: flex;
justify-content: center;
column-gap: 0.416667vw;
}
#brand-2024 .section-add1 .swiper-pagination .swiper-pagination-bullet {
width: 4.583333vw;
height: 2px;
border-radius: 0;
background: #fff;
opacity: 0.5;
backdrop-filter: blur(3px);
}
#brand-2024 .section-add1 .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
#brand-2024 .section-add1 .swiper-button-next,
#brand-2024 .section-add1 .swiper-button-prev {
width: 2.5vw;
height: 2.5vw;
top: 17.03125vw;
transform: translateY(-50%);
}
#brand-2024 .swiper-button-next.swiper-button-disabled,
#brand-2024 .swiper-button-prev.swiper-button-disabled {
opacity: 0.6;
}
#brand-2024 .swiper-button-next:after,
#brand-2024 .swiper-container-rtl .swiper-button-prev:after,
#brand-2024 .swiper-button-prev:after,
#brand-2024 .swiper-container-rtl .swiper-button-next:after {
content: '';
}
#brand-2024 .swiper-button-next,
#brand-2024 .swiper-button-prev {
background: none;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .add1-sec2 {
height: calc(111.8vw + 250vh);
position: relative;
z-index: 3;
margin-top: -8vw;
}
#brand-2024 .add1-sec2-sticky {
/* top: -39.61vw; */
}
#brand-2024 .section-add1 {
padding: 0 0 5.333333vw;
}
#brand-2024 .section-add1 .swiper-container {
width: 84vw;
margin-top: 6.666667vw;
}
#brand-2024 .section-add1 .swiper-container .slide-img {
height: 50.169vw;
}
#brand-2024 .section-add1 .swiper-container .slide-text1 {
font-size: 4.266667vw;
margin-top: 4.266667vw;
}
#brand-2024 .section-add1 .swiper-container .slide-text2 {
font-size: 3.2vw;
margin-top: 2.133333vw;
}
#brand-2024 .section-add1 .swiper-pagination {
top: 48vw;
column-gap: 1.066667vw;
}
#brand-2024 .section-add1 .swiper-pagination .swiper-pagination-bullet {
width: 11.733333vw;
height: 2px;
}
#brand-2024 .section-add1 .swiper-button-next,
#brand-2024 .section-add1 .swiper-button-prev,#brand-2024 .sec3 .sec3-part1-mob .buttons .swiper-button-next,#brand-2024 .sec3 .sec3-part1-mob .buttons .swiper-button-prev,#brand-2024 .sec3 .sec3-part4-mob .buttons .swiper-button-next,#brand-2024 .sec3 .sec3-part4-mob .buttons .swiper-button-prev{
position: static;
width: 8.533333vw;
height: 8.533333vw;
transform: translate(0);
}
#brand-2024 .section-add1 .buttons,#brand-2024 .sec3 .sec3-part1-mob .buttons,#brand-2024 .sec3 .sec3-part4-mob .buttons{
margin-top: 8.533333vw;
display: flex;
justify-content: center;
column-gap: 17.066667vw;
}
#brand-2024 .sec3 .sec3-part1-mob .buttons{
margin-top: 7.533333vw;
}
#brand-2024 .sec3 .sec3-part4-mob .buttons{
/* margin-top: 2.533333vw; */
margin-top: 5.333333333333333vw;
position: relative;
z-index: 99;
}
/* .swiper-container-horizontal>.swiper-pagination-bullets{
width: 51.2vw;
} */
#brand-2024 .sec3 .sec3-part1-mob .play,#brand-2024 .sec3 .sec3-part4-mob .play{
background-repeat: no-repeat;
background-position: center;
height: 6.4vw;
width: 6.4vw;
cursor: pointer;
position: absolute;
/* top: 86.4vw; */
z-index: 99;
/* right: 13vw; */
top: 86.4vw;
right: 17.06666666666667vw;
}
#brand-2024 .sec3 .sec3-part4-mob .play{
top: 105.4vw;
right: 13.33333333333333vw;
}
#brand-2024 .sec3 .sec3-part4-mob .play img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#brand-2024 .sec3 .sec3-part1-mob .play img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#brand-2024 .sec3 .sec3-part1-mob .play .sec3-play,#brand-2024 .sec3 .sec3-part4-mob .play .sec3-play{
opacity: 1;
}
#brand-2024 .sec3 .sec3-part1-mob .play .sec3-stop,#brand-2024 .sec3 .sec3-part4-mob .play .sec3-stop{
opacity: 0;
}
#brand-2024 .sec3 .sec3-part1-mob .play.pause .sec3-play,#brand-2024 .sec3 .sec3-part4-mob .play.pause .sec3-play{
opacity: 0;
}
#brand-2024 .sec3 .sec3-part1-mob .play.pause .sec3-stop,#brand-2024 .sec3 .sec3-part4-mob .play.pause .sec3-stop{
opacity: 1;
}
}
@media (min-aspect-ratio: 661/759) and (max-width: 1000px) {
#brand-2024 .add1-sec2 {
height: calc(43.29vw + 600vh);
}
}
@media (aspect-ratio: 768/1024)(aspect-ratio: 1024/1366) {
#brand-2024 .add1-sec2-sticky {
top: -189.61vw;
}
#brand-2024 .add1-sec2{
height: calc(114vw + 270vh);
}
}
@media (aspect-ratio: 1024/768)(aspect-ratio: 1366/1024) {
#brand-2024 .add1-sec2 {
}
}
/* .add3 */
#brand-2024 .section-add3 {
background: #000;
color: #fff;
padding: 6.25vw 0 0;
position: relative;
z-index: 4;
}
#brand-2024 .section-add3 .tit-warper .tit {
color: #fff;
}
#brand-2024 .section-add3 .tit-warper .tit-line {
background: #fff;
}
#brand-2024 .section-add2 .txt-s {
font-size: 1.041667vw;
margin-top: 3.645833vw;
width: 80%;
margin: 3.645833vw auto 0;
text-align: center;
}
#brand-2024 .section-add3 .sec-img {
width: 60.625vw;
height: 34.139vw;
margin: 3.333333vw auto 0;
}
#brand-2024 .section-add3 .list {
margin: 1.666667vw auto 0;
display: flex;
justify-content: center;
flex-wrap: nowrap;
align-items: flex-start;
}
#brand-2024 .section-add3 .list .item {
width: 22.395833vw;
text-align: center;
}
#brand-2024 .section-add3 .list .item-title {
font-size: 1.5625vw;
}
#brand-2024 .section-add3 .list .item-text {
font-size: 0.833333vw;
margin-top: 0.833333vw;
}
#brand-2024 .section-add3 .list .line {
width: 1px;
height: 6.458333vw;
background-color: #fff;
margin: 0 3.958333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .section-add3 .sec-img {
width: 84vw;
height: 47.3vw;
}
#brand-2024 .section-add3 {
padding-top: 10.25vw;
}
#brand-2024 .section-add2 .txt-s {
font-size: 3.7333333333vw;
margin-top: 4vw;
width: 84vw;
}
#brand-2024 .section-add3 .list .item {
width: 36vw;
}
#brand-2024 .section-add3 .list .item-title {
font-size: 4.8vw;
}
#brand-2024 .section-add3 .list .item-text {
font-size: 2.133333vw;
margin-top: 6px;
}
#brand-2024 .section-add3 .list .line {
height: 21.458333vw;
}
}
#brand-2024 .sec3 {
background: #f9f9f9;
padding: 4.1666666667vw 0 7.8125vw 0;
overflow: hidden;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 {
/* padding: 10.6666666667vw 0 2.6666666667vw 0; */
padding: 10.6666666667vw 0 0 0;
}
}
#brand-2024 .sec3 .sec3-part1 {
width: 72.9166666667vw;
/* width: 73.1266666667vw; */
height: 41.6666666667vw;
height: 41.82291666666667vw;
margin: 0 auto;
position: relative;
margin-bottom: 5.2083333333vw;
}
#brand-2024 .sec3 .sec3-part1 .item h3 {
position: absolute;
top: 1.5625vw;
left: 1.5625vw;
font-size: 1.25vw;
color: #fff;
}
#brand-2024 .sec3 .sec3-part1 .part1-item1 {
/* width: 23.75vw; */
width: 23.59375vw;
height: 24.4791666667vw;
position: absolute;
left: 0vw;
top: 0vw;
}
#brand-2024 .sec3 .sec3-part1 .part1-item2 {
/* width: 48.3333333333vw; */
width: 48.28125vw;
height: 11.9270833333vw;
position: absolute;
right: 0vw;
top: 0vw;
}
#brand-2024 .sec3 .sec3-part1 .item {
overflow: hidden;
border-radius: 1.25vw;
}
#brand-2024 .sec3 .sec3-part1 .item img {
transition: all 0.5s;
}
#brand-2024 .sec3 .sec3-part1 .item:hover img {
transform: scale(1.1);
}
#brand-2024 .sec3 .sec3-part1 .part1-item3 {
/* width: 23.75vw; */
width: 23.64583333333333vw;
/* height: 14.1145833333vw; */
height: 14.01041666666667vw;
position: absolute;
/* left: 24.5833333333vw; */
left:24.63541666666667vw;
/* top: 12.8125vw; */
top: 12.96875vw;
}
#brand-2024 .sec3 .sec3-part1 .part1-item4 {
/* width: 23.75vw; */
width: 23.59375vw;
height: 28.8541666667vw;
position: absolute;
right: 0vw;
bottom: 0vw;
}
#brand-2024 .sec3 .sec3-part1 .part1-item5 {
/* width: 23.75vw; */
width: 23.59375vw;
height: 16.3020833333vw;
position: absolute;
left: 0vw;
bottom: 0vw;
}
#brand-2024 .sec3 .sec3-part1 .part1-item6 {
/* width: 23.75vw; */
width: 23.64583333333333vw;
/* height: 13.90625vw; */
height: 13.80208333333333vw;
position: absolute;
/* left: 24.5833333333vw; */
bottom: 0vw;
/* left: 24.79vw; */
left:24.63541666666667vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part1-mob {
width: 84vw;
margin: 0 auto;
/* height: 101.3333333333vw; */
height: 103.4vw;
/* margin-bottom: 16vw; */
margin-bottom: 29.8vw;
}
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper {
width: 84vw;
/* height: 101.3333333333vw; */
/* height: 103.4vw; */
position: relative;
}
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper .swiper-slide {
text-align: center;
background: #f6f7f8;
}
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper .swiper-slide .pic {
width: 84vw;
height: 86.4vw;
border-radius: 3.2vw;
overflow: hidden;
}
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper .swiper-slide .silid-des {
font-size: 4.2666666667vw;
color: #000;
/* margin-top: 8.8666666667vw; */
margin-top: 6.866667vw;
}
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper .sec3-part1-swiper-pagination {
/* bottom: 10vw; */
bottom: 23.3vw;
width: 43.73333333333333vw;
left: 16.8vw;
}
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper .swiper-pagination-bullet {
/* width: 5.3333333333vw; */
width: 6.4vw;
height: 2px;
border-radius: 0;
margin: 0 1px;
}
.swiper-container-horizontal>.swiper-pagination-bullets{
width: 43.73333333333333vw;
left: 16.8vw;
}
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper .swiper-pagination-bullet-active {
background: #000;
}
}
#brand-2024 .sec3 .sec3-part2 .bottom-des {
margin-bottom: 1.0416666667vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .bottom-des {
margin-bottom: 3.2vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-des {
width: 26.0416666667vw;
text-align: center;
margin: 0 auto;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-des {
width: 84vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg {
width: 72.9166666667vw;
height: 46.875vw;
margin: 3.125vw auto 0;
position: relative;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg {
margin: 8vw auto 0;
width: 84vw;
height: 133.3333333333vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots {
width: -moz-max-content;
width: max-content;
color: #233164;
font-size: 1.0416666667vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots {
font-size: 3.2vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots1 {
position: absolute;
left: 24.0104166667vw;
top: 15.5729166667vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots1 {
left: 18.1333333333vw;
top: 55.8vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots2 {
position: absolute;
left: 34.7395833333vw;
top: 16.1458333333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots2 {
left: 37.0666666667vw;
top: 60.2666666667vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots3 {
position: absolute;
right: 24.8958333333vw;
top: 15.5729166667vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots3 {
right: 20.8vw;
top: 55.8vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit {
width: 62.5vw;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 3.6458333333vw;
left: 50%;
transform: translate(calc(-50% + 0.625vw)0);
line-height: 1.4;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit {
width: 82.6666666667vw;
top: 13.6vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .item {
margin: 0 0.5208333333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .item {
margin: 0 1.6vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .left-txt {
font-size: 1.25vw;
color: #333;
text-align: center;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .left-txt {
font-size: 3.2vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .right-txt {
font-size: 1.25vw;
color: #333;
text-align: center;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .right-txt {
font-size: 3.2vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .ai {
font-size: 2.2916666667vw;
padding: 2px;
-webkit-clip-path: inset(2px);
clip-path: inset(2px);
background: linear-gradient(146deg#1584EA 7.09%#9488DD 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .ai {
font-size: 11.7333333333vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .left-line {
width: 8.8541666667vw;
height: 2px;
background: linear-gradient(90deg#EAEAEA 0%#CECECE 100%);
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .left-line {
width: 8vw;
height: 1px;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .right-line {
width: 8.8541666667vw;
height: 2px;
background: linear-gradient(90deg#EAEAEA 0%#CECECE 100%);
transform: rotate(180deg);
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .bg-top-tit .right-line {
width: 8vw;
height: 1px;
}
}
#brand-2024 .sec3 .sec3-part3 {
/* width: 72.9166666667vw; */
width: 73.12499999996667vw;
height: 40vw;
margin: 3.25vw auto 0;
position: relative;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 {
margin: 10vw auto 0;
width: 84vw;
height: auto;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item1 {
width: 29.375vw;
height: 40vw;
position: absolute;
left: 0vw;
top: 0vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item1 {
width: 84vw;
height: 91.2vw;
position: relative;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item1 .item-txt {
width: 15.625vw;
position: absolute;
left: 1.5625vw;
top: 1.5625vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item1 .item-txt {
width: 53.3333333333vw;
left: 4vw;
top: 4vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item1 .item-txt h3 {
font-size: 1.25vw;
color: #fff;
margin-bottom: 0.5208333333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item1 .item-txt h3 {
font-size: 4.2666666667vw;
margin-bottom: 1.6vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item1 .item-txt .des {
font-size: 0.7291666667vw;
color: #fff;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item1 .item-txt .des {
font-size: 2.6666666667vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item2 {
width: 42.7083333333vw;
height: 18.125vw;
position: absolute;
right: 0vw;
top: 0vw;
}
#brand-2024 .sec3 .sec3-part3 .item {
overflow: hidden;
border-radius: 1.25vw;
}
#brand-2024 .sec3 .sec3-part3 .item img {
transition: all 0.5s;
}
#brand-2024 .sec3 .sec3-part3 .item:hover img {
transform: scale(1.1);
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item2 {
width: 84vw;
height: 91.2vw;
position: relative;
margin-top: 5.3333333333vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item2 .item-txt {
width: 31.25vw;
position: absolute;
left: 1.5625vw;
top: 1.5625vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item2 .item-txt {
width: 74.6666666667vw;
left: 4vw;
top: 4vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item2 .item-txt h3 {
font-size: 1.25vw;
color: #000;
margin-bottom: 0.3208333333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item2 .item-txt h3 {
font-size: 4.2666666667vw;
margin-bottom: 1.6vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item2 .item-txt .des {
font-size: 0.7291666667vw;
color: #000;
opacity: 0.8;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item2 .item-txt .des {
font-size: 2.6666666667vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item3 {
width: 42.7083333333vw;
height: 21.0416666667vw;
position: absolute;
bottom: 0vw;
right: 0vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item3 {
width: 84vw;
height: 91.2vw;
position: relative;
margin-top: 5.3333333333vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item3 .item-txt {
width: 31.25vw;
position: absolute;
left: 1.5625vw;
top: 1.5625vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item3 .item-txt {
width: 53.3333333333vw;
left: 4vw;
top: 4vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item3 .item-txt h3 {
font-size: 1.25vw;
color: #000;
margin-bottom: 0.5208333333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item3 .item-txt h3 {
font-size: 4.2666666667vw;
margin-bottom: 1.6vw;
}
}
#brand-2024 .sec3 .sec3-part3 .part3-item3 .item-txt .des {
font-size: 0.7291666667vw;
color: #000;
opacity: 0.8;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part3 .part3-item3 .item-txt .des {
font-size: 2.6666666667vw;
}
}
#brand-2024 .sec3 .sec3-part4 {
margin-top: 4.6875vw;
}
#brand-2024 .sec3 .sec3-part4 .bottom-des {
margin-bottom: 1.0416666667vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part4 .bottom-des {
margin-bottom: 3.2vw;
margin-top: 16vw;
}
}
#brand-2024 .sec3 .sec3-part4 .part4-warper {
display: grid;
grid-template-columns: 21.041667vw 12.760417vw 12.760417vw 12.135417vw 12.135417vw;
grid-template-rows: 15.625vw 15.625vw;
justify-content: center;
/* gap: 0.520833vw; */
gap: 1.041666666666667vw;
grid-template-areas: 'a s d f g' 'z x c v b';
margin-top: 4.166667vw;
}
#brand-2024 .sec3 .sec3-part4 .part4-warper .item {
position: relative;
overflow: hidden;
border-radius: 1.25vw;
}
#brand-2024 .sec3 .sec3-part4 .part4-warper .item .item-text {
position: absolute;
width: 100%;
bottom: 1.145833vw;
font-size: 1.25vw;
color: #fff;
text-align: center;
}
#brand-2024 .sec3 .sec3-part4 .part4-warper .item img {
transition: all 0.5s;
}
#brand-2024 .sec3 .sec3-part4 .part4-warper .item:hover img {
transform: scale(1.1);
}
#brand-2024 .sec3 .sec3-part4 .part4-warper .item1 {
grid-row-start: 1;
grid-row-end: 3;
}
#brand-2024 .sec3 .sec3-part4 .part4-warper .item4 {
grid-column-start: 4;
grid-column-end: 6;
}
#brand-2024 .sec3 .sec3-part4 .part4-warper .item5 {
grid-column-start: 2;
grid-column-end: 4;
}
#brand-2024 .sec3 .sec3-part4 .part4-des {
width: 26.0416666667vw;
text-align: center;
margin: 0 auto;
color: #000;
}
#brand-2024 .more {
font-size: 0.9375vw;
margin: 7vw auto 0;
width: -moz-max-content;
width: max-content;
cursor: pointer;
transition: all 0.5s;
}
#brand-2024 .more:hover {
opacity: 0.8;
}
#brand-2024 .sec-last3 .more {
color: #fff;
margin: 4.6875vw 0 0;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part4 .part4-des {
width: 84vw;
}
#brand-2024 .more {
font-size: 3.2vw;
}
#brand-2024 .sec-last3 .more {
margin-top: 16vw;
}
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part4-mob {
width: 84vw;
margin: 0 auto;
/* height: 120vw; */
height: 117.5vw;
/* margin-bottom: 16vw; */
margin-bottom: 29.86666666666667vw;
margin-top: 8vw;
}
#brand-2024 .sec3 .sec3-part4-mob .sec3-part4-swiper {
width: 84vw;
/* height: 120vw; */
/* height: 117.5vw; */
position: relative;
}
#brand-2024 .sec3 .sec3-part4-mob .sec3-part4-swiper .swiper-slide {
text-align: center;
background: #f9f9f9;
}
#brand-2024 .sec3 .sec3-part4-mob .sec3-part4-swiper .swiper-slide .pic {
width: 84vw;
height: 105.0666666667vw;
border-radius: 3.2vw;
overflow: hidden;
}
#brand-2024 .sec3 .sec3-part4-mob .sec3-part4-swiper .swiper-slide .silid-des {
font-size: 4.2666666667vw;
color: #000;
margin-top: 7.8666666667vw;
}
#brand-2024 .sec3 .sec3-part4-mob .sec3-part4-swiper .sec3-part4-swiper-pagination {
/* bottom: 10vw; */
bottom: 22vw;
width: 51.2vw;
left: 13.06666666666667vw;
}
#brand-2024 .sec3 .sec3-part4-mob .sec3-part4-swiper .swiper-pagination-bullet {
/* width: 5.3333333333vw; */
width: 6.4vw;
height: 2px;
border-radius: 0;
margin: 0 1px;
}
#brand-2024 .sec3 .sec3-part4-mob .sec3-part4-swiper .swiper-pagination-bullet-active {
background: #000;
}
}
#brand-2024 a {
display: block;
color: #000;
text-decoration: none;
}
#brand-2024 img {
display: block;
width: 100%;
}
#brand-2024 .pc-show {
display: block;
}
#brand-2024 .mob-show {
display: none;
}
#brand-2024 .part2-des,
#brand-2024 .part4-des {
font-size: 0.833333vw;
color: rgba(0000.8);
}
#brand-2024 .sec-last1 {
margin: 8.333333vw 0 10.416667vw;
overflow: hidden;
}
#brand-2024 .sec-last1 .cards {
display: flex;
width: 72.916667vw;
margin: 3.125vw auto 0;
/* -moz-column-gap: 2.083333vw; */
/* column-gap: 2.083333vw; */
-moz-column-gap: 1.041666666666667vw !important;
column-gap: 1.041666666666667vw !important;
}
#brand-2024 .sec-last1 .cards .item {
flex: 1;
position: relative;
border-radius: 1.25vw !important;
}
#brand-2024 .sec-last1 .cards .item .item-text {
position: absolute;
bottom: 2.083333vw;
left: 1.5625vw;
}
#brand-2024 .sec-last1 .cards .item .item-text .text1 {
font-size: 2.083333vw;
}
#brand-2024 .sec-last1 .cards .item .item-text .text2 {
font-size: 0.9375vw;
margin-top: 0.520833vw;
width: -moz-max-content;
width: max-content;
}
#brand-2024 .sec-last1 .cards .item1 {
color: #fff;
}
#brand-2024 .sec-last1 .cards .item1 .text2 {
color: #fff;
}
#brand-2024 .sec-last2 {
overflow: hidden;
padding: 6.25vw 0;
background-color: #f9f9f9;
}
#brand-2024 .sec-last2 .swiper1 {
margin-top: 3.645833vw;
/* padding-left: 14.583333vw; */
box-sizing: border-box;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide {
width: auto;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide1 {
width: 35.677083vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide2 {
width: 35.677083vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide3 {
width: 35.677083vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide4 {
width: 34.375vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide5 {
width: 36.71875vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide6 {
width: 39.21875vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide7 {
width: 30.416667vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide8 {
width: 34.270833vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide9 {
width: 34.739583vw;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide10 {
width: 41.947917vw;
padding-right: 2vw;
}
#brand-2024 .sec-last2 .swiper1 .slide-text {
font-size: 1.25vw;
margin-top: 1.5625vw;
max-width: 90%;
}
#brand-2024 .sec-last2 .swiper1 .slide-img {
height: 22.708333vw;
border-radius: 1.25vw;
overflow: hidden;
}
#brand-2024 .sec-last2 .swiper1 .slide-img img {
height: 100%;border-radius: 1.25vw;
width: 100%;overflow: hidden;
-o-object-fit: cover;
object-fit: cover;
}
#brand-2024 .sec-last2 .swiper-button-next:after,
#brand-2024 .sec-last2 .swiper-container-rtl .swiper-button-prev:after,
#brand-2024 .sec-last2 .swiper-button-prev:after,
#brand-2024 .sec-last2 .swiper-container-rtl .swiper-button-next:after {
content: '';
}
#brand-2024 .sec-last2 .swiper-box {
position: relative;
}
#brand-2024 .sec-last2 .swiper-box .swiper-buttons#brand-2024 .sec3-part4-mob .swiper-buttons{
position: absolute;
top: -2.604167vw;
right: 13.541667vw;
transform: translateY(-100%);
width: 6.666667vw;
display: flex;
justify-content: space-between;
}
#brand-2024 .sec-last2 .swiper-box .swiper-buttons .swiper-button-prev,
#brand-2024 .sec-last2 .swiper-box .swiper-buttons .swiper-button-next#brand-2024 .sec3-part4-mob .swiper-buttons .swiper-button-prev,
#brand-2024 .sec3-part4-mob .swiper-buttons .swiper-button-next{
position: static;
width: 2.291667vw;
height: 2.291667vw;
background-image: none;
}
#brand-2024 .sec-last3 {
background: url('/content/dam/honor/cn/brand/brand-2024/imgs/section-last3/bg.jpg') center no-repeat;
background-size: cover;
/* padding: 4.6875vw 0 7.604167vw; */
padding: 4.6875vw 0;
overflow: hidden;
}
#brand-2024 .sec-last3 .tit-warper .tit {
color: #fff;
}
#brand-2024 .sec-last3 .tit-warper .tit-line {
background-color: #fff;
}
#brand-2024 .sec-last3 .last3-content {
display: flex;
justify-content: space-between;
width: 75.270833vw;
margin: 5.208333vw auto 0;
color: #fff;
transform: translateX(1.302083vw);
}
#brand-2024 .sec-last3 .last3-content .left {
flex: 1;
}
#brand-2024 .sec-last3 .last3-content .left .left-text {
font-size: 2.083333vw;
}
#brand-2024 .sec-last3 .last3-content .left .left-list {
display: flex;
flex-wrap: wrap;
-moz-column-gap: 3.4375vw;
column-gap: 3.4375vw;
row-gap: 2.8125vw;
margin-top: 3.645833vw;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item {
width: 45%;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item .item-arrow {
width: 0.78125vw;
display: inline-block;
vertical-align: super;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item .item-text1 {
font-size: 2.291667vw;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item .item-text2 {
font-size: 1.041667vw;
opacity: 0.8;
margin-top: 0.46875vw;
}
#brand-2024 .sec-last3 .last3-content .right {
width: 40.625vw;
display: flex;
flex-wrap: wrap;
-moz-column-gap: 1.041667vw;
column-gap: 1.041667vw;
row-gap: 1.041667vw;
}
#brand-2024 .sec-last3 .last3-content .right .right-item {
width: 9.375vw;
min-height: 10.416667vw;
background-color: rgba(2552552550.2);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0.441667vw;
box-sizing: border-box;
border-radius: 0.625vw;
}
#brand-2024 .sec-last3 .last3-content .right .right-item .item-img {
width: 2.604167vw;
height: 2.604167vw;
display: flex;
justify-content: center;
align-items: center;
}
#brand-2024 .sec-last3 .last3-content .right .right-item .item-text {
margin-top: 2.083333vw;
font-size: 1.25vw;
}
#brand-2024 .sec-last3 .last3-content .right .right-item3 img {
width: 2.291667vw;
}
#brand-2024 .sec-last3 .last3-content .right .right-item5 img {
width: 2.395833vw;
}
#brand-2024 .sec-last3 .last3-content .right .right-item7 img {
width: 2.34375vw;
}
#brand-2024 .sec-last4 {
padding: 6.25vw 0 7.291667vw;
background-color: #f9f9f9;
overflow: hidden;
}
#brand-2024 .sec-last4 .reduces {
display: flex;
justify-content: center;
text-align: center;
}
#brand-2024 .sec-last4 .reduces .reduce {
padding: 0 3.125vw;
position: relative;
}
#brand-2024 .sec-last4 .reduces .reduce .reduce-text1 {
font-size: 2.1875vw;
}
#brand-2024 .sec-last4 .reduces .reduce .reduce-text2 {
font-size: 0.729167vw;
margin-top: 0.46875vw;
}
#brand-2024 .sec-last4 .reduces .reduce::after {
display: block;
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 0.104167vw;
height: 1.5625vw;
background-color: #d9d9d9;
}
#brand-2024 .sec-last4 .reduces .reduce:last-child::after {
display: none;
}
#brand-2024 .sec-last4 .list {
display: flex;
justify-content: space-between;
/* width: 72.916667vw; */
width: 73.4375vw;
margin: 3.125vw auto 0;
}
#brand-2024 .sec-last4 .list .item{
border-radius: 1.25vw;
overflow: hidden;
}
#brand-2024 .sec-last4 .list .item1 {
width: 46.041667vw;
}
#brand-2024 .sec-last4 .list .item2 {
width: 26.354167vw;
}
#brand-2024 .sec-last4 .list .item-text {
text-align: center;
font-size: 1.25vw;
margin-top: 1.5625vw;
}
#brand-2024 .sec-last5 {
padding: 6.25vw 0 8.333333vw;
overflow: hidden;
background-color: #ffffff;
}
#brand-2024 .sec-last5 .bottom-des {
margin-bottom: 0.625vw;
}
#brand-2024 .sec-last5 .bottom-tip {
font-size: 0.833333vw;
color: rgba(0000.8);
text-align: center;
}
#brand-2024 .sec-last5 .last5-content {
width: 72.916667vw;
margin: 4.166667vw auto 6.25vw;
position: relative;
}
#brand-2024 .sec-last5 .last5-content .img-l {
width: 48.958333vw;
border-radius: 1.25vw;
}
#brand-2024 .sec-last5 .last5-content .reduces {
position: absolute;
top: 0.875vw;
right: 3.333333vw;
max-width: 16.375vw;
}
#brand-2024 .sec-last5 .last5-content .reduces .reduce .reduce-text1 {
font-size: 2.291667vw;
}
#brand-2024 .sec-last5 .last5-content .reduces .reduce .reduce-text2 {
font-size: 0.833333vw;
color: rgba(0000.8);
margin-top: 0.46875vw;
}
#brand-2024 .sec-last5 .last5-content .reduces .reduce2 {
margin-top: 2.291667vw;
}
#brand-2024 .sec-last5 .last5-content .imgs {
width: 26.979167vw;
display: flex;
justify-content: space-between;
position: absolute;
bottom: 1.875vw;
right: 0;
}
#brand-2024 .sec-last5 .last5-content .imgs picture {
width: 12.96875vw;
border-radius: 0.625vw;
overflow: hidden;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px){
#brand-2024 .sec-last5 .last5-content .imgs picture{
border-radius: 3.2vw;
}
}
#brand-2024 .sec-last5 .list {
width: 60.3125vw;
margin: 4.6875vw auto 0;
display: flex;
justify-content: space-between;
}
#brand-2024 .sec-last5 .list .item {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
#brand-2024 .sec-last5 .list .item .item-text {
text-align: center;
font-size: 0.9375vw;
color: rgba(0000.8);
margin-top: 2.083333vw;
}
#brand-2024 .sec-last5 .list .item1 .icon {
width: 5.208333vw;
}
#brand-2024 .sec-last5 .list .item2 .icon {
width: 3.645833vw;
}
#brand-2024 .sec-last5 .list .item3 .icon {
width: 4.479167vw;
}
#brand-2024 .sec-last5 .list .item4 .icon {
width: 4.114583vw;
}
#brand-2024 .sec-last5 .list .item5 .icon {
width: 5.208333vw;
}
#brand-2024 .sec-last5 .tip {
color: rgba(0000.8);
font-size: 0.833333vw;
margin-top: 4.895833vw;
text-align: center;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .pc-show {
display: none;
}
#brand-2024 .mob-show {
display: block;
}
#brand-2024 .part2-des,
#brand-2024 .part4-des {
font-size: 2.666667vw;
}
#brand-2024 .sec-last1 {
margin: 21.333333vw 0;
}
#brand-2024 .sec-last1 .cards {
width: 84vw;
flex-direction: column;
margin-top: 8vw;
row-gap: 5.333333vw;
}
#brand-2024 .sec-last2 .swiper1 .slide-img {
height: 65.6vw;
/* height: 54.4vw; */
/* border-radius: 3.2vw; */
overflow: hidden;
}
#brand-2024 .sec-last2 .swiper1 .slide-img img {
height: auto;border-radius: 3.2vw;
-o-object-fit: contain;overflow: hidden;
object-fit: contain;
}
#brand-2024 .sec-last1 .cards .item .item-text {
bottom: 5.333333vw;
left: 5.333333vw;
}
#brand-2024 .sec-last1 .cards .item .item-text .text1 {
font-size: 4.266667vw;
}
#brand-2024 .sec-last1 .cards .item .item-text .text2 {
font-size: 3.733333vw;
margin-top: 1.6vw;
}
#brand-2024 .sec-last2 {
padding: 16vw 0 29.333333vw;
}
#brand-2024 .sec-last2 .swiper1 {
padding-left: 0;
margin: 10.666667vw auto 0;
width: 84vw;
/* border-radius: 3.2vw; */
}
#brand-2024 .sec-last2 .swiper1 .slide-text {
text-align: center;
font-size: 4.266667vw;
margin: 5.333333vw auto 0;
max-width: 92%;
}
#brand-2024 .sec-last2 .swiper-box .swiper-buttons#brand-2024 .sec3-part4-mob .swiper-buttons{
width: 34.4vw;
top: auto;
bottom: -5.333333vw;
left: 50%;
transform: translate(-50%100%);
}
#brand-2024 .sec-last2 .swiper-box .swiper-buttons .swiper-button-prev,
#brand-2024 .sec-last2 .swiper-box .swiper-buttons .swiper-button-next,#brand-2024 .sec3-part4-mob .swiper-buttons .swiper-button-prev,#brand-2024 .sec3-part4-mob .swiper-buttons .swiper-button-next{
width: 8.533333vw;
height: 8.533333vw;
}
#brand-2024 .sec-last3 {
background-image: url('/content/dam/honor/cn/brand/brand-2024/imgs/section-last3/bg-xs.jpg');
padding: 13.333333vw 0 16vw;
}
#brand-2024 .sec-last3 .last3-content {
flex-direction: column;
margin-top: 8vw;
width: 82.666667vw;
transform: translate(0);
}
#brand-2024 .sec-last3 .last3-content .left .left-text {
font-size: 4.8vw;
text-align: center;
}
#brand-2024 .sec-last3 .last3-content .left .left-list {
justify-content: space-between;
row-gap: 8vw;
-moz-column-gap: 0;
column-gap: 0;
margin-top: 10.666667vw;
flex-direction: column;
}
#brand-2024 .sec-last2 .swiper1 .swiper-slide10 {
padding-right: 0;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item {
width: 100%;
max-width: 100%;
text-align: center;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item:nth-of-type(2n) {
display: none;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item .item-arrow {
width: 3.2vw;
margin-left: 0.8vw;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item .item-text1 {
font-size: 8.533333vw;
}
#brand-2024 .sec-last3 .last3-content .left .left-list .item .item-text2 {
font-size: 3.2vw;
}
#brand-2024 .sec-last3 .last3-content .right {
width: 100%;
-moz-column-gap: 0;
column-gap: 0;
justify-content: space-between;
margin-top: 10.666667vw;
row-gap: 3.2vw;
}
#brand-2024 .sec-last3 .last3-content .right .right-item {
width: 40vw;
min-height: 24vw;
padding-left: 4vw;
flex-direction: row;
align-items: center;
justify-content: flex-start;
border-radius: 3.2vw;
}
#brand-2024 .sec-last3 .last3-content .right .right-item .item-img {
width: 10vw;
height: auto;
}
#brand-2024 .sec-last3 .last3-content .right .right-item .item-img img {
width: 100%;
}
#brand-2024 .sec-last3 .last3-content .right .right-item .item-text {
font-size: 2.733333vw;
margin-top: 0;
margin-left: 4vw;
}
#brand-2024 .sec-last4 {
padding: 16vw 0;
}
#brand-2024 .sec-last4 .reduces {
width: 84vw;
margin: 10.666667vw auto 0;
}
#brand-2024 .sec-last4 .reduces .reduce {
padding: 0 3.333333vw;
max-width: 33.333%;
}
#brand-2024 .sec-last4 .reduces .reduce .reduce-text1 {
font-size: 8.533333vw;
}
#brand-2024 .sec-last4 .reduces .reduce .reduce-text2 {
font-size: 2.666667vw;
margin-top: 1.066667vw;
}
#brand-2024 .sec-last4 .reduces .reduce1 {
padding-left: 0;
}
#brand-2024 .sec-last4 .reduces .reduce3 {
padding-right: 0;
}
#brand-2024 .sec-last4 .reduces .reduce::after {
width: 1px;
height: 8vw;
}
#brand-2024 .sec-last4 .list {
width: 84vw;
flex-direction: column;
margin-top: 5.333333vw;
}
#brand-2024 .sec-last4 .list .item1,
#brand-2024 .sec-last4 .list .item2 {
width: 100%;
}
#brand-2024 .sec-last4 .list .item2 {
margin-top: 8vw;
}
#brand-2024 .sec-last4 .list .item-text {
font-size: 4.266667vw;
margin-top: 5.333333vw;
}
#brand-2024 .sec-last5 {
padding: 16vw 0 21.333333vw;
}
#brand-2024 .sec-last5 .bottom-des {
margin-bottom: 1.6vw;
}
#brand-2024 .sec-last5 .bottom-tip {
font-size: 2.666667vw;
}
#brand-2024 .sec-last5 .last5-content {
width: 84vw;
margin: 10.666667vw auto 16vw;
}
#brand-2024 .sec-last5 .last5-content .reduces {
width: 100%;
max-width: 100%;
position: static;
display: flex;
justify-content: space-between;
}
#brand-2024 .sec-last5 .last5-content .reduces .reduce {
width: 50%;
text-align: center;
}
#brand-2024 .sec-last5 .last5-content .reduces .reduce .reduce-text1 {
font-size: 8.533333vw;
}
#brand-2024 .sec-last5 .last5-content .reduces .reduce .reduce-text2 {
font-size: 2.666667vw;
}
#brand-2024 .sec-last5 .last5-content .reduces .reduce2 {
margin-top: 0;
}
#brand-2024 .sec-last5 .last5-content .img-l {
width: 100%;
margin-top: 5.333333vw;
border-radius: 3.2vw;
}
#brand-2024 .sec-last5 .last5-content .imgs {
position: static;
width: 100%;
margin-top: 3.466667vw;
}
#brand-2024 .sec-last5 .last5-content .imgs picture {
width: 40.266667vw;
}
#brand-2024 .sec-last5 .list {
flex-wrap: wrap;
width: 90.533333vw;
margin-top: 0;
justify-content: center;
-moz-column-gap: 10%;
column-gap: 10%;
}
#brand-2024 .sec-last5 .list .item {
min-width: 40%;
margin-top: 10.666667vw;
}
#brand-2024 .sec-last5 .list .item .item-text {
margin-top: 3.733333vw;
font-size: 3.2vw;
}
#brand-2024 .sec-last5 .list .item1 .icon {
width: 20vw;
}
#brand-2024 .sec-last5 .list .item2 .icon {
width: 14.133333vw;
}
#brand-2024 .sec-last5 .list .item3 .icon {
width: 17.333333vw;
}
#brand-2024 .sec-last5 .list .item4 .icon {
width: 16vw;
}
#brand-2024 .sec-last5 .list .item5 .icon {
width: 20vw;
}
#brand-2024 .sec-last5 .tip {
font-size: 3.2vw;
margin-top: 10.666667vw;
}
}
.v4.h04-hero-image-or-video .hero-image-video__container {
width: 100%;
position: relative;
padding-bottom: 34.5%;
overflow: hidden;
}
.v4.h04-hero-image-or-video .hero-image-video__control {
width: 100%;
max-width: 940px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%-50%);
padding: 0 40px;
text-align: center;
z-index: 1;
}
.v4.h04-hero-image-or-video .hero-image-video__control-title {
font-size: 88px;
font-weight: 700;
color: #fff;
line-height: 1.09;
margin-bottom: 64px;
letter-spacing: -1px;
}
.v4.h04-hero-image-or-video .hero-image-video__video-bg {
position: absolute;
left: 0;
top: 50%;
width: 100vw;
height: auto;
transform: translateY(-50%);
display: block;
}
.v4.h04-hero-image-or-video .hero-image-video__image-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.v4.h04-hero-image-or-video .hero-image-video__modal {
background-color: rgba(0000.95);
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
display: block;
opacity: 0;
visibility: hidden;
z-index: 200;
}
.loaded .v4.h04-hero-image-or-video .hero-image-video__modal {
transition: 0.3s ease-out;
}
.v4.h04-hero-image-or-video .hero-image-video__modal--visible {
opacity: 1;
visibility: visible;
}
.v4.h04-hero-image-or-video .hero-image-video__modal-content {
outline: none;
position: relative;
width: 100%;
height: auto;
max-width: 1620px;
padding: 0 80px;
left: 0;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
z-index: 1;
}
.v4.h04-hero-image-or-video .hero-image-video__modal-wrap {
width: 100%;
padding-bottom: 56.26%;
position: relative;
display: block;
}
.v4.h04-hero-image-or-video .hero-image-video__modal-video {
outline: 0;
width: 100%;
height: 100%;
position: absolute;
margin: 0;
padding: 0;
border: 0;
left: 0;
top: 1.5vw;
}
.v4.h04-hero-image-or-video .hero-image-video__close-btn {
border-color: rgba(2552552550.2);
top: 3vw;
right: 20px;
z-index: 10;
display: block;
background: none;
}
.v4.h04-hero-image-or-video .hero-image-video__close-btn::after,
.v4.h04-hero-image-or-video .hero-image-video__close-btn::before {
background-color: #fff;
}
.v4 .popup__close-btn {
top: 20px;
}
@media only screen and (min-width: 1200px) {
.no-touch .v4.h04-hero-image-or-video .hero-image-video__close-btn:hover {
background-color: #fff;
}
.no-touch .v4.h04-hero-image-or-video .hero-image-video__close-btn:hover::after,
.no-touch .v4.h04-hero-image-or-video .hero-image-video__close-btn:hover::before {
background-color: #000;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1599.98px) {
.v4.h04-hero-image-or-video .hero-image-video__modal-content {
max-width: 186vh;
}
}
@media only screen and (max-width: 1199.98px) {
.v4.h04-hero-image-or-video .hero-image-video__control {
max-width: 460px;
}
.v4.h04-hero-image-or-video .hero-image-video__control-title {
font-size: 32px;
letter-spacing: -0.5px;
line-height: 1.13;
margin-bottom: 40px;
}
}
@media only screen and (max-width: 768px) {
.v4.h04-hero-image-or-video .hero-image-video__container {
/* height: calc(100vh - 56px);
padding-bottom: 0; */
/* 0218 */
padding-bottom: calc(100vh - 50px);
height: 0;
/* -webkit-transform: scale(1.02);
transform: scale(1.02); */
}
.v4.h04-hero-image-or-video .hero-image-video__video-bg {
/* left: 50%;
width: 100%;
-webkit-transform: translate(-50%-50%);
transform: translate(-50%-50%); */
top: 0;
left: 0;
right: 0;
margin: 0 auto;
transform: none;
/* 0218 */
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.v4.h04-hero-image-or-video .hero-image-video__modal {
padding: 0 24px;
}
.v4.h04-hero-image-or-video .hero-image-video__modal-content {
padding: 0 40px;
}
.v4 .popup__close-btn {
top: -60px !important;
right: 40px !important;
}
}
@media (min-aspect-ratio: 661 / 758) and (max-width: 1000px){
.v4.h04-hero-image-or-video .hero-image-video__container {
padding-bottom: calc(100vh - 50px);
height: 0;
}
}
@media only screen and (max-width: 767.98px) {
.v4.h04-hero-image-or-video .hero-image-video__control {
max-width: 400px;
padding: 0 20px;
}
.v4.h04-hero-image-or-video .hero-image-video__modal-content {
padding: 0;
}
.v4 .popup__close-btn {
right: 0 !important;
}
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
.v4.h04-hero-image-or-video .hero-image-video__modal-content {
max-width: 160vh;
}
}
@media (width: 1600px) {
.v4.h04-hero-image-or-video .hero-image-video__modal-content {
max-width: 186vh;
}
}
.v4.h04-hero-image-or-video .hero-image-video__close-btn::after,
.v4.h04-hero-image-or-video .hero-image-video__close-btn::before {
background-color: #fff;
}
.v4.h04-hero-image-or-video .hero-image-video__modal {
z-index: 9999;
}
.v4 .popup__close-btn {
top: 20px;
}
.v4 .popup__close-btn {
position: absolute;
right: 64px;
top: 32px;
width: 48px;
height: 48px;
border: 1px solid rgba(0000.2);
border-radius: 50%;
}
@media only screen and (max-width: 1199.98px) {
.v4 .popup__close-btn {
display: none;
}
}
.v4 .popup__close-btn::after,
.v4 .popup__close-btn::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 18px;
width: 1px;
background-color: #000;
}
.v4 .popup__close-btn::before {
transform: translate(-50%-50%) rotate(45deg);
}
.v4.h04-hero-image-or-video .hero-image-video__close-btn::after,
.v4.h04-hero-image-or-video .hero-image-video__close-btn::before {
background-color: #fff;
}
.v4 .popup__close-btn::after,
.loaded .v4 .popup__close-btn::before {
transition: 0.3s ease-out;
}
.v4 .popup__close-btn::after {
transform: translate(-50%-50%) rotate(-45deg);
}
/* .kv_banner_btn p::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
position: relative;
top: -1px;
margin-left: 12px;
transition: 0.6s ease;
} */
.brand-2024 .hero-image-video__control-title_1 {
width: 43%;
margin: 0 auto;
margin-bottom: 64px;
}
/* .kv_banner_btn p::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
position: relative;
top: -1px;
margin-left: 12px;
transition: 0.6s ease;
} */
.kv_banner_btn p {
font-weight: bold;
letter-spacing: 0.3vw;
margin-bottom: 0;
transform: translate(0.2vw);
}
.brand-mb {
display: none !important;
}
@media screen and (max-width: 768px) {
.brand-mb {
display: block !important;
}
/* .kv_banner_btn p::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
position: relative;
top: -2px;
margin-left: 12px;
transition: 0.6s ease;
} */
.brand-2024 .hero-image-video__control-title_1 {
width: 80%;
margin: 0 auto;
margin-bottom: 35px;
}
.kv_banner_btn p {
font-weight: bold;
letter-spacing: 1vw;
}
/* .kv_banner_btn p::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
position: relative;
top: -2px;
margin-left: 12px;
transition: 0.6s ease;
} */
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
#brand-2024 .sec2 .sec2-des {
width: 46.666667vw;
}
#brand-2024 .sec3 .sec3-part3 .part3-item2 .item-txt {
top: 0.1vw;
}
#brand-2024 .sec-last5 .last5-content .reduces {
top: 1.075vw;
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots1 {
top: 13.572917vw;
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots2 {
top: 14.145833vw;
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .dots3 {
top: 13.572917vw;
}
}
#brand-2024 .bg-line {
/* background-color: #fff; */
/* background: linear-gradient(to bottom#f5f5f5 85%#ffffff 15%); */
/* padding-top: 6vw; */
/* position: relative; */
background-color: #f2f2f2;
padding: 6vw 0 7.55vw;
}
#brand-2024 .bg-line-tab {
position: relative;
}
/* .bg-lline-gray {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
background-color: #f2f2f2;
height: 38.5vw;
width: 100%;
} */
#brand-2024 .bg-line-title {
padding-top: 6vw;
}
#brand-2024 .bg-line-month {
width: 77.5vw;
margin: 0 auto;
}
#brand-2024 div.month-slide {
display: flex;
justify-content: space-between;
/* background-color: #ffffff; */
height: 33.8vw;
border-radius: 1.25vw 0 0 1.25vw;
}
#brand-2024 .bg-month-img img {
width: 38.23vw;
height: 100%;
/* border-radius: 1.25vw 0 0 1.25vw;*/
/* width: 33.75vw; */
/* height: 25.6vw; */
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
#brand-2024 .bg-month-tab {
/* width: 25vw; */
flex: 1;
padding: 3.8vw 0 0 5.4vw;
text-align: left;
background: #fff;
}
#brand-2024 .month-slide-no .bg-month-tab {
width: 100%;
text-align: center;
padding: 4vw 0;
}
#brand-2024 .month-slide-no .bg-month-text {
width: 100%;
}
#brand-2024 .bg-month-time {
display: block;
font-size: 1.3vw;
font-size: 1.1vw;
color: #686868;
}
#brand-2024 p.bg-month-title {
font-size: 2.6vw;
font-size: 1.9vw;
/* margin: 2.5vw 2vw 2.5vw 0; */
color: #000000;
padding: 2.34vw 2vw 2vw 0;
line-height: 1.46;
}
#brand-2024 .bg-month-text {
color: #000000;
width: 80%;
font-size: 1.4vw;
font-size: 1.1vw;
line-height: 1.8vw;
}
#brand-2024 div.line-month-pagination {
width: auto;
right: auto;
bottom: 2.92vw;
left: 43.6vw;
font-size: 1vw;
color: #686868;
}
#brand-2024 .line-month-pagination .swiper-pagination-current {
color: #000000;
}
#brand-2024 #lineMonth .swiper-button-next::after,
#brand-2024 #lineMonth .swiper-button-prev::after {
display: none;
}
#brand-2024 #lineMonth .swiper-button-next,
#brand-2024 #lineMonth .swiper-button-prev {
/* background: none; */
background-image: url(/content/dam/honor/cn/brand-new/brand-swiper-next.svg);
background-size: 100%;
right: 1.77vw;
}
#brand-2024 #lineMonth .swiper-button-prev {
background-image: url(/content/dam/honor/cn/brand-new/brand-swiper-prev.svg);
background-size: 100%;
left: 40vw;
}
#brand-2024 .bg-line-month .swiper-container {
/* color: #9b9b9b;
--swiper-theme-color: #9b9b9b;
--swiper-navigation-color: #9b9b9b; */
--swiper-navigation-size: 1.8vw;
}
#brand-2024 .bg-line .swiper-container {
border-radius: 1.25vw;
margin: 0 auto;
}
#brand-2024 .bg-line-month .swiper-button-next.swiper-button-disabled,
#brand-2024 .bg-line-month .swiper-button-prev.swiper-button-disabled {
opacity: 0;
}
#brand-2024 .bg-line-year {
position: relative;
width: 77.6vw;
padding: 0 8vw;
height: 2.5vw;
margin: 5.94vw auto 1.96vw;
display: flex;
justify-content: space-around;
/* align-items: baseline; */
border-bottom: 1px #d0d0d0 solid;
}
#brand-2024 .bg-line-year li {
font-size: 0.94vw;
color: #686868;
height: 100%;
margin-top: 1px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: font-size 0.2s;
}
#brand-2024 .bg-line-year li p {
height: 100%;
}
#brand-2024 .bg-line-year li:after {
content: '';
display: block;
margin: 0 auto;
width: 97%;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#brand-2024 li.line-year-active,
#brand-2024 li.line-year-leave {
position: relative;
left: 0;
right: 0;
cursor: default;
text-align: center;
}
#brand-2024 li.line-year-active {
font-family: 'HONOR Sans Brand DemiBold';
font-weight: 600;
color: #000;
font-size: 1.15vw;
}
#brand-2024 li.line-year-active:after {
background-color: #000;
animation: yearActive 0.4s forwards;
}
@keyframes yearActive {
0% {
width: 0;
}
100% {
width: 97%;
}
}
#brand-2024 li.line-year-leave:after {
background-color: #000;
animation: yearLeave 0.4s forwards;
}
@keyframes yearLeave {
0% {
width: 97%;
}
100% {
width: 0;
}
}
#brand-2024 .brand-mb {
display: none !important;
}
#brand-2024 .tit-warper-mob {
display: none;
}
@media screen and (max-width: 1920px) {
#brand-2024 .bg-month-time {
font-size: 1.1vw;
}
#brand-2024 p.bg-month-title {
font-size: 1.8vw;
}
#brand-2024 .bg-month-text {
font-size: 1.1vw;
}
}
@media screen and (min-width: 769px) {
#brand-2024 #lineMonth .line-month-pagination-no {
right: 0;
left: 0;
}
#brand-2024 #lineMonth .line-month-prev-no {
left: 1.5vw;
}
#brand-2024 .month-slide-no .bg-month-tab {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
padding: 0;
padding-bottom: 4vw;
}
#brand-2024 .month-slide-no .bg-month-time {
width: 100%;
}
}
@media screen and (max-width: 768px) {
#brand-2024 .brand-pc {
display: none !important;
}
#brand-2024 .brand-mb {
display: block !important;
}
#brand-2024 .bg-video-tab {
padding-top: 60vw;
}
#brand-2024 .bg-video-title {
font-size: 6.4vw;
line-height: 9vw;
/* padding-bottom: 13.7vw; */
}
#brand-2024 .bg-video-list {
width: 90%;
}
#brand-2024 .bg-video-list p {
font-size: 4.8vw;
}
#brand-2024 .bg-video-list span {
font-size: 1.96vw;
padding-top: 2vw;
}
#brand-2024 .bg-about {
padding: 18.4vw 0 0;
}
#brand-2024 .bg-creative {
padding: 18.4vw 0 17.6vw;
}
#brand-2024 p.bg-about-title,
#brand-2024 p.bg-creative-title {
font-size: 5.33vw;
padding-bottom: 5.9vw;
}
#brand-2024 .tit-warper-pc {
display: none;
}
#brand-2024 .tit-warper-mob {
display: flex;
}
#brand-2024 .bg-about-title:after,
#brand-2024 .bg-creative-title:after {
width: 8vw;
height: 1px;
}
#brand-2024 .bg-about-text,
#brand-2024 .bg-creative-text {
font-size: 3.6vw;
line-height: 7.78vw;
}
#brand-2024 .bg-learn {
padding: 16.5vw 12vw 14.5vw;
}
#brand-2024 .bg-learn-list {
width: 100%;
margin: 9.47vw auto 0;
}
#brand-2024 .bg-learn-list li {
width: 100%;
height: auto;
margin-bottom: 12vw;
}
#brand-2024 .bg-learn-list a {
padding: 7.65vw 8.6vw 7.52vw;
border: solid 0.5px #f5f5f5;
}
#brand-2024 .bg-learn-title {
font-size: 4.67vw;
padding-bottom: 3vw;
}
#brand-2024 .bg-learn-text {
min-height: auto;
font-size: 3.33vw;
line-height: 5vw;
width: 100%;
}
#brand-2024 .bg-learn-more {
display: none;
}
#brand-2024 .bg-line {
/* padding-top: 11.36vw; */
padding: 11.36vw 0 0;
/* background: linear-gradient(to bottom#f5f5f5 52%#ffffff 48%); */
}
#brand-2024 .line-year-tab {
margin: 0 auto 8.9vw;
overflow-x: scroll;
}
#brand-2024 .line-year-tab::-webkit-scrollbar {
display: none;
}
#brand-2024 .bg-line-year {
margin: 0 auto;
width: 215%;
height: 7.6vw;
display: block;
font-size: 0;
padding: 0;
}
#brand-2024 .bg-line-year li {
display: inline-block;
margin: 0 5vw;
font-size: 3.46vw;
}
#brand-2024 li.line-year-active {
font-size: 3.74vw;
}
#brand-2024 .bg-line-month {
/* width: 84vw; */
width: 100vw;
/* padding: 0 8vw; */
margin: 23.6vw auto 0;
}
#brand-2024 div.month-slide {
display: block;
height: auto;
background-color: initial;
border-radius: 0;
}
#brand-2024 .bg-month-img img {
width: 100%;
height: 72.5vw;
border-radius: 3.2vw;
/* height: auto; */
}
#brand-2024 .bg-line-month .bg-month-tab {
width: 100%;
padding: 13vw 0 18.93vw 0;
background: none;
}
#brand-2024 .bg-month-time {
font-size: 3.74vw;
}
#brand-2024 p.bg-month-title {
font-size: 6.66vw;
/* padding: 11vw 0; */
margin: 5.3vw 0;
line-height: auto;
}
#brand-2024 .bg-month-text {
font-size: 3.74vw;
width: auto;
line-height: 6vw;
}
#brand-2024 #lineMonth .swiper-button-next,
#brand-2024 #lineMonth .swiper-button-prev {
top: -13vw;
right: 0;
}
#brand-2024 #lineMonth .swiper-button-prev {
left: 0;
}
#brand-2024 .bg-line-month .swiper-container {
--swiper-navigation-size: 4vw;
overflow: initial;
overflow-y: visible;
overflow-x: clip;
width: 84%;
}
#brand-2024 div .bg-line-month .swiper-pagination-fraction {
display: block !important;
top: -16.5vw;
left: 0;
right: 0;
bottom: auto;
margin: 0 auto;
font-size: 3.73vw;
}
#brand-2024 .line-month-tab-no {
background-color: #fff;
}
/* .bg-lline-gray {
height: 108vw;
} */
#brand-2024 .month-slide-no .bg-month-tab {
padding-top: 0;
}
}
/* 导航 */
.s-nav-1 {
padding-left: 0px;
}
.sec-nav-4-20 {
width: 100%;
font-size: 14px;
color: #666;
font-size: 14.00006px;
line-height: 20.00006px;
font-weight: 400;
-webkit-backdrop-filter: saturate(180%) blur(20.00006px);
backdrop-filter: saturate(180%) blur(20.00006px);
background: #fff;
box-shadow: none;
border-bottom: 1px solid #f9f9f9;
}
.sec-nav-4-20 .sec-nav-4-20-aa {
width: 100%;
margin: 0 auto;
height: 52px;
line-height: 52px;
max-width: none;
padding: 0 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: start;
flex-direction: row;
position: relative;
}
.sec-nav-4-20 .s-nav-1 {
line-height: 50px;
font-size: 14px;
color: #000;
font-weight: 600;
width: 80px;
}
.sec-nav-4-20 .s-nav-2-pc {
/* position: absolute; */
/* margin-left: 232px; */
margin-left: 210px;
width: 1186px;
}
.sec-nav-4-20 .s-nav-2-pc ul {
/* width: 15%; */
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
float: right;
}
.sec-nav-4-20 .s-nav-2-pc ul li {
padding-right: 30px;
position: relative;
cursor: pointer;
}
.sec-nav-4-20 .s-nav-2-pc ul li:last-of-type {
padding-right: 0;
}
.sec-nav-4-20 .section-active a {
color: #000;
}
.sec-nav-4-20 .section-active {
color: #000 !important;
font-weight: 600;
}
/* .section-active::after{
content: '';
width: 91%;
height: 0.10417vw;
background: #000;
position: absolute;
bottom: -29.952px;
left: 0%;
} */
.s-nav-fixed {
position: fixed;
top: 0;
z-index: 999;
}
.sec-nav-4-20 .one-active {
display: none;
}
.sec-nav-4-20 .mob-list {
display: none;
}
.sec-nav-4-20 .s-nav-2-mb {
display: none;
}
/* 受限于文本长度
Limited by text length*/
.sec-nav-4-20 .null-block {
display: none;
}
@media screen and (min-width: 1441px) {
.s-nav-1 {
padding-left: 0px !important;
}
.sec-nav-4-20 .sec-nav-4-20-aa {
max-width: 1440px;
}
}
@media screen and (max-width: 1440px) {
.sec-nav-4-20 .sec-nav-4-20-aa {
justify-content: space-between;
}
.sec-nav-4-20 .sec-nav-4-20-aa {
margin: 0;
/* width: 1164px; */
}
.sec-nav-4-20 .s-nav-2-pc {
position: absolute;
margin: 0;
/* left: 22vw; */
}
}
.s-nav-1 {
padding: 0 !important;
margin: 0 !important;
}
@media screen and (max-width: 1199px) {
.sec-nav-4-20 .s-nav-2-pc {
position: relative;
display: none;
}
.header-v3 {
height: 51px;
}
.sec-nav-4-20 .sec-nav-4-20-aa {
align-items: flex-start;
position: relative;
display: block;
max-width: none;
}
.sec-nav-4-20 .sec-nav-4-20 {
width: 100%;
z-index: 999;
font-size: 14px;
line-height: 52px;
background: #fff;
display: block;
color: #666666;
position: relative;
height: auto;
}
/* .sec-nav-4-20-mb {
position: fixed;
width: 100%;
z-index: 999;
font-size: 14.00001px;
line-height: 52.00003px;
background: #fff;
display: block;
color: #666666;
position: relative;
} */
.sec-nav-4-20 .section-active::after {
content: '';
width: 0;
height: 0;
background: none;
position: absolute;
bottom: 0;
left: 0%;
}
.sec-nav-4-20 .mob-list {
float: right;
position: relative;
padding-right: 20px;
/* margin-right: 29.99999px; */
display: block;
color: #000;
font-weight: 600;
font-size: 14px;
}
.sec-nav-4-20 .mob-list::before {
content: '';
display: block;
background: url('/content/dam/honor/common/home-page/icon/DownArrow.svg') no-repeat;
background-size: 100%;
background-size: cover;
background-position: center;
width: 18px;
height: 15px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -1px;
transition: 0.3s ease;
}
.sec-nav-4-20 .mob-list-act::before {
transform: translateY(-50%) rotate(-180deg);
}
.sec-nav-4-20 .s-nav-2-mb {
display: none;
align-items: stretch;
justify-content: center;
flex-direction: row;
padding: 10px 39px;
line-height: 1;
background: #ffffff;
}
.sec-nav-4-20 .s-nav-2-mb ul {
margin-right: 3px;
width: 100%;
display: block;
top: 100px;
text-align: right;
}
.sec-nav-4-20 .s-nav-2-mb ul li {
padding-right: 0;
position: relative;
cursor: pointer;
/* margin-bottom: 14.00001px; */
height: 40px;
padding: 10px;
width: auto;
cursor: pointer;
}
.sec-nav-4-20 .s-nav-2-mb ul li a {
line-height: 20px;
font-size: 14px;
color: #666666;
}
.sec-nav-4-20 .s-nav-2-mb ul li:nth-of-type(1) {
padding-right: 0;
}
.sec-nav-4-20 .s-nav-2-mb ul li:nth-of-type(2) {
padding-right: 0;
}
.sec-nav-4-20 .s-nav-2-mb ul li:nth-of-type(3) {
padding-right: 0;
}
.sec-nav-4-20 .s-nav-2-mb ul li:nth-of-type(4) {
padding-right: 0;
}
/* .section-1 {
padding-top: 8vw;
} */
.sec-nav-4-20 .s-nav-1 {
font-size: 14px;
font-weight: bold;
float: left;
}
.sec-nav-4-20 .private-question-component-v3 {
padding-top: 80px !important;
}
.s-nav-fixed {
position: fixed;
top: 0;
z-index: 999;
}
.sec-nav-4-20 .s-nav-2-mb ul li {
padding-right: 0;
}
.sec-nav-4-20 .section-active {
color: #000 !important;
font-weight: 600;
}
.sec-nav-4-20 .null-block {
display: none;
}
}
/* new */
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper .swiper-slide .silid-des {
opacity: 0;
}
#brand-2024 .sec3 .sec3-part1-mob .sec3-part1-swiper .swiper-slide-active .silid-des {
opacity: 1;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots {
position: absolute;
font-size: 1.1458333333vw;
color: #333333;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots {
font-size: 2.6666666667vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small {
position: absolute;
font-size: 0.7291666667vw;
color: #233164;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small {
font-size: 2.6666666667vw;
transform: scale(0.8);
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots1 {
top: 7.7083333333vw;
left: 32.65625vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots1 {
top: 31.4666666667vw;
left: 33.8666666667vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots2 {
top: 15.1041666667vw;
left: 32.0833333333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots2 {
top: 50.4vw;
left: 32.5333333333vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots3 {
top: 23.1770833333vw;
left: 32.03125vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots3 {
top: 70.4vw;
left: 32.5333333333vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots4 {
top: 34.4791666667vw;
left: 31.7708333333vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-dots4 {
top: 99.4666666667vw;
left: 31.2vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small1 {
top: 34.6354166667vw;
left: 15.5208333333vw;
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small1 {
top: 34.2354166667vw;
}
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small1 {
top: 100.2666666667vw;
left: 2.4vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small2 {
top: 35.9375vw;
left: 35.2083333333vw;
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small2 {
top: 35.6975vw;
}
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small2 {
top: 102.9333333333vw;
left: 37.8666666667vw;
}
}
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small3 {
top: 34.6354166667vw;
left: 54.375vw;
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small3 {
top: 34.2354166667vw;
}
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .sec3 .sec3-part2 .part2-bg .part2-small3 {
top: 100.2666666667vw;
left: 71.2vw;
}
}
/* #brand-2024 .hero-image-video .kv_banner_btn {
font-size: 14px;
padding: 11px 20px;
border: none;
border-radius: 20px;
text-align: center;
} */
#brand-2024 .hero-image-video .kv_banner_btn p {
letter-spacing: 0;
transform: none;
} /*# sourceMappingURL=1.css.map */
@media (min-width: 2519px) {
.s03-story-carousel .story-carousel__slide-text {
font-size: 0.633vw !important;
}
.s03-story-carousel .story-carousel__title {
font-size: 1.15vw !important;
}
}
#brand-2024 .sec-note{
margin: 8vw 0 0vw;
padding-bottom: 6vw;
}
#brand-2024 .sec-note ul{
width: 72.395833vw;
margin: 0 auto;
padding-top: 6.25vw;
border-top: 1px solid #000;
font-size: 14px;
line-height: 1.6;
}
#brand-2024 .sec-note ul li{
position: relative;
}
#brand-2024 .sec-note ul li:nth-of-type(n+2)::after{
content: '*';
display: inline-block;
position: absolute;
top: 0;
left: -.8vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px){
#brand-2024 .sec-note{
margin: 16vw 0 0;
padding-bottom: 16vw;
}
#brand-2024 .sec-note ul{
width: 89.333333vw;
padding-top: 16vw;
font-size: 12px;
padding-left: 4.266667vw;
}
#brand-2024 .sec-note ul li:nth-of-type(n+2)::after{
left: -1.6vw;
}
}
#brand-2024 .kv_banner_btn {
position: relative;
width: 6.25vw;
height: 6.25vw;
border-radius: 50%;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(2552552550.221);
box-shadow: none;
padding: 0;
border: none;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .kv_banner_btn {
width: 24vw;
height: 24vw;
}
}
#brand-2024 .kv_banner_btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-45%-50%);
display: inline-block;
width: 0;
height: 0;
border-top: 0.5208333333vw solid transparent;
border-left: 1.0416666667vw solid #fff;
border-bottom: 0.5208333333vw solid transparent;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
#brand-2024 .kv_banner_btn::after {
border-top: 2.6666666667vw solid transparent;
border-left: 5.3333333333vw solid #fff;
border-bottom: 2.6666666667vw solid transparent;
}
}
#brand-2024 .sec2-last {
padding-bottom: 3.8125vw;
background-color: #f9f9f9;
}
#brand-2024 .sec2-last .tit-warper .tit{
color: #000;
}
#brand-2024 .sec2-last .tit-warper .tit-line{
background: #000;
}
#brand-2024 .sec2-last .sec2-dots .item .num{
color: #000;
}
#brand-2024 .sec2-last .sec2-dots .item .item-des{
color: #000;
}
/* add */
#brand-2024 .section-add2 .txt-s{
margin: 2.145833vw auto 0;
}
#brand-2024 .section-add2 .tit-warper .tit{
color: #fff;
}
#brand-2024 .section-add2 .tit-warper .tit-line{
background: #fff;
}
#brand-2024 .section-add2 .add2-texts{
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,calc(-50% - 16vw)) translateY(5vw);
opacity: 0;
transition: all .7s;
}
#brand-2024 .section-add2.step4 .add2-texts{
transform: translate(-50%,calc(-50% - 16vw));
opacity: 1;
}
#brand-2024 .section-add2.step2 .add2-texts{
transform: translate(-50%,calc(-50% - 16vw)) translateY(-5vw);
opacity: 0;
}
@media (max-aspect-ratio: 660 / 758) and (max-width: 1025px){
#brand-2024 .section-add2 .add2-texts{
top: 17vw;
transform: translate(-50%,5vw);
}
#brand-2024 .section-add2.step4 .add2-texts{
transform: translate(-50%,0);
}
#brand-2024 .section-add2.step2 .add2-texts{
transform: translate(-50%,-5vw);
}
}
@media (aspect-ratio: 768 / 1024),(aspect-ratio: 1024 / 1366){
#brand-2024 .section-add2 .add2-texts{
top: 10vw;
}
#brand-2024 .section-add2 .add2-text{
line-height: 1.3;
}
#brand-2024 .sticky-container .sec2-canvas{
transform: scale(.9) translateY(8%);
}
}
.sec-last1 .cards .item{
border-radius: 1.25vw !important;
}
/* .s03-story-carousel .story-carousel__slide .story-carousel__slide-container .story-carousel__slide-image{
border-radius: 1.25vw !important;
overflow: hidden;
} */
.s03-story-carousel .story-carousel__sliders,.s03-story-carousel .swiper-container{
border-radius: 1.25vw;
}
/* .s03-story-carousel .story-carousel__slide .story-carousel__slide-container .story-carousel__slide-image{
border-radius: 1.25vw 0 0 1.25vw;
overflow: hidden;
} */
.brand-2024 .learnmore{
width: 1.041666666666667vw !important;
height: 1.041666666666667vw;
display: inline-block !important;
}
@media (max-aspect-ratio: 660 / 758) and (max-width: 1025px){
.sec-last1 .cards .item{
border-radius: 3.2vw !important;
}
.s03-story-carousel .story-carousel__sliders{
border-radius: 3.2vw;
}
/* .s03-story-carousel .story-carousel__slide .story-carousel__slide-container .story-carousel__slide-image{
border-radius: 3.2vw 0 0 3.2vw !important;
overflow: hidden;
} */
.brand-2024 .learnmore{
width: 4.266666666666667vw !important;
height: 4.266666666666667vw;
}
}
.s03-story-carousel .-story-sliders{
border-radius: 1.25vw;
}
.s03-story-carousel .story-carousel__slide-image img{
border-radius: 1.25vw 0 0 1.25vw;
}
@media only screen and (max-width: 768px) {
.s03-story-carousel .story-carousel__slide-image img {
border-radius: 3.2vw;
}
}
/* 0609 */
#brand-2024 .sec-last1 .cards{flex-wrap: wrap;}
#brand-2024 .sec-last1 .cards .item{width: 49%;}
#brand-2024 .sec-last1 .cards .item3{width: 100%;margin-bottom: 1.302vw; color: #fff;}
#brand-2024 .sec-last1 .cards .item3 a{color: #fff;}
#brand-2024 .sec-last1 .cards .item {
flex: unset;
}
@media (max-aspect-ratio: 660 / 758) and (max-width: 1025px) {
#brand-2024 .sec-last1 .cards .item {
width: 100%;
}
#brand-2024 .sec-last1 .cards .item3{width: 100%;margin-bottom: 0vw;}
}
/* 0609-end */
作为全球领先的 AI 终端生态公司，荣耀致力于变革人机交互方式。在 AI 智能体时代，我们专注于构建 AI 生态系统与广大消费者之间的紧密联系，通过开放、共创、共享不断拓展产业边界，与合作伙伴携手构建 AI 生态。凭借涵盖智能手机、个人电脑、平板电脑、可穿戴设备等多元化的创新产品组合，荣耀旨在赋能每一位用户，让每个人都能轻松踏入并享受崭新的智能世界。
在荣耀看来，“荣耀阿尔法战略”这一名称具有独特的象征意义。Alpha 作为希腊字母表中的第一个字母，象征着荣耀对技术卓越的不懈追求。此外，在小写字母 “α” 的笔画连接处，其形状与中国汉字的“人”相似。这种东西方结合的象征，完美地体现了“世界荣耀”的全球愿景：将以人为本的理念与科技相结合，最大限度释放人的潜能。
荣耀阿尔法战略
从智能手机制造商转型成为全球领先的 AI 终端生态公司。
荣耀阿尔法战略
从智能手机制造商转型成为全球领先的 AI 终端生态公司。
第一步 打造智慧手机
在 AI 智能体时代，打开技术边界，共创 AI 终端的新范式。
第二步 构筑智慧生态
在物理 AI 时代，打开产业边界，共创 AI 生态的新范式。
第三步 拥抱智慧世界
在 AGI 时代，打开人类潜能边界，共创人类文明新范式。
青海湖电池
鲁班架构
鸿燕通信
巨犀玻璃
绿洲护眼
雅顾人像
智慧互联
网络共享｜屏幕共享｜键鼠共享｜摄像头共享｜应用流转｜ 通知共享
汇聚全球优秀人才，打造科技创新高地
深圳研发中心
南京研发中心
西安研发中心
北京研发中心
上海研发中心
法国研究所
日本研究所
国家智能制造示范工厂，行业领先的绿色制造
顶级的品控，零妥协
电源按钮测试
触摸屏耐久性测试
最大负载
指纹按键测试
-20°C~55°C之间的
*以上所有数据均来自荣耀实验室在受控环境下进行
荣耀获得第十四届金融界
荣耀青海湖刀片被《21世纪经济报道》
《财经》杂志主办的可持续发展论坛上，
荣耀荣获由中国商报颁发的
《Fast Company》2025年亚太十大最具创新力公司榜单
荣耀凭AI创新技术及产品斩获MWC 2025
荣耀全球青年计划
2023中国移动全球合作伙伴大会
荣耀MagicOS创新体验斩获6项2023德国红点奖
免责声明
以上页面中的产品图片、视频及屏幕内容仅作示意，实物产品效果（包括但不限于外观、颜色、尺寸）和屏幕显示内容（包括但不限于背景、UI、配图）可能略有差异，请以实物为准。
以上页面中的数据为理论值，均来自荣耀内部实验室，于特定测试环境下所得（请见各项具体说明），实际使用中可能因产品个体差异、软件版本、使用条件和环境因素不同略有不同，请以实际使用的情况为准。
如遇确有进行上述修改和调整必要的情形，恕不专门通知。
某些功能、应用软件和服务仅适用于部分设备、地区和语言。
更多产品
产品对比
