:root {
    --primary-color: #6366f1;
    --primary-light: #8b5cf6;
    --primary-dark: #4f46e5;
    --secondary-color: #a855f7;
    --accent-color: #ec4899;
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --text-white: #ffffff;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-accent: #f3f4f6;
    --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --border-color: #e5e7eb;
    --shadow-light: 0 2px 10px rgba(99, 102, 241, 0.08);
    --shadow-medium: 0 4px 20px rgba(99, 102, 241, 0.12);
    --shadow-heavy: 0 8px 30px rgba(99, 102, 241, 0.16);
    --shadow-purple: 0 4px 20px rgba(139, 92, 246, 0.15);
    --border-radius: 16px;
    --border-radius-small: 12px;
    --border-radius-large: 24px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 页面头部样式 */
.header {
    width: 100%;
    background: var(--bg-gradient);
    box-shadow: var(--shadow-light);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
}

.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
}

.inner .logo {
    display: flex;
    align-items: center;
}

.inner .logo img {
    height: 90px;
    width: auto;
}

.inner .nav {
    display: flex;
    gap: 30px;
}

.inner .nav a {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: var(--transition);
    border-radius: var(--border-radius-small);
    position: relative;
}

.inner .nav a:hover {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

.inner .nav a.current {
    color: var(--text-white);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-purple);
}

.blue .inner .nav a.current{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
.green .inner .nav a.current{background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);}
.orange .inner .nav a.current{background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);}
.red .inner .nav a.current{background: var(--gradient-primary);}

/* 主容器样式 */
.modern-aboutus {
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.aboutus-container {
   
    min-height: calc(100vh - 220px);
    position: relative;
    z-index: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}

/* 侧边栏导航样式 */
.sidebar-nav {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-purple);
    padding: 0;
    position: sticky;
    top: 40px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.nav-header {
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: 24px 20px;
    text-align: center;
    position: relative;
}

.nav-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
}

.nav-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    border-bottom: 1px solid var(--border-color);
}

.nav-item:last-child {
    border-bottom: none;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover {
    background: rgba(99, 102, 241, 0.05);
    color: var(--primary-color);
    transform: translateX(6px);
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: var(--primary-color);
    border-right: 4px solid var(--primary-color);
    font-weight: 600;
}

.nav-icon {
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
    border-radius: 50%;
    margin-right: 12px;
    transition: var(--transition);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.1);
}

.nav-link:hover .nav-icon {
    transform: scale(1.3);
    background: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.nav-link.active .nav-icon {
    background: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    transform: scale(1.2);
}

.home-icon {
    background: var(--text-secondary) !important;
}

.nav-link.home-link {
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.nav-link.home-link:hover .home-icon {
    background: var(--primary-color) !important;
}

/* 内容区域样式 */
.content-area {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-purple);
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(99, 102, 241, 0.1);
    position: relative;
}

.content-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.content-wrapper {
    padding: 40px;
}

.content-inner {
    line-height: 1.8;
    font-size: 16px;
    color: var(--text-primary);
}

/* 内容样式优化 */
.content-inner h1,
.content-inner h2,
.content-inner h3,
.content-inner h4,
.content-inner h5,
.content-inner h6 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.content-inner h1 {
    font-size: 32px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom: 3px solid;
    border-image: var(--gradient-primary) 1;
    padding-bottom: 15px;
    margin-bottom: 30px;
    font-weight: 700;
}

.content-inner h2 {
    font-size: 24px;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 40px;
    margin-bottom: 20px;
    position: relative;
    font-weight: 600;
}

.content-inner h2::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.content-inner h3 {
    font-size: 20px;
    color: var(--text-primary);
    margin-top: 30px;
}

.content-inner p {
    margin-bottom: 20px;
    text-align: justify;
    text-indent: 2em;
}

.content-inner strong {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.content-inner a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

.content-inner a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.content-inner a:hover {
    color: var(--primary-dark);
}

.content-inner a:hover::after {
    width: 100%;
}

/* 兼容旧样式 */
.cinner{padding:0 0 30px 0;height:auto;overflow:auto}
.cinner .leftnav{width:100%;text-align:left;height:auto;margin-top:10px;margin-bottom:10px}
.cinner .leftnav a{border-radius:13px;padding:0 10px;display:block;height:26px;line-height:26px;color:#333;text-decoration:none;font-size:12px;font-family:microsoft yahei;overflow:hidden;float:right;margin-right:5px;margin-left:5px}
.cinner .leftnav a.current,.cinner .leftnav a:hover{color:#fff;background-color:#999}
.cinner .rightcontent{display:block;width:100%;height:auto;text-align:left;font-size:14px;line-height:24px}
.cinner .rightcontent{padding:0 0 10px 0;line-height:2;word-wrap:break-word;word-break:break-all;overflow:hidden}
.cinner .rightcontent p{padding:0;margin-bottom:15px}.footer{margin-left:auto;margin-right:auto;border-top:1px #ccc solid;height:50px;line-height:24px;width:1000px;padding-top:20px;color:#585858}.footer a{color:#585858;margin-left:5px}.authcode{cursor:pointer;width:195px;height:52px;border:1px #ddd solid}.sitemap{padding:10px 0;height:auto;overflow:auto;margin-left:auto;margin-right:auto;width:1000px}.sitemap .ul{font-size:14px;margin:0;text-align:left}.sitemap .h3{font-size:16px;line-height:30px;background-color:#f9f9f9;font-family:"microsoft yahei";margin-bottom:10px;text-indent:10px;height:30px;margin-top:10px}.sitemap .h3 a{color:#333}.sitemap ul{width:100%;vertical-align:top;padding-bottom:10px;font-size:14px;margin-bottom:10px;height:auto;overflow:auto;padding-top:10px}.sitemap ul li{width:170px;margin-right:10px;float:left;line-height:26px;overflow:hidden;text-indent:20px}.friendlink{padding:0 0 10px 0;height:auto;overflow:auto;margin-left:auto;margin-right:auto;width:1000px}.friendlink .apply{font-size:12px;line-height:180%;margin:0 20px}.friendlink .applyform{border-top:1px #d4d4d4 solid;padding-top:15px;font-size:12px;line-height:180%}.friendlink .links{overflow:auto;padding:0;text-align:left}.friendlink .links .tit{font-size:16px;line-height:30px;background-color:#f9f9f9;text-indent:10px;height:30px;font-family:microsoft yahei;margin-top:10px}.friendlink .links .link{margin:0}.friendlink .links .link .cont{margin-top:10px}.friendlink .links .link .cont a{font-size:12px;display:block;float:left;width:125px;height:25px;line-height:180%;margin-left:10px;overflow:hidden}.friendlink .links .cont,.links .contt{font-size:12px;line-height:180%}.friendlink .links .contt{padding-left:10px}.friendlink .links .link .imgcont img{width:88px;height:31px}.friendlink .links .link .imgcont a{float:left;display:block;margin-left:10px;width:125px}.friendlink input{height:22px;line-height:22px}.submit{border:0;background:url(../images/global/commentsubmit.gif) no-repeat;height:31px!important;width:86px;color:#000;font-size:14px;font-weight:700;line-height:31px;text-align:center;cursor:pointer}.faq{padding:0 0 10px 0;height:auto;overflow:auto;margin-left:auto;margin-right:auto;width:1000px;text-align:left}dl.qlist{border-bottom:#f1f1f1 1px solid;padding:12px 10px 22px;line-height:2}dl.qlist.y{background-color:#fffdf9;border-top:#ffe4d5 1px solid;border-bottom:#ffe4d5 1px solid;margin-top:-1px}dl.qlist dt{float:left;position:relative;padding:0 0 0 17px;width:114px;font-weight:700;font-size:14px}dl.qlist dt i{position:absolute;left:0;top:7px;display:inline-block;width:8px;height:14px}dl.qlist dt i.b-1{background-color:#ff9d3d}dl.qlist dt i.b-2{background-color:#c3e617}dl.qlist dt i.b-3{background-color:#78bf13}dl.qlist dt i.b-4{background-color:#ffd919}dl.qlist dt i.b-5{background-color:#1ab2ff}dl.qlist dt i.b-6{background-color:#ff9ac5}dl.qlist dt i.b-7{background-color:#a1a0ff}dl.qlist dt i.b-8{background-color:#60e7ff}dl.qlist dt i.b-9{background-color:#ccff64}dl.qlist dd{float:right;font-size:14px;width:800px}dl.qlist dd a{float:left;display:block;width:198px}dl.qlist dd a.current,dl.qlist dd a:hover{color:#000;font-weight:700;text-decoration:none}.faqcontent h1{font-weight:700;margin-bottom:15px;border-bottom:1px #ddd solid;padding-bottom:10px}.faqcontent{background-color:#f9f9f9;line-height:24px;font-size:14px;padding:15px;height:auto;overflow:auto;border-radius:5px}.announce{padding:0 0 10px 0;height:auto;overflow:auto;margin-left:auto;margin-right:auto;width:1000px;text-align:left}.announce .title{line-height:30px;margin-bottom:15px;text-indent:10px;height:30px}.announce .title .l{float:left;width:600px;overflow:hidden;font-family:microsoft yahei;font-size:16px}.announce .title .r{float:right;font-size:12px!important;color:#999;font-weight:100;margin-right:10px}.announce .announcecontent{line-height:24px;background-color:#f7f7f7;padding:15px 10px;margin:0 0 10px 0;font-size:14px}.full .inner{width:1200px!important}.full .cinner{width:1200px!important}.full .location{width:1200px!important}.full .footer{width:1200px!important}.full .sitemap{width:1200px!important}.full .friendlink{width:1200px!important}.full .faq{width:1200px!important}.full .announce{width:1200px!important}.none{display:none}

/* 响应式设计 */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: 250px 1fr;
        gap: 30px;
    }
    
    .content-wrapper {
        padding: 30px;
    }
    
    .inner {
        padding: 0 15px;
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .sidebar-nav {
        position: static;
        order: 2;
    }
    
    .content-area {
        order: 1;
    }
    
    .content-wrapper {
        padding: 20px;
    }
    
    .aboutus-container {
        padding: 20px 0;
    }
    
    .inner {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
    
    .inner .nav {
        margin-top: 15px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .inner .nav a {
        height: auto;
        padding: 10px 15px;
    }
    
    .content-inner h1 {
        font-size: 24px;
    }
    
    .content-inner h2 {
        font-size: 20px;
    }
    
    .content-inner {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .content-wrapper {
        padding: 15px;
    }
    
    .nav-header {
        padding: 15px;
    }
    
    .nav-link {
        padding: 12px 15px;
    }
    
    .content-inner h1 {
        font-size: 20px;
    }
    
    .content-inner h2 {
        font-size: 18px;
    }
    
    .content-inner {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .content-inner p {
        text-indent: 1em;
    }
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-nav {
    animation: slideInLeft 0.6s ease-out;
}

.content-area {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

/* 更新页脚样式 */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 30px 0;
    text-align: center;
    color: var(--text-secondary);
  
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: var(--shadow-light);
}


.footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

.footer a:hover {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 兼容性样式 */
.clear,
.clear15 {
    display: none;
}

/* 保持向后兼容的类名 */
.full .aboutus-container .container {
    max-width: 1400px;
}

/* 现代化增强效果 */
.content-wrapper {
    position: relative;
    z-index: 2;
}

/* 添加微妙的悬停效果 */
.content-area:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy);
}

.sidebar-nav:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-heavy);
}

/* 滚动条样式 */
.content-inner::-webkit-scrollbar {
    width: 6px;
}

.content-inner::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.content-inner::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 3px;
}

.content-inner::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-secondary);
}

/* 选择文本样式 */
.content-inner::selection {
    background: rgba(99, 102, 241, 0.2);
    color: var(--text-primary);
}

.content-inner::-moz-selection {
    background: rgba(99, 102, 241, 0.2);
    color: var(--text-primary);
}

/* 焦点样式 */
.nav-link:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 加载状态动画 */
@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.loading-shimmer {
    background: linear-gradient(90deg, var(--bg-secondary) 0px, var(--bg-accent) 40px, var(--bg-secondary) 80px);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}