/*--------------------------------------------------------网站导航样式---------------------------------------------------------------------*/
.nav-header {width: 100%;  position: fixed; top: 0; z-index: 9999; }
.top-nav {display: flex;justify-content: space-between;align-items: center;padding: 20px 10%;background-color: #fff;}
.top-nav-left {display: flex;align-items: center;gap: 10px;}
.logo img {height: 50px; }
.separator {display: inline-block;width: 1px;height: 30px;background-color: #999;  margin-left: 20px;vertical-align: middle;}
.phone-info {font-size: 18px;margin-left: 20px;}
.phone-info i{color:#E70012;font-size: 20px;font-weight: bold;}
.phone-info span{color: #E70012;font-size: 20px;font-weight: bold;}
.top-nav-right {display: flex;align-items: center;gap: 10px;}
.contact-btn {background-color: #E70012;color: #fff;border: none;padding: 6px 30px;cursor: pointer;font-size: 14px;border-radius: 4px;}

.search-box {display: flex;align-items: center;border: 1px solid #ccc;border-radius: 4px;padding: 2px 6px;width: 200px;transition: border-color 0.3s; }
.search-box input {flex: 1;border: none;outline: none;font-size: 14px;padding: 4px 0;width: 150px;}
.search-box input::placeholder {color: #999;}
.search-box i {font-size: 16px;color: #999;cursor: pointer;margin-left: 8px;}
.search-box:focus-within {border-color: #1976d2;box-shadow: 0 0 6px rgba(25, 118, 210, 0.2);}


/* 基础导航样式调整 */
.bottom-nav {position: relative; z-index: 100; background-color: #000;}
.bottom-nav-inner {margin: 0 10%;}
.nav-container {display: flex; align-items: center; justify-content: space-between; width: 100%;}
/* 移除所有列表项符号 */
.nav-menu, .submenu, .submenu-third {list-style: none !important; margin: 0; padding: 0;}
.nav-menu {display: flex;}
.main-menu {flex: 1;}
.nav-menu li {position: relative;}
.nav-menu a {display: block; padding: 15px 20px; text-decoration: none; color: #fff; font-size:16px; transition: color 0.3s ease;font-weight:700}
/* 箭头样式调整 */
.nav-menu a i {margin-left: 8px; font-size: 12px; transition: transform 0.3s ease;}
/* 一级栏目向下箭头 */
.nav-menu > li > a > i.fa-chevron-down {vertical-align: middle;}
/* 二级栏目向右箭头 */
.submenu > li > a > i.fa-chevron-right {vertical-align: middle;}
.nav-menu a:hover {color: #ff4d4d;}
.nav-menu a.active {color: #ff0000; font-weight: bold;}
/* 二级菜单样式 */
.has-submenu .submenu {position: absolute; left: 0; top: 100%; min-width: 280px; background: #000; border: 1px solid #333;  box-shadow: 0 2px 10px rgba(0,0,0,0.5);  display: none;}
.has-submenu:hover .submenu {display: block;}
.submenu li {width: 100%;}
.submenu a {padding: 10px 20px; white-space: nowrap;border-bottom: 1px solid #333; font-size:14px;}

.submenu a:hover {background-color: #333;}
/* 三级菜单样式 */
.has-third {position: relative;}
.submenu-third {position: absolute; left: 100%; top: 0; min-width: 200px; background: #000; border: 1px solid #333; box-shadow: 0 2px 10px rgba(0,0,0,0.5);  display: none;}
.submenu-third a {padding: 10px 20px; border-bottom: 1px solid #333; font-size:14px;}
.submenu-third li:last-child a {border-bottom: none;} 
.submenu-third a:hover {background-color: #333;}
/* 悬停时箭头旋转效果 */
.has-submenu:hover > a > i.fa-chevron-down {transform: rotate(180deg);}
.submenu li:hover > a > i.fa-chevron-right {transform: rotate(90deg);}
/* 响应式调整 */
@media (max-width: 992px) {.bottom-nav-inner {margin: 0 5%;} .nav-container {flex-wrap: wrap;} .language-menu {margin: 0 auto; padding: 10px 0;}}
@media (max-width: 768px) {.nav-menu {flex-direction: column;} .main-menu li, .language-menu li {text-align: center;} .has-submenu .submenu, .submenu-third {position: static; display: none; width: 100%;} .has-submenu:hover .submenu {display: block;}}





        .nav-header {
            width: 100%;
            position: fixed;
            top: 0;
            z-index: 9999;
        }

        /* 顶部导航（Logo+电话+联系按钮+搜索框） */
        .top-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 10%;
            background-color: #fff;
            transition: padding 0.3s; /* 适配时过渡更自然 */
        }

        .top-nav-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo img {
            height: 50px;
            transition: height 0.3s; /* 手机端缩小过渡 */
        }

        .separator {
            display: inline-block;
            width: 1px;
            height: 30px;
            background-color: #999;
            margin-left: 20px;
            vertical-align: middle;
        }

        .phone-info {
            font-size: 18px;
            margin-left: 20px;
            transition: font-size 0.3s;
        }

        .phone-info i {
            color: #E70012;
            font-size: 20px;
            font-weight: bold;
        }

        .phone-info span {
            color: #E70012;
            font-size: 20px;
            font-weight: bold;
        }

        .top-nav-right {
            display: flex;
            align-items: center;
            gap: 15px; /* 增加间距，避免拥挤 */
        }

        .contact-btn {
            background-color: #E70012;
            color: #fff;
            border: none;
            padding: 6px 30px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
            transition: padding 0.3s;
        }

        /* 搜索框样式 */
        .search-container {
            padding-left: 10px;
        }

        .search-box {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 2px 6px;
            width: 200px;
            transition: border-color 0.3s, width 0.3s; /* 适配时宽度过渡 */
        }

        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            padding: 4px 0;
            width: 150px;
        }

        .search-box input::placeholder {
            color: #999;
        }

        .search-box i {
            font-size: 16px;
            color: #999;
            cursor: pointer;
            margin-left: 8px;
        }

        .search-box:focus-within {
            border-color: #1976d2;
            box-shadow: 0 0 6px rgba(25, 118, 210, 0.2);
        }

        /* 汉堡菜单按钮（默认隐藏，手机端显示） */
        .hamburger-btn {
            display: none;
            position: absolute;
            top: 20px;
            right: 10%;
            background-color: #000;
            color: #fff;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
            z-index: 10000; /* 确保在最上层，不被遮挡 */
            transition: top 0.3s, right 0.3s;
        }

        /* 底部导航（主菜单） */
        .bottom-nav {
            position: relative;
            z-index: 100;
            background-color: #000;
        }

        .bottom-nav-inner {
            margin: 0 10%;
            transition: margin 0.3s;
        }

        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        /* 菜单列表基础样式 */
        .nav-menu, .submenu, .submenu-third {
            list-style: none !important;
            margin: 0;
            padding: 0;
        }

        .nav-menu {
            display: flex;
        }

        .main-menu {
            flex: 1;
        }

        .nav-menu li {
            position: relative;
        }

        .nav-menu a {
            display: block;
            padding: 15px 20px;
            text-decoration: none;
            color: #fff;
            font-size: 16px;
            transition: color 0.3s ease, background-color 0.3s;
            font-weight: 700;
        }

        /* 箭头样式 */
        .nav-menu a i {
            margin-left: 8px;
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .nav-menu > li > a > i.fa-chevron-down {
            vertical-align: middle;
        }

        .submenu > li > a > i.fa-chevron-right {
            vertical-align: middle;
        }

        .nav-menu a:hover {
            color: #ff4d4d;
        }

        .nav-menu a.active {
            color: #ff0000;
            font-weight: bold;
        }

        /* 二级菜单（默认隐藏，PC端hover显示） */
        .has-submenu .submenu {
            position: absolute;
            left: 0;
            top: 100%;
            min-width: 280px;
            background: #000;
            border: 1px solid #333;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            display: none;
        }

        .has-submenu:hover .submenu {
            display: block;
        }

        .submenu li {
            width: 100%;
        }

        .submenu a {
            padding: 10px 20px;
            white-space: nowrap;
            border-bottom: 1px solid #333;
            font-size: 14px;
        }

        .submenu a:hover {
            background-color: #333;
        }

        /* 三级菜单（默认隐藏，PC端hover显示） */
        .has-third {
            position: relative;
        }

        .submenu-third {
            position: absolute;
            left: 100%;
            top: 0;
            min-width: 200px;
            background: #000;
            border: 1px solid #333;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            display: none;
        }

        .submenu-third a {
            padding: 10px 20px;
            border-bottom: 1px solid #333;
            font-size: 14px;
        }

        .submenu-third li:last-child a {
            border-bottom: none;
        }

        .submenu-third a:hover {
            background-color: #333;
        }

        /* PC端箭头旋转效果 */
        .has-submenu:hover > a > i.fa-chevron-down {
            transform: rotate(180deg);
        }

        .submenu li:hover > a > i.fa-chevron-right {
            transform: rotate(90deg);
        }

        /* 语言切换菜单（PC端） */
        .language-menu {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .language-menu a {
            padding: 15px 10px; /* 调整语言切换间距 */
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
        }

        .language-menu a.active-lang {
            color: #E70012; /* 当前语言高亮 */
        }

        .language-menu span {
            color: #fff;
            margin: 0 5px;
        }

        /*--------------------------------------------------------响应式适配（平板：992px以下）---------------------------------------------------------------------*/
        @media (max-width: 992px) {
            .top-nav {
                padding: 15px 5%;
            }

            .bottom-nav-inner {
                margin: 0 5%;
            }

            .phone-info {
                font-size: 16px;
            }

            .phone-info i, .phone-info span {
                font-size: 18px;
            }

            .search-box {
                width: 180px;
            }

            .hamburger-btn {
                right: 5%;
            }
        }

        /*--------------------------------------------------------响应式适配（手机：768px以下）---------------------------------------------------------------------*/
        @media (max-width: 768px) {
            /* 顶部导航：垂直排列，避免横向溢出 */
            .top-nav {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
                padding: 15px 5%;
            }

            .top-nav-left, .top-nav-right {
                width: 100%;
                justify-content: space-between; /* 左右内容分散对齐 */
            }
            
            .top-nav-right, .phone-info{
                display:none;    
            }

            /* Logo缩小，避免占满屏幕 */
            .logo img {
                height: 40px;
            }

            /* 电话信息：手机端可简化，避免拥挤 */
            .phone-info {
                margin-left: 10px;
                font-size: 14px;
            }

            .phone-info i, .phone-info span {
                font-size: 16px;
            }

            /* 联系按钮：全屏宽度，方便点击 */
            .contact-btn {
                padding: 8px 0;
                width: 45%;
                text-align: center;
            }

            /* 搜索框：全屏宽度，适配手机 */
            .search-box {
                width: 100%;
            }

            /* 显示汉堡菜单按钮 */
            .hamburger-btn {
                display: block;
                top: 15px;
            }

            /* 主菜单：默认隐藏，点击汉堡后显示（垂直排列） */
            #mainNav {
                display: none;
                flex-direction: column;
                width: 100%;
            }

            /* 菜单激活时显示 */
            #mainNav.active {
                display: flex;
            }

            /* 子菜单：手机端默认隐藏，点击父菜单展开（取消绝对定位，改为块级） */
            .has-submenu .submenu, .submenu-third {
                position: static;
                min-width: 100%;
                box-shadow: none;
                border: none;
                display: none; /* 初始隐藏，通过JS控制 */
            }

            /* 子菜单激活时显示 */
            .submenu.active, .submenu-third.active {
                display: block;
            }

            /* 手机端子菜单箭头旋转（通过JS添加active类控制） */
            .has-submenu.active > a > i.fa-chevron-down {
                transform: rotate(180deg);
            }

            .has-third.active > a > i.fa-chevron-right {
                transform: rotate(90deg);
            }

            /* 语言菜单：整合到主菜单末尾，手机端垂直显示 */
            .language-menu {
                display: flex;
                justify-content: center;
                padding: 10px 0;
                border-top: 1px solid #333; /* 与主菜单分隔 */
            }

            /* 移除PC端的导航容器flex布局，改为块级 */
            .nav-container {
                flex-direction: column;
            }
        }


/*--------------------------------------------------------网站底部样式---------------------------------------------------------------------*/
.news-footer-section {height: 27%;width: 100%;background-color: #222;color: white;display: flex;justify-content: center;align-items: center;padding: 30px 0;box-sizing: border-box;}
.news-footer-content {width: 100%;display: flex;justify-content: center;}
.footer-wrapper {width: 90%;display: flex;justify-content: space-between;height: 100%;}
.footer-left {width: 15%;display: flex;flex-direction: column;justify-content: center;}
.footer-logo {font-size: 32px;color: white;display: inline-block;}
.qrcode-container {display: flex;gap: 20px;}
.qrcode-item {display: flex;flex-direction: column;align-items: center;}
.qrcode-logo-img{width:180px}
.qrcode-img {width: 80px;height: auto;object-fit: cover;border: 2px solid #444;border-radius: 8px;margin-bottom:3%;}
.qrcode-text {font-size: 14px;color: #ccc;text-align: center;}
.footer-middle {width: 70%;display: flex;justify-content: flex-start;padding: 0 20px;gap: 50px;}
.product-category {display: flex;flex-direction: column;  width: 33%; }
.category-title {font-size: 18px;color: #fff;margin-bottom: 15px;position: relative;padding-bottom: 8px;}
.category-title::after {content: '';position: absolute;left: 0;bottom: 0;width: 260px;height: 1px;background-color: #fff;}
.product-list {list-style: none;}
.product-list li {margin-bottom: 10px;}
.product-list a {color: #ccc;text-decoration: none;font-size: 14px;transition: color 0.3s ease;}
.product-list a:hover {color: #E70012;}


.footer-right {width: 35%;display: flex;flex-direction: column; align-items: flex-start;text-align: left;padding-left:30px}
.contact-title {font-size: 18px;color: #fff;margin-bottom: 15px;position: relative;padding-bottom: 8px;}
.contact-title::after {content: '';position: absolute;left: 0;bottom: 0;width: 260px;height: 1px;background-color: #fff;}
.contact-list {list-style: none;width: 100%;}
.contact-item {display: flex;align-items: flex-start;justify-content: flex-start;;margin-bottom: 12px;color: #ccc;font-size: 14px;}
.contact-item i {color: #fff;margin-left: 10px;margin-top: 3px;width: 20px;}


@media (max-width: 1280px) {
    .category-title {font-size: 14px;color: #fff;margin-bottom: 15px;position: relative;padding-bottom: 8px;}
    .category-title::after {content: '';position: absolute;left: 0;bottom: 0;width: 200px;height: 1px;background-color: #fff;}
    .product-list a {color: #ccc;text-decoration: none;font-size: 10px;transition: color 0.3s ease;}
    .contact-title {font-size: 14px;color: #fff;margin-bottom: 15px;position: relative;padding-bottom: 8px;}
    .contact-title::after {content: '';position: absolute;left: 0;bottom: 0;width: 200px;height: 1px;background-color: #fff;}
    .contact-item {display: flex;align-items: flex-start;justify-content: flex-start;;margin-bottom: 12px;color: #ccc;font-size: 10px;}
    .qrcode-text {font-size: 10px;color: #ccc;text-align: center;}
    .qrcode-img{width: 50px;height: auto;object-fit: cover;border: 2px solid #444;border-radius: 8px;margin-bottom:3%;}
    .qrcode-logo-img{width:130px}
}

@media (max-width: 768px) {
    .news-footer-section {height: auto;padding: 20px 5%;}
    .footer-wrapper {flex-direction: column;height: auto;gap: 30px;}
    .footer-left,
    .footer-middle,
    .footer-right {width: 100%;}
    .footer-middle {justify-content: space-between;}
    .news-header-title {font-size: 20px;}
	.footer-right {display: flex;justify-content: flex-end;text-align: right;}
}

@media (max-width: 576px) {
    .footer-middle {flex-direction: column;gap: 20px;}
    .qrcode-container {justify-content: center;}
    .hidden-xs {display: none !important;}
}

/*--------------------------------------------------------切换图片---------------------------------------------------------------------*/

/*--------------------------------------------------------产品展示---------------------------------------------------------------------*/
#services {background-color: #000;width: 100%;padding: 0;margin: 0;overflow: hidden;padding-top: 20px;box-sizing: border-box;}
.services-container {width: 100%;height: 100%;display: flex;flex-direction: column;}
.service-large-image {height: 70%;width: 100%;display: flex;justify-content: center;align-items: center;padding: 30px 0 0;box-sizing: border-box;}
.service-large-image img {height: 100%;transition: opacity 0.3s ease, transform 0.3s ease;max-width: 100%;object-fit: contain;}
.service-thumbs {height: 30%;width: 100%;display: flex;justify-content: center;align-items: center;padding: 20px 5% 30px;gap: 15px;box-sizing: border-box;overflow-x: auto;scrollbar-width: thin;}
/* 缩略图 */
.thumb-item {flex: 0 0 auto;max-width: 180px;cursor: pointer;position: relative;transition: all 0.3s ease;margin: 0 10px;}
.thumb-item img {width: 100%;height: 120px;object-fit: cover;border-radius: 8px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);transition: all 0.3s ease;border: 2px solid transparent;}
.thumb-item span {position: absolute;bottom: -35px;left: 50%;transform: translateX(-50%);color: #fff;font-size: 13px;white-space: nowrap;opacity: 0.8;transition: all 0.3s ease;}
/* 选中状态 */
.thumb-item.active img,
.thumb-item:hover img {transform: translateY(-8px);border-color: #E70012;box-shadow: 0 8px 20px rgba(231, 0, 18, 0.3);}
.thumb-item.active span,
.thumb-item:hover span {opacity: 1;color: #E70012;transform: translateX(-50%) translateY(-5px);}

/* 图片切换动画 */
.service-large-image img.fade-out {opacity: 0;transform: scale(0.95);}
.service-large-image img.fade-in {opacity: 1;transform: scale(1);}

/* 服务响应式 */
@media (max-width: 992px) {
    .service-large-image img {width: 90%;}
    .thumb-item {max-width: 140px;}
    .thumb-item img {height: 90px;}
}

@media (max-width: 768px) {
    .service-thumbs {flex-wrap: wrap;height: auto;padding: 20px 5% 40px;justify-content: flex-start;}
    .service-large-image {height: 60%;}
    .thumb-item { flex: 1 0 40%;max-width: none;margin-bottom: 30px;}
    .thumb-item img {height: 80px;}
}

@media (max-width: 576px) {
    .service-large-image {height: 50%;padding-top: 20px;}
    .service-large-image img {width: 95%;}
    .thumb-item {flex: 1 0 100%;max-width: 200px;}
}

/*--------------------------------------------------------图片切换---------------------------------------------------------------------*/
/* 基础样式保持不变 */
.content-auto {
    content-visibility: auto;
}
.glide__slide {
    display: flex;
    align-items: flex-start; /* 改为顶部对齐，配合margin-top控制距离 */
    justify-content: center; /* 水平居中 */
}
.glide__slide img {
    max-width: 100%;
    object-fit: contain;
    margin-top: 50px;
        padding:0 10%;
}
/* 箭头和指示器样式保持不变 */
.glide__arrow {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    z-index: 10; /* 确保箭头在图片上方 */
}
.glide__arrow:hover {background-color: rgba(22, 93, 255, 0.8);}
.glide__bullet {width: 0.75rem;height: 0.75rem;background-color: rgba(255, 255, 255, 0.5);transition: all 0.3s;}
.glide__bullets {position: absolute;bottom: 50px;left: 50%; transform: translateX(-50%); z-index: 10; padding: 0;margin: 0;}
.glide__bullet--active {background-color: white;width: 2rem;border-radius: 0.5rem;}

/* 桌面端样式：全屏背景 */
@media (min-width: 768px) {
    .glide-container {background-color: #000;overflow: hidden;}
    .glide {width: 100%;}
    .glide__slide {background-color: transparent;}
}

/* 移动端样式：保持适配 */
@media (max-width: 767px) {
    .glide-container {background-color: #000;}
    .glide {background-color: transparent;width: 100%;}
    .glide__slide {
        background-color: transparent;
    }
}
/*--------------------------------------------------------图片选择---------------------------------------------------------------------*/
    /* 主容器样式：替代body的布局作用 */
    .app-container {
      background-color: #000;
      color: #fff;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    /* 大图容器 */
    .main-img-container {
      position: relative; /* 改为相对定位，跟随头部下方 */
      padding: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: calc(100vh - 140px - 30px); /* 减去头部高度和间距 */
    }

    .main-img {
      max-width: 100%;
      height:calc(100vh - 380px);

      object-fit: contain;
      margin-bottom: 20px; /* 大图与文字的间距 */
    }

    /* 文字区域（大图下方） */
    .main-text {
      position: relative; /* 改为相对定位，跟随大图下方 */
      text-align: center;
      width: 80%;
      z-index: 10;
      margin-bottom: 20px; /* 文字与小图的间距 */
    }

    .company {
      font-size: 14px;
      color: #aaa;
      margin-bottom: 4px;
    }

    .project {
      font-size: 18px;
      color: #fff;
      font-weight: bold;
    }

    /* 小图容器 */
    .thumbnails {
      position: relative; /* 改为相对定位，跟随文字下方 */
      display: flex;
      gap: 15px;
      z-index: 10;
      margin-top: 10px;
    }

    .thumbnail1 {
      width: 80px;
      height: 70px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
      border-bottom: 2px solid transparent;
    }

    .thumbnail1 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .thumbnail1.active {
      border-bottom: 2px solid red;
    }

    .thumbnail1:hover:not(.active) {
      border-bottom: 2px solid rgba(255, 0, 0, 0.5);
    }