@charset "utf-8";
/* @import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); */

@import url("NanumSquare.css");
@import url("notosanskr.css");

html{background: #f2f1fa; width:100%; height:100%;}
body.login_body {width:100%; height:100%;}

.content {overflow: hidden; position: absolute; top: 50%; left:50%; margin-top: -250px; /* 높이의 절반을 음수 마진으로 */ margin-left:-325px; width:820px; height:500px; z-index:10; background:#fff url(/resources/common/images/login/login_background.png) no-repeat; 
		  border-radius:20px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
}
.content h1 {text-align:right; margin:115px 70px 0 0;}
.content .login-cont-text {overflow: hidden; float: right; width:240px; margin:36px 85px 0 0;}
.content .login-cont-text .id-area {position:relative;}
.content .login-cont-text .id-area .title {font-family:'Malgun Gothic'; font-size:13px; color:#000; font-weight:bold; }

.login-input {border-bottom:2px solid #e5e5e5; width:240px; height:28px;}



/* Checkbox styles */
label.checkbox {
  padding-left: 30px;
  position: relative;
  line-height:200%;
  font-family:'Noto Sans KR', 'NanumSquare', 'sans-serif'; font-size:17px; color:#000; font-weight:700;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
label.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}
label.checkbox input[type="checkbox"]:focus ~ span {
  border: 2px solid #aab0b9;
}
label.checkbox input[type="checkbox"]:focus:checked ~ span {
  border: 2px solid #ca2321;
}
label.checkbox input[type="checkbox"]:checked ~ span {
  background: #DD3C3A url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;
  border: 2px solid #ca2321;
}
label.checkbox span {
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: -2px;
  width: 17px;
  height: 17px;
  background-color: #d4d7dc;
  border: 2px solid #d4d7dc;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.button {
	border-radius: 4px;
	padding: 0px;
	text-align:center;
	font-size: 12px;
	text-decoration: none;
	/* color: #fff; */
	position: relative;
	display: inline-block;
	cursor:pointer
}
.button:active {transform: translate(0px, 3px); -webkit-transform: translate(0px, 3px); box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.15);; border-radius: 4px;}
.button:focus {transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.15);; border-radius: 4px;}
.large {width:100%; height:38px; line-height:36px; font-weight:bold; text-align:center;}
.button.Orange {background-color: #ea5404; box-shadow: 0px 3px 0px 0px #a63c03; color: #fff; font-family:'NanumSquare', 'Noto Sans KR', 'sans-serif'; font-size:17px;}
.button.Orange:hover {background-color: #FF983C; color:#fff;}
.button:active {position:relative; top:2px;}

/* IE 버젼별 CSS */
	/* IE9,10 */
@media screen and (min-width:0\0){
	/* Enter your style code */
}
	/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* Enter your style code */
}



/* 
	Mobile Style 
*/
@media all and (max-width:990px){
	.login_body {width:100%;}
	.content {overflow: hidden; position: absolute; top: 50%; left:0; margin-top: -200px; /* 높이의 절반을 음수 마진으로 */ margin-left:5%; width:90%; height:400px; z-index:10; background:#fff;}
	.content h1 {text-align:left; margin:50px 0 0 30px;}
	.content .login-cont-text {overflow: hidden; float: left; width:240px; margin:36px 0px 0 30px;}
	.content .login-cont-text .id-area {position:relative;}
	.content .login-cont-text .id-area .title {font-family:'Malgun Gothic'; font-size:13px; color:#000; font-weight:bold; }
	
	.login-input {border-bottom:2px solid #e5e5e5; width:240px; height:28px;}
		
}