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


/************************** 
    Reset
***************************/
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,div,figure,article,header,nav,footer,section,aside {margin:0;padding:0;word-wrap:break-word;white-space:normal;-webkit-text-size-adjust:100%;text-size-adjust:100%; box-sizing: border-box}
body,input,textarea,select,button,table,th,td {font-family:'nsKR', sans-serif;font-size:16px;color:#343537;font-weight:300;line-height:1.45;}
html,body {height:100%;-webkit-overflow-scrolling:touch;overflow:hidden;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;} 
img,fieldset,iframe {border:0;vertical-align:top}
img {width:100%;height:auto;}
textarea {border-radius:0;-webkit-border-radius:0;-webkit-appearance:none;resize:none;}
ul,ol {list-style:none;}
em,address {font-style:normal;}
input,select {-webkit-appearance:none;vertical-align:middle;}
table {width:100%;border-collapse:separate;border-spacing:0;}
hr {display:none;}
label{word-break:break-all;}
legend,caption {position:absolute;height:0;overflow:hidden;}
strong,b {font-weight:700}
button {border:none;background:none;cursor:pointer;}
button:focus{outline:0;;}
input[type="password"]{font-family:'Dotum', sans-serif;}
input[type="text"], textarea{font-family:'nsKR', sans-serif;}
a {display:inline-block;color:inherit;text-decoration:none;color:#343537;}
abbr{text-decoration:none;}

/************************** 
    Font
***************************/

@font-face {
	font-family:'nsKR';
	src:local(※),
		url('../fonts/NotoSansKR-Light.woff') format('woff'),
		url('../fonts/NotoSansKR-Light.otf') format('opentype');
	font-weight: 200;
	font-style: normal
}

@font-face {
	font-family:'nsKR';
	src:local(※),
		url('../fonts/NotoSansKR-DemiLight.woff') format('woff'),
		url('../fonts/NotoSansKR-DemiLight.otf') format('opentype');
	font-weight: 300;
	font-style: normal
}

@font-face {
	font-family:'nsKR';
	src:local(※),
		url('../fonts/NotoSansKR-Regular.woff') format('woff'),
		url('../fonts/NotoSansKR-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family:'nsKR';
	src:local(※),
		url('../fonts/NotoSansKR-Medium.woff') format('woff'),
		url('../fonts/NotoSansKR-Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal
}

@font-face {
	font-family:'nsKR';
	src:local(※),
		url('../fonts/NotoSansKR-Bold.woff') format('woff'),
		url('../fonts/NotoSansKR-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal
}

@font-face {
	font-family:'nsKR';
	src:local(※),
		url('../fonts/NotoSansKR-Black.woff') format('woff'),
		url('../font/sNotoSansKR-Black.otf') format('opentype');
	font-weight: 800;
	font-style: normal
}



.mail_login {height: 100%; position: relative; width: 100%; min-height: 640px;}
.login_area { background: url("../images/login_bg.png") no-repeat top right; max-width: 1200px;  width: 1200px;  position: absolute; left: 50%; top:40%;  min-height: 500px;  transform:translate(-50%, -50%)}
.bottom {position: absolute; bottom:0; background:url("../images/login_bottom_bg.png"); height:180px; width: 100%; text-align: center; padding: 70px; color: #fff; font-size: 12px; font-weight: 200}
.login { width: 540px;}
.login h1 { background: url("../images/KoDATA_w.png") no-repeat; text-indent: -9999px}
.login .text { font-size: 22px; font-weight: 200; margin:20px 0 50px}
.login .text em {font-weight: 500}
.login li { margin:10px 0}
.login input[type="password"],
.login input[type="text"], 
.login input[type="password"] 
{ border: 1px solid #cccccc; border-radius: 5px; background: url("../images/icon_idpw.png") no-repeat 10px 10px ; padding:0  0 0 80px; height: 50px; width: 100%;}
.login input[type="text"] ul[type="checkbox"] { background: #000; width: 25px; height: 25px;}
.login .id { background-position: 10px 11px!important }
.login .pw {background-position: 10px -60px!important }
.login .otp {background-position: 10px -130px!important }
.login .btn_login { background: #00a2c5; border: none; color: #fff; height: 60px; width: 100%; border-radius: 5px; font-size: 20px; cursor: pointer}
.login li:last-child { text-align: right;  padding: 10px 0 0 0}
input[type='checkbox'] { /* input 감추기 */
			position: absolute;
			overflow:hidden;
			width: 1px;
			height: 1px;
			margin: -1px;
			opacity: 0;
}
input[type='checkbox'] + label {
    display: inline-block;
    font-size: 16px;
    cursor: pointer
}
input[type='checkbox'] + label:before { /* 체크 전 이미지 생성 */
    display: inline-block;
    width: 25px;
    height: 25px;
    margin:0 10px 0 0;
    background: url(../images/check.png) no-repeat 0 0;
    vertical-align: top;
    content:'';
}
input[type='checkbox']:checked + label:before { /* 체크 후 이미지 적용 */
    background-image: url(../images/checked.png);
}

.btn_list{text-align: left ;}
.find_pass{margin-left: 13% ;}
.login_check{margin-left: 15% ;}

@media screen and (max-width:1230px) { 
    .login_area { width: 100%; background: none}
    .login { margin: 0 auto; }
}

@media screen and (max-width:620px) { 
    .login_area { width: 100%; background: none;}
    .login { margin: 0 auto; width:80%;}
    .bottom {  background:url("../images/login_bottom_mbg.png"); }
    .btn_list span { display: block;}
    .find_pass, .login_check, .signup {text-align:center; margin:0 0 20px;}
    .bottom {height:130px; padding:50px 0 0;}
}

@media screen and (max-width:300px) { /*겔럭시 폴드*/
    .login h1 { background-size: 90%; margin: 10px 0 0}
    .login .text { margin: 0}
}