/* 大标题字体包  */
@font-face {
    font-family: 'RubikBold';
    /* 自定义字体名称 */
    /* 字体文件路径（请替换为实际TTF文件路径） */
    src: url('../fonts/MONTSERRAT-EXTRABOLD.TTF') format('truetype');
    /* 字体粗细 */
    font-style: normal;
    /* 字体样式 */
    font-display: swap;
    /* 字体加载策略，避免空白闪烁 */
}

/* 副标题字体包 */
@font-face {
    font-family: 'RubikViceBold';
    /* 自定义字体名称 */
    /* 字体文件路径（请替换为实际TTF文件路径） */
    src: url('../fonts/MONTSERRAT-BOLD.TTF') format('truetype');
    font-style: normal;
    font-display: swap;
}

/* 通用字体包 */
@font-face {
    font-family: 'RubikRegular';
    /* 自定义字体名称 */
    /* 字体文件路径（请替换为实际TTF文件路径） */
    src: url('../fonts/MONTSERRAT-REGULAR.TTF') format('truetype');
    font-weight: var(--normal-font-weight);
    font-style: normal;
    font-display: swap;
}

/* 通用字体包 */
@font-face {
    font-family: 'RubikMedium';
    /* 自定义字体名称 */
    /* 字体文件路径（请替换为实际TTF文件路径） */
    src: url('../fonts/MONTSERRAT-MEDIUM.TTF') format('truetype');
    font-weight: var(--medium-font-weight);
    font-style: normal;
    font-display: swap;
}


.common-div {
    position: relative;
    width: 100%;
}

.common-width-70 {
    max-width: var(--base-max-width);
    /* width: var(--content-max-width); */
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--base-w-padding);
}

.common-child-div-column {
    display: flex;
    justify-items: center;
    flex-direction: column;
    align-items: center;
}

.common-child-div-row {
    display: flex;
    justify-items: center;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    padding: 0;
}

.common-child-div-row-start {
    display: flex;
    justify-items: flex-start;
    flex-direction: row;
    align-items: flex-start;
}

.common-top-margin {
    margin-top: calc(3.87rem*var(--base-scale));
}

.common-top-margin-45rem {
    margin-top: calc(4.5rem*var(--base-scale));
}

.common-top-margin-59rem {
    margin-top: calc(5.9rem*var(--base-scale));
}

.common-top-margin-08rem {
    margin-top: calc(0.8rem*var(--base-scale));
}

.common-top-margin-1rem {
    margin-top: calc(1rem*var(--base-scale));
}

.common-top-margin-1-5rem {
    margin-top: calc(1.5rem*var(--base-scale));
}

.common-top-margin-2rem {
    margin-top: calc(2rem*var(--base-scale));
}

.common-top-margin-2-5rem {
    margin-top: calc(2.5rem*var(--base-scale));
}

.common-top-margin-6rem {
    margin-top: calc(6rem*var(--base-scale));
}

.common-top-margin-52 {
    margin-top: 52px;
}

.common-tv-center {
    text-align: center;
}


.common-tv-align-start {
    text-align: start;
}


br {
    margin: 0;
    padding: 0;
}


h1 {
    font-family: 'RubikBold', Arial, sans-serif;
    font-size: calc(2.11rem*var(--base-scale));
    margin: 0px;
    padding: 0px;
    font-weight: var(--big-font-weight);
    margin-block-start: 0px;
    margin-block-end: 0px;
}


h2 {
    font-family: 'RubikBold', Arial, sans-serif;
    font-size: calc(1.5rem*var(--base-scale));
    margin: 0px;
    padding: 0px;
    color: white;
    margin-block-start: 0px;
    margin-block-end: 0px;
    font-weight: var(--vice-font-weight);
    line-height: calc(1.5rem*var(--base-scale));
}


h3 {
    font-family: 'RubikBold', Arial, sans-serif;
    font-size: calc(1.2rem*var(--base-scale));
    margin: 0px;
    padding: 0px;
    color: white;
    margin-block-start: 0px;
    margin-block-end: 0px;
    font-weight: var(--vice-font-weight);
    line-height: calc(1.2rem*var(--base-scale));
}

h4 {
    font-family: 'RubikMedium', Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
    font-weight: var(--medium-font-weight);
}



p {
    font-family: 'RubikRegular', Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    font-weight: var(--normal-font-weight);
    margin-block-start: 0px;
    margin-block-end: 0px;
}


span {
    font-family: 'RubikViceBold', Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    color: white;
}


.bar-size {
    font-family: 'RubikRegular', Arial, sans-serif;
    font-size: calc(1rem*var(--base-scale));
    color: white;
    font-weight: var(--normal-font-weight);
    margin: 0px;
}

.common-p-fontsize {
    font-size: calc(1.13rem *var(--base-scale));
}

.common-p-fontsize-138 {
    /* font-size: calc(var(--expand-font-size)*var(--base-scale)); */
    font-size: calc(1rem*var(--base-scale));
}

.fontSize12 {
    font-size: 12px;
}

.purple-color {
    color: #BD83FF;
}


.p-white {
    color: white;
}


.el-alpha-anim {
    opacity: 0;
    visibility: hidden;
    /* 过渡动画：0.5秒内平滑变化 */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.el-alpha-anim.active {
    opacity: 1;
    visibility: visible;
}

.expand-rect {
    max-width: var(--base-max-width);
    width: 100%;
    justify-items: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 var(--base-w-padding);
}

/* @media (max-width:1200px) {
        h1 {
            font-size: 1.6rem;
        }

        h2 {
            font-size: 1.3rem;
        }

        .bar-size {
            font-size: 1rem;
        }
    } */

.v-hidden {
    visibility: hidden;
}

.gradient-title-text {
    /* 文字渐变核心样式 */
    background-image: linear-gradient(to right, #FFF478, #FF9625);
    background-clip: text;
    -webkit-background-clip: text;
    /* 兼容Safari等浏览器 */
    color: transparent;
}

.transImg {
    transition: opacity 0.2s, transform 0.2s;
    opacity: 1;
    will-change: opacity;
    transform: translateY(0px);
}

.transImg.fadeOut {
    opacity: 0;
    transform: translateY(8px);
}

/* .transTxt {
    transition: opacity 0.2s, transform 0.2s;
    opacity: 1;
    will-change: opacity;
    transform: translateY(0px);
} */

.only-preload {
    opacity: 0;
}

.lang-fadeOut {
    opacity: 0;
    transform: translateY(8px);
}

[data-key] {
    transition: opacity 0.2s, transform 0.2s;
}