@font-face {
    font-family: 'HarmonyOS Sans Condensed';
    src: url('../font/HarmonyOS_Sans_Condensed_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HarmonyOS Sans';
    src: url('../font/HarmonyOS_Sans_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'TaoBaoMaiCaiTi';
    src: url('../font/TaoBaoMaiCaiTi-Regular.otf') format('opentype'),
        url('../font/TaoBaoMaiCaiTi-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'OppoSans', 'Inter', sans-serif;
    color: #333;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

/* 容器样式 */
.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
}

/* Header 样式 */
.header {
    position: fixed;
    /* 改为 fixed 使其在滚动时固定在顶部 */
    width: 100%;
    background: transparent;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    z-index: 10;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    /* 添加过渡效果 */
}

.header.scrolled {
    background-color: #ffffff;
    /* 滚动时背景变为白色 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 滚动时添加阴影 */
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 修改这里，实现水平居中 */
    padding: 1.0416666666666667vw 0;
    /* 20px / 1920px * 100vw */
    max-width: 100vw;
    /* 1280px / 1920px * 100vw */
    margin: 0 auto;
    position: relative;
    /* 添加 position: relative 以便绝对定位 logo */
}

.logo-section {
    display: flex;
    align-items: center;
    position: absolute;
    left: 7.031vw;
}

.logo {
    width: 4.479vw;
    height: 4.479vw;
    object-fit: contain;
    margin-right: 0.625vw;
    /* 12px / 1920px * 100vw */
}

.company-name {
    font-size: 1.667vw;
    font-weight: 600;
    color: #333;
}

.nav {
    display: flex;
    gap: 4.167vw;
    background: linear-gradient(to right, #000000 0%, #454545 100%);
    padding: 0.5208333333333334vw 1.5625vw;
    border-radius: 1.3020833333333333vw;
    width: 36.563vw;
    justify-content: center;
}

.nav a {
    text-decoration: none;
    color: #FFFFFF;
    /* 非激活状态文字颜色 */
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 1vw;
    /* 根据图片调整字体大小 */
}

.nav a:hover {
    color: #FCBA04;
    /* 悬停时颜色 */
}

.nav a.active {
    color: #FCBA04;
    /* 当前激活页面的颜色 */
    font-weight: normal;
}

/* Hero Section - 1920x893 */
.hero {
    position: relative;
    width: 100%;
    height: 46.510416666666664vw;
    /* 893px / 1920px * 100vw */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #000000;
    text-align: left;
    padding-left: 12.083vw;
    /* 120px / 1920px * 100vw */
}

.hero-title {
    font-family: 'OppoSans', sans-serif;
    font-size: 5vw;
    /* 96px / 1920px * 100vw */
    font-weight: bold;
    color: #000000;
    margin-bottom: 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
}

.hero-subtitle {
    font-family: 'OppoSans', sans-serif;
    font-size: 5vw;
    /* 96px / 1920px * 100vw */
    font-weight: normal;
    color: #000000;
    margin-bottom: 3.125vw;
    /* 60px / 1920px * 100vw */
    /* 2px / 1920px * 100vw, 4px / 1920px * 100vw */
}

.hero-button {
    width: 9.271vw;
    height: 2.396vw;
    font-family: 'HarmonyOS Sans', sans-serif;
    font-size: 1.25vw;
    color: #000000;
    background-color: #f8c300;
    padding: 0.78125vw 2.0833333333333335vw;
    border: none;
    border-radius: 2.083vw;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-button:hover {
    background-color: #e6b000;
    transform: translateY(-2px);
}

/* Company Section - 1920x622 */
.company {
    position: relative;
    width: 100%;
    height: 32.395833333333336vw;
    /* 622px / 1920px * 100vw */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.company-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/company-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-content {
    position: relative;
    z-index: 2;
    max-width: 53.333333333333336vw;
    /* 1024px / 1920px * 100vw */
    padding: 0 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
}

.company-title {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.6666666666666667vw;
    /* 32px / 1920px * 100vw */
    font-weight: bold;
    color: #1E1E1E;
    margin-bottom: 2.0833333333333335vw;
    /* 40px / 1920px * 100vw */
    position: relative;
    display: inline-block;
}

.company-title::after {
    content: '';
    position: absolute;
    bottom: -0.5208333333333334vw;
    /* 10px / 1920px * 100vw */
    left: 50%;
    transform: translateX(-50%);
    width: 9.063vw;
    /* 60px / 1920px * 100vw */
    height: 0.15625vw;
    /* 3px / 1920px * 100vw */
    background-color: #FFFFFF;
}

.company-description {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.25vw;
    /* 24px / 1920px * 100vw */
    color: #000000;
    line-height: 1.8;
    max-width: 53.333vw;
    /* 900px / 1920px * 100vw */
    margin: 0 auto;
}

/* Production Section */
.production {
    padding: 6.25vw 0;
    /* 120px / 1920px * 100vw */
    background-color: #FFFFFF;
}

.production-container {
    margin: 0 9.531vw;
    padding: 0 1.0416666666666667vw;
}

.production-title {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.875vw;
    /* 36px / 1920px * 100vw */
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin-bottom: 4.166666666666667vw;
    /* 80px / 1920px * 100vw */
    position: relative;
    display: inline-block;
    width: 100%;
}

.production-title::after {
    content: '';
    position: absolute;
    bottom: -0.5208333333333334vw;
    /* 10px / 1920px * 100vw */
    left: 50%;
    transform: translateX(-50%);
    width: 9.063vw;
    /* 60px / 1920px * 100vw */
    height: 0.15625vw;
    /* 3px / 1920px * 100vw */
    background-color: #FCBA04;
}

.production-item {
    display: flex;
    /* align-items: center; */
    /* Changed from center to stretch */
    align-items: stretch;
    /* Make items stretch to fill the container's height */
    margin-bottom: 5.208333333333334vw;
    /* 100px / 1920px * 100vw */
    /* gap: 4.166666666666667vw; */
    /* Removed gap */
    background: #F8F8F8;
    /* User mentioned red, but I'll keep F8F8F8 as per previous context, user can change it for testing */
    justify-content: space-between;
    /* Ensure items are spaced out, image will go to the right */
}

.production-item.reverse {
    flex-direction: row-reverse;
}

.production-item.reverse .production-text {
    padding: 2.083vw 4.625vw 1.042vw 3.635vw;
    margin: 0;
    text-align: right;
}

.production-text {
    flex: 1;
    padding: 2.083vw 0 1.042vw 3.625vw;
    /* 20px / 1920px * 100vw */
    margin-right: 4.166666666666667vw;
    /* 80px / 1920px * 100vw, added margin to replace gap */
}

.production-image {
    flex-shrink: 0;
    /* Prevent image container from shrinking */
    /* flex: 1; */
    text-align: right;
    /* Adding a specific width to the image container might be necessary if height: 100% on img doesn't work as expected due to parent flex sizing */
    width: 28.541666666666668vw;
    /* Ensure container has the same width as the image */
    display: flex;
    /* To allow vertical alignment of the image if needed, though height: 100% should handle it */
}

.production-image img {
    width: 28.541666666666668vw;
    /* 548px / 1920px * 100vw */
    height: 100%;
    /* Make image take full height of its container */
    /* height: 26.145833333333332vw; */
    /* 502px / 1920px * 100vw */
    object-fit: cover;
    display: block;
    /* Ensure image behaves as a block element */
}

.production-item-title {
    font-family: 'OppoSans', sans-serif;
    font-size: 2.0833333333333335vw;
    /* 40px / 1920px * 100vw */
    color: #000000;
    font-weight: bold;
    margin-bottom: 1.3020833333333333vw;
    /* 25px / 1920px * 100vw */
}

.production-item-description {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.25vw;
    /* 24px / 1920px * 100vw */
    color: #000000;
    line-height: 1.8;
    margin-bottom: 1.5625vw;
    /* 30px / 1920px * 100vw */
}

.production-features {
    list-style: none;
    padding: 0;
}

.production-features li {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
    color: #666;
    margin-bottom: 0.5208333333333334vw;
    /* 10px / 1920px * 100vw */
    position: relative;
    padding-left: 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
}

.production-features li::before {
    content: '•';
    color: #f8c300;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Styles for new sub-items in Production Section */
.production-sub-items {
    display: flex;
    gap: 2.0833333333333335vw;
    /* 40px / 1920px * 100vw */
    margin-top: 1.5625vw;
    /* 30px / 1920px * 100vw */
}

.production-sub-item {
    flex: 1;
}

.production-sub-item-title {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.458vw;
    color: #000000;
    font-weight: normal;
    margin-bottom: 0.78125vw;
    /* 15px / 1920px * 100vw */
    position: relative;
    display: inline-block;
    /* To make the ::after element position correctly relative to text width */
    padding-bottom: 0.5208333333333334vw;
    /* 10px / 1920px * 100vw, space for the line */
}

.production-sub-item-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2.6041666666666665vw;
    /* 50px / 1920px * 100vw, adjust as needed */
    height: 0.15625vw;
    /* 3px / 1920px * 100vw */
    background-color: #FCBA04;
    /* Yellow line */
}

.production-item.reverse .production-sub-item-title::after {
    right: 0;
    left: unset;
    width: 1.927vw;
}


.production-sub-item-desc {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.25vw;
    /* 18px / 1920px * 100vw */
    color: #333333;
    line-height: 1.6;
}

/* Strength Section */
.strength {
    position: relative;
    /* 添加以便背景图片可以正确定位 */
    padding: 6.25vw 0;
    /* 120px / 1920px * 100vw, 保持与其他部分一致的上下边距 */
    display: flex;
    /* 使用flex布局 */
    align-items: center;
    justify-content: flex-end;
    /* 内容靠右对齐 */
    text-align: left;
    /* 文本左对齐 */
    min-height: 31.25vw;
    /* 600px / 1920px * 100vw, 根据图片内容调整高度 */
    overflow: hidden;
    /* 防止背景溢出 */

    background-image: url(../images/desc-bg.webp);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.strength-content {
    position: relative;
    z-index: 2;
    max-width: 100vw;
    margin-right: 7vw;
    padding: 0 1.0416666666666667vw;
}

.strength-description {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.25vw;
    color: #000000;
    /* 根据图1，文字颜色改为白色 */
    line-height: 1.8;
}

/* Feature Section */
.feature {
    padding: 6.25vw 0;
    /* 120px / 1920px * 100vw */
    background-color: white;
}

.feature-container {
    max-width: 66.66666666666667vw;
    /* 1280px / 1920px * 100vw */
    margin: 0 auto;
    padding: 0 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* fr units are already relative, no need to convert */
    gap: 1.3541666666666667vw;
    /* 26px / 1920px * 100vw */
    justify-content: center;
}

.feature-card {
    width: 25.052083333333332vw;
    /* 481px / 1920px * 100vw */
    height: 31.145833333333332vw;
    /* 598px / 1920px * 100vw */
    background: white;
    border-radius: 1.5104166666666667vw;
    /* 29px / 1920px * 100vw */
    padding: 2.0833333333333335vw 1.5625vw;
    /* 40px / 1920px * 100vw, 30px / 1920px * 100vw */
    box-shadow: 0 0.5208333333333334vw 1.5625vw rgba(0, 0, 0, 0.1);
    /* 10px / 1920px * 100vw, 30px / 1920px * 100vw */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-0.5208333333333334vw);
    /* 10px / 1920px * 100vw */
    box-shadow: 0 1.0416666666666667vw 2.6041666666666665vw rgba(0, 0, 0, 0.15);
    /* 20px / 1920px * 100vw, 50px / 1920px * 100vw */
}

.feature-icon {
    margin-bottom: 1.5625vw;
    /* 30px / 1920px * 100vw */
}

.feature-icon img {
    object-fit: contain;
}

.feature-icon-1 img {
    width: 11.354166666666666vw;
    /* 218px / 1920px * 100vw */
    height: 11.354166666666666vw;
    /* 218px / 1920px * 100vw */
}

.feature-icon-2 img {
    width: 9.645833333333334vw;
    /* 185.2px / 1920px * 100vw */
    height: 11.458333333333334vw;
    /* 220px / 1920px * 100vw */
}

.feature-icon-3 img {
    width: 9.016145833333333vw;
    /* 173.11px / 1920px * 100vw */
    height: 11.09375vw;
    /* 213px / 1920px * 100vw */
}

.feature-title {
    font-family: 'OppoSans', sans-serif;
    font-size: 2.0833333333333335vw;
    /* 40px / 1920px * 100vw */
    font-weight: bold;
    color: #000000;
    margin-bottom: 0.78125vw;
    /* 15px / 1920px * 100vw */
}

.feature-subtitle {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
    color: #777777;
    margin-bottom: 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
    margin-top: 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
    font-weight: 100;
    letter-spacing: 0.1vw;
}

.feature-description {
    font-family: 'OppoSans', sans-serif;
    font-size: 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
    color: #000000;
    line-height: 2;
    max-width: 16.666666666666668vw;
    /* 320px / 1920px * 100vw */
    text-align: left;
}

/* Footer */
.footer {
    background-color: #EEEEEE;
    padding: 3.125vw 0;
    /* 60px / 1920px * 100vw */
}

.footer-container {
    max-width: 66.66666666666667vw;
    /* 1280px / 1920px * 100vw */
    margin: 0 auto;
    padding: 0 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
    text-align: center;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 1.5625vw;
    /* 30px / 1920px * 100vw */
}

.footer-nav a {
    font-family: 'HarmonyOS Sans', sans-serif;
    font-size: 1.0416666666666667vw;
    /* 20px / 1920px * 100vw */
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #f8c300;
}

.footer-text {
    font-family: 'HarmonyOS Sans', sans-serif;
    font-size: 0.8333333333333334vw;
    /* 16px / 1920px * 100vw */
    color: #1E1E1E;
    margin-bottom: 0.78125vw;
    /* 15px / 1920px * 100vw */
}

.footer-text a {
    color: #1E1E1E;
    text-decoration: none;
}

.footer-text a:hover {
    color: #f8c300;
}