﻿
/* -----------H-ui前端框架-----------------------
H-ui.css v1.5.7
date: 2014-12-18
Created & Modified by guojunhui.
基于Bootstrap框架的改进扩展，比Bootstrap更懂中国。
完全免费，简单灵活，兼容性，满足大多数中国网站。
不断完善中，诚邀更多前端开发者加入，开发更多优秀的代码，服务于更多的中国网站。
H-ui CSS file for H-ui
Copyright H-ui&Twitter Inc.
by @twitter by @mdo and @fat，由Tvlike.me/TV来客开发者翻译
开源依照 Apache License v2.0 发布。 文档依照 CC BY 3.0 发布。
Icons取自 Glyphicons Free，授权依照 CC BY 3.0。
http://www.H-ui.net		http://www.apache.org/licenses/LICENSE-2.0		http://www.cnbootstrap.com
----------------------------------------------*/
/*------------------------------------
结构目录：
  1. css reset重定义浏览器默认样式
  2. 框架
    2.1 栅格系统
    2.2 流动栅格系统
    2.3 布局
    2.4 响应式设计
  3. 基础CSS
    3.1 排版
      3.1.1  标题
      3.1.2  强调
      3.1.3  对齐
      3.1.4  定位
      3.1.5  浮动
	  3.1.6 文字单行溢出省略号
	  3.1.7 线条
      3.1.8  外边距
      3.1.9  内填充
      3.1.10 边框，css3圆角
      3.1.11 css3阴影
      3.1.12 行内分割竖线
      3.1.13 文字尺寸
      3.1.14 文字行距
      3.1.15 文字颜色
      3.1.16 文字颜色强调
      3.1.17 缩略语
      3.1.18 地址
      3.1.19 引用
      3.1.20 上标 下标
      3.1.21 内容样式
      3.1.22 列表
      3.1.23 描述
	  3.1.24 隐藏 显示
    3.2 代码
    3.3 表格
    3.4 表单
    3.5 按钮
    3.6 图片
    3.7 图标
	3.8 效果
  4. 组件
    4.1 按钮组
    4.2 导航
      4.2.1 导航条
      4.2.2 面包屑导航
      4.2.3 翻页导航
	  4.2.4 顶部导航
	  4.2.5 向导
	  4.2.6 竖向导向tab导航
	  4.2.7 横向tab
    4.3 下拉菜单
    4.4 幻灯片
    4.5 选项卡
    4.6 便签与标号
    4.7 缩略图
    4.8 警告
    4.9 进度条 loading
    4.10 对话框 弹出层
    4.11 客服
    4.12 返回顶部
    4.13 分享
    4.14 媒体插入
    4.15 案例
    4.16 滚动
    4.17 搜索
    4.18 广告
    4.19 标签
	  4.19.1 标签输入效果
	  4.19.2 标签混排效果
	  4.19.3 tag云标签
    4.20 折叠
    4.21 遮罩条
    4.22 评论列表
  5. 页面
	5.1 博客列表页
	5.2 博客详情页
	5.3 关于我们页
	5.4 帮助列表页
	5.5 帮助详情页
	5.6 错误页
----------------------------------
CSS写作注意事项：
  1. 页面编码规范
    1.1. 统一使用 UTF-8 编码,用指定页面编码。
    1.2. 新宋体，宋体，微软雅黑，Arial首选，避免使用个性化字体。
    1.3. 中文字体使用编码转换，请参阅下节“中文字体css编码转换”
    1.4. 推荐使用216web安全色
  2. 属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间应减少空格，去掉最后一个“;”，例如：.class{width:200px;height:100px}
  3. 属性的书写顺序：
    3.1. 按照元素模型由外及内，由整体到细节书写，大致分为五组：
      位置：position,left,right,float
      盒模型属性：display,margin,padding,width,height
      边框与背景：border,background
      段落与文本：line-height,text-indent,font,color,text-decoration,...
      其他属性：overflow,cursor,visibility,...
    3.2. 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;
  4. 带有前缀的属性，单独一行，通过缩进，让每个属性的值垂直对齐，方便编辑维护。
  5. 谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
  6. 选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix
  7. 避免使用各种 CSS Hack，如需对 IE 进行特殊定义，请参阅下节“关于 CSS Hack 的说明”
  8. 勿使用冗余低效的 CSS 写法，例如：ul li a span{... }
  9. 慎用 !important
  10. 建议使用具有语义化的classname或id，请参阅下节“css 命名规范及对应的缩写”
  11.避免使用兼容性不好的使用滤镜 
  12.开发过程中的未定事项，须用 [!] 标出，以便于后续讨论整理。
  13.注释格式，统一使用双斜杠加*。
  14.上下模块之间的间距统一使用下一个模块的margin-top来实现，好处是：如果没有下一个模块也不会多出一段空隙。
  15.hover，selected，disabled，current等具有特定意义的请勿直接占用。
  16.:link :visited :hover :active书写顺序 L-V-H-A，速记：LoVe（喜欢）HAte（讨厌）。
  17.不要使用 @import
----------------------------------
中文字体css编码转换
  微软雅黑   \5FAE\8F6F\96C5\9ED1  或 Microsoft YaHei
  黑体       \9ED1\4F53
  新宋体     \65b0\5b8b\4f53
  宋体       \5b8b\4f53
----------------------------------
关于 CSS Hack 的说明：
  1. _          IE6
  2. *          IE6/7
  3. !important IE7/Firefox
  4. *+         IE7
  5. \9         IE6/7/8
  6. \0         IE8
  7. 条件hack
      <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本
      <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7
      <!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8
      <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上
----------------------------------
css 命名规范
  1. 内容优先,表现为辅
  2. css命名中英文对照
  current 当前     hover 悬停      selected 挑选     disabled 禁用     focus 得到焦点     blur 失去焦点    checked 勾选     success 成功   error 出错
  header(hd) 头部  content(cnt) 内容    title(tit) 标题    item 项目（条）   cell 单元    image/pic(img) 图片    text(txt) 文字    
  top 顶部         header 头       scrubber 时序菜单
  nav 导航        mainbav 主导航    subnav 子导航         topnav 顶部导航     breadcrumb 面包屑导航
  flink 友情链接    footer 尾       copyright 版权
  menu 菜单        submenu 子菜单
  searchBar 搜索条 search 搜索条   searchTxt 搜索框      searchBtn 搜索按钮    search_key 搜索词
  ucenter 用户中心 loginBar 登陆条 login 登录            loginBtn 登录按钮     regsiter 注册按钮   regsiterBtn 注册按钮
  name 用户名      password 密码   nickname 昵称         mobilephone 手机      telephone 电话		defaultavatar 默认头像
  hot 热点         news 新闻       banner/AD 广告        download 下载
  content 内容     title 标题      summary 摘要          time 时间
  share 分享       digg 顶         like 喜欢
  list 列表        pList 图片列表  tList 文字列表        tpList 图文列表
  table 表格       row 行         column 列            gutter 间隔           viewport 视口
  tab 标签         tags 标签       scroll 滚动 
  sidebar 侧边栏   column 栏目     section 区块          msg 提示信息          status 状态
  vote 投票        tips 小技巧     guild 指南            note 注释
  icon- 图标       btn- 按钮
  goods 商品       goodsList 商品列表        goodsDetail 商品详情     goodsInfo 商品信息
  tuan 团购        tuanList 团购列表         tuanDetail  团购详情     tuanInfo 团购信息 
  transition 动画	shadow 阴影				fade 淡入淡出				flip 翻页效		slide 滑动	slideup 上滑动	slidedown 下滑动	turn 翻页
  horizontal 水平	vertical 垂直			collapsible 折叠		corners 拐角			flow 流		reverse 反向		pop 弹窗
  count 总数 计数		plus 加号 正				minus 减号 负		controlgroup 控制组		
----------------------------------
html命名规范：
  default/index.html    首页
  list.html             列表页
  show.html             展示页
  404.html              404错误页
  print.html            打印页
  footer.html           页脚
  sitemap.html          网站地图
  tag.html              tag列表
  rank.html             排行榜首页
  roll.html             滚动新闻  
  solution.html         解决方案
  joinus.html           加入我们
  partner.html          合作伙伴
  service.html          服务
  newslist.html         新闻列表
  aboutus.html          关于我们
  contact.html          联系我们
  brand.html            品牌
  brandlist             品牌列表
  news.html             新闻页
  company.html          公司介绍
  organization.html     组织结构
  culture.html          企业文化
  strategy.html         发展策略
  honor.html            公司荣誉
  aptitudes.html        企业资质
  events.html           大事记
  passport.html         通行证
  business.html         商务合作
  contract.html         服务条款
  privacy.html          隐私声明
  CSR.html              企业社会责任
---------------------------------- */
/*1 重定义浏览器默认样式
	Name:			style_reset
	Explain:		重定义浏览器默认样式
*/
*{word-wrap:break-word}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}
ul,ol,dl{list-style-type:none}
html,body{*position:static;height:100%}
html{font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button{overflow: visible;vertical-align:middle;outline:none}
body,th,td,button,input,select,textarea{font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";font-size:12px;color: #333;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased}
input,select,textarea{color:#555;background-color:#fff; border:solid 1px #ddd;}
body{ width:100%;line-height:1.6}
h1,h2,h3,h4,h5,h6{font-size:100%}
a,area{outline:none;blr:expression(this.onFocus=this.blur())}
a{text-decoration:none;cursor: pointer}
a:hover{text-decoration:underline;outline:none}
a.ie6:hover{zoom:1}
a:focus{outline:none}
a:hover,a:active{outline:none}:focus{outline:none}
sub,sup{vertical-align:baseline}
/*img*/
img{border:0;vertical-align:middle}
a img,img{-ms-interpolation-mode:bicubic}
.img-responsive{max-width: 100%;height: auto}

/*IE下a:hover 背景闪烁*/
*html{overflow:-moz-scrollbars-vertical;zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))}

/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend{display:block;margin:0;padding:0}time{display:inline}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5}
legend small{font-size:15px;color:#999}
svg:not(:root) {overflow: hidden}
fieldset {border-width:0;padding: 0.35em 0.625em 0.75em;margin: 0 2px;border: 1px solid #c0c0c0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto}
input[type="search"] {-webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}

/*清楚浮动
	Name:			style_clearfix
	Example:		class="clearfix|cl"
	Explain:		clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}

/*2.1 栅格系统
	Name:			style_span
	Example:		
	Explain:		栅格系统
*/
/*2.1.1 两列布局*/
/*2.1.2 三列布局*/
/*2.1.1 五列布局*/
/*2.1.1 980 20 column*/
.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}.row{zoom:1}
[class^="span-"],[class*=" span-"] {float:left; margin-top:20px}
.row-980-20 [class^="span-"],.row-980-20 [class*=" span-"]{margin-right:20px}
.row-980-20{margin-right:-20px}
.row-980-20 .span-1 {width:30px}
.row-980-20 .span-2 {width:80px}
.row-980-20 .span-3 {width:130px}
.row-980-20 .span-4 {width:180px}
.row-980-20 .span-5 {width:230px}
.row-980-20 .span-6 {width:280px}
.row-980-20 .span-7 {width:330px}
.row-980-20 .span-8 {width:380px}
.row-980-20 .span-9 {width:430px}
.row-980-20 .span-10{width:480px}
.row-980-20 .span-11{width:530px}
.row-980-20 .span-12{width:580px}
.row-980-20 .span-13{width:630px}
.row-980-20 .span-14{width:680px}
.row-980-20 .span-15{width:730px}
.row-980-20 .span-16{width:780px}
.row-980-20 .span-17{width:830px}
.row-980-20 .span-18{width:880px}
.row-980-20 .span-19{width:930px}
.row-980-20 .span-20{width:980px}

/*2.2 CSS3流动栅格系统
	Name:			style_col
*/
[class^="col-"],[class*=" col-"]{box-sizing:border-box}
.col-sm-1{width:8.33333%}
.col-sm-2{width:16.66667%}
.col-sm-3{width:25%}
.col-sm-4{width:33.33333%}
.col-sm-5{width:41.66667%}
.col-sm-6{width:50%}
.col-sm-7{width:58.33333%}
.col-sm-8{width:66.66667%}
.col-sm-9{width:75%}
.col-sm-10{width:83.33333%}
.col-sm-11{width:91.66667%}
.col-sm-12{width:100%}
.col-sm-offset-0{margin-left:0}
.col-sm-offset-1{margin-left:8.33333%}
.col-sm-offset-2{margin-left:16.66667%}
.col-sm-offset-3{margin-left:25%}
.col-sm-offset-4{margin-left:33.33333%}
.col-sm-offset-5{margin-left:41.66667%}
.col-sm-offset-6{margin-left:50%}
.col-sm-offset-7{margin-left:58.33333%}
.col-sm-offset-8{margin-left:66.66667%}
.col-sm-offset-9{margin-left:75%}
.col-sm-offset-10{margin-left:83.33333%}
.col-sm-offset-11{margin-left:91.66667%}
.col-sm-push-0{position:relative;left:0;right:auto}
.col-sm-pull-0{right:0;left:auto}
.col-sm-push-1{left:8.33333%;right:auto}
.col-sm-pull-1{right:8.33333%;left:auto}
.col-sm-push-2{left:16.66667%;right:auto}
.col-sm-pull-2{right:16.66667%;left:auto}
.col-sm-push-3{left:25%;right:auto}
.col-sm-pull-3{right:25%;left:auto}
.col-sm-push-4{left:33.33333%;right:auto}
.col-sm-pull-4{right:33.33333%;left:auto}
.col-sm-push-5{left:41.66667%;right:auto}
.col-sm-pull-5{right:41.66667%;left:auto}
.col-sm-push-6{left:50%;right:auto}
.col-sm-pull-6{right:50%;left:auto}
.col-sm-push-7{left:58.33333%;right:auto}
.col-sm-pull-7{right:58.33333%;left:auto}
.col-sm-push-8{left:66.66667%;right:auto}
.col-sm-pull-8{right:66.66667%;left:auto}
.col-sm-push-9{left:75%;right:auto}
.col-sm-pull-9{right:75%;left:auto}
.col-sm-push-10{left:83.33333%;right:auto}
.col-sm-pull-10{right:83.33333%;left:auto}
.col-sm-push-11{left:91.66667%;right:auto}
.col-sm-pull-11{right:91.66667%;left:auto}
/*局部模块平分*/
.col-1-1{}
.col-2-1{}
.col-3-1{}
.col-3-2{}
.col-4-1{}
.col-4-2{}
.col-4-3{}
.col-5-1{}
.col-5-2{}
.col-5-3{}
.col-5-4{}
.col-6-1{}
.col-6-2{}
.col-6-3{}
.col-6-4{}
.col-6-5{}

/*2.3 布局(固定)
	Name:			style_Layout
	Explain:		左右两栏|左中右三栏|上中下
	Last Modify:	guojunhui
*/
.container,.wp{margin-left:auto; margin-right:auto;text-align:left}
.wp{width:1000px}
.minWP{}
.sd{float:right}
.ct2 .mn{float:left}
.ct2 .sd{float:right}
.ct2_r .leftmenu{float:left}
.ct2_r .mn{float:right}
.ct3 .app{float:left;margin-right:20px}
.ct3 .mn{float:left;border-left:solid 1px #ddd}
.ct3 .sd{float:right}
.w-1000{width:1000px}
.w-980{width:980px}
.w-300{width:300px}
.w-200{width:200px}

/*2.4 响应式设计
	Name:			style_span
	Example:		
	Explain:		
*/

/*3.1 排版*/
/*3.1.1 标题
	Example：
	<h1>h1. 大标题<small>小标题</small></h1>
    <h2>h2. 大标题<small>小标题</small></h2>
    <h3>h3. 大标题<small>小标题</small></h3>
    <h4>h4. 大标题<small>小标题</small></h4>
    <h5>h5. 大标题<small>小标题</small></h5>
    <h6>h6. 大标题<small>小标题</small></h6>
*/
h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;color:inherit}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{font-weight:normal;line-height:1;color:#999}
h1,h2,h3{margin-top:20px;margin-bottom:10px}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small{font-size:65%}
h4,h5,h6{margin-top:10px;margin-bottom:10px}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small{font-size:75%}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:18px}
h5{font-size:14px}
h6{font-size:12px}
/*3.1.2 强调
	Example:
	<p>这是段落，向下10像素间距</p>
	<smail>小型文本，是父容器字体大小的85%</smail>
	<strong>重要文本，加粗显示</strong>
	<em>被强调的文本，斜体显示</em>
	<u>带下划线的文本</u>
	<cite>引用</cite>
	<mark>突出显示文本</mark>
	<del>带删除线的文本</del>
	<pre>预格式化的文本</pre>
*/
p{margin-bottom:10px}	/*段落*/
small{font-size:85%}	/*小型文本*/
b,strong {font-weight: bold}	/*重要的文本，加粗*/
em{font-style:italic}	/*被强调的文本*/
i{}	/*斜体*/
u{}	/*加下划线*/
cite{font-style:normal}	/*引用*/
mark{color:#000;background:#ff0}/*突出显示文本*/
var{}	/*变量*/
kbd{}	/*键盘文本*/
code{}	/*计算机代码文本*/
dfn{font-style: italic}	/*一个定义项目*/
del{font-family:Simsun}	/*删除线*/
code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em}
pre{white-space: pre-wrap}	/*预格式化的文本*/
.uppercase{text-transform:uppercase} /*文字大写*/
.lowercase{text-transform:lowercase} /*文字小写*/
.capitalize{text-transform:capitalize} /*首字母大写*/
.en{font-family:Arial!important}
/*3.1.3 对齐
	Name:			style_text-align
	Example:		class="ftext-l/text-r/text-c"
	Explain:		.text-水平对齐 （.text-l左对齐/.text-r右对齐/.text-c居中对齐）
					.va-上下对齐 （.va-t 居上对齐 .va-m 居中对齐 .va-b 居下对齐）
*/
.text-l{text-align:left}.text-r{text-align:right}.text-c{text-align:center}
.va-t{vertical-align:top!important}.va-m{vertical-align:middle!important}.va-b{vertical-align:bottom!important}
/*3.1.4 定位
	Name:			style_position
	Example:		class="pos-r/pos-a/pos-f"
	Explain:		.pos-r 相对定位/.pos-a 绝对定位/.pos-f 固定
*/
.pos-r{position:relative}.pos-a{position:absolute}.pos-f{position:fixed}
/*3.1.5 浮动
	Name:			style_float
	Example:		class="l/r"
	Explain:		.l 左浮动/.r 右浮动
*/
.l{float:left!important;_display:inline}.r{float:right!important;_display:inline}
[class*="span"].r,.row-fluid [class*="span"].r{float:right}
/*3.1.6 文字单行溢出省略号
	Name:			style_text-overflow
	Example:		class="text-overflow"
*/
.text-overflow{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
/*3.1.7 线条
	Name:			style_line
	Example:		class="line"
*/
.line{font-size: 0px; line-height: 0px; border-top: solid 0px #ddd; float: none}
/*3.1.8 外边距
	Name:			style_margin
	Example:		class="mt-5/mt-10/..."
	Explain:		.mt表示上边距/.mb表示下边距/.ml表示左边距/.mr表示右边距
*/
.mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-35{margin-top:35px}.mt-40{margin-top:40px}.mt-50{margin-top:50px}
.mb-5{margin-bottom:5px}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}.mb-40{margin-bottom:40px}
.ml-5{margin-left:5px}.ml-10{margin-left:10px}.ml-15{margin-left:15px}.ml-20{margin-left:20px}.ml-30{margin-left:30px}.ml-40{margin-left:40px}
.mr-5{margin-right:5px}.mr-10{margin-right:10px}.mr-15{margin-right:15px}.mr-20{margin-right:20px}.mr-30{margin-right:30px}.mr-40{margin-right:40px}
/*3.1.9 内填充
	Name:			style_padding
	Example:		class="pt-5/pt-10/……"
	Explain:		.pt表示上填充/.pb表示下填充/.pl表示左填充/.pr表示右填充
*/
.pt-5{padding-top:5px}.pt-10{padding-top:10px}.pt-20{padding-top:20px}
.pb-5{padding-bottom:5px}.pb-10{padding-bottom:10px}.pb-20{padding-bottom:20px}
.pl-5{padding-left:5px}.pl-10{padding-left:10px}.pl-20{padding-left:20px}
.pr-5{padding-right:5px}.pr-10{padding-right:10px}.pr-20{padding-right:20px}
.pd-5{padding:5px}.pd-10{padding:10px}.pd-15{padding:15px}.pd-20{padding:20px}.pd-30{padding:30px}.pd-40{padding:40px}
/*3.1.10 边框，css3圆角
	Name:			style-border
	Example:		class="bk_gray radius"
	Explain:		.bk_gray 边框/bk_gray radius圆角边框
*/
.bk-gray{border:solid 1px #ddd}
.radius{border-radius:4px}
/*3.1.11 css3阴影
	Name:			style_shadow
	Example:		class="box_shadow"
	Explain:		css3阴影，IE下显示1像素边框
*/
.box-shadow{background-color:#fff;border:solid 1px #ddd\9;box-shadow:1px 1px 2px 2px #ddd;behavior: url("/appgdyinpingcom/u/res/ui/css/"/appgdyinpingcom/u/res/ui/css/ie-css3.htc"")}
.text-shadow{text-shadow:1px 1px 2px 2px #ddd;-webkit-text-shadow:1px 1px 2px 2px #ddd;-moz-text-shadow:1px 1px 2px 2px #ddd;behavior: url("/appgdyinpingcom/u/res/ui/css/"/appgdyinpingcom/u/res/ui/css/ie-css3.htc"")}
/*3.1.12 行内分割竖线
	Name:			style_pipe
	Example:		<span class="pipe">|</span>
*/
.pipe{margin:0 5px;color:#CCC;font-size:10px!important}
/*3.1.13 文字尺寸
	Name:			style_font-size
	Example:		class="f12/f14/f16/f18/f20"
	Explain:		12px字体/14px字体/16px字体/18px字体/20px字体
*/
.f-12{font-size:12px}.f-14{font-size:14px}.f-16{font-size:16px}.f-18{font-size:18px}.f-20{font-size:20px}.f-24{font-size:24px}.f-30{font-size:30px}
/*3.1.14 文字行距
	Name:			mod_line-height
	Example:		class="l16/l18/l20/l22/l24/l26/l28/l30"
	Explain:		16px行高、18px行高、20px行高、22px行高、24px行高、26px行高、30px行高
*/
.l16{line-height:16px}.l18{line-height:18px}.l20{line-height:20px}.l22{line-height:22px}.l24{line-height:24px}.l26{line-height:26px}.l28{line-height:28px}.l30{line-height:30px}
/*3.1.15 文字颜色
	Name:			style_color
	Example:		class="c-red|c-green|c-blue|c-white|c-black|c-gray|c-999|c-orange"
	Explain:		红色|绿色|蓝色|白色|黑色|灰色|浅灰色|橙色
*/
.c-red,.c-red a,a.c-red{color:red}
.c-red a:hover,a.c-red:hover{}

.c-green,.c-green a,a.c-green{color:green}
.c-red a:hover,a.c-red:hover{}

.c-blue,.c-blue a,a.c-blue{color:blue}
.c-blue a:hover,a.c-blue:hover{}

.c-white,.c-white a,a.c-white{color:white}
.c-white a:hover,a.c-white:hover{}

.c-black,.c-black a{color:black}
.c-black a:hover,a.c-black:hover{}

.c-gray,.c-gray a,a.c-gray{color:gray}
.c-gray a:hover,a.c-gray:hover{}

.c-666,.c-666 a,a.c-666{color:#666}
.c-666 a:hover,a.c-666:hover{}

.c-999,.c-999 a,a.c-999{color:#999}
.c-999 a:hover,a.c-999:hover{}

.c-orange,.c-orange a,a.c-orange{color:orange}
.c-orange a:hover,a.c-orange:hover{}

/*3.1.16 文字颜色强调
	Example:		class="text-muted/text-primary/text-warning/text-error/text-danger/text-success/text-info"
	Explain:		柔和/重要/警告/错误/危险/成功/信息
*/
.text-muted{color:#999}a.text-muted:hover{color:#808080}
.text-primary{color:#428BCA}a.text-primary:hover{color:#247dc9}
.text-warning{color:#f33}a.text-warning:hover{color:#f03}
.text-error{color:#f33}a.text-error:hover{color:#f03}
.text-danger{color:#c00}a.text-danger:hover{color:#900}
.text-success{color:#0c0}a.text-success:hover{color:#093}
.text-info{color:#1faef2}a.text-info:hover{color:#06c}
.text-price{color:#f60}a.text-price:hover{color:#f60}
/*3.1.17 缩略语
	Example:		<abbr title="User Interface" class="initialism">UI</abbr>
	Explain:		
*/
abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}
abbr.initialism{font-size:90%;text-transform:uppercase}
/*3.1.18 地址
	Example:		<address>北京市海淀区上地……</address>
	Explain:		
*/
address{display:block;margin-bottom:20px;font-style:normal;line-height:20px}
/*3.1.19 引用
	Example:		<blockquote>这是引用的内容</blockquote>
	Explain:		
*/
blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}
blockquote p{margin-bottom:0;font-size:17.5px;font-weight:300;line-height:1.25}
blockquote small{display:block;line-height:20px;color:#999}
blockquote small:before{content:'\2014 \00A0'}
blockquote.text-r{padding-right:15px;padding-left:0;border-right:5px solid #eee;border-left:0}
blockquote.text-r p,blockquote.text-r small{text-align:right}
blockquote.text-r small:before{content:''}
blockquote.text-r small:after{content:'\00A0 \2014'}
q:before,q:after,blockquote:before,blockquote:after{content:""}
q {/*短的引用*/quotes: "\201C" "\201D" "\2018" "\2019"}
/*3.1.20 上标，下标
	Example:		<sup>2</sup>	<sub>2<sub>
	Explain:		上标/下标
*/
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-0.5em}sub{bottom:-0.25em}
/*3.1.21 内容样式
	Name:			style_content
	Example:		<div class="content"><p>……</p></div>
	Explain:		内容样式
*/
.content{position:relative;font-size:14px;line-height:1.6;overflow:hidden;text-align:left}
.content h3{margin-top:20px;font-size:16px}
.content p{text-indent:2em;margin-top:20px}
.content img{max-width:100%}
.content ul{text-indent:2em}
/*3.1.22 列表
	Name:			style_ulolli
	Example:		<ul class="tlist"><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul>
					<ol class="linenums"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol>
	Explain:		
*/
ul.unstyled,ol.unstyled{margin-left:0;list-style:none}
ul.inline,ol.inline{margin-left:0;list-style:none}
ul.inline>li,ol.inline>li{display:inline-block;*display:inline;padding-right:5px;padding-left:5px;*zoom:1}
ol.linenums{list-style:decimal outside none;margin:0 0 0 22px;/* IE indents via margin-left */}
.tlist li{line-height:22px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}/*禁止换行*/
	.dot-1{padding-left:10px;background:url("/appgdyinpingcom/u/res/ui/images/dot_1.gif") no-repeat 3px center}/*圆点*/
	.box-1{padding-left:10px;background:url("/appgdyinpingcom/u/res/ui/images/box_1.gif") no-repeat 3px center}/*小方块*/
	.jt-1{padding-left:18px;background:url("/appgdyinpingcom/u/res/ui/images/jt_1.gif") no-repeat 3px center}/*箭头1*/
	.jt-2{padding-left:18px;background:url("/appgdyinpingcom/u/res/ui/images/jt_2.gif") no-repeat 3px center}/*箭头2*/
	.jt-3{padding-left:18px;background:url("/appgdyinpingcom/u/res/ui/images/jt_3.gif") no-repeat 3px center}/*箭头3*/
/*排行榜*/
/*<ol class="top-list"><li class="top"><em>1</em><a href="#">排行榜列表</a><span class="date">12</span></li></ol>*/
.top-list li{height: 20px;line-height: 20px;margin-bottom: 15px;overflow: hidden;padding-left: 30px;position: relative;text-overflow: ellipsis;vertical-align: bottom;white-space: nowrap}
.top-list em {background-color: #F8F8F8;border: 1px solid #EBEBEB;color: #333;height: 18px;left: 0;line-height: 18px;position: absolute;text-align: center;top: 0;width: 20px; font-style:normal}
.top-list .top em{background-color:#390;border:none;color: #fff;height: 20px;line-height: 20px;width: 22px}
.top-list .date {color: #999;font-size: 12px;position: absolute;right: 0;top: 0}
.tlist .time{font-size:12px; font-family:Arial; color:#999}

.listview{}
/*3.1.23 描述
	Name:			style_dldtdd
	Example:		<dl class="dl-horizontal cl"><dt>H-ui</dt><dd>基于Bootstrap框架的改进扩展的前端框架</dd></dl>
	Explain:		.dl-horizontal 水平描述，默认不加为垂直模式。
*/
dl{margin-bottom:20px}
dt,dd{line-height:20px}
dt{font-weight:bold}
dd{margin-left:2em}
.dl-horizontal.cl{}
.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.dl-horizontal dd{margin-left:180px}
/*3.1.24 隐藏 显示
  Name:				style_display
  Example:    <div class="hide">隐藏的内容</div> <div class="show">显示的内容</div>
  Explain:    		.hide 隐藏 / .show 显示
*/
.hide{display:none}[hidden]{display: none}
.hidden{display:none!important;visibility:hidden!important}
.f-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
[class*="span"].hide,.row-fluid [class*="span"].hide{display:none}
.show{display:block}
.invisible{visibility:hidden}
/*3.2 代码
	Name:			style_pre

	Example:		<code></code>,<pre class="prettyprint linenums">转义过的代码</pre>
	Explain:		code：行内代码，pre：基本代码块;包装代码片段，.prettyprint颜色增强/.linenums显示行号
*/
code,pre{padding:0 3px 2px;font-family:Monaco,Menlo,Consolas,"Courier New",monospace}
pre{display:block;padding:9.5px;margin-bottom:10px;font-size:12px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:4px;color:#333}
pre.prettyprint{margin-bottom:20px}
pre .doctype{color:#999}/*文档声明*/
pre .title,pre .keyword,pre .body,pre .des{color:#333}/*关键词*/
pre .pun{color:#9aa}
pre .tag{color:#007}/*标签*/
pre .attr{color:#088}/*属性*/
pre .value,pre .tag .value{color:#d14}/*值*/
pre .comment{color:#998;font-style:italic}/*注释*/
.prettyprint{padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8}
.prettyprint.linenums{box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0}
.pre-scrollable{max-height:340px;overflow-y:scroll}
/* Specify class=linenums on a pre to get line numbering */
pre ol.linenums{list-style:decimal outside none;margin:0 0 0 33px;/* IE indents via margin-left */} 
pre ol.linenums li{padding-left:12px;color:#bbb;line-height:18px;text-shadow:0 1px 0 #fff}
/*3.3 表格
	Name:			style_table
	Example:		<table class="table table-bordered table-striped table-condensed"><thead><tr><th>…</th></tr></thead><tbody><tr><td>…</td></tr></tbody></table>
	Explain:		表格，None无样式，仅仅有列和行/.table行与行之间以水平线相隔/.table-bordered表格外围均有外边框/.table-striped奇数行背景设为浅灰色/.table-condensed竖直方向padding缩减一半，从8px变为4px，所有的 td 和 th 元素都受影响
*/
/*默认table*/
table{width:100%;empty-cells:show;background-color:transparent;border-collapse:collapse;border-spacing:0}
table th{text-align:left; font-weight:normal}
/*带水平线*/
.table th{font-weight:bold}
.table th,.table td{padding:8px;line-height:20px}
.table td{text-align:left}

.table tbody tr.success > td{background-color:#dff0d8}
.table tbody tr.error > td{background-color:#f2dede}
.table tbody tr.warning > td{background-color:#fcf8e3}
.table tbody tr.info > td{background-color:#d9edf7}
.table tbody + tbody{border-top:2px solid #ddd}
.table .table{background-color:#fff}

/*带横向分割线*/
.table-border{border-top:1px solid #ddd}
.table-border th,.table-border td{border-bottom:1px solid #ddd}

/*th带背景*/
.table-bg thead th{background-color:#F5FAFE}
/*带外边框*/
.table-bordered{
	border:1px solid #ddd;

border-collapse:separate;*border-collapse:collapse;border-left:0}
.table-bordered th,.table-bordered td{
	border-left:1px solid #ddd
	}
.table-border.table-bordered{border-bottom:0}

/*奇数行背景设为浅灰色*/
.table-striped tbody > tr:nth-child(odd) > td,.table-striped tbody > tr:nth-child(odd) > th{background-color:#f9f9f9}
/*竖直方向padding缩减一半*/
.table-condensed th,.table-condensed td{padding:4px 5px}
/*鼠标悬停样式*/
.table-hover tbody tr:hover td,.table-hover tbody tr:hover th{background-color: #f5f5f5}
/*定义颜色*/
/*悬停在行*/
.table tbody tr.active,.table tbody tr.active>td,.table tbody tr.active>th,.table tbody tr .active{background-color:#F5F5F5!important}
/*成功或积极*/
.table tbody tr.success,.table tbody tr.success>td,.table tbody tr.success>th,.table tbody tr .success{background-color:#DFF0D8!important}

/*警告或出错*/
.table tbody tr.warning,.table tbody tr.warning>td,.table tbody tr.warning>th,.table tbody tr .warning{background-color:#FCF8E3!important}
/*危险*/
.table tbody tr.danger,.table tbody tr.danger>td,.table tbody tr.danger>th,.table tbody tr .danger{background-color:#F2DEDE!important}

/*表格文字对齐方式，默认是居左对齐*/
.table .text-c th,.table .text-c td{text-align:center}/*整行居中*/
#td_left{text-align:left;word-break: break-all;}
.table .text-r th,.table .text-r td{text-align:right}/*整行居右*/
.table th.text-l,.table td.text-l{text-align:left!important}/*单独列居左*/
.table th.text-c,.table td.text-c{text-align:center!important}/*单独列居中*/
.table th.text-r,.table td.text-r{text-align:right!important}/*单独列居右*/

/*datatable*/
table.dataTable {border-collapse: separate;border-spacing: 0;clear: both;}
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting {cursor: pointer; background-repeat:no-repeat;background-position:right center}
table.dataTable thead .sorting{background-image:url("/appgdyinpingcom/u/res/ui/images/sort_both.png")}
table.dataTable thead .sorting_asc {background-image:url("/appgdyinpingcom/u/res/ui/images/sort_asc.png")}
table.dataTable thead .sorting_desc {background-image:url("/appgdyinpingcom/u/res/ui/images/sort_desc.png")}
.dataTables_wrapper .dataTables_length {float: left}
.dataTables_wrapper .dataTables_filter {float: right;text-align: right;}
.dataTables_wrapper .dataTables_info {clear: both;float: left;padding-top:10px}
.dataTables_wrapper .dataTables_paginate {float: right;padding-top:10px;text-align: right}
.dataTable td.sorting_1 {background-color: #f5fafe}

/*让表格支持响应式*/
/*
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
*/
@media (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid #dddddd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch}
  .table-responsive > .table {
    margin-bottom: 0}
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap}
  .table-responsive > .table-bordered {
    border: 0}
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0}
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0}
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0}
}

/*3.4 表单
	Name:			style_form

	Example:		
	Explain:		

*/
.checkbox{display:block; float:left;margin-top:4px;*margin-top:0px}
.checkLabel{display:block; float:left; padding-left:3px; padding-right:10px}

.Huiform legend{font-size:20px}/*表单名称*/
	.formRow{margin-top:20px}/*表单行*/
	.formRow:before,.formRow:after{content:" ";display:table}.uk-form-row:after{clear:both}/*解决表单行内部浮动bug*/
		.form-label{display:block; color:#555}/*表单标题*/
		.formControls{position:relative}/*表单控制区*/
			.placeholder{position:absolute; left:4px; top:4px;color:#c6c6c6; cursor:text}/*表单默认值*/	
/*表单统一字体*/
label,.placeholder,.input-text,.textarea{font-size:14px}
.Huiform-horizontal .form-label{float:left; width:84px; margin-top:10px;cursor:text}
.Huiform-horizontal input,.Huiform-horizontal textarea,.Huiform-horizontal select{display:inline-block;*display:inline;margin-bottom:0;vertical-align:middle;*zoom:1}
.Huiform-horizontal .formControls{margin-left:94px}
.formControls span{vertical-align:middle}

/*设置placeholder颜色*/
::-webkit-input-placeholder {color:#b3b3b3}/* WebKit browsers */
:-moz-placeholder {color:#b3b3b3}/* Mozilla Firefox 4 to 18 */
::-moz-placeholder {color:#b3b3b3}/* Mozilla Firefox 19+ */
:-ms-input-placeholder {color:#b3b3b3}/* Internet Explorer 10+ */
.placeholder{color:#adb0be; position:absolute; z-index:9}/*不兼容placeholder属性的浏览器，可使用<span class="placeholder">表单默认值</span>*/

/*默认表单状态*/
.input-text,.textarea{border:solid 1px #ddd;padding:4px;line-height:20px;width:200px;
            box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition:all 0.2s linear 0s;
       -moz-transition:all 0.2s linear 0s;
         -o-transition:all 0.2s linear 0s;
            transition:all 0.2s linear 0s}
.textarea{height:100px}/*默认高度，自己可以设置*/
.input-text:hover,.textarea:hover{border: solid 1px #b3b3b3}
/*得到焦点后*/
.input-text.focus,textarea.focus{border:solid 1px #33aaff \9;border-color:rgba(82,168,236,0.8);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6)}
/*不可点击*/
.input-text.disabled,.textarea.disabled,.input-text.disabled.focus,.textarea.disabled.focus{background-color:#ededed; cursor:default;border-color: #ddd;
	-webkit-box-shadow:inset 0 2px 2px #e8e7e7;
       -moz-box-shadow:inset 0 2px 2px #e8e7e7;
            box-shadow:inset 0 2px 2px #e8e7e7}
/*文件域 input-file*/
.btn-upload{position: relative;display: inline-block;overflow: hidden; vertical-align: middle; cursor: pointer}
.upload-url{width: 200px;cursor: pointer}
.input-file{position:absolute; right:0; top:0; cursor: pointer; font-size:99em;opacity:0;filter: alpha(opacity=0)}
.btn-upload .icon-add,.btn-upload .icon-minus{cursor: pointer;display: inline-block;font-family: Arial;font-size: 30px;height: 36px;
line-height: 36px;text-align: center;vertical-align: middle;width: 36px}
.btn-uploadpic{display: block;cursor: pointer;width: 60px; height: 60px; background:#fff url("/appgdyinpingcom/u/res/ui/images/icon-add.png") no-repeat 0 0; text-indent: -99em}

/*文本框尺寸*/
.input-big{font-size:16px; padding:10px 5px}/*大*/
.input-small{font-size:12px;padding:4px}/*小*/
.input-mini{font-size:10px;padding:3px}/*迷你*/

/*只读状态*/
.input-text.disabled,.textarea.disabled{background-color:#e6e6e6; cursor:default}

/*表单错误*/
.Validform_error{background-color:#fbe2e2; border-color:#c66161; color:#c00}
/*提示信息*/
.Validform_wrong,.Validform_right,.Validform_warning{display:inline-block;height:20px;font-size:12px;vertical-align:middle; padding-left:25px}
/*错误提示*/
.Validform_wrong{background:url("/appgdyinpingcom/u/res/ui/images/icon_error_s.png") no-repeat 0 center;color:#ef392b}
/*正确提示*/
.Validform_right{background:url("/appgdyinpingcom/u/res/ui/images/icon_right_s.png") no-repeat 0 center}
/*警告提示*/
.Validform_warning{background:url("/appgdyinpingcom/u/res/ui/images/icon_warning_s.png") no-repeat 0 center;color:#777}

/*密码等级*/
.passwordStrength b{font-weight:normal}
.passwordStrength b,.passwordStrength span{display:inline-block; vertical-align:middle;line-height:16px;line-height:18px\9;height:16px}
.passwordStrength span{width:57px;text-align:center;background-color:#d0d0d0;	border-right:1px solid #fff}
.passwordStrength .last{border-right:none}
.passwordStrength .bgStrength{color:#fff;background-color:#fcc900}
/*Validform对话框*/
#Validform_msg{font-size:14px;width:300px; -webkit-box-shadow:2px 2px 3px #aaa; -moz-box-shadow:2px 2px 3px #aaa; background:#fff; position:absolute; top:0px; right:50px; z-index:99999; display:none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999'); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1)}
#Validform_msg .iframe{position:absolute; left:0px; top:-1px; z-index:-1}
#Validform_msg .Validform_title{font-size:20px; padding:10px;text-align:left;color:#fff; position:relative; background-color:#fcc900}
#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{position:absolute; right:8px; top:6px; color:#fff; text-decoration:none; font-family:Verdana}
#Validform_msg a.Validform_close:hover{color:#fff}
#Validform_msg .Validform_info{padding:10px;border:1px solid #bbb; border-top:none; text-align:left}

/*数字表单*/
.numberControlBox{display:inline-block;overflow:hidden;vertical-align: middle}
.ncb-up,.ncb-down{font-size:0px;display:block;height:10px;background-color:#f4f4f4;background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(230,230,230) 50%,rgb(255,255,255) 100%);width:24px;border:1px solid #d1d1d1;cursor:pointer}
.ncb-up{margin-bottom:1px}
.numberControlBox .ncb_ico{display:block;height:10px;background-image:url("/appgdyinpingcom/u/res/ui/img/icon-arrow.png");background-repeat:no-repeat}
.ncb-up .ncb_ico{background-position: -22px center}
.ncb-down .ncb_ico{background-position: 1px center}
.ncb_btn_hover{border:1px solid #9dc7e7;background-color:#dff2fc;background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(210,237,250) 50%,rgb(255,255,255) 100%)}
.ncb_btn_selected{border:1px solid #6198c2;background-color:#aee1fb;background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(174,225,251) 50%,rgb(255,255,255) 100%)}
.input-text[type="number"]{width:80px}

/*单选按钮，复选框
	Example:
	<label class="radioBox" for="radio-demo-1"><span class="radio-icon"><input type="radio" id="radio-demo-1" value="1" name="radio-demo"></span> 单选按钮</label>
	<label class="radioBox" for="radio-demo-2"><span class="radio-icon"><input type="radio" id="radio-demo-2" value="2" name="radio-demo"></span> 单选按钮</label>
*/
input[type="radio"],input[type="checkbox"] {line-height: normal; margin-top:-4px}
.radioBox.inline,.checkbox.inline {margin-bottom: 0;vertical-align: middle;display: inline!important; text-align:left}
.radioBox{display:inline-block;cursor:pointer}
.radio-icon{display:inline-block; vertical-align:middle; width:16px; height:16px; cursor:pointer; background:url("/appgdyinpingcom/u/res/ui/images/icon_radio.png") no-repeat 0 0; position:relative; overflow:hidden}
.radio-icon input{position:absolute; left:0px; top:5px; opacity:0;filter: alpha(opacity=0)}
.checked .radio-icon{background-position:0 -16px}

/*输入框组*/
.input-group {border-collapse: separate;display: table;position: relative}
.input-group[class*="col-"] {float: none;padding-left: 0;padding-right: 0}
.input-group-addon {background-color:#eee;border: 1px solid #ccc;font-size: 14px;font-weight: normal;line-height: 1;padding: 6px 12px; text-align:center; color:#555}
.input-group-addon input[type="radio"], .input-group-addon input[type="checkbox"] {margin-top: 0}
.input-group .input-text {margin-bottom: 0;width: 100%}

/*select 下拉菜单*/
.select{border:solid 1px #ddd;cursor: pointer;display: inline-block;font-size: 14px;font-weight: normal;padding:4px;vertical-align: middle}
/*
<select name="demo" data-enabled="false">
  <option value="1" selected>默认</option>
  <option value="2">菜单二</option>
  <option value="3">菜单三</option>
</select>
需要引用2个js文件
<script type="text/javascript" src="Lib/squid.js"></script> 
<script type="text/javascript" src="Lib/jselect-1.0.js"></script>
页面调用方法 
<script type="text/javascript">
squid.swing.jselect()
</script>
*/
.select-wrapper {position:relative;z-index:99;border: 1px solid #DEDEDE;height: 26px;line-height: 26px;padding:0 6px;cursor:default;width:110px; background-color:#fff}
.select-wrapper:hover {border: 1px solid silver}
.select-default{zoom: 1; display:block}
.select-icon {right:0;top:50%; margin-top:-13px;background: url("/appgdyinpingcom/u/res/ui/images/icon-arrow2.png") no-repeat 0 0;height:26px;width:26px;position: absolute}
.select-icon:hover {background-position: 0 -27px}
.unselectable {-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;user-select: none}
.select-list {position:absolute;float:left;left:0px;top:100%;min-width:120px;max-height:320px;_height:expression(this.scrollHeight > 319 ? "320px" : "auto");margin:0;padding: 5px 0;background-color:#fff;background-clip: padding-box;
border:1px solid #d6d6d6;border:1px solid rgba(0,0,0,0.15);box-shadow:0 6px 12px rgba(0,0,0,0.175);left:-1px;overflow:auto;border-radius:4px}
.select-item {margin: 0;padding: 0}
.select-option {background:#fff;line-height:1.428571429;padding:4px 15px;padding-right:30px;white-space:nowrap; text-align:left;font-weight: normal}
.select-item .selected {background-color:#ea5944;color:#fff}

/*3.5 按钮
	Name:			style_button
	Example:		<button class="btn radius radius btn-primary" type="button">按钮</button>
	Explain:		btn-primary：主要/btn-info：信息/btn-success：成功/btn-warning：警告/btn-danger：危险/btn-inverse：反向/btn-link：链接

*/
/*关闭*/
.close{font-size:20px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:20px;color: #000;text-shadow: 0 1px 0 #fff;opacity: 0.2;filter: alpha(opacity=20)}
.close:hover,.close:focus{color: #000;text-decoration: none;cursor: pointer;opacity: 0.4;filter: alpha(opacity=40)}

button.close{padding:0;cursor:pointer;background:transparent;border: 0;-webkit-appearance: none}

.btn{display:inline-block;padding:3px 12px;cursor: pointer;font-size:14px;text-align: center;white-space: nowrap;vertical-align: middle;border:1px solid #ccc;border-color:#e6e6e6 #e6e6e6 #b3b3b3 #bfbfbf;*zoom:1;
	/*CSS3阴影*/	
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none}

a.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{text-decoration:none}
.btn:active,.btn.active{background-color:#ccc \9}
.btn:first-child{*margin-left:0}
.btn:hover,.btn:focus{background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}
.btn.active,.btn:active{background-image:none;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}

/*默认*/
.btn-default{
	background-color:#e6e6e6;
	/*CSS3 线性渐变背景*/
	background-image:-moz-linear-gradient(top,#fff,#e6e6e6);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
	background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);
	background-image:-o-linear-gradient(top,#fff,#e6e6e6);
	background-image:linear-gradient(to bottom,#fff,#e6e6e6);
	background-repeat:repeat-x;	
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffff',endColorstr='#ffe6e6e6',GradientType=0);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6}
a.btn-default:hover{color:#333}

/*主要*/
.btn-primary{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#44c3ec;
	background-image:-moz-linear-gradient(top,#00ABFD,#44c3ec);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#00ABFD),to(#44c3ec));
	background-image:-webkit-linear-gradient(top,#00ABFD,#44c3ec);
	background-image:-o-linear-gradient(top,#00ABFD,#44c3ec);
	background-image:linear-gradient(to bottom,#00ABFD,#44c3ec);
	background-repeat:repeat-x;
	border-color:#44c3ec #44c3ec #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.btn-primary:hover,.btn-primary:focus,.btn-primary.disabled,.btn-primary[disabled]{
	color: #fff;
	background-color: #44c3ec;
*background-color:#16A9DA}
.btn-primary:active,.btn-primary.active{color:#fff;background-color:#039 \9}

/*信息*/
.btn-info{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#2f96b4;
	background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
	background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);
	background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);
	background-image:linear-gradient(to bottom,#5bc0de,#2f96b4);
	background-repeat:repeat-x;border-color:#2f96b4 #2f96b4 #1f6377;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.btn-info:hover,.btn-info:focus,.btn-info.disabled,.btn-info[disabled]{color:#fff;background-color:#2f96b4;*background-color:#2a85a0}
.btn-info:active,.btn-info.active{color:#fff;background-color:#24748c \9}
/*成功*/
.btn-success{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#99CC99;
	background-image:-moz-linear-gradient(top,#62c462,#99CC99);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#99CC99));
	background-image:-webkit-linear-gradient(top,#62c462,#99CC99);
	background-image:-o-linear-gradient(top,#62c462,#99CC99);
	background-image:linear-gradient(to bottom,#62c462,#99CC99);
	background-repeat:repeat-x;border-color:#99CC99 #99CC99 #387038;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff51a351',GradientType=0);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.btn-success:hover,.btn-success:focus,.btn-success.disabled,.btn-success[disabled]{color:#fff;background-color:#99CC99;*background-color:#88C488}
.btn-success:active,.btn-success.active{color:#fff;background-color:#408140 \9}
/*警告*/
.btn-warning{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#f89406;
	background-image:-moz-linear-gradient(top,#fbb450,#f89406);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));
	background-image:-webkit-linear-gradient(top,#fbb450,#f89406);
	background-image:-o-linear-gradient(top,#fbb450,#f89406);
	background-image:linear-gradient(to bottom,#fbb450,#f89406);
	background-repeat:repeat-x;border-color:#f89406 #f89406 #ad6704;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450',endColorstr='#fff89406',GradientType=0);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.btn-warning:hover,.btn-warning:focus,.btn-warning.disabled,.btn-warning[disabled]{color:#fff;background-color:#f89406;*background-color:#df8505}
.btn-warning:active,.btn-warning.active{color:#fff;background-color:#c67605 \9}

/*危险*/
.btn-danger{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#D65F58;
	background-image:-moz-linear-gradient(top,#ee5f5b,#D65F58);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#D65F58));
	background-image:-webkit-linear-gradient(top,#ee5f5b,#D65F58);
	background-image:-o-linear-gradient(top,#ee5f5b,#D65F58);
	background-image:linear-gradient(to bottom,#ee5f5b,#D65F58);
	background-repeat:repeat-x;border-color:#D65F58 #D65F58 #802420;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b',endColorstr='#ffbd362f',GradientType=0);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.btn-danger:hover,.btn-danger:focus,.btn-danger.disabled,.btn-danger[disabled]{color:#fff;background-color:#D65F58;*background-color:#D65F58}
.btn-danger:active,.btn-danger.active{color:#fff;background-color:#942a25 \9}
/*相反*/
.btn-inverse{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#222;
	background-image:-moz-linear-gradient(top,#444,#222);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));
	background-image:-webkit-linear-gradient(top,#444,#222);
	background-image:-o-linear-gradient(top,#444,#222);
	background-image:linear-gradient(to bottom,#444,#222);
	background-repeat:repeat-x;border-color:#222 #222 #000;
	border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.btn-inverse:hover,.btn-inverse:focus,.btn-inverse.disabled,.btn-inverse[disabled]{color:#fff;background-color:#222;*background-color:#151515}
.btn-inverse:active,.btn-inverse.active{color:#fff;background-color:#080808 \9}

/*灰色*/
.btn-gray{color:#666666;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background-color:#DDDDDD;
	background-image:-moz-linear-gradient(top,#BBBBBB,#DDDDDD);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#BBBBBB),to(#DDDDDD));
	background-image:-webkit-linear-gradient(top,#BBBBBB,#DDDDDD);
	background-image:-o-linear-gradient(top,#BBBBBB,#DDDDDD);
	background-image:linear-gradient(to bottom,#BBBBBB,#DDDDDD);
	background-repeat:repeat-x;border-color:#DDDDDD #DDDDDD #000;
	border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444',endColorstr='#ff222222',GradientType=0);
	filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
	font-weight:normal;
}
.btn-gray:hover,.btn-inverse:focus,.btn-inverse.disabled,.btn-inverse[disabled]{color:#666666;background-color:#DDDDDD;*background-color:#151515}
.btn-gray:active,.btn-inverse.active{color:#666666;background-color:#080808 \9}
/*.btn-gray{
	background-color: #DDDDDD;
	color: #666666;
	margin: 0px;
	padding: 0px;
}*/
/*链接*/
.btn-link,.btn-link:active,.btn-link[disabled]{background-color:transparent;background-image:none;box-shadow:none}
.btn-link{color:#08c;cursor:pointer;border-color:transparent;border-radius:0}
.btn-link:hover,.btn-link:focus{color:#005580;text-decoration:underline;background-color:transparent}
.btn-link[disabled]:hover,.btn-link[disabled]:focus{color:#333;text-decoration:none}

/*其他颜色*/
/*玫红色#F82244
#ff3c53  #fd3148  #f1162f  #d9172d
#f0253b  #e71c32  #f1162f  #d9172d
*/

/*橙色#FF6F3D*/

/*绿色#00B391
#009871
*/

/*块级按钮*/
.btn-block {-moz-box-sizing: border-box;display: block;padding-left: 0;padding-right: 0;width: 100%}

/*按钮尺寸*/
.btn-large{padding:10px 20px;font-size:18px}
.btn-big{padding:5px 15px;font-size:16px}
.btn-small{padding:2px 10px;font-size:12px}
.btn-mini{padding:0 6px;font-size:10px}

/*禁用状态*/
.btn.disabled{cursor:default;background-image:none;opacity:.65;filter:alpha(opacity=65);box-shadow:none}
/*3.6 图片*/
/*3.6.1 头像
	Name:			mod_avatar
	Example:		<i class="avatar avatar-L radius"><img src="static/h-ui/images/avatar-default-S.gif"></i>
*/
.avatar{display:inline-block;position:relative; overflow:hidden}
.avatar img{ display:block}
.avatar.radius,.avatar.radius img{border-radius:50%}

.avatar-mini,.avatar.avatar-mini img{ width:16px; height:16px}
.avatar.avatar-S,.avatar.avatar-S img{ width:24px; height:24px}
.avatar.avatar-M,.avatar.avatar-M img{ width:32px; height:32px}
.avatar.avatar-L,.avatar.avatar-L img{ width:48px; height:48px}
.avatar.avatar-XL,.avatar.avatar-XL img{ width:64px; height:64px}


/*3.7 图标
H-ui采用Font Awesome 3.2.1的整套图标，因为是图标字体，所以可以像控制字体那样随心所欲改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性
*/
/*.icon{display:inline-block; vertical-align:text-top; width:16px; height:16px; background-position:center; background-repeat:no-repeat}*/

/*3.8 效果
	Name:			style_animation
	Example:		<input class="btn hui-animation" val="淡入" type="button" data-tra="hui-fadein" />
*/
/* animation */
.hui-bounce,.hui-flip,.hui-flash,.hui-shake,.hui-swing,.hui-wobble,.hui-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease}
.hui-fadein,.hui-fadeinT,.hui-fadeinR,.hui-fadeinB,.hui-fadeinL,.hui-bouncein,.hui-bounceinT,.hui-bounceinR,.hui-bounceinB,.hui-bounceinL,.hui-rotatein,.hui-rotateinLT,.hui-rotateinLB,.hui-rotateinRT,.hui-rotateinRB,.hui-flipin,.hui-flipinX,.hui-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards}
.hui-fadeout,.hui-fadeoutT,.hui-fadeoutR,.hui-fadeoutB,.hui-fadeoutL,.hui-bounceout,.hui-bounceoutT,.hui-bounceoutR,.hui-bounceoutB,.hui-bounceoutL,.hui-rotateout,.hui-rotateoutLT,.hui-rotateoutLB,.hui-rotateoutRT,.hui-rotateoutRB,.hui-flipout,.hui-flipoutX,.hui-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards}

/* 淡入 */
.hui-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein}
/* 淡入-从上 */
.hui-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT}
/* 淡入-从右 */
.hui-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR}
/* 淡入-从下 */
.hui-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB}
/* 淡入-从左 */
.hui-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL}
/* 淡出 */
.hui-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout}

/* 淡出-向上 */
.hui-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT}
/* 淡出-向右 */
.hui-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR}
/* 淡出-向下 */
.hui-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB}
/* 淡出-向左 */
.hui-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL}

/* 弹跳 */
.hui-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce}

/* 弹入 */
.hui-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein}
/* 弹入-从上 */
.hui-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT}
/* 弹入-从右 */
.hui-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR}
/* 弹入-从下 */
.hui-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB}
/* 弹入-从左 */
.hui-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL}

/* 弹出 */
.hui-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout}
/* 弹出-向上 */
.hui-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT}
/* 弹出-向右 */
.hui-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR}
/* 弹出-向下 */
.hui-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB}
/* 弹出-向左 */
.hui-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL}

/* 转入 */
.hui-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein}
/* 转入-从左上 */
.hui-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT}
/* 转入-从左下 */
.hui-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB}
/* 转入-从右上 */
.hui-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT}
/* 转入-从右下*/
.hui-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB}

/* 转出 */
.hui-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout}
/* 转出-向左上 */
.hui-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT}
/* 转出-向左下 */
.hui-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB}
/* 转出-向右上 */
.hui-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT}
/* 转出-向右下 */
.hui-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB}

/* 翻转 */
.hui-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip}
/* 翻入-X轴 */
.hui-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX}
/* 翻入-Y轴 */
.hui-flipin,.hui-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY}
/* 翻出-X轴 */
.hui-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX}
/* 翻出-Y轴 */
.hui-flipout,.hui-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY}

/* 闪烁 */
.hui-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash}
/* 震颤 */
.hui-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake}
/* 摇摆 */
.hui-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing}
/* 摇晃 */
.hui-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble}
/* 震铃 */
.hui-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@-moz-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@-ms-keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes fadein{
    0%{opacity:0}
    100%{opacity:1}
}
/* 淡入-从上 */
@-webkit-keyframes fadeinT{
    0%{opacity:0;-webkit-transform:translateY(-100px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinT{
    0%{opacity:0;-moz-transform:translateY(-100px)}
    100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinT{
    0%{opacity:0;-ms-transform:translateY(-100px)}
    100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinT{
    0%{opacity:0;transform:translateY(-100px)}
    100%{opacity:1;transform:translateY(0)}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR{
    0%{opacity:0;-webkit-transform:translateX(100px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinR{
    0%{opacity:0;-moz-transform:translateX(100px)}
    100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinR{
    0%{opacity:0;-ms-transform:translateX(100px)}
    100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinR{
    0%{opacity:0;transform:translateX(100px)}
    100%{opacity:1;transform:translateX(0)}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB{
    0%{opacity:0;-webkit-transform:translateY(100px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinB{
    0%{opacity:0;-moz-transform:translateY(100px)}
    100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinB{
    0%{opacity:0;-ms-transform:translateY(100px)}
    100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinB{
    0%{opacity:0;transform:translateY(100px)}
    100%{opacity:1;transform:translateY(0)}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL{
    0%{opacity:0;-webkit-transform:translateX(-100px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinL{
    0%{opacity:0;-moz-transform:translateX(-100px)}
    100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinL{
    0%{opacity:0;-ms-transform:translateX(-100px)}
    100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinL{
    0%{opacity:0;transform:translateX(-100px)}
    100%{opacity:1;transform:translateX(0)}
}
/* 淡出 */
@-webkit-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@-moz-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@-ms-keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
@keyframes fadeout{
    0%{opacity:1}
    100%{opacity:0}
}
/* 淡出-向上 */
@-webkit-keyframes fadeoutT{
    0%{opacity:1;-webkit-transform:translateY(0)}
    100%{opacity:0;-webkit-transform:translateY(-100px)}
}
@-moz-keyframes fadeoutT{
    0%{opacity:1;-moz-transform:translateY(0)}
    100%{opacity:0;-moz-transform:translateY(-100px)}
}
@-ms-keyframes fadeoutT{
    0%{opacity:1;-ms-transform:translateY(0)}
    100%{opacity:0;-ms-transform:translateY(-100px)}
}
@keyframes fadeoutT{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-100px)}
}
/* 淡出-向右 */
@-webkit-keyframes fadeoutR{
    0%{opacity:1;-webkit-transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(100px)}
}
@-moz-keyframes fadeoutR{
    0%{opacity:1;-moz-transform:translateX(0)}
    100%{opacity:0;-moz-transform:translateX(100px)}
}
@-ms-keyframes fadeoutR{
    0%{opacity:1;-ms-transform:translateX(0)}
    100%{opacity:0;-ms-transform:translateX(100px)}
}
@keyframes fadeoutR{
    0%{opacity:1;transform:translateX(0)}
    100%{opacity:0;transform:translateX(100px)}
}
/* 淡出-向下 */
@-webkit-keyframes fadeoutB{
    0%{opacity:1;-webkit-transform:translateY(0)}
    100%{opacity:0;-webkit-transform:translateY(100px)}
}
@-moz-keyframes fadeoutB{
    0%{opacity:1;-moz-transform:translateY(0)}
    100%{opacity:0;-moz-transform:translateY(100px)}
}
@-ms-keyframes fadeoutB{
    0%{opacity:1;-ms-transform:translateY(0)}
    100%{opacity:0;-ms-transform:translateY(100px)}
}
@keyframes fadeoutB{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(100px)}
}
/* 淡出-向左 */
@-webkit-keyframes fadeoutL{
    0%{opacity:1;-webkit-transform:translateX(0)}
    100%{opacity:0;-webkit-transform:translateX(-100px)}
}
@-moz-keyframes fadeoutL{
    0%{opacity:1;-moz-transform:translateX(0)}
    100%{opacity:0;-moz-transform:translateX(-100px)}
}
@-ms-keyframes fadeoutL{
    0%{opacity:1;-ms-transform:translateX(0)}
    100%{opacity:0;-ms-transform:translateX(-100px)}
}
@keyframes fadeoutL{
    0%{opacity:1;transform:translateX(0)}
    100%{opacity:0;transform:translateX(-100px)}
}
/* 弹跳 */
@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
    40%{-webkit-transform:translateY(-30px)}
    60%{-webkit-transform:translateY(-15px)}
}
@-moz-keyframes bounce{
    0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
    40%{-moz-transform:translateY(-30px)}
    60%{-moz-transform:translateY(-15px)}
}
@-ms-keyframes bounce{
    0%,20%,50%,80%,100%{-ms-transform:translateY(0)}
    40%{-ms-transform:translateY(-30px)}
    60%{-ms-transform:translateY(-15px)}
}
@keyframes bounce{
    0%,20%,50%,80%,100%{transform:translateY(0)}
    40%{transform:translateY(-30px)}
    60%{transform:translateY(-15px)}
}
/* 弹入 */
@-webkit-keyframes bouncein{
    0%{opacity:0;-webkit-transform:scale(0.3)}
    50%{opacity:1;-webkit-transform:scale(1.05)}
    70%{-webkit-transform:scale(0.9)}
    100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bouncein{
    0%{opacity:0;-moz-transform:scale(0.3)}
    50%{opacity:1;-moz-transform:scale(1.05)}
    70%{-moz-transform:scale(0.9)}
    100%{-moz-transform:scale(1)}
}
@-ms-keyframes bouncein{
    0%{opacity:0;-ms-transform:scale(0.3)}
    50%{opacity:1;-ms-transform:scale(1.05)}
    70%{-ms-transform:scale(0.9)}
    100%{-ms-transform:scale(1)}
}
@keyframes bouncein{
    0%{opacity:0;transform:scale(0.3)}
    50%{opacity:1;transform:scale(1.05)}
    70%{transform:scale(0.9)}
    100%{transform:scale(1)}
}
/* 弹入-从上 */
@-webkit-keyframes bounceinT{
    0%{opacity:0;-webkit-transform:translateY(-100px)}
    60%{opacity:1;-webkit-transform:translateY(30px)}
    80%{-webkit-transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinT{
    0%{opacity:0;-moz-transform:translateY(-100px)}
    60%{opacity:1;-moz-transform:translateY(30px)}
    80%{-moz-transform:translateY(-10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinT{
    0%{opacity:0;-ms-transform:translateY(-100px)}
    60%{opacity:1;-ms-transform:translateY(30px)}
    80%{-ms-transform:translateY(-10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinT{
    0%{opacity:0;transform:translateY(-100px)}
    60%{opacity:1;transform:translateY(30px)}
    80%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}
/* 弹入-从右 */
@-webkit-keyframes bounceinR{
    0%{opacity:0;-webkit-transform:translateX(100px)}
    60%{opacity:1;-webkit-transform:translateX(-30px)}
    80%{-webkit-transform:translateX(10px)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinR{
    0%{opacity:0;-moz-transform:translateX(100px)}
    60%{opacity:1;-moz-transform:translateX(-30px)}
    80%{-moz-transform:translateX(10px)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinR{
    0%{opacity:0;-ms-transform:translateX(100px)}
    60%{opacity:1;-ms-transform:translateX(-30px)}
    80%{-ms-transform:translateX(10px)}
    100%{-ms-transform:translateX(0)}
}
@keyframes bounceinR{
    0%{opacity:0;transform:translateX(100px)}
    60%{opacity:1;transform:translateX(-30px)}
    80%{transform:translateX(10px)}
    100%{transform:translateX(0)}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px)}
    60%{opacity:1;-webkit-transform:translateY(-30px)}
    80%{-webkit-transform:translateY(10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-moz-transform:translateY(100px)}
    60%{opacity:1;-moz-transform:translateY(-30px)}
    80%{-moz-transform:translateY(10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-ms-transform:translateY(100px)}
    60%{opacity:1;-ms-transform:translateY(-30px)}
    80%{-ms-transform:translateY(10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px)}
    60%{opacity:1;transform:translateY(-30px)}
    80%{transform:translateY(10px)}
    100%{transform:translateY(0)}
}
/* 弹入-从左 */
@-webkit-keyframes bounceinL{
    0%{opacity:0;-webkit-transform:translateX(-100px)}
    60%{opacity:1;-webkit-transform:translateX(30px)}
    80%{-webkit-transform:translateX(-10px)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinL{
    0%{opacity:0;-moz-transform:translateX(-100px)}
    60%{opacity:1;-moz-transform:translateX(30px)}
    80%{-moz-transform:translateX(-10px)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinL{
    0%{opacity:0;-ms-transform:translateX(-100px)}
    60%{opacity:1;-ms-transform:translateX(30px)}
    80%{-ms-transform:translateX(-10px)}
    100%{-ms-transform:translateX(0)}
}
@keyframes bounceinL{
    0%{opacity:0;transform:translateX(-100px)}
    60%{opacity:1;transform:translateX(30px)}
    80%{transform:translateX(-10px)}
    100%{transform:translateX(0)}
}
/* 弹出 */
@-webkit-keyframes bounceout{
    0%{-webkit-transform:scale(1)}
    25%{-webkit-transform:scale(0.95)}
    50%{opacity:1;-webkit-transform:scale(1.1)}
    100%{opacity:0;-webkit-transform:scale(0.3)}
}
@-moz-keyframes bounceout{
    0%{-moz-transform:scale(1)}
    25%{-moz-transform:scale(0.95)}
    50%{opacity:1;-moz-transform:scale(1.1)}
    100%{opacity:0;-moz-transform:scale(0.3)}
}
@-ms-keyframes bounceout{
    0%{-ms-transform:scale(1)}
    25%{-ms-transform:scale(0.95)}
    50%{opacity:1;-ms-transform:scale(1.1)}
    100%{opacity:0;-ms-transform:scale(0.3)}
}
@keyframes bounceout{
    0%{transform:scale(1)}
    25%{transform:scale(0.95)}
    50%{opacity:1;transform:scale(1.1)}
    100%{opacity:0;transform:scale(0.3)}
}
/* 弹出-向上*/
@-webkit-keyframes bounceoutT{
    0%{-webkit-transform:translateY(0)}
    20%{opacity:1;-webkit-transform:translateY(20px)}
    100%{opacity:0;-webkit-transform:translateY(-100px)}
}
@-moz-keyframes bounceoutT{
    0%{-moz-transform:translateY(0)}
    20%{opacity:1;-moz-transform:translateY(20px)}
    100%{opacity:0;-moz-transform:translateY(-100px)}
}
@-ms-keyframes bounceoutT{
    0%{-ms-transform:translateY(0)}
    20%{opacity:1;-ms-transform:translateY(20px)}
    100%{opacity:0;-ms-transform:translateY(-100px)}
}
@keyframes bounceoutT{
    0%{transform:translateY(0)}
    20%{opacity:1;transform:translateY(20px)}
    100%{opacity:0;transform:translateY(-100px)}
}
/* 弹出-向右*/
@-webkit-keyframes bounceoutR{
    0%{-webkit-transform:translateX(0)}
    20%{opacity:1;-webkit-transform:translateX(-20px)}
    100%{opacity:0;-webkit-transform:translateX(100px)}
}
@-moz-keyframes bounceoutR{
    0%{-moz-transform:translateX(0)}
    20%{opacity:1;-moz-transform:translateX(-20px)}
    100%{opacity:0;-moz-transform:translateX(100px)}
}
@-ms-keyframes bounceoutR{
    0%{-ms-transform:translateX(0)}
    20%{opacity:1;-ms-transform:translateX(-20px)}
    100%{opacity:0;-ms-transform:translateX(100px)}
}
@keyframes bounceoutR{
    0%{transform:translateX(0)}
    20%{opacity:1;transform:translateX(-20px)}
    100%{opacity:0;transform:translateX(100px)}
}
/* 弹出-向下 */
@-webkit-keyframes bounceoutB{
    0%{-webkit-transform:translateY(0)}
    20%{opacity:1;-webkit-transform:translateY(-20px)}
    100%{opacity:0;-webkit-transform:translateY(100px)}
}
@-moz-keyframes bounceoutB{
    0%{-moz-transform:translateY(0)}
    20%{opacity:1;-moz-transform:translateY(-20px)}
    100%{opacity:0;-moz-transform:translateY(100px)}
}
@-ms-keyframes bounceoutB{
    0%{-ms-transform:translateY(0)}
    20%{opacity:1;-ms-transform:translateY(-20px)}
    100%{opacity:0;-ms-transform:translateY(100px)}
}
@keyframes bounceoutB{
    0%{transform:translateY(0)}
    20%{opacity:1;transform:translateY(-20px)}
    100%{opacity:0;transform:translateY(100px)}
}
/* 弹出-向左 */
@-webkit-keyframes bounceoutL{
    0%{-webkit-transform:translateX(0)}
    20%{opacity:1;-webkit-transform:translateX(20px)}
    100%{opacity:0;-webkit-transform:translateX(-100px)}
}
@-moz-keyframes bounceoutL{
    0%{-moz-transform:translateX(0)}
    20%{opacity:1;-moz-transform:translateX(20px)}
    100%{opacity:0;-moz-transform:translateX(-100px)}
}
@-ms-keyframes bounceoutL{
    0%{-ms-transform:translateX(0)}
    20%{opacity:1;-ms-transform:translateX(20px)}
    100%{opacity:0;-ms-transform:translateX(-100px)}
}
@keyframes bounceoutL{
    0%{transform:translateX(0)}
    20%{opacity:1;transform:translateX(20px)}
    100%{opacity:0;transform:translateX(-200px)}
}
/* 转入 */
@-webkit-keyframes rotatein{
    0%{opacity:0;-webkit-transform:rotate(-200deg)}
    100%{opacity:1;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotatein{
    0%{opacity:0;-moz-transform:rotate(-200deg)}
    100%{opacity:1;-moz-transform:rotate(0)}
}
@-ms-keyframes rotatein{
    0%{opacity:0;-ms-transform:rotate(-200deg)}
    100%{opacity:1;-ms-transform:rotate(0)}
}
@keyframes rotatein{
    0%{opacity:0;transform:rotate(-200deg)}
    100%{opacity:1;transform:rotate(0)}
}
/* 转入-从左上 */
@-webkit-keyframes rotateinLT{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinLT{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinLT{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinLT{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从左下 */
@-webkit-keyframes rotateineftB{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateineftB{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateineftB{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateineftB{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右上 */
@-webkit-keyframes rotateinRT{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRT{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRT{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRT{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右下*/
@-webkit-keyframes rotateinRB{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRB{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRB{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRB{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}
/* 转出 */
@-webkit-keyframes rotateout{
    0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}
}
@-moz-keyframes rotateout{
    0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}
}
@-ms-keyframes rotateout{
    0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0}
}
@keyframes rotateout{
    0%{transform-origin:center center;transform:rotate(0);opacity:1}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0}
}
/* 转出-向左上 */
@-webkit-keyframes rotateoutLT{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
}
@-moz-keyframes rotateoutLT{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
}
@-ms-keyframes rotateoutLT{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
}
@keyframes rotateoutLT{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
}
/* 转出-向左下 */
@-webkit-keyframes rotateoutLB{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}
}
@-moz-keyframes rotateoutLB{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}
}
@-ms-keyframes rotateoutLB{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}
}
@keyframes rotateoutLB{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}
}
/* 转出-向右上 */
@-webkit-keyframes rotateoutRT{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
}
@-moz-keyframes rotateoutRT{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
}
@-ms-keyframes rotateoutRT{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
}
@keyframes rotateoutRT{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
}
/* 转出-向右下 */
@-webkit-keyframes rotateoutBR{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}
}
@-moz-keyframes rotateoutBR{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}
}
@-ms-keyframes rotateoutBR{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}
}
@keyframes rotateoutBR{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}
}
/* 翻转 */
@-webkit-keyframes flip{
    0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}
    40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}
    50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}
    80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in}
    100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}
}
@-moz-keyframes flip{
    0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}
    40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}
    50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}
    80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in}
    100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}
}
@-ms-keyframes flip{
    0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out}
    40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out}
    50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in}
    80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in}
    100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in}
}
@keyframes flip{
    0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}
    40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}
    50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}
    80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in}
    100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}
}
/* 翻入-X轴 */
@-webkit-keyframes flipinX{
    0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotateX(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateX(10deg)}
    100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
}
@-moz-keyframes flipinX{
    0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-moz-transform:perspective(400px) rotateX(-10deg)}
    70%{-moz-transform:perspective(400px) rotateX(10deg)}
    100%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
}
@-ms-keyframes flipinX{
    0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{-ms-transform:perspective(400px) rotateX(-10deg)}
    70%{-ms-transform:perspective(400px) rotateX(10deg)}
    100%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
}
@keyframes flipinX{
    0%{transform:perspective(400px) rotateX(90deg);opacity:0}
    40%{transform:perspective(400px) rotateX(-10deg)}
    70%{transform:perspective(400px) rotateX(10deg)}
    100%{transform:perspective(400px) rotateX(0);opacity:1}
}
/* 翻入-Y轴 */
@-webkit-keyframes flipinY{
    0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateY(10deg)}
    100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
}
@-moz-keyframes flipinY{
    0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-moz-transform:perspective(400px) rotateY(-10deg)}
    70%{-moz-transform:perspective(400px) rotateY(10deg)}
    100%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
}
@-ms-keyframes flipinY{
    0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{-ms-transform:perspective(400px) rotateY(-10deg)}
    70%{-ms-transform:perspective(400px) rotateY(10deg)}
    100%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
}
@keyframes flipinY{
    0%{transform:perspective(400px) rotateY(90deg);opacity:0}
    40%{transform:perspective(400px) rotateY(-10deg)}
    70%{transform:perspective(400px) rotateY(10deg)}
    100%{transform:perspective(400px) rotateY(0);opacity:1}
}
/* 翻出-X轴 */
@-webkit-keyframes flipoutX{
    0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-moz-keyframes flipoutX{
    0%{-moz-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@-ms-keyframes flipoutX{
    0%{-ms-transform:perspective(400px) rotateX(0);opacity:1}
    100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}
}
@keyframes flipoutX{
    0%{transform:perspective(400px) rotateX(0);opacity:1}
    100%{transform:perspective(400px) rotateX(90deg);opacity:0}
}
/* 翻出-Y轴 */
@-webkit-keyframes flipoutY{
    0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-moz-keyframes flipoutY{
    0%{-moz-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@-ms-keyframes flipoutY{
    0%{-ms-transform:perspective(400px) rotateY(0);opacity:1}
    100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}
}
@keyframes flipoutY{
    0%{transform:perspective(400px) rotateY(0);opacity:1}
    100%{transform:perspective(400px) rotateY(90deg);opacity:0}
}
/* 闪烁 */
@-webkit-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@-moz-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@-ms-keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
@keyframes flash{
    0%,50%,100%{opacity:1}
    25%,75%{opacity:0}
}
/* 震颤 */
@-webkit-keyframes shake{
    0%,100%{-webkit-transform:translateX(0)}
    10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
    20%,40%,60%,80%{-webkit-transform:translateX(10px)}
}
@-moz-keyframes shake{
    0%,100%{-moz-transform:translateX(0)}
    10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}
    20%,40%,60%,80%{-moz-transform:translateX(10px)}
}
@-ms-keyframes shake{
    0%,100%{-ms-transform:translateX(0)}
    10%,30%,50%,70%,90%{-ms-transform:translateX(-10px)}
    20%,40%,60%,80%{-ms-transform:translateX(10px)}
}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    10%,30%,50%,70%,90%{transform:translateX(-10px)}
    20%,40%,60%,80%{transform:translateX(10px)}
}
/* 摇摆 */
@-webkit-keyframes swing{
    20%{-webkit-transform:rotate(15deg)}
    40%{-webkit-transform:rotate(-10deg)}
    60%{-webkit-transform:rotate(5deg)}
    80%{-webkit-transform:rotate(-5deg)}
    100%{-webkit-transform:rotate(0)}
}
@-moz-keyframes swing{
    20%{-moz-transform:rotate(15deg)}
    40%{-moz-transform:rotate(-10deg)}
    60%{-moz-transform:rotate(5deg)}
    80%{-moz-transform:rotate(-5deg)}
    100%{-moz-transform:rotate(0)}
}
@-ms-keyframes swing{
    20%{-ms-transform:rotate(15deg)}
    40%{-ms-transform:rotate(-10deg)}
    60%{-ms-transform:rotate(5deg)}
    80%{-ms-transform:rotate(-5deg)}
    100%{-ms-transform:rotate(0)}
}
@keyframes swing{
    20%{transform:rotate(15deg)}
    40%{transform:rotate(-10deg)}
    60%{transform:rotate(5deg)}
    80%{transform:rotate(-5deg)}
    100%{transform:rotate(0)}
}
/* 摇晃 */
@-webkit-keyframes wobble{
    0%{-webkit-transform:translateX(0)}
    15%{-webkit-transform:translateX(-100px) rotate(-5deg)}
    30%{-webkit-transform:translateX(80px) rotate(3deg)}
    45%{-webkit-transform:translateX(-65px) rotate(-3deg)}
    60%{-webkit-transform:translateX(40px) rotate(2deg)}
    75%{-webkit-transform:translateX(-20px) rotate(-1deg)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes wobble{
    0%{-moz-transform:translateX(0)}
    15%{-moz-transform:translateX(-100px) rotate(-5deg)}
    30%{-moz-transform:translateX(80px) rotate(3deg)}
    45%{-moz-transform:translateX(-65px) rotate(-3deg)}
    60%{-moz-transform:translateX(40px) rotate(2deg)}
    75%{-moz-transform:translateX(-20px) rotate(-1deg)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes wobble{
    0%{-ms-transform:translateX(0)}
    15%{-ms-transform:translateX(-100px) rotate(-5deg)}
    30%{-ms-transform:translateX(80px) rotate(3deg)}
    45%{-ms-transform:translateX(-65px) rotate(-3deg)}
    60%{-ms-transform:translateX(40px) rotate(2deg)}
    75%{-ms-transform:translateX(-20px) rotate(-1deg)}
    100%{-ms-transform:translateX(0)}
}
@keyframes wobble{
    0%{transform:translateX(0)}
    15%{transform:translateX(-100px) rotate(-5deg)}
    30%{transform:translateX(80px) rotate(3deg)}
    45%{transform:translateX(-65px) rotate(-3deg)}
    60%{transform:translateX(40px) rotate(2deg)}
    75%{transform:translateX(-20px) rotate(-1deg)}
    100%{transform:translateX(0)}
}
/* 震铃 */
@-webkit-keyframes ring{
    0%{-webkit-transform:scale(1)}
    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
    100%{-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes ring{
    0%{-moz-transform:scale(1)}
    10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
    100%{-moz-transform:scale(1) rotate(0)}
}
@-ms-keyframes ring{
    0%{-ms-transform:scale(1)}
    10%,20%{-ms-transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg)}
    100%{-ms-transform:scale(1) rotate(0)}
}
@keyframes ring{
    0%{transform:scale(1)}
    10%,20%{transform:scale(0.9) rotate(-3deg)}
    30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
    40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
    100%{transform:scale(1) rotate(0)}
}
/*4.1 按钮组
  Name:     mod_btn-group
  Example:  
  Explain:
*/
.btn-group{}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {border-bottom-right-radius: 0;border-top-right-radius: 0}
.btn-group > .btn:first-child {margin-left: 0}
.btn-group > .btn, .btn-group-stacked > .btn {float: left;position: relative}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {border-radius: 0}
.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {margin-left: -1px}
.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {border-bottom-left-radius: 0;border-top-left-radius: 0}


/*4.2.1 导航条
	Name:			mod_mainnav
	Example:		
	<nav class="mainnav cl">
	  <ul class="cl">
	    <li class="current"><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>
    </nav>
	Explain: 鼠标经过状态a:hover，当前选中状态li:current。		
*/
.mainnav{width:100%;z-index:1;background-color:#333}/*导航条背景*/
.mainnav li,.mainnav li a{height:40px;line-height:40px}/*导航条高度*/
.mainnav li{float:left;display:inline;color:#fff;font-size:14px;font-weight:bold}/*设置字体*/
.mainnav li a{display:inline-block;padding:0 18px;color:#fff}/*链接颜色*/
.mainnav li a:hover,.mainnav li.current a{color:#fff;text-decoration:none; background-color:#000}/*交互颜色*/
/*4.2.2 面包屑导航
	Name:			mod_breadcrumb
	Example:		
	<nav class="breadcrumb"><a href="/" class="maincolor">首页</a><span class="c_gray en">&gt;</span><a href="#">组件</a><span class="c_gray en">&gt;</span><span class="c_gray">当前页面</span></nav>
*/
.breadcrumb{padding-left:25px;border-bottom: 1px solid #E5E5E5;line-height: 39px; height:39px}
.breadcrumb span{padding:0 5px}
/*4.2.3 翻页导航
	Name:			mod_pageNav
	Example:		<div class="pageNav" id="pageNav"></div>
	Explain:		需要调用pagenav.cn.js

*/
.pageNav input, button{
	overflow: visible;
	outline: none;
	vertical-align: top;
}
.pageNav{float:none;clear:both;font-size:0px;font-family:Arial,Helvetica,sans-serif;padding:18px 0px;text-align:center}
.pageNav span,.pageNav a,.pageNav b{font-size:14px;margin-right:5px;overflow:hidden;padding:3px 8px}
.pageNav a{border:1px solid #CCDBE4;cursor:pointer}
.pageNav b{color:#000}
.pageNav .mor{padding:3px;font-weight:bold}
.pageNav .text{
	width: 20px;
	padding-top: 3px;
	padding-right: 8px;
	padding-bottom: 1px;
	padding-left: 8px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.pageNav .button{}

/*4.2.4 顶部导航
	Name:			mod_topnav
	Sample:
	<div class="topnav"><div class="cl"><div class="l">您好，欢迎来到Hui！</div><div class="r"><span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addFavorite();">收藏本站</a></span><span class="pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a></span></div></div></div>
	
*/
.topnav{height:30px;line-height:30px;background:url("/appgdyinpingcom/u/res/ui/images/bg_topnav.gif") repeat-x 0 0;border-bottom:1px solid #EBEBEB; font-size:12px}
.topbar{background-color: #ECECEC;border-bottom:1px solid #ddd}
.topbar a{margin-right:5px}
.r_nav{display:inline-block; color:#999}

/*4.2.5 向导
	Name:			mod_steps
	Sample:
	<div class="four steps">
	  <span class="step">第一步</span>
	  <span class="active step">第二步</span>
	  <span class="disabled step">第三步</span>
	  <span class="disabled step">第四步</span>
	</div>
*/
.steps,.step{display:inline-block;position:relative;padding:1em 2em 1em 3em;vertical-align:top;background-color:#FFF;color:#888;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
.step:after,.steps .step:after{position:absolute;z-index:2;content:'';top:0;right:-1.45em;border-bottom:1.5em solid transparent;border-left:1.5em solid #FFF;border-top:1.5em solid transparent;width:0;height:0}
.step,.steps .step,.steps .step:after{-webkit-transition:opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;transition:opacity .1s ease,color .1s ease,box-shadow .1s ease}
.steps{cursor:pointer;display:inline-block;font-size:0;box-shadow:0 0 0 1px rgba(0,0,0,.1);line-height:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-radius:.3125rem}
.steps .step:first-child{padding-left:1.35em;border-radius:.3125em 0 0 .3125em}
.steps .step:last-child{border-radius:0 .3125em .3125em 0}
.steps .step:only-child{border-radius:.3125em}
.steps .step:last-child{margin-right:0}
.steps .step:last-child:after{display:none}
.step:hover,.step.hover{background-color:#F7F7F7;color:rgba(0,0,0,.8)}
.steps .step.hover:after,.steps .step:hover:after,.step:hover,.step.hover::after{border-left-color:#F7F7F7}
.steps .step.down,.steps .step:active,.step.down,.step:active{background-color:#F0F0F0}
.steps .step.down:after,.steps .step:active:after,.steps.down::after,.steps:active::after{border-left-color:#F0F0F0}
.steps .step.active,.active.step{cursor:auto;background-color:#428BCA;color:#FFF;font-weight:700}.steps .step.active:after,.active.steps:after{border-left-color:#428BCA}
.steps .disabled.step,.disabled.step{cursor:auto;background-color:#FFF;color:#CBCBCB}
.disabled.step:after{border:0;background-color:#FFF;top:.42em;right:-1em;width:2.15em;height:2.15em;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);box-shadow:-1px -1px 0 0 rgba(0,0,0,.1) inset}
.attached.steps{margin:0;border-radius:.3125em .3125em 0 0}
.attached.steps .step:first-child{border-radius:.3125em 0 0}
.attached.steps .step:last-child{border-radius:0 .3125em 0 0}
.bottom.attached.steps{margin-top:-1px;border-radius:0 0 .3125em .3125em}
.bottom.attached.steps .step:first-child{border-radius:0 0 0 .3125em}
.bottom.attached.steps .step:last-child{border-radius:0 0 .3125em}

/*向导数量*/
.one.steps,.two.steps,.three.steps,.four.steps,.five.steps,.six.steps,.seven.steps,.eight.steps{display:block}
.one.steps>.step{width:100%}
.two.steps>.step{width:50%}
.three.steps>.step{width:33.333%}
.four.steps>.step{width:25%}
.five.steps>.step{width:20%}
.six.steps>.step{width:16.666%}
.seven.steps>.step{width:14.285%}
.eight.steps>.step{width:12.5%}

/*向导尺寸*/
.small.step,.small.steps .step{font-size:.8rem}/*小*/
.step,.steps .step{font-size:1rem}/*默认*/
.large.step,.large.steps .step{font-size:1.25rem}/*大*/

/*兼容写法
	Sample:
	<div class="steps-ie cl">
	  <a class="step-ie active" href="#">第一步<em class="arrow"></em></a>
	  <a class="step-ie" href="#">第二步<em class="arrow"></em></a>
	  <a class="step-ie" href="#">第三步<em class="arrow"></em></a>
	</div>
*/
.steps-ie,.step-ie,.step-ie .arrow{height:44px; line-height:44px}
.steps-ie{background-color:#eaf4fd; border:solid 1px #afcfcc}
.step-ie{position:relative;display:inline-block; float:left; cursor:pointer; padding:0 20px 0 40px; background:url("/appgdyinpingcom/u/res/ui/images/step_bg.png") repeat-x 0 center}
.step-ie .arrow{position:absolute;right:-21px; top:0; width:21px; height:44px; display:block; cursor:pointer; background:url("/appgdyinpingcom/u/res/ui/images/step_arrow.png") no-repeat 0 center;z-index:50}
.step-ie.active{background-image:url("/appgdyinpingcom/u/res/ui/images/step_bg-active.png"); color:#fff; z-index:100}
.step-ie.active .arrow{background-image:url("/appgdyinpingcom/u/res/ui/images/step_arrow-active.png")}

/*4.2.6 竖向导向tab导航
	Sample:
	<div class="verticalTab">
	  <a class="" href="#">导航一<em></em></a>
	  <a class="active" href="#">导航二<em></em></a>
	  <a href="#">导航三<em></em></a>
	  <a href="#">导航四<em></em></a>
	</div>
*/
.verticalTab{background:#fff url("/appgdyinpingcom/u/res/ui/images/tab_bg.png") repeat-y 0 0; width:38px}
.verticalTab a{position:relative; display:block; width:18px; height:auto; text-align:center; position:relative; padding:26px 10px 6px 10px; background:url("/appgdyinpingcom/u/res/ui/images/tabNav.png") no-repeat 0 0}
.verticalTab a em{position:absolute; left:0; bottom:-20px; width:38px; height:20px; background:url("/appgdyinpingcom/u/res/ui/images/tabNav_right.png") no-repeat 0 0; z-index:50}
.verticalTab a.active{background-image:url("/appgdyinpingcom/u/res/ui/images/tabNav-active.png"); color:#fff; z-index:99}
.verticalTab a.active em{background-image:url("/appgdyinpingcom/u/res/ui/images/tabNav_right-active.png")}

/*4.2.6 横向导向tab导航
	Sample:
	<ul class="acrossTab">
	  <li>导航一<i></i><em></em></li>
	  <li class="active">导航二<i></i><em></em></li>
	  <li>导航三<i></i><em></em></li>
	</ul>
*/
.acrossTab{height:29px; 
/*background:url("/appgdyinpingcom/u/res/ui/images/acrossTab-bg.png") repeat-x 0 0; */

padding-top:1px}
.acrossTab li,.acrossTab li em{
	background:url("/appgdyinpingcom/u/res/ui/images/acrossTab.png") no-repeat 0 0
}
.acrossTab li{position:relative;float:left; display:inline-block; height:29px; line-height:29px; font-size:12px;cursor:pointer;padding:0 30px; white-space:nowrap;color:#282828; background-position:0 0}
.acrossTab li em{position:absolute; width:23px;height:29px;right:-20px; top:0;z-index:50; background-position:right -30px}
.acrossTab li:hover{background-position:0 -60px}
.acrossTab li:hover em{background-position:right -90px}
.acrossTab li.active{background-position:0 -120px; z-index:99}
.acrossTab li.active em{background-position:right -150px}
.acrossTab li i{position:absolute; display:block; width:13px; height:13px; top:50%; margin-top:-6px; right:5px; font-size:0; line-height:0; cursor:pointer; background:url("/appgdyinpingcom/u/res/ui/images/acrossTab-close.png") no-repeat 0 0}
.acrossTab li i:hover{background-position:0 bottom}

/*4.3 下拉菜单
	Name:			mod_dropDown
	Example:		<span class="dropDown"><a class="dropDown_A" href="#">下拉菜单</a><span class="dropDown-menu"><ul><li><a href="#">菜单一</a></li><li><a href="#">菜单二</a></li></ul></span>span>
	Explain:	

*/
.dropDown{display:inline-block}
.dropDown_A{display:inline-block}
.dropDown-menu{display:none;transition: all 0.3s ease 0s}
dropDown:focus,.dropDown-menu:focus {outline:0}
.dropDown-menu li.arrow{position:absolute;display:block; width:12px; height:8px; margin-top:-13px; margin-left:45px; line-height:0;background:url("/appgdyinpingcom/u/res/ui/images/icon-jt.png") no-repeat 0 0}
/*鼠标经过*/
.dropDown.hover .dropDown_A,.dropDown.open .dropDown_A{text-decoration:none}
/*打开菜单*/
.dropDown.open{position:relative; z-index:99}
.dropDown.open a:hover{}
.dropDown.open .dropDown-menu{position:absolute;z-index:100;display:inline-block;float:left;left:0px;top: 100%;min-width:120px;margin:-1px 0 0;padding: 5px 0;background-color:#fff;background-clip: padding-box;
border:1px solid #d6d6d6;border:1px solid rgba(0,0,0,0.15);
-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);
box-shadow:0 6px 12px rgba(0,0,0,0.175)}
.dropDown.open .dropdown-menu.r {right:0;left:auto}
.dropDown.open .dropDown-menu li{float:none;display:inline}
.dropDown-menu li a{color:#666}
.dropDown.open .dropDown-menu li a{display:block;clear: both;line-height:1.428571429;padding:4px 15px;padding-right:30px;white-space:nowrap; text-align:left;font-weight: normal}
.dropDown-menu li a:hover,.dropDown-menu li a:focus{background-color:#ea5944;color:#fff; text-decoration:none}

/*禁用菜单*/
.dropDown.open .dropDown-menu .disabled a,.dropDown.open .dropdown-menu .disabled a:hover,.dropDown.open .dropdown-menu .disabled a:focus{color:#999;text-decoration:none; cursor:no-drop; background-color:transparent}
.dropDown.open .dropDown-menu li.divider{display:block;height:0px; line-height:0px;margin:9px 0;overflow:hidden; border-top:solid 1px #eee}

/*4.4 幻灯片
	Name:			module_slider
	Sample:
  <section class="slider cl has-dots">
		<a href="javascript:void(0)" class="unslider-arrow prev"></a>
		<a href="javascript:void(0)" class="unslider-arrow next"></a>
    <ul class="tabcon">
      <li><a href="#" target="_blank"><img name="" src="pic/1.png" width="300" height="150" alt=""></a></li>
      <li><a href="#" target="_blank"><img name="" src="pic/2.png" width="300" height="150" alt=""></a></li>
      <li><a href="#" target="_blank"><img name="" src="pic/3.png" width="300" height="150" alt=""></a></li>
    </ul>
  </section>
	<script type="text/javascript" src="Lib/unslider.min.js"></script> 
	<script type="text/javascript">
	$(function() {
		$('.slider').unslider({deplay:3000,fluid: true,dots: true});
		var unslider = $('.slider').unslider();
    	$('.unslider-arrow').click(function() {
        	var fn = this.className.split(' ')[1];
			unslider.data('unslider')[fn]()})});
	</script>
	Explain: 默认dots为圆点，在slider后面追加numSlider样式就变成带数字的方框，boxSlider为不带数字长方条
*/
.slider{position:relative;text-align:center; margin:0 auto}
.slider .tabcon li{float: left;overflow:hidden}
.dots{position:absolute;right:0px; width:100%;bottom:10px; text-align:center}
.dots span{display:inline-block;text-align:center;width:8px; height:8px; font-size:0px;line-height:0px;margin-right:8px;cursor:pointer; background-color:#C2C2C2;border-radius:8px}
.dots span.active{background-color:#222}
.numSlider .dots span{width:20px; height:20px; line-height:20px; font-size:13px; margin-right:10px;line-height:20px;background-color:#fff;font-family:Arial;font-weight:bold; text-indent:inherit;border-radius:0px}
.numSlider .dots span.active{background-color:#222;color:#fff}
.boxSlider .dots span{width:40px; height:10px;border-radius:0px}
.boxRadius .dots span{width:40px}

.unslider-arrow{display:block; position:absolute; top:50%; margin-top:-25px;height: 50px;width: 50px; z-index:3;opacity: 0.7;filter: alpha(opacity=70); background-color:#303030; background-image:url("/appgdyinpingcom/u/res/ui/images/unslider-arrow.png"); background-repeat:no-repeat}
.unslider-arrow:hover{opacity: 1;filter: alpha(opacity=100)}
.prev{left:0px; background-position:0 0}
.next{right:0px;background-position:right 0}
/*4.5 选项卡
	Name:			module_slider
	Sample:
	<div id="tab_demo" class="HuiTab">
      <div class="tabBar cl"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
      <div class="tabCon">内容一</div>
      <div class="tabCon">内容二</div>
      <div class="tabCon">内容三</div>
    </div>	
*/
.tabBar {border-bottom: 2px solid #222}
.tabBar span {background-color: #e8e8e8;cursor: pointer;display: inline-block;float: left;
font-weight: bold;height: 30px;line-height: 30px;padding: 0 15px}
.tabBar span.Current{background-color: #222;color: #fff}
.tabCon {display: none}
/*4.6 标签与标号
	Name:			style_label
	Example:		<span class="label label-success/label-warning/label-important/label-info/label-inverse">默认</span>
	Explain:		.label 默认/.label-success 成功/.label-warning 错误/.lable-warning 危险/.label-important 重要/.label-info 信息/.label-inverse 相反

	Name:			style_badge
	Example:		<span class="badge badge-success/badge-warning/badge-important/badge-info/badge-inverse">1</span>
	Explain:		.label 默认/.badge-success 成功/.badge-warning 错误/.badge-warning 危险/.badge-important 重要/.badge-info 信息/.badge-inverse 相反

*/
.label, .badge{display: inline-block;padding: 2px 4px;font-size: 11.844px;font-weight: bold;line-height: 14px;color: #fff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);white-space: nowrap;vertical-align: baseline;background-color: #999}
.label{border-radius: 3px}
.badge{padding-right: 9px;padding-left: 9px;border-radius: 9px}
.label:empty, .badge:empty{display: none}
a.label:hover, a.label:focus, a.badge:hover, a.badge:focus{color: #fff;text-decoration: none;cursor: pointer}

/*成功*/
.label-success, .badge-success{background-color: #0c0}
.label-success[href], .badge-success[href]{background-color: #0c0}
/*错误*/
.label-warning, .badge-warning{background-color: #f0ad4e}
.label-warning[href], .badge-warning[href]{background-color: #f0ad4e}
/*危险*/
.label-danger, .badge-danger{background-color: #d9534f}
.label-danger[href], .badge-danger[href]{background-color: #d9534f}
/*重要*/
.label-important, .badge-important{background-color: #b94a48}
.label-important[href], .badge-important[href]{background-color: #b94a48}
/*金额*/
.label-price, .badge-price{background-color: #f60}
.label-price[href], .badge-price[href]{background-color: #f60}
/*信息*/
.label-info, .badge-info{background-color: #1faef2}
.label-info[href], .badge-info[href]{background-color: #1faef2}
/*相反*/
.label-inverse, .badge-inverse{background-color: #1a1a1a}
.label-inverse[href], .badge-inverse[href]{background-color: #1a1a1a}
/*尺寸*/
.btn .label, .btn .badge{position: relative;top: -1px}
.btn-mini .label, .btn-mini .badge{top: 0}
/*4.7 缩略图
	Name:       style_img
	Example:		
	Explain:		缩略图
*/
.imgbox{}
.img{}
.img-circle{border-radius: 50%}


/*4.8 警告
	Name:			mod_Hui-alert
	Example:		
  <div class="Huialert Huialert-success/Huialert-danger/Huialert-error/Huialert-info/Huialert-block"><i class="icon-remove"></i>警告内容<ul><li>……</li></ul></div>
	Explain:		警告,使用警告框jQuery插件
*/
.Huialert{position:relative;padding:8px 35px 8px 14px;margin-bottom: 20px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);background-color: #fcf8e3;border: 1px solid #fbeed5}
.Huialert, .Huialert h4{color: #c09853}
.Huialert h4{margin: 0}
.Huialert .icon-remove{position:absolute;top:9px;right:10px;line-height: 20px;cursor:pointer; color:#000; opacity:0.2;_color:#666}
.Huialert .icon-remove.hover{color:#000;opacity:0.8}
.Huialert-success{color: #468847;background-color: #dff0d8;border-color: #d6e9c6}
.Huialert-success h4{color: #468847}
.Huialert-danger{color: #b94a48;background-color: #f2dede;border-color: #eed3d7}
.Huialert-danger h4{color: #b94a48}
.Huialert-error{color: #fff;background-color: #f37b1d;border-color: #e56c0c}
.Huialert-error h4{color: #fff}
.Huialert-info{color: #31708f;background-color: #d9edf7;border-color: #bce8f1}
.Huialert-info h4{color:#31708f}
.Huialert-block{padding-top: 14px;padding-bottom: 14px}
.Huialert-block > p, .Huialert-block > ul{margin-bottom: 0}
.Huialert-block p + p{margin-top: 5px}

/*4.9 进度条 loading
	Name:			mod_progress
	Example:
	<div class="progress"><div class="progress-bar"><span class="sr-only"></span></div></div>
	Explain:		警告,使用警告框jQuery插件
*/
.progress,.progress-bar,.sr-only{height:10px; font-size:0;line-height:0}
.progress{overflow:hidden; width:400px;-khtml-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px}
.progress-bar{width:100%;background-color:#efefef}
.sr-only{display:inline-block; background-color:#58b957}

/*4.10 对话框
	Name:			mod_modal
	Example:		
*/
.loading{height: 50px; background: url("/appgdyinpingcom/u/res/ui/images/loading_072.gif") no-repeat center}
.mask{position:fixed;top:0;left:0;z-index:999;width:100%;height:100%;background:url("/appgdyinpingcom/u/res/ui/images/backdrop.png") repeat 0 0;-moz-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in}

* html .mask{position:absolute;left:expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight)}

/*Huimodal*/
.modal-open{overflow:hidden}/*当弹出层出现时，隐藏body右侧滚动条*/
.page-overflow{margin-right:16px}/*隐藏body滚动条时，页面偏移*/
.modal-scrollable{position:fixed;top:0;right:0;bottom:0;left:0;overflow: auto}/*弹出层的最外层，全屏，用户响应点击和滚动*/
.modal-overflow .modal-scrollable{overflow-y:scroll}/*弹窗超出屏幕高度时，弹出层替代body右侧滚动条，实现弹出层的整体滚动*/
.modal-backdrop {position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1040;background-color:#000}/*默认遮罩层，全屏黑色*/
* html .modal-backdrop{position:absolute;left:expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight)}/*解决IE下 遮罩层兼容性*/
.modal-backdrop.fade {opacity:0;filter: alpha(opacity=0)}/*遮罩层失去时，透明度为0*/
.modal-backdrop,.modal-backdrop.fade.in {opacity: 0.7;filter: alpha(opacity=70)}/*遮罩层进入 0.7透明度*/

.modal.container{width: 980px}/*满页面宽度*/
.modal {position:absolute;top:50%;left:50%; width:500px;margin-left:-250px;z-index:1050;overflow: visible;background-color: #fff;background-clip: padding-box;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip:padding-box;
    -khtml-background-clip:padding-box;
    -moz-background-clip:padding-box;
    -ms-background-clip:padding-box;
    -o-background-clip:padding-box;
    background-clip:padding-box;
    border-radius:6px;
    border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999}/*弹出层，绝对定位，默认【宽度500px，高度自适应，背景白色，6px圆角，带阴影】，自定义宽度可在data-width中设置参数*/
.fade {opacity: 0;filter: alpha(opacity=0);-webkit-transition: opacity 0.2s linear;-moz-transition: opacity 0.2s linear;-o-transition: opacity 0.2s linear;transition: opacity 0.2s linear}
.fade.in {opacity: 1;filter: alpha(opacity=100)}
.modal.fade {top: -100%}/*弹出层进入动画效果*/
.modal.fade.in{top:50%}/*弹出层进入后居顶距离，配合margin-top负值，实现上下自动居中*/
.modal.modal-overflow.fade.in{top:0px}/*如果弹出层高度大于窗口，弹出窗口距顶0像素*/
.loading-spinner {position: absolute;top: 50%;left: 50%;margin: -12px 0 0 -12px}/*Ajax加载数据时loading*/
  /*弹出层header区*/
  .modal-header {padding: 9px 15px;border-bottom: 1px solid #eee; position:relative}/*弹出层头部*/
  .modal-header .close{position:absolute; right:10px; top:10px}/*关闭按钮，请调用4.1.1 按钮 .close*/
  .modal-header h3{margin:0}/*标题*/
  .modal-body {overflow-y:visible;padding: 15px} /*内容不限高度，内填充15px，不满意可自行修改*/
  .modal-form {margin-bottom: 0} /*弹出层表单*/
  /*弹出层footer区，放按钮*/
  .modal-footer {padding: 14px 15px 15px;margin-bottom: 0;text-align: right;background-color: #f5f5f5;border-top: 1px solid #ddd;*zoom: 1;border-radius: 0 0 6px 6px;box-shadow: inset 0 1px 0 #fff}
  .modal-footer:before,.modal-footer:after {display: table;content: ""}
  .modal-footer:after {clear: both}
  .modal-footer .btn + .btn {margin-left: 5px;margin-bottom: 0}
  .modal-footer .btn-group .btn + .btn {margin-left: -1px}
.modal-alert{position:fixed; width:300px;margin-left:-150px; margin-top:-30px; z-index:9999}
.modal-alert-info{padding:30px; text-align:center; font-size:14px; background-color:#fff}

.mask_box{background-image:none;display:none;z-index:99}
.hover .mask_box{position:absolute;bottom:0px; left:0px;display:block;background:url("/appgdyinpingcom/u/res/ui/images/backdrop.png") repeat 0 0;text-align:left}
.easyDialog_wrapper{width:320px; color:#444; border:3px solid rgba(0,0,0,0);border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.4); display:none}
.easyDialog_wrapper .easyDialog_content{border-radius:4px; background:#fff; border:1px solid #e5e5e5}
.easyDialog_wrapper .easyDialog_title{height:30px; line-height:30px; overflow:hidden; color:#666; padding:0 10px; font-size:14px; border-bottom:1px solid #e5e5e5; background:#f7f7f7; border-radius:4px 4px 0 0; margin:0 }
.easyDialog_wrapper .close_btn{font-family:arial; font-size:18px; _font-size:12px; font-weight:700; color:#999; text-decoration:none; float:right}
.easyDialog_wrapper .close_btn:hover{color:#333}
.easyDialog_wrapper .easyDialog_text{padding:25px 10px; font-size:13px; line-height:22px}
.easyDialog_wrapper .easyDialog_footer{padding:10px; text-align:right; *zoom:1}
.easyDialog_wrapper .easyDialog_footer:after{content:''; display:block; height:0; overflow:hidden; visibility:hidden; clear:both}
.easyDialog_wrapper .btn_highlight,.easyDialog_wrapper .btn_normal{border:1px solid; border-radius:2px; cursor:pointer;float:right; font-size:12px; padding:0 12px; height:24px; line-height:24px; margin-bottom:10px}
.easyDialog_wrapper .btn_highlight{background:#4787ed; background:-webkit-gradient(linear,center bottom,center top,from(#4787ed),to(#4d90fe)); background:-moz-linear-gradient(90deg, #4787ed, #4d90fe); border-color:#3079ed; color:#fff}
.easyDialog_wrapper .btn_normal{margin-left:10px; border-color:#c3c3c3; background:#ececec; color:#333; background:-webkit-gradient(linear,center bottom,center top,from(#ececec),to(#f4f4f4)); background:-moz-linear-gradient(90deg,#ececec,#f4f4f4)}

.modal-open .dropdown-menu {z-index: 2050}
.modal-open .dropdown.open {*z-index: 2050}
.modal-open .popover {z-index: 2060}
.modal-open .tooltip {z-index: 2070}

/*4.12 返回顶部
	Name:			mod_totop
	Level:			Global
	Example:		<a href="javascript:void(0)" class="toTop" title=backToTopTxt alt=backToTopTxt></a>
	Explain:		返回顶部
*/
.toTop{position:fixed;display:block;width:48px;height:49px;text-indent:-9999em;overflow:hidden;right:20px;visibility:visible;bottom:10px;_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);background:url("/appgdyinpingcom/u/res/ui/images/totop.png") no-repeat 0 0}
.toTop:hover{background-position:-48px 0}
/*4.13 分享到
	Name:			mod_share
	Example:
<section class="share cl">
<!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
<span class="bds_more">分享到：</span>
<a class="bds_tsina"></a>
<a class="bds_qzone"></a>
<a class="bds_tqq"></a>
<a class="bds_renren"></a>
<a class="bds_sqq"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=0" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button END -->
</section>
	Explain:		分享到 直接调用百度分享，http://share.baidu.com/code

*/
/*4.15 案例
	Name:			mod_bs-docs-example
	Example:		<div class="bs-docs-example tooltip-demo">……</div>
*/
.bs-docs-example{position:relative;*position:static;*padding-top: 19px;margin: 15px 0;padding: 39px 19px 14px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px}
.bs-docs-example:after{content: "Example";position: absolute;top: -1px;left: -1px;*position:static;padding: 3px 7px;font-size: 12px;font-weight: bold;background-color: #f5f5f5;border: 1px solid #ddd;color: #9da0a4;border-radius: 4px 0 4px 0}

/****欢迎界面****/
.hyjm-mian{
	margin-top: 0px;
	margin-right: 20px;
	margin-left: 20px;
	padding-bottom: 20px;
}
.hyjm-mian .title{
	line-height: 40px;
	font-weight: bold;
	height: 40px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DBDBDB;
	
}
.hyjm-mian .title span{font:normal 12px arial,"Sim Sun";color:#fff;line-height: 40px;padding-left:2px;background-color:#f43d39;margin-left:6px;}
.hyjm-mian .con li{
	float: left;
	width: auto;
	font-size: 12px;
	line-height: 20px;
	padding: 8px;
	min-width: 90px;
	color: #999;
}
.hyjm-mian .zm li{
	float: left;
	height: 25px;
	width:auto;
	padding-right:10px;
	padding-left:10px;
	text-align: center;
	line-height: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
	cursor:pointer;
}
.hyjm-mian .zm li.h{
	background-color: #F00;
	color:#FFF;
}
.clear{
	clear: both;
}
.bs-docs-wdzt{position:relative;*position:static;*padding-top: 19px;margin: 15px 0;padding: 39px 19px 14px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px}
.bs-docs-wdzt:after{content: "我的状态";position: absolute;top: -1px;left: -1px;*position:static;padding: 3px 7px;font-size: 16px;font-weight: bold;background-color: #f5f5f5;border: 1px solid #ddd;color: #9da0a4;border-radius: 4px 0 4px 0}
.bs-docs-kjcd{position:relative;*position:static;*padding-top: 19px;margin: 15px 0;padding: 39px 19px 14px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px}
.bs-docs-kjcd:after{content: "快捷菜单";position: absolute;top: -1px;left: -1px;*position:static;padding: 3px 7px;font-size: 16px;font-weight: bold;background-color: #f5f5f5;border: 1px solid #ddd;color: #9da0a4;border-radius: 4px 0 4px 0}
.bs-docs-yygndh{position:relative;*position:static;*padding-top: 19px;margin: 15px 0;padding: 39px 19px 14px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px}
.bs-docs-yygndh:after{content: "应用功能导航";position: absolute;top: -1px;left: -1px;*position:static;padding: 3px 7px;font-size: 16px;font-weight: bold;background-color: #f5f5f5;border: 1px solid #ddd;color: #9da0a4;border-radius: 4px 0 4px 0}
/***********/

/*4.16 滚动
	Name:			mod_rolling
	Example:		<div class="rollpicshow"><ul><li>……</li></ul></div>
*/
.marquee{height:22px;overflow:hidden;line-height:22px}
.rollpic .prev,.rollpic .next{display:block; height:38px; width:38px; cursor:pointer; float:left; background:url("/appgdyinpingcom/u/res/ui/images/unslider-arrow2.png") no-repeat 0 0; margin-top:70px}
.rollpic .prev{background-position:0 0; margin-right:5px}
.rollpic .prev:hover{background-position:0 -38px}
.rollpic .next{background-position:0 -76px;margin-left:5px}
.rollpic .next:hover{background-position:0 -114px}
.rollpicshow{float:left; border:solid 1px #ddd}
.rollpicshow li{padding:10px}
/*4.17 搜索条
	Name:			mod_searchBar
	Sample:
<div class="searchBar">
  <form class="form-search" method="post" action="">
    <input id="searchKeyword" name="searchKeyword" value="请输入搜索关键词" class="searchTxt">
    <input id="searchBtn" name="searchBtn" type="submit" value="搜索" class="searchBtn" onclick="b_onclick()">
  </form>
</div>
*/
.searchBar{z-index: 100; width:460px;height: 33px;background:url("/appgdyinpingcom/u/res/ui/images/search.gif") no-repeat 0 -48px;position:relative}
	.form-search{margin-bottom:0px}
	.searchTxt{float:left;width:350px;height:23px;line-height:23px;font-size:14px;color:#9a9a9a;margin-left:33px;margin-top:5px;border:none;background-color:#fff}
	.searchTxt.focus{color:#333}
	.searchBtn{float:right;display:block;border:none;width:73px;height:33px;cursor:pointer;text-indent:-9999px;background:url("/appgdyinpingcom/u/res/ui/images/search.gif") no-repeat right -81px}
	.searchBtn:hover{background-position:right -114px}
	/*搜索下拉提示*/
	.ac_results{position:absolute;width:386px; height:auto;border:solid 1px #890800;background-color:#fff;top:32px; left:0px; display:none}
	.ac_results ul{width:100%;list-style-position:outside;list-style:none;padding:0;margin:0}
	.ac_results li p{float:left;margin:0;padding:0;overflow:hidden}
	.ac_results li p tt{color:#666}
	.ac_results li span{margin:0;padding:0;display:inline;float:right;color:#f93;width:90px; text-align:right; overflow:hidden}
	.ac_results ul li{padding-left:5px;padding-right:5px;display:block;height:22px;line-height:22px;cursor:pointer;color:#000;font:宋体;font-size:12px}
	.ac_results ul li.hover{background-color:#fef8ec;color:#000}
		.ac_loading{background:#fff url("/appgdyinpingcom/u/res/ui/images/loading_s.gif") right center no-repeat}

.AD{text-align:center}
/*4.18.1 对联广告
	Name:			mod_AD_dual
	Sample:
	<div class="dual dual_l"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>
	<div class="dual dual_r"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>
*/
.dual{top:260px;position:absolute; width:102px; overflow:hidden; display:none; z-index:100}
.dual_l{left:6px}
.dual_r{right:6px}
.dual_con{border:#CCC solid 1px;width:100px; height:300px; overflow:hidden; background-color:#0C9}
.dual_close{width:100%;height:24px; line-height:24px; text-align:center; display:block; font-size:13px; color:#555; text-decoration:none}

/*4.19 标签*/
/*4.19.1 标签输入效果
	Name:			mod_hui-tags
	Sample:			
	<div class="hui-tags">
	  <div class="hui-tags-editor cl"><i class="icon-tags"></i>
		<span class="hui-tags-token">Hui前端框架</span>
		<span class="hui-tags-token">CSS3</span>
		<span class="hui-tags-token">HTML5</span>
		<div class="hui-tags-iptwrap"><input type="text" class="hui-tags-input" maxlength="20" value=""><lable class="hui-tags-lable">添加相关标签，用空格或回车分隔</lable></div>
	  </div>
	  <div class="hui-tags-list">
	    <div class="hui-notag">暂无常用标签</div>
		<div class="hui-tags-has"><span>前端框架</span> <span>前端开发</span> <span>H-ui</span></div>
	  </div>
	</div>
*/
.hui-tags{border:solid 1px #dedede; padding:0 10px}
	.hui-tags-editor{position:relative; padding:10px 0 10px 24px}
	.hui-tags-editor .icon-tags{position:absolute; left:0; top:14px}
		.hui-tags-token{color:#aaa; float:left; font-size:12px; height:20px; line-height:20px; margin-right:8px; padding:0 1px; white-space:nowrap; cursor:pointer}
		.hui-tags-token:before{content:"#"}
		.hui-tags-token:hover{text-decoration:line-through}
		.hui-tags-iptwrap{position:relative; float:left}
			.hui-tags-input{position:relative;height:20px;min-width:60px; border:0 none; vertical-align:top;line-height:20px; color:#333;z-index:2;background: url("/appgdyinpingcom/u/res/ui/images/empty.png") repeat scroll 0 0; display:inline-block; width:100%}
			.hui-tags-lable{position:absolute; top:0; left:2px; width:240px; height:20px; line-height:20px; font-size:14px; overflow:hidden; z-index:1; color:#ccc}
		.hui-tags-list{padding:0 0 10px 0; display:none}
	.hui-notag{font-size:12px}
	.hui-tags-has span{cursor:pointer; font-size:12px; white-space:nowrap; margin-right:10px}

/*4.19.2 标签混排效果
	Name:			mod_tags
	Sample:			<div class="pd-10 tags"><a href="http://www.h-ui.net/">H-ui前端框架</a>……</div>
	
*/
.tags a{height:26px; line-height:26px;padding-right:6px}
	.tags0{}
	.tags1{color:#C00; font-size:24px}
	.tags2{color:#030; font-size:16px}
	.tags3{color:#00F}
	.tags4{font-size:16px}
	.tags5{color:#C00; font-size:20px}
	.tags6{color:#F06 font-size:20px}
	.tags7{color:#030; font-weight:bold; font-size:18px}
	.tags8{color:#F06; font-weight:bold}
	.tags9{color:#C00; font-weight:bold;font-size:16px}
.tags a:hover{color:#F00; text-decoration:underline}

/*4.19.3 tag云标签*/
#tagyun {position:relative}
#tagyun a {position:absolute;top:0px;left:0px;font-weight:bold;text-decoration:none;padding:3px 6px}

/*4.20 折叠
	Name:			mod_Huifold
	Sample:	
	<ul id="" class="Huifold">
	  <li class="item"><h4>标题<b>+</b></h4><div class="info">内容 </div></li>
	  ……
	</ul>
*/
.Huifold .item{position:relative}
.Huifold .item h4{margin:0;font-weight:bold;position:relative;border-top: 1px solid #fff;font-size:15px;line-height:22px;padding:7px 10px;background-color:#eee;cursor:pointer;padding-right:30px}
.Huifold .item h4 b{position:absolute;display: block; cursor:pointer;right:10px;top:7px;width:16px;height:16px; text-align:center; color:#666}
.Huifold .item .info{display:none;padding:10px}

/*4.21 遮罩条
	Name:			mod_maskBar
*/
.maskBar{position:absolute;width:100%; height:auto;left:0; bottom:-60px; right:0;background-color:#000;z-index:2; color:#fff!important;opacity:0.6;filter:alpha(opacity=60)}
.maskWraper{position:relative; overflow:hidden}
.maskWraper.hover .maskBar{bottom:0px;
  transition: bottom 200ms;
  -moz-transition: bottom 200ms; /* Firefox 4 */
  -webkit-transition: bottom 200ms; /* Safari 和 Chrome */
  -o-transition: bottom 200ms; /* Opera */
}
.maskBox{position:absolute;width:100%; height:100%;top:0;left:0; bottom:0;right:0;z-index:2;background-color:#000; color:#fff!important;opacity:0;filter:alpha(opacity=0)}
.maskWraper.hover .maskBox{opacity:0.2;filter:alpha(opacity=20);
  transition: opacity 500ms;
  -moz-transition: opacity 500ms; /* Firefox 4 */
  -webkit-transition: opacity 500ms; /* Safari 和 Chrome */
  -o-transition: opacity 500ms; /* Opera */
}

/*4.22 评论列表
	Name:			mod_comment
	Sample:		
	<ul class="commentList">
	  <li class="item cl">
	    <a href="#"><i class="avatar avatar-L radius"><img alt="" src="static/h-ui/images/avatar-default-S.gif"></i></a>
		<div class="comment-main">
		  <header class="comment-header">
		    <div class="comment-meta"><a class="comment-author" href="#">辉哥</a> 评论于 <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time></div>
	      </header>
		  <div class="comment-body"><p><a href="#">@某人</a> 你是猴子派来的救兵吗？</p></div></div>
	  </li>
	</ul>
*/
.commentList .item{list-style: none outside none;margin: 1.6rem 0 0}
.commentList .avatar{border: 1px solid transparent;float: left;}
	.comment-main{position:relative;margin-left:64px;border:1px solid #dedede;border-radius:2px}
	.comment-main:before,.comment-main:after{position:absolute;top:11px;left:-16px;right:100%;width:0;height:0;display:block;content:" ";border-color:transparent;border-style:solid solid outset;pointer-events:none}
	.comment-main:before{border-right-color:#dedede;border-width:8px}
	.comment-main:after{border-width:7px;border-right-color:#f8f8f8;margin-top:1px;margin-left:2px}
		.comment-header{padding:10px 15px;background:#f8f8f8;border-bottom:1px solid #eee}
		.comment-title{margin:0 0 8px 0;font-size:1.6rem;line-height:1.2}
		.comment-meta{font-size:13px;color:#999;line-height:1.2}
		.comment-meta a{color:#999}
		.comment-author{font-weight:700;color:#999}
		.comment-body{padding:15px;overflow:hidden}
		.comment-body>:last-child{margin-bottom:0}
.commentList .comment-flip .avatar {float: right}
  .comment-flip .comment-main{margin-left: 0; margin-right: 64px}
  .comment-flip .comment-main:before {border-left-color: #dedede;border-right-color: transparent}
  .comment-flip .comment-main:before, .comment-flip .comment-main:after {left: 100%;position: absolute;right: -16px}
  .comment-flip .comment-main:after {border-left-color: #f8f8f8;border-right-color: transparent;margin-left: auto;margin-right: 2px}

/*5 页面
	Name:			page
*/
/*5.1 博客列表页*/
.page-blog-list{}
/*5.2 博客详情页*/
.page-blog-show{}
/*5.3 关于我们页*/
.page-about-show{}
/*5.4 帮助列表页*/
.page-help-list{}
/*5.5 帮助详情页*/
.page-help-show{}
/*5.6 错误页-404*/
.page-404{}
/*5.7 友情链接页*/
.page-flink{}

/*媒体适配*/
/*大屏幕*/
@media (min-width: 1200px){
  
}
/*横向平板*/
@media (min-width: 768px) and (max-width: 992px){
  
}
/*横向手机 竖向平板*/
@media (max-width: 767px) {
	img{max-width:100%}
	.tlist li{position:relative; font-size:18px;border-bottom: 1px solid #eee}
	.tlist li a{display:block;padding:0.7em 30px 0.7em 12px}
	.dot_1{padding-left:0px}
	.night .tlist li{border-bottom: 1px solid #1F1F1F}
	.tlist .time{display:none}
	.tlist i {background:url("/appgdyinpingcom/u/res/ui/images/article/arrow.png") no-repeat 0 0; background-size:9px auto; height: 15px;margin-top: -7px;position: absolute;right:10px;top: 50%;width: 9px}
	.night .tlist i{background-position:0 -75px}
	.mainnav li{font-size:1.125em}
}
/*竖向手机*/
@media (max-width: 480px) {
	.mainnav li{text-align:center}
	.mainnav li{width:20%}
	.mainnav li a{padding:0; width:100%}
	.content img,.thumbImage img{max-width:100%!important; height:auto!important;width:expression(this.width > 320 ? "320px" : this.width)!important}
	.thumbImage {margin: auto;width: 320px}
	*html .content img,*html .thumbImage img{width:expression(this.width>320&&this.width>this.height?320:auto)}
}
/*横屏模式*/
@media screen and (orientation:portrait) {

}