*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}


html,
body{
 width:100%;
 min-height:100%;
}


body{

 min-height:100vh;

 font-family:
 "Microsoft YaHei",
 "PingFang SC",
 Arial,
 sans-serif;

 color:#243246;

 background:#f4f7fb;

}


/* =========================
 主框架
========================= */

.login-wrapper{

 width:100%;

 min-height:100vh;

 display:flex;

}


/* =========================
 左侧
========================= */

.brand-panel{

 position:relative;

 width:58%;

 min-height:100vh;

 display:flex;

 align-items:center;

 overflow:hidden;

 padding:
 70px
 7%;


 background:

 radial-gradient(
 circle at 22% 25%,
 rgba(41,144,255,.32),
 transparent 34%
 ),

 radial-gradient(
 circle at 77% 75%,
 rgba(32,198,225,.20),
 transparent 32%
 ),

 linear-gradient(
 135deg,
 #091c34 0%,
 #10365e 50%,
 #126ca1 100%
 );

 color:#fff;

}


.brand-panel::before{

 content:"";

 position:absolute;

 left:0;
 right:0;
 bottom:0;

 height:42%;

 opacity:.22;

 background-image:

 linear-gradient(
 rgba(255,255,255,.10) 1px,
 transparent 1px
 ),

 linear-gradient(
 90deg,
 rgba(255,255,255,.10) 1px,
 transparent 1px
 );

 background-size:
 40px 40px;

 transform:
 perspective(380px)
 rotateX(60deg);

 transform-origin:
 bottom;

}


.brand-content{

 position:relative;

 z-index:2;

 width:100%;

 max-width:760px;

}


.brand-tag{

 display:inline-flex;

 align-items:center;

 height:34px;

 padding:
 0 16px;

 margin-bottom:30px;

 border:
 1px solid
 rgba(255,255,255,.25);

 border-radius:20px;

 background:
 rgba(255,255,255,.08);

 font-size:13px;

 font-weight:600;

 letter-spacing:2px;

}


.brand-content h1{

 margin-bottom:22px;

 font-size:
 clamp(
 38px,
 4vw,
 58px
 );

 line-height:1.25;

 font-weight:700;

 letter-spacing:1px;

}


.brand-line{

 width:72px;

 height:4px;

 margin:
 0 0 30px;

 border-radius:10px;

 background:
 linear-gradient(
 90deg,
 #56d8ff,
 #5c9cff
 );

}


.brand-content > p{

 margin-bottom:10px;

 color:
 rgba(
 255,
 255,
 255,
 .83
 );

 font-size:18px;

 line-height:1.8;

}


.feature-grid{

 max-width:660px;

 margin-top:45px;

 display:grid;

 grid-template-columns:
 repeat(
 2,
 minmax(0,1fr)
 );

 gap:14px;

}


.feature-card{

 padding:
 17px
 19px;

 border:
 1px solid
 rgba(255,255,255,.12);

 border-radius:12px;

 background:
 rgba(255,255,255,.07);

 backdrop-filter:
 blur(8px);

}


.feature-card strong{

 display:block;

 margin-bottom:6px;

 font-size:16px;

}


.feature-card span{

 color:
 rgba(
 255,
 255,
 255,
 .62
 );

 font-size:13px;

}


/* =========================
 右侧
========================= */

.login-panel{

 flex:1;

 min-width:420px;

 display:flex;

 align-items:center;

 justify-content:center;

 padding:45px;

 background:#f5f7fb;

}


.login-box{

 width:100%;

 max-width:450px;

 padding:
 46px
 44px;

 background:#fff;

 border:
 1px solid
 #e8edf4;

 border-radius:18px;

 box-shadow:
 0 20px 55px
 rgba(
 28,
 53,
 83,
 .10
 );

}


.login-head{

 display:flex;

 align-items:center;

 gap:15px;

 margin-bottom:32px;

}


.login-logo{

 flex:none;

 width:52px;
 height:52px;

 display:flex;

 align-items:center;
 justify-content:center;

 border-radius:13px;

 background:
 linear-gradient(
 135deg,
 #246ed0,
 #20a8da
 );

 color:#fff;

 font-size:18px;

 font-weight:700;

 box-shadow:
 0 8px 20px
 rgba(
 38,
 115,
 204,
 .22
 );

}


.login-head h2{

 margin:0;

 color:#17365d;

 font-size:28px;

 line-height:1.3;

}


.login-head p{

 margin-top:5px;

 color:#8a96a6;

 font-size:14px;

}


/* =========================
 提示
========================= */

.error-box{

 margin-bottom:22px;

 padding:
 13px
 15px;

 border:
 1px solid
 #ffd7d7;

 border-radius:8px;

 background:#fff3f3;

 color:#d93845;

 font-size:14px;

}


/* =========================
 表单
========================= */

.form-group{

 margin-bottom:21px;

}


.form-group label{

 display:block;

 margin-bottom:9px;

 color:#35465c;

 font-size:15px;

 font-weight:600;

}


.form-group input{

 width:100%;

 height:52px;

 padding:
 0 16px;

 border:
 1px solid
 #dce3ec;

 border-radius:9px;

 outline:none;

 background:#fff;

 color:#27384c;

 font-family:inherit;

 font-size:15px;

 transition:
 border-color .2s,
 box-shadow .2s;

}


.form-group input::placeholder{

 color:#b1bac6;

}


.form-group input:focus{

 border-color:#3984da;

 box-shadow:
 0 0 0 4px
 rgba(
 57,
 132,
 218,
 .09
 );

}


.login-btn{

 width:100%;

 height:53px;

 margin-top:4px;

 border:0;

 border-radius:9px;

 cursor:pointer;

 background:
 linear-gradient(
 90deg,
 #286bc7,
 #168bc9
 );

 color:#fff;

 font-family:inherit;

 font-size:17px;

 font-weight:600;

 letter-spacing:1px;

 box-shadow:
 0 10px 22px
 rgba(
 36,
 108,
 196,
 .20
 );

 transition:
 transform .15s,
 box-shadow .15s;

}


.login-btn:hover{

 transform:
 translateY(-1px);

 box-shadow:
 0 13px 27px
 rgba(
 36,
 108,
 196,
 .25
 );

}


.login-tips{

 margin-top:22px;

 padding:
 12px
 13px;

 border-radius:8px;

 background:#f5f8fc;

 color:#748397;

 text-align:center;

 font-size:13px;

}


.login-footer{

 margin-top:26px;

 padding-top:20px;

 border-top:
 1px solid
 #eef1f5;

 display:flex;

 align-items:center;

 justify-content:space-between;

 color:#9aa5b3;

 font-size:12px;

}


.login-footer span{

 padding:
 4px
 8px;

 border-radius:5px;

 background:#f0f4f9;

 color:#66788f;

}


/* =========================
 自适应
========================= */

@media(
 max-width:1000px
){

 .brand-panel{

 width:52%;

 padding:
 50px
 5%;

 }


 .brand-content h1{

 font-size:39px;

 }


 .brand-content > p{

 font-size:16px;

 }


 .login-panel{

 min-width:400px;

 padding:30px;

 }

}


@media(
 max-width:800px
){

 .brand-panel{

 display:none;

 }


 .login-panel{

 min-width:0;

 min-height:100vh;

 padding:22px;

 }


 .login-box{

 max-width:460px;

 padding:
 36px
 28px;

 }

}