* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	-ms-box-sizing: border-box;
	box-sizing: border-box; 
}


body {
  background:#FFFFFF;
  overflow-x:hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
  
}

html{
	font-size:62.5%;
}

div,span,a,img,ul,li,dl,dt,dd,em,embed,table,tr,td,input,form,select,option,del{
	padding:0;
	margin:0;
	font-weight:normal;
	font-style: normal;/*文字不倾斜*/
	vertical-align: middle;
}


ul,ol,li,dl,dt,dd{
	list-style:none;/*去样式*/
}


b,strong {
  font-weight: bold;
}


.clear{
	clear:both;
}


h1, .h1 {font-size: 2.8rem;}
h2, .h2 {font-size: 2.6rem;}
h3, .h3 {font-size: 2.4rem;}
h4, .h4 {font-size: 2.2rem;}
h5, .h5 {font-size: 2rem;}
h6, .h6 { font-size: 1.5rem;}
.fz-50{font-size:50px;}
.fz-45{font-size:45px;}
.fz-40{font-size:40px;}
.fz-35{font-size:35px;}
.fz-32{font-size:32px;}
.fz-30{font-size:30px;}
.fz-28{font-size:28px;}
.fz-26{font-size:26px;}
.fz-24{font-size:24px;}
.fz-22{font-size:22px;}
.fz-20{font-size:20px;}
.fz-18{font-size:18px;}
.fz-16{font-size:16px;}
.fz-15{font-size:15px;}
.fz-14{font-size:14px;}
.fz-12{font-size:12px;}

@media (max-width: 576px) {
	.fz-sm-50{font-size:50px;}
	.fz-sm-45{font-size:45px;}
	.fz-sm-40{font-size:40px;}
	.fz-sm-35{font-size:35px;}
	.fz-sm-32{font-size:32px;}
	.fz-sm-30{font-size:30px;}
	.fz-sm-28{font-size:28px;}
	.fz-sm-26{font-size:26px;}
	.fz-sm-24{font-size:24px;}
	.fz-sm-22{font-size:22px;}
	.fz-sm-20{font-size:20px;}
	.fz-sm-18{font-size:18px;}
	.fz-sm-16{font-size:16px;}
	.fz-sm-15{font-size:15px;}
	.fz-sm-14{font-size:14px;}
	.fz-sm-12{font-size:12px;}
	h1, .h1 {font-size: 2.8rem;}
	h2, .h2 {font-size: 2.6rem;}
}

@media (min-width: 768px) {
	h1, .h1 {font-size: 3rem;}
	h2, .h2 {font-size: 2.8rem;}
	h3, .h3 {font-size: 2.6rem;}
	.fz-md-50{font-size:50px;}
	.fz-md-45{font-size:45px;}
	.fz-md-40{font-size:40px;}
	.fz-md-35{font-size:35px;}
	.fz-md-32{font-size:32px;}
	.fz-md-30{font-size:30px;}
	.fz-md-28{font-size:28px;}
	.fz-md-26{font-size:26px;}
	.fz-md-24{font-size:24px;}
	.fz-md-22{font-size:22px;}
	.fz-md-20{font-size:20px;}
	.fz-md-18{font-size:18px;}
	.fz-md-16{font-size:16px;}
	.fz-md-15{font-size:15px;}
	.fz-md-14{font-size:14px;}
	.fz-md-12{font-size:12px;}
}

@media (min-width: 992px) {
	h1, .h1 {font-size: 3.5rem;}
	h2, .h2 {font-size: 3rem;}
	h3, .h3 {font-size: 2.8rem;}
	h4, .h4 {font-size: 2.6rem;}
	.fz-lg-50{font-size:50px;}
	.fz-lg-45{font-size:45px;}
	.fz-lg-40{font-size:40px;}
	.fz-lg-35{font-size:35px;}
	.fz-lg-32{font-size:32px;}
	.fz-lg-30{font-size:30px;}
	.fz-lg-28{font-size:28px;}
	.fz-lg-26{font-size:26px;}
	.fz-lg-24{font-size:24px;}
	.fz-lg-22{font-size:22px;}
	.fz-lg-20{font-size:20px;}
	.fz-lg-18{font-size:18px;}
	.fz-lg-16{font-size:16px;}
	.fz-lg-15{font-size:15px;}
	.fz-lg-14{font-size:14px;}
	.fz-lg-12{font-size:12px;}
}

@media (min-width: 1200px) {
	h1, .h1 {font-size: 4rem;}
	h2, .h2 {font-size: 3.5rem;}
	h3, .h3 {font-size: 3rem;}
	h4, .h4 {font-size: 2.8rem;}
	.fz-xl-72{font-size:72px;}
	.fz-xl-65{font-size:65px;}
	.fz-xl-60{font-size:60px;}
	.fz-xl-55{font-size:55px;}
	.fz-xl-50{font-size:50px;}
	.fz-xl-45{font-size:45px;}
	.fz-xl-40{font-size:40px;}
	.fz-xl-35{font-size:35px;}
	.fz-xl-32{font-size:32px;}
	.fz-xl-30{font-size:30px;}
	.fz-xl-28{font-size:28px;}
	.fz-xl-26{font-size:26px;}
	.fz-xl-24{font-size:24px;}
	.fz-xl-22{font-size:22px;}
	.fz-xl-20{font-size:20px;}
	.fz-xl-18{font-size:18px;}
	.fz-xl-16{font-size:16px;}
	.fz-xl-15{font-size:15px;}
	.fz-xl-14{font-size:14px;}
	.fz-xl-12{font-size:12px;}	
}


/*大写*/

.dx {
  text-transform: uppercase;
}
/*小写*/
.xx {
  text-transform: lowercase;
}

/*一行*/
.yh {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*间距*/
.let-1{
	letter-spacing: 1px;
}

.line-h-1{
	line-height:1.75;
}

.line-h-2{
	line-height:2;
}

.line-h-3{
	line-height:3;
}

.line-h-4{
	line-height:4;
}


.li {
	/*-moz-columns: auto 3;*/
	/*-moz-columns: 150px 3;*/
	/*如果没有设置列数，却设置了每列多少宽度，那么会自动设置列数*/
	-moz-column-width: 150px;
	-moz-column-count: 3;
	-moz-column-gap: 50px;
	-moz-column-rule: 2px dashed gray;
	-webkit-column-width: 150px;
	-webkit-column-count: 3;
	-webkit-column-gap: 50px;
	-webkit-column-rule: 2px dashed gray;
	column-width: 150px;
	column-count: 4;
	column-gap: 50px;
	column-rule: 1px dashed #ccc;
	text-align:left;
}

.li h1 {
	text-align: center;
	-moz-column-span: all;
	-webkit-column-span: all;
	column-span: all;

}

/*圆点*/
.rounded-circle,
.o {
  border-radius: 50% !important;
}

.flex-1{
  flex: 1;
}

.flex-fill {
  flex: 1 1 auto !important;
}
/*水平排例默认*/
.flex-row {
  flex-direction: row !important;
}
/*垂直排例*/
.flex-column {
  flex-direction: column !important;
}
/*水平倒排序*/
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
/*垂直倒排序*/
.flex-column-reverse {
  flex-direction: column-reverse !important;
}
/*分配多余空间*/
.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}
/*控制中文水平*/
.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}
/*换行*/
.flex-wrap {
  flex-wrap: wrap !important;
}
/*不换行*/
.flex-nowrap {
  flex-wrap: nowrap !important;
}
/*换行倒排序*/
.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
/*水平左排序*/
.justify-content-start {
  justify-content: flex-start !important;
}
/*水平右排序*/
.justify-content-end {
  justify-content: flex-end !important;
}
/*水平居中排序*/
.justify-content-center {
  justify-content: center !important;
}
/*水平顶格排序*/
.justify-content-between {
  justify-content: space-between !important;
}
/*水平平均排序*/
.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}
/*垂直上排序*/
.align-items-start {
  align-items: flex-start !important;
}
/*垂直下排序*/
.align-items-end {
  align-items: flex-end !important;
}
/*垂直中排序*/
.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}
/*子多行垂直上排序*/
.align-content-start {
  align-content: flex-start !important;
}
/*子多行垂直下排序*/
.align-content-end {
  align-content: flex-end !important;
}
/*子多行垂直居中排序*/
.align-content-center {
  align-content: center !important;
}
/*子多行垂直顶格排序*/
.align-content-between {
  align-content: space-between !important;
}
/*子多行垂直平均排序*/
.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}
/*子单行垂直上排序*/
.align-self-start {
  align-self: flex-start !important;
}
/*子单行垂直下排序*/
.align-self-end {
  align-self: flex-end !important;
}
/*子单行垂直居中排序*/
.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}


.czjz {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;	
}



.max-w1400{	
	margin:0 auto;
	width: 1400px;	
	max-width: 100%;
}

.max-w1320{	
	margin:0 auto;
	width: 1320px;	
	max-width: 100%;
}


.max-w1920{	
	margin:0 auto;
	max-width:1920px;	
}


/*


display: flex;
flex-direction: row;（默认水平）
flex-direction: row-reverse;（水平反向排序）
flex-direction: column;（垂直）
flex-wrap: wrap;（换行）
flex-flow: row wrap;（简写 水平换行）
justify-content: center;（ 水平居中）
align-items: center;（ 垂直居中）
justify-content: flex-end;（ 水平居下）
justify-content: space-between;（ 水平顶格布局）
justify-content: space-around;（ 水平平均布局）

开启浮动d-flex
1、水平（默认）flex-row
2、水平相反排例 flex-row-reverse
3、垂直 flex-column
4、垂直相反排例flex-column-reverse
5、不换行flex-nowrap (默认) :不换行。注意：不换行 设置的宽大于容器宽，溢出无效
6、换行flex-wrap
7、换行flex-wrap-reverse:换行，第一行在下方。
8、对齐justify-content-start (默认)
9、居中对齐justify-content-center 
10、居右对齐justify-content-end 
11、对齐两端顶格justify-content-between 
12、对齐平均justify-content-around 
13、垂直方向对齐align-items-stretch(默认) 继承了父元素的高
14、垂直方向上对齐align-items-start 区别 继承了父元素的高
15、垂直方向居中对齐align-items-center 
16、垂直方向下对齐align-items-end  注意css写法; align-items:flex-end;
17、垂直方向基线对齐align-items-baseline 第一行文字的底部为目标
18、垂直方向控制多行 align-content-stretch (默认) 继承了父元素的高
19、垂直方向控制多行 align-content-start 
20、垂直方向控制多行 align-content-center 
21、垂直方向控制多行 align-content-end 
22、垂直方向控制多行 align-content-between 
23、垂直方向控制多行 align-content-around 
24、列顺序 order-1 order-2
25、等宽 flex-fill
26、伸展flex-grow-1可占用多余的空间
27-31、单独子元素设置对齐
align-self-stretch  (默认值) 
align-self-start 
align-self-center 
align-self-end 
align-self-baseline
d-none d-sm-none d-md-none d-lg-none d-xl-block d-xxl-block
d-block d-sm-block d-md-block d-lg-block d-xl-none d-xxl-none

<div class="col-12  col-md-6 d-none d-md-block" >
<img src="images/slider1.jpg" class="mx-auto d-block img-fluid">
<ul class="list-unstyled">
background:linear-gradient(red,green);降变
边框 黑 3像素 圆角-3
border border-dark border-3 rounded-3
img-thumbnail

50%宽度简写
.contern{
	flex:0 1 48%;
	margin:1%;	
}

.pic-list dl dt{
	width:100%;
	height:28rem;
}


.pic-list dl dt img{
	max-width:100%;
	height:100%;
}

*/