html{height:100%;}

/* Global*************************** */ 
body{font-family: "Microsoft Yahei","华文细黑",arial; min-width: 320px; color: #656D78; font-size: 12px; min-height:100%; position:relative; overflow: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,pre,form,fieldset,input,textarea,blockquote,th,td{ margin:0px; padding:0px;}
ol,ul,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;margin: 0;padding:0;}
img{ max-width:100%;border:0;}
/*input,textarea{ -webkit-appearance: none;border: 0;outline: none;}*/
table { border-collapse: collapse;border-spacing: 0;}
a:link,a:visited,a:hover,a:focus,input:link,input:visited,input:focus,textarea{ border:none;text-decoration:none;outline:none;-webkit-tap-highlight-color:rgba(255,255,255,0);}
.clearfix:before, .clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;overflow: hidden;}
.clearfix {zoom: 1;}
a{color: #609ee9;}    
a,button:active,input[type='submit']:active,input[type='button']:active,input[type='reset']:active{box-shadow: none !important;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #aab2bd!important;}
button{ border: 0;padding: 0;outline: 0;}
input:focus,button:focus{outline:none !important}
.hidden{ overflow: hidden;}

/*common*/
a.text-normal{ color: #656D78;}
.block{ display: block;}
.inline{ display: inline-block;}
.normal{ font-weight: normal!important;}


.border-none{ border:0!important;}
.border{border:1px solid #EEF0F3}
.border-top{border-top:1px solid #EEF0F3}
.border-left{border-left:1px solid #EEF0F3}
.border-bottom{border-bottom:1px solid #EEF0F3}
.border-right{border-right:1px solid #EEF0F3}
.border-dashed{border:1px dashed #ddd}

.border-radius{border-radius: 2px}
.border-radius3{border-radius: 3px}
.border-radius4{border-radius: 4px}
.border-radius-none{border-radius: none}

.box-shadow-none{ box-shadow: none}

.strong{ font-weight: 700;}
.left{ text-align: left !important;}
.center{ text-align: center !important;}
.right{ text-align: right !important;}
.ellipsis{ white-space: nowrap;overflow: hidden;text-overflow:ellipsis}

.text-normal{color:#666 !important;}
.text-dark{color:#323133!important;}
.text-light{ color:#AAB2BD !important;}
.text-warning{ color: #F5BA4E !important;}
.text-info{ color: #609ee9 !important;}
.text-success{ color: #39ca74 !important;}
.text-danger{ color: #E75845 !important;}
.text-warning{ color: #F5BA4E !important;}
.text-primary {color: #e75845!important;}       
.text-white{ color: #fff!important;}

.text-sm { font-size:12px;}
.text-middle { font-size:14px;}
.text-lg { font-size:16px;}
.text-x-lg{font-size: 20px;}
.text-2x-lg{font-size: 24px;}

.w300{width: 300px !important;}
.w320{ width: 320px;}
.w480{width: 480px !important;}
.w380{ width: 380px;}
.w280{ width: 280px;}
.w230{ width: 230px;}
.w160{ width: 160px;}
.w77{ width: 77px!important;}
.w100{ width: 100px!important;}
.wid120{ width: 120px;}
.wid96{ width: 96px;}
.hr-line{ height: 1px; line-height: 0; font-size: 2px; background: #E6E9ED;}

.f-relative{ position: relative;}
.f-mato{ margin:0 auto;}

.text-hover{color: #656D78;}
.text-hover:hover{ color: #609ee9}
*[placeholder] { color:#AAB2BD; } 
input:-webkit-autofill{-webkit-box-shadow: 0 0 0px 1000px white inset!important;}
.tooltip .tooltip-inner{ background: #39424E; padding:10px 16px;}
.tooltip.bottom .tooltip-arrow {border-bottom-color: #39424E;}
.tooltip.top .tooltip-arrow{border-top-color: #39424E;}
.tooltip.left .tooltip-arrow{border-left-color: #39424E;}
.tooltip.right .tooltip-arrow {border-right-color: #39424E;}
.tooltip span{ text-align: left!important;display: inline-block;}

/*.bg-gray{ background-color: #f5f7fa;}*/


.margin-none{ margin: 0!important}
.margin{ margin:10px;}
.margin-top{ margin-top:5px; }
.margin-right{ margin-right:5px; }
.margin-bottom{ margin-bottom:5px; }
.margin-left{ margin-left:5px; }
.margin-left-none{ margin-left: 0!important}        
.margin-right-none{ margin-right: 0!important}      
.margin-bottom-none{ margin-bottom: 0!important}        
.margin-top-none{ margin-top: 0!important} 
.innerAll-margin-top{ margin-top:10px!important; }
.innerAll-margin-bottom{ margin-bottom:10px; }
.innerAll-margin-left{ margin-left:10px; }
.innerAll-margin-right{ margin-right:10px; }
.row-top-margin{margin-top: 15px}
.row-right-margin{margin-right: 15px}
.row-bottom-margin{margin-bottom: 15px}
.row-left-margin{margin-left: 15px}
.innerAll-2x-margin-top{ margin-top:20px; }
.innerAll-2x-margin-right{ margin-right:20px; }
.innerAll-2x-margin-bottom{ margin-bottom:20px; }
.innerAll-2x-margin-left{ margin-left:20px; }
.innerAll-4x-margin-left{ margin-left:40px; }
.space-margin-left{ margin-left:16px; }
.space-margin-right{ margin-right:16px; }
.pull-24-marginTop{ margin-top:24px;}       
.pull-24-marginLeft{ margin-left:24px;}     
.pull-24-marginBottom{ margin-bottom:24px;}     
.pull-24-marginRight{ margin-right:24px;}

.padding-none{ padding: 0 !important}
.padding-left-none{ padding-left: 0!important}        
.padding-right-none{ padding-right: 0!important}      
.padding-bottom-none{ padding-bottom: 0!important}        
.padding-top-none{ padding-top: 0!important}      
.padding{ padding:10px!important;}
.padding-top{ padding-top:5px; }
.padding-right{ padding-right:5px; }
.padding-bottom{ padding-bottom:5px; }
.padding-left{ padding-left:5px; }
.innerAll-padding-top{ padding-top:10px!important; }
.innerAll-padding-right{ padding-right:10px; }
.innerAll-padding-bottom{ padding-bottom:10px; }
.innerAll-padding-left{ padding-left:10px; }
.innerAll-2x-padding-top{ padding-top:20px; }
.innerAll-2x-padding-right{ padding-right:20px; }
.innerAll-2x-padding-bottom{ padding-bottom:20px; }
.innerAll-2x-padding-left{ padding-left:20px;}
.padding-24{ padding:24px!important}        
.pull-24-paddingTop{ padding-top:24px;}     
.pull-24-paddingLeft{ padding-left:24px;}       
.pull-24-paddingBottom{ padding-bottom:24px;}       
.pull-24-paddingRight{ padding-right:24px;}

/*select*/      
.btn-select {background-color: #FFF;border-color: #CCD1D9;height: 34px;line-height: 20px;font-size: 12px;border-radius: 4px;padding: 6px 12px 6px 12px;color: #323133;}     
.btn-select .icon-arrow-down { position: absolute;right: 12px;top: 0px;height: 32px;line-height: 32px;background-size: contain;}        
.icon-arrow-down { display: inline-block;width: 11px;height: 6px;background: url("../fonts/arrow-down.svg") no-repeat center center;background-size: cover;}       
.dropdown-menu.dropdown-menu-select {width: 100%;min-width: 120px; margin-top: 0px; padding: 0;top: 35px;left: 0px; background: #FFFFFF; border: 1px solid #CCD1D9; border-radius: 4px;box-shadow: 0px 2px 4px 0px rgba(67,73,84,0.15);overflow: hidden;}       
.dropdown-scroll{ position: relative;height: 100%; max-height: 180px;overflow-y: auto;}     
.dropdown-menu.dropdown-menu-select li {border-bottom: 1px #eef0f3 solid;height: 34px;color: #656D78;line-height: 34px; font-size: 12px;}       
.dropdown-menu.dropdown-menu-select li a {display: block;height: 34px;color: #656D78; line-height: 34px; padding: 0px 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}       
.dropdown-menu.dropdown-menu-select li a:hover{background-color:#F5F7FA; color:#656D78; cursor: pointer;}
            
/*form*/        
.form-control {border-color: #CCD1D9; box-shadow: none;border-radius: 4px;color: #323133;font-size: 12px;}      
.form-control:focus{box-shadow:0px 0px 4px 0px rgba(96,158,233,0.50); border:1px solid #609ee9}     
.has-error.help-block{font-size:12px; margin-bottom:0; color: #e75845}      
.has-error.help-block.help-y{ clear: both;width: 100%; padding-top:5px; margin-top: 0}      
.has-error .form-control{border-color:#e75845;}     
.has-error .form-control:focus{border-color:#e75845;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 4px rgba(231,88,69,.5); box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 4px rgba(231,88,69,.5);}        
.has-error .control-label{color:#656D78;}       
.has-error .icon{position:relative;}       
@media (min-width: 768px){ 
    .form-horizontal .control-label {margin-bottom: 6px;}
}

@media (max-width: 768px){      
    .form-horizontal .control-label {margin-bottom: 6px;text-align: left;font-size: 14px}
    .form-control-static{ padding-top:2px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;}
    .form-control,.btn-select,.dropdown-menu.dropdown-menu-select li{ font-size: 14px;}

    html label[class*="col-xs-"],html label[class*="col-md-"],html label[class*="col-lg-"]{padding:0 3px;}
    html li[class*="col-xs-"],html li[class*="col-md-"],html li[class*="col-lg-"]{padding:0 3px;}

    html div[class*="col-xs-"], html div[class*="col-sm-"], html div[class*="col-md-"], html div[class*="col-lg-"]{ padding: 0 3px!important;}

    html .row, html.app .row {
        margin: 0 -3px;
    }
    .w160{ width: 100%}
}       
/*radio*/       
.radio-custom.radio-custom-size{min-height:16px; }      
.radio-custom.radio-custom-size .checkbox-textinfo{position:relative; vertical-align:top;}      
.radio-custom-size{margin-right:16px; font-size:12px;}      
.radio-custom input[type=radio]{position:relative;left:-99999px}        
.radio-custom i{margin-left:-17px;margin-right:5px;  width:16px;height:16px;font-size:1.333em;color:#ddd;display:inline-block; background:url("../fonts/radio-n.svg") no-repeat 0 0;}      
.radio-custom i.checked{color:#444851;margin-left:-17px; background:url("../fonts/radio-s.svg") no-repeat 0 0;}        
.radio-custom i.disabled{color:#eee;opacity:.5;}        
/*checkbox*/        
.checkbox-custom input[type=checkbox] {position: relative;left: -99999px;}      
.checkbox-custom i{margin-left:-14px;margin-right:4px;width:14px;height:14px;vertical-align:middle;font-size:1.333em;color:#ddd;display:inline-block;background:#FFF; background-image:url("../fonts/checkbox-n.svg"); background-position:0 0;  background-size:cover;  }     
.checkbox-custom i.checked{margin-right:4px;color:#444851;margin-left:-14px; background-image:url("../fonts/checkbox-s.svg"); background-position:0 0;}        
.checkbox-custom i.disabled{opacity:.5;}        
.checkbox-custom .checkbox-textinfo {position: relative;top: 1px;}      
/*modal-tis*/       
.modal-tip{position:absolute;top:-34px;left:0;right:0;width:100%;z-index:9999;filter:alpha(opacity=100);}       
.modal-tip .modal-info{ text-align: center;}        
.modal-tip .modal-in{display:inline;padding:8px 16px;border-radius:4px;color:#FFF;font-size:12px;}      
.modal-tip .modal-in.success{background-color:#39ca74;}     
.modal-tip .modal-in.warning{background-color:rgba(35,45,60,.90);}      
.modal-tip .modal-text{display:inline-block;line-height:16px;}


/*.btn{ padding:7px 12px!important;}*/
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus{outline: none;}
.btn.btn-raduis{ border-radius: 100px}

.btn-info{ background: #609ee9!important; border-color: #609ee9!important;color: #fff}
.btn-success{ background: #39ca74!important;border-color: #39ca74!important;color: #fff}
.btn-success:hover{background: #34b969!important;border-color: #34b969!important;color: #fff!important}
.btn-danger{ background: #E75845!important;border-color: #E75845!important;color: #fff}
.btn-warning{ background: #F5BA4E!important;border-color: #F5BA4E!important;color: #fff}
.btn.btn-default{ border:1px solid #e6e9ed; color: #AAB2BD;background: #F5F7FA;}
.btn.btn-default.btn-stroke,.btn.btn-default-hove:hover{ color:#609ee9;border:1px solid #609ee9 !important;background: #fff !important; }
.btn.btn-default.btn-stroke:hover{ background: #609ee9!important;color: #fff }
.btn.btn-info:hover{ background-color: #568ccc !important;border-color: #568ccc!important}
.btn-blue{color:#609ee9;background-color: #ebf2fc;}
.btn.btn-blue:hover{background-color:#609ee9; color: #fff;}
.btn-green{color:#39ca74;background-color:#dbf6e4;}     }
.btn.btn-green:hover,.btn.btn-green:focus{color:#fff;background-color:#39ca74;}     
.btn-green{color:#39ca74;background-color:#dbf6e4;}
.btn.btn-green:hover,.btn.btn-green:focus{color:#fff;background-color:#39ca74;}
.btn.btn-xs{ padding:3px 10px!important;}
.btn.btn-info.btn-stroke{ padding:6px 16px!important; background: none!important;border:1px solid #609ee9; color:#609ee9;box-sizing: border-box;}
.btn.btn-info.btn-stroke:hover{ background:#609ee9!important;color: #fff;}
.icon-danger{background-image: url("../fonts/danger.svg");}   
.icon-default{ background-image: url("../fonts/default.svg");}
.icon-size12{ width: 12px;height: 12px;background-size: 12px; margin-right:8px;} 
.icon-size14{ width: 14px;height: 14px;background-size: 14px;margin-right:8px;}

/* 按钮前的背景图片 */
.btn .btn-bg-pic{
    margin-right:6px;
    padding: 8px;
}

/* 按钮前的字体图标 */
.btn .btn-text-pic{
    margin-right:6px;
}

/* icon */
.icon{ padding: 8px;background-size: 100%; background-position: center;background-repeat: no-repeat;}
.icon-question{ background-image: url('../fonts/ask-pic.svg') ;}
.icon-info{ background-image: url('../fonts/index-about.svg');}
.icon-warning{ background-image: url('../fonts/architecture-warning.svg'); } 
.icon-success{ background-image: url('../fonts/success.svg') ;}
.icon-error{ background-image: url('../fonts/error.svg') ;}

.icon-sm{ padding: 4px;}
.icon-ml{ padding: 12px;}
.icon-lg{ padding: 16px;}
.icon-x-ml{ padding: 20px;}
.icon-2ml{ padding: 24px;}
.icon-2lg{ padding: 36px;}

.modal-header h3{ color: #333;}
.modal-footer .btn{ min-width: 110px; padding:7px 12px;}

/*手机验证****/
.btn-input-stroke,.btn-input-stroke:hover{background: #F5F7FA;border: 1px solid #CCD1D9!important;border-radius: 4px;font-size: 14px;color: #656D78;min-width: 100px;height: 34px;line-height: 18px;}
.btn-input-stroke.disabled{color: #AAB2BD;min-width: 100px;height: 34px;line-height: 18px; }
/*手机验证end****/

/*modal*******/
.modal-backdrop{ z-index: 999}
.modal-dialog{
     z-index: 1040;
}
.modal-content{
    margin-top:30px;
    box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.20);
    border: 1px solid #ccd1d9;
}

.modal-footer .btn+.btn{
    margin-left: 12px;
}


@media (max-width: 768px){ 
    .modal-footer .btn{ min-width: auto;}
    .modal-footer .btn+.btn{ margin-left: 5px;}
    .modal-footer .btn.xs-half{ min-width: 46.7%;width: 46.7%;}
    .modal-footer .btn.xs-third{ min-width: 30%;width: 30%;}
    .modal-footer .btn.xs-hundred{ min-width: 97%;width: 97%;}
}

/*modal end*******/

/* checkebox begin */
.account-system-checkbox input[type='checkbox'],
.account-system-checkbox input[type='radio']{
    display: none;
}

/* 复选框label的基本样式 */ 
.account-system-checkbox label{
    display: block;
    margin-top: 14px;
    padding: 2px 0 2px 24px;
    margin:0 auto;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* 未选中的样式 */ 
.account-system-checkbox label.this-checked-n{
    background:url('../fonts/checkbox-n.svg') left center no-repeat;
}
.account-system-checkbox label.this-radio-n{
    background:url('../fonts/radio-n.svg') left center no-repeat;
}

/* 选中的样式 */ 
.account-system-checkbox label.this-checked-s{
    background:url('../fonts/checkbox-s.svg') left center no-repeat;
}
.account-system-checkbox label.this-radio-s{
    background:url('../fonts/radio-s.svg') left center no-repeat;
}
/* checkebox end */

/* 表格公共样式 */
.account-system-table{
    position: relative;
    height: calc(100% - 74px);
    height: -webkit-calc(100% - 74px);
    height: -moz-calc(100% - 74px);
    padding:24px;
    font-size: 12px;
    overflow: auto;
}
.account-system-table table thead{
    background-color: #EFF2F5;
}
.account-system-table table tr{
    height: 34px;
    line-height: 34px;
}
.account-system-table table tr td,
.account-system-table table tr th{
    padding-top: 0;
    padding-bottom: 0;
    color:#656d78;
    vertical-align:middle;
    border-bottom: 1px solid #e6e9ed;
}
.account-system-table table tbody a{
    margin-right: 14px;
}
.account-system-table table tbody a:hover{
    text-decoration: underline;
     color:#609ee9;
}
.account-system-table table tbody tr.this-checked-hover{
    background-color: #f3f8ff;
    color:#609ee9;
}

/* 公的表格样式 end */ 

/* 小标签公共样式 begin */
.account-system-label{
    display: inline-block;
    -webkit-display:inline-block;
    -moz-display:inline-block;
    -o-display:inline-block;
    padding: 4px 12px;
    font-size: 12px;
    text-align: center;
    border-radius: 23px;
    line-height: 1.5;
}
.account-system-label.label-info{
    color: #609ee9;
    background-color: #e1edfc;
}
.account-system-label.label-danger{
   background-color: #FFDFDB;
   color:#e75845;
}
.account-system-label.label-warning{
    background-color: #FFE9C0;
    color:#EE9F0E;
}
.account-system-label.label-default{
    background-color:#e6e9ed;
    color:#aab2bd;
}
/* 小标签公共样式 begin */


/* 操作成功或失败 */
.account-system-hint-text{
    position: absolute;
    top:70px;
    left: 50%;
    z-index: 1200;
    padding:8px;
    line-height: 1.5;
    max-width: 20em;
    text-align: center;
    font-size: 12px;
    color:#fff;
    background-color: rgba(0,0,0,.7);
    border-radius: 4px;
}
/* 操作成功或失败 end */

/* paging */
.accout-systey-paging{
    margin-top: 24px;
}
.accout-systey-paging:after,
.accout-systey-paging .paging-main:after,
.accout-systey-paging .paging-box:after{
    content:'';
    display: block;
    clear: both;
} 
.accout-systey-paging .list-length{
    font-size: 13px;
    color: #aab2bd;
    float: left;
}

.accout-systey-paging .paging-main{
    float: right;
}
.accout-systey-paging .paging-main ul li{
    text-align: center;
    float: left;
    border-top:1px solid #e6e9ed;
    border-bottom:1px solid #e6e9ed;
}
.accout-systey-paging .paging-main  .pageing-btn{
    width: 68px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    overflow: hidden;
}
.accout-systey-paging .paging-main .pade-up{
    border-radius: 4px 0 0 4px;
    border-left:1px solid #e6e9ed;
}
.accout-systey-paging .paging-main .pade-down{
    border-radius: 0 4px 4px 0;
    border-right:1px solid #e6e9ed;
}
.accout-systey-paging .paging-main .page{
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-right: 1px solid #e6e9ed;
}
.accout-systey-paging .paging-main ul .page-num{
    cursor: pointer;
}

.accout-systey-paging .paging-main .pageing-btn button{
    width: 100%;
    height: 100%;
}
.accout-systey-paging .paging-main .pade-up button,
.accout-systey-paging .paging-main .pade-down button{
    background-color: #fff;
}
.accout-systey-paging .paging-main .pade-up button:hover,
.accout-systey-paging .paging-main .pade-down button:hover{
    background-color: #609ee9;
    color:#fff;
}
.accout-systey-paging .paging-main .pageing-btn button[disabled]{
    color:#ccded9;
    background-color:#f6f7fa;
}

.accout-systey-paging .paging-main ul .page-num:hover,
.accout-systey-paging .paging-main ul .page-num-hover{
    background-color: #609ee9;
    color:#fff;
    border-color: #609ee9
}
/* paging */

/* 下拉框高度 */
.dropdown-menu{
    max-height: 186px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 解决placehoder兼容 */
.phcolor{ color:#999;}
/* 解决placehoder兼容 */
.phcolor{ color:#999;}

/*------------header true --------------*/

.account-system-header-new {
    /* Size */
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #fff;
    /* Style */
    background: url('../picture/bg1.png') no-repeat #F5F7FA;
}
 
.account-system-header{
    /* Size */
    height:50px;
    line-height: 50px;
    
    font-size:14px;
    color:#fff;
    /* Style */
    background-color:#609ee9; 
}

.account-system-logo{
    display: block;
    width: 129px;
    text-align: center;
    padding-left: 9px;
    padding-right: 20px;

    /* Size */
    height: 50px;

    float:left;
}

/*------------ logo ------------*/ 
.account-system-logo img{
    /* Size */ 
    max-height: 25px;
}


/*------------ control-panel ------------*/ 
.account-system-control-panel{
    width: 55px;
    height: 50px;
    line-height: 50px;
    background:url('../images/account-system-control.svg') center no-repeat; 
    border-left: 1px solid #5795e0;
    float: left;
}
.account-system-control-panel a{
    display: block;
    width: 100%;
    height: 100%;
}


/*------------ product-service ------------*/
.account-system-product-service{
    position: relative;
    width: 98px;
    height: 50px;
    line-height:50px;
    border-left: 1px solid #5795e0; 
    float:left;
}
.account-system-product-service a{
    display: block;
    width: 72px;
    padding-left: 15px;
    color:#fff;
    font-weight: 400;
}

.account-system-product-service .product-service-arrow{
    display: block;
    width: 6px;
    height:4px;
    position: absolute;
    z-index: 30;
    top:23px;
    left:76px;
    background: url('../fonts/account-system-solid-arrow.svg') center no-repeat;
}
/*------------ product-service ------------*/

.account-system-header-function{
    margin-right: -15px;
    height: 100%;
    float: right;
}


/*------------ userName and pic ------------*/
.account-system-header-function .user-pic-box{
    width: 122px;
    float: left;
    position: relative;
    border-left: 1px solid #5795e0;
}
.account-system-header-function .user-pic-box .user-pic{
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor:pointer;
}
.account-system-header-function .user-pic-box .user-pic > a{
    display: block;
    float:left;
}
.account-system-header-function .user-pic-box .user-pic img{
    display: block;;
    width: 24px;
    height: 24px;
    margin-left: 16px;
    margin-top:12px;
}
.account-system-header-function .user-pic-box .user-name{
    margin-left:7px;
    max-width:45px; 
    height: 50px;
    /*color:#fff;*/
    float: left;
    overflow: hidden;
    font-size: 12px;
}


/*------------ user-name-arrow ------------*/
.user-name-arrow{
    display: block;
    width: 6px;
    height:4px;
    margin-top:25px;
    margin-right:16px;
    background: url('../fonts/account-system-solid-arrow.svg') center no-repeat;
    float: right;
}


/*------------ header-pic ------------*/ 
.account-system-header-function .header-pic-box{
    height: 50px;
    padding: 0 16px 0 21px;
    font-size: 14px;
    border-left: 1px solid #5795e0;
    float: left;
    cursor:pointer;
}

.account-system-header-function .header-pic-box .header-pic{
    margin-top:16px;
    margin-right:7px;
    width: 18px;
    height: 18px;
    float: left;
}
.account-system-header-function .header-pic-box .work-order-pic{
    background: url('../fonts/work-order.svg') center no-repeat
}
.account-system-header-function .header-pic-box .heade-message-pic{
    background: url('../fonts/header-masagess.svg') center no-repeat
}


/*------------ header-pic-num ------------*/
.account-system-header-function .header-pic-box .color-num{
    margin-top: 15px;
    padding:0 6px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color:#fff;
    background-color:#ff9f00; 
    border-radius: 10px;
    float: left;
} 

/*------------ help ------------*/ 
.account-system-header-help{
    /* Size */
    width: 58px;
    height:50px;

    /* Background */
    background: url("../fonts/account-system-help.svg") center no-repeat;
    background-size: 24px 24px;
    text-indent: -99999px;
    float: left;
    border-left: 1px solid #5795e0;
}
.account-system-header-help a{
    display: block;
    width: 100%;
    height: 100%;
}

/*------------ qr-code------------*/
.account-system-header-function .header-qr-code-box{
    width: 52px;
    height:50px;
    background:url("../fonts/qr-code.svg") center no-repeat;
    border-left: 1px solid #5795e0;
    float: left;
} 
.account-system-header-function .header-qr-code-box a{
    display: block;
    width: 100%;
    height: 100%;
}

/*------------ header-nav-hover ------------*/
.account-system-product-service:hover,
.account-system-header-function .user-pic-box:hover,
.account-system-header-function .header-pic-box.heade-message:hover{
    background-color: #fff;
    color:#333;
     -moz-transition:all  .3s; /* Firefox 4 */
    -webkit-transition:all .3s; /* Safari 和 Chrome */
    -o-transition:all  .3s; /* Opera */
}
.account-system-product-service:hover a{
    color:#333;
}
.account-system-product-service:hover .product-service-arrow,
.user-pic-box:hover .user-name-arrow{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    background: url('../fonts/account-system-solid-arrow-2.svg') center no-repeat;
     -moz-transition:all  .3s; /* Firefox 4 */
    -webkit-transition:all .3s; /* Safari 和 Chrome */
    -o-transition:all  .3s; /* Opera */
}
.account-system-header-function .header-pic-box:hover .heade-message-pic{
    background: url('../fonts/header-masagess-2.svg') center no-repeat;
}

.account-system-control-panel:hover{
    background-color: #4b8dde;
}

.account-system-header-function .header-qr-code-box:hover{
    background: url("../fonts/qr-code-2.svg") center no-repeat #fff;
     -moz-transition:all  .3s; /* Firefox 4 */
    -webkit-transition:all .3s; /* Safari 和 Chrome */
    -o-transition:all  .3s; /* Opera */
}

/*------------ top mune public ------------*/
.account-system-header .account-system-product-service,
.account-system-header .header-pic-box,
.account-system-header .header-qr-code-box,
.account-system-header .heade-message,
.account-system-header .user-pic-box,
.account-system-header .account-system-header-help{
    position: relative;
    -moz-transition:all  .3s; /* Firefox 4 */
    -webkit-transition:all .3s; /* Safari 和 Chrome */
    -o-transition:all  .3s; /* Opera */
}

.account-system-header .header-pic-box:hover .small-prompt,
.account-system-header .account-system-header-help:hover .small-prompt{
    visibility: visible;
    opacity: 1;
    -webkit-opacity:1;
    -moz-opacity:1;
    -ms-opacity:1;
    top:60px;
    transition:all .18s;
    -moz-transition:all  .18s; /* Firefox 4 */
    -webkit-transition:all .18s; /* Safari 和 Chrome */
    -o-transition:all  .18s; /* Opera */

}

.account-system-header .nav-muen{
    display: none;
    height:auto!important; 
    position: absolute;
    z-index: 99;
    top:50px;
    right:0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 2px 4px 0px rgba(67,73,84,0.15);
    border-radius: 0 0 4px 4px;
}
.account-system-header-function .nav-muen a:focus{
    color:none;
}


/*------------ user mune ------------*/
.account-system-header-function .nav-muen.user-muen li{
    width: 100%;
    height: 38px;
    line-height: 38px;
    border-top: 1px solid #e6e9ed;
    text-align: center;
    font-size: 12px;
}
.account-system-header-function .nav-muen.user-muen li a{
    color:#656d78;
    display: block;
    width: 100%;
    height: 38px;
    line-height: 38px;
}
.account-system-header-function .nav-muen.user-muen li:hover{
    background-color: #f5f7fa;
}

/*------------message mune --------------*/
.account-system-header-function .nav-muen.message-muen{
    width: 196px;
}
.account-system-header-function .nav-muen.message-muen .no-more-message{
    height: 130px;
    text-align: center;
    font-size: 12px;
    cursor: default;
}
.account-system-header-function .nav-muen.message-muen .no-more-message > p{
    height: 90px;
    line-height: 90px;
}
.account-system-header-function .nav-muen.message-muen .one-message{
    padding: 12px 16px;
    height: 60px;
    line-height: 1.6;
    font-size: 12px;
    border-bottom: 1px solid #e6e9ed;
}
.account-system-header-function .nav-muen.message-muen .one-message:hover{
    background-color: #f5f7fa;
}

.account-system-header-function .nav-muen.message-muen .one-message a,
.account-system-header-function .nav-muen.message-muen .one-message span{
    display: block;
}
.account-system-header-function .nav-muen.message-muen .one-message span{
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}
.account-system-header-function .nav-muen.message-muen .look-more-btn{
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.account-system-header-function .nav-muen.message-muen .look-more-btn a{
    display: block;
    color: #609ee9;
    font-size: 12px;
}
.account-system-header-function .nav-muen.message-muen .look-more-btn a:hover{
    text-decoration: underline;
}


/*------------ header-qr-code mune --------------*/
.header-qr-code-box .nav-muen.qr-code-muen{
    width: 150px;
}
.header-qr-code-box .nav-muen.qr-code-muen li{
    padding-top: 0;
}
.header-qr-code-box .nav-muen.qr-code-muen .header-qr-code{
   margin-bottom: 10px;
   height: 140px;
   /*background:url('../images/qr-code.jpg') center no-repeat;*/
   background-size: 120px 120px;
}
.header-qr-code-box .nav-muen.qr-code-muen .header-qr-code-text{
    line-height: 1.6;
    font-size: 12px;
    text-align: center;
     padding-top: 20px;
}

/*------------ small prompt ------------*/
.small-prompt{
    visibility: hidden;
    text-indent: 0;
    top:70px;
    min-width:9.4em;
    height: 2.6em;
    line-height: 2.6em;
    float: left;
    position: absolute; 
    z-index:100;
    border:4px;
    background:rgba(0,0,0,.8);
    left:50%;
    margin-left: -4.7em;
    border-radius:4px;
    text-align: center;
    font-size: 12px; 
    cursor: default;
    -webkit-opacity:0;
    -moz-opacity:0;
    -ms-opacity:0;
    opacity:0;
    transition:all,.15s;
    -moz-transition:all,.15s; /* Firefox 4 */
    -webkit-transition:all,.15s; /* Safari 和 Chrome */
    -o-transition:all.15s; /* Opera */
}
.small-prompt:before{
    content:'';
    position: absolute;
    top:-13px;
    left:50%;
    margin-left: -8px;
    border:8px solid transparent;
    border-bottom: 5px solid rgba(0,0,0,.8);
}


/**/
.account-system-product-service .nav-muen.product-muen{
    min-height: 208px;
    padding: 18px;
    width: 240px;
    max-height: 300px;
    overflow: auto ;
    left:0;
    right:auto;
    font-size: 12px;
}

.account-system-product-service .nav-muen.product-muen .product-box .one-product:last-child{
    border:0;
}

.account-system-product-service .nav-muen.product-muen .product-muen-title{
    height:30px;
    line-height: 1;
}
.account-system-product-service .nav-muen.product-muen .product-box:after{
    content: '';
    display: block;
    clear: both;
}
.account-system-product-service .nav-muen.product-muen .one-product{
    margin-right:25px;
    margin-bottom: 10px;
    float: left;
}
.account-system-product-service .nav-muen.product-muen .one-product:nth-child(3n){
    margin-right: 0;
}
.account-system-product-service .nav-muen.product-muen .one-product{
    width: 200px;
    padding-bottom:10px; 
    border-bottom: 1px solid #e6e9ed;
}
.account-system-product-service .nav-muen.product-muen .one-product dl{
    height: 30px;
    float:left;
}

.account-system-product-service .nav-muen.product-muen .one-product dl dt,
.account-system-product-service .nav-muen.product-muen .one-product dl dd{
    float:left;
}
.account-system-product-service .nav-muen.product-muen .one-product dl dt{
    width:30px;
    height: 30px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size:30px 30px; 
    border-radius:50%;
    overflow:hidden
}
.account-system-product-service .nav-muen.product-muen .one-product dl dd{
    width: 120px;
    height:30px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-system-product-service .nav-muen.product-muen .one-product .goto-btn{
    float: right;
    height:30px;
    line-height:30px;
}
.account-system-product-service .nav-muen.product-muen .one-product .goto-btn a{
    display: inline;
    padding: 0;
    color:#609ee9;
    margin-left:15px;
}
.account-system-product-service .nav-muen.product-muen .one-product .goto-btn a:hover{
    text-decoration: underline;
}

.account-system-product-service .nav-muen.product-muen .one-product dl dt.header-micro-station{
    background-image: url('../images/index-micro-site.svg');
}
.account-system-product-service .nav-muen.product-muen .one-product dl dt.header-enterprise-email{
    background-image: url('../fonts/index-enterprise-email.svg');
}
.account-system-product-service .nav-muen.product-muen .one-product dl dt.header-enterprise-approval{
    background-image: url('../fonts/index-enterprise-approval.svg');
}
.account-system-product-service .nav-muen.product-muen .one-product dl dt.header-website-redesign{
    background-image: url('../fonts/website-redesign80x80.svg');
}
.account-system-product-service .nav-muen.product-muen .one-product dl dt.header-logo-design{
    background-image: url('../fonts/index-logo-design.svg');
}
.account-system-product-service .nav-muen.product-muen .one-product dl dt.header-more-design{
    background-image: url('../fonts/index-more-design.svg');
}
/*------------ page main --------------*/
.account-system-main{
    position: absolute;
    top:50px;
    bottom: 0;
    left:0;
    right: 0;
    -webkit-height: calc(100% - 50px);
    -moz-height: calc(100% - 50px);
    height: calc(100% - 50px);
    color:#656d78;
}

.account-system-main:after{
    content: '';
    display: block;
    clear: both;
}


/*------------page left--------------*/
.account-system-left{
    padding-top: 16px;
    position: relative;
    z-index: 50;
    width: 200px;
    height: 100%;
    font-size: 14px;
    background-color:#232D3C;
    float: left;
    overflow: auto;
    box-shadow: 0px 1px 2px 0px rgba(44,62,79,0.05);
}

/*------------ page-left-nav-time ------------p */
.account-system-left-nav{
    width: 100%;
    line-height: 44px;
}
.in-account-system-left-nav{
    padding-left: 23px;
    border-left: 3px solid transparent; 
}
.account-system-left-secondary-nav{
    display: none;
}
.in-account-system-left-nav:hover,
.in-account-system-left-nav-hover{
    background-color:#1c2430;
} 
.account-system-left-nav a{
    display: block;
    position: relative;
}
.account-system-left-nav a:after{
    content: '';
    display: block;
    clear: both;
}

/*------------page-left-nav-pic------------*/
.account-system-left-pic{
    margin-top: 14px;
    margin-right: 10px;
    width:16px;
    height:16px;
    float: left;
    background-size: 16px 16px !important;
}
.in-account-system-left-nav .account-system-left-pic0-1{
     background:url('../fonts/account-system-control.svg') center no-repeat;
}
.in-account-system-left-nav .account-system-left-pic0-2{
     background:url('../fonts/header-product.svg') center no-repeat;
}
.in-account-system-left-nav .account-system-left-pic1{
    background:url('../fonts/address-list-left-pic-1.svg') center no-repeat;
}
.in-account-system-left-nav .account-system-left-pic2{
    background:url('../fonts/address-list-left-pic-2.svg') center no-repeat;
}
.in-account-system-left-nav .account-system-left-pic3{
    background:url('../fonts/address-list-left-pic-3.svg') center no-repeat;
}
.in-account-system-left-nav .account-system-left-pic4{
    background:url('../fonts/address-list-left-pic-4.svg') center no-repeat;
}
.in-account-system-left-nav .account-system-left-pic5{
    background:url('../fonts/address-list-left-pic-5.svg') center no-repeat;
}
.in-account-system-left-nav .account-system-left-pic6{
    background:url('../fonts/address-list-left-pic-6.svg') center no-repeat;
}

.in-account-system-left-nav:hover .account-system-left-pic0-1,
.in-account-system-left-nav-hover .account-system-left-pic0-1{
    background:url('../fonts/account-system-control-2.svg') center no-repeat;
}

.in-account-system-left-nav:hover .account-system-left-pic0-2,
.in-account-system-left-nav-hover .account-system-left-pic0-2{
    background:url('../fonts/header-product-2.svg') center no-repeat;
}

.in-account-system-left-nav:hover .account-system-left-pic1,
.in-account-system-left-nav-hover .account-system-left-pic1{
    background:url('../fonts/address-list-left-pic-1-hover.svg') center no-repeat;
}
.in-account-system-left-nav:hover .account-system-left-pic2,
.in-account-system-left-nav-hover .account-system-left-pic2{
    background:url('../fonts/address-list-left-pic-2-hover.svg') center no-repeat;
}
.in-account-system-left-nav:hover .account-system-left-pic3,
.in-account-system-left-nav-hover .account-system-left-pic3{
    background:url('../fonts/address-list-left-pic-3-hover.svg') center no-repeat;
}
.in-account-system-left-nav:hover .account-system-left-pic4,
.in-account-system-left-nav-hover .account-system-left-pic4{
    background:url('../fonts/address-list-left-pic-4-hover.svg') center no-repeat;
}
.in-account-system-left-nav:hover .account-system-left-pic5,
.in-account-system-left-nav-hover .account-system-left-pic5{
    background:url('../fonts/address-list-left-pic-5-hover.svg') center no-repeat;
}
.in-account-system-left-nav:hover .account-system-left-pic6,
.in-account-system-left-nav-hover .account-system-left-pic6{
    background:url('../fonts/address-list-left-pic-6-hover.svg') center no-repeat;
}


/*------------page-left-nav-text------------*/
.account-system-left-nav .account-system-left-text{
    color:#aab2bd;
    font-weight: 400;
}
.in-account-system-left-nav:hover .account-system-left-text,
.in-account-system-left-nav-hover .account-system-left-text{
    color:#609ee9; 
}


/*------------page-left-nav-arrow------------*/
.account-system-left-arrow{
    width:16px ;
    height: 16px;
    position: absolute;
    right:20px;
    top:14px;
    background:url('../fonts/left-arrow-down.svg') center no-repeat;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


/*------------account-system-left-secondary-nav------------*/ 
.account-system-left-secondary-nav li{
    height:30px;
    line-height: 30px;
    padding-left: 50px;
}
.account-system-left-secondary-nav li a{
    display: block;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #aab2bd;
}
.account-system-left-secondary-nav li:hover{
    background-color: #202836; 
}
.account-system-left-secondary-nav li:hover a{
    color:#fff;
}
.account-system-left-secondary-nav li.nav-hover {
    background-color: #202836;
}
.account-system-left-secondary-nav li.nav-hover a{
    color:#fff;
}
/*-------------- page right --------------*/ 
.account-system-right{
    position: relative;
    z-index: 30;
    min-width:848px;
    width: calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: -moz-calc(100% - 200px); 
    height: 100%;
    background-color:#f5f7fa;
    float: left;
}

.account-system-cont-title{
    height: 50px;
    line-height: 50px;
    width: 100%;
    padding-left: 24px;
    border-bottom: 1px solid #e6e9ed;
}

.account-system-cont-scroll{
    margin: 24px;
    min-width: 875px;
    width: calc(100% - 48px);
    width: -webkit-calc(100% - 48px);
    width: -moz-calc(100% - 48px);
    height: -webkit-calc(100% - 98px);
    height: -moz-calc(100% - 98px);
    height: calc(100% - 98px);
    background-color: #fff;
    box-shadow: 0px 1px 2px 0px rgba(44,62,79,0.05);
    border-radius: 4px;
    overflow-y:auto;
    overflow-x:hidden;  
}

/*------------Breadcrumb--------------*/
/*-Breadcrumb-*/
.breadcrumb > li + li:before {content: "";padding: 0 10px;background: url(../fonts/break-arrow-right.svg) 6px 5px no-repeat; width: 5px;height:9px; }
.breadcrumb { padding: 0;margin-bottom: 0;font-size: 12px;border-radius: 0;background: #F5F7FA;}
.breadcrumb li.active{ color: #323133}

/*-----------Breadcrumb-right-btn------------*/
.breadcrumb-right-btn{ 
    position: absolute;
    right:98px;
    top: 14px;
}
.product-menu-empty{text-align: center; }

.product-menu-empty-bg{
	display: block;
	padding:20px 0 10px;
	width: 92px;
	margin: 0 auto;
	height: 92px;
	background-size: 100%;
	background:url('../fonts/empty.svg') center no-repeat #fff;
}
.product-menu-empty-bg p{ line-height: 24px;}
/*------------------- login ----------------*/
/*loading*/
.modal-loading{position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; z-index:30; /*background:rgba(142,161,191,0.18)*/background-color: #fff;z-index:3000}
.load{width:196px; position:absolute; z-index:2; top:50%; left:50%; margin-left:-98px; margin-top:-30px;  background:#fff; padding:10px 20px; border-radius:4px; box-shadow:0px 1px 2px 0px rgba(44,62,79,0.05); border:1px solid #e6e9ed;  line-height:28px; color:#656d78;   font-size:12px;}
.load svg{ height:28px; width:28px; margin:0 6px 0 0; float:left;overflow:visible;}
.load .g-circles{-webkit-transform:scale(0.9) translate(7px, 7px); -ms-transform:scale(0.9) translate(7px, 7px);transform:scale(0.9) translate(7px, 7px);}
.load circle{fill:dodgerblue; fill-opacity:0; -webkit-animation:opacity 1.2s linear infinite; animation:opacity 1.2s linear infinite;}
.load circle:nth-child(12n + 1){-webkit-animation-delay:-0.1s; animation-delay:-0.1s;}
.load circle:nth-child(12n + 2){ -webkit-animation-delay:-0.2s; animation-delay:-0.2s;}
.load circle:nth-child(12n + 3){-webkit-animation-delay:-0.3s; animation-delay:-0.3s;}
.load circle:nth-child(12n + 4){ -webkit-animation-delay:-0.4s; animation-delay:-0.4s;}
.load circle:nth-child(12n + 5){ -webkit-animation-delay:-0.5s; animation-delay:-0.5s;}
.load circle:nth-child(12n + 6){ -webkit-animation-delay:-0.6s; animation-delay:-0.6s;}
.load circle:nth-child(12n + 7){ -webkit-animation-delay:-0.7s; animation-delay:-0.7s;}
.load circle:nth-child(12n + 8){ -webkit-animation-delay:-0.8s; animation-delay:-0.8s;}
.load circle:nth-child(12n + 9){ -webkit-animation-delay:-0.9s; animation-delay:-0.9s;}
.load circle:nth-child(12n + 10){ -webkit-animation-delay:-1s; animation-delay:-1s;}
.load circle:nth-child(12n + 11){ -webkit-animation-delay:-1.1s; animation-delay:-1.1s;}
.load circle:nth-child(12n + 12){ -webkit-animation-delay:-1.2s; animation-delay:-1.2s;}
.load .g-circles--v2 circle{ fill-opacity:0; stroke-opacity:0; stroke-width:1; stroke:yellowgreen; -webkit-animation-name:opacity-stroke, colors, colors-stroke;animation-name:opacity-stroke, colors, colors-stroke}
.load .g-circles--v3 circle{ fill-opacity:1; -webkit-animation-name:opacity, colors; animation-name:opacity, colors;}
.load .g-circles--v4 circle{fill-opacity:1; fill:orange; -webkit-transform-origin:60px 60px; -ms-transform-origin:60px 60px; transform-origin:60px 60px;-webkit-animation-name:opacity, transform; animation-name:opacity, transform;}
@-webkit-keyframes opacity{
  3%{ fill-opacity:1;}75%{fill-opacity:0;}}
@keyframes opacity{
    3%{ fill-opacity:1;}75%{ fill-opacity:0;}}
@-webkit-keyframes opacity-stroke{
  10%{ stroke-opacity:1;}85%{ stroke-opacity:0;}}
@keyframes opacity-stroke{
  10%{ stroke-opacity:1;}85%{ stroke-opacity:0;}}
@-webkit-keyframes colors{
  0%{ fill:yellowgreen; }10%{ fill:gold;}75%{ fill:crimson;}}
@keyframes colors{
  0%{ fill:yellowgreen;}10%{ fill:gold;}75%{ fill:crimson;}}
@-webkit-keyframes transform{
  10%{ -webkit-transform:scale(0.75); transform:scale(0.75);}}
@keyframes transform{
  10%{ -webkit-transform:scale(0.75); transform:scale(0.75);}}

.back-home:before{
	content:'';
	padding: 8px;
	background: url('../fonts/back-home.svg') center no-repeat; 
}
.back-home{
	color:#fff;
	font-size: 12px;
}
.back-home:focus{
	color:#fff;
}
.back-home:hover span{
	color:#fff;
	text-decoration: underline;
}

.back-home span{
	padding-left: 8px
}


.account-system-header-function .header-qr-code-box a span{
    position: absolute;
    display: block;
    width: 9px;
    height: 9px;
    background-color: #ff9f00;
    border-radius: 50%;
    right:4px;
    top:7px;
}

@media (max-width: 768px){ 
    .w480{width: auto !important;}
    .xs-block{ display: block;margin-top:3px;}
    .xs-padding-none{padding: 0;}
    .xs-icon-block{display: block;width: 48px;height: 48px;margin: 0 auto 16px;}
    .xs-btn-info,.xs-btn-default,.xs-btn-success{height: 34px;line-height: 34px;border-radius: 20px;padding:0 16px;}
    
    .xs-btn-info{background-color: #609ee9;border: 1px solid #609ee9!important;color: #fff;}
    .xs-btn-default{background-color: #fff;border: 1px solid #c8c8c9!important;color: #c8c8c9}
    .xs-btn-info:hover,.xs-btn-success:hover{color: #fff!important;text-decoration: none;}
    .xs-btn-default:hover{color: #c8c8c9!important}
    .btn-success.btn-xs.xs-btn-success{line-height: 18px; padding: 7px 16px!important;margin-top: -4px;}
    .account-system-cont-scroll{
    min-width: 280px;
    width: 100%;
}
}