html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	/* vertical-align: baseline; */
	background: transparent;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}
video {
	width: 100%;
	height: 100%;
}
img{
	width: 100%;
}
html,body{
	height: 100%;
	overflow: hidden;
}
.iconZ{
	width: 16.7%;
	position: absolute;
	bottom: 0%;
	left: 43%;
	animation: an1 0.6s linear alternate infinite;
}
@media screen and (orientation: portrait) {
    html{
        width : 100vmin;
        height : 100vmax;
    }
    body{
        width : 100vmin;
        height : 100vmax;
    }
    #app{
        width : 100vmax;
        height : 100vmin;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    }
	
	html {
		font-size: calc(100vw / 750);
	
	}

  }

.page{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	transform: 2s all;
	background-color: #504d3e;
	overflow: hidden;
}
.page1{
	display: flex;
	justify-content: center;
	align-items: center;
}
.page1>div{
	width: 82.4%;
	font-size: 42rem;
	line-height: 162%;
	
	color: #ffeab8;
	text-indent: 2em;
	/* background: -webkit-linear-gradient(left ,red,orange,blue,green); */
	background-image: url(../img/backG.jpg);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	font-weight: bold;
}
.page1>div span{

	
	color: #ffeab8;
	text-indent: 2em;
	/* background: -webkit-linear-gradient(left ,red,orange,blue,green); */
	background-image: url(../img/backG.jpg);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(0, 0, 0, 0);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	font-weight: bold;
}
#app{
	overflow: hidden;
}
.textBox>span {
	opacity: 0;
	/* transition:3s all; */
}
.page2{
	
}
.page2>img:nth-child(1){
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
.icon2{
	width: 39.5%;
	position: absolute;
	top: 8%;
	left: 43%;
}
.page2Text{
	position: absolute;
	top: 10%;
	left: 6%;
	width: 88%;
	height: 61%;
	/* border: 1px solid black; */
	
	font-size: 30rem;
	text-indent: 1em;
	line-height: 80%;
	overflow: auto;
	pointer-events: none;
}
.icon1{
	width: 16.7%;
	position: absolute;
	bottom: 0%;
	left: 43%;
	animation: an1 0.6s linear alternate infinite;
}

@keyframes an1 {
	0% {
		transform: scale(0.95);
	}

	100% {
		transform: scale(1);
	}
}
.page3>div:nth-child(1){
	position: absolute;
	top: 8%;
	left: 0%;
	width: 100%;
}
.page3Box{
	position: absolute;
	width: 100%;
	top: 54%;
	display: flex;
	justify-content: center;
	transform: translateY(-50%);
	align-items: center;
}
.page3Box>div:nth-child(1){
	text-align: center;
	margin: 0 7%;
}
.page3Box>div:nth-child(2){
	margin: 0 7%;
}
.page3Person{
	width: 34%;
	text-align: center;
	margin: auto;
}
.page3Text{
	width: 49%;
	margin: auto;
	margin-top: 4%;
}
.page3Icon{
		width: 16.7%;
		position: absolute;
		bottom: 0%;
		left: 43%;
		animation: an1 0.6s linear alternate infinite;
}
.page3Click1{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 10%;
	height: 10%;
}
.page3Click1{
	
}

.page4Icon{
		width: 16.7%;
		position: absolute;
		bottom: 0%;
		left: 43%;
		animation: an1 0.6s linear alternate infinite;
}


.page4{
	
}
.page4>div:nth-child(1){
	
position: absolute;
	
top: 8%;
	
left: 0%;
	
width: 100%;
}
.page4Box{
	position: absolute;
	width: 100%;
	top: 54%;
	display: flex;
	justify-content: space-evenly;
	transform: translateY(-50%);
}
.page4Box>div:nth-child(1){
	width: 33%;
	text-align: center;
}
.page4Box>div:nth-child(2){
	width: 20%;
	/* margin: 0 118rem; */
}
.page4Box>div:nth-child(3){
	width: 20%;
	text-align: center;
}
.page4Video{
	height: 23vh;
	/* border: 1px solid red; */
}
.page4Text1{
	width: 53%;
	padding-top: 20px;
	/* border: 1px solid red; */
}
.page4Text2{
	padding-top: 20px;
	/* border: 1px solid red; */
}
.page4Text3{
	width: 85%;
	padding-top: 20px;
	/* border: 1px solid red; */
}

.page5{
	
}
.page5>div:nth-child(1){
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
.page5>div:nth-child(2){
	position: absolute;
	top: 8%;
	left: 3%;
	width: 38%;
	/* height: 100%; */
}
.page5Text{
	position: absolute;
	/* border: 1px solid black; */
	top: 12%;
	left: 7%;
	width: 86%;
	height: 59%;
	font-size: 42rem;
	line-height: 144%;
	overflow: auto;
}
.span1 {
	width: 2em;
	display: inline-block;
}
.boxSpan{
}




.page6Icon{
		width: 16.7%;
		position: absolute;
		bottom: 0%;
		left: 43%;
		animation: an1 0.6s linear alternate infinite;
}


.page6{
	
}
.page6>div:nth-child(1){
	
position: absolute;
	
top: 8%;
	
left: 0%;
	
width: 100%;
}
.page6Box{
	position: absolute;
	width: 100%;
	top: 54%;
	display: flex;
	justify-content: center;
	transform: translateY(-50%);
}
.page6Box>div{
	width: 30%;
	text-align: center;
}
.page6Box>div:nth-child(1){
	text-align: center;
}
.page6Box>div:nth-child(2){
	margin: 0 3%;
}
.page6Box>div:nth-child(3){
	text-align: center;
}
.page6Video{
	/* height: 258rem; */
}
.page6Text1{
	width: 54%;
	padding-top: 10%;
}
.page6Text2{
	padding-top: 10%;
	width: 57%;
}
.page6Text3{
	width: 58%;
	padding-top: 10%;
}
.page7>div:nth-child(1){
	
position: relative;
}
.page7Click{
	position: absolute;
	/* border: 1px solid white; */
}
.page7Click1{
	top: 30%;
	left: 16%;
	width: 30%;
	height: 12%;
}
.page7Click2{
	top: 45%;
	left: 16%;
	width: 33%;
	height: 21%;
}
.page7Click3{
	top: 69%;
	left: 22%;
	width: 9%;
	height: 24%;
}


.page8Icon{
		width: 16.7%;
		position: absolute;
		bottom: 0%;
		left: 43%;
		animation: an1 0.6s linear alternate infinite;
}


.page8{
	
}
.page8>div:nth-child(1){
	
position: absolute;
	
top: 8%;
	
left: 0%;
	
width: 100%;
}
.page8Box{
	position: absolute;
	width: 100%;
	top: 54%;
	display: flex;
	justify-content: center;
	transform: translateY(-50%);
}
.page8Box>div{
	width: 30%;
	text-align: center;
}
.page8Box>div:nth-child(1){
	text-align: center;
}
.page8Box>div:nth-child(2){
	margin: 0 3%;
}
.page8Box>div:nth-child(3){
	text-align: center;
}
.page8Video{
	/* height: 258rem; */
}
.page8Text1{
	width: 50%;
	padding-top: 10%;
}
.page8Text2{
	padding-top: 10%;
	width: 50%;
}
.page8Text3{
	width: 50%;
	padding-top: 10%;
}
.page9{
	background-image: url(../img/back4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
/* 	display: flex;
	align-items: center; */
}
.page9>img{
	position: absolute;
	top: 50%;
	left: 0%;
	width: 100%;
	transform: translateY(-50%);
}
.video{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 111;
	object-fit: cover;
	background-color: #504d3e;
}
.video2{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 111;
	object-fit: cover;
	background-color: #504d3e;
}
.video3{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 111;
	object-fit: cover;
	background-color: #504d3e;
}
.page10{
	
}
.page10Box{
	position: relative;
}
.page10Click1{
	/* border: 1px solid white; */
	position: absolute;
	top: 40%;
	left: 21%;
	width: 20%;
	height: 20%;
}
.page10Click2{
	/* border: 1px solid white; */
	position: absolute;
	top: 66%;
	left: 24%;
	width: 20%;
	height: 20%;
}

.ani_rot_ {
	animation: rot_ 1s linear infinite;
	-webkit-animation: rot_ 1s linear infinite;
}

@keyframes rot_ {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rot_ {
	0% {
		-webkit-transform: rotate(0);
	}

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

.loading .load_box {
	position: absolute;
	width: 95%;
}

.loading .progress_box {
	width: 80%;
	margin: 0 auto;
	position: relative;
	height: 4px;
	background: #d3d3d3;
	overflow: hidden;
}
.loading{
	z-index: 1111;
}
.loading .progress {
	height: 100%;
	width: 0%;
	overflow: hidden;
	background: #000;
}
.moderateCenter {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.month_card_text{
	position: absolute;
    font-size: 1rem;
    top: 37.8%;
    left: 14.1%;
    color: #84110e;
}
.loadingImg{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	transform: translate(-50%,-50%);
	z-index: 111;
}
.page0{
	background-image: url(../img/starbg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 11;
	/* display: flex; */
	/* justify-content: center; */
}
.page0>div{
	
position: absolute;
	
top: 40%;
	
left: 50%;
	
transform: translate(-50%,-50%);
	
width: 40%;
	
font-size: 0;
}
.page0 img{
	width: 20%;
	opacity: 0;
}
.page0 img:nth-child(5){
	animation: page0Img1 0.4s linear forwards;
}
.page0 img:nth-child(4){
	animation: page0Img2 0.4s 0.1s ease-in forwards;
}
.page0 img:nth-child(3){
	animation: page0Img3 0.4s 0.2s ease-in forwards;
}
.page0 img:nth-child(2){
	animation: page0Img4 0.4s 0.3s ease-in forwards;
}
.page0 img:nth-child(1){
	animation: page0Img5 0.4s 0.4s ease-in forwards;
}

@keyframes page0Img1 {
	0%{transform: scale(0.2) translateX(-20%);opacity: 0;}
	100%{transform: scale(1) translateX(0%);opacity: 1;}
}
@keyframes page0Img2 {
	0%{transform: scale(0.2) translateX(-20%);opacity: 0;}
	100%{transform: scale(1) translateX(0%);opacity: 1;}
}
@keyframes page0Img3 {
	0%{transform: scale(0.2) translateX(0%);opacity: 0;}
	100%{transform: scale(1) translateX(0%);opacity: 1;}
}
@keyframes page0Img4 {
	0%{transform: scale(0.2) translateX(20%);opacity: 0;}
	100%{transform: scale(1) translateX(0%);opacity: 1;}
}
@keyframes page0Img5 {
	0%{transform: scale(0.2) translateX(20%);opacity: 0;}
	100%{transform: scale(1) translateX(0%);opacity: 1;}
}
.page0Div{
	display: none;
}

@media screen and (orientation: landscape) {
	.music_img_box{
		
	}
	html {
		font-size: calc(100vh / 750);
	
	}
    html{
        width : 100vmax;
        height : 100vmin;
    }
    body{
        width : 100vmax;
        height : 100vmin;
    }
    #app{
        width : 100vmax;
        height : 100vmin;
    }

	.video{
        object-fit: revert;
    }
	.video2{
        object-fit: revert;
    }
	.video3{
        object-fit: revert;
    }
}