/*1。在所有浏览器中纠正行高。*
2。防止在iOS中改变方向后调整字体大小。*/
html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/* 在所有浏览器中删除边距。*/

* {
    margin: 0;
}

/*在IE中始终呈现“main”元素*/

main {
    display: block;
}

/**
    更正“section”和“h1”元素的字体大小和边距。
    `文章的上下文在Chrome, Firefox和Safari。
 */

/* h1 {
    font-size: 2em;
    margin: 0.67em 0;
} */

/* h1不加粗 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    color: #fff;
}

/**
   * 1. 在Firefox中添加正确的框大小。
   * 2. 在Edge和IE中显示溢出。
   */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
   * 1. 纠正所有浏览器中字体大小的继承和缩放。
   * 2. 纠正所有浏览器中奇怪的' em '字体大小。
   */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
   * 移除IE 10中活动链接的灰色背景。
   */

a {
    background-color: transparent;
}

/**
   * 1. 删除底部边界在Chrome 57-
   * 2. 在Chrome、Edge、IE、Opera和Safari中添加正确的文本装饰。
   */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

/*   在Chrome、Edge和Safari中添加正确的字体粗细。      */

b,
strong {
    font-weight: bolder;
}

/**
   * 1. 纠正所有浏览器中字体大小的继承和缩放。
   * 2. 纠正所有浏览器中奇怪的' em '字体大小。
   */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/** 在所有浏览器中添加正确的字体大小。*/

small {
    font-size: 80%;
}

/**
   * 防止' sub '和' sup '元素影响中的行高
   * 所有的浏览器。
   */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*在ie10中删除链接内图像的边框。 */

img {
    border-style: none;
}

/**
   * 1. 更改所有浏览器中的字体样式。
   * 2. 删除Firefox和Safari中的空白。
   */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
   * 显示IE溢出。
   * 1. 在Edge中显示溢出。
   */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
   * 删除Edge、Firefox和IE中文本转换的继承。
   * 1.删除Firefox中文本转换的继承。
   */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
   *修正iOS和Safari中无法设置可点击类型的错误。
   */

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
   * 在Firefox中删除内边框和填充。
   */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
   * 恢复先前规则未设置的焦点样式。
   */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
   *修正Firefox中的填充。
   */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
* 1。修正Edge和IE中的文本换行。
* 2。修正IE中“fieldset”元素的颜色继承。
* 3。删除填充，这样开发人员在归零时就不会被发现
*所有浏览器中的“fieldset”元素。
   */

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
  *在Chrome, Firefox和Opera中添加正确的垂直对齐。
   */

progress {
    vertical-align: baseline;
}

/**
 移除ie10 +中默认的垂直滚动条。
   */

textarea {
    overflow: auto;
}

/**
  * 1。在IE 10中添加正确的框尺寸。
* 2。删除IE 10中的填充。
   */

[type='checkbox'],
[type='radio'] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
   修正了Chrome中增加和减少按钮的光标样式。
   */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
    height: auto;
}

/**
   * 1。修正Chrome和Safari浏览器中奇怪的外观。
* 2。修正Safari中的轮廓样式。
   */

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
   *在macOS上删除Chrome和Safari的内填充。
   */

[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
   * 1。修正iOS和Safari中无法设置可点击类型的错误。
* 2。在Safari中将字体属性更改为“inherit”。
   */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/*
   *在Edge、IE 10+和Firefox中添加正确的显示。
   */

details {
    display: block;
}

/*
  *在所有浏览器中添加正确的显示。
   */

summary {
    display: list-item;
}

/**
   *在IE 10+中添加正确的显示。
   */

template {
    display: none;
}

/**
   *在IE 10+中添加正确的显示。
   */

[hidden] {
    display: none;
}

/*
----------------------------------------------------- 初始化（二）-----------------------------------------------------------------
 */

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    border-radius: 3px;
    /* css3盒子模型 */
    box-sizing: border-box;
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal;
}

/* 去掉li 的小圆点 */
li {
    list-style: none;
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer;
}

/* 移除下划线 */
a {
    text-decoration: none;
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, '\5B8B\4F53',
        sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0;
    outline: none;
}



/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: '.';
    height: 0;
}

.clearfix {
    *zoom: 1;
}