@charset "UTF-8";
/* RESET */
    html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height:100vh;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;overflow-y: hidden;}
    *, *:before, *:after {box-sizing: inherit;}
     *:before, *:after  {vertical-align:top;}
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
    strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button,
    article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video
    {margin:0; padding:0; border:0;}
    body    {font-family:"Apple SD Gothic Neo", "Malgun Gothic", sans-serif; width:100%; height:100%; color:#231815; font-size:12px; font-weight:400; line-height:1; letter-spacing:-0.5px;}

    article, aside, details, figcaption, figure, footer, header, menu, nav, section {display:block;}
    p, h1, h2, h3   {font-weight:inherit; letter-spacing:inherit;}
    span    {display: inline-block; vertical-align:middle;}
    img, li {vertical-align:middle;}
    a   {display:block; text-decoration:none; color:inherit; cursor:pointer;vertical-align:middle;}
    a:hover {text-decoration:none;}
    ol, ul  {list-style:none;}
    legend, caption, hr {display:none;}
    table {border-collapse:collapse; border-spacing:0; table-layout:fixed; empty-cells:show; width:100%;}
    th  {font-weight:inherit;}

    input, select   {vertical-align:middle; border-radius:0;-webkit-user-select:auto;  -moz-user-select:auto; -ms-user-select:auto;}
    input, textarea, select, button {font-family:"Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color:#231815; border-radius:0; font-size:12px; font-weight:400; line-height:1.4; letter-spacing:-0.5px;}
    input :: - ms-clear {visibility:hidden; display:none;}
    select::-ms-expand {display:none;}
    input, select   {
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        -o- appearance:none;
    }
    button  {background:none; cursor:pointer;}

/*  INPUT   */
    input[type="text"], input[type="password"]  {padding:0 4px; width:100%; min-height:26px; border:1px solid #e6e6e2; line-height:24px;}
    select  {height:26px;  width:100%; background:url("../../../../../static-root/images/login_kdp/input_select.svg") #fff 100% 50% no-repeat; padding-right:31px; padding-left:4px; cursor:pointer; border:1px solid #e6e6e2;}
    .contents.login input::-webkit-input-placeholder { color: #ccc; }
    .contents.login input::-ms-input-placeholder { color: #ccc; }
    .contents.login input::-webkit-input-placeholder { color: #ccc; } 
    .contents.login input::-moz-placeholder { color: #ccc; }
    .contents.login input:-webkit-autofill,
    .contents.login input:-webkit-autofill:hover,
    .contents.login input:-webkit-autofill:focus,
    .contents.login input:-webkit-autofill:active {
        transition: background-color 5000s ease-in-out 0s;
        -webkit-text-fill-color: #ccc;}
    label.necessary:after, span.necessary:after {content:""; width:10px; height:10px; display:inline-block; background-position:50% 50%; background-size:12px 12px; background-repeat:no-repeat; margin-top:2px; margin-left:6px; background-image:url("../../../../../static-root/images/login_kdp/input_check.svg");}
    input[type="text"].necessary    {border-color:rgba(232,56,13,0.2); background-color:rgba(232,56,13,0.05);}
    select.necessary    {border-color:rgba(232,56,13,0.2); background-color:rgba(232,56,13,0.05);}

    .textBtnWrap    {display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center;}
    .textBtnWrap input[type="text"] {flex-basis:0; flex-grow:1; padding-right:0; border-right:none;}
    .textBtnWrap button {padding:0 8px; background:#9a7d4a; line-height:26px; color:#e6e6e2;}
        .textBtnWrap button:before  {content:""; width:12px; height:12px; display:inline-block; background-position:50% 50%; background-size:12px 12px; background-repeat:no-repeat; margin-top:8px; margin-right:3px; background-image:url("../../../../../static-root/images/login_kdp/ico_save.svg");}
    .textBtnWrap button:hover   {background:#e8380d;}

/*  table   */
    table   {background:#fff;word-wrap:break-word;}
        table th    {vertical-align:middle; text-align:center; background:rgba(230,230,226,0.3); padding:0 4px; border:1px solid #e6e6e2;}
        table td    {vertical-align:middle; padding:4px; border:1px solid #e6e6e2;}
        table td.center {text-align:center !important;}
        table td.left   {text-align:left !important;}
    table thead th  {font-weight:700;line-height:20px;line-height:34px;}

/*  LOGIN   */
.container.login    {position:relative; overflow:hidden; width:100vw; height:100vh; min-width:1280px; display:flex; justify-content: center;  align-items:center;}
.loginContainer {/*margin:0 64px;*/padding:48px 60px 32px; background:rgba(255,255,255,.8); border-radius:0 0 12px 12px; border-top:12px solid #e8380d; box-shadow: 0px 4px 16px rgba(0,0,0,0.4);}
.container.login > h1	{position:absolute; top:0; left:48px; padding:12px; background:#e8380d; border-radius:0 0 24px 24px;}
.container.login > h1 img	{width:120px;}
.container.login .login_btn {margin:24px 0 24px;cursor:pointer; width:100%; background:linear-gradient(135deg,#e8380d,#231815); color:#fff; line-height:48px; font-size:18px; font-weight:700; /*border-radius:18px;*/}
    .container.login .login_btn:hover   {background:#231815;}
.loginMenu{position:relative;width:360px;}
.loginMenu h1   {margin-bottom:32px; text-align:center; font-weight:700; font-size:40px;}

.container.login > p    {position:absolute; width:740px; height:740px; top:-570px; right:-360px; background:rgba(255,255,255,.8); border-radius:50%;}
.container.login > p a  {position:absolute; top:600px; right:400px; font-size:14px; font-weight:bold; color:#e8380d;}
.container.login > p a span {margin:0 auto 5px; display:flex; flex-wrap: wrap; justify-content: center; align-items: center; background:#e8380d; width:38px; height:38px; border-radius:50%;}
.container.login > p a img  {width:24px;}
.container.login > p a:hover    {text-decoration:underline; color:#231815;}
.container.login > p a:hover span   {background:#231815;}

.container.login input[type="text"], input[type="password"] {padding:0 12px; height:42px; font-size:14px; border:1px solid #e8380d;}



.contents.login ul  {}
.contents.login ul li   {position:relative; overflow:hidden;}
.contents.login ul li + li	{margin-top:12px;}
.contents.login .setupWrap  {display:flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;}

.toggleCheckbox {line-height:26px;}
.toggleCheckbox input {width:0; height:0; }

    .toggleCheckbox .switch {position:relative; display:inline-block; width:60px; cursor:pointer;}
    .toggleCheckbox .slider {position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(35,24,21,0.7); border-radius:13px;
        -webkit-transition: all 0.3s ;
        -moz-transition: all 0.3s ;
        -o-transition: all 0.3s ;
        transition: all 0.3s ;
    }
    .toggleCheckbox .slider:before {position:absolute; font-family:"tahoma"; content:"OFF"; font-size:10px; text-align:center; width:32px; line-height:22px; left:2px; bottom:2px; font-weight:700; background-color:#fff; border-radius:11px;
        -webkit-transition: all 0.3s ;
        -moz-transition: all 0.3s ;
        -o-transition: all 0.3s ;
        transition: all 0.3s ;
    }
        .toggleCheckbox input:checked + .slider {background-color:#e8380d;}
        .toggleCheckbox input:checked + .slider:before { content:"ON"; color:#e8380d;
          -webkit-transform: translateX(24px);
          -ms-transform: translateX(24px);
          transform: translateX(24px);
        }

.slideshow  {position:absolute; top:0; left:0; width:100vw; height:100vh; z-index:-1; background-position:50% 50%; background-repeat: no-repeat; background-size:cover;
    -webkit-animation: bgAnimation 12s; 
    -moz-animation: bgAnimation 12s; 
    -o-animation: bgAnimation 12s; 
    -ms-animation: bgAnimation 12s; 
    animation: bgAnimation 12s; 

}
.slideshow li   {width:100%; height:100%; position:absolute; top:0px; left:0px; background-position:50% 50%; background-repeat:no-repeat; opacity:0; background-size:cover;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.slideshow li:nth-child(1) { 
    background-image: url("../../../../../static-root/images/login_kdp/bg01.jpg");
}
.slideshow li:nth-child(2) { 
    background-image: url("../../../../../static-root/images/login_kdp/bg02.jpg");
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) { 
    background-image: url("../../../../../static-root/images/login_kdp/bg03.jpg");
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) { 
    background-image: url("../../../../../static-root/images/login_kdp/bg04.jpg");
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) { 
    background-image: url("../../../../../static-root/images/login_kdp/bg05.jpg");
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.slideshow li:nth-child(6) { 
    background-image: url("../../../../../static-root/images/login_kdp/bg06.jpg");
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

/* Animation for the slideshow img */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

/* Animation for the bg img */
@-webkit-keyframes bgAnimation { 
    0% {background-image: url("../../../../../static-root/images/login_kdp/bg01.jpg");}
    100% {background-image:none;}
}
@-moz-keyframes bgAnimation { 
    0% {background-image: url("../../../../../static-root/images/login_kdp/bg01.jpg");}
    100% {background-image:none;}
}
@-o-keyframes bgAnimation { 
    0% {background-image: url("../../../../../static-root/images/login_kdp/bg01.jpg");}
    100% {background-image:none;}
}
@-ms-keyframes bgAnimation { 
    0% {background-image: url("../../../../../static-root/images/login_kdp/bg01.jpg");}
    100% {background-image:none;}
}
@keyframes bgAnimation { 
    0% {background-image: url("../../../../../static-root/images/login_kdp/bg01.jpg");}
    100% {background-image:none;}
}

/*	POPUP	*/
.popupContainer	{display:none; position:fixed; width:100%; height:100%; top:0; left:0; z-index:10;}
.popupContainer.on	{display:flex; justify-content:center; align-items:center;}
.popupContainer .popupDimmed	{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.7);}
.popupContainer.alert   {z-index:20;}

.popupContainer > [class*="Wrap"]	{z-index:1; position:absolute; background:#fff;}
.popupContainer > .popupWrap	{width:720px;}
.popupContainer > .alertWrap	{width:240px;}

.popupContainer .popupTitleWrap	{position:relative; background:#231815; cursor:move;}
.popupContainer .popupTitleWrap .title	{line-height:42px;font-size:16px;  font-weight:700; color: #fff; padding-left:10px;}
.popupContainer .popupTitleWrap .close	{opacity:0.5; cursor:pointer; position:absolute; width:42px; height:42px; top:0; right:0; background:url("../../../../../static-root/images/login_kdp/btn_close.svg") 50% 50% no-repeat; background-size:18px 18px;}
	.popupContainer .popupTitleWrap .close:hover	{opacity:1;}
.popupContainer .popupContentWrap	{overflow:hidden;}
.popupContainer .popupContent	{}
.popupContainer .popupContent .realGridWrap	{height:480px;}
.popupContainer .popupContent .searchContainer	{}
.popupContainer .popupContent .searchContainer table tr:last-child th, .popupContainer .popupContent .searchContainer table tr:last-child td	{border-bottom:1px solid #e6e6e2;}

.popupContainer .popupContentWrap .popupBtnWrap	{display:flex; width:100%;}
.popupContainer .popupContentWrap .popupBtnWrap input[type="submit"]	{background:#e8380d; color:#fff;text-align:center; flex:1; cursor:pointer; line-height:42px; font-size:14px; font-weight:700;}
.popupContainer .popupContentWrap .popupBtnWrap input[type="submit"]:hover	{background:#231815;}


.popupContainer .popupContent > p	{padding:12px 10px;}

.popupContainer [class*="Content"] + [class*="BtnWrap"]	{display:flex; width:100%;}
.popupContainer [class*="Content"] + [class*="BtnWrap"] button	{text-align:center; flex:1; cursor:pointer; line-height:36px; font-size:14px; font-weight:700; background:#e6e6e2;}
.popupContainer [class*="Content"] + [class*="BtnWrap"] button:last-child	{background:#e8380d; color:#fff;}
.popupContainer [class*="Content"] + [class*="BtnWrap"] button:hover	{background:#231815; color:#e6e6e2;}
.popupContainer [class*="Content"] + [class*="BtnWrap"] button:before	{margin-top:13px; margin-right:6px;}


/* 21.09.17 추가 SHM*/

.alertWrap .alertContent	{padding:30px 20px; background-position:20px 30px; background-repeat:no-repeat; background-size:38px 38px;border-top:6px solid #e8380d; }
.alertWrap .alertContent p	{min-height:38px; padding-left:48px; line-height:1.6;display:flex; justify-content:flex-start; align-items:center;}

/* alert image*/
.alertWrap.alert .alertContent	{background-image:url('../../../../../static-root/images/common/img_warning.svg'); }
.alertWrap.bizError .alertContent	{background-image:url('../../../../../static-root/images/common/ico_filealert.png'); }
.alertWrap.info .alertContent	{background-image:url('../../../../../static-root/images/common/ico_monitoralert.png'); }
.alertWrap.sysError .alertContent	{background-image:url('../../../../../static-root/images/common/ico_monitoralert2.png'); }
.alertWrap.confirm .alertContent	{background-image:url('../../../../../static-root/images/common/img_save.svg'); }


/* ifrm_loadbox	*/
.ifrm_loadbox {position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.7);}
.ifrm_loading	{}
.ifrm_loadbox	{position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.7); display:flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.ifrm_loadbox .ifrm_loading	{padding-left:176px; }
.ifrm_loadbox .ifrm_loading .progressWrap	{position:relative; width:240px; height:48px;}

.ifrm_loadbox .ifrm_loading .progressWrap p	{position:absolute; top:6px; left:0; overflow:hidden; font-size:16px; font-weight:700; color:#fff; padding-bottom:24px; white-space:nowrap; border-bottom:6px solid #fff;
		-webkit-animation:gograph 1.5s ease-in-out infinite backwards;
		animation:gograph 1.5s ease-in-out infinite backwards;
}
.ifrm_loadbox .ifrm_loading .progressWrap > img	{position:absolute; bottom:-22px;  left:0px; width:48px; height:48px;
	-webkit-animation: go 1.5s ease-in-out infinite backwards;
		animation: go 1.5s ease-in-out infinite backwards;
}

	@-webkit-keyframes gograph {
		from {
			width:0%;
		}
		to {
			width:100%;
		}
	}
	@keyframes gograph {
		from {
			width:0%;
		}
		to {
			width:100%;
		}
	}

	@-webkit-keyframes go {
		from {
			left:0;
		}
		to {
			left:238px;
		}
	}
	@keyframes go {
		from {
			left:0;
		}
		to {
			left:238px;
		}
	}