@charset "utf-8"; /*reset Css*/ * { margin: 0; padding: 0; } /** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td /* table elements 表格元素 */ { margin: 0; padding: 0; } body { background-color: #fff; /*整体背景颜色*/ -webkit-touch-callout: none; /*-webkit-user-select: none;*/ /*禁止复制*/ -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /*点击高亮效果*/ } /*clearfix清除浮动*/ .clearfix { *zoom: 1 } .clearfix:before, .clearfix:after { display: table; content: "" } .clearfix:after { clear: both } /* 默认合并表格边框 */ table { border-collapse: collapse; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } input, textarea { -webkit-appearance: none; border-radius: 0; } ol, ul, li { list-style: none; } a, a:active { color: inherit; text-decoration: none; cursor: pointer; } a { border: 0; } em, i { font-style: normal; } /* 标签 */ input { border: none; appearance: none; -moz-appearance: none; outline: none; -webkit-appearance: none; } input:focus { outline: none; } /* input标签聚焦不出现默认边框 */ textarea { resize: none; } /* 禁用了文本的拖拉,尤其在谷歌下 */ select, button, input, img { vertical-align: middle; } /*去除图片底部缝隙并基于中线对齐*/ img { width: auto; height: auto; width: auto\9; max-width: 100%; display: block; -ms-interpolation-mode: bicubic; } /** 设置默认字体 **/ /* 宋体:\5B8B\4F53 新宋体:\65B0\5B8B\4F53 黑体:\9ED1\4F53 微软雅黑:\5FAE\8F6F\96C5\9ED1 楷体:\6977\4F53_GB2312 思源黑体: Source Han Sans CN */ body, button, input, select, textarea /* for ie */ { font: 14px/1 "Montserrat-Light", OP, "Microsoft YaHei", "Hiragino Sans GB", "Droid Sans Fallback", "WenQuanYi Micro Hei", sans-serif; } body { background: #fff; -webkit-text-size-adjust: 100%; color: #333; overflow-x: hidden; } /*End reset*/ /*public Css*/ /* 重绘元素边框盒 */ * { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } *:focus { outline: none; } html { -ms-touch-action: none; /* 阻止windows Phone 的默认触摸事件 */ } /*兼容iphone去除默认input表单默认设置*/ input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; } /*clearfix清除浮动*/ .clearfix { *zoom: 1 } .clearfix:before, .clearfix:after { display: table; content: "" } .clearfix:after { clear: both } /* 水平垂直居中 */ .cell_mid { display: table; height: 100%; width: 100%; } .cell_h { height: 100%; display: table-cell; vertical-align: middle; } /*动画--规定动画移动出去的时间*/ a { -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .animation { -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* 指定文字禁止复制 */ .noSelect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; } /* 文字限制行数 */ /* 限制一行 */ .linelimit { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* 【常用】限制多行 修改行数-webkit-line-clamp: 2;【兼容必须限高】 */ .linelimit-2 { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .linelimit-3 { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /* 引入字体 */ @font-face { font-family: 'Lovelo'; src: url('../font/Lovelo.ttf'), url('../fonts/Lovelo.eot'), url('../fonts/Lovelo.eot?#iefix') format('embedded-opentype'), url('../fonts/Lovelo.woff2') format('woff2'), url('../fonts/Lovelo.woff') format('woff'), url('../fonts/Lovelo.ttf') format('truetype'), url('../fonts/Lovelo.svg#svgFontName') format('svg'); } /*动画效果 所有属性获得过度*/ * { transition-property: all; } .com-img { overflow: hidden; } .com-img img { transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; } .com-img:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); } .fl { float: left; } .fr { float: right; } .show { display: block; } .hide { display: none; } .tac { text-align: center; } .tal { text-align: left; } .tar { text-align: right; } .ttu { text-transform: uppercase; } /*字母转换为大写*/ .ofh { overflow: hidden; } .pst-rel { position: relative; } .pst-abs { position: absolute; } .col-2 { width: 50%; float: left; } .col-3 { width: 33.333333%; float: left; } .col-4 { width: 25%; float: left; } .col-5 { width: 20%; float: left; } .col-6 { widows: 16.6666%; float: left; } .w12 { width: 1200px; max-width: 92%; margin: 0 auto; } .w14 { width: 1440px; max-width: 92%; margin: 0 auto; } .w16 { width: 1600px; max-width: 92%; margin: 0 auto; } .pc { display: block; } .mb { display: none; } /* .mt{margin-top: 90px;} */ @media all and (max-width:1000px) { .pc { display: none; } .mb { display: block; } } *[class*="rect-"] { position: relative; display: block; width: 100%; height: 0; overflow: hidden; } *[class*="rect-"] ._full { position: absolute; left: 0; top: 0; width: 100%; height: 100%; *height: auto; object-fit: cover; } .rect-50 { padding-bottom: 50%; } .rect-5625 { padding-bottom: 56.25%; } .rect-60 { padding-bottom: 60%; } .rect-70 { padding-bottom: 70%; } .rect-75 { padding-bottom: 75%; } .rect-80 { padding-bottom: 80%; } .rect-90 { padding-bottom: 90%; } .rect-100 { padding-bottom: 100%; } .rect-135 { padding-bottom: 135%; } .rect-140 { padding-bottom: 140%; } li *[class*="pic"]>img { -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } li:hover *[class*="pic"]>img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .trs3 { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .trs5 { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .pd-40 { padding: 0.4rem 0; } .pd-60 { padding: 0.6rem 0; } .pd-80 { padding: 0.8rem 0; } .pd-100 { padding: 1rem 0; } .swiper-pagination-bullet-active { background-color: #508cc9 !important; } /* flex布局 */ .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /*默认 主轴为水平方向,起点在左端*/ .f-dr { -webkit-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } /*主轴为水平方向,起点在右端*/ .f-dr-r { -webkit-box-orient: horizontal; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } /*主轴为垂直方向,起点在上沿*/ .f-dc { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } /*主轴为垂直方向,起点在下沿*/ .f-dc-r { -webkit-box-orient: vertical; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } /* 交叉轴的起点对齐 */ .f-as { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } /* 交叉轴的中点对齐 */ .f-ac { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /* 交叉轴的终点对齐 */ .f-ae { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } /* 项目的第一行文字的基线对齐 */ .f-ab { -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; } /* 交叉轴拉伸对齐 */ .f-ast { -webkit-align-items: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /* 左对齐 */ .f-js { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } /* 居中 */ .f-jc { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /* 右对齐 */ .f-je { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } /* 两端对齐,项目之间的间隔都相等 */ .f-jsb { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } /* 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 */ .f-jsa { -webkit-box-pack: distribute; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } /* 换行,第一行在上方 */ .f-warp { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } /* 换行,在第一行的下方 */ .f-warp-r { -webkit-flex-wrap: wrap-reverse; -moz-flex-wrap: wrap-reverse; -ms-flex-wrap: wrap-reverse; -o-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }