@charset "utf-8";

/* ******************** custom style (2021.05) ******************** */

@import url("font.css");

/* login */
* {
	padding:0; margin:0; box-sizing:border-box;
}
::-webkit-input-placeholder {
	color:rgba(255,255,255,1); font-weight:300;
}
:-ms-input-placeholder {
	color:rgba(255,255,255,1); font-weight:300;
}
::placeholder {
	color:rgba(255,255,255,1); font-weight:300;
}
html, body {
	height:100%; font-family:'Open Sans','Nanum Gothic','Malgun Gothic',sans-serif; font-size:12px; line-height:1.5em; font-weight:400; color:#555; padding:0; margin:0;
}

#cu-wrap {
	position:relative; width:100%; min-height:100%;
}

#cu-visual {
	position:relative; width:100%; height:400px; background:url("../images/login_visual.png") 50% 50% no-repeat; background-size:cover;
}
#cu-visual::after {
	content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.25);
}
#cu-visual .cu-headline {
	position:relative; text-align:center; top:120px; z-index:10;
}
#cu-visual .cu-headline h2 {
	font-size:36px; line-height:1.2em; color:#fff; font-weight:300;
}
#cu-visual .cu-headline h3 {
	font-size:20px; line-height:1.2em; color:#fff; font-weight:400; margin-top:12px;
}

#cu-content {
	position:relative; padding-bottom:50px;
}
#cu-content .cu-header {
	display:flex; position:relative; height:120px;
}
#cu-content .cu-header .cu-left {
	flex:1; display:flex; justify-content:flex-end; position:relative;
}
#cu-content .cu-header .cu-left .cu-inner {
	display:flex; position:relative; width:640px; padding-left:20px;
}
#cu-content .cu-header .cu-left .cu-col {
	display:flex; align-items:center;
}
#cu-content .cu-header .cu-left .cu-col:first-child {
	margin-right:auto;
}
#cu-content .cu-header .cu-left .cu-logo {
	width:178px; height:36px; background:url("../images/login_logo_srm.png") 50% 50% no-repeat;
}
#cu-content .cu-header .cu-left .cu-remote {
	display:flex; align-items:center; justify-content:center; width:120px; height:100%; text-decoration:none; background-color:#e8f0fe; transition:all 0.25s ease-in-out;
}
#cu-content .cu-header .cu-left .cu-remote:hover {
	background-color:#d0e0fc;
}
#cu-content .cu-header .cu-left .cu-remote i {
	display:block; width:60px; height:40px; background:url("../images/login_icon_remote.png") 50% 50% no-repeat;
}
#cu-content .cu-header .cu-left .cu-remote span {
	display:block; font-size:12px; line-height:1.2em; color:#555; font-weight:400; text-align:center; margin-top:10px;
}

#cu-content .cu-header .cu-right {
	flex:1; display:flex; justify-content:flex-start; position:relative; background-color:#4285f4;
}
#cu-content .cu-header .cu-right .cu-inner {
	display:flex; justify-content:flex-end; position:relative; width:640px; padding-right:20px;
}
#cu-content .cu-header .cu-right .cu-form {
	display:flex; align-items:center;
}
#cu-content .cu-header .cu-right .cu-form .cu-col:not(:first-child) {
	margin-left:20px;
}
#cu-content .cu-header .cu-right .cu-form .cu-row:not(:first-child) {
	margin-top:10px;
}
#cu-content .cu-header .cu-right .cu-form .cu-form-input {
	width:210px; height:32px; font-family:inherit; font-size:14px; line-height:1.2em; color:#fff; font-weight:400; border:0; border-bottom:1px solid rgba(255,255,255,0.25); background-color:transparent;
}
#cu-content .cu-header .cu-right .cu-form .cu-form-input:focus {
	outline:none; border-color:rgba(255,255,255,0.5);
}
#cu-content .cu-header .cu-right .cu-form .cu-checkId {
	display:flex; align-items:center; position:relative; line-height:1em; color:rgba(255,255,255,0.7); cursor:pointer;
}
#cu-content .cu-header .cu-right .cu-form .cu-checkId:hover {
	color:rgba(255,255,255,0.9);
}
#cu-content .cu-header .cu-right .cu-form .cu-checkId input[type='checkbox'] {
	position:absolute; opacity:0;
}
#cu-content .cu-header .cu-right .cu-form .cu-checkId .cu-checkmark {
	display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; background-color:rgba(255,255,255,0.4);
}
#cu-content .cu-header .cu-right .cu-form .cu-checkId input:checked + .cu-checkmark {
	background-color:#ff9f00;
}
#cu-content .cu-header .cu-right .cu-form .cu-findpw {
	color:rgba(255,255,255,0.7); text-decoration:none;
}
#cu-content .cu-header .cu-right .cu-form .cu-findpw:hover {
	color:rgba(255,255,255,0.9);
}
#cu-content .cu-header .cu-right .cu-form .cu-btn-login {
	width:100px; height:100%; font-family:inherit; font-size:22px; line-height:1.2em; color:rgba(255,255,255,1); font-weight:300; border:0; outline:none; background-color:transparent; cursor:pointer;
}
#cu-content .cu-header .cu-right .cu-form .cu-btn-login:hover {
	color:rgba(255,255,255,1);
}

#cu-content .cu-body {
	position:relative; width:1280px; padding:0 20px; margin:0 auto; margin-top:30px;
}
#cu-content .cu-body .cu-inner {
	display:flex; position:relative; margin:0 -15px;
}
#cu-content .cu-body .cu-inner >  .cu-col {
	flex:1; position:relative; padding:0 20px;
}
#cu-content .cu-body .cu-title {
	display:flex; align-items:center; font-size:12px; line-height:1.2em; color:#555; font-weight:400; padding-bottom:5px; margin:0 -5px;
}
#cu-content .cu-body .cu-title::before {
	content:""; display:inline-block; width:18px; height:15px; margin-right:3px; background:url("../images/login_icon_tit_bullet.png") 50% 50% no-repeat;
}
#cu-content .cu-body .cu-notice .cu-list {
	display:flex; flex-wrap:wrap; position:relative; margin:0 -10px;
}
#cu-content .cu-body .cu-notice .cu-list .cu-col {
	flex:0 0 50%; max-width:50%; display:flex; position:relative; padding:5px;
}
#cu-content .cu-body .cu-notice .cu-card {
	display:flex; flex-direction:column;  position:relative; width:100%; height:110px; text-decoration:none; padding:17px 20px; border:1px solid #d9dde4; border-radius:5px; background-color:#fff; transition:all 0.25s ease-in-out;
}
#cu-content .cu-body .cu-notice .cu-card:hover {
	border-color:#babec4;
}
#cu-content .cu-body .cu-notice .cu-context {
	height:2.8em; font-size:16px; line-height:1.4; color:#555; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:all 0.25s ease-in-out;
}
#cu-content .cu-body .cu-notice .cu-card:hover .cu-context {
	color:#333;
}
#cu-content .cu-body .cu-notice .cu-con {
	display:flex; justify-content:space-between; margin-top:auto;
}
#cu-content .cu-body .cu-notice .cu-date {
	font-size:12px; line-height:1.2; color:#777;
}
#cu-content .cu-body .cu-notice .cu-arrow::before {
	content:"〉"; font-size:14px; line-height:1.4; color:#999; font-style:normal;
}
#cu-content .cu-body .cu-solution .cu-list {
	display:flex; flex-wrap:wrap; position:relative; margin:0 -10px;
}
#cu-content .cu-body .cu-solution .cu-list .cu-col {
	flex:0 0 50%; max-width:50%; display:flex; position:relative; padding:5px;
}
#cu-content .cu-body .cu-solution .cu-card {
	display:flex; align-items:center; position:relative; width:100%; height:110px; text-decoration:none; border:1px solid #e2d9cb; border-radius:5px; background-color:#fcfbf9; transition:all 0.25s ease-in-out;
}
#cu-content .cu-body .cu-solution .cu-card:hover {
	border-color:#f7c06a;
}
#cu-content .cu-body .cu-solution .cu-icon {
	width:72px; height:72px; margin-left:20px; border-radius:50%;
}
#cu-content .cu-body .cu-solution .cu-icon.cu-xiigep {
	background:#f8f2e6 url("../images/login_icon_solution_xiigep.png") 50% 50% no-repeat;
}
#cu-content .cu-body .cu-solution .cu-icon.cu-xiitrade {
	background:#f8f2e6 url("../images/login_icon_solution_xiitrade.png") 50% 50% no-repeat;
}
#cu-content .cu-body .cu-solution .cu-icon.cu-xiidrawback {
	background:#f8f2e6 url("../images/login_icon_solution_xiidrawback.png") 50% 50% no-repeat;
}
#cu-content .cu-body .cu-solution .cu-icon.cu-xiiviola {
	background:#f8f2e6 url("../images/login_icon_solution_xiiviola.png") 50% 50% no-repeat;
}
#cu-content .cu-body .cu-solution .cu-context {
	margin-left:15px;
}
#cu-content .cu-body .cu-solution .cu-context h5 {
	font-size:13px; line-height:1.2em; color:#333; font-weight:400;
}
#cu-content .cu-body .cu-solution .cu-context h6 {
	font-size:24px; line-height:1.2em; color:#333; font-weight:600; letter-spacing:-1px; margin-top:3px;
}
#cu-content .cu-body .cu-solution .cu-card .cu-arrow {
	position:absolute; top:10px; right:10px; width:10px; height:10px; border-top:1px solid #ddcdb2; border-right:1px solid #ddcdb2; transition:all 0.25s ease-in-out;
}
#cu-content .cu-body .cu-solution .cu-card .cu-arrow::before {
	content:""; display:block; position:absolute; top:-1px; right:0; width:170%; height:1px; background-color:#ddcdb2; transform:rotate(-45deg); transform-origin:100% 0%; transition:all 0.25s ease-in-out;
}
#cu-content .cu-body .cu-solution .cu-card:hover .cu-arrow {
	border-color:#f7c06a;
}
#cu-content .cu-body .cu-solution .cu-card:hover .cu-arrow::before {
	background-color:#f7c06a;
}

.cu-footer {
	position:absolute; bottom:0; left:0; width:100%; padding:10px 0 15px 0; margin-top:auto; background-color:#fff;
}
.cu-footer p  {
	font-size:12px; line-height:1.5em; color:#777; font-weight:400; text-align:center;
}

.cu-modal-open {
	overflow:hidden;
}
.cu-modal {
	position:fixed; display:none; width:100%; height:100%; top:0; left:0; z-index:999; overflow:hidden;
}
.cu-modal::after {
	content:""; position:fixed; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.7); z-index:-1;
}
.cu-modal-open .cu-modal {
	overflow-x:hidden; overflow-y:auto;
}
.cu-modal-dialog {
	position:relative; display:flex; width:auto; max-width:500px; min-height:calc(100% - 60px); align-items:center; margin:30px auto; transition:all 0.25s ease-in-out 0.08s; transform:scale(0.7); opacity:0;
}
.cu-show .cu-modal-dialog {
	transform:none; opacity:1;
}
.cu-modal-dialog::before {
	content:""; display:block; height:calc(100vh - 60px); width:5px;
}
.cu-modal-content {
	position:relative; display:flex; flex-direction:column; width:100%; border-radius:10px; background-color:#fff; box-shadow:0 2px 6px 0 rgba(0,0,0,0.2); overflow:hidden;
}
.cu-modal-header {
	display:flex; align-items:center; padding:15px; border-bottom:1px solid #e4e4e4;
}
.cu-modal-header .cu-btn-close {
	display:block; position:relative; width:24px; height:24px; transition:all 0.2s ease-in-out; cursor:pointer;
}
.cu-modal-header .cu-btn-close::before {
	content:""; display:block; position:absolute; top:0; left:0; width:100%; height:1px; margin-top:12px; background-color:#999; transform:rotate(45deg); transition:all 0.3s ease-in-out;
}
.cu-modal-header .cu-btn-close::after {
	content:""; display:block; position:absolute; top:0; left:0; width:100%; height:1px; margin-top:12px; background-color:#999; transform:rotate(-45deg); transition:all 0.3s ease-in-out;
}
.cu-modal-header .cu-btn-close:hover::before, .cu-modal-header .cu-btn-close:hover::after  {
	background-color:#555;
}
.cu-modal-title {
	margin-right:auto; font-size:16px; line-height:1.2em; color:#333; font-weight:400;
}
.cu-modal-body {
	position:relative; flex:1 1 auto; display:flex; flex-wrap:wrap; min-height:100px; align-items:center; padding:30px 20px;
}
.cu-modal-body .cu-context {
	position:relative; width:100%; text-align:center;
}
.cu-modal-body .cu-form {
	position:relative; width:240px; padding-top:15px; margin:auto;
}
.cu-modal-body .cu-form .cu-form-input {
	width:100%; height:30px; font-size:13px; color:#333; padding-left:8px; margin:3px 0; border:1px solid #ccc; border-radius:3px;
}
.cu-modal-body .cu-form .cu-form-input:focus {
	border-color:#4285f4; outline:none;
}
.cu-modal-footer {
	display:flex; justify-content:flex-end; height:46px; padding:0; border-top:1px solid #e4e4e4;
}
.cu-modal-footer .cu-btn-modal {
	color:#555;
}
.cu-modal-footer .cu-btn-modal:hover {
	color:#0d7bf0;
}
.cu-modal-footer .cu-btn-modal {
	font-weight:400;
}
.cu-modal-footer button {
	flex:1; height:100%; border:0; border-radius:0; margin:0; cursor:pointer; background-color:#fff;
}
.cu-modal-footer button:hover {
	background-color:#f8f8f8;
}
.cu-modal-footer button:not(:first-child) {
	border-left:1px solid #e4e4e4;
}