@charset "utf-8";
@import url(/static/common/layui/css/layui.css);
*{margin: 0px;padding: 0px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
a{text-decoration: none;}
html{width: 100%;height: 100%;overflow-x:hidden;overflow-y:auto;}
body {min-height: 100%; display: flex ; justify-content: center; align-items: center;}
.login-bg {transition: background-image 2s ease-in-out, opacity 2s ease-in-out; opacity: 1;overflow: hidden; background: url(/static/images/banner/bg.png) no-repeat top center; background-size: 100% 100%;}
.qrcodepic{width: 250px; height: 250px;}
.emap-head{display:none;}
.emap-headbg{display:none;}
.loginlogo{z-index: 999999; position: fixed; top: 40px; left: 46px; } 
.sf{position: absolute; width: 100%; font-size: 25px; color: #fff; line-height: 46px; font-weight: 400; display: inline-block; vertical-align: middle; padding-left: 18.5px;border-left: 2px solid #fff;text-shadow: 0 3px 0 #145a9b;}
.caslogo{width: 180px;}
.login-container {background-color: #FFFFFF;border-radius: 10px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);overflow: hidden;display: flex;flex-direction: column;max-width: 800px;width: 100%;z-index: 9999;}
.login-header {padding: 30px;text-align: center;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);color: #FFFFFF;}
.login-content {display: flex;flex-wrap: wrap;/*gap: 30px;*/position: relative;}/*中间的缝隙*/
.login-title {padding: 0 10px 8px 10px; position: relative; margin-bottom: 22px; } 
.login-title h2 { margin: 0; font-size: 20px; color: #000; } 
.login-title::after { content: ""; position: absolute; left: 0px; bottom: 0; width: 98px; height: 3px; background-color: #1d91e6; /* 蓝色横线 */ } 
.login-title::before { content: ""; position: absolute; left: 0px; bottom: 0; width: 100%; height: 1px; background-color: #88b3ff; /* 浅蓝横线 */ }
.login-form,.qrcode-container {flex: 1;padding: 30px 30px 10px 30px;}
.form-group {margin-bottom: 20px;position: relative;}
.form-group i {position: absolute;left: 12px;top: 50%;transform: translateY(-50%);color: #4E5969;}
.form-input {width: 100%;height: 40px;padding: 12px 12px 12px 40px;border: 1px solid #C9CDD4;border-radius: 8px;outline: none;transition: border-color 0.3s;}
/*.form-input:focus.layui-input:focus {border-color: #165DFF!important;}*/
.form-input:hover.layui-input:hover {border-color: #165DFF!important;}
.password-toggle {position: absolute;right: 12px;top: 50%;transform: translateY(-50%);cursor: pointer;color: #4E5969;}
.help-links {display: flex;justify-content: space-between;margin-bottom: 20px;font-size: 14px;}
.help-links a {color: #4E5969;text-decoration: none;transition: color 0.3s;}
.help-links a:hover {color: #165DFF;}
.btn{width: 100%;padding: 12px;border: none;border-radius: 8px;background-color: #1d91e6;color: #FFFFFF;font-weight:800;cursor: pointer;transition: background-color 0.3s;}
.btn:hover {background-color: #4080FF;}
.qrcode-container {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}
.qrcode-wrapper {padding: 20px; border: 1px dashed #C9CDD4; border-radius: 8px; margin-bottom: 20px; position: relative;background: #ffffff;}
.qrcode-image { width: 180px; height: 200px; background-color: #ffffff; color: #4E5969; }
.qrcode-hint {font-size: 13px;color: #4E5969;margin-bottom: 5px;}
.app-download {margin-top: 20px;}
.app-download p {margin-bottom: 10px;font-size: 14px;color: #4E5969;}
.app-icons {display: flex;justify-content: center;gap: 20px;}
.app-icon {width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #4E5969;cursor: pointer;transition: background-color 0.3s;}
.app-icon:hover {}
.footer {text-align: center;padding: 10px;font-size: 12px;color: #4E5969;}
.thirdparty{position: absolute; width: 40px; height: 40px; border-radius: 50%; border: none; background-size: cover; background-position: center; color: white; font-weight: bold; cursor: pointer; transition: transform 0.3s; text-indent: -9999px;}
#ukey{background-image: url(/static/images/ukey.svg);}
#douyin{background-image: url(/static/images/douyin.svg);}
#weixin{background-image: url(/static/images/wechat.svg);}
/*【2026-11-04】扫码方式切换图标（单图标换脸）：默认 APP 码，加 scanmode-wx 时为微信码 */
#scanmode{background-image: url(/static/images/app.svg);background-size: 85%; background-repeat: no-repeat;}
#scanmode.scanmode-wx{background-image: url(/static/images/wechat.svg);}
.code { position: absolute; top: 44px; left: 23px; width: 180px; height: 180px;background-color: rgba(255, 255, 255, 0.9); display: flex ; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s;opacity: 1; pointer-events: auto;}
/*【2026-11-05】已扫码提示：手机端打开确认页即盖在二维码上，点击可临时收起 */
.qrcode-hit-mini, .qrcode-hit-wx { background-color: rgba(255, 255, 255, 0.96); cursor: pointer; }
/*【2026-11-05】成功态：遮罩常驻到跳转，不可点击收起，避免二维码重新露出*/
.qrcode-hit-mini.is-success, .qrcode-hit-wx.is-success { cursor: default; -webkit-user-select: none; user-select: none; }
.qrcode-hit-mini.is-success .hit p, .qrcode-hit-wx.is-success .hit p { color: #08c161; font-weight: 600; }
.qrcode-hit-mini .hit p, .qrcode-hit-wx .hit p { padding: 4px; line-height: 28px; font-size: 15px; color: #08c161; font-weight: 500; text-align: center; }
.overdue p { padding: 4px; line-height: 28px; font-size: 15px; color: #313131; }
.overdue button { background: #38a2f6; width: 100px; height: 40px; margin: 14px 0 0; padding: 0; border: 0; border-radius: 4px; font-size: 14px; color: #fff; -webkit-appearance: button; cursor: pointer; }
.overdue button:hover{background: #4194d5;}
/* 替换 class 名后的样式 */ 
.custom-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; } 
.custom-qrcode-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 8px; z-index: 9999; text-align: center; } 
.custom-close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer; color: #999; } 
.custom-close-btn:hover { color: #333; } 
@media screen and (max-width: 1366px){
.loginlogo{z-index: 999999; position: fixed; top: 40px; left: 17px; } 
.sf{font-size: 18px!important; }
.caslogo{width: 140px!important; }
.login-container {max-width: 700px!important;}
.login-header { padding: 20px!important;}
.login-header h2 {font-size: 17px;}
.login-title { padding: 7px; margin-bottom: 19px; }
.form-input {height: 38px;}
.login-form, .qrcode-container {padding: 10px 30px 5px 30px}
.qrcode-image {width: 180px; height: 190px;}
.qrcode-wrapper { padding: 10px; margin-bottom: 10px;margin-top: 10px;}
.app-icon, #ukey , #douyin ,.thirdparty { width: 30px; height: 30px;}
.login-title h2 {font-size: 16px;}
.app-download { margin-top: 10px; }
.code {top: 32px; left: 13px; width: 180px; height: 180px;}
.overdue button {  height: 32px;}
}
@media (max-width: 768px) {
.loginlogo {display: none; }
.login-bg{background: #fff!important;min-height: 0;}
.emap-head{content: ''; width: 140%; height: 260px; position: absolute; left: -20%; top: 0; z-index: -1; border-radius: 0 0 50% 50%; background: #6EA5FA;display:block;}
.emap-headbg{position: absolute; top: 30px; width: 100%; height: 182px; background: url(/static/images/pic.png) no-repeat top center;display:block;}
.login-content { flex-direction: column; position: relative; }
.login-header { padding: 20px!important;background: white;color: #1d91e6;}
.login-container { margin: 100px 10px 0px 15px;box-shadow: 0 0px 0px rgb(0 0 0 / 0%);}
.login-title h2 { font-size: 14px!important; }
.login-title {padding: 0 8px 8px 12px!important;}
.qrcode-container{padding: 30px;}
.overdue p {font-size: 14px;}
.login-title::after{width: 89px;}

}