html,
body {
  position: relative;
  height: 100%;
}

.swiper-Box {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.boxall {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.boxall img{
  max-width: 100%;
}

.big-chunk {
  position: absolute;
  top: 45%;
}

.big-chunk1 {
  left: 255px;
}

.big-chunk2 {
  right: 255px;
}

.big-chunk .pinyin {
  font-size: 30px;
  font-weight: bold;
}

.big-chunk .word {
  font-size: 50px;
  font-weight: bold;
  color: #2a335b;
  margin-top: 16px;
}

.big-chunk .more {
  display: block;
  margin-top: 40px;
  width: 120px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #2a335b;
  text-align: center;
  background-color: #eebb82;
}

.small-chunk {
  position: absolute;
  left: 50%;
  top: 51%;
  width: 100%;
  text-align: center;
  transform: translateX(-50%);
}

.small-chunk .pinyin {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
}

.small-chunk .word {
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  margin-top: 16px;
}

.small-chunk .more {
  display: block;
  margin-top: 38px;
  width: 120px;
  height: 50px;
  margin: 38px auto 0;
  line-height: 50px;
  font-size: 16px;
  color: #2a335b;
  text-align: center;
  background-color: #eebb82;
}

.box1 {
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.box2 {
  top: 0;
  display: flex;
  justify-content: space-between;
}

.box2 .box2-item {
  width: 50%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center;
}

.box3 {
  /* top: 200%; */
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: left;
}

.box4 {
  /* top: 300%; */
  display: flex;
  justify-content: space-between;
}

.box4 .box4-item {
  width: 33.33%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center;
}

.footer_block {
  position: fixed;
  bottom: -120%;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: 1s;
  display: block;
}

.footer_block_active {
  bottom: 0;
}
.mobile-gallery{
  display: none;
}
.mobile-gallery .gall-fill{
  height: 80px;
}
footer{
  display: none;
}

@media screen and (max-width:1200px){
    .swiper-Box, .footer_block{
      display: none;
    }
    .mobile-gallery{
        display: block;
    }
    .big-chunk{
      top: 50%;
      transform: translateY(-50%);
    }
    .big-chunk1{
      left: 80px;
    }
    .big-chunk2{
      right: 80px;
    }
    .small-chunk{
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .m-small-chunk .pinyin{
      font-size: 22px;
    }
    .m-small-chunk .word{
      font-size: 30px;
    }
    .m-small-chunk .more{
      height: 40px;
      line-height: 40px;
      margin-top: 20px;
    }
    footer{
      display: block;
    }
}
@media screen and (max-width:768px){
  .mobile-gallery .gall-fill{
    height: 65px;
  }
  .big-chunk .pinyin,.small-chunk .pinyin{
    font-size: 22px;
  }
  .big-chunk .word,.small-chunk .word{
    font-size: 30px;
  }
  .big-chunk .more,.small-chunk .more{
    height: 40px;
    line-height: 40px;
    margin-top: 20px;
  }
  .m-small-chunk .pinyin{
    font-size: 16px;
  }
}
@media screen and (max-width:640px){
  .box4{
    flex-wrap: wrap;
  }
  .box4 .box4-item{
    width: 50%;
  }
  .box4 .box4-item:last-child{
    width: 100%;
  }
}
@media screen and (max-width:480px){
  .boxall{
    height: 250px;
  }
  .boxall .show{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .box4{
    height: 500px;
  }
  .box4 .box4-item1, .box4 .box4-item2{
    height: 60%;
  }
  .box4 .box4-item3{
    height: 40%;
  }
  .big-chunk1{
    left: 15px;
  }
  .big-chunk2{
    right: 15px;
  }
  .big-chunk .pinyin,.small-chunk .pinyin{
    font-size: 16px;
  }
  .big-chunk .word,.small-chunk .word{
    font-size: 20px;
    margin-top: 5px;
  }
  .big-chunk .more,.small-chunk .more{
    height: 40px;
    line-height: 40px;
    margin-top: 20px;
  }
  .big-chunk .more, .small-chunk .more{
    width: 100px;
    font-size: 15px;
  }
  .small-chunk{
      bottom: 15px;
      top: auto;
      transform: translate(-50%, 0);
  }
  .big-chunk{
      top: auto;
      transform: none;
      bottom: 15px;
  }
}