body,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dd,fieldset,legend,button,input,testarea,th,td{
	padding: 0; margin: 0;
}
*{margin: 0;
  padding: 0;   /* 先重置一下html，消除HTML标签默认的内外边距 */
  list-style: none;
  box-sizing: border-box;
}
	
body {
	overflow: auto;
	font-size:14px;

}



html{
	font-family: "微软雅黑";
	font-size: 12px;
	background-color: rde;
}

.main{
	width:1200px;
	margin:0 auto;
}

.clear:after{
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	overflow: hidden;
}
.clear{
	zoom: 1;
	clear: both; /* 清除浮动 */
}
    ul,li{list-style: none;}  /*去掉a标签 文字前的点*/
a{
	text-decoration: none; /*去掉a标签 文字下面点横线*/
	-webkit-transition: all .3s;
    transition: all .3s;
    color: #666666;
}
a:hover{
	-webkit-transition: all .3s;
    transition: all .3s;
    color: #4d87f1;
}
img{
	vertical-align: top;
	display:block;
	border: 0;
}
input,select,button,textarea{
	outline: none;
}
textarea{
	resize: none;
}
input::-webkit-input-placeholder{
	/* webkit browsers */
	color: #ddd;
}
input:-moz-placeholder{
	/* Mozilla Firefox 4 to 18 */
	color: #ddd;
}
input:-moz-placeholder{
	/* Mozilla Firefox 19+ */
	color: #ddd;
}
input:-ms-input-placeholder{
	/* Internet Expolorer 10+ */
	color: #ddd;
}

.fl{float:left;}
.fr{float:right;}

.clearfix::after {
	content: '';
	display: block;
	clear:both;
}


.card-box{
	margin: 2em auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    position: relative;
    /*top: 5px;
    left: 50%;
    transform: translate(-50%, -50%);*/
    width: 90%;
	height: 210px;
    padding: 4.0em;
	display: flex;	
    background-color: #e3e3e3;

}
.card-box .c1{
    transition: transform .2s, box-shadow .2s;
	display: flex;
    justify-content: center;
    align-items: center;
    width: 18%;
	height: 50px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .1), -2px -2px 4px rgba(0, 0, 0, .1);
    background-color: #fff;
    color: #3e3e3e;
    font-size: 14px;
    cursor: pointer;
	
}

.card-box .c1:hover {
    transition: transform .2s, box-shadow .2s;
    transform: translateY(-4px);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
}

.card-box .card {
    transition: transform .2s, box-shadow .2s;
	display: flex;
    justify-content: center;
    align-items: center;
    width: 18%;
	height: 10px;
	background-color: red;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .1), -2px -2px 4px rgba(0, 0, 0, .1);
    background-color: #fff;
    color: #3e3e3e;
    font-size: 14px;
   /* letter-spacing: 1px;*/
    cursor: pointer;
}

.card-box .card:hover {
    transition: transform .2s, box-shadow .2s;
    transform: translateY(-4px);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
}