.header {
    transition: background-color .5s;
}

.header.transparent-style {
    background-color: transparent;
}

.header .topmenus>.item>a {
    transition: color .5s;
}

.header.transparent-style .topmenus>.item>a {
    color: #fff;
}

.header.transparent-style .rightpart span {
    color: #fff;
}

.header img {
    transition: filter .5s;
}

.header.transparent-style img {
    filter: brightness(0) invert(1);
}

.header.transparent-style .to-ess-website a::after,
.header.transparent-style .wrap span:after {
    border-color: #fff;
}

body {
    --font-size-68: clamp(34px, 3.54vw, 68px);
    --font-size-58: clamp(30px, 3.02vw, 58px);
    --font-size-48: clamp(26px, 2.5vw, 48px);
    --font-size-36: clamp(22px, 1.45vw, 28px);
    --font-size-24: clamp(20px, 1.25vw, 24px);
    --font-size-20: clamp(18px, 1vw, 20px);
    --font-size-18: 18px;
    --font-size-16: 16px;
    --font-size-14: 14px;
    --main-color: #39A9AE;
    --secondary-color: #CAA869;
    --bg-color: #F5F7FA;
    font-size: 16px;
    color: #333;
}

.u-font-size-48 {
    font-size: var(--font-size-48);
}

.u-font-size-24 {
    font-size: var(--font-size-24);
}

.u-font-size-18 {
    font-size: var(--font-size-18);
}

.u-font-weight {
    font-weight: bold;
}

.u-font-center {
    text-align: center;
}

.u-font-right {
    text-align: right;
}

.u-bg-color {
    background-color: var(--bg-color);
}

.u-pt-120 {
    padding-top: clamp(35px, 6.25vw, 120px);
}

.u-pb-150 {
    padding-bottom: clamp(35px, 7.81vw, 150px);
}

.u-pb-60 {
    padding-bottom: clamp(35px, 3.125vw, 60px);
}

.u-flex {
    display: flex;
}

.u-direction-column {
    flex-direction: column;
}

.u-justify-between {
    justify-content: space-between;
}

.u-align-center {
    align-items: center;
}

.u-gap-60 {
    gap: clamp(20px, 3.125vw, 60px);
}

.u-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tigerneo_5_page {
    width: 100%;
    height: auto;
}

.p5-banner-swiper {
    position: relative;
    width: 100%;
    height: 100vh;
}

.p5-banner-swiper .bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom left;
}

.p5-banner-swiper .banner-pagination {
    position: absolute;
    bottom: 20px;
    z-index: 3;
    text-align: center;
}

.p5-banner-swiper .banner-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    border-radius: 0;
    background-color: #fff;
}

.introduce__text {
    width: min(920px, 100%);
    margin: 0 auto;
    margin-top: clamp(10px, .78vw, 15px);
    font-size: 16px;
}

.introduce__body {
    margin-top: clamp(25px, 2.6vw, 50px);
}

.introduce__body .introduce__pic {
    position: relative;
    width: clamp(250px, 48.95vw, 940px);
    height: clamp(200px, 28.9vw, 555px);
    border-radius: 20px;
    overflow: hidden;
}

.circle-box-mask {
    position: absolute;
    z-index: 4;

    inset: 0;
    pointer-events: none;
    --x: 50%;
    --y: 50%;
    /* 初始值随便写，动画会覆盖 */
    --r: 0px;
    --feather: 100px;

    background: radial-gradient(circle var(--r) at var(--x) var(--y),
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0) calc(var(--r) - var(--feather)),
            #000 var(--r));

}

.square-box-mask {
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    --w: 0%;
    --feather: 0px;

    background: linear-gradient(to right,
            #000 0,
            #000 calc(50% - var(--w) / 2 - var(--feather)),
            rgba(255, 255, 255, 0) calc(50% - var(--w) / 2),
            rgba(255, 255, 255, 0) calc(50% + var(--w) / 2),
            #000 calc(50% + var(--w) / 2 + var(--feather)),
            #000 100%);
}



@property --r {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.introduce__body .introduce__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.introduce__body .introduce__list {
    flex: 1;
}

.introduce__body .introduce-item {
    /* flex: 1; */
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    transition: flex .5s;
}

.introduce__body.no-folder .introduce-item {
    flex: 1;
}

.introduce__body.no-folder .introduce-item .introduce-item__body {
    display: block;
}

.introduce__body .introduce-item.is-active {
    flex: 1;
}

.introduce__body .introduce-item__folder {
    gap: 10px;
    padding: clamp(10px, 1.04vw, 20px) 0;
    cursor: pointer;
}

.introduce__body .introduce-item__folder .introduce-item__icon {
    width: clamp(20px, 1.71vw, 33px);
}

.introduce__body .introduce-item__folder .introduce-item__icon img {
    width: 100%;
}

.introduce__body .introduce-item__folder:hover {
    background-color: #39A9AE10;
}

.introduce__body .introduce-item__folder .introduce-item__title {
    flex: 1;
    line-height: 1.5;
}

.introduce__body .introduce-item__folder .folder-icon {
    width: clamp(20px, 1.3vw, 25px);
}

.introduce__body .introduce-item__folder .folder-icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.introduce__body .is-active .introduce-item__folder .folder-icon rect:nth-child(3),
.introduce__body .is-active .introduce-item__folder .folder-icon rect:nth-child(4) {
    opacity: 0;
}

.introduce-item__body {
    display: none;
}

.introduce-item__body .introduce-item__title {
    font-size: var(--font-size-20);
    color: var(--secondary-color);
}

.introduce-item__body .introduce-item__text {
    padding-bottom: clamp(20px, 2.08vw, 40px);
    margin-top: clamp(10px, .78vw, 15px);
}

.introduce-item__body .introduce-item__text .mark {
    margin-top: 10px;
    color: var(--secondary-color);
    font-weight: bold;
}

.core-value__pic {
    position: relative;
    width: 100%;
    height: clamp(300px, 33.85vw, 650px);
    margin-top: clamp(20px, 2.6vw, 50px);
    border-radius: 15px;
    overflow: hidden;
}

.core-value__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.core-value-list {
    gap: clamp(20px, 2.08vw, 40px);
    margin-top: clamp(20px, 1.56vw, 30px);
}

.core-value-list .core-item {
    flex: 1;
    padding-bottom: clamp(20px, 1.04vw, 25px);
    border-bottom: 2px solid var(--secondary-color);
    opacity: .6;
    transition: opacity .5s;
}

.core-value-list .core-item:hover {
    opacity: 1;
}

.core-value-list .core-item.is-active {
    opacity: 1;
}

.core-value-list .core-item__type {
    color: var(--secondary-color);
    font-size: var(--font-size-14);
}

.core-value-list .core-item__title {
    font-size: var(--font-size-24);
}

.core-value-list .core-item__text {
    margin-top: clamp(5px, .52vw, 10px);
    font-size: var(--font-size-14);
}

.product-appearance {
    position: relative;
    width: 100%;
    height: min(56.25vw, 1080px);
    background: url('/themes/basic/skin/images/tigerneo-5/product-appearance-bg.jpg') no-repeat bottom/cover;
}

.product-appearance .title-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.product-appearance__body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.product-appearance__body .product-appearance__img {
    position: absolute;
    right: 0;
    top: 0;
    width: min(64.79vw, 1244px);
    height: min(49.5vw, 952px);
}

.product-appearance__body .product-appearance__img::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: min(40vw, 768px);
    height: min(40vw, 768px);
    background-image: linear-gradient(190deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 50%);
}

.product-appearance__body .product-appearance__img img {
    display: block;
    width: 100%;
    height: 100%;
}

.product-appearance__item {
    position: absolute;
    gap: 10px;
    font-size: var(--font-size-24);
    color: var(--secondary-color);
    line-height: 1.5;
}

.product-appearance__item .product-appearance__line {
    width: 100px;
    height: .833vw;
    margin-top: .5vw;
    background: url('/themes/basic/skin/images/tigerneo-5/product-appearance-line.png') no-repeat left / auto 100%;
}

.product-appearance__item:nth-child(1) {
    top: min(19.79vw, 380px);
    right: min(54.79vw, 1052px);
}

.product-appearance__item:nth-child(1) .product-appearance__line {
    width: min(13.9vw, 267px);
}

.product-appearance__item:nth-child(2) {
    top: min(35.52vw, 682px);
    right: min(43.229vw, 830px);
}

.product-appearance__item:nth-child(2) .product-appearance__line {
    width: min(20.67vw, 397px);
}

.product-appearance__item:nth-child(3) {
    top: min(42.29vw, 812px);
    right: min(20.62vw, 396px);
}

.product-appearance__item:nth-child(3) .product-appearance__line {
    width: min(16.92vw, 325px);
}

.packaging-technique {
    position: relative;
    width: 100%;
    background: url('/themes/basic/skin/images/tigerneo-5/packaging-technique-bg.jpg') no-repeat bottom/cover;
    color: #fff;
}

.packaging-technique .packaging-technique__subtitle {
    width: min(960px, 100%);
    margin: 0 auto;
    margin-top: clamp(20px, 2.6vw, 50px);
}

.packaging-technique .packaging-technique__subtitle p {
    font-size: clamp(20px, 1.66vw, 32px);
    line-height: 1.5;
    background-image: linear-gradient(180deg, var(--secondary-color) 60%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.packaging-technique__detail {
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(70px, 13vw, 250px);
}

.packaging-technique-list {
    position: relative;
    z-index: 3;
    gap: 0 clamp(20px, 3.125vw, 60px);
    padding-left: clamp(25px, 14.06vw, 270px);
}

.packaging-technique-list .packaging-item {
    align-items: flex-start;
    gap: 0 18px;
    height: 100%;
    width: clamp(120px, 11.45vw, 220px);
}

.packaging-technique-list .packaging-item:nth-child(1) {
    margin-top: clamp(80px, 12vw, 230px);
}

.packaging-technique-list .packaging-item:nth-child(2) {
    margin-top: clamp(60px, 9.375vw, 180px);
}

.packaging-technique-list .packaging-item:nth-child(3) {
    margin-top: clamp(40px, 6.25vw, 120px);
}

.packaging-technique-list .packaging-item:nth-child(4) {
    margin-top: clamp(20px, 3.125vw, 60px);
}

.packaging-technique-list .packaging-item-line {
    width: clamp(15px, 1.04vw, 20px);
}

.packaging-technique-list .packaging-item__title {
    font-size: clamp(24px, 1.875vw, 36px);
    font-weight: bold;

    background-image: linear-gradient(180deg, var(--secondary-color) 60%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.packaging-technique-list .packaging-item__subtitle {
    margin-top: 8px;
    font-size: var(--font-size-24);
    color: var(--secondary-color);
    font-weight: bold;
    line-height: 1;
    font-size: var(--font-size-16);
}

.packaging-technique-list .packaging-item__text {
    margin-top: 8px;
    line-height: 1.5;
    font-size: 14px;
}

.packaging-technique__detail .packaging-technique__pic {
    position: absolute;
    right: clamp(-157px, -8.177vw, -75px);
    top: clamp(100px, 16.97vw, 230px);
    width: clamp(800px, 87.65vw, 1683px);
}

.packaging-technique__detail .packaging-technique__pic img {
    display: block;
    width: 100%;
}

.villa-style__list {
    gap: 0 clamp(20px, 1.56vw, 30px);
    margin-top: clamp(30px, 2.864vw, 55px);
}

.villa-style__list .villa-item {
    flex: 1;
    position: relative;
    min-height: 26vw;
    padding: clamp(25px, 2.08vw, 40px) clamp(20px, 1.56vw, 30px);
    padding-bottom: clamp(20px, 1.82vw, 35px);
    border-radius: 15px;
    overflow: hidden;
    color: #fff;
}

.villa-style__list .villa-item>* {
    position: relative;
    z-index: 2;
}

.villa-style__list .villa-item .square-box-mask {
    position: absolute;
    z-index: 4;
}

.villa-style__list .villa-item__bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.villa-style__list .villa-item__bg img {
    width: 100%;
    height: 100%;
}

.villa-style__list .villa-item__bg::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .5s;
}

.villa-style__list .villa-item:hover .villa-item__bg::after {
    opacity: 1;
}

.villa-style__list .villa-item__type {
    gap: 0 clamp(10px, .78vw, 15px);
    font-size: var(--font-size-24);
}

.villa-style__list .villa-item__type .icon {
    width: clamp(25px, 2.08vw, 40px);
}

.villa-style__list .villa-item__type .icon img {
    display: block;
    width: 100%;
}

.villa-style__list .villa-item__type p {
    flex: 1;
    line-height: 1.5;
}

.villa-style__list .villa-item__text {
    flex: 1;
    font-size: var(--font-size-20);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s;
    line-height: 1.5;
}

.villa-style__list .villa-item__btn {
    position: relative;
    padding: clamp(10px, .78vw, 15px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: var(--font-size-16);
    font-weight: bold;
    background-color: rgba(255, 255, 255, .2);
    backdrop-filter: blur(1px);
}

.villa-style__list .villa-item__btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #CAA869, #F1E5CF);
    border-radius: 10px;
    opacity: 0;
    transition: opacity .5s;
}

.villa-style__list .villa-item:hover .villa-item__btn::after {
    opacity: 1;
}

.villa-style__list .villa-item:hover .villa-item__text {
    opacity: 1;
    visibility: visible;
}

.villa-style__list .villa-item__btn p {
    position: relative;
    z-index: 2;
    line-height: 1.5;
}

.generate-electricity {
    position: relative;
    width: 100%;
    background: url('/themes/basic/skin/images/tigerneo-5/product-appearance-bg.jpg') no-repeat bottom/cover;
    color: #fff;
}

.generate-electricity__body {
    gap: clamp(25px, 2.6vw, 50px);
    margin-top: clamp(30px, 3.38vw, 65px);
}

.generate-electricity__introduce {
    flex: 1;
}

.generate-electricity__introduce-body {
    width: min(360px, 100%);
    margin: 0 auto;
    font-size: var(--font-size-14);
}

.generate-electricity__introduce-body .electricity-item {
    width: min(235px, 100%);
    margin: 0 auto;
}

.generate-electricity__introduce-body .electricity-item:not(:first-child) {
    margin-top: clamp(15px, 1.82vw, 35px);
}

.generate-electricity__introduce-body .electricity-item__title {
    font-size: var(--font-size-58);
    font-weight: bold;
    line-height: 1;
    background-image: linear-gradient(180deg, var(--secondary-color) 50%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.generate-electricity__introduce-body .electricity-item__subtitle {
    margin-top: 10px;
    font-weight: bold;
    font-size: var(--font-size-18);
}

.generate-electricity__introduce-body .electricity-item__text {
    margin-top: 5px;
}

.generate-electricity__introduce-body .electricity-tips {
    margin-top: clamp(10px, 1.82vw, 35px);
    border-top: 1px solid #CAA86930;
}

.generate-electricity__introduce-body .electricity-tips__icon {
    width: clamp(20px, 1.56vw, 30px);
    margin: 0 auto;
    margin-top: clamp(20px, 2.08vw, 40px);
}

.generate-electricity__introduce-body .electricity-tips__icon img {
    display: block;
    width: 100%;
}

.generate-electricity__introduce-body .electricity-tips__text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
}


.generate-electricity__product-img {
    position: relative;
    width: clamp(150px, 15.625vw, 300px);
    height: 100%;
}

.generate-electricity__product-img img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
}

.generate-electricity__product-img .generate-electricity__product-img__shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transform: translateY(63%);
}

.generate-electricity__chart-img {
    flex: 1;
}

.generate-electricity__chart-img img {
    width: 100%;
}

.title-content .title-content__title {
    line-height: 1.5;
}

.title-content .title-content__text {
    margin-top: 10px;
}

.u-index-2 {
    z-index: 2;
}

.energy-duration__body {
    position: relative;
    padding: clamp(20px, 3.125vw, 60px) clamp(25px, 1.56vw, 30px);
    padding-top: clamp(200px, 23.43vw, 450px);
    margin-top: clamp(25px, 2.86vw, 55px);
    border-radius: 15px;
    overflow: hidden;
    color: #fff;
}

.energy-duration__body-bg-pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.energy-duration__list {
    position: relative;
    z-index: 2;
    padding-top: 30px;
    backdrop-filter: blur(5px);
}

.energy-duration__list .energy-item {
    flex: 1;
    padding: 0 clamp(20px, 2.083vw, 40px);
}

.energy-duration__list .energy-item:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, .3);
}

.energy-duration__list .energy-item__icon {
    display: flex;
    align-items: flex-end;
    width: clamp(35px, 2.86vw, 55px);
    height: clamp(30px, 2.34vw, 45px);
}

.energy-duration__list .energy-item__icon img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.energy-duration__list .energy-item__title {
    margin-top: 10px;
    font-size: var(--font-size-18);
    font-weight: bold;
    color: var(--secondary-color);
    line-height: 1.5;
}

.energy-duration__list .energy-item__text {
    margin-top: clamp(5px, .78vw, 15px);
}

.high-protection__compare {
    position: relative;
    gap: 0 20px;
    overflow: hidden;
    margin-top: clamp(25px, 2.6vw, 50px);
}

.high-protection__compare .compare-sign {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(60px, 6.25vw, 120px);
    height: clamp(60px, 6.25vw, 120px);
    background-color: var(--secondary-color);
    font-size: var(--font-size-68);
    font-weight: bold;
    border-radius: 50%;
    aspect-ratio: 1/1;
    color: #fff;
}

.high-protection__compare .compare-item {
    flex: 1;
    position: relative;
    aspect-ratio: 710 / 425;
    border-radius: 15px;
    overflow: hidden;
}

.high-protection__compare .compare-item__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.high-protection__compare .compare-item__content {
    position: absolute;
    top: clamp(20px, 2.08vw, 40px);
    left: clamp(20px, 2.08vw, 40px);
    z-index: 2;
    color: #fff;
}

.high-protection__compare .compare-item__title {
    font-size: var(--font-size-24);
    font-weight: bold;
    color: var(--secondary-color);
}

.high-protection__compare .compare-item__text {
    margin-top: 5px;
}

.high-protection__list {
    gap: 20px;
    margin-top: 20px;
}

.high-protection__list .protection-detail {
    flex: 1;
    padding: clamp(20px, 2.08vw, 40px) clamp(15px, 1.56vw, 30px);
    border-radius: 15px;
}

.high-protection__list .protection-detail__icon {
    width: clamp(30px, 2.34vw, 45px);
    height: clamp(30px, 2.34vw, 45px);
}

.high-protection__list .protection-detail__icon img {
    max-width: 100%;
    max-height: 100%;
}

.high-protection__list .protection-detail__title {
    margin-top: clamp(5px, .52vw, 10px);
    font-size: var(--font-size-18);
    font-weight: bold;
}

.quality-guarantee {
    position: relative;
    color: #fff;
}

.quality-guarantee__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quality-guarantee .ct {
    position: relative;
    z-index: 2;
}

.quality-guarantee__core {
    margin-top: clamp(40px, 5.208vw, 100px);
    color: var(--secondary-color);
}

.quality-guarantee__core-year {
    font-size: clamp(38px, 4.58vw, 88px);
    font-weight: bold;
    line-height: 1;
    background-image: linear-gradient(180deg, var(--secondary-color) 20%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.quality-guarantee__core-desc {
    margin-top: 10px;
    font-size: var(--font-size-24);
    background-image: linear-gradient(180deg, var(--secondary-color) 20%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.quality-guarantee__core-text {
    background-image: linear-gradient(180deg, var(--secondary-color) 40%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.quality-guarantee__list {
    margin-top: clamp(100px, 12.5vw, 240px);
}

.quality-guarantee__list .quality-detail {
    flex: 1;
    padding: 0 clamp(20px, 2.083vw, 40px);
}

.quality-guarantee__list .quality-detail:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, .4);
}

.quality-guarantee__list .quality-detail__icon {
    width: 40px;
    height: 40px;
}

.quality-guarantee__list .quality-detail__icon img {
    max-width: 100%;
    max-height: 100%;
}

.quality-guarantee__list .quality-detail__title {
    margin-top: clamp(10px, .78vw, 15px);
    font-size: var(--font-size-18);
    font-weight: bold;
    line-height: 1.5;
}

.quality-guarantee__list .quality-detail__text {
    margin-top: clamp(10px, 7.81vw, 15px);
    line-height: 1.5;
}

.ROI {
    position: relative;
    padding-bottom: clamp(200px, 20.08vw, 400px);
    color: #fff;
    overflow: hidden;
}

.ROI-scene__bg {
    --bg-offset: 0%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ROI-scene__bg .ROI-scene__bg-pic {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ROI-scene__bg .ROI-scene__bg-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ROI-scene__bg .ROI-scene__bg-pic:nth-child(1) img {
    transform-origin: right;
}

.ROI-scene__bg .ROI-scene__bg-pic:nth-child(2) img {
    transform-origin: left;
}

/* .ROI-scene__bg::after {
    content: '';
    position: absolute;
    top: 0;
    transform: translateX(calc(var(--bg-offset) * -1));
    z-index: 2;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #000 80%, #00000000);
}

.ROI-scene__bg::before {
    content: '';
    position: absolute;
    top: 0;
    transform: translateX(var(--bg-offset));
    z-index: 2;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, #000 80%, #00000000);
} */

.ROI .ct {
    position: relative;
    z-index: 2;
}

.ROI-scene-list {
    margin-top: clamp(30px, 3.9vw, 75px);
}

.ROI-scene__introduce {
    flex: 1;
    padding: 0 clamp(30px, 3.645vw, 70px);
}

.ROI-scene__introduce-title {
    font-size: var(--font-size-36);
    font-weight: bold;
    line-height: 1.5;
}

.ROI-scene__content {
    position: relative;
    margin-top: clamp(25px, 2.6vw, 50px);
}

.ROI__period {
    align-items: flex-end;
    font-size: clamp(36px, 3.75vw, 72px);
    font-weight: bold;
    line-height: 1;
}

.ROI__period .unit {
    margin-left: 10px;
    font-size: var(--font-size-24);
    line-height: 1.8;
}

.ROI__period.text-gradient {
    position: relative;
    z-index: 2;
    background-image: linear-gradient(180deg, var(--secondary-color) 50%, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ROI-scene__tips {
    margin-top: 10px;
    font-size: var(--font-size-18);
}

.ROI-scene__content .text-shadow {
    position: absolute;
    left: 2px;
    top: 2px;
    color: #00000020;
}