@charset "utf-8";

@import url("reset.css");

/* login */
html, body {
	height:100%; font-family:'Malgun Gothic','맑은 고딕','Dotum','돋움',sans-serif; font-size:12px; line-height:1.5; font-weight:normal; color:#555;
}
body {
	overflow:auto;
}

input {
	font-family:inherit;
}
input, label, button, select {
	vertical-align:middle; outline:0;
}
input[type='button'], input[type='submit'], input[type='reset'], button {
	cursor:pointer;
}
input[readonly] {
	background-color:#f8f8f8;
}
input:not([type='button'])[disabled] {
	background-color:#eee;
}
input[type='button'][disabled], button[disabled] {
	opacity:0.5; pointer-events:none;
}
input::-ms-clear, input::-ms-reveal {
	display:none !important;
}
input[type="password"] {
	font-family:caption !important;
}
input[type="password"]::-webkit-input-placeholder {
	font-family:inherit !important;
}
input[type="password"]::-moz-placeholder {
	font-family:inherit !important;
}
input[type="password"]:-ms-input-placeholder {
	font-family:inherit !important;
}
::-webkit-input-placeholder {
	color:#777 !important;
}
:-ms-input-placeholder {
	color:#777 !important;
}
::placeholder {
	color:#777 !important;
}

#cu-wrap {
	position:relative; width:100%; min-width:1200px; height:100%;
}
#cu-content {
	position:absolute; display:flex; width:100%; height:100%; top:0; left:0; z-index:10;
}
#cu-content .cu-col {
	position:relative; flex:1; display:flex; align-items:center; 
}
#cu-content .cu-col.cu-left {
	flex:0 0 60%; justify-content:center;
}
.cu-left .cu-inner {
	position:relative; padding:0 20px;
}
.cu-left .cu-headline {
	text-align:center;
}
.cu-left .cu-headline h2 {
	font-size:62px; line-height:1.2; color:#fff; font-weight:bold; letter-spacing:-1px;
}
.cu-left .cu-headline h3 {
	font-size:40px; line-height:1.2; color:#fff; font-weight:bold; letter-spacing:-1px;
}
.cu-left .cu-headline h3 span {
	display:inline-block;	
}
.cu-left .cu-headline h4 {
	font-size:18px; line-height:1.4; color:#fff; font-weight:normal; letter-spacing:-1px; margin-top:15px;
}
.cu-left .cu-solution {
	display:flex; justify-content:center; margin-top:80px;
}
.cu-left .cu-solution .cu-item {
	position:relative; width:180px; height:180px; margin:0 10px; border:3px solid #ffb400; border-radius:50%; animation:anibc 4s ease infinite;
}
.cu-left .cu-solution .cu-item:nth-child(2) {
	animation-delay:0.5s;
}
.cu-left .cu-solution .cu-item:nth-child(3) {
	animation-delay:1s;
}
.cu-left .cu-solution .cu-item:nth-child(4) {
	animation-delay:1.5s;
}
@keyframes anibc {
	0% { border-color:#ffcc00; }
	33% { border-color:#0e90ff; }
	66% { border-color:#4ab900; }
	100% { border-color:#ffcc00; }
}
.cu-left .cu-solution .cu-item .cu-icon {
	width:80px; height:80px; margin:17px auto 5px auto;
}
.cu-left .cu-solution .cu-item.cu-gep .cu-icon {
	background:url("../css/images/login-icon-solution-gep.png") 50% 50% no-repeat;
}
.cu-left .cu-solution .cu-item.cu-trade .cu-icon {
	background:url("../css/images/login-icon-solution-trade.png") 50% 50% no-repeat;
}
.cu-left .cu-solution .cu-item.cu-drawback .cu-icon {
	background:url("../css/images/login-icon-solution-drawback.png") 50% 50% no-repeat;
}
.cu-left .cu-solution .cu-item.cu-viola .cu-icon {
	background:url("../css/images/login-icon-solution-viola.png") 50% 50% no-repeat;
}
.cu-left .cu-solution .cu-item .cu-context {
	position:relative; color:#fff; text-align:center;
}
.cu-left .cu-solution .cu-item .cu-context em {
	display:block; font-size:18px; line-height:1.2; font-weight:bold;
}

.cu-right {
	justify-content:flex-start;
}
.cu-right .cu-inner {
	position:relative; padding-right:20px;
}
.cu-right .cu-card {
	position:relative; width:450px; padding:40px 50px; border-radius:16px; background-color:#fff;
}
.cu-right .cu-logo {
	height:36px; margin-bottom:20px; background:url("../css/images/login-logo.png") 50% 50% no-repeat;
}
.cu-right .cu-form {
	position:relative; margin-bottom:15px;
}
.cu-right .cu-form .cu-row {
	position:relative; margin-bottom:5px;
}
.cu-right .cu-form .cu-form-input {
	display:inline-block; width:100%; height:40px; font-size:14px; color:#222; padding-left:40px; border:1px solid #ccc; border-radius:3px; transition:all 0.2s ease-in-out;
}
.cu-right .cu-form .cu-form-input:hover {
	border-color:#8d9398
}
.cu-right .cu-form .cu-form-input:focus {
	border-color:#278ee6;
}
.cu-right .cu-form .cu-input-id {
	position:relative;
}
.cu-right .cu-form .cu-input-id .cu-icon {
	position:absolute; width:40px; height:100%; background:url("../css/images/login-icon-input-id.png") 50% 50% no-repeat;
}
.cu-right .cu-form .cu-input-pw {
	position:relative;
}
.cu-right .cu-form .cu-input-pw .cu-icon {
	position:absolute; width:40px; height:100%; background:url("../css/images/login-icon-input-pw.png") 50% 50% no-repeat;
}
.cu-right .cu-form .cu-valid-message {
	display:none; font-size:11px; line-height:1.2; color:#db0c0c; letter-spacing:-1px; margin-top:5px;
}
.cu-right .cu-form .cu-valid-message.cu-state-invalid {
	display:block;
}
.cu-right .cu-form .cu-checkId {
	display: flex;
	width: 100%;
}
.cu-right .cu-form .cu-checkId .cu-custom-checkbox {
	/*display:inline-flex; position:relative; align-items:center;*/
	display:flex; width:100%; position:relative; align-items:center;
}
.cu-right .cu-form .cu-checkId .cu-custom-checkbox input {
	position:absolute; opacity:0;
}
.cu-right .cu-form .cu-checkId .cu-custom-checkbox .cu-checkmark {
	display:inline-block; position:relative; width:15px; height:15px; border:1px solid #aaa; border-radius:50%; margin-right:5px; background-color:#fff; transition:all 0.2s ease-in-out;
}
.cu-right .cu-form .cu-checkId .cu-custom-checkbox input:checked ~ .cu-checkmark::before {
	content:""; display:block; position:absolute; width:5px; height:8px; top:2px; left:4px; border-right:2px solid #555; border-bottom:2px solid #555; transform:rotate(45deg);
}
.cu-right .cu-form .cu-checkId .cu-custom-checkbox .cu-label {
	letter-spacing:-1px;
}
.cu-right .cu-form .cu-btn-login {
	display:inline-block; width:100%; height:50px; font-size:16px; line-height:1.2; color:#fff; font-weight:normal; border:none; border-radius:3px; background-color:#278ee6; transition:all 0.2s ease-in-out;
}
.cu-right .cu-form .cu-btn-login:hover {
	background-color:#0070cf;
}

.cu-right .cu-link {
	position:relative; display:flex; flex-wrap:wrap; margin:0 -5px;
}
.cu-right .cu-link .cu-item {
	position:relative; flex:0 0 50%; max-width:50%; padding:5px;
}
.cu-right .cu-link .cu-item a {
	display:block; padding:5px 0; border:1px solid #f09300; border-radius:4px; transition:all 0.2s ease-in-out;
}
.cu-right .cu-link .cu-item a:hover {
	border-color:#278ee6;
}
.cu-right .cu-link .cu-item .cu-icon {
	height:50px;
}
.cu-right .cu-link .cu-ucssystem .cu-icon {
	background:url("../css/images/login-icon-link-ucssystem.png") 50% 50% no-repeat;
}
.cu-right .cu-link .cu-ktnet .cu-icon {
	background:url("../css/images/login-icon-link-ktnet.png") 50% 50% no-repeat;
}
.cu-right .cu-link .cu-remote .cu-icon {
	background:url("../css/images/login-icon-link-remote.png") 50% 50% no-repeat;
}
.cu-right .cu-link .cu-manual .cu-icon {
	background:url("../css/images/login-icon-link-manual.png") 50% 50% no-repeat;
}
.cu-right .cu-link .cu-item .cu-context {
	font-size:12px; line-height:1.2; color:#555; text-align:center; padding-bottom:7px;
}

.cu-right .cu-footer {
	font-size:12px; line-height:1.3; color:#555; text-align:center; margin-top:15px;
}

#cu-bg {
	position:fixed; width:100%; min-width:1200px; height:100%; background:url("../css/images/login_visual.jpg") 50% 50% no-repeat; background-size:cover; z-index:1;
}
#cu-bg::before {
	content:""; position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.3);
}


.cu-right .cu-pwChange {
	position:relative;
}
.cu-right .cu-pwChange .cu-row {
	position:relative; margin-bottom:5px;
}
.cu-right .cu-pwChange .cu-contxt {
	position:relative; font-size:13px; line-height:1.5; color:#333; padding:20px 0;
}
.cu-right .cu-pwChange .cu-row-inline {
	position:relative; display:flex; align-items:center; min-height:20px;
}
.cu-right .cu-pwChange .cu-row-inline label {
	flex:0 0 120px; max-width:120px; font-size:12px; line-height:1.2; color:#555;
}
.cu-right .cu-pwChange .cu-row-inline span {
	flex:1;
}
.cu-right .cu-pwChange .cu-form-input {
	display:inline-block; width:100%; height:30px; font-size:14px; color:#222; padding-left:5px; border:1px solid #ccc; border-radius:3px; transition:all 0.2s ease-in-out;
}
.cu-right .cu-pwChange .cu-form-input:hover {
	border-color:#8d9398
}
.cu-right .cu-pwChange .cu-form-input:focus {
	border-color:#278ee6;
}
.cu-right .cu-pwChange .cu-valid-message {
	display:none; font-size:11px; line-height:1.2; color:#db0c0c; letter-spacing:-1px; margin-top:5px;
}
.cu-right .cu-pwChange .cu-valid-message.cu-state-invalid {
	display:block;
}
.cu-right .cu-pwChange .cu-infotxt {
	position:relative; margin:20px 0 30px 0;
}
.cu-right .cu-pwChange .cu-infotxt span{
	display:inline-block;
}
.cu-right .cu-pwChange .cu-infotxt span:not(:first-child) {
	padding-left:15px;
}
.cu-right .cu-pwChange .cu-btn-save {
	display:inline-block; width:100%; height:42px; font-size:14px; line-height:1.2; color:#fff; font-weight:normal; border:none; border-radius:3px; background-color:#278ee6; transition:all 0.2s ease-in-out;
}
.cu-right .cu-pwChange .cu-btn-save:hover {
	background-color:#0070cf;
}