* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   li,
   ul {
     list-style: none;
   }
   img{
    display: block;
   }

   .navbox {
     width: 100%;
     position: relative;
   }

   .navimg {
     width: 100%;
     display: block;
   }

   #header {
    width: 100%;
    /* height: 100%; */
  


    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
   }

   /* header 样式（从 common/header.html 移入，避免在模板中使用 <style>） */
   .header {
     width: 100%;
     height: 100%;
     padding: 35px 40px;
     /* padding-bottom: 0; */
     box-sizing: border-box;



     background: transparent;
     position: relative;
     /* background: transparent; */
     transition: background 0.25s ease, box-shadow 0.25s ease;
   }
   .header.is-scrolled {
     background:  url(../img/navbg.png) no-repeat;
     background-size: cover;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
   }

   .header::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 80px;
     /* background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%); */
     pointer-events: none;
   }

   .header-container {
     max-width: 1100px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
     z-index: 999;
   }

   .header-logo {
     flex-shrink: 0;
   }

   .header-logo .logo {
     width: 120px;
   }

   .header-nav {
     flex: 1;
     display: flex;
     justify-content: flex-end;
   }

   .nav-menu {
     display: flex;
     gap: 40px;
     align-items: center;
   }

   .nav-link {
     color: #ffffff;
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     position: relative;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   }

   .nav-link:hover {
     color: #f0f0f0;
     opacity: 0.9;
   }

   .nav-link::after {
     content: "";
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background-color: #ffffff;
     transition: width 0.3s ease;
   }

   .nav-link:hover::after {
     width: 100%;
   }

   .nav-link[data-panel]::after {
     transition: width 0.2s ease;
   }

   .nav-link[data-panel]:not(:hover)::after {
     width: 0 !important;
   }

   .nav-link.active::after {
     width: 100%;
   }

   @media (max-width: 768px) {
     .header {
       padding: 15px 20px;
     }

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

     .nav-menu {
       gap: 20px;
       font-size: 12px;
     }

     .logo {
       height: 40px;
     }

     .footer-content {
       flex-direction: column;
       gap: 30px;
     }

     .footer-links {
       flex-direction: column;
       gap: 30px;
     }
   }

   /* Mobile nav toggle styles */
   .nav-toggle {
     display: none;
     background: transparent;
     border: none;
     width: 44px;
     height: 44px;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
     z-index: 20;
   }

   .nav-toggle .hamburger {
     display: block;
     width: 22px;
     height: 2px;
     background: #fff;
     position: relative;
   }

   .nav-toggle .hamburger::before,
   .nav-toggle .hamburger::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 2px;
     background: #fff;
   }

   .nav-toggle .hamburger::before {
     top: -7px;
   }

   .nav-toggle .hamburger::after {
     top: 7px;
   }

   /* nav wrap for collapse */
   .nav-wrap {
     display: block;
   }

   /* Small screens: show toggle and stack menu */
   @media (max-width: 900px) {
     .nav-toggle {
       display: flex;
     }

     .header-container {
       align-items: center;
     }

     .nav-wrap {
       display: none;
       width: 100%;
     }

     .header.open .nav-wrap {
       display: block;
     }

     .header.open .nav-menu {
       display: flex;
       flex-direction: column;
       gap: 12px;
       padding: 12px 0;
     }

     .nav-menu {
       display: none;
     }

     .nav-menu .nav-link {
       padding: 10px 12px;
       display: block;
     }
   }

   .footer {
     background: url(../img/navfooter.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     height: 250px;
     color: white;
     padding: 72px;
     box-sizing: border-box;
   }

   .footer-container {
     max-width: 1300px;
     margin: 0 auto;
     /* padding-top: 25px; */
   }

   .footer-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
   }

   .footer-logo {
     display: flex;
     align-items: center;
     gap: 15px;
     flex: 0 0 auto;
   }

   .footer-logo img {
     height: 28px;
     width: 400px;
   }

   .footer-org-name {
     display: flex;
     flex-direction: column;
   }

   .org-name-en {
     font-size: 14px;
     font-weight: 600;
     color: #2e3192;
     line-height: 1.3;
   }

   .footer-links {
     display: flex;
     gap: 60px;
     flex: 1;
     justify-content: flex-end;
   }

   .shuxan {
     height: 120px;
     width: 1px;
     background: #fff;
   }

   .footer-column {
     display: flex;
     flex-direction: column;
   }

   .footer-title {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 15px;
     color: white;
   }

   /* Footer collapse behavior for small screens */
   .footer-toggle {
     background: transparent;
     border: none;
     color: #fff;
     font-size: 16px;
     font-weight: 600;
     padding: 0;
     cursor: pointer;
   }

   .footer-toggle:focus {
     outline: 2px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
   }

   @media (max-width: 768px) {
     .footer-links {
       flex-direction: column;
       gap: 18px;
       align-items: flex-start;
     }

     .footer-column {
       width: 100%;
     }

     .footer-list {
       display: none;
     }

     .footer-column.open .footer-list {
       display: block;
     }

     .footer-list li {
       margin-bottom: 10px;
     }

     .shuxan {
       display: none;
     }

     .footer {
       padding: 20px 16px 24px;
       height: auto;
     }
   }

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

   .footer-list li {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 8px;
   }

   .footer-list li span {
     display: flex;
     align-items: center;
   }

   .footer-list li img {
     width: 23px;
     height: 19px;
     margin-right: 15px;
   }

   .footer-hover-item {
     position: relative;
   }

   .footer-list li .footer-hover-preview {
     display: none;
     position: absolute;
     left: 100%;
     top: 50%;
     transform: translate(12px, -50%);
     padding: 6px;
     background: #fff;
     border-radius: 6px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
     z-index: 10;
   }

   .footer-list li .footer-hover-preview img {
     width: 140px;
     height: auto;
     display: block;
     margin-right: 0;
   }

   .footer-list li.footer-hover-item:hover .footer-hover-preview,
   .footer-list li.footer-hover-item:active .footer-hover-preview {
     display: block;
   }

   .footer-list a {
     color: white;
     text-decoration: none;
     font-size: 16px;
     transition: opacity 0.3s;
   }

   .footer-list a:hover {
     opacity: 0.8;
   }

   .social-icon {
     width: 20px;
     height: 20px;
   }

   .footer-list li span {
     font-size: 14px;
   }

   .footer-copyright {
     text-align: center;
     height: 50px;
     line-height: 50px;
   }

   .footer-copyright p {
     margin: 0;
     font-size: 14px;
     color: #000;
   }

   /* ========== Mega Navigation Panels ========== */
   .nav-panels {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     pointer-events: none;
     z-index: 50;
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0);
     transition: background 0.35s ease;
   }

   .nav-panels.show-overlay {
     background: rgba(0, 0, 0, 0.5);
     pointer-events: auto;
   }

   .mega-panel {
     max-width: 100%;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
     color: #fff;
     max-height: 0;
     opacity: 0;
     transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
     pointer-events: auto;
     overflow: hidden;
     transform: translateY(-20px);
     position: relative;
   }

   .mega-panel.active {
     max-height: 500px;
     opacity: 1;
     padding: 75px 0;
     box-sizing: border-box;
     pointer-events: auto;
     transform: translateY(0);
     background: rgba(15, 23, 42, 0.35);
     /* 深灰蓝半透明雾感 */
     backdrop-filter: blur(8px);
     /* 高斯模糊 */
     -webkit-backdrop-filter: blur(8px);
     /* Safari */
     border-bottom: 1px solid #fff;
     ;
     padding-bottom: 0;
   }
   .h5-popup{
    transform: translateY(0) !important;
     background: rgba(15, 23, 42, 0.35)!important;
     /* 深灰蓝半透明雾感 */
     backdrop-filter: blur(8px)!important;
     /* 高斯模糊 */
     -webkit-backdrop-filter: blur(8px)!important;
     /* Safari */
     border-bottom: 1px solid #fff!important;
     ;
   }

   .mega-inner {

     box-sizing: border-box;
     max-width: 1300px;
     margin: 0 auto;

   }

   .mega-row {
     display: flex;
     justify-content: flex-end;
     position: relative;
   }

   .mega-column-left {
     /* flex: 0 1 26%; */
     
     display: flex;
     flex-direction: column;
     gap: 20px;
     padding: 20px 0;
     box-sizing: border-box;
     position: absolute;
     left: 0;
     transition: left 0.3s ease;
   }

   .mega-column-left h3 {
     font-size: 18px;
     font-weight: 600;
     margin: 0;
     color: #fff;
   }

   .mega-nav-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }

   .mega-nav-list li {
     margin: 0;
   }

   .mega-nav-list a {
     color: #fff;
     text-decoration: none;
     font-size: 14px;
     padding-bottom: 8px;
     display: inline-block;
     position: relative;
     transition: all 0.3s ease;
   }

   .mega-nav-list a::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background-color: #ffffff;
     transition: width 0.3s ease;
   }

   .mega-nav-list a:hover::after {
     width: 100%;
   }

   .mega-column-right {
     display: flex;
     /* gap: 20px; */
   }

   .mega-item {
     flex: 1 1 0;
     position: relative;
     overflow: hidden;
   }

   .mega-item img {
     width: 100%;
     max-width: 260px;
     height: auto;
     object-fit: cover;
     display: block;
   }

   .panel-chi .mega-item img {
     filter: contrast(0.95) brightness(0.9);
   }

   .panel-chi .mega-mask {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45));
     pointer-events: none;
   }

   .mega-panel .mega-close {
     position: absolute;
     top: 12px;
     right: 16px;
     width: 32px;
     height: 32px;
     background: rgba(255, 255, 255, 0.15);
     border: none;
     border-radius: 4px;
     color: #fff;
     font-size: 20px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s ease, transform 0.2s ease;
     padding: 0;
     z-index: 10;
   }

   .mega-panel .mega-close:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: scale(1.08);
   }

   .mega-panel .mega-close:active {
     transform: scale(0.95);
   }

   @media (max-width: 1500px) {
     .mega-item img {
       max-width: 230px;
     }
   }

   @media (max-width: 1300px) {
     .mega-item img {
       max-width: 200px;
     }
   }

   /* 中等屏幕 (平板) */
   @media (max-width: 1200px) {
     .mega-item img {
       max-width: 180px;
     }
   }

   /* 小屏幕 (手机横屏/小平板) */
   @media (max-width: 900px) {

     .mega-panel.active {
       max-height: 240px;
       padding: 20px 16px;
     }

     .mega-item img {
       max-width: 160px;
     }

     .mega-row {
       gap: 12px;
       flex-direction: column;
     }

     .mega-column-left {
       position: static;
       left: auto !important;
     }

     .mega-column-right {
       width: 100%;
       justify-content: center;
       gap: 10px;
     }

     .ourwork-right {
       position: static;
       left: auto !important;
       top: auto !important;
       margin-top: 20px;
     }

     .ourwork-sub-list {
       padding-left: 10px;
     }
   }

   /* 超小屏幕 (手机竖屏) */
   @media (max-width: 600px) {
     .mega-item img {
       max-width: 120px;
     }

     .mega-column-right {
       gap: 8px;
     }
   }

   /* OUR WORK mega panel: right side second-level blocks */
   .ourwork-right {
     position: absolute;
     left: 0;
     top: 20px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     padding: 0;
     box-sizing: border-box;
     transition: left 0.3s ease, top 0.3s ease;
     pointer-events: none;
   }

   .ourwork-sub-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding-left: 20px;
   }

   .ourwork-sub-list li {
     margin: 0;
   }

   .ourwork-sub-list a {
     color: #fff;
     font-size: 13px;
     display: inline-block;
     position: relative;
     transition: all 0.3s ease;
     pointer-events: auto;
     opacity: 0.85;
   }

   .ourwork-sub-list a:hover {
     opacity: 1;
     padding-left: 5px;
   }

   .ourwork-right .ourwork-sub {
     display: none;
   }

   .ourwork-right .ourwork-sub.active {
     display: block;
   }

   /* 弹框样式 */
   .modal-mask {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     /* 初始隐藏 */
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
   }

   .modal-mask.show {
     opacity: 1;
     visibility: visible;
   }

   .modal-content {
     width: 600px;
     background-color: #fff;
     padding: 30px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
     position: relative;
   }

   .modal-close {
     position: absolute;
     top: 15px;
     right: 15px;
     font-size: 20px;
     cursor: pointer;
     color: #999;
     transition: color 0.3s;
   }

   .modal-close:hover {
     color: #333;
   }

   .modal-avatar {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     overflow: hidden;
     margin: 0 auto 20px;
   }

   .modal-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .modal-position {
     text-align: center;
     font-size: 14px;
     color: #666;
     margin-bottom: 10px;
   }

   .modal-name {
     text-align: center;
     font-size: 20px;
     font-weight: 700;
     color: #333;
     margin-bottom: 20px;
   }

   .modal-desc {
     font-size: 14px;
     line-height: 1.6;
     color: #555;
     /* text-align: justify; */
   }

   .modal-title {
     font-size: 20px;
     font-weight: 700;
     background-image: linear-gradient(93deg, #383a94 30%, #7362aa 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 20px;
     border-bottom: #2948c5 1px solid;
   }



   /* 弹框样式 */
   .modal-mask {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     /* 初始隐藏 */
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
   }

   .modal-mask.show {
     opacity: 1;
     visibility: visible;
   }

   .modal-content {
     width: 600px;
     background-color: #fff;
     padding: 30px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
     position: relative;
   }

   .modal-close {
     position: absolute;
     top: 15px;
     right: 15px;
     font-size: 20px;
     cursor: pointer;
     color: #999;
     transition: color 0.3s;
   }

   .modal-close:hover {
     color: #333;
   }

   .modal-avatar {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     overflow: hidden;
     margin: 0 auto 20px;
   }

   .modal-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .modal-position {
     text-align: center;
     font-size: 14px;
     color: #666;
     margin-bottom: 10px;
   }

   .modal-name {
     text-align: center;
     font-size: 20px;
     font-weight: 700;
     color: #333;
     margin-bottom: 20px;
   }

   .modal-desc {
     font-size: 14px;
     line-height: 1.6;
     color: #555;
     /* text-align: justify; */
   }

 


   .article-breadcrumb {
     font-size: 13px!important;
     color: #777;
     margin-bottom: 24px;
   }

   .article-breadcrumb a {
     color: #666;
     text-decoration: none;
     font-family: 'sc1'!important;
   }

   .article-breadcrumb span {
     margin: 0 4px;
   }


   @font-face {
     font-family: 'sc1';
     /* 自定义字体名称 */
     src: url('../fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
   }

    @font-face {
     font-family: 'sc2';
     /* 自定义字体名称 */
     src: url('../fonts/HarmonyOS_Sans_SC_Bold.ttf') format('truetype');
   }
   @font-face {
     font-family: 'sc3';
     /* 自定义字体名称 */
     src: url('../fonts/HarmonyOS_Sans_SC_Light.ttf') format('truetype');
   }
     @font-face {
     font-family: 'sc4';
     /* 自定义字体名称 */
     src: url('../fonts/HarmonyOS_Sans_SC_Medium.ttf') format('truetype');
   }
   @font-face {
     font-family: 'sc5';
     /* 自定义字体名称 */
     src: url('../fonts/HarmonyOS_Sans_Medium_Italic.ttf') format('truetype');
   }

   


   .TITLE-COMMON{
    background-image: linear-gradient(93deg, #3C26BB 5%, #8065D0 20%)!important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   }


  .titsc2{
    font-family: 'sc2';
  }

.title-header{
  font-size: 24px!important;
  font-family: 'sc1';
}
.title-content{
  font-size: 14px!important;
  line-height: 1.4!important;
  font-family: 'sc3';
  font-weight: 600;
}

.h5font-header{
  font-family: 'sc1';
}
.font-header4{
  font-family: 'sc4';
}
.h5font-content{
  font-family: 'sc3';
  font-weight: 600;
  line-height: 1.4;
}

#navSwiperh51{
  margin-top: 0.9rem;
}
.h5-banner{
   margin-top: 0.9rem;
}
.h5-banner img{
   display: block;
}

.h5-footerbox a{
  text-decoration: none!important;
}