@charset "utf-8";
/* css初始化 从normalize.css中提取 */
html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
body {
    margin:0;
    padding:0;
    border:0;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block
}
audio, canvas, progress, video {
    display: inline-block
}
progress {
    vertical-align: baseline
}
audio:not([controls]) {
    display: none;
    height: 0
}
[hidden], template {
    display: none
}
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}
a:active, a:hover {
    outline-width: 0
}
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}
dfn {
    font-style: italic
}
mark {
    background: #ff0;
    color: #000
}
small {
    font-size: 80%
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
sub {
    bottom: -0.25em
}
sup {
    top: -0.5em
}
figure {
    margin: 1em 40px
}
img {
    border-style: none
}
svg:not(:root) {
    overflow: hidden
}
code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}
button, input, select, textarea {
    font: inherit;
    margin: 0
}
optgroup {
    font-weight: bold
}
button, input {
    overflow: visible
}
button, select {
    text-transform: none
}
button, html [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button
}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
border-style:none;
padding:0
}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
outline:1px dotted ButtonText
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em
}
legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}
textarea {
    overflow: auto
}
[type=checkbox], [type=radio] {
    padding: 0
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height:auto
}
[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
::-webkit-input-placeholder {
color:inherit;
opacity:0.54
}
::-webkit-file-upload-button {
-webkit-appearance:button;
font:inherit
}
/* End css初始化 */
html, body {
    font-family: Arial,"宋体","Arial Narrow",Helvetica,sans-serif;
    font-size: 17px;
}
html {
    overflow-x: hidden
}
h1 {
    font-size: 2rem
}
h2 {
    font-size: 1.8rem
}
h3 {
    font-size: 1.4rem
}
h4 {
    font-size: 1.17rem
}
h5 {
    font-size: 1.06rem
}
h6 {
    font-size: 0.9rem
}
.cx衬线体 {
    font-family: serif
}
h1, h2, h3, h4, h5, h6 {
    margin: 10px 0;
    font-family: "Open Sans", sans-serif;
}
.jj文字间距 {
    letter-spacing: 4px
}
hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0
}
.tp图片 {
    max-width: 100%;
    height: auto
}
img {
    vertical-align: middle
}
a {
    color: inherit
}
div.gd粘在顶部 /* 必须在div的class里面 */{
    z-index: 3;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.bg基本表格, .bg表格 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table
}
.bg表格 {
    border: 1px solid #ccc
}
.bg底边框 tr, .bg表格 tr {
    border-bottom: 1px solid #ddd
}
.bg条纹 tbody tr:nth-child(even) {
    background-color: #f1f1f1
}
.bg表格 tr:nth-child(odd) {
    background-color: #fff
}
.bg表格 tr:nth-child(even) {
    background-color: #f1f1f1
}
.bg悬停 tbody tr:hover, .lb列表.lb悬停 li:hover {
    background-color: #ccc
}
.bg居中 tr th, .bg居中 tr td {
    text-align: center
}
.bg基本表格 td, .bg基本表格 th, .bg表格 td, .bg表格 th {
    padding: 8px 8px;
    display: table-cell;
    text-align: left;
    vertical-align: top
}
.bg基本表格 th:first-child, .bg基本表格 td:first-child, .bg表格 th:first-child, .bg表格 td:first-child {
    padding-left: 16px
}
.an2按钮, .an按钮 {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}
.an2按钮:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
}
.an按钮:hover {
    color: #000;
    background-color: #ccc;
}
.an2按钮, .an按钮 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.sx失效, .an2按钮:disabled, .an按钮:disabled {
    cursor: not-allowed;
    opacity: 0.3
}
.sx失效 *, :disabled * {
    pointer-events: none
}
.an2按钮.sx失效:hover, .an2按钮:disabled:hover {
    box-shadow: none
}
.hz徽章, .bq标签 {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center
}
.hz徽章 {
    border-radius: 50%
}
.lb列表 {
    list-style-type: none;
    padding: 0;
    margin: 0
}
.lb列表 li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd
}
.lb列表 li:last-child {
    border-bottom: none
}
.ts提示, .xs显示内容 {
    position: relative
}
.ts提示 .wb文本 {
    display: none
}
.ts提示:hover .wb文本 {
    display: inline-block
}
.bw波纹:active {
    opacity: 0.5
}
.bw波纹 {
    transition: opacity 0s
}
.bd输入框 {
    padding: 0.5rem 0px;
    display: block;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%
}
.bd全宽输入框 {
    transition: width 0.4s ease-in-out
}
.bd全宽输入框:focus {
    width: 95%!important
}
.bd下拉列表 /* select  <option value="1">选项1</option> */{
    padding: 9px 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc
}
.bd多选, .bd单选 /*选项在<lable>标签里面*/{
    width: 24px;
    height: 24px;
    position: relative;
    top: 6px
}
.xg过渡, #main {
    transition: margin-left .4s
}
.tc弹窗 {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4)
}
.tc弹窗内容 {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px
}
.k块 /* bar */{
    display: block;
    width: 100%
}
.h行滚动 /* responsive */{
    display: block;
    overflow-x: auto
}
.rq容器:after, .rq容器:before, .mb面板:after, .mb面板:before, .h行:after, .h行:before, .h行有内边距:after, .h行有内边距:before, .h水平整行:before, .h水平整行:after, .qc清除:after, .qc清除:before {
    content: "";
    display: table;
    clear: both
}
.l列, .l一半, .l三分之一, .l三分之二, .l四分之三, .l四分之一 {
    float: left;
    width: 100%
}
.l列.x1 {
    width: 8.33333%
}
.l列.x2 {
    width: 16.66666%
}
.l列.x3 {
    width: 24.99999%
}
.l列.x4 {
    width: 33.33333%
}
.l列.x5 {
    width: 41.66666%
}
.l列.x6 {
    width: 49.99999%
}
.l列.x7 {
    width: 58.33333%
}
.l列.x8 {
    width: 66.66666%
}
.l列.x9 {
    width: 74.99999%
}
.l列.x10 {
    width: 83.33333%
}
.l列.x11 {
    width: 91.66666%
}
.l列.x12 {
    width: 99.99999%
}

@media (min-width:601px) {
    .l列.z1 {
        width: 8.33333%
    }
    .l列.z2 {
        width: 16.66666%
    }
    .l列.z3, .l四分之一 {
        width: 24.99999%
    }
    .l列.z4, .l三分之一 {
        width: 33.33333%
    }
    .l列.z5 {
        width: 41.66666%
    }
    .l列.z6, .l一半 {
        width: 49.99999%
    }
    .l列.z7 {
        width: 58.33333%
    }
    .l列.z8, .l三分之二 {
        width: 66.66666%
    }
    .l列.z9, .l四分之三 {
        width: 74.99999%
    }
    .l列.z10 {
        width: 83.33333%
    }
    .l列.z11 {
        width: 91.66666%
    }
    .l列.z12 {
        width: 99.99999%
    }
}

@media (min-width:993px) {
    .l列.d1 {
        width: 8.33333%
    }
    .l列.d2 {
        width: 16.66666%
    }
    .l列.d3 {
        width: 24.99999%
    }
    .l列.d4 {
        width: 33.33333%
    }
    .l列.d5 {
        width: 41.66666%
    }
    .l列.d6 {
        width: 49.99999%
    }
    .l列.d7 {
        width: 58.33333%
    }
    .l列.d8 {
        width: 66.66666%
    }
    .l列.d9 {
        width: 74.99999%
    }
    .l列.d10 {
        width: 83.33333%
    }
    .l列.d11 {
        width: 91.66666%
    }
    .l列.d12 {
        width: 99.99999%
    }
}
.rq中心容器 /* content */{
    margin: auto;
}
@media (min-width: 1170px){
    .rq中心容器 {
        width: 1170px;
    }
}
.l剩余宽度 /* rest */{
    overflow: hidden
}
.h行居中 {
    margin: auto;
}
.h水平整行 {
    display: table;
    width: 100%
}
.h等高行 {
    display: table-cell;
}
.h水平整行 .wb垂直居中 /*相当于表格内文字垂直居中*/{
    display: table-cell;
    vertical-align: middle;
}
.h文字纵上 {
    vertical-align: top
}
.h文字纵中 {
    vertical-align: middle
}
.h文字纵下 {
    vertical-align: bottom
}
.xs元素不显示 {
    display: none;
}
.xs换行块, .xs显示 {
    display: block;
}
.xs不换行块 {
    display: inline-block;
}

.xl点击下拉,.xl悬停下拉 {
    position:relative;
    display:inline-block;
    cursor:pointer;
}
.xl悬停下拉:hover .xl下拉容器 {
    display:block;
}
.xl下拉容器 {
    cursor:auto;
    color:#000;
    background-color:#fff;
    display:none;
    position:absolute;
    min-width:160px;
    z-index:1;
    margin:0;
    padding:0;
}
.xl悬停下拉:first-child,.xl点击下拉:hover,.xl悬停下拉:hover > .an按钮:first-child,.xl点击下拉:hover > .an按钮:first-child {
    background-color:#ccc;
    color:#000;
}

@media (max-width:600px) {
    .tc弹窗内容 {
        margin: 0 10px;
        width: auto!important
    }
    .tc弹窗 /* 模态框 modal */{
        padding-top: 30px
    }
    .yc小屏隐藏 {
        display: none!important
    }
    .l小屏独行 {
        display: block;
        width: 100%!important;
    }
    .xl悬停下拉.l小屏独行,.xl点击下拉.l小屏独行 {
        text-align:center;
    }
    .xl悬停下拉.l小屏独行 .xl下拉容器,.xl点击下拉.l小屏独行 .xl下拉容器 {
        position:relative;
    }
    .xl悬停下拉.l小屏独行,.xl悬停下拉.l小屏独行 .an2按钮,.xl悬停下拉.l小屏独行 .an按钮,.xl点击下拉.l小屏独行,.xl点击下拉.l小屏独行 .an2按钮,.xl点击下拉.l小屏独行 .an按钮 {
        width:100%;
    }
}

@media (max-width:768px) {
    .tc弹窗内容 {
        width: 500px
    }
    .tc弹窗 {
        padding-top: 50px
    }
}

@media (min-width:993px) {
    .tc弹窗内容 {
        width: 900px
    }
    .yc大屏隐藏 {
        display: none!important
    }
}

@media (max-width:992px) and (min-width:601px) {
    .yc中屏隐藏 {
        display: none!important
    }
}

.gd上边, .gd下边 {
    position: fixed;
    width: 100%;
    z-index: 1
}
.gd上边 {
    top: 0
}
.gd下边 {
    bottom: 0
}
.fg覆盖 /* 覆盖 overlay */{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2
}
.gd左上 /* 相对父元素固定 */{
    position: absolute;
    left: 0;
    top: 0
}
.gd右上 {
    position: absolute;
    right: 0;
    top: 0
}
.gd左下 {
    position: absolute;
    left: 0;
    bottom: 0
}
.gd右下 /* 相对父元素固定 */{
    position: absolute;
    right: 0;
    bottom: 0
}
.gd中心 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}
.gd左边 {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%)
}
.gd右边 /* 相对父元素固定 */{
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%)
}
.gd上中 {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}
.gd下中 {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}
.xs显示内容:hover .xs显示悬浮 {
    display: block
}
.xs显示内容:hover span.xs显示悬浮 {
    display: inline-block
}
.xs显示悬停 {
    display: none
}
.xs固定 {
    position: absolute
}
.y圆 {
    border-radius: 50%
}
.yj圆角2 {
    border-radius: 2px
}
.yj圆角, .yj圆角4 {
    border-radius: 4px
}
.yj圆角8 {
    border-radius: 8px
}
.yj圆角16 {
    border-radius: 16px
}
.yj圆角32 {
    border-radius: 32px
}
.h行有内边距, .h行有内边距>.l一半, .h行有内边距>.l三分之一, .h行有内边距>.l三分之二, .h行有内边距>.l四分之三, .h行有内边距>.l四分之一, .h行有内边距>.l列 {
    padding: 0 8px
}
.rq容器, .mb面板 /* container panel */{
    padding: 0.01em 16px
}
.mb面板 {
    margin-top: 16px;
    margin-bottom: 16px
}
.dm代码, .dm范围 {
    font-family: Consolas, "courier new";
    font-size: 16px
}
.dm代码 {
    width: auto;
    background-color: #fff;
    padding: 8px 12px;
    border-left: 4px solid #4CAF50;
    word-wrap: break-word
}
.dm范围 {
    color: crimson;
    background-color: #f1f1f1;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 110%
}
.kp卡片 {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)
}
.kp卡片4, .xf悬浮阴影:hover {
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19)
}
.zx旋转 {
    animation: zx旋转 2s infinite linear
}
@keyframes zx旋转 {
    0% {
    transform:rotate(0deg)
    }
    100% {
    transform:rotate(359deg)
    }
}
.zx缓入展现 /* animate 动画 */{
    animation: fading 10s infinite
}
@keyframes fading {
    0% {
    opacity:0
    }
    50% {
    opacity:1
    }
    100% {
    opacity:0
    }
}
.zx淡入展现 /* animate 动画 */{
    animation: opac 0.8s
}
@keyframes opac {
    from {
    opacity:0
    }
    to {
    opacity:1
    }
}
.zx向下展现 /* animate 动画 */{
    position: relative;
    animation: animatetop 0.4s
}
@keyframes animatetop {
    from {
    top:-300px;
    opacity:0
    }
    to {
    top:0;
    opacity:1
    }
}
.zx向右展现 /* animate 动画 */{
    position: relative;
    animation: animateleft 0.4s
}
@keyframes animateleft {
    from {
    left:-300px;
    opacity:0
    }
    to {
    left:0;
    opacity:1
    }
}
.zx向左展现 /* animate 动画 */{
    position: relative;
    animation: animateright 0.4s
}
@keyframes animateright {
    from {
    right:-300px;
    opacity:0
    }
    to {
    right:0;
    opacity:1
    }
}
.zx向上展现 /* animate 动画 */{
    position: relative;
    animation: animatebottom 0.4s
}
@keyframes animatebottom {
    from {
    bottom:-300px;
    opacity:0
    }
    to {
    bottom:0;
    opacity:1
    }
}
.zx放大展现 /* animate 动画 */{
    animation: animatezoom 0.6s
}
@keyframes animatezoom {
    from {
    transform:scale(0)
    }
    to {
    transform:scale(1)
    }
}
.xg透明, .xg悬浮透明:hover {
    opacity: 0.60
}
.xg不透明, .xg悬浮不透明:hover {
    opacity: 1
}
.xg透明025 {
    opacity: 0.25
}
.xg透明075 {
    opacity: 0.75
}
.xg灰度100, .xg悬浮灰度100:hover {
    filter: grayscale(100%)
}
.xg灰度 {
    filter: grayscale(75%)
}
.xg灰度050 {
    filter: grayscale(50%)
}
.xg褐色 {
    filter: sepia(75%)
}
.xg褐色100, .xg悬浮褐色100:hover {
    filter: sepia(100%)
}
.xg褐色050 {
    filter: sepia(50%)
}
.wz文字10 {
    font-size: 10px!important
}
.wz文字12 {
    font-size: 12px!important
}
.wz文字15 {
    font-size: 15px!important
}
.wz文字18 {
    font-size: 18px!important
}
.wz文字24 {
    font-size: 24px!important
}
.wz文字36 {
    font-size: 36px!important
}
.wz文字48 {
    font-size: 48px!important
}
.wz文字64 {
    font-size: 64px!important
}
.dq左对齐 {
    text-align: left!important
}
.dq右对齐 {
    text-align: right!important
}
.dq两端对齐 {
    text-align: justify!important
}
.dq居中对齐 {
    text-align: center!important
}
.bk无边框 {
    border: 0!important
}
.bk边框 {
    border: 1px solid #ccc!important
}
.bk上边框 {
    border-top: 1px solid #ccc!important
}
.bk下边框 {
    border-bottom: 1px solid #ccc!important
}
.bk左边框 {
    border-left: 1px solid #ccc!important
}
.bk右边框 {
    border-right: 1px solid #ccc!important
}
.bk6上边框 {
    border-top: 6px solid #ccc!important
}
.bk6下边框 {
    border-bottom: 6px solid #ccc!important
}
.bk6左边框 {
    border-left: 6px solid #ccc!important
}
.bk6右边框 {
    border-right: 6px solid #ccc!important
}
.dl段落, .dm代码 /* section code*/{
    margin-top: 16px!important;
    margin-bottom: 16px!important
}
.wb无外边距 {
    margin: 0!important
}
.wb外边距 {
    margin: 1rem!important
}
.wb外边距上边 {
    margin-top: 1rem!important
}
.wb外边距下边 {
    margin-bottom: 1rem!important
}
.wb外边距左边 {
    margin-left: 1rem!important
}
.wb外边距右边 {
    margin-right: 1rem!important
}
.wb外边距左右 {
    margin: 0 0.2rem !important
}
.wb外边距上下 {
    margin: 0.2rem 0 !important
}
.nb无内边距 {
    padding: 0px 0px!important
}
.nb内边距上下 {
    padding: 0.2rem 0!important
}
.nb内边距左右 {
    padding: 0 0.2rem!important
}
.nb内边距4 {
    padding: 4px 8px!important
}
.nb内边距 {
    padding: 8px 16px!important
}
.nb内边距12 {
    padding: 12px 24px!important
}
.nb内边距16 {
    padding-top: 16px!important;
    padding-bottom: 16px!important
}
.nb内边距24 {
    padding-top: 24px!important;
    padding-bottom: 24px!important
}
.nb内边距32 {
    padding-top: 32px!important;
    padding-bottom: 32px!important
}
.nb内边距48 {
    padding-top: 48px!important;
    padding-bottom: 48px!important
}
.nb内边距64 {
    padding-top: 64px!important;
    padding-bottom: 64px!important
}
.fd左浮动 {
    float: left!important
}
.fd右浮动 {
    float: right!important
}
.fd清除浮动 /* Clearfix 围绕*/ {
    overflow: auto;
}
.bj背景透明, .xf无悬浮:hover {
    background-color: transparent!important
}
.xf无悬浮:hover {
    box-shadow: none!important
}
.wx无下划线, .wx无下划线:hover {/* 无下划线的a链接 */
    text-decoration:none
}
.xg文字阴影 {/* （text-shadow） */
	text-shadow: 1px 1px 0 #444
}
.db回顶部{
	background: #64BFAE; color: #fff;
	width: 3rem; height: 3rem; right: 2rem; bottom: 3rem;
	line-height: 3rem; text-align: center;
	position: fixed; cursor: pointer;
	font-size: 1rem;
}
/* 颜色 Colors */
/*  文字颜色 */
.ys透明字, .ysa色0, .xt悬停透明字:hover {
    color: transparent;
}
.ys红字, .ysa色1, .xt悬停红字:hover {
    color: #f00;
}
.ys橙字, .ysa色2, .xt悬停橙字:hover {
    color: #f60;
}
.ys黄字, .ysa色a3, .xt悬停黄字:hover {
    color: #ff0;
}
.ys绿字, .ysa色4, .xt悬绿黄字:hover {
    color: #0f0;
}
.ys青字, .ysa色5, .xt悬停青字:hover {
    color: #0ff;
}
.ys蓝字, .ysa色6, .xt悬停蓝字:hover {
    color: #39f;
}
.ys紫字, .ysa色7, .xt悬停紫字:hover {
    color: #a0a;
}
.ys黑字, .ysa色8, .xt悬停黑字:hover {
    color: #000;
}
.ys白字, .ysa色9, .xt悬停白字:hover {
    color: #fff;
}
.ys灰字, .ysa色10, .xt悬停灰字:hover {
    color: #ccc;
}
/* 文字颜色 b类 */
.ys棕红字, .ysb色1, .xt悬停棕红字:hover {
    color: #88686a;
}
.ys粉字, .ysb色2, .xt悬停粉字:hover {
    color: #e91e63;
}
.ys靛字, .ysb色3, .xt悬停靛字:hover {
    color: #3f51b5;
}
.ys深紫字, .ysb色4, .xt悬停深紫字:hover {
    color: #673ab7;
}
.ys深绿字, .ysb色5, .xt悬停深绿字:hover {
    color: #009999;
}
.ys天蓝字, .ysb色6, .xt悬停天蓝字:hover {
    color: #00ccff;
}
.ys蓝灰字, .ysb色7, .xt悬停蓝灰字:hover {
    color: #607d8b;
}
.ys深灰字, .ysb色8, .xt悬停深灰字:hover {
    color: #616161;
}
/* 底色 深色 */
.ds透明底, .dsa色0, .xt悬停透明底:hover {
    background-color: transparent;
}
.ds红底, .dsa色1, .xt悬停红底:hover {
    background-color: #f00;
}
.ds橙底, .dsa色2, .xt悬停橙底:hover {
    background-color: #f60;
}
.ds黄底, .dsa色3, .xt悬停黄底:hover {
    background-color: #ff0;
}
.ds绿底, .dsa色4, .xt悬绿黄底:hover {
    background-color: #0f0;
}
.ds青底, .dsa色5, .xt悬停青底:hover {
    background-color: #0ff;
}
.ds蓝底, .dsa色6, .xt悬停蓝底:hover {
    background-color: #39f;
}
.ds紫底, .dsa色7, .xt悬停紫底:hover {
    background-color: #a0a;
}
.ds黑底, .dsa色8, .xt悬停黑底:hover {
    background-color: #000;
}
.ds白底, .dsa色9, .xt悬停白底:hover {
    background-color: #fff;
}
/* 底色 浅色 */
.ds淡红底, .dsa色10, .xt悬停淡红底:hover {
    background-color: #fdd;
}
.ds淡橙底, .dsa色11, .xt悬停淡橙底:hover {
    background-color: #fdb;
}
.ds淡黄底, .dsa色12, .xt悬停淡黄底:hover {
    background-color: #ffc;
}
.ds淡绿底, .dsa色13, .xt悬停淡绿底:hover {
    background-color: #dfd;
}
.ds淡青底, .dsa色14, .xt悬停淡青底:hover {
    background-color: #dff;
}
.ds淡蓝底, .dsa色15, .xt悬停淡蓝底:hover {
    background-color: #acf;
}
.ds淡紫底, .dsa色16, .xt悬停淡紫底:hover {
    background-color: #ecf; /*efe e7ffe7*/
}
/* 其他底色 b类 */
.ds棕红底, .dsb色1, .xt悬停棕红底:hover {
    background-color: #88686a;
}
.ds粉底, .dsb色2, .xt悬停粉底:hover {
    background-color: #e91e63;
}
.ds靛底, .dsb色3, .xt悬停靛底:hover {
    background-color: #3f51b5;
}
.ds深紫底, .dsb色4, .xt悬停深紫底:hover {
    background-color: #673ab7;
}
.ds深绿底, .dsb色5, .xt悬停深绿底:hover {
    background-color: #009999;
}
.ds天蓝底, .dsb色6, .xt悬停天蓝底:hover {
    background-color: #00ccff;
}
.ds蓝灰底, .dsb色7, .xt悬停蓝灰底:hover {
    background-color: #607d8b;
}
.ds灰底, .dsb色8, .xt悬停灰底:hover {
    background-color: #ccc;
}
.ds深灰底, .dsb色9, .xt悬停深灰底:hover {
    background-color: #616161;
}
/* 边框颜色 */
.bk透明框, .bka色0, .xt悬停透明框:hover {
    border-color: transparent!important;
}
.bk红框, .bka色1, .xt悬停红框:hover {
    border-color: #f00!important;
}
.bk橙框, .bka色2, .xt悬停橙框:hover {
    border-color: #f60!important;
}
.bk黄框, .bka色3, .xt悬停黄框:hover {
    border-color: #ff0!important;
}
.bk绿框, .bka色4, .xt悬绿绿框:hover {
    border-color: #0f0!important;
}
.bk青框, .bka色5, .xt悬停青框:hover {
    border-color: #0ff!important;
}
.bk蓝框, .bka色6, .xt悬停蓝框:hover {
    border-color: #39f!important;
}
.bk紫框, .bka色7, .xt悬停紫框:hover {
    border-color: #a0a!important;
}
.bk黑框, .bka色8, .xt悬停黑框:hover {
    border-color: #000!important;
}
.bk白框, .bka色9, .xt悬停白框:hover {
    border-color: #fff!important;
}
.bk灰框, .bka色10, .xt悬停灰框:hover {
    border-color: #ccc!important;
}