html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #001942;
  margin: 0;
  padding: 0;
}
h1,h2,h3,h4,p{margin: 0;}
li{list-style: none;}
#app{width: 25rem;margin: 0 auto;height: 100vh;
background: url(../img/bg@2x.png) no-repeat;
  background-size: 100%;
  height: 100vh;
  background-repeat: no-repeat;}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  width: 25rem;
  
}
.index-content{display: flex;align-items: center;width: 100%;height: 100%;
margin-top: 6.233333rem;
flex-direction: column;}
.index-title{
	width: 20.8rem;
	height: 24rem;
	background: url(../img/img-1@2x.png) no-repeat;
	background-size:100% 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.index-title .logo{
	width: 2.666666rem;
}
.index-title h1{
	text-transform: uppercase;
	font-size: 2.4rem;
	color: #fff;
	line-height: 1;
	margin-top: 2rem;
}
.index-content p{
	font-size: 1.6rem;
	color: #ffff03;
	margin-top: 1.166666rem;
}
.index-title h2{
	text-transform: uppercase;
	font-size: 2rem;
	color: #fff;
	line-height: 1;
}
.pageBox{
	width: 100%;
	height: 100%;
}
.pageDown {
    position: fixed;
    left: 0;
    bottom: 0.2rem;
    width: 100%;
    z-index: 100;
}
.pageDown button {
    display: block;
    width: 2.133333rem;
    /* height: 2.4rem; */
    background-image: url(../img/arrow.png);
    background-size: 100% 100%;
    background-position: center center;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    margin: 0 auto;
    font-size: 0;
    padding: 0;
	animation: up-arrow 1.5s linear infinite both;;
}
@keyframes up-arrow{
	0%{opacity:0}50%{transform:translate3d(0,-0.5rem,0);opacity:1}
	to{transform:translate3d(0,-0.8rem,0);opacity:0}
}
.pageDown img {
    display: block;
    width: 100%;
    height: 100%;
    animation: myFirst 2s infinite;
}
.pageTitle{
	width: 12.5rem;
	height: 5.4rem;
	text-align: center;
	background: url(../img/title@2x.png) no-repeat;
	background-size: 100% 100%;
	margin: auto;
	overflow: hidden;
	margin-top: 3.333333rem;
	margin-bottom: 0.833333rem;
}
.pageTitle h3{
	font-size: 1.066666rem;
	color: #271c61;
	margin-top: 1.766666rem;
	text-transform: uppercase;
	font-weight: normal;
}
.pageContent{
	background: #fff;
	border-radius: 0.266666rem;
	width: 22.266666rem;
	margin: auto;
	padding: 0.833333rem;
	box-sizing: border-box;
	min-height: 32.466666rem;
}
.border{
	border:1px solid #d3d0dd;
	border-radius: 0.266666rem;
	min-height: 30.6rem;
}
.scene h4{
	font-size: 1.2rem;
	line-height: 1.6rem;
	font-weight: normal;
	margin-top: 1.866666rem;
	padding-left: 0.6rem;
}
.scene-list {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.8rem;
	margin-bottom: 3.333333rem;
}
.scene-list li{
	background: url(../img/icon-2@2x.png) no-repeat;
	background-size: 0.866666rem 1.066666rem;
	background-position: 0.333333rem center;
	padding-left: 1.666666rem;
	width: 50%;
	font-size: 0.933333rem;
	/* color: #001942; */
	box-sizing: border-box;
}
.scene img{
	width: 19.066666rem;
	margin-left: 0.6rem;
}
.funct{
	padding:1.1rem 0.233333rem ;
}
.funct img{
	width: 16.2rem;
	display: block;
	margin: 0 auto;
}
.funct h3{
	color: #323568;
	line-height: 1.2;
	font-weight: normal;
	margin-top: 0.666666rem;
}
.funct p{
	color: #323568;
	font-size: 0.8rem;
	line-height: 1.2rem;
}
.about {
	padding-top: 1.4rem;
}
.about img{
	width:17.033333rem;
	margin-left: -0.833333rem;
}
.about p{
	font-size: 0.8rem;
	color: #323568;
	line-height: 1rem;
	margin-bottom: 1.2rem;
}
.informat{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.informat p{
	font-size: 1.066666rem;
	line-height: 1;
	margin-top: 0.7rem;
	color: #fff;
}
.informat p a{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}
.informat img{
	width: 8.333333rem;
}

.audio-element button.playing{
	animation: playing 1.5s cubic-bezier(0, 0, 0.56, 0.63) infinite both;
}
.audio-element button{
	width: 2rem;
	height: 2rem;
	background: url(../img/music@2x.png) no-repeat;
	background-size: 100% 100%;
	border: none;
	outline: none;
	padding: 0;
	position: fixed;
	right: 1.4rem;
	top: 1.133333rem;
	z-index: 100;
}
@keyframes playing{
	0%{transform:rotate(0deg)}
	to{transform:rotate(1turn)}
}