@charset "UTF-8";

/*
*--------------------------------------------*
|                   20240618                 |
*--------------------------------------------*
*/
html { overflow-x: hidden; width: 100%; height: 100vh; padding: var(--notch); scroll-behavior: smooth;}
body { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 100%; background: #f5f5f5; font-family:var(--Pretendard); font-weight: normal; font-size:var(--font-size); color:var(--default-font-color); line-height:var(--line-height); letter-spacing:var(--font-let-spc);}
b { font-weight: 500;}
strong { font-weight: 700;}
small { font-size: 80%;}
img { max-width: 100%;}
* { margin: 0; padding: 0; box-sizing: border-box;}
.wrap {}

*::placeholder { color: #b2b2b2;}

.login_wrap { overflow: auto; width: 500px;}
.login_wrap .login { padding-top: 80px;}
.login_wrap .logo { text-align: center;}
.login_wrap .id_enter { display: flex; flex-direction: column; gap: 10px;}
.login_wrap .login_keep { display: flex; justify-content: space-between; margin: 30px 0 60px;}
.login_wrap .login_keep .check-box .check { width: 20px; height: 20px;}
.login_wrap .login_keep .check-box label { font-weight: 500; color: #5e5e5e;}
.login_wrap .login_keep ul{ display: flex; gap: 10px;}
.login_wrap .login_keep ul li:first-child::after{ content: ''; display: inline-block; width: 1px; height: 12px; margin-left: 10px; vertical-align: middle; background: #c8c8c8;}
.login_wrap .login_keep ul li a{ line-height: 19px; text-align: center; font-size: 16px; color: #222; font-weight: 400; letter-spacing: -0.32px;}
.login_wrap .login_btn { display: flex; justify-content: center; align-items: center; width: 100%; height: 60px; font-size: 18px; font-weight: 700; letter-spacing: -0.36px; border-radius: 8px; box-sizing: border-box;}
input[type="text"],
input[type="password"] { width: 100%; height: 60px; padding: 18px 20px; border-radius: 8px; border: 1px solid #ddd; background: #fff; font-size: 18px; letter-spacing: -0.36px; box-sizing: border-box;}
input[type="text"]:focus,
input[type="password"]:focus { border-color: var(--primary-500);}
.wrong_message { display: none; font-weight: 500; line-height: 1.2; letter-spacing: -0.32px; color: var(--red-500);}
.login_wrap .other_link { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 45px;}
.login_wrap .other_link a { font-weight: 500; line-height: 1.07; letter-spacing: -0.32px; color: #5e5e5e;}
.login_wrap .other_link .line { color: #dcdcdc;}

/* 아이디/비번 찾기 */
.k-window{ border-radius: 10px; box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.05);}
.k-window .k-window-titlebar{ padding: 15px 20px 18px; border-bottom: 1px solid #ddd; background: #fff;}
.k-window .k-window-titlebar .k-window-title{ line-height: 34px; text-align: left; font-size: 20px; color: #000; font-weight: 700; letter-spacing: -0.4px;}
.k-window .k-window-titlebar .k-window-action{ width: 34px; height: 34px; padding: 0; background: url(../../images/kihaeacs_common/btn_popup_close.png) no-repeat 50% 50%!important; opacity: 1;}
.k-window .k-window-titlebar .k-window-action span{ display: none;}
.k-window .login_wrap{ width: 100%; padding: 12px 35px 35px; box-sizing: border-box;}
.login_wrap ul.main_tab { display: flex; width: 100%; border-bottom: 1px solid #dddddd;}
.login_wrap ul.main_tab li { width: 100%; height: 60px;}
.login_wrap ul.main_tab li a { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; font-size: 18px; line-height: 21px; letter-spacing: -0.36px; color: #3e3e3e; transition: color .23s ease-in-out;}
.login_wrap ul.main_tab li a:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: #000; transition: height .23s ease-in-out;}
.login_wrap ul.main_tab li a:hover,
.login_wrap ul.main_tab li.on a { font-weight: bold; color: #000;}
.login_wrap ul.main_tab li a:hover:before,
.login_wrap ul.main_tab li.on a:before { height: 4px;}
.find_enter { display: flex; flex-direction: column; gap: 10px; padding: 50px 0 0;}
.find_enter > h3{ margin-bottom: 25px; line-height: 31px; text-align: center; font-size: 24px; color: #000; font-weight: 500; letter-spacing: -0.48px;}
.find_enter > h3 > span{ font-weight: 700; color: var(--primary-500);}

.result-box{ width: 100%; padding: 50px 30px; border-radius: 8px; background: #f5f5f5; box-sizing: border-box;}
.result-box > p{ line-height: 34px; text-align: center; font-size: 24px; color: #000; font-weight: 700; letter-spacing: -0.48px;}

.box { display: flex; gap: 10px; align-items: center;}
.box .text{ line-height: 20px; font-size: 18px; color: #222; font-weight: 400; letter-spacing: -0.36px;}

.box.cert-num-box{ position: relative;}
.box.cert-num-box > span{ position: absolute; top: 50%; right: 20px; transform: translate(0, -50%); line-height: 20px; text-align: right; font-size: 18px; color: var(--primary-500); font-weight: 700;}