@charset "utf-8";
html { margin: 0; overflow-y:scroll; }
html.noscroll, html.panelopen { overflow: hidden; }
body { margin: 0; padding: 0; font-size: 1rem; font-family: 'Noto Sans Kr', 'NanumGothic', 'Malgun Gothic','Exo 2', 'Work Sans', 'Montserrat'; font-weight: 400; color: #000; }
h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0; }
h1, h2, h3, h4, h5, h6 { }
article, aside, header, footer, nav, section { display: block; }
ul,ol,li,dl,dt,dd { margin: 0; padding: 0; list-style: none; font-weight: normal; }
legend { position: absolute; margin: 0; padding: 0;font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
label, input, button, select, img { vertical-align:middle; margin: 0; }
input, button { margin: 0; padding: 0; border: 0; }
button, input[type="submit"] { outline: none; box-shadow: none; cursor: pointer; text-align: center; }
button:focus,input[type="submit"]:focus { outline:none; border-color: transparent; box-shadow: none; }
textarea { resize: none; }
select { -webkit-appearance:none;  -moz-appearance:none; appearance:none; padding-right:30px; background:#fff url("/img/select_arrow.png") right 10px center no-repeat; }
input, select, button, textarea { font:inherit; margin:0; padding:0; outline:none; border-color: #ddd; }
input::-ms-clear { display: none;}
select::-ms-expand { background-color: transparent; border: 0; }
select:focus::-ms-value {background: transparent; color: inherit; }
p { margin: 0; padding: 0; word-break: break-all; }
pre { overflow-x: scroll;}
a { color: #000; }
a:hover, a:hover { color: #000; }
a, a:hover, a:focus { text-decoration: none; }
*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type=text],input[type=password], textarea { outline: none; box-shadow: none; }
input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus { outline: none; box-shadow: none; }
span[data-class],div[data-class],p[data-class],li[data-class] { cursor: pointer; }
.sound_only { display: none !important; }
select,input[type="text"],input[type="password"],textarea { padding: .375rem .75rem; border-radius: .25rem; border: 1px solid #ccc; }
.mask-num { text-align: right; }
[data-bunch]:nth-child(even),
[data-bunch]:nth-child(even) > div { background: #eff3f9; }
.loadmap { width: 100%; height: 100%; min-height: 140px; }

/* page layout */
#container { display: flex; display: ms-flexbox!important; }
#aside_left { position: relative; flex: 1 1 25%; max-width: 25%; order: 1; -ms-flex-order: 1; }
#container_wrap { position: relative; flex: 1 1 auto; order: 2; -ms-flex-order: 2; max-width: 100%; }
#aside_right { position: relative;  flex: 1 1 25%; max-width: 25%; order: 3; -ms-flex-order: 3; }
#section-container { display: flex; display: ms-flexbox!important; }
@media (max-width: 992px) {
#aside_left, #aside_right { display: none !important; }
}
@media (max-width: 768px) {
#container_wrap { }
}
/* page layout */
.display-none { display: none !important; }
/* detail side display none */
#mbwnone #aside_left,
#mbwnone #aside_right { display: none !important; }
/* mobile-media-set */
@media (max-width: 992px) {
.mobile-padding { padding: 0 10px !important; }
.mobile-none { display: none !important; }
.mobile-only { display: block !important; }
}
@media (min-width: 992px) {
.mobile-only { display: none !important; }
}

/* full wrap */
.fullwrap-out { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }
.fullwrap-out:before { display: block; width: 100%; height: 1px; content: ''; }
.fullwrap-out:after  { display: block; width: 100%; height: 50px; content: ''; }
.fullwrap-in { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.fullwrap-in:before,
.fullwrap-in:after { display: block; width: 100%; height: 1px; content: ''; }

/* 페이징 */
.pg_wrap { clear: both; margin: 0px 0px 20px 0px; padding: 20px 0px 20px 0px; text-align: center; }
.pg {}
.pg a:focus,
.pg a:hover { text-decoration:none; color: #6ea82f; }
.pg_page,
.pg_current { display:inline-block; margin: 0px 2.5px; width: 27px; height: 27px; line-height: 25px; text-align:center; text-decoration:none; font-size:14px; background-color:#fff; color:#888; border:1px solid #ddd; vertical-align:middle; font-weight:normal; border-radius: 50%; }
.pg_page {}
.pg_current { background-color: #6ea82f; border-color: #6ea82f; color:#fff !important;}
.pg_image { text-indent: -9999em; background-position: center center; background-repeat: no-repeat; background-size: 50%; }
.pg_start { background-image: url('/images/arrow_double_left.png'); }
.pg_end   { background-image: url('/images/arrow_double_right.png'); }
.pg_prev  { background-image: url('/images/arrow_left.png'); }
.pg_next  { background-image: url('/images/arrow_right.png'); }
.pg_empty {display:none}
.pg_prev.pg_empty, .pg_next.pg_empty {display:inline-block; width:0px !important;border:0; padding:0px; }

#ui-datepicker-div { display: none; width: auto; max-width: 320px; background: #fff; margin: 5px 0 0 0; padding: 25px 10px 0 10px; box-shadow: 10px 10px 40px rgb(0 0 0 / 10%); }
#ui-datepicker-div a { color: #000; }
#ui-datepicker-div .ui-datepicker-header { position: relative; }
#ui-datepicker-div .ui-datepicker-prev { position: absolute; display: inline-block; font-size: 12px; top: -23px; left: 0; }
#ui-datepicker-div .ui-datepicker-next { position: absolute; display: inline-block; font-size: 12px; top: -23px; right: 0; }
#ui-datepicker-div .ui-datepicker-title { position: relative; clear: both; margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
#ui-datepicker-div .ui-datepicker-title select { height: auto; width: calc( 50% - 15px); min-width: 90px; padding: 4px 12px; border-radius: 0; }
#ui-datepicker-div .ui-datepicker-calendar { margin: 0; }
#ui-datepicker-div .ui-datepicker-calendar th,
#ui-datepicker-div .ui-datepicker-calendar td { width: 35px; height: 30px; text-align: center; line-height: 30px; }
#ui-datepicker-div .ui-datepicker-calendar th:first-child > span,
#ui-datepicker-div .ui-datepicker-calendar td:first-child > a { color: #dc3545; }
#ui-datepicker-div .ui-datepicker-calendar th:last-child > span,
#ui-datepicker-div .ui-datepicker-calendar td:last-child > a { color: #007bff; }
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active { padding: 3px 6px; background: #6f42c1; color: #fff; font-weight: 600; }
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight { color: #fff !important; }
#ui-datepicker-div .ui-datepicker-buttonpane { margin-top: 10px; display: flex; margin-left: -10px; margin-right: -10px; }
#ui-datepicker-div .ui-datepicker-buttonpane > button { flex: 1 1 50%; max-width: 50%; text-align: center; padding: .375rem; border-radius: 0; border: 1px solid transparent; }
#ui-datepicker-div .ui-datepicker-buttonpane > button:first-child { order: 2; background: #dc3545; color: #fff; }
#ui-datepicker-div .ui-datepicker-buttonpane > button:last-child  { order: 1; }
#ui-datepicker-div .ui-datepicker-today { background:#dc3545; color: #fff; }
#ui-datepicker-div .ui-datepicker-today a { color: #fff; }

/*sidetab*/
#sidetab img { width: 70px; height: auto; }
#rtab { position: absolute; top: 0; width: 80px; right: -100px; }
#ltab { position: absolute; top: 0; width: 80px; left: -100px; }
#rtab > div,
#ltab > div { margin-bottom: .375rem; }

/*sidequick*/
#rightquick { position: fixed; width: 240px; height: 100%; top: 0; right: 0; background-color: #fff; box-shadow: 0 10px 10px 0 rgba(199, 197, 197, 1); z-index: 9999; border-left: 1px solid #ddd; transition: all 0.5s ease-in-out; }
#rightquick.off { right: -240px; }
#rightquick .quickwrap { position: relative; }
#rightquick .quickwrap .inner_wrap { padding: 20px; }
#rightquick .quicklist { position: absolute; top: calc(50vh - 150px); right: 240px; transform: translate(0,-50%); background-color: #fff; border: 1px solid #ddd; border-right: 0; border-bottom: 0; }
#rightquick .quicklist ul li { width: 57px; padding: 15px 0; text-align: center; cursor: pointer; border-bottom: 1px solid #ddd; }
#rightquick .quicklist ul li i { font-size: 24px; }
#leftquick { position: fixed; width: 240px; height: 100%; top: 0; left: 0; background-color: #fff; box-shadow: 0 10px 10px 0 rgba(199, 197, 197, 1); z-index: 9999; border-left: 1px solid #ddd; transition: all 0.5s ease-in-out; }
#leftquick.off { left: -240px; }
#leftquick .quickwrap { position: relative; }
#leftquick .quickwrap .inner_wrap { padding: 20px; }
#leftquick .quicklist { position: absolute; top: calc(50vh - 150px); left: 239px; transform: translate(0,-50%); background-color: #fff; border: 1px solid #ddd; border-right: 0; border-bottom: 0; }
#leftquick .quicklist ul li { width: 57px; padding: 15px 0; text-align: center; cursor: pointer; border-bottom: 1px solid #ddd; }
#leftquick .quicklist ul li i { font-size: 24px; }

/* navi */
.navi-wrap { position: relative; display: flex; padding: 12px 0 8px 0; }
.navi-wrap > .navi-title { }
.navi-wrap > .navi-pos { margin-left: auto; align-self: flex-end; display: flex; }
.navi-wrap > .navi-pos > a { position: relative; display: block; margin-right: 26px; font-size: 14px; color: #000; font-weight: 400; }
.navi-wrap > .navi-pos > a:last-child { margin-right: 0; }
.navi-wrap > .navi-pos > a:after { position: absolute; content: '＞'; width: 26px; display: inline-block; text-align: center; }
.navi-wrap > .navi-pos > a:last-child:after { content: ''; display: none; }
@media(max-width: 768px) {
.navi-wrap { }
.navi-wrap > .navi-title { display: none; }
.navi-wrap > .navi-pos { margin: 0; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* list-board-table */
.list-board-table { position: relative; width: 100%; max-width: 100%; }
.board-list { display: flex; }
.board-list > div.list-col { position: relative; flex: 1 1 auto; padding: 10px 0; text-align: center; align-self: center; font-size: 15px; }
.board-list.list-head {  border-top: 1px solid #252525; border-bottom: 1px solid #252525; }
.board-list.list-body { border-bottom: 1px solid #ddd; }
.board-button-wrap { display: flex; justify-content: flex-end; margin-top: 25px; }
.board-button-wrap .btn:not(:last-child) { margin-right: 5px; }
.board-list > div.list-subject { flex: 1 1 auto; max-width: 100%; text-align: center; }
.board-list.list-body > div.subject { text-align: left; }

@media (max-width: 992px) {
}
@media (max-width: 768px) {
.item-list-board > div.title { font-size: 18px; padding-left: 10px; margin-bottom: 8px; }
.board-list.list-head { display: none; }
.board-list.list-body { flex-wrap: wrap; padding: 0 10px 8px 10px; }
.board-list.list-body:first-child { border-top: 2px solid #333; }
.board-list.list-body > div { font-size: 13px; padding: 5px 0 2px 0; }
.board-button-wrap { display: flex; justify-content: flex-end; margin-top: 25px; padding: 0 5px; }
.board-button-wrap .btn:not(:last-child) { }
.board-list > div.list-subject { }
.board-list.list-body > div.subject { }
}
@media (max-width: 576px) {
}

/* table */
.dtable-form { position: relative; width: 100%; display: flex; flex-wrap: wrap; border-top: 1px solid #d6dce7; }
.dtable-form > .dl { position: relative; flex: 1 1 50%; max-width: 50%; display: flex; border-bottom: 1px solid #d6dce7; }
.dtable-form > .dl.dlf { position: relative; flex: 1 1 100%; max-width: 100%; }
.dtable-form > .dl > .dth { flex: 1 1 25%; max-width: 25%; padding: 10px; }
.dtable-form > .dl > .dtd { flex: 1 1 75%; max-width: 75%; padding: 10px; }
.dtable-form > .dl.dlf > .dth { flex: 1 1 12.5%; max-width: 12.5%; }
.dtable-form > .dl.dlf > .dtd { flex: 1 1 auto; max-width: 100%; }
.dtable-form.dtable-mid > .dl.dlf > .dth { flex: 1 1 30%; max-width: 30%; }
.dtable-form.dtable-mid > .dl.dlf > .dtd { flex: 1 1 70%; max-width: 70%; }
.dtable-form select { min-width: 120px; }
.dtable-button-wrap { margin: 25px 0; display: flex; }
.dtable-button-wrap > .btn { margin-right: 3px; }
.dtable-button-wrap > .btn:last-child { margin-right: 0; }
.center-align { justify-content: center; }
.right-align  { justify-content: flex-end; }
.dflex-row { display: flex; width: 100%; max-width: 100%; }
.dflex-row:not(:last-child) { margin-bottom: .25rem; }
.dflex-wrap { flex-wrap: wrap; }
.dflex-row > .row-cell { position: relative; flex: 0 0 auto; }
.dflex-row > .row-cell + .row-cell { margin-left: 10px; }
.dflex-row > .row-sl { align-self: center; flex: 0 0 10px; text-align: center; }
.dflex-row > .row-ml { margin-left: 5px; }

/* mymodal basic */
@media (min-width: 992px) {
html.noscroll body { padding-right: 17px; }
}
.myModal { position: fixed; top: 0; left: 0; z-index: 9999; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; transition: all 0.5s ease-in-out; background: rgba(0,0,0,.7); }
.myModal-dialog { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: none; max-height: calc(100% - 1.5rem); margin: 1.75rem auto; }
.myModal-dialog:before { display: block; width: 100%; height: 0; content: ""; background: #fff; }
.myModal-dialog:after { display: block; width: 100%; height: 0; content: ""; background: #fff; }
.myModal-content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; overflow: hidden; max-height: calc(100vh - 3.5rem); top: -100px; transition: all 0.5s ease-in-out; }
.myModal-content.open { top: 0; opacity:1; visibility: visible; transition: all 0.5s ease-in-out; }
.myModal-header { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: .3rem; border-top-right-radius: .3rem; -ms-flex-negative: 0; flex-shrink: 0; }
.myModal-header .header-title { align-self: center; }
.myModal-body { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1rem; overflow-y: auto; }
.myModal-footer { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: .3rem; border-bottom-left-radius: .3rem; -ms-flex-negative: 0; flex-shrink: 0; }
.myModal .myModal-header button.closex,
.myModal .myModal-footer button.closex{ position: relative; width: 60px; height: 60px; padding: 0 !important; border-radius: 0; border: 0; background: transparent; outline: none; box-shadow: none; }
.myModal .myModal-header button.closex:before,
.myModal .myModal-header button.closex:after,
.myModal .myModal-footer button.closex:before, 
.myModal .myModal-footer button.closex:after{ content: ""; margin: auto; display: block; width: 50%; height: 1px; background: #fff; }
.myModal .myModal-header button.closex:before,
.myModal .myModal-footer button.closex:before{ transform: rotate(-45deg); }
.myModal .myModal-header button.closex:after,
.myModal .myModal-footer button.closex:after{ transform: rotate(45deg); }
@media (max-width: 992px) {
.myModal .myModal-dialog { max-height: 100%; margin: 0 auto; }
.myModal .myModal-content { max-height: 100vh; }
}
@media (max-width: 768px) {
.myModal { right: 0; bottom: 0; }
}

/* fadedown Modal */
.fadedown .myModal-dialog { max-width: 900px; }
.fadedown .myModal-content { border-radius: 0; border: 0; }
.fadedown .myModal-header { border-radius: 0; padding: 0; border: 0; background: rgba(86,61,124,0.1); }
.fadedown .header-title { align-self: center; color: rgba(86,61,124,1); padding-left: 10px; letter-spacing: -2px; }
.fadedown .myModal-footer { display: none; }

/* 페이지 내 카운터, 검색 row */
.local-ov { display: flex; }
.local-ov:not(:last-child) { margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px dashed #ddd; }
.local-ov:last-child { margin-bottom: 8px; }
.local-ov .local-left { display: flex; }
.local-ov .local-left > select:not(:first-child) { margin-left: 5px; }
.local-ov .local-auto { margin-left: auto; }
.pg-count { display: inline-block; line-height: 29px; height: 29px; vertical-align: top; }
.pg-count:not(:last-child) { margin-right: 3px; }
.pg-count .ov_txt { float: left; background: #60718b; color: #ffffff; border-radius: .25rem 0 0 .25rem; padding: 0 .75rem; }
.pg-count .ov_num { float: left; background: #6f809a; color: #ffffff; border-radius: 0 .25rem .25rem 0; padding: 0 .75rem; }
.btn_ov01 .ov_num b { color: #ffff00; font-weight: bold; }
.local-text-group { display: flex; }
.local-text-group > span { display: inline-block; padding: .375rem .75rem; text-align: center; }
.local-text-group > span:first-child { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }
.local-text-group > span:last-child { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }

/* flex table list */
.dtable-list { position: relative; width: 100%; }
.dtable-list > ul { width: 100%; }
.dtable-list > ul li { position: relative; display: flex; width: 100%; }
.dtable-list > ul li > div { display: flex; flex-direction: column; justify-content: center; padding: .5rem .75rem; text-align: center; vertical-align: middle; }
.dtable-list > ul li.list-head { }
.dtable-list > ul li.list-head > div { background-color: #6f809a; color: #fff; border-right: 1px solid #60718b; }
.dtable-list > ul li.list-head > div:first-child { border-left: 1px solid #60718b; }
.dtable-list > ul li.list-body > div { border-right: 1px solid #d6dce7; border-bottom: 1px solid #d6dce7; overflow: hidden; text-overflow: ellipsis; }
.dtable-list > ul li.list-body > div:first-child { border-left: 1px solid #d6dce7; }
.dtable-list > ul li.list-body > div.list-row,
.dtable-list > ul li.list-body > div.list-btn { flex-direction: row; }
.dtable-list > ul li.list-body > div.list-btn > a:not(:last-child),
.dtable-list > ul li.list-body > div.list-btn > span:not(:last-child),
.dtable-list > ul li.list-body > div.list-btn > button:not(:last-child) { margin-right: 5px; }
.dtable-list > ul li.list-body.checked { background-color: #f3f3e7 !important; }
.dtable-list div.list-chk { flex: 0 0 40px; max-width: 40px; }
.dtable-list div.list-num { flex: 0 0 60px; max-width: 60px; }
/*
.dtable-list div.list-area { flex: 0 0 120px; max-width: 120px; }
.dtable-list div.list-type { flex: 0 0 110px; max-width: 110px; }
.dtable-list div.list-kind { flex: 0 0 110px; max-width: 110px; }
.dtable-list div.list-name { flex: 0 0 110px; max-width: 110px; }
.dtable-list div.list-model { flex: 0 0 130px; max-width: 130px; }
.dtable-list div.list-cate { flex: 0 0 160px; max-width: 160px; }
.dtable-list div.list-title { flex: 0 0 260px; max-width: 260px; }
.dtable-list div.list-state { flex: 0 0 110px; max-width: 110px; }
.dtable-list div.list-phone { flex: 0 0 110px; max-width: 110px; }
.dtable-list div.list-email { flex: 0 0 160px; max-width: 160px; }
.dtable-list div.list-color { flex: 0 0 120px; max-width: 120px; }
.dtable-list div.list-state { flex: 0 0 80px; max-width: 80px; }
.dtable-list div.list-link { flex: 0 0 60px; max-width: 60px; }
.dtable-list div.list-link { flex: 0 0 60px; max-width: 60px; }
.dtable-list div.list-subject,
.dtable-list div.list-auto { flex: 1 1 auto; max-width: 100%; }
.dtable-list li.list-body div.list-subject,
.dtable-list li.list-body div.list-title,
.dtable-list li.list-body div.list-left { text-align: left; }
.dtable-list div.list-count { flex: 0 0 70px; }
.dtable-list div.list-date { flex: 0 0 100px; }
.dtable-list div.list-datetime { flex: 0 0 160px; }
*/
.dtable-list div.list-btn { flex: 0 0 100px; }
.dtable-list div.list-btn-sm { flex: 0 0 80px; }
.dtable-list div.list-btn-group { flex: 0 0 140px; }
.dtable-list div.list-btn .btn,
.dtable-list div.list-btn-sm .btn,
.dtable-list div.list-btn-group .btn { align-self: center; padding: 2px 8px; }
.dtable-list div > select { width: 100%; max-width: 100%; }
.dtable-list div > input { width: 100%; max-width: 100%; }

.dtable-list.tbl-skyblue > ul li.list-head > div { background-color: #eff3f9; color: #555; border-right: 1px solid #d6dce7; border-top: 1px solid #d6dce7; border-bottom: 1px solid #d6dce7; }
.dtable-list.tbl-skyblue > ul li.list-head > div:first-child { border-left: 1px solid #d6dce7; }
.dtable-list.tbl-skyblue > ul li.list-body > div { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #d6dce7; border-bottom: 1px solid #d6dce7; overflow: hidden; text-overflow: ellipsis; }
.dtable-list.tbl-skyblue > ul li.list-body > div:first-child { border-left: 1px solid #d6dce7; }

/* flex width */
.wfpx-10  { flex: 0 0 10px !important; max-width: 10px !important; }
.wfpx-20  { flex: 0 0 20px !important; max-width: 20px !important; }
.wfpx-30  { flex: 0 0 30px !important; max-width: 30px !important; }
.wfpx-40  { flex: 0 0 40px !important; max-width: 40px !important; }
.wfpx-50  { flex: 0 0 50px !important; max-width: 50px !important; }
.wfpx-60  { flex: 0 0 60px !important; max-width: 60px !important; }
.wfpx-70  { flex: 0 0 70px !important; max-width: 70px !important; }
.wfpx-80  { flex: 0 0 80px !important; max-width: 80px !important; }
.wfpx-90  { flex: 0 0 90px !important; max-width: 90px !important; }
.wfpx-100 { flex: 0 0 100px !important; max-width: 100px !important; }
.wfpx-110 { flex: 0 0 110px !important; max-width: 110px !important; }
.wfpx-120 { flex: 0 0 120px !important; max-width: 120px !important; }
.wfpx-130 { flex: 0 0 130px !important; max-width: 130px !important; }
.wfpx-140 { flex: 0 0 140px !important; max-width: 140px !important; }
.wfpx-150 { flex: 0 0 150px !important; max-width: 150px !important; }
.wfpx-160 { flex: 0 0 160px !important; max-width: 160px !important; }
.wfpx-170 { flex: 0 0 170px !important; max-width: 170px !important; }
.wfpx-180 { flex: 0 0 180px !important; max-width: 180px !important; }
.wfpx-190 { flex: 0 0 190px !important; max-width: 190px !important; }
.wfpx-200 { flex: 0 0 200px !important; max-width: 200px !important; }
.wfpx-210 { flex: 0 0 210px !important; max-width: 210px !important; }
.wfpx-220 { flex: 0 0 220px !important; max-width: 220px !important; }
.wfpx-230 { flex: 0 0 230px !important; max-width: 230px !important; }
.wfpx-240 { flex: 0 0 240px !important; max-width: 240px !important; }
.wfpx-250 { flex: 0 0 250px !important; max-width: 250px !important; }
.wfpx-260 { flex: 0 0 260px !important; max-width: 260px !important; }
.wfpx-270 { flex: 0 0 270px !important; max-width: 270px !important; }
.wfpx-280 { flex: 0 0 280px !important; max-width: 280px !important; }
.wfpx-290 { flex: 0 0 290px !important; max-width: 290px !important; }
.wfpx-300 { flex: 0 0 300px !important; max-width: 300px !important; }
.wfpx-400 { flex: 0 0 400px !important; max-width: 400px !important; }
.wfpe-10  { flex: 0 0 10% !important; max-width: 10% !important; }
.wfpe-15  { flex: 0 0 15% !important; max-width: 15% !important; }
.wfpe-20  { flex: 0 0 20% !important; max-width: 20% !important; }
.wfpe-25  { flex: 0 0 25% !important; max-width: 25% !important; }
.wfpe-30  { flex: 0 0 30% !important; max-width: 30% !important; }
.wfpe-31  { flex: 0 0 31% !important; max-width: 31% !important; }
.wfpe-32  { flex: 0 0 32% !important; max-width: 32% !important; }
.wfpe-33  { flex: 0 0 33% !important; max-width: 33% !important; }
.wfpe-34  { flex: 0 0 34% !important; max-width: 34% !important; }
.wfpe-35  { flex: 0 0 35% !important; max-width: 35% !important; }
.wfpe-36  { flex: 0 0 36% !important; max-width: 36% !important; }
.wfpe-37  { flex: 0 0 37% !important; max-width: 37% !important; }
.wfpe-38  { flex: 0 0 38% !important; max-width: 38% !important; }
.wfpe-39  { flex: 0 0 39% !important; max-width: 39% !important; }
.wfpe-40  { flex: 0 0 40% !important; max-width: 40% !important; }
.wfpe-41  { flex: 0 0 41% !important; max-width: 41% !important; }
.wfpe-42  { flex: 0 0 42% !important; max-width: 42% !important; }
.wfpe-43  { flex: 0 0 43% !important; max-width: 43% !important; }
.wfpe-44  { flex: 0 0 44% !important; max-width: 44% !important; }
.wfpe-45  { flex: 0 0 45% !important; max-width: 45% !important; }
.wfpe-46  { flex: 0 0 46% !important; max-width: 46% !important; }
.wfpe-47  { flex: 0 0 47% !important; max-width: 47% !important; }
.wfpe-48  { flex: 0 0 48% !important; max-width: 48% !important; }
.wfpe-49  { flex: 0 0 49% !important; max-width: 49% !important; }
.wfpe-50  { flex: 0 0 50% !important; max-width: 50% !important; }
.wfpe-51  { flex: 0 0 51% !important; max-width: 51% !important; }
.wfpe-52  { flex: 0 0 52% !important; max-width: 52% !important; }
.wfpe-53  { flex: 0 0 53% !important; max-width: 53% !important; }
.wfpe-54  { flex: 0 0 54% !important; max-width: 54% !important; }
.wfpe-55  { flex: 0 0 55% !important; max-width: 55% !important; }
.wfpe-56  { flex: 0 0 56% !important; max-width: 56% !important; }
.wfpe-57  { flex: 0 0 57% !important; max-width: 57% !important; }
.wfpe-58  { flex: 0 0 58% !important; max-width: 58% !important; }
.wfpe-59  { flex: 0 0 59% !important; max-width: 59% !important; }
.wfpe-60  { flex: 0 0 60% !important; max-width: 60% !important; }
.wfpe-61  { flex: 0 0 61% !important; max-width: 61% !important; }
.wfpe-62  { flex: 0 0 62% !important; max-width: 62% !important; }
.wfpe-63  { flex: 0 0 63% !important; max-width: 63% !important; }
.wfpe-64  { flex: 0 0 64% !important; max-width: 64% !important; }
.wfpe-65  { flex: 0 0 65% !important; max-width: 65% !important; }
.wfpe-66  { flex: 0 0 66% !important; max-width: 66% !important; }
.wfpe-67  { flex: 0 0 67% !important; max-width: 67% !important; }
.wfpe-68  { flex: 0 0 68% !important; max-width: 68% !important; }
.wfpe-69  { flex: 0 0 69% !important; max-width: 69% !important; }
.wfpe-70  { flex: 0 0 70% !important; max-width: 70% !important; }
.wfpe-75  { flex: 0 0 75% !important; max-width: 75% !important; }
.wfpe-80  { flex: 0 0 80% !important; max-width: 80% !important; }
.wfpe-85  { flex: 0 0 85% !important; max-width: 85% !important; }
.wfpe-90  { flex: 0 0 90% !important; max-width: 90% !important; }
.wf-auto  { flex: 1 1 auto !important; max-width: 60% !important; min-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.wf-align-left  { text-align: left !important; }
.wf-align-right { text-align: right !important; }
.wf-ml-auto { margin-left: auto !important; }
.list-body > .wf-auto  { white-space: normal; max-height: 64px; overflow: hidden; }

/* table */
.dtable-form { display: flex; flex-wrap: wrap; border: 1px solid #ddd; border-left: 0; border-bottom: 0; }
.dtable-form > .dl { position: relative; flex: 1 1 50%; max-width: 50%; display: flex; border-bottom: 1px solid #d6dce7; }
.dtable-form > .dl:last-child { }
.dtable-form > .dl.dlf { position: relative; flex: 1 1 100%; max-width: 100%; }
.dtable-form > .dl > .dth { flex: 1 1 25%; max-width: 25%; padding: 10px; background-color: #fbfbf9; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.dtable-form > .dl > .dtd { flex: 1 1 75%; max-width: 75%; padding: 10px; align-self: center; }
.dtable-form > .dl.dlf > .dth { flex: 1 1 12.5%; max-width: 12.5%; background-color: #fbfbf9; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.dtable-form > .dl.dlf > .dtd { flex: 1 1 87.5%; max-width: 87.5%; align-self: center; }
.dtable-form.dtable-mid > .dl.dlf > .dth { flex: 1 1 25%; max-width: 25%; }
.dtable-form.dtable-mid > .dl.dlf > .dtd { flex: 1 1 75%; max-width: 75%; }
.dtable-form select { min-width: 90px; }
section > .dtable-form { margin-bottom: 25px; }
section:last-child > .dtable-form { margin-bottom: 0; }

.dtable-form + .tbl-button-wrap { margin: 25px 0; display: flex; justify-content: center; }
.dtable-form + .tbl-button-wrap > .btn { flex: 1 1 auto; max-width: 50%; border-radius: 0; margin-right: 10px; padding: 12px 0; }
.dtable-form + .tbl-button-wrap > .btn:last-child { margin-right: 0; }
.dtable-form + .tbl-button-wrap > .btn_cancel { background-color: #fff; border: 1px solid #ff0c0c; color:#ff0c0c; }
.dtable-form + .tbl-button-wrap > .btn_submit { background-color: #ff0c0c; border: 1px solid #ff0c0c; color: #fff; }

.tbl-write-form { border: 0; }
.tbl-write-form > .dl { flex-wrap: wrap; flex: 1 1 100%; max-width: 100%; border: 0; }
.tbl-write-form > .dl.dlf > .dth { display: flex; flex: 1 1 100%; max-width: 100%; background-color: transparent; border: 0; padding: 0; margin-bottom: .25rem; }
.tbl-write-form > .dl.dlf > .dtd { flex: 1 1 100%; max-width: 100%; padding: 0; }
.tbl-write-form > .dl+.dl { margin-top: .75rem; }
.tbl-write-form > .dl.dlf > .dth .req { position: relative; display: inline-block; font-weight: 500; align-self: center; }
.tbl-write-form > .dl.dlf > .dth .req:after { position: absolute; content: '*'; color: #ff0c0c; right: -10px; }
.tbl-write-form > .dl.dlf > .dth .chk { align-self: center; }
.tbl-write-form > .dl.dlf > .dtd .frm-input { }
.tbl-write-form > .dl.dlf > .dtd .frm-input input[type="text"] { width: 100%; background: #f6f6f6; border: 1px solid #f6f6f6; }
.tbl-write-form > .dl.dlf.phone > .dtd .frm-input-row { justify-content: space-between; }
.tbl-write-form > .dl.dlf.phone > .dtd .frm-input { flex: 1 1 32%; max-width: 32%; }
.tbl-write-form > .dl.dlf.address > .dtd .frm-zip { flex: 1 1 50%; max-width: 50%; }
.tbl-write-form > .dl.dlf.address > .dtd .btn_zip { background: #000; color: #fff; }

.dtable-box { position: relative; display: flex; flex-wrap: wrap; border-top: 1px solid #ddd; }
.dtable-box > dl { flex: 1 1 auto; max-width: 100%; display: flex; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.dtable-box > dl:last-child { border-right: 1px solid #ddd; }
.dtable-box > dl > dt { padding: 12px 15px; }
.dtable-box > dl > dd { padding: 12px 15px; margin-left: auto; }
.dtable-box > dl.lg-box > dt { padding: 25px 10px; }
.dtable-box > dl.lg-box > dd { padding: 25px 10px; }
.dtable-box.dtable-box3 > dl { flex: 1 1 33.333333%; max-width: 33.333333%; }
.dtable-box.dtable-box3 > dl:nth-child(3n) { border-right: 1px solid #ddd; }

/* flex */
.dflex-row { display: flex; }
.dflex-wrap { flex-wrap: wrap; }

.frm_input { padding: 0.375rem 0.75rem; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; }
.frm_input.frm_num  { width: 80px; }
.frm_input.frm_small { width: 100px; }
.frm_input.frm_full { width: 100%; }
.frm_input.color_code { height: auto !important; }
.frm_input.frm_file { padding: .15rem .75rem !important; height: 100%; }
textarea.frm_input { height: 120px; }
select { display: inline-block;line-height:1.5; padding: .375rem  .75rem; line-height: 1.5; color: #495057; vertical-align:middle; border:1px solid #ced4da; border-radius:.25rem; padding-right: 2rem !important; background:#fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUnPjxwYXRoIGZpbGw9JyUyMzM0M2E0MCcgZD0nTTIgMEwwIDJoNHptMCA1TDAgM2g0eicvPjwvc3ZnPg==') no-repeat right .75rem center !important; background-size:8px 10px !important; }

/* frm row */
.frm-input-row { display: flex; width: 100%; margin: 0; max-width: 100%; }
.frm-input-row:not(:last-child) { margin-bottom: .5rem; }
.frm-input-row > .frm-input { position: relative; flex: 0 0 auto; }
.frm-input-row > .frm-input > .frm_input + span { display: inline-block; padding: .375rem .75rem; text-align: center; background-color: #e9ecef; border: 1px solid #ced4da; margin-left: -33px; margin-right: 10px; }
.frm-input-row > .frm-sl { flex: 0 0 auto; padding: 0 5px; align-self: center; }
.frm-input-row > .frm-input-full { flex: 1 1 auto; max-width: 100%; }
.frm-input-row > .frm-input-mid { flex: 1 1 42.5%; max-width: 42.5%; }
.frm-input-row > .frm_mid { flex: 1 1 42.5%; max-width: 42.5%; }
.frm_info { display: block; color: #6f42c1; font-weight: 500; margin-bottom: .25rem; }
.frm-guide { display: inline-block; padding: .375rem .75rem; text-align: center; background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; margin-left: 5px; border-radius: .25rem; }
.frm-desc { display: inline-block; padding: .375rem .75rem; text-align: center; background-color: #e9ecef; border: 1px solid #ced4da; margin-right: 8px; border-radius: .25rem; }
textarea.frm_input { height: 120px; }
select { display: inline-block;line-height:1.5; padding: .375rem  .75rem; line-height: 1.5; color: #495057; vertical-align:middle; border:1px solid #ced4da; border-radius:.25rem; padding-right: 2rem !important; background:#fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUnPjxwYXRoIGZpbGw9JyUyMzM0M2E0MCcgZD0nTTIgMEwwIDJoNHptMCA1TDAgM2g0eicvPjwvc3ZnPg==') no-repeat right .75rem center !important; background-size:8px 10px !important; appearance: none; }
.frm-input-row > .input-prepend { flex: 0 0 160px; max-width: 160px; }
.frm-input-row .frm-text { display: inline-block; width: 100%; padding: .375rem .75rem; color: #495057; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 0.25rem; line-height: 1.5; }
.frm-input-row .text-explain { background-color: transparent; }
.frm-input-row > .input-prepend .frm-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.frm-input-row > .input-prepend + div { margin-left: -1px; }
.frm-input-row > .input-prepend + div.frm-check { border: 1px solid #ced4da; border-left: 0; min-width: 120px; }
.frm-input-row > .input-prepend + div select,
.frm-input-row > .input-prepend + div .frm_input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.frm-input-row > .input-explain { flex: 1 1 auto; max-width: 100%; margin-left: 8px; }
.frm-input-row > .input-explain .frm-text { text-align: left; }
.frm-input-row > .input-auto { flex: 1 1 auto; max-width: 100%; }
.frm-input-row > .input-append { margin-left: -3px; }
.frm-input-row > .input-append .frm-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.frm-input-row > .frm-auto { flex: 0 0 auto; max-width: unset !important; }
.frm-input-row > .frm-ml { margin-left: 5px; }
.frm-input-row > .frm-mr { margin-right: 5px; }
.frm-input-row > .frm-check { padding: .275rem .75rem; }
.frm-input-row > .frm-check > label { margin-left: 3px; }
.frm-input-row > .frm-check > label:not(:last-child) { margin-right: 10px; }
.frm-input-row > .frm-ml-auto { margin-left: auto; }

/* item-list
.item-list { margin-bottom: 15px; }
.item-list > a { position: relative; width: 100%; display: flex; padding: 16px 24px; }
.item-list > a > .item-image { flex: 1 1 45%; max-width: 45%; padding: 1.25rem, 1.25rem, 1.25rem, 0; }
.item-list > a > .item-image > img { width: 100%; height: auto; border-radius: .5rem; }
.item-list > a > .item-cont  { flex: 1 1 55%; max-width: 55%; padding: 1.25rem .125rem 1.25rem 2rem; }
.item-list > a > .item-cont { }
 */