@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ovo';
    src: url('./fonts/Ovo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('./fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Figtree';
    src: url('./fonts/Figtree-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Impact';
    src: url('./fonts/impact-2.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body {
    background: var(--bg-primary);
}

:root {
    --font-family: 'Poppins', sans-serif;
    --font-family-impact: 'Impact', sans-serif;
    --semiBold-font-family: 'Poppins-SemiBold', sans-serif;
    --title-font-family: 'Figtree', sans-serif;
    --text-color-primary: rgba(0, 0, 0, 0.6);
    --font-family-ovo: 'Ovo', sans-serif;
    --title-size-h1: 75px;
    --title-size-h2: 60px;
    --title-size-h3: 36px;
    --title-size-h4: 28px;
    --title-size-h5: 24px;
    --text-size: 16px;
    --text-title-size: 18px;
    --text-flag-size: 20px;
    --component-gap: 180px;
    --component-gap-lg: 90px;
    --component-gap-sm: 70px;
    --text-gap: 50px;
    --text-gap-lg: 40px;
    --text-gap-sm: 30px;
    --page-padding: calc((100vw - 1300px) / 2);

    --bg-primary: #F5F4F1;
    --bg-secondary: #EFEBE7;

    --btn-bg-img-primary: linear-gradient(to right, #F5F4F1, #F5F4F1),
        linear-gradient(90deg, #B9A17F 0%, #DEC29B 50%, #B9A17F 100%);
    --btn-bg-img-secondary: linear-gradient(90deg, #EFEEE9, #EFEEE9),
        linear-gradient(90deg, #B9A17F 0%, #DEC29B 50%, #B9A17F 100%);
}

.container {
    max-width: 1330px;
}

/* 轮播图按钮样式 */
.swiper-button-prev,
.swiper-button-next {
    width: 60px !important;
    height: auto !important;
    aspect-ratio: 60/29;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    display: none !important;
}

.swiper-button-prev:hover svg path,
.swiper-button-next:hover svg path,
.swiper-button-prev.active svg path,
.swiper-button-next.active svg path {
    fill: var(--color-primary) !important;
}

/* 表单输入样式 */
.inqury-form .one-line-input,
.inqury-form .phone_number,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle {
    height: 55px !important;
}

.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    line-height: 55px !important;
}

.inqury_submit {
    height: 55px !important;
    border-radius: 0 !important;
}

.inqury-form .textarea-input {
    height: 180px !important;
}

.one-line-input:focus,
.one-line-input:hover,
.inqury-form .phone_number:focus,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.inqury-form .phone_number:hover,
.inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    border-color: var(--color-primary) !important;
}

.one-line-input:focus::placeholder,
.one-line-input:hover::placeholder,
.inqury-form .phone_number:focus::placeholder,
.inqury-form .phone_number:hover::placeholder {
    color: var(--color-primary) !important;
}

.textarea-input:focus,
.textarea-input:hover {
    border-color: var(--color-primary) !important;
}

.textarea-input:focus::placeholder,
.textarea-input:hover::placeholder {
    color: var(--color-primary) !important;
}

.inqury-form .runda-btn-primary,
.inqury-form .runda-btn-ghost-white,
.inqury-form .runda-btn-ghost-primary,
.inqury-form .runda-btn {
    padding: 14px 22px;
    display: inline-flex;
}

.inqury-form .runda-btn-primary:hover {
    color: #fff;
    background: #BCA381;
}

/* 按钮样式 */
.runda-btn-primary,
.runda-btn-ghost-white,
.runda-btn-ghost-primary,
.runda-btn {
    width: fit-content;
    padding: 22px 50px;
    color: #FFF;
    text-align: center;
    background: linear-gradient(90deg, #B9A17F 0%, #DEC29B 50%, #B9A17F 100%);
    font-family: var(--semiBold-font-family);
    font-size: var(--text-size);
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.runda-btn-primary {
    transition: none !important;
}

.runda-btn-primary svg path,
.runda-btn-ghost-white svg path,
.runda-btn-ghost-primary svg path,
.runda-btn svg path {
    transition: all 0.3s ease;
}

.runda-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-primary);
}

.runda-btn-ghost-primary {
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: var(--btn-bg-img-primary);
    color: var(--color-primary);
}

.runda-btn-ghost-white {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

.btn-bg-primary {
    background-image: var(--btn-bg-img-primary);
}

.btn-bg-secondary {
    background-image: var(--btn-bg-img-secondary);
}

.runda-btn:hover {
    color: #B9A17F;
}

.runda-btn:hover svg path {
    fill: #B9A17F;
}

.runda-btn-primary:hover svg path {
    fill: #fff;
}

.runda-btn-primary:hover {
    color: #fff;
    background: #BCA381;
}

/* 分页样式 */
#pagesize ul {
    display: flex;
    gap: 12px;
    justify-content: center;
}

#pagesize ul li a {
    width: calc(var(--text-size) / 16 * 30);
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-family: var(--title-font-family);
    font-size: var(--text-size);
    font-weight: 400;
    line-height: normal;
}

#pagesize ul li a i {
    color: #000;
    font-size: var(--text-size);
    font-weight: 400;
    line-height: normal;
}

#pagesize ul li a.active {
    background: var(--color-primary);
    color: #fff;
}

#pagesize ul li a.active i {
    color: #fff;
}

#pagesize ul li a.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#pagesize ul li a:hover {
    background: var(--color-primary);
    color: #fff;
}

#pagesize ul li a:hover i {
    color: #fff;
}

#pagesize ul li a.disabled:hover {
    background: transparent;
    color: #000;
}

#pagesize ul li a.disabled:hover i {
    color: #000;
}

@media screen and (max-width: 768px) {
    #pagesize ul {
        gap: 8px;
    }
}

.runda-btn-ghost-primary:hover {
    border-color: #B9A17F;
    color: #B9A17F;
}

.runda-btn-ghost-primary:hover svg path {
    fill: #B9A17F;
}

.runda-btn-ghost-white:hover {
    border-color: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: var(--btn-bg-img-primary);
    color: var(--color-primary);
}

.runda-btn-ghost-white:hover svg path {
    fill: #B9A17F;
}

/* 标题样式 */
.runda-title {
    font-family: var(--title-font-family);
    font-weight: 400;
    font-size: var(--title-size-h2);
    line-height: normal;
}

.runda-title b,
.runda-title strong {
    color: var(--color-primary);
    font-weight: 400;
}

.runda-sub-title {
    font-family: var(--font-family);
    font-size: var(--title-size-h5);
    line-height: normal;
    font-weight: 400;
    color: var(--title-text-color);
}

.runda-text,
.runda-more {
    font-family: var(--font-family);
    font-size: var(--text-size);
    line-height: normal;
    color: var(--text-color-primary);
}

.runda-more {
    word-break: break-word;
}

/* runda-more 溢出省略时的 tooltip（黑色半透明） */
.runda-tooltip-wrap {
    position: relative;
    display: block;
    max-width: 100%;
}


.runda-tooltip-wrap[data-runda-tooltip]::after {
    content: attr(data-runda-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 9999;
    max-width: min(510px, 80vw);
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    font-size: var(--text-size);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    pointer-events: none;
}

.runda-tooltip-wrap[data-runda-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px) translateX(-50%);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    pointer-events: none;
}

.runda-tooltip-wrap[data-runda-tooltip]:hover::after,
.runda-tooltip-wrap[data-runda-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 移动端 runda-more 溢出：More/Less 展开按钮（具体定位/背景可在各 section 覆盖） */
.runda-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: var(--color-primary);
    font-size: var(--text-size);
    line-height: normal;
    cursor: pointer;
}

.runda-more-toggle:focus {
    outline: none;
}

.runda-text-title {
    font-family: var(--font-family);
    font-size: var(--text-title-size);
    line-height: normal;
    color: #fff;
}

.runda-text-flag {
    font-family: var(--font-family);
    font-size: var(--text-flag-size);
    line-height: normal;
    color: #fff;
}

/* 展开态：取消 line-clamp */
.runda-more.runda-more--expanded {
    padding-right: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}



@media screen and (max-width: 1500px) {
    :root {
        --title-size-h1: 60px;
        --title-size-h2: 48px;
        --title-size-h3: 32px;
        --title-size-h4: 26px;
        --title-size-h5: 22px;
        --text-size: 16px;
        --text-title-size: 18px;
        --text-flag-size: 20px;
        --component-gap: 120px;
        --component-gap-lg: 60px;
        --component-gap-sm: 40px;
        --text-gap: 40px;
        --text-gap-lg: 30px;
        --text-gap-sm: 20px;
        --page-padding: calc((100vw - 1200px) / 2);
    }

    .container {
        max-width: 1230px;
    }
}

@media screen and (max-width: 1280px) {
    :root {
        --title-size-h1: 50px;
        --title-size-h2: 46px;
        --title-size-h3: 32px;
        --title-size-h4: 24px;
        --title-size-h5: 20px;
        --text-size: 14px;
        --text-title-size: 16px;
        --text-flag-size: 18px;
        --component-gap: 100px;
        --component-gap-lg: 60px;
        --component-gap-sm: 40px;
        --page-padding: calc((100vw - 1100px) / 2);
    }

    .container {
        max-width: 1130px;
    }


}

@media screen and (max-width: 1200px) {
    :root {
        --title-size-h1: 42px;
        --title-size-h2: 38px;
        --title-size-h3: 30px;
        --title-size-h4: 22px;
        --title-size-h5: 18px;
        --text-size: 14px;
        --text-title-size: 16px;
        --text-flag-size: 18px;
        --component-gap: 100px;
        --component-gap-lg: 60px;
        --component-gap-sm: 40px;
        --text-gap: 40px;
        --text-gap-lg: 30px;
        --text-gap-sm: 20px;
        --page-padding: calc((100vw - 930px) / 2);
    }

    .container {
        max-width: 960px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 40px !important;
    }

    .runda-btn-primary,
    .runda-btn-ghost-white,
    .runda-btn-ghost-primary,
    .runda-btn {
        padding: 16px 30px;
        gap: 8px;
    }

    .runda-btn {
        padding: 0;
    }
}

@media screen and (max-width: 992px) {
    :root {
        --title-size-h1: 38px;
        --title-size-h2: 34px;
        --title-size-h3: 28px;
        --title-size-h4: 20px;
        --title-size-h5: 16px;
        --text-size: 12px;
        --text-title-size: 14px;
        --text-flag-size: 14px;
        --component-gap: 80px;
        --component-gap-lg: 40px;
        --component-gap-sm: 30px;
        --text-gap: 30px;
        --text-gap-lg: 20px;
        --text-gap-sm: 10px;
        --page-padding: calc((100vw - 720px) / 2);
    }

    /* 移动端：More/Less 视觉上“跟在文本后面”
       - 不再给文本预留大块右侧空白（会造成 More 和文本分离感）
       - 由按钮自身做遮罩/渐变，形成“...More”整体效果
    */
    .runda-more {
        padding-right: 0;
    }

    .container {
        max-width: 720px;
    }

    .runda-btn-primary,
    .runda-btn-ghost-white,
    .runda-btn-ghost-primary,
    .runda-btn {
        padding: 10px 20px;
        gap: 6px;
    }

    .runda-btn {
        padding: 0;
    }

    .runda-tooltip-wrap .runda-more-toggle {
        position: absolute;
        right: 0;
        bottom: -1.5em;
        z-index: 2;
        background: #fff;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --title-size-h1: 30px;
        --title-size-h2: 28px;
        --title-size-h3: 22px;
        --title-size-h4: 18px;
        --title-size-h5: 14px;
        --text-size: 12px;
        --text-title-size: 14px;
        --text-flag-size: 16px;
        --page-padding: calc((100vw - 540px) / 2);
    }

    .container {
        max-width: 540px;
    }
}

@media screen and (max-width: 576px) {
    :root {
        --page-padding: calc((100vw - 450px) / 2);
    }

    .container {
        max-width: 450px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --title-size-h1: 34px;
        --title-size-h2: 30px;
        --title-size-h3: 20px;
        --title-size-h4: 18px;
        --title-size-h5: 16px;
        --text-size: 12px;
        --text-title-size: 14px;
        --text-flag-size: 16px;
        --component-gap: 50px;
        --component-gap-lg: 40px;
        --component-gap-sm: 30px;
        --text-gap: 30px;
        --text-gap-lg: 20px;
        --text-gap-sm: 10px;
        --page-padding: calc((100vw - 360px) / 2);
    }

    .container {
        max-width: 360px;
    }
}