body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0;font-family: '微软雅黑' } a { color:#555; text-decoration:none; } a:hover { cursor: pointer; text-decoration:none; } img { border:none;display: block; } ul,ol,dl,li,dt,dd{ list-style:none; } input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; } textarea { resize: none;} button:focus, select:focus, input:focus, textarea:focus { outline:0; } table { border-collapse:collapse; } html {overflow-y: scroll;} i,em,s{font-style: normal; } strong,h1,h2,h3,h4 { font-weight:400; } .inner{width: 1200px;margin: 0 auto} .fl{float: left;} .fr{float: right;} .innerAuto{ width: 80%; max-width: 1200px; margin: 0 auto } .clearfix{ *zoom:1;} .clearfix:after{ display:block; clear:both; content:"";} .tl {text-align:left;} .tr {text-align:right;} .tc {text-align:center;} .va_top {vertical-align:top;} .hide {display:none;} .show {display:block;} .hid1{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .hid2{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } /***** 上下居中 ****/ .centerHtml{ position: fixed;top: 50%;left: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); } .centertopDiv{ position: absolute;top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } /****** flex布局 ****/ .flex{ display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /**** 主轴方向 flex-direction ****/ .flex-directionRow { flex-direction: row; box-orient: horizontal; box-direction: norma; } .flex-directionRowreverse { flex-direction: row-reverse; box-orient: horizontal; box-direction: reverse; } .flex-directioncolumn { flex-direction: column; box-orient: vertical; box-direction: normal; } .flex-directioncolumn-reverse { flex-direction: column-reverse; box-orient: vertical; box-direction: reverse; } /**** 元素换行 flex-wrap ****/ .flex-wrap { -webkit-flex-wrap: wrap; -webkit-box-lines: multiple; /** 默认single ==不换行 **/ -moz-flex-wrap: wrap; flex-wrap: wrap; } /*** flex-flow ******/ .flex-flow { -webkit-flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-lines: multiple; -moz-flex-flow: row wrap; box-orient: horizontal; box-lines: multiple; flex-flow: row wrap; } /******* 横向排列布局 justify-content **********/ .justify-content { -webkit-justify-content: center; justify-content: center; -moz-box-pack: center; -webkit--moz-box-pack: center; box-pack: center; /***FF支持box-pack的justify值但无效***/ } /******* 竖向排列布局 align-items*********/ .align-items { align-items: center; -webkit-align-items: center; box-align: center; -moz-box-align: center; -webkit-box-align: center; } /******* 伸缩盒子布局兼容 flex******/ .flex1 { box-flex: 1; -webkit-box-flex: 1; -moz-box-flex: 1; flex: 1; -webkit-flex: 1; } /******* 元素出现顺序 order******/ .order { box-order: 1; -webkit-box-order: 1; -moz-box-order: 1; order: 1; -webkit-order: 1; } .header { width: 100%; height: 100px; z-index: 100; background: #fff; } .header img { height: 70px; margin-top: 15px; } .header a { margin: 30px 50px 0 0; padding: 0 5px; line-height: 40px; } .header a.active { border-bottom: 1px solid #aeaeae; } .foot { width: 100%; background-image: url("../img/footbj.jpg"); background-size: cover; } .foot .title{ padding: 30px 0; width: 650px; margin: 0 auto; justify-content: space-between; -webkit-justify-content:space-between; justify-content:space-between; -moz-box-pack:space-between; -webkit--moz-box-pack:space-between; box-pack:center; } .foot .title a { margin: 0 10px; display: inline-block; color: #909090; } .foot ul{ width: 650px; margin: 0 auto; } .foot ul li img { width: 24px; height: 24px; margin-right: 5px; vertical-align: middle; display: inline-block; } .foot ul li { float: left; width: 40%; margin: 20px 0; } .foot ul li.active { width: 60%; } .foot ul li span { vertical-align: middle; color: #909090; } .info { padding: 60px 0; line-height: 50px; } @media screen and (max-width: 700px) { .centertopDiv{ position: static;top: 0%; transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); font-size: 12px; } }