@charset "UTF-8";
body,
html {
  
}

/* 关键帧动画定义 */
/* 标题光效动画 */
@keyframes smokeGlow {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.85;
    filter: brightness(1.4);
    transform: scale(1.03);
  }
}

/* 文字光效动画 */
@keyframes textGlow {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.8;
    filter: brightness(1.5);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
}

/* 人物动画1 - 上下浮动 */
@keyframes peopleFloat1 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* 人物动画2 - 左右摇摆 */
@keyframes peopleFloat2 {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(8px) rotate(3deg);
  }
  75% {
    transform: translateX(-8px) rotate(-3deg);
  }
}

/* 云朵漂浮动画 */
@keyframes cloudFloat1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(150px);
  }
}

@keyframes cloudFloat2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-150px);
  }
}

/* 花瓣飘落动画 */
@keyframes petalFall1 {
  0% {
    transform: translate(0, -50px) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: translate(20px, 100px) rotate(45deg);
    opacity: 1;
  }
  50% {
    transform: translate(10px, 250px) rotate(90deg);
    opacity: 0.8;
  }
  75% {
    transform: translate(30px, 400px) rotate(135deg);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 600px) rotate(180deg);
    opacity: 0;
  }
}

@keyframes petalFall2 {
  0% {
    transform: translate(0, -50px) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: translate(-25px, 120px) rotate(-45deg);
    opacity: 1;
  }
  50% {
    transform: translate(-15px, 270px) rotate(-90deg);
    opacity: 0.8;
  }
  75% {
    transform: translate(-35px, 420px) rotate(-135deg);
    opacity: 0.7;
  }
  100% {
    transform: translate(-25px, 600px) rotate(-180deg);
    opacity: 0;
  }
}

@keyframes petalFall3 {
  0% {
    transform: translate(0, -50px) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: translate(30px, 140px) rotate(60deg);
    opacity: 1;
  }
  50% {
    transform: translate(15px, 290px) rotate(120deg);
    opacity: 0.8;
  }
  75% {
    transform: translate(45px, 440px) rotate(180deg);
    opacity: 0.7;
  }
  100% {
    transform: translate(30px, 600px) rotate(240deg);
    opacity: 0;
  }
}

@keyframes petalFall4 {
  0% {
    transform: translate(0, -50px) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: translate(-35px, 130px) rotate(-60deg);
    opacity: 1;
  }
  50% {
    transform: translate(-20px, 280px) rotate(-120deg);
    opacity: 0.8;
  }
  75% {
    transform: translate(-50px, 430px) rotate(-180deg);
    opacity: 0.7;
  }
  100% {
    transform: translate(-35px, 600px) rotate(-240deg);
    opacity: 0;
  }
}

/* 倒影动画 */
@keyframes shadowMove {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 城市剪影动画 */
@keyframes cityMove {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.show-effect {
  position: fixed;
  width: 7.92%;
  right: 1.09%;
  top: 34.17%;
  cursor: pointer;
  z-index: 99999;
  display: none;
}

.show-effect:hover .effect-item {
  transform: scale(1.1);
}

.show-effect .effect-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.3s;
}

.show-effect .effect-item--1 {
  z-index: 1;
}

.show-effect img {
  max-width: inherit;
  max-height: inherit;
}

.try2025ld-qp4--dyf {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1920px;
  height: 960px;
  margin: 0 auto;
  z-index: 2147483647;
  transform-origin: 0 0;
  display: none;
  overflow: hidden;
  background: url("../images/ani_mask.png");
}

.try2025ld-qp4--dyf * {
  padding: 0px;
  margin: 0px;
  word-wrap: break-word;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.try2025ld-qp4--dyf .animate-item {
  position: absolute;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.8s, transform 0.8s;
  display: none;
  /* 主标题 */
  /* 城市剪影 */
  /* 中央大数字 */
  /* 5 */
  /* 1 */
  /* 装饰元素2 */
  /* 左侧人物 */
  /* 右侧人物 */
  /* 云朵元素 */
  /* 花瓣元素 */
  /* 致敬 */
  /* 热爱可抵万难 */
}

.try2025ld-qp4--dyf .animate-item.active {
  opacity: 1;
  transform: scale(1);
}

.try2025ld-qp4--dyf .animate-item--close {
  width: 44px;
  top: 85px;
  right: 90px;
  left: auto;
  margin-left: 0;
  z-index: 100;
  cursor: pointer;
  opacity: 0;
  transform: scale(1);
}

.try2025ld-qp4--dyf .animate-item--close.active {
  opacity: 1;
}

.try2025ld-qp4--dyf .animate-item--close:hover {
  transform: scale(1.1);
}

.try2025ld-qp4--dyf .animate-item--bg {
  position: absolute;
  bottom: 0;
  left: 50%;
}

.try2025ld-qp4--dyf .animate-item--1 {
  left: 50%;
  z-index: 1;
  transform: scale(1);
}

.try2025ld-qp4--dyf .animate-item--1.smoke-animate {
  animation: smokeGlow 5s ease-in-out infinite;
}

.try2025ld-qp4--dyf .animate-item--2 {
  left: 50%;
  z-index: 2;
}

.try2025ld-qp4--dyf .animate-item--2.city-animate {
  animation: cityMove 0.8s ease-in-out both;
}

.try2025ld-qp4--dyf .animate-item--3 {
  bottom: 0;
  left: 50%;
  z-index: 3;
}

.try2025ld-qp4--dyf .animate-item--3.shadow-animate {
  animation: shadowMove 0.8s ease-in-out both;
}

.try2025ld-qp4--dyf .animate-item--4 {
  left: 50%;
  z-index: 3;
}

.try2025ld-qp4--dyf .animate-item--5 {
  right: 50%;
  z-index: 4;
}

.try2025ld-qp4--dyf .animate-item--6 {
  right: 50%;
  z-index: 4;
}

.try2025ld-qp4--dyf .animate-item--7 {
  left: 50%;
  z-index: 7;
}

.try2025ld-qp4--dyf .animate-item--7.people-animate {
  animation: peopleFloat1 4s ease-in-out infinite;
}

.try2025ld-qp4--dyf .animate-item--8 {
  right: 50%;
  z-index: 8;
}

.try2025ld-qp4--dyf .animate-item--8.people-animate {
  animation: peopleFloat2 5s ease-in-out infinite;
}

.try2025ld-qp4--dyf .animate-item--9 {
  z-index: 9;
}

.try2025ld-qp4--dyf .animate-item--9.cloud-animate1 {
  animation: cloudFloat1 20s linear infinite;
}

.try2025ld-qp4--dyf .animate-item--9.cloud-animate2 {
  animation: cloudFloat2 25s linear infinite;
}

.try2025ld-qp4--dyf .animate-item--9--1 {
  left: 50%;
}

.try2025ld-qp4--dyf .animate-item--9--2 {
  left: 50%;
  transform: scale(0.8);
}

.try2025ld-qp4--dyf .animate-item--9--3 {
  left: 50%;
  transform: scale(1.2);
}

.try2025ld-qp4--dyf .animate-item--9--4 {
  right: 50%;
  transform: scale(0.7);
}

.try2025ld-qp4--dyf .animate-item--9--5 {
  right: 50%;
  transform: scale(1);
}

.try2025ld-qp4--dyf .animate-item--9--6 {
  right: 50%;
  transform: scale(1.1);
}

.try2025ld-qp4--dyf .animate-item--9--7 {
  right: 50%;
  transform: scale(1.1);
}

.try2025ld-qp4--dyf .animate-item--10 {
  z-index: 10;
  left: 50%;
}

.try2025ld-qp4--dyf .animate-item--10.active {
  opacity: 0;
}

.try2025ld-qp4--dyf .animate-item--10--1 {
  animation: petalFall1 7s linear infinite;
}

.try2025ld-qp4--dyf .animate-item--10--2 {
  animation: petalFall2 9s linear infinite;
  animation-delay: 1s;
}

.try2025ld-qp4--dyf .animate-item--10--3 {
  animation: petalFall3 8s linear infinite;
  animation-delay: 3s;
}

.try2025ld-qp4--dyf .animate-item--10--4 {
  animation: petalFall4 10s linear infinite;
  animation-delay: 5s;
}

.try2025ld-qp4--dyf .animate-item--10--5 {
  animation: petalFall1 11s linear infinite;
  animation-delay: 2s;
}

.try2025ld-qp4--dyf .animate-item--10--6 {
  animation: petalFall2 9s linear infinite;
  animation-delay: 4s;
}

.try2025ld-qp4--dyf .animate-item--10--7 {
  animation: petalFall3 8s linear infinite;
  animation-delay: 6s;
}

.try2025ld-qp4--dyf .animate-item--10--8 {
  animation: petalFall4 12s linear infinite;
  animation-delay: 1.5s;
}

.try2025ld-qp4--dyf .animate-item--10--9 {
  animation: petalFall1 10s linear infinite;
  animation-delay: 3.5s;
}

.try2025ld-qp4--dyf .animate-item--10--10 {
  animation: petalFall3 9s linear infinite;
  animation-delay: 5.5s;
}

.try2025ld-qp4--dyf .animate-item--11 {
  left: 50%;
  z-index: 7;
}

.try2025ld-qp4--dyf .animate-item--11.text-animate {
  animation: textGlow 4s ease-in-out infinite;
}

.try2025ld-qp4--dyf .animate-item--12 {
  left: 50%;
  z-index: 7;
}

.try2025ld-qp4--dyf .animate-item--12.text-animate {
  animation: textGlow 4s ease-in-out infinite;
  animation-delay: 1s;
}