@font-face {
  font-family: 'Prompt-Light';
  src: url(/fonts/Prompt/Prompt-Light.ttf);
}
html,
body {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Prompt-Light', sans-serif;
}

a {
  cursor: pointer;
  text-decoration: none !important;
}

hr {
  display: inline-block;
  width: 100%;
  border-top: 2px solid #eee;
}

.management {
  padding: 60px 0px;
  height: auto;
  width: 100%;
}

.management-card {
  width: 50%;
  height: 150px !important;
  background: #fff;
  display: table;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  transition: .5s;
  border-radius: 5px;
  margin-bottom: 20px;
}
.management-card:hover {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
  background: #337ab7;
}
.management-card > a {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 2.5em;
  display: table-cell;
  vertical-align: middle;
  transition: .5s;
}
.management-card > a:hover {
  text-decoration: none;
  color: #FFF;
}

.management-user {
  border-bottom: 2px solid #eee;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.news-card {
  width: 100%;
  min-height: 100px;
  background: #fff;
  display: table;
  box-shadow: 3px 3px 10px rgba(140, 140, 140, 0.2);
  transition: .5s;
  margin-bottom: 20px;
}
.news-card:hover {
  box-shadow: 3px 3px 50px rgba(140, 140, 140, 0.2);
}

.news-title {
  margin-top: 0;
  color: #fff;
  background: #34495e;
  padding: 15px;
  margin-bottom: 0;
}

.news-content {
  text-indent: 30px;
  padding: 15px;
}

.banner-card {
  position: relative;
  display: block;
  z-index: 1;
  text-align: center;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
}

.header-content {
  height: 10%;
  background-color: rgba(249, 242, 242, 0.5);
  position: absolute;
  z-index: 1;
  width: 100%;
}
.header-content .management-logo {
  position: absolute;
  top: 30%;
  left: 2%;
  width: 20rem;
}
.header-content .management-logo > img {
  width: 80%;
}
.header-content .management-user-profile {
  display: table;
  position: absolute;
  top: 45%;
  right: 20rem;
  transform: translateY(-50%);
}
.header-content .management-user-profile > img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.header-content .management-user-profile > span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
  font-size: 1.6em;
  color: #555;
}
.header-content .management-user-logout {
  background: #f36868;
  padding: 8px 20px;
  position: absolute;
  right: 2%;
  top: 45%;
  transform: translateY(-50%);
  box-shadow: 0px 3px 10px rgba(243, 104, 104, 0.4);
  border-radius: 30px;
  transition: .5s;
  color: #fff;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.container .left,
.container .right {
  height: 100%;
  font-family: sans-serif;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
  background-size: 100%;
}
.container .left > a,
.container .right > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.container .left > a > .images-vector-box,
.container .right > a > .images-vector-box {
  position: relative;
  width: 450px;
  height: 450px;
}
@media (max-height: 680px) {
  .container .left > a > .images-vector-box,
  .container .right > a > .images-vector-box {
    margin-bottom: -2rem;
    width: 250px;
    height: 250px;
  }
}
@media (max-height: 444px) {
  .container .left > a > .images-vector-box,
  .container .right > a > .images-vector-box {
    width: 200px;
    height: 200px;
  }
}
.container .left .system-header,
.container .right .system-header {
  transition: color 0.5s ease-out;
  font-size: 4em;
}
.container .left .system-detail,
.container .right .system-detail {
  font-size: 1.2em;
  width: 80%;
  text-align: center;
}
.container .left {
  background-color: #f3cd3d;
}
.container .left > a {
  color: #0f304e;
}
.container .left > a > .images-vector-box > .vector-circle {
  background-color: #f8df7b;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container .left > a > .images-vector-box > .vector-notebook {
  position: absolute;
  width: 63%;
  bottom: 26%;
  right: 19%;
}
.container .left > a > .images-vector-box > .vector-backdetail {
  position: absolute;
  width: 85%;
  top: 10%;
  left: 7%;
}
.container .left > a > .images-vector-box > .vector-store {
  position: absolute;
  width: 35%;
  top: 26%;
  left: 32%;
}
.container .left > a > .images-vector-box > .vector-inbox {
  position: absolute;
  width: 17%;
  top: 6%;
  left: 37%;
}
.container .left > a > .images-vector-box > .vector-cradit-card {
  position: absolute;
  width: 13%;
  top: 28%;
  right: 0;
}
.container .left:hover .vector-store {
  animation: store_zoom 1s linear;
}
.container .left:hover .vector-inbox {
  animation: inbox_shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
}
.container .left:hover .vector-cradit-card {
  animation: cradit_card_floating 3s linear infinite;
}
.container .right {
  background-color: #19b6db;
}
.container .right > a {
  color: #fff;
}
.container .right > a > .images-vector-box > .vector-circle {
  background-color: #52e1f8;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container .right > a > .images-vector-box > .vector-clound {
  position: absolute;
  width: 43%;
  top: 6%;
  left: 11.5%;
}
.container .right > a > .images-vector-box > .vector-notebook {
  position: absolute;
  width: 75%;
  bottom: 20%;
  right: 11%;
}
.container .right > a > .images-vector-box > .vector-display-notebook {
  position: absolute;
  width: 65%;
  top: 25%;
  left: 5%;
}
.container .right > a > .images-vector-box > .vector-clipboard {
  position: absolute;
  right: 8%;
  bottom: 28%;
  width: 20%;
}
.container .right > a > .images-vector-box > .vector-cog {
  position: absolute;
  right: 13%;
  top: 10%;
  width: 20%;
}
.container .right > a > .images-vector-box > .vector-cog-mini {
  position: absolute;
  right: 33%;
  top: 10%;
  width: 13%;
}
.container .right:hover .vector-clipboard {
  animation: clipboard_floating 3s linear infinite;
}
.container .right:hover .vector-cog {
  animation: cog_rotate 2s linear infinite;
}
.container .right:hover .vector-cog-mini {
  animation: cog_mini_rotate 2s linear infinite;
}

@keyframes cog_rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes cog_mini_rotate {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes clipboard_floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes store_zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes inbox_shake {
  10%,
    90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
    80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
    50%,
    70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
    60% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes cradit_card_floating {
  0% {
    right: 0%;
  }
  30% {
    right: 5%;
  }
  50% {
    top: 30%;
  }
  80% {
    right: 0%;
  }
  100% {
    top: 28%;
  }
}