* {
	margin: 0;
	padding: 0;
}

html, body, #app {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #000;
}

ul, ol, li {
	list-style-type: none;
}

@font-face {
	font-family: myFont;
	src: url("../font/Quantico-Regular.ttf");
}

@font-face {
	font-family: myHeaderFont;
	src: url("../font/AvenirNextLTPro-Bold.otf");
}
@font-face {
	font-family: mycountFont;
	src: url("../font/edundot.ttf");
}
#app {
	color: #fff;
	font-size: 16px;
	overflow-y: auto;
}

.main {
	font-family: myFont;
	background: #000;
}

.header-wrapper {
	position: relative;
	width: 100%;
}

.header-wrapper .header-banner-video {
	position: relative;
	z-index: 1;
	width: 100%;
	opacity: .5;
}

.video-js {
	width: 100% !important;
	height: 100%;
}

.header-wrapper .header-banner-video::before {
	content: "";
	position: absolute;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 50%;
	background: linear-gradient(to top, #000 0.1%, rgba(0, 0, 0, 0));
}

.header-wrapper .header-banner-video video {
	position: relative;
	z-index: 1;
	width: 100%;
}

.header-wrapper .header-logo {
	position: absolute;
	top: 4%;
	left: 3.375em;
	z-index: 2;
	width: 320px;
}

.header-wrapper .header-1024-wrapper {
	position: absolute;
	left: 0;
	top: 38%;
	z-index: 2;
	width: 100%;
	font-size: 3em;
	font-family: myHeaderFont;
	overflow: hidden;
	text-align: center;
}

.header-input-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-input-wrapper .header-input-box .header-input-item input {
	vertical-align: middle;
	padding: 0 1.25em;
	height: 4em;
	width: 17.8125em;
	color: #fff;
	font-family: myFont;
	text-align: center;
	background: url("../img/header/input-bg.png") no-repeat left top;
	background-size: 100% 100%;
	border: none;
	outline: none;
}

.header-input-wrapper .header-input-box .header-input-item img {
	vertical-align: middle;
	width: 32px;
	margin-right: 0.75em;
}

.mint-btn {
	width: 200px;
	/* margin-left: 0.75em; */
}

.header-wrapper .header-1024 {
	width: 47.5em;
	height: 1.75em;
}

.header-wrapper .header-input {
	padding: 0.75em 3.125em;
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 6;
	margin-left: -16.28em;
	width: 26.25em;
	height: 7.4375em;
	color: #fff;
	font-size: 1.75em;
	text-align: center;
	font-family: myFont;
	background: url("../img/header/btn-bg.png") no-repeat;
	background-size: 100% 100%;
	border: none;
}

.there-wrapper {
	position: absolute;
	top: 50%;
	left: 3.375em;
	z-index: 4;
	height: 162px;
	font-size: 1.125em;
	line-height: 1.875em;
	transition: all 2s;
	/* overflow: hidden; */
}

.there-wrapper img {
	width: 25.625em;
}

.there-wrapper span {
	color: #fff100;
	font-size: 1.2em;
}

.kepler-text-wrapper span, .something-wrapper span, .each-wrapper span, .need-wrapper span {
	color: #fff100;
	font-size: 1.3em;
}

.kepler-text-wrapper, .something-wrapper, .each-wrapper, .need-wrapper, .due-wrapper {
	margin: 0 7.5em;
	font-size: 1.32em;
	line-height: 1.8em;
}

.need-wrapper {
	position: relative;
	padding-top: 7.5em;
	background: url("../img/line4.png") no-repeat top right;
	background-size: 22em;
}

.due-wrapper {
	position: relative;
	padding-bottom: 5em;
	background: url("../img/x-bg.png") no-repeat bottom right;
	background-size: 16.25em;
}

.due-wrapper img {
	display: block;
	width: 40%;
	margin-top: 2.625em;
}

.kepler-text-wrapper p:first-child, .something-wrapper p:first-child {
	font-size: 1.4em;
}

.more-btn-wrapper {
	margin-top: 3.125em;
	text-align: center;
}

.more-btn-wrapper img {
	width: 12.125em;
	height: 2.4375em;
}

.something-wrapper {
	padding-bottom: 5em;
	background: url("../img/line2.png") no-repeat bottom right;
	background-size: 36.25em;
}

.something-wrapper, .each-wrapper, .need-wrapper {
	margin-top: 2.8em;
}

.carousel2-wrapper2 {
	margin-top: 1.875em;
}

.broadcast-x-btn {
	position: relative;
	top: 5em;
	z-index: 99;
	text-align: center;
}

.broadcast-x-btn img {
	width: 27.3125em;
	height: 7.5em;
}

.video-x-btn {
	margin: 3.125em 0;
	text-align: center;
}

.video-x-btn img {
	width: 27.3125em;
	height: 7.5em;
}

.carousel1-wrapper img {
	width: 100%;
}

.carousel2-wrapper {
	position: relative;
	left: 50%;
	margin-left: -34.75em;
	max-width: 69.875em;
}

.carousel2-wrapper .el-carousel__arrow, .star-box .el-carousel__arrow {
	display: block !important;
	background: none;
}

.carousel2-wrapper .el-carousel__arrow .el-icon, .star-box .el-carousel__arrow .el-icon {
	display: none;
}

.carousel2-wrapper .el-carousel__arrow.el-carousel__arrow--right::before, .star-box .el-carousel__arrow.el-carousel__arrow--right::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 2.25em;
	height: 2.25em;
	background: url("../img/right-btn1.png") no-repeat;
	background-size: 1.8125em 2.25em;
}

.carousel2-wrapper .el-carousel__arrow.el-carousel__arrow--left::before, .star-box .el-carousel__arrow.el-carousel__arrow--left::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 2.25em;
	height: 2.25em;
	background: url("../img/left-btn1.png") no-repeat;
	background-size: 1.8125em 2.25em;
}

.star-wrapper {
	padding-bottom: 2.8125em;
	position: relative;
	width: 100%;
	height: 44.375em;
	background: url("../img/star/bg.png") no-repeat bottom left;
	background-size: 100%;
}

.star-box {
	position: relative;
	left: 50%;
	margin-left: -25em;
	width: 50em;
	height: 100%;
}

.star-box .el-carousel__arrow {
	top: 35%;
}

.star-box .el-carousel__item img:first-child {
	position: relative;
	z-index: 1;
	left: 2%;
}

.star-box .el-carousel__item .star-gif-img {
	position: absolute;
	bottom: 5%;
	left: 0;
	z-index: 99;
	width: 15%;
}

.dirigible-wrapper {
	margin-top: 2em;
	position: relative;
	left: 50%;
	margin-left: -43.75em;
	width: 87.5em;
}

.dirigible-wrapper .el-carousel__arrow {
	display: block !important;
	background: none;
}

.dirigible-wrapper .el-carousel__arrow .el-icon {
	display: none;
}

.dirigible-wrapper .el-carousel__arrow.el-carousel__arrow--right::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 2.25em;
	height: 2.25em;
	background: url("../img/right-btn2.png") no-repeat;
	background-size: 1.8125em 2.25em;
}

.dirigible-wrapper .el-carousel__arrow.el-carousel__arrow--left::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 2.25em;
	height: 2.25em;
	background: url("../img/left-btn2.png") no-repeat;
	background-size: 1.8125em 2.25em;
}

.carousel2-wrapper2 {
	width: calc(100% - 11.25em);
    margin-top: 3.125em;
}

.carousel2-wrapper2 .swiper-slide {
    width: 36.15%;
	text-align: center;
}

.carousel2-wrapper2 .swiper-slide img {
	width: 95%;
}

.current-role-wrapper-title {
	margin-top: 1.5em;
	font-size: 2em;
	text-align: center;
}

.current-role-wrapper {
	width: calc(100% - 11.875em);
	margin: 1.5em auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.current-role-wrapper div {
	position: relative;
	width: 50%;
}

.current-role-wrapper div img {
	width: 100%;
}

.current-role-git-wrapper {}

.current-role-git-wrapper .current-role-git-box {
	position: relative;
	left: 4.375em;
	width: calc(100% - 8.75em);
	margin: 3.125em auto;
}

.current-role-git-wrapper .current-role-git-box > img {
	width: 73%;
}



.current-role-git-wrapper .current-role-git-box .current-role-git {
	position: absolute;
	top: 0;
	right: 0;
	width: 30%;
	height: 100%;
	overflow: hidden;
	border-radius: 0.75em;
	/* background-color: #949494; */
}

.current-role-git-wrapper .current-role-git-box .current-role-git img {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 6;
	width: 100%;
}

.current-role-git-wrapper .current-role-git-box .current-role-git .current-role-git-img {
	z-index: 2;
	height: 100%;
}

.available-wrapper {
	position: relative;
}

.available-wrapper .available-ips-btn {
	position: relative;
	text-align: center;
}

.available-wrapper .available-ips-btn img {
	width: 27.3125em;
	height: 7.5em;
}

.available-wrapper .card-tab-wrapper {
	padding-bottom: 8.75em;
	margin: 1.25em auto;
	width: calc(100% - 16.5em);
	text-align: right;
}

.swiper-nft1-wrapper .swiper-slide, .swiper-nft2-wrapper .swiper-slide {
	width: 15%;
	display: inline-block;
	text-align: right;
}

.swiper-nft1-wrapper .swiper-slide img, .swiper-nft2-wrapper .swiper-slide img {
	width: 100%;
	display: block;
}

.swiper-nft1-wrapper, .swiper-nft2-wrapper {
	position: relative;
}

.swiper-nft2-wrapper {
	margin-top: 2.25em;
}

.carousel2-wrapper2 .swiper-carousel2-prev {
	display: none;
	position: absolute;
	top: 50%;
	left: 20%;
	z-index: 999;
	margin-top: -1em;
	width: 2em;
}

.carousel2-wrapper2 .swiper-carousel2-next {
	display: none;
	position: absolute;
	top: 50%;
	right: 20%;
	z-index: 999;
	margin-top: -1em;
	width: 2em;
}

.carousel2-wrapper2 .swiper-carousel2-prev img,
.carousel2-wrapper2 .swiper-carousel2-next img {
	width: 100%;
}

.footer-wrapper {
	position: relative;
	padding-top: 7.5em;
	text-align: center;
	width: 100%;
	background: #000;
	overflow: hidden;
}

.footer-wrapper .footer-x-bg-left, .footer-wrapper .footer-x-bg-right {
	position: absolute;
	top: 0;
	z-index: 1;
	height: calc(37.625em - 8.125em);
}

.footer-wrapper .footer-x-bg-left {
	left: -12.5em;
}

.footer-wrapper .footer-x-bg-right {
	right: -12.5em;
}

.footer-wrapper .dont-txt {
	font-size: 2.5em;
}

.footer-wrapper .dont-input-wrapper {
	margin-top: 3.125em;
}

.footer-wrapper .dont-input-wrapper input {
	vertical-align: middle;
	padding: 0 2.5em;
	width: 30em;
	height: 5.375em;
	color: #fff;
	background: url("../img/header/input-bg.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	outline: none;
}

.footer-wrapper .dont-input-wrapper button {
	margin-left: 2.5em;
	vertical-align: middle;
	width: 12.8125em;
	height: 4em;
	background: url("../img/footer/btn.png") no-repeat;
	background-size: 100% 100%;
	border: none;
	outline: none;
}

.footer-wrapper .footer-icon-wrapper {
	margin-top: 7.5em;
}

.footer-wrapper .footer-icon-wrapper a {
	display: inline-block;
	margin-left: 1.5em;
}

.footer-wrapper .footer-icon-wrapper a:first-child {
	margin: 0;
}

.footer-wrapper .copyright-wrapper {
	margin-top: 3.125em;
	padding: 0.75em 0;
	font-family: Arial, Helvetica, sans-serif;
	border-top: 1px solid #fff;
}

.welcome-wrapper {
	margin-top: 1.5em;
	width: 39.125em;
	position: relative;
	left: 50%;
	margin-left: -19.5625em;
	overflow: hidden;
}

.txt {
	color: rgb(255, 255, 255);
	text-transform: uppercase;
	font-size: 2.625em;
	/* background-color: rgb(0, 0, 0); */
	user-select: none;
	width: 100%;
}

.txt::before {
	content: "欢迎进入 X star，我们即将发射";
	position: absolute;
	filter: blur(1px);
	mix-blend-mode: difference;
}

.txt2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgb(255, 0, 212),
		rgb(0, 119, 255),
		rgb(255, 187, 0),
		rgb(1, 255, 77)
	);
	mix-blend-mode: multiply;
}

.txt3 {
	position: absolute;
	top: -100%;
	left: -100%;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle, white, black 30%);
	background-size: 25% 25%;
	mix-blend-mode: color-dodge;
	animation: shine 2s linear infinite;
}

@keyframes shine {
	100% {
		transform: translate(25%, 25%);
	}
}

.typed-cursor {
	display: none;
}

#typedOutput1 {
	min-height: 14.5em;
	transition: all 1s;
}

#typedOutput2 {
	min-height: 9em;
}

#typedOutput3, #typedOutput4, #typedOutput5 {
	height: 12.1875em;
}

#typedOutput6 {
	min-height: 9em;
}

.continued-wrapper {
	position: relative;
	width: 100%;
}

.continued-wrapper::before {
	content: "";
	position: absolute;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, #000, rgba(255, 255, 255, 0), #000);
}

.continued-wrapper img {
	position: relative;
	z-index: 1;
	width: 100%;
	opacity: .8;
}

.continued-wrapper .continued-txt {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	font-size: 4.5em;
}

.bgm-wrapper {
	position: absolute;
	top: 4%;
	right: 3.375em;
	z-index: 99;
	width: 32px;
	height: 25px;
}

.bgm-wrapper.bgm-off {
	background: url("../img/music-off.png") no-repeat top left;
	background-size: 100% 100%;
}

.bgm-wrapper.bgm-on {
	background: url("../img/music-on.png") no-repeat top left;
	background-size: 100% 100%;
}

.bgm-wrapper audio {
	opacity: 0;
}

.app-bottom-img {
	display: none;
}
.mint-btn{
	width: 20.3125em;
}
.mint-btn-count{
	width: 5em;
	margin-right: 0.75em;
}
.header-input-box-count{
	font-size: 3em;
	color: #fff;
	font-family: mycountFont ;
}