@font-face {
  /* 为字体指定一个名称，将在后面引用 */
  font-family: 'Akira';
  
  /* 字体文件路径 */
  src: url('./Optician-Sans.otf') format('opentype');
  
  /* 可选属性 */
  font-weight: normal;  /* 正常字重 */
  font-style: normal;   /* 正常样式 */
  font-display: swap;   /* 优化字体加载体验 */
}

:root {
	--businbox-color: #5ba7c8
}

* {
	padding: 0;
	margin: 0;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}




body {
	min-height: 100%;
	font-family: 'Akira', 'Microsoft YaHei', 'Microsoft YaHei UI', 'SimSun', 'SimHei', 'Arial';
	font-size: 16px;
	line-height: 1.5;
	color: #000000;
	background-color: #f4efe9;
}

@media (max-width: 1580px) {
	body {
		font-size: 14px
	}
}

@media (max-width: 767px) {
	body {
		font-size: .28rem
	}
}

img {
	border: 0;
	vertical-align: top
}


/* ////////////////////////////////// */

     /* 第一屏样式（保留所有功能） */
        .hero-section {
            position: relative;
            width: 100vw;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-section__bg-img {
            width: 100%;
            height: 100vh;
            object-fit: cover;
        }

        .hero-title {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 8rem;
            font-family: sans-serif;
            font-weight: 500;
            letter-spacing: 0.15em;
            text-align: center;
        }

        .scroll-arrow {
            position: fixed;
            left: 50%;
            bottom: 20%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            animation: arrow-bounce 2s infinite ease-in-out;
        }

        .scroll-arrow::after {
            content: "";
            width: 12px;
            height: 12px;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            transform: rotate(45deg);
            margin-top: -3px;
            transition: all 0.3s ease;
        }

        .scroll-arrow:hover {
            background: #000;
        }

        .scroll-arrow:hover::after {
            border-color: #fff;
        }

        @keyframes arrow-bounce {
            0%,100%{transform:translateX(-50%) translateY(0)}
            50%{transform:translateX(-50%) translateY(-10px)}
        }

        .scroll-arrow--hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 🔥 第二屏样式（完美还原参考图） */
        .content-section {
            width: 100vw;
            min-height: 100vh;
            /* 米白色背景，匹配参考图 */
            background-color: #f5f2ed;
            /* 内边距，模拟参考图的留白 */
            padding: 9rem 8rem;
            /* 弹性布局，垂直排列内容 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3rem;
        }

        /* 顶部文字区域 */
        .content-top-text {
            text-align: center;
            color: #333;
            font-family: 'Times New Roman', serif;
            letter-spacing: 0.05em;
            line-height: 1.6;
        }

        .content-top-text__title {
            font-size: 3.8rem;
            font-weight: 600;
            margin-bottom: 0.8rem;
        }

        .content-top-text__desc {
            font-size: 3.2rem;
            font-weight: 400;
        }

        /* 中间产品图片 */
        .content-product-img {
            /* 图片宽度自适应，最大宽度限制 */
            max-width: 100%;
            /* max-width: 1000px; */
            /* 保持图片比例 */
            object-fit: contain;
            /* 轻微阴影，增强质感 */
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }

        /* 底部文字区域 */
        .content-bottom-text {
            text-align: center;
            color: #333;
            font-family: 'Times New Roman', serif;
            letter-spacing: 0.05em;
            font-size: 3.2rem;
            line-height: 1.8;
        }
		
		
		
		
/* 		//////////////// */

  /* 🔥 核心调整：全屏无间距 + 左30% 右70% */
        .split-section {
            width: 100vw;      /* 宽度全屏 */
            height: 100vh;     /* 高度全屏 */
            display: flex;
            align-items: stretch; /* 子元素拉伸填满高度 */
            justify-content: center;
            /* 去掉内边距和间距，纯30%+70%分割 */
            padding: 0;
            gap: 0;
            background-color: #f5f2ed;
        }

        /* 左侧栏：30% 宽度 + 全屏高度 */
        .split-section__left {
            width: 30%;
            height: 100%;      /* 高度铺满全屏 */
            position: relative;
            overflow: hidden;
            /* 去掉圆角（可选，如需保留可取消注释） */
            /* border-radius: 4px; */
        }

        /* 右侧栏：70% 宽度 + 全屏高度 */
        .split-section__right {
            width: 70%;
            height: 100%;      /* 高度铺满全屏 */
            position: relative;
            overflow: hidden;
            /* 去掉圆角（可选，如需保留可取消注释） */
            /* border-radius: 4px; */
        }

        /* 图片样式：铺满容器（全屏），保持比例 */
        .split-img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片铺满且不变形 */
            transition: transform 0.5s ease;
        }

        /* 鼠标悬浮图片放大效果 */
        .split-section__left:hover .split-img,
        .split-section__right:hover .split-img {
            transform: scale(1.02);
        }

        /* 图片底部标题：绝对定位 */
        .split-title {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 2rem;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: #fff;
            font-family: 'Times New Roman', serif;
            font-size: 3.5rem;
            letter-spacing: 0.05em;
            line-height: 1.5;
            text-align: center;
        }

        /* 响应式适配：手机端上下全屏排列 */
        @media (max-width: 768px) {
            .split-section {
                flex-direction: column;
            }
            .split-section__left,
            .split-section__right {
                width: 100%;
                height: 50vh; /* 各占一半高度 */
            }
        }
		
	/* 	/////////////////// */
	/* 🔥 轮播容器：全屏 + 相对定位 + 核心指针样式 */
/* 🔥 轮播容器：全屏 + 相对定位 + 核心指针样式 */
.carousel-section {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    background-color: #000;
    cursor: pointer;
    transition: cursor 0.1s ease;
}

/* 🔥 左/右指针：60px纯黑底白箭头 + hover轻微放大 */
.carousel-section.left-cursor {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='28' fill='%23000000'/><path d='M35 30 L22 30 M22 30 L28 24 M22 30 L28 36' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") 30 30, pointer;
}
.carousel-section.right-cursor {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='28' fill='%23000000'/><path d='M25 30 L38 30 M38 30 L32 24 M38 30 L32 36' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") 30 30, pointer;
}
/* 指针hover放大（视觉反馈） */
.carousel-section.left-cursor:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><circle cx='32' cy='32' r='30' fill='%23000000'/><path d='M37 32 L24 32 M24 32 L30 26 M24 32 L30 38' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") 32 32, pointer;
}
.carousel-section.right-cursor:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><circle cx='32' cy='32' r='30' fill='%23000000'/><path d='M27 32 L40 32 M40 32 L34 26 M40 32 L34 38' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") 32 32, pointer;
}

/* 轮播图片容器 */
.carousel-item {
    position: static;
    display: none;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: 
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-item.active {
    display: block;
    opacity: 1;
}

/* 轮播大图 彻底消除右边缝隙 */
.carousel-img {
    width: 100vw;
    max-width: none;
    height: auto;
    display: block;
    object-fit: cover;
    margin-left: 50%;
    transform: translateX(-50%);
    filter: brightness(0.95) contrast(1.05);
}

/* 🔥 左上角小图导航：毛玻璃 + 横向排列 + 圆角 */
.carousel-thumb-wrapper {
    position: absolute;
    top: 6rem;
    left: 2rem;
    z-index: 10;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    cursor: default;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* 小图样式 */
.carousel-thumb {
    width: 200px;
    height: 140px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    object-fit: cover;
    filter: brightness(0.8);
}
.carousel-thumb.active {
    border-color: #fff;
    transform: scale(1.05);
    filter: brightness(1.1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}
.carousel-thumb:hover {
    border-color: rgba(255, 255, 255, 0.7);
    filter: brightness(1);
}

/* 🔥 左下角文字描述 */
.carousel-desc {
    position: absolute;
    bottom: 10rem;
    left: 2rem;
    z-index: 10;
    color: #fff;
    font-family: 'Times New Roman', serif;
    font-size: 3.2rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
    max-width: 50%;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
    padding: 1.8rem 2rem;
    border-radius: 16px;
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .carousel-thumb-wrapper {
        top: auto;
        bottom: 8rem;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.6rem;
        gap: 0.8rem;
    }
    .carousel-thumb {
        width: 60px;
        height: 45px;
        border-radius: 6px;
    }
    .carousel-desc {
        max-width: calc(100% - 4rem);
        font-size: 1rem;
        padding: 1.2rem 1.5rem;
        line-height: 1.7;
        border-radius: 12px;
    }
    .carousel-section.left-cursor,
    .carousel-section.right-cursor {
        cursor: pointer;
    }
    .carousel-section.left-cursor:hover,
    .carousel-section.right-cursor:hover {
        cursor: pointer;
    }
}

/* 🔥 第二屏样式 */
.content-section2 {
    width: 100vw;
    /* background-color: #fff; */
    padding: 9rem 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.content-section2 .content-top-text {
    text-align: center;
    color: #333;
    font-family: 'Times New Roman', serif;
    letter-spacing: 0.05em;
    line-height: 1.6;
}
.content-section2 .content-top-text__title {
    font-size: 3.8rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    font-family: 'Times New Roman', serif;
}
.content-section2 .content-top-text__desc {
    font-size: 2.2rem;
    font-weight: 400;
}
.content-section2 .content-product-img {
    max-width: 100%;
    object-fit: contain;
    box-shadow: none;
}
.content-section2 .content-bottom-text {
    text-align: center;
    color: #333;
    font-family: 'Times New Roman', serif;
    letter-spacing: 0.05em;
    font-size: 2.2rem;
    line-height: 1.8;
}
		
/* 	/////////////////////////	 */
		
		
  /* 自行车表头容器（图片+名称+简介） */
        .bike-header-row {
            display: grid;
            grid-template-columns: 200px repeat(7, 1fr); /* 第一列是参数名宽度，后5列是车型 */
            gap: 1px;
            margin-bottom: 1rem;
            border-bottom: 1px solid #ddd;
        }

        /* 空的首列占位 */
        .empty-header {
            grid-column: 1;
        }

        /* 单个自行车头部卡片 */
        .bike-header-card {
            text-align: left;
            padding: 2rem;
        }

        /* 自行车图片样式 */
        .bike-img {
            width: 100%;
            height: auto;
            margin-bottom: 1rem;
            object-fit: contain;
        }

        /* 车型名称 */
        .bike-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #222;
        }

        /* 车型简介 */
        .bike-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.4;
        }

        /* 表格容器 - 核心参数对比（去掉白色背景） */
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            /* 移除白色背景、圆角、阴影 */
            background-color: transparent;
            border-radius: 0;
            overflow: visible;
            box-shadow: none;
        }

        /* 表格单元格通用样式 */
        .comparison-table th,
        .comparison-table td {
            padding: 1.5rem;
            text-align: left;
            /* 修改分隔线颜色为更浅的米色，贴合背景 */
            border-bottom: 1px solid #e8e2d8;
            font-size: 13px;
        }

        /* 表格表头（参数名列）- 去掉背景色，保持和页面一致 */
        .comparison-table th {
            width: 200px;
            background-color: transparent; /* 关键修改：移除浅背景 */
            font-weight: 600;
            color: #444;
            white-space: nowrap;
            font-size: 13px;
        }

        /* 表格内容单元格 */
        .comparison-table td {
            color: #555;
        }

        /* 最后一行保留分隔线（贴合原图） */
        .comparison-table tr:last-child td,
        .comparison-table tr:last-child th {
            border-bottom: 1px solid #e8e2d8;
        }

        /* Explore链接样式 */
        .explore-link {
            color: #333;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
            margin-top: 0.5rem;
        }

        .explore-link:hover {
            text-decoration: underline;
        }

        /* 响应式适配 - 小屏幕横向滚动 */
        @media (max-width: 1024px) {
            .table-wrapper {
                overflow-x: auto;
            }
            .bike-header-row, .comparison-table {
                min-width: 1000px;
            }
            .bike-img {
                width: 140px;
            }
        }		
		

		
		.biked{padding: 4rem 8rem;background: #f3efe9;font-family: sans-serif;}