@font-face
{
    font-family: myFirstFont;
    src: url(../fonts/Poppins-Regular.ttf);
}
@font-face
{
    font-family: myFirstFont1;
    src: url(../fonts/Poppins-SemiBold.ttf);
}
/* ==============================
   Global Scrollbar Style - Slim
   Theme: #031c41 / #0b66b2
============================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(3, 28, 65, .08);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #031c41 0%, #0b66b2 100%);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #02152f 0%, #031c41 100%);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #031c41 rgba(3, 28, 65, .08);
}
#translate{ display: none;}
*{ margin:0; box-sizing: border-box; padding:0; transition-property: all;-ms-transition-property: all;-moz-transition-property: all; -webkit-transition-property: all; -o-transition-property: all;}
body{ font-family: myFirstFont; color:#333; font-size:0.9rem;  line-height: 24px; background: #FFFFFF; min-width: 1360px;}
a{ text-decoration: none; -webkit-transition: all ease .3s;  -moz-transition: all ease .3s; transition: all ease .3s; border:none; color: #333;}
a:focus { outline: 0 }
a:hover{ color: #031c41;}
img{ border:none; -webkit-transition: all ease .5s;  -moz-transition: all ease .5s; transition: all ease .5s; vertical-align: middle;}
ul,li{ list-style:none;}
.clear{ clear:both;}
.clearfix{ clear:both;}
p{ margin:0; padding:0;}
.padding5{ padding:5px;}
.padding10{ padding:10px;}
.padding15{ padding:15px;}
.padding20{ padding:20px;}
.padding30{ padding:30px;}
.padding40{ padding:40px;}
.fr{ float:right;}
.fl{ float:left; }
.paddingright{ padding-right:10px;}
.paddingleft{ padding-left:10px;}
.undis{ display:block;  background-size: cover;}
.dis{ display:none;  }
.pr5{ padding-right:5px;}
.red{ color:#f00;}
.fff{ color:#fff;}
.pdt30{ padding-top: 30px;}
.txtcenter{ text-align: center;}
h1,h2,h3,h4,strong,b{ margin: 0; font-family: myFirstFont1; color:#111;}
.container{ width: 1360px; margin: 0 auto;}
.flex {display: flex; flex-wrap: wrap;}
.flex-center { display: flex; align-items: center; justify-content: space-between;}
.flex-center-contain { justify-content: space-between;}
.flex-center-contain1 { justify-content: space-between; align-items: center; }
.flex-center-contain2 { align-items: center; }
.flex-center1 { display: flex; align-items: center; justify-content: flex-start;}
.flex-center2 { display: flex; align-items: center; }
.flex-center3 { display: flex; align-items: center; justify-content:center;}
.flex-center4 { display: flex; align-items: center; justify-content:end;}
em,i{ font-style: normal;}
html{
    scroll-behavior: smooth;
}



input,button,select,textarea{ outline:none; font-family: myFirstFont;}
textarea{resize:none;}
input[type="button"], input[type="submit"], input[type="reset"],input[type="text"] {-webkit-appearance: none; font-weight:normal;}
input[type="button"], input[type="submit"], input[type="reset"]{ cursor: pointer;}
a,button{ cursor: pointer;}

#warp{ width:100%; height:auto; position: relative; }


.customerList{ width:60px; height:auto; position: fixed; right: 0; top: 40%; z-index:999; }
.customerList a b{ display: block; color: #FFFFFF !important; font-size: 14px; line-height: 21px; font-weight: normal;}

.customerBox{ width: 60px; height: auto;  }
.customerBox a{ display: block; text-align: center; position: relative; width: 60px; height: 60px; line-height:60px; color:#fff; margin-bottom:1px; font-size:1.8rem; background: #031c41; border-radius: 6px  0px  0px  6px; }
.customerBox a:hover{ text-decoration:none; background:#0b66b2; color:#fff;}
.customerBox a:hover b{ color:#031c41 !important; }
.customerBox a .eso_divinfo{ display:none; position:absolute;  right:60px; top:0; min-width:260px; background:#fff; color:#031c41; font-size:1rem;  box-shadow: 3px 3px 10px 0 rgba(0,0,0,.1); padding:10px; border-radius:6px; }
.customerBox a .eso_divinfo:before{
    content:""; position:absolute; right:-12px; top:50%; margin-top:-12px; 
width:0;
height:0;
border-top:12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #fff;
}
.customerBox a:hover .eso_divinfo{ display: block;}




/* ==============================
   全宽 Banner
   适配悬浮导航
   Main Color: #031c41
   Secondary Color: #0b66b2
============================== */
.about-inner-banner {
    width: 100%;
    height: 430px;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.about-inner-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(3, 28, 65, .95) 0%,
        rgba(3, 28, 65, .78) 48%,
        rgba(11, 102, 178, .18) 100%
    );
}

.about-inner-banner .container {
    height: 100%;
    position: relative;
    z-index: 2;
}

/* 这里加 padding-top，让文字避开悬浮导航 */
.about-inner-banner-text {
    width: 620px;
    height: 100%;
    padding-top: 115px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.about-inner-banner-text h1 {
    margin: 0 0 18px;
    font-size: 46px;
    line-height: 1.2;
    font-weight: bold;
    color: #fff;
}

.about-inner-banner-text b {
    margin: 0 0 18px;
    display: block;
    font-size: 46px;
    line-height: 1.2;
    font-weight: bold;
    color: #fff;
}

.about-inner-banner-text h1::after,
.about-inner-banner-text b::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 18px;
    border-radius: 4px;
    background: #0b66b2;
}

.about-inner-banner-text p {
    margin: 0;
    font-size: 18px;
    line-height: 32px;
    color: rgba(255, 255, 255, .92);
}

/* ==============================
   面包屑
============================== */
.about-breadcrumb {
    height: 58px;
    line-height: 58px;
    border-bottom: 1px solid #e9edf6;
    color: #777;
    font-size: 14px;
}

.about-breadcrumb a {
    color: #666;
    text-decoration: none;
    transition: all .25s ease;
}

.about-breadcrumb a:hover {
    color: #031c41;
}

.about-breadcrumb span {
    margin: 0 8px;
    color: #aaa;
}

.about-breadcrumb em {
    font-style: normal;
    color: #031c41;
}



/* Header base */
header,
.header,
#header {
    width: 100%;
    position: relative;
    z-index: 1000;
    background: #fff;
    transition: box-shadow .35s ease, transform .35s ease, background .35s ease;
}

/* Top information bar */
.header-top,
.top-header,
.topbar,
.header .top,
#header .top {
    height: 40px;
    line-height: 40px;
    background: #031c41;
    color: #fff;
    transition: height .35s ease, opacity .35s ease, transform .35s ease;
}

.header-top a,
.top-header a,
.topbar a,
.header .top a,
#header .top a {
    color: rgba(255,255,255,.94);
}

.header-top a:hover,
.top-header a:hover,
.topbar a:hover,
.header .top a:hover,
#header .top a:hover {
    color: #fff;
}

/* Font Awesome icon spacing */
.header-top .fa,
.header-top .fas,
.header-top .far,
.header-top .fab,
.topbar .fa,
.topbar .fas,
.topbar .far,
.topbar .fab,
.header .fa,
#header .fa {
    margin-right: 8px;
    font-size: 14px;
}

/* Main navigation row */
.header-main,
.header-nav,
.nav-wrap,
.header .nav,
#header .nav {
    height: 92px;
    background: #fff;
    transition: height .35s ease, box-shadow .35s ease;
}

.header-main .container,
.header-nav .container,
.nav-wrap .container,
.header .nav .container,
#header .nav .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
}

/* Logo */
.header-logo,
.logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.header-logo img,
.logo img {
    display: block;
    max-height: 58px;
    width: auto;
}

/* Single-level navigation only */
.main-nav,
.nav-menu,
.header-menu,
.header nav > ul,
#header nav > ul {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 0;
}

.main-nav > li,
.nav-menu > li,
.header-menu > li,
.header nav > ul > li,
#header nav > ul > li {
    position: relative;
    margin: 0 22px;
}

.main-nav > li > a,
.nav-menu > li > a,
.header-menu > li > a,
.header nav > ul > li > a,
#header nav > ul > li > a {
    position: relative;
    display: block;
    height: 92px;
    line-height: 92px;
    padding: 0 2px;
    color: #101820;
    font-family: myFirstFont1;
    font-size: 17px;
    white-space: nowrap;
    transition: color .25s ease, height .35s ease, line-height .35s ease;
}

.main-nav > li > a::after,
.nav-menu > li > a::after,
.header-menu > li > a::after,
.header nav > ul > li > a::after,
#header nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 0;
    height: 2px;
    background: #0b66b2;
    transform: translateX(-50%);
    transition: width .28s ease, bottom .35s ease;
}

#home .home{ color: #0b66b2;}
#home .home::after{ width: 100%;}


#about .about{ color: #0b66b2;}
#about .about::after{ width: 100%;}



#products .products{ color: #0b66b2;}
#products .products::after{ width: 100%;}


#quality .quality{ color: #0b66b2;}
#quality .quality::after{ width: 100%;}

#solution .solution{ color: #0b66b2;}
#solution .solution::after{ width: 100%;}

#news .news{ color: #0b66b2;}
#news .news::after{ width: 100%;}

#contact .contact{ color: #0b66b2;}
#contact .contact::after{ width: 100%;}


.main-nav > li:hover > a,
.main-nav > li.current > a,
.nav-menu > li:hover > a,
.nav-menu > li.current > a,
.header-menu > li:hover > a,
.header-menu > li.current > a,
.header nav > ul > li:hover > a,
.header nav > ul > li.current > a,
#header nav > ul > li:hover > a,
#header nav > ul > li.current > a {
    color: #0b66b2;
}

.main-nav > li:hover > a::after,
.main-nav > li.current > a::after,
.nav-menu > li:hover > a::after,
.nav-menu > li.current > a::after,
.header-menu > li:hover > a::after,
.header-menu > li.current > a::after,
.header nav > ul > li:hover > a::after,
.header nav > ul > li.current > a::after,
#header nav > ul > li:hover > a::after,
#header nav > ul > li.current > a::after {
    width: 100%;
}

/* Explicitly disable dropdown rendering in this header */
.main-nav > li > ul,
.nav-menu > li > ul,
.header-menu > li > ul,
.header nav > ul > li > ul,
#header nav > ul > li > ul {
    display: none !important;
}

/* Chinese / English direct switch */
.language-switch,
.header-language,
.lang-switch {
    display: flex;
    align-items: center;
    margin-left: 22px;
    height: 40px;
    color: #fff;
    white-space: nowrap;
}

.language-switch a,
.header-language a,
.lang-switch a {
    position: relative;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    line-height: 40px;
    padding: 0 10px;
}

.language-switch a + a::before,
.header-language a + a::before,
.lang-switch a + a::before {
    content: "/";
    position: absolute;
    left: -2px;
    color: rgba(255,255,255,.38);
}

.language-switch a:hover,
.language-switch a.current,
.header-language a:hover,
.header-language a.current,
.lang-switch a:hover,
.lang-switch a.current {
    color: #fff;
}

/* Scroll state: JS adds .current to header */
header.current,
.header.current,
#header.current {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,.98);
    box-shadow: 0 10px 30px rgba(3, 28, 65, .12);
    animation: headerSlideDown .36s ease both;
}

header.current .header-top,
header.current .top-header,
header.current .topbar,
.header.current .header-top,
.header.current .top-header,
.header.current .topbar,
.header.current .top,
#header.current .header-top,
#header.current .top-header,
#header.current .topbar,
#header.current .top {
    height: 0;
    line-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
}

header.current .header-main,
header.current .header-nav,
header.current .nav-wrap,
header.current .nav,
.header.current .header-main,
.header.current .header-nav,
.header.current .nav-wrap,
.header.current .nav,
#header.current .header-main,
#header.current .header-nav,
#header.current .nav-wrap,
#header.current .nav {
    height: 74px;
}

header.current .main-nav > li > a,
header.current .nav-menu > li > a,
header.current .header-menu > li > a,
header.current nav > ul > li > a,
.header.current .main-nav > li > a,
.header.current .nav-menu > li > a,
.header.current .header-menu > li > a,
.header.current nav > ul > li > a,
#header.current .main-nav > li > a,
#header.current .nav-menu > li > a,
#header.current .header-menu > li > a,
#header.current nav > ul > li > a {
    height: 74px;
    line-height: 74px;
}

header.current .main-nav > li > a::after,
header.current .nav-menu > li > a::after,
header.current .header-menu > li > a::after,
header.current nav > ul > li > a::after,
.header.current .main-nav > li > a::after,
.header.current .nav-menu > li > a::after,
.header.current .header-menu > li > a::after,
.header.current nav > ul > li > a::after,
#header.current .main-nav > li > a::after,
#header.current .nav-menu > li > a::after,
#header.current .header-menu > li > a::after,
#header.current nav > ul > li > a::after {
    bottom: 17px;
}

header.current .header-logo img,
header.current .logo img,
.header.current .header-logo img,
.header.current .logo img,
#header.current .header-logo img,
#header.current .logo img {
    max-height: 48px;
}

@keyframes headerSlideDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================
   Header Top
============================== */
.header-top {
    width: 100%;
    height: 40px;
    background: #031c41;
    color: #fff;
}

.header-top-inner {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header-top-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 42px;
    margin-left: auto;
}

.header-contact-item {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    line-height: 40px;
    color: rgba(255,255,255,.95);
    white-space: nowrap;
}

.header-contact-item:hover {
    color: #fff;
}

.header-contact-item i {
    font-size: 14px;
    color: #fff;
}

.header-language {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    color: rgba(255,255,255,.9);
}

.header-language a {
    color: rgba(255,255,255,.9);
}

.header-language a:hover,
.header-language a.active {
    color: #fff;
}

.header-language .lang-line {
    color: rgba(255,255,255,.45);
}

/* ==============================
   Footer
   PC Only
============================== */

.footer{
    width:100%;
    background:#031c41;
    color:rgba(255,255,255,.72);
}

.footer-main{
    padding:22px 0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

/* Left */
.footer-left{
    width:600px;
    flex:0 0 600px;
}

.footer-logo{
    margin-bottom:16px;
}

.footer-logo img{
    display:block;
    width:156px;
    height:auto;
}

.footer-desc{
    width:600px;
    max-width:600px;
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:19px;
}

.footer-follow{
    margin-top:18px;
}

.footer h3,
.footer-item h3{
    margin:0;
    color:#fff;
    font-family:myFirstFont1;
    font-size:16px;
    line-height:24px;
    font-weight:normal;
}

/* Social */
.footer-social{
    width:190px;
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
}

.footer-social a{
    display:block;
    width:30px;
    height:30px;
    border-radius:50%;
    transition:all .3s ease;
}

.footer-social img{
    display:block;
    width:28px;
    height:28px;
}

.footer-social a:hover{
    transform:translateY(-3px);
    opacity:.8;
}

/* Center */
.footer-center{
    width:190px;
    flex:0 0 190px;
    padding-top:0;
}

.footer-center .footer-item + .footer-item{
    margin-top:28px;
}

/* Right */
.footer-right{
    width:500px;
    flex:0 0 500px;
    padding-top:0;
}

.footer-right .footer-item + .footer-item{
    margin-top:28px;
}

/* Common */
.footer-item{
    margin:0;
}

.footer-line{
    position:relative;
    display:block;
    width:16px;
    height:10px;
    margin:4px 0 9px;
}

.footer-line::before,
.footer-line::after{
    content:"";
    position:absolute;
    top:3px;
    width:7px;
    height:1px;
    background:#0b66b2;
}

.footer-line::before{
    left:1px;
    transform:rotate(45deg);
}

.footer-line::after{
    left:6px;
    transform:rotate(-45deg);
}

.footer-item a,
.footer-item p{
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:19px;
}

.footer-item a:hover{
    color:#fff;
}

/* Address */
.footer-address p{
    max-width:500px;
}

/* Quick Links */
.footer-links{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    white-space:nowrap;
}

.footer-links a{
    position:relative;
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:12px;
    line-height:20px;
}

.footer-links a:not(:last-child)::after{
    content:"/";
    margin:0 2px;
    color:rgba(255,255,255,.35);
}

/* Copyright */
.footer-bottom{
    height:50px;
    line-height:50px;
    border-top:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.72);
    text-align:center;
    font-size:14px;
    letter-spacing:.1px;
}