/* ============================================================
   千千音乐 · 下载与帮助聚合页(第二版)
   手写样式:深底红标视觉,与原站一致的版面参数
   ------------------------------------------------------------
   目录:
     1. 基础与工具
     2. 顶栏(标志 / 导航 / 搜索 / 登录)
     3. 下载卡片区
     4. 页脚(下载 / 认识 / 关注 / 版权)
   ============================================================ */

/* ---------- 1. 基础与工具 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; font-style: normal; font-weight: 400; }

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body {
  font-size: 14px;
  min-width: 1200px;
  word-spacing: 1px;
}

/* 整页外壳:深底、浅字(原版式同款参数) */
.qq-shell { background: #1f1f1f; color: #f8f8f8; }
.qq-shell a { color: #f8f8f8; text-decoration: none; }
ul { list-style: none; }
img { border: 0; }

/* 平台/功能图标字体 */
@font-face {
  font-family: "qqicon";
  src: url("font/qqicon.woff") format("woff"),
       url("font/qqicon.ttf") format("truetype");
}
.ic {
  font-family: "qqicon" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.row { display: flex; }
.row > * { flex: 0 0 auto; }

/* ---------- 2. 顶栏 ---------- */
.site-head { box-shadow: 0 2px 10px 0 rgba(52, 52, 52, .1); }

.head-in {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.brand { display: flex; align-items: center; padding: 20px 0; width: 160px; }
.brand svg { width: 160px; height: 40px; vertical-align: middle; }

.mainnav { margin-left: 40px; display: flex; }
.mainnav li { margin: 0 13px; }
.mainnav a {
  display: block;
  height: 80px;
  line-height: 80px;
  font-size: 16px;
  color: #909399;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.mainnav a:hover { color: #e61723; border-color: #f8f8f8; }
.mainnav a.on { color: #f8f8f8; border-color: #f8f8f8; font-weight: 600; }

.head-side { margin-left: auto; display: flex; align-items: center; padding: 20px 0; }

.seekbox { position: relative; margin-right: 30px; }
.seekbox input {
  width: 320px;
  height: 40px;
  padding: 0 50px 0 15px;
  background: #000;
  border: 1px solid #000;
  border-radius: 4px;
  outline: none;
  color: #f8f8f8;
  font-size: 14px;
}
.seekbox input::placeholder { color: #606266; }
.seekbox input:hover, .seekbox input:focus { border-color: #000; }
.seekbox .ic {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #909399;
  opacity: .9;
  cursor: pointer;
}
.seekbox .ic:hover { color: #f8f8f8; }

.signin { line-height: 40px; cursor: pointer; }
.signin span { color: #909399; }

/* ---------- 3. 下载卡片区 ---------- */
.dl-stage { width: 1220px; margin: 50px auto; }

.dl-title {
  font-size: 24px;
  padding-bottom: 50px;
  padding-left: 14px;
}

.dl-row { display: flex; align-items: flex-start; }
.dl-card + .dl-card { margin-left: 100px; }

.dl-card .plat { font-size: 14px; }
.dl-card .plat .ic { padding-left: 1.1em; }

.qr-box { margin-top: 20px; }
.qr-box img { display: block; }

.dl-btn {
  display: block;
  margin-top: 100px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  background-color: #e61723;
  border-radius: 100px;
  cursor: pointer;
}

/* ---------- 4. 页脚 ---------- */
.foot-main { background: #282828; padding: 70px 0; }
.foot-in { width: 1200px; margin: 0 auto; display: flex; }
.f-col { margin-right: 54px; }
.f-title { color: #fff; font-size: 16px; margin-bottom: 25px; }

.f-tiles { display: flex; }
.f-tile { width: 100px; margin-right: 10px; text-align: center; cursor: pointer; }
.f-tile .f-icbox { background: #303133; padding: 20px 0; border-radius: 4px; margin-bottom: 8px; }
.f-tile .f-icbox .ic { font-size: 28px; color: #909399; }
.f-tile .f-txt { color: #909399; font-size: 13px; }

.f-col--about { width: 330px; }
.f-col--about li { display: inline-block; margin-right: 20px; line-height: 32px; }
.f-col--about a { color: #909399; cursor: pointer; }
.f-col--about a:hover { color: #e61723; }

.f-socs { display: flex; }
.f-soc {
  width: 130px;
  margin-right: 10px;
  padding: 18px 16px;
  background: #303133;
  border-radius: 4px;
  text-align: center;
  color: #909399;
  font-size: 13px;
  cursor: pointer;
}
.f-soc .ic { font-size: 22px; vertical-align: middle; margin-right: 6px; }

.foot-legal {
  background: #1f1f1f;
  color: #909399;
  font-size: 12px;
  padding: 20px 0;
  text-align: center;
}
.foot-legal p { margin: 8px 0; }
.foot-legal span { margin: 0 10px; }
.foot-legal a { color: #909399; }
.foot-legal a:hover { color: #e61723; }