.files-banner {
  background: url('../img/files/renwudanganbanner.png');
 /* background-size: 100% 100%; */
  height: 61.25rem;
  display: flex;
  background-size: cover;
  /* text-align: right; */
  background-position: center;
  position: relative; /* 为了添加占位符 */
}

.files-RFID {
  text-align: center;
  padding: 3rem 0 3rem 0;
  margin: 0 auto;
  background: url('../img/files/zhinengwenjianguibeijing.png');
  background-size: 100% 100%;
}

.default-header {
  z-index: 9999;
}

.alt-header {
  opacity: 0;
  background: #fff;
  z-index: 9998;
  /* 初始时隐藏 */
}

.alt-header .logo .nav-list a {
  color: #302929;
}

.rfid-content {
  display: flex;
  justify-content: center;
  padding-top: 3.125rem;
  margin: 0 auto;
}

.rfid-left {
  padding-top: 2.5rem;
}

.rfid-left img {
  width: 43.375rem;
  height: 50.5rem;
}

.rfid-right {
  width: 50vw;
}

.rfid-title {
  text-align: right;
}

.rfid-title h3 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 3rem;
  color: #302929;
  line-height: 4.1875rem;
  text-align: right;
  font-style: normal;
}

.rfid-title p {
  margin-top: 1.25rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 1.125rem;
  color: #302929;
  line-height: 1.5625rem;
  text-align: right;
  font-style: normal;
}

.rfid-line {
  width: 1.5625rem;
  height: 0.25rem;
  background: linear-gradient(270deg, #DC4F5B 0%, #B7272E 100%);
  border-radius: 0.1875rem;
  display: inline-block;
  margin-top: 3.75rem;
}

.rfid-items {
  display: flex;
  justify-content: space-between;
  margin-top: 1.875rem;
  margin-left: 5rem;
}

.rfid-items-left .rfid-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rfid-item {
  width: 21.25rem;
  height: 5rem;
  background: linear-gradient(270deg, rgba(220, 79, 91, 0) 0%, rgba(183, 39, 46, 0.1) 100%);
  text-align: center;
  line-height: 5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0px 0.625rem 1.25rem 0px rgba(0, 0, 0, 0.1);
}

.rfid-item h4 {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 1.25rem;
  color: #B7272E;
  font-style: normal;
}

.files-electronic {
  text-align: center;
  position: relative;
  padding-top: 3rem;
  padding-bottom: 9.8125rem ;
  background: #FFFFFF;
}

.electronic-contents  {
  background: #B7272E;
  margin-top: 8.75rem;
  text-align: left;
  padding: 1.875rem 0 0 13.75rem;
}

.electronic-content {
  display: flex;
  padding-bottom: 1.875rem;
}

.electronic-content img {
  width: 2rem;
  height: 2rem;
  margin-right: 1.875rem;
}

.electronic-content h4 {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 1.5rem;
color: #FFFFFF;
line-height: 2.0625rem;
text-align: left;
font-style: normal;
margin-bottom: 0.625rem;
}

.electronic-content p {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 1.125rem;
  color: #FED8B7;
  line-height: 1.5625rem;
  text-align: left;
  font-style: normal;
}

.electronic-img {
  width: 53.625rem;
  height: 31rem;
  /* border: #302929 0.0625rem solid; */
  /* margin-top: 3.75rem */
  position: absolute;
  top: 11.75rem;
  left: 44.0625rem; 
  background: #FFFFFF;
  padding: 1rem;
box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(183,39,46,0.1);
border-radius: 0.5rem;
border: 0.0625rem solid #B7272E;
}

.electronic-img img {
  width: 51.625rem;
  height: 29rem;
}

.files-bigscreen {
  text-align: center;
  padding: 3rem 0 6.75rem 0 ;
  background: #FFFFFF;
}

.bigscreen-content {
  /* margin-top: 4rem; */
  display: flex;
  /* justify-content: center; */
  /* padding-left: 12.875rem; */
margin: 4rem auto 0 auto;
width: 92.75rem;
}

.bigscreen-left {
  width: 60.625rem;
  height: 34.3125rem;
  background: #FFFFFF;
  box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(183,39,46,0.1);
  border-radius: 0.5rem;
  /* border: 0.0625rem solid #B7272E; */
}

.bigscreen-left img {
  width: 59.375rem;
  height: 33.0625rem;
}

.bigscreen-right {
  display: flex;
  flex-direction: column;
  margin-left: 3rem;
  padding: 4.375rem 0 
}

.bigscreen-item {
  display: flex;
  text-align: left;
  margin-bottom: 2.5rem;
}

.bigscreen-item img {
  margin-right: 1.875rem;
  width: 2rem;
  height: 2rem;
}

.bigscreen-item h4 {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 1.5rem;
color: #302929;
line-height: 2.0625rem;
font-style: normal;
margin-bottom: 0.625rem;
}

.bigscreen-item p {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 1.125rem;
color: #302929;
line-height: 1.5625rem;
font-style: normal;
}

.files-banner-text {
  padding-left: 11.46%;
  padding-top: 19.25rem;
}

.files-banner-text h1{
  position: relative;
  font-family: FZZDHJW--GB1, sans-serif;
  font-weight: normal;
  font-size: 5rem;
  text-align: left;
  font-style: normal;
}

/* 渐变文字层 */
.files-banner-text h1::before {
  content: "人武档案管理系统";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  color: transparent;
  background: linear-gradient(45.48227628471054deg, #B7272E 0%, #FF5D64 34%, #B7272E 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.files-banner-text p{
  position: relative;
  font-family: FZZDHJW--GB1, sans-serif;
  font-weight: normal;
  font-size: 1.875rem;
  text-align: left;
  font-style: normal;
}

/* 渐变文字层 */
.files-banner-text p::before {
  content: "RFID智能文件柜｜电子档案管理｜可视化档案大屏";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  color: transparent;
  background: linear-gradient(45.48227628471054deg, #B7272E 0%, #FF5D64 34%, #B7272E 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.files-banner-text button {
  width: 13.75rem;
height: 3.125rem;
background: linear-gradient( 142deg, rgba(255,255,255,0.48) 0%, #FFFFFF 60%);
border-radius: 0.25rem;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 1.5rem;
color: #B7272E;
line-height: 2.0625rem;
text-align: center;
font-style: normal;
margin-top: 2.8125rem;
}

.files-banner-text button:hover {
  box-shadow: 0rem 0.3125rem 0.625rem 0rem #8F2227, 0rem 0.625rem 1.25rem 0rem #8F2227;
}
/* 冒泡动效 */
.bubble1-container {
  position: absolute;
  width: 60%;
  height: 61.25rem;
  overflow: hidden;
  left: 40%;
}

.bubble1 {
  position: absolute;
  bottom: -8.125rem;
  /* 使用不同的left值来定位每个泡泡 */
  /* transform: translateX(-50%); */ /* 不再需要这个，因为我们手动设置left */
  width: 7.25rem;
  height: 7.25rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0rem 1.25rem 2.5rem 0rem rgba(215,51,0,0.68);
  color: #B7272E;
  font-size: 1.25rem;
  border-radius: 50%;
  will-change: bottom, opacity, transform;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 给每个泡泡添加不同的动画 */
}

/* 为每个泡泡单独设置样式，包括动画时长和延迟 */
.bubble1:nth-child(1) {
  left: 7%;
  animation: bubbleUp1 10s infinite ease-in-out 0s; /* 时长6秒，无延迟 */
}

.bubble1:nth-child(4) {
  left: 17%;
  animation: bubbleUp1 10.5s infinite ease-in-out 1s; /* 时长8秒，延迟1秒 */
}

.bubble1:nth-child(5) {
  left: 25%;
  animation: bubbleUp1 12s infinite ease-in-out 2s; /* 时长10秒，延迟2秒 */
}

.bubble1:nth-child(2) {
  left: 37%;
  animation: bubbleUp1 11s infinite ease-in-out 3s; /* 时长12秒，延迟3秒 */
}

.bubble1:nth-child(3) {
  left: 50%;
  animation: bubbleUp1 14s infinite ease-in-out 4s; /* 时长14秒，延迟4秒 */
}

.bubble1:nth-child(6) {
  left: 65%;
  animation: bubbleUp1 13.5s infinite ease-in-out 3.5s; /* 时长14秒，延迟4秒 */
}

.bubble1:nth-child(7) {
  left: 80%;
  animation: bubbleUp1 12.5s infinite ease-in-out 3s; /* 时长14秒，延迟4秒 */
}

@keyframes bubbleUp1 {
  0% {
    bottom: -3.125rem;
    opacity: 0;
    transform: scale(0.8);
    animation-timing-function: ease-in;
  }
  75% {
    bottom: 35rem; /* 调整这个值以改变泡泡上升的高度 */
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  100% {
    bottom: 50.25rem; /* 泡泡消失的位置 */
    opacity: 0;
    transform: scale(1.2);  /* animation-timing-function: ease-out; */
  }
}

@media screen and (min-width: 1921px) { 
  .rfid-content {
    max-width: 1480px;
  }

  .bigscreen-content {
  max-width: 92.75rem;
  }

  .electronic-contents {
    /* padding-left: 18vw; */
    padding-left: calc(13.75rem + ((100vw - 1920px) * 0.51));  /* 可以组合使用，更精确控制 */
  }

  .electronic-img {
    left: calc(44.0625rem + ((100vw - 1920px) * 0.51)); 
  }

  .files-banner {
    height: calc(61.25rem + ((100vw - 1920px) * 0.51));
  }

  .files-banner-text {
    padding-left: calc(11.46% + ((100vw - 1920px) * 0.25));
    padding-top: calc(19.25rem + ((100vw - 1920px) * 0.25));
  }
}