* {  padding: 0;  margin: 0;  user-select: none;}
	body {
	  font-family: "Microsoft Yahei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
	  background-image: url("../img/bg.jpg");
	  background-repeat: no-repeat;
	  position: relative;
	  width: 750px;
	  padding-left: calc((100% - 750px) / 2);
	  padding-right: calc((100% - 750px) / 2);
	  height: 100vh;
	  min-height: 900px!important;
	  font-size: 1rem;
	  background-size: 100% 100% !important;
	  scrollbar-width: none;
	  /* Firefox */
	  -ms-overflow-style: none;
	  /* IE 10+ */
	}
	body::-webkit-scrollbar { display: none;  /* Chrome Safari */}
	
	/* #mx{ position: relative; width: 750px; height: 100%; margin: 0 auto;} */
	body::after{ content: ""; position: absolute; top: 160px; left: calc((100% - 420px) / 2); width: 420px; height: 256px; background: url(../img/text.png) center top no-repeat; background-size: 100% auto; z-index: -1;}
	
	
	#fx{ position: absolute; bottom: 50px; right: calc(50% - 500px);}
	#fx a, #copyBtn{ display: block; width: 50px; height: 50px; line-height:50px; border-radius: 50%; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin-bottom: 12px; background: rgba(255, 255, 255, 0.1); border: 3px solid rgba(255, 255, 255, 0.02);transition: all 0.36s ease;}
	#fx a:hover, #copyBtn:hover{ color: #f9b981; background: rgba(255, 255, 255, 0.1); border: 3px solid rgba(255, 255, 255, 0.1);}
	
	
	header { position: absolute; top: 20px; right: 0; left: 0; text-align: center;}
	header img { width: 30rem; margin: 0 auto;}
	header .logo {width: 34rem;  margin: 0 auto;}
	
	.pimg { position: relative; height: 50%; text-align: center; display: flex; justify-content: center; align-items: flex-end; background: url(../img/light.png) bottom center no-repeat;  background-size: 100% auto; z-index: 300;}
	.pimg img { width: 22rem; margin-bottom: 16px;}
	
	.title {
	  text-align: center;
	  background-image: url("../img/title-bg.png");
	  width: 37.5rem;
	  height:2.6rem;
	  line-height: 2;
	  background-size: 100% 100% !important;
	  margin: 0 auto;
	  font-size: 1.2rem;
	  font-weight: 900;
	  color: #311f2f;
	}
	.title-xs{ font-size: 1rem !important; line-height: 1.2; padding-top: 3px;}
	
	.title-text { text-align: center; margin-top:10px; font-size: 1.2rem; color: #472759; font-weight: 700; text-shadow: -1px 1px 1px #fec068, 1px 1px 1px #fec068, 1px -1px 1px #fec068, -1px -1px 1px #fec068;}
	
	footer { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center;align-items: flex-end; z-index: 30;}
	footer img { width: 6rem;}
	footer::after { content: ""; position: absolute; right: 0; bottom: 10px; width:calc((100% - 10rem) / 2 ); height: 1px; background: rgba(218, 157, 103, 0.2);}
	footer::before { content: ""; position: absolute; left: 0; bottom: 10px; width:calc((100% - 10rem) / 2 ); height: 1px; background: rgba(218, 157, 103, 0.2);}
	
	main { position: absolute; right: 0; bottom: 0; left: calc((100% - 750px) / 2);width: 750px; height: 400px;text-align: center; z-index: 20;}
	main .box { position: absolute; width: 20rem; bottom: 10px; left: calc((100% - 20rem) / 2 ); }
	main .guang { position: absolute; top:-54px; left: calc((100% - 26rem) / 2 ); width: 26rem; margin-left: -8px;}
	
	main .boxtop{position: absolute;left: calc((100% - 65px) / 2); top: 57px; transform-style: preserve-3d;transform: rotateX(-13deg) rotateY(-44deg);}
	main .top { width: 220px; height: 220px; background: #5d3c52; transform-origin: bottom; animation: boxTop 20s infinite both, boxSide 8s infinite both; animation-delay:2s; animation-iteration-count:1;}
	
	@keyframes boxSide {
	  from, 9.0909090909% {
	    opacity: 1;
	  }
	  16.6666666667%, to {
	    opacity: 0;
	  }
	}
	@keyframes boxTop {
	  from, 1.5151515152% {
	    transform: rotateX(90deg) translateZ(80px) translateY(0) rotateX(0deg) translateY(220px);
	  }
	  9.0909090909%, to {
	    transform: rotateX(90deg) translateZ(80px) translateY(-18px) rotateX(223deg) translateY(220px);
	  }
	}
	
	
	#box { position: relative;  text-align: center; z-index: 50;}
	main .logo2 {
	  width: 50px;
	  left: calc((100% - 50px) / 2);
	  top: 170px;
	  z-index: 999;
	  position: absolute;
	  animation: re 0.8s infinite;
	  animation-iteration-count:1;
	  
	}
	
	@keyframes re {
	  10% {
	    transform: rotateY(360deg);
	  }
	}
	
	@keyframes reTop {
	  100% {
	    transform: rotateY(360deg) translateY(-10px);
	    opacity: 0;
	  }
	}
	
	
	
	.alert {
	  border: 1px solid rgba(249, 185, 129, 1) !important;
	  color: #f9b981;
	  display: inline;
	  padding: 4px 20px;
	  background: rgba(70, 44, 68, 1) !important;
	  border-radius: 6px;
	  position: absolute;
	  top: 180px;
	  animation: alert 5s forwards;
	}
	
	.bar {
	  width: 3px;
	  height: 3px;
	  border-radius: 50%;
	  position: absolute;
	  top: 200px;
	  background-color: rgba(249, 185, 129, 0.6);
	  animation: bar 2s forwards;
	}
	
	@keyframes bar {
	  100% {
	    top: 0px;
	    opacity: 0;
	  }
	}
	
	@keyframes alert {
	  100% {
	    top: 50px;
	    opacity: 0;
	  }
	}