body {
  min-height: 100vh;}
.container {
  height: 100vh;
  position: relative;}
.container .home-loading {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  display: block;}
.container .home-loading img {
  display: block;
  margin: 0 auto;}
.container .home-loading img:nth-of-type(1) {
  width: 374px;}
.container .home-loading img:nth-of-type(2) {
  animation: arrow_effect 1s 4s infinite ease-in-out;
  -moz-animation: arrow_effect 1s 4s infinite ease-in-out;
  /* firefox */
  -webkit-animation: arrow_effect 1s 4s infinite ease-in-out;
  /* safari 和 chrome */
  -o-animation: arrow_effect 1s 4s infinite ease-in-out;
  /* opera */
  position: relative;
  width: 47px;
  margin-top: 83px;
  opacity: 0;
  filter: "alpha(opacity= 0)";}
.container .other-link {
  position: absolute;
  left: 52%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;}
.container .other-link li {
  transition: all .3s;
  -webkit-transition: all .3s;
  position: relative;
  top: 15px;
  width: 190px;
  border: 2px dotted #afafaf;
  margin: 0 10px;
  border-radius: 8px;
  opacity: 0;}
.container .other-link li a {
  transition: background .3s;
  -webkit-transition: background .3s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 9px 0;
  border-radius: 8px;}
.container .other-link li a img {
  display: block;
  width: 61px;
  margin-right: 25px;}
.container .other-link li a img.link-icon {
  display: block;}
.container .other-link li a img.link-icon-dj {
  display: none;}
.container .other-link li a span {
  transition: color .3s;
  -webkit-transition: color .3s;
  display: block;
  font-size: 16px;
  color: #4d4c4c;}
.container .other-link li:nth-of-type(1) {
  -webkit-transition-delay: 0;
          transition-delay: 0;}
.container .other-link li:nth-of-type(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;}
.container .other-link li:nth-of-type(3) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;}
.container .other-link li:nth-of-type(4) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;}
.container .other-link li:hover a {
  background: #4d4c4c;}
.container .other-link li:hover a img.link-icon {
  display: none;}
.container .other-link li:hover a img.link-icon-dj {
  display: block;}
.container .other-link li:hover a span {
  color: #fff;}
.container .other-link li.active {
  top: 0;
  opacity: 1;}
@keyframes arrow_effect {
  0% {
    left: -10px;
    opacity: 1;
    filter: "alpha(opacity= 100)";}
  100% {
    left: 10px;
    opacity: 0;
    filter: "alpha(opacity= 0)";}
}
@-webkit-keyframes arrow_effect {
  /* safari 和 chrome */
  from {
    left: 0;}
  to {
    left: 10px;}
}