.bottomLine {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.9);
  font: 100 12px/40px '微软雅黑';
}
.bottomLine .leftIcon {
  float: left;
  height: 100%;
}
.bottomLine .rightIcon {
  float: right;
  height: 100%;
  display: flex;
}
.bottomLine .item {
  padding: 0 10px;
  height: 40px;
  float: left;
  text-align: center;
}
.bottomLine .item:hover {
  background: rgba(10, 79, 106, 0.3);
}
.bottomLine .logo {
  color: #fff;
}
.bottomLine .logo svg {
  width: 20px;
  margin-top: 8px;
}
.bottomLine .icon {
  float: left;
  width: 30px;
  height: 30px;
  margin: 5px;
  background: url("../img/deskIconSm.png") no-repeat;
}
.bottomLine .icon.qqMusic {
  background-position: -60px 0;
}
.bottomLine .time {
  padding: 0 5px;
  color: #fff;
  letter-spacing: 2px;
  margin-right: 5px;
  cursor: pointer;
}
.bottomLine .time:hover {
  background: rgba(73, 182, 190, 0.3);
}
.bottomLine .dateList {
  width: 360px;
  background: rgba(0, 0, 0, 0.3) url("../img/wallhaven.jpg") no-repeat fixed;
  margin-top: 100px;
  margin-left: 300px;
  position: absolute;
  right: -360px;
  bottom: 40px;
  transition: 1s;
}
.bottomLine .dateList.active {
  right: 0;
}
.bottomLine .dateList .topBox {
  height: 93px;
  border: 1px solid #6a6a6a;
  padding-top: 19px;
  padding-left: 24px;
}
.bottomLine .dateList .topBox .time {
  height: 49px;
  font: 100 44px/49px '微软雅黑';
  color: #fff;
}
.bottomLine .dateList .topBox .date {
  height: 29px;
  font: 200 14px/29px '微软雅黑';
  color: #48d2f2;
}
.bottomLine .dateList .listBox {
  padding: 7px 13px;
  position: relative;
}
.bottomLine .dateList .listBox .listTitle {
  height: 39px;
  padding-left: 11px;
  font: 100 14px/39px '微软雅黑';
  color: #fff;
}
.bottomLine .dateList .listBox .day {
  height: 39px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 39px;
  grid-gap: 2px;
  text-align: center;
  font: 14px/39px '微软雅黑';
  color: #fff;
}
.bottomLine .dateList .listBox .main {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 40px);
  grid-gap: 2px;
  text-align: center;
  font: 16px/36px '微软雅黑';
  color: #fff;
  position: relative;
  z-index: 2;
}
.bottomLine .dateList .listBox .main span {
  border: 2px solid transparent;
}
.bottomLine .dateList .listBox .main span.prev {
  border: 2px solid transparent;
  color: #777;
}
.bottomLine .dateList .listBox .main span.next {
  border: 2px solid transparent;
  color: #777;
}
.bottomLine .dateList .listBox .main span:hover {
  background: #525252;
  border: 2px solid #bbb;
}
.bottomLine .dateList .listBox .main span:active {
  background: #666;
}
.bottomLine .dateList .listBox .main span.now {
  background: #0099bc;
  border: 2px solid #0099bc;
  box-shadow: inset 0 0 0 2px #000;
}
.bottomLine .dateList .listBox .main span.nowAct {
  background: #0099bc;
  border: 2px solid #0099bc;
}
.bottomLine .dateList .listBox .main span.active {
  border: 2px solid #0099bc;
}
.bottomLine .dateList .listBox .main span.now:hover {
  border-color: #00b6df;
}
.bottomLine .dateList .listBox .main span.nowAct:hover {
  border-color: #00b6df;
}
.bottomLine .dateList .listBox .main span.active:hover {
  border-color: #00b6df;
}
.bottomLine .dateList .listBox .markBox {
  width: 334px;
  height: 250px;
  -webkit-mask: url('../img/mark.png') no-repeat;
  position: absolute;
  top: 85px;
  background: url("../img/mark_bg.png") no-repeat -150px -150px;
}
.bottomLine .dateList .nextBtn,
.bottomLine .dateList .prevBtn {
  position: absolute;
  padding: 0 10px;
}
.bottomLine .dateList .nextBtn {
  left: 300px;
}
.bottomLine .dateList .prevBtn {
  left: 260px;
}
.bottomLine .dateList .nextBtn svg,
.bottomLine .dateList .prevBtn svg {
  color: #fff;
  width: 20px;
}
.bottomLine .backDesk {
  width: 4px;
  height: 100%;
  border-left: 1px solid #ddd;
  float: right;
}
.bottomLine .backDesk:hover {
  background: rgba(255, 255, 255, 0.1);
}
/*# sourceMappingURL=bottomLine.css.map */