@import url('font.css');
 /* 头部样式 */

 html {
     scroll-behavior: smooth;
 }

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

 body {
     font-family: 'Noto Sans SC', sans-serif;
     overflow-x: hidden;
     background-color: #f5f5f5;
     opacity: 1;
     transition: opacity 0.3s ease;
 }

 body.fade-out {
     opacity: 0;
 }

 a {
     text-decoration: none;
     transition: color 0.3s ease, transform 0.2s ease;
 }

 a:hover {
     transform: translateY(-2px);
 }

 /* 导航栏样式 */
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 10%;
     background-color: transparent;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     transition: background-color 0.3s ease;
 }

 .navbar.scrolled {
     background-color: #0a1733;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .logo {
     height: 50px;
     margin-left: 35px;
 }

 .nav-links {
     display: flex;
     list-style: none;
     margin-left: 0;
     margin-right: 20px;
 }

 .nav-links li {
     margin-left: 50px;
     position: relative;
     cursor: pointer;
 }

 .nav-links a {
     text-decoration: none;
     color: #fff;
     font-weight: 500;
     font-size: 20px;
     padding: 5px 0;
     transition: color 0.3s ease;
     display: inline-block;
 }

 .nav-links a:hover {
     color: #4e9eff;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     background-color: #4e9eff;
     bottom: 0;
     left: 0;
     transition: width 0.3s ease;
 }

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

 /* 下拉菜单样式 */
 .dropdown-menu {
     position: absolute;
     top: 80%;
     left: 50%;
     transform: translateX(-50%);
     background-color: #fff;
     width: 482px;
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
     padding: 5px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     z-index: 100;
 }

 /* 为特定导航项添加自定义下拉菜单样式 */
 .cases-dropdown .dropdown-menu {
     width: 550px;
 }

 .about-dropdown .dropdown-menu {
     width: 350px;
 }

 .nav-links li:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     top: 120%;
 }

 .dropdown-column {
     width: 50%;
     padding: 10px;
 }

 .dropdown-category {
     margin-bottom: 15px;
 }

 .category-title {
     font-size: 18px;
     font-weight: 600;
     color: #444;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
 }

 .category-icon {
     width: 30px;
     height: 30px;
     margin-right: 10px;
     background-color: #f0f6ff;
     border-radius: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #1976d2;
 }

 .dropdown-links {
     list-style: none;
     padding-left: 30px;
 }

 .dropdown-links li {
     margin-bottom: 6px;
     margin-left: 0;
 }

 .dropdown-links a {
     font-size: 16px;
     color: #666;
     font-weight: 400;
     transition: color 0.2s ease;
 }

 .dropdown-links a:hover {
     color: #1976d2;
 }

 .menu-toggle {
     display: none;
     flex-direction: column;
     justify-content: space-between;
     width: 30px;
     height: 21px;
     cursor: pointer;
     z-index: 1001;
 }

 .menu-toggle span {
     display: block;
     width: 100%;
     height: 3px;
     background-color: #fff;
     border-radius: 3px;
     transition: all 0.3s ease;
 }

 .menu-toggle.active span:nth-child(1) {
     transform: translateY(9px) rotate(45deg);
 }

 .menu-toggle.active span:nth-child(2) {
     opacity: 0;
 }

 .menu-toggle.active span:nth-child(3) {
     transform: translateY(-9px) rotate(-45deg);
 }

 /* 页脚区域 */
 .footer {
     background-color: #1a294e;
     color: #ffffff;
     padding: 40px 10%;
     display: flex;
     justify-content: space-between;
 }

 .footer-column {
     width: 18%;
     margin-right: 2%;
 }

 .footer-title {
     font-size: 20pt;
     font-weight: 500;
     margin-bottom: 20px;
     color: #ffffff;
 }

 .footer-links {
     list-style: none;
 }

 .footer-links li {
     margin-bottom: 12px;
 }

 .footer-links a {
     color: #ffffff;
     text-decoration: none;
     font-size: 14pt;
     font-weight: 400;
     opacity: 0.9;
 }

 .footer-column:last-child {
     width: 22%;
 }

 .footer-contact-title {
     font-size: 36px;
     font-weight: 600;
     margin-bottom: 30px;
     color: #ffffff;
 }

 .footer-contact-phone {
     font-size: 22px;
     color: #ffffff;
     margin-bottom: 40px;
     font-weight: 400;
     opacity: 0.9;
 }

 .social-content {
     margin-top: 40px;
 }

 .social-title {
     font-size: 36px;
     font-weight: 600;
     margin-bottom: 5px;
     color: #ffffff;
 }

 .social-description {
     font-size: 22px;
     margin-bottom: 25px;
     opacity: 0.9;
     color: #ffffff;
     font-weight: 400;
 }

 .social-icons {
     display: flex;
     gap: 15px;
 }

 .social-icon {
     width: 45px;
     height: 45px;
     border-radius: 8px;
 }

 /* 回到顶部按钮 */
 .back-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     background-color: #116be5;
     color: #ffffff;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     text-decoration: none;
     opacity: 0;
     transition: opacity 0.3s ease, background-color 0.3s ease;
     z-index: 999;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }

 .back-to-top.visible {
     opacity: 1;
 }

 .back-to-top:hover {
     background-color: #ffffff;
     color: #116be5;
 }

 .back-to-top i {
     font-size: 24px;
 }

 /* 固定电话按钮 */
 .fixed-phone {
     position: fixed;
     bottom: 100px;
     /* 放在回到顶部按钮上方 */
     right: 30px;
     /* 与回到顶部按钮相同的右边距 */
     width: 50px;
     height: 50px;
     background-color: #116be5;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     z-index: 999;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
 }

 .fixed-phone i {
     color: #ffffff;
     font-size: 22px;
 }

 .phone-tooltip {
     position: absolute;
     right: 70px;
     /* 从右侧显示 */
     background-color: #ffffff;
     color: #116be5;
     padding: 10px 15px;
     border-radius: 5px;
     font-size: 16px;
     font-weight: 500;
     white-space: nowrap;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     opacity: 0;
     transform: translateX(20px);
     /* 从右侧滑入 */
     transition: all 0.3s ease;
     pointer-events: none;
 }

 .fixed-phone:hover {
     background-color: #0a52b3;
 }

 .fixed-phone:hover .phone-tooltip {
     opacity: 1;
     transform: translateX(0);
 }

 .button-group {
     display: flex;
     gap: 15px;
 }

 /* 微信弹窗样式 */
 .modal {
     display: none;
     position: fixed;
     z-index: 2000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     overflow: auto;
     animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .modal-content {
     position: relative;
     background-color: #fff;
     margin: 10% auto;
     padding: 20px;
     width: auto;
     max-width: 750px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     animation: slideDown 0.4s ease;
 }

 @keyframes slideDown {
     from {
         transform: translateY(-50px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .close-modal {
     position: absolute;
     top: 10px;
     right: 15px;
     color: #333;
     font-size: 28px;
     font-weight: bold;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .close-modal:hover {
     color: #116be5;
 }

 .wechat-qrcode {
     display: block;
     max-width: 100%;
     height: auto;
     margin: 0 auto;
 }

 /* 页面加载动画 start */
 .page-loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #f9f9f9;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
 }

 .page-loader.hidden {
     opacity: 0;
     visibility: hidden;
 }

 .loader {
     width: 50px;
     height: 50px;
     border: 5px solid rgba(44, 79, 158, 0.2);
     border-radius: 50%;
     border-top-color: #2c4f9e;
     animation: spin 1s ease-in-out infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* 页面加载动画 end */

 /* 咨询弹窗样式 start */
 .modal-overlay {
     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: 1000;
     visibility: hidden;
     opacity: 0;
     transition: all 0.3s ease;
 }

 .modal-overlay.active {
     visibility: visible;
     opacity: 1;
 }

 .modal-container {
     width: 740px;
     height: 300px;
     background-color: #d9eafa;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 .modal-close {
     position: absolute;
     top: 15px;
     right: 15px;
     font-size: 20px;
     cursor: pointer;
     color: #0071b5;
     z-index: 10;
 }

 .modal-phone-container {
     background-color: #fff;
     padding: 25px 40px;
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
 }

 .modal-phone-number {
     font-size: 28px;
     font-weight: bold;
     color: #0071b5;
     text-align: center;
 }

 .modal-phone-number i {
     margin-right: 15px;
     color: #0071b5;
 }

 .modal-body {
     flex: 1;
     padding: 30px 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

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

 .modal-logo {
     height: 60px;
     margin-right: 25px;
 }

 .modal-divider {
     width: 2px;
     height: 50px;
     background-color: #0071b5;
     margin-right: 25px;
 }

 .modal-slogan {
     font-size: 24px;
     font-weight: bold;
     color: #0071b5;
 }

 /* 咨询弹窗样式 end */


 /* 触摸屏交互优化 start */
 @media (hover: none) {
     a:hover {
         transform: none;
     }

     .btn:hover,
     .cta-btn:hover,
     .hero-btn:hover {
         transform: none;
         box-shadow: none;
     }

     .feature-card:hover,
     .case-card:hover {
         transform: none;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }
 }

 /* 触摸屏交互优化 end */


 /* 按钮交互效果 start */
 .btn,
 .cta-btn,
 .hero-btn {
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .btn:hover,
 .cta-btn:hover,
 .hero-btn:hover {
     transform: translateY(-5px) scale(1.05);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 }

 /* 按钮交互效果 end */

 /* 卡片交互效果 start */

 .feature-card,
 .case-card {
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .feature-card:hover,
 .case-card:hover {
     transform: translateY(-10px) scale(1.03);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 /* 卡片交互效果 end */

 /* 媒体查询 start */

 @media screen and (max-width: 1380px) {
     .navbar {
         padding: 20px;
     }
 }

 @media screen and (max-width: 1200px) {
     .menu-toggle {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         width: 30px;
         height: 20px;
         cursor: pointer;
     }

     .menu-toggle.active span:nth-child(1) {
         transform: translateY(8px) rotate(45deg);
     }

     .menu-toggle.active span:nth-child(2) {
         opacity: 0;
     }

     .menu-toggle.active span:nth-child(3) {
         transform: translateY(-8px) rotate(-45deg);
     }

     .nav-links {
         position: fixed;
         top: 90px;
         left: -100%;
         width: 100%;
         height: calc(100vh - 90px);
         background-color: #f3f7ff;
         flex-direction: column;
         align-items: flex-start;
         padding: 20px 0;
         overflow-y: auto;
         transition: right 0.3s ease;
         box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
     }

     .nav-links.active {
         left: 0;
     }

     .nav-links li {
         /* margin: 15px 0;
        width: 100%;
        text-align: center; */
         margin: 0;
         width: 100%;
         border-bottom: 1px solid #eee;
     }

     .nav-links li a {
         /* position: relative; */
         color: #333 !important;
         font-size: 16px;
         font-weight: 500;
         padding: 15px 20px;
         display: flex;
         justify-content: flex-start;
         align-items: center;
         width: 100%;
         position: relative;
     }

     .nav-links a::after {
         display: none;
     }

     /* 显示有下拉菜单的项目标志 - 不使用:has()选择器，改用JavaScript添加类 */
     .nav-links .has-dropdown>a::before {
         content: '\f107';
         font-family: 'Font Awesome 6 Free';
         font-weight: 900;
         margin-left: 0;
         position: absolute;
         right: 20px;
         transition: transform 0.3s ease;
     }

     .nav-links .has-dropdown.active>a::before {
         transform: rotate(180deg);
     }


     /* 下拉菜单样式 */
     .dropdown-menu {
         position: static;
         width: 100%;
         opacity: 1;
         visibility: visible;
         display: none;
         /* 默认隐藏 */
         box-shadow: none;
         border-radius: 0;
         padding: 0;
         background-color: #f9f9f9;
         transform: none;
     }

     .dropdown-column {
         width: 100%;
         padding: 5px;
     }

     .dropdown-links {
         padding-left: 15px;
     }

     .dropdown-links li {
         border-bottom: none;
     }

     .dropdown-links a {
         padding: 10px 20px 10px 40px;
         font-size: 14px;
         color: #666 !important;
         justify-content: flex-start;
         border-radius: 0;
         transition: background-color 0.3s ease;
     }

     .dropdown-links a:hover {
         background-color: rgba(17, 107, 229, 0.05);
     }

     .footer {
         flex-wrap: wrap;
         padding: 40px 5%;
     }

     .footer-column {
         width: 48%;
         margin-bottom: 30px;
     }

     .footer-column:last-child {
         width: 100%;
     }

     .footer-title,
     .social-title {
         font-size: 18px;
     }

     .footer-links a,
     .footer-contact-phone,
     .social-description {
         font-size: 16px;
     }

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

 @media screen and (max-width:800px) {
     .modal-content {
         padding: 0;
         width: 90%;
         margin: 0 auto;
         top: 50%;
         transform: translateY(-50%)
     }
 }

 @media (max-width: 768px) {
     .modal-container {
         width: 95%;
         max-width: 500px;
         height: auto;
         flex-direction: column;
     }

     .modal-logo-container {
         flex-direction: column;
         text-align: center;
     }

     .modal-logo {
         margin-right: 0;
         margin-bottom: 15px;
     }

     .modal-divider {
         width: 80px;
         height: 2px;
         margin: 15px 0;
     }

     .modal-slogan {
         font-size: 20px;
     }
 }

 @media screen and (max-width: 568px) {
     .footer-column {
         width: 100%;
         margin-bottom: 30px;
     }
 }

 /* 媒体查询 end */