@charset "utf-8";

.header {
  background-color: rgb(126, 206, 244);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 960px;
  height: 300px;
  z-index: 6;
}

.navi {
  background-color: rgb(83, 83, 83);
  position: absolute;
  left: 0px;
  top: 300px;
  width: 960px;
  height: 60px;
  z-index: 5;
}

.main {
  background-color: rgb(255, 247, 153);
  position: absolute;
  left: 0px;
  top: 360px;
  width: 760px;
  height: 740px;
  z-index: 4;
}

.side {
  background-color: rgb(0, 158, 150);
  position: absolute;
  left: 760px;
  top: 360px;
  width: 200px;
  height: 740px;
  z-index: 3;
}

.footer {
  background-color: rgb(220, 220, 220);
  position: absolute;
  left: 0px;
  top: 1100px;
  width: 960px;
  height: 100px;
  z-index: 2;
}

.article1 {
  border-width: 2px;
  border-color: rgb(160, 160, 160);
  border-style: solid;
  border-radius: 10px;
  background-color: rgb(238, 238, 238);
  position: absolute;
  left: 10px;
  top: 410px;
  width: 736px;
  height: 196px;
  z-index: 9;
}

.article2 {
  border-width: 2px;
  border-color: rgb(160, 160, 160);
  border-style: solid;
  border-radius: 10px;
  background-color: rgb(238, 238, 238);
  position: absolute;
  left: 10px;
  top: 640px;
  width: 736px;
  height: 196px;
  z-index: 8;
}
.article3 {
  border-width: 2px;
  border-color: rgb(160, 160, 160);
  border-style: solid;
  border-radius: 10px;
  background-color: rgb(238, 238, 238);
  position: absolute;
  left: 10px;
  top: 870px;
  width: 736px;
  height: 196px;
  z-index: 7;
}

.topics1 {
  border-radius: 10px;
  background-color: rgb(204, 225, 152);
  position: absolute;
  left: 770px;
  top: 410px;
  width: 180px;
  height: 200px;
  z-index: 12;
}

.topics2 {
  border-radius: 10px;
  background-color: rgb(204, 225, 152);
  position: absolute;
  left: 770px;
  top: 640px;
  width: 180px;
  height: 200px;
  z-index: 11;
}

.topics3 {
  border-radius: 10px;
  background-color: rgb(204, 225, 152);
  position: absolute;
  left: 770px;
  top: 870px;
  width: 180px;
  height: 200px;
  z-index: 10;
}
