@charset "utf-8";
@import "font-awesome.min.css";
@import "open-sans-font.css";

/**** 初始化 *****/
*{padding:0; margin:0; box-sizing:border-box;}
html, body, table, input, select, textarea, pre{font-family:-apple-system, BlinkMacSystemFont, "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif, "Calibri", "Courier New", "Courier", monospace, "Microsoft YaHei", "微软雅黑"; font-size:14px; color:#555;}
img{border:0;}
table, input, textarea, select{font-size:1em;}
ul li{list-style:none;}
ul li ul {padding-left:20px; margin-left:20px;}
.clear-fix::after {display:block; height:0; content:"."; clear:both; visibility:hidden;}
.clear{clear:both;}
.hidden{display:none;}
.overflow-hidden{overflow:hidden;}
.error{color:#f00; font-weight:normal;}
a{color:#2a85f0; cursor:pointer;}
a:hover{color:#ff6666;}
*:disabled, *[disabled], [disabled] *{cursor:default!important;}
.blue{color:#06f;}
.red{color:#f00;}
.green{color:#0c0;}
.redStar{color:#f00; font-family:"宋体"; font-weight:normal; font-style:normal;}
.blackStar{color:#555; font-family:"宋体"; font-weight:normal; font-style:normal;}
.nowrap{white-space:nowrap!important; word-break:keep-all!important;}

/**** 清除 Select 默认样式 ****/
/**** IE ****/
select::-ms-expand {display: none;}
/**** Firefox Chorme ****/
select {appearance: none; -moz-appearance: none; -webkit-appearance: none; border: none; outline: none; background: url("arrow.png") no-repeat scroll right center transparent; padding-right: 20px!important; cursor:default;}/*** 箭头就用自己设计的箭头，padding 空出箭头的位置 ****/
/**** 清除 Select Option 默认样式 ****/
/**** IE ****/
option::-ms-expand {display: none;}
/**** Firefox Chorme ****/
option {-moz-appearance: none; -webkit-appearance: none; appearance: none;}
option:hover {color: #fff; background: #4682b4;}

/**** 清除 Input 默认样式
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset !important;}/* 去掉 Chrome 黄底 */
input::-webkit-credentials-auto-fill-button, input::-webkit-credentials-autofill-button {display: none !important; visibility: hidden; pointer-events:none; right: 0; position: absolute; /*隐藏 Safari 中 input 标签的 autofill 图标, 避免占用 input 元素额外的 padding，正常情况下存在 display: none!; 就可以了 */}
input::-webkit-calendar-picker-indicator, input::-webkit-inner-spin-button, input::-webkit-clear-button{display:none; visibility: hidden;}/* 隐藏type=date自带图标 */
::-webkit-input-placeholder {color:#ccc; /* WebKit browsers */}
::-moz-placeholder {color:#ccc; /* Mozilla Firefox */}
:-ms-input-placeholder {color:#ccc; /* Internet Explorer 10+ */}
::-ms-reveal {display: none; /* 隐藏微软浏览器（IE\Edge）密码框小眼睛 */}
input, button, select, textarea, a{outline:none;}


/* Global */
html, body, form, .page-wrap{min-height:100%; height:100%; overflow:hidden;}
body{background:#09253f url(../images/body-bg.jpg) center no-repeat; background-size:cover;}
.signin-page{width:460px; height:260px; padding:20px; background:#fff; position:absolute; top:50%; left:50%; margin-left:-230px; margin-top:-130px; outline:2px #0261a8 solid; box-shadow:0 0 20px rgba(0,0,0,0.3);}
.logo-box{height:72px; position:absolute; right:0; top:-37px; display:flex; justify-content:flex-end;}
.logo{width:70px; height:72px; background:#fff; border-radius:50%;/* border:2px #0261a8 solid;*/ box-shadow:0 -3px 6px rgba(0,0,0,0.1); margin-left:-5px; border-top:2px #0261a8 solid; background-clip:padding-box;}
.logo img{display:block; width:100%;}
.signin-page h1{color:#fff; font-weight:600; position:absolute; top:-32px; font-variant:small-caps; font-size:22px; text-shadow:1px 1px 0 rgba(0,0,0,1); margin-left:-20px; display:none;}
.login-title{font-size:16px; display:flex; align-items:center; padding-bottom:20px; color:#333;}
.login-title .add-on{height:24px; width:24px; background:url(../images/user.png) center no-repeat; background-size:100%; margin-right:10px;}
.form-box ul{margin:0 30px 10px;}
.signin-page .form-box .input-label{display:none;}
.form-box .input-box{position:relative; margin-top:-1px;}
.form-box .input-box .add-on-icon{position:absolute; right:5px; top:12px; width:16px; height:16px; opacity:0.3; cursor:text; z-index:20;}
.form-box .input-box .icon-user{background-image:url(../images/user-x.png); background-position:center; background-repeat:no-repeat; background-size:100%;}
.form-box .input-box .icon-lock{background-image:url(../images/lock-x.png); background-position:center; background-repeat:no-repeat; background-size:100%;}
.form-box .input-box .redStar{position:absolute; right:25px; top:15px;}
.form-box .input-box input{height:40px; line-height:40px; width:100%; border:1px #c6cacc solid; border-radius:0; padding:0 30px 0 10px;position:relative; z-index:0;}
.form-box .input-box input:focus{border:1px #3e98ec solid; outline:2px #add7ff solid; z-index:10;}
.btn-bar{text-align:center; padding:10px 0 0;}
.btn{height:36px; padding:0 20px; color:#fff; background:#3e98ec; border:1px #2e84d3 solid; border-radius:0; cursor:pointer; margin:0 10px;}
.btn:hover{background:#3e8adb;}
.btn-gray{background:#f8f8f8; color:#555; border:1px #ccc solid;}
.btn-gray:hover{background:#f2f2f2;}
.lblMsg{text-align:center; font-size:12px;}
#divOK{padding-top:100px; text-align:center; position:relative; display:none;}
#divOK::before{content:""; position:absolute; width:80px; height:80px; top:0; left:50%; margin-left:-40px; background:#fff url(../images/alert-icon-success.png) center no-repeat; background-size:100%; border-radius:50%; border:3px #d6dbdf solid;}
#divOK span{display:block; font-size:14px; color:#298c06;}
.signin-page .lblMsg br{display:none;}
.checkcode-box{position:absolute; right:5px; top:8px; z-index:20;}
.checkcode-box img{display:block;}

.cp-page{width: 860px; height: 600px; position: absolute; top: 50%; left: 50%; margin-left: -430px; margin-top: -300px; box-shadow:0 0 20px rgba(0,0,0,0.3); background: #fff; outline:2px #08569f solid;}
.cp-header{height:80px; background:#09253f url(../images/header-bg.jpg) center no-repeat; background-size:cover; display:flex; align-items:center; align-content:center; justify-content:space-between; padding:0 20px;}
.cp-header h1{color:#fff; font-weight:600; font-variant:small-caps; font-size:36px; text-shadow:1px 1px 0 rgba(0,0,0,1);}
.cp-header .logo-box{position:unset; height:60px;}
.cp-header .logo-box .logo{width:60px; height:60px; border:none;}
.cp-page .form-box{padding:30px;}
.cp-page .form-box ul{display:flex; align-items:center; margin-bottom:10px;}
.cp-page .form-box ul .input-label{width:260px; padding-right:10px; text-align:right;}
.cp-page .form-box ul .input-box{width:300px;}
.cp-page .lblMsg{text-align:left; position:absolute; left:650px; right:20px; bottom:295px;}

.help-info{margin:0 30px; padding-top:15px; border-top:1px #4a90e2 dotted; display:flex; align-items:stretch; justify-content:space-between; font-family:arial; font-size:12px; line-height:1.5em; color:#888;}
.help-info > ul:first-child{width:70%; padding-right:30px;}
.help-info ul, .help-info ol{margin-left:15px;}
.help-info ul > li{list-style:disc;}
.help-info ol > li{list-style: decimal;}

/* 平板 */
@media (min-width: 768px) and (max-width:1023px){
    .cp-page{width:calc(100% - 100px); max-width:860px; position:unset; margin:200px auto 0;}
    }

/* 手机 */
@media (max-width: 767px){
    body{background-position:right top}
    .signin-page{width:100%; height:calc(100% - 160px); position:absolute; left:0; bottom:0; top:unset; margin:0; background:none; outline:none; border-radius:0; border:none; border-top:1px rgba(255,255,255,0.3) solid; background-color:rgba(0,0,0,0.2); padding:20px 35px; overflow:auto;}
    .signin-page h1{top:-35px; display:none;}
    .logo-box{position:fixed; top:50px; left:0; right:0; display:flex; justify-content:center; padding-left:10px;}
    .logo{margin-left:-10px;}
    .login-title{color:#fff;}
    .signin-page .form-box .input-label{display:block; color:#fff;}
    .form-box .input-box{margin-top:5px; margin-bottom:15px;}
    .form-box ul{margin:0 auto;}
    .btn-bar{padding:0;}
    .btn{width:100%; height:44px; margin:10px 0;}
    .signin-page .lblMsg br{display:unset;}
    .checkcode-box{top:3px; right:3px;}

    .cp-page{width:100%; height:calc(100% - 180px); position:absolute; left:0; bottom:0; top:unset; margin:0; background:#fff; outline:none; border-radius:0; border:1px rgba(255,255,255,0.3) solid; overflow:auto;}
    .cp-header{background:none; position:fixed; top:0; left:0; right:0; padding:0 35px; display:block;}
    .cp-header h1{color:#fff; font-weight:600; font-variant:small-caps; font-size:22px; text-shadow:1px 1px 0 rgba(0,0,0,1); width:100%; text-align:center; position:absolute; left:0; bottom:-95px;}
    .cp-page .logo-box{height:70px; display:flex; justify-content:center; padding-left:10px; position:absolute; top:60px; left:0; right:0;}
    .cp-page .logo-box .logo{width:70px; height:70px; margin-left:-10px;}
    .cp-page .form-box{padding:30px 35px;}
    .cp-page .form-box ul{display:block; margin:0 0 10px;}
    .cp-page .form-box ul .input-label{width:100%; padding-right:0; text-align:left;}
    .cp-page .form-box ul .input-box{width:100%;}
    .cp-page .lblMsg{text-align:left; position:unset;}
    .help-info{margin:0; padding:20px; display:block;}
    .help-info > ul:first-child{width:100%; padding-right:0;}
    .help-info > ul + ul{margin-top:20px;}
}

@media screen and (max-device-height:900px) {
    .form-box .input-box input {height: 40px; line-height: 40px;}
    .form-box .input-box .add-on-icon {top:15px; right:10px; width:12px; height:12px;}
    .cp-page .lblMsg{bottom:325px;}
    .checkcode-box{top:8px; right:8px;}
}