html,body{
    height: 100%;
}
.wrapper{
    margin-bottom: -40px;
    min-height: 100%;
    width: 100%;
}
.wrapper .header{
    background-color: #3da8f5;
    padding: 5px;
    color: white;
    overflow: hidden;
}
.header .setting{
    /*width: 10%;*/
    float: right;
    position: relative;
    margin-top: 15px;
    margin-right: 10px;
}
.click-img{
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: -10px;
}
.header .setting span{
    /*margin-left: 5px;*/
    cursor: pointer;
    margin-right: 10px;
}
.header .setting label{
    margin-right: 10px;
}
.header .setting select{
    border: none;
    padding: 2px 5px;
}
.user-setting,.language-setting{
    background-color: white;
    color: #666;
    border-radius: 3px;
    text-align: center;
    position: absolute;
    top: 25px;
    left: -20px;
    display: none;
    padding: 0 8px;
    width: 125px;
    border: 1px solid #eee;
}
.setting:hover > .user-setting{
    display: inline-block;
}
.system-setting:hover > .language-setting{
    display: inline-block;
}
.setting .user-setting p ,.system-setting .language-setting p{
    padding: 4px 0;
}
.setting .user-setting p span ,.system-setting .language-setting p span{
    margin-right: 0;
    cursor: pointer;
}
.setting .user-setting p span:hover{
    color: #3da8f5;
}
.system-setting .language-setting p span:hover{
    color: #3da8f5;
}
.header .title{
    font-size: 32px;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 45px;
}
.header .logout{
    position: relative;
    float: right;
    padding: 28px 10px;
    right: 10px;
}
.logout-btn{
    width: 40px;
    height: 40px;
}
.logout-tip{
     display: none;
    position: absolute;
    z-index: 9;
    color: #666;
    top: 33px;
    left: -20px;
    background-color: white;
    padding: 2px 3px;
}
.logout-btn:hover + .logout-tip{
    display: inline;
}
.wrapper .content{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 60px;
}
.content .nav-wrap{
    margin-top: 10px;
    margin-left: 1%;
}
.nav-img{
    width: 85%;
}
.nav-wrap .nav-btn{
    float: left;
    text-align: center;
    margin-right: 2%;
    cursor: pointer;
    width: 14.5%;
    display: block;
    /*height: 125px;*/
}
.nav-wrap .active-text{
    color: #F7B348;
    font-weight:bold;
}
.add-hover:hover >p{
    color: #F7B348;
    font-weight: bold;
}
.active-img{
    display: none;
    margin: 0 auto;
}
.add-hover:hover>.grey-img{
    display: none;
}
.add-hover:hover>.active-img{
    display: inline-block;
}
.content .list-wrap{
    /*background-color: #F5F5F5;*/
    background-color: #fbfaf8;
    /* background-color: #3da8f5; */
    padding: 10px 10px;
    margin-top: 30px;
    overflow: hidden;
}
.list-wrap .list-info{
    background-color: white;
    margin-bottom: 10px;
}
.list-info .list-left{
    float: left;
}
.list-info .list-right{
    float: right;
}
.list-info .right-adjust{
    float: right;
}
.upload-img{
    /*margin-left: 5px;*/
    margin-right: 10px;
    width: 20px;
}
.footer{
    bottom: 0;
    background-color: #3da8f5;
    width: 100%;
    color: white;
    text-align: center;
    /*height: 40px;*/
    line-height: 40px;
}
.no-item{
    text-align: center;
    font-size: 20px;
    padding: 20px 0;
    color: #666;
}
.wrapper .content .red-font{
    color: #F7B348;
}
.wrapper .content .green-font{
    color: green;
}
.popover-background{
    width: 100%;
    background: rgb(0, 0, 0);
    z-index: 99;
    position: fixed;
    top:0;
    left: 0;
    opacity: 0.3;
    filter:alpha(opacity=30);
    height: 100%;
    display: none;
}
.popover-box{
    z-index: 999;
    display: none;
    width: 400px;
    padding: 40px 0;
    opacity: 1;
    filter: alpha(opacity=100);
    text-align: center;
    border-radius: 5px;
    background-color: white;
    left: 50%;
    top: 50%;
    position: fixed;
    transform: translateX(-50%) translateY(-50%);
}
.login-box{
    /*padding: 40px 0 70px 0;*/
}
.popover-box .pop-title{
    font-size: 16px;
    color: #3da8f5;
    /*color: #F7B348;*/
    width: 60%;
    position: relative;
    margin: 0 auto;
    font-weight: bold;
    margin-bottom: 25px;
}
.popover-box .login-title{
    width: 60%;
}
.popover-box .pop-title img{
    width: 30px;
    margin-right: 15px;
    position: absolute;
    left: -20px;
    top: -5px;
}
.popover-box .pop-title span{
    /*padding-left: 20px;*/
    /*width: 180px;*/
    /*width: 160px;*/
    display: inline-block;
}
.popover-box .pop-content{
    text-align: left;
    /* margin-left: 20%; */
    margin: 0 auto;
    width: 70%;
    position: relative;
}
.popover-box .pop-content p{
    margin-bottom: 15px;
    position: relative;
}
.popover-box .pop-content p img{
    width: 20px;
    position: absolute;
    left: 10px;
}
.popover-box .pop-content p label{
    /*width: 100px;*/
    width: 70px;
    display: inline-block;
    text-align: right;
    margin-right: 15px;
}
.popover-box .pop-content p input{
    padding: 4px 15px;
    border: 1px solid #ddd;
    border-radius: 1px;
    display: inline-block;
}
.popover-box .pop-content p input:focus{
    border: 1px solid #3da8f5;
}
.popover-box .pop-footer{
    margin-top: 25px;
}
.popover-box .pop-footer button{
    padding: 5px 12px;
    background-color: #F7B348;
    color: white;
    cursor: pointer;
    border-radius: 3px;
    margin-right: 10px;
}
.settingBtn{
    left: 60px;
}
.list-wrap .par-set{
    margin-bottom: 15px;
    margin-left: 20px;
}
.list-wrap .par-set p{
    margin-bottom: 10px;
}
.list-wrap .par-set .par-title{
    color: black;
    font-weight: bold;
}
.list-wrap form{
    padding: 28px 10px;
    color: #666;
}
.list-wrap form input{
    padding: 3px 5px;
    border:1px solid #ddd;
}
.list-wrap form input:focus{
    border: 1px solid #3da8f5;
}
.list-wrap form p{
    margin-bottom: 20px;
}
.language-wrap{
    position: fixed;
    bottom: 0;
    right: 0;
    color: white;
    cursor: pointer;
}
/*.language-wrap:hover>.language-select{*/
    /*display: block;*/
/*}*/
/*.language-wrap:hover> .language-btn{*/
    /*display: none;*/
/*}*/
.language-wrap img{
    width: 100px;
    float: right;
}
.language-wrap .language-select{
    /*display: none;*/
    cursor: pointer;
}
.language-wrap .language-select p{
    background: #F7B348;
    padding: 10px 30px;
    border-bottom: 1px solid #eee;
    text-align: center;
}
.user-btn span{
    width: 45px;
    display: inline-block;
}
.button-border{
    border: 1px solid #ddd;
    padding: 3px 5px;
}
.content .list-wrap button{
    cursor: pointer;
    border: none;
    color: white;
    padding: 4px 15px;
    background-color: #3da8f5;
    border-radius: 3px;
}
.content .list-wrap .hidebtn{
    width: 60px;
    background-color: transparent;
    position: absolute;
    left: 206px;
    top: 0;
    height: 25px;
}
.content .list-wrap button.disabled{
    background-color: #f1f1f1;
}
.list-wrap .print-data,.list-wrap .scan-data ,.list-wrap .copy-data{
    border: 1px solid #eee;
    margin: 20px 0;
    color: #666;
    width: 26%;
    float: left;
    margin-right: 10%;
}
.list-wrap .print-data p,.list-wrap .scan-data p,.list-wrap .copy-data p {
    margin-bottom: 15px;
    /* padding-left: 20px; */
    text-align: center;
}
.print-data p span , .scan-data p span ,.copy-data p span{
    color: #3da8f5;
}
.list-wrap p label{
    /*width: 80px;*/
    display: inline-block;
    text-align: right;
    margin-right: 5px;
}
.list-wrap .title-type{
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    background-color: #f5f5f5;
    padding: 10px 0;
}
.list-wrap .search-wrap{
    background: #f5f5f5;
    padding: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.search-wrap div{
    float: left;
    margin-bottom: 10px;
}
.search-wrap .detail-btn{
    float: right;
}
.search-wrap input{
    border: 1px solid #ddd;
    padding: 3px 5px;
    margin-right: 20px;
    margin-left: 20px;
}
.search-wrap input:focus{
    border: 1px solid #3da8f5;
}
.delete-box,.message-box{
    width: 300px;
    color: #555;
    padding: 25px 0 0 0;
}
.delete-box .delete-title,.message-box .message-title{
    padding-bottom: 25px;
    border-bottom: 1px solid #ddd;
}
.delete-box .btn-wrap span{
    width: 48%;
    display: inline-block;
    border-right: 1px solid #ddd;
    padding: 15px 0;
    cursor: pointer;
}
.wrong-tip{
    /*display: inline-block;*/
    position: absolute;
    color: red;
    top: -20px;
    left: 40%;
    font-size: 12px;
    z-index: 9;
}
.detail-list{
    margin-top: 40px;
}
.detail-table{
    width: 100%;
    text-align: center;
    border: 1px solid #f5f5f5;
}
.detail-table tr th{
    color: #555;
    background: #f2f2f2;
    padding: 10px 5px;
    border-right: 1px solid #e9e9e9;
}
.detail-table tr td{
    color: #666;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 5px 3px;
}
.neat-set{
    float: left;
    display: inline-block;
    width: 90%;
    margin-left: 10px;
}
.btn-wrap{
    /*padding: 10px;*/
    color: #3da8f5;
    cursor:pointer;
}
.upload-box{
    padding: 20px 0 40px 0;
    text-align: center;
}
.detail-table tr:nth-child(odd) td {
    background-color: #f9f9f9;
}
.password-login,.qr-login{
    position: relative;
    height: 200px;
}
.password-login .qr-img{
    position: absolute;
    width: 60px;
    top: -40px;
    right: 0;
    cursor: pointer;
}
.qr-login .qr-img{
    position: absolute;
    width: 60px;
    top: -30px;
    right: 10px;
    cursor: pointer;
    /*background-color: blue;*/
    /*display: none;*/
}
.password-login .qr-img img,.qr-login .qr-img img{
    width: 100%;
    display: none;
}
.qr-tip{
    top: 0;
    left: -63px;
    position: absolute;
    border: 1px solid #eee;
    color: #3da8f5;
    padding: 1px 5px;
    display: none;
}
.login-hover:hover>.qr-tip{
    display: inline-block;
}
.qr-login .pop-footer{
    margin-top: 35px;
}
.qr-picture{
    width: 35%;
}
.preview-box{
    width: 35%;
    background: none;
}
.previewBtn{
    color:#3da8f5;
    cursor: pointer;
}
.btn{
    padding: 3px 12px;
    background-color: #3da8f5;
    color: white;
    cursor: pointer;
    border-radius: 3px;
    margin-right: 10px;
}
.pop-img img{
    width: 100%;
    height: 560px;
}
.preview-box .pop-btn{
    color: white;
    margin-top: 10px;
    overflow: hidden;
    padding: 10px 0;
}
.pop-btn .left-btn{
    float: left;
    width: 33.3%;
    text-align: left;
}
.pop-btn .middle-content{
    float: left;
    width: 33.3%;
}
.pop-btn .right-btn{
    float: right;
    width: 33.3%;
    text-align: right;
}
.pop-btn input{
    width: 40px;
    background: none;
    outline: none;
    padding: 2px 0;
    background: white;
    border: 1px solid #fff;
}
.wrapper select{
    border-radius: 3px;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    padding: 3px 20px 3px 10px;
    background: #fff url("../images/triangle-black.png") no-repeat right;
    background-size: .8rem;
}
.smart-form input{
    -webkit-appearance: none;
    border: 1px solid #eee;
    border-radius: 3px;
}
.smart-form input[type=radio]{
    color: #ccc;
    width: .5rem;
}
.file-name{
    margin-left: .5rem;
    color: #333;
    font-size: .5rem;
}


.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.smart-form .label {
    display: block;
    margin-bottom: 6px;
    line-height: 19px;
    font-weight: 400;
    font-size: 13px;
    color: #333;
    text-align: left;
}
.radio {
    position: relative;
    display: block;
    font-weight: 400;
}

.radio {
    margin-bottom: 4px;
    padding-left: 25px;
    line-height: 25px;
    color: #666;
    cursor: pointer;
    font-size: 13px;

}

.smart-form .button.state-disabled,  .smart-form .input.state-disabled input, .smart-form .radio.state-disabled, .smart-form .select.state-disabled, .smart-form .textarea.state-disabled, .smart-form .toggle.state-disabled {
    cursor: default!important;
    opacity: .6!important;
}

.smart-form .state-disabled.radio input+i:after,
.smart-form .state-disabled.radio input:checked+i,
.smart-form .state-disabled.toggle input:checked+i {
    border-color: #bbb !important;
    color: #333!important;
}
/*add*/
.smart-form .radio.radio-inline{
    display: inline-block;
}

/*add*/
.smart-form .radio input {
    position: absolute;
    left: -9999px;
}

.smart-form .radio i {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    width: 14px;
    height: 14px;
    outline: 0;
    border-width: 1px;
    border-style: solid;
    background: #f5f5f5;
}

.smart-form .radio i {
    border-radius: 50%;
}

.smart-form .icon-append,
.smart-form .icon-prepend,
.smart-form .input input,
.smart-form .radio i,
.smart-form .toggle i {
    border-color: #bbb;
    transition: border-color .3s;
    -webkit-transition: border-color .3s;
}

.smart-form .radio input:checked+i, .smart-form .toggle input:checked+i {
    border-color: #bbb;
}

.smart-form .radio input+i:after {
    position: absolute;
    opacity: 0;
    transition: opacity .1s;
    -webkit-transition: opacity .1s;
}

.smart-form .radio input+i:after {
    content: '';
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.smart-form .radio input+i:after {
    background-color: #888;
}
.smart-form .radio input:checked+i:after {
    opacity: 1;
}

.checkbox-label{
    width: 20px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    left: -3px;
    top: 4px;
}
.checkbox-label input{
    -webkit-appearance: none;
    outline: none;
    display: none;
}
.checkbox-label input[type="checkbox"] + span{
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url("../images/checkbox.png") no-repeat;
    background-size: 20px;
    background-position: 0 1px;
}
.checkbox-label input[type="checkbox"]:checked + span{background-position:0 -17px}

.ie-file,.ie-radio,.ie-checkbox{
    display: none;
}
a,input,label{-webkit-tap-highlight-color:rgba(255,0,0,0);}
#cprintform{
    position: relative;
}
.errorfom{
    position: absolute;
    left: 13px;
    top: 0;
    color: red;
    display: none;
}
.preview-box .img-item{
    padding: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

}
.preview-box .pop-img img{
    width: 100%;
    height: 100%;
    /*padding:1%;*/
    /*margin: 1%;*/
}
.preview-box .pop-btn{
    /*width: 120%;*/
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.preview-box .pop-img{
    background: #fff;
    height: 100%;
    width: 100%;

}
.preview-box.hprint{
    width: 375px;
    height: 530px;
    /*background-color: #fff;*/
    padding: 5px 0 40px 0;

}
.preview-box.hprint .img-item{
    /*padding: 3px;*/
    /*box-sizing: border-box;*/
}
.preview-box.hprint .pop-img img{
    width: 100%;
    height: 100%;
}
.preview-box .pop-btn{
    /*width: 120%;*/
    width: 100%;
    position: absolute;
    bottom: 0;
}
.preview-box.hprint2 .img-item{
    width: 100%;
    height: 50%;
}
.preview-box.hprint4 .img-item{
    width: 50%;
    height: 50%;
    float: left;
}
.preview-box.hprint6 .img-item{
    width: 50%;
    height: 33.33%;
    float: left;
}
.preview-box.hprint9 .img-item{
    width: 33.33%;
    height: 33.33%;
    float: left;
}
.preview-box.hprint16 .img-item{
    width: 25%;
    height: 25%;
    float: left;
}

.preview-box.vprint{
    width: 530px;
    height: 375px;
    background-color: grey;
    padding: 5px 0 40px 0;
}
@media screen and (max-width: 530px){
    .preview-box.vprint{
        width: 375px;
        height: 265px;
    }
}
.preview-box.vprint .img-item{
    /*padding: 3px;*/
    /*box-sizing: border-box;*/
    /*background-color: pink;*/
}
.preview-box.vprint2 .img-item{
    width: 48%;
    height: 100%;
    float: left;
}
.preview-box.vprint4 .img-item{
    width: 50%;
    height: 50%;
    float: left;
}
.preview-box.vprint6 .img-item{
    width: 33.33%;
    height: 50%;
    float: left;
}
.preview-box.vprint9 .img-item{
    width: 33.33%;
    height: 33.33%;
    float: left;
}
.preview-box.vprint16 .img-item{
    width: 25%;
    height: 25%;
    float: left;
}
.setting .user-setting .passwordBtn{
    display:none;
}