/*******************************
 * 基础样式重置与变量定义
 *******************************/
* {margin: 0;padding: 0;box-sizing: border-box;text-decoration: none;}
body, h1, h2, h3, h4, h5, h6, p, form, ul, ol, li, input, select, label, dl, dt, dd {margin: 0;padding: 0;font-size: 12px;color: #595959;font-family: PingFangSC-Regular, PingFang SC, Microsoft Yahei;-webkit-font-smoothing: antialiased;}
a {color: #494949;text-decoration: none;outline: none;}
li {list-style: none;padding: 0;margin: 0;}
/* 容器基础样式 */
.container {width: 1200px;margin: 0 auto;}
body{min-width: 1280px;}

/* CSS变量定义 - 主题色彩系统 */
:root { --primary-color: #e74c3c; --primary-color-light: #f9f0f0; --primary-color-dark: #c0392b; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --background-light: #ffffff; --background-gray: #f5f5f5; --background-subtle: #f0f4f8; --border-color: #e0e0e0; --border-hover: #d0d0d0; --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.16); }

/*******************************
 * 头部导航区域 - Header & Navigation
 *******************************/
.header{height: 86px;background: #fff;width: 100%;border-bottom: 1px solid #eeeeee;z-index: 999;position: fixed;top: 0;left: 0;right: 0;box-sizing: border-box;}
.logo {float: left;width: 228px;height: 62px;margin-top: 13px;}
.logo a {background: url(/images/logo.svg) no-repeat;background-size: 228px 62px;width: 228px;height: 62px;display: block;text-indent: -9999px;}
.menu {float: right;font-size: 14px;color: #fff;line-height: 86px;}
.menu a {color: #000;font-size: 14px;}
.menu li {float: left;margin: 0 0 0 35px;height: 86px;cursor: pointer;position: relative;list-style: none;padding: 0;}
.wrap {width: 1200px;margin: 0 auto;}
.wrap::after {content: "";display: table;clear: both;}
.menu-container {position: absolute;top: 80px;left: -86px;z-index: 10;display: none;width: 207px;box-shadow: 0px 0px 40px -1px rgba(0, 0, 0, 0.12);border-radius: 6px;}
.menu-container::before {content: '';position: absolute;top: -19px;left: 97px;width: 0;height: 0;border-right: 12px solid transparent;border-top: 10px solid transparent;border-left: 12px solid transparent;border-bottom: 10px solid #fff;}
.menu-list {overflow: hidden;white-space: nowrap;background: #fff;padding: 5px 25px;border-radius: 6px;}
.menu-list .menu-list-item {display: block;font-size: 15px;color: #000000;height: auto;line-height: 20px;padding: 10px 5px 10px 0;}
.menu-list .menu-list-item img {width: 26px;height: 26px;display: inline-block;vertical-align: middle;}
.menu-list .menu-list-item .txt {display: inline-block;vertical-align: middle;font-size: 16px;color: rgba(0, 0, 0, 0.55);margin-left: 8px;padding: 0;}
.menu .menu-list .menu-list-item:hover .txt {color: #000000;}
.menu-list-txt .menu-list-item:hover .txt-title {color: #000000;}
.menu-list-txt .menu-list-item:hover .txt {color: #000000;}
.menu-container-txt {min-width: 340px;left: -160px;}
.menu-container-txt::before {content: '';position: absolute;top: -19px;left: 160px;width: 0;height: 0;border-right: 12px solid transparent;border-top: 10px solid transparent;border-left: 12px solid transparent;border-bottom: 10px solid #fff;}
.menu-list-txt {min-width: 290px;padding:15px 20px;}
.menu-list-txt .menu-list-item {line-height: 20px;padding: 10px 5px 10px 0;height: auto;list-style: none;}
.menu-list-txt .menu-list-item img {width: 36px;height: 36px;}
.menu-list-txt .menu-list-item p {display: inline-block;vertical-align: middle;}
.menu-list-txt .menu-list-item .txt {display: block;font-size: 12px;color: rgba(0, 0, 0, 0.6);width:100%;margin-left: 8px;}
.menu-list-txt .menu-list-item .txt-title {font-size: 16px;color: rgba(0, 0, 0, 0.6);}

/*******************************
 * 主要内容区域 - Main Content
 *******************************/
/* 主内容容器 */
.main-content {padding: 2rem 0;margin-top: 86px;}

/* 页面标题区域 */
.page-title {text-align: center;margin-bottom: 2rem;}
.page-title h1 {font-size: 2rem;color: #171717;margin-bottom: 0.5rem;}
.page-title p {font-size: 14px;max-width: 600px;margin: 20px auto 0;}

/* 标签页组件 */
.tabs-container {overflow: hidden;}
.tabs-header {display: flex;justify-content: center;align-items: center;min-height: 60px;padding: 0 2rem;max-width: 1200px;margin: 0 auto;position: relative;}
.tab-indicator {position: absolute;bottom: 0;height: 3px;background: var(--primary-color);transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border-radius: 3px 3px 0 0;}

.tab-button {padding: 1rem 0.9rem;border: none;background: transparent;cursor: pointer;font-size: 1rem;color: #666;transition: color 0.3s ease;white-space: nowrap;flex-shrink: 0;position: relative;}
.tab-button:hover {color: var(--primary-color);}
.tab-button.active {color: var(--primary-color);font-weight: 500;}
.tabs-content {padding: 2rem 0;max-width: 1200px;margin: 0 auto;}

/*******************************
 * 案例卡片区域 - Case Cards
 *******************************/
/* 案例卡片网格布局 */
.case-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));justify-content: center;gap: 1.5rem;max-width: 1200px;margin: 0 auto;}

/* 案例卡片容器 */
.case-card {background: white;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);overflow: hidden;cursor: pointer;transition: all 0.3s ease;width: 280px;height: 277px;display: flex;flex-direction: column;}
.case-card:hover {transform: translateY(-4px);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);}

/* 案例图片样式 */
.case-image {position: relative;width: 100%;padding-bottom: 56.25%; /* 16:9比例 (9/16 = 0.5625) */height: 0; /* 高度由padding-bottom决定 */overflow: hidden;background: #f8f9fa;flex-shrink: 0;}
.case-image img {position: absolute;top: 50%;left: 50%;width: 100%;height: auto;transform: translate(-50%, -50%);object-fit: contain;}

/* 案例内容区域 */
.case-content {padding: 1.2rem;flex: 1;display: flex;flex-direction: column;justify-content: flex-start;}
.case-title {font-size: 1.25rem;font-weight: 600;color: #171717;margin-bottom: 0.5rem;}
.case-subtitle {color: #666;line-height: 1.5;font-size: 14px;}
.case-link {text-decoration: none;color: inherit;display: block;height: 100%;}

/*******************************
 * 内容页面样式 - Article Content
 *******************************/
/* 主内容区域 */
.content-layout{width: 1200px;margin: 0 auto;}
.content-layout-wrapper{margin-top: 86px;}
.content-main {max-width: 900px;padding:1px 20px 40px;margin:0 0 0 90px;}

/* 返回按钮样式 */
.content-back { cursor: pointer; position: fixed; left: calc((100% - 1200px) / 2); top: 116px; z-index: 100; display: flex; align-items: center; padding: 10px; }
.content-back svg { margin-right:4px; vertical-align: middle; }
.content-back span { color: #666; font-size: 20px; vertical-align: middle; }

/* 文章标题样式 */
.article-content h1 {font-size: 2rem;font-weight: 700;color: var(--text-primary);margin: 2rem 0 1rem 0;line-height: 1.3;}
.article-content h2 {font-size: 1.5rem;font-weight: 600;color: var(--text-primary);margin: 1.5rem 0 0.75rem 0;line-height: 1.4;}
.article-content h3 {font-size: 1.25rem;font-weight: 600;color: var(--text-primary);margin: 1.25rem 0 0.5rem 0;line-height: 1.4;}
.article-content h4 {font-size: 1.1rem;font-weight: 600;color: var(--text-primary);margin: 1rem 0 0.5rem 0;line-height: 1.4;}
.article-content p {font-size: 16px;line-height: 1.7;color: #444;margin-bottom: 16px;}

/* 文章列表和列表项 */
.article-content ul, .article-content ol {margin: 16px 0;padding-left: 24px;}
.article-content li {font-size: 16px;line-height: 1.7;color: #444;margin-bottom: 8px;list-style: none;}


/* 右侧文档导航栏 */
.content-sidebar-right { padding: 24px 0; position: fixed; top: 86px; right: calc((100% - 1200px) / 2); height: calc(100vh - 86px); overflow: hidden; z-index: 100; }

/* 锚点导航容器 */
.arco-anchor {width:170px;position: relative;background: #fff;max-height: calc(100vh - 120px);overflow-y: auto;overflow-x: hidden;}
.arco-anchor-list {position: relative;padding: 0;margin: 0 0 0 6px;}
.arco-anchor-list::before {background-color: #e5e6eb;content: "";height: 100%;left: -6px;position: absolute;width: 2px;}
.arco-anchor-link {position: relative;margin: 0;padding: 0;width: 100%;overflow: hidden;}
.arco-anchor-link-title {display: block;padding: 6px 8px;color: #4e5969;text-decoration: none !important;font-size: 14px;line-height: 1.5;border-radius: 4px;transition: none;position: relative;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 100%;}
.arco-anchor-link-title:hover {background: #f2f3f5;}
.arco-anchor-line-slider {position: absolute;top: 0;width: 3px;height: 12px;background: #165dff;border-radius: 2px;transition: top 0.2s ease;z-index: 1;}
.arco-anchor-link.arco-anchor-link-active .arco-anchor-link-title {font-weight: 600;}
.arco-anchor-link[data-level="2"] {margin-left: 12px;}
.arco-anchor-link[data-level="3"] {margin-left: 24px;}
.arco-anchor-link[data-level="4"] {margin-left: 36px;}

/*******************************
 * 底部页脚区域 - Footer
 *******************************/
.foot {padding: 50px 0;color: #fff;background: linear-gradient(126deg, #454545 0%, #32323A 100%);}
.foot .wrap {width: 1200px;}
.foot .wrap::after {content: "";display: table;clear: both;}
.foot .logos {width: 150px;margin-top: 1px;padding-bottom: 15px;}
.foot .logos a {background: url(/images/logowhite.svg) no-repeat;background-size: 150px 47px;width: 150px;height: 47px;display: block;text-indent: -9999px;}
.foot-nav {margin: 0 auto;overflow: hidden;padding-bottom: 20px;}
.foot-mes {width: 320px;float: left;border-right: 1px solid rgba(233,233,233,0.2);}
.foot-mes .ewm {padding: 10px 0;}
.foot-mes .ewm img {width: 120px;height: 120px;border-radius: 5px;}
.foot-mes p {display: block;line-height: 26px;color: rgba(255,255,255,0.8);font-size: 14px;}
.foot .wrap dl {width: 180px;float: left;}
.foot .wrap dl dt {font-size: 18px;padding-bottom: 20px;color:#fff;}
.foot .wrap dl dd a {display: block;line-height: 26px;color: rgba(255,255,255,0.8);font-size: 14px;}
.foot .wrap dl dd p {display: block;line-height: 26px;color: rgba(255,255,255,0.8);font-size: 14px;}
.foot .wrap dl.foot-us {width: 130px;}
.foot .wrap dl.foot-us .ewm {padding: 10px 0;}
.foot .wrap dl.foot-us .ewm img {width: 120px;}
.foot .wrap dl.foot-product {padding-left: 45px;width: 230px;}
.foot .record a {color: rgba(255,255,255,0.8);}