* {
  box-sizing: border-box;
}
body
{
  background-image: url('shouyebeijing.png');
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding:10px;
}
#zi{
  color:#fff;
}
.topnav
{
overflow: hidden;
background-color: rgba(0,0,0,0);
}
.topnav a {
  float: right;
  display: block;
  color: #FFF;
  text-align: center;
  padding: 3% 3%;
  text-decoration: none;
}
.topnav a:hover {
  color: #f1f1f1;
}
.column {
  float: left;
  padding: 5px;
}
.column.side {
  width: 25%;
}
.column.middle {
  width: 50%;
}
.card {
  background-color: rgba(0,0,0,0.1);
  padding: 20px;
  margin-top: 20px;
  border:solid 1px #fff;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.footer {
  padding: 20px;
  text-align: center;
  background:rgba(0,0,0,0.1);
  margin-top: 20px;
  border:solid 1px #fff;
}
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
@media handheld {
  .column.side, .column.middle {
    width: 100%;
  }
  .topnav a {
    float: none;
    width: 100%;
  }
}