/* http://www.seovw.com  v3.0 | Alimao Co., Ltd.*/
@import "//at.alicdn.com/t/c/font_4624352_a45vry0l1ci.css";
*, *::before, *::after {box-sizing: border-box;}
html,body,div,span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}
html {font-size:62.5%; scroll-behavior: smooth;}
/* Regular 400 */
@font-face {font-family: 'Inter';src: url('woff-hinted/Inter-Regular.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap;}
/* Medium 500 */
@font-face {font-family: 'Inter';src: url('woff-hinted/Inter-Medium.woff2') format('woff2');font-weight: 500;font-style: normal;font-display: swap;}
/* Semi Bold 600 */
@font-face {font-family: 'Inter';src: url('woff-hinted/Inter-SemiBold.woff2') format('woff2');font-weight: 600;font-style: normal;font-display: swap;}
/* Bold 700 */
@font-face {font-family: 'Inter';src: url('woff-hinted/Inter-Bold.woff2') format('woff2');font-weight: 700;font-style: normal;font-display: swap;}
/* Bold 900 */
@font-face {font-family: 'Inter';src: url('woff-hinted/Inter-Black.woff2') format('woff2');font-weight: 900;font-style: normal;font-display: swap;}
body {font-size: 1.6rem;font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;color: #333333;line-height: 1.5;background-color: #fff;min-height: 100vh;position: relative;overflow-x: hidden;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block}
h1,h2,h3{font-weight: 700}
h4,h5,h6,strong{font-weight: 600; margin-bottom: 10px;}
/*Imeges*/
img{box-sizing:border-box;height:auto;max-width:100%;width:auto\9;}
ol,ul {list-style: none}
p{padding-bottom:10px}
q {quotes: none}
q:before,q:after {content:'';}
table {border-collapse: collapse;border-spacing: 0; margin-bottom: 20px;}
/*Links*/
a{color:rgba(15, 82, 186, 1);text-decoration:none}
a:hover{color:#3d81e7}
a[href^="tel:"] {color: inherit;text-decoration:none}
sup{font-size: 1rem; margin-right: 5px; display: inline-block; transform:scale(0.8);}
/*root*/
:root {
    /* 背景色 */
    --bg-primary: #00308f; /* 主要背景色 */
    --bg-secondary: #cfddf9; /* 次要背景色 */
    --bg-light: #F5F8FC; /* 浅色背景 */
    --bg-dark: #00236a; /* 深色背景 */
    --bg-gray: #3f3f3f; /* 灰色背景 */
    --bg-light-blue: #2bc6ff; /* 浅蓝色背景 */
    /* 字体颜色 */
    --primary-color: rgba(15, 82, 186, 1); /* 主要字体颜色 */
    --text-dark: #00236a; /* 深色文本颜色 */
    --text-primary: #F1F5F9; /* 白色文本颜色 */
    --text-secondary: #67707b; /* 次要文本颜色 */
    --text-muted: #C9D1E0; /* 淡化文本颜色 */
    --text-link: rgba(15, 82, 186, 1); /* 链接文本颜色 */
    /* 边框颜色 */
    --border-primary: #9cafd2; /* 主要边框颜色 */
    --border-secondary: #E5E9F2; /* 次要边框颜色 */
    --border-table: #D0D5DD; /* 表格边框颜色 */
    --border-input: #E5E9F2; /* 输入框边框颜色 */
    --border-divider: #E5E9F2; /* 分隔线颜色 */
    /* 强调色/辅助色 */
    --color-accent:  rgba(15, 82, 186, 1); /* 强调色 */
    --color-success: #4caf50; /* 成功状态色 */
    --color-warning: #f1a501; /* 警告状态色 */
    --color-error: #f44336; /* 错误状态色 */
    /* 阴影 */
    --shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* 小尺寸阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); /* 小尺寸阴影 */
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); /* 中等尺寸阴影 */
    --shadow-lg: 0 10px 30px rgba(22, 93, 255, 0.15); /* 大尺寸阴影 */
    --com-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --list-hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* 其他 */
    --hover-bg: #E5E9F2; /* 鼠标悬停时的背景颜色 */
    --active-bg: #C9D1E0; /* 激活状态下的背景颜色 */
    --focus-border: rgba(15, 82, 186, 1); /* 获得焦点时的边框颜色 */
    /* 间距 */
    --g-gap: 20px;
    --g-gap-s: 10px;
    --g-gap-l: 30px;
}
/*grid*/
.g{display: grid;gap: var(--g-gap-l);}
.g-4{grid-template-columns: repeat(4, 1fr);}
.g-3{grid-template-columns: repeat(3, 1fr);}
.g-2{grid-template-columns: repeat(2, 1fr);}
.ga {grid-template-columns: repeat(auto-fit, minmax(0, 1fr));} /* 全自动等分 */
.ga-min {grid-template-columns: 280px 1fr; } /* 最小260px */
.ga-card {grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* 卡片默认 */
.ga-fill {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } /* 填充占位 */

.grid-card,.light-card {background-color: #FFF;border-radius: 12px;overflow: hidden;box-shadow: var(--shadow-md);transition: all 0.3s ease;display: flex;flex-direction: column;height: 100%;}
.light-card{background-color: var(--bg-light);box-shadow: var(--shadow-sm); padding: 24px; text-align: center;}
.light-card i{display: inline-block; font-size: 2.2rem; font-weight: 600; width: 6rem; height: 6rem; line-height: 6rem; border-radius: 50%; background-color: var(--bg-secondary); color: var(--primary-color); margin-bottom: 12px;}
.light-card h3{font-size: 2rem;margin-bottom: 12px; font-weight: 600;}
.grid-card:hover,.light-card:hover {transform: translateY(-8px);box-shadow: var(--shadow);}
.grid-card-body {flex: 1;}
.grid-card-footer {margin-top: auto;}
.grid-image {position: relative;height: 240px;overflow: hidden;}
.grid-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.grid-card:hover .grid-image img {transform: scale(1.1);}
.image-overlay {position: absolute;bottom: 0;left: 0;right: 0;height: 50%;background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);}
.grid-badge {position: absolute;top: 16px;left: 16px;background-color: var(--primary-color);color: white;font-size: 12px;font-weight: 600;padding: 4px 12px;border-radius: 20px;}
.grid-content {padding: 24px;flex-grow: 1;display: flex;flex-direction: column;}
.grid-title {font-size: 20px;color: var(--dark-color);font-weight: 700;margin-bottom: 12px;}
.grid-description {line-height: 1.6;margin-bottom: 14px;flex-grow: 1;}
.grid-footer {display: flex;justify-content: space-between;align-items: center;}
.grid-footer .btn{padding: 10px 16px;border-radius: 8px;}
.grid-footer .btn i {margin-left: 3px; margin-top: 5px;}
.view-all {text-align: center;margin-top: 50px;}
.view-all a {color: var(--primary-color);font-weight: 500;text-decoration: none;display: inline-flex;align-items: center;transition: color 0.3s ease;}
.view-all a:hover {color: #0E42B3;text-decoration: underline; font-weight: 700}
.view-all a:hover i{transform: translateX(4px);}
.view-all i {margin-left: 8px;}
/*header common*/
/*header*/
header{width: 100%; position: fixed; top: 0; left: 0; right: 0; background-color: rgba(255,255,255,1); z-index: 1001;transition: transform 0.5s ease-out;}
header.header-hidden {transform: translateY(-100%);}
header.opacity{background-color: rgba(255,255,255,0); border-bottom:1px solid rgba(255,255,255,.2) }
.opacity.header-visible{background-color:var(--bg-dark);}
.opacity .nav-list > li > a{color: #fff}
.opacity .nav-dropdown-menu{border-top: 0;}
.wrapper,.container{margin: 0 auto; max-width: 1536px;}
#m-nav{display: none; height: 42px; overflow: hidden}
nav{display: grid;margin: 0 auto; width: 100vw; position: relative;}
.nav-container{display: flex; width: 100%; max-width: 1536px; margin: 0 auto; justify-content: center; padding: 0 20px; align-items: center;}
.nav-logo {flex: 0 0 180px;}
.nav-logo .nav-logo-link{display: flex; align-items: center;}
.nav-logo img {display: block; max-height: 50px;}
.nav-logo-text{font-size: 2.4rem; line-height: 100%; font-weight: 700; color: var(--text-primary); text-transform: uppercase;}
.nav-menu{flex: 1; margin: 0 50px;}
.nav-list {display: flex;justify-content: center;margin: 0;padding: 0;}
.nav-list > li{display: inline-block; height: 68px; line-height: 68px;}
.nav-list > li.nav-icon-only a{font-size: 0}
.nav-list > li.nav-icon-only i{font-size: 2rem}
.nav-list > li > a{padding: 0 20px; display: block; font-weight: 600; white-space: nowrap;}
.nav-list li.nav-has-children a{position:relative;}
.nav-has-children > a:before{position: absolute; top: 1px; right: 0; z-index: 1; font-family: "iconfont",sans-serif; content: "\e610";font-weight:500; font-size: 1.4rem; transform: rotate(0deg); transition: transform 0.3s ease;}
.nav-has-children > a:hover:before{transform: rotate(90deg);}
/*sub menu*/
.nav-dropdown-menu{position: absolute; width: 100%; height: 0; border-top: 1px solid #eee; background-color: #fff; padding: 0; z-index: 1000; left: 0; top: 100%; box-sizing:border-box; overflow: hidden;}
.nav-list li.nav-has-children:hover .nav-dropdown-menu{height: auto; padding: 50px 0 20px;}
.nav-list li.nav-has-children:hover > a:before{transform: rotate(90deg)}
.nav-dropdown-wrap{margin: 0 auto; max-width: 60%; display: grid; grid-template-columns: 320px 1fr; gap: 30px;}
.nav-dropdown-wrap * {opacity: 0;transform: scale(0.8) rotateY(-30deg);transition: opacity 0.5s, transform 0.5s;}
.nav-list li.nav-has-children:hover .nav-dropdown-wrap * {opacity: 1;transform: scaleY(1) rotateY(0deg);}
.nav-category-header,.nav-children{display: inline-block}
.nav-category-header{padding-right: 30px; border-right: 1px solid var(--border-secondary); line-height: 150%;}
.nav-children{display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.nav-category-img{border: 5px solid var(--border-secondary);}
.nav-category-title{padding: 10px 0;}
.nav-category-summary{font-size: 1.4rem;}
.nav-child a{padding: 0 0 10px; border-bottom: 1px solid var(--border-secondary); line-height: normal; display: block}
.nav-child .nav-subsubtitle{font-size: 1.4rem;}
.nav-child-summary{padding-top: 10px; font-size: 1.3rem; line-height: 150%}
.nav-btn-group{display: flex; align-items: center;}
.nav-btn{display: inline-block; cursor: pointer;text-align: center; border-radius: 4px; width: 4.6rem; height: 28px; border: 0; outline: 0; background-color: #f37616; color: #fff;}
.nav-btn i{font-size: 1.8rem;}
.language-dropdown{position: relative; margin-right: 1px;}
.language-dropdown-menu{position: absolute; background-color: rgba(0, 0, 0, .7); font-size: 0; height: 0; left: 0; top: 100%; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; width: 100%; display: grid; transition: all 0.3s ease;}
.language-dropdown-toggle{display: flex; align-items: center; gap: 3px; font-size: 1.2rem; border-top-right-radius: 0; border-bottom-right-radius: 0;background-color: var(--primary-color);}
.language-dropdown-toggle i{font-size: 1.4rem;}
.language-dropdown:hover .language-dropdown-menu{font-size: 1.2rem; height: auto;}
.language-dropdown-menu a{color: #fff; text-align: center; padding: 6px 0;}
.language-dropdown-menu a:hover{background-color: rgba(255, 255, 255, 0.2);}
.nav-search{position: relative; margin-left: auto;}
.nav-search-wrap{width: 220px; overflow: hidden;}
.nav-search-btn{border-top-left-radius: 0; border-bottom-left-radius: 0;}
.search-form{display: flex; grid-template-columns: 1fr auto; align-items: center; margin-top: -1px; justify-content: flex-end;}
.search-form input{width: 120px; outline: 0; padding: 6px 10px; background-color: rgba(255,255,255,1);  border: 1px solid #ddd; border-radius: 4px 0 0 4px; transition: all 0.2s ease;}
.search-form input:focus{width: calc(100% - 46px); color: rgba(0,0,0,1);}
.nav-search-close,.nav-close{cursor: pointer; color: #fff; font-size: 1.8rem; display: inline-block; margin-left: 10px; transition: all 0.3s ease;}
.nav-search-close:hover,.nav-close:hover{transform: rotate(90deg)}
.nav-search-submit{border-top-left-radius: 0; border-bottom-left-radius: 0; width: 4.6rem; display: inline-block;}
.nav-search-close{display: none;}
/*btn*/
.btn{display: inline-block; cursor: pointer; padding: 8px 20px; text-align: center; border-radius: 100px;  border: 0; outline: 0; transition: all 0.3s ease;}
.btn-white{background-color: #fff; color: var(--text-link);}
.btn-primary{background-color: var(--primary-color); color: #fff;}
.btn-primary:hover{background:linear-gradient(to right, rgba(61,129,231,1),rgba(11,174,233,1)); color: #fff;}
/*black name*/
.black-name{margin-bottom:50px; text-align:center}
.black-name .section-label{text-transform: uppercase; color: var(--text-link); font-size: 1.4rem; font-weight: 600; margin-bottom: 10px;}
.black-name h2{font-size: clamp(2.4rem, 4.2vw, 3.6rem);max-width: 600px; font-weight:700; margin: 0 auto 20px; color:#000}
.black-name .hr-line{width:80px; display:inline-block; height:2px; margin-bottom: 10px; background:#c7d1d8; overflow:hidden}
.black-name p{margin: 0 auto;max-width: 600px; color:#666;}
.black-name h2.white{color: #fff;}
.black-name p.white{color: rgba(255,255,255,.7);}
.black-name-tabs {margin-top: 40px;display: flex;justify-content: left;border-bottom: 1px solid #e0e0e0; overflow-y: auto; white-space: nowrap; scrollbar-width: thin;-ms-overflow-style: -ms-autohiding-scrollbar;scroll-behavior: smooth;}
.black-name-tab {margin: 0 20px; padding:0 10px 10px; color: #666; border-bottom: 2px solid #fff; font-size: 1.8rem;transition: all 0.3s ease;cursor: pointer;}
.black-name-tab:hover {color: var(--primary-color);border-bottom-color: var(--primary-color);}
.black-name-tab.black-name-tab-active {color: var(--primary-color);border-bottom-color: var(--primary-color);font-weight: 600;}
.black-name.text-blue h2{color: var(--text-dark);}

/*footer*/
/* 底部栏样式 */
.footer {background-color: var(--bg-dark);color: var(--text-primary);padding: 3rem 0 1.5rem;}
.footer-container {max-width: 1280px;margin: 0 auto;padding: 0 1rem;}
.footer-content {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2rem;margin-bottom: 2rem;}
.footer-column h3 {color: white;font-size: 2rem;margin-bottom: 2.5rem;position: relative;margin-top: 2rem;padding-bottom: 1rem;}
.footer-column h3::after {content: '';position: absolute;left: 0;bottom: 0;width: 3.6rem;height: 0.3rem;background-color: var(--accent);}
.footer-links {list-style: none;}
.footer-links li {margin-bottom: 0.75rem;}
.footer-links a {color: var(--text-primary);text-decoration: none;transition: color 0.3s ease;}
.footer-links a:hover {color: var(--accent);text-decoration: none;}
.contact-info {list-style: none;}
.contact-info li {margin-bottom: 1rem;display: flex;align-items: flex-start;}
.contact-info i {color: var(--accent);margin-right: 0.75rem;margin-top: 0.25rem;width: 1.25rem;text-align: center;}
.social-links {display: flex;gap: 1rem;margin-top: 1rem;}
.social-links a {display: inline-flex;align-items: center;justify-content: center;width: 3.6rem;height: 3.6rem;border-radius: 50%;background-color: rgba(255, 255, 255, 0.1);color: white;transition: all 0.3s ease;}
.social-links a:hover {background-color: var(--accent);transform: translateY(-3px);}
.copyright {border-top: 1px solid rgba(255, 255, 255, 0.1);padding-top: 1.5rem;text-align: center;font-size: 1.6rem;color: rgba(255, 255, 255, 0.7);}
.footer-logo {display: flex;align-items: center;margin-bottom: 1rem;}
.footer-logo img {max-width: 100px;}
.footer-logo span{font-size: 2.4rem; font-weight: 600; color: #fff; margin-left: 10px;}
/*chat*/
#liveChat{position: fixed; right: 20px; bottom: 40px; z-index: 666;}
.openchat{width: 5rem; height: 5rem; cursor: pointer; text-align: center; line-height: 5rem; border-radius: 50%; background: linear-gradient(to right, #ff8a30, #f1a501); display: inline-block;}
.openchat i{font-size: 2.4rem; color: #fff;}
.openchat:before,.openchat i::after {content: '';position: absolute;z-index: -1;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);background:linear-gradient(to right,#ff8a30, #f1a501);transform-origin: center;border-radius: 50%;opacity: 0.5;transition: all 0.3s ease;will-change: transform, opacity;}
.openchat i::before {width: 100%;height: 100%;animation: expandRing 2s ease-in-out infinite;}
.openchat i::after {width: 90%;height: 90%;animation: expandRing 2s ease-in-out infinite 0.5s;}
@keyframes expandRing { 0%{width: 100%;height: 100%;opacity: 0.5;} 100% {width: 140%;height: 140%;opacity: 0;}}
.almLayer-responsive .almLayer-title{position: relative; padding-left: 3rem;}
.almLayer-responsive .almLayer-title::before{position: absolute; left: 0; font-family: "iconfont", sans-serif; font-size: 2rem; content: '\e6b7'; width: 3rem; height: 3rem;}



/* ===== 精简压缩版 CSS 动画集合 ===== */
@keyframes slideFadeIn {from{opacity: 0;}to{opacity: 1;}}
@keyframes slideInFromLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInFromRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInFromTop{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInFromBottom{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes rotateIn{from{opacity:0;transform:rotate(-360deg) scale(.8)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes scaleOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}
@keyframes swingIn{0%{opacity:0;transform:rotate(270deg) scale(.6)}50%{transform:rotate(-10deg) scale(1.05)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:translateY(-50px)}40%{transform:translateY(10px)}60%{transform:translateY(-6px)}80%{transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInFromBottomRight { from {opacity: 0;transform: translateX(50px) translateY(50px);} to {opacity: 1;transform: translateX(0) translateY(0);} }
/* 通用规则：默认隐藏 */
.slide-fade-in,.slide-in-left,.slide-in-right,.slide-in-top,.slide-in-bottom,.rotate-in,.scale-in,.swing-in,.bounce-in,.slide-in-bottom-right{opacity:0;animation-fill-mode:forwards}
.slide-fade-in.animate {animation: slideFadeIn 1s ease-out forwards;}
.slide-in-left.animate{animation:slideInFromLeft .8s ease-out forwards}
.slide-in-right.animate{animation:slideInFromRight .8s ease-out forwards}
.slide-in-top.animate{animation:slideInFromTop .8s ease-out forwards}
.slide-in-bottom.animate{animation:slideInFromBottom .8s ease-out forwards}
.rotate-in.animate{animation:rotateIn 1s cubic-bezier(.25,.46,.45,.94) forwards}
.scale-in.animate{animation:scaleIn .7s ease-out forwards}
.scale-out.animate{animation:scaleOut .6s ease-in forwards}
.swing-in.animate{animation:swingIn 1s ease-out forwards}
.bounce-in.animate{animation:bounceIn 1s ease-out forwards}
.slide-in-bottom-right.animate {animation: slideInFromBottomRight 0.8s ease-out forwards;}
/* 通用延迟类（适用于任何动画）*/
.delay-01.animate { animation-delay: 0.1s;}
.delay-02.animate { animation-delay: 0.2s;}
.delay-03.animate { animation-delay: 0.3s;}
.delay-04.animate { animation-delay: 0.4s;}
.delay-05.animate { animation-delay: 0.5s;}
.delay-07.animate { animation-delay: 0.7s;}
.delay-075.animate { animation-delay: 0.75s;}
.delay-1.animate { animation-delay: 1s;}
.delay-15.animate { animation-delay: 1.5s;}
.delay-2.animate { animation-delay: 2s;}
@media (max-width: 1200px) {

}
@media (max-width: 479px) {
    .container{padding:0 20px}
}