/**
    * @description : 猪八戒t5s全局样式
    * @author: laotan(2013-08-05)
    * @update: laotan(2013-08-06)
**/
.codechange {
  color: #fff;
}
/**
normalize
============
Created：**laotan** <span class="gray">（2013/07/24 15:06:26）</span>

Updated：**laotan** <span id="updateTime"></span>

---------------------------------------

## 为何采用normalize

* 保留有用的默认值，区别完全重置(reset)
* 让浏览器渲染表现得统一
* 是新一代CSS库普遍采用的形式

项目地址: normalize.css v1.1.2 | <http://git.io/normalize>
**/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}
h3 {
  font-size: 1.17em;
  margin: 1em 0;
}
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}
h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}
h6 {
  font-size: 0.67em;
  margin: 2.33em 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
blockquote {
  margin: 1em 40px;
}
dfn {
  font-style: italic;
}
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}
mark {
  background: #ff0;
  color: #000;
}
pre {
  margin: 1em 0;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: '';
  content: none;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
p {
  margin: 0 0 10px;
}
ul,
ol {
  padding: 0;
  margin: 0 0 10px 25px;
}
li {
  line-height: 20px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
dl {
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 20px;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 10px;
}
img {
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto\9;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: middle;
}
button,
input {
  *overflow: visible;
  line-height: normal;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  *overflow: visible;
}
label,
select {
  cursor: pointer;
  /* Improves usability and consistency of cursor style between image-type `input` and others.*/
}
button[disabled],
html input[disabled] {
  cursor: default;
}
/*
// 1. Address box sizing set to content-box in IE 8/9.
// 2. Remove excess padding in IE 8/9.
// 3. Remove excess padding in IE 7.
//    Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *height: 13px;
  *width: 13px;
  cursor: pointer;
}
/*
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
/*
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  vertical-align: top;
}
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/**
全局基础样式
============
Created：**laotan** <span class="gray">（2013/08/05 18:03:15）</span>

Updated：**laotan** <span id="updateTime"></span>

---------------------------------------

关于组件库
----------
引用自[**Bootstrap 2.3**](http://twitter.github.io/bootstrap/)， 结合网站自身特性和团队编码风格，进行了本地化修改。

去掉了原框架部分特性，新增了一些自有组件，改变了组件命名风格（加`ui`前缀，避免耦合）

--------

通用样式
----------
* 定义的全局 `font-size` 是**12px**
* `.highlight` 和 `.gray`分别设置文字颜色为 <span class="highlight">高亮</span> 和 <span class="gray">灰色</span>
* `.yahei`设置字体为<span class="yahei">微软雅黑</span>
* `.fl`设置向左浮动
* `.fr`设置向右浮动
* `.hide-txt`设置文字隐藏，不占页面空间，不影响非正常用户阅读体验（搜索spider，屏幕阅读器）
* `.hide` 和 `.show`作为显隐开关，一般供js使用
* `.invisible`设置元素不可见，占页面空间，不影响非正常用户阅读体验（搜索spider，屏幕阅读器）
* `clearfix`清除浮动
* `split`分隔符 <span class="split">|</span>

**/
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
  background-color: #ffffff;
}
/* =====超链===== */
a {
  color: #666;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #ff6600;
  text-decoration: underline;
}
/* =====字体===== */
.highlight,
a.highlight {
  color: #ff0000;
}
.gray,
a.gray {
  color: #999;
}
.blue,
a.blue {
  color: #0b73bb;
}
.yahei {
  font-family: "Microsoft YaHei", sans-serif;
}
.split {
  display: inline-block;
  padding: 0 5px;
  color: #e5e5e5;
}
/* =====浮动===== */
.fr {
  float: right;
}
.fl {
  float: left;
  display: inline;
}
/* =====文字隐藏===== */
.hide-txt {
  visibility: hidden;
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* =====开关===== */
.hide {
  display: none;
}
.show {
  display: block;
}
.invisible {
  visibility: hidden;
}
/* ===== 清除浮动 ===== */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
/**
----------------
##标签

<div class="code-demo">
<a href="#" class="ui-tag">标签内容</a>
</div>
    <a href="#" class="ui-tag">标签内容</a>

**/
.ui-tag {
  display: inline-block;
  padding: 2px 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  color: #333;
  text-align: center;
}
.ui-tag:hover {
  text-decoration: none;
  background-color: #FEF1D6;
  border-color: #FACEA0;
  color: #000;
}
/**
--------
列表
----------
###普通列表

具有list-style，ul具有边距

<div class="code-demo">
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Nulla volutpat aliquam velit
    <ul>
        <li>Phasellus iaculis neque</li>
        <li>Purus sodales ultricies</li>
        <li>Vestibulum laoreet porttitor sem</li>
        <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
</ul>
<ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>…</li>
<ol>
</div>
    <ul>
        <li>…</li>
    </ul>
    <ol>
        <li>…</li>
    <ol>
###无样式列表
使用`unstyled`移除了默认的list-style，只对直接子节点项有效。
<div class="code-demo">
<ul class="unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
        <li>Phasellus iaculis neque</li>
        <li>Purus sodales ultricies</li>
        <li>Vestibulum laoreet porttitor sem</li>
        <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
</div>
    <ul class="unstyled">
        <li>…</li>
    </ul>
    <dl class="unstyled">
        <dt>…</dt>
        <dd>…</dd>
    </dl>
### 行内列表
使用样式名`inline`，使列表水平展示
<div class="code-demo">
<ul class="inline">
    <li>Lorem ipsum</li>
    <li>Phasellus iaculis</li>
    <li>Nulla volutpat</li>
</ul>
</div>
    <ul class="inline">
        <li>…</li>
    </ul>
**/
/* ===== 列表 ===== */
ul.unstyled,
ol.unstyled {
  margin: 0;
  list-style: none;
}
dl.unstyled dt {
  font-weight: 400;
}
dl.unstyled dd {
  margin-left: 0;
}
ul.inline,
ol.inline {
  margin-left: 0;
  list-style: none;
}
ul.inline > li,
ol.inline > li {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  padding-left: 5px;
  padding-right: 5px;
}
/**
--------
布局
--------
`grid`采用1150px定宽居中布局，并清除浮动
###一栏
<div class="code-demo">
    <div class="grid" style="background:#dddddd;">
        <p>一栏布局</p>
        <p>宽度1150</p>
    </div>
</div>
    <div class="grid">
        …
    </div>

###两栏，主栏在右
侧栏240，内部结构采用负`margin`实现两栏灵活布局
<div class="code-demo">
    <div class="grid">
        <div class="main-wrap">
            <div class="main" style="background:#EBA5B6">
                <p>主栏</p>
            </div>
        </div>
        <div class="sidebar" style="background:teal;position:relative;top:0;">
            <p>侧栏240</p>
        </div>
    </div>
</div>
    <div class="grid">
        <div class="main-wrap">
            <div class="main">
                …
            </div>
        </div>
        <div class="sidebar">
                …
        </div>
    </div>
###两栏，主栏在左
利用`grid-inverse`，调整两栏显示顺序
<div class="code-demo">
    <div class="grid grid-inverse">
        <div class="main-wrap">
            <div class="main" style="background:#EBA5B6">
                <p>主栏</p>
            </div>
        </div>
        <div class="sidebar" style="background:teal;position:relative;top:0">
            <p>侧栏240</p>
        </div>
    </div>
</div>
    <div class="grid grid-inverse">
        <div class="main-wrap">
            <div class="main">
                <p>主栏</p>
            </div>
        </div>
        <div class="sidebar">
            <p>侧栏240</p>
        </div>
    </div>

**/
/* ===== 布局 ===== */
.grid {
  width: 1100px;
  margin: 0 auto;
  *zoom: 1;
}
.grid:before,
.grid:after {
  display: table;
  line-height: 0;
  content: "";
}
.grid:after {
  clear: both;
}
.grid .main-wrap,
.grid .sidebar {
  float: left;
}
/* 左面230px，右面适应 */
.grid .main-wrap {
  width: 100%;
}
.grid .main {
  min-height: 1px;
  margin-left: 245px;
}
.grid .sidebar {
  width: 230px;
  margin-left: -1100px;
}
/* 右面230px，左面适应 */
.grid-inverse .main {
  margin-left: 0;
  margin-right: 245px;
}
.grid-inverse .sidebar {
  margin-left: -230px;
}
/**
------------------------------------------
定义常用图标样式
----------------------

create by vvg

图标大小，颜色按照文字的标准设置

*  <i class="iconfont">&#xe81c;</i> 头像(会员中心用)  `<i class="iconfont">&#xe81c;</i>`

*  <i class="iconfont">&#xe825;</i> 实五星  `<i class="iconfont">&#xe825;</i>`
*  <i class="iconfont">&#xe826;</i> 空五星  `<i class="iconfont">&#xe826;</i>`
*  <i class="iconfont">&#xe81b;</i> 空五星(圆角)  `<i class="iconfont">&#xe81b;</i>`

*  <i class="iconfont">&#xe802;</i> 空心  `<i class="iconfont">&#xe802;</i>`
*  <i class="iconfont">&#xe801;</i> 实心  `<i class="iconfont">&#xe801;</i>`

*  <i class="iconfont">&#xe803;</i> 线框列表   `<i class="iconfont">&#xe803;</i>`
*  <i class="iconfont">&#xe82b;</i> 线框列表2   `<i class="iconfont">&#xe82b;</i>`
*  <i class="iconfont">&#xe815;</i> 叉叉  `<i class="iconfont">&#xe815;</i>`
*  <i class="iconfont">&#xe812;</i> 勾勾  `<i class="iconfont">&#xe812;</i>`
*  <i class="iconfont">&#xe81a;</i> 会话气泡  `<i class="iconfont">&#xe81a;</i>`
*  <i class="iconfont">&#xe809;</i> 搜索放大镜   `<i class="iconfont">&#xe809;</i>`
*  <i class="iconfont">&#xe81d;</i> 信封  `<i class="iconfont">&#xe81d;</i>`
*  <i class="iconfont">&#xe820;</i> 齿轮标志   `<i class="iconfont">&#xe820;</i>`
*  <i class="iconfont">&#xe827;</i> 手机图标   `<i class="iconfont">&#xe827;</i>`

*  <i class="iconfont">&#xe817;</i> 圆底问号  `<i class="iconfont">&#xe817;</i>`
*  <i class="iconfont">&#xe819;</i> 圆底叹号  `<i class="iconfont">&#xe819;</i>`
*  <i class="iconfont">&#xe81e;</i> 圆底+号  `<i class="iconfont">&#xe81e;</i>`
*  <i class="iconfont">&#xe828;</i> 加号  `<i class="iconfont">&#xe828;</i>`
*  <i class="iconfont">&#xe816;</i> 圆底叉叉   `<i class="iconfont">&#xe816;</i>`
*  <i class="iconfont">&#xe818;</i> 圆底i   `<i class="iconfont">&#xe818;</i>`
*  <i class="iconfont">&#xe81f;</i> 圆底减号  `<i class="iconfont">&#xe81f;</i>`
*  <i class="iconfont">&#xe814;</i> 圆底勾勾   `<i class="iconfont">&#xe814;</i>`
*  <i class="iconfont">&#xe821;</i> 圆底右箭头   `<i class="iconfont">&#xe821;</i>`



*  <i class="iconfont">&#xe808;</i> 刷新  `<i class="iconfont">&#xe808;</i>`

*  <i class="iconfont">&#xe806;</i> 下箭头   `<i class="iconfont">&#xe806;</i>`
*  <i class="iconfont">&#xe807;</i> 上箭头   `<i class="iconfont">&#xe807;</i>`
*  <i class="iconfont">&#xe80d;</i> 下箭头   `<i class="iconfont">&#xe80d;</i>`
*  <i class="iconfont">&#xe80c;</i> 上箭头   `<i class="iconfont">&#xe80c;</i>`
*  <i class="iconfont">&#xe829;</i> 右箭头2   `<i class="iconfont">&#xe829;</i>`
*  <i class="iconfont">&#xe82a;</i> 左箭头2   `<i class="iconfont">&#xe82a;</i>`
*  <i class="iconfont">&#xe822;</i> 下箭头2   `<i class="iconfont">&#xe822;</i>`
*  <i class="iconfont">&#xe823;</i> 上箭头2   `<i class="iconfont">&#xe823;</i>`
*  <i class="iconfont">&#xe805;</i> 右箭头2   `<i class="iconfont">&#xe805;</i>`
*  <i class="iconfont">&#xe804;</i> 左箭头2   `<i class="iconfont">&#xe804;</i>`
*  <i class="iconfont">&#xe800;</i> 地点标识   `<i class="iconfont">&#xe800;</i>`
*  <i class="iconfont">&#xe831;</i> 分享图标   `<i class="iconfont">&#xe831;</i>`

*  <i class="iconfont">&#xe80a;</i> 放大标识   `<i class="iconfont">&#xe80a;</i>`
*  <i class="iconfont">&#xe80b;</i> 缩小标识   `<i class="iconfont">&#xe80b;</i>`
*  <i class="iconfont">&#xe80e;</i> 赞   `<i class="iconfont">&#xe80e;</i>`
*  <i class="iconfont">&#xe80f;</i> 踩   `<i class="iconfont">&#xe80f;</i>`
*  <i class="iconfont">&#xe810;</i> 引号1   `<i class="iconfont">&#xe810;</i>`
*  <i class="iconfont">&#xe811;</i> 引号2   `<i class="iconfont">&#xe811;</i>`
*  <i class="iconfont">&#xe813;</i> 关闭   `<i class="iconfont">&#xe813;</i>`

*  <i class="iconfont">&#xe82c;</i> 铅笔   `<i class="iconfont">&#xe82c;</i>`
*  <i class="iconfont">&#xe82e;</i> 时钟   `<i class="iconfont">&#xe82e;</i>`
*  <i class="iconfont">&#xe82d;</i> 问号   `<i class="iconfont">&#xe82d;</i>`
*  <i class="iconfont">&#xe82f;</i> 反色勾勾带圈圈   `<i class="iconfont">&#xe82f;</i>`
*  <i class="iconfont">&#xe830;</i> 首页   `<i class="iconfont">&#xe830;</i>`
*  <i class="iconfont">&#xe832;</i> 喇叭   `<i class="iconfont">&#xe832;</i>`


**/
@font-face {
  font-family: 'fontello';
  src: url("../../lib/css/font/fontello.eot?20141027");
  src: url("../../lib/css/font/fontello.eot?20141027#iefix") format('embedded-opentype'), /* IE6-IE8 */ url("../../lib/css/font/fontello.woff?20141027") format('woff'), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */ url("../../lib/css/font/fontello.ttf?20141027") format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ url("../../lib/css/font/fontello.svg?20141027#fontello") format('svg');
  /* iOS 4.1- */
  font-weight: normal;
  font-style: normal;
}
.iconfont {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
/**
按钮组件库
=================
Created：**laotan** <span class="gray">（2013/07/24 15:06:26）</span>

Updated：**laotan** <span id="updateTime"></span>

 --------------------

<div class="code-demo">
<table class="ui-table ui-table-bordered ui-table-striped">
    <thead>
      <tr>
        <th>按钮</th>
        <th>class=""</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><button type="button" class="ui-btn">默认</button></td>
        <td><code>ui-btn</code></td>
        <td>标准灰色按钮</td>
      </tr>
      <tr>
        <td><button type="button" class="ui-btn ui-btn-hover">默认</button></td>
        <td><code>ui-btn ui-btn-hover</code></td>
        <td>标准灰色按钮-hover变色</td>
      </tr>
      <tr>
        <td><button type="button" class="ui-btn ui-btn-primary">主要</button></td>
        <td><code>ui-btn ui-btn-primary</code></td>
        <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
      </tr>
      <tr>
        <td><button type="button" class="ui-btn ui-btn-info">信息</button></td>
        <td><code>ui-btn ui-btn-info</code></td>
        <td>默认样式的替代样式</td>
      </tr>
      <tr>
        <td><button type="button" class="ui-btn ui-btn-inverse">反向</button></td>
        <td><code>ui-btn ui-btn-inverse</code></td>
        <td>备用的反色按钮，不依赖于语义和用途</td>
      </tr>
      <tr>
        <td><button type="button" class="ui-btn ui-btn-vip">会员专用</button></td>
        <td><code>ui-btn ui-btn-vip</code></td>
        <td>会员专用按钮，红色无边框</td>
      </tr>
      <tr>
        <td><button type="button" class="ui-btn ui-btn-link">链接</button></td>
        <td><code>ui-btn ui-btn-link</code></td>
        <td>简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为</td>
      </tr>
    </tbody>
</table>
</div>
    <button type="button" class="ui-btn">默认</button>
    <a class="ui-btn" href="#">默认</a>

**/
.ui-btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #ededed;
  border: 1px solid #d2d2d2;
  *border: 0;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn.active,
.ui-btn.disabled,
.ui-btn[disabled] {
  color: #333;
}
.ui-btn:first-child {
  *margin-left: 0;
}
.ui-btn:hover,
.ui-btn:focus {
  text-decoration: none;
  background-color: #efefef;
  background-image: -moz-linear-gradient(top, #f5f5f5, #e7e7e7);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #e7e7e7);
  background-image: -o-linear-gradient(top, #f5f5f5, #e7e7e7);
  background-image: linear-gradient(to bottom, #f5f5f5, #e7e7e7);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe7e7e7', GradientType=0);
}
.ui-btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ui-btn.active,
.ui-btn:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
/**
### 按钮大小
添加`.ui-btn-large`、`.ui-btn-small` 或 `.ui-btn-mini`即可改变按钮大小。
<div class="code-demo">
<p>
      <button class="ui-btn ui-btn-large ui-btn-primary" type="button">Large button</button>
      <button class="ui-btn ui-btn-large" type="button">Large button</button>
    </p>
    <p>
      <button class="ui-btn ui-btn-primary" type="button">Default button</button>
      <button class="ui-btn" type="button">Default button</button>
    </p>
    <p>
      <button class="ui-btn ui-btn-small ui-btn-primary" type="button">Small button</button>
      <button class="ui-btn ui-btn-small" type="button">Small button</button>
    </p>
    <p>
      <button class="ui-btn ui-btn-mini ui-btn-primary" type="button">Mini button</button>
      <button class="ui-btn ui-btn-mini" type="button">Mini button</button>
    </p>
</div>
    <p>
      <button class="ui-btn ui-btn-large ui-btn-primary" type="button">Large button</button>
      <button class="ui-btn ui-btn-large" type="button">Large button</button>
    </p>
    <p>
      <button class="ui-btn ui-btn-primary" type="button">Default button</button>
      <button class="ui-btn" type="button">Default button</button>
    </p>
    <p>
      <button class="ui-btn ui-btn-small ui-btn-primary" type="button">Small button</button>
      <button class="ui-btn ui-btn-small" type="button">Small button</button>
    </p>
    <p>
      <button class="ui-btn ui-btn-mini ui-btn-primary" type="button">Mini button</button>
      <button class="ui-btn ui-btn-mini" type="button">Mini button</button>
    </p>

**/
.ui-btn-large {
  padding: 11px 19px;
  font-size: 17.5px;
}
.ui-btn-large [class^="icon"],
.ui-btn-large [class*=" icon"] {
  margin-top: 4px;
}
.ui-btn-small {
  padding: 2px 10px;
  font-size: 12px;
}
.ui-btn-small [class^="icon"],
.ui-btn-small [class*=" icon"] {
  margin-top: 0;
}
.ui-btn-mini [class^="icon"],
.ui-btn-mini [class*=" icon"] {
  margin-top: -1px;
}
.ui-btn-mini {
  padding: 0 6px;
  font-size: 12px;
}
/**
### 块级按钮
通过添加`.ui-btn-block`类，可使按钮变为块级元素，同时会填充整个父级元素。
<div class="code-demo">
    <button class="ui-btn ui-btn-large ui-btn-block ui-btn-primary" type="button">Block level button</button>
    <button class="ui-btn ui-btn-large ui-btn-block" type="button">Block level button</button>
</div>
    <button class="ui-btn ui-btn-large ui-btn-block ui-btn-primary" type="button">Block level button</button>
    <button class="ui-btn ui-btn-large ui-btn-block" type="button">Block level button</button>

**/
.ui-btn-block {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}
.ui-btn-block + .ui-btn-block {
  margin-top: 5px;
}
input[type="submit"].ui-btn-block,
input[type="reset"].ui-btn-block,
input[type="button"].ui-btn-block {
  width: 100%;
}
.ui-btn-primary {
  color: #ffffff;
  background-color: #72ab15;
  border-color: #5b9807;
}
.ui-btn-primary:hover,
.ui-btn-primary:focus,
.ui-btn-primary:active,
.ui-btn-primary.active {
  color: #ffffff;
}
.ui-btn-primary:hover,
.ui-btn-primary:focus {
  background-color: #77ad26;
  background-image: -moz-linear-gradient(top, #8abb3a, #5b9807);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8abb3a), to(#5b9807));
  background-image: -webkit-linear-gradient(top, #8abb3a, #5b9807);
  background-image: -o-linear-gradient(top, #8abb3a, #5b9807);
  background-image: linear-gradient(to bottom, #8abb3a, #5b9807);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8abb3a', endColorstr='#ff5b9807', GradientType=0);
}
.ui-btn-hover:hover,
.ui-btn-hover.active,
.ui-btn-hover:active {
  color: #ffffff;
  border-color: #ea7f00;
  background-color: #ff8a00;
}
.ui-btn-info {
  color: #333;
  background-color: #ffeabd;
  border-color: #facea0;
}
.ui-btn-info:hover,
.ui-btn-info:focus,
.ui-btn-info:active,
.ui-btn-info.active {
  color: #ffffff;
  border-color: #ea7f00;
}
.ui-btn-info:hover,
.ui-btn-info:focus,
.ui-btn-info.active,
.ui-btn-info:active {
  background-color: #ff8a00;
}
.ui-btn-inverse {
  color: #ffffff;
  background-color: #ff8a00;
  border-color: #ea7f00;
}
.ui-btn-inverse:hover,
.ui-btn-inverse:focus,
.ui-btn-inverse:active,
.ui-btn-inverse.active {
  color: #ffffff;
}
.ui-btn-hover:hover,
.ui-btn-info:hover,
.ui-btn-info:focus,
.ui-btn-inverse:hover,
.ui-btn-inverse:focus {
  background-color: #fc9529;
  background-image: -moz-linear-gradient(top, #fa9e3a, #ff870f);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fa9e3a), to(#ff870f));
  background-image: -webkit-linear-gradient(top, #fa9e3a, #ff870f);
  background-image: -o-linear-gradient(top, #fa9e3a, #ff870f);
  background-image: linear-gradient(to bottom, #fa9e3a, #ff870f);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffa9e3a', endColorstr='#ffff870f', GradientType=0);
}
.ui-btn-vip {
  color: #ffffff;
  background-color: #c91a00;
  border: none;
  border-radius: 0;
}
.ui-btn-vip:hover,
.ui-btn-vip:focus,
.ui-btn-vip:active,
.ui-btn-vip.active {
  color: #ffffff;
}
.ui-btn-vip:hover,
.ui-btn-vip:focus {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-color: #c91a00;
}
button.ui-btn,
input[type="submit"].ui-btn {
  *padding-top: 3px;
  *padding-bottom: 3px;
}
button.ui-btn::-moz-focus-inner,
input[type="submit"].ui-btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button.ui-btn.ui-btn-large,
input[type="submit"].ui-btn.ui-btn-large {
  *padding-top: 7px;
  *padding-bottom: 7px;
}
button.ui-btn.ui-btn-small,
input[type="submit"].ui-btn.ui-btn-small {
  *padding-top: 3px;
  *padding-bottom: 3px;
}
button.ui-btn.ui-btn-mini,
input[type="submit"].ui-btn.ui-btn-mini {
  *padding-top: 1px;
  *padding-bottom: 1px;
}
.ui-btn-link,
.ui-btn-link:active,
.ui-btn-link[disabled] {
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.ui-btn-link {
  color: #0088cc;
  cursor: pointer;
  border-color: transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.ui-btn-link:hover,
.ui-btn-link:focus {
  color: #005580;
  text-decoration: underline;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.ui-btn-link[disabled]:hover,
.ui-btn-link[disabled]:focus {
  color: #333333;
  text-decoration: none;
}
/**
### 禁用按钮
给a元素添加`.disabled`类，给button元素添加`disabled`属性，让按钮看起来无法点击

<div class="code-demo">
    <a href="#" class="ui-btn ui-btn-large disabled">Link</a> <br> <br>
    <button type="button" class="ui-btn ui-btn-large" disabled>Button</button>
</div>
    <a href="#" class="ui-btn ui-btn-large disabled">Link</a>
    <button type="button" class="ui-btn ui-btn-large" disabled>Button</button>
**/
.ui-btn.disabled,
.ui-btn[disabled] {
  cursor: default;
  background-color: #828282;
  border: 1px solid #777;
  color: #fff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.ui-btn.disabled:hover,
.ui-btn[disabled]:hover,
.ui-btn.disabled:focus,
.ui-btn[disabled]:focus,
.ui-btn.disabled.active,
.ui-btn[disabled].active,
.ui-btn.disabled:active,
.ui-btn[disabled]:active {
  color: #fff;
  background-image: none;
  background-color: #828282;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
/**
表单组件
============
Created：**laotan** <span class="gray">（2013/08/16 14:29:53）</span>

Updated：**laotan** <span id="updateTime"></span>

----------------------
##默认表单
<div class="code-demo">
<form>
    <fieldset>
        <legend>Legend</legend>
        <label>Label name</label>
        <input type="text" placeholder="Type something…">
        <span class="help-block">Example block-level help text here.</span>
        <label class="checkbox">
            <input type="checkbox"> Check me out
        </label>
        <button type="submit" class="ui-btn">Submit</button>
    </fieldset>
</form>
</div>
    <form>
        <fieldset>
            <legend>Legend</legend>
            <label>Label name</label>
            <input type="text" placeholder="Type something…">
            <span class="help-block">Example block-level help text here.</span>
            <label class="checkbox">
                <input type="checkbox"> Check me out
            </label>
            <button type="submit" class="ui-btn">Submit</button>
        </fieldset>
    </form>

******

##行内表单

每一行增加`ui-form-line`类

<div class="code-demo">
<form>
    <div class="ui-form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
        <label class="checkbox">
            <input type="checkbox"> Remember me
        </label>
        <button type="submit" class="ui-btn">Sign in</button>
    </div>
</form>
</div>
    <form>
        <div class="ui-form-inline">
            <input type="text" class="input-small" placeholder="Email">
            <input type="password" class="input-small" placeholder="Password">
            <label class="checkbox">
                <input type="checkbox"> Remember me
            </label>
            <button type="submit" class="ui-btn">Sign in</button>
        </div>
    </form>

******

##水平表单

* 为表单添加`.ui-form-horizontal`类
* 将label和控件包裹在`.control-group`中
* 为label添加`.control-label`类
* 将任何相关的控件包裹在`.controls`中，以确保最佳的对齐

<div class="code-demo">
<form class="ui-form-horizontal">
    <div class="control-group">
      <label class="control-label" for="inputEmail">Email</label>
      <div class="controls">
        <input type="text" id="inputEmail" placeholder="Email">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="inputPassword">Password</label>
      <div class="controls">
        <input type="password" id="inputPassword" placeholder="Password">
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <label class="checkbox">
          <input type="checkbox"> Remember me
        </label>
        <button type="submit" class="ui-btn">Sign in</button>
      </div>
    </div>
</form>
</div>
    <form class="ui-form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputPassword">Password</label>
        <div class="controls">
          <input type="password" id="inputPassword" placeholder="Password">
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <label class="checkbox">
            <input type="checkbox"> Remember me
          </label>
          <button type="submit" class="ui-btn">Sign in</button>
        </div>
      </div>
    </form>
**/
form {
  margin: 0 0 20px;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: 40px;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}
legend small {
  font-size: 15px;
  color: #999;
}
label,
input,
button,
select,
textarea {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
}
input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
  display: block;
  margin-bottom: 5px;
}
/**
******

##表单控件

###输入框
大部分常用的表单控件、文本输入控件。包括所有HTML5所支持的：text、password、datetime、 datetime-local、date、 month、time、week、number、email、url、search、tel 和 color。

任何时候都需要指定`type`属性。
<div class="code-demo">
    <input type="text" placeholder="Text input">
</div>
    <input type="text" placeholder="Text input">
**/
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: inline-block;
  height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
  vertical-align: middle;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
/**
###文本域
大部分常用的表单控件、文本输入控件。包括所有HTML5所支持的：text、password、datetime、 datetime-local、date、 month、time、week、number、email、url、search、tel 和 color。

任何时候都需要指定`type`属性。
<div class="code-demo">
    <textarea rows="3"></textarea>
</div>
    <textarea rows="3"></textarea>
**/
input,
textarea,
.uneditable-input {
  width: 206px;
}
textarea {
  height: auto;
}
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  *margin-top: 0;
  line-height: normal;
}
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto;
}
select,
input[type="file"] {
  height: 30px;
  /* In IE7, the height of the select element cannot be changed by height, only font-size */
  *margin-top: 4px;
  /* For IE7, add top margin to align select with labels */
  line-height: 30px;
}
select {
  width: 220px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
select[multiple],
select[size] {
  height: auto;
}
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
/**
###不可操作的输入框
添加`.uneditable-input`类，呈现不可编辑的数据，无需使用实际的表单控件

给输入框添加`disable`属性可阻止用户输入
<div class="code-demo">
    <span class="input-xlarge uneditable-input">Some value here</span> <br>
    <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>
    <span class="input-xlarge uneditable-input">Some value here</span>
    <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
**/
.uneditable-input {
  color: #999999;
  cursor: not-allowed;
  background-color: #fcfcfc;
  border-color: #cccccc;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
}
.uneditable-input {
  overflow: hidden;
  white-space: nowrap;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
}
/**
###单选复选框
为复选框或单选框控件添加`.inline`类，使他们排列在同一行

<div class="code-demo">
    <label class="radio">
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that—be sure to include why it's great
    </label>
    <label class="checkbox inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
    <label class="checkbox inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    </label>
</div>
    <label class="radio">
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that—be sure to include why it's great
    </label>
    <label class="checkbox inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
    <label class="checkbox inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    </label>
**/
.radio,
.checkbox {
  min-height: 20px;
  padding-left: 20px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -20px;
}
.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 5px;
}
.radio.inline,
.checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px;
}
/**
###块级输入框
用`.input-block-level`让任何`<input>`或`<textarea>`元素表现为一个块级元素。

<div class="code-demo">
    <input class="input-block-level" type="text" placeholder=".input-block-level">
</div>
    <input class="input-block-level" type="text" placeholder=".input-block-level">

###相对大小

<div class="code-demo">
    <input class="input-mini" type="text" placeholder=".input-mini"><br>
    <input class="input-small" type="text" placeholder=".input-small"><br>
    <input class="input-medium" type="text" placeholder=".input-medium"><br>
    <input class="input-large" type="text" placeholder=".input-large"><br>
    <input class="input-xlarge" type="text" placeholder=".input-xlarge"><br>
    <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
</div>
    <input class="input-mini" type="text" placeholder=".input-mini">
    <input class="input-small" type="text" placeholder=".input-small">
    <input class="input-medium" type="text" placeholder=".input-medium">
    <input class="input-large" type="text" placeholder=".input-large">
    <input class="input-xlarge" type="text" placeholder=".input-xlarge">
    <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
**/
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.input-mini {
  width: 60px;
}
.input-small {
  width: 90px;
}
.input-medium {
  width: 150px;
}
.input-large {
  width: 210px;
}
.input-xlarge {
  width: 270px;
}
.input-xxlarge {
  width: 530px;
}
input,
textarea,
.uneditable-input {
  margin-left: 0;
}
.controls-row {
  *zoom: 1;
}
.controls-row:before,
.controls-row:after {
  display: table;
  line-height: 0;
  content: "";
}
.controls-row:after {
  clear: both;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  cursor: not-allowed;
  background-color: #eeeeee;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
  background-color: transparent;
}
/**
###无效输入
为输入框设置`:invalid`样式从而激发浏览器默认功能。如果输入框是必填的，可以指定一个`type`和`required`属性，（如果合适的话）甚至还可以指定`pattern`属性。

由于Internet Explorer 7-9不支持此伪类，因此不能在这些浏览器中使用。
<div class="code-demo">
    <input type="email" placeholder="test@example.com" required="">
</div>
    <input type="email" required>

###帮助文本

<div class="code-demo">
    <input type="text"><span class="help-inline">Inline help text</span> <br>
    <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
    <input type="text"><span class="help-inline">Inline help text</span>
    <input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

###验证状态
包含了（错误）`error`、（警告）`warning`、（通知）`info`和（成功）`success`信息的样式。为.control-group添加适当的属性即可使用这些样式。
<div class="code-demo">
    <form class="ui-form-horizontal">
        <div class="control-group warning">
          <label class="control-label" for="inputWarning">Input with warning</label>
          <div class="controls">
            <input type="text" id="inputWarning">
            <span class="help-inline">Something may have gone wrong</span>
          </div>
        </div>
        <div class="control-group error">
          <label class="control-label" for="inputError">Input with error</label>
          <div class="controls">
            <input type="text" id="inputError">
            <span class="help-inline">Please correct the error</span>
          </div>
        </div>
        <div class="control-group info">
          <label class="control-label" for="inputInfo">Input with info</label>
          <div class="controls">
            <input type="text" id="inputInfo">
            <span class="help-inline">Username is taken</span>
          </div>
        </div>
        <div class="control-group success">
          <label class="control-label" for="inputSuccess">Input with success</label>
          <div class="controls">
            <input type="text" id="inputSuccess">
            <span class="help-inline">Woohoo!</span>
          </div>
        </div>
    </form>
</div>
    <form class="ui-form-horizontal">
        <div class="control-group warning">
          <label class="control-label" for="inputWarning">Input with warning</label>
          <div class="controls">
            <input type="text" id="inputWarning">
            <span class="help-inline">Something may have gone wrong</span>
          </div>
        </div>
        <div class="control-group error">
          <label class="control-label" for="inputError">Input with error</label>
          <div class="controls">
            <input type="text" id="inputError">
            <span class="help-inline">Please correct the error</span>
          </div>
        </div>
        <div class="control-group info">
          <label class="control-label" for="inputInfo">Input with info</label>
          <div class="controls">
            <input type="text" id="inputInfo">
            <span class="help-inline">Username is taken</span>
          </div>
        </div>
        <div class="control-group success">
          <label class="control-label" for="inputSuccess">Input with success</label>
          <div class="controls">
            <input type="text" id="inputSuccess">
            <span class="help-inline">Woohoo!</span>
          </div>
        </div>
    </form>
**/
.control-group.warning .control-label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
  color: #c09853;
}
.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  color: #c09853;
}
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  border-color: #c09853;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
  border-color: #a47e3c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #c09853;
}
.control-group.error .control-label,
.control-group.error .help-block,
.control-group.error .help-inline {
  color: #b94a48;
}
.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  color: #b94a48;
}
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  border-color: #b94a48;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
  border-color: #953b39;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #b94a48;
}
.control-group.success .control-label,
.control-group.success .help-block,
.control-group.success .help-inline {
  color: #468847;
}
.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  color: #468847;
}
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  border-color: #468847;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
  border-color: #356635;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
  color: #468847;
  background-color: #dff0d8;
  border-color: #468847;
}
.control-group.info .control-label,
.control-group.info .help-block,
.control-group.info .help-inline {
  color: #3a87ad;
}
.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  color: #3a87ad;
}
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  border-color: #3a87ad;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
  border-color: #2d6987;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}
.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #3a87ad;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}
/**
###表单行为
将一组行为(按钮)放在表单尾部。当他们放置在`.ui-form-actions`中时，这些按钮将会自动缩进，和其它表单控件对齐。
<div class="code-demo">
    <div class="ui-form-actions">
      <button type="submit" class="ui-btn">Save changes</button>
    </div>
</div>
    <div class="ui-form-actions">
      <button type="submit" class="ui-btn">Save changes</button>
    </div>
**/
.ui-form-actions {
  padding: 19px 20px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;
  *zoom: 1;
}
.ui-form-actions:before,
.ui-form-actions:after {
  display: table;
  line-height: 0;
  content: "";
}
.ui-form-actions:after {
  clear: both;
}
.help-block,
.help-inline {
  color: #595959;
}
.help-block {
  display: block;
  margin-bottom: 10px;
}
.help-inline {
  display: inline-block;
  padding-left: 5px;
  vertical-align: middle;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
}
/**
###前缀和附加输入框
将.add-on和input进行组合，可以将文本放倒输入框前或后面。
<div class="code-demo">
    <div class="input-prepend">
      <span class="add-on">@</span>
      <input id="prependedInput" type="text" placeholder="Username">
    </div> <br>
    <div class="input-append">
      <input id="appendedInput" type="text">
      <span class="add-on">.00</span>
    </div><br>
    <div class="input-prepend input-append">
      <span class="add-on">$</span>
      <input id="appendedPrependedInput" type="text">
      <span class="add-on">.00</span>
    </div><br>
    <div class="input-append">
      <input id="appendedInputButton" type="text">
      <button class="ui-btn" type="button">Go!</button>
    </div>
</div>
    <div class="input-prepend">
      <span class="add-on">@</span>
      <input id="prependedInput" type="text" placeholder="Username">
    </div>
    <div class="input-append">
      <input id="appendedInput" type="text">
      <span class="add-on">.00</span>
    </div>
    <div class="input-prepend input-append">
      <span class="add-on">$</span>
      <input id="appendedPrependedInput" type="text">
      <span class="add-on">.00</span>
    </div>
    <div class="input-append">
      <input id="appendedInputButton" type="text">
      <button class="ui-btn" type="button">Go!</button>
    </div>
**/
.input-append,
.input-prepend {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0;
  white-space: nowrap;
  vertical-align: middle;
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input,
.input-append .dropdown-menu,
.input-prepend .dropdown-menu,
.input-append .popover,
.input-prepend .popover {
  font-size: 14px;
}
.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
  position: relative;
  margin-bottom: 0;
  *margin-left: 0;
  vertical-align: top;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.input-append input:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
  z-index: 2;
}
.input-append .add-on,
.input-prepend .add-on {
  display: inline-block;
  width: auto;
  height: 20px;
  min-width: 16px;
  padding: 4px 5px;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #ffffff;
  background-color: #eeeeee;
  border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on,
.input-append .ui-btn,
.input-prepend .ui-btn,
.input-append .ui-btn-group > .dropdown-toggle,
.input-prepend .ui-btn-group > .dropdown-toggle {
  vertical-align: top;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.input-append .active,
.input-prepend .active {
  background-color: #a9dba9;
  border-color: #46a546;
}
.input-prepend .add-on,
.input-prepend .ui-btn {
  margin-right: -1px;
}
.input-prepend .add-on:first-child,
.input-prepend .ui-btn:first-child,
.input-append input,
.input-append select,
.input-append .uneditable-input {
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}
.input-append input + .ui-btn-group .ui-btn:last-child,
.input-append select + .ui-btn-group .ui-btn:last-child,
.input-append .uneditable-input + .ui-btn-group .ui-btn:last-child {
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.input-append .add-on,
.input-append .ui-btn,
.input-append .ui-btn-group {
  margin-left: -1px;
}
.input-append .add-on:last-child,
.input-append .ui-btn:last-child,
.input-append .ui-btn-group:last-child > .dropdown-toggle {
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.input-prepend.input-append input + .ui-btn-group .ui-btn,
.input-prepend.input-append select + .ui-btn-group .ui-btn,
.input-prepend.input-append .uneditable-input + .ui-btn-group .ui-btn {
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .ui-btn:first-child {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .ui-btn:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
}
.input-prepend.input-append .ui-btn-group:first-child {
  margin-left: 0;
}
.ui-form-inline input,
.ui-form-horizontal input,
.ui-form-inline textarea,
.ui-form-horizontal textarea,
.ui-form-inline select,
.ui-form-horizontal select,
.ui-form-inline .help-inline,
.ui-form-horizontal .help-inline,
.ui-form-inline .uneditable-input,
.ui-form-horizontal .uneditable-input,
.ui-form-inline .input-prepend,
.ui-form-horizontal .input-prepend,
.ui-form-inline .input-append,
.ui-form-horizontal .input-append {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
}
.ui-form-horizontal .hide {
  display: none;
}
.ui-form-inline label,
.ui-form-inline .ui-btn-group {
  display: inline-block;
}
.ui-form-inline .input-append,
.ui-form-inline .input-prepend {
  margin-bottom: 0;
}
.ui-form-inline .radio,
.ui-form-inline .checkbox {
  padding-left: 0;
  margin-bottom: 0;
  vertical-align: middle;
}
.ui-form-inline .radio input[type="radio"],
.ui-form-inline .checkbox input[type="checkbox"] {
  float: left;
  margin-right: 3px;
  margin-left: 0;
}
.control-group {
  margin-bottom: 10px;
}
legend + .control-group {
  margin-top: 20px;
  -webkit-margin-top-collapse: separate;
}
.ui-form-horizontal .control-group {
  margin-bottom: 20px;
  *zoom: 1;
}
.ui-form-horizontal .control-group:before,
.ui-form-horizontal .control-group:after {
  display: table;
  line-height: 0;
  content: "";
}
.ui-form-horizontal .control-group:after {
  clear: both;
}
.ui-form-horizontal .control-label {
  float: left;
  width: 160px;
  padding-top: 5px;
  text-align: right;
}
.ui-form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 180px;
  *margin-left: 0;
}
.ui-form-horizontal .controls:first-child {
  *padding-left: 180px;
}
.ui-form-horizontal .help-block {
  margin-bottom: 0;
}
.ui-form-horizontal input + .help-block,
.ui-form-horizontal select + .help-block,
.ui-form-horizontal textarea + .help-block,
.ui-form-horizontal .uneditable-input + .help-block,
.ui-form-horizontal .input-prepend + .help-block,
.ui-form-horizontal .input-append + .help-block {
  margin-top: 10px;
}
.ui-form-horizontal .ui-form-actions {
  padding-left: 180px;
}
/**
******

##搜索框

指定`ui-form-search`属性。
<div class="code-demo">
    <form action="#" class="ui-form-search">
        <div class="input-append">
            <input type="text" class="search-query" placeholder="找高手"><button type="submit" class="ui-btn ui-btn-inverse"> <i class="iconfont">&#xe809;</i> </button>
        </div>
    </form>
</div>
    <form action="#" class="ui-form-search">
        <div class="input-append">
            <input type="text" class="search-query" placeholder="找高手"><button type="submit" class="ui-btn ui-btn-inverse"> <i class="iconfont">&#xe809;</i> </button>
        </div>
    </form>
**/
.ui-form-search {
  margin-bottom: 0;
}
.ui-form-search .search-query {
  width: 420px;
  border-radius: 0;
}
.ui-form-search .input-append .ui-btn-inverse {
  position: relative;
  z-index: 1;
  padding: 4px 14px;
  border-radius: 0;
  border-color: #ff933b;
}
/**
******

##搜索框-mini

指定`ui-form-minisearch`属性。
<div class="code-demo">
    <form action="#" class="ui-form-minisearch">
            <input type="text" class="search-query" placeholder="请输入关键字"><button type="submit" class="ui-btn ui-btn-link"> <i class="iconfont">&#xe809;</i> </button>
    </form>
</div>
    <form action="#" class="ui-form-minisearch">
            <input type="text" class="search-query" placeholder="请输入关键字"><button type="submit" class="ui-btn ui-btn-link"><i class="iconfont">&#xe809;</i></button>
    </form>
**/
.ui-form-minisearch {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  margin-bottom: 0;
}
.ui-form-minisearch .search-query {
  width: 110px;
  font-size: 12px;
  padding-right: 40px;
  border-radius: 0;
  margin-bottom: 0;
}
.ui-form-minisearch .ui-btn-link {
  margin-left: -40px;
  color: #bebebe;
}
.ui-form-minisearch .ui-btn-link:hover,
.ui-form-minisearch .ui-btn-link:focus {
  color: #ff6600;
  text-decoration: none;
}
/**
表格组件
============
Created：**laotan** <span class="gray">（2013/07/24 15:06:26）</span>

Updated：**laotan** <span id="updateTime"></span>

----------------------
##默认表格
<div class="code-demo">
    <table class="ui-table">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
    </table>
</div>
    <table class="ui-table">
        <tr>
            <th>#</th>
        </tr>
        <tr>
            <td>…</td>
        </tr>
    </table>
**/
table {
  max-width: 100%;
  background-color: transparent;
}
.ui-table {
  width: 100%;
  margin-bottom: 20px;
  border-bottom: 1px solid #dddddd;
}
.ui-table th,
.ui-table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}
.ui-table th {
  font-weight: bold;
}
.ui-table tbody + tbody {
  border-top: 2px solid #dddddd;
}
.ui-table .ui-table {
  background-color: #ffffff;
}
/**
----------------------
##紧凑表格
<div class="code-demo">
<table class="ui-table ui-table-condensed">
    <tr>
        <th>#</th>
        <th>Product</th>
        <th>Payment Taken</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    </table>
</div>
    <table class="ui-table ui-table-condensed">
        <tr>
            <th>#</th>
        </tr>
        <tr>
            <td>…</td>
        </tr>
    </table>
**/
.ui-table-condensed th,
.ui-table-condensed td {
  padding: 4px 5px;
}
/**
----------------------
##表格带边框
<div class="code-demo">
<table class="ui-table ui-table-bordered">
<tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
    </table>
</div>
    <table class="ui-table ui-table-bordered">
        <tr>
            <th>#</th>
        </tr>
        <tr>
            <td>…</td>
        </tr>
    </table>
**/
.ui-table-bordered {
  border: solid #dddddd;
  border-width: 0 1px 1px 0;
}
.ui-table-bordered th,
.ui-table-bordered td {
  border-left: 1px solid #dddddd;
}
/**
----------------------
##表格隔行变色

不支持IE6、7、8，考虑js实现

<div class="code-demo">
<table class="ui-table ui-table-striped">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    </tbody>
</table>
</div>
    <table class="ui-table ui-table-striped">
        <thead>
        <tr>
            <th>…</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>…</td>
        </tr>
        </tbody>
    </table>
**/
.ui-table-striped tbody > tr:nth-child(odd) > td,
.ui-table-striped tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}
/**
----------------------
##表格鼠标滑过变色

<div class="code-demo">
<table class="ui-table ui-table-hover">
    <thead>
    <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    </tbody>
</table>
</div>
    <table class="ui-table ui-table-hover">
        <thead>
        <tr>
            <th>…</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>…</td>
        </tr>
        </tbody>
    </table>
**/
.ui-table-hover tbody tr:hover > td,
.ui-table-hover tbody tr:hover > th {
  background-color: #f5f5f5;
}
/**
----------------------
##表格不同状态

<div class="code-demo">
<table class="ui-table">
    <thead>
    <tr>
        <th>#</th>
        <th>Product</th>
        <th>Payment Taken</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
    <tr class="success">
        <td>success</td>
        <td>TB - Monthly</td>
        <td>01/04/2012</td>
        <td>Approved</td>
    </tr>
    <tr class="error">
        <td>error</td>
        <td>TB - Monthly</td>
        <td>02/04/2012</td>
        <td>Declined</td>
    </tr>
    <tr class="warning">
        <td>warning</td>
        <td>TB - Monthly</td>
        <td>03/04/2012</td>
        <td>Pending</td>
    </tr>
    <tr class="info">
        <td>info</td>
        <td>TB - Monthly</td>
        <td>04/04/2012</td>
        <td>Call in to confirm</td>
    </tr>
    </tbody>
</table>
</div>
    <table class="ui-table">
        <thead>
        <tr> … </tr>
        </thead>
        <tbody>
        <tr class="success"> … </tr>
        <tr class="error"> … </tr>
        <tr class="warning"> … </tr>
        <tr class="info"> … </tr>
        </tbody>
    </table>
**/
.ui-table tr.success > td {
  background-color: #dff0d8;
}
.ui-table tr.error > td {
  background-color: #f2dede;
}
.ui-table tr.warning > td {
  background-color: #fcf8e3;
}
.ui-table tr.info > td {
  background-color: #d9edf7;
}
.ui-table-hover tr.success:hover > td {
  background-color: #d0e9c6;
}
.ui-table-hover tr.error:hover > td {
  background-color: #ebcccc;
}
.ui-table-hover tr.warning:hover > td {
  background-color: #faf2cc;
}
.ui-table-hover tr.info:hover > td {
  background-color: #c4e3f3;
}
/**
猪八戒常用图标
=================
Created：**laotan** <span class="gray">（2013/07/26 18:46:16）</span>

Updated：**laotan** <span id="updateTime"></span>

--------------------


<div class="code-demo">
<table class="ui-table ui-table-bordered ui-table-striped">
    <thead>
      <tr>
        <th>图标</th>
        <th>class=""</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
**/
.ui-ico {
  display: inline-block;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../../lib/img/global.png?2014");
  background-repeat: no-repeat;
}
.ui-ico-sohu,
.ui-ico-sina,
.ui-ico-qq,
.ui-ico-zhubajie,
.ui-ico-wechat {
  width: 16px;
  height: 16px;
  background-position: -98px 0;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-sina"></i></td>
    <td><code>ui-ico ui-ico-sina</code></td>
    <td>sina 微博 图标</td>
</tr>
**/
.ui-ico-sohu {
  background-position: -98px -22px;
}
.ui-ico-sina {
  background-position: -116px -22px;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-qq"></i></td>
    <td><code>ui-ico ui-ico-qq</code></td>
    <td>腾讯微博 图标</td>
</tr>
<tr>
    <td><i class="ui-ico ui-ico-sohu"></i></td>
    <td><code>ui-ico ui-ico-sohu</code></td>
    <td>搜狐微博 图标</td>
</tr>
**/
.ui-ico-qq {
  background-position: -134px -22px;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-zhubajie"></i></td>
    <td><code>ui-ico ui-ico-zhubajie</code></td>
    <td>猪八戒 图标</td>
</tr>
**/
.ui-ico-zhubajie {
  background-position: -117px 0;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-wechat"></i></td>
    <td><code>ui-ico ui-ico-wechat</code></td>
    <td>微信 图标</td>
</tr>
**/
.ui-ico-wechat {
  background-position: -134px 0;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-paypal"></i></td>
    <td><code>ui-ico ui-ico-paypal</code></td>
    <td>paypal 图标</td>
</tr>**/
.ui-ico-paypal {
  width: 18px;
  height: 18px;
  background-position: -98px 0;
  vertical-align: middle;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-rmb-large"></i></td>
    <td><code>ui-ico ui-ico-rmb-large</code></td>
    <td>担保交易 图标</td>
</tr>
**/
.ui-ico-rmb-large {
  width: 48px;
  height: 41px;
  background-position: -98px -40px;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-bao-large"></i></td>
    <td><code>ui-ico ui-ico-bao-large</code></td>
    <td>消费者保障 图标</td>
</tr>
**/
.ui-ico-bao-large {
  width: 36px;
  height: 40px;
  background-position: -148px -40px;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-yan-large"></i></td>
    <td><code>ui-ico ui-ico-yan-large</code></td>
    <td>威客认证 图标</td>
</tr>
**/
.ui-ico-yan-large {
  width: 37px;
  height: 38px;
  background-position: -186px -40px;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-feed"></i></td>
    <td><code>ui-ico ui-ico-feed</code></td>
    <td>反馈 图标</td>
</tr>
**/
.ui-ico-feed {
  width: 30px;
  height: 30px;
  background-position: -153px -3px;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-mobile"></i></td>
    <td><code>ui-ico ui-ico-mobile</code></td>
    <td>工具栏mobile 图标</td>
</tr>
**/
.ui-ico-mobile {
  width: 30px;
  height: 30px;
  background-position: -175px -2px;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-cs"></i></td>
    <td><code>ui-ico ui-ico-cs</code></td>
    <td>客服反馈（Customer Service） 图标</td>
</tr>
**/
.ui-ico-cs {
  width: 80px;
  height: 140px;
  background-position: 0 0;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-cs-h"></i></td>
    <td><code>ui-ico ui-ico-cs-h</code></td>
    <td>客服反馈（Customer Service） 图标 -横版</td>
</tr>
**/
.ui-ico-cs-h {
  width: 136px;
  height: 32px;
  background-position: 0 -198px;
}
.ui-ico-witkey .ui-ico-cs {
  background: url(http://t5.zbjimg.com/r/cover/gw1.png) no-repeat left center;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-toppig"></i></td>
    <td><code>ui-ico ui-ico-toppig</code></td>
    <td>飞天小猪</td>
</tr>
**/
.ui-ico-toppig {
  width: 56px;
  height: 103px;
  background-position: -89px -93px;
}
/**
<tr>
    <td><i class="ui-ico ui-ico-hotleft">hot</i></td>
    <td><code>ui-ico ui-ico-hotleft</code></td>
    <td>hot图标箭头向左</td>
</tr>
**/
.ui-ico-hotleft {
  background-image: none;
  padding: 1px 5px;
  background-color: #ff0000;
  color: #fff;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  margin-left: 5px;
  font-style: normal;
}
.ui-ico-hotleft:before {
  content: "";
  display: block;
  position: absolute;
  margin-top: 4px;
  margin-left: -11px;
  width: 0;
  height: 0;
  border: 3px solid;
  border-color: transparent #ff0000 transparent transparent;
}
.ui-ico-hotright {
  position: relative;
  background-image: none;
  padding: 1px 5px;
  background-color: #ff0000;
  color: #fff;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  margin-left: 5px;
  font-style: normal;
}
.ui-ico-hotright:before {
  content: "";
  display: block;
  position: absolute;
  margin-top: 4px;
  right: -6px;
  width: 0;
  height: 0;
  border: 3px solid;
  border-color: transparent transparent transparent #ff0000;
}
/**
<tr>
    <td><a href="#" class="ui-ico-cyy" title="虚拟产业园"></a></td>
    <td><code>ui-ico-cyy</code></td>
    <td>虚拟产业园</td>
</tr>
<tr>
    <td><i class="ui-ico-bao ui-ico-yuan" title="保证原创"></i></td>
    <td><code>ui-ico-bao ui-ico-yuan</code></td>
    <td>保证原创</td>
</tr>
<tr>
    <td><i class="ui-ico-bao ui-ico-wan" title="保证完成"></i></td>
    <td><code>ui-ico-bao ui-ico-wan</code></td>
    <td>保证完成</td>
</tr>
<tr>
    <td><i class="ui-ico-bao ui-ico-wei" title="保证维护"></i></td>
    <td><code>ui-ico-bao ui-ico-wei</code></td>
    <td>保证维护</td>
</tr>
<tr>
    <td><i class="ui-ico-bao ui-ico-wei" title="提供源码"></i></td>
    <td><code>ui-ico-bao ui-ico-ma</code></td>
    <td>提供源码</td>
</tr>
<tr>
    <td><i class="ui-ico-bao ui-ico-wei" title="保证推广效果"></i></td>
    <td><code>ui-ico-bao ui-ico-xiao</code></td>
    <td>保证推广效果</td>
</tr>

**/
.ui-ico-cyy {
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  width: 23px;
  height: 23px;
  background-image: url("../../lib/img/ico_cyy.png");
}
.ui-ico-bao {
  display: inline-block;
  width: 80px;
  height: 34px;
  background-image: url("../../lib/img/baozhang.png");
  background-repeat: no-repeat;
}
.ui-ico-wan {
  background-position: 0 -35px;
}
.ui-ico-wei {
  background-position: 0 -68px;
}
.ui-ico-ma {
  background-position: 0 -140px;
}
.ui-ico-xiao {
  background-position: 0 -102px;
}
/**
</tbody>
</table>
</div>
    <a class="ui-ico ui-ico-union" href="#"><span class="hide-txt">推广获赏金10%分成</span></a>
    <i class="ui-ico ui-ico-qq"></i>

 **/
/**
--------------

## 第三方登录图标

<div class="code-demo">
<table class="ui-table ui-table-bordered ui-table-striped">
    <thead>
      <tr>
        <th>图标</th>
        <th>class=""</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
    <tr>
        <td><i class="ui-icooauth ui-icooauth-sina"></i></td>
        <td><code>ui-icooauth ui-icooauth-sina</code></td>
        <td>新浪微博账号</td>
    </tr>
    <tr>
        <td><i class="ui-icooauth ui-icooauth-qq"></i></td>
        <td><code>ui-icooauth ui-icooauth-qq</code></td>
        <td>QQ账号</td>
    </tr>
    <tr>
        <td><i class="ui-icooauth ui-icooauth-tb"></i></td>
        <td><code>ui-icooauth ui-icooauth-tb</code></td>
        <td>淘宝账号</td>
    </tr>
    <tr>
        <td><i class="ui-icooauth ui-icooauth-zbj"></i></td>
        <td><code>ui-icooauth ui-icooauth-zbj</code></td>
        <td>猪八戒账号</td>
    </tr>
    </tbody>
</table>
</div>
    <i class="ui-icooauth ui-icooauth-sina"></i>
    <a class="ui-icooauth ui-icooauth-sina" href="#"><span class="hide-txt">新浪微博账号登录</span></a>
**/
.ui-icooauth {
  display: inline-block;
  margin-top: 1px;
  *margin-right: .3em;
  width: 184px;
  height: 43px;
  line-height: 43px;
  vertical-align: text-top;
  background-image: url("../../lib/img/ico-oauth.jpg");
  background-repeat: no-repeat;
}
.ui-icooauth-zbj {
  background-position: 0 -143px;
}
.ui-icooauth-sina {
  background-position: 0 0;
}
.ui-icooauth-qq {
  background-position: 0 -48px;
}
.ui-icooauth-tb {
  background-position: 0 -96px;
}
/**
--------------

## 分享图标

<div class="code-demo">
<table class="ui-table ui-table-bordered ui-table-striped">
    <thead>
      <tr>
        <th>图标</th>
        <th>class=""</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
    <tr>
        <td><i class="ui-icoshare ui-icoshare-163"></i></td>
        <td><code>ui-icoshare ui-icoshare-sina</code></td>
        <td>新浪微博账号</td>
    </tr>
    <tr>
        <td><i class="ui-icoshare ui-icoshare-sina"></i></td>
        <td><code>ui-icooauth ui-icooauth-sina</code></td>
        <td>QQ账号</td>
    </tr>
    <tr>
        <td><i class="ui-icoshare ui-icoshare-qzone"></i></td>
        <td><code>ui-icoshare ui-icoshare-qzone</code></td>
        <td>淘宝账号</td>
    </tr>
    <tr>
        <td><i class="ui-icoshare ui-icoshare-renren"></i></td>
        <td><code>ui-icoshare ui-icoshare-renren</code></td>
        <td>猪八戒账号</td>
    </tr>
    <tr>
        <td><i class="ui-icoshare ui-icoshare-douban"></i></td>
        <td><code>ui-icoshare ui-icoshare-douban</code></td>
        <td>猪八戒账号</td>
    </tr>
    </tbody>
</table>
</div>
    <i class="ui-icoshare ui-icoshare-sina"></i>
    <a class="ui-icoshare ui-icoshare-sina" href="#">/a>
**/
.ui-icoshare {
  display: inline-block;
  margin-top: 1px;
  *margin-right: .3em;
  width: 21px;
  height: 21px;
  line-height: 21px;
  vertical-align: text-top;
  background-image: url("../../lib/img/ico-share.png");
  background-repeat: no-repeat;
}
.ui-icoshare-sina {
  background-position: -25px 0;
}
.ui-icoshare-qzone {
  background-position: -50px 0;
}
.ui-icoshare-renren {
  background-position: -75px 0;
}
.ui-icoshare-douban {
  background-position: -100px 0;
}
/**
--------------

## 会员等级图标

<div class="code-demo">
<table class="ui-table ui-table-bordered ui-table-striped">
    <thead>
      <tr>
        <th>图标</th>
        <th>class=""</th>
        <th>描述</th>
      </tr>
    </thead>
    <tbody>
    <tr>
        <td><i class="ui-icosmember ui-icosmember-4"></i></td>
        <td><code>ui-icosmember ui-icosmember-4</code></td>
        <td>皇冠服务商</td>
    </tr>
    <tr>
        <td><i class="ui-icosmember ui-icosmember-3"></i></td>
        <td><code>ui-icosmember ui-icosmember-3</code></td>
        <td>钻石服务商</td>
    </tr>
    <tr>
        <td><i class="ui-icosmember ui-icosmember-2"></i></td>
        <td><code>ui-icosmember ui-icosmember-2</code></td>
        <td>金牌服务商</td>
    </tr>
    <tr>
        <td><i class="ui-icosmember ui-icosmember-1"></i></td>
        <td><code>ui-icosmember ui-icosmember-1</code></td>
        <td>银牌服务商</td>
    </tr>
    </tbody>
</table>
</div>
    <i class="ui-icosmember ui-icosmember-4"></i>
**/
.ui-icosmember {
  display: inline-block;
  width: 20px;
  height: 21px;
  line-height: 21px;
  vertical-align: middle;
  background-image: url("../../lib/img/ico-member.png");
  background-repeat: no-repeat;
  background-position: 0 20px;
  *display: inline;
  *zoom: 1;
}
.ui-icosmember-4,
.ui-icosmember-8 {
  background-position: 0 -1px;
}
.ui-icosmember-3,
.ui-icosmember-7 {
  background-position: 0 -21px;
}
.ui-icosmember-2 {
  background-position: 0 -42px;
}
.ui-icosmember-1 {
  background-position: 0 -63px;
}
.ui-icosmember-6 {
  background-position: 0 -86px;
}
/**
tab选项卡组件
============
Created：**laotan** <span class="gray">（2013/07/25 15:16:38）</span>

Updated：**laotan** <span id="updateTime"></span>

--------------------
##选项卡菜单
<div class="code-demo">
<ul class="ui-tab-nav">
    <li class="active">
        <a href="#">首页</a>
    </li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
</ul>
</div>
    <ul class="ui-tab-nav">
        <li class="active">
            <a href="#">首页</a>
        </li>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
**/
.ui-tab-nav,
.ui-tab-bd {
  *zoom: 1;
  margin-left: 0;
  list-style: none;
}
.ui-tab-nav:before,
.ui-tab-nav:after,
.ui-tab-bd:before,
.ui-tab-bd:after {
  display: table;
  line-height: 0;
  content: "";
}
.ui-tab-nav:after .ui-tab-bd:after {
  clear: both;
}
.ui-tab-nav li {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
}
.ui-tab-nav li a {
  padding-right: 9px;
  padding-left: 9px;
  margin-right: 2px;
  line-height: 14px;
  color: #999;
}
.ui-tab-nav li a:hover,
.ui-tab-nav li a:focus {
  text-decoration: none;
}
.ui-tab-nav .active a,
.ui-tab-nav .active a:hover,
.ui-tab-nav .active a:focus {
  color: #333;
  cursor: default;
}
/**
##选项卡菜单-提示三角
添加样式名 `ui-tab-nav-tips`，不兼容ie67

<div class="code-demo">
<ul class="ui-tab-nav ui-tab-nav-tips">
    <li class="active"><a href="#">技术类</a></li><li><a href="#">开发类</a></li><li><a href="#">设计类</a></li><li><a href="#">设计类</a></li>
</ul>
</div>
    <ul class="ui-tab-nav ui-tab-nav-tips">
        <li class="active"><a href="#">技术类</a></li><li><a href="#">开发类</a></li><li><a href="#">设计类</a></li><li><a href="#">设计类</a></li>
    </ul>
**/
.ui-tab-nav-tips {
  overflow-x: hidden;
  height: 26px;
  *position: relative;
}
.ui-tab-nav-tips li {
  margin-left: -1px;
  height: 22px;
  line-height: 22px;
  float: left;
}
.ui-tab-nav-tips li.active {
  background: #ff8a00;
  color: #fff;
  position: relative;
  z-index: 1;
}
.ui-tab-nav-tips li.active:after {
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin: 0 0 -4px -4px;
  width: 0;
  height: 0;
  border-top: 4px solid #ff8a00;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}
.ui-tab-nav-tips li a {
  display: inline-block;
  border-left: 1px solid #dadada;
  color: #666;
}
.ui-tab-nav-tips li.active a,
.ui-tab-nav-tips li.active a:hover,
.ui-tab-nav-tips li.active a:active {
  color: #fff;
  border-left: none;
}
/**
分类菜单
=================
Created：**vvg** <span class="gray">（2013/08/15 16:48:26）</span>

Updated：**vvg** <span id="updateTime"></span>

--------------------------
* IE6下需添加以下JS
* `$('.category-status-close').ie6hover();`
* `$('.category-item').ie6hover();`

<div class="code-demo">
<!-- HTML结构与下类似 -->
    <div class="category clearfix" id="category-container" style="position:relative;left:0;">
        <h3 class="category-title">全部服务分类<i class="iconfont">&#xe807;</i></h3>
        <div class="category-content" style="height:300px">
            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h2 style="position:relative;left:300px">默认为展开状态，如为收缩状态,在最外层添加class类 ‘category-status-close’</h2>
    <!--收缩状态-->
    <div class="category category-status-close" id="category-container" style="position:relative;left:300px">
        <h3 class="category-title">全部服务分类<i class="iconfont down">&#xe807;</i><i class="iconfont up">&#xe806;</i></h3>
        <div class="category-content">
            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h2 style="position:relative;left:300px"> ----------------------------需求大厅添加 category-status-hall 类-------------------------------- </h2>
    <div class="category category-status-hall" style="position:relative;left:600px;">
         <div class="category-content">
            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="category" id="category-container">
        <h3 class="category-title">全部服务分类</h3>
        <div class="category-content">
            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="category-item">
                <!-- 一级分类 -->
                <div class="category-item-one">
                    <em>.</em>
                    <span><a href="#" target="_blank">品牌标志</a>、<a href="#" target="_blank">方案策划</a>、<a href="#" target="_blank">动漫设计</a></span>
                    <i class="iconfont">&#xe805;</i>
                </div>
                <!-- 二级分类 -->
                <div class="category-item-two">
                    <div class="category-item-list">
                        <h4><a href="#" target="_blank">网站建设</a></h4>
                        <div class="category-item-small">
                            <a href="#" target="_blank">综合门户开发</a>
                            <a href="#" target="_blank">网站功能开发</a>
                            <a href="#" target="_blank">宣传展示网站</a>
                            <a href="#" target="_blank">咨询网站开发</a>
                            <a href="#" target="_blank">企业网站开发</a>
                            <a href="#" target="_blank">团购网站开发</a>
                            <a href="#" target="_blank">手机网站开发</a>
                            <a href="#" target="_blank">网页前端开发</a>
                            <a href="#" target="_blank">网站特效制作</a>
                            <a href="#" target="_blank">网站改版</a>
                            <a href="#" target="_blank">仿网站开发</a>
                            <a href="#" target="_blank">Web_Development</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
**/
.category {
  width: 190px;
  position: relative;
  bottom: -1px;
}
.category-list .category-item-list .category-item-small a.highlight,
.category-list .category-item-list .category-item-small a.highlight:visited {
  color: #ec0000;
}
.category-title {
  margin: 0;
  background: #f27302;
  font: normal 16px/40px "microsoft yahei", "宋体";
  color: #fff;
  height: 38px;
  text-indent: 20px;
  position: relative;
}
.category-title i.iconfont {
  position: absolute;
  right: 20px;
  color: #fff;
  font-size: 18px;
  display: none;
}
.category-title > a {
  color: #fff;
  text-decoration: none;
}
.category-content {
  position: absolute;
  width: 190px;
  z-index: 200;
  border-top: none;
  padding-top: 10px;
  padding-bottom: 17px;
  padding-bottom: 11px\9;
  background: #ff9400;
}
@-moz-document url-prefix() {
  .category-content {
    padding-bottom: 11px;
  }
}
.category-item {
  position: relative;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
}
.category-item.hover {
  border-top: 1px solid #f27302;
  border-bottom: 1px solid #f27302;
  border-left: 1px solid #f27302;
}
.category-item.hover a {
  color: #333;
}
.category-item.hover .category-item-one {
  background: #fff;
}
.category-item.hover .category-item-one span {
  color: #333;
}
.category-item.hover.item-top em {
  background-position: -17px 0;
}
.category-item.hover.item-brand em {
  background-position: -17px -15px;
}
.category-item.hover.item-knowledge em {
  background-position: -17px -32px;
}
.category-item.hover.item-adv em {
  background-position: -17px -48px;
}
.category-item.hover.item-baozhuang em {
  background-position: -17px -236px;
}
.category-item.hover.item-kaifa em {
  background-position: -17px -64px;
}
.category-item.hover.item-wangdian em {
  background-position: -17px -95px;
}
.category-item.hover.item-yinxiao em {
  background-position: -17px -80px;
}
.category-item.hover.item-dongman em {
  background-position: -17px -130px;
}
.category-item.hover.item-xiezuo em {
  background-position: -17px -148px;
}
.category-item.hover.item-qiming em,
.category-item.hover.item-software em {
  background-position: -17px -273px;
}
.category-item.hover.item-zonghe em,
.category-item.hover.item-app em {
  background-position: -17px -255px;
}
.category-item.hover.item-tese em {
  background-position: -17px -201px;
}
.category-item.hover.item-else em {
  background-position: -17px -218px;
}
.category .item-top h4.title1 {
  background: #eca1a1;
}
.category .item-top h4.title2 {
  background: #a1cdec;
  margin-top: 21px;
}
.category .item-yinxiao h4.title1,
.category .item-kaifa h4.title1,
.category .item-wangdian h4.title1,
.category .item-brand h4.title1,
.category .item-knowledge h4.title1,
.category .item-adv h4.title1,
.category .item-dongman h4.title1 {
  background: #eca1a1;
}
.category .item-yinxiao h4.title2,
.category .item-kaifa h4.title2,
.category .item-wangdian h4.title2,
.category .item-brand h4.title2,
.category .item-knowledge h4.title2,
.category .item-adv h4.title2,
.category .item-dongman h4.title2 {
  background: #a1cdec;
  margin-top: 21px;
}
.category .item-baozhuang h4,
.category .item-tese h4 {
  background: #eca1bf;
}
.category .item-xiezuo h4 {
  background: #a1cdec;
}
.category .item-qiming h4 {
  background: #dae09a;
}
.category .item-zonghe h4,
.category .item-else h4 {
  background: #fdd2b2;
}
.category-item-one em {
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 0;
  background: url("../../lib/img/cata_icon.png?new");
  /*margin-left: 20px;*/
  margin-left: 16px;
  position: relative;
  top: 4px;
}
.item-top em {
  background-position: 0 0;
}
.item-brand em {
  background-position: 0 -15px;
}
.item-knowledge em {
  background-position: 0 -32px;
}
.item-baozhuang em {
  background-position: 0 -236px;
}
.item-adv em {
  background-position: 0 -48px;
}
.item-kaifa em {
  background-position: 0 -64px;
}
.item-wangdian em {
  background-position: 0 -95px;
}
.item-yinxiao em {
  background-position: 0 -80px;
}
.item-dongman em {
  background-position: 0 -130px;
}
.item-xiezuo em {
  background-position: 0 -148px;
}
.item-qiming em,
.item-software em {
  background-position: 0 -273px;
}
.item-zonghe em,
.item-app em {
  background-position: 0 -254px;
}
.item-tese em {
  background-position: 0 -201px;
}
.item-else em {
  background-position: 0 -218px;
}
/* 大类鼠标hover效果 */
.category-item.hover .category-item-two {
  display: block;
  z-index: 100;
}
.category-item-one {
  color: #666;
  margin: 0 auto;
  padding: 5px 0;
  position: relative;
  z-index: 101;
}
.category-item-one a {
  font-size: 14px;
}
.category-item-one span {
  display: inline-block;
  zoom: 1;
  height: 100%;
  vertical-align: middle;
  overflow: hidden;
  /*margin-left: 10px;*/
  margin-left: 5px;
  color: #fff;
}
.category-item-one a,
.category-item-one span {
  color: #fff;
  font-size: 14px;
  font-family: "Microsoft YaHei", sans-serif;
}
.category-item-two {
  display: none;
  position: absolute;
  width: 119px;
  height: 486px;
  padding: 15px;
  left: 188px;
  background: #fff;
  border: 1px solid #ee6b01;
}
.category-status-close .category-content {
  display: none;
}
.category-status-close .category-title i.down {
  display: inline;
}
.category-status-close.hover .category-content {
  display: block;
  height: auto;
}
.category-status-close:hover .category-title i.down {
  display: none;
}
.category-status-close:hover .category-title i.up {
  display: inline;
}
.category-item-list {
  margin-bottom: -1px;
  overflow: hidden;
  *zoom: 1;
}
.category-item-list:after,
.category-item-list:before {
  display: table;
  content: "";
  line-height: 0;
  clear: both;
}
.category-item-list a {
  font-size: 14px;
}
.category-item-list h4 {
  width: 119px;
  height: 20px;
  display: inline-block;
  text-align: center;
  margin: 0;
  font-size: 14px;
  font-family: simsun, serif;
  color: #fff;
}
.category-item-list h4 a:link,
.category-item-list h4 a:visited {
  color: #fff;
}
.category-item-small {
  line-height: 28px;
  margin-top: 9px;
  margin-left: -18px;
}
.category-item .category-item-small a {
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  display: inline-block;
  line-height: 20px;
  color: #666;
  margin-left: 18px;
  min-width: 47px;
}
.category-item-a-d {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.category-item-a-d img {
  max-width: none;
}
.category-witmart .category-item-list {
  border-bottom: none;
}
.category-witmart span {
  letter-spacing: 0;
}
.category-witmart .category-item-two {
  top: auto;
  bottom: -1px;
}
.witmart-intro {
  position: relative;
  background-image: url("../../lib/img/witmart.png?new");
  background-repeat: no-repeat;
  background-position: left top;
  margin-top: 7px;
  padding-left: 88px;
}
.kuaiyin-intro {
  background-image: url("../../lib/img/kuaiyin.png?new");
}
.witmart-intl-intro {
  background-image: url("../../lib/img/spr_category_fair.png");
  padding-left: 200px;
  background-position: left -103px;
}
.kuaiyin-intro .highlight-light,
.witmart-intl-intro .highlight-light {
  color: #FF9300;
}
.witmart-intro dl {
  color: #b8b8b8;
  float: left;
}
.kuaiyin-intro dl,
.witmart-intl-intro dl {
  color: #999;
}
.witmart-intro dd {
  margin: 4px 0;
}
.witmart-intro em {
  height: 3px;
  width: 3px;
}
.witmart-intro a.witmart-link {
  color: #ffffff;
  float: right;
  margin-top: 70px;
}
.witmart-intro a.witmart-link span {
  margin-left: 20px;
}
.witmart-intro a.zhuanti-link {
  color: red;
  right: 0;
  top: 18px;
  position: absolute;
}
.witmart-intl-intro a.witmart-link {
  margin-top: 94px;
}
.fair-intro {
  background-image: url("../../lib/img/spr_category_fair.png");
  padding-left: 200px;
  background-position: left 40px;
}
/**
面包屑导航
===============
Created：**vvg** <span class="gray">（2013/08/09 16:04:43）</span>

Updated：**vvg** <span id="updateTime"></span>

--------------------------------------
<div class="code-demo">
    <ul class="ui-breadcrumb inline">
        <li><a href="#">首页</a> <span class="ui-breadcrumb-divider">></span></li>
        <li><a href="#">大类产品</a> <span class="ui-breadcrumb-divider">></span></li>
        <li><a href="#">二级分类产品</a> <span class="ui-breadcrumb-divider">></span></li>
        <li class="active">产品列表页</li>
    </ul>
</div>
    <ul class="ui-breadcrumb">
        <li><a href="#">首页</a> <span class="ui-breadcrumb-divider">></span></li>
        <li><a href="#">大类产品</a> <span class="ui-breadcrumb-divider">></span></li>
        <li><a href="#">二级分类产品</a> <span class="ui-breadcrumb-divider">></span></li>
        <li class="active">产品列表页</li>
    </ul>

**/
ul.ui-breadcrumb {
  padding: 8px 0;
  margin: 0;
  list-style: none;
}
ul.ui-breadcrumb li {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  *float: left;
  _padding-left: 5px;
  _padding-right: 5px;
}
.ui-breadcrumb-divider {
  padding: 0 5px;
  color: #656565;
  font-family: simsun, serif;
}
.ui-breadcrumb a {
  color: #656565;
}
.ui-breadcrumb .active {
  color: #656565;
  background: none;
}
/**
翻页控件，并与以前做兼容处理
===============
Created：**vvg** <span class="gray">（2013/08/09 18:13:43）</span>

Updated：**vvg** <span id="updateTime"></span>

--------------------------------------
* `ui-paging-large` `ui-paging-small` 有三种大小状态：默认   稍大   稍小
* `ui-paging-center` `ui-paging-right` 有三种对齐状态：默认居左  居中  居右
* `ui-paging-disable` 禁用状态,用于没有上下翻页的时候
* `ui-paging-current` 当前页面状态

<div class="code-demo">
    <div class="ui-paging">
        <ul>
            <li class="ui-paging-item ui-paging-prev"><a href="#">«</a></li>
            <li class="ui-paging-item"><a href="#">1</a></li>
            <li class="ui-paging-item ui-paging-current"><a href="#">2</a></li>
            <li class="ui-paging-item"><a href="#">3</a></li>
            <li class="ui-paging-item"><a href="#">4</a></li>
            <li class="ui-paging-item"><a href="#">5</a></li>
            <li class="ui-paging-item ui-paging-disable"><a href="#">...</a></li>
            <li class="ui-paging-item ui-paging-next ui-paging-disable"><a href="#">»</a></li>
        </ul>
    </div>
</div>
    <div class="ui-paging ">
        <ul>
            <li class="ui-paging-item ui-paging-prev "><a href="#">«</a></li>
            <li class="ui-paging-item"><a href="#">1</a></li>
            <li class="ui-paging-item ui-paging-current"><a href="#">2</a></li>
            <li class="ui-paging-item"><a href="#">3</a></li>
            <li class="ui-paging-item"><a href="#">4</a></li>
            <li class="ui-paging-item"><a href="#">5</a></li>
            <li class="ui-paging-item ui-paging-disable"><a href="#">...</a></li>
            <li class="ui-paging-item ui-paging-next ui-paging-disable"><a href="#">»</a></li>
        </ul>
    </div>
<div class="code-demo">
    <div class="ui-paging ui-paging-large ui-paging-center">
        <ul>
            <li class="ui-paging-item ui-paging-prev"><a href="#">«</a></li>
            <li class="ui-paging-item"><a href="#">1</a></li>
            <li class="ui-paging-item ui-paging-current"><a href="#">2</a></li>
            <li class="ui-paging-item"><a href="#">3</a></li>
            <li class="ui-paging-item"><a href="#">4</a></li>
            <li class="ui-paging-item"><a href="#">5</a></li>
            <li class="ui-paging-item ui-paging-next ui-paging-disable"><a href="#">»</a></li>
        </ul>
    </div>
</div>
    <div class="ui-paging ui-paging-large ui-paging-center">
        <ul>
            <li class="ui-paging-item ui-paging-prev"><a href="#">«</a></li>
            <li class="ui-paging-item"><a href="#">1</a></li>
            <li class="ui-paging-item ui-paging-current"><a href="#">2</a></li>
            <li class="ui-paging-item"><a href="#">3</a></li>
            <li class="ui-paging-item"><a href="#">4</a></li>
            <li class="ui-paging-item"><a href="#">5</a></li>
            <li class="ui-paging-item ui-paging-next ui-paging-disable"><a href="#">»</a></li>
        </ul>
    </div>
<div class="code-demo">
    <div class="ui-paging ui-paging-small ui-paging-right">
        <ul>
            <li class="ui-paging-item ui-paging-prev"><a href="#">«</a></li>
            <li class="ui-paging-item"><a href="#">1</a></li>
            <li class="ui-paging-item ui-paging-current"><a href="#">2</a></li>
            <li class="ui-paging-item"><a href="#">3</a></li>
            <li class="ui-paging-item"><a href="#">4</a></li>
            <li class="ui-paging-item"><a href="#">5</a></li>
            <li class="ui-paging-item ui-paging-next ui-paging-disable"><a href="#">»</a></li>
        </ul>
    </div>
    1111
    <div class="pagination">
        <ul>
            <li class="disabled"><a href="#">«</a></li>
            <li class="active"><a href="/2945936/p1.html">1</a></li>
            <li><a href="/2945936/p2.html">2</a></li>
            <li><a href="/2945936/p2.html">»</a></li>
        </ul>
    </div>
</div>
    <div class="ui-paging ui-paging-small ui-paging-right">
        <ul>
            <li class="ui-paging-item ui-paging-prev"><a href="#">«</a></li>
            <li class="ui-paging-item"><a href="#">1</a></li>
            <li class="ui-paging-item ui-paging-current"><a href="#">2</a></li>
            <li class="ui-paging-item"><a href="#">3</a></li>
            <li class="ui-paging-item"><a href="#">4</a></li>
            <li class="ui-paging-item"><a href="#">5</a></li>
            <li class="ui-paging-item ui-paging-next ui-paging-disable"><a href="#">»</a></li>
        </ul>
    </div>
<div class="code-demo">
    <div class="ui-minipaging">
        <span class="ui-minipaging-pagenum">1 / 100</span>
        <a href="javascript:;" rel="nofollow" class="ui-minipaging-pre ui-minipaging-disabled">&lt;</a>
        <a class="ui-minipaging-next " href="/p2.html" rel="nofollow">&gt;</a>
    </div>
</div>
    <div class="ui-minipaging">
      <span class="ui-minipaging-pagenum">1 / 100</span>
      <a href="javascript:;" rel="nofollow" class="ui-minipaging-pre ui-minipaging-disabled">&lt;</a>
      <a class="ui-minipaging-next " href="/p2.html" rel="nofollow">&gt;</a>
    </div>
**/
.pagination,
.ui-paging {
  overflow: hidden;
}
.ui-paging-center {
  text-align: center;
}
.ui-paging-right {
  text-align: right;
}
.pagination ul,
.ui-paging ul {
  margin: 0;
  list-style: none;
  display: inline-block;
  overflow: hidden;
  border-left: 1px solid #DDD;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.pagination ul li,
.ui-paging-item {
  display: inline;
}
.pagination ul li a,
.ui-paging-item a {
  float: left;
  padding: 5px 12px;
  line-height: 20px;
  color: #333;
  border: 1px solid #ddd;
  border-left: 0;
}
.ui-paging-large ul li a,
.ui-paging-large .ui-paging-item a {
  padding: 11px 19px;
  font-size: 16px;
}
.ui-paging-small ul li a,
.ui-paging-small .ui-paging-item a {
  padding: 2px 10px;
  font-size: 10px;
}
.pagination ul li.active a,
.pagination ul li.disabled a,
.ui-paging-current a {
  color: #9d9f9c;
  cursor: default;
  background: #f5f5f5;
  text-decoration: none;
}
.ui-paging-disable a {
  color: #9d9f9c;
  cursor: default;
  text-decoration: none;
}
.ui-minipaging {
  float: right;
  margin-right: 10px;
}
.ui-minipaging-pagenum {
  color: #999;
  margin-right: 10px;
  vertical-align: middle;
}
.ui-minipaging-pre,
.ui-minipaging-next {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0 -1px 0 0;
  color: #999;
  padding: 0;
  font-family: '宋体';
  vertical-align: middle;
}
/**
提示文本
===============
Created：**vvg** <span class="gray">（2013/08/13 14:52:29）</span>

Updated：**laotan** <span id="updateTime"></span>

--------------------------------------
* 四种状态分别是`ui-tips-info`  `ui-tips-error`  `ui-tips-warning`  `ui-tips-success`
* 图标icon里面的内容不一样
* 弹出页面居中，添加class`ui-tips-pop`
<div class="code-demo">
    <div class="ui-tips ui-tips-info">
        <i class="ui-tips-icon iconfont" title="提示">&#xe818;</i>
        <div class="ui-tips-bd">提示内容提示内容提示内容提示内容提示内容<br />示内容提示内容提示</div>
        <i class="ui-tips-close">&times;</i>
    </div>
</div>
    <div class="ui-tips ui-tips-info">
        <i class="ui-tips-icon iconfont" title="提示">&#xe818;</i>
        <div class="ui-tips-bd">提示内容提示内容提示内容提示内容提示内容<br />示内容提示内容提示</div>
        <i class="ui-tips-close">&times;</i>
    </div>

<div class="code-demo">
    <div class="ui-tips ui-tips-error">
        <i class="ui-tips-icon iconfont" title="错误">&#xe816;</i>
        <div class="ui-tips-bd">系统错误信息，错误信息，错误信息</div>
        <i class="ui-tips-close">&times;</i>
    </div>
</div>
    <div class="ui-tips ui-tips-error">
        <i class="ui-tips-icon iconfont" title="错误">&#xe816;</i>
        <div class="ui-tips-bd">系统错误信息，错误信息，错误信息</div>
    </div>

<div class="code-demo">
    <div class="ui-tips ui-tips-warning">
        <i class="ui-tips-icon iconfont" title="警告">&#xe819;</i>
        <div class="ui-tips-bd">警告警告警告警告警告警告警告警告警告警告警告警告</div>
        <i class="ui-tips-close">&times;</i>
    </div>
</div>
    <div class="ui-tips ui-tips-warning">
        <i class="ui-tips-icon iconfont" title="警告">&#xe819;</i>
        <div class="ui-tips-bd">警告警告警告警告警告警告警告警告警告警告警告警告</div>
    </div>
<div class="code-demo">
    <div class="ui-tips ui-tips-success">
        <i class="ui-tips-icon iconfont" title="成功">&#xe814;</i>
        <div class="ui-tips-bd">成功提示成功提示成功提示成功提示成功提示成功提示</div>
        <i class="ui-tips-close">&times;</i>
    </div>
</div>
    <div class="ui-tips ui-tips-success">
        <i class="ui-tips-icon iconfont" title="成功">&#xe814;</i>
        <div class="ui-tips-bd">成功提示成功提示成功提示成功提示成功提示成功提示</div>
    </div>
<div class="ui-tips ui-tips-success ui-tips-pop">
    <i class="ui-tips-icon iconfont" title="成功">&#xe814;</i>
    <div class="ui-tips-bd">成功提示成功提示成功提示成功提示成功提示成功提示</div>
    <i class="ui-tips-close">&times;</i>
</div>
**/
.ui-tips {
  padding: 8px 12px;
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  zoom: 1;
  border: 1px solid;
  border-color: #bce8f1;
  background-color: #d9edf7;
  color: #3a87ad;
}
.ui-tips-icon {
  font-size: 1.5em;
  line-height: 1em;
  color: #3a87ad;
  float: left;
  position: relative;
  top: 1px;
}
.ui-tips-error {
  border-color: #eed3d7;
  background-color: #f2dede;
  color: #b94a48;
}
.ui-tips-error .ui-tips-icon {
  color: #b94a48;
}
.ui-tips-warning {
  background-color: #fcf8e3;
  border-color: #fbeed5;
  color: #c09853;
}
.ui-tips-warning .ui-tips-icon {
  color: #c09853;
}
.ui-tips-warning.xb-list-tips img {
  margin: 0px 2px;
}
.ui-tips-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}
.ui-tips-success .ui-tips-icon {
  color: #468847;
}
.ui-tips-bd {
  padding-left: 25px;
  padding-right: 15px;
  line-height: 20px;
}
.ui-tips-close {
  position: absolute;
  right: 8px;
  top: 0;
  color: #000;
  opacity: 0.2;
  filter: alpha(opacity=20);
  font-size: 20px;
  font-weight: bold;
  font-style: normal;
  cursor: pointer;
}
.ui-tips-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  z-index: 510;
}
/**

-------------------------

## 工具小提示

<div class="code-demo">
    <div class="ui-tooltip ui-tooltip-top"><div class="ui-tooltip-arrow"></div><div class="ui-tooltip-inner">提示在上</div></div> <br><br>
</div>
    <div class="ui-tooltip ui-tooltip-top"><div class="ui-tooltip-arrow"></div><div class="ui-tooltip-inner">提示在上</div></div>
    <div class="ui-tooltip ui-tooltip-right"><div class="ui-tooltip-arrow"></div><div class="ui-tooltip-inner">提示在右</div></div>
    <div class="ui-tooltip ui-tooltip-bottom"><div class="ui-tooltip-arrow"></div><div class="ui-tooltip-inner">提示在下</div></div>
    <div class="ui-tooltip ui-tooltip-left"><div class="ui-tooltip-arrow"></div><div class="ui-tooltip-inner">提示在左</div></div>

**/
.ui-tooltip {
  position: absolute;
  z-index: 100;
  display: block;
  visibility: visible;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.ui-tooltip-top {
  margin-top: -3px;
  padding: 5px 0;
}
.ui-tooltip-right {
  margin-left: 3px;
  padding: 0 5px;
}
.ui-tooltip-bottom {
  margin-top: 3px;
  padding: 5px 0;
}
.ui-tooltip-left {
  margin-left: -3px;
  padding: 0 5px;
}
.ui-tooltip-inner {
  max-width: 200px;
  padding: 8px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  background-color: #ff9600;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.ui-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.ui-tooltip-top .ui-tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #ff9600;
}
.ui-tooltip-right .ui-tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #ff9600;
}
.ui-tooltip-left .ui-tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #ff9600;
}
.ui-tooltip-bottom .ui-tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #ff9600;
}
/**

---------------------------------------

提示浮层
============

用`ui-poptip-top`，`ui-poptip-right`，`ui-poptip-bottom`，`ui-poptip-left`控制4个方向

<style>
.ui-poptip{
    position:relative!important;
    margin:20px!important;
    display:block;
}
</style>
<div class="code-demo">
    <div class="ui-poptip ui-poptip-top">
        <div class="ui-poptip-arrow"><i></i></div>
        <div class="ui-poptip-bd">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
    </div>
    <div class="ui-poptip ui-poptip-right">
        <div class="ui-poptip-arrow"><i></i></div>
        <div class="ui-poptip-bd">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
    </div>
    <div class="ui-poptip ui-poptip-bottom">
        <div class="ui-poptip-arrow"><i></i></div>
        <div class="ui-poptip-bd">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
    </div>
    <div class="ui-poptip ui-poptip-left">
        <div class="ui-poptip-arrow"><i></i></div>
        <div class="ui-poptip-bd">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
    </div>
</div>

    <div class="ui-poptip ui-poptip-top">
        <div class="ui-poptip-arrow"><i></i></div>
        <div class="ui-poptip-bd">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
    </div>
**/
.ui-poptip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  display: none;
  padding: 1px;
  text-align: left;
  background-color: #ffffff;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  border: 1px solid #ffc059;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  white-space: normal;
}
.ui-poptip-bd {
  padding: 20px;
}
.ui-poptip .ui-poptip-arrow,
.ui-poptip .ui-poptip-arrow i {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  _border-style: dashed;
  border-color: transparent;
}
.ui-poptip .ui-poptip-arrow {
  border-width: 11px;
}
.ui-poptip .ui-poptip-arrow i {
  border-width: 10px;
}
.ui-poptip-top {
  margin-top: -10px;
}
.ui-poptip-top .ui-poptip-arrow {
  left: 50%;
  bottom: -11px;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: #ffc059;
}
.ui-poptip-top .ui-poptip-arrow i {
  bottom: 1px;
  margin-left: -10px;
  border-bottom-width: 0;
  border-top-color: #fff;
}
.ui-poptip-right {
  margin-left: 10px;
}
.ui-poptip-right .ui-poptip-arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: #ffc059;
}
.ui-poptip-right .ui-poptip-arrow i {
  left: 1px;
  bottom: -10px;
  border-left-width: 0;
  border-right-color: #fff;
}
.ui-poptip-bottom {
  margin-top: 10px;
}
.ui-poptip-bottom .ui-poptip-arrow {
  left: 50%;
  top: -11px;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #ffc059;
}
.ui-poptip-bottom .ui-poptip-arrow i {
  top: 1px;
  margin-left: -10px;
  border-top-width: 0;
  border-bottom-color: #fff;
}
.ui-poptip-left {
  margin-left: -10px;
}
.ui-poptip-left .ui-poptip-arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #ffc059;
}
.ui-poptip-left .ui-poptip-arrow i {
  right: 1px;
  bottom: -10px;
  border-right-width: 0;
  border-left-color: #fff;
}
.ui-poptipnoc {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  display: none;
  padding: 1px;
  text-align: left;
  background-color: #ffffff;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  border: 1px solid #ffc059;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  white-space: normal;
}
.ui-poptipnoc-arrow,
.ui-poptipnoc-arrow i {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  _border-style: dashed;
  border-color: transparent;
}
.ui-poptipnoc-arrow {
  border-width: 11px;
}
.ui-poptipnoc-arrow i {
  border-width: 10px;
}
.ui-poptipnoc-bottom {
  margin-top: 10px;
}
.ui-poptipnoc-bottom .ui-poptipnoc-arrow {
  left: 50%;
  top: -11px;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #ffc059;
}
.ui-poptipnoc-bottom .ui-poptipnoc-arrow i {
  top: 1px;
  margin-left: -10px;
  border-top-width: 0;
  border-bottom-color: #fff;
}
.ui-poptipnoc-left {
  margin-left: -10px;
}
.ui-poptipnoc-left .ui-poptipnoc-arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #ffc059;
}
.ui-poptipnoc-left .ui-poptipnoc-arrow i {
  right: 1px;
  bottom: -10px;
  border-right-width: 0;
  border-left-color: #fff;
}
/**
幻灯片焦点图
===============
Created：**vvg** <span class="gray">（2013/08/02 09:37:30）</span>

Updated：**vvg** <span id="updateTime"></span>

--------------------------------------
html结构如下，带索引按钮

<div class="code-demo">
    <!-- HTML结构与下类似 -->
    <div class="ui-slide">
        <!-- 滚动内容 -->
        <div class="ui-slide-container" id="slide">
            <div class="ui-slide-item"><a href="#"><img src="http://p4.zbjimg.com//service/2013-07/31/service/51f86d4f557de.jpg"></a></div>
            <div class="ui-slide-item"><a href="#"><img src="http://p4.zbjimg.com//service/2013-07/31/service/51f86d4f557de.jpg"></a></div>
            <div class="ui-slide-item"><a href="#"><img src="http://p4.zbjimg.com//service/2013-07/31/service/51f86d4f557de.jpg"></a></div>
        </div>
    </div>
</div>
    <!-- HTML结构与下类似 不一定要相同，自定义尺寸 -->
    <div class="ui-slide">
        <!-- 滚动内容 -->
        <div class="ui-slide-container" id="slide">
            <div class="ui-slide-item"><a href="#"><img src="http://p4.zbjimg.com//service/2013-07/31/service/51f86d4f557de.jpg"></a></div>
            <div class="ui-slide-item"><a href="#"><img src="http://p4.zbjimg.com//service/2013-07/31/service/51f86d4f557de.jpg"></a></div>
            <div class="ui-slide-item"><a href="#"><img src="http://p4.zbjimg.com//service/2013-07/31/service/51f86d4f557de.jpg"></a></div>
        </div>
    </div>

    <!-- 首先引入slide.js -->
    <script type="text/javascript" src="/min/?f=base.js,module/slide.js&debug"></script>

    <!-- JS代码 -->
    var slide = ZDK.module.slide({
            target : $('#slide'),
            item: '.ui-slide-item',
            timeout: 3000,
            time: 600,
            path: true,//标记竖向滚动
            // 此初始化函数在需要索引按钮的时候需要
            oninited: function(slide){
                var html = ['<ul class="ui-slide-index">'];
                for(var idx =0,len = slide.number;idx<len;idx++){
                    if(idx == slide .index){
                        html.push('<li class="cur">',idx+1,'</li>');
                    } else {
                        html.push('<li >',idx+1,'</li>');
                    }
                }
                html.push('</ul>');
                var tc = $(html.join(''));
                slide.cur =  tc.find('li').click(function(){
                    var $this = $(this);
                    var index = $this.html() ^ 0;
                    slide.play(index-1);
                });
                slide.target.parent().append(tc);
            }
        })
        // 以下为需要索引按钮的时候配合oninit使用
        slide.on('play',function(data){
            var index = data.index;
            slide.cur.eq(index).parent().find('.cur').removeClass('cur');
            slide.cur.eq(index).addClass('cur');
        });
<div class="code-demo">
    <div class="ui-slide-wrap">
		<a class="ui-slide-prev" href="###"><<</a>
		<div class="ui-slide" >
			<ul style="width:5000px;" id="player">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
			</ul>
		</div>
		<a class="ui-slide-next" href="###">>></a>
	</div>
</div>
**/
.ui-slide {
  position: relative;
  width: 856px;
  height: 295px;
}
.ui-slide-index {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  list-style: none;
  margin: 0;
}
.ui-slide-index li {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  width: 12px;
  height: 12px;
  overflow: hidden;
  line-height: 99px;
  margin-left: 5px;
  background: #fff;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.ui-slide-index li.cur {
  background: #f1af00;
}
.ui-slide-container {
  width: 856px;
  height: 295px;
  overflow: hidden;
}
.ui-slide-item {
  height: 295px;
}
/**
猪八戒流程
=================
Created：**vvg** <span class="gray">（2013/08/16 16:58:24）</span>

Updated：**vvg** <span id="updateTime"></span>

--------------------

页面下找不到合适的xx,推荐用户操作

<div class="code-demo">
    <ul class="ui-app-step clearfix">
        <li><em>1</em>发布需求<i class="iconfont">&#xe805;</i></li>
        <li><em>2</em>众多服务商参与<i class="iconfont">&#xe805;</i></li>
        <li><em>3</em>选择满意方案<i class="iconfont">&#xe805;</i></li>
        <li><em>4</em>验收后付款</li>
    </ul>
</div>
    <ul class="ui-app-step clearfix">
        <li><em>1</em>发布需求<i class="iconfont">&#xe805;</i></li>
        <li><em>2</em>众多服务商参与<i class="iconfont">&#xe805;</i></li>
        <li><em>3</em>选择满意方案<i class="iconfont">&#xe805;</i></li>
        <li><em>4</em>验收后付款</li>
    </ul>
<div class="code-demo">
    <div class="ui-no-appropriate clearfix">
      <div class="ui-no-appropriate-h1 yahei">没有找到合适的服务商，直接发个需求试试？ <a target="_blank" href="{%geturl rule="/pub/step1" domain="task"%}?from_cid=10006" class="ui-btn ui-btn-inverse">立即发布需求</a></div>
      <small class="ui-no-appropriate-small">发布个需求，让众多服务商主动参与，轻松挑选满意方案</small>
    </div>
</div>
    <div class="ui-no-appropriate clearfix">
      <div class="ui-no-appropriate-h1 yahei">没有找到合适的服务商，直接发个需求试试？ <a target="_blank" href="{%geturl rule="/pub/step1" domain="task"%}?from_cid=10006" class="ui-btn ui-btn-inverse">立即发布需求</a></div>
      <small class="ui-no-appropriate-small">发布个需求，让众多服务商主动参与，轻松挑选满意方案</small>
    </div>
<div class="two_min_popwin">
    <div class="two_min_popwin-close">×</div>
    <div class="two_min_popwin-body yahei">
        <p class="two_min_popwin-no">没有找到合适的服务商？</p>
        <p class="two_min_popwin-free">免费发布需求，服务商主动找上门</p>
        <a data-linkid="taskentry-bottom" rel="nofollow" target="_blank" href='{%geturl rule="/pub/step1" domain="task"%}?from_cid=10006' class="ui-btn ui-btn-inverse">
            免费发布需求
        </a>
    </div>
</div>

###步骤导航
用`display:table` `display:table-cell`布局，默认3步，如需改变步骤数，需要针对ie6、7重置百分比

    *width:33%; //ie6-7

<div class="code-demo">
    <ul class="ui-step unstyled">
        <li class="ui-step-done">
            <div class="item-hd">
                <span class="item-bg"></span>
                <span class="item-ico">1</span>
            </div>
            <div class="item-bd yahei">
                选择入驻栏目
            </div>
        </li>
        <li class="ui-step-done active">
            <div class="item-hd">
                <span class="item-bg"></span>
                <span class="item-ico">2</span>
            </div>
            <div class="item-bd yahei">
                选择入驻栏目
            </div>
        </li>
        <li>
            <div class="item-hd">
                <span class="item-bg"></span>
                <span class="item-ico">3</span>
            </div>
            <div class="item-bd yahei">
                选择入驻栏目
            </div>
        </li>
    </ul>
</div>
    <ul class="ui-step">
        <li class="ui-step-done">
            <div class="item-hd">
                <span class="item-bg"></span>
                <span class="item-ico">1</span>
            </div>
            <div class="item-bd yahei">
                选择入驻栏目
            </div>
        </li>
        <li class="ui-step-done active">
            <div class="item-hd">
                <span class="item-bg"></span>
                <span class="item-ico">2</span>
            </div>
            <div class="item-bd yahei">
                选择入驻栏目
            </div>
        </li>
        <li>
            <div class="item-hd">
                <span class="item-bg"></span>
                <span class="item-ico">3</span>
            </div>
            <div class="item-bd yahei">
                选择入驻栏目
            </div>
        </li>
    </ul>
**/
.ui-step {
  margin: 20px 0;
  list-style: none;
  overflow: hidden;
  zoom: 1;
  display: table;
  width: 100%;
}
.ui-step li {
  display: table-cell;
  *float: left;
  /* ie6-7 */
  *width: 33%;
  /* ie6-7 */
  text-align: center;
}
.ui-step li .item-hd {
  height: 30px;
  position: relative;
}
.ui-step li .item-hd .item-ico {
  display: inline-block;
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  color: #fff;
  background: url("../../lib/img/step.png") 0 -29px no-repeat;
}
.ui-step li .item-hd .item-bg {
  display: block;
  position: absolute;
  left: 0;
  top: 12px;
  width: 100%;
  height: 4px;
  background: #d8d8d8;
}
.ui-step li .item-bd {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}
.ui-step li.ui-step-done .item-bg {
  background: #ff8800;
}
.ui-step li.ui-step-done .item-ico {
  background-position: 0 0;
}
.ui-step li.active {
  color: #ff8800;
}
.ui-no-appropriate {
  margin-top: 15px;
  background: #fff;
  padding: 28px 20px;
}
.ui-no-appropriate-h1 {
  position: relative;
  font-size: 22px;
  color: #ff8a00;
}
.ui-no-appropriate-small {
  font-size: 12px;
  font-family: '宋体';
  color: #999;
  display: block;
  text-indent: 3px;
  margin-top: 1px;
}
.ui-no-appropriate-h1 .ui-btn {
  position: absolute;
  right: 0;
  *right: 20px;
  top: 9px;
  padding: 10px 52px;
  font: bold 20px/1 "宋体";
}
ul.ui-app-step {
  margin: 20px 0 0 0;
  list-style: none;
  overflow: hidden;
}
.ui-app-step li {
  float: left;
  height: 30px;
  line-height: 30px;
  position: relative;
  font-size: 14px;
  color: #999;
  background: #f7f7f7;
  text-align: center;
  width: 25%;
  *width: 24.5%;
}
.ui-app-step li em {
  color: #ff8a00;
  margin-right: 15px;
  font: italic 20px arial;
  position: relative;
  top: 2px;
}
.ui-app-step li i {
  color: #fff;
  font-size: 62px;
  position: absolute;
  top: -2px;
  right: -10px;
  *right: 0;
  *top: -1;
  z-index: 2;
}
.item-step .ui-app-step {
  margin: 0;
}
.two_min_popwin-mask {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 120;
}
.two_min_popwin {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 6px solid rgba(0, 0, 0, 0.7);
  width: 420px;
  height: 220px;
  background-color: #fff;
  z-index: 122;
}
.two_min_popwin .two_min_popwin-close {
  color: #000;
  position: relative;
  width: 30px;
  height: 30px;
  right: 0;
  top: 3px;
  font-size: 36px;
  line-height: 32px;
  text-align: center;
  left: 387px;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
.two_min_popwin .two_min_popwin-close:hover {
  background-color: #ff4400;
  color: #fff;
}
.two_min_popwin .two_min_popwin-body {
  text-align: center;
}
.two_min_popwin .two_min_popwin-no {
  color: #666;
  font-size: 16px;
}
.two_min_popwin .two_min_popwin-free {
  color: #000;
  font-size: 22px;
  font-weight: 700;
}
.two_min_popwin .ui-btn {
  padding: 15px 35px;
  font-size: 18px;
  margin-top: 20px;
}
/**
下拉菜单
=================
Created：**laotan** <span class="gray">（2013/08/07 10:22:43）</span>

Updated：**laotan** <span id="updateTime"></span>

--------------------

未展开

<div class="code-demo">
    <div class="ui-dropdown">
        <a href="#none" class="ui-dropdown-hd">更多 <b></b></a>
        <ul class="unstyled ui-dropdown-menu">
            <li><a href="#none">微企孵化园</a></li><li><a href="#none">人人能任务</a></li><li><a href="#none">微企孵化园</a></li><li><a href="#none">人人能任务专场</a></li></ul>
    </div>
</div>
    <div class="ui-dropdown">
        <a href="#none" class="ui-dropdown-hd">更多 <b></b></a>
        <ul class="unstyled ui-dropdown-menu">
            <li><a href="#none">微企孵化园</a></li><li><a href="#none">人人能任务</a></li><li><a href="#none">微企孵化园</a></li><li><a href="#none">人人能任务专场</a></li></ul>
    </div>

菜单右对齐,给ul加class`fr`

ie6 mouseover效果,给ui-dropdown，加减样式`.hover`

<div class="code-demo">
    <div class="ui-dropdown  hover">
        <a href="#none" class="ui-dropdown-hd">更多 <b></b></a>
        <ul class="unstyled fr ui-dropdown-menu">
            <li><a href="#none">微企孵化园</a></li><li><a href="#none">人人能任务</a></li><li><a href="#none">微企孵化园</a></li><li><a href="#none">人人能任务专场</a></li></ul>
    </div>
</div>
    <div class="ui-dropdown">
        <a href="#none" class="ui-dropdown-hd">更多 <b></b></a>
        <ul class="unstyled fr ui-dropdown-menu">
            <li><a href="#none">微企孵化园</a></li><li><a href="#none">人人能任务</a></li><li><a href="#none">微企孵化园</a></li><li><a href="#none">人人能任务专场</a></li></ul>
    </div>

**/
.ui-dropdown {
  display: inline-block;
  position: relative;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  line-height: 18px;
  z-index: 100;
  white-space: nowrap;
}
.ui-dropdown-hd {
  display: inline-block;
  padding: 1px 14px 1px 8px;
}
.ui-dropdown-hd b {
  position: absolute;
  right: 3px;
  top: 7px;
  width: 0;
  height: 0;
  border-width: 4px;
  border-style: solid;
  border-color: #666 transparent transparent;
  font-size: 0;
  line-height: 0;
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  transition: transform .5s ease;
}
.ui-dropdown-hd:hover {
  text-decoration: underline;
  color: #ff6600;
}
.ui-dropdown-menu {
  display: none;
}
.ui-dropdown.hover .ui-dropdown-hd,
.ui-dropdown:hover .ui-dropdown-hd {
  position: relative;
  z-index: 1;
  border: solid #bfbfbf;
  padding: 0 13px 1px 7px;
  border-width: 1px 1px 0;
  background: #fff;
}
.ui-dropdown.hover .ui-dropdown-hd b,
.ui-dropdown:hover .ui-dropdown-hd b {
  border-color: #fff #fff #666\9;
  top: 3px;
  top: 6px\9;
  *top: 3px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
  transition: transform .5s ease;
}
.ui-dropdown.hover .ui-dropdown-menu,
.ui-dropdown:hover .ui-dropdown-menu {
  display: block;
  position: absolute;
  top: 100%;
  margin-top: -1px;
  left: 0;
  float: left;
  min-width: 72px;
  padding: 5px;
  border: 1px solid #bfbfbf;
  background: #fff;
}
.ui-dropdown.hover .ui-dropdown-menu a,
.ui-dropdown:hover .ui-dropdown-menu a {
  display: block;
  padding: 2px 5px;
}
.ui-dropdown.hover .ui-dropdown-menu.fr,
.ui-dropdown:hover .ui-dropdown-menu.fr {
  left: auto;
  right: 0;
}
/**
弹出层
=================
Created：**laotan** <span class="gray">（2013/08/15 09:50:35）</span>

Updated：**laotan** <span id="updateTime"></span>

------------------------------

<div  class="ui-pop" tabindex="-1" role="dialog">
  <div class="ui-pop-header">
    <a class="ui-pop-close" href="javascript:;">&times;</a>
    <h3>ui-pop header</h3>
  </div>
  <div class="ui-pop-body">


            <p>One fine body…</p>
  </div>
  <div class="ui-pop-footer">
    <button class="ui-btn" data-dismiss="ui-pop">关闭</button>
    <button class="ui-btn ui-btn-inverse">我是自定义文字</button>
  </div>
</div>
    <div  class="ui-pop" tabindex="-1" role="dialog">
        <div class="ui-pop-header">
            <a class="ui-pop-close" href="javascript:;">&times;</a>
            <h3>ui-pop header</h3>
        </div>
        <div class="ui-pop-body">

            <p>One fine body…</p>
        </div>
        <div class="ui-pop-footer">
            <button class="ui-btn" data-dismiss="ui-pop">关闭</button>
            <button class="ui-btn ui-btn-inverse">我是自定义文字</button>
        </div>
    </div>
    <div class="ui-mask"></div>
**/
.ui-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 490;
  background-color: #888;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.ui-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 500;
  width: 560px;
  margin-left: -280px;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  outline: none;
}
.ui-pop background-clip {
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.ui-pop-header {
  padding: 9px 15px;
  border-bottom: 1px solid #eee;
}
.ui-pop-header .ui-pop-close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.ui-pop-header .ui-pop-close:hover,
.ui-pop-header .ui-pop-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.ui-pop-header h3 {
  margin: 0;
  line-height: 30px;
}
.ui-pop-body {
  position: relative;
  overflow-y: auto;
  padding: 15px;
}
.ui-pop-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  text-align: right;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
  -moz-box-shadow: inset 0 1px 0 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff;
}
.ui-pop-footer .ui-btn + .ui-btn {
  margin-left: 5px;
  margin-bottom: 0;
}
html.ui-noscroll {
  overflow: hidden;
}
html.ui-noscroll body {
  overflow: hidden;
}
.ui-window2-wrap {
  position: fixed;
  overflow: auto;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 500;
}
.ui-window2-wrap .ui-pop {
  position: absolute;
}
/**
返回顶部常用操作
=================
Created：**laotan** <span class="gray">（2013/08/15 09:50:35）</span>

Updated：**laotan** <span id="updateTime"></span>

--------------------

用`ui-tools-top` `ui-tools-bottom`两部分控制，抛弃ie6，fixed定位

    <div class="ui-tools-top">
        <a href="#" title="发需求咨询"><i class="ui-ico ui-ico-cs"></i></a>
    </div>
    <div class="ui-tools-bottom">
        <div class="ui-tools-gotop">
            <a class="item-tools" href="#" title="返回顶部"><i class="iconfont">&#xe806;</i></a>
            <i class="ui-ico ui-ico-toppig"></i>
        </div>
        <div class="ui-tools-wechat">
            <a class="item-tools" href="http://app.zhubajie.com" target="_blank">
                <span class="item-txt">官方微信</span>
                <img class="item-chat" src="/t5s/lib/img/wechat.png" alt="官方微信"/>
            </a>
        </div>
        <div class="ui-tools-app">
            <a class="item-tools" href="http://app.zhubajie.com" target="_blank">
                <span class="item-ico"><i class="ui-ico ui-ico-mobile"></i></span>
                <span class="item-txt">移动应用</span>
            </a>
        </div>
        <div class="ui-tools-feed">
            <a class="item-tools" href="#">
                <span class="item-ico"><i class="ui-ico ui-ico-feed"></i></span>
                <span class="item-txt">意见反馈</span>
            </a>
        </div>
    </div>

<div class="ui-tools-top">
    <a href="#" title="发需求咨询"><i class="ui-ico ui-ico-cs"></i></a>
</div>
<div class="ui-tools-bottom">
    <div class="ui-tools-gotop">
        <a class="item-tools" href="#" title="返回顶部"><i class="iconfont">&#xe806;</i></a>
        <i class="ui-ico ui-ico-toppig"></i>
    </div>
    <div class="ui-tools-wechat">
        <a class="item-tools" href="http://app.zhubajie.com" target="_blank">
            <span class="item-txt">官方微信</span>
            <img class="item-chat" src="/t5s/lib/img/wechat.png" alt="官方微信"/>
        </a>
    </div>
    <div class="ui-tools-app">
        <a class="item-tools" href="http://app.zhubajie.com" target="_blank">
            <span class="item-ico"><i class="ui-ico ui-ico-mobile"></i></span>
            <span class="item-txt">移动应用</span>
        </a>
    </div>
    <div class="ui-tools-feed">
        <a class="item-tools" href="#">
            <span class="item-ico"><i class="ui-ico ui-ico-feed"></i></span>
            <span class="item-txt">意见反馈</span>
        </a>
    </div>
</div>
**/
.ui-tools-top,
.ui-tools-bottom {
  position: fixed;
  _position: absolute;
  top: 160px;
  right: 10px;
}
.ui-tools-bottom {
  top: auto;
  bottom: 115px;
  z-index: 100;
}
.ui-tools-bottom .item-tools {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  background: #989898;
  color: #fff;
  text-align: center;
  margin-bottom: 1px;
}
.ui-tools-bottom .item-tools:hover {
  color: #fff;
  background: #666666;
  text-decoration: none;
}
.ui-tools-bottom .item-ico,
.ui-tools-bottom .item-txt {
  display: block;
  height: 41px;
}
.ui-tools-bottom .ui-ico {
  vertical-align: middle;
}
.ui-tools-bottom .item-txt {
  padding: 0 5px;
  height: 40px;
  line-height: 12px;
  font-size: 12px;
}
.ui-tools-bottom .item-ico {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}
.ui-tools-gotop .iconfont {
  font-size: 18px;
}
.ui-tools-gotop .ui-ico-toppig {
  position: absolute;
  left: -12px;
  bottom: 70px;
}
.ui-tools-app {
  position: relative;
}
.ui-tools-app a:hover .item-ico {
  margin-top: -30px;
}
.ui-tools-app a:hover .ui-poptipnoc {
  display: block;
}
.ui-tools-app .ui-poptipnoc {
  position: absolute;
  display: none;
  left: -126px;
  top: -65px;
  width: 120px;
  height: 156px;
}
.ui-tools-app .ui-poptipnoc-bd {
  padding: 11px;
  color: #666;
  white-space: nowrap;
}
.ui-tools-app .ui-poptipnoc-bd > div:first-child {
  display: none;
}
.ui-tools-app .ui-poptipnoc-bd > div {
  display: inline-block;
  vertical-align: top;
}
.ui-tools-app .ui-poptipnoc-bd > div.ui-vline {
  width: 1px;
  height: 145px;
  background: #ccc;
  margin: -6px 13px;
  display: none;
}
.ui-tools-app .ui-poptipnoc-bd > div > div {
  width: 100px;
  height: 100px;
}
.ui-tools-app .ui-poptipnoc-bd > div .item-weixin {
  background: url("../../lib/img/weixin-zbj100.png");
}
.ui-tools-app .ui-poptipnoc-bd > div .item-mobile {
  background: url("http://cms.zbjimg.com/mobile/page-tools-qrcode.png");
}
.ui-tools-app .ui-poptipnoc-bd img {
  width: 100px;
  height: 100px;
  vertical-align: top;
}
.ui-tools-app .ui-poptipnoc-bd p {
  text-align: center;
  line-height: 16px;
  margin-top: 4px;
}
.ui-tools-feed .item-ico {
  margin-top: -30px;
}
.ui-tools-feed a:hover .item-ico {
  margin-top: 0;
}
/*右侧预约客服*/
.ui-tools-service {
  position: relative;
  margin-left: 0px!important;
}
.ui-tools-service .ui-poptipnoc-arrow {
  right: 39px;
  z-index: 11;
  display: none;
  border-left-color: #dcdbdb!important;
}
.ui-tools-service .item-ico {
  margin-top: 0px;
}
.ui-tools-service .ui-ico-service {
  width: 32px;
  height: 32px;
  background: url("../../lib/img/global.png?2016") no-repeat -45px 2px;
}
.ui-tools-service .item-tools:hover {
  text-decoration: none;
}
.ui-tools-service .item-tools:hover .item-ico {
  margin-top: -40px;
}
.ui-tools-service .item-tools:hover .ui-poptipnoc-arrow {
  display: block;
}
.ui-tools-service .item-tools:hover .side-connect-context {
  display: block;
}
.ui-tools-service .item-tools:focus {
  text-decoration: none;
}
.ui-tools-service .item-tools:linked {
  text-decoration: none;
}
.ui-ico-feed {
  background-position: -189px -124px;
}
.ui-ico-mobile {
  background-position: -188px -165px;
}
.ui-tools-service .side-connect-context {
  width: 294px;
  padding: 10px 0 10px 16px;
  position: absolute;
  left: -320px;
  top: -1px;
  border: 1px solid #dcdbdb;
  background-color: #fff;
  list-style: none;
  font-family: "microsoft yahei";
  display: none;
  margin: 0px;
}
.ui-tools-service .side-connect-item {
  height: 53px;
  padding: 10px 0 11px 0;
  border-top: 1px dashed #f3f3f3;
  color: #666;
  text-align: left;
}
.ui-tools-service .side-connect-item:hover .side-connect-item-title {
  color: #ff6a04;
}
.ui-tools-service .side-connect-item-first {
  border-top: none;
}
.ui-tools-service .side-connect-item-first:hover .side-connect-item-icon {
  background-position: 0 -175px;
}
.ui-tools-service .side-connect-item-first:hover .side-connect-item-next {
  display: inline-block;
}
.ui-tools-service .side-connect-item-middle:hover .side-connect-item-icon {
  background-position: 0 -190px;
}
.ui-tools-service .side-connect-item-middle:hover .side-connect-item-next {
  display: inline-block;
}
.ui-tools-service .side-connect-item-last {
  height: 70px;
  border-bottom: none;
}
.ui-tools-service .side-connect-item-box {
  line-height: 26px;
}
.ui-tools-service .side-connect-item-box .side-connect-item-icon {
  display: inline-block;
  vertical-align: middle;
}
.ui-tools-service .connect-item-box-content {
  line-height: 24px;
  position: relative;
}
.ui-tools-service .connect-item-box-content .side-connect-item-next {
  display: none;
  width: 17px;
  height: 17px;
  position: absolute;
  top: -11px;
  right: 18px;
  background-position: 0 -256px;
  cursor: pointer;
}
.ui-tools-service .connect-item-box-content .side-connect-item-next:hover {
  background-position: 0 -239px;
}
.ui-tools-service .connect-item-box-content .side-connect-item-point {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background-color: #666;
  vertical-align: middle;
}
.ui-tools-service .side-connect-item-box-last {
  line-height: 18px;
}
.ui-tools-service .side-connect-item-box-last .side-connect-item-content {
  color: #999;
  margin-left: 5px;
}
.ui-tools-service .item-icon-customer .side-connect-item-icon {
  width: 24px;
  height: 15px;
  background-position: 0 -160px;
}
.ui-tools-service .side-connect-item-box .side-connect-item-icon {
  display: inline-block;
  vertical-align: middle;
}
.ui-tools-service .j-slide-common-container .sprite {
  background-image: url("../../common/img/seller-sprite.png");
  background-repeat: no-repeat;
}
.ui-tools-service .item-icon-customer .side-connect-item-icon {
  width: 24px;
  height: 15px;
  background-position: 0 -160px;
}
.ui-tools-service .item-icon-estimate .side-connect-item-icon {
  width: 19px;
  height: 17px;
  background-position: 0 -207px;
}
.ui-tools-service .side-connect-item-title {
  line-height: 26px;
  vertical-align: middle;
  margin-left: 5px;
}
/**
主站公用header
============
Created：**laotan** <span class="gray">（2013/08/12 14:33:07）</span>

Updated：**laotan** <span id="updateTime"></span>

---------------------------------------

<div class="code-demo">
<div class="ui-header">
    <div class="ui-header-top">
        <div class="grid">
            <div class="fr ui-header-nav">
                <a href="#">我的猪八戒</a><span class="split">|</span>
                <a href="#">呼呼</a><span class="split">|</span>
                <a href="#">手机版</a><span class="split">|</span>
                <a href="#">国际业务</a><span class="split">|</span>
                <a href="#">社区</a><span class="split">|</span>
                <a href="#">推广员</a><span class="split">|</span>
                <a href="#">猪八戒大学</a><span class="split">|</span>
                <div class="ui-dropdown">
                    <a href="#none" class="ui-dropdown-hd">更多 <i class="iconfont">&#xe822;</i></a>
                    <ul class="unstyled fr ui-dropdown-menu">
                        <li><a target="_blank" href="http://union.t5.zbj.com">推广员</a></li>
                        <li><a target="_blank" href="http://zt.t5.zbj.com/ztoper/jingji.html">经纪人</a></li>
                        <li><a target="_blank" href="http://union.t5.zbj.com/gg/wdjinpai">金牌威客</a></li>
                        <li><a target="_blank" href="http://zt.t5.zbj.com/ztoper/wqindex">微企孵化园</a></li>
                    </ul>
                </div>
            </div>
            <div class="ui-header-greet">欢迎来到猪八戒网 请<a href="#">登录</a> <a href="#">注册</a></div>
        </div>
    </div>
    <div class="grid ui-header-bd">
        <h1 class="fl ui-logo"><a href="#" title="猪八戒网"><img src="/t5s/lib/img/logo.png" alt="猪八戒一呼百应"/></a></h1>
        <div class="fr ui-header-login ui-header-logined">
            <span class="item-userinfo">
                <img src="http://placehold.it/25x25" alt="username"/>
                <span class="item-username">simonpink</span>
                [<a href="#">退出</a>]
            </span>
            <a href="#" class="item-usernews">
                <i class="iconfont">&#xe81d;</i><span class="item-newsnum">43</span>
            </a>
            <a class="item-usersetting" href="#"><i class="iconfont">&#xe820;</i></a>
        </div>
        <div class="fl ui-tab-search">
            <ul class="ui-tab-nav">
                <li class="active"><a href="#">高手</a><span class="split">|</span></li>
                <li><a href="#">需求</a></li>
            </ul>
            <div class="ui-tab-bd">
                <form action="#" class="ui-form-search">
                    <div class="input-append">
                        <input type="text" class="search-query" placeholder="找高手"><button type="submit" class="ui-btn ui-btn-inverse"><i class="iconfont">&#xe809;</i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
    <div class="ui-header">
        <div class="ui-header-top">
            <div class="grid">
                <div class="fr ui-header-nav">
                    <a href="#">我的猪八戒</a><span class="split">|</span>
                    <a href="#">呼呼</a><span class="split">|</span>
                    <a href="#">手机版</a><span class="split">|</span>
                    <a href="#">国际业务</a><span class="split">|</span>
                    <a href="#">社区</a><span class="split">|</span>
                    <a href="#">推广员</a><span class="split">|</span>
                    <a href="#">猪八戒大学</a><span class="split">|</span>
                    <a href="#">更多</a>
                </div>
                <div class="ui-header-greet">欢迎来到猪八戒网 请<a href="#">登录</a> <a href="#">注册</a></div>
            </div>
        </div>
        <div class="grid ui-header-bd">
            <h1 class="fl ui-logo"><a href="#" title="猪八戒网"><img src="/t5s/lib/img/logo.png" alt="猪八戒一呼百应"/></a></h1>
            <div class="fr ui-header-login ui-header-logined">
                <span class="item-userinfo">
                    <img src="http://placehold.it/25x25" alt="username"/>
                    <span class="item-username">simonpink</span>
                    [<a href="#">退出</a>]
                </span>
                <a href="#" class="item-usernews">
                    <i class="iconfont">&#xe81d;</i><span class="item-newsnum">43</span>
                </a>
                <a class="item-usersetting" href="#"><i class="iconfont">&#xe820;</i></a>
            </div>
            <div class="fl ui-tab-search">
                <ul class="ui-tab-nav">
                    <li class="active"><a href="#">高手</a><span class="split">|</span></li>
                    <li><a href="#">需求</a></li>
                </ul>
                <div class="ui-tab-bd">
                    <form action="#" class="ui-form-search">
                        <div class="input-append">
                            <input type="text" class="search-query" placeholder="找高手"><button type="submit" class="ui-btn ui-btn-inverse"><i class="iconfont">&#xe809;</i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
**/
.ui-header {
  position: relative;
  background: #FFF;
  z-index: 20;
}
.ui-header-top {
  height: 25px;
  background: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  line-height: 25px;
  color: #333;
  width: 100%;
  z-index: 210;
}
.ui-header-top .current-site {
  margin-left: 14px;
  font-weight: bold;
}
.ui-header-bd {
  height: 77px;
  padding: 35px 0 15px;
}
.ui-header-bd .ui-logo {
  position: relative;
  margin: 0 0;
  width: 400px;
}
.ui-header-bd .ui-logo .ui-logo-main img {
  height: 64px;
  width: 123px;
}
.ui-header-bd .ui-logo-sub {
  display: block;
  position: absolute;
  top: 0;
  left: 124px;
  width: 235px;
  height: 64px;
  overflow: hidden;
  background-color: #fff;
  z-index: 2;
  color: #888;
}
.ui-header-bd .ui-logo-sub .item-txt {
  display: inline-block;
  margin-left: 26px;
  padding: 0 26px;
  line-height: 64px;
  border-left: 1px solid #888;
  font-size: 26px;
  font-weight: 400;
}
.ui-header-bd .ui-logo-sub:hover {
  text-decoration: none;
  color: #888;
}
.ui-header-entry .ui-header-task-entry {
  border-radius: 0;
  margin-left: 10px;
  font-size: 14px;
  padding: 0 8px 0 0;
  position: relative;
  height: 43px;
  line-height: 43px;
  border: 1px solid #ff9400;
  background: #ff9400;
}
.ui-header-entry .ui-header-task-entry a.ui-header-task-entry-link {
  color: #fff;
  padding-right: 18px;
  padding-left: 18px;
}
.ui-header-entry .ui-header-task-entry b {
  top: 21px;
  right: 13px;
  border-color: transparent;
  border-top-color: #fff;
}
.ui-header-entry .ui-header-task-entry:hover a.ui-header-task-entry-link,
.ui-header-entry .ui-header-task-entry-hover a.ui-header-task-entry-link {
  text-decoration: none;
  background: none;
  border: none;
  padding: 1px 18px;
}
.ui-header-entry .ui-header-task-entry:hover b,
.ui-header-entry .ui-header-task-entry-hover b {
  top: 21px;
  right: 6px;
  border-color: transparent;
  border-top-color: #fff;
}
.ui-header-entry .ui-header-task-entry:hover .ui-header-task-panel,
.ui-header-entry .ui-header-task-entry-hover .ui-header-task-panel {
  color: #000;
  cursor: default;
  right: -1px;
  margin-top: -1px;
  padding: 0;
  border: 1px solid #dcdcdc;
  width: 288px;
}
.ui-header-entry .ui-header-task-entry-hover b {
  right: 10px;
}
.ui-header-entry .ui-header-task-panel .task-panel-hd,
.ui-header-entry .ui-header-task-panel .task-panel-bd {
  margin: 15px 17px;
}
.ui-header-entry .ui-header-task-panel .task-panel-hd {
  border-bottom: 1px dashed #dcdcdc;
  padding-bottom: 10px;
  font-size: 18px;
  color: #333;
}
.ui-header-entry .ui-header-task-panel .task-panel-bd {
  margin-bottom: 23px;
}
.ui-header-entry .ui-header-task-panel .task-reason {
  text-align: left;
}
.ui-header-entry .ui-header-task-panel .task-reason li {
  background: url("../../lib/img/taskbgs.png") no-repeat left center;
  background-repeat: no-repeat;
  color: #9C9C9C;
  margin-bottom: 17px;
  padding-left: 56px;
  padding-top: 5px;
  font-size: 12px;
}
.ui-header-entry .ui-header-task-panel .task-reason .task-reason-response {
  background-position: 0 -45px;
}
.ui-header-entry .ui-header-task-panel .task-reason .task-reason-join {
  background-position: 0 -102px;
}
.ui-header-entry .ui-header-task-panel .task-reason .task-reason-result {
  background-position: 0 -157px;
}
.ui-header-entry .ui-header-task-panel .task-reason .task-reason-free {
  background-position: 0 -211px;
}
.ui-header-entry .ui-header-task-panel .task-reason .task-reason-desc {
  font-size: 14px;
  color: #7a7a7a;
}
.ui-header-entry .ui-header-task-panel a.ui-header-gotopub {
  padding: 8px 75px;
}
.ui-header-entry .ui-header-task-panel .task-panel-ft {
  background: #eaecea;
  border-top: 1px solid #dcdcdc;
  padding: 17px;
  font-size: 12px;
  line-height: 20px;
}
.ui-header-entry .ui-header-task-panel .task-panel-ft .ui-header-gototaskhall {
  background: url("../../lib/img/taskbgs.png") no-repeat 0 0;
  width: 58px;
  height: 40px;
  margin-right: -5px;
}
.ui-header-entry .ui-header-task-panel .task-panel-ft .ui-header-tasklist {
  width: 180px;
  height: 40px;
  overflow: hidden;
  line-height: 12px;
}
.ui-header-entry .ui-header-task-panel .task-panel-ft .ui-header-tasklist .task-list-item .task-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 6px;
}
.ui-header-entry .ui-header-task-panel .task-panel-ft .ui-header-tasklist .task-list-item .task-title a {
  display: inline;
  padding: 0;
  white-space: nowrap;
}
.ui-header-entry .ui-header-task-panel .task-panel-ft .ui-header-tasklist .task-list-item .task-detail {
  display: inline-block;
  width: 100%;
  margin-top: 10px;
}
.ui-header-entry .ui-header-task-panel .task-panel-ft .ui-header-tasklist .task-list-item .task-detail span {
  display: inline-block;
  color: #999;
}
.ui-header-entry .right-arr {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #FFF;
  margin-left: 6px;
  position: relative;
  top: 1px;
}
.ui-header-search {
  margin-right: 10px;
  /* 搜索框默认搜索提示 */
}
.ui-header-search .search-query,
.ui-header-search .input-append .ui-btn-inverse {
  padding-top: 10px;
  padding-bottom: 9px;
  border: 3px solid #ff9400;
}
.ui-header-search .search-query {
  width: 360px;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  padding: 10px 6px 9px 90px;
  vertical-align: top;
  outline: 0;
}
.ui-header-search input.search-query:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #ff9400;
}
.ui-header-search .input-append {
  margin-bottom: 0;
}
.ui-header-search .input-append .ui-btn-inverse {
  font-size: 14px;
  line-height: 20px;
  background: #ff9400;
  padding-left: 15px;
  padding-right: 15px;
  color: #fff;
}
.ui-header-search .ui-dropdown-hd {
  background: #f6f6f6;
  padding: 10px 10px 9px 15px;
  line-height: 20px;
  height: 20px;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #f6f6f6;
}
.ui-header-search .ui-dropdown-hd span {
  display: inline-block;
  width: 50px;
}
.ui-header-search .ui-dropdown-hd .iconfont {
  color: #cbcbcb;
}
.ui-header-search .ui-dropdown {
  position: absolute;
  cursor: pointer;
  font-size: 12px;
  margin-top: 3px;
  margin-left: 3px;
}
.ui-header-search .ui-dropdown.hover .ui-dropdown-hd,
.ui-header-search .ui-dropdown:hover .ui-dropdown-hd {
  padding: 10px 10px 9px 15px;
  border-width: 0 1px;
  border-left-color: #f6f6f6;
  border-right-color: #e5e5e5;
}
.ui-header-search .ui-dropdown.hover .ui-dropdown-hd:hover,
.ui-header-search .ui-dropdown:hover .ui-dropdown-hd:hover {
  text-decoration: none;
}
.ui-header-search .ui-dropdown.hover .ui-dropdown-menu,
.ui-header-search .ui-dropdown:hover .ui-dropdown-menu {
  margin-top: -1px;
  padding: 0;
  border-top: none;
  min-width: 82px;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}
.ui-header-search .ui-dropdown.hover .ui-dropdown-menu a,
.ui-header-search .ui-dropdown:hover .ui-dropdown-menu a {
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 15px;
}
.ui-header-search .ui-dropdown.hover .ui-dropdown-menu a:hover,
.ui-header-search .ui-dropdown:hover .ui-dropdown-menu a:hover {
  text-decoration: none;
  background: #eee;
}
.ui-header-search .placeholder-tip {
  color: #9c9c9c;
  font-size: 14px;
  top: 13px;
  left: 94px;
  position: absolute;
  z-index: 3;
}
.ui-header-bd-delimiter {
  margin-top: 16px;
  color: #ccc;
}
.ui-header-search-hotwords {
  color: #999;
  display: none;
  overflow: hidden;
  width: 525px;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 5px;
  font-family: simsun, serif;
}
.ui-header-search-hotwords a {
  color: #999;
  margin-right: 13px;
  font-size: 12px;
  line-height: 1;
}
.ui-header-search-hotwords a:hover {
  text-decoration: underline;
  color: #F60;
}
.ui-header-search-hotwords .hot {
  color: #ff9000;
}
.ui-header-hashotwords .ui-header-search-hotwords {
  display: block;
}
.ui-header .item-userinfo .nouserinfo {
  padding: 0!important;
}
.ui-account {
  *width: 180px;
  min-width: 180px;
}
.ui-account li {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-bottom: 1px dashed #d8d8d8;
}
.ui-account li a {
  display: inline-block !important;
  padding: 0!important;
}
.ui-account li a:hover {
  text-decoration: none;
}
.ui-account li .zbj-tooltip {
  display: inline-block;
  width: 12px;
  height: 11px;
  overflow: hidden;
  line-height: 99;
  margin-top: 9px;
  background: url(../../../r/page/user_money_detail.png) no-repeat -17px 0;
}
.ui-account li.item-account {
  overflow: hidden;
  white-space: nowrap;
}
.ui-account li.item-account a {
  margin-left: 5px;
}
.ui-account li.item-ft {
  margin-top: -1px;
  background: #eee;
  border: none;
}
.t5s.seller .ui-menu-bd {
  width: 870px;
}
/* mobile entrance */
.mqrcode-wrap {
  display: inline;
  visibility: hidden;
  position: relative;
  -webkit-transition: 0s visibility;
  -moz-transition: 0s visibility;
  -o-transition: 0s visibility;
  transition: 0s visibility;
}
#j-mobiphone:hover ~ .mqrcode-wrap,
.mqrcode-wrap:hover {
  visibility: visible;
}
.mqrcode.ui-poptipnoc {
  position: absolute;
  display: block;
  padding: 0;
  left: -126px;
  top: 16px;
  width: 180px;
  height: 225px;
}
.mqrcode .ui-poptipnoc-bd {
  padding: 0;
}
.mqrcode p {
  text-align: center;
  color: #666;
  line-height: 18px;
}
.mqrcode-img {
  margin: 5px;
  margin-bottom: 1px;
  width: 170px;
  height: 170px;
  background: url("../../lib/img/mqrcode.png");
}
.ui-header-nav .ui-dropdown-menu.navmsg {
  width: 140px;
  padding: 5px;
}
.ui-header-nav .ui-dropdown-menu.navmsg .highlight {
  float: right;
}
.ui-menu-bd .ui-menu-special {
  display: none;
}
.hall-nav a {
  color: #666;
}
.hall-nav a:hover {
  color: #F60;
}
.hall-nav {
  border-bottom: 2px solid #ff8a00;
  background-color: #FFF;
}
.halnavusernewsl-nav .grid {
  overflow: hidden;
}
.hall-nav ul {
  height: 35px;
  overflow: hidden;
}
.hall-nav ul li {
  float: left;
  padding: 7px 10px;
  margin-right: 10px;
}
.hall-nav ul a {
  text-decoration: none;
}
.hall-nav ul.fl li.cur {
  background-color: #ff8a00;
  box-shadow: 3px 10px 10px #BBB;
}
.hall-nav ul.fl li.cur a {
  color: white;
}
.hall-nav ul.fr li.cur a {
  color: #FF8A00;
}
.hall-nav ul.fl a {
  font-size: 16px;
}
.hall-nav ul.fr li {
  padding: 7px 0;
  margin-left: 10px;
}
.hall-nav h2 {
  font-weight: normal;
  font-size: 1em;
  margin: 0;
}
.ui-dropdown:hover .ui-dropdown-menu.hezuo-login a {
  padding: 0;
  padding-left: 20px;
  display: inline;
}
.hezuo-login.ui-dropdown-menu li {
  margin-bottom: 5px;
  float: none;
  width: auto;
}
.hezuo-login li {
  float: right;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  padding-top: 7px;
}
.hezuo-login li a {
  display: block;
  width: 16px;
  height: 16px;
  background: url(../../../r/pic/hezuo-loginbg.png) no-repeat;
}
.hezuo-login li a.qq {
  background-position: 0 -32px;
}
.hezuo-login li a.xinL {
  background-position: 0 -64px;
}
.hezuo-login li a.touban {
  background-position: 0 -48px;
}
.hezuo-login li a.ren {
  background-position: 0 -16px;
}
.hezuo-login li a.taob {
  background-position: 0 0px;
}
.hezuo-login li a.zhubajie {
  background: url(../../../r/p/login-zbj.png) no-repeat;
}
.ui-header-nav .item-usernews {
  position: relative;
}
.ui-header-nav .ui-poptip {
  z-index: 100;
}
.navusernews {
  position: relative;
}
.navusernews .ui-poptipnoc {
  left: -60px;
  top: 15px;
  white-space: nowrap;
}
.navusernews .ui-poptipnoc .ui-poptipnoc-bd {
  color: #666;
  padding: 3px 8px;
  width: 75px;
  height: 16px;
  line-height: 16px;
  cursor: default;
}
.navusernews .ui-poptipnoc .ui-poptipnoc-arrow {
  right: 12px;
  left: auto;
  border-width: 6px;
  top: -6px;
  margin-left: -6px;
  border-top-width: 0;
  border-bottom-color: #ffc059;
}
.navusernews .ui-poptipnoc .ui-poptipnoc-arrow i {
  border-width: 5px;
  top: 1px;
  margin-left: -5px;
  border-top-width: 0;
  border-bottom-color: #fff;
}
.navusernews:hover .ui-poptipnoc {
  display: none;
}
.ui-header-top .ui-dropdown {
  z-index: 101;
}
.ui-header-nav .menu-tips-num {
  height: 17px;
  line-height: 17px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: normal;
  background: #FE6600;
  border-radius: 3px;
  color: #fff;
  text-shadow: none;
}
#j-msg-recommend {
  display: none;
}
.ui-header-mini .ui-header-a-d {
  display: none;
}
.ui-header-mini .ui-header-bd {
  height: 38px;
  padding: 7px 0 6px;
}
.ui-header-mini .ui-logo .ui-logo-main img {
  height: 38px;
  width: 73px;
}
.ui-header-mini .ui-header-bd-delimiter {
  margin-top: 12px;
}
.ui-header-mini .ui-header-task-entry {
  height: 34px;
  line-height: 34px;
}
.ui-header-mini .ui-header-task-entry b,
.ui-header-mini .ui-header-task-entry:hover b {
  top: 16px;
}
.ui-header-mini .ui-header-task-entry-hover b {
  top: 16px;
}
.ui-header-mini .ui-header-search .input-append .ui-btn-inverse {
  padding-top: 0;
  padding-bottom: 0;
  height: 36px;
}
.ui-header-mini .ui-header-search .ui-dropdown-hd,
.ui-header-mini .ui-header-search .ui-dropdown.hover .ui-dropdown-hd,
.ui-header-mini .ui-header-search .ui-dropdown:hover .ui-dropdown-hd {
  padding-top: 5px;
  padding-bottom: 5px;
}
.ui-header-mini .search-query {
  padding-top: 5px;
  padding-bottom: 4px;
  height: 21px;
  line-height: 21px;
  width: 290px;
}
.ui-header-mini .ui-logo {
  height: 38px;
}
.ui-header-mini .ui-header-bd .ui-logo-sub {
  height: 38px;
  left: 75px;
  background: #fff!important;
}
.ui-header-mini .ui-header-bd .ui-logo-sub .item-txt {
  line-height: 38px;
  font-size: 20px;
  color: #888;
}
.ui-header-mini .ui-header-hashotwords .ui-header-search-hotwords {
  display: none;
}
.ui-header-mini .placeholder-tip {
  top: 9px;
}
.ui-header-fixed .ui-header-a-d {
  display: none;
}
.ui-header-fixed .ui-header-top,
.ui-header-fixed .ui-header-bd-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.ui-header-fixed .ui-header-bd-wrap {
  top: 26px;
  background: #fff;
  box-shadow: 0 1px 5px #ddd;
  border-bottom: 1px solid #e6e6e6;
}
/*mini搜索框，用于logo过长的页面*/
.ui-header-bd-mini .ui-header-search .search-query {
  width: 300px;
}
.ui-header-fixed-tips {
  width: 180px;
  font-size: 12px;
  margin-top: 38px;
  margin-left: -30px;
  line-height: 1.5;
  display: none;
}
.ui-header-fixed .ui-header-fixed-tips {
  display: block;
}
.ui-dropdown-menu h4 {
  font-size: 14px;
  text-align: center;
}
.f-oringe {
  color: #ff6600;
}
.ui-dropdown .app-download {
  width: 230px;
  margin-top: -10px;
}
.ui-dropdown .app-download .img {
  float: left;
}
.ui-dropdown .app-download .text {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
}
.ui-dropdown .app-download .text p {
  margin: 0;
}
.ui-dropdown .app-download .text p:first-child {
  text-indent: 5px;
}
/**
菜单
============
Created：**laotan** <span class="gray">（2013/08/09 16:04:43）</span>

Updated：**laotan** <span id="updateTime"></span>

----------------------
<div class="code-demo">
<div class="ui-menu">
    <div class="grid">
        <div class="main-wrap">
            <div class="yahei main">
                <ul class="inline ui-menu-bd">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">新手上路</a></li>
                    <li><a href="#">消费者保障</a></li>

                    <li class="ui-menu-special"><a href="#">需求大厅</a></li>
                    <li class="ui-menu-special"><a href="#">找服务商</a></li>
                </ul>
                <div class="ui-menu-ext">
                    <a href="#">我要发布需求 <i class="iconfont">&#xe821;</i></a>
                </div>
            </div>
        </div>
        <div class="sidebar">
            <div class="yahei ui-menu-sidebar">全部服务分类</div>
        </div>
    </div>
</div>
</div>
    <div class="ui-menu">
        <div class="grid">
            <div class="main-wrap">
                <div class="yahei main">
                    <ul class="inline ui-menu-bd">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">雇威客</a></li>
                        <li><a href="#">需求大厅</a></li>
                        <li><a href="#">新手上路</a></li>
                        <li><a href="#">消费者保障</a></li>
                    </ul>
                    <div class="ui-menu-ext">
                        <a href="#">我要发布需求 <i class="iconfont">&#xe821;</i></a>
                    </div>
                </div>
            </div>
            <div class="sidebar">
                侧边栏内容
            </div>
        </div>
    </div>
**/
.ui-menu {
  height: 40px;
  color: #fff;
  position: relative;
  z-index: 19;
  background: #ff9400;
}
.ui-menu .main-wrap {
  border-bottom: 2px solid #ff9400;
}
.ui-menu .sidebar {
  width: 190px;
}
.ui-menu .grid .main {
  margin-left: 190px;
}
.ui-menu-bd a,
.ui-menu-ext,
.ui-menu-sidebar {
  height: 37px;
  line-height: 37px;
  font-size: 16px;
}
.ui-menu-bd {
  float: left;
  margin-bottom: 0;
}
.ui-menu-bd a {
  display: inline-block;
  padding: 0 20px;
  color: #fff;
}
.ui-menu-bd a:hover,
.ui-menu-bd li.cur {
  /*border-bottom: 3px solid #FFF;
  height: 35px;*/
}
.ui-menu-ext {
  float: left;
  width: 159px;
  margin-top: -1px;
  border: 1px solid #c10000;
  background-color: #db3e00;
  text-align: center;
}
.ui-menu-ext-pic {
  float: right;
  width: 70px;
  height: 17px;
  margin-top: 13px;
  text-align: center;
  border: none;
  background: url('../../../t5s/index/img/market.png?t=20140415') no-repeat;
  position: relative;
}
.ui-menu-ext-pic a {
  display: block;
  overflow: hidden;
  text-indent: -999px;
  line-height: 17px;
}
.ui-menu-ext a {
  color: #fff;
  display: block;
}
.ui-menu-sidebar {
  background: #f27302;
  text-align: center;
}
.ui-menu-sidebar a {
  color: #fff;
}
.ui-menu-sidebar a:hover {
  color: #fff;
  text-decoration: none;
}
.ui-menu-bd a:hover,
.ui-menu-ext a:hover {
  text-decoration: none;
}
.ui-menu-special {
  float: right;
  border-left: none;
}
.ui-menu-special a {
  font: normal 12px/38px "宋体";
  color: #fff;
  padding: 0 10px;
}
.go-edu {
  float: right;
  font-size: 16px;
}
.ui-menu-bd .ui-menu-special {
  display: none;
}
.mark-menu {
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
}
.mark-menu ul.inline li {
  padding-left: 20px;
}
.mark-menu a {
  display: inline-block;
  margin-right: 20px;
  color: #0b73bb;
}
.mark-menu a.highlight {
  color: #f00;
}
.mark-menu .split {
  padding: 0 15px;
}
body.t5s.seller .ui-menu .sidebar a {
  color: #fff;
}
body.t5s.seller .ui-menu .sidebar a:hover {
  color: #fff;
}
.uc-wrap .main-wrap {
  position: relative;
}
.uc-wrap .main-wrap .tgt-year-icon {
  width: 200px;
  height: 34px;
  position: absolute;
  top: -97px;
  z-index: 20;
  left: 172px;
}
.main-con .tgt-year-icon {
  width: 200px;
  height: 34px;
  position: absolute;
  top: -207px;
  z-index: 20;
  left: 172px;
}
.menu-tgt-img {
  position: relative;
}
/**
主站公用footer
============
Created：**laotan** <span class="gray">（2013/07/26 11:37:54）</span>

Updated：**laotan** <span id="updateTime"></span>

---------------------------------------

<div class="code-demo">
<div class="ui-footer" >
    <div class="grid">
        <div class="ui-footer-about clearfix">
            <div class="ui-footer-intro fl">
                <dl class="item-about">
                    <dt>新手入门</dt>
                    <dd><a target="_blank" href="http://help.zhubajie.com">帮助中心</a></dd>
                    <dd><a target="_blank" href="http://chengxin.zhubajie.com/report/rule-g-2317">规则中心</a></dd>
                    <dd><a target="_blank" href="http://www.zhubajie.com/main/guide">了解猪八戒</a></dd>
                    <dd><a target="_blank" href="http://www.zhubajie.com/main/biaoshi">猪八戒标识</a></dd>
                </dl>
                <dl class="item-safe">
                    <dt>交易保障</dt>
                    <dd><a target="_blank" href="http://www.zhubajie.com/main/map">担保交易</a></dd>
                    <dd><a target="_blank" href="http://chengxin.zhubajie.com/security/buyer">消费者保障</a></dd>
                    <dd><a target="_blank" href="http://www.zhubajie.com/user/renzheng">威客认证</a></dd>
                    <dd><a target="_blank" href="http://chengxin.zhubajie.com">诚信管理中心</a></dd>
                </dl>
                <dl class="item-weibo">
                    <dt>关注我们</dt>
                    <dd><a target="_blank" href="http://weibo.com/zhubajiewang"><i class="ui-ico ui-ico-sina"></i>新浪微博</a></dd>
                    <dd><a target="_blank" href="http://t.qq.com/zhubajie"><i class="ui-ico ui-ico-qq"></i>腾讯微博</a></dd>
                    <dd><a target="_blank" href="http://t.sohu.com/u/108262596"><i class="ui-ico ui-ico-sohu"></i>搜狐微博</a></dd>
                </dl>
            </div>
            <div class="ui-footer-product">
                <dl class="item-product">
                    <dt>手机客户端</dt>
                    <dd class="item-app"><a target="_blank" href="http://app.zhubajie.com/index_pc.html" class="ui-ico ui-ico-ios"><span class="hide-txt">iphone客户端</span></a> <a target="_blank" href="http://app.zhubajie.com/index_pc_an.html" class="ui-ico ui-ico-android"><span class="hide-txt">安卓客户端</span></a><a target="_blank" href="http://app.zhubajie.com/win8/win8.html" class="ui-ico ui-ico-wp"><span class="hide-txt">win8客户端</span></a></dd>
                    <dt>猪八戒国际版</dt>
                    <dd><a target="_blank" href="http://www.witmart.com/cn/zbj?utm_source=ZBJ_Home_Bottom&amp;utm_medium=ZBJ_Home_Bottom&amp;utm_campaign=ZBJ_Home_Bottom"><img src="/t5s/lib/img/witmart.png"></a></dd>
                </dl>
                <dl class="item-weixin">
                    <dt>微信二维码</dt>
                    <dd>
                        <img src="/t5s/lib/img/weixin-zbj.png">
                    </dd>
                </dl>
                <dl class="item-union">
                    <dt>推广赚钱</dt>
                    <dd><a target="_blank" href="http://union.zhubajie.com" class="ui-ico ui-ico-union"><span class="hide-txt">获赏金10%分成</span></a></dd>
                </dl>
            </div>
        </div>
        <div class="ui-footer-exlink">
            <span class="item-label">友情链接：</span>
                <a target="_blank" href="http://www.admin5.com/">站长网</a>
                <a target="_blank" href="http://www.nipic.com/">昵图素材网</a>
                <a target="_blank" href="http://www.meilishuo.com/">美丽说</a>
                <a target="_blank" href="http://www.liebiao.com/">列表网</a>
                <a target="_blank" href="http://www.19lou.com/">19楼</a>
                <a target="_blank" href="http://www.55.la/">我拉网</a>
                <a target="_blank" href="http://china.findlaw.cn/">法律咨询</a>
                <a target="_blank" href="http://www.17u.cn/">同程旅游网</a>
                <a target="_blank" href="http://bj.58.com/">北京分类信息</a>
                <a target="_blank" href="http://www.haomeng.com">好梦网</a>
                <a target="_blank" href="http://www.iresearch.cn">艾瑞网</a>
            <a href="#" class="item-more">更多&gt;&gt;</a>
        </div>
        <div class="ui-footer-sitelink">
            <a class="fr" href="http://www.witmart.com/cn/zbj?utm_source=ZBJ_Home_Bottom&amp;utm_medium=ZBJ_Home_Bottom&amp;utm_campaign=ZBJ_Home_Bottom" target="_blank">猪八戒国际版</a>
            <a href="http://www.zhubajie.com/about/index.html" target="_blank">关于我们</a><span class="split">|</span>
            <a href="http://www.zhubajie.com/about/contactus.html" target="_blank">联系方式</a><span class="split">|</span>
            <a href="http://zt.zhubajie.com/ztold/adhelp/" target="_blank">广告服务</a><span class="split">|</span>
            <a href="http://news.zhubajie.com" target="_blank">新闻中心</a><span class="split">|</span>
            <a href="http://www.zhubajie.com/main/map" target="_blank">网站地图</a><span class="split">|</span>
            <a href="http://www.zhubajie.com/zizhi/gszz.html" target="_blank">公司资质</a><span class="split">|</span>
            <a href="http://job.zhubajie.com/" target="_blank">加入我们</a><span class="split">|</span>
            <a href="http://www.zhubajie.com/about/payment.html" target="_blank">支付方式</a><span class="split">|</span>
            <a href="http://zt.zhubajie.com/ztold/zbjhezuo/" target="_blank">我也要与猪八戒网合作</a><span class="split">|</span>
            <a href="http://www.zhubajie.com/abc123" target="_blank">简版猪八戒</a>
        </div>
        <div class="ui-footer-copyright clearfix">
            <p class="fl item-tel">服务热线：400-188-6666 传真：023-63866338</p>
            <p class="item-icp">Copyright 2005-2013 zhubajie.com  版权所有  <a href="http://www.miitbeian.gov.cn" target="_blank">渝ICP备10202274号</a> <a href="http://www.cqca.gov.cn/" target="_blank" class="ml5">渝B2-20080005</a></p>
        </div>
    </div>
</div>
</div>

    <div class="ui-footer" >
        <div class="grid">
            <div class="ui-footer-about clearfix">
                <div class="ui-footer-intro fl">
                    <dl class="item-about">
                        <dt>新手入门</dt>
                        <dd><a target="_blank" href="http://help.zhubajie.com">帮助中心</a></dd>
                        <dd><a target="_blank" href="http://chengxin.zhubajie.com/report/rule-g-2317">规则中心</a></dd>
                        <dd><a target="_blank" href="http://www.zhubajie.com/main/guide">了解猪八戒</a></dd>
                        <dd><a target="_blank" href="http://www.zhubajie.com/main/biaoshi">猪八戒标识</a></dd>
                    </dl>
                    <dl class="item-safe">
                        <dt>交易保障</dt>
                        <dd><a target="_blank" href="http://www.zhubajie.com/main/map">担保交易</a></dd>
                        <dd><a target="_blank" href="http://chengxin.zhubajie.com/security/buyer">消费者保障</a></dd>
                        <dd><a target="_blank" href="http://www.zhubajie.com/user/renzheng">威客认证</a></dd>
                        <dd><a target="_blank" href="http://chengxin.zhubajie.com">诚信管理中心</a></dd>
                    </dl>
                    <dl class="item-weibo">
                        <dt>关注我们</dt>
                        <dd><a target="_blank" href="http://weibo.com/zhubajiewang"><i class="ui-ico ui-ico-sina"></i>新浪微博</a></dd>
                        <dd><a target="_blank" href="http://t.qq.com/zhubajie"><i class="ui-ico ui-ico-qq"></i>腾讯微博</a></dd>
                        <dd><a target="_blank" href="http://t.sohu.com/u/108262596"><i class="ui-ico ui-ico-sohu"></i>搜狐微博</a></dd>
                    </dl>
                </div>
                <div class="ui-footer-product">
                    <dl class="item-product">
                        <dt>手机客户端</dt>
                        <dd class="item-app"><a target="_blank" href="http://app.zhubajie.com/index_pc.html" class="ui-ico ui-ico-ios"><span class="hide-txt">iphone客户端</span></a> <a target="_blank" href="http://app.zhubajie.com/index_pc_an.html" class="ui-ico ui-ico-android"><span class="hide-txt">安卓客户端</span></a><a target="_blank" href="http://app.zhubajie.com/win8/win8.html" class="ui-ico ui-ico-wp"><span class="hide-txt">win8客户端</span></a></dd>
                        <dt>猪八戒国际版</dt>
                        <dd><a target="_blank" href="http://www.witmart.com/cn/zbj?utm_source=ZBJ_Home_Bottom&amp;utm_medium=ZBJ_Home_Bottom&amp;utm_campaign=ZBJ_Home_Bottom"><img src="/t5s/lib/img/witmart.png"></a></dd>
                    </dl>
                    <dl class="item-weixin">
                        <dt>微信二维码</dt>
                        <dd>
                            <img src="/t5s/lib/img/weixin-zbj.png">
                        </dd>
                    </dl>
                    <dl class="item-union">
                        <dt>推广赚钱</dt>
                        <dd><a target="_blank" href="http://union.zhubajie.com" class="ui-ico ui-ico-union"><span class="hide-txt">获赏金10%分成</span></a></dd>
                    </dl>
                </div>
            </div>
            <div class="ui-footer-exlink">
                <span class="item-label">友情链接：</span>
                    <a target="_blank" href="http://www.admin5.com/">站长网</a>
                    <a target="_blank" href="http://www.nipic.com/">昵图素材网</a>
                    <a target="_blank" href="http://www.meilishuo.com/">美丽说</a>
                    <a target="_blank" href="http://www.liebiao.com/">列表网</a>
                    <a target="_blank" href="http://www.19lou.com/">19楼</a>
                    <a target="_blank" href="http://www.55.la/">我拉网</a>
                    <a target="_blank" href="http://china.findlaw.cn/">法律咨询</a>
                    <a target="_blank" href="http://www.17u.cn/">同程旅游网</a>
                    <a target="_blank" href="http://bj.58.com/">北京分类信息</a>
                    <a target="_blank" href="http://www.haomeng.com">好梦网</a>
                    <a target="_blank" href="http://www.iresearch.cn">艾瑞网</a>
                <a href="#" class="item-more">更多&gt;&gt;</a>
            </div>
            <div class="ui-footer-sitelink">
                <a class="fr" href="http://www.witmart.com/cn/zbj?utm_source=ZBJ_Home_Bottom&amp;utm_medium=ZBJ_Home_Bottom&amp;utm_campaign=ZBJ_Home_Bottom" target="_blank">猪八戒国际版</a>
                <a href="http://www.zhubajie.com/about/index.html" target="_blank">关于我们</a><span class="split">|</span>
                <a href="http://www.zhubajie.com/about/contactus.html" target="_blank">联系方式</a><span class="split">|</span>
                <a href="http://zt.zhubajie.com/ztold/adhelp/" target="_blank">广告服务</a><span class="split">|</span>
                <a href="http://news.zhubajie.com" target="_blank">新闻中心</a><span class="split">|</span>
                <a href="http://www.zhubajie.com/main/map" target="_blank">网站地图</a><span class="split">|</span>
                <a href="http://www.zhubajie.com/zizhi/gszz.html" target="_blank">公司资质</a><span class="split">|</span>
                <a href="http://job.zhubajie.com/" target="_blank">加入我们</a><span class="split">|</span>
                <a href="http://www.zhubajie.com/about/payment.html" target="_blank">支付方式</a><span class="split">|</span>
                <a href="http://zt.zhubajie.com/ztold/zbjhezuo/" target="_blank">我也要与猪八戒网合作</a><span class="split">|</span>
                <a href="http://www.zhubajie.com/abc123" target="_blank">简版猪八戒</a>
            </div>
            <div class="ui-footer-copyright clearfix">
                <p class="fl item-tel">服务热线：400-188-6666 传真：023-63866338</p>
                <p class="item-icp">Copyright 2005-2013 zhubajie.com  版权所有  <a href="http://www.miitbeian.gov.cn" target="_blank">渝ICP备10202274号</a> <a href="http://www.cqca.gov.cn/" target="_blank" class="ml5">渝B2-20080005</a></p>
            </div>
        </div>
    </div>

**/
.ui-footer {
  background: #fff;
}
.ui-footer-hd {
  padding: 30px 0;
  background: #363636;
  color: #999;
  margin-bottom: 15px;
}
.ui-footer-hd a {
  color: #999;
}
.ui-footer-hd dl {
  float: left;
  width: 16.6%;
  margin: 0;
}
.ui-footer-hd dl.item-app {
  text-align: center;
  margin-left: -30px;
}
.ui-footer-hd dt {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 5px;
  color: #ccc;
  font-family: "Microsoft YaHei", sans-serif;
}
.ui-footer-hd dd {
  margin-left: 0;
  line-height: 25px;
}
.ui-footer-hd .item-contact {
  text-align: center;
}
.ui-footer-hd .item-contact dt {
  font-size: 22px;
}
.ui-footer-hd .item-contact .item-chat {
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 5px;
  display: block;
}
.ui-footer-hd .item-contact .item-chat:hover .zbj-bottomtip-pos {
  display: block;
}
.ui-footer-hd .item-contact .item-chat .zbj-bottomtip-pos {
  display: none;
  border: none;
  background-color: transparent;
  margin-top: 5px;
  position: absolute;
  z-index: 200;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.ui-footer-hd .item-contact .item-chat .zbj-bottomtip {
  margin-left: -48px;
  padding: 0 5px;
  border-radius: 3px;
  background-color: #646464;
  color: #a9a9a9;
}
.ui-footer-hd .item-contact .item-chat .zbj-bottom-arrow {
  top: -10px;
  left: 42%;
  border-width: 5px;
  border-bottom-color: #646464;
  margin-left: -11px;
}
.ui-footer-hd .item-contact .item-chat .zbj-bottom-arrow > i {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  _border-style: dashed;
  border-color: transparent;
  top: -10px;
  left: 35%;
  border-width: 5px;
  border-bottom-color: #646464;
}
.ui-footer-hd .item-contact .item-sns {
  border-top: 1px solid #434343;
  padding-top: 5px;
}
.ui-footer-hd .item-contact .item-sns .ui-ico {
  margin-right: 5px;
}
.ui-footer-bd {
  text-align: center;
  padding-bottom: 20px;
}
.ui-footer-exlink,
.ui-footer-sitelink {
  line-height: 30px;
}
.ui-footer-sitelink a {
  color: #666;
}
.ui-footer-exlink a {
  margin-right: 5px;
  color: #999;
}
.ui-footer-exlink .item-more {
  font-family: simsun;
}
.ui-footer-copyright {
  margin-bottom: 10px;
}
.ui-footer-copyright a {
  color: #999;
}
.ui-footer-gov a {
  display: inline-block;
  margin-left: 20px;
}
.ui-footer-gov a .item-txt {
  display: none;
}
.ui-footer-mini .ui-footer-hd {
  display: none;
}
/*页面非组件公用部分css*/
.body-gray {
  background-image: url(../../../lib/img/body-gray.jpg);
}
/* 下拉菜单多行 */
.ui-dropdown-multi {
  white-space: normal;
}
.ui-dropdown-multi li {
  border-bottom: 1px solid #E5E5E5;
  padding-bottom: 3px;
  margin-top: 3px;
}
.ui-dropdown-multi li a {
  display: inline;
  white-space: nowrap;
}
.ui-dropdown-multi li p {
  color: #8C8C8C;
  font-weight: bold;
  padding-left: 5px;
  margin-bottom: 0;
}
.ui-dropdown-multi.hover .ui-dropdown-menu,
.ui-dropdown-multi:hover .ui-dropdown-menu {
  width: 205px;
  padding: 5px  5px 0 5px;
}
.ui-dropdown-multi.hover .ui-dropdown-menu a,
.ui-dropdown-multi:hover .ui-dropdown-menu a {
  display: inline;
}
.ui-dropdown-multi li.highlight a {
  color: #057BD2;
  font-weight: bold;
}
/*弹窗登录*/
.ui-window-login {
  padding: 10px 0;
}
.ui-window-login ul {
  list-style: none;
}
.ui-pop-body .control-group {
  margin-bottom: 20px;
  line-height: 20px;
  position: relative;
}
.ui-window-login .ui-pop-body .control-group a {
  text-decoration: underline;
  color: #0000ff;
}
.ui-pop-body .mb20 {
  margin-bottom: 20px;
}
.ui-pop-body .ml5 {
  margin-left: 5px;
}
.ui-pop-body .ml10 {
  margin-left: 10px;
}
.ui-pop-body .controls {
  margin-left: 12px;
  _margin-left: 5px;
  float: left;
  position: relative;
  _z-index: 1;
}
.ui-form-item .help-inline {
  float: left;
  margin-top: 11px;
  color: #999;
}
.ui-form-item input {
  float: left;
}
.controls input,
.map-text {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  background-color: #FFF;
  border: 1px solid #CCC;
  color: #555;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  padding: 8px 6px;
  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 3px 3px 3px 3px;
  width: auto;
}
.ui-window-login .control-group .control-label {
  width: 80px;
  float: left;
  font-size: 12px;
  text-align: right;
  padding-top: 10px;
}
.register .email-link,
.register .tab-t a.email-link {
  float: right;
  border: none;
  color: #0B73BB;
  text-decoration: underline;
}
.ui-window-login .xieyi {
  padding-left: 90px;
  color: #999;
}
.login-panel .xieyi input,
.login-panel .xieyi span {
  vertical-align: middle;
  margin-right: 5px;
}
.login-panel .error input,
.login-panel .error input:focus {
  color: #b94a48;
  border-color: #b94a48;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.login-panel .error .help-inline {
  background: url(/r/pic/pic.gif) no-repeat 0 -40px;
  padding-left: 20px;
  margin-left: 5px;
}
.ui-verify-tips .ui-poptip-bd {
  padding: 5px;
}
.ui-verify-tips .ui-warning-min {
  padding: 0px 0px 0px 35px;
  line-height: 30px;
  background: url(/r/p/pic.png) no-repeat 5px -295px;
}
.ui-window-login .sub-btn {
  padding-left: 95px;
}
.ui-window-login .other-tit {
  font-size: 12px;
  margin: 20px 0 10px 0px;
  color: #666;
  border-top: 1px solid #ededed;
  padding: 10px 20px 0 20px;
}
.ui-window-login .win-other-login {
  margin-left: 20px;
}
.ui-window-login .win-other-login li {
  float: left;
  margin: 0 5px;
}
/*.ui-window-login .other-login li a{display: block;margin:0 3px;width:16px; height: 16px; background: url(../r/sign/xenxiang.gif) no-repeat;}*/
.ui-window-login .win-other-login li a {
  display: block;
  width: 25px;
  height: 25px;
  background: url(/r/p/fx-mid.gif) no-repeat;
}
.ui-window-login .win-other-login li a.xinL {
  background-position: 0 -108px;
}
.ui-window-login .win-other-login li a.touban {
  background-position: 0 -81px;
}
.ui-window-login .win-other-login li a.ren {
  background-position: 0 -54px;
}
.ui-window-login .win-other-login li a.taob {
  background-position: 0 -27px;
}
.ui-window-login .win-other-login li a.qq {
  background-position: 0 -135px;
}
.ui-window-login .win-other-login li a.tengx {
  background-position: 0 0;
}
.ui-window-login .win-other-login li a.wangY {
  background-position: 0 -162px;
}
.ui-window-login .win-other-login li a:hover {
  margin-top: -2px;
}
/*弹窗注册*/
.register {
  padding: 10px 0;
}
.register .control-group .control-label {
  width: 80px;
  float: left;
  font-size: 12px;
  text-align: right;
  padding-top: 5px;
}
.register .control-group .yzm img {
  cursor: pointer;
}
.register .xieyi {
  padding-left: 90px;
}
.xieyi label {
  display: inline;
  font-size: 1em;
  line-height: 1em;
}
.register .sub-btn {
  padding-left: 95px;
  margin-top: 20px;
}
.ui-window-header .title-link,
.ui-window-header .title-link:hover {
  background: none;
  float: none;
  font-size: 12px;
  font-weight: normal;
  text-decoration: underline;
  color: #0b73bb;
  opacity: 1;
  margin-left: 5px;
}
.ui-window-login .tab-t a {
  padding: 0 20px;
  _padding: 0px;
}
.ui-window-login button.butn,
.register button.butn {
  width: 65px;
}
.win-th-phone .tit {
  font-size: 22px;
}
.win-th-phone {
  width: 350px;
  padding: 10px 0 10px 100px;
  background: url("/r/sign/phone-icon.jpg") no-repeat scroll 0 10px #FFFFFF;
}
.win-th-phone .alt {
  margin-top: 5px;
  color: #666;
}
.win-th-phone .control-group {
  margin-top: 15px;
}
.win-th-phone .controls {
  margin-left: 0px;
  margin-right: 10px;
  _margin-right: 5px;
  _margin-top: -2px;
}
.win-th-phone .controls input {
  width: 150px;
}
.win-th-phone .control-group .butn {
  font-weight: bold;
}
.win-th-phone .resh-time {
  color: #666;
}
/*  我也要出现在这里弹窗  */
.tagPop {
  margin-top: -20px;
}
.tagPop .choose1 {
  overflow-y: auto;
  max-height: 90px;
  margin-top: 5px;
  padding-left: 2px;
}
.tagPop .choose1 h6 {
  margin-bottom: 5px;
}
.tagPop .choose1 ul li {
  line-height: 20px;
  clear: both;
  overflow: hidden;
}
.tagPop .choose1 ul li strong {
  float: left;
  color: #FF6600;
  font-weight: bold;
  margin-right: 10px;
  width: 60px;
}
.tagPop .choose1 ul li a {
  float: left;
  width: 350px;
  height: 20px;
  overflow: hidden;
  color: #666;
}
.tagPop .choose1 ul li input {
  position: relative;
  float: right;
}
.tagPop .choose1 ul li span {
  margin-left: 5px;
  float: right;
}
.tagPop .choose2 {
  margin-top: 10px;
}
.tagPop .srhRequset {
  margin-top: 5px;
}
.tagPop .srhkey {
  border: 1px solid #ccc;
  vertical-align: middle;
  height: 19px;
  margin-right: 5px;
}
.ui-pop .mt20 {
  margin-top: 20px;
}
.ui-pop .f16 {
  font-size: 16px;
}
.ui-pop ul {
  margin: 0;
}
.ui-pop-body .tab-t {
  border-bottom: 1px solid #e8e8e8;
  height: 28px;
  line-height: 28px;
  position: relative;
  padding-left: 5px;
}
.ui-pop-body .tab-t a {
  display: block;
  width: auto;
  padding: 0 15px;
  _width: 70px;
  _padding: 0;
  height: 27px;
  margin: 0 2px;
  text-align: center;
  float: left;
  color: #666;
  border: 1px solid #e8e8e8;
  border-width: 1px 1px 0;
  background: #fff;
  position: relative;
}
.ui-pop-body .tab-t a.wid {
  _width: 110px;
}
.ui-pop-body .tab-t a.cur {
  background: #fff;
  height: 28px;
  _bottom: -1px;
  color: #333;
  text-decoration: none;
}
.ui-pop-body .tab-t a:hover {
  background: #fff;
  color: #333;
  text-decoration: none;
}
.ui-pop-body .tab-t a.cur i {
  display: block;
  position: absolute;
  left: -1px;
  top: -6px;
  height: 5px;
  width: 100%;
  background: #ffb257;
  border: 1px solid #e2e2e2;
  border-width: 1px 1px 0;
  overflow: hidden;
}
#service .tab-t a.cur i {
  _padding: 0 30px;
}
/*针对服务最终页*/
.ui-pop-body .tab-t a.cur-b {
  background: #fff;
}
/*绑定手机提示*/
.alert,
.big-alert {
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  border-radius: 4px 4px 4px 4px;
  color: #c09853;
  margin-bottom: 5px;
  padding: 8px 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  _zoom: 1;
  z-index: 1;
}
.alert-danger,
.alert-error {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}
.alert .alert-img {
  padding-left: 25px;
  position: relative;
}
.alert .alert-img em,
.big-alert .alert-img em,
.favwar {
  background: url(../../../r/p/pic.png) no-repeat 0 -70px;
  _background: url(../../../r/pic/pic.gif) no-repeat 0 -17px;
  position: absolute;
  left: 0;
  top: 0;
  _left: -22px;
  _top: -1px;
  display: block;
  width: 18px;
  _width: 25px;
  height: 18px;
}
.alert-error .alert-img em {
  background-position: 0 -16px;
  _background-position: 0 -40px;
}
.alert-success .alert-img em {
  background-position: 0 -44px;
  _background-position: 0 2px;
}
.alert .alert-img div .img {
  width: 100px;
  height: 100px;
  float: left;
}
.alert .alert-img div.clearfix {
  margin-top: 10px;
  margin-left: -20px;
}
.alert .alert-img div .text {
  width: 120px;
  float: left;
  margin-left: 10px;
  margin-top: 20px;
}
.alert .alert-img div .text a {
  color: #ff8800;
}
.control-label {
  font-size: 12px;
}
.control-group {
  margin-bottom: 20px;
  line-height: 20px;
  position: relative;
}
.control-group:before,
.control-group:after {
  content: "";
  display: table;
  line-height: 0;
}
.control-group:before,
.control-group:after {
  content: "";
  display: table;
  line-height: 0;
}
.control-group:after {
  clear: both;
}
.control-label {
  float: left;
  padding-top: 10px;
  text-align: right;
  width: 140px;
  display: block;
}
.controls {
  margin-left: 12px;
  _margin-left: 5px;
  float: left;
  position: relative;
  _z-index: 1;
}
.controls em {
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #999;
}
.controls input,
.map-text {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #555;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  padding: 8px 6px;
  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 3px 3px 3px 3px;
}
.controls input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.controls .moneySuggest {
  display: none;
  position: absolute;
  width: 139px;
  background: none repeat #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  color: #333;
  padding: 10px;
  top: 41px;
  z-index: 20;
}
.controls .moneySuggest li {
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  padding: 5px;
  color: #f60;
  font-weight: bold;
}
.controls .moneySuggest li:hover {
  background-color: #f0f0f0;
}
/* 页面底部的发布需求的入口 */
.witkey-pub-entry {
  display: none;
  height: 70px;
  width: 100%;
  position: fixed;
  z-index: 500;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#cc000000', EndColorStr='#cc000000');
}
:root .witkey-pub-entry {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.witkey-pub-entry-con {
  color: #fff;
  line-height: 70px;
  font-size: 24px;
  text-align: center;
}
.witkey-pub-entry .ui-btn {
  margin-left: 75px;
  padding: 10px 30px;
  font-weight: bold;
  font-size: 20px;
}
.buy-serv-window {
  overflow-y: visible;
}
.buy-serv {
  margin: 0;
  padding: 0;
}
ul.buy-serv-choose {
  overflow-y: auto;
  max-height: 78px;
  margin-top: 5px;
  padding-left: 2px;
  margin-bottom: 15px;
}
.buy-serv-choose li {
  line-height: 25px;
  clear: both;
  overflow: hidden;
}
.buy-serv-choose li * {
  vertical-align: middle;
}
.buy-serv-choose li input {
  position: relative;
  top: -2px;
}
.buy-serv-choose li strong {
  color: #f60;
  margin-left: 3px;
}
.buy-serv-choose li a {
  margin-left: 3px;
  color: #666;
}
.buy-serv-table {
  text-align: left;
  border: 1px solid #B9DA9F;
  width: 100%;
}
.buy-serv-table thead th {
  background: #e6f8d7;
  padding: 7px 10px;
  color: #333;
  text-align: left;
  font-weight: normal;
}
.buy-serv-table td {
  padding: 7px 10px;
  border-bottom: 1px dashed #B9DA9F;
}
.buy-serv-table td.orange {
  color: #f60;
}
.buy-serv-table input[type=text] {
  width: 20px;
  padding: 0 5px;
  position: relative;
  top: 3px;
  margin-right: 2px;
  border-radius: 0;
  color: #999;
}
.buy-serv-table .addlabel {
  background: url(http://t5.zbjimg.com/r/page/cross_03.png) no-repeat;
  padding-left: 18px;
  text-decoration: underline;
}
.buy-search {
  margin-top: 10px;
  width: auto;
  height: 30px;
  position: relative;
  z-index: 12;
  border: 1px solid #DCDCDC;
  border-top-color: #C2C2C2;
  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 3px 3px 3px 3px;
}
.buy-search input.text {
  border: 0;
  padding: 7px 10px;
  width: 455px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.buy-search-btn {
  border: 0;
  padding: 5px 10px;
  height: 30px;
  color: #bdbdbd;
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.buy-search-close {
  cursor: pointer;
  height: 13px;
  padding: 7px 0;
  position: absolute;
  right: 5px;
  top: -5px;
  width: 15px;
  color: #f7c4c4;
  font-size: 16px;
  text-decoration: none;
  z-index: 12;
}
.buy-search-close:hover {
  color: #ef8989;
  text-decoration: none;
}
.buy-search-cont {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #FFF;
  border: 1px solid #E5E5E5;
  /*display: none;*/
  position: absolute;
  width: 506px;
  z-index: 10;
}
.buy-search-cont li {
  float: left;
  cursor: pointer;
  line-height: 18px;
  padding: 5px 10px;
}
.buy-search-cont li:hover,
.buy-search-cont li.hover {
  background-color: #EAF7E7;
}
.buy-serv-tip {
  color: #FF9000;
  margin-top: 10px;
}
.buy-serv-tip i {
  margin-right: 3px;
}
.buy-serv-pay {
  color: #333;
  font-size: 16px;
  text-align: right;
  margin-right: 10px;
}
.buy-serv-pay strong {
  color: #F60;
}
.pop-footer-tip {
  color: #999;
  text-align: left;
  float: left;
}
.pop-footer-tip em {
  color: #0b73bb;
  font-style: normal;
}
/****   结构  ********
'<div class="ui-guide">'+
    '<div class="ui-guide-t-mask"></div>'+
    '<div class="ui-guide-l-mask"></div>'+
    '<div class="ui-guide-r-mask"></div>'+
    '<div class="ui-guide-b-mask"></div>'+
    '<div class="ui-guide-target-mask">' +
        '<div class="ui-guide-con">'+
            '<a class="ui-guide-prev" herf="###"></a>' +
            '<a class="ui-guide-next"></a>' +
            '<a class="ui-guide-close"></a>'+
        '</div>'+
    '</div>'+
'</div>';
*/
.ui-guide-target-mask,
.ui-guide-con {
  position: absolute;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.6);
}
.ui-guide-t-mask,
.ui-guide-l-mask,
.ui-guide-r-mask,
.ui-guide-b-mask {
  position: absolute;
  background: #000;
  opacity: 0.6;
  filter: alpha(opacity=60);
  z-index: 999999;
}
.ui-guide-prev,
.ui-guide-next,
.ui-guide-close {
  display: inline-block;
  position: absolute;
}
.ui-guide-prev,
.ui-guide-next {
  cursor: pointer;
  width: 55px;
  height: 55px;
}
.ui-guide-close {
  cursor: pointer;
  width: 32px;
  height: 32px;
}
.asset-a-d {
  overflow: hidden;
}
.asset-a-d > div {
  margin-top: 15px;
}
body.myzbj .asset-a-d {
  width: 200px;
  margin: 0 auto;
}
.task-details .asset-a-d > div {
  margin-top: 0;
}
.task-details .right .asset-a-d > div,
.home-details .right .asset-a-d > div {
  margin-top: 15px;
}
.ui-dropdown-multi li p.mobile-app {
  color: #ff8800;
}
.online-status {
  width: 14px;
  height: 14px;
  overflow: hidden;
  background: url('http://t5.zbjimg.com/r/webim/web-line.gif') no-repeat;
  margin-right: 3px;
  top: 3px;
  display: none;
  position: relative;
  top: 2px;
}
.online-status-online {
  display: inline-block;
  background-position: -1px -30px;
}
.online-status-offline {
  display: inline-block;
  background-position: -1px -94px;
}
.witkeyhome-contactbox {
  background: #515151 url(../../../../t5s/home/img/witkeyhome-contactme-bg.png) no-repeat center top;
  position: fixed;
  right: 10px;
  bottom: 290px;
  width: 170px;
  z-index: 25;
}
.witkeyhome-contactbox-header {
  height: 42px;
  line-height: 42px;
  color: #fede71;
  padding-left: 11px;
  font-size: 18px;
}
.witkeyhome-contactbox-status {
  color: #fff;
  font-size: 14px;
  margin-left: 5px;
}
.witkeyhome-contactbox-ctrl {
  position: absolute;
  height: 0;
  width: 0;
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  right: 0;
  top: 10px;
  overflow: hidden;
  cursor: pointer;
}
.witkeyhome-contactbox-ctrlopen {
  border: 10px solid transparent;
  border-right: 10px solid #fff;
}
.witkeyhome-contactbox-body {
  border: 1px solid #fff;
  margin: 11px;
  background: #fff;
  color: #999999;
}
.witkeyhome-contactbox-message {
  border: 1px solid #cccccc;
  margin: 10px;
  padding: 10px;
  position: relative;
}
.witkeyhome-contactbox-chatbtn {
  text-align: center;
  margin-top: 5px;
}
.witkeyhome-contactbox-contacts {
  border-top: 1px dashed #ccc;
  margin: 10px 6px;
  padding-top: 10px;
}
.witkeyhome-contactbox-contacts .witkeyhome-contactbox-qq img {
  vertical-align: middle;
}
.witkeyhome-contactbox-servicetime {
  background: #e5e5e5;
  padding: 7px 12px;
}
.witkeyhome-contactbox-collapsed {
  display: none;
  position: fixed;
  right: 10px;
  bottom: 350px;
  background: #515151;
  font-size: 14px;
  width: 20px;
  padding: 30px 10px 10px;
  color: #fede71;
  text-align: center;
  z-index: 25;
  cursor: pointer;
}
.witkeyhome-contactbox-collapsed span {
  color: #fff;
}
.witkeyhome-contactbox-collapsed em {
  float: left;
}
.witkeyhome-contactbox-ctrlopen {
  right: 15px;
  border-width: 8px;
}
.witkeyhome-contactbox-message .opacity-btn {
  opacity: 0;
  filter: alpha(opacity=0);
  display: inline-block;
  width: 126px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
}
.saler-fixed-btm {
  background: rgba(0, 0, 0, 0.5);
  height: 50px;
}
.saler-fixed-btm .witkey-pub-entry-con {
  line-height: 50px;
}
.saler-fixed-btm .ui-btn {
  float: right;
  margin-top: 5px;
}
.saler-fixed-btm .item-txt {
  margin-left: 160px;
  position: relative;
  top: 1px;
}
.saler-fixed-btm .ui-btn {
  margin-left: 195px;
}
.witkeyhome-content-opacity {
  display: none;
  background: rgba(163, 163, 163, 0.8);
  text-align: center;
}
.witkeyhome-content-opacity a {
  color: #fff;
  text-align: center;
  font-size: 16px;
  text-decoration: none;
}
.witkey-pub-entry-img {
  float: left;
  position: relative;
  top: 1px;
}
.witkey-pub-entry-name {
  float: left;
  font-size: 14px;
  position: relative;
  left: 5px;
}
.witkeyhome-self-edit {
  text-align: center;
  margin: 5px;
}
.butn-xuqiu {
  border-radius: 2px;
  color: #ffffff;
  background-color: #ff8a00;
  border-color: #ea7f00;
  display: inline;
}
.butn-xuqiu i {
  display: none;
}
#g-shop-name {
  width: 248px;
}
#g-shop-name .item-txt {
  font-size: 15px;
  font-weight: bold;
}
#g-shop-name .item-img {
  position: relative;
  left: -13px;
}
.t5s .data-empty {
  border-top: none;
  background: #ff8a00;
  padding-top: 6px;
}
.t5s .data-empty .inner {
  overflow: hidden;
  background: #fafafa;
  border: 1px solid #e2e2e2;
  border-top: 0;
  padding: 5px 50px 40px 50px;
}
.t5s .data-empty .inner.type9 {
  padding-bottom: 0px;
}
.t5s .data-empty .info {
  padding-top: 20px;
  font-size: 18px;
  line-height: 31px;
  margin-bottom: 20px;
}
.t5s .data-empty .type9 .butn {
  margin-bottom: 5px;
}
.t5s .data-empty .nodeal-info {
  margin-bottom: 10px;
  line-height: 25px;
  font-size: 16px;
  padding-top: 15px;
}
.t5s .data-empty .nodeal-info .nodeal-head {
  color: #8b8b8b;
}
.t5s .data-empty .nodeal-info .orange {
  font-size: 1.5em;
}
.t5s .data-empty .nodeal-publink {
  color: #0b73bb;
}
.t5s .data-empty a.nodeal-publink {
  margin-top: 5px;
}
.t5s .data-empty .intro-pic {
  float: right;
}
.t5s .data-empty strong {
  font-size: 18px;
  font-weight: normal;
}
.t5s.myzbj .ui-menu-bd a {
  padding: 0 15px;
  color: #fff;
}
.t5s.myzbj .ui-menu .main-wrap {
  border-bottom: none;
}
.t5s.myzbj .grid .sidebar {
  width: 230px;
}
.t5s.myzbj .ui-menu .grid .main {
  margin-left: 245px;
}
.t5s.myzbj .category-title {
  height: 40px;
}
.ui-header-a-d {
  height: 60px;
}
.ui-header-a-d .grid {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.ui-header-a-d img {
  height: 60px;
}
.ui-header-a-d .item-close {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #fffde3;
  cursor: pointer;
  color: #e0422c;
  background: rgba(255, 255, 255, 0.7);
}
.ui-header-a-d .item-close:hover {
  background: #fffde3;
}
.item-usernews-dropdown li span {
  float: right;
  position: relative;
}
#J-header-logic3 .ui-dropdown.hover .item-usernews-dropdown,
#J-header-logic3 .ui-dropdown:hover .item-usernews-dropdown {
  width: 144px;
  left: 0;
  right: auto;
}
.myzbj .ui-menu-bd .each-link a {
  font-size: 14px;
  font-family: "宋体";
}
.sale-status {
  background: url(http://t5.zbjimg.com/r/webim/web-line.gif) no-repeat;
  float: right;
  background-position: 0 -28px;
  font-size: 12px;
  padding-left: 20px;
}
.sale-status span {
  margin-right: 5px;
}
.sale-status a {
  font-size: 12px;
}
.sale-status-stop {
  background-position: 0 -92px;
}
.ui-dropdown-multi.drop-app li {
  padding: 0 10px 10px 5px;
}
.ui-dropdown-multi.drop-app li p {
  color: #333;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}
.ui-dropdown-multi.drop-app li img {
  float: left;
  width: 80px;
  height: 80px;
  margin-left: 5px;
}
.ui-dropdown-multi.drop-app li .ui-btn {
  float: right;
  color: white;
  width: 70px;
  margin: 7px 0;
}
.ui-dropdown-multi.drop-app li .ui-btn:hover {
  text-decoration: none;
}
.t5s .ui-dropdown-multi.drop-app li .ui-btn {
  float: right;
  color: white;
  width: 70px;
  margin: 7px 0;
}
.t5s .ui-dropdown-multi.drop-app li .ui-btn:hover {
  text-decoration: none;
}
/*支付页面样式*/
#yjf-realname-div .input-yfj-realname,
#yjf-realname-div .input-yjf-idnum,
#yjf-realname-div .input-yjf-iddate {
  padding: 4px 6px;
  border-radius: 0;
  width: 180px;
}
#yjf-realname-div .yjf-realname-form {
  margin-top: 20px;
}
#yjf-realname-div .yjf-realname-form .control-label {
  width: 100px;
}
#yjf-realname-div .alert-img {
  padding: 10px 25px;
}
#yjf-realname-div .alert-img em {
  margin-top: 10px;
}
#yjf-realname-div .control-group {
  margin-bottom: 7px;
}
#yjf-realname-div label.help-inline {
  color: #000;
  margin-left: 0;
  position: relative;
  top: 2px;
}
#yjf-realname-div .top2 {
  position: relative;
  top: 2px;
  left: 10px;
}
/* 搜索框样式 */
.header-search-suggest .ui-select-item {
  padding: 3px 5px 3px 10px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #666;
}
.witkey-xiaobao-guarantee {
  background: url(../../../t5s/common/img/fuwubao/guzhu-large.png) no-repeat 7px 15px;
  padding-bottom: 10px;
  color: #fcf8e3;
  background-color: #0dad51;
  height: 68px;
  padding-top: 8px;
  line-height: 1.8;
  padding-left: 68px;
  margin: 0px 0px 5px 0px;
  position: relative;
}
.witkey-xiaobao-guarantee .witkey-xiaobao-tit {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}
.witkey-xiaobao-guarantee .witkey-xiaobao-tit a {
  color: #fff;
}
.witkey-xiaobao-guarantee .witkey-xiaobao-tit a:hover {
  text-decoration: none;
  color: #fff;
}
.witkey-xiaobao-guarantee .witkey-security-money-p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.witkey-xiaobao-guarantee .witkey-security-money-p span {
  font-weight: bold;
  font-size: 13px;
  font-family: "microsoft yahei";
}
.witkey-xiaobao-guarantee .guarantee-status {
  position: absolute;
  bottom: 15px;
  left: 47px;
  background: url(../../../t5s/common/img/fuwubao/guzhu-check.png) no-repeat top;
  width: 16px;
  height: 16px;
}
.witkey-xiaobao-intro-wrap {
  margin: 0;
  padding: 0;
  background: none;
}
.witkey-xiaobao {
  /*雇主保障介绍*/
}
.witkey-xiaobao .xiaobao-promise {
  color: #999;
  padding: 3px 5px 4px 5px;
}
.witkey-xiaobao .xiaobao-promise .promise-link {
  display: block;
}
.witkey-xiaobao .xiaobao-promise-icon {
  text-decoration: none;
}
.witkey-xiaobao .xiaobao-promise-intro {
  margin: -5px 0 5px 0;
  padding: 0 6px 3px;
  font-size: 0px;
}
.witkey-xiaobao .xiaobao-promise-intro .promise-tt,
.witkey-xiaobao .xiaobao-promise-intro .promise-item {
  display: inline-block;
  vertical-align: middle;
  margin: 0px;
}
.witkey-xiaobao .xiaobao-promise-intro .promise-tt {
  font-weight: normal;
  font-size: 12px;
}
.witkey-xiaobao .xiaobao-promise-intro .promise-item {
  margin: 0px 2px 0 0;
}
.witkey-xiaobao .xiaobao-promise-enter-link .join-now {
  vertical-align: bottom;
  margin-left: 20px;
}
.witkey-xiaobao .xiaobao-promise-tit-p {
  padding: 0px 5px;
}
.witkey-xiaobao .witkey-out-xiaobao {
  padding: 5px;
}
.witkey-xiaobao .xiaobao-promise .xiaobao-link,
.witkey-xiaobao .witkey-xiaobao-guarantee .xiaobao-link {
  color: #f60;
  font-weight: bold;
  cursor: pointer;
}
.witkey-xiaobao .xiaobao-promise-tit {
  color: #666;
}
.witkey-xiaobao .witkey-xiaobao-guarantee .xiaobao-link {
  color: #fed701;
}
.witkey-xiaobao-guarantee .xiaobao-link {
  color: #fed701;
}
.witkey-xiaobao-guarantee .xiaobao-link.bold {
  font-weight: bold;
}
/*外包商邀请弹框*/
.invit-area {
  position: relative;
}
.invit-area textarea {
  width: 457px;
  height: 70px;
  padding: 5px;
  border: 1px solid #ccc;
  color: #666;
  font-size: 12px;
}
.j-count-txt {
  position: absolute;
  z-index: 1;
  bottom: 11px;
  right: 15px;
  color: #ccc;
}
/*底部无线猪八戒*/
.phone-zbj-interface {
  display: inline-block;
  margin-top: 7px;
  line-height: 1.9;
  text-align: left;
}
.phone-zbj-interface > span {
  display: block;
}
#j-need-invite .ui-dropdown-menu,
#j-need-invite .ui-dropdown-hd b {
  right: initial;
}
.hot-icon {
  background: url(http://cms.zbjimg.com/images/2015/hot.gif) no-repeat;
  color: #fff;
  display: inline-block;
  width: 21px;
  height: 16px;
  position: relative;
}
/*全站有派单右侧提醒*/
.order-fixed {
  position: fixed;
  right: 0;
  top: 25%;
  width: 115px;
  height: 186px;
  background: #024e88;
  cursor: pointer;
  z-index: 10;
}
.order-fixed:hover {
  background: #126fb5;
}
.order-fixed .order-fixed-close {
  padding: 0 5px;
  background: rgba(0, 0, 0, 0.5);
  color: #b8bcc0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  border-radius: 0 0 0 3px;
}
.order-fixed .order-fixed-close:hover {
  background: #ff0000;
  color: #fff;
}
.order-fixed .order-fixed-time-auto {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  margin-top: 20px;
}
.order-fixed .order-fixed-time-txt {
  text-align: center;
  font-size: 12px;
  color: #92a7bf;
}
.order-fixed .order-fixed-bg {
  position: relative;
  margin: 35px auto 0;
  width: 89px;
  height: 89px;
  background: url(../../../../t5s/task/images/ibid/clock_bg.png);
}
.order-fixed .order-fixed-bg .order-fixed-move {
  position: absolute;
  left: 0;
  top: 0;
  width: 89px;
  height: 89px;
  background: url(../../../../t5s/task/images/ibid/clock_move.png?t=2);
  animation: spin 1000ms infinite linear;
}
.order-fixed .order-fixed-txt {
  font-size: 14px;
  color: #fff;
  text-align: center;
  font-family: "microsoft yahei";
  font-weight: bold;
  margin-top: 20px;
  letter-spacing: 2px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.codechange {
  color: #fff;
}
.task-survey {
  position: absolute;
  bottom: -3px;
  color: #878787;
}
.task-survey-fw {
  color: #878787;
  margin-top: 10px;
}
.shop-head-webim {
  width: 75px;
  height: 24px;
  display: inline-block;
  position: relative;
  top: -7px;
  text-indent: -9999px;
  padding: 0;
}
.shop-head-webim i {
  display: none;
}
.shop-head-webim:hover {
  background-position: 0 0;
}
.shop-head-webim-online {
  background: url(../../../t5s/home/img/im_online.gif) no-repeat;
}
.shop-head-webim-offline {
  background: url(../../../t5s/home/img/im_offline.gif) no-repeat;
}
.header-seller-union-tag {
  margin-right: 5px;
  margin-bottom: 2px;
}
.each-link-menu-solution {
  width: 1px;
}
.public-seller-side {
  width: 48px;
  border: 1px solid #dcdbdb;
  border-bottom: none;
  position: fixed;
  top: 50%;
  right: 20px;
  background-color: #fff;
  z-index: 8;
}
.public-seller-side p,
.public-seller-side h3 {
  margin: 0;
  padding: 0;
}
.public-seller-side ul,
.public-seller-side li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.public-seller-side .seller-side-container {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.public-seller-side .seller-side-item {
  display: inline-block;
  width: 48px;
  height: 48px;
  text-align: center;
  font-size: 12px;
  color: #999;
  border-bottom: 1px solid #dcdbdb;
}
.public-seller-side .seller-side-item:hover {
  text-decoration: none;
  color: #ff6a04;
}
.public-seller-side .seller-side-item:visited {
  color: #999;
}
.public-seller-side .seller-side-item span {
  display: inline-block;
  padding: 9px;
  line-height: 15px;
}
.public-seller-side .seller-wechart-container {
  position: absolute;
  width: 271px;
  height: 114px;
  border: 1px solid #dcdbdb;
  top: 49px;
  right: 48px;
  background-color: #fff;
  padding: 16px 27px 18px 15px;
}
.public-seller-side .seller-wechart-container .wechart-code {
  width: 114px;
  height: 114px;
  overflow: hidden;
}
.public-seller-side .seller-wechart-container .wechart-text {
  font-size: 12px;
  color: #666;
  width: 140px;
  text-align: center;
}
.public-seller-side .seller-wechart-container .wechart-text .wechart-text-title {
  font-size: 14px;
  line-height: 22px;
  margin-top: 13px;
}
.public-seller-side .seller-wechart-container .wechart-text .wechart-text-common {
  line-height: 20px;
}
.public-seller-side .seller-wechart-container .wechart-text .wechart-text-bottom {
  font-size: 13px;
  color: #ff6a04;
  margin-top: 25px;
}
.public-seller-side .seller-app-container {
  position: absolute;
  width: 172px;
  height: 219px;
  border: 1px solid #dcdbdb;
  padding: 14px 18px 25px;
  background-color: #fff;
  left: -210px;
  top: 48px;
  text-align: center;
}
.public-seller-side .seller-app-container .app-title {
  font-size: 30px;
  line-height: 42px;
  color: #2e9bfd;
  height: 42px;
}
.public-seller-side .seller-app-container .app-title .app-edition {
  display: inline-block;
  width: 35px;
  height: 14px;
  line-height: 14px;
  font-size: 12px;
  background-color: #666;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin-left: 3px;
  color: #fff;
}
.public-seller-side .seller-app-container .app-text {
  font-size: 14px;
  line-height: 26px;
}
.public-seller-side .seller-app-container .app-pic {
  margin: 12px 15px 0;
  overflow: hidden;
  height: 138px;
  width: 138px;
}
.public-seller-side .feedback-tip-container {
  position: absolute;
  width: 402px;
  height: 210px;
  border: 1px solid #dcdbdb;
  left: -404px;
  top: -1px;
  background-color: #fff;
  text-align: center;
}
.public-seller-side .feedback-tip-container .feedback-tip-close {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.public-seller-side .feedback-tip-container .feedback-tip-close i {
  font-size: 16px;
  color: #f0efef;
}
.public-seller-side .feedback-tip-container .tip-success-text {
  line-height: 29px;
  color: #999;
}
.public-seller-side .feedback-tip-container .tip-success-btn {
  margin: 31px 0 0 0;
  display: inline-block;
  width: 70px;
  text-align: center;
  height: 30px;
  background-color: #ff6900;
  line-height: 30px;
  color: #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  text-decoration: none;
}
.public-seller-side .tip-success-container {
  margin: 58px 0 0 118px;
  line-height: 24px;
}
.public-seller-side .tip-success-container .tip-success-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: #71d329;
  margin-right: 3px;
}
.public-seller-side .tip-success-container span {
  font-size: 14px;
}
.public-seller-side .feedback-box-container {
  width: 210px;
  position: absolute;
  background-color: #fff;
  padding: 7px 14px 12px;
  left: -240px;
  top: -1px;
  border: 1px solid #dcdbdb;
}
.public-seller-side .feedback-box-container .feedback-box-title {
  color: #666;
  line-height: 36px;
  font-weight: normal;
  font-size: 12px;
}
.public-seller-side .feedback-box-container .feedback-box-text {
  height: 96px;
  width: 204px;
  border: 1px solid #dcdbdb;
  resize: none;
  padding: 2px;
  margin: 0;
  font-size: 12px;
}
.public-seller-side .feedback-box-container .feedback-btn-container {
  line-height: 30px;
  margin-top: 4px;
}
.public-seller-side .feedback-box-container .box-not-add-btn {
  background-color: #d2d2d2;
}
.public-seller-side .feedback-box-container .box-not-add-btn:hover {
  background-color: #d2d2d2;
}
.public-seller-side .box-add-btn {
  width: 48px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  background-color: #ff6a04;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.public-seller-side .box-add-btn:hover {
  background-color: #ff7902;
}
.public-seller-side .feedback-box-tips {
  height: 22px;
  line-height: 22px;
}
.public-seller-side .feedback-box-tips .feedback-box-number {
  color: #999;
}
.public-seller-side .feedback-box-tips .feedback-box-wrong {
  color: #f34b4b;
}
.public-seller-side .box-add-icon {
  display: inline-block;
  background: url("../img/seller-sprite.png") no-repeat 0 -120px;
  width: 15px;
  height: 15px;
  margin-right: 6px;
}
.public-seller-side .file-box-add {
  color: #999;
  position: relative;
  cursor: pointer;
}
.public-seller-side .file-box-add .box-add-icon {
  position: absolute;
  top: 50%;
  margin-top: -8px;
}
.public-seller-side .file-box-add .box-add-text {
  display: inline-block;
  margin-left: 18px;
}
.public-seller-side .file-box-add:hover .box-add-text {
  color: #666;
}
.public-seller-side .side-faq-upload .zbj-uploadfile-list li {
  border: none;
}
.public-seller-side .side-faq-upload .zbj-uploadfile-list .zbj-uploadfile-percent-ui {
  background-color: #fef3eb;
}
.public-seller-side .side-faq-upload .zbj-uploadfile-list .zbj-uploadfile-item-detail .zbj-uploadfile-name {
  right: 30px;
  background: url("../img/seller-sprite.png") no-repeat 5px -33px;
}
.public-seller-side .side-faq-upload .zbj-uploadfile-list .zbj-uploadfile-item-detail .zbj-uploadfile-delete {
  color: #bbb;
  font-family: "Microsoft YaHei";
  line-height: 12px;
}
.public-seller-side .side-faq-upload .zbj-uploadfile-list .zbj-uploadfile-item-detail .zbj-uploadfile-delete:hover {
  color: #fff;
  background-color: #f34b4b;
  text-decoration: none;
}
.public-seller-side .side-faq-upload .zbj-uploadfile-list .zbj-uploadfile-status {
  display: none;
}
.public-seller-side .side-connect-context {
  width: 294px;
  padding: 10px 0 10px 16px;
  position: absolute;
  left: -312px;
  top: -1px;
  border: 1px solid #dcdbdb;
  background-color: #fff;
  list-style: none;
}
.public-seller-side .side-connect-item {
  height: 53px;
  padding: 10px 0 11px 0;
  border-top: 1px dashed #f3f3f3;
  color: #666;
}
.public-seller-side .side-connect-item:hover .side-connect-item-title {
  color: #ff6a04;
}
.public-seller-side .side-connect-item-first {
  border-top: none;
}
.public-seller-side .side-connect-item-first:hover .side-connect-item-icon {
  background-position: 0 -175px;
}
.public-seller-side .side-connect-item-first:hover .side-connect-item-next {
  display: inline-block;
}
.public-seller-side .side-connect-item-middle:hover .side-connect-item-icon {
  background-position: 0 -190px;
}
.public-seller-side .side-connect-item-middle:hover .side-connect-item-next {
  display: inline-block;
}
.public-seller-side .side-connect-item-last {
  height: 70px;
  border-bottom: none;
}
.public-seller-side .side-connect-item-box {
  line-height: 26px;
}
.public-seller-side .side-connect-item-box .side-connect-item-icon {
  display: inline-block;
  vertical-align: middle;
}
.public-seller-side .connect-item-box-content {
  line-height: 24px;
  position: relative;
}
.public-seller-side .connect-item-box-content .side-connect-item-next {
  display: none;
  width: 17px;
  height: 17px;
  position: absolute;
  top: -11px;
  right: 18px;
  background-position: 0 -256px;
  cursor: pointer;
}
.public-seller-side .connect-item-box-content .side-connect-item-next:hover {
  background-position: 0 -239px;
}
.public-seller-side .connect-item-box-content .side-connect-item-point {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background-color: #666;
  vertical-align: middle;
}
.public-seller-side .side-connect-item-box-last {
  line-height: 18px;
}
.public-seller-side .side-connect-item-box-last .side-connect-item-content {
  color: #999;
  margin-left: 5px;
}
.public-seller-side .item-icon-customer {
  cursor: pointer;
}
.public-seller-side .item-icon-customer .side-connect-item-icon {
  width: 24px;
  height: 15px;
  background-position: 0 -160px;
}
.public-seller-side .item-icon-estimate {
  cursor: pointer;
}
.public-seller-side .item-icon-estimate .side-connect-item-icon {
  width: 19px;
  height: 17px;
  background-position: 0 -207px;
}
.public-seller-side .item-icon-green {
  cursor: pointer;
}
.public-seller-side .item-icon-green .side-connect-item-icon {
  width: 25px;
  height: 13px;
  background-position: 0 -224px;
}
.public-seller-side .item-icon-green:hover {
  color: #ff6a04;
}
.public-seller-side .seller-side-back-up {
  height: 30px;
  line-height: 30px;
}
.public-seller-side .seller-side-back-up:hover .seller-side-back-icon {
  background-position: 0 -273px;
}
.public-seller-side .seller-side-back-up .seller-side-back-icon {
  display: inline-block;
  width: 17px;
  height: 6px;
  background-position: 0 -279px;
}
.public-seller-side .sprite {
  background: url("../img/seller-sprite.png") no-repeat 0 0;
}
.public-seller-side .box-active {
  display: block;
}
.public-seller-side .box-surplus {
  color: #ec2828;
}
body.seller[tianpeng-user-version] {
  background-color: #f5f5f5;
}
body.seller[tianpeng-user-version] .increment-ucenter-top {
  display: none;
}
body.seller[tianpeng-user-version] .grid {
  width: 1190px;
}
body.seller[tianpeng-user-version] .grid .sidebar {
  width: 119px;
  margin-left: -1190px;
}
body.seller[tianpeng-user-version] .uc-wrap {
  border: none;
  background: none;
}
body.seller[tianpeng-user-version] .uc-wrap .mainContent {
  border-left: none;
  margin-left: 119px;
}
body.seller[tianpeng-user-version].t5s.myzbj .main.wrap {
  width: 1190px;
  margin-top: 10px;
}
body.seller[tianpeng-user-version].t5s.myzbj .main.wrap .interested-content {
  background-color: #fff;
  width: 1021px;
  padding: 16px 25px;
}
body.seller[tianpeng-user-version] .page-ucenter {
  background: #f5f5f5;
  padding: 30px 0;
}
body.seller[tianpeng-user-version] .ucenter-sidebar {
  float: left;
  width: 119px;
}
body.seller[tianpeng-user-version] .ucenter-main {
  margin-left: 120px;
  background: #fff;
  min-height: 600px;
}
body.seller[tianpeng-user-version] .ucenter-side-menu {
  padding: 10px 0;
}
body.seller[tianpeng-user-version] .ucenter-menu-list {
  margin-bottom: 5px;
  font-family: "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', sans-serif;
}
body.seller[tianpeng-user-version] .ucenter-menu-tit {
  font-weight: 700;
  color: #000;
  position: relative;
  cursor: pointer;
}
body.seller[tianpeng-user-version] .ucenter-menu-tit:after {
  background: url('../img/tianpeng-fws/menu.png') no-repeat 0 -12px;
  width: 11px;
  height: 11px;
  position: absolute;
  left: 0;
  top: 4px;
  content: ' ';
  transition: background .2s;
}
body.seller[tianpeng-user-version] .ucenter-menu-tit.collapse:after {
  background-position: 0 0;
}
body.seller[tianpeng-user-version] .ucenter-menu-tit,
body.seller[tianpeng-user-version] .ucenter-menu-item {
  margin-bottom: 8px;
  margin-left: 0;
  padding-left: 15px;
}
body.seller[tianpeng-user-version] .ucenter-menu-item {
  transition: margin-left 0.2s;
  display: none;
}
body.seller[tianpeng-user-version] .ucenter-menu-item:hover {
  margin-left: 2px;
}
body.seller[tianpeng-user-version] .ucenter-menu-item.active .ucenter-menu-link {
  color: #f64735;
}
body.seller[tianpeng-user-version] .ucenter-menu-link {
  display: block;
  color: #666;
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', sans-serif;
}
body.seller[tianpeng-user-version] .ucenter-menu-highlight {
  position: absolute;
  color: #ff624c;
  margin-left: 5px;
  font-style: normal;
}
body.seller[tianpeng-user-version] .hot-icon {
  position: absolute;
  background: url(../img/tianpeng-fws/tianpeng-hot-icon.png) no-repeat top center;
  width: 24px;
  height: 13px;
  font-size: 0;
  top: 3px;
}
body.seller[tianpeng-user-version] .main .main-con {
  width: 1190px;
  max-width: none;
  border: none;
  background: none;
  margin: 0 auto;
}
body.seller[tianpeng-user-version] .main .main-con .ucenter-sidebar-wrap {
  width: 119px;
  float: left;
  padding: 10px 0;
  margin-top: 30px;
}
body.seller[tianpeng-user-version] .main .main-con .contnet {
  margin-left: 119px;
  padding: 15px 0;
  margin-top: 20px;
}
body.seller[tianpeng-user-version] .main .main-con .contnet .cont {
  background-color: #fff;
}
body.seller[tianpeng-user-version] .header-seller {
  font-family: "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', sans-serif;
  background: #f64735;
  height: 80px;
}
body.seller[tianpeng-user-version] .header-seller .grid {
  width: 1190px;
}
body.seller[tianpeng-user-version] .header-seller-home {
  float: left;
  padding-top: 18px;
  margin: 0;
}
body.seller[tianpeng-user-version] .header-seller-logo {
  display: block;
  width: 126px;
  height: 42px;
  background: url(../img/tianpeng-fws/logo-white.png) no-repeat;
  line-height: 200em;
  overflow: hidden;
}
body.seller[tianpeng-user-version] .header-seller-page {
  float: left;
  padding: 23px 0 0 10px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
body.seller[tianpeng-user-version] .header-seller-page:before {
  content: '·';
  font-size: 20px;
  margin-right: 10px;
}
body.seller[tianpeng-user-version] .header-seller-nav {
  float: left;
  padding-left: 20px;
  margin-left: 0;
}
body.seller[tianpeng-user-version] .header-seller-nav li {
  float: left;
  list-style-type: none;
}
body.seller[tianpeng-user-version] .header-seller-nav li a {
  display: block;
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, 'Microsoft Yahei', sans-serif;
}
body.seller[tianpeng-user-version] .header-seller-link {
  float: right;
}
body.seller[tianpeng-user-version] .header-seller-ucbuyer {
  display: block;
  background: #de342f;
  line-height: 80px;
  padding: 0 20px;
  color: #fff;
  font-size: 15px;
  transition: background .2s;
}
body.seller[tianpeng-user-version] .header-seller-ucbuyer:hover {
  color: #fff;
  text-decoration: none;
  background: #cd2823;
}
body.seller[tianpeng-user-version] .header-seller-ucbuyer:before {
  content: '';
  float: left;
  margin: 31px 10px 0 0;
  background: url(../img/tianpeng-fws/header-seller.png) -18px 0 no-repeat;
  width: 16px;
  height: 16px;
}
body.seller[tianpeng-user-version] .header-seller-search {
  float: right;
  height: 32px;
  background: #fff;
  border-radius: 16px;
  margin-top: 23px;
  margin-right: 16px;
  *zoom: 1;
}
body.seller[tianpeng-user-version] .header-seller-search:before,
body.seller[tianpeng-user-version] .header-seller-search:after {
  display: table;
  content: "";
  line-height: 0;
}
body.seller[tianpeng-user-version] .header-seller-search:after {
  clear: both;
}
body.seller[tianpeng-user-version] .header-seller-search-select,
body.seller[tianpeng-user-version] .header-seller-search-input,
body.seller[tianpeng-user-version] .header-seller-search-button {
  float: left;
}
body.seller[tianpeng-user-version] .header-seller-search-select {
  width: 75px;
  position: relative;
  margin: 0;
}
body.seller[tianpeng-user-version] .header-seller-search-select.on .header-seller-search-selected {
  border-radius: 0;
}
body.seller[tianpeng-user-version] .header-seller-search-select.on .header-seller-search-option {
  display: block;
}
body.seller[tianpeng-user-version] .header-seller-search-selected {
  padding-left: 10px;
  overflow: hidden;
  line-height: 32px;
  background: #fafafa;
  color: #666;
  cursor: pointer;
  border-radius: 16px 0 0 16px;
  transition: border-radius 0.1s;
}
body.seller[tianpeng-user-version] .header-seller-search-selected:after {
  content: '';
  position: absolute;
  top: 15px;
  right: 7px;
  width: 7px;
  height: 4px;
  font-size: 0;
  background: url(../img/tianpeng-fws/header-seller.png) -35px 0 no-repeat;
}
body.seller[tianpeng-user-version] .header-seller-search-option {
  display: none;
  z-index: 100;
  position: relative;
  margin-left: 0;
  background: #f1f1f1;
  width: 85px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
body.seller[tianpeng-user-version] .header-seller-search-option a {
  display: block;
  padding: 0 15px;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
  text-decoration: none;
  color: #555;
}
body.seller[tianpeng-user-version] .header-seller-search-option a:hover {
  color: #e8413c;
}
body.seller[tianpeng-user-version] .header-seller-search .header-seller-search-input {
  background: none;
  border: 0;
  height: 32px;
  line-height: 32px;
  width: 134px;
  padding: 0 8px;
}
body.seller[tianpeng-user-version] .header-seller-search-button {
  width: 50px;
  height: 32px;
  background: #de342f;
  border-radius: 0 16px 16px 0;
  border: 0;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
body.seller[tianpeng-user-version] .header-seller-search-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #de342f;
  transition: background .2s;
  border-radius: 0 16px 16px 0;
}
body.seller[tianpeng-user-version] .header-seller-search-button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: url(../img/tianpeng-fws/header-seller.png) no-repeat;
}
body.seller[tianpeng-user-version] .header-seller-search-button:hover,
body.seller[tianpeng-user-version] .header-seller-search-button:hover:before {
  background-color: #cd2823;
}
body.seller[tianpeng-user-version] .tianpeng-list-icon {
  display: inline-block;
  background: url(../img/tianpeng-fws/tianpeng-list-icon.png) no-repeat;
  width: 70px;
  height: 25px;
  font-size: 0;
  position: relative;
  top: -4px;
}
/*
<div class="ui-user-body">
        <dl class="ui-user-body-head">
            <dt>
                <a href="http://home.t6.zbj.com/14032117/" target="_blank"><img src="http://t4.zbjimg.com/r/p/task/120.gif" border="0" width="53" height="53"></a>
            </dt>
            <dd class="first"><a href="#">非凡视觉设计有限公司</a></dd>
            <dd class="last">
                <a href="http://home.zhubajie.la/1746661/evaluation/" target="_blank"><img src="http://t5.zbjimg.com/r/pic/zz3.gif" alt="猪十九戒" title="能力等级：猪十九戒，能力值：1687295" align="absmiddle"></a>
                <a href="http://chengxin.t5.zbj.com/security/buyer" target="_blank"><img src="http://t5.zbjimg.com/r/pic/bao.gif" align="absmiddle"></a>                                    <u class="ml10"><a target="_blank" href="http://chengxin.zhubajie.com/user/intr"><img src="http://t5.zbjimg.com/r/pic/user3.gif" align="absmiddle" title="3级诚信委员"></a></u>
            </dd>
        </dl>
        <ul class="ui-user-body-count clearfix">
            <li>需求<a href="#">23</a></li>
            <li>服务<a href="#">23</a></li>
            <li>谢谢<a href="#">23</a></li>
            <li class="nobd">中标<a href="#">23</a></li>
            <li class="ui-user-body-address nobd"><i class="iconfont">&#xe800;</i>广东 深圳</li>
        </ul>
        <div class="ui-user-body-desc"><em>简介：</em>领先团队在猪八戒网中标1400余次，我们承诺：找领先设计工作室做的任何设计，交接源文件之前全程免费修...</div>
        <div class="ui-user-body-line"></div>
        <div class="ui-user-body-like">TA擅长：标志设计 名片设计 包装设计 海报设计 印刷技术</div>
    </div>
*/
.ui-user-body-head {
  margin: 0;
  padding: 0;
}
.ui-user-body-head dt {
  float: left;
  width: 53px;
  height: 53px;
  margin-right: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.ui-user-body-head dt img {
  width: 53px;
  height: 53px;
}
.ui-user-body-head dd.first a {
  font-size: 14px;
  color: #0b73bb;
  font-weight: bold;
}
.ui-user-body-head dd.last {
  margin-top: 10px;
}
.ui-user-body-count li.ui-user-body-address {
  margin-left: 30px;
}
.ui-user-body-address i {
  color: #9d9d9d;
  font-size: 14px;
  vertical-align: middle;
  margin-right: 3px;
}
.ui-user-body-count {
  clear: both;
  list-style: none;
  margin: 15px 0 0 -5px;
  padding: 0;
  color: #666;
}
.ui-user-body-count .nobd {
  border: none;
}
.ui-user-body-count li a,
.ui-user-body-count li strong {
  margin-left: 3px;
  color: #ff8a00;
  font-weight: bold;
}
.ui-user-body-count li {
  float: left;
  border-right: 1px solid #dbe4ee;
  line-height: 12px;
  padding-right: 5px;
  margin-left: 5px;
}
.ui-user-body-desc {
  color: #999;
  margin-top: 15px;
  max-height: 36px;
  overflow: hidden;
}
.ui-user-body-desc em {
  font-style: normal;
  color: #666;
}
.ui-user-body-line {
  background: #ddd;
  height: 1px;
  font-size: 0;
  margin: 13px 0;
}
.quicklogin-title {
  margin: 0 0 25px 20px;
  font-weight: normal;
}
.ui-quicklogin-wrap .ui-pop-header,
.ui-quicklogin-wrap .ui-window-header {
  position: absolute;
  right: 0;
  border: none;
}
.ui-quicklogin-wrap .ui-pop-header h3,
.ui-quicklogin-wrap .ui-window-header h3 {
  display: none;
}
.ui-quicklogin-wrap .control-label {
  width: 100px;
}
.ui-quicklogin-wrap .quicklogin-phone .control-label {
  width: 120px;
}
.ui-quicklogin-wrap .ui-pop-body,
.ui-quicklogin-wrap .ui-window-body {
  margin: 50px 50px 40px 50px;
}
.quicklogin-passport {
  width: 45%;
  border-right: 1px solid #e5e5e5;
}
.quicklogin-phone {
  width: 52%;
}
.quicklogin-passport h3 {
  font-size: 18px;
}
.quicklogin-passport h3 strong {
  color: #f60;
  font-weight: normal;
  margin: 0 5px;
}
.quicklogin-phone h3 {
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 25px 20px;
}
.quicklogin-phone .quicklogin-getverify {
  margin-top: 5px;
  margin-left: 10px;
}
.quickLogin-register-apply .register-title {
  font-weight: normal;
  font-size: 13px;
  margin: 15px 0px;
  color: #333;
}
.quickLogin-register-apply .register-apply-form {
  font-size: 13px;
  color: #333;
}
.quickLogin-register-apply .register-apply-form .control-label {
  width: 80px;
  font-size: 13px;
}
.quickLogin-register-apply .register-apply-form .controls input {
  height: 14px;
  margin-left: 0;
}
.quickLogin-register-apply .register-apply-form .cityAddress {
  padding-top: 7px;
}
.quickLogin-register-apply .detailAddress-div {
  overflow: hidden;
}
.quickLogin-register-apply .register-apply-form .controls .form-detailAddress-input {
  width: 347px;
}
.quickLogin-register-apply .register-apply-form .control-label {
  padding-top: 6px;
}
.quickLogin-register-apply .register-apply-content .alert {
  font-size: 12px;
}
.quickLogin-register-apply .register-apply-form .last-control-group {
  margin-bottom: 10px;
}
.quickLogin-register-apply .mobile-sign-tip {
  padding-left: 92px;
  color: #333;
  font-size: 13px;
}
.quickLogin-register-apply .address-selector select {
  width: 115px;
  margin-right: 8px;
  font-size: 12px;
}
.ui-quicklogin .other-login {
  overflow: hidden;
  margin-top: 30px;
}
.ui-quicklogin .other-login .way-wrap {
  float: left;
  margin-left: 20px;
}
.ui-quicklogin .other-login .way-wrap .way {
  overflow: hidden;
  margin-top: 10px;
}
.ui-quicklogin .other-login .way-wrap .way a {
  float: left;
  width: 27px;
  height: 27px;
  margin-right: 15px;
}
.ui-quicklogin .other-login .way-wrap .way a.qq {
  background: url(../img/login-img.png) no-repeat 0 -53px;
}
.ui-quicklogin .other-login .way-wrap .way a.weibo {
  background: url(../img/login-img.png) no-repeat 0 -106px;
}
.ui-quicklogin .other-login .way-wrap .way a.taobao {
  background: url(../img/login-img.png) no-repeat 0 0px;
}
.ui-quicklogin .other-login .other-reg {
  float: right;
  margin-right: 58px;
}
/*
 *
 * 服务宝项目宣贯入口以及需求发布小入口
 *
*/
.fuwubao-sideblock {
  padding: 20px 20px 10px;
  background: #0dad51;
  position: relative;
  color: #fff;
  text-align: center;
}
.fuwubao-sideblock a.fuwubao-sideblock-entry {
  display: block;
}
.fuwubao-sideblock a.fuwubao-sideblock-entry:hover {
  text-decoration: none;
}
.fuwubao-sideblock .fuwubao-block-bd h3 {
  font-size: 16px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #fefefe;
}
.fuwubao-sideblock .fuwubao-block-bd .fuwubao-title-tip {
  color: #fff;
}
.fuwubao-sideblock .fuwubao-block-detail {
  position: relative;
  width: 100%;
  padding-left: 10px;
  left: -10px;
  padding-right: 10px;
  border-top: 1px dashed #ccc;
  margin-top: 12px;
  padding-top: 16px;
  display: none;
  text-align: left;
}
.fuwubao-sideblock .fuwubao-block-detail ul {
  margin-left: 5px;
}
.fuwubao-sideblock .fuwubao-block-detail li {
  background: url("../../common/img/fuwubao/fuwubao-checked.png") no-repeat left center;
  padding-left: 16px;
  font-size: 13px;
  color: #999999;
}
.fuwubao-sideblock-channel {
  margin-top: 15px;
}
.fuwubao-sideblock-task {
  padding: 30px 8px 28px;
}
.fuwubao-sideblock-taskpub {
  background: #FBFBFB;
}
.fuwubao-sideblock-taskpub .fuwubao-block-bd h3 {
  color: #333;
}
.fuwubao-sideblock-taskpub .fuwubao-block-bd .fuwubao-title-tip {
  display: none;
}
.fuwubao-sideblock-taskpub .fuwubao-block-detail {
  display: block;
}
.fuwubao-sideblock-taskpub .fuwubao-block-detail ul {
  margin-left: 36px;
}
.fuwubao-sideblock-taskpub .fuwubao-block-detail ul li {
  font-size: 14px;
}
.service-final-page .fuwubao-sideblock {
  padding-left: 5px;
  padding-right: 5px;
}
.service-final-page .fuwubao-sideblock .fuwubao-block-detail {
  left: 0;
  padding-left: 1px;
  padding-right: 1px;
}
.service-final-page .fuwubao-sideblock .fuwubao-block-detail ul {
  margin-left: 0;
}
.service-final-page .fuwubao-sideblock .fuwubao-block-detail li {
  font-size: 12px;
}
.quickpub-sideblock {
  background: #fff;
}
.quickpub-sideblock > i {
  position: absolute;
  width: 75px;
  height: 80px;
  background: url('../img/ico-shangji-pig.png') no-repeat;
  top: -62px;
  right: -12px;
}
.quickpub-sideblock .quickpub-hd {
  margin-top: 0;
}
.quickpub-sideblock .quickpub-hd h3 {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  height: 41px;
  background: #ff9400;
  line-height: 41px;
}
.quickpub-sideblock form {
  margin-bottom: 0;
}
.quickpub-sideblock input,
.quickpub-sideblock textarea,
.quickpub-sideblock select {
  margin-bottom: 10px;
}
.quickpub-sideblock input,
.quickpub-sideblock textarea {
  border: 1px solid #d9d9d9;
  width: 198px;
  padding: 5px;
  font-size: 12px;
  border-radius: 0;
  box-shadow: none;
}
.quickpub-sideblock input {
  height: 21px;
  line-height: 21px;
}
.quickpub-sideblock select {
  width: 210px;
  border-color: #d9d9d9;
  border-radius: 0;
  font-size: 12px;
}
.quickpub-sideblock textarea {
  resize: none;
  height: 70px;
}
.quickpub-sideblock .quickpub-ft {
  text-align: right;
}
.quickpub-sideblock .quickpub-act {
  margin-bottom: 10px;
}
.quickpub-sideblock .quickpub-intro .quickpub-num {
  color: #666;
  margin-left: 5px;
  margin-right: 5px;
}
.quickpub-sideblock.quickpub-narrow {
  padding: 0px;
}
.quickpub-sideblock.quickpub-narrow .quickpub-phone,
.quickpub-sideblock.quickpub-narrow .quickpub-user {
  width: 153px;
}
.quickpub-sideblock.quickpub-narrow .quickpub-phone input,
.quickpub-sideblock.quickpub-narrow .quickpub-user input {
  width: 144px;
}
.quickpub-sideblock.quickpub-narrow .quickpub-act {
  width: 186px;
}
.quickpub-sideblock-list {
  border: 1px solid #701719;
  position: relative;
  margin-top: 13px;
}
.quickpub-sideblock-task {
  border: 1px solid #701719;
}
.quickpub-sideblock-task input,
.quickpub-sideblock-task textarea {
  width: 162px;
}
.quickpub-sideblock-task select {
  width: 174px;
}
.quickpub-sideblock-taskpub {
  display: none;
}
/*新快速发布*/
.sbsj-fastpub.fastpub-box {
  background: #fff;
  text-align: center;
}
.sbsj-fastpub.fastpub-box .fastpub-bg {
  background: url(/t5s/common/img/fuwubao/sbsj_title.png) center center no-repeat;
  width: 230px;
  height: 50px;
}
.sbsj-fastpub.fastpub-box > p {
  color: #ff8a00;
  text-align: center;
  font-size: 13px;
}
.sbsj-fastpub.fastpub-box .fastpub-line {
  padding: 0 15px;
  margin-top: 10px;
}
.sbsj-fastpub.fastpub-box .fastpub-brand,
.sbsj-fastpub.fastpub-box .fastpub-phone {
  width: 188px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 13px;
  color: #333;
  display: block;
  margin: 0 auto;
  border: 1px solid #ff8a00;
  border-radius: 0;
}
.sbsj-fastpub.fastpub-box .fastpub-check {
  line-height: 46px;
  font-size: 12px;
  color: #333;
  padding: 0 15px;
}
.sbsj-fastpub.fastpub-box .fastpub-check .fastpub-yes i,
.sbsj-fastpub.fastpub-box .fastpub-check .fastpub-no i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #ff8a00;
  color: #333;
  position: relative;
  top: 3px;
  margin: 0 3px;
}
.sbsj-fastpub.fastpub-box .fastpub-check i:hover {
  cursor: pointer;
}
.sbsj-fastpub.fastpub-box .fastpub-name {
  width: 104px;
  height: 22px;
  line-height: 22px;
  margin-right: 10px;
  border: 1px solid #ff8a00;
  color: #333;
  border-radius: 0;
  text-align: center;
}
.sbsj-fastpub.fastpub-box .fastpub-check-right {
  width: 18px;
  height: 15px;
  position: absolute;
  top: -3px;
  left: -3px;
  display: inline-block;
  background: url(/t5s/common/img/fuwubao/check.png) no-repeat;
}
.sbsj-fastpub.fastpub-box .fastpub-check-right.hide {
  background: none;
}
.sbsj-fastpub.fastpub-box select {
  width: 68px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #ff8a00;
  color: #333;
  border-radius: 0;
}
.sbsj-fastpub.fastpub-box .fastpub-newbtn {
  width: 148px;
  height: 44px;
  background: #ff8a00;
  text-align: center;
  line-height: 44px;
  color: #fff;
  display: inline-block;
  margin: 30px 0;
  font-size: 13px;
}
/**
 * 机会样式
 */
.jh-slideblock {
  font-family: 'microsoft yahei';
  position: relative;
}
.jh-slideblock input {
  font-family: inherit;
}
.jh-slideblock .quickpub-hd h3 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  color: #fff;
  height: 41px;
  background: #ff9400;
  line-height: 41px;
  text-align: center;
}
.jh-slideblock .quickpub-hd p {
  text-align: center;
  height: 39px;
  line-height: 39px;
  margin: 0px;
  color: #701719;
}
.jh-slideblock .ui-btn-inverse {
  display: block;
  border-color: #ff7200;
  background-color: #ff7200;
}
.quickpub-phone,
.quickpub-user {
  padding: 0px;
  width: 163px;
  height: 31px;
  color: #999;
  margin: 0 auto;
  display: block;
  margin-bottom: 10px;
  padding-left: 31px;
  border: 1px solid #d9d9d9;
}
.quickpub-phone input,
.quickpub-user input {
  padding: 0px 0px 0px 8px;
  height: 31px;
  line-height: 31px;
  width: 154px;
  border: none;
  border-left: 1px solid #d9d9d9;
}
.quickpub-phone {
  background: url('../img/bg-quick-pub-phone.jpg') no-repeat 9px center;
}
.quickpub-user {
  background: url('../img/bg-quick-pub-user.jpg') no-repeat 9px center;
}
.quickpub-type {
  background: url('../img/bg-quick-pub-type.png') no-repeat 9px center;
  position: relative;
}
.quickpub-type .quickpub-type-pointer {
  position: absolute;
  width: 18px;
  height: 31px;
  background: #f8f9f9;
  right: 0px;
  top: 0px;
  border-left: 1px solid #d9d9d9;
}
.quickpub-type .quickpub-type-pointer em {
  display: block;
  width: 10px;
  height: 6px;
  margin: 12px auto 0px;
  background: url('../img/btn-type-pointer.jpg') no-repeat;
}
.quickpub-type .quickpub-type-pointer em.open {
  transform: rotate(180deg);
}
.quickpub-type input {
  background: none;
  cursor: default;
}
.quickpub-type .quickpub-type-combo {
  position: absolute;
  top: 31px;
  left: -1px;
  width: 194px;
  border: 1px solid #e5e5e5;
  background: #fff;
  padding-top: 3px;
  display: none;
}
.quickpub-type .quickpub-type-combo ul {
  overflow: hidden;
  list-style: none;
  margin-left: 9px;
}
.quickpub-type .quickpub-type-combo ul li {
  float: left;
  width: 90px;
  height: 20px;
  color: #333;
  margin: 0px;
  cursor: pointer;
}
.quickpub-type .quickpub-type-combo ul li:hover {
  color: #ff9400;
}
.jh-custom-dialog {
  font-family: 'microsoft yahei';
  border-radius: 0;
}
.jh-custom-dialog .ui-pop-header,
.jh-custom-dialog .ui-window-header {
  background-color: #fbfbfb;
}
.jh-custom-dialog .ui-pop-body h2,
.jh-custom-dialog .ui-window-body h2 {
  text-indent: -999em;
  height: 50px;
  width: 290px;
  margin: 10px auto;
  background: url(/t5s/common/img/fuwubao/dialog-tip.png) 0 0 no-repeat;
}
.jh-custom-dialog .ui-pop-body p,
.jh-custom-dialog .ui-window-body p {
  text-align: center;
  padding: 4px;
}
.jh-custom-dialog .ui-pop-footer,
.jh-custom-dialog .ui-window-footer {
  background: none;
  border: none;
}
.jh-custom-dialog .ui-pop-footer button,
.jh-custom-dialog .ui-window-footer button {
  display: block;
  margin: 10px auto;
  padding: 5px 20px;
}
.jh-slideblock .quickpub-ft {
  text-align: center;
  color: #f6856a;
  margin: 10px auto 17px;
}
.jh-slideblock .quickpub-ft .quickpub-num {
  color: #999;
  margin-top: 4px;
}
.jh-slideblock .quickpub-ft .quickpub-note {
  color: #946e6f;
  line-height: 20px;
  margin-bottom: 0px;
  margin-top: 10px;
}
#quickpub-sideblock-submit {
  padding-top: 0px;
  padding-bottom: 0px;
  height: 33px;
  line-height: 33px;
}
.jh-slideblock .quickpub-act {
  display: block;
  width: 196px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  margin: 16px auto 0px;
  overflow: hidden;
}
.complete-business-info .employ-contact {
  float: left;
}
.complete-business-info .employ-contact .employ-dialog-section-title {
  display: none;
}
.complete-business-info .employ-contact .employ-dialog-modifyphone-verify:hover {
  text-decoration: none;
}
.complete-business-info .employ-contact .modifyphone-error {
  display: none !important;
}
.complete-business-info .employ-contact.has-verified .unstyled {
  padding-top: 5px;
}
.complete-business-info .employ-contact.has-verified li:first-child label {
  color: #888;
}
.complete-business-info .employ-contact.has-verified li:first-child label input {
  display: none;
}
.complete-business-info .employ-contact.has-verified li:last-child {
  display: none;
}
.complete-business-info .employ-contact.not-verified .unstyled {
  display: none;
}
.business-opportunities {
  top: 55%;
  border: 0;
  border-radius: 0;
}
.business-opportunities .ui-pop-header,
.business-opportunities .ui-pop-footer,
.business-opportunities .ui-window-header,
.business-opportunities .ui-window-footer {
  display: none;
}
.business-opportunities .ui-pop-body,
.business-opportunities .ui-window-body {
  background-color: #f4f1f1;
  font-family: "microsoft yahei";
  padding: 0;
}
.complete-business-info {
  position: relative;
}
.complete-business-info .ui-win-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 21px;
  height: 21px;
  background: url(/t5s/common/img/fork.png) center center no-repeat;
}
.complete-business-info.apply-fail .ui-win-close {
  background: url(/t5s/common/img/fork_a.png) center center no-repeat;
}
.complete-business-info .prompt-infor {
  background-color: #81d36e;
  background-image: -moz-linear-gradient(top, #81d36e, #59cd7c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#81d36e), to(#59cd7c));
  background-image: -webkit-linear-gradient(top, #81d36e, #59cd7c);
  background-image: -o-linear-gradient(top, #81d36e, #59cd7c);
  background-image: linear-gradient(to bottom, #81d36e, #59cd7c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81d36e', endColorstr='#59cd7c', GradientType=0);
  padding: 40px 60px;
}
.complete-business-info.apply-fail .prompt-infor {
  background-color: #ffbd49;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd49', endColorstr='#ffbd49', GradientType=0);
  padding: 20px 60px;
}
.complete-business-info.apply-fail .prompt-infor img {
  width: 33px;
  height: 33px;
}
.complete-business-info.apply-fail .prompt-infor h2 {
  display: inline-block;
  color: #fff;
  font-size: 25px;
  margin: 0 0 0 10px;
  vertical-align: middle;
}
.complete-business-info .media-left {
  float: left;
  width: 60px;
  height: 61px;
}
.complete-business-info .media-left > img {
  width: 100%;
  height: 100%;
}
.complete-business-info .media-body {
  color: #fff;
  padding-left: 80px;
}
.complete-business-info .media-body > h2 {
  font-size: 30px;
  line-height: 1.0;
  margin: 0 0 10px 0;
}
.complete-business-info .media-body > p {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}
.complete-business-info .complete-info {
  padding-left: 60px;
}
.complete-business-info .complete-info .form-tips {
  color: #555;
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 20px 0;
}
.complete-business-info .complete-info .control-label {
  width: 70px;
  color: #666;
  font-size: 14px;
  padding-top: 5px;
}
.complete-business-info .complete-info .controls {
  height: 30px;
  line-height: 30px;
  margin-left: 0;
}
.complete-business-info .complete-info .controls p {
  color: #888;
  padding-right: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.complete-business-info .complete-info .controls input {
  padding: 6px 5px;
}
.complete-business-info .complete-info .controls.intro-wrap {
  height: 110px;
  line-height: 110px;
}
.complete-business-info .complete-info .controls.category-wrap {
  width: 340px;
}
.complete-business-info .complete-info .controls.category-wrap .category-edit {
  position: absolute;
  top: 0;
  right: 0;
  color: #1d80fa;
}
.complete-business-info .complete-info .controls input,
.complete-business-info .complete-info .controls textarea,
.complete-business-info .complete-info .controls select {
  width: 330px;
  border-radius: 0;
  margin-bottom: 0;
}
.complete-business-info .complete-info .controls textarea {
  height: 100px;
  resize: none;
}
.complete-business-info .complete-info .controls .category1 {
  width: 230px;
  margin-right: 5px;
}
.complete-business-info .complete-info .controls .category2 {
  width: 100px;
}
.complete-business-info .complete-info .control-group .section {
  display: inline-block;
}
.complete-business-info .complete-info .control-group {
  margin-bottom: 20px;
}
.complete-business-info .business-actions {
  margin: 0 0 30px -70px;
  text-align: center;
}
.complete-business-info .business-actions .ui-btn {
  width: 150px;
}
.complete-business-info .business-actions .not-perfect {
  display: inline-block;
  color: #555;
  margin-left: 10px;
  vertical-align: bottom;
}
.complete-business-info .failure-reasons {
  padding: 30px 20px;
}
.complete-business-info .failure-reasons p {
  font-family: "microsoft yahei";
  font-size: 14px;
}
.complete-business-info.apply-fail .business-actions {
  margin: 0 0 40px 0;
}
.sidebar {
  position: relative;
  float: left;
  width: 170px;
  z-index: 1;
}
.sidebar.new-silde-nav {
  background: #ff7900;
}
.sidebar .tit {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #f60;
  font-size: 16px;
  font-weight: normal;
  color: #fff;
  font-family: Microsoft Yahei;
  margin: 0;
}
.sidebar .tit i.iconfont {
  position: absolute;
  right: 20px;
  top: 0;
  color: #fff;
  font-size: 18px;
  background-color: #f60;
}
.sidebar .list-type {
  padding: 0;
  margin: 0;
  background: #ff7900;
  font-size: 14px;
  position: absolute;
  height: 500px;
  width: 100%;
  left: 0;
  top: 40px;
  display: none;
}
.sidebar .list-type li {
  list-style: none;
  font-family: Microsoft Yahei;
  overflow: hidden;
  transition: background 0.2s, padding-left 0.2s;
  -webkit-transition: background 0.2s, padding-left 0.2s;
}
.sidebar .list-type li:hover {
  padding-left: 5px;
  text-decoration: none;
  background: #ff9000;
}
.sidebar .list-type li > a {
  display: block;
  color: #fff !important;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
}
.sidebar .list-type i {
  display: inline-block;
  height: 25px;
  width: 25px;
  margin: 0 5px;
  background: url(../../common/img/ico-menu.png) no-repeat center;
  vertical-align: middle;
}
.sidebar .list-type .icon-ppsj {
  height: 19px;
  width: 25px;
  background-position: 0 0px;
}
.sidebar .list-type .icon-pmsj {
  background-position: 0 -30px;
}
.sidebar .list-type .icon-wd {
  background-position: 0 -71px;
}
.sidebar .list-type .icon-wa {
  background-position: 0 -109px;
}
.sidebar .list-type .icon-wzkf {
  background-position: 0 -147px;
}
.sidebar .list-type .icon-rj {
  background-position: 0 -186px;
}
.sidebar .list-type .icon-dmyy {
  background-position: 0 -224px;
}
.sidebar .list-type .icon-zxfw {
  background-position: 0 -261px;
}
.sidebar .list-type .icon-fz {
  background-position: 0 -299px;
}
.sidebar .list-type .icon-yxkf {
  background-position: 0 -337px;
}
.sidebar .list-type .icon-zx {
  background-position: 0 -374px;
}
.sidebar .list-type .icon-zrfw {
  background-position: 0 -415px;
}
.sidebar .list-type .icon-jz {
  background-position: 0 -451px;
}
.sidebar .menu-img {
  width: 220px;
  float: left;
  overflow: hidden;
  display: none;
}
.sidebar .menu-img img {
  width: 220px;
  height: 165px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}
.collapse-menu {
  position: absolute;
  top: 0;
  left: 190px;
  height: 498px;
  width: 460px;
  border: 1px solid #ddd;
  background-color: #fff;
  display: none;
}
.collapse-menu .menu-list {
  float: left;
  height: 100%;
  width: 460px;
  border-right: 1px solid #ddd;
  box-shadow: 1px 0px 4px #ddd;
  color: #000;
}
.collapse-menu .menu-list dl {
  margin: 15px 20px;
  overflow: hidden;
  max-height: 100px;
  box-sizing: border-box;
}
.collapse-menu .menu-list dl .menu-subtitle {
  display: block;
  border-bottom: 1px solid #d1d1d1;
}
.collapse-menu .menu-list dl dt {
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  overflow: hidden;
  display: inline;
  border-bottom: 1px solid #000;
  padding-bottom: 6px;
}
.collapse-menu .menu-list dl dt:hover {
  color: #ff9000;
}
.collapse-menu .menu-list dl dd {
  padding-right: 15px;
  font-size: 12px;
  line-height: 1;
  margin-left: 0;
  margin-top: 12px;
  display: inline-block;
}
.collapse-menu .menu-list dl dd a {
  color: #868686;
}
.collapse-menu .menu-list dl dd a i {
  position: relative;
  top: -10px;
  display: inline-block;
  height: 16px;
  width: 13px;
  background: url(../img/hot-icon.png) no-repeat;
  left: -5px;
}
.collapse-menu .menu-list dl dd a:hover {
  text-decoration: underline;
}
.collapse-menu .menu-list dl a {
  color: #000;
}
.collapse-menu .menu-list dl a:hover {
  color: #ff9000;
}
.collapse-menu .menu-list dl .hot-words {
  color: #ff7900;
}
.collapse-menu .menu-list .first-item {
  border-top: none;
}
body.t5s .ui-menu .sidebar a {
  color: #000;
}
body.t5s .ui-menu .sidebar a:hover {
  color: #ff7900;
}
.menu-list-title {
  height: 38px;
  line-height: 38px;
  transition: .2s ease;
  -webkit-transition: .2s ease;
  color: #fff;
  cursor: default;
}
.menu-list-title:hover {
  background: #ff9400;
}
.menu-list-title .menu-list-link {
  cursor: pointer;
  color: #fff;
}
.menu-list-title .menu-list-link:link {
  color: #fff;
}
.menu-list-title .menu-list-link:hover,
.menu-list-title .menu-list-link:visited,
.menu-list-title .menu-list-link:active {
  color: #fff;
  text-decoration: underline;
}
body.t5s .ui-menu .sidebar .menu-list-link {
  color: #fff;
}
body.t5s .ui-menu .sidebar .menu-list-link:hover {
  color: #fff;
}
.new-quickpub-sideblock {
  border: 1px solid #d2d2d2;
  background: #fff;
  margin-bottom: 5px;
}
.new-quickpub-sideblock input,
.new-quickpub-sideblock #J-ct-mobile,
.new-quickpub-sideblock #J-ct-name {
  outline: none;
  box-shadow: none;
  box-shadow: 0;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.new-quickpub-sideblock #J-ct-mobile:focus,
.new-quickpub-sideblock #J-ct-name:focus,
.new-quickpub-sideblock input[type="text"]:focus {
  outline: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #d2d2d2;
}
.new-quickpub-sideblock #J-ct-type {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 128px;
}
.new-quickpub-sideblock .quickpub-hd {
  position: relative;
}
.new-quickpub-sideblock .quickpub-hd .header-img {
  width: 100%;
  max-height: 125px;
}
.new-quickpub-sideblock .quickpub-hd .header-text {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
}
.new-quickpub-sideblock .quickpub-hd .header-text p {
  color: #fff;
  padding: 0;
  margin: 0;
  max-width: 130px;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-align: left;
}
.new-quickpub-sideblock .quickpub-hd .header-text p.title {
  font-weight: 600;
}
.new-quickpub-sideblock .quickpub-hd .person-info-scroll {
  height: 20px;
  line-height: 20px;
  margin: 10px 16px;
  overflow: hidden;
  font-family: sans-serif;
}
.new-quickpub-sideblock .quickpub-hd .person-info-scroll ul,
.new-quickpub-sideblock .quickpub-hd .person-info-scroll li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.new-quickpub-sideblock .quickpub-hd .person-info-scroll .person-info {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.new-quickpub-sideblock .quickpub-hd .person-info-scroll .person-info span {
  display: inline-block;
  overflow: hidden;
  height: 100%;
  color: #999;
  width: 70px;
}
.new-quickpub-sideblock .quickpub-hd .person-info-scroll .person-info span.name {
  width: 30px;
  color: #666;
  margin-right: 5px;
}
.new-quickpub-sideblock .quickpub-hd .person-info-scroll .person-info span.fr {
  width: 75px;
  text-align: right;
}
.new-quickpub-sideblock .footer-tab {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  margin: 10px 15px;
}
.new-quickpub-sideblock .footer-tab span {
  display: inline-block;
  width: 31%;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #e5e5e5;
  color: #666;
  cursor: pointer;
  font-size: 13px;
  font-family: sans-serif;
}
.new-quickpub-sideblock .footer-tab span.last {
  border-right: 0;
}
.new-quickpub-sideblock .footer-tab span:hover,
.new-quickpub-sideblock .footer-tab span.active {
  color: #ff9000;
}
.new-quickpub-sideblock .footer-tab span .icon-left {
  vertical-align: -3px;
  height: 15px;
  max-width: 17px;
  margin-right: 7px;
}
.new-quickpub-sideblock .footer-tab .ui-switchable-active {
  color: #ff9000;
}
.new-quickpub-sideblock .quickpub-note-slide {
  position: relative;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.new-quickpub-sideblock .quickpub-note-slide ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.new-quickpub-sideblock .quickpub-note-slide .quickpub-note-pannel {
  list-style: none;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.new-quickpub-sideblock .quickpub-note-slide .quickpub-note-pannel span {
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  color: #ff9000;
  background-color: #fff2e2;
  border-radius: 10px;
  display: inline-block;
  padding: 0px 8px;
  font-family: sans-serif;
  margin: 0 10px;
}
.new-quickpub-sideblock .quickpub-act .ui-btn {
  font-size: 15px;
  font-family: sans-serif;
}
.new-quickpub-sideblock.channel-index {
  width: 260px;
}
.new-quickpub-sideblock.channel-index .quickpub-phone,
.new-quickpub-sideblock.channel-index .quickpub-user {
  width: 195px;
}
.new-quickpub-sideblock.channel-index .quickpub-phone input,
.new-quickpub-sideblock.channel-index .quickpub-user input {
  width: 185px;
}
.new-quickpub-sideblock.channel-index .quickpub-act {
  width: 230px;
}
.new-quickpub-sideblock.channel-index .quickpub-act .ui-btn {
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  background-color: #ff9000;
  border-color: #ff9000;
}
.new-quickpub-sideblock.channel-index .quickpub-hd .person-info-scroll {
  font-family: Microsoft YaHei;
}
.new-quickpub-sideblock.channel-index .footer-tab span {
  font-family: Microsoft YaHei;
}
.new-quickpub-sideblock.channel-index .footer-tab span .icon-left {
  vertical-align: middle;
  height: 17px;
  max-width: 20px;
  margin-right: 7px;
}
.new-quickpub-sideblock.channel-page {
  width: 225px;
}
.new-quickpub-sideblock.task_page .header-text {
  font-size: 12px;
  top: 11px;
  left: 11px;
}
.new-quickpub-sideblock.task_page .header-text p {
  height: 18px;
  line-height: 18px;
}
.new-quickpub-sideblock.task_page .footer-tab span {
  width: 31%;
}
.new-quickpub-sideblock .quickpub-type-combo {
  z-index: 11;
}
/*服务宝页面单独样式*/
.fuwubao-index-pub .ibid-bg .quickpub-sideblock {
  width: 230px;
  margin: auto;
  padding-top: 20px;
  text-align: left;
  background-color: #fff;
}
/*商机框样式2*/
.quickpub_xuanshang,
.quickpub_zhongbang {
  border: 1px solid #e0e0e0;
}
.quickpub_xuanshang .quickpub-hd,
.quickpub_zhongbang .quickpub-hd {
  height: 35px;
  line-height: 35px;
  width: 100%;
  background-color: #f7f7f7;
  color: #666;
  font-size: 16px;
  text-align: left;
  font-weight: 600;
  padding-left: 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f0f0;
  overflow: hidden;
}
.quickpub_xuanshang .quickpub-bd {
  padding: 17px 0;
  text-align: center;
}
.quickpub_xuanshang .quickpub-bd .quickpub-img {
  width: 200px;
  height: 147px;
}
.quickpub_xuanshang .quickpub-bd a {
  outline: 0;
}
.quickpub_xuanshang.jh-slideblock .quickpub-ft {
  overflow: hidden;
  background-color: #f7f7f7;
  margin: 0;
}
.quickpub_xuanshang.jh-slideblock .quickpub-ft .quickpub-act {
  height: 35px;
  background-color: #f60;
  border-radius: 5px;
  margin-top: 15px;
  width: 197px;
}
.quickpub_xuanshang.jh-slideblock .quickpub-ft .quickpub-act #quickpub-sideblock-submit {
  height: 35px;
  line-height: 35px;
  background-color: #f60;
  font-size: 17px;
  letter-spacing: 1px;
  font-family: Microsoft YaHei;
}
.quickpub_xuanshang.jh-slideblock .quickpub-ft .footer-zhongbang {
  display: none;
}
.quickpub_xuanshang.jh-slideblock .quickpub-ft .footer-xuanshang {
  color: #666;
  margin: 12px 15px 10px;
  font-size: 13px;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.quickpub_xuanshang.jh-slideblock .quickpub-ft .footer-xuanshang .total-number {
  color: #f60;
}
.quickpub_zhongbang .quickpub-bd {
  padding: 17px 0;
  text-align: center;
}
.quickpub_zhongbang .quickpub-bd .quickpub-img {
  width: 210px;
  height: 170px;
}
.quickpub_zhongbang .quickpub-bd a {
  outline: 0;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft {
  overflow: hidden;
  background-color: #f7f7f7;
  margin: 0;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft .quickpub-act {
  height: 35px;
  background-color: #f60;
  border-radius: 5px;
  margin-top: 20px;
  width: 197px;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft .quickpub-act #quickpub-sideblock-submit {
  height: 35px;
  line-height: 35px;
  background-color: #f60;
  font-size: 17px;
  letter-spacing: 1px;
  font-family: Microsoft YaHei;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft .footer-xuanshang {
  display: none;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft .footer-zhongbang {
  color: #666;
  margin: 12px auto 12px;
  font-size: 13px;
  padding: 0 16px;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft .footer-zhongbang .total-number {
  color: #f60;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft .footer-zhongbang span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  max-width: 90px;
  margin-right: 10px;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft .footer-zhongbang span.last {
  margin-right: 0px;
}
.quickpub_zhongbang.jh-slideblock .quickpub-ft .footer-zhongbang span .icon-left {
  vertical-align: -4px;
  height: 19px;
  max-width: 20px;
  margin-right: 7px;
}
/**顶部手机猪八戒**/
.ui-dropdown-hd.mobiphone .wei {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("../img/ico-mobile-wei.png") no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}
.ui-dropdown-hd.mobiphone span {
  vertical-align: middle;
}
.ui-dropdown-hd.mobiphone:hover .wei {
  background: url("../img/ico-mobile-wei.png") no-repeat 0 -16px;
}
.ui-dropdown {
  font-family: 'microsoft yahei';
}
.ui-dropdown .app-download {
  background: url('../img/ico-wei-arrow.jpg') no-repeat 5px 1px;
  height: 112px;
  width: 245px;
}
.ui-dropdown .app-download .img {
  margin-top: 15px;
  margin-left: 22px;
}
.ui-dropdown .app-download .img img {
  width: 86px;
}
.ui-dropdown .app-download .text {
  margin-left: 23px;
}
.ui-dropdown .app-download .text p {
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}
.ui-dropdown .app-download .text a.mobile-link-btn {
  display: block;
  background: #ff7900;
  color: #fff;
  font-family: 'microsoft yahei';
  width: 86px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  border-radius: 2px;
  margin-top: 15px;
}
.mCustomScrollbar {
  -ms-touch-action: pinch-zoom;
  touch-action: pinch-zoom;
}
.mCustomScrollbar.mCS_no_scrollbar,
.mCustomScrollbar.mCS_touch_action {
  -ms-touch-action: auto;
  touch-action: auto;
}
.mCustomScrollBox {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: 0;
  direction: ltr;
}
.mCSB_container {
  overflow: hidden;
  width: auto;
  height: auto;
}
.mCSB_inside > .mCSB_container {
  margin-right: 30px;
}
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
}
.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-left: 30px;
}
.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0;
}
.mCSB_scrollTools {
  position: absolute;
  width: 16px;
  height: auto;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: .75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}
.mCSB_outside + .mCSB_scrollTools {
  right: -26px;
}
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  right: auto;
  left: 0;
}
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: -26px;
}
.mCSB_scrollTools .mCSB_draggerContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}
.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 20px 0;
}
.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}
.mCSB_scrollTools .mCSB_dragger {
  cursor: pointer;
  width: 100%;
  height: 30px;
  z-index: 1;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  text-align: center;
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px;
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px;
}
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonUp {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}
.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0;
}
.mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-bottom: 30px;
}
.mCSB_horizontal.mCSB_outside > .mCSB_container {
  min-height: 100%;
}
.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: -26px;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0 20px;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 2px;
  margin: 7px 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px;
  height: 100%;
  left: 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  margin: 2px auto;
}
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 8px;
  margin: 4px 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0;
}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0;
}
.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px;
}
.mCSB_container_wrapper > .mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px;
}
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px;
}
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0;
}
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0;
}
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px;
}
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0;
}
.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper {
  margin-right: 0;
  margin-left: 30px;
}
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
  padding-right: 0;
}
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
  padding-bottom: 0;
}
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
  margin-left: 0;
}
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}
.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
  -webkit-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  -o-transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
  transition: width 0.2s ease-out 0.2s, height 0.2s ease-out 0.2s, margin-left 0.2s ease-out 0.2s, margin-right 0.2s ease-out 0.2s, margin-top 0.2s ease-out 0.2s, margin-bottom 0.2s ease-out 0.2s, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 0;
  filter: "alpha(opacity=0)";
  -ms-filter: "alpha(opacity=0)";
}
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}
.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
  filter: "alpha(opacity=85)";
  -ms-filter: "alpha(opacity=85)";
}
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight,
.mCSB_scrollTools .mCSB_buttonUp {
  background-image: url(mCSB_buttons.png);
  background-repeat: no-repeat;
  opacity: .4;
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}
.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0;
}
.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -20px;
}
.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -40px;
}
.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -56px;
}
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover,
.mCSB_scrollTools .mCSB_buttonUp:hover {
  opacity: .75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active,
.mCSB_scrollTools .mCSB_buttonUp:active {
  opacity: .9;
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.85);
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.9);
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}
.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}
.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}
.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px 0;
}
.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -20px;
}
.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -40px;
}
.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -56px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px 0;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -20px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -40px;
}
.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -56px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,
.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px 0;
}
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 6px;
  margin: 5px auto;
}
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px 0;
}
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -20px;
}
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -40px;
}
.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -56px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px 0;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -20px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -40px;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -56px;
}
.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 2px;
}
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
}
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 2px;
  margin: 7px auto;
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}
.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}
.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded.mCSB_scrollTools .mCSB_dragger {
  height: 14px;
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 14px;
  margin: 0 1px;
}
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 14px;
}
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 14px;
  margin: 1px 0;
}
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 16px;
  height: 16px;
  margin: -1px 0;
}
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 4px;
}
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 16px;
  width: 16px;
  margin: 0 -1px;
}
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 -72px;
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -92px;
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -112px;
}
.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -128px;
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px -72px;
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -92px;
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -112px;
}
.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -128px;
}
.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail {
  width: 4px;
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  background-color: transparent;
  background-position: center;
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  opacity: .3;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
  background-repeat: repeat-x;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px -72px;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -92px;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -112px;
}
.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -128px;
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=);
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px -72px;
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -92px;
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -112px;
}
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -128px;
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-y;
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
}
.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,
.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 70px;
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 70px;
}
.mCS-3d-dark.mCSB_scrollTools,
.mCS-3d.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  width: 8px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2);
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555;
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 8px;
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 8px;
  margin: 4px 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 8px;
  margin: 4px auto;
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}
.mCS-3d.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1);
}
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}
.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}
.mCS-3d-thick-dark.mCSB_scrollTools,
.mCS-3d-thick.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}
.mCS-3d-thick-dark.mCSB_scrollTools,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,
.mCS-3d-thick.mCSB_scrollTools,
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical,
.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical {
  right: 1px;
}
.mCS-3d-thick-dark.mCSB_scrollTools_vertical,
.mCS-3d-thick.mCSB_scrollTools_vertical {
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,
.mCS-3d-thick.mCSB_scrollTools_horizontal {
  bottom: 1px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
  width: 12px;
  margin: 2px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  height: 12px;
  width: auto;
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555;
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}
.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}
.mCS-3d-thick-dark.mCSB_scrollTools {
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2);
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2);
}
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #777;
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}
.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical,
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  right: 0;
  margin: 12px 0;
}
.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: 0;
  margin: 0 12px;
}
.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical,
.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  left: 0;
  right: auto;
}
.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,
.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 50px;
}
.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 50px;
}
.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  filter: "alpha(opacity=20)";
  -ms-filter: "alpha(opacity=20)";
}
.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  filter: "alpha(opacity=20)";
  -ms-filter: "alpha(opacity=20)";
}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
}
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail {
  width: 6px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
}
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 6px;
  margin: 5px 0;
}
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 12px;
}
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 12px;
  margin: 2px 0;
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}
.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}
.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset.mCSB_scrollTools .mCSB_draggerRail {
  width: 12px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  margin: 3px 5px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 6px;
  margin: 5px 3px;
  position: absolute;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 12px;
  margin: 2px 0;
}
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
  border-color: #000;
  border-color: rgba(0, 0, 0, 0.2);
}
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
}
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
}
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}
/* IE 67 hack 哪天不兼容IE67的时候删除这段样式 */
.ie-update {
  background: #FCF8E3;
  border: 2px solid #FBEED5;
  padding: 2px;
  text-align: center;
  font-size: 14px;
}
input,
textarea {
  _width: auto;
}
ul.inline li,
ol.inline li {
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  _padding-left: 5px;
  _padding-right: 5px;
}
.ui-breadcrumb .active {
  _background-color: none;
}
.ui-form-search .search-query {
  _padding: 3px;
}
.ui-menu-bd {
  zoom: 1;
  padding: 0;
}
.ui-menu-bd a:hover {
  _color: #fff;
  _overflow: hidden;
}
.ui-menu-ext a:hover {
  _color: #fff;
}
.ui-tab-nav-tips li a {
  _margin-top: 3px;
}
.ui-tab-nav .active {
  *background-color: transparent;
}
.ui-tooltip-arrow {
  _border-style: dashed;
}
.ui-footer {
  _zoom: 1;
}
.ui-footer .ui-foter-link {
  _zoom: 1;
}
.category-title a,
.category-title a:hover {
  _color: #fff;
}
/*服务商列表挂件评分弹框*/
.extend-pop {
  border: 1px solid #e7e7e7;
  padding: 7px 7px 7px 20px;
  background: #f7f7f7;
  width: 230px;
  color: #999;
}
.extend-pop table {
  width: 100%;
}
.extend-pop table tbody {
  margin-top: 5px;
  text-align: left;
}
.extend-pop table th {
  font-weight: normal;
  text-align: left;
  line-height: 27px;
}
.extend-pop table td {
  padding: 0;
  line-height: 22px;
}
.extend-pop table i {
  margin-right: 3px;
}
.extend-pop table i.high {
  color: #c40100;
}
.extend-pop table i.low {
  color: #008300;
}
.extend-pop table i.lev {
  background-color: #c40100;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  width: 8px;
  height: 2px;
  position: relative;
  top: -4px;
}
.naver .nv li a {
  padding-right: 0px;
}
.naver .nv li {
  padding-right: 35px;
}
.qr-code-wrap {
  display: none;
}
/**导航条***/
.ui-tangle {
  position: absolute;
  width: 1px;
  height: 2px;
  border: 4px solid transparent;
  border-top: 4px solid #666;
  top: 7px;
  right: 4px;
}
.ui-menu .main-wrap {
  border-bottom: 0;
}
.ui-menu .new-menu-bd-channel .drop-item {
  min-width: 94px;
  position: relative;
}
.ui-menu .new-menu-bd-channel .drop-item .ui-tangle {
  top: 18px;
  right: 10px;
}
.ui-menu .new-menu-bd-channel .drop-item .ui-tangle.up {
  border-top: 4px solid transparent;
  border-bottom: 4px solid #fff700;
  display: none;
  top: 12px;
}
.ui-menu .new-menu-bd-channel .drop-item .ui-tangle.down {
  border-top-color: #fff;
}
.ui-menu .new-menu-bd-channel .drop-item .ui-sub-memu {
  position: absolute;
  top: 34px;
  left: 0;
  padding: 0;
  margin: 0;
  display: none;
  padding-top: 6px;
  width: 100%;
}
.ui-menu .new-menu-bd-channel .drop-item .ui-sub-memu a {
  padding: 0 10px 0 20px;
}
.ui-menu .new-menu-bd-channel .drop-item li {
  display: block;
  padding: 0;
  margin: 0;
  background-color: #ffa800;
}
.ui-menu .new-menu-bd-channel .drop-item:hover {
  background-color: #ff7900;
}
.ui-menu .new-menu-bd-channel .drop-item:hover ul {
  display: block;
}
.ui-menu .new-menu-bd-channel .drop-item:hover .ui-tangle.up {
  display: inline;
}
.ui-menu .new-menu-bd-channel .drop-item:hover .ui-tangle.down {
  display: none;
}
.ui-menu .new-menu-bd-channel > li {
  height: 40px;
  padding: 0 10px;
  float: left;
}
.ui-menu .new-menu-bd-channel > li a {
  padding: 0 20px 0 10px;
}
.ui-menu .new-menu-bd-channel li:hover,
.ui-menu .new-menu-bd-channel li.cur {
  background-color: #ff7900;
}
/*bugfix*/
.fws-quota .ui-pop-footer {
  display: none;
}
.poptip-quota .quota-togitem.togitem-bycount {
  display: none;
}
/***隐藏百度推广***/
.asset-a-d iframe {
  display: none;
}
/***隐藏百度推广***/
.asset-a-d iframe {
  display: none;
}
/***********自定义滚动条重写**********/
.mCustomScrollbar .mCustomScrollBox .mCSB_container {
  margin-right: 0;
}
.mCustomScrollbar .mCustomScrollBox .mCSB_scrollTools .mCSB_draggerContainer .mCSB_dragger .mCSB_dragger_bar {
  background-color: #e5e5e5;
  background-color: rgba(229, 229, 229, 0.75);
}
.mCustomScrollbar .mCustomScrollBox .mCSB_scrollTools .mCSB_draggerContainer .mCSB_draggerRail {
  background-color: #e5e5e5;
  background-color: rgba(229, 229, 229, 0.8);
  width: 2px;
}
.ui-ico-cs-h {
  background: #f60 none repeat scroll 0 0;
  color: #fff;
  font-style: normal;
  height: 25px;
  line-height: 25px;
  text-align: center;
  width: 136px;
  font-family: "microsoft yahei";
}
.witkey-adv {
  position: relative;
}
.witkey-adv .bz,
.witkey-adv .wk {
  position: absolute;
  width: 95px;
  height: 194px;
  top: 41px;
}
.witkey-adv .bz {
  left: 8px;
}
.witkey-adv .wk {
  right: 11px;
}
.ui-tools-app .ui-poptipnoc {
  display: none;
}