:root {
  --text-color: #007bff; /* 设置一个默认的文本颜色变量 */
}

.show .tp-mask-wrap-img {
  animation: shows 1s ease-out;
}
.show .about-button1 {
  animation: buttonshow 1.5s ease-out;
}
.show .about-button2 {
  animation: buttonshow2 1.5s ease-out;
}
.show .p {
  animation: pshow 1s ease-out;
}
.show .tp-title {
  animation: titleshow 1s ease-out;
}

@keyframes titleshow {
  0% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes shows {
  0% {
    transform: translateX(500px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes pshow {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes buttonshow {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes buttonshow2 {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
  }
}

.hide .tp-mask-wrap-img {
  animation: hides 1s ease-out;
}
.hide .about-button1 {
  animation: buttonhide 1s ease-out;
}
.hide .about-button2 {
  animation: buttonhide2 1s ease-out;
}
.hide .p {
  animation: phide 1s ease-out;
}
.hide .tp-title {
  animation: titlehide 1s ease-out;
}

@keyframes phide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}
@keyframes titlehide {
  0% {
    transform: translateY(0px);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(200px);
  }
}
@keyframes hides {
  0% {
    transform: translateX(0px);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(500px);
  }
}

@keyframes buttonhide {
  0% {
    transform: translateX(0);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(-200px);
  }
}
@keyframes buttonhide2 {
  0% {
    transform: translateX(0);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(200px);
  }
}

.top {
  width: 100%;
  overflow: hidden;
  height: 615px;
  position: relative;
}
.top .tp-kbimg {
  width: 100%;
  height: 100%;
  transform-origin: center; /* 图片从中心放大和缩小 */
  animation: scale-animation 30s infinite ease-in-out; /* 动画设置 */
  object-fit: cover;
  position: absolute;
}
.top ul {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  padding: 0;
  list-style: none;
}
.top ul .li {
  width: 70%;
  margin: auto;
  display: flex;
  position: relative;
  margin-top: 100px;
}
.top ul .li .tp-loop-wrap {
  position: absolute;
  z-index: 2;
}
.top ul .li .tp-loop-wrap #pos-title {
  height: 165px;
  position: relative;
  overflow: hidden;
}
.top ul .li .tp-loop-wrap #pos-title .tp-title {
  font-size: 60px;
  font-weight: bold;
}
.top ul .li .tp-loop-wrap #po-p {
  width: 1200px;
  height: 65px;
  position: relative;
  overflow: hidden;
}
.top ul .li .tp-loop-wrap #po-p .p {
  height: 32px;
  font-size: 18px;
  font-weight: 300;
  color: #8a8a8a;
  line-height: 32px;
  position: absolute;
}
.top ul .li .tp-loop-wrap .button {
  width: 500px;
  display: flex;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  left: -100px;
  padding-left: 100px;
}
.top ul .li .tp-loop-wrap .button div {
  padding: 10px 40px;
  border: var(--text-color) 1px solid;
  margin-right: 20px;
  border-radius: 50px;
  color: var(--text-color);
  cursor: pointer;
}
.top ul .li .tp-mask-wrap {
  width: 580px;
  height: 370px;
  display: flex;
  align-items: center;
  justify-content: start;
  overflow: hidden;
  position: absolute;
  right: 0;
}
.top ul .li .tp-mask-wrap .tp-mask-wrap-img {
  position: absolute;
}

@media (max-width: 1024px) {
  .container {
    width: 100% !important;
  }
  .container .top {
    height: 450px !important;
  }
  .container .top .tp-mask-wrap {
    display: none !important;
  }
  .container .top .li {
    width: 100% !important;
  }
  .container .top ul li #pos-title {
    height: auto !important;
  }
  .container .top ul li #pos-title .tp-title {
    font-size: 35px !important;
  }
  .container .top ul li .p {
    font-size: 16px !important;
  }
  .container .top #po-p {
    width: 70% !important;
    min-height: 120px !important;
  }
  .container .top #po-p .p {
    line-height: 40px !important;
  }
  .container .top .button {
    margin-top: 10px !important;
  }
}

/* 添加缺失的动画 */
@keyframes scale-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}