@charset "utf-8";
*{word-wrap:break-word}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}
ul,ol,dl{list-style-type:none}
html,body{*position:static}
html{font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button{overflow: visible;vertical-align:middle;outline:none}
input[type="submit"],input[type="reset"],input[type="button"],input[type="text"],input[type="password"]{-webkit-appearance:none;outline:none}
body,th,td,button,input,select,textarea{font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";font-size:12px;color: #333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
@media ( max-width : 767px) {
html{ overflow-y:auto}
body,th,td,button,input,select,textarea{ font-size:14px}
}
body{line-height:1.6; position:relative}
h1,h2,h3,h4,h5,h6{font-size:100%}
a,area{outline:none;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}
button,input[type="button"], input[type="submit"] {line-height:normal !important}
/*img*/
img{border:0;vertical-align:middle}
a img,img{-ms-interpolation-mode:bicubic}
/*IE下a:hover 背景闪烁*/
*html{overflow:-moz-scrollbars-vertical;zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))}
/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend{display:block;margin:0;padding:0}time{display:inline}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5}
legend small{font-size:15px;color:#999}
svg:not(:root) {overflow: hidden}
fieldset {border-width:0;padding: 0.35em 0.625em 0.75em;margin: 0 2px;border: 1px solid #c0c0c0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto}
input[type="search"] {-webkit-appearance: textfield; /* 1 */}
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:"\20";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}
/*2.1 栅格系统
Name: style_container
Example:
Explain: 栅格系统
*/
/*2.1 响应式栅格系统*/
.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}
.container-fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto}
@media ( min-width : 992px) {
.container{width: 960px}
}
@media ( min-width : 1200px) {
.container {width: 1170px}
}
@media ( min-width : 1300px) {
.container {width: 1270px}
}
@media print{
.container{width:auto}
}
.row.cl{}
.row{box-sizing:border-box; margin-left:-15px; margin-right:-15px}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {min-height: 1px;position: relative; padding-left:15px; padding-right:15px; box-sizing:border-box;-webkit-transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
transition:all 0.3s ease-in}
.col-1{width:8.33333%}
.col-2{width:16.66667%}
.col-3{width:25%}
.col-4{width:33.33333%}
.col-5{width:41.66667%}
.col-6{width:50%}
.col-7{width:58.33333%}
.col-8{width:66.66667%}
.col-9{width:75%}
.col-10{width:83.33333%}
.col-11{width:91.66667%}
.col-12{width:100%}
.col-offset-0{margin-left:0}
.col-offset-1{margin-left:8.33333%}
.col-offset-2{margin-left:16.66667%}
.col-offset-3{margin-left:25%}
.col-offset-4{margin-left:33.33333%}
.col-offset-5{margin-left:41.66667%}
.col-offset-6{margin-left:50%}
.col-offset-7{margin-left:58.33333%}
.col-offset-8{margin-left:66.66667%}
.col-offset-9{margin-left:75%}
.col-offset-10{margin-left:83.33333%}
.col-offset-11{margin-left:91.66667%}
.col-push-0{position:relative;left:0;right:auto}
.col-pull-0{right:0;left:auto}
.col-push-1{left:8.33333%;right:auto}
.col-pull-1{right:8.33333%;left:auto}
.col-push-2{left:16.66667%;right:auto}
.col-pull-2{right:16.66667%;left:auto}
.col-push-3{left:25%;right:auto}
.col-pull-3{right:25%;left:auto}
.col-push-4{left:33.33333%;right:auto}
.col-pull-4{right:33.33333%;left:auto}
.col-push-5{left:41.66667%;right:auto}
.col-pull-5{right:41.66667%;left:auto}
.col-push-6{left:50%;right:auto}
.col-pull-6{right:50%;left:auto}
.col-push-7{left:58.33333%;right:auto}
.col-pull-7{right:58.33333%;left:auto}
.col-push-8{left:66.66667%;right:auto}
.col-pull-8{right:66.66667%;left:auto}
.col-push-9{left:75%;right:auto}
.col-pull-9{right:75%;left:auto}
.col-push-10{left:83.33333%;right:auto}
.col-pull-10{right:83.33333%;left:auto}
.col-push-11{left:91.66667%;right:auto}
.col-pull-11{right:91.66667%;left:auto}
/*局部模块平分*/
.col-1-1{ width:100%}
.col-2-1{ width:50%}
.col-3-1{ width:33.333333%}
.col-3-2{ width:66.666667%}
.col-4-1{ width:25%}
.col-4-3{ width:75%}
.col-5-1{ width:20%}
.col-5-2{ width:40%}
.col-5-3{ width:60%}
.col-5-4{ width:80%}
.col-6-1{ width:16.666667%}
.col-6-5{ width:83.333333%}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left}
.col-xs-12 {width: 100%}
.col-xs-11 {width: 91.66666667%}
.col-xs-10 {width: 83.33333333%}
.col-xs-9 {width: 75%}
.col-xs-8 {width: 66.66666667%}
.col-xs-7 {width: 58.33333333%}
.col-xs-6 {width: 50%}
.col-xs-5 {width: 41.66666667%}
.col-xs-4 {width: 33.33333333%}
.col-xs-3 {width: 25%}
.col-xs-2 {width: 16.66666667%}
.col-xs-1 {width: 8.33333333%}
.col-xs-pull-12 {right: 100%}
.col-xs-pull-11 {right: 91.66666667%}
.col-xs-pull-10 {right: 83.33333333%}
.col-xs-pull-9 {right: 75%}
.col-xs-pull-8 {right: 66.66666667%}
.col-xs-pull-7 {right: 58.33333333%}
.col-xs-pull-6 {right: 50%}
.col-xs-pull-5 {right: 41.66666667%}
.col-xs-pull-4 {right: 33.33333333%}
.col-xs-pull-3 {right: 25%}
.col-xs-pull-2 {right: 16.66666667%}
.col-xs-pull-1 {right: 8.33333333%}
.col-xs-pull-0 {right: auto}
.col-xs-push-12 {left: 100%}
.col-xs-push-11 {left: 91.66666667%}
.col-xs-push-10 {left: 83.33333333%}
.col-xs-push-9 {left: 75%}
.col-xs-push-8 {left: 66.66666667%}
.col-xs-push-7 {left: 58.33333333%}
.col-xs-push-6 {left: 50%}
.col-xs-push-5 {left: 41.66666667%}
.col-xs-push-4 {left: 33.33333333%}
.col-xs-push-3 {left: 25%}
.col-xs-push-2 {left: 16.66666667%}
.col-xs-push-1 {left: 8.33333333%}
.col-xs-push-0 {left: auto}
.col-xs-offset-12 {margin-left: 100%}
.col-xs-offset-11 {margin-left: 91.66666667%}
.col-xs-offset-10 {margin-left: 83.33333333%}
.col-xs-offset-9 {margin-left: 75%}
.col-xs-offset-8 {margin-left: 66.66666667%}
.col-xs-offset-7 {margin-left: 58.33333333%}
.col-xs-offset-6 {margin-left: 50%}
.col-xs-offset-5 {margin-left: 41.66666667%}
.col-xs-offset-4 {margin-left: 33.33333333%}
.col-xs-offset-3 {margin-left: 25%}
.col-xs-offset-2 {margin-left: 16.66666667%}
.col-xs-offset-1 {margin-left: 8.33333333%}
.col-xs-offset-0 {margin-left: 0}
@media (max-width:767px){
.responsive [class^="col-"],.responsive [class*=" col-"]{float:none!important;width:auto!important}
.responsive [class^="col-offset-"],.responsive [class*=" col-offset-"]{ margin-left:0!important}
}
@media(min-width:768px){
.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}
.col-sm-12{width:100%}
.col-sm-11{width:91.66666666666666%}
.col-sm-10{width:83.33333333333334%}
.col-sm-9{width:75%}
.col-sm-8{width:66.66666666666666%}
.col-sm-7{width:58.333333333333336%}
.col-sm-6{width:50%}
.col-sm-5{width:41.66666666666667%}
.col-sm-4{width:33.33333333333333%}
.col-sm-3{width:25%}
.col-sm-2{width:16.666666666666664%}
.col-sm-1{width:8.333333333333332%}
.col-sm-pull-12{right:100%}
.col-sm-pull-11{right:91.66666666666666%}
.col-sm-pull-10{right:83.33333333333334%}
.col-sm-pull-9{right:75%}
.col-sm-pull-8{right:66.66666666666666%}
.col-sm-pull-7{right:58.333333333333336%}
.col-sm-pull-6{right:50%}
.col-sm-pull-5{right:41.66666666666667%}
.col-sm-pull-4{right:33.33333333333333%}
.col-sm-pull-3{right:25%}
.col-sm-pull-2{right:16.666666666666664%}
.col-sm-pull-1{right:8.333333333333332%}
.col-sm-pull-0{right:0}
.col-sm-push-12{left:100%}
.col-sm-push-11{left:91.66666666666666%}
.col-sm-push-10{left:83.33333333333334%}
.col-sm-push-9{left:75%}
.col-sm-push-8{left:66.66666666666666%}
.col-sm-push-7{left:58.333333333333336%}
.col-sm-push-6{left:50%}
.col-sm-push-5{left:41.66666666666667%}
.col-sm-push-4{left:33.33333333333333%}
.col-sm-push-3{left:25%}
.col-sm-push-2{left:16.666666666666664%}
.col-sm-push-1{left:8.333333333333332%}
.col-sm-push-0{left:0}
.col-sm-offset-12{margin-left:100%}
.col-sm-offset-11{margin-left:91.66666666666666%}
.col-sm-offset-10{margin-left:83.33333333333334%}
.col-sm-offset-9{margin-left:75%}
.col-sm-offset-8{margin-left:66.66666666666666%}
.col-sm-offset-7{margin-left:58.333333333333336%}
.col-sm-offset-6{margin-left:50%}
.col-sm-offset-5{margin-left:41.66666666666667%}
.col-sm-offset-4{margin-left:33.33333333333333%}
.col-sm-offset-3{margin-left:25%}
.col-sm-offset-2{margin-left:16.666666666666664%}
.col-sm-offset-1{margin-left:8.333333333333332%}
.col-sm-offset-0{margin-left:0}
}
@media(min-width:992px){
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}
.col-md-12{width:100%}
.col-md-11{width:91.66666666666666%}
.col-md-10{width:83.33333333333334%}
.col-md-9{width:75%}
.col-md-8{width:66.66666666666666%}
.col-md-7{width:58.333333333333336%}
.col-md-6{width:50%}
.col-md-5{width:41.66666666666667%}
.col-md-4{width:33.33333333333333%}
.col-md-3{width:25%}
.col-md-2{width:16.666666666666664%}
.col-md-1{width:8.333333333333332%}
.col-md-pull-12{right:100%}
.col-md-pull-11{right:91.66666666666666%}
.col-md-pull-10{right:83.33333333333334%}
.col-md-pull-9{right:75%}
.col-md-pull-8{right:66.66666666666666%}
.col-md-pull-7{right:58.333333333333336%}
.col-md-pull-6{right:50%}
.col-md-pull-5{right:41.66666666666667%}
.col-md-pull-4{right:33.33333333333333%}
.col-md-pull-3{right:25%}
.col-md-pull-2{right:16.666666666666664%}
.col-md-pull-1{right:8.333333333333332%}
.col-md-pull-0{right:0}
.col-md-push-12{left:100%}
.col-md-push-11{left:91.66666666666666%}
.col-md-push-10{left:83.33333333333334%}
.col-md-push-9{left:75%}
.col-md-push-8{left:66.66666666666666%}
.col-md-push-7{left:58.333333333333336%}
.col-md-push-6{left:50%}
.col-md-push-5{left:41.66666666666667%}
.col-md-push-4{left:33.33333333333333%}
.col-md-push-3{left:25%}
.col-md-push-2{left:16.666666666666664%}
.col-md-push-1{left:8.333333333333332%}
.col-md-push-0{left:0}
.col-md-offset-12{margin-left:100%}
.col-md-offset-11{margin-left:91.66666666666666%}
.col-md-offset-10{margin-left:83.33333333333334%}
.col-md-offset-9{margin-left:75%}
.col-md-offset-8{margin-left:66.66666666666666%}
.col-md-offset-7{margin-left:58.333333333333336%}
.col-md-offset-6{margin-left:50%}
.col-md-offset-5{margin-left:41.66666666666667%}
.col-md-offset-4{margin-left:33.33333333333333%}
.col-md-offset-3{margin-left:25%}
.col-md-offset-2{margin-left:16.666666666666664%}
.col-md-offset-1{margin-left:8.333333333333332%}
.col-md-offset-0{margin-left:0}
}
@media(min-width:1200px){
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}
.col-lg-12{width:100%}
.col-lg-11{width:91.66666666666666%}
.col-lg-10{width:83.33333333333334%}
.col-lg-9{width:75%}
.col-lg-8{width:66.66666666666666%}
.col-lg-7{width:58.333333333333336%}
.col-lg-6{width:50%}
.col-lg-5{width:41.66666666666667%}
.col-lg-4{width:33.33333333333333%}
.col-lg-3{width:25%}
.col-lg-2{width:16.666666666666664%}
.col-lg-1{width:8.333333333333332%}
.col-lg-pull-12{right:100%}
.col-lg-pull-11{right:91.66666666666666%}
.col-lg-pull-10{right:83.33333333333334%}
.col-lg-pull-9{right:75%}
.col-lg-pull-8{right:66.66666666666666%}
.col-lg-pull-7{right:58.333333333333336%}
.col-lg-pull-6{right:50%}
.col-lg-pull-5{right:41.66666666666667%}
.col-lg-pull-4{right:33.33333333333333%}
.col-lg-pull-3{right:25%}
.col-lg-pull-2{right:16.666666666666664%}
.col-lg-pull-1{right:8.333333333333332%}
.col-lg-pull-0{right:0}
.col-lg-push-12{left:100%}
.col-lg-push-11{left:91.66666666666666%}
.col-lg-push-10{left:83.33333333333334%}
.col-lg-push-9{left:75%}
.col-lg-push-8{left:66.66666666666666%}
.col-lg-push-7{left:58.333333333333336%}
.col-lg-push-6{left:50%}
.col-lg-push-5{left:41.66666666666667%}
.col-lg-push-4{left:33.33333333333333%}
.col-lg-push-3{left:25%}
.col-lg-push-2{left:16.666666666666664%}
.col-lg-push-1{left:8.333333333333332%}
.col-lg-push-0{left:0}
.col-lg-offset-12{margin-left:100%}
.col-lg-offset-11{margin-left:91.66666666666666%}
.col-lg-offset-10{margin-left:83.33333333333334%}
.col-lg-offset-9{margin-left:75%}
.col-lg-offset-8{margin-left:66.66666666666666%}
.col-lg-offset-7{margin-left:58.333333333333336%}
.col-lg-offset-6{margin-left:50%}
.col-lg-offset-5{margin-left:41.66666666666667%}
.col-lg-offset-4{margin-left:33.33333333333333%}
.col-lg-offset-3{margin-left:25%}
.col-lg-offset-2{margin-left:16.666666666666664%}
.col-lg-offset-1{margin-left:8.333333333333332%}
.col-lg-offset-0{margin-left:0}
}
/*2.2 响应式隐藏显示
Name: style_Layout
Explain: 左右两栏|左中右三栏|上中下
Last Modify: guojunhui
*/
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important}
@media ( max-width : 767px) {
.visible-xs {display: block !important}
table.visible-xs {display: table}
tr.visible-xs {display: table-row !important}
th.visible-xs,td.visible-xs {display: table-cell !important}
.hidden-xs {display: none !important}
.visible-xs-block {display: block !important}
.visible-xs-inline {display: inline !important}
.visible-xs-inline-block {display: inline-block !important}
}
@media ( min-width : 768px) and (max-width: 991px) {
.visible-sm {display: block !important}
table.visible-sm {display: table}
tr.visible-sm {display: table-row !important}
th.visible-sm,td.visible-sm {display: table-cell !important}
.hidden-sm {display: none !important}
.visible-sm-block {display: block !important}
.visible-sm-inline {display: inline !important}
.visible-sm-inline-block {display: inline-block !important}
}
@media ( min-width : 992px) and (max-width: 1199px) {
.visible-md {display: block !important}
table.visible-md {display: table}
tr.visible-md {display: table-row !important}
th.visible-md,td.visible-md {display: table-cell !important}
.hidden-md {display: none !important}
.visible-md-block {display: block !important}
.visible-md-inline {display: inline !important}
.visible-md-inline-block {display: inline-block !important}
}
@media ( min-width : 1200px) {
.visible-lg {display: block !important}
table.visible-lg {display: table}
tr.visible-lg {display: table-row !important}
th.visible-lg,td.visible-lg {display: table-cell !important}
.hidden-lg {display: none !important}
.visible-lg-block {display: block !important}
.visible-lg-inline {display: inline !important}
.visible-lg-inline-block {display: inline-block !important}
}
.visible-print {display: none !important}
.visible-print-block {display: none !important}
.visible-print-inline {display: none !important}
.visible-print-inline-block {display: none !important}
@media print {
.visible-print {display: block !important}
table.visible-print {display: table}
tr.visible-print {display: table-row !important}
th.visible-print,td.visible-print {display: table-cell !important}
.visible-print-block {display: block !important}
.visible-print-inline {display: inline !important}
.visible-print-inline-block {display: inline-block !important}
.hidden-print {display: none !important}
}
/*2.3 常用布局
Name: style_Layout
Explain: 左右两栏|左中右三栏|上中下
Last Modify: guojunhui
*/
.Hui-wraper,.wp{margin-left:auto;margin-right:auto;text-align:left}
.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}
@media (max-width: 1000px) {
.Hui-wraper,.wp,{ width:auto!important;padding:0 15px!important}
}
@media print{
.Hui-wraper{width:auto}
}
/*3.0 基础样式*/
/*3.1 排版*/
/*3.1.1 标题
Example：
h1. 大标题小标题
h2. 大标题小标题
h3. 大标题小标题
h4. 大标题小标题
h5. 大标题小标题
h6. 大标题小标题
*/
h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;color:inherit}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small{font-weight:400;line-height:1;color:#999}
h1,h2,h3{padding-top:20px;padding-bottom:10px}
h1 small,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:
这是段落，向下10像素间距
小型文本，是父容器字体大小的85%
重要文本，加粗显示
被强调的文本，斜体显示
带下划线的文本
引用
突出显示文本
带删除线的文本
预格式化的文本
*/
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="text-l|text-r|text-c|va-t|va-m|va-b"
Explain: .text-水平对齐 （.text-l左对齐|.text-r右对齐|.text-c居中对齐）
.va-上下对齐 （.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐）
*/
.text-l{text-align:left}.text-r{text-align:right}.text-c{text-align:center}
.va *{vertical-align:sub!important;*vertical-align:middle!important;_vertical-align:middle!important}
.va-t{vertical-align:top!important}.va-m{vertical-align:middle!important}.va-b{vertical-align:bottom!important}
/*3.1.4 定位
Name: 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,.f-l{float:left!important;_display:inline}
.r,.f-r{float:right!important;_display:inline}
[class*="span"].r,
[class*="span"].f-r{float:right}
/*控制元素对定位的位置：居左|居右|j居上|居下*/
.pos-left{left:0; right:auto}
.pos-right{right:0; left:auto}
.pos-top{top:0; bottom:auto}
.pos-bottom{top:auto; bottom:0}
/*3.1.6 文字单行溢出省略号
Name: 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:0; line-height:0; border-top: solid 1px #eee; 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}.mb-50{margin-bottom:50px}
.ml-5{margin-left:5px}.ml-10{margin-left:10px}.ml-15{margin-left:15px}.ml-20{margin-left:20px}.ml-30{margin-left:30px}.ml-40{margin-left:40px}.ml-50{margin-left:50px}
.mr-5{margin-right:5px}.mr-10{margin-right:10px}.mr-15{margin-right:15px}.mr-20{margin-right:20px}.mr-30{margin-right:30px}.mr-40{margin-right:40px}.mr-50{margin-right:50px}
/*3.1.9 内填充
Name: style_padding
Example: class="pt-5|pt-10|……"
Explain: .pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充
*/
.pt-5{padding-top:5px}.pt-10{padding-top:10px}.pt-15{padding-top:15px}.pt-20{padding-top:20px}.pt-25{padding-top:25px}.pt-30{padding-top:30px}
.pb-5{padding-bottom:5px}.pb-10{padding-bottom:10px}.pb-15{padding-bottom:15px}.pb-20{padding-bottom:20px}.pb-25{padding-bottom:25px}.pb-30{padding-bottom:30px}
.pl-5{padding-left:5px}.pl-10{padding-left:10px}.pl-15{padding-left:15px}.pl-20{padding-left:20px}.pl-25{padding-left:25px}.pl-30{padding-left:30px}
.pr-5{padding-right:5px}.pr-10{padding-right:10px}.pr-15{padding-right:15px}.pr-20{padding-right:20px}.pr-25{padding-right:25px}.pr-30{padding-right:30px}
.pd-5{padding:5px}.pd-10{padding:10px}.pd-15{padding:15px}.pd-20{padding:20px}.pd-25{padding:25px}.pd-30{padding:30px}.pd-40{padding:40px}
/*3.1.10 边框，css3圆角
Name: style-border
Example: class="bk_gray radius"
Explain: .bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
*/
.bk-gray{border:solid 1px #eee}
.radius{border-radius:4px}
.size-MINI.radius{ border-radius:3px}
.size-L.radius{ border-radius:5px}
.size-XL.radius{ border-radius:6px}
.round{border-radius:50%; overflow:hidden}
/*3.1.11 css3阴影
Name: style_shadow
Example: class="box_shadow|text-shadow"
Explain: box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
text-shadow 文字阴影
*/
.box-shadow{-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.text-shadow{-webkit-text-shadow:0 0 2px rgba(0,0,0,0.2);text-shadow:0 0 2px rgba(0,0,0,0.2)}
/*3.1.12 行内分割竖线
Name: style_pipe
Example: |
*/
.pipe{margin:0 5px;color:#CCC;font-size:10px!important}
/*3.1.13 文字尺寸
Name: style_font-size
Example: class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
Explain: 12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体
*/
.f-12{font-size:12px}.f-14{font-size:14px}.f-16{font-size:16px}.f-18{font-size:18px}.f-20{font-size:20px}.f-22 { font-size: 22px }.f-24{font-size:24px}.f-26{font-size:26px}.f-28{font-size:28px}.f-30{font-size:30px}
/*3.1.14 文字行距
Name: mod_line-height
Example: class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
Explain: 16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高
*/
.lh-16{line-height:16px}.lh-18{line-height:18px}.lh-20{line-height:20px}.lh-22{line-height:22px}.lh-24{line-height:24px}.lh-26{line-height:26px}.lh-28{line-height:28px}.lh-30{line-height:30px}
/*3.1.15 文字颜色
Name: style_color
Example: class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange"
Explain: 主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色
*/
/*全局默认链接颜色*/
body{ background-color:#fff; color:#333}
.bg-fff{ background-color:#fff}
a{color:#333}
a:hover,.active a{color:#06c}
/*主要颜色*/
.c-primary,.c-primary a,a.c-primary{color:#5a98de}
.c-primary a:hover,a.c-primary:hover{ color:#5a98de}
/*次主色*/
.c-secondary,.c-secondary a,a.c-secondary{color:#555}
.c-secondary a:hover,a.c-secondary:hover{ color:#555}
/*强调色—成功*/
.c-success,.c-success a,a.c-success{color:#5eb95e}
.c-success a:hover,a.c-success:hover{ color:#5eb95e}
/*强调色—危险*/
.c-danger,.c-danger a,a.c-danger{color:#dd514c}
.c-danger a:hover,a.c-danger:hover{ color:#dd514c}
/*强调色—警告*/
.c-warning,.c-warning a,a.c-warning{color:#f37b1d}
.c-warning a:hover,a.c-warning:hover{ color:#f37b1d}
/*强调色—错误*/
.c-error,.c-error a,a.c-error{color:#c00}
.c-error a:hover,a.c-error:hover{ color:#c00}
/*辅助色—浅黑*/
.c-333,.c-333 a,a.c-333{color:#333}
.c-333 a:hover,a.c-333:hover{ color:#333}
/*辅助色—灰色*/
.c-666,.c-666 a,a.c-666{color:#666}
.c-666 a:hover,a.c-666:hover{ color:#666}
.c-999,.c-999 a,a.c-999{color:#999}
.c-999 a:hover,a.c-999:hover{color:#999}
/*标准色—红色*/
.c-red,.c-red a,a.c-red{color:red}
.c-red a:hover,a.c-red:hover{ color:red}
/*标准色—绿色*/
.c-green,.c-green a,a.c-green{color:green}
.c-red a:hover,a.c-red:hover{color:green}
/*标准色—蓝色*/
.c-blue,.c-blue a,a.c-blue{color:blue}
.c-blue a:hover,a.c-blue:hover{color:blue}
/*标准色—白色*/
.c-white,.c-white a,a.c-white{color:white}
.c-white a:hover,a.c-white:hover{color:white}
/*标准色—黑色*/
.c-black,.c-black a{color:black}
.c-black a:hover,a.c-black:hover{color:black}
/*标准色—橙色*/
.c-orange,.c-orange a,a.c-orange{color:orange}
.c-orange a:hover,a.c-orange:hover{color:orange}
/*3.1.17 缩略语
Example: UI
Explain:
*/
abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}
abbr.initialism{font-size:90%;text-transform:uppercase}
/*3.1.18 地址
Example: 北京市海淀区上地……
Explain:
*/
address{display:block;margin-bottom:20px;font-style:normal;line-height:20px}
/*3.1.19 引用
Example: 这是引用的内容
Explain:
*/
blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #eee}
blockquote p{margin-bottom:0;font-size:17.5px;font-weight:300;line-height:1.25}
blockquote small{display:block;line-height:20px;color:#999}
blockquote 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: 2 2
Explain: 上标|下标
*/
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-0.5em}sub{bottom:-0.25em}
/*3.1.21 内容样式
Name: style_content
Example:
Explain: 内容样式
*/
.content{position:relative;font-size:17px;line-height:1.8;overflow:hidden;text-align:left;word-break: break-all;word-wrap: break-word}
.content h3{font-size:18px}
.content h4{font-size:16px}
.content p{margin-bottom: 1.5rem;text-align: justify;word-break:break-all}
.content p.text-c{ text-align:center}
.indent{ text-indent:2em}
.content img{max-width:100%}
.content ul{text-indent:2em}
@media (max-width: 767px) {
.content{ font-size:16px}
}
@media (max-width: 480px) {
.content img{max-width:100%!important; height:auto!important;width:expression(this.width > 320 ? "320px" : this.width)!important}
*html .content img{width:expression(this.width>320&&this.width>this.height?320:auto)}
}
/*3.1.22 列表
Name: style_ulolli
Example:
- 无序列表
- 无序列表
- 无序列表
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}
.list-view > .item{ padding:10px; position:relative; overflow:hidden}/*禁止换行*/
.list-view > .item .date{font-size:12px; font-family:Arial; color:#999}
/*横向手机 竖向平板*/
@media (max-width: 767px) {
.list-view > .item{ font-size:18px; padding:11px 15px;border-bottom: 1px solid #eee}
.list-view > .item > a{display:block; margin:-11px -15px}
.night .list-view > .item{border-bottom: 1px solid #1F1F1F}
.list-view > .item .date{display:none}
.list-view > .item .Hui-iconfont {background-size:9px auto;margin-top:-7px;position: absolute;right:15px;top: 50%}
}
/*排行榜*/
/*- 1排行榜列表12
*/
.list-top > .item{padding-left: 30px}
.list-top > .item .num{ position:absolute; top:11px; display:block; width:20px; height:20px; color:#fff; background-color:#5a98de; text-align:center}
/*3.1.23 描述
Name: style_dldtdd
Example: - H-ui
- 基于Bootstrap框架的改进扩展的前端框架
Explain: .dl-horizontal 水平描述，默认不加为垂直模式。
*/
.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: 隐藏的内容
显示的内容
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: 转义过的代码
Explain: code：行内代码，pre：基本代码块;包装代码片段，.prettyprint颜色增强/.linenums显示行号
*/
code{padding:0 3px 2px;font-family:Monaco,Menlo,Consolas,"Courier New",monospace}
pre .title,pre .keyword,pre .body,pre .des{color:#333}/*关键词*/
pre{display:block;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;padding:9.5px;margin-bottom:10px;font-size:12px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;color:#333}
.prettyprint{margin-bottom:20px;padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8}
.prettyprint .com { color: #998;font-style:italic }/*注释*/
.prettyprint .tag{color:#007}/*标签*/
.prettyprint .lit { color: #195f91}
.prettyprint .pun,.prettyprint .opn,.prettyprint .clo { color: #93a1a1}/*等于*/
.prettyprint .fun { color: #dc322f}
.prettyprint .str,.prettyprint .atv { color: #D14}/*值*/
.prettyprint .kwd,.prettyprint .prettyprint .tag { color: #1e347b}
.prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var { color: teal}/*文档声明，属性*/
.prettyprint .pln { color: #48484c}
.prettyprint.linenums{box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0}
.pre-scrollable{max-height:340px;overflow-y:scroll}
ol.linenums{list-style:decimal outside none; margin-left:20px}
ol.linenums li{ line-height:28px; padding-left:10px}
pre ol.linenums{margin:0 0 0 33px}
pre ol.linenums li{padding-left:12px;color:#bbb;line-height:18px;text-shadow:0 1px 0 #fff}
@media (max-width: 767px) {
pre ol.linenums{ margin-left:0; list-style:none}
ol.linenums li{ padding-left:0}
.prettyprint.linenums{box-shadow:inset 0px 0 0 #fbfbfc,inset 0px 0 0 #ececf0}
}
/*3.6 图片*/
/*3.6.1 图片效果
![]()
img-responsive 响应式 .radius 圆角图片 .round 圆形图片 .thumbnail 缩略图
*/
.img-responsive{display:inline-block;max-width:100%;height:auto}
.thumbnail{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
@media (max-width: 767px) {
.img-responsive{width:100%}
}
.duang-opacity img{-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;transition:opacity .1s linear}
.duang-opacity a:hover img,a:hover .opacity img{opacity:0.85;filter: alpha(opacity=85)}
/*3.6.2 图集效果
Name: modal_album
Example:
*/
.album-item{}
.album-img{ border:1px solid #e0e0e0}
.album-img img{ display:block; width: 100%}
.album-title{display:block;text-align:left;padding:7px 5px;line-height:18px;color:#555;text-decoration:none;font-size:12px;border:solid 1px #e0e0e0;border-top:0}
.album-bg-Fir,.album-bg-Sec{border:1px solid #e6e6e6;border-top:1px solid #f5f5f5;height:1px;margin:0 auto;overflow:hidden}
.album-bg-Fir{ margin:0 3px}
.album-bg-Sec{ margin:0 6px}
/*3.6.3 头像
Name: mod_avatar
Example: 
*/
.avatar{display:inline-block;position:relative; overflow:hidden}
.avatar img{ display:block}
.avatar.radius,.avatar.radius img{border-radius:50%}
.avatar,.avatar img{width:32px; height:32px}
.avatar.size-MINI{ width:16px;height:16px}
.avatar.size-S,.avatar.size-S img{width:24px; height:24px}
.avatar.size-M,.avatar.size-M img{width:32px; height:32px}/*默认为中，可以不写，可以理解为：均码*/
.avatar.size-L,.avatar.size-L img{width:48px; height:48px}
.avatar.size-XL,.avatar.size-XL img{width:64px; height:64px}
.avatar.size-XXL,.avatar.size-XXL img{width:100px; height:100px}
.avatar.size-XXXL,.avatar.size-XXXL img{width:128px; height:128px}
/*4.2.5 向导
Name: mod_steps
Sample:
第一步
第二步
第三步
第四步
*/
.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);border-radius:.3125rem;line-height:1;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box}
.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:
*/
.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(../images/steps/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(../images/steps/step_arrow.png) no-repeat 0 center;z-index:50}
.step-ie.active{background-image:url(../images/steps/step_bg-active.png); color:#fff; z-index:100}
.step-ie.active .arrow{background-image:url(../images/steps/step_arrow-active.png)}
/*4.3 下拉菜单
Name: mod_dropDown
Example:
下拉菜单
Explain: 如需要在不同的地方显示不同的样式，请在 追加class，采用覆盖的方式重写默认样式。
*/
.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:20%; line-height:0;background:url(../images/dropDown/icon-jt.png) no-repeat 0 0}
/*鼠标经过*/
.dropDown.hover .dropDown_A,
.dropDown.open .dropDown_A{text-decoration:none;background-color:rgba(255,255,255,0.2)}
.dropDown.open .dropDown_A .menu_dropdown-arrow{transition-duration:0.3s ;transition-property:all;_background-position:0 0;transform: rotate(180deg)}
.menu{background-color:#fff;border:solid 1px #f2f2f2; display: inline-block}
.menu.radius{border-top-left-radius:0;border-top-right-radius:0}
.menu.box-shadow{border-top:none}
.menu > li{position:relative; clear:both;* float:left}
.menu > li > a{ display: block;border-bottom:solid 1px #f2f2f2;padding:5px 20px; line-height:1.8;text-align:left;font-weight: normal;white-space:nowrap; vertical-align:top}
.menu > li:last-child > a{ border-bottom:none}
.menu > li > a:hover,.menu > li > a:focus,.menu > li.open > a{ text-decoration:none;background-color:#fafafa}
.menu > li > a .arrow{ position:absolute; top:50%; margin-top:-10px; right:5px;line-height: 20px; height: 20px; color: #999}
.menu > li > .menu{ display: none}
.menu > li.open > .menu{ display: inline-block;position: absolute; left:100%;top:-1px;min-width:100%}
/*禁用菜单*/
.menu > li.disabled > a{color:#999;text-decoration:none; cursor:no-drop; background-color:transparent}
/*线条*/
.menu > li.divider{ display:block;height:0px; line-height:0px;margin:9px 0;overflow:hidden; border-top:solid 1px #eee}
/*打开菜单*/
.dropDown > .dropDown-menu{ display: none}
.dropDown.open{position:relative;z-index:990}
/*默认左对齐*/
.dropDown.open > .dropDown-menu{position:absolute;z-index:1000;display:inline-block;top:100%;left:-1px;min-width:100%;background-color:#fff;border:solid 1px #f2f2f2}
/*右对齐*/
.dropDown.open.right > .dropDown-menu{right:-1px!important;left:auto!important}
/*4.12 右侧悬浮工具
Name: modal_tools-right
*/
.tools-right{position:fixed;right:15px;z-index:999;cursor: pointer;visibility:visible; background-color:#fff;border: 1px solid #d9d9d9;color: #9c9c9c;font-size: 16px;width: 38px;height: 38px;line-height: 38px;text-align: center; text-decoration:none;_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight)}
.tools-right:hover{color:#fff; text-decoration:none; background-color:#999; border-color:#999}
/*4.12.1 返回顶部
Name: mod_totop
Level: Global
Example:
Explain: 返回顶部
*/
.tools-right.toTop{bottom:60px;display:none}
/*4.12.2 意见反馈
Name: mod_feedback
Level: Global
Example:
Explain: 意见反馈
*/
.tools-right.feedback{ bottom:110px}
/*面板*/
.panel{ background-color:#fff; border:solid 1px transparent}
.panel-header{ border-bottom:solid 1px transparent; padding:8px 15px; font-size:14px; font-weight:700}/*面板标题*/
.panel-body{ padding:15px}/*面板内容*/
.panel-footer{background-color: #f5f5f5;border-top: 1px solid #ddd;padding:5px 20px}/*面板页脚*/
/*默认面板*/
.panel-default{border-color:#ddd}
.panel-default > .panel-header{ border-color:#ddd; background-color:#f5f5f5; color:#444}
/*主要面板*/
.panel-primary{border-color:#5a98de}
.panel-primary > .panel-header{ border-color:#5a98de; background-color:#5a98de; color:#fff}
/*次要面板*/
.panel-secondary{border-color:#3bb4f2}
.panel-secondary > .panel-header{ border-color:#3bb4f2; background-color:#3bb4f2; color:#fff}
/*成功面板*/
.panel-success{border-color:#5eb95e}
.panel-success > .panel-header{ border-color:#5eb95e; background-color:#5eb95e; color:#fff}
/*警告面板*/
.panel-warning{border-color:#f37b1d}
.panel-warning > .panel-header{ border-color:#f37b1d; background-color:#f37b1d; color:#fff}
/*危险面板*/
.panel-danger{border-color:#dd514c}
.panel-danger > .panel-header{ border-color:#dd514c; background-color:#dd514c; color:#fff}
/*4.15 案例
Name: mod_docs-example
Example: ……
*/
.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}
.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}
/*4.16 滚动
Name: mod_rolling
Example:
*/
.marquee{height:22px;overflow:hidden;line-height:22px}
.rollpic .prev,.rollpic .next{display:block; height:38px; width:38px; cursor:pointer; float:left; background:url(../images/rollpic/unslider-arrow.png) no-repeat 0 0; margin-top:70px}
.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.18.1 对联广告
Name: mod_AD_dual
Sample:
*/
.AD{text-align:center}
.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:
*/
.Hui-tags{border:solid 1px #dedede; padding:0 10px}
.Hui-tags-editor{position:relative; padding:10px 0 10px 24px}
.Hui-tags-editor .Hui-tags-icon{position:absolute; left:0; top:11px; font-size:14px; color:#666}
.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(../images/Hui-tags/empty.png) repeat scroll 0 0; display:inline-block; width:100%}
.Hui-tags-label{position:absolute; top:0; left:2px; width:240px; height:20px; line-height:20px; font-size:14px; overflow:hidden; z-index:1; color:#ccc}
.Hui-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:
*/
.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.21 遮罩条
Name: mod_maskBar
*/
.maskBar{position:absolute;height:auto;left:0; bottom:-100%; right:0;padding:10px;background-color:rgba(0,0,0,0.6);z-index:2; color:#fff!important}
.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;color:#fff!important}
.maskWraper.hover .maskBox{background-color:rgba(0,0,0,0.6);
transition: all 500ms;
-moz-transition: all 500ms; /* Firefox 4 */
-webkit-transition: all 500ms; /* Safari 和 Chrome */
-o-transition: all 500ms; /* Opera */
}
/*4.13 分享到
Name: mod_share
Example:
Explain: 分享到
*/
/*4.13.1 百度分享*/
.bdsharebuttonbox.Hui-share a.bds_more,
.bdsharebuttonbox.Hui-share a.bds_weixin,
.bdsharebuttonbox.Hui-share a.bds_qzone,
.bdsharebuttonbox.Hui-share a.bds_sqq,
.bdsharebuttonbox.Hui-share a.bds_tsina,
.bdsharebuttonbox.Hui-share a.bds_tqq,
.bdsharebuttonbox.Hui-share a.bds_douban{ display:inline-block; color:#F7B824; background:none;padding-left:0; text-decoration:none; margin:0; margin-right:6px; height:auto; line-height:auto}
.bdsharebuttonbox.Hui-share a:hover{ text-decoration:none}
.bdsharebuttonbox.Hui-share .share-text{ display:inline-block; margin-right:6px; color:#999; cursor:default;float:left}
.bdsharebuttonbox.bdshare-button-style0-16.Hui-share a,
.bdsharebuttonbox.bdshare-button-style0-16.Hui-share .share-text,
.bdsharebuttonbox.bdshare-button-style0-16.Hui-share .Hui-iconfont{line-height:16px}
.bdsharebuttonbox.bdshare-button-style0-16.Hui-share .share-text,
.bdsharebuttonbox.bdshare-button-style0-16.Hui-share .Hui-iconfont{font-size:16px}
.bdsharebuttonbox.bdshare-button-style0-24.Hui-share a,
.bdsharebuttonbox.bdshare-button-style0-24.Hui-share .share-text,
.bdsharebuttonbox.bdshare-button-style0-24.Hui-share .Hui-iconfont{line-height:24px}
.bdsharebuttonbox.bdshare-button-style0-24.Hui-share .share-text,
.bdsharebuttonbox.bdshare-button-style0-24.Hui-share .Hui-iconfont{font-size:24px}
/*4.13.2 jiathis分享*/
.Hui-share.jiathis_style_24x24 .jtico{ background:none; padding-left:0!important}
.Hui-share.jiathis_style_24x24 .jiathis_separator{ margin-left:0; margin-right:6px}
/*4.24 星星评价
Name: mod_star
Sample:
显示分数效果 可以是百分比
打分效果 结构是js生成。
*/
.star-bar-show{background:url(../images/star/iconpic-star-S-default.png) repeat-x 0 0}
.star-bar-show .star{background:url(../images/star/iconpic-star-S.png) repeat-x 0 0}
.star-1{width:20%}
.star-2{ width:40%}
.star-3{width:60%}
.star-4{ width:80%}
.star-5{ width:100%}
.star-bar-show.size-M{width:120px;height:24px}
.star-bar-show.size-M,.star-bar-show.size-M .star{background-size:24px}
.star-bar-show.size-M .star{ height:24px}
.star-bar-show.size-S{width:80px; height:16px}
.star-bar-show.size-S,.star-bar-show.size-S .star{background-size:16px}
.star-bar-show.size-S .star{ height:16px}
.star-bar{font-size:0; line-height:0}
.star-bar .star{display:inline-block;text-align:center}
/*中*/
.size-M img{ width:24px;height:24px}
/*小*/
.size-S img{width:16px;height:16px}
/*4.25 tooltip 效果
Name: mod_tooltip
*/
.tooltip {position: absolute;z-index: 1070;display: block;font-size: 12px;line-height: 1.4;visibility: visible;filter: alpha(opacity=0);opacity: 0}
.tooltip.in {filter: alpha(opacity=90);opacity: .9}
.tooltip.top {padding: 5px 0;margin-top: -3px}
.tooltip.right {padding: 0 5px;margin-left: 3px}
.tooltip.bottom {padding: 5px 0;margin-top: 3px}
.tooltip.left {padding: 0 5px;margin-left: -3px}
.tooltip-inner {max-width: 200px;padding: 3px 8px;color: #fff;text-align: center;text-decoration: none;background-color: #000;border-radius: 4px}
.tooltip-arrow {position: absolute;width: 0;height: 0;border-color: transparent;border-style: solid}
.tooltip.top .tooltip-arrow {bottom: 0;left: 50%;margin-left: -5px;border-width: 5px 5px 0;border-top-color: #000}
.tooltip.top-left .tooltip-arrow {bottom: 0;left: 5px;border-width: 5px 5px 0;border-top-color: #000}
.tooltip.top-right .tooltip-arrow {right: 5px;bottom: 0;border-width: 5px 5px 0;border-top-color: #000}
.tooltip.right .tooltip-arrow {top: 50%;left: 0;margin-top: -5px;border-width: 5px 5px 5px 0;border-right-color: #000}
.tooltip.left .tooltip-arrow {top: 50%;right: 0;margin-top: -5px;border-width: 5px 0 5px 5px;border-left-color: #000}
.tooltip.bottom .tooltip-arrow {top: 0;left: 50%;margin-left: -5px;border-width: 0 5px 5px;border-bottom-color: #000}
.tooltip.bottom-left .tooltip-arrow {top: 0;left: 5px;border-width: 0 5px 5px;border-bottom-color: #000}
.tooltip.bottom-right .tooltip-arrow {top: 0;right: 5px;border-width: 0 5px 5px;border-bottom-color: #000}
/*4.26 popover 效果
Name: mod_popover
*/
.popover {position: absolute;top: 0;left: 0;z-index: 1060;display: none;max-width: 276px;padding: 1px;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: left;white-space: normal;background-color: #fff;-webkit-background-clip: padding-box;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .2);border-radius: 6px;-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);box-shadow: 0 5px 10px rgba(0, 0, 0, .2)}
.popover.top {margin-top: -10px}
.popover.right {margin-left: 10px}
.popover.bottom {margin-top: 10px}
.popover.left {margin-left: -10px}
.popover-title {padding: 8px 14px;margin: 0;font-size: 14px;background-color: #f7f7f7;border-bottom: 1px solid #ebebeb;border-radius: 5px 5px 0 0}
.popover-content {padding: 9px 14px}
.popover > .arrow,.popover > .arrow:after {position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid}
.popover > .arrow {border-width: 11px}
.popover > .arrow:after {content: "";border-width: 10px}
.popover.top > .arrow {bottom: -11px;left: 50%;margin-left: -11px;border-top-color: #999;border-top-color: rgba(0, 0, 0, .25);border-bottom-width: 0}
.popover.top > .arrow:after {bottom: 1px;margin-left: -10px;content: " ";border-top-color: #fff;border-bottom-width: 0}
.popover.right > .arrow {top: 50%;left: -11px;margin-top: -11px;border-right-color: #999;border-right-color: rgba(0, 0, 0, .25);border-left-width: 0}
.popover.right > .arrow:after {bottom: -10px;left: 1px;content: " ";border-right-color: #fff;border-left-width: 0}
.popover.bottom > .arrow {top: -11px;left: 50%;margin-left: -11px;border-top-width: 0;border-bottom-color: #999;border-bottom-color: rgba(0, 0, 0, .25)}
.popover.bottom > .arrow:after {top: 1px;margin-left: -10px;content: " ";border-top-width: 0;border-bottom-color: #fff}
.popover.left > .arrow {top: 50%;right: -11px;margin-top: -11px;border-right-width: 0;border-left-color: #999;border-left-color: rgba(0, 0, 0, .25)}
.popover.left > .arrow:after {right: 1px;bottom: -10px;content: " ";border-right-width: 0;border-left-color: #fff}
.slider{position:relative;text-align:center; margin:0 auto;z-index:1}
.slider .bd,.slider .bd li,.slider .bd img{width:100%} /*请给每个幻灯片套个div并设置id，通过id重置这个地方的宽度，达到自定义效果*/
.slider .bd{z-index:2;overflow:hidden}
.slider .bd li{float:left;overflow:hidden;width:100%}
.slider .bd li img{display:block}
.slider .hd{ position: absolute; z-index: 3; left: 0; right: 0; bottom:10px; padding: 0 10px; text-align: center}
.slider .hd li{display:inline-block;text-align:center;margin-right:10px;cursor:pointer;background-color:#C2C2C2}
.slider .hd li.active{background-color:#F60}
/*圆点*/
.dots li{width:10px; height:10px;font-size:0px;line-height:0px;border-radius:50%}
/*数字*/
.numbox li{width:20px; height:20px; line-height:20px; font-size:13px;font-family:Arial;font-weight:bold; text-indent:inherit}
.numbox li.active{color:#fff}
/*长方条*/
.rectangle li{width:40px; height:10px;font-size:0px;line-height:0px}