@charset "UTF-8";
:root:not([data-theme="dark"]),:root{
    --pico-primary: #0017C4; 
    --pico-secondary: rgb(77, 91, 124);  
    --pico-contrast: #8D93A5;
    --pico-background-color: #fff; 
    --pico-text: #8D93A5; 
    --pico-text-over: #00BADB; 
    --pico-underline:#343a40;
    --pico-primary-background:#000000; 
    --pico-primary-hover-background: var(--pico-primary);
    --pico-accordion-active-summary-color:#000;
    --footer-background-color:#0017C4;
    --footer-text-color:#fff;
    --pico-mark-gradient: linear-gradient(to right, #00BADB, #00BADB, #00BADB, #0017C4);
    --pico-form-element-spacing-vertical: 0.65rem; 
    --pico-form-element-spacing-horizontal:1.5rem; 
    --border-radius:4px;
    --color-1class:#00BADB;
    --color-2class:#F9C8B8;
    --color-3class:#E2F1DA;
    --color-4class:#E3E3ED;
  
}
body{font-size: 16px;}
article{background-color: #fff;}
a {
    text-decoration: none;
    color:var(--pico-text);
}
a:hover{text-decoration: none; color: #000; }
ul li{
    align-items: center;
    margin-bottom: 5px;
    padding: 0;
    list-style: none;
}
ul{padding-left: 0}
.fr{float: right;}
.fl{float: left;}
.text-center {text-align: center !important;}
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.mx-auto {margin-right: auto !important;margin-left: auto !important;}
.rotate-180{transform: rotateY(180deg); }
.bg-white{background-color: #fff;}
.bg-gray{background-color: #F8FAFB;}
.block{display: block;}
.hide{display: none;}
.overflow-hidden{overflow: hidden;}
/*font color*/
.primarycolor{ color:var(--pico-primary)}
.secondarycolor{ color:var(--pico-secondary)}
.tertiarycolor{ color:var(--pico-contrast)}
.black{color:#000;}
.white{color:#fff;}
.gray{color:var(--pico-text);}

.rounded-4{ border-radius:var(--border-radius); }
.rounded-10{ border-radius:10px;}
.rounded-20{ border-radius:20px;}
.rounded-full {  border-radius: 9999px;}

.border{border:1px solid #E4E4E7;}

.shadow-card {
    box-shadow: 0px 1px 5px rgba(45, 74, 170, 0.14);
}
.titleline{  position: relative; z-index: 2; cursor: pointer; opacity: 1; line-height: 1;  }
.titleline::after {
  content: "";
  position: absolute;
  left: -0.05rem;
  bottom: 0.50rem;
  right: 0;
  height: 0.58rem;
  background: #29a8d1;
  display: block;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-out;
  line-height: normal; 
}

.titleline:hover::after {
  transform: scaleX(1);
}
.titlesize{font-size: clamp(2rem,1.65rem + 1.75vw,3.75rem);}
.imgstyle img{transition: all .2s; }
.imgstyle:hover img {transform: scale(1);opacity: 0.8;transition: all .2s;overflow: hidden;}

.word-li{display: flex; flex-wrap: wrap;}
.word-li a{display: inline-block; padding: 6px 15px; border: 1px solid #EEE; border-radius: 30px; margin-right: 15px; margin-bottom: 5px; color: #000; }
.word-li a:hover{background-color: var(--pico-primary); border-color: var(--pico-primary); color: #fff;}

.round-dong span{
  font-size: 50px;
  color: rgb(53, 53, 53);
  transform-origin: center center;
  animation: 25s linear 0s infinite normal forwards running circle;
  display: inline-block;
}

/* 添加旋转动画关键帧 */
@keyframes circle {
0% {
    transform: rotate(0);
}
50% {
    transform: rotate(180deg);
}
100% {
    transform: rotate(1turn);
}
}

/* 添加淡入动画关键帧 */
@keyframes fade {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}
100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
}
/* 小球动画 */
@keyframes blob {
  0% {
      transform: translate(0) scale(1)
  }

  33% {
      transform: translate(30px,-50px) scale(1.1)
  }

  66% {
      transform: translate(-20px,20px) scale(.9)
  }

  to {
      transform: translate(0) scale(1)
  }
}

/*google font*/
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.staatliches-regular {
  font-family: "Staatliches", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:Figtree,var(--pico-font-family)
}
@media(min-width:576px) {
  h1 {
    --pico-font-size:2.5rem;
    --pico-line-height:1.0625
  }
  h2 {
    --pico-font-size:2rem;
    --pico-line-height:1.125
  }
  h3 {
    --pico-font-size:1.75rem;
    --pico-line-height:1.15
  }
  h4 {
    --pico-font-size:1.5rem;
    --pico-line-height:1.175
  }
  h5 {
    --pico-font-size:1.25rem;
    --pico-line-height:1.2
  }
  h6 {
    --pico-font-size:1.125rem;
    --pico-line-height:1.225
  }
}
@media(min-width:1536px) {
  h1 {
    --pico-font-size:3rem;
    --pico-line-height:1
  }
  h2 {
    --pico-font-size:2.5rem;
    --pico-line-height:1.0625
  }
}

.fade-in {
  animation-duration:1s;
  animation-fill-mode:both;
  animation-name:fade-in
}
@keyframes fade-in {
  0% {
    opacity:0
  }
  to {
    opacity:1
  }
}
a .icon-arrow-right {
  --icon-right-toggle-duration:.2s;
}
a .icon-arrow-right g.head,
a .icon-arrow-right path.line {
  transition-duration:var(--icon-right-toggle-duration);
  transition-property:transform;
  transition-timing-function:ease-in-out
}
a .icon-arrow-right g.head {
  transform:translate(0)
}
a .icon-arrow-right path.line {
  transform:translate(0) scaleX(0);
  transform-origin:14px
}
a:hover .icon-arrow-right g.head {
  transform:translate(5px)
}
a:hover .icon-arrow-right path.line {
  transform:translate(5px) scaleX(1)
}
mark {
  padding:0;
  background:var(--pico-mark-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.morelink a{border: 2px solid var(--pico-primary); padding: 10px 35px;background-color: transparent; color: var(--pico-primary); }
.morelink a:hover{ border-color: var(--pico-primary); color: #fff; box-shadow: var(--pico-card-box-shadow);background-color: var(--pico-primary); }

/* 添加滚动容器基础样式 */
.scroll-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch; /* 增加移动端滚动平滑度 */
  touch-action: pan-x pan-y; /* 允许触摸滑动 */
}

/* 横向滚动 */
.scroll-horizontal {
  display: flex;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.scroll-horizontal .scroll-content {
  display: flex;
  animation: scrollLeft 20s linear infinite;
  will-change: transform; /* 优化动画性能 */
}

/* 纵向滚动 */
.scroll-vertical {
  display: block;
}

.scroll-vertical .scroll-content {
  display: block;
  animation: scrollUp 20s linear infinite;
}

/* 内容样式 */
.scroll-content {
  display: flex;
}

.scroll-content img {
  flex-shrink: 0;
}

@keyframes scrollLeft {
  0% {
      transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 改为-100%使其滚动完整内容长度 */
  }
}

@keyframes scrollLeft-mobile {
  0% {
      transform: translateX(0);
  }
  100% {
    transform: translateX(-500%); /* 改为-100%使其滚动完整内容长度 */
  }
}
/* 修改纵向滚动动画 */
@keyframes scrollUp {
  0% {
      transform: translateY(0);
  }
  100% {
    transform: translateY(-100%); /* 改为-100%使其滚动完整内容长度 */
  }
}

/* 鼠标悬停暂停 */
.scroll-container:hover .scroll-content {
  animation-play-state: paused;
}

/* 自定义滚动速度的类 */
.scroll-slow .scroll-content {
  animation-duration: 30s;
}

.scroll-fast .scroll-content {
  animation-duration: 15s;
}


@media (max-width: 768px) {
  .scroll-horizontal .scroll-content {
    animation-duration: 30s; /* 从15s改为30s,速度减半 */
    animation-name: scrollLeft-mobile;
  }
  
  .scroll-vertical .scroll-content {
    animation-duration: 30s; /* 从15s改为30s,速度减半 */
  }
  
  /* 移动端触摸时暂停动画 */
  .scroll-container:active .scroll-content,
  .scroll-container:focus .scroll-content {
    animation-play-state: paused;
  }
  
  /* 移动端自定义速度类 */
  .scroll-slow .scroll-content {
    animation-duration: 60s; /* 从40s改为60s,慢速更慢 */
  }
  
  .scroll-fast .scroll-content {
    animation-duration: 40s; /* 从20s改为40s,快速也相应减慢 */
  }
  
  /* 优化移动端图片大小 */
  .scroll-content img {
    max-width: 80vw; /* 限制图片最大宽度 */
    height: auto;
  }
}

/* 添加移动端触摸反馈 */
@media (hover: none) {
  .scroll-container {
    cursor: grab;
  }
  
  .scroll-container:active {
    cursor: grabbing;
  }
}


.navtop{width: 100%; height: 36px; line-height: 36px; color: #fff;background: var(--pico-primary);font-size: 12px;}
.navtop .container{}
.navtop .l a{color: #fff;}
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0px 10px 0 rgba(54,55,69,0.1);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0;
    height: 80px;
}

.navtop .container, .navbar .container {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.navbar .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

.navbar .logo-img {
    height: 32px;
    margin-right: 2px;
}

.navbar .logo-text {
    font-size: 12px;
    font-weight: bold;
    position: relative;
}
.navbar .logo-text sup{position: absolute; left: 0; top: -12px;}
.logo:hover .logo-text sup{color: var(--pico-primary);}

.navbar .nav-links {
    display: flex;
    gap: 1px;

}

.navbar .dropdown {
    position: relative;
    height: 80px;
    line-height: 80px;
}
.navbar .dropdown a.nav-menu {
    color:#000;
    text-decoration: none;
    font-size: 16px;
    padding:6px 15px;
    border-radius:9999px; 
    font-weight: 700;
}
.navbar .dropdown a.nav-menu:hover{background-color: rgba(99,91,255,.05); padding:6px 15px; border-radius:9999px;color:var(--pico-primary); }

.navbar .dropdown a.nav-menu:hover svg{transform: rotate(180deg);}


.navbar .dropdown-content {
    display: none;
    position: absolute;
    top:80px;
    background-color: #fff;
    min-width: 250px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius:0 0 4px 4px;
    padding: 10px 5px 10px 5px;
    border: 1px solid #EEE;
    transition: background .3s ease;
}

.navbar .dropdown:hover .dropdown-content {
    display: block;
}

.navbar .dropdown-content a {
    color: #333;
    padding: 2px 16px;
    text-decoration: none;
    border-radius: 0;
    width: 100%;
    display: block;
    line-height: 30px;
    transition: all 0.3s ease;
}

.navbar .dropdown-content a:hover {
    background-color: #f1f1f1;
    border-radius: 0;
    color: var(--pico-primary);
    padding-left: 18px;
    transition: all 0.3s ease;
}

.userbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar .btn {
    border: none;
    color: #FFF;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    padding: 9px 20px;
    font-weight: bold;
    background: linear-gradient(90deg, #29a8d1, #29a8d1 16%, #29a8d1 33%, #29a8d1 50%, #29a8d1 66%, #29a8d1 83%, #29a8d1);
}
.navbar .btn:hover {
    background: #0017C4;
}
.navbar .btn a{color: #FFF;}
.navbar .btn a:hover, .navbar .btn:hover a{color: #FFF;}

.navbar .language-selector span{margin-left: 4px;}

.navbar .arrow-icon {
    margin-left: 5px;
}

.navbar .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.navbar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navbar .menu-button {
    display: none;
    background: none;
    border: none;
    color: #333;
    font-size: 24px;
    cursor: pointer;
    margin-right: -15px;
}
.navtop .r{height: 36px; line-height: 36px;display: flex;justify-content: flex-end;}
.top-txt{height: 36px; line-height: 36px; overflow: hidden; display: inline-block;align-items: center; }

.language-selector {
  position: relative;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  margin-left: 20px;
  text-align: right;
  margin-top: 0;
}

.lang-btn {
  display: flex;
  align-items: center; /* 保持垂直居中 */
  justify-content: flex-end; /* 添加内容右对齐 */
  gap: 8px;
  padding-left: 12px;
  padding-right: 12px; 
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
  border-radius: 0;
  height: 36px;
  line-height: 36px;
  width: 100%;
}

.lang-btn:hover {
  background: rgba(255,255,255,0.1);
}

.lang-btn svg {
  color: currentColor;
}

.lang-btn .arrow {
  transition: transform 0.3s ease;
}

.language-selector:hover .arrow {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0px;
  padding: 5px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  min-width: 120px;
  z-index: 1000;
  overflow: hidden;
  flex-direction: column;
  text-align: left;
  
}


.language-selector:hover .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown a.lang-option {
  width: 100%;
  display: block;
  padding: 0px 10px;
  color: #333;
  text-decoration: none;
  transition: background 0.3s ease;
  text-align: left;
  margin-bottom: 1px;
  line-height: 28px;
}

.lang-option:hover {
  background: #f5f5f5;
  width: auto;
}

.lang-option img {
  width: 18px;
  margin-right: 5px;
  object-fit: cover;
  overflow: hidden;
}


@media (max-width: 768px) {
  .lang-dropdown {

  }
  
  .lang-btn {
    
  }
}

.pro-xiala{padding: 20px 20px 20px 30px; position: relative; z-index: 0; }
.pro-xiala::before{    background: url(../img/man.png) no-repeat center bottom; 
  background-size: 100% auto; 
  position: absolute; 
  width: 80px; 
  height: 200px; 
  content:''; 
  bottom:-15px; 
  right: 30%; 
  z-index:200;
  opacity: 0.1;
 }
 .pro-xiala:hover::before{opacity: 0.4;}
.pro-xiala a{padding-left: 0;}
.navbar .dropdown-content .pro-xiala a{padding-left: 0;transition: all 0.3s ease;}
.navbar .dropdown-content .pro-xiala a:hover{background-color: transparent; color:#000;padding-left: 2px; transition: all 0.3s ease; }

.pro-xiala .l{width: 75%;}
.pro-xiala .l {
  display: flex;
  flex-wrap: wrap;
}
.pro-xiala .l p, .pro-xiala .r p{width: 100%;}
.pro-xiala .l p a, .pro-xiala .r p a{color: #525252;font-size: 13px;  }
.pro-xiala .l span {
  display: flex; 
  align-items: center;
  width: calc(50% - 10px); 
  margin-bottom: 0px;
}

.pro-xiala .l span i {
  display: inline-block; 
  flex-shrink: 0; 
}

.pro-xiala .l span a {
  display: inline-block;
  line-height: 38px; 
  padding-left: 0;
  white-space: nowrap; 
  color: var(--pico-primary);
}
.pro-xiala .l span a:hover { color: #000; }

.pro-xiala .r{width: 25%;padding-left: 20px;  position: relative; }
.pro-xiala .r::before{ position: absolute; content: ''; left: -30px; bottom: 28px; width: 1px; height: 70%;background-color: #DFDFDF;  }
.pro-xiala .r a{color: #515151;}
.pro-xiala .r a:hover, .navbar .dropdown-content .pro-xiala .r a:hover{color: var(--pico-primary);}

@media (max-width: 992px) {
  .pro-xiala .l span {
    width: calc(50% - 10px); /* 较小屏幕时每行2个 */
  }
}

@media (max-width: 576px) {
  .pro-xiala .l span {
    width: 100%; /* 移动端时每行1个 */
  }
  .pro-xiala .l {
    width: 100%;
  }
  .pro-xiala .r {
    width: 100%;
    margin-top: 15px;
  }
}

i[class^="i-"] {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-image: url('../img/small_man.png');
  background-size: 200px 200px; 
  background-repeat: no-repeat;
  margin-right: 8px;
  vertical-align: middle; 
  position: relative; 
  top: -1px; 
}

.i-ankle {
  background-position:  -13px -14px;
}
.i-hip {
  background-position: -13px -153px;
}
.i-hand {
  background-position: -13px -83px;
}
.i-back {
  background-position: -83px -85px;
}
.i-neck {
  background-position: -83px -12px;
}
.i-knee {
  background-position: -152px -13px;
}
.i-waist {
  background-position: -154px -82px;
}

.i-shoulder {
  background-position: -82px -154px;
}
.i-elbow {
  background-position: -152px -152px;
}

i[class^="g-"] {
  display: inline-block;
  width: 35px;
  height: 35px;
  background-image: url('../img/ico/Wireless4.png');
  background-size: 233px 35px; 
  background-repeat: no-repeat;
  margin-right: 5px;
  vertical-align: middle; 
  position: relative; 
  top: -1px; 
}

.g-Vibration {background-position: 0 0;}
.g-Pressure{background-position: -39px 0;}
.g-Heating {background-position: -79px 0;}
.g-RedLight {background-position: -119px 0;}
.g-Timer {background-position: -159px 0;}
.g-Wireless {background-position: -198px 0;}


.mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 1000;
  overflow-y: auto;
}

.mobile-menu.active {
  display: block;
}


.mobile-nav-links {
  padding: 20px;
}

.mobile-dropdown {
  margin-bottom: 1px;
  border-bottom: 1px solid var(--color-3class);
  display: block;
  padding: 10px 0;
  position: relative;
}
.mobile-dropdown svg.lucide{position: absolute; right: 5px; top: 15px; width: 15px; height: 15px;}
.mobile-dropdown.on svg.lucide{transform: rotate(180deg);}

.mobile-nav-menu {
  padding: 10px 0;
  font-size: 18px;
  color: #333;
  text-decoration: none;
  font-weight: 600;
}

.mobile-dropdown-content {
  display: none;
  padding-left: 20px;
  margin-top: 10px;
}

.mobile-dropdown-content.show {
  display: block;
}

.mobile-dropdown-content a {
  width: 100%;
  display: block;
  padding: 8px 0;
  color: #666;
  text-decoration: none;
  border-bottom: 1px dotted var(--pico-contrast);
  font-weight: normal;
  padding-left: 10px;
}
.mobile-dropdown-content a svg{margin-right: 20px;}
.mobile-dropdown-content a:last-child{border-bottom: none;}
.mobile-nav-menu.block{padding: 0px 0;}

.mobile-language-selector {
  padding: 20px;
  border-top: 1px solid #eee;
  display: none;
}


@media (max-width: 768px) {
  .navtop{display: none;}
  .navbar .nav-links {display: none;}
  .navbar .logo-text{display: none;}
  .userbox {display: none;}
  .navbar .menu-button {display: block;}
  .mobile-language-selector{display: block;}

}


@media (min-width: 769px) {
  .menu-button {
      display: none;
  }
}

.homepage {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}
.homepage::after {
  content: '';
  display: table;
  clear: both;
}

#banner{height: 838px;background-image: radial-gradient(at 10% 10%, #e6f6fe 0px, transparent 50%), radial-gradient(at 90% 20%, #ffece5 0px, transparent 50%); position: relative; z-index: 0;}
#banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

#banner .bannerlist{ position: absolute; width: 100%; height: 100%; z-index: 100;top: 0;  left: 0; }

#banner .bantxt{ margin-top: 9rem; color: #FFF; position: relative; z-index: 10;}
#banner .bantxt::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 100%;
  height: 120%;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
  border-radius: 20px;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
#banner .bantxt h2 span{position: relative;color: #FFF;}
#banner .bantxt h2 span svg{width: 100%; position:absolute; left:0; bottom:-20px; height:20px; color:#fff; }
#banner .bantxt p{font-size: 0.9rem;line-height: 1.55rem; padding-right: 4.5rem; color: #fff}
#banner .bantxt h5{color: #FFF;margin-top: 2rem;}
#banner .bantxt .image-bg{position: absolute;
    top: 38%;
    left: -10%;
    border-radius: 50%;
    width: 292px;
    height: 292px;
    background-image: linear-gradient(-45deg, #2636D4 50%, #4ABFB7 50%);
    filter: blur(68px);
    transform: translate(-50%, -50%);
    animation: blob 7s infinite;
    z-index: -1;
}
#banner .hua span{color: var(--pico-text-over); z-index: 2; position: absolute;bottom: -38px;left: 30px;}

#banner .bantxt .btngo{ 
  color: #fff;
  position: relative;
  border: none;
  padding: 10px 24px;
  border-radius: 30px;
  transition: all 0.3s ease;
}

#banner .bantxt .btngo::before{
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -1;
  border-radius: 30px;
  background: linear-gradient(90deg, #DCFF63, #7BF4E2, #3A6DF2, #FF5C2E, #FFBE26);
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
}

#banner .bantxt .btngo::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  border-radius: 28px;
  z-index: -1;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#banner .bantxt .btngo:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.my-swiper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  z-index: 0;

  
}

.swiper-list {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初始状态为透明 */
  z-index: 1; /* 默认层级 */
  transition: opacity 2s ease; /* 减少过渡时间，从10s改为2s */
}

.swiper-slide1 {
  opacity: 1;
  z-index: 2;
}

.swiper-slide a {
  display: block;
  height: 100%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoom 31s infinite;
  z-index: 1;
  opacity: 1;
}
@keyframes zoom{
  100%{
      transform: scale(1.15);
  }
}

.swiper-pagination {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  line-height: 40px;
  text-align: center;
  z-index: 10; 
}
.swiper-pagination .dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 3px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0,21,176, 0.5);
}


.swiper-pagination .dot.active {
  background: var(--pico-primary);
  width: 21px;
  height: 21px;
}


@keyframes fadeAnimation {
  0%, 20% {
    opacity: 1;
    z-index: 5;
  }
  22%, 25% {
    opacity: 0.8;
    z-index: 4;
  }
  26%, 100% {
    opacity: 0;
    z-index: 1;
  }
}


.swiper-slide1 {
  animation: fadeAnimation 15s infinite;
}
.swiper-slide2 {
  animation: fadeAnimation 15s infinite 3s;
}
.swiper-slide3 {
  animation: fadeAnimation 15s infinite 6s;
}
.swiper-slide4 {
  animation: fadeAnimation 15s infinite 9s;
}
.swiper-slide5 {
  animation: fadeAnimation 15s infinite 12s;
}


@keyframes dotAnimation {
  0%, 20% {
    background: var(--pico-primary);
    width: 21px;
    height: 21px;
  }
  25%, 100% {
    background: #fff;
    width: 20px;
    height: 20px;
  }
}

.swiper-pagination span:nth-child(1) {
  animation: dotAnimation 15s infinite;
}
.swiper-pagination span:nth-child(2) {
  animation: dotAnimation 15s infinite 3s;
}
.swiper-pagination span:nth-child(3) {
  animation: dotAnimation 15s infinite 6s;
}
.swiper-pagination span:nth-child(4) {
  animation: dotAnimation 15s infinite 9s;
}
.swiper-pagination span:nth-child(5) {
  animation: dotAnimation 15s infinite 12s;
}


#home-video{height: 700px; position: relative; overflow: hidden; background: #000; z-index: 0;}
#home-video .video-wrap {
  position: absolute;
  left: -2000px;
  right: -2000px;
  bottom: -100px;
  top: -100px;
  margin: auto;
  width: 100%;
  z-index: 0;
}
#home-video .video-wrap video {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 0;
}

#home-video .fontimg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;}


#shopgo{padding: 7rem 0; background:#F3F5F6 url(../img/terms.jpg) fixed no-repeat center top; background-size: 100% auto;  z-index: 0; position: relative; }
#shopgo::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1;}
#shopgo .container {  position: relative;  z-index: 2;}
#shopgo .button{ background-color: var(--pico-primary); border-color: var(--pico-primary); color: #fff; display: inline-flex; font-weight: 600;transition: all .8s; padding: 15px 35px; }
#shopgo .button:hover{background-color: #36B4D0; color: #fff; border-color: #36B4D0; border-width: 2px; transform: scale(1.1);opacity: 0.8;  transition: all .8s;}

@media (max-width: 768px) {
  #shopgo {
    padding: 3rem 0; /* 减小移动端的内边距 */
    background-size: cover; /* 确保背景图片完整覆盖 */
    background-attachment: scroll; /* 移动端取消fixed效果，提高性能 */
  }
}

/* 添加平板设备的适配 */
@media (min-width: 769px) and (max-width: 1024px) {
  #shopgo {
    background-size: cover;
    background-position: center;
  }
}


#blog article h5 a{color: #000;}
#blog article h5 a:hover{color: var(--pico-primary);}
.bloglist{background-color: #fff;}
.bloglist .img{position: relative; border-radius:4px;overflow:hidden; z-index:0; }
.bloglist .img a{display: block;}
.bloglist .img:before {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 100%);
    border-radius: 4px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    height: 40%;
    z-index: 1;
}
.bloglist .img img{transition: all .2s;}
.bloglist .img:hover img {
    transform: scale(1.1);
    opacity: 0.8;
    transition: all .2s;
}
.sort-ico {
    color: #fff;
    background: var(--pico-primary);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px 10px 10px 3px;
    position: absolute;
    top: 10px;
    left: 10px;
}
.sort-ico:hover{background: #000;}
.sort-ico a{color: #fff;}


.bloglist .img .tag{
  position: absolute; 
  left: 10px; 
  z-index: 10; 
  bottom: 20px; 
  overflow: hidden; 
  display: none; 
  width: calc(100% - 20px); 
  height: 24px; 
  line-height: 24px;
  display: flex; 
  align-items: center; 
}
.bloglist .img .tag a{
  font-size: 12px; 
  font-weight: 400; 
  padding: 4px 13px; 
  border-radius: 9999px; 
  border: 1px solid #fff; 
  color: #fff; 
  margin-right: 10px; 
  opacity: 0;
  display: block;
  align-items: center;
  line-height: 1; 
}
.bloglist .img:hover .tag a{display: block;opacity: 1;}
.bloglist .img:hover .tag a:hover{ background-color: var(--pico-primary); border-color:var(--pico-primary);opacity: 1; }
.bloglist .info{opacity: .8;}
.bloglist .date{ color:var(--pico-contrast); font-size:14px; }
.bloglist .date svg{margin-right: 2px;vertical-align: middle;}

#bloglist .media-list{grid-template-columns: 1fr 1fr 1fr;}
#bloglist article h5 a{color: #000;}
#bloglist article h5 a:hover{color: var(--pico-primary);}
#articleDetail .detail-title{width: 100%;}
#articleDetail a{color:#000;}
#articleDetail a:hover{color: var(--pico-primary);}

#articleDetail .zz a{color:var(--pico-text);}
#articleDetail .zz::after {
  content: "|";
  display: inline-block;
  padding: 0 .5rem;
  color: rgba(0, 0, 0, .15);
}
#articleDetail .detail-body h2{font-size: 1.3rem; font-weight: 600; margin-top: 1.2rem; margin-bottom: 1rem;}
#articleDetail .detail-body h3{font-size: 1rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.6rem;}
#articleDetail .detail-body h4{font-size: 0.8rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem;}
#articleDetail .detail-body h5{font-size: 0.6rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.4rem;}
#articleDetail .detail-body h6{font-size: 0.4rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.3rem;}
#articleDetail .detail-body strong{font-weight: normal;}
#articleDetail .page-links{padding-left: 2.5rem;}
#articleDetail .page-links p{margin-bottom: 10px;}

#articleDetail .sticky-sidebar {
  position: fixed;
  top: 80px;
  max-width: inherit;
  z-index: 10;
}
#articleDetailBody h2, #articleDetailBody h3 {
  padding-top: 0px;
}
#articleDetailBody h3{margin-bottom: 5px;}

.page-link {
  color: #333;
  text-decoration: none;
  display: block;
  padding: 3px 0;
  font-size: 15px;
  transition: all 0.2s;
}

.page-link:hover {
  color: #2D5DC4;
  text-decoration: none;
}
.page-link.indent-3 {
  padding-left: 0.6rem;
  font-size: 0.9em;
  color: #888 !important;
}

.page-link.indent-2 {
  font-weight: 500;
}

#article-headings p {
  margin-bottom: 0.5rem;
}
#article-headings .selected{font-weight: bold; color: var(--pico-primary); }

@media (max-width: 991px) {
  #articleDetail .sticky-sidebar {
      position: static !important;
  }
}



#FAQ{padding: 5rem 0; background: #F8FAFB;}
.faqlist summary{border-bottom: 1px solid #E7EAF0; color: var(--pico-color); padding-bottom: 1rem; padding-left: 0px; padding-right: 30px; font-weight: 600; position: relative; }
.faqlist summary::after { position: absolute; right: 5px; top: 1px;  }
.faqlist ul{padding-left: 10px; padding-right: 10px; color:rgb(121 128 138 / 1)}
.faqlist ul p{margin-bottom: 5px;}
.faqlist article{padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 0.5rem;}
.faqlist details:last-child summary{}
.faqlist details[open]>summary, .faqlist summary:hover {color: var(--pico-primary); }
.faqlist details[open] > summary:not([role]):not(:focus) {color: var(--pico-primary); }

#reviews {background: #F8FAFB;}
#reviews .title .ping-pic img{ height:40px; margin-right: 10px;}
#reviews .title .txt{line-height: 20px;}
#reviews .title .txt b{margin-bottom: 0}
#reviews .title .txt em{font-size: 12px;font-style: normal;}
#reviews .reviews-li{padding: 2.0rem;}
#reviews .reviews-li .su{ height:20px; }
#reviews .reviews-li .star span{}

@media (max-width: 768px) {
  .faqlist article{padding-left: 0.1rem; padding-right: 0.1rem;}
  .faqlist summary{position: relative; padding-right: 1rem; line-height: 1.2rem;}
  .faqlist summary::after{content: ''; position: absolute; right: 5px; top: 4px;  }
  #FAQ .col-12{padding-left: 0rem; padding-right: 0rem;}

  #reviews .reviews-li {
    padding: 1rem; 
  }
  
  #reviews .title .ping-pic img {
    height: 32px; 
  }
  
  #reviews .title .txt {
    font-size: 14px; 
  }
}


#history{background: linear-gradient(227.53deg, #48CBF7 6.72%, #fff 46.43%, #fff 71.41%, #D8F2FA 98.63%);}
#history .rounded-img{border-radius: 0.25rem 0.25rem 0 0; width: 100%;}
#history article{position: relative; z-index: 0;transition: all 0.6s ease; background-color: #fff;}
#history article:nth-child(2){bottom: 30px; }
#history article:nth-child(4){bottom: 20px; }
#history article:hover {  margin-top: -20px; transition: all 0.6s ease;}

.pictxt-2:nth-child(odd) .container{flex-direction: row}
.pictxt-2:nth-child(odd) .l{ float:left; }
.pictxt-2:nth-child(odd) .r{ float:left; }
.pictxt-2:nth-child(even) .row{flex-direction: row-reverse}
.pictxt-2:nth-child(even) .l{ float:right; }
.pictxt-2:nth-child(even) .r{ float:left; }
.pictxt-2:nth-child(even) .l img{float: right;}

.txt-li-num .num{border: 1px solid rgb(235,239,244); width: 50px; height: 50px; line-height:50px;flex: 0 0 50px; }
.ico{ padding:10px; background:#F5F5F5; border-radius:10px; display:block;transition: all .2s;opacity: 1; }
.ico:hover{transform: scale(1.1);transition: all .2s;opacity: 0.8;}

#Pro{background-color: #E6E6E6; position: relative; z-index: 0;  }
#Pro::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 31px;
  background-color: #E6E6E6;
  -webkit-mask-image: url(../img/section-separator-arrow-down-white.svg);
    mask-image: url(../img/section-separator-arrow-down-white.svg);
  z-index: 1;
}

#Pro .l-img{width: 600px; position: absolute; left: 2%; top: 12%; opacity: 0.8;}
#Pro .r-img{width: 600px; position: absolute; right: 2%; top: 12%; opacity: 0.8;}

#Pro .tubiao{ width: 376px;height: 376px; margin-left: -188px; position: absolute; left: 50%; top: 9%; background: url(../img/pro_home_title.png) no-repeat center top; background-size: 98%;  align-items: center;justify-content: center; display: flex; opacity: 0.8; }
#Pro .tubiao .logo{width: 100%; text-align: center; display: flex; align-items: center; justify-content: center;transform-origin: center center;
  animation: 15s linear 0s infinite normal forwards running circle; }
#Pro .tubiao .txt{width: 110%; position: absolute;left:0; bottom: 42px; margin-left: -5%;  z-index: 10; font-size:2.9rem; display: block; }
#Pro .tubiao .txt b{z-index: 5; display: block;padding: 0; font-weight: 900;
  background: #000;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;}
#Pro .tubiao .txt svg{  position: absolute; z-index: -1; left: 10px; bottom: -23px; width: 92%; height: 40px; transform: rotate(-4deg);  color:#000}
#Pro .title{margin-top: 50px; }
#Pro .title h2{font-size:clamp(2rem,1.65rem + 1.75vw,3.75rem); }

#Pro .pro-box{position: relative; z-index: 0;padding-left: 20px;padding-right: 20px;}
#Pro .proli{position: relative; transition: all 0.9s ease; }
#Pro .proli .img{width: 45%; border-radius: 10px 0 0 10px; overflow: hidden; position: relative;}
#Pro .proli .txt{width: 55%;  border-radius: 0 10px 10px 0; padding: 2.2em 1.2em 0em 4.0em; overflow: hidden; }
#Pro .proli .txt h2 sup{font-size: 14px; margin-left: 5px; top: -1.8em;}
#Pro .proli .txt a:hover h2 span{color: var(--pico-primary);}
#Pro .proli .txt p{word-wrap: break-word; word-break: break-all; color: var(--pico-secondary);}
#Pro .proli .txt p b{color: #202534;margin-right: 5px; opacity: 0.8;}
#Pro .proli.Pink .txt p {color: #000;}
#Pro .proli.Pink .txt p b{color: #000;}
#Pro .proli .tu{position: absolute; bottom: -6.5%; left: 45%; margin-left: -90px; transform: rotate(0deg); width: 150px;transition: transform 0.6s ease;display: none; }
#Pro .proli:hover .tu img {
  transform: scale(1.05) rotate(-5deg); transition: all 0.6s ease;

}
#Pro .btn{font-size: 16px; padding: 8px 20px;display: inline-flex; width:auto; background-color: #29a8d1; border-color: #29a8d1; }
#Pro .btn:hover{background-color:var(--pico-primary); color: #fff;}
#Pro .btn2{ background-color: var(--pico-primary); border-color: var(--pico-primary);}
#Pro .btn2:hover{background-color: #000;}
#Pro .proli .img img{transition: all 0.3s ease-out; min-width: 420px;}
#Pro .proli:hover .img img{transform: scale(1.2, 1.2);transition: all 0.3s ease-out;}
#Pro .proli .img .info {
  background: rgba(27, 26, 26, 0.6);
  transition: all 0.3s ease-out;
  transform: translateX(100%);
  position: absolute;
  line-height: 0; font-size: 0;
  text-align: left;
  cursor: no-drop;
  color: #FFF;
  height: 100%;
  width: 100%;
  right: 0;
  top: 0;
}
#Pro .proli:hover .info{transform: translateX(0);}
#Pro .proli .info p:hover{ opacity: .9; transition: all 0.3s ease-out;}
#Pro .proli .info video{position: absolute; top: -3px; left: 0;padding:0; margin:0; width: 101%; height: 101%;}

#Prolist .grid{grid-template-columns: 1fr 1fr 1fr;}
#Prolist .list-item{position: relative;}
#Prolist .item-category-link{position: absolute; left: 20px; top: 20px; background-color:#fff; color: #000; padding:4px 10px; font-size: 12px; }


/* product show page */

#Proshow .media {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
  
#Proshow .media .grid-item:first-child {
    grid-column: 1 / 3; /* 跨越第1-2列 */
    grid-row: 1 / 3;    /* 跨越第1-2行 */
    aspect-ratio: 1 / 1;

  }
  
  #Proshow .media .grid-item:nth-child(2) {
    grid-column: 3;     /* 第3列 */
    grid-row: 1;        /* 第1行 */
  }
  
  #Proshow .media  .grid-item:nth-child(3) {
    grid-column: 4;     /* 第4列 */
    grid-row: 1;        /* 第1行 */
  }
  
  #Proshow .media .grid-item:nth-child(4) {
    grid-column: 3;     /* 第3列 */
    grid-row: 2;        /* 第2行 */
  }
  
  #Proshow .media  .grid-item:nth-child(5) {
    grid-column: 4;     /* 第4列 */
    grid-row: 2;        /* 第2行 */
  }
  
  #Proshow .media  .grid-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }
  
  #Proshow .media  .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-out;
    position: absolute;
    z-index: 1;
  }
  #Proshow .media  .grid-item:hover img{
    transform: scale(1.2, 1.2);
    transition: all 0.3s ease-out;
    z-index: 1;
  }
  
  #Proshow .media  .grid-item .txt {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(0,0,0,0.5);
    z-index: 10;
  }
  #Proshow .media  .grid-item .link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    display: none; 
    color: #fff;
  }
  #Proshow .media  .grid-item:hover .link {
    display: flex; 
    justify-content: center; 
    align-items: center; 
  }
  #Proshow .media  .grid-item:hover .link a{color: #fff;font-weight: bold}
  #Proshow .media  .grid-item:hover .link a:hover{ color: var(--pico-text-over);}
  #Proshow .media  .grid-item .link .downbox {
    width: 100%; 
    height: 100%;
    display: flex;
    justify-content: center; 
    align-items: center; 
    gap: 0px; 
  }

  #Proshow .media  .grid-item .link .downbox .d-list {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    width: 50%; 
  }

  #Proshow .media  .grid-item .link .downbox .d-list p {
    width: 100%;
    text-align: center;
    display: block;
    margin: 0;
    color: #fff;
    font-size: 14px;
  }

  #Proshow .media  .grid-item .link .downbox .d-list p:first-child {
    margin-bottom: 15px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
  }

  #Proshow .media  .grid-item .link .downbox .d-list img {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px;
    border-radius: 15px;
    transition: transform 0.3s ease;
    margin: 0 auto; 
    display: block; 
    filter: brightness(0) saturate(100%) invert(100%);
  }

  #Proshow .media  .grid-item .link .downbox .d-list:hover img {
    transform: scale(1.1); 
    background: rgba(255, 255, 255, 0.3); 
  }
  #Proshow .media  .grid-item .link .downbox .d-list:hover p{font-weight: bold;}

#Proshow .grid-item .hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2; 
}

#Proshow .grid-item:hover .hover-video {
    opacity: 1;
}

#Proshow .grid-item:hover .hover-video  img {
    opacity: 0.3; 
    z-index: 1; 
}

#Proshow .grid-item .hover-video video,
#Proshow .grid-item .hover-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-list{grid-template-columns: 1fr 1fr 1fr 1fr;}
.media-list .list-item{overflow: hidden; position: relative; border: 1px solid #E7E5E4; }
.media-list .list-item .item-media{position: relative; overflow: hidden;}
.media-list .list-item .item-category-link {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #fff;
  color: #000;
  padding: 4px 10px;
  font-size: 12px;
}
.media-list .list-item .item-mediaimg {
  transition: all 0.3s ease-out;
}
.media-list .list-item .item-media img {
  transition: all 0.3s ease-out;
  
}
.media-list .list-item .item-media:hover img {
  transform: scale(1.2, 1.2);
  transition: all 0.3s ease-out;
}

.media-list .list-item .item-media .hover-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.media-list .list-item .item-media:hover .hover-video {
  opacity: 1;
} 

.media-list .list-item .item-content{}
.media-list .list-item .item-content a{ color: #000;}
.media-list .list-item .item-content a:hover{color: var(--pico-primary);}
.media-list .list-item .item-content .description{color: var(--pico-contrast);}
.media-list .list-item .item-content .btn{padding: 10px 20px;display: inline-flex; width: auto;  font-size: 12px;background-color: #29a8d1;  border-color: #29a8d1; color: #fff;  }
.media-list .list-item .item-content .btn:hover{ background-color: var(--pico-primary); border-color:var(--pico-primary);  color: #fff; }
.media-list .list-item .item-content svg{display: inline-block; flex-shrink: 0; font-size: 16px; color: inherit; fill: none; width: 1em; height: 1em; margin: 0; user-select: none; vertical-align: middle; position: relative; top: -1px; margin-right: 4px;}
.pro-reviews article{position: relative; z-index: 0;}
.pro-reviews article .youtube-ico{position: absolute; top: 30%; left: 50%; transform: translateX(-50%); z-index: 10;}
.pro-reviews article img{opacity: 1;}
.pro-reviews article:hover img{opacity: 0.8;}

.pro-video{}
.pro-video .video-list article{position: relative; z-index: 1; }
.pro-video .video-list article .play img{width: 100%; filter: invert(36%) sepia(51%) saturate(2200%) hue-rotate(330deg) brightness(95%) contrast(96%); }
.pro-video .video-list article .play svg path{ fill:#ffffff; }
.pro-video .video-list article .imgbox{transition: all 0.3s ease-out;}
.pro-video .video-list article:hover .imgbox{opacity: 0.9;transform: scale(1.12, 1.12);  transition: all 0.3s ease-out;}
.pro-video .video-list article:hover .bgimg{position: absolute;left: 0; top: 0;  width: 100%; height: 100%;  display: block;  background-color: rgba(0, 0, 0, 0.6); z-index: 1; }
.pro-video .video-list article .play{position: absolute;left: 50%; margin-left: -20px; top: 50%; margin-top: -20px;  width: 40px; height: 40px; z-index: 10;  }
/* pro slider */
.tabs {
  position: relative;
  width: 100%;
  margin: 2rem 0;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs-header {
  display: flex;
  position: relative;
  border-bottom: 1px solid #e0e0e0;
}

.tabs-header label {
  flex: 1;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 33.33%;
  height: 2px;
  background: #007AFF;
  transition: all 0.3s ease;
}

/* 滑块位置控制 */
#tab1:checked ~ .tabs-header .slider {
  left: 0;
}
#tab2:checked ~ .tabs-header .slider {
  left: 33.33%;
}
#tab3:checked ~ .tabs-header .slider {
  left: 66.66%;
}

/* 标签页内容样式 */
.tabs-content {
  margin-top: 2rem;
}

.tab-panel {
  display: none;
  padding: 1rem 0;
}

/* 内容显示控制 */
#tab1:checked ~ .tabs-content .tab-panel:nth-of-type(1),
#tab2:checked ~ .tabs-content .tab-panel:nth-of-type(2),
#tab3:checked ~ .tabs-content .tab-panel:nth-of-type(3) {
  display: block;
}

/* 选中标签样式 */
#tab1:checked ~ .tabs-header label:nth-of-type(1),
#tab2:checked ~ .tabs-header label:nth-of-type(2),
#tab3:checked ~ .tabs-header label:nth-of-type(3) {
  color: #007AFF;
}


@media (max-width: 768px) {
  #Pro .l-img,
  #Pro .r-img {
    width: 50%;
    max-width: 300px;
    opacity: 0.4;
    top: 0%;
    left: 0%;
  }
  #Pro .r-img{left:auto; right: 0%;}

  #Pro .tubiao {
    width: 280px;
    height: 280px;
    margin-left: -140px;
    top: 3%;
  }
  
  #Pro .tubiao .txt {
    font-size: 2.8rem;
    bottom: 12px;
  }
  
  #Pro .title {
    margin-top: 350px;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  #Pro .proli {
    flex-direction: column;
    
  }

  
  #Pro .proli .img {
    width: 100%;
    border-radius: 10px 10px 0 0;
  }
  
  #Pro .proli .img img {
    min-width: 100%;
  }
  
  #Pro .proli .txt {
    width: 100%;
    border-radius: 0 0 10px 10px;
    padding: 1.5em 1em;
  }
  
  #Pro .proli .tu {
    width: 160px;
    right: 5%;
    margin-left: 0px;
    bottom: -40px;
  }

  #Proshow .media {
    grid-template-columns: 1fr; /* 单列布局 */
    width: 100%;
    gap: 10px;
  }
  #Prolist .grid{grid-template-columns: 1fr;}
  .media-list {  grid-template-columns: 1fr;}
  #Proshow .media .grid-item:first-child,
  #Proshow .media .grid-item:nth-child(2),
  #Proshow .media .grid-item:nth-child(3),
  #Proshow .media .grid-item:nth-child(4),
  #Proshow .media .grid-item:nth-child(5) {
    grid-column: 1;
    grid-row: auto;
  }

  /* 调整第一个item的高度并减小底部间距 */
  #Proshow .media .grid-item:first-child {
    grid-row: span 1; /* 改为只占一行 */
    margin-bottom: -5px; /* 减小与下一个item的间距 */
  }
  
  #Proshow .media .grid-item .txt {
    padding: 8px;
    font-size: 14px;
  }

}

/* 添加平板设备的适配 */
@media (min-width: 769px) and (max-width: 1024px) {
  #Proshow .media {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }
  
  #Proshow .media .grid-item:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  
  #Proshow .media .grid-item:nth-child(2),
  #Proshow .media .grid-item:nth-child(3),
  #Proshow .media .grid-item:nth-child(4),
  #Proshow .media .grid-item:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }
}

#Category .image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  justify-items: center;
  align-items: center;
}

#Category .grid-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
#Category .grid-item:before {
  background-image: linear-gradient(180deg, rgba(11,33,199, 0) 50%, rgba(11,33,199, 0.6) 100%);
  border-radius: 4px;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  height: 40%;
  z-index: 1;
}

#Category .grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease-out;
}

#Category .grid-item:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / span 2;
}
#Category .grid-item:hover img{transform: scale(1.2, 1.2);transition: all 0.3s ease-out;}
#Category .grid-item .txt{position: absolute; bottom: 30px; left: 30px; z-index: 2; }
#Category .grid-item .txt span{position: relative; font-weight: 600;}
#Category .grid-item .txt span::after {
  content: "";
  position: absolute;
  left: 0;
  height: 3px;
  width: 40px;
  border-radius: 10px;
  background: var(--pico-text-over);
  bottom: -10px;
}

@media (max-width: 768px) {
  #Category .image-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  #Category .grid-item:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }

  #Category .grid-item {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}


#photo .photolist{display: grid; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 20px;}
#photo .photolist .photo-item {  width: 100%;  max-width: 150px;}
#photo .photolist.kehu{border-radius: 16px;display: block;}
#photo .kehu img{transition: all 0.3s ease-out;display: block;width: 100%;}
#photo .kehu:hover img{transform: scale(1.2, 1.2);transition: all 0.3s ease-out;}

#Features .grid{grid-template-columns: 1fr 1fr 1fr;}
#Features{ background: url(../img/bg_features.svg) no-repeat center top; background-size: cover;}
#Features article{background-color: #fff;}

.zisi .grid div {box-shadow: var(--pico-card-box-shadow);transition: all 0.6s ease;}
.zisi .grid div:hover{border-color: #29A8D1;margin-top: -5px; transition: all 0.6s ease; }       
#tongzi .num h4 span{position: relative;  -webkit-transition: all 0.2s ease;  transition: all 0.2s ease; }
#tongzi .num h4 span:before {
  content: '';
  position: absolute;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  background: var(--pico-primary);
  left: -1.05rem;
  top: -0.8rem;
  z-index: -1;
  -ms-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#tongzi .num:first-child  h4 span:before {
  background: var(--color-1class);
}
#tongzi .num:nth-child(2)  h4 span:before  {
  background: var(--color-2class);
}
#tongzi .num:nth-child(3)  h4 span:before  {
  background: var(--color-3class);
}
#tongzi .num:nth-child(4)  h4 span:before  {
  background: var(--color-4class);
}
#tongzi .num h4 span:hover {
  -webkit-transform: translate(-0.5rem);
  -ms-transform: translate(-0.5rem);
  transform: translate(-0.5rem);
  padding-left: 10px;
}
#tongzi .num h4 span:hover:before {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
  opacity: 0.75;
  height: 5.0rem;
  width: 5.0rem;
  left: -2.0rem;
  top: -1.35rem;
}

#article .li{border-bottom: 1px dotted #E7EAF0; padding-bottom: 1rem; padding-left: 2px; padding-right: 2px;}
#article .img{width: 60px; height: 60px; flex: 0 0 60px; display: block;background-position: center; background-repeat: no-repeat;background-size: cover;}
#article .txt{margin-left: 1rem;flex-grow: 1; }
#article .txt a{color: #000;}
#article .txt a:hover{color: var(--pico-primary);}

/*Rider Story*/
#ridestory{margin-bottom: 0; padding-bottom: 15px;max-width: 100vw; overflow-x: hidden;   background: url(../img/bg_story.png) no-repeat right bottom;
  background-size: auto 170px;}

.readMore{  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; 

}
.readMore .riderStory{overflow: hidden;}
.readMore .riderStory h3 {
  font-size: clamp(2rem, 1.65rem + 1.75vw, 2.35rem);
  line-height: .95;
  margin: 0.25em 0px;
  display: block;
  text-transform: uppercase;
  text-shadow: rgb(35, 31, 32) 0px 0px 0px !important;
}
.readMore .riderStory p {
  font-size: 1.0rem;
  text-shadow: rgb(35, 31, 32) 0px 0px 0px !important;
}
.story {overflow: hidden;}
.story img{width: 100%; }

@media (max-width: 768px) {
  #ridestory {
    background-size: auto 80px; 
    padding-bottom: 10px; 
  }
  .readMore .riderStory h3 {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); margin-top: 1rem;
  }
  
  .readMore .riderStory p {
    font-size: 0.9rem; 
    line-height: 1.4; 
  }
}

/*Footer BOX*/
footer{background-image: linear-gradient(to right,#031793,#1531C9,#1531C9,#0821C9,#0017C4); color: var(--footer-text-color); font-size:14px; }
footer *{color: var(--footer-text-color);}
footer a:hover{color: var(--pico-text-over);}
.copyright{font-size: 12px}
footer .logo-img{ width: auto; max-width: 180px; }



@media (max-width: 768px) { 

    #Features .grid{grid-template-columns: 1fr;}
    footer .copyright {
      display: block !important; 
    }
    footer .l{width: 100%; margin-bottom: 5px;}
    footer .r{width: 100%;}
    .footer-txt{display: none;}

}

/* articel show */

.breadcrumb {
  padding: 20px 0;
  list-style: none;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
  content: ">";
  margin: 0 8px;
  color: var(--pico-secondary);
}

.breadcrumb-item a {
  color: var(--pico-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
  color: var(--pico-primary);
}

.breadcrumb-item:last-child a {
  color: var(--pico-secondary);
  pointer-events: none;
}

.submenu-wrapper {
  position: relative;
}

.submenu-wrapper:hover .submenu {
  display: block;
}

.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: #fff;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
}

.submenu a {
  padding: 10px 15px;
  display: block;
  color: #333;
  text-decoration: none;
}

.submenu a:hover {
  background-color: #f5f5f5;
}

/* pages */

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  justify-content: center;
  gap: 5px;
  margin-bottom: 50px;
}

.pagination .page-item {
  margin: 0;
  padding: 0;
}

.pagination .page-link {
  padding: 8px 16px;
  color: var(--pico-text);
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination .page-link:hover {
  background-color: #e9ecef;
  border-color: #dee2e6;
  color: var(--pico-primary);
}

.pagination .page-item.active .page-link {
  background-color: var(--pico-primary);
  border-color: var(--pico-primary);
  color: #fff;
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}

/*  window tip */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  border-radius: 10px;
  overflow: hidden;
}

.modal-content {
  position: relative;
  background-color: #fff;
  margin: 5% auto;
  width: 90%;
  max-width: 800px;
  height: 80vh;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}
.modal-content #modalTitle{position: absolute; top:0; left: 0px; content: ''; width:100%; height: 60px; line-height: 60px; background-color: #0017C4; font-size: 18px; padding-left: 20px; color: #fff;}

.close-modal {
  position: absolute;
  right: 20px;
  top: 7px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  z-index: 1001;
}
.close-modal:hover{color:#E5E5E5;}
@media (max-width: 768px) {
  .modal-content {
      margin: 10% auto;
      width: 95%;
      height: 85vh;
  }
}
#contact-page{}
.gbook{padding-left:3rem; position: relative;}
 .gbook .gbbox{font-size: 16px;}
 .gbook .gbbox .btngo {
  background-color: #FFD624;
  color: #000;
  border-color: #FFD624;
}
.gbook .gbbox input, .gbook .gbbox textarea,.gbook .gbbox select{font-size: 14px; padding: 10px 10px; height: auto; }


 .gbook .modaltip {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 1050; min-width: 450px; background-color: rgba(0, 0, 0, 0.9); box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.2); border-radius: 4px; color: #fff; }
.close-modal{color: #fff;}
 .gbook .modaltip .modal-dialog { margin: 0 auto; position: relative; text-align: left; padding: 21px; color: #fff; }
.gbook .modaltip .modal-dialog::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; background-color: #FFC007; }
.toast-icon {width: 35px; padding: 7px; border-radius: 50%; background-color: #FFC007; text-align: center; color: #fff; margin-right: 10px;}

.tiptxt{ font-size:16px; color: #fff;}
.tiptxt p{color: #fff;}
.modaltip .modal-dialog .close-modals{ margin-left:30px ; font-size: 20px; width: 25px; height: 35px;vertical-align: middle; display: inline; cursor: pointer;}
.modaltip .modal-dialog .close-modals svg{width:15px; height: 15px; vertical-align:middle; }

@media (max-width: 768px) {
  .gbook {
    padding-left: 0rem;
    padding-right: 0rem;
    border-top: 1px solid #7C7C7C;
    padding-top: 2rem;
  }
  
  .gbook .modaltip {
    min-width: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

#help-center .help-header{background: linear-gradient(90deg, #ea2c83, #eb392b 16%, #d7bb1d 33%, #87c342 50%, #29a8d1 66%, #2c398c 83%, #66308c); position: relative; z-index: 0; }
#help-center .help-header .search{position: relative; z-index: 2; }
#help-center .help-header .search .search-btn{position: absolute; width: 50px; height: 50px; line-height: 50px; left: 30px;top: 5px; background-color: transparent; border: none; border-radius: 50%; margin-bottom: 0; padding: 0; }
#help-center .help-header .search #search{font-size: 16px; min-width: 500px; }
#help-center .help-header .breadcrumb{color: #fff;}
#help-center .help-header .breadcrumb a{color: #fff;}
#help-center .help-header .breadcrumb-item:not(:last-child)::after{color: #fff;}
#help-center .help-header .search-hot{padding-left: 20px; color: #fff;}
#help-center .help-header .search-hot a{color: #fff;}
#help-center .help-header .search-hot a:hover{text-decoration: underline;}


#help-center .help-list a{ border: 1px solid #E6E6E6; padding: 6px 20px; color: #000;}
#help-center .help-list a:hover{color: var(--pico-primary);}
.imgbanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.videoshow iframe{width: 100%;}

.sub-banner{background: linear-gradient(90deg, #ea2c83, #eb392b 16%, #d7bb1d 33%, #87c342 50%, #29a8d1 66%, #2c398c 83%, #66308c); position: relative; padding: 100px 0; color: #fff;}
.sub-banner .container{position: relative; z-index: 10;}
.sub-banner::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 1;}
.sub-banner h1{font-weight: 700; text-transform: uppercase; text-align: center; margin: 0; line-height: 1.2;color:#fff;}
.sub-banner h1 span{color: #fff;}
.sub-banner video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.sub-banner img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.sub-banner .bg{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.sub-banner .breadcrumb a{color: var(--pico-secondary);}

#become-dealer .yongyao-text{margin-left: 20px; margin-right: 20px;}

#oem{width: 100%; overflow: hidden; }
.process article{ background-color: #304AA1; margin-left: 30px; margin-right: 30px; position: relative; }
.process article.odmcolor{ background-color: #66308c;}
.process article .imgstyle{background-color: #fff; width: 80px; height: 80px; display: inline-block; line-height: 80px; }
.process article::after{position:absolute; content: ''; width: 50px; height: 30px; right: -65px; top: 50%; margin-top: -15px; background:url(../img/arrow.png) no-repeat center right; background-size: 100% auto }
.process article:last-child::after{background: none;}
.process article hr{
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #ffffff, transparent);  margin: 15px 15px;
}
#modelchoce{background-image: url(../img/choose-bg.png) !important; background-position: center bottom  0px;background-size: 100% 150px; }
.suits-you{ height: 400px; position: relative; z-index: 0; } 

#Factory-process{}
.factory .lst{margin-left: 30px; margin-right: 30px; position: relative;}
.factory .lst img{border-radius: 0.65rem; overflow: hidden;}
.factory .lst::after{position:absolute; content: ''; width: 50px; height: 40px; right: -65px; top: 50%; margin-top: -20px; background:url(../img/arrow2.png) no-repeat center right; background-size: 100% auto }
.factory .lst:nth-child(3n)::after{background-image: url(../img/arrow3.png);}
.factory .lst:last-child::after{background: none;}

@media (max-width: 768px) {
  .factory .grid-3n {
    grid-template-columns: 1fr; /* 手机端改为1列布局 */
  }
  
  .factory article {
    margin-left: 15px; /* 减小手机端边距 */
    margin-right: 15px;
  }
  
  .factory article::after {
    width: 30px; /* 减小箭头大小 */
    height: 24px;
    right: -28px;
    margin-top: -12px;
  }
  .process article::after{right: -50px;}
}

/* OEM/ODM */
#OEMODM{}
#OEMODM article{margin-left: 30px; margin-right: 30px; position: relative; color: #fff;}
#OEMODM article .imgstyle{background-color: #fff; width: 100px; height: 100px; display: inline-block; line-height: 100px; }
#OEMODM article.left-item{background-color: #304AA1;}
#OEMODM article.right-item{background-color: #66308c;}
#OEMODM article img{border-radius: 0.25rem 0.25rem 0 0;}

.Custom-sort article{position: relative;}
.Custom-sort article h3{padding-top: 50px;}
.Custom-sort .Num{width: 80px; height: 80px;position: absolute; left: 50%; margin-top: -50px;  margin-left: -40px;  display: flex; border: 6px solid #fff;  color: #fff; background-color: var(--pico-primary); }
.Custom-sort .Num em{font-weight: bold; font-style: normal; line-height: normal;padding: 0; margin: 0;   display: inline-flex; text-align: center;  align-items: center;  justify-content: center;width: 100%;  height: 100%;font-size: 30px; }

.oemfactory{position: relative; z-index: 0; background-color: #F8FAFB;}

#shoplist{position: relative; z-index: 0; background-color: #F8FAFB;}
#shoplist img{ height: 450px; width: auto;max-width:200%;}

#servicetype article{position: relative; z-index: 0; background-color: #fff; }
#servicetype article .btn{ position: absolute; bottom: 20px; left: 50%; width: 50%; margin-left: -25%; right: 0; background-color:var(--pico-primary); color: #fff; border-color: var(--pico-primary); border-radius: 0.25rem; padding: 10px 20px; font-size: 14px; font-weight: 600; text-transform: uppercase;display: none; }
#servicetype article:hover .btn{display: block;}
#servicetype article .btn a{color: #fff; width: 100%; display: block; text-align: center;}
#servicetype article .btn:hover{background-color: #EB9C27; color: #fff; border-color: #EB9C27; }


/* 通用移动样式 */
@media (max-width: 768px) {
  .grid-4n, .grid-3n, .grid-2n { grid-template-columns: 1fr; }
  #shoplist img{height: 300px; width: auto; max-width: 620%;}
  #bloglist .media-list{grid-template-columns: 1fr;}
  .sub-banner{padding: 60px 0;}
  .sub-banner h2{font-size: 18px;}  
  .layout-main h1{font-size: 1.5rem}

}

/* 添加这段代码到CSS文件的合适位置，比如在按钮样式部分 */
.rainbow-button {
  position: relative;
  color: #fff;
  border-radius: 9999px;
  overflow: hidden;
  z-index: 1;
  padding: 12px 30px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.rainbow-button:before, .rainbow-button:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  transition: all 0.3s ease;
}

.rainbow-button:before {
  z-index: -1;
  background-image: conic-gradient(from -90deg at 50% 50%, #DCFF63 0deg, #7BF4E2 20deg, #3A6DF2 150deg, #FF5C2E 200deg, #FFBE26 300deg, #DCFF63 1turn);
}

.rainbow-button:after {
  z-index: -1;
  background-color: #000; 
  margin: 2px;
  border-radius: 9999px;
  opacity: 1;
}

.rainbow-button:hover:after {
  opacity: 0.8;
  background-color: #121212;
}

.rainbow-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#banner .bantxt .btngo{ 
  color: #fff;
  position: relative;
  border: none;
  padding: 10px 24px;
  border-radius: 30px;
  transition: all 0.3s ease;
}

#banner .bantxt .btngo::before{
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -1;
  border-radius: 30px;
  background: linear-gradient(90deg, #DCFF63, #7BF4E2, #3A6DF2, #FF5C2E, #FFBE26);
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
}

#banner .bantxt .btngo::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  border-radius: 28px;
  z-index: -1;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#banner .bantxt .btngo:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  #banner {
    height: auto; /* 改为自适应高度 */
    min-height: 480px; /* 设置最小高度 */
  }

  #banner .bannerlist {
    padding: 2rem 0; /* 减小内边距 */
  }

  #banner .bantxt {
    margin-top: 2rem; /* 减小顶部边距 */
    padding: 0 1rem; /* 添加左右内边距 */
  }
  #banner .bantxt h2{font-size: 1.3rem;}
  #banner .bantxt h5{font-size: 1rem;}
  #banner .bantxt p {
    padding-right: 1rem; /* 减小右侧内边距 */
    font-size: 0.85rem; /* 稍微减小字体 */
  }

  #banner .bantxt .image-bg {
    width: 200px; /* 减小背景圆形尺寸 */
    height: 200px;
    left: 0;
    top: 50%;
  }
  #banner .bantxt h2 span svg{bottom: -10px;    height: 10px;}
  #banner .hua span {
    bottom: -25px; /* 调整位置 */
    left: 15px;
  }
}


.person {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 410px;
}
.person .person-box{
  border-radius: 50%;
  height: 312px;
  -webkit-tap-highlight-color: transparent;
  transform: scale(0.48);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 410px;
}
.person .person-box:after {
  content: "";
  height: 10px;
  position: absolute;
  top: 390px;
  width: 100%;
}
.person .person-box:hover .img {
  transform: translateY(0) scale(1.2);
}
.person .person-inner {
  clip-path: path( "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 490 Z" );
  position: relative;
  transform-origin: 50%;
  top: -180px;
}
.person .person-inner .circle {
  background-color: #fee7d3;
  border-radius: 50%;
  cursor: pointer;
  height: 400px;
  width: 390px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  display: block;
  aspect-ratio: 1/1;
}
.person .person-inner .img {
  pointer-events: none;
  position: relative;
  transform: translateY(20px) scale(1.15);
  transform-origin: 50% bottom;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.person .person-inner .img1 {
  left: 22px;
  top: 164px;
  width: 340px;
}

.person .person-inner .img2 {
  left: 16px;
  top: 124px;
  width: 350px;
}
.person .person-inner .img3 {
  left: -16px;
  top: 144px;
  width: 466px;
}
.person .divider {
  background-color: var(--pico-primary);
  height: 2px;
  width: 160px;
}
.person .name {
  color: #000;
  font-size: 32px;
  font-weight: 600;
  margin-top: 16px;
  text-align: center;
}
.person .name:hover{ color: var(--pico-primary); }
.person .title {
  color: #6e6e6e;
  font-size: 14px;
  margin-top: 4px;
}

.author-box{
  position: relative;
  overflow: hidden;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(227.53deg, #48CBF7 6.72%, #fff 46.43%, #fff 71.41%, #D8F2FA 98.63%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 350px;
}
.author-box-img{ width: 150px; height: 150px; overflow: hidden; border-radius: 50%; display: block; margin-top: 20px; background-color: #fff; border: 5px solid var(--pico-primary);padding: 10px;  }
.author-box-img img{ width: 120%; object-fit: cover;transition: all 0.3s ease-out; border-radius: 50%; }
.author-box:hover img{transform: scale(1.1, 1.1);transition: all 0.3s ease-out;}
.author-box-inner-title a{color: #000;}

.author-box-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0 10px 10px 0;
  min-height: 350px;

}
.author-box-content .btn{float: left; text-decoration:underline; color:var(--pico-primary); }
.author-box-content ul li{
    position: relative;
    padding-left: 15px;
    font-size: 14px;
}
.author-box-content ul li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 10px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: #4CCCF7;
    border-radius: 50%;
}

.authorlist .row {
  display: flex;
  flex-wrap: wrap;
}

.authorlist .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.author-show-title{width: 500px; margin: 0 auto; text-align: center;}
.author-show-title .author-img{width: 150px;  height: 150px; border-radius: 50%; border: 5px solid var(--pico-primary); padding: 10px; transition: all 0.3s ease-out; overflow: hidden; }

.author-show-title .author-img img{width: 150px; border-radius: 50%; height: auto;  margin:0 auto;object-fit: cover;transition: all 0.3s ease-out; position:static; }
.author-show-title .author-info {
  flex: 1; 
  text-align: left;
}
.author-content{border-top: 1px solid #F0EFED; padding-top: 20px;}

@media (max-width: 991px) {
  .author-box {
    border-radius: 10px 10px 0 0;
    min-height: 300px;
  }
  
  .author-box-content {
    border-radius: 0 0 10px 10px;
  }
  section.d-flex.justify-content-between {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .person {
    width: 100%;
    margin-bottom: 50px;
  }
  .person .name {
    font-size: 24px;
    margin-top: 12px;
  }
  .person .title {
    font-size: 13px;
    padding: 0 15px;
  }
  .person .divider {
    width: 120px;
  }
  .author-show-title {
    flex-direction: column; 
  }
  
  .author-show-title .author-info {
    width: 100%;
  }
}

.tag-header {
  display: flex;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #EFEFEF;
}
.tag-header .tag-img {
  border: 1px solid #C3D1D6;
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 5px;
  border-radius: 3px;
  margin-right: 15px;
  display: flex; align-items: center; justify-content: center;
}
.tag-header .mip-biaoqian {
   font-size: 35px;
   margin-bottom: 10px;
}
.tag-header .tag-info-content h1 {
  margin-top: 7px;
  margin-bottom: 5px;
  font-size: 20px;
}
.tag-header .tag-info-content p {
  color: #666;
  margin-bottom: 0;
}
.tag-list .tag-link{color: var(--pico-text) !important;}
.tag-list .tag-link:hover{color: #000 !important;}
.tag-list a.sort, #article .txt a.sort{color: #B9B9B9; font-size: 12px;}
#article .txt a:hover.sort{color: #000;}
.tag-list .tag-item{margin-bottom: 10px; display: flex; align-items: center;}

.tag-article ul .item-time{color: #666; font-size: 12px;}
.tag-article ul li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 10px;

}
.tag-article ul li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 13px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #4CCCF7;
  border-radius: 50%;
}
.tag-article ul li a:hover{color: var(--pico-primary);}

/* Tag Cloud Styles */
.tag-yaun {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px 0;
}

.tag-yaun .tag-item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tag-yaun .tag-link {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  color: #555;
}

/* Light color variations for tags */
.tag-yaun .tag-item:nth-child(10n+1) .tag-link { background-color: #F0F7FF; }
.tag-yaun .tag-item:nth-child(10n+2) .tag-link { background-color: #FFF0F7; }
.tag-yaun .tag-item:nth-child(10n+3) .tag-link { background-color: #F0FFF7; }
.tag-yaun .tag-item:nth-child(10n+4) .tag-link { background-color: #FFF7F0; }
.tag-yaun .tag-item:nth-child(10n+5) .tag-link { background-color: #F7F0FF; }
.tag-yaun .tag-item:nth-child(10n+6) .tag-link { background-color: #F0FFFF; }
.tag-yaun .tag-item:nth-child(10n+7) .tag-link { background-color: #FFFEF0; }
.tag-yaun .tag-item:nth-child(10n+8) .tag-link { background-color: #F5F8FA; }
.tag-yaun .tag-item:nth-child(10n+9) .tag-link { background-color: #F0F5E6; }
.tag-yaun .tag-item:nth-child(10n+10) .tag-link { background-color: #F2F2F7; }

/* Hover effects */
.tag-yaun .tag-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.01);
  color: var(--pico-primary);
}

/* Random font sizes for cloud effect */
.tag-yaun .tag-item:nth-child(3n+1) .tag-link { font-size: 12px; }
.tag-yaun .tag-item:nth-child(3n+2) .tag-link { font-size: 13px; }
.tag-yaun .tag-item:nth-child(3n+3) .tag-link { font-size: 14px; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .tag-yaun {
    gap: 8px;
  }
  
  .tag-yaun .tag-link {
    padding: 4px 10px;
    font-size: 12px;
  }
  
  .tag-yaun .tag-item:nth-child(3n+1) .tag-link { font-size: 11px; }
  .tag-yaun .tag-item:nth-child(3n+2) .tag-link { font-size: 12px; }
  .tag-yaun .tag-item:nth-child(3n+3) .tag-link { font-size: 14px; }
}

.ask-box{position: relative; z-index: 0;}
.ask-box::after{content: ''; position: absolute; top: 5px; bottom: 0px; left: 18px; width: 1px; height: auto; background-color: var(--pico-muted-border-color); z-index: -1;  }
.ask-box .ask-answer-content{ padding-left: 40px;}
.avatar_info{font-size: 12px; line-height: 1.5;}


#vision{background-color: #F8FAFB; width: 100%; overflow: hidden; position: relative; z-index: 0;}
#vision::after{content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background-color: var(--pico-muted-border-color); z-index: 1; }
#vision .ml-4{margin-left:1.5rem !important;}