* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  /* 触摸屏设置 */
  touch-action: none;
}

body {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #111;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  flex-direction: column;
}

/* 拖拽容器和旋转容器样式 */
#drag-container,
#spin-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-10deg);
  transform: rotateX(-10deg);
}

/* 图片和视频样式 */
#drag-container img,
#drag-container video {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  -webkit-box-shadow: 0 0 8px #fff;
  box-shadow: 0 0 8px #fff;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}

/* 悬停效果 */
#drag-container img:hover,
#drag-container video:hover {
  -webkit-box-shadow: 0 0 15px #fffd;
  box-shadow: 0 0 15px #fffd;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}

/* 中心文本样式 */
#drag-container p {
  font-family: Serif;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(90deg);
  transform: translate(-50%, -50%) rotateX(90deg);
  color: #fff;
}

/* 地面样式 */
#ground {
  width: 900px;
  height: 900px;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateX(90deg);
  transform: translate(-50%, -50%) rotateX(90deg);
  background: -webkit-radial-gradient(center center,
      farthest-side,
      #9993,
      transparent);
}

/* 音乐播放器容器样式 */
#music-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin-bottom: 60px;
}

/* 旋转动画 */
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

/* 反向旋转动画 */
@-webkit-keyframes spinRevert {
  from {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }

  to {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

@keyframes spinRevert {
  from {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }

  to {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

/* 页脚样式 */
.footer-container {
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
  position: relative;
  z-index: 9999;
  background-color: #111;
  width: 100%;
}

/* ICP备案链接样式 */
.icp-link {
  color: #939393;
  font-size: 10px;
  display: block;
  margin-top: 10px;
  text-decoration: none;
  position: relative;
  z-index: 9999;
}

.icp-link:hover {
  color: #666;
}

/* 公安备案样式 */
.security-registration {
  display: inline-block;
  margin-top: 10px;
  position: relative;
  z-index: 9999;
}

.security-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 10px;
  height: 20px;
  line-height: 20px;
}

.security-link:hover {
  opacity: 0.8;
}

.security-link img {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

.security-link p {
  color: #939393;
  margin: 0;
}