/* 修复 Safari 宽度溢出问题 */
   html {
       width: 100%;
       -webkit-text-size-adjust: 100%;
   }

   body {
       width: 100%;
       max-width: 100vw;
       position: relative;
       overflow-x: hidden;
   }

   /* 确保所有容器不超出视口 */
   * {
       max-width: 100%;
       box-sizing: border-box;
   }

   /* 980-1600px 宽度范围的响应式设计 */
   @media (min-width: 980px) and (max-width: 1600px) {

       /* 主容器自适应宽度 */
       .ww {
           width: 95% !important;
           max-width: 1360px !important;
           padding-left: 20px;
           padding-right: 20px;
       }

       /* 导航栏自适应 */
       .header .hbox {
           width: 95% !important;
           max-width: 1360px !important;
       }

       .header .hlogo .hlbox img {
           max-height: 30px !important;
       }

       #searchword {
           max-width: 190px !important;
       }
        
       .hsearch .layui-form {
           margin-left: 20px !important;
       }

       .commenu ul li ul,
       .hsearch ul li ul {
           max-width: 900px;
       }
   }

   .hsearch .has-sub ul li a {
       line-height: 35px;
       margin-left: 25px;
       margin-right: 25px;
       text-align: left;
       display: block;
   }

   /* 购物车固定状态样式 */
   .cart-fixed {
       position: relative;
   }

   .cart-fixed a {
       background: #1767b2 !important;
       box-shadow: 0 0 15px rgba(0, 58, 133, 0.5);
   }

   .cart-fixed a:hover {
       background: #002a65 !important;
   }

   .cart-fixed .icon-gouwuche8 {
       color: #fff !important;
       animation: cartPulse 2s infinite;
   }

   .cart-fixed::before {
       content: "";
       position: absolute;
       top: -2px;
       left: -2px;
       right: -2px;
       bottom: -2px;
       background: linear-gradient(45deg, #1767b2, #0066cc);
       border-radius: 4px;
       z-index: -1;
       animation: cartGlow 3s ease-in-out infinite alternate;
   }

   .c-page{
    padding-bottom: 150px;
   }

   @keyframes cartPulse {

       0%,
       100% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.1);
       }
   }

   @keyframes cartGlow {
       0% {
           opacity: 0.5;
       }

       100% {
           opacity: 1;
       }
   }

   /* 购物车数量提示 */
   .cart-fixed .subnav {
       background: #1767b2 !important;
       color: #fff !important;
   }

   .cart-fixed .subnav::after {
       border-left-color: #1767b2 !important;
   }

   .fancybox-bg,
   .fancybox-overlay,
   .fancybox-overlay::before,
   .fancybox__backdrop,
   .fancybox__container,
   .fancybox-slide,
   .fancybox-inner {
       background: rgba(0, 0, 0, 0.5) !important;
       background-color: rgba(0, 0, 0, 0.5) !important;
   }

   /* Set semi-transparent backdrop color with 50% opacity */
   .fancybox-bg[style],
   .fancybox-overlay[style],
   .fancybox__backdrop[style] {
       background-color: rgba(0, 0, 0, 0.5) !important;
   }

   .swiper-button-next::after,
   .swiper-button-prev::after {
       display: none !important;
   }


   .blue-more {
       margin-top: 30px;
   }

   .video-modal {
       position: fixed;
       z-index: 9999;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.8);
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .video-modal-content {
       position: relative;
       background-color: transparent;
       padding: 0;
       border-radius: 0;
       width: 95%;
       height: 95%;
       max-width: 1200px;
       max-height: 800px;
   }

   .close-video {
       position: absolute;
       top: -10px;
       right: -10px;
       color: #fff;
       font-size: 30px;
       font-weight: bold;
       cursor: pointer;
       background-color: #ff0000;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 10000;
   }

   .close-video:hover {
       background-color: #cc0000;
   }

   /* 视频播放按钮样式 */
   .video-wrapper:hover .video-play-overlay {
       background: rgba(0, 0, 0, 0.8);
       transform: translate(-50%, -50%) scale(1.1);
   }

   .video-wrapper:hover video {
       filter: brightness(0.8);
   }

   .video-container {
       position: relative;
       width: 100%;
       height: 100%;
   }

   .video-container iframe {
       width: 100%;
       height: 100%;
       min-height: 500px;
       border: none;
       border-radius: 8px;
   }

   /* 响应式设计 */
   @media (max-width: 768px) {
       .video-modal-content {
           width: 98%;
           height: 90%;
           padding: 0;
           margin: 0;
       }

       .video-container iframe {
           min-height: 300px;
           border-radius: 4px;
       }
   }

   @media (max-width: 480px) {
       .video-modal-content {
           width: 100%;
           height: 85%;
       }

       .video-container iframe {
           min-height: 250px;
       }
   }

   .blue-more {
       margin: 0 !important;
   }

   .whatsapp-hover {
       position: relative;
       display: inline-block;
   }

   .whatsapp-hover .hover-image {
       position: absolute !important;
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       background: white;
       padding: 10px;
       border-radius: 8px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       opacity: 0 !important;
       visibility: hidden !important;
       transition: all 0.3s ease;
       z-index: 1000;
       margin-top: 5px;
       display: block;
   }

   .whatsapp-hover:hover .hover-image {
       opacity: 1 !important;
       visibility: visible !important;
   }

   .whatsapp-hover .hover-image::before {
       content: '';
       position: absolute;
       top: -6px;
       left: 50%;
       transform: translateX(-50%);
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       border-bottom: 6px solid white;
   }

   .wechat-hover {
       text-decoration: none;
       transition: text-decoration 0.3s ease;
   }

   .wechat-hover:hover {
       text-decoration: underline;
   }

   .swp-ihor .swiper-slide {
       margin-right: 0 !important;
       padding: 0;
   }

   .swp-ihor .item {
       margin: 0;
       padding: 0;
   }

   /* 首页视频播放键样式 */
   .video-wrapper:hover .play-overlay {
       background: rgba(0, 0, 0, 0.9) !important;
       transform: translate(-50%, -50%) scale(1.1) !important;
   }

   .video-wrapper .play-overlay {
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
   }

   /* Cookie Consent Banner */
   .cookie-banner {
       position: fixed;
       bottom: 0;
       left: 0;
       width: 100%;
       background-color: rgba(0, 160, 233, 0.8);
       /* 浅蓝色 */
       color: #fff;
       padding: 20px 40px;
       z-index: 99999;
       display: none;
       box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
       font-family: Arial, sans-serif;
   }

   .cookie-content {
       max-width: 1400px;
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
       position: relative;
   }

   .cookie-text {
       flex: 1;
       padding-right: 20px;
   }

   .cookie-text h3 {
       margin: 0 0 5px 0;
       font-size: 18px;
       font-weight: bold;
       color: #fff;
   }

   .cookie-text p {
       margin: 0;
       font-size: 14px;
       line-height: 1.5;
       color: #fff;
   }

   .cookie-text a {
       color: #fff;
       text-decoration: underline;
   }

   .cookie-actions {
       display: flex;
       align-items: center;
       gap: 20px;
   }

   .cookie-btn {
       background-color: transparent;
       color: #fff;
       border: 1px solid #fff;
       padding: 8px 30px;
       border-radius: 20px;
       cursor: pointer;
       font-weight: normal;
       white-space: nowrap;
       transition: all 0.3s;
       font-size: 14px;
   }

   .cookie-btn:hover {
       background-color: #fff;
       color: #00a0e9;
   }

   .cookie-close {
       position: absolute;
       top: -15px;
       right: -30px;
       font-size: 24px;
       cursor: pointer;
       color: #fff;
       line-height: 1;
       opacity: 0.8;
   }

   .cookie-close:hover {
       opacity: 1;
   }

   @media (max-width: 768px) {
       .cookie-content {
           flex-direction: column;
           align-items: flex-start;
       }

       .cookie-actions {
           margin-top: 15px;
           width: 100%;
           justify-content: flex-end;
       }

       .cookie-close {
           top: -15px;
           right: -10px;
       }
   }

   .liindex {
       list-style-type: disc !important;
   }

   .prod-card .hover-bar {
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .prod-card:hover .hover-bar {
       opacity: 1;
   }

   .prod-card:hover .prod-img img {
       transform: scale(1.1);
   }

   .prod-card h3 {
       transition: color 0.3s;
   }

   .prod-card h3:hover {
       color: #5eaaff !important;
   }

   .prod-card ul li {
       transition: color 0.3s;
   }

   .prod-card ul li:hover {
       color: #1767b2 !important;
   }

   /* Why Choose Bestware Hover Effects */
   .why-item .img-box img {
       transition: transform 0.3s ease;
   }

   .why-item:hover .img-box img {
       transform: scale(1.1);
   }

   .why-item p {
       transition: color 0.3s ease;
       cursor: pointer;
   }

   .why-item p:hover {
       color: #1767b2 !important;
   }

   /* News Hover Effects */
   .news-card .img-box,
   .news-item .img-box {
       overflow: hidden;
   }

   .news-card .img-box img,
   .news-item .img-box img {
       transition: transform 0.3s ease;
   }

   .news-card:hover .img-box img,
   .news-item:hover .img-box img {
       transform: scale(1.1);
   }

   .news-card h3,
   .news-card h4,
   .news-item h5,
   .news-item p {
       transition: color 0.3s ease;
       cursor: pointer;
   }

   .news-card h3:hover,
   .news-card h4:hover,
   .news-item h5:hover,
   .news-item p:hover {
       color: #1767b2 !important;
   }

/* 
   .header {
       background: none !important;
       box-shadow: none !important;
       position: absolute !important;
   } */

   /* 由下到上浮现动画 */
   .fade-in-up {
       opacity: 0;
       transform: translateY(500px);
       transition: opacity 0.8s ease-out, transform 1s ease-out;
   }

   .fade-in-up.visible {
       opacity: 1;
       transform: translateY(0);
   }

   .fade-in-up2 {
       opacity: 0;
       transform: translateY(200px);
       transition: opacity 0.8s ease-out, transform 1s ease-out;
   }

   .fade-in-up2.visible {
       opacity: 1;
       transform: translateY(0);
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

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

   /* Scroll Down Animation */
   .scr {
       position: absolute;
       bottom: 150px;
       z-index: 20000;
       left: 0;
       right: 0;
       margin: auto;
       padding: 4px 0;
       text-align: center;
       border-top-left-radius: 8px;
       border-top-right-radius: 8px;
       color: #fff;
       font-size: 16px;
       animation-fill-mode: both;
       opacity: 0;
       animation-timing-function: cubic-bezier(0.49, 0.54, 0.16, 1);
       animation-delay: 0.5s;
       animation-name: fadeInUpSmall;
       animation-duration: 1s;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .scr small {
       color: rgba(255, 255, 255, 0.5);
       font-size: 14px;
       line-height: 1.4;
       width: 14px;
       display: inline-block;
       margin-left: 16px;
       height: 24px;
       border-radius: 50px;
       border: 1px solid #fff;
       position: relative;
       vertical-align: middle;
   }

   .scr small:after {
       content: '';
       position: absolute;
       width: 2px;
       height: 5px;
       left: 5px;
       top: 12px;
       background-color: #ffffff;
       border-radius: 50px;
       z-index: 5;
       animation: Tmouse 0.9s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;
   }

   @keyframes Tmouse {
       0% {
           top: 5px;
       }

       100% {
           top: 12px;
       }
   }

   @keyframes fadeInUpSmall {
       from {
           opacity: 0;
           transform: translate3d(0, 20px, 0);
       }

       to {
           opacity: 1;
           transform: translate3d(0, 0, 0);
       }
   }

   /* New Footer Styles */
   .new-footer {
       background-color: #f2f2f2;
       color: #333;
       font-family: Arial, sans-serif;
       position: relative;
       padding-bottom: 30px;
       margin-top: 0;
       /* Removed margin as wave handles spacing */
   }

   .new-footer-wave-container {
       position: absolute;
       top: -120px;
       left: 0;
       width: 100%;
       height: 150px;
       overflow: hidden;
       line-height: 0;
       z-index: 1;
   }

   .waves {
       position: relative;
       width: 100%;
       height: 120px;
       margin-bottom: -7px;
       /* Fix for safari gap */
   }

   .parallax>use {
       animation: move-forever 8s cubic-bezier(.55, .5, .45, .5) infinite;
       fill: #1967b2;
   }

   @keyframes move-forever {
       0% {
           transform: translate3d(-90px, 0, 0);
       }

       100% {
           transform: translate3d(85px, 0, 0);
       }
   }

   .new-footer-content {
       margin: 0 auto;
       padding: 20px 120px 40px;
       text-align: center;
       position: relative;
       z-index: 2;
       margin-top: 30px;
   }

   .nf-socials {
       display: flex;
       justify-content: center;
       gap: 15px;
       margin-bottom: 25px;
   }

   .nf-social-item {
       width: 40px;
       height: 40px;
       background-color: #fff;
       color: #2d76c5;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 4px;
       text-decoration: none;
       font-size: 20px;
       transition: background 0.3s;
   }

   .nf-social-item:hover {
        background-color: #2d76c5;
        color: #fff;
   }

   .nf-social-item i {
       font-size: 22px;
   }

   .nf-nav {
       margin-bottom: 25px;
       color: #fff;
       font-weight: bold;
       font-size: 14px;
   }

   .nf-nav a {
       color: #fff;
       text-decoration: none;
       margin: 0 8px;
   }

   .nf-nav a:hover {
       text-decoration: underline;
   }

   .nf-bottom {
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
   }

   .nf-copyright {
       color: #fff;
       font-size: 14px;
   }

   .nf-qr {
       position: absolute;
       right: 0;
       bottom: -10px;
   }

   .nf-qr img {
       width: 80px;
       height: 80px;
   }

   @media (max-width: 768px) {
       .nf-bottom {
           flex-direction: column;
       }

       .nf-qr {
           position: static;
           margin-top: 20px;
       }

       .nf-nav a {
           display: inline-block;
           margin: 5px;
       }
   }