html,body{min-height: 100vh;}
.contentWrap.flexWrap{background-color: #E5E9EC; }
body.resetPwd{background-color: #F7F7F7;}

.wrap{margin: auto; width: 1200px;}
.flexWrap{width: 100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center;  justify-content: center; }
.fn-hide{display: none !important;}
.loginBoxContainer{width: 1200px; height: 700px; background-color: #fff; border-radius: 36px; display: flex; position: relative;} 
.loginBoxContainer .imgShow{width: 400px; height: 700px; border-radius: 36px 0 0 36px; background-color: #f5f5f5;}
.loginBoxContainer .imgShow img{display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 36px 0 0 36px;}
.loginBoxContainer .loginBox{width: 800px; height: 700px; position: relative;}
.loginBoxContainer .loginBox .rightTop{position: absolute; right: 28px; top: 30px;}
.loginBoxContainer .loginBox .rightTop a{color: #4D4D4D; font-size: 13px; margin-left: 30px; display: inline-flex; align-items: center;}
.loginBoxContainer .loginBox .rightTop a::before{content: ''; display: block; width: 16px; height: 16px; background: url(/static/pc/images/huoniao_icon.png) no-repeat center/cover; margin-right: 2px;}
.loginBoxContainer .loginBox .rightTop a.net_help::before{background-image: url(/static/pc/images/help_icon.png) ;}
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    transition: background-color 5000s ease-out 0.5s;
}
.formBox{padding-top: 80px; min-height: 542px; box-sizing: border-box;}
.formBox form{display: flex; align-items: center; justify-content: center;}
.formBox h2{font-size: 30px; color: #292B33; font-weight: bold; text-align: center;  margin-bottom: 56px;}
.formBox li.fitem{display: flex; align-items: center;  margin-bottom: 20px; transform: translateX(-45px);}
.formBox li.fitem .err{color: #FF4F38; font-size: 14px; display: flex; align-items: center; margin-left: 14px; position: absolute; left: 100%; flex-wrap: nowrap; word-break: keep-all;}
.formBox li.fitem .err::before{content: ''; display: inline-block; width: 16px; height: 16px; background: url(/static/pc/images/tip_icon_r.png) no-repeat center/cover; flex-direction: column; margin-right: 2px; flex-shrink: 0;}
.formBox .fitem label{font-size: 14px; color: #666; line-height: 48px; width: 100px; text-align: right; padding-right: 18px;}
.formBox .fitem .inpBox{width: 322px; height: 48px; display: flex; align-items: center; position: relative;}
.formBox .fitem .inpBox input[name='phone']{font-size: 20px;}
.formBox .fitem .inpBox input[name='phone']::placeholder{font-size: 14px; line-height: 24px; transform: translateY(-2px);}
.formBox .fitem .inpBox input{height: 100%; width: 100%; border: #EDEDED solid 1px; box-sizing: border-box; padding-left: 10px; border-radius: 4px; font-size: 14px;}
.formBox .fitem .inpBox input:focus{outline-color: #376AFF; caret-color: #376AFF}
.formBox .fitem .inpBox .getCode{position: absolute; right: 16px; color: #376AFF; font-size: 14px;}
.formBox .fitem .inpBox .fpwd{position: absolute; right: 16px; color: #666; font-size: 14px;}
.formBox .submit,.formBox p{width: 320px;}
.formBox li.submit_li,.formBox li.tip_li{display: flex; align-items: center; margin-left: 73px;}
.formBox .submit{height: 46px; background: #376AFF; border-radius: 4px; color: #fff; font-size: 15px; border: none; cursor: pointer;}
.formBox .submit:hover,.formBox .submit.disabled{opacity: .7;}
.formBox p{font-size: 14px; color: #666; margin-top: 22px;}
.formBox p a{color: #376AFF;}
.formBox .fitem[data-required='1'] label::before{content: '* '; color: #f00; text-align: right;}

.floatBox{position: absolute; width: 64px; height: 150px; background: #FFFFFF; border-radius: 4px; right: -104px; top: 202px;}
.floatBox>div{width: 64px; height: 75px; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; cursor: pointer;}
.floatBox>div:last-of-type::before{width: 50px; height: 1px; background: linear-gradient(90deg, #FFFFFF 0%, #E6E6E6 50%, #FFFFFF 100%); content: ''; display: block; margin: auto; position: absolute; top: 0;}
.floatBox>div s{display: block; width: 24px; height: 24px; background: url(/static/pc/images/kefu_grey.png) no-repeat center/cover;}
.floatBox>div>p{color: #4D4D4D; font-size: 12px; margin-top: 5px;}
.floatBox>div.wxgzh s{background-image: url(/static/pc/images/qr_grey.png);}
.qrBox{width: 280px; height: 340px; background: #FFFFFF; border: 1px solid #EDEDED; box-shadow: 0px 15px 40px 0px rgba(0,17,51,0.08); border-radius: 4px; position: absolute; right: 71px; z-index: 1; display: none; animation: rightFadeIn .3s;}
.qrBox h5{font-size: 15px; color: #333; font-weight: bold; text-align: center; padding-top: 26px;}
.qrBox .qr{width: 200px; height: 200px; padding: 10px;  margin: auto; margin-top: 12px; box-sizing: border-box;}
.qrBox .qr img{display: block; width: 100%; height: 100%; object-fit: cover;}
.qrBox p{text-align: center; font-size: 14px; color: #666; margin-top: 20px;}
.floatBox>div.wxgzh:hover .qrBox{display: block;}
.floatBox>div.wxgzh:hover .qrBox::after{content: ''; display: block; position: absolute; right: -10px; top: 0; bottom: 0; width: 10px;}

.netInfo{margin: 0 50px 0 33px ; position: absolute; left: 0; top: 0; padding-top: 32px;}
.netInfo h5{font-size: 16px; color: #fff; font-weight: bold; display: flex; align-items: center;}
.netInfo h5 s{width: 26px; height: 26px; display: block; }
.netInfo h5 s img{display: block; width: 100%; height: 100%; object-fit: cover;}
.netInfo h2{font-size: 36px; color: #fff; line-height: 48px; margin-top: 68px;}
.netInfo  p{font-size: 16px; color: rgba(255,255,255,.6); margin-top: 10px;}
.page_tip{text-align: center; font-size: 16px; color: #4D4D4D; display: flex; align-items: center; justify-content: center; margin-top: 100px;}
.page_tip::before,.page_tip::after{content: ''; width: 50px; height: 1px; background: linear-gradient(90deg, #E6E6E6 0%, #FFFFFF 100%); margin: 0 10px;}
.page_tip::before{background: linear-gradient(-90deg, #E6E6E6 0%, #FFFFFF 100%);}

.popErrAlert {position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 99 !important; visibility: hidden; display: flex; align-items: center; flex-direction: column; justify-content: center; pointer-events: none;}
.popErrAlert p {position: static; background-color: rgba(23,23,23,.9); border-radius: 10px; color: #fff; font-size: 14px; line-height: 36px; text-align: center; padding: 10px 10px; z-index: 90; left: 0; top: 30%; margin-top: -10px; text-align: center; margin-top: -300px;  min-width: 100px; }
.popErrAlert p s.success{display: inline-block; width: 20px; height: 20px ; background: url(/static/images/gou_white.png) no-repeat center/cover; margin-right: 5px; vertical-align: middle; margin-bottom: 2px;}


.topBox .top{height: 40px; background: #3D424D;}
.topBox .top .header{display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 14px; height: 40px;}
.topBox .top .header ul li{ display: inline-block; margin-left: 32px; }
.topBox .top .header ul li a{ display: inline-block; color: #fff;}
.topBox .headerBox{height: 72px; background-color: #fff;}
.topBox .headerCon{display: flex; align-items: center; justify-content: space-between; height: 72px;}
.topBox .headerCon .flexR a{display: block; width: 116px; height: 34px; background: #FFFFFF; border: 1px solid #376AFF; border-radius: 4px; color: #376AFF; text-align: center; font-size: 14px; font-weight: bold; line-height: 32px;}
.topBox .headerCon .flexL{display: flex; align-items: center; font-size: 16px; color: #1B1C21;}
.topBox .headerCon .flexL h3{font-size: 24px; color: #1B1C21; font-weight: bold; display: flex; align-items: center;}
.topBox .headerCon .flexL h3 s{display: block; width: 32px; height: 32px;}
.topBox .headerCon .flexL h3 s img{display: block; width: 100%; height: 100%; object-fit: contain;}
.topBox .headerCon .flexL a{display: block; padding-left: 20px; border-left: solid 1px #E1E3E6; margin-left: 20px; height: 20px;}
a:hover{text-decoration: none;}

.resetPwdWrap .resetForm{height: 610px; border-radius: 10px; background-color: #fff; margin-top: 20px;}
.resetPwdWrap .resetForm dt{height: 70px; border-bottom:solid 1px #F2F2F2; ;}
.resetPwdWrap .resetForm dt span{line-height: 69px; border-bottom: solid 2px #376AFF; display: inline-block; font-size: 26px; color: #292B33; font-weight: bold; margin: 0 20px;} 

.successTip {padding-top: 78px;}
.successTip .img{width: 120px; height: 120px; margin: auto;}
.successTip .img img{display: block; width: 100%; height: 100%; object-fit: cover;}
.successTip h4{font-size: 16px; text-align: center; font-weight: bold;}
.successTip p{color: #919399; font-size: 14px; text-align: center; margin-top: 20px;}
.successTip a{width: 320px; height: 46px; background: #376AFF; border-radius: 4px; text-align: center; display: block; margin: auto; line-height: 46px; font-size: 15px; color: #fff; margin-top: 58px;}

.kefuPop::after{content: ''; display: block; width: 20px; position: absolute; right: -20px; top: 0; bottom: 0;}
.kefuPop{width: 420px; height: 500px; background-color: #fff; position: absolute; left: -438px; top: -70px; background: url(/static/pc/images/bg_kefu.png) no-repeat top center/100% auto; border-radius: 12px; display: none; animation: rightFadeIn .3s; z-index: 10; }
.kefu:hover .kefuPop{display: block;}
.kefuPop .pop_header{padding-bottom: 40px; padding-left: 161px; display: flex; flex-direction: column; justify-content: center; height: 140px;}
.kefuPop .pop_header::before{content: ''; width: 170px; height: 190px; background: url(/static/pc/images/kefu_people.png) no-repeat center /cover; position: absolute; left: -16px; top: -16px; }
.kefuPop .pop_header h4{font-size: 24px; color: #2E53E6; font-weight: bold;}
.kefuPop .pop_header p{color: #7A8199; font-size: 16px;}
.kefuPop .pop_con{height: 360px; background: #FFF; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1); border-radius: 40px 12px 12px 12px; margin-top: -40px; position: relative; z-index: 1; display: flex; align-items: center ; flex-direction: column; justify-content: center;}
.kefuPop .pop_con .qrCode{width: 216px; height: 216px; margin:0 auto; }
.kefuPop .pop_con .qrCode img{display: block; width: 100%; height: 100%; object-fit: cover;}
.kefuPop .pop_con p{color: #5C5E66; font-size: 14px; text-align: center; margin-top: 30px;}
