html,body{
	width:100%;
  height:100%;
  overflow:hidden;
}

header,main,footer{
	display:none;
	z-index:1;
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}
header{display:block; background-position:50%; background-size:cover; opacity:1;}
.top{top:unset; bottom:0.5rem;}
.page{
	display:none;
	width:100%;
	height:100%;
	overflow:hidden;
	position:absolute;
	/*top:0;
	left:0;*/
}
.page .page-bg{
	z-index:-1;
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	background-size:cover;
}
.page .page-bg video{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.page .page-con{
	position:absolute;
  top:-1.5rem;
  left:-2.56rem;
  width: 24rem;
  aspect-ratio: 2643/1516;
  background-image:url('../images/c_01_bg.png');
  background-repeat: no-repeat;
  background-position: 50%;
	background-size:100% 100%;
}
/* .page-m 切页进入动画：45° 斜向 */
#pageContain[data-dir="next"] .page.slide .page-con{
	animation:pageMInNext .8s ease-out both;
}
#pageContain[data-dir="prev"] .page.slide .page-con{
	animation:pageMInPrev .8s ease-out both;
}
@keyframes pageMInNext{
	from{transform:translate(2rem,-2rem); opacity:0;}
	to{transform:translate(0,0); opacity:1;}
}
@keyframes pageMInPrev{
	from{transform:translate(-2rem,2rem); opacity:0;}
	to{transform:translate(0,0); opacity:1;}
}

.page.current{
	display:block;
}
.current {
	display:block;
	z-index:1;
}
.slide {
	display:block;
	z-index:2;
}
.swipe {
	display:block;
	z-index:3;
	-webkit-transition-duration:0ms !important;
  transition-duration:0ms !important;
}

/* 页面导航 */
#navBar {
	z-index:3;
	position:absolute;
	bottom:0.2rem;
	left:40%;
  transform: translateX(-50%);
	width:70%;
  overflow: hidden;
  padding: 0 0.6rem;

	/* border: 1px #c00 solid; */
}
#navBar .nav-list{overflow:hidden;}
#navBar ul{
  display: flex;
  flex-direction: row;
  width:100%;
  transition:transform .4s ease;
  will-change:transform;
}
#navBar li.active {filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(255,0,0,0.5));}
#navBar li {
  flex:0 0 16.6667%; /* 100% / 6 */
  padding: 0.1rem;
  filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(0,0,0,0.5));
  transition:all .7s ease;
	cursor:pointer;

  /* border: 1px #c00 solid; */
}
#navBar img{width:100%; display:block;}

/* 翻页 */
.pageBtn .prev,.pageBtn .next {
	z-index:4;
  position: absolute;
	top:50%;
  transform: translateY(-50%);
  cursor:pointer;

  width: 0.4rem;
  height: 0.4rem;
  background-image:url('../images/nav_prev.png');
  background-repeat: no-repeat;
  background-position: 50%;
	background-size:100% 100%;
}
.pageBtn .prev {
	left:0
}
.pageBtn .next {
	right:0;
  background-image:url('../images/nav_next.png');
}