@charset "utf-8";
/* **************************************************************************** */
/*	@Author       :bokyung        */
/* ***************************************************************************** */

body{word-break:keep-all;}
select{-webkit-appearance:none;-moz-appearance: none;appearance: none;}
.pc{display:block !important}
.mob{display:none !important}

.inner{max-width:1920px;margin:0 auto}

.login_wrap{height:calc(100vh - 80px);min-height:760px;}
.login_wrap .inner{display:flex;flex-wrap:wrap;height:100%}
.login_wrap .login_visual{position:relative;width:calc(100% - 610px)}
.login_wrap .login_visual::before{content:'';display:block;position:absolute;top:0;right:0;width:calc(100vw - 610px);height:100%;background:url(../images/login_bg.jpg) no-repeat 50% 50% / cover}
.login_wrap .login_cont{width:610px;background:#fff url(../images/login_cont_bg.svg) no-repeat 0 100%}
.login_wrap .inner > div{display:flex;align-items:center;justify-content:center}
.login_visual .text_wrap{position:relative;}
.login_visual img{max-width:100%}
.login_visual .tit{position:absolute;bottom:0;right:65px;text-shadow:3px 4px 6px rgba(0, 0, 0, 0.44);color:#fff;font-weight:300;font-size:20px;}
.login_visual .tit strong{font-weight:300;font-size:37px}
.login_visual .tit strong span{font-weight:600;}
.login_box{width:354px}
.login_box .lang_wrap{text-align:right}
.login_box .lang_wrap select{width:77px;height:31px;padding:0 26px 0 14px;border-radius:40px;border:1px solid #ccc;font-size:12px;font-weight:500;color:#666;background:url(../images/select_arrow.png) #fff no-repeat calc(100% - 14px) 50%}
.login_box .intro{margin-top:25px;padding-top:80px;background:url(../images/inhatc_logo.svg) no-repeat 50% 0;text-align:center}
.login_box .intro .tit{font-size:34px;font-weight:500;color:#111;line-height:1.2}
.login_box .intro .tit strong{font-weight:600;color:#0079F4}
.login_box .intro .desc{margin-top:15px;font-size:15px;color:#8E8E8E}
.login_box .input_wrap{margin-top:25px}
.login_box .input_wrap span{font-size:14px;color:#111}
.login_box .input_wrap input{width:100%;height:50px;padding:0 20px 0 45px;margin-top:8px;border-radius:8px;border:1px solid #D4D9ED;background:#fff no-repeat 20px 50%;font-size:16px}
.login_box .input_wrap input::placeholder{color:#999}
.login_box .input_wrap input:focus{box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.login_box .input_wrap .pw{margin-top:20px}
.login_box .input_wrap .id input{background-image:url(../images/input_id_ic.png)}
.login_box .input_wrap .pw input{background-image:url(../images/input_pw_ic.png)}
.login_box .input_wrap .remember{display:block;margin-top:10px}
.login_box .input_wrap .remember input{overflow:hidden;display:none;width:0;height:0;border:0 none;font-size:0;line-height:0;clip:rect(0 0 0 0);opacity:0;}
.login_box .input_wrap .remember span{display:flex;align-items:center;color:#555;font-size:13px}
.login_box .input_wrap .remember span::before{content:'';display:block;width:17px;height:17px;margin-right:6px;border-radius:50%;border:1px solid #CBCED9}
.login_box .input_wrap .remember input:checked + span::before{border-color:#333;background:#333 url(../images/check_ic.png) no-repeat 50% 50%;}
.login_box .login_btn{width:100%;height:50px;margin-top:25px;border:0;border-radius:8px;font-weight:600;font-size:18px;color:#fff;background:#222755;}
.login_box .login_reset{margin-top:40px}
.login_box .login_reset a{display:block;font-size:13px;color:#797979}
.login_box .login_reset a span{border-bottom:1px solid}
.login_box .login_reset a + a{margin-top:10px}
.findArea {display: flex;justify-content: space-between;padding: 0 clamp(16px, 4vw, 32px);margin-top: 15px;}
.findArea a {font-weight: bold;text-decoration: underline;text-underline-offset: 5px;}

/* ── 서버 에러 박스 ── */
.server-error-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 11px 14px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: #991b1b;
  line-height: 1.5;
}
.server-error-box svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; margin-top: 1px;
}
.server-error-text { flex: 1; white-space: pre-line; }




/* footer 관련 스타일은 custom/css/footer.css로 이동 (모든 custom 화면이 공통으로 로드) */



@media only screen and (max-width:1920px){
	.login_wrap .login_visual::before{display:none}
	.login_visual{background:url(../images/login_bg.jpg) no-repeat 100% 50% / cover rgba(0, 60, 80, 0.35)}

}
@media only screen and (max-width:1600px){
	.login_visual .text_wrap{padding:0 40px}
	.login_visual .tit{font-size:18px}
	.login_visual .tit strong{font-size:30px}

}

@media only screen and (max-width:1440px){
	.login_wrap .inner > div{width:50%}
	.login_visual .tit{position:static;margin-top:30px;text-align:center}
}

@media only screen and (max-width:960px){
	.pc{display:none !important}
	.mob{display:block !important}

	.login_wrap{height:auto;min-height:min-content}
	.login_wrap .inner > div{width:100%}
	.login_wrap .inner > .login_visual{display:none}
	.login_wrap .login_cont{background:none}
	.login_box{width:100%;padding:40px 20px 60px}
	.login_box .intro .tit{font-size:26px}
	.login_box .intro .desc{font-size:14px}

}