diff --git a/public/static/css/animation.css b/public/static/css/animation.css
deleted file mode 100644
index 9107963..0000000
--- a/public/static/css/animation.css
+++ /dev/null
@@ -1,99 +0,0 @@
-@charset "utf-8";
-
-.anm-rotate {
-  animation: rotate 1s infinite linear;
-}
-
-@keyframes rotate {
-  20% {
-    transform: rotate(72deg);
-  }
-  40% {
-    transform: rotate(144deg);
-  }
-  60% {
-    transform: rotate(216deg);
-  }
-  80% {
-    transform: rotate(288deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.fade-in {
-  /* animation-direction: reverse; */
-  animation: fade-in 0.2s 1 linear;
-  opacity: 0.5;
-  /* padding: 0; */
-  transform: translate(0, 0.4rem);
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0.5;
-    transform: translate(0, 0.4rem);
-    /* padding: 0.4rem 0; */
-  }
-  100% {
-    opacity: 1;
-    transform: translate(0, 0);
-    /* transform: translate(0, 0.4rem); */
-    /* padding: 0; */
-  }
-}
-
-.notification-resize {
-  animation: resize 2s 1 linear;
-  /* transform: translate(100%, 0%); */
-}
-
-@keyframes resize {
-  0% {
-    /* transform: translate(0, 0); */
-    opacity: 0;
-    transform: scale(1, 0);
-  }
-  5% {
-    /* transform: translate(0, 8rem); */
-    opacity: 0.8;
-    transform: scale(1, 1);
-  }
-  95% {
-    /* transform: translate(0, 8rem); */
-    opacity: 0.8;
-    transform: scale(1, 1);
-  }
-  100% {
-    /* transform: translate(0, 0rem); */
-    opacity: 0;
-    transform: scale(1, 0);
-  }
-}
-
-@keyframes fade {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.8;
-  }
-}
-
-.notification-cool-down {
-  animation: cooldown 0.3s 1 linear;
-}
-
-@keyframes cooldown {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.opacity-trans {
-  transition: opacity 0.15s linear;
-}
diff --git a/public/static/css/dark.css b/public/static/css/dark.css
index cc918c5..f87a00b 100644
--- a/public/static/css/dark.css
+++ b/public/static/css/dark.css
@@ -125,7 +125,7 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: rgba(20, 20, 20, 0.8);
+  background-color: rgba(40, 40, 40, 0.7);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   overflow: scroll;
@@ -156,7 +156,7 @@
   z-index: 100;
 }
 
-.theme-dark #tail {
+.theme-dark #footer {
   font-size: 1.2rem;
   text-align: center;
   margin: 4rem auto;
diff --git a/public/static/css/desktop.css b/public/static/css/desktop.css
deleted file mode 100644
index 18357e0..0000000
--- a/public/static/css/desktop.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.desktop .font-xs {
-  font-size: 1.2rem;
-  line-height: 1.8rem;
-}
-
-.desktop .font-s {
-  font-size: 1.4rem;
-  line-height: 2.1rem;
-}
-
-.desktop .font-m {
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-}
-
-.desktop .font-l {
-  font-size: 1.8rem;
-  line-height: 2.7rem;
-}
-
-.desktop .font-xl {
-  font-size: 2.0rem;
-  line-height: 3rem;
-}
diff --git a/public/static/css/style.css b/public/static/css/style.css
deleted file mode 100644
index 515fb7d..0000000
--- a/public/static/css/style.css
+++ /dev/null
@@ -1,662 +0,0 @@
-body button {
-  font-size: 1.2rem;
-  color: #697384;
-  background-color: #ecf0f6;
-}
-
-/* body input {
-  font-size: 1.2rem;
-  color: #697384;
-  background-color: #ecf0f6;
-  border: solid 1px #95a5a6;
-} */
-
-#bg {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow-y: scroll;
-}
-
-#top-bar {
-  line-height: 3rem;
-  z-index: 10;
-}
-
-.flex-list-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.flex-list-item {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.flex-list-item-l {
-  flex: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.flex-list-item-r {
-  flex: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.flex-list-container .item-name {
-  line-height: 3rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
-/* .container-center {
-  margin: 2rem auto auto auto;
-  width: 96%;
-  max-width: 80rem;
-  z-index: 9;
-} */
-
-.layouter .vcell {
-  text-align: left;
-  padding: 0.5rem 2rem;
-  border-bottom: solid 1px #e8e8e8;
-}
-
-/* #panes {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 100;
-  overflow: scroll;
-} */
-
-/* #panes .root-container {
-  max-width: 80rem;
-  width: 96%;
-  z-index: 101;
-  text-align: left;
-  margin: 3rem auto 8rem auto;
-  border-radius: 0.6rem;
-} */
-
-/* #panes .return-btn {
-  position: fixed;
-  max-width: 960px;
-  width: 96%;
-  margin: auto;
-  z-index: 101;
-  text-align: center;
-  left: 0;
-  right: 0;
-  bottom: 3rem;
-  height: 3rem;
-  border-radius: 0.6rem;
-} */
-
-#item-list {
-  margin-top: 2rem;
-}
-
-#item-list .container {
-  width: 100%;
-  color: #34495e;
-  font-size: 1.4rem;
-  /* line-height: 5rem; */
-  background-color: white;
-  border-radius: 0.8rem;
-  margin-bottom: 2rem;
-}
-
-#item-list table {
-  width: 100%;
-}
-
-#item-list tr {
-  border-top: solid 1px transparent;
-}
-
-.container .dot {
-  overflow: hidden;
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-#panes .dot {
-  overflow: hidden;
-  margin-left: 0;
-}
-
-#item-list .vbar {
-  overflow: hidden;
-  margin: 1.5rem 1rem;
-}
-
-#item-list .item-name-cell {
-  max-width: 30%;
-}
-
-#item-list .item-name-vertical {
-  width: 14rem;
-}
-
-#item-list .item-name-horizontal {
-  width: 48rem;
-}
-
-#item-list .item-name {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
-.item-name {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  display: block;
-}
-
-/* #item-list .item-op {
-  line-height: 4rem;
-} */
-
-tr button {
-  background-color: #95a5a6;
-}
-
-#item-list tr.selected button {
-  background-color: #e74c3c;
-}
-
-#item-list tr:hover {
-  opacity: 0.8;
-}
-
-#panel {
-  position: fixed;
-  top: 4rem;
-  right: 0.5rem;
-  bottom: 6rem;
-  left: 0.5rem;
-
-  width: 80%;
-  margin: auto;
-  border-radius: 1.4rem;
-  background-color: white;
-}
-#panel-head {
-  text-align: left;
-  /* box-shadow: 0 0.2rem 3rem rgba(0, 0, 0, 0.1); */
-
-  padding: 1rem 2rem 1rem 2rem;
-
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: auto;
-  left: 0;
-
-  font-size: 2rem;
-  line-height: 3.9rem;
-}
-
-#panel-head-menu {
-  text-align: right;
-
-  /* height: 3rem; */
-
-  position: absolute;
-  top: 4rem;
-  right: 0;
-  bottom: auto;
-  left: 0;
-  /* display: flex;
-  justify-content: space-between; */
-  padding: 1rem 2rem;
-  line-height: 4rem;
-  /* background-color: rgba(255, 255, 255, 0.6); */
-}
-.text-header {
-  font-size: 1.8rem;
-  font-weight: bold;
-  color: #16a085;
-  margin: auto;
-  line-height: 4rem;
-}
-#panel-body {
-  text-align: left;
-  overflow: hidden;
-
-  position: absolute;
-  top: 6rem;
-  right: 0;
-  bottom: 0.5rem;
-  left: 0;
-  /* box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1); */
-}
-#nav-bar {
-  text-align: center;
-
-  display: flex;
-  justify-content: space-between;
-  padding: 0 0 1rem 0;
-
-  position: absolute;
-  top: auto;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 5rem;
-  box-shadow: 0 -0.2rem 3rem rgba(0, 0, 0, 0.1);
-}
-.nav-bar-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.win-left-bar {
-  text-align: right;
-
-  position: absolute;
-  top: 0.5rem;
-  /* right: auto; */
-  /* bottom: 0.5rem; */
-  left: -0.5rem;
-  /* box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1); */
-}
-
-.win-right-bar {
-  text-align: left;
-
-  position: absolute;
-  top: 0.5rem;
-  /* right: auto; */
-  /* bottom: 0.5rem; */
-  right: -0.5rem;
-  /* box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.1); */
-}
-.right-bar {
-  font-size: 1.3rem;
-  line-height: 3rem;
-
-  width: 20rem;
-  position: absolute;
-  left: 2rem;
-  top: 4rem;
-}
-.link-list {
-  display: flex;
-  justify-content: space-between;
-}
-.ad-wrap {
-  padding: 0 0 1rem 0;
-  background-color: rgba(0, 0, 0, 0.1);
-  margin-bottom: 3rem;
-  text-align: center;
-}
-.ad-wrap-title {
-  line-height: 200%;
-}
-
-/* layoout */
-.flex-2col-parent {
-  display: flex;
-  justify-content: space-between;
-}
-.flex-2col {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: 50%;
-}
-.flex-23col {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: 66%;
-}
-.flex-13col {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: 31%;
-}
-.flex-col-parent {
-  display: flex;
-  justify-content: space-between;
-}
-.flex-col {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.clearfix {
-  clear: both;
-}
-.section {
-  text-align: left;
-  /* margin-bottom: 2rem; */
-  padding: 2rem;
-}
-.section-h {
-  text-align: left;
-  /* margin-bottom: 2rem; */
-  padding: 1rem 2rem;
-}
-
-.font-grey {
-  color: #999;
-}
-.margin-m {
-  margin: 0.5rem;
-}
-.margin-right-s {
-  margin-right: 0.25rem;
-}
-.margin-right-m {
-  margin-right: 0.5rem;
-}
-.margin-l {
-  margin: 1rem;
-}
-.margin-h-l {
-  margin: 1rem 0;
-}
-.margin-h-m {
-  margin: 0.8rem 0;
-}
-.margin-right-l {
-  margin-right: 1rem;
-}
-.margin-left-s {
-  margin-left: 0.25rem;
-}
-.margin-left-m {
-  margin-left: 0.5rem;
-}
-.margin-left-l {
-  margin-left: 1rem;
-}
-
-/* font */
-.bold {
-  font-weight: bold;
-}
-.weight-normal {
-  font-weight: normal;
-}
-
-.noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
-}
-.text-left {
-  text-align: left;
-}
-.text-center {
-  text-align: center;
-}
-.text-right {
-  text-align: right;
-}
-
-/* component */
-.icon-s {
-  width: 1.4rem;
-  height: 1.4rem;
-  margin: -0.2rem 0.5rem auto 0.5rem;
-  vertical-align: middle;
-}
-.btn {
-  font-size: 1.4rem;
-  line-height: 2.4rem;
-  text-align: center;
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 2rem;
-}
-.pane {
-  font-size: 1.4rem;
-  text-align: left;
-
-  overflow-x: hidden;
-  overflow-y: scroll;
-  padding: 8rem 0 10rem 0;
-
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.menu-container {
-  text-align: center;
-  margin: 2rem 0;
-}
-.menu {
-  background-color: rgba(0, 0, 0, 0.6);
-  font-size: 1.4rem;
-  line-height: 2rem;
-  text-align: center;
-  padding: 1rem 1rem;
-  display: inline-block;
-  border-radius: 4rem;
-}
-.wide-btn {
-  color: white;
-  text-align: center;
-  display: block;
-  padding: 1rem;
-  margin: 2rem 2rem 6rem 2rem;
-  border-radius: 2rem;
-}
-.border {
-  height: 1px;
-  opacity: 0.5;
-}
-.notification-container {
-  position: absolute;
-  top: 10rem;
-  right: 0;
-  bottom: auto;
-  left: 0;
-  max-height: 10rem;
-  overflow: hidden;
-  text-align: center;
-  margin: auto;
-  max-width: 48rem;
-}
-.notification {
-  /* color: white; */
-  background-color: rgba(0, 0, 0, 0.6);
-  /* font-weight: bold; */
-  font-size: 1.4rem;
-  line-height: 2rem;
-  text-align: center;
-  padding: 1rem 2rem;
-  display: inline-block;
-  border-radius: 1rem;
-  margin: 0.5rem 0.5rem;
-}
-.notification-ok {
-  color: white;
-  fill: #2ecc71;
-}
-.notification-error {
-  color: white;
-  fill: #e74c3c;
-}
-.notification-warn {
-  color: white;
-  fill: #f1c40f;
-}
-.font-size-s {
-  font-size: 1.2rem;
-}
-.font-size-m {
-  font-size: 1.4rem;
-}
-.news {
-  font-size: 1.2rem;
-  line-height: 4rem;
-
-  border-collapse: collapse;
-}
-.news .title {
-  font-size: 1.6rem;
-  line-height: 2.5rem;
-
-  display: inline-block;
-  margin-bottom: 1rem;
-}
-.news .desc {
-  font-size: 1.4rem;
-  line-height: 1.8rem;
-}
-.bottom-line {
-  padding: 3rem 0;
-  text-align: center;
-  color: #16a085;
-}
-
-select {
-  background: white;
-  border: transparent;
-  color: black;
-  font-size: 2rem;
-}
-.dot {
-  border-radius: 50%;
-  height: 0.8rem;
-  width: 0.8rem;
-  display: inline-block;
-  line-height: 3rem;
-}
-
-.vbar {
-  border-radius: 0.3rem;
-  height: 6rem;
-  width: 0.6rem;
-  display: inline-block;
-  /* line-height: 4rem; */
-}
-
-input.white-square {
-  border: solid 2px #fff;
-  background: transparent;
-  padding: 0.4rem 0.8rem;
-  color: #fff;
-}
-
-.grid {
-  display: inline-block;
-  padding: 1rem 1.5rem;
-  border-radius: 0.6rem;
-  line-height: 3rem;
-}
-
-.grid .title {
-  font-weight: bold;
-}
-
-.grid .desc {
-  font-size: 1.2rem;
-  color: #7f8c8d;
-}
-
-.grid-dot {
-  position: relative;
-  right: -1rem;
-  top: -1rem;
-}
-
-.hidden {
-  display: none;
-}
-
-div.hr {
-  height: 1px;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-/* 
-.tag {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 0.4rem;
-  line-height: 1.6rem;
-  font-weight: normal;
-  font-size: 1.4rem;
-}
-.row {
-  text-align: left;
-  padding: 1rem 0;
-} */
-
-.block {
-  display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-#tail {
-  font-size: 1.2rem;
-  text-align: center;
-  margin: 4rem auto;
-}
-
-.breadcrumb {
-  font-size: 1.4rem;
-}
-
-/* .captcha {
-  width: 14rem;
-  height: 3rem;
-  border: solid 1px #95a5a6;
-  border-radius: 0.5rem;
-} */
-
-.user {
-  font-weight: bold;
-}
-
-/* .alert-red {
-  border: dashed 1px #e74c3c;
-  color: #e74c3c;
-  border-radius: 0.5rem;
-} */
-
-.detail {
-  font-size: 1.2rem;
-  line-height: 2rem;
-  margin: 0 1rem 1rem 1rem;
-  padding: 1rem;
-  border-top: dashed 1px #7f8c8d;
-}
diff --git a/public/static/css/white.css b/public/static/css/white.css
index d5526ca..4aaa764 100644
--- a/public/static/css/white.css
+++ b/public/static/css/white.css
@@ -154,7 +154,7 @@
   z-index: 100;
 }
 
-.theme-default #tail {
+.theme-default #footer {
   font-size: 1.2rem;
   text-align: center;
   margin: 4rem auto;