@charset "utf-8";

/* ==================== font ==================== */
@font-face {
	font-family:'NotoSans';
	font-style: normal;
	font-weight: 100;
	src:url(../font/NotoSansCJKkr-Light.eot);
	src:url(../font/NotoSansCJKkr-Light.eot?#iefix) format('embedded-opentype'),
		/* url(../font/NotoSansCJKkr-Light.otf) format('opentype'), 로딩속도 문제로 지원 안함 */ 
		url(../font/NotoSansCJKkr-Light.woff) format('woff');
}
@font-face {
	font-family:'NotoSans';
	font-style: normal;
	font-weight: 400;
	src:url(../font/NotoSansCJKkr-Regular.eot);
	src:url(../font/NotoSansCJKkr-Regular.eot?#iefix) format('embedded-opentype'),
		/* url(../font/NotoSansCJKkr-Regular.otf) format('opentype'), 로딩속도 문제로 지원 안함 */
		url(../font/NotoSansCJKkr-Regular.woff) format('woff');
}
@font-face {
	font-family:'NotoSans';
	font-style: normal;
	font-weight: 600;
	src:url(../font/NotoSans-Medium.eot);
	src:url(../font/NotoSans-Medium.eot?#iefix) format('embedded-opentype'),
		/* url(../font/NotoSans-Medium.otf) format('opentype'), 로딩속도 문제로 지원 안함 */
		url(../font/NotoSans-Medium.woff) format('woff');
}

/* ==================== common ==================== */
html, body, main, 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, input, textarea, input, textarea, select
{font-family:NotoSans, sans-serif !important; margin:0; padding:0; text-transform:none; box-shadow:none; box-sizing:border-box}

html, body {height:100%; width:100%; background-color:#f1f1f1; color:#586c78; font-size:12px; -webkit-text-size-adjust:none; -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0)}

[onclick] {cursor:pointer}

main {display:block}
img, fieldset {border:0}
ul, ol {list-style:none}
em, address {font-style:normal}
pre {display:block; padding:0; margin:0; font-size:12px; line-height:1.4; word-break:break-all; word-wrap:break-word; background-color:transparent; border:0; border-radius:0}
caption, legend {visibility:hidden; overflow:hidden; position:absolute; top:0; left:-9999px; width:0; height:0; font-size:0; line-height:0; text-align:left}
caption {position:static}

input[type=radio]:disabled {background:transparent}
[disabled] {background:#f5f5f5} 
[readonly] {background:#f5f5f5}

a, a:active, a:focus, button, input[type=radio]:checked, :focus {outline:none}
a {text-decoration:none; display:inline-block; word-break:break-all; white-space:normal; color:#586c78}
a:hover, a:active, a:focus, a:visited {outline:none; text-decoration:none; background:transparent; color:inherit}

.required {position:relative; margin-right:10px}
.required::after {position:absolute; content:'*'; color:#ff0000; right:-9px; padding-top:4px; box-sizing:border-box}

/* placeholder */
::-webkit-input-placeholder {color:#586c78 !important; font-family:NotoSans, sans-serif; font-size:12px}
::-moz-placeholder {color:#586c78 !important; font-family:NotoSans, sans-serif; font-size:12px; opacity:1}
:-ms-input-placeholder {color:#586c78 !important; font-family:NotoSans, sans-serif; font-size:12px}
:-moz-placeholder {color:#586c78 !important; font-family:NotoSans, sans-serif; font-size:12px; opacity:1}

.ml10 {margin-left:10px !important}
.mb5 {margin-bottom:5px !important}

.text-center {text-align:center !important}
.text-left {text-align:left !important}
.text-right {text-align:right !important}

.flex {display:flex}
.nowrap {white-space:nowrap}

/* ==================== components ==================== */
/* grid */
.row-m {display:flex; flex-wrap:wrap; margin-right:-5px; margin-left:-5px; align-items:center}
.col-m {position:relative; padding-left:5px; padding-right:5px; flex:1 auto}
.col-m-1 {width:8.3333333333%}
.col-m-2 {width:16.6666666667%}
.col-m-3 {width:25%}
.col-m-4 {width:33.3333333333%}
.col-m-5 {width:41.6666666667%}
.col-m-6 {width:50%}
.col-m-7 {width:58.3333333333%}
.col-m-8 {width:66.6666666667%}
.col-m-9 {width:75%}
.col-m-10 {width:83.3333333333%}
.col-m-11 {width:91.6666666667%}
.col-m-12 {width:100%}
.col-m-check {text-align:center; width:6.3333333333% !important}

/* input */
input[type=text], input[type=password], input[type=date] {border:1px solid #d9d9d9; height:28px; border-radius:0; font-size:12px; padding:0 5px; color:#586c78}
textarea {border:1px solid #d9d9d9; font-size:12px; padding:5px; color:#586c78}

/* select */
select {color:#586c78; height:28px; line-height:26px; border:1px solid #d9d9d9; border-radius:0; margin:0 !important; box-sizing:border-box; display:inline-block; white-space:pre; padding:0 25px 0 5px;
	-moz-appearance:none; appearance:none; -webkit-appearance:none; background:url(../images/mobile/ico-dropdown.svg) right .5em top 53% no-repeat; background-size:13px 10px; font-size:12px; vertical-align:top}
select[disabled] {opacity:1; background:#f5f5f5 url(../images/mobile/ico-dropdown-disabled.svg) right .5em top 53% no-repeat; background-size:13px 10px; color:#586c78}
select::-ms-expand {display:none}
select[multiple], select[size] {overflow:auto; height:auto; background:url(../images/mobile/ico-dropdown.svg) right .5em top 8px no-repeat; background-size:13px 10px}
select[multiple] option[disabled], select[size] option[disabled] {background:transparent !important; color:#999}

/* button */
.btn {height:28px; padding:0 15px; background:#dedede; border:none; border-radius:5px; color:#586c78; font-size:12px; margin-left:5px; cursor:pointer; white-space:nowrap}
.btn-search, .btn-primary {background:#2a59a7; color:#fff}

.segment-button {display:table; table-layout:fixed; height:28px}
.segment-item {display:table-cell; position:relative}
.segment-item input[type=radio] {position:absolute; opacity:1; z-index:3; top:0; left:0; width:100%; height:100%; opacity:0}
.segment-item .segment-text {display:block; background:#e5e5e5; height:100%; text-align:center; line-height:28px; padding:0 20px; min-width:80px}
.segment-item:first-child .segment-text {border-radius:5px 0 0 5px}
.segment-item:last-child .segment-text {border-radius:0 5px 5px 0}
.segment-item input[type=radio]:checked + .segment-text {background:#2a59a7; color:#fff}

/* datepicker */
.datepicker {display:inline-flex; align-items:center; min-width:194px}
.datepicker input[type=text] {border:1px solid #d9d9d9 !important; height:28px; border-right:none !important; padding-right:0; font-size:11px; max-width:68px; width:auto !important; background:#fff !important}
.datepicker input[type=text][disabled], .datepicker.readonly input[type=text] {background:#f5f5f5 !important}
.datepicker a {position:relative; flex:0 0 21px; display:block; height:28px; font-size:0; border:1px solid #d9d9d9; border-left:none}
.datepicker input[type=text][disabled] + a,
.datepicker.readonly input[type=text] + a {background:#f5f5f5}
.datepicker :nth-child(2) {margin-right:3px}
.datepicker :nth-child(3) {margin-left:3px}
.datepicker a::after {position:absolute; display:inline-block; content:''; width:15px; height:100%; background:url(../images/mobile/ico-calendar.svg) no-repeat 0 54%; background-size:100%}
.datepicker input[type=text][disabled] + a::after {opacity:.2}

/* calendar */
.cal_wrap {display:none; position:absolute; z-index:2; width:260px; padding:5px 5px 2px; border:1px solid #7b8594; border-radius:3px; background:#fff; font-family:tahoma; font-size:12px}
.cal_wrap .layer_close, .cal_both .layer_close {z-index:4; display:block; position:absolute; top:13px; right:5px; width:16px; height:15px; background:url(../images/button/btn_layer_close.gif); text-indent:-1000em}
.cal_date {padding:3px 0 5px; text-align:center}
.cal_date img, .cal_date select {vertical-align:middle}
.cal_date select {font:normal 14px NotoSans; border:none; appearance:none; -webkit-appearance:none; margin-right:20px; padding-right:15px; background:url(../images/common/ico__ad_dcd.gif) no-repeat 100% 50%; text-align:right}
.cal_date select::-ms-expand {display:none}
.cal_date select:nth-child(3) {margin-left:-10px}
.cal_date a:nth-child(1) {margin-right:10px}
.cal_date .layer_close {right:10px}
.cal_table {width:100%; border-collapse:collapse; background:#f7f7f7}
.cal_table th, .cal_table td {text-align:center; border:none}
.cal_table th {background:#eff7fd; border:0; padding:3px 0; border-bottom:2px; font-weight:bold; color:#77808d}
.cal_table td {padding:3px; background:#fff}
.cal_table th.sun {color:#bf0606}
.cal_table th.sat {color:#0281c0}
.cal_table td.weekend {color:#C00}
.cal_table td.pre, .cal_table td.next {color:#999}
.cal_table td:hover {background:#d7eafc; cursor:pointer}
.cal_table td.today {color:#36c}
.cal_table td.select {background:#3798f0 !important; font-weight:bold; color:#fff}
.cal_table tr.select td {background:#3798f0; color:#fff}
.cal_both {display:none; position:absolute; background:#fff; border:1px solid #7b8594; border-radius:3px}
.cal_both .cal_wrap {display:inline-block; float:left; position:relative; border:none}
.cal_wrap.cal_to {border-left:1px solid #ddd !important}
.month .cal_wrap, .month.cal_wrap {width:180px !important}
.week .cal_wrap, .week.cal_wrap {width:280px !important}
.week .cal_table tr:hover {background:#d7eafc; cursor:pointer}
.cal_table th.wk {font-weight:bold}

/* checkbox & radio */
.checkblock {position:relative; display:inline-block; padding-left:25px; min-height:20px; line-height:20px; cursor:pointer; font-size:12px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}
.checkblock.nolabel {padding-left:20px}
.checkblock:not(:last-child) {margin-right:10px}
.checkblock input {position:absolute; opacity:0; cursor:pointer; top:0; left:0}
.checkblock input + .checkmark {position:absolute; top:0; left:0; height:20px; width:20px; background-color:#fff; border:1px solid #d9d9d9; box-sizing:border-box}
.checkblock input[type=radio] + .checkmark {border-radius:50%}
.checkblock input[type=checkbox] + .checkmark {border-radius:3px}
.checkblock input[type=radio]:disabled + .checkmark {background:#f5f5f5}
.checkblock input[type=checkbox]:disabled + .checkmark {background:#f5f5f5}
.checkblock input[type=radio]:checked ~ .checkmark {background-color:#fff}
.checkblock input[type=radio]:checked:disabled ~ .checkmark {background-color:#f5f5f5}
.checkblock input[type=checkbox]:checked ~ .checkmark {background-color:#fff; border:1px solid #2a59a7}
.checkblock input[type=checkbox]:checked:disabled ~ .checkmark {background-color:#f5f5f5; border:1px solid #a6bfe7}
.checkblock .checkmark:after {content:''; position:absolute; display:none}
.checkblock input:checked ~ .checkmark:after {display:block}
.checkblock input[type=radio] + .checkmark:after {top:-1px; left:-1px; width:20px; height:20px; border-radius:50%; border:2px solid #2a59a7; box-sizing:border-box}
.checkblock input[type=radio]:disabled + .checkmark:after {border:2px solid #7d9fd6}
.checkblock input[type=checkbox] + .checkmark:after {left:6px; top:1px; width:5px; height:10px; border:solid #2a59a7; border-width:0 2px 2px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.checkblock.vertical {margin-bottom:5px; width:100% !important; margin-right:0}

/* searchable textfield */
.searchfield {display:flex; border:1px solid #d9d9d9}
.searchfield input {border:none; height:26px}
.searchfield a {flex:0 25px; font-size:0}
.searchfield a::after {content:'11'; width:25px; height:100%; display:inline-block; background:transparent url(../images/mobile/ico-search.svg) no-repeat 0 50%; background-size:75%}
.searchfield input[type=text][disabled] + a,
.searchfield input[type=text][disabled] + a {background-color:#f5f5f5}
.searchfield input[type=text][disabled] + a::after,
.searchfield input[type=text][readonly] + a::after {opacity:.17}

/* 파일첨부 */
.file-attach .no-file.add-upload .file-drag {border:1px solid #dcdcdc; background:#fff !important; border-top:0 !important; box-sizing:border-box}
.file-attach .file-list .list-control {border-bottom:1px solid #ddd; background:#fff !important; border-top:0 !important}
.file-attach .file-list ul {max-height:190px; overflow-y:auto; padding:0 !important}
.file-attach .file-list ul li:first-child {margin-top:5px; padding:3px 10px}
.file-attach .file-list ul li:last-child {margin-bottom:5px}
.file-attach .file-list .ico-file {margin-top:0 !important}
.file-attach .file-cont .file-action-area {background:#f8fafc; height:auto; padding:6px 10px}
.file-attach .file-cont .file-action-area .total_count_dn {margin:0 0 0 5px; position:relative; vertical-align:middle}
.file-attach .file-cont .file-action-area .total_count_dn:before {content:''; position:absolute; width:1px; height:12px; background:#ccc; left:0; top:5px}
.file-attach .add-upload .file-action-area .file-btn-txt {margin-left:0 !important}
.file-attach .add-upload .file-action-area .file-info,
.file-attach .add-upload .file-action-area .file-fold {top:8px !important}
.file-attach .file-action-area .file-info .total {margin-left:7px !important}
.file-attach .add-upload .file-action-area {padding:4px 10px !important; background:#f8fafc; border:1px solid #dcdcdc !important}
.file-attach .add-upload .file-list {border-top:0 !important}
.file-attach .file-action-area .file-btn-txt {margin-left:10px !important}
.file-attach .byte-area {padding-right:12px !important}
.file-attach .file-list .list-control .list-control-btn {display:inline-block; padding-top:3px}
.file-attach .default.button {height:19px !important; padding:0 7px 2px !important}
.file-attach .attach.file-upload:hover {border-color:#4f9aed !important}
.file-attach .attach.file-upload:hover button {background:#4f9aed !important; border-color:#4f9aed !important}
.file-attach .attach.file-upload:hover button span {color:#fff}
.file-attach .pop-btn {box-sizing:content-box}
.file-attach .check:not(#cssbrowser) > input[type="checkbox"] + label {height:auto; vertical-align:middle}

/* ==================== mobile contents ==================== */
/* main layout */
.mobile-wrap {display:flex; flex-direction:column; width:100%; height:100%; align-items:center; justify-content:center}
.mobile-wrap header {flex:0 0 50px; width:100%; background-color:#fff; display:flex; align-items:center; justify-content:space-between; box-shadow:0px 2px 2px rgba(0, 0, 0, .05); z-index:10}
.mobile-wrap main {flex:1 1 auto; width:100%}
.mobile-wrap footer {flex:0 0 30px; width:100%; background-color:#fff; margin-top:auto; display:flex; align-items:center; justify-content:flex-end; padding:0 20px; border-top:1px solid #f1f1f1}
/* header */
.head-logo {display:inline-block; width:67px; height:21px; margin-left:20px}
.head-logo a {display:block; width:100%; height:100%; background:url(../images/mobile/logo.svg) no-repeat 0 0; background-size:100%; font-size:0}
.head-right {display:inline-flex; margin-right:15px; align-items:center}
.head-right > span {display:inline-block; line-height:1}
.head-right .part {position:relative; padding-left:11px; margin-left:8px}
.head-right .part::after {position:absolute; top:0; left:0; content:'|'; width:1px; height:100%; display:inline-block; font-size:11px; color:#b5b5b5}
.head-right .logout {display:inline-block; width:24px; height:24px; background:url(../images/mobile/ico-logout.svg) no-repeat 0 0; background-size:cover; font-size:0; margin:0 0 0 10px}
.confidential {display:none; background:#ff8c58; border-radius:3px; color:#fff; font-size:11px; padding:4px 10px;}
.head-right > span.confidential{display:none}
/* footer */
footer a {color:#586c78; margin-left:20px}

/* main */
.main-content {display:flex; align-items:center; justify-content:center; background:linear-gradient(to top right, #013897 0%, #5084c5 40%, #9684be 90%); /* background:url(../images/mobile/bg-main.png) no-repeat 0 0; background-size:cover */}
.main-content > div {background:rgba(255, 255, 255, .8); border-radius:16px; width:200px; height:200px; margin:0 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative}
.main-content > div > a {display:flex; flex-direction:column; font-family:NotoSans, sans-serif; font-size:20px; color:#2a59a7; text-align:center; white-space:nowrap; position:absolute; bottom:25px}
.main-content > div > a::before {display:inline-block; content:''; width:95px; height:110px; font-size:20px; margin:5px auto 0}
.main-content > div > a.construction::before {background:url(../images/mobile/ico-1.svg) no-repeat 0 0; background-size:100%; width:102px; margin:-5px auto 10px}
.main-content > div > a.observation::before {background:url(../images/mobile/ico-2.svg) no-repeat 0 0; background-size:100%}
.main-content > div > a.inspection::before {background:url(../images/mobile/ico-3.svg) no-repeat 0 0; background-size:100%}
.main-content > div > a.settlement::before {display:none}
.main-content > div > div {display:flex; width:100%; height:120px; margin-top:-20px}
.main-content > div > div a {flex:1 auto; font-size:17px; display:flex; flex-direction:column; align-items:center; width:50%; height:75%; position:relative}
.main-content > div > div a:not(:last-child) {border-right:1px solid #ccc}
.main-content > div > div a::before {position:absolute; left:0; top:40px; content:''; display:inline-block; width:100%; height:48px; margin-right:15px}
.main-content > div > div a.summary::before {background:url(../images/mobile/ico-4.svg) no-repeat 50% 0}
.main-content > div > div a.unfit::before {background:url(../images/mobile/ico-5.svg) no-repeat 50% 0}

/* login */
.log-wrap {position:relative; background:#fff; width:370px; padding:25px; min-height:441px}
.log-wrap a {color:#1e5ff1; display:block}
.log-wrap p.log-warning {text-align:center; color:#ff0000; margin-top:-15px; margin-bottom:10px}
.log-wrap p.logo {width:100px; height:32px; background:url(../images/mobile/logo.svg) no-repeat 0 0; background-size:100%; font-size:0; margin:0 auto 20px}
.log-wrap .txt-info {font-size:11px; background:#f8f8f8; padding:10px; border:1px solid #efefef; border-radius:5px}
.log-wrap .txt-info strong {display:block; color:#2a59a7; border-bottom:1px solid #efefef;padding-bottom:5px}
.log-wrap .txt-info li {padding-top:7px}
.log-info {margin-top:5px; text-align:center; font-size:11px; padding:10px 20px}
.log-form {display:flex; flex-direction:column; margin:0 auto}
.log-form ::placeholder {color:#444 !important; font-size:13px}
.log-form input[type=text], .log-form input[type=password], .log-form input[type=button] {background:#e5e5e5; border:0; height:40px; border-radius:20px; margin-bottom:10px; padding:0 25px; color:#586c78; width:100%}
.log-form input[type=button] {background-image:linear-gradient(to right, #2a59a7, #254e93); color:#fff; font-size:14px; margin-bottom:20px}
.log-form .otp-form {display:flex; flex-direction:row; align-items:center; justify-content:space-between; width:100%; background:#e5e5e5; margin-bottom:15px; padding-right:9px; border-radius:20px}
.log-form .otp-form > * {margin:0 !important; vertical-align:middle}
.log-form .otp-form > input[type=password] {padding-right:10px}
.log-form .otp-form > input[type=button] {padding:0 15px; font-size:11px; height:24px; background:#7b8e99; width:auto}
.log-form .otp-form > span {display:inline-block; padding:0 7px}
.log-form #passwordCheckSpan {display:block; text-align:center; margin-top:-5px; margin-bottom:10px}
.log-form .log-otp-title {position:relative; font-size:13px; margin-bottom:10px; color:#2a59a7; text-align:center}
.log-form .log-otp-title span {position:relative; background:#fff; padding:0 15px; display:inline-block}
.log-form .log-otp-title::before {position:absolute; bottom:8px; left:0; content:''; border-bottom:1px solid #e5e5e5; display:inline-block; width:100%}
/* segment button */
.log-form .segment-button {width:100%; height:40px; margin-bottom:20px}
.log-form .segment-item .segment-text {line-height:40px; background-color:#2a59a7; color:#fff}
.log-form .segment-item:not(:last-child) .segment-text {border-right:1px solid #1e4d99}
.log-form .segment-item:first-child .segment-text {border-radius:20px 0 0 20px}
.log-form .segment-item:last-child .segment-text {border-radius:0 20px 20px 0}
.log-form .segment-item input[type=radio]:checked + .segment-text {background:#1e4d99}
/* li */
.circle-list {counter-reset:circle-counter}
.circle-list li {counter-increment:circle-counter; padding-left:20px}
.circle-list li::before {margin-left: -22px; content:counter(circle-counter); background:#fff; border:1px solid #ddd; width:15px; height:15px; border-radius:50%; display:inline-block; font-size:10px; line-height:14px; color:#666; text-align:center; margin-right:5px; position:relative}
.circle-list li:last-child {margin-bottom:0}
.log-note {position:absolute; bottom:25px; left:0; min-height:350px; margin:0 25px; background:#fff; border:1px solid #efefef; display:table; box-sizing:border-box}
.log-note p {display:table-cell; vertical-align:middle; font-size:18px; text-align:center; color:#ff0000; padding:30px}
		
/* sub content */
.sub-content {display:flex; flex-direction:column; padding:15px}
.sub-content .page-title {font-size:18px; color:#555; margin-bottom:12px; line-height:1}

/* search */
.search-wrap {display:flex; position:relative; width:100%; background:#fff; padding:15px 15px 20px 5px; margin-bottom:10px}
.search-wrap .search-form {flex:1 auto; display:flex; flex-direction:column; align-items:center}
.search-wrap .search-form .row-m {flex:1 auto; width:100%}
.search-wrap .row-m:not(:last-child) {margin-bottom:10px}
.search-wrap .col-m-1 label, .search-wrap .col-m-2 label {margin-left:5px; display:inline-flex; height:28px; align-items:center; line-height:1.3}
.search-wrap .col-m input[type=text], .search-wrap .col-m select {width:100%}
.search-wrap .search-button {flex:0 0 90px; display:flex; flex-flow:column; align-items:flex-end; justify-content:center}
.search-wrap .search-button button {display:block; width:70px}
.search-wrap .search-button button:not(:last-child) {margin-bottom:10px}
.search-wrap .col-m.flex > *:not(:last-child) {margin-right:3px !important}
.search-wrap .search-toggle {position:absolute; bottom:4px; left:50%; font-size:0; display:inline-block; transform:translateX(-50%)}
.search-wrap .search-toggle .ico-toggle {display:inline-block; width:20px; height:2px; cursor:pointer; font-style:normal; text-align:center}
.search-wrap .search-toggle .collapse::after {content:''; display:inline-block; border:1px solid #ddd; background:#f1f1f1; width:20px; height:2px; border-radius:2px}
.search-wrap.collapse {padding:7px 5px 5px}

/* result */
.result-wrap {flex:1 auto; background:#fff; display:flex; flex-flow:column}
.grid-info {display:flex; flex:0 40px; align-items:center; justify-content:space-between; padding:11px 15px}
.grid-info .grid-info-right {display:flex; align-items:center}
.grid-info .grid-info-right .info-item {margin-right:10px}
.grid-info .grid-info-right .button-area {margin-bottom:-5px; margin-top:-3px; display:flex}
.grid-info .grid-info-right .button-area button {height:26px}
.info-item > span {margin-right:5px}
.info-item > span > em {padding:0 5px; color:#586c78}
.info-item .item-total + span {position:relative; padding-left:9px}
.info-item .item-total + span[class*='item-']::after {display:block; content:''; position:absolute; left:0; top:4px; width:1px; height:12px; background:#d3d3d3}
/* status */
.item-ing {color:#767dc0}
.item-approval {color:#5190c7}
.item-completed {color:#80b629}
.item-cancelled {color:#4cb7ae}
.item-rejected {color:#e58c00}
/* real grid */
.data-grid {display:flex; flex-direction:column; flex:1 auto}
.data-grid .page_navi {flex:0 38px; border-bottom:1px solid #e1e1e1}
.page_navi .page_navi_center a, .page_navi .page_navi_center font {margin: 0 7px}
.page_navi .page_navi_center img {vertical-align:middle; margin:0 5px 3px}

/* popup layout */
.mobile-pop {position:relative; display:flex; flex-direction:column; width:100%; height:100%; align-items:center; justify-content:center; background:#fff}
.mobile-pop .pop-head {flex:0 0 46px; width:100%; display:flex; align-items:center; border-bottom:1px solid #e1e1e1; padding:0 25px; position:relative}
.mobile-pop .pop-body {flex:1 1 auto; width:100%; padding:15px; overflow-y:auto; overflow-x:hidden; display:flex; flex-flow:column; background-color:#f1f1f1}
.mobile-pop .pop-foot {flex:0 0 36px; width:100%; padding:0 15px; display:flex; align-items:center; justify-content:flex-end; border-top:1px solid #e1e1e1}
.mobile-pop .pop-foot button {margin-left:5px; height:24px}
.mobile-pop .pop-close {position:absolute; top:14px; right:15px; width:20px; height:20px; font-size:0}
.mobile-pop .pop-close::after {position:absolute; content:'\2573'; color:#586c78; font-size:16px; line-height:1em}
.mobile-pop .pop-head .pop-title {font-size:17px; color:#2a59a7; font-weight:600}
.mobile-pop .pop-head .confidential {position:absolute; right:50px}
.mobile-pop .pop-body h1 {font-size:16px; color:#555; line-height:1; margin-bottom:12px; display:inline-block}
.mobile-pop .pop-body .layout-block > h1 em {color:#f16a2c; font-size:13px}
.mobile-pop .pop-body .layout-block > h1 + .button-area-head {display:flex; float:right; margin-top:-5px}
.mobile-pop .pop-body .layout-block .button-area-head {text-align:right; margin-bottom:7px}
.mobile-pop .pop-body .layout-block .layout-block__inside > h2 {font-size:14px; margin-bottom:5px; color:#2a59a7}
.mobile-pop .pop-body hr {display:none}
.mobile-pop .pop-body [class *='layout-block'] + hr, .mobile-pop .pop-body [class *='layout-block__'] > hr {display:block; border:0; height:1px; margin:10px 0}

/* modal */
.mobile-modal {position:fixed; display:flex; align-items:center; justify-content:center; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, .4)}
.mobile-modal .mobile-pop {padding:0}
.mobile-pop.large {width:950px !important; height:700px !important}
.mobile-pop.small {width:500px !important; height:500px !important}

/* pop password */
.mobile-pop.password {padding:40px 26px 30px; width:auto; height:auto}
.mobile-pop p {text-align:center}
.mobile-pop p.head {font-size:23px; color:#2a59a7; margin-bottom:30px}
.mobile-pop .log-form {width:290px}

/* input form */
.input-form {padding:10px; clear:both; background-color:#fff}
.input-form .row-m {align-items:flex-start}
.input-form .row-m:not(:last-child) {margin-bottom:10px}
.input-form .col-m input[type=text], .input-form .col-m select, .input-form .col-m textarea {width:100%}
.input-form .col-m label {display:inline-flex; align-items:center; height:28px; line-height:1.2; vertical-align:top}
.input-form .col-m label.checkblock {margin-top:5px; width:auto; height:auto}
.input-form textarea {float:left}
.input-form textarea + span.txt-count {float:right; margin-right:5px; font-size:10px}
.input-form textarea + span.txt-count > em {color:#ff0000}
.input-form .form-checked {/*font-size:12px;*/ margin-bottom:15px; font-weight:600}
.input-form .photos {margin:0; flex-wrap:nowrap}
.input-form .photos > div {position:relative; padding:0; min-height:200px; background:#f5f5f5; border:1px solid #ddd}
.input-form .photos > div::after {position:absolute; top:50%; left:50%; content:'Photo'; font-size:15px; color:#e1e1e1; transform: translate(-50%, -50%)}
.input-form .photos > div:not(:last-child) {margin-right:10px}
.input-form .photos > div img {width:100%; height:100%; position:absolute; z-index:10}

/* approval */
.approval-wrap {background-color:#fff}
.approval-head {display:flex; justify-content:space-between; padding:10px; align-items:center}
.approval-head .expand, .approval-head .collapse {position:relative; padding-right:25px}
.approval-head .expand::before {position:absolute; content:''; top:-1px; right:5px; display:inline-block; width:7.5px; height:7.5px; border-width:0 2px 2px 0; border-style:solid; border-color:#7b8e99; transform:rotate(45deg)}
.approval-head .collapse::before {position:absolute; content:''; top:4px; right:5px; display:inline-block; width:7.5px; height:7.5px; border-width:0 2px 2px 0; border-style:solid; border-color:#7b8e99; transform:rotate(-135deg)}
.approval-body {padding:10px; display:none; border-top:1px solid #e1e1e1}
.approval-body-title {display:inline-block; font-weight:bold; margin-bottom:10px}
.approval-body-title em {font-weight:normal; color:#f16a2c; margin-left:10px}
/* approval status */
[class*='rgst_'] {display:inline-block; vertical-align:top; min-width:70px; height:21px; border-radius:2px; font-size:11px; color:#fff; text-align:center; line-height:21px; margin-right:10px}
.rgst_save {background:#479a87}
.rgst_processing {background:#5190c7}
.rgst_complete {background:#80b629}
.rgst_cancel {background:#4cb7ae}
.rgst_reject {background:#e58c00}
.rgst_relative {min-width:inherit; padding:1px 10px 0; margin-left:10px}
/* approval steps */
[class*='app-type-'] {display:inline-block; padding:2px 10px; background-color:#b3b3b3; color:#fff}
.app-type-draft {background-color:#b3b3b3}
.app-type-approval {background-color:#338edf}
.app-type-agreement {background-color:#40b9db}
.app-type-notice {background-color:#6b7b83}

/* data table */
.data-table {border-top:1px solid #b5b5b5}
.data-table-content {width:100%; table-layout:fixed; border-collapse:collapse}
.data-table-content th, .data-table-content td {border:1px solid #e1e1e1; padding:5px; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.data-table-content th {background-color:#efefef; font-weight:normal; border-top:0}
.data-table-content td [class*='app-type-'] {width:100%; font-size:12px}

/* Responsive */
@media only screen and (max-width:834px) {
	.main-content > div {width:160px; height:180px; margin:0 8px}
	.main-content > div > a::before {width:86px !important; height:96px}
	.main-content > div > div {height:106px}
	.main-content > div > div a::before {height:44px}
	.sub-content {padding:15px 10px 10px; overflow:auto}

	.row-m {margin-left:0}
	.col-m {padding-left:0}
	
	.col-m-1 {width:11.3333333333%}
	.col-m-2 {width:13.6666666667%}
	.col-m-3 {width:22%}
	.col-m-5 {width:38.6666666667%}
	.col-m-7 {width:55.3333333333%}
	.col-m-10 {width:86.3333333333%}
	.col-m-11 {width:88.6666666667%}

	.search-wrap {padding:10px 10px 20px 5px}
	.search-wrap .col-m-1 label {margin-left:5px}
	.search-wrap .search-button {flex:0 0 65px}
	.search-wrap .search-button button {width:55px; padding:0 5px !important}
	
	.input-form {padding:10px 10px 0}
	.input-form textarea + span.txt-count {font-size:12px}

	.grid-info {padding:12px 10px}
	.data-grid {height:383px !important}

	.mobile-pop.large {width:700px !important; height:700px !important}

	.search-wrap {flex-direction:column} 
	.search-wrap .search-button {flex:1 auto; flex-direction:row; justify-content:flex-end}
	.search-wrap .search-button button {width:65px}
	.search-wrap .search-button button:not(:last-child) {margin-bottom:0}
	.search-wrap .row-m:not(:last-child), 
	.input-form .row-m:not(:last-child) {margin-bottom:0px}
	.search-wrap .row-m .col-m,
	.input-form .row-m .col-m {margin-bottom:10px}
}

@media only screen and (max-width:641px) {
	html, body, select, input {font-size:14px}
	input[type=text], input[type=password], input[type=date] {font-size:14px}
	
	::-webkit-input-placeholder {font-size:14px}
	::-moz-placeholder {font-size:14px}
	:-ms-input-placeholder {font-size:14px}
	:-moz-placeholder {font-size:14px}
	
	.nowrap {white-space:normal}
	
	.main-content {flex-wrap:wrap; align-content:center}
	.main-content > div {margin:8px; width:136px; height:146px}
	.main-content > div > a {bottom:15px; font-size:18px}
	.main-content > div > a::before {width:74px !important; height:80px}
	.main-content > div > div {height:80px}
	.main-content > div > div a {font-size:14px}
	.main-content > div > div a::before {height:38px; top:30px}
	
	.btn {font-size:13px}
	
	.datepicker {min-width:216px}
	.datepicker a {flex-basis:19px}
	.datepicker input[type=text] {font-size:13px; max-width:81px}
	.datepicker :nth-child(3) {margin-left:2px}

	.head-logo {margin-left:10px}
	.head-right {margin-right:10px}
	.head-right > .part, .head-right > .confidential{display:none}
	.head-right .logout {margin-right:0}
	
	.mobile-wrap footer, .mobile-wrap footer a {display:none}
	
	.sub-content {padding:15px 10px 10px}
	
	.col-m:empty {display:none}
	.input-form {padding:10px 10px 0}
	.input-form .col-m label.checkblock {font-size:14px}
	.input-form .photos > .col-m:empty {display:block}
	
	.col-m-1, .col-m-2, .row-m .col-m-1.pr0 {width:33% !important}
	.col-m-1 + .col-m {padding-right:3px}
	.col-m-1 + .col-m-3, .col-m-1 + .col-m-7, .col-m-2 + .col-m-10 {width:67% !important}
	.col-m-1 + .col-m-11, .input-form .col-m-100 {width:100% !important}
	.col-m-1 > label > br {display:none}
	.col-m-1.col-m-check {width:7.3333333333% !important}
	
	.col-m-1 + .col-m-5, .col-m-1 + .col-m-2 {width:67% !important}
	.col-m-1 ~ .col-m-9, .col-m-9 ~ .col-m-2 {width:100% !important}
	
	.rg-header-renderer, .rg-renderer {font-size:14px}
	
	.page_navi {padding:0 10px !important}
	.page_navi .page_navi_center a, .page_navi .page_navi_center font {margin: 0 7px}
	.page_navi .page_navi_left {flex:0 25% !important}
	.page_navi .page_navi_right {flex:0 20% !important}
	.page_navi .ipt {margin-top:-1px}
	.page_navi .ipt_select {font-size:14px}
	
	.grid-info .grid-info-right .button-area {margin-bottom:0}
	
	.mobile-pop .pop-head {padding:0 15px}
	.mobile-pop .pop-head .confidential {display:none}
	.mobile-pop .pop-body {padding:15px 10px 10px}
	.mobile-pop .pop-body .layout-block .layout-block__inside > h2 {font-size:14px}
	.mobile-pop .pop-foot {padding:0 10px}
	
	[class*='rgst_'] {font-size:13px; min-width:52px}
	.approval-body-title em {font-size:13px}
	.approval-head .expand, .approval-head .collapse {font-size:0}
	.approval-head .expand::before {top:-12px}
	.approval-head .collapse::before {top:-7px}
	#approvalSteps tr td:nth-child(5) ~ td,
	#approvalSteps tr th:nth-child(5) ~ th,
	#approvalSteps colgroup col:nth-child(5) ~ col {display:none}
	
	.log-wrap .txt-info, .log-info {font-size:12px}
}

@media only screen and (max-width:481px) {
	.main-content > div {width:168px; height:168px}
	.main-content > div > a {bottom:20px}
	.main-content > div > a::before {width:80px !important; height:90px}
	.main-content > div > div a::before {height:44px}
	
	.log-wrap {width:100%}
	
	.input-form .col-m-1.col-m-check {width:10.3333333333% !important}
	.input-form .col-m-1.col-m-check ~ .col-m {width:50% !important}
	.input-form .col-m-1.col-m-check + .col-m {width:39.5% !important}
	
	.grid-info .info-item {line-height:1.3}
}

@media only screen and (max-width:413px) {
	.main-content > div {width:136px; height:146px}
	.main-content > div > a::before {width:74px !important; height:78px}
	
	.datepicker + select {margin-top:5px !important}
	
	.info-item .item-total + span {padding-left:0}
	.info-item .item-total + span[class*='item-']::after {display:none}
	
	.grid-info {padding:12px 10px 7px}
	
	.mobile-pop .pop-body .layout-block > h1 em {display:block; margin-top:5px}
	.mobile-pop .pop-body .layout-block > h1 + .button-area-head {margin-top:0}
	
	.approval-body-title em {display:block; margin-left:0}
	#approvalSteps colgroup col:nth-child(3),
	#approvalSteps tr th:nth-child(3),
	#approvalSteps tr td:nth-child(3) {display:none}
	
	.col-m.flex {flex-direction:column}
	.col-m.flex > :first-child {margin-bottom:5px !important}
}

@media only screen and (max-height:481px) {
	html, body, select, input {font-size:14px}
	input[type=text], input[type=password], input[type=date] {font-size:14px}
	
	.mobile-wrap, .mobile-modal {justify-content:inherit}
	.mobile-pop.password {position:absolute; left:50%; top:35%; transform:translate(-50%, -35%)}
	
	.sub-content {overflow:auto}
	
	.input-form .col-m-1 {width:12.3333333333%}
	.input-form .col-m-2 {width:12.6666666667%}
	.input-form .col-m-3 {width:21%}
	.input-form .col-m-5 {width:37.6666666667%}
	.input-form .col-m-7 {width:54.3333333333%}
	.input-form .col-m-9 {width:75%}
	.input-form .col-m-11 {width:87.6666666667%}
	
	.checkblock {font-size:14px}
	.btn {font-size:13px}
	
	.datepicker {min-width:212px}
	.datepicker a {flex-basis:19px}
	.datepicker input[type=text] {font-size:13px; max-width:80px}
	.datepicker :nth-child(3) {margin-left:2px}
	
	.data-grid {min-height:383px !important}
	.rg-header-renderer, .rg-renderer {font-size:14px}
	.page_navi .ipt_select {font-size:14px}
	
	.mobile-wrap footer, mobile-wrap footer a, .mobile-pop .pop-foot {display:none}
}