/* ==================== 公共样式 ==================== */
:root{
    --brand:#0068B7;
    --brand-dark:#0a2b4f;
    --text:#1a1a1a;
    --muted:#666;
    --bg:#fff;
    --bg-soft:#f7f7f7;
    --line:#e9edf2;
    --container:1600px;
    --radius:.1rem;
    --shadow:0 .1rem .3rem rgba(0,0,0,.08);
}

html{
    font-size:62.5%; /* 10px = 1rem 基准，由JS动态调整 */
}
body{
    margin:0;
    color:var(--text);
    font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6;
    background:var(--bg);
    font-size:1.6rem; /* 默认16px */
}

/* REM基准值由JS动态计算，无需媒体查询 */

*{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

.container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 2rem;
}

/* ==================== 按钮样式 ==================== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:1rem 1.8rem;
    border-radius:999px;
    border:1px solid transparent;
    cursor:pointer;
    user-select:none;
    transition:transform .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
    white-space:nowrap;
    position:relative;
    overflow:hidden;
}
.btn::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    transform:translate(-50%,-50%);
    transition:width .5s ease,height .5s ease;
}
.btn:hover::before{width:30rem;height:30rem}
.btn:active{transform:translateY(.2rem) scale(.97)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1rem 2rem rgba(0,107,151,.22)}
.btn-primary:hover{background:#017fb2;transform:translateY(-.3rem);box-shadow:0 1.4rem 2.8rem rgba(0,107,151,.3)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:#fff}
.btn-lg{padding:1.2rem 2.2rem;font-size:1.6rem}

/* ==================== 通用区块 ==================== */
.section{padding:7rem 0;position:relative}


/* ==================== 头部样式 ==================== */
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:#fff;
    padding-bottom:.1rem;
}
.header-inner{
    height:8rem;
    display:flex;
    align-items:center;
    gap:0;
    justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;transition:transform .3s ease}
.brand:hover{transform:scale(1.03)}
.brand-logo{width:19.2rem;height:6rem;object-fit:contain}
.site-nav{
    display:flex;
    align-items:center;
    gap:4.5rem;
}
/* ========== 导航链接动画 ========== */
.nav-link{
    font-size:1.6rem;
    color:#1a1a1a;
    padding:.8rem 0;
    position:relative;
    font-weight:400;
}
.nav-link:not(.has-dropdown)::after{
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    width:0;
    height:.2rem;
    background:linear-gradient(90deg,#0068B7,#0089D7);
    transition:width .35s cubic-bezier(.4,0,.2,1),left .35s cubic-bezier(.4,0,.2,1);
}
.nav-link:not(.has-dropdown):hover::after,.nav-link:not(.has-dropdown).is-active::after{width:100%;left:0}
.nav-link.is-active,.nav-link:hover{color:#006b97;font-weight:bold}
.nav-link.has-dropdown::after{
    content:"";
    display:inline-block;
    width:0;height:0;
    margin-left:.6rem;
    vertical-align:middle;
    border-top:.5rem solid currentColor;
    border-left:.4rem solid transparent;
    border-right:.4rem solid transparent;
}
.nav-item{position:relative}
.nav-item .nav-link::after{
    content:"";
    display:inline-block;
    width:0;height:0;
    margin-left:.6rem;
    vertical-align:middle;
    border-top:.5rem solid currentColor;
    border-left:.4rem solid transparent;
    border-right:.4rem solid transparent;
}
.nav-item:hover .nav-link{color:#006b97}
.dropdown{
    position:absolute;
    top:calc(100% + .1rem);
    left:50%;
    transform:translateX(-50%) translateY(-1rem);
    min-width:16rem;
    background:#fff;
    border-radius:.8rem;
    box-shadow:0 1rem 3rem rgba(0,0,0,.12);
    border:1px solid rgba(0,0,0,.08);
    padding:.8rem 0;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s,visibility .25s,transform .25s;
    z-index:100;
}
.nav-item:hover .dropdown{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}
.lang-switch:hover .dropdown{
    opacity:1;
    visibility:visible;
}
.dropdown-link{
    display:block;
    padding:1rem 1.8rem;
    font-size:1.4rem;
    color:#333;
    transition:all .25s ease;
    position:relative;
}
.dropdown-link::before{
    content:"";
    position:absolute;
    left:.8rem;
    top:50%;
    width:0;
    height:0;
    border-left:.4rem solid #0068B7;
    border-top:.3rem solid transparent;
    border-bottom:.3rem solid transparent;
    opacity:0;
    transform:translateY(-50%) translateX(-.5rem);
    transition:all .25s ease;
}
.dropdown-link:hover{
    background:#f5f7fa;
    color:#006b97;
    padding-left:2.6rem;
}
.dropdown-link:hover::before{opacity:1;transform:translateY(-50%) translateX(0)}
.dropdown-lang{
    left:auto;
    right:0;
    transform:none;
    top:calc(100% + .8rem);
}
.header-actions{
    display:flex;
    align-items:center;
    gap:2.5rem;
    margin-left:3rem;
}
.lang-switch{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:1.4rem;
    color:#333;
    cursor:pointer;
    user-select:none;
    position:relative;
}
.lang-switch img{width:1.6rem;height:1.6rem}
.lang-switch span::after{
    content:"";
    display:inline-block;
    width:0;height:0;
    margin-left:.5rem;
    vertical-align:middle;
    border-top:.4rem solid #666;
    border-left:.35rem solid transparent;
    border-right:.35rem solid transparent;
}
.header-phone{
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    color:#006b97;
    font-size:1.6rem;
    font-weight:500;
    border:.2rem solid #006b97;
    border-radius:2.4rem;
    padding:.7rem 1rem;
    transition:all .3s ease;
    position:relative;
    overflow:hidden;
}
.header-phone::after{
    content:"";
    position:absolute;
    inset:0;
    background:#006b97;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
    z-index:-1;
}
.header-phone:hover{color:#fff}
.header-phone:hover::after{transform:scaleX(1)}
.header-phone img{width:2.4rem;height:2.4rem}

.nav-toggle{
    display:none;
    width:4.4rem;
    height:4.4rem;
    border-radius:1rem;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
    align-items:center;
    justify-content:center;
    padding:0;
}
.nav-toggle span{
    display:block;
    width:2rem;
    height:.2rem;
    background:#222;
    border-radius:.2rem;
    margin:.3rem 0;
}

/* ==================== 头部响应式 ==================== */
@media (max-width:980px){
    .nav-toggle{display:inline-flex}
    .site-nav{
        position:fixed;
        top:8rem;
        left:0;
        right:0;
        background:#fff;
        border-bottom:1px solid rgba(0,0,0,.06);
        padding:1.4rem 2rem 1.8rem;
        display:none;
        flex-direction:column;
        gap:1.2rem;
    }
    .site-header.is-open .site-nav{display:flex}
    /* 移动端：隐藏电话，保留语言切换和汉堡 */
    .header-actions{
        display:flex;
        align-items:center;
        gap:2.5rem;
        margin-left:auto;
    }
    .header-phone{display:none}
    /* 汉堡菜单：去掉边框背景，纯三条杠均匀分布 */
    .nav-toggle{
        width:4.8rem;height:4rem;
        border:none;
        background:transparent;
        border-radius:0;
        padding:.5rem 0;
        flex-direction:column;
        justify-content:space-around;
    }
    .nav-toggle span{width:2.4rem;height:.26rem;margin:0;border-radius:.13rem}
    .nav-link.is-active::after,.nav-link.has-dropdown::after,.nav-item .nav-link::after{display:none}
    .dropdown{
        position:static;
        transform:none;
        box-shadow:none;
        border:none;
        padding:0 0 0 1.6rem;
        opacity:1;
        visibility:visible;
        background:transparent;
        display:none;
    }
    .nav-item:hover .dropdown,.nav-item.is-open .dropdown{display:block}
    .dropdown-link{
        padding:.8rem 1.2rem;
        color:#555;
    }
    .dropdown-link:hover{background:transparent;color:#006b97}
    /* 语言下拉移动端也显示 */
    .lang-switch .dropdown{
        top:calc(100% + .4rem);
        right:0;
        left:auto;
        position:absolute;
        background:#fff;
        border-radius:.6rem;
        box-shadow:0 .8rem 2rem rgba(0,0,0,.12);
        border:1px solid rgba(0,0,0,.08);
        padding:.5rem 0;
        min-width:10rem;
        z-index:200;
        transform-origin:top;
        animation:langDropIn .25s ease both;
    }
    @keyframes langDropIn{
        from{opacity:0;transform:scaleY(.85) translateY(-.5rem)}
        to{opacity:1;transform:scaleY(1) translateY(0)}
    }
    .lang-switch:hover .dropdown,
    .lang-switch.is-open .dropdown{display:block}
    .lang-switch .dropdown a{
        padding:.7rem 1.4rem;
        font-size:1.3rem;
        color:#333;
        transition:background .2s,color .2s;
    }
    .lang-switch .dropdown a:hover{
        background:#f5f7fa;
        color:#006b97;
    }
}
@media (max-width:520px){
    .container{padding:0 1.4rem}
    .header-inner{height:7rem}
    .site-nav{top:7rem}
}


/* ==================== 底部样式 ==================== */
.site-footer{
    background:rgba(31, 31, 39, 1);
    color:rgba(102, 102, 102, 1);
    font-size:1.3rem;
}
.footer-top{
    min-height:10rem;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand img{width:auto;transition:transform .3s ease;filter:brightness(1)}
.footer-brand img:hover{transform:scale(1.05);filter:brightness(1.2)}
.footer-nav{
    display:flex;
    gap:4rem;
}
.footer-nav a{
    color:#fff;
    font-size:1.5rem;
    transition:color .25s ease;
    position:relative;
}
.footer-nav a::after{
    content:"";
    position:absolute;
    bottom:-.2rem;
    left:0;
    width:0;
    height:.1rem;
    background:#0068B7;
    transition:width .3s ease;
}
.footer-nav a:hover{color:#0068B7}
.footer-nav a:hover::after{width:100%}
.footer-middle{
    min-height:18rem;
    padding:2rem 0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:3rem;
}
.footer-info{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
}
.footer-info-item .footer-label{
    color:rgba(255,255,255,.5);
    margin-bottom:.4rem;
    display:block;
}
.footer-info-item p{margin:0;color:rgba(206, 206, 206, 1);line-height:1.7;font-size:1.4rem}
.footer-qr{
    display:flex;
    gap:1.6rem;
}
.qr-item{
    width:8rem;height:8rem;
    background:#fff;
    border-radius:.4rem;
    transition:transform .4s ease,box-shadow .4s ease;
    cursor:pointer;
}
.qr-item:hover{
    transform:translateY(-.8rem) scale(1.08);
    box-shadow:0 1.2rem 3rem rgba(0,0,0,.3);
}
.qr-item img{width:100%;height:100%}
.footer-links-row{
    padding:1.6rem 0;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:2.4rem;
}
.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:2rem;
}
.footer-links a,.footer-copy{
    color:rgba(255,255,255,.45);
    font-size:1.2rem;
    transition:color .25s,transform .25s ease;
    display:inline-block;
}
.footer-links a:hover{color:#fff;translateX(.3rem)}

/* ==================== 底部响应式 ==================== */
@media (max-width:980px){
    /* 联系我们区域 - 移动端紧凑居中 */
    .contact-strip{
        padding:2.5rem 0;
        background:#f7f9fc;
    }
    .contact-inner{
        flex-direction:column-reverse !important;
        text-align:center;
        align-items:center;
        gap:1.5rem !important;
    }
    .contact-media img{width:14rem!important}
    .contact-title{
        font-size:1.9rem!important;
        margin-bottom:1rem!important;
    }
    .contact-copy .btn{width:auto;padding:0 3rem}

    /* Footer - 移动端加大内边距和字号 */
    .site-footer{font-size:1.4rem}
    /* 加大footer容器左右内边距，避免贴边 */
    .site-footer .container{padding-left:2.5rem;padding-right:2.5rem}
    .footer-top{
        flex-direction:row;
        padding:1.8rem 0;
        gap:0.8rem;
        align-items:center;
    }
    .footer-brand img{}
    .footer-nav{gap:1.6rem;flex-wrap:wrap}
    .footer-nav a{font-size:1.6rem}
    .footer-middle{
        flex-direction:column;
        padding:2.5rem 0;
    }
    /* 关键：flex column 子元素必须占满宽度 */
    .footer-middle > *{width:100%}
    /* 信息区：单列堆叠，标签和内容各占一行 */
    .footer-info{
        grid-template-columns:1fr;
        gap:1.6rem;
        width:100%;
    }
    .footer-info-item{
        display:block;
    }
    .footer-label{
        display:block;
        font-size:1.5rem;
        color:rgba(255,255,255,.45);
        margin-bottom:.3rem !important;
    }
    .footer-info-item p{font-size:1.55rem;line-height:1.65;color:rgba(206,206,206,1)}
    /* 二维码：大尺寸并排 */
    .footer-qr{
        justify-content:center;
        gap:1.8rem;
        margin-top:.8rem;
    }
    .qr-item{width:10rem;height:10rem;border-radius:.5rem}
    /* 链接行：多行换行显示 */
    .footer-links-row{
        flex-direction:column;
        align-items:center;
        gap:1.2rem;
        text-align:center;
        padding:1.8rem 0;
    }
    .footer-copy{text-align:center;font-size:1.25rem;line-height:1.8;color:rgba(255,255,255,.42)}
    .footer-links{
        justify-content:center;
        flex-wrap:wrap;
        gap:0.8rem 2rem;
    }
    .footer-links a{font-size:1.3rem;color:rgba(255,255,255,.42);white-space:nowrap}
}
@media (max-width:520px){
    .contact-strip{padding:2rem 0}
    .contact-inner{gap:1.2rem!important}
    .contact-media img{width:11rem!important}
    .contact-title{font-size:1.6rem!important;margin-bottom:.8rem!important}
    .contact-copy .btn{height:4rem;font-size:1.35rem;padding:0 2.4rem;width:auto!important}
    /* Footer */
    .site-footer{font-size:1.3rem}
    .site-footer .container{padding-left:2rem;padding-right:2rem}
    .footer-top{flex-direction:row;gap:.6rem;padding:1.4rem 0}
    .footer-brand img{}
    .footer-nav a{font-size:1.25rem;gap:1.2rem}
    .footer-info{gap:1.4rem}
    .footer-label{font-size:1.4rem}
    .footer-info-item p{font-size:1.45rem}
    .qr-item{width:8.5rem;height:8.5rem;border-radius:.4rem}
    .footer-qr{gap:1.4rem;margin-top:.5rem}
    .footer-middle{padding:2rem 0}
    .footer-links-row{padding:1.4rem 0}
    .footer-links{gap:0 1.5rem}
    .footer-links a{font-size:1.2rem}
    .footer-copy{font-size:1.15rem;color:rgba(255,255,255,.38)}
}