<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>404</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
</head>
<style>
*{
  margin: 0;
  padding: 0;
}

.box_404 {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box_404 .box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.box_404 .box img {
  margin: auto;
  max-width: 100%;
}

.box_404 .box h1 {
  font-size: 50px;
  color: #333;
  font-family: 'syr';
  font-weight: 500;
  margin: 30px auto;
}

.box_404 .box a {
  width: 120px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #52564f;
  font-size: 20px;
  color: white;
  transition: .5s;
}

.box_404 .box a:hover{
  background: black;
}

@media screen and (max-width: 1024px){
  .box_404 .box h1{
    font-size: 32px;
  }
}
@media screen and (max-width: 640px){
  .box_404 .box h1{
    font-size: 18px;
  }
}

</style>
<body>
    <section class="box_404">
        <div class="box">
            <img src="img/404.png" alt="">
            <h1>æŠ±æ‰ï¼Œæ‚¨è¦è®¿é—®çš„é¡µé¢å‡ºçŽ°äº†é—®é¢˜ï¼</h1>
            <a href="/">è¿”å›žé¦–é¡µ</a>
        </div>
    </section>                                                                         
</body>
</html>