/* 平板竖屏（≥ 768px） */
@media (min-width: 768px) {  }
/* 手机横屏（≥ 576px） */
@media (min-width: 576px) {  }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  
  /* 设置背景图片 */
  /* background:white; */
  /* background-image: url('../static/img/backgroud/白色褶皱背景2.f8d5a932.webp'); */
  /* 关键1：让背景随页面滚动（默认行为，可省略） */
  /* background-attachment: scroll; */
  
  /* 关键2：拉伸填充（宽度100% 高度100%） */
  /* background-size: 100% 100%; */
  background-size: cover;;
  
  /* 从顶部开始定位 */
  background-position: center top;
  
  /* 不允许重复 */
  background-repeat: no-repeat;
  
  /* 关键3：确保背景覆盖整个内容高度 */
  min-height: 90vh;
  width: 100%;
  overflow-x: hidden;
  /* overflow-y: hidden; */
}
#scrollBackgroundImg {
  width: 100%;
  /* height: 100%; */
  background-image: url('../static/img/backgroud/白色褶皱背景2.f8d5a932.webp');
  /* background: red; */
  object-fit: contain;
}
/* 加载时显示遮罩 */
body.loading::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.7); 深色半透明背景 */
  /* backdrop-filter: blur(8px); */
  z-index: 9999;
  cursor: wait;
}

/* 旋转圆圈动画 */
body.loading::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  /* border: 4px solid rgba(0, 123, 255, 0.2); */
  border-top: 4px solid #00ff88;/*#fc9a9e;*/
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10000;
}

/* 静态文字（不旋转） */
body.loading .loading-text {
  position: fixed;
  top: calc(50% + 60px); /* 放在圆圈下方60px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  font-size: 18px;
  color: black;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
  animation: pulse 1.5s ease-in-out infinite; /* 文字呼吸动画 */
}

/* 动画定义 */
@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.8; }
  /* 35% { opacity: 1; text-shadow: 0 0 15px #fc9a9e; }
  67% { opacity: 1; text-shadow: 0 0 15px #00ff88; } */
  50% { opacity: 1; text-shadow: 0 0 15px #fc9a9e; }

}

/* 页面内容淡入效果 */
body:not(.loading) {
  /* animation: fadeIn 0.5s ease; */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 2. 所有可点击元素禁用 */
body.loading button,
body.loading a,
body.loading div,
body.loading p,
body.loading span,
body.loading img,
body.loading select,
body.loading textarea {
  pointer-events: none !important;
  opacity: 0.6; /* 视觉提示不可点击 */
}
#scccc{
  overflow-y: auto;
  /* background: #ECEDEF; */
  /* background-image: url('../static/img/白色褶皱背景2.webp'); */
}
/* body{
  margin: 0;
} */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

}
#mobile{
  display: none;
}

/* scroll bar */
::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  /* background: #ffffff; */
  /* border-left: 1px solid black; */
  border-radius: 4px;
  background: #fc9a9e;
  /* background: linear-gradient(to bottom, #ff9a9e, #fecfef); */
  /* border-radius: 10px; */
  /* box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2); */
}

::-webkit-scrollbar-thumb {
  /* background: white; */
  /* border: 1px solid black; */
  background: linear-gradient(to bottom, #fc9a9e 50%, #aa458a 80%, #fc9a9e 100%);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  /* background: #d6d6d6; */
  border: 1px black solid;
}
#scrollbar-body-support{
  position: absolute;
  z-index: 100;
  right: 0;
}
.scroll-text-container-bar{
  width: 5px;
  border-radius: 0 0 10px 10px;
  /* background: lightgreen; */
  background: linear-gradient(to bottom, #fc9a9e 50%, #aa458a 100%);
}


.setBlackBorder{
  border: 1px rgb(175 175 175) solid;
}
.setBlackBorder2{
  border: 2px rgb(175 175 175) solid;
}
.setGreenBorderBottom{
  border-bottom: 1px rgb(5, 155, 0) solid;
}
.setRedBorderBottom{
  border-bottom: 1px rgb(255, 5, 5) solid;
}
.setOrangeBorderBottom{
  border-bottom: 1px rgb(255, 106, 6) solid;
}
.setBlackBorderBottom{
  border-bottom: 1px rgb(175 175 175) solid;
}
.setBlackBorderTop{
  border-top: 1px rgb(175 175 175) solid;
}
.setBlackBordeRight{
  border-right: 1px rgb(175 175 175) solid;
}



.border-radius-5px{
  border-radius: 5px;
}
.border-radius-10px{
  border-radius: 10px;
}
.border-radius-10px-top-left{
  border-radius: 10px 0 0 0;
}
.border-radius-10px-bottom-right{
  border-radius: 0 10px 0 0;
}
.border-radius-10px-ex-left{
  border-radius: 0 10px 10px 0 ;
}




.flex-horizontal{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.flex-vertical{
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items: center;
}
.flex-1{
  flex: 1;
}
.flex-2{
  flex: 2;
}


.width100{
  width: 100%;
}
.width98{
  width: 98%;
}
.width40{
  width: 40%;
}
.width100vw{
  width: 100vw;
}
.height100{
  height: 100%;
}
.height20vh{
  height: 20vw;
}
.height35vh{
  height: 35vh;
}
.height35vw{
  height: 35vw;
}
.height40vh{
  height: 40vh;
}
.height40vw{
  height: 40vw;
}
.height50vh{
  height: 50vh;
}
.height60vw{
  height: 60vw;
}
.height60vh{
  height: 60vh;
}

.height75vh{
  height: 75vh;
}
.height70vh{
  height: 70vh;
}
.height80vh{
  height: 80vh;
}
.height90vh{
  height: 90vh;
}
.height100vh{
  height: 100vh;
}
.height100vw{
  height: 100vw;
}
.min-height90vh{
  min-height: 90vh;
}
/* .min-height100vw{
  min-height: 90vw;
} */
.height90vw{
  height: 90vw;
}

.setMargin10px{
  margin: 10px;
}
.setMarginRight10{
  margin-right: 10px;
}
.setMarginTop0{
  margin-top: 0px;
}
.setMarginBottom0{
  margin-bottom: 0px;
}
.setMarginBottom5{
  margin-bottom: 5px;
}
.setMarginLeft0{
  margin-left: 0px;
}
.setMarginTop10px{
  margin-top: 10px;
}
.setMarginBottom20px{
  margin-bottom: 20px;
}
.setMarginBottom10px{
  margin-bottom: 10px;
}
.setMarginRight10px{
  Margin-right: 10px;
}


.setPadding20px{
  padding: 20px;
}
.setPaddingRight10px{
  padding-right: 10px;
}


.userSelectable{
  user-select: text;
}

.absolute-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.flexCeter{
  display: flex;
  align-items: center;    /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}



.line1height100{
  line-height: 100%;
}

.nowrap { white-space: nowrap; }

/* .alinf-text-bottom-left{
  position: absolute;
  bottom: 0;
  left: 0;
} */
.underline-text {
  text-decoration: underline;
  text-decoration-color: blue; /* 下划线颜色 */
  text-decoration-thickness: 1px; /* 线粗细 */
  text-wrap: wrap;
}
.article-content {
  user-select: text;
  /* 字体 */
  font-size: 14px;
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; */
  /* 行距：黄金比例 */
  line-height: 1.75;
  /* 字距 */
  letter-spacing: 0.3px;
  /* 下划线样式 */
  text-decoration: underline;
  text-decoration-color: #e5e7eb;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  /* 文本对齐 */
  /* text-align: justify; 两端对齐 */
  /* 首行缩进 */
  /* text-indent: 2em; */
  /* 最大宽度（阅读舒适度） */
  /* max-width: 65ch; */
  margin: 0 auto;
  /* 颜色 */
  /* color: #334155; */
}
.article-content2 {
  user-select: text;
  /* 字体 */
  font-size: 16px;
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; */
  /* 行距：黄金比例 */
  line-height: 1.75;
  /* 字距 */
  letter-spacing: 0.3px;
  /* 下划线样式 */
  text-decoration: underline;
  text-decoration-color: #e5e7eb;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  /* 文本对齐 */
  /* text-align: justify; 两端对齐 */
  /* 首行缩进 */
  /* text-indent: 2em; */
  /* 最大宽度（阅读舒适度） */
  /* max-width: 65ch; */
  margin: 0 auto;
  /* 颜色 */
  /* color: #334155; */
}
.text_indent{
  text-indent: 2em;
}

.textDecorationColorBlack{
  text-decoration-color: black;
}
.textDecorationColorGreen{
  text-decoration-color: rgba(0, 85, 155, 0.3);
}
.textDecorationColorGrneen{
  text-decoration-color: rgba(5, 155, 0, 0.3);
}
.textDecorationColorRed{
  text-decoration-color: rgba(255, 5, 5, 0.3);
}
.textDecorationColorOrange{
  text-decoration-color: rgb(255, 106, 6, 0.3);
}


.scroll-text-container {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.noteTitle{

}

/* .innertext {
  user-select: text;
  white-space: nowrap;
} */
.scroll-text-container::-webkit-scrollbar {
  width: 0px;
}

.jump2groupQRBtn,.jump2groupQRBtnStyle{
  height: 15px;
  padding: 13px 10px;
  /* 靠右 */
  /* margin-left: auto; */
  margin-right: 15%;
  margin-top: 5px;
  width: auto;

  /* 靠左 */
  /* margin-right: auto;
  margin-left: 20px;
  width: auto; */

  /* font-size: 12px; */
  /* font-weight: 600; */
  color: white;
  /* color: black; */
  /* background: #ffffff00; */
  background: linear-gradient(135deg, #fc9a9e 0%, #aa458a 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); */
  /* box-shadow: 0 4px 15px black; */
  /* border: 1px solid rgb(184, 184, 184); */
  box-shadow: 0 6px 20px  rgba(152, 154, 163, 0.6);

  display: flex;
  flex-direction: row;
}

/* .jump2groupQRBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
} */

.jump2groupQRBtn:active {
  transform: translateY(0);
}

.box-art{
  width: 15px;      /* 根据SVG实际尺寸调整 */
  height: 15px;

  /* font-size: 8px;
  line-height: 8px;
  text-align: center; */

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* margin-bottom: 3px; */
  /* align-self: center;
  justify-self: center; */

  background-color: rgba(255, 255, 255, 1);  /* 通过背景色控制图标颜色 */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-image: url('../static/img/svg/scan.40d26708.svg');
  mask-image: url('../static/img/svg/scan.40d26708.svg');

  /* transform: translate(-50%,-50%); */
  opacity: 1;
}
.qr-text{
  margin-left: 3px;
  font-size: 12px;
  /* line-height: 12px; */
}

/* wasted */
.jump2groupQRSmall{
  height: 20px;
  padding: 15px 10px;
  /* 靠右 */
  margin-left: auto;
  margin-right: 20px;
  width: auto;

  /* 靠左 */
  /* margin-right: auto;
  margin-left: 20px;
  width: auto; */

  /* font-size: 12px; */
  /* font-weight: 600; */
  color: black;
  /* color: black; */
  /* background: #ffffff00; */
  /* background: linear-gradient(135deg, #fc9a9e 0%, #aa458a 100%); */
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); */
  /* box-shadow: 0 4px 15px black; */
  /* border: 1px solid rgb(184, 184, 184); */
  box-shadow: 0 3px 10px  rgba(152, 154, 163, 0.6);

  display: flex;
  flex-direction: row;
  background: transparent;
}
.jump2groupQRSmall:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
/* wasted */
.jump2groupQRSmall:active {
  transform: translateY(0);
}
/* wasted */
.jump2groupQRSmall .box-art{
    font-size: 5px;
    line-height: 5px;
    text-align: center;
  }
  /* wasted */
.jump2groupQRSmall .qr-text{
    margin-left: 3px;
    font-size: 10px;
    /* line-height: 30px; */
  }



  .scrollBack{
    position: relative;
    background-image: url('../static/img/carousel/v1.ac89ab45.webp');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 3em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
  }
  /* 下滑提示组合样式：箭头+文字 */
  .scroll-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5em;
    cursor: pointer;
    animation: bounce 2s infinite;
  }
    /* .scroll-indicator::after {
      content: '︽';
      font-size: 1em;
      display: inline-block;
      animation: bounce 2s infinite;
    } */
    /* 跳动动画 */
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-10px); }
      60% { transform: translateY(-5px); }
    }
  
    /* 滚动后隐藏样式 */
    .scroll-indicator.hide {
      opacity: 0;
      pointer-events: none;
    }
  
  
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* <!-- fontLineTitle --> */
.fontLineTitle{
  height: 16px;
  /* background: rgb(75, 204, 15); */
  line-height: 16px;
  font-size: 10px;
  text-align: left;
  color: #b8b8d8;
  /* background: linear-gradient(to left, #fc9a9e 50%, #aa458a 80%, #fc9a9e 100%); */
}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* <!-- part1 --> */
/* <!-- video_V--> */
video{
  object-fit: cover;     /* 关键：保持比例填充，与 video 内容一致 */
  object-position: center; /* 可选：控制对齐位置 */
}

#video_V{
  
}
.video-container {
  /* width: auto;
  height: 100%; */
  position: relative;
  background: black;
  cursor: pointer;
}
.video-container.active {
  display: block;
}

.video-player {
  /* width: 100%; */
  /* height: 100%; */
  /* object-fit:cover; */
}

.custom-video-progress{
  position: absolute;
  bottom: 0px;
  width: 100%;
}

.progress-bar{
  display: flex;
  align-items: center;
  width: 95%;
  /* height: 10px; */
  /* background: #B0B0B0; */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  position: absolute;
  /* margin-top: 15px; */
  padding-top: 20px;
  /* padding-bottom: 3px; */
  bottom: 0;
}

.progress-bar .progress-under{
  /* border: red 1px solid; */
  width: 100%;
  background: #B0B0B0;
  height: 3px;
}

.progress-bar .progress-fill{           
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  /* border: red 1px solid; */
  background: white;
  height: 3px;
}

.progress-bar .progress-point {
  /* border: blue 1px solid; */
  height: 0px;
  width: 0px;
  position: absolute;
  right: 0;
  background: white;
  border-radius: 50%;
  /* 保持原有样式，删除display:none，改为默认显示 */
  display: block;
  /* opacity: 0;   用透明度控制显示隐藏 
  transition: opacity 0.2s; */
}

/* 时间显示 - 在进度条上方 */
.time-display {
  position: absolute;
  bottom: 15px;  /* 在进度条上方 */
  left: 0%;
  /* transform: translateX(-90%); */
  color: white;
  /* background: rgba(0,0,0,0.7); */
  padding: 4px 8px;
  padding-left: 15px;
  border-radius: 4px;
  font-size: 20px;
  font-family: monospace;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* 不干扰点击 */
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.time-display .devide{
  font-size: 15px;
  font-weight: 1000;
}        
.time-display .total-time{
  /* color: #CCCCCC; */
  color:#e0e0e0;
}        
.progress-bar .progress-fill.bolding{
  height: 5px;
  /* background: red; */
} 
.progress-bar .progress-under.bolding{
  height: 5px;
  /* background: red; */
} 
.progress-bar .progress-point.bolding{
  height: 10px;
  width: 10px;
}
.video-play-icon {
  width: 48px;      /* 根据SVG实际尺寸调整 */
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 3px;

  background-color: rgba(255, 255, 255, 0.6);  /* 通过背景色控制图标颜色 */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-image: url('../static/img/svg/videoPlay.8d5f5e7b.svg');
  mask-image: url('../static/img/svg/videoPlay.8d5f5e7b.svg');
  position: absolute;
  /* left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform: translateY(-50%); */

  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  opacity: 1;
}
/* 自定义加载图标 - 旋转圆环 */
.loading-icon {/*video*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  /* border: 4px solid rgba(255, 255, 255, 0.2); */
  border-top: 4px solid #00ff88;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none;
  z-index: 10;
}
@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* <!-- GenaralTitle --> */
#Title{
  font-size: 26px;
  font-weight: bold;
  display: flex;
  color: black;
  /* padding: 2px 25px; */
}
/* <!-- product introduce --> */
#product-introduce{
  /* background: red; */
  /* width: 100%; */
  /* height: auto; */
}

.product-item{
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  /* transition: background-color 0.3s, color 0.3s; */
}

/* .product-item:hover{
  background-color: #dbdbdb;
} */

.product-item.active{
  background-color: #dbdbdb;
}
#product-items{
  /* border: 1px black solid; */
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
#product-introduces{
  border: 1px black solid;
  border-radius: 0 0 10px 10px;
}
#product-items-pics{
  /* width: 60%; */
  border-radius: 0 0 10px 10px;
}
/* .product-items-pic{
  display: none;
  position: absolute;
  top: 0;
  z-index: 10;
} */
#product-items-pics img{
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  display: block;

  display: none;
  position: absolute;
  top: 0;
  z-index: 10;
}
.product-items-introduces{
    width: 39%;
}
/* .product-items-pics-img{
  width: 100%;
  height: 100%;
  object-fit:scale-down;
} */


.RBmarkedQr {
  position: absolute;
  width: 20%;
  bottom: 4%;
  right: 2%;;
  z-index: 15;
}


@media (min-width: 576px) { 
  #video_V video{
    height: 99vh;
  }
  .RBmarkedQr {
    width: 15%;
  }
}





/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* <!-- part2 --> */
/* <!-- map-scroll-container part  MAP--> */
.map-scroll-container {
  width: 100%;
  /* height: 80vh; */
  /* height: auto;full screen*/
  overflow: hidden;      /* 隐藏滚动条 */
  position: relative;
  cursor: grab;
  /* margin-top: 10px; */
}

.map-scroll-container.active {
  cursor: grabbing;
}

.map-scroll-container img {
  /* position: absolute; */
  /* left: 50%; */
  /* transform: translateX(20%); */
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  user-select: none;
}

.map-scroll-container map {

}
#footprint_ctnr_ctnr{
  padding-right: 20px;
  position: relative;
}
/* .map-scroll-container .map-out-Of-boundary{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10%;
  height: 10%;
  background: linear-gradient(to bottom, #ff9a9e, #a74989);
  text-align: center;
  justify-content: center;
} */
@media (min-width: 576px) { 
  .map-scroll-container{
    height: 100%;
  }
  .map-scroll-container img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* height: auto; */
    /* height: 80vh; */
  }
  #footprint_ctnr_ctnr{
    height: 60vh;
  }
}


/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* <!-- part3 --> */
/* <!-- my-colleague requrements--> */
#product_introduce_container{
  flex: 5;
}
#colleagues_container{
  padding-right: 20px;
  position: relative;
  flex: 3;
}
.preventScrollTransCtnr{
  position: absolute;
  width: 13%;
  /* height: calc(100% - 10px); */
  inset: 0px 0px 0px 87%; /* 上20px 右0 下20px 左20px */
  /* right: 0; */
  /* background: linear-gradient(to right, #807f7f00 0%, #807f7f1c 50%, #74737354 100%); */
  background: #38383818;
  /* border: #cfcece34 1px dashed; */
  border-radius: 10px;
}
.scrollbar-colleagues-support{
  position: absolute;
  right: 10px;
  /* position: absolute;
  right: 0px; */
  /* margin: 0 10px 0 80px; */
  /* padding-right: 40px; */
}

/* <!-- pics video show carousel--> */
.video-in-carousel{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: block;
  z-index: 10;
}

.video-in-carousel.active {
  /* display: block; */
}

.video-in-carousel .video-player {
  width: 100%;
  height: 100%;
  object-fit:cover;
}
#pics_vedeo_W{
  /* height: 40vw; */
  /* width: 60%; */
}
/* 主容器 */
.carousel-main-container {
  /* height: auto; */
  /* max-width: 800px; */
  margin: 0 auto;
  /* background: #fff; */
  /* border-radius: 10px; */
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 内容区域 */
.carousel-content-area {
  position: relative;
  /* width: 65vw; */
  /*height: 40vw;/* 320/800=0.4  240/800=0.3 */
  width: 100%;
}

/* 轮播图容器 */
.carousel-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: black;
  z-index: 9;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-content {
  position: absolute;
  bottom: 0;
  /* top: 0; */
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(69, 69, 69, 0.5), transparent);
  color: white;
  /* padding: 35px;
  padding-left: 15px;

  padding-top: 5px; */
  padding: 5px 35px 35px 15px;
  /* display: none; */
}

.carousel-content h4 {
  font-size: 19px;
  margin-top: 40px;
  font-weight: bold;
}

.carousel-content p {
  font-size: 18px;
  opacity: 0.9;
  /* margin-bottom: 40px; */
  /* margin-top: 5px; */

}

.video-content{
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  color: white;
  font-size: 18px;

  padding: 5px 35px 0px 15px;
  margin-bottom: 40px;

  width: 80px;             /* 故意设得比文字短 */
  white-space: nowrap;     /* 强制不换行 */
  overflow: visible;       /* 溢出部分不隐藏 */
  /* 可选：去掉水平滚动条 */
  line-height: 1.2;

  /* display: inline-block;   /* 让 div 宽度由内容决定 */
  /* white-space: nowrap;     不换行 */
  /* overflow: visible;       允许溢出（其实不会溢出） */
  /* z-index: 20; */
}

/* 左右箭头 */
.carousel-arrow {
  position: absolute;
  bottom: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
  color: #FCFCFC;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;  /* iOS推荐最小触摸高度 */
  min-width: 44px;
  padding: 12px 20px;
}

.carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow.prev {
  left: 20px;
}

.carousel-arrow.next {
  right: 20px;
}


/* 分页指示器 */
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  /* left: 5px; */
  padding-left: 15px;
  /* left: 25%;
  transform: translateX(-75%); */
  /* left: 50%;
  transform: translateX(-50%); */
  display: flex;
  gap: 5px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  transform: scale(1.2);
}


/* 模糊背景 */
/* <!-- carousel-content-area background--> */
.carousel-content-area .backgroundImg{
  position: absolute;
  width: 100%;
  height: 100%;
  /* z-index: 0; */
}


/* 切换按钮 */
.switch-buttons {
  /* display: flex; */
  /* background: #f5f5f5; */
  /* border-top: 1px solid #ddd; */
  position: absolute;
  bottom: 13px;
  left: 75%;
  transform: translateX(-25%);
  /* left: 50%;
  transform: translateX(-50%); */
  display: flex;
  gap: 10px;
  z-index: 100;
  justify-content: flex-end;  /* 这就是靠右的核心 */
  disabled: true;
}

.switch-btn {
  flex: 1;
  /* padding: 15px 20px; */
  border: none;
  background: transparent;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border: #fff solid 1px ;
  color: white;
/* iOS推荐最小触摸高度 */
  /* min-height: 44px;   */
  min-width: 44px;
  /* padding: 12px 20px;   */
  padding: 6px 10px;  
}

.switch-btn.active {
  background: #fff;
  /* color: #007bff; */
  color: gray;
  font-weight: bold;
}

.switch-btn:hover:not(.active) {
  background: #e9e9e9;
}
@media (min-width: 576px) { 
  .carousel-content-area{
    height: 99vh;
  }
  #product_introduce_container{
    height: 99vh;
  }
  #colleagues_container{
    height: 89vh;
  }
  .preventScrollTransCtnr{
    position: absolute;
    width: 15%;
    /* height: calc(100% - 10px); */
    inset: 20px 0px 20px 85%; /* 上20px 右0 下20px 左20px */
    /* right: 0; */
    /* background: #970e0e60; */
  }
}




/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* <!-- part4 --> */
#QR_list{
  /* width: 40%; */
  /* border: 1px black solid; */
}
.QR_list_note{
  padding: 20px;
  /* padding-bottom: 35px; */
  text-align: center;
  font-weight: 600;
  /* height: 30px; */
  /* padding: 15px 10px; */
  /* 靠右 */
  /* margin-left: auto; */
  /* margin-right: 20px; */
  /* width: auto; */
  font-size: 18px;

  display: flex;
  flex-direction: row;
}
.QR_list_note .box-art{
  /* width: 18px;
  line-height: 18px; */
  background: black;
  margin-right: 5px;
}
/* .QR_list_note .qr-text{
  margin-left: 0px;
  font-size: 16px;
} */

/* wasted */
.QR_list_tile{
  /* padding: 20px 20px 35px 20px; */
  padding: 20px;
  /* padding-left: 40px;
  padding-top: 20px; */
  /* padding-bottom: 35px; */
  text-align: center;
  font-size: 20px;
  /* font-weight: 500; */
}
.QR-list-item {
  flex: 1; /* 均分父容器宽度 */
  display: flex;
  flex-direction: column; /* 垂直排列图片和文字 */
  align-items: center; /* 水平居中 */
  justify-content: flex-start;
  text-align: center;
  transition: transform 0.3s ease;
}

.QRShowInLine {
  display: none;
}

.QR-list-item:hover_w {
  transform: translateY(-2vh); /* 悬停效果 */
  /* padding: 1vw; */
}

.QR-list-item img {
  /* padding: 6.5vw;
  padding-bottom: 0;
  padding-top: 0; */
  width: 60%;
  /* max-width: 150px; */
  height: auto;
  /* margin-bottom: 10px; */
  /* border-radius: 8px; */
  /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
}

.QR-list-item p {
  /* font-size: 14px;
  color: #333;
  font-weight: 500; */
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  /* font-weight: 500; */
}

@media (min-width: 576px) { 

  .QR-list-item img {
    width: 60%;
  }
  .QRShowInLine {
    display: block;
  }
  .QRNotShowInLine {
    display: none;
  }
}




/* <!-- part5 --> */
/* <!-- 备案 --> */
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
  line-height: 100%;
  justify-content: center;

  flex-direction: column;

}

/* 版权信息样式 */
.copyright {
  font-size: 12px;
  color: #a0a0c0;
  font-weight: 400;
}

/* 备案链接容器 */
.beian-links {
  display: inline-flex;
  align-items: center;
  /* gap: 12px; */
  /* column-gap: 12px; */
  flex-wrap: wrap;
  justify-content: left;

  align-items: baseline;
}

/* 备案链接基础样式 */
.beian-link,
.beian-link:link,
.beian-link:visited,
.beian-link:hover,
.beian-link:active {
    text-decoration: none;  /* 彻底取消所有状态下的下划线 */
}


/* 通用备案链接样式 */
.beian-link {
  display: inline-flex;
  align-items: center;
  /* gap: 6px; */
  color: #b8b8d8;
  text-decoration: none;
  font-size: 12px;
  padding: 0px 8px 0px 0px;
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 图标样式 */
.icon-icp {
  font-style: normal;
  font-size: 12px;
}

/* 自定义ICP图标 */
.icon-icp::before {
  content: "🛡️";
  filter: grayscale(100%) brightness(150%);
}
/* 悬停状态：恢复彩色 */
/* .beian-link:hover .icon-icp::before {
  filter: grayscale(0%) brightness(100%);
} */

/* 公安备案图标优化 */
.gongan-icon {
  width: 14px;
  height: 14px;
  /* transition: transform 0.3s ease; */
}








/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* <!-- carousel --> */
/* 加载动画 */
.loading-spinner {/*allCarousel*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 40px;
  height: 40px;
  /* border: 4px solid #f3f3f3; */
  /* border-top: 4px solid #007bff; */
  border-top: 4px solid #00ff88;/*#007bff;*/
  border-radius: 50%;
  animation: spin2 1s linear infinite;
  z-index: 999999;
}
@keyframes spin2 {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.note-show-btn {
  margin-left: auto;
  background: #fc9a9e;
  margin-right: 2%;
}

.note-carousel-wrapper {
  margin-top: 8px;
  width: 100%;
  /* height: 70vw; */
  /* background: black; */
  display: none;
}
/* 轮播图主体 */
.note-carousel {
  width: 100%;
  /* height: 100%; */
  height: 45vw;
  position: relative;
  /* background: red; */
  border-radius: 10px;
}

/* 图片列表 */
.note-carousel-inner {
  display: flex;
  width: 100%;
  height: 100%;
  /* background: green; */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 每张图片容器 */
.note-carousel-item {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #f0f0f0; 图片加载前的背景 */
  border-radius: 10px;
  /* border: 1px solid black; */
}

.note-carousel-item img {
  width: 100%;
  height: 100%;
  /* max-width: 100%; */
  /* max-height: 100%; */
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 10px;
  /* border: 1px solid black; */
}

.note-carousel-item img.loaded {
  opacity: 1;
}
/* 分页指示器 */
.note-carousel-indicators {
  position: absolute;
  left: 50%;
  bottom: 5;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}


.note-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s;
}

.note-indicator.active {
  background: white;
  transform: scale(1.2);
}

.show {
  display: block;
}

@media (min-width: 576px) { 
  .note-carousel-wrapper {
      width: 50%;
      min-height: 25vw;
      overflow: hidden;
      align-self: center;
  }
}