@charset "utf-8";
html,
body {height:100%}
html{font-size:62.5%}
body{font-size:14px; font-size:1.4rem; color:#0c193c; overflow-x:hidden}
body{ position:relative; font-family: "Malgun Gothic", "arial", san-serif; background:#dadfe5 url(../img/login/bg.png) 50.8% 55.5% no-repeat}
/* body{ position:relative; font-family: "Malgun Gothic", "arial", san-serif; background:#dadfe5 url(../images/bg.png) 50.8% 55.5% no-repeat} */

/* layout */
.wrap{width:100%; height:100%; position:relative}
.container{width:700px; height:410px; background:#fff url(../images/bg_top.png) center top no-repeat; background-size:100%; position:absolute; top:50%; left:50%; margin-top:-205px;margin-left:-350px}
.header h1{margin-top:20px; text-align:center}
.login{position:relative; padding:30px 45px; box-sizing:border-box}
.login:after{display:block;visibility:hidden;clear:both;height:0;content:''}
.descript{padding:20px 30px; background:#ededed; font-size:12px; line-height:150%}
.footer{text-align:center; background:#4c5865; color:#fff; height:32px; line-height:32px; font-size:12px}

/* style */
fieldset{border:0;width:50%;padding-right:7%; float:left; border-right:1px solid #d6d9dc; box-sizing:border-box}
fieldset:last-child{border-right:0; padding-left:7%; padding-right:0}
fieldset:after{display:block;visibility:hidden;clear:both;height:0;content:''}
legend{font-weight:700; text-indent:0; font-size:16px; margin-top:15px; margin-bottom:10px}
/*
legend:before{width:12px; height:12px; display:block; background:#5185eb; content:''; border-radius:12px; position:absolute}
*/
fieldset .block{}

.textbox {position: relative; width: 100%; display:inline-block; border:0px solid #a2afca; background:#fff; margin-right:1px; margin-bottom:5px; box-sizing:border-box}
.textbox:nth-child(2n){margin-right:0}
.textbox label {
  position: absolute;
  top: 1px;  /* input 요소의 border-top 설정값 만큼 */
  left: 1px;  /* input 요소의 border-left 설정값 만큼 */
  padding: 0.8em;  /* input 요소의 padding 값 만큼 */
  color: #2646a0;
  cursor: text;
}
.textbox input[type=text],.textbox input[type=password]{border:1px solid #d6d9dc; width:100%;padding:0.8em; box-sizing:border-box;}
.textbox input[type=text]:focus,.textbox input[type=password]:focus{outline:none; border:1px solid #5185eb}
::-webkit-input-placeholder{color:red;}
textarea:-moz-placeholder, input:-moz-placeholder{color:red;}

.buttonbox{text-align:center}
button img{margin-right:5px}
button.btn_login{text-align:center;background:#1c49c2;color:#fff; padding:1em; width:49%; margin-bottom:5px; height:52px}
button.btn_login:hover{background:#123eb4}
button.btn_cert_login{text-align:center;background:#e32479;color:#fff; padding:1.5em 1em; width:100%; margin-bottom:5px}
button.btn_cert_login:hover{background:#d81b6f}
button.btn_cert_regist{text-align:center;background:#e32479;color:#fff; padding:1.5em 1em; width:100%}
button.btn_cert_regist:hover{background:#d81b6f}

.info{font-size:0.9em; color:#d81b6f}
.descript .link{text-align:center}
.descript .link a{text-decoration:underline; color:#123eb4}

/* 전자출결 */
.e-attendance{width:600px; height:410px; background:#fff url(../images/bg_top.png) center top no-repeat; background-size:100%; position:absolute; top:50%; left:50%; margin-top:-205px;margin-left:-300px}
.e-attendance .system_title{margin-left:5px}
.e-attendance .login{padding:30px 100px}
.e-attendance fieldset{padding-right:0; width:100%}
.e-attendance fieldset:last-child{padding-left:0}

/* 비밀번호 변경 */
body.change_passowrd{background:none; background-image:none}
.change_passowrd .container{width:800px; height:auto; margin-top:-300px; margin-left:-400px; border:1px solid #dadfe5; border-top:0}
.change_passowrd .container h2{margin:3% 0; font-size:25px; font-weight:bold; color:#e32479}
.change_passowrd fieldset{padding-right:0; width:100%}
.change_passowrd fieldset:last-child{padding-left:0}
.change_passowrd legend{display:none}
.change_passowrd .descript{font-size:14px}
.change_passowrd dl{position:relative; margin:3% 0}
.change_passowrd dt{display:inline-block; width:20%; box-sizing:border-box; padding:2% 0 2% 1%}
.change_passowrd dd{display:inline-block; width:79%; box-sizing:border-box}

/* resolution*/
/*
@media only screen and (min-device-width:830px){
	body{min-width:800px; overflow-x:auto}
}
*/
/* and (min-device-pixel-ratio : 1.5)	*/
@media only screen and (max-width: 800px){
	.change_passowrd .container{width:100%; height:auto; background-size:contain; top:inherit; left:inherit; margin-top:inherit; margin-left:inherit}
	.change_passowrd .login{padding:3%}
	.change_passowrd .descript{font-size:1.2em; line-height:150%}
}
@media only screen and (max-width: 640px){
	body{background-image:none}
	.container{width:100%; height:auto; background-size:contain; top:inherit; left:inherit; margin-top:inherit; margin-left:inherit}
	.login,.e-attendance .login{padding:30px 45px 0}
	fieldset{width:100%; float:none; padding-right:0; padding-bottom:10%; margin-bottom:5%; border-right:0; border-bottom:1px solid #d6d9dc}
	fieldset:last-child{padding-left:0; padding-top:5%; border-bottom:0; margin-bottom:0}
	.textbox{width:100%}
	.textbox label{padding:1em}
	.textbox label,.textbox input[type=text], .textbox input[type=password]{font-size:1.4em}
	button.btn_login, button.btn_cert_login, button.btn_cert_regist{width:100%; font-size:1.4em}
	button.btn_login{height:auto}
	
	.change_passowrd fieldset:last-child{padding-left:0; padding-top:0;}
	.change_passowrd dt{padding:3% 0 3% 1%}
}
@media only screen and (max-width: 480px){
	.info{font-size:0.8em}
}
@media only screen and (max-width: 400px){
	.info{font-size:0.7em}
}
@media only screen and (max-width: 320px){
}

/* and (min-device-pixel-ratio : 1.5)	*/
@media only screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 1.5),
@media only screen and (max-device-width: 640px) and (min-device-pixel-ratio: 1.5){
	
}
@media only screen and (max-device-widthwidth: 480px) and (-webkit-min-device-pixel-ratio: 1.5),
@media only screen and (max-device-widthwidth: 480px) and (min-device-pixel-ratio: 1.5),{
	
}
@media only screen and (max-device-widthwidth: 400px) and (-webkit-min-device-pixel-ratio: 1.5),
@media only screen and (max-device-widthwidth: 400px) and (min-device-pixel-ratio: 1.5){
}
@media only screen and (max-device-widthwidth: 320px) and (-webkit-min-device-pixel-ratio: 1.5),
@media only screen and (max-device-widthwidth: 320px) and (min-device-pixel-ratio: 1.5){
}