.banner{position:relative;top:0;left:0;right:0;width:100%;list-style:none;padding:0;z-index:1;background:#181C29;background: linear-gradient(180deg, #151E36 6%,#222828 94%);overflow:hidden;}
.banner-main{position:relative;box-sizing:content-box;z-index:10;width:100%;text-align:center;color: #fff;overflow: hidden;}
.banner-content h1{font-weight:500;text-shadow: #333 0.1rem 0 0.3rem;}.banner-content p{text-shadow: #111 0.1rem 0 0.3rem;text-wrap: balance;}
.star{position:absolute;z-index:4;top: 0; left: 0; width: 100%; height: 100%; z-index:4;} .star>span{position: absolute;top:-10px; display:inline-block;}.star>span:nth-child(5n){ width:2px; height: 2px; border-radius: 2px; background:#ddd;animation:shine 1s linear 1s infinite;}.star>span:nth-child(5n+1){ width:4px; height: 4px; border-radius: 4px; background:#fff;animation:shine 1s linear 2s infinite;}.star>span:nth-child(5n+2){ width:2px; height: 2px; border-radius: 2px; background:#fff;animation:shine 1s linear 3s infinite;}.star>span:nth-child(5n+3){ width:4px; height: 4px; border-radius: 4px; background:#fff;animation:shine 1s linear 1.5s infinite;}.star>span:nth-child(5n+4){ width:1px; height: 1px; border-radius: 2px; background:#fff;animation:shine 1s linear 2.5s infinite;} .star>span:nth-child(1){top:30%; left: 80%;}.star>span:nth-child(2){top: 30%; left: 20%;}.star>span:nth-child(3){top: 50%; left: 40%;}.star>span:nth-child(4){top: 70%; left: 50%;} .star>span:nth-child(5){top: 60%; left: 10%;}.star>span:nth-child(6){top:21%; left:45%;}.star>span:nth-child(7){top: 40%; left: 30%;}.star>span:nth-child(8){top: 70%; left: 20%;} .star>span:nth-child(9){top: 20%; left: 40%;}.star>span:nth-child(10){top: 40%; left: 70%;}.star>span:nth-child(11){top: 60%; left: 60%;}.star>span:nth-child(12){top: 20%; left: 40%;}.star>span:nth-child(13){top: 50%; left: 95%;}.star>span:nth-child(14){top: 70%; left: 20%;}.star>span:nth-child(15){top: 20%; left: 40%;}.star>span:nth-child(16){top: 65%; left: 15%;} .star>span:nth-child(17){top: 35%; left: 55%;}.star>span:nth-child(18){top: 75%; left: 65%;}.star>span:nth-child(19){top: 25%; left: 25%;}.star>span:nth-child(20){top: 45%; left: 90%;}.star>span:nth-child(21){top: 25%; left: 75%;}.star>span:nth-child(22){top: 75%; left: 75%;}.star>span:nth-child(23){top: 45%; left: 65%;}
.planet span{position:absolute;z-index:4;top:0;left:0; width:100%;height:100%;z-index:5;background-repeat:no-repeat;}
.planet span:nth-child(1){background-image:url(index/slide/astronaut.svg);}.planet span:nth-child(2){background-image:url(index/slide/mars.svg);}.planet span:nth-child(3){background-image:url(index/slide/saturn.svg);}
@media only screen and (min-width:768px){.planet span:nth-child(1){background-position:0 200px;background-size:12%;}.planet span:nth-child(2){background-position:center 88px;background-size:60%;}.planet span:nth-child(3){background-position:96% 118px;background-size:8%;}}
@media only screen and (max-width:768px){.planet span:nth-child(1){background-position:-8px 199px;background-size:26%;}.planet span:nth-child(2){background-position:138% 168px;background-size:84%;}.planet span:nth-child(3){background-position:96% 68px;background-size:16%;}}
@media only screen and (min-width:768px){
.banner-main{height:36.8rem;}
.banner-content{margin:0 auto;width:120rem;position:relative;top:0;z-index:99;}
.banner-content h1{padding:10rem 0 1.6rem;font-size:6.8rem;letter-spacing:0.1rem;}
.banner-content p{margin:0 auto;padding:0 0 3.8rem;max-width:68%;font-size:2.8rem;letter-spacing:0.1rem;line-height:5.3rem;}
 }
@media only screen and (max-width:768px){
.banner-main{height:28rem;}
.banner-content{position:absolute;top:0;left:0;z-index:99;width:100%;}
.banner-content h1{padding:7.5rem 0 1rem;font-size:4.2rem;}
.banner-content p{margin:0 auto;padding:0 0 1.2rem;max-width:86%;font-size:2rem;line-height:3.6rem;overflow:hidden;}
}