* {
  margin : 0;
  padding: 0;
}
body{background:#0c0c0c;}
body,
html {
  width   : 100%;
  height  : 100%;
  color   : #fff;
  overflow: hidden;
}

body {
 
  
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width           : 8px;
  height          : 8px;
  border-radius   : 10px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius     : 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color  : #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius     : 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  border-radius     : 10px;
  /* 线性渐变 */
  background-image  : -webkit-gradient(linear,
      left bottom, right top,
      color-stop(0.44, #899),
      color-stop(0.72, #899),
      color-stop(0.86, #899));
  transition: 0.3s ease-in-out;
}

/*定义滑块悬浮样式*/
::-webkit-scrollbar-thumb:hover {
  background-image: -webkit-gradient(linear,
      left bottom, left top,
      color-stop(0.44, #899),
      olor-stop(0.72, #899),
      color-stop(0.86, #899));
  transition: 0.3s ease-in-out;
}

.iShow {
  cursor               : pointer;
  position             : absolute;
  z-index              : 8888;
  top                  : -200px;
  right                : 40px;
  border               : 1px solid #0c0c0c;
  background-color     : #0c0c0c;
  color                : #fff;
  width                : 50px;
  height               : 50px;
  line-height          : 50px;
  text-align           : center;
  border-radius        : 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius   : 50%;
  -ms-border-radius    : 50%;
  -o-border-radius     : 50%;
}

.animated {
  -webkit-animation-duration : 2s;
  animation-duration         : 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode        : both;
}

.active {
  top: 20px;
}

@keyframes mymove {
  0% {
    top: 25%;
  }

  25% {
    top: 30%;
  }

  50% {
    top: 35%;
  }

  75% {
    top: 30%;
  }

  100% {
    top: 25%;
  }
}

@keyframes mymove1 {
  0% {
    top: 60px;
  }

  25% {
    top: 260px;
  }

  50% {
    top: 460px;
  }

  75% {
    top: 260px;
  }

  100% {
    top: 60px;
  }
}

.animation {
  animation                : mymove 8s infinite;
  animation-timing-function: linear;
  -webkit-animation        : mymove 8s infinite;
}

.animation1 {
  animation                : mymove1 8s infinite;
  animation-timing-function: linear !important;
  -webkit-animation        : mymove1 8s infinite;
}

.com-right {
  position: relative;
}

.com-right .content {
  position   : absolute;
  left       : 0;
  top        : 0;
  width      : 100%;
  padding    : 20px;
  height     : 100%;
  border-left: 1px solid #ddd;

}

#wrapper {
  width : 100%;
  height: calc(100% - 64px);
}

.com-box {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  height         : 100%;padding-top: 100px;
}

.com-right {
  width : 400px;
  height: 100%;
}

.com-left {
  width : calc(100% - 400px);
  height: 100%;
}

.address {
  box-sizing: border-box;
  padding   : 20px;
}

.address span {
  margin          : 0;
  padding         : 10px;
  background-color: #0c0c0c;
  color           : #fff;
  border-radius   : 5px;
  margin-right    : 5px;
  cursor          : pointer;
}

.address .isActive {
  background-color: #0c0c0c;
  color           : #fff;
}

.address .noActive {
  color           : #fff;
  background-color: #5a6268;
}

.ul-box {
  position  : absolute;
  left      : 0;
  top       : 75px;
  list-style: none;
  width     : 100%;
  height    : 400px;
  overflow  : auto;
}

.ul-box li:first-child {
  border-top   : 1px solid #7f7f7f;
  border-radius: 5px 5px 0 0;
}

.ul-box li:last-child {
  border-radius: 5px;
  border-radius: 0 0 5px 5px;
}

.ul-box li:hover {
  color           : #fff;
  background-color: #7f7f7f;
}

.ul-box li {
  cursor          : pointer;
  width           : 100%;
  height          : 38px;
  line-height     : 38px;
  box-sizing      : border-box;
  border          : 1px solid #7f7f7f;
  border-top      : 0;
  padding         : 0 12px;
  color           : #495057;
  background-color: #fff;
  outline         : 0;
}

.form-control:focus {
  color           : #495057;
  background-color: #fff;
  border-color    : #7f7f7f;
  outline         : 0;
  box-shadow      : none;
}

.form-group {
  width     : calc(100% - 40px);
  box-sizing: border-box;
  position  : absolute;
  left      : 20px;
  top       : 60px;
}