/*
 * 法律文档公用样式
 *
 * 四份文档共用这一份，改正文的时候不用碰样式。
 *
 * 白底黑字，不跟官网首页那套配色走：这几页的唯一任务是让人把几百上千字读完，
 * 底色、插图、品牌色在这里都只会分散注意力。同一份页面官网直接打开和小程序
 * web-view 里打开都是它，所以既要能在 PC 上限宽居中，也要在手机上铺满。
 *
 * 不引外部字体、不引 JS：协议是断网也该能读的东西，web-view 里每多一个外部
 * 请求就多一次白屏的机会。
 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 28px 20px 56px;
  background: #ffffff;
  color: #1f1f1f;
  font-size: 16px;
  line-height: 1.75;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.doc {
  max-width: 760px;
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

/* 生效日期 */
.meta {
  margin-top: 10px;
  font-size: 14px;
  color: #767676;
}

/* 制定主体，压在标题区下沿 */
.who {
  margin: 16px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #e4e4e4;
  font-size: 14px;
  color: #767676;
}

section {
  padding-top: 26px;
}

h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

/*
 * 行高比正文更松：这是用户唯一需要连续读几百字的地方，
 * 移动端长文的可读性几乎全靠行距和段距。
 */
p {
  margin: 12px 0 0;
  line-height: 1.85;
  color: #333333;
}

/* 开头的「一句话说明」，给一点底色让人愿意先读它 */
.lead {
  margin-top: 22px;
  padding: 16px 18px;
  background: #f5f5f5;
  border-radius: 8px;
}

.lead p {
  margin: 0;
  color: #1f1f1f;
}

ol,
ul {
  margin: 12px 0 0;
  padding-left: 22px;
  line-height: 1.85;
  color: #333333;
}

li {
  margin-top: 6px;
}

strong {
  color: #1f1f1f;
  font-weight: 600;
}

/*
 * 敏感个人信息：加粗 + 下划线
 *
 * 个人信息保护法要求处理敏感个人信息时以显著方式单独告知，行业通行做法就是这套
 * 「加粗、下划线」。姓名、身份证号、手机号在正文里出现时一律套这个类，并且要在
 * 文首说明「我们用加粗下划线标注敏感个人信息」，否则标了也起不到提示作用。
 */
.sensitive {
  font-weight: 600;
  color: #1f1f1f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 免责、责任限制、争议解决这类对用户不利的条款，法律上同样要求显著提示 */
.important {
  font-weight: 600;
  color: #1f1f1f;
}

a {
  color: #1a6b3c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 第三方供应商清单 */
table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.6;
}

th,
td {
  padding: 10px 8px;
  border: 1px solid #d8e3ea;
  text-align: left;
  vertical-align: top;
  word-break: break-all;
}

th {
  background: #eaf3f8;
  color: #1f1f1f;
  font-weight: 600;
  white-space: nowrap;
}

td {
  color: #333333;
}

/* 表格底下那行小字注解 */
.table-note {
  margin-top: 8px;
  font-size: 13px;
  color: #767676;
}

/* 授权书末尾的确认声明 */
.sign {
  margin-top: 30px;
  padding: 18px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  font-size: 15px;
  color: #333333;
}

.sign p {
  font-size: 15px;
}

.sign p:first-child {
  margin-top: 0;
}

/*
 * 待填占位
 *
 * 黄底是故意扎眼的。上线前全局搜 class="fill"，搜不到才算填完。
 */
.fill {
  padding: 1px 6px;
  background: #fff3c4;
  border-radius: 3px;
  color: #7a5b00;
  font-style: normal;
}

footer {
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 18px;
  border-top: 1px solid #e4e4e4;
  font-size: 13px;
  color: #767676;
}

footer a {
  color: #767676;
}

@media (max-width: 480px) {
  body {
    padding: 22px 16px 48px;
    font-size: 15px;
  }

  h1 {
    font-size: 21px;
  }

  h2 {
    font-size: 17px;
  }
}