@media screen and (max-width: 768px) {
  .image-box{
    height: 110%;
  }
  .roo-logo{
    width: 100%;
  }
  footer{
    width: 100%;
    height: 100%;
    background: rgba(50,50,50,.8);
    position: relative;
    vertical-align: middle;
  }
  footer:before{
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
  .bg_top img{
    height: 55%;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .content .msg{
    line-height: 7vw;
    font-size: 7vw;
  }
  .index_part_1 .content-sub-box.xs-hide{
    display: none;
  }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .index_part_1{
    width: 50%;
  }
  .content .msg{
    line-height: 7vh;
    font-size: 7vh;
  }
  .index_part_1 .app-link{
    margin-top: 20px; 
  }
  .bg_top img{
    height: 100%;
  }

  #mobile-slider li .slider-up{
    width: 50%;
    height: 100%;
    float: left;
  }
  #mobile-slider li  .slider-down{
    width: 50%;
    height: 100%;
    float: left;
  }
  #mobile-slider li  .slider-down img{
    height: 90%;
    vertical-align: bottom;
  }
  .slider-down:before{
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: bottom;
  }
  .arrow-box{
    padding: 1px;
  }
  .arrow{
    width: 20px;
  }
}