/*-------------------------------------------------------------------------------*/
/*    $Index                                                                                   */
/*-------------------------------------------------------------------------------*/
html {
  background: url(../../images/background_full.jpg);
}

.banner-wrap span {
  position: fixed;
  bottom: 100px;
  overflow: hidden;
  width: 100%;
  min-height: 600px;
  background: url(../../images/background1.png) no-repeat center bottom;
  font-size: 0;
}
.banner-wrap:before, .banner-wrap:after {
  content: "";
  position: absolute;
  width: 511px;
  height: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 2;
}
.banner-wrap:before {
  top: 0;
  left: 0;
  background: url(../../images/tree_left.png) no-repeat top left -70px;
  transition: all 0.3s ease;
}
@media (max-width: 1600px) {
  .banner-wrap:before {
    background-position: top left -250px;
    transition: all 0.3s ease;
  }
}
@media (max-width: 1440px) {
  .banner-wrap:before {
    background-position: top left -480px;
    transition: all 0.3s ease;
  }
}
.banner-wrap:after {
  top: 0;
  right: 0;
  background: url(../../images/tree_right.png) no-repeat top right -50px;
  transition: all 0.3s ease;
}
@media (max-width: 1600px) {
  .banner-wrap:after {
    background-position: top right -250px;
    transition: all 0.3s ease;
  }
}
@media (max-width: 1440px) {
  .banner-wrap:after {
    background-position: top right -480px;
    transition: all 0.3s ease;
  }
}
@media (max-width: 1200px) {
  .banner-wrap:before, .banner-wrap:after {
    display: none;
  }
}
@media (max-width: 768px) {
  .banner-wrap span {
    display: block;
    position: relative;
    top: 0;
  }
}