@charset "utf-8";
/* 颜色基本配置 */
/* 原生CSS变量的用法，IE浏览器不支持 */
:root {
    --main-color: #3973FF;
    --font-title: #333333; /* 标题文字 */
    --font-routine: #666666; /* 常规文字 */
    --font-desc: #959595; /* 次要一级 */
    --link-color: rgba(0, 160, 254, 1);
    --link-colo-hover: #66b1ff;

    --auxiliary: rgba(31, 114, 250, 0.5); /* 辅助色 */
    --auxiliary-1: #00a0ff;
    --auxiliary-2: rgba(0, 160, 255, 0.5);
    --border-1: #e1e1e1; /* 边框 */
    --border-2: #cbdcff; /* 边框2 */

    --bg-1: #f8fbff; /* 背景1 */
    --bg-2: #E8EAEB; /* 背景2 */

    /* 固定色值 */
    --white: rgba(255, 255, 255, 1);
    --red: rgba(255, 0, 0, 1);

    --black: rgba(0, 0, 0, 1);
    --black-04: rgba(0, 0, 0, 0.04);
    --black-65: rgba(0, 0, 0, 0.65);
    --black-85: rgba(0, 0, 0, 0.85);

}


/* 前端组 样式重置css */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block;
}

/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}

body {
    line-height: 1;
    font-family: "Microsoft YaHei";
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,
button {
    outline-style: none;
    font-family: "Microsoft YaHei";
    cursor: pointer;
}

input,
textarea {
    outline: none;
}

textarea:disabled,
input:disabled,
select:disabled {
    background-color: white;
    cursor: not-allowed;
}

/*块级元素*/
/*address, center, h1, h2, h3, h4, h5, h6, hr, p, pre, blockquote, marquee, ul, ol, dl, table, form, div {*/
/*-webkit-box-sizing: border-box;*/
/*-moz-box-sizing: border-box;*/
/*box-sizing: border-box;*/
/*}*/

/* 补充 */
/*a, span, input, textarea, select {*/
/*-webkit-box-sizing: border-box;*/
/*-moz-box-sizing: border-box;*/
/*box-sizing: border-box;*/
/*}*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
    font-family: "Microsoft YaHei";
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden], template {
    display: none;
}

a,
a:hover,
a:active,
a:visited {
    text-decoration: none;
    outline: 0;
    cursor: pointer;
}

a {
    background: transparent;
    text-decoration: none;
}

abbr[title] {
    border-bottom: 1px dotted;
}

/* 自动换行 */
p {
    white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
     white-space: -o-pre-wrap;
     word-wrap: break-word;

}

/* 自动换行 */
p {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto;
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    -webkit-appearance: none;
}

button {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 0;
}

/*iOS和Android*/
/* html::-webkit-scrollbar {
    display: none;
} */

/*input 的placeholder属性会使文本位置偏上*/
input, textarea {
    border: 0;
    -webkit-appearance: none;
    line-height: normal;
}

/*input type=number之后，pc端出现上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*select 下拉选择设置右对齐*/
select option {
    /*direction: rtl;*/
}

[class*=" zl-icon"], [class^=zl-icon] {
    font-family: iconfont !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

/*修改滚动条样式*/
/*滚动条整体部分*/
.scroll_box::-webkit-scrollbar {
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
}

._scroll_box {
    margin-right: 10px;
}

/*滚动条的轨道（里面装有Thumb）*/
.scroll_box::-webkit-scrollbar-track {
}

/*滚动条里面的小方块，能向上向下移动（或向左向右移动）*/

.scroll_box::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 7px #e3e3e3;;
    border-radius: 5px;
    background: #e3e3e3;
}

/*滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。*/
.scroll_box::-webkit-scrollbar-button {
}

/*内层轨道，滚动条中间部分*/
.scroll_box::-webkit-scrollbar-track-piece {
}

/*边角，即垂直滚动条和水平滚动条相交的地方*/
.scroll_box::-webkit-scrollbar-corner {
}

/*两个滚动条的交汇处上用于拖动调整元素大小的小控件*/
.scroll_box::-webkit-resizer {
    /*-webkit-box-shadow: inset 0 0 5px rgba(123, 178, 218, 0.9);*/
    -webkit-box-shadow: inset 0 0 5px #e3e3e3;
    border-radius: 0;
    background: #e3e3e3;
}

.scroll_box {
    /*scrollbar-arrow-color: transparent; !*三角箭头的颜色*!*/
    /*scrollbar-face-color: black; !*立体滚动条的颜色（包括箭头部分的背景色）*!*/
    /*scrollbar-3dlight-color: beige; !*立体滚动条亮边的颜色*!*/
    /*scrollbar-highlight-color: #333333; !*滚动条的高亮颜色（左阴影？）*!*/
    /*scrollbar-shadow-color: black; !*立体滚动条阴影的颜色*!*/
    /*scrollbar-darkshadow-color: blueviolet; !*立体滚动条外阴影的颜色*!*/
    /*scrollbar-track-color: transparent; !*立体滚动条背景颜色*!*/
    /*scrollbar-base-color:peachpuff; !*滚动条的基色*!*/
}

/* 自定义类 */
/*margin*/
.m-0 {
    margin: 0 !important;
}

/*margin-top*/
.m-t-0 {
    margin-top: 0 !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-8 {
    margin-top: 8px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-16 {
    margin-top: 16px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.m-t-24 {
    margin-top: 24px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-t-30 {
    margin-top: 30px !important;
}

.m-t-32 {
    margin-top: 32px !important;
}

.m-t-35 {
    margin-top: 35px !important;
}

.m-t-40 {
    margin-top: 40px !important;
}

.m-t-45 {
    margin-top: 45px !important;
}

.m-t-48 {
    margin-top: 48px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

.m-t-55 {
    margin-top: 55px !important;
}

.m-t-56 {
    margin-top: 56px !important;
}

.m-t-60 {
    margin-top: 60px !important;
}

.m-t-64 {
    margin-top: 64px !important;
}

.m-t-65 {
    margin-top: 65px !important;
}

.m-t-70 {
    margin-top: 70px !important;
}

.m-t-72 {
    margin-top: 72px !important;
}

.m-t-75 {
    margin-top: 75px !important;
}

.m-t-80 {
    margin-top: 80px !important;
}

.m-t-88 {
    margin-top: 88px !important;
}

.m-t-85 {
    margin-top: 85px !important;
}

.m-t-90 {
    margin-top: 90px !important;
}

.m-t-95 {
    margin-top: 95px !important;
}

.m-t-96 {
    margin-top: 96px !important;
}

.m-t-100 {
    margin-top: 100px !important;
}

/* margin-bottom */
.m-b-0 {
    margin-bottom: 0 !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-8 {
    margin-bottom: 10px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-16 {
    margin-bottom: 16px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-24 {
    margin-bottom: 24px !important;
}

.m-b-25 {
    margin-bottom: 25px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-b-35 {
    margin-bottom: 35px !important;
}

.m-b-36 {
    margin-bottom: 36px !important;
}

.m-b-40 {
    margin-bottom: 40px !important;
}

.m-b-45 {
    margin-bottom: 45px !important;
}

.m-b-48 {
    margin-bottom: 48px !important;
}

.m-b-50 {
    margin-bottom: 50px !important;
}

.m-b-55 {
    margin-bottom: 55px !important;
}

.m-b-56 {
    margin-bottom: 56px !important;
}

.m-b-60 {
    margin-bottom: 60px !important;
}

.m-b-64 {
    margin-bottom: 64px !important;
}

.m-b-65 {
    margin-bottom: 65px !important;
}

.m-b-70 {
    margin-bottom: 70px !important;
}

.m-b-75 {
    margin-bottom: 75px !important;
}

.m-b_80 {
    margin-bottom: 80px !important;
}

.m-b-85 {
    margin-bottom: 85px !important;
}

.m-b_88 {
    margin-bottom: 88px !important;
}

.m-b-90 {
    margin-bottom: 90px !important;
}

.m-b-95 {
    margin-bottom: 95px !important;
}

.m-b-100 {
    margin-bottom: 100px !important;
}

.m-b-105 {
    margin-bottom: 105px !important;
}

.m-b-110 {
    margin-bottom: 110px !important;
}

.m-b-115 {
    margin-bottom: 115px !important;
}

.m-b-120 {
    margin-bottom: 120px !important;
}

.m-b-125 {
    margin-bottom: 125px !important;
}

.m-b-130 {
    margin-bottom: 130px !important;
}

.m-b-135 {
    margin-bottom: 135px !important;
}

.m-b-140 {
    margin-bottom: 140px !important;
}

/* margin-right */
.m-r-0 {
    margin-right: 0 !important;
}

.m-r-5 {
    margin-right: 5px !important;
}

.m-r-8 {
    margin-right: 8px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-r-15 {
    margin-right: 15px !important;
}

.m-r-16 {
    margin-right: 16px !important;
}

.m-r-20 {
    margin-right: 20px !important;
}

.m-r-24 {
    margin-right: 24px !important;
}

.m-r-25 {
    margin-right: 25px !important;
}

.m-r-30 {
    margin-right: 30px !important;
}

.m-r-32 {
    margin-right: 32px !important;
}

.m-r-35 {
    margin-right: 35px !important;
}

.m-r-40 {
    margin-right: 40px !important;
}

.m-r-45 {
    margin-right: 45px !important;
}

.m-r-48 {
    margin-right: 48px !important;
}

.m-r-50 {
    margin-right: 50px !important;
}

.m-r-55 {
    margin-right: 55px !important;
}

.m-r-56 {
    margin-right: 56px !important;
}

.m-r-60 {
    margin-right: 60px !important;
}

.m-r-64 {
    margin-right: 64px !important;
}

.m-r-65 {
    margin-right: 65px !important;
}

.m-r-72 {
    margin-right: 72px !important;
}

.m-r-70 {
    margin-right: 70px !important;
}

.m-r-75 {
    margin-right: 75px !important;
}

.m-r-80 {
    margin-right: 80px !important;
}

.m-r-85 {
    margin-right: 85px !important;
}

.m-r-90 {
    margin-right: 90px !important;
}

.m-r-95 {
    margin-right: 95px !important;
}

.m-r-100 {
    margin-right: 100px !important;
}

/* margin-left */
.m-l-0 {
    margin-left: 0 !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-8 {
    margin-left: 8px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-l-16 {
    margin-left: 16px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-l-24 {
    margin-left: 24px !important;
}

.m-l-25 {
    margin-left: 25px !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-l-32 {
    margin-left: 32px !important;
}

.m-l-35 {
    margin-left: 35px !important;
}

.m-l-40 {
    margin-left: 40px !important;
}

.m-l-45 {
    margin-left: 45px !important;
}

.m-l-48 {
    margin-left: 48px !important;
}

.m-l-50 {
    margin-left: 50px !important;
}

.m-l-55 {
    margin-left: 55px !important;
}

.m-l-56 {
    margin-left: 56px !important;
}

.m-l-60 {
    margin-left: 60px !important;
}

.m-l-64 {
    margin-left: 64px !important;
}

.m-l-65 {
    margin-left: 65px !important;
}

.m-l-70 {
    margin-left: 70px !important;
}

.m-l-72 {
    margin-left: 72px !important;
}

.m-l-75 {
    margin-left: 75px !important;
}

.m-l-80 {
    margin-left: 80px !important;
}

.m-l-85 {
    margin-left: 85px !important;
}

.m-l-88 {
    margin-left: 88px !important;
}

.m-l-90 {
    margin-left: 90px !important;
}

.m-l-95 {
    margin-left: 95px !important;
}

.m-l-96 {
    margin-left: 96px !important;
}

.m-l-100 {
    margin-left: 100px !important;
}

/* padding */
.p-0 {
    padding: 0 !important;
}

/* padding-top */
.p-t-0 {
    padding-top: 0 !important;
}

.p-t-8 {
    padding-top: 8px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

/* padding-bottom */
.p-b-0 {
    padding-bottom: 0 !important;
}

.p-b-8 {
    padding-bottom: 8px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

/* padding-left */
.p-l-0 {
    padding-left: 0 !important;
}

.p-l-8 {
    padding-left: 8px !important;
}

.p-l-10 {
    padding-left: 10px !important;
}

.p-l-24 {
    padding-left: 24px !important;
}

/* padding-right */
.p-r-0 {
    padding-right: 0 !important;
}

.p-r-8 {
    padding-right: 8px !important;
}

.p-r-10 {
    padding-right: 10px !important;
}

.p-r-24 {
    padding-right: 24px !important;
}

/* 宽度 */
.w-100 {
    width: 100%;
}

.w-95 {
    width: 90%;
}

.w-90 {
    width: 90%;
}

.w-80 {
    width: 80%;
}

.w-75 {
    width: 75%;
}

.w-70 {
    width: 70%;
}

.w-65 {
    width: 65%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-40 {
    width: 40%;
}

.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}

.w-15 {
    width: 15%;
}

.w-10 {
    width: 10%;
}

.w-5 {
    width: 5%;
}

/* 栅格 */
.zl-row {
    position: relative;
    box-sizing: border-box;
}

.zl-col-1 {
    width: 4.16667%;
}

.zl-col-2 {
    width: 8.33332%;
}

.zl-col-3 {
    width: 12.5%;
}

.zl-col-4 {
    width: 16.66667%;
}

.zl-col-5 {
    width: 20.83332%;
}

.zl-col-6 {
    width: 25%;
}

.zl-col-7 {
    width: 29.16667%;
}

.zl-col-8 {
    width: 33.33333%;
}

.zl-col-9 {
    width: 37.5%;
}

.zl-col-10 {
    width: 41.66667%;
}

.zl-col-11 {
    width: 45.83332%;
}

.zl-col-12 {
    width: 50%;
}

.zl-col-13 {
    width: 54.16667%;
}

.zl-col-14 {
    width: 58.33332%;
}

.zl-col-15 {
    width: 62.5%;
}

.zl-col-16 {
    width: 66.66667%;
}

.zl-col-17 {
    width: 70.83332%;
}

.zl-col-18 {
    width: 75%;
}

.zl-col-19 {
    width: 79.16667%;
}

.zl-col-20 {
    width: 83.33332%;
}

.zl-col-21 {
    width: 87.5%;
}

.zl-col-22 {
    width: 91.66667%;
}

.zl-col-23 {
    width: 95.83332%;
}

.zl-col-24 {
    width: 100%;
}

.zl-col,
[class*=zl-col-] {
    float: left;
    box-sizing: border-box;
}

/**
* 说明 暂时 zl-row-gutter 支持
* 8(或者 8px),
* 10(或者 10px),15(或者 15px), 16(或者 16px)
* 20(或者 20px)默认,24(或者 24px),25(或者 25px)
* 30(或者 30px),32(或者 32px),35(或者 35px)
* 40(或者 40px),45(或者 45px),48(或者 48px)
* 50(或者 50px),55(或者 55px),56(或者 56px)
*/
.zl-row-gutter:after, .zl-row-gutter:before,
.zl-row:after, .zl-row:before {
    display: table;
    content: "";
}

.zl-row-gutter:after,
.zl-row:after {
    clear: both;
}

.zl-row-gutter:after, .zl-row-gutter:before,
.zl-row:after, .zl-row:before {
    display: table;
    content: "";
}

.zl-row-gutter {
    position: relative;
    box-sizing: border-box;
}

/* 分栏间隔 20px 默认 */
.zl-row-gutter {
    margin-left: -10px;
    margin-right: -10px;
}

.zl-row-gutter [class*=zl-col-] {
    padding-left: 10px;
    padding-right: 10px;
}

/* 分栏间隔 8px  */
.zl-row-gutter[zl-row-gutter='8'],
.zl-row-gutter[zl-row-gutter='8px'] {
    margin-left: -4px;
    margin-right: -4px;
}

.zl-row-gutter[zl-row-gutter='8'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='8px'] [class*=zl-col-] {
    padding-left: 4px;
    padding-right: 4px;
}

/* 分栏间隔 10px  */
.zl-row-gutter[zl-row-gutter='10'],
.zl-row-gutter[zl-row-gutter='10px'] {
    margin-left: -5px;
    margin-right: -5px;
}

.zl-row-gutter[zl-row-gutter='10'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='10px'] [class*=zl-col-] {
    padding-left: 5px;
    padding-right: 5px;
}

/* 分栏间隔 15px  */
.zl-row-gutter[zl-row-gutter='15'],
.zl-row-gutter[zl-row-gutter='15px'] {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.zl-row-gutter[zl-row-gutter='15'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='15px'] [class*=zl-col-] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

/* 分栏间隔 16px  */
.zl-row-gutter[zl-row-gutter='16'],
.zl-row-gutter[zl-row-gutter='16px'] {
    margin-left: -8px;
    margin-right: -8px;
}

.zl-row-gutter[zl-row-gutter='16'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='16px'] [class*=zl-col-] {
    padding-left: 8px;
    padding-right: 8px;
}

/* 分栏间隔 20px  */
.zl-row-gutter[zl-row-gutter='20'],
.zl-row-gutter[zl-row-gutter='20px'] {
    margin-left: -10px;
    margin-right: -10px;
}

.zl-row-gutter[zl-row-gutter='20'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='20px'] [class*=zl-col-] {
    padding-left: 10px;
    padding-right: 10px;
}

/* 分栏间隔 24px  */
.zl-row-gutter[zl-row-gutter='24'],
.zl-row-gutter[zl-row-gutter='24px'] {
    margin-left: -12px;
    margin-right: -12px;
}

.zl-row-gutter[zl-row-gutter='24'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='24px'] [class*=zl-col-] {
    padding-left: 12px;
    padding-right: 12px;
}

/* 分栏间隔 25px  */
.zl-row-gutter[zl-row-gutter='25'],
.zl-row-gutter[zl-row-gutter='25px'] {
    margin-left: -12.5px;
    margin-right: -12.5px;
}

.zl-row-gutter[zl-row-gutter='25'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='25px'] [class*=zl-col-] {
    padding-left: 12.5px;
    padding-right: 12.5px;
}

/* 分栏间隔 30px  */
.zl-row-gutter[zl-row-gutter='30'],
.zl-row-gutter[zl-row-gutter='30px'] {
    margin-left: -15px;
    margin-right: -15px;
}

.zl-row-gutter[zl-row-gutter='30'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='30px'] [class*=zl-col-] {
    padding-left: 15px;
    padding-right: 15px;
}

/* 分栏间隔 32px  */
.zl-row-gutter[zl-row-gutter='32'],
.zl-row-gutter[zl-row-gutter='32px'] {
    margin-left: -16px;
    margin-right: -16px;
}

.zl-row-gutter[zl-row-gutter='32'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='32px'] [class*=zl-col-] {
    padding-left: 16px;
    padding-right: 16px;
}

/* 分栏间隔 35px  */
.zl-row-gutter[zl-row-gutter='35'],
.zl-row-gutter[zl-row-gutter='35px'] {
    margin-left: -17.5px;
    margin-right: -17.5px;
}

.zl-row-gutter[zl-row-gutter='35'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='35px'] [class*=zl-col-] {
    padding-left: 17.5px;
    padding-right: 17.5px;
}

/* 分栏间隔 40px  */
.zl-row-gutter[zl-row-gutter='40'],
.zl-row-gutter[zl-row-gutter='40px'] {
    margin-left: -20px;
    margin-right: -20px;
}

.zl-row-gutter[zl-row-gutter='40'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='40px'] [class*=zl-col-] {
    padding-left: 20px;
    padding-right: 20px;
}

/* 分栏间隔 45px  */
.zl-row-gutter[zl-row-gutter='45'],
.zl-row-gutter[zl-row-gutter='45px'] {
    margin-left: -22.5px;
    margin-right: -22.5px;
}

.zl-row-gutter[zl-row-gutter='45'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='45px'] [class*=zl-col-] {
    padding-left: 22.5px;
    padding-right: 22.5px;
}

/* 分栏间隔 48px  */
.zl-row-gutter[zl-row-gutter='48'],
.zl-row-gutter[zl-row-gutter='48px'] {
    margin-left: -24px;
    margin-right: -24px;
}

.zl-row-gutter[zl-row-gutter='48'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='48px'] [class*=zl-col-] {
    padding-left: 24px;
    padding-right: 24px;
}

/* 分栏间隔 50px  */
.zl-row-gutter[zl-row-gutter='50'],
.zl-row-gutter[zl-row-gutter='50px'] {
    margin-left: -25px;
    margin-right: -25px;
}

.zl-row-gutter[zl-row-gutter='50'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='50px'] [class*=zl-col-] {
    padding-left: 25px;
    padding-right: 25px;
}

/* 分栏间隔 55px  */
.zl-row-gutter[zl-row-gutter='55'],
.zl-row-gutter[zl-row-gutter='55px'] {
    margin-left: -27.5px;
    margin-right: -27.5px;
}

.zl-row-gutter[zl-row-gutter='55'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='55px'] [class*=zl-col-] {
    padding-left: 27.5px;
    padding-right: 27.5px;
}

/* 分栏间隔 56px  */
.zl-row-gutter[zl-row-gutter='56'],
.zl-row-gutter[zl-row-gutter='56px'] {
    margin-left: -28px;
    margin-right: -28px;
}

.zl-row-gutter[zl-row-gutter='56'] [class*=zl-col-],
.zl-row-gutter[zl-row-gutter='56px'] [class*=zl-col-] {
    padding-left: 28px;
    padding-right: 28px;
}

/* 分栏间隔 0.2rem  */
.zl-row-gutter[zl-row-gutter='0.2rem'] {
    margin-left: -0.1rem;
    margin-right: -0.1rem;
}

.zl-row-gutter[zl-row-gutter='0.2rem'] [class*=zl-col-] {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
}


/*单行文本溢出显示省略号*/
.clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

/*限制p元素之显示2行文字，同时出现省略号。*/
.clamp-2 {
    overflow: hidden;
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*限制p元素之显示3行文字，同时出现省略号。*/
.clamp-3 {
    overflow: hidden;
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/*居中 方式1*/
.middle-parent {
    position: relative;
}

.middle-block {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

/*背景图为空*/
.bg-no {
    background: none !important;
}


/* 单选 */
.radio-box {
    position: relative;
    display: inline-block;
    padding-right: 15px;
    cursor: pointer;
}

input[type="radio"] + span::before {
    content: "\a0";
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    width: 13px;
    height: 13px;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid var(--border-1);
    text-indent: .15em;
    line-height: 1;
}

input[type="radio"]:checked + span::before {
    background-color: var(--main-color);
    background-clip: content-box;
    border: 1px solid var(--main-color);
    padding: .2em;
    width: 8px;
    height: 8px;
}

input[type="radio"] {
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0;
}


/*复选框*/
.zl-checkbox-box {
    cursor: pointer;
}

.zl-checkbox-box input[type="checkbox"] {
    width: 14px;
    height: 14px;
    position: relative;
    text-align: center;
    cursor: pointer;
    margin-right: 10px;
}

.zl-checkbox-box input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--white);
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-1);
    border-radius: 3px;
}

.zl-checkbox-box input[type="checkbox"]:checked::before {
    border: 1px solid var(--main-color);
}

.zl-checkbox-box input[type="checkbox"]:checked::after {
    content: "\2713";
    position: absolute;
    top: 0;
    left: 1px;
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    color: var(--main-color);
    border-radius: 3px;
}

/* 仿 select */
.zl-btn-group {
    text-align: right;
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    height: 32px;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    display: inline-block;
}

.zl-btn-group .dropdown-btn {
    width: 100%;
    color: #585858;
    background-color: white;
    border: none;
    cursor: pointer;
    height: 100%;
    padding-left: 10px;
    padding-right: 5px;
    display: block;
}

.zl-btn-group .dropdown-btn .select_name {
    text-align: left;
    line-height: 35px;
    display: inline-block;
    height: 35px;
}

.zl-btn-group.open,
.zl-btn-group:hover {
    border-color: var(--main-color);
}

.zl-btn-group .dropdown-btn:hover span {
    color: var(--main-color);
}


.zl-btn-group .dropdown-btn:hover .caret {
    border-top: 5px solid var(--main-color);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.zl-btn-group .caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: top;
    border-top: 5px solid #585858;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: "";
    margin: 13px 10px 0 0;
    float: right;
}


.zl-btn-group .caret-2 {
    margin: 13px 10px 0 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color: #929292;
    -webkit-transform: rotate(-135deg) translate(0, -50%);
    -moz-transform: rotate(-135deg) translate(0, -50%);
    -ms-transform: rotate(-135deg) translate(0, -50%);
    -o-transform: rotate(-135deg) translate(0, -50%);
    transform: rotate(-135deg) translate(0, -50%);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    -moz-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
    -ms-transition: all .3s ease-out;
    /* IE 9 */
    -moz-transition: all .3s ease-out;
    /* Firefox */
    -webkit-transition: all .3s ease-out;
    /* Safari 和 Chrome */
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;

}

.zl-btn-group .dropdown-btn:hover .caret-2 {
    border-color: #3182E3;
}

.zl-btn-group.open .dropdown-btn .caret-2 {
    -webkit-transform: rotate(45deg) translate(0, 0);
    -moz-transform: rotate(45deg) translate(0, 0);
    -ms-transform: rotate(45deg) translate(0, 0);
    -o-transform: rotate(45deg) translate(0, 0);
    transform: rotate(45deg) translate(0, 0);
}

.zl-btn-group .select-name {
    max-width: 105px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    float: left;
}

.zl-btn-group .dropdown-menu {
    width: 100%;
    position: absolute;
    top: 32px;
    right: 0;
    background-color: white;
    display: none;
    z-index: 99;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.zl-btn-group .dropdown-menu li {
    line-height: 32px;
}

.zl-btn-group .dropdown-menu > li > a {
    display: block;
    padding: 0 10px;
    clear: both;
    font-weight: normal;
    line-height: 32px;
    color: #333333;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 3px;
    max-width: 500px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
}

.zl-btn-group .dropdown-menu > li > a:hover {
    color: var(--link-colo-hover);
}

.zl-btn-group.open > .dropdown-menu {
    display: block;
}

/* 按钮 */

/* 默认按钮 */
.zl-button--default {
    background: white;
    border: 1px solid var(--link-color);
    color: var(--link-color);
    box-sizing: border-box;
    height: 32px;
    line-height: 30px;
    padding: 0 15px 0 15px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}

/* 主要按钮 */
.zl-button--primary {
    color: #fff;
    background-color: var(--link-color);
    border-color: var(--link-color);
    box-sizing: border-box;
    height: 32px;
    line-height: 30px;
    padding: 0 15px 0 15px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}

/* 成功按钮 */
.zl-button--success {

}

/* 信息按钮 */
.zl-button--info {

}

/* 警告按钮 */
.zl-button--warning {

}

/* 危险按钮 */
.zl-button--danger {

}

/* 大型-按钮 */
[class*=zl-button--][size*=big] {
    height: 40px;
    line-height: 38px;
    padding: 0 40px;
}

[class*=zl-button--][size*=big] {
    height: 40px;
    line-height: 38px;
}

[class*=zl-button--][size*=big][round] {
    border-radius: 19px;
}

/* 中型-按钮 */
[class*=zl-button--][size*=medium] {
    height: 36px;
    line-height: 34px;
}

[class*=zl-button--][size*=medium][round] {
    border-radius: 17px;
}

/* 小型-按钮 */
[class*=zl-button--][size*=small] {
    height: 28px;
    line-height: 26px;
}


[class*=zl-button--][size*=small][round] {
    border-radius: 13px;
}

/* 超小-按钮 */
[class*=zl-button--][size*=mini] {
    height: 24px;
    line-height: 22px;
}

[class*=zl-button--][size*=mini][round] {
    border-radius: 11px;
}


/* 图标按钮 */


/* 解释说明*/
.zl-explain-box {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 20px;
}


.zl-explain-box .zl-icon-explain {
    cursor: pointer;
}

.zl-explain-dropdown::before {
    content: "";
    position: absolute;
    top: -10px;
    background: transparent;
    height: 15px;
    width: 100%;
    left: 0;
}

.zl-explain-dropdown {
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(210, 210, 210);
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    padding: 8px;
    line-height: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    top: 24px;
    left: -16px;
    z-index: 99;
    min-width: 100px;
    color: #1a2531;
    font-size: 12px;
    /*display: block;*/
}

.zl-explain-box:hover .zl-explain-dropdown {
    display: block;
}


/* 向上箭头 默认 */
.zl-popper-bottom .popper__arrow {
    top: -6px;
    left: 16px;
    margin-right: 3px;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));

    border-top-width: 0;
    border-bottom-color: rgb(210, 210, 210);
}

.zl-popper-bottom .popper__arrow:after {
    content: " ";
    top: 1px;
    left: -6px;
    margin-right: 3px;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
    border-top-width: 0;
    border-bottom-color: white;
}

/* 进度条 */
.zl-progress-bar {

}

.zl-progress-bar::after {
    content: "";
    display: table;
    clear: both;
}

.zl-progress-bar-outer {
    margin-top: 7px;
    height: 18px;
    border-radius: 100px;
    background-color: #f5f6f8;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: calc(100% - 50px);
    border: solid 1px #dfdfdf;
    float: left;
    box-sizing: border-box;
}

.zl-progress-bar-inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--link-color);
    text-align: right;
    border-radius: 100px;
    line-height: 1;
    white-space: nowrap;
    transition: width .6s ease;
}

.zl-progress-text {
    width: 50px;
    font-size: 16px;
    line-height: 32px;
    text-align: right;
    float: right;
}


/* Rate 评分 */
.zl-rate {

}

.zl-rate-item {
    width: 22px;
    height: 22px;
    /*background-color: #dbdee1;*/
    display: inline-block;
    position: relative;
    margin-top: 4px;
    margin-right: 10px;
    background: url("../images/iconImages/zl-icon-rate.png") no-repeat center;
}

.zl-rate .zl-rate-active {
    background: url("../images/iconImages/zl-icon-rate-active.png") no-repeat center;
}


.float-r {
    float: right;
}

.float-l {
    float: left;
}