/* *****************************************
 * 1. 로그인
 * ****************************************/
 .login_wrap {position:relative; width:100%; height:847px; margin:0 auto; text-align:center; 
    background:url(/images/login_bg.jpg) no-repeat center center ; 
    background-size:cover;}
.login_wrap .logoTop {width:610px; text-align:center; margin:150px 0px 45px 0px; color:#fff;  font-weight:bold; font-family:'Nanum Gothic';  text-shadow: 0px 0px 8px #115d59;}
.login_wrap .logoTop .login_title{font-size:35px; line-height:65px;}
.login_wrap .logoTop .login_text{font-size:17px; line-height:24px; }
.login_wrap .login_Contents{position:absolute; left:50%; top:50%;
margin-left:-240px; margin-top:-170px; width: 480px;
background:#fff;/*  box-shadow: 0px 0px 15px 2px rgba(17, 93, 89, 0.7); */ }

.login-form {margin:40px 60px 60px}
.login-form .logo{text-align:center; margin-bottom: 20px; }
.login-form .idBox, .login-form .pwBbox {width: 100%;}
.login-form .pwBbox > input{margin-top:-1px; }
.login-form .idBox > input, .login-form .pwBbox > input{
    color: #aaa; width: calc(100% - 17px); height:34px; 
    border:1px solid #ccc; display:inline-block; 
    text-align:left; padding: 5px 0px 5px 15px; font-size: 12px; }
.login-form input:focus{color:#222;}
.login-form label:hover{color:#555; cursor:pointer;}

.login-form input:checked + label,
.login-form input::-ms-input-placeholder {color:#aaa; font-style: none; }/* // Internet Explorer 10 이상에 적용 */
.login-form input::-webkit-input-placeholder {color:#aaa; font-style: none; } /* // Webkit, Blink, Edge에 적용 */
.login-form input::-moz-placeholder {color:#aaa; font-style: none;}/* // Mozilla Firefox에 적용 */

.login-form .check {
    text-align:left;
    margin-top:10px;
    color:#555;
}
.login-form .check input {
    padding: 0 5px;
    margin-bottom: 3px;
    border-top: 1px solid #bcbcbc;
    border-left: 1px solid #bcbcbc;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}
.login-form .login_button{width: 100%;margin-top:10px; text-align:center; }
.login-form .btn-login {
    display:inline-block;
    width:100%; 
    height:54px; 
    line-height:53px; 
    border:none; 
    background:#004f9f; 
    color:#fff; 
    font-size:17px; 
}

.login-form .login_search{margin-top:10px;}
.login-form .login_search p{text-align:center;}
.login-form .login_search a:hover{color:#004f9f;text-decoration:underline;}
.login-form .login_search a{width:480px; margin-top:30px; font-size:14px; color:#999; font-weight:bold; font-family:'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','돋움',dotum, sans-serif;}
#txtID {-webkit-text-fill-color: #737373 !important}

.area-btn{
    position:absolute;
    right:0;
}
.area-btn a{
    display:inline-block;
    border:1px solid #c0c0c0;
    width: 150px;
    height: 48px;
    text-align:center;
    line-height:48px;
    font-size: 17px;
}
.area-btn a:hover{
    background-color:#666;color:#fff;
}
    
    
    
/* *****************************************
 * 2. 로그인 - mddia Query 
 * ****************************************/

@media only screen and (max-width: 1200px) {   

    .area-btn {
        position: absolute;
        right: 30px;
    }
}

@media only screen and (max-width: 1024px) {    
    .area-btn {
        position: unset;
        right: unset;
        text-align: center;
    }
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 600px) {
    .login_wrap .login_Contents {
        margin-left: -40%;
        width: 80%;
    }
    .login-form .idBox, .login-form .pwBbox {width: 100%;}
    .login-form .idBox > input, .login-form .pwBbox > input {

    }
    .login-form .btn-login {

    }
    .area-btn a {

    }
}

@media only screen and (max-width: 480px) {
    .login-form {
        margin: 40px 40px 60px;
    }
}