/* 细体 / 常规 */
@font-face {
  font-family: "SourceHanSansCN";
  src: url("/static/addons/cms/dist/fonts/SourceHanSansCN-Regular.woff2") format("opentype");
  font-weight: 400;
  font-style: normal;
}

/* 粗体 */
@font-face {
  font-family: "SourceHanSansCN";
  src: url("/static/addons/cms/dist/fonts/SourceHanSansCN-Bold.woff2") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/* 重体 / 特粗 */
@font-face {
  font-family: "SourceHanSansCN";
  src: url("/static/addons/cms/dist/fonts/SourceHanSansCN-Heavy.woff2") format("opentype");
  font-weight: 900;
  font-style: normal;
}
/* Arial 常规体 */
@font-face {
  font-family: "Arial";
  src: url("/static/addons/cms/dist/fonts/arial.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* Arial 粗体 */
@font-face {
  font-family: "Arial";
  src: url("/static/addons/cms/dist/fonts/arialbd.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
.hansan {
  font-family: "SourceHanSansCN";
}
body{
    font-family:"Arial","SourceHanSansCN" ;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* user-select: none; */
  position: relative;
}
:root {
  font-size: clamp(13px, 0.83333vw, 16px);
  --px: max(calc((100vw - 1400px) / 2), 10rem);
  --theme-color: #112967;
  --transition-default: all 0.4s ease-in-out;
  --swiper-navigation-color: var(--theme-color);
}
.transitionDefault {
  transition: var(--transition-default);
}
.lrPadding {
  padding-left: var(--px);
  padding-right: var(--px);
}
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background: var(--theme-color);
  border-radius: 1.25rem;
  width: 2px;
  height: 4px !important;
}
[tr-enter] {
  transition: all 1.4s;
}
[tr-enter=""] {
  transform: translateY(2rem);
  opacity: 0;
}
[tr-enter-left=""] {
  transform: translateX(-10vw);
  opacity: 0;
}
a {
  text-decoration: none;
  color: inherit;
}

button {
  outline: none;
  background: none;
  border: none;
  height: auto;
  width: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
}
[button] {
  border: none;
  cursor: pointer;
  display: inline-block;
  position: relative !important;
  inset: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--origin-bg, currentColor);
  height: 3rem ;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
  gap: 0.5rem;
  border-radius: 0.375rem;
  background: linear-gradient(
    to right,
    var(--hover-bg, var(--theme-color)) 50%,
    var(--origin-bg, transparent) 50%
  );
  background-size: 210% 100%;
  background-position: 98% 0;
  transition: var(--transition-default);
  user-select: none;
}
[button="arrow"],
[button="arrow-l"] {
  border-radius: 10000px;
  width: 3.125rem !important;
  height: 3.125rem !important;
  padding: 0;
}
[button="arrow"]:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8 10H18 M18 10 L14 6 M18 10 L14 14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='4' cy='10' r='0.8' fill='black'/%3E%3Ccircle cx='6.5' cy='10' r='0.8' fill='black'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: var(--transition-default);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8 10H18 M18 10 L14 6 M18 10 L14 14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='4' cy='10' r='0.8' fill='black'/%3E%3Ccircle cx='6.5' cy='10' r='0.8' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
[button="arrow-l"]:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12 10H2 M2 10 L6 6 M2 10 L6 14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='14' cy='10' r='0.8' fill='black'/%3E%3Ccircle cx='16.5' cy='10' r='0.8' fill='black'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: var(--transition-default);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12 10H2 M2 10 L6 6 M2 10 L6 14' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='14' cy='10' r='0.8' fill='black'/%3E%3Ccircle cx='16.5' cy='10' r='0.8' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
[button="close"]:after {
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 10H18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: 80%;
  mask-position: center;
}
[button="open"]:after {
  content: "";
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 10H18 M10 2V18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: 80%;
  mask-position: center;
}
[button]:hover {
  background-position: 0 0;
  color: var(--hover-text, white) !important;
  border-color: var(--hover-bg, var(--theme-color));
}
/* :is([button="arrow"], [button="arrow-l"]):after {
  content: "";
  transform: translateX(40%);
} */
h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #222;
  line-height: 1;
}
h2 {
  font-size: 3rem;
  font-weight: bold;
  color: #222;
  line-height: 1;
}
p {
  line-height: 1.65;
  text-align: justify;
}
section {
  /* font-size: 1rem; */
  color: #222;
}
[bg] {
  object-fit: cover;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1024px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  :root{
    --px: max(calc((100vw - 1400px) / 2), 1.2rem);
     font-size:14px;
  }
}
@media (min-width:1024px){
    [card] {
      transition: var(--transition-default);
    }
    [card]:hover {
      transform: translateY(-10px);
    }
}

[line] {
  width: max-content;
}
[line]:after {
  content: "";
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: var(--transition-default);
  position: absolute;
  bottom: 0;
  left: 0;
}
[line]:hover:after {
  content: "";
  width: 100%;
}

[circleButton] {
  background: radial-gradient(
      circle at center,
      var(--theme-color) 50%,
      transparent 50%
    )
    no-repeat center;
  background-size: 0 0;
  transition: var(--transition-default);
}
[circleButton]:hover {
  background-size: 200% 200%;
  border-color: var(--theme-color);
  color: white;
  box-shadow: var(--theme-color) 0 0 6px;
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
input {
  border: none;
  outline: none;
  background: transparent;
}
input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

:root {
  /* swiper滚动条样式 */
  --swiper-navigation-size: 2rem !important;
  --swiper-scrollbar-bg-color: rgba(3, 13, 41, 0.1);
  --swiper-scrollbar-drag-bg-color: var(--theme-color);
}
/**swiper*/
.swiper-scrollbar {
  width: 100% !important;
  height: 2px !important;
  position: relative !important;
  left: 0 !important;
  margin-top: 3.75rem;
}

/**分页**/
.swiper-pagination-current {
  font-size: 1rem;
  color: var(--theme-color);
  line-height: 1;
}
.swiper-pagination {
  width: auto !important;
  font-size: 1rem !important;
  color: rgba(34, 34, 34, 0.3) !important;
  font-family: regular;
  line-height: 1;
  position: relative !important;
  inset: 0 !important;
}
.swiper-pagination-total {
  font-size: 1rem;
  color: rgba(34, 34, 34, 0.3);
  line-height: 1;
}

.swiper-slide {
}

/* 翻页 */
#pages {
  display: flex;
  gap: 0.625rem;
}
#pages > li {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-size: 0.875rem;
  cursor: pointer;
  background: rgba(226, 226, 231, 0.5);
}
#pages a{
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pages > li:last-of-type :is(a, span),
#pages > li:first-of-type :is(a, span) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
#pages > li:first-of-type:before {
  content: "";
  display: inline-block;
  width: 60%;
  height: 60%;
  background-color: black; /* 通过 color 控制图标颜色 */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 30 L40 50 L60 70' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M60 30 L40 50 L60 70' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
}

#pages > li:last-of-type:before {
  content: "";
  display: inline-block;
  width: 60%;
  height: 60%;
  background-color: black; /* 通过 color 控制图标颜色 */

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M40 30 L60 50 L40 70' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}
#pages > li:hover {
  background: var(--theme-color);
  color: white;
}
#pages > li:first-of-type:hover:before,
#pages > li:last-of-type:hover:before {
  content: "";
  background: white;
}
#pages .active {
  background: var(--theme-color);
  color: white;
}

[currentTab] {
  color: var(--theme-color);
  border-bottom: 2px solid var(--theme-color);
}

/* 首页和产品底部表单 */
@media (min-width: 1024px) {
  .form-bg {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 8rem 100%);
    padding-left: 12rem;
    padding-block: 8.25rem;
  }
}
.custom-input:has(> :focus) {
  border-color: white;
}
textarea {
  background: transparent;
  outline: none;
  border: none;
}
/* 省略两行 */
.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height:1.4;
}
.ellipsis3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height:1.4;
}

[class*="-out"]>.swiper-wrapper>.swiper-slide:not(.swiper-slide-active) {
  opacity: 0 !important;
}
.ripple {
  position: absolute;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 1.875rem;
  background: currentColor; /* 实心圆点 */
}

/* 两个伪元素共用基础样式 */
.ripple::before,
.ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  animation: expand 3s ease-out infinite;
}

/* ::before 先启动 */
.ripple::before {
  animation-delay: 0s;
}

/* ::after 延迟 1.5s 启动，形成依次扩散 */
.ripple::after {
  animation-delay: 1.5s;
}

@keyframes expand {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
dialog {
  /* 外观 */
  border: none;
  background: linear-gradient(#dfe5ef, white);
  box-shadow: 0px 15px 114px 0px rgba(0, 0, 0, 0.05);
  max-width: 30rem;
  width: 80%;
  max-height: 60vh;
  overflow-y: auto;
  position: fixed;
  margin: auto;
  
  /* 入场动画 */
  animation: dialogIn 0.3s ease;
}
dialog>div{
      padding: 1.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
dialog  span {
  text-align: center;
}

/* ===== 4. 入场动画 ===== */
@keyframes dialogIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ===== 2. 遮罩层 ===== */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}



input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: white !important; 
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* 用纯白内阴影覆盖背景，可替换 #fff 为你需要的颜色 */
    box-shadow: 0 0 0 1000px transparent inset !important; /* 标准属性，增加兼容性 */
    transition: background-color 5000s ease-in-out 0s; /* 可选：用于应对其他特殊情况 */
    background-color: transparent !important; /* 保留，但主要靠 box-shadow 生效 */
}