/* 这里存放的是底部样式 */

.footer {
  height: 326px;
  box-sizing: border-box;
  border-top: 1px solid #d3d3d3;
  background-color: #f2f2f2;
}

.footer .area {
  margin-top: 33px;
}

/* ----------------- 数据 ----------------- */

/* ul */
.footer .area .list {
  display: flex;
  /* flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半 */
  /* justify-content: space-around; */

  /* flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离 */
  justify-content: space-around;
}

/* li */
.footer .list .item {
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

/* a */
.footer .item .logo {
  display: block;
  width: 45px;
  height: 45px;
  /* margin: 0 auto; */
  /* margin-bottom: 15px; */
  /* 间写 */
  margin: 0 auto 15px;
  background: url(../images/footer_sprite.png) no-repeat;
  background-size: 220px 220px;
}

.footer .item:first-child .logo {
  background-position: -170px -5px;
}

.footer .item:first-child .logo:hover {
  background-position: -5px -115px;
}

.footer .item:nth-child(2) .logo {
  background-position: -5px -170px;
}

.footer .item:nth-child(2) .logo:hover {
  background-position: -60px -170px;
}

.footer .item:nth-child(3) .logo {
  background-position: -5px -60px;

}

.footer .item:nth-child(3) .logo:hover {
  background-position: -60px -5px;

}

.footer .item:nth-child(4) .logo {
  background: url(../images/xStudio.png) no-repeat;
  background-size: 45px;
}

.footer .item:nth-child(4) .logo:hover {
  background: url(../images/xStudio2.png) no-repeat;
  background-size: 45px;
}

.footer .item:nth-child(5) .logo {
  background-position: -60px -60px;

}

.footer .item:nth-child(5) .logo:hover {
  background-position: -115px -5px;
}

.footer .item:nth-child(6) .logo {
  background-position: -115px -115px;

}

.footer .item:nth-child(6) .logo:hover {
  background-position: -5px -5px;

}

.footer .item:nth-child(7) .logo {
  background: url(../images/xStudio3.png) no-repeat;
  background-size: 45px;
}

.footer .item:nth-child(7) .logo:hover {
  background: url(../images/xStudio4.png) no-repeat;
  background-size: 45px;
}


.footer .item:nth-child(8) .logo {
  background-position: -170px -115px;
}

.footer .item:nth-child(8) .logo:hover {
  background-position: -60px -115px;
}


/* ----------------- /数据 ----------------- */


/* ----------------- 版权 ----------------- */
.footer .area .copy {
  padding-top: 60px;
  margin: 0 auto;
  line-height: 24px;
}

/* ul */
.footer .area .copy .list {
  display: flex;
  justify-content: center;
}

/* "|" */
.footer .copy .list .line {
  margin: 0 8px;
  color: #d9d9d9;
}

/* a */
.footer .copy .list .item {
  color: #666;
}

.footer .copy .list .item:hover {
  /* 下划线 */
  text-decoration: underline;
}

.footer .copy .right {
  display: flex;
  justify-content: center;
  color: #666;
}

.footer .copy .right a {
  color: #666;
}

.footer .copy .right a:hover {
  text-decoration: underline;
}

.footer .copy .right .move {
  margin: 0 10px;
}

.footer .copy .right .item .police-logo {
  position: relative;
  top: 3px;
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(../images/police.png) no-repeat;
  background-size: cover;
}


/* ----------------- /版权 ----------------- */