/* 1. 基础重置与CSS自定义属性定义 (Enhanced with CSS Variables) */
:root {
/ 主色调定义 */
--color-primary: #aa2200;
--color-secondary: #D4AF37;
--color-text: #333;
--color-light-bg: #f8f9fa;
--color-white: #ffffff;
--color-nav-highlight: #bb0000;
--color-nav-bg: #FFF;
--color-nav-border: #EEE;
--color-top-bar-bg: #F5F5F5;
--nav-link-active-bg: #bb0000;       /* 当前链接背景色 (可自定义) */
--nav-link-active-color: white;   /* 当前链接文字颜色 */

/* 交互与视觉效果变量 */
--shadow-default: 0 4px 12px rgba(0, 0, 0, 0.1);
--transition-default: all 0.3s ease;
--border-radius-default: 8px;

/* 布局与尺寸变量 */
--container-width: 1600px;
--container-padding: 0px;
--nav-height: 30px;
--logo-width: 300px;
--logo-height: 80px;
--search-button-width: 80px;
--search-button-height: 30px;
}

/* 现代化重置：使用更高效的选择器并添加字体平滑 */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
font-family: 'Microsoft YaHei', 'Segoe UI', system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-white);
min-height: 100vh;
}

a:link { color: #000; text-decoration: none; }
a:visited { text-decoration: none; color: #000; }
a:hover { color:#CC0033; text-decoration: none; }
a:active { text-decoration: none; }
ul li {list-style:none; }

/* 所有 div 默认可见 */
div { display: block; } 

/* 2. 通用布局与容器 (Utility Classes) */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto; /* 新增：传统居中方式，确保兼容性 */
    margin-inline: auto; /* 现代方式 */
    padding-inline: var(--container-padding);
}



.width-1040 { 
  width: calc(var(--container-width) * 0.575 ); 
  max-width: calc(var(--container-width) * 0.575 ); 
}

.width-1040 { width: calc(var(--container-width) * 0.65); max-width: calc(var(--container-width) * 0.65); }









/* 3. 顶部信息栏 (Top Info Bar) */
.top-info-bar { background-color: var(--color-top-bar-bg); line-height: var(--nav-height); height: var(--nav-height); font-size: 0.85rem; color: #666; }

.top-info-bar .container { display: flex; justify-content: space-between; align-items: center; }

.top-info-bar .links-left,
.top-info-bar .links-right { display: flex; list-style: none; gap: 20px; }

.top-info-bar a { color: inherit; text-decoration: none; transition: var(--transition-default); background-image: url(../images/icon/top01.jpg); background-repeat: no-repeat; background-position: left center; padding-left: 8px; }

.top-info-bar a:hover,
.top-info-bar a { color: var(--color-primary); outline: none; }

/* 4. 品牌Logo与标语区域 (Header Branding) */
.header-brand-logo { display: flex; justify-content: space-between; align-items: center; padding-block: 20px; }

.header-brand-logo .container { /* 新增背景图样式 */ background-image: url(../images/icon/topimg.png); background-size: cover; /* 关键：等比例缩放覆盖区域 */ background-position: center; background-repeat: no-repeat; }
.logo-area { display: flex; align-items: center; gap: 25px; }

.advanced-logo { width: var(--logo-width); height: var(--logo-height); background-image: url(../images/icon/logo.png); background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer; position: relative; overflow: hidden; /* 添加图片加载优化 */ background-color: transparent; }

.logo-tagline { font-size: 1rem; color: #999; border-left: 1px solid #ddd; padding-left: 25px; line-height: 1.4; }

/* 5. 头部标签与收藏 (Header Tag & Favorite) */
.main-header .header-brand-logo .container { display: flex; }

.header-tag { display: flex; justify-content: flex-end; align-items: center; width: 100%; max-width: 600px; margin-inline-start: auto; }

.header-tag .favorite { display: inline-flex; align-items: center; height: 100%; padding-inline: 10px; color: #cd0000; margin-inline-end: 6px; white-space: nowrap; position: relative; padding-inline-start: 0; padding-inline-end: 18px; margin-inline-start: 10px; text-decoration: none; }



.header-tag .favorite::before {
content: "";
position: absolute;
right: 0; /* 物理属性，确保兼容性 /
inset-inline-end: 0; / 逻辑属性，现代标准，但因360中有问题，被注释掉 */
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: #cd0000;
}


/* 6. 主导航菜单 (Main Desktop Navigation) */
.main-header .nav  {border: 1px solid var(--color-nav-border); /* 1px 实线边框，颜色取自变量 */
  box-sizing: border-box; /* 避免布局溢出，确保响应式稳定性 */ }
.advanced-desktop-nav { background-color: var(--color-nav-bg); border-bottom: 2px solid #666; box-shadow: 0 5px 10px 0 #999; }

.advanced-desktop-nav .container { position: relative; display: flex; justify-content: space-between; align-items: center; }

.advanced-desktop-nav ul { display: flex; list-style: none; margin: 0; padding: 0; width: 100%; justify-content: space-between; }

.advanced-desktop-nav li { position: relative; padding-top: 5px; flex: 1; min-width: 0; text-align: center; }

.advanced-desktop-nav li a {
  color: var(--color-text);
  text-decoration: none;
  font-size: clamp(0.9rem, 1.5vw, 1rem); /*  */
  padding: clamp(0.5rem, 2vw, 0.8125rem) clamp(1rem, 4vw, 1.75rem); /*  */
  display: block;
  transition: var(--transition-default);
  letter-spacing: 0.3px;
  font-weight: 600;
}

/* 导航悬停与活动状态 */
.advanced-desktop-nav li a:hover,
.advanced-desktop-nav li a { background-color: rgba(139, 0, 0, 0.05); color: var(--color-primary); outline: none; }

.advanced-desktop-nav li .active a { background-color: var(--color-nav-highlight); color: var(--color-white); }

/* 导航下划线指示器 */
.advanced-desktop-nav li::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: var(--color-secondary);
transition: var(--transition-default);
transform: translateX(-50%);
}

.advanced-desktop-nav li:hover::after,
.advanced-desktop-nav li.active::after,
.advanced-desktop-nav li:focus-within::after {
width: 70%;
}

/* 英文导航框架适配 */

.english-frame ul { display: flex; width: 100%; list-style: none; padding: 0; margin: 0; }

.english-frame ul li { flex: 1; min-width: 0; text-align: center; font-size: 0.75rem; padding-block: 5px; }

/* 7. 搜索容器区域 (Search Container) */
.search-container { display: flex; justify-content: space-between; align-items: center; padding-block: 5px; padding-inline: 0; }

.search-container .container {display: flex;}

.search-container .container .left-side-search { display: flex; width: 100%; max-width: 800px; align-items: center; gap: 25px; padding-inline-start: 50px; }

/* 搜索图标 */
.search-container .container .left-side-search .icon { width: 15px; height: 21px; background-image: url(../images/icon/ser01.png); background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; position: relative; overflow: hidden; }

/* 搜索关键词样式 */
#search-keywords { font-size: 1rem; color: #222; line-height: 1.4; list-style-type: none; }

#search-keywords ul { display: flex; flex-wrap: wrap; gap: 12px; }

#search-keywords ul li { float: none; list-style-type: none; }

#search-keywords ul li a { text-decoration: none; color: var(--color-text); }

#search-keywords ul li a:hover,
#search-keywords ul li a { color: var(--color-primary); outline: none; }

/* 搜索输入与按钮区域 */
.search-container .container .right-side-search { display: flex; width: 100%; max-width: 800px; height: 1.875rem; padding-right: 50px}

#searchInput {
width: 100%;
min-width: 200px;
padding: 12px 16px;
font-size: 16px;
border: 2px solid #ddd;
height: auto;
flex: 1 1 auto;
transition: var(--transition-default);
box-sizing: border-box;
}



#searchButton { color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; background-color: #900; padding: 8px; float: right; height: var(--search-button-height); width: var(--search-button-width); background-image: url(../images/icon/search1.png); background-repeat: no-repeat; background-position: 48px center; margin-inline-start: 10px; padding-right: 20px; }

#searchButton:hover {
background-color: #333;
outline: none;
}

/* 8. 响应式设计基础 (添加基础断点) */
@media (max-width: 768px) {
.container {
padding-inline: 15px;
}


.header-brand-logo {
    flex-direction: column;
    gap: 15px;
    padding-block: 15px;
}

.logo-area {
    flex-direction: column;
    text-align: center;
    gap: 15px;
}

.logo-tagline {
    border-left: none;
    border-top: 1px solid #ddd;
    padding-left: 0;
    padding-top: 15px;
    margin-top: 15px;
}

.header-tag {
    justify-content: center;
    margin-inline-start: 0;
    max-width: 100%;
}

.advanced-desktop-nav ul {
    flex-direction: column;
}

.advanced-desktop-nav li {
    width: 100%;
    text-align: left;
}

.advanced-desktop-nav li a {
    padding: 10px 15px;
}

.search-container .container {
    flex-direction: column;
    gap: 15px;
}

.search-container .container .left-side-search {
    padding-inline-start: 0;
    justify-content: center;
}

.search-container .container .right-side-search {
    max-width: 100%;
}
}

/* 9. 可访问性增强 (Accessibility) */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}


*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
}

/* 10. 打印样式优化 (Print Styles) */
@media print {
.top-info-bar,
.advanced-desktop-nav,
.search-container,
.header-tag .favorite::before {
display: none;
}


body {
    color: #000;
    background: #fff;
}

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





/* 移动端导航 */
.mobile-header { background-color: #F9F9F9; background-image: url(../images/hd.jpg); background-repeat: repeat-x; background-position: left; }
.mobile-menu { margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; width: 100%; }

.mobile-nav {
  display: none; /* 默认隐藏导航 */
  background-color: var(--nav-bg);
  color: var(--text-light);
  font-size: clamp(1rem, 2vw, 1.2rem);
}

/*手机导航菜单三横线*/
.menu-btn {
	display: none;
	padding: 6px 0;
	float: right;
	margin-left: 15px;
}
.menu-btn:before, .menu-btn:after, .menu-btn span {
	display: block;
	height: 2px;
	background-color: #900;
	content: '';
}
.menu-btn:before {
	width: 24px;
}
.menu-btn:after {
	width: 18px;
	margin-left: 6px;
}
.menu-btn span {
	width: 12px;
	margin: 6px 0 6px 12px;
}