@charset "UTF-8";
/* -----------H-ui前端框架-------------
* H-ui.scss v4.0
* http://www.h-ui.net/
* Created & Modified by guojunhui
* Date modified 2022.05.05
*
* Copyright 2013-2022 郭俊辉 All rights reserved.
* Licensed under MIT license.
* http://opensource.org/licenses/MIT
*
*/
/*------------------------------------
结构目录：
1. 重定义浏览器默认样式 hui-reset
2. 布局
2.1 布局 hui-layout
2.2 栅格系统 hui-grid
2.3 响应式隐藏显示 hui-visible
3 基础样式
3.1 排版 hui-typography
3.1.1 标题
3.1.2 强调
3.1.3 对齐
3.1.4 定位
3.1.5 浮动
3.1.6 文字单行溢出省略号
3.1.7 线条
3.1.8 外边距
3.1.9 内填充
3.1.10 边框，css3圆角
3.1.11 css3阴影
3.1.12 行内分割竖线
3.1.13 文字大小
3.1.14 文字行距
3.1.15 文字颜色
3.1.16 缩略语
3.1.17 地址
3.1.18 引用
3.1.19 上标 下标
3.1.20 内容样式
3.1.21 描述
3.1.22 隐藏 显示
3.1.23 尺寸 size
3.2 代码
3.3 表格 hui-table
3.4 表单 hui-form
3.4.1 文本域 文本区域 hui-input, hui-textarea
3.4.2 单选 多选 radio,checkbox
3.4.2.1 jQuery.icheck.css
3.4.3 Bootsrtap.Switch.css
3.4.4 select 下拉框 hui-select
3.4.5 文件上传 hui-upload
3.4.6 数字输入框 hui-input-number
3.4.7 邮箱提示
3.4.8 表单布局
3.4.9 表单验证
3.5 按钮 hui-button
3.6 图片 hui-image
3.7 图标 hui-iconpic
3.8 动画 hui-animation
3.9 列表 hui-list
4. 组件
4.1 按钮组 hui-btn-group
4.2 导航 hui-nav
4.2.1 导航条
4.2.2 面包屑导航
4.2.3 翻页导航 hui-pagination
4.2.4 顶部导航 hui-topnav
4.2.5 向导 hui-steps
4.2.6 竖向导向tab导航 hui-verticalTab
4.2.7 横向tab hui-acrossTab
4.3 菜单 hui-menu
4.3.1 下拉菜单 hui-dropdown
4.3.2 多级菜单
4.3.3 树状菜单（暂无）
4.4 幻灯片 hui-carousel
4.4.1 焦点图效果(自动播放，圆点控制)
4.4.2 带缩略图效果
4.5 选项卡 hui-tab
4.6 便签与标号 hui-badge
4.7 警告提示 hui-alert
4.8 进度条 hui-progress
4.9 对话框 弹出层 hui-modal
4.10 右侧悬浮工具 hui-tools-right
4.10.1 返回顶部 hui-totop
4.10.2 意见反馈 hui-feedback
4.11 分享 hui-share
4.12 面板 hui-panel
4.13 案例 hui-docs-example
4.14 滚动 hui-rolling
4.15 搜索 hui-search
4.16 广告 hui-ad
4.16.1 顶部展开定时自动关闭广告
4.16.2 对联广告 hui-couplets-ad
4.17 标签
4.17.1 标签输入效果 hui-tag
4.17.2 标签混排效果 hui-tagsmixed
4.18 折叠 hui-fold
4.19 遮罩 hui-mask
4.20 评论列表 hui-comment
4.21 页脚 hui-footer
4.22 星星评价 hui-star
4.23 文字提示 hui-tooltip
4.24 气泡卡片 hui-popover
4.25 日期插件 hui-datetimepicker
4.26 分类导航 hui-category-nav
4.27 Markdown hui-markdown
5. 页面
5.1 结果页 hui-result
----------------------------------*/
/*1 重定义浏览器默认样式
name: hui-reset
explain: 重定义浏览器默认样式
*/
* {
word-wrap: break-word;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
iframe,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
button,
input,
textarea,
th,
td,
fieldset {
margin: 0;
padding: 0;
}
ul,
ol,
dl {
list-style-type: none;
}
html,
body {
*position: static;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 400;
}
input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
input,
button {
overflow: visible;
vertical-align: middle;
outline: none;
}
input[type=submit],
input[type=reset],
input[type=button],
input[type=text],
input[type=password] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
body,
th,
td,
button,
input,
select,
textarea {
font-family: "'Microsoft Yahei','Hiragino Sans GB','Helvetica Neue',Helvetica,tahoma,arial,'WenQuanYi Micro Hei',Verdana,sans-serif,'宋体'";
font-size: 12px;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 767px) {
html {
overflow-y: auto;
}
body,
th,
td,
button,
input,
select,
textarea {
font-size: 14px;
}
}
body {
line-height: 1.6;
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
a,
area {
outline: none;
}
a {
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: underline;
outline: none;
}
a.ie6:hover {
zoom: 1;
}
a:focus {
outline: none;
}
a:hover, a:active {
outline: none;
}
:focus {
outline: none;
}
sub,
sup {
vertical-align: baseline;
}
button,
input[type=button],
input[type=submit] {
line-height: normal !important;
}
/*img*/
img {
border: 0;
vertical-align: middle;
}
a img,
img {
-ms-interpolation-mode: bicubic;
}
/*IE下a:hover 背景闪烁*/
/**html {
overflow: -moz-scrollbars-vertical;
zoom:expression(function(ele) {
ele.style.zoom="1";
document.execCommand("BackgroundImageCache", false, true)
}(this))
}*/
/*HTML5 reset*/
header,
footer,
section,
aside,
details,
menu,
article,
section,
nav,
address,
hgroup,
figure,
figcaption,
legend {
display: block;
margin: 0;
padding: 0;
}
time {
display: inline;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
legend {
width: 100%;
margin-bottom: 20px;
font-size: 21px;
line-height: 40px;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
legend small {
font-size: 15px;
color: #999;
}
svg:not(:root) {
overflow: hidden;
}
fieldset {
border-width: 0;
padding: 0.35em 0.625em 0.75em;
margin: 0 2px;
border: 1px solid #e5e5e5;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto;
}
input[type=search] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
/* 1 */
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
/*清除浮动
Name: style_clearfix
Example: class="clearfix"
Explain: clearfix 避免因子元素浮动而导致的父元素高度缺失能问题
*/
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
/*2.1 布局
name: hui-layout
*/
.hui-container-wrapper {
background-color: #fff;
position: relative;
z-index: 9;
zoom: 1;
top: 0px;
}
.hui-container-wrapper .hui-container-bg {
display: none;
}
.hui-side-box {
display: none;
}
.hui-layout-content,
.hui-layout-content-fluid {
padding-right: 15px;
padding-left: 15px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 992px) {
.hui-layout-content {
width: 960px;
}
}
@media (min-width: 1200px) {
.hui-layout-content {
width: 1170px;
}
}
@media (min-width: 1300px) {
.hui-layout-content {
width: 1270px;
}
}
@media print {
.hui-layout-content {
width: auto;
}
}
@media (max-width: 767px) {
html,
body {
/* overflow: hidden; */
height: 100%;
}
body,
.hui-article-content {
font-size: 16px;
line-height: 1.6;
}
.hui-ad-img img {
width: 100%;
height: auto;
}
.hui-container-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
width: auto;
}
.hui-container-wrapper .hui-container-bg {
position: fixed;
width: 100%;
top: 0;
left: 0;
display: block;
z-index: 2000;
}
.hui-container-wrapper .hui-container-wap {
height: 100%;
width: 100%;
min-width: 320px;
overflow: auto;
}
/*隐藏的菜单*/
.hui-side-box {
position: absolute;
display: block;
z-index: 0;
right: -250px;
top: 0;
bottom: 0;
width: 250px;
transition: all 0.2s ease 0s;
background-color: #303135;
}
.hui-side-box .hui-nav {
display: block;
}
.hui-side-box .hui-nav li {
border-bottom: 1px solid #222;
display: block;
}
.hui-side-box .hui-nav li a {
color: #fff;
display: block;
padding-left: 20px;
padding: 10px 30px;
}
.hui-side-box .hui-nav li a:hover {
text-decoration: none;
}
body.hui-side-box-open .hui-side-box {
right: 0;
z-index: 100;
}
body.hui-side-box-open .hui-container-wrapper .hui-container-bg {
bottom: 0;
right: 0;
}
}
/*2.2 栅格系统
name: hui-grid
example:
explain: 布局 栅格系统
*/
.hui-row {
box-sizing: border-box;
margin-left: -15px;
margin-right: -15px;
/*局部模块平分*/
}
.hui-row .hui-col-1, .hui-row .hui-col-2, .hui-row .hui-col-3, .hui-row .hui-col-4, .hui-row .hui-col-5, .hui-row .hui-col-6, .hui-row .hui-col-7, .hui-row .hui-col-8, .hui-row .hui-col-9, .hui-row .hui-col-10, .hui-row .hui-col-11, .hui-row .hui-col-12,
.hui-row .hui-col-xs-1, .hui-row .hui-col-sm-1, .hui-row .hui-col-md-1, .hui-row .hui-col-lg-1,
.hui-row .hui-col-xs-2, .hui-row .hui-col-sm-2, .hui-row .hui-col-md-2, .hui-row .hui-col-lg-2,
.hui-row .hui-col-xs-3, .hui-row .hui-col-sm-3, .hui-row .hui-col-md-3, .hui-row .hui-col-lg-3,
.hui-row .hui-col-xs-4, .hui-row .hui-col-sm-4, .hui-row .hui-col-md-4, .hui-row .hui-col-lg-4,
.hui-row .hui-col-xs-5, .hui-row .hui-col-sm-5, .hui-row .hui-col-md-5, .hui-row .hui-col-lg-5,
.hui-row .hui-col-xs-6, .hui-row .hui-col-sm-6, .hui-row .hui-col-md-6, .hui-row .hui-col-lg-6,
.hui-row .hui-col-xs-7, .hui-row .hui-col-sm-7, .hui-row .hui-col-md-7, .hui-row .hui-col-lg-7,
.hui-row .hui-col-xs-8, .hui-row .hui-col-sm-8, .hui-row .hui-col-md-8, .hui-row .hui-col-lg-8,
.hui-row .hui-col-xs-9, .hui-row .hui-col-sm-9, .hui-row .hui-col-md-9, .hui-row .hui-col-lg-9,
.hui-row .hui-col-xs-10, .hui-row .hui-col-sm-10, .hui-row .hui-col-md-10, .hui-row .hui-col-lg-10,
.hui-row .hui-col-xs-11, .hui-row .hui-col-sm-11, .hui-row .hui-col-md-11, .hui-row .hui-col-lg-11,
.hui-row .hui-col-xs-12, .hui-row .hui-col-sm-12, .hui-row .hui-col-md-12, .hui-row .hui-col-lg-12 {
min-height: 1px;
position: relative;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
transition: all 0.3s ease-in;
}
.hui-row .hui-col-1 {
width: 8.33333%;
}
.hui-row .hui-col-2 {
width: 16.66667%;
}
.hui-row .hui-col-3 {
width: 25%;
}
.hui-row .hui-col-4 {
width: 33.33333%;
}
.hui-row .hui-col-5 {
width: 41.66667%;
}
.hui-row .hui-col-6 {
width: 50%;
}
.hui-row .hui-col-7 {
width: 58.33333%;
}
.hui-row .hui-col-8 {
width: 66.66667%;
}
.hui-row .hui-col-9 {
width: 75%;
}
.hui-row .hui-col-10 {
width: 83.33333%;
}
.hui-row .hui-col-11 {
width: 91.66667%;
}
.hui-row .hui-col-12 {
width: 100%;
}
.hui-row .hui-col-offset-0 {
margin-left: 0;
}
.hui-row .hui-col-offset-1 {
margin-left: 8.33333%;
}
.hui-row .hui-col-offset-2 {
margin-left: 16.66667%;
}
.hui-row .hui-col-offset-3 {
margin-left: 25%;
}
.hui-row .hui-col-offset-4 {
margin-left: 33.33333%;
}
.hui-row .hui-col-offset-5 {
margin-left: 41.66667%;
}
.hui-row .hui-col-offset-6 {
margin-left: 50%;
}
.hui-row .hui-col-offset-7 {
margin-left: 58.33333%;
}
.hui-row .hui-col-offset-8 {
margin-left: 66.66667%;
}
.hui-row .hui-col-offset-9 {
margin-left: 75%;
}
.hui-row .hui-col-offset-10 {
margin-left: 83.33333%;
}
.hui-row .hui-col-offset-11 {
margin-left: 91.66667%;
}
.hui-row .hui-col-push-0 {
position: relative;
left: 0;
right: auto;
}
.hui-row .hui-col-pull-0 {
right: 0;
left: auto;
}
.hui-row .hui-col-push-1 {
left: 8.33333%;
right: auto;
}
.hui-row .hui-col-pull-1 {
right: 8.33333%;
left: auto;
}
.hui-row .hui-col-push-2 {
left: 16.66667%;
right: auto;
}
.hui-row .hui-col-pull-2 {
right: 16.66667%;
left: auto;
}
.hui-row .hui-col-push-3 {
left: 25%;
right: auto;
}
.hui-row .hui-col-pull-3 {
right: 25%;
left: auto;
}
.hui-row .hui-col-push-4 {
left: 33.33333%;
right: auto;
}
.hui-row .hui-col-pull-4 {
right: 33.33333%;
left: auto;
}
.hui-row .hui-col-push-5 {
left: 41.66667%;
right: auto;
}
.hui-row .hui-col-pull-5 {
right: 41.66667%;
left: auto;
}
.hui-row .hui-col-push-6 {
left: 50%;
right: auto;
}
.hui-row .hui-col-pull-6 {
right: 50%;
left: auto;
}
.hui-row .hui-col-push-7 {
left: 58.33333%;
right: auto;
}
.hui-row .hui-col-pull-7 {
right: 58.33333%;
left: auto;
}
.hui-row .hui-col-push-8 {
left: 66.66667%;
right: auto;
}
.hui-row .hui-col-pull-8 {
right: 66.66667%;
left: auto;
}
.hui-row .hui-col-push-9 {
left: 75%;
right: auto;
}
.hui-row .hui-col-pull-9 {
right: 75%;
left: auto;
}
.hui-row .hui-col-push-10 {
left: 83.33333%;
right: auto;
}
.hui-row .hui-col-pull-10 {
right: 83.33333%;
left: auto;
}
.hui-row .hui-col-push-11 {
left: 91.66667%;
right: auto;
}
.hui-row .hui-col-pull-11 {
right: 91.66667%;
left: auto;
}
.hui-row .hui-col-1-1 {
width: 100%;
}
.hui-row .hui-col-2-1 {
width: 50%;
}
.hui-row .hui-col-3-1 {
width: 33.333333%;
}
.hui-row .hui-col-3-2 {
width: 66.666667%;
}
.hui-row .hui-col-4-1 {
width: 25%;
}
.hui-row .hui-col-4-3 {
width: 75%;
}
.hui-row .hui-col-5-1 {
width: 20%;
}
.hui-row .hui-col-5-2 {
width: 40%;
}
.hui-row .hui-col-5-3 {
width: 60%;
}
.hui-row .hui-col-5-4 {
width: 80%;
}
.hui-row .hui-col-6-1 {
width: 16.666667%;
}
.hui-row .hui-col-6-5 {
width: 83.333333%;
}
.hui-row .hui-col-xs-1, .hui-row .hui-col-xs-2, .hui-row .hui-col-xs-3, .hui-row .hui-col-xs-4, .hui-row .hui-col-xs-5, .hui-row .hui-col-xs-6, .hui-row .hui-col-xs-7, .hui-row .hui-col-xs-8, .hui-row .hui-col-xs-9, .hui-row .hui-col-xs-10, .hui-row .hui-col-xs-11, .hui-row .hui-col-xs-12 {
float: left;
}
.hui-row .hui-col-xs-12 {
width: 100%;
}
.hui-row .hui-col-xs-11 {
width: 91.66666667%;
}
.hui-row .hui-col-xs-10 {
width: 83.33333333%;
}
.hui-row .hui-col-xs-9 {
width: 75%;
}
.hui-row .hui-col-xs-8 {
width: 66.66666667%;
}
.hui-row .hui-col-xs-7 {
width: 58.33333333%;
}
.hui-row .hui-col-xs-6 {
width: 50%;
}
.hui-row .hui-col-xs-5 {
width: 41.66666667%;
}
.hui-row .hui-col-xs-4 {
width: 33.33333333%;
}
.hui-row .hui-col-xs-3 {
width: 25%;
}
.hui-row .hui-col-xs-2 {
width: 16.66666667%;
}
.hui-row .hui-col-xs-1 {
width: 8.33333333%;
}
.hui-row .hui-col-xs-pull-12 {
right: 100%;
}
.hui-row .hui-col-xs-pull-11 {
right: 91.66666667%;
}
.hui-row .hui-col-xs-pull-10 {
right: 83.33333333%;
}
.hui-row .hui-col-xs-pull-9 {
right: 75%;
}
.hui-row .hui-col-xs-pull-8 {
right: 66.66666667%;
}
.hui-row .hui-col-xs-pull-7 {
right: 58.33333333%;
}
.hui-row .hui-col-xs-pull-6 {
right: 50%;
}
.hui-row .hui-col-xs-pull-5 {
right: 41.66666667%;
}
.hui-row .hui-col-xs-pull-4 {
right: 33.33333333%;
}
.hui-row .hui-col-xs-pull-3 {
right: 25%;
}
.hui-row .hui-col-xs-pull-2 {
right: 16.66666667%;
}
.hui-row .hui-col-xs-pull-1 {
right: 8.33333333%;
}
.hui-row .hui-col-xs-pull-0 {
right: auto;
}
.hui-row .hui-col-xs-push-12 {
left: 100%;
}
.hui-row .hui-col-xs-push-11 {
left: 91.66666667%;
}
.hui-row .hui-col-xs-push-10 {
left: 83.33333333%;
}
.hui-row .hui-col-xs-push-9 {
left: 75%;
}
.hui-row .hui-col-xs-push-8 {
left: 66.66666667%;
}
.hui-row .hui-col-xs-push-7 {
left: 58.33333333%;
}
.hui-row .hui-col-xs-push-6 {
left: 50%;
}
.hui-row .hui-col-xs-push-5 {
left: 41.66666667%;
}
.hui-row .hui-col-xs-push-4 {
left: 33.33333333%;
}
.hui-row .hui-col-xs-push-3 {
left: 25%;
}
.hui-row .hui-col-xs-push-2 {
left: 16.66666667%;
}
.hui-row .hui-col-xs-push-1 {
left: 8.33333333%;
}
.hui-row .hui-col-xs-push-0 {
left: auto;
}
.hui-row .hui-col-xs-offset-12 {
margin-left: 100%;
}
.hui-row .hui-col-xs-offset-11 {
margin-left: 91.66666667%;
}
.hui-row .hui-col-xs-offset-10 {
margin-left: 83.33333333%;
}
.hui-row .hui-col-xs-offset-9 {
margin-left: 75%;
}
.hui-row .hui-col-xs-offset-8 {
margin-left: 66.66666667%;
}
.hui-row .hui-col-xs-offset-7 {
margin-left: 58.33333333%;
}
.hui-row .hui-col-xs-offset-6 {
margin-left: 50%;
}
.hui-row .hui-col-xs-offset-5 {
margin-left: 41.66666667%;
}
.hui-row .hui-col-xs-offset-4 {
margin-left: 33.33333333%;
}
.hui-row .hui-col-xs-offset-3 {
margin-left: 25%;
}
.hui-row .hui-col-xs-offset-2 {
margin-left: 16.66666667%;
}
.hui-row .hui-col-xs-offset-1 {
margin-left: 8.33333333%;
}
.hui-row .hui-col-xs-offset-0 {
margin-left: 0;
}
@media (max-width: 767px) {
.hui-row.responsive [class^=hui-col-],
.hui-row.responsive [class*=" hui-col-"] {
float: none !important;
width: auto !important;
}
.hui-row.responsive [class^=hui-col-offset-],
.hui-row.responsive [class*=" hui-col-offset-"] {
margin-left: 0 !important;
}
}
@media (min-width: 768px) {
.hui-row .hui-col-sm-1,
.hui-row .hui-col-sm-10,
.hui-row .hui-col-sm-11,
.hui-row .hui-col-sm-12,
.hui-row .hui-col-sm-2,
.hui-row .hui-col-sm-3,
.hui-row .hui-col-sm-4,
.hui-row .hui-col-sm-5,
.hui-row .hui-col-sm-6,
.hui-row .hui-col-sm-7,
.hui-row .hui-col-sm-8,
.hui-row .hui-col-sm-9 {
float: left;
}
.hui-row .hui-col-sm-12 {
width: 100%;
}
.hui-row .hui-col-sm-11 {
width: 91.6666666667%;
}
.hui-row .hui-col-sm-10 {
width: 83.3333333333%;
}
.hui-row .hui-col-sm-9 {
width: 75%;
}
.hui-row .hui-col-sm-8 {
width: 66.6666666667%;
}
.hui-row .hui-col-sm-7 {
width: 58.3333333333%;
}
.hui-row .hui-col-sm-6 {
width: 50%;
}
.hui-row .hui-col-sm-5 {
width: 41.6666666667%;
}
.hui-row .hui-col-sm-4 {
width: 33.3333333333%;
}
.hui-row .hui-col-sm-3 {
width: 25%;
}
.hui-row .hui-col-sm-2 {
width: 16.6666666667%;
}
.hui-row .hui-col-sm-1 {
width: 8.3333333333%;
}
.hui-row .hui-col-sm-pull-12 {
right: 100%;
}
.hui-row .hui-col-sm-pull-11 {
right: 91.6666666667%;
}
.hui-row .hui-col-sm-pull-10 {
right: 83.3333333333%;
}
.hui-row .hui-col-sm-pull-9 {
right: 75%;
}
.hui-row .hui-col-sm-pull-8 {
right: 66.6666666667%;
}
.hui-row .hui-col-sm-pull-7 {
right: 58.3333333333%;
}
.hui-row .hui-col-sm-pull-6 {
right: 50%;
}
.hui-row .hui-col-sm-pull-5 {
right: 41.6666666667%;
}
.hui-row .hui-col-sm-pull-4 {
right: 33.3333333333%;
}
.hui-row .hui-col-sm-pull-3 {
right: 25%;
}
.hui-row .hui-col-sm-pull-2 {
right: 16.6666666667%;
}
.hui-row .hui-col-sm-pull-1 {
right: 8.3333333333%;
}
.hui-row .hui-col-sm-pull-0 {
right: 0;
}
.hui-row .hui-col-sm-push-12 {
left: 100%;
}
.hui-row .hui-col-sm-push-11 {
left: 91.6666666667%;
}
.hui-row .hui-col-sm-push-10 {
left: 83.3333333333%;
}
.hui-row .hui-col-sm-push-9 {
left: 75%;
}
.hui-row .hui-col-sm-push-8 {
left: 66.6666666667%;
}
.hui-row .hui-col-sm-push-7 {
left: 58.3333333333%;
}
.hui-row .hui-col-sm-push-6 {
left: 50%;
}
.hui-row .hui-col-sm-push-5 {
left: 41.6666666667%;
}
.hui-row .hui-col-sm-push-4 {
left: 33.3333333333%;
}
.hui-row .hui-col-sm-push-3 {
left: 25%;
}
.hui-row .hui-col-sm-push-2 {
left: 16.6666666667%;
}
.hui-row .hui-col-sm-push-1 {
left: 8.3333333333%;
}
.hui-row .hui-col-sm-push-0 {
left: 0;
}
.hui-row .hui-col-sm-offset-12 {
margin-left: 100%;
}
.hui-row .hui-col-sm-offset-11 {
margin-left: 91.6666666667%;
}
.hui-row .hui-col-sm-offset-10 {
margin-left: 83.3333333333%;
}
.hui-row .hui-col-sm-offset-9 {
margin-left: 75%;
}
.hui-row .hui-col-sm-offset-8 {
margin-left: 66.6666666667%;
}
.hui-row .hui-col-sm-offset-7 {
margin-left: 58.3333333333%;
}
.hui-row .hui-col-sm-offset-6 {
margin-left: 50%;
}
.hui-row .hui-col-sm-offset-5 {
margin-left: 41.6666666667%;
}
.hui-row .hui-col-sm-offset-4 {
margin-left: 33.3333333333%;
}
.hui-row .hui-col-sm-offset-3 {
margin-left: 25%;
}
.hui-row .hui-col-sm-offset-2 {
margin-left: 16.6666666667%;
}
.hui-row .hui-col-sm-offset-1 {
margin-left: 8.3333333333%;
}
.hui-row .hui-col-sm-offset-0 {
margin-left: 0;
}
}
@media (min-width: 992px) {
.hui-row .hui-col-md-1, .hui-row .hui-col-md-10, .hui-row .hui-col-md-11, .hui-row .hui-col-md-12, .hui-row .hui-col-md-2, .hui-row .hui-col-md-3, .hui-row .hui-col-md-4, .hui-row .hui-col-md-5, .hui-row .hui-col-md-6, .hui-row .hui-col-md-7, .hui-row .hui-col-md-8, .hui-row .hui-col-md-9 {
float: left;
}
.hui-row .hui-col-md-12 {
width: 100%;
}
.hui-row .hui-col-md-11 {
width: 91.6666666667%;
}
.hui-row .hui-col-md-10 {
width: 83.3333333333%;
}
.hui-row .hui-col-md-9 {
width: 75%;
}
.hui-row .hui-col-md-8 {
width: 66.6666666667%;
}
.hui-row .hui-col-md-7 {
width: 58.3333333333%;
}
.hui-row .hui-col-md-6 {
width: 50%;
}
.hui-row .hui-col-md-5 {
width: 41.6666666667%;
}
.hui-row .hui-col-md-4 {
width: 33.3333333333%;
}
.hui-row .hui-col-md-3 {
width: 25%;
}
.hui-row .hui-col-md-2 {
width: 16.6666666667%;
}
.hui-row .hui-col-md-1 {
width: 8.3333333333%;
}
.hui-row .hui-col-md-pull-12 {
right: 100%;
}
.hui-row .hui-col-md-pull-11 {
right: 91.6666666667%;
}
.hui-row .hui-col-md-pull-10 {
right: 83.3333333333%;
}
.hui-row .hui-col-md-pull-9 {
right: 75%;
}
.hui-row .hui-col-md-pull-8 {
right: 66.6666666667%;
}
.hui-row .hui-col-md-pull-7 {
right: 58.3333333333%;
}
.hui-row .hui-col-md-pull-6 {
right: 50%;
}
.hui-row .hui-col-md-pull-5 {
right: 41.6666666667%;
}
.hui-row .hui-col-md-pull-4 {
right: 33.3333333333%;
}
.hui-row .hui-col-md-pull-3 {
right: 25%;
}
.hui-row .hui-col-md-pull-2 {
right: 16.6666666667%;
}
.hui-row .hui-col-md-pull-1 {
right: 8.3333333333%;
}
.hui-row .hui-col-md-pull-0 {
right: 0;
}
.hui-row .hui-col-md-push-12 {
left: 100%;
}
.hui-row .hui-col-md-push-11 {
left: 91.6666666667%;
}
.hui-row .hui-col-md-push-10 {
left: 83.3333333333%;
}
.hui-row .hui-col-md-push-9 {
left: 75%;
}
.hui-row .hui-col-md-push-8 {
left: 66.6666666667%;
}
.hui-row .hui-col-md-push-7 {
left: 58.3333333333%;
}
.hui-row .hui-col-md-push-6 {
left: 50%;
}
.hui-row .hui-col-md-push-5 {
left: 41.6666666667%;
}
.hui-row .hui-col-md-push-4 {
left: 33.3333333333%;
}
.hui-row .hui-col-md-push-3 {
left: 25%;
}
.hui-row .hui-col-md-push-2 {
left: 16.6666666667%;
}
.hui-row .hui-col-md-push-1 {
left: 8.3333333333%;
}
.hui-row .hui-col-md-push-0 {
left: 0;
}
.hui-row .hui-col-md-offset-12 {
margin-left: 100%;
}
.hui-row .hui-col-md-offset-11 {
margin-left: 91.6666666667%;
}
.hui-row .hui-col-md-offset-10 {
margin-left: 83.3333333333%;
}
.hui-row .hui-col-md-offset-9 {
margin-left: 75%;
}
.hui-row .hui-col-md-offset-8 {
margin-left: 66.6666666667%;
}
.hui-row .hui-col-md-offset-7 {
margin-left: 58.3333333333%;
}
.hui-row .hui-col-md-offset-6 {
margin-left: 50%;
}
.hui-row .hui-col-md-offset-5 {
margin-left: 41.6666666667%;
}
.hui-row .hui-col-md-offset-4 {
margin-left: 33.3333333333%;
}
.hui-row .hui-col-md-offset-3 {
margin-left: 25%;
}
.hui-row .hui-col-md-offset-2 {
margin-left: 16.6666666667%;
}
.hui-row .hui-col-md-offset-1 {
margin-left: 8.3333333333%;
}
.hui-row .hui-col-md-offset-0 {
margin-left: 0;
}
}
@media (min-width: 1200px) {
.hui-row .hui-col-lg-1, .hui-row .hui-col-lg-10, .hui-row .hui-col-lg-11, .hui-row .hui-col-lg-12, .hui-row .hui-col-lg-2, .hui-row .hui-col-lg-3, .hui-row .hui-col-lg-4, .hui-row .hui-col-lg-5, .hui-row .hui-col-lg-6, .hui-row .hui-col-lg-7, .hui-row .hui-col-lg-8, .hui-row .hui-col-lg-9 {
float: left;
}
.hui-row .hui-col-lg-12 {
width: 100%;
}
.hui-row .hui-col-lg-11 {
width: 91.6666666667%;
}
.hui-row .hui-col-lg-10 {
width: 83.3333333333%;
}
.hui-row .hui-col-lg-9 {
width: 75%;
}
.hui-row .hui-col-lg-8 {
width: 66.6666666667%;
}
.hui-row .hui-col-lg-7 {
width: 58.3333333333%;
}
.hui-row .hui-col-lg-6 {
width: 50%;
}
.hui-row .hui-col-lg-5 {
width: 41.6666666667%;
}
.hui-row .hui-col-lg-4 {
width: 33.3333333333%;
}
.hui-row .hui-col-lg-3 {
width: 25%;
}
.hui-row .hui-col-lg-2 {
width: 16.6666666667%;
}
.hui-row .hui-col-lg-1 {
width: 8.3333333333%;
}
.hui-row .hui-col-lg-pull-12 {
right: 100%;
}
.hui-row .hui-col-lg-pull-11 {
right: 91.6666666667%;
}
.hui-row .hui-col-lg-pull-10 {
right: 83.3333333333%;
}
.hui-row .hui-col-lg-pull-9 {
right: 75%;
}
.hui-row .hui-col-lg-pull-8 {
right: 66.6666666667%;
}
.hui-row .hui-col-lg-pull-7 {
right: 58.3333333333%;
}
.hui-row .hui-col-lg-pull-6 {
right: 50%;
}
.hui-row .hui-col-lg-pull-5 {
right: 41.6666666667%;
}
.hui-row .hui-col-lg-pull-4 {
right: 33.3333333333%;
}
.hui-row .hui-col-lg-pull-3 {
right: 25%;
}
.hui-row .hui-col-lg-pull-2 {
right: 16.6666666667%;
}
.hui-row .hui-col-lg-pull-1 {
right: 8.3333333333%;
}
.hui-row .hui-col-lg-pull-0 {
right: 0;
}
.hui-row .hui-col-lg-push-12 {
left: 100%;
}
.hui-row .hui-col-lg-push-11 {
left: 91.6666666667%;
}
.hui-row .hui-col-lg-push-10 {
left: 83.3333333333%;
}
.hui-row .hui-col-lg-push-9 {
left: 75%;
}
.hui-row .hui-col-lg-push-8 {
left: 66.6666666667%;
}
.hui-row .hui-col-lg-push-7 {
left: 58.3333333333%;
}
.hui-row .hui-col-lg-push-6 {
left: 50%;
}
.hui-row .hui-col-lg-push-5 {
left: 41.6666666667%;
}
.hui-row .hui-col-lg-push-4 {
left: 33.3333333333%;
}
.hui-row .hui-col-lg-push-3 {
left: 25%;
}
.hui-row .hui-col-lg-push-2 {
left: 16.6666666667%;
}
.hui-row .hui-col-lg-push-1 {
left: 8.3333333333%;
}
.hui-row .hui-col-lg-push-0 {
left: 0;
}
.hui-row .hui-col-lg-offset-12 {
margin-left: 100%;
}
.hui-row .hui-col-lg-offset-11 {
margin-left: 91.6666666667%;
}
.hui-row .hui-col-lg-offset-10 {
margin-left: 83.3333333333%;
}
.hui-row .hui-col-lg-offset-9 {
margin-left: 75%;
}
.hui-row .hui-col-lg-offset-8 {
margin-left: 66.6666666667%;
}
.hui-row .hui-col-lg-offset-7 {
margin-left: 58.3333333333%;
}
.hui-row .hui-col-lg-offset-6 {
margin-left: 50%;
}
.hui-row .hui-col-lg-offset-5 {
margin-left: 41.6666666667%;
}
.hui-row .hui-col-lg-offset-4 {
margin-left: 33.3333333333%;
}
.hui-row .hui-col-lg-offset-3 {
margin-left: 25%;
}
.hui-row .hui-col-lg-offset-2 {
margin-left: 16.6666666667%;
}
.hui-row .hui-col-lg-offset-1 {
margin-left: 8.3333333333%;
}
.hui-row .hui-col-lg-offset-0 {
margin-left: 0;
}
}
/* 24栅格 */
.hui-row-24 {
position: relative;
margin-left: 0;
margin-right: 0;
height: auto;
zoom: 1;
display: block;
box-sizing: border-box;
}
.hui-row-24:before, .hui-row-24:after {
content: " ";
display: table;
}
.hui-row-24:after {
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.hui-row-24 .hui-col-24-1, .hui-row-24 .hui-col-24-xs-1, .hui-row-24 .hui-col-24-sm-1, .hui-row-24 .hui-col-24-md-1, .hui-row-24 .hui-col-24-lg-1, .hui-row-24 .hui-col-24-xl-1, .hui-row-24 .hui-col-24-xxl-1,
.hui-row-24 .hui-col-24-2, .hui-row-24 .hui-col-24-xs-2, .hui-row-24 .hui-col-24-sm-2, .hui-row-24 .hui-col-24-md-2, .hui-row-24 .hui-col-24-lg-2, .hui-row-24 .hui-col-24-xl-2, .hui-row-24 .hui-col-24-xxl-2,
.hui-row-24 .hui-col-24-3, .hui-row-24 .hui-col-24-xs-3, .hui-row-24 .hui-col-24-sm-3, .hui-row-24 .hui-col-24-md-3, .hui-row-24 .hui-col-24-lg-3, .hui-row-24 .hui-col-24-xl-3, .hui-row-24 .hui-col-24-xxl-3,
.hui-row-24 .hui-col-24-4, .hui-row-24 .hui-col-24-xs-4, .hui-row-24 .hui-col-24-sm-4, .hui-row-24 .hui-col-24-md-4, .hui-row-24 .hui-col-24-lg-4, .hui-row-24 .hui-col-24-xl-4, .hui-row-24 .hui-col-24-xxl-4,
.hui-row-24 .hui-col-24-5, .hui-row-24 .hui-col-24-xs-5, .hui-row-24 .hui-col-24-sm-5, .hui-row-24 .hui-col-24-md-5, .hui-row-24 .hui-col-24-lg-5, .hui-row-24 .hui-col-24-xl-5, .hui-row-24 .hui-col-24-xxl-5,
.hui-row-24 .hui-col-24-6, .hui-row-24 .hui-col-24-xs-6, .hui-row-24 .hui-col-24-sm-6, .hui-row-24 .hui-col-24-md-6, .hui-row-24 .hui-col-24-lg-6, .hui-row-24 .hui-col-24-xl-6, .hui-row-24 .hui-col-24-xxl-6,
.hui-row-24 .hui-col-24-7, .hui-row-24 .hui-col-24-xs-7, .hui-row-24 .hui-col-24-sm-7, .hui-row-24 .hui-col-24-md-7, .hui-row-24 .hui-col-24-lg-7, .hui-row-24 .hui-col-24-xl-7, .hui-row-24 .hui-col-24-xxl-7,
.hui-row-24 .hui-col-24-8, .hui-row-24 .hui-col-24-xs-8, .hui-row-24 .hui-col-24-sm-8, .hui-row-24 .hui-col-24-md-8, .hui-row-24 .hui-col-24-lg-8, .hui-row-24 .hui-col-24-xl-8, .hui-row-24 .hui-col-24-xxl-8,
.hui-row-24 .hui-col-24-9, .hui-row-24 .hui-col-24-xs-9, .hui-row-24 .hui-col-24-sm-9, .hui-row-24 .hui-col-24-md-9, .hui-row-24 .hui-col-24-lg-9, .hui-row-24 .hui-col-24-xl-9, .hui-row-24 .hui-col-24-xxl-9,
.hui-row-24 .hui-col-24-10, .hui-row-24 .hui-col-24-xs-10, .hui-row-24 .hui-col-24-sm-10, .hui-row-24 .hui-col-24-md-10, .hui-row-24 .hui-col-24-lg-10, .hui-row-24 .hui-col-24-xl-10, .hui-row-24 .hui-col-24-xxl-10,
.hui-row-24 .hui-col-24-11, .hui-row-24 .hui-col-24-xs-11, .hui-row-24 .hui-col-24-sm-11, .hui-row-24 .hui-col-24-md-11, .hui-row-24 .hui-col-24-lg-11, .hui-row-24 .hui-col-24-xl-11, .hui-row-24 .hui-col-24-xxl-11,
.hui-row-24 .hui-col-24-12, .hui-row-24 .hui-col-24-xs-12, .hui-row-24 .hui-col-24-sm-12, .hui-row-24 .hui-col-24-md-12, .hui-row-24 .hui-col-24-lg-12, .hui-row-24 .hui-col-24-xl-12, .hui-row-24 .hui-col-24-xxl-12,
.hui-row-24 .hui-col-24-13, .hui-row-24 .hui-col-24-xs-13, .hui-row-24 .hui-col-24-sm-13, .hui-row-24 .hui-col-24-md-13, .hui-row-24 .hui-col-24-lg-13, .hui-row-24 .hui-col-24-xl-13, .hui-row-24 .hui-col-24-xxl-13,
.hui-row-24 .hui-col-24-14, .hui-row-24 .hui-col-24-xs-14, .hui-row-24 .hui-col-24-sm-14, .hui-row-24 .hui-col-24-md-14, .hui-row-24 .hui-col-24-lg-14, .hui-row-24 .hui-col-24-xl-14, .hui-row-24 .hui-col-24-xxl-14,
.hui-row-24 .hui-col-24-15, .hui-row-24 .hui-col-24-xs-15, .hui-row-24 .hui-col-24-sm-15, .hui-row-24 .hui-col-24-md-15, .hui-row-24 .hui-col-24-lg-15, .hui-row-24 .hui-col-24-xl-15, .hui-row-24 .hui-col-24-xxl-15,
.hui-row-24 .hui-col-24-16, .hui-row-24 .hui-col-24-xs-16, .hui-row-24 .hui-col-24-sm-16, .hui-row-24 .hui-col-24-md-16, .hui-row-24 .hui-col-24-lg-16, .hui-row-24 .hui-col-24-xl-16, .hui-row-24 .hui-col-24-xxl-16,
.hui-row-24 .hui-col-24-17, .hui-row-24 .hui-col-24-xs-17, .hui-row-24 .hui-col-24-sm-17, .hui-row-24 .hui-col-24-md-17, .hui-row-24 .hui-col-24-lg-17, .hui-row-24 .hui-col-24-xl-17, .hui-row-24 .hui-col-24-xxl-17,
.hui-row-24 .hui-col-24-18, .hui-row-24 .hui-col-24-xs-18, .hui-row-24 .hui-col-24-sm-18, .hui-row-24 .hui-col-24-md-18, .hui-row-24 .hui-col-24-lg-18, .hui-row-24 .hui-col-24-xl-18, .hui-row-24 .hui-col-24-xxl-18,
.hui-row-24 .hui-col-24-19, .hui-row-24 .hui-col-24-xs-19, .hui-row-24 .hui-col-24-sm-19, .hui-row-24 .hui-col-24-md-19, .hui-row-24 .hui-col-24-lg-19, .hui-row-24 .hui-col-24-xl-19, .hui-row-24 .hui-col-24-xxl-19,
.hui-row-24 .hui-col-24-20, .hui-row-24 .hui-col-24-xs-20, .hui-row-24 .hui-col-24-sm-20, .hui-row-24 .hui-col-24-md-20, .hui-row-24 .hui-col-24-lg-20, .hui-row-24 .hui-col-24-xl-20, .hui-row-24 .hui-col-24-xxl-20,
.hui-row-24 .hui-col-24-21, .hui-row-24 .hui-col-24-xs-21, .hui-row-24 .hui-col-24-sm-21, .hui-row-24 .hui-col-24-md-21, .hui-row-24 .hui-col-24-lg-21, .hui-row-24 .hui-col-24-xl-21, .hui-row-24 .hui-col-24-xxl-21,
.hui-row-24 .hui-col-24-22, .hui-row-24 .hui-col-24-xs-22, .hui-row-24 .hui-col-24-sm-22, .hui-row-24 .hui-col-24-md-22, .hui-row-24 .hui-col-24-lg-22, .hui-row-24 .hui-col-24-xl-22, .hui-row-24 .hui-col-24-xxl-22,
.hui-row-24 .hui-col-24-23, .hui-row-24 .hui-col-24-xs-23, .hui-row-24 .hui-col-24-sm-23, .hui-row-24 .hui-col-24-md-23, .hui-row-24 .hui-col-24-lg-23, .hui-row-24 .hui-col-24-xl-23, .hui-row-24 .hui-col-24-xxl-23,
.hui-row-24 .hui-col-24-24, .hui-row-24 .hui-col-24-xs-24, .hui-row-24 .hui-col-24-sm-24, .hui-row-24 .hui-col-24-md-24, .hui-row-24 .hui-col-24-lg-24, .hui-row-24 .hui-col-24-xl-24, .hui-row-24 .hui-col-24-xxl-24 {
position: relative;
min-height: 1px;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
transition: all 0.3s ease-in;
}
.hui-row-24 .hui-col-24-xs-1, .hui-row-24 .hui-col-24-xs-2, .hui-row-24 .hui-col-24-xs-3, .hui-row-24 .hui-col-24-xs-4, .hui-row-24 .hui-col-24-xs-5, .hui-row-24 .hui-col-24-xs-6,
.hui-row-24 .hui-col-24-xs-7, .hui-row-24 .hui-col-24-xs-8, .hui-row-24 .hui-col-24-xs-9, .hui-row-24 .hui-col-24-xs-10, .hui-row-24 .hui-col-24-xs-11, .hui-row-24 .hui-col-24-xs-12,
.hui-row-24 .hui-col-24-xs-13, .hui-row-24 .hui-col-24-xs-14, .hui-row-24 .hui-col-24-xs-15, .hui-row-24 .hui-col-24-xs-16, .hui-row-24 .hui-col-24-xs-17, .hui-row-24 .hui-col-24-xs-18,
.hui-row-24 .hui-col-24-xs-19, .hui-row-24 .hui-col-24-xs-20, .hui-row-24 .hui-col-24-xs-21, .hui-row-24 .hui-col-24-xs-22, .hui-row-24 .hui-col-24-xs-23, .hui-row-24 .hui-col-24-xs-24 {
float: left;
}
.hui-row-24 .hui-col-24-xs-24 {
width: 100%;
}
.hui-row-24 .hui-col-24-xs-23 {
width: 95.83333333%;
}
.hui-row-24 .hui-col-24-xs-22 {
width: 91.66666667%;
}
.hui-row-24 .hui-col-24-xs-21 {
width: 87.5%;
}
.hui-row-24 .hui-col-24-xs-20 {
width: 83.33333333%;
}
.hui-row-24 .hui-col-24-xs-19 {
width: 79.16666667%;
}
.hui-row-24 .hui-col-24-xs-18 {
width: 75%;
}
.hui-row-24 .hui-col-24-xs-17 {
width: 70.83333333%;
}
.hui-row-24 .hui-col-24-xs-16 {
width: 66.66666667%;
}
.hui-row-24 .hui-col-24-xs-15 {
width: 62.5%;
}
.hui-row-24 .hui-col-24-xs-14 {
width: 58.33333333%;
}
.hui-row-24 .hui-col-24-xs-13 {
width: 54.16666667%;
}
.hui-row-24 .hui-col-24-xs-12 {
width: 50%;
}
.hui-row-24 .hui-col-24-xs-11 {
width: 45.83333333%;
}
.hui-row-24 .hui-col-24-xs-10 {
width: 41.66666667%;
}
.hui-row-24 .hui-col-24-xs-9 {
width: 37.5%;
}
.hui-row-24 .hui-col-24-xs-8 {
width: 33.33333333%;
}
.hui-row-24 .hui-col-24-xs-7 {
width: 29.16666667%;
}
.hui-row-24 .hui-col-24-xs-6 {
width: 25%;
}
.hui-row-24 .hui-col-24-xs-5 {
width: 20.83333333%;
}
.hui-row-24 .hui-col-24-xs-4 {
width: 16.66666667%;
}
.hui-row-24 .hui-col-24-xs-3 {
width: 12.5%;
}
.hui-row-24 .hui-col-24-xs-2 {
width: 8.33333333%;
}
.hui-row-24 .hui-col-24-xs-1 {
width: 4.16666667%;
}
.hui-row-24 .hui-col-24-xs-pull-24 {
right: 100%;
}
.hui-row-24 .hui-col-24-xs-pull-23 {
right: 95.83333333%;
}
.hui-row-24 .hui-col-24-xs-pull-22 {
right: 91.66666667%;
}
.hui-row-24 .hui-col-24-xs-pull-21 {
right: 87.5%;
}
.hui-row-24 .hui-col-24-xs-pull-20 {
right: 83.33333333%;
}
.hui-row-24 .hui-col-24-xs-pull-19 {
right: 79.16666667%;
}
.hui-row-24 .hui-col-24-xs-pull-18 {
right: 75%;
}
.hui-row-24 .hui-col-24-xs-pull-17 {
right: 70.83333333%;
}
.hui-row-24 .hui-col-24-xs-pull-16 {
right: 66.66666667%;
}
.hui-row-24 .hui-col-24-xs-pull-15 {
right: 62.5%;
}
.hui-row-24 .hui-col-24-xs-pull-14 {
right: 58.33333333%;
}
.hui-row-24 .hui-col-24-xs-pull-13 {
right: 54.16666667%;
}
.hui-row-24 .hui-col-24-xs-pull-12 {
right: 50%;
}
.hui-row-24 .hui-col-24-xs-pull-11 {
right: 45.83333333%;
}
.hui-row-24 .hui-col-24-xs-pull-10 {
right: 41.66666667%;
}
.hui-row-24 .hui-col-24-xs-pull-9 {
right: 37.5%;
}
.hui-row-24 .hui-col-24-xs-pull-8 {
right: 33.33333333%;
}
.hui-row-24 .hui-col-24-xs-pull-7 {
right: 29.16666667%;
}
.hui-row-24 .hui-col-24-xs-pull-6 {
right: 25%;
}
.hui-row-24 .hui-col-24-xs-pull-5 {
right: 20.83333333%;
}
.hui-row-24 .hui-col-24-xs-pull-4 {
right: 16.66666667%;
}
.hui-row-24 .hui-col-24-xs-pull-3 {
right: 12.5%;
}
.hui-row-24 .hui-col-24-xs-pull-2 {
right: 8.33333333%;
}
.hui-row-24 .hui-col-24-xs-pull-1 {
right: 4.16666667%;
}
.hui-row-24 .hui-col-24-xs-pull-0 {
right: auto;
}
.hui-row-24 .hui-col-24-xs-push-24 {
left: 100%;
}
.hui-row-24 .hui-col-24-xs-push-23 {
left: 95.83333333%;
}
.hui-row-24 .hui-col-24-xs-push-22 {
left: 91.66666667%;
}
.hui-row-24 .hui-col-24-xs-push-21 {
left: 87.5%;
}
.hui-row-24 .hui-col-24-xs-push-20 {
left: 83.33333333%;
}
.hui-row-24 .hui-col-24-xs-push-19 {
left: 79.16666667%;
}
.hui-row-24 .hui-col-24-xs-push-18 {
left: 75%;
}
.hui-row-24 .hui-col-24-xs-push-17 {
left: 70.83333333%;
}
.hui-row-24 .hui-col-24-xs-push-16 {
left: 66.66666667%;
}
.hui-row-24 .hui-col-24-xs-push-15 {
left: 62.5%;
}
.hui-row-24 .hui-col-24-xs-push-14 {
left: 58.33333333%;
}
.hui-row-24 .hui-col-24-xs-push-13 {
left: 54.16666667%;
}
.hui-row-24 .hui-col-24-xs-push-12 {
left: 50%;
}
.hui-row-24 .hui-col-24-xs-push-11 {
left: 45.83333333%;
}
.hui-row-24 .hui-col-24-xs-push-10 {
left: 41.66666667%;
}
.hui-row-24 .hui-col-24-xs-push-9 {
left: 37.5%;
}
.hui-row-24 .hui-col-24-xs-push-8 {
left: 33.33333333%;
}
.hui-row-24 .hui-col-24-xs-push-7 {
left: 29.16666667%;
}
.hui-row-24 .hui-col-24-xs-push-6 {
left: 25%;
}
.hui-row-24 .hui-col-24-xs-push-5 {
left: 20.83333333%;
}
.hui-row-24 .hui-col-24-xs-push-4 {
left: 16.66666667%;
}
.hui-row-24 .hui-col-24-xs-push-3 {
left: 12.5%;
}
.hui-row-24 .hui-col-24-xs-push-2 {
left: 8.33333333%;
}
.hui-row-24 .hui-col-24-xs-push-1 {
left: 4.16666667%;
}
.hui-row-24 .hui-col-24-xs-push-0 {
left: auto;
}
.hui-row-24 .hui-col-24-xs-offset-24 {
margin-left: 100%;
}
.hui-row-24 .hui-col-24-xs-offset-23 {
margin-left: 95.83333333%;
}
.hui-row-24 .hui-col-24-xs-offset-22 {
margin-left: 91.66666667%;
}
.hui-row-24 .hui-col-24-xs-offset-21 {
margin-left: 87.5%;
}
.hui-row-24 .hui-col-24-xs-offset-20 {
margin-left: 83.33333333%;
}
.hui-row-24 .hui-col-24-xs-offset-19 {
margin-left: 79.16666667%;
}
.hui-row-24 .hui-col-24-xs-offset-18 {
margin-left: 75%;
}
.hui-row-24 .hui-col-24-xs-offset-17 {
margin-left: 70.83333333%;
}
.hui-row-24 .hui-col-24-xs-offset-16 {
margin-left: 66.66666667%;
}
.hui-row-24 .hui-col-24-xs-offset-15 {
margin-left: 62.5%;
}
.hui-row-24 .hui-col-24-xs-offset-14 {
margin-left: 58.33333333%;
}
.hui-row-24 .hui-col-24-xs-offset-13 {
margin-left: 54.16666667%;
}
.hui-row-24 .hui-col-24-xs-offset-12 {
margin-left: 50%;
}
.hui-row-24 .hui-col-24-xs-offset-11 {
margin-left: 45.83333333%;
}
.hui-row-24 .hui-col-24-xs-offset-10 {
margin-left: 41.66666667%;
}
.hui-row-24 .hui-col-24-xs-offset-9 {
margin-left: 37.5%;
}
.hui-row-24 .hui-col-24-xs-offset-8 {
margin-left: 33.33333333%;
}
.hui-row-24 .hui-col-24-xs-offset-7 {
margin-left: 29.16666667%;
}
.hui-row-24 .hui-col-24-xs-offset-6 {
margin-left: 25%;
}
.hui-row-24 .hui-col-24-xs-offset-5 {
margin-left: 20.83333333%;
}
.hui-row-24 .hui-col-24-xs-offset-4 {
margin-left: 16.66666667%;
}
.hui-row-24 .hui-col-24-xs-offset-3 {
margin-left: 12.5%;
}
.hui-row-24 .hui-col-24-xs-offset-2 {
margin-left: 8.33333333%;
}
.hui-row-24 .hui-col-24-xs-offset-1 {
margin-left: 4.16666667%;
}
.hui-row-24 .hui-col-24-xs-offset-0 {
margin-left: 0;
}
@media (min-width: 676px) {
.hui-row-24 .hui-col-24-sm-1, .hui-row-24 .hui-col-24-sm-2, .hui-row-24 .hui-col-24-sm-3, .hui-row-24 .hui-col-24-sm-4, .hui-row-24 .hui-col-24-sm-5, .hui-row-24 .hui-col-24-sm-6,
.hui-row-24 .hui-col-24-sm-7, .hui-row-24 .hui-col-24-sm-8, .hui-row-24 .hui-col-24-sm-9, .hui-row-24 .hui-col-24-sm-10, .hui-row-24 .hui-col-24-sm-11, .hui-row-24 .hui-col-24-sm-12,
.hui-row-24 .hui-col-24-sm-13, .hui-row-24 .hui-col-24-sm-14, .hui-row-24 .hui-col-24-sm-15, .hui-row-24 .hui-col-24-sm-16, .hui-row-24 .hui-col-24-sm-17, .hui-row-24 .hui-col-24-sm-18,
.hui-row-24 .hui-col-24-sm-19, .hui-row-24 .hui-col-24-sm-20, .hui-row-24 .hui-col-24-sm-21, .hui-row-24 .hui-col-24-sm-22, .hui-row-24 .hui-col-24-sm-23, .hui-row-24 .hui-col-24-sm-24 {
float: left;
}
.hui-row-24 .hui-col-24-sm-24 {
width: 100%;
}
.hui-row-24 .hui-col-24-sm-23 {
width: 95.83333333%;
}
.hui-row-24 .hui-col-24-sm-22 {
width: 91.66666667%;
}
.hui-row-24 .hui-col-24-sm-21 {
width: 87.5%;
}
.hui-row-24 .hui-col-24-sm-20 {
width: 83.33333333%;
}
.hui-row-24 .hui-col-24-sm-19 {
width: 79.16666667%;
}
.hui-row-24 .hui-col-24-sm-18 {
width: 75%;
}
.hui-row-24 .hui-col-24-sm-17 {
width: 70.83333333%;
}
.hui-row-24 .hui-col-24-sm-16 {
width: 66.66666667%;
}
.hui-row-24 .hui-col-24-sm-15 {
width: 62.5%;
}
.hui-row-24 .hui-col-24-sm-14 {
width: 58.33333333%;
}
.hui-row-24 .hui-col-24-sm-13 {
width: 54.16666667%;
}
.hui-row-24 .hui-col-24-sm-12 {
width: 50%;
}
.hui-row-24 .hui-col-24-sm-11 {
width: 45.83333333%;
}
.hui-row-24 .hui-col-24-sm-10 {
width: 41.66666667%;
}
.hui-row-24 .hui-col-24-sm-9 {
width: 37.5%;
}
.hui-row-24 .hui-col-24-sm-8 {
width: 33.33333333%;
}
.hui-row-24 .hui-col-24-sm-7 {
width: 29.16666667%;
}
.hui-row-24 .hui-col-24-sm-6 {
width: 25%;
}
.hui-row-24 .hui-col-24-sm-5 {
width: 20.83333333%;
}
.hui-row-24 .hui-col-24-sm-4 {
width: 16.66666667%;
}
.hui-row-24 .hui-col-24-sm-3 {
width: 12.5%;
}
.hui-row-24 .hui-col-24-sm-2 {
width: 8.33333333%;
}
.hui-row-24 .hui-col-24-sm-1 {
width: 4.16666667%;
}
.hui-row-24 .hui-col-24-sm-pull-24 {
right: 100%;
}
.hui-row-24 .hui-col-24-sm-pull-23 {
right: 95.83333333%;
}
.hui-row-24 .hui-col-24-sm-pull-22 {
right: 91.66666667%;
}
.hui-row-24 .hui-col-24-sm-pull-21 {
right: 87.5%;
}
.hui-row-24 .hui-col-24-sm-pull-20 {
right: 83.33333333%;
}
.hui-row-24 .hui-col-24-sm-pull-19 {
right: 79.16666667%;
}
.hui-row-24 .hui-col-24-sm-pull-18 {
right: 75%;
}
.hui-row-24 .hui-col-24-sm-pull-17 {
right: 70.83333333%;
}
.hui-row-24 .hui-col-24-sm-pull-16 {
right: 66.66666667%;
}
.hui-row-24 .hui-col-24-sm-pull-15 {
right: 62.5%;
}
.hui-row-24 .hui-col-24-sm-pull-14 {
right: 58.33333333%;
}
.hui-row-24 .hui-col-24-sm-pull-13 {
right: 54.16666667%;
}
.hui-row-24 .hui-col-24-sm-pull-12 {
right: 50%;
}
.hui-row-24 .hui-col-24-sm-pull-11 {
right: 45.83333333%;
}
.hui-row-24 .hui-col-24-sm-pull-10 {
right: 41.66666667%;
}
.hui-row-24 .hui-col-24-sm-pull-9 {
right: 37.5%;
}
.hui-row-24 .hui-col-24-sm-pull-8 {
right: 33.33333333%;
}
.hui-row-24 .hui-col-24-sm-pull-7 {
right: 29.16666667%;
}
.hui-row-24 .hui-col-24-sm-pull-6 {
right: 25%;
}
.hui-row-24 .hui-col-24-sm-pull-5 {
right: 20.83333333%;
}
.hui-row-24 .hui-col-24-sm-pull-4 {
right: 16.66666667%;
}
.hui-row-24 .hui-col-24-sm-pull-3 {
right: 12.5%;
}
.hui-row-24 .hui-col-24-sm-pull-2 {
right: 8.33333333%;
}
.hui-row-24 .hui-col-24-sm-pull-1 {
right: 4.16666667%;
}
.hui-row-24 .hui-col-24-sm-pull-0 {
right: auto;
}
.hui-row-24 .hui-col-24-sm-push-24 {
left: 100%;
}
.hui-row-24 .hui-col-24-sm-push-23 {
left: 95.83333333%;
}
.hui-row-24 .hui-col-24-sm-push-22 {
left: 91.66666667%;
}
.hui-row-24 .hui-col-24-sm-push-21 {
left: 87.5%;
}
.hui-row-24 .hui-col-24-sm-push-20 {
left: 83.33333333%;
}
.hui-row-24 .hui-col-24-sm-push-19 {
left: 79.16666667%;
}
.hui-row-24 .hui-col-24-sm-push-18 {
left: 75%;
}
.hui-row-24 .hui-col-24-sm-push-17 {
left: 70.83333333%;
}
.hui-row-24 .hui-col-24-sm-push-16 {
left: 66.66666667%;
}
.hui-row-24 .hui-col-24-sm-push-15 {
left: 62.5%;
}
.hui-row-24 .hui-col-24-sm-push-14 {
left: 58.33333333%;
}
.hui-row-24 .hui-col-24-sm-push-13 {
left: 54.16666667%;
}
.hui-row-24 .hui-col-24-sm-push-12 {
left: 50%;
}
.hui-row-24 .hui-col-24-sm-push-11 {
left: 45.83333333%;
}
.hui-row-24 .hui-col-24-sm-push-10 {
left: 41.66666667%;
}
.hui-row-24 .hui-col-24-sm-push-9 {
left: 37.5%;
}
.hui-row-24 .hui-col-24-sm-push-8 {
left: 33.33333333%;
}
.hui-row-24 .hui-col-24-sm-push-7 {
left: 29.16666667%;
}
.hui-row-24 .hui-col-24-sm-push-6 {
left: 25%;
}
.hui-row-24 .hui-col-24-sm-push-5 {
left: 20.83333333%;
}
.hui-row-24 .hui-col-24-sm-push-4 {
left: 16.66666667%;
}
.hui-row-24 .hui-col-24-sm-push-3 {
left: 12.5%;
}
.hui-row-24 .hui-col-24-sm-push-2 {
left: 8.33333333%;
}
.hui-row-24 .hui-col-24-sm-push-1 {
left: 4.16666667%;
}
.hui-row-24 .hui-col-24-sm-push-0 {
left: auto;
}
.hui-row-24 .hui-col-24-sm-offset-24 {
margin-left: 100%;
}
.hui-row-24 .hui-col-24-sm-offset-23 {
margin-left: 95.83333333%;
}
.hui-row-24 .hui-col-24-sm-offset-22 {
margin-left: 91.66666667%;
}
.hui-row-24 .hui-col-24-sm-offset-21 {
margin-left: 87.5%;
}
.hui-row-24 .hui-col-24-sm-offset-20 {
margin-left: 83.33333333%;
}
.hui-row-24 .hui-col-24-sm-offset-19 {
margin-left: 79.16666667%;
}
.hui-row-24 .hui-col-24-sm-offset-18 {
margin-left: 75%;
}
.hui-row-24 .hui-col-24-sm-offset-17 {
margin-left: 70.83333333%;
}
.hui-row-24 .hui-col-24-sm-offset-16 {
margin-left: 66.66666667%;
}
.hui-row-24 .hui-col-24-sm-offset-15 {
margin-left: 62.5%;
}
.hui-row-24 .hui-col-24-sm-offset-14 {
margin-left: 58.33333333%;
}
.hui-row-24 .hui-col-24-sm-offset-13 {
margin-left: 54.16666667%;
}
.hui-row-24 .hui-col-24-sm-offset-12 {
margin-left: 50%;
}
.hui-row-24 .hui-col-24-sm-offset-11 {
margin-left: 45.83333333%;
}
.hui-row-24 .hui-col-24-sm-offset-10 {
margin-left: 41.66666667%;
}
.hui-row-24 .hui-col-24-sm-offset-9 {
margin-left: 37.5%;
}
.hui-row-24 .hui-col-24-sm-offset-8 {
margin-left: 33.33333333%;
}
.hui-row-24 .hui-col-24-sm-offset-7 {
margin-left: 29.16666667%;
}
.hui-row-24 .hui-col-24-sm-offset-6 {
margin-left: 25%;
}
.hui-row-24 .hui-col-24-sm-offset-5 {
margin-left: 20.83333333%;
}
.hui-row-24 .hui-col-24-sm-offset-4 {
margin-left: 16.66666667%;
}
.hui-row-24 .hui-col-24-sm-offset-3 {
margin-left: 12.5%;
}
.hui-row-24 .hui-col-24-sm-offset-2 {
margin-left: 8.33333333%;
}
.hui-row-24 .hui-col-24-sm-offset-1 {
margin-left: 4.16666667%;
}
.hui-row-24 .hui-col-24-sm-offset-0 {
margin-left: 0;
}
}
@media (min-width: 768px) {
.hui-row-24 .hui-col-24-md-1, .hui-row-24 .hui-col-24-md-2, .hui-row-24 .hui-col-24-md-3, .hui-row-24 .hui-col-24-md-4, .hui-row-24 .hui-col-24-md-5, .hui-row-24 .hui-col-24-md-6,
.hui-row-24 .hui-col-24-md-7, .hui-row-24 .hui-col-24-md-8, .hui-row-24 .hui-col-24-md-9, .hui-row-24 .hui-col-24-md-10, .hui-row-24 .hui-col-24-md-11, .hui-row-24 .hui-col-24-md-12,
.hui-row-24 .hui-col-24-md-13, .hui-row-24 .hui-col-24-md-14, .hui-row-24 .hui-col-24-md-15, .hui-row-24 .hui-col-24-md-16, .hui-row-24 .hui-col-24-md-17, .hui-row-24 .hui-col-24-md-18,
.hui-row-24 .hui-col-24-md-19, .hui-row-24 .hui-col-24-md-20, .hui-row-24 .hui-col-24-md-21, .hui-row-24 .hui-col-24-md-22, .hui-row-24 .hui-col-24-md-23, .hui-row-24 .hui-col-24-md-24 {
float: left;
}
.hui-row-24 .hui-col-24-md-24 {
width: 100%;
}
.hui-row-24 .hui-col-24-md-23 {
width: 95.83333333%;
}
.hui-row-24 .hui-col-24-md-22 {
width: 91.66666667%;
}
.hui-row-24 .hui-col-24-md-21 {
width: 87.5%;
}
.hui-row-24 .hui-col-24-md-20 {
width: 83.33333333%;
}
.hui-row-24 .hui-col-24-md-19 {
width: 79.16666667%;
}
.hui-row-24 .hui-col-24-md-18 {
width: 75%;
}
.hui-row-24 .hui-col-24-md-17 {
width: 70.83333333%;
}
.hui-row-24 .hui-col-24-md-16 {
width: 66.66666667%;
}
.hui-row-24 .hui-col-24-md-15 {
width: 62.5%;
}
.hui-row-24 .hui-col-24-md-14 {
width: 58.33333333%;
}
.hui-row-24 .hui-col-24-md-13 {
width: 54.16666667%;
}
.hui-row-24 .hui-col-24-md-12 {
width: 50%;
}
.hui-row-24 .hui-col-24-md-11 {
width: 45.83333333%;
}
.hui-row-24 .hui-col-24-md-10 {
width: 41.66666667%;
}
.hui-row-24 .hui-col-24-md-9 {
width: 37.5%;
}
.hui-row-24 .hui-col-24-md-8 {
width: 33.33333333%;
}
.hui-row-24 .hui-col-24-md-7 {
width: 29.16666667%;
}
.hui-row-24 .hui-col-24-md-6 {
width: 25%;
}
.hui-row-24 .hui-col-24-md-5 {
width: 20.83333333%;
}
.hui-row-24 .hui-col-24-md-4 {
width: 16.66666667%;
}
.hui-row-24 .hui-col-24-md-3 {
width: 12.5%;
}
.hui-row-24 .hui-col-24-md-2 {
width: 8.33333333%;
}
.hui-row-24 .hui-col-24-md-1 {
width: 4.16666667%;
}
.hui-row-24 .hui-col-24-md-pull-24 {
right: 100%;
}
.hui-row-24 .hui-col-24-md-pull-23 {
right: 95.83333333%;
}
.hui-row-24 .hui-col-24-md-pull-22 {
right: 91.66666667%;
}
.hui-row-24 .hui-col-24-md-pull-21 {
right: 87.5%;
}
.hui-row-24 .hui-col-24-md-pull-20 {
right: 83.33333333%;
}
.hui-row-24 .hui-col-24-md-pull-19 {
right: 79.16666667%;
}
.hui-row-24 .hui-col-24-md-pull-18 {
right: 75%;
}
.hui-row-24 .hui-col-24-md-pull-17 {
right: 70.83333333%;
}
.hui-row-24 .hui-col-24-md-pull-16 {
right: 66.66666667%;
}
.hui-row-24 .hui-col-24-md-pull-15 {
right: 62.5%;
}
.hui-row-24 .hui-col-24-md-pull-14 {
right: 58.33333333%;
}
.hui-row-24 .hui-col-24-md-pull-13 {
right: 54.16666667%;
}
.hui-row-24 .hui-col-24-md-pull-12 {
right: 50%;
}
.hui-row-24 .hui-col-24-md-pull-11 {
right: 45.83333333%;
}
.hui-row-24 .hui-col-24-md-pull-10 {
right: 41.66666667%;
}
.hui-row-24 .hui-col-24-md-pull-9 {
right: 37.5%;
}
.hui-row-24 .hui-col-24-md-pull-8 {
right: 33.33333333%;
}
.hui-row-24 .hui-col-24-md-pull-7 {
right: 29.16666667%;
}
.hui-row-24 .hui-col-24-md-pull-6 {
right: 25%;
}
.hui-row-24 .hui-col-24-md-pull-5 {
right: 20.83333333%;
}
.hui-row-24 .hui-col-24-md-pull-4 {
right: 16.66666667%;
}
.hui-row-24 .hui-col-24-md-pull-3 {
right: 12.5%;
}
.hui-row-24 .hui-col-24-md-pull-2 {
right: 8.33333333%;
}
.hui-row-24 .hui-col-24-md-pull-1 {
right: 4.16666667%;
}
.hui-row-24 .hui-col-24-md-pull-0 {
right: auto;
}
.hui-row-24 .hui-col-24-md-push-24 {
left: 100%;
}
.hui-row-24 .hui-col-24-md-push-23 {
left: 95.83333333%;
}
.hui-row-24 .hui-col-24-md-push-22 {
left: 91.66666667%;
}
.hui-row-24 .hui-col-24-md-push-21 {
left: 87.5%;
}
.hui-row-24 .hui-col-24-md-push-20 {
left: 83.33333333%;
}
.hui-row-24 .hui-col-24-md-push-19 {
left: 79.16666667%;
}
.hui-row-24 .hui-col-24-md-push-18 {
left: 75%;
}
.hui-row-24 .hui-col-24-md-push-17 {
left: 70.83333333%;
}
.hui-row-24 .hui-col-24-md-push-16 {
left: 66.66666667%;
}
.hui-row-24 .hui-col-24-md-push-15 {
left: 62.5%;
}
.hui-row-24 .hui-col-24-md-push-14 {
left: 58.33333333%;
}
.hui-row-24 .hui-col-24-md-push-13 {
left: 54.16666667%;
}
.hui-row-24 .hui-col-24-md-push-12 {
left: 50%;
}
.hui-row-24 .hui-col-24-md-push-11 {
left: 45.83333333%;
}
.hui-row-24 .hui-col-24-md-push-10 {
left: 41.66666667%;
}
.hui-row-24 .hui-col-24-md-push-9 {
left: 37.5%;
}
.hui-row-24 .hui-col-24-md-push-8 {
left: 33.33333333%;
}
.hui-row-24 .hui-col-24-md-push-7 {
left: 29.16666667%;
}
.hui-row-24 .hui-col-24-md-push-6 {
left: 25%;
}
.hui-row-24 .hui-col-24-md-push-5 {
left: 20.83333333%;
}
.hui-row-24 .hui-col-24-md-push-4 {
left: 16.66666667%;
}
.hui-row-24 .hui-col-24-md-push-3 {
left: 12.5%;
}
.hui-row-24 .hui-col-24-md-push-2 {
left: 8.33333333%;
}
.hui-row-24 .hui-col-24-md-push-1 {
left: 4.16666667%;
}
.hui-row-24 .hui-col-24-md-push-0 {
left: auto;
}
.hui-row-24 .hui-col-24-md-offset-24 {
margin-left: 100%;
}
.hui-row-24 .hui-col-24-md-offset-23 {
margin-left: 95.83333333%;
}
.hui-row-24 .hui-col-24-md-offset-22 {
margin-left: 91.66666667%;
}
.hui-row-24 .hui-col-24-md-offset-21 {
margin-left: 87.5%;
}
.hui-row-24 .hui-col-24-md-offset-20 {
margin-left: 83.33333333%;
}
.hui-row-24 .hui-col-24-md-offset-19 {
margin-left: 79.16666667%;
}
.hui-row-24 .hui-col-24-md-offset-18 {
margin-left: 75%;
}
.hui-row-24 .hui-col-24-md-offset-17 {
margin-left: 70.83333333%;
}
.hui-row-24 .hui-col-24-md-offset-16 {
margin-left: 66.66666667%;
}
.hui-row-24 .hui-col-24-md-offset-15 {
margin-left: 62.5%;
}
.hui-row-24 .hui-col-24-md-offset-14 {
margin-left: 58.33333333%;
}
.hui-row-24 .hui-col-24-md-offset-13 {
margin-left: 54.16666667%;
}
.hui-row-24 .hui-col-24-md-offset-12 {
margin-left: 50%;
}
.hui-row-24 .hui-col-24-md-offset-11 {
margin-left: 45.83333333%;
}
.hui-row-24 .hui-col-24-md-offset-10 {
margin-left: 41.66666667%;
}
.hui-row-24 .hui-col-24-md-offset-9 {
margin-left: 37.5%;
}
.hui-row-24 .hui-col-24-md-offset-8 {
margin-left: 33.33333333%;
}
.hui-row-24 .hui-col-24-md-offset-7 {
margin-left: 29.16666667%;
}
.hui-row-24 .hui-col-24-md-offset-6 {
margin-left: 25%;
}
.hui-row-24 .hui-col-24-md-offset-5 {
margin-left: 20.83333333%;
}
.hui-row-24 .hui-col-24-md-offset-4 {
margin-left: 16.66666667%;
}
.hui-row-24 .hui-col-24-md-offset-3 {
margin-left: 12.5%;
}
.hui-row-24 .hui-col-24-md-offset-2 {
margin-left: 8.33333333%;
}
.hui-row-24 .hui-col-24-md-offset-1 {
margin-left: 4.16666667%;
}
.hui-row-24 .hui-col-24-md-offset-0 {
margin-left: 0;
}
}
@media (min-width: 992px) {
.hui-row-24 .hui-col-24-lg-1, .hui-row-24 .hui-col-24-lg-2, .hui-row-24 .hui-col-24-lg-3, .hui-row-24 .hui-col-24-lg-4, .hui-row-24 .hui-col-24-lg-5, .hui-row-24 .hui-col-24-lg-6,
.hui-row-24 .hui-col-24-lg-7, .hui-row-24 .hui-col-24-lg-8, .hui-row-24 .hui-col-24-lg-9, .hui-row-24 .hui-col-24-lg-10, .hui-row-24 .hui-col-24-lg-11, .hui-row-24 .hui-col-24-lg-12,
.hui-row-24 .hui-col-24-lg-13, .hui-row-24 .hui-col-24-lg-14, .hui-row-24 .hui-col-24-lg-15, .hui-row-24 .hui-col-24-lg-16, .hui-row-24 .hui-col-24-lg-17, .hui-row-24 .hui-col-24-lg-18,
.hui-row-24 .hui-col-24-lg-19, .hui-row-24 .hui-col-24-lg-20, .hui-row-24 .hui-col-24-lg-21, .hui-row-24 .hui-col-24-lg-22, .hui-row-24 .hui-col-24-lg-23, .hui-row-24 .hui-col-24-lg-24 {
float: left;
}
.hui-row-24 .hui-col-24-lg-24 {
width: 100%;
}
.hui-row-24 .hui-col-24-lg-23 {
width: 95.83333333%;
}
.hui-row-24 .hui-col-24-lg-22 {
width: 91.66666667%;
}
.hui-row-24 .hui-col-24-lg-21 {
width: 87.5%;
}
.hui-row-24 .hui-col-24-lg-20 {
width: 83.33333333%;
}
.hui-row-24 .hui-col-24-lg-19 {
width: 79.16666667%;
}
.hui-row-24 .hui-col-24-lg-18 {
width: 75%;
}
.hui-row-24 .hui-col-24-lg-17 {
width: 70.83333333%;
}
.hui-row-24 .hui-col-24-lg-16 {
width: 66.66666667%;
}
.hui-row-24 .hui-col-24-lg-15 {
width: 62.5%;
}
.hui-row-24 .hui-col-24-lg-14 {
width: 58.33333333%;
}
.hui-row-24 .hui-col-24-lg-13 {
width: 54.16666667%;
}
.hui-row-24 .hui-col-24-lg-12 {
width: 50%;
}
.hui-row-24 .hui-col-24-lg-11 {
width: 45.83333333%;
}
.hui-row-24 .hui-col-24-lg-10 {
width: 41.66666667%;
}
.hui-row-24 .hui-col-24-lg-9 {
width: 37.5%;
}
.hui-row-24 .hui-col-24-lg-8 {
width: 33.33333333%;
}
.hui-row-24 .hui-col-24-lg-7 {
width: 29.16666667%;
}
.hui-row-24 .hui-col-24-lg-6 {
width: 25%;
}
.hui-row-24 .hui-col-24-lg-5 {
width: 20.83333333%;
}
.hui-row-24 .hui-col-24-lg-4 {
width: 16.66666667%;
}
.hui-row-24 .hui-col-24-lg-3 {
width: 12.5%;
}
.hui-row-24 .hui-col-24-lg-2 {
width: 8.33333333%;
}
.hui-row-24 .hui-col-24-lg-1 {
width: 4.16666667%;
}
.hui-row-24 .hui-col-24-lg-pull-24 {
right: 100%;
}
.hui-row-24 .hui-col-24-lg-pull-23 {
right: 95.83333333%;
}
.hui-row-24 .hui-col-24-lg-pull-22 {
right: 91.66666667%;
}
.hui-row-24 .hui-col-24-lg-pull-21 {
right: 87.5%;
}
.hui-row-24 .hui-col-24-lg-pull-20 {
right: 83.33333333%;
}
.hui-row-24 .hui-col-24-lg-pull-19 {
right: 79.16666667%;
}
.hui-row-24 .hui-col-24-lg-pull-18 {
right: 75%;
}
.hui-row-24 .hui-col-24-lg-pull-17 {
right: 70.83333333%;
}
.hui-row-24 .hui-col-24-lg-pull-16 {
right: 66.66666667%;
}
.hui-row-24 .hui-col-24-lg-pull-15 {
right: 62.5%;
}
.hui-row-24 .hui-col-24-lg-pull-14 {
right: 58.33333333%;
}
.hui-row-24 .hui-col-24-lg-pull-13 {
right: 54.16666667%;
}
.hui-row-24 .hui-col-24-lg-pull-12 {
right: 50%;
}
.hui-row-24 .hui-col-24-lg-pull-11 {
right: 45.83333333%;
}
.hui-row-24 .hui-col-24-lg-pull-10 {
right: 41.66666667%;
}
.hui-row-24 .hui-col-24-lg-pull-9 {
right: 37.5%;
}
.hui-row-24 .hui-col-24-lg-pull-8 {
right: 33.33333333%;
}
.hui-row-24 .hui-col-24-lg-pull-7 {
right: 29.16666667%;
}
.hui-row-24 .hui-col-24-lg-pull-6 {
right: 25%;
}
.hui-row-24 .hui-col-24-lg-pull-5 {
right: 20.83333333%;
}
.hui-row-24 .hui-col-24-lg-pull-4 {
right: 16.66666667%;
}
.hui-row-24 .hui-col-24-lg-pull-3 {
right: 12.5%;
}
.hui-row-24 .hui-col-24-lg-pull-2 {
right: 8.33333333%;
}
.hui-row-24 .hui-col-24-lg-pull-1 {
right: 4.16666667%;
}
.hui-row-24 .hui-col-24-lg-pull-0 {
right: auto;
}
.hui-row-24 .hui-col-24-lg-push-24 {
left: 100%;
}
.hui-row-24 .hui-col-24-lg-push-23 {
left: 95.83333333%;
}
.hui-row-24 .hui-col-24-lg-push-22 {
left: 91.66666667%;
}
.hui-row-24 .hui-col-24-lg-push-21 {
left: 87.5%;
}
.hui-row-24 .hui-col-24-lg-push-20 {
left: 83.33333333%;
}
.hui-row-24 .hui-col-24-lg-push-19 {
left: 79.16666667%;
}
.hui-row-24 .hui-col-24-lg-push-18 {
left: 75%;
}
.hui-row-24 .hui-col-24-lg-push-17 {
left: 70.83333333%;
}
.hui-row-24 .hui-col-24-lg-push-16 {
left: 66.66666667%;
}
.hui-row-24 .hui-col-24-lg-push-15 {
left: 62.5%;
}
.hui-row-24 .hui-col-24-lg-push-14 {
left: 58.33333333%;
}
.hui-row-24 .hui-col-24-lg-push-13 {
left: 54.16666667%;
}
.hui-row-24 .hui-col-24-lg-push-12 {
left: 50%;
}
.hui-row-24 .hui-col-24-lg-push-11 {
left: 45.83333333%;
}
.hui-row-24 .hui-col-24-lg-push-10 {
left: 41.66666667%;
}
.hui-row-24 .hui-col-24-lg-push-9 {
left: 37.5%;
}
.hui-row-24 .hui-col-24-lg-push-8 {
left: 33.33333333%;
}
.hui-row-24 .hui-col-24-lg-push-7 {
left: 29.16666667%;
}
.hui-row-24 .hui-col-24-lg-push-6 {
left: 25%;
}
.hui-row-24 .hui-col-24-lg-push-5 {
left: 20.83333333%;
}
.hui-row-24 .hui-col-24-lg-push-4 {
left: 16.66666667%;
}
.hui-row-24 .hui-col-24-lg-push-3 {
left: 12.5%;
}
.hui-row-24 .hui-col-24-lg-push-2 {
left: 8.33333333%;
}
.hui-row-24 .hui-col-24-lg-push-1 {
left: 4.16666667%;
}
.hui-row-24 .hui-col-24-lg-push-0 {
left: auto;
}
.hui-row-24 .hui-col-24-lg-offset-24 {
margin-left: 100%;
}
.hui-row-24 .hui-col-24-lg-offset-23 {
margin-left: 95.83333333%;
}
.hui-row-24 .hui-col-24-lg-offset-22 {
margin-left: 91.66666667%;
}
.hui-row-24 .hui-col-24-lg-offset-21 {
margin-left: 87.5%;
}
.hui-row-24 .hui-col-24-lg-offset-20 {
margin-left: 83.33333333%;
}
.hui-row-24 .hui-col-24-lg-offset-19 {
margin-left: 79.16666667%;
}
.hui-row-24 .hui-col-24-lg-offset-18 {
margin-left: 75%;
}
.hui-row-24 .hui-col-24-lg-offset-17 {
margin-left: 70.83333333%;
}
.hui-row-24 .hui-col-24-lg-offset-16 {
margin-left: 66.66666667%;
}
.hui-row-24 .hui-col-24-lg-offset-15 {
margin-left: 62.5%;
}
.hui-row-24 .hui-col-24-lg-offset-14 {
margin-left: 58.33333333%;
}
.hui-row-24 .hui-col-24-lg-offset-13 {
margin-left: 54.16666667%;
}
.hui-row-24 .hui-col-24-lg-offset-12 {
margin-left: 50%;
}
.hui-row-24 .hui-col-24-lg-offset-11 {
margin-left: 45.83333333%;
}
.hui-row-24 .hui-col-24-lg-offset-10 {
margin-left: 41.66666667%;
}
.hui-row-24 .hui-col-24-lg-offset-9 {
margin-left: 37.5%;
}
.hui-row-24 .hui-col-24-lg-offset-8 {
margin-left: 33.33333333%;
}
.hui-row-24 .hui-col-24-lg-offset-7 {
margin-left: 29.16666667%;
}
.hui-row-24 .hui-col-24-lg-offset-6 {
margin-left: 25%;
}
.hui-row-24 .hui-col-24-lg-offset-5 {
margin-left: 20.83333333%;
}
.hui-row-24 .hui-col-24-lg-offset-4 {
margin-left: 16.66666667%;
}
.hui-row-24 .hui-col-24-lg-offset-3 {
margin-left: 12.5%;
}
.hui-row-24 .hui-col-24-lg-offset-2 {
margin-left: 8.33333333%;
}
.hui-row-24 .hui-col-24-lg-offset-1 {
margin-left: 4.16666667%;
}
.hui-row-24 .hui-col-24-lg-offset-0 {
margin-left: 0;
}
}
@media (min-width: 1200px) {
.hui-row-24 .hui-col-24-xl-1, .hui-row-24 .hui-col-24-xl-2, .hui-row-24 .hui-col-24-xl-3, .hui-row-24 .hui-col-24-xl-4, .hui-row-24 .hui-col-24-xl-5, .hui-row-24 .hui-col-24-xl-6,
.hui-row-24 .hui-col-24-xl-7, .hui-row-24 .hui-col-24-xl-8, .hui-row-24 .hui-col-24-xl-9, .hui-row-24 .hui-col-24-xl-10, .hui-row-24 .hui-col-24-xl-11, .hui-row-24 .hui-col-24-xl-12,
.hui-row-24 .hui-col-24-xl-13, .hui-row-24 .hui-col-24-xl-14, .hui-row-24 .hui-col-24-xl-15, .hui-row-24 .hui-col-24-xl-16, .hui-row-24 .hui-col-24-xl-17, .hui-row-24 .hui-col-24-xl-18,
.hui-row-24 .hui-col-24-xl-19, .hui-row-24 .hui-col-24-xl-20, .hui-row-24 .hui-col-24-xl-21, .hui-row-24 .hui-col-24-xl-22, .hui-row-24 .hui-col-24-xl-23, .hui-row-24 .hui-col-24-xl-24 {
float: left;
}
.hui-row-24 .hui-col-24-xl-24 {
width: 100%;
}
.hui-row-24 .hui-col-24-xl-23 {
width: 95.83333333%;
}
.hui-row-24 .hui-col-24-xl-22 {
width: 91.66666667%;
}
.hui-row-24 .hui-col-24-xl-21 {
width: 87.5%;
}
.hui-row-24 .hui-col-24-xl-20 {
width: 83.33333333%;
}
.hui-row-24 .hui-col-24-xl-19 {
width: 79.16666667%;
}
.hui-row-24 .hui-col-24-xl-18 {
width: 75%;
}
.hui-row-24 .hui-col-24-xl-17 {
width: 70.83333333%;
}
.hui-row-24 .hui-col-24-xl-16 {
width: 66.66666667%;
}
.hui-row-24 .hui-col-24-xl-15 {
width: 62.5%;
}
.hui-row-24 .hui-col-24-xl-14 {
width: 58.33333333%;
}
.hui-row-24 .hui-col-24-xl-13 {
width: 54.16666667%;
}
.hui-row-24 .hui-col-24-xl-12 {
width: 50%;
}
.hui-row-24 .hui-col-24-xl-11 {
width: 45.83333333%;
}
.hui-row-24 .hui-col-24-xl-10 {
width: 41.66666667%;
}
.hui-row-24 .hui-col-24-xl-9 {
width: 37.5%;
}
.hui-row-24 .hui-col-24-xl-8 {
width: 33.33333333%;
}
.hui-row-24 .hui-col-24-xl-7 {
width: 29.16666667%;
}
.hui-row-24 .hui-col-24-xl-6 {
width: 25%;
}
.hui-row-24 .hui-col-24-xl-5 {
width: 20.83333333%;
}
.hui-row-24 .hui-col-24-xl-4 {
width: 16.66666667%;
}
.hui-row-24 .hui-col-24-xl-3 {
width: 12.5%;
}
.hui-row-24 .hui-col-24-xl-2 {
width: 8.33333333%;
}
.hui-row-24 .hui-col-24-xl-1 {
width: 4.16666667%;
}
.hui-row-24 .hui-col-24-xl-pull-24 {
right: 100%;
}
.hui-row-24 .hui-col-24-xl-pull-23 {
right: 95.83333333%;
}
.hui-row-24 .hui-col-24-xl-pull-22 {
right: 91.66666667%;
}
.hui-row-24 .hui-col-24-xl-pull-21 {
right: 87.5%;
}
.hui-row-24 .hui-col-24-xl-pull-20 {
right: 83.33333333%;
}
.hui-row-24 .hui-col-24-xl-pull-19 {
right: 79.16666667%;
}
.hui-row-24 .hui-col-24-xl-pull-18 {
right: 75%;
}
.hui-row-24 .hui-col-24-xl-pull-17 {
right: 70.83333333%;
}
.hui-row-24 .hui-col-24-xl-pull-16 {
right: 66.66666667%;
}
.hui-row-24 .hui-col-24-xl-pull-15 {
right: 62.5%;
}
.hui-row-24 .hui-col-24-xl-pull-14 {
right: 58.33333333%;
}
.hui-row-24 .hui-col-24-xl-pull-13 {
right: 54.16666667%;
}
.hui-row-24 .hui-col-24-xl-pull-12 {
right: 50%;
}
.hui-row-24 .hui-col-24-xl-pull-11 {
right: 45.83333333%;
}
.hui-row-24 .hui-col-24-xl-pull-10 {
right: 41.66666667%;
}
.hui-row-24 .hui-col-24-xl-pull-9 {
right: 37.5%;
}
.hui-row-24 .hui-col-24-xl-pull-8 {
right: 33.33333333%;
}
.hui-row-24 .hui-col-24-xl-pull-7 {
right: 29.16666667%;
}
.hui-row-24 .hui-col-24-xl-pull-6 {
right: 25%;
}
.hui-row-24 .hui-col-24-xl-pull-5 {
right: 20.83333333%;
}
.hui-row-24 .hui-col-24-xl-pull-4 {
right: 16.66666667%;
}
.hui-row-24 .hui-col-24-xl-pull-3 {
right: 12.5%;
}
.hui-row-24 .hui-col-24-xl-pull-2 {
right: 8.33333333%;
}
.hui-row-24 .hui-col-24-xl-pull-1 {
right: 4.16666667%;
}
.hui-row-24 .hui-col-24-xl-pull-0 {
right: auto;
}
.hui-row-24 .hui-col-24-xl-push-24 {
left: 100%;
}
.hui-row-24 .hui-col-24-xl-push-23 {
left: 95.83333333%;
}
.hui-row-24 .hui-col-24-xl-push-22 {
left: 91.66666667%;
}
.hui-row-24 .hui-col-24-xl-push-21 {
left: 87.5%;
}
.hui-row-24 .hui-col-24-xl-push-20 {
left: 83.33333333%;
}
.hui-row-24 .hui-col-24-xl-push-19 {
left: 79.16666667%;
}
.hui-row-24 .hui-col-24-xl-push-18 {
left: 75%;
}
.hui-row-24 .hui-col-24-xl-push-17 {
left: 70.83333333%;
}
.hui-row-24 .hui-col-24-xl-push-16 {
left: 66.66666667%;
}
.hui-row-24 .hui-col-24-xl-push-15 {
left: 62.5%;
}
.hui-row-24 .hui-col-24-xl-push-14 {
left: 58.33333333%;
}
.hui-row-24 .hui-col-24-xl-push-13 {
left: 54.16666667%;
}
.hui-row-24 .hui-col-24-xl-push-12 {
left: 50%;
}
.hui-row-24 .hui-col-24-xl-push-11 {
left: 45.83333333%;
}
.hui-row-24 .hui-col-24-xl-push-10 {
left: 41.66666667%;
}
.hui-row-24 .hui-col-24-xl-push-9 {
left: 37.5%;
}
.hui-row-24 .hui-col-24-xl-push-8 {
left: 33.33333333%;
}
.hui-row-24 .hui-col-24-xl-push-7 {
left: 29.16666667%;
}
.hui-row-24 .hui-col-24-xl-push-6 {
left: 25%;
}
.hui-row-24 .hui-col-24-xl-push-5 {
left: 20.83333333%;
}
.hui-row-24 .hui-col-24-xl-push-4 {
left: 16.66666667%;
}
.hui-row-24 .hui-col-24-xl-push-3 {
left: 12.5%;
}
.hui-row-24 .hui-col-24-xl-push-2 {
left: 8.33333333%;
}
.hui-row-24 .hui-col-24-xl-push-1 {
left: 4.16666667%;
}
.hui-row-24 .hui-col-24-xl-push-0 {
left: auto;
}
.hui-row-24 .hui-col-24-xl-offset-24 {
margin-left: 100%;
}
.hui-row-24 .hui-col-24-xl-offset-23 {
margin-left: 95.83333333%;
}
.hui-row-24 .hui-col-24-xl-offset-22 {
margin-left: 91.66666667%;
}
.hui-row-24 .hui-col-24-xl-offset-21 {
margin-left: 87.5%;
}
.hui-row-24 .hui-col-24-xl-offset-20 {
margin-left: 83.33333333%;
}
.hui-row-24 .hui-col-24-xl-offset-19 {
margin-left: 79.16666667%;
}
.hui-row-24 .hui-col-24-xl-offset-18 {
margin-left: 75%;
}
.hui-row-24 .hui-col-24-xl-offset-17 {
margin-left: 70.83333333%;
}
.hui-row-24 .hui-col-24-xl-offset-16 {
margin-left: 66.66666667%;
}
.hui-row-24 .hui-col-24-xl-offset-15 {
margin-left: 62.5%;
}
.hui-row-24 .hui-col-24-xl-offset-14 {
margin-left: 58.33333333%;
}
.hui-row-24 .hui-col-24-xl-offset-13 {
margin-left: 54.16666667%;
}
.hui-row-24 .hui-col-24-xl-offset-12 {
margin-left: 50%;
}
.hui-row-24 .hui-col-24-xl-offset-11 {
margin-left: 45.83333333%;
}
.hui-row-24 .hui-col-24-xl-offset-10 {
margin-left: 41.66666667%;
}
.hui-row-24 .hui-col-24-xl-offset-9 {
margin-left: 37.5%;
}
.hui-row-24 .hui-col-24-xl-offset-8 {
margin-left: 33.33333333%;
}
.hui-row-24 .hui-col-24-xl-offset-7 {
margin-left: 29.16666667%;
}
.hui-row-24 .hui-col-24-xl-offset-6 {
margin-left: 25%;
}
.hui-row-24 .hui-col-24-xl-offset-5 {
margin-left: 20.83333333%;
}
.hui-row-24 .hui-col-24-xl-offset-4 {
margin-left: 16.66666667%;
}
.hui-row-24 .hui-col-24-xl-offset-3 {
margin-left: 12.5%;
}
.hui-row-24 .hui-col-24-xl-offset-2 {
margin-left: 8.33333333%;
}
.hui-row-24 .hui-col-24-xl-offset-1 {
margin-left: 4.16666667%;
}
.hui-row-24 .hui-col-24-xl-offset-0 {
margin-left: 0;
}
}
@media (min-width: 1600px) {
.hui-row-24 .hui-col-24-xxl-1, .hui-row-24 .hui-col-24-xxl-2, .hui-row-24 .hui-col-24-xxl-3, .hui-row-24 .hui-col-24-xxl-4, .hui-row-24 .hui-col-24-xxl-5, .hui-row-24 .hui-col-24-xxl-6,
.hui-row-24 .hui-col-24-xxl-7, .hui-row-24 .hui-col-24-xxl-8, .hui-row-24 .hui-col-24-xxl-9, .hui-row-24 .hui-col-24-xxl-10, .hui-row-24 .hui-col-24-xxl-11, .hui-row-24 .hui-col-24-xxl-12,
.hui-row-24 .hui-col-24-xxl-13, .hui-row-24 .hui-col-24-xxl-14, .hui-row-24 .hui-col-24-xxl-15, .hui-row-24 .hui-col-24-xxl-16, .hui-row-24 .hui-col-24-xxl-17, .hui-row-24 .hui-col-24-xxl-18,
.hui-row-24 .hui-col-24-xxl-19, .hui-row-24 .hui-col-24-xxl-20, .hui-row-24 .hui-col-24-xxl-21, .hui-row-24 .hui-col-24-xxl-22, .hui-row-24 .hui-col-24-xxl-23, .hui-row-24 .hui-col-24-xxl-24 {
float: left;
}
.hui-row-24 .hui-col-24-xxl-24 {
width: 100%;
}
.hui-row-24 .hui-col-24-xxl-23 {
width: 95.83333333%;
}
.hui-row-24 .hui-col-24-xxl-22 {
width: 91.66666667%;
}
.hui-row-24 .hui-col-24-xxl-21 {
width: 87.5%;
}
.hui-row-24 .hui-col-24-xxl-20 {
width: 83.33333333%;
}
.hui-row-24 .hui-col-24-xxl-19 {
width: 79.16666667%;
}
.hui-row-24 .hui-col-24-xxl-18 {
width: 75%;
}
.hui-row-24 .hui-col-24-xxl-17 {
width: 70.83333333%;
}
.hui-row-24 .hui-col-24-xxl-16 {
width: 66.66666667%;
}
.hui-row-24 .hui-col-24-xxl-15 {
width: 62.5%;
}
.hui-row-24 .hui-col-24-xxl-14 {
width: 58.33333333%;
}
.hui-row-24 .hui-col-24-xxl-13 {
width: 54.16666667%;
}
.hui-row-24 .hui-col-24-xxl-12 {
width: 50%;
}
.hui-row-24 .hui-col-24-xxl-11 {
width: 45.83333333%;
}
.hui-row-24 .hui-col-24-xxl-10 {
width: 41.66666667%;
}
.hui-row-24 .hui-col-24-xxl-9 {
width: 37.5%;
}
.hui-row-24 .hui-col-24-xxl-8 {
width: 33.33333333%;
}
.hui-row-24 .hui-col-24-xxl-7 {
width: 29.16666667%;
}
.hui-row-24 .hui-col-24-xxl-6 {
width: 25%;
}
.hui-row-24 .hui-col-24-xxl-5 {
width: 20.83333333%;
}
.hui-row-24 .hui-col-24-xxl-4 {
width: 16.66666667%;
}
.hui-row-24 .hui-col-24-xxl-3 {
width: 12.5%;
}
.hui-row-24 .hui-col-24-xxl-2 {
width: 8.33333333%;
}
.hui-row-24 .hui-col-24-xxl-1 {
width: 4.16666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-24 {
right: 100%;
}
.hui-row-24 .hui-col-24-xxl-pull-23 {
right: 95.83333333%;
}
.hui-row-24 .hui-col-24-xxl-pull-22 {
right: 91.66666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-21 {
right: 87.5%;
}
.hui-row-24 .hui-col-24-xxl-pull-20 {
right: 83.33333333%;
}
.hui-row-24 .hui-col-24-xxl-pull-19 {
right: 79.16666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-18 {
right: 75%;
}
.hui-row-24 .hui-col-24-xxl-pull-17 {
right: 70.83333333%;
}
.hui-row-24 .hui-col-24-xxl-pull-16 {
right: 66.66666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-15 {
right: 62.5%;
}
.hui-row-24 .hui-col-24-xxl-pull-14 {
right: 58.33333333%;
}
.hui-row-24 .hui-col-24-xxl-pull-13 {
right: 54.16666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-12 {
right: 50%;
}
.hui-row-24 .hui-col-24-xxl-pull-11 {
right: 45.83333333%;
}
.hui-row-24 .hui-col-24-xxl-pull-10 {
right: 41.66666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-9 {
right: 37.5%;
}
.hui-row-24 .hui-col-24-xxl-pull-8 {
right: 33.33333333%;
}
.hui-row-24 .hui-col-24-xxl-pull-7 {
right: 29.16666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-6 {
right: 25%;
}
.hui-row-24 .hui-col-24-xxl-pull-5 {
right: 20.83333333%;
}
.hui-row-24 .hui-col-24-xxl-pull-4 {
right: 16.66666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-3 {
right: 12.5%;
}
.hui-row-24 .hui-col-24-xxl-pull-2 {
right: 8.33333333%;
}
.hui-row-24 .hui-col-24-xxl-pull-1 {
right: 4.16666667%;
}
.hui-row-24 .hui-col-24-xxl-pull-0 {
right: auto;
}
.hui-row-24 .hui-col-24-xxl-push-24 {
left: 100%;
}
.hui-row-24 .hui-col-24-xxl-push-23 {
left: 95.83333333%;
}
.hui-row-24 .hui-col-24-xxl-push-22 {
left: 91.66666667%;
}
.hui-row-24 .hui-col-24-xxl-push-21 {
left: 87.5%;
}
.hui-row-24 .hui-col-24-xxl-push-20 {
left: 83.33333333%;
}
.hui-row-24 .hui-col-24-xxl-push-19 {
left: 79.16666667%;
}
.hui-row-24 .hui-col-24-xxl-push-18 {
left: 75%;
}
.hui-row-24 .hui-col-24-xxl-push-17 {
left: 70.83333333%;
}
.hui-row-24 .hui-col-24-xxl-push-16 {
left: 66.66666667%;
}
.hui-row-24 .hui-col-24-xxl-push-15 {
left: 62.5%;
}
.hui-row-24 .hui-col-24-xxl-push-14 {
left: 58.33333333%;
}
.hui-row-24 .hui-col-24-xxl-push-13 {
left: 54.16666667%;
}
.hui-row-24 .hui-col-24-xxl-push-12 {
left: 50%;
}
.hui-row-24 .hui-col-24-xxl-push-11 {
left: 45.83333333%;
}
.hui-row-24 .hui-col-24-xxl-push-10 {
left: 41.66666667%;
}
.hui-row-24 .hui-col-24-xxl-push-9 {
left: 37.5%;
}
.hui-row-24 .hui-col-24-xxl-push-8 {
left: 33.33333333%;
}
.hui-row-24 .hui-col-24-xxl-push-7 {
left: 29.16666667%;
}
.hui-row-24 .hui-col-24-xxl-push-6 {
left: 25%;
}
.hui-row-24 .hui-col-24-xxl-push-5 {
left: 20.83333333%;
}
.hui-row-24 .hui-col-24-xxl-push-4 {
left: 16.66666667%;
}
.hui-row-24 .hui-col-24-xxl-push-3 {
left: 12.5%;
}
.hui-row-24 .hui-col-24-xxl-push-2 {
left: 8.33333333%;
}
.hui-row-24 .hui-col-24-xxl-push-1 {
left: 4.16666667%;
}
.hui-row-24 .hui-col-24-xxl-push-0 {
left: auto;
}
.hui-row-24 .hui-col-24-xxl-offset-24 {
margin-left: 100%;
}
.hui-row-24 .hui-col-24-xxl-offset-23 {
margin-left: 95.83333333%;
}
.hui-row-24 .hui-col-24-xxl-offset-22 {
margin-left: 91.66666667%;
}
.hui-row-24 .hui-col-24-xxl-offset-21 {
margin-left: 87.5%;
}
.hui-row-24 .hui-col-24-xxl-offset-20 {
margin-left: 83.33333333%;
}
.hui-row-24 .hui-col-24-xxl-offset-19 {
margin-left: 79.16666667%;
}
.hui-row-24 .hui-col-24-xxl-offset-18 {
margin-left: 75%;
}
.hui-row-24 .hui-col-24-xxl-offset-17 {
margin-left: 70.83333333%;
}
.hui-row-24 .hui-col-24-xxl-offset-16 {
margin-left: 66.66666667%;
}
.hui-row-24 .hui-col-24-xxl-offset-15 {
margin-left: 62.5%;
}
.hui-row-24 .hui-col-24-xxl-offset-14 {
margin-left: 58.33333333%;
}
.hui-row-24 .hui-col-24-xxl-offset-13 {
margin-left: 54.16666667%;
}
.hui-row-24 .hui-col-24-xxl-offset-12 {
margin-left: 50%;
}
.hui-row-24 .hui-col-24-xxl-offset-11 {
margin-left: 45.83333333%;
}
.hui-row-24 .hui-col-24-xxl-offset-10 {
margin-left: 41.66666667%;
}
.hui-row-24 .hui-col-24-xxl-offset-9 {
margin-left: 37.5%;
}
.hui-row-24 .hui-col-24-xxl-offset-8 {
margin-left: 33.33333333%;
}
.hui-row-24 .hui-col-24-xxl-offset-7 {
margin-left: 29.16666667%;
}
.hui-row-24 .hui-col-24-xxl-offset-6 {
margin-left: 25%;
}
.hui-row-24 .hui-col-24-xxl-offset-5 {
margin-left: 20.83333333%;
}
.hui-row-24 .hui-col-24-xxl-offset-4 {
margin-left: 16.66666667%;
}
.hui-row-24 .hui-col-24-xxl-offset-3 {
margin-left: 12.5%;
}
.hui-row-24 .hui-col-24-xxl-offset-2 {
margin-left: 8.33333333%;
}
.hui-row-24 .hui-col-24-xxl-offset-1 {
margin-left: 4.16666667%;
}
.hui-row-24 .hui-col-24-xxl-offset-0 {
margin-left: 0;
}
}
/*2.3 响应式隐藏显示
Name: hui-visible
Explain: 左右两栏|左中右三栏|上中下
*/
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
.hidden-xs {
display: none !important;
}
.visible-xs-block {
display: block !important;
}
.visible-xs-inline {
display: inline !important;
}
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm-block {
display: block !important;
}
.visible-sm-inline {
display: inline !important;
}
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
.hidden-md {
display: none !important;
}
.visible-md-block {
display: block !important;
}
.visible-md-inline {
display: inline !important;
}
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
.hidden-lg {
display: none !important;
}
.visible-lg-block {
display: block !important;
}
.visible-lg-inline {
display: inline !important;
}
.visible-lg-inline-block {
display: inline-block !important;
}
}
.visible-print,
.visible-print-block,
.visible-print-inline,
.visible-print-inline-block {
display: none !important;
}
@media print {
.visible-print {
display: block !important;
}
table.visible-print {
display: table;
}
tr.visible-print {
display: table-row !important;
}
th.visible-print,
td.visible-print {
display: table-cell !important;
}
.visible-print-block {
display: block !important;
}
.visible-print-inline {
display: inline !important;
}
.visible-print-inline-block {
display: inline-block !important;
}
.hidden-print {
display: none !important;
}
}
/*3.1 排版
name: hui-typography
*/
/*3.1.1 标题
Example：
h1. 大标题小标题
h2. 大标题小标题
h3. 大标题小标题
h4. 大标题小标题
h5. 大标题小标题
h6. 大标题小标题
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-weight: 400;
line-height: 1;
color: #999;
}
h1,
h2,
h3 {
padding-top: 20px;
padding-bottom: 10px;
}
h1 small,
h1 .small,
h2 small,
h2 .small,
h3 small,
h3 .small {
font-size: 65%;
}
h4,
h5,
h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h4 small,
h4 .small,
h5 small,
h5 .small,
h6 small,
h6 .small {
font-size: 75%;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
/*3.1.2 强调
example:
这是段落，向下10像素间距
小型文本，是父容器字体大小的85%
重要文本，加粗显示
被强调的文本，斜体显示
带下划线的文本
引用
突出显示文本
带删除线的文本
预格式化的文本
*/
p {
margin-bottom: 10px;
}
/*段落*/
small {
font-size: 85%;
}
/*小型文本*/
b,
strong {
font-weight: bold;
}
/*重要的文本，加粗*/
em {
font-style: italic;
}
cite {
font-style: normal;
}
/*引用*/
mark {
color: #000;
background: #ff0;
}
/*计算机代码文本*/
dfn {
font-style: italic;
}
/*删除线*/
del {
font-family: Simsun;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
/*预格式化的文本*/
.uppercase {
text-transform: uppercase;
}
/*文字大写*/
.lowercase {
text-transform: lowercase;
}
/*文字小写*/
.capitalize {
text-transform: capitalize;
}
/*首字母大写*/
.en {
font-family: Arial !important;
}
/*3.1.3 对齐
name: text-align
example: class="text-l|text-r|text-c|va-t|va-m|va-b"
explain:
.text-水平对齐 （.text-l左对齐|.text-r右对齐|.text-c居中对齐）
.va-上下对齐 （.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐）
*/
.text-l {
text-align: left;
}
.text-r {
text-align: right;
}
.text-c {
text-align: center;
}
.va * {
vertical-align: sub !important;
*vertical-align: middle !important;
_vertical-align: middle !important;
}
.va-t {
vertical-align: top !important;
}
.va-m {
vertical-align: middle !important;
}
.va-b {
vertical-align: bottom !important;
}
/*3.1.4 定位
name: position
example: class="pos-r|pos-a|pos-f"
explain: .pos-r 相对定位|.pos-a 绝对定位|.pos-f 固定
*/
.pos-r {
position: relative;
}
.pos-a {
position: absolute;
}
.pos-f {
position: fixed;
}
/*3.1.5 浮动
name: float
example: class="f-l|f-r"
explain: .f-l 左浮动|.f-r 右浮动
*/
.f-l {
float: left !important;
_display: inline;
}
.f-r {
float: right !important;
_display: inline;
}
[class*=span].f-r {
float: right;
}
/*控制元素对定位的位置：居左|居右|j居上|居下*/
.pos-left {
left: 0;
right: auto;
}
.pos-right {
right: 0;
left: auto;
}
.pos-top {
top: 0;
bottom: auto;
}
.pos-bottom {
top: auto;
bottom: 0;
}
/*3.1.6 文字单行溢出省略号
name: text-overflow
example: class="text-overflow"
*/
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*3.1.7 线条
name: line
example: class="line"
*/
.line {
font-size: 0;
line-height: 0;
border-top: solid 1px #eee;
float: none;
}
/*3.1.8 外边距
name: margin
example: class="mt-5|mt-10..."
explain: .mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距
*/
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
.mt-15 {
margin-top: 15px;
}
.mt-20 {
margin-top: 20px;
}
.mt-25 {
margin-top: 25px;
}
.mt-30 {
margin-top: 30px;
}
.mt-35 {
margin-top: 35px;
}
.mt-40 {
margin-top: 40px;
}
.mt-50 {
margin-top: 50px;
}
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-15 {
margin-bottom: 15px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-40 {
margin-bottom: 40px;
}
.mb-50 {
margin-bottom: 50px;
}
.ml-5 {
margin-left: 5px;
}
.ml-10 {
margin-left: 10px;
}
.ml-15 {
margin-left: 15px;
}
.ml-20 {
margin-left: 20px;
}
.ml-30 {
margin-left: 30px;
}
.ml-40 {
margin-left: 40px;
}
.ml-50 {
margin-left: 50px;
}
.mr-5 {
margin-right: 5px;
}
.mr-10 {
margin-right: 10px;
}
.mr-15 {
margin-right: 15px;
}
.mr-20 {
margin-right: 20px;
}
.mr-30 {
margin-right: 30px;
}
.mr-40 {
margin-right: 40px;
}
.mr-50 {
margin-right: 50px;
}
/*3.1.9 内填充
name: padding
example: class="pt-5|pt-10|……"
explain: .pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充
*/
.pt-5 {
padding-top: 5px;
}
.pt-10 {
padding-top: 10px;
}
.pt-15 {
padding-top: 15px;
}
.pt-20 {
padding-top: 20px;
}
.pt-25 {
padding-top: 25px;
}
.pt-30 {
padding-top: 30px;
}
.pb-5 {
padding-bottom: 5px;
}
.pb-10 {
padding-bottom: 10px;
}
.pb-15 {
padding-bottom: 15px;
}
.pb-20 {
padding-bottom: 20px;
}
.pb-25 {
padding-bottom: 25px;
}
.pb-30 {
padding-bottom: 30px;
}
.pl-5 {
padding-left: 5px;
}
.pl-10 {
padding-left: 10px;
}
.pl-15 {
padding-left: 15px;
}
.pl-20 {
padding-left: 20px;
}
.pl-25 {
padding-left: 25px;
}
.pl-30 {
padding-left: 30px;
}
.pr-5 {
padding-right: 5px;
}
.pr-10 {
padding-right: 10px;
}
.pr-15 {
padding-right: 15px;
}
.pr-20 {
padding-right: 20px;
}
.pr-25 {
padding-right: 25px;
}
.pr-30 {
padding-right: 30px;
}
.pd-5 {
padding: 5px;
}
.pd-10 {
padding: 10px;
}
.pd-15 {
padding: 15px;
}
.pd-20 {
padding: 20px;
}
.pd-25 {
padding: 25px;
}
.pd-30 {
padding: 30px;
}
.pd-40 {
padding: 40px;
}
/*3.1.10 边框，css3圆角
name: border
example: class="bk-gray radius"
explain: .bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
*/
.bk-gray {
border: solid 1px #eee;
}
.radius {
border-radius: 4px;
}
.radius.size-MINI {
border-radius: 3px;
}
.radius.size-L {
border-radius: 5px;
}
.radius.size-XL {
border-radius: 6px;
}
.round {
border-radius: 50%;
overflow: hidden;
}
/*3.1.11 css3阴影
name: shadow
example: class="box-shadow|text-shadow"
explain: box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。text-shadow 文字阴影
*/
.box-shadow {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.text-shadow {
-webkit-text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
/*3.1.12 行内分割竖线
name: hui-pipe hui-divider
example: |
*/
.hui-pipe {
margin: 0 5px;
color: #ccc;
font-size: 10px !important;
}
.hui-divider {
position: relative;
margin: 24px 0;
height: 1px;
width: 100%;
min-width: 100%;
border-top: solid 1px #ddd;
}
.hui-divider .hui-divider-box {
position: absolute;
left: 0;
right: 0;
top: -11px;
text-align: center;
}
.hui-divider .hui-divider-box .hui-divider-text {
background-color: #fff;
padding: 0 10px;
line-height: 20px;
height: 20px;
font-size: 16px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
white-space: nowrap;
text-align: center;
}
.hui-divider.text-l .hui-divider-box {
text-align: left;
padding-left: 20px;
}
.hui-divider.text-r .hui-divider-box {
text-align: right;
padding-right: 20px;
}
/*3.1.13 文字大小
name: font-size
example: class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
explain: 12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体
*/
.f-12 {
font-size: 12px;
}
.f-14 {
font-size: 14px;
}
.f-16 {
font-size: 16px;
}
.f-18 {
font-size: 18px;
}
.f-20 {
font-size: 20px;
}
.f-22 {
font-size: 22px;
}
.f-24 {
font-size: 24px;
}
.f-26 {
font-size: 26px;
}
.f-28 {
font-size: 28px;
}
.f-30 {
font-size: 30px;
}
/*3.1.14 文字行距
name: line-height
example: class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
explain: 16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高
*/
.lh-16 {
line-height: 16px;
}
.lh-18 {
line-height: 18px;
}
.lh-20 {
line-height: 20px;
}
.lh-22 {
line-height: 22px;
}
.lh-24 {
line-height: 24px;
}
.lh-26 {
line-height: 26px;
}
.lh-28 {
line-height: 28px;
}
.lh-30 {
line-height: 30px;
}
/*3.1.15 文字颜色
name: color
example: class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange"
explain: 主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色
*/
/*全局默认链接颜色*/
body {
background-color: #fff;
color: #333;
}
body .bg-fff {
background-color: #fff;
}
body a {
color: #333;
}
body a:hover,
body .active a {
color: #06c;
}
body .c-primary,
body .c-primary a,
body a.c-primary {
color: #5a98de;
}
body .c-primary a:hover,
body a.c-primary:hover {
color: #5a98de;
}
body .c-secondary,
body .c-secondary a,
body a.c-secondary {
color: #555;
}
body .c-secondary a:hover,
body a.c-secondary:hover {
color: #555;
}
body .c-success,
body .c-success a,
body a.c-success {
color: #3bb4f2;
}
body .c-success a:hover,
body a.c-success:hover {
color: #3bb4f2;
}
body .c-danger,
body .c-danger a,
body a.c-danger {
color: #dd514c;
}
body .c-danger a:hover,
body a.c-danger:hover {
color: #dd514c;
}
body .c-warning,
body .c-warning a,
body a.c-warning {
color: #f37b1d;
}
body .c-warning a:hover,
body a.c-warning:hover {
color: #f37b1d;
}
body .c-error,
body .c-error a,
body a.c-error {
color: #c00;
}
body .c-error a:hover,
body a.c-error:hover {
color: #c00;
}
body .c-333,
body .c-333 a,
body a.c-333 {
color: #333;
}
body .c-333 a:hover,
body a.c-333:hover {
color: #333;
}
body .c-666,
body .c-666 a,
body a.c-666 {
color: #666;
}
body .c-666 a:hover,
body a.c-666:hover {
color: #666;
}
body .c-999,
body .c-999 a,
body a.c-999 {
color: #999;
}
body .c-999 a:hover,
body a.c-999:hover {
color: #999;
}
body .c-red,
body .c-red a,
body a.c-red {
color: red;
}
body .c-red a:hover,
body a.c-red:hover {
color: red;
}
body .c-green,
body .c-green a,
body a.c-green {
color: green;
}
body .c-red a:hover,
body a.c-red:hover {
color: green;
}
body .c-blue,
body .c-blue a,
body a.c-blue {
color: blue;
}
body .c-blue a:hover,
body a.c-blue:hover {
color: blue;
}
body .c-white,
body .c-white a,
body a.c-white {
color: white;
}
body .c-white a:hover,
body a.c-white:hover {
color: white;
}
body .c-black,
body .c-black a {
color: #000;
}
body .c-black a:hover,
body a.c-black:hover {
color: #000;
}
body .c-orange,
body .c-orange a,
body a.c-orange {
color: orange;
}
body .c-orange a:hover,
body a.c-orange:hover {
color: orange;
}
/*3.1.16 缩略语
example: UI
explain:
*/
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #999;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
/*3.1.17 地址
example: 北京市海淀区上地……
explain:
*/
address {
display: block;
margin-bottom: 20px;
font-style: normal;
line-height: 20px;
}
/*3.1.18 引用
example: 这是引用的内容
explain:
*/
blockquote {
padding: 0 0 0 15px;
margin: 0 0 20px;
border-left: 5px solid #eee;
}
blockquote p {
margin-bottom: 0;
font-size: 17.5px;
font-weight: 300;
line-height: 1.25;
}
blockquote small {
display: block;
line-height: 20px;
color: #999;
}
blockquote.text-r {
padding-right: 15px;
padding-left: 0;
border-right: 5px solid #eee;
border-left: 0;
}
blockquote.text-r p {
text-align: right;
}
blockquote.text-r small {
text-align: right;
}
blockquote.text-r small:before {
content: "";
}
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
q {
/*短的引用*/
quotes: "“" "”" "‘" "’";
}
/*3.1.19 上标，下标
example: 2 2
explain: 上标|下标
*/
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/*3.1.20 内容样式
name: hui-article-content
example:
explain: 内容样式
*/
.hui-article-content {
position: relative;
font-size: 17px;
line-height: 1.8;
overflow: hidden;
text-align: left;
word-break: break-all;
word-wrap: break-word;
}
.hui-article-content h3 {
font-size: 18px;
}
.hui-article-content h4 {
font-size: 16px;
}
.hui-article-content p {
margin-bottom: 1.5rem;
text-align: justify;
word-break: break-all;
}
.hui-article-content p.text-c {
text-align: center;
}
.hui-article-content img {
max-width: 100%;
}
.hui-article-content ul {
text-indent: 2em;
}
.hui-article-content .indent {
text-indent: 2em;
}
@media (max-width: 767px) {
.hui-article-content .content {
font-size: 16px;
}
}
@media (max-width: 480px) {
.hui-article-content .content img {
max-width: 100% !important;
height: auto !important;
}
}
/*3.1.21 描述
name: style_dldtdd
explain: .dl-horizontal 水平描述，默认不加为垂直模式。
*/
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
/*3.1.22 隐藏 显示
name: style_display
example: 隐藏的内容
显示的内容
explain: .hide 隐藏 / .show 显示
*/
.hide {
display: none;
}
[hidden] {
display: none;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.f-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
[class*=span].hide,
.hui-row-fluid [class*=span].hide {
display: none;
}
.show {
display: block;
}
.invisible {
visibility: hidden;
}
/*3.1.23 尺寸
新增尺寸全局类名，用于表单、按钮、表格、头像、标签等元素上，要与元素一起配合使用，方能看到效果
*/
/*中 缺省默认尺寸，可以不写，可以理解为：均码*/
/*超大*/
.hui-input-text,
.hui-btn,
.hui-input-text.size-M,
.hui-btn.size-M {
font-size: 14px;
height: 31px;
*height: auto;
line-height: 1.42857;
padding: 4px;
}
/*默认为M，可以不写，可以理解为：均码*/
a.hui-btn,
a.hui-btn.size-M,
span.hui-btn,
span.hui-btn.size-M {
line-height: 21px;
}
.hui-btn,
.hui-btn.size-M {
padding: 4px 12px;
}
.hui-input-text.size-MINI,
.hui-btn.size-MINI {
font-size: 12px;
height: 23px;
padding: 1px 2px;
line-height: 1.42857;
}
.hui-input-text.size-MINI,
.hui-btn.size-MINI {
line-height: 21px;
padding: 1px 4px;
}
.hui-input-text.size-S,
.hui-btn.size-S {
font-size: 12px;
height: 27px;
padding: 3px;
line-height: 1.42857;
}
.hui-input-text.size-L,
.hui-btn.size-L {
font-size: 16px;
height: 41px;
padding: 8px;
}
.hui-input-text.size-XL,
.hui-btn.size-XL {
font-size: 18px;
height: 48px;
padding: 10px;
}
a.hui-btn.size-S,
span.hui-btn.size-S {
line-height: 19px;
}
.hui-btn.size-S {
padding: 3px 8px;
}
a.hui-btn.size-L,
span.hui-btn.size-L {
line-height: 23px;
}
.hui-btn.size-L {
padding: 8px 16px;
}
a.hui-btn.size-XL,
span.hui-btn.size-XL {
line-height: 26px;
}
.hui-btn.size-XL {
padding: 10px 24px;
}
@media (max-width: 767px) {
.responsive .hui-input-text.size-MINI,
.responsive .hui-btn.size-MINI {
height: 24px;
}
.responsive .hui-input-text.size-S,
.responsive .hui-btn.size-S {
font-size: 14px;
height: 30px;
}
.responsive .hui-input-text,
.responsive .hui-btn,
.responsive .hui-input-text.size-M,
.responsive .hui-btn.size-M {
font-size: 16px;
height: 36px;
}
.responsive .hui-input-text.size-L,
.responsive .hui-btn.size-L {
font-size: 18px;
height: 42px;
}
.responsive .hui-input-text.size-XL,
.responsive .hui-btn.size-XL {
font-size: 20px;
height: 48px;
}
}
/*3.2 代码
name: hui-code
example: 转义过的代码
explain: code：行内代码，pre：基本代码块;包装代码片段，.prettyprint颜色增强/.linenums显示行号
*/
code {
padding: 0 3px 2px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}
pre .title,
pre .keyword,
pre .body,
pre .des {
color: #333;
}
/*关键词*/
pre {
display: block;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
padding: 9.5px;
margin-bottom: 10px;
font-size: 12px;
line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
}
pre ol.linenums {
margin: 0 0 0 33px;
}
pre ol.linenums li {
padding-left: 12px;
color: #bbb;
line-height: 18px;
text-shadow: 0 1px 0 #fff;
}
.prettyprint {
margin-bottom: 20px;
padding: 8px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
/*注释*/
/*标签*/
/*等于*/
/*值*/
/*文档声明，属性*/
}
.prettyprint .com {
color: #998;
font-style: italic;
}
.prettyprint .tag {
color: #007;
}
.prettyprint .lit {
color: #195f91;
}
.prettyprint .pun,
.prettyprint .opn,
.prettyprint .clo {
color: #93a1a1;
}
.prettyprint .fun {
color: #dc322f;
}
.prettyprint .str,
.prettyprint .atv {
color: #D14;
}
.prettyprint .kwd,
.prettyprint .tag {
color: #1e347b;
}
.prettyprint .typ,
.prettyprint .atn,
.prettyprint .dec,
.prettyprint .var {
color: teal;
}
.prettyprint .pln {
color: #48484c;
}
.prettyprint.linenums {
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
ol.linenums {
list-style: decimal outside none;
margin-left: 20px;
}
ol.linenums li {
line-height: 28px;
padding-left: 10px;
}
@media (max-width: 767px) {
pre ol.linenums {
margin-left: 0;
list-style: none;
}
pre ol.linenums li {
padding-left: 0;
}
.prettyprint.linenums {
box-shadow: inset 0px 0 0 #fbfbfc, inset 0px 0 0 #ececf0;
}
}
/*3.3 表格
name: hui-table
example:
explain: 表格，None无样式，仅仅有列和行|.hui-table|.hui-table-bordered表格外围均有外边框|.hui-table-striped奇数行背景设为浅灰色|.hui-table-condensed竖直方向padding缩减一半，从8px变为4px，所有的 td 和 th 元素都受影响
*/
/*默认table*/
table {
width: 100%;
empty-cells: show;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
/*竖直方向padding缩减一半*/
}
table th {
text-align: left;
font-weight: 400;
}
table.hui-table-condensed th, table.hui-table-condensed td {
padding: 4px 5px;
}
table.hui-table {
/*带水平线*/
/*带横向分割线*/
/*th带背景*/
/*带外边框*/
/*奇数行背景设为浅灰色*/
/*竖直方向padding缩减一半*/
/*鼠标悬停样式*/
/*表格文字对齐方式，默认是居左对齐*/
/*整行居中*/
/*整行居右*/
/*单独列居左*/
/*单独列居中*/
/*单独列居右*/
/*圆角*/
}
table.hui-table th {
font-weight: bold;
}
table.hui-table td {
text-align: left;
}
table.hui-table th,
table.hui-table td {
padding: 8px;
line-height: 20px;
word-break: break-all;
}
table.hui-table tbody tr.success > td {
background-color: #dff0d8;
}
table.hui-table tbody tr.error > td {
background-color: #f2dede;
}
table.hui-table tbody tr.warning > td {
background-color: #fcf8e3;
}
table.hui-table tbody tr.info > td {
background-color: #d9edf7;
}
table.hui-table tbody + tbody {
border-top: 2px solid #ddd;
}
table.hui-table .hui-table {
background-color: #fff;
}
table.hui-table.hui-table-border {
border-top: 1px solid #ddd;
}
table.hui-table.hui-table-border th,
table.hui-table.hui-table-border td {
border-bottom: 1px solid #ddd;
}
table.hui-table.hui-table-bg thead th {
background-color: #F5FAFE;
}
table.hui-table.hui-table-bordered {
border: 1px solid #ddd;
border-collapse: separate;
*border-collapse: collapse;
border-left: 0;
}
table.hui-table.hui-table-bordered th,
table.hui-table.hui-table-bordered td {
border-left: 1px solid #ddd;
}
table.hui-table.hui-table-bordered.hui-table-bordered {
border-bottom: 0;
}
table.hui-table.hui-table-striped tbody > tr:nth-child(odd) > td, table.hui-table.hui-table-striped tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
table.hui-table.hui-table-condensed th, table.hui-table.hui-table-condensed td {
padding: 4px 5px;
}
table.hui-table.hui-table-hover tbody tr:hover td, table.hui-table.v-hover tbody tr:hover th {
background-color: #f5f5f5;
}
table.hui-table tbody tr.selected td {
/*鼠标选择整行样式*/
background-color: #F3F3F3;
}
table.hui-table tbody tr.active,
table.hui-table tbody tr.active > td,
table.hui-table tbody tr.active > th,
table.hui-table tbody tr .active {
/*悬停在行*/
background-color: #F5F5F5 !important;
}
table.hui-table tbody tr.success,
table.hui-table tbody tr.success > td,
table.hui-table tbody tr.success > th,
table.hui-table tbody tr .success {
/*成功或积极*/
background-color: #DFF0D8 !important;
}
table.hui-table tbody tr.warning,
table.hui-table tbody tr.warning > td,
table.hui-table tbody tr.warning > th,
table.hui-table tbody tr .warning {
/*警告或出错*/
background-color: #FCF8E3 !important;
}
table.hui-table tbody tr.danger,
table.hui-table tbody tr.danger > td,
table.hui-table tbody tr.danger > th,
table.hui-table tbody tr .danger {
/*危险*/
background-color: #F2DEDE !important;
}
table.hui-table .text-l th,
table.hui-table .text-l td {
text-align: left;
}
table.hui-table .text-c th,
table.hui-table .text-c td {
text-align: center;
}
table.hui-table .text-r th,
table.hui-table .text-r td {
text-align: right;
}
table.hui-table th.text-l,
table.hui-table td.text-l {
text-align: left !important;
}
table.hui-table th.text-c,
table.hui-table td.text-c {
text-align: center !important;
}
table.hui-table th.text-r,
table.hui-table td.text-r {
text-align: right !important;
}
table.hui-table.radius thead th:first-child {
border-top-left-radius: 4px;
}
table.hui-table.radius thead th:last-child {
border-top-right-radius: 4px;
}
table.hui-table.radius tr:last-child td:first-child {
border-bottom-left-radius: 4px;
}
table.hui-table.radius tr:last-child td:last-child {
border-bottom-right-radius: 4px;
}
/*datatable*/
table.dataTable {
border-collapse: separate;
border-spacing: 0;
clear: both;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
cursor: pointer;
background-repeat: no-repeat;
background-position: right center;
}
table.dataTable thead .sorting {
background-image: url(../images/dataTable/sort_both.png);
}
table.dataTable thead .sorting_asc {
background-image: url(../images/dataTable/sort_asc.png);
}
table.dataTable thead .sorting_desc {
background-image: url(../images/dataTable/sort_desc.png);
}
table.dataTable td.sorting_1 {
background-color: #f5fafe;
}
.dataTables_wrapper .dataTables_length {
float: left;
padding-bottom: 20px;
}
.dataTables_wrapper .dataTables_length .select {
width: 50px;
}
.dataTables_wrapper .dataTables_filter {
float: right;
text-align: right;
}
.dataTables_wrapper .dataTables_filter .hui-input-text {
width: auto;
}
.dataTables_wrapper .dataTables_info {
clear: both;
float: left;
padding-top: 10px;
font-size: 14px;
color: #666;
}
.dataTables_wrapper .dataTables_paginate {
float: right;
padding-top: 10px;
text-align: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
margin-left: 2px;
text-align: center;
text-decoration: none;
color: #666;
height: 26px;
line-height: 26px;
text-decoration: none;
margin: 0 0px 6px 6px;
padding: 0 10px;
font-size: 14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: #5a98de;
color: #fff;
}
/*让表格支持响应式*/
/*
*/
@media (max-width: 767px) {
.hui-table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 1px solid #ddd;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
}
.hui-table-responsive > .hui-table {
margin-bottom: 0;
}
.hui-table-responsive > .hui-table > thead > tr > th,
.hui-table-responsive > .hui-table > tbody > tr > th,
.hui-table-responsive > .hui-table > tfoot > tr > th,
.hui-table-responsive > .hui-table > thead > tr > td,
.hui-table-responsive > .hui-table > tbody > tr > td,
.hui-table-responsive > .hui-table > tfoot > tr > td {
white-space: nowrap;
}
.hui-table-responsive > .hui-table-bordered {
border: 0;
}
.hui-table-responsive > .hui-table-bordered > thead > tr > th:first-child,
.hui-table-responsive > .hui-table-bordered > tbody > tr > th:first-child,
.hui-table-responsive > .hui-table-bordered > tfoot > tr > th:first-child,
.hui-table-responsive > .hui-table-bordered > thead > tr > td:first-child,
.hui-table-responsive > .hui-table-bordered > tbody > tr > td:first-child,
.hui-table-responsive > .hui-table-bordered > tfoot > tr > td:first-child {
border-left: 0;
}
.hui-table-responsive > .hui-table-bordered > thead > tr > th:last-child,
.hui-table-responsive > .hui-table-bordered > tbody > tr > th:last-child,
.hui-table-responsive > .hui-table-bordered > tfoot > tr > th:last-child,
.hui-table-responsive > .hui-table-bordered > thead > tr > td:last-child,
.hui-table-responsive > .hui-table-bordered > tbody > tr > td:last-child,
.hui-table-responsive > .hui-table-bordered > tfoot > tr > td:last-child {
border-right: 0;
}
.hui-table-responsive > .hui-table-bordered > tbody > tr:last-child > th,
.hui-table-responsive > .hui-table-bordered > tfoot > tr:last-child > th,
.hui-table-responsive > .hui-table-bordered > tbody > tr:last-child > td,
.hui-table-responsive > .hui-table-bordered > tfoot > tr:last-child > td {
border-bottom: 0;
}
}
/*3.4 表单
name: hui-form
example:
explain:
*/
/*3.4.1 input,textarea 文本域 文本区域*/
/*默认状态*/
.hui-input-text,
.hui-textarea {
box-sizing: border-box;
border: solid 1px #ddd;
width: 100%;
transition: all 0.2s linear 0s;
padding: 5px 10px;
}
.hui-textarea {
height: 100px;
resize: none;
font-size: 14px;
word-break: break-all;
}
.hui-textarea-numberbar {
position: absolute;
right: 20px;
bottom: 5px;
z-index: 1;
margin-bottom: 0;
}
.hui-textarea-length {
font-style: normal;
}
.hui-input-text:hover,
.hui-textarea:hover {
border: solid 1px #3bb4f2;
}
/*得到焦点后*/
.hui-input-text.focus,
.hui-textarea.focus {
border: solid 1px #0f9ae0 \9 ;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: "0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)";
}
/*不可点击*/
.hui-input-text.disabled,
.hui-textarea.disabled,
.hui-input-text.disabled.focus,
.hui-textarea.disabled.focus {
background-color: #ededed;
cursor: default;
border-color: #ddd;
box-shadow: inset 0 2px 2px #e8e7e7;
}
/*只读状态*/
.hui-input-text.disabled,
.hui-textarea.disabled {
background-color: #e6e6e6;
cursor: default;
}
/*阴影*/
.hui-input-text.box-shadow,
.hui-textarea.box-shadow {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/*行内元素*/
.hui-input-text.inline {
display: inline-block;
width: auto;
}
/*3.4.2 checkbox radio 单选 多选
example:
explain:
*/
input[type=radio],
input[type=checkbox] {
line-height: normal;
margin-top: -4px;
}
.check-box,
.radio-box {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
position: relative;
padding-left: 30px;
padding-right: 20px;
}
.icheckbox,
.icheckbox-red,
.icheckbox-green,
.icheckbox-blue,
.icheckbox-aero,
.icheckbox-grey,
.icheckbox-orange,
.icheckbox-yellow,
.icheckbox-pink,
.icheckbox-purple,
.iradio,
.iradio-red,
.iradio-green,
.iradio-blue,
.iradio-aero,
.iradio-grey,
.iradio-orange,
.iradio-yellow,
.iradio-pink,
.iradio-purple {
position: absolute;
top: 4px;
left: 0;
}
@media (max-width: 767px) {
.responsive .check-box,
.responsive .radio-box {
display: block;
}
}
/*3.4.2.1 jQuery.icheck.css*/
/* iCheck.js Minimal skin
----------------------------------- */
.icheckbox,
.iradio {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/minimal.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox {
background-position: 0 0;
}
.icheckbox.static:hover {
background-position: 0 0;
}
.icheckbox.hover, .icheckbox:hover {
background-position: -20px 0;
}
.icheckbox.checked {
background-position: -40px 0;
}
.icheckbox.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox.checked.disabled {
background-position: -80px 0;
}
.iradio {
background-position: -100px 0;
}
.iradio.static:hover {
background-position: -100px 0;
}
.iradio.hover, .iradio:hover {
background-position: -120px 0;
}
.iradio.checked {
background-position: -140px 0;
}
.iradio.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox,
.iradio {
background-image: url(../images/minimal@2x.png);
background-size: 200px 20px;
}
}
/* red */
.icheckbox-red,
.iradio-red {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/red.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-red,
.icheckbox-red.static:hover {
background-position: 0 0;
}
.icheckbox-red.hover,
.icheckbox-red:hover {
background-position: -20px 0;
}
.icheckbox-red.checked {
background-position: -40px 0;
}
.icheckbox-red.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-red.checked.disabled {
background-position: -80px 0;
}
.iradio-red,
.iradio-red.static:hover {
background-position: -100px 0;
}
.iradio-red.hover,
.iradio-red:hover {
background-position: -120px 0;
}
.iradio-red.checked {
background-position: -140px 0;
}
.iradio-red.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-red.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-red,
.iradio-red {
background-image: url(../images/red@2x.png);
background-size: 200px 20px;
}
}
/* green */
.icheckbox-green,
.iradio-green {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/green.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-green,
.icheckbox-green.static:hover {
background-position: 0 0;
}
.icheckbox-green.hover,
.icheckbox-green:hover {
background-position: -20px 0;
}
.icheckbox-green.checked {
background-position: -40px 0;
}
.icheckbox-green.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-green.checked.disabled {
background-position: -80px 0;
}
.iradio-green,
.iradio-green.static:hover {
background-position: -100px 0;
}
.iradio-green.hover,
.iradio-green:hover {
background-position: -120px 0;
}
.iradio-green.checked {
background-position: -140px 0;
}
.iradio-green.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-green.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-green,
.iradio-green {
background-image: url(../images/green@2x.png);
background-size: 200px 20px;
}
}
/* blue */
.icheckbox-blue,
.iradio-blue {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/blue.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-blue,
.icheckbox-blue.static:hover {
background-position: 0 0;
}
.icheckbox-blue.hover,
.icheckbox-blue:hover {
background-position: -20px 0;
}
.icheckbox-blue.checked {
background-position: -40px 0;
}
.icheckbox-blue.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-blue.checked.disabled {
background-position: -80px 0;
}
.iradio-blue,
.iradio-blue.static:hover {
background-position: -100px 0;
}
.iradio-blue.hover,
.iradio-blue:hover {
background-position: -120px 0;
}
.iradio-blue.checked {
background-position: -140px 0;
}
.iradio-blue.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-blue.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-blue,
.iradio-blue {
background-image: url(../images/blue@2x.png);
background-size: 200px 20px;
}
}
/* aero */
.icheckbox-aero,
.iradio-aero {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/aero.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-aero,
.icheckbox-aero.static:hover {
background-position: 0 0;
}
.icheckbox-aero.hover,
.icheckbox-aero:hover {
background-position: -20px 0;
}
.icheckbox-aero.checked {
background-position: -40px 0;
}
.icheckbox-aero.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-aero.checked.disabled {
background-position: -80px 0;
}
.iradio-aero,
.iradio-aero.static:hover {
background-position: -100px 0;
}
.iradio-aero.hover,
.iradio-aero:hover {
background-position: -120px 0;
}
.iradio-aero.checked {
background-position: -140px 0;
}
.iradio-aero.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-aero.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-aero,
.iradio-aero {
background-image: url(../images/aero@2x.png);
background-size: 200px 20px;
}
}
/* grey */
.icheckbox-grey,
.iradio-grey {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/grey.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-grey,
.icheckbox-grey.static:hover {
background-position: 0 0;
}
.icheckbox-grey.hover,
.icheckbox-grey:hover {
background-position: -20px 0;
}
.icheckbox-grey.checked {
background-position: -40px 0;
}
.icheckbox-grey.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-grey.checked.disabled {
background-position: -80px 0;
}
.iradio-grey,
.iradio-grey.static:hover {
background-position: -100px 0;
}
.iradio-grey.hover,
.iradio-grey:hover {
background-position: -120px 0;
}
.iradio-grey.checked {
background-position: -140px 0;
}
.iradio-grey.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-grey.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-grey,
.iradio-grey {
background-image: url(../images/grey@2x.png);
background-size: 200px 20px;
}
}
/* orange */
.icheckbox-orange,
.iradio-orange {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/orange.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-orange,
.icheckbox-orange.static:hover {
background-position: 0 0;
}
.icheckbox-orange.hover,
.icheckbox-orange:hover {
background-position: -20px 0;
}
.icheckbox-orange.checked {
background-position: -40px 0;
}
.icheckbox-orange.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-orange.checked.disabled {
background-position: -80px 0;
}
.iradio-orange,
.iradio-orange.static:hover {
background-position: -100px 0;
}
.iradio-orange.hover,
.iradio-orange:hover {
background-position: -120px 0;
}
.iradio-orange.checked {
background-position: -140px 0;
}
.iradio-orange.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-orange.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-orange,
.iradio-orange {
background-image: url(../images/orange@2x.png);
background-size: 200px 20px;
}
}
/* yellow */
.icheckbox-yellow,
.iradio-yellow {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/yellow.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-yellow,
.icheckbox-yellow.static:hover {
background-position: 0 0;
}
.icheckbox-yellow.hover,
.icheckbox-yellow:hover {
background-position: -20px 0;
}
.icheckbox-yellow.checked {
background-position: -40px 0;
}
.icheckbox-yellow.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-yellow.checked.disabled {
background-position: -80px 0;
}
.iradio-yellow,
.iradio-yellow.static:hover {
background-position: -100px 0;
}
.iradio-yellow.hover,
.iradio-yellow:hover {
background-position: -120px 0;
}
.iradio-yellow.checked {
background-position: -140px 0;
}
.iradio-yellow.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-yellow.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-yellow,
.iradio-yellow {
background-image: url(../images/yellow@2x.png);
background-size: 200px 20px;
}
}
/* pink */
.icheckbox-pink,
.iradio-pink {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/pink.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-pink,
.icheckbox-pink.static:hover {
background-position: 0 0;
}
.icheckbox-pink.hover,
.icheckbox-pink:hover {
background-position: -20px 0;
}
.icheckbox-pink.checked {
background-position: -40px 0;
}
.icheckbox-pink.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-pink.checked.disabled {
background-position: -80px 0;
}
.iradio-pink,
.iradio-pink.static:hover {
background-position: -100px 0;
}
.iradio-pink.hover,
.iradio-pink:hover {
background-position: -120px 0;
}
.iradio-pink.checked {
background-position: -140px 0;
}
.iradio-pink.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-pink.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-pink,
.iradio-pink {
background-image: url(../images/pink@2x.png);
background-size: 200px 20px;
}
}
/* purple */
.icheckbox-purple,
.iradio-purple {
display: block;
margin: 0;
padding: 0;
width: 18px;
height: 18px;
background: url(../images/purple.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox-purple,
.icheckbox-purple.static:hover {
background-position: 0 0;
}
.icheckbox-purple.hover,
.icheckbox-purple:hover {
background-position: -20px 0;
}
.icheckbox-purple.checked {
background-position: -40px 0;
}
.icheckbox-purple.disabled {
background-position: -60px 0;
cursor: default;
}
.icheckbox-purple.checked.disabled {
background-position: -80px 0;
}
.iradio-purple,
.iradio-purple.static:hover {
background-position: -100px 0;
}
.iradio-purple.hover,
.iradio-purple:hover {
background-position: -120px 0;
}
.iradio-purple.checked {
background-position: -140px 0;
}
.iradio-purple.disabled {
background-position: -160px 0;
cursor: default;
}
.iradio-purple.checked.disabled {
background-position: -180px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox-purple,
.iradio-purple {
background-image: url(../images/purple@2x.png);
background-size: 200px 20px;
}
}
/*3.4.3 Bootsrtap.Switch.css*/
.has-switch {
display: inline-block;
cursor: pointer;
border-radius: 5px;
border: 1px solid;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
position: relative;
text-align: left;
overflow: hidden;
line-height: 8px;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 100px;
}
.has-switch.size-MINI {
min-width: 72px;
}
.has-switch.size-S {
min-width: 80px;
}
.has-switch.size-L {
min-width: 120px;
}
.has-switch.deactivate {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default !important;
}
.has-switch.deactivate label,
.has-switch.deactivate span {
cursor: default !important;
}
.has-switch > div {
display: inline-block;
width: 150%;
position: relative;
top: 0;
}
.has-switch > div.switch-animate {
transition: left 0.5s;
}
.has-switch > div.switch-off {
left: -50%;
}
.has-switch > div.switch-on {
left: 0;
}
.has-switch input[type=checkbox] {
display: none;
}
.has-switch span,
.has-switch label {
-ms-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: relative;
display: inline-block;
padding-bottom: 4px;
padding-top: 4px;
font-size: 14px;
line-height: 20px;
}
.has-switch span.size-MINI,
.has-switch label.size-MINI {
padding-bottom: 4px;
padding-top: 4px;
font-size: 10px;
line-height: 9px;
}
.has-switch span.size-S,
.has-switch label.size-S {
padding-bottom: 3px;
padding-top: 3px;
font-size: 12px;
line-height: 18px;
}
.has-switch span.size-L,
.has-switch label.size-L {
padding-bottom: 9px;
padding-top: 9px;
font-size: 16px;
line-height: normal;
}
.has-switch label {
text-align: center;
margin-top: -1px;
margin-bottom: -1px;
z-index: 100;
width: 34%;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
background-image: linear-gradient(to bottom, #fff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffffff", endColorstr="#ffe6e6e6", GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch label:hover, .has-switch label:focus, .has-switch label:active, .has-switch label.active, .has-switch label.disabled, .has-switch label[disabled] {
color: #fff;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.has-switch label:active, .has-switch label.active {
background-color: #ccc \9 ;
}
.has-switch label i {
color: #000;
text-shadow: 0 1px 0 #fff;
line-height: 18px;
pointer-events: none;
}
.has-switch span {
text-align: center;
z-index: 1;
width: 33%;
}
.has-switch span.switch-left {
-ms-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-ms-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.has-switch span.switch-right {
color: #333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f0f0f0;
background-image: linear-gradient(to bottom, #e6e6e6, #fff);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffe6e6e6", endColorstr="#ffffffff", GradientType=0);
border-color: #fff #fff #d9d9d9;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-right:hover, .has-switch span.switch-right:focus, .has-switch span.switch-right:active, .has-switch span.switch-right.active, .has-switch span.switch-right.disabled, .has-switch span.switch-right[disabled] {
color: #333;
background-color: #fff;
*background-color: #f2f2f2;
}
.has-switch span.switch-right:active, .has-switch span.switch-right.active {
background-color: #e6e6e6 \9 ;
}
.has-switch span.switch-primary, .has-switch span.switch-left {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #005fcc;
background-image: linear-gradient(to bottom, #04c, #08c);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0044cc", endColorstr="#ff0088cc", GradientType=0);
border-color: #08c #08c #005580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #08c;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-primary:hover, .has-switch span.switch-primary:focus, .has-switch span.switch-primary:active, .has-switch span.switch-primary.active, .has-switch span.switch-primary.disabled, .has-switch span.switch-primary[disabled], .has-switch span.switch-left:hover, .has-switch span.switch-left:focus, .has-switch span.switch-left:active, .has-switch span.switch-left.active, .has-switch span.switch-left.disabled, .has-switch span.switch-left[disabled] {
color: #fff;
background-color: #08c;
*background-color: #0077b3;
}
.has-switch span.switch-primary:active, .has-switch span.switch-primary.active, .has-switch span.switch-left:active, .has-switch span.switch-left.active {
background-color: #069 \9 ;
}
.has-switch span.switch-info {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #41a7c5;
background-image: linear-gradient(to bottom, #2f96b4, #5bc0de);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff2f96b4", endColorstr="#ff5bc0de", GradientType=0);
border-color: #5bc0de #5bc0de #28a1c5;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #5bc0de;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-info:hover, .has-switch span.switch-info:focus, .has-switch span.switch-info:active, .has-switch span.switch-info.active, .has-switch span.switch-info.disabled, .has-switch span.switch-info[disabled] {
color: #fff;
background-color: #5bc0de;
*background-color: #46b8da;
}
.has-switch span.switch-info:active, .has-switch span.switch-info.active {
background-color: #31b0d5 \9 ;
}
.has-switch span.switch-success {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #58b058;
background-image: linear-gradient(to bottom, #51a351, #62c462);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff51a351", endColorstr="#ff62c462", GradientType=0);
border-color: #62c462 #62c462 #3b9e3b;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #62c462;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-success:hover, .has-switch span.switch-success:focus, .has-switch span.switch-success:active, .has-switch span.switch-success.active, .has-switch span.switch-success.disabled, .has-switch span.switch-success[disabled] {
color: #fff;
background-color: #62c462;
*background-color: #4fbd4f;
}
.has-switch span.switch-success:active, .has-switch span.switch-success.active {
background-color: #42b142 \9 ;
}
.has-switch span.switch-warning {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #f9a123;
background-image: linear-gradient(to bottom, #f89406, #fbb450);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff89406", endColorstr="#fffbb450", GradientType=0);
border-color: #fbb450 #fbb450 #f89406;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #fbb450;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-warning:hover, .has-switch span.switch-warning:focus, .has-switch span.switch-warning:active, .has-switch span.switch-warning.active, .has-switch span.switch-warning.disabled, .has-switch span.switch-warning[disabled] {
color: #fff;
background-color: #fbb450;
*background-color: #faa937;
}
.has-switch span.switch-warning:active, .has-switch span.switch-warning.active {
background-color: #fa9f1e \9 ;
}
.has-switch span.switch-danger {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #d14641;
background-image: linear-gradient(to bottom, #bd362f, #ee5f5b);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffbd362f", endColorstr="#ffee5f5b", GradientType=0);
border-color: #ee5f5b #ee5f5b #e51d18;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #ee5f5b;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-danger:hover, .has-switch span.switch-danger:focus, .has-switch span.switch-danger:active, .has-switch span.switch-danger.active, .has-switch span.switch-danger.disabled, .has-switch span.switch-danger[disabled] {
color: #fff;
background-color: #ee5f5b;
*background-color: #ec4844;
}
.has-switch span.switch-danger:active, .has-switch span.switch-danger.active {
background-color: #e9322d \9 ;
}
/*3.4.4 select 下拉框
Explain:
select 是表单元素中最难美化的一个，有两种美化方式：
1、修改源生的，修改有限，只能修改个边框，背景，字体。优点：程序方便操作；缺点：丑，浏览器之间存在很大差异。
2、将源生的隐藏掉，用其他元素（如div li）通过js模拟下拉交互，然后再传值给源生的select。优点：好看，兼容好；缺点：代码冗余，依赖JS，不方便操作
*/
/*方法一、修改源生*/
.hui-select {
border: solid 1px #ddd;
box-sizing: border-box;
cursor: pointer;
line-height: normal;
font-weight: normal;
width: 100%;
white-space: nowrap;
font-size: 14px;
}
.hui-select-box {
border: solid 1px #ddd;
box-sizing: border-box;
vertical-align: middle;
width: 100%;
display: inline-block;
padding: 4px 5px;
}
.hui-select-box .hui-select {
border: none;
}
.hui-select-box.inline, .hui-select-box.inline .select {
width: auto;
}
.hui-select-box.size-M {
padding: 4px 5px;
}
.hui-select-box.size-M .hui-select {
font-size: 14px;
}
.hui-select-box.size-MINI {
padding: 0px 5px;
}
.hui-select-box.size-MINI .hui-select {
font-size: 12px;
}
.hui-select-box.size-S {
padding: 3px 5px;
}
.hui-select-box.size-S .hui-select {
font-size: 12px;
}
.hui-select-box.size-L {
padding: 8px 5px;
}
.hui-select-box.size-L .hui-select {
font-size: 16px;
}
.hui-select-box.size-XL {
padding: 10px 5px;
}
.hui-select-box.size-XL .hui-select {
font-size: 18px;
}
@media (max-width: 767px) {
.responsive .hui-select-box {
border: none;
}
.responsive .hui-select-box .hui-select,
.responsive .select {
border: solid 1px #ddd;
padding: 10px;
font-size: 16px;
}
.responsive .hui-select-box,
.responsive .hui-select-box.size-M,
.responsive .hui-select-box.size-MINI,
.responsive .hui-select-box.size-S,
.responsive .hui-select-box.size-L,
.responsive .hui-select-box.size-XL {
height: auto;
padding: 0;
}
}
/*方法二、JS模拟
需要引用2个js文件
页面调用方法
*/
.hui-select-wrapper {
position: relative;
display: inline-block;
font-size: 14px;
cursor: default;
}
.hui-select-default {
zoom: 1;
display: block;
padding-left: 10px;
padding-right: 30px;
background-color: #fff;
border: solid 1px #d0d0d0;
height: 34px;
line-height: 34px;
}
.jsselect.radius {
overflow: visible;
}
.jsselect.radius .select-default {
border-radius: 4px;
}
.jsselect.radius .select-list {
border-radius: 4px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select-icon {
position: absolute;
height: 8px;
width: 12px;
right: 10px;
top: 50%;
margin-top: -4px;
background: url(../images/jselect/iconpic-arrow-down2.png) no-repeat center;
}
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select-list {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 1;
line-height: 34px;
max-height: 320px;
overflow: auto;
background-color: #fff;
background-clip: padding-box;
box-shadow: 0 1px 2px rgba(0, 1, 1, 0.2);
box-sizing: border-box;
border: solid 1px #d0d0d0;
}
.select-list .select-item {
margin: 0;
padding: 0;
}
.select-list .select-item .selected {
background-color: #148cf1;
color: #fff;
}
.select-list .select-option {
background: #fff;
line-height: 34px;
text-align: left;
white-space: nowrap;
cursor: pointer;
border-bottom: 1px solid #f2f2f2;
padding: 0 10px;
}
/*3.4.5 文件上传
name: hui-upload
example:
浏览文件
Explain：把文件选择域设为透明,通过绝对定位覆盖在长的好看的按钮上面。
*/
.hui-upload {
position: relative;
display: inline-block;
height: 31px;
*display: inline;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
}
.hui-upload .upload-url {
cursor: pointer;
width: 300px;
}
.hui-upload .input-file {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 1;
font-size: 30em;
opacity: 0;
filter: alpha(opacity=0);
}
.hui-upload .icon-add,
.hui-upload .icon-minus {
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 30px;
height: 31px;
line-height: 31px;
text-align: center;
vertical-align: middle;
width: 36px;
}
.hui-form-group .upload-btn {
margin-left: -1px;
}
@media (max-width: 767px) {
.upload-btn {
display: none;
}
.upload-url {
display: none;
}
}
/*3.4.6 hui-input-number 数字输入框*/
.hui-input-number {
display: block;
overflow: hidden;
width: 100px;
position: relative;
padding-left: 29px;
padding-right: 29px;
}
.hui-input-number .hui-input-text {
height: 30px;
text-align: center;
width: 100%;
}
.hui-input-number a {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
height: 28px;
line-height: 28px;
width: 28px;
cursor: pointer;
outline: 0;
text-decoration: none;
text-align: center;
font-size: 16px;
border: 1px solid #ddd;
background-color: #f7f7f7;
}
.hui-input-number a:hover {
text-decoration: none;
}
.hui-input-number a i {
font-style: normal;
}
.hui-input-number a.decrease {
left: 0;
}
.hui-input-number a.add {
right: 0;
}
.hui-input-number a.add.disabled, .hui-input-number a.decrease.disabled {
color: #999;
cursor: not-allowed;
}
/*3.4.7 邮箱提示*/
.emailSug-wrapper {
position: absolute;
background: #fff;
text-align: left;
}
.emailSug-wrapper .emailSug-list .emailSug-item {
font-size: 14px;
height: 25px;
line-height: 25px;
padding-left: 10px;
color: #333;
}
.emailSug-wrapper .emailSug-list .emailSug-item.active {
background: #5a98de;
cursor: pointer;
color: #fff;
}
/*3.4.8 表单布局*/
.hui-form legend {
font-size: 20px;
}
.hui-form .hui-row {
margin-top: 15px;
}
.hui-form .hui-form-item .hui-form-item-label {
display: block;
color: #555;
margin-top: 3px;
cursor: text;
text-align: right;
}
.hui-form .hui-form-item .hui-form-item-control {
position: relative;
}
.hui-form .hui-form-item .hui-form-item-control > * {
vertical-align: middle;
}
@media (max-width: 767px) {
.hui-form-horizontal .hui-form-item-label {
text-align: left;
}
}
.placeholder {
position: absolute;
left: 4px;
top: 4px;
color: #c6c6c6;
cursor: text;
font-size: 14px;
}
/*设置placeholder颜色*/
/* Internet Explorer 10+ */
::-ms-input-placeholder {
color: #b3b3b3;
}
/*不兼容placeholder属性的浏览器，可使用表单默认值*/
.placeholder {
color: #adb0be;
position: absolute;
z-index: 9;
}
/*3.4.9 表单验证*/
/*文本框的错误状态*/
input.error,
select.error,
textarea.error {
background-color: #fbe2e2;
border-color: #c66161;
color: #c00;
}
label.error {
position: absolute;
right: 18px;
top: 5px;
color: #ef392b;
font-size: 12px;
}
.check-box label.error,
.radio-box label.error {
right: auto;
width: 150px;
left: 210px;
top: -2px;
}
/*密码等级*/
.passwordStrength b {
font-weight: 400;
}
.passwordStrength b,
.passwordStrength span {
display: inline-block;
vertical-align: middle;
line-height: 16px;
line-height: 18px\9 ;
height: 16px;
}
.passwordStrength span {
width: 57px;
text-align: center;
background-color: #d0d0d0;
border-right: 1px solid #fff;
}
.passwordStrength .last {
border-right: none;
}
.passwordStrength .bgStrength {
color: #fff;
background-color: #fcc900;
}
/*3.5 按钮
name: hui-button
example:
explain: hui-button-primary：主要|hui-button-info：信息|hui-button-success：成功|hui-button-warning：警告|hui-button-danger：危险|hui-button-inverse：反向|hui-button-link：链接
*/
/*按钮*/
.hui-btn {
display: inline-block;
min-width: 32px;
box-sizing: border-box;
cursor: pointer;
text-align: center;
font-weight: 400;
white-space: nowrap;
vertical-align: middle;
-moz-padding-start: npx;
-moz-padding-end: npx;
border: solid 1px #ddd;
background-color: #fff;
width: auto;
*zoom: 1;
*overflow: visible;
transition: background-color 0.1s linear;
/*默认——灰色 通常用于取消*/
/*主要——主色 通常用于确定、提交、购买、支付等*/
/*次要按钮*/
/*成功*/
/*警告*/
/*危险*/
/*链接*/
/*块级按钮*/
/* Outline buttons */
/*禁用状态*/
}
.hui-btn:active, .hui-btn.active {
background-color: #ccc;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset;
}
.hui-btn:first-child {
*margin-left: 0;
}
.hui-btn.hui-btn-default {
background-color: #e6e6e6;
border-color: #e6e6e6;
}
.hui-btn.hui-btn-default:hover, .hui-btn.hui-btn-default:focus, .hui-btn.hui-btn-default:active, .hui-btn.hui-btn-default.active {
color: #333;
background-color: #c7c7c7;
border-color: #c7c7c7;
}
.hui-btn.hui-btn-primary {
color: #fff;
background-color: #5a98de;
border-color: #5a98de;
}
.hui-btn.hui-btn-primary:hover, .hui-btn.hui-btn-primary:focus, .hui-btn.hui-btn-primary:active, .hui-btn.hui-btn-primary.active {
color: #fff;
background-color: #0a6999;
border-color: #0a6999;
}
.hui-btn.hui-btn-secondary {
color: #fff;
background-color: #3bb4f2;
border-color: #3bb4f2;
}
.hui-btn.hui-btn-secondary:hover, .hui-btn.hui-btn-secondary:focus, .hui-btn.hui-btn-secondary:active, .hui-btn.hui-btn-secondary.active {
color: #fff;
background-color: #0f9ae0;
border-color: #0f9ae0;
}
.hui-btn.hui-btn-success {
color: #fff;
background-color: #5eb95e;
border-color: #5eb95e;
}
.hui-btn.hui-btn-success:hover, .hui-btn.hui-btn-success:focus, .hui-btn.hui-btn-success:active, .hui-btn.hui-btn-success.active {
color: #fff;
background-color: #429842;
border-color: #429842;
}
.hui-btn.hui-btn-warning {
color: #fff;
background-color: #f37b1d;
border-color: #f37b1d;
}
.hui-btn.hui-btn-warning:hover, .hui-btn.hui-btn-warning:focus, .hui-btn.hui-btn-warning:active, .hui-btn.hui-btn-warning.active {
color: #fff;
background-color: #c85e0b;
border-color: #c85e0b;
}
.hui-btn.hui-btn-danger {
color: #fff;
background-color: #dd514c;
border-color: #dd514c;
}
.hui-btn.hui-btn-danger:hover, .hui-btn.hui-btn-danger:focus, .hui-btn.hui-btn-danger:active, .hui-btn.hui-btn-danger.active {
color: #fff;
background-color: #c62b26;
border-color: #c62b26;
}
.hui-btn.hui-btn-link {
color: #0e90d2;
cursor: pointer;
border-color: transparent;
background-color: transparent;
}
.hui-btn.hui-btn-link:hover, .hui-btn.hui-btn-link:focus, .hui-btn.hui-btn-link:active, .hui-btn.hui-btn-link.active {
color: #095f8a;
text-decoration: underline;
background-color: transparent;
}
.hui-btn.hui-btn-dashed {
border-style: dashed;
}
.hui-btn.hui-btn-block {
box-sizing: border-box;
display: block;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.hui-btn.hui-btn-default-outline {
background-color: transparent;
border-color: #e6e6e6;
}
.hui-btn.hui-btn-default-outline:hover, .hui-btn.hui-btn-default-outline:focus, .hui-btn.hui-btn-default-outline:active, .hui-btn.hui-btn-default-outline.active, .hui-btn.hui-btn-default-outline.focus {
color: #333;
background-color: transparent;
border-color: #c7c7c7;
}
.hui-btn.hui-btn-primary-outline {
color: #5a98de;
background-color: transparent;
border-color: #5a98de;
}
.hui-btn.hui-btn-primary-outline:hover, .hui-btn.hui-btn-primary-outline:focus, .hui-btn.hui-btn-primary-outline:active, .hui-btn.hui-btn-primary-outline.active, .hui-btn.hui-btn-primary-outline.focus {
color: #0a6999;
background-color: transparent;
border-color: #0a6999;
}
.hui-btn.hui-btn-secondary-outline {
color: #3bb4f2;
background-color: transparent;
background-image: none;
border-color: #3bb4f2;
}
.hui-btn.hui-btn-secondary-outline:hover, .hui-btn.hui-btn-secondary-outline.focus, .hui-btn.hui-btn-secondary-outline:active, .hui-btn.hui-btn-secondary-outline:focus {
color: #fff;
background-color: #3bb4f2;
border-color: #3bb4f2;
}
.hui-btn.hui-btn-success-outline {
color: #5eb95e;
background-color: transparent;
background-image: none;
border-color: #5eb95e;
}
.hui-btn.hui-btn-success-outline:hover, .hui-btn.hui-btn-success-outline:focus, .hui-btn.hui-btn-success-outline:active, .hui-btn.hui-btn-success-outline.active, .hui-btn.hui-btn-success-outline.focus {
color: #fff;
background-color: #5eb95e;
border-color: #5eb95e;
}
.hui-btn.hui-btn-warning-outline {
color: #f37b1d;
background-color: transparent;
background-image: none;
border-color: #f37b1d;
}
.hui-btn.hui-btn-warning-outline:hover, .hui-btn.hui-btn-warning-outline:focus, .hui-btn.hui-btn-warning-outline:active, .hui-btn.hui-btn-warning-outline.active, .hui-btn.hui-btn-warning-outline.focus {
color: #fff;
background-color: #f37b1d;
border-color: #f37b1d;
}
.hui-btn.hui-btn-danger-outline {
color: #dd514c;
background-color: transparent;
background-image: none;
border-color: #dd514c;
}
.hui-btn.hui-btn-danger-outline:hover, .hui-btn.hui-btn-danger-outline:focus, .hui-btn.hui-btn-danger-outline:active, .hui-btn.hui-btn-danger-outline.active, .hui-btn.hui-btn-danger-outline.focus {
color: #fff;
background-color: #dd514c;
border-color: #dd514c;
}
.hui-btn.disabled {
cursor: not-allowed;
pointer-events: none;
background-image: none;
opacity: 0.65;
filter: alpha(opacity=65);
box-shadow: none;
}
.hui-btn.hui-btn-loading {
position: relative;
}
a.hui-btn:hover,
a.hui-btn:focus,
a.hui-btn:active,
a.hui-btn.active,
a.hui-btn.disabled,
a.hui-btn[disabled] {
text-decoration: none;
}
.open > .hui-btn-primary-outline.hui-dropdown-toggle {
color: #0a6999;
background-color: transparent;
border-color: #0a6999;
}
.open > .hui-btn-secondary-outline.hui-dropdown-toggle {
color: #fff;
background-color: #3bb4f2;
border-color: #3bb4f2;
}
.open > .hui-btn-success-outline.hui-dropdown-toggle {
color: #fff;
background-color: #5eb95e;
border-color: #5eb95e;
}
.open > .hui-btn-warning-outline.hui-dropdown-toggle {
color: #fff;
background-color: #f37b1d;
border-color: #f37b1d;
}
.open > .hui-btn-danger-outline.hui-dropdown-toggle {
color: #fff;
background-color: #dd514c;
border-color: #dd514c;
}
/*表单组*/
.hui-form-group {
display: inline-block;
vertical-align: middle;
}
.hui-form-group .hui-input-text {
position: relative;
vertical-align: top;
}
.hui-form-group .hui-btn {
position: relative;
margin-left: -1px;
}
.hui-form-group.radius {
overflow: hidden;
}
.hui-form-group.radius .hui-input-text {
border-radius: 4px 0 0 4px;
}
.hui-form-group.radius .hui-btn {
border-radius: 0 4px 4px 0;
}
.hui-form-group.round {
overflow: hidden;
}
.hui-form-group.round .hui-input-text {
border-radius: 1000px 0 0 1000px;
}
.hui-form-group.round .hui-btn {
border-radius: 0 1000px 1000px 0;
}
/*3.6 图片
name: hui-image
*/
/*3.6.1 图片效果
![]()
hui-image-responsive 响应式 .radius 圆角图片 .round 圆形图片 .hui-thumbnail 缩略图
*/
.hui-image.hui-thumbnail {
display: inline-block;
box-sizing: border-box;
max-width: 100%;
height: auto;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
transition: all 0.2s ease-in-out;
}
.hui-image.hui-image-responsive {
display: inline-block;
max-width: 100%;
height: auto;
}
@media (max-width: 767px) {
.hui-image.hui-image-responsive {
width: 100%;
}
}
.duang-opacity img {
transition: opacity 0.1s linear;
}
.duang-opacity a:hover img,
a:hover .opacity img {
opacity: 0.85;
filter: alpha(opacity=85);
}
/*3.6.2 图集效果
name: hui-album
example:
*/
.hui-album .hui-album-img {
border: 1px solid #e0e0e0;
}
.hui-album .hui-album-img img {
display: block;
width: 100%;
}
.hui-album .hui-album-title {
display: block;
text-align: left;
padding: 7px 5px;
line-height: 18px;
color: #555;
text-decoration: none;
font-size: 12px;
border: solid 1px #e0e0e0;
border-top: 0;
}
.hui-album .hui-album-bg .hui-album-bg-fir,
.hui-album .hui-album-bg .hui-album-bg-sec {
border: 1px solid #e6e6e6;
border-top: 1px solid #f5f5f5;
height: 1px;
margin: 0 auto;
overflow: hidden;
}
.hui-album .hui-album-bg .hui-album-bg-fir {
margin: 0 3px;
}
.hui-album .hui-album-bg .hui-album-bg-sec {
margin: 0 6px;
}
/*3.6.3 头像
Name: hui-avatar
Example: 
*/
.hui-avatar {
display: inline-block;
position: relative;
overflow: hidden;
width: 32px;
height: 32px;
}
.hui-avatar img {
display: block;
width: 32px;
height: 32px;
}
.hui-avatar.radius, .hui-avatar.radius img {
border-radius: 50%;
}
.hui-avatar.size-MINI {
width: 16px;
height: 16px;
}
.hui-avatar.size-MINI img {
width: 16px;
height: 16px;
}
.hui-avatar.size-S {
width: 24px;
height: 24px;
}
.hui-avatar.size-S img {
width: 24px;
height: 24px;
}
.hui-avatar.size-M {
width: 32px;
height: 32px;
}
.hui-avatar.size-M img {
width: 32px;
height: 32px;
}
.hui-avatar.size-L {
width: 48px;
height: 48px;
}
.hui-avatar.size-L img {
width: 48px;
height: 48px;
}
.hui-avatar.size-XL {
width: 64px;
height: 64px;
}
.hui-avatar.size-XL img {
width: 64px;
height: 64px;
}
.hui-avatar.size-XXL {
width: 100px;
height: 100px;
}
.hui-avatar.size-XXL img {
width: 100px;
height: 100px;
}
.hui-avatar.size-XXXL {
width: 128px;
height: 128px;
}
.hui-avatar.size-XXXL img {
width: 128px;
height: 128px;
}
/*3.7 图标
name: hui-iconpic
H-ui采用的图标字体，可以像控制字体那样随心所欲改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。
*/
.hui-iconpic {
display: inline-block;
vertical-align: sub;
*vertical-align: middle;
_vertical-align: middle;
width: 16px;
height: 16px;
background-position: center;
background-repeat: no-repeat;
}
@font-face {
font-family: "hui-iconfont";
src: url("../images/Hui-iconfont/iconfont.eot");
/* IE9*/
src: url("../images/Hui-iconfont/iconfont.eot?#iefix") format("embedded-opentype"), url("../images/Hui-iconfont/iconfont.woff") format("woff"), url("../images/Hui-iconfont/iconfont.ttf") format("truetype"), url("../images/Hui-iconfont/iconfont.svg#hui-iconfont") format("svg");
/* iOS 4.1- */
}
.hui-iconfont {
font-family: "hui-iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.hui-iconfont-gotop:before {
content: "\e684";
}
.hui-iconfont-music:before {
content: "\e60f";
}
.hui-iconfont-tags:before {
content: "\e64b";
}
.hui-iconfont-jieri:before {
content: "\e727";
}
.hui-iconfont-jishiqi:before {
content: "\e728";
}
.hui-iconfont-pad:before {
content: "\e64c";
}
.hui-iconfont-lunzi:before {
content: "\e64d";
}
.hui-iconfont-jiandao:before {
content: "\e64e";
}
.hui-iconfont-xianshiqi:before {
content: "\e64f";
}
.hui-iconfont-zhaoxiangji:before {
content: "\e650";
}
.hui-iconfont-danfanxiangji:before {
content: "\e651";
}
.hui-iconfont-dayinji:before {
content: "\e652";
}
.hui-iconfont-user-zhanzhang:before {
content: "\e653";
}
.hui-iconfont-chajian:before {
content: "\e654";
}
.hui-iconfont-arrow1-bottom:before {
content: "\e674";
}
.hui-iconfont-arrow1-left:before {
content: "\e678";
}
.hui-iconfont-arrow1-top:before {
content: "\e679";
}
.hui-iconfont-arrow1-right:before {
content: "\e67a";
}
.hui-iconfont-jieri1:before {
content: "\e655";
}
.hui-iconfont-face-weixiao:before {
content: "\e656";
}
.hui-iconfont-face-chijing:before {
content: "\e657";
}
.hui-iconfont-face-dai:before {
content: "\e658";
}
.hui-iconfont-face-shuaku:before {
content: "\e659";
}
.hui-iconfont-face-mogui:before {
content: "\e65a";
}
.hui-iconfont-face-ganga:before {
content: "\e65b";
}
.hui-iconfont-face-qin:before {
content: "\e65c";
}
.hui-iconfont-face-nu:before {
content: "\e65d";
}
.hui-iconfont-face-zhayan:before {
content: "\e65e";
}
.hui-iconfont-face-shengqi:before {
content: "\e65f";
}
.hui-iconfont-face-ma:before {
content: "\e660";
}
.hui-iconfont-face-bishi:before {
content: "\e661";
}
.hui-iconfont-face-maimeng:before {
content: "\e662";
}
.hui-iconfont-face-jingdai:before {
content: "\e663";
}
.hui-iconfont-face-yun:before {
content: "\e664";
}
.hui-iconfont-home2:before {
content: "\e67f";
}
.hui-iconfont-search2:before {
content: "\e665";
}
.hui-iconfont-share2:before {
content: "\e666";
}
.hui-iconfont-face:before {
content: "\e668";
}
.hui-iconfont-wuliu:before {
content: "\e669";
}
.hui-iconfont-dianpu:before {
content: "\e66a";
}
.hui-iconfont-chexiao:before {
content: "\e66b";
}
.hui-iconfont-zhongzuo:before {
content: "\e66c";
}
.hui-iconfont-zan:before {
content: "\e66d";
}
.hui-iconfont-cai:before {
content: "\e66e";
}
.hui-iconfont-yuyin3:before {
content: "\e66f";
}
.hui-iconfont-cart2-selected:before {
content: "\e670";
}
.hui-iconfont-weizhi:before {
content: "\e671";
}
.hui-iconfont-face-ku:before {
content: "\e688";
}
.hui-iconfont-down:before {
content: "\e640";
}
.hui-iconfont-cart2-man:before {
content: "\e672";
}
.hui-iconfont-card2-kong:before {
content: "\e673";
}
.hui-iconfont-luyin:before {
content: "\e619";
}
.hui-iconfont-html:before {
content: "\e69f";
}
.hui-iconfont-css:before {
content: "\e6a0";
}
.hui-iconfont-android:before {
content: "\e6a2";
}
.hui-iconfont-github:before {
content: "\e6d1";
}
.hui-iconfont-html5:before {
content: "\e6d2";
}
.hui-iconfont-huangguan:before {
content: "\e6d3";
}
.hui-iconfont-news:before {
content: "\e616";
}
.hui-iconfont-slider-right:before {
content: "\e63d";
}
.hui-iconfont-slider-left:before {
content: "\e67d";
}
.hui-iconfont-tuku:before {
content: "\e613";
}
.hui-iconfont-shuru:before {
content: "\e647";
}
.hui-iconfont-sanjiao:before {
content: "\e67e";
}
.hui-iconfont-share-renren:before {
content: "\e6d8";
}
.hui-iconfont-share-tweibo:before {
content: "\e6d9";
}
.hui-iconfont-arrow2-left:before {
content: "\e6d4";
}
.hui-iconfont-paixu:before {
content: "\e675";
}
.hui-iconfont-niming:before {
content: "\e624";
}
.hui-iconfont-add:before {
content: "\e600";
}
.hui-iconfont-root:before {
content: "\e62d";
}
.hui-iconfont-xuanzhong:before {
content: "\e676";
}
.hui-iconfont-weixuanzhong:before {
content: "\e677";
}
.hui-iconfont-arrow2-bottom:before {
content: "\e6d5";
}
.hui-iconfont-arrow2-top:before {
content: "\e6d6";
}
.hui-iconfont-like2:before {
content: "\e648";
}
.hui-iconfont-arrow2-right:before {
content: "\e6d7";
}
.hui-iconfont-shangyishou:before {
content: "\e6db";
}
.hui-iconfont-xiayishou:before {
content: "\e6e3";
}
.hui-iconfont-share-weixin:before {
content: "\e694";
}
.hui-iconfont-shenhe-tingyong:before {
content: "\e631";
}
.hui-iconfont-gouxuan2:before {
content: "\e601";
}
.hui-iconfont-selected:before {
content: "\e617";
}
.hui-iconfont-jianhao:before {
content: "\e6a1";
}
.hui-iconfont-user-group:before {
content: "\e62b";
}
.hui-iconfont-yiguanzhu:before {
content: "\e680";
}
.hui-iconfont-gengduo3:before {
content: "\e6f9";
}
.hui-iconfont-comment:before {
content: "\e622";
}
.hui-iconfont-tongji-zhu:before {
content: "\e618";
}
.hui-iconfont-like:before {
content: "\e649";
}
.hui-iconfont-shangjia:before {
content: "\e6dc";
}
.hui-iconfont-save:before {
content: "\e632";
}
.hui-iconfont-gongsi:before {
content: "\e643";
}
.hui-iconfont-system:before {
content: "\e62e";
}
.hui-iconfont-pifu:before {
content: "\e62a";
}
.hui-iconfont-menu:before {
content: "\e667";
}
.hui-iconfont-msg:before {
content: "\e62f";
}
.hui-iconfont-huangguan1:before {
content: "\e729";
}
.hui-iconfont-userid:before {
content: "\e602";
}
.hui-iconfont-cang-selected:before {
content: "\e630";
}
.hui-iconfont-yundown:before {
content: "\e641";
}
.hui-iconfont-help:before {
content: "\e633";
}
.hui-iconfont-chuku:before {
content: "\e634";
}
.hui-iconfont-picture:before {
content: "\e646";
}
.hui-iconfont-wenzhouyinxing:before {
content: "\e6ed";
}
.hui-iconfont-ad:before {
content: "\e635";
}
.hui-iconfont-fenlei:before {
content: "\e681";
}
.hui-iconfont-saoyisao:before {
content: "\e682";
}
.hui-iconfont-search:before {
content: "\e683";
}
.hui-iconfont-tuwenxiangqing:before {
content: "\e685";
}
.hui-iconfont-leijipingjia:before {
content: "\e686";
}
.hui-iconfont-hetong:before {
content: "\e636";
}
.hui-iconfont-tongji:before {
content: "\e61a";
}
.hui-iconfont-quanbudingdan:before {
content: "\e687";
}
.hui-iconfont-cang:before {
content: "\e61b";
}
.hui-iconfont-xiaoxi:before {
content: "\e68a";
}
.hui-iconfont-renwu:before {
content: "\e637";
}
.hui-iconfont-more:before {
content: "\e68b";
}
.hui-iconfont-zhizhao:before {
content: "\e638";
}
.hui-iconfont-fabu:before {
content: "\e603";
}
.hui-iconfont-shenhe-butongguo2:before {
content: "\e6dd";
}
.hui-iconfont-share-qq:before {
content: "\e67b";
}
.hui-iconfont-upload:before {
content: "\e642";
}
.hui-iconfont-add2:before {
content: "\e604";
}
.hui-iconfont-jiesuo:before {
content: "\e605";
}
.hui-iconfont-zhongtumoshi:before {
content: "\e68c";
}
.hui-iconfont-datumoshi:before {
content: "\e68d";
}
.hui-iconfont-face2:before {
content: "\e68e";
}
.hui-iconfont-huanyipi:before {
content: "\e68f";
}
.hui-iconfont-shijian:before {
content: "\e690";
}
.hui-iconfont-feedback:before {
content: "\e691";
}
.hui-iconfont-feedback2:before {
content: "\e692";
}
.hui-iconfont-share-pengyouquan:before {
content: "\e693";
}
.hui-iconfont-zan2:before {
content: "\e697";
}
.hui-iconfont-arrow3-bottom:before {
content: "\e698";
}
.hui-iconfont-arrow3-top:before {
content: "\e699";
}
.hui-iconfont-arrow3-right:before {
content: "\e69a";
}
.hui-iconfont-arrow3-left:before {
content: "\e69b";
}
.hui-iconfont-more2:before {
content: "\e69c";
}
.hui-iconfont-cang2-selected:before {
content: "\e69d";
}
.hui-iconfont-cang2:before {
content: "\e69e";
}
.hui-iconfont-dangan:before {
content: "\e639";
}
.hui-iconfont-money:before {
content: "\e63a";
}
.hui-iconfont-share-weibo:before {
content: "\e6da";
}
.hui-iconfont-email:before {
content: "\e63b";
}
.hui-iconfont-tongji-xian:before {
content: "\e61c";
}
.hui-iconfont-bank:before {
content: "\e628";
}
.hui-iconfont-home:before {
content: "\e625";
}
.hui-iconfont-user:before {
content: "\e62c";
}
.hui-iconfont-log:before {
content: "\e623";
}
.hui-iconfont-pages:before {
content: "\e626";
}
.hui-iconfont-sim:before {
content: "\e629";
}
.hui-iconfont-tingzhi:before {
content: "\e6e4";
}
.hui-iconfont-dengdai:before {
content: "\e606";
}
.hui-iconfont-user-add:before {
content: "\e607";
}
.hui-iconfont-copy:before {
content: "\e6ea";
}
.hui-iconfont-file:before {
content: "\e63e";
}
.hui-iconfont-share-douban:before {
content: "\e67c";
}
.hui-iconfont-share-zhihu:before {
content: "\e689";
}
.hui-iconfont-daochu:before {
content: "\e644";
}
.hui-iconfont-daoru:before {
content: "\e645";
}
.hui-iconfont-weigouxuan2:before {
content: "\e608";
}
.hui-iconfont-phone:before {
content: "\e696";
}
.hui-iconfont-bold:before {
content: "\e6e7";
}
.hui-iconfont-manage2:before {
content: "\e63c";
}
.hui-iconfont-edit:before {
content: "\e6df";
}
.hui-iconfont-del2:before {
content: "\e609";
}
.hui-iconfont-duigou:before {
content: "\e6e8";
}
.hui-iconfont-chongqi:before {
content: "\e6f7";
}
.hui-iconfont-avatar:before {
content: "\e60a";
}
.hui-iconfont-del:before {
content: "\e60b";
}
.hui-iconfont-edit2:before {
content: "\e60c";
}
.hui-iconfont-zanting:before {
content: "\e6e5";
}
.hui-iconfont-apple:before {
content: "\e64a";
}
.hui-iconfont-guangdayinxing:before {
content: "\e6f0";
}
.hui-iconfont-minshengyinxing:before {
content: "\e6f4";
}
.hui-iconfont-xiajia:before {
content: "\e6de";
}
.hui-iconfont-manage:before {
content: "\e61d";
}
.hui-iconfont-user2:before {
content: "\e60d";
}
.hui-iconfont-code:before {
content: "\e6ee";
}
.hui-iconfont-cut:before {
content: "\e6ef";
}
.hui-iconfont-link:before {
content: "\e6f1";
}
.hui-iconfont-new:before {
content: "\e6f2";
}
.hui-iconfont-ordered-list:before {
content: "\e6f3";
}
.hui-iconfont-unordered-list:before {
content: "\e6f5";
}
.hui-iconfont-share-qzone:before {
content: "\e6c8";
}
.hui-iconfont-suoding:before {
content: "\e60e";
}
.hui-iconfont-tel2:before {
content: "\e6a3";
}
.hui-iconfont-order:before {
content: "\e627";
}
.hui-iconfont-shujutongji:before {
content: "\e61e";
}
.hui-iconfont-del3:before {
content: "\e6e2";
}
.hui-iconfont-add3:before {
content: "\e610";
}
.hui-iconfont-add4:before {
content: "\e61f";
}
.hui-iconfont-xiangpicha:before {
content: "\e72a";
}
.hui-iconfont-key:before {
content: "\e63f";
}
.hui-iconfont-yuyin2:before {
content: "\e6a4";
}
.hui-iconfont-yuyin:before {
content: "\e6a5";
}
.hui-iconfont-close:before {
content: "\e6a6";
}
.hui-iconfont-xuanze:before {
content: "\e6a7";
}
.hui-iconfont-xuanzhong1:before {
content: "\e6a8";
}
.hui-iconfont-yiguanzhu1:before {
content: "\e6a9";
}
.hui-iconfont-share:before {
content: "\e6aa";
}
.hui-iconfont-zhuanfa:before {
content: "\e6ab";
}
.hui-iconfont-tianqi-duoyun:before {
content: "\e6ac";
}
.hui-iconfont-tianqi-mai:before {
content: "\e6ad";
}
.hui-iconfont-tianqi-qing:before {
content: "\e6ae";
}
.hui-iconfont-tianqi-wu:before {
content: "\e6af";
}
.hui-iconfont-tianqi-xue:before {
content: "\e6b0";
}
.hui-iconfont-tianqi-yin:before {
content: "\e6b1";
}
.hui-iconfont-tianqi-yu:before {
content: "\e6b2";
}
.hui-iconfont-daipingjia:before {
content: "\e6b3";
}
.hui-iconfont-vip-card2:before {
content: "\e6b4";
}
.hui-iconfont-jifen:before {
content: "\e6b5";
}
.hui-iconfont-youhuiquan:before {
content: "\e6b6";
}
.hui-iconfont-hongbao:before {
content: "\e6b7";
}
.hui-iconfont-cart-selected:before {
content: "\e6b8";
}
.hui-iconfont-cart-kong:before {
content: "\e6b9";
}
.hui-iconfont-jiangjia:before {
content: "\e6ba";
}
.hui-iconfont-liwu:before {
content: "\e6bb";
}
.hui-iconfont-caiqie:before {
content: "\e6bc";
}
.hui-iconfont-xuanzhuan:before {
content: "\e6bd";
}
.hui-iconfont-bigpic:before {
content: "\e6be";
}
.hui-iconfont-list:before {
content: "\e6bf";
}
.hui-iconfont-middle:before {
content: "\e6c0";
}
.hui-iconfont-hot:before {
content: "\e6c1";
}
.hui-iconfont-paishe:before {
content: "\e6c2";
}
.hui-iconfont-hot1:before {
content: "\e6c3";
}
.hui-iconfont-new1:before {
content: "\e6c4";
}
.hui-iconfont-xiaoxi1:before {
content: "\e6c5";
}
.hui-iconfont-canshu:before {
content: "\e6c6";
}
.hui-iconfont-tel:before {
content: "\e6c7";
}
.hui-iconfont-dingwei:before {
content: "\e6c9";
}
.hui-iconfont-hongbao2:before {
content: "\e6ca";
}
.hui-iconfont-2code:before {
content: "\e6cb";
}
.hui-iconfont-vip:before {
content: "\e6cc";
}
.hui-iconfont-tishi:before {
content: "\e6cd";
}
.hui-iconfont-dingyue:before {
content: "\e6ce";
}
.hui-iconfont-italic:before {
content: "\e6e9";
}
.hui-iconfont-yulan:before {
content: "\e695";
}
.hui-iconfont-usergroup2:before {
content: "\e611";
}
.hui-iconfont-goods:before {
content: "\e620";
}
.hui-iconfont-paixingbang:before {
content: "\e6cf";
}
.hui-iconfont-qingdaoyinxing:before {
content: "\e6f6";
}
.hui-iconfont-kefu:before {
content: "\e6d0";
}
.hui-iconfont-picture1:before {
content: "\e612";
}
.hui-iconfont-weigouxuan:before {
content: "\e614";
}
.hui-iconfont-fanqiang:before {
content: "\e6fa";
}
.hui-iconfont-shenhe-weitongguo:before {
content: "\e6e0";
}
.hui-iconfont-shenhe-tongguo:before {
content: "\e6e1";
}
.hui-iconfont-tongji-bing:before {
content: "\e621";
}
.hui-iconfont-gouxuan:before {
content: "\e615";
}
.hui-iconfont-jiansheyinxing:before {
content: "\e6f8";
}
.hui-iconfont-moban:before {
content: "\e72b";
}
.hui-iconfont-pay-weixin-1:before {
content: "\e719";
}
.hui-iconfont-pay-alipay-1:before {
content: "\e71c";
}
.hui-iconfont-beijingyinxing:before {
content: "\e6fb";
}
.hui-iconfont-guangdongfazhanyinxing:before {
content: "\e703";
}
.hui-iconfont-zhaoshangyinxing:before {
content: "\e704";
}
.hui-iconfont-zheshangyinxing:before {
content: "\e712";
}
.hui-iconfont-zhongguonongyeyinxing:before {
content: "\e713";
}
.hui-iconfont-cdbank:before {
content: "\e714";
}
.hui-iconfont-gengduo2:before {
content: "\e716";
}
.hui-iconfont-bofang:before {
content: "\e6e6";
}
.hui-iconfont-gengduo4:before {
content: "\e717";
}
.hui-iconfont-text-height:before {
content: "\e6fc";
}
.hui-iconfont-text-width:before {
content: "\e6fd";
}
.hui-iconfont-underline:before {
content: "\e6fe";
}
.hui-iconfont-star:before {
content: "\e6ff";
}
.hui-iconfont-star-half:before {
content: "\e700";
}
.hui-iconfont-star-halfempty:before {
content: "\e701";
}
.hui-iconfont-star-o:before {
content: "\e702";
}
.hui-iconfont-font:before {
content: "\e6ec";
}
.hui-iconfont-hangzhouyinxing:before {
content: "\e718";
}
.hui-iconfont-jiaotongyinxing:before {
content: "\e71a";
}
.hui-iconfont-gengduo:before {
content: "\e715";
}
.hui-iconfont-avatar2:before {
content: "\e705";
}
.hui-iconfont-close2:before {
content: "\e706";
}
.hui-iconfont-about:before {
content: "\e707";
}
.hui-iconfont-phone-android:before {
content: "\e708";
}
.hui-iconfont-search1:before {
content: "\e709";
}
.hui-iconfont-comment1:before {
content: "\e70a";
}
.hui-iconfont-read:before {
content: "\e70b";
}
.hui-iconfont-feedback1:before {
content: "\e70c";
}
.hui-iconfont-practice:before {
content: "\e70d";
}
.hui-iconfont-align-center:before {
content: "\e70e";
}
.hui-iconfont-align-justify:before {
content: "\e70f";
}
.hui-iconfont-align-left:before {
content: "\e710";
}
.hui-iconfont-align-right:before {
content: "\e711";
}
.hui-iconfont-paste:before {
content: "\e6eb";
}
.hui-iconfont-pufayinxing:before {
content: "\e71b";
}
.hui-iconfont-gongshangyinxing:before {
content: "\e71d";
}
.hui-iconfont-huaxiayinxing:before {
content: "\e71e";
}
.hui-iconfont-youzhengyinxing:before {
content: "\e721";
}
.hui-iconfont-zhongguoyinxing:before {
content: "\e722";
}
.hui-iconfont-zhongxinyinxing:before {
content: "\e723";
}
.hui-iconfont-shanghaiyinxing:before {
content: "\e724";
}
.hui-iconfont-banzhu:before {
content: "\e72c";
}
.hui-iconfont-yuedu:before {
content: "\e720";
}
.hui-iconfont-yanjing:before {
content: "\e725";
}
.hui-iconfont-power:before {
content: "\e726";
}
.hui-iconfont-moban-2:before {
content: "\e72d";
}
.hui-iconfont-qianbao-1:before {
content: "\e732";
}
.hui-iconfont-piping:before {
content: "\e72e";
}
.hui-iconfont-qianbao-2:before {
content: "\e735";
}
.hui-iconfont-pay-alipay-3:before {
content: "\e730";
}
.hui-iconfont-clock:before {
content: "\e731";
}
.hui-iconfont-jingjia:before {
content: "\e73a";
}
.hui-iconfont-weixin-3:before {
content: "\e733";
}
.hui-iconfont-pay-alipay-4:before {
content: "\e734";
}
.hui-iconfont-qq:before {
content: "\e737";
}
.hui-iconfont-qianbao-3:before {
content: "\e73b";
}
.hui-iconfont-weixin:before {
content: "\e738";
}
/*3.8 动画
name: hui-animation
*/
.hui-bounce,
.hui-flip,
.hui-flash,
.hui-shake,
.hui-swing,
.hui-wobble,
.hui-ring {
-webkit-animation: 1s ease;
animation: 1s ease;
}
.hui-fadein,
.hui-fadeinT,
.hui-fadeinR,
.hui-fadeinB,
.hui-fadeinL,
.hui-bouncein,
.hui-bounceinT,
.hui-bounceinR,
.hui-bounceinB,
.hui-bounceinL,
.hui-rotatein,
.hui-rotateinLT,
.hui-rotateinLB,
.hui-rotateinRT,
.hui-rotateinRB,
.hui-flipin,
.hui-flipinX,
.hui-flipinY {
-webkit-animation: 1s ease-out backwards;
animation: 1s ease-out backwards;
}
.hui-fadeout,
.hui-fadeoutT,
.hui-fadeoutR,
.hui-fadeoutB,
.hui-fadeoutL,
.hui-bounceout,
.hui-bounceoutT,
.hui-bounceoutR,
.hui-bounceoutB,
.hui-bounceoutL,
.hui-rotateout,
.hui-rotateoutLT,
.hui-rotateoutLB,
.hui-rotateoutRT,
.hui-rotateoutRB,
.hui-flipout,
.hui-flipoutX,
.hui-flipoutY {
-webkit-animation: 1s ease-in forwards;
animation: 1s ease-in forwards;
}
.hui-fadein {
-webkit-animation-name: fadein;
animation-name: fadein;
}
.hui-fadeinT {
-webkit-animation-name: fadeinT;
animation-name: fadeinT;
}
.hui-fadeinR {
-webkit-animation-name: fadeinR;
animation-name: fadeinR;
}
/* 淡入-从下 */
.hui-fadeinB {
-webkit-animation-name: fadeinB;
animation-name: fadeinB;
}
/* 淡入-从左 */
.hui-fadeinL {
-webkit-animation-name: fadeinL;
animation-name: fadeinL;
}
/* 淡出 */
.hui-fadeout {
-webkit-animation-name: fadeout;
animation-name: fadeout;
}
/* 淡出-向上 */
.hui-fadeoutT {
-webkit-animation-name: fadeoutT;
animation-name: fadeoutT;
}
/* 淡出-向右 */
.hui-fadeoutR {
-webkit-animation-name: fadeoutR;
animation-name: fadeoutR;
}
/* 淡出-向下 */
.hui-fadeoutB {
-webkit-animation-name: fadeoutB;
animation-name: fadeoutB;
}
/* 淡出-向左 */
.hui-fadeoutL {
-webkit-animation-name: fadeoutL;
animation-name: fadeoutL;
}
/* 弹跳 */
.hui-bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
/* 弹入 */
.hui-bouncein {
-webkit-animation-name: bouncein;
animation-name: bouncein;
}
/* 弹入-从上 */
.hui-bounceinT {
-webkit-animation-name: bounceinT;
animation-name: bounceinT;
}
/* 弹入-从右 */
.hui-bounceinR {
-webkit-animation-name: bounceinR;
animation-name: bounceinR;
}
/* 弹入-从下 */
.hui-bounceinB {
-webkit-animation-name: bounceinB;
animation-name: bounceinB;
}
/* 弹入-从左 */
.hui-bounceinL {
-webkit-animation-name: bounceinL;
animation-name: bounceinL;
}
/* 弹出 */
.hui-bounceout {
-webkit-animation-name: bounceout;
animation-name: bounceout;
}
/* 弹出-向上 */
.hui-bounceoutT {
-webkit-animation-name: bounceoutT;
animation-name: bounceoutT;
}
/* 弹出-向右 */
.hui-bounceoutR {
-webkit-animation-name: bounceoutR;
animation-name: bounceoutR;
}
/* 弹出-向下 */
.hui-bounceoutB {
-webkit-animation-name: bounceoutB;
animation-name: bounceoutB;
}
/* 弹出-向左 */
.hui-bounceoutL {
-webkit-animation-name: bounceoutL;
animation-name: bounceoutL;
}
/* 转入 */
.hui-rotatein {
-webkit-animation-name: rotatein;
animation-name: rotatein;
}
/* 转入-从左上 */
.hui-rotateinLT {
-webkit-animation-name: rotateinLT;
animation-name: rotateinLT;
}
/* 转入-从左下 */
.hui-rotateinLB {
-webkit-animation-name: rotateinLB;
animation-name: rotateinLB;
}
/* 转入-从右上 */
.hui-rotateinRT {
-webkit-animation-name: rotateinRT;
animation-name: rotateinRT;
}
/* 转入-从右下*/
.hui-rotateinRB {
-webkit-animation-name: rotateinRB;
animation-name: rotateinRB;
}
/* 转出 */
.hui-rotateout {
-webkit-animation-name: rotateout;
animation-name: rotateout;
}
/* 转出-向左上 */
.hui-rotateoutLT {
-webkit-animation-name: rotateoutLT;
animation-name: rotateoutLT;
}
/* 转出-向左下 */
.hui-rotateoutLB {
-webkit-animation-name: rotateoutLB;
animation-name: rotateoutLB;
}
/* 转出-向右上 */
.hui-rotateoutRT {
-webkit-animation-name: rotateoutRT;
animation-name: rotateoutRT;
}
/* 转出-向右下 */
.hui-rotateoutRB {
-webkit-animation-name: rotateoutRB;
animation-name: rotateoutRB;
}
/* 翻转 */
.hui-flip {
-webkit-animation-name: flip;
animation-name: flip;
}
/* 翻入-X轴 */
.hui-flipinX {
-webkit-animation-name: flipinX;
animation-name: flipinX;
}
/* 翻入-Y轴 */
.hui-flipin, .hui-flipinY {
-webkit-animation-name: flipinY;
animation-name: flipinY;
}
/* 翻出-X轴 */
.hui-flipoutX {
-webkit-animation-name: flipoutX;
animation-name: flipoutX;
}
/* 翻出-Y轴 */
.hui-flipout, .hui-flipoutY {
-webkit-animation-name: flipoutY;
animation-name: flipoutY;
}
/* 闪烁 */
.hui-flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* 震颤 */
.hui-shake {
-webkit-animation-name: shake;
animation-name: shake;
}
/* 摇摆 */
.hui-swing {
-webkit-animation-name: swing;
animation-name: swing;
}
/* 摇晃 */
.hui-wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
/* 震铃 */
.hui-ring {
-webkit-animation-name: ring;
animation-name: ring;
}
/* 淡入 */
@-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* 淡入-从上 */
@-webkit-keyframes fadeinT {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeinT {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeinR {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeinB {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeinL {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* 淡出 */
@-webkit-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* 淡出-向上 */
@-webkit-keyframes fadeoutT {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
@keyframes fadeoutT {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
/* 淡出-向右 */
@-webkit-keyframes fadeoutR {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
@keyframes fadeoutR {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
/* 淡出-向下 */
@-webkit-keyframes fadeoutB {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
@keyframes fadeoutB {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
/* 淡出-向左 */
@-webkit-keyframes fadeoutL {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-100px);
}
}
@keyframes fadeoutL {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-100px);
}
}
/* 弹跳 */
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* 弹入 */
@-webkit-keyframes bouncein {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes bouncein {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
/* 弹入-从上 */
@-webkit-keyframes bounceinT {
0% {
opacity: 0;
transform: translateY(-100px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
@keyframes bounceinT {
0% {
opacity: 0;
transform: translateY(-100px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
/* 弹入-从右 */
@-webkit-keyframes bounceinR {
0% {
opacity: 0;
transform: translateX(100px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
@keyframes bounceinR {
0% {
opacity: 0;
transform: translateX(100px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB {
0% {
opacity: 0;
transform: translateY(100px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
@keyframes bounceinB {
0% {
opacity: 0;
transform: translateY(100px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
/* 弹入-从左 */
@-webkit-keyframes bounceinL {
0% {
opacity: 0;
transform: translateX(-100px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
@keyframes bounceinL {
0% {
opacity: 0;
transform: translateX(-100px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
/* 弹出 */
@-webkit-keyframes bounceout {
0% {
transform: scale(1);
}
25% {
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0.3);
}
}
@keyframes bounceout {
0% {
transform: scale(1);
}
25% {
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(0.3);
}
}
/* 弹出-向上*/
@-webkit-keyframes bounceoutT {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
@keyframes bounceoutT {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
/* 弹出-向右*/
@-webkit-keyframes bounceoutR {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
@keyframes bounceoutR {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
/* 弹出-向下 */
@-webkit-keyframes bounceoutB {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
@keyframes bounceoutB {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
/* 弹出-向左 */
@-webkit-keyframes bounceoutL {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-200px);
}
}
@keyframes bounceoutL {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-200px);
}
}
/* 转入 */
@-webkit-keyframes rotatein {
0% {
opacity: 0;
transform: rotate(-200deg);
}
100% {
opacity: 1;
transform: rotate(0);
}
}
@keyframes rotatein {
0% {
opacity: 0;
transform: rotate(-200deg);
}
100% {
opacity: 1;
transform: rotate(0);
}
}
/* 转入-从左上 */
@-webkit-keyframes rotateinLT {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateinLT {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
/* 转入-从左下 */
@-webkit-keyframes rotateineftB {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateineftB {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
/* 转入-从右上 */
@-webkit-keyframes rotateinRT {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateinRT {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
/* 转入-从右下*/
@-webkit-keyframes rotateinRB {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateinRB {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
/* 转出 */
@-webkit-keyframes rotateout {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateout {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
/* 转出-向左上 */
@-webkit-keyframes rotateoutLT {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateoutLT {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
/* 转出-向左下 */
@-webkit-keyframes rotateoutLB {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateoutLB {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
/* 转出-向右上 */
@-webkit-keyframes rotateoutRT {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateoutRT {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
/* 转出-向右下 */
@-webkit-keyframes rotateoutBR {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateoutBR {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
/* 翻转 */
@-webkit-keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) rotateY(360deg) scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
/* 翻入-X轴 */
@-webkit-keyframes flipinX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0);
opacity: 1;
}
}
@keyframes flipinX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0);
opacity: 1;
}
}
/* 翻入-Y轴 */
@-webkit-keyframes flipinY {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-10deg);
}
70% {
transform: perspective(400px) rotateY(10deg);
}
100% {
transform: perspective(400px) rotateY(0);
opacity: 1;
}
}
@keyframes flipinY {
0% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateY(-10deg);
}
70% {
transform: perspective(400px) rotateY(10deg);
}
100% {
transform: perspective(400px) rotateY(0);
opacity: 1;
}
}
/* 翻出-X轴 */
@-webkit-keyframes flipoutX {
0% {
transform: perspective(400px) rotateX(0);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipoutX {
0% {
transform: perspective(400px) rotateX(0);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
/* 翻出-Y轴 */
@-webkit-keyframes flipoutY {
0% {
transform: perspective(400px) rotateY(0);
opacity: 1;
}
100% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipoutY {
0% {
transform: perspective(400px) rotateY(0);
opacity: 1;
}
100% {
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
/* 闪烁 */
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
/* 震颤 */
@-webkit-keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
/* 摇摆 */
@-webkit-keyframes swing {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
@keyframes swing {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
/* 摇晃 */
@-webkit-keyframes wobble {
0% {
transform: translateX(0);
}
15% {
transform: translateX(-100px) rotate(-5deg);
}
30% {
transform: translateX(80px) rotate(3deg);
}
45% {
transform: translateX(-65px) rotate(-3deg);
}
60% {
transform: translateX(40px) rotate(2deg);
}
75% {
transform: translateX(-20px) rotate(-1deg);
}
100% {
transform: translateX(0);
}
}
@keyframes wobble {
0% {
transform: translateX(0);
}
15% {
transform: translateX(-100px) rotate(-5deg);
}
30% {
transform: translateX(80px) rotate(3deg);
}
45% {
transform: translateX(-65px) rotate(-3deg);
}
60% {
transform: translateX(40px) rotate(2deg);
}
75% {
transform: translateX(-20px) rotate(-1deg);
}
100% {
transform: translateX(0);
}
}
/* 震铃 */
@-webkit-keyframes ring {
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
@keyframes ring {
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
/*3.09 列表
name: hui-list
example:
- 有序列表
- 有序列表
- 有序列表
- 1有序列表
- 2有序列表
- 3有序列表
*/
.hui-list {
/*排行榜*/
}
.hui-list .hui-list-item {
position: relative;
overflow: hidden;
margin-bottom: 5px;
font-size: 14px;
/*禁止换行*/
}
.hui-list .hui-list-item .date {
font-size: 12px;
font-family: Arial;
color: #999;
}
.hui-list.hui-list-disc {
list-style: inside;
list-style-type: disc;
}
.hui-list.hui-list-decimal {
list-style: inside;
list-style-type: decimal;
}
.hui-list.hui-list-top .hui-list-item {
padding-left: 30px;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
height: 20px;
list-style: 20px;
}
.hui-list.hui-list-top .hui-list-item .num {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
line-height: 20px;
color: #fff;
background-color: #5a98de;
text-align: center;
}
/*横向手机 竖向平板*/
@media (max-width: 767px) {
.hui-list .hui-list-item {
font-size: 18px;
padding: 11px 15px;
border-bottom: 1px solid #eee;
}
.hui-list .hui-list-item > a {
display: block;
margin: -11px -15px;
}
.hui-list .hui-list-item .date {
display: none;
}
.hui-list .hui-list-item .hui-iconfont {
background-size: 9px auto;
margin-top: -7px;
position: absolute;
right: 15px;
top: 50%;
}
.night .hui-list > .hui-list-item {
border-bottom: 1px solid #1F1F1F;
}
}
/*4.1 按钮组
name: hui-btn-group
example:
左边按钮
中间按钮
中间按钮
右边按钮
explain:
*/
.hui-btn-group {
font-size: 0;
}
.hui-btn-group .hui-btn {
margin-left: -1px;
}
.hui-btn-group .hui-btn:not(:first-child):not(:last-child):not(.hui-dropdown-toggle) {
border-radius: 0;
}
.hui-btn-group > .hui-btn:first-child:not(:last-child):not(.hui-dropdown-toggle) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.hui-btn-group > .hui-btn:last-child:not(:first-child),
.hui-btn-group > .hui-dropdown-toggle:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
/*4.2.1 导航条
name: hui-nav
example:
explain: 鼠标经过状态a:hover，当前选中状态li:current。
*/
/*logo*/
.hui-logo {
display: inline-block;
text-decoration: none;
cursor: pointer;
background-repeat: no-repeat;
background-position: left center;
background-size: auto 100%;
}
.hui-logo:hover {
text-decoration: none;
}
/*导航条*/
.hui-nav-wrapper {
height: 45px;
}
.hui-nav-wrapper .hui-nav-bar {
position: relative;
z-index: 1030;
background-color: #fff;
}
.hui-nav-wrapper .hui-nav-bar .hui-layout-content {
position: relative;
}
.hui-nav-wrapper .hui-nav-bar .hui-layout-content .hui-nav-userbar {
right: 0px;
}
.hui-nav-wrapper .hui-nav-bar.hui-nav-black {
background-color: #222;
}
.hui-nav-wrapper .hui-nav-bar.hui-nav-fixed-top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.hui-nav-wrapper .hui-nav-bar .hui-logo {
height: 44px;
line-height: 44px;
margin-right: 10px;
float: left;
font-size: 16px;
}
.hui-nav-wrapper .hui-nav-bar .hui-slogan {
font-size: 12px;
cursor: default;
}
/*导航*/
.hui-nav {
z-index: 1;
}
.hui-nav > ul {
font-size: 0;
line-height: 0;
}
.hui-nav > ul > li,
.hui-nav > ul > li > a {
line-height: 44px;
font-size: 14px;
}
.hui-nav > ul > li {
position: relative;
float: left;
text-align: center;
}
.hui-nav > ul > li > a {
display: inline-block;
text-align: center;
padding: 0 10px;
}
.hui-nav > ul > li > a:hover, .hui-nav > ul > li.current > a {
background-color: rgba(255, 255, 255, 0.2);
text-decoration: none;
transition: background-color 0.3s ease 0s;
}
@media (max-width: 767px) {
.hui-logo {
margin-right: 0;
}
.hui-nav-wrapper {
height: 45px !important;
}
.hui-nav-wrapper .hui-nav-bar .hui-logo {
height: 44px !important;
line-height: 44px !important;
}
.hui-nav-wrapper .hui-nav-bar .hui-nav {
display: none !important;
float: none !important;
}
.hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li {
width: 100%;
text-align: left;
border-bottom: solid 1px #eee;
}
.hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li > a {
display: block;
padding: 0 15px;
text-align: left;
}
.hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li.hui-dropdown.open > .hui-dropdown-menu {
display: none;
}
.hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li.hui-dropdown > .hui-dropdown-link > .hui-iconfont {
display: none;
}
.hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li,
.hui-nav-wrapper .hui-nav-bar .hui-nav > ul > li > a {
height: 44px !important;
line-height: 44px !important;
}
.hui-nav-wrapper .hui-nav-bar .hui-nav.hui-nav-collapse ul,
.hui-nav-wrapper .hui-nav-bar .hui-nav.hui-nav-collapse ul > li {
width: 100%;
display: block;
}
.js-nav-active .hui-nav-collapse {
position: absolute;
display: block;
float: none;
clear: both;
max-height: 0;
clip: rect(0 0 0 0);
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
transition: max-height 284ms ease 0s;
}
.js-nav-active .hui-nav-collapse.closed {
max-height: none;
}
.hui-nav-collapse.opened {
max-height: 9999px;
}
}
/*导航条风格-黑色*/
.hui-nav-black {
background-color: #222;
border-bottom: #080808 1px solid;
box-shadow: 0 0 4px #333333;
}
.hui-nav-black .hui-logo {
color: #fff;
color: #eee;
}
.hui-nav-black .navbar-userbar {
color: #fff;
}
.hui-nav-black .hui-nav > ul > li,
.hui-nav-black .hui-nav > ul > li > a {
color: #fff;
}
.hui-nav-black .hui-nav > ul > li > a:hover,
.hui-nav-black .hui-nav > ul > li.current > a {
color: #fff;
}
@media (max-width: 767px) {
.hui-nav-black .hui-nav > ul > li {
border-bottom: solid 1px #222;
}
.hui-nav-black .hui-nav > ul > li > a:hover, .hui-nav-black .hui-nav > ul > li.current > a {
background: #777;
}
}
/*面包导航*/
.hui-nav-toggle,
a.hui-nav-toggle {
position: absolute;
top: 0px;
right: 15px;
font-size: 20px;
color: #999;
padding: 6px 11px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
.hui-nav-toggle:hover,
a.hui-nav-toggle:hover {
text-decoration: none;
color: #fff;
}
@media (max-width: 767px) {
.mainnav > ul > li {
font-size: 1.125em;
}
}
@media (max-width: 480px) {
.mainnav > ul > li {
text-align: center;
width: 20%;
}
.mainnav > ul > li > a {
padding: 0;
padding: 0;
display: block;
}
}
/*4.2.2 面包屑导航
name: hui-breadcrumb
example:
*/
.hui-breadcrumb {
border-bottom: 1px solid #E5E5E5;
overflow: hidden;
padding: 10px 0;
}
.hui-breadcrumb span {
padding: 0 5px;
}
/*4.2.3 翻页导航
name: hui-pagination
example:
explain: 需要调用pagenav.cn.js
*/
.hui-pagination {
float: none;
clear: both;
font-size: 0;
font-family: Arial, Helvetica, sans-serif;
padding: 18px 0;
text-align: center;
}
.hui-pagination span,
.hui-pagination a,
.hui-pagination b {
font-size: 14px;
margin-right: 5px;
overflow: hidden;
padding: 3px 8px;
}
.hui-pagination a {
border: 1px solid #CCDBE4;
cursor: pointer;
}
.hui-pagination b {
color: #000;
}
.hui-pagination .mor {
padding: 3px;
font-weight: bold;
}
/*4.2.4 顶部导航
name: hui-topnav
sample:
*/
.hui-topnav {
height: 30px;
line-height: 30px;
background-color: #f7f7f7;
border-bottom: 1px solid #EBEBEB;
font-size: 12px;
}
.hui-topnav .topbar {
background-color: #ECECEC;
border-bottom: 1px solid #ddd;
}
.hui-topnav .topbar a {
margin-right: 5px;
}
.hui-topnav .r_nav {
display: inline-block;
color: #999;
}
/*4.2.5 向导
name: hui-steps
sample:
第一步
第二步
第三步
第四步
*/
.hui-steps {
display: block;
position: relative;
padding: 1em 2em 1em 3em;
vertical-align: top;
background-color: #FFF;
color: #888;
box-sizing: border-box;
transition: all 0.1s ease;
cursor: pointer;
font-size: 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
border-radius: 0.3125rem;
line-height: 1;
}
.hui-steps:after {
position: absolute;
z-index: 2;
content: "";
top: 0;
right: -1.45em;
border-bottom: 1.5em solid transparent;
border-left: 1.5em solid #FFF;
border-top: 1.5em solid transparent;
width: 0;
height: 0;
transition: all 0.1s ease;
}
.hui-steps .hui-steps-item {
display: inline-block;
position: relative;
padding: 1em 2em 1em 3em;
vertical-align: top;
background-color: #FFF;
color: #888;
box-sizing: border-box;
font-size: 1rem;
transition: all 0.1s ease;
}
.hui-steps .hui-steps-item:after {
position: absolute;
z-index: 2;
content: "";
top: 0;
right: -1.45em;
border-bottom: 1.5em solid transparent;
border-left: 1.5em solid #FFF;
border-top: 1.5em solid transparent;
width: 0;
height: 0;
transition: all 0.1s ease;
}
.hui-steps .hui-steps-item:first-child {
padding-left: 1.35em;
border-radius: 0.3125em 0 0 0.3125em;
}
.hui-steps .hui-steps-item:last-child {
border-radius: 0 0.3125em 0.3125em 0;
margin-right: 0;
}
.hui-steps .hui-steps-item:last-child:after {
display: none;
}
.hui-steps .hui-steps-item:only-child {
border-radius: 0.3125em;
}
.hui-steps .hui-steps-item:hover, .hui-steps .hui-steps-item.hover {
background-color: #F7F7F7;
color: rgba(0, 0, 0, 0.8);
}
.hui-steps .hui-steps-item:hover:after, .hui-steps .hui-steps-item.hover:after {
border-left-color: #F7F7F7;
}
.hui-steps .hui-steps-item.down, .hui-steps .hui-steps-item:active {
background-color: #F0F0F0;
}
.hui-steps .hui-steps-item.down:after, .hui-steps .hui-steps-item:active:after {
border-left-color: #F0F0F0;
}
.hui-steps .hui-steps-item.active {
cursor: auto;
background-color: #428BCA;
color: #FFF;
font-weight: 700;
}
.hui-steps .hui-steps-item.active:after {
border-left-color: #428BCA;
}
.hui-steps .hui-steps-item.disabled {
cursor: auto;
background-color: #FFF;
color: #CBCBCB;
}
.hui-steps .hui-steps-item.disabled:after {
border: 0;
background-color: #FFF;
top: 0.42em;
right: -1em;
width: 2.15em;
height: 2.15em;
transform: rotate(-45deg);
box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.1) inset;
}
.hui-steps.attached {
margin: 0;
border-radius: 0.3125em 0.3125em 0 0;
}
.hui-steps.attached .hui-steps-item:first-child {
border-radius: 0.3125em 0 0;
}
.hui-steps.attached .hui-steps-item:last-child {
border-radius: 0 0.3125em 0 0;
}
.hui-steps.attached.bottom {
margin-top: -1px;
border-radius: 0 0 0.3125em 0.3125em;
}
.hui-steps.attached.bottom .hui-steps-item:first-child {
border-radius: 0 0 0 0.3125em;
}
.hui-steps.attached.bottom .hui-steps-item:last-child {
border-radius: 0 0 0.3125em;
}
.hui-steps.one > .hui-steps-item {
width: 100%;
}
.hui-steps.two > .hui-steps-item {
width: 50%;
}
.hui-steps.three > .hui-steps-item {
width: 33.333%;
}
.hui-steps.four > .hui-steps-item {
width: 25%;
}
.hui-steps.five > .hui-steps-item {
width: 20%;
}
.hui-steps.six > .hui-steps-item {
width: 16.666%;
}
.hui-steps.seven > .hui-steps-item {
width: 14.285%;
}
.hui-steps.eight > .hui-steps-item {
width: 12.5%;
}
.hui-steps.small .hui-steps-item {
font-size: 0.8rem;
}
.hui-steps.large .hui-steps-item {
font-size: 1.25rem;
}
/*兼容写法
sample:
*/
.hui-steps-ie {
background-color: #eaf4fd;
border: solid 1px #afcfcc;
height: 44px;
line-height: 44px;
}
.hui-steps-ie .hui-steps-ie-item {
position: relative;
float: left;
height: 44px;
line-height: 44px;
cursor: pointer;
padding: 0 20px 0 40px;
background: url(../images/steps/step_bg.png) repeat-x 0 center;
}
.hui-steps-ie .hui-steps-ie-item .arrow {
height: 44px;
line-height: 44px;
position: absolute;
right: -21px;
top: 0;
width: 21px;
height: 44px;
display: block;
cursor: pointer;
background: url(../images/steps/step_arrow.png) no-repeat 0 center;
z-index: 50;
}
.hui-steps-ie .hui-steps-ie-item.active {
background-image: url(../images/steps/step_bg-active.png);
color: #fff;
z-index: 100;
}
.hui-steps-ie .hui-steps-ie-item.active .arrow {
background-image: url(../images/steps/step_arrow-active.png);
}
/*4.2.6 纵向导向tab导航
name: hui-verticalTab
sample:
*/
.hui-verticalTab {
background: #fff url(../images/verticalTab/tab_bg.png) repeat-y 0 0;
width: 38px;
}
.hui-verticalTab .hui-verticalTab-item {
position: relative;
display: block;
width: 18px;
height: auto;
text-align: center;
position: relative;
padding: 26px 10px 6px 10px;
background: url(../images/verticalTab/tabNav.png) no-repeat 0 0;
}
.hui-verticalTab .hui-verticalTab-item em {
position: absolute;
left: 0;
bottom: -20px;
width: 38px;
height: 20px;
background: url(../images/tabNav_right.png) no-repeat 0 0;
z-index: 50;
}
.hui-verticalTab .hui-verticalTab-item.active {
background-image: url(../images/verticalTab/tabNav-active.png);
color: #fff;
z-index: 99;
}
.hui-verticalTab .hui-verticalTab-item.active em {
background-image: url(../images/verticalTab/tabNav_right-active.png);
}
/*4.2.7 横向导向tab导航
name: hui-acrossTab
sample:
*/
.hui-acrossTab {
height: 29px;
background-repeat: repeat-x;
background-position: 0 0;
padding-top: 1px;
background-image: url(../images/acrossTab/acrossTab-bg.png);
}
.hui-acrossTab li {
position: relative;
float: left;
height: 29px;
line-height: 29px;
font-size: 12px;
cursor: pointer;
padding: 0 30px;
white-space: nowrap;
color: #282828;
background-position: 0 0;
background-image: url(../images/acrossTab/acrossTab-bg.png);
}
.hui-acrossTab li em {
position: absolute;
width: 23px;
height: 29px;
right: -20px;
top: 0;
z-index: 50;
background-position: right -30px;
background-image: url(../images/acrossTab/acrossTab-bg.png);
}
.hui-acrossTab li:hover {
background-position: 0 -60px;
}
.hui-acrossTab li:hover em {
background-position: right -90px;
}
.hui-acrossTab li.active {
background-position: 0 -120px;
z-index: 99;
}
.hui-acrossTab li.active em {
background-position: right -150px;
}
.hui-acrossTab li i {
position: absolute;
display: block;
width: 13px;
height: 13px;
top: 50%;
margin-top: -6px;
right: 5px;
font-size: 0;
line-height: 0;
cursor: pointer;
background-image: url(../images/acrossTab/acrossTab-close.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.hui-acrossTab li i:hover {
background-position: 0 bottom;
}
.hui-acrossTab li,
.hui-acrossTab li em {
background-repeat: no-repeat;
background-position: 0 0;
}
/*4.3 菜单
name: hui-menu
example:
*/
.hui-menu {
display: inline-block;
}
.hui-menu.radius {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.hui-menu.box-shadow {
border-top: none;
}
.hui-menu > .hui-menu-item {
position: relative;
clear: both;
/*线条*/
}
.hui-menu > .hui-menu-item > a {
display: block;
padding: 5px 20px;
line-height: 1.8;
text-align: left;
font-weight: normal;
white-space: nowrap;
}
.hui-menu > .hui-menu-item > a:hover, .hui-menu > .hui-menu-item > a:focus {
text-decoration: none;
background-color: #fafafa;
}
.hui-menu > .hui-menu-item > a .arrow {
position: absolute;
top: 50%;
margin-top: -10px;
right: 5px;
line-height: 20px;
height: 20px;
color: #999;
}
.hui-menu > .hui-menu-item.open > a {
text-decoration: none;
background-color: #fafafa;
}
.hui-menu > .hui-menu-item:last-child > a {
border-bottom: none;
}
.hui-menu > .hui-menu-item > .hui-menu {
display: none;
}
.hui-menu > .hui-menu-item.open > .hui-menu {
display: inline-block;
position: absolute;
left: 100%;
top: -1px;
min-width: 100%;
}
.hui-menu > .hui-menu-item.disabled > a {
color: #999;
text-decoration: none;
cursor: no-drop;
background-color: transparent;
}
.hui-menu > .hui-menu-item .divider {
display: block;
height: 0px;
line-height: 0px;
margin: 9px 0;
overflow: hidden;
border-top: solid 1px #eee;
}
/*4.3.1 下拉菜单
name: hui-dropdown
example:
下拉菜单
*/
.hui-dropdown {
display: inline-block;
/*鼠标经过*/
/*打开菜单*/
}
.hui-dropdown:focus {
outline: 0;
}
.hui-dropdown .hui-dropdown-link {
display: inline-block;
}
.hui-dropdown .hui-dropdown-menu {
display: none;
transition: all 0.3s ease 0s;
}
.hui-dropdown .hui-dropdown-menu:focus {
outline: 0;
}
.hui-dropdown .hui-dropdown-menu .hui-menu-item.arrow {
position: absolute;
display: block;
width: 12px;
height: 8px;
margin-top: -13px;
margin-left: 20%;
line-height: 0;
background: url(../images/dropDown/icon-jt.png) no-repeat 0 0;
}
.hui-dropdown.hover .hui-dropdown-link, .hui-dropdown.open .hui-dropdown-link {
text-decoration: none;
}
.hui-dropdown.open .hui-dropdown-link .hui-dropdown-arrow {
transition-duration: 0.3s;
transition-property: all;
_background-position: 0 0;
transform: rotate(180deg);
}
.hui-dropdown > .hui-menu {
display: none;
}
.hui-dropdown.open {
position: relative;
z-index: 990;
/*默认左对齐*/
/*右对齐*/
}
.hui-dropdown.open > .hui-dropdown-menu {
position: absolute;
z-index: 1000;
display: inline-block;
top: 100%;
left: -1px;
min-width: 100%;
}
.hui-dropdown.open.right > .hui-dropdown-menu {
right: -1px !important;
left: auto !important;
}
/*4.4 幻灯片
name: hui-carousel
sample:
explain: 默认dots为圆点，在slider后面追加numSlider样式就变成带数字的方框，boxSlider为不带数字长方条
*/
/*请给每个幻灯片套个div并设置id，通过id重置这个地方的宽度，达到自定义效果*/
.hui-carousel {
position: relative;
text-align: center;
margin: 0 auto;
z-index: 1;
}
.hui-carousel .bd,
.hui-carousel .bd li,
.hui-carousel .bd img {
width: 100%;
height: 100%;
}
.hui-carousel .bd {
z-index: 2;
overflow: hidden;
}
.hui-carousel .bd li {
float: left;
width: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
}
.hui-carousel .bd li a {
display: block;
width: 100%;
height: 100%;
}
.hui-carousel .bd li img {
display: block;
}
.hui-carousel .hd {
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: 10px;
padding: 0 10px;
text-align: center;
/*圆点*/
/*数字*/
/*长方条*/
}
.hui-carousel .hd li {
display: inline-block;
text-align: center;
margin-right: 10px;
cursor: pointer;
background-color: #C2C2C2;
}
.hui-carousel .hd li.active {
background-color: #222;
}
.hui-carousel .hd.dots li {
width: 10px;
height: 10px;
font-size: 0px;
line-height: 0px;
border-radius: 50%;
}
.hui-carousel .hd.numbox li {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 13px;
font-family: Arial;
font-weight: bold;
text-indent: inherit;
}
.hui-carousel .hd.numbox li.active {
color: #fff;
}
.hui-carousel .hd.rectangle li {
width: 40px;
height: 10px;
font-size: 0px;
line-height: 0px;
}
.hui-carousel .hui-carousel-arrow {
display: block;
position: absolute;
top: 50%;
margin-top: -25px;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
z-index: 3;
opacity: 0.7;
filter: alpha(opacity=70);
}
.hui-carousel .hui-carousel-arrow:hover {
opacity: 1;
filter: alpha(opacity=100);
}
.hui-carousel .hui-carousel-arrow.prev {
left: 0;
}
.hui-carousel .hui-carousel-arrow.next {
right: 0;
}
/*4.5 选项卡
name: hui-tab
sample:
*/
.hui-tab .hui-tab-header {
border-bottom: 1px solid #e8e8e8;
}
.hui-tab .hui-tab-header span {
cursor: pointer;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
border-bottom: solid 2px #fff;
}
.hui-tab .hui-tab-header span.current {
border-bottom-color: #1890ff;
}
.hui-tab .hui-tab-content {
display: none;
padding-top: 20px;
}
/*4.6 标签与标号
name: hui-label
example: 默认
explain: .hui-label-default 默认|.hui-label-primary 主要|.hui-label-secondary 次要|.hui-label-success 成功|.hui-label-warning 警告|.hui-label-danger 危险
name: hui-badge
example: 默认
explain: .hui-badge-default 默认|.hui-badge-primary 主要|.hui-badge-secondary 次要|.hui-badge-success 成功|.hui-badge-warning 警告|.hui-badge-danger 危险
*/
.hui-badge {
padding: 2px 9px;
border-radius: 9px;
}
.hui-label {
padding: 2px 4px;
/*圆角*/
}
.hui-label.radius {
border-radius: 3px;
}
.hui-label,
.hui-badge {
display: inline-block;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
color: #fff;
white-space: nowrap;
vertical-align: middle;
background-color: #999;
overflow: hidden;
/*默认*/
/*主要*/
/*次要*/
/*成功*/
/*警告*/
/*危险*/
}
.hui-label:empty,
.hui-badge:empty {
display: none;
}
.hui-label:hover, .hui-label:focus,
.hui-badge:hover,
.hui-badge:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.hui-label.hui-label-default, .hui-label.hui-badge-default, .hui-label.hui-label-default[href], .hui-label.hui-badge-default[href],
.hui-badge.hui-label-default,
.hui-badge.hui-badge-default,
.hui-badge.hui-label-default[href],
.hui-badge.hui-badge-default[href] {
background-color: #e6e6e6;
color: #333;
}
.hui-label.hui-label-primary, .hui-label.hui-badge-primary, .hui-label.hui-label-primary[href], .hui-label.hui-badge-primary[href],
.hui-badge.hui-label-primary,
.hui-badge.hui-badge-primary,
.hui-badge.hui-label-primary[href],
.hui-badge.hui-badge-primary[href] {
background-color: #5a98de;
}
.hui-label.hui-label-secondary, .hui-label.hui-badge-secondary, .hui-label.hui-label-secondary[href], .hui-label.hui-badge-secondary[href],
.hui-badge.hui-label-secondary,
.hui-badge.hui-badge-secondary,
.hui-badge.hui-label-secondary[href],
.hui-badge.hui-badge-secondary[href] {
background-color: #3bb4f2;
}
.hui-label.hui-label-success, .hui-label.hui-badge-success, .hui-label.hui-label-success[href], .hui-label.hui-badge-success[href],
.hui-badge.hui-label-success,
.hui-badge.hui-badge-success,
.hui-badge.hui-label-success[href],
.hui-badge.hui-badge-success[href] {
background-color: #5eb95e;
}
.hui-label.hui-label-warning, .hui-label.hui-badge-warning, .hui-label.hui-label-warning[href], .hui-label.hui-badge-warning[href],
.hui-badge.hui-label-warning,
.hui-badge.hui-badge-warning,
.hui-badge.hui-label-warning[href],
.hui-badge.hui-badge-warning[href] {
background-color: #f37b1d;
}
.hui-label.hui-label-danger, .hui-label.hui-badge-danger, .hui-label.hui-label-danger[href], .hui-label.hui-badge-danger[href],
.hui-badge.hui-label-danger,
.hui-badge.hui-badge-danger,
.hui-badge.hui-label-danger[href],
.hui-badge.hui-badge-danger[href] {
background-color: #dd514c;
}
/*4.7 警告提示
name: hui-alert
example:
explain: 警告,使用警告框jQuery插件
*/
.hui-alert {
position: relative;
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
color: #c09853;
}
.hui-alert .hui-iconfont {
position: absolute;
top: 9px;
right: 10px;
line-height: 20px;
cursor: pointer;
color: #000;
opacity: 0.2;
_color: #666;
}
.hui-alert .hui-iconfont.hover {
color: #000;
opacity: 0.8;
}
.hui-alert .hui-alert-message {
color: #c09853;
font-size: 16px;
margin-bottom: 4px;
}
.hui-alert .hui-alert-description {
font-size: 14px;
line-height: 22px;
}
.hui-alert.hui-alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.hui-alert.hui-alert-success .hui-alert-message {
color: #468847;
}
.hui-alert.hui-alert-danger {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.hui-alert.hui-alert-danger .hui-alert-message {
color: #b94a48;
}
.hui-alert.hui-alert-error {
color: #fff;
background-color: #f37b1d;
border-color: #e56c0c;
}
.hui-alert.hui-alert-error .hui-alert-message {
color: #fff;
}
.hui-alert.hui-alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.hui-alert.hui-alert-info .hui-alert-message {
color: #31708f;
}
.hui-alert.hui-alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
.hui-alert.hui-alert-block > p,
.hui-alert.hui-alert-block > ul {
margin-bottom: 0;
}
.hui-alert.hui-alert-block p + p {
margin-top: 5px;
}
/*4.8 进度条
name: hui-progress
example:
explain: 警告,使用警告框jQuery插件
*/
.hui-progress {
overflow: hidden;
width: 400px;
height: 10px;
font-size: 0;
line-height: 0;
}
.hui-progress .hui-progress-bar {
width: 100%;
background-color: #efefef;
height: 10px;
font-size: 0;
line-height: 0;
}
.hui-progress .hui-progress-bar .sr-only {
height: 10px;
font-size: 0;
line-height: 0;
display: inline-block;
background-color: #337ab7;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transition: width 0.6s ease;
}
.hui-progress .hui-progress-bar.hui-progress-bar-success .sr-only {
background-color: #5cb85c;
}
.hui-progress .hui-progress-bar.hui-progress-bar-warning .sr-only {
background-color: #f0ad4e;
}
.hui-progress .hui-progress-bar.hui-progress-bar-danger .sr-only {
background-color: #d9534f;
}
/*4.09 对话框
name: hui-modal
example:
*/
.fade {
opacity: 0;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.hui-modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1040;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.hui-modal.fade .hui-modal-dialog {
transition: transform 0.3s ease-out;
transform: translate(0, -50%);
}
.hui-modal.in .hui-modal-dialog {
transform: translate(0, 0);
}
.hui-modal .hui-modal-dialog {
position: relative;
margin: 10px;
}
.hui-modal .hui-modal-dialog .hui-modal-content {
position: relative;
background-color: #fff;
border: 1px solid #999;
outline: 0;
-webkit-background-clip: padding-box;
background-clip: padding-box;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header {
min-height: 16.42857143px;
padding: 15px;
border-bottom: 1px solid #eee;
position: relative;
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header .hui-modal-close {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header .hui-modal-close:hover, .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header .hui-modal-close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
filter: alpha(opacity=40);
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header h3,
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-header .hui-modal-title {
margin: 0;
padding: 10px 0;
font-size: 16px;
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-body {
position: relative;
padding: 15px;
overflow-y: visible;
word-break: break-all;
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-body .hui-modal-form {
margin-bottom: 0;
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer {
padding: 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #eee;
*zoom: 1;
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer:before, .hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer:after {
display: table;
content: "";
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer:after {
clear: both;
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer .hui-btn + .hui-btn {
margin-left: 5px;
margin-bottom: 0;
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer .hui-btn-group .hui-btn + .hui-btn {
margin-left: -1px;
}
.hui-modal .hui-modal-dialog .hui-modal-content .hui-modal-footer .hui-btn-block + .hui-btn-block {
margin-left: 0;
}
.hui-modal.radius .hui-modal-content {
border-radius: 6px;
}
.hui-modal.radius .hui-modal-content .hui-modal-footer {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.hui-modal .hui-modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
}
.hui-modal .hui-modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.hui-modal .hui-modal-backdrop.in {
filter: alpha(opacity=50);
opacity: 0.5;
}
.hui-modal .hui-modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
.hui-modal.middle .hui-modal-dialog {
position: absolute;
margin: 10px;
left: 0;
right: 0;
top: 50%;
}
.hui-modal.fade.middle .hui-modal-dialog {
transform: translate(0, -100%);
}
.hui-modal.in.middle .hui-modal-dialog {
transform: translate(0, -50%);
}
.hui-modal-open {
overflow: hidden;
}
.hui-modal-open .hui-modal {
overflow-x: hidden;
overflow-y: auto;
}
/*上下居中*/
@media (min-width: 768px) {
.hui-modal-dialog {
width: 600px;
margin: 30px auto;
}
.hui-modal-dialog .hui-modal-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.hui-modal.middle .hui-modal-dialog {
margin: 10px auto;
}
.hui-modal-sm {
width: 300px;
}
}
@media (min-width: 992px) {
.hui-modal-lg {
width: 900px;
}
}
.hui-modal-alert {
position: fixed;
right: auto;
bottom: auto;
width: 300px;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -30px;
z-index: 9999;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.2);
outline: 0;
-webkit-background-clip: padding-box;
background-clip: padding-box;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}
.hui-modal-alert .hui-modal-alert-info {
padding: 30px;
text-align: center;
font-size: 14px;
background-color: #fff;
}
.hui-modal-alert .hui-modal-footer {
padding: 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #eee;
*zoom: 1;
}
.hui-modal-alert.hui-modal-alert-success .hui-modal-alert-info {
color: #5eb95e;
}
.hui-modal-alert.hui-modal-alert-error .hui-modal-alert-info {
color: #c00;
}
.loading {
height: 50px;
background: url(../images/loading/loading-b.gif) no-repeat center;
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
transition: all 0.3s ease-in;
}
* html .mask {
position: absolute;
left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}
.mask_box {
background-image: none;
display: none;
z-index: 99;
}
.hover .mask_box {
position: absolute;
bottom: 0;
left: 0;
display: block;
background-color: rgba(0, 0, 0, 0.3);
text-align: left;
}
.hui-modal-open .hui-dropdown-menu {
z-index: 2050;
}
.hui-modal-open .hui-dropdown.open {
z-index: 2050;
}
.hui-modal-open .popover {
z-index: 2060;
}
.hui-modal-open .tooltip {
z-index: 2070;
}
/*4.10 右侧悬浮工具
name: hui-tools-right
*/
.hui-tools-right {
position: fixed;
right: 15px;
z-index: 999;
cursor: pointer;
visibility: visible;
background-color: #fff;
border: 1px solid #d9d9d9;
color: #9c9c9c;
font-size: 16px;
width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
text-decoration: none;
_position: absolute;
/*4.12.1 返回顶部
name: hui-totop
Level: Global
example:
explain: 返回顶部
*/
/*4.12.2 意见反馈
name: hui-feedback
Level: Global
example:
explain: 意见反馈
*/
}
.hui-tools-right:hover {
color: #fff;
text-decoration: none;
background-color: #999;
border-color: #999;
}
.hui-tools-right .hui-totop {
bottom: 60px;
display: none;
}
.hui-tools-right .hui-feedback {
bottom: 110px;
}
/*4.11 分享到
name: hui-share
example:
explain: 分享到
*/
.hui-share {
/*4.13.1 百度分享*/
/*4.13.2 jiathis分享*/
}
.hui-share.bdsharebuttonbox a.bds_more, .hui-share.bdsharebuttonbox a.bds_weixin, .hui-share.bdsharebuttonbox a.bds_qzone, .hui-share.bdsharebuttonbox a.bds_sqq, .hui-share.bdsharebuttonbox a.bds_tsina, .hui-share.bdsharebuttonbox a.bds_tqq, .hui-share.bdsharebuttonbox a.bds_douban {
display: inline-block;
background: none;
padding-left: 0;
text-decoration: none;
margin: 0;
margin-right: 6px;
height: auto;
line-height: auto;
}
.hui-share.bdsharebuttonbox a:hover {
text-decoration: none;
}
.hui-share.bdsharebuttonbox a .share-text {
display: inline-block;
margin-right: 6px;
color: #999;
cursor: default;
}
.hui-share.bdsharebuttonbox.bdshare-button-style0-16 a,
.hui-share.bdsharebuttonbox.bdshare-button-style0-16 .share-text,
.hui-share.bdsharebuttonbox.bdshare-button-style0-16 .hui-iconfont {
line-height: 16px;
}
.hui-share.bdsharebuttonbox.bdshare-button-style0-16 .share-text,
.hui-share.bdsharebuttonbox.bdshare-button-style0-16 .hui-iconfont {
font-size: 16px;
}
.hui-share.bdsharebuttonbox.bdshare-button-style0-24 a,
.hui-share.bdsharebuttonbox.bdshare-button-style0-24 .share-text,
.hui-share.bdsharebuttonbox.bdshare-button-style0-24 .hui-iconfont {
line-height: 24px;
}
.hui-share.bdsharebuttonbox.bdshare-button-style0-24 .share-text,
.hui-share.bdsharebuttonbox.bdshare-button-style0-24 .hui-iconfont {
font-size: 24px;
}
.hui-share.jiathis_style_24x24 .jtico {
background: none;
padding-left: 0 !important;
}
.hui-share.jiathis_style_24x24 .jiathis_separator {
margin-left: 0;
margin-right: 6px;
}
/*4.12 面板
name: hui-panel
sample:
*/
.hui-panel {
background-color: #fff;
border: solid 1px transparent;
/*默认面板*/
/*主要面板*/
/*次要面板*/
/*成功面板*/
/*警告面板*/
/*危险面板*/
}
.hui-panel .hui-panel-header {
border-bottom: solid 1px transparent;
padding: 8px 15px;
font-size: 14px;
font-weight: 700;
margin-bottom: -1px;
}
.hui-panel .hui-panel-body {
padding: 15px;
}
.hui-panel .hui-panel-footer {
background-color: #f5f5f5;
border-top: 1px solid #ddd;
padding: 5px 20px;
}
.hui-panel.hui-panel-default {
border-color: #ddd;
}
.hui-panel.hui-panel-default > .hui-panel-header {
border-color: #ddd;
background-color: #f5f5f5;
color: #444;
}
.hui-panel.hui-panel-primary {
border-color: #5a98de;
}
.hui-panel.hui-panel-primary > .hui-panel-header {
border-color: #5a98de;
background-color: #5a98de;
color: #fff;
}
.hui-panel.hui-panel-secondary {
border-color: #3bb4f2;
}
.hui-panel.hui-panel-secondary > .hui-panel-header {
border-color: #3bb4f2;
background-color: #3bb4f2;
color: #fff;
}
.hui-panel.hui-panel-success {
border-color: #5eb95e;
}
.hui-panel.hui-panel-success > .hui-panel-header {
border-color: #5eb95e;
background-color: #5eb95e;
color: #fff;
}
.hui-panel.hui-panel-warning {
border-color: #f37b1d;
}
.hui-panel.hui-panel-warning > .hui-panel-header {
border-color: #f37b1d;
background-color: #f37b1d;
color: #fff;
}
.hui-panel.hui-panel-danger {
border-color: #dd514c;
}
.hui-panel.hui-panel-danger > .hui-panel-header {
border-color: #dd514c;
background-color: #dd514c;
color: #fff;
}
/*4.13 案例
name: hui-docs-example
example:
……
*/
.hui-docs-example {
position: relative;
*position: static;
*padding-top: 19px;
margin: 15px 0;
padding: 39px 19px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.hui-docs-example:after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
*position: static;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
border-radius: 4px 0;
}
/*4.14 滚动
name: hui-rolling
*/
/*4.14.1 上下滚动
name: hui-marquee
example:
*/
.hui-marquee {
height: 22px;
overflow: hidden;
line-height: 22px;
}
/*4.14.2 滚动
name: hui-rolling
example:
*/
.hui-rollpic .prev,
.hui-rollpic .next {
display: block;
height: 38px;
width: 38px;
cursor: pointer;
float: left;
background: url(../images/rollpic/unslider-arrow.png) no-repeat 0 0;
margin-top: 70px;
}
.hui-rollpic .prev {
background-position: 0 0;
margin-right: 5px;
}
.hui-rollpic .prev:hover {
background-position: 0 -38px;
}
.hui-rollpic .next {
background-position: 0 -76px;
margin-left: 5px;
}
.hui-rollpic .next:hover {
background-position: 0 -114px;
}
.hui-rollpic .hui-rollpic-body {
float: left;
border: solid 1px #ddd;
}
.hui-rollpic .hui-rollpic-body li {
padding: 10px;
}
/*4.15 搜索条
name: hui-search
sample:
*/
/*搜索下拉提示*/
.hui-search-results {
position: absolute;
border: solid 1px #ddd;
background-color: #fff;
padding: 3px;
display: none;
margin-top: -1px;
z-index: 999;
}
.hui-search-results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.hui-search-results ul li {
padding-left: 5px;
padding-right: 5px;
display: block;
height: 24px;
line-height: 24px;
cursor: pointer;
}
.hui-search-results ul li p {
float: left;
margin: 0;
padding: 0;
overflow: hidden;
}
.hui-search-results ul li p tt {
color: #666;
}
.hui-search-results ul li span {
margin: 0;
padding: 0;
float: right;
color: #f93;
width: 90px;
text-align: right;
overflow: hidden;
}
.hui-search-results ul li.hover {
background-color: #f0f1f2;
}
.hui-search-loading {
background: #fff url(../images/loading/loading-s.gif) right center no-repeat;
}
/*4.16 广告
name: hui-ad
*/
/*4.16.1 顶部展开定时自动关闭广告
name:
sample:
*/
/*4.16.2 对联广告
name: hui-couplets-ad
sample:
*/
.hui-couplets-ad {
top: 260px;
position: absolute;
width: 102px;
overflow: hidden;
display: none;
z-index: 100;
}
.hui-couplets-ad.hui-couplets-ad-l {
left: 6px;
}
.hui-couplets-ad.hui-couplets-ad-r {
right: 6px;
}
.hui-couplets-ad .hui-couplets-ad-content {
border: #CCC solid 1px;
width: 100px;
height: 300px;
overflow: hidden;
background-color: #0C9;
}
.hui-couplets-ad .hui-couplets-ad-close {
width: 100%;
height: 24px;
line-height: 24px;
text-align: center;
display: block;
font-size: 13px;
color: #555;
text-decoration: none;
}
/*4.17 标签*/
/*4.17.1 标签输入效果
name: hui-tag
sample:
*/
.hui-tag-wrapper {
border: solid 1px #dedede;
padding: 0 10px;
}
.hui-tag-wrapper .hui-tag-editor {
position: relative;
padding: 10px 0 10px 24px;
min-height: 20px;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-icon {
position: absolute;
left: 0;
top: 11px;
font-size: 14px;
color: #666;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-token {
color: #aaa;
float: left;
font-size: 12px;
height: 20px;
line-height: 20px;
margin-right: 8px;
padding: 0 1px;
white-space: nowrap;
cursor: pointer;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-token:before {
content: "#";
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-token:hover {
text-decoration: line-through;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-iptwrap {
position: relative;
float: left;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-iptwrap .hui-tag-input {
position: relative;
height: 20px;
min-width: 60px;
border: 0 none;
vertical-align: top;
line-height: 20px;
color: #333;
z-index: 2;
background: url(../images/Huitags/empty.png) repeat scroll 0 0;
display: inline-block;
width: 100%;
}
.hui-tag-wrapper .hui-tag-editor .hui-tag-label {
position: absolute;
top: 0;
left: 2px;
width: 240px;
height: 20px;
line-height: 20px;
font-size: 14px;
overflow: hidden;
z-index: 1;
color: #ccc;
}
.hui-tag-wrapper .hui-tag-list {
padding: 0 0 10px 0;
}
.hui-tag-wrapper .hui-tag-list .hui-tag-null {
font-size: 12px;
}
.hui-tag-wrapper .hui-tag-list .hui-tag-has span {
cursor: pointer;
font-size: 12px;
white-space: nowrap;
margin-right: 10px;
}
/*4.17.2 标签混排效果
name: hui-tagsmixed
sample:
*/
.hui-tagsmixed a {
height: 26px;
line-height: 26px;
padding-right: 6px;
}
.hui-tagsmixed a:hover {
color: #F00;
text-decoration: underline;
}
.hui-tagsmixed a.tags1 {
color: #C00;
font-size: 24px;
}
.hui-tagsmixed a.tags2 {
color: #030;
font-size: 16px;
}
.hui-tagsmixed a.tags3 {
color: #00F;
}
.hui-tagsmixed a.tags4 {
font-size: 16px;
}
.hui-tagsmixed a.tags5 {
color: #C00;
font-size: 20px;
}
.hui-tagsmixed a.tags6 {
color: #F06;
font-size: 20px;
}
.hui-tagsmixed a.tags7 {
color: #030;
font-weight: bold;
font-size: 18px;
}
.hui-tagsmixed a.tags8 {
color: #F06;
font-weight: bold;
}
.hui-tagsmixed a.tags9 {
color: #C00;
font-weight: bold;
font-size: 16px;
}
/*4.18 折叠
name: hui-fold
sample:
*/
.hui-fold .hui-fold-item {
position: relative;
}
.hui-fold .hui-fold-item .hui-fold-header {
margin: 0;
font-weight: bold;
position: relative;
border-top: 1px solid #fff;
font-size: 15px;
line-height: 22px;
padding: 7px 10px;
background-color: #eee;
cursor: pointer;
padding-right: 30px;
}
.hui-fold .hui-fold-item .hui-fold-header b {
position: absolute;
display: block;
cursor: pointer;
right: 10px;
top: 7px;
width: 16px;
height: 16px;
text-align: center;
color: #666;
}
.hui-fold .hui-fold-item .hui-fold-content {
display: none;
padding: 10px;
}
/*4.19 遮罩
name: hui-mask
*/
.hui-mask {
position: relative;
overflow: hidden;
}
.hui-mask .mask-bar {
position: absolute;
height: auto;
left: 0;
bottom: -100%;
right: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
z-index: 2;
color: #fff !important;
}
.hui-mask.hover .mask-bar {
bottom: 0px;
transition: bottom 200ms;
}
.hui-mask .mask-box {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
color: #fff !important;
}
.hui-mask.hover .mask-box {
background-color: rgba(0, 0, 0, 0.6);
transition: all 500ms;
}
/*4.20 评论列表
name: hui-comment
sample:
*/
.hui-comment .hui-comment-item {
list-style: none outside none;
margin: 1.6rem 0 0;
}
.hui-comment .hui-comment-item .hui-avatar {
border: 1px solid transparent;
float: left;
}
.hui-comment .hui-comment-item .hui-comment-main {
position: relative;
margin-left: 64px;
border: 1px solid #dedede;
border-radius: 2px;
}
.hui-comment .hui-comment-item .hui-comment-main:before, .hui-comment .hui-comment-item .hui-comment-main:after {
position: absolute;
top: 11px;
left: -16px;
right: 100%;
width: 0;
height: 0;
display: block;
content: " ";
border-color: transparent;
border-style: solid solid outset;
pointer-events: none;
}
.hui-comment .hui-comment-item .hui-comment-main:before {
border-right-color: #dedede;
border-width: 8px;
}
.hui-comment .hui-comment-item .hui-comment-main:after {
border-width: 7px;
border-right-color: #f8f8f8;
margin-top: 1px;
margin-left: 2px;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header {
padding: 10px 15px;
background: #f8f8f8;
border-bottom: 1px solid #eee;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header .hui-comment-title {
margin: 0 0 8px 0;
font-size: 1.6rem;
line-height: 1.2;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header .hui-comment-meta {
font-size: 13px;
color: #999;
line-height: 1.2;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header .hui-comment-meta a {
color: #999;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-header .hui-comment-meta .hui-comment-author {
font-weight: 700;
color: #999;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-body {
padding: 15px;
overflow: hidden;
}
.hui-comment .hui-comment-item .hui-comment-main .hui-comment-body > :last-child {
margin-bottom: 0;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-avatar {
float: right;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main {
margin-left: 0;
margin-right: 64px;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main:before {
border-left-color: #dedede;
border-right-color: transparent;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main:before, .hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main:after {
left: 100%;
position: absolute;
right: -16px;
}
.hui-comment .hui-comment-item.hui-comment-flip .hui-comment-main :after {
border-left-color: #f8f8f8;
border-right-color: transparent;
margin-left: auto;
margin-right: 2px;
}
/*4.21 页脚
name: hui-footer
sample:
*/
.hui-footer {
border-top: 1px solid #E8E8E8;
padding: 15px 0;
font-family: tahoma, Arial;
font-size: 12px;
color: #999;
line-height: 22px;
text-align: center;
}
.hui-footer a,
.hui-footer a:hover {
color: #999;
}
/*4.22 星星评价
name: hui-star
sample:
显示分数效果 可以是百分比
打分效果 结构是js生成。
*/
.hui-star {
font-size: 0;
line-height: 0;
}
.hui-star .hui-star-item {
display: inline-block;
text-align: center;
}
.hui-star.hui-star-show {
background: url(../images/star/iconpic-star-S-default.png) repeat-x 0 0;
}
.hui-star.hui-star-show .hui-star-item {
background: url(../images/star/iconpic-star-S.png) repeat-x 0 0;
}
.hui-star.hui-star-show .hui-star-item.star-1 {
width: 20%;
}
.hui-star.hui-star-show .hui-star-item.star-2 {
width: 40%;
}
.hui-star.hui-star-show .hui-star-item.star-3 {
width: 60%;
}
.hui-star.hui-star-show .hui-star-item.star-4 {
width: 80%;
}
.hui-star.hui-star-show .hui-star-item.star-5 {
width: 100%;
}
.hui-star.size-S {
width: 80px;
height: 16px;
background-size: 16px;
}
.hui-star.size-S .hui-star-item {
height: 16px;
background-size: 16px;
}
.hui-star.size-S img {
width: 16px;
height: 16px;
}
.hui-star.size-M {
width: 120px;
height: 24px;
background-size: 24px;
}
.hui-star.size-M .hui-star-item {
height: 24px;
background-size: 24px;
}
.hui-star.size-M img {
width: 24px;
height: 24px;
}
/*4.23 文字提示
name: tooltip
*/
.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-size: 12px;
line-height: 1.4;
visibility: visible;
filter: alpha(opacity=0);
opacity: 0;
}
.tooltip .tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #000;
border-radius: 4px;
}
.tooltip .tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: 0.9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
bottom: 0;
left: 5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
right: 5px;
bottom: 0;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
left: 5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
right: 5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
/*4.24 气泡卡片
name: popover
*/
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.popover > .arrow,
.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover > .arrow {
border-width: 11px;
}
.popover > .arrow:after {
content: "";
border-width: 10px;
}
.popover .popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.popover .popover-content {
padding: 9px 14px;
}
.popover.top {
margin-top: -10px;
}
.popover.top > .arrow {
bottom: -11px;
left: 50%;
margin-left: -11px;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, 0.25);
border-bottom-width: 0;
}
.popover.top > .arrow:after {
bottom: 1px;
margin-left: -10px;
content: " ";
border-top-color: #fff;
border-bottom-width: 0;
}
.popover.right {
margin-left: 10px;
}
.popover.right > .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-right-color: #999;
border-right-color: rgba(0, 0, 0, 0.25);
border-left-width: 0;
}
.popover.right > .arrow:after {
bottom: -10px;
left: 1px;
content: " ";
border-right-color: #fff;
border-left-width: 0;
}
.popover.bottom {
margin-top: 10px;
}
.popover.bottom > .arrow {
top: -11px;
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, 0.25);
}
.popover.bottom > .arrow:after {
top: 1px;
margin-left: -10px;
content: " ";
border-top-width: 0;
border-bottom-color: #fff;
}
.popover.left {
margin-left: -10px;
}
.popover.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, 0.25);
}
.popover.left > .arrow:after {
right: 1px;
bottom: -10px;
content: " ";
border-right-width: 0;
border-left-color: #fff;
}
/*4.25 datetimepicker日期插件
name: mod_datetimepicker
sample:
*/
.datetimepicker {
padding: 4px;
margin-top: 1px;
border-radius: 4px;
direction: ltr;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.datetimepicker.datetimepicker-inline {
width: 220px;
}
.datetimepicker.datetimepicker-rtl {
direction: rtl;
}
.datetimepicker.datetimepicker-rtl table tr td span {
float: right;
}
.datetimepicker > div {
display: none;
}
.datetimepicker.minutes div.datetimepicker-minutes {
display: block;
}
.datetimepicker.hours div.datetimepicker-hours {
display: block;
}
.datetimepicker.days div.datetimepicker-days {
display: block;
}
.datetimepicker.months div.datetimepicker-months {
display: block;
}
.datetimepicker.years div.datetimepicker-years {
display: block;
}
.datetimepicker .icon-arrow-left,
.datetimepicker .icon-arrow-right {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: 0.3em;
line-height: 14px;
vertical-align: text-top;
background-image: url(../images/datetimepicker/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
}
.datetimepicker .icon-arrow-left {
background-position: -240px -96px;
}
.datetimepicker .icon-arrow-right {
background-position: -264px -96px;
}
.datetimepicker table {
margin: 0;
}
.datetimepicker table td,
.datetimepicker table th {
text-align: center;
width: 20px;
height: 20px;
border-radius: 4px;
border: none;
}
.datetimepicker table td.switch,
.datetimepicker table th.switch {
width: 145px;
}
.datetimepicker table td span.glyphicon,
.datetimepicker table th span.glyphicon {
pointer-events: none;
}
.datetimepicker table td .minute:hover {
background: #eee;
cursor: pointer;
}
.datetimepicker table td .hour:hover {
background: #eee;
cursor: pointer;
}
.datetimepicker table td .day:hover {
background: #eee;
cursor: pointer;
}
.datetimepicker table td.old, .datetimepicker table td.mew {
color: #999;
}
.datetimepicker table td.disabled, .datetimepicker table td.disabled:hover {
background: none;
color: #999;
cursor: default;
}
.datetimepicker table td.today, .datetimepicker table td.today:hover, .datetimepicker table td.today.disabled, .datetimepicker table td.today.disabled:hover {
background-color: #fde19a;
background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
background-repeat: repeat-x;
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdd49a", endColorstr="#fdf59a", GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.datetimepicker table td.today:hover, .datetimepicker table td.today:hover:hover, .datetimepicker table td.today.disabled:hover, .datetimepicker table td.today.disabled:hover:hover, .datetimepicker table td.today:active, .datetimepicker table td.today:hover:active, .datetimepicker table td.today.disabled:active, .datetimepicker table td.today.disabled:hover:active, .datetimepicker table td.today.active, .datetimepicker table td.today:hover.active, .datetimepicker table td.today.disabled.active, .datetimepicker table td.today.disabled:hover.active, .datetimepicker table td.today.disabled, .datetimepicker table td.today:hover.disabled, .datetimepicker table td.today.disabled.disabled, .datetimepicker table td.today.disabled:hover.disabled, .datetimepicker table td.today[disabled], .datetimepicker table td.today:hover[disabled], .datetimepicker table td.today.disabled[disabled], .datetimepicker table td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datetimepicker table td.today:active, .datetimepicker table td.today:hover:active, .datetimepicker table td.today.disabled:active, .datetimepicker table td.today.disabled:hover:active, .datetimepicker table td.today.active, .datetimepicker table td.today:hover.active, .datetimepicker table td.today.disabled.active, .datetimepicker table td.today.disabled:hover.active {
background-color: #fbf069;
}
.datetimepicker table td.active, .datetimepicker table td.active:hover, .datetimepicker table td.active.disabled, .datetimepicker table td.active.disabled:hover {
background-color: #006dcc;
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0088cc", endColorstr="#0044cc", GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datetimepicker table td.active:hover, .datetimepicker table td.active:hover:hover, .datetimepicker table td.active.disabled:hover, .datetimepicker table td.active.disabled:hover:hover, .datetimepicker table td.active:active, .datetimepicker table td.active:hover:active, .datetimepicker table td.active.disabled:active, .datetimepicker table td.active.disabled:hover:active, .datetimepicker table td.active.active, .datetimepicker table td.active:hover.active, .datetimepicker table td.active.disabled.active, .datetimepicker table td.active.disabled:hover.active, .datetimepicker table td.active.disabled, .datetimepicker table td.active:hover.disabled, .datetimepicker table td.active.disabled.disabled, .datetimepicker table td.active.disabled:hover.disabled, .datetimepicker table td.active[disabled], .datetimepicker table td.active:hover[disabled], .datetimepicker table td.active.disabled[disabled], .datetimepicker table td.active.disabled:hover[disabled] {
background-color: #04c;
}
.datetimepicker table td.active:active, .datetimepicker table td.active:hover:active, .datetimepicker table td.active.disabled:active, .datetimepicker table td.active.disabled:hover:active, .datetimepicker table td.active.active, .datetimepicker table td.active:hover.active, .datetimepicker table td.active.disabled.active, .datetimepicker table td.active.disabled:hover.active {
background-color: #039;
}
.datetimepicker table td span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
border-radius: 4px;
}
.datetimepicker table td span.disabled, .datetimepicker table td span.disabled:hover {
background: none;
color: #999;
cursor: default;
}
.datetimepicker table td span:hover {
background: #eee;
}
.datetimepicker table td span.active, .datetimepicker table td span.active:hover, .datetimepicker table td span.active.disabled, .datetimepicker table td span.active.disabled:hover {
background-color: #006dcc;
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0088cc", endColorstr="#0044cc", GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datetimepicker table td span.active:hover, .datetimepicker table td span.active:hover:hover, .datetimepicker table td span.active.disabled:hover, .datetimepicker table td span.active.disabled:hover:hover, .datetimepicker table td span.active:active, .datetimepicker table td span.active:hover:active, .datetimepicker table td span.active.disabled:active, .datetimepicker table td span.active.disabled:hover:active, .datetimepicker table td span.active.active, .datetimepicker table td span.active:hover.active, .datetimepicker table td span.active.disabled.active, .datetimepicker table td span.active.disabled:hover.active, .datetimepicker table td span.active.disabled, .datetimepicker table td span.active:hover.disabled, .datetimepicker table td span.active.disabled.disabled, .datetimepicker table td span.active.disabled:hover.disabled, .datetimepicker table td span.active[disabled], .datetimepicker table td span.active:hover[disabled], .datetimepicker table td span.active.disabled[disabled], .datetimepicker table td span.active.disabled:hover[disabled] {
background-color: #04c;
}
.datetimepicker table td span.active:active, .datetimepicker table td span.active:hover:active, .datetimepicker table td span.active.disabled:active, .datetimepicker table td span.active.disabled:hover:active, .datetimepicker table td span.active.active, .datetimepicker table td span.active:hover.active, .datetimepicker table td span.active.disabled.active, .datetimepicker table td span.active.disabled:hover.active {
background-color: #039;
}
.datetimepicker table td span.old {
color: #999;
}
.datetimepicker table thead tr:first-child th,
.datetimepicker table tfoot th {
cursor: pointer;
}
.datetimepicker table thead tr:first-child th:hover,
.datetimepicker table tfoot th:hover {
background: #eee;
}
.datetimepicker-dropdown,
.datetimepicker-dropdown-left {
top: 0;
left: 0;
}
[class*=" datetimepicker-dropdown"]:before {
content: "";
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #cccccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
}
[class*=" datetimepicker-dropdown"]:after {
content: "";
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
}
[class*=" datetimepicker-dropdown-top"]:before {
content: "";
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
border-bottom: 0;
}
[class*=" datetimepicker-dropdown-top"]:after {
content: "";
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
border-bottom: 0;
}
.datetimepicker-dropdown-bottom-left:before {
top: -7px;
right: 6px;
}
.datetimepicker-dropdown-bottom-left:after {
top: -6px;
right: 7px;
}
.datetimepicker-dropdown-bottom-right:before {
top: -7px;
left: 6px;
}
.datetimepicker-dropdown-bottom-right:after {
top: -6px;
left: 7px;
}
.datetimepicker-dropdown-top-left:before {
bottom: -7px;
right: 6px;
}
.datetimepicker-dropdown-top-left:after {
bottom: -6px;
right: 7px;
}
.datetimepicker-dropdown-top-right:before {
bottom: -7px;
left: 6px;
}
.datetimepicker-dropdown-top-right:after {
bottom: -6px;
left: 7px;
}
.table-striped .datetimepicker table tr td,
.table-striped .datetimepicker table tr th {
background-color: transparent;
}
.datetimepicker .datetimepicker-hours span {
height: 26px;
line-height: 26px;
}
.datetimepicker .datetimepicker-hours table tr td span.hour_am,
.datetimepicker .datetimepicker-hours table tr td span.hour_pm {
width: 14.6%;
}
.datetimepicker .datetimepicker-hours fieldset legend,
.datetimepicker .datetimepicker-minutes fieldset legend {
margin-bottom: inherit;
line-height: 30px;
}
.datetimepicker .datetimepicker-minutes span {
height: 26px;
line-height: 26px;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i,
.input-group.date .input-group-addon span {
cursor: pointer;
width: 14px;
height: 14px;
}
/*4.26 分类检索
name: hui-category-nav
sample:
*/
.hui-category-nav .item {
padding: 5px;
position: relative;
border-bottom: solid 1px #ddd;
}
.hui-category-nav .item .dt {
width: 90px;
float: left;
white-space: nowrap;
}
.hui-category-nav .item .dd {
margin-left: 100px;
text-align: left;
font-size: 14px;
height: auto;
}
.hui-category-nav .item .dd a {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px;
padding: 0 5px;
text-decoration: none;
}
/*4.27 Markdown */
.markdown {
word-wrap: break-word;
font-size: 14px;
line-height: 20px;
font-weight: normal;
font-style: normal;
font-family: consolas, monaco, courier, "courier new", fixed-width;
color: #333333;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6,
.markdown pre,
.markdown code,
.markdown blockquote,
.markdown em,
.markdown strong,
.markdown code {
font-size: 14px;
line-height: 20px;
font-weight: normal;
font-style: normal;
font-family: consolas, monaco, courier, "courier new", fixed-width;
color: #333333;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6,
.markdown pre,
.markdown code,
.markdown blockquote,
.markdown ol,
.markdown ul,
.markdown li,
.markdown p,
.markdown section,
.markdown header,
.markdown footer {
float: none;
margin: 0;
padding: 0;
}
.markdown h1,
.markdown p,
.markdown ul,
.markdown ol,
.markdown pre,
.markdown blockquote {
margin-top: 20px;
margin-bottom: 20px;
}
.markdown h1 {
position: relative;
display: inline-block;
display: table-cell;
padding: 20px 0 40px;
margin: 0;
overflow: hidden;
}
.markdown h1:after {
content: "====================================================================================================";
position: absolute;
bottom: 20px;
left: 0;
}
.markdown h1 + * {
margin-top: 0;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
position: relative;
margin-bottom: 20px;
}
.markdown h2:before,
.markdown h3:before,
.markdown h4:before,
.markdown h5:before,
.markdown h6:before {
content: "## ";
display: inline;
}
.markdown h3:before {
content: "### ";
}
.markdown h4:before {
content: "#### ";
}
.markdown h5:before {
content: "##### ";
}
.markdown h6:before {
content: "###### ";
}
.markdown li {
position: relative;
display: block;
padding-left: 34px;
padding-left: 4ch;
}
.markdown li:after {
position: absolute;
top: 0;
left: 0;
}
.markdown ul > li:after {
content: "*";
}
.markdown ol {
counter-reset: ol;
}
.markdown ol > li:after {
content: counter(ol) ".";
counter-increment: ol;
}
.markdown pre {
margin-left: 34px;
padding-left: 4ch;
}
.markdown pre code:before,
.markdown pre code:after {
content: none;
}
.markdown blockquote {
position: relative;
padding-left: 17px;
padding-left: 2ch;
overflow: hidden;
}
.markdown blockquote:after {
content: ">\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>\a>";
white-space: pre;
position: absolute;
top: 0;
left: 0;
font-size: 14px;
line-height: 20px;
}
.markdown strong:before,
.markdown strong:after {
content: "__";
display: inline;
}
.markdown em:before,
.markdown em:after {
content: "*";
display: inline;
}
.markdown a {
text-decoration: none;
}
.markdown a:before {
content: "[";
display: inline;
color: #333333;
}
.markdown a:after {
content: "](" attr(href) ")";
display: inline;
color: #333333;
}
.markdown code {
font-weight: 100;
}
.markdown code:before, .markdown code:after {
content: "`";
display: inline;
}
.markdown hr {
position: relative;
height: 20px;
font-size: 0;
line-height: 0;
overflow: hidden;
border: 0;
margin-bottom: 20px;
}
.markdown hr:after {
content: "----------------------------------------------------------------------------------------------------";
position: absolute;
top: 0;
left: 0;
font-size: 14px;
line-height: 20px;
width: 100%;
word-wrap: break-word;
}
@-moz-document url-prefix() {
.markdown h1 {
display: block;
}
}
.markdown-ones ol > li:after {
content: "1.";
}
/*5.1 结果页
name: hui-result
*/
.hui-result {
padding-top: 60px;
padding-bottom: 60px;
text-align: center;
}
.hui-result .hui-result-icon {
text-align: center;
}
.hui-result .hui-result-icon .hui-iconfont {
font-size: 72px;
}
.hui-result .hui-result-title {
font-size: 24px;
color: #afb5bf;
text-align: center;
}
.hui-result .hui-result-extra {
font-size: 14px;
color: #afb5bf;
}
.hui-result.hui-result-success .hui-iconfont {
color: #5eb95e;
}
.hui-result.hui-result-info .hui-iconfont {
color: #5a98de;
}
.hui-result.hui-result-warning .hui-iconfont {
color: #f37b1d;
}
.hui-result.hui-result-error .hui-iconfont {
color: #c00;
}
@某人 你是猴子派来的救兵吗？