@charset "utf-8";

/*
css name : component
use : align,display,layout,header,footer,lnb,aside
*/

/* ==================================================
	웹 폰트
================================================== */
@font-face {font-family:ng; font-weight:400; font-style:normal; src:url(../font/NanumGothic.eot); src:local(※), url(../font/NanumGothic.woff) format('woff') }
@font-face {font-family:ng; font-weight:700; font-style:normal; src:url(../font/NanumGothicBold.eot);src:local(※),url(../font/NanumGothicBold.woff) format('woff')}

/* ==================================================
	RESET
================================================== */
* {box-sizing:border-box;}
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, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video, button {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline; letter-spacing:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {overflow-x:hidden;font-family:'ng','Malgun Gothic','맑은 고딕',sans-serif; line-height:1.2; font-size:1.4rem; color:#222; background:#ecf3f9;}
ol, ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
th,td {vertical-align:middle; box-sizing:content-box;}
a:link, a:visited, a:hover, a:active {color:inherit;text-decoration:none;}
b, strong {font-weight:bold;}
input, textarea, select, button {font:inherit;}
button {cursor:pointer; outline:0; background:none;}
button > span {position:relative;}
button::-moz-focus-inner, input::-moz-focus-inner {padding:0;border:0;}
button[disabled], input[disabled] {cursor:default;}
textarea {overflow:auto;}
textarea, input {resize:none;}
legend {visibility:hidden; font-size:0;}
audio:not([controls]) {display:none;height:0;}
svg:not(:root){overflow:hidden;}
input[type="text"]::-ms-clear,
input[type="password"]::-ms-clear{display:none;}

input[type="button"],
input[type="reset"],
input[type="submit"]{border-radius:0;-webkit-appearance:button;appearance:button;cursor:pointer; vertical-align:middle;}
button,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {border-radius:0;-webkit-border-radius:0;appearance:none;-webkit-appearance:none; vertical-align:middle;}
select {-webkit-border-radius:0;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}
label,i {display:inline-block;}
a {display:inline-block; vertical-align:middle;}
html,body {width:100%; height:100%; }
html {font-size:62.5%;}
/*img {max-width:100%; vertical-align:middle;}*/
img {max-height:100%; vertical-align:middle;}

/* ==================================================
	공통레이아웃
================================================== */
#wrap {position:relative;  width:100%; height:100%; }
#header {position:fixed; top:0; width:100%; height:60px; background:#2d3a5c; text-align:center; z-index:1;}
#contents {position:relative; height:100%;}
#footer {position:fixed; bottom:0; width:100%; height:38px; background:#343b4e; }


/* ==================================================
	페이지 레이아웃
================================================== */
.sub-page {padding:80px 20px 60px 20px; }
.sub-page .page-title {padding:0 0 17px 0;color:#222; font-size:2rem; font-weight:700; line-height:1;}
.sub-page .page-title.fl{padding:0;line-height:40px;margin-right:230px;}
.sub-page .page-title + .align-right {position:absolute; right:0; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); }

.layout:after {display:block; clear:both; content:"";}
.layout .inner-left {float:left; width:50%; padding-right:10px;}
.layout .inner-right {float:left; width:50%; padding-left:10px;}

.frm-wrap {padding:19px; background:#fff; border:1px solid #dee3e9; border-radius:2px;}
.layout .inner-right .frm-wrap,
.layout .inner-left .frm-wrap {padding:9px;}

.layout .inner-left2 {float:left; width:40%; padding-right:10px;}
.layout .inner-right2 {float:left; width:60%; padding-left:10px;}
.layout .inner-right2 .frm-wrap,
.layout .inner-left2 .frm-wrap {padding:9px;}


/* ==================================================
	header
================================================== */
#header header {position:relative; height:100%; }
#header header h1 {height:100%; font-size:0;}
#header header h1 a {position:relative; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); vertical-align:middle;}

#header header .left-util  {position:absolute; top:0; left:0; font-size:0;}
#header header .btn-menu-lnb {margin-right:11px; width:60px; height:60px; background:#5cb6ea url(../img/common/lnb_btn.png) center no-repeat;}
#header header .next-prev {width:46px; height:60px; text-indent:-9999px; vertical-align:top;}
#header header .next-prev.prev {background:url(../img/common/gnb_move_prev.png) center no-repeat; }
#header header .next-prev.next {background:url(../img/common/gnb_move_next.png) center no-repeat; }

#header header .right-util {position:absolute; top:0; right:13px; font-size:0;}
#header header .right-util p {display:inline-block; margin-right:18px; color:#bababa; font-size:1.4rem; line-height:60px; vertical-align:middle;}
#header header .right-util p span {color:#5cb6ea;}
#header header .right-util a {height:60px; padding:0 9px; }
#header header .right-util .logout {width:50px; background:url(../img/icon/icon_logout.png) center no-repeat;}
#header header .right-util .home {width:38px; background:url(../img/icon/icon_home.png) center no-repeat;}

/* 로그인 페이지에서만 사용 */
.page-login #header {display:none;}
.page-login #footer  {bottom:10px; background:none;}


/* ==================================================
	footer
================================================== */
footer {text-align:center; color:#8f95a3; font-size:1.1rem; line-height:38px; }
footer .privacy {position:relative; display:inline-block; padding-right:15px; margin-right:15px; font-weight:700; color:#1ca3d4; cursor:pointer}
footer .privacy:after {display:block; content:""; position:absolute; right:0; top:50%; margin-top:-7px; width:1px; height:14px; background:#1ca3d4; }

/* ==================================================
	aside
================================================== */
.lnb-wrap {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2; }
.lnb-wrap .mask {display:none; position:absolute; width:100%; height:100%; background:#000; opacity:0.6;}
.lnb-wrap.on {display:block;}
.lnb-wrap .lnb-menu-layer {position:relative; width:160px; height:100%; background:#fff; box-shadow:5px 0px 10px rgba(0,0,0,0.3)}
.lnb-wrap .lnb-menu-layer .btn-lnb-close {background:#fff; padding:18px 0 19px 0; background:#beddf0; cursor:pointer; text-align:center; vertical-align:middle;}
.lnb-wrap .down {display:block; position:absolute; bottom:0; left:0; width:100%; height:30px; background:url(../img/icon/icon_arrow_down.gif) 50% 12px no-repeat;}

#lnb {position:absolute; overflow-y:scroll; top:60px; right:0; bottom:30px; left:0; padding-top:18px; text-align:center;}
#lnb li {padding-bottom:25px;}
#lnb a {display:block;}
#lnb a span {display:block; padding-top:7px; font-size:1.3rem;}

/* ==================================================
	main focus
================================================== */
.on-focus .login-form {top:3% !important; transform:translateY(0%) !important; -webkit-transform:translateY(0%) !important;}

/* ==================================================
	skip
================================================== */
a.skip{display:block;position:absolute;top:-1px;z-index:999;width:0;height:0;overflow:hidden;text-align:center}
a.skip:active,a.skip:focus{z-index:999;width:100%;height:auto;padding:5px;background:#FFF}

/* ==================================================
	align
================================================== */
.ta-l {text-align:left !important;}
.ta-c {text-align:center !important;}
.ta-r {text-align:right !important;}
.va-t {vertical-align:top;}
.va-m {vertical-align:middle !important;}
.pos-m {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);}

/* ==================================================
	hide & float & clear & block & position
================================================== */
.hide {display:none !important;}
.v-hidden {visibility:hidden; height:0px;}
.d-block {display:block !important;}
.d-iblock {display:inline-block !important;}
.fl-l {float:left;}
.fl-r {float:right;}
.cb {clear:both;}/*2017-10-26*/
.clear:after {display:block; clear:both; content:"";}
.pos-r {position:relative;}
.pos-a {position:absolute;}
.pos-f {position:fixed;}
.ov-hidden {overflow:hidden;}
.ovy-auto {overflow-y:auto;}
.ov-auto {overflow:auto;}
.ellipsis{display:block; overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* ==================================================
	font
================================================== */
.fz-0 {font-size:0rem !important;}
.fz-9 {font-size:.9rem !important;}
.fz-10 {font-size:1rem !important;}
.fz-11 {font-size:1.1rem !important;}
.fz-12 {font-size:1.2rem !important;}
.fz-13 {font-size:1.3rem !important;}
.fz-14 {font-size:1.4rem !important;}
.fz-15 {font-size:1.5rem !important;}
.fz-16 {font-size:1.6rem !important;}
.fz-17 {font-size:1.7rem !important;}
.fz-18 {font-size:1.8rem !important;}
.fz-20 {font-size:2.0rem !important;}
.fz-22 {font-size:2.2rem !important;}

.fw-bold {font-weight:700 !important;}
.fw-normal {font-weight:400 !important;}

/* ==================================================
	margin, padding
================================================== */
.no-margin {margin:0 !important;}

.mt-5 {margin-top:5px !important}
.mt-10 {margin-top:10px !important}
.mt-15 {margin-top:15px !important}
.mt-20 {margin-top:20px !important}
.mt-25 {margin-top:25px !important}
.mt-30 {margin-top:30px !important}
.mt-35 {margin-top:35px !important}
.mt-40 {margin-top:40px !important}
.mt-45 {margin-top:45px !important}
.mt-50 {margin-top:50px !important}
.mt-55 {margin-top:55px !important}
.mt-60 {margin-top:60px !important}
.mt-65 {margin-top:65px !important}
.mt-70 {margin-top:70px !important}
.mt-75 {margin-top:75px !important}
.mt-80 {margin-top:80px !important}
.mt-85 {margin-top:85px !important}
.mt-90 {margin-top:90px !important}
.mt-95 {margin-top:95px !important}
.mt-100 {margin-top:100px !important}

.mr-5 {margin-right:5px !important}
.mr-10 {margin-right:10px !important}
.mr-15 {margin-right:15px !important}
.mr-20 {margin-right:20px !important}
.mr-25 {margin-right:25px !important}
.mr-30 {margin-right:30px !important}
.mr-35 {margin-right:35px !important}
.mr-40 {margin-right:40px !important}
.mr-45 {margin-right:45px !important}
.mr-50 {margin-right:50px !important}
.mr-55 {margin-right:55px !important}
.mr-60 {margin-right:60px !important}
.mr-65 {margin-right:65px !important}
.mr-70 {margin-right:70px !important}
.mr-75 {margin-right:75px !important}
.mr-80 {margin-right:80px !important}
.mr-85 {margin-right:85px !important}
.mr-90 {margin-right:90px !important}
.mr-95 {margin-right:95px !important}
.mr-100 {margin-right:100px !important}

.mb-5 {margin-bottom:5px !important}
.mb-10 {margin-bottom:10px !important}
.mb-15 {margin-bottom:15px !important}
.mb-20 {margin-bottom:20px !important}
.mb-25 {margin-bottom:25px !important}
.mb-30 {margin-bottom:30px !important}
.mb-35 {margin-bottom:35px !important}
.mb-40 {margin-bottom:40px !important}
.mb-45 {margin-bottom:45px !important}
.mb-50 {margin-bottom:50px !important}
.mb-55 {margin-bottom:55px !important}
.mb-60 {margin-bottom:60px !important}
.mb-65 {margin-bottom:65px !important}
.mb-70 {margin-bottom:70px !important}
.mb-75 {margin-bottom:75px !important}
.mb-80 {margin-bottom:80px !important}
.mb-85 {margin-bottom:85px !important}
.mb-90 {margin-bottom:90px !important}
.mb-95 {margin-bottom:95px !important}
.mb-100 {margin-bottom:100px !important}

.ml-5 {margin-left:5px !important}
.ml-10 {margin-left:10px !important}
.ml-15 {margin-left:15px !important}
.ml-20 {margin-left:20px !important}
.ml-25 {margin-left:25px !important}
.ml-30 {margin-left:30px !important}
.ml-35 {margin-left:35px !important}
.ml-40 {margin-left:40px !important}
.ml-45 {margin-left:45px !important}
.ml-50 {margin-left:50px !important}
.ml-55 {margin-left:55px !important}
.ml-60 {margin-left:60px !important}
.ml-65 {margin-left:65px !important}
.ml-70 {margin-left:70px !important}
.ml-75 {margin-left:75px !important}
.ml-80 {margin-left:80px !important}
.ml-85 {margin-left:85px !important}
.ml-90 {margin-left:90px !important}
.ml-95 {margin-left:95px !important}
.ml-100 {margin-left:100px !important}

.no-padding {padding:0px !important;}

.pd-5 {padding:5px !important;}
.pd-10 {padding:10px !important;}
.pd-15 {padding:15px !important;}
.pd-20 {padding:20px !important;}
.pd-25 {padding:25px !important;}
.pd-30 {padding:30px !important;}

.pt-5 {padding-top:5px !important}
.pt-10 {padding-top:10px !important}
.pt-15 {padding-top:15px !important}
.pt-20 {padding-top:20px !important}
.pt-25 {padding-top:25px !important}
.pt-30 {padding-top:30px !important}
.pt-35 {padding-top:35px !important}
.pt-40 {padding-top:40px !important}
.pt-45 {padding-top:45px !important}
.pt-50 {padding-top:50px !important}
.pt-55 {padding-top:55px !important}
.pt-60 {padding-top:60px !important}
.pt-65 {padding-top:65px !important}
.pt-70 {padding-top:70px !important}
.pt-75 {padding-top:75px !important}
.pt-80 {padding-top:80px !important}
.pt-85 {padding-top:85px !important}
.pt-90 {padding-top:90px !important}
.pt-95 {padding-top:95px !important}
.pt-100 {padding-top:100px !important}

.pr-5 {padding-right:5px !important}
.pr-10 {padding-right:10px !important}
.pr-15 {padding-right:15px !important}
.pr-20 {padding-right:20px !important}
.pr-25 {padding-right:25px !important}
.pr-30 {padding-right:30px !important}
.pr-35 {padding-right:35px !important}
.pr-40 {padding-right:40px !important}
.pr-45 {padding-right:45px !important}
.pr-50 {padding-right:50px !important}
.pr-55 {padding-right:55px !important}
.pr-60 {padding-right:60px !important}
.pr-65 {padding-right:65px !important}
.pr-70 {padding-right:70px !important}
.pr-75 {padding-right:75px !important}
.pr-80 {padding-right:80px !important}
.pr-85 {padding-right:85px !important}
.pr-90 {padding-right:90px !important}
.pr-95 {padding-right:95px !important}
.pr-100 {padding-right:100px !important}

.pb-5 {padding-bottom:5px !important}
.pb-10 {padding-bottom:10px !important}
.pb-15 {padding-bottom:15px !important}
.pb-20 {padding-bottom:20px !important}
.pb-25 {padding-bottom:25px !important}
.pb-30 {padding-bottom:30px !important}
.pb-35 {padding-bottom:35px !important}
.pb-40 {padding-bottom:40px !important}
.pb-45 {padding-bottom:45px !important}
.pb-50 {padding-bottom:50px !important}
.pb-55 {padding-bottom:55px !important}
.pb-60 {padding-bottom:60px !important}
.pb-65 {padding-bottom:65px !important}
.pb-70 {padding-bottom:70px !important}
.pb-75 {padding-bottom:75px !important}
.pb-80 {padding-bottom:80px !important}
.pb-85 {padding-bottom:85px !important}
.pb-90 {padding-bottom:90px !important}
.pb-95 {padding-bottom:95px !important}
.pb-100 {padding-bottom:100px !important}

.pl-5 {padding-left:5px !important}
.pl-10 {padding-left:10px !important}
.pl-15 {padding-left:15px !important}
.pl-20 {padding-left:20px !important}
.pl-25 {padding-left:25px !important}
.pl-30 {padding-left:30px !important}
.pl-35 {padding-left:35px !important}
.pl-40 {padding-left:40px !important}
.pl-45 {padding-left:45px !important}
.pl-50 {padding-left:50px !important}
.pl-55 {padding-left:55px !important}
.pl-60 {padding-left:60px !important}
.pl-65 {padding-left:65px !important}
.pl-70 {padding-left:70px !important}
.pl-75 {padding-left:75px !important}
.pl-80 {padding-left:80px !important}
.pl-85 {padding-left:85px !important}
.pl-90 {padding-left:90px !important}
.pl-95 {padding-left:95px !important}
.pl-100 {padding-left:100px !important}


/* ==================================================
	width
================================================== */
.w-auto {width:auto !important;}
.w25-per {width:25% !important;}
.w30-per {width:30% !important;}
.w33-per {width:33.33% !important;}
.w50-per {width:50% !important;}
.w70-per {width:70% !important;}
.w100-per {width:100% !important;}

.w10 {width:10px !important;}
.w20 {width:20px !important;}
.w30 {width:30px !important;}
.w40 {width:40px !important;}
.w50 {width:50px !important;}
.w60 {width:60px !important;}
.w70 {width:70px !important;}
.w80 {width:80px !important;}
.w90 {width:90px !important;}
.w100 {width:100px !important;}
.w150 {width:150px !important;}
.w200 {width:200px !important;}
.w250 {width:250px !important;}
.w300 {width:300px !important;}
.w350 {width:350px !important;}
.w400 {width:400px !important;}
.w450 {width:450px !important;}
.w500 {width:500px !important;}
.w550 {width:550px !important;}
.w600 {width:600px !important;}
.w650 {width:650px !important;}
.w700 {width:700px !important;}

.h10 {height:10px !important;}
.h20 {height:20px !important;}
.h30 {height:30px !important;}
.h40 {height:40px !important;}
.h50 {height:50px !important;}
.h60 {height:60px !important;}
.h70 {height:70px !important;}
.h80 {height:80px !important;}
.h90 {height:90px !important;}
.h100 {height:100px !important;}
.h150 {height:150px !important;}
.h200 {height:200px !important;}
.h250 {height:250px !important;}
.h300 {height:300px !important;}
.h350 {height:350px !important;}
.h400 {height:400px !important;}
.h450 {height:450px !important;}
.h500 {height:500px !important;}
.h550 {height:550px !important;}
.h600 {height:600px !important;}
.h650 {height:650px !important;}
.h700 {height:700px !important;}


/* ==================================================
	모니터 현황
================================================== */
.monitor-total {display:inline-block; text-align:left;}
.monitor-total .monitor {display:inline-block; margin:3px; padding-top:13px; width:70px; height:50px; border:1px solid #fff; background:#fff url(../img/common/template_panel.png) center no-repeat; text-align:center; color:#666; font-weight:700;}
.monitor-total .monitor.off {background:#fff url(../img/common/template_panel_dimm.png) center no-repeat; color:#a9a9a9;}
.monitor-total .monitor.active {border-color:#5cb6ea; background-color:#f9f9f9;}




/* ==================================================
	 로딩 CSS (ajax 용)
================================================== */
/*.cssload-loader {*/
    /*position: relative;*/
    /*width: 2.5em;*/
    /*height: 2.5em;*/
    /*transform: rotate(165deg);*/
    /*display: block;*/
    /*margin: auto;*/
/*}*/
/*.cssload-loader:before, .cssload-loader:after {*/
    /*content: "";*/
    /*position: absolute;*/
    /*display: block;*/
    /*width: 0.5em;*/
    /*height: 0.5em;*/
    /*border-radius: 0.25em;*/
    /*transform: translate(-50%, -50%);*/
    /*-o-transform: translate(-50%, -50%);*/
    /*-ms-transform: translate(-50%, -50%);*/
    /*-webkit-transform: translate(-50%, -50%);*/
    /*-moz-transform: translate(-50%, -50%);*/
/*}*/
/*.cssload-loader:before {*/
    /*animation: before 2.3s infinite;*/
    /*-o-animation: before 2.3s infinite;*/
    /*-ms-animation: before 2.3s infinite;*/
    /*-webkit-animation: before 2.3s infinite;*/
    /*-moz-animation: before 2.3s infinite;*/
/*}*/
/*.cssload-loader:after {*/
    /*animation: after 2.3s infinite;*/
    /*-o-animation: after 2.3s infinite;*/
    /*-ms-animation: after 2.3s infinite;*/
    /*-webkit-animation: after 2.3s infinite;*/
    /*-moz-animation: after 2.3s infinite;*/
/*}*/
/* ajax 로딩화면 css 20170828 이동훈 */
.ajax-loading {
    position: absolute;
    z-index:100;
    min-height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0, 0, 0, 0.2);
}
.ajax-loading .spinner {
    position:absolute;
    top:50%; left:50%; margin-left:-50px; margin-top:-50px;
    z-index:110;
}

/* layer-popup 로딩화면 css 20170831 이동훈 */
.popup-loading{
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    min-height: 100%;
    z-index: 300;
    background: rgba(0, 0, 0, 0.2);
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

.popup-loading .spinner {
    position:absolute;
    top:50%; left:50%; margin-left:-50px; margin-top:-50px;
    z-index:310;
}
/**/

/* a/s장애관리 list border css 20170904 이동훈 */
.linebtnbody {
    cursor: pointer;
    background-color: #dbebf4;
}
/**/

@keyframes before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
    }
    100% {
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
}

@-o-keyframes before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
    }
    100% {
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
}

@-ms-keyframes before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
    }
    100% {
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
}

@-webkit-keyframes before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
    }
    100% {
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
}

@-moz-keyframes before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
    }
    100% {
        box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
    }
}

@keyframes after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
    }
    100% {
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
}

@-o-keyframes after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
    }
    100% {
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
}

@-ms-keyframes after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
    }
    100% {
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
}

@-webkit-keyframes after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
    }
    100% {
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
}

@-moz-keyframes after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
    }
    100% {
        box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
    }
}



/* ==================================================
	모바일 화면 2019-01-29  추가
================================================== */
.is-mobile #header .left-util .btn-menu-lnb {margin-right:0 !important;}
.is-mobile #header .left-util .next-prev,
.is-mobile #header .right-util p,
.is-mobile #header .right-util .logout {display:none !important;}
.is-mobile #header h1 img {width:66%;}

.is-mobile .page-title {padding-bottom:8px; font-size:1.6rem;}


.cursor {cursor: pointer;}