/**
 * 版心 （主要内容居中的区域）
 * 情况一：一般情况直接使用 .main 类 
 * 情况二：设计图在超过版心的地方有装饰，或者背景图超过版心宽度 需要将 .main盒子放置在.main-container里面 。
 * .main-container 用于放置超过版心外的元素，比如背景，装饰等。
 */
/* .main-container{ position:relative;width: 100%;min-width: 1200px;} 
.main{ width: 1200px;margin: 0 auto;} */
    
/*标准字体大小设置为14像素*/
html {font-size: 14px;}

/**
 * 取消部分浏览器点击有阴影。
 * 优化移动端滚动事件。
 */
html,
body {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-overflow-scrolling: touch;overflow-scrolling: touch;overflow-x: hidden;}

/*移除浏览器默认的`margin、padding`*/

p,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
th,
td,
div,
pre,
body,
code,
form,
input,
legend,
button,
figure,
fieldset,
textarea,
blockquote {margin: 0;padding: 0;}

/**
 * `table`相邻单元格的边框间的距离设置为0。
 * 设置`table`的边框为合并模式。
 */

table {border-spacing: 0;border-collapse: collapse;}

/*移除浏览器部分元素的默认边框*/

img,
abbr,
input,
button,
acronym,
fieldset,
textarea {border: none;}

/*因为`input`默认不继承父元素的居中样式，所以让`input`元素继承父元素的文本居中方式*/

input {text-align: inherit;}

/*让`textarea`默认不可以放缩*/

textarea {resize: none;}

/*因为部分浏览器默认的`q`标签的前后伪元素有多余样式，所以置空`q`标签前后伪元素*/

q::before,
q::after {content: '';}


/**
 * 由于以下元素的部分属性没有继承父节点样式，所以声明这些元素的这些属性为父元素的属性。
 * 取消这些元素的`outline`样式。
 */

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    color: inherit;
    outline: none;
}


/**
 * 如果绝对定位元素，找不到被设置过定位信息的上级元素，那么这个元素就基于根节点定位，所以给`body`设置相对定位，让这些元素基于`body`定位。
 * 设置网页基本字体颜色为`#666`(深灰色)。
 * 设置网页背景颜色颜色为`#fff`（纯白色）。
 * 使字体渲染更顺滑。
 */

body {
    font: 14px 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'STHeiti Light [STXihei]', 'Microsoft Yahei', sans-serif;
    position: relative;
    color: #666;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}


/*取消下面元素的默认文字装饰（下划线、中划线）*/

a,
del,
ins {text-decoration: none;}


/*取消ol，ul默认列表样式*/

ol,
ul {list-style: none;}


/*使如下元素默认鼠标经过是`小手`的形状（一般表示可以点击）*/

button,
input[type='submit'],
input[type='button'] {cursor: pointer;}

/*取消火狐浏览器部分版本`input`聚焦的时候默认的`padding、border`*/

input::-moz-focus-inner { padding: 0;border: 0;}

/*取消部分浏览器`input[type='number']`的默认样式*/

input[type='number'] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {margin: 0;-webkit-appearance: none;}

/*输入控件的`placeholder`颜色设置为`#999`（浅灰色）*/
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {color: #999;}

input:-moz-placeholder,
textarea:-moz-placeholder {color: #999;}

input::-moz-placeholder,
textarea::-moz-placeholder {color: #999;}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder { color: #999;}
/*由于部分浏览器`template`直接显示出来，所以要隐藏`template`元素*/
template {display: none;}


/**
********************************************************************************
                                    原子类 start
********************************************************************************
*/
.theme-color {
    color: #ee3837!important;
}
/* 定位 */
.position-absolute{ position: absolute; }
.position-fixed{ position: fixed;-webkit-transform: translateZ(0); }
.position-relative{ position: relative; }
.relative-z-max { position:relative;z-index:9999 }
.z-max { z-index: 999 }
.left-0{ left: 0; }
.top-0{ top: 0; }
.bottom-0{ bottom: 0; }
.right-0{ right: 0; }
/* 宽高 */
.w-100{ width: 100%!important;}
.w-initial{ width: initial; }
.w-inherit { width: inherit; }
.w-50{ width: 50%;}
.h-100{ height: 100%;}
.h-50{ width: 50%; }
/* 行高 */
.line-h0{ line-height: 0!important; }
.line-h{ line-height: 1!important; }
.line-h-sm{ line-height: 1.2!important; }
.line-h-md{ line-height: 1.5!important; }
.line-h-lg{ line-height: 2!important; }
.line-h-big{ line-height: 3!important; }
/* 对齐 */
.line-through{ text-decoration: line-through; }
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }
/* display */
.d-flex{ display: flex; }
.d-block{ display: block; }
.d-none { display: none!important; }
.d-inline-block{ display: inline-block; }
/* flex */
.flex-1{ flex: 1; }
.flex-column{ flex-direction: column; }
.flex-row{ flex-direction: row; }
.flex-wrap{ flex-wrap: wrap; }
.flex-nowrap{ flex-wrap: nowrap; }
.flex-shfrink{flex-shrink: 0;}
.j-start{ justify-content: flex-start; }
.j-center{ justify-content: center; }
.j-end{ justify-content: flex-end; }
.j-sb{ justify-content: space-between; }
.j-around{ justify-content: space-around;}
.j-evenly { justify-content: space-evenly }
.a-center{ align-items:center; }
.a-baseline { align-items: baseline; }
.a-start{ align-items: flex-start; }
.a-end{ align-items:flex-end; }
.a-stretch{ align-items: stretch; }
.a-self-start{ align-self: flex-start; }
.a-self-auto{ align-self: auto; }
.a-self-end{ align-self: flex-end; }
.a-self-stretch{ align-self:stretch; }
.a-self-baseline{ align-self:baseline; }
.r-reverse{flex-direction: row-reverse;}
/* overflow */
.overflow-hidden { overflow: hidden; }
.overflow-line-1 { display: -webkit-box;overflow: hidden;text-overflow: ellipsis; -webkit-line-clamp:1;-webkit-box-orient: vertical;}
.overflow-line-2 { display: -webkit-box;overflow: hidden;text-overflow: ellipsis; -webkit-line-clamp:2;-webkit-box-orient: vertical;}
.overflow-line-3 { display: -webkit-box;overflow: hidden;text-overflow: ellipsis; -webkit-line-clamp:3;-webkit-box-orient: vertical;}
.overflow-scroll-y { overflow-y: scroll; }
.overflow-scroll-x { overflow-x: scroll; }
/* float */
.fl { float: left; }
.fr { float: right; }
/* 清除浮动 */
.clearFloat {zoom: 1;}
.clearFloat::after {display: block;visibility: hidden;clear: both;height: 0;content: '.';}
/* opaticy */
.op-1  {opacity: 1;}
.op-05 { opacity: .5; }
/* font */
.text-del{ text-decoration:line-through }
/*利用绝对定位宽高拉升原理，中心居中元素，原子类*/
.middle{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
/*利用相对定位于`CSS3`使元素垂直居中，原子类*/
.middle-y {position: relative;top: 50%;-webkit-transform: -webkit-translateY(-50%);-moz-transform: -moz-translateY(-50%);-o-transform: -o-translateY(-50%);transform: translateY(-50%);}
/**
********************************************************************************
                                    原子类 end
********************************************************************************
*/