.page1 {
  width: 19.20rem;
  height: 10.80rem;
  background: url(../image/section1/bg.jpg) no-repeat;
  background-size: 100%;
  position: relative;
}

/* 背景 */
.page1_change {
  width: 100%;
  height: 100%;
  /* background: url(../image/section1/bg.jpg) no-repeat; */
  /* background-color: rgba(251, 250, 251, 0.88); */
  /* background-size: 100%; */
  transition: all .3s ease-in-out;
  position: absolute;
}
.page1_change video {
  width: 100%;
  /* height: 100%; */
}

.page1 .store-btns {
  display: flex;
  justify-content: space-between;
  width: 10.1rem;
  position: relative;
  top: 2.7rem;
}

.page1 .store-btns a {
  display: inline-block;
  width: 2.41rem;
  height: 0.71rem;
}

.page1 .store-btns a>span {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline;
  float: left;
  overflow: hidden;
  border-radius: 0.1rem;
  -webkit-transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.page1 .store-btns .google-store-btn {
  background: url(../image/section1/google_store.png) no-repeat;
  background-size: 100%;
}

.page1 .store-btns .ios-store-btn {
  background: url(../image/section1/ios-store.png) no-repeat;
  background-size: 100%;
}

.page1 .store-btns .one-store-btn {
  background: url(../image/section1/one-store.png) no-repeat;
  background-size: 100%;
}

.page1 .store-btns .galaxy-store-btn {
  background: url(../image/section1/galaxy-store.png) no-repeat;
  background-size: 100%;
}

.play {
  width: 1.31rem;
  height: 1.32rem;
  position: absolute;
  cursor: pointer;
  top: 3.5rem;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../image/section1/btn-play.png) no-repeat;
  background-size: 100%;
}

.link-store-light {
  animation: sg 2s linear infinite;
  background: linear-gradient(120deg, #0000, #0000, #fff7, #0000, #0000);
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all .65s;
  width: 100%;
  pointer-events: none;

}


/* 侧边列表 */
.nav-list {
  width: 2rem;
  height: 4.41rem;
  position: fixed;
  left: 0.2rem;
  top: 50%;
  margin-top: -1.5rem;
  z-index: 10;
  color: #989898;
  color: transparent;
  display: flex;
  cursor: pointer;
  align-items: self-start;
  /* justify-content: space-evenly; */
  flex-direction: column;
}

.nav-list li {
  font-size: 0.20rem;
}

.nav-list li.nav-1 {
  position: absolute;
  left: 0rem;
  background: url('../image/section1/nav-1.png') no-repeat;
  width: 0.61rem;
  height: 0.39rem;
  background-size: 100%;
}


.nav-list li.nav-2 {
  position: absolute;
  left: 1.12rem;
  background: url('../image/section1/nav-2.png') no-repeat;
  width: 1.26rem;
  height: 0.39rem;
  background-size: 100%;

}
.nav-list li.nav-3 {
  position: absolute;
  left: 2.89rem;
  background: url('../image/section1/nav-3.png') no-repeat;
  width: 1.35rem;
  height: 0.40rem;
  background-size: 100%;

}


.nav-list li.nav-1.active {
  position: absolute;
  left: 0rem;
  background: url('../image/section1/nav-1-active.png') no-repeat;
  width: 0.61rem;
  height: 0.39rem;
  background-size: 100%;
}



.nav-list li.nav-2.active {
  position: absolute;
  left: 1.12rem;
  background: url('../image/section1/nav-2-active.png') no-repeat;
  width: 1.26rem;
  height: 0.39rem;
  background-size: 100%;

}
.nav-list li.nav-3.active {
  position: absolute;
  left: 2.89rem;
  background: url('../image/section1/nav-3-active.png') no-repeat;
  width: 1.35rem;
  height: 0.40rem;
  background-size: 100%;

}

.nav-list li.nav-4 {
  position: absolute;
  left: 3.51rem;

}

.nav-list li.nav-5 {
  position: absolute;
  left: 4.92rem;

}

.nav-list li.nav-6 {
  position: absolute;
  left: 6.34rem;

}
.nav-list li{
  color: transparent;
  position: absolute;
}

.nav-list li.active {
  left: -.31rem;
  pointer-events: none;
}

.nav-list li:nth-child(1) {
  width: 0.66rem;
  height: 0.18rem;
  background: url('../image/section1/nav-no-1.png') no-repeat;
  background-size: 100%;
  top: .1rem;
}

/* .nav-list li:nth-child(2) {
  width: 1.03rem;
  height: 0.18rem;
  background: url('../image/section1/nav-no-2.png') no-repeat;
  background-size: 100% 100%;
  top: 0.5rem;
}

.nav-list li:nth-child(3) {
  width: 1.66rem;
  height: 0.18rem;
  background: url('../image/section1/nav-no-3.png') no-repeat;
  background-size: 100% 100%;
  top: 0.9rem;
}


.nav-list li:nth-child(4) {   
  width: 1.24rem;
  height: 0.19rem;
  background: url('../image/section1/nav-no-4.png') no-repeat;
  background-size: 100% 100%;
  top: 1.3rem;
}  */

.nav-list li:nth-child(2) {
  width: 0.85rem;
  height: 0.18rem;
  background: url('../image/section1/nav-no-5.png') no-repeat;
  background-size: 100% 100%;  
  top: .5rem;
} 

.nav-list li:nth-child(3) {
  width: 0.85rem;
  height: 0.18rem;
  background: url('../image/section1/nav-no-6.png') no-repeat;
  background-size: 100% 100%;
  top: .9rem;
} 

.nav-list li:nth-child(4) {
  width: 1.06rem;
  height: 0.18rem;
  background: url('../image/section1/nav-no-7.png') no-repeat;
  background-size: 100% 100%;
  top: 1.3rem;
} 

.nav-list li:nth-child(5) {   
  width: 1.11rem;
  height: 0.19rem;
  background: url('../image/section1/nav-no-4.png') no-repeat;
  background-size: 100% 100%;
  top: 1.7rem;
} 


/* active */
.nav-list li:nth-child(1).active {
  width: 2.63rem;
  height: 0.63rem;
  background: url('../image/section1/nav-active-1.png') no-repeat;
  background-size: 100%;
  top: -.12rem;
}

/* .nav-list li:nth-child(2).active {
  width: 2.63rem;
  height: 0.63rem;
  background: url('../image/section1/nav-active-2.png') no-repeat;
  background-size: 100%;
  top: .28rem;
}

.nav-list li:nth-child(3).active {
  width: 2.63rem;
  height: 0.63rem;
  background: url('../image/section1/nav-active-3.png') no-repeat;
  background-size: 100%;
  top: 0.68rem;
}

.nav-list li:nth-child(4).active {
  width: 2.63rem;
  height: 0.63rem;
  background: url('../image/section1/nav-active-4.png') no-repeat;
  background-size: 100%;
  top: 1.08rem;
}  */

.nav-list li:nth-child(2).active {
  width: 2.63rem;
  height: 0.63rem;
  background: url('../image/section1/nav-active-5.png') no-repeat;
  background-size: 100%;
  top: .28rem;
} 

.nav-list li:nth-child(3).active {
  width: 2.63rem;
  height: 0.63rem;
  background: url('../image/section1/nav-active-6.png') no-repeat;
  background-size: 100%;
  top: 0.68rem;
}      

.nav-list li:nth-child(4).active {
  width: 2.63rem;
  height: 0.63rem;
  background: url('../image/section1/nav-active-7.png') no-repeat;
  background-size: 100%;
  top: 1.08rem;
}  

.nav-list li:nth-child(5).active {
  width: 2.63rem;
  height: 0.63rem;
  background: url('../image/section1/nav-active-4.png') no-repeat;
  background-size: 100%;
  top: 1.48rem;
}