[id^=nav] {
  display: inline-block;
  width: 21vw;
  margin-top: 1vw;
  background-size: cover;
  transition: 0.4s ease-out;
}
[id^=nav] {
  height: 28vw;
}
[id^=nav] {
  height: 7vw;
}

#nav-main-record {
  background-image: url(../image/nav/main/record/out.png);
}
#nav-main-record:hover {
  background-image: url(../image/nav/main/record/hover.png);
}
#nav-main-record.selected {
  background-image: url(../image/nav/main/record/selected.png);
}

#nav-main-statistics {
  background-image: url(../image/nav/main/statistics/out.png);
}
#nav-main-statistics:hover {
  background-image: url(../image/nav/main/statistics/hover.png);
}
#nav-main-statistics.selected {
  background-image: url(../image/nav/main/statistics/selected.png);
}

#nav-sub-income {
  background-image: url(../image/nav/sub/income/out.png);
}
#nav-sub-income:hover {
  background-image: url(../image/nav/sub/income/hover.png);
}
#nav-sub-income.selected {
  background-image: url(../image/nav/sub/income/selected.png);
}

#nav-sub-expenses {
  background-image: url(../image/nav/sub/expenses/out.png);
}
#nav-sub-expenses:hover {
  background-image: url(../image/nav/sub/expenses/hover.png);
}
#nav-sub-expenses.selected {
  background-image: url(../image/nav/sub/expenses/selected.png);
}

#nav-sub-transition {
  background-image: url(../image/nav/sub/transition/out.png);
}
#nav-sub-transition:hover {
  background-image: url(../image/nav/sub/transition/hover.png);
}
#nav-sub-transition.selected {
  background-image: url(../image/nav/sub/transition/selected.png);
}

#nav-sub-search {
  background-image: url(../image/nav/sub/search/out.png);
}
#nav-sub-search:hover {
  background-image: url(../image/nav/sub/search/hover.png);
}
#nav-sub-search.selected {
  background-image: url(../image/nav/sub/search/selected.png);
}