/* =====================
   基础重置与全局样式
   ===================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: #333333;
  background-color: #f5f6f8;
  line-height: 1.6;
}

a {
  color: #0055b8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  border: 0;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

p {
  margin: 0 0 0.75rem;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 15px;
}

.section {
  padding: 2.8rem 0;
  background-color: #ffffff;
}

.section-gray {
  background-color: #f0f2f5;
}

.section-header {
  text-align: center;
  margin-bottom: 1.8rem;
}

.section-header h2 {
  font-size: 1.7rem;
}

.section-header p {
  color: #666666;
  font-size: 0.95rem;
}

.grid-2,
.grid-3 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -0.75rem;
}

.grid-2 > * ,
.grid-3 > * {
  -ms-flex: 1 1 260px;
  flex: 1 1 260px;
  margin: 0.75rem;
}

.text-center {
  text-align: center;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 2px;
  font-size: 0.75rem;
  margin-left: 0.4rem;
  background-color: #e5f0ff;
  color: #0055b8;
}

/* =====================
   头部与导航
   ===================== */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #dcdfe6;
  position: relative;
  z-index: 60;
}

.header-top {
  background-color: #b00020;
  color: #ffffff;
  font-size: 0.85rem;
}

.header-top .container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.3rem 15px;
}

.header-main {
  padding: 0.8rem 0;
}

.header-main-inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.logo-block a {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.logo-main {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0055b8;
}

.logo-sub {
  font-size: 0.75rem;
  color: #777777;
  letter-spacing: 1px;
}

.header-hotline {
  font-size: 0.9rem;
  color: #333333;
}

.header-hotline strong {
  color: #b00020;
}

.main-nav {
  position: relative;
  z-index: 65;
}

.main-nav ul {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  z-index: 70;
}

.main-nav li {
  margin-left: 1.4rem;
}

.main-nav a {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  color: #333333;
}

.main-nav a.is-active,
.main-nav a:hover {
  color: #0055b8;
  border-bottom: 2px solid #0055b8;
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 32px;
  height: 32px;
  border: 1px solid #d0d0d0;
  background-color: #ffffff;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background-color: #333333;
}

/* =====================
   首页轮播 Banner
   ===================== */
.banner {
  position: relative;
  overflow: hidden;
  height: 380px;
  background-color: #002b5c;
  color: #ffffff;
}

.banner-slide {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: opacity 0.8s ease;
}

.banner-slide-active {
  opacity: 1;
  filter: alpha(opacity=100);
}

.banner-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.banner-bg-1 {
  background-image: linear-gradient(120deg, #0055b8, #b00020);
}

.banner-bg-2 {
  background-image: linear-gradient(120deg, #0055b8, #00a0b8);
}

.banner-bg-3 {
  background-image: linear-gradient(120deg, #8e24aa, #0055b8);
}

.banner-content {
  position: relative;
  z-index: 2;
  padding-top: 3rem;
}

.banner-content h1 {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.banner-content p {
  max-width: 620px;
  font-size: 0.98rem;
  margin-bottom: 1.2rem;
}

.banner-meta {
  font-size: 0.88rem;
}

.banner-dots {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  text-align: center;
  z-index: 3;
}

.banner-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  margin: 0 3px;
  cursor: pointer;
  background-color: transparent;
}

.banner-dot-active {
  background-color: #ffffff;
}

/* =====================
   公共卡片与按钮
   ===================== */
.card {
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #e0e2e7;
  padding: 1.2rem 1.3rem;
}

.card h3 {
  font-size: 1.1rem;
}

.btn {
  display: inline-block;
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background-color: #0055b8;
  border-color: #0055b8;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #003f8a;
  border-color: #003f8a;
}

.btn-outline {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.btn-block {
  width: 100%;
  text-align: center;
}

.tag-list li {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  padding-left: 1.1rem;
  position: relative;
}

.tag-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: #0055b8;
  font-size: 0.55rem;
}

/* =====================
   特色模块
   ===================== */
.feature-grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.feature-item {
  width: 23%;
  min-width: 220px;
  margin-bottom: 1rem;
}

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #0055b8;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.highlight-box {
  background-color: #fff9f0;
  border-left: 4px solid #ff9800;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* =====================
   产品列表与表格
   ===================== */
.product-tabs {
  margin-bottom: 1.5rem;
}

.product-tabs button {
  margin-right: 0.6rem;
  margin-bottom: 0.4rem;
}

.product-tabs .is-active {
  background-color: #0055b8;
  color: #ffffff;
  border-color: #0055b8;
}

.product-meta {
  font-size: 0.88rem;
  color: #666666;
  margin-bottom: 0.5rem;
}

.product-meta span {
  display: inline-block;
  margin-right: 0.8rem;
}

.product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.product-table th,
.product-table td {
  border: 1px solid #e0e2e7;
  padding: 0.45rem 0.5rem;
}

.product-table th {
  background-color: #f5f7fb;
  text-align: left;
}

.calc-box {
  margin-top: 1.5rem;
}

.calc-result {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: #333333;
}

/* =====================
   表单与弹层
   ===================== */
.form {
  font-size: 0.9rem;
}

.form-row {
  margin-bottom: 0.8rem;
}

.form-row label {
  display: block;
  margin-bottom: 0.3rem;
}

.form-row-agree label {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0;
  font-size: 0.85rem;
}

.form-row-agree input[type="checkbox"] {
  width: auto;
  margin-right: 0.4rem;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: 2px;
  border: 1px solid #d0d3da;
  font-size: 0.9rem;
}

.form-row textarea {
  resize: vertical;
  min-height: 80px;
}

.form-tip {
  font-size: 0.8rem;
  color: #777777;
}

.form-message {
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

.form-message-success {
  color: #0a7b3e;
}

.form-message-error {
  color: #b00020;
}

.modal-mask {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 50;
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  max-width: 520px;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #e0e2e7;
  padding: 1.2rem 1.4rem 1.4rem;
  margin-left: -260px;
  margin-top: -160px;
}

.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.8rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
}

/* =====================
   新闻列表与分页
   ===================== */
.news-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0;
}

.news-item {
  padding: 1rem 0;
  border-bottom: 1px solid #e0e2e7;
  display: -ms-flexbox;
  display: flex;
}

.news-date {
  min-width: 80px;
  text-align: center;
  font-size: 0.85rem;
  color: #777777;
  margin-right: 1rem;
}

.news-date strong {
  display: block;
  font-size: 1.4rem;
  color: #0055b8;
}

.news-body h3 {
  font-size: 1.05rem;
}

.news-body p {
  font-size: 0.9rem;
  color: #555555;
}

.news-meta {
  font-size: 0.8rem;
  color: #888888;
}

.pagination {
  text-align: center;
  margin-top: 1.3rem;
  font-size: 0.9rem;
}

.pagination a {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  margin: 0 0.15rem;
  border-radius: 2px;
  border: 1px solid #d0d3da;
  color: #333333;
}

.pagination a.active {
  background-color: #0055b8;
  color: #ffffff;
  border-color: #0055b8;
}

.pagination a.disabled {
  color: #bbbbbb;
  border-color: #e0e2e7;
  cursor: default;
}

/* 详情页 */
.article {
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #e0e2e7;
  padding: 1.6rem 1.7rem;
  font-size: 0.95rem;
}

.article-header {
  margin-bottom: 1rem;
}

.article-meta {
  font-size: 0.8rem;
  color: #888888;
}

.article h2 {
  margin-top: 1.2rem;
  font-size: 1.1rem;
}

.article img {
  margin: 0.5rem 0 0.9rem;
}

.copy-link {
  margin-top: 1rem;
  font-size: 0.85rem;
}

/* =====================
   联系我们与地图
   ===================== */
.contact-grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 1.5rem;
}

.contact-info {
  -ms-flex: 1 1 40%;
  flex: 1 1 40%;
  min-width: 260px;
}

.contact-form-wrap {
  -ms-flex: 1 1 50%;
  flex: 1 1 50%;
  min-width: 260px;
}

.map-box {
  margin-top: 1rem;
  height: 260px;
  border-radius: 4px;
  border: 1px solid #d0d3da;
  background: #f0f2f5;
  position: relative;
  overflow: hidden;
}

.map-inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0.8rem;
  font-size: 0.85rem;
  color: #555555;
}

.map-marker {
  position: absolute;
  left: 55%;
  top: 42%;
  width: 16px;
  height: 16px;
  background-color: #b00020;
  border-radius: 50%;
}

.map-marker::after {
  content: "";
  position: absolute;
  left: -6px;
  top: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  border: 1px solid rgba(176, 0, 32, 0.6);
}

.team-card .team-photo {
  margin-bottom: 0.6rem;
}

.team-card .team-photo img {
  width: 100%;
  border-radius: 4px;
}

/* =====================
   底部
   ===================== */
.site-footer {
  background-color: #111111;
  color: #bbbbbb;
  font-size: 0.85rem;
  margin-top: 2rem;
}

.footer-inner {
  padding: 1.8rem 15px 1rem;
}

.footer-links {
  margin-bottom: 0.8rem;
}

.footer-links a {
  color: #bbbbbb;
  margin-right: 1rem;
  font-size: 0.85rem;
}

.footer-links a:hover {
  color: #ffffff;
}

.risk-text {
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

.back-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  display: none;
  z-index: 40;
}

.back-top-show {
  display: block;
}

/* 底部返回顶部按钮全局隐藏（保留在线客服中的返回顶部） */
.back-top {
  display: none !important;
}

/* =====================
   右侧在线客服条
   ===================== */
.online-service {
  position: fixed;
  right: 0.3rem;
  top: 38%;
  z-index: 45;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  overflow: visible;
  color: #ffffff;
  font-size: 0.8rem;
  width: 65px;
}

.online-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.4rem 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-align: center;
  min-width: 65px;
  line-height: 1.35;
  position: relative;
}

.online-item:last-child {
  border-bottom: none;
}

.online-item::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 0.28rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  opacity: 0.95;
}

.online-phone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.9 19.9 0 0 1 3.1 8.8 19.9 19.9 0 0 1 2 2.2 2 2 0 0 1 4 0h3a2 2 0 0 1 2 1.7c.1 1 .3 2 .7 2.8a2 2 0 0 1-.4 2.1L8.5 8.5a16 16 0 0 0 7 7l2.9-1.5a2 2 0 0 1 2.1.2c.9.4 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

.online-qq::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 1.5c-3 0-5 2.4-5 6.1 0 .7.1 1.3.2 1.9C5.4 11.2 4 13.7 4 16a1 1 0 1 0 2 0c0-.4.1-.9.3-1.3a10.8 10.8 0 0 0 1.5 2.9c-1 .2-1.8.7-1.8 1.4 0 1.1 2.8 2 6 2s6-.9 6-2c0-.7-.8-1.2-1.8-1.4a10.8 10.8 0 0 0 1.5-2.9c.2.4.3.9.3 1.3a1 1 0 1 0 2 0c0-2.3-1.4-4.8-3.2-6.5.1-.6.2-1.2.2-1.9C17 3.9 15 1.5 12 1.5zM8.2 19.4a9.6 9.6 0 0 1-1-1.6c.5.2 1 .3 1.6.4a11 11 0 0 0 3.2.4c1.1 0 2.2-.1 3.2-.4.6-.1 1.1-.2 1.6-.4-.2.6-.6 1.1-1 1.6-.7.7-2.4 1.1-3.8 1.1s-3.1-.4-3.8-1.1z'/%3E%3C/svg%3E");
}

.online-wechat::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%23ffffff' d='M9.2 4C5.8 4 3 6.2 3 8.9c0 1.5.8 2.8 2.2 3.8l-.6 2.2 2.2-1.4c.8.2 1.5.3 2.4.3 3.4 0 6.2-2.2 6.2-5S12.6 4 9.2 4Zm-.9 2.2a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Zm3.6 0a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8Z'/%3E%3Cpath fill='%23ffffff' d='M20.8 10.8c-1.4 0-2.6.6-3.5 1.4-.1 2.4-2.2 4.5-4.9 5.2.6.3 1.2.4 1.9.4.7 0 1.4-.1 2-.3l1.8 1.1-.5-1.8c1.2-.9 2-2.1 2-3.6 0-.9-.4-1.7-1-2.4.7 0 1.2-.5 1.2-1 0-.5-.5-1-1-1Z'/%3E%3Ccircle fill='%230055b8' cx='13.2' cy='8.8' r='.35'/%3E%3C/svg%3E");
}

.online-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E");
}

.online-item span {
  display: block;
  font-size: 0.72rem;
  opacity: 0.88;
  line-height: 1.25;
  margin-top: 0.05rem;
}

.online-item:hover {
  background-color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
}

.online-wechat {
  cursor: pointer;
}

.online-wechat::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 132px;
  height: 132px;
  margin-right: 10px;
  transform: translateY(-50%) scale(0.9);
  background-color: #ffffff;
  background-image: url("../images/erweima.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 132px 132px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 50;
}

.online-wechat:hover::after,
.online-wechat:focus::after,
.online-wechat.wechat-open::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}

/* =====================
   响应式
   ===================== */
@media (max-width: 960px) {
  .main-nav ul {
    position: absolute;
    right: 0;
    top: 120%;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    padding: 0.6rem 0.8rem;
    display: none;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 180px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    z-index: 80;
  }

  .main-nav-open ul {
    display: -ms-flexbox;
    display: flex;
  }

  .nav-toggle {
    display: block;
  }

  .main-nav li {
    margin-left: 0;
  }

  .banner {
    height: 420px;
  }

  .banner-content {
    padding-top: 2.4rem;
  }

  .banner-content h1 {
    font-size: 1.5rem;
  }

  .feature-item {
    width: 48%;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 0.94rem;
  }

  .section {
    padding: 2.2rem 0;
  }

  .header-main-inner {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .header-hotline {
    margin-top: 0.4rem;
  }

  .news-item {
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .news-date {
    margin-right: 0;
    margin-bottom: 0.4rem;
    text-align: left;
  }

  .modal {
    margin-left: -45%;
  }

  .banner {
    height: 460px;
  }

  .banner-content {
    padding-top: 2.6rem;
  }

  .feature-item {
    width: 100%;
  }

  .form-row input,
  .form-row select,
  .form-row textarea {
    font-size: 1rem;
  }

  .btn {
    padding: 0.6rem 1.1rem;
  }

  .btn-block {
    width: 100%;
  }
}