@CHARSET "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, fieldset, form, label, input, button, select, textarea, img, table, th, td, article, aside, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video, p{padding:0;margin:0;border: 0 none;color: rgba(255,255,255,1);line-height: 18px;font: 16px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;list-style:none;}
input, textarea, a{outline: none;resize: none;}
a{text-decoration: none;
  -moz-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -webkit-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -o-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -ms-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out，box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;}
.clr{clear: both;}
*{margin: 0; padding: 0;}
a{-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
video::-webkit-media-controls{display:none !important}
@font-face{font-family: zkcjh;src:url(../fonts/字魂143号-正酷超级黑.ttf);}
html, body{width: 2160px;height: 3840px;background: url(../images/bg.jpg) center center no-repeat;margin: auto;background-size: 100%;}

ul.constellation{width: 2160px;height: 3840px;position: relative;z-index: 1;margin: auto;}
ul.constellation li{position: absolute;}
ul.constellation li.Ari{width: 158px;height: 172px;left: 386px;top: 520px;}
ul.constellation li.Tau{width: 305px;height: 247px;left: 1014px;top: 230px;}
ul.constellation li.Gem{width: 242px;height: 223px;left: 1212px;top: 988px;}
ul.constellation li.Can{width: 219px;height: 240px;left: 1712px;top: 610px;}
ul.constellation li.Leo{width: 319px;height: 208px;left: 1454px;top: 1464px;}
ul.constellation li.Vir{width: 332px;height: 245px;left: 324px;top: 1096px;}
ul.constellation li.Lib{width: 183px;height: 232px;left: 832px;top: 1692px;} 
ul.constellation li.Sco{width: 329px;height: 182px;left: 1390px;top: 2100px;}
ul.constellation li.Sag{width: 309px;height: 321px;left: 310px;top: 2122px;}
ul.constellation li.Cap{width: 298px;height: 227px;left: 1110px;top: 2582px;}
ul.constellation li.Aqu{width: 358px;height: 267px;left: 418px;top: 3140px;}
ul.constellation li.Pis{width: 377px;height: 383px;left: 1298px;top: 3058px;}
ul.constellation li a{position: absolute;margin: auto;left: 0;right: 0;top: 0;bottom: 0;}
ul.constellation li a img{position: absolute;margin: auto;left: 0;right: 0;top: 0;bottom: 0;transform: scale(2);}

section{position: absolute;top: 0;left: 0;width: 2160px;height: 3840px;}
span{position: absolute;width: 48px;height: 48px;background: url(../images/icon_star.png);display: block;animation: animate  60s  linear  infinite;}
span::before{content: '';position: absolute;width: 200px;height: 2px;top: 22px;left: 24px;background: linear-gradient(90deg,#fff,transparent);}
span:nth-child(1){top:48px;right:120px;animation-delay: 0s;animation-duration: 22.3s;}
span:nth-child(2){top:2160px;right:48px;animation-delay: 0s;animation-duration: 15.1s;}
span:nth-child(3){top:1040px;right:240px;animation-delay: 0s;animation-duration: 14.6s;}
span:nth-child(4){top:2040px;right:720px;animation-delay: 0s;animation-duration: 20.7s;}
span:nth-child(5){top:720px;right:480px;left:initial;animation-delay: 0s;animation-duration: 11.2s;}
span:nth-child(6){top:120px;right:1200px;left:initial;animation-delay: 0s;animation-duration: 12.5s;}
span:nth-child(7){top:1800px;right:48px;left:initial;animation-delay: 0s;animation-duration: 17.8s;}
span:nth-child(8){top:48px;right:960px;left:initial;animation-delay: 0s;animation-duration: 16.4s;}
span:nth-child(9){top:1300px;right:1600px;left:initial;animation-delay: 0s;animation-duration: 7.9s;}
span:nth-child(10){top:1680px;right:1080px;left:initial;animation-delay: 0s;animation-duration: 14s;}

.vid{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 2160px;height: 3840px;}
.vid .explain{position: absolute;left: 84px;bottom: 76px;z-index: 10;}
.vid .explain a{display: block;width: 254px;height: 254px;}
.vid .explain a img{display: block;width: 100%;}
.vid .operate{position: absolute;right: 0;z-index: 10;width: 144px;height: 224px;top: 0;bottom: 0;margin: auto;}
.vid .operate a{display: block;width: 144px;height: 64px;}
.vid .operate a{padding: 24px 0;}
.vid .operate a img{width: 100%;}
.vid video{position: absolute;z-index: 9;left: 0;right: 0;margin: auto;width: 2160px;height: 3840px;}

.anm_img{position: absolute;z-index: 999;left: 0;top: 0;background: url(../images/bg.jpg) center center no-repeat;margin: auto;background-size: 100%;width: 2160px;height: 3840px;animation: al_n 1s linear 1;animation-delay: 4s;}
.anm_img ul{width: 2160px;height: 3840px;}
.anm_img ul li{float: left;animation: anm 5s linear 1;width: 720px;height: 960px;opacity: 0;}
.anm_img ul li img{width: 720px;height: 960px;}
.anm_img ul li:nth-of-type(1){animation-delay: 0.2s;}
.anm_img ul li:nth-of-type(2){animation-delay: 0.4s;}
.anm_img ul li:nth-of-type(3){animation-delay: 0.6s;}
.anm_img ul li:nth-of-type(4){animation-delay: 0.8s;}
.anm_img ul li:nth-of-type(5){animation-delay: 1.0s;}
.anm_img ul li:nth-of-type(6){animation-delay: 1.2s;}
.anm_img ul li:nth-of-type(7){animation-delay: 1.4s;}
.anm_img ul li:nth-of-type(8){animation-delay: 1.6s;}
.anm_img ul li:nth-of-type(9){animation-delay: 1.8s;}
.anm_img ul li:nth-of-type(10){animation-delay: 2.0s;}
.anm_img ul li:nth-of-type(11){animation-delay: 2.2s;}
.anm_img ul li:nth-of-type(12){animation-delay: 2.4s;}

@keyframes anm{
	0%{
		transform: scale(0.25);opacity: 0;}
	8%{
		transform: scale(1);opacity: 1;}
	100%{
		transform: scale(1);opacity: 1;}  }

@keyframes al_n{
	0%{
		opacity: 1;}
	100%{
		opacity: 0;}  }

@keyframes animate{
	0%{
		transform: rotate(315deg)  translateX(-200px);opacity: 1;}
	70%{
		opacity: 1;}
	100%{
		transform:rotate(315deg)   translateX(-2400px);
		opacity:0; }  }

@media screen and (max-width: 1920px){
	html, body{width: 1080px;height: 1920px;}
	ul.constellation{width: 1080px;height: 1920px;}
	ul.constellation li.Ari{left: 118px;top: 220px;}
	ul.constellation li.Tau{left: 432px;top: 75px;}
	ul.constellation li.Gem{left: 531px;top: 454px;}
	ul.constellation li.Can{left: 781px;top: 265px;}
	ul.constellation li.Leo{left: 652px;top: 692px;}
	ul.constellation li.Vir{left: 87px;top: 508px;}
	ul.constellation li.Lib{left: 341px;top: 806px;}
	ul.constellation li.Sco{left: 620px;top: 995px;}
	ul.constellation li.Sag{left: 80px;top: 1021px;}
	ul.constellation li.Cap{left: 480px;top: 1226px;}
	ul.constellation li.Aqu{left: 134px;top: 1480px;}
	ul.constellation li.Pis{left: 574px;top: 1454px;}
	ul.constellation li a img{transform: scale(1);}

	section{width: 1080px;height: 1920px;}
	span{width: 24px;height: 24px;}
	span::before{width: 100px;height: 1px;top: 11px;left: 12px;}
	span:nth-child(1){top:24px;right:60px;}
	span:nth-child(2){top:1080px;right:24px;}
	span:nth-child(3){top:520px;right:120px;}
	span:nth-child(4){top:1020px;right:360px;}
	span:nth-child(5){top:360px;right:240px;}
	span:nth-child(6){top:60px;right:600px;}
	span:nth-child(7){top:900px;right:24px;}
	span:nth-child(8){top:24px;right:480px;}
	span:nth-child(9){top:650px;right:800px;}
	span:nth-child(10){top:840px;right:540px;}

	.vid{width: 1080px;height: 1920px;}
	.vid .explain{left: 42px;bottom: 38px;}
	.vid .explain a{width: 127px;height: 127px;}
	.vid .operate{width: 72px;height: 112px;}
	.vid .operate a{width: 72px;height: 32px;}
	.vid .operate a{padding: 12px 0;}
	.vid video{width: 1080px;height: 1920px;}

	.anm_img{width: 1080px;height: 1920px;}
	.anm_img ul{width: 1080px;height: 1920px;}
	.anm_img ul li{width: 360px;height: 480px;}
	.anm_img ul li img{width: 360px;height: 480px;}

	@keyframes animate{
		0%{
			transform: rotate(315deg)  translateX(-100px);opacity: 1;}
		70%{
			opacity: 1;}
		100%{
			transform:rotate(315deg)   translateX(-1200px);
			opacity:0; }  }
}