@charset "utf-8";
#admin-header { }
html.scroll #admin-header { position: fixed; left: 0; right: 0; top: 0; z-index: 1099; }
html.scroll .container-content { padding-top: 45px; }
html.scroll .aside-wrap { position: fixed; left: 0; height: 100%; width: 200px; }
html.scroll .container-wrap { margin-left: 200px; }
html.scroll .content-fixed-top { z-index: 1090; height: auto; }
html.scroll .fixed-top-inner { padding: 18px 0 8px 0; }
html.scroll .fixed-top-inner h3.page-title {  }
#progress { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; background: #000; opacity: .7; }
#progress:after { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #60718b; border-top-color: #fff; border-bottom-color: #fff; border-radius: 50%; width: 60px; height: 60px; -webkit-animation: animate-progress 1s linear infinite; animation: animate-progress 1s linear infinite; }
@-webkit-keyframes animate-progress {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes animate-progress {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
h5.page-title { font-size: 16px; font-weight: 600; margin: 35px 0 15px 0; }
.admin-header-inner { display: flex; background-color: #000; }
.admin-header-logo { flex: 1 1 200px; max-width: 200px; border-bottom: 2px solid #000; text-align: center; }
.admin-header-logo > a { display: inline-block; font-size: 22px; color: #fff; font-family: 'Montserrat'; letter-spacing: -1px; font-weight: 600; padding: 12px 0; }
.admin-header-gnb { position: relative; flex: 1 1 auto; display: flex; align-self: center; }
.admin-header-gnb:after { flex: 1 1 auto; display: inline-block; border-bottom: 2px solid #000; content: ''; }
.admin-header-gnb > li { position: relative; border-bottom: 2px solid #000; }
.admin-header-gnb > li:after { position: absolute; width: 0; height: 2px; content: ''; visibility: hidden; left: 0; top: 100%; opacity: 0; z-index: -1; }
.admin-header-gnb > li.active { border-bottom: 2px solid #c8ecff; transition: all 0.3s ease-in-out; }
.admin-header-gnb > li > a { display: block; padding: 12px 18px; text-align: center; font-size: 15px; color: #fff; }
.admin-header-gnb > li:hover > a,
.admin-header-gnb > li.active > a { color: #c8ecff; }
.admin-header-gnb > li > .gnb-sub-box { position: absolute; top: 80%; left: 0; bottom: 0; visibility: hidden; height: 0; opacity: 0; z-index: -1; }
.admin-header-gnb > li > .gnb-sub-box > ul { position: relative; }
.admin-header-gnb > li > .gnb-sub-box > ul:before { position: absolute; width: 0; height: 3px; opacity: 0; visibility: hidden; display: inline-block; top: 0; left: 1px; content: ''; }
.admin-header-gnb > li:hover > .gnb-sub-box > ul:before { width: calc( 100% - 2px ); height: 3px; content: ''; background-color: #232f3e; visibility: visible; opacity: 1; z-index: 1; transition: all 0.3s ease-in-out; }
.admin-header-gnb > li:hover > .gnb-sub-box { top: 100%; visibility: visible; height: auto; opacity: 1; transition: all 0.3s ease-in-out; z-index: 1100; }
.gnb-sub-box { min-width: 100%; }
.gnb-sub-box > ul { width: auto; box-shadow: 0px 4px 8px rgb(0 0 0 / 15%); }
.gnb-sub-box > ul > li { border: 0; }
.gnb-sub-box > ul > li > a { display: block; padding: 0 10px; line-height: 38px; font-size: 13px; white-space: nowrap; background-color: #232f3e; color: #fff; }
.gnb-sub-box > ul > li:hover > a { background-color: #484848; color: #fff; }
.admin-header-ico { margin-left: auto; align-self: center; }
.ico-menu-area { display: flex; }
.ico-menu-area > li { margin-right: 10px; }
.ico-menu-area > li > a { display: block; padding: 0 16px; height: 28px; line-height: 28px; font-size: 13px; border: 1px solid #486282; border-radius: 25px; text-align: center; color: #c8ecff; }

#admin-container { }
.admin-container-inner { display: flex; min-height: calc( 100vh - 50px ); }
.aside-wrap { flex: 0 0 200px; max-width: 200px; border-right: 1px solid #999; background-color: #fbfbf9; }
.container-wrap { flex: 1 1 auto; max-width: 100%; }
.container-content { padding: 60px 25px 25px 25px; }

@media(max-width: 1400px) {
.admin-header-logo { flex: 1 1 180px; max-width: 180px; }
.admin-header-logo > a { font-size: 20px; }
.admin-header-gnb > li > a { padding: 12px 16px; font-size: 14px; }
.ico-menu-area > li:not(:last-child) { display: none; }
.aside-wrap { flex: 0 0 180px; max-width: 1800px; }
}

/* aside */
.aside-menu { }
.aside-menu > .menu-title { font-size: 17px; text-align: center; padding: 35px 0; }
.aside-menu > ul { border-top: 1px solid #999; border-bottom: 1px solid #999; }
.aside-menu > ul > li { position: relative; padding: 10px; background-color: #fff; border-bottom: 1px dashed #999; }
.aside-menu > ul > li:last-child { border-bottom: 0; }
.aside-menu > ul > li.active > a { color: #17a2b8; }

/* content */
.content-fixed-top { position: fixed; top: 50px; left: 200px; right: 0; z-index: 2; height: 46px; border-bottom: 1px dashed #ddd; background: #fff; }
.fixed-top-inner { position: relative; display: flex; width: 100%; height: 100%; }
.fixed-top-inner h3.page-title { align-self: center; font-size: 18px; font-weight: 500; padding: 0; padding-left: 25px; }
.fixed-top-inner .fixed-top-btn { align-self: center; display: flex; margin-left: auto; margin-right: 10px; }
.fixed-top-inner .fixed-top-btn .btn:not(:last-child) { margin-right: 5px; }

.dtable-flex { display: flex; }
.dtable-flex-wrap { flex-wrap: wrap; }
.dtable-flex-center { justify-content: center; }
.dtable-flex-right  { justify-content: flex-end; }
.dtable-flex-between { justify-content: space-between; }

section > .dtable-form { margin-bottom: 25px; }
section:last-child > .dtable-form { margin-bottom: 0; }
.dtable-form { position: relative; width: 100%; display: flex; flex-wrap: wrap; border-top: 1px solid #d6dce7; border-left: 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; background: #eff3f9; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #d6dce7; }
.dtable-form > .dl > .dtd { flex: 1 1 75%; max-width: 75%; padding: 10px; border-right: 1px solid #d6dce7; }
.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: 87.5%; }
.dtable-button-wrap { margin: 15px 0 25px 0; display: flex; }
.dtable-button-wrap > .btn { margin-right: 5px; }
.dtable-button-wrap > .btn:last-child { margin-right: 0; }
.dtable-form1 .dl { flex: 1 1 100%; max-width: 100%; }
.dtable-form1 .dl .dth { flex: 0 0 120px; max-width: 120px; background: #eff3f9; }
.dtable-form1 .dl .dtd { flex: 1 1 auto; max-width: calc( 100% - 120px); }
.dtable-form2 .dl { flex: 1 1 50%; max-width: 50%; }
.dtable-form2 .dl .dth { flex: 0 0 120px; max-width: 120px; background: #eff3f9; }
.dtable-form2 .dl .dtd { flex: 1 1 auto; max-width: calc( 100% - 120px); }
.dtable-form2 .dl.dlf { flex: 1 1 100%; max-width: 100%; }
.dtable-form2 .dl.dlf .dth { flex: 0 0 120px; max-width: 120px; background: #eff3f9; }
.dtable-form2 .dl.dlf .dtd { flex: 1 1 auto; max-width: calc( 100% - 120px); }
.dtable-form3 .dl { flex: 1 1 33.333333%; max-width: 33.333333%; }
.dtable-form3 .dl .dth { flex: 0 0 120px; max-width: 120px; background: #eff3f9; }
.dtable-form3 .dl .dtd { flex: 1 1 auto; max-width: calc( 100% - 120px); }
.dtable-item-form { }
.dtable-item-form > .dl.dlf { }
.dtable-item-form > .dl.dlf .dth { flex: 0 0 120px; max-width: 120px; background: #eff3f9; }
.dtable-item-form > .dl.dlf .dtd { flex: 1 1 auto; max-width: calc( 100% - 120px); }
.dtable-form-wrapper > .dtable-form { margin-top: 25px; }
.dtable-form-wrapper > .dtable-form:first-child { margin-top: 0; }
.dtable-form-wrapper form:not(:first-child) { margin-top: 25px; }

/* 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; line-height: 1.5; align-self: center; }
.frm-input-row > .frm-input > span { display: inline-block; padding: .375rem .75rem; }
.frm-input-row.frm-self-center > .frm-input { align-self: center; }
.frm-input-row > .frm-file > input[type="file"] { display: none; }
.frm-input-row > .frm-file > label { display: inline-block; padding: .375rem .75rem; text-align: center; background-color: #e9ecef; border: 1px solid #ced4da; cursor: pointer; }
.frm-input-row > .frm-file > .file-name { display: inline-block; padding: .375rem .75rem; }
.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%; }
textarea.frm_input { width: 100%; height: 100%; min-height: 120px; }
.frm-input-row > .input-prepend { }
.frm-input-row > .input-prepend .frm_text { width: 100%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.frm-input-row > .input-prepend + div.frm-check { }
.frm-input-row > .input-prepend + div { margin-left: -1px; }
.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: 0 0 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; }
.frm-input-row > .frm-ml { margin-left: 5px; }
.frm-input-row > .frm-mr { margin-right: 5px; }
.frm-input-row > .frm-check { padding: .375rem .75rem; }
.frm-input-row > .frm-check > label { margin-left: 3px; cursor: pointer; }
.frm-input-row > .frm-check > label:not(:last-child) { margin-right: 10px; }
.frm-input-row > .frm-ml-auto { margin-left: auto; }
.frm-input-row > .minicolors { width: 120px; }
.frm-input-row .frm_text { display: inline-block; 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 .frm_full { width: 100%; }
.frm-input-row > .frm-input .frm_info { display: block; color: #1a79a8; font-weight: 600; margin-bottom: 8px; padding: 0; }
.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; }
.frm_num { width: 120px; }
.frm_info { display: block; color: #1a79a8; font-weight: 600; margin-bottom: 8px; padding: 0; }

/* flex table list */
.dtable-list { position: relative; width: 100%; }
.dtable-list > ul { width: 100%; overflow-x: auto; }
.dtable-list > ul::-webkit-scrollbar{ width: 0px; background: <?php echo $config_domain['cf_accent_color'];?>; box-sizing: border-box; border-radius: 8px;}
.dtable-list > ul::-webkit-scrollbar-thumb{ width: 0px; box-sizing: border-box; border-radius: 0; background: <?php echo $config_domain['cf_accent_color'];?>; }
.dtable-list > ul::-webkit-scrollbar-track{}
.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; align-items: center; }
.dtable-list.cdata > ul li > div { flex-direction: row; justify-content: unset; }
.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 > div.list-rowspan { padding: 0; }
.dtable-list > ul li > div.list-rowspan > .list-sub { flex: 1 1 auto; display: flex; width: 100%; }
.dtable-list > ul li > div.list-rowspan > .list-sub > span { padding: .5rem .75rem; }
.dtable-list > ul li > div.list-rowspan > .list-sub:not(:first-child) > span { border-top: 1px solid #60718b; }
.dtable-list > ul li > div.list-rowspan > .list-sub:first-child > span { flex: 1 1 100%; max-width: 100%; }
.dtable-list > ul li > div.list-rowspan > .list-sub > span { display: flex; text-align: center; flex: 1 1 33.33333%; max-width: 33.33333%; flex-direction: column; align-items: center; justify-content: center; }
.dtable-list > ul li > div.list-rowspan > .list-sub > span:not(:first-child) { border-left: 1px solid #60718b; }
.dtable-list > ul li > div.list-rowspan > .list-sub > span > .frm_input { width: 100%; }
.dtable-list > ul li.list-body > div.list-rowspan > .list-sub > span { border-color: #d6dce7; flex: 1 1 33.33333%; max-width: 33.33333%; }
.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 > div { background-color: #f3f3e7 !important; }
.dtable-list > ul li.list-body > div.wf-align-left { align-items: flex-start; }
.dtable-list > ul li.list-body > div.wf-align-right { align-items: flex-end; }
.dtable-list div.list-chk { flex: 0 0 40px; max-width: 40px; }
.dtable-list div.list-num { flex: 0 0 50px; max-width: 50px; }
.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 180px; }
.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 > ul li.list-body > div > select { width: 100%; max-width: 100%; }
.dtable-list > ul li.list-body > div > input { width: 100%; max-width: 100%; }
.dtable-list > ul li.list-body > div > .list-input { position: relative; display: flex; width: 100%; justify-content: center; }
.dtable-list > ul li.list-body > div > .list-input > .frm_input { flex: 1 1 auto; max-width: 70%; }
.dtable-list > ul li.list-body > div > .list-input > .frm_input + span { flex: 0 0 auto; display: inline-block; padding: .375rem .75rem; border: 1px solid #ddd; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; margin-left: -1px; color: #495057; white-space: nowrap; background-color: #e9ecef; border: 1px solid #ced4da; }
.dtable-list > ul li.list-body > div > .list-input > label { padding: 0 .375rem; }
.dtable-list.tbl-sky-blue > 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-sky-blue > ul li.list-head > div:first-child { border-left: 1px solid #d6dce7; }
.dtable-list.tbl-sky-blue > 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-sky-blue > ul li.list-body > div:first-child { border-left: 1px solid #d6dce7; }
.dtable-list > ul li.list-body2 > div.frm-input-row { flex-direction: row; justify-content: flex-start; }
.dtable-list > ul li.list-empty { width: 100%; padding: 50px; justify-content: center; }

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


/* alert help */
.alert { position: relative; margin: 10px 0; padding: .75rem 1.25rem; background: transparent; border: 1px solid #ddd; border-radius: .25rem; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/* entry */
.entry > .piece:first-child > .piece-btn .btn_confirm { display: none; }
.entry > .piece:not(:last-child) > .piece-btn .btn_append { display: none; }

/* menu roll */
.menu-box { }
.menu-box .card { padding: 25px; border: 1px solid #ddd; }
.menu-box h3 { font-size: 16px; font-weight: 600; margin-bottom: 15px; }

/* shift */
.shift {overflow:hidden; padding-left: 3rem;}
.shift:after { display:block; visibility:hidden; clear:both; content:"" }
.shift_strap { margin:0px 0px 2px 0px; display: flex; width:100%; border: 0; }
.shift_strap::after { content:""; clear:both; display:block; visibility:visible; }
.shift_strap h3 { display: block; margin:0px; padding:8px; text-align:center; background-color:#333; color:#fff; min-width:120px;letter-spacing:0px; }
.shift_strap .shift_strap_option { margin-left: auto; }
.shift_display { justify-content: space-between; }
.shift_display #display_item_cnt { margin-left: auto; align-self: center; font-size: 14px; }
.shift_tieup {clear:both;margin:0px; padding:0px;}
.shift_item { width: 450px;  max-width: 50%; padding: 10px 15px; border: 1px solid #ddd; }
.shift_arrow { align-self: center; padding: 0 25px; }
.goods_shift_option { display: flex; margin-bottom: 8px; }
.goods_shift_option > div:not(:last-child) { margin-right: 5px; }
ul.shift_cates,
ul.shift_items { margin:0px; padding:20px; width:100%; height:320px; background-color:#f9f9f9; border:1px solid #ddd; overflow-x:hidden; overflow-y:scroll; }
ul.shift_cates { overflow-y:auto; padding:1px; }
ul.shift_cates li { margin:0px;padding: .375rem .75rem;list-style:none; cursor:pointer; }
ul.shift_cates li:hover { background-color:#c0c0c0; color:#fff; }
ul.shift_cates li.on { background-color:#08a2cd; color:#fff; }
ul.shift_items { overflow-y:scroll; }
ul.shift_items li { position:relative; clear:both; margin:2px; padding:0px; list-style:none; border:1px solid #ccc; background-color:#fff; cursor:move; line-height:1.5; overflow:hidden; }
ul.shift_items li img { width: 100%; height: auto; }
ul.shift_items li dl { display: flex; padding: 12px; }
ul.shift_items li dl dt { width: 20%; }
ul.shift_items li dd {margin:0px;padding:0px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
ul.shift_items li dd > p { }
ul.shift_items li dd > p > span { display: inline-block; margin-right: 8px; }
ul.shift_items li dl dd.items_image { position:absolute; left:0px;top:0px; width:60px; height:60px; overflow:hidden; margin-right:10px; }
ul.shift_items li dl dd.items_image img { width: 100%; height: 100%; }
ul.shift_items li dl.dl_banner dt { position: relative; width: 100%; }
ul.shift_items li dl.dl_banner dt img { width: 100%; height: auto; }
ul.shift_items li dl.dl_banner dt p { position: absolute; top: 0; left: 0; bottom: 0; right: 0; line-height: 1; padding: 0 5px; }
ul.shift_items li dl.dl_banner dt p span { display: inline-block; padding: 5px 10px; background: #000; color: #fff; margin-bottom: 3px; font-size: 11px; opacity: 0.7; border-radius: 25px; }
.shift_btn { margin-top: 15px; display: flex; justify-content: space-between; }
.shift_btn .btn { padding: .375rem 1.5rem; }
ul.shift_items li.item_small dl dt img { width: auto; height: 60px; }
ul.shift_items li.item_small dl dd { align-self: center; }
.shift_item_count { text-align: right; height: 29px; margin-bottom: .5rem; line-height: 29px; padding-right: 16px; }
.shift_item_count b { padding: 0 3px; color: #e01010; font-weight: 600; font-size: 14px; }

/* model form */
.model-image-wrap { margin: 0 -5px; }
.model-image-wrap > .model-image-box { padding: 0 5px; flex: 1 1 16.666666%; max-width: 16.666666%; margin-bottom: 12px; }
.model-image-wrap > .model-image-box > .image-box { border: 1px solid #ddd; }
.model-image-wrap > .model-image-box > .image-box > .image-background { border-bottom: 1px solid #ddd; }
.model-image-wrap > .model-image-box > .image-box > .image-file { margin: 8px 0 8px 0; padding: 0 5px; }
.model-image-wrap > .model-image-box > .image-box > .image-color { padding: 0 5px; }
.model-image-wrap > .model-image-box > .image-box > .image-color > div:not(:last-child) { margin-right: 5px; }

/* shop,rental item form */
.goods-option .opt_type { border: 1px solid #ced4da; border-radius: 0; width: 80px; }
.goods-option .opt_type1 { border-right: 0; border-left: 1px solid transparent; }
.goods-option .opt_type.on { background-color: #007aff; border: 1px solid #007aff; color: #fff; }
.goods-option .opt_type.on + .opt_type { border-left: 0; }

.table_wrap { padding: 0 25px; margin-top: 15px; }
.opt_detail_wrap { display: table; width: 100%; border-left: 1px solid #d6dce7; border-top: 1px solid #d6dce7; }
.opt_detail_wrap div > span { display: inline-block; padding: .375rem 1.25rem; border: 1px solid; margin-right: 15px; }
.opt_detail_wrap div > span.opt_type_tle { background: #dd207a; color: #fff; border-color: #dd207a; }
.opt_detail_wrap div > span.opt_name_tle { background: #00ae34; color: #fff; border-color: #00ae34; }

.opt_detail_wrap .opt_list { display: table-row; }
.opt_detail_wrap .opt_list.opt_head { background: #eff3f9; }
.opt_detail_wrap .opt_list > div { display: table-cell; padding: 8px 8px; text-align: center; vertical-align: middle; border-right: 1px solid #d6dce7; border-bottom: 1px solid #d6dce7; }
.opt_detail_wrap .opt_list.opt_body > div { padding: 4px 8px; }
.opt_detail_wrap .opt_list.opt_union > div { padding: 0; }
.opt_detail_wrap .opt_list.opt_union.opt_body > div { padding: 0 8px; }
.opt_detail_wrap .opt_list.opt_union > div.optname > div.opt_union_name { padding: 4px 8px; }
.opt_detail_wrap .opt_list.opt_union > div.optname > div.opt_union_items { display: table; width: 100%; padding: 0; border-top: 1px solid #d6dce7; }
.opt_detail_wrap .opt_list.opt_union > div.optname > div.opt_union_items > div { display: table-cell; width: 50%; padding: 8px; vertical-align: middle; }
.opt_detail_wrap .opt_list.opt_union > div.optname > div.opt_union_items > div:not(:last-child) { border-right: 1px solid #d6dce7; }
.opt_detail_wrap .opt_list.opt_union.opt_body > div.optname > div.opt_union_items { border-top: 1px solid transparent; }
.opt_detail_wrap .opt_list.opt_body .frm_input { padding: 0; border: 0; border-radius: 0; outline: none; text-align: right; }
.opt_detail_wrap .opt_list.opt_body select { border: 0; border-radius: 0; width: 100%; }
.opt_detail_wrap .opt_list > div.optname { }
.opt_detail_wrap .opt_list > div.optitem { }
.opt_detail_wrap .opt_list > div.optprice { width: 120px; }
.opt_detail_wrap .opt_list > div.optpoint { width: 120px; }
.opt_detail_wrap .opt_list > div.optcnt { width: 120px; }
.opt_detail_wrap .opt_list > div.optuse { width: 120px; }
.opt_detail_wrap .opt_list > div.optdel { width: 60px; }
.btn_opt { background: #00ae34; color: #fff; border-color: #00ae34; }

.form_image_wrap { display: flex; flex-wrap: wrap; margin: 0 -10px; width: 100%; }
.form_image_wrap .form_image_card { width: 20%; padding: 0 10px; margin-bottom: 10px; }

/* mshop item form */
.itemtable { margin: 15px 0; }
.formbox { padding: 10px; background: #f7f7f7; border: 1px solid #e9e9e9; }
.formbox li { line-height: 30px; border-bottom: 1px solid #d6dce7;}
.formbox li.formbox-header { background: #eff3f9; border-bottom: 1px solid #d6dce7; }
.formbox li.formbox-header div { text-align: center; }
.formbox li.formbox-etc { background: #fff; border-bottom: 1px solid #d6dce7; }
.formbox li.formbox-etc div { position: relative; padding: 5px; text-align: center; }
.formbox li.formbox-etc div .bill_gpoint_all,
.formbox li.formbox-etc div .bill_spoint_all { width: 100%; height: calc(1.5em + .75rem + 2px); }
.formbox li.formbox-body div { position: relative; padding: 5px; text-align: center; }
.formbox li.formbox-body div.billname { line-height: 1.2; text-align: left; }
.formbox li.formbox-body div .bill-gpoint,
.formbox li.formbox-body div .bill-spoint,
.formbox li.formbox-body div .opt-point { width: 100%; height: calc(1.5em + .75rem + 2px); }
.formbox li div.formchk { flex: 0 0 30px; max-width: 30px; }
.formbox li div.billname { flex: 1 1 auto; max-width: calc( 100% - 56% + 60px ); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.formbox li div.billgongsi { flex: 0 0 28%; max-width: 28%; }
.formbox li div.billpoint { flex: 0 0 28%; max-width: 28%; }
.formbox li div.billbtn { flex: 0 0 30px; max-width: 30px; }
.formbox li div.billname_all { text-align: left; width: 30%; }
.formbox li div.opt-color { flex: 1 1 auto; max-width: calc( 100% - 34% + 200px ); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.formbox li div.opt-giga { flex: 0 0 70px; max-width: 70px; }
.formbox li div.opt-price { flex: 0 0 70px; max-width: 70px; }
.formbox li div.opt-point-div { flex: 0 0 17%; max-width: 17%; }
.formbox li div .sm-btn-del { position: absolute; background: #fff; color: #999; border-radius: 50%; border: 0; outline: 0; width: 18px; height: 18px; line-height: 18px; top: calc( 50% - 8px); right: 9px; text-align: center; }
.formbox li div .sm-btn-del:hover { color: #c80000;}
.formbox li div .my-rebate { display: block; margin-bottom: 3px; background: #eff3f9; border: 1px solid #d6dce7; color: #ff282e; }
.formbox li div .frm_input { width: 100%; }

.formbox-btn-area { position: relative; margin-top: 10px; }
.formbox-btn-area .btn-helper { color: #c80000; }
.btn:hover, .btn:focus { color: #fff; }
.btn-delete { background-color: #eff3f9; border: 1px solid #d6dce7; color: #636363; }
.btn-delete:hover, .btn-delete:focus { color: #636363; }
.btn-update { background-color: #0099cc; color: #fff; }
.work-message { display: none; position: absolute; top: 100%; left: 15px; padding: .375rem .75rem; width: calc( 100% - 30px ); height: auto; background: rgba(246,86,86); color: #fff; text-align: center; border-radius: .25rem; border: 0; font-size: 12px; z-index: 999; align-self: center!important; }
.item-area { position: relative; width: 100%; height: 100%; align-self: stretch!important; }
.item-empty { text-align: center; width: 100%; height: 100%; padding: 50px 0; background: #f7f7f7; border: 1px solid #e9e9e9; }
.itemcommon { margin-top: 30px; }

/* custom template, page template */
.item_style { margin: 10px 0; }
.box_item_wrap { position: relative; width: 100%; }
.template-subject-wrap { margin: 25px 15px 25px 15px; border: 1px dotted #ddd; padding: 18px; }
.template_image { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.template_image_box { flex: 1 1 33.333333%; max-width: 33.333333%; padding: 0 5px;}
.template_image_box .image-box { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 10px; }
.template_image_box .image-box .image-box-inner { width: 100%; display: flex; justify-content: space-between; }
.template_image_box .image-box .image-box-inner .image-card { flex: 1 1 49%; max-width: 49%; }
.template_image_box .image-box .image-box-inner .image-card > a { position: relative; display: inline-block; width: 100%; height: auto; background-size: 100%; background-repeat: no-repeat; background-position: center center; border: 1px solid #ddd; }
.template_image_box .image-box .image-box-inner .image-card > .image-card-body { }
.template_image_box .image-box .image-box-inner .image-card > .image-card-body > .image-card-file { margin: 12px 0 8px 0; }
.template_image_box .image-box .image-box-inner .image-card > .image-card-body > .image-card-file .custom-file-input { display: none; }
.template_image_box .image-box .image-box-inner .image-card > .image-card-body > .image-card-file .custom-file-label { display: inline-block; width: 100%; text-align: center; border: 1px solid #ddd; background: #fafafa; padding: 6px 0; }

/* template */
.sample_list { display: flex; margin: 15px 0; border: 1px solid #ddd; padding: 10px; }
.sample_list > .sample_box:not(:first-child) { margin-left: -1px; }

.layout-box { }
.layout-box > .frm-input { margin-right: 50px; width: 20%; max-width: 160px; text-align: center; }
.layout-box > .frm-input:last-child { margin-right: 0; }
.layout_box { display: flex; margin: 12px 0; width: 100%; }
.layout_box .mini_side_box { flex: 1 1 25%; max-width: 25%; height: 60px; border: 1px solid #ddd; }
.layout_box .mini_content_box { flex: 1 1 75%; max-width: 75%; height: 60px; border: 1px solid #ddd; margin: 0 5px; }
.layout_box .mini_content_full { flex: 1 1 100%; max-width: 100%; }
.layout_box .mini_content_small { flex: 1 1 50%; max-width: 50%; }