/* 로그인 페이지 */

#login_wrap{position:relative; width:100%; height:100vh;}
#login_wrap footer{position: absolute; bottom: 0; width:100%; padding: 16px 0; font-size: 15px; text-align: center; background: transparent; color: #ddd;}

.login_area{position:relative; width:100%; height: 100%; display:flex; justify-content: center; align-items: center; background-image: url(../../img/layout/login_bg3.jpg); /* background: url('/img/layout/login_bg.jpg') no-repeat 40% center; background-size:cover; */
background-position:center; background-repeat: no-repeat;}

.login_area .login_header h1{text-align: center; margin: 0 0 15px;}
.login_area .login_header h1 img{width:320px; max-width: 100%;}
.login_area .login_header h1.bottom_line{position: relative; padding-bottom: 15px; margin-bottom: 15px;}
.login_area .login_header h1.bottom_line::after{content: ''; display:inline-block; width:40px; height:2px; position: absolute; left:50%; bottom:0; transform: translateX(-50%); background-color:#222;}
.login_area .login_header p{width:100%; display:block; text-align: center;}
.login_area .login_header span{width:100%; margin:0 0 32px; text-align: center; color:#fff; font-size: 16px; letter-spacing: 2px;}

.login_area .login_box{width: 465px; max-width: 100%; padding: 0 40px 40px 40px; z-index: 100; border-radius: 20px;}
.login_area .login_box .login_input div input{width:385px; max-width:100%; background-color: rgba(255,255,255,0.5); color:#fff; border: 0; border-radius: 30px; line-height: 50px; height: 50px; text-indent: 20px;}
.login_area .login_box .login_input div input::placeholder{color:#fff;}
.login_area .login_box .login_input div input:focus::placeholder{color:transparent;}
.login_area .login_box .login_input div input[type=text]{ margin: 0 0 15px;}

.login_area .login_box .login_util{display:flex; justify-content: space-between; padding:0 10px; margin-top: 15px;}
.login_area .login_box .login_util div:first-child{margin-right: 15px;}
.login_area .login_box .login_util div input[type=checkbox]{width: 18px; height: 18px; margin: 0;}
.login_area .login_box .login_util label{color:#fff; font-size: 14px; letter-spacing: -0.5px; vertical-align: middle; cursor: pointer;}
.login_area .login_box .login_util a{color:#fff; font-size: 14px; letter-spacing: -0.5px;}

.login_area .login_box .login_trigger #login_btn{display: block; width:100%; height:50px; margin: 15px 0; text-align: center; font-size: 18px; border-radius: 30px;}

.login_area .login_box .login_manager{display:flex; justify-content:center; align-items:center; width:100%; text-align: center;}
/* 20230220 시스템담당 연락처 숨김 */
/* .login_area .login_box .login_manager li:first-child::after{display: inline-block; content:'|'; padding: 0 10px; color:#fff; font-size: 13px;} */
.login_area .login_box .login_manager li a{color:#fff; font-size: 13px; letter-spacing: -0.5px; font-family: 'Malgun Gothic';}

.login_area .login_box .login_manager li a:hover {-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; color:#e31837;}

.popup_manager{position: fixed; display:none; top:0; right:0; bottom:0; left:0; z-index: 150;}
.popup_manager .popup_manager_area{position: absolute;  width:100%; height:100%; display: flex; align-items: center; justify-content: center;}
.popup_manager .popup_manager_area .popup_manager_box{width:90%; max-width:500px; padding:10px 15px; border-radius: 15px; background:#fff; border: 1px solid #ddd; text-align: center; z-index: 100;}

.popup_manager .popup_manager_area .popup_manager_box .popup_header{margin: 15px 0;}
.popup_manager .popup_manager_area .popup_manager_box .popup_header h2{margin:0 0 10px;}
.popup_manager .popup_manager_area .popup_manager_box .popup_header p{line-height: 130%; letter-spacing: -0.5px;}

.popup_manager .popup_manager_area .popup_manager_box .popup_table table th,
.popup_manager .popup_manager_area .popup_manager_box .popup_table table td{border: 1px solid #ddd; padding:15px 10px;}

.popup_manager .popup_manager_area .popup_manager_box .popup_table table th{background-color:#ddd;}

.popup_manager .popup_manager_area .popup_manager_box .popup_trigger{margin:15px 0;}
.popup_manager .popup_manager_area .popup_manager_box .popup_trigger button{width: 100%; font-size: 18px;}

.popup_overlay{position: absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, .7);}



/* 비밀번호 관련 페이지 */
#pass_wrap{position:relative; width:100%; height:100vh;}
#pass_wrap footer{position: absolute; bottom: 0; width:100%; padding: 16px 0; font-size: 15px; text-align: center; background: #000; color: #ddd;}

.pass_area{position:relative; width:100%; height:calc(100vh - 50px); display:flex; justify-content: center; align-items: center; background-image: url(../../img/layout/login_bg3.jpg); background-size:cover; background-position: 0px -52px;}
.pass_area .pass_box{padding:10px 0; background: transparent; z-index: 100;}

.pass_area .pass_box .pass_header{margin: 0 0 30px;}
.pass_area .pass_box .pass_header h1{text-align: center; margin: 0 0 0px; color:#fff;}
.pass_area .pass_box .pass_header h1 img{width:320px; max-width: 100%;}
.pass_area .pass_box .pass_header span{width:100%; margin:0 0 20px; text-align: center; color:#fff; font-size: 16px; letter-spacing: 4px;}
.pass_area .pass_box .pass_header h2{font-size:32px; text-align: center; margin: 0 0 0px; color:#fff;}
.pass_area .pass_box .pass_header h2.bottom_line{position: relative; padding-bottom: 15px; margin-bottom: 15px;}
.pass_area .pass_box .pass_header h2.bottom_line::after{content: ''; display:inline-block; width:40px; height:2px; position: absolute; left:50%; bottom:0; transform: translateX(-50%); background-color:#fff;}
.pass_area .pass_box .pass_header p{width:100%; display:block; text-align: center; color:#fff;}

.pass_area .pass_box .pass_input{width:350px; max-width: 100%; margin:0 auto 25px;}
.pass_area .pass_box .pass_input div{text-align: left; margin: 0 0 15px;}
.pass_area .pass_box .pass_input div p{color:#fff; margin:0 0 5px;}
.pass_area .pass_box .pass_input div span{color:#fff; text-align: right; font-size: 14px;}
.pass_area .pass_box .pass_input div input{width:350px; max-width:100%; background-color: rgba(255,255,255,0.4); color:#fff; border: 0; border-radius: 30px; line-height: 50px; height: 50px; padding: 0 20px 0 15px;}
.pass_area .pass_box .pass_input div input::placeholder{color:#fff;}
.pass_area .pass_box .pass_input div input:focus::placeholder{color:transparent;}
.pass_area .pass_box .pass_input p{color:#fff; margin:0 0 5px; letter-spacing: -0.3px;}

.pass_area .pass_box .pass_trigger #pass_btn{display: block; width:350px; max-width:100%; height:50px; margin: 15px auto; text-align: center; font-size: 18px; border-radius: 30px;}

.pass_area .pass_box .go_main{width:100%; text-align: center;}
.pass_area .pass_box .go_main a{color:#fff; font-size: 14px; letter-spacing: -0.5px; text-decoration: underline;}
.pass_area .pass_box .go_main a:hover {-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; color:#e31837;}


/* 비밀번호 찾기 */
.findpw_header{text-align: center; margin: 0 0 15px;}
.findpw_header h1 {position:relative; padding: 0 0 30px;}
.findpw_header h1:after{display: block; content: ''; position:absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; width:80px; height:3px; background: red; margin:15px auto 0;}
.findpw_header span {width: 100%; margin: 0 0 20px; text-align: center; font-size: 16px; word-wrap:break-word; word-break:keep-all;}
.findpw_box {display: block; max-width: 100%; padding: 40px 30px; background: rgba(255,255,255,0.8); border-radius: 20px; z-index: 100;}
.findpw_input div {margin: 0 0 10px;}
.findpw_input div p {font-size: 13px; margin: 5px 0; text-align:center;}
.findpw_input div input{width:385px; max-width:100%; background-color: rgba(255,255,255,0.8); color:#fff; border: 0; border-radius: 30px; line-height: 50px; height: 50px; text-indent: 20px;}
.findpw_input div input[type='text']{width: 100%; max-width:100%; background-color: #e31837; color:#fff; border: 0; border-radius: 30px; line-height: 50px; height: 50px; text-indent: 0px; text-align: center;}
.findpw_input div input::placeholder{color:#666;}
.findpw_txt p {margin: 30px 0; text-align: center; font-size: 15px; word-wrap:break-word; word-break:keep-all;}
#findpw_btn, #back_btn{display: block; width:100%; height:50px; margin: 15px 0 0; text-align: center; font-size: 18px; border-radius: 30px;}


/* 비밀번호 변경 */
.changepw_header{text-align: center; margin: 0 0 15px;}
.changepw_header h1 {position:relative; padding: 0 0 30px;}
.changepw_header h1:after{display: block; content: ''; position:absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; width:80px; height:3px; background: red; margin:15px auto 0;}
.changepw_header span {display:block; width: 100%; margin: 0 0 20px; text-align: center; font-size: 16px; word-wrap:break-word; word-break:keep-all;}
.changepw_box {display: block; width: 450px; padding: 40px 10%; background: rgba(255,255,255,0.8); border-radius: 20px; z-index: 100;}

.changepw_input div {margin: 0 0 10px;}
.changepw_input div p {font-size: 13px; margin: 5px 0; text-align:center; word-wrap:break-word; word-break:keep-all;}
.changepw_input div ul li{display:none; font-size: 13px; text-align:center;}
.changepw_input div ul li.okay{display: block;}
.changepw_input div input{width:385px; max-width:100%; background-color: rgba(255,255,255,0.8); border: 0; border-radius: 30px; line-height: 50px; height: 50px; text-indent: 20px;}
.changepw_input div input::placeholder{color:#666;}
#changepw_btn{display: block; width:100%; height:50px; margin: 15px 0 0; text-align: center; font-size: 18px; border-radius: 30px;}

@media (max-width:1380px){
    .pass_area{background-position: center;}
}

@media (max-width:900px) {
    .login_area .login_header{margin:0;}
}

@media (max-width:450px) {
    .login_area .login_header h1{margin:0 0 5px;}
    .login_area .login_header h1 img{width:220px;}
    .login_area .login_header span {margin:0 0 30px; font-size: 15px; letter-spacing: 0px;}
    .login_area .login_box{width:350px; max-width: 100%; padding:30px 20px;}
    .changepw_box,
    .findpw_box{width:350px; max-width: 100%; padding:30px 20px;}
    .changepw_header span,
    .findpw_header span{margin:0 0 15px; font-size: 14px;}
    .findpw_txt p{margin:15px 0; font-size: 14px;}
}

/* 갤럭시 폴드폰 가로 280px 시롸니 .. */
@media (max-width:300px) {
    .changepw_box,
    .findpw_box{width:280px;}
}