a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

input,
textarea {
    margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

blockquote,
q {
    quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*,
:after,
:before {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -ms-font-feature-settings: "kern" 1;
    font-feature-settings: "kern", normal;
    font-variant-numeric: normal;
    word-wrap: break-word;
}

button,
input[type="button"],
input[type="submit"] {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: 0 0;
    color: inherit;
    font: inherit;
    text-align: center;
    outline: 0;
    border-radius: 0;
    cursor: pointer;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
}

a {
    outline: 0;
    color: inherit;
    text-decoration: none;
}

svg {
    overflow: visible;
}

@font-face {
    font-family: 'PPEditorialNew';
    font-style: normal;
    font-weight: 200;
    src: url("/_nuxt/fonts/PPEditorialNew-Ultralight.8acee99.woff2") format("woff2"),
        url("/_nuxt/fonts/PPEditorialNew-Ultralight.f4eb1ab.woff") format("woff");
    font-display: swap;
    unicode-range: U+0000-00FF;
}

@font-face {
    font-family: 'KelsonSansRU';
    font-style: normal;
    font-weight: 400;
    src: url("/_nuxt/fonts/KelsonSansRU-Normal.0515a5d.woff2") format("woff2"),
        url("/_nuxt/fonts/KelsonSansRU-Normal.129d96b.woff") format("woff");
    font-display: swap;
    unicode-range: U+0000-00FF;
}

html {
    --scrollbar-width: 0px;
    --window-height: 100vh;
    --screen-height: 100vh;
    --first-screen-height: 100vh;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    font-size: 1600px;
    cursor: none;
}

html[lang="en-US"] {
    --font-serif: "PPEditorialNew";
    --font-sans-serif: "KelsonSansRU";
    --font-additional: "Libre Franklin";
}

html[lang="ja-JP"] {
    --font-serif: "PPEditorialNew Digits and Latin", "Shippori Mincho";
    --font-sans-serif: "KelsonSansRU Digits and Latin", "Noto Sans JP";
    --font-additional: "KelsonSansRU Digits and Latin", "Noto Sans JP";
}

html[lang="zh-Hans"] {
    --font-serif: "PPEditorialNew Digits and Latin", "fz-shu-song-gb18030";
    --font-sans-serif: "KelsonSansRU Digits and Latin", "Noto Sans SC";
    --font-additional: "KelsonSansRU Digits and Latin", "Noto Sans SC";
}

a,
button {
    touch-action: manipulation;
    cursor: none;
}

html.no-transition * {
    transition: none !important;
}

html:not(.scrollable) {
    padding-right: 0;
    padding-right: var(--scrollbar-width);
    overflow-y: hidden;
}

body {
    font-family: "PPEditorialNew" !important;
    font-weight: 200;
    font-size: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -ms-font-feature-settings: "kern" 1;
    font-feature-settings: "kern";
    word-wrap: break-word;
}

h1,
h2,
h3,
h4 {
    font-weight: 200;
}

button,
input,
textarea {
    font-family: var(--font-serif);
    font-weight: 200;
}

.LayoutDefault-sizeReference {
    position: absolute;
    width: 1px;
    left: -10px;
    height: clamp(46.75vw, 100vh, 100vh);
}

.common-video {
    position: absolute;
    width: 0.35625rem;
    height: 0.35625rem;
    left: 50%;
    top: 50%;
    margin-left: -0.178125rem;
    margin-top: -0.178125rem;
}

.inactiveChapter {
    pointer-events: none;
}

.inactiveChapter * {
    will-change: auto !important;
    transform: none !important;
    z-index: auto !important;
    filter: none !important;
    touch-action: auto !important;
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .LayoutDefault-sizeReference {
        height: clamp(44.9vw, 100vh, 100vh);
    }

    .common-video {
        width: 0.2675rem;
        height: 0.2675rem;
        margin-left: -0.13375rem;
        margin-top: -0.13375rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .LayoutDefault-sizeReference {
        height: clamp(72.16vw, 100vh, 100vh);
    }

    .common-video {
        width: 0.199375rem;
        height: 0.199375rem;
        margin-left: -0.099375rem;
        margin-top: -0.099375rem;
    }
}

@media (max-width: 767px) {
    .LayoutDefault-sizeReference {
        height: clamp(103.59vw, 100vh, 100vh);
    }

    .common-video {
        width: 0.13125rem;
        height: 0.13125rem;
        margin-left: -0.065625rem;
        margin-top: -0.065625rem;
    }
}

@media (min-width: 1920px) {
    .common-video {
        width: 684px;
        height: 684px;
        margin-left: -342px;
        margin-top: -342px;
    }
}

.CommonHeader[data-v-ce0711c8] {
    color: #fff;
    transition: color 0.2s;
}

.CommonHeader.isBlack[data-v-ce0711c8] {
    color: #000;
}

.CommonHeader-menu[data-v-ce0711c8] {
    position: fixed;
    left: 32px;
    top: 25px;
    z-index: 1000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: var(--font-sans-serif);
    font-weight: 400;
    font-size: 15.6px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    opacity: 0;
    transition: opacity 0.7s ease-out 2.1s;
}

.isPointer .CommonHeader-menu:hover svg[data-v-ce0711c8] {
    transform: rotate(90deg);
}

.loaded .CommonHeader-menu[data-v-ce0711c8] {
    opacity: 1;
}

.CommonHeader-menu svg[data-v-ce0711c8] {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    margin-top: -2px;
}

.isPointer .CommonHeader-menu svg[data-v-ce0711c8] {
    transition: transform 0.5s linear;
}

.CommonHeader-journey[data-v-ce0711c8] {
    position: fixed;
    right: 32px;
    top: 25px;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: var(--font-sans-serif);
    font-weight: 400;
    font-size: 15.6px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
}

.hasActiveModals .CommonHeader-journey[data-v-ce0711c8] {
    right: calc(32px + var(--scrollbar-width));
}

.CommonHeader-chapter[data-v-ce0711c8] {
    position: fixed;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    top: 25px;
    z-index: 1000;
    text-align: center;
    font-family: var(--font-sans-serif);
    font-weight: 400;
    font-size: 15.6px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
}

.CommonHeader .CommonHeader-enter-active[data-v-ce0711c8] {
    transition:
        opacity 0.25s ease-out,
        filter 0.25s ease-out;
}

.CommonHeader .CommonHeader-leave-active[data-v-ce0711c8] {
    transition:
        opacity 0.25s ease-in,
        filter 0.25s ease-in;
}

.CommonHeader .CommonHeader-enter[data-v-ce0711c8],
.CommonHeader .CommonHeader-leave-to[data-v-ce0711c8] {
    opacity: 0;
    filter: blur(0.35em);
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .CommonHeader-menu[data-v-ce0711c8] {
        font-size: 13px;
        line-height: 16px;
    }

    .CommonHeader-menu svg[data-v-ce0711c8] {
        margin-right: 7px;
    }

    .CommonHeader-chapter[data-v-ce0711c8],
    .CommonHeader-journey[data-v-ce0711c8] {
        font-size: 13px;
        line-height: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .CommonHeader-menu[data-v-ce0711c8] {
        font-size: 13px;
        line-height: 16px;
        left: 24px;
    }

    .CommonHeader-menu svg[data-v-ce0711c8] {
        margin-right: 7px;
    }

    .hasActiveModals .CommonHeader-journey[data-v-ce0711c8] {
        right: calc(24px + var(--scrollbar-width));
    }

    .CommonHeader-journey[data-v-ce0711c8] {
        right: 24px;
    }

    .CommonHeader-chapter[data-v-ce0711c8],
    .CommonHeader-journey[data-v-ce0711c8] {
        font-size: 13px;
        line-height: 16px;
    }
}

@media (max-width: 767px) {
    .CommonHeader-menu[data-v-ce0711c8] {
        font-size: 13px;
        line-height: 16px;
        left: 16px;
        top: 20px;
    }

    .CommonHeader-menu svg[data-v-ce0711c8] {
        margin-right: 7px;
    }

    .hasActiveModals .CommonHeader-journey[data-v-ce0711c8] {
        right: calc(16px + var(--scrollbar-width));
    }

    .CommonHeader-journey[data-v-ce0711c8] {
        font-size: 13px;
        line-height: 16px;
        right: 16px;
        top: 20px;
    }

    .CommonHeader-chapter[data-v-ce0711c8] {
        display: none;
    }
}

.CommonBottomScroll[data-v-475586ad] {
    position: fixed;
    left: 32px;
    bottom: 25px;
    z-index: 1000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: var(--font-sans-serif);
    font-weight: 400;
    font-size: 15.6px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    color: #fff;
    transition: color 0.2s;
}

.CommonBottomScroll.isBlack[data-v-475586ad] {
    color: #000;
}

.CommonBottomScroll svg[data-v-475586ad] {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    animation: beat-475586ad 0.9s linear infinite both;
}

@keyframes beat-475586ad {
    0% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(35%);
    }

    70% {
        transform: translateY(0);
    }
}

.CommonBottomScroll-enter-active[data-v-475586ad] {
    transition:
        opacity 0.25s ease-out,
        filter 0.25s ease-out;
}

.CommonBottomScroll-leave-active[data-v-475586ad] {
    transition:
        opacity 0.25s ease-in,
        filter 0.25s ease-in;
}

.CommonBottomScroll-enter[data-v-475586ad],
.CommonBottomScroll-leave-to[data-v-475586ad] {
    opacity: 0;
    filter: blur(6px);
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .CommonBottomScroll[data-v-475586ad] {
        font-size: 13px;
        line-height: 16px;
    }

    .CommonBottomScroll svg[data-v-475586ad] {
        margin-right: 6px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .CommonBottomScroll[data-v-475586ad] {
        font-size: 13px;
        line-height: 16px;
        left: 24px;
    }

    .CommonBottomScroll svg[data-v-475586ad] {
        margin-right: 6px;
    }
}

@media (max-width: 767px) {
    .CommonBottomScroll[data-v-475586ad] {
        font-size: 13px;
        line-height: 16px;
        left: 16px;
        bottom: 14px;
    }

    .CommonBottomScroll svg[data-v-475586ad] {
        margin-right: 5px;
    }
}

.CommonLangSwitcher[data-v-382bcaac] {
    font-family: var(--font-sans-serif);
    font-weight: 400;
    font-size: 15.6px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    transition:
        color 0.2s,
        opacity 0.7s ease-out 2.1s;
    opacity: 0;
}

.loaded .CommonLangSwitcher[data-v-382bcaac] {
    opacity: 1;
}

.CommonLangSwitcher.position-main.isBlack[data-v-382bcaac] {
    color: #000;
}

.CommonLangSwitcher.position-main[data-v-382bcaac] {
    position: fixed;
    left: 125px;
    top: 25px;
    color: #fff;
    z-index: 1000;
}

.CommonLangSwitcher.position-menu[data-v-382bcaac] {
    position: absolute;
    right: 32px;
    top: 25px;
    color: #000;
}

.CommonLangSwitcher a.isActive[data-v-382bcaac] {
    border-bottom: 1px solid;
    pointer-events: none;
}

.CommonLangSwitcher-enter-active[data-v-382bcaac] {
    transition:
        opacity 0.25s ease-out,
        filter 0.25s ease-out;
}

.CommonLangSwitcher-leave-active[data-v-382bcaac] {
    transition:
        opacity 0.25s ease-in,
        filter 0.25s ease-in;
}

.CommonLangSwitcher-enter[data-v-382bcaac],
.CommonLangSwitcher-leave-to[data-v-382bcaac] {
    opacity: 0;
    filter: blur(6px);
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .CommonLangSwitcher[data-v-382bcaac] {
        font-size: 13px;
        line-height: 16px;
    }

    .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 118px;
    }

    [lang="ja-JP"] .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 140px;
    }

    [lang="zh-Hans"] .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 112px;
    }

    .CommonLangSwitcher.position-menu[data-v-382bcaac] {
        right: 23px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .CommonLangSwitcher[data-v-382bcaac] {
        font-size: 13px;
        line-height: 16px;
    }

    .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 110px;
    }

    [lang="ja-JP"] .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 132px;
    }

    [lang="zh-Hans"] .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 104px;
    }

    .CommonLangSwitcher.position-menu[data-v-382bcaac] {
        top: 24px;
        right: 24px;
    }
}

@media (max-width: 767px) {
    .CommonLangSwitcher[data-v-382bcaac] {
        font-size: 13px;
        line-height: 16px;
    }

    .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 50%;
        top: 20px;
        text-align: center;
        width: 100px;
        margin-left: -50px;
    }

    .CommonLangSwitcher.position-menu[data-v-382bcaac] {
        right: 16px;
        top: 14px;
    }
}

@media (min-width: 1600px) {
    [lang="ja-JP"] .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 151px;
    }

    [lang="zh-Hans"] .CommonLangSwitcher.position-main[data-v-382bcaac] {
        left: 118px;
    }
}

.ChapterIntro {
    position: relative;
    height: calc(var(--screen-height) * 4);
    background: linear-gradient(180deg,
            #251b59,
            #fff4e6 30%,
            #fff4e6 60%,
            #e69293 73.33%,
            #3d2966 86.66%,
            #181027 97.94%);
    --intro-height: clamp(46.75vw, var(--preferred-height), var(--preferred-height));
    --images-height: 1.125rem;
}

.ChapterIntro-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ChapterIntro-bg1 {
    position: absolute;
    left: 0;
    top: 0;
    height: 56.25%;
    width: 100%;
    background: linear-gradient(180deg, #251b59, #fff4e6 50%, #fff4e6);
}

.ChapterIntro-bg2 {
    position: absolute;
    bottom: -20%;
    left: 0;
    height: 63.75%;
    width: 100%;
    background: radial-gradient(122.11% 31.16% at 50%,
            at 79.72%,
            #080c1a 0,
            #1e1326 52.08%,
            #4b2d5a 100%,
            #4b2d5a 0);
    background: radial-gradient(122.11% 31.16% at 50% 79.72%,
            #080c1a 26.76%,
            #1e1326 52.08%,
            #4b2d5a 100%,
            #4b2d5a 0);
}

.ChapterIntro-bg3 {
    position: absolute;
    left: 0;
    margin-top: -1px;
    top: 56.25%;
    height: 29.58333333%;
    width: 100%;
    background: linear-gradient(180deg, #fff4e6, #dc8f85 42.71%, #6e3b63 81.79%, #5a2f5e 90.5%, #4b2d5a);
}

.ChapterIntro h1 {
    display: none;
}

.isTouch .ChapterIntro {
    --preferred-height: calc(85vh - var(--screen-height) + var(--first-screen-height));
}

.isPointer .ChapterIntro {
    --preferred-height: 85vh;
}

.ChapterIntro-wrapper {
    overflow: hidden;
    position: relative;
}

.ChapterIntro-top {
    height: var(--intro-height);
}

.ChapterIntro-powered {
    position: absolute;
    right: 32px;
    top: 26px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    font-family: var(--font-sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 10.3px;
    line-height: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    opacity: 0;
    transition: opacity 0.7s ease-out 2.1s;
}

.loaded .ChapterIntro-powered {
    opacity: 1;
}

.ChapterIntro-powered svg {
    width: 90px;
    height: 40px;
    margin-left: 4px;
    margin-top: -2px;
}

.ChapterIntro-title {
    padding: 0.055rem 0.02rem 0;
}

.ChapterIntro-title svg:first-child {
    display: block;
    width: 100%;
    height: 0.13rem;
    margin-bottom: 0.005rem;
    opacity: 0;
    filter: blur(0.0125rem);
    transition: opacity 0.8s ease-out 0.5s;
    transition-property: opacity, filter;
}

.loaded .ChapterIntro-title svg:first-child {
    opacity: 1;
    filter: none;
}

[lang="ja-JP"] .ChapterIntro-title svg:first-child {
    height: 0.123125rem;
    margin-top: 0.0875rem;
    margin-bottom: 0.0875rem;
}

[lang="zh-Hans"] .ChapterIntro-title svg:first-child {
    height: 0.220625rem;
    margin-top: 0.02625rem;
    margin-bottom: 0.055625rem;
}

.ChapterIntro-title svg:last-child {
    display: block;
    width: 100%;
    height: 0.13rem;
    opacity: 0;
    filter: blur(0.0125rem);
    transition: opacity 0.8s ease-out 0.6s;
    transition-property: opacity, filter;
}

.loaded .ChapterIntro-title svg:last-child {
    opacity: 1;
    filter: none;
}

[lang="ja-JP"] .ChapterIntro-title svg:last-child,
[lang="zh-Hans"] .ChapterIntro-title svg:last-child {
    display: none;
}

.ChapterIntro-foreword {
    position: relative;
    padding-right: 0.02rem;
    margin-top: 0.036875rem;
    width: 0.48rem;
    font-size: 0.0375rem;
    line-height: 0.04rem;
    font-feature-settings: "case" on;
    color: #fff;
    margin-left: auto;
    box-sizing: content-box;
    opacity: 0;
    filter: blur(0.25em);
    transition: opacity 0.7s ease-out 1.4s;
    transition-property: opacity, filter;
}

.loaded .ChapterIntro-foreword {
    opacity: 1;
    filter: none;
}

.ChapterIntro-images {
    position: relative;
    width: 100%;
    height: var(--images-height);
}

.ChapterIntro-images svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.ChapterIntro-images svg line {
    stroke: rgba(0, 0, 0, 0.15);
}

.ChapterIntro-image {
    position: absolute;
    font-size: 0.025rem;
}

.ChapterIntro-image .CommonImageLocal,
.ChapterIntro-image video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ChapterIntro-image .CommonImageLocal {
    will-change: transform;
}

.ChapterIntro-image-1 {
    width: 0.14rem;
    height: 0.14rem;
    top: 0.26rem;
    left: 0.16rem;
}

.ChapterIntro-image-2 {
    width: 0.2rem;
    height: 0.3rem;
    top: 0;
    left: 0.4rem;
    opacity: 0;
    filter: blur(0.0125rem);
    transition: opacity 0.7s ease-out 1.4s;
    transition-property: opacity, filter;
}

.loaded .ChapterIntro-image-2 {
    opacity: 1;
    filter: none;
}

.ChapterIntro-image-3 {
    width: 0.2rem;
    height: 0.15rem;
    top: 0.19rem;
    left: 0.7rem;
}

.loaded .ChapterIntro-image-3 {
    opacity: 1;
    filter: none;
}

.ChapterIntro-image-4 {
    width: 0.22rem;
    height: 0.165rem;
    top: 0.46rem;
    left: 0.02rem;
}

.ChapterIntro-image-5 {
    width: 0.12rem;
    height: 0.18rem;
    top: 0.5rem;
    left: 0.34rem;
}

.ChapterIntro-image-6 {
    width: 0.1rem;
    height: 0.1rem;
    top: 0.44rem;
    left: 0.62rem;
}

.ChapterIntro-image-7 {
    width: 0.16rem;
    height: 0.12rem;
    top: 0.52rem;
    left: 0.78rem;
}

.ChapterIntro-stickyWrapper {
    position: absolute;
    bottom: calc(0px - var(--screen-height) * 2);
    left: 0;
    width: 100%;
    top: calc(var(--intro-height) + var(--images-height) - var(--screen-height) / 2);
    z-index: 5;
}

.ChapterIntro-stickyBlock {
    position: sticky;
    height: var(--screen-height);
    top: 0;
    width: 100%;
    overflow: hidden;
}

.ChapterIntro-videoIdle canvas {
    position: absolute;
    left: 17.55208333%;
    top: 33.28125%;
    width: 64.375%;
    height: 34.27083333%;
}

.ChapterIntro-videoFalling canvas {
    position: absolute;
    left: 15.625%;
    top: 39.6875%;
    width: 68.38541667%;
    height: 60.3125%;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ChapterIntro {
        height: calc(var(--screen-height) * 3);
        --intro-height: clamp(72.16vw, var(--preferred-height), var(--preferred-height));
        --images-height: 0.6075rem;
    }

    .ChapterIntro-powered {
        right: 24px;
    }

    .ChapterIntro-powered svg {
        width: 72px;
        height: 32px;
    }

    .ChapterIntro-title {
        padding: 0.085rem 0.015rem 0;
    }

    .ChapterIntro-title svg:first-child {
        height: 0.08125rem;
        margin-bottom: 0.00625rem;
    }

    [lang="ja-JP"] .ChapterIntro-title svg:first-child {
        height: 0.07695313rem;
        margin-top: 0.0546875rem;
        margin-bottom: 0.0546875rem;
    }

    [lang="zh-Hans"] .ChapterIntro-title svg:first-child {
        height: 0.13789063rem;
        margin-top: 0.01640625rem;
        margin-bottom: 0.03476563rem;
    }

    .ChapterIntro-title svg:last-child {
        height: 0.08125rem;
    }

    .ChapterIntro-foreword {
        padding-right: 0.015rem;
        margin-top: 0.0225rem;
        width: 0.225rem;
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterIntro-image {
        font-size: 0.02rem;
    }

    .ChapterIntro-image-1 {
        width: 0.065625rem;
        height: 0.065625rem;
        top: 0.121875rem;
        left: 0.080625rem;
    }

    .ChapterIntro-image-2 {
        width: 0.09375rem;
        height: 0.140625rem;
        top: 0;
        left: 0.193125rem;
    }

    .ChapterIntro-image-3 {
        opacity: 0;
        filter: blur(0.0125rem);
        transition: opacity 0.7s ease-out 1.6s;
        transition-property: opacity, filter;
        width: 0.09375rem;
        height: 0.07rem;
        top: 0.09rem;
        left: 0.33375rem;
    }

    .ChapterIntro-image-4 {
        width: 0.103125rem;
        height: 0.0775rem;
        top: 0.215625rem;
        left: 0.015rem;
    }

    .ChapterIntro-image-5 {
        width: 0.05625rem;
        height: 0.084375rem;
        top: 0.234375rem;
        left: 0.165rem;
    }

    .ChapterIntro-image-6 {
        width: 0.046875rem;
        height: 0.046875rem;
        top: 0.205625rem;
        left: 0.29625rem;
    }

    .ChapterIntro-image-7 {
        width: 0.075rem;
        height: 0.05625rem;
        top: 0.24375rem;
        left: 0.37125rem;
    }
}

@media (max-width: 767px) {
    .ChapterIntro {
        height: calc(var(--screen-height) * 3.125);
    }

    .ChapterIntro-bg1 {
        height: 60.2%;
    }

    .ChapterIntro-bg2 {
        background: radial-gradient(372.78% 36.78% at 50%,
                at 79.72%,
                #080c1a 0,
                #1e1326 65.1%,
                #4b2d5a 100%,
                #4b2d5a 0);
        background: radial-gradient(372.78% 36.78% at 50% 79.72%,
                #080c1a 32.29%,
                #1e1326 65.1%,
                #4b2d5a 100%,
                #4b2d5a 0);
        top: 52%;
        height: 80%;
    }

    .ChapterIntro-bg3 {
        top: 52%;
        height: 29.6%;
    }

    .ChapterIntro {
        --intro-height: clamp(103.59vw, var(--preferred-height), var(--preferred-height));
        --images-height: 0.4925rem;
    }

    .ChapterIntro-powered {
        right: 16px;
        top: 18px;
    }

    .ChapterIntro-powered span {
        display: none;
    }

    .ChapterIntro-powered svg {
        width: 54px;
        height: 24px;
    }

    .ChapterIntro-title {
        padding: 0.075rem 0.01rem 0;
    }

    .ChapterIntro-title svg:first-child {
        height: 0.0325rem;
    }

    [lang="ja-JP"] .ChapterIntro-title svg:first-child {
        height: 0.03078125rem;
        margin-top: 0.021875rem;
        margin-bottom: 0.021875rem;
    }

    [lang="zh-Hans"] .ChapterIntro-title svg:first-child {
        height: 0.05515625rem;
        margin-top: 0.0065625rem;
        margin-bottom: 0.01390625rem;
    }

    .ChapterIntro-title svg:last-child {
        height: 0.0325rem;
    }

    .ChapterIntro-foreword {
        padding-right: 0.01rem;
        margin-top: 0.0175rem;
        width: 0.135rem;
        font-size: 0.0125rem;
        line-height: 0.015rem;
    }

    .ChapterIntro-image {
        font-size: 0.0125rem;
    }

    .ChapterIntro-image-1 {
        width: 0.045rem;
        height: 0.045rem;
        top: 0.145rem;
        left: 0.0225rem;
    }

    .ChapterIntro-image-2 {
        width: 0.09rem;
        height: 0.135rem;
        top: 0;
        left: 0.055rem;
    }

    .ChapterIntro-image-3 {
        width: 0.075rem;
        height: 0.05625rem;
        top: 0.125rem;
        left: 0.115rem;
    }

    .ChapterIntro-image-4 {
        width: 0.085rem;
        height: 0.06375rem;
        top: 0.20625rem;
        left: 0.0025rem;
    }

    .ChapterIntro-image-5 {
        width: 0.045rem;
        height: 0.0675rem;
        top: 0.2225rem;
        left: 0.1225rem;
    }

    .ChapterIntro-image-6 {
        width: 0.035rem;
        height: 0.035rem;
        top: 0.315rem;
        left: 0.0225rem;
    }

    .ChapterIntro-image-7 {
        width: 0.06rem;
        height: 0.045rem;
        top: 0.3225rem;
        left: 0.13rem;
    }

    .ChapterIntro-videoIdle canvas {
        left: 17.55208333%;
        top: 33.28125%;
        width: 64.375%;
        height: 34.27083333%;
    }

    .ChapterIntro-videoFalling canvas {
        left: 15.625%;
        top: 39.6875%;
        width: 68.38541667%;
        height: 60.3125%;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .ChapterIntro {
        --intro-height: clamp(53.7vw, var(--preferred-height), var(--preferred-height));
        --images-height: 0.805rem;
    }

    .ChapterIntro-powered svg {
        width: 72px;
        height: 32px;
    }

    .ChapterIntro-title {
        padding: 0.085rem 0.02rem 0;
    }

    .ChapterIntro-title svg:first-child {
        height: 0.08125rem;
    }

    [lang="ja-JP"] .ChapterIntro-title svg:first-child {
        height: 0.07695313rem;
        margin-top: 0.0546875rem;
        margin-bottom: 0.0546875rem;
    }

    [lang="zh-Hans"] .ChapterIntro-title svg:first-child {
        height: 0.13789063rem;
        margin-top: 0.01640625rem;
        margin-bottom: 0.03476563rem;
    }

    .ChapterIntro-title svg:last-child {
        height: 0.08125rem;
    }

    .ChapterIntro-foreword {
        padding-right: 0.02rem;
        margin-top: 0.0225rem;
        width: 0.3rem;
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterIntro-image {
        font-size: 0.02rem;
    }

    .ChapterIntro-image-1 {
        width: 0.0875rem;
        height: 0.0875rem;
        top: 0.1625rem;
        left: 0.1075rem;
    }

    .ChapterIntro-image-2 {
        width: 0.125rem;
        height: 0.1875rem;
        top: 0;
        left: 0.2575rem;
    }

    .ChapterIntro-image-3 {
        width: 0.125rem;
        height: 0.09375rem;
        top: 0.11875rem;
        left: 0.445rem;
    }

    .ChapterIntro-image-4 {
        width: 0.1375rem;
        height: 0.103125rem;
        top: 0.2875rem;
        left: 0.02rem;
    }

    .ChapterIntro-image-5 {
        width: 0.075rem;
        height: 0.1125rem;
        top: 0.3125rem;
        left: 0.22rem;
    }

    .ChapterIntro-image-6 {
        width: 0.0625rem;
        height: 0.0625rem;
        top: 0.275rem;
        left: 0.395rem;
    }

    .ChapterIntro-image-7 {
        width: 0.1rem;
        height: 0.075rem;
        top: 0.325rem;
        left: 0.495rem;
    }
}

.ChapterBirth {
    --intro-height: 0px;
    --assembling-height: 0px;
    --ages-height: 0px;
    --depth-height: 0px;
    --pressure-height: 0px;
    --water-mining-height: 0px;
    --sand-mining-height: 0px;
    --rock-mining-height: 0px;
    --linearbg-height: 0px;
    position: relative;
    height: calc(var(--intro-height) + var(--assembling-height) + var(--ages-height) + var(--depth-height) + var(--pressure-height) + var(--water-mining-height) + var(--sand-mining-height) + var(--rock-mining-height) + var(--linearbg-height) + var(--screen-height));
}

.ChapterBirth-stickyBgWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.ChapterBirth-stickyBgBlock {
    position: sticky;
    top: 0;
    width: 100%;
    height: calc(var(--screen-height) + var(--linearbg-height));
}

.ChapterBirth-bgRadial {
    width: 100%;
    height: var(--screen-height);
    background: radial-gradient(97.92% 97.92% at 50%, at 35.16%, #080c1a 0, #1e1326 60.9%, #4b2d5a 100%),
        radial-gradient(83.44% 83.44% at 50%, at 35.16%, #181027 0, #2c1933 63.54%, #5a2d55 100%);
    background: radial-gradient(97.92% 97.92% at 50% 35.16%, #080c1a 20.31%, #1e1326 60.9%, #4b2d5a 100%),
        radial-gradient(83.44% 83.44% at 50% 35.16%, #181027 20.31%, #2c1933 63.54%, #5a2d55 100%);
}

.ChapterBirth-bgLinear {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: var(--linearbg-height);
}

.ChapterBirth-bgLinear1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -50%;
    background: radial-gradient(105.97% 50.55% at 50%, at 83.36%, #080c1a 0, #1e1326 60.9%, #4b2d5a 100%),
        radial-gradient(89.26% 45.99% at 50%, at 86.2%, #181027 0, #2c1933 63.54%, #5a2d55 100%);
    background: radial-gradient(105.97% 50.55% at 50% 83.36%, #080c1a 20.31%, #1e1326 60.9%, #4b2d5a 100%),
        radial-gradient(89.26% 45.99% at 50% 86.2%, #181027 0, #2c1933 63.54%, #5a2d55 100%);
    transform: rotate(-180deg);
}

.ChapterBirth-bgLinear2 {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 83.48958333%;
    width: 100%;
    background: linear-gradient(180deg, #4a2d59 3.65%, #533469 13.02%, #636c99 50%, #a4c6cd);
}

.ChapterBirth-stickyContentWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: calc(0px - var(--screen-height) * 2);
    z-index: 4;
}

.ChapterBirth-stickyContentBlock {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--screen-height);
    overflow: hidden;
}

.ChapterBirth-introMessage {
    position: absolute;
    left: 0.0475rem;
    right: 0.0475rem;
    bottom: 0.014375rem;
    font-size: 0.075rem;
    line-height: 0.075rem;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.02em;
    font-feature-settings: "case" on;
}

.ChapterBirth-introMessage span {
    display: none;
}

.ChapterBirth-topMessage {
    position: absolute;
    left: 0.02rem;
    top: 0.0675rem;
    width: 0.32rem;
    font-size: 0.025rem;
    line-height: 0.03rem;
    font-feature-settings: "case" on;
    color: #fff;
}

.ChapterBirth-bottomMessage {
    position: absolute;
    right: 0.02rem;
    bottom: 0.02625rem;
    width: 0.24rem;
    color: #fff;
    font-size: 0.025rem;
    line-height: 0.03rem;
}

.ChapterBirth-bottomMessage h4 {
    font-feature-settings: "case" on;
}

.ChapterBirth-bottomMessage p {
    font-family: var(--font-additional);
    font-style: normal;
    font-size: 0.010625rem;
    line-height: 0.015rem;
    font-feature-settings: "case" on;
    margin-top: 0.00375rem;
}

.ChapterBirth-ages {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterBirth-agesSvg {
    position: absolute;
    top: 0.06rem;
    left: 0.06rem;
    right: 0.06rem;
    bottom: 0.06rem;
}

.ChapterBirth-ages svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterBirth-agesDate {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    margin-top: -0.36666em;
    font-size: 0.15rem;
    line-height: 100%;
    color: #fff;
}

.ChapterBirth-agesDate.hide {
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: hsla(0, 0%, 100%, 0);
}

.ChapterBirth-agesDate span+span {
    margin-left: 0.0025rem;
}

.ChapterBirth-agesDate span {
    display: inline-block;
    width: 0.0775rem;
}

.ChapterBirth-agesDate span:last-child {
    text-align: left;
    font-size: 0.025rem;
    line-height: 120%;
    vertical-align: top;
    white-space: nowrap;
    margin-left: -1.1em;
    margin-top: -0.33em;
    width: 0;
}

.ChapterBirth-depth,
.ChapterBirth-depth svg,
.ChapterBirth-depthSvg,
.ChapterBirth-pressure,
.ChapterBirth-pressure svg,
.ChapterBirth-pressureSvg,
.ChapterBirth-videoAssembling canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterBirth-videoRotation canvas {
    position: absolute;
    left: 16.45833333%;
    top: 0;
    width: 62.96875%;
    height: 100%;
}

.ChapterBirth-staticCrystal {
    will-change: transform;
}

.ChapterBirth-staticCrystal img {
    position: absolute;
    left: 33.39375%;
    top: 27.578125%;
    width: 33.49947917%;
    height: 43.38541667%;
}

.ChapterBirth-videoWaterMining canvas {
    position: absolute;
    left: -21.46277199%;
    top: -16.79845686%;
    width: 143.15503173%;
    height: 116.59111514%;
}

.ChapterBirth-videoSandMining canvas {
    position: absolute;
    left: -35.87800317%;
    top: -33.11758651%;
    width: 168.63100635%;
    height: 168.63100635%;
}

.ChapterBirth-videoRockMining canvas {
    position: absolute;
    left: -20.46549184%;
    top: -0.29800355%;
    width: 138.16863101%;
    height: 132.63825929%;
}

@media (max-width: 767px) {
    .ChapterBirth-bgRadial {
        background: linear-gradient(180deg,
                #151121,
                #080d1b 23.96%,
                #080d1a 47.92%,
                #171122 80.21%,
                #362141);
    }

    .ChapterBirth-bgLinear1 {
        width: 100%;
        height: 25.625%;
        top: 0;
        background: linear-gradient(180deg, #362141, #4b2d5a);
        transform: none;
    }

    .ChapterBirth-bgLinear2 {
        bottom: 0;
        left: 0;
        height: 75%;
        width: 100%;
        background: linear-gradient(180deg, #4b2d5a, #533469 13.02%, #636c99 50%, #a4c6cd);
    }

    .ChapterBirth-introMessage {
        position: fixed;
        left: 0.015rem;
        right: 0.015rem;
        bottom: 0.01125rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
    }

    .ChapterBirth-introMessage span {
        display: block;
        font-family: var(--font-sans-serif);
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-feature-settings: "cpsp" on;
        margin-bottom: 15px;
    }

    .ChapterBirth-topMessage {
        left: 0.01rem;
        top: 0.0375rem;
        width: 0.18rem;
        font-size: 0.0175rem;
        line-height: 0.02rem;
    }

    .ChapterBirth-bottomMessage {
        position: fixed;
        right: 0.01rem;
        bottom: 0.009375rem;
        width: 0.18rem;
        font-size: 0.0175rem;
        line-height: 0.02rem;
    }

    .ChapterBirth-bottomMessage p {
        font-size: 0.00875rem;
        line-height: 0.0125rem;
        margin-top: 0.003125rem;
    }

    .ChapterBirth-agesSvg {
        top: 0.01rem;
        left: 0.01rem;
        right: 0.01rem;
        bottom: 0.01rem;
    }

    .ChapterBirth-agesDate {
        font-size: 0.0325rem;
    }

    [lang="zh-Hans"] .ChapterBirth-agesDate {
        font-size: 0.02875rem;
    }

    .ChapterBirth-agesDate span+span {
        margin-left: -0.003125rem;
    }

    [lang="zh-Hans"] .ChapterBirth-agesDate span+span {
        margin-left: -0.005625rem;
    }

    .ChapterBirth-agesDate span {
        width: 0.020625rem;
    }

    .ChapterBirth-agesDate span:last-child {
        font-size: 0.008125rem;
        margin-left: -1.1em;
        margin-top: -0.05em;
    }

    [lang="zh-Hans"] .ChapterBirth-agesDate span:last-child {
        font-size: 0.005rem;
        margin-left: -1.7em;
        margin-top: -0.25em;
    }

    .ChapterBirth-videoAssembling canvas {
        left: -12.5%;
        top: -12.5%;
        width: 125%;
        height: 125%;
    }

    .ChapterBirth-videoRotation canvas {
        left: 8.07291667%;
        top: -12.5%;
        width: 78.7109375%;
        height: 125%;
    }

    .ChapterBirth-staticCrystal img {
        left: 29.2421875%;
        top: 21.97265625%;
        width: 41.87434896%;
        height: 54.23177083%;
    }

    .ChapterBirth-videoWaterMining canvas {
        left: -39.32846498%;
        top: -33.49807108%;
        width: 178.94378966%;
        height: 145.73889393%;
    }

    .ChapterBirth-videoSandMining canvas {
        left: -57.34750397%;
        top: -53.89698313%;
        width: 210.78875793%;
        height: 210.78875793%;
    }

    .ChapterBirth-videoRockMining canvas {
        left: -38.0818648%;
        top: -12.87250444%;
        width: 172.71078876%;
        height: 165.79782412%;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .ChapterBirth-introMessage {
        left: 0.02rem;
        right: 0.02rem;
        bottom: 0.014375rem;
        font-size: 0.05rem;
        line-height: 0.05rem;
    }

    .ChapterBirth-topMessage {
        left: 0.02rem;
        top: 0.060625rem;
        width: 0.2rem;
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterBirth-bottomMessage {
        right: 0.02rem;
        bottom: 0.021875rem;
        width: 0.2rem;
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterBirth-bottomMessage p {
        font-size: 0.00875rem;
        line-height: 0.0125rem;
        margin-top: 0.0025rem;
    }

    .ChapterBirth-agesSvg {
        top: 0.0625rem;
        left: 0.0625rem;
        right: 0.0625rem;
        bottom: 0.0625rem;
    }

    .ChapterBirth-agesDate {
        font-size: 0.095rem;
    }

    .ChapterBirth-agesDate span+span {
        margin-left: 0.0025rem;
    }

    [lang="zh-Hans"] .ChapterBirth-agesDate span+span {
        margin-left: 0;
    }

    .ChapterBirth-agesDate span {
        width: 0.05rem;
    }

    .ChapterBirth-agesDate span:last-child {
        font-size: 0.02rem;
        margin-left: -0.5em;
        margin-top: -0.21em;
    }

    [lang="zh-Hans"] .ChapterBirth-agesDate span:last-child {
        font-size: 0.015rem;
        margin-left: -1.15em;
        margin-top: -0.27em;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ChapterBirth-introMessage {
        left: 0.034375rem;
        right: 0.034375rem;
        bottom: 0.014375rem;
        font-size: 0.045rem;
        line-height: 0.045rem;
    }

    .ChapterBirth-topMessage {
        left: 0.015rem;
        top: 0.060625rem;
        width: 0.2rem;
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterBirth-bottomMessage {
        right: 0.015rem;
        bottom: 0.021875rem;
        width: 0.1875rem;
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterBirth-bottomMessage p {
        font-size: 0.00875rem;
        line-height: 0.0125rem;
        margin-top: 0.0025rem;
    }

    .ChapterBirth-agesSvg {
        top: 0.0525rem;
        left: 0.0525rem;
        right: 0.0525rem;
        bottom: 0.0525rem;
    }

    .ChapterBirth-agesDate {
        font-size: 0.0825rem;
    }

    [lang="zh-Hans"] .ChapterBirth-agesDate {
        font-size: 0.075rem;
    }

    .ChapterBirth-agesDate span+span {
        margin-left: -0.00625rem;
    }

    [lang="zh-Hans"] .ChapterBirth-agesDate span+span {
        margin-left: -0.00875rem;
    }

    .ChapterBirth-agesDate span {
        width: 0.04625rem;
    }

    .ChapterBirth-agesDate span:last-child {
        font-size: 0.02rem;
        margin-left: -1em;
        margin-top: -0.1em;
    }

    [lang="zh-Hans"] .ChapterBirth-agesDate span:last-child {
        font-size: 0.01125rem;
        margin-left: -1.7em;
        margin-top: -0.2em;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 64/35) {
    .ChapterBirth-introMessage {
        left: 0.0675rem;
        right: 0.0675rem;
        font-size: 0.040625rem;
        line-height: 0.040625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 256/125) {
    .ChapterBirth-introMessage {
        left: 0.1175rem;
        right: 0.1175rem;
        font-size: 0.035rem;
        line-height: 0.035rem;
    }
}

@media (min-width: 1600px) {
    [lang="zh-Hans"] .ChapterBirth-agesDate span:last-child {
        margin-left: -1.05em;
        margin-top: -0.27em;
    }
}

.CommonAnimator-panel {
    position: fixed;
    top: 60px;
    left: 10px;
    width: 1050px;
    height: 400px;
    background: #fff;
    color: #000;
    z-index: 9999999;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    font-family: sans-serif;
    padding: 10px;
    text-align: left;
    line-height: 1;
    display: none;
    grid-gap: 0 40px;
    gap: 0 40px;
}

.CommonAnimator-panel input {
    width: 300px;
}

.CommonAnimator-panel label {
    margin-left: 10px;
}

.CommonAnimator-panelBlock {
    margin-bottom: 30px;
}

.CommonAnimator-panel select {
    font-size: 20px;
}

.CommonAnimator-clone,
.CommonAnimator-cloneContent,
.CommonAnimator-cloneContentInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.CommonAnimator-cloneContentInner {
    transform-origin: 0 50%;
}

.ChapterOrigin {
    --intro-height: 0px;
    --article-height: 0px;
    --globe-height: 0px;
    --regions-height: 0px;
    --bottombg-height: 0px;
    position: relative;
    height: calc(var(--intro-height) + var(--article-height) + var(--globe-height) + var(--regions-height) + var(--bottombg-height) + var(--screen-height));
}

.ChapterOrigin-stickyBgWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.ChapterOrigin-stickyBgBlock {
    position: sticky;
    top: 0;
    width: 100%;
    height: calc(var(--screen-height) + var(--bottombg-height));
}

.ChapterOrigin-bgTop {
    width: 100%;
    height: var(--screen-height);
    background: linear-gradient(180deg, #a3c5cc, #fff5e6);
}

.ChapterOrigin-bgBottom {
    width: 100%;
    height: var(--bottombg-height);
    background: linear-gradient(180deg, #fff5e6, #a3ccc2);
}

.ChapterOrigin-stickyContentWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: calc(0px - var(--screen-height) * 2);
    z-index: 3;
}

.ChapterOrigin-stickyContentBlock {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--screen-height);
    overflow: hidden;
}

.ChapterOrigin-stickyContentBlock.isInactive {
    position: fixed;
}

.ChapterOrigin-introMessage {
    position: absolute;
    left: 0.0825rem;
    right: 0.0825rem;
    bottom: 0.014375rem;
    font-size: 0.075rem;
    line-height: 0.075rem;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.02em;
    font-feature-settings: "case" on;
}

.ChapterOrigin-introMessage span {
    display: none;
}

.ChapterOrigin-article {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    padding: 0 0.02rem;
}

.ChapterOrigin-article>video {
    position: relative;
    display: block;
    width: 0.2rem;
    height: 0.3rem;
    margin: 0 auto;
}

.ChapterOrigin-article>p {
    margin-top: 0.03rem;
    font-weight: 200;
    font-size: 0.05rem;
    line-height: 0.05rem;
    letter-spacing: -0.01em;
    font-feature-settings: "case" on;
    color: rgba(0, 0, 0, 0.85);
    padding-right: 0.04rem;
}

.ChapterOrigin-articleContent {
    padding-bottom: 1px;
    margin-top: 0.135rem;
    display: flex;
    justify-content: space-between;
    grid-gap: 0 0.08rem;
    gap: 0 0.08rem;
}

.ChapterOrigin-articleContent>video {
    width: 0.44rem;
    height: 0.65875rem;
}

.ChapterOrigin-articleContentRight {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
}

.ChapterOrigin-articleContentRight p {
    font-weight: 200;
    font-size: 0.025rem;
    line-height: 0.03rem;
    font-feature-settings: "case" on;
    color: rgba(0, 0, 0, 0.85);
}

.ChapterOrigin-articleContentRight p+p {
    margin-top: 1.2em;
}

.ChapterOrigin-articleContentRight .CommonImageLocal {
    position: relative;
    margin-top: 0.14875rem;
    width: 0.24rem;
    height: 0.12rem;
    -o-object-fit: cover;
    object-fit: cover;
}

.ChapterOrigin-globeMessage {
    position: absolute;
    left: 0.06375rem;
    right: 0.06375rem;
    bottom: 0.029375rem;
    font-size: 0.05rem;
    line-height: 0.05rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.01em;
    font-feature-settings: "case" on;
}

.ChapterOrigin-ticker {
    position: absolute;
    left: 100%;
    margin-top: -0.106875rem;
    font-weight: 200;
    font-size: 0.2rem;
    line-height: 0.25625rem;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-feature-settings: "case" on;
    color: hsla(0, 0%, 100%, 0.85);
    white-space: nowrap;
    padding: 0 0.0125rem;
    will-change: transform;
}

.ChapterOrigin-globe,
.ChapterOrigin-globe svg,
.ChapterOrigin-globeDiamonds,
.ChapterOrigin-globeSvg,
.ChapterOrigin-regions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterOrigin-globeDiamonds {
    pointer-events: none;
}

.ChapterOrigin-globeDiamonds div {
    position: absolute;
    width: 0.19rem;
    height: 0.19rem;
    margin-left: -0.095rem;
    margin-top: -0.095rem;
}

.ChapterOrigin-globeDiamonds div .CommonImageLocal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ChapterOrigin-staticCrystal {
    pointer-events: none;
}

.ChapterOrigin-staticCrystal img {
    position: absolute;
    left: 33.39375%;
    top: 27.578125%;
    width: 33.49947917%;
    height: 43.38541667%;
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .ChapterOrigin-introMessage {
        left: 0.04rem;
        right: 0.04rem;
        bottom: 0.014375rem;
        font-size: 0.05rem;
        line-height: 0.05rem;
    }

    .ChapterOrigin-article>video {
        width: 0.15rem;
        height: 0.225rem;
    }

    .ChapterOrigin-article>p {
        margin-top: 0.02375rem;
        font-size: 0.035rem;
        line-height: 0.0375rem;
        padding-right: 0.02rem;
    }

    .ChapterOrigin-articleContent {
        margin-top: 0.09375rem;
        grid-gap: 0 0.05rem;
        gap: 0 0.05rem;
    }

    .ChapterOrigin-articleContent>video {
        width: 0.275rem;
        height: 0.4125rem;
    }

    .ChapterOrigin-articleContentRight p {
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterOrigin-articleContentRight .CommonImageLocal {
        margin-top: 0.0925rem;
        width: 0.15rem;
        height: 0.075rem;
    }

    .ChapterOrigin-globeMessage {
        left: 0.03875rem;
        right: 0.03875rem;
        bottom: 0.015rem;
        font-size: 0.035rem;
        line-height: 0.0375rem;
    }

    .ChapterOrigin-ticker {
        margin-top: -0.0775rem;
        font-size: 0.145rem;
        line-height: 0.185625rem;
        padding: 0 0.01rem;
    }

    .ChapterOrigin-globeDiamonds div {
        width: 0.13125rem;
        height: 0.13125rem;
        margin-left: -0.065625rem;
        margin-top: -0.065625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 64/35) {
    .ChapterOrigin-introMessage {
        left: 0.0925rem;
        right: 0.0925rem;
        font-size: 0.040625rem;
        line-height: 0.040625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 256/125) {
    .ChapterOrigin-introMessage {
        left: 0.1175rem;
        right: 0.1175rem;
        font-size: 0.035rem;
        line-height: 0.035rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ChapterOrigin-introMessage {
        left: 0.03rem;
        right: 0.03rem;
        bottom: 0.014375rem;
        font-size: 0.045rem;
        line-height: 0.045rem;
    }

    .ChapterOrigin-article {
        padding: 0 0.015rem;
    }

    .ChapterOrigin-article>video {
        width: 0.15rem;
        height: 0.225rem;
    }

    .ChapterOrigin-article>p {
        margin-top: 0.02375rem;
        font-size: 0.035rem;
        line-height: 0.0375rem;
        padding-right: 0.01rem;
    }

    .ChapterOrigin-articleContent {
        margin-top: 0.09125rem;
        grid-gap: 0 0.0375rem;
        gap: 0 0.0375rem;
    }

    .ChapterOrigin-articleContent>video {
        width: 0.15rem;
        height: 0.225rem;
    }

    .ChapterOrigin-articleContentRight p {
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterOrigin-articleContentRight .CommonImageLocal {
        margin-top: 0.074375rem;
        width: 0.15rem;
        height: 0.075rem;
    }

    .ChapterOrigin-globeMessage {
        left: 0.02875rem;
        right: 0.02875rem;
        bottom: 0.015rem;
        font-size: 0.035rem;
        line-height: 0.0375rem;
    }

    .ChapterOrigin-ticker {
        margin-top: -0.076875rem;
        font-size: 0.145rem;
        line-height: 0.185625rem;
        padding: 0 0.01rem;
    }

    .ChapterOrigin-globeDiamonds div {
        width: 0.13125rem;
        height: 0.13125rem;
        margin-left: -0.065625rem;
        margin-top: -0.065625rem;
    }
}

@media (max-width: 767px) {
    .ChapterOrigin-introMessage {
        position: fixed;
        left: 0.00625rem;
        right: 0.00625rem;
        bottom: 0.01125rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
    }

    .ChapterOrigin-introMessage span {
        display: block;
        font-family: var(--font-sans-serif);
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-feature-settings: "cpsp" on;
        margin-bottom: 15px;
    }

    .ChapterOrigin-article {
        padding: 0 0.01rem;
    }

    .ChapterOrigin-article>video {
        width: 0.12rem;
        height: 0.18rem;
    }

    .ChapterOrigin-article>p {
        margin-top: 0.01875rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
        padding-right: 0;
    }

    .ChapterOrigin-articleContent {
        display: block;
        margin-top: 0.03875rem;
    }

    .ChapterOrigin-articleContent>video {
        width: 0.12rem;
        height: 0.18rem;
    }

    .ChapterOrigin-articleContentRight p {
        margin-top: 0.01875rem;
        font-size: 0.0125rem;
        line-height: 0.015rem;
    }

    .ChapterOrigin-articleContentRight .CommonImageLocal {
        margin-top: 0.03625rem;
        width: 0.15rem;
        height: 0.075rem;
    }

    .ChapterOrigin-globeMessage {
        position: fixed;
        left: 0.01rem;
        right: 0.01rem;
        bottom: 0.01rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
    }

    .ChapterOrigin-globeMessage br {
        display: none;
    }

    .ChapterOrigin-ticker {
        margin-top: -0.034375rem;
        font-size: 0.065rem;
        line-height: 0.083125rem;
        padding: 0 0.00625rem;
    }

    .ChapterOrigin-globeDiamonds div {
        width: 0.0925rem;
        height: 0.0925rem;
        margin-left: -0.04625rem;
        margin-top: -0.04625rem;
    }
}

@media (max-width: 767px),
(min-width: 768px) and (max-width: 1023px) {
    .ChapterOrigin-introMessage br {
        display: none;
    }
}

.MineCard {
    position: absolute;
    padding: 0.015rem 0 0 0.12rem;
    margin-top: -0.069375rem;
    margin-left: 0.00125rem;
}

.MineCard.isInactive {
    pointer-events: none;
}

.MineCard.isInactive .MineCard-image img {
    transition: none;
}

.isPointer .MineCard:hover .MineCard-image img {
    opacity: 1 !important;
    filter: blur(0) !important;
}

.MineCard-imageWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.105rem;
    height: 0.14rem;
}

.MineCard-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.8;
    filter: blur(0.00375rem);
}

.isPointer .MineCard-image img {
    transition:
        opacity 0.15s linear,
        filter 0.15s linear;
}

.MineCard-diamond img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.19rem;
    height: 0.19rem;
    margin-left: -0.09625rem;
    margin-top: -0.095625rem;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
}

.MineCard h3 {
    font-weight: 200;
    font-size: 0.09rem;
    line-height: 0.09rem;
    letter-spacing: -0.02em;
    text-align: left;
}

.MineCard h3,
.MineCard p {
    color: rgba(0, 0, 0, 0.85);
    white-space: nowrap;
}

.MineCard p {
    font-family: var(--font-sans-serif);
    font-weight: 400;
    font-size: 18.2px;
    line-height: 20px;
    letter-spacing: 0.05em;
    font-feature-settings: "cpsp" on;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-transform: uppercase;
    margin-top: 0.00375rem;
}

.MineCard p svg {
    width: 20px;
    height: 20px;
    margin-right: 9px;
    margin-bottom: 2px;
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .MineCard {
        padding: 21px 0 0 177px;
        margin-top: calc(1.56vw - 102px);
        margin-left: 1px;
    }

    .MineCard-imageWrapper {
        width: 153px;
        height: 204px;
    }

    .MineCard-diamond img {
        width: 0.13125rem;
        height: 0.13125rem;
        margin-left: -0.06625rem;
        margin-top: -0.075625rem;
    }

    .MineCard h3 {
        font-size: 128px;
        line-height: 128px;
    }

    .MineCard p {
        font-size: 15px;
        line-height: 16px;
        letter-spacing: 1px;
        margin-top: 10px;
    }

    .MineCard p svg {
        width: 14px;
        height: 16px;
        margin-right: 7px;
        margin-bottom: 2px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .MineCard {
        padding: 0.013125rem 0 0 0.110625rem;
        margin-top: -0.05375rem;
        margin-left: 0.000625rem;
    }

    .MineCard-imageWrapper {
        width: 0.095625rem;
        height: 0.1275rem;
    }

    .MineCard-diamond img {
        width: 0.13125rem;
        height: 0.13125rem;
        margin-left: -0.06625rem;
        margin-top: -0.075625rem;
    }

    .MineCard h3 {
        font-size: 0.08rem;
        line-height: 0.08rem;
    }

    .MineCard p {
        font-size: 15px;
        line-height: 16px;
        letter-spacing: 1px;
        margin-top: 10px;
    }

    .MineCard p svg {
        width: 14px;
        height: 16px;
        margin-right: 7px;
        margin-bottom: 2px;
    }
}

@media (max-width: 767px) {
    .MineCard {
        padding: 0.00875rem 0 0 0.058125rem;
        margin-top: -0.031875rem;
        margin-left: 0;
    }

    .MineCard-imageWrapper {
        width: 0.048125rem;
        height: 0.06375rem;
    }

    .MineCard-diamond img {
        width: 0.0925rem;
        height: 0.0925rem;
        margin-left: -0.04625rem;
        margin-top: -0.04625rem;
    }

    .MineCard h3 {
        font-size: 0.03rem;
        line-height: 0.03rem;
    }

    .MineCard p {
        font-size: 13px;
        line-height: 16px;
        letter-spacing: 1px;
        margin-top: 10px;
    }

    .MineCard p svg {
        width: 12px;
        height: 12px;
        margin-right: 7px;
        margin-bottom: 2px;
    }
}

.ChapterCommunity {
    --intro-height: 0px;
    --falling-height: 0px;
    --bottombg-height: 0px;
    position: relative;
    height: calc(var(--intro-height) + var(--falling-height) + var(--bottombg-height) + var(--screen-height));
}

.ChapterCommunity-stickyBgWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.ChapterCommunity-stickyBgBlock {
    position: sticky;
    top: 0;
    width: 100%;
    height: calc(var(--screen-height) + var(--bottombg-height));
}

.ChapterCommunity-bgTop {
    position: relative;
    width: 100%;
    height: var(--screen-height);
    background: linear-gradient(180deg, #a3ccc2, #f6f9ff);
}

.ChapterCommunity-bgBottom {
    position: relative;
    width: 100%;
    height: var(--bottombg-height);
    background: linear-gradient(180deg, #f6f9ff, #a4c6cd 30.73%, #695fa6 69.79%, #12162d);
}

.ChapterCommunity-stickyContentWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: calc(0px - var(--screen-height) * 2);
    z-index: 3;
}

.ChapterCommunity-stickyContentBlock {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--screen-height);
    overflow: hidden;
}

.ChapterCommunity-introMessage {
    position: absolute;
    left: 0.02rem;
    right: 0.02rem;
    bottom: 0.014375rem;
    font-size: 0.075rem;
    line-height: 0.075rem;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.02em;
    font-feature-settings: "case" on;
}

.ChapterCommunity-introMessage span {
    display: none;
}

.ChapterCommunity-images,
.ChapterCommunity-lines,
.ChapterCommunity-lines svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterCommunity-imagesItem {
    position: relative;
    will-change: transform;
}

.ChapterCommunity-imagesItemImage {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterCommunity-imagesItemArrow {
    position: absolute;
    bottom: 0.0025rem;
    left: 0.0025rem;
    width: 0.0175rem;
    height: 0.0175rem;
}

.ChapterCommunity-imagesItemArrow svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterCommunity-imagesItemArrow svg:nth-child(2) {
    display: none;
}

.ChapterCommunity-imagesItemArrow svg:last-child {
    opacity: 0;
    transition: opacity 0.2s;
}

.isPointer button.ChapterCommunity-imagesItem:hover .CommonImageLocal {
    transform: scale(1.15);
}

.isPointer button.ChapterCommunity-imagesItem:hover .ChapterCommunity-imagesItemArrow svg:last-child {
    opacity: 1;
}

.isPointer button.ChapterCommunity-imagesItem .CommonImageLocal {
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

.ChapterCommunity-images .CommonImageLocal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterCommunity-images p {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 0.0075rem;
    font-family: var(--font-sans-serif);
    font-weight: 400;
    font-size: 0.011375rem;
    line-height: 0.0125rem;
    letter-spacing: 0.05em;
    font-feature-settings: "cpsp" on;
    color: rgba(0, 0, 0, 0.85);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.ChapterCommunity-diamonds {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.19rem;
    height: 0.19rem;
    margin-left: -0.095rem;
    margin-top: -0.095rem;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
    z-index: 3;
}

.ChapterCommunity-diamondsItem {
    will-change: transform;
}

.ChapterCommunity-diamonds .CommonImageLocal,
.ChapterCommunity-diamondsItem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterCommunity-diamondsItemGlow .CommonImageLocal {
    position: absolute;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    filter: blur(15px) saturate(2) brightness(3);
}

.ChapterCommunity-staticCrystal,
.ChapterCommunity-staticCrystal img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    .ChapterCommunity-bgTop {
        background: linear-gradient(180deg, #a3ccc2, #f7f9ff);
    }

    .ChapterCommunity-bgBottom {
        background: linear-gradient(180deg,
                #f7f9ff,
                #a4c6cd 25.67%,
                #695fa6 47.97%,
                #352d59 72.3%,
                #10152a);
    }

    .ChapterCommunity-introMessage {
        position: fixed;
        left: 0.0075rem;
        right: 0.0075rem;
        bottom: 0.01125rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
    }

    .ChapterCommunity-introMessage span {
        display: block;
        font-family: var(--font-sans-serif);
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-feature-settings: "cpsp" on;
        margin-bottom: 15px;
    }

    .ChapterCommunity-imagesItemArrow {
        width: 0.0125rem;
        height: 0.0125rem;
    }

    .ChapterCommunity-imagesItemArrow svg:first-child {
        display: none;
    }

    .ChapterCommunity-imagesItemArrow svg:nth-child(2) {
        display: block;
    }

    .ChapterCommunity-images p {
        padding-top: 0.005rem;
        font-size: 0.008125rem;
        line-height: 0.01rem;
        white-space: normal;
    }

    .ChapterCommunity-diamonds {
        width: 0.0925rem;
        height: 0.0925rem;
        margin-left: -0.04625rem;
        margin-top: -0.04625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .ChapterCommunity-introMessage {
        left: 0.04rem;
        right: 0.04rem;
        bottom: 0.014375rem;
        font-size: 0.05rem;
        line-height: 0.05rem;
    }

    .ChapterCommunity-images p {
        padding-top: 0.005rem;
        font-size: 0.008125rem;
        line-height: 0.01rem;
    }

    .ChapterCommunity-diamonds {
        width: 0.13125rem;
        height: 0.13125rem;
        margin-left: -0.065625rem;
        margin-top: -0.065625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 64/35) {
    .ChapterCommunity-introMessage {
        left: 0.0925rem;
        right: 0.0925rem;
        font-size: 0.040625rem;
        line-height: 0.040625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 256/125) {
    .ChapterCommunity-introMessage {
        left: 0.1175rem;
        right: 0.1175rem;
        font-size: 0.035rem;
        line-height: 0.035rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ChapterCommunity-introMessage {
        left: 0.0075rem;
        right: 0.0075rem;
        bottom: 0.014375rem;
        font-size: 0.045rem;
        line-height: 0.045rem;
    }

    .ChapterCommunity-images p {
        padding-top: 0.005rem;
        font-size: 0.00875rem;
        line-height: 0.01rem;
    }

    .ChapterCommunity-diamonds {
        width: 0.13125rem;
        height: 0.13125rem;
        margin-left: -0.065625rem;
        margin-top: -0.065625rem;
    }
}

@media (max-width: 767px),
(min-width: 768px) and (max-width: 1023px) {
    .ChapterCommunity-introMessage br {
        display: none;
    }
}

.CircleText {
    position: absolute;
    width: 0.13625rem;
    height: 0.135625rem;
    margin-left: -0.068125rem;
    margin-top: -0.0678125rem;
    left: 50%;
    top: 50%;
    pointer-events: none;
}

.CircleText svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .CircleText {
        width: 0.109rem;
        height: 0.1085rem;
        margin-left: -0.0545rem;
        margin-top: -0.05425rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .CircleText {
        width: 0.109rem;
        height: 0.1085rem;
        margin-left: -0.0545rem;
        margin-top: -0.05425rem;
    }
}

@media (max-width: 767px) {
    .CircleText {
        width: 0.08175rem;
        height: 0.081375rem;
        margin-left: -0.040875rem;
        margin-top: -0.0406875rem;
    }

    .CircleText[data-index="4"] svg {
        transform: rotate(-165deg);
    }
}

.ChapterTransformation {
    --intro-height: 0px;
    --article-height: 0px;
    --transform1-height: 0px;
    --transform2-height: 0px;
    --transform3-height: 0px;
    --transform4-height: 0px;
    --transform5-height: 0px;
    --bottombg-height: 0px;
    --transform-shift: 0px;
    position: relative;
    height: calc(var(--intro-height) + var(--article-height) + var(--transform1-height) + var(--transform2-height) + var(--transform3-height) + var(--transform4-height) + var(--transform5-height) + var(--bottombg-height) + var(--screen-height));
}

.ChapterTransformation-stickyBgWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.ChapterTransformation-stickyBgBlock {
    position: sticky;
    top: 0;
    width: 100%;
    height: calc(var(--screen-height) + var(--bottombg-height));
}

.ChapterTransformation-bgTop {
    width: 100%;
    height: var(--screen-height);
    background: linear-gradient(180deg, #12162d, #0a1021 5%, transparent 10%),
        radial-gradient(196% 80.47% at 50%, at 32.14%, #0a1021 0, #161933 66.08%, #352d5a 100%),
        radial-gradient(109.28% 90.99% at 50%, at 35.16%, #0a1021 0, #161933 59.9%, #352d5a 100%),
        radial-gradient(83.44% 83.44% at 50%, at 35.16%, #0b1226 0, #181a36 59.9%, #352d5a 100%),
        radial-gradient(50% 50% at 50%, at 50%, #352d5a 0, #0b1226 100%);
    background: linear-gradient(180deg, #12162d, #0a1021 5%, transparent 10%),
        radial-gradient(196% 80.47% at 50% 32.14%, #0a1021 28.79%, #161933 66.08%, #352d5a 100%),
        radial-gradient(109.28% 90.99% at 50% 35.16%, #0a1021 20.31%, #161933 59.9%, #352d5a 100%),
        radial-gradient(83.44% 83.44% at 50% 35.16%, #0b1226 20.31%, #181a36 59.9%, #352d5a 100%),
        radial-gradient(50% 50% at 50% 50%, #352d5a 0, #0b1226 100%);
}

.ChapterTransformation-bgBottom {
    width: 100%;
    height: var(--bottombg-height);
    background: linear-gradient(180deg, #272448, #c86b7c 50.52%, #e5b8b8);
}

.ChapterTransformation-stickyContentWrapper {
    position: absolute;
    top: 0;
    width: 100%;
    bottom: calc(0px - var(--screen-height) * 2);
    z-index: 3;
}

.ChapterTransformation-stickyContentBlock {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--screen-height);
    overflow: hidden;
}

.ChapterTransformation-introMessage {
    position: absolute;
    left: 0.0825rem;
    right: 0.0825rem;
    bottom: 0.014375rem;
    font-size: 0.075rem;
    line-height: 0.075rem;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.02em;
    font-feature-settings: "case" on;
}

.ChapterTransformation-introMessage span {
    display: none;
}

.ChapterTransformation-article {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    padding: 0 0.02rem;
}

.ChapterTransformation-article video {
    position: relative;
    display: block;
    width: 0.35rem;
    height: 0.221875rem;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0 auto;
}

.ChapterTransformation-article>p {
    margin-top: 0.1rem;
    font-weight: 200;
    font-size: 0.05rem;
    line-height: 0.05rem;
    letter-spacing: -0.01em;
    font-feature-settings: "case" on;
    color: #fff;
}

.ChapterTransformation-videoTransform1 canvas {
    position: absolute;
    left: 11.92203083%;
    top: 0.8612874%;
    width: 76.15593835%;
    height: 109.2475068%;
}

.ChapterTransformation-videoTransform2 canvas {
    position: absolute;
    left: 29.96373527%;
    top: 26.24660018%;
    width: 42.24841342%;
    height: 51.58658205%;
}

.ChapterTransformation-videoTransform3 canvas {
    position: absolute;
    left: -8.11423391%;
    top: -2.58386219%;
    width: 120.94288305%;
    height: 132.81958296%;
}

.ChapterTransformation-videoTransform4 canvas {
    position: absolute;
    left: -37.03535811%;
    top: -37.03535811%;
    width: 174.07071623%;
    height: 174.07071623%;
}

.ChapterTransformation-videoTransform5 canvas {
    position: absolute;
    left: -19.80961015%;
    top: 12.01269266%;
    width: 117.86038078%;
    height: 104.80507706%;
}

.ChapterTransformation-staticDiamond img {
    position: absolute;
    left: -37.03535811%;
    top: -37.03535811%;
    width: 174.07071623%;
    height: 174.07071623%;
}

.ChapterTransformation-staticCrystal {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 2;
    will-change: transform;
}

.ChapterTransformation-staticCrystal img {
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: opacity;
}

.ChapterTransformation-transformInfo {
    position: absolute;
    top: 50%;
    margin-top: -0.12375rem;
    height: 0.246875rem;
    left: 0.02rem;
    right: 0.02rem;
}

.ChapterTransformation-transformInfoTexts {
    position: absolute;
    top: 0.005rem;
    left: 0;
    width: 0.24rem;
}

.ChapterTransformation-transformInfoTextsItem {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.025rem;
    line-height: 0.03rem;
}

.ChapterTransformation-transformInfoTextsItem h3 {
    font-weight: 200;
    font-feature-settings: "case" on;
    color: #fff;
}

.ChapterTransformation-transformInfoTextsItem h3 span {
    display: block;
    font-family: var(--font-sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 0.00975rem;
    line-height: 0.0125rem;
    letter-spacing: 0.000625rem;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    color: #fff;
    margin-bottom: 0.005rem;
}

.ChapterTransformation-transformInfoTextsItem p {
    font-family: var(--font-additional);
    font-style: normal;
    font-weight: 400;
    font-size: 0.010625rem;
    line-height: 0.015rem;
    font-feature-settings: "case" on;
    color: hsla(0, 0%, 100%, 0.85);
    margin-top: 0.01rem;
}

.ChapterTransformation-transformInfoProgress {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 0.025rem;
    line-height: 0.03rem;
}

.ChapterTransformation-transformInfoIconsDesk {
    position: absolute;
    right: 0.006875rem;
    top: -0.004375rem;
    width: 0.125rem;
    height: 0.225rem;
}

[lang="ja-JP"] .ChapterTransformation-transformInfoIconsDesk,
[lang="zh-Hans"] .ChapterTransformation-transformInfoIconsDesk {
    width: 0.15625rem;
}

.ChapterTransformation-transformInfoIconsMob {
    position: absolute;
    left: -0.005625rem;
    bottom: 0.00125rem;
    width: 0.16789087rem;
    height: 0.03147954rem;
}

.ChapterTransformation-transformInfoLoader {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 0.000625rem;
    background: hsla(0, 0%, 100%, 0.5);
}

.ChapterTransformation-transformInfoLoaderGauge {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    background: #fff;
}

.ChapterTransformation-transformInfoLoaderPercentage {
    position: absolute;
    right: 0.01rem;
    bottom: -4px;
    font-family: var(--font-sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    text-align: right;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    color: hsla(0, 0%, 100%, 0.5);
}

@media (max-width: 767px) {
    .ChapterTransformation-bgTop {
        background: linear-gradient(180deg,
                #10152a,
                #0a1021 19.79%,
                #0a1021 55.21%,
                #161933 88.3%,
                #222041);
    }

    .ChapterTransformation-bgBottom {
        background: linear-gradient(180deg, #222041, #c86b7c 54.39%, #e5b8b8);
    }

    .ChapterTransformation-introMessage {
        position: fixed;
        left: 0.0075rem;
        right: 0.0075rem;
        bottom: 0.01125rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
    }

    .ChapterTransformation-introMessage span {
        display: block;
        font-family: var(--font-sans-serif);
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-feature-settings: "cpsp" on;
        margin-bottom: 15px;
    }

    .ChapterTransformation-article {
        padding: 0 0.01rem;
    }

    .ChapterTransformation-article video {
        width: 0.15rem;
        height: 0.094375rem;
    }

    .ChapterTransformation-article>p {
        margin-top: 0.01875rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
    }

    .ChapterTransformation-transformInfo {
        position: fixed;
        height: 0.18875rem;
        top: auto;
        margin-top: 0;
        bottom: 0.01rem;
        left: 0.01rem;
        right: 0.01rem;
    }

    .ChapterTransformation-transformInfoTexts {
        top: 0;
        width: 100%;
    }

    .ChapterTransformation-transformInfoTextsItem {
        font-size: 0.0175rem;
        line-height: 0.02rem;
    }

    .ChapterTransformation-transformInfoTextsItem h3 span {
        font-size: 0.008125rem;
        line-height: 0.01rem;
        margin-bottom: 0.00375rem;
    }

    .ChapterTransformation-transformInfoTextsItem p {
        font-size: 0.0075rem;
        line-height: 0.01rem;
        margin-top: 0.005rem;
    }

    .ChapterTransformation-transformInfoProgress {
        font-size: 0.0175rem;
        line-height: 0.02rem;
        top: auto;
        height: auto;
        bottom: 0;
        width: 100%;
    }

    .ChapterTransformation-transformInfoIconsDesk {
        display: none;
    }

    .ChapterTransformation-transformInfoLoader {
        right: 0;
        top: 0;
        height: 0.000625rem;
        width: 100%;
    }

    .ChapterTransformation-transformInfoLoaderGauge {
        right: auto;
        left: 0;
        height: 100%;
        width: auto;
    }

    .ChapterTransformation-transformInfoLoaderPercentage {
        right: 0;
        bottom: 8px;
        font-size: 10.3px;
        line-height: 12px;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .ChapterTransformation-introMessage {
        left: 0.0775rem;
        right: 0.0775rem;
        bottom: 0.014375rem;
        font-size: 0.05rem;
        line-height: 0.05rem;
    }

    .ChapterTransformation-article video {
        width: 0.2rem;
        height: 0.126875rem;
    }

    .ChapterTransformation-article>p {
        margin-top: 0.0325rem;
        font-size: 0.035rem;
        line-height: 0.0375rem;
    }

    .ChapterTransformation-transformInfo {
        margin-top: -0.0775rem;
        height: 0.215625rem;
    }

    .ChapterTransformation-transformInfoTexts {
        top: 0.013125rem;
        width: 0.175rem;
    }

    .ChapterTransformation-transformInfoTextsItem {
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterTransformation-transformInfoTextsItem h3 span {
        font-size: 0.008125rem;
        line-height: 0.01rem;
        margin-bottom: 0.0025rem;
    }

    .ChapterTransformation-transformInfoTextsItem p {
        font-size: 0.00875rem;
        line-height: 0.0125rem;
        margin-top: 0.005rem;
    }

    .ChapterTransformation-transformInfoProgress {
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterTransformation-transformInfoIconsDesk {
        right: 0.004375rem;
        top: -0.004375rem;
        width: 0.11154391rem;
        height: 0.20077904rem;
    }

    [lang="ja-JP"] .ChapterTransformation-transformInfoIconsDesk,
    [lang="zh-Hans"] .ChapterTransformation-transformInfoIconsDesk {
        width: 0.13942989rem;
    }

    .ChapterTransformation-transformInfoLoaderPercentage {
        right: 0.0075rem;
        bottom: -3px;
        font-size: 10.3px;
        line-height: 12px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ChapterTransformation-introMessage {
        left: 0.015rem;
        right: 0.015rem;
        bottom: 0.014375rem;
        font-size: 0.045rem;
        line-height: 0.045rem;
    }

    .ChapterTransformation-article {
        padding: 0 0.015rem;
    }

    .ChapterTransformation-article video {
        width: 0.2rem;
        height: 0.126875rem;
    }

    .ChapterTransformation-article>p {
        margin-top: 0.02375rem;
        font-size: 0.035rem;
        line-height: 0.0375rem;
    }

    .ChapterTransformation-staticDiamond,
    .ChapterTransformation-videoTransform1,
    .ChapterTransformation-videoTransform2,
    .ChapterTransformation-videoTransform3,
    .ChapterTransformation-videoTransform4,
    .ChapterTransformation-videoTransform5 {
        transform: scale(1.33);
    }

    .ChapterTransformation-transformInfo {
        height: 0.215625rem;
        top: auto;
        margin-top: 0;
        bottom: 0.016875rem;
        left: 0.015rem;
        right: 0.015rem;
    }

    .ChapterTransformation-transformInfoTexts {
        top: 0.00875rem;
        width: 0.1875rem;
    }

    .ChapterTransformation-transformInfoTextsItem {
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterTransformation-transformInfoTextsItem h3 span {
        font-size: 0.008125rem;
        line-height: 0.01rem;
        margin-bottom: 0.00375rem;
    }

    .ChapterTransformation-transformInfoTextsItem p {
        font-size: 0.00875rem;
        line-height: 0.0125rem;
        margin-top: 0.005rem;
    }

    .ChapterTransformation-transformInfoProgress {
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterTransformation-transformInfoIconsDesk {
        right: 0.004375rem;
        top: -0.004375rem;
        width: 0.11154391rem;
        height: 0.20077904rem;
    }

    [lang="ja-JP"] .ChapterTransformation-transformInfoIconsDesk,
    [lang="zh-Hans"] .ChapterTransformation-transformInfoIconsDesk {
        width: 0.13942989rem;
    }

    .ChapterTransformation-transformInfoLoaderPercentage {
        right: 0.0075rem;
        bottom: -3px;
        font-size: 10.3px;
        line-height: 12px;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 64/35) {
    .ChapterTransformation-introMessage {
        left: 0.12375rem;
        right: 0.12375rem;
        font-size: 0.040625rem;
        line-height: 0.040625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 256/125) {
    .ChapterTransformation-introMessage {
        left: 0.14875rem;
        right: 0.14875rem;
        font-size: 0.035rem;
        line-height: 0.035rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px),
(min-width: 1024px) and (max-width: 1599px),
(min-width: 1600px) {

    .ChapterTransformation-introMessage br,
    .ChapterTransformation-transformInfoIconsMob {
        display: none;
    }
}

@media (max-width: 767px),
(min-width: 768px) and (max-width: 1023px) {

    .ChapterTransformation-staticDiamond,
    .ChapterTransformation-videoTransform1,
    .ChapterTransformation-videoTransform2,
    .ChapterTransformation-videoTransform3,
    .ChapterTransformation-videoTransform4,
    .ChapterTransformation-videoTransform5 {
        top: calc(50% - var(--transform-shift));
    }
}

.ChapterHeritage {
    position: relative;
    --intro-height: 0px;
    --images-height: 0px;
    --bottom-height: 0px;
}

.ChapterHeritage-top {
    position: relative;
    height: var(--intro-height);
    z-index: 1;
}

.ChapterHeritage-topSticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--screen-height);
}

.ChapterHeritage-topStickyBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ChapterHeritage-topStickyBgInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--screen-height) + var(--images-height));
    background: linear-gradient(180deg, #e6b8b8, #fff5e6);
}

.ChapterHeritage-middle {
    position: relative;
    height: var(--images-height);
}

.ChapterHeritage-middleBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ChapterHeritage-middleBgInner {
    position: absolute;
    top: calc(0px - var(--screen-height));
    left: 0;
    width: 100%;
    height: calc(var(--images-height) + var(--screen-height));
    background: linear-gradient(180deg, #e6b8b8, #fff5e6);
}

.ChapterHeritage-staticDiamond {
    overflow: hidden;
}

.ChapterHeritage-staticDiamond img {
    position: absolute;
    left: -37.03535811%;
    top: -37.03535811%;
    width: 174.07071623%;
    height: 174.07071623%;
}

.ChapterHeritage-introMessage {
    position: absolute;
    left: 0.14rem;
    right: 0.14rem;
    bottom: 0.014375rem;
    font-size: 0.075rem;
    line-height: 0.075rem;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.02em;
    font-feature-settings: "case" on;
}

.ChapterHeritage-introMessage span {
    display: none;
}

.ChapterHeritage-lines {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
}

.ChapterHeritage-lines svg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterHeritage-lines svg line {
    stroke: rgba(0, 0, 0, 0.15);
}

.ChapterHeritage-images {
    position: relative;
    width: 100%;
    height: var(--images-height);
    z-index: 3;
    top: 0.17rem;
}

.ChapterHeritage-image {
    position: absolute;
    font-size: 0.025rem;
}

.ChapterHeritage-image .CommonImageLocal,
.ChapterHeritage-image video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ChapterHeritage-image .CommonImageLocal {
    will-change: transform;
}

.ChapterHeritage-image.hasText {
    z-index: 1;
}

.ChapterHeritage-image p {
    position: absolute;
    left: 100%;
    font-size: 0.025rem;
    line-height: 0.03rem;
    padding-left: 0.015rem;
    width: 0.275rem;
    color: rgba(0, 0, 0, 0.85);
    top: 0;
    will-change: opacity;
}

.ChapterHeritage-image p[data-index="6"] {
    top: 0.076875rem;
}

html[lang="ja-JP"] .ChapterHeritage-image p {
    font-size: 0.02166667rem;
    line-height: 0.026rem;
}

.ChapterHeritage-image-1 {
    width: 0.08rem;
    height: 0.08rem;
    top: 0;
    left: 0.5rem;
}

.ChapterHeritage-image-2 {
    width: 0.128125rem;
    height: 0.1725rem;
    top: 0.1375rem;
    left: 0.361875rem;
}

.ChapterHeritage-image-3 {
    width: 0.1425rem;
    height: 0.205rem;
    top: 0.3175rem;
    left: 0.1375rem;
}

.ChapterHeritage-image-4 {
    width: 0.16rem;
    height: 0.11rem;
    top: 0.33rem;
    left: 0.7275rem;
}

.ChapterHeritage-image-5 {
    width: 0.128125rem;
    height: 0.1725rem;
    top: 0.4275rem;
    left: 0.5rem;
}

.ChapterHeritage-image-6 {
    width: 0.23rem;
    height: 0.306875rem;
    top: 0.543125rem;
    left: 0.26rem;
}

.ChapterHeritage-image-7 {
    width: 0.125rem;
    height: 0.08625rem;
    top: 0.73rem;
    left: 0.18rem;
}

.ChapterHeritage-bottom {
    position: relative;
    width: 100%;
    min-height: var(--bottom-height);
    background: linear-gradient(180deg,
            #fff5e6,
            #efe7e0 4.69%,
            #7d86b3 25.52%,
            #483366 46.35%,
            #0f1326 69.79%,
            #0b111c 81.77%,
            #1e2538);
}

.ChapterHeritage-bottomInner {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 80%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

.ChapterHeritage-bottomInner:before {
    content: "";
    display: block;
    height: 0.01375rem;
}

.ChapterHeritage-bottomInner p {
    padding: 0 0.11375rem 0.01125rem;
    font-size: 0.05rem;
    line-height: 0.05rem;
    text-align: center;
    color: #fff;
    letter-spacing: -0.01em;
    font-feature-settings: "case" on;
}

.ChapterHeritage-social {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    font-size: 0.025rem;
}

.ChapterHeritage-socialFollow {
    font-style: normal;
    font-weight: 200;
    font-size: 0.025rem;
    line-height: 0.03rem;
    font-feature-settings: "case" on;
    color: #fff;
}

.ChapterHeritage-socialLinks {
    position: relative;
    display: flex;
    grid-gap: 0 0.005rem;
    gap: 0 0.005rem;
    margin-top: 0.01rem;
    z-index: 1;
}

.ChapterHeritage-socialLinks a {
    position: relative;
    display: block;
    width: 0.04rem;
    height: 0.04rem;
    border-radius: 100%;
}

.isPointer .ChapterHeritage-socialLinks a:hover svg:last-child circle {
    stroke-opacity: 1;
    stroke-width: 1;
}

.ChapterHeritage-socialLinks a svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ChapterHeritage-socialLinks a svg:last-child circle {
    transition:
        stroke-opacity 0.2s,
        stroke-width 0.2s;
}

.ChapterHeritage-socialPowered {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    font-family: var(--font-sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 0.0064375rem;
    line-height: 0.0075rem;
    letter-spacing: 0.000625rem;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    margin-top: 0.02125rem;
}

.ChapterHeritage-socialPowered a {
    transition: opacity 0.2s;
}

.isPointer .ChapterHeritage-socialPowered a:hover {
    opacity: 0.75;
}

.ChapterHeritage-socialPowered svg {
    width: 0.05625rem;
    height: 0.025rem;
    margin-left: 0.0025rem;
    margin-top: -0.00125rem;
}

.ChapterHeritage-footer {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 20px 32px 26px;
    font-family: var(--font-sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 15.6px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    color: hsla(0, 0%, 100%, 0.5);
    z-index: 1;
}

.ChapterHeritage-footerLeft {
    width: 200px;
}

.ChapterHeritage-footerRight {
    width: 200px;
    text-align: right;
}

.ChapterHeritage-footer a {
    color: hsla(0, 0%, 100%, 0.5);
    transition: color 0.2s;
    display: inline-block;
}

.isPointer .ChapterHeritage-footer a:hover {
    color: #fff;
}

.ChapterHeritage-footer a+a {
    margin-left: 32px;
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .ChapterHeritage-introMessage {
        left: 0.09rem;
        right: 0.09rem;
        bottom: 0.014375rem;
        font-size: 0.05rem;
        line-height: 0.05rem;
    }

    .ChapterHeritage-images {
        top: 0.065rem;
    }

    .ChapterHeritage-image {
        font-size: 0.02rem;
    }

    .ChapterHeritage-image p[data-index="6"] {
        top: 0.0425rem;
    }

    .ChapterHeritage-image p {
        font-size: 0.02rem;
        line-height: 0.0225rem;
        padding-left: 0.015rem;
        width: 0.225rem;
    }

    html[lang="ja-JP"] .ChapterHeritage-image p {
        font-size: 0.01733333rem;
        line-height: 0.0195rem;
    }

    .ChapterHeritage-image-1 {
        width: 0.055rem;
        height: 0.055rem;
        top: 0;
        left: 0.32rem;
    }

    .ChapterHeritage-image-2 {
        width: 0.09625rem;
        height: 0.13rem;
        top: 0.0925rem;
        left: 0.21375rem;
    }

    .ChapterHeritage-image-3 {
        width: 0.1rem;
        height: 0.14375rem;
        top: 0.2325rem;
        left: 0.065rem;
    }

    .ChapterHeritage-image-4 {
        width: 0.1175rem;
        height: 0.08125rem;
        top: 0.2575rem;
        left: 0.47rem;
    }

    .ChapterHeritage-image-5 {
        width: 0.09625rem;
        height: 0.13rem;
        top: 0.3rem;
        left: 0.32rem;
    }

    .ChapterHeritage-image-6 {
        width: 0.15625rem;
        height: 0.208125rem;
        top: 0.4075rem;
        left: 0.15375rem;
    }

    .ChapterHeritage-image-7 {
        width: 0.08125rem;
        height: 0.05625rem;
        top: 0.515rem;
        left: 0.116875rem;
    }

    .ChapterHeritage-bottomInner:before {
        height: 0.055rem;
    }

    .ChapterHeritage-bottomInner p {
        padding: 0 0.04375rem 0.034375rem;
        font-size: 0.035rem;
        line-height: 0.0375rem;
    }

    .ChapterHeritage-social {
        font-size: 0.02rem;
    }

    .ChapterHeritage-socialFollow {
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterHeritage-footer {
        font-size: 13px;
        line-height: 16px;
    }

    .ChapterHeritage-footer a+a {
        margin-left: 24px;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 64/35) {
    .ChapterHeritage-introMessage {
        left: 0.1175rem;
        right: 0.1175rem;
        font-size: 0.040625rem;
        line-height: 0.040625rem;
    }
}

@media (min-width: 1024px) and (max-width: 1599px) and (min-aspect-ratio: 256/125) {
    .ChapterHeritage-introMessage {
        left: 0.155rem;
        right: 0.155rem;
        font-size: 0.035rem;
        line-height: 0.035rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .ChapterHeritage-introMessage {
        left: 0.03rem;
        right: 0.03rem;
        bottom: 0.014375rem;
        font-size: 0.045rem;
        line-height: 0.045rem;
    }

    .ChapterHeritage-images {
        top: 0;
    }

    .ChapterHeritage-image {
        font-size: 0.02rem;
    }

    .ChapterHeritage-image p[data-index="6"] {
        top: 0.040625rem;
    }

    .ChapterHeritage-image p {
        font-size: 0.02rem;
        line-height: 0.0225rem;
        padding-left: 0.015rem;
        width: 0.22rem;
    }

    html[lang="ja-JP"] .ChapterHeritage-image p {
        font-size: 0.01733333rem;
        line-height: 0.0195rem;
    }

    .ChapterHeritage-image-1 {
        width: 0.05rem;
        height: 0.05rem;
        top: 0;
        left: 0.24rem;
    }

    .ChapterHeritage-image-2 {
        width: 0.07375rem;
        height: 0.1rem;
        top: 0.075rem;
        left: 0.15625rem;
    }

    .ChapterHeritage-image-3 {
        width: 0.10125rem;
        height: 0.13875rem;
        top: 0.1975rem;
        left: 0.041875rem;
    }

    .ChapterHeritage-image-4 {
        width: 0.0925rem;
        height: 0.06375rem;
        top: 0.2275rem;
        left: 0.36rem;
    }

    .ChapterHeritage-image-5 {
        width: 0.07375rem;
        height: 0.1rem;
        top: 0.2925rem;
        left: 0.24rem;
    }

    .ChapterHeritage-image-6 {
        width: 0.1125rem;
        height: 0.15rem;
        top: 0.366875rem;
        left: 0.1175rem;
    }

    .ChapterHeritage-image-7 {
        width: 0.06rem;
        height: 0.041875rem;
        top: 0.4425rem;
        left: 0.075rem;
    }

    .ChapterHeritage-bottomInner:before {
        height: 0.0775rem;
    }

    .ChapterHeritage-bottomInner p {
        padding: 0 0.02rem 0.085625rem;
        font-size: 0.035rem;
        line-height: 0.0375rem;
    }

    .ChapterHeritage-social {
        font-size: 0.02rem;
    }

    .ChapterHeritage-socialFollow {
        font-size: 0.02rem;
        line-height: 0.0225rem;
    }

    .ChapterHeritage-footer {
        font-size: 13px;
        line-height: 16px;
        padding: 20px 24px 26px;
    }

    .ChapterHeritage-footerLeft,
    .ChapterHeritage-footerRight {
        width: 150px;
    }

    .ChapterHeritage-footer a+a {
        margin-left: 24px;
    }
}

@media (max-width: 767px) {
    .ChapterHeritage-introMessage {
        position: fixed;
        left: 0.015rem;
        right: 0.015rem;
        bottom: 0.00625rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
        pointer-events: none;
    }

    .ChapterHeritage-introMessage br {
        display: none;
    }

    .ChapterHeritage-introMessage span {
        display: block;
        font-family: var(--font-sans-serif);
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 16px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-feature-settings: "cpsp" on;
        margin-bottom: 15px;
    }

    .ChapterHeritage-images {
        overflow: hidden;
        top: 0.035rem;
    }

    .ChapterHeritage-image {
        font-size: 0.0125rem;
    }

    .ChapterHeritage-image p[data-index="6"] {
        top: 100%;
        width: 0.135rem;
    }

    .ChapterHeritage-image p {
        font-size: 0.0125rem;
        line-height: 0.015rem;
        padding-left: 0;
        padding-top: 0.00375rem;
        width: 0.165rem;
        top: 100%;
        left: 0;
    }

    html[lang="ja-JP"] .ChapterHeritage-image p {
        font-size: 0.01083333rem;
        line-height: 0.013rem;
    }

    .ChapterHeritage-image-1 {
        width: 0.045rem;
        height: 0.045rem;
        top: 0;
        left: 0.1rem;
    }

    .ChapterHeritage-image-2 {
        width: 0.06rem;
        height: 0.079375rem;
        top: 0.035rem;
        left: 0.025rem;
    }

    .ChapterHeritage-image-3 {
        width: 0.09rem;
        height: 0.12rem;
        top: 0.205rem;
        left: -0.02rem;
    }

    .ChapterHeritage-image-4 {
        width: 0.075rem;
        height: 0.05rem;
        top: 0.23rem;
        left: 0.115rem;
    }

    .ChapterHeritage-image-5 {
        width: 0.06rem;
        height: 0.08rem;
        top: 0.31rem;
        left: 0.145rem;
    }

    .ChapterHeritage-image-6 {
        width: 0.105rem;
        height: 0.14rem;
        top: 0.38rem;
        left: 0.055rem;
    }

    .ChapterHeritage-image-7 {
        width: 0.06rem;
        height: 0.041875rem;
        top: 0.4575rem;
        left: 0.01rem;
    }

    .ChapterHeritage-bottomInner:before {
        display: none;
    }

    .ChapterHeritage-bottomInner p {
        padding: 0.00375rem 0.01rem 0.016875rem;
        font-size: 0.02125rem;
        line-height: 0.025rem;
    }

    .ChapterHeritage-social {
        font-size: 0.0125rem;
    }

    .ChapterHeritage-socialFollow {
        font-size: 0.0125rem;
        line-height: 0.015rem;
    }

    .ChapterHeritage-socialLinks {
        grid-gap: 0 0.0025rem;
        gap: 0 0.0025rem;
        margin-top: 0.01125rem;
    }

    .ChapterHeritage-socialLinks a {
        width: 0.025rem;
        height: 0.025rem;
    }

    .ChapterHeritage-socialPowered {
        margin-top: 0.01625rem;
    }

    .ChapterHeritage-socialPowered svg {
        width: 0.045rem;
        height: 0.02rem;
    }

    .ChapterHeritage-footer {
        font-size: 13px;
        line-height: 16px;
        padding: 20px 16px 19px;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .ChapterHeritage-footerLeft {
        width: auto;
        flex: 1 0 100%;
    }

    .ChapterHeritage-footerRight {
        width: auto;
    }

    .ChapterHeritage-footer a {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
        padding-top: 8px;
    }

    .ChapterHeritage-footer a+a {
        margin-left: 0;
    }
}

@media (min-width: 768px) and (max-width: 1023px),
(min-width: 1024px) and (max-width: 1599px),
(min-width: 1600px) {
    .ChapterHeritage-bottomInner p br {
        display: none;
    }
}

.CommonLoader[data-v-026d605a] {
    position: fixed;
    z-index: 5000;
    font-size: 10px;
}

.CommonLoader-bg[data-v-026d605a],
.CommonLoader[data-v-026d605a] {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.CommonLoader-bg[data-v-026d605a] {
    position: absolute;
    background: linear-gradient(180deg, #100b43, #2a2159 37.61%, #32295e 68.47%, #433a6b);
    transition: opacity 0.5s ease-in 0.7s;
}

.CommonLoader-wrapper[data-v-026d605a] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.085rem;
    height: 0.085rem;
    margin-left: -0.0425rem;
    margin-top: -0.0425rem;
    transition:
        opacity 0.9s ease-in,
        filter 0.9s ease-in;
}

.CommonLoader-wrapper svg[data-v-026d605a] {
    width: 100%;
    height: 100%;
}

.CommonLoader-wrapper p[data-v-026d605a] {
    position: absolute;
    font-family: var(--font-sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 0.00975rem;
    line-height: 0.0125rem;
    letter-spacing: 0.000625rem;
    text-transform: uppercase;
    font-feature-settings: "cpsp" on;
    color: #fff;
    top: 100%;
    margin-top: 0.0125rem;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.CommonLoader-leave-active[data-v-026d605a] {
    transition: font-size 1.5s;
}

.CommonLoader-leave-to[data-v-026d605a] {
    font-size: 20px;
}

.CommonLoader-leave-to .CommonLoader-wrapper[data-v-026d605a] {
    opacity: 0;
    filter: blur(0.0125rem);
}

.CommonLoader-leave-to .CommonLoader-bg[data-v-026d605a] {
    opacity: 0;
}

@media (min-width: 1024px) and (max-width: 1599px) {
    .CommonLoader-wrapper[data-v-026d605a] {
        width: 0.075rem;
        height: 0.075rem;
        margin-left: -0.0375rem;
        margin-top: -0.0375rem;
    }

    .CommonLoader-wrapper p[data-v-026d605a] {
        font-size: 0.008125rem;
        line-height: 0.01rem;
        margin-top: 0.01rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .CommonLoader-wrapper[data-v-026d605a] {
        width: 0.075rem;
        height: 0.075rem;
        margin-left: -0.0375rem;
        margin-top: -0.0375rem;
    }

    .CommonLoader-wrapper p[data-v-026d605a] {
        font-size: 0.008125rem;
        line-height: 0.01rem;
        margin-top: 0.01rem;
    }
}

@media (max-width: 767px) {
    .CommonLoader-wrapper[data-v-026d605a] {
        width: 0.05rem;
        height: 0.05rem;
        margin-left: -0.025rem;
        margin-top: -0.025rem;
    }

    .CommonLoader-wrapper p[data-v-026d605a] {
        font-size: 0.0064375rem;
        line-height: 0.0075rem;
        margin-top: 0.0075rem;
    }
}

.RotateView[data-v-39efe2ec] {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4000;
    background: linear-gradient(180deg, #283149, #0d141d 36.77%, #101721 63.7%, #1e2538),
        radial-gradient(162.33% 85.55% at 50%, at 35.16%, #080c1a 0, #1e1326 60.9%, #4b2d5a 100%),
        radial-gradient(66.37% 45.94% at 50%, at 51.09%, #5a2d4d 0, #181027 100%),
        radial-gradient(66.42% 45.86% at 50%, at 50%, #352d5a 0, #0b1226 100%);
    background: linear-gradient(180deg, #283149, #0d141d 36.77%, #101721 63.7%, #1e2538),
        radial-gradient(162.33% 85.55% at 50% 35.16%, #080c1a 12.84%, #1e1326 60.9%, #4b2d5a 100%),
        radial-gradient(66.37% 45.94% at 50% 51.09%, #5a2d4d 0, #181027 100%),
        radial-gradient(66.42% 45.86% at 50% 50%, #352d5a 0, #0b1226 100%);
    flex-direction: column;
    justify-content: center;
}

.RotateView p[data-v-39efe2ec] {
    font-style: normal;
    font-weight: 200;
    font-size: 34px;
    line-height: 40px;
    letter-spacing: -0.01em;
    font-feature-settings: "case" on;
    color: #fff;
    width: 100%;
    text-align: center;
}

.RotateView-svg[data-v-39efe2ec] {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
}

.RotateView-svg svg[data-v-39efe2ec] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (hover: none) and (max-height: 575.98px) and (orientation: landscape) {
    .RotateView[data-v-39efe2ec] {
        display: flex;
    }
}

.CommonCursor[data-v-ecd9ecc6] {
    position: fixed;
    z-index: 6000;
    pointer-events: none !important;
    border-radius: 100%;
    width: 0.03rem;
    height: 0.03rem;
    margin-left: -0.015rem;
    margin-top: -0.015rem;
    background: #fff;
    mix-blend-mode: exclusion;
    transition: transform 0.15s ease;
    transform: scale(0.33333333);
}

.CommonCursor.isOverLink[data-v-ecd9ecc6] {
    transform: scale(1);
}

.isTouch .CommonCursor[data-v-ecd9ecc6] {
    display: none !important;
}