body {
    font-family: 'Nanum Gothic';
    font-size: 13px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'nanum square';}
::selection { background-color:#004680; color:#fff;}
::-moz-selection { background-color:#004680; color:#fff;}
a, a:hover, a:focus, a:active { color: inherit;}
.box {
    border-radius: 0px;
    border: none;
    box-shadow: none;
}
.skin-blue .wrapper {
    background-color: #fff;
    overflow: auto;
}
.content-wrapper, .main-footer {
    max-width: 1600px;
    min-width: 750px;
    margin-left: 350px;
    padding: 0 50px;
}

.skin-blue .content-header {
    padding: 0;
}
.content-header .page-navi {
    border-bottom: 1px #e1e1e1 solid;
}
.content-header .breadcrumb {
    background:none;
    height:60px;
    margin:0;
    padding:0 15px;
    line-height: 60px;
}
.content-header .breadcrumb a {
    color:#787878;
    font-size: 12px;
}
.content-header .breadcrumb>.active a {
    font-weight: 900;
    color: #005dab;
}
.content-header .page-title h1 {
    padding:30px 15px;
    margin:0;
    font-family: 'nanum square';
    font-weight: bold;
}
.content-header .page-title h1::before {
    content: '';
    display: inline-block;
    width:4px;
    height: 18px;
    background-color: #005dab;
    margin-right: 15px;
}

.main-sidebar {
    width: 350px;
    padding-top: 0px;
}
.sidebar .logo {
    padding:20px;
}
.sidebar .user-panel {
    height:100px;
    padding:0 50px;
    display: flex;
    align-items: center;
}
.sidebar .user-panel > div {
    width:100%;
}
.sidebar .user-panel a {
    color:#fff;
    font-size:12px;
    font-weight:700;
}
.sidebar .user-panel .user-info {
    color:#fff;
    margin:10px 0;
}
.sidebar .sidebar-menu a {
    color:#fff;
}
.sidebar-menu {
    margin-top: 7.5vh;
    border-top: 1px #06b solid;
    position: relative;
    color: #fff;
    min-height: 400px;
}
.sidebar-menu > li {
    position: static;
    width: 350px;
    font-family: 'nanum square';
    font-size: 17px;
    padding: 14px 0;
    padding-right: 40px;
    border-bottom: 1px #06b solid;
    cursor: pointer;
    text-align: right;
    transition: margin .2s ease;    
}
.sidebar-menu.active > li {
    margin-left: -200px;
    padding-right: 25px;
}
.sidebar-menu > li:hover, .sidebar-menu > li.active {
    background-color:#fff;
    color:#005dab;
}
.sidebar-menu > li > ul {
    position: absolute;
    top: 0;
    left: 0;
    width:200px;
    font-family: 'Nanum Gothic';
    font-size: 13px;
    text-align: left;
    margin-left: 350px;
    padding-left:0;
    color: #fff;
    transition:all .2s ease;
}
.sidebar-menu > li.active > ul {
    margin-left: 150px;
}
.sidebar-menu > li > ul > li {
    list-style: none;
    font-weight: 700;
}
.sidebar-menu > li > ul > li a {
    display: block;
    padding:10px 0;
    padding-left: 20px;
}
.sidebar-menu > li > ul > li a:hover, .sidebar-menu > li > ul > li a.active {
    background-color:#004680;
}
.sidebar-menu > li > ul > li > ul {
    padding-left:0;
}
.sidebar-menu > li > ul > li > ul > li {
    list-style: none;
    font-weight: 400;
}
.sidebar-menu > li > ul > li > ul > li > a {
    padding-left: 35px;
}
.sidebar-menu > li > ul > li > ul > li > a::before {
    content: '-';
    position: absolute;
    margin-left: -15px;
}

/*심의일자 그래프*/
#replan {
    border-top: 1px #06b solid;
    margin-top: 5vh;
}
#replan .header {
    color: #fff;
    font-size: 18px;
    padding: 5px 25px;
}

#replan .header span {font-family: 'nanum square';}

#replan .header i {
    transform: rotate(45deg);
}

#replan .graph-body {width: 300px;margin: 0 auto;position: relative;height: 2px;border-radius: 2px;background: #fff;margin-top: 30px;}

#replan .graph-body .last-date, #replan .graph-body .audit-date {
    width: 10px;
    height: 10px;
    border: 2px #fff solid;
    border-radius: 10px;
    position: absolute;
    margin-left: -10px;
    margin-top: -4px;
    background: #005dab;
    cursor: pointer;
    z-index: 1;
}

#replan .graph-body .audit-date {
    left: 100%;
    background: #004680;    
}

#replan .graph-body .last-date i, #replan .graph-body .audit-date i {
    color: #fff;
    font-size: 11px;
    position: absolute;
    display: block;
    font-style: normal;
    width: 55px;
    text-align: right;
    margin-left: -55px;
    margin-top: 15px;
    transform: rotate(-30deg);
}
#replan .graph-body .current-date {
    font-size: 30px;
    color: #e53;
    position: absolute;
    width: 18px;
    margin-top: -32px;
    margin-left: -14px;
    left: 0%;
    /*transition: left .3s ease;*/
    z-index: 0;
}

/* WebKit and Opera browsers */
@-webkit-keyframes bingle {
  from { -webkit-transform: rotateY(0deg);    }
  to   { -webkit-transform: rotateY(-360deg); }
}

/* all other browsers */
@keyframes bingle {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
#replan .graph-body .current-date i {
	animation-duration: 3s;
    animation-name: bingle;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#replan .graph-date {
	position: relative;
    width: 300px;
    margin: 0 auto;
}
#replan .graph-date > div {
	position: absolute;
    width: 150px;
    text-align: center;
    background-color: #fff;
    padding: 5px 0;
    border-radius: 50px;
    font-family: 'nanum square';
    font-size: 18px;
    font-weight: 700;
    color: #004680;
    border: 2px #005dab solid;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
    margin-top: -60px;
    margin-left: -125px;
}
#replan .graph-date > div::after {content: '';display: block;position: absolute;width: 0px;height: 0px;border-top: 15px solid #FFE;border-bottom: 15px solid none;border-left: 10px solid transparent;border-right: 10px solid transparent;left: 110px;}
#replan .graph-date .audit-date {
	left: 100%;
}
#replan .graph-date .start-date, #replan .graph-date .last-date, #replan .graph-date .audit-date {
	display: none;
}

.content-wrapper {
    padding-top: 0.1px!important;
    background-color:#fff;
}
/*모바일 사이즈에서 사이드 바 숨기지 않도록*/
@media (max-width: 767px) {
    .main-sidebar {
        padding-top: 0px;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.skin-blue .main-sidebar {
    background-color:#005dab;
}

footer.main-footer {
    border:none;
}
footer.main-footer > div {
    border-top:1px #e1e1e1 solid;
}
.main-footer .logo {
}
.main-footer .logo > img {
    width: 100%;
    max-width: 230px;
    margin-top: 50px;
}
.main-footer .info {
    font-size: 11px;
    color: #787878;
    padding:10px 0;
}
.main-footer .info table tr td {
    padding: 0 10px;
}
.main-footer .info table tr:first-child > td {
    vertical-align: top;
    font-size:20px;
    padding-left:0;
}
.main-footer .info table tr:first-child:hover {
    background:none;
}
.main-footer .info table tr:not(:first-child) > td:last-child {
    font-weight:900;
}
.main-footer .adress {
    padding: 10px 0;
    line-height: 11px;
    font-size: 11px;
    color: #b0b0b0;
    border-top: 1px #f0f0f0 solid;
}


/***list***/

.search-box {
    background-color: #f0f0f0;
    font-size: 13px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    width: 640px;
    justify-content: space-between;
    align-items: center;
}
.search-box > div {
    margin: 0 10px;
}
.search-box .form-group {
    display: flex;
    align-items: center;
    max-width: 450px;
    margin-bottom: 5px;;
}
/* .search-box .form-group .form-control {
    width: auto;
} */
.search-box .form-group label {
    width:100px;
    flex: 0 0 100px;
}
.search-box .form-group label.radio {
    margin:0;
    margin-right: 20px;
    width:auto;
    flex:0 0 auto;
    font-weight: 400;
    font-size: 11px;
}
.search-box .form-group label.radio+.radio {
    margin-top:0;
}
.search-box .form-group select+label.radio {
    margin-left:10px;
}
.search-box .form-group select {
    width:100px;
}
.search-box .form-group select~.form-control[type=text] {
    width:251px;
    margin-left:-1px;
}
.search-box .form-group .input-group.date {
    width: 170px;
}
.search-box .form-group:last-child {
    margin-bottom: 0;
}

.search-box button.search-btn, .search-box button.excel-btn {
    border: none;
    color: #fff;
    font-size: 17px;
    font-family: 'nanum square';
    padding: 5px 0;
    width: 120px;
    transition: background .2s ease;
}
.search-box button.search-btn { background-color: #ee5533;}
.search-box button.search-btn:hover { background-color: #d64c2e;}
.search-box button.excel-btn { background-color: #a0a0a0; margin-top:10px;}
.search-box button.excel-btn:hover { background-color: #009688;}
.search-box button.search-btn > i, .search-box button.excel-btn > i {
    margin-right: 5px;
}
/*작성일자/심의일자/개최일자*/
select.form-control.input-sm.label-style {
    border: 0;
    padding: 0;
    background: none;
    flex: 0 0 90px;
    width: 90px;
    margin-right: 13px;
    margin-left: -3px;
    font-size: 13px;
    font-weight: 700;
}

#search-box {
    background-color: #f0f0f0;
    margin-bottom: 20px;
    border: none;
    padding: 20px;
}
#search-box select.select-flag {
	background-color: #f5f5f5;
	border: none;
	/*border: 1px #e1e1e1 solid;*/
	font-size: 13px;
	font-weight: bold;
	/* text-decoration: underline; */
	color: #1E3C88;
	padding-left: 6px;
	cursor: pointer;
}
#search-box hr {
	border-top: 1px #ddd dashed;
}


#list .board-select { cursor:pointer; }
#list.box {
    box-shadow: none;
}
#list table th {
    border-top: 2px #005dab solid;
    border-bottom: 1px #005dab solid;
    color: #005dab;
    text-align: center;
}
#list table td { text-align: center; }
#list table td.title { text-align: left; font-weight: 700; }
#list table td.title > a {color:inherit;}
#list table td.text-left { text-align: left; }
#list table td.text-right { text-align: right; }
#list table td.link-a > a, #list table td.link-b > a {
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    padding: 0px 5px;
    border-radius: 20px;
    display: inline-block;
}
#list table td.link-a > a { background-color: #00bcd4;}
#list table td.link-a > a:hover { background-color: #005dab;}
#list table td.link-b > a { background-color: #3F51B5;}
#list table td.link-b > a:hover { background-color: #1e1e3c;}
#list table td.status-a > span { font-weight: 700; color: #787878;}
#list table td.status-a > span[data-stat="1"] { color: #787878;}
#list table td.status-a > span[data-stat="2"] { color: #FF9800;}
#list table td.status-a > span[data-stat="3"] { color: #4CAF50;}
#list table td.status-a > span[data-stat="4"] { color: #2196F3;}
#list table td.status-a > span[data-stat="5"] { color:#F44336;}

#list table td.status-b > span { font-weight: 700; background-color: #e1e1e1; padding: 2px; width: 68px; display: inline-block;}
#list table td.status-b > span[data-stat="1"] { background-color: #e1e1e1;}
#list table td.status-b > span[data-stat="2"] { background-color: #add6ea;}
#list table td.status-b > span[data-stat="3"] { background-color: #ffb0aa;}

#list table tr.important {
    background-color: #7297ab;
    color: #fff;
}
#list table tr.important a, #list table tr.important a:hover {
    background-color: rgba(255,255,255, .1);
}
#list table tr.important span[data-stat] { background: none; color: #fff; }

#list .pagination>li>a {
	border-radius: 0px!important;
}
#list .pagination>li:not(.active)>a {
    font-size:  12px;
    background: #fff;
}
#list .pagination>li:not(.active)>a:hover {
    background-color: #ddd;
}

#select .box-body {
    border: none;
}

#select .board-view {
    border-top: 1px #e1e1e1 solid;
    width: 100%;
}

#select {
    border: none;
    box-shadow: none;
}

#select .board-view tr {height: 44px;border-bottom: 1px #e1e1e1 solid;}

#select .board-view tr th {
    background-color: #f0f0f0;
    padding-right: 20px;
    width: 15%;
    text-align: right;
}

#select .board-view tr td .form-control {
    font-size: 13px;
    padding: 2px 10px;
    height: 28px;
    background-color: #fafafa;
}

#select .board-view tr td {
    padding: 5px 10px;
    background: #fff;
    width: 35%;
}

#select .board-view tr td textarea.form-control {
    resize: vertical;
}

#select .board-view tr td .form-control:focus {
    background-color: #fff;
}

#select label {font-family: 'nanum square';font-size: 17px;display: block;border-top: 2px #005dab solid;margin-top: 40px;padding-top: 5px;}

#select label::before {
    content: '\f0c6';
    font-size: 17px;
    margin-right: 5px;
    color: #787878;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.form-control.datepicker {
    border-radius: 0;
}

/*LOGIN PAGE*/
.login-page {
    background-color: #005dab;
}
.login-page::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,93,171,0.9);
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
}
.login-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 0;
}
.login-box {
    width: 480px;
    height: 260px;
    margin: 0px auto;
    margin-top: 30vh;
    overflow: hidden;
}
.login-box-body {
    background-color: transparent;
    color: #fff;
    top: 0px;
    position: relative;
    transition: all .5s ease;
}
.login-box-body > form > button[type="submit"] {
    font-family: 'nanum square';
}
.login-box-body .form-control {
    background: transparent;
    border: none;
    border-bottom: 2px #fff solid;
    color: #fff;
    font-size: 17px;
}
.login-box-body .form-control-feedback {
    color: #fff;
    font-size: 17px;
}
.login-box-body .regist {
    margin-top: 20px;
}
.login-box-body .regist > span {
    color: #fff;
}
.login-box-body .regist > a {
    color: #e1e1e1;
    font-weight: bold;
    margin-left: 10px;
}
.login-box-body .regist > a:hover {
    color: #fff;
}

.mypage-login-box-body {
    background-color: transparent;
    color: #242424;
    top: 0px;
    position: relative;
    transition: all .5s ease;
}
.mypage-login-box-body > form > button[type="submit"] {
    font-family: 'nanum square';
}
.mypage-login-box-body .form-control {
    background: transparent;
    border: none;
    border-bottom: 2px #f5f5f5 solid;
    color: #242424;
    font-size: 17px;
}
.mypage-login-box-body .form-control-feedback {
    color: #242424;
    font-size: 17px;
}
.mypage-login-box-body .regist {
    margin-top: 20px;
}
.mypage-login-box-body .regist > span {
    color: #242424;
}
.mypage-login-box-body .regist > a {
    color: #e1e1e1;
    font-weight: bold;
    margin-left: 10px;
}
.login-box-body .regist > a:hover {
    color: #242424;
}

.password_hint {
    position: absolute;
    background-color: #fff;
    color: #005dab;
    font-weight: 900;
    border: 2px #aaa solid;
    border-radius: 100px;
    padding: 5px 10px;
    pointer-events: none;
    top: -40px;
    left: 0;
    display: none;
}

.password_hint::before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    left: 30px;
    border-top: 12px solid #aaa;
    border-bottom: none;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
}

.password_hint::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    left: 34px;
    border-top: 8px solid #fff;
    border-bottom: none;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.login-box-body .form-control:focus ~ .password_hint {
    display: block;
}

.regist-btn {
    top: 0px;
    position: relative;
    transition: all .5s ease;
}
.regist-btn img {
    width: 120px;
    display: block;
    margin: 40px auto;
}
.regist-btn a {
    color: #e1e1e1;
    font-weight: bold;
}
.regist-btn a:hover {
    color:#fff
}
.regist-btn #regist-type-close {
    font-size: 24px;
    text-align: right;
}
.regist-btn #regist-type-close > i {
    color: #e1e1e1;
    cursor: pointer;
}
.regist-btn #regist-type-close > i:hover {
    color: #fff;
}
/**/
.regist-type-select > .login-box-body, .regist-type-select > .regist-btn {
    top: -100%;
}
/**/

.login-page .links {
    width: 640px;
    margin: 60px auto 0;
    text-align: center;
}
.login-page .links > a {
    display: inline-block;
    padding: 5px 25px;
    font-family: 'nanum square';
    font-size: 17px;
    margin: 0 15px;
    color: #fff;
    border: 2px #fff solid;
    border-radius: 10px;
}
.login-page .links > a:hover {
    background-color: #fff;
    color: #005dab;
}
.login-page .links > a:last-child {
    border-color: #00bcd4;
}
.login-page .links > a:last-child:hover {
    background-color: #00bcd4;
    color: #fff;
}


/*SELECT*/
.list-back {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background-color: #a0a0a0;
    color: #fff;
    font-size: 22px;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    position: relative;
    transition: all .2s ease;
}
.list-back > i {
    display: block;
    margin-top: 12px;
    transition: inherit;
}
.list-back > span {
    display: block;
    font-size: 11px;
    letter-spacing: -1.2px;
    font-weight: 900;
    margin-top: 12px;
    transition: inherit;
}
.list-back:hover, .list-back:focus {
    background-color: #005dab;
    color: #fff;
}
.list-back:hover > i {
    margin-top: -26px;
}

#selected .box-header > h3 {
    font-family: 'nanum square';
    font-weight: bold;
}
#selected .box:hover, #selected .box:focus, #selected .box:focus-within {
    border-top-color: #005dab;
}
#selected .table tr th {
    background-color: #f0f0f0;
    text-align: center;
    vertical-align: middle;
}


#loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  position:absolute;
  z-index:999999;
  top:50%;
  left:50%;
  width:100px;
  height:100px;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/**2021 메인 대쉬보드 추가부분 style sheet**/
section.dashboard-header {
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.system-title p {
    font-size: 12px;
    color: #aaa;
    font-weight: 900;
    letter-spacing: 1.2px;
    margin: 0;
}


.system-title h1 {
    color: #005dab;
    font-weight: 900;
    font-size: 44px;
    letter-spacing: -2px;
    margin: 10px 0;
    word-break: keep-all;
    animation: systemTitleShow 20s ease infinite;
}
@keyframes systemTitleShow {
    0%{
        color: #005dab;
    }
    50% {
        color: #00bcd4;
    }
    75% {
        color: #e53;
    }
    100%{
        color: #005dab;
    }
}

.system-title h1 img {
    font-size: 0;
}

.system-title h1 img:last-child {
    margin-right: 10px;
}

.connect-info {
    display: flex;
    align-items: center;
}

.connect-info .user-icon {
    position: relative;
    margin-right: 20px;
}

.connect-info .user-icon i {
    color: #149db2;
    font-size: 44px;
}

.connect-info .user-check {
    position: absolute;
    width: 22px;
    height: 22px;
    background-color: #005dab;
    border: 2px #fff solid;
    border-radius: 22px;
    bottom: -3px;
    right: -6px;
    box-sizing: border-box;
}

.connect-info .user-check::before {
    content: '';
    width: 3px;
    height: 8px;
    background-color: #fff;
    border-radius: 1.5px;
    position: absolute;
    display: block;
    top: 6px;
    left: 4px;
    transform: rotate(-45deg);
    transition: all .5s ease;
}

.connect-info .user-check::after {
    content: '';
    width: 3px;
    height: 12px;
    background-color: #fff;
    border-radius: 1.5px;
    position: absolute;
    display: block;
    top: 3px;
    left: 10px;
    transform: rotate(45deg);
    transition: all .5s ease;
}

.connect-info .user-icon:hover .user-check::before {
    content: '';
    width: 3px;
    height: 12px;
    background-color: #fff;
    border-radius: 1.5px;
    position: absolute;
    display: block;
    top: 3px;
    left: 7.25px;
    transform: rotate(0deg);
    transition: all .5s ease;
}

.connect-info .user-icon:hover .user-check::after {
    content: '';
    width: 3px;
    height: 12px;
    background-color: #fff;
    border-radius: 1.5px;
    position: absolute;
    display: block;
    top: 3px;
    left: 7.25px;
    transform: rotate(90deg);
    transition: all .5s ease;
}

.connect-info .user-info strong {
    display: block;
    font-family: 'nanum square';
    font-size: 17px;
    font-weight: 900;
    color: #333;
}

.connect-info .user-info small {
    color: #005dab;
}

.alarm-panel-wrap {
    display: flex;
    justify-content: space-between;
}

.alarm-panel {
    width: 100%;
    box-sizing: border-box;
    margin-right: 20px;
    background-color: #aaa;
    color: #fff;
    padding: 10px;
    height: 140px;
    position: relative;
    cursor: pointer;
    word-break: keep-all;
    z-index: 0;
    transition: all .3s ease;
    overflow: hidden;
}

.alarm-panel:last-child {
    margin: 0;
}

.alarm-panel:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    opacity: .1;
    z-index: -1;
    transition: all .3s ease;
}
.alarm-panel:nth-of-type(1):after { background-image: url(/assets/nyt/img/tempback01.jpg);}
.alarm-panel:nth-of-type(2):after { background-image: url(/assets/nyt/img/tempback02.jpg);}
.alarm-panel:nth-of-type(3):after { background-image: url(/assets/nyt/img/tempback03.jpg);}
.alarm-panel:nth-of-type(4):after { background-image: url(/assets/nyt/img/tempback04.jpg);}
.alarm-panel:nth-of-type(5):after { background-image: url(/assets/nyt/img/tempback05.jpg);}

.alarm-panel .number {
    font-family: 'nanum square';
    font-size: 80px;
    line-height: 1;
    font-weight: 900;
    /* display: flex; */
    align-items: center;
    transition: all .5s ease;
}

.alarm-panel .hovershow {
    display: none;
}

.alarm-panel:hover .hovershow {
    display: inline-block;
}

.alarm-panel:hover {
    background: linear-gradient(-45deg, #ee5533, #005dab, #00bcd4);
	background-size: 400% 400%;
	animation: bgHoverGradient 15s ease infinite;
}

@keyframes bgHoverGradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.alarm-panel:hover:after {
    opacity: 0;
}

.alarm-panel .number .hovershow {
    font-weight: 400;
    font-size: 18px;
    margin-left: 10px;
}

.alarm-panel:hover .number {
    font-size: 44px;
}

.alarm-panel .context {font-family: 'nanum square';font-size: 36px;margin-top: 0px;text-align: right;line-height: 1;transition: margin .5s ease;}

.alarm-panel:hover .context {text-align: left;font-size: 22px;margin-top: 5px;}

.alarm-panel:hover .hovershow {
    display: inline;
    font-size: 18px;
    margin-left: 5px;
}

.alarm-panel .hypertext {
    margin: 0 -10px;
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
    background-color: rgba(0,0,0,.25);
    position: absolute;
    bottom: -30px;
    transition: all .5s ease;
    text-align: center;
}

.alarm-panel:hover .hypertext {
    bottom: 0;
}

.alarm-panel .hypertext i {
    margin-left: 10px;
}

.payment-info {
    margin: 20px 0;
    padding: 20px 25px;
    box-sizing: border-box;
    background-color: #f0f0f0;
}

.payment-info strong {
    font-family: 'nanum square';
    font-size: 22px;
    font-weight: 400;
    color: #333;
    letter-spacing: -1px;display: inline-block;margin-bottom: 10px;
}

.payment-info strong b {
    color: #005dab;
    font-weight: 900;
}

.btn.btn-cyan {
    background-color: #149db2;
    color: #fff;
}

.btn.btn-small {
    font-size: 12px;
    font-weight: 700;
    padding: 2.5px 5px 1px;
}

.btn-inline-set .btn:not(:last-child) {
    margin-right: 15px;
}

.btn.btn-blue {
    background-color: #005dab;
    color: #fff;
}

.btn.btn-gray {
    background-color: #787878;
    color: #fff;
}

.btn.btn-lgray {
    background-color: #aaa;
    color: #fff;
}

.article-wrap {
    margin: 20px 0;
}

.article-header {
    padding: 14px 20px;
    background-color: #f0f0f0;
    position: relative;
}

.article-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.article-header .btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.article-body {
    background-color: #fafafa;
    padding: 10px 20px;
}

table.dashboard-notice tr td {
    padding: 7.5px 0;
    border-bottom: 1px #e1e1e1 solid;
}

table.dashboard-notice {width: 100%;}

table.dashboard-notice tr td.date {
    text-align: right;
    color: #aaa;
    font-size: 11px;
}

table.dashboard-notice tr td.title a {font-weight: 700;color: #333;transition: all .3s ease;}

table.dashboard-notice tr td.title a:hover {
    color: #149db2;
}

.ext-link-wrap {
    display: flex;
    justify-content: space-between;
}

.ext-link {
    width: 100%;
    border: 1px #e1e1e1 solid;
    box-sizing: border-box;
    border-radius: 5px;
    margin-right: 15px;
    margin-top: 20px;
    margin-bottom: 50px;
    height: 120px;
    position: relative;
    background: #fff;
    transition: all .5s ease;
}

.ext-link:last-child {
    margin-right: 0;
}

.ext-link a {
    width: 100%;
    height: 100%;
    display: block;
    padding: 15px;
}

.ext-header {
    font-family: 'nanum square';
    font-size: 18px;
    background-color: #666;
    color: #fff;
    border-radius: 100px;
    padding: 2px 15px;
    transition: all .5s ease;
}

.ext-header i {
    margin-left: 10px;
}

.ext-body {
    font-family: 'nanum square';
    font-size: 17px;
    letter-spacing: -1px;
    padding: 15px 5px;
    line-height: 1.2;
    box-sizing: border-box;
    word-break: keep-all;
    transition: all .5s ease;
}

.ext-link:hover {
    background-color: #2f5e86;
}

.ext-link:hover .ext-header {
    padding-left: 5px;
    background: transparent;
} 

.ext-link:hover .ext-header i {
    animation: extarrowmovement 1s ease infinite alternate;
}

@keyframes extarrowmovement {
    0% {
        margin-left: 5px;
    }
    100% {
        margin-left: 10px;
    }
}

.ext-link:hover .ext-body {
    color: #e1e1e1;
}

.deli-schedule-wrap {
    display: flex;
}

.deli-schedule {
    width: 100%;
    position: relative;
    margin-right: 30px;
    background-color: #aaa;
    color: #fff;
    box-sizing: border-box;
    padding: 10px 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    font-family: 'Nanum Square';
    font-size: 18px;
}

.deli-schedule::before {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 14px solid #fafafa;
    border-right: none;
    position: absolute;
    left: 0;
}

.deli-schedule::after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 14px solid #aaaaaa;
    border-right: none;
    position: absolute;
    right: -14px;
}

.deli-schedule.current-deli-schedule::after {
    border-left: 14px solid #2f5e86;
}
.deli-schedule.adjournment-deli-schedule::after {
    border-left: 14px solid #149db2;
}

.deli-schedule:last-child {
    margin-right: 15px;
}

.deli-schedule strong {
    font-weight: 900;
    font-size: 36px;
    margin-left: 20px;
}

.deli-schedule.current-deli-schedule {background-color: #2f5e86;}

.deli-schedule.adjournment-deli-schedule {background-color: #149db2;}

@keyframes bgHoverGradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



/*미납내역 페이지 스타일 추가 */
.unpay-list-wrap {
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    margin-right: -15px;
}

.unpay-information {
    -ms-flex: 0 0 49%;
    flex: 0 0 49%;
    max-width: 49%;
    box-sizing: border-box;
    padding: 20px;
    margin-right: 1%;
    /* border: 1px #e1e1e1 solid; */
    margin-bottom: 20px;
    background-color: #005dab;
    position: relative;
    transition: all .5s ease;
    color: #fff;
}

.unpay-list {
    -ms-flex: 0 0 24%;
    flex: 0 0 24%;
    max-width: 24%;
    margin-right: 1%;
    box-sizing: border-box;
    padding: 20px;
    /* border: 1px #e1e1e1 solid; */
    margin-bottom: 20px;
    background-color: #fafafa;
    position: relative;
    transition: all .5s ease;
}
.unpay-list:hover {
    box-shadow: 0px 15px 10px -10px rgba(0,0,0, .3);
}

.unpay-list > div:not(.unpay-title) {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 5px 0;
    border-bottom: 1px #e1e1e1 dashed;
}

.unpay-title {
    padding-bottom: 10px;
    border-bottom: 1px #333 solid;
}

.unpay-title b {
    display: block;
    margin-bottom: 5px;
}

.unpay-title span {
    display: block;
    text-align: right;
    color: #04c;
    font-weight: 900;
    font-size: 12px;
}

.unpay-cnt {
    font-family: 'nanum square';
    font-size: 17px;
    word-break: keep-all;
    border-bottom: 1px rgba(255,255,255,.25) solid;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.unpay-cnt strong {
    color: #ff0;
    font-size: 24px;
}

div[class^=unpay-total] {
    font-size: 17px;
    font-family: 'nanum square';
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

div[class^=unpay-total] b {
    font-weight: 400;
}

.unpay-total-payment {
    border-bottom: 1px rgba(255,255,255,.25) dashed;
}

.unpay-total-approval {
    border-bottom: 1px rgba(255,255,255,.25) solid;
}


i.unpayChk {
    position: absolute;
    right: 10px;
    background-color: #dd4b39;
    font-size: 11px;
    text-align: center;
    font-weight: 900;
    font-style: normal;
    width: 18px;
    height: 18px;
    border-radius: 14px;
    padding: 2px;
    animation: textBlink 1s infinite alternate;
}
@keyframes textBlink {
    0% {
        color: rgba(255,255,255,0);
    }
    100% {
        color: rgba(255,255,255,1);
    }
}











/********************************/
/*******카드결제 결과페이지********/
.payment-result-popup-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: #005dab;
}

.payment-result-popup {
    width: 100%;
    background-color: #005dab;
    color: #fff;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
}

.payment-result-popup i {
    font-size: 44px;
}

.payment-result-popup table {
    width: 100%;
    position: relative;
    border-spacing: 0;
}

.payment-result-popup table tr td {
    background-color: #fff;
    padding: 10px;
    font-family: 'Nanum Gothic';
    color: #333;
}

.payment-result-popup table tr td:first-child {
    font-weight: 900;
    text-align: right;
    padding-right: 30px;
}

.payment-result-popup table::after {
    display: block;
    position: absolute;
    content: '';
    width: 100%;
    height: 8px;
    left: 0;
    /* background-color: #aaa; */
    /* background-color: #e5e5f7; */
    /* opacity: 0.2; */
    background-image: radial-gradient(#005dab 6px,#ffffff 1px);
    background-size: 18px 18px;
    background-position-x: center;
    background-position-y: 18px;
}

.payment-result-popup button {
    margin-top: 20px;
    border: 0;
    padding: 10px;
    font-family: 'nanum square';
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    background-color: #FF9800;
    width: 100%;
    cursor: pointer;
}

footer.main-footer.login-footer {
    max-width: 100%;
    width: 100%;
    margin: 0;
    position: absolute;
    bottom: 0;
    background: #005dab;
}

footer.main-footer.login-footer .info {
    color: #fff;
}

footer.main-footer.login-footer .adress {
    color: #e1e1e1;
}

footer.main-footer.login-footer .table-hover>tbody>tr:hover {
    background-color: transparent;
}