/*=== 乘机须知 ===*/
.instructions {
  padding-top: 100px;
}
.instructions .mode01 {
  background: url(../images/page/instructions01_bac.png) center bottom no-repeat;
  background-size: 100% auto;
}
.instructions .mode01 .w1500 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.instructions .mode01 .next {
  width: 52%;
  color: #333;
}
.instructions .mode01 .next .title {
  margin-bottom: 35px;
  font-size: 36px;
  font-weight: bold;
}
.instructions .mode01 .next .text {
  font-size: 18px;
}
.instructions .mode01 .pic {
  margin-top: 50px;
  width: 36.46%;
}
.instructions .mode01 .pic img {
  width: 100%;
}
.instructions .mode01 .pic .mobile {
  display: none;
}
.instructions .mode02 {
  display: flex;
  justify-content: space-between;
}
.instructions .mode02.mobile {
  display: none;
}
.instructions .mode02 .next {
  position: relative;
  width: 10%;
  height: 28.9vw;
  color: #fff;
  overflow: hidden;
}
.instructions .mode02 .next::before {
  transition: all 0.5s;
  position: absolute;
  left: -5%;
  bottom: 0;
  width: 110%;
  height: 100%;
  background: url(../images/icon/icon-37.png) left bottom repeat-x;
  background-size: auto 100%;
  content: "";
}
.instructions .mode02 .next .pic {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.instructions .mode02 .next .pic i {
  width: 100%;
  height: 100%;
}
.instructions .mode02 .next .pos1 {
  transition: all 0.5s;
  opacity: 1;
  position: absolute;
  left: 0;
  top: calc((100% - 220px) / 2);
  z-index: 2;
  width: 100%;
}
.instructions .mode02 .next .pos1 b {
  transition: all 0.5s;
  margin: 0 auto;
  width: 25px;
  line-height: 26px;
  font-size: 22px;
}
.instructions .mode02 .next .pos2 {
  transition: all 0.5s;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(40vw - 100px);
}
.instructions .mode02 .next .pos2 p {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
}
.instructions .mode02 .next .pos2 .more i {
  float: left;
  padding-right: 45px;
  font-size: 17px;
  background: url(../images/icon/icon-36.png) right center no-repeat;
  background-size: 27px auto;
}
.instructions .mode02 .next:nth-child(2)::before {
  background-image: url(../images/icon/icon-38.png);
}
.instructions .mode02 .next:nth-child(3)::before {
  background-image: url(../images/icon/icon-39.png);
}
.instructions .mode02 .next:nth-child(4)::before {
  background-image: url(../images/icon/icon-40.png);
}
.instructions .mode02 .next:nth-child(5)::before {
  background-image: url(../images/icon/icon-41.png);
}
.instructions .mode02 .next:nth-child(6)::before {
  background-image: url(../images/icon/icon-42.png);
}
.instructions .mode02 .next:nth-child(7)::before {
  background-image: url(../images/icon/icon-43.png);
}
.instructions .mode02 .next.cur {
  width: 40%;
}
.instructions .mode02 .next.cur::before {
  transition: all 0.5s;
  opacity: 0.5;
}
.instructions .mode02 .next.cur .pos1 {
  transition: all 0.5s;
  opacity: 0;
}
.instructions .mode02 .next.cur .pos2 {
  transition: all 0.5s;
  opacity: 1;
}
@media (max-width: 1200px) {
  .instructions {
    padding-top: 2.2rem;
  }
  .instructions .mode01 {
    background-image: url(../images/mobile/page/instructions01_bac.png);
  }
  .instructions .mode01 .next {
    width: 51.55%;
  }
  .instructions .mode01 .next .title {
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
  }
  .instructions .mode01 .next .text {
    line-height: 0.8rem;
    font-size: 0.5rem;
  }
  .instructions .mode01 .pic {
    margin-top: 0.84rem;
    width: 45.1%;
  }
  .instructions .mode01 .pic .pc {
    display: none;
  }
  .instructions .mode01 .pic .mobile {
    display: block;
  }
  .instructions .mode02.pc {
    display: none;
  }
  .instructions .mode02.mobile {
    display: block;
  }
  .instructions .mode02 .next {
    width: 100%;
    height: 15.3rem;
  }
  .instructions .mode02 .next .pos2 {
    opacity: 1;
    top: 9rem;
    transform: translate(-50%, 0);
    width: 92%;
  }
  .instructions .mode02 .next .pos2 p {
    margin-bottom: 0.8rem;
    font-size: 0.8rem;
  }
  .instructions .mode02 .next .pos2 .more i {
    padding-right: 1.1rem;
    font-size: 0.56rem;
    background-size: 0.7rem auto;
  }
  .instructions .mode02 .next.cur,
  .instructions .mode02 .next.swiper-slide-active {
    width: 100%;
  }
  .instructions .mode02 .next.cur::before,
  .instructions .mode02 .next.swiper-slide-active::before {
    transition: all 0.5s;
    opacity: 0.7;
  }
  .instructions .mode02 .swiper-pagination {
    bottom: 1rem;
    display: flex;
    justify-content: center;
  }
  .instructions .mode02 .swiper-pagination-bullet {
    transition: all 0.5s;
    opacity: 1;
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 0.27rem;
    background: #fff;
    border: #093b94 0.03rem solid;
  }
  .instructions .mode02 .swiper-pagination-bullet-active {
    transition: all 0.5s;
    width: 1.1rem;
    background: #093b94;
  }
}