@charset "utf-8";

body {
 font-size: 14px;
 font-family: 'STHeiti','Microsoft YaHei','宋体','arial';
 color: #566570;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%
}

html,body,div,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,iframe,input,textarea,select,label,article,aside,footer,header,menu,nav,section,time,audio,video {
 margin: 0;
 padding: 0
}
ul {
    display: inline-block;
    vertical-align: top;
}
li {
    display: inline-block;
    vertical-align: top;
}

article,aside,footer,header,hgroup,nav,section,audio,canvas,video {
 display: block
}

a {
 text-decoration: none;
 color: #566570
}

a:hover {
 color: #333
}

a:visited {
 color: #566570;
 text-decoration: none
}

textarea {
 resize: none
}

.posRel {
 position: relative
}

.disBlock {
 display: inline-block
}

.fl {
 float: left
}

.fr {
 float: right
}

.tc {
 text-align: center
}

.tr {
 text-align: right
}

.tl {
 text-align: left
}

.cl {
 clear: both
}

.fb {
 font-weight: bold
}

.hr20 {
 height: 20px;
 clear: both
}

.hr10 {
 height: 10px;
 clear: both
}

.overflowH {
 overflow: hidden
}

.marR10 {
 margin-right: 10px
}

.font12 {
 font-size: 12px
}

.font16 {
 font-size: 16px
}

.font18 {
 font-size: 18px
}

.font24 {
 font-size: 24px
}

.lineH25 {
 line-height: 25px
}

.lineH30 {
 line-height: 30px
}

.lineH32 {
 line-height: 32px
}

.aLine,a.aLine,a.aLine:hover,.aLine a:link,.aLine a:hover {
 text-decoration: underline
}

.aline,a.aline,a.aline:hover,.aline a:hover {
 text-decoration: underline
}

iframe,img {
 border: 0
}

img {
 vertical-align: middle
}

ul,ol,li {
 list-style: none
}

button {
 outline: 0;
 border: 0;
 font-family: 'STHeiti','Microsoft YaHei','宋体','arial';
 font-size: 14px;
 color: #696969
}

input,textarea {
 outline: 0;
 -webkit-user-modify: read-write-plaintext-only;
 border: 0;
 font-family: 'STHeiti','Microsoft YaHei','宋体','arial';
 font-size: 14px;
 color: #696969
}

select {
 outline: 0
}

option {
 font-size: 14px
}

input:focus,select:focus {
 border: 0
}

* {
 -webkit-tap-highlight-color: transparent
}

.submitBt {
 -webkit-appearance: none;
 display: block
}

.white,.white a,a.white,.white a:link,.white a:visited,.white a:hover,a.white:link,a.white:visited,a.white:hover {
 color: #fff
}

.blue,.blue a,a.blue,.blue a:link,.blue a:visited,a.blue:link,a.blue:visited {
 color: #008aff
}

.blue a:hover,a.blue:hover {
 color: #0077dc
}

.gray,.gray a,a.gray,.gray a:link,.gray a:visited,a.gray:link,a.gray:visited {
 color: #999
}

.gray a:hover,a.gray:hover {
 color: #666
}

.padBoxTb {
 padding: 10px 0
}

.header {
 height: 95px;
 width: 100%
}

.logo {
 width: 50%;
 height: 95px;
 display: block;
 float: left;
 overflow: hidden;
 text-indent: -999px;
 background: url(../images/logo.png) no-repeat 0 center
}

.logoOut {
 width: 120px;
 height: 105px;
 display: block;
 float: left;
 overflow: hidden;
 text-indent: -999px;
 background: url(../images/logo_loginout.png) no-repeat 0 0
}

.wrapMain {
 overflow: hidden;
 width: 100%;
 min-width: 1280px;
 padding-top: 105px;
 position: relative
}

.loginMainBg {
 width: 100%;
 height: 390px;
 background: #2090d8 url(../images/login_mainbg.jpg) no-repeat center center
}

.loginoutMainBg {
 width: 100%;
 height: 440px;
 background: #2090d8 url(../images/loginout_mainbg.jpg) no-repeat center center
}

.loginMain {
 margin: 0 auto 0 auto;
 margin-right: 5%
}

.change {
 position: absolute;
 top: 140px;
 bottom: 0;
 left: 0;
 right: 0
}

.loginBox {
 width: 550px;
 height: 376px;
 margin-top: 30px;
 height: 356px;
 overflow: hidden;
 float: right;
 background-color: #f3fbfd;
 border-radius: 5px;
 -webkit-box-shadow: 0 5px 5px #195c91;
 -moz-box-shadow: 0 5px 5px #195c91;
}

.tabBar {
 width: 100%;
 height: 25px;
 margin: 0;
 padding: 0;
 /*background-color:#1870a0*/
}/*.tabBar{width:100%;height:20%;background-color:#1870a0}*/
.tabBar li {
     width: 550px;
     /*height: 10px;*/
     float: left;
     cursor: pointer;
     text-align: center;
     font-size: 20px;
     font-weight: bold;
     color: rgba(0,0,0,0.65)
    }/*.tab{display:block;width:100%;height:30px;overflow:hidden;text-indent:-999px;margin:10px 0;border-right:#468db3 1px solid;background-image:url(../images/login_tab.png);background-repeat:no-repeat}*/
.tab1 {
    background-position: center -10px
}

.tab2 {
 background-position: center -70px
}

.tab3 {
 background-position: center -130px
}

.tab4 {
 background-position: center -190px
}

.tab5 {
 background-position: center -610px
}

.tab10 {
 background-position: center -736px
}

.tab11 {
 background-position: center -876px
}

.tab12 {
 background-position: center -1009px
}

.tab15 {
 background-position: center -1137px
}

.tab16 {
 background-position: center -1384px
}

.tab17 {
 background-position: center -1513px
}

.tab18 {
 background-position: center -1640px
}

.tab19 {
 background-position: center -1765px
}

.tab20 {
 background-position: center -1910px
}

.tabCertBind {
 background-position: center -490px
}

.tabBar li.dq {
 background-color: #f3fbfd;
 overflow: hidden;
 border-radius: 5px 5px 0 0
}

.tabBar li.dq .tab {
 border-right: #f3fbfd 1px solid
}

.tabBar li.dq .tab1 {
 background-position: center -250px
}

.tabBar li.dq .tab2 {
 background-position: center -310px
}

.tabBar li.dq .tab3 {
 background-position: center -370px
}

.tabBar li.dq .tab4 {
 background-position: center -430px
}

.tabBar li.dq .tab5 {
 background-position: center -670px
}

.tabBar li.dq .tab10 {
 background-position: center -803px
}

.tabBar li.dq .tab11 {
 background-position: center -943px
}

.tabBar li.dq .tab12 {
 background-position: center -1071px
}

.tabBar li.dq .tab15 {
 background-position: center -1201px
}

.tabBar li.dq .tab16 {
 background-position: center -1448px
}

.tabBar li.dq .tab17 {
 background-position: center -1577px
}

.tabBar li.dq .tab18 {
 background-position: center -1703px
}

.tabBar li.dq .tab19 {
 background-position: center -1837px
}

.tabBar li.dq .tab20 {
 background-position: center -1974px
}

.tabBar li.dq .tabCertBind {
 background-position: center -550px
}

.tabCon {
 padding: 15px 20px;
 display: none;
 margin-top: 30px
}

.tabCon10 {
    padding: 10px 130px;
    /*display: none;*/
    /*margin-top: 30px*/
}

.inputBox {
 border: #cad2d7 1px solid;
 border-radius: 3px;
 overflow: hidden;
 background-color: #fff
}

.inputBox li {
    !important;
 width: 485px;
 border-top: #cad2d7 1px solid;
 margin-top: -1px;
 height: 25px;
 padding: 12px 10px
}

.inputBox li input.inputTl {
 width: 100%;
 height: 20px;
 line-height: 20px;
 padding: 2px 0;
 color: #ccc
}

.input_ico {
 display: block;
 width: 25px;
 height: 25px;
 background-image: url(../images/login_ico.png);
 background-repeat: no-repeat
}

.icoUser {
 float: left;
 background-position: 0 0;
 padding-right: 10px;
 border-right: #ccc 1px solid
}

.icoPass {
 float: left;
 background-position: 0 -35px;
 padding-right: 10px;
 border-right: #ccc 1px solid
}

.icoYzm {
 float: left;
 background-position: 0 -70px;
 padding-right: 10px;
 border-right: #ccc 1px solid
}

.icoOtp {
 float: left;
 background-position: 0 -175px;
 padding-right: 10px;
 border-right: #ccc 1px solid
}

.icoSms {
 float: left;
 background-position: 0 -210px;
 padding-right: 10px;
 border-right: #ccc 1px solid
}

.icoDel {
 float: right;
 background-position: 0 -105px;
 cursor: pointer
}

.icoLook {
 float: right;
 background-position: 0 -140px;
 cursor: pointer
}

.inputLogin {
 width: 405px;
 float: left;
 height: 20px;
 line-height: 20px;
 padding: 2px 8px;
 color: #ccc
}

.inputLogin2 {
 width: 260px;
 float: left;
 height: 20px;
 line-height: 20px;
 padding: 2px 8px;
 color: #ccc
}

.loginBox .inputBox2 {
 border: #e2e2e2 1px solid;
 height: 30px;
 padding: 0 5px;
 overflow: hidden;
 border-radius: 3px;
 margin: 3px 0;
 background-color: #fff
}

.loginBox .inputBox2 input {
 width: 100%;
 height: 20px;
 line-height: 20px;
 padding: 5px 0;
 background: 0
}

.loginBox .selectBox {
 border: #e2e2e2 1px solid;
 height: 30px;
 overflow: hidden;
 border-radius: 3px;
 margin: 3px 0
}

.loginBox .selectBox .select {
 display: block;
 width: 100%;
 height: 30px;
 line-height: 30px;
 padding-right: 5px;
 padding-left: 5px;
 text-align: left;
 padding: 4px 2px 4px 2px\9
}

.yzmBar {
 margin-top: 40px;
 clear: both;
 height: 40px;
 line-height: 40px
}

.yzmBox {
 width: 145px;
 height: 25px;
 padding: 8px 10px 7px 10px;
 float: left;
 background-color: #fff;
 border-radius: 3px;
 margin-right: 10px
}

.inputYzm {
 width: 90px;
 float: left;
 height: 20px;
 line-height: 20px;
 padding: 2px 8px;
 color: #ccc
}

.yzmPic {
 width: 85px;
 height: 40px;
 overflow: hidden;
 float: left
}

.yzmBox2 {
 width: 273px;
 height: 25px;
 /*padding: 8px 10px 7px 10px;*/
 padding:12px 10px;
 float: left;
 background-color: #fff;
 border-radius: 3px;
 border:#cad2d7 1px solid;
}

.inputYzm2 {
 width: 130px;
 float: left;
 height: 20px;
 line-height: 20px;
 padding: 2px 8px;
 color: #ccc
}

.yzmBt {
 margin-top: 5px;
 display: block;
 width: 110px;
 height: 42px;
 line-height: 40px;
 text-align: center;
 float: right;
 font-size: 16px;
 background-color: #1870a0;
 border-radius: 3px;
 overflow: hidden
}

.zhengshuTxt {
 background-color: #fff;
 border-radius: 3px;
 line-height: 26px;
 font-size: 16px;
 padding: 10px 10px
}

a.loginBt {
 display: block;
 margin: 20px 0;
 height: 49px;
 line-height: 49px;
 font-size: 20px;
 text-align: center;
 background: url(../images/loginbt.png) repeat-x 0 0;
 border-radius: 5px;
 border: #208ad6 1px solid
}

a.loginBt:hover {
 background: url(../images/loginbt.png) repeat-x 0 -51px
}

input.loginBt {
 display: block;
 width: 330px;
 margin: 20px 0;
 height: 49px;
 line-height: 49px;
 font-size: 20px;
 text-align: center;
 background: url(../images/loginbt.png) repeat-x 0 0;
 border-radius: 5px;
 border: #208ad6 1px solid;
 color: #fff
}

input.loginBt:hover {
 background: url(../images/loginbt.png) repeat-x 0 -51px
}/*button.loginBt{display:block;width:330px;margin:15px 0;height:49px;line-height:49px;font-size:20px;text-align:center;background:url(../images/loginbt.png) repeat-x 0 0;border-radius:5px;border:#208ad6 1px solid;color:#fff}*/button.loginBt {
                                                                                                                                                                                                                                    display: block;
                                                                                                                                                                                                                                    width: 100%;
                                                                                                                                                                                                                                   /* margin: 15px 0;*/
                                                                                                                                                                                                                                    height: 49px;
                                                                                                                                                                                                                                    font-size: 20px;
                                                                                                                                                                                                                                    margin-top: 53px;
                                                                                                                                                                                                                                    text-align: center;
                                                                                                                                                                                                                                    background: url(../images/loginbt.png) repeat-x 0 0;
                                                                                                                                                                                                                                    border-radius: 4px;
                                                                                                                                                                                                                                    border: #208ad6 1px solid;
                                                                                                                                                                                                                                    color: #fff
                                                                                                                                                                                                                                   }

button.loginBt:hover {
 background: url(../images/loginbt.png) repeat-x 0 -51px
}

.warningBox {
 width: 335px;
 margin-top: 20%;
 float: right;
 padding-right: 35px;
 position: absolute;
 margin-left: 15%;
}

.warningBoxOut {
 width: 335px;
 margin-top: 20px;
 float: right;
 padding-right: 2px;
 position: relative
}

.warningBar {
 position: absolute;
 width: 100%;
 left: 0;
 z-index: 999
}

.wColor1 {
 color: #ff8400
}

.wColor2 {
 color: #18ff00
}

.wColor3 {
 color: #00fcff
}

.closeBt {
 display: block;
 width: 32px;
 height: 22px;
 float: left;
 background: url(../images/close_bt.png) no-repeat center center;
 cursor: pointer
}

.infoBt {
 display: block;
 width: 32px;
 height: 22px;
 float: left;
 background: url(../images/ico_prompt1.png) no-repeat center center;
 cursor: pointer
}

.closeBt1 {
 display: block;
 width: 32px;
 height: 22px;
 float: left;
 background: url(../images/close_bt.png) no-repeat center center;
 cursor: pointer
}

.warningBg {
 width: 350px;
 margin: 51px 0;
 line-height: 22px;
 border-radius: 5px;
 padding: 7px 10px 7px 0;
 background: url(../images/warning_bg.png) repeat 0 0;
 position: relative
}

.warningBgSetPasswordHint {
 width: 335px;
 margin: 11px 0;
 margin-top: 42px;
 line-height: 22px;
 border-radius: 5px;
 padding: 7px 10px 7px 0;
 background: url(../images/warning_bg.png) repeat 0 0;
 position: relative
}

.warningBgUserInfo {
 width: 335px;
 margin: 11px 0;
 line-height: 22px;
 border-radius: 5px;
 padding: 7px 10px 7px 0;
 background: url(../images/warning_bg.png) repeat 0 0;
 position: relative
}

.warningArr {
 display: block;
 width: 6px;
 height: 30px;
 background: url(../images/warningArr.png) no-repeat 0 0;
 position: absolute;
 right: -6px;
 top: 0;
 z-index: 1
}

.warningTxt {
 overflow: hidden;
 line-height: 22px
}

.footerNavBar {
 width: 1050px;
 height: 100px;
 margin: 38px auto 15px;
 background: url(../images/login_navline.png) no-repeat right center
}

.footerNavBar li {
 width: 150px;
 height: 100px;
 float: left;
 text-align: center;
 background: url(../images/login_navline.png) no-repeat left center
}

.fNav {
 display: inline-block;
 width: 60px;
 height: 60px;
 background-image: url(../images/login_footernav.png);
 background-repeat: no-repeat
}

.fNav1 {
 background-position: 0 0
}

.fNav2 {
 background-position: 0 -70px
}

.fNav3 {
 background-position: 0 -140px
}

.fNav4 {
 background-position: 0 -210px
}

.fNav5 {
 background-position: 0 -280px
}

.fNav6 {
 background-position: 0 -350px
}

.fNav7 {
 background-position: 0 -420px
}

.footerNavBar .tit {
 display: block;
 width: 100%;
 clear: both;
 line-height: 18px;
 padding-top: 4px
}

.copyright {
 line-height: 26px;
 width: 100%;
 text-align: center;
 padding: 20px 0
}

.passwordLayer {
 display: block;
 width: 230px;
 height: 25px;
 line-height: 25px;
 background-color: #fff;
 position: absolute;
 left: 47px;
 padding: 0 5px;
 overflow: hidden;
 top: 12px;
 color: #ccc
}

.passwordLayer span {
 display: none
}

.mibaoScroll {
 height: 220px;
 overflow-y: auto;
 padding-right: 5px;
 margin-bottom: 10px
}

.buttonBarCol2 li {
 width: 50%;
 float: left;
 overflow: hidden
}

a.button1 {
 display: block;
 margin: 10px 0;
 height: 38px;
 line-height: 38px;
 font-size: 18px;
 text-align: center;
 background: url(../images/loginbt.png) repeat-x 0 0;
 border-radius: 5px;
 border: #208ad6 1px solid;
 margin-right: 3px
}

a.button1:hover {
 background: url(../images/loginbt.png) repeat-x 0 -51px
}

input.button1 {
 display: block;
 margin: 10px 0;
 height: 38px;
 line-height: 38px;
 font-size: 18px;
 text-align: center;
 background: url(../images/loginbt.png) repeat-x 0 0;
 border-radius: 5px;
 border: #208ad6 1px solid;
 color: #fff;
 margin-right: 3px
}

input.button1:hover {
 background: url(../images/loginbt.png) repeat-x 0 -51px
}

a.button2 {
 display: block;
 margin: 10px 0;
 height: 38px;
 line-height: 38px;
 font-size: 18px;
 text-align: center;
 background: url(../images/loginbt.png) repeat-x 0 -110;
 border-radius: 5px;
 border: #cad2d7 1px solid;
 margin-left: 3px
}

a.button2:hover {
 background: url(../images/loginbt.png) repeat-x 0 -170px
}

input.button2 {
 display: block;
 margin: 10px 0;
 height: 38px;
 line-height: 38px;
 font-size: 18px;
 text-align: center;
 background: url(../images/loginbt.png) repeat-x 0 -110;
 border-radius: 5px;
 border: #cad2d7 1px solid;
 margin-left: 3px
}

input.button2:hover {
 background: url(../images/loginbt.png) repeat-x 0 -170px
}

.loginOutBox {
 width: 550px;
 height: 275px;
 padding: 20px;
 background-color: #f3fbfd;
 border-radius: 3px;
 float: right;
 -webkit-box-shadow: 0 5px 5px #195c91;
 -moz-box-shadow: 0 5px 5px #195c91;
 margin-top: 65px;
 font-size: 16px;
 color: #666
}

.loginOutTxt {
 font-size: 26px;
 position: absolute;
 z-index: 9;
 top: 160px;
 left: 70px
}

.loginOutBox .tit {
 height: 30px;
 line-height: 30px
}

.loginOutcon {
 height: 130px;
 overflow-y: auto;
 margin: 5px 0;
 padding: 18px 18px;
 background-color: #fff;
 border-radius: 3px;
 border: #cad2d7 1px solid
}

.loginOutcon li {
 line-height: 20px;
 padding: 5px 0;
 clear: both
}

.loginOutBt {
 width: 330px;
 height: 50px;
 margin: 20px auto 40px auto
}

.warningBox.warningBoxMibao {
 margin-right: 370px;
 margin-top: 0
}

.loginBoxMibao {
 height: auto;
 margin-top: 5%;
 overflow: hidden;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 z-index: 100;
 position: absolute;
 right: 0;
 min-height: 380px;
 margin: 0 auto;
 left: 10%;
}

.loginCoverBg {
 z-index: 10;
 left: 0;
 top: 0;
 position: fixed;
 opacity: .4;
 filter: Alpha(Opacity=40);
 width: 100%;
 height: 100%;
 display: block;
 background-color: #000
}

.loginBox .inputMibao {
 border: #e2e2e2 1px solid;
 height: 40px;
 padding: 0 10px;
 overflow: hidden;
 border-radius: 3px;
 margin: 5px 0;
 background-color: #fff
}

.loginBox .inputMibao input {
 width: 100%;
 height: 20px;
 line-height: 20px;
 padding: 10px 0;
 background: 0
}

.loginBox .selectBox.selectMibao {
 border: #e2e2e2 1px solid;
 height: 40px;
 overflow: hidden;
 border-radius: 3px;
 margin: 5px 0
}

.loginBox .selectBox.selectMibao .select {
 display: block;
 width: 100%;
 height: 40px;
 line-height: 30px;
 padding-right: 5px;
 padding-left: 5px;
 text-align: left;
 padding: 4px 2px 4px 2px\9
}

.hrMibao {
 height: 5px;
 overflow: hidden;
 margin: 10px 0 5px 0;
 border-top: #e2e2e2 1px solid
}

.loginMainRel {
 position: relative;
 height: 390px
}

.loginBoxAbsolute {
 height: auto;
 overflow: hidden;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 z-index: 100;
 position: absolute;
 right: 0;
 top: 50%;
 min-height: 280px
}

select:focus {
 border: #fff 1px solid
}

.promptTit {
 height: 62px;
 line-height: 62px;
 padding: 10px 50px;
 font-size: 24px
}

.promptTit span.promptIco {
 display: block;
 float: left;
 width: 62px;
 height: 62px;
 margin-right: 10px
}

.promptTit span.promptIco img {
 width: 62px;
 height: 62px
}

.promptTxt {
 min-height: 100px;
 padding: 10px 50px;
 font-size: 18px;
 line-height: 28px;
 color: #666
}

.promptTxt2 {
 min-height: 100px;
 padding: 10px 50px 20px 50px;
 font-size: 16px;
 line-height: 26px;
 color: #666
}

.promptTxt2 p {
 padding: 8px 0
}

.popBox {
 background-color: #fff;
 border-radius: 3px;
 overflow: hidden;
 z-index: 100011;
 visibility: hidden;
 position: fixed
}

.popTitBar {
 height: 30px;
 line-height: 30px;
 padding: 5px 10px 5px 20px;
 background: url(../images/pop_titbg.png) repeat-x 0 0;
 cursor: move
}

.popCon {
 padding: 10px 20px;
 overflow-y: auto
}

.popCon p {
 padding: 8px 0
}

.colseBt {
 display: inline-block;
 width: 30px;
 height: 30px;
 overflow: hidden;
 text-indent: -999px;
 background: url(../images/close.png) no-repeat center center
}

.chaxunBt,.chongzhiBt,a.chaxunBt,a.chongzhiBt {
 display: inline-block;
 width: 110px;
 height: 30px;
 border-radius: 3px;
 overflow: hidden;
 line-height: 30px;
 text-align: center;
 margin-left: 10px
}

.chaxunBt {
 background: url(../images/bar_bg.png) repeat-x 0 0;
 border: #208ad6 1px solid
}

.chongzhiBt {
 background: url(../images/bar_bg.png) repeat-x 0 -40px;
 border: #cad2d7 1px solid
}

.loginText {
 margin-left: 30%
}

.loginTe {
 margin-left: 39%;
 margin-bottom: 1%
}

.loginImg {
 margin-left: 15%
}

.loginT {
 margin-left: 23%
}



.login-wrap{
 position:relative;
 width:100%;
 height: 100vh;
 overflow: hidden;
 /*background: url("./img/login-bg2.png");*/
 background-repeat: no-repeat;
 background-size: 100% 100%;
}
.login-formContainer{
 width:550px;
 height:580px;
 margin: auto;
 margin-top: 189px;
 background:rgba(255,255,255,0.65);
}
.loginForm-header{
 position: relative;
 width: 100%;
 height: 135px;
 margin-bottom: 5px;
}
.loginForm-headerLeft{
 display:inline-block;
 margin-top:38px;
 margin-left:38px;
 /*border:1px solid;*/
}

.loginForm-headerLeftTitle{
 font-size:40px;
 font-weight: bold;
 color:rgba(29,95,166,1);
}

.loginForm-headerLeftDes{
 font-size:15px;
 font-weight:bold;
 line-height:25px;
 color:rgba(3,73,152,1);
 margin-top:18px;
 letter-spacing:3px;
}

.loginForm-headerRight{
 display:inline-block;
 height: 100%;
 float:right;
 padding: 8px 5px 0 0;
 /*border:1px solid;*/
}

.loginForm-headerRightImg{
 position: relative;
 width:120px;
 height:120px;
 float:right;
 cursor: pointer;
 background-image: url("../images/qrcode_ui.png");
 background-repeat: no-repeat;
 background-size: 101% 100%;
}
.loginForm-headerImgDes {
 position: absolute;
 top: 45%;
 left: calc(-100% - 7px);
 transform: translateY(-50%);
 font-size: 18px;
 font-weight: bold;
 color: rgba(24, 144, 255, 1);
 padding: 5px 18px;
 white-space: nowrap;
 background: rgba(255, 255, 255, 0.45);
 user-select: none;
}
.loginForm-headerImgDes:after{
 position: absolute;
 right:-7px;
 top:50%;
 transform: translateY(-50%);
 content:'';
 display: inline-block;
 width:0;
 height:0;
 border-left: 7px solid rgba(255,255,255,0.45);
 border-top: 7px solid transparent;
 border-bottom: 7px solid transparent;
}

.loginForm-content{
 width:100%;
 margin-top:33px;
}

.loginForm-QrCode{
 width:100%;
 margin-top:33px;
 padding: 30px;
 text-align: center;
}

.loginForm-QrCodeImg{
 display: inline-block;
}

.resetQrCode{
 font-size: 18px;
 font-weight: bold;
 margin-top: 20px;
 color:#666;
 user-select: none;
 cursor: pointer;
}
.loginWay-tabGroup{
 height:50px;
 /*border:1px solid;*/
}
.loginWay-tab{
 display: inline-block;
 width:50%;
 height:100%;
 text-align: center;
 font-size:20px;
 font-weight:bold;
 color:rgba(0,0,0,0.65);
 padding: 0  30px;
 float:left;
 /*border:1px solid;*/
}

.loginWay-tabTitle{
 width:100%;
 height: 100%;
 display: inline-block;
 cursor: pointer;
 user-select: none;
}
.loginWay-tabActive{
 color: #1890FF;
 box-shadow: 0 -3px 0 0 #1890FF inset;
}

.loginWay-tabContent{
 display: block;
}
.loginWay-tabContentHidden{
 display: none;
}

.loginWay-pwdLogin{

}
.loginWay-tabList{

}
.loginWay-tabItem{
 height: 53px;
 margin: 39px 30px 32px;
 /*border:1px solid;*/

}
.loginWay-tabItem:not(:first-child) {
 margin: 30px 30px 36px;
}
.loginWay-input{
 position: relative;
 height: 53px;
}
.loginWay-input input{
 width: 100%;
 height: 100%;
 font-size: 16px;
 padding-left:45px;
 background:rgba(255,255,255,1);
 border:1px solid rgba(217,217,217,1);
 border-radius:4px;
 box-sizing: border-box;
}

.inputTips{
 color: #F43530;
}
.loginWay-tabItemIcon{
 position: absolute;
 left: 20px;
 top:48%;
 transform: translateY(-50%);
 display: inline-block;
 width: 16px;
 height: 19px;
 background-repeat: no-repeat;
 background-size: 101% 100%;
}
.loginWay-userIcon{
 /*background-image: url("./img/login-user.png");*/
}
.loginWay-pwdIcon{
 /*background-image: url("./img/login-pwd.png");*/
}
.loginWay-checkPwd{
 position: absolute;
 display: inline-block;
 width: 25px;
 height: 25px;
 right:20px;
 top:50%;
 transform: translateY(-50%);
 /*background-image: url("./img/login-check.png");*/
 background-repeat: no-repeat;
 background-size: cover;
 cursor: pointer;
}
.loginWay-phoneIcon{
 /*background-image: url("./img/login-phone.png");*/
}
.loginWay-verifyIcon{
 /*background-image: url("./img/login-duanxin.png");*/
}

.login-verifyText{
 position: absolute;
 right: 20px;
 top:50%;
 transform: translateY(-50%);
 font-size: 15px;
 color:#fff;
 padding: 4px 10px;
 border-radius: 16px;
 background: rgba(24,144,255,0.7);
 cursor: pointer;
 user-select: none;
}

.login-options{
 margin:0 30px;
}

.login-option{
 display:inline-block;
 font-size:17px;
 font-weight:bold;
 color:rgba(24,144,255,1);
 cursor: pointer;
 user-select: none;
}

.login-optionRight{
 float:right;
}

.login-optionCheck{
 position: relative;
 display:inline-block;
 width:16px;
 height: 16px;
 vertical-align: middle;
 border:1px solid;
 background: #c0ccda;
 border-radius: 2px;
}

.login-checkIcon{
 position: absolute;
 width:100%;
 height:100%;
 background: rgba(24,144,255,1);
 box-shadow: 0 0 1px 1px rgba(24,144,255,1);
 border-radius: 2px;
 /*top:50%;*/
 /*left:50%;*/
 /*width: 10px;*/
 /*height:5px;*/
 /*display: inline-block;*/
 /*margin-left: -5px;*/
 /*margin-top:-5px;*/
 /*transform: rotate(-45deg);*/
 /*border-left:1px solid;*/
 /*border-bottom: 1px solid;*/
}

.login-optionText{
 display:inline-block;
}
.login-footer{
 margin:40px 30px 0;
 overflow: hidden;
}

.login-btn{
 width:100%;
 height:53px;
 font-size:20px;
 font-weight:bold;
 color:rgba(255,255,255,1);
 background:rgba(24,144,255,1);
 border-radius:4px;
 letter-spacing: 4px;
 cursor: pointer;
 border:none;
 user-select: none;
}

.login-footer:active{
 /*height:52px;*/
 padding: 0px 0px 0px 1.5px;
}

.loginForm-resetPwdBox{
 padding: 0 30px 30px;
}

.loginForm-resetPwdBox .loginWay-tabItem{
 margin: 20px 0 20px;
}

.loginForm-resetPwd{
 width:100%;
 margin-top:33px;
}
.changePwd-back{
 display: inline-block;
 font-size: 18px;
 font-weight: bold;
 margin-top: 15px;
 color:#666;
 user-select: none;
 cursor: pointer;
}
.changePwd-footer{
}
.changePwd-submit{
 overflow: hidden;
}
.changePwd-footer:active{
 padding: 0px 0px 0px 1.5px;
}

#zhezhao {
 width: 100%;
 height: 100%;
 display: flex;
 padding-top: 6rem;
 /*align-items: center;*/
 justify-content: center;
 position: absolute;
 background-color: #f0f0f0;
 z-index: 2;
}

#zhezhao svg {
 width: 150px;
 height: 150px;
}

* {
 box-sizing: border-box;
}

.bg-group {
 position: absolute;
 top: 15vh; /* 关键参数：整体内容距离顶部的垂直位置（30%视口高度） */
 left: 50%; /* 水平居中第一步：将容器左边缘定位到视口水平中心 */
 transform: translateX(-50%); /* 水平居中第二步：向左移动自身50%宽度，实现容器整体居中 */
 display: flex;
 flex-direction: column; /* 子元素垂直排列（上背景图在下背景图上方） */
 justify-content: space-between;
 gap: 20px; /* 两个背景图之间的垂直间距 */
 align-items: center; /* 确保组内两个背景图水平中心线对齐（视觉统一） */
 padding: 0 20px; /* 左右内边距：适配小屏设备，避免背景图触边 */
 height: 85vh;
}

/* 上方背景图容器：承载加载动画的背景图容器
   - 固定尺寸260px×284px（与背景图比例匹配）
   - 相对定位（position: relative），作为加载动画的定位基准 */
.bg-container-top {
 position: relative;
 width: 260px;
 height: 284px;
}

/* 下方背景图容器：仅显示标题背景图的容器
   - 尺寸370px×300px（根据实际背景图比例调整）
   - overflow: hidden：确保背景图超出容器部分被裁剪，不破坏布局 */
.bg-container-bottom {
 width: 37rem;
 height: 10rem;
 max-width: 25rem;
 overflow: hidden;
}

/* 上方背景图样式：加载动画所在的背景图
   - 宽高100%：填满父容器（260px×284px）
   - 背景图路径：./image/circle_bg.png（本地图片）
   - background-size: cover：图片按比例缩放，填满容器且不变形
   - background-position: center：图片在容器内居中显示
   - 8px圆角：轻微圆角优化视觉效果 */
.loading-bg-top {
 width: 100%;
 height: 100%;
 background-image: url("../images/circle_bg.png");
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 border-radius: 8px;
}

/* 下方背景图样式：标题背景图
   - 宽高100%：填满父容器（370px×300px）
   - 背景图路径：./image/title_bg.png（本地图片）
   - 其他参数与上方背景图一致，保持显示效果统一 */
.loading-bg-bottom {
 width: 100%;
 height: 100%;
 background-image: url("../images/title_bg.png");
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

/* 加载动画容器：所有圆环和文字的父容器
   - 绝对定位在上方背景图正中心（top:50% + left:50% + transform平移）
   - 固定尺寸150px×150px：作为圆环尺寸的基准 */
.loading-container {
 position: absolute;
 top: 50%; /* 垂直方向定位到父容器50%高度处 */
 left: 50%; /* 水平方向定位到父容器50%宽度处 */
 transform: translate(-50%, -50%); /* 向左、向上移动自身50%，实现精准居中 */
 width: 150px;
 height: 150px;
}

/* 外层静止圆环：作为动画的外边界参考
   - 尺寸与加载容器一致（150px×150px）
   - 1px深灰色边框，透明背景
   - 50%圆角：实现圆形效果 */
.outer-ring {
 width: 100%;
 height: 100%;
 border: 1px solid #333; /* 边框宽度和颜色：细边框，深灰色 */
 border-radius: 50%; /* 圆形关键属性 */
 background: transparent; /* 透明背景，不遮挡下层元素 */
}

/* 外圈半圆环：藏青色旋转半圆环（固定速度）
   - 尺寸153px×153px：比外层静止圆环大3px（包含4px边框）
   - 定位：top/left=-1px，确保与外层圆环同心
   - 4px边框：仅显示左下方向（组成半圆环），颜色#02428C（藏青色）
   - 初始旋转45度：调整半圆环起始位置 */
.outer-half-ring {
 position: absolute;
 top: -1px; /* 向上偏移1px，与外层圆环居中对齐 */
 left: -1px; /* 向左偏移1px，与外层圆环居中对齐 */
 width: 153px;
 height: 153px;
 border: 4px solid transparent; /* 透明边框，仅显示需要的方向 */
 border-bottom-color: #02428C; /* 下边框颜色：藏青色 */
 border-left-color: #02428C; /* 左边框颜色：藏青色（与下边框组成半圆环） */
 border-radius: 50%;
 transform: rotate(45deg); /* 初始角度：45度 */
}

/* 内层静止圆环：作为内圈半圆环的参考边界
   - 尺寸130px×130px：比外层圆环小20px（上下左右间距10px）
   - 1px深灰色边框，与外层圆环样式统一
   - 定位：top/left=10px，与外层圆环保持10px间距 */
.inner-ring {
 position: absolute;
 top: 10px; /* 与外层圆环顶部间距10px */
 left: 10px; /* 与外层圆环左侧间距10px */
 width: 130px;
 height: 130px;
 border: 1px solid #333; /* 与外层圆环边框样式一致 */
 border-radius: 50%;
 background: transparent;
}

/* 内圈半圆环：天蓝色旋转半圆环（正上方减速）
   - 尺寸131px×131px：比内层静止圆环大1px（包含2px边框）
   - 定位：top/left=10px，与内层圆环同心
   - 2px边框：仅显示右上方向（组成半圆环），颜色#0792D6（天蓝色）
   - 初始旋转-45度：与外圈半圆环方向错开，形成对比 */
.inner-half-ring {
 position: absolute;
 top: 10px; /* 与内层圆环顶部对齐 */
 left: 10px; /* 与内层圆环左侧对齐 */
 width: 131px;
 height: 131px;
 border: 2px solid transparent; /* 透明边框，仅显示需要的方向 */
 border-top-color: #0792D6; /* 上边框颜色：天蓝色 */
 border-right-color: #0792D6; /* 右边框颜色：天蓝色（与上边框组成半圆环） */
 border-radius: 50%;
 transform: rotate(-45deg); /* 初始角度：-45度 */
}

/* 加载文字：显示"LOADING"提示文本
   - 绝对定位在动画中心，层级最高（z-index:10），不被圆环遮挡
   - 10px字号，#666灰色，字母间距1px，提升可读性
   - Arial无衬线字体，清晰易读 */
.loading-text {
 position: absolute;
 top: 50%; /* 垂直居中 */
 left: 50%; /* 水平居中 */
 transform: translate(-50%, -50%); /* 精准居中 */
 font-family: Arial, sans-serif;
 font-size: 8px; /* 适配150px容器的文字大小 */
 color: #666; /* 灰色文字，与背景区分 */
 letter-spacing: 1px; /* 字母间距加宽，避免拥挤 */
 z-index: 10; /* 层级最高，确保在所有圆环上方显示 */
}

@media screen and (min-width:321px) and (max-width:600px){
 #zhezhao{
  background-image: url("../images/loading_mobile.jpg") ;
  background-size: 100% 50%;
  background-color: #f7f7f7;
 }

 #zhezhao svg {
  width: 8rem;
  height: 8rem;
 }
}