@charset "utf-8";

@import url("cu_font.css");

/* login */
body {
	font-family:'Nanum Gothic','Malgun Gothic',sans-serif; font-size:12px; line-height:1.5; color:#505050; font-weight:400; padding:0; margin:0; background-color:#fff;
}

input::-ms-clear, input::-ms-reveal {
	display:none !important;
}
::-webkit-input-placeholder {
	color:#999 !important;
}
:-ms-input-placeholder {
	color:#999 !important;
}
::placeholder {
	color:#999 !important;
}

#cu-wrapper {
	position:relative; width:100vw; height:100vh; padding:0; margin:0; overflow:hidden;
}
* {
	padding:0px; margin:0px; box-sizing:border-box;
}

#cu-wrapper > .cu-bg {
	position:relative; width:100%; min-width:1000px; height:100%; background:url("../images/contents/cu-bgimg-01.png") 50% 50% no-repeat; opacity:0.7;
}
#cu-wrapper > .cu-bg.cu-bg-02 {
	background:url("../images/contents/cu-bgimg-02.png") calc(50% + 40px) 50% no-repeat; opacity:0.4;
}

#cu-content {
	position:absolute; width:100%; min-width:1000px; height:420px; top:50%; left:0; margin-top:-210px;
}
#cu-content.cu-visual-02 {
	background-image:url("../images/contents/cu-visual-02.png");
}

.cu-visual-wrapper {
	position:relative; width:100%; height:100%; overflow:hidden;
}
.cu-visual-wrapper::after {
	content:""; display:block; clear:both;
}
.cu-visual-wrapper .cu-left {
	float:left; position:relative; width:calc(50% + 84px); height:100%; transform:skewX(-15deg); margin-left:-60px; overflow:hidden;
}
.cu-visual-wrapper .cu-right {
	float:right; position:relative; width:calc(50% - 384px); height:100%; transform:skewX(-15deg); margin-right:-60px; overflow:hidden;
}
.cu-visual-wrapper .cu-visual {
	width:100vw; height:100%; background-image:url("../images/contents/cu-visual-01.png"); background-position:0% 50%; background-repeat:no-repeat; background-size:cover; transform:skewX(15deg);
}
.cu-visual-wrapper .cu-left .cu-visual {
	background-position:50% 50%;
}
.cu-visual-wrapper .cu-right .cu-visual {
	float:right; margin-right:60px; background-position:50% 50%;
}

#cu-inner {
	display:flex;  position:absolute; width:1000px; height:100%; top:0; left:50%; margin-left:-500px;
}
#cu-inner > .cu-col {
	position:relative; flex:auto; height:100%;
}
#cu-inner > .cu-col:first-child {
	flex:auto;
}
#cu-inner > .cu-col:last-child {
	flex:none;
}

.cu-headline-wrapper {
	position:absolute; top:110px; left:50px;
}
.cu-headline-wrapper .cu-headline {
	font-size:40px; line-height:1.3; color:#fff8bb; font-weight:400;
}
.cu-headline-wrapper .cu-subheadline {
	font-size:16px; line-height:1.3; color:#fff8bb; font-weight:400; margin-top:5px;
}

.cu-content-wrapper {
	display:flex; height:100%; padding:0 140px;
}
.cu-content {
	position:relative; width:250px;
}
.cu-content .cu-row-logo {
	position:relative; height:50px; background:url("../images/contents/cu-logo.png") 50% 100% no-repeat;
}
.cu-content .cu-row-form {
	display:flex; align-items:center; height:calc(100% - 100px);
}
.cu-content .cu-row-form .cu-inner-login {
	position:relative;
}
.cu-content .cu-row-form .cu-inner-logout {
	position:relative; display:none; width:100%;
}
.cu-content .cu-row-form.cu-logout .cu-inner-login {
	display:none;
}
.cu-content .cu-row-form.cu-logout .cu-inner-logout {
	display:block;
}
.cu-content .cu-row-form .cu-fieldset {
	position:relative;
}
.cu-content .cu-row-form .cu-fieldset .cu-form-input {
	width:100%; height:50px; font-size:15px; color:#222; font-weight:400; padding:0 20px; border:1px solid #ccc; border-radius:5px; transition:all 0.25s ease-in-out;
}
.cu-content .cu-row-form .cu-fieldset .cu-form-input:focus {
	border:1px solid #4285f4; outline:none;
}
.cu-content .cu-row-form .cu-fieldset .cu-form-input:not(:first-child) {
	margin-top:5px;
}
.cu-content .cu-row-form .cu-saveid {
	position:relative; margin:12px 0 18px 0;
}
.cu-content .cu-row-form .cu-saveid .cu-form-checkbox {
	display:inline-flex; align-items:center; position:relative; cursor:pointer;
}
.cu-content .cu-row-form .cu-saveid .cu-form-checkbox input[type="checkbox"] {
	position:absolute; opacity:0;
}
.cu-content .cu-row-form .cu-saveid .cu-form-checkbox .cu-checkmark {
	display:inline-flex; align-items:center; justify-content:center; position:relative; width:16px; height:16px; border-radius:50%; background-color:#c0bbb6; transition:all 0.25s ease-in-out;
}
.cu-content .cu-row-form .cu-saveid .cu-form-checkbox .cu-checkmark::after {
	content:""; display:block; width:3px; height:7px; margin-top:-2px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); opacity:0; transition:all 0.2s ease-in-out;
}
.cu-content .cu-row-form .cu-saveid .cu-form-checkbox input[type="checkbox"]:checked+.cu-checkmark {
	background-color:#f37e00;
}
.cu-content .cu-row-form .cu-saveid .cu-form-checkbox input[type="checkbox"]:checked+.cu-checkmark::after {
	opacity:1;
}
.cu-content .cu-row-form .cu-saveid .cu-form-checkbox .cu-label {
	font-size:12px; line-height:1.5; color:#555; font-weight:400; margin-left:5px;
}
.cu-content .cu-row-form .cu-btns {
	position:relative;
}
.cu-content .cu-row-form .cu-btns .cu-btn-login {
	width:100%; height:50px; font-size:16px; line-height:1; color:#fff; font-weight:400; border:none; border-radius:5px; background-color:#4285f4; transition:all 0.25s ease-in-out; cursor:pointer;
}
.cu-content .cu-row-form .cu-btns .cu-btn-login:hover {
	background-color:#2f73e3;
}
.cu-content .cu-row-form .cu-inner-logout .cu-infotxt {
	display:flex; align-items:center; align-content:center; flex-wrap:wrap; height:120px; padding:15px; margin-bottom:10px; border:1px solid #ccc; border-radius:5px; background-color:#fff;
}
.cu-content .cu-row-form .cu-inner-logout .cu-infotxt .cu-txt {
	width:100%; font-size:14px; line-height:1.5; color:#333; font-weight:400; padding:3px 0;
}
.cu-content .cu-row-form .cu-inner-logout .cu-infotxt .cu-txt span {
	padding-right:5px;
}
.cu-content .cu-row-contxt {
	position:relative; height:50px; font-size:12px; line-height:1.2; font-weight:400; text-align:center;
}
.cu-content .cu-row-contxt .cu-tit {
	color:#555;
}
.cu-content .cu-row-contxt .cu-infotxt {
	color:#f78000; padding-top:5px;
}

.cu-footer {
	position:relative; width:1000px; font-size:12px; line-height:1.5; color:#777; font-weight:400; text-align:right; padding:20px 120px 0 0; margin:auto;
}