.scene_5 {
  width: 750px;
  height: 7997px;
  /* background-image: url('../images/18/bg.png'); */
  position: relative;
  z-index: 3;
  background-color: var(--default-color);
}
.s5_river {
  width: 750px;
  height: 0;
  /* background-image: url('../images/18/river.png'); */
  position: absolute;
  top: -20px;
  left: 0;
}
.s5_spritesheet {
  background-image: url(../images/18/spritesheet.png);
  background-repeat: no-repeat;
  display: block;
}
.s5_text1 {
  width: 268px;
  height: 113px;
  display: flex;
  background-image: url('../images/18/text1.jpg');
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 10px;
  position: absolute;
  top: 500px;
  left: 450px;
}
.s5_text2 {
  width: 304px;
  height: 236px;
  background-position: -259px -477px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 10px;
  position: absolute;
  top: 550px;
  left: 30px;
}
.s5_text2-inner {
  width: 248px;
  height: 179px;
  background-position: -865px -288px;
}
.s5_text4 {
  width: 287px;
  height: 241px;
  background-image: url('../images/18/text3.png');
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 10px;
  position: absolute;
  top: 3250px;
  left: 30px;
  z-index: 2;
}
.s5_text5 {
  width: 287px;
  height: 241px;
  background-image: url('../images/18/text5.png');
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 10px;
  position: absolute;
  top: 4350px;
  z-index: 2;
  right: 30px;
}
.s5_photo-wrap {
  width: 517px;
  height: 273px;
  background-position: -744px -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 850px;
  left: 200px;
}
.s5_photo {
  width: 478px;
  height: 220px;
  /* background-image: url('../images/18/photo.png'); */
}
.s5_horn {
  width: 63px;
  height: 60px;
  background-position: -553px -5px;
  position: absolute;
  top: 930px;
  left: 40px;
  opacity: 0;
}
.s5_horn.active {
  background-position: -626px -5px;
}
@keyframes horn {
  from {
    transform: rotate(3deg);
  }
  to {
    transform: rotate(-3deg);
  }
}
.s5_horn.active .s5_horn_sound {
  animation: sound 0.5s ease-in-out infinite alternate;
}
@keyframes sound {
  from {
    transform: rotate(0deg);
    width: 0px;
  }
  to {
    transform: rotate(-10deg);
    width: 45px;
  }
}
.s5_horn_sound {
  width: 35px;
  height: 53px;
  background-position: -699px -5px;
  position: absolute;
  left: 70px;
}
.s5_horn_text {
  width: 108px;
  height: 45px;
  background-position: -553px -75px;
  position: absolute;
  bottom: -50px;
}
.s5_horn_text.active {
  animation: zoom1 0.5s infinite linear alternate;
}
@keyframes zoom1 {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(0.9);
  }
}
.s5_leaf-left {
  width: 219px;
  height: 291px;
  background-position: -358px -157px;
  position: absolute;
  left: 0;
  top: 2550px;
  z-index: 2;
}
.s5_leaf-right {
  width: 244px;
  height: 296px;
  background-position: -5px -458px;
  position: absolute;
  right: 0;
  top: 2000px;
  z-index: 1;
}
.s5_hill-left {
  width: 343px;
  height: 220px;
  background-position: -5px -5px;
  position: absolute;
  left: 0;
  top: 1220px;
}
.s5_hill-right {
  width: 185px;
  height: 142px;
  background-position: -358px -5px;
  position: absolute;
  right: 0;
  top: 1400px;
}
.s5_spritesheet2 {
  background-image: url(../images/18/spritesheet2.png);
  background-repeat: no-repeat;
  display: block;
}
.s5_build-left {
  position: absolute;
  left: 0;
  top: 2100px;
  z-index: 1;
}
.s5_build-left1 {
  width: 450px;
  height: 498px;
  background-position: -5px -5px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
}
.s5_build-left.active .s5_build-left1 {
  transition: all 0.4s;
  opacity: 1;
}
.s5_build-left2 {
  width: 501px;
  height: 190px;
  background-position: -468px -5px;
  position: absolute;
  left: 0;
  top: 350px;
  z-index: 1;
  transform: translateX(-100%);
}
.s5_build-left.active .s5_build-left2 {
  transition: all 0.4s 0.4s;
  transform: translateX(0%);
}
.s5_build-right {
  width: 470px;
  height: 884px;
  position: absolute;
  right: 0;
  top: 1250px;
}
.s5_build-right-inner {
  width: 470px;
  height: 0;
  background-position: -468px -205px;
  position: absolute;
  bottom: 0;
}
.s5_smoke {
  width: 209px;
  height: 454px;
  background-position: -948px -954px;
  position: absolute;
  left: 40px;
  top: -70px;
  opacity: 0;
}
.s5_build-left.active .s5_smoke {
  transition: all 0.4s 0.8s;
  opacity: 1;
}
.s5_smoke1 {
  width: 291px;
  height: 242px;
  background-position: -1167px -954px;
  position: absolute;
  top: -250px;
  left: 50px;
  z-index: 3;
  opacity: 0;
  display: none;
}
.s5_build-left.active .s5_smoke1 {
  animation: smoke1 3s ease-in infinite alternate;
}
@keyframes smoke1 {
  from {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
.s5_smoke2 {
  width: 384px;
  height: 206px;
  background-position: -1468px -954px;
  position: absolute;
  top: -150px;
  left: 120px;
  opacity: 0;
  display: none;
}
.s5_build-left.active .s5_smoke2 {
  animation: smoke1 3s 1s ease-in infinite alternate;
}
.s5_smoke3 {
  width: 133px;
  height: 73px;
  background-position: -1862px -954px;
  position: absolute;
  top: -250px;
  left: 350px;
  transform: translateX(-100px);
  opacity: 0;
  display: none;
}
.s5_build-left.active .s5_smoke3 {
  animation: smoke2 5s 2s ease-in infinite;
}
@keyframes smoke2 {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  to {
    transform: translateX(400px);
  }
}
.s5_smoke4 {
  width: 161px;
  height: 68px;
  background-position: -1862px -1037px;
  position: absolute;
  top: -60px;
  left: 400px;
  transform: translateX(-200px);
}
.s5_build-left.active .s5_smoke4 {
  animation: smoke2 4s 1s ease-in infinite;
}
.s5_farmer1 {
  width: 287px;
  height: 352px;
  background-position: -979px -5px;
  position: absolute;
  top: 400px;
  left: 200px;
}
.s5_field.active .s5_farmer1 {
  animation: farmer1 2s 0.3s ease-in infinite alternate;
  transform-origin: bottom center f;
}
@keyframes farmer1 {
  from {
    transform: rotate(3deg);
  }
  to {
    transform: rotate(-3deg);
  }
}
.s5_farmer2 {
  width: 170px;
  height: 193px;
  background-position: -948px -367px;
  position: absolute;
  top: 120px;
  left: 380px;
}
.s5_field.active .s5_farmer2 {
  animation: farmer 3s ease-in infinite alternate;
  transform-origin: bottom center;
}
@keyframes farmer {
  from {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-5deg);
  }
}
.s5_field {
  width: 632px;
  height: 939px;
  background-position: -1276px -5px;
  position: absolute;
  top: 2637px;
  right: -20px;
}
.s5_jack {
  width: 181px;
  height: 347px;
  background-position: -5px -954px;
  position: absolute;
  top: 90px;
  left: 80px;
}
.s5_field.active .s5_jack {
  animation: jack 2s ease-in infinite alternate;
  transform-origin: bottom center;
}
@keyframes jack {
  from {
    transform: rotate(8deg);
  }
  to {
    transform: rotate(-8deg);
  }
}
.s5_jack2 {
  width: 181px;
  height: 347px;
  background-position: -5px -954px;
  position: absolute;
  top: -230px;
  left: 420px;
  transform-origin: center bottom;
  transform: scale(0.5) rotateY(180deg);
}
.s5_field.active .s5_jack2 {
  animation: jack2 2s ease-in infinite alternate;
  transform-origin: center bottom;
}
@keyframes jack2 {
  from {
    transform: scale(0.5) rotateY(180deg) rotate(5deg);
  }
  to {
    transform: scale(0.5) rotateY(180deg) rotate(-5deg);
  }
}
.s5_rice {
  width: 240px;
  height: 337px;
  background-position: -196px -954px;
  position: absolute;
  bottom: -80px;
  right: 0;
}
.s5_boat1 {
  width: 307px;
  height: 1055px;
  background-image: url('../images/18/boat.png');
  position: absolute;
  top: 3300px;
  left: 150px;
  z-index: 1;
}
.s5_boat2 {
  top: 4000px;
  left: 120px;
  z-index: 0;
}
.s5_zha {
  width: 750px;
  height: 464px;
  /* background-image: url('../images/18/zha.png'); */
  position: absolute;
  top: 5250px;
  left: 0;
}
.s5_text3 {
  width: 675px;
  height: 918px;
  /* background-image: url('../images/18/text-bg.png'); */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 10px;
  position: absolute;
  top: 5900px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.s5_text3-inner {
  width: 570px;
  height: 0;
  /* background-image: url('../images/18/text4.png'); */
  position: absolute;
  top: 100px;
}
.s5_video1 {
  width: 720px;
  height: 400px;
  background-color: #0e3743;
  border-radius: 5px;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.s5_video2 {
  width: 720px;
  height: 400px;
  background-color: #0e3743;
  border-radius: 5px;
  position: absolute;
  top: 3600px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
}
.s5_map {
  width: 750px;
  height: 929px;
  position: absolute;
  top: 6970px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s5_map-inner {
  width: 966px;
  height: 624px;
  /* background: url('../images/18/map.png'); */
  position: absolute;
  transform-origin: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(70deg);
  transition: all 0.2s;
  overflow: hidden;
}
.s5_map-line {
  width: 0;
  height: 134px;
  background-image: url('../images/18/red_road.jpg');
  position: absolute;
  background-repeat: no-repeat;
  top: 280px;
  left: 348px;
}
.s5_map-icon {
  width: 662px;
  height: 256px;
  background-image: url('../images/18/map_icon.jpg');
  position: absolute;
  background-repeat: no-repeat;
  top: 195px;
  left: 210px;
  opacity: 0;
}
.s5_wave-top {
  width: 601px;
  height: 286px;
  background-image: url('../images/18/wave_left.png');
  position: absolute;
  top: 360px;
  left: 180px;
  z-index: 1;
  transform: scale(1.2) translateX(800px);
}
.s5_wave-bottom {
  width: 601px;
  height: 286px;
  background-image: url('../images/18/wave_right.png');
  position: absolute;
  top: 100px;
  right: 80px;
  transform: scale(1.2) translateX(-800px);
}
.s5_map.active .s5_map-inner {
  transition: all 0.2s;
  transform: rotate(0deg) scale(1.5) translateX(-50px);
}
.s5_map.active.play .s5_map-line {
  width: 357px;
  transition: all 1.5s 1s;
}
.s5_map.active.play .s5_map-icon {
  opacity: 1;
  transition: all 1s 1.5s;
}
.s5_map.active.play .s5_wave-top {
  opacity: 1;
  animation: wave-top 2s linear forwards;
}
@keyframes wave-top {
  from {
    transform: scale(1.2) translateX(800px);
  }
  to {
    transform: scale(1.2) translateX(0px);
  }
}
.s5_map.active.play .s5_wave-bottom {
  opacity: 1;
  animation: wave-bottom 2s linear forwards;
}
.s5_map.active.play1 .s5_wave-bottom,
.s5_map.active.play1 .s5_wave-top {
  transition: all 0.4s;
  opacity: 0;
}
@keyframes wave-bottom {
  from {
    transform: scale(1.2) translateX(-800px);
  }
  to {
    transform: scale(1.2) translateX(0px);
  }
}
.s5_map.active .s5_hand {
  opacity: 1;
}
.s5_map.active.play .s5_hand {
  opacity: 0;
}
.s5_map::after {
  width: 172px;
  height: 72px;
  content: '';
  display: block;
  background: url('../images/18/map_tip.jpg');
  position: absolute;
  top: -100px;
  right: 80px;
}
.s5_hand {
  position: absolute;
  right: -20px;
  top: 400px;
  z-index: 2;
  width: 320px;
  height: 202px;
  /* background-image: url(../images/1-3/hand.png); */
  animation: hand 2s linear infinite;
  opacity: 0;
}
@keyframes hand {
  from {
    transform: rotate(30deg) translateX(-200px) translateY(200px);
  }
  to {
    transform: rotate(30deg) translateX(100px) translateY(100px);
  }
}