.un1 .ubox{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 3;}

.un1 .ubox .box{margin: 5.5% auto 0;width: 51%; max-width: 980px;height: 77%;max-height: 730px;border:15px solid #2d9dfe;background: #f7edc5;position: relative;left: -0.85%;}

.un1 .ubox .box .video{position: relative;width: 100%;height: 100%;overflow: hidden;}

.un1 .ubox .box .video > img{display: block;width: 100%;background: #fff;height: 100%;}

.un1 .ubox .box .video > video{display: block;position: absolute;top: 0;left: 0;z-index: -1;width: 100%;max-height: 100%;object-fit: cover;opacity: 0;}

.un1 .ubox .box .video > video.act{opacity: 1;z-index: 9;}

.un1 .ubox .box .video .udh{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;}

.un1 .ubox .box .video .udh li{position: absolute;top: 0;left: 0;transform: scale(0.55);-webkit-transform: scale(0.55);cursor: pointer;width: 40%;}

.un1 .ubox .box .video .udh li img{display: block;width: 100%;}

.un1 .ubox .box .video .udh li img:nth-child(2){position: absolute;top: 0;left: 0;z-index: 2;opacity: 0;}

.un1 .ubox .box .video .udh0 li:nth-child(1){top: 20%;left: 0;}

.un1 .ubox .box .video .udh0 li:nth-child(2){top: 35%;left: 20%;}

.un1 .ubox .box .video .udh0 li:nth-child(3){top: 30%;left: 48%;}

.un1 .ubox .box .video .udh0 li:nth-child(4){top:33%;left: 5%;transform-origin: left center ;-webkit-transform-origin: left center ;}

.un1 .ubox .box .video .udh0 li:nth-child(5){top: 65%;left: 0%;width: 45%;}

.un1 .ubox .box .video .udh0 li:nth-child(6){top: 10%;left: 60%;}

.un1 .ubox .box .video .udh0 li:nth-child(7){top: 50%;left: 58%;width: 30%;}

.un1 .ubox .box .video .udh0 li:nth-child(8){top: 60%;left: 70%;width: 30%;}


.hidead,.hidead2{position: fixed;top: 0;left: 0;opacity: 0;pointer-events: none;z-index: -1;}

.un1 .ubox .box .video .udh li.act{transform: scale(0.9);-webkit-transform: scale(0.9);z-index: 3;}

.un1 .ubox .box .video .udh li.act img:nth-child(2){opacity: 1;}

.un1 .ubox .box .video .udh li.adbf.adbfno {transform: scale(0.55);-webkit-transform: scale(0.55);}

.un1 .ubox .box .video .udh1 li:nth-child(1){left: 0;top: 20%;}

.un1 .ubox .box .video .udh1 li:nth-child(2){left: 18%;top: 33%;}

.un1 .ubox .box .video .udh1 li:nth-child(3){left:47%;top: 30%;}

.un1 .ubox .box .video .udh1 li:nth-child(4){left:3%;top: 38%;width: 30%;}

.un1 .ubox .box .video .udh1 li:nth-child(5){left:5%;top: 65%;}

.un1 .ubox .box .video .udh1 li:nth-child(6){left:63%;top: 10%;width: 35%;}

.un1 .ubox .box .video .udh1 li:nth-child(7){left:60%;top: 50%;width: 30%;}

.un1 .ubox .box .video .udh1 li:nth-child(8){left:68%;top: 62%;width: 30%;}

/* 播放按钮 */

.un1 .ubox .box .video .abtn{position: absolute;top: 7%;left: 50%;z-index: 9;display: inline-block;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 20%;}

.un1 .ubox .box .video .abtn span{display: block;width: 30%;float: left;cursor: pointer;position: relative;top: 0;}

.un1 .ubox .box .video .abtn span:nth-child(2){margin: 0 5%;}

.un1 .ubox .box .video .abtn span img{max-width: 100%;}

.un1 .ubox .box .video .abtn span .txt{position: absolute;top: 103%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 80px;line-height: 30px;background: #fff;border-radius: 5px;text-align: center;font-weight: bold;border: 2px solid #000;pointer-events: none;opacity: 0;}

.un1 .ubox .box .video .abtn span:last-child .txt{width: 120px;}

.un1 .ubox .box .video .abtn span:hover{top: 5px;}

.un1 .ubox .box .video .abtn span:hover .txt{opacity: 1;}

.un1 .ubox .abtm{margin: 0 auto ;width: 51%; max-width: 980px;display: flex;justify-content: center;margin-top: -60px;position: relative;z-index: 9;left: -0.7%;}

.un1 .ubox .abtm a{display: block;margin: 0 9%;width: 15.3%;background: url(../images/u1/pa1.png) center no-repeat;background-size: cover;}

.un1 .ubox .abtm a img{display: block;max-width: 100%;position: relative;top: 0;}

.un1 .ubox .abtm a:hover img{top: -10px;}

/* 书本朗诵 */
.aujin{pointer-events: none;}

.un1_book .ubox{z-index: 8;}

.un1_book .ubox .box{width: 44.8%;height: 68%;margin-top: 6%;background: #5b3d26;border: 0;padding: 20px;background-size: cover;left: 4.15%;}

.un1_book .ubox .box .video .abtn{top: 31%;}

.un1_book .ubox .box .video .ubox{position: relative;}

.un1_book .ubox .box .video .unbox dd{display: none;}

.un1_book .ubox .box .video .udh1 li{left: 0;top: 0;width: 60%;}

.un1_book .ubox .box .video .udh1 li:nth-child(1){left: 0%;top: 20%;}

.un1_book .ubox .box .video .udh1 li:nth-child(2){left: 10%;top: 35%;width: 50%;}

.un1_book .ubox .box .video .udh1 li:nth-child(3){left: 5%;top: 50%;width: 50%;transform-origin: left center ;-webkit-transform-origin: left center ;}

.un1_book .ubox .box .video .udh1 li:nth-child(4){left: 55%;top: 20%;}

.un1_book .ubox .box .video .udh1 li:nth-child(5){left: 55%;top: 33%;width: 45%;}

.un1_book .ubox .box .video .udh1 li:nth-child(6){left: 45%;top: 44%;}

.un1_book .ubox .box .video .udh1 li:nth-child(7){left: 55%;top: 55%;width: 50%;}

.un1_book .ubox .box .video  #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;}

.un1_book .ubox .box .video  #testBox.act{opacity: 0;z-index: -1;}

.un1_book .ubox .box .video  #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;pointer-events: none;}

.un1_book .ubtn{}

.un1_book .ubtn span{display: block;width: 8.5%;position: absolute;cursor: pointer;z-index: 7;}

.un1_book .ubtn span:nth-child(1){top: 15%;left: 18%;}

.un1_book .ubtn span:nth-child(2){top: 39%;left: 20%;}

.un1_book .ubtn span:nth-child(3){top: 62%;left: 15%;}

.un1_book .ubtn span:nth-child(4){top: 82.5%;left: 26.6%;}

.un1_book .ubtn span:nth-child(5){top: 82%;left: 40.5%;}

.un1_book .ubtn span:nth-child(6){top: 81%;left: 54.5%;}

.un1_book .ubtn span:nth-child(7){top: 80%;left: 67.5%;}

.un1_book .ubtn span:nth-child(8){top: 73%;left:81%;}

.un1_book .ubtn span img{display: block;max-width: 100%;}

.un1_book .ubtn span div{position: absolute;top: 0;left: 0;z-index: 2;transform: scale(1.3);}
.un1_book .ubtn span:nth-child(1) div {
  top: 8%
}
.un1_book .ubtn span:nth-child(2) div {
  top: 10%
}
.un1_book .ubtn span:nth-child(3) div {
  top: 10%
}

.un1_book .ubtn span.act div img {animation: shangxia 1s linear  infinite  alternate;-webkit-animation: shangxia 1s  linear  infinite alternate;}

.un1  .ubtn span:hover  div img {animation: rubberBand 1s linear  ;-webkit-animation: rubberBand 1s linear  ;}

.un1_book .ubox .box .video .udh2{}

.un1_book .ubox .box .video .udh2 li{top: 0%;left: 0%;width: 35%;}

.un1_book .ubox .box .video .ifram{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;z-index: 2;}

.un1_book .ubox .box .video .ifram iframe{display: block;width: 100%;height: 100%;}

.un1_book .ubox .box .video .spdw{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;padding:20% 0 10%;}

.un1_book .ubox .box .video .spdw span{display: block;width: 100%;height: 20%;cursor: pointer; }

.un1_book .ubox .box .video .udh4{height: 30%; position: absolute;width: 100%;top: 50%;left: 0;transform:translateY(-50%);-webkit-transform:translateY(-50%);z-index: 3;padding: 0 5%;} 

.un1_book .ubox .box .video .udh4 li{width: 30.33%;position: absolute;left: 46%;top: 47%;height: 30%;}

.un1_book .ubox .box .video .udh4 li > img{width: 100%;height: 100%; cursor: pointer;}

.un1_book .ubox .box .video .udh4 li .lbtn{}

.un1_book .ubox .box .video .udh4 li .lbtn span{display: block;position: absolute;top: 30%;left: 25%;width: 30%;cursor: pointer;}

.un1_book .ubox .box .video .udh4 li .lbtn span:nth-child(2){left: 65%;}

.un1_book .ubox .box .video .udh4 li .lbtn span img{display: block;width: 100%;opacity: 0;}

.un1_book .ubox .box .video .udh4 li .lbtn span.act img{opacity: 1;}

.un1_c .ubox .box .video  #testBox{display: block;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;height: 100%;opacity: 1;}

.un1_c .ubox .box .video  #testBox.act{opacity: 0;z-index: -1;}

.un1_c .ubox .box .video  #testBox video{display: block;width: 100%;max-width: 100%;object-fit: cover;}

.p {
  width: 90%;
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 6;
  cursor: pointer;
}
.p img {
  width: 12%;
}
.p img:first-child {
  float: left;
}
.p img:last-child {
  float: right;
}

.main {
  perspective: 800px;
}

/* 树 */
.cirrus {
  width: 16%;
  position: absolute;
  left: 13%;
  top: 5.5%;
}
.branch {
  width: 50%;
  position: absolute;
  left: -2%;
  top: 0;
  transform-origin: 0 0;
  animation: branchChange 5s infinite;
}
@keyframes branchChange {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0);
  }
}
.leaf {
  width: 20%;
  position: absolute;
  left: -5%;
  top: -8%;
  transform-origin: 0 0;
  animation: leafShake 5s 0.5s infinite;
}
@keyframes leafShake {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0);
  }
}
.leaf2 {
  width: 18%;
  position: absolute;
  bottom: 0;
  left: -1%;
  transform-origin: 0 100%;
  animation: leaf2Change 4s infinite;
}
@keyframes leaf2Change {
  0% {
    transform: rotate3d(0);
  }
  50% {
    transform: rotate3d(0.5, 2, 0.5, 20deg);
  }
  100% {
    transform: rotate3d(0);
  }
}
/* 树结束 */
/* 松鼠 */
.zip {
  width: 20%;
  position: absolute;
  left: -2%;
  top: 40%;
  animation: zipInto 2s forwards;
}
@keyframes zipInto {
  0% {
    transform: translate3d(-110%, 30%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.light {
  width: 30%;
  position: absolute;
  right: -9%;
  top: -13%;
  animation: lightFlicker 2s infinite;
}
@keyframes lightFlicker {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
/* 松鼠end */

input {
  color: #000;
  text-align: left;
}
textarea {
  color: #000;
}
.next {
  cursor: pointer;
}
.back {
  cursor: pointer;
}