@charset "utf-8";
/* CSS Document */

html, body {width: 100%}
body{padding:0px; margin:0px; display:block; font-size: 18px; font-family:"NotoSansCJKkrRegular","Noto Sans KR", sans-serif; COLOR: #5d5d5d; }
*{margin:0; padding:0;}

html .login_area, body.login_area{height: 100%}
.wrapper{width:100%; margin: 0px auto; }
.login_area .wrapper{height: 100%}
.wrap{display: table; width: 100%; height: 100%}
.login_outer{display:table-cell; vertical-align: middle; text-align: center;}
.login{position: relative; display: inline-block; text-align:center; width: 970px; height: 500px; border:1px solid #d7d7d7; background: url("../imgs/login/bg_left_20231128.png") no-repeat}

form{width: 530px;float: right}
h1 {
    margin: 60px 0px 35px 130px;
    font-size: 25px;
    font-family: "NotoSansCJKkrRegular","Noto Sans KR", sans-serif;
    font-weight: 500;
    color: #000;
    background: url(../imgs/login/logo_20220929.png) no-repeat 0px;
    background-size: 250px;
    height: 60px; text-indent: -99999;
}
.pr12{padding-right:12px;}
.mt10{margin-top:10px;}

.input_txt {
	padding: 0px; padding-left:10px; MARGIN: 0px;  WIDTH: 400px;  HEIGHT: 50px; 
	BORDER-BOTTOM: #dcdcdc 1px solid; BORDER-LEFT: #dcdcdc 1px solid; BORDER-TOP: #dcdcdc 1px solid; BORDER-RIGHT: #dcdcdc 1px solid;
	background-color:#ffffff; font-size: 16px; COLOR: #323232;
}
.check{margin-top:15px; margin-left:-275px;}
.check span{font-size: 15px; COLOR: #595959; line-height: 25px; float:left  }

.pwfind{font-size: 15px; font-weight:bold; color:#5d5d5d; margin-top:-21px; margin-left:230px}

input[type=checkbox] {  
    display: none;  
}
input[type=checkbox] + label{
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 30px;  
    margin-right: 15px;  
    font-size: 13px;
}

input[type=checkbox]+ label:before {     

    content: "";  
    display: inline-block;    
    width: 25px;  
    height: 25px;   
    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottom: 1px;  
    background: url(../imgs/login/sub_check.png) no-repeat;
    background-position: 0px 0px;
}
input[type=checkbox]:checked + label:before { 

    background: url(../imgs/login/sub_check.png) no-repeat;
    background-position: 0px -25px;
    font-size: 16px; 
    font-weight:800; 
    text-align: center;  
    line-height: 16px;  
} 
.errorMsg{font-size: 12px; text-align: left; padding-left: 62px; padding-top: 10px; color: red;}
.btn{ margin-top:15px; background-color: #0072ba; background-position:center; height:50px; line-height:50px; color:#FFFFFF; border:none; width:400px; font-size:16px; font-family:"NotoSansCJKkrRegular","Noto Sans KR", sans-serif;}

.etc{margin-top:30px; font-size: 13px; line-height: 21px; text-align: center}
.etc > p{display: block; margin-top: 5px; color: #000}
.etc > p > a{border:1px solid #ccc; padding: 1px 5px; border-radius: 20px; text-decoration:none; color:#222}

.security{width: 900px;margin: 0 auto; margin-top: 30px;}
.security h1{text-indent: -9999em;background-size: 200px; margin: 0px; height: 50px; padding-left: 0px;background-position: -12px 0px;}
.security h2{color: #222; font-size: 20px; padding-top: 20px; padding-bottom: 20px}
.security .top{background-color: #f8f8f8;border: 1px solid #eee;padding: 20px; font-size: 14px; line-height: 20px}
.security .top p{font-size: 16px; color: #000; padding-bottom: 10px}
.security table{margin-top: 20px; border-top: 2px solid #333;border-bottom: 1px solid #c7c7c7; border-spacing: 0; border-collapse: collapse; width: 100%;}
.security table thead{height: 40px; border-bottom: 1px solid #c7c7c7;}
.security table thead th{line-height: 40px; font-size: 14px; font-weight: normal; color: #000}
.security table tbody{}
.security table tbody td{text-align: center; font-size: 15px;height: 70px}
.security table tbody td span{}
.security table tbody td span a{color: #fff; text-decoration: none;font-size: 14px; width: 120px; line-height: 32px; border-radius: 17px; box-sizing: border-box;
    padding: 0px 30px 0px 10px; display: inline-block;background: url(../imgs/icon_download.png) 85px center no-repeat #222;}
.security p.bottom{padding-top: 20px; font-size: 14px; line-height: 20px}
.security .btn{text-align: center; margin: 0 auto; margin-top: 30px;}
.security .btn a{text-decoration: none; color: #fff; width: 100%; display: block}

@media all and (max-width:529px) and (min-width:0px)
{
.wrapper{width:100%; height:auto;}
.wrap{display: table; width: 100%; height:auto; background-color: #fff}
.login_outer{display:table-cell; vertical-align: middle; text-align: center;}
.login{ text-align:center; width: 100%; height: auto; background: none; border: none}
form{width: 100%; float: none}
h1{margin:0px 0px 20px 0px;text-align: center; padding: 100px 0px 0px; width: 100%; background-position:  center}
.input_txt{padding: 0px; padding-left:10px; margin: 0px;  width: 90%;}
.check{margin-top:15px;width: 90%; margin-left: 5%; text-align: left}
.etc{width: 80%; margin-left: 10%;padding:0px; text-align: left}
.btn{width:90%;}
}