@charset "utf-8";

* {
	padding: 0px;
	margin: 0px;
}
.showEffect {
	position: fixed;
	right: 2vw;
	top: 40%;
	z-index: 999999;
	width: 6vw;
	opacity: 0.5;
}

.showEffect:hover {
	opacity: 1;
	cursor: pointer;
	transform: scale(0.9);
	-webkit-transform: scale(0.9);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.try-animation img{
	max-width: inherit;
}
.try-animation {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #333;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: 2147483647;
	display: none;
}

.try-animation .delete {
	position: absolute;
	width: 2vw;
	right: 4vw;
	top: 4vw;
	z-index: 300;
}

.try-animation .delete:hover {
	opacity: 0.6;
	cursor: pointer;
}

.try2026yd-bg{
	width: 100%;
	height: 100%;
}
.try2026yd-hu{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
	animation: float 3s linear infinite;
}
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

.try2026yd-shanL{
	width: 100%;
	position: absolute;
	bottom: -5%;
	opacity: 0;
	left: 0;
	z-index: 3;
}
.try2026yd-wenzi{
	width: 29.4%;
	position: absolute;
	top: 11%;
	left: 13.4%;
	z-index: 4;
	opacity: 0;
	-webkit-animation: text-float 3s ease-in-out infinite 3.5s;
	animation: text-float 3s ease-in-out infinite 3.5s;
}
.try2026yd-chuan-box{
	opacity: 0;
}
.try2026yd-chuan1{
	width: 7.7%;
	position: absolute;
	bottom: 7.3%;
	left: 41.1%;
	z-index: 3;
	animation: chuan1 20s linear infinite;
	animation-delay: -1s;
}
.try2026yd-chuan2{
	width: 5.9%;
	position: absolute;
	bottom: 11.3%;
	right: 30.5%;
	z-index: 3;
	animation: chuan2 25s linear infinite;
}
.try2026yd-chuan3{
	width: 7.1%;
	position: absolute;
	bottom: 7.3%;
	right: 15.4%;
	z-index: 3;
	animation: chuan3 20s linear infinite;
	animation-delay: -10s;
}
@keyframes chuan1 {
	0% {
		opacity: 0;
		left: 41.1%;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		left: 0%;
		opacity: 0;
	}
}
@keyframes chuan2 {
	0% {
		opacity: 0;
		right: 30.5%;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		right: 80%;
		opacity: 0;
	}
}
@keyframes chuan3 {
	0% {
		opacity: 0;
		right: 15.4%;
	}
	10% {
		opacity: 1;
	}
	100% {
		right: -10%;
	}
}



/* 烟花释放 ***************************************************************************************************/
.yanhuashow {
	width: 100%;
	display: none;
}

.yanhuashow img {
	position: absolute;
	z-index: 10;
}

.yanhuashow .yh1 {
	width: 2.2%;
	left: 38.9%;
	top: 51%;
	animation: shoot 10s linear infinite;
	-webkit-animation: shoot 10s linear infinite;
}

.yanhuashow .yh2 {
	width: 5.9%;
	top: 23.5%;
	left: 48.2%;
	animation: shoot 12s linear infinite;
	-webkit-animation: shoot 12s linear infinite;
}

.yanhuashow .yh3 {
	width: 9.6%;
	right: 17.3%;
	top: 23.2%;
	animation: shoot 8s linear infinite;
	-webkit-animation: shoot 8s linear infinite;
}




/* 烟花升 */

@keyframes shoot {
	0%{
		opacity: 0;
		transform: translate(-500%, 500%);
	}
	10%{
		opacity: 1;
	}
	60%{
		opacity: 1;
		transform: translate(0%, -0%);
	}
	100%{
		opacity: 0;
		transform: translate(200%, -200%) scale(0.2);
	}
}
@-webkit-keyframes shoot {
	0%{
		opacity: 0;
		-webkit-transform: translate(-500%, 500%);
	}
	10%{
		opacity: 1;
	}
	60%{
		opacity: 1;
		-webkit-transform: translate(0%, -0%);
	}
	100%{
		opacity: 0;
		-webkit-transform: translate(200%, -200%) scale(0.2);
	}
}
/* 渐出******************************************************************************** */
/* 从上往下渐出 */
.fadeInDown {
	animation: fadeInDown 2s forwards;
}

@keyframes fadeInDown {
	0% {
		top: -200px;
		opacity: 0;
	}

	100% {
		top: 0px;
		opacity: 1;
	}
}
/*  从下往上渐出  */
.fadeInUp {
	animation: transDomOne 2s forwards;
}

@keyframes fadeInUp {
	0% {
		bottom: -200px;
		opacity: 0;
	}

	100% {
		bottom: 0px;
		opacity: 1;
	}
}
/* 从左往右渐出 */
.fadeInLeft {
	animation: fadeInLeft 2s forwards;
}

@keyframes fadeInLeft {
	0% {
		left: -200px;
		opacity: 0;
	}

	100% {
		left: 0px;
		opacity: 1;
	}
}

/* 从右往左渐出 */
.fadeInRight {
	animation: fadeInRight 2s forwards;
}

@keyframes fadeInRight {
	0% {
		right: -200px;
		opacity: 0;
	}

	100% {
		right: 0px;
		opacity: 1;
	}
}
/* 渐出end*************************************************************************** */

/* 摇晃动画************************************** */

/* 左角摇晃 */
.tlshake{
	-webkit-transform-origin: top left; 
	transform-origin: top left;
}
/* 右上角摇晃 */
.trshake{
	-webkit-transform-origin: top right; 
	transform-origin: top right;
}
/* 左下角摇晃 */
.blshake{
	-webkit-transform-origin: bottom left; 
	transform-origin: bottom left;
}
/* 右下角摇晃 */
.brshake{
	-webkit-transform-origin: bottom right; 
	transform-origin: bottom right; 
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  33% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }
  66% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  33% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }
  66% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

/* 摇摃动画end************************************** */

/* 文字浮动动画 */
@keyframes text-float {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-10px) scale(1.02);
	}
}
@-webkit-keyframes text-float {
	0%, 100% {
		-webkit-transform: translateY(0) scale(1);
	}
	50% {
		-webkit-transform: translateY(-10px) scale(1.02);
	}
}




/* 烟花释放 ***************************************************************************************************/
.try-animation .yhs2 {
	position: absolute;
	z-index: 1;
	top: 10%;
	left: 0;
	width: 100%;
}

.try-animation .yhs2 img {
	width: 5vw;
	position: absolute;
	left: 50%;
	top: 20%;
	z-index: 2;
}

.try-animation .yhs2 .yh1 {
	margin-left: -43%;
	margin-top: 10%;
	animation: shoot2 6s linear infinite;
	-webkit-animation: shoot2 6s linear infinite;
}

.try-animation .yhs2 .yh2 {
	width: 3.7vw;
	margin-left: -33%;
	top: 10%;
	animation: shoot2 5s linear infinite;
	-webkit-animation: shoot2 5s linear infinite;
}

.try-animation .yhs2 .yh3 {
	margin-left: -20%;
	margin-top: 0%;
	animation: shoot2 4s linear infinite;
	-webkit-animation: shoot2 4s linear infinite;
}

.try-animation .yhs2 .yh4 {
	margin-left: -9%;
	margin-top: 5%;
	animation: shoot2 3s linear infinite;
	-webkit-animation: shoot2 3s linear infinite;
}

.try-animation .yhs2 .yh5 {
	width: 6vw;
	margin-left:10%;
	margin-top: -3%;
	animation: shoot2 5.5s linear infinite;
	-webkit-animation: shoot2 5.5s linear infinite;
}

.try-animation .yhs2 .yh6 {
	width: 3.7vw;
	margin-left: 22%;
	animation: shoot2 4.2s linear infinite;
	-webkit-animation: shoot2 4.2s linear infinite;
}

.try-animation .yhs2 .yh7 {
	margin-left: 30.9%;
	margin-top: 7%;
	animation: shoot2 5.1s linear infinite;
	-webkit-animation: shoot2 5.1s linear infinite;
}



/* 烟花升 */
@-webkit-keyframes shoot2 {
	0% {
		-webkit-transform: translate3d(0%, 500%, 0) scale(0.05);
		transform: translate3d(0%, 500%, 0) scale(0.05);
		background-color: #FFE896;
		border-radius: 50%;
	}

	79% {
		background-color: #FFE896;
		border-radius: 50%;
	}

	80% {
		background-color: inherit;
		-webkit-transform: translate3d(0%, -0%, 0) scale(0.05);
		transform: translate3d(0%, -0%, 0) scale(0.05);
		border-radius: 50%;
	}

	90% {
		-webkit-transform: translate3d(0%, -0%, 0) scale(1);
		transform: translate3d(0%, -0%, 0) scale(1);
		border-radius: 50%;
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes shoot2 {
	0% {
		-webkit-transform: translate3d(0%, 500%, 0) scale(0.05);
		transform: translate3d(0%, 500%, 0) scale(0.05);
		background-color: #FFE896;
		border-radius: 50%;
	}

	79% {
		background-color: #FFE896;
		border-radius: 50%;
	}

	80% {
		background-color: inherit;
		-webkit-transform: translate3d(0%, -0%, 0) scale(0.05);
		transform: translate3d(0%, -0%, 0) scale(0.05);
		border-radius: 50%;
	}

	90% {
		-webkit-transform: translate3d(0%, -0%, 0) scale(1);
		transform: translate3d(0%, -0%, 0) scale(1);
		border-radius: 50%;
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


/* ===============================================
   动态装饰层样式 - 增强视觉效果
   =============================================== */

/* 装饰层容器 */
.dynamic-decorations {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
}

/* ========== 闪烁星星效果 ========== */
.stars-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.star {
	position: absolute;
	width: 4px;
	height: 4px;
	background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
	border-radius: 50%;
	animation: twinkle var(--duration) ease-in-out infinite;
	animation-delay: var(--delay);
	box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.6);
}

.star::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #fff, transparent);
	transform: translate(-50%, -50%);
}

.star::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, transparent, #fff, transparent);
	transform: translate(-50%, -50%);
}

@keyframes twinkle {
	0%, 100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}