@charset "UTF-8";

#login_header { position: static}

#contents { position: relative; width:100%; max-width:1200px; z-index: 0; padding-top: 5rem; background-color: #f8f8f8; }

#contents::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; height: 24rem; background: -webkit-gradient(linear, left top, right top, color-stop(48%, #06a888), color-stop(52%, #1b8fc4)); background: linear-gradient(to right, #06a888 48%, #1b8fc4 52%); }

.form-textbox { width: 100%; height: 5rem; padding: 0 1rem; border: 1px solid #bbb; -webkit-transition: all 0.2s; transition: all 0.2s; }

.form-textbox:focus, .form-textbox:active { border-color: #000; }


/*로그인개편*/
#header{max-width: 1400px; width: 100%;  margin: 0 auto; height: auto; padding:10px 0; }
#header #logo{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
#header a img{max-width: 100%; width: auto;}
#contents .mt10 {margin-top: 10px !important;}
#contents .mt20 {margin-top: 20px !important;}
#contents .mt40 {margin-top: 40px !important;}
#contents .mb10 {margin-bottom: 10px !important;}
#contents::before {display: none;}
#contents section{padding: 0 20px;}
#contents .section01{display: flex;flex-wrap: wrap; justify-content: center;}
#contents .section01 > div{ flex:1; margin-right: 30px;}
#contents .section01 > div:last-child{margin-right: 0;}

#contents .section01 > div {display:flex; gap:60px; justify-content: center;}
#contents .section01 > div > .certificate-login, .simple-login{ width:calc((100% - 60px) / 2);height:100%; border-radius: 30px; padding:48px 40px; background: #d7e2f3;display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center;flex-direction:column;}
#contents .section01 > div > .certificate-login {background: #ceebf4;}
#contents .section01  .certificate-join {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: column; gap:0px}
#contents .section01  > div p.login-title {color: #1476a7; font-size: 26px; font-weight: 700; text-align: center;}
#contents .section01  > div p.login-title > span{color:#002c5e;}

#contents .section01  > .box > div > .title-area{display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
#contents .section01  > .box > .certificate-login > .title-area{display: flex; align-items: center; flex-direction: column; width:100%; max-width: 400px;}
#contents .section01  > .box > .certificate-login > .title-area > #loginId, #password {width:100%;border-radius: 7px; border: 1px solid #bbb; padding: 5px 10px; font-size:16px; }
#contents .section01  > .box > .certificate-login > .title-area > #password {margin-top: 8px}

#contents .section01  > .box > div > .title-area .img{ width:100px; display:flex;align-items: center; justify-content: center; margin-right: 16px;}

#contents .section01  > .box > div > .btn-area {width:100%; max-width: 400px; text-align:center;}
#contents .section01  > .box > div > .btn-area button{display: block; width: 100%; height: 50px; background: #4a75b9; color:#fff; font-size: 20px;border-radius: 7px; font-weight: 600; }
#contents .section01  > .box > div > .btn-area button.btn02{background: #4a91b9;}
#contents .section01  > .box > div > .btn-area > * + * {margin-top:5px;}
#contents .section01  > .box > .certificate-login > .btn-area {width:100%; max-width: 400px;}
#contents .section01  > .box > .certificate-login > .btn-area button{display: block; width: 100%; height: 50px; background: #4a75b9; color:#fff; font-size: 20px;border-radius: 7px; font-weight: 600; }
#contents .section01  > .box > .certificate-login > .btn-area button.btn02{background: #4a91b9;}
#contents .section01  > .box > .certificate-login > .btn-area > * + * {margin-top:5px;}
#contents .section01  > .box > .certificate-login > .btn-area > #btnJoin {background: #4a91b9}
#contents .section01  > .box > .certificate-login > .find-area{display:flex;gap:10px;}
#contents .section01  > .box > .certificate-login > .find-area a{display:inline-flex;align-items:center;gap:10px;color:#666;font-size:14px;}
#contents .section01  > .box > .certificate-login > .find-area a:not(:last-child)::after {content:"";width:1px;height:12px;background:#adadad;}

#contents .section01  > .box  ul{ margin-top:10px;font-size: 16px; color:#131313; display: flex; flex-wrap: wrap; align-items: center;justify-content:center; }
#contents .section01  > .box ul li {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
#contents .section01  > .box ul li:after{display: inline-flex; content: ""; width: 1px; height: 16px; background: #131313; margin: 0 5px;}
#contents .section01  > .box ul li:last-child::after{display: none;}

#contents .section01  > .box > .simple-login{justify-content:space-around;}
#contents .section01  > .box > .simple-login .btn-area ul {justify-content: space-between;}
#contents .section01  > .box > .simple-login .btn-area ul li {font-size: 0; }
#contents .section01  > .box > .simple-login .btn-area ul li:after{display: none;}
#contents .section01  > .box > .simple-login .btn-area ul li a{width:57px; height:57px; border-radius: 6px;background: url(./../../css/images/login/kakao.png) center no-repeat;background-size: cover;}
#contents .section01  > .box > .simple-login .btn-area ul li:nth-child(2) a{background:url(./../../css/images/login/kb-app.png) center no-repeat;}
#contents .section01  > .box > .simple-login .btn-area ul {margin: 0;}
#contents .section01  > .box > .simple-login .btn-area ul li:nth-child(3) a{background:url(./../../css/images/login/payco-app.png) center no-repeat;}
#contents .section01  > .box > .simple-login .btn-area ul li:nth-child(4) a{background:url(./../../css/images/login/pass.png) center no-repeat;}
#contents .section01  > .box > .simple-login .btn-area ul li:nth-child(5) a{background:url(./../../css/images/login/samsungpay.png) center no-repeat;}

#contents .section01  > .box.certificate-join{background: #ceebf4; border-radius: 30px; padding:30px 0px;}
#contents .section01  > .box.certificate-join p.txt-sm{margin-top:10px; margin-bottom: 30px;font-size:16px; color:#131313;}
#contents .section01  > .box.certificate-join p.txt-md{margin-top: 50px; font-size: 24px; letter-spacing: -2px;}
#contents .section01  > .box.certificate-join p.txt-md strong{color: #e04f4f;}
#contents .section01  > .box.certificate-join p.txt-md a{color: #4a75b9;text-decoration:underline;}

#contents .section01  > .box.certificate-join button{width:320px;height:50px;border-radius: 7px;background: #4a91b9; color: #fff; font-size: 20px; font-weight: 700; }
#contents .section01  > .box.certificate-join button.btn02{background: #4a75b9;}

.certificate-login > .btn-area a.ico-new-page { display: flex; align-items: center; flex-wrap: wrap; font-size: 16px; color: #131313; margin-top: 10px;}
.certificate-login > .btn-area a.ico-new-page::after{content: ""; display: inline-flex; width: 18px; height: 18px; background:url(./../../css/images/login/new-link-black.png) center no-repeat;margin-left: 10px;}

#guide-area {display: flex; justify-content: center; gap:30px}

#contents .section01 > .box.box-height{padding:30px; text-align: center;}
#contents .section01 > .box.box-height:first-child{background: #d7e2f3;}

#contents .section02{margin: 50px 0 40px 0; color:#131313; font-size: 16px;  display: flex; flex-wrap: wrap;}
#contents .section02 .info-area {width:340px;}
#contents .section02 .info-area > h4 {font-size: 24px; font-weight: 700; color:#043560;}
#contents .section02 .info-area > h4 span{color:#188dc3;}
#contents .section02 .call-area {flex: 1;}
#contents .section02 .call-area ul{ position: relative; display: flex; align-items: center;flex-wrap: wrap;}
#contents .section02 .call-area ul:last-child{border-bottom: 0;}
#contents .section02 .call-area ul li{position: relative; width: 50%; padding:10px;padding-left: 25px;}
#contents .section02 .call-area ul li::before{
    content: ""; display: block;
    width: 7px; height: 7px; border-radius: 100%; background: #4ba49d; position: absolute; top:50%; transform:translateY(-50%); left: 5px;
}
#contents .section02 .call-area ul li::after{
    content: ""; display: block;
    width: 7px; height: 7px; border-radius: 100%; background: #2f4e99; position: absolute; top:50%; transform:translateY(-50%); left: 9px;
}
#contents .section02 .call-area ul:before{
    content:""; display: block; width: 100%; height: 1px; background: #ccc;
    position: absolute; top: 85%;
}


.loginWrap{position:relative;}
.body-wrap{ overflow:hidden; height:100vh;min-height:900px;}
main {width:100vw; position:relative;height:calc(100vh - 220px - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:#f8f8f8;
}

/*#footer{ background: #43454f;width: auto;max-width: initial;margin-left: 0 !important;margin-right: 0 !important;padding: 0;}
#footer div{width:1400px; height:120px; margin: 0 auto; padding: 20px 0;}
#footer div a{width:220px; height: 48px; background: #1375a6; border-radius: 7px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 16px; color: #fff;}
#footer div p{font-size: 12px; margin-top: 12px; color:#fff;}*/


.loginWrap{position:relative; width:100%; height:100vh;min-height: 900px;}
#contents .form_select > select{width:100% !important;}
#footer{position:absolute;bottom:0;left:0; width:100vw;}


/*  @media(min-height:940px){
 	body{background: red;}
 } */
 
 /* 자원관리시스템 css 이동 */
.login-container{display:flex; width:100%; height:100vh; justify-content:center; flex-direction:column; align-items:center; background:#f8fafc; padding:20px}
.login-container .login-wrapper{display:grid; overflow:hidden; width:100%; max-width:1000px; border-radius:24px; background:white; box-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.18), 0 10px 10px -5px rgba(0, 0, 0, 0.13); grid-template-columns:1fr 1fr;}
.login-container .login-wrapper .login-left{display:flex; padding:40px 50px; background:linear-gradient(135deg, #1e4a9f 0%, #2d5ab8 100%); color:white; flex-direction:column; justify-content:center;}
.login-container .login-wrapper .login-left h1{margin-bottom:20px; font-size:32px; font-weight:700; line-height:1.3;}
.login-container .login-wrapper .login-left p{opacity:0.92; margin-bottom:48px; font-size:16px; line-height:1.7;}
.login-container .login-wrapper .login-left ul{margin-left: 30px;}
.login-container .login-wrapper .check_item{display:flex; margin-bottom:20px; font-size:15px; align-items:center;}
.login-container .login-wrapper .check_item svg{width:24px; height:24px; margin-right:12px; flex-shrink:0;}
.login-container .login-wrapper .login-right{display:flex; padding:40px 50px; flex-direction:column; justify-content:center;}
.login-container .login-wrapper .login-header{margin-bottom:40px;}
.login-container .login-wrapper .login-header h2{margin-bottom:8px; color:#0f172a; font-size:28px; font-weight:700;}
.login-container .login-wrapper .login-header p{color:#64748b; font-size:15px;}
.login-container .login-wrapper .login-right .form-group{margin-bottom:24px;}
.login-container .login-wrapper .login-right .form-label{display:block; margin-bottom:8px; color:#334155; font-size:14px; font-weight:600;}
.login-container .login-wrapper .login-right .input-wrapper{position:relative;}
.login-container .login-wrapper .login-right .input-icon{position:absolute; top:50%; left:16px; z-index:1; width:20px; height:20px; color:#94a3b8; transform:translateY(-50%);}
.login-container .login-wrapper .login-right #loginForm .form-input{width:100%; padding:12px 16px 12px 46px; border:2px solid #e2e8f0; border-radius:12px; background:white; color:#0f172a; font-size:15px; transition:all 0.2s;}
.login-container .login-wrapper .login-right #loginForm .form-input:focus{border-color:#2d5ab8; outline:none; background:#f8fafc;}
.login-container .login-wrapper .login-right #loginForm .form-input::placeholder{color:#94a3b8;}
.login-container .login-wrapper .login-right .btn-login{width:100%; margin-top:8px; padding:14px; border:none; border-radius:12px; background:#1e4a9f; color:white; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.2s;}
.login-container .login-wrapper .login-right .btn-login:hover{background:#2d5ab8; box-shadow:0 10px 15px -3px rgba(45, 90, 184, 0.4); transform:translateY(-1px);}
.login-container .login-wrapper .login-right .btn-login:active{transform:translateY(0);}
.alert{display:flex; margin-bottom:24px; padding:14px 16px; border-radius:12px; font-size:14px; align-items:center;}
.alert-danger{border:1px solid #fecaca; background-color:#fef2f2; color:#dc2626;}
.alert svg{width:20px; height:20px; margin-right:10px; flex-shrink:0;}
.login-container .login-wrapper .login-right .info-box{margin-top:24px; padding:16px 18px; border-left:4px solid #1e4a9f; border-radius:12px; background:#f8fafc; font-size:14px;}
.login-container .login-wrapper .login-right .info-box-title{margin-bottom:8px; color:#0f172a; font-weight:700;}
.login-container .login-wrapper .login-right .info-box-text{color:#64748b; font-weight:500; line-height:1.6;}
.login-container .footer-text{margin-top:24px; color:#94a3b8; font-size:14px; font-weight:500; text-align:center;}

@media(max-width:1440px){
    .loginWrap{height:auto;}
    .body-wrap{height:auto; }
    main{height:auto; padding-top:30px;}
    #footer{position:static;}
    #contents .section02 {padding-bottom:20px;}
    .quickMenu{ position:fixed; right:20px; bottom:20px;}
    .quickMenu2{ position:fixed; right:20px; bottom:110px;}
}
@media (max-width:1024px){
    #header #logo {padding: 0 20px;}
    #contents .section01 > div:first-child > div, #contents .section02{flex-direction: column;}
    #contents .section01 > .box > div > .btn-area{margin-top: 20px;}
    #contents .section01 > .box.certificate-join {padding:  30px 0;}
    #contents .section01 > .box.box-height{padding:30px; text-align: center;}
    #contents .section01 > div.felx03 > div + div {margin-top:20px;}
    #contents .section01 > .box.certificate-join p.txt-sm {word-break: keep-all; text-align: center;}
    #contents .section02 .call-area {margin-top: 10px;}
    #contents .section02 {flex-wrap: nowrap;}
    #footer div {padding: 20px;}
    /* #contents > * {font-size: 0px;} */
    #contents .section01 .certificate-join {min-height:100%;}
    #contents .section01 > div.felx03 > div {padding:20px;}

    #contents .section02 .info-area{width:100%; padding-left:0;}

}
@media (max-width:768px){
    #contents .section01 > div {flex-direction:column;gap:30px}
    #contents .section01 > div > .certificate-login, .simple-login{width:100%;}
    #contents .section01 > .box + .box {margin-top: 20px;}
    #contents .section01 {flex-direction: column;}
    #contents .section02 .call-area ul li {width: 100%;position: relative;}
    #contents .section02 .call-area ul:before{display: none;}
    main #contents {width:100%;}
    
    .login-container{padding:16px;}
    .login-container .login-wrapper{max-width:480px; grid-template-columns:1fr;}
    .login-container .login-wrapper .login-header{margin-bottom:20px;}
	.login-container .login-wrapper .login-right{padding:32px 24px;}
	.login-container .login-wrapper .login-right .form-group{margin-bottom:12px;}
	.login-container .login-wrapper .login-left{padding:32px 24px;}
	.login-container .login-wrapper .login-left h1{font-size:24px;}
	.login-container .login-wrapper .check_lst{display:none;}
	.login-container .login-wrapper .login-left p{margin-bottom:0;}


}
@media (max-width:500px){
    #contents .section01 > .box > div > .btn-area{width:100%;}
    #contents .section01 > .box.certificate-join button{width:90%;}
    #header #logo {flex-direction: column;align-items:stretch;}
    #header #logo a + a{margin-top:10px;}
    #contents .section01 > .box.certificate-join >img{width:50%;}
    #contents .section01 > .box > .certificate-login > .title-area,
    #contents .section01 > .box > .certificate-login > .title-area > #loginId, #password{width:100%;}
	#contents .section01 > .box > .certificate-login > .btn-area{width:100%;}
}