/* 响应式样式 */

/* 确保所有屏幕尺寸下禁止水平滚动 */
html, body {
    overflow-x: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch; /* 为iOS设备增加滚动惯性 */
}

/* 视频全屏样式 */
video {
    z-index: 1; /* 默认z-index */
    position: relative;
}

video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen,
video:-ms-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important; /* 确保视频全屏时位于最高层级 */
    background: #000;
}

/* 微信浏览器视频全屏特殊处理 */
.wx-video-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    background: #000;
}

/* iOS特别修复 */
@supports (-webkit-touch-callout: none) {
    /* 修复iOS中底部安全区域问题 */
    .footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* 修复iOS中顶部安全区域问题 */
    .header {
        padding-top: env(safe-area-inset-top);
    }
    
    /* 修复iOS中的固定定位元素滚动问题 */
    .header .container {
        -webkit-transform: translateZ(0);
    }
    
    /* 修复iOS中输入框和按钮的默认样式 */
    input, button, textarea, select {
        -webkit-appearance: none;
        border-radius: 0;
    }
    
    /* 修复iOS中100vh问题(全高度在iOS中会包括地址栏) */
    section {
        min-height: -webkit-fill-available;
    }
    
    /* 修复iOS上logo图片变形 */
    .logo {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .logo a {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    
    .logo img {
        width: 240px !important;
        height: 80px !important;
        max-width: 240px !important;
        max-height: 80px !important;
        object-fit: scale-down !important;
        -webkit-object-fit: scale-down !important;
        aspect-ratio: 3/1 !important;
        image-rendering: -webkit-optimize-contrast !important;
        -webkit-backface-visibility: hidden !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }
    
    /* iOS上特别修复导航菜单问题 */
    .nav-toggle {
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        position: relative !important;
    }
    
    /* 完全重写iOS上的菜单显示逻辑 */
    .navbar {
        transition: transform 0.3s ease !important;
        -webkit-transition: -webkit-transform 0.3s ease !important;
    }
    
    .navbar.active {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        left: 0 !important;
    }
    
    /* 特殊处理iOS上的菜单样式 */
    @media (max-width: 880px) {
        .navbar {
            position: fixed !important;
            top: 90px !important;
            left: 0 !important;
            width: 80% !important;
            height: calc(100vh - 90px) !important;
            background-color: #070e00 !important;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
            transform: translateX(-100%) !important;
            -webkit-transform: translateX(-100%) !important;
            z-index: 999 !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
        
        .logo img {
            width: 195px !important;
            height: 65px !important;
            max-width: 195px !important;
            max-height: 65px !important;
        }
    }
    
    @media (max-width: 767px) {
        .logo img {
            width: 180px !important;
            height: 60px !important;
            max-width: 180px !important;
            max-height: 60px !important;
        }
        
        .navbar {
            top: 80px !important;
            height: calc(100vh - 80px) !important;
        }
    }
    
    @media (max-width: 575px) {
        .logo img {
            width: 150px !important;
            height: 50px !important;
            max-width: 150px !important;
            max-height: 50px !important;
        }
        
        .navbar {
            top: 70px !important;
            height: calc(100vh - 70px) !important;
        }
    }
}

/* 专门针对760px到990px之间的屏幕宽度优化布局 */
@media (min-width: 760px) and (max-width: 900px) {
    .container {
        width: 100%; /* 最大化容器宽度，消除左右margin */
        margin: 0; /* 完全消除margin */
        padding: 0 5px; /* 只保留最小内边距 */
    }
    
    /* 取消section container的内边距 */
    section .container {
        padding: 0 5px;
    }
    
    /* 调整header的container，与其他container保持一致 */
    .header .container {
        padding: 0 10px;
    }
    
    /* 减小内容区域的内边距 */
    .hand-content,
    .smart-ring-content,
    .smart-band-content,
    .controllers-content,
    .vr-showcase {
        padding: 1.5rem 0.5rem; /* 进一步减小padding */
    }
    
    /* 确保各section内容不会挤压 */
    .hand-text,
    .smart-ring-text,
    .smart-band-text,
    .controllers-text {
        padding: 0 0.5rem;
    }
    
    /* 优化视频大小 */
    /* .product1-video {
        width: 55%;
    } */
    .smart-ring-content,.smart-band-content{
        display: flex;
        flex-direction: column !important;
        align-items: center;
        gap:0;
    }

    .smart-ring-text{
         display: flex;
        flex-direction: column !important;
        align-items: center;
        max-width: 100% !important;
    }
    /* 优化视频大小 */
    .product1-video {
        width: 100%;
    }
    .smart-band-text{
        width: 100% !important;
        max-width: 100% !important;
    }
   
}

/* 在屏幕宽度小于880px时显示手机导航栏样式 */
@media (max-width: 880px) {
    .nav-toggle {
        display: block;
        height: 60px;
        display: flex;
        align-items: center;
        z-index: 1001;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .navbar {
        position: fixed;
        top: 60px;
        left: 0;
        width: 80%;
        height: calc(100vh - 90px);
        background-color: #070e00;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        -webkit-transition: -webkit-transform 0.3s ease;
        z-index: 999;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        visibility: hidden;
        opacity: 0;
    }

    .navbar.active {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        visibility: visible;
        opacity: 1;
        left: 0;
    }

    .nav-menu {
        flex-direction: column;
        padding: 30px;
        justify-content: flex-start;
        align-items: flex-start;
        height: auto;
    }

    .nav-item {
        margin: 0 0 20px 0;
        width: 100%;
        height: auto;
    }

    .nav-link {
        font-size: 1.2rem;
        padding: 10px 0;
        display: block;
        height: auto;
        position: relative;
    }
    
    /* 调整移动端下的下划线位置 */
    .nav-link::after {
        bottom: 0;
    }
    
    /* header和logo高度调整 */
    .header {
        height: 60px;
    }
    
    .logo {
        height: 60px;
    }
    
    .logo img {
        height: 50px;
        width: auto;
        object-fit: contain;
        -webkit-object-fit: contain;
    }
    .news-grid{
         grid-template-columns: 1fr;
         grid-template-rows: repeat(8, auto);
         gap: 1rem;
     }
    
    .news-card{
        min-height: 350px;
    }
    
}

/* 大型设备（1200px以下） */
@media (max-width: 1199px) {
    .container {
        /* max-width: 960px; */
        padding: 0 15px; /* 确保有内边距，防止内容贴边 */
        overflow: hidden; /* 防止内容溢出 */
    }
    
    .nav-menu {
        gap: 15px;
    }
    
    /* 调整Hero Section上边距，防止与header重叠 */
    .hero-about-section {
        padding-top: 100px;
    }
    
    /* 确保所有section之间没有间隙 */
    section {
        margin: 0;
        padding: 0;
    }
    
    /* 解决About部分图片和内容重叠问题 */
    .about-image-container {
        transform: scale(0.9);
        max-width: 100%; /* 确保容器不超出父元素 */
        overflow: hidden; /* 防止内容溢出 */
    }
    
    .about-content-section .about-image-container {
        margin-top: -3rem;
    }
    
    .we-do {
        margin-top: -4rem;
    }
    
    /* 调整About部分容器的padding */
    .about-content-section .container, .latest-news .container{
        padding: 3rem 5px;
    }
    .latest-news,.contact-us{
        margin-top:-1px;
    }
    .contact-us .container{
        padding:3rem 30px;
    }
    
    
    /* 调整图片大小和位置 */
    .about-content-section .about-overlay-image {
        max-width: 85%;
        margin: 0 auto;
    }
}
@media (min-width: 796px) and (max-width: 1199px) {
      /* 处理内容区域，确保不被header遮挡 */
    .about-content-section .about-us-content {
        padding: 0 2rem;
    }

}
/* 中型到大型设备（992px到1199px之间） */
@media (min-width: 992px) and (max-width: 1199px) {
    /* 特别处理Hero Section的上边距，修复重叠问题 */
    .hero-about-section {
        padding-top: 100px;
    }
    
  
    
    /* 调整Smart Ring文本区域宽度 */
    .smart-ring-text {
        max-width: 75%;
    }
}

/* 中到小型设备（736px到991px之间） */
@media (min-width: 736px) and (max-width: 991px) {
    /* 修复重叠问题，但保持背景一致性 */
    .hero-about-section {
        padding-top: 100px;
    }
    
    .about-content-section .about-us-content {
        padding:20px 0.5rem 0 0.5rem;
    }
    .news-grid{
        padding:2rem 0.5rem 0 0.5rem;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 1rem;
    }
    /* 调整header导航的布局 */
    .nav-menu {
        gap: 10px;
    }
    
    .nav-item {
        margin-left: 15px;
    }
    
    .hand-content,
    .smart-ring-content,
    .smart-band-content,
    .vr-showcase {
        padding: 3rem 2rem;
    }
    
    .controllers-content {
        margin: 2rem 0;
    }
}

/* 中型设备（992px以下） */
@media (max-width: 991px) {
    .container {
        width: 100%; /* 确保宽度为100% */
        padding: 0 15px; /* 确保有内边距，防止内容贴边 */
        overflow: hidden; /* 防止内容溢出 */
    }

    section {
        padding: 0;
        margin: 0;
    }
    
    .about-image {
        width: 85%;
    }
    
    .about-content {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-container {
        flex-direction: column;
    }

    /* DOF部分适配 */
    .dof.section {
        padding: 50px 0;
    }

    /* 光束效果响应式 */
    .light-beam-effect {
        height: 100px;
        margin: 1.5rem 0 2.5rem 0;
    }
    
    .light-beam-effect .elliptical-glow {
        width: 320px;
        height: 70px;
    }
    
    .light-beam-effect::after {
        width: 70%;
    }
    
    /* 完全解决小屏幕下的重叠问题 */
    .about-image-container {
        width: 100%;
        margin-top: 1rem;  /* 改为正值，避免重叠 */
        transform: scale(0.8);
        max-width: 100%; /* 确保容器不超出父元素 */
        overflow: hidden; /* 防止内容溢出 */
    }
    
    /* 调整About文本部分 */
    .we-do {
        margin-top: -3rem;  /* 改为正值，使内容向下移动 */
    }
    
    /* 解决小屏幕下的About Us布局问题 */
    .about-us-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;  /* 减少垂直间距 */
    }

    .hero-section {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-image, .hero-text {
        max-width: 100%;
        padding-left: 0;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .kiwear-title {
        font-size: 30px;
    }
    
    .kiwear-desc {
        font-size: 1.1rem;
    }
    
    .about-title {
        font-size: 2.5rem;
        text-align: center;
    }

    .dof-content {
        flex-direction: column;
        align-items: center;
    }
    
    .dof-card {
        max-width: 480px;
        width: 100%;
    }
    
    .dof-title {
        font-size: 3.5rem;
    }

    /* 视频响应式调整 */
    .product1-video {
        /* width: 90%; */
        max-width: 100%; /* 确保视频不会超过容器宽度 */
    }
}

/* 小型过渡设备（730px到736px之间）- 处理边界情况 */
@media (min-width: 730px) and (max-width: 736px) {
    .hero-about-section {
        padding-top: 90px;
    }
    
    .about-content-section .about-us-content {
        padding-top: 20px;
    }
}

/* 小型设备（768px以下） */
@media (max-width: 767px) {
    .container {
        max-width: 100%;
        width: 100%; /* 确保宽度为100% */
        padding: 0 12px; /* 修改为更合适的内边距值 */
        overflow: hidden; /* 防止内容溢出 */
    }
    
  
    
    /* 调整导航栏位置 */
    .navbar {
        top: 80px;
        height: calc(100vh - 80px);
    }
    
    /* 调整导航按钮高度 */
    .nav-toggle {
        height: 60px;
    }
    
    /* 顶部section的边距调整 */
    #AboutUs {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* AboutUs响应式布局 */
    .about-us-content {
        flex-direction: column;
        /* gap: 2rem; */
    }

    .about-us .about-text,
    .about-us .about-image {
        max-width: 100%;
    }

    .about-us .about-text h1 {
        font-size: 3.5rem;
    }

    .about-us .company-intro {
        font-size: 1.6rem;
        line-height: 1.45;
    }

    .about-us .intro-point {
        font-size: 1rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.45;
    }
    .disclaimer{
        font-size: 14px;
        line-height:1.35
    }

    /* 手部交互部分响应式布局 */
    .hand-content {
        flex-direction: column-reverse;
        gap: 2rem;
        padding: 2rem 8px;
    }

    .hand-image,
    .hand-text {
        max-width: 100%;
    }

    .hand-title {
        /* font-size: 3rem; */
    }

    .hand-point {
        line-height: 1.45;
    }

    /* VR展示区域响应式布局 */
    .vr-showcase {
        flex-direction: column;
        padding: 2rem 8px;
    }

    .vr-image,
    .vr-text {
        max-width: 100%;
    }

    .vr-point {
        line-height: 1.45;
    }

    .about-image {
        width: 100%;
    }
    
    .hero {
        justify-content: center;
    }
    
    .info-item {
        justify-content: flex-start;
    }

    /* SmartRing响应式布局 */
    .smart-ring-content {
        flex-direction: column;
        padding: 3rem 5px;
    }

    .smart-ring-text,
    .smart-ring-image {
        max-width: 100%;
    }

    .smart-ring-title,
    .latest-news-title,
    .contact-title{
        font-size: 3rem;
    }

    .smart-ring-point {
        line-height: 1.45;
    }

    /* SmartBand响应式布局 */
    .smart-band-content {
        flex-direction: column;
        /* gap: 2rem; */
        padding: 2rem 8px;
    }

    .product1-video {
        order: 1; /* 将视频移到下方 */
        width: 100%;
    }

    .smart-band-image {
        max-width: 100%;
    }

    .smart-band-title {
        font-size: 3rem;
    }

    .smart-band-point {
        line-height: 1;
    }

    /* Controllers响应式布局 */
    .controllers-content {
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 8px;
        margin: 1rem 0;
    }

    .controllers-text,
    .controllers-image {
        max-width: 100%;
    }

    .controllers-title {
        font-size: 2.8rem;
    }

    .controllers-subtitle {
        font-size: 1.5rem;
        line-height: 1.45;
    }

    .controllers-desc {
        line-height: 1.45;
    }

    /* DOF卡片响应式布局 */
    .dof-card {
        margin-bottom: 1.5rem;
        width: 480px;
        max-width: 100%;
    }

    .dof-title {
        font-size: 3rem;
        margin-bottom: 2rem;
    }
    
    .card-image {
        height: 260px;
    }

    .kiwear-title {
        font-size: 30px;
    }
    
    .kiwear-desc {
        font-size: 1.1rem;
        line-height: 1.45; 
    }
    
    .about-title {
        font-size: 2rem;
    }
    
    .company-intro {
        font-size: 1.2rem;
    }
    
    .intro-point, .feature-point {
        font-size: 0.95rem;
    }

    /* 光束效果响应式 */
    .light-beam-effect {
        height: 90px;
        margin: 1rem 0 2rem 0;
    }
    
    .light-beam-effect .elliptical-glow {
        width: 280px;
        height: 60px;
    }
    
    .light-beam-effect::after {
        width: 85%;
    }
    
    .light-beam-effect::before {
        width: 5px;
        height: 5px;
        box-shadow: 
            0 0 6px 2px rgba(133, 206, 255, 1),
            0 0 12px 4px rgba(133, 206, 255, 0.8),
            0 0 20px 8px rgba(133, 206, 255, 0.6);
    }
    
    .about-image-container {
        width: 100%;
        margin-top: -20px;
    }

    /* 视频响应式调整 */
    .product1-video {
        width: 100%;
        /* max-width: 100%; 确保视频不会超过容器宽度 */
        /* padding: 0 8px; */
    }

    /* 调整所有标题与内容间的统一间距 */
    .hand-title,
    .latest-news-title,
    .contact-title,
    .smart-ring-title,
    .smart-band-title,
    .controllers-title,
    .about-title {
        margin-bottom: 0.8rem; /* 统一减少标题和内容之间的间距 */
        text-align: center;
        white-space: nowrap;
        font-size: clamp(1.8rem, 5vw, 3rem); /* 响应式字体大小 */
    }
    
    /* 调整内容项之间的间距 */
    .hand-point,
    .smart-ring-point,
    .smart-band-point,
    .vr-point,
    .controllers-subtitle,
    .controllers-desc,
    .intro-point,
    .feature-point {
        margin-bottom: 1rem; /* 减小内容项之间的间距 */
    }
    
    /* 控制器部分特别调整 */
    .controllers-subtitle {
        margin-bottom: 0.4rem;
    }

    /* 调整内容区域的垂直间距 */
    .hand-content,
    .smart-band-content,
    .controllers-content,
    .vr-showcase {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        gap: 0;
    }
    
    /* 减少section之间的间距 */
    section + section {
        margin-top: 0;
    }

    /* 增强标题与内容容器本身的间距控制 */
    .hand-text,
    .smart-ring-text,
    .smart-band-text,
    .controllers-text,
    .vr-text {
        padding-bottom: 0.5rem;
    }
    
    /* 调整图片容器的间距 */
    .hand-image,
    .smart-ring-image,
    .smart-band-image,
    .controllers-image,
    .vr-image {
        margin-bottom: 0;
        padding-bottom: 0.5rem;
    }

    /* AboutUs内容部分增加左右边距 */
    .about-us .container,
    .about-content-section .container,.latest-news-section.container, .contact-section.container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* .about-text {
        padding-left: 5px;
        padding-right: 5px;
    } */
    
    .about-us .hero-text {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .hero-section {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* AboutUs内容部分文字元素增加左右边距 */
    .about-us .intro-point,
    .about-content-section .intro-point,
    .about-us .company-intro,
    .about-content-section .company-intro,
    .kiwear-desc ,
    .about-text{
        padding-left: 5px;
        padding-right: 5px;
    }

    /* 所有部分文字内容的统一内边距 */
    .hand-point,
    .smart-ring-point,
    .smart-band-point,
    .vr-point,
    .controllers-desc {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* 超小屏幕设备（575px以下） */
@media (max-width: 575px) {
    .container {
        max-width: 100%;
        width: 100%;
        padding: 0 10px; /* 更新为更合适的内边距值 */
        overflow: hidden; /* 防止内容溢出 */
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .about-us .about-text h1 {
        font-size: 2.5rem;
    }

    .about-us .company-intro {
        font-size: 1.3rem;
        line-height: 1.45;
    }

    .about-us .intro-point {
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 1rem;
    }

    .about-us .disclaimer {
        font-size: 0.9rem;
        line-height: 1.45;
    }
/* About部分标题调整 */
    .about-title {
        margin-bottom: 1rem;
        font-size: 2rem;
        font-size: clamp(1.5rem, 4vw, 2.5rem);

    }
    .latest-news-title,
    .contact-title,
    .hand-title,
    .smart-ring-title,
    .smart-band-title,
    .controllers-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        margin-bottom: 1.2rem; /* 在超小屏幕上进一步减少标题和内容之间的间距 */
        text-align: center;
        white-space: nowrap;
    }

    

    .hand-point,
    .smart-ring-point,
    .smart-band-point {
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 0.4rem; /* 在超小屏幕上进一步减小内容项之间的间距 */
    }

    .vr-point {
        font-size: 1.2rem;
        line-height: 1.45;
        margin-bottom: 0.4rem; /* 在超小屏幕上进一步减小内容项之间的间距 */
    }
    
    /* 控制器部分特别调整 */
    .controllers-subtitle {
        margin-bottom: 0.3rem;
    }
    
    .controllers-desc,
    .intro-point,
    .feature-point {
        margin-bottom: 0.4rem; /* 在超小屏幕上进一步减小内容项之间的间距 */
    }

    .kiwear-desc {
        line-height: 1.45;
    }

    .controllers-desc {
        line-height: 1.45;
    }
    
    .products-grid, .services-grid {
        grid-template-columns: 1fr;
    }
    
    .header .container {
        padding: 0 5px;
    }
    
    .controllers-subtitle {
        font-size: 1.4rem;
    }
    
    .controllers-desc {
        font-size: 1rem;
    }
    
    .controllers-content {
        padding: 2.5rem 10px;
        margin: 0.5rem 0;
        gap: 1rem;
    }
    
    /* 调整所有内容区域的内边距，适应小屏幕并最大化利用宽度 */
    .hand-content,
    .smart-band-content,
    .vr-showcase {
        padding: 3rem 5px;
        gap: 0;
    }
    
    /* 减少section之间的间距 */
    section + section {
        margin-top: 0;
    }
    
    /* 确保没有不必要的空白区域 */
    section {
        min-height: auto;
    }
    
    /* 顶部section的边距调整 */
    #AboutUs {
        min-height: auto;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* DOF部分响应式调整 */
    .dof {
        padding: 40px 0;
    }
    
    .dof-content {
        gap: 1.5rem;
    }
    
    /* 确保dof-card宽度一致 */
    .dof-card {
        width: 480px;
        max-width: 100%;
    }
    
    .card-image {
        height: 220px;
    }

    /* 光束效果响应式 */
    .light-beam-effect {
        height: 100%;
        margin: 1rem 0 1.5rem 0;
    }
    
    .about-image-container {
        width: 100%;
        margin-top: -10px;
    }

    /* header和logo高度调整 */
    /* .header {
        height: 70px;
    }
    
    .logo {
        height: 70px;
    }
    
    .logo img {
        height: 40px;
        width: auto;
        object-fit: contain;
        -webkit-object-fit: contain;
    } */
    
    /* 调整导航栏位置 */
    .navbar {
        top: 70px;
        height: calc(100vh - 70px);
    }
    
    /* 调整导航按钮高度 */
    .nav-toggle {
        height: 60px;
    }

    /* 增强标题与内容容器本身的间距控制 */
    /* .hand-text,
    .smart-ring-text,
    .smart-band-text,
    .controllers-text,
    .vr-text {
        padding-bottom: 0.3rem;
    }
     */
    /* 调整图片容器的间距 */
    .smart-ring-image,
    .smart-band-image,
    .controllers-image,
    .vr-image {
        margin-bottom: 0;
        padding-bottom: 0.3rem;
    }

    .hand-image{
        margin-bottom: 0;
    }
    /* 统一垂直间距 */
    .about-us-content {
        /* gap: 1rem; */
    }
    
    
    /* 处理About部分的图片容器 */
    .about-image-container {
        margin-top: 0.5rem;
    }
    
    /* 减少各部分视觉分隔感 */
    .vr-showcase-section,
    .smart-band,
    .hand,
    .smart-ring,
    .controllers,
    .about-content-section {
        margin-top: -1px;
    }

    /* AboutUs内容部分增加左右边距 */
    .about-us .container,
    .about-content-section .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* .about-text {
        padding-left: 8px;
        padding-right: 8px;
    } */
    
    .about-us .hero-text {
        padding-left: 8px;
        padding-right: 8px;
        max-width: 100%;
    }
    
    .hero-section {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* AboutUs内容部分文字元素增加左右边距 */
    .about-us .intro-point,
    .about-content-section .intro-point,
    .about-us .company-intro,
    .about-content-section .company-intro,
    .kiwear-desc {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    /* 确保关于我们标题也有适当的内边距 */
    .about-title {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* 所有部分文字内容的统一内边距 */
    .hand-point,
    .smart-ring-point,
    .smart-band-point,
    .vr-point,
    .controllers-desc {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 480px) {
    .dof-title {
        font-size: 2.2rem;
    }
    
    .card-label {
        font-size: 0.8rem;
    }
    
    .card-text h3 {
        font-size: 1.2rem;
    }
    
    .card-text p {
        font-size: 0.85rem;
        line-height: 1.45;
    }
    
    /* 确保dof-card宽度一致 */
    .dof-card {
        width: 480px;
        max-width: 100%;
    }
    
    .card-image {
        height: 180px;
        padding: 0 5px;
    }
    
    .product1-video {
        /* padding: 0 5px; */
    }
}

/* 手机横屏 */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: 100vh;
        padding: 80px 0;
    }
    .navbar {
        overflow-y: auto;
    }
    .container {
        padding: 0 5px;
    }
}

/* 平板设备 */
@media (min-width: 768px) and (max-width: 991px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 打印样式 */
@media print {
    .header, .footer {
        display: none;
    }

    body {
        background-color: white;
        color: black;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .section {
        padding: 20px 0;
        page-break-inside: avoid;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    body.dark-mode-support {
        --dark-color: #ecf0f1;
        --light-color: #2c3e50;
        background-color: #1a1a1a;
        color: #f8f9fa;
    }

    body.dark-mode-support .header {
        background-color: #070e00;
    }

    body.dark-mode-support .product-item,
    body.dark-mode-support .service-item {
        background-color: #333;
    }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 处理980px-1500px屏幕宽度下的样式 */
@media (min-width: 980px) and (max-width: 1500px) {
    .about-image-container {
        width: 100%;
        margin-top: 0; /* 修改为0，防止负margin导致溢出 */
        max-width: 100%; /* 确保容器不超出父元素 */
        overflow: hidden; /* 防止内容溢出 */
    }
}

/* 进一步处理更小屏幕 */
@media (max-width: 992px) {
    /* 这部分移除，因为已经在991px媒体查询中处理过了 */
} 
.hand-title-mobile {
    display: block;
}

.hand-title-web {
    display: none;
}

.hand-image {
    width: 100%;
}

.hand-text {
    width: 100%;
}
.hand-container{
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 760px) {
    .hand-container{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .hand-title-mobile {
        display: none;
    }

    .hand-title-web {
        display: block;
    }

    .hand-image {
        /* width: 50%; */
    }

    .hand-text {
        width: 50%;
        /* padding-left: 2rem; */
    }

    .hand-image, .hand-text {
        display: flex;
        flex-direction: column;
    }

    /* .hand-image + .hand-text {
        display: flex;
        flex-direction: column;
    } */
} 
.home-section{
    margin-bottom: 35px !important;
}

@media screen and (max-width: 840px) {
    .home-section,
    .smart-ring,
    .smart-band,
    .controllers,
    .about-us,
    .latest-news,
    .hand{
        margin-bottom: 35px !important;
    }
    .home-section{
        padding-top: 60px;
    }
    .home-section img{
        width: 100%;
        object-fit: contain;
        /* object-position: center; */
        transform: scale(1.67);
        margin:11.67% 0;
    }
    
    .footer-img{
        width:100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        gap:1rem;
    }
    .footer-img img{
        height:30px;
        width: auto;
        object-fit: contain;
        object-position: center;
    }
}

/* 针对iOS设备的特殊处理 */
@supports (-webkit-touch-callout: none) {
    .home-section,
    .smart-ring,
    .smart-band,
    .controllers,
    .hand{
        margin-bottom: 35px !important; /* 重置margin */
        position: relative; /* 创建新的层叠上下文 */
        z-index: 1; /* 确保正确的层叠顺序 */
        -webkit-transform: translateZ(0); /* 触发硬件加速 */
        transform: translateZ(0);
    }

    
    /* 额外的iOS修复 */
    html, body {
        height: -webkit-fill-available;
    }
    
    /* 确保在iOS上sections有足够的空间显示 */
    section {
        width: 100%;
        float: left; /* 帮助iOS正确计算布局 */
        clear: both;
    }
    
    /* 解决iOS上的溢出问题 */
    .container {
        width: 100%;
        float: left;
        clear: both;
        overflow: visible !important;
    }
}

@media screen and (max-width: 900px) {
    /* Feature Grid 样式 - 两行两列网格布局 */
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 35px;
        padding:0 25px;
        margin-top: 35px;
        -webkit-transform: translateZ(0); /* iOS性能优化 */
    }
    .smart-ring-content{
        gap:0 !important;
    }

    .product1-video-mobile{
        display: block;
    }
    .product1-video-web{
        display: none;
    }
    .feature-grid-web{
        display: none;
    }
    .feature-grid-mobile{
        display: block;
    }
    .smart-band-content-web{
        display: none;
    }
    .smart-band-content-mobile{
        display: block;
    }
    .smart-band-text{
        flex:1;
        max-width: 100%;
    }
    .footer{
        margin-top: -1px;
    }

}

@media screen and (min-width: 900px) {
    /* Feature Grid 样式 - 两行两列网格布局 */
    .product1-video-mobile{
        display: none;
    }
    .product1-video-web{
        display: block;
    }
    .feature-grid-web{
        display: block;
    }
    .feature-grid-mobile{
        display: none;
    }
    .smart-band-content-web{
        display: block;
    }
    .smart-band-content-mobile{
        display: none;
    }
}