/* =====================================================
   公共样式 style.css —— 各页面共用的全局样式
   1. 全局基础
   2. 导航条（含手机端汉堡菜单/下拉面板）
   3. 轮播 / 内页 banner 公共（遮罩、文字）
   4. 区块标题通用
   5. 底部1
   6. 底部2
   7. 滚动进场动画
   8. 公共响应式
   各页面独立的样式请写在页面自身的 <style> 标签中。
   ===================================================== */

/* ============ 全局基础 ============ */
:root {
    --primary: #015C9D;
    --text: #333333;
    --text-light: #666666;
    --muted: #999999;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 根字号 10px，1rem = 10px，页面所有尺寸一律用 rem */
html {
    font-size: 10px;
}
body {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--text);
    background: #ffffff;
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: inherit;
}
ul,
ol {
    list-style: none;
}
img {
    display: block;
    max-width: 100%;
}
button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}
/* 页面最大宽度 1920px（扣除滚动条约 15px），居中 */
.page {
    max-width: calc(192rem - 1.5rem);
    margin: 0 auto;
    position: relative;
}
/* 主体宽度 1400px，居中（无左右内边距） */
.main-wrap {
    width: 140rem;
    max-width: 100%;
    margin: 0 auto;
}
.section {
    padding: 8rem 0;
}

/* ============ 导航条 ============ */
.nav {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 100%;
    max-width: calc(192rem - 1.5rem);
    height: 10rem;
    transition: background-color .4s ease, box-shadow .4s ease;
}
.nav.scrolled {
    background: #ffffff;
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, .08);
}
.nav-inner {
    width: 140rem;
    max-width: 100%;
    margin: 0 auto;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    position: relative;
    width: 20rem;
    height: 6.5rem;
    flex-shrink: 0;
    overflow: hidden;
    display: block;
}
.logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .4s ease;
}
.logo .logo-color {
    opacity: 0;
}
.nav.scrolled .logo .logo-default {
    opacity: 0;
}
.nav.scrolled .logo .logo-color {
    opacity: 1;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
.nav-menu {
    display: flex;
    align-items: center;
}
.nav-menu > li {
    position: relative;
}
.nav-menu > li > a {
    display: block;
    padding: 0 1.4rem;
    font-size: 1.6rem;
    line-height: 10rem;
    color: #ffffff;
    transition: color .3s ease;
}
.nav.scrolled .nav-menu > li > a {
    color: #333333;
}
/* 激活项仅在悬浮态（scrolled 白底）时变主题色，透明态下保持白色 */
.nav-menu > li > a:hover,
.nav.scrolled .nav-menu > li > a:hover,
.nav.scrolled .nav-menu > li.active > a {
    color: var(--primary);
}
/* 二级下拉 */
.nav-menu .sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    min-width: 14rem;
    background: #ffffff;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, .12);
    padding: 0.8rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}
.nav-menu > li:hover .sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-menu .sub a {
    display: block;
    padding: 1rem 1.6rem;
    font-size: 1.4rem;
    text-align: center;
    color: #333333;
    transition: all .3s ease;
}
.nav-menu .sub a:hover {
    color: #ffffff;
    background: var(--primary);
}
/* 语言选择：图标 + Language，悬停展开下拉（同二级导航样式） */
.nav-lang {
    position: relative;
}
.lang-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.5rem;
    line-height: 10rem;
    color: #ffffff;
    cursor: pointer;
    transition: color .3s ease;
}
.nav.scrolled .lang-trigger {
    color: #333333;
}
.lang-trigger:hover {
    color: var(--primary);
}
.lang-icon {
    width: 1.8rem;
    height: 1.8rem;
    fill: currentColor;
}
.lang-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    min-width: 12rem;
    background: #ffffff;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, .12);
    padding: 0.8rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}
.nav-lang:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.lang-dropdown a {
    display: block;
    padding: 1rem 1.6rem;
    font-size: 1.4rem;
    text-align: center;
    color: #333333;
    transition: all .3s ease;
}
.lang-dropdown a:hover {
    color: #ffffff;
    background: var(--primary);
}
/* 汉堡按钮（手机端） */
.hamburger {
    display: none;
    width: 4rem;
    height: 4rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.hamburger span {
    display: block;
    width: 2.8rem;
    height: 0.3rem;
    background: #ffffff;
    transition: all .3s ease;
}
.nav.scrolled .hamburger span {
    background: #333333;
}
.hamburger.active span:nth-child(1) {
    transform: translateY(0.9rem) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-0.9rem) rotate(-45deg);
}
/* 手机端下拉面板 */
.mobile-panel {
    position: fixed;
    top: 10rem;
    left: 50%;
    transform: translateX(-50%) translateY(-2rem);
    z-index: 99;
    width: 140rem;
    max-width: 100%;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .15);
    padding: 2rem 2rem 3rem;
    opacity: 0;
    visibility: hidden;
    transition: all .35s ease;
}
.mobile-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.m-menu > li {
    position: relative;
    border-bottom: 0.1rem solid #f0f0f0;
}
.m-menu > li > a {
    display: block;
    padding: 1.4rem 0;
    font-size: 1.6rem;
    color: #333333;
}
.m-has-sub > a {
    padding-right: 3rem;
}
.m-arrow {
    position: absolute;
    right: 0.6rem;
    top: 2rem;
    width: 1.4rem;
    height: 1.4rem;
    border-right: 0.2rem solid #999999;
    border-bottom: 0.2rem solid #999999;
    transform: rotate(45deg);
    transition: transform .3s ease;
}
.m-has-sub.open .m-arrow {
    transform: rotate(225deg);
}
.m-sub {
    display: none;
    padding: 0 0 1.2rem 2rem;
}
.m-has-sub.open .m-sub {
    display: block;
}
.m-sub a {
    display: block;
    padding: 1rem 0;
    font-size: 1.4rem;
    color: #666666;
}
.m-sub a:hover {
    color: var(--primary);
}
/* 手机端语言选择列表 */
.m-lang {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 0.1rem solid #f0f0f0;
}
.m-lang a {
    font-size: 1.5rem;
    color: #666666;
    transition: color .3s ease;
}
.m-lang a:hover {
    color: var(--primary);
}

/* ============ 轮播 / 内页 banner 公共 ============ */
/* 页面自身的 <style> 中负责设置 .banner 的高度（首页 70rem，内页 35rem 等） */
.banner {
    position: relative;
}
.banner .swiper {
    width: 100%;
    height: 100%;
}
.banner .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}
/* 蓝色遮罩 */
.slide-overlay {
    position: absolute;
    inset: 0;
    /*background: rgba(1, 92, 157, .45);*/
}
.slide-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
    text-align: center;
    color: #ffffff;
}
.slide-title {
    font-size: 4.2rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin-bottom: 2rem;
}
.slide-sub {
    font-size: 1.8rem;
    letter-spacing: 0.3rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 3.6rem;
}
.slide-btn {
    display: inline-block;
    padding: 1.2rem 4rem;
    border: 0.2rem solid #ffffff;
    border-radius: 2.5rem;
    font-size: 1.6rem;
    color: #ffffff;
    transition: all .4s ease;
}
.slide-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
}
.banner .swiper-pagination {
    bottom: 3rem;
}
.banner .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    opacity: .6;
    transition: all .3s ease;
}
.banner .swiper-pagination-bullet-active {
    width: 3rem;
    border-radius: 0.5rem;
    opacity: 1;
}


/* ============ 内页 banner（单图，非轮播） ============ */
.sub-banner {
    position: relative;
    height: 60rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sub-banner .sub-banner-bg {
    position: absolute;
    inset: 0;
    background: no-repeat center / cover;
}
.sub-banner .slide-title {
    margin-bottom: 2.4rem;
}

/* ============ banner 上的子菜单（放到 banner 图上） ============ */
.sub-nav {
    position: absolute;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%);
    z-index: 3;
}
.sub-nav ul {
    display: flex;
    align-items: center;
}
.sub-nav li {
    position: relative;
}
.sub-nav a {
    position: relative;
    display: block;
    height: 7rem;
    line-height: 7rem;
    padding: 0 3rem;
    font-size: 1.6rem;
    color: #ffffff;
    transition: color .3s ease;
}
/* 悬停 / 激活：底部白色下划线从左往右展开 */
.sub-nav a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0.3rem;
    background: #ffffff;
    transition: all .3s ease;
}
.sub-nav a:hover::after,
.sub-nav li.active a::after {
    left: 10%;
    width: 80%;
}
.sub-nav a:hover,
.sub-nav li.active a {
    color: #ffffff;
}


/* ============ 区块标题通用 ============ */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4rem;
}
.section-title {
    position: relative;
    padding-left: 1.6rem;
    font-size: 3rem;
    font-weight: bold;
    color: #333333;
}
.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem;
    height: 3rem;
    background: var(--primary);
}
.more-btn {
    display: inline-block;
    padding: 0.9rem 2.8rem;
    border: 0.1rem solid var(--primary);
    border-radius: 2.5rem;
    font-size: 1.5rem;
    color: var(--primary);
    transition: all .3s ease;
}
.more-btn:hover {
    background: var(--primary);
    color: #ffffff;
}

/* ============ 底部1 ============ */
.footer1 {
    background: #303030;
    color: #ffffff;
    padding: 3.5rem 0 4.5rem;
}
.footer1-inner {
    min-height: 25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}
.f-company {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 3.3rem;
}
.f-contact {
    display: flex;
    gap: 6rem;
    margin-bottom: 3.9rem;
}
.c-label {
    font-size: 1.4rem;
    color: #999999;
    margin-bottom: 0.6rem;
}
.c-value {
    font-size: 1.6rem;
    color: #ffffff;
}
.f-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}
/* 菜单项之间的小竖线分隔 */
.f-nav li + li {
    padding-left: 2.5rem;
    border-left: 0.1rem solid rgba(255, 255, 255, .3);
}
.f-nav a {
    font-size: 1.5rem;
    color: #cccccc;
    transition: color .3s ease;
}
.f-nav a:hover {
    color: var(--primary);
}
.footer-right {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-shrink: 0;
}
.f-share {
    text-align: right;
}
.f-share p {
    font-size: 1.4rem;
    color: #999999;
    line-height: 2.2;
}
.share-icons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 0.8rem;
}
.share-icons a {
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
}
.share-icons img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.f-qr {
    width: 12rem;
    height: 12rem;
    flex-shrink: 0;
}
.f-qr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============ 底部2 ============ */
.footer2 {
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(29, 29, 29, 1);
    color: #999999;
    font-size: 1.4rem;
}
.f2-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.f2-text a {
    color: #999999;
}
.f2-text a:hover {
    color: #ffffff;
}

/* ============ 滚动进场动画 ============ */
.js .reveal {
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity .8s ease, transform .8s ease;
}
.js .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.js .reveal-r {
    opacity: 0;
    transform: translateX(8rem);
    transition: opacity 1s ease, transform 1s ease;
}
.js .reveal-r.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* ============ 公共响应式 ============ */

/* 平板（<1400px）：导航微调 */
@media (max-width: 1399px) and (min-width: 1024px) {
    .nav-menu > li > a {
        padding: 0 1rem;
        font-size: 1.5rem;
    }
    .nav-right {
        gap: 1.5rem;
    }
}

/* 手机端（<1024px）：汉堡菜单 + 底部1 纵向排列 */
@media (max-width: 1023px) {
    .main-wrap,
    .nav-inner {
        padding: 0 1.5rem;
    }
    .nav {
        width: 100%;
    }
    .mobile-panel {
        width: 100%;
    }
    .nav-menu,
    .nav-lang {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    /* 手机端导航条：高度 110px → 70px，logo/汉堡按钮按比例缩小 */
    .nav,
    .nav-inner {
        height: 7rem;
    }
    .logo {
        width: 12.7rem;
        height: 4.1rem;
    }
    .hamburger {
        width: 2.6rem;
        height: 2.6rem;
        gap: 0.4rem;
    }
    .hamburger span {
        width: 1.8rem;
        height: 0.2rem;
    }
    .hamburger.active span:nth-child(1) {
        transform: translateY(0.6rem) rotate(45deg);
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-0.6rem) rotate(-45deg);
    }
    .mobile-panel {
        top: 7rem;
    }
    /* 手机端导航条：初始即为白底（不透明悬浮在 banner 上） */
    .nav {
        background: #ffffff;
        box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, .08);
    }
    .nav .logo .logo-default {
        opacity: 0;
    }
    .nav .logo .logo-color {
        opacity: 1;
    }
    .nav .hamburger span {
        background: #333333;
    }
    /* 手机端 banner 从导航下方开始（不再被导航压住） */
    .banner {
        margin-top: 7rem;
    }
    
    .sub-banner {
        height: 30rem;
    }
    .sub-banner .slide-title {
        font-size: 3rem;
    }
    .sub-banner .slide-sub {
        font-size: 1.6rem;
    }
    
    /* 子菜单在手机端变为 banner 底部的白底横条 */
    .sub-nav {
        position: absolute;
        left: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        background: #ffffff;
        border-bottom: 0.1rem solid #dddddd;
        overflow-x: auto;
    }
    .sub-nav ul {
        justify-content: space-around;
    }
    .sub-nav a {
        height: 5rem;
        line-height: 5rem;
        padding: 0 1.5rem;
        font-size: 1.4rem;
        color: #333333;
        white-space: nowrap;
    }
    /* 菜单项之间的小竖线分隔 */
    .sub-nav li + li a::before {
        content: '';
        width: 0;
        height: 0;
    }
    .sub-nav a::after {
        background: var(--primary);
    }
    .sub-nav a:hover,
    .sub-nav li.active a {
        color: var(--primary);
    }
    
    .footer1-inner {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 1rem;
        gap: 3rem;
    }
    .footer-right {
        width: 100%;
        justify-content: center;
    }
}

/* 小屏（<768px） */
@media (max-width: 767px) {
    .main-wrap,
    .nav-inner {
        padding: 0 1.5rem;
    }
    
    .sub-banner {
        height: 24rem;
    }
    .sub-banner .slide-title {
        font-size: 2.2rem;
        letter-spacing: 0.1rem;
    }
    .sub-banner .slide-sub {
        font-size: 1.3rem;
        letter-spacing: 0.1rem;
    }

    .section {
        padding: 5rem 0;
    }
    .f-contact {
        flex-direction: column;
        gap: 1.5rem;
    }
    .f-nav {
        gap: 1.6rem;
    }
    .footer-right {
        gap: 3rem;
    }
    .f-qr {
        width: 10rem;
        height: 10rem;
    }
    .share-icons a {
        width: 3.4rem;
        height: 3.4rem;
    }
    .footer2 {
        height: auto;
        padding: 2rem 1rem;
    }
    .f2-text {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ============ 产品卡片（公共，首页 / 产品列表共用） ============ */
/* 列表的列数由各页面自行控制（如 .pro-grid 4 列、.pl-grid 3 列） */
.pro-item {
    border: 0.1rem solid #eeeeee;
    background: #ffffff;
    transition: box-shadow .4s ease;
}
.pro-item:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1);
}
.pro-img {
    aspect-ratio: 115 / 86;
    overflow: hidden;
}
.pro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.pro-item:hover .pro-img img {
    transform: scale(1.1);
}
.pro-titlebar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1rem 1.6rem;
    transition: background-color .4s ease;
}
.pro-item:hover .pro-titlebar {
    background: var(--primary);
}
.pro-title {
    font-size: 1.6rem;
    color: #333333;
    transition: color .4s ease;
}
.pro-item:hover .pro-title {
    color: #ffffff;
}
.pro-view svg {
    display: block;
    width: 2rem;
    height: 2rem;
    fill: var(--primary);
    transition: fill .4s ease;
}
.pro-item:hover .pro-view svg {
    fill: #ffffff;
}
/* 查看图标下的横线：悬停时向左延长至整行（两侧留 1rem） */
.pro-titlebar::after {
    content: '';
    position: absolute;
    right: 1rem;
    bottom: 0.7rem;
    width: 2rem;
    height: 0.2rem;
    background: var(--primary);
    transition: width .5s ease, background-color .4s ease;
}
.pro-item:hover .pro-titlebar::after {
    width: calc(100% - 2rem);
    background: #ffffff;
}



/* 分页 */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 5rem;
}
.pagination a,
.pagination span {
    display: block;
    min-width: 4rem;
    height: 4rem;
    line-height: 4rem;
    padding: 0 1.4rem;
    text-align: center;
    font-size: 1.5rem;
    color: #333333;
    border: 0.1rem solid #eeeeee;
    background: #ffffff;
    transition: all .3s ease;
}
.pagination .active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}
.pagination a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}


/* ============ 右侧悬浮工具组（右下角） ============ */
.float-tools {
    position: fixed;
    right: 3%;
    bottom: 10%;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.float-tool {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 7rem;
    background: var(--primary);
    color: #ffffff;
    border-radius: 0.6rem;
    transition: background-color .3s ease;
}
.float-tool:hover {
    background: #014a7e;
}
.float-tool svg {
    width: 2.2rem;
    height: 2.2rem;
    fill: #ffffff;
}
.float-label {
    font-size: 1.2rem;
    margin-top: 0.4rem;
}
/* 服务电话：PC 版 hover 时向左展开电话号码 */
.float-tel .float-tel-num {
    position: absolute;
    right: calc(100% + 1rem);
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary);
    color: #ffffff;
    font-size: 1.4rem;
    white-space: nowrap;
    padding: 0.8rem 1.6rem;
    border-radius: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}
.float-tel:hover .float-tel-num {
    opacity: 1;
    visibility: visible;
}
/* 小屏（<768px） */
@media (max-width: 1024px) {
    /* 悬浮工具组：手机端仅显示图标 */
    .float-tool {
        width: 4.8rem;
        height: 4.8rem;
    }
    .float-label {
        display: none;
    }
    .float-tel .float-tel-num {
        display: none;
    }
}