@charset "utf-8";
/* ### 기본 스타일 커스터마이징 시작 ### */
/* 기본박스 */
.mbskin {position:relative; width:360px; margin:100px auto 0; text-align:center}
.mbskin:after {left:auto; right:10px; transform:skew(8deg) rotate(3deg)-webkit-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg);}
.mbskin .mbskin_box {border:1px solid #dde7e9; background:#fff}
.mbskin .frm_input {width:100%}
.mbskin .btn_submit {width:100%; height:45px; margin:10px 0 0; font-weight:bold; font-size:1.25em}
.mbskin h1 {margin:60px 0 30px; font-size:2em}

/* ----------------------------------------------
loginWrap
------------------------------------------------*/
html,body {height:100%;}
.loginWrap {display:flex; justify-content:space-between; align-items:center; width:100%; height:100%;}
.loginBox, .loginInfoBox {position:relative; z-index:2; height:100%;}
.loginBox .login,
.loginInfoBox .loginInfo {width:360px; min-height:500px;}

/* login */
.loginBox {display:flex; justify-content:flex-start; align-items:center; width:30%; background:var(--bg-main-color);}
.loginBox .login {padding:0 30px;}
.loginBox .login h1 {display:block; margin-bottom:10px; color:var(--prime-color); font-size:30px; line-height:1; font-weight:bold;}
.loginBox .login .loginForm {}
.loginBox .login .loginForm .user {margin:20px 0;}
.loginBox .login .loginForm .user {}
.loginBox .login .loginForm .user dt {font-size:14px;}
.loginBox .login .loginForm .user dd {font-size:30px; font-weight:600;}
.loginBox .login .loginForm .buttonWrap {margin-bottom:10px; display:flex; justify-content:space-between;}
.loginBox .login .loginForm .buttonWrap a {box-sizing:border-box;}
.loginBox .login .loginForm input {margin-bottom:10px;}
.loginBox .login .loginForm .persistent {display:block; margin-bottom:20px; color:#FFF;}
.loginBox .login .loginForm .persistent label:before {color:inherit;}
.loginBox .login .loginForm .buttonBox {display:block; margin-bottom:20px; color:#FFF;}
.loginBox .login .loginForm .buttonBox button {border:0 !important;}
.loginBox .login .loginForm .infoText {display:block; position:relative; padding-left:24px; color:#666; font-size:14px; line-height:1.4;}
.loginBox .login .loginForm .infoText strong,
.loginBox .login .loginForm .infoText p {display:block; margin:4px 0;}
.loginBox .login .loginForm .infoText i {position:absolute; top:0; left:0; font-size:20px;}
.loginBox .login .loginForm .historyBack {margin:20px 0;}
.loginBox .login .loginForm .historyBack button {display:flex; align-items:center; font-size:14px;}
.loginBox .login .loginForm .historyBack button i {font-size:20px;}
/* .loginBox .login .loginForm .required {display:block; margin-bottom:20px; font-size:12px; text-align:center;} */

/* loginInfo */
.loginInfoBox {display:flex; justify-content:flex-end; align-items:center; width:70%;}
.loginInfoBox .loginInfo {padding:0 30px; color:#FFF; position:relative; z-index:2;}
.loginInfoBox .loginInfo h2 {display:block; margin-bottom:10px; font-size:40px; font-weight:bold; line-height:1; text-shadow: 4px 4px 4px rgba(0,0,0,0.1);}
.loginInfoBox .loginInfo p {font-size:18px;}
.loginInfoBox .themeBg,
.loginInfoBox .themeBg .filter {position:absolute; top:0px; left:0; right:0px; bottom:0px;}
.loginInfoBox .themeBg {z-index:1; background-repeat:no-repeat; background-size:cover; background-position:center;}
.loginInfoBox .themeBg .filter {backdrop-filter:blur(0px); z-index:1; background:var(--prime-color); opacity:0.2;}


.notmbBox {padding-top:10px; margin-top:10px; border-top:1px dashed #ddd;}
.notmbBox h2 {display:block; font-size:20px;}

/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/

@media (max-width:1024px) {
    .loginBox {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; width:100%;}
    .loginBox .login {width:auto; min-height:auto; padding:30px;}
    .loginInfoBox {display:none;}

}