*{margin: 0;padding: 0}
html,body,.wrap,.swiper-container,.bg{height: 100%;}
@font-face {font-family: douyu;src: url(../animate/douyu.woff);}
.font-douyu{font-family: douyu;}
.wrap{max-width: 1200px;margin: 0 auto;background-color: #AD0B00;font-size: 0.32rem;color: rgb(255, 221, 172);}
body{background-color: red;font-family: Avenir,Helvetica,Arial,sans-serif;color: rgb(255, 221, 172);}
/* .swiper-wrapper{transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) !important;} */
.swiper-container-cube .swiper-cube-shadow{display: none;}
.swiper-slide {position: relative;overflow: hidden;text-align: center;}
.bg{background: url(../image/page1.png);background-size:100% 100%;position: absolute;left: 0;top: 0;width: 100%;z-index: -1;height: 100%;object-fit: contain;transform: rotateY(180deg) rotateX(0deg);}
.bg2{background: url(../image/bg1.webp);background-size:100% 100%;position: absolute;left: -1.6rem;top: 0;width: 10.24rem;z-index: -1;height: 10.24rem;    filter: brightness(0.9) contrast(100%) saturate(91%) hue-rotate(7.2deg) blur(0px);}
.gif img,.gif{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}

.bg2-1{background: url(../image/DM_20240304161617_001.WEBP);background-size:100% 100%;position: absolute;left: 0;top: 0;width: 100%;opacity: 0.6 !important;z-index: -1;height: 100%;}
.bg4-1{opacity: 0.4 !important;}
.bg3{background: url(../image/DM_20240304161617_006.WEBP);z-index: -2;opacity: 1 !important;background-position: center;background-repeat: no-repeat;background-size: auto 18rem;}
.bg4{background: url(../image/DM_20240304161617_009.WEBP);z-index: -2;opacity: 1 !important;background-position: center;background-repeat: no-repeat;background-size: 100% 100%;width: 110%;left: -10%;}
.bg5{background: url(../image/DM_20240304161617_010.WEBP);z-index: -2;opacity: 1 !important;background-position: center;background-repeat: no-repeat;background-size: 100% 100%;width: 110%;left: -10%;}
.bg6{background: url(../image/DM_20240304161617_011.WEBP);z-index: -2;opacity: 1 !important;background-position: center;background-repeat: no-repeat;background-size: auto 36rem;width: 110%;left: -10%;}
.topimg{background: url(../image/DM_20240304161617_002.WEBP);width: 100%;height: 4.4rem;background-position:bottom center;background-size: 10rem auto;background-repeat: no-repeat;position: absolute;left: 0;top: 0;}

.bg-red-wrap{background-color: rgba(136,1,0,0.8);padding: 0.2rem 0;width: 90%;margin: 0 auto;margin-top: 0.2rem;}
.ft12{font-size: 0.24rem;font-weight: bold;}
.ft14{font-size: 0.28rem;}

.timeline p{margin: 0.1rem;}
.timeline p span{display: inline-block;font-size: 0.26rem;}
/* .timeline p span:nth-child(1){text-align: right;flex: 1;}
.timeline p span:nth-child(2){margin: 0 0.2rem;display: inline-block;font-size: 0.5rem;}
.timeline p span:nth-child(3){text-align: left;flex: 2;} */

.tips{color: #fff;font-size: 0.28rem;padding: 0 0.2rem;margin-bottom: 0.3rem;line-height: 0.38rem;text-align: left;}
.tips span{color: rgb(255, 221, 172);font-size: 0.32rem;}

.form input {display: inline-block;width: 80%; border: 1px solid #ccc;padding: 0.2rem 0.4rem;font-size: 0.32rem;box-sizing: border-box;margin-bottom: 0.4rem;outline: none;}
.form input[type=button]{font-size: 0.32rem; letter-spacing: 1px;color: #333;}


@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.rotate {
	-webkit-transform: rotate(360deg);
	animation: rotation 3s linear infinite;
	-moz-animation: rotation 3s linear infinite;
	-webkit-animation: rotation 3s linear infinite;
	-o-animation: rotation 3s linear infinite;
}


@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.rotate {
	-webkit-transform: rotate(360deg);
	animation: rotation 3s linear infinite;
	-moz-animation: rotation 3s linear infinite;
	-webkit-animation: rotation 3s linear infinite;
	-o-animation: rotation 3s linear infinite;
}

@-webkit-keyframes bgbigLittle {
	0% {
		-webkit-transform: scale(2);
		-ms-transform: scale(2);
		transform: scale(2)
	}

	100% {
		/* visibility: hidden; */
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes bgbigLittle {
	0% {
		-webkit-transform: scale(2);
		-ms-transform: scale(2);
		transform: scale(2)
	}

	100% {
		/* visibility: hidden; */
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1)
	}
}

.bgbigLittle {
	-webkit-animation-name: bgbigLittle;
	animation-name: bgbigLittle
}

@-webkit-keyframes textmytrf {
	0% {
		visibility: hidden;
		-webkit-transform: rotateX(90deg);;
		-ms-transform: rotateX(90deg);;
		transform: rotateX(90deg);
	}
	100% {
		/* visibility: hidden; */
		-webkit-transform:rotateX(0deg);;
		-ms-transform:rotateX(0deg);;
		transform:rotateX(0deg);
	}
}

@keyframes textmytrf {
	0% {
		visibility: hidden;
		-webkit-transform: rotateX(90deg);;
		-ms-transform: rotateX(90deg);;
		transform: rotateX(90deg);
	}

	100% {
		
		-webkit-transform:rotateX(0deg);;
		-ms-transform:rotateX(0deg);;
		transform:rotateX(0deg);
	}
}

.textmytrf {
	-webkit-animation-name: textmytrf;
	animation-name: textmytrf
}