@charset "UTF-8";
html,
body {
  padding: 0;
  margin: 0;
  overflow: initial;
  direction: rtl;
}

html {
  direction: rtl;
}

body.is-overHidden {
  overflow: hidden;
}

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

.honormagicv5.is-loading {
  opacity: 0;
}

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

.honormagicv5 section {
  position: relative;
}

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

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

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

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

.honormagicv5 button img,
.honormagicv5 button svg {
  overflow: initial;
}

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

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

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

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 sup.placeholder {
    display: inline-block;
    opacity: 0;
  }
}
.honormagicv5 sup.static {
  position: static !important;
}

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

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

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

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

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

.honormagicv5 .nowrap {
  white-space: nowrap;
}

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

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

.honormagicv5.ff-demiBold {
  font-family: "HONOR Sans Arabic DemiBold";
}

.honormagicv5.ff-medium {
  font-family: "HONOR Sans Arabic Medium";
}

.honormagicv5.ff-regular {
  font-family: "HONOR Sans Arabic Regular";
}

.honormagicv5 .ff-demiBold {
  font-family: "HONOR Sans Arabic DemiBold";
}

.honormagicv5 .ff-medium {
  font-family: "HONOR Sans Arabic Medium";
}

.honormagicv5 .ff-regular {
  font-family: "HONOR Sans Arabic Regular";
}

.honormagicv5 .fs-50 {
  font-size: 2.5vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .fs-50 {
    font-size: 6.4vw;
  }
}
.honormagicv5 .fs-16 {
  font-size: 0.8333333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .fs-16 {
    font-size: 3.2vw;
  }
}
.honormagicv5 .sticky-container {
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .sticky-container {
    top: 52px;
    height: calc(100vh - 52px);
  }
}
.honormagicv5 .common-copy-wrapper .common-subtitle {
  display: inline-block;
  font-size: 1.5625vw;
  margin-bottom: 1.25vw;
  background: linear-gradient(271deg, #a78266 -0.79%, #e7d1b4 99.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .common-copy-wrapper .common-subtitle {
    font-size: 4.2666666667vw;
    margin-bottom: 2.6666666667vw;
  }
}
.honormagicv5 .common-copy-wrapper .common-copy {
  margin-top: 1.3020833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .common-copy-wrapper .common-copy {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-kv {
  background: #000;
}

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

.honormagicv5 .section-kv .kv-container {
  position: relative;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .kv-container {
    padding-top: 16vw;
  }
}
.honormagicv5 .section-kv .bg {
  height: 56.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .bg {
    height: 125.2vw;
  }
}
.honormagicv5 .section-kv .copy-wrapper {
  position: absolute;
  top: 50%;
  left: 69.2708333333vw;
  width: 39.0625vw;
  transform: translateX(-50%) translateY(-100%);
  text-align: center;
  color: #fff;
  z-index: 2;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .copy-wrapper {
    position: static;
    transform: none;
    width: 89.3333333333vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-kv .copy-wrapper .productname {
  width: 41.4583333333vw;
  height: 4.375vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .copy-wrapper .productname {
    width: 73.6vw;
    height: 7.7668341709vw;
  }
}
.honormagicv5 .section-kv .copy-wrapper .slogan {
  font-size: 2.1875vw;
  margin-top: 2.0833333333vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .copy-wrapper .slogan {
    font-size: 3.7333333333vw;
    margin-top: 4vw;
  }
}
.honormagicv5 .section-kv .copy-wrapper .slogan .aistar {
  display: inline-block;
  width: 3.90625vw;
  height: 1.9791666667vw;
  transform: translateY(-0.55vw);
  margin-left: 0.5vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .copy-wrapper .slogan .aistar {
    width: 6.9333333333vw;
    height: 3.5128888889vw;
    transform: translateY(-0.85vw);
    margin-left: 1vw;
  }
}
.honormagicv5 .section-kv .copy-wrapper .slogan .line {
  display: inline-block;
  width: 1px;
  height: 1.6666666667vw;
  margin: 0 0.78125vw;
  background: #fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .copy-wrapper .slogan .line {
    height: 3.7333333333vw;
    margin: 0 1.6vw;
  }
}
.honormagicv5 .section-kv .button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .button-wrapper {
    margin-top: 4vw;
  }
}
.honormagicv5 .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) {
  .honormagicv5 .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) {
  .honormagicv5 .section-kv .kvBuyBtn:hover {
    border-color: #fff;
  }
}
.honormagicv5 .section-kv .playBtn {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin: 0 0.78125vw;
  font-size: 0.9375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .playBtn {
    font-size: 3.7333333333vw;
    margin: 0 1.3333333333vw;
  }
}
.honormagicv5 .section-kv .playBtn .icon-play {
  width: 0.9375vw;
  height: 0.9895833333vw;
  margin-left: 0.3645833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .playBtn .icon-play {
    width: 4.8vw;
    height: 5.0666666667vw;
    margin-left: 1.8666666667vw;
  }
}
.honormagicv5 .section-kv .magicos-wrapper {
  position: absolute;
  z-index: 2;
  bottom: 1.5625vw;
  right: 2.34375vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: scale(0.33);
  transform-origin: 100% 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .magicos-wrapper {
    transform: scale(0.2);
    transform-origin: 100% 100%;
    bottom: 4vw;
    right: 4vw;
  }
}
.honormagicv5 .section-kv .magicos-wrapper .magicos-logo {
  width: 15.3541666667vw;
  height: 3.6666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .magicos-wrapper .magicos-logo {
    width: 54vw;
    height: 12.8955223881vw;
  }
}
.honormagicv5 .section-kv .magicos-wrapper .magicos-copy {
  font-size: 12px;
  margin-top: 2.34375vw;
  width: 1300px;
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-kv .magicos-wrapper .magicos-copy {
    font-size: 16px;
    margin-top: 3.6vw;
    width: 1700px;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-kv .magicos-wrapper .magicos-copy {
    font-size: 12px;
    width: 850px;
  }
}
.honormagicv5 .section-highlights {
  z-index: 3;
  background: #000;
}

.honormagicv5 .section-highlights.is-active .item-wrapper {
  transform: translateX(71.3541666667vw);
  justify-content: flex-end;
}

.honormagicv5 .section-highlights.is-active .item-wrapper .item5.is-active .copy-wrapper {
  transform: translateX(-4.1666666667vw);
}

.honormagicv5 .section-highlights.is-active .button-wrapper .prevBtn {
  pointer-events: visible;
}

.honormagicv5 .section-highlights.is-active .button-wrapper .prevBtn .arrow-gold {
  opacity: 1;
}

.honormagicv5 .section-highlights.is-active .button-wrapper .nextBtn {
  pointer-events: none;
}

.honormagicv5 .section-highlights.is-active .button-wrapper .nextBtn .arrow-gold {
  opacity: 0;
}

.honormagicv5 .section-highlights .highlights-container {
  position: relative;
  overflow: hidden;
  padding: 10.4166666667vw 0 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .highlights-container {
    padding: 21.3333333333vw 0;
  }
}
.honormagicv5 .section-highlights .mask {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-42%);
  width: 139.0625vw;
  height: 100%;
  max-height: 49.4791666667vw;
  border-radius: 50%;
  opacity: 0.7;
  background: radial-gradient(50% 50% at 50% 50%, rgba(129, 106, 86, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .mask {
    width: 120%;
    height: 150%;
    max-height: none;
    transform: translateX(-50%) translateY(-50%);
    background: radial-gradient(60% 50% at 50% 50%, rgba(129, 106, 86, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 1;
    filter: blur(2px);
  }
}
.honormagicv5 .section-highlights .blackmask {
  display: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .blackmask {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 21.3333333333vw;
    pointer-events: none;
  }
}
.honormagicv5 .section-highlights .blackmask1 {
  top: 0;
  background: linear-gradient(180deg, #000, transparent);
}

.honormagicv5 .section-highlights .blackmask2 {
  bottom: 0;
  background: linear-gradient(0deg, #000, transparent);
}

.honormagicv5 .section-highlights .highlights-title {
  margin-right: 6.25vw;
  width: 52.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .highlights-title {
    margin-right: 8.6666666667vw;
    width: 82.6666666667vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper {
  display: flex;
  margin-top: 2.6041666667vw;
  padding-right: 6.25vw;
  width: 165vw;
  transition: transform 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper {
    display: block;
    width: 82.6666666667vw;
    margin: 6.4vw auto 0;
    padding-right: 0;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item {
  position: relative;
  width: 18.75vw;
  height: 34.375vw;
  transition: all 0.5s ease;
  display: block;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item {
    width: 100%;
    height: auto;
    background: #000;
    border-radius: 6.4vw;
    padding-top: 8vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item.is-edge {
  width: 0;
}

.honormagicv5 .section-highlights .item-wrapper .item.is-active {
  width: 37.5vw;
}

.honormagicv5 .section-highlights .item-wrapper .item.is-active .copy-wrapper {
  width: 70%;
}

.honormagicv5 .section-highlights .item-wrapper .item.is-active .copy-wrapper .copy {
  opacity: 1;
}

.honormagicv5 .section-highlights .item-wrapper .item.is-active .copy-wrapper .hoverShow {
  display: block;
  line-height: 0;
  height: 0;
}

.honormagicv5 .section-highlights .item-wrapper .item:not(:first-of-type) {
  margin-right: 1.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item:not(:first-of-type) {
    margin-right: 0;
    margin-top: 3.2vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item1 .bg-wrapper {
    margin-top: -29.3333333333vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item1 .bg-wrapper .before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 37.5vw;
  height: 100%;
  transform: translateX(-40%);
  transition: opacity 0.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item1 .bg-wrapper .before {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    height: 144vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item1 .bg-wrapper .after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 37.5vw;
  height: 100%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.honormagicv5 .section-highlights .item-wrapper .item1.is-active .bg-wrapper .before {
  opacity: 0;
}

.honormagicv5 .section-highlights .item-wrapper .item1.is-active .bg-wrapper .after {
  opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item2 .bg-wrapper {
    margin-top: -40vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item2 .bg-wrapper .before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 37.5vw;
  height: 34.375vw;
  transition: transform 0.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item2 .bg-wrapper .before {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    height: 144vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item2.is-active .bg-wrapper .before {
  transform: translateX(-50%) translateY(-50%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item3 .bg-wrapper {
    margin-top: -40vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item3 .bg-wrapper .before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-7%) scale(0.94);
  width: 37.5vw;
  height: 100%;
  transition: transform 0.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item3 .bg-wrapper .before {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    height: 144vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item3.is-active .bg-wrapper .before {
  transform: translateX(-50%);
}

.honormagicv5 .section-highlights .item-wrapper .item3.is-active .bg-wrapper .after {
  opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item4 .bg-wrapper {
    margin-top: -40vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item4 .bg-wrapper .before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-42%) translateY(-51%);
  width: 37.8125vw;
  height: 37.9166666667vw;
  transition: transform 0.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item4 .bg-wrapper .before {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    height: 144vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item4.is-active .bg-wrapper .before {
  transform: translateX(-45%) translateY(-44.5%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item5 .bg-wrapper {
    margin-top: -40vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item5 .bg-wrapper .before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-43%) scale(0.84);
  width: 37.5vw;
  height: 30.8333333333vw;
  transition: transform 0.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item5 .bg-wrapper .before {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    height: 144vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item5 .copy-wrapper {
  transition: transform 0.5s ease;
}

.honormagicv5 .section-highlights .item-wrapper .item5.is-active .bg-wrapper .before {
  transform: translateX(-50%) translateY(-31%);
}

.honormagicv5 .section-highlights .item-wrapper .item6 {
  cursor: default;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item6 .bg-wrapper {
    margin-top: -40vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item6 .bg-wrapper .before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 37.5vw;
  height: 100%;
  transform: translateX(-50%) translateY(-50%);
  transition: transform 0.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item6 .bg-wrapper .before {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    height: 144vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item6 .bg-wrapper .after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 37.5vw;
  height: 100%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.honormagicv5 .section-highlights .item-wrapper .item6.is-active .bg-wrapper .before {
  transform: translateX(-50%) translateY(-40%);
}

.honormagicv5 .section-highlights .item-wrapper .item6.is-active .bg-wrapper .after {
  opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item7 .bg-wrapper {
    margin-top: -29.3333333333vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item7 .bg-wrapper .before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 18.75vw;
  height: 25.3125vw;
  transform: translateX(-50%);
  transition: opacity 0.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item7 .bg-wrapper .before {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    height: 144vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item7 .bg-wrapper .after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 37.5vw;
  height: 24.6354166667vw;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.honormagicv5 .section-highlights .item-wrapper .item7.is-active .bg-wrapper .before {
  opacity: 0;
}

.honormagicv5 .section-highlights .item-wrapper .item7.is-active .bg-wrapper .after {
  opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item8 .bg-wrapper {
    margin-top: -26.6666666667vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item8 .bg-wrapper .before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-48%) translateY(-50%) scale(0.9);
  width: 37.5vw;
  height: 40.5729166667vw;
  transition: transform 0.5s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .item8 .bg-wrapper .before {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    height: 144vw;
  }
}
.honormagicv5 .section-highlights .item-wrapper .item8.is-active .bg-wrapper .before {
  transform: translateX(-50%) translateY(-48%);
}

.honormagicv5 .section-highlights .item-wrapper .copy-wrapper {
  position: absolute;
  z-index: 3;
  top: 1.5625vw;
  right: 1.8229166667vw;
  width: 15.1041666667vw;
  text-align: right;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .copy-wrapper {
    position: relative;
    z-index: 2;
    top: auto;
    right: auto;
    width: 69.8666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-highlights .item-wrapper .copy-wrapper .subtitle {
  display: inline-block;
  background: linear-gradient(271deg, #a78266 -0.79%, #e7d1b4 99.78%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.3541666667vw;
  margin-bottom: 0.2604166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .copy-wrapper .subtitle {
    font-size: 4.8vw;
    margin-bottom: 1.3333333333vw;
    font-family: "HONOR Sans Arabic Medium";
  }
}
.honormagicv5 .section-highlights .item-wrapper .copy-wrapper .title {
  font-size: 1.3541666667vw;
  transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .copy-wrapper .title {
    display: none;
  }
}
.honormagicv5 .section-highlights .item-wrapper .copy-wrapper .copy {
  width: 29.1666666667vw;
  font-size: 0.9375vw;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .copy-wrapper .copy {
    width: 100%;
    font-size: 3.2vw;
    opacity: 1;
  }
}
.honormagicv5 .section-highlights .item-wrapper .copy-wrapper .hoverShow {
  display: none;
}

.honormagicv5 .section-highlights .item-wrapper .bg-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1.25vw;
  transform: rotate(0);
  width: 100%;
  height: 100%;
  background: #000;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-highlights .item-wrapper .bg-wrapper {
    border-radius: 0;
  }
}
.honormagicv5 .section-highlights .button-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  position: absolute;
  bottom: 42.1875vw;
  left: 6.25vw;
}

.honormagicv5 .section-highlights .button-wrapper .arrowBtn {
  position: relative;
  width: 2.265625vw;
  height: 2.265625vw;
}

.honormagicv5 .section-highlights .button-wrapper .prevBtn {
  margin-left: 0.78125vw;
  pointer-events: none;
}

.honormagicv5 .section-highlights .button-wrapper .prevBtn .arrow-gold {
  opacity: 0;
}

.honormagicv5 .section-highlights .button-wrapper .nextBtn {
  transform: rotate(180deg);
}

.honormagicv5 .section-highlights .button-wrapper .arrow-gold {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 4.5052083333vw;
  height: 4.53125vw;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.honormagicv5 .section-thin {
  z-index: 3;
  margin-top: -5.2083333333vw;
  height: 180vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin {
    margin-top: -26.6666666667vw;
    height: 130vh;
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-thin {
    height: auto;
  }
}
.honormagicv5 .section-thin.is-playStart .copy-wrapper.wrapper1 {
  opacity: 0;
}

.honormagicv5 .section-thin.is-playEnd .copy-wrapper.wrapper2 {
  opacity: 1;
}

.honormagicv5 .section-thin #trigger-thin-1,
.honormagicv5 .section-thin #trigger-ga {
  position: absolute;
  top: 5vh;
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-thin .sticky-container {
    position: relative;
    top: auto;
    height: auto;
  }
}
.honormagicv5 .section-thin .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-50.5%) translateY(calc(-100% - 6.7708333333vw));
  display: flex;
  justify-content: space-between;
  width: 52.0833333333vw;
  transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .copy-wrapper {
    transform: translateX(-50%) translateY(-50%);
    width: 90.6666666667vw;
    flex-direction: column-reverse;
    transition: none;
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-thin .copy-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
  }
}
.honormagicv5 .section-thin .copy-wrapper .thin-title {
  display: none;
}

.honormagicv5 .section-thin .copy-wrapper .thin-copy {
  font-size: 0.9375vw;
  color: #e7d1b4;
  width: 21.3541666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .copy-wrapper .thin-copy {
    font-size: 3.2vw;
    width: 100%;
    text-align: center;
    margin-top: 58.6666666667vw;
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-thin .copy-wrapper .thin-copy {
    margin-top: 48vw;
  }
}
.honormagicv5 .section-thin .copy-wrapper .spec-wrapper .title {
  font-size: 0.8333333333vw;
  color: #e7d1b4;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .copy-wrapper .spec-wrapper .title {
    font-size: 3.2vw;
    text-align: center;
  }
}
.honormagicv5 .section-thin .copy-wrapper .spec-wrapper .copy {
  font-size: 4.1666666667vw;
  background: linear-gradient(0deg, #e7d1b4 26.5%, #654d3c 83%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: -0.6770833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .copy-wrapper .spec-wrapper .copy {
    font-size: 16vw;
    text-align: center;
    margin-top: -1.6vw;
  }
}
.honormagicv5 .section-thin .copy-wrapper .spec-wrapper .copy > span {
  display: inline-block;
  font-size: 2.3958333333vw;
  margin-left: 0.2604166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .copy-wrapper .spec-wrapper .copy > span {
    font-size: 8vw;
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-thin .copy-wrapper.wrapper1 {
    top: 56vw;
    transform: translateX(-50%) translateY(-50%);
  }
}
.honormagicv5 .section-thin .copy-wrapper.wrapper2 {
  opacity: 0;
  transform: translateX(27.6041666667vw) translateY(5.7291666667vw);
  justify-content: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .copy-wrapper.wrapper2 {
    transform: translateX(-50%) translateY(-58.6666666667vw);
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-thin .copy-wrapper.wrapper2 {
    transform: translateX(-50%) translateY(-80vw);
  }
}
@media (min-aspect-ratio: 360/682) and (max-width: 500px) {
  .honormagicv5 .section-thin .copy-wrapper.wrapper2 {
    transform: translateX(-50%) translateY(-66.6666666667vw);
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-thin .copy-wrapper.wrapper2 {
    top: 146.6666666667vw;
    transform: translateX(-50%);
  }
}
.honormagicv5 .section-thin .bg-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.honormagicv5 .section-thin .bg-wrapper #canvas-thin {
  width: 100%;
  height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .bg-wrapper .item {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-thin .bg-wrapper .item {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .bg-wrapper .item1 {
    height: 121.8666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-thin .bg-wrapper .item2 {
    height: 202.6666666667vw;
  }
}
.honormagicv5 .section-deco {
  margin-top: -100vh;
  height: 220vh;
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-deco {
    margin-top: 0;
    height: auto;
  }
}
.honormagicv5 .section-deco #trigger-deco-1,
.honormagicv5 .section-deco #trigger-ga {
  position: absolute;
  top: 100vh;
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-deco #trigger-deco-1,
  .honormagicv5 .section-deco #trigger-ga {
    position: static;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-deco .sticky-container .bg {
    height: 140%;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-deco .sticky-container .bg {
    height: 100%;
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-deco .sticky-container {
    position: relative;
    top: auto;
    height: auto;
  }
  .honormagicv5 .section-deco .sticky-container .bg {
    height: 202.6666666667vw;
  }
}
.honormagicv5 .section-deco .copy-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52.0833333333vw;
  text-align: center;
  color: #fff2e0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-deco .copy-wrapper {
    width: 82.6666666667vw;
  }
}
.honormagicv5 .section-deco .copy-wrapper .deco-copy {
  margin-top: 1.3020833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-deco .copy-wrapper .deco-copy {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-cmf.is-color-orange .bg-wrapper .item[data-color=orange] {
  opacity: 1;
}

.honormagicv5 .section-cmf.is-color-orange .copy-wrapper .item[data-color=gold] {
  opacity: 0;
}

.honormagicv5 .section-cmf.is-color-orange .copy-wrapper .item[data-color=orange] {
  opacity: 1;
}

.honormagicv5 .section-cmf.is-color-orange .button-wrapper .border {
  transform: translateX(-2.734375vw) translateY(-50%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf.is-color-orange .button-wrapper .border {
    transform: translateX(-8.5333333333vw) translateY(-50%);
  }
}
.honormagicv5 .section-cmf.is-color-white .bg-wrapper .item[data-color=white] {
  opacity: 1;
}

.honormagicv5 .section-cmf.is-color-white .copy-wrapper .item[data-color=gold] {
  opacity: 0;
}

.honormagicv5 .section-cmf.is-color-white .copy-wrapper .item[data-color=white] {
  opacity: 1;
}

.honormagicv5 .section-cmf.is-color-white .button-wrapper .border {
  transform: translateX(-5.46875vw) translateY(-50%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf.is-color-white .button-wrapper .border {
    transform: translateX(-17.0666666667vw) translateY(-50%);
  }
}
.honormagicv5 .section-cmf.is-color-black .bg-wrapper .item[data-color=black] {
  opacity: 1;
}

.honormagicv5 .section-cmf.is-color-black .copy-wrapper .item[data-color=gold] {
  opacity: 0;
}

.honormagicv5 .section-cmf.is-color-black .copy-wrapper .item[data-color=black] {
  opacity: 1;
}

.honormagicv5 .section-cmf.is-color-black .button-wrapper .border {
  transform: translateX(-8.203125vw) translateY(-50%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf.is-color-black .button-wrapper .border {
    transform: translateX(-25.6vw) translateY(-50%);
  }
}
.honormagicv5 .section-cmf .cmf-container {
  position: relative;
  overflow: hidden;
}

.honormagicv5 .section-cmf .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-39.0625vw) translateY(calc(-100% + 1.875vw));
  width: 20.8333333333vw;
  color: #000;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf .copy-wrapper {
    transform: translateX(-50%) translateY(calc(-100% - 58.6666666667vw));
    width: 69.3333333333vw;
    text-align: center;
  }
}
.honormagicv5 .section-cmf .copy-wrapper .item {
  transition: opacity 0.3s ease;
}

.honormagicv5 .section-cmf .copy-wrapper .item[data-color=orange],
.honormagicv5 .section-cmf .copy-wrapper .item[data-color=white],
.honormagicv5 .section-cmf .copy-wrapper .item[data-color=black] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.honormagicv5 .section-cmf .copy-wrapper .title {
  font-size: 2.9166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf .copy-wrapper .title {
    font-size: 7.4666666667vw;
  }
}
.honormagicv5 .section-cmf .copy-wrapper .copy {
  font-size: 0.9375vw;
  margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf .copy-wrapper .copy {
    font-size: 3.2vw;
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-cmf .swiper-container-cmf {
  position: relative;
  height: 56.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf .swiper-container-cmf {
    height: 202.6666666667vw;
  }
}
.honormagicv5 .section-cmf .button-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  padding: 0.8854166667vw 1.6666666667vw;
  transform: translateX(25vw) translateY(-50%);
  border-radius: 2.6041666667vw;
  background: rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(0.5208333333vw);
  backdrop-filter: blur(0.5208333333vw);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf .button-wrapper {
    padding: 2.6666666667vw 5.3333333333vw;
    border-radius: 13.3333333333vw;
    transform: translateX(-50%) translateY(66.6666666667vw) scale(1.3);
    background: rgba(3, 3, 3, 0.2);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}
.honormagicv5 .section-cmf .button-wrapper .cmfBtn {
  width: 1.5364583333vw;
  height: 1.5364583333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf .button-wrapper .cmfBtn {
    width: 4.8vw;
    height: 4.8vw;
  }
}
.honormagicv5 .section-cmf .button-wrapper .cmfBtn:not(:first-of-type) {
  margin-right: 1.1979166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf .button-wrapper .cmfBtn:not(:first-of-type) {
    margin-right: 3.7333333333vw;
  }
}
.honormagicv5 .section-cmf .button-wrapper .border {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 1.3020833333vw;
  width: 2.2135416667vw;
  height: 2.2395833333vw;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-cmf .button-wrapper .border {
    right: 4.2666666667vw;
    width: 6.9333333333vw;
    height: 6.9333333333vw;
  }
}
.honormagicv5 .section-battery {
  --background-title: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-battery {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-battery .battery-container {
  position: relative;
  overflow: hidden;
}

.honormagicv5 .section-battery .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 12.5vw;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 75vw;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-battery .copy-wrapper {
    position: static;
    transform: none;
    width: 93.3333333333vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-battery .copy-wrapper .battery-subtitle {
  display: inline-block;
  font-size: 2.6041666667vw;
  background: linear-gradient(268deg, #e7d1b4 calc(-60% + var(--background-title)), #654d3c calc(9.35% + var(--background-title)), #e7d1b4 calc(90.69% + var(--background-title)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-battery .copy-wrapper .battery-subtitle {
    font-size: 4.8vw;
  }
}
.honormagicv5 .section-battery .copy-wrapper .battery-title {
  display: inline-block;
  font-size: 3.6458333333vw;
  background: linear-gradient(268deg, #e7d1b4 calc(-60% + var(--background-title)), #654d3c calc(9.35% + var(--background-title)), #e7d1b4 calc(90.69% + var(--background-title)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-battery .copy-wrapper .battery-title {
    font-size: 7.4666666667vw;
    margin-top: 1.3333333333vw;
  }
}
.honormagicv5 .section-battery .bg {
  width: 100%;
  height: 56.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-battery .bg {
    height: 180vw;
  }
}
.honormagicv5 .section-battery .battery-note {
  position: absolute;
  z-index: 2;
  bottom: 2.6041666667vw;
  right: 2.6041666667vw;
  width: 26.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-battery .battery-note {
    right: auto;
    left: 9.3333333333vw;
    bottom: 26.6666666667vw;
    width: 81.3333333333vw;
    font-size: 2.9333333333vw;
  }
}
.honormagicv5 .section-material {
  height: 180vh;
  margin-top: 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material {
    height: auto;
    margin-top: 13.3333333333vw;
  }
}
.honormagicv5 .section-material .sticky-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .sticky-container {
    position: static;
    height: auto;
  }
}
.honormagicv5 .section-material .material-container {
  position: relative;
  width: 75vw;
  height: 37.5vw;
  transform-origin: 50% 0%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .material-container {
    width: 82.9333333333vw;
    height: 160vw;
  }
}
.honormagicv5 .section-material .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(9.375vw) translateY(-50%);
  width: 27.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .copy-wrapper {
    top: 8vw;
    left: 8vw;
    width: 66.9333333333vw;
    transform: none;
  }
}
.honormagicv5 .section-material .copy-wrapper .material-copy {
  margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .copy-wrapper .material-copy {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-material .spec-wrapper {
  margin-top: 1.3020833333vw;
  display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .spec-wrapper {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-material .spec-wrapper .item2 {
  margin-left: 3.90625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .spec-wrapper .item2 {
    margin-left: 12vw;
  }
}
.honormagicv5 .section-material .spec-wrapper .title {
  background: linear-gradient(180deg, #e7d1b4 -20.68%, #654d3c 9.06%, #e7d1b4 96.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.125vw;
  /* line-height: 3.125vw; */
  display: flex;
  align-items: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .spec-wrapper .title {
    font-size: 10.1333333333vw;
    /* line-height: 10.1333333333vw; */
  }
}
.honormagicv5 .section-material .spec-wrapper .title > span {
  display: inline-block;
  font-size: 1.1458333333vw;
  margin-bottom: 1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .spec-wrapper .title > span {
    font-size: 3.7333333333vw;
    margin-bottom: 3vw;
  }
}
.honormagicv5 .section-material .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  margin-top: -1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-material .spec-wrapper .copy {
    font-size: 3.2vw;
    /* margin-top: 1.0666666667vw; */
    margin-top: -2.3vw;
  }
}
.honormagicv5 .section-power {
  margin-top: -180vh;
  height: 180vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-power {
    margin-top: 6.4vw;
    height: auto;
  }
}
.honormagicv5 .section-power #trigger-power-1,
.honormagicv5 .section-power #trigger-ga {
  position: absolute;
  top: 20vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-power #trigger-power-1,
  .honormagicv5 .section-power #trigger-ga {
    position: static;
  }
}
.honormagicv5 .section-power .sticky-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-power .sticky-container {
    position: static;
    height: auto;
  }
}
.honormagicv5 .section-power .power-container {
  position: relative;
  width: 75vw;
  height: 37.5vw;
  transform-origin: 50% 0%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-power .power-container {
    width: 82.9333333333vw;
    height: 160vw;
  }
}
.honormagicv5 .section-power .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-32.2916666667vw) translateY(-50%);
  width: 21.3541666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-power .copy-wrapper {
    top: 8vw;
    left: 8vw;
    width: 66.9333333333vw;
    transform: none;
  }
}
.honormagicv5 .section-power .copy-wrapper .power-copy {
  margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-power .copy-wrapper .power-copy {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-charge {
  margin-top: -180vh;
  height: 180vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge {
    margin-top: 6.4vw;
    height: auto;
  }
}
.honormagicv5 .section-charge #trigger-charge-1,
.honormagicv5 .section-charge #trigger-ga {
  position: absolute;
  top: 50vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge #trigger-charge-1,
  .honormagicv5 .section-charge #trigger-ga {
    position: static;
  }
}
.honormagicv5 .section-charge #trigger-charge-2 {
  position: absolute;
  top: 60vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge #trigger-charge-2 {
    position: static;
  }
}
.honormagicv5 .section-charge .sticky-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .sticky-container {
    position: static;
    height: auto;
  }
}
.honormagicv5 .section-charge .charge-container {
  position: relative;
  width: 75vw;
  height: 37.5vw;
  transform-origin: 50% 0%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .charge-container {
    width: 82.9333333333vw;
    height: 160vw;
  }
}
.honormagicv5 .section-charge .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(9.375vw) translateY(-50%);
  width: 26.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .copy-wrapper {
    top: 8vw;
    left: 8vw;
    width: 66.9333333333vw;
    transform: none;
  }
}
.honormagicv5 .section-charge .copy-wrapper .charge-copy {
  margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .copy-wrapper .charge-copy {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-charge .spec-wrapper {
  margin-top: 1.3020833333vw;
  display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .spec-wrapper {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-charge .spec-wrapper .item2 {
  margin-right: 3.3854166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .spec-wrapper .item2 {
    margin-right: 8vw;
  }
}
.honormagicv5 .section-charge .spec-wrapper .title {
  background: linear-gradient(180deg, #e7d1b4 -20.68%, #654d3c 9.06%, #e7d1b4 96.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.125vw;
  /* line-height: 3.125vw; */
  display: flex;
  align-items: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .spec-wrapper .title {
    font-size: 10.1333333333vw;
    /* line-height: 10.1333333333vw; */
  }
}
.honormagicv5 .section-charge .spec-wrapper .title > span {
  display: inline-block;
  font-size: 1.1458333333vw;
  margin-bottom: 1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .spec-wrapper .title > span {
    font-size: 3.7333333333vw;
    margin-bottom: 3vw;
  }
}
.honormagicv5 .section-charge .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  margin-top: -1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .spec-wrapper .copy {
    font-size: 3.2vw;
    /* margin-top: 1.0666666667vw; */
    margin-top: -2.3vw;
  }
}
.honormagicv5 .section-charge .bg-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .bg-wrapper {
    padding-top: 76vw;
  }
}
.honormagicv5 .section-charge .bg-wrapper .bg {
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-charge .bg-wrapper .video-charge {
    height: 73.0666666667vw;
  }
}
.honormagicv5 .section-ai {
  --background-title: 100%;
}

.honormagicv5 .section-ai .ai-container {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.honormagicv5 .section-ai .ai-title {
  position: relative;
  z-index: 3;
  display: inline-block;
  background: linear-gradient(268deg, #e7d1b4 calc(-60% + var(--background-title)), #654d3c calc(9.35% + var(--background-title)), #e7d1b4 calc(90.69% + var(--background-title)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  width: 75vw;
  font-size: 3.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-ai .ai-title {
    width: 93.3333333333vw;
    font-size: 7.4666666667vw;
  }
}
.honormagicv5 .section-ai .video-ai {
  height: 56.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-ai .video-ai {
    height: 147.7333333333vw;
    margin-top: 16vw;
  }
}
.honormagicv5 .section-ai .bg {
  height: 57.2395833333vw;
  margin-top: -4.4270833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-ai .bg {
    height: 128vw;
    margin-top: -4vw;
  }
}
.honormagicv5 .section-assistant {
  margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-assistant {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-assistant .assistant-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-assistant .assistant-container {
    width: 100%;
    display: block;
    padding-bottom: 6.6666666667vw;
  }
}
.honormagicv5 .section-assistant .copy-wrapper {
  position: relative;
  z-index: 2;
  width: 34.375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-assistant .copy-wrapper {
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-assistant .copy-wrapper .logo-google {
  width: 20.8333333333vw;
  height: 3.2464212679vw;
  margin-bottom: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-assistant .copy-wrapper .logo-google {
    width: 50.6666666667vw;
    height: 7.8952965235vw;
    margin-bottom: 0.8vw;
  }
}
.honormagicv5 .section-assistant .bg-wrapper {
  position: relative;
  width: 47.9166666667vw;
  height: 33.2291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-assistant .bg-wrapper {
    width: 100%;
    height: 69.347826087vw;
    margin-top: 10.6666666667vw;
  }
}
.honormagicv5 .section-assistant .bg-wrapper .replayBtn,
.honormagicv5 .section-assistant .bg-wrapper .pauseBtn {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 5.46875vw;
  width: 1.6666666667vw;
  height: 1.6666666667vw;
  opacity: 0;
  visibility: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-assistant .bg-wrapper .replayBtn,
  .honormagicv5 .section-assistant .bg-wrapper .pauseBtn {
    width: 8vw;
    height: 8vw;
    left: 6.4vw;
  }
}
.honormagicv5 .section-assistant .bg-wrapper .replayBtn.is-active,
.honormagicv5 .section-assistant .bg-wrapper .pauseBtn.is-active {
  opacity: 1;
  visibility: visible;
}

.honormagicv5 .section-gemini {
  margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-gemini {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-gemini .gemini-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-gemini .gemini-container {
    width: 100%;
    display: block;
    padding-bottom: 21.3333333333vw;
  }
}
.honormagicv5 .section-gemini .copy-wrapper {
  position: relative;
  z-index: 2;
  width: 34.375vw;
  margin-left: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-gemini .copy-wrapper {
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-gemini .copy-wrapper .logo-google {
  width: 20.8333333333vw;
  height: 3.2464212679vw;
  margin-bottom: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-gemini .copy-wrapper .logo-google {
    width: 50.6666666667vw;
    height: 7.8952965235vw;
    margin-bottom: 0.8vw;
  }
}
.honormagicv5 .section-gemini .copy-wrapper .gemini-note {
  font-size: 0.7291666667vw;
  margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-gemini .copy-wrapper .gemini-note {
    font-size: 2.6666666667vw;
    margin-top: 0;
    position: absolute;
    top: calc(100% + 85.347826087vw);
    left: 0;
  }
}
.honormagicv5 .section-gemini .bg-wrapper {
  position: relative;
  width: 47.9166666667vw;
  height: 33.2291666667vw;
  transform: translateX(2.6041666667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-gemini .bg-wrapper {
    width: 100%;
    height: 69.347826087vw;
    transform: none;
    margin-top: 10.6666666667vw;
  }
}
.honormagicv5 .section-gemini .bg-wrapper .replayBtn,
.honormagicv5 .section-gemini .bg-wrapper .pauseBtn {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 5.46875vw;
  width: 1.6666666667vw;
  height: 1.6666666667vw;
  opacity: 0;
  visibility: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-gemini .bg-wrapper .replayBtn,
  .honormagicv5 .section-gemini .bg-wrapper .pauseBtn {
    width: 8vw;
    height: 8vw;
    left: 6.4vw;
  }
}
.honormagicv5 .section-gemini .bg-wrapper .replayBtn.is-active,
.honormagicv5 .section-gemini .bg-wrapper .pauseBtn.is-active {
  opacity: 1;
  visibility: visible;
}

.honormagicv5 .section-golive {
  margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-golive {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-golive .golive-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-golive .golive-container {
    width: 100%;
    display: block;
    padding-bottom: 21.3333333333vw;
  }
}
.honormagicv5 .section-golive .copy-wrapper {
  position: relative;
  z-index: 2;
  width: 34.375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-golive .copy-wrapper {
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-golive .copy-wrapper .logo-google {
  width: 20.8333333333vw;
  height: 3.2464212679vw;
  margin-bottom: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-golive .copy-wrapper .logo-google {
    width: 50.6666666667vw;
    height: 7.8952965235vw;
    margin-bottom: 0.8vw;
  }
}
.honormagicv5 .section-golive .copy-wrapper .golive-note {
  font-size: 0.7291666667vw;
  margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-golive .copy-wrapper .golive-note {
    font-size: 2.6666666667vw;
    margin-top: 0;
    position: absolute;
    top: calc(100% + 85.347826087vw);
    left: 0;
  }
}
.honormagicv5 .section-golive .bg-wrapper {
  position: relative;
  width: 47.9166666667vw;
  height: 33.2291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-golive .bg-wrapper {
    width: 100%;
    height: 69.347826087vw;
    margin-top: 10.6666666667vw;
  }
}
.honormagicv5 .section-golive .bg-wrapper .replayBtn,
.honormagicv5 .section-golive .bg-wrapper .pauseBtn {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 5.46875vw;
  width: 1.6666666667vw;
  height: 1.6666666667vw;
  opacity: 0;
  visibility: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-golive .bg-wrapper .replayBtn,
  .honormagicv5 .section-golive .bg-wrapper .pauseBtn {
    width: 8vw;
    height: 8vw;
    left: 6.4vw;
  }
}
.honormagicv5 .section-golive .bg-wrapper .replayBtn.is-active,
.honormagicv5 .section-golive .bg-wrapper .pauseBtn.is-active {
  opacity: 1;
  visibility: visible;
}

.honormagicv5 .section-interconnectivity {
  margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-interconnectivity {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-interconnectivity .interconnectivity-container {
  position: relative;
  overflow: hidden;
}

.honormagicv5 .section-interconnectivity .copy-wrapper {
  position: relative;
  z-index: 3;
  width: 29.1666666667vw;
  margin-right: 12.5vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-interconnectivity .copy-wrapper {
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-interconnectivity .bg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 66.1458333333vw;
  margin-top: -13.0208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-interconnectivity .bg {
    height: 188.8vw;
    margin-top: -40vw;
  }
}
.honormagicv5 .section-interconnectivity .wave-wrapper {
  position: absolute;
  bottom: 4.1666666667vw;
  left: 50%;
  transform: translateX(-50%);
  width: 46.875vw;
  height: 46.875vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-interconnectivity .wave-wrapper {
    bottom: 34.6666666667vw;
    width: 100vw;
    height: 100vw;
    transform: translateX(-50%) scale(1.5);
  }
}
.honormagicv5 .section-interconnectivity .wave-wrapper .wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: ripple 3s linear infinite;
  background: radial-gradient(50% 50% at 50% 50%, transparent 80%, #c6a779);
  opacity: 0;
}

@keyframes ripple {
  0% {
    transform: scale(0.3);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.honormagicv5 .section-interconnectivity .wave-wrapper .wave:nth-child(2) {
  animation-delay: 0.6s;
}

.honormagicv5 .section-interconnectivity .wave-wrapper .wave:nth-child(3) {
  animation-delay: 1.2s;
}

.honormagicv5 .section-interconnectivity .wave-wrapper .wave:nth-child(4) {
  animation-delay: 1.8s;
}

.honormagicv5 .section-interconnectivity .wave-wrapper .wave:nth-child(5) {
  animation-delay: 2.4s;
}

.honormagicv5 .section-call {
  margin-top: 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-call {
    margin-top: 13.3333333333vw;
    z-index: 3;
  }
}
.honormagicv5 .section-call .call-container {
  position: relative;
  overflow: hidden;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-call .call-container {
    width: 100%;
    display: block;
  }
}
.honormagicv5 .section-call .copy-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 95%;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-call .copy-wrapper {
    width: 82.6666666667vw;
    margin: 0 auto;
    text-align: right;
  }
}
.honormagicv5 .section-call .bg {
  height: 42.9869791667vw;
  margin: -3.125vw auto 0;
  clip-path: inset(1px);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-call .bg {
    height: 143.0666666667vw;
    clip-path: none;
    margin-top: -13.3333333333vw;
  }
}
.honormagicv5 .section-call .item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.honormagicv5 .section-call .item1 {
  width: 31.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-call .item1 {
    width: 100%;
  }
}
.honormagicv5 .section-call .item1 .bg {
  width: 26.7395833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-call .item1 .bg {
    width: 100%;
  }
}
.honormagicv5 .section-call .item2 {
  width: 40.625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-call .item2 {
    width: 100%;
    margin-top: 8vw;
  }
}
.honormagicv5 .section-call .item2 .bg {
  width: 34.9296875vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-call .item2 .bg {
    width: 100%;
    margin-top: -16vw;
  }
}
.honormagicv5 .section-architecture {
  --background-title: 100%;
}

.honormagicv5 .section-architecture .architecture-container {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.honormagicv5 .section-architecture .architecture-title {
  display: inline-block;
  background: linear-gradient(268deg, #e7d1b4 calc(-60% + var(--background-title)), #654d3c calc(9.35% + var(--background-title)), #e7d1b4 calc(90.69% + var(--background-title)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  width: 75vw;
  font-size: 3.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-architecture .architecture-title {
    width: 93.3333333333vw;
    font-size: 8vw;
  }
  .honormagicv5 .section-architecture .architecture-title > span {
    font-size: 4.8vw;
  }
}
.honormagicv5 .section-architecture .bg {
  width: 100%;
  height: 39.53125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-architecture .bg {
    height: 56.5333333333vw;
  }
}
.honormagicv5 .section-sarking {
  margin-top: 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking {
    margin-top: 40vw;
  }
}
.honormagicv5 .section-sarking .sarking-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking .sarking-container {
    display: block;
  }
}
.honormagicv5 .section-sarking .copy-wrapper {
  margin-right: 9.6354166667vw;
  width: 32.8125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking .copy-wrapper {
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-sarking .copy-wrapper .sarking-copy {
  width: 80%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking .copy-wrapper .sarking-copy {
    width: 100%;
  }
}
.honormagicv5 .section-sarking .spec-wrapper {
  margin-top: 1.3020833333vw;
  display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking .spec-wrapper {
    margin-top: 5.3333333333vw;
  }
}
.honormagicv5 .section-sarking .spec-wrapper .title {
  background: linear-gradient(180deg, #e7d1b4 -20.68%, #654d3c 9.06%, #e7d1b4 96.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.125vw;
  /* line-height: 3.125vw; */
  display: flex;
  align-items: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking .spec-wrapper .title {
    font-size: 10.1333333333vw;
    /* line-height: 10.1333333333vw; */
  }
}
.honormagicv5 .section-sarking .spec-wrapper .title > span {
  display: inline-block;
  font-size: 1.1458333333vw;
  margin-bottom: 1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking .spec-wrapper .title > span {
    font-size: 3.7333333333vw;
    margin-bottom: 3vw;
  }
}
.honormagicv5 .section-sarking .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  margin-top: -1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking .spec-wrapper .copy {
    font-size: 3.2vw;
    /* margin-top: 1.0666666667vw; */
    margin-top: -2.3vw;
  }
}
.honormagicv5 .section-sarking .bg {
  width: 56.5625vw;
  height: 19.21875vw;
  margin-left: -6.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sarking .bg {
    width: 100%;
    height: 42.9333333333vw;
    margin-top: 9.3333333333vw;
    margin-left: 0;
  }
}
.honormagicv5 .section-hinge {
  margin-top: 15.625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge {
    margin-top: 40vw;
  }
}
.honormagicv5 .section-hinge .hinge-container {
  position: relative;
  overflow: hidden;
  padding-top: 0.2604166667vw;
}

.honormagicv5 .section-hinge .copy-wrapper {
  width: 75vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .copy-wrapper {
    width: 82.6666666667vw;
    display: block;
  }
}
.honormagicv5 .section-hinge .copy-wrapper > div:first-of-type {
  width: 33.8541666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .copy-wrapper > div:first-of-type {
    width: 100%;
  }
}
.honormagicv5 .section-hinge .copy-wrapper > div:last-of-type {
  width: 31.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .copy-wrapper > div:last-of-type {
    width: 100%;
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-hinge .spec-wrapper {
  margin-top: 0.78125vw;
  display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .spec-wrapper {
    margin-top: 5.3333333333vw;
  }
}
.honormagicv5 .section-hinge .spec-wrapper .item2 {
  margin-right: 3.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .spec-wrapper .item2 {
    margin-right: 10.1333333333vw;
  }
}
.honormagicv5 .section-hinge .spec-wrapper .title {
  background: linear-gradient(180deg, #e7d1b4 -20.68%, #654d3c 9.06%, #e7d1b4 96.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.125vw;
  /* line-height: 3.125vw; */
  display: flex;
  align-items: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .spec-wrapper .title {
    font-size: 10.1333333333vw;
    /* line-height: 10.1333333333vw; */
  }
}
.honormagicv5 .section-hinge .spec-wrapper .title > span {
  display: inline-block;
  font-size: 1.1458333333vw;
  margin-bottom: 1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .spec-wrapper .title > span {
    font-size: 3.7333333333vw;
    margin-bottom: 3vw;
  }
}
.honormagicv5 .section-hinge .spec-wrapper .title > span.special {
  margin-left: 0.2604166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .spec-wrapper .title > span.special {
    margin-left: 0.8vw;
  }
}
.honormagicv5 .section-hinge .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  margin-top: -1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .spec-wrapper .copy {
    font-size: 3.2vw;
    /* margin-top: 1.0666666667vw; */
    margin-top: -2.3vw;
  }
}
.honormagicv5 .section-hinge .bg {
  width: 100%;
  height: 49.5833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-hinge .bg {
    height: 121.8666666667vw;
  }
}
.honormagicv5 .section-fibre {
  margin-top: 6.7708333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-fibre {
    margin-top: 40vw;
  }
}
.honormagicv5 .section-fibre .fibre-container {
  position: relative;
  overflow: hidden;
}

.honormagicv5 .section-fibre .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 28.90625vw;
  left: 62.5vw;
  width: 29.6875vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-fibre .copy-wrapper {
    position: static;
    width: 82.9333333333vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-fibre .spec-wrapper {
  margin-top: 1.3020833333vw;
  display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-fibre .spec-wrapper {
    margin-top: 5.3333333333vw;
  }
}
.honormagicv5 .section-fibre .spec-wrapper .title {
  background: linear-gradient(180deg, #e7d1b4 -20.68%, #654d3c 9.06%, #e7d1b4 96.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.125vw;
  /* line-height: 3.125vw; */
  display: flex;
  align-items: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-fibre .spec-wrapper .title {
    font-size: 10.1333333333vw;
    /* line-height: 10.1333333333vw; */
  }
}
.honormagicv5 .section-fibre .spec-wrapper .title > span {
  display: inline-block;
  font-size: 1.1458333333vw;
  margin-bottom: 1vw;
  margin-right: 0.2604166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-fibre .spec-wrapper .title > span {
    font-size: 3.7333333333vw;
    margin-right: 0.8vw;
    margin-bottom: 3vw;
  }
}
.honormagicv5 .section-fibre .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  margin-top: -1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-fibre .spec-wrapper .copy {
    font-size: 3.2vw;
    /* margin-top: 1.0666666667vw; */
    margin-top: -2.3vw;
  }
}
.honormagicv5 .section-fibre .bg {
  width: 100%;
  height: 52.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-fibre .bg {
    height: 112vw;
  }
}
.honormagicv5 .section-glass {
  margin-top: 7.8125vw;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-glass {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-glass .glass-container {
  position: relative;
  overflow: hidden;
  width: 75vw;
  height: 32.2916666667vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-glass .glass-container {
    width: 82.9333333333vw;
    height: 183.2vw;
  }
}
.honormagicv5 .section-glass .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-glass .copy-wrapper {
    top: 8vw;
    left: 8vw;
    width: 66.9333333333vw;
  }
}
.honormagicv5 .section-glass .spec-wrapper {
  margin-top: 1.3020833333vw;
  display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-glass .spec-wrapper {
    margin-top: 5.3333333333vw;
  }
}
.honormagicv5 .section-glass .spec-wrapper .item2,
.honormagicv5 .section-glass .spec-wrapper .item3 {
  margin-right: 1.8229166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-glass .spec-wrapper .item2,
  .honormagicv5 .section-glass .spec-wrapper .item3 {
    margin-right: 2.6666666667vw;
  }
}
.honormagicv5 .section-glass .spec-wrapper .title {
  background: linear-gradient(180deg, #e7d1b4 -20.68%, #654d3c 9.06%, #e7d1b4 96.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.125vw;
  /* line-height: 3.125vw; */
  display: flex;
  align-items: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-glass .spec-wrapper .title {
    font-size: 10.1333333333vw;
    /* line-height: 10.1333333333vw; */
  }
}
.honormagicv5 .section-glass .spec-wrapper .title > span {
  display: inline-block;
  font-size: 1.6666666667vw;
  margin-bottom: 0.6vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-glass .spec-wrapper .title > span {
    font-size: 6.4vw;
    line-height: 1.1;
    margin-bottom: 1.8vw;
  }
}
.honormagicv5 .section-glass .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  margin-top: -1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-glass .spec-wrapper .copy {
    font-size: 3.2vw;
    /* margin-top: 1.0666666667vw; */
    margin-top: -2.3vw;
  }
}
.honormagicv5 .section-perception {
  margin-top: 2.4479166667vw;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perception {
    margin-top: 6.4vw;
  }
}
.honormagicv5 .section-perception .perception-container {
  position: relative;
  overflow: hidden;
  width: 75vw;
  height: 32.2916666667vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perception .perception-container {
    width: 82.9333333333vw;
    height: 183.2vw;
  }
}
.honormagicv5 .section-perception .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 26.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perception .copy-wrapper {
    top: 8vw;
    left: 8vw;
    width: 66.9333333333vw;
  }
}
.honormagicv5 .section-perception .spec-wrapper {
  margin-top: 1.3020833333vw;
  display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perception .spec-wrapper {
    margin-top: 5.3333333333vw;
  }
}
.honormagicv5 .section-perception .spec-wrapper .title {
  background: linear-gradient(180deg, #e7d1b4 -20.68%, #654d3c 9.06%, #e7d1b4 96.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.125vw;
  /* line-height: 3.125vw; */
  display: flex;
  align-items: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perception .spec-wrapper .title {
    font-size: 10.1333333333vw;
    /* line-height: 10.1333333333vw; */
  }
}
.honormagicv5 .section-perception .spec-wrapper .title > span {
  display: inline-block;
  font-size: 1.1458333333vw;
  margin-bottom: 1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perception .spec-wrapper .title > span {
    font-size: 3.7333333333vw;
    margin-bottom: 3vw;
  }
}
.honormagicv5 .section-perception .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  /* margin-top: -1vw; */
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perception .spec-wrapper .copy {
    font-size: 3.2vw;
    /* margin-top: 1.0666666667vw; */
    /* margin-top: -2.3vw; */
  }
}
.honormagicv5 .section-insurance {
  margin-top: 2.4479166667vw;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance {
    margin-top: 6.4vw;
  }
}
.honormagicv5 .section-insurance .insurance-container {
  position: relative;
  overflow: hidden;
  width: 75vw;
  height: 32.2916666667vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance .insurance-container {
    width: 82.9333333333vw;
    height: 160vw;
  }
}
.honormagicv5 .section-insurance .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance .copy-wrapper {
    top: 8vw;
    left: 8vw;
    width: 66.9333333333vw;
  }
}
.honormagicv5 .section-insurance .spec-wrapper {
  margin-top: 1.8229166667vw;
  display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance .spec-wrapper {
    margin-top: 10.6666666667vw;
  }
}
.honormagicv5 .section-insurance .spec-wrapper .item1 .title > span {
  font-size: 1.0416666667vw;
  margin-left: 0.5208333333vw;
  margin-bottom: 0.15625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance .spec-wrapper .item1 .title > span {
    font-size: 3.7333333333vw;
    margin-left: 1.8666666667vw;
  }
}
.honormagicv5 .section-insurance .spec-wrapper .item2 {
  margin-left: 3.3854166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance .spec-wrapper .item2 {
    margin-left: 9.3333333333vw;
  }
}
.honormagicv5 .section-insurance .spec-wrapper .title {
  background: linear-gradient(180deg, #e7d1b4 -20.68%, #654d3c 9.06%, #e7d1b4 96.85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.125vw;
  /* line-height: 3.125vw; */
  display: flex;
  align-items: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance .spec-wrapper .title {
    font-size: 10.1333333333vw;
    /* line-height: 10.1333333333vw; */
  }
}
.honormagicv5 .section-insurance .spec-wrapper .title > span {
  display: inline-block;
  font-size: 1.1458333333vw;
  margin-bottom: 1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance .spec-wrapper .title > span {
    font-size: 3.7333333333vw;
  }
}
.honormagicv5 .section-insurance .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  margin-top: -1vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-insurance .spec-wrapper .copy {
    font-size: 3.2vw;
    margin-top: 1.0666666667vw;
  }
}
.honormagicv5 .section-screen {
  margin-top: 10.4166666667vw;
  height: 160vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen {
    margin-top: 26.6666666667vw;
    height: 130vh;
  }
  .honormagicv5 .section-screen.is-active-mob-2 .spec-wrapper .wrapper1 {
    opacity: 0;
  }
  .honormagicv5 .section-screen.is-active-mob-2 .spec-wrapper .wrapper2 {
    opacity: 1;
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-screen {
    height: auto;
  }
}
.honormagicv5 .section-screen #trigger-screen-1 {
  position: absolute;
  top: 20vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen #trigger-screen-1 {
    top: 5vh;
  }
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .honormagicv5 .section-screen .sticky-container {
    position: relative;
    top: auto;
    height: 202.6666666667vw;
  }
}
.honormagicv5 .section-screen .screen-title-main {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(8.3333333333vw) translateY(-50%);
  display: inline-block;
  max-width: 36.4583333333vw;
  background: linear-gradient(270deg, #815223 21.02%, #e6e2c9 98.1%);
  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) {
  .honormagicv5 .section-screen .screen-title-main {
    font-size: 8vw;
    max-width: none;
    width: 90.6666666667vw;
    text-align: center;
    transform: translateX(-50%) translateY(-48vw);
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-screen .screen-title-main {
    transform: translateX(-50%) translateY(-84.5333333333vw);
  }
}
@media (min-aspect-ratio: 360/682) and (max-width: 500px) {
  .honormagicv5 .section-screen .screen-title-main {
    transform: translateX(-50%) translateY(-64vw);
  }
}
.honormagicv5 .section-screen .screen-container {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.honormagicv5 .section-screen .copy-wrapper {
  position: relative;
  width: 75vw;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .copy-wrapper {
    width: 90.6666666667vw;
  }
}
.honormagicv5 .section-screen .copy-wrapper .screen-title {
  display: inline-block;
  background: linear-gradient(270deg, #e7d1b4 -26.2%, #866043 5.45%, #f8e8d3 98.88%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.honormagicv5 .section-screen .logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .logo-wrapper {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-screen .logo-wrapper .logo1 {
  width: 4.8958333333vw;
  height: 2.109375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .logo-wrapper .logo1 {
    width: 13.3333333333vw;
    height: 5.8666666667vw;
  }
}
.honormagicv5 .section-screen .logo-wrapper .logo2 {
  width: 4.9739583333vw;
  height: 1.8229166667vw;
  margin: 0 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .logo-wrapper .logo2 {
    width: 13.6vw;
    height: 4.8vw;
    margin: 0 6.9333333333vw;
  }
}
.honormagicv5 .section-screen .logo-wrapper .logo3 {
  width: 8.2552083333vw;
  height: 1.2760416667vw;
  transform: translateY(-0.2604166667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .logo-wrapper .logo3 {
    width: 22.6666666667vw;
    height: 3.4666666667vw;
  }
}
.honormagicv5 .section-screen .spec-wrapper {
  position: absolute;
  top: calc(100% + 2.0833333333vw);
  left: 50%;
  transform: translateX(-50%);
  width: 54.4270833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: 2.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-screen .spec-wrapper {
    margin-top: 8vw;
  }
}
.honormagicv5 .section-screen .spec-wrapper .wrapper {
  position: absolute;
  top: 0;
  width: 15.625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    transition: opacity 0.3s ease;
  }
}
.honormagicv5 .section-screen .spec-wrapper .wrapper1 {
  left: 0;
  transform: translateX(-100%);
  text-align: right;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .wrapper1 {
    position: static;
    transform: none;
    text-align: center;
  }
}
.honormagicv5 .section-screen .spec-wrapper .wrapper2 {
  left: 100%;
  text-align: left;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .wrapper2 {
    left: 0;
    text-align: center;
    opacity: 0;
  }
}
.honormagicv5 .section-screen .spec-wrapper .item:not(:first-of-type) {
  margin-top: 1.8229166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .item:not(:first-of-type) {
    margin-top: 0;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .item1 {
    order: 1;
    width: 24.5333333333vw;
    margin-bottom: 2.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-screen .spec-wrapper .item1 {
    margin-bottom: 6.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .item2 {
    order: 3;
    width: 36vw;
    margin-bottom: 2.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-screen .spec-wrapper .item2 {
    margin-bottom: 6.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .item3 {
    order: 4;
    width: 24.5333333333vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .item4 {
    order: 5;
    width: 19.2vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .item5 {
    order: 6;
    width: 36vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .item6 {
    order: 2;
    width: 19.2vw;
    margin-bottom: 2.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-screen .spec-wrapper .item6 {
    margin-bottom: 6.6666666667vw;
  }
}
.honormagicv5 .section-screen .spec-wrapper .title {
  display: inline-block;
  background: linear-gradient(274deg, #e7d1b4 -7.2%, #654d3c 1.28%, #e7d1b4 80.76%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.8229166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .title {
    font-size: 4.8vw;
  }
}
.honormagicv5 .section-screen .spec-wrapper .copy {
  font-size: 0.9375vw;
  color: #b5b5b5;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .spec-wrapper .copy {
    font-size: 3.2vw;
  }
}
.honormagicv5 .section-screen .swiper-container-screen {
  position: relative;
  width: 44.6302083333vw;
  height: 30.9244791667vw;
  margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .swiper-container-screen {
    width: 100%;
    height: 37.3333333333vw;
    margin-top: 2.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .honormagicv5 .section-screen .swiper-container-screen {
    height: 85.3333333333vw;
    margin-top: 8vw;
  }
}
@media (min-aspect-ratio: 360/682) and (max-width: 500px) {
  .honormagicv5 .section-screen .swiper-container-screen {
    height: 53.3333333333vw;
  }
}
.honormagicv5 .section-screen .swiper-container-screen .phone-outside {
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .swiper-container-screen .phone-outside {
    position: relative;
    top: auto;
    left: auto;
  }
}
.honormagicv5 .section-screen .button-wrapper {
  display: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .button-wrapper {
    display: flex;
    justify-content: space-between;
    width: 18.1333333333vw;
    margin-top: 6.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-screen .button-wrapper .arrowBtn {
    position: relative;
    width: 8vw;
    height: 8vw;
  }
}
.honormagicv5 .section-screen .button-wrapper .nextBtn {
  transform: rotate(180deg);
}

.honormagicv5 .section-screen .button-wrapper .swiper-button-disabled {
  pointer-events: none;
}

.honormagicv5 .section-screen .button-wrapper .swiper-button-disabled .arrow-gold {
  opacity: 0;
}

.honormagicv5 .section-screen .button-wrapper .arrow-gold {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 18vw;
  height: 18vw;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.honormagicv5 .section-motion {
  /* margin-top: 10.4166666667vw; */
  margin-top: 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-motion {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-motion .motion-container {
  position: relative;
  overflow: hidden;
  width: 64.0625vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-motion .motion-container {
    width: 100%;
  }
}
.honormagicv5 .section-motion .copy-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-motion .copy-wrapper {
    width: 82.6666666667vw;
    display: block;
    margin: 0 auto;
  }
}
.honormagicv5 .section-motion .copy-wrapper .motion-title {
  width: 26.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-motion .copy-wrapper .motion-title {
    width: 100%;
  }
}
.honormagicv5 .section-motion .copy-wrapper .motion-copy {
  width: 31.25vw;
  transform: translateY(-0.15625vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-motion .copy-wrapper .motion-copy {
    width: 100%;
    margin-top: 2.6666666667vw;
    transform: none;
  }
}
.honormagicv5 .section-motion .bg-wrapper {
  position: relative;
  width: 100%;
  height: 28.6979166667vw;
  margin-top: 3.125vw;
  display: flex;
  justify-content: flex-end;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-motion .bg-wrapper {
    height: 85.3333333333vw;
    margin-top: 9.3333333333vw;
    padding-right: 5.6vw;
    justify-content: flex-start;
  }
}
.honormagicv5 .section-motion .bg-wrapper .phone-wrapper {
  position: relative;
  z-index: 2;
  width: 13.59375vw;
  height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-motion .bg-wrapper .phone-wrapper {
    width: 40.5333333333vw;
  }
}
.honormagicv5 .section-motion .bg-wrapper .phone-wrapper .phone {
  position: relative;
  z-index: 2;
}

.honormagicv5 .section-motion .bg-wrapper .bg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 26.0416666667vw;
  transform: translateY(-50%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-motion .bg-wrapper .bg {
    width: 87.2vw;
    height: 64.8vw;
  }
}
.honormagicv5 .section-chipset {
  margin-top: 7.8125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-chipset .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 31.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset .copy-wrapper {
    position: static;
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-chipset .spec-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset .spec-wrapper {
    margin-top: 5.3333333333vw;
    width: 88vw;
  }
}
.honormagicv5 .section-chipset .spec-wrapper .item {
  width: 9.8958333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset .spec-wrapper .item {
    width: 30.6666666667vw;
  }
}
.honormagicv5 .section-chipset .spec-wrapper .item2,
.honormagicv5 .section-chipset .spec-wrapper .item5 {
  margin: 0 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset .spec-wrapper .item2,
  .honormagicv5 .section-chipset .spec-wrapper .item5 {
    margin: 0 0.6666666667vw;
    width: 24vw;
  }
}
.honormagicv5 .section-chipset .spec-wrapper .item4,
.honormagicv5 .section-chipset .spec-wrapper .item5,
.honormagicv5 .section-chipset .spec-wrapper .item6 {
  margin-top: 1.8229166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset .spec-wrapper .item4,
  .honormagicv5 .section-chipset .spec-wrapper .item5,
  .honormagicv5 .section-chipset .spec-wrapper .item6 {
    margin-top: 5.3333333333vw;
  }
}
.honormagicv5 .section-chipset .spec-wrapper .title {
  display: inline-block;
  font-size: 2.0833333333vw;
  background: linear-gradient(274deg, #e7d1b4 -7.2%, #654d3c 1.28%, #e7d1b4 80.76%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset .spec-wrapper .title {
    font-size: 6.6666666667vw;
  }
}
.honormagicv5 .section-chipset .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  color: #b5b5b5;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset .spec-wrapper .copy {
    font-size: 3.2vw;
  }
}
.honormagicv5 .section-chipset .bg {
  height: 50.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-chipset .bg {
    height: 109.8666666667vw;
  }
}
.honormagicv5 .section-camera {
  margin-top: 10.4166666667vw;
  --background-title: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-camera {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-camera .camera-container {
  position: relative;
  overflow: hidden;
}

.honormagicv5 .section-camera .copy-wrapper {
  position: absolute;
  z-index: 2;
  top: 43.2291666667vw;
  left: 12.5vw;
  width: 75vw;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-camera .copy-wrapper {
    top: 2.6666666667vw;
    width: 93.3333333333vw;
    left: 3.3333333333vw;
  }
}
.honormagicv5 .section-camera .copy-wrapper .camera-title {
  display: inline-block;
  font-size: 3.4375vw;
  background: linear-gradient(268deg, #e7d1b4 calc(-60% + var(--background-title)), #654d3c calc(9.35% + var(--background-title)), #e7d1b4 calc(90.69% + var(--background-title)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-camera .copy-wrapper .camera-title {
    font-size: 7.4666666667vw;
  }
}
.honormagicv5 .section-camera .copy-wrapper .camera-title > span {
  display: block;
  font-size: 3.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-camera .copy-wrapper .camera-title > span {
    margin-top: 2.6666666667vw;
    font-size: 8vw;
  }
}
.honormagicv5 .section-camera .bg {
  width: 100%;
  height: 64.7916666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-camera .bg {
    height: 176.5333333333vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-longfocus .longfocus-container {
  position: relative;
  overflow: hidden;
}

.honormagicv5 .section-longfocus .copy-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 64.0625vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus .copy-wrapper {
    display: block;
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-longfocus .copy-wrapper > div:first-of-type {
  width: 31.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus .copy-wrapper > div:first-of-type {
    width: 100%;
  }
}
.honormagicv5 .section-longfocus .copy-wrapper > div:last-of-type {
  width: 26.0416666667vw;
  transform: translateY(0.15625vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus .copy-wrapper > div:last-of-type {
    width: 100%;
    transform: none;
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper {
  display: flex;
  margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper {
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper .item2 {
  margin-right: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper .item2 {
    margin-right: 8vw;
  }
}
.honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper .title {
  display: inline-block;
  font-size: 1.5625vw;
  background: linear-gradient(274deg, #e7d1b4 -7.2%, #654d3c 1.28%, #e7d1b4 80.76%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper .title {
    font-size: 10.1333333333vw;
  }
  .honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper .title > span {
    font-size: 7.4666666667vw;
  }
}
.honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper .copy {
  font-size: 0.8333333333vw;
  color: #b5b5b5;
  margin-top: -0.3vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus .copy-wrapper .spec-wrapper .copy {
    font-size: 3.2vw;
    margin-top: -2.8vw;
  }
}
.honormagicv5 .section-longfocus .bg {
  width: 100%;
  height: 54.1666666667vw;
  margin-top: -1.3020833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-longfocus .bg {
    height: 113.0666666667vw;
    margin-top: 0;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-zoom.is-active-2 .bg-wrapper .item2 {
  opacity: 1;
  pointer-events: visible;
}

.honormagicv5 .section-zoom.is-active-2 .button-wrapper .zoomBtn:first-of-type {
  color: #999;
  background: none;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}

.honormagicv5 .section-zoom.is-active-2 .button-wrapper .zoomBtn:first-of-type .border-color {
  opacity: 0;
}

.honormagicv5 .section-zoom.is-active-2 .button-wrapper .zoomBtn:nth-of-type(2) {
  background: linear-gradient(315deg, #e7d1b4 -12.88%, #654d3c 10.84%, #e7d1b4 80.84%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.honormagicv5 .section-zoom.is-active-2 .button-wrapper .zoomBtn:nth-of-type(2) .border-color {
  opacity: 1;
}

.honormagicv5 .section-zoom.is-active-3 .bg-wrapper .item3 {
  opacity: 1;
  pointer-events: visible;
}

.honormagicv5 .section-zoom.is-active-3 .button-wrapper .zoomBtn:first-of-type {
  color: #999;
  background: none;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}

.honormagicv5 .section-zoom.is-active-3 .button-wrapper .zoomBtn:first-of-type .border-color {
  opacity: 0;
}

.honormagicv5 .section-zoom.is-active-3 .button-wrapper .zoomBtn:nth-of-type(3) {
  background: linear-gradient(315deg, #e7d1b4 -12.88%, #654d3c 10.84%, #e7d1b4 80.84%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.honormagicv5 .section-zoom.is-active-3 .button-wrapper .zoomBtn:nth-of-type(3) .border-color {
  opacity: 1;
}

.honormagicv5 .section-zoom.is-active-4 .bg-wrapper .item4 {
  opacity: 1;
  pointer-events: visible;
}

.honormagicv5 .section-zoom.is-active-4 .button-wrapper .zoomBtn:first-of-type {
  color: #999;
  background: none;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}

.honormagicv5 .section-zoom.is-active-4 .button-wrapper .zoomBtn:first-of-type .border-color {
  opacity: 0;
}

.honormagicv5 .section-zoom.is-active-4 .button-wrapper .zoomBtn:nth-of-type(4) {
  background: linear-gradient(315deg, #e7d1b4 -12.88%, #654d3c 10.84%, #e7d1b4 80.84%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.honormagicv5 .section-zoom.is-active-4 .button-wrapper .zoomBtn:nth-of-type(4) .border-color {
  opacity: 1;
}

.honormagicv5 .section-zoom .zoom-container {
  position: relative;
  overflow: hidden;
  width: 75vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom .zoom-container {
    width: 82.6666666667vw;
  }
}
.honormagicv5 .section-zoom .copy-wrapper > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom .copy-wrapper > div {
    display: block;
  }
}
.honormagicv5 .section-zoom .copy-wrapper .zoom-title {
  width: 39.0625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom .copy-wrapper .zoom-title {
    width: 100%;
  }
}
.honormagicv5 .section-zoom .copy-wrapper .zoom-copy {
  width: 31.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom .copy-wrapper .zoom-copy {
    width: 100%;
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-zoom .bg-wrapper {
  position: relative;
  height: 29.1666666667vw;
  margin-top: 3.125vw;
  clip-path: inset(0 1px 0 0);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom .bg-wrapper {
    height: 101.3333333333vw;
    margin-top: 9.3333333333vw;
  }
}
.honormagicv5 .section-zoom .bg-wrapper .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.honormagicv5 .section-zoom .bg-wrapper .item2,
.honormagicv5 .section-zoom .bg-wrapper .item3,
.honormagicv5 .section-zoom .bg-wrapper .item4 {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.honormagicv5 .section-zoom .button-wrapper {
  display: flex;
  justify-content: space-between;
  width: 19.0104166667vw;
  margin: 1.8229166667vw auto 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom .button-wrapper {
    width: 51.2vw;
    margin-top: 6.4vw;
  }
}
.honormagicv5 .section-zoom .button-wrapper .zoomBtn {
  position: relative;
  width: 2.6041666667vw;
  height: 2.65625vw;
  font-size: 1.0416666667vw;
  background: linear-gradient(315deg, #e7d1b4 -12.88%, #654d3c 10.84%, #e7d1b4 80.84%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom .button-wrapper .zoomBtn {
    width: 8vw;
    height: 8.2666666667vw;
    font-size: 3.2vw;
  }
}
.honormagicv5 .section-zoom .button-wrapper .zoomBtn > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 2.6041666667vw;
  height: 2.65625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-zoom .button-wrapper .zoomBtn > svg {
    width: 8vw;
    height: 8.2666666667vw;
  }
}
.honormagicv5 .section-zoom .button-wrapper .zoomBtn .border-color {
  transition: opacity 0.1s linear;
}

.honormagicv5 .section-zoom .button-wrapper .zoomBtn:nth-of-type(2),
.honormagicv5 .section-zoom .button-wrapper .zoomBtn:nth-of-type(3),
.honormagicv5 .section-zoom .button-wrapper .zoomBtn:nth-of-type(4) {
  color: #999;
  background: none;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}

.honormagicv5 .section-zoom .button-wrapper .zoomBtn:nth-of-type(2) .border-color,
.honormagicv5 .section-zoom .button-wrapper .zoomBtn:nth-of-type(3) .border-color,
.honormagicv5 .section-zoom .button-wrapper .zoomBtn:nth-of-type(4) .border-color {
  opacity: 0;
}

.honormagicv5 .section-night {
  margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-night {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-night .night-container {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-night .night-container {
    display: block;
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-night .left-wrapper {
  position: relative;
  z-index: 2;
  width: 38.3333333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-night .left-wrapper {
    width: 100%;
  }
}
.honormagicv5 .section-night .left-wrapper .copy-wrapper {
  width: 29.6875vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-night .left-wrapper .copy-wrapper {
    width: 100%;
  }
}
.honormagicv5 .section-night .left-wrapper .bg {
  width: 100%;
  height: 24.375vw;
  margin-top: 3.3854166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-night .left-wrapper .bg {
    height: 56.8vw;
    margin-top: 9.3333333333vw;
  }
}
.honormagicv5 .section-night .right-wrapper {
  width: 43.4895833333vw;
  height: 33.6458333333vw;
  margin-left: -6.8229166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-night .right-wrapper {
    width: 100%;
    height: 52.5333333333vw;
    margin-left: 0;
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-wide {
  margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-wide {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-wide .wide-container {
  position: relative;
  overflow: hidden;
  width: 75vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-wide .wide-container {
    width: 82.6666666667vw;
  }
}
.honormagicv5 .section-wide .copy-wrapper > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-wide .copy-wrapper > div {
    display: block;
  }
}
.honormagicv5 .section-wide .copy-wrapper .wide-title {
  width: 31.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-wide .copy-wrapper .wide-title {
    width: 100%;
  }
}
.honormagicv5 .section-wide .copy-wrapper .wide-copy {
  width: 33.8541666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-wide .copy-wrapper .wide-copy {
    width: 100%;
    margin-left: 0;
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-wide .bg {
  height: 31.3020833333vw;
  margin-top: 3.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-wide .bg {
    height: 112.8vw;
    margin-top: 9.3333333333vw;
  }
}
.honormagicv5 .section-perfect {
  margin-top: 10.4166666667vw;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perfect {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-perfect .perfect-container {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perfect .perfect-container {
    width: 100%;
    display: block;
  }
}
.honormagicv5 .section-perfect .copy-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 95%;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perfect .copy-wrapper {
    width: 82.6666666667vw;
    margin: 0 auto;
    text-align: right;
  }
}
.honormagicv5 .section-perfect .copy-wrapper .perfect-copy {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perfect .copy-wrapper .perfect-copy {
    width: 100%;
  }
}
.honormagicv5 .section-perfect .bg {
  height: 47.5026041667vw;
  margin: -3.125vw auto 0;
  clip-path: inset(1px);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perfect .bg {
    width: 100%;
    height: 155.8666666667vw;
    margin-top: -18.6666666667vw;
    clip-path: none;
  }
}
.honormagicv5 .section-perfect .item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.honormagicv5 .section-perfect .item1 {
  width: 47.5026041667vw;
  margin-left: -6.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perfect .item1 {
    width: 100%;
    margin: 0;
  }
}
.honormagicv5 .section-perfect .item2 {
  width: 29.7057291667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-perfect .item2 {
    width: 100%;
  }
}
.honormagicv5 .honormagicv5-mobShow {
  display: none !important;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .honormagicv5-mobShow {
    display: block !important;
  }
  .honormagicv5 .honormagicv5-pcShow {
    display: none !important;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) and (min-width: 501px) {
  .honormagicv5 .honormagicv5-padHide {
    display: none !important;
  }
  .honormagicv5 .honormagicv5-padShow {
    display: block !important;
  }
}
.honormagicv5 .popup {
  position: fixed;
  top: 52px;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  display: none;
  z-index: 99999;
}

.honormagicv5 .popup.is-active {
  display: block;
}

.honormagicv5 .popup .popupcloseBtn {
  position: absolute;
  z-index: 2;
  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) {
  .honormagicv5 .popup .popupcloseBtn {
    right: 8vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}
.honormagicv5 .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) {
  .honormagicv5 .popup .popupcloseBtn::before {
    width: 8.5333333333vw;
  }
}
.honormagicv5 .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) {
  .honormagicv5 .popup .popupcloseBtn::after {
    width: 8.5333333333vw;
  }
}
.honormagicv5 .popup .popup-container {
  position: relative;
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .popup .popup-container {
    width: 100%;
  }
}
.honormagicv5 .popup .popup-container.is-video .videoWrapper {
  display: block;
}

.honormagicv5 .popup .videoWrapper {
  display: none;
  height: 70%;
}

.honormagicv5 .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) {
  .honormagicv5 .popup .videoWrapper.spec {
    height: auto;
  }
}
.section-note {
  padding: 10.4166666667vw 0 5.2083333333vw;
  background: #000;
  color: #fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .section-note {
    padding: 26.6666666667vw 0 13.3333333333vw;
    margin-top: -1px;
  }
}
.section-note.ff-regular {
  font-family: "HONOR Sans Arabic Regular";
}

.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(255, 255, 255, 0.6);
}

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

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .section-note .decimal {
    padding-right: 2.1333333333vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .section-note .decimal {
    padding-right: 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-right: 1.5625vw;
  margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .section-note .pdp-star {
    padding-right: 2.1333333333vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
  .section-note .pdp-star {
    padding-right: 4vw;
  }
}
.section-note .pdp-star li::after {
  content: "*";
  position: absolute;
  top: 0;
  right: 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: 0;
  }
}
.honormagicv5.honormagicv5-bottom {
  padding-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5.honormagicv5-bottom {
    padding-top: 26.6666666667vw;
  }
}
.honormagicv5 .fs-48 {
  font-size: 2.5vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .fs-48 {
    font-size: 6.4vw;
  }
}
.honormagicv5 .section-technology .technology-container {
  width: 72.9166666667vw;
  margin: 0 auto;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .technology-container {
    width: 100%;
  }
  .honormagicv5 .section-technology .technology-container .technology-title {
    width: 89.3333333333vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-technology .swiper-container-technology {
  margin-top: 3.125vw;
  height: 28.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .swiper-container-technology {
    margin-top: 8vw;
    width: 100%;
    height: 89.8666666667vw;
  }
}
.honormagicv5 .section-technology .swiper-container-technology .swiper-wrapper {
  justify-content: space-between;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .swiper-container-technology .swiper-wrapper {
    justify-content: flex-start;
  }
}
.honormagicv5 .section-technology .swiper-container-technology .swiper-slide {
  width: 35.9375vw;
  height: 100%;
  position: relative;
  color: #000;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .swiper-container-technology .swiper-slide {
    width: 100%;
  }
}
.honormagicv5 .section-technology .swiper-container-technology .color-white {
  color: #fff;
}

.honormagicv5 .section-technology .swiper-container-technology .copy-wrapper {
  position: absolute;
  top: 1.3020833333vw;
  left: 1.6666666667vw;
  width: calc(100% - 3.3333333333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .swiper-container-technology .copy-wrapper {
    left: 5.3333333333vw;
    top: 4vw;
    width: calc(100% - 10.6666666667vw);
  }
}
.honormagicv5 .section-technology .swiper-container-technology .subtitle {
  font-size: 1.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .swiper-container-technology .subtitle {
    font-size: 3.7333333333vw;
  }
}
.honormagicv5 .section-technology .swiper-container-technology .aistar {
  display: inline-block;
  width: 2.1354166667vw;
  height: 1.09375vw;
  transform: translateY(-0.15625vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .swiper-container-technology .aistar {
    width: 6.4vw;
    height: 3.2vw;
    transform: translateY(-0.5333333333vw);
  }
}
.honormagicv5 .section-technology .swiper-container-technology .title {
  margin-top: 0.5208333333vw;
  font-size: 1.6666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .swiper-container-technology .title {
    font-size: 4.8vw;
    margin-top: 1.0666666667vw;
  }
}
.honormagicv5 .section-technology .swiper-container-technology .gaBtn {
  position: absolute;
  bottom: 1.0416666667vw;
  left: 1.0416666667vw;
  width: 2.0833333333vw;
  height: 2.0833333333vw;
  transform: rotate(180deg);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .swiper-container-technology .gaBtn {
    bottom: 5.3333333333vw;
    left: 5.3333333333vw;
    width: 7.4666666667vw;
    height: 7.4666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .button-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 24vw;
    margin-top: 5.3333333333vw;
    margin-right: 70.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-technology .button-wrapper .arrowBtn {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
}
.honormagicv5 .section-technology .button-wrapper .nextBtn {
  transform: rotate(180deg);
}

.honormagicv5 .section-technology .button-wrapper .swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.honormagicv5 .section-esg {
  margin-top: 7.8125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg {
    margin-top: 18.6666666667vw;
  }
}
.honormagicv5 .section-esg .esg-container {
  width: 72.9166666667vw;
  margin: 0 auto;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .esg-container {
    width: 100%;
  }
  .honormagicv5 .section-esg .esg-container .esg-title {
    width: 89.3333333333vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-esg .swiper-container-esg {
  margin-top: 3.125vw;
  height: 15.9375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .swiper-container-esg {
    margin-top: 8vw;
    width: 100%;
    height: 63.4666666667vw;
  }
}
.honormagicv5 .section-esg .swiper-container-esg .swiper-wrapper {
  justify-content: space-between;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .swiper-container-esg .swiper-wrapper {
    justify-content: flex-start;
  }
}
.honormagicv5 .section-esg .swiper-container-esg .swiper-slide {
  width: 23.59375vw;
  height: 100%;
  background: #161616;
  border-radius: 1.25vw;
  padding: 1.6666666667vw 1.6666666667vw 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .swiper-container-esg .swiper-slide {
    width: 100%;
    border-radius: 3.2vw;
    padding: 5.3333333333vw 5.3333333333vw 0;
  }
}
.honormagicv5 .section-esg .swiper-container-esg .icon {
  width: 2.5260416667vw;
  height: 2.5260416667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .swiper-container-esg .icon {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
}
.honormagicv5 .section-esg .swiper-container-esg .title {
  font-size: 1.4583333333vw;
  margin-top: 1.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .swiper-container-esg .title {
    font-size: 4.8vw;
    margin-top: 4.2666666667vw;
  }
}
.honormagicv5 .section-esg .swiper-container-esg .copy {
  font-size: 0.9375vw;
  margin-top: 0.2604166666vw;
  line-height: 1.5;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .swiper-container-esg .copy {
    font-size: 3.7333333333vw;
    margin-top: 2.9333333333vw;
  }
}
.honormagicv5 .section-esg .swiper-container-esg .gaBtn {
  position: absolute;
  bottom: 1.0416666667vw;
  left: 1.0416666667vw;
  width: 2.0833333333vw;
  height: 2.0833333333vw;
  transform: rotate(180deg);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .swiper-container-esg .gaBtn {
    bottom: 5.3333333333vw;
    left: 5.3333333333vw;
    width: 7.4666666667vw;
    height: 7.4666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .button-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 24vw;
    margin-top: 5.3333333333vw;
    margin-right: 70.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-esg .button-wrapper .arrowBtn {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
}
.honormagicv5 .section-esg .button-wrapper .nextBtn {
  transform: rotate(180deg);
}

.honormagicv5 .section-esg .button-wrapper .swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.honormagicv5 .section-switch {
  margin-top: 7.8125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch {
    margin-top: 18.6666666667vw;
  }
}
.honormagicv5 .section-switch .switch-container {
  width: 72.9166666667vw;
  margin: 0 auto;
  overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch .switch-container {
    width: 100%;
  }
  .honormagicv5 .section-switch .switch-container .switch-title {
    width: 89.3333333333vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-switch .swiper-container-switch {
  margin-top: 3.125vw;
  height: 14.84375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch .swiper-container-switch {
    margin-top: 8vw;
    width: 100%;
    height: 60.8vw;
  }
}
.honormagicv5 .section-switch .swiper-container-switch .swiper-wrapper {
  justify-content: space-between;
}

.honormagicv5 .section-switch .swiper-container-switch .swiper-slide {
  width: 23.59375vw;
  height: 100%;
  background: #161616;
  border-radius: 1.25vw;
  padding: 1.6666666667vw 1.6666666667vw 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch .swiper-container-switch .swiper-slide {
    width: 100%;
    border-radius: 3.2vw;
    padding: 5.3333333333vw 5.3333333333vw 0;
  }
}
.honormagicv5 .section-switch .swiper-container-switch .icon {
  width: 2.5260416667vw;
  height: 2.5260416667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch .swiper-container-switch .icon {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
}
.honormagicv5 .section-switch .swiper-container-switch .title {
  font-size: 1.4583333333vw;
  margin-top: 1.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch .swiper-container-switch .title {
    font-size: 4.8vw;
    margin-top: 4.2666666667vw;
  }
}
.honormagicv5 .section-switch .swiper-container-switch .copy {
  font-size: 0.9375vw;
  margin-top: 0.2604166666vw;
  line-height: 1.5;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch .swiper-container-switch .copy {
    font-size: 3.7333333333vw;
    margin-top: 2.9333333333vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch .button-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 24vw;
    margin-top: 5.3333333333vw;
    margin-right: 70.6666666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-switch .button-wrapper .arrowBtn {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
}
.honormagicv5 .section-switch .button-wrapper .nextBtn {
  transform: rotate(180deg);
}

.honormagicv5 .section-switch .button-wrapper .swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.honormagicv5 .section-faq {
  margin-top: 7.8125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-faq {
    margin-top: 18.6666666667vw;
  }
}
.honormagicv5 .section-faq .faq-container {
  width: 72.9166666667vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-faq .faq-container {
    width: 89.3333333333vw;
  }
}
.honormagicv5 .section-faq .item-wrapper {
  margin-top: 3.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-faq .item-wrapper {
    margin-top: 8vw;
  }
}
.honormagicv5 .section-faq .item-wrapper .item {
  position: relative;
  width: 100%;
  padding-left: 2.6041666667vw;
  cursor: pointer;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-faq .item-wrapper .item {
    padding-left: 8vw;
  }
}
.honormagicv5 .section-faq .item-wrapper .item.is-active .arrow {
  transform: rotate(180deg);
}

.honormagicv5 .section-faq .item-wrapper .item.is-active .copy {
  margin-top: 0;
  height: 0;
  clip-path: inset(0 0 100%);
}

.honormagicv5 .section-faq .item-wrapper .arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.4583333333vw;
  height: 1.4583333333vw;
  transition: transform 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-faq .item-wrapper .arrow {
    top: -0.8vw;
    width: 6.4vw;
    height: 6.4vw;
  }
}
.honormagicv5 .section-faq .item-wrapper .line {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  margin: 1.5625vw 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-faq .item-wrapper .line {
    margin: 5.3333333333vw 0;
  }
}
.honormagicv5 .section-faq .item-wrapper .title {
  font-size: 1.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-faq .item-wrapper .title {
    font-size: 4.2666666667vw;
  }
}
.honormagicv5 .section-faq .item-wrapper .copy {
  font-size: 0.8333333333vw;
  margin-top: 0.4166666667vw;
  color: rgba(255, 255, 255, 0.8);
  height: auto;
  clip-path: inset(0 0);
  transition: clip-path 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-faq .item-wrapper .copy {
    font-size: 3.2vw;
    margin-top: 1.0666666667vw;
  }
} 
.honormagicv5 .section-magicpen {
  margin-top: 7.8125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-magicpen {
    margin-top: 21.3333333333vw;
  }
}
.honormagicv5 .section-magicpen .magicpen-container {
  position: relative;
  overflow: hidden;
  height: 44.2708333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-magicpen .magicpen-container {
    height: auto;
  }
  .honormagicv5 .section-magicpen .magicpen-container .bg {
    height: 78.9333333333vw;
    margin-top: 5.3333333333vw;
  }
}
.honormagicv5 .section-magicpen .copy-wrapper {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 7.8125vw;
  transform: translateX(-36.9791666667vw);
  width: 23.1770833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-magicpen .copy-wrapper {
    position: static;
    transform: none;
    width: 82.6666666667vw;
    margin: 0 auto;
  }
}
.honormagicv5 .section-magicpen .copy-wrapper .magicpen-copy {
  margin-top: 1.0416666667vw;
  width: 95%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-magicpen .copy-wrapper .magicpen-copy {
    margin-top: 5.3333333333vw;
    width: 100%;
  }
}
.honormagicv5 .section-magicpen .copy-wrapper .gaBtn {
  display: inline-flex;
  align-items: center;
  margin-top: 3.125vw;
  color: #3d7fff;
  white-space: nowrap;
}

@media (min-width: 1366px) {
  .honormagicv5 .section-magicpen .copy-wrapper .gaBtn:hover .arrow-blue {
    transform: translateX(-0.2083333333vw) translateY(-0.0520833333vw) rotate(180deg);
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-magicpen .copy-wrapper .gaBtn {
    margin-top: 5.3333333333vw;
  }
}
.honormagicv5 .section-magicpen .copy-wrapper .gaBtn .arrow-blue {
  width: 0.6770833333vw;
  height: 0.6770833333vw;
  margin-right: 0.3125vw;
  transform: translateY(-0.0520833333vw) rotate(180deg);
  transition: transform 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-magicpen .copy-wrapper .gaBtn .arrow-blue {
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    margin-right: 1.0666666667vw;
    transform: translateY(-0.1333333333vw) rotate(180deg);
  }
}
.honormagicv5 .section-golive .bg-wrapper #video-google3 {
  transform: scale(1.22);
}

/* 新增 */
.honormagicv5 .section-maintitle {
  --background-title-1: -100%;
  --background-mask-1: 0%;
  --background-title-2: -100%;
  --background-mask-2: 0%;
  --background-title-3: -100%;
  --background-mask-3: 0%;
  --background-title-4: -100%;
  --background-mask-4: 0%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-thin {
    margin-top: -21.3333333333vw;
  }
}
.honormagicv5 .section-maintitle.section-maintitle-thin .maintitle-title > span:first-of-type {
  background: linear-gradient(180deg, #f6edd7 calc(var(--background-title-1) + 15%), #8a6b4d calc(var(--background-title-1) + 50%), #2a1f16 calc(var(--background-title-1) + 80%), #000 calc(var(--background-title-1) + 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.honormagicv5 .section-maintitle.section-maintitle-thin .mask {
  background: radial-gradient(50% 50%, transparent calc(var(--background-mask-1) + 0%), rgb(0, 0, 0) calc(var(--background-mask-1) + 29%));
}

.honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title {
  transform: translateY(1.7vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title {
    transform: translateY(2vw);
  }
}
.honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:first-of-type {
  background: linear-gradient(180deg, #f6edd7 calc(var(--background-title-2) + 5%), #8a6b4d calc(var(--background-title-2) + 40%), #2a1f16 calc(var(--background-title-2) + 70%), #000 calc(var(--background-title-2) + 90%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:first-of-type {
    background: linear-gradient(180deg, #f6edd7 calc(var(--background-title-2) + 5%), #8a6b4d calc(var(--background-title-2) + 30%), #2a1f16 calc(var(--background-title-2) + 70%), #000 calc(var(--background-title-2) + 90%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.honormagicv5 .section-maintitle.section-maintitle-sidebar .mask {
  background: radial-gradient(50% 50%, transparent calc(var(--background-mask-2) + 0%), rgb(0, 0, 0) calc(var(--background-mask-2) + 29%));
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:first-of-type {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(2) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(3) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(4) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(5) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(6) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(7) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(8) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(9) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(10) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(11) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(12) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(13) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(14) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:nth-of-type(15) {
    font-size: 11.9466666667vw;
  }
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title > span:last-of-type {
    font-size: 11.9466666667vw;
  }
}
.honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title-shadow {
  line-height: 1.5;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-sidebar .maintitle-title-shadow {
    font-size: 10.6666666667vw;
    line-height: 1.65;
  }
}
.honormagicv5 .section-maintitle.section-maintitle-ai .maintitle-title > span:first-of-type {
  background: linear-gradient(180deg, #f6edd7 calc(var(--background-title-3) + 15%), #8a6b4d calc(var(--background-title-3) + 50%), #2a1f16 calc(var(--background-title-3) + 80%), #000 calc(var(--background-title-3) + 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.honormagicv5 .section-maintitle.section-maintitle-ai .mask {
  background: radial-gradient(50% 50%, transparent calc(var(--background-mask-3) + 0%), rgb(0, 0, 0) calc(var(--background-mask-3) + 29%));
}

.honormagicv5 .section-maintitle.section-maintitle-ai .maintitle-title-shadow {
  line-height: 1.5;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle.section-maintitle-powerful {
    margin-top: -16vw;
  }
}
.honormagicv5 .section-maintitle.section-maintitle-powerful .maintitle-title > span:first-of-type {
  background: linear-gradient(180deg, #f6edd7 calc(var(--background-title-4) + 15%), #8a6b4d calc(var(--background-title-4) + 50%), #2a1f16 calc(var(--background-title-4) + 80%), #000 calc(var(--background-title-4) + 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.honormagicv5 .section-maintitle.section-maintitle-powerful .mask {
  background: radial-gradient(50% 50%, transparent calc(var(--background-mask-4) + 0%), rgb(0, 0, 0) calc(var(--background-mask-4) + 29%));
}

.honormagicv5 .section-maintitle.section-maintitle-powerful .maintitle-title-shadow {
  line-height: 1.5;
}

.honormagicv5 .section-maintitle .maintitle-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56.25vw;
  perspective: 57.2916666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-container {
    height: 133.3333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title {
  position: relative;
  width: 100%;
  z-index: 4;
}

.honormagicv5 .section-maintitle .maintitle-title > span:first-of-type {
  position: relative;
  z-index: 2;
  font-size: 11.4583333333vw;
  width: 100%;
  display: block;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:first-of-type {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(2) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.999) scaleY(0.9995);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(2) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(3) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.998) scaleY(0.999);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(3) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(4) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.997) scaleY(0.9985);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(4) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(5) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.996) scaleY(0.998);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(5) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(6) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.995) scaleY(0.9975);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(6) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(7) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.994) scaleY(0.997);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(7) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(8) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.993) scaleY(0.9965);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(8) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(9) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.992) scaleY(0.996);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(9) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(10) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.991) scaleY(0.9955);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(10) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(11) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.99) scaleY(0.995);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(11) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(12) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.989) scaleY(0.9945);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(12) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(13) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.988) scaleY(0.994);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(13) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(14) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.987) scaleY(0.9935);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(14) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(15) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0.986) scaleY(0.993);
  width: 100%;
  background: linear-gradient(180deg, #cab28e 10%, #5e4833 30%, #1d1710 65%, #cab28e 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:nth-of-type(15) {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title > span:last-of-type {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(calc(-50% - 0.0260416667vw));
  width: 100%;
  color: #f6edd7;
  font-size: 11.4583333333vw;
  transition: filter 0.7s ease;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title > span:last-of-type {
    font-size: 14.9333333333vw;
  }
}
.honormagicv5 .section-maintitle .maintitle-title-shadow {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 0;
  transform-origin: 50% 100%;
  width: 100%;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.3));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 10.5208333333vw;
  pointer-events: none;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .maintitle-title-shadow {
    font-size: 13.3333333333vw;
  }
}
.honormagicv5 .section-maintitle .bg-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 56.25vw;
  transform: translateY(-52.7%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .bg-wrapper {
    height: 56.2666666667vw;
    transform: translateY(-49%);
  }
}
.honormagicv5 .section-maintitle .mask {
  position: absolute;
  z-index: 5;
  top: 0;
  left: -150%;
  width: 400%;
  height: 120%;
  pointer-events: none;
}

.honormagicv5 .section-maintitle .mainitile-copy {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 44.2708333333vw;
  transform: translateX(-50%) translateY(10.9375vw);
  text-align: center;
  font-size: 2.9166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .mainitile-copy {
    transform: translateX(-50%) translateY(21.3333333333vw);
    width: 98%;
    font-size: 5.3333333333vw;
  }
}
.honormagicv5 .section-maintitle .mainitile-note {
  position: absolute;
  z-index: 4;
  bottom: 0;
  right: 12.5vw;
  width: 28.6458333333vw;
  text-align: right;
  font-size: 0.625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-maintitle .mainitile-note {
    right: 50%;
    transform: translateX(50%);
    width: 90%;
    font-size: 2.1333333333vw;
    text-align: center;
  }
}
.honormagicv5 .section-sidebar {
  margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar {
    margin-top: 26.6666666667vw;
  }
}
.honormagicv5 .section-sidebar.is-active-2 .progress-wrapper .progress-copy .current > span:first-of-type {
  opacity: 0;
}

.honormagicv5 .section-sidebar.is-active-2 .progress-wrapper .progress-copy .current > span:nth-of-type(2) {
  opacity: 1;
}

.honormagicv5 .section-sidebar.is-active-3 .progress-wrapper .progress-copy .current > span:first-of-type {
  opacity: 0;
}

.honormagicv5 .section-sidebar.is-active-3 .progress-wrapper .progress-copy .current > span:nth-of-type(3) {
  opacity: 1;
}

.honormagicv5 .section-sidebar.is-active-4 .progress-wrapper .progress-copy .current > span:first-of-type {
  opacity: 0;
}

.honormagicv5 .section-sidebar.is-active-4 .progress-wrapper .progress-copy .current > span:nth-of-type(4) {
  opacity: 1;
}

.honormagicv5 .section-sidebar.is-active-5 .progress-wrapper .progress-copy .current > span:first-of-type {
  opacity: 0;
}

.honormagicv5 .section-sidebar.is-active-5 .progress-wrapper .progress-copy .current > span:nth-of-type(5) {
  opacity: 1;
}

.honormagicv5 .section-sidebar .sidebar-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .sidebar-container {
    padding-bottom: 2.6666666667vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar {
  width: 75vw;
  height: 37.5vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar {
    width: 82.9333333333vw;
    height: 149.3333333333vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .swiper-slide {
    display: block;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .bg-wrapper {
  position: relative;
  width: 33.5416666667vw;
  height: 28.6458333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .bg-wrapper {
    position: absolute;
    top: 37.3333333333vw;
    left: 50%;
    transform: translateX(-47%);
    width: 73.6vw;
    height: 62.9333333333vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .bg-wrapper .special {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 34.2708333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .bg-wrapper .special {
    height: 79.3333333333vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper {
  position: relative;
  width: 35.6770833333vw;
  text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper {
    width: 98%;
    margin-top: 9.3333333333vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper .sidebar-subtitle {
  background: linear-gradient(165deg, #876853 17.54%, #d7c4a6 85.6%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.5vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper .sidebar-subtitle {
    font-size: 6.4vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper .sidebar-title {
  font-size: 2.5vw;
  margin-top: 1.3020833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper .sidebar-title {
    font-size: 5.3333333333vw;
    margin-top: 2.6666666667vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper .icon {
  width: 4.1666666667vw;
  height: 4.1666666667vw;
  margin: 3.6458333333vw auto 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper .icon {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin-top: 72vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper .icon-copy {
  font-size: 1.875vw;
  margin-top: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .copy-wrapper .icon-copy {
    font-size: 4.8vw;
    margin-top: 1.3333333333vw;
  }
}
.honormagicv5 .section-sidebar .swiper-container-sidebar .bg {
  position: absolute;
  top: 0;
  left: 0;
}

.honormagicv5 .section-sidebar .swiper-container-sidebar .sidebar-note {
  position: absolute;
  bottom: 1.3020833333vw;
  left: calc(50% + 17.1875vw);
  width: 35.6770833333vw;
  transform: translateX(-50%);
  font-size: 0.625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .swiper-container-sidebar .sidebar-note {
    font-size: 2.1333333333vw;
    bottom: 6.6666666667vw;
    width: 90%;
    left: 5%;
    transform: none;
    text-align: center;
  }
}
.honormagicv5 .section-sidebar .bottom-wrapper {
  position: relative;
  width: 12.2916666667vw;
  margin: 2.0833333333vw auto 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .bottom-wrapper {
    width: 62.9333333333vw;
    margin-top: 9.3333333333vw;
  }
}
.honormagicv5 .section-sidebar .progress-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-45%);
}

.honormagicv5 .section-sidebar .progress-wrapper .progress-copy {
  display: flex;
  justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .progress-wrapper .progress-copy {
    justify-content: center;
  }
}
.honormagicv5 .section-sidebar .progress-wrapper .progress-copy > p {
  font-size: 1.4583333333vw;
  margin: 0 0.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .progress-wrapper .progress-copy > p {
    font-size: 7.4666666667vw;
    margin: 0 1.0666666667vw;
  }
}
.honormagicv5 .section-sidebar .progress-wrapper .progress-copy .current {
  position: relative;
}

.honormagicv5 .section-sidebar .progress-wrapper .progress-copy .current > span {
  transition: opacity 0.3s ease;
}

.honormagicv5 .section-sidebar .progress-wrapper .progress-copy .current > span:not(:last-of-type) {
  position: absolute;
  top: 0;
  left: 0;
}

.honormagicv5 .section-sidebar .progress-wrapper .progress-copy .current > span:not(:first-of-type) {
  opacity: 0;
}

.honormagicv5 .section-sidebar .button-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.honormagicv5 .section-sidebar .button-wrapper .arrowBtn {
  position: relative;
  width: 2.265625vw;
  height: 2.265625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .button-wrapper .arrowBtn {
    width: 11.4666666667vw;
    height: 11.4666666667vw;
  }
}
.honormagicv5 .section-sidebar .button-wrapper .nextBtn {
  transform: rotate(180deg);
}

.honormagicv5 .section-sidebar .button-wrapper .swiper-button-disabled {
  pointer-events: none;
}

.honormagicv5 .section-sidebar .button-wrapper .swiper-button-disabled .arrow-gold {
  opacity: 0;
}

.honormagicv5 .section-sidebar .button-wrapper .arrow-gold {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 4.5052083333vw;
  height: 4.53125vw;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .honormagicv5 .section-sidebar .button-wrapper .arrow-gold {
    width: 23.2vw;
    height: 23.2vw;
  }
}/*# sourceMappingURL=style.css.map */