@charset "utf-8";
* {
  padding:                     0;
  margin:                      0;
  outline:                     none;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: "Open Sans", Arial, Helvetica, Sans-Serif, serif;
  font-weight: 300;
  color:       #000;
}

html,
body {
  width:    100%;
  height:   100%;
  position: relative;
  overflow: hidden;
}
.bg {
  background: rgb(245, 249, 247) linear-gradient(180deg, rgb(245, 249, 247) 0%, rgb(210 228 218) 100%);
  width:      100%;
  height:     100%;
  z-index:    1;
}

input::-webkit-input-placeholder {
  color: #BEBFC0;
}

ul,
li {
  display:    block;
  list-style: none;

}

a {
  text-decoration: none;
  color:           #000;
}

.logo {
  position:  absolute;
  z-index:   99;
  top:       10%;
  left:      50%;
  transform: translate(-50%, -50%);
  width:     300px;
  opacity:   0.9;
}

.links {
  width:      720px;
  height:     80%;
  margin:     75px auto 15px;
  overflow:   hidden;
  overflow-y: auto;
  position:   absolute;
  top:        65%;
  left:       50%;
  transform:  translate(-50%, -50%);
  z-index:    99;
  transition: 0.3s all linear;
}

.links ul {
  width:         auto;
  float:         left;
  padding:       0 0 20px;
  margin-bottom: 20px;
}

.links ul li {
  float:       left;
  margin:      8px;
  width:       145px;
  height:      30px;
  text-align:  left;
  line-height: 30px;
}

.links ul li a {
  width:         100%;
  border-radius: 5px;
  transition:    0.2s all linear;
  height:        100%;
  display:       block;
  color:         #000;
  font-weight:   500;
  background:    rgb(255 255 255);
  text-align:    left;
  font-size:     12px;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.links ul li a i {
  margin-right: 5px;
  margin-left:  8px;
  transition:   0.2s all linear;
}

.links ul li a i.iconfont {
  font-size: 14px;
}

.links ul li:hover a {
  color:            #FFF;
  background-color: #009F4F;
  background-image: linear-gradient(135deg, #00D269 0%, #009F4F 100%);
  box-shadow:       0 3px 3px rgba(0, 40, 70, .3);
}

.links ul li:hover a i {
  color: #FFF !important;
}

.links ul li.title {
  width:       100%;
  height:      40px;
  line-height: 40px;
  margin:      5px 0 0;
  text-align:  left;
  text-indent: 10px;
  /* border-bottom: 1px dashed #dedede; */
  color:       #000;
  font-size:   18px;
}

.links ul li.title i {
  color:        #29F;
  margin-right: 5px;
  font-weight:  normal;
}
@media screen and (max-width: 768px) {
  .links {
    width: 90%;
    top: 70%;
  }
  .logo {
    width: 80%;
  }
}