@charset "utf-8";

/**************
/** 로그인
/**************/

.area_login{position:relative; max-width:500px; box-sizing:border-box; margin:0 auto;}
.login_box{position:relative; z-index:10; width:500px; height:470px; box-sizing:border-box; padding:40px 55px 50px; background:#fff; /* box-shadow:0px 20px 30px rgba(0,0,0,0.2); */}
.login_box h1{font-family:var(--font-eng); font-size:30px; text-align:center;}
.login_box h1 + p{padding-top:10px; text-align:center; color:#666; letter-spacing:-0.5px;}
.login_box ul{margin-top:35px;}
.login_box ul li{margin-top:20px;}
.login_box ul li:first-child{margin-top:0px;}
.login_box ul li label{position:absolute; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}
.login_box ul li input{width:100%; height:60px; box-sizing:border-box; padding-left:60px; background:#fff; background-repeat:no-repeat; background-position:20px 50%; border:1px solid #dbdbdb; font-size:14px;}
.login_box ul li input[type="text"]{background-image:url(../images/login/img_id.png);}
.login_box ul li input[type="password"]{background-image:url(../images/login/img_pw.png);}
.login_box .idSave{display:flex; justify-content:space-between; align-items:center; padding:20px 0 30px;}
.login_box .idSave label{letter-spacing:-0.5px;}
.login_box .idSave .link{display:inline-flex; align-items:center; gap:3px;}
.login_box .btn_login{display:block; width:100%; height:66px; background:#3653a9; background-size:200% 100%; background-position:0 0; background-image:linear-gradient(-9deg, #3653a9, #3653a9, #1da48c); background-image:-ms-linear-gradient(-9deg, #3653a9, #3653a9, #1da48c); background-image:-webkit-linear-gradient(-9deg, #3653a9, #3653a9, #1da48c); background-image:-moz-linear-gradient(-9deg, #3653a9, #3653a9, #1da48c); background-image:-o-linear-gradient(-9deg, #3653a9, #3653a9, #1da48c); border:0px; color:#fff; font-weight:700; font-size:23px; transition:all 0.8s ease-in-out 0s;}
.login_box .btn_login:hover{background-position:100% 0;}
.area_login .join{position:absolute; top:0px; left:0px; width:100%; height:390px; background:#f1f3fc;}
.area_login .join > div{margin-left:580px;}
.area_login .join h3{margin-bottom:15px !important;}
.area_login .join p{margin-bottom:15px; font-size:15px; color:#666; letter-spacing:-1px; line-height:1.4em;}
.area_login .join p em{color:#dd5024;}
.area_login .join p i{color:#015ea7;}
.area_login .join a{position:relative; padding-right:40px; background:#f36234; border-color:#f36234; font-size:13px;}
.area_login .join a:after{content:''; display:block; position:absolute; top:50%; right:15px; z-index:3; width:18px; height:4px; margin-top:-2px; background:url(../images/content/img_btn_arrow.png) no-repeat 50% 0;}
.area_login .join a:hover:after,
.area_login .join a:focus:after{background-position:0 -4px;}