@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

/**
* =================================================================================
* INFORMATION
* ---------------------------------------------------------------------------------
* @Author : Shin Yong Ji
* @File Name : dw.login.css
* @Description : login page style 만 구현한다.
* @Version : 1.0
* @Create Date : 2016.09.06
* @Update Date : N/A
* @History : N/A
===================================================================================
*/

/* // Set background image (pattern) */
*{
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: 'Noto Sans KR', sans-serif, 'Apple SD Gothic Neo', 'NanumGothic', sans-serif;
}

body {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* // Start styles in form */
/* -webkit-filter: grayscale(100%); Chrome, Safari, Opera */
/* body.relogin { background-image: url(images/relogin_bg.png); } */
/* body.bg5:after { background-image: url(images/login_bg_05.png); top: 0; content : ""; display: block; position: absolute; width: 100%; height: 100%; opacity : 0.9; z-index: -1; } */
body::after { content: ""; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-size:  100% 100%; }
body.bg1::after { background-image: url(images/login_bg_01.png); }
body.bg2::after { background-image: url(images/login_bg_02.png); }
body.bg3::after { background-image: url(images/login_bg_03.png); }
body.bg4::after { background-image: url(images/login_bg_04.png); }
body.bg5::after { background-image: url(images/login_bg_05.png); }
body.bg6::after { background-image: url(images/login_bg_06.png); }
body.bg7::after { background-image: url(images/login_bg_07.png); }
body.bg8::after { background-image: url(images/login_bg_08.png); }
body.opacity::after { opacity: .5; }

.vision { padding: 80px 10%; position: absolute; width: 100%; height: 100%; }
.vision > div { height: 400px; display: inline-block; }
.visionLeft { background: url('https://webservice.daewooenc.com:7444/etls/contents/common/styles/images/vision_left.png') no-repeat; width: 317px; }
.visionRight { background: url('images/logo_black.png') no-repeat; float: right; background-position: top right; width: 149px; }
.copyright { line-height: 20px; position: absolute; bottom: 60px; width: 100%; text-align: center; color: #204A66; font-size: 14px; opacity: .6; }
body.opacity .vision { opacity: .5; }
body.opacity .vision2025 { opacity: .5; }

.login {
	width: 400px;
	margin: 0 0 120px;
	background: rgba(255, 255, 255, 0.8);
/* 	border-radius: 10px; */
	border: 10px solid rgba(255, 255, 255, 0.8);
	-webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
/* 	display: table; */
	display: none;
}

@media (max-width: 400px) {
	.login { width: 100%; margin-top: -200px; }
	.vision { display: none; }
}

.legend {
	position: relative;
	width: 100%;
	display: block;
/* 	background: #22588D; */
	padding: 35px 25px 15px;
	color: #204a66;
	font-size: 20px;
/* 	border-top-left-radius: 10px; */
/*     border-top-right-radius: 10px; */
    text-align: center;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.3;
}

.input {
  position: relative;
  width: 90%;
  margin: 10px auto;
}

.etc-wrapper {
	text-align: center;
	font-size: .85em;
	margin: 5px auto 20px;
}

.etc-wrapper .etc-input {
	 text-decoration: none;
	 color: #666;
	 padding-left: 1em;
}

.etc-wrapper .etc-input:hover {
	text-decoration: underline;
}

.etc-wrapper .etc-input:first-child {
	padding-left: .5em;
}

.input span {
    position: absolute;
    display: block;
    color: #d4d4d4;
    left: 10px;
    top: 8px;
    font-size: 20px;
}

.input input {
    width: 100%;
    padding: 15px 5px 15px 40px;
    display: block;
    border: 1px solid #EDEDED;
/*     border-radius: 4px; */
    transition: 0.2s ease-out;
/*     color: rgba(0, 0, 0, 0.7); */
    font-size: 14px;
    outline: none;
}

.input.disabled {
	opacity: .6;
/* 	color: #d4d4d4; */
}

.input input#username {
	text-transform: uppercase;
}

.input input:not([readonly]):focus {
    padding: 15px 5px 15px 10px;
    outline: 0;
	border-color: #FF7052;
}

/* only css for ie11 */
html[data-useragent*='Trident/6.0'] .input input:focus,
html[data-useragent*='Trident/5.0'] .input input:focus {
    padding: 10px 5px 10px 40px;
}

.submit {
	width: 100%;
	height: 45px;
	display: block;
	padding: 10px;
/*  	background: #FF7052; */
/* 	border-radius: 100%; */
	border: 2px solid #FF7052;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
/* 	box-shadow: 0px 0px 0px 7px #fff; */
	transition: 0.2s ease-out;
	line-height: 0;
    outline: 0;
}

body.bg1 .submit, body.bg2 .submit { background-color: #f47584; border-color: #f47584; }
body.bg1 .submit:hover, body.bg1 .submit:focus, body.bg2 .submit:hover, body.bg2 .submit:focus { color: #f47584; background: transparent; }
body.bg1 .login.message input, body.bg2 .login.message input { border-color: #f47584; }
body.bg1 .feedback, body.bg2 .feedback { background-color: #f47584; }
body.bg3 .submit, body.bg4 .submit { background-color: #d977ab; border-color: #d977ab; }
body.bg3 .submit:hover, body.bg3 .submit:focus, body.bg4 .submit:hover, body.bg4 .submit:focus { color: #d977ab; background: transparent; }
body.bg3 .login.message input, body.bg4 .login.message input { border-color: #d977ab; }
body.bg3 .feedback, body.bg4 .feedback { background-color: #d977ab; }
body.bg5 .submit, body.bg6 .submit { background-color: #4f6ebf; border-color: #4f6ebf; }
body.bg5 .submit:hover, body.bg5 .submit:focus, body.bg6 .submit:hover, body.bg6 .submit:focus { color: #4f6ebf; background: transparent; }
body.bg5 .login.message input, body.bg6 .login.message input { border-color: #4f6ebf; }
body.bg5 .feedback, body.bg6 .feedback { background-color: #4f6ebf; }
body.bg7 .submit, body.bg8 .submit { background-color: #676EC6; border-color: #646AC2; }
body.bg7 .submit:hover, body.bg7 .submit:focus, body.bg8 .submit:hover, body.bg8 .submit:focus { color: #676EC6; background: transparent; }
body.bg7 .login.message input, body.bg8 .login.message input { border-color: #676EC6; }
body.bg7 .feedback, body.bg8 .feedback { background-color: #676EC6; }

.feedback {
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	background: #2ecc71;
	padding: 20px 15px;
	font-size: 20px;
	display: none;
	opacity: 0;
	word-wrap: break-word;
    white-space: pre-wrap;
}

.loading {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(images/icon/loading-hourglass.gif);
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(255,255,255,0.8);
	z-index: 100;
	top: 0;
	left: 0;
}

.no-selectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* error */
.errorbox {display: block;height: 100%;width: 100%;position: relative;}
.errorbox.errorimg01 {background: url(../../../ui/ws5ext/images/errorimg01.png) no-repeat top right;}
.errorbox.errorimg02 {background: url(../../../ui/ws5ext/images/errorimg02.png) no-repeat top right;}
.errorbox.errorimg03 {background: url(../../../ui/ws5ext/images/errorimg03.png) no-repeat top right;}

.error_textbox {position: absolute;left: 210px;top: 50%;transform: translateY(-50%); padding: 2rem; border-radius: 15px; background: rgba(255,255,255,.7); margin: 0 .5rem;}
.error_textbox .error_title {font-size: 44px;color: #ff7800;font-weight: bold;}
.error_textbox .error_text {color: #333;font-size: 20px;margin-top: 40px;line-height: 1.6;}
.error_textbox .error_btnbox{margin-top: 60px;}
.error_textbox .error_btnbox .btn{display: inline-block;width: 180px;line-height: 50px; border: none; color: #fff; font-size: 16px;}
.error_textbox .error_btnbox .btn.btn_dlwjs{background: #bbb;}
.error_textbox .error_btnbox .btn.btn_apdls{background: #ff7800;}
.error_btnbox .err_link_box a { width: 64px; height: 64px; background-size: cover; display: block; margin-bottom: 5px;}
.error_btnbox .err_link_box li {margin: 0 16px 10px 0;text-align: center;}

.error_logo .error_logo {}
.error_text2 {font-size:16px; color:#999;margin-top:20px;}
.error_textbox .blue_title {color:#005bb0;}
.error_textbox .blue_title2 {color:#60a5ff;}

.err_link_box {}
.err_link_box:after {content:''; display:table;clear:both;}
.err_link_box li {float:left;}