.honormagicos {
font-family: " HONOR Sans World Regular";
background: #fff;
}
.honormagicos .blur-up {
filter: blur(20px);
transition: filter 0.2s;
}
.honormagicos .lazyloaded {
filter: blur(0);
}
.honormagicos section,
.honormagicos div,
.honormagicos h2,
.honormagicos h3,
.honormagicos h4,
.honormagicos ul,
.honormagicos ol,
.honormagicos li,
.honormagicos p,
.honormagicos form,
.honormagicos table,
.honormagicos th,
.honormagicos td,
.honormagicos figure,
.honormagicos button {
border: none;
margin: 0px;
padding: 0px;
color: inherit;
font-weight: normal;
box-sizing: border-box;
}
.honormagicos table {
border-collapse: collapse;
}
.honormagicos h2,
.honormagicos h3,
.honormagicos h4 {
line-height: 1.4;
}
.honormagicos p,
.honormagicos span {
line-height: 1.4;
}
.honormagicos button {
background-color: transparent;
cursor: pointer;
}
.honormagicos sup {
position: relative !important;
font-size: 50% !important;
line-height: 0 !important;
vertical-align: super !important;
top: 0 !important;
}
.honormagicos sup.static {
position: static !important;
}
.honormagicos sup.smaller {
font-size: 40% !important;
top: -0.78125vw !important;
}
.honormagicos picture,
.honormagicos img,
.honormagicos video,
.honormagicos canvas {
display: block;
width: 100%;
height: 100%;
max-width: none;
}
.honormagicos a {
color: inherit;
text-decoration: none;
}
.honormagicos *,
.honormagicos *::before,
.honormagicos *::after {
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
text-rendering: optimizeLegibility;
}
.honormagicos *:focus,
.honormagicos *:active {
outline: none;
}
.honormagicos .object-fit {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.honormagicos .ff-bold {
font-family: "HONOR Sans World DemiBold";
}
.honormagicos .ff-medi {
font-family: "HONOR Sans World Medium";
}
.honormagicos .ff-regu {
font-family: " HONOR Sans World Regular";
}
.honormagicos .fs-48 {
font-size: 2.2vw;
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .fs-48 {
font-size: 7.4666666667vw;
}
}
.honormagicos .fs-40 {
font-size: 2.0833333333vw;
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .fs-40 {
font-size: 5.8666666667vw;
}
}
.honormagicos .fs-18 {
font-size: 0.9375vw;
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .fs-18 {
font-size: 3.7333333333vw;
}
}
.honormagicos .mob-show {
display: none !important;
}
.honormagicos .mob-show-inline {
display: none !important;
}
.honormagicos .pc-show-inline {
display: inline-block !important;
}
.honormagicos .sticky-container {
height: calc(100vh - 52px);
position: sticky;
top: 52px;
overflow: hidden;
}
.honormagicos .linear {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.honormagicos .linear-blue {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(70deg, #5aa0cf, #47799b, #5aa0cf);
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .mob-show {
display: block !important;
}
.honormagicos .mob-show-inline {
display: inline-block !important;
}
.honormagicos .pc-show {
display: none !important;
}
.honormagicos .pc-show-inline {
display: none !important;
}
}

.honormagicos .swiper-button-next:after,
.honormagicos .swiper-container-rtl .swiper-button-prev:after,
.honormagicos .swiper-button-prev:after,
.honormagicos .swiper-container-rtl .swiper-button-next:after {
content: "";
}
.honormagicos .swiper-button-prev,
.honormagicos .swiper-button-next {
background: none;
}

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

body.is-overHidden {
overflow: hidden;
}

.honormagicos {
opacity: 1;
transition: opacity 0.2s ease;
will-change: opacity;
background: #fff;
color: #000;
}

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

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

.honormagicos section {
position: relative;
background: #fff;
}

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

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

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

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

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

.honormagicos sup {
position: relative !important;
font-size: 50% !important;
line-height: 0 !important;
vertical-align: super !important;
top: 0 !important;
margin-top: -0.5208333333vw;
}

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

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

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

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

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

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

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

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

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

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

.honormagicos.ff-demiBold {
font-family: "HONOR Sans World DemiBold", "HONOR Sans World DemiBold";
}

.honormagicos.ff-medium {
font-family: "HONOR Sans World Medium", "HONOR Sans World Medium";
}

.honormagicos.ff-regular {
font-family: " HONOR Sans World Regular", "HONOR Sans World Regular";
}

.honormagicos.ff-light {
font-family: "HONOR Sans World Light";
}

.honormagicos.ff-extraLight {
font-family: "HONOR Sans World ExtraLight";
}

.honormagicos .ff-demiBold {
font-family: "HONOR Sans World DemiBold", "HONOR Sans World DemiBold";
}

.honormagicos .ff-medium {
font-family: "HONOR Sans World Medium", "HONOR Sans World Medium";
}

.honormagicos .ff-regular {
font-family: " HONOR Sans World Regular", "HONOR Sans World Regular";
}

.honormagicos .ff-light {
font-family: "HONOR Sans World Light";
}

.honormagicos .ff-extraLight {
font-family: "HONOR Sans World ExtraLight";
}

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

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .fs-56 {
font-size: 6.4vw;
}
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honormagicos .fs-56 {
font-size: 5.3333333333vw;
}
}
.honormagicos .fs-48 {
font-size: 2.2vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .fs-48 {
font-size: 8.5333333333vw;
}
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honormagicos .fs-48 {
font-size: 6.4vw;
}
}
.honormagicos .fs-24 {
font-size: 1.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .fs-24 {
font-size: 4.8vw;
}
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honormagicos .fs-24 {
font-size: 3.7333333333vw;
}
}
.honormagicos .fs-18 {
font-size: 0.9375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .fs-18 {
font-size: 3.7333333333vw;
}
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honormagicos .fs-18 {
font-size: 2.6666666667vw;
}
}
.honormagicos .sticky-container {
position: sticky;
top: 52px;
height: calc(100vh - 52px);
overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sticky-container {
top: 52px;
height: calc(100vh - 52px);
}
}
.honormagicos .common-copy-wrapper .common-subtitle {
display: inline-flex;
align-items: center;
margin-bottom: 1.5625vw;
}

.honormagicos .common-copy-wrapper .common-subtitle sup {
margin-top: -0.5208333333vw;
text-align: left;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .common-copy-wrapper .common-subtitle {
margin-bottom: 5.3333333333vw;
text-align: left;
}
.honormagicos .common-copy-wrapper .common-subtitle sup {
margin-top: -1.6vw;
}
.honormagicos .section-experience .common-subtitle {
width: 62vw;
}
.honormagicos .section-turbox .common-copy-wrapper .common-subtitle {
text-align: left;
}
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honormagicos .common-copy-wrapper .common-subtitle {
margin-bottom: 2.6666666667vw;
}
}
.honormagicos .common-copy-wrapper .common-title {
transform: translateX(-0.1041666667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .common-copy-wrapper .common-title {
transform: none;
}
}
.honormagicos .common-copy-wrapper .common-copy {
margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .common-copy-wrapper .common-copy {
margin-top: 2.6666666667vw;
}
}
.honormagicos .common-copy-wrapper .line {
display: inline-block;
width: 0;
height: 1.1458333333vw;
border-left: 1px solid #000;
margin: 0 0.8333333333vw 0 0.6770833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .common-copy-wrapper .line {
height: 4.8vw;
margin: 0 2.6666666667vw 0 2.6666666667vw;
}
}
.honormagicos .common-copy-wrapper .icon-ai {
width: 2.2135416667vw;
height: 1.1284722222vw;
transform: translateY(-0.1041666667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .common-copy-wrapper .icon-ai {
width: 7.3666666667vw;
height: 3.5333333333vw;
transform: translateY(-0.2666666667vw);
}
}
.honormagicos .section-kv {
z-index: 3;
}

.honormagicos .section-kv .kv-container {
position: relative;
height: calc(100vh - 52px);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-kv .kv-container {
height: 150vh;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honormagicos .section-kv .kv-container {
height: calc(100vh - 52px);
}
}
.honormagicos .section-kv .bg {
position: absolute;
top: 0;
left: 0;
}

.honormagicos .section-kv .logo-wrap {
position: relative;
}

.honormagicos .section-kv .logo {
position: relative;
width: 19.7916666667vw;
height: 27.5vw;
margin: 0 auto;
}

.honormagicos .section-kv .logo-text {
font-size: 1.6666666667vw;
color: #fff;
margin-top: 0.78125vw;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-kv .logo {
width: 53.0666666667vw;
height: 68vw;
}
.honormagicos .section-kv .logo-text {
font-size: 4.2666666667vw;
margin-top: 2.6666666667vw;
}
}
.honormagicos .section-tvc {
display: none;
}

.honormagicos .section-tvc .tvc-container {
position: relative;
height: 56.1458333333vw;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-tvc .tvc-container {
height: calc(100vh - 52px);
}
}
.honormagicos .section-tvc .playBtn {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 5.7291666667vw;
height: 5.7291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-tvc .playBtn {
width: 14.6666666667vw;
height: 14.6666666667vw;
}
}
.honormagicos .section-tvc .section-tvc-cursor {
position: fixed;
z-index: 2;
top: 0;
left: 0;
display: none;
width: 6.25vw;
height: 6.25vw;
margin-top: -3.125vw;
margin-left: -3.125vw;
cursor: none;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: none;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-tvc .section-tvc-cursor {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 24vw;
height: 24vw;
margin: 0;
transform: translate(-50%, -50%);
}
}
.honormagicos .section-tvc .section-tvc-cursor::after {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 0;
height: 0;
content: "";
cursor: none;
transform: translate(-45%, -50%);
border-top: 0.5208333333vw solid transparent;
border-bottom: 0.5208333333vw solid transparent;
border-left: 1.0416666667vw solid #fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-tvc .section-tvc-cursor::after {
border-top: 2.6666666667vw solid transparent;
border-bottom: 2.6666666667vw solid transparent;
border-left: 5.3333333333vw solid #fff;
}
}
.honormagicos .section-tvc .section-tvc-cursor.active {
display: block;
}

@media (any-hover: none) {
.honormagicos .section-tvc .section-tvc-cursor {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
}
}
.honormagicos .section-maintitle {
height: calc(200vh + 31.25vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle {
height: 200vh;
}
}
.honormagicos .section-maintitle .trigger-maintitle {
position: absolute;
top: calc(100vh + 31.25vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .trigger-maintitle {
top: calc(100vh + 53.3333333333vw);
top: 100vh;
}
}
.honormagicos .section-maintitle .sticky-container {
height: calc(100vh - 52px + 31.25vw);
top: -15.625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .sticky-container {
height: calc(100vh - 52px);
top: 52px;
}
}
.honormagicos .section-maintitle .maintitle-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #ffefdb, #f5bc9f, #9578e6, #449aff);
background-size: 300% 300%;
animation: scroll 5s linear infinite;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .maintitle-wrapper {
background: #fff;
animation: none;
}
}
@keyframes scroll {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.honormagicos .section-maintitle .mask-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.honormagicos .section-maintitle .mask {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vw;
border-radius: 50%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .mask {
display: none;
}
}
.honormagicos .section-maintitle .mask > div {
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, #fff 60.5%, transparent 72%);
transition: transform 0.3s ease;
}

.honormagicos .section-maintitle .mask5 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10.4166666667vw;
background: linear-gradient(180deg, #fff, transparent);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .mask5 {
display: none;
}
}
.honormagicos .section-maintitle .mask1 {
transform: translateX(-94%) translateY(-93.8%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .mask1 {
transform: translateX(-108%) translateY(-159.8%) scaleX(1.35) scaleY(2.2);
}
}
.honormagicos .section-maintitle .mask2 {
transform: translateX(-6%) translateY(-93.8%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .mask2 {
transform: translateX(8%) translateY(-159.8%) scaleX(1.35) scaleY(2.2);
}
}
.honormagicos .section-maintitle .mask3 {
transform: translateX(-94%) translateY(-5.8%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .mask3 {
transform: translateX(-108%) translateY(59.8%) scaleX(1.35) scaleY(2.2);
}
}
.honormagicos .section-maintitle .mask4 {
transform: translateX(-6%) translateY(-5.8%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .mask4 {
transform: translateX(8%) translateY(59.8%) scaleX(1.35) scaleY(2.2);
}
}
@media (min-aspect-ratio: 12/10) and (min-width: 1366px) {
.honormagicos .section-maintitle .mask1:hover > div,
.honormagicos .section-maintitle .mask3:hover > div {
transform: translateX(-0.78125vw);
background: radial-gradient(circle, #fff 60%, transparent 71%);
}
}
@media (min-aspect-ratio: 12/10) and (min-width: 1366px) {
.honormagicos .section-maintitle .mask2:hover > div,
.honormagicos .section-maintitle .mask4:hover > div {
transform: translateX(0.78125vw);
background: radial-gradient(circle, #fff 60%, transparent 71%);
}
}
.honormagicos .section-maintitle .star {
position: relative;
width: 77.3958333333vw;
height: 77.2395833333vw;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .star {
width: 100%;
height: 171.4666666667vw;
}
}
.honormagicos .section-maintitle .copy-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 36.4583333333vw;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .copy-wrapper {
width: 72vw;
}
}
.honormagicos .section-maintitle .copy-wrapper .subtitle {
display: inline-block;
font-size: 3.3333333333vw;
background: linear-gradient(90deg, #ffefdb -9.84%, #f5bc9f 18.97%, #9578e6 60.05%, #449aff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-maintitle .copy-wrapper .subtitle {
font-size: 8.5333333333vw;
}
}
.honormagicos .section-maintitle .darkmask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
pointer-events: none;
}

.honormagicos .ga-section-maintitle1 {
z-index: 3;
}

.honormagicos .section-yoyo {
height: 220vh;
z-index: 4;
background: #fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo {
height: auto;
}
}
.honormagicos .section-yoyo #trigger-yoyo-2 {
position: absolute;
top: 40vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo #trigger-yoyo-2 {
position: static;
}
}
.honormagicos .section-yoyo.is-active-reverse-0 .video-wrapper .detail1 .copy {
transition: opacity 0.5s ease;
}

.honormagicos .section-yoyo.is-active-forward-1 .video-wrapper .detail1,
.honormagicos .section-yoyo.is-active-reverse-1 .video-wrapper .detail1 {
transform: translateY(calc(-100% - 5.2083333333vw));
opacity: 0.1;
}

.honormagicos .section-yoyo.is-active-forward-1 .video-wrapper .detail1 .copy,
.honormagicos .section-yoyo.is-active-reverse-1 .video-wrapper .detail1 .copy {
opacity: 0;
}

.honormagicos .section-yoyo.is-active-forward-1 .video-wrapper .detail2,
.honormagicos .section-yoyo.is-active-reverse-1 .video-wrapper .detail2 {
transform: translateY(0);
opacity: 1;
}

.honormagicos .section-yoyo.is-active-forward-1 .video-wrapper .detail2 .copy,
.honormagicos .section-yoyo.is-active-reverse-1 .video-wrapper .detail2 .copy {
opacity: 1;
transition: opacity 0.5s ease;
}

.honormagicos .section-yoyo.is-active-forward-1 .video-wrapper .detail3,
.honormagicos .section-yoyo.is-active-reverse-1 .video-wrapper .detail3 {
transform: translateY(calc(100% + 5.2083333333vw));
}

.honormagicos .section-yoyo.is-active-forward-1 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2,
.honormagicos .section-yoyo.is-active-reverse-1 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2 {
opacity: 0;
}

.honormagicos .section-yoyo.is-active-forward-1 .navBtn-wrapper .navBtn:nth-of-type(2) .icon-star2,
.honormagicos .section-yoyo.is-active-reverse-1 .navBtn-wrapper .navBtn:nth-of-type(2) .icon-star2 {
opacity: 1;
}

.honormagicos .section-yoyo.is-active-forward-2 .video-wrapper .detail1 {
transform: translateY(calc(-200% - 10.4166666667vw));
opacity: 0.1;
}

.honormagicos .section-yoyo.is-active-forward-2 .video-wrapper .detail1 .copy {
opacity: 0;
}

.honormagicos .section-yoyo.is-active-forward-2 .video-wrapper .detail2 {
transform: translateY(calc(-100% - 5.2083333333vw));
opacity: 0.1;
}

.honormagicos .section-yoyo.is-active-forward-2 .video-wrapper .detail2 .copy {
opacity: 0;
}

.honormagicos .section-yoyo.is-active-forward-2 .video-wrapper .detail3 {
transform: translateY(0);
opacity: 1;
}

.honormagicos .section-yoyo.is-active-forward-2 .video-wrapper .detail3 .copy {
opacity: 1;
transition: opacity 0.5s ease;
}

.honormagicos .section-yoyo.is-active-forward-2 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2 {
opacity: 0;
}

.honormagicos .section-yoyo.is-active-forward-2 .navBtn-wrapper .navBtn:nth-of-type(3) .icon-star2 {
opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .sticky-container {
position: relative;
top: auto;
height: auto;
}
}
.honormagicos .section-yoyo .bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-yoyo .yoyo-wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.honormagicos .section-yoyo2 .yoyo-wrapper {
flex-direction: row-reverse;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .yoyo-wrapper {
flex-direction: column;
height: auto;
padding: 0 0 21.3333333333vw;
text-align: center;
}
}
@media (width: 1024px) and (orientation: landscape), (width: 1366px) and (orientation: landscape), (min-aspect-ratio: 2500/1670) and (max-aspect-ratio: 2530/1685) {
.honormagicos .section-yoyo .yoyo-wrapper {
transform: scale(1.15);
}
}
.honormagicos .section-yoyo .copy-wrapper {
width: 19.7916666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .copy-wrapper {
width: 82.6666666667vw;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo {
position: relative;
width: 52.0833333333vw;
height: 29.6875vw;
margin-left: 2.75111vw;
overflow: visible;
}

.honormagicos .section-yoyo2 .swiper-container-yoyo {
margin-left: 0;
margin-right: 2.75111vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo {
width: 91.4666666667vw;
height: auto;
margin: 8vw auto 0;
overflow: hidden;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .border {
position: absolute;
top: 0;
left: 0;
z-index: 0;
will-change: opacity;
}

.honormagicos .section-yoyo .swiper-container-yoyo .video-yoyo {
border-radius: 0.4947916667vw;
}

.honormagicos .section-yoyo .swiper-container-yoyo .video-photo {
border-radius: 0.4947916667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .video-yoyo {
width: 100%;
height: 162.6666666667vw;
border-radius: 2.1333333333vw;
-o-object-fit: contain;
object-fit: contain;
margin-top: 4vw;
}
.honormagicos .section-yoyo .swiper-container-yoyo .video-photo {
width: 100%;
height: 51.4666666667vw;
border-radius: 0;
-o-object-fit: contain;
object-fit: contain;
margin-top: 4vw;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .replayBtn {
position: absolute;
top: calc(100% + 1.0416666667vw);
right: 0.5208333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .replayBtn {
top: auto;
bottom: 2.6666666667vw;
right: 50%;
transform: translateX(0);
font-size: 3.7333333333vw;
position: static;
margin: 2.6666666667vw auto 0;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-yoyo .swiper-container-yoyo .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 0;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .copy {
font-size: 1.25vw;
position: absolute;
top: calc(100% + 1.0416666667vw);
left: 0.5208333333vw;
width: 20.8333333333vw;
will-change: opacity;
display: flex;
align-items: center;
font-family: "HONOR Sans World Medium";
}

.honormagicos .section-yoyo .swiper-container-yoyo .icon-ai {
width: 2.2916666667vw;
height: auto;
transform: translateY(-6%);
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .copy {
position: static;
width: 100%;
font-size: 3.7333333333vw;
margin: 5.3333333333vw auto 0;
display: flex !important;
justify-content: center;
}
.honormagicos .section-yoyo .swiper-container-yoyo .icon-ai {
width: 5.3333333333vw;
margin-right: 1.6vw;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .detail {
padding: 0.5208333333vw;
transition: all 0.5s ease;
will-change: opacity, transform;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .detail {
padding: 0;
background: none;
border-radius: 2.1333333333vw;
padding-bottom: 0;
}
.honormagicos .section-yoyo .swiper-container-yoyo .detail .video-photo {
margin-top: 4vw;
border-radius: 2.1333333333vw;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .detail2,
.honormagicos .section-yoyo .swiper-container-yoyo .detail3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .detail2,
.honormagicos .section-yoyo .swiper-container-yoyo .detail3 {
position: relative;
opacity: 1;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .detail2 .copy,
.honormagicos .section-yoyo .swiper-container-yoyo .detail3 .copy {
opacity: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .detail2 .copy,
.honormagicos .section-yoyo .swiper-container-yoyo .detail3 .copy {
opacity: 1;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .detail2 {
transform: translateY(calc(100% + 5.2083333333vw));
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .detail2 {
transform: none;
}
}
.honormagicos .section-yoyo .swiper-container-yoyo .detail3 {
transform: translateY(calc(200% + 10.4166666667vw));
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiper-container-yoyo .detail3 {
transform: none;
}
}
.honormagicos .section-yoyo .navBtn-wrapper {
margin-left: 1.0416666667vw;
display: flex;
flex-direction: column;
}

.honormagicos .section-yoyo2 .navBtn-wrapper {
margin-left: 0;
margin-right: 1.0416666667vw;
}

.honormagicos .section-yoyo .navBtn-wrapper .navBtn {
position: relative;
width: 1.3541666667vw;
height: 1.3541666667vw;
}

.honormagicos .section-yoyo .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-top: 1.5625vw;
}

.honormagicos .section-yoyo .navBtn-wrapper .navBtn:not(:first-of-type) .icon-star2 {
opacity: 0;
}

.honormagicos .section-yoyo .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .navBtn-wrapper.honormagicos-mobShow {
display: flex !important;
justify-content: center;
margin: 1.1666666667vw auto 0;
transform: none;
flex-direction: row;
}
}
.honormagicos .section-yoyo .navBtn-wrapper.honormagicos-mobShow .navBtn {
position: relative;
width: 0.9375vw;
height: 0.9375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .navBtn-wrapper.honormagicos-mobShow .navBtn {
width: 4.8vw;
height: 4.8vw;
}
}
.honormagicos .section-yoyo .navBtn-wrapper.honormagicos-mobShow .navBtn:not(:first-of-type) {
margin-left: 0.7291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .navBtn-wrapper.honormagicos-mobShow .navBtn:not(:first-of-type) {
margin-left: 3.7333333333vw;
margin-top: 0;
}
}
.honormagicos .section-yoyo .navBtn-wrapper.honormagicos-mobShow .navBtn-active .icon-star2 {
opacity: 1;
}

.honormagicos .section-yoyo .navBtn-wrapper.honormagicos-mobShow .icon-star2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-yoyo .swiperBtn {
position: absolute;
bottom: 18.666667vw;
left: 50%;
width: 10.1333333333vw;
height: 10.1333333333vw;
z-index: 2;
}
.honormagicos .section-yoyo .swiperBtn.swiper-button-disabled {
pointer-events: none;
opacity: 0.3;
}
}
.honormagicos .section-yoyo .prevBtn {
transform: translateX(-26.6666666667vw);
}

.honormagicos .section-yoyo .nextBtn {
transform: translateX(15.7333333333vw);
}

.honormagicos .section-yoyo .playBtn {
display: none;
}

.honormagicos .section-assistant .bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .sticky-container {
height: auto;
position: static;
}
}
.honormagicos .section-assistant .assistant-wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .assistant-wrapper {
height: auto;
flex-direction: column;
text-align: center;
}
}
.honormagicos .section-assistant .copy-wrapper {
width: 18.2291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .copy-wrapper {
width: 82.6666666667vw;
}
}
.honormagicos .section-assistant .copy-wrapper .common-title sup {
top: -0.2083333333vw !important;
}

.honormagicos .section-assistant .video-wrapper {
position: relative;
margin-left: 9.375vw;
margin-right: 7.2916666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .video-wrapper {
margin-left: 0;
margin-right: 0;
margin-top: 5.3333333333vw;
order: 3;
}
}
.honormagicos .section-assistant .video-wrapper .video-assistant {
width: 17.8645833333vw;
height: 37.5vw;
border-radius: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .video-wrapper .video-assistant {
width: 45.6vw;
height: 91.7333333333vw;
border-radius: 8vw;
}
}
.honormagicos .section-assistant .video-wrapper .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(180deg, #fff, transparent);
}

.honormagicos .section-assistant .video-wrapper .replayBtn {
position: absolute;
top: calc(100% + 1.5625vw);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .video-wrapper .replayBtn {
position: static;
font-size: 3.7333333333vw;
margin: 4.2666666667vw auto 0;
transform: none;
}
}
.honormagicos .section-assistant .video-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-assistant .video-wrapper .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .video-wrapper .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-assistant .video-wrapper .phoneborder {
position: absolute;
top: -0.8333333333vw;
left: -0.6770833333vw;
width: 20.9375vw;
height: 41.4583333333vw;
z-index: 2;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .video-wrapper .phoneborder {
top: -1.8666666667vw;
left: -0.5333333333vw;
width: 51.0666666667vw;
height: 101.1170812604vw;
}
}
.honormagicos .section-assistant .right-wrapper {
width: 19.7916666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .right-wrapper {
width: 82.6666666667vw;
order: 2;
margin-top: 2.6666666667vw;
}
}
.honormagicos .section-assistant .right-wrapper .copy1 {
font-size: 1.25vw;
margin-bottom: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-assistant .mobcopy {
width: 82.6666666667vw;
order: 4;
margin-top: 5.3333333333vw;
font-size: 3.7333333333vw;
}
}
.honormagicos .section-door {
height: 160vh;
padding-top: 10.4166666667vw;
position: relative;
z-index: 4;
}

.honormagicos .section-door .bg {
position: absolute;
inset: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door {
height: auto;
padding-top: 21.3333333333vw;
}
}
.honormagicos .section-door #trigger-door-2 {
position: absolute;
top: 30vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door #trigger-door-2 {
position: static;
}
}
.honormagicos .section-door.is-active-1 .video-copy-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-door.is-active-1 .video-copy-wrapper .detail:nth-of-type(2) {
opacity: 1;
}

.honormagicos .section-door.is-active-1 .copy-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-door.is-active-1 .copy-wrapper .detail2 {
opacity: 1;
}

.honormagicos .section-door.is-active-1 .swiper-container-door .detail1 {
opacity: 0;
}

.honormagicos .section-door.is-active-1 .swiper-container-door .detail:nth-of-type(2) {
transform: none;
opacity: 1;
}

.honormagicos .section-door.is-active-1 .swiper-container-door .detail:nth-of-type(3) {
transform: translateX(calc(100% + 4.6875vw)) scale(0.899);
}

.honormagicos .section-door.is-active-1 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2 {
opacity: 0;
}

.honormagicos .section-door.is-active-1 .navBtn-wrapper .navBtn:nth-of-type(2) .icon-star2 {
opacity: 1;
}

.honormagicos .section-door.is-active-1 .prevBtn {
pointer-events: visible;
opacity: 1;
}

.honormagicos .section-door.is-active-2 .video-copy-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-door.is-active-2 .video-copy-wrapper .detail:nth-of-type(3) {
opacity: 1;
}

.honormagicos .section-door.is-active-2 .copy-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-door.is-active-2 .copy-wrapper .detail3 {
opacity: 1;
}

.honormagicos .section-door.is-active-2 .swiper-container-door .detail1 {
opacity: 0;
}

.honormagicos .section-door.is-active-2 .swiper-container-door .detail:nth-of-type(2) {
transform: none;
opacity: 0;
}

.honormagicos .section-door.is-active-2 .swiper-container-door .detail:nth-of-type(3) {
transform: none;
opacity: 1;
}

.honormagicos .section-door.is-active-2 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2 {
opacity: 0;
}

.honormagicos .section-door.is-active-2 .navBtn-wrapper .navBtn:nth-of-type(3) .icon-star2 {
opacity: 1;
}

.honormagicos .section-door.is-active-2 .prevBtn {
opacity: 1;
pointer-events: visible;
}

.honormagicos .section-door.is-active-2 .nextBtn {
pointer-events: none;
opacity: 0.3;
}

.honormagicos .section-door.is-active-2.is-icon-active .icon-wrapper {
opacity: 1;
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-1 {
transform: translateX(-370%) translateY(-370%);
transition-delay: 0.1s;
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-2 {
transform: translateX(-365%) translateY(-215%);
transition-delay: 0.2s;
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-3 {
transform: translateX(-370%) translateY(-50%);
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-4 {
transform: translateX(-365%) translateY(150%);
transition-delay: 0.1s;
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-5 {
transform: translateX(-370%) translateY(300%);
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-6 {
transform: translateX(270%) translateY(-370%);
transition-delay: 0.3s;
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-7 {
transform: translateX(290%) translateY(-225%);
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-8 {
transform: translateX(280%) translateY(-40%);
transition-delay: 0.1s;
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-9 {
transform: translateX(270%) translateY(150%);
transition-delay: 0.4s;
}

.honormagicos .section-door.is-icon-active .icon-wrapper .lasticon-10 {
transform: translateX(280%) translateY(300%);
transition-delay: 0.2s;
}

.honormagicos .section-door .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-door .sticky-container {
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .sticky-container {
position: static;
height: auto;
}
}
@media (width: 1024px) and (orientation: landscape), (width: 1366px) and (orientation: landscape), (min-aspect-ratio: 2500/1670) and (max-aspect-ratio: 2530/1685) {
.honormagicos .section-door .content-wrapper {
transform: scale(1.15);
}
}
.honormagicos .section-door .door-wrapper {
position: relative;
width: 27.1354166667vw;
height: 39.6354166667vw;
transform-origin: 40% 50%;
perspective: 26.0416666667vw;
z-index: 2;
}

.honormagicos .section-door .door-wrapper .top {
position: relative;
width: 100%;
height: 100%;
border-radius: 2.0833333333vw;
overflow: hidden;
transform: rotate(0);
z-index: 2;
perspective: 26.0416666667vw;
}

.honormagicos .section-door .door-wrapper .top .top-white {
position: absolute;
top: 1px;
left: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
background: #fff;
border-radius: 2.0833333333vw;
z-index: 2;
transform-origin: 0 50%;
}

.honormagicos .section-door .door-wrapper .top .top-color {
width: 100%;
height: 100%;
background: linear-gradient(154deg, #dce8ff 1.89%, #769fff 94.23%);
border-radius: 2.0833333333vw;
}

.honormagicos .section-door .door-wrapper .bot {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(154deg, #dce8ff 1.89%, #769fff 94.23%);
border-radius: 2.0833333333vw;
transform-origin: 0 50%;
}

.honormagicos .section-door .content-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 6.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .content-wrapper {
position: relative;
top: auto;
left: auto;
height: auto;
flex-direction: column;
padding-bottom: 8vw;
}
}
.honormagicos .section-door .copy-wrapper {
width: 22.65625vw;
margin-right: 1.0416666667vw;
}

.honormagicos .section-door .copy-wrapper .common-copy {
width: 19.8958333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .copy-wrapper {
width: 82.6666666667vw;
text-align: center;
margin-right: 0;
}
.honormagicos .section-door .copy-wrapper .common-copy {
width: auto;
}
}
.honormagicos .section-door .copy-wrapper .detail-wrapper {
position: relative;
width: 100%;
}

.honormagicos .section-door .copy-wrapper .detail {
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-door .copy-wrapper .detail2,
.honormagicos .section-door .copy-wrapper .detail3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}

.honormagicos .section-door .video-wrapper {
position: relative;
width: 16.0416666667vw;
height: 33.4895833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .video-wrapper {
width: 50.6666666667vw;
height: auto;
margin: 0;
}
}
.honormagicos .section-door .icon-wrapper {
position: absolute;
top: 55%;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateY(-50%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper {
top: 49%;
}
}
.honormagicos .section-door .icon-wrapper .lasticon {
position: absolute;
top: 50%;
left: 50%;
transition: all 0.5s ease;
will-change: transform;
}

.honormagicos .section-door .icon-wrapper .lasticon-1 {
width: 3.984375vw;
height: 3.984375vw;
transform: translateX(-170%) translateY(-170%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-1 {
width: 11.7333333333vw;
height: 11.7333333333vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-2 {
width: 3.6458333333vw;
height: 3.6458333333vw;
transform: translateX(-165%) translateY(-15%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-2 {
width: 10.6666666667vw;
height: 10.6666666667vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-3 {
width: 3.0989583333vw;
height: 3.0989583333vw;
transform: translateX(-170%) translateY(-50%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-3 {
width: 9.0666666667vw;
height: 9.0666666667vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-4 {
width: 3.6458333333vw;
height: 3.6458333333vw;
transform: translateX(-165%) translateY(50%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-4 {
width: 10.6666666667vw;
height: 10.6666666667vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-5 {
width: 3.984375vw;
height: 3.984375vw;
transform: translateX(-170%) translateY(100%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-5 {
width: 11.7333333333vw;
height: 11.7333333333vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-6 {
width: 3.984375vw;
height: 4.0104166667vw;
transform: translateX(70%) translateY(-170%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-6 {
width: 11.7333333333vw;
height: 11.7333333333vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-7 {
width: 3.3072916667vw;
height: 3.3072916667vw;
transform: translateX(90%) translateY(-25%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-7 {
width: 9.6vw;
height: 9.6vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-8 {
width: 3.0989583333vw;
height: 3.0729166667vw;
transform: translateX(80%) translateY(-40%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-8 {
width: 9.0666666667vw;
height: 9.0666666667vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-9 {
width: 3.6458333333vw;
height: 3.6197916667vw;
transform: translateX(70%) translateY(50%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-9 {
width: 10.6666666667vw;
height: 10.6666666667vw;
}
}
.honormagicos .section-door .icon-wrapper .lasticon-10 {
width: 4.0104166667vw;
height: 3.984375vw;
transform: translateX(80%) translateY(100%) scale(0.8);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .icon-wrapper .lasticon-10 {
width: 11.7333333333vw;
height: 11.7333333333vw;
}
}
.honormagicos .section-door .swiper-container-door {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
margin-left: 1.5625vw;
margin-left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .swiper-container-door {
overflow: hidden;
}
}
.honormagicos .section-door .swiper-container-door .detail {
position: relative;
transition: all 0.5s ease;
will-change: opacity, transform;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .swiper-container-door .detail .video-door {
width: 91.4666666667vw;
height: 162.6666666667vw;
}
}
.honormagicos .section-door .swiper-container-door .detail:not(:first-of-type) {
position: absolute;
top: 0;
left: 0;
transform-origin: 0 50%;
opacity: 0.4;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .swiper-container-door .detail:not(:first-of-type) {
position: static;
transform-origin: 50% 50%;
opacity: 1;
}
}
.honormagicos .section-door .swiper-container-door .detail:nth-of-type(2) {
transform: translateX(calc(100% + 4.6875vw)) scale(0.899);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .swiper-container-door .detail:nth-of-type(2) {
transform: none;
}
}
.honormagicos .section-door .swiper-container-door .detail:nth-of-type(3) {
transform: translateX(calc(200% + 7.2916666667vw)) scale(0.812);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .swiper-container-door .detail:nth-of-type(3) {
transform: none;
}
}
.honormagicos .section-door .swiper-container-door .replayBtn {
position: absolute;
top: calc(100% + 0.7291666667vw);
right: 0.5208333333vw;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .swiper-container-door .replayBtn {
position: static;
margin: 2.6666666667vw 0 0;
font-size: 3.7333333333vw;
transform: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: -moz-max-content;
width: max-content;
}
}
.honormagicos .section-door .swiper-container-door .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-door .swiper-container-door .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .swiper-container-door .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-door .video-copy-wrapper {
position: relative;
width: 16.0416666667vw;
margin-bottom: 1.0416666667vw;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .video-copy-wrapper {
width: 50.6666666667vw;
margin-top: 8vw;
margin-bottom: 2.6666666667vw;
display: none;
}
}
.honormagicos .section-door .video-copy-wrapper .detail {
font-size: 1.25vw;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .video-copy-wrapper .detail {
font-size: 3.7333333333vw;
}
}
.honormagicos .section-door .video-copy-wrapper .detail:not(:first-of-type) {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
}

.honormagicos .section-door .navBtn-wrapper {
top: calc(100% + 0.7291666667vw);
left: 0;
display: flex;
justify-content: center;
align-items: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .navBtn-wrapper {
position: static;
transform: none;
}
}
.honormagicos .section-door .navBtn-wrapper .navBtn {
position: relative;
width: 0.9375vw;
height: 0.9375vw;
}

.honormagicos .section-door .buttons {
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.78125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .navBtn-wrapper .navBtn {
width: 4.8vw;
height: 4.8vw;
}
.honormagicos .section-door .buttons {
margin-top: 8vw;
-moz-column-gap: 2.6666666667vw;
column-gap: 2.6666666667vw;
}
}
.honormagicos .section-door .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 0.7291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 3.7333333333vw;
}
}
.honormagicos .section-door .navBtn-wrapper .navBtn:not(:first-of-type) .icon-star2 {
opacity: 0;
}

.honormagicos .section-door .navBtn-wrapper .navBtn-active .icon-star2 {
opacity: 1 !important;
}

.honormagicos .section-door .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .navBtn-wrapper .icon-star2 {
opacity: 0;
}
}
.honormagicos .section-door .swiperBtn {
position: static;
top: calc(100% + 5.46875vw);
width: 1.9791666667vw;
height: 1.9791666667vw;
left: 50%;
z-index: 2;
cursor: pointer;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .swiperBtn {
top: auto;
bottom: -2.6666666667vw;
width: 10.1333333333vw;
height: 10.1333333333vw;
}
.honormagicos .section-door .swiperBtn.swiper-button-disabled {
pointer-events: none;
opacity: 0.3;
}
}
.honormagicos .section-door .prevBtn {
opacity: 0.3;
pointer-events: none;
margin-right: 1.0416666667vw;
}

.honormagicos .section-door .video-wrapper {
position: relative;
width: 52.0833333333vw;
height: 29.6875vw;
transition: all 0.5s ease;
will-change: opacity, transform;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .video-wrapper {
width: 100%;
height: auto;
padding: 0;
margin-top: 4vw;
}
}
.honormagicos .section-door .video-wrapper .border {
width: 100%;
height: 100%;
}

.honormagicos .section-door .video-wrapper .video-door {
border-radius: 0.4947916667vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 0vw), calc(-50% + 0vw));
width: 51.0416666667vw;
height: 28.75vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .video-wrapper .video-door {
border-radius: 2.1333333333vw;
width: 50.6666666667vw;
height: 113.8666666667vw;
margin: 0 auto;
position: static;
transform: translate(0);
}
}
.honormagicos .section-door .video-wrapper .copy {
font-size: 1.25vw;
position: absolute;
top: calc(100% + 1.0416666667vw);
left: 0.5208333333vw;
width: 20.8333333333vw;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-door .prevBtn {
opacity: 1;
}
}
.honormagicos .section-door .nextBtn {
margin-left: 1.0416666667vw;
}

.honormagicos .section-capsule {
margin-top: 5.2083333333vw;
z-index: 2;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule {
margin-top: 21.3333333333vw;
}
}
.honormagicos .section-capsule .capsule-container {
overflow: hidden;
padding-bottom: 13.0208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .capsule-container {
padding-bottom: 4vw;
}
}
.honormagicos .section-capsule .capsule-wrapper {
width: 75vw;
margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .capsule-wrapper {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
}
.honormagicos .section-capsule .copy-wrapper {
width: 36.9791666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .copy-wrapper {
width: 82.6666666667vw;
order: 1;
text-align: center;
}
}
.honormagicos .section-capsule .navBtn-wrapper {
display: flex;
width: 100%;
justify-content: flex-end;
margin-top: -1.9791666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .navBtn-wrapper {
margin-top: 8vw;
justify-content: center;
order: 3;
}
}
.honormagicos .section-capsule .navBtn-wrapper .navBtn {
position: relative;
width: 1.9791666667vw;
height: 1.9791666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .navBtn-wrapper .navBtn {
width: 4.8vw;
height: 4.8vw;
}
}
.honormagicos .section-capsule .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 1.5625vw;
transform: rotate(180deg);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 3.7333333333vw;
transform: none;
}
}
.honormagicos .section-capsule .navBtn-wrapper .navBtn-active {
opacity: 0.2;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .navBtn-wrapper .navBtn-active {
opacity: 1;
}
}
.honormagicos .section-capsule .navBtn-wrapper .navBtn-active .icon-star2 {
opacity: 1;
}

.honormagicos .section-capsule .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}

.honormagicos .section-capsule .swiper-container-capsule {
overflow: visible;
margin-top: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .swiper-container-capsule {
width: 84vw;
margin-top: 8vw;
text-align: center;
order: 2;
}
}
.honormagicos .section-capsule .swiper-container-capsule .bg {
height: 26.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .swiper-container-capsule .bg {
height: 80vw;
}
}
.honormagicos .section-capsule .swiper-container-capsule .copy {
font-size: 1.25vw;
margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .swiper-container-capsule .copy {
font-size: 3.7333333333vw;
margin-top: 2.6666666667vw;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-capsule .swiperBtn {
position: absolute;
bottom: 1.3333333333vw;
left: 50%;
width: 10.1333333333vw;
height: 10.1333333333vw;
z-index: 2;
}
.honormagicos .section-capsule .swiperBtn.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}
}
.honormagicos .section-capsule .prevBtn {
transform: translateX(-32vw);
}

.honormagicos .section-capsule .nextBtn {
transform: translateX(21.0666666667vw);
}

.honormagicos .section-experience {
padding-bottom: 10.4166666667vw;
padding-top: 8vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience {
margin-top: 21.3333333333vw;
margin-bottom: 21.3333333333vw;
padding-top: 0;
}
}
.honormagicos .section-experience .experience-container {
overflow: hidden;
}

.honormagicos .section-experience .bg {
position: absolute;
left: 0;
height: 142.1875vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .bg {
top: 0;
height: 100%;
}
.honormagicos .section-experience .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-experience .experience-wrapper {
position: relative;
width: 75vw;
margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .experience-wrapper {
width: 100%;
}
}
.honormagicos .section-experience .copy-wrapper {
width: 48.4375vw;
margin: 0 auto;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .copy-wrapper {
width: 82.6666666667vw;
text-align: center;
}
}
.honormagicos .section-experience .swiper-container-experience {
width: 100%;
margin-top: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience {
width: 81.8666666667vw;
margin: 8vw auto 0;
}
}
.honormagicos .section-experience .swiper-container-experience .swiper-wrapper {
justify-content: center;
-moz-column-gap: 1.0416666667vw;
column-gap: 1.0416666667vw;
}

.honormagicos .section-experience .swiper-container-experience .detail {
position: relative;
width: 24.6875vw;
height: 30.0520833333vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .detail {
width: 81.8666666667vw;
height: 104.7333333333vw;
background: #fff;
border-radius: 2.6666666667vw;
border: 1px solid #d2ecff;
}
.honormagicos .section-experience .swiper-container-experience .swiper-wrapper {
justify-content: flex-start;
-moz-column-gap: 0;
column-gap: 0;
}
}
.honormagicos .section-experience .swiper-container-experience .border {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .border {
display: none;
}
}
.honormagicos .section-experience .swiper-container-experience .videopart {
position: relative;
}

.honormagicos .section-experience .swiper-container-experience .phoneborder {
position: absolute;
top: -0.5208333333vw;
left: -0.4866666667vw;
width: 12.8645833333vw;
height: 25.473155058vw;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .phoneborder {
top: -1.8666666667vw;
left: -1.3333333333vw;
width: 43.0666666667vw;
height: 85.2762852405vw;
}
}
.honormagicos .section-experience .swiper-container-experience .subtitle {
position: relative;
font-size: 0.9375vw;
margin-bottom: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .subtitle {
font-size: 3.7333333333vw;
margin-bottom: 5.3333333333vw;
}
}
.honormagicos .section-experience .swiper-container-experience .video-experience {
border-radius: 1.0416666667vw;
width: 10.9375vw;
height: 23.0208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .video-experience {
border-radius: 5.3333333333vw;
width: 36.5333333333vw;
height: 77.6vw;
}
}
.honormagicos .section-experience .swiper-container-experience .replayBtn,
.honormagicos .section-experience .swiper-container-experience .selfPlayBtn {
position: absolute;
bottom: 0.9895833333vw;
right: 1.1458333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .replayBtn,
.honormagicos .section-experience .swiper-container-experience .selfPlayBtn {
bottom: 2.9333333333vw;
right: 3.7333333333vw;
font-size: 3.7333333333vw;
}
}
.honormagicos .section-experience .swiper-container-experience .replayBtn.is-active,
.honormagicos .section-experience .swiper-container-experience .selfPlayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-experience .swiper-container-experience .icon-replay,
.honormagicos .section-experience .swiper-container-experience .icon-play {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .icon-replay,
.honormagicos .section-experience .swiper-container-experience .icon-play {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 0;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .swiper-slide .replayBtn {
visibility: hidden !important;
left: 50%;
transform: translateX(-50%);
right: auto;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .swiper-slide-active .replayBtn.is-active {
visibility: visible !important;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiper-container-experience .selfPlayBtn {
display: none !important;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .navBtn-wrapper {
display: flex !important;
justify-content: center;
margin: 8vw auto 0;
}
.honormagicos .section-experience .navBtn-wrapper .navBtn {
position: relative;
width: 4.8vw;
height: 4.8vw;
}
.honormagicos .section-experience .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 3.7333333333vw;
}
.honormagicos .section-experience .navBtn-wrapper .navBtn-active .icon-star2 {
opacity: 1;
}
.honormagicos .section-experience .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-experience .swiperBtn {
position: absolute;
bottom: 7.4666666667vw;
left: 50%;
width: 10.1333333333vw;
height: 10.1333333333vw;
z-index: 2;
}
.honormagicos .section-experience .swiperBtn.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}
}
.honormagicos .section-experience .prevBtn {
transform: translateX(-26.6666666667vw);
}

.honormagicos .section-experience .nextBtn {
transform: translateX(15.7333333333vw);
}

.honormagicos .section-turbox {
background: transparent;
padding: 0 0 6.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox {
margin-top: 21.3333333333vw;
}
.honormagicos .section-turbox .bg {
position: absolute;
top: 0;
left: 0;
}
.honormagicos .section-turbox .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-turbox .turbox-container {
position: relative;
}

.honormagicos .section-turbox .logo {
width: 43.3854166667vw;
height: 8.4375vw;
margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .logo {
width: 72vw;
height: 13.8666666667vw;
}
}
.honormagicos .section-turbox .turbox-wrapper {
display: flex;
justify-content: space-between;
width: 72.916667vw;
margin: -1.25vw auto 0;
flex-direction: column;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .turbox-wrapper {
width: 91.4666666667vw;
margin-top: -2.4vw;
flex-direction: column;
}
}
.honormagicos .section-turbox .detail {
position: relative;
width: 100%;
padding: 3.125vw 3.5416666667vw 3.6458333333vw;
background: #fff;
border-radius: 0.8333333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .detail {
width: 100%;
padding: 5.3333333333vw 4.8vw 41.3333333333vw;
border-radius: 2.6666666667vw;
border: 1px solid #d2ecff;
}
.honormagicos .section-turbox .detail1 .common-subtitle {
margin-bottom: 5.3333333333vw;
}
}
.honormagicos .section-turbox .detail1 .spec-wrapper {
display: flex;
justify-content: space-between;
}

.honormagicos .section-turbox .detail1 .spec {
width: 49%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .detail2 {
margin-top: 5.3333333333vw;
}
}
.honormagicos .section-turbox .detail2 .spec-wrapper {
display: flex;
justify-content: space-between;
width: 25.395833vw;
}

.honormagicos .section-turbox .detail2 .spec1 {
width: -moz-max-content;
width: max-content;
}

.honormagicos .section-turbox .detail2 .spec2 {
width: 25%;
}

.honormagicos .section-turbox .detail2 .mobcopy {
font-size: 0.7291666667vw;
margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .detail2 .mobcopy {
font-size: 2.6666666667vw;
bottom: 2.6666666667vw;
}
}
.honormagicos .section-turbox .spec-wrapper {
margin-top: 3.4375vw;
width: 22.3958333333vw;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .spec-wrapper {
top: auto;
bottom: 22.6666666667vw;
width: 82.6666666667vw;
transform: translateX(-50%) translateY(50%);
}
}
.honormagicos .section-turbox .spec-wrapper .spec-number {
display: inline-flex;
align-items: center;
font-size: 3.125vw;
color: #256fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .spec-wrapper .spec-number {
font-size: 8vw;
}
}
.honormagicos .section-turbox .spec-wrapper .spec-number > span > span {
font-size: 4.1666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .spec-wrapper .spec-number > span > span {
font-size: 11.2vw;
}
}
.honormagicos .section-turbox .spec-wrapper .spec-copy {
font-size: 1.25vw;
margin-top: -0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .spec-wrapper .spec-copy {
font-size: 3.2vw;
margin-top: -0.8vw;
}
}
.honormagicos .section-turbox .spec-wrapper .icon-arrow {
width: 2.3958333333vw;
height: 3.125vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .spec-wrapper .icon-arrow {
width: 8vw;
height: 10.6666666667vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-checkface {
margin-top: 10.4166666667vw;
z-index: 2;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface {
margin-top: 21.3333333333vw;
}
}
.honormagicos .section-checkface.is-active-1 .wrapper1 .copy-wrapper {
opacity: 0;
}

.honormagicos .section-checkface.is-active-1 .wrapper1 .video-wrapper {
opacity: 0;
}

.honormagicos .section-checkface.is-active-1 .wrapper2 .copy-wrapper {
opacity: 1;
}

.honormagicos .section-checkface.is-active-1 .wrapper2 .video-wrapper {
opacity: 1;
transform: translateX(0);
}

.honormagicos .section-checkface.is-active-1 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2 {
opacity: 0;
}

.honormagicos .section-checkface.is-active-1 .navBtn-wrapper .navBtn:nth-of-type(2) .icon-star2 {
opacity: 1;
}

.honormagicos .section-checkface.is-active-1 .swiperPrevBtn {
opacity: 1;
pointer-events: visible;
}

.honormagicos .section-checkface.is-active-1 .swiperNextBtn {
opacity: 0.3;
pointer-events: none;
}

.honormagicos .section-checkface .bg {
position: absolute;
top: 0;
left: 0;
}

.honormagicos .section-checkface .checkface-container {
position: relative;
overflow: hidden;
padding-bottom: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .checkface-container {
padding-bottom: 0;
}
}
.honormagicos .section-checkface .checkface-wrapper {
position: relative;
width: 75vw;
margin: 0 auto;
}

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

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .checkface-wrapper .wrapper {
flex-direction: column;
}
}
.honormagicos .section-checkface .checkface-wrapper .wrapper2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .checkface-wrapper .wrapper2 {
position: static;
margin-top: 21.3333333333vw;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .wrapper2 {
padding-bottom: 13.3333333333vw;
}
}
.honormagicos .section-checkface .wrapper2 .copy-wrapper {
opacity: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .wrapper2 .copy-wrapper {
opacity: 1;
}
}
.honormagicos .section-checkface .wrapper2 .video-wrapper {
opacity: 0.2;
transform: translateX(calc(100% + 6.25vw));
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .wrapper2 .video-wrapper {
opacity: 1;
transform: none;
}
}
.honormagicos .section-checkface .copy-wrapper {
width: 17.4479166667vw;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .copy-wrapper {
width: 82.6666666667vw;
text-align: center;
}
}
.honormagicos .section-checkface .video-wrapper {
position: relative;
width: 54.375vw;
height: 31.0416666667vw;
transition: all 0.5s ease;
will-change: opacity, transform;
padding: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .video-wrapper {
width: 100%;
height: auto;
padding: 0;
margin-top: 8vw;
}
}
.honormagicos .section-checkface .video-wrapper .border {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.honormagicos .section-checkface .video-wrapper .video-checkface {
border-radius: 0.4947916667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .video-wrapper .video-checkface {
border-radius: 2.1333333333vw;
width: 91.4666666667vw;
height: 113.8666666667vw;
margin: 0 auto;
}
}
.honormagicos .section-checkface .video-wrapper .replayBtn {
position: absolute;
top: calc(100% + 1.0416666667vw);
right: 0.5208333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .video-wrapper .replayBtn {
position: static;
font-size: 3.7333333333vw;
margin: 2.6666666667vw auto 0;
}
}
.honormagicos .section-checkface .video-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-checkface .video-wrapper .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-checkface .video-wrapper .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-checkface .video-wrapper .copy {
font-size: 1.25vw;
position: absolute;
top: calc(100% + 1.0416666667vw);
left: 0.5208333333vw;
width: 20.8333333333vw;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-checkface .navBtn-wrapper {
position: absolute;
top: calc(100% + 1.0416666667vw);
left: calc(50% + 8.4895833333vw);
display: flex;
}

.honormagicos .section-checkface .navBtn-wrapper .navBtn {
position: relative;
width: 0.9375vw;
height: 0.9375vw;
}

.honormagicos .section-checkface .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 0.7291666667vw;
}

.honormagicos .section-checkface .navBtn-wrapper .navBtn:not(:first-of-type) .icon-star2 {
opacity: 0;
}

.honormagicos .section-checkface .navBtn-wrapper .swiper-button-disabled .icon-star2 {
opacity: 1;
}

.honormagicos .section-checkface .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease;
}

.honormagicos .section-checkface .swiperBtn {
position: absolute;
top: calc(100% + 0.5729166667vw);
width: 1.9791666667vw;
height: 1.9791666667vw;
left: 50%;
z-index: 2;
cursor: pointer;
}

.honormagicos .section-checkface .swiperPrevBtn {
transform: translateX(4.9479166667vw);
opacity: 0.3;
pointer-events: none;
}

.honormagicos .section-checkface .swiperNextBtn {
transform: translateX(12.6041666667vw);
}

.honormagicos .section-ainote1 .bg,
.honormagicos .section-ainote2 .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .bg img,
.honormagicos .section-ainote2 .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-ainote1 .ainote-container,
.honormagicos .section-ainote2 .ainote-container {
padding-top: 7.4166666667vw;
position: relative;
width: 75vw;
margin: 0 auto;
padding-bottom: 3.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .ainote-container,
.honormagicos .section-ainote2 .ainote-container {
padding-bottom: 21.3333333333vw;
padding-top: 0;
width: 100%;
}
}
.honormagicos .section-ainote1 .copy-wrapper,
.honormagicos .section-ainote2 .copy-wrapper {
width: 48.4375vw;
margin: 0 auto;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .copy-wrapper,
.honormagicos .section-ainote2 .copy-wrapper {
width: 82.6666666667vw;
}
}
.honormagicos .section-ainote1 .video-wrapper,
.honormagicos .section-ainote2 .video-wrapper {
width: 100%;
margin-top: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper,
.honormagicos .section-ainote2 .video-wrapper {
width: 91.4666666667vw;
margin: 8vw auto 0;
}
}
.honormagicos .section-ainote1 .video-wrapper .swiper-wrapper,
.honormagicos .section-ainote2 .video-wrapper .swiper-wrapper {
justify-content: space-between;
}

.honormagicos .section-ainote1 .video-wrapper .detail,
.honormagicos .section-ainote2 .video-wrapper .detail {
position: relative;
width: 24.6875vw;
height: auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid #d2ecff;
border-radius: 0.8333333333vw;
padding-top: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper .detail,
.honormagicos .section-ainote2 .video-wrapper .detail {
width: 81.8666666667vw;
height: auto;
border-radius: 2.6666666667vw;
justify-content: flex-start;
overflow: visible;
padding-top: 3vw;
}
.honormagicos .section-ainote1 .video-wrapper .detail.flex-new-end{
justify-content: flex-end;
} 
}
.honormagicos .section-ainote1 .video-wrapper .border,
.honormagicos .section-ainote2 .video-wrapper .border {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: none;
}

.honormagicos .section-ainote1 .video-wrapper .subtitle,
.honormagicos .section-ainote2 .video-wrapper .subtitle {
position: relative;
font-size: 0.9375vw;
text-align: center;
margin-bottom: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper .subtitle,
.honormagicos .section-ainote2 .video-wrapper .subtitle {
font-size: 3.7333333333vw;
margin-bottom: 3vw;
height: auto;
}
}
.honormagicos .section-ainote1 .video-wrapper .videopart,
.honormagicos .section-ainote2 .video-wrapper .videopart {
position: relative;
overflow: hidden;
}

.honormagicos .section-ainote1 .video-wrapper .videopart::after,
.honormagicos .section-ainote2 .video-wrapper .videopart::after {
content: "";
position: absolute;
top: -0.15625vw;
left: -0.15625vw;
width: calc(100% + 0.3125vw);
height: calc(100% + 0.3125vw);
}

.honormagicos .section-ainote1 .video-wrapper .video-ainote,
.honormagicos .section-ainote2 .video-wrapper .video-ainote {
position: relative;
width: 100%;
height: 25.7291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper .video-ainote,
.honormagicos .section-ainote2 .video-wrapper .video-ainote {
height: 162.6666666667vw;
border-radius: 0 0 2.1333333333vw 2.1333333333vw;
transform: scale(1) translateY(2px);
}
.honormagicos .section-ainote1 .video-wrapper .videopart {
border-radius: 0 0 2.1333333333vw 2.1333333333vw;
}
}
.honormagicos .section-ainote1 .video-wrapper .replayBtn,
.honormagicos .section-ainote1 .video-wrapper .selfPlayBtn,
.honormagicos .section-ainote2 .video-wrapper .replayBtn,
.honormagicos .section-ainote2 .video-wrapper .selfPlayBtn {
position: absolute;
bottom: 0.9895833333vw;
right: 1.0416666667vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper .replayBtn,
.honormagicos .section-ainote1 .video-wrapper .selfPlayBtn,
.honormagicos .section-ainote2 .video-wrapper .replayBtn,
.honormagicos .section-ainote2 .video-wrapper .selfPlayBtn {
bottom: 2.9333333333vw;
right: 2.9333333333vw;
font-size: 3.7333333333vw;
}
}
.honormagicos .section-ainote1 .video-wrapper .replayBtn.is-active,
.honormagicos .section-ainote1 .video-wrapper .selfPlayBtn.is-active,
.honormagicos .section-ainote2 .video-wrapper .replayBtn.is-active,
.honormagicos .section-ainote2 .video-wrapper .selfPlayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-ainote1 .video-wrapper .icon-replay,
.honormagicos .section-ainote1 .video-wrapper .icon-play,
.honormagicos .section-ainote2 .video-wrapper .icon-replay,
.honormagicos .section-ainote2 .video-wrapper .icon-play {
width: 0.8854166667vw;
height: 0.8854166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper .icon-replay,
.honormagicos .section-ainote1 .video-wrapper .icon-play,
.honormagicos .section-ainote2 .video-wrapper .icon-replay,
.honormagicos .section-ainote2 .video-wrapper .icon-play {
width: 3.7333333333vw;
height: 3.7333333333vw;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper .swiper-slide .replayBtn,
.honormagicos .section-ainote2 .video-wrapper .swiper-slide .replayBtn {
visibility: hidden !important;
left: 50%;
transform: translateX(-50%);
right: auto;
bottom: -6vw;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper .swiper-slide-active .replayBtn.is-active,
.honormagicos .section-ainote2 .video-wrapper .swiper-slide-active .replayBtn.is-active {
visibility: visible !important;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .video-wrapper .selfPlayBtn,
.honormagicos .section-ainote2 .video-wrapper .selfPlayBtn {
display: none !important;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .navBtn-wrapper,
.honormagicos .section-ainote2 .navBtn-wrapper {
display: flex !important;
justify-content: center;
margin: 7vw auto 0;
}
.honormagicos .section-ainote1 .navBtn-wrapper .navBtn,
.honormagicos .section-ainote2 .navBtn-wrapper .navBtn {
position: relative;
width: 4.8vw;
height: 4.8vw;
}
.honormagicos .section-ainote1 .navBtn-wrapper .navBtn:not(:first-of-type),
.honormagicos .section-ainote2 .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 3.7333333333vw;
}
.honormagicos .section-ainote1 .navBtn-wrapper .navBtn-active .icon-star2,
.honormagicos .section-ainote2 .navBtn-wrapper .navBtn-active .icon-star2 {
opacity: 1;
}
.honormagicos .section-ainote1 .navBtn-wrapper .icon-star2,
.honormagicos .section-ainote2 .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-ainote1 .swiperBtn,
.honormagicos .section-ainote2 .swiperBtn {
position: absolute;
bottom: 18.6666666667vw;
left: 50%;
width: 10.1333333333vw;
height: 10.1333333333vw;
z-index: 2;
}
.honormagicos .section-ainote1 .swiperBtn.swiper-button-disabled,
.honormagicos .section-ainote2 .swiperBtn.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}
}
.honormagicos .section-ainote1 .prevBtn,
.honormagicos .section-ainote2 .prevBtn {
transform: translateX(-26.6666666667vw);
}

.honormagicos .section-ainote1 .nextBtn,
.honormagicos .section-ainote2 .nextBtn {
transform: translateX(15.7333333333vw);
}

.honormagicos .section-translate {
margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-translate {
margin-top: 21.3333333333vw;
}
}
.honormagicos .section-translate .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-translate .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-translate .translate-wrapper {
position: relative;
width: 75vw;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-translate .translate-wrapper {
width: 100%;
flex-direction: column;
}
}
.honormagicos .section-translate .copy-wrapper {
width: 16.1458333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-translate .copy-wrapper {
width: 82.6666666667vw;
text-align: center;
}
}
.honormagicos .section-translate .video-wrapper {
position: relative;
width: 54.375vw;
height: 31.0416666667vw;
padding: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-translate .video-wrapper {
padding: 0;
margin-top: 8vw;
width: 100%;
height: auto;
}
}
.honormagicos .section-translate .video-wrapper .border {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.honormagicos .section-translate .video-wrapper .video-translate {
border-radius: 0.4947916667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-translate .video-wrapper .video-translate {
border-radius: 2.1333333333vw;
width: 91.4666666667vw;
height: 51.4826666667vw;
margin: 0 auto;
}
}
.honormagicos .section-translate .video-wrapper .replayBtn {
position: absolute;
top: calc(100% + 1.0416666667vw);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-translate .video-wrapper .replayBtn {
position: static;
transform: none;
margin: 5.3333333333vw auto 0;
font-size: 3.7333333333vw;
}
}
.honormagicos .section-translate .video-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-translate .video-wrapper .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-translate .video-wrapper .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-fix {
margin-top: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix {
margin-top: 21.3333333333vw;
}
}
.honormagicos .section-fix.is-active-2 .video-copy-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-fix.is-active-2 .video-copy-wrapper .detail:nth-of-type(2) {
opacity: 1;
}

.honormagicos .section-fix.is-active-2 .swiper-container-fix2 .swiper-slide:nth-of-type(1) {
transform: translateX(-100%);
opacity: 0;
}

.honormagicos .section-fix.is-active-2 .swiper-container-fix2 .swiper-slide:nth-of-type(2) {
transform: scale(0.899);
}

.honormagicos .section-fix.is-active-2 .swiper-container-fix2 .swiper-slide:nth-of-type(3) {
transform: translateX(calc(100% + 1.0416666667vw)) scale(0.812);
}

.honormagicos .section-fix.is-active-2 .prevBtn {
opacity: 1;
pointer-events: visible;
}

.honormagicos .section-fix.is-active-3 .video-copy-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-fix.is-active-3 .video-copy-wrapper .detail:nth-of-type(3) {
opacity: 1;
}

.honormagicos .section-fix.is-active-3 .swiper-container-fix2 .swiper-slide:nth-of-type(1) {
transform: translateX(-100%);
opacity: 0;
}

.honormagicos .section-fix.is-active-3 .swiper-container-fix2 .swiper-slide:nth-of-type(2) {
transform: translateX(-100%);
opacity: 0;
}

.honormagicos .section-fix.is-active-3 .swiper-container-fix2 .swiper-slide:nth-of-type(3) {
transform: scale(0.899);
}

.honormagicos .section-fix.is-active-3 .prevBtn {
opacity: 1;
pointer-events: visible;
}

.honormagicos .section-fix.is-active-4 .video-copy-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-fix.is-active-4 .video-copy-wrapper .detail:nth-of-type(4) {
opacity: 1;
}

.honormagicos .section-fix.is-active-4 .swiper-container-fix2 .swiper-slide:nth-of-type(1) {
transform: translateX(-100%);
opacity: 0;
}

.honormagicos .section-fix.is-active-4 .swiper-container-fix2 .swiper-slide:nth-of-type(2) {
transform: translateX(-100%);
opacity: 0;
}

.honormagicos .section-fix.is-active-4 .swiper-container-fix2 .swiper-slide:nth-of-type(3) {
transform: translateX(-100%);
opacity: 0;
}

.honormagicos .section-fix.is-active-4 .prevBtn {
opacity: 1;
pointer-events: visible;
}

.honormagicos .section-fix.is-active-4 .nextBtn {
opacity: 0.3;
pointer-events: none;
}

.honormagicos .section-fix .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-fix .fix-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.honormagicos .section-fix .fix-wrapper {
position: relative;
display: flex;
align-items: center;
padding-bottom: 10.4166666667vw;
overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .fix-wrapper {
flex-direction: column;
padding-bottom: 8vw;
}
}
.honormagicos .section-fix .copy-wrapper {
width: 23.4375vw;
margin-left: 12.5vw;
margin-right: 8.8541666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .copy-wrapper {
width: 82.6666666667vw;
margin: 0;
text-align: center;
}
}
.honormagicos .section-fix .video-wrapper {
position: relative;
width: 55.9895833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .video-wrapper {
width: 74.4vw;
margin-top: 8vw;
margin-left: 25.6vw;
}
}
.honormagicos .section-fix .videopart {
position: relative;
z-index: 2;
padding-top: 0.5208333333vw;
padding-left: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .videopart {
padding-top: 1.6vw;
padding-left: 0.5333333333vw;
}
}
.honormagicos .section-fix .phoneborder {
position: absolute;
top: 0;
left: 0;
width: 18.8020833333vw;
height: 37.2299958541vw;
z-index: 3;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .phoneborder {
width: 56.8vw;
height: 112.4696517413vw;
}
}
.honormagicos .section-fix .swiper-container-fix1 {
position: relative;
width: 16.1979166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .swiper-container-fix1 {
width: 50.6666666667vw;
padding-bottom: 0;
}
}
.honormagicos .section-fix .swiper-container-fix1 .video-fix {
height: 34.1145833333vw;
border-radius: 2.0833333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .swiper-container-fix1 .video-fix {
height: 102.9333333333vw;
border-radius: 8vw;
}
}
.honormagicos .section-fix .swiper-container-fix1 .swiper-slide .replayBtn {
visibility: hidden !important;
}

.honormagicos .section-fix .swiper-container-fix1 .swiper-slide-active .replayBtn.is-active {
visibility: visible !important;
transition: visibility 0s ease 0.5s;
}

.honormagicos .section-fix .swiper-container-fix1 .replayBtn {
margin-top: 1.0416666667vw;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .swiper-container-fix1 .replayBtn {
margin-top: 5.3333333333vw;
font-size: 3.7333333333vw;
}
}
.honormagicos .section-fix .swiper-container-fix1 .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-fix .swiper-container-fix1 .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .swiper-container-fix1 .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-fix .swiper-container-fix2 {
position: absolute;
top: 50%;
left: 19.5833333333vw;
transform: translateY(-53%);
width: 15.9375vw;
height: 34.8958333333vw;
overflow: visible;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .swiper-container-fix2 {
left: 58.6666666667vw;
width: 50.6666666667vw;
height: 102.9333333333vw;
transform: translateY(-59%);
}
}
.honormagicos .section-fix .swiper-container-fix2 .swiper-slide {
opacity: 0.4;
transform-origin: 0 50%;
transition: all 0.5s ease;
will-change: opacity, transform;
}

.honormagicos .section-fix .swiper-container-fix2 .swiper-slide:not(:first-of-type) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.honormagicos .section-fix .swiper-container-fix2 .swiper-slide:nth-of-type(1) {
transform: scale(0.899);
}

.honormagicos .section-fix .swiper-container-fix2 .swiper-slide:nth-of-type(2) {
transform: translateX(calc(100% + 1.0416666667vw)) scale(0.812);
}

.honormagicos .section-fix .swiper-container-fix2 .swiper-slide:nth-of-type(3) {
transform: translateX(calc(200% + 1.0416666667vw)) scale(0.725);
}

.honormagicos .section-fix .video-copy-wrapper {
position: relative;
width: 16.71875vw;
margin-bottom: 1.0416666667vw;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .video-copy-wrapper {
width: 50.6666666667vw;
margin-bottom: 2.6666666667vw;
}
}
.honormagicos .section-fix .video-copy-wrapper .detail {
font-size: 1.25vw;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .video-copy-wrapper .detail {
font-size: 3.7333333333vw;
}
}
.honormagicos .section-fix .video-copy-wrapper .detail:not(:first-of-type) {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
}

.honormagicos .section-fix .navBtn-wrapper {
position: relative;
width: 16.71875vw;
margin-top: 1.0416666667vw;
display: flex;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .navBtn-wrapper {
margin-top: 5.3333333333vw;
width: 50.6666666667vw;
}
}
.honormagicos .section-fix .navBtn-wrapper .navBtn {
position: relative;
width: 0.9375vw;
height: 0.9375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .navBtn-wrapper .navBtn {
width: 4.8vw;
height: 4.8vw;
}
}
.honormagicos .section-fix .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 0.7291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 3.7333333333vw;
}
}
.honormagicos .section-fix .navBtn-wrapper .navBtn-active .icon-star2 {
opacity: 1;
}

.honormagicos .section-fix .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}

.honormagicos .section-fix .swiperBtn {
width: 1.9791666667vw;
height: 1.9791666667vw;
z-index: 2;
cursor: pointer;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .swiperBtn {
width: 10.1333333333vw;
height: 10.1333333333vw;
}
.honormagicos .section-fix .swiperBtn.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}
}
.honormagicos .section-fix .prevBtn {
transform: translateX(1.875vw) translateY(-1.40625vw);
opacity: 0.3;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .prevBtn {
transform: translateX(-5.3333333333vw) translateY(-7.2vw);
}
}
.honormagicos .section-fix .nextBtn {
margin-top: -1.9791666667vw;
transform: translateX(12.7604166667vw) translateY(-1.40625vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-fix .nextBtn {
transform: translateX(46.6666666667vw) translateY(-7.2vw);
margin-top: -10.1333333333vw;
}
}
.honormagicos .section-wifi {
margin-top: -100vh;
}

.honormagicos .section-wifi .copy-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-36.4583333333vw) translateY(calc(-100% - 5.2083333333vw));
width: 23.6979166667vw;
}

.honormagicos .section-wifi .video-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 13.4375vw;
height: 27.96875vw;
transform: translateX(4.6875vw) translateY(-50%);
}

.honormagicos .section-wifi .video-wrapper .ring {
position: absolute;
left: 50%;
bottom: 2.1875vw;
transform: translateX(-50%);
width: 49.3229166667vw;
height: 6.9270833333vw;
}

.honormagicos .section-wifi .video-wrapper .logo {
position: absolute;
left: 50%;
bottom: 25%;
transform: translateX(-50%);
width: 43.90625vw;
height: 27.5520833333vw;
}

.honormagicos .section-wifi .video-wrapper .pad {
position: absolute;
left: 50%;
bottom: 4.53125vw;
transform: translateX(-26.7708333333vw);
width: 16.9270833333vw;
height: 10.4166666667vw;
}

.honormagicos .section-wifi .video-wrapper .laptop {
position: absolute;
left: 50%;
bottom: 2.5vw;
transform: translateX(5.4166666667vw);
width: 24.3229166667vw;
height: 16.40625vw;
}

.honormagicos .section-wifi .video-wrapper .video-wifi {
position: relative;
}

.honormagicos .section-search .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-search .search-container {
overflow: hidden;
padding: 10.4166666667vw 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .search-container {
padding: 21.3333333333vw 0 34.6666666667vw;
}
}
.honormagicos .section-search .search-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .search-wrapper {
flex-direction: column;
}
}
.honormagicos .section-search .copy-wrapper {
position: relative;
width: 13.0208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .copy-wrapper {
width: 82.6666666667vw;
text-align: center;
}
}
.honormagicos .section-search .copy-wrapper .common-copy {
position: absolute;
top: 50%;
left: 51.5625vw;
width: 13.5416666667vw;
transform: translateY(-50%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .copy-wrapper .common-copy {
position: static;
transform: none;
width: 100%;
}
}
.honormagicos .section-search .video-wrapper {
position: relative;
width: 16.40625vw;
height: 33.59375vw;
margin-left: 10.4166666667vw;
margin-right: 20.8333333333vw;
padding: 0.5208333333vw 0.0520833333vw 0.6770833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .video-wrapper {
width: 44.5333333333vw;
height: 85.3333333333vw;
margin: 8vw auto 0;
padding: 0;
}
}
.honormagicos .section-search .video-wrapper .replayBtn {
position: absolute;
top: calc(100% + 1.0416666667vw);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .video-wrapper .replayBtn {
position: static;
transform: none;
margin: 5.3333333333vw auto 0;
font-size: 3.7333333333vw;
}
}
.honormagicos .section-search .video-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-search .video-wrapper .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .video-wrapper .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-search .video-wrapper .video-search {
border-radius: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .video-wrapper .video-search {
border-radius: 8vw;
}
}
.honormagicos .section-search .video-wrapper .phoneborder {
position: absolute;
top: -0.2083333333vw;
left: -0.15625vw;
width: 18.125vw;
height: 35.8893034826vw;
z-index: 2;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-search .video-wrapper .phoneborder {
left: 0.5333333333vw;
top: -1.6vw;
width: 47.3333333333vw;
height: 93.7247097844vw;
}
}
.honormagicos .section-intelligent.is-active-1 .detail-wrapper .detail1 .intelligent-copy {
transition: -webkit-clip-path 0.5s ease;
transition: clip-path 0.5s ease;
transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease;
}

.honormagicos .section-intelligent.is-active-2 .video-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-intelligent.is-active-2 .video-wrapper .detail:nth-of-type(2) {
opacity: 1;
}

.honormagicos .section-intelligent.is-active-2 .detail-wrapper .detail1 {
opacity: 0.2;
}

.honormagicos .section-intelligent.is-active-2 .detail-wrapper .detail1 .intelligent-title {
font-size: 1.6666666667vw;
}

.honormagicos .section-intelligent.is-active-2 .detail-wrapper .detail1 .intelligent-copy {
margin-top: 0;
height: 0;
-webkit-clip-path: inset(0 0 100%);
clip-path: inset(0 0 100%);
}

.honormagicos .section-intelligent.is-active-2 .detail-wrapper .detail1 .icon-arrow {
transform: rotate(180deg);
}

.honormagicos .section-intelligent.is-active-2 .detail-wrapper .detail:nth-of-type(2) {
opacity: 1;
border-color: rgba(0, 0, 0, 0.2);
}

.honormagicos .section-intelligent.is-active-2 .detail-wrapper .detail:nth-of-type(2) .intelligent-title {
font-size: 2.5vw;
}

.honormagicos .section-intelligent.is-active-2 .detail-wrapper .detail:nth-of-type(2) .intelligent-copy {
margin-top: 1.0416666667vw;
height: auto;
-webkit-clip-path: inset(0);
clip-path: inset(0);
transition: -webkit-clip-path 0.5s ease;
transition: clip-path 0.5s ease;
transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease;
}

.honormagicos .section-intelligent.is-active-2 .detail-wrapper .detail:nth-of-type(2) .icon-arrow {
transform: rotate(0);
}

.honormagicos .section-intelligent.is-active-3 .video-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-intelligent.is-active-3 .video-wrapper .detail:nth-of-type(3) {
opacity: 1;
}

.honormagicos .section-intelligent.is-active-3 .detail-wrapper .detail1 {
opacity: 0.2;
}

.honormagicos .section-intelligent.is-active-3 .detail-wrapper .detail1 .intelligent-title {
font-size: 1.6666666667vw;
}

.honormagicos .section-intelligent.is-active-3 .detail-wrapper .detail1 .intelligent-copy {
margin-top: 0;
height: 0;
-webkit-clip-path: inset(0 0 100%);
clip-path: inset(0 0 100%);
}

.honormagicos .section-intelligent.is-active-3 .detail-wrapper .detail1 .icon-arrow {
transform: rotate(180deg);
}

.honormagicos .section-intelligent.is-active-3 .detail-wrapper .detail:nth-of-type(3) {
opacity: 1;
border-color: rgba(0, 0, 0, 0.2);
}

.honormagicos .section-intelligent.is-active-3 .detail-wrapper .detail:nth-of-type(3) .intelligent-title {
font-size: 2.5vw;
}

.honormagicos .section-intelligent.is-active-3 .detail-wrapper .detail:nth-of-type(3) .intelligent-copy {
margin-top: 1.0416666667vw;
height: auto;
-webkit-clip-path: inset(0);
clip-path: inset(0);
transition: -webkit-clip-path 0.5s ease;
transition: clip-path 0.5s ease;
transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease;
}

.honormagicos .section-intelligent.is-active-3 .detail-wrapper .detail:nth-of-type(3) .icon-arrow {
transform: rotate(0);
}

.honormagicos .section-intelligent.is-active-4 .video-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-intelligent.is-active-4 .video-wrapper .detail:nth-of-type(4) {
opacity: 1;
}

.honormagicos .section-intelligent.is-active-4 .detail-wrapper .detail1 {
opacity: 0.2;
}

.honormagicos .section-intelligent.is-active-4 .detail-wrapper .detail1 .intelligent-title {
font-size: 1.6666666667vw;
}

.honormagicos .section-intelligent.is-active-4 .detail-wrapper .detail1 .intelligent-copy {
margin-top: 0;
height: 0;
-webkit-clip-path: inset(0 0 100%);
clip-path: inset(0 0 100%);
}

.honormagicos .section-intelligent.is-active-4 .detail-wrapper .detail1 .icon-arrow {
transform: rotate(180deg);
}

.honormagicos .section-intelligent.is-active-4 .detail-wrapper .detail:nth-of-type(4) {
opacity: 1;
border-color: rgba(0, 0, 0, 0.2);
}

.honormagicos .section-intelligent.is-active-4 .detail-wrapper .detail:nth-of-type(4) .intelligent-title {
font-size: 2.5vw;
}

.honormagicos .section-intelligent.is-active-4 .detail-wrapper .detail:nth-of-type(4) .intelligent-copy {
margin-top: 1.0416666667vw;
height: auto;
-webkit-clip-path: inset(0);
clip-path: inset(0);
transition: -webkit-clip-path 0.5s ease;
transition: clip-path 0.5s ease;
transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease;
}

.honormagicos .section-intelligent.is-active-4 .detail-wrapper .detail:nth-of-type(4) .icon-arrow {
transform: rotate(0);
}

.honormagicos .section-intelligent.is-active-5 .detail-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-intelligent.is-active-5 .detail-wrapper .detail:nth-of-type(1) {
opacity: 1;
}

.honormagicos .section-intelligent.is-active-6 .detail-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-intelligent.is-active-6 .detail-wrapper .detail:nth-of-type(2) {
opacity: 1;
}

.honormagicos .section-intelligent.is-active-7 .detail-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-intelligent.is-active-7 .detail-wrapper .detail:nth-of-type(3) {
opacity: 1;
}

.honormagicos .section-intelligent.is-active-8 .detail-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-intelligent.is-active-8 .detail-wrapper .detail:nth-of-type(4) {
opacity: 1;
}

.honormagicos .section-intelligent .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-intelligent .intelligent-container {
position: relative;
overflow: hidden;
padding-bottom: 10.4166666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .intelligent-container {
padding-bottom: 8vw;
}
}
.honormagicos .section-intelligent .intelligent-wrapper {
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .intelligent-wrapper {
flex-direction: column;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .copy-wrapper {
width: 82.6666666667vw;
text-align: center;
}
}
.honormagicos .section-intelligent .detail-wrapper {
position: relative;
margin-top: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .detail-wrapper {
margin-top: 0;
}
}
.honormagicos .section-intelligent .detail-wrapper .detail {
position: relative;
display: flex;
align-items: center;
padding: 1.0416666667vw 0;
}

@media (min-aspect-ratio: 12/10) and (min-width: 1366px) {
.honormagicos .section-intelligent .detail-wrapper .detail:hover {
cursor: pointer;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .detail-wrapper .detail {
display: block;
padding: 0;
transition: opacity 0.5s ease;
will-change: opacity;
}
}
.honormagicos .section-intelligent .detail-wrapper .detail > div {
width: 22.65625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .detail-wrapper .detail > div {
width: 100%;
}
}
.honormagicos .section-intelligent .detail-wrapper .detail:not(:first-of-type) {
border-top: 1px solid black;
opacity: 0.2;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .detail-wrapper .detail:not(:first-of-type) {
opacity: 0;
border: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
.honormagicos .section-intelligent .detail-wrapper .detail:not(:first-of-type) .intelligent-title {
font-size: 1.6666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .detail-wrapper .detail:not(:first-of-type) .intelligent-title {
font-size: 8.5333333333vw;
}
}
.honormagicos .section-intelligent .detail-wrapper .detail:not(:first-of-type) .intelligent-copy {
margin-top: 0;
height: 0;
-webkit-clip-path: inset(0 0 100%);
clip-path: inset(0 0 100%);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .detail-wrapper .detail:not(:first-of-type) .intelligent-copy {
margin-top: 2.6666666667vw;
height: auto;
-webkit-clip-path: none;
clip-path: none;
}
}
.honormagicos .section-intelligent .detail-wrapper .detail:not(:first-of-type) .icon-arrow {
transform: rotate(180deg);
}

.honormagicos .section-intelligent .detail-wrapper .intelligent-title {
will-change: font-size;
}

.honormagicos .section-intelligent .detail-wrapper .intelligent-copy {
margin-top: 1.0416666667vw;
height: auto;
-webkit-clip-path: inset(0 0);
clip-path: inset(0 0);
will-change: height, clip-path, margin-top;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .detail-wrapper .intelligent-copy {
margin-top: 2.6666666667vw;
-webkit-clip-path: none;
clip-path: none;
}
}
.honormagicos .section-intelligent .detail-wrapper .icon-arrow {
width: 3.125vw;
height: 3.125vw;
margin-left: 2.0833333333vw;
transition: transform 0.3s ease;
will-change: transform;
}

.honormagicos .section-intelligent .swiper-container-intelligent {
position: relative;
width: 18.125vw;
margin-left: 11.4583333333vw;
margin-right: 4.84375vw;
overflow: visible;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .swiper-container-intelligent {
width: 47.2vw;
margin: 8vw auto 0;
overflow: hidden;
}
}
.honormagicos .section-intelligent .swiper-container-intelligent .detail {
transition: opacity 0.5s ease;
will-change: opacity;
padding-top: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .swiper-container-intelligent .detail {
padding-top: 1.6vw;
}
}
.honormagicos .section-intelligent .swiper-container-intelligent .detail:not(:first-of-type) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .swiper-container-intelligent .detail:not(:first-of-type) {
position: static;
opacity: 1;
}
}
.honormagicos .section-intelligent .swiper-container-intelligent .video-intelligent {
height: 36.1979166667vw;
border-radius: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .swiper-container-intelligent .video-intelligent {
border-radius: 9.3333333333vw;
height: 85.0666666667vw;
}
}
.honormagicos .section-intelligent .swiper-container-intelligent .replayBtn {
position: absolute;
top: calc(100% + 1.5625vw);
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .swiper-container-intelligent .replayBtn {
position: static;
transform: none;
margin-top: 5.3333333333vw;
width: 100%;
justify-content: center;
font-size: 3.7333333333vw;
}
}
.honormagicos .section-intelligent .swiper-container-intelligent .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-intelligent .swiper-container-intelligent .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .swiper-container-intelligent .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .navBtn-wrapper {
display: flex !important;
justify-content: center;
margin: 5.3333333333vw auto 0;
}
}
.honormagicos .section-intelligent .navBtn-wrapper .navBtn {
position: relative;
width: 4.8vw;
height: 4.8vw;
}

.honormagicos .section-intelligent .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 3.7333333333vw;
}

.honormagicos .section-intelligent .navBtn-wrapper .navBtn-active .icon-star2 {
opacity: 1;
}

.honormagicos .section-intelligent .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .swiperBtn {
position: absolute;
bottom: 4.8vw;
left: 50%;
width: 10.1333333333vw;
height: 10.1333333333vw;
z-index: 2;
}
.honormagicos .section-intelligent .swiperBtn.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}
}
.honormagicos .section-intelligent .prevBtn {
transform: translateX(-32vw);
}

.honormagicos .section-intelligent .nextBtn {
transform: translateX(21.0666666667vw);
}

.honormagicos .section-intelligent .phoneborder {
position: absolute;
top: -0.2604166667vw;
left: -0.2083333333vw;
z-index: 2;
width: 20.2083333333vw;
height: 40.0145107794vw;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-intelligent .phoneborder {
left: 1.8666666667vw;
width: 47.3333333333vw;
height: 93.7247097844vw;
}
}
.honormagicos .section-qube {
height: 160vh;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube {
height: auto;
padding-bottom: 13.3333333333vw;
}
}
.honormagicos .section-qube #trigger-qube-2 {
position: absolute;
top: 40vh;
}

.honormagicos .section-qube.is-active-1 .qube-wrapper .wrapper1 {
opacity: 0;
pointer-events: none;
}

.honormagicos .section-qube.is-active-1 .qube-wrapper .wrapper2 {
opacity: 1;
pointer-events: visible;
}

.honormagicos .section-qube.is-active-1 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2 {
opacity: 0;
}

.honormagicos .section-qube.is-active-1 .navBtn-wrapper .navBtn:nth-of-type(2) .icon-star2 {
opacity: 1;
}

.honormagicos .section-qube.is-active-1 .prevBtn {
opacity: 1;
pointer-events: visible;
}

.honormagicos .section-qube.is-active-1 .nextBtn {
opacity: 0.3;
pointer-events: none;
}

.honormagicos .section-qube .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .sticky-container {
position: static;
height: auto;
}
}
.honormagicos .section-qube .qube-wrapper {
position: relative;
width: 100%;
height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .qube-wrapper {
height: auto;
}
}
.honormagicos .section-qube .qube-wrapper .wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .qube-wrapper .wrapper {
height: auto;
flex-direction: column;
}
}
.honormagicos .section-qube .qube-wrapper .wrapper2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .qube-wrapper .wrapper2 {
position: static;
margin-top: 21.3333333333vw;
opacity: 1;
pointer-events: visible;
}
}
.honormagicos .section-qube .copy-wrapper {
position: relative;
width: 20.0520833333vw;
margin-right: 3.125vw;
transform: translateY(-2.0833333333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .copy-wrapper {
width: 82.6666666667vw;
margin: 0 auto;
transform: none;
text-align: center;
}
}
.honormagicos .section-qube .video-wrapper {
position: relative;
width: 54.375vw;
padding: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .video-wrapper {
width: 100%;
padding: 0;
margin-top: 8vw;
}
}
.honormagicos .section-qube .video-wrapper .border {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.honormagicos .section-qube .video-wrapper .video-qube {
border-radius: 0.4947916667vw;
height: 30vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .video-wrapper .video-qube {
border-radius: 2.1333333333vw;
width: 91.4666666667vw;
height: 51.4826666667vw;
margin: 0 auto;
}
}
.honormagicos .section-qube .video-wrapper .replayBtn {
position: absolute;
top: calc(100% + 1.0416666667vw);
right: 0.5208333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .video-wrapper .replayBtn {
position: static;
justify-content: center;
margin-top: 5.3333333333vw;
font-size: 3.7333333333vw;
width: 100%;
}
}
.honormagicos .section-qube .video-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-qube .video-wrapper .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .video-wrapper .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-qube .video-wrapper .copy {
font-size: 1.25vw;
position: absolute;
top: calc(100% + 1.0416666667vw);
left: 0.5208333333vw;
width: 20.8333333333vw;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-qube .navBtn-wrapper {
position: absolute;
top: calc(50% + 16.5625vw);
left: calc(50% + 11.3020833333vw);
transform: translateX(-50%);
display: flex;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-qube .navBtn-wrapper {
display: none;
}
}
.honormagicos .section-qube .navBtn-wrapper .navBtn {
position: relative;
width: 0.9375vw;
height: 0.9375vw;
}

.honormagicos .section-qube .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 0.7291666667vw;
}

.honormagicos .section-qube .navBtn-wrapper .navBtn:not(:first-of-type) .icon-star2 {
opacity: 0;
}

.honormagicos .section-qube .navBtn-wrapper .navBtn-active .icon-star2 {
opacity: 1;
}

.honormagicos .section-qube .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease;
}

.honormagicos .section-qube .swiperBtn {
position: absolute;
top: calc(50% + 17.5vw);
left: 50%;
width: 1.9791666667vw;
height: 1.9791666667vw;
z-index: 2;
cursor: pointer;
}

.honormagicos .section-qube .prevBtn {
transform: translateX(calc(-50% + 7.3958333333vw)) translateY(-1.3541666667vw);
opacity: 0.3;
pointer-events: none;
}

.honormagicos .section-qube .nextBtn {
transform: translateX(calc(-50% + 15.2083333333vw)) translateY(-1.3541666667vw);
}

.honormagicos .section-twophone {
padding: 6.25vw 0;
}

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

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-twophone .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-twophone .twophone-container {
overflow: hidden;
padding-bottom: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-twophone .twophone-container {
padding-bottom: 0;
}
}
.honormagicos .section-twophone .twophone-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-twophone .twophone-wrapper {
flex-direction: column;
}
}
.honormagicos .section-twophone .copy-wrapper {
position: relative;
width: 21.75vw;
margin-left: 2.75111vw;
transform: translateY(-2.0833333333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-twophone .copy-wrapper {
width: 82.6666666667vw;
margin-left: 0;
transform: none;
text-align: center;
}
}
.honormagicos .section-twophone .video-wrapper {
position: relative;
width: 54.375vw;
padding: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-twophone .video-wrapper {
width: 100%;
margin-top: 8vw;
padding: 0;
}
}
.honormagicos .section-twophone .video-wrapper .border {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.honormagicos .section-twophone .video-wrapper video {
border-radius: 0.4947916667vw;
height: 30vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-twophone .video-wrapper .video-favourite {
border-radius: 2.1333333333vw;
width: 91.4666666667vw;
height: 51.4826666667vw;
margin: 0 auto;
}
}
.honormagicos .section-twophone .video-wrapper .replayBtn {
position: absolute;
top: calc(100% + 1.0416666667vw);
right: 0.5208333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-twophone .video-wrapper .replayBtn {
position: static;
font-size: 3.7333333333vw;
margin: 5.3333333333vw auto 0;
transform: none;
}
}
.honormagicos .section-twophone .video-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-twophone .video-wrapper .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
margin-right: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-twophone .video-wrapper .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
margin-right: 1.3333333333vw;
}
}
.honormagicos .section-twophone .video-wrapper .copy {
font-size: 1.25vw;
position: absolute;
top: calc(100% + 1.0416666667vw);
left: 0.5208333333vw;
width: 20.8333333333vw;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-watchphone {
padding: 6.25vw 0;
}

.honormagicos .section-watchphone .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-watchphone {
padding: 0 0 21.3333333333vw;
}
.honormagicos .section-watchphone .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-watchphone .watchphone-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-watchphone .watchphone-wrapper {
flex-direction: column;
}
}
.honormagicos .section-watchphone .copy-wrapper {
position: relative;
width: 21.09375vw;
margin-left: 2.75111vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-watchphone .copy-wrapper {
transform: none;
width: 82.6666666667vw;
margin-right: 0;
text-align: center;
}
}
.honormagicos .section-watchphone .video-wrapper {
position: relative;
width: 54.375vw;
padding: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-watchphone .video-wrapper {
width: 100%;
margin-top: 8vw;
padding: 0;
}
}
.honormagicos .section-watchphone .video-wrapper .border {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.honormagicos .section-watchphone .video-wrapper .video-watchphone {
border-radius: 0.4947916667vw;
height: 30vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-watchphone .video-wrapper .video-watchphone {
border-radius: 2.1333333333vw;
width: 91.4666666667vw;
height: 51.4826666667vw;
margin: 0 auto;
}
}
.honormagicos .section-watchphone .video-wrapper .replayBtn {
position: absolute;
top: calc(100% + 1.0416666667vw);
right: 0.5208333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-watchphone .video-wrapper .replayBtn {
position: static;
font-size: 3.7333333333vw;
margin: 5.3333333333vw auto 0;
transform: none;
}
}
.honormagicos .section-watchphone .video-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-watchphone .video-wrapper .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-watchphone .video-wrapper .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
}
}
.honormagicos .section-watchphone .video-wrapper .copy {
font-size: 1.25vw;
position: absolute;
top: calc(100% + 1.0416666667vw);
left: 0.5208333333vw;
width: 20.8333333333vw;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-magicimage {
margin-top: -100vh;
}

.honormagicos .section-magicimage.is-active-2 .video-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-magicimage.is-active-2 .video-wrapper .detail:nth-of-type(2) {
opacity: 1;
}

.honormagicos .section-magicimage.is-active-2 .button-wrapper .light {
transform: translateX(6.40625vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage.is-active-2 .button-wrapper .light {
transform: translateY(30.1333333333vw);
}
}
.honormagicos .section-magicimage.is-active-3 .video-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-magicimage.is-active-3 .video-wrapper .detail:nth-of-type(3) {
opacity: 1;
}

.honormagicos .section-magicimage.is-active-3 .button-wrapper .light {
transform: translateX(12.8125vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage.is-active-3 .button-wrapper .light {
transform: translateY(60.2666666667vw);
}
}
.honormagicos .section-magicimage.is-active-4 .video-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-magicimage.is-active-4 .video-wrapper .detail:nth-of-type(4) {
opacity: 1;
}

.honormagicos .section-magicimage.is-active-4 .button-wrapper .light {
transform: translateX(19.21875vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage.is-active-4 .button-wrapper .light {
transform: translateY(90.4vw);
}
}
.honormagicos .section-magicimage .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-magicimage .magicimage-container {
position: relative;
overflow: hidden;
padding: 5.2083333333vw 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .magicimage-container {
padding: 21.3333333333vw 0;
}
}
.honormagicos .section-magicimage .magicimage-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .magicimage-wrapper {
flex-wrap: wrap;
align-items: flex-end;
}
}
.honormagicos .section-magicimage .video-wrapper {
position: relative;
width: 24.3055555556vw;
height: 40.0694444444vw;
-webkit-clip-path: inset(1px);
clip-path: inset(1px);
}

.honormagicos .section-magicimage .video-wrapper::after {
content: "";
position: absolute;
top: -0.15625vw;
left: -0.15625vw;
width: calc(100% + 0.3125vw);
height: calc(100% + 0.3125vw);
border: 0.3125vw solid #fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .video-wrapper {
margin-left: -18.6666666667vw;
width: 72vw;
height: 120vw;
order: 2;
margin-top: 8vw;
}
}
.honormagicos .section-magicimage .video-wrapper .detail {
width: 100%;
height: 100%;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-magicimage .video-wrapper .detail:not(:first-of-type) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.honormagicos .section-magicimage .copy-wrapper {
width: 25.5208333333vw;
margin-left: 7.8125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .copy-wrapper {
width: 82.6666666667vw;
order: 1;
margin-left: 0;
}
}
.honormagicos .section-magicimage .button-wrapper {
position: relative;
display: flex;
margin-top: 2.2916666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .button-wrapper {
order: 3;
margin-top: 0;
}
}
.honormagicos .section-magicimage .button-wrapper .magicimageBtn {
width: 5.3645833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .button-wrapper .magicimageBtn {
display: block;
width: 18.6666666667vw;
}
}
.honormagicos .section-magicimage .button-wrapper .magicimageBtn:not(:first-of-type) {
margin-left: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .button-wrapper .magicimageBtn:not(:first-of-type) {
margin-left: 0;
margin-top: 6.9333333333vw;
}
}
.honormagicos .section-magicimage .button-wrapper .magicimageBtn:not(:first-of-type) .light {
opacity: 0;
}

.honormagicos .section-magicimage .button-wrapper .icon {
width: 5.3645833333vw;
height: 5.3645833333vw;
margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .button-wrapper .icon {
width: 16vw;
height: 16vw;
}
}
.honormagicos .section-magicimage .button-wrapper .light {
position: absolute;
top: 5.6770833333vw;
left: 0.3645833333vw;
width: 4.6354166667vw;
height: 0.3645833333vw;
transition: transform 0.5s ease;
will-change: transform;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .button-wrapper .light {
top: 16.5333333333vw;
left: 1.0666666667vw;
width: 16vw;
height: 1.6vw;
transition: none;
}
}
.honormagicos .section-magicimage .button-wrapper .copy {
font-size: 0.9375vw;
margin-top: 0.6770833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magicimage .button-wrapper .copy {
font-size: 3.2vw;
margin-top: 2.6666666667vw;
}
}
.honormagicos .section-magiclock {
height: 160vh;
}

.honormagicos .section-magiclock #trigger-magiclock-1 {
position: absolute;
top: 40vh;
}

.honormagicos .section-magiclock.is-forward-0 .bg2 {
opacity: 0 !important;
}

.honormagicos .section-magiclock.is-mask-active .bg2 {
opacity: 0.8;
transform: translateX(-50%) translateY(-101%);
transition: transform 1s ease 0.5s, opacity 0.8s ease 0.6s;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock.is-mask-active .bg2 {
opacity: 0;
transform: translateY(0);
}
}
.honormagicos .section-magiclock.is-forward-1 .copy-wrapper .detail1 {
opacity: 0;
}

.honormagicos .section-magiclock.is-forward-1 .copy-wrapper .detail2 {
opacity: 1;
}

.honormagicos .section-magiclock.is-forward-1 .video-wrapper .wrapper1 {
opacity: 0;
}

.honormagicos .section-magiclock.is-forward-1 .video-wrapper .wrapper2 {
opacity: 1;
}

.honormagicos .section-magiclock.is-forward-1 .button-wrapper .wrapper1 {
pointer-events: none;
opacity: 0;
transform: translateY(calc(-100% - 1.5625vw));
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock.is-forward-1 .button-wrapper .wrapper1 {
transform: none;
}
}
.honormagicos .section-magiclock.is-forward-1 .button-wrapper .wrapper2 {
pointer-events: visible;
opacity: 1;
transform: translateY(0);
}

.honormagicos .section-magiclock.is-active-top-2 .video-wrapper .wrapper1 .detail1 {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-top-2 .video-wrapper .wrapper1 .detail:nth-of-type(2) {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-top-2 .button-wrapper .magiclockBtn:first-of-type .light {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-top-2 .button-wrapper .magiclockBtn:nth-of-type(2) .light {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-top-2 .button-wrapper .wrapper1 .light {
transform: translateX(8.0729166667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock.is-active-top-2 .button-wrapper .wrapper1 .light {
transform: translateY(29.8666666667vw);
}
}
.honormagicos .section-magiclock.is-active-top-3 .video-wrapper .wrapper1 .detail1 {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-top-3 .video-wrapper .wrapper1 .detail:nth-of-type(3) {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-top-3 .button-wrapper .magiclockBtn:first-of-type .light {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-top-3 .button-wrapper .magiclockBtn:nth-of-type(3) .light {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-top-3 .button-wrapper .wrapper1 .light {
transform: translateX(16.1458333333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock.is-active-top-3 .button-wrapper .wrapper1 .light {
transform: translateY(60vw);
}
}
.honormagicos .section-magiclock.is-active-bot-4 .video-wrapper .wrapper2 .detail1 {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-bot-4 .video-wrapper .wrapper2 .detail:nth-of-type(1) {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-bot-4 .video-wrapper .wrapper2 .detail:nth-of-type(1) .pic2 {
-webkit-clip-path: inset(0 0);
clip-path: inset(0 0);
transition: -webkit-clip-path 1s ease 0.7s;
transition: clip-path 1s ease 0.7s;
transition: clip-path 1s ease 0.7s, -webkit-clip-path 1s ease 0.7s;
}

.honormagicos .section-magiclock.is-active-bot-4 .button-wrapper .magiclockBtn:first-of-type .light {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-bot-4 .button-wrapper .magiclockBtn:nth-of-type(4) .light {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-bot-5 .video-wrapper .wrapper2 .detail1 {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-bot-5 .video-wrapper .wrapper2 .detail:nth-of-type(2) {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-bot-5 .video-wrapper .wrapper2 .detail:nth-of-type(2) .pic2 {
-webkit-clip-path: inset(0 0);
clip-path: inset(0 0);
transition: -webkit-clip-path 1s ease 0.7s;
transition: clip-path 1s ease 0.7s;
transition: clip-path 1s ease 0.7s, -webkit-clip-path 1s ease 0.7s;
}

.honormagicos .section-magiclock.is-active-bot-5 .button-wrapper .magiclockBtn:first-of-type .light {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-bot-5 .button-wrapper .magiclockBtn:nth-of-type(5) .light {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-bot-5 .button-wrapper .wrapper2 .light {
transform: translateX(8.0729166667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock.is-active-bot-5 .button-wrapper .wrapper2 .light {
transform: translateY(22.9333333333vw);
}
}
.honormagicos .section-magiclock.is-active-bot-6 .video-wrapper .wrapper2 .detail1 {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-bot-6 .video-wrapper .wrapper2 .detail:nth-of-type(3) {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-bot-6 .video-wrapper .wrapper2 .detail:nth-of-type(3) .pic2 {
-webkit-clip-path: inset(0 0);
clip-path: inset(0 0);
transition: -webkit-clip-path 1s ease 0.7s;
transition: clip-path 1s ease 0.7s;
transition: clip-path 1s ease 0.7s, -webkit-clip-path 1s ease 0.7s;
}

.honormagicos .section-magiclock.is-active-bot-6 .button-wrapper .magiclockBtn:first-of-type .light {
opacity: 0;
}

.honormagicos .section-magiclock.is-active-bot-6 .button-wrapper .magiclockBtn:nth-of-type(6) .light {
opacity: 1;
}

.honormagicos .section-magiclock.is-active-bot-6 .button-wrapper .wrapper2 .light {
transform: translateX(16.1458333333vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock.is-active-bot-6 .button-wrapper .wrapper2 .light {
transform: translateY(45.8666666667vw);
}
}
.honormagicos .section-magiclock .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-magiclock .bg2 {
position: absolute;
top: 0;
left: 50%;
will-change: transform;
width: 55.4166666667vw;
height: 33.3333333333vw;
transform: translateX(-50%) translateY(101vh);
opacity: 0;
z-index: 3;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .bg2 {
width: 76.5333333333vw;
height: 45.8666666667vw;
left: 0;
transform: translateY(101vh);
opacity: 1;
}
}
.honormagicos .section-magiclock .magiclock-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .magiclock-wrapper {
flex-wrap: wrap;
}
}
.honormagicos .section-magiclock .copy-wrapper {
width: 22.65625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .copy-wrapper {
width: 82.6666666667vw;
margin-bottom: -26.6666666667vw;
}
}
@media (min-aspect-ratio: 360/682) and (max-width: 500px) {
.honormagicos .section-magiclock .copy-wrapper {
margin-bottom: 0;
}
}
.honormagicos .section-magiclock .copy-wrapper .detail-wrapper {
position: relative;
}

.honormagicos .section-magiclock .copy-wrapper .detail {
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-magiclock .copy-wrapper .detail2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-top: 0;
opacity: 0;
}

.honormagicos .section-magiclock .video-wrapper {
position: relative;
width: 20.7291666667vw;
height: 41.9791666667vw;
overflow: hidden;
margin-left: 3.6458333333vw;
margin-right: 3.6458333333vw;
transform: translateY(-0.2604166667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .video-wrapper {
width: 31.6444444444vw;
height: 65.6vw;
margin-top: 29.3333333333vw;
margin-left: 0;
margin-right: 13.3333333333vw;
transform: none;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honormagicos .section-magiclock .video-wrapper {
width: 47.4666666667vw;
height: 98.4vw;
margin-top: 0;
margin-left: 0;
margin-right: 13.3333333333vw;
transform: none;
}
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honormagicos .section-magiclock .video-wrapper {
width: 18.9866666667vw;
height: 39.36vw;
margin-top: 8vw;
}
}
.honormagicos .section-magiclock .video-wrapper .wrapper {
width: 100%;
height: 100%;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-magiclock .video-wrapper .wrapper2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.honormagicos .section-magiclock .video-wrapper .detail {
width: 100%;
height: 100%;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-magiclock .video-wrapper .detail:not(:first-of-type) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.honormagicos .section-magiclock .video-wrapper .pic2 {
position: absolute;
top: 0;
left: 0;
-webkit-clip-path: inset(30% 0 0);
clip-path: inset(30% 0 0);
will-change: clip-path;
}

.honormagicos .section-magiclock .button-wrapper {
position: relative;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper {
transform: scale(0.7);
transform-origin: 50% 100%;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 500px) {
.honormagicos .section-magiclock .button-wrapper {
transform: none;
}
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honormagicos .section-magiclock .button-wrapper {
transform: translateY(-26.6666666667vw) scale(0.4);
}
}
.honormagicos .section-magiclock .button-wrapper .wrapper {
position: relative;
display: flex;
justify-content: space-between;
width: 21.3541666667vw;
transition: all 0.5s ease;
will-change: opacity, transform;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper .wrapper {
flex-direction: column;
justify-content: flex-end;
width: auto;
height: 98.4vw;
padding-bottom: 2.6666666667vw;
}
}
.honormagicos .section-magiclock .button-wrapper .wrapper2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translateY(calc(100% + 1.5625vw));
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper .wrapper2 {
transform: none;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper .wrapper2 .light {
top: 50.1333333333vw;
}
}
.honormagicos .section-magiclock .button-wrapper .magiclockBtn {
width: 5.3125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper .magiclockBtn {
width: 16vw;
}
}
.honormagicos .section-magiclock .button-wrapper .magiclockBtn:not(:first-of-type) {
margin-left: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper .magiclockBtn:not(:first-of-type) {
margin-left: 0;
margin-top: 6.9333333333vw;
}
}
.honormagicos .section-magiclock .button-wrapper .icon {
width: 5.3125vw;
height: 5.2083333333vw;
margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper .icon {
width: 16vw;
height: 16vw;
}
}
.honormagicos .section-magiclock .button-wrapper .light {
position: absolute;
top: 5.5208333333vw;
left: 0.3385416667vw;
width: 4.6354166667vw;
height: 0.3645833333vw;
transition: transform 0.5s ease;
will-change: transform;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper .light {
top: 28.8vw;
left: 0;
width: 16vw;
height: 1.6vw;
transition: none;
}
}
.honormagicos .section-magiclock .button-wrapper .copy {
font-size: 0.9375vw;
margin-top: 0.6770833333vw;
white-space: nowrap;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-magiclock .button-wrapper .copy {
font-size: 3.2vw;
margin-top: 2.6666666667vw;
}
}
.honormagicos .section-desktop.is-active-2 .detail-wrapper .detail:nth-of-type(1) {
opacity: 0;
}

.honormagicos .section-desktop.is-active-2 .detail-wrapper .detail:nth-of-type(2) {
opacity: 1;
}

.honormagicos .section-desktop.is-active-2 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2 {
opacity: 0;
}

.honormagicos .section-desktop.is-active-2 .navBtn-wrapper .navBtn:nth-of-type(2) .icon-star2 {
opacity: 1;
}

.honormagicos .section-desktop.is-active-3 .detail-wrapper .detail:nth-of-type(1) {
opacity: 0;
}

.honormagicos .section-desktop.is-active-3 .detail-wrapper .detail:nth-of-type(3) {
opacity: 1;
}

.honormagicos .section-desktop.is-active-3 .navBtn-wrapper .navBtn:nth-of-type(1) .icon-star2 {
opacity: 0;
}

.honormagicos .section-desktop.is-active-3 .navBtn-wrapper .navBtn:nth-of-type(3) .icon-star2 {
opacity: 1;
}

.honormagicos .section-desktop .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-desktop .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-desktop .desktop-container {
position: relative;
overflow: hidden;
height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-desktop .desktop-container {
padding: 13.3333333333vw 0 21.3333333333vw;
}
}
.honormagicos .section-desktop .desktop-wrapper {
display: flex;
align-items: center;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-desktop .desktop-wrapper {
flex-direction: column;
}
}
.honormagicos .section-desktop .copy-wrapper {
width: 22.65625vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 28.6458333333vw), calc(-50% + 0vw));
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-desktop .copy-wrapper {
width: 82.6666666667vw;
text-align: center;
position: static;
transform: translate(0);
margin: 0 auto;
}
}
.honormagicos .sec11-desktop .swiper-container-desktop {
width: 48.9583333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .swiper-container-desktop {
width: 100%;
margin-left: 0;
margin-top: 8vw;
}
}
.honormagicos .sec11-desktop .swiper-container-desktop .swiper-slide {
height: 38.59375vw;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding-top: 2.34375vw;
overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .swiper-container-desktop .swiper-slide {
height: 99.4vw;
box-sizing: content-box;
}
}
.honormagicos .sec11-desktop .navBtn-wrapper {
display: flex;
justify-content: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .navBtn-wrapper {
margin-top: 4.6666666667vw;
transform: none;
}
}
.honormagicos .sec11-desktop .navBtn-wrapper .navBtn {
position: relative;
width: 0.9375vw;
height: 0.9375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .navBtn-wrapper .navBtn {
width: 4.8vw;
height: 4.8vw;
}
}
.honormagicos .sec11-desktop .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 0.7291666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .navBtn-wrapper .navBtn:not(:first-of-type) {
margin-left: 3.7333333333vw;
}
}
.honormagicos .sec11-desktop .navBtn-wrapper .navBtn-active .icon-star2 {
opacity: 1;
}

.honormagicos .sec11-desktop .navBtn-wrapper .icon-star2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}

.honormagicos .section-desktop .swiperBtn {
position: absolute;
top: calc(50% + 15.78125vw);
left: 50%;
width: 1.9791666667vw;
height: 1.9791666667vw;
z-index: 2;
cursor: pointer;
}

.honormagicos .section-desktop .swiperBtn.swiper-button-disabled {
opacity: 0.3;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-desktop .swiperBtn {
top: auto;
bottom: 17.8666666667vw;
width: 10.1333333333vw;
height: 10.1333333333vw;
z-index: 10;
}
}
.honormagicos .section-desktop .prevBtn {
transform: translateX(7.5vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-desktop .prevBtn {
transform: translateX(-26.6666666667vw);
}
}
.honormagicos .section-desktop .nextBtn {
transform: translateX(16.6666666667vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-desktop .nextBtn {
transform: translateX(15.7333333333vw);
}
}
.honormagicos .section-plan {
padding-bottom: 7.8125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan {
padding-bottom: 0;
}
}
.honormagicos .section-plan .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-plan .plan-container {
position: relative;
overflow: hidden;
}

.honormagicos .section-plan .plan-title {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-title {
font-size: 6.4vw;
}
}
.honormagicos .section-plan .plan-title .logo {
width: 17.1875vw;
height: 3.28125vw;
margin-right: 1.3020833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-title .logo {
width: 43.4666666667vw;
height: 8.2666666667vw;
margin-right: 3.4666666667vw;
}
}
.honormagicos .section-plan .plan-title sup {
top: -0.2604166667vw !important;
}

.honormagicos .section-plan .plan-copy {
font-size: 1.6666666667vw;
text-align: center;
margin-top: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-copy {
font-size: 4.8vw;
margin-top: 0.8vw;
}
}
.honormagicos .section-plan .plan-wrapper {
position: relative;
display: flex;
justify-content: center;
margin-top: 4.1666666667vw;
padding-left: 4.6875vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-wrapper {
display: block;
width: 73.3333333333vw;
margin: 16vw auto 0;
transform: none;
padding-left: 0;
}
}
.honormagicos .section-plan .plan-wrapper .detail {
width: 13.3854166667vw;
font-size: 1.6666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-wrapper .detail {
font-size: 6.4vw;
width: 100%;
}
}
.honormagicos .section-plan .plan-wrapper .detail:not(:first-of-type) {
margin-left: 1.71875vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-wrapper .detail:not(:first-of-type) {
margin-left: 0;
margin-top: 13.3333333333vw;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-wrapper .title {
position: relative;
display: inline-block;
}
}
.honormagicos .section-plan .plan-wrapper .title .icon-star {
position: absolute;
top: -2.6666666667vw;
left: 100%;
width: 5.3333333333vw;
height: 5.3333333333vw;
}

.honormagicos .section-plan .plan-wrapper .copy {
margin-top: 3.6458333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-wrapper .copy {
margin: 0;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-plan .plan-wrapper .line {
width: 56vw;
height: 0.2666666667vw;
margin: 2.6666666667vw 0;
}
}
.honormagicos .section-plan .stars {
position: absolute;
top: 3.125vw;
left: 50%;
transform: translateX(-50%);
width: 61.9791666667vw;
height: 1.9791666667vw;
}

.honormagicos .honormagicos-mobShow {
display: none !important;
}

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

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

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .popup.is-spec {
background: #fff;
}
.honormagicos .popup.is-spec .popup-container {
width: 75%;
}
.honormagicos .popup.is-spec .popupcloseBtn {
right: -8vw;
}
}
.honormagicos .popup .popupcloseBtn {
position: absolute;
top: 0.2604166667vw;
right: -4.5833333333vw;
width: 2.2916666667vw;
height: 2.2916666667vw;
display: block;
cursor: pointer;
mix-blend-mode: difference;
overflow: hidden;
-webkit-clip-path: inset(1px);
clip-path: inset(1px);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .popup .popupcloseBtn {
right: 8vw;
width: 5.3333333333vw;
height: 5.3333333333vw;
}
}
.honormagicos .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) {
.honormagicos .popup .popupcloseBtn::before {
width: 8.5333333333vw;
}
}
.honormagicos .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) {
.honormagicos .popup .popupcloseBtn::after {
width: 8.5333333333vw;
}
}
.honormagicos .popup .popup-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}

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

.honormagicos .popup .videoWrapper {
position: relative;
display: none;
height: 70%;
}

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

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note {
padding: 26.6666666667vw 0;
}
}
.section-note.ff-regular {
font-family: " HONOR Sans World Regular", "HONOR Sans World 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(0, 0, 0, 0.6);
}

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

.section-note .bz {
margin-top: 3.125vw;
padding-left: 1.5625vw;
}
.section-note .bz li {
list-style-type: none;
position: relative;
}
.section-note .bz li::after {
content: "* ";
display: inline;
position: absolute;
left: -0.625vw;
top: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note .decimal {
padding-left: 4vw;
}
.section-note .bz {
padding-left: 4vw;
margin-top: 4vw;
}
.section-note .bz li::after {
left: -0.5333333333vw;
transform: translateX(-100%);
}
}
.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 .star {
list-style: none;
padding-left: 1.5625vw;
margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note .star {
padding-left: 4vw;
}
}
.section-note .star li::after {
content: "*";
position: absolute;
top: 0;
left: 0;
transform: translateX(calc(-100% - 0.1041666667vw));
}

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

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.section-note p {
padding-left: 4vw;
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;
}

.section-note .ga-title {
opacity: 0;
visibility: hidden;
}

.honormagicos.is-uc .replayBtn,
.honormagicos.is-wechat .replayBtn,
.honormagicos.is-honor .replayBtn,
.honormagicos.is-baidu .replayBtn {
display: none !important;
}

.honormagicos.is-uc .section-yoyo .playBtn,
.honormagicos.is-wechat .section-yoyo .playBtn,
.honormagicos.is-honor .section-yoyo .playBtn,
.honormagicos.is-baidu .section-yoyo .playBtn {
position: absolute;
bottom: 2.6666666667vw;
left: 50%;
transform: translateX(-50%);
font-size: 3.7333333333vw;
display: flex;
align-items: center;
justify-content: center;
color: #256fff;
flex-wrap: nowrap;
white-space: nowrap;
}

.honormagicos.is-uc .section-yoyo .swiper-container-yoyo .detail,
.honormagicos.is-wechat .section-yoyo .swiper-container-yoyo .detail,
.honormagicos.is-honor .section-yoyo .swiper-container-yoyo .detail,
.honormagicos.is-baidu .section-yoyo .swiper-container-yoyo .detail {
padding-bottom: 9.5vw;
}

.honormagicos.is-uc .section-yoyo .icon-play,
.honormagicos.is-wechat .section-yoyo .icon-play,
.honormagicos.is-honor .section-yoyo .icon-play,
.honormagicos.is-baidu .section-yoyo .icon-play {
width: 4.2666666667vw;
height: 4.2666666667vw;
margin-right: 1.8666666667vw;
}

.honormagicos.is-uc .section-ainote1 .video-wrapper,
.honormagicos.is-uc .section-ainote2 .video-wrapper,
.honormagicos.is-wechat .section-ainote1 .video-wrapper,
.honormagicos.is-wechat .section-ainote2 .video-wrapper,
.honormagicos.is-honor .section-ainote1 .video-wrapper,
.honormagicos.is-honor .section-ainote2 .video-wrapper,
.honormagicos.is-baidu .section-ainote1 .video-wrapper,
.honormagicos.is-baidu .section-ainote2 .video-wrapper {
position: relative;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos.is-uc .section-ainote1 .video-wrapper .video-ainote,
.honormagicos.is-uc .section-ainote2 .video-wrapper .video-ainote,
.honormagicos.is-wechat .section-ainote1 .video-wrapper .video-ainote,
.honormagicos.is-wechat .section-ainote2 .video-wrapper .video-ainote,
.honormagicos.is-honor .section-ainote1 .video-wrapper .video-ainote,
.honormagicos.is-honor .section-ainote2 .video-wrapper .video-ainote,
.honormagicos.is-baidu .section-ainote1 .video-wrapper .video-ainote,
.honormagicos.is-baidu .section-ainote2 .video-wrapper .video-ainote {
transform: scale(1.25);
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos.is-uc .section-fix .swiper-container-fix1,
.honormagicos.is-wechat .section-fix .swiper-container-fix1,
.honormagicos.is-honor .section-fix .swiper-container-fix1,
.honormagicos.is-baidu .section-fix .swiper-container-fix1 {
padding-bottom: 8vw;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos.is-uc .section-intelligent .swiper-container-intelligent,
.honormagicos.is-wechat .section-intelligent .swiper-container-intelligent,
.honormagicos.is-honor .section-intelligent .swiper-container-intelligent,
.honormagicos.is-baidu .section-intelligent .swiper-container-intelligent {
padding-bottom: 8vw;
}
}
.honormagicos .section-freestyle {
text-align: center;
}

.honormagicos .section-freestyle .freestyle-container {
position: relative;
width: 75vw;
margin: 0 auto;
padding: 5.2083333333vw 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .freestyle-container {
width: 91.7333333333vw;
padding: 21.3333333333vw 0;
}
.honormagicos .section-freestyle #trigger-freestyle-1 {
position: absolute;
top: 22vw;
}
}
.honormagicos .section-freestyle .top-wrapper {
position: relative;
margin-top: 3.6458333333vw;
height: 43.2291666667vw;
border-radius: 0.8333333333vw;
transform: rotate(0);
overflow: hidden;
text-align: left;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper {
margin-top: 5.3333333333vw;
height: auto;
border-radius: 4.2666666667vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #d2ecff;
padding: 5.3333333333vw 0 8vw;
background: #fff;
}
}
.honormagicos .section-freestyle .top-wrapper.is-active-2 .button-wrapper .light {
transform: translateX(7.9vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper.is-active-2 .button-wrapper .light {
transform: translateX(24vw);
}
}
.honormagicos .section-freestyle .top-wrapper.is-active-2 .detail1 {
opacity: 0;
}

.honormagicos .section-freestyle .top-wrapper.is-active-2 .detail2 {
opacity: 1;
}

.honormagicos .section-freestyle .top-wrapper.is-active-3 .button-wrapper .light {
transform: translateX(15.8vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper.is-active-3 .button-wrapper .light {
transform: translateX(48vw);
}
}
.honormagicos .section-freestyle .top-wrapper.is-active-3 .detail1 {
opacity: 0;
}

.honormagicos .section-freestyle .top-wrapper.is-active-3 .detail3 {
opacity: 1;
}

.honormagicos .section-freestyle .top-wrapper .detail-wrapper {
position: relative;
width: 100%;
height: 100%;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .detail-wrapper {
width: 41.8666666667vw;
height: 92vw;
order: 2;
}
}
.honormagicos .section-freestyle .top-wrapper .detail {
width: 100%;
height: 100%;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .detail .video-freestyle {
border-radius: 4vw;
}
}
.honormagicos .section-freestyle .top-wrapper .detail2,
.honormagicos .section-freestyle .top-wrapper .detail3 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

.honormagicos .section-freestyle .top-wrapper .mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1.01);
opacity: 0.8;
z-index: 2;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .mask {
display: none;
}
}
.honormagicos .section-freestyle .top-wrapper .border {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 18.3854166667vw;
height: 38.4895833333vw;
z-index: 3;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .border {
width: 44.8vw;
height: 94.1333333333vw;
}
}
.honormagicos .section-freestyle .top-wrapper .copy {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(calc(-50% - 23.4375vw)) translateY(-50%);
width: 17.4479166667vw;
font-size: 1.6666666667vw;
z-index: 4;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .copy {
position: static;
transform: none;
order: 1;
width: 90%;
font-size: 3.7333333333vw;
margin-bottom: 5.3333333333vw;
text-align: center;
}
}
.honormagicos .section-freestyle .top-wrapper .button-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(calc(-50% + 23.4375vw)) translateY(-50%);
display: flex;
z-index: 4;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .button-wrapper {
position: relative;
top: auto;
left: auto;
transform: none;
order: 3;
margin-top: 10.1333333333vw;
}
}
.honormagicos .section-freestyle .top-wrapper .button-wrapper .freestyleBtn .icon {
width: 5.3125vw;
height: 5.2083333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .button-wrapper .freestyleBtn .icon {
width: 16vw;
height: 16vw;
}
}
.honormagicos .section-freestyle .top-wrapper .button-wrapper .freestyleBtn:not(:first-of-type) {
margin-left: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .button-wrapper .freestyleBtn:not(:first-of-type) {
margin-left: 8vw;
}
}
.honormagicos .section-freestyle .top-wrapper .button-wrapper .freestyleBtn .button-copy {
font-size: 0.9375vw;
margin-top: 0.6770833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .button-wrapper .freestyleBtn .button-copy {
font-size: 3.2vw;
margin-top: 2.6666666667vw;
}
}
.honormagicos .section-freestyle .top-wrapper .button-wrapper .light {
position: absolute;
top: 5.5208333333vw;
left: 0.3385416667vw;
width: 4.6354166667vw;
height: 0.3645833333vw;
transition: transform 0.5s ease;
will-change: transform;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .top-wrapper .button-wrapper .light {
top: 16.2vw;
width: 16vw;
height: 1.6vw;
left: -0.2vw;
}
}
.honormagicos .section-freestyle .bot-wrapper {
display: flex;
justify-content: space-between;
margin-top: 0.5208333333vw;
}

.honormagicos .section-freestyle .bot-wrapper .replayBtn {
position: absolute;
right: 0.5208333333vw;
bottom: 0.5208333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-freestyle .bot-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .bot-wrapper {
flex-direction: column;
margin-top: 5.3333333333vw;
}
.honormagicos .section-freestyle .bot-wrapper .replayBtn {
position: static;
font-size: 3.7333333333vw;
margin: 5.3333333333vw auto 0;
transform: none;
}
}
.honormagicos .section-freestyle .bot-wrapper .detail {
width: 37.2395833333vw;
height: 36.4583333333vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 0.8333333333vw;
border: 1px solid #d2ecff;
background: linear-gradient(155deg, #e3f2ff 0.4%, #fff 84.2%);
position: relative;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .bot-wrapper .detail {
width: 100%;
height: 120vw;
border-radius: 4.2666666667vw;
background: #fff;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .bot-wrapper .detail2 {
margin-top: 5.3333333333vw;
}
}
.honormagicos .section-freestyle .bot-wrapper .copy {
font-size: 1.6666666667vw;
margin-bottom: 3.4375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .bot-wrapper .copy {
font-size: 3.7333333333vw;
margin-bottom: 5.3333333333vw;
}
}
.honormagicos .section-freestyle .bot-wrapper .video-wrapper {
position: relative;
width: 11.7145833333vw;
height: 24.5149492446vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .bot-wrapper .video-wrapper {
width: 41.8666666667vw;
height: 92vw;
}
}
.honormagicos .section-freestyle .bot-wrapper .video-wrapper .video-freestyle {
border-radius: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .bot-wrapper .video-wrapper .video-freestyle {
border-radius: 4vw;
}
}
.honormagicos .section-freestyle .bot-wrapper .video-wrapper .border {
position: absolute;
top: -0.9895833333vw;
left: -0.4166666667vw;
width: 13.6979166667vw;
height: 27.8645833333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .bot-wrapper .video-wrapper .border {
top: -4vw;
left: -2.6666666667vw;
width: 51vw;
height: 106.5vw;
}
}
.honormagicos .section-freestyle .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-freestyle .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .sec4 {
width: 100%;
height: 200vh;
position: relative;
}

.honormagicos .sec4 .sec4-content {
width: 100%;
height: calc(100vh - 52px);
position: sticky;
top: 52px;
overflow: hidden;
}

.honormagicos .sec4 .sec4-content .sec4-bg {
width: 100%;
height: calc(100vh - 52px);
}

.honormagicos .sec4 .sec4-content .sec4-warper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 19.7916666667vw));
width: -moz-max-content;
width: max-content;
height: -moz-max-content;
height: max-content;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 {
height: 280vw;
}
.honormagicos .sec4 .sec4-content .sec4-warper {
transform: translate(-50%, calc(-50% + 43.3333333333vw));
}
.honormagicos .sec4 .sec4-content {
height: 170vw;
}
.honormagicos .sec4 .sec4-content .sec4-bg {
height: 100%;
}
}
@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
.honormagicos .sec4 .sec4-content .sec4-warper {
transform: translate(-50%, calc(-50% + 47.3333333333vw));
}
.honormagicos .sec4 {
height: 170vw;
}
.honormagicos .sec4 .sec4-content {
height: 140vw;
}
.honormagicos .sec4 .sec4-content .gifs-warper {
transform: translateY(-50%);
}
}
@media (max-aspect-ratio: 12/10) and (width: 768px) {
.honormagicos .sec4 .sec4-content .sec4-warper {
transform: translate(-50%, calc(-50% + 53.3333333333vw));
}
}
@media (max-aspect-ratio: 12/10) and (width: 1024px) {
.honormagicos .sec4 .sec4-content .sec4-warper {
transform: translate(-50%, calc(-50% + 53.3333333333vw));
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt {
width: 50.8333333333vw;
text-align: center;
display: flex;
height: -moz-max-content;
height: max-content;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: 0 auto;
opacity: 1;
transition: all 0.7s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt {
width: 88vw;
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt.active {
opacity: 0;
transition: all 0.7s ease;
}

.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .icon-warper {
width: 9.375vw;
position: relative;
margin-bottom: 0.5208333333vw;
transition: all 0.3s ease;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .icon-warper {
width: 34.6666666667vw;
margin-bottom: 2.6666666667vw;
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .icon-warper.active {
transition: all 0.3s ease;
-webkit-clip-path: inset(0 0 0 0%);
clip-path: inset(0 0 0 0%);
}

.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .icon-warper .dots-txt {
position: absolute;
width: -moz-max-content;
width: max-content;
height: -moz-max-content;
height: max-content;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 0.15625vw));
color: #fff;
font-weight: 500;
font-size: 0.8333333333vw;
line-height: 1.2;
text-align: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .icon-warper .dots-txt {
font-size: 3.2vw;
transform: translate(-50%, calc(-50% + 0.5208333333vw));
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .sec-tit {
font-size: 2.5vw;
font-weight: 500;
line-height: 1.3;
color: rgb(0, 0, 0);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .sec-tit {
font-size: 6.9333333333vw;
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .sec-des {
font-size: 0.9375vw;
color: rgb(0, 0, 0);
margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .sec-txt .sec-des {
margin-top: 5.3333333333vw;
font-size: 3.7333333333vw;
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper {
width: 29.4791666667vw;
height: -moz-max-content;
height: max-content;
margin: 0 auto;
margin-top: 2.6041666667vw;
position: relative;
overflow: hidden;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper {
width: 81.6vw;
height: -moz-max-content;
height: max-content;
margin: 0 auto;
margin-top: 4vw;
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone {
width: 100%;
position: relative;
z-index: 5;
opacity: 1;
transition: all 0.7s ease;
}

.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone.active {
opacity: 0;
transition: all 0.7s ease;
}

.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone .out-k {
position: relative;
z-index: 10;
}

.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone .sec4-phone-inset {
width: 100%;
border-radius: 3.125vw;
overflow: hidden;
transform: translate(-0.1vw, -0.15vw) scale(0.97);
position: absolute;
top: 0;
left: 0;
z-index: 4;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone .sec4-phone-inset {
border-radius: 10.6666666667vw;
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone-pic {
width: 100%;
position: absolute;
top: 0.625vw;
left: 0vw;
transform: scale(0.98, 0.98);
transform-origin: 50% 2%;
transition: all 0.6s ease;
opacity: 0;
z-index: 7;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone-pic {
width: 77.3333333333vw;
left: 1.6vw;
top: 2.8vw;
}
}
.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone-pic.active {
transform: scale(0.1, 0);
opacity: 0;
transition: all 0.6s ease;
}

.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone-gif {
width: 16.0416666667vw;
position: absolute;
left: 50%;
top: 1.4583333333vw;
transform: translate(-50%, 0);
z-index: 10;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .sec4-warper .phone-warper .phone-gif {
width: 48vw;
top: 3.5vw;
}
}
.honormagicos .sec4 .sec4-content .gifs-warper {
width: 100%;
height: -moz-max-content;
height: max-content;
position: absolute;
top: 50%;
height: max-content;
transform: translateY(calc(-50% + 13.3854166667vw));
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transition: all 0.5s;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper {
transform: translateY(calc(-50% - 5vw));
}
}
@media (max-aspect-ratio: 12/10) and (width: 768px) {
.honormagicos .sec4 .sec4-content .gifs-warper {
transform: translateY(calc(-50% + 16vw));
}
}
@media (max-aspect-ratio: 12/10) and (width: 1024px) {
.honormagicos .sec4 .sec4-content .gifs-warper {
transform: translateY(calc(-50% + 16vw));
}
}
@media (width: 1024px) and (orientation: landscape),  (min-aspect-ratio: 2500/1670) and (max-aspect-ratio: 2530/1685) {
.honormagicos .sec4 .sec4-content .sec4-warper {
transform: translate(-50%, calc(-50% + 10.3333333333vw));
}
.honormagicos .sec4 .sec4-content .gifs-warper {
transform: translateY(calc(-50% + 4.385417vw));
}
}
.honormagicos .sec4 .sec4-content .gifs-warper.active {
opacity: 1;
transition: all 0.5s;
opacity: 1;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row {
margin-bottom: 6.25vw;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row {
margin-bottom: 10.6666666667vw;
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif-item {
height: 2.6041666667vw;
-webkit-clip-path: inset(0 100% 100% 100% round 40px);
clip-path: inset(0 100% 100% 100% round 40px);
transition: all 1.2s ease;
margin: 0 3.125vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif-item {
height: 6.9333333333vw;
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif-item img {
height: 2.6041666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif-item img {
height: 6.9333333333vw;
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif-item.active {
-webkit-clip-path: inset(0 0% 0% 0% round 20px);
clip-path: inset(0 0% 0% 0% round 20px);
transition: all 1.2s ease;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif1 {
height: 2.6041666667vw;
width: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif1 {
height: 6.9333333333vw;
transform: translateX(-21.3333333333vw);
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif1 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif2 {
height: 2.6041666667vw;
width: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif2 {
height: 6.9333333333vw;
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif2 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif3 {
height: 2.6041666667vw;
width: auto;
margin-right: 36.4583333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif3 {
height: 6.9333333333vw;
transform: translateX(53.3333333333vw);
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif3 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif4 {
height: 2.6041666667vw;
width: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif4 {
height: 6.9333333333vw;
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif4 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif5 {
height: 2.6041666667vw;
width: auto;
margin-right: 41.6666666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif5 {
height: 6.9333333333vw;
transform: translateX(-13.3333333333vw);
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif5 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif6 {
height: 2.6041666667vw;
width: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif6 {
height: 6.9333333333vw;
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif6 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif7 {
height: 2.6041666667vw;
width: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif7 {
height: 8.5333333333vw;
transform: translateX(0vw);
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif7 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif8 {
height: 2.6041666667vw;
width: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif8 {
height: 6.9333333333vw;
transform: translateX(26.6666666667vw);
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif8 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif9 {
height: 2.6041666667vw;
width: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif9 {
height: 6.9333333333vw;
transform: translateX(-24vw);
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif9 img {
height: 100%;
width: auto;
}

.honormagicos .sec4 .sec4-content .gifs-warper .row .gif10 {
height: 2.6041666667vw;
width: auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif10 {
height: 6.9333333333vw;
transform: translateX(16vw);
}
}
.honormagicos .sec4 .sec4-content .gifs-warper .row .gif10 img {
height: 100%;
width: auto;
}

.honormagicos .sec11 {
width: 100%;
height: calc(100vh - 52px);
background: #fff;
position: relative;
z-index: 11;
}

.honormagicos .sec11-desktop #trigger-sec11-2 {
transform: translateY(-10vh);
}

.honormagicos .sec11-desktop .sec11-content {
width: 100%;
height: calc(100vh - 52px);
position: sticky;
top: 52px;
overflow: hidden;
}

.honormagicos .sec11-desktop .sec11-content .sec11-bg {
width: 100%;
height: calc(100vh - 52px);
position: absolute;
top: 0;
left: 0;
}

.honormagicos .sec11-desktop .sec11-content .sec11-mb {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background: #fff;
opacity: 0;
z-index: 50;
}

.honormagicos .sec11-desktop .sec11-content .sec11-mb.active {
z-index: -99;
}

.honormagicos .sec11-desktop .sec11-content .sec-txt {
width: 100%;
text-align: left;
display: flex;
height: -moz-max-content;
height: max-content;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
opacity: 1;
transition: all 0.7s ease;
}

.honormagicos .sec11-desktop .sec11-content .sec-txt .icon-warper {
width: 9.375vw;
position: relative;
margin-bottom: 0.78125vw;
transition: all 0.3s ease;
}

.honormagicos .sec11-desktop .sec11-content .sec-txt .icon-warper.active {
transition: all 0.3s ease;
-webkit-clip-path: inset(0 0 0 0%);
clip-path: inset(0 0 0 0%);
}

.honormagicos .sec11-desktop .sec11-content .sec-txt .icon-warper .dots-txt {
position: absolute;
width: -moz-max-content;
width: max-content;
height: -moz-max-content;
height: max-content;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 0.15625vw));
color: #fff;
font-weight: 500;
font-size: 0.8333333333vw;
line-height: 1.2;
text-align: center;
}

.honormagicos .sec11-desktop .sec11-content .sec-txt .sec-tit {
font-size: 0.8333333333vw;
font-weight: 500;
color: rgb(0, 0, 0);
}

.honormagicos .sec11-desktop .sec11-content .sec-txt .sec11-last-right-txt {
font-size: 0.9375vw;
position: absolute;
left: 0;
bottom: -1.3020833333vw;
white-space: nowrap;
padding-left: 0.2vw;
}

.honormagicos .sec11-desktop .sec11-content .sec-txt .line {
height: 1px;
width: 100%;
background: rgba(0, 0, 0, 0.4);
margin-top: 1.0416666667vw;
}

.honormagicos .sec11-desktop .sec11-content .sec-txt .sec-des {
font-size: 0.9375vw;
color: rgb(0, 0, 0);
margin-top: 1.0416666667vw;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top {
width: 100%;
height: calc(100vh - 52px);
position: relative;
transform: translateY(0);
transition: all 0.7s ease;
z-index: 1;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top.active {
transform: translateY(calc(-100vh + 52px));
transition: all 0.7s ease;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper {
width: -moz-max-content;
width: max-content;
height: -moz-max-content;
height: max-content;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-47.5%, -60%);
-moz-column-gap: 19vw;
column-gap: 19vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper {
transform: translate(-50%, -50%);
}
.honormagicos .sec11 {
height: auto;
}
.honormagicos .sec11-desktop .sec11-content {
height: auto;
padding-bottom: 21.3333333333vw;
}
.honormagicos .sec11-desktop .sec11-content .sec11-top {
height: auto;
}
.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper {
position: static;
transform: translate(0);
margin: 0 auto;
}
.honormagicos .sec11-desktop .sec11-content .sec11-bg {
height: auto;
}
}
.honormagicos .sec11-desktop .mid-warper {
width: -moz-max-content;
width: max-content;
}

.honormagicos .sec11-desktop .phone-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 2.0833333333vw), calc(-50% - 1.3020833333vw));
z-index: 99;
}

.honormagicos .sec11-desktop .mid-warper .phone-k {
width: 16.9270833333vw;
height: 35.3645833333vw;
position: relative;
z-index: 5;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .video-replay {
width: -moz-max-content;
width: max-content;
height: -moz-max-content;
height: max-content;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 20;
bottom: -2.0833333333vw;
display: flex;
justify-content: center;
align-items: center;
display: none;
cursor: pointer;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .mid-warper .phone-k .video-replay {
bottom: -8vw;
}
}
.honormagicos .sec11-desktop .mid-warper .phone-k .video-replay span {
font-size: 0.8333333333vw;
color: #00B1FF;
position: relative;
top: -3px;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .mid-warper .phone-k .video-replay span {
font-size: 3.2vw;
top: 0px;
}
}
.honormagicos .sec11-desktop .mid-warper .phone-k .video-replay svg {
margin-left: 0.5208333333vw;
width: 1.0416666667vw;
height: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .mid-warper .phone-k .video-replay svg {
margin-left: 1.6vw;
width: 2.6666666667vw;
height: 2.6666666667vw;
}
}
.honormagicos .sec11-desktop .mid-warper .phone-k .phone-k-pic {
position: relative;
z-index: 9;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .phone-y {
width: 18.5416666667vw;
height: 36.98125vw;
position: absolute;
right: -1.3541666667vw;
bottom: -1.71875vw;
z-index: 2;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .inset-phone-warper {
width: 16.71875vw;
height: 36.0416666667vw;
position: absolute;
z-index: 3;
border-radius: 2.0833333333vw;
overflow: hidden;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.honormagicos .sec11-desktop .mid-warper .phone-k .inset-phone-pic {
width: 100%;
height: 100%;
position: absolute;
left: 0vw;
bottom: 0vw;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-phone1 {
z-index: 6;
opacity: 0;
transition: all 0.6s ease;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-phone1.active {
opacity: 1;
transition: all 0.6s ease;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-phone1 video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-phone2 {
z-index: 7;
transition: all 0.6s ease;
opacity: 0;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-phone2.active {
transition: all 0.6s ease;
opacity: 1;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-phone3 {
z-index: 8;
transition: all 0.6s ease;
opacity: 0;
position: relative;
display: none;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-phone3.active {
transition: all 0.6s ease;
opacity: 1;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec-11-3all-replay {
width: 10.4166666667vw;
height: 1.5625vw;
margin: 0 auto;
margin-top: 0.5208333333vw;
position: relative;
z-index: -200;
opacity: 0;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec-11-3all-replay.active {
z-index: 200;
opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .mid-warper .phone-k .sec-11-3all-replay {
width: 40vw;
height: 8vw;
margin-top: 2.6666666667vw;
}
}
.honormagicos .sec11-desktop .mid-warper .phone-k .sec-11-3all-replay .sec11-3all-swiper-replay {
width: 100%;
height: 100%;
overflow: hidden;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec-11-3all-replay .sec11-3all-swiper-replay .swiper-slide {
position: relative;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec-11-3all-replay .sec11-3all-swiper-replay .swiper-slide .video-replay {
text-align: center;
bottom: auto;
z-index: 200;
cursor: pointer;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-3all-swiper-pre {
width: 1.5625vw;
height: 1.5625vw;
position: absolute;
bottom: -2vw;
left: 50%;
transform: translateX(calc(-50% - 100vw));
cursor: pointer;
z-index: 100;
opacity: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-3all-swiper-pre {
width: 10.6666666667vw;
height: 10.6666666667vw;
bottom: -12vw;
transform: translateX(calc(-50% - 100vw));
}
}
.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-3all-swiper-pre.active {
transform: translateX(calc(-50% - 13vw));
opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-3all-swiper-pre.active {
transform: translateX(calc(-50% - 34vw));
}
}
.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-3all-swiper-nex {
width: 1.5625vw;
height: 1.5625vw;
position: absolute;
bottom: -2vw;
left: 50%;
transform: translateX(calc(-50% + 100vw));
cursor: pointer;
z-index: 100;
opacity: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-3all-swiper-nex {
width: 10.6666666667vw;
height: 10.6666666667vw;
transform: translateX(calc(-50% + 100vw));
bottom: -12vw;
}
}
.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-3all-swiper-nex.active {
transform: translateX(calc(-50% + 12vw));
opacity: 1;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .mid-warper .phone-k .sec11-3all-swiper-nex.active {
transform: translateX(calc(-50% + 33vw));
}
}
.honormagicos .sec11-desktop .mid-warper .phone-k .my-button-disabled3 {
opacity: 0.4 !important;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper {
width: 23.9583333333vw;
position: relative;
margin-right: 1.0416666667vw;
display: flex;
justify-content: end;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .left-txt1 {
width: 100%;
height: -moz-max-content;
height: max-content;
transform: translate(3.125vw, 0%);
opacity: 0;
transition: all 0.6s ease;
text-align: right;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .copy-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .left-txt1.active {
opacity: 1;
transition: all 0.6s ease;
transform: translate(0vw, 0%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .left-txt1.active2 {
opacity: 0;
transition: all 0.6s ease;
transform: translate(-100%, 0%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .left-txt2 {
position: absolute;
width: 24.7395833333vw;
height: -moz-max-content;
height: max-content;
left: 0;
top: 50%;
transform: translate(3.125vw, -50%);
opacity: 0;
transition: all 0.5s ease;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .left-txt2.active {
opacity: 1;
transition: all 0.6s ease;
transition-delay: 0.1s;
transform: translate(0vw, -50%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .left-txt2.active2 {
opacity: 0;
transition: all 0.6s ease;
transform: translate(-100%, -50%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .left-txt3 {
position: absolute;
width: 24.791667vw;
height: -moz-max-content;
height: max-content;
left: 0;
top: 50%;
transform: translate(3.125vw, -50%);
opacity: 0;
transition: all 0.6s ease;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .left-warper .left-txt3.active {
opacity: 1;
transition: all 0.6s ease;
transition-delay: 0.2s;
transform: translate(-3.516667vw, -50%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper {
width: 23.4375vw;
position: relative;
margin-left: 1.0416666667vw;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt1 {
width: 100%;
transform: translate(-3.125vw, 0%);
opacity: 0;
transition: all 0.6s ease;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt1 .icon-warper {
opacity: 0;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt1.active {
opacity: 1;
transition: all 0.6s ease;
transform: translate(0vw, 0%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt1.active2 {
opacity: 0;
transition: all 0.6s ease;
transform: translate(100%, 0%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt2 {
position: absolute;
width: 100%;
height: -moz-max-content;
height: max-content;
left: 0;
top: 50%;
transform: translate(-3.125vw, -50%);
opacity: 0;
transition: all 0.6s ease;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt2 .icon-warper {
opacity: 0;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt2.active {
opacity: 1;
transition: all 0.5s ease;
transition-delay: 0.2s;
transform: translate(0vw, -50%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt2.active2 {
opacity: 0;
transition: all 0.6s ease;
transform: translate(100%, -50%);
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt3 {
position: absolute;
width: 100%;
height: -moz-max-content;
height: max-content;
left: 0;
top: 50%;
transform: translate(-2.6041666667vw, -50%);
opacity: 0;
transition: all 0.6s ease;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt3 .icon-warper {
opacity: 0;
}

.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper .right-warper .right-txt3.active {
opacity: 1;
transition: all 0.6s ease;
transition-delay: 0.2s;
transform: translate(0vw, -50%);
}

.honormagicos .sec11-desktop .mid-warper .swiper-container-inside {
width: 16.6640625vw;
height: 34.2708333333vw;
position: absolute;
top: 50%;
left: calc(50% - 0.1041666667vw);
transform: translate(-50%, -50%);
z-index: 2;
overflow: hidden;
border-radius: 1.5625vw;
}

.honormagicos .sec11-desktop .mid-warper .swiper-container-outside {
width: 100vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
opacity: 0;
transition: all 0.6s;
}

.honormagicos .sec11-desktop .mid-warper .swiper-container-outside.active {
opacity: 1;
transition-delay: 0.3s;
}

.honormagicos .sec11-desktop .mid-warper .swiper-pre,
.honormagicos .sec11-desktop .mid-warper .swiper-nex {
position: absolute;
width: 1.6666666667vw;
cursor: pointer;
transition: all 0.6s;
}

.honormagicos .sec11-desktop .mid-warper .swiper-pre.active,
.honormagicos .sec11-desktop .mid-warper .swiper-nex.active {
opacity: 1;
}

.honormagicos .sec11-desktop .mid-warper .swiper-pre {
left: -3.28125vw;
bottom: -1.3020833333vw;
}

.honormagicos .sec11-desktop .mid-warper .swiper-nex {
right: -3.28125vw;
bottom: -1.3020833333vw;
}

.honormagicos .sec11-desktop .mid-warper .swiper-container-outside .swiper-slide:not(.swiper-slide-active) {
transform: translateX(-1.0416666667vw);
}

.honormagicos .sec11-desktop .mid-warper .swiper-container-outside .swiper-slide-active ~ .swiper-slide {
transform: translateX(1.0416666667vw);
}

.honormagicos .sec11-desktop .mid-warper .sec11-left-phone {
width: 18.6979166667vw;
position: absolute;
left: 54%;
transform: translateX(-50%);
top: 0;
opacity: 0;
transition: all 0.6s ease;
z-index: 10;
}

.honormagicos .sec11-desktop .mid-warper .sec11-left-phone.active {
transform: translateX(calc(-50% - 23.1770833333vw));
opacity: 1;
}

.honormagicos .sec11-desktop .mid-warper .sec11-left-phone.active2 {
transform: translateX(calc(-100% - 23.1770833333vw));
opacity: 0;
}

.honormagicos .sec11-desktop .mid-warper .sec11-right-phone {
width: 18.6979166667vw;
position: absolute;
left: 54%;
transform: translateX(-50%);
top: 0;
opacity: 0;
transition: all 0.6s ease;
z-index: 10;
}

.honormagicos .sec11-desktop .mid-warper .sec11-right-phone.active {
transform: translateX(calc(-50% + 23.1770833333vw));
opacity: 1;
}

.honormagicos .sec11-desktop .mid-warper .sec11-right-phone.active2 {
transform: translateX(calc(0% + 23.1770833333vw));
opacity: 0;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .phone-top-txt {
display: flex;
justify-content: space-between;
align-items: center;
width: 52.15625vw;
position: absolute;
left: 50%;
transform: translate(-50%, -2.34375vw);
transition: all 0.6s;
opacity: 0;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .phone-top-txt.active {
opacity: 1;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .phone-top-txt.active2 {
opacity: 0;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .phone-top-txt p {
font-size: 0.9375vw;
}

.honormagicos .sec11-desktop .mid-warper .phone-k .phone-top-txt p:nth-child(1) {
transform: translateX(-1vw);
}

.honormagicos .sec11-desktop .mid-warper .phone-k .phone-top-txt p:nth-child(2) {
transform: translateX(-0.8vw);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop #trigger-sec11-2 {
transform: translateY(5vh);
}
.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper {
flex-direction: column;
top: 44.5%;
}
.honormagicos .sec11-desktop .mid-warper .phone-k {
width: 47.8506666667vw;
height: 101.3333333333vw;
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text {
width: 93.3333333333vw;
margin-bottom: 6.4vw;
text-align: center;
padding-top: 4vw;
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt1,
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt2,
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt3 {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.6s;
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt2 {
width: 93.3333333333vw;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 10.6666666667vw);
opacity: 0;
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt3 {
width: 93.3333333333vw;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 10.6666666667vw);
opacity: 0;
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text.active1 .top-txt1 {
opacity: 0;
transform: translate(0, -10.6666666667vw);
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text.active1 .top-txt2 {
opacity: 1;
transform: translate(-50%, 0vw);
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text.active2 .top-txt2 {
opacity: 0;
transform: translate(-50%, -10.6666666667vw);
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text.active2 .top-txt3 {
opacity: 1;
transform: translate(-50%, 0vw);
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt1 .icon-warper,
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt2 .icon-warper,
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt3 .icon-warper {
width: 34.6666666667vw;
position: relative;
margin-bottom: 2.6666666667vw;
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt1 .dots-txt,
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt2 .dots-txt,
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt3 .dots-txt {
position: absolute;
width: -moz-max-content;
width: max-content;
height: -moz-max-content;
height: max-content;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 0.55625vw));
color: #fff;
font-size: 0.8333333333vw;
line-height: 1.2;
text-align: center;
z-index: 1;
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt1 .sec-tit,
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt2 .sec-tit,
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text .top-txt3 .sec-tit {
font-size: 6.9333333333vw;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-inside {
width: 45.6vw;
height: 99.4666666667vw;
border-radius: 4vw;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-outside {
opacity: 1;
width: 332vw;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-outside.active-alpha {
opacity: 0;
}
.honormagicos .sec11-desktop .mid-warper .swiper-pre,
.honormagicos .sec11-desktop .mid-warper .swiper-nex {
opacity: 1;
width: 10.6666666667vw;
bottom: -12.2666666667vw;
}
.honormagicos .sec11-desktop .mid-warper .swiper-pre {
left: -13.6vw;
}
.honormagicos .sec11-desktop .mid-warper .swiper-nex {
right: -13.6vw;
}
.honormagicos .sec11-desktop .mid-warper .swiper-pre.active-alpha,
.honormagicos .sec11-desktop .mid-warper .swiper-nex.active-alpha {
opacity: 0;
}
.honormagicos .sec11-desktop .mid-warper .phone-k .inset-phone-warper {
width: 46.1333333333vw;
height: 98.6666666667vw;
border-radius: 4vw;
display: none;
}
.honormagicos .sec11-desktop .mid-warper .phone-k .inset-phone-warper video {
-o-object-fit: cover;
object-fit: cover;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-three {
width: 151.2vw;
height: 101.3333333333vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -2;
opacity: 0;
transition: all 0.6s;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-three.active-block {
z-index: 10;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-three.active {
opacity: 1;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-three .swiper-slide {
position: relative;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-three .swiper-slide img {
width: 47.8506666667vw;
height: 101.3333333333vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.honormagicos .sec11-desktop .mid-warper .swiper-pre-three,
.honormagicos .sec11-desktop .mid-warper .swiper-nex-three {
opacity: 1;
width: 10.6666666667vw;
bottom: -12.2666666667vw;
position: absolute;
opacity: 0;
transition: all 0.3s;
z-index: -2;
}
.honormagicos .sec11-desktop .mid-warper .swiper-pre-three.active,
.honormagicos .sec11-desktop .mid-warper .swiper-nex-three.active {
opacity: 1;
z-index: 99;
}
.honormagicos .sec11-desktop .mid-warper .swiper-pre-three {
left: -13.6vw;
}
.honormagicos .sec11-desktop .mid-warper .swiper-nex-three {
right: -13.6vw;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-txt {
position: absolute;
left: 50%;
bottom: -9.867vw;
transform: translate(-50%, 0);
width: 40vw;
text-align: center;
z-index: 11;
opacity: 0;
transition: all 0.4s;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-txt.alpha-1 {
opacity: 1;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-txt p {
font-size: 3.7333333333vw;
opacity: 0;
width: 100%;
transition: all 0.4s;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-txt .txt2,
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-txt .txt3 {
position: absolute;
top: 0;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-txt.active0 .txt1 {
opacity: 1;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-txt.active1 .txt2 {
opacity: 1;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-txt.active2 .txt3 {
opacity: 1;
}
.honormagicos .sec11-desktop .mid-warper .phone-k .phone-k-pic,
.honormagicos .sec11-desktop .mid-warper .phone-k .inset-phone-warper,
.honormagicos .sec11-desktop .mid-warper .swiper-container-inside {
opacity: 1;
transition: all 0.5s;
transition-delay: 0s;
}
.honormagicos .sec11.active-none .sec11-content .sec11-top .sec11-warper .mid-warper .phone-k .phone-k-pic,
.honormagicos .sec11.active-none .sec11-content .sec11-top .sec11-warper .mid-warper .phone-k .inset-phone-warper,
.honormagicos .sec11.active-none .mid-warper .swiper-container-inside {
opacity: 0;
transition: all 0.4s ease;
transition-delay: 0.2s;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-last-txt {
width: 52.2666666667vw;
position: absolute;
left: 50%;
bottom: -19.867vw;
transform: translate(-50%, 0);
text-align: center;
opacity: 0;
transition: all 0.6s;
font-size: 3.7333333333vw;
}
.honormagicos .sec11-desktop .sec11-warper .mid-warper .phone-bottom-last-txt.active {
opacity: 1;
}
}
@media (width: 768px) and (max-aspect-ratio: 12/10), (width: 1024px) and (max-aspect-ratio: 12/10) {
.honormagicos .sec11-desktop .sec11-content .sec11-top {
transform: translateY(0) scale(1);
}
.honormagicos .sec11-desktop .sec11-top .sec11-warper .top-mob-text {
margin-bottom: 3vw;
}
.honormagicos .sec11-desktop .sec11-content .sec11-top .sec11-warper {
top: 41%;
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-outside .swiper-slide:not(.swiper-slide-active) {
transform: translateX(-6.0416666667vw);
}
.honormagicos .sec11-desktop .mid-warper .swiper-container-outside .swiper-slide-active ~ .swiper-slide {
transform: translateX(6.0416666667vw);
}
}
.honormagicos .section-content {
padding: 6.25vw 0;
}

.honormagicos .section-deepfake {
padding: 12.5vw 0 6.25vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-content {
padding: 0 0 21.3333333333vw;
}
.honormagicos .section-deepfake {
padding: 21.3333333333vw 0;
}
}
.honormagicos .section-content .bg {
position: absolute;
top: 0;
left: 0;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-content .bg img {
-o-object-fit: fill;
object-fit: fill;
}
}
.honormagicos .section-content .translate-wrapper {
position: relative;
width: 77.541667vw;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
-moz-column-gap: 1.0416666667vw;
column-gap: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-content .translate-wrapper {
width: 100%;
flex-direction: column;
}
}
.honormagicos .section-content .copy-wrapper {
width: 20.416667vw;
}

.honormagicos .section-tethering .copy-wrapper {
width: 21.09375vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-content .copy-wrapper {
width: 82.6666666667vw;
text-align: center;
}
}
.honormagicos .section-content .video-wrapper {
position: relative;
width: 54.375vw;
height: 31.0416666667vw;
padding: 0.5208333333vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-content .video-wrapper {
padding: 0;
margin-top: 8vw;
width: 100%;
height: auto;
}
}
.honormagicos .section-content .video-wrapper .border {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

.honormagicos .section-content .video-wrapper .gaVideo {
border-radius: 0.4947916667vw;
-webkit-mask-image: linear-gradient(to right, #000, #fff);
mask-image: linear-gradient(to right, #000, #fff);
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-content .video-wrapper .gaVideo {
border-radius: 2.1333333333vw;
width: 91.4666666667vw;
height: 51.4826666667vw;
margin: 0 auto;
-webkit-clip-path: inset(0);
clip-path: inset(0);
transform: scale(1);
}
.honormagicos .section-deepfake .video-wrapper .video-deepfake {
height: 162.6666666667vw;
}
}
.honormagicos .section-content .video-wrapper .replayBtn {
position: absolute;
top: calc(100% + 1.0416666667vw);
right: 0.5208333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-content .video-wrapper .replayBtn {
position: static;
transform: none;
margin: 5.3333333333vw auto 0;
font-size: 3.7333333333vw;
}
}
.honormagicos .section-content .video-wrapper .replayBtn.is-active {
opacity: 1;
visibility: visible;
}

.honormagicos .section-content .video-wrapper .icon-replay {
width: 0.8854166667vw;
height: 0.8854166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-content .video-wrapper .icon-replay {
width: 3.7333333333vw;
height: 3.7333333333vw;
}
}
.honormagicos .section-camera .translate-wrapper {
flex-direction: row-reverse;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-camera .translate-wrapper {
flex-direction: column;
}
}
.honormagicos .icon-replay {
width: 1.25vw !important;
height: 1.25vw !important;
margin-right: 0;
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .icon-replay {
width: 3.7333333333vw !important;
height: 3.7333333333vw !important;
}
}
.honormagicos .sec11-desktop .swiper-container-desktop {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 0.78125vw), calc(-50% + 1.3541666667vw));
opacity: 0;
z-index: 10;
pointer-events: none;
}
.honormagicos .sec11-desktop .swiper-container-desktop .phone1,
.honormagicos .sec11-desktop .swiper-container-desktop .phone3 {
width: 14.4791666667vw;
height: 29.1145833333vw;
transition: all 0.7s;
}
.honormagicos .sec11-desktop .swiper-container-desktop .phone1 {
opacity: 0;
transform: translateX(120%);
}
.honormagicos .sec11-desktop .swiper-container-desktop .phone3 {
opacity: 0;
transform: translateX(-120%);
}
.honormagicos .sec11-desktop .swiper-container-desktop .phone2 {
width: 19.0104166667vw;
height: 38.59375vw;
position: relative;
z-index: 3;
}
.honormagicos .sec11-desktop .swiper-container-desktop.active {
pointer-events: all;
}
.honormagicos .sec11-desktop .swiper-container-desktop.active .phone1,
.honormagicos .sec11-desktop .swiper-container-desktop.active .phone3 {
opacity: 1;
transform: translate(0);
}
.honormagicos .sec11-desktop .swiper-container-desktop.active .buttons-desktop {
opacity: 1;
}
.honormagicos .sec11-desktop .buttons {
width: 14.5833333333vw;
display: flex;
align-items: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -2.0833333333vw;
transform: translate(-50%, 100%);
-moz-column-gap: 1.0416666667vw;
column-gap: 1.0416666667vw;
justify-content: center;
z-index: 24;
transition: all 0.7s;
}
.honormagicos .sec11-desktop .buttons .swiper-pagination {
display: flex;
align-items: center;
-moz-column-gap: 1.0416666667vw;
column-gap: 1.0416666667vw;
position: static;
}
.honormagicos .sec11-desktop .buttons .swiper-pagination .navBtn {
position: relative;
width: 0.9375vw;
height: 0.9375vw;
opacity: 1;
}
.honormagicos .sec11-desktop .buttons .swiper-pagination .navBtn img {
position: absolute;
inset: 0;
transition: all 0.5s;
}
.honormagicos .sec11-desktop .buttons .swiper-pagination .navBtn .icon-star2 {
opacity: 0;
}
.honormagicos .sec11-desktop .buttons .swiper-pagination .navBtn.swiper-pagination-bullet-active .icon-star2 {
opacity: 1;
}
.honormagicos .sec11-desktop .buttons .swiperBtn {
width: 1.9791666667vw;
height: 1.9791666667vw;
cursor: pointer;
}
.honormagicos .sec11-desktop .buttons .swiperBtn.swiper-button-disabled {
opacity: 0.3;
}
.honormagicos .sec11-desktop .buttons.active {
opacity: 0;
}
.honormagicos .sec11-desktop .buttons-desktop {
display: flex;
align-items: center;
justify-content: center;
-moz-column-gap: 1.0416666667vw;
column-gap: 1.0416666667vw;
opacity: 0;
padding-right: 1.5625vw;
}
.honormagicos .sec11-desktop .buttons-desktop .swiperBtn {
width: 1.9791666667vw;
height: 1.9791666667vw;
cursor: pointer;
}
.honormagicos .sec11-desktop .buttons-desktop .swiperBtn.swiper-button-disabled {
opacity: 0.3;
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .buttons-desktop {
padding-right: 0;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop .swiper-container-desktop {
opacity: 1;
position: static;
transform: translate(0);
pointer-events: all;
}
}
.honormagicos .section-multimedia .swiper-multimedia {
flex: 1;
}
.honormagicos .section-multimedia .buttons {
width: 14.5833333333vw;
display: flex;
align-items: center;
bottom: -2.0833333333vw;
-moz-column-gap: 1.0416666667vw;
column-gap: 1.0416666667vw;
justify-content: center;
margin: 0.7291666667vw auto 0;
}
.honormagicos .section-multimedia .buttons .swiper-pagination {
display: flex;
align-items: center;
-moz-column-gap: 1.0416666667vw;
column-gap: 1.0416666667vw;
position: static;
}
.honormagicos .section-multimedia .buttons .swiper-pagination .navBtn {
position: relative;
width: 0.9375vw;
height: 0.9375vw;
opacity: 1;
}
.honormagicos .section-multimedia .buttons .swiper-pagination .navBtn img {
position: absolute;
inset: 0;
transition: all 0.5s;
}
.honormagicos .section-multimedia .buttons .swiper-pagination .navBtn .icon-star2 {
opacity: 0;
}
.honormagicos .section-multimedia .buttons .swiper-pagination .navBtn.swiper-pagination-bullet-active .icon-star2 {
opacity: 1;
}
.honormagicos .section-multimedia .buttons .swiperBtn {
width: 1.9791666667vw;
height: 1.9791666667vw;
transition: all 0.5s;
}
.honormagicos .section-multimedia .buttons .swiper-button-disabled {
opacity: 0.3;
}
.honormagicos .sec11-desktop {
height: 200vh;
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11-desktop {
height: auto;
}
.honormagicos .sec11-desktop .sticky-container {
height: auto;
position: relative;
top: 0;
}
}
.honormagicos .section-desktop {
position: relative;
z-index: 20;
height: calc(100vh - 52px);
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-desktop {
height: auto;
}
}
@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .sec11 .buttons {
-moz-column-gap: 3.7333333333vw;
column-gap: 3.7333333333vw;
margin-bottom: -2.5vw;
}
.honormagicos .sec11 .buttons .swiperBtn {
width: 10.1333333333vw;
height: 10.1333333333vw;
}
.honormagicos .sec11 .buttons .swiper-button-disabled {
opacity: 0.3;
}
.honormagicos .sec11 .buttons .swiper-pagination {
-moz-column-gap: 3.7333333333vw;
column-gap: 3.7333333333vw;
}
.honormagicos .sec11 .buttons .swiper-pagination .navBtn {
width: 4.8vw;
height: 4.8vw;
}
}

.honormagicos .section-turbox .videopart {
position: relative;
margin-left: 9.375vw;
align-self: center;
}

.honormagicos .section-turbox .video-turbox {
border-radius: 1.5416666667vw;
width: 12.395833vw;
height: 27.135417vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .video-turbox {
border-radius: 5.3333333333vw;
width: 57.3333333333vw;
height: 125.8666666667vw;
border-radius: 6.6666666667vw;
}
.honormagicos .section-turbox .videopart {
margin: 10.6666666667vw auto 0;
}
}
.honormagicos .section-turbox .phoneborder {
position: absolute;
top: -0.4208333333vw;
left: -0.7666666667vw;
width: 15.15625vw;
height: 30vw;
pointer-events: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .phoneborder {
top: -1.8666666667vw;
left: -3.733333vw;
width: 70.4vw;
height: 139.2vw;
}
}
.honormagicos .section-turbox .replayBtn {
position: absolute;
bottom: 0.9895833333vw;
right: 1.1458333333vw;
display: flex;
align-items: center;
font-size: 0.9375vw;
color: #256fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
will-change: opacity;
}

.honormagicos .section-turbox .detail1 {
display: flex;
padding: 3.125vw 3.5416666667vw ;
}
.honormagicos .section-turbox .detail1 .detail-left {
width: 33.1770833333vw;
padding-bottom: 1.6vw;
}

.honormagicos .section-turbox .detail2 {
margin-top: 1.8229166667vw;
padding: 3.125vw 3.5416666667vw 1.7708333333vw;
}

.honormagicos .section-turbox .detail .spec-wrapper {
text-align: left;
}

.honormagicos .section-turbox .detail1 .spec-wrapper {
width: 31.083333vw;
}

.honormagicos .section-turbox .detail2 .copy-wrapper {
width: 56.25vw;
}

.honormagicos .section-turbox .detail2 .detail2-img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 18.0729166667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
.honormagicos .section-turbox .replayBtn {
bottom: 2.9333333333vw;
right: 3.7333333333vw;
font-size: 3.7333333333vw;
}
.honormagicos .section-turbox .detail1 {
flex-direction: column;
}
.honormagicos .section-turbox .detail {
text-align: center;
}
.honormagicos .section-turbox .detail1 .detail-left {
width: 100%;
padding-bottom: 0;
}
.honormagicos .section-turbox .spec-wrapper {
transform: translate(0);
}
.honormagicos .section-turbox .detail .spec-wrapper {
margin: 5.3333333333vw auto 0;
text-align: center;
}
.honormagicos .section-turbox .detail1 .spec-wrapper {
width: 75.2vw;
}
.honormagicos .section-turbox .detail2 .copy-wrapper {
width: 100%;
}
.honormagicos .section-turbox .detail2 .spec-wrapper {
width: 74.6666666667vw;
margin: 5.3333333333vw auto 0;
}
.honormagicos .section-turbox .detail2 .detail2-img {
width: 91.4666666667vw;
height: 61.0666666667vw;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 5.3333333333vw;
}
.honormagicos .section-turbox .detail2 .mobcopy {
position: absolute;
bottom: 6.9333333333vw;
left: 4vw;
z-index: 5;
font-size: 3.2vw;
}
.honormagicos .section-turbox .detail2 {
padding-bottom: 0;
}
.honormagicos .section-turbox .detail1 {
padding-bottom: 12.729167vw;
}
.honormagicos .section-turbox .replayBtn {
right: auto;
left: 50%;
transform: translateX(-50%);
}

}
.honormagicos .section-turbox .replayBtn.is-active {
opacity: 1;
visibility: visible;
}