/* ========================================
   root全局变量设置，颜色，字体
   ======================================== */
:root{
	/*======颜色配置======*/
	/* 主色 */
	--color-primary: #ff0000;
	--color-blue:#1240c1; /*蓝色*/;
	--color-blue-light:#00b8ff;/*亮蓝色*/
	--color-green:#0fbb03;/*绿色*/
	--color-pink:#bb03a4;/*粉色*/
	--color-orange:##bb7103; /*橙色*/
	--color-primary-rgb: 255, 0, 0;
	--color-primary-dark: #cc0000;   /* 悬停/按压状态 */
	--color-primary-light: #ff3333;  /* 浅色背景使用 */	
	/* 辅色 - 极简黑增强冲击 */
	--color-secondary: #111111;
	--color-secondary-rgb: 17, 17, 17;
	/* 点睛色 - 荧光黄形成最强对比 */
	--color-accent: #ffdd00;
	--color-accent-rgb: 255, 221, 0;	
	/* 中性色 */
	--color-white: #ffffff;
	--color-white-rgb:255,255,255;
	--color-black: #000000;
	--color-black-rgb:0,0,0;
	--color-gray-800: #1a1a1a;    /* 主文字 - 近黑 */
	--color-gray-700: #3763aa;
	--color-gray-500: #666666;    /* 次要文字 - 中灰 */
	--color-gray-300: #999999;    /* 边框/禁用/简介 */
	--color-gray-200: #ededed;    /* 边框/分割线 */
	--color-gray-100: #f3f5f8;    /* 次级/背景 */
	--color-gray-50: #fafafa;     /* 卡片/悬停 */	
	/* 功能色 */
	--color-success: #00c853;
	--color-warning: #ffab00;
	--color-error: #ff0000;
	/* 边框色 */
	--color-border-primary:var(--color-primary);
	--color-border-white:var(--color-white);
	/* 背景色 */	
	--color-bg-black-gradient:linear-gradient(135deg, #1a1a1a 0%, #2d2a28 100%);
	--color-bg-black-alpha-70:rgba(var(--color-black-rgb),0.7);
	--color-bg-white:var(--color-white);
	--color-bg-primary:var(--color-primary);
	--color-bg-primary-alpha-30: #fd000014;
	--color-bg-accent-alpha-10: rgba(var(--color-accent-rgb), 0.13);  /* 30% 不透明度 */
	--color-bg-primary-alpha-5: rgba(var(--color-primary-rgb), 0.05);  /* 30% 不透明度 */
	--color-bg-gradient: linear-gradient(0deg, var(--color-white), var(--color-gray-100));
	--color-bg-white-alpha-30: rgba(var(--color-white-rgb), 0.3);  /* 30% 不透明度 */
	--color-bg-white-alpha-12: rgba(var(--color-white-rgb), 0.12);  /*用于深色背景*/
	/* 阴影色 */
	--color-shadow-black-sm:0px 5px 5px rgba(var(--color-black-rgb),0.3); /*黑色阴影-小*/
	--color-shadow-primary-sm:0px 5px 5px rgba(var(--color-primary-rgb),0.3); /*黑色阴影-小*/
	--color-shadow-primary-md:0px 12px 15px rgba(var(--color-primary-rgb),0.08); /*黑色色阴影大*/
	--color-shadow-white-md:0px 12px 15px rgba(var(--color-black-rgb),0.08); /*白色阴影大*/
	/* 遮罩颜色 */
	--color-overlay: rgba(var(--color-black-rgb), 0.5); /*黑色透明*/
	/* 轮播图背景*/
  	--color-banner-primary:#1a1a1a;
  	--color-banner-secondary:#0f172a;
  	--color-banner-special:#2d2d2d;	
	
	/*======字体配置======*/
	/*1. 字体样式*/
	--font-family: -apple-system,"Segoe UI", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; 	
	/*2. 基础字号*/
	--font-size-base:16px; /*基础16号字体*/
	--offset: 0px;
	--offset-lg:0px; /*主要针对大号字降低*/
	/*2. 字体大小计算*/
    --font-xxs: calc(var(--font-size-base) - 4px + var(--offset)); /*12号字 sub,small 小号字*/
    --font-xs: calc(var(--font-size-base) - 2px + var(--offset)); /* 14号字，辅助/注释文字 -非重点简介*/
    --font-sm: calc(var(--font-size-base) - 1px + var(--offset)); /* 15号字，次要文字 -重点简介，如banner等 */
    --font-base: calc(var(--font-size-base) + var(--offset)); /*16号字，正文默认*/
    --font-md: calc(var(--font-size-base) + 2px + var(--offset)); /*18号字，强调文字 - H4、小标题、突出文字，导航字体*/
    --font-lg: calc(var(--font-size-base) + 4px + var(--offset)); /*20号字，小标题  H3*,普通图标大小*/
    --font-xl: calc(var(--font-size-base) + 20px + var(--offset-lg)); /*36号字 H2标题 */
    --font-2xl: calc(var(--font-size-base) + 24px + var(--offset-lg)); /*40号字， H1，主标题*/
    --font-3xl: calc(var(--font-size-base) + 28px + var(--offset-lg)); /*44号字* 特殊字符，超大/
	/*3. 字行间距*/
  	--font-line-sm:1.2;
  	--font-line-md:1.5;
  	--font-line-lg:1.8;	
  	/*4. 字体加粗*/
  	--font-weight-400:400;
  	--font-weight-500:500;
  	--font-weight-600:600;
  	--font-weight-700:700;		
}
/* ========================================
   Reset CSS - 重置浏览器默认样式
   ======================================== */
/* 基础重置 */

*,*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;}
/* 文档和正文 */
html {-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;scroll-behavior: smooth;overflow-x: hidden;}
body {min-height: 100vh;font-family: var(--font-family);font-size: var(--font-base);line-height: var(--font-line-md);}
html,body, div, section, article{background-color: transparent;}
h1{font-size: var(--font-2xl);font-weight: var(--font-weight-700);}
h2{font-size: var(--font-xl);font-weight: var(--font-weight-600);}
h3{font-size: var(--font-lg);font-weight: var(--font-weight-600);}
h4 {font-size: var(--font-md);font-weight: var(--font-weight-600);}
small,[class*="sub"]{font-size: var(--font-xxs);}
strong, b {font-weight: var(--font-weight-600);}
/* 段落 */
p,img{border: none;}
/* 粗体斜体 */
em, i {font-style: italic;}
small{font-weight: normal;}
/* 链接 */
a {text-decoration: none;color: inherit;background-color: transparent;}
a:active,a:hover {outline: none; border: none;color:var(--color-primary);}
/* 列表 */
ul, ol, dl,li {list-style: none;}
/* 表格 */
table {border-collapse: collapse;border-spacing: 0;width: 100%;}
th, td {text-align: left;vertical-align: top;}
/* 表单元素 */
input,button,textarea,select {font-family: inherit;font-size: inherit;line-height: inherit;border: none;background: none;outline: none;}
button,input[type="button"],input[type="submit"],input[type="reset"] {cursor: pointer;background: none;border: none;}
input,textarea,select{padding: 6px 10px;}
input:focus,textarea:focus {outline: none;}
textarea {resize: vertical;min-height: 80px;}
/* 隐藏数字输入框的上下箭头 */
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;}
input[type="number"] {-moz-appearance: textfield;}
/* 禁用状态 */
input:disabled,button:disabled,textarea:disabled,select:disabled {opacity: 0.6;cursor: not-allowed;}
/* 媒体元素 */
img,video,canvas,svg {display: block;max-width: 100%;height: auto;vertical-align: middle;}
img {border: none;}
::placeholder{opacity: 1; color: var(--color-gray-300); font-size: var(--font-xs);}
input:not([type="submit"]),select {
	width: 100%;background: var(--color-white);border-radius: 48px;
	transition: all 0.2s;box-shadow: 0 1px 3px rgba(var(--color-black-rgb),0.05);
}
input:not([type="submit"]):focus,select:focus {border-color: var(--color-primary);box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.1);}      
/* 提交按钮 - 红色主色调 */
input[type="submit"] {
	width: 100%;background: var(--color-primary);color: var(--color-white);font-weight: (--font-weight-500);         
	border-radius: 12px;transition: all 0.2s ease;letter-spacing: 1px;
}
input[type="submit"]:hover {background: var(--color-primary-dark);transform: scale(1.01);}

[class*="-desc"], [class*="unit"]{font-size: var(--font-sm); color: var(--color-gray-500);}
[class*="price"]{font-size: var(--font-lg); color: var(--color-primary);}
[class*="primary-icon"]{color: var(--color-primary);}
[class*="normal-icon"]{color: var(--color-gray-500);}
[class*="-number"]{font-size: var(--font-3xl); color: var(--color-primary); font-weight: var(--font-weight-600);}
@media (min-width: 1024px) {}
/* ========== 宽屏 ========== */
@media (min-width: 1400px) {
	:root {
		--offset: 1px;
		--offset-lg:1px;
	}
}
/* ========== 超宽屏 ========== */
@media (min-width: 1920px) {
	:root {
		--offset: 2px;
		--offset-lg:2px;
	}
}
/* ========== 电脑端 ========== */
@media (min-width: 1400px) and (max-width: 1919px) {}  /* 大屏电脑 */
@media (min-width: 1200px) and (max-width: 1399px) {}  /* 常规电脑 */
@media (min-width: 1024px) and (max-width: 1199px) {}  /* 小尺寸电脑/笔记本 */
/* ========== 平板+手机通用 =======*/
@media (max-width: 1023px){
	:root {
		--offset: -1px;
		--offset-lg: -10px;
	}
}							/* 平板+手机端通用 */
/* ========== 平板端 ========== */
@media (min-width: 768px) and (max-width: 1023px) {}    /* 通用平板 */
/* 如果需要细分 */
@media (min-width: 900px) and (max-width: 1023px) {}    /* iPad 横屏 */
@media (min-width: 768px) and (max-width: 899px) {}     /* iPad 竖屏/小平板 */
/* ========== 手机端通用 =======*/
@media (max-width: 767px){
	:root {
		--offset: -2px;
		--offset-lg: -14px;
	}
}								 /* 手机端通用 */
/* ========== 手机端 ========== */
@media (min-width: 576px) and (max-width: 767px) { }     /* 特大屏手机（折叠屏展开） */
@media (min-width: 480px) and (max-width: 575px) { }     /* 大屏手机 */
@media (min-width: 375px) and (max-width: 479px) { }     /* 中屏手机（iPhone 标准） */
@media (max-width: 374px) {
	:root {
		--offset: -3px;
		--offset-lg: -18px;
	}
}