@charset 'utf-8';
/* CSS Document */

/* 웹폰트(구글) 나눔고딕 400, 700 */

/* reset */
html {-webkit-text-size-adjust: none; text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body {margin: 0;}
main {display: block;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, table, blockquote {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
a {color: inherit; text-decoration: inherit;}
a img {border: none;}
img {vertical-align: middle;}
li {list-style: none;}
address, em, i, cite {font-style: normal;}
table {border-collapse: collapse;}
table caption {overflow: hidden; width: 0; height: 0;}
i.fas, i.far, i.fab {vertical-align: middle; display: inline-block;}
i.fas span, i.far span, i.fab span {position: absolute; left: -9999px;}
.mobile {display: none !important;}
br.only-m {content: '';}
br.only-m:after {content: '\00a0';}
div.hidden {position: absolute; left: -9999px;}


/* common */
body {font-family: 'Nanum Gothic', '나눔고딕', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: #000000 ; background: #ffffff;}
#wrapper {overflow: hidden; min-width: 1400px;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.7); transition: top 0.3s; z-index: 100000;}
#skip-nav:focus {top: 0;}

/* login(main) */
body.login {height: 100vh; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%);}
body.login ul.background li {position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none;}
body.login ul.background li.show {display: block; animation: main-bg-show 2s ease-out 0s 1 normal forwards;}
body.login ul.background li.hide {display: block; animation: main-bg-hide 2s ease-out 0s 1 normal forwards;}
body.login ul.background li img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;}
body.login ul.background:after {content: ''; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}

@keyframes main-bg-show {
    0% {opacity: 0; transform: rotate(-3deg) scale(0.9);}
    100% {opacity: 1; transform: rotate(0) scale(1);}
}
@keyframes main-bg-hide {
    0% {opacity: 1; transform: rotate(0) scale(1);}
    100% {opacity: 0; transform: rotate(3deg) scale(1.1);}
}


body.login #login-box {position: fixed; width: 500px; height: 300px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 3px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.8); box-sizing: border-box; background: #ffffff;}
body.login #login-box > div.left {position: absolute; left: 0; top: 0; width: 150px; height: 100%; box-sizing: border-box; background: #00bca4; color: #ffffff;}
body.login #login-box h1 {position: absolute; left: 20px; top: 40px; width: 120px;}
body.login #login-box h1 img {width: 100%;}
body.login #login-box h1 span {display: block; font-size: 13px; font-weight: 400; margin-top: 10px;}
body.login #login-box > div.right {position: absolute; right: 0; top: 0; width: 350px; height: 100%; box-sizing: border-box; padding: 35px 50px;}
body.login #login-box > div.right h2 {font-size: 28px; font-weight: 400; text-align: center; margin-bottom: 20px;}
body.login #login-box ul.form-box li + li {margin-top: 8px;}
body.login #login-box ul.form-box li input[type=checkbox] {margin-right: 5px;}
body.login #login-box ul.form-box li.button {text-align: center; margin-top: 15px;}
body.login #login-box ul.form-box div.input-group input.text {height: 34px; width: calc(100% - 34px); font-size: 14px;}
body.login #login-box ul.form-box div.input-group i {width: 34px; height: 34px; line-height: 34px; font-size: 14px;}


/* sub (common) */
#header {position: fixed; left: 0; top: 0; width: 100%; min-width: 1200px; height: 70px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); z-index: 10000;}
#header h1 {position: absolute; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.1);}
#header h1 a.logo {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); font-size: 1px;}
#header h1 a.logo img {max-width: 160px; max-height: 50px;}
#header h1 a.logo span {font-size: 11px; color: #ffffff; position: absolute; left: 50px; bottom: -3px;}
#header h1 a.open {position: absolute; width: 22px; height: 22px; border-radius: 3px; right: 15px; top: 50%; transform: translate(0, -50%); font-size: 13px; color: rgba(255, 255, 255, 0.5); transition: all 0.3s;}
#header h1 a.open i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#header h1 a.open:hover {color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.1);}
#header div.user {position: absolute; left: 280px; top: 50%; transform: translate(0, -50%);}
#header div.user a {display: block;}
#header div.user a span.face {display: inline-block; width: 40px; height: 40px; border-radius: 100px; overflow: hidden; position: relative; vertical-align: middle; margin-right: 10px;}
#header div.user a span.face img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%;}
#header div.user a em.name {color: #ffffff; font-size: 14px;}
#top-menu {position: absolute; right: 30px; top: 50%; transform: translate(0, -50%);}
#top-menu > li {float: left; position: relative;}
#top-menu > li + li {margin-left: 8px;}
#top-menu > li > a {display: block; width: 40px; height: 40px; color: #ffffff; font-size: 18px; position: relative; border-radius: 4px; border: 2px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); transition: all 0.3s ease-in-out 0s;}
#top-menu > li > a:hover {background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.95);}
#top-menu > li > a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#top-menu ul {position: absolute; left: 0; top: 50px; background: #ffffff; border: 2px solid #dfe8f1; border-radius: 10px; width: 200px; padding: 10px; box-sizing: border-box; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); display: none;}
#top-menu > li.on > ul {display: block;}
#top-menu ul:before {content: ''; position: absolute; left: 10px; top: -20px; border: 10px solid transparent; border-bottom-color: #dfe8f1;}
#top-menu ul:after {content: ''; position: absolute; left: 10px; top: -17px; border: 10px solid transparent; border-bottom-color: #ffffff;}
#top-menu ul.company li + li {margin-top: 5px;}
#top-menu ul.company li a {display: block; position: relative; line-height: 30px; padding-left: 90px; border-radius: 3px; border: 1px solid transparent; transition: all 0.3s;}
#top-menu ul.company li a:hover {border-color: #dfe8f1;}
#top-menu ul.company li a img {position: absolute; max-width: 70px; max-height: 30px; left: 10px; top: 50%; transform: translate(0, -50%);}



#gnb {position: fixed; left: 0; top: 70px; width: 250px; height: calc(100vh - 70px); padding: 25px 20px; box-sizing: border-box; background: #ffffff; z-index: 1000; overflow: hidden; color: #8da0aa; font-size: 13px;}
#gnb > nav {padding-bottom: 100px;}
#gnb > nav h3 {font-size: 13px; color: #000000; margin-bottom: 10px;}
#gnb > nav h3.on {color: #1c82e1;}
#gnb ul.nav {margin-bottom: 15px;}
#gnb ul.nav > li > a {position: relative; display: block; line-height: 33px; border: 1px solid transparent; border-radius: 3px; transition: all 0.3s; overflow: hidden; padding: 0 20px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#gnb ul.nav > li + li {margin-top: 3px;}
#gnb ul.nav > li > a > i:first-child {margin-right: 10px; color: #0093d9; opacity: 0.6;}
#gnb ul.nav > li > a > i:last-child {position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); opacity: 0.6; transition: all 0.3s;}
#gnb ul.nav > li > a:hover {color: #1c82e1; border-color: #d1d9dd; text-decoration: underline;}
#gnb ul.nav > li > a:hover > i:first-child {animation: gnb-icon 0.8s ease-in 0s 1 normal forwards; transition: all 0.3s;}
#gnb ul.nav > li > ul {overflow: hidden; height: 0; transition: height 0.3s;}
#gnb ul.nav > li.on > a {color: #1c82e1; border-color: #d1d9dd;}
#gnb ul.nav > li.open > a {color: #1c82e1; border-color: #d1d9dd;}
#gnb ul.nav > li.open > a > i:last-child {transform: translate(0, -50%) rotate(90deg);}
#gnb ul.nav > li > ul > li {border: 1px solid #f8f9fa;}
#gnb ul.nav > li > ul > li:first-child {border-top-left-radius: 3px; border-top-right-radius: 3px; margin-top: 10px;}
#gnb ul.nav > li > ul > li:last-child {border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; margin-bottom: 5px;}
#gnb ul.nav > li > ul > li + li {border-top: none;}
#gnb ul.nav > li > ul > li > a {position: relative; display: block; line-height: 30px; padding: 0 10px 0 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
#gnb ul.nav > li > ul > li > a:before {content: ''; position: absolute; width: 6px; height: 6px; left: 12px; top: 50%; transform: translate(0, -50%); border-radius: 10px; background: #333333; opacity: 0.3; transition: all 0.3s;}
#gnb ul.nav > li > ul > li.on > a {color: #1c82e1; background: #fcfdfe;}
#gnb ul.nav > li > ul > li > a:hover {color: #1c82e1; background: #fcfdfe; text-decoration: underline;}
#gnb ul.nav > li > ul > li.on > a:before,
#gnb ul.nav > li > ul > li > a:hover:before {background: #1c82e1;}
@keyframes gnb-icon {
    0% {transform: rotate(0);}
    20% {transform: rotate(15deg);}
    40% {transform: rotate(-12deg);}
    60% {transform: rotate(9deg);}
    80% {transform: rotate(-6deg);}
    100% {transform: rotate(3deg);}
}



body.sub {background: #fafcfe;}
body.sub #main {margin: 70px 0 0 250px; padding: 30px 30px 100px 30px; background: #fafcfe; min-height: calc(100vh - 100px); box-sizing: border-box;}
body.sub #main h2 {font-size: 28px; font-weight: 400;}
body.sub #main h2 + p {font-size: 13px; margin-top: 5px; opacity: 0.6; margin-bottom: 30px;}

#footer {position: relative; line-height: 30px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); color: #ffffff; margin-left: 250px; text-align: center; font-size: 12px;}


/* 거래명세서(매출 / 출력용) */
div.statement-header {overflow: hidden;}
div.statement-header > div {float: left;}
div.statement-header > div.section-1 {width: 25%;}
div.statement-header > div.section-2 {width: 30%; text-align: center; padding-top: 30px;}
div.statement-header > div.section-2 h1 {font-size: 30px;}
div.statement-header > div.section-2 h1 span {font-size: 12px; font-weight: 400; display: block; margin-top: 10px;}
div.statement-header > div.section-3 {width: 45%;}
div.statement-footer {margin-top: 20px; font-size: 14px; text-align: center;}
div.statement-footer p + p {margin-top: 10px;}
div.statement-footer p em {font-weight: 700; color: #ff0000; margin-left: 20px;}

/* 지출결의서 (매입 / 출력용) */
div.spending-header-1 {overflow: hidden;}
div.spending-header-1 > div {float: left;}
div.spending-header-1 > div.section-1 {width: 30%;}
div.spending-header-1 > div.section-1 p {width: 150px; margin-top: 40px;}
div.spending-header-1 > div.section-1 p img {width: 100%;}
div.spending-header-1 > div.section-2 {width: 40%; text-align: center;}
div.spending-header-1 > div.section-2 h1 {font-size: 30px; margin-top: 30px;}
div.spending-header-1 > div.section-3 {width: 30%;}
div.spending-header-2 {overflow: hidden;}
div.spending-header-2 > div {float: left;}
div.spending-header-2 > div.section-1 {width: 50%; text-align: center; padding-top: 20px;}
div.spending-header-2 > div.section-1 p {font-size: 14px; line-height: 30px;}
div.spending-header-2 > div.section-2 {width: 50%;}
div.spending-header-3 {overflow: hidden; border: 2px solid #cccccc; border-bottom: none; text-align: center;}
div.spending-header-3 > p {float: left; line-height: 80px; font-size: 20px; font-weight: 700;}
div.spending-header-3 > p.ko {width: 60%;}
div.spending-header-3 > p.digit {width: 40%;}

div.spending-footer {margin-top: 30px; font-size: 14px; text-align: center; line-height: 30px;}
div.spending-footer p.apply {margin-top: 20px; text-align: right; border-bottom: 2px solid #cccccc; letter-spacing: 10px;}

/* module */

/* layout */
section.layout {margin: 20px 0;}
section.layout:after {content: ''; display: block; clear: both;}
section.layout h3 {font-size: 16px; font-weight: 400; opacity: 0.7; margin-bottom: 15px;}
section.layout h4.title {position: relative; font-size: 15px; margin-top: 30px; margin-bottom: 10px; padding-left: 20px;}
section.layout h4.title:before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 6px; height: 6px; border: 3px solid #dfe8f1; border-radius: 30px;}
section.layout > section.layout-box {position: relative; border: 1px solid #dfe8f1; background: #ffffff; border-radius: 3px; min-height: 100px; box-sizing: border-box; padding: 15px 20px;}
section.layout.col2 > section.layout-box {float: left; width: calc(50% - 10px);}
section.layout.col2 > section.layout-box + section.layout-box {margin-left: 20px;}
section.layout.col2-1 > section.layout-box {float: left;}
section.layout.col2-1 > section.layout-box:first-child {width: calc(66% - 10px);}
section.layout.col2-1 > section.layout-box + section.layout-box {margin-left: 20px; width: calc(34% - 10px);}
section.layout.col1-2 > section.layout-box {float: left;}
section.layout.col1-2 > section.layout-box:first-child {width: calc(34% - 10px);}
section.layout.col1-2 > section.layout-box + section.layout-box {margin-left: 20px; width: calc(66% - 10px);}
section.layout.col3 > section.layout-box {float: left; width: calc(34% - 10px);}
section.layout.col3 > section.layout-box:nth-child(2) {width: calc(32% - 20px);}
section.layout.col3 > section.layout-box + section.layout-box {margin-left: 20px;}
@media screen and (max-width: 1100px) {
    #main section.layout > section.layout-box {float: none; width: 100%; margin: 0;}
    #main section.layout > section.layout-box + section.layout-box {margin-top: 20px;}
}

section.layout .btn.doc {position: absolute; right: 20px; top: 20px;}


/* button */
div.button-box {text-align: right; overflow: hidden; clear: both;}
section + div.button-box {margin-top: 20px; margin-bottom: -10px;}
div.button-box + div.button-box {margin-top: 10px;}
div.button-box.left {text-align: left;}
div.button-box.center {text-align: center;}
div.button-box.right {text-align: right;}
table.summary + div.button-box {margin-top: 10px;}
.btn {position: relative; display: inline-block; box-sizing: border-box; min-width: 120px; height: 30px; line-height: 28px; padding: 0 0.8em; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; overflow: hidden; text-align: center; vertical-align: middle; background: #999999; color: #ffffff; font-family: inherit; font-size: 13px; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color 0.3s;}
.btn > span {position: relative; z-index: 10;}
.btn:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: background-color 0.3s, box-shadow 0.2s; z-index: 3;}
.btn:not(.disabled):hover {border-color: rgba(0, 0, 0, 0.4);}
.btn:not(.disabled):hover:before {background-color: rgba(255, 255, 255, 0.2);}
.btn.hidden {display: none;}
/* .btn:active:before {box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4) inset;} */

/* options */
.btn.icon i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1em; z-index: 5;}
.btn.icon > span {position: absolute; left: -999px;}
.btn.full {width: 100%;}
.btn.round {border-radius: 100px;}
.btn.left {float: left; margin-right: 3px;}
.btn.disabled {cursor: no-drop; opacity: 0.5;}
/* size */
.btn.small {min-width: 70px; height: 24px; line-height: 22px; font-size: 11px;}
.btn.medium {min-width: 90px; height: 30px; line-height: 28px; font-size: 13px;}
.btn.large {min-width: 120px; height: 38px; line-height: 36px; font-size: 15px;}
.btn.x-large {min-width: 160px; height: 46px; line-height: 44px; font-size: 18px;}
.btn.small.icon {min-width: 24px; padding: 0;}
.btn.medium.icon {min-width: 30px; padding: 0;}
.btn.large.icon {min-width: 38px; padding: 0;}
.btn.x-large.icon {min-width: 46px; padding: 0;}
/* color */
.btn.default {background: #fefefe; color: #555a60;}
.btn.blue {background: #3498db; color: #ffffff;}
.btn.sky {background: #65a6ff; color: #ffffff;}
.btn.red {background: #e74c3c; color: #ffffff;}
.btn.orange {background: #e67e22; color: #ffffff;}
.btn.green {background: #00bca4; color: #ffffff;}
.btn.azure {background: #41e5c0; color: #ffffff;}
.btn.black {background: #2d2d2d; color: #ffffff;}
.btn.yellow {background: #ffcc00; color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);}
.btn.purple {background: #984dff; color: #ffffff;}
.btn.gray {background: #dfe8f1; color: #555a60;}
.btn.dark {background: #999999; color: #ffffff;}
/* icon left/right */
.btn.icon-left {padding-left: 3em;}
.btn.icon-left:after {content: ''; position: absolute; left: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; background: rgba(255, 255, 255, 0.4); z-index: 5;}
.btn.icon-left i {position: absolute; left: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; z-index: 5; border-right: 1px solid rgba(0, 0, 0, 0.05);}
.btn.icon-right {padding-right: 3em;}
.btn.icon-right:after {content: ''; position: absolute; right: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; background: rgba(255, 255, 255, 0.4); z-index: 5;}
.btn.icon-right i {position: absolute; right: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; z-index: 5; border-left: 1px solid rgba(0, 0, 0, 0.05);}
/* click 효과 */
.btn span.circle {position: absolute; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 200px; background: rgba(0, 0, 0, 0.2); animation: btn-circle-animation 0.6s ease-out 0s 1 normal forwards; z-index: 0;}
@keyframes btn-circle-animation {
    0% {opacity: 1; transform: translate(-50%, -50%) scale(0);}
    100% {opacity: 0; transform: translate(-50%, -50%) scale(1);}
}


/* form */
table.form-box {width: 100%; font-size: 13px; border-top: 1px dashed #cccccc; line-height: 1.4em;}
table.form-box > tbody > tr > td {border-bottom: 1px dashed #cccccc; box-sizing: border-box; padding: 6px 10px;}
table.form-box > tbody > tr > td.th {color: #000000; text-align: right; width: 150px; font-weight: 700; line-height: 30px;}
table.form-box > tbody > tr > td.th label em {color: #e74c3c; margin-right: 6px; vertical-align: top;}
table.form-box > tbody > tr > td.th span {display: inline-block; line-height: 1.5em; vertical-align: top;}
table.form-box > tbody > tr > td > div.long {line-height: 1.5em; margin: 5px 0;}
table.form-box > tbody > tr > td > div.line + div.line {margin-top: 5px; overflow: hidden;}
table.form-box span.desc {font-size: 12px; color: #e74c3c; margin-left: 10px;}
table.form-box p.desc {font-size: 12px; color: #e74c3c; margin-top: 5px;}

table.cell-table {width: 100%; font-size: 13px; border: 2px solid #cccccc; font-size: 12px;}
table.cell-table > tbody {border-top: 2px solid #cccccc;}
table.cell-table > tfoot {border-top: 2px solid #cccccc;}
table.cell-table th,
table.cell-table td {border: 1px solid #cccccc; box-sizing: border-box; padding: 3px 5px; text-align: center; position: relative; line-height: 30px;}
table.cell-table td.left {text-align: left;}
table.cell-table td.right {text-align: right;}
table.cell-table td.top {vertical-align: top;}
table.cell-table th {background: #edf1f5;}
table.cell-table th span {display: block; line-height: 1.5em;}
table.cell-table td em {font-size: 14px; font-weight: 700; color: #e74c3c; vertical-align: middle;}
table.cell-table td em input {font-size: 14px; font-weight: 700; color: #e74c3c;}
table.cell-table p.no-data {color: #8da0aa;}
table.cell-table p.no-data i {color: #ffcc00; margin-right: 5px;}
table.cell-table div.long {line-height: 1.5em;}
table.cell-table a.edit-auto {position: absolute; right: 0; top: 50%; transform: translate(0, -100%); width: 18px; height: 18px; box-sizing: border-box; line-height: 0; text-align: center; font-size: 9px; border-radius: 30px; overflow: hidden; background: #ffcc00; color: #ffffff;}
table.cell-table a.edit-auto i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;}
table.cell-table a.edit-auto i:first-child {display: inline;}
table.cell-table a.edit-auto.on i:first-child {display: none;}
table.cell-table a.edit-auto.on i + i {display: inline;}
table.cell-table div.function-set {position: relative;}
table.cell-table div.function-set ul {position: absolute; top: 50%; right: -40px; transform: translate(0, -50%); border: 2px solid #e0e0e0; border-radius: 8px; padding: 5px 4px; background: rgba(255, 255, 255, 0.8); z-index: 100; display: none;}
table.cell-table div.function-set.on > a + ul {display: block;}
table.cell-table div.function-set ul:before {content: ''; position: absolute; left: -20px; top: 50%; transform: translate(0, -50%); border: 10px solid transparent; border-right-color: #e0e0e0;}
table.cell-table div.function-set ul:after {content: ''; position: absolute; left: -17px; top: 50%; transform: translate(0, -50%); border: 10px solid transparent; border-right-color: #ffffff;}
table.cell-table div.function-set ul li + li {margin-top: 2px;}
table.cell-table + div.button-box {margin-top: 5px;}

.form-box input.text,
.form-box select,
.form-box textarea {display: inline-block; box-sizing: border-box; border: 1px solid #dfe8f1; border-radius: 3px; vertical-align: middle; outline: none; font-family: inherit; font-size: inherit; transition: border-color ease-in-out 0.2s 0s, box-shadow ease-in-out 0.2s 0s; margin: 0; background-color: #ffffff !important; -webkit-appearance: none; appearance: none;}
.form-box input.text {width: 180px; height: 30px; padding: 0 8px;}
.form-box select {height: 30px; padding-left: 8px; padding-right: 25px; background: url(/img/common/icon_select.png) right 5px center no-repeat; background-size: 12px auto;}
.form-box select::-ms-expand {display: none;}
.form-box textarea {width: 100%; min-height: 120px; padding: 8px;}
.form-box input.text:focus,
.form-box select:focus,
.form-box textarea:focus {border-color: #3da6ff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.075) inset, 0 0 5px 0 rgba(102, 175, 233, 0.5);}
.form-box input[type=radio],
.form-box input[type=checkbox] {vertical-align: middle; margin: 0; display: inline-block;}
.form-box input[type=file] {display: block; font-family: inherit; font-size: 13px;}
.form-box input.full {width: 100%;}
.form-box input.half {width: calc(50% - 2px); float: left;}
.form-box input.half + input.half {margin-left: 4px;}
.form-box input.normal {width: 180px;}
.form-box input.middle {width: 120px;}
.form-box input.short {width: 80px;}
.form-box input.year,
.form-box input.month,
.form-box input.date {width: 100px;}
.form-box input.datetime-hour,
.form-box input.datetime-min {width: 140px;}
::placeholder {color: #dfe8f1;}

/* 숫자 조정 */
.form-box input[data-type="int"],
.form-box input[data-type="int-plus"],
.form-box input[data-type="real"],
.form-box input[data-type="real-plus"] {text-align: right;}
.form-box input[data-type|="percent"] {text-align: right;}




ul.input-list {display: inline-block; vertical-align: middle;}
ul.input-list:after {content: ''; display: block; clear: both;}
ul.input-list > li {float: left; margin-right: 30px; height: 30px; line-height: 30px;}
ul.input-list > li > input {vertical-align: middle; margin: 0;}
ul.input-list > li > label {display: inline-block; vertical-align: middle; padding-left: 5px;}

div.input-group {position: relative; display: inline-block; vertical-align: middle;}
div.input-group > * {float: left;}
div.input-group > i {position: relative; z-index: 5; width: 30px; height: 30px; line-height: 28px; box-sizing: border-box; background: #fafcfe; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; color: #999999;}
div.input-group > label {position: relative; z-index: 5; height: 30px; line-height: 28px; box-sizing: border-box; padding: 0 8px; background: #fafcfe; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; color: #999999; font-size: 12px;}
div.input-group.left > *:first-child {border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;}
div.input-group.left > *:last-child {border-top-left-radius: 0; border-bottom-left-radius: 0;}
div.input-group.left > a.btn {border-right: 1px solid rgba(0, 0, 0, 0.2);}
div.input-group.right > *:first-child {border-top-right-radius: 0; border-bottom-right-radius: 0;}
div.input-group.right > *:last-child {border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none;}
div.input-group.right > a.btn {border-left: 1px solid rgba(0, 0, 0, 0.2);}
div.input-group.full {width: 100%;}
div.input-group.full > input,
div.input-group.full > select {width: calc(100% - 30px);}


/* list page */
ul.search-list {position: relative; overflow: hidden;}
ul.search-list:after {content: ''; display: block; clear: both;}
ul.search-list > li {float: left; width: 33.3%; margin-bottom: 6px;}
ul.search-list > li.half {width: 50%;}
ul.search-list > li.two-thirds {width: 66.6%;}
ul.search-list > li.full {width: 100%;}
ul.search-list > li > * {display: inline-block; vertical-align: middle;}
ul.search-list > li > label:first-child,
ul.search-list > li > span.label {float: left; min-width: 80px; height: 30px; line-height: 28px; box-sizing: border-box; padding: 0 8px; background: #fafcfe; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; color: #999999; font-size: 12px; vertical-align: middle; margin-right: 10px;}
ul.search-list + div.button-box {margin-top: 5px;}
ul.search-list + div.button-box a.column i {transition: transform 0.3s;}
ul.search-list + div.button-box a.column.reverse i {transform: rotate(180deg);}
ul.search-list + div.button-box a.detail i {transition: transform 0.3s;}
ul.search-list + div.button-box a.detail.reverse i {transform: rotate(180deg);}

section.select-column {overflow: hidden; height: 0; transition: all 0.3s; margin-bottom: -20px;}
section.select-column ul.input-list input.fixed {opacity: 0.5;}
section.select-column ul.input-list input.fixed + label {color: #e74c3c;}
section.select-column ul.input-list li a.sort {position: relative; display: inline-block; vertical-align: middle; width: 16px; line-height: 16px; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; margin-left: 5px; color: #dfe8f1;}
section.select-column ul.input-list li a.sort.asc,
section.select-column ul.input-list li a.sort.desc {border-color: #ffcc00;}
section.select-column ul.input-list li a.sort i {display: none;}
section.select-column ul.input-list li a.sort.no i:nth-child(1) {display: inline;}
section.select-column ul.input-list li a.sort.asc i:nth-child(2) {display: inline; color: #ffcc00;}
section.select-column ul.input-list li a.sort.desc i:nth-child(3) {display: inline; color: #ffcc00;}
section.select-column ul.input-list li a.sort span.order {position: absolute; right: -10px; top: -10px; width: 14px; height: 14px; text-align: center; line-height: 14px; color: #ffffff; background: #e74c3c; font-size: 10px; border-radius: 40px;}
section.select-column ul.input-list li a.sort.no span.order {display: none;}

section.select-column div.button-box {position: absolute; right: 15px; top: 15px;}

div.list-info {position: absolute; left: 130px; top: 16px; text-align: right; width: calc(100% - 150px);}
div.list-info p.list {font-size: 12px; position: absolute; left: 0; top: 0;}
div.list-info p.list em {color: #e74c3c; font-weight: 700;}
div.list-info p.list span.page {margin-left: 10px;}
div.list-info p.page-type > a {display: inline-block; margin-left: 2px;}

div.table-scroll {border: 1px solid #dfe8f1; overflow: auto; max-height: 500px;}
div.table-scroll > div.box {position: relative; overflow: hidden;}
div.table-scroll > div.box div.fixed-left {position: absolute; left: 0; top: 0; width: 100%; border-right: 1px solid #dfe8f1; overflow: hidden; z-index: 10;}
div.table-scroll > div.box div.fixed-left-top {position: absolute; left: 0; top: 0; width: 100%; border-right: 1px solid #dfe8f1; overflow: hidden; z-index: 30;}
table.list {width: 100%; font-size: 12px; border: 1px solid #dfe8f1; box-sizing: border-box; background: #ffffff;}
table.list colgroup col.hidden {display: none;}
table.list th,
table.list td {text-align: center; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; line-height: 24px; padding: 5px 5px; max-width: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}
table.list th.hidden,
table.list td.hidden {display: none;}
table.list thead {background: #edf1f5; font-size: 12px;}
table.list thead th {border: 1px solid #cccccc;}
table.list thead th[colspan] {line-height: 18px;}
table.list thead tr + tr th {line-height: 18px;}
table.list thead tr.sum {background: #fcdcbb;}
table.list tbody tr:nth-child(2n) {background: #f9f9f9;}
table.list tbody tr.sum {background: #ffffe0; font-weight: bold; font-size: 13px;}
table.list tbody td[rowspan] {border-right: 1px solid #dfe8f1;}
table.list tfoot {background: #ffffe0;}
table.list td.long {text-align: left; padding-left: 20px;}
table.list td.long > * {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
table.list td a.link {display: block; transition: all 0.3s;}
table.list td a.link:hover {color: #00ceb4; border-color: #00ceb4;}
table.list .image {position: relative; display: block; border: 1px solid #dfe8f1; overflow: hidden; box-sizing: border-box; background: #ffffff; height: 50px; text-align: center;}
table.list .image img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%;}
table.list p.no-data {color: #8da0aa;}
table.list p.no-data i {color: #ffcc00; margin-right: 5px;}
table.list.fixed-header {position: absolute; left: 0; top: 0; z-index: 20;}
table.list.fixed-left tbody tr {background: #ffffe0;}

table.summary {width: 100%; font-size: 13px; border: 2px solid #cccccc; font-size: 13px; margin-bottom: 10px;}
table.summary > tbody {border-top: 2px solid #cccccc;}
table.summary > tbody tr.sum {background: #ffffe0;}
table.summary > tbody tr.sum th {background: #ffffe0;}
table.summary > tfoot {border-top: 2px solid #cccccc;}
table.summary th,
table.summary td {border: 1px solid #cccccc; box-sizing: border-box; padding: 3px 5px; text-align: center; line-height: 24px; position: relative;}
table.summary th {background: #edf1f5;}
table.summary td.left {text-align: left;}
table.summary td.right {text-align: right;}
table.summary td em {font-size: 14px; font-weight: 700; color: #e74c3c;}
table.summary div.long {line-height: 1.5em;}
table.summary td.cut {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px;}
table.summary td.content {vertical-align: top; text-align: left;}
table.summary p.no-data {color: #8da0aa;}
table.summary p.no-data i {color: #ffcc00; margin-right: 5px;}
table.summary td span.stamp {position: absolute; right: 0; top: 0; width: 60px;}
table.summary td span.stamp img {width: 100%;}
table.summary span.up {color: #ff0000;}
table.summary span.down {color: #65a6ff;}

p.header {position: relative; margin-bottom: 10px;}
p.header span.logo img {height: 30px;}
p.header span.date {position: absolute; right: 0; bottom: 0;}


div.pagination {text-align: center; margin-top: 15px;}
div.pagination > div.box {display: inline-block;}
div.pagination a {display: inline-block; min-width: 32px; height: 32px; padding: 0 5px; box-sizing: border-box; text-align: center; line-height: 30px; font-size: 13px; color: #8da0aa; vertical-align: middle; transition: all 0.2s; border: 1px solid #dfe8f1; border-right: none;}
div.pagination a:hover {background: rgba(0, 0, 0, 0.05); color: #000000;}
div.pagination a.disabled {color: #cccccc; cursor: default;}
div.pagination a.disabled:hover {background: inherit; color: #cccccc;}
div.pagination > div.box > a {float: left;}
div.pagination > div.box > a.first {border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
div.pagination > div.box > a.last {border-right: 1px solid #dfe8f1; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
div.pagination ol {float: left;}
div.pagination ol > li {float: left;}
div.pagination ol > li.on > a {background: #00ceb4; color: #ffffff; border-right: 1px solid rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.2); cursor: default;}


/* view page */
ul.tag-list {display: inline-block; vertical-align: middle;}
ul.tag-list li {position: relative; float: left; min-width: 90px; padding: 0 10px; height: 30px; line-height: 28px; border: 1px solid #dfe8f1; border-radius: 100px; box-sizing: border-box; margin-right: 10px; text-align: center; vertical-align: middle; background: #f9fafe; font-size: 12px;}
ul.tag-list li a.del {color: #e74c3c; vertical-align: middle; margin-left: 10px; font-size: 16px; position: relative; top: -2px;}



/* popup */
#popup-wrapper {height: 100vh; padding: 60px 0 30px 0; box-sizing: border-box; overflow: hidden; background: #fafcfe;}
#popup-header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); z-index: 10000; color: #ffffff;}
#popup-header h1 {position: absolute; left: 30px; top: 50%; transform: translate(0, -50%); font-size: 24px;}
#popup-header a.close {position: absolute; right: 30px; top: 50%; transform: translate(0, -50%); font-size: 30px;}
#popup-main {height: 100%; box-sizing: border-box; overflow: auto; padding: 20px 20px 50px 20px;}
#popup-main section.layout {margin: 10px 0;}
#popup-main section.layout p.unit {text-align: right; margin-bottom: 5px;}
#popup-footer {position: fixed; left: 0; bottom: 0; width: 100%; height: 30px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); z-index: 10000; color: #ffffff; font-size: 12px;}
#popup-footer p.copyright{line-height: 30px; margin-left: 30px;}
#popup-footer img.logo {height: 24px; position: absolute; right: 30px; top: 50%; transform: translate(0, -50%);}

#popup-main table.summary th,
#popup-main table.summary td {font-size: 11px; line-height: 20px;}
#popup-main table.cell-table th,
#popup-main table.cell-table td {font-size: 11px; line-height: 22px;}
#popup-main table.cell-table tr.total th {font-size: 14px; line-height: 26px;}
body.statistics_year #popup-main table.summary th,
body.statistics_year #popup-main table.summary td {font-size: 11px; line-height: 1.6em; padding: 2px 5px;}
@media print{
    #skip-nav {display: none;}
    #popup-wrapper {height: auto; padding: 0;}
    #popup-header {display: none;}
    #popup-main {padding: 0; height: auto;}
    #popup-main div.button-box {display: none;}
    #popup-main section.layout {border: none; padding: none;}
    #popup-main section.layout-box {border: none; padding: none;}
    #popup-main section.layout h3.title {font-size: 18px; font-weight: 700; text-align: center; line-height: 44px; border: 2px solid #e0e0e0;}
    #popup-main section.layout p.unit {font-size: 9px;}
    #popup-main table.summary,
    #popup-main table.summary tbody,
    #popup-main table.summary tfoot {border-width: 1px;}
    #popup-main table.summary th,
    #popup-main table.summary td {font-size: 9px; line-height: 1.5em; padding: 3px 5px;}
    #popup-main table.summary td.long {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px;}
    #popup-main table.cell-table th,
    #popup-main table.cell-table td {font-size: 9px; line-height: 16px;}
    #popup-main table.cell-table tr.total th {font-size: 12px; line-height: 22px;}
    #popup-footer {display: none;}

    body.statistics_year #popup-main table.summary th,
    body.statistics_year #popup-main table.summary td {font-size: 7px; line-height: 1.3em; padding: 2px 5px;}
}

table.doc-title {width: 100%; font-size: 13px; border: 2px solid #cccccc; font-size: 13px; margin-bottom: 10px;}
table.doc-title > tbody {border-top: 2px solid #cccccc;}
table.doc-title th,
table.doc-title td {border: 1px solid #cccccc; box-sizing: border-box; padding: 3px 5px; text-align: center; vertical-align: middle;}
table.doc-title td.title h3 {font-size: 24px; font-weight: 700; margin-bottom: 0; padding: 20px 0;}
table.doc-title td.title h3 span {display: block; font-size: 13px; font-weight: 400; margin-top: 5px;}
table.doc-title tbody tr:nth-child(2) td {height: 64px; width: 10%;}





/*
animation 축약 표현
animation: main-bg-animation 3s ease-out 0.1s 1 normal forwards running;
animation: name duration timing-function delay iteration-count direction fill-mode play-state
duration: 0(default), time, initial, inherit
timing-function: ease(default), linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n, n, n, n), initial, inherit
deley: 0s(default), time, initial, inherit
direction: normal(default), reverse, alternate, alternate-reverse, initial, inherit
iteration-count: 1(default), number, infinite, initial, inherit
fill-mode: none(default), forwards, backwards, both, initial, inherit
play-state: running(default), paused, initial, inherit  (IE에서는 축약표현에 포함시 동작하지 않음, 별도로 사용)

[최종 사용 예시]
animation: main-bg-animation 3s ease-out 0s 1 normal forwards;
animation-play-state: running;

@keyframes main-bg-animation {
    0% {opacity: 1; transform: rotate(0) scale(1);}
    100% {opacity: 0; transform: rotate(-3deg) scale(1.2);}
}
*/