@media(min-width:768px){
  .bg {
    width: 100vw;
    height: 100vh;
    /* background: blue; */
    background-image: url(../images/404/bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  .logo {
    width: 20vw;
    height: 5vh;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .content{
    position: relative;
      top: 50%;
  
      transform: translateY(-50%);
    color: white;
    /* width: 100%;
    height: 100%; */
    margin: 0 auto;
    text-align: center;
  }
  .tips{
   font-size: 3.5vw;
   font-weight: 800;
  }
  .but{
    position: relative;
      left: 50%;
      margin-top: 8vh;
      transform: translateX(-50%);
    width: 8vw;
    height: 5vh;
    font-size: 1.2vw;
    line-height: 5vh;
    background: #cfd4d7;
    border-radius: 5px;
    color: #6a8bc2;
  }
}
@media(max-width:768px){
  .bg {
    width: 100vw;
    height: 100vh;
    /* background: blue; */
    background-image: url(../images/404/bg.png);
    background-position: 90% 100%;

    background-repeat: no-repeat;
  }
  
  .logo {
    width: 40vw;
    height: 5vh;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .content{
    position: relative;
      top: 50%;
  
      transform: translateY(-50%);
    color: white;
    /* width: 100%;
    height: 100%; */
    margin: 0 auto;
    text-align: center;
  }
  .content img{
    width: 70vw !important;
  }
  .tips{
   font-size: 5vw;
   font-weight: 800;
  }
  .but{
    position: relative;
    left: 50%;
    margin-top: 5vh;
    transform: translateX(-50%);
    width: 20vw;
    height: 4vh;
    font-size: 3vw;
    line-height: 4vh;
    background: #cfd4d7;
    border-radius: 5px;
    color: #6a8bc2;
  }
}
html,
body {
  margin: 0 auto;
  padding: 0;
}