@charset "utf-8";
/*--------------------------------------------------------------------------------------------------------------------

 --css     响应式24栅格框架系统
 --by      市场部 Sivan 2016-11-18  
 --update  v.2019-08-13（升级为24栅格）
 --24栅格，基本的栅格，去除了不常用偏移
 --文件大小 11.8 Kb

--24栅格等分，适用于分组较多，比较12栅格更能精确；
--主流分辨率：1920px、1440px、1366px（优先考虑），当前以1440px为内容宽度基准；


---栅格基本数据--------------------------------------


--设计最终是为了前端实现，因此从前端推导栅格参数更为科学。

--PC端为例，1440px等分成24个栅格
--每个栅格1/24 = 60px
--原子单位(步进单位)：8px 栅格系统的原子单位；

--1栏宽：36px 
--1槽宽（Gutter width）：24px （相邻两栏的距离,可以等分一个栏的左右每边12px，也可以只在一边24px，前端实现翻译为内边距padding）

--1列宽（Column） = 1栏宽+1槽宽（Guitter）：36+24 = 60px  (1列宽=1栏宽+1槽宽)
--1列宽占24列的百分比=1/24（共24列，占1列）= 4.166667%  （对应的前端代码是是：.c_md_1  { width: 4.166667% }）

--列宽（Col-x）步进单位：60px； 
--col-1  0.04166667   60px ；
--col-2  0.125        120px ；
--内容宽度（Container)=1440px = 60px * 24 
--内容宽度（Container）= 24列 * 60px = 36px栏宽 * 24 + 24px槽宽*24 = 1440px 

--典型HTML结构--------------------------------------

<div calss="con">
	<div class="row">
		<div class="c_xs_24 c_sm_12 c_md_10 c_lg_6">c_lg_6</div>
		<div class="c_xs_24 c_sm_12 c_md_14 c_lg_18">c_lg_18</div>
	</div>
</div>

说明：.con(container) 控制内容宽度。PC端为1440px,.row带有最有负边距，用于抵消子内部div的内边距
注意：c_xs24控制移动端，c_md_12控制992一下的屏幕，可以理解为平板，c_lg_12控制PC端，上下对应的数字之和需要等于24，
如 c_lg_6  c_lg_18，意为左右分栏前占6份（PC端下换算等于1440 * 0.6 = 360 px），后面占18份，PC端下换算等于1440 * 0.75 = 1080 px）


c_xs_x：超小屏幕（手机，小于 768px），con宽度自动

c_sm_x：小屏幕，（平板，大于等于 768px），con宽度750px

c_md_x：中等屏幕（桌面显示器，大于等于 992px）），con宽度970px

c_md_x：大屏幕（大桌面显示器，大于等于 1200px），con宽度1170px


--字体层级--------------------------------------

--h1:48 px
--h2:36 px
--h3:30 px
--h4:24 px
--h4:24 px
--h5:18 px 
--h6:16 px
--p:14 px
--p:12 px

(与PS字体大小层级一致)

---------------------------------------------------------------------------------------------------------------------*/

/* 超小屏幕（手机，小于 768px） */
@media (min-width: @screen-xs-min) { ... }
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }


/*-重定义浏览器默认样式-*/

div, dl, dt, dd, ul, ol, li, form, input, table, tbody, tr, th, em, input, img {
	margin: 0;
	padding: 0;
	
}

body {
margin: 0;
padding: 0;
border: none;
font: 14px/1.5 "Helvetica",Arial,"Microsoft Yahei",sans-serif;
color: #1c2029;
background-color: #FFF;
max-width: 2560px;
max-width: 25.60rem;
margin: 0 auto;
}

a { color: #1c2029; text-decoration: none }
a:active, a:focus {
	outline: 0;
	text-decoration: none
}
a:active, a:focus {
	outline: 0
}
a:hover {
	text-decoration: none
}


::selection { background: #0084ff; color: #fff; }

textarea { -webkit-appearance: none;}
button, select, textarea { -webkit-appearance: none;font-family: inherit; font-size: inherit; line-height: inherit;overflow: auto }

ul, ol, li {
	list-style: none
}
em, i {
	font-style: normal
}
ul, ol {
	list-style: none
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
*zoom:1
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }


/*-基础样式样式-*/
figure { margin: 0 }
table { background-color: transparent }
caption { padding-top: 8px; padding-bottom: 8px; color: #777; text-align: left }
table { width: 100%; max-width: 100%; border-spacing: 0;
  border-collapse: collapse; }
th { padding: 0;}
img { vertical-align: middle; }
.img_r { display: block; max-width: 100%; height: auto; }
.center_b {display: block; margin-left: auto;margin-right: auto;}
.img_radius{ border-radius: 6px }
.img_thumbnail { padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; display: inline-block; max-width: 100%; height: auto }
.img_circle { border-radius: 50% }
hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee }

.sr_only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0 }
.s_only_focusable:active, .sr_only_focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto }
[role=button] { cursor: pointer }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-top: 10px; margin-bottom: 10px; font-family: inherit; line-height: 1.1; color: inherit }
.h1, h1 { font-size: 48px }
.h2, h2 { font-size: 36px }
.h3, h3 { font-size: 30px }
.h4, h4 { font-size: 24px }
.h5, h5 { font-size: 18px }
.h6, h6 { font-size: 16px }
p { font-size: 14px;  }
p .small{ font-size: 14px;  }
.small, small { font-size: 12px }
.mark, mark { padding: .2rem; background-color: #fcf8e3 }

.text_l { text-align: left }
.text_r { text-align: right }
.text_c { text-align: center }
.text_j { text-align: justify }
.text_n { white-space: nowrap }
.text_l { text-transform: lowercase }
.text_u { text-transform: uppercase }
.text_m { color: #777 }
.text_p { color: #337ab7 }

a.text_primary:hover { color: #286090 }
.text_success { color: #3c763d }
a.text_success:hover { color: #2b542c }
.text_info { color: #31708f }
a.text_info:hover { color: #245269 }
.text_warning { color: #8a6d3b }
a.text_warning:hover { color: #66512c }
.text_danger { color: #a94442 }
a.text_danger:hover { color: #843534 }
.bg_primary { color: #fff; background-color: #337ab7 }
a.bg_primary:hover { background-color: #286090 }
.bg_success { background-color: #dff0d8 }
a.bg_success:hover { background-color: #c1e2b3 }
.bg_info { background-color: #d9edf7 }
a.bg_info:hover { background-color: #afd9ee }
.bg_warning { background-color: #fcf8e3 }
a.bg_warning:hover { background-color: #f7ecb5 }
.bg_danger { background-color: #f2dede }
a.bg_danger:hover { background-color: #e4b9b9 }
.page_header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee }

.con{ margin-right: auto; margin-left: auto; padding-left: 12px; padding-right: 12px }

/*内容宽度*/
/*加快开发效率做的取舍的取舍，移动端端内容宽度统一设置为100%*/

@media (min-width:750px) {
.con { width:100% }
}

@media (min-width:992px) {
.con { width: 970px }
}

@media (min-width:1200px) {
.con { width: 1200px }
}

@media (min-width:1400px) {
.con { width: 1400px }
}

@media (min-width:1600px) {
.con { width: 1440px }
}


@media (min-width:1920px) {
.con { width:1440px; }
}

.con_f { margin-right: auto; margin-left: auto; padding-left: 12px; padding-right: 12px }
.row { margin-left: -12px; margin-right: -12px }
.pull_l {
    float: left !important;
}
.pull_r {
    float: right !important;
}
.c_lg_1,
.c_lg_10,
.c_lg_11, 
.c_lg_12,
.c_lg_2, 
.c_lg_3, 
.c_lg_4, 
.c_lg_5, 
.c_lg_6, 
.c_lg_7, 
.c_lg_8, 
.c_lg_9,
.c_lg_10,
.c_lg_11,
.c_lg_12,
.c_lg_13,
.c_lg_14,
.c_lg_15,
.c_lg_16,
.c_lg_17,
.c_lg_18,
.c_lg_19,
.c_lg_20,
.c_lg_21,
.c_lg_22,
.c_lg_23,
.c_lg_24,

.c_md_1, 
.c_md_10, 
.c_md_11, 
.c_md_12, 
.c_md_2,
.c_md_3,
.c_md_4, 
.c_md_5,
.c_md_6,
.c_md_7,
.c_md_8, 
.c_md_9,
.c_sm_1, 
.c_sm_10, 
.c_sm_11,
.c_sm_12, 
.c_sm_13, 
.c_sm_14, 
.c_sm_15, 
.c_sm_16, 
.c_sm_17, 
.c_sm_18, 
.c_sm_19, 
.c_sm_19, 
.c_sm_20, 
.c_sm_21, 
.c_sm_22, 
.c_sm_23, 
.c_sm_24, 


.c_sm_2, 
.c_sm_3, 
.c_sm_4, 
.c_sm_5,
.c_sm_6, 
.c_sm_7, 
.c_sm_8, 
.c_sm_9, 
.c_xs_1, 
.c_xs_10,
.c_xs_11,
.c_xs_12,
.c_xs_2, 
.c_xs_3, 
.c_xs_4, 
.c_xs_5, 
.c_xs_6, 
.c_xs_7, 
.c_xs_8, 
.c_xs_9,
.c_xs_10,
.c_xs_11,
.c_xs_12,
.c_xs_13,
.c_xs_14,
.c_xs_15,
.c_xs_16,
.c_xs_17,
.c_xs_18,
.c_xs_19,
.c_xs_20,
.c_xs_21,
.c_xs_22,
.c_xs_23,
.c_xs_24
{ 
position: relative;  
float: left;
min-height: 1px; 
padding-left: 12px; 
padding-right: 12px; 
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.c_xs_24 { width: 100% }
.c_xs_23 { width: 95.833333% }
.c_xs_22 { width: 91.666667% }
.c_xs_21 { width: 87.5% }
.c_xs_20 { width: 83.333333% }
.c_xs_19 { width: 79.166667% }
.c_xs_18 { width: 75% }
.c_xs_17 { width: 70.833333% }
.c_xs_16 { width: 66.6666667% }
.c_xs_15 { width: 62.4% }
.c_xs_14 { width: 58.333333% }
.c_xs_13 { width: 54.166667%}
.c_xs_12 { width: 50% }
.c_xs_11 { width: 45.833333% }
.c_xs_10 { width: 41.66667%}
.c_xs_9  { width: 37.5% }
.c_xs_8  { width: 33.333333% } 
.c_xs_7  { width: 29.1666666% } 
.c_xs_6  { width: 25% }
.c_xs_5  { width: 20.8333333% } 
.c_xs_4  { width: 16.6666666% }
.c_xs_3  { width: 12.5% } 
.c_xs_2  { width: 8.33333333% }
.c_xs_1  { width: 4.166667% }

@media (min-width:768px) {
.c_sm_24 { width: 100% }
.c_sm_23 { width: 95.833333% }
.c_sm_22 { width: 91.666667% }
.c_sm_21 { width: 87.5% }
.c_sm_20 { width: 83.333333% }
.c_sm_19 { width: 79.166667% }
.c_sm_18 { width: 75% }
.c_sm_17 { width: 70.833333% }
.c_sm_16 { width: 66.6666667% }
.c_sm_15 { width: 62.4% }
.c_sm_14 { width: 58.333333% }
.c_sm_13 { width: 54.166667%}
.c_sm_12 { width: 50% }
.c_sm_11 { width: 45.833333% }
.c_sm_10 { width: 41.66667%}
.c_sm_9  { width: 37.5% }
.c_sm_8  { width: 33.333333% } 
.c_sm_7  { width: 29.1666666% } 
.c_sm_6  { width: 25% }
.c_sm_5  { width: 20.8333333% } 
.c_sm_4  { width: 16.6666666% }
.c_sm_3  { width: 12.5% } 
.c_sm_2  { width: 8.33333333% }
.c_sm_1  { width: 4.166667% }

}

@media (min-width:992px) {
.c_md_24 { width: 100% }
.c_md_23 { width: 95.833333% }
.c_md_22 { width: 91.666667% }
.c_md_21 { width: 87.5% }
.c_md_20 { width: 83.333333% }
.c_md_19 { width: 79.166667% }
.c_md_18 { width: 75% }
.c_md_17 { width: 70.833333% }
.c_md_16 { width: 66.6666667% }
.c_md_15 { width: 62.4% }
.c_md_14 { width: 58.333333% }
.c_md_13 { width: 54.166667%}
.c_md_12 { width: 50% }
.c_md_11 { width: 45.833333% }
.c_md_10 { width: 41.66667%}
.c_md_9  { width: 37.5% }
.c_md_8  { width: 33.333333% } 
.c_md_7  { width: 29.1666666% } 
.c_md_6  { width: 25% }
.c_md_5  { width: 20.8333333% } 
.c_md_4  { width: 16.6666666% }
.c_md_3  { width: 12.5% } 
.c_md_2  { width: 8.33333333% }
.c_md_1  { width: 4.166667% }

}

@media (min-width:1600px) {
.c_lg_24 { width: 100% }
.c_lg_23 { width: 95.833333% }
.c_lg_22 { width: 91.666667% }
.c_lg_21 { width: 87.5% }
.c_lg_20 { width: 83.333333% }
.c_lg_19 { width: 79.166667% }
.c_lg_18 { width: 75% }
.c_lg_17 { width: 70.833333% }
.c_lg_16 { width: 66.6666667% }
.c_lg_15 { width: 62.4% }
.c_lg_14 { width: 58.333333% }
.c_lg_13 { width: 54.166667%}
.c_lg_12 { width: 50% }
.c_lg_11 { width: 45.833333% }
.c_lg_10 { width: 41.66667%}
.c_lg_9  { width: 37.5% }
.c_lg_8  { width: 33.333333% } 
.c_lg_7  { width: 29.1666666% } 
.c_lg_6  { width: 25% }
.c_lg_5  { width: 20.8333333% } 
.c_lg_4  { width: 16.6666666% }
.c_lg_3  { width: 12.5% } 
.c_lg_2  { width: 8.33333333% }
.c_lg_1  { width: 4.166667% }

}