html,
body {
    padding: 0;
    margin: 0;
    overflow: initial;
    --backgroud-size-y: 100%;
    --backgroud-gradient-transparent: 0%;
    --backgroud-gradient-white: 0%;
}

.honormagicv2 {
    font-family: 'HONOR Sans Arabic Regular';
    background: #fff;
}

.honormagicv2.is-hidden {
    opacity: 0;
}

.honormagicv2 section {
    position: relative;
}

.honormagicv2 .blur-up {
    filter: blur(20px);
    transition: filter 0.2s;
}

.honormagicv2 .blur-up.lazyloaded {
    filter: blur(0);
}

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

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

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

.honormagicv2 button {
    background-color: transparent;
    cursor: pointer;
}

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

.honormagicv2 sup.static {
    position: static !important;
}

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

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

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

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

.honormagicv2 *:focus,
.honormagicv2 *:active {
    outline: none;
}

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

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

.honormagicv2 .ff-demiBold {
    font-family: 'HONOR Sans Arabic DemiBold';
}

.honormagicv2 .ff-medium {
    font-family: 'HONOR Sans Arabic Medium';
}

.honormagicv2 .fs-140 {
    font-size: 7.2916666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-140 {
        font-size: 21.0666666667vw;
    }
}

.honormagicv2 .fs-94 {
    font-size: 4.8958333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-94 {
        font-size: 12.8vw;
    }
}

.honormagicv2 .fs-88 {
    font-size: 4.5833333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-88 {
        font-size: 9.6vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-88 {
        font-size: 12.8vw;
    }
}

.honormagicv2 .fs-80 {
    font-size: 4.1666666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-80 {
        font-size: 9.6vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-80 {
        font-size: 12.8vw;
    }
}

.honormagicv2 .fs-85 {
    font-size: 4.4270833333vw;
}

.honormagicv2 .fs-64 {
    font-size: 3.3333333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-64 {
        font-size: 9.6vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-64 {
        font-size: 10.6666666667vw;
    }
}

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

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-56 {
        font-size: 7.4666666667vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-56 {
        font-size: 8.5333333333vw;
    }
}

.honormagicv2 .fs-48 {
    font-size: 2.5vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-48 {
        font-size: 6.4vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-48 {
        font-size: 8.5333333333vw;
    }
}

.honormagicv2 .fs-40 {
    font-size: 2.0833333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-40 {
        font-size: 4.8vw;
    }
}

.honormagicv2 .fs-32 {
    font-size: 1.6666666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-32 {
        font-size: 6.4vw;
    }
}

.honormagicv2 .fs-30 {
    font-size: 1.5625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-30 {
        font-size: 6.4vw;
    }
}

.honormagicv2 .fs-28 {
    font-size: 1.4583333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-28 {
        font-size: 6.4vw;
    }
}

.honormagicv2 .fs-24 {
    font-size: 1.25vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-24 {
        font-size: 2.6666666667vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-24 {
        font-size: 3.2vw;
    }
}

.honormagicv2 .fs-20 {
    font-size: 1.0416666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-20 {
        font-size: 2.6666666667vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-20 {
        font-size: 3.2vw;
    }
}

.honormagicv2 .fs-18 {
    font-size: 0.9375vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-18 {
        font-size: 2.6666666667vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-18 {
        font-size: 3.7333333333vw;
    }
}

.honormagicv2 .fs-16 {
    font-size: 0.8333333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .fs-16 {
        font-size: 2.6666666667vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .fs-16 {
        font-size: 3.7333333333vw;
    }
}

.honormagicv2 .sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .sticky-container {
        top: 52px;
        height: calc(100vh - 52px);
    }
}

.honormagicv2 .container {
    padding: 0;
}

.honormagicv2 .honormagicv2-note {
    font-size: 0.625vw;
    opacity: 0.4;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .honormagicv2-note {
        font-size: 1.6vw;
    }
}

.honormagicv2 .section-kv {
    height: 250vh;
    z-index: 2;
}

.honormagicv2 .section-kv.is-active1 .phone-wrapper .phone-left,
.honormagicv2 .section-kv.is-active1 .phone-wrapper .phone-right {
    opacity: 1;
    transform: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv.is-active1 .phone-wrapper .phone-left {
        transform: translateY(0.5333333333vw);
    }
}

.honormagicv2 .section-kv.is-active1 .phone-wrapper .phone-mid {
    transform: translateY(1.0416666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv.is-active1 .phone-wrapper .phone-mid {
        transform: translateY(6.6666666667vw);
    }
}

.honormagicv2 .section-kv.is-active1 .copy-wrapper>div {
    opacity: 1;
    transform: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv.is-active1 .copy-wrapper>div {
        transform: translateY(-10.6666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-kv.is-active1 .copy-wrapper>div {
        transform: translateY(-29.3333333333vw);
    }
}

.honormagicv2 .section-kv.is-active1 .magicos-wrapper {
    opacity: 1;
    transform: none;
}

.honormagicv2 .section-kv.is-active2 .phone-wrapper {
    transform: rotateY(-90deg);
    transition-delay: 1s;
}

.honormagicv2 .section-kv.is-active2 .phone-wrapper>div {
    transform: translateX(0) scale(0.7);
    transition-delay: 0s;
}

.honormagicv2 .section-kv.is-active2 .copy-wrapper {
    transform: rotateY(90deg);
    transition-delay: 1s;
}

.honormagicv2 .section-kv.is-active2 .magicos-wrapper {
    opacity: 0;
    transition-delay: 0s;
}

.honormagicv2 .section-kv.is-active3 .kv-container {
    transform: translateY(-100%);
}

.honormagicv2 .section-kv.is-active3 .playBtn.honormagicv2-mobShow {
    opacity: 1;
    pointer-events: visible;
    z-index: 5;
}

.honormagicv2 .section-kv #trigger-kv-1 {
    position: absolute;
    top: 50vh;
}

.honormagicv2 .section-kv #trigger-kv-2 {
    position: absolute;
    bottom: 0;
}

.honormagicv2 .section-kv .kv-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    perspective: 1000px;
    direction: ltr;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .kv-container {
        flex-direction: column-reverse;
        background: #fff;
        transition: transform 1s ease;
        will-change: transform;
    }
}

.honormagicv2 .section-kv .phone-wrapper {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    background: #fff;
    transform-origin: 0 50%;
    transition: transform 2s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .phone-wrapper {
        width: 100%;
        height: 70%;
        align-items: flex-start;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-kv .phone-wrapper {
        width: 100%;
        height: 60%;
        align-items: flex-start;
    }
}

.honormagicv2 .section-kv .phone-wrapper>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform: translateX(7.8125vw);
    transition: transform 1s ease 2s;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .phone-wrapper>div {
        transform: none;
        align-items: flex-start;
    }
}

.honormagicv2 .section-kv .phone-wrapper .phone-left {
    width: 13.5416666667vw;
    height: 34.023763648vw;
    opacity: 0;
    transform: scale(0.3);
    transition: all 1s ease;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .phone-wrapper .phone-left {
        width: 27.7333333333vw;
        height: 69.6806679512vw;
        transform: scale(0.3) translateY(0.5333333333vw);
    }
}

.honormagicv2 .section-kv .phone-wrapper .phone-mid {
    width: 1.875vw;
    height: 30.7552083333vw;
    margin: 0 3.6458333333vw 0 3.90625vw;
    transform: translateY(calc(50vh + 17.011881824vw));
    transition: transform 1s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .phone-wrapper .phone-mid {
        width: 3.7333333333vw;
        height: 61.237037037vw;
        margin: 0 5.0666666667vw;
        transform: translateY(calc(50vh + 30.6185185185vw));
    }
}

.honormagicv2 .section-kv .phone-wrapper .phone-right {
    width: 20.3125vw;
    height: 33.9148527529vw;
    opacity: 0;
    transform: scale(0.3);
    transition: all 1s ease;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .phone-wrapper .phone-right {
        width: 41.8666666667vw;
        height: 69.9028595817vw;
    }
}

.honormagicv2 .section-kv .copy-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    background: #fff;
    text-align: center;
    transform-origin: 100% 50%;
    transition: transform 2s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .copy-wrapper {
        width: 100%;
        height: 40%;
        align-items: flex-end;
    }
}

.honormagicv2 .section-kv .copy-wrapper>div {
    opacity: 0;
    transform: translateY(1.0416666667vw);
    transition: all 1s ease 0.7s;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .copy-wrapper>div {
        transform: translateY(-37.3333333333vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-kv .copy-wrapper>div {
        transform: translateY(-26.6666666667vw);
    }
}

.honormagicv2 .section-kv .copy-wrapper .pdtname {
    width: 29.6354166667vw;
    height: 3.125vw;
    margin: 0 auto;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .copy-wrapper .pdtname {
        width: 80.2666666667vw;
        height: 8.5333333333vw;
    }
}

.honormagicv2 .section-kv .copy-wrapper .slogan {
    font-size: 1.8229166667vw;
    margin-top: 1.5625vw;
    letter-spacing: 0.5208333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .copy-wrapper .slogan {
        font-size: 4.2666666667vw;
        margin-top: 4vw;
        letter-spacing: 1.3333333333vw;
    }
}

.honormagicv2 .section-kv .tvc-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1.2s ease;
    will-change: opacity;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .playBtn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 21.3333333333vw;
        height: 21.3333333333vw;
        border-radius: 50%;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        background-color: rgba(255, 255, 255, 0.221);
        box-shadow: none;
        opacity: 0;
        transition: opacity 0.2s ease 0.2s;
        pointer-events: none;
    }

    .honormagicv2 .section-kv .playBtn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-45%, -50%);
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 2.6666666667vw solid transparent;
        border-left: 5.3333333333vw solid #fff;
        border-bottom: 2.6666666667vw solid transparent;
    }
}

.honormagicv2 .section-kv .magicos-wrapper {
    position: absolute;
    right: 2.34375vw;
    bottom: 2.34375vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 3;
    opacity: 0;
    transition: opacity 1s ease 0.7s;
    will-change: opacity;
    direction: ltr;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .magicos-wrapper {
        right: 2.6666666667vw;
        bottom: 2.6666666667vw;
        transform: scale(0.35);
        transform-origin: 100% 100%;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-kv .magicos-wrapper {
        transform: none;
    }
}

.honormagicv2 .section-kv .magicos-wrapper .magicoslogo {
    width: 7.03125vw;
    height: 1.6679972628vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .magicos-wrapper .magicoslogo {
        width: 14.6666666667vw;
        height: 3.4793187348vw;
    }
}

.honormagicv2 .section-kv .magicos-wrapper p {
    font-size: 0.2604166667vw;
    text-align: right;
    margin-top: 0.78125vw;
    color: rgba(0, 0, 0, 0.6);
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .magicos-wrapper p {
        font-size: 1.0666666667vw;
        margin-top: 1.3333333333vw;
    }
}

.honormagicv2 .section-kv .buyBtn {
    display: inline-block;
    text-align: center;
    font-size: 0.9375vw;
    border-radius: 2.6041666667vw;
    border: 1px solid #000;
    color: #000;
    z-index: 4;
    padding: 0.5208333333vw 1.8229166667vw;
    margin-top: 2.0833333333vw;
    line-height: 1.4;
}

@media (min-width: 1366px) {
    .honormagicv2 .section-kv .buyBtn:hover {
        color: #fff;
        background: #000;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .buyBtn {
        margin: 8vw auto 0;
        font-size: 2.6666666667vw;
        transform: none;
        display: block;
        width: 17.87109vw;
        padding: 1.6vw 0;
        border-radius: 13.3333333333vw;
    }
}

.honormagicv2 .section-design {
    height: 440vh;
}

.honormagicv2 .section-design.is-in .main-title {
    opacity: 1;
    transform: none;

}

.honormagicv2 .section-design.is-active-reverse-0 .main-title {
    transition-delay: 0.3s;
}

.honormagicv2 .section-design.is-active-forward-1 .main-title {
    opacity: 0;
    transform: none;
}

.honormagicv2 .section-design.is-active-forward-1 .id-wrapper .id img {
    opacity: 0.25;
    transform: none;
    transition-delay: 0.6s;
}

.honormagicv2 .section-design.is-active-forward-1 .id-wrapper .id.id1 img {
    transform: scale(1.5);
    opacity: 1;
}

.honormagicv2 .section-design.is-active-forward-1 .id-wrapper .lightcopy {
    transform: rotateZ(-57deg) scaleY(50) translateX(calc(-50% + 5.2083333333vw)) translateY(-10.4166666667vw);
    opacity: 1;
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-forward-1 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-16vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-design.is-active-forward-1 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-24vw);
    }
}

.honormagicv2 .section-design.is-active-forward-1 .copy-wrapper {
    opacity: 1;
    transform: none;
    transition-delay: 1.1s;
}

.honormagicv2 .section-design.is-active-reverse-1 .main-title {
    opacity: 0;
    transform: none;
}

.honormagicv2 .section-design.is-active-reverse-1 .id-wrapper .id img {
    opacity: 0.25;
    transform: none;
}

.honormagicv2 .section-design.is-active-reverse-1 .id-wrapper .id.id1 img {
    transform: scale(1.5);
    opacity: 1;
}

.honormagicv2 .section-design.is-active-reverse-1 .id-wrapper .lightcopy {
    transform: rotateZ(-57deg) scaleY(50) translateX(calc(-50% + 5.2083333333vw)) translateY(-10.4166666667vw);
    opacity: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-reverse-1 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-16vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-design.is-active-reverse-1 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-24vw);
    }
}

.honormagicv2 .section-design.is-active-reverse-1 .id-wrapper .lightcopy.lightcopy1 {
    transition-delay: 0.3s;
}

.honormagicv2 .section-design.is-active-reverse-1 .copy-wrapper {
    opacity: 1;
    transform: none;
}

.honormagicv2 .section-design.is-active-forward-2 .main-title {
    opacity: 0;
    transform: none;
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id1 {
    left: 0;
    top: 80%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id1 {
        top: 70%;
    }
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id1 img {
    transform: none;
    opacity: 0.25;
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id2 {
    left: 100%;
    top: 100%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id2 {
        top: 120%;
    }
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id2 img {
    transform: scale(1.5);
    opacity: 1;
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id3 {
    left: 110%;
    top: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id3 {
        left: 120%;
    }
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .id.id3 img {
    opacity: 0.25;
    transform: none;
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .lightcopy {
    transform: rotateZ(-57deg) scaleY(50) translateX(calc(-50% + 5.2083333333vw)) translateY(-10.4166666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-forward-2 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-16vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-design.is-active-forward-2 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-24vw);
    }
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .lightcopy.lightcopy1 {
    opacity: 0;
}

.honormagicv2 .section-design.is-active-forward-2 .id-wrapper .lightcopy.lightcopy2 {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-design.is-active-forward-2 .copy-wrapper {
    opacity: 1;
    transform: none;
}

.honormagicv2 .section-design.is-active-reverse-2 .main-title {
    opacity: 0;
    transform: none;
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id1 {
    left: 0;
    top: 80%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id1 {
        top: 70%;
    }
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id1 img {
    transform: none;
    opacity: 0.25;
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id2 {
    left: 100%;
    top: 100%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id2 {
        top: 120%;
    }
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id2 img {
    transform: scale(1.5);
    opacity: 1;
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id3 {
    left: 110%;
    top: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id3 {
        left: 120%;
    }
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .id.id3 img {
    opacity: 0.25;
    transform: none;
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .lightcopy {
    transform: rotateZ(-57deg) scaleY(50) translateX(calc(-50% + 5.2083333333vw)) translateY(-10.4166666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-16vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-24vw);
    }
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .lightcopy.lightcopy1 {
    opacity: 0;
}

.honormagicv2 .section-design.is-active-reverse-2 .id-wrapper .lightcopy.lightcopy2 {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-design.is-active-reverse-2 .copy-wrapper {
    opacity: 1;
    transform: none;
}

.honormagicv2 .section-design.is-active-forward-3 .main-title,
.honormagicv2 .section-design.is-active-reverse-3 .main-title {
    opacity: 0;
    transform: none;
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .id.id1,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .id.id1 {
    left: 110%;
    top: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-design.is-active-forward-3 .id-wrapper .id.id1,
    .honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .id.id1 {
        left: 120%;
    }
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .id.id1 img,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .id.id1 img {
    transform: none;
    opacity: 0.25;
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .id.id2,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .id.id2 {
    left: 0;
    top: 80%;
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .id.id2 img,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .id.id2 img {
    transform: none;
    opacity: 0.25;
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .id.id3,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .id.id3 {
    left: 100%;
    top: 100%;
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .id.id3 img,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .id.id3 img {
    transform: scale(1.5);
    opacity: 1;
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .lightcopy,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .lightcopy {
    transform: rotateZ(-57deg) scaleY(50) translateX(calc(-50% + 5.2083333333vw)) translateY(-10.4166666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-design.is-active-forward-3 .id-wrapper .lightcopy,
    .honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-16vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {

    .honormagicv2 .section-design.is-active-forward-3 .id-wrapper .lightcopy,
    .honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(-24vw);
    }
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .lightcopy.lightcopy1,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .lightcopy.lightcopy1 {
    opacity: 0;
}

.honormagicv2 .section-design.is-active-forward-3 .id-wrapper .lightcopy.lightcopy3,
.honormagicv2 .section-design.is-active-reverse-3 .id-wrapper .lightcopy.lightcopy3 {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-design.is-active-forward-3 .copy-wrapper,
.honormagicv2 .section-design.is-active-reverse-3 .copy-wrapper {
    opacity: 1;
    transform: none;
}

.honormagicv2 .section-design #trigger-design-1 {
    position: absolute;
    top: 60vh;
}

.honormagicv2 .section-design #trigger-design-2 {
    position: absolute;
    top: 160vh;
}

.honormagicv2 .section-design .sticky-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.honormagicv2 .section-design .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.honormagicv2 .section-design .main-title {
    position: relative;
    opacity: 0;
    transform: translateY(1.0416666667vw);
    transition: all 0.5s ease;
    text-align: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .main-title {
        transform: translateY(2.6666666667vw);
        padding: 0 6vw;
    }
}

.honormagicv2 .section-design .design-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2;
    perspective: 1000px;
}

.honormagicv2 .section-design .id-wrapper {
    transform-style: preserve-3d;
    width: 62.5vw;
    height: 31.25vw;
    border-radius: 50%;
    transform: scaleY(0.02) rotateZ(57deg);
    margin-top: 5.2083333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper {
        width: 133.3333333333vw;
        height: 40vw;
        transform: scaleY(0.02) rotateZ(63deg);
    }
}

.honormagicv2 .section-design .id-wrapper .id {
    position: absolute;
    transition: all 0.5s ease;
    will-change: top, left;
    z-index: 3;
}

.honormagicv2 .section-design .id-wrapper .id img {
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s ease;
    will-change: opacity, transform;
}

.honormagicv2 .section-design .id-wrapper .id.id1 {
    width: 7.375vw;
    height: 18.375vw;
    left: 100%;
    top: 100%;
    animation: id-float 3s ease-in-out infinite;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper .id.id1 {
        width: 14.08vw;
        height: 44.7059887006vw;
    }
}

.honormagicv2 .section-design .id-wrapper .id.id1 img {
    transform: scale(1.4) translateY(26.0416666667vw);
}

.honormagicv2 .section-design .id-wrapper .id.id2 {
    width: 17.25vw;
    height: 17.25vw;
    left: 110%;
    top: 0;
    animation: id-float 3.5s ease-in-out infinite;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper .id.id2 {
        width: 36vw;
        height: 36vw;
        left: 120%;
    }
}

.honormagicv2 .section-design .id-wrapper .id.id3 {
    width: 14.9375vw;
    height: 16.40625vw;
    left: 0;
    top: 80%;
    animation: id-float 4s ease-in-out infinite;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper .id.id3 {
        width: 32vw;
        height: 35.1464435146vw;
    }
}

.honormagicv2 .section-design .id-wrapper .lightcopy {
    position: absolute;
    transform: rotateZ(-57deg) scaleY(50) translateX(calc(-50% + 5.2083333333vw)) translateY(-8.8541666667vw);
    z-index: 2;
    opacity: 0;
    transition: all 0.3s ease;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(10.6666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-design .id-wrapper .lightcopy {
        transform: rotateZ(-63deg) scaleY(50) translateX(-18.6666666667vw) translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-design .id-wrapper .lightcopy.lightcopy1 {
    width: 37.5vw;
    height: 18.85vw;
    top: 0;
    left: 50%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper .lightcopy.lightcopy1 {
        width: 62.1333333333vw;
        height: 31.0666666667vw;
    }
}

.honormagicv2 .section-design .id-wrapper .lightcopy.lightcopy2 {
    width: 41.34375vw;
    height: 18.95vw;
    top: 0;
    left: 45%;
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper .lightcopy.lightcopy2 {
        width: 62.1333333333vw;
        height: 28.8810720268vw;
    }
}

.honormagicv2 .section-design .id-wrapper .lightcopy.lightcopy3 {
    width: 49.5141vw;
    height: 21.5203vw;
    top: 0;
    left: 50%;
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper .lightcopy.lightcopy3 {
        width: 77.6133333333vw;
        height: 33.7333333333vw;
    }
}

.honormagicv2 .section-design .id-wrapper .lightcopy p {
    text-align: right;
    color: #515151;
    margin-top: 0.5208333333vw;
    font-size: 1.25vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .id-wrapper .lightcopy p {
        margin-top: 2.6666666667vw;
        font-size: 3.2vw;
    }
}

.honormagicv2 .section-design .copy-wrapper {
    position: relative;
    width: 39.0625vw;
    text-align: center;
    margin-top: 1.5625vw;
    opacity: 0;
    transform: translateY(1.5625vw);
    transition: all 0.5s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .copy-wrapper {
        width: 88.8vw;
        transform: translateY(2.6666666667vw);
        margin-top: 26.6666666667vw;
    }
}

.honormagicv2 .section-design .copy-wrapper p {
    margin-top: 0.5208333333vw;
    opacity: 0.6;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-design .copy-wrapper p {
        margin-top: 2.6666666667vw;
    }
}

@keyframes id-rotate {
    0% {
        transform: translateZ(-700px) rotateY(0);
    }

    100% {
        transform: translateZ(-700px) rotateY(-360deg);
    }
}

@keyframes id-float {
    0% {
        transform: rotateZ(-57deg) scaleY(50) translateY(0);
    }

    50% {
        transform: rotateZ(-57deg) scaleY(50) translateY(1.5625vw);
    }

    100% {
        transform: rotateZ(-57deg) scaleY(50) translateY(0);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    @keyframes id-float {
        0% {
            transform: rotateZ(-63deg) scaleY(50) translateY(0);
        }

        50% {
            transform: rotateZ(-63deg) scaleY(50) translateY(5.3333333333vw);
        }

        100% {
            transform: rotateZ(-63deg) scaleY(50) translateY(0);
        }
    }
}

.honormagicv2 .section-battery {
    height: 250vh;
    background: #000;
    color: #fff;
    z-index: 2;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.honormagicv2 .section-battery.is-forward-in .line>div {
    transform: none;
}

.honormagicv2 .section-battery.is-forward-in .copy-wrapper {
    transition-delay: 0.5s;
}

.honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper1 {
    transform: translate(-44.7916666667vw, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper1 {
        transform: translate(-50%, -61.8666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper1 {
        transform: translate(-50%, -88.5333333333vw);
    }
}

@media (width: 662px) {

    .honormagicv2 .section-battery .copy-wrapper.wrapper1 h2,
    .honormagicv2 .section-battery .copy-wrapper.wrapper1 p {
        transform: translateX(-2vw);
    }
}

.honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper2 {
    transform: translate(17.34375vw, -100%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper2 {
        transform: translate(-100%, 17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper2 {
        transform: translate(-100%, 43.7333333333vw);
    }
}

.honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper3 {
    transform: translateX(17.34375vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper3 {
        transform: translate(0, 17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-forward-in .copy-wrapper.wrapper3 {
        transform: translate(0, 43.7333333333vw);
    }
}

.honormagicv2 .section-battery.is-reverse-in .line {
    transition-delay: 0.3s;
}

.honormagicv2 .section-battery.is-reverse-in .line>div {
    transform: none;
}

.honormagicv2 .section-battery.is-reverse-in .copy-wrapper {
    transition-delay: 0.3s;
}

.honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper1 {
    transform: translate(-44.7916666667vw, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper1 {
        transform: translate(-50%, -61.8666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper1 {
        transform: translate(-50%, -88.5333333333vw);
    }
}

.honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper2 {
    transform: translate(17.34375vw, -100%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper2 {
        transform: translate(-100%, 17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper2 {
        transform: translate(-100%, 43.7333333333vw);
    }
}

.honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper3 {
    transform: translateX(17.34375vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper3 {
        transform: translate(0, 17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-reverse-in .copy-wrapper.wrapper3 {
        transform: translate(0, 43.7333333333vw);
    }
}

.honormagicv2 .section-battery.is-reverse-in .id {
    transition-delay: 0.3s;
}

.honormagicv2 .section-battery.is-forward-out {
    opacity: 0;
}

.honormagicv2 .section-battery.is-forward-out .line {
    opacity: 0;
}

.honormagicv2 .section-battery.is-forward-out .line>div {
    transform: none;
}

.honormagicv2 .section-battery.is-forward-out .copy-wrapper {
    transition-delay: 0s;
    opacity: 0;
}

.honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper1 {
    transform: translate(calc(-50vw - 44.7916666667vw), -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper1 {
        transform: translate(-50%, calc(-50vh - 61.8666666667vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper1 {
        transform: translate(-50%, calc(-50vh - 88.5333333333vw));
    }
}

.honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper2 {
    transform: translate(calc(50vw + 17.34375vw), -100%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper2 {
        transform: translate(calc(-50vw - 100%), 17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper2 {
        transform: translate(calc(-50vw - 100%), 43.7333333333vw);
    }
}

.honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper3 {
    transform: translate(17.34375vw, 50vh);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper3 {
        transform: translate(50vw, 17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery.is-forward-out .copy-wrapper.wrapper3 {
        transform: translate(50vw, 43.7333333333vw);
    }
}

.honormagicv2 .section-battery.is-forward-out .id {
    opacity: 0;
}

.honormagicv2 .section-battery .sticky-container {
    top: 52px;
    height: calc(100vh - 52px);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .sticky-container {
        top: 52px;
        height: calc(100vh - 52px);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .battery-title {
        font-size: 6.4vw;
    }
}

.honormagicv2 .section-battery .line {
    position: absolute;
    overflow: hidden;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.honormagicv2 .section-battery .line>div {
    width: 100%;
    height: 100%;
    background: #404041;
    transition: transform 0.7s ease;
    will-change: transform;
}

.honormagicv2 .section-battery .line1 {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-19.2708333333vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .line1 {
        transform: translateY(-61.8666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .line1 {
        transform: translateY(-88.5333333333vw);
    }
}

.honormagicv2 .section-battery .line1>div {
    transform: translateX(100%);
}

.honormagicv2 .section-battery .line2 {
    top: 50%;
    left: 50%;
    width: 32.65625vw;
    height: 1px;
    transform: translateX(17.34375vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .line2 {
        left: 0;
        width: 100%;
        transform: translateY(-17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .line2 {
        transform: translateY(-43.7333333333vw);
    }
}

.honormagicv2 .section-battery .line2>div {
    transform: translateX(-100%);
}

.honormagicv2 .section-battery .line3 {
    top: 50%;
    left: 0;
    width: 90.8333333333vw;
    height: 1px;
    transform: translateY(19.2708333333vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .line3 {
        width: 100%;
        transform: translateY(17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .line3 {
        transform: translateY(43.7333333333vw);
    }
}

.honormagicv2 .section-battery .line3>div {
    transform: translateX(100%);
}

.honormagicv2 .section-battery .line4 {
    top: 50%;
    left: 50%;
    width: 1px;
    height: 38.5416666667vw;
    transform: translate(-44.7916666667vw, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .line4 {
        left: 0;
        width: 100%;
        height: 1px;
        transform: translateY(52.5333333333vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .line4 {
        transform: translateY(79.2vw);
    }
}

.honormagicv2 .section-battery .line4>div {
    transform: translateY(-100%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .line4>div {
        transform: translateX(-100%);
    }
}

.honormagicv2 .section-battery .line5 {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    transform: translateX(-17.4479166667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .line5 {
        transform: translateX(-42.4vw);
    }
}

.honormagicv2 .section-battery .line5>div {
    transform: translateY(100%);
}

.honormagicv2 .section-battery .line6 {
    top: calc(50% + 19.2708333333vw);
    left: 50%;
    width: 1px;
    height: 100%;
    transform: translate(17.34375vw, -100%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .line6 {
        top: 0;
        height: calc(50% + 17.0666666667vw);
        transform: translateX(42.4vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .line6 {
        height: calc(50% + 43.7333333333vw);
    }
}

.honormagicv2 .section-battery .line6>div {
    transform: translateY(-100%);
}

.honormagicv2 .section-battery .line7 {
    top: 50%;
    left: 50%;
    width: 1px;
    height: 100%;
    transform: translateX(40.8333333333vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .line7 {
        height: 35.4666666667vw;
        transform: translate(-50%, 17.0666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .line7 {
        height: 35.4666666667vw;
        transform: translate(-50%, 43.7333333333vw);
    }
}

.honormagicv2 .section-battery .line7>div {
    transform: translateY(100%);
}

.honormagicv2 .section-battery .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.honormagicv2 .section-battery .copy-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 0.7s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

.honormagicv2 .section-battery .copy-wrapper p {
    position: relative;
}

.honormagicv2 .section-battery .copy-wrapper.wrapper1 {
    transform: translate(calc(-50vw - 44.7916666667vw), -50%);
    width: 27.34375vw;
    height: 38.5416666667vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 6.25vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .copy-wrapper.wrapper1 {
        transform: translate(-50%, calc(-50vh - 61.8666666667vw));
        width: 84.8vw;
        height: 44.8vw;
        padding: 0 6.6666666667vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .copy-wrapper.wrapper1 {
        transform: translate(-50%, calc(-50vh - 88.5333333333vw));
    }
}

.honormagicv2 .section-battery .copy-wrapper.wrapper1 p {
    opacity: 0.6;
    margin-top: 1.5625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .copy-wrapper.wrapper1 p {
        margin-top: 2.6666666667vw;
    }
}

.honormagicv2 .section-battery .copy-wrapper.wrapper2 {
    transform: translate(calc(50vw + 17.34375vw), -100%);
    width: 32.65625vw;
    height: 50%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding: 0 6.25vw 6.5104166667vw 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .copy-wrapper.wrapper2 {
        transform: translate(calc(-50vw - 100%), 17.0666666667vw);
        width: 41.8666666667vw;
        height: 35.2vw;
        padding: 6.6666666667vw;
        justify-content: center;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .copy-wrapper.wrapper2 {
        transform: translate(calc(-50vw - 100%), 43.7333333333vw);
    }
}

.honormagicv2 .section-battery .copy-wrapper.wrapper3 {
    transform: translate(17.34375vw, 50vh);
    width: 23.4895833333vw;
    height: 19.2708333333vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 6.25vw;
    background: rgba(31, 32, 34, 0.4);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .copy-wrapper.wrapper3 {
        transform: translate(50vw, 17.0666666667vw);
        width: 41.8666666667vw;
        height: 35.2vw;
        background: transparent;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .copy-wrapper.wrapper3 {
        transform: translate(50vw, 43.7333333333vw);
    }
}

.honormagicv2 .section-battery .id {
    width: 47.5520833333vw;
    height: 28.75vw;
    transform: translateX(-1.5625vw);
    transition: opacity 0.3s ease;
    will-change: opacity;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-battery .id {
        width: 67.2vw;
        height: 40.5066666667vw;
        transform: translateX(0);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-battery .id {
        width: 96vw;
        height: 57.8666666667vw;
    }
}

.honormagicv2 .section-hinge {
    height: 350vh;
    margin-top: -150vh;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.honormagicv2 .section-hinge.is-in {
    opacity: 1;
    transition-delay: 0.3s;
    z-index: 2;
}

.honormagicv2 .section-hinge.is-active1 .hinge-wrapper.wrapper1 .pic video {
    width: 100%;
    height: 100%;
}

.honormagicv2 .section-hinge.is-active1 .hinge-wrapper.wrapper1 .copy-wrapper {
    transform: none;
    opacity: 1;
    transition-delay: 0.5s;

    text-align: right;
}

.honormagicv2 .section-hinge.is-active1 .hinge-wrapper.wrapper2 {
    transform: none;
    opacity: 1;
    transition-delay: 0.7s;
}

.honormagicv2 .section-hinge.is-active2 .hinge-wrapper.wrapper1 .pic {
    transform: none;
}

.honormagicv2 .section-hinge.is-active2 .hinge-wrapper.wrapper1 .copy-wrapper {
    transform: none;
    opacity: 1;
    transition-delay: 0.5s;
}

.honormagicv2 .section-hinge.is-active2 .hinge-wrapper.wrapper2 .top-wrapper .pic {
    transform: none;
}

.honormagicv2 .section-hinge.is-active2 .hinge-wrapper.wrapper2 .top-wrapper .copy-wrapper {
    transform: none;
    opacity: 1;
    transition-delay: 0.7s;
    text-align: right;
}

.honormagicv2 .section-hinge.is-active3 .hinge-wrapper.wrapper1 .pic {
    transform: none;
}

.honormagicv2 .section-hinge.is-active3 .hinge-wrapper.wrapper1 .copy-wrapper {
    transform: none;
    opacity: 1;
    transition-delay: 0.5s;
}

.honormagicv2 .section-hinge.is-active3 .hinge-wrapper.wrapper2 .top-wrapper .copy-wrapper {
    opacity: 1;
    transition-delay: 0.7s;
}

.honormagicv2 .section-hinge.is-active3 .hinge-wrapper.wrapper2 .bot-wrapper {
    transform: none;
    opacity: 1;
}

.honormagicv2 .section-hinge.is-active3 .hinge-wrapper.wrapper2 .bot-wrapper .copy-wrapper {
    transform: none;
    opacity: 1;
    transition-delay: 0.7s;
}

.honormagicv2 .section-hinge.is-active3 .logo {
    transform: none;
    opacity: 1;
    transition-delay: 0.7s;
}

.honormagicv2 .section-hinge #trigger-hinge-2 {
    position: absolute;
    top: 50vh;
}

.honormagicv2 .section-hinge #trigger-hinge-3 {
    position: absolute;
    top: 100vh;
}

.honormagicv2 .section-hinge .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.honormagicv2 .section-hinge .logo {
    position: absolute;
    bottom: 3.6458333333vw;
    right: 6.25vw;
    width: 16.6145833333vw;
    height: 5.2083333333vw;
    z-index: 2;
    opacity: 0;
    transform: translateY(3.125vw);
    transition: all 0.5s ease;
    will-change: transform, opacity;
}

.honormagicv2 .section-hinge .hinge-wrapper {
    position: relative;
    display: flex;
    direction: ltr;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper {
        flex-direction: column;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper1 {
    align-items: flex-end;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper1 {
        align-items: flex-start;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper1 .pic {
    position: relative;
    width: 74.84375vw;
    height: 42.0833333333vw;
    margin-bottom: 8.0729166667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper1 .pic {
        width: 92vw;
        height: 61.3333333333vw;
        margin-bottom: 0;
        transform: none;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper1 .pic video {
    width: 100vw;
    height: 100vh;
    transform-origin: 0 0;
    transition: all 0.7s ease;
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper1 .copy-wrapper {
    margin-left: -5.46875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper1 .copy-wrapper {
        margin-left: 18.6666666667vw;
        margin-top: -8vw;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper1 .copy-wrapper .fs-16 {
    margin-top: 1.5625vw;
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper2 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /* height: calc(100vh - 52px); */
    opacity: 0;
    transform: translateY(3.125vw);
    transition: all 0.5s ease;
    will-change: transform, opacity;
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .top-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 3.125vw;
    padding-right: 6.1458333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .top-wrapper {
        margin-top: 13.3333333333vw;
        padding-right: 0;
        flex-direction: column-reverse;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .top-wrapper .pic {
    transform: scale(1.59);
    transform-origin: 100% 0;
    transition: transform 0.7s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .top-wrapper .pic {
        transform: none;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .top-wrapper .copy-wrapper {
    margin-right: -5.46875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .top-wrapper .copy-wrapper {
        margin-right: 18.6666666667vw;
        margin-top: -8vw;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .bot-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 3.125vw;
    padding-left: 6.1458333333vw;
    opacity: 0;
    transform: translateY(3.125vw);
    transition: all 0.7s ease;
    will-change: transform, opacity;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .bot-wrapper {
        margin-top: 13.3333333333vw;
        padding-left: 0;
        align-items: flex-start;
        flex-direction: column;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .bot-wrapper .copy-wrapper {
    margin-left: -5.46875vw;
    text-align: right;

}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .bot-wrapper .copy-wrapper {
        margin-left: 18.6666666667vw;
        margin-top: -8vw;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .pic {
    width: 42.96875vw;
    height: 22.8125vw;
    margin-bottom: 8.0729166667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper.wrapper2 .pic {
        width: 92vw;
        height: 61.3333333333vw;
        margin-bottom: 0;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper {
    position: relative;
    width: 27.0833333333vw;
    height: 21.8333333333vw;
    padding: 0 3.3854166667vw;
    background: rgba(25, 26, 28, 0.85);
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transform: translateY(3.125vw);
    transition: all 0.5s ease;
    will-change: transform, opacity;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper {
        width: 78.4vw;
        height: auto;
        padding: 8vw;
        transform: translateY(8vw);
    }

    .honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper h2 {
        font-size: 4.8vw;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .fs-18 {
    opacity: 0.6;
    margin-top: 0.78125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .fs-18 {
        margin-top: 4vw;
        font-size: 3.2vw;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .fs-16 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .fs-16 {
        display: block;
        font-size: 3.2vw;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .fs-16 .fs-30 {
    display: inline-block;
    transform: translateY(-0.2083333333vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .fs-16 .fs-30 {
        font-size: 3.2vw;
        transform: translateY(0.2666666667vw);
    }
}

.honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .fs-16 .playBtn {
    margin-top: 0;
    font-size: inherit;
    margin-top: 0.78125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .fs-16 .playBtn {
        font-size: 3.2vw;
        margin-left: 0;
        margin-top: 4vw;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .playBtn {
    display: flex;
    align-items: center;
    margin-top: 1.5625vw;

}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .playBtn {
        font-size: 3.2vw;
        margin-top: 4vw;
    }
}

.honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .playBtn img {
    width: 1.5625vw;
    height: 1.5625vw;
    margin-left: 0.46875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-hinge .hinge-wrapper .copy-wrapper .playBtn img {
        width: 4vw;
        height: 4vw;
        margin-left: 1.3333333333vw;
    }
}

.honormagicv2 .section-protect {
    height: 250vh;
    background: #000;
    color: #fff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect {
        height: 290vh;
    }
}

.honormagicv2 .section-protect.is-active-forward-1 .protect-title-gray {
    opacity: 1;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-1 .protect-title-gray span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-forward-1 .protect-title-gray span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-forward-1 .border.border1 .protect-title-color {
    opacity: 1;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-1 .border.border1 .protect-title-color span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-forward-1 .border.border1 .protect-title-color span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-reverse-1 .protect-title-gray {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-reverse-1 .protect-title-gray span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-reverse-1 .protect-title-gray span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-reverse-1 .border.border1 {
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-reverse-1 .border.border1 .protect-title-color {
    opacity: 1;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-reverse-1 .border.border1 .protect-title-color {
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-protect.is-active-reverse-1 .border.border1 .protect-title-color span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-reverse-1 .border.border1 .protect-title-color span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-forward-2 .bg-wrapper {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-forward-2 .bg-wrapper .mask {
    opacity: 1;
}

.honormagicv2 .section-protect.is-active-forward-2 .protect-title-gray {
    opacity: 0;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-2 .protect-title-gray {
        transform: translate(-50%, calc(-50% - 16vw));
    }

    .honormagicv2 .section-protect.is-active-forward-2 .protect-title-gray span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-forward-2 .protect-title-gray span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-forward-2 .border.border1 {
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-2 .border.border1 {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 16vw));
    }
}

.honormagicv2 .section-protect.is-active-forward-2 .border.border1 .protect-title-color {
    opacity: 1;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-2 .border.border1 .protect-title-color {
        opacity: 0;
    }

    .honormagicv2 .section-protect.is-active-forward-2 .border.border1 .protect-title-color span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-forward-2 .border.border1 .protect-title-color span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-forward-2 .border.border2,
.honormagicv2 .section-protect.is-active-forward-2 .border.border3 {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-forward-2 .copy-wrapper.wrapper1 {
    opacity: 1;
    transform: translate(calc(-100% - 27.8645833333vw), -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-2 .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 18.6666666667vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-protect.is-active-forward-2 .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 34.6666666667vw));
    }
}

.honormagicv2 .section-protect.is-active-forward-2 .copy-wrapper.wrapper2 {
    opacity: 1;
    transform: translate(26.0416666667vw, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-2 .copy-wrapper.wrapper2 {
        transform: translate(-50%, calc(-100% - 29.3333333333vw));
    }
}

.honormagicv2 .section-protect.is-active-reverse-2 .bg-wrapper {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-reverse-2 .bg-wrapper .mask {
    opacity: 1;
}

.honormagicv2 .section-protect.is-active-reverse-2 .protect-title-gray {
    opacity: 0;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-reverse-2 .protect-title-gray {
        transform: translate(-50%, calc(-50% - 16vw));
    }

    .honormagicv2 .section-protect.is-active-reverse-2 .protect-title-gray span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-reverse-2 .protect-title-gray span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-reverse-2 .border.border1 {
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-reverse-2 .border.border1 {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 16vw));
    }
}

.honormagicv2 .section-protect.is-active-reverse-2 .border.border1 .protect-title-color {
    opacity: 1;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-reverse-2 .border.border1 .protect-title-color {
        opacity: 0;
    }

    .honormagicv2 .section-protect.is-active-reverse-2 .border.border1 .protect-title-color span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-reverse-2 .border.border1 .protect-title-color span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-reverse-2 .border.border2,
.honormagicv2 .section-protect.is-active-reverse-2 .border.border3 {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-reverse-2 .copy-wrapper.wrapper1 {
    opacity: 1;
    transform: translate(calc(-100% - 27.8645833333vw), -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-reverse-2 .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 18.6666666667vw));
    }

    .honormagicv2 .section-protect.is-active-reverse-2 .copy-wrapper.wrapper1 p:nth-of-type(1) {
        transition-delay: 0.3s;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-protect.is-active-reverse-2 .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 34.6666666667vw));
    }
}

.honormagicv2 .section-protect.is-active-reverse-2 .copy-wrapper.wrapper2 {
    opacity: 1;
    transform: translate(26.0416666667vw, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-reverse-2 .copy-wrapper.wrapper2 {
        transform: translate(-50%, calc(-100% - 29.3333333333vw));
    }
}

.honormagicv2 .section-protect.is-active-forward-3 .bg-wrapper,
.honormagicv2 .section-protect.is-active-reverse-3 .bg-wrapper {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-forward-3 .bg-wrapper .mask,
.honormagicv2 .section-protect.is-active-reverse-3 .bg-wrapper .mask {
    opacity: 1;
}

.honormagicv2 .section-protect.is-active-forward-3 .protect-title-gray,
.honormagicv2 .section-protect.is-active-reverse-3 .protect-title-gray {
    opacity: 0;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-protect.is-active-forward-3 .protect-title-gray,
    .honormagicv2 .section-protect.is-active-reverse-3 .protect-title-gray {
        transform: translate(-50%, calc(-50% - 16vw));
    }

    .honormagicv2 .section-protect.is-active-forward-3 .protect-title-gray span:nth-of-type(1),
    .honormagicv2 .section-protect.is-active-reverse-3 .protect-title-gray span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-forward-3 .protect-title-gray span:nth-of-type(2),
    .honormagicv2 .section-protect.is-active-reverse-3 .protect-title-gray span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-forward-3 .border.border1,
.honormagicv2 .section-protect.is-active-reverse-3 .border.border1 {
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-protect.is-active-forward-3 .border.border1,
    .honormagicv2 .section-protect.is-active-reverse-3 .border.border1 {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 16vw));
    }
}

.honormagicv2 .section-protect.is-active-forward-3 .border.border1 .protect-title-color,
.honormagicv2 .section-protect.is-active-reverse-3 .border.border1 .protect-title-color {
    opacity: 1;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-protect.is-active-forward-3 .border.border1 .protect-title-color,
    .honormagicv2 .section-protect.is-active-reverse-3 .border.border1 .protect-title-color {
        opacity: 0;
    }

    .honormagicv2 .section-protect.is-active-forward-3 .border.border1 .protect-title-color span:nth-of-type(1),
    .honormagicv2 .section-protect.is-active-reverse-3 .border.border1 .protect-title-color span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-forward-3 .border.border1 .protect-title-color span:nth-of-type(2),
    .honormagicv2 .section-protect.is-active-reverse-3 .border.border1 .protect-title-color span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-forward-3 .border.border2,
.honormagicv2 .section-protect.is-active-forward-3 .border.border3,
.honormagicv2 .section-protect.is-active-reverse-3 .border.border2,
.honormagicv2 .section-protect.is-active-reverse-3 .border.border3 {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-forward-3 .copy-wrapper.wrapper1,
.honormagicv2 .section-protect.is-active-reverse-3 .copy-wrapper.wrapper1 {
    opacity: 1;
    transform: translate(calc(-100% - 27.8645833333vw), -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-protect.is-active-forward-3 .copy-wrapper.wrapper1,
    .honormagicv2 .section-protect.is-active-reverse-3 .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 18.6666666667vw));
    }

    .honormagicv2 .section-protect.is-active-forward-3 .copy-wrapper.wrapper1 p:nth-of-type(1),
    .honormagicv2 .section-protect.is-active-reverse-3 .copy-wrapper.wrapper1 p:nth-of-type(1) {
        opacity: 0;
        transform: translateY(2.6666666667vw);
    }

    .honormagicv2 .section-protect.is-active-forward-3 .copy-wrapper.wrapper1 p:nth-of-type(2),
    .honormagicv2 .section-protect.is-active-reverse-3 .copy-wrapper.wrapper1 p:nth-of-type(2) {
        opacity: 1;
        transform: none;
        transition-delay: 0.3s;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {

    .honormagicv2 .section-protect.is-active-forward-3 .copy-wrapper.wrapper1,
    .honormagicv2 .section-protect.is-active-reverse-3 .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 34.6666666667vw));
    }
}

.honormagicv2 .section-protect.is-active-forward-3 .copy-wrapper.wrapper2,
.honormagicv2 .section-protect.is-active-reverse-3 .copy-wrapper.wrapper2 {
    opacity: 1;
    transform: translate(26.0416666667vw, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-protect.is-active-forward-3 .copy-wrapper.wrapper2,
    .honormagicv2 .section-protect.is-active-reverse-3 .copy-wrapper.wrapper2 {
        transform: translate(-50%, calc(-100% - 29.3333333333vw));
    }
}

.honormagicv2 .section-protect.is-active-forward-4 .bg-wrapper {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-forward-4 .bg-wrapper .mask {
    opacity: 1;
}

.honormagicv2 .section-protect.is-active-forward-4 .protect-title-gray {
    opacity: 0;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-4 .protect-title-gray {
        transform: translate(-50%, calc(-50% - 16vw));
    }

    .honormagicv2 .section-protect.is-active-forward-4 .protect-title-gray span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-forward-4 .protect-title-gray span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-forward-4 .border.border1 {
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-4 .border.border1 {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 16vw));
    }
}

.honormagicv2 .section-protect.is-active-forward-4 .border.border1 .protect-title-color {
    opacity: 1;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-4 .border.border1 .protect-title-color {
        opacity: 0;
    }

    .honormagicv2 .section-protect.is-active-forward-4 .border.border1 .protect-title-color span:nth-of-type(1) {
        transform: none;
    }

    .honormagicv2 .section-protect.is-active-forward-4 .border.border1 .protect-title-color span:nth-of-type(2) {
        transform: none;
    }
}

.honormagicv2 .section-protect.is-active-forward-4 .border.border2,
.honormagicv2 .section-protect.is-active-forward-4 .border.border3 {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-protect.is-active-forward-4 .copy-wrapper.wrapper1 {
    opacity: 1;
    transform: translate(calc(-100% - 27.8645833333vw), -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-4 .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 18.6666666667vw));
    }

    .honormagicv2 .section-protect.is-active-forward-4 .copy-wrapper.wrapper1 p:nth-of-type(1) {
        opacity: 0;
        transform: translateY(2.6666666667vw);
    }

    .honormagicv2 .section-protect.is-active-forward-4 .copy-wrapper.wrapper1 p:nth-of-type(3) {
        opacity: 1;
        transform: none;
        transition-delay: 0.3s;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-protect.is-active-forward-4 .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 34.6666666667vw));
    }
}

.honormagicv2 .section-protect.is-active-forward-4 .copy-wrapper.wrapper2 {
    opacity: 1;
    transform: translate(26.0416666667vw, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect.is-active-forward-4 .copy-wrapper.wrapper2 {
        transform: translate(-50%, calc(-100% - 29.3333333333vw));
    }
}

.honormagicv2 .section-protect #trigger-protect-2 {
    position: absolute;
    top: 50vh;
}

.honormagicv2 .section-protect .sticky-container {
    top: 52px;
    height: calc(100vh - 52px);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .sticky-container {
        top: 52px;
        height: calc(100vh - 52px);
    }
}

.honormagicv2 .section-protect .bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: opacity;
}

.honormagicv2 .section-protect .bg-wrapper .mask {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100vw;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: opacity;
    -webkit-clip-path: url(#protect-clipPath-pc);
    clip-path: url(#protect-clipPath-pc);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .bg-wrapper .mask {
        height: 293.3333333333vw;
        -webkit-clip-path: url(#protect-clipPath-pad);
        clip-path: url(#protect-clipPath-pad);
        transform: translate(-50%, calc(-50% - 16vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-protect .bg-wrapper .mask {
        -webkit-clip-path: url(#protect-clipPath-mob);
        clip-path: url(#protect-clipPath-mob);
    }
}

.honormagicv2 .section-protect .border {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    overflow: hidden;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.honormagicv2 .section-protect .border.border1 {
    width: 61.9791666667vw;
    height: 29.2447916667vw;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .border.border1 {
        width: 42vw;
        height: 89vw;
        transition: all 0.3s ease;
        will-change: opacity, transform;
        transform: translate(-50%, -50%);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-protect .border.border1 {
        width: 56vw;
        height: 118.6666666667vw;
    }
}

.honormagicv2 .section-protect .border.border2 {
    width: 32.96875vw;
    height: 35.390625vw;
    transform: translate(-26.3541666667vw, -50%);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .border.border2 {
        display: none;
    }
}

.honormagicv2 .section-protect .border.border3 {
    width: 16.5104166667vw;
    height: 34.9968832021vw;
    transform: translate(7.2395833333vw, -50%);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .border.border3 {
        width: 56vw;
        height: 118.6666666667vw;
        transform: translate(-50%, -50%);
    }
}

.honormagicv2 .section-protect .border picture {
    position: relative;
    z-index: 2;
}

.honormagicv2 .section-protect .protect-title-gray,
.honormagicv2 .section-protect .protect-title-color {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    transform: translate(-50%, calc(50vh + 100%));
    text-align: center;
    font-size: 6.7708333333vw;
    white-space: nowrap;
    color: #707070;
    opacity: 0;
    transition: all 0.5s ease;
    will-change: opacity, transform;
    overflow: hidden;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-protect .protect-title-gray,
    .honormagicv2 .section-protect .protect-title-color {
        font-size: 17.3333333333vw;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease;
    }

    .honormagicv2 .section-protect .protect-title-gray span,
    .honormagicv2 .section-protect .protect-title-color span {
        display: block;
        transition: transform 0.5s ease;
        will-change: transform;
    }

    .honormagicv2 .section-protect .protect-title-gray span:nth-of-type(1),
    .honormagicv2 .section-protect .protect-title-color span:nth-of-type(1) {
        transform: translateX(100%);
    }

    .honormagicv2 .section-protect .protect-title-gray span:nth-of-type(2),
    .honormagicv2 .section-protect .protect-title-color span:nth-of-type(2) {
        transform: translateX(-100%);
    }
}

.honormagicv2 .section-protect .protect-title-color {
    background: linear-gradient(90deg, #ffa971 30%, #ff89cb 50%, #cc3aff 70%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-clip-path: inset(0 19.5%);
    clip-path: inset(0 19.5%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .protect-title-color {
        background: none;
        -webkit-clip-path: inset(0 30%);
        clip-path: inset(0 30%);
    }

    .honormagicv2 .section-protect .protect-title-color span {
        background: linear-gradient(90deg, #ffa971 30%, #ff89cb 50%, #cc3aff 70%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-protect .protect-title-color {
        -webkit-clip-path: inset(0 23%);
        clip-path: inset(0 23%);
    }
}

.honormagicv2 .section-protect .copy-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    opacity: 0;
    transition: all 0.5s ease;
    will-change: opacity, transform;
}

.honormagicv2 .section-protect .copy-wrapper.wrapper1 {
    width: 14.0625vw;
    transform: translate(calc(-100% - 27.8645833333vw), calc(-50% + 0.5208333333vw));
    text-align: right;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .copy-wrapper.wrapper1 {
        width: 84vw;
        left: 8vw;
        transform: translateY(calc(100% + 21.3333333333vw));
        text-align: center;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-protect .copy-wrapper.wrapper1 {
        transform: translateY(calc(100% + 37.3333333333vw));
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-protect .copy-wrapper.wrapper1 {
        width: 16.1458333333vw;
    }
}

.honormagicv2 .section-protect .copy-wrapper.wrapper1 p {
    transform: translateX(-0.78125vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .copy-wrapper.wrapper1 p {
        transform: none;
        transition: all 0.3s ease;
        will-change: opacity, transform;
    }

    .honormagicv2 .section-protect .copy-wrapper.wrapper1 p span {
        margin-top: 1.3333333333vw;
    }
}

.honormagicv2 .section-protect .copy-wrapper.wrapper1 p:not(:first-of-type) {
    margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .copy-wrapper.wrapper1 p:not(:first-of-type) {
        margin-top: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transform: translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-protect .copy-wrapper.wrapper1 span {
    display: block;
    opacity: 0.6;
}

.honormagicv2 .section-protect .copy-wrapper.wrapper2 {
    width: 18.2291666667vw;
    transform: translate(26.0416666667vw, calc(-50% + 0.5208333333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-protect .copy-wrapper.wrapper2 {
        left: 50%;
        width: 53.3333333333vw;
        transform: translate(-50%, calc(-100% - 26.6666666667vw));
        text-align: center;
    }

    .honormagicv2 .section-protect .copy-wrapper.wrapper2 h3 {
        font-size: 4.2666666667vw;
    }
}

.honormagicv2 .section-light {
    height: 290vh;
    background: #000;
    color: #fff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light {
        z-index: 4;
        height: 150vh;
    }
}

.honormagicv2 .section-light.is-active1 .left-wrapper .copy-wrapper {
    opacity: 1;
    transform: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light.is-active1 .left-wrapper .copy-wrapper {
        transform: translateY(-100%);
    }
}

.honormagicv2 .section-light.is-active1 .right-wrapper .icon-wrapper {
    opacity: 1;
    transform: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light.is-active1 .right-wrapper .icon-wrapper {
        transform: translateY(100%);
    }
}

.honormagicv2 .section-light.is-active2 .left-wrapper .copy-wrapper {
    opacity: 1;
    transform: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light.is-active2 .left-wrapper .copy-wrapper {
        transform: translateY(-100%);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light.is-active2 .left-wrapper .pic {
        opacity: 1;
    }
}

.honormagicv2 .section-light.is-active2 .right-wrapper .icon-wrapper {
    opacity: 1;
    transform: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light.is-active2 .right-wrapper .icon-wrapper {
        transform: translateY(100%);
    }
}

.honormagicv2 .section-light .sticky-container>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    direction: ltr;
    text-align: right;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .sticky-container>div {
        flex-direction: column-reverse;
    }
}

.honormagicv2 .section-light .left-wrapper {
    position: relative;
    z-index: 2;
    width: 30.78125vw;
    margin-right: -5.46875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .left-wrapper {
        width: 100%;
        height: 50%;
        margin-right: 0;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
}

.honormagicv2 .section-light .left-wrapper .copy-wrapper {
    width: 22.1875vw;
    margin: 4.6875vw 0;
    opacity: 0;
    transform: translateY(0.5208333333vw);
    transition: all 0.5s ease;
    will-change: opacity, transform;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .left-wrapper .copy-wrapper {
        position: absolute;
        top: -6.4vw;
        left: 8vw;
        width: 88vw;
        margin: 0;
        transform: translateY(calc(-100% + 2.6666666667vw));
    }
}

.honormagicv2 .section-light .left-wrapper .copy-wrapper p {
    opacity: 0.6;
    margin-top: 1.5625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .left-wrapper .copy-wrapper p {
        margin-top: 4vw;
    }
}

.honormagicv2 .section-light .left-wrapper .pic {
    width: 30.78125vw;
    height: 21.71875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .left-wrapper .pic {
        width: 52vw;
        height: 36.8820224719vw;
        opacity: 0;
        transition: opacity 0.5s ease;
        will-change: opacity;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-light .left-wrapper .pic {
        width: 69.3333333333vw;
        height: 49.1760299625vw;
    }
}

.honormagicv2 .section-light .right-wrapper {
    width: 37.0833333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .right-wrapper {
        width: 100%;
        height: 50%;
        margin-right: 0;
    }
}

.honormagicv2 .section-light .right-wrapper .pic {
    width: 37.0833333333vw;
    height: 26.3020833333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .right-wrapper .pic {
        width: 52vw;
        height: 36.8820224719vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-light .right-wrapper .pic {
        width: 69.3333333333vw;
        height: 49.1760299625vw;
    }
}

.honormagicv2 .section-light .right-wrapper .icon-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 3.125vw 0;
    opacity: 0;
    transform: translateY(0.5208333333vw);
    transition: all 0.5s ease;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .right-wrapper .icon-wrapper {
        position: absolute;
        bottom: -0.2666666667vw;
        left: 8vw;
        width: 84vw;
        margin: 0;
        transform: translateY(calc(100% + 2.6666666667vw));
    }
}

.honormagicv2 .section-light .right-wrapper .icon-wrapper p.fs-18 {
    direction: rtl;
}

.honormagicv2 .section-light .right-wrapper .icon-wrapper .fs-18 {
    width: 75%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .right-wrapper .icon-wrapper .fs-18 {
        width: 100%;
    }
}

.honormagicv2 .section-light .right-wrapper .icon-wrapper .icon {
    width: 7.2395833333vw;
    height: 4.6875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .right-wrapper .icon-wrapper .icon {
        width: 24.5333333333vw;
        height: 16vw;
    }
}

.honormagicv2 .section-light .right-wrapper .icon-wrapper .icon p {
    opacity: 0.6;
    margin-top: 0.5208333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-light .right-wrapper .icon-wrapper .icon p {
        font-size: 2.9333333333vw;
        margin-top: 2.6666666667vw;
    }
}

.honormagicv2 .section-light .right-wrapper .icon-wrapper .icon2,
.honormagicv2 .section-light .right-wrapper .icon-wrapper .icon3 {
    margin-left: 2.6041666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-light .right-wrapper .icon-wrapper .icon2,
    .honormagicv2 .section-light .right-wrapper .icon-wrapper .icon3 {
        margin-left: 4.8vw;
    }
}

.honormagicv2 .section-glass {
    height: 390vh;
    margin-top: -220vh;
    color: #fff;
    z-index: 6;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass {
        margin-top: -100vh;
        height: 350vh;
        z-index: 3;
        transition: opacity 0.5s ease;
        will-change: opacity;
    }

    .honormagicv2 .section-glass.is-in .glass-title {
        transform: translateY(-50%);
        opacity: 1;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) and (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass.is-in .glass-title {
        transform: translateY(calc(-100% - 37.3333333333vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) and (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-glass.is-in .glass-title {
        transform: translateY(calc(-100% - 53.3333333333vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass.is-in .glass-copy {
        transform: translateY(-50%);
        opacity: 1;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) and (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass.is-in .glass-copy {
        transform: translateY(calc(-100% - 16vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) and (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-glass.is-in .glass-copy {
        transform: translateY(calc(-100% - 32vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass.is-out {
        opacity: 0;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass #trigger-glass-1 {
        position: absolute;
        top: 80vh;
    }
}

.honormagicv2 .section-glass.is-active1 .glass-title {
    transform: translateY(-50%);
    opacity: 1;
}

.honormagicv2 .section-glass.is-active1 .glass-copy {
    transform: translateY(-50%);
    opacity: 1;
}

.honormagicv2 .section-glass .sticky-container>div {
    position: relative;
    width: 100%;
    height: 100%;
}

.honormagicv2 .section-glass .bg {
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-glass .bg img {
        -o-object-fit: contain;
        object-fit: contain;
    }
}

.honormagicv2 .section-glass .glass-title {
    position: absolute;
    top: 50%;
    left: 6.3333333333vw;
    width: 23.4375vw;
    transform: translateY(calc(-50% + 0.5208333333vw));
    z-index: 2;
    opacity: 0;
    transition: all 0.5s ease;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass .glass-title {
        left: 8vw;
        width: 84vw;
        text-align: center;
        transform: translateY(calc(-100% - 50.6666666667vw));
    }
}

.honormagicv2 .section-glass .glass-copy {
    position: absolute;
    top: 50%;
    left: 77vw;
    transform: translateY(calc(-50% + 0.5208333333vw));
    z-index: 2;
    background: linear-gradient(180deg, #fff 15%, transparent);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transition: all 0.5s ease;
    will-change: opacity, transform;
    width: 18.2291666667vw;
    font-size: 1.9791666667vw;
    line-height: 1.1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass .glass-copy {
        left: 8vw;
        width: 84vw;
        text-align: center;
        transform: translateY(calc(-100% - 29.3333333333vw));
        font-size: 6.4vw;
    }
}

.honormagicv2 .section-glass .glass-copy .text-big {
    font-size: 5.2083333333vw;
    line-height: 1.2;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass .glass-copy .text-big {
        font-size: 10.6666666667vw;
    }
}

.honormagicv2 .section-glass .glass-copy .text-small {
    font-size: 1.9791666667vw;
    background: linear-gradient(180deg, #fff, transparent 85%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    line-height: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-glass .glass-copy .text-small {
        font-size: 4.8vw;
    }
}

.honormagicv2 .section-screen {
    height: 370vh;
    margin-top: -220vh;
    z-index: 7;
    color: #000;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen {
        height: 280vh;
        margin-top: -200vh;
        z-index: 4;
        opacity: 0;
        transition: opacity 0.5s ease;
        will-change: opacity;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-in {
        opacity: 1;
        transition-delay: 0.5s;
    }
}

.honormagicv2 .section-screen.is-in .fold {
    transform: translate(calc(-50% - 20.3125vw), -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-in .fold {
        transform: translate(calc(-100% - 45.3333333333vw), -53.3333333333vw);
    }
}

.honormagicv2 .section-screen.is-in .open {
    transform: translate(calc(-50% + 10.4166666667vw), -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-in .open {
        transform: translate(calc(-50% + 16vw), -53.3333333333vw) scale(1.55);
    }
}

.honormagicv2 .section-screen.is-active-forward-1 .bg {
    transform: translateX(100%);
}

.honormagicv2 .section-screen.is-active-forward-1 .fold {
    transform: translate(-50%, calc(-50% + 10.4166666667vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-active-forward-1 .fold {
        opacity: 1;
        transform: translate(-26.6666666667vw, -33.3333333333vw) scale(0.7);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen.is-active-forward-1 .fold {
        transform: translate(-40vw, -46.6666666667vw) scale(1.14);
    }
}

.honormagicv2 .section-screen.is-active-forward-1 .open {
    transform: translate(calc(-50% + 25vw + 2.6041666667vw), -50%) scale(0.66);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-active-forward-1 .open {
        transform: translate(calc(-50% + 0vw), -40vw) scale(0.7);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen.is-active-forward-1 .open {
        transform: translate(calc(-50% + 16vw), -53.3333333333vw);
    }
}

.honormagicv2 .section-screen.is-active-forward-1 .copy-wrapper.wrapper1 {
    transform: translateY(-50%);
    opacity: 1;
    transition-delay: 0.7s;

}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-active-forward-1 .copy-wrapper.wrapper1 {
        transform: translateY(-54.6666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen.is-active-forward-1 .copy-wrapper.wrapper1 {
        transform: translateY(-80.6666666667vw);
    }
}

.honormagicv2 .section-screen.is-active-reverse-1 .bg {
    transform: translateX(100%);
}

.honormagicv2 .section-screen.is-active-reverse-1 .fold {
    transform: translate(-50%, calc(-50% + 10.4166666667vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-active-reverse-1 .fold {
        opacity: 1;
        transform: translate(-26.6666666667vw, -33.3333333333vw) scale(0.7);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen.is-active-reverse-1 .fold {
        transform: translate(-40vw, -46.6666666667vw) scale(1.14);
    }
}

.honormagicv2 .section-screen.is-active-reverse-1 .open {
    transform: translate(calc(-50% + 25vw + 2.6041666667vw), -50%) scale(0.66);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-active-reverse-1 .open {
        transform: translate(calc(-50% + 0vw), -40vw) scale(0.7);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen.is-active-reverse-1 .open {
        transform: translate(calc(-50% + 16vw), -53.3333333333vw);
    }
}

.honormagicv2 .section-screen.is-active-reverse-1 .copy-wrapper.wrapper1 {
    transform: translateY(-50%);
    opacity: 1;
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen.is-active-reverse-1 .copy-wrapper.wrapper1 {
        transform: translateY(-54.6666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen.is-active-reverse-1 .copy-wrapper.wrapper1 {
        transform: translateY(-80.6666666667vw);
    }
}

.honormagicv2 .section-screen.is-active-forward-2 .bg,
.honormagicv2 .section-screen.is-active-reverse-2 .bg {
    transform: none;
}

.honormagicv2 .section-screen.is-active-forward-2 .fold,
.honormagicv2 .section-screen.is-active-reverse-2 .fold {
    transform: translate(calc(-50% - 27.6041666667vw), calc(-50% - 3.28125vw)) scale(0.81);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-screen.is-active-forward-2 .fold,
    .honormagicv2 .section-screen.is-active-reverse-2 .fold {
        opacity: 1;
        transform: translate(-34.6666666667vw, -40vw) scale(0.7);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {

    .honormagicv2 .section-screen.is-active-forward-2 .fold,
    .honormagicv2 .section-screen.is-active-reverse-2 .fold {
        transform: translate(-45.3333333333vw, -53.3333333333vw);
    }
}

.honormagicv2 .section-screen.is-active-forward-2 .open,
.honormagicv2 .section-screen.is-active-reverse-2 .open {
    transform: translate(calc(-50% + 1.8229166667vw), calc(-50% + 0.5208333333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-screen.is-active-forward-2 .open,
    .honormagicv2 .section-screen.is-active-reverse-2 .open {
        transform: translate(calc(-50% + 0vw), -40vw) scale(0.7);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {

    .honormagicv2 .section-screen.is-active-forward-2 .open,
    .honormagicv2 .section-screen.is-active-reverse-2 .open {
        transform: translate(calc(-50% + 16vw), -53.3333333333vw);
    }
}

.honormagicv2 .section-screen.is-active-forward-2 .copy-wrapper.wrapper2,
.honormagicv2 .section-screen.is-active-reverse-2 .copy-wrapper.wrapper2 {
    transform: translateY(-50%);
    opacity: 1;
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-screen.is-active-forward-2 .copy-wrapper.wrapper2,
    .honormagicv2 .section-screen.is-active-reverse-2 .copy-wrapper.wrapper2 {
        transform: translateY(-58.6666666667vw);
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {

    .honormagicv2 .section-screen.is-active-forward-2 .copy-wrapper.wrapper2,
    .honormagicv2 .section-screen.is-active-reverse-2 .copy-wrapper.wrapper2 {
        transform: translateY(-82.6666666667vw);
    }
}

.honormagicv2 .section-screen #trigger-screen-2 {
    position: absolute;
    top: 70vh;
}

.honormagicv2 .section-screen #trigger-screen-3 {
    position: absolute;
    top: 150vh;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen #trigger-screen-3 {
        top: 100vh;
    }
}

.honormagicv2 .section-screen .sticky-container>div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    direction: ltr;
}

.honormagicv2 .section-screen .bg {
    position: relative;
    width: 50%;
    height: 100%;
    transform: translateX(200%);
    transition: transform 0.7s ease;
    will-change: transform;
    overflow: hidden;
}

.honormagicv2 .section-screen .bg img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 59.6354166667vw;
}

.honormagicv2 .section-screen .fold {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19vw;
    height: 40.3vw;
    transform: translate(calc(-50% - 20.3125vw), calc(-50vh - 100%));
    transition: transform 0.7s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .fold {
        width: 29.3333333333vw;
        height: 62.2175438596vw;
        transform: translate(calc(-100% - 45.3333333333vw), -46.6666666667vw) scale(0.9);
        transform-origin: 0 0;
        opacity: 0;
        transition: transform 0.7s ease, opacity 0.3s ease;
        will-change: transform, opacity;
        z-index: 2;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen .fold {
        transform: translate(calc(-100% - 45.3333333333vw), -46.6666666667vw) scale(1.14);
    }
}

.honormagicv2 .section-screen .open {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 37.6vw;
    height: 40.3vw;
    transform: translate(calc(-50% + 10.4166666667vw), 50vh);
    transition: transform 0.7s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .open {
        width: 57.8666666667vw;
        height: 62.0219858156vw;
        transform: translate(calc(-50% + 16vw), -53.3333333333vw) scale(1.55);
        transform-origin: 100% 0;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper1 {
    position: absolute;
    left: 12.5vw;
    top: 50%;
    transform: translateY(calc(-50% + 0.5208333333vw));
    width: 19.7916666667vw;
    opacity: 0;
    transition: all 0.3s ease;
    will-change: opacity, transform;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper1 {
        left: 12vw;
        width: 76vw;
        transform: translateY(-56vw);
    }

    .honormagicv2 .section-screen .copy-wrapper.wrapper1 h2 {
        text-align: center;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper1 {
        transform: translateY(-80vw);
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper1 .subtitle1 {
    margin-top: 3.125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper1 .subtitle1 {
        margin-top: 58.6666666667vw;
        font-size: 3.7333333333vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper1 .subtitle1 {
        margin-top: 89.3333333333vw;
        font-size: 5.3333333333vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper1 .subtitle2 {
    margin-top: 2.0833333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper1 .subtitle2 {
        margin-top: 4vw;
        font-size: 3.7333333333vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper1 .subtitle2 {
        margin-top: 2.9333333333vw;
        font-size: 5.3333333333vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper1 p {
    color: #707070;
    margin-top: 0.78125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper1 p {
        margin-top: 2.6666666667vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper1 p {
        font-size: 3vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 {
    position: absolute;
    left: 74.7395833333vw;
    top: 50%;
    transform: translateY(calc(-50% + 0.5208333333vw));
    width: 20.8333333333vw;
    opacity: 0;
    transition: all 0.3s ease;
    will-change: opacity, transform;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 {
        left: 5.3333333333vw;
        width: 89.3333333333vw;
        transform: translateY(-80vw);
    }

    .honormagicv2 .section-screen .copy-wrapper.wrapper2 h2 {
        text-align: center;
        font-size: 7.3vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 {
        transform: translateY(-80vw);
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 .line {
    width: 100%;
    height: 1px;
    border-top: 1px solid #d0d0d0;
    margin-top: 3.125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 .line {
        height: 0;
        border-top: none;
        margin-top: 48vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 .line {
        margin-top: 85.3333333333vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 p {
    display: flex;
    align-items: center;
    margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 p {
        margin-top: 2.1333333333vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 p {
        margin-top: 4.2666666667vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 p img {
    width: 2.34375vw;
    height: 2.0833333333vw;
    margin-left: 1.4583333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 p img {
        width: 6.1333333333vw;
        height: 5.4518518519vw;
        margin-right: 4.5333333333vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 4.6875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper {
        margin-top: 6.6666666667vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon {
    margin-right: 2.0833333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon {
        margin-right: 14.1333333333vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon1 {
    width: 5.15625vw;
    height: 2.2395833333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon1 {
        width: 18.9333333333vw;
        height: 8.2235690236vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon2 {
    width: 5.2083333333vw;
    height: 1.7708333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon2 {
        width: 19.2vw;
        height: 6.528vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon3 {
    width: 4.8958333333vw;
    height: 2.0833333333vw;
    margin-top: 1.5625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon3 {
        width: 18.1333333333vw;
        height: 7.7163120567vw;
        margin-top: 4.5333333333vw;
    }
}

.honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon4 {
    width: 8.1770833333vw;
    height: 1.7708333333vw;
    margin-top: 1.5625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-screen .copy-wrapper.wrapper2 .icon-wrapper .icon4 {
        width: 30.4vw;
        height: 6.5834394904vw;
        margin-top: 4.5333333333vw;
    }
}

.honormagicv2 .section-cmf {
    position: relative;
    height: 470vh;
    margin-top: -100vh;
    z-index: 6;
    color: #000;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf {
        z-index: 3;
    }
}

.honormagicv2 .section-cmf #trigger-cmf-1 {
    position: absolute;
    top: 70vh;
}

.honormagicv2 .section-cmf #trigger-cmf-2 {
    position: absolute;
    top: 120vh;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf #trigger-cmf-2 {
        top: 220vh;
    }
}

.honormagicv2 .section-cmf #trigger-cmf-3 {
    position: absolute;
    top: 270vh;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf #trigger-cmf-3 {
        top: 100%;
    }
}

.honormagicv2 .section-cmf.is-active-forward-1 .cmf-title,
.honormagicv2 .section-cmf.is-active-reverse-1 .cmf-title {
    opacity: 1;
    transform: translateY(-50%);
}

.honormagicv2 .section-cmf.is-active-forward-2 .left-wrapper,
.honormagicv2 .section-cmf.is-active-forward-2 .right-wrapper,
.honormagicv2 .section-cmf.is-active-reverse-2 .left-wrapper,
.honormagicv2 .section-cmf.is-active-reverse-2 .right-wrapper {
    transform: none;
}

.honormagicv2 .section-cmf.is-active-forward-2 .cmf-title,
.honormagicv2 .section-cmf.is-active-reverse-2 .cmf-title {
    opacity: 0;
    transform: translateY(-50%);
}

.honormagicv2 .section-cmf.is-active-forward-3 .left-wrapper,
.honormagicv2 .section-cmf.is-active-forward-3 .right-wrapper {
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-cmf.is-active-reverse-3 .left-wrapper,
.honormagicv2 .section-cmf.is-active-reverse-3 .right-wrapper {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-active-forward-4 .left-wrapper,
.honormagicv2 .section-cmf.is-active-reverse-4 .left-wrapper {
    opacity: 1;
    transform: translateY(-85%);
}

.honormagicv2 .section-cmf.is-active-forward-4 .right-wrapper,
.honormagicv2 .section-cmf.is-active-reverse-4 .right-wrapper {
    opacity: 1;
    transform: translateY(-85%);
}

.honormagicv2 .section-cmf.is-out {
    pointer-events: none;
}

.honormagicv2 .section-cmf.is-out .left-wrapper {
    transform: translateX(-100%);
}

.honormagicv2 .section-cmf.is-out .right-wrapper {
    transform: translateX(100%);
}

.honormagicv2 .section-cmf.is-out .cmf-bg {
    opacity: 0;
    transition-delay: 0s;
}

.honormagicv2 .section-cmf.is-color-purple .left-wrapper .copy-wrapper .copy[data-color=purple] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-purple .left-wrapper .id-wrapper .id[data-color=purple] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-purple .left-wrapper .button-wrapper button[data-color=purple] {
    width: 1.9791666667vw;
    height: 1.9791666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf.is-color-purple .left-wrapper .button-wrapper button[data-color=purple] {
        width: 5.3333333333vw;
        height: 5.3333333333vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf.is-color-purple .left-wrapper .button-wrapper button[data-color=purple] {
        width: 2.96875vw;
        height: 2.96875vw;
    }
}

.honormagicv2 .section-cmf.is-color-purple .left-wrapper .button-wrapper button[data-color=purple]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.3958333333vw;
    height: 2.3958333333vw;
    border-radius: 50%;
    border: 1px solid #7e748f;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf.is-color-purple .left-wrapper .button-wrapper button[data-color=purple]::after {
        width: 7.2vw;
        height: 7.2vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf.is-color-purple .left-wrapper .button-wrapper button[data-color=purple]::after {
        width: 3.59375vw;
        height: 3.59375vw;
    }
}

.honormagicv2 .section-cmf.is-color-purple .right-wrapper .bg-wrapper .bg[data-color=purple] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-purple .right-wrapper .swiper-cmf-main {
    z-index: 2;
}

.honormagicv2 .section-cmf.is-color-purple .right-wrapper .swiper-slide picture[data-color=purple],
.honormagicv2 .section-cmf.is-color-purple .right-wrapper .swiper-slide img[data-color=purple],
.honormagicv2 .section-cmf.is-color-purple .right-wrapper .swiper-slide video[data-color=purple],
.honormagicv2 .section-cmf.is-color-purple .right-wrapper .swiper-slide .playBtn[data-color=purple] {
    opacity: 1;
    z-index: 2;
}

.honormagicv2 .section-cmf.is-color-gold .left-wrapper .copy-wrapper .copy[data-color=gold] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-gold .left-wrapper .id-wrapper .id[data-color=gold] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-gold .left-wrapper .button-wrapper button[data-color=gold] {
    width: 1.9791666667vw;
    height: 1.9791666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf.is-color-gold .left-wrapper .button-wrapper button[data-color=gold] {
        width: 5.3333333333vw;
        height: 5.3333333333vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf.is-color-gold .left-wrapper .button-wrapper button[data-color=gold] {
        width: 2.96875vw;
        height: 2.96875vw;
    }
}

.honormagicv2 .section-cmf.is-color-gold .left-wrapper .button-wrapper button[data-color=gold]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.3958333333vw;
    height: 2.3958333333vw;
    border-radius: 50%;
    border: 1px solid #ffe7d6;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf.is-color-gold .left-wrapper .button-wrapper button[data-color=gold]::after {
        width: 7.2vw;
        height: 7.2vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf.is-color-gold .left-wrapper .button-wrapper button[data-color=gold]::after {
        width: 3.59375vw;
        height: 3.59375vw;
    }
}

.honormagicv2 .section-cmf.is-color-gold .right-wrapper .bg-wrapper .bg[data-color=gold] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-gold .right-wrapper .swiper-slide picture[data-color=gold],
.honormagicv2 .section-cmf.is-color-gold .right-wrapper .swiper-slide img[data-color=gold],
.honormagicv2 .section-cmf.is-color-gold .right-wrapper .swiper-slide video[data-color=gold],
.honormagicv2 .section-cmf.is-color-gold .right-wrapper .swiper-slide .playBtn[data-color=gold] {
    opacity: 1;
    z-index: 2;
}

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

.honormagicv2 .section-cmf.is-color-black .left-wrapper .id-wrapper .id[data-color=black] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-black .left-wrapper .button-wrapper button[data-color=black] {
    width: 1.9791666667vw;
    height: 1.9791666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf.is-color-black .left-wrapper .button-wrapper button[data-color=black] {
        width: 5.3333333333vw;
        height: 5.3333333333vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf.is-color-black .left-wrapper .button-wrapper button[data-color=black] {
        width: 2.96875vw;
        height: 2.96875vw;
    }
}

.honormagicv2 .section-cmf.is-color-black .left-wrapper .button-wrapper button[data-color=black]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.3958333333vw;
    height: 2.3958333333vw;
    border-radius: 50%;
    border: 1px solid #383a3e;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf.is-color-black .left-wrapper .button-wrapper button[data-color=black]::after {
        width: 7.2vw;
        height: 7.2vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf.is-color-black .left-wrapper .button-wrapper button[data-color=black]::after {
        width: 3.59375vw;
        height: 3.59375vw;
    }
}

.honormagicv2 .section-cmf.is-color-black .right-wrapper .bg-wrapper .bg[data-color=black] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-black .right-wrapper .swiper-slide picture[data-color=black],
.honormagicv2 .section-cmf.is-color-black .right-wrapper .swiper-slide video[data-color=black],
.honormagicv2 .section-cmf.is-color-black .right-wrapper .swiper-slide .playBtn[data-color=black],
.honormagicv2 .section-cmf.is-color-black .right-wrapper .swiper-slide img[data-color=black] {
    opacity: 1;
    z-index: 2;
}


.honormagicv2 .section-cmf.is-color-skin .left-wrapper .copy-wrapper .copy[data-color=skin] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-skin .left-wrapper .id-wrapper .id[data-color=skin] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-skin .left-wrapper .button-wrapper button[data-color=skin] {
    width: 1.9791666667vw;
    height: 1.9791666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf.is-color-skin .left-wrapper .button-wrapper button[data-color=skin] {
        width: 5.3333333333vw;
        height: 5.3333333333vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf.is-color-skin .left-wrapper .button-wrapper button[data-color=skin] {
        width: 2.96875vw;
        height: 2.96875vw;
    }
}

.honormagicv2 .section-cmf.is-color-skin .left-wrapper .button-wrapper button[data-color=skin]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.3958333333vw;
    height: 2.3958333333vw;
    border-radius: 50%;
    border: 1px solid #222327;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf.is-color-skin .left-wrapper .button-wrapper button[data-color=skin]::after {
        width: 7.2vw;
        height: 7.2vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf.is-color-skin .left-wrapper .button-wrapper button[data-color=skin]::after {
        width: 3.59375vw;
        height: 3.59375vw;
    }
}

.honormagicv2 .section-cmf.is-color-skin .right-wrapper .bg-wrapper .bg[data-color=skin] {
    opacity: 1;
}

.honormagicv2 .section-cmf.is-color-skin .right-wrapper .swiper-slide picture[data-color=skin],
.honormagicv2 .section-cmf.is-color-skin .right-wrapper .swiper-slide img[data-color=skin],
.honormagicv2 .section-cmf.is-color-skin .right-wrapper .swiper-slide video[data-color=skin],
.honormagicv2 .section-cmf.is-color-skin .right-wrapper .swiper-slide .playBtn[data-color=skin] {
    opacity: 1;
    z-index: 2;
}

.honormagicv2 .section-cmf .sticky-container {
    display: flex;
    direction: ltr;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .sticky-container {
        top: 52px;
        height: calc(100vh - 52px);
    }
}

.honormagicv2 .section-cmf .cmf-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0s ease 1s;
    will-change: opacity;
}

.honormagicv2 .section-cmf .cmf-title {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    transform: translateY(calc(-50% + 1.5625vw));
    opacity: 0;
    transition: all 0.5s ease;
    will-change: opacity, transform;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .cmf-title {
        font-size: 11vw;
    }
}

.honormagicv2 .section-cmf .left-wrapper {
    position: relative;
    width: 50%;
    height: 100%;
    background: #eee;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .left-wrapper {
        width: 100%;
        height: 90%;
        transform: none;
        opacity: 0;
        transition: all 0.5s ease;
        will-change: transform, opacity;
    }
}

.honormagicv2 .section-cmf .left-wrapper .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.honormagicv2 .section-cmf .left-wrapper .copy-wrapper {
    position: relative;
    text-align: center;
    direction: rtl;
}

.honormagicv2 .section-cmf .left-wrapper .copy-wrapper .copy {
    transition: opacity 0.3s ease;
    opacity: 0;
}

.honormagicv2 .section-cmf .left-wrapper .copy-wrapper .copy2,
.honormagicv2 .section-cmf .left-wrapper .copy-wrapper .copy3,
.honormagicv2 .section-cmf .left-wrapper .copy-wrapper .copy4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.honormagicv2 .section-cmf .left-wrapper .copy-wrapper p {
    margin-top: 0.78125vw;
}

.honormagicv2 .section-cmf .left-wrapper .id-wrapper {
    position: relative;
    margin: 2.0833333333vw 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .left-wrapper .id-wrapper {
        margin: 9.3333333333vw 0;
    }
}

.honormagicv2 .section-cmf .left-wrapper .id-wrapper .id {
    transition: opacity 0.3s ease;
    width: 20.8333333333vw;
    height: 32.2395833333vw;
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .left-wrapper .id-wrapper .id {
        width: 48vw;
        height: 74.28vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-cmf .left-wrapper .id-wrapper .id {
        width: 64vw;
        height: 99.04vw;
    }
}

.honormagicv2 .section-cmf .left-wrapper .id-wrapper .id2,
.honormagicv2 .section-cmf .left-wrapper .id-wrapper .id3,
.honormagicv2 .section-cmf .left-wrapper .id-wrapper .id4 {
    position: absolute;
    top: 0;
    left: 0;
}

.honormagicv2 .section-cmf .left-wrapper .button-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -2.6041666667vw;
    z-index: 4;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .left-wrapper .button-wrapper {
        position: absolute;
        top: calc(85% + 5.3333333333vw);
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
    }
}

.honormagicv2 .section-cmf .left-wrapper .button-wrapper button {
    position: relative;
    width: 1.0416666667vw;
    height: 1.0416666667vw;
    border-radius: 50%;
    margin: 0 0.4166666667vw;
    will-change: width, height;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .left-wrapper .button-wrapper button {
        width: 5.3333333333vw;
        height: 5.3333333333vw;
        margin: 0 2.1333333333vw;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-cmf .left-wrapper .button-wrapper button {
        width: 1.5625vw;
        height: 1.5625vw;
        margin: 0 1.0416666667vw;
    }
}

.honormagicv2 .section-cmf .left-wrapper .button-wrapper button[data-color=purple] {
    background: linear-gradient(180deg, #b2a8ca 0%, #494259 100%);
}

.honormagicv2 .section-cmf .left-wrapper .button-wrapper button[data-color=gold] {
    background: linear-gradient(180deg, rgb(252, 244, 231), rgb(255, 230, 213), rgb(251, 219, 217), rgb(221, 216, 233));
}

.honormagicv2 .section-cmf .left-wrapper .button-wrapper button[data-color=black] {
    background: linear-gradient(180deg, rgb(89, 92, 99), rgb(25, 26, 28));
}

.honormagicv2 .section-cmf .left-wrapper .button-wrapper button[data-color=skin] {
    background: linear-gradient(180deg, rgb(39, 40, 44), rgb(30, 31, 35));
}

.honormagicv2 .section-cmf .right-wrapper {
    position: relative;
    width: 50%;
    height: 100%;
    background: #ddd;
    transform: translateX(100%);
    transition: transform 0.5s ease;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper {
        position: absolute;
        top: 90%;
        left: 0;
        width: 100%;
        height: 90%;
        transform: translateY(0);
        opacity: 0;
        transition: all 0.5s ease;
        will-change: transform, opacity;
    }
}

.honormagicv2 .section-cmf .right-wrapper .bg-wrapper .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

.honormagicv2 .section-cmf .right-wrapper .bg-wrapper .bg[data-color=gold],
.honormagicv2 .section-cmf .right-wrapper .bg-wrapper .bg[data-color=black],
.honormagicv2 .section-cmf .right-wrapper .bg-wrapper .bg[data-color=skin] {
    opacity: 0;
}

.honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main {
    position: relative;
    width: 100%;
    height: 35.0246314681vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main {
        height: 92.5333333333vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main .slide1 {
    width: 20.4166666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main .slide1 {
        width: 45.0666666667vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main .slide1 picture {
    width: 20.4166666667vw;
    height: 26.9447983015vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main .slide1 picture {
        width: 45.0666666667vw;
        height: 59.4666666667vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main .slide2 {
    width: 10.9375vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main .slide2 {
        width: 26.1333333333vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main .slide2 picture {
    width: 10.9375vw;
    height: 27.6041666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .swiper-cmf-main .slide2 picture {
        width: 26.1333333333vw;
        height: 65.8666666667vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .swiper-cmf-other {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 35.0246314681vw;
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .swiper-cmf-other {
        height: 92.5333333333vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.honormagicv2 .section-cmf .right-wrapper .slide1 {
    width: 29.6875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .slide1 {
        width: 66.6666666667vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .slide1 picture {
    width: 29.6875vw;
    height: 32.4204648014vw;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .slide1 picture {
        width: 66.6666666667vw;
        height: 72.8vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .slide1 picture[data-color=gold],
.honormagicv2 .section-cmf .right-wrapper .slide1 picture[data-color=black],
.honormagicv2 .section-cmf .right-wrapper .slide1 picture[data-color=skin] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.honormagicv2 .section-cmf .right-wrapper .slide2 {
    width: 24.21875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .slide2 {
        width: 58.6666666667vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .slide2 picture {
    width: 24.21875vw;
    height: 27.7083333333vw;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .slide2 picture {
        width: 58.6666666667vw;
        height: 67.1507692308vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .slide2 picture[data-color=gold],
.honormagicv2 .section-cmf .right-wrapper .slide2 picture[data-color=black],
.honormagicv2 .section-cmf .right-wrapper .slide2 picture[data-color=skin] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.honormagicv2 .section-cmf .right-wrapper .slide3 {
    position: relative;
    width: 37.9166666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .slide3 {
        width: 71.2vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .slide3>video,
.honormagicv2 .section-cmf .right-wrapper .slide3>img {
    width: 37.9166666667vw;
    height: 25.78125vw;
    border-radius: 1.25vw;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-cmf .right-wrapper .slide3>video,
    .honormagicv2 .section-cmf .right-wrapper .slide3>img {
        width: 71.2vw;
        height: 50.1333333333vw;
        border-radius: 4.2666666667vw;

    }
}

.honormagicv2 .section-cmf .right-wrapper .slide3>video[data-color=gold],
.honormagicv2 .section-cmf .right-wrapper .slide3>video[data-color=black],
.honormagicv2 .section-cmf .right-wrapper .slide3>video[data-color=skin],
.honormagicv2 .section-cmf .right-wrapper .slide3>img[data-color=gold],
.honormagicv2 .section-cmf .right-wrapper .slide3>img[data-color=black],
.honormagicv2 .section-cmf .right-wrapper .slide3>img[data-color=skin] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.honormagicv2 .section-cmf .right-wrapper .slide3 .playBtn {
    position: absolute;
    bottom: 1.0416666667vw;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .slide3 .playBtn {
        bottom: 5.3333333333vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .slide3 .playBtn img {
    width: 1.5625vw;
    height: 1.5625vw;
    margin-right: 0.46875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .slide3 .playBtn img {
        width: 6.6666666667vw;
        height: 6.6666666667vw;
        margin-right: 1.6vw;
    }
}

.honormagicv2 .section-cmf .right-wrapper .scroll-wrapper {
    display: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-cmf .right-wrapper .scroll-wrapper {
        display: flex;
        align-items: flex-end;
        position: absolute;
        top: -4vw;
        left: 50%;
    }

    .honormagicv2 .section-cmf .right-wrapper .scroll-wrapper img {
        width: 2.4vw;
        height: 16vw;
    }

    .honormagicv2 .section-cmf .right-wrapper .scroll-wrapper p {
        font-size: 3.2vw;
        margin-left: 2.6666666667vw;
        margin-bottom: 1.3333333333vw;
    }
}

.honormagicv2 .section-ultimate {
    height: 450vh;
    margin-top: -400vh;
    z-index: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-ultimate {
        z-index: 2;
        height: 650vh;
        transition: opacity 0.3s ease;
    }
}

.honormagicv2 .section-ultimate.is-in .copy-wrapper {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition-delay: 0.5s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-ultimate.is-in .copy-wrapper {
        transform: translateY(calc(-100% - 26.6666666667vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-ultimate.is-in .copy-wrapper {
        transform: translateY(calc(-100% - 45.3333333333vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-ultimate.is-out {
        opacity: 0;
    }
}

.honormagicv2 .section-ultimate .bg {
    width: 100%;
    height: 100%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) and (min-width: 501px) {
    .honormagicv2 .section-ultimate .bg {
        height: 120%;
    }
}

@media (min-aspect-ratio: 661/758) and (max-width: 800px) {
    .honormagicv2 .section-ultimate .bg img {
        -o-object-fit: contain;
        object-fit: contain;
    }
}

.honormagicv2 .section-ultimate .copy-wrapper {
    position: absolute;
    top: 50%;
    left: 23.6979166667vw;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 0.5208333333vw));
    transition: all 0.3s ease;
    will-change: opacity, transform;
    text-align: center;
    z-index: 2;
    color: #fff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-ultimate .copy-wrapper {
        width: 84vw;
        left: 8vw;
        transform: translateY(calc(-100% - 42.6666666667vw));
    }
}

.honormagicv2 .section-ultimate .copy-wrapper img {
    width: 28.6458333333vw;
    height: 2.1052055993vw;
    margin: 0 auto;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-ultimate .copy-wrapper img {
        width: 83.2vw;
        height: 6.1144356955vw;
    }
}

.honormagicv2 .section-ultimate .copy-wrapper h3 {
    margin: 2.6041666667vw 0 1.0416666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-ultimate .copy-wrapper h3 {
        font-size: 4.8vw;
        margin: 5.3333333333vw 0 2.6666666667vw;
    }
}

.honormagicv2 .section-ultimate .copy-wrapper p {
    opacity: 0.6;
}

.honormagicv2 .section-ultimate .playBtn {
    margin: 1.5625vw auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-ultimate .playBtn {
        margin-top: 5.3333333333vw;
    }
}

.honormagicv2 .section-ultimate .playBtn img {
    width: 1.5625vw;
    height: 1.5625vw;
    margin-left: 0.46875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-ultimate .playBtn img {
        width: 6.6666666667vw;
        height: 6.6666666667vw;
        margin-left: 1.6vw;
    }
}

.honormagicv2 .section-chip {
    height: 330vh;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip {
        z-index: 1;
        background: #fff;
        opacity: 1;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-chip .chip-wrapper h3,
    .honormagicv2 .section-chip .chip-wrapper p {
        direction: rtl;
    }
}

.honormagicv2 .section-chip #trigger-chip {
    position: absolute;
    top: 50vh;
}

.honormagicv2 .section-chip.is-active-forward-1 {
    opacity: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip.is-active-forward-1 .chip-wrapper.chip-wrapper1 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-forward-1 .chip-wrapper.chip-wrapper1 .copy-wrapper {
        transform: none;
        opacity: 1;
        transition-delay: 0.5s;
    }

    .honormagicv2 .section-chip.is-active-forward-1 .chip-wrapper.chip-wrapper2 img {
        transform: none;
        opacity: 1;
        transition-delay: 1s;
    }

    .honormagicv2 .section-chip.is-active-forward-1 .chip-wrapper.chip-wrapper2 .copy-wrapper {
        transform: none;
        opacity: 1;
        transition-delay: 1.5s;
    }
}

.honormagicv2 .section-chip.is-active-forward-1 .chip-mask {
    transform: rotate(0deg) scale(1);
}

.honormagicv2 .section-chip.is-active-forward-1 .chip-text-container {
    transform: translate(-9.5vw, -2vw);
    opacity: 1;
}

.honormagicv2 .section-chip.is-active-forward-1 .chip-text-container .chip-text-wrapper.wrapper1 {
    opacity: 1;
    transform: none;
}

.honormagicv2 .section-chip.is-active-reverse-1 {
    opacity: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip.is-active-reverse-1 .chip-wrapper.chip-wrapper1 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-reverse-1 .chip-wrapper.chip-wrapper1 .copy-wrapper {
        transform: none;
        opacity: 1;
        transition-delay: 0.5s;
    }

    .honormagicv2 .section-chip.is-active-reverse-1 .chip-wrapper.chip-wrapper2 img {
        transform: none;
        opacity: 1;
        transition-delay: 1s;
    }

    .honormagicv2 .section-chip.is-active-reverse-1 .chip-wrapper.chip-wrapper2 .copy-wrapper {
        transform: none;
        opacity: 1;
        transition-delay: 1.5s;
    }
}

.honormagicv2 .section-chip.is-active-reverse-1 .chip-mask {
    transform: rotate(0deg) scale(1);
}

.honormagicv2 .section-chip.is-active-reverse-1 .chip-text-container {
    transform: translate(-9.5vw, -2vw);
    opacity: 1;
}

.honormagicv2 .section-chip.is-active-reverse-1 .chip-text-container .chip-text-wrapper.wrapper1 {
    transition-delay: 0.3s;
    opacity: 1;
    transform: none;
}

.honormagicv2 .section-chip.is-active-forward-2 {
    opacity: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip.is-active-forward-2 .chip-wrapper.chip-wrapper1 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-forward-2 .chip-wrapper.chip-wrapper1 .copy-wrapper {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-forward-2 .chip-wrapper.chip-wrapper2 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-forward-2 .chip-wrapper.chip-wrapper2 .copy-wrapper {
        transform: none;
        opacity: 1;
    }
}

.honormagicv2 .section-chip.is-active-forward-2 .chip-mask {
    transform: rotate(0deg) scale(1);
}

.honormagicv2 .section-chip.is-active-forward-2 .chip-wrapper1 {
    transform: translate(-100%, 0);
}

.honormagicv2 .section-chip.is-active-forward-2 .chip-wrapper2 {
    transform: translate(0%, 0);
}

.honormagicv2 .section-chip.is-active-forward-2 .chip-text-container {
    transform: translate(-9.5vw, -2vw);
    opacity: 1;
}

.honormagicv2 .section-chip.is-active-forward-2 .chip-text-container .chip-text-wrapper.wrapper1 {
    opacity: 0;
}

.honormagicv2 .section-chip.is-active-forward-2 .chip-text-container .chip-text-wrapper.wrapper2 {
    transition-delay: 0.3s;
    transform: none;
    opacity: 1;
}

.honormagicv2 .section-chip.is-active-reverse-2 {
    opacity: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip.is-active-reverse-2 .chip-wrapper.chip-wrapper1 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-reverse-2 .chip-wrapper.chip-wrapper1 .copy-wrapper {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-reverse-2 .chip-wrapper.chip-wrapper2 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-reverse-2 .chip-wrapper.chip-wrapper2 .copy-wrapper {
        transform: none;
        opacity: 1;
    }
}

.honormagicv2 .section-chip.is-active-reverse-2 .chip-mask {
    transform: rotate(0deg) scale(1);
}

.honormagicv2 .section-chip.is-active-reverse-2 .chip-wrapper1 {
    transform: translate(-100%, 0);
}

.honormagicv2 .section-chip.is-active-reverse-2 .chip-wrapper2 {
    transform: translate(0%, 0);
}

.honormagicv2 .section-chip.is-active-reverse-2 .chip-text-container {
    transform: translate(-9.5vw, -2vw);
    opacity: 1;
}

.honormagicv2 .section-chip.is-active-reverse-2 .chip-text-container .chip-text-wrapper.wrapper1 {
    opacity: 0;
}

.honormagicv2 .section-chip.is-active-reverse-2 .chip-text-container .chip-text-wrapper.wrapper2 {
    transition-delay: 0.3s;
    transform: none;
    opacity: 1;
}

.honormagicv2 .section-chip.is-active-forward-3 {
    opacity: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper.chip-wrapper1 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper.chip-wrapper1 .copy-wrapper {
        transform: none;
        opacity: 1;
        transition-delay: 0.5s;
    }

    .honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper.chip-wrapper2 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper.chip-wrapper2 .copy-wrapper {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper.chip-wrapper3 img {
        transform: none;
        opacity: 1;
    }

    .honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper.chip-wrapper3 .copy-wrapper {
        transform: none;
        opacity: 1;
        transition-delay: 0.5s;
    }
}

.honormagicv2 .section-chip.is-active-forward-3 .chip-mask {
    transform: rotate(0deg) scale(1);
}

.honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper1 {
    transform: translate(-100%, 0);
}

.honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper2 {
    transform: translate(-100%, 0);
}

.honormagicv2 .section-chip.is-active-forward-3 .chip-wrapper3 {
    transform: translate(0%, 0);
}

.honormagicv2 .section-chip.is-active-forward-3 .chip-text-container {
    transform: translate(-9.5vw, -2vw);
    opacity: 1;
}

.honormagicv2 .section-chip.is-active-forward-3 .chip-text-container .chip-text-wrapper.wrapper1 {
    opacity: 0;
}

.honormagicv2 .section-chip.is-active-forward-3 .chip-text-container .chip-text-wrapper.wrapper2 {
    opacity: 0;
}

.honormagicv2 .section-chip.is-active-forward-3 .chip-text-container .chip-text-wrapper.wrapper3 {
    transform: none;
    opacity: 1;
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip .sticky-container {
        height: auto;
        direction: ltr;
    }
}

.honormagicv2 .section-chip .chip-wrapper {
    height: 100%;
    transition: transform 0.7s linear;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip .chip-wrapper {
        height: auto;
        transform: none !important;
        text-align: right;
    }

    .honormagicv2 .section-chip .chip-wrapper img {
        height: 74.9333333333vw;
        opacity: 0;
        transform: translateY(8vw);
        transition: all 0.5s ease;
        will-change: opacity, transform;
    }
}

.honormagicv2 .section-chip .chip-wrapper-position {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transform: translate(100%, 0);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip .chip-wrapper-position {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }
}

.honormagicv2 .section-chip .chip-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg) scale(4);
    transition: transform 0.7s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-chip .chip-mask {
        display: none;
    }
}

.honormagicv2 .section-chip .chip-mask .block {
    position: absolute;
    background: #fff;
}

.honormagicv2 .section-chip .chip-mask .block1 {
    top: 0;
    left: 0;
    width: 6.1458333333vw;
    height: 100%;
}

.honormagicv2 .section-chip .chip-mask .block2 {
    top: 0;
    left: 0;
    width: 100%;
    height: 4.5833333333vw;
}

.honormagicv2 .section-chip .chip-mask .block3 {
    top: 0;
    right: 0;
    width: 6.1458333333vw;
    height: 100%;
}

.honormagicv2 .section-chip .chip-mask .block4 {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4.5833333333vw;
}

.honormagicv2 .section-chip .chip-text-container {
    position: absolute;
    bottom: 0%;
    right: 0%;
    transform: translate(0.5vw, -2vw);
    width: 30.2083333333vw;
    height: 18.75vw;
    padding: 0 3.3854166667vw;
    background: rgba(25, 26, 28, 0.85);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    color: #fff;
    opacity: 0;
    transition: all 0.7s ease;
    will-change: opacity, transform;
}

.honormagicv2 .section-chip .chip-text-container .chip-text-wrapper {
    width: 23.4375vw;
    height: 100%;
    opacity: 0;
    transform: translateX(0.5208333333vw);
    transition: all 0.3s ease;
    will-change: opacity, transform;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.honormagicv2 .section-chip .chip-text-container .chip-text-wrapper .fs-18 {
    margin-top: 1.6666666667vw;
    opacity: 0.6;
}

.honormagicv2 .section-chip .chip-text-container .chip-text-wrapper.wrapper1 {
    opacity: 1;
}

.honormagicv2 .section-chip .chip-text-container .chip-text-wrapper.wrapper2,
.honormagicv2 .section-chip .chip-text-container .chip-text-wrapper.wrapper3 {
    position: absolute;
    top: 0;
    left: 3.3854166667vw;
    width: 23.4375vw;
}

.honormagicv2 .section-chip .copy-wrapper {
    width: 74.6666666667vw;
    padding: 8vw;
    color: #fff;
    background: rgba(25, 26, 28, 0.85);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    margin-top: -8vw;
    margin-bottom: 13.3333333333vw;
    opacity: 0;
    transform: translateY(8vw);
    transition: all 0.5s ease;
    will-change: opacity, transform;
}

.honormagicv2 .section-chip .copy-wrapper h3 {
    font-size: 5.0666666667vw;
}

.honormagicv2 .section-chip .copy-wrapper p {
    font-size: 3.2vw;
    margin-top: 2.6666666667vw;
    opacity: 0.6;
}

.honormagicv2 .section-chip .copy-wrapper.wrapper1,
.honormagicv2 .section-chip .copy-wrapper.wrapper3 {
    margin-left: 21.3333333333vw;
}

.honormagicv2 .section-chip .copy-wrapper.wrapper2 {
    margin-left: 6.6666666667vw;
}

.honormagicv2 .section-magicos {
    height: 510vh;
    background-color: #000;
}

.honormagicv2 .section-magicos.is-active1 .magicos-setion-wrapper {
    transform: translate(-50%, -60%) scale(0.7);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active1 .magicos-logo-wrapper {
    transform: translate(-50%, 100%) scale(0.556);
}

.honormagicv2 .section-magicos.is-active1 .magicos-text-wrapper {
    transform: translate(-50%, 112%);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active2 .magicos-setion-wrapper {
    transform: translate(-50%, -56%) scale(0.4);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active2 .magicos-logo-wrapper {
    transform: translate(-50%, 100%) scale(0.556);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active2 .magicos-text-wrapper {
    transform: translate(-50%, 112%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active2 .container {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
    transition-delay: 0.1s;
}

.honormagicv2 .section-magicos.is-active2 .container-text-content {
    opacity: 1;
    transform: translate(-65%, 415%);
}

.honormagicv2 .section-magicos.is-active2 .container-text-content .textWrapper:nth-of-type(1) {
    transform: translate(0%, 0%);
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-magicos.is-active2 .progress-bar-hur {
    transform: translate(17vw, 16.6vw);
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-magicos.is-active3 .container {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
    transition-delay: 0.1s;
}

.honormagicv2 .section-magicos.is-active3 .magicos-setion-wrapper {
    transform: translate(-50%, -56%) scale(0.4);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active3 .magicos-logo-wrapper {
    transform: translate(-50%, 100%) scale(0.556);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active3 .magicos-text-wrapper {
    transform: translate(-50%, 112%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active3 .container {
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active3 .container-text-content {
    opacity: 1;
    transform: translate(-65%, 415%);
}

.honormagicv2 .section-magicos.is-active3 .container-text-content .textWrapper:nth-child(1) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active3 .container-text-content .textWrapper:nth-child(2) {
    transform: translate(0%, 0%);
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-magicos.is-active3 .progress-bar-hur {
    transform: translate(17vw, 16.6vw);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active3 .progress-bar-hur .bar-bg-line .bar-move-line {
    transform: translate(-95%, -50%);
}

.honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(1) {
    transform: rotateY(-51deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath3-pc);
    clip-path: url(#magicos-clipPath3-pc);
    filter: brightness(0.6);
}

.honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(2) {
    transform: rotateY(0deg) translateZ(100vw);
    -webkit-clip-path: url(#magicos-clipPath-pc);
    clip-path: url(#magicos-clipPath-pc);
    filter: brightness(1);
}

.honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(3) {
    transform: rotateY(51deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath4-pc);
    clip-path: url(#magicos-clipPath4-pc);
    filter: brightness(0.6);
}

.honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(4) {
    transform: rotateY(158deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.3);
}

.honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(5) {
    transform: rotateY(202deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.3);
}

.honormagicv2 .section-magicos.is-active3 .ball {
    transform: translate(-50%, -50%) rotateY(0deg);
}

.honormagicv2 .section-magicos.is-active4 .container {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
    transition-delay: 0.1s;
}

.honormagicv2 .section-magicos.is-active4 .magicos-setion-wrapper {
    transform: translate(-50%, -56%) scale(0.4);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active4 .magicos-logo-wrapper {
    transform: translate(-50%, 100%) scale(0.556);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active4 .magicos-text-wrapper {
    transform: translate(-50%, 112%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active4 .container {
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active4 .container-text-content {
    opacity: 1;
    transform: translate(-65%, 415%);
}

.honormagicv2 .section-magicos.is-active4 .container-text-content .textWrapper:nth-child(1) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active4 .container-text-content .textWrapper:nth-child(2) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active4 .container-text-content .textWrapper:nth-child(3) {
    transform: translate(0%, 0%);
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-magicos.is-active4 .progress-bar-hur {
    transform: translate(17vw, 16.6vw);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active4 .progress-bar-hur .bar-bg-line .bar-move-line {
    transform: translate(-80%, -50%);
}

.honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(1) {
    transform: rotateY(-158deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.3);
}

.honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(2) {
    transform: rotateY(-51deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath3-pc);
    clip-path: url(#magicos-clipPath3-pc);
    filter: brightness(0.6);
}

.honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(3) {
    transform: rotateY(0deg) translateZ(100vw);
    -webkit-clip-path: url(#magicos-clipPath-pc);
    clip-path: url(#magicos-clipPath-pc);
    filter: brightness(1);
}

.honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(4) {
    transform: rotateY(51deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath4-pc);
    clip-path: url(#magicos-clipPath4-pc);
    filter: brightness(0.6);
}

.honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(5) {
    transform: rotateY(158deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.3);
}

.honormagicv2 .section-magicos.is-active4 .ball {
    transform: translate(-50%, -50%) rotateY(0deg);
}

.honormagicv2 .section-magicos.is-active5 .container {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
    transition-delay: 0.1s;
}

.honormagicv2 .section-magicos.is-active5 .magicos-setion-wrapper {
    transform: translate(-50%, -56%) scale(0.4);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active5 .magicos-logo-wrapper {
    transform: translate(-50%, 100%) scale(0.556);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active5 .magicos-text-wrapper {
    transform: translate(-50%, 112%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active5 .container {
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active5 .container-text-content {
    opacity: 1;
    transform: translate(-65%, 415%);
}

.honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-child(1) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-child(2) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-child(3) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-child(4) {
    transform: translate(0%, 0%);
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-magicos.is-active5 .progress-bar-hur {
    transform: translate(17vw, 16.6vw);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active5 .progress-bar-hur .bar-bg-line .bar-move-line {
    transform: translate(-50%, -50%);
}

.honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(1) {
    transform: rotateY(-202deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.3);
}

.honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(2) {
    transform: rotateY(-158deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath3-pc);
    clip-path: url(#magicos-clipPath3-pc);
    filter: brightness(0.3);
}

.honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(3) {
    transform: rotateY(-51deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath-pc);
    clip-path: url(#magicos-clipPath-pc);
    filter: brightness(0.6);
}

.honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(4) {
    transform: rotateY(0deg) translateZ(100vw);
    -webkit-clip-path: url(#magicos-clipPath-pc);
    clip-path: url(#magicos-clipPath-pc);
    filter: brightness(1);
}

.honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(5) {
    transform: rotateY(51deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath4-pc);
    clip-path: url(#magicos-clipPath4-pc);
    filter: brightness(0.6);
}

.honormagicv2 .section-magicos.is-active5 .ball {
    transform: translate(-50%, -50%) rotateY(0deg);
}

.honormagicv2 .section-magicos.is-active6 .container {
    opacity: 1;
    transform: translate(-50%, -62%) scale(1);
    transition-delay: 0.1s;
}

.honormagicv2 .section-magicos.is-active6 .magicos-setion-wrapper {
    transform: translate(-50%, -56%) scale(0.4);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active6 .magicos-logo-wrapper {
    transform: translate(-50%, 100%) scale(0.556);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active6 .magicos-text-wrapper {
    transform: translate(-50%, 112%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active6 .container {
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active6 .container-text-content {
    opacity: 1;
    transform: translate(-65%, 415%);
}

.honormagicv2 .section-magicos.is-active6 .container-text-content .textWrapper:nth-child(1) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active6 .container-text-content .textWrapper:nth-child(2) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active6 .container-text-content .textWrapper:nth-child(3) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active6 .container-text-content .textWrapper:nth-child(4) {
    transform: translate(0%, -30%);
    opacity: 0;
}

.honormagicv2 .section-magicos.is-active6 .container-text-content .textWrapper:nth-child(5) {
    transform: translate(0%, 0%);
    opacity: 1;
    transition-delay: 0.3s;
}

.honormagicv2 .section-magicos.is-active6 .progress-bar-hur {
    transform: translate(17vw, 16.6vw);
    opacity: 1;
}

.honormagicv2 .section-magicos.is-active6 .progress-bar-hur .bar-bg-line .bar-move-line {
    transform: translate(-50%, -50%);
}

.honormagicv2 .section-magicos.is-active6 .card-box .card:nth-child(1) {
    transform: rotateY(-309deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath4-pc);
    clip-path: url(#magicos-clipPath4-pc);
    filter: brightness(0.6);
}

.honormagicv2 .section-magicos.is-active6 .card-box .card:nth-child(2) {
    transform: rotateY(-202deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.3);
}

.honormagicv2 .section-magicos.is-active6 .card-box .card:nth-child(3) {
    transform: rotateY(-158deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.3);
}

.honormagicv2 .section-magicos.is-active6 .card-box .card:nth-child(4) {
    transform: rotateY(-51deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath3-pc);
    clip-path: url(#magicos-clipPath3-pc);
    filter: brightness(0.6);
}

.honormagicv2 .section-magicos.is-active6 .card-box .card:nth-child(5) {
    transform: rotateY(0deg) translateZ(100vw);
    -webkit-clip-path: url(#magicos-clipPath-pc);
    clip-path: url(#magicos-clipPath-pc);
    filter: brightness(1);
}

.honormagicv2 .section-magicos.is-active6 .ball {
    transform: translate(-50%, -50%) rotateY(0deg);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos {
        height: 430vh;
    }

    .honormagicv2 .section-magicos.is-active1 .magicos-setion-wrapper {
        transform: translate(-50%, -56%) scale(0.4);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active1 .magicos-logo-wrapper {
        transform: translate(-50%, 100%) scale(0.556);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active1 .magicos-text-wrapper {
        transform: translate(-50%, 112%);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active1 .container {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 26.6666666667vw)) scale(1);
        transition-delay: 0.1s;
    }

    .honormagicv2 .section-magicos.is-active1 .container-text-content {
        opacity: 1;
        transform: translate(-50%, calc(-50% + 32vw));
    }

    .honormagicv2 .section-magicos.is-active1 .container-text-content .textWrapper:nth-of-type(1) {
        transform: translate(0%, 0%);
        opacity: 1;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active1 .progress-bar-hur {
        transform: translate(-50%, calc(-50% + 72vw));
        opacity: 1;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active2 .container {
        opacity: 1;
        transform: translate(-50%, -62%) scale(1);
        transition-delay: 0.1s;
    }

    .honormagicv2 .section-magicos.is-active2 .magicos-setion-wrapper {
        transform: translate(-50%, -56%) scale(0.4);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active2 .magicos-logo-wrapper {
        transform: translate(-50%, 100%) scale(0.556);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active2 .magicos-text-wrapper {
        transform: translate(-50%, 112%);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active2 .container {
        transform: translate(-50%, calc(-50% - 26.6666666667vw)) scale(1);
    }

    .honormagicv2 .section-magicos.is-active2 .container-text-content {
        opacity: 1;
        transform: translate(-50%, calc(-50% + 32vw));
    }

    .honormagicv2 .section-magicos.is-active2 .container-text-content .textWrapper:nth-of-type(1) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active2 .container-text-content .textWrapper:nth-of-type(2) {
        transform: translate(0%, 0%);
        opacity: 1;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active2 .progress-bar-hur {
        transform: translate(-50%, calc(-50% + 72vw));
        opacity: 1;
    }

    .honormagicv2 .section-magicos.is-active2 .progress-bar-hur .bar-bg-line .bar-move-line {
        transform: translate(-100%, -50%);
    }

    .honormagicv2 .section-magicos.is-active2 .card-box .card:nth-child(1) {
        transform: translateX(-80vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active2 .card-box .card:nth-child(2) {
        transform: translateX(0vw);
        filter: brightness(1);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active2 .card-box .card:nth-child(3) {
        transform: translateX(80vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active2 .card-box .card:nth-child(4) {
        transform: translateX(160vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active2 .card-box .card:nth-child(5) {
        transform: translateX(240vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active3 .container {
        opacity: 1;
        transform: translate(-50%, -62%) scale(1);
        transition-delay: 0.1s;
    }

    .honormagicv2 .section-magicos.is-active3 .magicos-setion-wrapper {
        transform: translate(-50%, -56%) scale(0.4);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active3 .magicos-logo-wrapper {
        transform: translate(-50%, 100%) scale(0.556);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active3 .magicos-text-wrapper {
        transform: translate(-50%, 112%);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active3 .container {
        transform: translate(-50%, calc(-50% - 26.6666666667vw)) scale(1);
    }

    .honormagicv2 .section-magicos.is-active3 .container-text-content {
        opacity: 1;
        transform: translate(-50%, calc(-50% + 32vw));
    }

    .honormagicv2 .section-magicos.is-active3 .container-text-content .textWrapper:nth-of-type(1) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active3 .container-text-content .textWrapper:nth-of-type(2) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active3 .container-text-content .textWrapper:nth-of-type(3) {
        transform: translate(0%, 0%);
        opacity: 1;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active3 .progress-bar-hur {
        transform: translate(-50%, calc(-50% + 72vw));
        opacity: 1;
    }

    .honormagicv2 .section-magicos.is-active3 .progress-bar-hur .bar-bg-line .bar-move-line {
        transform: translate(-80%, -50%);
    }

    .honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(1) {
        transform: translateX(-160vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(2) {
        transform: translateX(-80vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(3) {
        transform: translateX(0vw);
        filter: brightness(1);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(4) {
        transform: translateX(80vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active3 .card-box .card:nth-child(5) {
        transform: translateX(160vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active4 .container {
        opacity: 1;
        transform: translate(-50%, -62%) scale(1);
        transition-delay: 0.1s;
    }

    .honormagicv2 .section-magicos.is-active4 .magicos-setion-wrapper {
        transform: translate(-50%, -56%) scale(0.4);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active4 .magicos-logo-wrapper {
        transform: translate(-50%, 100%) scale(0.556);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active4 .magicos-text-wrapper {
        transform: translate(-50%, 112%);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active4 .container {
        transform: translate(-50%, calc(-50% - 26.6666666667vw)) scale(1);
    }

    .honormagicv2 .section-magicos.is-active4 .container-text-content {
        opacity: 1;
        transform: translate(-50%, calc(-50% + 32vw));
    }

    .honormagicv2 .section-magicos.is-active4 .container-text-content .textWrapper:nth-of-type(1) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active4 .container-text-content .textWrapper:nth-of-type(2) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active4 .container-text-content .textWrapper:nth-of-type(3) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active4 .container-text-content .textWrapper:nth-of-type(4) {
        transform: translate(0%, 0%);
        opacity: 1;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active4 .progress-bar-hur {
        transform: translate(-50%, calc(-50% + 72vw));
        opacity: 1;
    }

    .honormagicv2 .section-magicos.is-active4 .progress-bar-hur .bar-bg-line .bar-move-line {
        transform: translate(-50%, -50%);
    }

    .honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(1) {
        transform: translateX(-240vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(2) {
        transform: translateX(-160vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(3) {
        transform: translateX(-80vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(4) {
        transform: translateX(0vw);
        filter: brightness(1);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active4 .card-box .card:nth-child(5) {
        transform: translateX(80vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active5 .container {
        opacity: 1;
        transform: translate(-50%, -62%) scale(1);
        transition-delay: 0.1s;
    }

    .honormagicv2 .section-magicos.is-active5 .magicos-setion-wrapper {
        transform: translate(-50%, -56%) scale(0.4);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active5 .magicos-logo-wrapper {
        transform: translate(-50%, 100%) scale(0.556);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active5 .magicos-text-wrapper {
        transform: translate(-50%, 112%);
        opacity: 0;
    }

    .honormagicv2 .section-magicos.is-active5 .container {
        transform: translate(-50%, calc(-50% - 26.6666666667vw)) scale(1);
    }

    .honormagicv2 .section-magicos.is-active5 .container-text-content {
        opacity: 1;
        transform: translate(-50%, calc(-50% + 32vw));
    }

    .honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-of-type(1) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-of-type(2) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-of-type(3) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-of-type(4) {
        transform: translate(0%, -30%);
        opacity: 0;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active5 .container-text-content .textWrapper:nth-of-type(5) {
        transform: translate(0%, 0%);
        opacity: 1;
        transition-delay: 0.3s;
    }

    .honormagicv2 .section-magicos.is-active5 .progress-bar-hur {
        transform: translate(-50%, calc(-50% + 72vw));
        opacity: 1;
    }

    .honormagicv2 .section-magicos.is-active5 .progress-bar-hur .bar-bg-line .bar-move-line {
        transform: translate(-50%, -50%);
    }

    .honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(1) {
        transform: translateX(-320vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(2) {
        transform: translateX(-240vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(3) {
        transform: translateX(-160vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(4) {
        transform: translateX(-80vw);
        filter: brightness(0.6);
        -webkit-clip-path: unset;
        clip-path: unset;
    }

    .honormagicv2 .section-magicos.is-active5 .card-box .card:nth-child(5) {
        transform: translateX(0vw);
        filter: brightness(1);
        -webkit-clip-path: unset;
        clip-path: unset;
    }
}

.honormagicv2 .section-magicos .sticky-container {
    top: 52px;
    height: calc(100vh - 52px);
    direction: ltr;
}

.honormagicv2 .section-magicos #trigger-magicos {
    position: absolute;
    top: 50vh;
}

.honormagicv2 .section-magicos .magicos-setion-wrapper {
    width: 67.8645833333vw;
    height: 70.2083333333vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.35;
    transition: all 0.7s ease;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .magicos-setion-wrapper {
        width: 100vw;
        height: 103.4666666667vw;
        opacity: 1;
        transform: translate(-50%, calc(-50% - 30.6666666667vw));
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-magicos .magicos-setion-wrapper {
        transform: translate(-50%, calc(-50% - 38.6666666667vw));
    }
}

.honormagicv2 .section-magicos .magicos-logo-wrapper {
    width: 23.8020833333vw;
    height: 5.6458333333vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -85%);
    transition: all 0.7s ease;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .magicos-logo-wrapper {
        width: 39.2vw;
        height: 9.3333333333vw;
    }
}

.honormagicv2 .section-magicos .magicos-text-wrapper {
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 132%);
    opacity: 0;
    transition: all 0.7s ease;
    will-change: opacity, transform;
    z-index: 99;
}

.honormagicv2 .section-magicos .magicos-text-wrapper .fs-20 {
    opacity: 0.6000000238;
    margin-top: 1.1458333333vw;
}

.honormagicv2 .section-magicos .magicos-text-wrapper .fs-18 {
    color: #3d7fff;
    margin-top: 2.6041666667vw;
    display: inline-block;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .magicos-text-wrapper {
        opacity: 1;
        transform: translate(-50%, calc(-50% + 21.8666666667vw));
        width: 88vw;
    }

    .honormagicv2 .section-magicos .magicos-text-wrapper .fs-48 {
        font-size: 6.5vw;
    }

    .honormagicv2 .section-magicos .magicos-text-wrapper .fs-20 {
        opacity: 0.6000000238;
        margin-top: 4vw;
        font-size: 3.7333333333vw;
    }

    .honormagicv2 .section-magicos .magicos-text-wrapper .fs-18 {
        margin-top: 6.6666666667vw;
    }
}

.honormagicv2 .section-magicos .container-text-content {
    width: 41.6666666667vw;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-65%, 415%);
    opacity: 0;
    transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .container-text-content {
        width: 82.6666666667vw;
        transform: translate(-50%, calc(-50% + 53.3333333333vw));
    }
}

.honormagicv2 .section-magicos .container-text-content .textWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.7s ease;
    transform: translate(0%, 30%);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .container-text-content .textWrapper {
        flex-wrap: wrap;
    }
}

.honormagicv2 .section-magicos .container-text-content .textWrapper .fs-28 {
    width: 15.625vw;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .container-text-content .textWrapper .fs-28 {
        width: 100%;
    }
}

.honormagicv2 .section-magicos .container-text-content .textWrapper .fs-18 {
    width: 24vw;
    opacity: 0.6;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .container-text-content .textWrapper .fs-18 {
        width: 100%;
        margin-top: 4vw;
    }
}

.honormagicv2 .section-magicos .container-text-content .textWrapper:not(:first-of-type) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
}

.honormagicv2 .section-magicos .progress-bar-hur {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(17vw, 16.6vw);
    opacity: 0;
    display: flex;
    color: #ffffff;
    align-items: center;
    transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .progress-bar-hur {
        transform: translate(-50%, calc(-50% + 72vw));
    }
}

.honormagicv2 .section-magicos .progress-bar-hur .bar-bg-line {
    position: relative;
    width: 12.5vw;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .progress-bar-hur .bar-bg-line {
        width: 68vw;
    }
}

.honormagicv2 .section-magicos .progress-bar-hur .bar-bg-line .bar-move-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12.5vw;
    height: 2px;
    background-color: rgb(255, 255, 255);
    transform: translate(-120%, -50%);
    transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .progress-bar-hur .bar-bg-line .bar-move-line {
        width: 68vw;
    }
}

.honormagicv2 .section-magicos .progress-bar-hur .bar-number {
    margin-left: 0.8333333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .progress-bar-hur .bar-number {
        margin-left: 3.2vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .progress-bar-hur .bar-number p .fs-20 {
        font-size: 3.7333333333vw;
    }
}

.honormagicv2 .section-magicos .progress-bar-hur .bar-number p .fs-16 {
    color: rgba(255, 255, 255, 0.4);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .progress-bar-hur .bar-number p .fs-16 {
        font-size: 3.2vw;
    }
}

.honormagicv2 .section-magicos .container {
    width: 54.1666666667vw;
    height: 33.6458333333vw;
    perspective: 200vw;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -62%) scale(1.3);
    opacity: 0;
    transition: all 0.7s ease;
    will-change: opacity, transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .container {
        width: 77.0666666667vw;
        height: 77.0666666667vw;
        transform: none;
        transform: translate(-50%, -50%) scale(1);
    }
}

.honormagicv2 .section-magicos .card-box {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(0) translateZ(-100vw);
    transition: transform 1s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .card-box {
        transform: none;
    }
}

.honormagicv2 .section-magicos .card {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 54.1666666667vw;
    height: 33.6458333333vw;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 52.0833333333vw;
    -webkit-clip-path: url(#magicos-clipPath-pc);
    clip-path: url(#magicos-clipPath-pc);
    transition: transform 1s ease;
    background-color: #000;
}

.honormagicv2 .section-magicos .card .card-re-add-txt {
    position: absolute;
    text-align: center;
    font-size: .7292vw;
    left: 0;
    right: 0;
    bottom: 2vw;
    color: #747479;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .card .card-re-add-txt {
        font-size: 3.3333vw;
        bottom: 4vw;
        padding: 0 2vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .card {
        width: 77.0666666667vw;
        height: 77.0666666667vw;
        -webkit-clip-path: unset;
        clip-path: unset;
    }
}

.honormagicv2 .section-magicos .card img {
    width: 100%;
    height: 100%;
}

.honormagicv2 .section-magicos .card:nth-child(1) {
    transform: rotateY(0) translateZ(100vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .card:nth-child(1) {
        transform: none;
        -webkit-clip-path: unset;
        clip-path: unset;
        filter: brightness(1);
    }
}

.honormagicv2 .section-magicos .card:nth-child(2) {
    transform: rotateY(51deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath4-pc);
    clip-path: url(#magicos-clipPath4-pc);
    filter: brightness(0.6);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .card:nth-child(2) {
        transform: none;
        transform: translateX(80vw);
        -webkit-clip-path: unset;
        clip-path: unset;
        filter: brightness(0.6);
    }
}

.honormagicv2 .section-magicos .card:nth-child(3) {
    transform: rotateY(158deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.6);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .card:nth-child(3) {
        transform: none;
        transform: translateX(160vw);
        -webkit-clip-path: unset;
        clip-path: unset;
        filter: brightness(0.6);
    }
}

.honormagicv2 .section-magicos .card:nth-child(4) {
    transform: rotateY(202deg) translateZ(156.25vw);
    -webkit-clip-path: url(#magicos-clipPath2-pc);
    clip-path: url(#magicos-clipPath2-pc);
    filter: brightness(0.3);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .card:nth-child(4) {
        transform: none;
        transform: translateX(240vw);
        -webkit-clip-path: unset;
        clip-path: unset;
        filter: brightness(0.6);
    }
}

.honormagicv2 .section-magicos .card:nth-child(5) {
    transform: rotateY(309deg) translateZ(83.3333333333vw);
    -webkit-clip-path: url(#magicos-clipPath3-pc);
    clip-path: url(#magicos-clipPath3-pc);
    filter: brightness(0.3);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .card:nth-child(5) {
        transform: none;
        transform: translateX(320vw);
        -webkit-clip-path: unset;
        clip-path: unset;
        filter: brightness(0.6);
    }
}

@keyframes cardRotate {
    0% {
        transform: translateZ(-75vw) rotateY(0);
    }

    100% {
        transform: translateZ(-75vw) rotateY(-360deg);
    }
}

.honormagicv2 .section-magicos .ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 41.0625vw;
    height: 42.5vw;
    transform: translate(-50%, -50%);
    background: transparent;
    z-index: 2;
    transition: transform 1s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-magicos .ball {
        display: none;
    }
}

@keyframes ballRotate {
    0% {
        transform: translate(-50%, -50%) rotateY(0);
    }

    100% {
        transform: translate(-50%, -50%) rotateY(360deg);
    }
}

.honormagicv2 .section-camera {
    height: 610vh;
    color: #fff;
    z-index: 2;
}

.honormagicv2 .section-camera.is-in .camera-title {
    opacity: 1;
    transform: translateY(-50%);
}

.honormagicv2 .section-camera.is-out .sticky-container>div {
    transform: translateX(-100%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-out .sticky-container>div {
        transform: none;
    }
}

.honormagicv2 .section-camera.is-active-reverse-0 .camera-title {
    transition-delay: 0.5s;
}

.honormagicv2 .section-camera.is-active-forward-1 .camera-title {
    opacity: 0;
    transform: translateY(-50%);
}

.honormagicv2 .section-camera.is-active-forward-1 .bg {
    transform: scale(1.3);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-forward-1 .bg {
        transform: none;
    }
}

.honormagicv2 .section-camera.is-active-forward-1 .thumb-wrapper {
    transform: translate(-28.6458333333vw, -50%);
}

.honormagicv2 .section-camera.is-active-forward-1 .thumb-wrapper .thumb2 {
    opacity: 1;
    transition-delay: 0.5s;
}

.honormagicv2 .section-camera.is-active-forward-1 .fold {
    transform: translate(-50%, -19.7916666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-forward-1 .fold {
        transform: translate(calc(-50% + 6.6666666667vw), -61.3333333333vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-1 .fold .camera-border.border1 {
    opacity: 1;
    transition-delay: 0.5s;
}

.honormagicv2 .section-camera.is-active-forward-1 .copy-wrapper.wrapper1 {
    opacity: 1;
    transform: translate(21.3541666667vw, -50%);
    transition-delay: 0.5s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-forward-1 .copy-wrapper.wrapper1 {
        transform: translateY(24vw);
        transition-delay: 0.7s;
    }
}

.honormagicv2 .section-camera.is-active-reverse-1 .camera-title {
    opacity: 0;
    transform: translateY(-50%);
}

.honormagicv2 .section-camera.is-active-reverse-1 .bg {
    transform: scale(1.3);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-reverse-1 .bg {
        transform: none;
    }
}

.honormagicv2 .section-camera.is-active-reverse-1 .thumb-wrapper {
    transform: translate(-28.6458333333vw, -50%);
}

.honormagicv2 .section-camera.is-active-reverse-1 .thumb-wrapper .thumb2 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-reverse-1 .fold {
    transform: translate(-50%, -19.7916666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-reverse-1 .fold {
        transform: translate(calc(-50% + 6.6666666667vw), -61.3333333333vw);
    }
}

.honormagicv2 .section-camera.is-active-reverse-1 .fold .camera-border.border1 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-reverse-1 .copy-wrapper.wrapper1 {
    opacity: 1;
    transform: translate(21.3541666667vw, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-reverse-1 .copy-wrapper.wrapper1 {
        transform: translateY(24vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-2 .camera-title,
.honormagicv2 .section-camera.is-active-reverse-2 .camera-title {
    opacity: 0;
    transform: translateY(-50%);
}

.honormagicv2 .section-camera.is-active-forward-2 .bg,
.honormagicv2 .section-camera.is-active-reverse-2 .bg {
    transform: scale(1.3);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-2 .bg,
    .honormagicv2 .section-camera.is-active-reverse-2 .bg {
        transform: none;
    }
}

.honormagicv2 .section-camera.is-active-forward-2 .thumb-wrapper,
.honormagicv2 .section-camera.is-active-reverse-2 .thumb-wrapper {
    transform: translate(-28.6458333333vw, -50%);
}

.honormagicv2 .section-camera.is-active-forward-2 .thumb-wrapper .thumb3,
.honormagicv2 .section-camera.is-active-reverse-2 .thumb-wrapper .thumb3 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-forward-2 .fold,
.honormagicv2 .section-camera.is-active-reverse-2 .fold {
    transform: translate(-50%, -19.7916666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-2 .fold,
    .honormagicv2 .section-camera.is-active-reverse-2 .fold {
        transform: translate(calc(-50% + 6.6666666667vw), -61.3333333333vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-2 .fold .camera-border.border2,
.honormagicv2 .section-camera.is-active-reverse-2 .fold .camera-border.border2 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-forward-2 .copy-wrapper.wrapper1,
.honormagicv2 .section-camera.is-active-reverse-2 .copy-wrapper.wrapper1 {
    opacity: 0;
    transform: translate(21.3541666667vw, calc(-50% + 0.5208333333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-2 .copy-wrapper.wrapper1,
    .honormagicv2 .section-camera.is-active-reverse-2 .copy-wrapper.wrapper1 {
        transform: translateY(26.6666666667vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-2 .copy-wrapper.wrapper2,
.honormagicv2 .section-camera.is-active-reverse-2 .copy-wrapper.wrapper2 {
    opacity: 1;
    transform: translate(21.3541666667vw, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-2 .copy-wrapper.wrapper2,
    .honormagicv2 .section-camera.is-active-reverse-2 .copy-wrapper.wrapper2 {
        transform: translateY(24vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-3 .camera-title,
.honormagicv2 .section-camera.is-active-reverse-3 .camera-title {
    opacity: 0;
    transform: translateY(-50%);
}

.honormagicv2 .section-camera.is-active-forward-3 .bg,
.honormagicv2 .section-camera.is-active-reverse-3 .bg {
    transform: scale(1.3);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-3 .bg,
    .honormagicv2 .section-camera.is-active-reverse-3 .bg {
        transform: none;
    }
}

.honormagicv2 .section-camera.is-active-forward-3 .thumb-wrapper,
.honormagicv2 .section-camera.is-active-reverse-3 .thumb-wrapper {
    transform: translate(-28.6458333333vw, -50%);
}

.honormagicv2 .section-camera.is-active-forward-3 .thumb-wrapper .thumb4,
.honormagicv2 .section-camera.is-active-reverse-3 .thumb-wrapper .thumb4 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-forward-3 .fold,
.honormagicv2 .section-camera.is-active-reverse-3 .fold {
    transform: translate(-50%, -19.7916666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-3 .fold,
    .honormagicv2 .section-camera.is-active-reverse-3 .fold {
        transform: translate(calc(-50% + 6.6666666667vw), -61.3333333333vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-3 .fold .camera-border.border3,
.honormagicv2 .section-camera.is-active-reverse-3 .fold .camera-border.border3 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-forward-3 .copy-wrapper.wrapper1,
.honormagicv2 .section-camera.is-active-forward-3 .copy-wrapper.wrapper2,
.honormagicv2 .section-camera.is-active-reverse-3 .copy-wrapper.wrapper1,
.honormagicv2 .section-camera.is-active-reverse-3 .copy-wrapper.wrapper2 {
    opacity: 0;
    transform: translate(21.3541666667vw, calc(-50% + 0.5208333333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-3 .copy-wrapper.wrapper1,
    .honormagicv2 .section-camera.is-active-forward-3 .copy-wrapper.wrapper2,
    .honormagicv2 .section-camera.is-active-reverse-3 .copy-wrapper.wrapper1,
    .honormagicv2 .section-camera.is-active-reverse-3 .copy-wrapper.wrapper2 {
        transform: translateY(26.6666666667vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-3 .copy-wrapper.wrapper3,
.honormagicv2 .section-camera.is-active-reverse-3 .copy-wrapper.wrapper3 {
    opacity: 1;
    transform: translate(21.3541666667vw, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-3 .copy-wrapper.wrapper3,
    .honormagicv2 .section-camera.is-active-reverse-3 .copy-wrapper.wrapper3 {
        transform: translateY(24vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-4 .camera-title {
    opacity: 0;
    transform: translateY(-50%);
}

.honormagicv2 .section-camera.is-active-forward-4 .bg {
    transform: scale(1.3);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-forward-4 .bg {
        transform: none;
    }
}

.honormagicv2 .section-camera.is-active-forward-4 .thumb-wrapper {
    transform: translate(-28.6458333333vw, -50%);
}

.honormagicv2 .section-camera.is-active-forward-4 .thumb-wrapper .thumb5 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-forward-4 .fold {
    transform: translate(-50%, -19.7916666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-forward-4 .fold {
        transform: translate(calc(-50% + 6.6666666667vw), -69.3333333333vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-4 .fold .camera-border.border4,
.honormagicv2 .section-camera.is-active-forward-4 .fold .camera-border.border5 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-forward-4 .copy-wrapper.wrapper1,
.honormagicv2 .section-camera.is-active-forward-4 .copy-wrapper.wrapper2,
.honormagicv2 .section-camera.is-active-forward-4 .copy-wrapper.wrapper3 {
    opacity: 0;
    transform: translate(21.3541666667vw, calc(-50% + 0.5208333333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-4 .copy-wrapper.wrapper1,
    .honormagicv2 .section-camera.is-active-forward-4 .copy-wrapper.wrapper2,
    .honormagicv2 .section-camera.is-active-forward-4 .copy-wrapper.wrapper3 {
        transform: translateY(26.6666666667vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-4 .copy-wrapper.wrapper4 {
    opacity: 1;
    transform: translate(21.3541666667vw, -50%);
    transition-delay: 0.3s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-forward-4 .copy-wrapper.wrapper4 {
        transform: translateY(10.6666666667vw);
    }
}

.honormagicv2 .section-camera.is-active-reverse-4 .camera-title {
    opacity: 0;
    transform: translateY(-50%);
}

.honormagicv2 .section-camera.is-active-reverse-4 .bg {
    transform: scale(1.3);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-reverse-4 .bg {
        transform: none;
    }
}

.honormagicv2 .section-camera.is-active-reverse-4 .thumb-wrapper {
    transform: translate(-28.6458333333vw, -50%);
    transition-delay: 0.5s;
}

.honormagicv2 .section-camera.is-active-reverse-4 .thumb-wrapper .thumb5 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-reverse-4 .fold {
    transform: translate(-50%, -19.7916666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-reverse-4 .fold {
        transform: translate(calc(-50% + 6.6666666667vw), -69.3333333333vw);
    }
}

.honormagicv2 .section-camera.is-active-reverse-4 .fold .camera-border.border4,
.honormagicv2 .section-camera.is-active-reverse-4 .fold .camera-border.border5 {
    opacity: 1;
    transition-delay: 0.5s;
}

.honormagicv2 .section-camera.is-active-reverse-4 .fold .front-id {
    transition-delay: 0.5s;
}

.honormagicv2 .section-camera.is-active-reverse-4 .copy-wrapper.wrapper1,
.honormagicv2 .section-camera.is-active-reverse-4 .copy-wrapper.wrapper2,
.honormagicv2 .section-camera.is-active-reverse-4 .copy-wrapper.wrapper3 {
    opacity: 0;
    transform: translate(21.3541666667vw, calc(-50% + 0.5208333333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-reverse-4 .copy-wrapper.wrapper1,
    .honormagicv2 .section-camera.is-active-reverse-4 .copy-wrapper.wrapper2,
    .honormagicv2 .section-camera.is-active-reverse-4 .copy-wrapper.wrapper3 {
        transform: translateY(26.6666666667vw);
    }
}

.honormagicv2 .section-camera.is-active-reverse-4 .copy-wrapper.wrapper4 {
    opacity: 1;
    transform: translate(21.3541666667vw, -50%);
    transition-delay: 0.5s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera.is-active-reverse-4 .copy-wrapper.wrapper4 {
        transform: translateY(10.6666666667vw);
        transition-delay: 0.7s;
    }
}

.honormagicv2 .section-camera.is-active-forward-5 .camera-title,
.honormagicv2 .section-camera.is-active-reverse-5 .camera-title {
    opacity: 0;
    transform: translateY(-50%);
}

.honormagicv2 .section-camera.is-active-forward-5 .thumb-wrapper,
.honormagicv2 .section-camera.is-active-reverse-5 .thumb-wrapper {
    transform: translate(-28.6458333333vw, -50%);
    opacity: 0;
}

.honormagicv2 .section-camera.is-active-forward-5 .thumb-wrapper .thumb5,
.honormagicv2 .section-camera.is-active-reverse-5 .thumb-wrapper .thumb5 {
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-forward-5 .fold,
.honormagicv2 .section-camera.is-active-reverse-5 .fold {
    transform: translate(calc(-50% - 17.1875vw), -19.7916666667vw) scale(0.583);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-5 .fold,
    .honormagicv2 .section-camera.is-active-reverse-5 .fold {
        transform: translate(calc(-50% - 17.3333333333vw), -52vw) scale(0.5);
    }
}

.honormagicv2 .section-camera.is-active-forward-5 .fold .camera-border.border4,
.honormagicv2 .section-camera.is-active-forward-5 .fold .camera-border.border5,
.honormagicv2 .section-camera.is-active-reverse-5 .fold .camera-border.border4,
.honormagicv2 .section-camera.is-active-reverse-5 .fold .camera-border.border5 {
    opacity: 0;
}

.honormagicv2 .section-camera.is-active-forward-5 .fold .back-id,
.honormagicv2 .section-camera.is-active-reverse-5 .fold .back-id {
    opacity: 0;
}

.honormagicv2 .section-camera.is-active-forward-5 .fold .front-id,
.honormagicv2 .section-camera.is-active-reverse-5 .fold .front-id {
    transition-duration: 0s;
    opacity: 1;
}

.honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper1,
.honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper2,
.honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper3,
.honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper4,
.honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper1,
.honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper2,
.honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper3,
.honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper4 {
    opacity: 0;
    transform: translate(21.3541666667vw, calc(-50% + 0.5208333333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper1,
    .honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper2,
    .honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper3,
    .honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper4,
    .honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper1,
    .honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper2,
    .honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper3,
    .honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper4 {
        transform: translateY(26.6666666667vw);
    }
}

.honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper5,
.honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper5 {
    opacity: 1;
    transform: translate(23.6979166667vw, -50%);
    transition-delay: 0.5s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-5 .copy-wrapper.wrapper5,
    .honormagicv2 .section-camera.is-active-reverse-5 .copy-wrapper.wrapper5 {
        transform: translateY(29.3333333333vw);
        transition-delay: 0.7s;
    }
}

.honormagicv2 .section-camera.is-active-forward-5 .open,
.honormagicv2 .section-camera.is-active-reverse-5 .open {
    transform: translate(-50%, -50%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera.is-active-forward-5 .open,
    .honormagicv2 .section-camera.is-active-reverse-5 .open {
        transform: translate(calc(-50% + 10.6666666667vw), calc(-50% - 26.6666666667vw));
    }
}

.honormagicv2 .section-camera #trigger-camera-2 {
    position: absolute;
    top: 50vh;
}

.honormagicv2 .section-camera #trigger-camera-3 {
    position: absolute;
    top: 400vh;
}

.honormagicv2 .section-camera .sticky-container>div {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s ease;
    will-change: transform;
}

.honormagicv2 .section-camera .camera-title {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(calc(-50% + 1.0416666667vw));
    transition: all 0.3s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .camera-title {
        transform: translateY(calc(-50% + 2.6666666667vw));
        padding: 0 3vw;
        font-size: 11.8vw;
    }

    .honormagicv2 .section-camera .camera-title span {
        display: block;
    }

    .honormagicv2 .section-camera .camera-title span:first-of-type {
        transform: translateX(2.6666666667vw);
    }
}

.honormagicv2 .section-camera .bg {
    height: 100%;
    transition: transform 0.7s ease;
    will-change: transform;
}

.honormagicv2 .section-camera .fold {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34.84375vw;
    height: 73.75vw;
    transform: translate(-50%, calc(50vh + 19.7916666667vw));
    transition: transform 0.7s ease;
    will-change: transform;
    transform-origin: 0 50%;
    z-index: 2;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold {
        width: 98.6666666667vw;
        height: 208.8370702541vw;
        transform: translate(calc(-50% + 6.6666666667vw), calc(50vh + 104.4185351271vw));
    }
}

.honormagicv2 .section-camera .fold .back-id {
    position: relative;
    transition: opacity 0.5s ease;
    will-change: opacity;
    z-index: 2;
}

.honormagicv2 .section-camera .fold .front-id {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: opacity;
}

.honormagicv2 .section-camera .fold .camera-border {
    position: absolute;
    border: 1px solid #fff;
    opacity: 0;
    transition: all 0.3s ease;
    will-change: opacity, transform;
    z-index: 3;
}

.honormagicv2 .section-camera .fold .camera-border>div {
    position: absolute;
    width: 0.5208333333vw;
    height: 0.5208333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border>div {
        width: 1.3333333333vw;
        height: 1.3333333333vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border>div:nth-of-type(1) {
    top: 0.4166666667vw;
    left: 0.4166666667vw;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border>div:nth-of-type(1) {
        top: 1.0666666667vw;
        left: 1.0666666667vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border>div:nth-of-type(2) {
    top: 0.4166666667vw;
    right: 0.4166666667vw;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border>div:nth-of-type(2) {
        top: 1.0666666667vw;
        right: 1.0666666667vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border>div:nth-of-type(3) {
    bottom: 0.4166666667vw;
    left: 0.4166666667vw;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border>div:nth-of-type(3) {
        bottom: 1.0666666667vw;
        left: 1.0666666667vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border>div:nth-of-type(4) {
    bottom: 0.4166666667vw;
    right: 0.4166666667vw;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border>div:nth-of-type(4) {
        bottom: 1.0666666667vw;
        right: 1.0666666667vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border.border1 {
    left: 5.3125vw;
    top: 4.1666666667vw;
    width: 5.625vw;
    height: 5.625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border.border1 {
        left: 15.4666666667vw;
        top: 12.2666666667vw;
        width: 15.4666666667vw;
        height: 15.4666666667vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border.border2 {
    left: 5.3125vw;
    top: 11.09375vw;
    width: 5.625vw;
    height: 5.625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border.border2 {
        left: 15.4666666667vw;
        top: 31.4666666667vw;
        width: 15.4666666667vw;
        height: 15.4666666667vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border.border3 {
    left: 5.3125vw;
    top: 18.0208333333vw;
    width: 5.625vw;
    height: 5.625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border.border3 {
        left: 15.4666666667vw;
        top: 51.4666666667vw;
        width: 15.4666666667vw;
        height: 15.4666666667vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border.border4 {
    left: 11.4583333333vw;
    top: 4.4270833333vw;
    width: 2.96875vw;
    height: 5vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border.border4 {
        left: 32.5333333333vw;
        top: 12.2666666667vw;
        width: 8.8vw;
        height: 14.4vw;
    }
}

.honormagicv2 .section-camera .fold .camera-border.border5 {
    left: 11.4583333333vw;
    top: 20.1041666667vw;
    width: 2.96875vw;
    height: 2.96875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .fold .camera-border.border5 {
        left: 32.5333333333vw;
        top: 56.5333333333vw;
        width: 8.8vw;
        height: 8.8vw;
    }
}

.honormagicv2 .section-camera .open {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, calc(-53vh - 43.0208333333vw));
    width: 40.1041666667vw;
    height: 43.0208333333vw;
    transition: transform 0.7s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .open {
        top: 50%;
        width: 88vw;
        height: 94.4vw;
        transform: translate(calc(50vh + 94.4vw), calc(-50vh - 94.4vw)) scale(1.45);
    }
}

.honormagicv2 .section-camera .thumb-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7.7083333333vw;
    height: 16.6666666667vw;
    transform: translate(-28.6458333333vw, calc(-50vh - 16.6666666667vw));
    transition: transform 0.7s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

.honormagicv2 .section-camera .thumb-wrapper .thumb {
    transition: opacity 0.3s ease;
}

.honormagicv2 .section-camera .thumb-wrapper .thumb2,
.honormagicv2 .section-camera .thumb-wrapper .thumb3,
.honormagicv2 .section-camera .thumb-wrapper .thumb4,
.honormagicv2 .section-camera .thumb-wrapper .thumb5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.honormagicv2 .section-camera .copy-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14.0625vw;
    transform: translate(21.3541666667vw, calc(-50% + 0.5208333333vw));
    transition: all 0.3s ease;
    will-change: opacity;
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .copy-wrapper {
        left: 21.3333333333vw;
        width: 53.3333333333vw;
        transform: translateY(26.6666666667vw);
        z-index: 3;
    }

    .honormagicv2 .section-camera .copy-wrapper h3 {
        font-size: 4.5333333333vw;
    }

    .honormagicv2 .section-camera .copy-wrapper p {
        font-size: 3.2vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-camera .copy-wrapper {
        left: 21.3333333333vw;
        width: 48vw;
        transform: translateY(26.6666666667vw);
        z-index: 3;
    }

    .honormagicv2 .section-camera .copy-wrapper h3 {
        font-size: 5.8666666667vw;
    }

    .honormagicv2 .section-camera .copy-wrapper p {
        font-size: 3.7333333333vw;
    }
}

.honormagicv2 .section-camera .copy-wrapper .camera-copy,
.honormagicv2 .section-camera .copy-wrapper .spec-copy {
    position: relative;
    margin: 2.0833333333vw 0 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera .copy-wrapper .camera-copy,
    .honormagicv2 .section-camera .copy-wrapper .spec-copy {
        margin-top: 2.6666666667vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {

    .honormagicv2 .section-camera .copy-wrapper .camera-copy,
    .honormagicv2 .section-camera .copy-wrapper .spec-copy {
        margin-top: 6.6666666667vw;
    }
}

.honormagicv2 .section-camera .copy-wrapper .camera-copy>span,
.honormagicv2 .section-camera .copy-wrapper .spec-copy>span {
    display: block;
    padding-bottom: 0.9375vw;
    border-bottom: 1px solid #fff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera .copy-wrapper .camera-copy>span,
    .honormagicv2 .section-camera .copy-wrapper .spec-copy>span {
        padding-bottom: 1.6vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {

    .honormagicv2 .section-camera .copy-wrapper .camera-copy>span,
    .honormagicv2 .section-camera .copy-wrapper .spec-copy>span {
        padding-bottom: 3.2vw;
    }
}

.honormagicv2 .section-camera .copy-wrapper .camera-copy>span:not(:first-of-type),
.honormagicv2 .section-camera .copy-wrapper .spec-copy>span:not(:first-of-type) {
    margin-top: 0.9375vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-camera .copy-wrapper .camera-copy>span:not(:first-of-type),
    .honormagicv2 .section-camera .copy-wrapper .spec-copy>span:not(:first-of-type) {
        margin-top: 1.6vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {

    .honormagicv2 .section-camera .copy-wrapper .camera-copy>span:not(:first-of-type),
    .honormagicv2 .section-camera .copy-wrapper .spec-copy>span:not(:first-of-type) {
        margin-top: 3.2vw;
    }
}

.honormagicv2 .section-camera .copy-wrapper .camera-copy {
    margin-top: 0.5208333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .copy-wrapper .camera-copy {
        margin-top: 1.6vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-camera .copy-wrapper .camera-copy {
        margin-top: 3.2vw;
    }
}

.honormagicv2 .section-camera .copy-wrapper.wrapper4 {
    width: 22.3958333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .copy-wrapper.wrapper4 {
        width: 76.8vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-camera .copy-wrapper.wrapper4 {
        width: 68vw;
    }
}

.honormagicv2 .section-camera .copy-wrapper.wrapper4 h3:not(:first-of-type) {
    margin-top: 4.1666666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .copy-wrapper.wrapper4 h3:not(:first-of-type) {
        margin-top: 4vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-camera .copy-wrapper.wrapper4 h3:not(:first-of-type) {
        margin-top: 8vw;
    }
}

.honormagicv2 .section-camera .copy-wrapper.wrapper5 {
    transform: translate(23.6979166667vw, calc(-50% + 0.5208333333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-camera .copy-wrapper.wrapper5 {
        left: 41.3333333333vw;
        transform: translateY(32vw);
    }
}

.honormagicv2 .section-photography {
    height: 340vh;
    margin-top: -200vh;
    z-index: 2;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography {
        margin-top: -100vh;
        background: #fff;
    }
}

.honormagicv2 .section-photography.is-in .sticky-container>div {
    transform: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography.is-in .pic-wrapper {
        -webkit-clip-path: inset(0 0);
        clip-path: inset(0 0);
    }
}

.honormagicv2 .section-photography.is-in .copy-wrapper {
    transform: translateY(6.5104166667vw);
    transition-delay: 0.5s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography.is-in .copy-wrapper {
        transform: none;
        opacity: 1;
    }
}

.honormagicv2 .section-photography.is-active-reverse-0 .copy-wrapper .copy1 {
    transition-delay: 0.3s;
}

.honormagicv2 .section-photography.is-active-forward-1 .pic-wrapper .pic2,
.honormagicv2 .section-photography.is-active-reverse-1 .pic-wrapper .pic2 {
    transform: none;
}

.honormagicv2 .section-photography.is-active-forward-1 .copy-wrapper .copy1,
.honormagicv2 .section-photography.is-active-reverse-1 .copy-wrapper .copy1 {
    transform: translateY(1.0416666667vw);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-photography.is-active-forward-1 .copy-wrapper .copy1,
    .honormagicv2 .section-photography.is-active-reverse-1 .copy-wrapper .copy1 {
        transform: translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-photography.is-active-forward-1 .copy-wrapper .copy2,
.honormagicv2 .section-photography.is-active-reverse-1 .copy-wrapper .copy2 {
    transform: none;
    opacity: 1;
    transition-delay: 0.3s;
    z-index: 2;
}

.honormagicv2 .section-photography.is-active-forward-1 .button-wrapper .zoomBtn1,
.honormagicv2 .section-photography.is-active-reverse-1 .button-wrapper .zoomBtn1 {
    color: #e6b658;
}

.honormagicv2 .section-photography.is-active-forward-1 .progressbar-wrapper .line>div,
.honormagicv2 .section-photography.is-active-reverse-1 .progressbar-wrapper .line>div {
    transform: translateX(-33%) translateY(-50%);
}

.honormagicv2 .section-photography.is-active-forward-1 .progressbar-wrapper .number .current>span:nth-of-type(1),
.honormagicv2 .section-photography.is-active-reverse-1 .progressbar-wrapper .number .current>span:nth-of-type(1) {
    opacity: 0;
}

.honormagicv2 .section-photography.is-active-forward-1 .progressbar-wrapper .number .current>span:nth-of-type(2),
.honormagicv2 .section-photography.is-active-reverse-1 .progressbar-wrapper .number .current>span:nth-of-type(2) {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-forward-2 .pic-wrapper .pic2,
.honormagicv2 .section-photography.is-active-reverse-2 .pic-wrapper .pic2 {
    transform: none;
}

.honormagicv2 .section-photography.is-active-forward-2 .pic-wrapper .pic3,
.honormagicv2 .section-photography.is-active-reverse-2 .pic-wrapper .pic3 {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-forward-2 .copy-wrapper .copy1,
.honormagicv2 .section-photography.is-active-reverse-2 .copy-wrapper .copy1 {
    transform: translateY(1.0416666667vw);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-photography.is-active-forward-2 .copy-wrapper .copy1,
    .honormagicv2 .section-photography.is-active-reverse-2 .copy-wrapper .copy1 {
        transform: translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-photography.is-active-forward-2 .copy-wrapper .copy2,
.honormagicv2 .section-photography.is-active-reverse-2 .copy-wrapper .copy2 {
    transform: none;
    opacity: 1;
    transition-delay: 0.3s;
    z-index: 2;
}

.honormagicv2 .section-photography.is-active-forward-2 .button-wrapper .zoomBtn2,
.honormagicv2 .section-photography.is-active-reverse-2 .button-wrapper .zoomBtn2 {
    color: #e6b658;
}

.honormagicv2 .section-photography.is-active-forward-2 .progressbar-wrapper .line>div,
.honormagicv2 .section-photography.is-active-reverse-2 .progressbar-wrapper .line>div {
    transform: translateX(-33%) translateY(-50%);
}

.honormagicv2 .section-photography.is-active-forward-2 .progressbar-wrapper .number .current>span:nth-of-type(1),
.honormagicv2 .section-photography.is-active-reverse-2 .progressbar-wrapper .number .current>span:nth-of-type(1) {
    opacity: 0;
}

.honormagicv2 .section-photography.is-active-forward-2 .progressbar-wrapper .number .current>span:nth-of-type(2),
.honormagicv2 .section-photography.is-active-reverse-2 .progressbar-wrapper .number .current>span:nth-of-type(2) {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-forward-3 .pic-wrapper .pic2,
.honormagicv2 .section-photography.is-active-reverse-3 .pic-wrapper .pic2 {
    transform: none;
}

.honormagicv2 .section-photography.is-active-forward-3 .pic-wrapper .pic3,
.honormagicv2 .section-photography.is-active-forward-3 .pic-wrapper .pic4,
.honormagicv2 .section-photography.is-active-reverse-3 .pic-wrapper .pic3,
.honormagicv2 .section-photography.is-active-reverse-3 .pic-wrapper .pic4 {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-forward-3 .copy-wrapper .copy1,
.honormagicv2 .section-photography.is-active-reverse-3 .copy-wrapper .copy1 {
    transform: translateY(1.0416666667vw);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-photography.is-active-forward-3 .copy-wrapper .copy1,
    .honormagicv2 .section-photography.is-active-reverse-3 .copy-wrapper .copy1 {
        transform: translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-photography.is-active-forward-3 .copy-wrapper .copy2,
.honormagicv2 .section-photography.is-active-reverse-3 .copy-wrapper .copy2 {
    transform: none;
    opacity: 1;
    transition-delay: 0.3s;
    z-index: 2;
}

.honormagicv2 .section-photography.is-active-forward-3 .button-wrapper .zoomBtn3,
.honormagicv2 .section-photography.is-active-reverse-3 .button-wrapper .zoomBtn3 {
    color: #e6b658;
}

.honormagicv2 .section-photography.is-active-forward-3 .progressbar-wrapper .line>div,
.honormagicv2 .section-photography.is-active-reverse-3 .progressbar-wrapper .line>div {
    transform: translateX(-33%) translateY(-50%);
}

.honormagicv2 .section-photography.is-active-forward-3 .progressbar-wrapper .number .current>span:nth-of-type(1),
.honormagicv2 .section-photography.is-active-reverse-3 .progressbar-wrapper .number .current>span:nth-of-type(1) {
    opacity: 0;
}

.honormagicv2 .section-photography.is-active-forward-3 .progressbar-wrapper .number .current>span:nth-of-type(2),
.honormagicv2 .section-photography.is-active-reverse-3 .progressbar-wrapper .number .current>span:nth-of-type(2) {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-forward-4 .pic-wrapper .pic2 {
    transform: none;
}

.honormagicv2 .section-photography.is-active-forward-4 .pic-wrapper .pic3,
.honormagicv2 .section-photography.is-active-forward-4 .pic-wrapper .pic4,
.honormagicv2 .section-photography.is-active-forward-4 .pic-wrapper .pic5 {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-forward-4 .copy-wrapper .copy1 {
    transform: translateY(1.0416666667vw);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography.is-active-forward-4 .copy-wrapper .copy1 {
        transform: translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-photography.is-active-forward-4 .copy-wrapper .copy2 {
    transform: none;
    opacity: 1;
    transition-delay: 0.3s;
    z-index: 2;
}

.honormagicv2 .section-photography.is-active-forward-4 .button-wrapper .zoomBtn4 {
    color: #e6b658;
}

.honormagicv2 .section-photography.is-active-forward-4 .progressbar-wrapper .line>div {
    transform: translateX(-33%) translateY(-50%);
}

.honormagicv2 .section-photography.is-active-forward-4 .progressbar-wrapper .number .current>span:nth-of-type(1) {
    opacity: 0;
}

.honormagicv2 .section-photography.is-active-forward-4 .progressbar-wrapper .number .current>span:nth-of-type(2) {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-reverse-4 .pic-wrapper .pic2 {
    transform: none;
}

.honormagicv2 .section-photography.is-active-reverse-4 .pic-wrapper .pic3,
.honormagicv2 .section-photography.is-active-reverse-4 .pic-wrapper .pic4,
.honormagicv2 .section-photography.is-active-reverse-4 .pic-wrapper .pic5 {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-reverse-4 .copy-wrapper .copy1 {
    transform: translateY(1.0416666667vw);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography.is-active-reverse-4 .copy-wrapper .copy1 {
        transform: translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-photography.is-active-reverse-4 .copy-wrapper .copy2 {
    transform: none;
    opacity: 1;
    transition-delay: 0.3s;
    z-index: 2;
}

.honormagicv2 .section-photography.is-active-reverse-4 .button-wrapper .zoomBtn4 {
    color: #e6b658;
}

.honormagicv2 .section-photography.is-active-reverse-4 .progressbar-wrapper .line>div {
    transform: translateX(-33%) translateY(-50%);
}

.honormagicv2 .section-photography.is-active-reverse-4 .progressbar-wrapper .number .current>span:nth-of-type(1) {
    opacity: 0;
}

.honormagicv2 .section-photography.is-active-reverse-4 .progressbar-wrapper .number .current>span:nth-of-type(2) {
    opacity: 1;
}

.honormagicv2 .section-photography.is-active-forward-5 .pic-wrapper .pic2,
.honormagicv2 .section-photography.is-active-reverse-5 .pic-wrapper .pic2 {
    transform: none;
}

.honormagicv2 .section-photography.is-active-forward-5 .pic-wrapper .pic6,
.honormagicv2 .section-photography.is-active-reverse-5 .pic-wrapper .pic6 {
    transform: none;
}

.honormagicv2 .section-photography.is-active-forward-5 .copy-wrapper .copy1,
.honormagicv2 .section-photography.is-active-reverse-5 .copy-wrapper .copy1 {
    transform: translateY(1.0416666667vw);
    opacity: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-photography.is-active-forward-5 .copy-wrapper .copy1,
    .honormagicv2 .section-photography.is-active-reverse-5 .copy-wrapper .copy1 {
        transform: translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-photography.is-active-forward-5 .copy-wrapper .copy3,
.honormagicv2 .section-photography.is-active-reverse-5 .copy-wrapper .copy3 {
    transform: none;
    opacity: 1;
    transition-delay: 0.3s;
    z-index: 2;
}

.honormagicv2 .section-photography.is-active-forward-5 .progressbar-wrapper .line>div,
.honormagicv2 .section-photography.is-active-reverse-5 .progressbar-wrapper .line>div {
    transform: translateY(-50%);
}

.honormagicv2 .section-photography.is-active-forward-5 .progressbar-wrapper .number .current>span:nth-of-type(1),
.honormagicv2 .section-photography.is-active-reverse-5 .progressbar-wrapper .number .current>span:nth-of-type(1) {
    opacity: 0;
}

.honormagicv2 .section-photography.is-active-forward-5 .progressbar-wrapper .number .current>span:nth-of-type(3),
.honormagicv2 .section-photography.is-active-reverse-5 .progressbar-wrapper .number .current>span:nth-of-type(3) {
    opacity: 1;
}

.honormagicv2 .section-photography #trigger-photography-1 {
    position: absolute;
    top: 30vh;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography #trigger-photography-1 {
        top: 0;
    }
}

.honormagicv2 .section-photography #trigger-photography-2 {
    position: absolute;
    top: 100vh;
}

.honormagicv2 .section-photography .sticky-container>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: transform 1s ease;
    will-change: transform;
    direction: ltr;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography .sticky-container>div {
        display: block;
        transform: none;
    }
}

.honormagicv2 .section-photography .pic-wrapper {
    position: relative;
    width: 53.3333333333vw;
    height: 40vw;
    overflow: hidden;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography .pic-wrapper {
        width: 100%;
        height: 75vw;
        -webkit-clip-path: inset(17.0666666667vw 8vw);
        clip-path: inset(17.0666666667vw 8vw);
        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;
        will-change: clip-path;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-photography .pic-wrapper {
        height: 100vw;
    }
}

.honormagicv2 .section-photography .pic-wrapper .pic {
    transition: all 0.7s ease;
}

.honormagicv2 .section-photography .pic-wrapper .pic2,
.honormagicv2 .section-photography .pic-wrapper .pic3,
.honormagicv2 .section-photography .pic-wrapper .pic4,
.honormagicv2 .section-photography .pic-wrapper .pic5,
.honormagicv2 .section-photography .pic-wrapper .pic6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.honormagicv2 .section-photography .pic-wrapper .pic2 {
    transform: translateY(100%);
}

.honormagicv2 .section-photography .pic-wrapper .pic3,
.honormagicv2 .section-photography .pic-wrapper .pic4,
.honormagicv2 .section-photography .pic-wrapper .pic5 {
    opacity: 0;
}

.honormagicv2 .section-photography .pic-wrapper .pic6 {
    transform: translateY(100%);
}

.honormagicv2 .section-photography .copy-wrapper {
    position: relative;
    width: 25vw;
    height: 19.7916666667vw;
    background: rgba(25, 26, 28, 0.85);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    margin-left: -3.3854166667vw;
    transform: translateX(25vw) translateY(6.5104166667vw);
    color: #fff;
    transition: transform 0.7s ease;
    will-change: transform;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography .copy-wrapper {
        width: 100%;
        height: calc(100% - 75vw);
        background: none;
        margin-left: 0;
        color: #000;
        transform: translateY(2.6666666667vw);
        opacity: 0;
        transition: all 0.3s ease;
        will-change: opacity, transform;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-photography .copy-wrapper {
        height: calc(100% - 100vw);
    }
}

.honormagicv2 .section-photography .copy-wrapper .copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    padding: 3.6458333333vw 2.8645833333vw;
    transition: all 0.3s ease;
    direction: rtl;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography .copy-wrapper .copy {
        display: block;
        padding: 5.3333333333vw 8vw;
    }
}

.honormagicv2 .section-photography .copy-wrapper .copy p {
    opacity: 0.6;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography .copy-wrapper .copy p {
        margin-top: 4vw;
    }
}

.honormagicv2 .section-photography .copy-wrapper .copy2,
.honormagicv2 .section-photography .copy-wrapper .copy3,
.honormagicv2 .section-photography .copy-wrapper .copy4,
.honormagicv2 .section-photography .copy-wrapper .copy5,
.honormagicv2 .section-photography .copy-wrapper .copy6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(1.0416666667vw);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {

    .honormagicv2 .section-photography .copy-wrapper .copy2,
    .honormagicv2 .section-photography .copy-wrapper .copy3,
    .honormagicv2 .section-photography .copy-wrapper .copy4,
    .honormagicv2 .section-photography .copy-wrapper .copy5,
    .honormagicv2 .section-photography .copy-wrapper .copy6 {
        transform: translateY(2.6666666667vw);
    }
}

.honormagicv2 .section-photography .button-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.3020833333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography .button-wrapper {
        flex-direction: column-reverse;
        position: absolute;
        top: -37.5vw;
        right: 5.3333333333vw;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.2);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        padding: 1.3333333333vw;
        border-radius: 13.3333333333vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-photography .button-wrapper {
        top: -50vw;
    }
}

.honormagicv2 .section-photography .button-wrapper button {
    width: 3.125vw;
    height: 3.125vw;
    text-align: center;
    background: #131313;
    border-radius: 50%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography .button-wrapper button {
        width: 10.6666666667vw;
        height: 10.6666666667vw;
        color: rgba(255, 255, 255, 0.3);
        background: #3c3c3c;
    }
}

.honormagicv2 .section-photography .button-wrapper button:not(:first-of-type) {
    margin-right: 0.78125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-photography .button-wrapper button:not(:first-of-type) {
        margin-left: 0;
        margin-bottom: 1.3333333333vw;
    }
}

.honormagicv2 .section-photography .progressbar-wrapper {
    position: absolute;
    left: 8vw;
    bottom: 25.3333333333vw;
    width: 84vw;
    display: flex !important;
    align-items: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) and (min-width: 501px) {
    .honormagicv2 .section-photography .progressbar-wrapper {
        bottom: 2vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 500px) {
    .honormagicv2 .section-photography .progressbar-wrapper {
        bottom: 14.6666666667vw;
    }
}

.honormagicv2 .section-photography .progressbar-wrapper .line {
    position: relative;
    width: 68vw;
    height: 1px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.honormagicv2 .section-photography .progressbar-wrapper .line>div {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateX(-66%) translateY(-50%);
    background: #000;
    transition: transform 0.3s ease;
    will-change: transform;
}

.honormagicv2 .section-photography .progressbar-wrapper .number {
    margin-left: 3.2vw;
}

.honormagicv2 .section-photography .progressbar-wrapper .number .current {
    position: relative;
    display: inline-block;
    font-size: 3.7333333333vw;
}

.honormagicv2 .section-photography .progressbar-wrapper .number .current>span:nth-of-type(2),
.honormagicv2 .section-photography .progressbar-wrapper .number .current>span:nth-of-type(3) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}

.honormagicv2 .section-photography .progressbar-wrapper .number .total {
    display: inline-block;
    font-size: 3.2vw;
    opacity: 0.4;
}

.honormagicv2 .section-accessory {
    margin-top: 9.375vw;
}

.honormagicv2 .section-accessory .accessory-container {
    width: 72.9166666667vw;
    margin: 0 auto;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container {
        width: 100%;
        padding-left: 5.3333333333vw;
    }

    .honormagicv2 .section-accessory .accessory-container .accessory-progressWrapper {
        position: relative;
        height: 2px;
        border-radius: 1px;
        background: #d0d0d0;
        width: 89.3333333333vw;
        margin-top: 10.6666666667vw;
    }

    .honormagicv2 .section-accessory .accessory-container .accessory-progressWrapper div {
        position: absolute;
        top: 0;
        left: 0;
        width: 29.8666666667vw;
        height: 2px;
        border-radius: 1px;
        background: #000;
        transition: all 0.6s ease;
    }

    .honormagicv2 .section-accessory .accessory-container .accessory-progressWrapper div.active1 {
        transform: translateX(29.6vw);
    }

    .honormagicv2 .section-accessory .accessory-container .accessory-progressWrapper div.active2 {
        transform: translateX(59.4666666667vw);
    }
}

.honormagicv2 .section-accessory .accessory-container .section-title {
    margin-bottom: 3.125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .section-title {
        margin-bottom: 8vw;
    }
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .accessory-wrapper {
        justify-content: unset;
        align-items: unset;
    }
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide {
    width: 23.75vw;
    height: 26.0416666667vw;
    background-color: #f9f9f9;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide {
        width: 73.8666666667vw;
        height: 89.8666666667vw;
    }
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-bgWrapper img {
    height: 11.4583333333vw;
    width: auto;
    margin: 4.1666666667vw auto 0;
    transition: transform 0.7s ease;
    cursor: pointer;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-bgWrapper img {
        height: 44.8vw;
        margin: 8vw auto 0;
    }
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-bgWrapper img:hover {
    transform: scale(1.1);
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper {
    text-align: center;
    margin-top: 3.2291666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper {
        margin-top: 8vw;
    }
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper .fs-18 {
    margin-bottom: 0.78125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper .fs-18 {
        margin-bottom: 4vw;
    }
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper .accessory-buy-btn {
    font-size: 0.7291666667vw;
    padding: 0.5208333333vw 1.0416666667vw;
    display: inline-block;
    background-color: #000;
    color: #ffffff;
    border-radius: 1.25vw;
    margin-right: 1.0416666667vw;
    line-height: 1;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper .accessory-buy-btn {
        padding: 2.6666666667vw 5.0666666667vw;
        border-radius: 4.8vw;
        margin-right: 5.3333333333vw;
        font-size: 2.6666666667vw;
    }
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper .accessory-learn-btn {
    font-size: 0.7291666667vw;
    display: inline-block;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper .accessory-learn-btn {
        font-size: 2.6666666667vw;
    }
}

.honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper .accessory-learn-btn .arrow {
    width: 0.234375vw;
    height: 0.46875vw;
    display: inline-block;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-accessory .accessory-container .accessory-wrapper .accessory-slide .accessory-textWrapper .accessory-learn-btn .arrow {
        width: 1.2vw;
        height: 2.4vw;
    }
}

.honormagicv2 .section-scene {
    margin-top: 9.375vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene {
        margin-top: 13.3333333333vw;
        height: 162.6666666667vw;
    }
}

.honormagicv2 .section-scene .scene-container {
    width: 72.9166666667vw;
    margin: 0 auto;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container {
        width: 100%;
        height: auto;
        padding-left: 5.3333333333vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-progressWrapper {
        position: relative;
        height: 2px;
        border-radius: 1px;
        background: #d0d0d0;
        width: 89.3333333333vw;
        margin-top: 10.6666666667vw;
        transform: translateY(-52vw);
    }

    .honormagicv2 .section-scene .scene-container .scene-progressWrapper div {
        position: absolute;
        top: 0;
        left: 0;
        width: 22.4vw;
        height: 2px;
        border-radius: 1px;
        background: #000;
        transition: all 0.6s ease;
    }

    .honormagicv2 .section-scene .scene-container .scene-progressWrapper div.active1 {
        transform: translateX(22.4vw);
    }

    .honormagicv2 .section-scene .scene-container .scene-progressWrapper div.active2 {
        transform: translateX(44.8vw);
    }

    .honormagicv2 .section-scene .scene-container .scene-progressWrapper div.active3 {
        transform: translateX(68vw);
    }
}

.honormagicv2 .section-scene .scene-container .section-title {
    margin-bottom: 1.0416666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .section-title {
        margin-bottom: 5.3333333333vw;
    }
}

.honormagicv2 .section-scene .scene-container .fs-16 {
    opacity: 0.6;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .fs-16 {
        width: 42.9333333333vw;
        font-size: 3.55vw;
    }
}

.honormagicv2 .section-scene .scene-container .scene-wrapper {
    position: relative;
    width: 72.9166666667vw;
    height: 46.875vw;
    margin: 0 auto;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .scene-wrapper {
        width: 94.6666666667vw;
        height: auto;
    }
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .main-product {
    width: 46.875vw;
    height: 46.875vw;
    margin: 0 auto;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .scene-wrapper .main-product {
        width: 49.0666666667vw;
        height: 82.6666666667vw;
        transform: translate(20vw, -16vw);
    }
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container {
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container {
        position: relative;
        transform: translateY(-52vw);
    }
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .product-cotent {
    text-align: center;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .product-cotent .scene-wrapper-text {
    margin-top: 1.0416666667vw;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .product-cotent .scene-wrapper-text .fs-14 {
    font-size: 0.7291666667vw;
    opacity: 0.6;
    margin: 0.2604166667vw 0 0.78125vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .product-cotent .scene-wrapper-text .fs-14 {
        display: none;
    }
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .product-cotent .scene-wrapper-text .accessory-buy-btn {
    font-size: 0.7291666667vw;
    padding: 0.5208333333vw 1.0416666667vw;
    display: inline-block;
    background-color: #000;
    color: #ffffff;
    border-radius: 1.25vw;
    margin-right: 1.0416666667vw;
    line-height: 1;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .product-cotent .scene-wrapper-text .accessory-learn-btn {
    font-size: 0.7291666667vw;
    display: inline-block;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .product-cotent .scene-wrapper-text .accessory-learn-btn .arrow {
    width: 0.234375vw;
    height: 0.46875vw;
    display: inline-block;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product1 {
    position: absolute;
    width: 11.4583333333vw;
    height: auto;
    top: 3.8541666667vw;
    left: 0;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product1 .product-cotent img {
    width: 11.4583333333vw;
    height: 11.6921768707vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product1 {
        position: unset;
        width: 73.8666666667vw;
        height: 82.9333333333vw;
        background-color: #f9f9f9;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product1 .product-cotent img {
        width: 38.9333333333vw;
        height: 38.9333333333vw;
        margin: 8vw auto;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product1 .scene-wrapper-text .fs-18 {
        margin-bottom: 4vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product1 .scene-wrapper-text .accessory-buy-btn {
        padding: 2.6666666667vw 4.8vw;
        border-radius: 4.8vw;
        line-height: 1;
        font-size: 2.6666666667vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product1 .scene-wrapper-text .accessory-learn-btn {
        font-size: 2.6666666667vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product1 .scene-wrapper-text .accessory-learn-btn .arrow {
        margin: 0;
        width: 1.1733333333vw;
        height: 2.4vw;
    }
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product2 {
    position: absolute;
    width: 12.5vw;
    height: auto;
    bottom: 1.8229166667vw;
    left: 0;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product2 .product-cotent img {
    width: 12.5vw;
    height: 12.5vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product2 {
        position: unset;
        width: 73.8666666667vw;
        height: 82.9333333333vw;
        background-color: #f9f9f9;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product2 .product-cotent img {
        width: 38.9333333333vw;
        height: 38.9333333333vw;
        margin: 8vw auto;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product2 .scene-wrapper-text .fs-18 {
        margin-bottom: 4vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product2 .scene-wrapper-text .accessory-buy-btn {
        padding: 2.6666666667vw 4.8vw;
        border-radius: 4.8vw;
        line-height: 1;
        font-size: 2.6666666667vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product2 .scene-wrapper-text .accessory-learn-btn {
        font-size: 2.6666666667vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .left-product2 .scene-wrapper-text .accessory-learn-btn .arrow {
        margin: 0;
        width: 1.1733333333vw;
        height: 2.4vw;
    }
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product1 {
    position: absolute;
    width: 11.4583333333vw;
    height: auto;
    top: 3.8541666667vw;
    right: 0;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product1 .product-cotent img {
    width: 11.4583333333vw;
    height: 11.4583333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product1 {
        position: unset;
        width: 73.8666666667vw;
        height: 82.9333333333vw;
        background-color: #f9f9f9;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product1 .product-cotent img {
        width: 38.9333333333vw;
        height: 38.9333333333vw;
        margin: 8vw auto;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product1 .scene-wrapper-text .fs-18 {
        margin-bottom: 4vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product1 .scene-wrapper-text .accessory-buy-btn {
        padding: 2.6666666667vw 4.8vw;
        border-radius: 4.8vw;
        line-height: 1;
        font-size: 2.6666666667vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product1 .scene-wrapper-text .accessory-learn-btn {
        font-size: 2.6666666667vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product1 .scene-wrapper-text .accessory-learn-btn .arrow {
        margin: 0;
        width: 1.1733333333vw;
        height: 2.4vw;
    }
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product2 {
    position: absolute;
    width: 11.4583333333vw;
    height: auto;
    bottom: 1.8229166667vw;
    right: 0;
}

.honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product2 .product-cotent img {
    width: 11.4583333333vw;
    height: 11.4583333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product2 {
        position: unset;
        width: 73.8666666667vw;
        height: 82.9333333333vw;
        background-color: #f9f9f9;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product2 .product-cotent img {
        width: 38.9333333333vw;
        height: 38.9333333333vw;
        margin: 8vw auto;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product2 .scene-wrapper-text .fs-18 {
        margin-bottom: 4vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product2 .scene-wrapper-text .accessory-buy-btn {
        padding: 2.6666666667vw 4.8vw;
        border-radius: 4.8vw;
        line-height: 1;
        font-size: 2.6666666667vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product2 .scene-wrapper-text .accessory-learn-btn {
        font-size: 2.6666666667vw;
    }

    .honormagicv2 .section-scene .scene-container .scene-wrapper .swiper-container .right-product2 .scene-wrapper-text .accessory-learn-btn .arrow {
        margin: 0;
        width: 1.1733333333vw;
        height: 2.4vw;
    }
}

.honormagicv2 .section-events {
    margin-top: 9.375vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events {
        margin-top: 16vw;
    }

    .honormagicv2 .section-events .events-progressWrapper {
        position: relative;
        height: 2px;
        border-radius: 1px;
        background: #d0d0d0;
        width: 89.3333333333vw;
        margin-top: 10.6666666667vw;
        margin-left: 5.3333333333vw;
    }

    .honormagicv2 .section-events .events-progressWrapper div {
        position: absolute;
        top: 0;
        left: 0;
        width: 29.8666666667vw;
        height: 2px;
        border-radius: 1px;
        background: #000;
        transition: all 0.6s ease;
    }

    .honormagicv2 .section-events .events-progressWrapper div.active1 {
        transform: translateX(29.6vw);
    }

    .honormagicv2 .section-events .events-progressWrapper div.active2 {
        transform: translateX(59.4666666667vw);
    }
}

.honormagicv2 .section-events .section-title {
    text-align: center;
    margin-bottom: 2.0833333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events .section-title {
        text-align: left;
        margin-bottom: 8vw;
        padding-left: 5.3333333333vw;
    }
}

.honormagicv2 .section-events .events-wrapper {
    width: 72.9166666667vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events .events-wrapper {
        flex-wrap: unset;
        width: 100vw;
        justify-content: left;
        padding-left: 5.3333333333vw;
    }
}

.honormagicv2 .section-events .events-wrapper .events-content {
    width: 100%;
    height: 28.125vw;
    overflow: hidden;
    margin-bottom: 0.7291666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events .events-wrapper .events-content {
        width: 73.8666666667vw;
        height: 98.4vw;
    }
}

.honormagicv2 .section-events .events-wrapper .events-content picture img {
    transition: transform 0.7s ease;
}

.honormagicv2 .section-events .events-wrapper .events-content picture img:hover {
    transform: scale(1.05);
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 {
    width: 35.8333333333vw;
    height: 28.125vw;
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 picture img {
    transition: transform 0.7s ease;
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 picture img:hover {
    transform: scale(1.05);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events .events-wrapper .events-slide-content2 {
        width: 73.8666666667vw;
        height: 98.4vw;
    }
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 {
    width: 35.8333333333vw;
    height: 28.125vw;
    position: relative;
    overflow: hidden;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 {
        width: 73.8666666667vw;
        height: 98.4vw;
    }
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text {
    position: absolute;
    left: 3.125vw;
    bottom: 3.6458333333vw;
    color: #ffffff;
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .fs-24 {
    margin-bottom: 1.0416666667vw;
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .fs-24 span {
    font-size: 75%;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text {
        left: 5.3333333333vw;
        bottom: 8vw;
    }

    .honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .fs-24 {
        font-size: 5.2vw;
        margin-bottom: 4vw;
    }
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .ff-demiBold {
    margin-bottom: 2.0833333333vw;
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .events-learn-btn {
    font-size: 0.7291666667vw;
    display: flex;
    align-items: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .events-learn-btn {
        font-size: 2.6666666667vw;
    }
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .events-learn-btn .arrow {
    width: 0.2291666667vw;
    height: 0.46875vw;
    display: inline-block;
    transition: transform 0.7s ease;
    margin-left: 0.2604166667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .events-learn-btn .arrow {
        width: 1.1733333333vw;
        height: 2.4vw;
        margin-left: 0.5333333333vw;
    }
}

.honormagicv2 .section-events .events-wrapper .events-slide-content2 .events-content2 .events-content-text .events-learn-btn:hover .arrow {
    transform: translateX(0.2604166667vw);
}

.honormagicv2 .section-note {
    padding: 10.4166666667vw 0;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-note {
        padding: 26.6666666667vw 0;
    }
}

.honormagicv2 .section-note p {
    width: 62.5vw;
    margin: 0 auto;
    font-size: 0.7291666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-note p {
        width: 84vw;
        font-size: 3.2vw;
    }
}

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

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .honormagicv2-mobShow {
        display: block !important;
    }

    .honormagicv2 .honormagicv2-pcShow {
        display: none !important;
    }
}

.honormagicv2 .honormagicv2-foldShow {
    display: none;
}

@media (min-aspect-ratio: 660/758) and (max-width: 1025px) and (min-width: 501px) {
    .honormagicv2 .honormagicv2-foldHide {
        display: none !important;
    }

    .honormagicv2 .honormagicv2-foldShow {
        display: block !important;
    }
}

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

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

.honormagicv2 .popup .popupcloseBtn {
    position: absolute;
    top: 2.34375vw;
    right: 2.34375vw;
    width: 2.2916666667vw;
    height: 2.2916666667vw;
    display: block;
    cursor: pointer;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .popup .popupcloseBtn {
        top: 26.6666666667vw;
        right: 8vw;
        width: 5.3333333333vw;
        height: 5.3333333333vw;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) and (min-width: 500px) {
    .honormagicv2 .popup .popupcloseBtn {
        top: 24vw;
    }
}

.honormagicv2 .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: 660/758) and (max-width: 1025px) {
    .honormagicv2 .popup .popupcloseBtn::before {
        width: 7.2vw;
    }
}

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

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .popup .popupcloseBtn::after {
        width: 7.2vw;
        bottom: 0;
        left: -0.2666666667vw;
    }
}

.honormagicv2 .popup .popup-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.honormagicv2 .popup .popup-container.is-rotate .rotateWrapper {
    display: flex;
}

.honormagicv2 .popup .videoWrapper {
    display: none;
    height: 100%;
}

.honormagicv2 .popup .videoWrapper #video-popup {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .popup .videoWrapper.spec {
        height: auto;
    }
}

.honormagicv2 .popup .rotateWrapper {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.honormagicv2 .popup .rotateWrapper.is-active .loading {
    display: none;
}

.honormagicv2 .popup .rotateWrapper.is-active .noteWrapper {
    opacity: 1;
}

.honormagicv2 .popup .rotateWrapper.is-blue #swiper-popup-blue {
    display: block;
}

.honormagicv2 .popup .rotateWrapper.is-skin #swiper-popup-skin {
    display: block;
}

.honormagicv2 .popup .rotateWrapper.is-purple #swiper-popup-purple {
    display: block;
}

.honormagicv2 .popup .rotateWrapper.is-orange #swiper-popup-orange {
    display: block;
}

.honormagicv2 .popup .rotateWrapper.is-black #swiper-popup-black {
    display: block;
}

.honormagicv2 .popup .rotateWrapper .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    font-size: 1.5625vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .popup .rotateWrapper .loading {
        font-size: 5.3333333333vw;
    }
}

.honormagicv2 .popup .rotateWrapper .noteWrapper {
    text-align: center;
    opacity: 0;
}

.honormagicv2 .popup .rotateWrapper .icon-rotate {
    width: 3.125vw;
    margin: 0 auto;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .popup .rotateWrapper .icon-rotate {
        width: 8vw;
    }
}

.honormagicv2 .popup .swiper-popup {
    width: 15.625vw;
    display: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .popup .swiper-popup {
        width: 53.3333333333vw;
    }
}

.honormagicv2 .popup .swiper-slide {
    opacity: 0 !important;
    transition: none !important;
}

.honormagicv2 .popup .swiper-slide-active {
    opacity: 1 !important;
}

.honormagicv2.is-ios *,
.honormagicv2.is-wechat * {
    filter: none !important;
}

.honormagicv2 .honormagicv2-sideNav-container,
.honormagicv2 .honormagicv2-outer {
    position: relative;
}

.honormagicv2 .honormagicv2-outer.outer1 {
    background: #000;
    color: #fff;
    margin-top: -250vh;
}

.honormagicv2 .honormagicv2-outer.outer2 {
    background: #000;
    margin-top: -200vh;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .honormagicv2-outer.outer2 {
        margin-top: -150vh;
    }
}

.honormagicv2 .tvc-cursor {
    position: fixed;
    top: -6.25vw;
    left: -6.25vw;
    width: 6.25vw;
    height: 6.25vw;
    border-radius: 50%;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.221);
    box-shadow: none;
    cursor: none;
    z-index: 13;
    display: none;
}

.honormagicv2 .tvc-cursor.is-active {
    display: block;
}

.honormagicv2 .tvc-cursor::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 0.5208333333vw solid transparent;
    border-left: 1.0416666667vw solid #fff;
    border-bottom: 0.5208333333vw solid transparent;
}

.honormagicv2 .honormagicv2-sideNav-container {
    position: relative;
}

.honormagicv2 .honormagicv2-sideNavWrapper {
    position: absolute;
    top: calc(100vh - 52px - 180px);
    left: 0;
    width: 0;
    z-index: 7;
    display: block;
    height: calc(100% - 100vh);
    mix-blend-mode: difference;
    z-index: 9;
    display: none;
    direction: ltr;
}

.honormagicv2 .honormagicv2-sideNavWrapper>div {
    position: sticky;
    top: calc(100vh - 52px - 180px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    left: 0;
    width: 135px;
    height: 0;
}

@media (min-aspect-ratio: 660/758) and (min-width: 851px) {
    @supports (mix-blend-mode: difference) {
        .honormagicv2 .honormagicv2-sideNavWrapper.is-active {
            display: block;
        }
    }
}

.honormagicv2 .honormagicv2-sideNavWrapper svg {
    position: absolute;
    left: 30px;
    top: 0;
    width: 18px;
    height: 18px;
    transition: all 0.5s ease;
    opacity: 0;
}

.honormagicv2 .honormagicv2-sideNavWrapper svg circle {
    stroke: #211d1e;
    stroke-width: 2px;
    fill: none;
    stroke-linecap: butt;
    stroke-dasharray: 49.9416;
    stroke-dashoffset: 49.9416;
    transition: stroke 0.5s ease;
}

.honormagicv2 .honormagicv2-sideNavWrapper button {
    display: block;
    width: 100%;
    height: 18px;
    position: relative;
    box-sizing: content-box;
    color: #fff;
    text-decoration: none;
    margin-top: 15px;
    font-family: inherit;
}

.honormagicv2 .honormagicv2-sideNavWrapper button span {
    position: relative;
    display: block;
    line-height: 18px;
    opacity: 0;
    transition: all 0.5s ease;
    margin-left: 60px;
    font-size: 14px;
    text-align: left;
}

.honormagicv2 .honormagicv2-sideNavWrapper button::before {
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 38px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
}

.honormagicv2 .honormagicv2-sideNavWrapper button::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 30px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 245, 0.25);
    opacity: 0;
    transition: all 0.5s ease;
}

.honormagicv2 .honormagicv2-sideNavWrapper button.honormagicv2-sideNav-active span {
    opacity: 1;
}

.honormagicv2 .honormagicv2-sideNavWrapper button.honormagicv2-sideNav-active svg {
    opacity: 1;
    transform: rotate(-90deg);
}

.honormagicv2 .honormagicv2-sideNavWrapper button.honormagicv2-sideNav-active::after {
    opacity: 1;
}

.honormagicv2 .honormagicv2-sideNavWrapper button:hover span {
    opacity: 1;
    transform: translateX(8px);
}

.honormagicv2 .honormagicv2-sideNavWrapper button:hover svg {
    opacity: 1;
    transform: rotate(-90deg);
}

.honormagicv2 .honormagicv2-sideNavWrapper button:hover::after {
    opacity: 1;
}

.honormagicv2 .honormagicv2-sideNavWrapper circle {
    stroke: #fff !important;
}

.honormagicv2 .section-cmf.is-color-purple .right-wrapper .swiper-cmf-other {
    opacity: 0;
}

.honormagicv2 .section-cmf.is-color-gold .right-wrapper .swiper-cmf-main,
.honormagicv2 .section-cmf.is-color-black .right-wrapper .swiper-cmf-main,
.honormagicv2 .section-cmf.is-color-skin .right-wrapper .swiper-cmf-main {
    opacity: 0;
}

.honormagicv2 .section-kv .kvBuyBtn {
    display: inline-block;
    text-align: center;
    font-size: 0.9375vw;
    border-radius: 2.6041666667vw;
    border: 1px solid #000;
    color: #000;
    z-index: 4;
    padding: 0.5208333333vw 1.8229166667vw;
    margin-top: 2.0833333333vw;
    line-height: 1.4;
}

@media (min-width: 1366px) {
    .honormagicv2 .section-kv .kvBuyBtn:hover {
        color: #fff;
        background: #000;
    }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
    .honormagicv2 .section-kv .kvBuyBtn {
        margin: 8vw auto 0;
        font-size: 2.6666666667vw;
        transform: none;
        display: block;
        width: 17.87109vw;
        padding: 1.6vw 0;
        border-radius: 13.3333333333vw;
    }
}

@media (max-aspect-ratio: 660 / 758) and (max-width: 1050px) {
    .honormagicv2 .honormagicv2-outer.outer1 {
        background: #000;
        color: #fff;
        margin-top: -330vh;
    }

    .honormagicv2 .honormagicv2-outer.outer2 {
        margin-top: -15vh;
    }
}

@media (max-aspect-ratio: 660 / 758) and (max-width: 600px) {
    .honormagicv2 .honormagicv2-outer.outer1 {
        background: #000;
        color: #fff;
        margin-top: -300vh;
    }

    .honormagicv2 .honormagicv2-outer.outer2 {
        margin-top: -100vh;
    }
}