.scene_4 {
  width: 750px;
  height: 5336px;
  position: relative;
  z-index: 4;
  background-color: var(--default-color);
}
.s4-bg {
}
.s4_river {
  position: absolute;
  left: 0;
  top: 0;
  width: 750px;
  height: 0;
  /* background: url(../images/14-17/river.png); */
  background-size: 100% 5336px;
}
.s4_leaf {
  position: absolute;
  left: 50%;
  top: -100px;
  width: 0;
  height: 240px;
  transform: translateX(-50%);
  background: url(../images/14-17/leaf.png)
    center center;
  background-size: 1160px 240px;
}
.s4_thing_1 {
  position: absolute;
  right: -40px;
  top: -60px;
  width: 107px;
  height: 125px;
}
.s4_thing_2 {
  width: 265px;
  height: 202px;
}
.s4_thing_3 {
  position: absolute;
  top: 28px;
  left: 30px;
  width: 204px;
  height: 121px;
}
.s4_tips {
  position: absolute;
  right: 70px;
  top: 150px;
  transform: translateX(200px);
  transition: all 0.5s;
  opacity: 0;
}
.s4_tips.active {
  transform: translateX(0);
  opacity: 1;
}
.s4_hinges {
  position: absolute;
  top: 460px;
  width: 100%;
}
.s4_hinges .hinge {
  transition: all 0.5s;
  position: relative;
}
.s4_hinges .hinge::before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background: url('../images/14-17/click.jpg');
  position: absolute;
  top: 50%;
  left: 50%;
  animation: click 0.4s linear infinite alternate;
}
@keyframes click {
  from {
    transform: scale(1.2);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}
.s4_hinges .hinge::after {
  content: '';
  width: 37px;
  height: 48px;
  display: block;
  background: url('../images/14-17/click_hand.jpg');
  position: absolute;
  top: 53%;
  left: 50%;
}
.s4_hinges .s4_hinges-tip {
  width: 168px;
  height: 60px;
  background: url('../images/14-17/text_2.png');
  position: absolute;
}
.s4_hinges .hinge_1 {
  position: absolute;
  left: -200px;
  width: 182px;
  height: 325px;
  background: url(../images/14-17/hinge_1.png);
  background-repeat: no-repeat;
  opacity: 0;
}
.s4_hinges-tip1 {
  top: -80px;
  left: -10px;
}
.s4_hinges.active .hinge_1 {
  left: 100px;
  opacity: 1;
}
.s4_hinges .hinge_2 {
  position: absolute;
  right: -277px;
  top: 300px;
  width: 277px;
  height: 315px;
  background: url(../images/14-17/hinge_2.png);
  background-repeat: no-repeat;
  opacity: 0;
}
.s4_hinges-tip2 {
  top: 0px;
  left: -160px;
}
.s4_hinges.active .hinge_2 {
  right: 10px;
  opacity: 1;
}
.s4_hinges .hinge_3 {
  position: absolute;
  left: -327px;
  top: 460px;
  width: 327px;
  height: 278px;
  background: url(../images/14-17/hinge_rep.png);
  background-repeat: no-repeat;
  opacity: 0;
}
.s4_hinges-tip3 {
  bottom: -60px;
  right: -100px;
}
.s4_hinges.active .hinge_3 {
  left: 150px;
  opacity: 1;
}
.s4_hinges .hinge_4 {
  position: absolute;
  left: -296px;
  top: 1600px;
  width: 296px;
  height: 306px;
  background: url(../images/14-17/hinge_4.png);
  background-repeat: no-repeat;
  opacity: 0;
}
.s4_hinges-tip4 {
  top: 0px;
  right: -180px;
}
.s4_hinges.active .hinge_4 {
  left: -20px;
  opacity: 1;
}
.s4_hinges .hinge_5 {
  position: absolute;
  right: -226px;
  top: 1950px;
  width: 226px;
  height: 326px;
  background: url(../images/14-17/hinge_5.png);
  background-repeat: no-repeat;
  opacity: 0;
}
.s4_hinges-tip5 {
  bottom: 0px;
  left: -80px;
}
.s4_hinges.active .hinge_5 {
  right: 50px;
  opacity: 1;
}
.s4_stone {
  position: absolute;
  top: 465px;
  width: 100%;
}
.s4_stone img:nth-child(1) {
  position: absolute;
  right: 140px;
  top: 30px;
  width: 92px;
  height: 78px;
}
.s4_stone img:nth-child(2) {
  position: absolute;
  right: 100px;
  top: 100px;
  width: 179px;
  height: 180px;
}
.s4_stone img:nth-child(3) {
  position: absolute;
  right: 120px;
  top: 510px;
  width: 133px;
  height: 121px;
}
.s4_stone img:nth-child(4) {
  position: absolute;
  right: 20px;
  top: 650px;
  width: 111px;
  height: 103px;
}
.s4_stone img:nth-child(5) {
  position: absolute;
  right: 150px;
  top: 750px;
  width: 168px;
  height: 60px;
}
.pop {
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  z-index: 2;
  transform: scale(0);
}
.pop.pop1,
.pop.pop2,
.pop.pop3,
.pop.pop4,
.pop.pop5 {
  transform: scale(1);
}
.pop.pop1 .s4_hinges_popup_1 {
  display: block;
}
.s4_hinges_popup_1 {
  background: url(../images/14-17/thing_3.png);
  width: 649px;
  height: 462px;
  display: none;
  position: relative;
}
.s4_hinges_popup_1 img:nth-child(1) {
  position: absolute;
  top: 80px;
  left: 50px;
  width: 526px;
  height: 45px;
  opacity: 0;
}
.s4_hinges_popup_1 img:nth-child(2) {
  position: absolute;
  top: 150px;
  left: 50px;
  width: 472px;
  height: 46px;
  opacity: 0;
}
.s4_hinges_popup_1 img:nth-child(3) {
  position: absolute;
  top: 220px;
  left: 50px;
  width: 470px;
  height: 88px;
  opacity: 0;
}
.s4_hinges_popup_2 {
  position: relative;
  background: url(../images/14-17/thing_4.png);
  width: 650px;
  height: 663px;
  display: none;
}
.pop.pop2 .s4_hinges_popup_2 {
  display: block;
}
.s4_hinges_popup_2 img:nth-child(1) {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 549px;
  height: 87px;
  opacity: 0;
}
.s4_hinges_popup_2 img:nth-child(2) {
  position: absolute;
  top: 160px;
  left: 50px;
  width: 535px;
  height: 350px;
  opacity: 0;
}
.s4_hinges_popup_3 {
  position: relative;
  background: url(../images/14-17/thing_3.png);
  width: 649px;
  height: 462px;
  display: none;
}
.pop.pop3 .s4_hinges_popup_3 {
  display: block;
}
.s4_hinges_popup_3 img:nth-child(1) {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 349px;
  height: 45px;
  opacity: 0;
}
.s4_hinges_popup_3 img:nth-child(2) {
  position: absolute;
  top: 140px;
  left: 50px;
  width: 537px;
  height: 173px;
  opacity: 0;
}
.s4_hinges_popup_4 {
  position: relative;
  background: url(../images/14-17/thing_5.png);
  width: 649px;
  height: 381px;
  display: none;
}
.pop.pop4 .s4_hinges_popup_4 {
  display: block;
}
.s4_hinges_popup_4 img:nth-child(1) {
  position: absolute;
  top: 80px;
  left: 50px;
  width: 555px;
  height: 172px;
  opacity: 0;
}
.s4_hinges_popup_5 {
  position: relative;
  background: url(../images/14-17/thing_5.png);
  width: 649px;
  height: 381px;
  display: none;
}
.pop.pop5 .s4_hinges_popup_5 {
  display: block;
}
.s4_hinges_popup_5 img:nth-child(1) {
  position: absolute;
  top: 80px;
  left: 50px;
  width: 514px;
  height: 130px;
  opacity: 0;
}
.s4_video {
  position: absolute;
  top: 1400px;
  left: 15px;
  width: 720px;
  height: 407px;
  background: url(../images/14-17/thing_6.png);
}
.s4_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s4_tips_2 {
  position: absolute;
  top: 2502px;
  left: 30px;
  width: 150px;
  height: 375px;
  background: url(../images/14-17/thing_7.png);
  transform: translateX(-200px);
  transition: all 0.5s;
  opacity: 0;
}
.s4_tips_2.active {
  transform: translateX(-30px);
  opacity: 1;
}
.s4_live {
  position: absolute;
  left: 0;
  top: 3052px;
  width: 100%;
}
.s4_animal_1 {
  position: absolute;
  right: 0;
  width: 204px;
  height: 125px;
  background: url(../images/14-17/bird_1.png);
  background-size: 204px 99px;
  background-position: center;
  animation: animal_tick 2s infinite;
  background-repeat: no-repeat;
}
.s4_animal_1.active {
  background-image: url(../images/14-17/bird_2.png);
  background-size: 191px 125px;
}
@keyframes animal_tick {
  0% {
    background-image: url(../images/14-17/bird_1.png);
    background-size: 204px 99px;
    background-position: center;
  }
  50% {
    background-image: url(../images/14-17/bird_2.png);
    background-size: 191px 125px;
  }
  100% {
    background-image: url(../images/14-17/bird_1.png);
    background-size: 204px 99px;
    background-position: center;
  }
}
.s4_animal_2 {
  position: absolute;
  right: -100px;
  width: 348px;
  height: 162px;
  background: url(../images/14-17/dolphin_1.png)
    no-repeat;
  background-size: 348px 162px;
  background-position: center;
  animation: animal_tick1 5s 1s infinite;
  z-index: 1;
}
@keyframes animal_tick1 {
  0% {
    background-image: url(../images/14-17/dolphin_1.png);
    background-size: 348px 162px;
  }
  50% {
    background-image: url(../images/14-17/dolphin_2.png);
    background-size: 330px 150px;
  }
  100% {
    background-image: url(../images/14-17/dolphin_1.png);
    background-size: 348px 162px;
  }
}
.s4_animal_3 {
  position: absolute;
  right: 0;
  top: 350px;
  z-index: 1;
}
.s4_animal_3 div {
  width: 134px;
  height: 49px;
  background: url(../images/14-17/fish.png);
}
.s4_animal-fish2 {
  transform: scale(0.6);
  position: absolute;
  top: -60px;
  left: 100px;
}
.s4_animal-fish3 {
  transform: scale(0.6);
  position: absolute;
  top: 40px;
  left: 100px;
}
.s4_animal-fish4 {
  transform: scale(0.5);
  position: absolute;
  top: 20px;
  left: 170px;
}
.s4_animal-fish5 {
  transform: scale(0.7);
  position: absolute;
  top: -10px;
  left: 140px;
}
.s4_animal_3 {
  position: absolute;
  right: 0;
  top: 350px;
  width: 134px;
  height: 49px;
  background: url(../images/14-17/fish.png);
}
.s4_animal_4 {
  position: absolute;
  left: -240px;
  top: 650px;
  transition: all 1s;
}
.s4_animal_4.active {
  left: -30px;
}
.s4_animal_4 div {
  width: 166px;
  height: 434px;
  background: url(../images/14-17/plant.png);
}
.plant1 {
  position: absolute;
  top: 0;
}
.plant2 {
  position: absolute;
  top: -20px;
  left: -30px;
  transform: rotate(-10deg);
}
.plant3 {
  position: absolute;
  top: 40px;
  left: 20px;
  transform: rotate(12deg);
}
.s4_live_1 {
  position: absolute;
  top: 110px;
  left: 100px;
  width: 568px;
  height: 221px;
  opacity: 0;
  z-index: 1;
}
.s4_live_2 {
  position: absolute;
  top: 110px;
  left: 185px;
  width: 399px;
  height: 287px;
  background: url(../images/14-17/thing_9.png);
  z-index: 2;
}
.s4_cloud {
  position: absolute;
  left: 0;
  top: 350px;
  width: 750px;
  height: 772px;
}
.s4_cloud::before {
  content: '';
  display: block;
  width: 300px;
  height: 200px;
  background: url(../images/14-17/cloud.png);
  background-position: left top;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s;
  transform: translateX(-100%);
}
.s4_cloud::after {
  content: '';
  display: block;
  width: 700px;
  height: 600px;
  background: url(../images/14-17/cloud.png);
  background-position: right bottom;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 0.5s;
  transform: translateX(100%);
}
.s4_cloud.active::after {
  transform: translateX(0%);
}
.s4_cloud.active::before {
  transform: translateX(0%);
}
.s4_tips_3 {
  position: absolute;
  right: 0;
  top: 530px;
  width: 300px;
  height: 202px;
}
.s4_tips_3 img:nth-child(1) {
  position: absolute;
  top: 50px;
  right: 40px;
  width: 265px;
  height: 202px;
}
.s4_tips_3 img:nth-child(2) {
  right: 0;
  position: absolute;
  width: 107px;
  height: 126px;
}
.s4_tips_4 {
  position: absolute;
  left: 100px;
  top: 1150px;
  width: 169px;
  height: 113px;
  opacity: 0;
}
.s4_animal_5 {
  position: absolute;
  bottom: 1185px;
  width: 256px;
  height: 121px;
  height: 0;
  transition: all 0.2s;
}
.s4_animal_6 {
  position: absolute;
  right: 0;
  bottom: 900px;
  width: 263px;
  height: 117px;
  height: 0;
  transition: all 0.2s;
}
.s4_animal_7 {
  position: absolute;
  left: 20px;
  top: 1370px;
  width: 570px;
  height: 283px;
  z-index: 1;
  opacity: 0;
  transition: all 0.4s;
}
.s4_animal_8 {
  position: absolute;
  left: 50px;
  top: 1395px;
  width: 518px;
  height: 220px;
  z-index: 1;
  opacity: 0;
  transition: all 0.4s 0.4s;
  transform: scale(0);
}
.s4_animal_8.active {
  transform: scale(1);
  opacity: 1;
}
.s4_animal_9 {
  position: absolute;
  right: 20px;
  bottom: 450px;
  width: 436px;
  height: 0;
  z-index: 2;
  background: url(../images/14-17/thing_14.png);
}
.s4_tips_5 {
  position: absolute;
  bottom: 50px;
  left: 50px;
  height: 296px;
}
.s4_tips_5 img:nth-child(1) {
  position: absolute;
  width: 330px;
  height: 296px;
}
.s4_tips_5 img:nth-child(2) {
  position: absolute;
  left: 30px;
  top: 20px;
  width: 282px;
  height: 243px;
}
.s4_animal_10 {
  position: absolute;
  top: 1100px;
  width: 750px;
  height: 1180px;
  opacity: 0;
}