@charset "utf-8";


.file-button{ display: inline-block; height: 28px; line-height: 28px; border-radius:3px; padding: 0 10px; vertical-align: middle; background: #6d6e71; color: #ffffff; cursor: pointer; margin-right: 2px; }
.upload-name{ display: inline-block; height: 28px; padding: 0 10px; vertical-align: middle; border: 1px solid #bcbec0; min-width: 200px; color: #6d6e71; }


.blind{ width:0; height:0; font-size:0; line-height:0; text-indent:-9999px; position:absolute; left:0; top:0; }

.black{ color: var(--color--black) !important;  }
.blue{  color: var(--color--blue) !important; }
.red{   color: var(--color--red) !important;   }
.lightgray{ color: var(--color--lightgray) !important;  }
.red th, .red td{ color: var(--color--red) !important; }
.trBgRed{ background: #ffe5e5 !important; color: #000000 !important; }
.trBgGreen{ background: #def9da !important; color: #000000 !important; }
.font-b{ font-weight: bold !important; }
.font20{ font-size: 20px !important; }

.vf_ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline; float: left; width: auto; max-width: 95%; position: relative; }

.mw60{  min-width: 60px !important; }
.w10{   width:10px !important;  }
.w20{   width:20px !important;  }
.w30{   width:30px !important;  }
.w40{   width:40px !important;  }
.w50{   width:50px !important;  }
.w60{	width:60px !important;  }
.w70{	width:70px !important;  }
.w80{	width:80px !important;  }
.w90{	width:90px !important;  }
.w95{	width:95px !important;  }
.w97{	width:97px !important;  }
.w100{  width:100px !important; }
.w110{  width:110px !important; }
.w113{  width:113px !important; }
.w120{  width:120px !important; }
.w130{  width:130px !important; }
.w140{  width:140px !important; }
.w150{  width:150px !important; }
.w160{  width:160px !important; }
.w170{  width:170px !important; }
.w180{	width:180px !important; }
.w190{	width:190px !important; }
.w197{	width:197px !important; }
.w200{  width:200px !important; }
.w210{  width:210px !important; }
.w220{  width:220px !important; }
.w230{  width:230px !important; }
.w240{  width:240px !important; }
.w250{  width:250px !important; }
.w260{  width:260px !important; }
.w270{	width:270px !important; }
.w280{	width:280px !important; }
.w290{	width:290px !important; }
.w297{	width:297px !important; }
.w300{  width:300px !important; }
.w310{  width:310px !important; }
.w320{  width:320px !important; }
.w330{  width:330px !important; }
.w340{  width:340px !important; }
.w350{  width:350px !important; }
.w360{  width:360px !important; }
.w370{	width:370px !important; }
.w380{	width:380px !important; }
.w390{	width:390px !important; }
.w400{  width:400px !important; }
.w420{  width:420px !important; }
.w500{  width:500px !important; }
.w600{  width:600px !important; }
.w625{  width:625px !important; }
.w700{  width:700px !important; }
.w800{  width:800px !important; }
.w815{  width:815px !important; }
.w900{  width:900px !important; }
.w1000{	width:1000px !important;}
.w1130{	width:1130px !important;}
.w1600{	width:1600px !important;}
.w1p{   width:1% !important;    }
.w2p{   width:2% !important; 	}
.w3p{   width:3% !important; 	}
.w4p{   width:4% !important; 	}
.w5p{   width:5% !important; 	}
.w6p{   width:6% !important; 	}
.w7p{   width:7% !important; 	}
.w8p{   width:8% !important; 	}
.w9p{   width:9% !important; 	}
.w10p{  width:10% !important; 	}
.w11p{  width:11% !important; 	}
.w12p{  width:12% !important; 	}
.w13p{  width:13% !important; 	}
.w14p{  width:14% !important; 	}
.w15p{  width:15% !important; 	}
.w16p{  width:16% !important; 	}
.w17p{  width:17% !important; 	}
.w18p{  width:18% !important; 	}
.w19p{  width:19% !important; 	}
.w20p{  width:20% !important; 	}
.w21p{  width:21% !important; 	}
.w22p{  width:22% !important; 	}
.w23p{  width:23% !important; 	}
.w24p{  width:24% !important; 	}
.w25p{  width:25% !important; 	}
.w26p{  width:26% !important; 	}
.w27p{  width:27% !important; 	}
.w28p{  width:28% !important; 	}
.w29p{  width:29% !important; 	}
.w30p{  width:30% !important; 	}
.w31p{  width:31% !important; 	}
.w32p{  width:32% !important; 	}
.w33p{  width:33% !important; 	}
.w34p{  width:34% !important; 	}
.w35p{  width:35% !important; 	}
.w36p{  width:36% !important; 	}
.w37p{  width:37% !important; 	}
.w38p{  width:38% !important; 	}
.w39p{  width:39% !important; 	}
.w40p{  width:40% !important; 	}
.w41p{  width:41% !important; 	}
.w42p{  width:42% !important; 	}
.w43p{  width:43% !important; 	}
.w44p{  width:44% !important; 	}
.w45p{  width:45% !important; 	}
.w46p{  width:46% !important; 	}
.w47p{  width:47% !important; 	}
.w48p{  width:48% !important; 	}
.w49p{  width:49% !important; 	}
.w50p{  width:50% !important; 	}
.w51p{  width:51% !important; 	}
.w52p{  width:52% !important; 	}
.w53p{  width:53% !important; 	}
.w54p{  width:54% !important; 	}
.w55p{  width:55% !important; 	}
.w56p{  width:56% !important; 	}
.w57p{  width:57% !important; 	}
.w58p{  width:58% !important; 	}
.w59p{  width:59% !important; 	}
.w60p{  width:60% !important; 	}
.w61p{  width:61% !important; 	}
.w62p{  width:62% !important; 	}
.w63p{  width:63% !important; 	}
.w64p{  width:64% !important; 	}
.w65p{  width:65% !important; 	}
.w66p{  width:66% !important; 	}
.w67p{  width:67% !important; 	}
.w68p{  width:68% !important; 	}
.w69p{  width:69% !important; 	}
.w70p{  width:70% !important; 	}
.w71p{  width:71% !important; 	}
.w72p{  width:72% !important; 	}
.w73p{  width:73% !important; 	}
.w74p{  width:74% !important; 	}
.w75p{  width:75% !important; 	}
.w76p{  width:76% !important; 	}
.w77p{  width:77% !important; 	}
.w78p{  width:78% !important; 	}
.w79p{  width:79% !important; 	}
.w80p{  width:80% !important; 	}
.w81p{  width:81% !important; 	}
.w82p{  width:82% !important; 	}
.w83p{  width:83% !important; 	}
.w84p{  width:84% !important; 	}
.w85p{  width:85% !important; 	}
.w86p{  width:86% !important; 	}
.w87p{  width:87% !important; 	}
.w88p{  width:88% !important; 	}
.w89p{  width:89% !important; 	}
.w90p{	width:90% !important; 	}
.w91p{  width:91% !important; 	}
.w92p{  width:92% !important; 	}
.w93p{  width:93% !important; 	}
.w94p{  width:94% !important; 	}
.w95p{  width:95% !important; 	}
.w96p{  width:96% !important; 	}
.w97p{  width:97% !important; 	}
.w98p{  width:98% !important; 	}
.w99p{  width:99% !important; 	}
.w100p{	width:100% !important;	}

.h10{   height:10px !important;  }
.h20{   height:20px !important;  }
.h24{   height:24px !important;  }
.h30{   height:30px !important;  }
.h40{   height:40px !important;  }
.h50{   height:50px !important;  }
.h60{	height:60px !important;  }
.h70{	height:70px !important;  }
.h80{	height:80px !important;  }
.h90{	height:90px !important;  }
.h100{  height:100px !important; }
.h120{  height:120px !important; }
.h150{  height:150px !important; }
.h200{  height:200px !important; }
.h250{  height:250px !important; }
.h280{  height:280px !important; }
.h300{  height:300px !important; }
.h320{  height:320px !important; }
.h400{  height:400px !important; }
.h410{  height:410px !important; }
.h450{  height:450px !important; }
.h480{  height:480px !important; }
.h500{  height:500px !important; }
.h540{  height:540px !important; }
.h600{  height:600px !important; }
.h610{  height:610px !important; }
.h620{  height:620px !important; }
.h630{  height:630px !important; }
.h640{  height:640px !important; }
.h650{  height:650px !important; }
.h660{  height:660px !important; }
.h670{  height:670px !important; }
.h680{  height:680px !important; }
.h690{  height:690px !important; }
.h700{  height:700px !important; }
.h800{  height:800px !important; }
.h900{  height:900px !important; }
.h1000{	height:1000px !important;}
.h50p{  height:50% !important; 	}
.h100p{	height:100% !important;  }

.mh250{	min-height:250px !important; }
.mh300{	min-height:300px !important; }

.mt30m{ margin-top:-30px !important;}
.mt4{   margin-top:4px !important;  }
.mt5{   margin-top:5px !important;  }
.mt6{   margin-top:6px !important;  }
.mt10{  margin-top:10px !important; }
.mt20{  margin-top:20px !important; }
.mt30{  margin-top:30px !important; }
.mt40{  margin-top:40px !important; }
.mt50{  margin-top:50px !important; }
.mt60{  margin-top:60px !important; }
.mt70{  margin-top:70px !important; }
.mt80{  margin-top:80px !important; }
.mt0{   margin-top:0 !important;    }

.mb5{	margin-bottom:5px !important;   }
.mb10{  margin-bottom:10px !important;  }
.mb15{  margin-bottom:15px !important;  }
.mb20{  margin-bottom:20px !important;  }
.mb30{  margin-bottom:30px !important;  }
.mb40{  margin-bottom:40px !important;  }
.mb50{  margin-bottom:50px !important;  }
.mb60{  margin-bottom:60px !important;  }
.mb70{  margin-bottom:70px !important;  }
.mb80{  margin-bottom:80px !important;  }
.mb0{   margin-bottom:0 !important;     }

.ml0 {  margin-left:0 !important;   }
.ml3 {  margin-left:3px !important;   }
.ml5 {  margin-left:5px !important;   }
.ml10{  margin-left:10px !important;  }
.ml20{  margin-left:20px !important;  }
.ml30{  margin-left:30px !important;  }
.ml40{  margin-left:40px !important;  }
.ml50{  margin-left:50px !important;  }
.ml60{  margin-left:60px !important;  }

.mr0{   margin-right: 0 !important; }
.mr5{   margin-right: 5px !important;   }
.mr7{   margin-right:7px !important;   }
.mr10{  margin-right:10px !important;  }
.mr12{  margin-right:12px !important;  }
.mr20{  margin-right:20px !important;  }
.mr30{  margin-right:30px !important;  }
.mr40{  margin-right:40px !important;  }
.mr50{  margin-right:50px !important;  }
.mr60{  margin-right:60px !important;  }

.p00{  padding:0 !important;		}
.p05{  padding:5px !important;		}
.p10{  padding:10px !important;		}
.p20{  padding: 20px !important;    }
.p30{  padding: 30px !important;    }
.p50{  padding:50px !important;		}

.pt20{ padding-top: 20px !important; }
.pb8{ padding-bottom: 8px !important; }
.pl0{   padding-left: 0 !important; }
.pl5{ padding-left: 5px !important; }
.pl10{ padding-left: 10px !important; }
.pl20{ padding-left: 20px !important; }
.pr0{   padding-right: 0 !important;    }
.pr10{  padding-right: 10px !important; }

.align-l{   text-align:left !important;     }
.align-c{   text-align:center !important;   }
.align-r{   text-align:right !important;    }

.block-c{ margin: 0 auto !important; }

.inline{    display:inline-block !important;    }
.block{ display: block !important; }
.nonblock{ display: none !important; }
.inline-block{  display: inline-block;   }

.float-l{   float:left !important; }
.float-r{   float:right !important; }

.overflow-a{ overflow: auto; }
.overflow-x{ overflow-x: auto; }
.overflow-y{ overflow-y: auto; }
.overflow-h{ overflow: hidden; }

.clear-b{ clear: both !important; }

.cursor-p{ cursor:pointer; }

#searchKeyword{
    min-width: 260px;
}


#wrap{  position:relative; min-width:1600px; min-height:100vh; height:100%; padding-top:60px; }

/* LOGIN */
#login-wrap{
    width: 100%; min-width: 320px; height: 100%; background-color:var(--bg--skyblue);
    overflow: hidden;
}
#login-form{
    width: 100%; height: 100%;
    position:relative;
}
#login{
    width:400px;
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background-color: var(--color--white);
    padding: 40px; border-radius: 20px; box-shadow: 1px 1px 20px rgba(0,0,0,0.05), -1px -1px 20px rgba(0,0,0,0.05);

}
#login h1{ font-size:1.75em; font-weight: bold; color:var(--color--black); text-align:center; line-height:100%; margin-bottom:40px;   }
#login h1 strong{  color:var(--color--purple);  }
#login .login-id,
#login .login-pw{
    margin-bottom:10px; padding-left:50px; position:relative; background-color:var(--color--white); border-radius:10px; overflow:hidden; border:1px solid transparent;
    border: 1px solid var(--color--border);
}
#login .login-id:focus-within{  border-color:var(--color--purple); }
#login .login-pw:focus-within{ border-color:var(--color--purple);    }
#login .login-id::before,
#login .login-pw::before{
    content:""; width:24px; height:24px; display:block; position:absolute; left:15px; top:50%; transform:translate(0, -50%);
    background-color: var(--color--lightgray);
    mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
#login .login-id::before{
    mask-image:url("./../images/ico-user.svg"); -webkit-mask-image:url("./../images/ico-user.svg");
}
#login .login-pw::before{
    mask-image: url("./../images/ico-password.svg"); -webkit-mask-image: url("./../images/ico-password.svg"); mask-size: 28px;  -webkit-mask-size: 28px;
}
#login input[type="text"],
#login input[type="password"]{
    width:100%; height:50px; border-color:transparent; outline:none;
}
#login .btn-login{
    width:100%; height:80px; color:var(--color--white); font-size:var(--size--large); font-weight:500; background-color:var(--color--purple);
    text-align:center; border-radius:10px; border-color:transparent; margin-top:30px;
}
#login .server{
    width: 100%; text-align: center; padding-bottom: 10px;
}
#login-wrap .remote{
    bottom: 80px;
}



/* CONTAINER */
#container{ min-height:calc(100vh - 60px); height:calc(100% - 60px); position:relative;   }
#container:before,
#container:after{   content:""; display:table;  }
#container:after{   clear:both; }
#container.main{    height:calc(100vh - 60px); overflow:hidden;  }

/* CONTENTS */
#contents{  min-height:calc(100vh - 60px); height:100%; margin-left:260px; padding-bottom:60px;   }

.content-header {
    display: flex; justify-content: space-between; flex-wrap: wrap; align-items:center;
}
.container .content-header{
    padding: 15px 20px; background-color: var(--bg--skyblue); border-bottom: 1px solid var(--color--border2);
}
.content-header.vcenter { align-items: center; }
.content-header .title h1,
.content-header .title h2{
    font-size:var(--size--medium); color:var(--color--blue); font-weight:bold;
}
.content-header .title .shop-name{
    height:24px; line-height:24px;
    background-color:var(--color--hidden); color:var(--color--white); font-weight:normal; font-size:var(--size--small); margin-left:10px; border-radius:5px; padding:0 10px; display:inline-block;
}
.content-header .breadcrumb > ul{
    display:flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: center;
}
.content-header .breadcrumb > ul > li{
    font-size:var(--size--small); color:var(--color--hidden); font-weight:normal; display:block;
}
.content-header .breadcrumb > ul > li::after{
    content: "/"; font-size: var(--size--small); margin: 0 10px;
}
.content-header .breadcrumb > ul > li:last-child::after{
    display: none;
}
.content-header .breadcrumb > ul > li:first-child{
    width:18px; height:18px; text-indent:-9999px; position:relative;
    padding-left:0; background:none; margin: 0 5px 0 0;
}
.content-header .breadcrumb > ul > li:first-child::before{
    content:""; width:100%; height:100%; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background-color: var(--color--lightgray);
    mask-image: url("./../images/ico-home.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-home.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.content-header .breadcrumb > ul > li:last-child{   color:var(--color--gray);   }
.content-header.no-flex { display: block; }
.content-header .input-group select { min-width: 100px; }
.content-body + .content-header { margin-top: 60px; }
.content-header.content-sm,
.content-body.content-sm { max-width: 800px; }

.content-header .pull-right .btn.scroll-fix.is-fixed { right: 50px; top: 120px; z-index: 1; }
.content-header.content-detail .title{
    display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center;
}
.content-header.content-detail .title .ico-back{
    margin-left: -10px;
}
.content-header.content-detail .title .ico-back::before{
    background-color: var(--color--blue); mask-size: 80%; -webkit-mask-size: 50%;
}
.content-header.content-detail h1,
.content-header.content-detail h2{
    background:none; display:inline-block; margin-left:5px;
}
.content-header.content-detail h1 small,
.content-header.content-detail h2 small{    color:var(--color--gray); font-weight:normal; font-size:inherit;   }


.container .content-body {
    position: relative;
}
.container .content-body.content{
    padding: 15px;
}
.content-body.content-body-fluid  { flex: 1; overflow: hidden; }



/* FORM */
/* form filter */
.form-filter { margin-bottom: 15px; }
.form-filter > form{    width:100%; display:block;  }
.form-checkbox { display: flex; line-height:36px; }
.form-checkbox label { margin-left: 10px; }
.form-filter .form { padding-left: 100px; margin: 5px 0; }
.form-detail:before { content:''; width: 4px; height: 4px; border-radius: 4px; background: #000; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.form-detail { background: none; color: #000; font-size: 0.9rem; }
.form-filter .form > span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
#sales-popup .form-filter{
    background:none; padding:0;
}
#sales-popup .form-filter > form{
    display:block;
}
#sales-popup .form-filter > form::before,
#sales-popup .form-filter > form::after{
    content:""; display:table;
}
#sales-popup .form-filter > form::after{
    clear:both;
}
#sales-popup .form-filter .form{
    padding:0;
}
#sales-popup .search-tbl1 .search-tbl-form{
    width: calc(100% - 140px);
}
#sales-popup .search-tbl1 .search-tbl-btns{
    width: 140px;
}
.sales-calendar-pop #salesDate{
    width: 90px;
}
.sales-calendar-pop .ico-prev,
.sales-calendar-pop .ico-next{
    border: 1px solid var(--color--border); border-radius: 5px;
}
.sales-calendar-pop .ico-prev::before,
.sales-calendar-pop .ico-next::before{
    mask-size: 80%; -webkit-mask-size: 80%;
}
.form-filter .form-period{
    float:left; display:block;
    padding-left:0; margin:0; background-color: var(--bg--gray2); border-radius: 5px;
}
.form-filter .form-period label{
    display:inline-block; position:relative;
}
.form-filter .form-period label > input[type="radio"]{
    width:0; height:0; line-height:0; position:absolute; display:none;
}
.form-filter .form-period label > span{
    height:50px; line-height:50px; border-radius:10px; display:block; margin:5px;
    padding:0 15px; font-size:18px; font-weight:300; color:var(--color--inactive);
}
.form-filter .form-period label > input[type="radio"]:checked + span{
    background-color:#ffffff; box-shadow:1px 1px 5px rgba(0,0,0,0.05), -1px -1px 5px rgba(0,0,0,0.05);
    font-weight:normal; color:var(--color--black);
}
.form-period-choice{
    float:left; display:block; margin-left:5px;
}
.form-filter + .tabset{
    border: 1px solid var(--color--border);
}

#sales-popup{
    min-width: 320px; padding:20px;
}

#sales-popup .form-filter .form-period label > span{
    height:40px; line-height:40px; box-shadow: none; border-radius: 5px;
}

#sales-popup .form-filter .form-daterange{
    height:50px; border:1px solid var(--color--border); border-radius:10px; margin:0; overflow:hidden; padding:0 10px; display:inline-block;
}
#sales-popup .form-filter .form-daterange input[type="date"]{
    width:160px;
    border:none; height:100%; outline:none; font-size:18px; font-weight:300; color:var(--color--black);
}
#sales-popup .form-filter .form-daterange select{
    border:none; height:100%; outline:none; font-size:18px; font-weight:300; color:var(--color--black);
}
.form.form-daterange > em{
    padding:0 10px;
}
#sales-popup .form-filter .search-submit{
    float:left; display:block;
    height:50px; background-color:var(--color--purple); color: var(--color--white); font-weight:bold; font-size: 20px;
    border-color:transparent; margin-left:10px; padding:0 20px; border-radius:10px;
}
#sales-popup .form-filter .search-submit::before{
    content:""; width:24px; height:24px; display:inline-block; vertical-align:middle; margin-right:5px; position:relative; top:-2px; background-color: var(--color--white);
    mask-image: url("./../images/ico-search.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-search.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.sales-report{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center; gap: 40px;
    text-align: center; border: 1px solid var(--color--border); border-radius: 5px; padding: 20px;
}
.sales-report > dl{
    width: 100%;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: center; gap: 10px;
    position: relative;
}
.sales-report > dl::before{
    content: ""; width: 60px; height: 60px; display: inline-block;
    background-color: var(--color--lightgray);
    mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.sales-report > dl > dt{
    font-size: var(--size--large); font-weight: normal; color: var(--color--gray);
}
.sales-report > dl > dd{
    font-size: 1.2rem; font-weight: 600; color: var(--color--black);
}
.sales-report > dl > dd .unpayment{
    color: var(--color--red); font-size: var(--size--small); border-radius: 10px; padding: 5px 10px;
    background-color: var(--bg--gray2); font-weight: 500; border: 1px solid var(--color--border2);
}
.sales-date{
    font-size: 1.2rem; color: var(--color--lightgray);
}
.sales-report .sales-order-price::before{
    mask-image: url("./../images/ico-cart.svg");
    -webkit-mask-image: url("./../images/ico-cart.svg");
}
.sales-report .sales-discount-price::before{
    mask-image: url("./../images/ico-discount.svg");
    -webkit-mask-image: url("./../images/ico-discount.svg");
}
.sales-report .sales-payment-price::before{
    mask-image: url("./../images/ico-sales.svg");
    -webkit-mask-image: url("./../images/ico-sales.svg");
}

.sales-price{
    border:1px solid var(--color--border); border-radius: 5px; padding: 20px;
    background-color:var(--color--white);
    display: grid; grid-template-columns: 1fr 1fr 1fr 240px; gap: 10px; margin-bottom: 40px;
}
.sales-price .sales{
    width: 100%; position:relative; padding: 10px;
}
.sales-price .sales dl{
    display:inline-block; text-align:left; padding: 40px; position: relative;
}
.sales-price .sales dl dt{
    font-size: var(--size--medium); font-weight:normal; color:var(--color--gray); margin-bottom:10px;
}
.sales-price .sales.current{
    color: var(--color--purple);
}
.sales-price .sales.current dl dt{
    color:var(--color--blue); position: relative;
}
.sales-price .sales.current dl dt::after{
    content: ""; width: 10px; height: 10px; display: inline-block; background-color: var(--color--blue);
    transform: rotate(90deg); margin-left: 5px;
    mask-image: url("./../images/arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-normal.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.sales-price .sales dl dd{
    font-size: 1.2em; font-weight: 600; color:var(--color--black);
}
.sales-price .sales.current dl dd{
    color:var(--color--blue);
}
.sales-price .sales.sales-cancel::before{
    content: "-"; width: 30px; height: 30px; display: block; border-radius: 50%; color: var(--color--white);
    background-color: var(--color--red); text-align: center; font-size: 1.8em; font-weight: 500; line-height: 26px;
    position: absolute; left: -50%; top: 50%; transform: translate(50%, -50%);
}
.sales-price .sales.sales-sum::before{
    content: "="; width: 30px; height: 30px; display: block; border-radius: 50%; color: var(--color--white);
    background-color: var(--color--gray); text-align: center; font-size: 1.8em; font-weight: 500; line-height: 26px;
    position: absolute; left: -50%; top: 50%; transform: translate(50%, -50%);
}
.sales-price .sales-payment{
    background-color: var(--bg--gray2); border-radius: 5px;
}
.sales-price .sales-payment > ul{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: flex-start;
    gap: 5px;
}
.sales-price .sales-payment > ul > li{
    width: 100%;
    padding-left: 20px; position: relative; color: var(--color--black);
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
}
.sales-price .sales-payment > ul > li::before{
    content: ""; width: 10px; height: 10px; display: block; border-radius: 50%; background-color: var(--color--gray);
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.sales-price .sales-payment > ul > li:first-child::before{
    background-color: var(--color--blue);
}
.sales-price .sales-payment > ul > li:nth-child(2)::before{
    background-color: var(--color--green);
}
.sales-price .sales-payment > ul > li:nth-child(3)::before{
    background-color: var(--color--brown);
}
.sales-price .sales-payment > ul > li:nth-child(4)::before{
    background-color: var(--color--mint);
}
.sales-price .sales-payment > ul > li:nth-child(5)::before{
    background-color: var(--color--red);
}
.sales-price .sales-payment > ul > li:nth-child(6)::before{
    background-color: var(--color--purple);
}
.sales-price .sales-payment > ul > li > p{
    width: 100%;
}
.sales-price .sales-payment > ul > li > p:last-child{
    text-align: right;
}

.sales-price2{
    border:1px solid var(--color--border); border-radius: 5px; padding: 20px;
    background-color:var(--color--white);
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px;
}
.sales-price2 .sales{
    width: 100%; position:relative; padding: 10px;
}
.sales-price2 .sales dl{
    display:inline-block; text-align:left; padding: 10px; position: relative;
}
.sales-price2 .sales dl dt{
    font-size: var(--size--medium); font-weight:normal; color:var(--color--gray); margin-bottom:10px;
}
.sales-price2 .sales dl dd{
    font-size: 1.2em; font-weight: 600; color:var(--color--black);
}


.sales-list{
    border:1px solid var(--color--border); border-radius:10px;
}
.sales-list-top{
    padding:10px 20px;
}
.sales-list-top::before,
.sales-list-top::after{
    content:""; display:table;
}
.sales-list-top::after{
    clear:both;
}

#sales-popup .sales-popup-title{    padding:0 10px 10px 10px; border-bottom:1px solid var(--color--border); margin-bottom:15px;   }
#sales-popup .sales-popup-title h1{ color:var(--color--black); font-weight:500; line-height:100%; font-size:24px; }
#sales-popup .sales-price{  padding:5px;   }
#sales-popup .sales-price .sales dl{    padding:10px 0 10px 0;}
#sales-popup .sales-price .sales dl dt{ font-size:16px; margin-bottom:5px; }
#sales-popup .sales-price .sales dl dd{ font-size:20px; letter-spacing: -0.03rem; }
#sales-popup .paging{   margin:20px 0;  }
#sales-popup .list-tbl table thead tr th{   padding: 10px;  }

.today-date{
    text-align: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items:center;
}
.today-date h4{
    font-size: var(--size--large); font-weight: bold; color: var(--color--black); margin: 0 10px;
}

.today-sales{
    margin-top: 20px;
}
.today-sales > div{
    border-top: 1px solid var(--color--border); margin-top: 10px; padding: 10px 0;
}
.today-sales > div > div,
.today-sales > div > dl{
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
    padding: 5px;
}
.today-sales > div:last-child{
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--color--border); margin-top: 0; padding: 15px 5px;
}
.today-sales > dl > dt,
.today-sales > dl > dd{
    font-size: var(--size--medium); font-weight: normal;
}
.today-sales > div h4,
.today-sales > div p{
    font-size: var(--size--medium); color: var(--color--black); font-weight: 500;
}
.today-business-hours{
    margin-top: 20px; border-radius: 10px; border: 1px solid var(--color--border); position: relative;
    font-size: var(--size--regular); padding: 15px;
}
.today-business-hours > p{
    position: relative; width: 100%; padding-left: 20px;
}
.today-business-hours > p::before{
    content: ""; width: 16px; height: 16px; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: var(--color--gray);
    mask-image: url("./../images/ico-clock.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-clock.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

/* Calendar Lib */
#calendar.fc .fc-toolbar-title{
    color: var(--color--black); font-size: 1.5em;
}
#calendar.fc .fc-button-group{
    gap: 5px;
}
#calendar.fc .fc-button-primary{
    background-color: var(--color--white); color: var(--color--gray); border: 1px solid var(--color--border);
}
#calendar.fc .fc-prev-button,
#calendar.fc .fc-next-button{
    border-radius: 50%; aspect-ratio: 1/1; outline: none;
}
#calendar.fc .fc-toolbar.fc-header-toolbar{
    margin-bottom: 10px;
}
#calendar.fc-theme-standard td,
#calendar.fc-theme-standard th{
    border-color: var(--color--border2);
}
#calendar.fc-theme-standard th{
    background-color: var(--bg--gray2); color: var(--color--black); font-weight: 500;
}
#calendar.fc-theme-standard th.fc-day-sun{
    color: var(--color--red);
}
#calendar.fc-theme-standard th.fc-day-sat{
    color: var(--color--blue);
}
#calendar.fc .fc-daygrid-day-number{
    margin: 5px;
}
#calendar.fc .fc-daygrid-day.fc-day-today{
    background-color: var(--color--white);
}
#calendar.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top a{
    font-weight: bold; background-color: var(--color--purple); border-radius: 10px; color: var(--color--white);
}
#calendar.fc .fc-daygrid-body-balanced .fc-daygrid-day-events{
    left: 10px; bottom: 0; height: 40px;
}
#calendar .fc-h-event .fc-event-main{
    line-height: 100%;
}
#calendar .fc-event-selected,
#calendar .fc-event:focus{
    box-shadow: none;
}
#calendar .fc-event-selected:after,
#calendar .fc-event:focus:after{
    background: none;
}
#calendar.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{
    width: 100%; min-height: auto;
    position: absolute; right: 0; bottom: 5px;
}
#calendar.fc-direction-ltr .fc-daygrid-event.fc-event-end,
#calendar.fc-direction-rtl .fc-daygrid-event.fc-event-start{
    font-weight: 500; padding: 0 0 2px 10px;
}
#calendar.fc-direction-ltr .fc-daygrid-event.fc-event-end .fc-event-title-container,
#calendar.fc-direction-rtl .fc-daygrid-event.fc-event-start .fc-event-title-container{
    text-align: right; padding-right: 6px;
}
#calendar.fc-direction-ltr .fc-daygrid-event.fc-event-end.plus .fc-event-title{
    text-overflow: ellipsis; white-space: nowrap;
}
#calendar.fc-direction-ltr .fc-daygrid-event.fc-event-end.plus .fc-event-title::before{
    width: 10px; content: "+"; display: inline-block; text-align: center;
}
#calendar.fc-direction-ltr .fc-daygrid-event.fc-event-end.minus .fc-event-title::before{
    width: 10px; content: "-"; display: inline-block; text-align: center;
}
#calendar.fc-direction-ltr .fc-daygrid-event.fc-event-end.card .fc-event-title::before{
    width: 10px; content: ""; display: inline-block; text-align: center;
}
#calendar.fc-direction-ltr .fc-daygrid-day-frame .fc-daygrid-day-bg{
    display: none;
}




.form-select { display: flex; font-size: 0.875em; }
.form-select div { margin-right: 20px; }



.main-tabs{ background-color:#f1f2f2; border-bottom:1px solid #d1d3d4;     }
.main-tabs > ul:before,
.main-tabs > ul:after{  content:""; display:table;  }
.main-tabs > ul:after{  clear:both; }
.main-tabs > ul > li{   float:left; display:inline-block; border-right:1px solid #d1d3d4;  }
.main-tabs > ul > li > a{   display:block; height:40px; line-height:40px; font-size:15px; font-weight:normal; color:#808285; padding:0 40px; transform:skew(-0.1deg);    }
.main-tabs > ul > li > a.current{   background-color:#ffffff; color:#000000; border-top:2px solid #314350;  }



.col{   float:left; display:inline-block;   }
.col.first{ margin-left:0;  }
.col2-1{ width:calc(50% - 10px); margin-left:20px;   }





/* SUB title CSS 추가 CJM 21.05.27 */
.sub-title{		padding:12px 1px;  }
.sub-title:before,
.sub-title:after{	content:""; display:table;	}
.sub-title:after{	clear:both;	}
/*.sub-title h2,*/
/*.sub-title h3,*/
/*.sub-title h4{*/
/*	font-size:16px; font-weight:normal; color:#000000; padding-left:20px; background:url("./../images/ico-dashboard-title.svg"); background-repeat:no-repeat; background-position:left 0; background-size:14px; transform:skew(-0.1deg); line-height:120%;*/
/*	float:left; display:inline-block;*/
/*}*/
.sub-title .page-count{	float:left; display:inline-block; margin:-5px 0 0 10px; height:24px; line-height:24px; padding:0 15px; border-radius:30px; background-color:#0091a0; color:#ffffff;	}

.sub-title-search{ margin-top: -5px !important; }
.sub-title-search dl{ float: left; margin-right: 5px; }
.sub-title-search dl dt{     float: left; line-height: 26px; margin-right: 5px; font-weight: bold; color: #000000; }
.sub-title-search dl dd{     float: left; }



/* LIST TABLE CURSOR:POINTER */
/*기본*/
.list-tbl{ margin-bottom: 30px; }
.list-count{   display:inline-block; text-align:left; margin-bottom:10px;  }
.list-tbl table{   width:100%; table-layout:fixed; }
.list-tbl table a:visited{ color:#6d6e71 !important; }
.list-tbl table tbody tr.brand-menu{    background-color:#fbf7f0;   }
.list-tbl table thead tr th{
    font-size:var(--size--regular); font-weight:500; color:var(--color--black); background-color:var(--bg--gray2); text-align:center; padding:15px 10px;
    position: sticky; top: 0; z-index: 1; border-bottom:1px solid var(--color--border);
}
.list-tbl table thead tr th.sticky-th-two{ top: 36px; }
.list-tbl table tbody tr td{
    font-size:var(--size--small); font-weight:normal; color:var(--color--gray); text-align:center; padding:10px; border-bottom:1px solid var(--color--border2); /* overflow:hidden; text-overflow:ellipsis; white-space:nowrap; */ position:relative;
    word-break:break-word;
}
.list-tbl table tbody tr:hover{ background-color:var(--bg--skyblue);    }
.list-tbl table tbody tr td:hover{  text-decoration:underline;  }
.text-over{
    min-width:200px;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align: left;
}
.text-over2{
    min-width:200px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    width: 100%; text-align: left;
}
.list-tbl table tbody tr td a{  color:var(--color--blue);   }
.list-tbl table tbody tr td .payment-tooltip{
    width:220px; display:none;
    position:absolute; left:100px; top:50%; transform:translate(0, -50%); z-index:9; color:var(--color--white);
    background-color:var(--color--gray);  font-size:14px; padding:10px; border-radius:10px; font-weight:300;
}
.list-tbl table tbody tr td .payment-tooltip::before{
    content:" "; border:10px solid var(--color--gray); border-top-color:transparent; border-bottom-color:transparent; border-left:none; position:absolute; left:-10px; top:50%; transform:translate(0, -50%);
}
.list-tbl table tbody tr td.over-txt br{	display:none;	}
.list-tbl .board-count{ margin-bottom:10px; text-align:left;    }
.list-tbl table tbody tr td [class^="btn-"] + *,
.list-tbl table tbody tr td input[type="text"] + *,
.list-tbl table tbody tr td select + *{    margin-left:4px;   }


/*
.list-tbl table.scrollTable{ table-layout: auto; }
.list-tbl table.scrollTable tbody tr td{ overflow: visible; text-overflow: clip; }
*/
/*선택된 그리드 배경색*/
.list-tbl-selected{ margin-bottom: 30px; }
.list-count{   display:inline-block; text-align:left; margin-bottom:10px;  }
.list-tbl-selected table{   width:100%; border-left:1px solid #dcddde; /*border-top:1px solid #1bb0bf;*/ border-collapse: separate; table-layout:fixed; }
.list-tbl-selected table a:visited{ color:#6d6e71 !important; }
.list-tbl-selected table tbody tr{	cursor: pointer;	}
.list-tbl-selected table tbody tr:hover,
.list-tbl-selected table tbody tr:nth-of-type(even):hover{ background: #f3f1fd; }
.list-tbl-selected table tbody tr:nth-of-type(even){ background: #eefbfb; }
.list-tbl-selected table thead tr:nth-of-type(1) th{ border-top:1px solid #1bb0bf; }
.list-tbl-selected table thead tr th{  font-size:14px; font-weight:normal; color:#000000; border-right:1px solid #dcddde; background-color:#f6f6f6; text-align:center; padding:8px; border-bottom:1px solid #dcddde; position: sticky; top: 0; z-index: 1; }
.list-tbl-selected table thead tr th.sticky-th-two{ top: 36px; }
.list-tbl-selected table tbody tr td{   font-size:14px; font-weight:normal; color:#6d6e71; border-right:1px solid #dcddde; text-align:center; padding:8px; border-bottom:1px solid #dcddde; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;  }
.list-tbl-selected table tbody tr td.over-txt br{	display:none;	}
.list-tbl-selected .board-count{ margin-bottom:10px; text-align:left;    }
.list-tbl-selected .active{ background: #e0f7fb; }

.scroll-tbl-head{	position:relative;	}
.scroll-tbl-head thead{	width:calc(100% - 20px); 	}
.scroll-tbl-head:after{	content:""; width:16px; height:calc(100% - 2px); position:absolute; right:0; top:0; background-color:#f6f6f6; border-top:1px solid #1bb0bf; border-right:1px solid #dcddde; }


.responsive-tbl{    overflow-x:scroll;  }


/* GRID TABLE */
/*.grid-tbl-head .grid-tbl-rows,*/
/*.grid-tbl-body .grid-tbl-rows{*/
/*    display:grid; grid-template-columns:60px 200px 300px 100px 120px 160px 140px 140px 140px 120px 120px; align-items:center;*/
/*}*/
.grid-tbl-head{
    border: 1px solid var(--color--border);
}
.grid-tbl-body{
    border: 1px solid var(--color--border); border-top: none; border-bottom: none;
}
.grid-tbl-head .grid-tbl-rows,
.grid-tbl-body .grid-tbl-rows{
    display:grid; grid-template-columns:60px 200px 300px 0.5fr 1fr 1fr 1fr 1fr 1fr 0.5fr 0.5fr; align-items: stretch; align-content:center; justify-items:stretch; justify-content:space-between;
    background-color: var(--color--border); gap: 1px;
}
.grid-tbl-head .grid-tbl-rows{
    text-align:center; font-size:var(--size--regular); color:var(--color--black); font-weight:500; position:relative;
}
.grid-tbl-head .grid-tbl-rows > div{
    background-color: var(--bg--gray2);
}
.grid-tbl-body > div.over{ border:1px dashed var(--color--hidden); position:relative; z-index: 999999; }
.grid-tbl-body .grid-tbl-rows .text-over{   width: 100%; padding: 0 10px;    }
.grid-tbl-body .grid-tbl-rows.drag{ box-shadow:0 0 20px rgba(0,0,0,0.1); z-index:100; }
.grid-tbl-head .grid-tbl-rows > div{
    padding: 10px;
}
.grid-tbl-body .grid-tbl-rows{
    text-align:center; font-size:var(--size--regular); color:var(--color--gray); font-weight:500; position:relative; word-break:keep-all;
    border-bottom: 1px solid var(--color--border);
}
.grid-tbl-body .grid-tbl-rows > div{
    min-height: 40px;
    padding: 5px; font-weight:normal; background-color: var(--color--white);
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;
}
.grid-tbl-body .grid-tbl-rows:hover > div{
    background-color: var(--bg--skyblue);
}
.grid-tbl-body .grid-tbl-rows > div button + button{    margin-left:5px;    }
.grid-tbl-body .grid-tbl-rows .menu-category{
    font-weight: 500; color: var(--color--black);
    text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.grid-tbl-body .grid-tbl-rows .grid-menu-product{
    color:var(--color--black); text-align:left; justify-content: space-between; gap: 10px;
}
.grid-tbl-body .grid-tbl-rows .grid-menu-product .grid-menu-signature{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: center; gap: 3px;
}
.grid-tbl-body .grid-tbl-rows .grid-menu-product .grid-menu-signature .status-item{
    min-width: 20px;
}
.grid-tbl-body .grid-tbl-rows .grid-menu-platform span::before{
    content: ", ";
}
.grid-tbl-body .grid-tbl-rows .grid-menu-platform span:first-of-type::before{
    display: none;
}
.grid-tbl-body .grid-tbl-rows .more{    display:none;   }
.grid-tbl-body .grid-tbl-rows .ico-category{    cursor:move;    }
.grid-tbl .no-data{    text-align:center; padding:20px 10px; border-bottom:1px solid var(--color--border2);    }
.grid-tbl-body .grid-tbl-rows a{    color:var(--color--blue);   }
.grid-tbl-body .grid-tbl-rows a:hover{  text-decoration:underline;  }
.grid-tbl-body .grid-tbl-rows .word-ba{  word-break:break-all;   }

.grid-tbl-body .grid-tbl-rows [class^="btn-"]{
    height: 28px; background-color: var(--color--white); color: var(--color--gray); border: 1px solid var(--color--border);
}
.grid-tbl-body .grid-tbl-rows .btn-purple{
    background-color: var(--color--purple); border-color: transparent; color: var(--color--white);
}
.grid-tbl-body .grid-tbl-rows .btn-lightgray{
    background-color: var(--color--lightgray); border-color: transparent; color: var(--color--white);
}
.grid-tbl-body .grid-tbl-rows [class^="btn-"]::before{
    width: 14px; height: 14px;
    background-color: var(--color--gray);
}
.grid-tbl-body .grid-tbl-rows .btn-red{
    background-color: var(--color--red); color: var(--color--white); border-color: transparent;
}
.grid-tbl-body .grid-tbl-rows .btn-cancel::before{
    width: 14px; height: 14px;
}
.grid-tbl-body .grid-tbl-rows .btn-small{
    height: 20px; padding: 0 5px; margin-left: 10px;
}
.grid-tbl-body .grid-tbl-rows .btn-copy::before{
    mask-image: url("./../images/ico-copy.svg");
}
.grid-tbl-body .grid-tbl-rows .btn-terminate::before{
    mask-image: url("./../images/ico-terminate.svg");
    -webkit-mask-image: url("./../images/ico-terminate.svg");
}
.grid-tbl-body .grid-tbl-rows .btn-modify::before{
    width: 16px; height: 16px;
    mask-image: url("./../images/ico-modify.svg");
    -webkit-mask-image: url("./../images/ico-modify.svg");
}
.grid-tbl-body .grid-tbl-rows .btn-delete::before{
    width: 18px; height: 18px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-delete.svg");
    -webkit-mask-image: url("./../images/ico-delete.svg");
}
.grid-tbl-body .grid-tbl-rows .btn-save::before{
    width: 16px; height: 16px;
    mask-image: url("./../images/ico-save.svg");
    -webkit-mask-image: url("./../images/ico-save.svg");
}
.grid-tbl-head .grid-tbl-rows .ui-label,
.grid-tbl-body .grid-tbl-rows .ui-label{
    margin: 0;
}

.option-b-tbl .grid-tbl-head .grid-tbl-rows,
.option-b-tbl .grid-tbl-body .grid-tbl-rows{    grid-template-columns:60px 200px 12fr 5fr 2fr 2fr; }
.option-b-tbl .grid-tbl-body .grid-tbl-rows{    cursor:pointer; }
.option-b-tbl .grid-tbl-body .grid-tbl-rows .grid-menu-category{   width:auto; min-width:auto; max-width:200px !important; }

.menu-tbl .grid-tbl-head .grid-tbl-rows,
.menu-tbl .grid-tbl-body .grid-tbl-rows{  grid-template-columns:60px 200px 400px 0.4fr 0.2fr 0.2fr 0.3fr 0.3fr 0.1fr; }
.menu-tbl .grid-tbl-body .grid-tbl-rows{    cursor:pointer; }
.menu-tbl .grid-tbl-body .grid-tbl-rows .grid-menu-category{   width:auto;  }
.menu-tbl .grid-tbl-body .grid-tbl-rows .grid-menu-image .ico-check::before{
    mask-size: 80%; -webkit-mask-size: 80%; background-color: var(--color--border);
}

.menu-pop-tbl .grid-tbl-head .grid-tbl-rows,
.menu-pop-tbl .grid-tbl-body .grid-tbl-rows{  grid-template-columns:60px 1fr 1fr 1fr 1fr; }

.option-tbl .grid-tbl-head .grid-tbl-rows,
.option-tbl .grid-tbl-body .grid-tbl-rows{  grid-template-columns:60px 300px 400px 200px 0.3fr 0.3fr 0.3fr 0.2fr; }
.option-tbl .grid-tbl-body .grid-tbl-rows{  cursor:pointer; }

.brand-tbl .grid-tbl-head .grid-tbl-rows,
.brand-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.brand-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.brand-tbl .grid-tbl-body .brand-tbl-name{  color:var(--color--black);  }
.grid-tbl-body .grid-tbl-rows .brand-category{
    height:28px; line-height:28px; display:block; border:1px solid var(--color--border); color:var(--color--gray); font-weight:normal; text-align:center; border-radius:5px;
    text-overflow:ellipsis; white-space:nowrap; overflow:hidden; padding:0 10px;
}
.grid-tbl-more{ text-align:center;  }
.grid-tbl-more > a{ display:inline-block; color:var(--color--gray); padding:10px; font-size:var(--size--regular);  }
.grid-tbl-more > a::after{
    content:""; width:14px; height:14px; display:inline-block; vertical-align:middle; margin-left:10px; position:relative; top:-1px;
    background-color: var(--color--gray);
    mask-image: url("./../images/arrow-normaldown.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-normaldown.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.grid-tbl-more > a:hover::after{
    animation:gridMore 0.8s ease infinite; transition:all 0.4s ease;
}
@keyframes gridMore {
    0%{
        top:-4px;
    }
    100%{
        top:2px;
    }
}

.stamp-tbl .grid-tbl-head .grid-tbl-rows,
.stamp-tbl .grid-tbl-body .grid-tbl-rows{  grid-template-columns:80px 2fr 0.6fr 1fr 1fr 100px 200px;  }
.stamp-tbl .grid-tbl-body .grid-tbl-rows > div input[type="text"],
.stamp-tbl .grid-tbl-body .grid-tbl-rows > div input[type="number"],
.stamp-tbl .grid-tbl-body .grid-tbl-rows > div select{
    width: 100%;
}
.stamp-tbl .grid-tbl-body .grid-tbl-rows.registered > div input[type="text"],
.stamp-tbl .grid-tbl-body .grid-tbl-rows.registered > div input[type="number"]{
    border: none; text-align: center; background: transparent;
}
.stamp-tbl .grid-tbl-body .grid-tbl-rows > div input[type="text"]:read-only,
.stamp-tbl .grid-tbl-body .grid-tbl-rows.registered > div input[type="number"]:read-only{
    color: var(--color--gray);
}
.stamp-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-modify{
    background-color: var(--bg--inactive); color: var(--color--inactive);
}
.stamp-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-modify::before{
    mask-image: url("./../images/ico-modify.svg");
    -webkit-mask-image: url("./../images/ico-modify.svg");
    background-color: var(--color--lightgray);
}
.stamp-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-cancel:before{
    width: 14px; height: 14px;
}

.stamp-settings{
    border:1px solid var(--color--border); border-radius:10px; margin-top:20px; padding:10px; box-shadow:0 0 10px rgba(0,0,0,0.1);
    display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center;
}
.stamp-settings > div > p{  color:var(--color--black);  }


.coffeeBhdMapping-tbl .grid-tbl-body .grid-tbl-rows.registered > div input[type="text"]{
    border: none; text-align: center; background: transparent;
}
.coffeeBhdMapping-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-modify{
    background-color: var(--bg--inactive); color: var(--color--inactive);
}
.coffeeBhdMapping-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-modify::before{
    mask-image: url("./../images/ico-modify.svg");
    -webkit-mask-image: url("./../images/ico-modify.svg");
    background-color: var(--color--lightgray);

}
.coffeeBhdMapping-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-cancel:before{
    width: 14px; height: 14px;
}

.storeChannelMp-tbl .grid-tbl-body .grid-tbl-rows.registered > div input[type="text"]{
    border: none; text-align: center; background: transparent;
}
.storeChannelMp-tbl .grid-tbl-body .grid-tbl-rows.registered > div input[type="text"]:read-only{
    color: var(--color--black);
}
.storeChannelMp-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-modify{
    background-color: var(--bg--inactive); color: var(--color--inactive);
}
.storeChannelMp-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-modify::before{
    mask-image: url("./../images/ico-modify.svg");
    -webkit-mask-image: url("./../images/ico-modify.svg");
    background-color: var(--color--lightgray);
}
.storeChannelMp-tbl .grid-tbl-body .grid-tbl-rows.edit > div .btn-cancel:before{
    width: 14px; height: 14px;
}


.brand-manager-tbl .grid-tbl-head .grid-tbl-rows,
.brand-manager-tbl .grid-tbl-body .grid-tbl-rows{    grid-template-columns:1fr 1fr 2fr 1fr 1fr;  }
.brand-manager-tbl .grid-tbl-body .grid-tbl-rows .brand-tbl-btns{   text-align:right;   }
.brand-manager-tbl .grid-tbl-body .grid-tbl-rows input[type="text"]{
    width: 100%;
}
.brand-manager-tbl .grid-tbl-body .grid-tbl-rows input[type="text"]:read-only{
    border: none; color: var(--color--gray); background-color: transparent;
}

.franchise-tbl .grid-tbl-head .grid-tbl-rows,
.franchise-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:80px 1.5fr 0.8fr 0.8fr 1fr 0.8fr 0.5fr 0.5fr;   }

.brandStore-tbl .grid-tbl-head .grid-tbl-rows,
.brandStore-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1.5fr 0.8fr 0.8fr 1fr 0.8fr 0.5fr 0.5fr;   }

.brandMenu-tbl .grid-tbl-head .grid-tbl-rows,
.brandMenu-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 0.6fr 200px 3fr 0.8fr 0.6fr 1.5fr 0.4fr; }
.brandMenu-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.brandMenu-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.brandMenu-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.brandMenu-tbl .grid-tbl-body .grid-tbl-rows .grid-order-shop{  color:var(--color--black);  }
/*.brandMenu-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product{   min-width:200px;  }*/
/*.brandMenu-tbl .grid-tbl-body .grid-tbl-rows .grid-menu-category{   width:auto; min-width:auto; max-width:200px !important; }*/
.brandMenu-tbl .grid-tbl-body .grid-tbl-rows .grid-menu-image .ico-check::before{
    mask-size: 80%; -webkit-mask-size: 80%; background-color: var(--color--border);
}

.brandNotification-tbl .grid-tbl-head .grid-tbl-rows,
.brandNotification-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 4fr 1fr 1fr 1fr; }
.brandNotification-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.brandNotification-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.brandNotification-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.brandNotification-tbl .grid-tbl-body .grid-tbl-rows .grid-board-type{
    font-weight: 500; color: var(--color--darkgray);
}

.order-tbl .grid-tbl-head .grid-tbl-rows,
.order-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 150px 80px 3fr 1.5fr 1.2fr 1.5fr 1fr 0.8fr 0.8fr; }
.order-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.order-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.order-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.order-tbl .grid-tbl-body .grid-tbl-rows .grid-order-shop{  color:var(--color--black);  }
.order-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product{   min-width:200px;  }
.order-tbl .grid-tbl-body .grid-tbl-rows .grid-order-shop{
    font-weight: 600;
}

.sales-tbl .grid-tbl-head .grid-tbl-rows,
.sales-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 0.8fr 200px 3fr 0.8fr 1.5fr 1.5fr 1fr 1fr 1.5fr 0.8fr; }
.sales-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-tbl .grid-tbl-body .grid-tbl-rows .grid-order-shop{  color:var(--color--black);  }
.sales-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product{   min-width:200px;  }
.sales-tbl .grid-tbl-body .grid-tbl-rows .grid-sales-time{
    flex-direction: column;
}

.brandNotification-tbl .grid-tbl-head .grid-tbl-rows,
.brandNotification-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 4fr 1fr 1fr 1fr; }
.brandNotification-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }

.sales-daily-tbl .grid-tbl-head .grid-tbl-rows,
.sales-daily-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.sales-daily-tbl .grid-tbl-body .grid-tbl-rows .ico-down,
.sales-daily-tbl .grid-tbl-body .grid-tbl-rows .ico-up{
    border: 1px solid var(--color--border); border-radius: 5px;
}

.sales-tables-tbl .grid-tbl-head .grid-tbl-rows,
.sales-tables-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 2fr 1fr 4fr 1.5fr 1fr 1fr 1fr 1fr 1.5fr 0.5fr; }
.sales-tables-tbl .grid-tbl-body .grid-tbl-rows .ico-down,
.sales-tables-tbl .grid-tbl-body .grid-tbl-rows .ico-up{
    border: 1px solid var(--color--border); border-radius: 5px;
}
.sales-tables-tbl .grid-tbl-body .grid-tbl-rows .ico-down::before,
.sales-tables-tbl .grid-tbl-body .grid-tbl-rows .ico-up::before{
    mask-size: 50%; -webkit-mask-size: 50%; transition: all ease 0.2s;
}
.sales-tables-tbl .grid-tbl-body .grid-tbl-detail{
    background-color: var(--bg--gray2); padding: 10px 20px;
    display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; row-gap: 5px;
    border-bottom: 1px solid var(--color--border);
}
.sales-tables-tbl .grid-tbl-body .grid-tbl-detail > div{
    display: grid; grid-template-columns: 120px 120px 100px 200px 200px 100px; justify-content: start; align-items: center; justify-items: start; align-content: center;
    /*display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: flex-start; align-items: center; gap: 20px;*/
    text-align: left; font-size: var(--size--regular); font-weight: 300; gap: 20px;
    padding: 0 10px;
}
.sales-tables-tbl .grid-tbl-body .grid-tbl-detail > div:first-of-type{
    color: var(--color--lightgray); font-size: var(--size--small); font-weight: bold;
}
.sales-tables-tbl .grid-tbl-body .grid-tbl-detail > div.grid-tbl-detail-btn{
    display: block; padding: 10px 0 0 0;
}

.order-tables-tbl .grid-tbl-head .grid-tbl-rows,
.order-tables-tbl .grid-tbl-body .grid-tbl-rows {
    grid-template-columns: 0.3fr 3fr 1fr 0.5fr 1fr 1fr 100px 100px;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product{
    flex-direction: column; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px; padding: 10px;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product .order-user{
    color: var(--color--blue);
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product textarea{
    height: 50px;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div{
    width: 100%;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: flex-start; align-items: center; gap: 10px;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .thumbnail{
    width: 60px; aspect-ratio: 10/8.5; overflow: hidden; position: relative; border-radius: 5px; border: 1px solid var(--color--border);
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .thumbnail > img{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .product{
    display: flex; flex-direction: column; flex-wrap: wrap; align-content: stretch; justify-content: flex-start; align-items: flex-start; gap: 5px;
    line-height: 100%;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .product .product-name{
    font-weight: 500;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .product .product-option{
    position: relative; padding: 0 5px; color: var(--color--lightgray); font-weight: 300;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .product .product-option:first-child{
    padding-left: 0;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .product .product-option::before{
    content: ""; width: 1px; height: 10px; display: block;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    background-color: var(--color--border);
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .product .product-option:first-child::before{
    display: none;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div .product .product-price{
    font-weight: bold;
}
.order-tables-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product > div.order-request{
    text-align: left; white-space: pre; padding: 10px; border-radius: 5px; background-color: var(--bg--gray2);
}

.payment-tables-tbl .grid-tbl-head .grid-tbl-rows,
.payment-tables-tbl .grid-tbl-body .grid-tbl-rows {
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1fr 100px 100px;
}

.sales-category-tbl .grid-tbl-head .grid-tbl-rows,
.sales-category-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 1fr; }
.sales-product-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-product-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.sales-product-tbl .grid-tbl-head .grid-tbl-rows,
.sales-product-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 2fr 1fr 1fr; }
.sales-product-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-product-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-product-tbl .grid-tbl-body .grid-tbl-rows .grid-order-shop{  color:var(--color--black);  }
.sales-product-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product{   min-width:200px;  }
.sales-product-tbl .grid-tbl-body .grid-tbl-rows .grid-sales-time{
    flex-direction: column;
}

.sales-tbl-pop .grid-tbl-head .grid-tbl-rows,
.sales-tbl-pop .grid-tbl-body .grid-tbl-rows{   grid-template-columns:0.5fr 5fr 1fr 1fr 1fr 1fr 1fr; }
.sales-tbl-pop .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-tbl-pop .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-tbl-pop .grid-tbl-body .grid-tbl-rows .grid-order-shop{  color:var(--color--black);  }
.sales-tbl-pop .grid-tbl-body .grid-tbl-rows .grid-order-product{   min-width:200px;  }
.sales-tbl-pop .grid-tbl-body .grid-tbl-rows .text-over{   width:100%;    }

.excelUpload-tbl .grid-tbl-head .grid-tbl-rows,
.excelUpload-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:0.5fr 3fr 1fr 1fr 1fr; }
.excelUpload-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.excelUpload-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.excelUpload-tbl .grid-tbl-body .grid-tbl-rows .grid-order-shop{  color:var(--color--black);  }
.excelUpload-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product{   min-width:200px;  }
.excelUpload-tbl .grid-tbl-body .grid-tbl-rows .text-over{   width:100%;    }

.brand-search-tbl .grid-tbl-head .grid-tbl-rows,
.brand-search-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:2fr 1fr 1fr 1fr 1fr }
.brand-search-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.brand-search-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.brand-search-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.store-search-tbl .grid-tbl-head .grid-tbl-rows,
.store-search-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 250px 400px 1fr 0.6fr 0.6fr; }
.store-search-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.store-search-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.store-search-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.store-search-tbl .grid-tbl-body .grid-tbl-rows .grid-stroe-name{
    font-weight: 500; color: var(--color--black);
}

.store-tbl .grid-tbl-head .grid-tbl-rows,
.store-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 240px 2fr 1fr 0.7fr 0.7fr; }
.store-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.store-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.store-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.codetype-tbl .grid-tbl-head .grid-tbl-rows,
.codetype-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 1fr 1fr 0.5fr; }
.codetype-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.codetype-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.codetype-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.codetypepop-tbl .grid-tbl-head .grid-tbl-rows,
.codetypepop-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 1fr 1fr 1fr 1fr 0.5fr; }
.codetypepop-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.codetypepop-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.codetypepop-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.code-tbl .grid-tbl-head .grid-tbl-rows,
.code-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 0.5fr; }
.code-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.code-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.code-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.portaluser-tbl .grid-tbl-head .grid-tbl-rows,
.portaluser-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:0.8fr 0.8fr 1fr 1fr 0.8fr 0.8fr 1fr; }
.portaluser-tbl .grid-tbl-body .grid-tbl-rows:hover > div{
    background-color: var(--color--white);
}
.portaluser-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.portaluser-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.portaluser-tbl#admin .grid-tbl-head .grid-tbl-rows,
.portaluser-tbl#admin .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 1fr; }
.portaluser-tbl#brand .grid-tbl-head .grid-tbl-rows,
.portaluser-tbl#brand .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; }

.promotion-search-tbl .grid-tbl-head .grid-tbl-rows,
.promotion-search-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 1fr 0.5fr 0.5fr 0.5fr; }
.promotion-search-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.promotion-search-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.promotion-search-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.couponpop-tbl .grid-tbl-head .grid-tbl-rows,
.couponpop-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 60px 1fr 1fr 1fr 1fr; }
.couponpop-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.couponpop-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.couponpop-old-tbl .grid-tbl-head .grid-tbl-rows,
.couponpop-old-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 2fr 1fr 1fr 1fr; }
.couponpop-old-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.couponpop-old-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.posversion-tbl .grid-tbl-head .grid-tbl-rows,
.posversion-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:150px 2fr 0.5fr 1fr 0.5fr; }
.posversion-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.posversion-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.posstatus-tbl .grid-tbl-head .grid-tbl-rows,
.posstatus-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:300px 1fr 1fr 1fr 0.8fr 0.8fr 1fr 1fr 0.8fr 1fr; }
.posstatus-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.posstatus-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.auth-tbl .grid-tbl-head .grid-tbl-rows,
.auth-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 0.45fr 0.5fr; }
.auth-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.auth-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.auth-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.auth-dtl-tbl .grid-tbl-head .grid-tbl-rows,
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 2fr 1.5fr 0.5fr; }
.auth-dtl-tbl .grid-tbl-head .grid-tbl-rows > div{
    padding:10px 5px;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;
}
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows .authority-menu-name{
    text-align: left;
}
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows .authority-menu-name p{
    width: 100%; padding-left: 5px; color: var(--color--darkgray);
}
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows .authority-menu-name .menu2{
    padding-left: 10px;
}
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows .authority-menu-name .menu2::before{
    content: "ㄴ"; font-weight: 100; position: relative; top: -1px; color: var(--color--lightgray);
}
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows .authority-menu-name .menu3{
    padding-left: 20px;
}
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows .authority-menu-name .menu3::before{
    content: "ㄴ"; font-weight: 100; position: relative; top: -1px; color: var(--color--lightgray);
}
.auth-dtl-tbl .grid-tbl-body .grid-tbl-rows .authority-menu-id{
    color: var(--color--lightgray);
}

.stock-tbl .grid-tbl-head .grid-tbl-rows,
.stock-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:1fr 1fr 0.5fr 0.5fr 0.5fr 0.5fr; }
.stock-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.stock-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.did-tbl .grid-tbl-head .grid-tbl-rows,
.did-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 1fr 1fr 0.5fr 0.5fr 150px; }
.did-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.did-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.did-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.enterprise-tbl .grid-tbl-head .grid-tbl-rows,
.enterprise-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 2fr 2fr 1fr; }
.enterprise-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.enterprise-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.enterprise-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.image-tbl .grid-tbl-head .grid-tbl-rows,
.image-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 150px 1fr 1fr 0.8fr 1fr 0.7fr 1fr; }
.image-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.image-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.scrapping-tbl .grid-tbl-head .grid-tbl-rows,
.scrapping-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 1fr 300px 200px 1fr 1fr 1fr 1fr 1fr }
.scrapping-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.scrapping-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.banner-tbl .grid-tbl-head .grid-tbl-rows,
.banner-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 100px 1fr 0.5fr 0.5fr 0.3fr 60px; }
.banner-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.banner-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.banner-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.banner-tbl .grid-tbl-body .grid-tbl-rows .grid-banner-img{
    padding: 10px;
}
.banner-tbl .grid-tbl-body .grid-tbl-rows .grid-banner-position > span + span::before{
    content: ", "; display: inline-block; margin-right: 5px;
}

.promotion-menu-tbl .grid-tbl-head .grid-tbl-rows,
.promotion-menu-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 2fr 2fr 1fr 1fr 1fr }
.promotion-menu-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.promotion-menu-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.promotion-menu-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.store-table-tbl .grid-tbl-head .grid-tbl-rows,
.store-table-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 1fr 1fr 0.3fr; }
.store-table-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.store-table-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.store-table-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.promotion-tbl .grid-tbl-head .grid-tbl-rows,
.promotion-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 2fr 1.3fr 1.5fr 1fr 1fr 260px; }
.promotion-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.promotion-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.promotion-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }


.coupon-tbl .grid-tbl-head .grid-tbl-rows,
.coupon-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; }
.coupon-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.coupon-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.coupon-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.couponIssue-tbl .grid-tbl-head .grid-tbl-rows,
.couponIssue-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr 0.5fr; }
.couponIssue-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.couponIssue-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.couponIssue-tbl .grid-tbl-body .grid-tbl-rows .grid-coupon-user a{
    text-decoration: underline;
}

.stampIssue-tbl .grid-tbl-head .grid-tbl-rows,
.stampIssue-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 1fr 0.5fr 0.5fr 1fr; }
.stampIssue-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.stampIssue-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.stampIssue-tbl .grid-tbl-body .grid-tbl-rows .grid-coupon-user a{
    text-decoration: underline;
}

.couponIssueHis-tbl .grid-tbl-head .grid-tbl-rows,
.couponIssueHis-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr; }
.couponIssueHis-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.couponIssueHis-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.stampIssueHis-tbl .grid-tbl-head .grid-tbl-rows,
.stampIssueHis-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.stampIssueHis-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.stampIssueHis-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.couponpop-tbl .grid-tbl-head .grid-tbl-rows,
.couponpop-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 3fr 2fr 1fr;    }
.couponpop-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.couponpop-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.couponpop-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.point-grade-tbl .grid-tbl-head .grid-tbl-rows,
.point-grade-tbl .grid-tbl-body .grid-tbl-rows{     grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.point-grade-tbl .grid-tbl-body .grid-tbl-rows:hover > div{ background-color: var(--color--white);  }
.point-grade-tbl .grid-tbl-body .grid-tbl-rows > div input[type="text"]:read-only{
    background-color: transparent; border: none; color: var(--color--gray); text-align: center;
}
.point-grade-tbl .grid-tbl-body .grid-tbl-rows .grid-manager-btn button{    min-width: 70px;    }

.coffeeBhdMapping-tbl .grid-tbl-head .grid-tbl-rows,
.coffeeBhdMapping-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 2fr 2fr 1fr;    }
.coffeeBhdMapping-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.coffeeBhdMapping-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.coffeeBhdMapping-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.storeChannelMp-tbl .grid-tbl-head .grid-tbl-rows,
.storeChannelMp-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 2fr 1fr 0.4fr 0.6fr;    }
.storeChannelMp-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.storeChannelMp-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.storeChannelMp-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.sales-channel-tbl .grid-tbl-head { display: block !important;}
.sales-channel-tbl .grid-tbl-head .grid-tbl-rows,
.sales-channel-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:250px 100px 1fr; }
.sales-channel-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-channel-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-channel-tbl .grid-tbl-body .grid-tbl-rows .grid-order-shop{  color:var(--color--black);  }
.sales-channel-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product{   min-width:200px;  }
.sales-channel-tbl .grid-tbl-body .grid-tbl-rows { display: grid !important; padding: 10px 0px !important;}
.sales-channel-tbl .grid-tbl-body .grid-tbl-rows::before { display: none !important;}
.sales-channel-tbl .grid-tbl-body .grid-tbl-rows::after { display: none !important;}

.sales-menu-tbl .grid-tbl-head { display: block !important;}
.sales-menu-tbl .grid-tbl-head .grid-tbl-rows,
.sales-menu-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns:60px 1fr 1fr 1fr; }
.sales-menu-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-menu-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.sales-menu-tbl .grid-tbl-body .grid-tbl-rows .grid-order-shop{  color:var(--color--black);  }
.sales-menu-tbl .grid-tbl-body .grid-tbl-rows .grid-order-product{   min-width:200px;  }
.sales-menu-tbl .grid-tbl-body .grid-tbl-rows { display: grid !important; padding: 10px 0px !important;}
.sales-menu-tbl .grid-tbl-body .grid-tbl-rows::before { display: none !important;}
.sales-menu-tbl .grid-tbl-body .grid-tbl-rows::after { display: none !important;}

.didChild-tbl .grid-tbl-head .grid-tbl-rows,
.didChild-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 0.5fr 0.5fr; }
.didChild-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.didChild-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }


.manager-tbl .grid-tbl-head .grid-tbl-rows,
.manager-tbl .grid-tbl-body .grid-tbl-rows{
    grid-template-columns: 1fr 1fr 1.5fr 2fr 0.8fr;
}
.manager-tbl .grid-tbl-body .grid-tbl-rows:hover > div{
    background-color: var(--color--white);
}
.manager-tbl .grid-tbl-body .grid-tbl-rows > div input[type="text"]:read-only{
    background-color: transparent; border: none; color: var(--color--gray); text-align: center;
}
.manager-tbl .grid-tbl-body .grid-tbl-rows .grid-manager-btn button{
    min-width: 70px;
}

.subscribe-tbl .grid-tbl-head .grid-tbl-rows,
.subscribe-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 2fr 1.3fr 0.8fr 1.3fr 1.3fr 0.6fr 0.6fr 0.5fr; }
.subscribe-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.subscribe-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.subscribe-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.subscribe-his-tbl .grid-tbl-head .grid-tbl-rows,
.subscribe-his-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 0.5fr 1fr 1fr 1fr; }
.subscribe-his-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.subscribe-his-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.subscribe-use-tbl .grid-tbl-head .grid-tbl-rows,
.subscribe-use-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr 1fr 1fr 1fr; }
.subscribe-use-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.subscribe-use-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.category-tbl .grid-tbl-head .grid-tbl-rows,
.category-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 1fr 1fr 1fr 0.5fr 0.5fr; }
.category-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.category-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.category-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.mainBanner-tbl .grid-tbl-head .grid-tbl-rows,
.mainBanner-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 320px 200px 1fr 0.5fr 100px; }
.mainBanner-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.mainBanner-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.mainBanner-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.member-tbl .grid-tbl-head .grid-tbl-rows,
.member-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; }
.member-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.member-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.customer-tbl .grid-tbl-head .grid-tbl-rows,
.customer-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.customer-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.customer-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.customer-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.reservation-info-tbl .grid-tbl-head .grid-tbl-rows,
.reservation-info-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 1fr; }
.reservation-info-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.reservation-info-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.reservation-info-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.facilities-tbl .grid-tbl-head .grid-tbl-rows,
.facilities-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 0.2fr 1fr 0.2fr; }
.facilities-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.facilities-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.visitNotice-tbl .grid-tbl-head .grid-tbl-rows,
.visitNotice-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 1fr 0.2fr; }
.visitNotice-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.visitNotice-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.reserve-upload-tbl .grid-tbl-head .grid-tbl-rows,
.reserve-upload-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 1fr 2fr 1.6fr 1fr 1fr 1fr; }
.reserve-upload-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.reserve-upload-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.reserve-upload-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.reservation-tbl .grid-tbl-head .grid-tbl-rows,
.reservation-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 5fr 1fr 1fr; }
.reservation-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.reservation-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.weekOrder-tbl .grid-tbl-head .grid-tbl-rows,
.weekOrder-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 1.5fr; }
.weekOrder-tbl .grid-tbl-head .grid-tbl-rows > div{ padding: 5px; font-size: var(--size--small);   }
.weekOrder-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.weekOrder-tbl .grid-tbl-body .grid-tbl-rows:last-child{
    color: var(--color--black); border-top: 1px solid var(--color--border); border-bottom: none;
}
.weekOrder-tbl .grid-tbl-body .grid-tbl-rows:last-child > div{
    font-weight: 500;
}

.channel-tbl .grid-tbl-head .grid-tbl-rows,
.channel-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1.5fr 1fr 1fr 240px; }
.channel-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:5px; font-size: var(--size--small);   }
.channel-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.channel-tbl .grid-tbl-head .grid-tbl-rows > div:first-child{
    padding-left: 20px;
}
.channel-tbl .grid-tbl-body .grid-tbl-rows > div:first-child{
    color: var(--color--black); padding-left: 20px;
}

.storeOrder-tbl .grid-tbl-head .grid-tbl-rows,
.storeOrder-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 2fr 1fr 1fr 1fr; }
.storeOrder-tbl .grid-tbl-head .grid-tbl-rows > div{ padding: 5px; font-size: var(--size--small);   }
.storeOrder-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }


.brandNoti-tbl .grid-tbl-head .grid-tbl-rows,
.brandNoti-tbl .grid-tbl-body .grid-tbl-rows{
    grid-template-columns: 60px 3fr 1fr 1.5fr;
}
.brandNoti-tbl .grid-tbl-body .grid-tbl-rows .grid-noti-title{
    width: 100%; text-align: left; justify-content: flex-start;
}

.coupon-menu-tbl .grid-tbl-head .grid-tbl-rows,
.coupon-menu-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr; }
.coupon-menu-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.coupon-menu-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.regularCharge-tbl .grid-tbl-head .grid-tbl-rows,
.regularCharge-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.regularCharge-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.regularCharge-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.regularCharge-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.regularChargePayment-tbl .grid-tbl-head .grid-tbl-rows,
.regularChargePayment-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.regularChargePayment-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.regularChargePayment-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.regularChargePayment-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.store-excelUpload-tbl .grid-tbl-head .grid-tbl-rows,
.store-excelUpload-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 2fr 1fr 1fr 1fr 1fr }
.store-excelUpload-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.store-excelUpload-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.store-employeeCall-tbl .grid-tbl-head .grid-tbl-rows,
.store-employeeCall-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 4fr 1fr 1fr }
.store-employeeCall-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.store-employeeCall-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.store-employeeCall-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.store-entryInquiry-tbl .grid-tbl-head .grid-tbl-rows,
.store-entryInquiry-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr }
.store-entryInquiry-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.store-entryInquiry-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.store-entryInquiry-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.statisticts-period-tbl .grid-tbl-head .grid-tbl-rows,
.statisticts-period-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.statisticts-period-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.statisticts-period-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.statisticts-period-tbl .grid-tbl-body .grid-tbl-rows.summary > div{
    background-color: var(--bg--skyblue);
}

.statisticts-period_l3-tbl .grid-tbl-head .grid-tbl-rows,
.statisticts-period_l3-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr; }
.statisticts-period_l3-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.statisticts-period_l3-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.statisticts-period_l4-tbl .grid-tbl-head .grid-tbl-rows,
.statisticts-period_l4-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1fr 1fr 1fr 1fr; }
.statisticts-period_l4-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.statisticts-period_l4-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.openDeSalesStat-tbl .grid-tbl-head .grid-tbl-rows,
.openDeSalesStat-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.openDeSalesStat-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.openDeSalesStat-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }
.openDeSalesStat-tbl .grid-tbl-body .grid-tbl-rows.summary > div{
    background-color: var(--bg--skyblue);
}

.customer-visit-tbl .grid-tbl-head .grid-tbl-rows,
.customer-visit-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr 1fr; }
.customer-visit-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.customer-visit-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.show-product-tbl .grid-tbl-head .grid-tbl-rows,
.show-product-tbl .grid-tbl-body .grid-tbl-rows{   grid-template-columns: 60px 2fr 1fr 1fr 1fr; }
.show-product-tbl .grid-tbl-body .grid-tbl-rows{   cursor:pointer; }
.show-product-tbl .grid-tbl-head .grid-tbl-rows > div{ padding:10px 5px;   }
.show-product-tbl .grid-tbl-body .grid-tbl-rows > div{ padding:10px 5px;   }

.show-product-regist{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.show-product-regist .option-select-group .option-group-list{
    height: auto; min-height: 420px;
}

.show-product-regist #section1{
    width: 65%;
}
.show-product-regist #section2{
    width: 35%;
}
.show-product > .flex-row{
    gap: 20px;
}
.show-product .flex-row > p{
    font-weight: 500; padding: 0 5px; font-size: var(--size--regular);
}


/* LIST TABLE */
.list-tbl-no{ margin-bottom: 30px; }
.list-count{   display:inline-block; text-align:left; margin-bottom:10px;  }
.list-tbl-no table{   width:100%; border-left:1px solid #dcddde; /*border-top:1px solid #1bb0bf;*/ border-collapse: separate; table-layout:fixed; }
.list-tbl-no table a:visited{ color:#6d6e71 !important; }
.list-tbl-no table thead tr:nth-of-type(1) th{ border-top:1px solid #1bb0bf; }
.list-tbl-no table thead tr th{  font-size:14px; font-weight:normal; color:#000000; border-right:1px solid #dcddde; background-color:#f6f6f6; text-align:center; padding:8px; border-bottom:1px solid #dcddde; position: sticky; top: 0; z-index: 1; }
.list-tbl-no table thead tr th.sticky-th-two{ top: 36px; }
.list-tbl-no table tbody tr:hover,
.list-tbl-no table tbody tr:nth-of-type(even):hover{ background: #dbf2f2; }
.list-tbl-no table tbody tr:nth-of-type(even){ background: #f3f1fd; }
.list-tbl-no table tbody tr th{   font-size:14px; font-weight:normal; color:#000000; border-right:1px solid #dcddde; text-align:center; background-color:#f6f6f6; padding:8px; border-bottom:1px solid #dcddde;   }
.list-tbl-no table tbody tr td{   font-size:14px; font-weight:normal; color:#6d6e71; border-right:1px solid #dcddde; text-align:center; padding:8px; border-bottom:1px solid #dcddde; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;  }
.list-tbl-no table tbody tr td.over-txt br{	display:none;	}
.list-tbl-no .board-count{ margin-bottom:10px; text-align:left;    }

.scroll-tbl-head{	position:relative;	}
.scroll-tbl-head thead{	width:calc(100% - 20px); 	}
.scroll-tbl-head:after{	content:""; width:16px; height:calc(100% - 2px); position:absolute; right:0; top:0; background-color:#f6f6f6; border-top:1px solid #1bb0bf; border-right:1px solid #dcddde; }

.detail-page .list-tbl table tbody tr:nth-of-type(even),
.detail-page .list-tbl-selected table tbody tr:nth-of-type(even),
.detail-page .list-tbl-no table tbody tr:nth-of-type(even),
.bg-no table tbody tr:nth-of-type(even){ background: #ffffff; }

.detail-page .list-tbl table tbody tr:nth-of-type(even):hover,
.detail-page .list-tbl-selected table tbody tr:nth-of-type(even):hover,
.detail-page .list-tbl-no table tbody tr:nth-of-type(even):hover,
.bg-no table tbody tr:nth-of-type(even):hover{ background: #dbf2f2; }

.bg-hover tr:hover{ background: none !important; }
.bg-hover td:hover{ background: #dbf2f2 !important; }


.content-box{   background-color:var(--color--white); border-radius:10px; padding: 0; position:relative;    }
.content-box + .content-box{    margin-top:20px;    }
.content-box > h3,
.title-bullet{
    font-size:var(--size--medium); font-weight: 500; color:var(--color--black); margin-bottom: 10px; position: relative; padding-left: 20px;
}
.content-box > h3::before,
.title-bullet::before{
    content: ""; width: 14px; height: 14px; display: block; background-color: var(--color--white);
    mask-image: url("./../images/arrow-triangle.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: 50%;
    -webkit-mask-image: url("./../images/arrow-triangle.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 50%;
    position: absolute; left: 0; top: 2px; z-index: 2;
}
.content-box > h3::after,
.title-bullet::after{
    content: ""; width: 14px; height: 14px; display: block; background-color: var(--color--blue); border-radius: 5px;
    position: absolute; left: 0; top: 2px;  z-index: 1;
}
.tbl-top .title-bullet{
    margin: 0;
}


/* DETAIL GRID */
.detail-grid{
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: stretch;
    gap: 1px; background-color: var(--color--border); border: 1px solid var(--color--border);
}
.detail-grid .no-data{
    width: 100%;
    padding: 10px; background-color: var(--color--white); text-align: center;
}
.detail-grid-column{
    width: calc(50% - 0.5px); position:relative;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-items: flex-start; align-items: stretch; gap: 1px;
    background-color: var(--color--border);
}
.detail-grid-column > label{
    width: 160px; font-size:var(--size--regular); color:var(--color--black); font-weight:normal; padding: 5px 10px;
    background-color: var(--bg--gray2);
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; position: relative;
    /*position:absolute; left:0; top:50%; transform:translate(0, -50%);*/
}
.detail-grid-column > label > .ico-info{
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}
.detail-grid-column > label > .tooltip-info{
    width: 320px;
    position: absolute; left: 120px; top: 50%; transform: translateY(15%);
    background-color: var(--color--white); border: 1px solid var(--color--border); border-radius: 5px; padding: 10px; z-index: 1000;
    color: var(--color--gray);
}
.detail-grid-column > label > .tooltip-info::before{
    content: ""; width: 8px; height: 8px;  display: block; border: 1px solid var(--color--border); background-color: var(--color--white);
    border-bottom: none; border-left: none;
    position: absolute; left: 12px; top: -4px; transform: rotate(-45deg);
}
.detail-grid-column > label > .tooltip-info b{
    font-weight: 500; color: var(--color--black);
}
.detail-grid-column.required > label::after{
    content: ""; width: 10px; height: 10px; background-color:var(--color--red);
    display:inline-block; margin-left: 4px; position:relative; top: -1px;
    mask-image: url("./../images/ico-star.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-star.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.detail-grid-column > .value{
    width: calc(100% - 160px); height:100%; min-height: 36px; background-color: var(--color--white);
    font-size:var(--size--medium); color:var(--color--gray); font-weight:300; padding: 5px;
    position:relative;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
}
/*.detail-grid-column > .value input[type="text"],*/
/*.detail-grid-column > .value select,*/
/*.detail-grid-column > .value button{*/
/*    height: 32px;*/
/*}*/
.detail-grid-column > .value > span{
    position:relative; width: 100%; display: block;
}
.detail-grid-column > .value > span > dl{   display:flex; align-items:center; margin:0;   }
.detail-grid-column > .value > span > dl > dt{  margin-right:10px;  }
/*.detail-grid-column > .value > span select + select,*/
/*.detail-grid-column > .value > span select + button,*/
/*.detail-grid-column > .value > span button + select,*/
/*.detail-grid-column > .value > span button + button{    margin-left:4px;    }*/
.detail-grid-column > .value > .inline{ margin-right:10px;  }
.detail-grid-column > .value b{ font-weight:500; }
.detail-grid-column > .value > span > .ui-label:first-child{
    margin-left: 5px;
}
.detail-grid-column > .value > span .store-photo{
    justify-content: flex-start;
}
.detail-grid-column > .value > span .store-photo .store-photo-img{
    border: none; padding: 0; width: auto;
}
.detail-grid-column > .value > span .store-photo .dotted-list{
    border: none; padding: 0 0 0 20px; width: auto;
}
.detail-grid-column > .value .delivery{
    font-size: var(--size--regular); background-color: var(--bg--gray2); border-radius: 5px; padding: 5px 10px; gap: 20px;
}
.detail-grid-column > .value > span .order-request{
    text-align: left; white-space: pre;
}


.detail-grid-column > .value .btn-setting{
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}
.detail-grid-column > .value .menu-option-select{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
    gap: 10px;
}
.detail-grid-column.business-status > .value > span{
    position: relative;
}
.detail-grid-column.business-status > .value > span .btn-history{
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    height: 28px;
}
.detail-grid-column > .value > span .soldout-setting{
    display: inline-block;
}
.detail-grid-column > .value > span .soldout-setting > .ui-label{
    margin-right: 10px;
}
.detail-grid-column > .value > span .soldout-setting input[type="date"]{
    min-width: 100px;
}

.detail-grid-column > .value > span .banner-img{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
    gap: 10px;
}
.detail-grid-column > .value > span .banner-img > img{
    width: 80px; border-radius: 5px;
}

.detail-grid-column .payment-detail{
    margin-top: 5px;
}


.category-store.promotion-product{
    padding: 0;
}
.category-store .tbl-top{
    background-color: var(--bg--gray2); border-radius: 5px 5px 0 0; padding: 5px; border: 1px solid var(--color--border); border-bottom: none;
}
.category-store .promotion-product-select{
    border-radius: 0;
}


.address-offset{
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; row-gap: 10px; column-gap: 5px;
}
.address-offset input[type="text"]{
    width: 140px;
}

.account-information{
    display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 5px;
}
.account-information .flex-row label{
    width: 100px;
}


.promotion-count{
    display: inline-block; margin-left: 10px;
}
.promotion-product{
    width: 100%; padding: 10px; flex-direction: column; background-color: var(--color--white);
}
.promotion-product-select{
    background-color: var(--color--white); position: relative; overflow: hidden; z-index: 1; padding-top: 40px;
    border: 1px solid var(--color--border); border-radius: 5px;
}
.promotion-product-top{
    width: 100%;
    padding: 10px 10px 10px 10px; position: absolute; left: 0; top: 0;
    background-color: var(--bg--gray2);
}
.promotion-product-top .ui-label{
    margin: 0;
}
.promotion-product-top .ui-label input[type="checkbox"] + span{
    padding: 0 0 0 26px; font-weight: 500; color: var(--color--gray);
}
.promotion-product-list{
    height: 400px; overflow-y: scroll; position: relative;
}
.promotion-product-list .ui-label{
    width: 100%; display: block; border-bottom: 1px solid var(--color--border2); padding: 10px; margin: 0;
}
.promotion-product-list .ui-label:hover{
    border-color: var(--color--border);
}
.promotion-product-list .ui-label input[type="checkbox"] + span{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
}
.promotion-product-list .ui-label input[type="checkbox"] + span .category{
    width: 200px; height: 28px; line-height: 28px; display: inline-block; font-weight: normal; border-radius: 4px;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0 10px 0 5px; margin: 0 20px 0 0; color: var(--color--black);  text-align: center;
}
.promotion-product-list > p{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

.promotion-menu-list .promotion-product-select{
    border-radius: 0;
}
.promotion-product-list#visitNoticeList{
    overflow-y: visible;
}

.discount-price,
.discount-ratio{
    height: 40px;
    display: inline-block; background-color: var(--color--white); border: 1px solid var(--color--border); border-radius: 5px; padding: 0 10px;
}
.discount-price input[type="text"],
.discount-ratio input[type="text"]{
    border: none; outline: none; height: 100%; padding: 0;
}
.discount-price label,
.discount-ratio label{
    display: inline-block; color: var(--color--inactive);
}
.discount-ratio label:last-of-type{
    margin-left: 10px; border-left: 1px solid var(--color--border); padding-left: 10px;
}

.coupon-issuing{
    height: 36px; padding: 0 10px;
    display: inline-block; background-color: var(--color--white); border: 1px solid var(--color--border); border-radius: 5px;
}
.coupon-issuing input[type="number"]{
    height: 100%; border: none; outline: none;
}
.coupon-count{
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
.coupon-count > span{
    border-left: 1px solid var(--color--border2); padding: 0 10px;
}
.coupon-count > span:first-child{
    border-left: none;
}
.coupon-count > span:last-child{
    color: var(--color--red);
}


.menu-photo{
    width:140px; height: 120px; border-radius:5px; position:relative; border:1px solid var(--color--border); margin-right:20px;
    background: rgba(0,0,0,0.01);
}
.menu-photo img{
    width: 100%; height: 100%; border-radius: 5px;
}
.menu-photo .btn-delete{
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 24px; border-radius: 0; background-color: var(--color--lightgray); border: none;
    color: var(--color--white);
}
.menu-photo .btn-delete::before{
    background-color: var(--color--white);
}

.dotted-list > ul > li{
    font-size:var(--size--regular); font-weight: 300; color:var(--color--gray); padding-left: 6px; position:relative;
}
.dotted-list > ul > li::before{
    content:""; width:2px; height:2px; display:block; border-radius:50%; background-color:var(--color--gray);
    position:absolute; left:0; top:10px;
}

/* PRODUCT GRID */
.product-store{
    border-bottom: 1px solid var(--color--border); padding: 15px;
    width: calc(100% + 30px); margin: -15px 0 20px -15px; box-shadow: 0 3px 3px rgba(0,0,0,0.05);
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
}
.product-store > div{
    width: 50%;
}
.product-store > div:first-child{
    color: var(--color--black);
}
.product-grid{
    border: 1px solid var(--color--border); border-left: none; border-right: none;
}
.product-grid-column{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
    gap: 20px; padding: 10px; border-top: 1px dashed var(--color--border2);
}
.product-grid-column:first-child{
    border-top: none;
}
.product-grid-column .thumbnail{
    width: 60px; height: 60px; overflow: hidden; position: relative; border-radius: 5px; border: 1px solid var(--color--border);
}
.product-grid-column .thumbnail img{
    width: 100%;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.product-grid-column .value{
    width: calc(100% - 80px);
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
}
.product-grid-column .value .product{
    width: 100%;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
}
.product-grid-column .value .title{
    font-size: var(--size--medium); font-weight: 600; color: var(--color--black);
}
.product-grid-column .value .option > span{
    font-weight: 300; display: inline-block;
}
.product-grid-column .value .option > span::after{
    content: ""; width: 1px; height: 10px; display: inline-block; margin: 0 5px; background-color: var(--color--border);
}
.product-grid-column .value .option > span:last-child::after{
    display: none;
}
.product-grid-column .count{
    width: 200px; text-align: center;
    font-weight: 600; color: var(--color--black); font-size: var(--size--medium);
}
.product-grid-column .price{
    width: 200px; text-align: right;
    font-weight: 600; color: var(--color--black); font-size: var(--size--large);
}


.order-progress{
    /*display:grid; grid-template-columns:4fr 1fr; grid-column-gap:80px; */
    text-align:center; border: 1px solid var(--color--border); padding: 20px;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
    column-gap: 40px;
}
.order-progress-ing{
    width: 100%;
    position:relative; display:flex; justify-content:space-between; padding-top: 20px;
}
.order-progress-ing::before{
    content:""; width:100%; height: 6px; display:block; position:absolute; left:0; top:80px; border-radius:40px;
    background: rgb(120,205,241); background: var(--color--border); transform: rotate(-180deg);
}
.order-progress-ing > dl{
    width: 100%; display:block; padding-top:60px; z-index:1; position:relative;
}
.order-progress-ing > dl::before{
    content: ""; width: 36px; height: 36px; display: block;
    position: absolute; left: 50%; top: 0; transform: translateX(-50%); background-color: var(--color--gray);
    mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.order-progress-ing > dl:nth-child(1)::before{
    mask-image:url("./../images/ico-payment.svg");
    -webkit-mask-image:url("./../images/ico-payment.svg");
}
.order-progress-ing > dl:nth-child(2)::before{
    mask-image:url("./../images/ico-receipt.svg");
    -webkit-mask-image:url("./../images/ico-receipt.svg");
}
.order-progress-ing > dl:nth-child(3)::before{
    mask-image:url("./../images/ico-ready.svg");
    -webkit-mask-image:url("./../images/ico-ready.svg");
}
.order-progress-ing > dl:nth-child(4)::before{
    mask-image:url("./../images/ico-orderend.svg");
    -webkit-mask-image:url("./../images/ico-orderend.svg");
}
.order-progress-ing > dl > dt{
    font-size:var(--size--medium); font-weight: 600; color:var(--color--black); line-height:40px; display:block;
    position: relative; padding-top: 10px;
}
.order-progress-ing > dl > dt::before{
    content: ""; width: 100%; height: 6px; display: block;
    position: absolute; left: 0; top: 0; background-color: var(--color--purple);
}
.order-progress-ing > dl:first-child > dt::before{
    border-radius: 10px 0 0 10px;
}
.order-progress-ing > dl:last-child > dt::before{
    border-radius: 0 10px 10px 0;
}
.order-progress-ing > dl > dt::after{
    content: ""; width: 10px; height: 10px; display:block;
    background-color: var(--color--white); border: 2px solid var(--color--purple); border-radius: 10px;
    position: absolute; left: 50%; top: -5px; transform: translateX(-50%);
}
.order-progress-ing > dl > dd{
    font-size:var(--size--small); font-weight:300; color:var(--color--gray); display:block;
}

.order-progress-ing > dl:last-child::after{ display:none;   }
.order-progress-ing > dl.no-date > dt{
    color: var(--color--border);
}
.order-progress-ing > dl.no-date::before{
    background-color: var(--color--border);
}
.order-progress-ing > dl.no-date > dt::before{
    display: none;
}
.order-progress-ing > dl.no-date > dt::after{
    border-color: var(--color--border);
}
.order-progress-cancel{
    width: 200px; position:relative;
}
.order-progress-cancel > div{
    width:100%; height:100%; position:relative;
}
.order-progress-cancel > div::before{
    content:""; width:100%; height:40px; display:block; position:absolute; left:0; top:60px; border-radius:40px;
    background-color:var(--color--purple);
}
.order-progress-cancel > div .btn-cancel{   display:none;   }
.order-progress-cancel dl{
    display:block; padding-top:60px; background-repeat:no-repeat; background-position:center 10px; background-size:36px; z-index:1; position:relative;
}
.order-progress-cancel dl::before{
    content: ""; width: 40px; height: 40px; display: block; background-color: var(--color--purple);
    mask-image: url("./../images/ico-ordercancel.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-ordercancel.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
}
.order-progress-cancel dl > dt{
    font-size:var(--size--medium); font-weight:bold; color:var(--color--white); line-height:40px; display:block;
}
.order-progress-cancel dl > dd{
    font-size:var(--size--small); font-weight:300; color:var(--color--gray); margin-top:10px; display:block;
}
.order-progress-cancel > div.no-date{
    border-left:1px dashed var(--color--border2); vertical-align:middle; padding: 20px; text-align:center; font-size:var(--size--small);
}
.order-progress-cancel > div.no-date dl{    display:none;   }
.order-progress-cancel > div.no-date::before{   display:none;   }
.order-progress-cancel > div.no-date .btn-cancel{   display:inline-block;  }



/* 옵션보기 */
.option-view{   border:1px solid var(--color--border); border-radius:10px; margin-bottom:10px;  }
.option-view .option-group{
    padding:10px 15px;  cursor:pointer;  position:relative;
}
.option-view .option-group .option-group-title{ display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; margin-left: 0; }
.option-view .option-group h4{  font-size:var(--size--regular); color:var(--color--black); font-weight:500; margin-right:20px;  }
.option-view .option-group p{   font-size:var(--size--regular); color:var(--color--gray); font-weight:normal;   }
.option-view .option-group::after{
    content:""; width:14px; height:14px; display:block; position:absolute; right:20px; top:50%; transform:translate(0, -50%) rotate(90deg); transition:all 0.4s ease;
    background-color: var(--color--lightgray);
    mask-image: url("./../images/arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-normal.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.option-view .option-group .option-status{
    width: 100%; margin: 6px 0 0 -5px;
}
.option-view .option-group .option-status .status-item{
    margin-right: 5px;
}
.option-view .option-list{  border-top:1px dashed var(--color--border2); padding:10px 20px; display:none;    }
.option-view .option-list > ul > li{
    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; padding:5px 0 5px 10px; position:relative;
}
.option-view .option-list > ul > li::before{
    content:""; width:2px; height:2px; display:block; border-radius:50%; position:absolute; left:0; top:14px;  background-color:var(--color--gray);
}
.option-view .option-list > ul > li > h5{   width:100%; font-size:var(--size--regular); color:var(--color--black); font-weight:500; margin-right:20px;   }
.option-view .option-list > ul > li > p{    color:var(--color--gray); margin-right:20px;    }
.option-view .option-list > ul > li > span{ margin-right:5px;   }
.option-view .option-list > ul > li > .price{   position:absolute; right:0; top:5px; margin:0;  }
.option-view .option-group.opened + .option-list{   display:block;  }
.option-group > * { margin-left: 10px;}
.option-group > h4{ margin-left: 0;}
.option-view .option-group.opened::after{
    transform:translate(0, -50%) rotate(-90deg);
}


/* DETAIL TABLE */
.detail-tbl{ margin-bottom: 30px; }
.detail-tbl:before,
.detail-tbl:after{	content:""; display:table;	}
.detail-tbl:after{	clear:both;	}
.detail-tbl table{  width:100%; border-top:1px solid #1bb0bf; }
.detail-tbl table tr th,
.detail-tbl table tr td{    padding:8px;   }
.detail-tbl table tr th{    font-size:14px; font-weight:normal; color:#000000; text-align:center; background-color:#f6f6f6; border:1px solid #dcddde;   }
.detail-tbl table tr td{    font-size:14px; font-weight:normal; color:#6d6e71; text-align:left; border:1px solid #dcddde;   }
.detail-tbl table tr:first-child th,
.detail-tbl table tr:first-child td{    border-top:none;    }
.detail-tbl .detail-ex{ margin-bottom:10px; text-align:left;    }
.detail-tbl table tr td input[type="text"] + button[type="button"],
.detail-tbl .text-btn{  /*background: rgb(255,255,255); background: linear-gradient(-180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(230,231,232,1) 100%); border:1px solid #bcbec0; border-radius:0; margin:0 0 0 -1px; */ background-color: #0d7aa7; color:#ffffff; padding:0 10px; }
.detail-tbl .detail-tb-center tr td{ text-align: center; }


/* PAGING */
.paging{    text-align:center; margin: 20px 0;  }
.paging ul{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; gap: 5px;
}
.paging ul li{
    min-width:40px; height:40px; display: block; font-size: var(--size--regular); font-weight: normal; color: var(--color--lightgray); padding: 0 10px; line-height: 40px; cursor: pointer;
    position: relative; border-radius: 5px; text-align: center;
}
.paging ul li.current{    background-color: var(--color--purple); color:#ffffff;    }
.paging ul li:hover{  text-decoration:underline;  }
.paging ul li.first,
.paging ul li.last,
.paging ul li.prev,
.paging ul li.next{
    min-width: 24px;
    position: relative; text-indent: -9999px; padding: 0;
}
.paging ul li.prev{
    margin-right: 10px;
}
.paging ul li.next{
    margin-left: 10px;
}
.paging ul li.first::before,
.paging ul li.last::before,
.paging ul li.prev::before,
.paging ul li.next::before{
    content: ""; width: 24px; height: 40px; display: block; background-color: var(--color--lightgray);
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    mask-repeat: no-repeat; mask-position: center center; mask-size: 70%;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 70%;
}
.paging ul li.first::before{
    mask-image: url("./../images/arrow-double.svg");
    -webkit-mask-image: url("./../images/arrow-double.svg");
    transform: translate(-50%, -50%) rotate(-180deg);
}
.paging ul li.last::before{
    mask-image: url("./../images/arrow-double.svg");
    -webkit-mask-image: url("./../images/arrow-double.svg");
}
.paging ul li.prev::before{
    mask-image: url("./../images/arrow-normal.svg");
    -webkit-mask-image: url("./../images/arrow-normal.svg");
    transform: translate(-50%, -50%) rotate(-180deg);
}
.paging ul li.next::before{
    mask-image: url("./../images/arrow-normal.svg");
    -webkit-mask-image: url("./../images/arrow-normal.svg");
}

/* SEARCH TABLE 1COUMNN */
.search-tbl1{
    background-color:var(--color--white); border:1px solid var(--color--border); border-radius: 5px; padding:10px 10px 10px 20px; position:relative;
    display:flex; justify-content:space-between;
}
.search-tbl1 .search-tbl-form{
    width:calc(100% - 120px);
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
}
.search-tbl1 .search-tbl-form > dl{ display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; padding-right: 60px; }
.search-tbl1 .search-tbl-form > dl:first-child{
    margin-top: 0;
}
.search-tbl1 .search-tbl-form > dl:last-child{  margin-bottom:0;    }
.search-tbl1 .search-tbl-form > dl > dt{
    width:auto; display:block; line-height:40px; padding:0 40px 0 80px;
    font-size:var(--size--medium); color:var(--color--black); font-weight: 500;
}
.search-tbl1 .search-tbl-form > dl > dt:first-child{    width:120px; padding:0; }
.search-tbl1 .search-tbl-form > dl > dd{
    font-size:var(--size--medium); color:var(--color--gray); margin-right:5px; display:block;
    width: calc(100% - 130px);
}
/*.search-tbl1 .search-tbl-form > dl > dd select,*/
/*.search-tbl1 .search-tbl-form > dl > dd input{  margin-right:5px;   }*/
.search-tbl1 .search-tbl-btns{  width:120px; border-left:1px solid var(--color--border2); padding:0 0 0 15px; position:relative;    }
.search-tbl1 .search-tbl-btns .search-btns{ width:calc(100% - 15px); position:absolute; right:0; top:50%; transform:translate(0, -50%);   }
.search-tbl1 .search-tbl-btns [class^="btn-"]{  width:100px; text-align:center; font-weight:bold;   }
.search-tbl1 .inline-block{
    vertical-align: middle;
}



/* SEARCH TABLE 2COUMNN */
.search-tbl2{
    background-color:var(--color--white); border:1px solid var(--color--border); border-radius: 5px; padding: 10px; position:relative;
    display:flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch;
}
.search-tbl2 .search-tbl-form{
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
    row-gap: 5px;
}
.search-tbl2 .search-tbl-form dl{
    display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;
}
.search-tbl-form dl.search3-1{
    width: 33.3%;
}
.search-tbl-form dl.search3-2{
    width: 66.7%;
}
.search-tbl-form dl.search3-3{
    width: 100%;
}
.search-tbl-form dl.search4-1{
    width: 25%;
}
.search-tbl-form dl.search5-2{
    width: 40%;
}
.search-tbl-form dl.search5-3{
    width: 60%;
}
.search-tbl-form .search-label{
    display: inline-block; margin-left: 10px;]
}
.search-tbl2 .search-tbl-form dl:last-child{  margin-bottom:0;    }
.search-tbl2 .search-tbl-form dl > dt{
    width:auto; display:block; line-height:40px; padding:0 40px 0 80px;
    font-size:var(--size--medium); color:var(--color--black); font-weight: 500;
}
.search-tbl2 .search-tbl-form dl > dt:first-child{    width:120px; padding:0; }
.search-tbl2 .search-tbl-form dl > dd{
    font-size:var(--size--medium); color:var(--color--gray); margin-right:5px; display:block;
}
.search-tbl2 .search-tbl-form dl > dd .toggle-radio{
    display: inline-flex; vertical-align: middle;
}
/*.search-tbl2 .search-tbl-form > dl > dd select,*/
/*.search-tbl2 .search-tbl-form > dl > dd input{  margin: 5px 5px 5px 0;  }*/
.search-tbl2 .search-tbl-form dl > dd .store-box input{
    margin: 0;
}
.search-tbl2 .search-tbl-btns{
    text-align: center; border-top: 1px solid var(--color--border2); padding-top: 10px; margin-top: 10px; position: relative;
}
.search-tbl2 .search-tbl-btns .search-btns{
    width: 100%;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;
    gap: 5px;
}
.search-tbl2 .search-tbl-btns [class^="btn-"]{
    text-align:center; font-weight:bold;
}
.search-tbl2 .search-tbl-btns .btn-detail{
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}

.search-tbl2 table{ width:100%; }
.search-tbl2 table tr th,
.search-tbl2 table tr td{   height:48px; border-top:1px solid #e6e7e8; /*padding:10px;*/ padding: 9px; text-align: left;     }
.search-tbl2 table tr:first-child th,
.search-tbl2 table tr:first-child td{   border-top:none;    }
.search-tbl2 table tr th{   font-size:14px; font-weight:bold; color:#000000; text-align:right;  }
.search-tbl2 .inline-block{
    vertical-align: middle;
}
/*.search-tbl2 table tr td .btn-search{   margin-left:20px;   }*/

.search-tbl-form .search-option{
    width: 100%;
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
}


.search-store{
    border-bottom: 1px solid var(--color--border); padding: 10px 15px;
    width: calc(100% + 30px); margin: -15px 0 20px -15px; box-shadow: 0 3px 3px rgba(0,0,0,0.05);
}

.search-date{
    min-width: 250px;
    display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; gap: 5px;
}

.search-list{
    overflow:hidden;
}
.tbl-top{   padding: 0 0 10px 0; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;   }
/*.tbl-top::before,*/
/*.tbl-top::after{    content:""; display:table;  }*/
/*.tbl-top::after{    clear:both; }*/
.tbl-top-left{  text-align:left; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center;  }
.tbl-top-left select,
.tbl-top-left button{   margin:0 5px 0 0;  }
.tbl-top-left p{    padding:10px;   }
.tbl-top-right{ text-align:right; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; }
.tbl-top-right button{ margin:0 0 0 5px;   }
.search-list .tbl-top{
    padding: 5px; border: 1px solid var(--color--border); border-bottom: none; border-radius: 5px 5px 0 0;
    background-color: var(--bg--gray2);
}
.tbl-top .btn-register{
    color: var(--color--gray); background-color: var(--color--white); border: 1px solid var(--color--border);
}
.tbl-top .btn-register::before{
    background-color: var(--color--blue);
}
.tbl-top .btn-excelDownload{
    border: 1px solid var(--color--border); color: var(--color--gray);
}
.tbl-top .btn-excelDownload::before{
    background-color: var(--color--gray);
}


table tr th,
table tr td{
    padding: 5px; border: 1px solid var(--color--border);
}
table thead tr{
    background-color: var(--bg--gray2);
}
table thead tr th{
    font-weight: 500; color: var(--color--black);
}
table tbody tr td{
    background-color: var(--color--white); font-weight: normal; color: var(--color--gray);
}
table tfoot tr th,
table tfoot tr td{
    background-color: var(--color--white);
}
table tr.hover th,
table tr.hover td{
    background-color: var(--bg--skyblue); color: var(--color--mint);
}

.sales-table{
    height: 500px; border-top: 1px solid var(--color--border);
    overflow-x: scroll; position: relative;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
}
.sales-table::-webkit-scrollbar {    width: 5px; height: 5px;	}
.sales-table::-webkit-scrollbar-track {    background: var(--bg--gray);		}
.sales-table::-webkit-scrollbar-thumb {  background-color: #b3c6df;  border-radius:20px; border: 5px solid #ccdaed;	}
.sales-table::-webkit-scrollbar-thumb:hover{    border: 5px solid #ccdaed;  }
.sales-table > div{
    /*width: 100%;*/
}
.sales-table table tr th,
.sales-table table tr td{
    user-select: none;
}
.sales-table table{
    width: 100%;
}
.sales-table table thead{
    position: sticky; left: 0; top: 0;
}
.sales-table table tr th{
    height: 40px; position: relative;
}
.sales-table table tr th .toggle-align{
    position: absolute; right: 10%; top: 50%; transform: translateY(-50%);
}
.sales-table table tr td{
    height: 40px;
}
.sales-table table tfoot{
    position: sticky; left: 0; bottom: 0;
    box-shadow: 0 -1px 1px var(--color--gray);
}
.sales-table .fixed-table{
    position: sticky; left: 0; top: 0; z-index: 2;
    width: 1200px;
}
.sales-table .fixed-table table thead tr th{
    height: 80px;
}
.sales-table table tfoot tr{
    border-top: 1px solid var(--color--black);
}
.sales-table table tfoot tr th{
    width: 700px; height: 40px; color: var(--color--black); font-weight: 500;
}
.sales-table table tfoot tr td{
    height: 40px; color: var(--color--black); font-weight: 500; box-shadow: 0 -1px 2px black;
}
.sales-table .scroll-table{
    /*position: absolute; left: 1030px; top: 0; overflow: hidden; */
    z-index: 1;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
    align-self: flex-start;
}
.sales-table .scroll-table > div{
    width: 300px;
}
.sales-table .scroll-table .otherDiv{

}

.sales-month-table{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: flex-start; align-items: stretch;
    overflow-x: scroll; padding-bottom: 10px;
}
.sales-month-table::-webkit-scrollbar {    width: 10px; height:10px;	}
.sales-month-table::-webkit-scrollbar-track {    background: var(--bg--gray);		}
.sales-month-table::-webkit-scrollbar-thumb {  background-color: #b3c6df;  border-radius:20px; border: 5px solid #ccdaed;	}
.sales-month-table::-webkit-scrollbar-thumb:hover{    border: 5px solid #ccdaed;  }
.sales-month-table > div table{
    width: 100%;
}
.sales-month-table > div table tr th{
    height: 40px;
}
.sales-month-table > div:first-child table thead tr th{
    height: 80px;
}
.sales-month-table table tfoot tr th,
.sales-month-table table tfoot tr td{
    height: 40px;
}





/* TABSET */
.tabset{    overflow:hidden;    }
.tabset .tabs{
    display:flex; flex-direction: row; flex-wrap:wrap; position:relative;
    border: 1px solid var(--color--border); border-left: none; border-right: none;
    background-color: var(--bg--gray2);
}
.tabset .tabs > span{   display:block; }
.tabset .tabs > span > a{
    height:40px; line-height:40px; display:block;
    font-size:var(--size--regular); color:var(--color--inactive); padding:0 20px; background-color: var(--bg--gray2);
    border-right: 1px solid var(--color--border);
}
.tabset .tabs > span.current > a{
    background-color: var(--color--white);
    font-weight:500; color: var(--color--blue); position: relative; overflow: hidden; border-top: 3px solid var(--color--blue);
}
.tabset .tabs > .btn-product{   position:absolute; right:10px; top:10px; padding:0 10px;  }
/*.tabs > li{ float:left; display:inline-block;   }*/
/*.tabs > li > a{ display:block; font-size:14px; font-weight:normal; color:#6d6e71; padding:4px 20px; background-color:#f1f2f2; border:1px solid #d1d3d4; margin:0 0 0 -1px;   }*/
/*.tabs > li > a.active{  background-color:#ffffff; color:#000000; border-top:2px solid #1bb0bf; border-bottom:none;  }*/
.tabset .panels{    overflow:hidden; position: relative; padding: 15px;  }
.tabset .panels .no-chart{   position: absolute; left: 50%; top: 50%;    }
.tabset .panels .no-data{   position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)    }

.tab-title{ font-size:var(--size--medium); font-weight:500; color:var(--color--darkgray); margin-bottom:15px;   }
.tbl-top-left .tab-title{   margin-bottom:0;    }

.content-body > .tabset > .tabs{
    border-top: none;
}


.store-photo{
    display:flex; flex-direction:row; flex-wrap:nowrap; justify-content: space-between; align-items: stretch;
}
.store-photo-btn{
    width: 80px; height: 80px; background:var(--color--white) !important; border:1px dashed var(--color--inactive); position:relative; text-indent:-9999px; text-align:left;
    cursor:pointer; border-radius:5px;
}
.store-photo-btn::before{
    content:""; width: 20px; height: 20px; display: inline-block; background-color: var(--color--gray);
    mask-image: url("./../images/ico-plus.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: 100%;
    -webkit-mask-image: url("./../images/ico-plus.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 100%;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.store-photo .store-photo-img{
    width: 50%;
    display:flex; flex-direction: row; flex-wrap:wrap; align-content: flex-start; justify-content: flex-start; align-items:flex-start; gap: 10px;
    padding: 10px;
    border: 1px solid var(--color--border);
}
.store-photo .store-photo-img > div{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: center;
    position: relative; padding-bottom: 40px;
}
.store-photo .store-photo-list{
    border-bottom: 1px solid var(--color--border);
}
.store-photo .store-photo-img .img{
    width: 80px; height: 80px; border:1px solid var(--color--border); border-radius:5px; position:relative;
}
.store-photo .store-photo-img .img.selected{
    position: relative;
}
.store-photo .store-photo-img .img.selected::before{
    content: "대표이미지"; width: 100%; display: block;
    background-color: var(--color--black); text-align: center; color: var(--color--white);
    font-size: var(--size--small); font-weight: normal; line-height: 100%; padding: 6px 0 4px 0;
    position: absolute; left: 0; top: 0; box-sizing: border-box;
}
.store-photo .store-photo-img .img > img{   border-radius:5px; width:100%; height:100%; }
.store-photo .store-photo-img .img.selected > img{
    border: 2px solid var(--color--black);
}
.store-photo .store-photo-img .btn-delete{
    background-color: var(--color--lightgray); color: var(--color--white);
}
.store-photo .store-photo-img .btn-delete::before{
    background-color: var(--color--white);
}
.store-photo .store-photo-txt{
    padding-left: 20px; width: calc(100% - 180px); font-size: var(--size--small);
}
.store-photo .btn-delete{
    width: 100%; height: 30px; margin-top: 5px; font-size: var(--size--regular);
}
.store-photo .store-photo-spec{
    margin-left:40px; font-size:var(--size--regular); color:var(--color--gray); position:relative;
}
.store-photo .store-photo-spec > ul > li{
    padding-left:10px; position:relative;
}
.store-photo .store-photo-spec > ul > li::before{
    content:""; width:2px; height:2px; display:block; border-radius:2px;
    position:absolute; left:0; top:10px; background-color:var(--color--gray);
}
.store-photo .dotted-list{
    width: 50%; padding: 20px; border: 1px solid var(--color--border); border-left: none;
}
.store-photo div.store-photo-btns{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; align-items: center;
}
.store-photo .store-photo-btns .btn-delete{
    width: auto;
}

.store-box{
    border: 1px solid var(--color--border); border-radius: 5px; display: inline-block;
    margin-right: 4px; background-color: var(--bg--inactive); padding-right: 5px;
}
.store-box input[type="text"]{
    border: none; background-color: transparent; width: 300px;
}
.store-box .ico-close::before{
    width: 16px; height: 16px;
    background-color: var(--color--lightgray);
}

.promotion-box{
    height: 40px; line-height: 40px; vertical-align: middle;
    display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
}
.promotion-box .ico-close{
    width: 16px; height: 16px; margin-left: 10px;
}
.promotion-box .ico-close::before{
    mask-size: 80%; -webkit-mask-size: 80%; opacity: 0.5;
}

#optionGroupVal{
    margin-top: 0;
}
#optionGroupVal > span{
    display:inline-block; margin-right:20px; font-size:var(--size--regular);
}
#optionGroupVal > span::before{
    content:"# ";
}

.input-box{
    border: 1px solid var(--color--border); border-radius: 5px;
    display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
    padding: 3px 5px 3px 3px;
}
.input-box > input[type="text"],
.input-box > input[type="number"]{
    border: none; outline: none; height: 30px;
}
.input-box .toggle-radio{
    height: 30px;
}
.input-box .toggle-radio > label > span{
    height: 24px; line-height: 24px;
}

.price-box{
    border: 1px solid var(--color--border); border-radius: 5px;
    display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
    padding: 3px 5px 3px 3px;
}
.price-box > input[type="text"],
.price-box > input[type="number"]{
    border: none; outline: none; height: 30px;
}

.textarea-box{
    border: 1px solid var(--color--border); border-radius: 5px;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: flex-start;
    padding: 3px;
}

.contract-info .tbl-top{
    padding: 5px; border: 1px solid var(--color--border); border-bottom: none; border-radius: 5px 5px 0 0; background-color: var(--bg--gray);
}
.contract-list{
    margin-bottom:30px;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch;
    gap: 1px; background-color: var(--color--border); border: 1px solid var(--color--border);
}
.contract-list > div{
    padding:10px 10px 10px 20px; background-color: var(--color--white);
    display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center;
}
.contract-name{
    display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center;
    gap: 20px; color: var(--color--lightgray); font-weight: 300;
}
.contract-name label{
    width: 140px; color: var(--color--black); font-weight: 600;
}
.contract-file{
    background-color: var(--bg--gray); border-radius: 5px; padding: 5px 10px;
    font-size: var(--size--regular);
}
.contract-btns{
    display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end; align-items:center; gap: 5px;
    color:var(--color--inactive); font-size:var(--size--small);
}

.contract-history{
    background-color:var(--bg--gray2); border:1px solid var(--color--border); border-radius:10px; padding: 10px;
}
.contract-history > ul > li{
    padding-left:10px; position:relative; font-size:var(--size--small); font-weight:normal; color:var(--color--inactive); margin-bottom:5px;
}
.contract-history > ul > li::before{
    content:""; width:3px; height:3px; display:block; border-radius:2px; background-color:var(--color--gray);
    position:absolute; left:0; top:10px;
}

/* TREE */
.tree{	box-shadow:inset 1px 1px 2px rgba(0,0,0,0.03); float:left; overflow:scroll; width:30%; height:450px; margin-right: 10px; border:1px solid #ddd; padding:10px 0;	}
.tree span{	display:block; padding:3px 10px; 	}
.tree .currentTree{	background-color:#8cdbff !important;	}
.tree > div{	margin-bottom:6px;	}
.tree a{	color:#6d6e71; font-size:14px; display:inline-block;	}


/* CATEGORY */
.category-content{  display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between;   }
.category-tree{ width: 320px; border:1px solid var(--color--border);   }
.category-tree .tbl-top{    padding: 5px; border-bottom:1px solid var(--color--border); }
.category-tree .tbl-top h2{ font-size:var(--size--medium); color:var(--color--black); font-weight:bold; padding-left:10px;    }

.category-tree .tree-menu{
    padding:10px; height: 600px;
    overflow-y: scroll;
}
.category-tree .tree-menu > div{
    margin-top:-1px;
}
.category-tree .tree-menu > div.over{
    border:1px dashed var(--color--gray); position:relative; z-index: 999999;
}
.category-tree .tree-menu > div > a{
    display:block; background-color:var(--color--white); border:1px solid var(--color--border); padding:10px 15px; color:var(--color--gray);  position:relative;
}
.category-tree .tree-menu > div > a .ico-sort{
    position:absolute; right:10px; top:50%; transform:translate(0, -50%); cursor:move;
}
.category-tree .tree-menu > div.drag{
    box-shadow:0 0 10px rgba(0,0,0,0.1); z-index:9999; position: relative;
}
.category-tree .tree-menu > div > a.brand-menu{
    border-color: var(--color--border);
    position: relative;
    background-color: #fcfdfd;
}
.category-tree .tree-menu > div > a.brand-menu::before{
    content: ""; width: 4px; height: 100%; display: block; background-color: var(--color--skyblue); opacity: 0.3;
    position: absolute; left: 0; top: 0;
}
.category-tree .tree-menu > .btn-add{
    width:100%; margin: 5px 0 15px 0; background-color: transparent; transition:all 0.4s ease;
    border: 1px solid var(--color--gray); color: var(--color--gray);
}
.category-tree .tree-menu > .btn-add::before{
    mask-image: url("./../images/ico-plus.svg");
    -webkit-mask-image: url("./../images/ico-plus.svg");
    background-color: var(--color--gray);
}
.tree-info{
    width:calc(100% - 320px); background-color:var(--color--white); border:1px solid var(--color--border); border-left: none;
    position:relative;
}
.tree-info .tbl-top{    height: 46px; padding: 5px; border-bottom:1px solid var(--color--border); }
.tree-info .tbl-top h2{ font-size:var(--size--medium); color:var(--color--black); font-weight:bold; padding-left: 5px;    }
.tree-info .detail-info{    padding: 10px;   }

/* 구독 트리 */
.subscribe-tree{ width:40%; background-color:var(--color--white); border:1px solid var(--color--border);   }
.subscribe-tree .tbl-top{    padding:10px; border-bottom:1px solid var(--color--border); }
.subscribe-tree .tbl-top h2{ font-size:var(--size--regular); color:var(--color--black); font-weight:bold; padding-left:10px;    }
.subscribe-tree .tree-menu{  padding:10px; overflow-y: scroll; }
.subscribe-tree .tree-menu > div{ margin-top:-1px; }
.subscribe-tree .tree-menu > div.over{ border:1px dashed var(--color--hidden); position:relative; z-index: 999999; }
.subscribe-info{ width:59%; background-color:var(--color--white); border:1px solid var(--color--border); position:relative; }
.subscribe-info .tbl-top{    padding:10px; border-bottom:1px solid var(--color--border); }
.subscribe-info .tbl-top h2{ font-size:var(--size--regular); color:var(--color--black); font-weight:bold; padding-left:10px;    }
.subscribe-info .detail-info{ padding:15px 20px;   }
/* 구독 트리 */

/* SYSTEM MENU TREE */
.system-tree{
    width: 280px; border: 1px solid var(--color--border);
}
.system-tree *{
    box-sizing:border-box;
}
.system-tree .tbl-top{
    height: 46px; padding: 5px; border-bottom: 1px solid var(--color--border);
}
.system-tree .tbl-top .tbl-top-left p,
.tree-info .tbl-top .tbl-top-left p{
    color: var(--color--black); font-weight: 500; font-size: var(--size--medium); padding: 0 0 0 5px;
}
.system-tree .tree-menu{
    padding: 10px; overflow-y: scroll;
}
.system-tree + .tree-info{
    width: calc(100% - 280px);
}
.system-tree .system-menu a{
    color: var(--color--gray); font-weight: 300; font-size: var(--size--medium); display:block;
}
.system-tree .system-menu a:hover{
    color: var(--color--black);
}
.system-tree .system-menu ul{
    position:relative; transition: all 0.2s ease;
}
.system-tree .system-menu > ul li{
    position: relative; transition: all 0.4s ease;
}
.system-tree .system-menu > ul li.sysmenu-dept2,
.system-tree .system-menu > ul li.sysmenu-dept3{
    padding-left: 14px;
}
.system-tree .system-menu > ul > li::after{
    content: ""; width: 1px; height: 100%; display: block;
    position: absolute; left: 7px; top: 15px; background-color: var(--color--border);
}
.system-tree .system-menu > ul > li:last-child::after{
    display: none;
}
.system-tree .system-menu > ul > li > ul::before,
.system-tree .system-menu > ul > li > ul > li > ul::before{
    content:""; width: 1px; height: calc(100% - 7px); display: block; background:var(--color--border);
    position: absolute; left: 7px; top: -8px;
}
.system-tree .system-menu > ul li.sysmenu-dept2 > div::before,
.system-tree .system-menu > ul li.sysmenu-dept3 > div::before{
    content: ""; width: 10px; height: 1px; display: block; background-color: var(--color--border);
    position: absolute; left: -6px; top: 50%; transform: translate(0, -50%);
}
.system-tree .system-menu > ul li.sysmenu-dept2:last-child > ul::after{
    content:""; width: 1px; height: 130%; display: block; background:var(--color--border);
    position: absolute; left: -7px; top: -24px;
}
.system-tree .system-menu > ul li > div{
    height: 30px; line-height: 30px; padding: 0 10px 0 22px; position:relative;
}

.system-tree .system-menu > ul li > div .tree-fold{
    width: 14px; height: 14px; display:block; text-indent:-9999px; text-align:left; position:absolute; left: 0; top: 8px;
    transition: all 0.2s ease; border: 1px solid var(--color--border); background-color: var(--color--white); z-index: 10;
}
.system-tree .system-menu > ul li > div .tree-fold::before{
    content: ""; width: 100%; height: 100%; display: block;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background-color: var(--color--inactive);
    mask-image: url("./../images/ico-minus.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: 80%;
    -webkit-mask-image: url("./../images/ico-minus.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 80%;
}
.system-tree .system-menu > ul li.current > div a{
    color: var(--color--blue); font-weight: normal;
}
.system-tree .system-menu > ul li.current > div .tree-fold{
    border-color: var(--color--blue);
}
.system-tree .system-menu > ul li.current > div .tree-fold::before{
    background-color: var(--color--blue);
    mask-image: url("./../images/ico-minus.svg");
    -webkit-mask-image: url("./../images/ico-minus.svg");
}
.system-tree .system-menu > ul li.unfold > ul{
    display:none;
}
.system-tree .system-menu > ul li.unfold > div .tree-fold::before{
    mask-image: url("./../images/ico-plus.svg");
    -webkit-mask-image: url("./../images/ico-plus.svg");
}
.system-tree .system-menu > ul li.no-submenu > div .tree-fold{
    transform: none;
}
.system-tree .system-menu > ul li.no-submenu > div .tree-fold{
    border: none;
}
.system-tree .system-menu > ul li.no-submenu > div .tree-fold{
    width: 16px; height: 16px;
}
.system-tree .system-menu > ul li.no-submenu > div .tree-fold{
    background-color: transparent;
}
.system-tree .system-menu > ul li.no-submenu > div .tree-fold::before{
    mask-image:url("./../images/ico-document.svg"); mask-size: contain;
    -webkit-mask-image:url("./../images/ico-document.svg"); -webkit-mask-size: contain;
}
.system-tree .system-menu > ul li.no-submenu > div .tree-fold.home{
    background-color: var(--color--white);
}
.system-tree .system-menu > ul li.no-submenu > div .tree-fold.home::before{
    mask-image:url("./../images/ico-home.svg"); mask-size: contain;
    -webkit-mask-image:url("./../images/ico-home.svg"); -webkit-mask-size: contain;
}
.system-tree .all-fold,
.system-tree .all-unfold{
    width: 32px; height: 32px; text-align: left; text-indent: -9999px; border: 1px solid var(--color--border); position: relative;
}
.system-tree .all-fold::before,
.system-tree .all-unfold::before{
    content:""; width: 18px; height: 18px; display: block; background-color: var(--color--gray);
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    mask-repeat: no-repeat; mask-position: center center; mask-size: 100%;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 100%;
}
.system-tree .all-fold::before{
    mask-image: url("./../images/ico-fold.svg");
    -webkit-mask-image: url("./../images/ico-fold.svg");
}
.system-tree .all-unfold::before{
    mask-image: url("./../images/ico-unfold.svg");
    -webkit-mask-image: url("./../images/ico-unfold.svg");
}

.authority-content .system-tree{
    width: 400px; background-color: var(--bg--gray2);
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: stretch; justify-content: flex-start; align-items: stretch;
}
.authority-content .system-tree + .tree-info{
    width: calc(100% - 400px);
}
.authority-content .system-tree + .tree-info #authTitle{
    font-weight: bold;
}
.system-tree .authority-list{
    height: 600px; overflow-y: scroll;
    position: relative; padding: 10px;
}
.system-tree .authority-list .authority{
    border: 1px solid var(--color--border2); border-radius: 5px; margin-bottom: 5px; padding: 10px; background-color: var(--color--white);
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
}
.system-tree .authority-list .authority > div{
    width: 100%; position: relative;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; gap: 10px;
}
.system-tree .authority-list .authority > div > p{
    color: var(--color--black);
}
.system-tree .authority-list .authority > div > .btn{
    height: 30px;
    font-size: var(--size--regular); padding: 0 10px; border: 1px solid var(--color--border);
    margin-left: 10px; color: var(--color--gray);
}
.system-tree .authority-list .authority > div .ico-setting{
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
.system-tree .authority-list .authority > div .ico-setting::before{
    width: 90%; height: 90%;
}
.system-tree .authority-list .authority .status-item{
    min-width: 60px;
}
.system-tree .authority-list .authority.current{
    border-color: var(--color--blue);
}
.system-tree .authority-list .authority.current > div p{
    color: var(--color--blue);
}


.member-content .system-tree .authority-list .authority > p{
    color: var(--color--black);
}
.member-content .system-tree .authority-list .authority.current{
    position: relative;
}
.member-content .system-tree .authority-list .authority.current::after{
    content: ""; width: 10px; height: 10px; display: block; background-color: var(--color--blue);
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    mask-image: url("./../images/arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-normal.svg");-webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.member-content .system-tree .authority-list .authority.current > p{
    color: var(--color--blue);
}
.member-content .tree-info .detail-info .tbl-top{
    padding: 0; margin-bottom: 5px; border-bottom: 0;
}
.member-content .system-tree{
    width: 240px;
}
.member-content .system-tree + .tree-info{
    width: calc(100% - 240px);
}


/* 편의시설등록 */
.amenity-check{
    border: 1px solid var(--color--border); border-radius: 10px; padding: 10px;
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center;
}
.amenity-check > .ui-label{
    width: 20%; display: block; padding: 10px; margin: 0; cursor: pointer;
}
.amenity{
    border: 1px solid var(--color--border); border-radius: 10px; overflow: hidden;
}
.amenity .tbl-top{
    padding: 10px;
}
.amenity-product-select{
    position: relative; overflow: hidden; padding-top: 50px;
}
.amenity-product-top{
    width: 100%; height: 50px; padding: 10px 20px 10px 20px;
    position: absolute; left: 0; top: 0; background-color: var(--bg--inactive);
}
.amenity-product-list{
    padding: 10px 10px 10px 20px; overflow-y: scroll; position: relative;
}
.amenity-product-list > p{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.amenity-list{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center; gap: 10px;
    padding: 5px 0;
}
.amenity-list .ui-label{
    width: 200px;
    border-bottom: 0; padding: 0;
}
.amenity-list .ui-label input[type="checkbox"] + span{
    font-size: var(--size--medium); color: var(--color--black); font-weight: 500;
}
.amenity-list > div:nth-child(2){
    width: calc(100% - 200px);
}
.amenity-list > div > p{
    font-size: var(--size--medium); color: var(--color--black);
}


/* 예약유의사항 */
.reservation-warning-add{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.reservation-warning-add > input[type="text"]{
    width: calc(100% - 80px);
}
.reservation-warning .promotion-product-list .ui-label input[type="checkbox"] + span{
    justify-content: space-between;
}
.reservation-warning .promotion-product-list .ui-label input[type="checkbox"] + span .category{
    width: calc(100% - 100px); height: 40px; line-height: 40px; border: none; margin: 0;
}
.reservation-warning .promotion-product-list .ui-label input[type="checkbox"] + span .category input[type="text"]:read-only{
    background-color: transparent; color: var(--color--gray);
}
.reservation-warning .promotion-product-list .ui-label input[type="checkbox"] + span .category input[type="text"]{
    border-color: transparent; outline: none; padding-left: 0;
}
.reservation-warning .promotion-product-list .ui-label input[type="checkbox"] + span .category input[type="text"].modify{
    border-color: var(--color--border); padding-left: 10px;
}
.reservation-warning .promotion-product-list .ui-label input[type="checkbox"] + span .category input[type="text"].modify:focus{
    border-color: var(--color--black);
}
.reservation-warning .promotion-product-select{
    border-radius: 5px;
}


/* 예약설정 */
.reservation-top{
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-items: center; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}
.reservation-top-center{
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-items: center; justify-content: flex-start; align-items: center; gap: 10px;
}
.reservation-top-center h2{
    font-size: var(--size--medium); font-weight: 500; color: var(--color--black);
}
.reservation-top-center .ico-prev,
.reservation-top-center .ico-next{
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--color--border);
}
.reservation-top-center .ico-prev::before,
.reservation-top-center .ico-next::before{
    width: 50%; height: 50%; background-color: var(--color--lightgray);
}
.reservation-top-right{
    text-align: right;
}
.reservation-legend{
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-items: center; justify-content: flex-end; align-items: center; gap: 20px;
}
.reservation-legend span{
    display: block; padding-left: 25px; position: relative;
}
.reservation-legend span::before{
    content: ""; width: 20px; height: 16px; display: block;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.reservation-legend span::before{
    border-radius: 3px;
}
.reservation-legend span:first-child::before{
    background-color: var(--color--blue);
}
.reservation-legend span:nth-child(2)::before{
    background-color: var(--color--hidden);
}

.reservation-status-body{
    overflow-x: scroll;
}
.reservation-status-body::-webkit-scrollbar{
    width: 0;
}
.reservation-status-list{
    min-width: 1100px; min-height: 300px; position: relative;
    border: 1px solid var(--color--border); border-radius: 10px; overflow: hidden;
}
.reservation-status-none{
    text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.reservation-status-list > .list{
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-items: stretch; justify-content: space-between; align-items: stretch;
    border-top: 1px solid var(--color--border);
}
.reservation-status-list > .list:hover{
    background-color: var(--bg--gray);
}
.reservation-status-list > .list.today{
    background-color: var(--bg--skyblue);
}
.reservation-status-list > .list:first-child{
    border-top: none;
}
.reservation-status-list > .list > *{
    width: 100%; height: 28px;
}
.reservation-status-list > .list h3{
    line-height: 28px; padding: 0 0 0 10px; text-align: center;
    font-size: var(--size--small); font-weight: normal; color: var(--color--black);
    background-color: var(--bg--skyblue);
}
.reservation-status-list > .list > div{
    border-left: 1px solid var(--color--border); padding: 4px 0; position: relative;
    background-color: var(--bg--gray2);
}
.reservation-status-list > .list > div:hover{
    cursor: pointer;
}
.reservation-status-list > .list > div:hover::before{
    content: ""; width: 14px; height: 14px; display: block; background-color: var(--color--gray);
    mask-image: url("./../images/ico-plus.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-plus.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.reservation-status-list > .list > div > span{
    height: 20px; line-height: 20px; padding: 0 5px; background-color: var(--color--blue); cursor: pointer;
    display: block; border-radius: 3px; font-size: var(--size--small); font-weight: 300; color: var(--color--white); text-align: center;
    position: relative; z-index: 10;
}

.reservation-status-list > .list > div span.unused{
    background-color: var(--color--hidden);
}
.reservation-status-list > .list > div span.none{
    background: transparent; color: var(--color--border);
}
.reservation-status-list > .list > div:hover span.none{
    display: none;
}
.reservation-detail-pop{
    width: 340px; height: 400px;
    position: absolute; z-index: 999999;
    background-color: var(--color--white); border: 1px solid var(--color--border); padding: 15px 5px 15px 15px;
    box-shadow: 1px 1px 20px rgba(0,0,0,0.1), -1px -1px 20px rgba(0,0,0,0.1);
}
.reservation-detail-pop .detailInfo{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
    gap: 20px;
    height: 20px; line-height: 20px;
}
.reservation-detail-pop .detailInfo > p{
    font-size: var(--size--small); color: var(--color--black); padding-left: 20px; position: relative;
}
.reservation-detail-pop .detailInfo > p::before{
    content: ""; width: 14px; height: 14px; display: block;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    border-radius: 2px;
}
.reservation-detail-pop .detailInfo > p#confirm::before{
    background-color: var(--color--mint);
}
.reservation-detail-pop .detailInfo > p#end::before{
    background-color: var(--color--blue);
}
.reservation-detail-pop .detailInfo > p#cancel::before{
    background-color: var(--color--hidden);
}
.reservation-detail-pop .detailContent{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: stretch; justify-content: flex-start; align-items: stretch;
    gap: 5px; margin-top: 20px;
    height: calc(100% - 20px); overflow-y: scroll;
    padding: 0 20px 15px 0;
}
.reservation-detail-pop .detailContent .fc-daygrid-event-harness > a{
    padding: 10px; border: 1px solid var(--color--border2) !important; border-radius: 5px; color: var(--color--gray);
}
.reservation-detail-pop .detailContent .fc-daygrid-event-harness > a:focus{
    background-color: inherit !important; box-shadow: none !important;
}
.reservation-detail-pop .detailContent .fc-daygrid-event-harness > a:focus::after{
    background: none;
}
.reservation-detail-pop .detailContent .fc-daygrid-event-harness > a .status{
    display: inline-block; color: var(--color--white); font-weight: 500; border-radius: 5px; padding: 0 10px;
    margin-right: 10px;
}
.reservation-detail-pop .detailContent .fc-daygrid-event-harness > a .reservatrion-confirm .status{
    background-color: var(--color--mint);
}
.reservation-detail-pop .detailContent .fc-daygrid-event-harness > a .reservatrion-end .status{
    background-color: var(--color--blue);
}
.reservation-detail-pop .detailContent .fc-daygrid-event-harness > a .reservatrion-cancel .status{
    background-color: var(--color--hidden);
}
.reservation-detail-pop .close{
    position: absolute; right: 15px; top: 15px; cursor: pointer;
    width: 15px; height: 15px; text-indent: -9999px;
}
.reservation-detail-pop .close::before{
    content: ""; width: 100%; height: 100%; display: block;
    position: absolute; left: 0; top: 0; background-color: var(--color--black);
    mask-image: url("/images/ico-close.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("/images/ico-close.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

/* 예약현황 */
.reservation-info{
    /*display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: stretch;*/
    display: grid; grid-template-columns: 3fr 400px; gap: 30px;
    margin-top: 40px;
}
.reservation-info .fc .fc-toolbar-title{
    color: var(--color--black);
}
.reservation-calendar .fc-h-event .fc-event-main > div{
    background-color: var(--color--white); border-radius: 5px; border: 1px solid var(--color--border2);
    padding: 5px; cursor: pointer;
    text-overflow: ellipsis; white-space: nowrap; overflow:hidden;
}
.reservation-calendar .fc-h-event .fc-event-main > div:hover{
    border-color: var(--color--border);
}
.reservation-calendar table tr td{
    text-align: left;
}
.reservation-calendar.fc-direction-ltr .fc-daygrid-event{
    padding: 1px 10px;
}
.reservation-calendar.fc-direction-ltr .fc-daygrid-event .reservatrion-confirm.current{
    background-color: var(--color--mint); color: var(--color--white);
}
.reservation-calendar.fc-direction-ltr .fc-daygrid-event .reservatrion-confirm .status{
    border-radius: 5px; padding: 5px; display: inline-block; margin-right: 5px; color: var(--color--white);
    background-color: var(--color--mint);
}
.reservation-calendar.fc-direction-ltr .fc-daygrid-event .reservatrion-end.current{
    background-color: var(--color--blue); color: var(--color--white);
}
.reservation-calendar.fc-direction-ltr .fc-daygrid-event > div .reservatrion-end .status{
    border-radius: 5px; padding: 5px; display: inline-block; margin-right: 5px; color: var(--color--white);
    background-color: var(--color--blue);
}
.reservation-calendar.fc-direction-ltr .fc-daygrid-event .reservatrion-cancel.current{
    background-color: var(--color--red); color: var(--color--white);
}
.reservation-calendar.fc-direction-ltr .fc-daygrid-event > div .reservatrion-cancel .status{
    border-radius: 5px; padding: 5px; display: inline-block; margin-right: 5px; color: var(--color--white);
    background-color: var(--color--hidden);
}
.reservation-calendar.fc-direction-ltr .fc-daygrid-event .reservatrion-cancel.current .status{
    background-color: var(--color--red);
}
.reservation-calendar .fc-h-event .fc-event-main > div .time{
    font-weight: 500;
}
.reservation-calendar.fc .fc-dayGridMonth-view .fc-daygrid-day-events{
    overflow-y: scroll; height: 120px;
}
.reservation-calendar.fc .fc-dayGridWeek-view .fc-daygrid-day-events,
.reservation-calendar.fc .fc-dayGridDay-view .fc-daygrid-day-events
{
    overflow-y: scroll; height: 100%;
}
.reservation-calendar.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events::-webkit-scrollbar{
    width: 2px;
}
.reservation-detail{
    height: 100%; border: 1px solid var(--color--border); border-top: none;
}
.reservation-detail .tbl-top{
    padding: 15px; border-bottom: 1px solid var(--color--border);
}
.reservation-detail .tbl-top h3{
    font-size: var(--size--medium); color: var(--color--black); font-weight: bold;
}
.reservation-detail .panels{
    padding: 0; height: calc(100% - 60px); position: relative;
}
.reservation-detail .panels #defaultInfo{
    width: 100%; text-align: center; padding: 0 20px;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.reservation-detail-content{
    padding: 15px 20px; height: 100%;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: stretch;
}
.reservation-detail-content .detail-grid-column > label{
    width: 140px !important;
}
.reservation-detail-content .detail-grid-column > .value{
    width: calc(100% - 140px);
}
.reservation-detail-content .menu-list > div{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: flex-start;
    margin: 10px 0 0 0;
}
.reservation-detail-content .menu-list > div:first-child{
    margin-top: 0;
}
.reservation-detail-content .menu-list > div > p{
    width: calc(100% - 30px);
}
.reservation-detail-content .menu-list > div .ico-close{
    background-color: var(--color--lightgray);
}
.reservation-detail-content .menu-list > div .ico-close::before{
    border-radius: 50%; background-color: var(--color--white);
    mask-image: url("./../images/ico-close.svg"); mask-size: 50%;
    -webkit-mask-image: url("./../images/ico-close.svg"); -webkit-mask-size: 50%;
}
.reservation-detail-content .detail-grid-column .price-division{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
    gap: 10px;
}
.reservation-detail-content .detail-grid-column .price-division > p{
    font-weight: 500; color: var(--color--black);
}

.reservation-detail-content .btns-row button.btn-white{
    color: var(--color--red); border-color: var(--color--red);
}


/* 예약금 환불금 설정 */
.refund-setting-column{
    border: 1px solid var(--color--border); border-radius: 10px; margin-bottom: 10px; padding: 10px; gap: 10px;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
}
.refund-setting-column > div{
    width: calc(100% - 20px);
}
.refund-setting-column > div:first-child{
    min-width: 160px;
}
.refund-setting-title h4{
    font-size: var(--size--regular); font-weight: 500; color: var(--color--black); text-align: left;
}
.refund-setting-btn{
    text-align: right;
}


/* 예약취소 팝업 */
.reservation-cancel{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: stretch;
}
.reservation-cancel-guide{
    background-color: var(--bg--gray); border-radius: 10px; padding: 20px;
    font-size: var(--size--medium); color: var(--color--black); letter-spacing: 0;
}
.reservation-cancel-guide .date{
    font-size: var(--size--small); margin-bottom: 5px; font-weight: 500; color: var(--color--gray);
}
.reservation-cancel-info{
    padding: 0 20px; margin-top: 30px;
}
.reservation-cancel-info h2{
    font-size: var(--size--large); color: var(--color--black); font-weight: bold; margin-bottom: 20px;
}
.reservation-cancel-info > div .ui-label{
    display: block; margin: 15px 0;
}
.reservation-cancel-info > div .reservation-cancel-price{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
    padding: 5px 0;
}
.reservation-cancel-info > div .reservation-cancel-price h3{
    font-weight: 500; font-size: var(--size--medium); color: var(--color--black);
}
.reservation-cancel-info > div .reservation-cancel-price p{
    font-weight: normal; font-size: var(--size--medium); color: var(--color--black);
}
.reservation-cancel-info .reservation-cancel-fee{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
    gap: 6px;
}
.reservation-cancel-info .reservation-cancel-fee > input[type="text"]{
    text-align: right; color: var(--color--black);
}
.reservation-cancel-info .reservation-cancel-fee .toggle-radio > label > span{
    height: 36px; line-height: 36px; padding: 0 20px;
}
.reservation-cancel-info hr{
    margin: 15px 0; border-color: var(--color--border2);
}
.reservation-cancel .btns{
    margin-top: 20px;
    flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: stretch;
    gap: 10px;
}
.reservation-cancel .btns > button{
    width: 100%;
}

.business-hour{ margin-bottom: 30px; }
.business-hour-top{ display:flex; justify-content:space-between; margin-bottom: 10px; flex-wrap:nowrap; align-content:center; align-items:center;  }
.business-hour-top h3{  font-size:var(--size--medium); font-weight:500; color:var(--color--darkgray);   }
.business-hour-top .btn-setting{    height:auto; font-size:var(--size--regular); font-weight:normal; color:var(--color--mint); padding:0 0 0 0; position:relative;   }
.business-hour-top .btn-setting::after{
    content:""; width:12px; height:12px; display:inline-block; margin-left:8px; vertical-align:middle; position:relative; top:-1px; background-color: var(--color--purple);
    mask-image:url("./../images/arrow-normal.svg"); mask-repeat:no-repeat; mask-position:center center; mask-size:auto 100%;
}
.business-hour-box{   }
.business-hour-box #holiday{    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;    }
.business-hour-box #holiday .business-hour-column{  width:50%;  }
.business-hour-box #holiday .business-hour-column .business-hour-time .business-hour-content > div:first-child{
    width:80px; font-weight: 500;
}
.business-hour-time{

}
.business-hour-box #holiday .business-hour-column .business-hour-time .business-hour-content{   width:100%; }
.business-hour-time:first-child{ border-top:none;    }
.business-hour-time .business-hour-content{

}
.business-hour-time .business-hour-content > div select{    min-width:80px; }
.business-hour-time .business-hour-btns{    width:180px; text-align:right;   }
.business-hour-time .business-hour-btns.edit-mode{  width:300px;    }

.business-hour-box .ready-reason{
    border: 1px solid var(--color--border); border-radius: 5px; padding: 10px; margin-bottom: 10px;
}
.business-hour-box .ready-reason .tbl-top{
    border-bottom: 1px solid var(--color--border);
}
.business-hour-box .ready-reason .tbl-top-left{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center; gap: 5px;
}
.business-hour-box .ready-reason .tbl-top-left > a{
    height: 36px; line-height: 36px; border-radius: 5px; padding: 0 10px; display: block;
    border: 1px solid var(--color--border); color: var(--color--lightgray);
}
.business-hour-box .ready-reason .tbl-top-left > a.current{
    background-color: var(--color--white); color: var(--color--purple); position: relative; border-color: var(--color--purple);
}
.business-hour-box .ready-reason .ready-reason-offday{
    padding: 10px;
}

.business-hour-box .closed-reason{  padding:0 10px 10px 10px; margin-top:-10px; display:flex; justify-content:space-between; flex-direction:row; flex-wrap:nowrap; align-items:center; }
.business-hour-box .closed-reason select{   width:200px; margin-right:10px;    }
.business-hour-box .closed-reason input[type="text"]{   width:calc(100% - 200px);   }


.business-hour-box .closed-reason-body{ display:none; background-color:var(--bg--gray); border-radius:10px; margin:0 20px 20px 20px; padding:20px; text-align:center;   }
.business-hour-box .closed-reason-history{
    min-height:40px; position:relative;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;

}
.business-hour-box .closed-reason-history .text{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
    column-gap: 10px;
}
.business-hour-box .closed-reason-history .btn-modify,
.business-hour-box .closed-reason-history .btn-delete{
    border: none; padding: 0 5px; min-width: auto;
}
.business-hour-box .closed-reason-history .btn-modify::before,
.business-hour-box .closed-reason-history .btn-delete::before{
    display: none;
}
.business-hour-box .closed-reason-history > p:first-child{    width:120px;    }
.business-hour-box .closed-reason-history > p{  margin-right:20px;  }
.business-hour-box .closed-reason-history > .btn-delete-icon{   position:absolute; right:0; top:50%; transform:translate(0, -50%);  }
.business-hour-box .closed-reason-history > .btn-modify-icon{   position:absolute; right:46px; top:50%; transform:translate(0, -50%);   }

.detail-grid-column .business-hour-btns{
    position: absolute; right: 0; top: 0;
}

/* 옵션선택팝업 */
.option-select{ display:flex; flex-direction:row; justify-content:space-between; flex-wrap:nowrap; align-items:stretch;   }
.option-select-group{    width:60%; border:1px solid var(--color--border);  }
.option-select-group .tbl-top{   min-height:60px; border-bottom:1px solid var(--color--border); padding:10px 10px 10px 20px;   }
.option-select-group .option-group-list{    height:620px; overflow-y:scroll;    }
.option-select-group .option-group-column{   border-top:1px dashed var(--color--border2); padding:20px; position:relative;    }
.option-select-group .option-group-column:first-child{   border-top:none;    }
.option-select-group .option-group-column .option-group-info{   display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center;   }
.option-select-group .option-group-column .option-group-info > dl{  display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; }
.option-select-group .option-group-column .option-group-info > dl > dt{ color:var(--color--black); font-weight:500; font-size:var(--size--regular); }
.option-select-group .option-group-column .option-group-info > dl > dd{ color:var(--color--gray); font-weight:normal; margin-left:15px; font-size:var(--size--medium);   }
.option-select-group .option-group-column .option-group-info .option-group-detail{
    width:100%; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; margin:10px 0 0 30px; position:relative; min-height:28px;
}
.option-select-group .option-group-column .option-group-info .option-group-detail > span{   margin-right:5px;   }
.option-select-group .option-group-column .option-group-info .option-group-detail > p{  margin-left: 10px; color: var(--color--inactive);  }
.option-select-group .option-group-column .more{
    width:32px; height:32px; border-radius:50%; display:block; position:absolute; right:20px; top:20px; background-color:var(--color--border2); text-indent:-9999px; cursor:pointer;
}
.option-select-group .option-group-column .more::before{
    content:""; width:14px; height:14px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(90deg); transition:all 0.4s ease;
    background-color: var(--color--white);
    mask-image: url("./../images/arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-normal.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.option-select-group .option-group-items{   border:1px solid var(--color--border2); border-radius: 5px; padding:10px; margin:15px 0 0 0; display:none; }
.option-select-group .option-group-items .option-group-item{    min-height:28px; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:start; align-items:center; position:relative; padding:0 200px 0 20px; margin-top:10px; }
.option-select-group .option-group-items .option-group-item:first-child{    margin-top:0;   }
.option-select-group .option-group-items .option-group-item::before{
    content:""; width: 6px; height: 6px; display:block; position:absolute; left:5px; top: 10px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-treemenu.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-treemenu.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.option-select-group .option-group-items .option-group-item > p:first-child{    color:var(--color--black); margin-right: 10px;      }
.option-select-group .option-group-items .option-group-item .price{ width:100px; text-align:right; position:absolute; right:10px; top:50%; transform:translate(0, -50%); }
.option-select-group .option-group-items .option-group-item .status-item{   min-width: 60px;  }
.option-select-group .option-group-column.opened .option-group-items{ display:block;  }
.option-select-group .option-group-column.opened .more{ background-color:var(--color--border);  }
.option-select-group .option-group-column.opened .more::before{ transform:translate(-50%, -50%) rotate(-90deg); }
.option-select-btns{ width:80px; position:relative; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center; }
.option-select-btns button{ margin:2px 0; transition:all 0.4s ease;   }
.option-select-btns button:active{  background-color:var(--color--darkgray);    }
.option-select-mapping{  width:calc(40% - 80px); background-color:var(--bg--gray); border:1px solid var(--color--border);    }
.option-select-mapping .tbl-top{    min-height:60px; border-bottom:1px solid var(--color--border); padding:10px 10px 10px 20px;   }
.option-select-mapping .option-mapping-items{   padding:10px; height:620px; overflow-y:scroll;   }
.option-select-mapping .option-mapping-items > div.over{ border:1px dashed var(--color--hidden); position:relative; z-index: 999999; }
.option-select-mapping .option-mapping-items .option-mapping-item{
    min-height:50px; border:1px solid var(--color--border2); padding:10px; margin:-1px 0 0 0; position:relative;
    background-color:var(--color--white); display:flex; flex-direction:row; flex-wrap:nowrap; justify-items:flex-start; align-items:center;
}
.option-select-mapping .option-mapping-items .option-mapping-item > dl{ display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; }
.option-select-mapping .option-mapping-items .option-mapping-item > dl > dt{    font-size:var(--size--regular); color:var(--color--black); font-weight:500; margin-left:15px;  }
.option-select-mapping .option-mapping-items .option-mapping-item > dl > dd{    font-size:var(--size--regular); color:var(--color--gray); font-weight:normal; margin-left:15px;    }
.option-select-mapping .option-mapping-items .option-mapping-item .ico-category{    position:absolute; right:10px; top:50%; transform:translate(0, -50%); cursor:pointer;   }
.option-select-mapping .option-mapping-items .option-mapping-item.drag{ box-shadow:0 0 20px rgba(0,0,0,0.1); z-index:200;   }


/* TABLE SEARCH */
.tbl-search-form{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;
    border: 1px solid var(--color--border); border-radius: 5px; padding: 0 5px 0 0;
}
.tbl-search-form select{
    border: none; outline: none;
}
.tbl-search-form #searchKeyword{
    width: 200px; min-width: 200px; border: none; outline: none;
}


/* 개인정보처리방침 */
.policy{
    padding-bottom: 100px; height: calc(100vh - 60px); margin-top: 60px; overflow-y: scroll;
}
.policy h2{
    font-size: var(--size--large); font-weight: bold; color: var(--color--black); margin-bottom: 10px;
}
.policy h3{
    font-size: var(--size--regular); font-weight: 500; padding: 10px 0 10px 0;
}
.policy p{
    margin-bottom: 10px;
}
.policy table{
    width: 100%; margin-top: 20px;
}
.policy table tr th,
.policy table tr td{
    border: 1px solid var(--color--border); padding: 10px;
}
.policy table tr th{
    background-color: var(--bg--gray);
}
.policy table tr td{
    text-align: left;
}

.list-number > ol > li{
    padding-left: 24px; position: relative; margin-bottom: 10px;
}
.list-number > ol > li::before{
    content: ""; display: block; position: absolute; left: 0; top: 0;
}
.list-number > ol > li:nth-child(1)::before{
    content: "①";
}
.list-number > ol > li:nth-child(2)::before{
    content: "②";
}
.list-number > ol > li:nth-child(3)::before{
    content: "③";
}
.list-number > ol > li:nth-child(4)::before{
    content: "④";
}
.list-number > ol > li:nth-child(5)::before{
    content: "⑤";
}
.list-number > ol > li:nth-child(6)::before{
    content: "⑥";
}
.list-number > ol > li:nth-child(7)::before{
    content: "⑦";
}
.list-number1 > ol > li:nth-child(8)::before{
    content: "⑧";
}
.list-number > ol > li:nth-child(9)::before{
    content: "⑨";
}
.list-number > ol > li > ol{
    padding: 10px 0 0 20px;
}
.list-number > ol > li > ol > li{
    list-style: decimal; margin-bottom: 5px;
}


.btns .btns-fixed-r{     position: absolute; margin-left: -30px; margin-top: 0 !important; bottom: 61px; /*position:fixed; bottom:0; right:0;*/ background:#f6f6f6; border: 1px solid #dcddde; width: calc(100% - 260px); height: 60px; /*line-height: 60px;*/ padding-right: 30px; z-index: 9999;}
.btns .btns-fixed-l{	position: absolute; margin-left: -30px; margin-top: 0 !important; bottom: 61px; /*position:fixed; bottom:0; left:260px;*/ background:#f6f6f6; border: 1px solid #dcddde; width: calc(100% - 260px); height: 60px; /*line-height: 60px;*/ padding-left: 30px; z-index: 9999; }
.btns .btns-fixed-r button, .btns .btns-fixed-l button{ vertical-align: baseline; margin-top: 15px; }

.btns-center{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;
    gap: 5px;
}

.btns{
    position: relative; min-height: 40px;
}
.btns .btns-left{
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.btns .btns-center{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.btns .btns-right{
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    text-align: right;
}

.btns-row{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
    gap: 10px;
}
.btns-row button{
    width: 100%; margin: 0;
}

[class^="btn-"]{
    padding:0 10px; font-size:var(--size--medium);  transition:border 0.4s ease; min-width: 60px;
}

/* 검색 */
.btn-search{    background-color:var(--color--purple); color:var(--color--white);  }
.btn-search:before{
    content:""; width:20px; height:20px; display:inline-block; background-color: var(--color--white);
    margin-right:10px; vertical-align:middle; position:relative; top:-1px;
    mask-image: url("./../images/ico-search.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-search.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.btn-search-icon{    background-color:#1b435f; color: var(--color--white); font-weight:bold; padding:0 15px !important; text-indent: -9999px;   }
.btn-search-icon:before{
    content:""; width:14px; height:14px; display:inline-block;  vertical-align:middle; position:absolute; left: 31%; top:8px; background-color: var(--color--white);
    mask-image: url("./../images/ico-search.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-search.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}


/* 초기화 */
.btn-reset{    background-color: var(--color--inactive); color: var(--color--white); font-weight:bold; padding:0 20px !important;   }

/* 다운로드 */
.btn-download{  background-color:var(--color--white); color:var(--color--gray); border: 1px solid var(--color--border);   }
.btn-download::before{
    content:""; width:20px; height:20px; display:inline-block;
    margin-right:5px; vertical-align:middle; position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-download.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-download.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-download-white{  background-color:var(--color--white); color:var(--color--gray); border:1px solid var(--color--border);   }
.btn-download-white::before{
    content:""; width:20px; height:20px; display:inline-block;  margin-right:5px; background-color: var(--color--gray);
    vertical-align:middle; position:relative; top:-1px;
    mask-image: url("./../images/ico-download.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-download.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-download-icon{  color:#6d6e71; background-color: var(--color--white); border:1px solid #bcbec0;  }
.btn-download-icon:before{
    content:""; width:14px; height:12px; display:inline-block; background-color: var(--color--gray);
    mask-image: url("./../images/ico-download.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-download.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.btn-download-icon:hover{    border-color:#6c6d70;    }


/* 등록 */
.btn-register{
    background-color:var(--color--purple); color:var(--color--white);
}

/* 수정 */
.btn-modify{    background-color: var(--color--white); color: var(--color--gray); border: 1px solid var(--color--border);  }
.btn-modify:before{
    content:""; width: 16px; height: 16px; display:inline-block; vertical-align:middle;  margin-right:5px;  position:relative; top:-1px;
    background-color: var(--color--gray);
    mask-image: url("./../images/ico-modify.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-modify.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

/* 삭제 */
.btn-delete{    background-color:var(--color--white); color:var(--color--gray); border: 1px solid var(--color--border);   }
.btn-delete:before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle; background-color: var(--color--gray);
    mask-image: url("./../images/ico-delete.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-delete.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
    margin-right:5px;  position:relative; top:-1px;
}
.btn-delete-line{    background-color:var(--color--white); color:var(--color--red); border: 1px solid var(--color--red);   }
.btn-delete-line:before{
    content:""; width:20px; height:20px; display:inline-block; vertical-align:middle;  position:relative; top:-1px; margin-right:5px; background-color: var(--color--red);
    mask-image: url("./../images/ico-delete.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-delete.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}


.btn-delete-icon{    width: 36px; height: 36px; background-color:var(--color--red); color:var(--color--white); text-align:left; text-indent:-9999px; position:relative;   }
.btn-delete-icon:before{
    content:""; width:16px; height:16px; display:block; vertical-align:middle; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background-color: var(--color--white);
    mask-image: url("./../images/ico-close.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-close.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;

}
.btn-modify-icon{
    width: 28px; min-width: 28px; height: 28px; background-color:var(--color--white); text-align:left; text-indent:-9999px; position:relative;
    border: 1px solid var(--color--border);
}
.btn-modify-icon:before{
    content:""; width: 16px; height: 16px; display:block; vertical-align:middle; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background-color: var(--color--gray);
    mask-image: url("./../images/ico-modify.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-modify.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;

}
.btn-save-icon{    width:40px; height:40px; background-color:var(--color--green); color:var(--color--white); text-align:left; text-indent:-9999px; position:relative;   }
.btn-save-icon:before{
    content:""; width:20px; height:20px; display:block; vertical-align:middle; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background-color: var(--color--white);
    mask-image: url("./../images/ico-save.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-save.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;

}

/* 취소 */
.btn-cancel{    background-color: var(--color--gray); color: var(--color--white); }
.btn-cancel::before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle;  margin-right:5px;  position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-close.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-close.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

/* 닫기 */
.btn-close{    background-color:#6d6e71; color:#ffffff;  }
.btn-close:before{
    content:""; width:10px; height:10px; display:inline-block; vertical-align:middle;  margin-right:5px;  position:relative; top:-1px;
    mask-image: url("./../images/ico-close.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-close.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

/* 행추가 */
.btn-add{    background-color:var(--color--white); color:var(--color--gray); border: 1px solid var(--color--border);   }
.btn-add:before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle;
    margin-right:5px;  position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-plus.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-plus.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.btn-add-line{    background-color:var(--color--white); color:var(--color--gray); border: 1px solid var(--color--gray)   }
.btn-add-line:before{
    content:""; width:18px; height:18px; display:inline-block; vertical-align:middle; margin-right:5px; position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-plus.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-plus.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}


/* 업로드 */
.btn-upload{    border: 1px solid var(--color--border); background-color: var(--color--white); color: var(--color--gray);   }
.btn-upload:before{
    content:""; width:20px; height:20px; display:inline-block; vertical-align:middle;
    margin-right:5px; position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-upload.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-upload.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

/* 엑셀다운로드 */
.btn-excelDownload{
    background-color: var(--color--white); color: #107c41; border:1px solid #107c41;
}
.btn-excelDownload::before{
    content:""; width: 16px; height: 16px; display:inline-block; vertical-align:middle; background-size:100%; margin-right:5px; background-color: #107c41;
    mask-image: url("./../images/ico-excel.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-excel.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
    position:relative; top:-2px;
}
.btn-excelDownload:hover{   border-color:var(--color--gray);    }


.btn-copy{    background-color: var(--color--white); color: var(--color--gray); border: 1px solid var(--color--border);  }
.btn-copy::before{
    content:""; width:18px; height:18px; display:inline-block; vertical-align:middle; background-color: var(--color--gray);
    margin-right:5px;  position:relative; top:-1px;
    mask-image: url("./../images/ico-copy.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-copy.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-time{    background-color: var(--color--white); color: var(--color--gray); border: 1px solid var(--color--border);  }
.btn-time::before{
    content:""; width: 20px; height: 20px; display:inline-block; vertical-align:middle; background-color: var(--color--gray);
    margin-right:5px;  position:relative; top:-1px;
    mask-image: url("./../images/ico-clock-gray.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-clock-gray.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}


/* 종료 */
.btn-terminate{    background-color: var(--color--gray); color: var(--color--white);  }
.btn-terminate::before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle;  position:relative; top:-1px; background-color: var(--color--white); margin-right:5px;
    mask-image: url("./../images/ico-terminate.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-terminate.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}


/* 결제취소 */
.btn-refund{    height:auto; background-color:var(--color--red); color:var(--color--white); font-weight:500; border-radius: 10px; text-align:center; padding:10px 40px; }
.btn-refund::before{
    content:""; width:40px; height:40px; display:block; vertical-align:middle; position:relative; margin:0 auto 5px auto; background-color: var(--color--white);
    mask-image: url("./../images/ico-refund.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-refund.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;

}
.btn-refund:hover::before{
    animation:refund-ani 0.6s ease infinite;
}
@keyframes refund-ani {
    0%{
        top:0;
    }
    100%{
        top:-4px;
    }
}
.btn-save{  background-color:var(--color--white); color:var(--color--gray); border: 1px solid var(--color--border);    }
.btn-save::before{
    content:""; width:18px; height:18px; display:inline-block; margin-right:5px; vertical-align: middle; background-color: var(--color--gray);
    mask-image: url("./../images/ico-save.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-save.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-product{   background-color:var(--color--blue); color:var(--color--white); }
.btn-product::before{
    content:""; width:24px; height:24px; display:inline-block; margin-right:5px; vertical-align:middle; position:relative; top:-1px; background-color: var(--color--white);
    mask-image: url("./../images/ico-product.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-product.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.btn-product-white{   background-color:var(--color--white); color:var(--color--gray); border:1px solid var(--color--border); }
.btn-product-white::before{
    content:""; width:24px; height:24px; display:inline-block; margin-right:5px; vertical-align:middle; position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-product.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-product.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-category{  background-color:var(--color--white); color:var(--color--gray); border:1px solid var(--color--border);  }
.btn-category::before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle; position:relative; top:-1px; margin-right:5px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-category.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-category.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-option{  background-color:var(--color--white); color:var(--color--gray); border:1px solid var(--color--border);  }
.btn-option::before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle; position:relative; top:-1px; margin-right:5px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-option.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-option.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-write{ background-color:var(--color--white); color:var(--color--gray); border:1px solid var(--color--border);  }
.btn-write::before{
    content:""; width:20px; height:20px; display:inline-block; vertical-align:middle; position:relative; top:-1px; margin-right:5px; background-color: var(--color--gray);
    mask-image:url("./../images/ico-modify.svg"); mask-repeat:no-repeat; mask-position:center center; background-size:contain;
    -webkit-mask-image: url("./../images/ico-modify.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-arrow{
    border: 1px solid var(--color--border); color: var(--color--gray); background-color: var(--color--white);
}
.btn-arrow::after{
    content:""; width: 10px; height: 10px; display: inline-block; margin-left: 10px; vertical-align: middle; position: relative; top: -1px; background-color: var(--color--gray);
    mask-image: url("./../images/arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-normal.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-release{
    border: 1px solid var(--color--border); color: var(--color--gray); background-color: var(--color--white);
}
.btn-release::before{
    content:""; width: 20px; height: 20px; display: inline-block; margin-right: 10px; vertical-align: middle; position: relative; top: -1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-release.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-release.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-setting{
    background-color: var(--color--white); color: var(--color--gray); border: 1px solid var(--color--inactive);
}
.btn-setting::before{
    content:""; width: 20px; height: 20px; display: inline-block; margin-right: 5px; vertical-align: middle; background-color: var(--color--gray);
    mask-image: url("./../images/ico-setting.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-setting.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-next-icon{
    width:40px; height:60px; background-color:var(--color--gray); text-align:left; text-indent:-9999px; position:relative;
}
.btn-next-icon::before{
    content:""; width:14px; height:14px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background-color: var(--color--white);
    mask-image:url("./../images/arrow-double.svg"); mask-repeat:no-repeat; mask-position:center center; mask-size:contain;
    -webkit-mask-image:url("./../images/arrow-double.svg"); -webkit-mask-repeat:no-repeat; -webkit-mask-position:center center; -webkit-mask-size:contain;
}
.btn-prev-icon{
    width:40px; height:60px; background-color:var(--color--gray); text-align:left; text-indent:-9999px; position:relative;
}
.btn-prev-icon::before{
    content:""; width:14px; height:14px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-180deg); background-color: var(--color--white);
    mask-image: url("./../images/arrow-double.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-double.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-remove{
    color: var(--color--red); font-size: var(--size--small); position: relative; padding: 0 5px;
}
.btn-remove::before{
    content: ""; width: 16px; height: 16px; display:block; background-color: var(--color--white);
    mask-image: url("./../images/ico-minus.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: 60%;
    -webkit-mask-image: url("./../images/ico-minus.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 60%;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2;
}
.btn-remove::after{
    content: ""; width: 16px; height: 16px; display: block; border-radius: 20px; background-color: var(--color--red);
    position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1;
}
.btn-address{
    border: 1px solid var(--color--border); background-color: var(--color--white); color: var(--color--gray);
    box-shadow: inset -1px -10px 10px rgba(0,0,0,0.05);
}

.btn-more::after{
    content: ""; width: 12px; height: 12px; display: inline-block; margin-left: 5px; vertical-align: middle; background-color: var(--color--gray);
    mask-image: url("./../images/arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-normal.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.btn-history{
    font-size: var(--size--regular); font-weight: normal; color: var(--color--gray); border: 1px solid var(--color--border);
}
.btn-history::before{
    content: ""; width: 16px; height: 16px; display: inline-block; margin-right: 5px; background-color: var(--color--gray); vertical-align: middle;
    mask-image: url("./../images/ico-document.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-document.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-coupon{
    border: 1px solid var(--color--border); color: var(--color--gray);
}
.btn-coupon::before{
    content: ""; width: 16px; height: 16px; display: inline-block; margin-right: 5px; background-color: var(--color--gray); vertical-align: middle;
    mask-image: url("./../images/ico-list.svg");mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-list.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-refresh{
    font-size: var(--size--regular); font-weight: normal; color: var(--color--gray); border: 1px solid var(--color--border); background-color: var(--color--white);
}
.btn-refresh::before{
    content: ""; width: 16px; height: 16px; display: inline-block; margin-right: 5px; background-color: var(--color--gray); vertical-align: middle;
    mask-image: url("./../images/ico-refresh.svg");mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-refresh.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-check{    background-color:var(--color--white); color:var(--color--gray); border: 1px solid var(--color--border);   }
.btn-check:before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle;
    margin-right:5px;  position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-check.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-check.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-doubleCheck{    background-color:var(--color--white); color:var(--color--gray); border: 1px solid var(--color--border);   }
.btn-doubleCheck:before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle;
    margin-right:5px;  position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-doubleCheck.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-doubleCheck.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-view{    background-color:var(--color--white); color:var(--color--gray); border: 1px solid var(--color--border);   }
.btn-view:before{
    content:""; width:16px; height:16px; display:inline-block; vertical-align:middle;
    margin-right:5px;  position:relative; top:-1px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-view.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-view.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.btn-gray{  background-color:var(--color--gray); color:var(--color--white); }
.btn-lightgray{ background-color: var(--color--lightgray); color: var(--color--white);  }
.btn-brown{  background-color:var(--color--brown); color:var(--color--white); }
.btn-mint{  background-color:var(--color--mint); color:var(--color--white); }
.btn-blue{  background-color:var(--color--blue); color:var(--color--white); }
.btn-green{  background-color:var(--color--green); color:var(--color--white); }
.btn-purple{    background-color:var(--color--purple); color:var(--color--white);   }
.btn-red{   background-color:var(--color--white); color:var(--color--red); border: 1px solid var(--color--red);  }
.btn-red-line{
    background-color: var(--color--white); color: var(--color--red); border: 1px solid var(--color--red);
}
.btn-white{ background-color:var(--color--white); color:var(--color--gray); border:1px solid var(--color--border);  }
.btn-gradient{
    border: 1px solid var(--color--border);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,241,241,1) 100%);
}


/* BTN ICON TEXT */
[class^="btn-icon-"]{
    font-size: var(--size--small); font-weight: 500; border-radius: 0; padding: 0 10px; text-indent: -9999px; position: relative;
    min-width: auto; height: 28px;
}
[class^="btn-icon-"]:hover{
    text-decoration: underline;
}
[class^="btn-icon-"]::before{
    content: ""; width: 12px; height: 12px; display: inline-block; margin-right: 4px;
    mask-repeat: no-repeat; mask-position: center center; mask-size: contain; vertical-align: middle;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.btn-icon-add{
    background-color: var(--color--lightgray);
}
.btn-icon-add::before{
    mask-image: url("./../images/ico-plus.svg"); -webkit-mask-image: url("./../images/ico-plus.svg"); background-color: var(--color--white);
}
.btn-icon-history{
    color: var(--color--purple);
}
.btn-icon-history::before{
    width: 16px; height: 16px; top: 0;
    mask-image: url("./../images/ico-document.svg"); -webkit-mask-image: url("./../images/ico-document.svg"); background-color: var(--color--purple);
}
/*.btn-circle{*/
/*    border-radius: 50%; padding: 0; aspect-ratio: 1/1;*/
/*}*/

/* TOGGLE RADIO */
.toggle-radio{
    display: flex; height: 36px;
    background-color: var(--bg--gray); border-radius: 5px; border: 3px solid var(--bg--gray);
}
.toggle-radio > label{
    display:block; position:relative; vertical-align:middle;
}
.toggle-radio > label > input[type="radio"]{    width:0; height:0; line-height:0; position:absolute; display:none;  }
.toggle-radio > label > span{
    height: 30px; line-height: 30px; vertical-align:middle;
    display:block; font-size:var(--size--regular); color:var(--color--inactive); font-weight:300; padding:0 15px;
    cursor:pointer;
}
.toggle-radio > label > input[type="radio"]:checked + span{
    background-color:var(--color--white); color:var(--color--darkgray); position:relative; z-index:1; border-radius: 5px;
    font-weight: 500;
}

/* TOGGLE ALIGN */
.toggle-align{
    width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin-left: 10px;
}
.toggle-align > label{
    position: relative;
}
.toggle-align > label > input[type="radio"]{
    width: 0; height: 0; line-height: 0; position: absolute; left: 0; top: 0;
}
.toggle-align > label > input[type="radio"] + span{
    width: 14px; height: 14px; display: block; text-align: left; text-indent: -9999px; position: relative;
}
.toggle-align > label > input[type="radio"] + span::before{
    content: ""; width: 100%; height: 100%; display: block; background-color: var(--color--gray);
    position: absolute; left: 0; top: 0;
    mask-image: url("./../images/ico-align.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-align.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.toggle-align > label.align-up > input[type="radio"] + span::before{
    transform: rotate(-180deg);
}
.toggle-align > label > input[type="radio"]:checked + span{
    display: none;
}

/* TOGGLE SWITCH */
.toggle-switch{ position:relative;  }
.toggle-switch > label{ display:inline-block; position:relative;   }
.toggle-switch > label > input[type="checkbox"]{    width:0; height:0; line-height:0; position:absolute; display:none;  }
.toggle-switch > label > input[type="checkbox"] + span{
    width: 40px; height: 20px; line-height:20px; text-align:left; padding:0 0 0 15px; cursor:pointer;
    display:inline-block; position:relative; background-color:var(--color--border); border-radius:30px; color: var(--color--white);
    text-indent: -9999px;
}
.toggle-switch > label > input[type="checkbox"] + span::before{
    content:""; width: 14px; height: 14px; border-radius:50%; background-color:var(--color--white); position:absolute; right:4px; top:50%; transform:translate(0, -50%);
}
.toggle-switch > label  > input[type="checkbox"]:checked + span{
    background-color:var(--color--skyblue); padding:0 15px 0 0;
}
.toggle-switch > label  > input[type="checkbox"]:checked + span::before{
    right:auto; left:4px;
}
/*.toggle-switch{ position:relative;  }*/
/*.toggle-switch > label{ display:inline-block; position:relative;   }*/
/*.toggle-switch > label > input[type="checkbox"]{    width:0; height:0; line-height:0; position:absolute; display:none;  }*/
/*.toggle-switch > label > input[type="checkbox"] + span{*/
/*    width:70px; height:28px; line-height:28px; text-align:left; padding:0 0 0 15px; cursor:pointer;*/
/*    display:inline-block; position:relative; background-color:var(--color--inactive); border-radius:30px; color: var(--color--white);*/
/*}*/
/*.toggle-switch > label > input[type="checkbox"] + span::before{*/
/*    content:""; width:20px; height:20px; border-radius:50%; background-color:var(--color--white); position:absolute; right:4px; top:50%; transform:translate(0, -50%);*/
/*}*/
/*.toggle-switch > label  > input[type="checkbox"]:checked + span{*/
/*    background-color:var(--color--green); text-align:right; padding:0 15px 0 0;*/
/*}*/
/*.toggle-switch > label  > input[type="checkbox"]:checked + span::before{*/
/*    right:auto; left:4px;*/
/*}*/


/* ICON BTNS */
[class^="ico-"]{
    width:24px; height:24px; display:inline-block; position:relative; text-align:left; text-indent:-9999px;
}
[class^="ico-"]::before{
    content:""; width:100%; height:100%; display:block; background-color: var(--color--gray);
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
    mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.ico-refresh::before{
    background-color: var(--color--gray);
    mask-image:url("./../images/ico-refresh.svg");
    -webkit-mask-image:url("./../images/ico-refresh.svg");
}
.ico-back::before{
    background-color: var(--color--white);
    mask-image:url("./../images/arrow-normal.svg");
    -webkit-mask-image:url("./../images/arrow-normal.svg");
    transform: translate(-50%, -50%) rotate(-180deg);
}
.ico-save::before{
    background-color: var(--color--gray);
    mask-image:url("./../images/ico-save.svg");
    -webkit-mask-image:url("./../images/ico-save.svg");
}
.ico-setting::before{
    background-color: var(--color--gray);
    mask-image:url("./../images/ico-setting.svg");
    -webkit-mask-image:url("./../images/ico-setting.svg");
}
.ico-modify::before{
    background-color: var(--color--gray);
    mask-image:url("./../images/ico-modify.svg");
    -webkit-mask-image:url("./../images/ico-modify.svg");
}
.ico-delete::before{
    background-color: var(--color--gray);
    mask-image:url("./../images/ico-delete-gray.svg");
    -webkit-mask-image:url("./../images/ico-delete-gray.svg");
}
.ico-view::before{
    background-color: var(--color--gray);
    mask-image:url("./../images/ico-view.svg");
    -webkit-mask-image:url("./../images/ico-view.svg");
}
.ico-category::before{
    width:16px; height:16px;
    background-color: var(--color--lightgray);
    mask-image:url("./../images/ico-category.svg");
    -webkit-mask-image:url("./../images/ico-category.svg");
}
.ico-close::before{
    width:20px; height:20px;
    background-color: var(--color--black);
    mask-image:url("./../images/ico-close.svg");
    -webkit-mask-image:url("./../images/ico-close.svg");
}
.ico-prev::before{
    background-color: var(--color--gray);
    mask-image: url("./../images/arrow-thin.svg");
    -webkit-mask-image: url("./../images/arrow-thin.svg");
    transform: translate(-50%, -50%) rotate(-180deg); background-size: 70%;
}
.ico-next::before{
    background-color: var(--color--gray);
    mask-image: url("./../images/arrow-thin.svg");
    -webkit-mask-image: url("./../images/arrow-thin.svg");
    background-size: 70%;
}
.ico-down::before{
    background-color: var(--color--gray);
    mask-image: url("./../images/arrow-normaldown.svg");
    -webkit-mask-image: url("./../images/arrow-normaldown.svg");
    background-size: contain;
}
.ico-up::before{
    background-color: var(--color--gray);
    mask-image: url("./../images/arrow-normaldown.svg");
    -webkit-mask-image: url("./../images/arrow-normaldown.svg");
    background-size: contain;
    transform: translate(-50%, -50%) rotate(180deg);
}
.ico-check::before{
    background-color: var(--color--lightgray);
    mask-image: url("./../images/ico-check.svg");
    -webkit-mask-image: url("./../images/ico-check.svg");
}
.ico-sort::before{
    background-color: var(--color--lightgray);
    mask-image: url("./../images/ico-sort.svg"); mask-size: 80%;
    -webkit-mask-image: url("./../images/ico-sort.svg"); -webkit-mask-size: 80%;
    mask-position: right center; -webkit-mask-position: right center;
}
.ico-sort:hover::before{
    background-color: var(--color--darkgray);
}
.ico-img::before{
    background-color: var(--color--lightgray);
    mask-image: url("./../images/ico-img.svg"); mask-size: 80%;
    -webkit-mask-image: url("./../images/ico-img.svg"); -webkit-mask-size: 80%;
}
.ico-notification::before{
    background-color: var(--color--lightgray);
    mask-image: url("./../images/ico-notification.svg"); mask-size: contain;
    -webkit-mask-image: url("./../images/ico-notification.svg"); -webkit-mask-size: contain;
}
.ico-info::before{
    width:20px; height:20px;
    background-color: var(--color--lightgray);
    mask-image:url("./../images/ico-infomation.svg");
    -webkit-mask-image:url("./../images/ico-infomation.svg");
}
.ico-search::before{
    width:20px; height:20px; background-color: var(--color--gray);
    mask-image: url("./../images/ico-search.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-search.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}



.inline{    display:inline-block !important;   }

/* FILEUPLOAD POPUP*/
/*
#fileUpload > #uploadList{ border: 1px solid #d1d3d4; height: 196px; overflow: auto; overflow-x: auto; }
#fileUpload > #uploadList li{ padding: 5px; min-height: 28px; line-height: 28px; border-bottom: 1px solid #130e0e30; background: url(/images/ico-temporarysavecircle-blue.svg) no-repeat left 5px center; background-size: 22px; padding-left: 32px !important; overflow: hidden; }
#fileUpload > #uploadList li b{ display: inline-block; float: left;  max-width: calc(100% - 80px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#fileUpload > #uploadList li:last-child{ border: none; }
#fileUpload > #uploadList li button.btn-delete{ float: right; }
*/

/* HTML 편집기 */
.edit ul, .edit ol, .edit li, .edit table, .edit tr, .edit th, .edit td{ margin: revert; padding: revert; list-style: revert; border-spacing: revert; border-collapse: revert; }
.edit table, .edit tr, .edit th, .edit td{ border: 1px solid #6d6e71; }
/* .edit ul, .edit ol{ padding: 0 37px !important; } */
/* .cke_contents{ width: 1003px !important;   } */


/* STATUS */
.status-platform{
    font-size:var(--size--small); font-weight:normal; text-align:center; background-color:var(--bg--gray); color:var(--color--inactive);
    min-width:40px; height:24px; line-height: 24px; display:inline-block; padding:0 10px; border-radius:30px;
}
.status-item{
    font-size:var(--size--small); font-weight:normal; text-align:center; background-color:var(--bg--gray); color:var(--color--inactive);
    min-width:80px; height:24px; line-height: 24px; display:inline-block; padding:0 10px; border-radius:30px;
}
.status-item > span{
    padding-left:20px; position:relative; margin-left:20px;
}
.status-item > span::before{
    content:""; width:1px; height:80%; display:block; position:absolute; left:0; top:50%; transform:translate(0, -50%);
    background-color:var(--color--border);
}
.status-item > span:first-child{
    padding-left:0; margin-left:0;
}
.status-item > span:first-child::before{
    display:none;
}
.status-approve{
    background-color:#e7f3d8; color:var(--color--green);
}
.status-cancel{
    background-color:#f5eaea; color:var(--color--red);
}
.status-ready{
    background-color:#fbf7f0; color:var(--color--brown);
}
.status-success{
    background-color: var(--bg--skyblue); color:var(--color--blue);
}
.status-finish{
    background-color:#efeaf7; color:var(--color--purple);
}
.status-inactive{
    background-color:var(--bg--gray); color:var(--color--inactive);
}
.status-white{
    background-color:var(--color--white); color:var(--color--gray); border:1px solid var(--color--border);
}
.status-signature{
    color: var(--color--purple);
}
.status-signature::before{
    content: ""; width: 18px; height: 18px; display: inline-block; background-color: var(--color--purple);
    mask-image: url("./../images/ico-signature.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-signature.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
    vertical-align: middle; margin-right: 5px; position: relative; top: -1px;
}


.brand-menu-tip{    position:relative; display:inline-block; padding-left:30px; margin-left:20px; font-size:var(--size--small); }
.brand-menu-tip::before{
    content:""; width:18px; height:18px; display:block; border-radius: 2px; background-color:#fcfdfd; position:absolute; left:0; top:50%; transform:translate(0, -50%);
    border:1px solid #333333; border-left: 4px solid var(--color--skyblue); opacity: 0.3;
}




.notify-text{
    padding-left: 24px; position: relative; margin-top: 10px; line-height: 160%; font-size: var(--size--small);
}
.notify-text::before{
    content: "※"; display: block; position: absolute; left: 0; top: 0;
}


/* 그룹관리 */
.group-management{
    height: 100%;
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px;
}
.group-management .group-add{
    height: 40px;
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 5px;
    border-radius: 5px;
}
.group-management .group-add input[type="text"]{
    width: calc(100% - 90px); height: 100%;
}
.group-management .group-add .btn-add{
    width: 90px; height: 100%; background-color: var(--color--purple); color: var(--color--white);
}
.group-management .group-add .btn-add::before{
    background-color: var(--color--white);
}
.group-management .group-list{
    height: calc(100% - 60px); padding: 5px 10px; overflow-y: scroll; position: relative;
    border: 1px solid var(--color--border); border-radius: 5px;
}
.group-management .group-list > ul > li{
    position: relative; border-top: 1px solid var(--color--border2);
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
    padding: 5px 0;
}
.group-management .group-list > ul > li:first-child{
    border-top: none;
}
/*.group-management .group-list > ul > li::before{*/
/*    content: ""; width: 20px; height: 20px; display: block; background-color: var(--color--gray);*/
/*    mask-image: url("./../images/ico-group.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;*/
/*    -webkit-mask-image: url("./../images/ico-group.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;*/
/*    position: absolute; left: 0; top: 50%; transform: translateY(-50%);*/
/*}*/
.group-management .group-list > ul > li input[type="text"]{
    width: calc(100% - 50px); margin-right: 10px;
}
.group-management .group-list > ul > li .ico-modify,
.group-management .group-list > ul > li .ico-close{
    width: 20px; height: 20px;
}
.group-management .group-list > ul > li .ico-modify::before{
    mask-image: url("./../images/ico-modify.svg");
    -webkit-mask-image: url("./../images/ico-modify.svg");
}
.group-management .group-list > ul > li .ico-check::before{
    mask-image: url("./../images/ico-check.svg");
    -webkit-mask-image: url("./../images/ico-check.svg");
}
.group-management .group-list > ul > li .ico-close::before{
    background-color: var(--color--lightgray);
    mask-image: url("./../images/ico-close.svg"); mask-size: 80%;
    -webkit-mask-image: url("./../images/ico-close.svg"); -webkit-mask-size: 80%;
}
.group-management .group-list > ul > li input[type="text"]:read-only{
    background-color: var(--color--white); border: none; padding-left: 0; color: var(--color--gray);
}
.group-management .group-list > ul > li .btns{
    width: 120px;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: center; gap: 5px;
}
.group-management .group-list > ul > li .btns button{
    width: auto; min-width: auto; height: 28px; padding: 0 10px; font-size: var(--size--small);
}
.group-management .group-list .no-data{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

#view-nodata{
    position: relative; text-align: center;
}
#view-nodata > p{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

/* PROGRESS BAR */
.progress-bar{
    width: 100%; height: 10px; border-radius: 10px; background-color: var(--color--border2); position: relative;
}
.progress-bar > span{
    display: block; height: 100%; background: var(--color--gradient); border-radius: 10px; position: relative;
}
.progress-bar > span > p{
    text-align: right; height: 16px; line-height: 16px;
    font-size: var(--size--xsmall); color: var(--color--white); position: absolute; right: 0; top: -20px; transform: translateX(50%);
    background-color: var(--color--purple); padding: 0 5px; border-radius: 5px; display: inline-block;
}
.progress-bar > span > p::before{
    content:" "; border: 4px solid var(--color--purple);
    border-left-color:transparent; border-right-color:transparent; border-bottom:none;
    position:absolute; left:50%; bottom: -4px; margin-left: -4px;
}

.time-menu #categoryName{
    margin: 5px 10px 10px 10px;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 10px;
}

/* FLEX */
.flex-row{
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: center;
    gap: 5px;
}
.flex-space{
    justify-content: space-between;
}
.flex-column{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch;
}
.gap5{
    gap: 5px;
}


/* Dashboard */
.dashboard{
    padding: 10px; max-width: 1600px;
    display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: stretch;
}

.dashboard > div{
    padding: 7px; overflow: hidden;
}
.dashboard .dash7-1{
    width: 13%;
}
.dashboard .dash7-2{
    width: 29%;
}
.dashboard .dash4-1{
    width: 25%;
}
.dashboard .dash3-2{
    width: 66.7%;
}
.dashboard .dash3-1{
    width: 33.3%;
}
.dashboard .dash2-1{
    width: 50%;
}
.dashboard .dash1{
    width: 100%;
}
.dashboard .row2{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; gap: 15px;
}

.dashboard .dashboard-box{
    height: 100%; border: 1px solid var(--color--border); border-radius: 5px; position: relative;
}
.dashboard .dashboard-box h2{
    font-size: var(--size--medium); font-weight: 600; color: var(--color--darkgray);
}
.dashboard #link > div{
    height: 100%;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center; gap: 5px;
}
.dashboard #link > div > a{
    width: 100%; height: 100%; color: var(--color--blue); border-radius: 5px; text-align: left; background-color: var(--bg--skyblue);
    border: 1px solid var(--color--border); padding: 5px 10px; display: block; position: relative; font-size: var(--size--regular); font-weight: 300;
}
.dashboard #link > div > a::after{
    content: ""; width: 10px; height: 10px; display: block; background-color: var(--color--lightgray);
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    mask-image: url("./../images/arrow-normal.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-normal.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.dashboard #link > div > a:hover{
    color: var(--color--purple);
}
.dashboard #link > div > a:hover::after{
    background-color: var(--color--purple);
}

.dashboard #today-sales .dashboard-box,
.dashboard .store-payment .dashboard-box,
.dashboard #today-orders .dashboard-box{
    height: auto;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: flex-start; gap: 10px;
    padding: 0 20px; border-left: 4px solid #249cdf; position: relative;
}
.dashboard #today-sales .dashboard-box,
.dashboard #today-orders .dashboard-box{
    height: 100%;
}
.dashboard .store-payment .dashboard-box{
    padding-top: 15px; padding-bottom: 15px;
}
.dashboard .store-payment:nth-child(2) .dashboard-box{
    border-left-color: #d65aa6;
}
.dashboard .store-payment:nth-child(3) .dashboard-box{
    border-left-color: #f69e3a;
}

.dashboard .store-payment{
    position: relative; overflow: visible; cursor: pointer;
}
.dashboard .store-payment .sales-detail{
    position: absolute; left: 0; top: 100%; z-index: 999;
    width: 100%; padding: 5px 15px; background-color: var(--bg--gray2); border: 1px solid var(--color--border); border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}
.dashboard .store-payment .sales-detail dl{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: center; padding: 10px 0;
    border-top: 1px solid var(--color--border2);
}
.dashboard .store-payment .sales-detail dl:first-child{
    border-top: none;
}

.dashboard .store-payment .dashboard-box h2::after{
    content: ""; width: 10px; height: 10px; display: inline-block; background-color: var(--color--darkgray);
    mask-image: url("./../images/arrow-triangle.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/arrow-triangle.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
    transform: rotate(90deg); margin-left: 10px; transition: all 0.2s ease;
}
.dashboard .store-payment.up .dashboard-box h2::after{
    transform: rotate(-90deg);
}

.dashboard #today-sales .dashboard-box p,
.dashboard .store-payment .dashboard-box p,
.dashboard #today-orders .dashboard-box p{
    font-size: var(--size--large); color: var(--color--black); font-weight: bold;
}
.dashboard #today-sales .dashboard-box::after,
.dashboard .store-payment .dashboard-box::after{
    content: ""; width: 40px; height: 40px; display: block; background-color: var(--color--lightgray);
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    mask-image: url("./../images/ico-sales.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-sales.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.dashboard #today-orders .dashboard-box{
    border-left-color: #d65aa6;
}
.dashboard #today-orders .dashboard-box::after{
    content: ""; width: 40px; height: 40px; display: block; background-color: var(--color--lightgray);
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    mask-image: url("./../images/ico-cart.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-cart.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}

.dashboard #operating-store .dashboard-box{
    padding: 20px;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: stretch;
    gap: 20px; border-left: 4px solid #f69e3a;
}
.dashboard #operating-store .dashboard-box > div{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
}
.dashboard #operating-store .dashboard-box p{
    color: var(--color--black); font-weight: bold;
}

.dashboard .dashboard-box .dashboard-box-top{
    padding: 10px; height: 40px;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
}
.dashboard .dashboard-box .dashboard-box-top .toggle-radio{
    height: 26px; background-color: transparent; border-radius: 20px; border: none;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: center;
}
.dashboard .dashboard-box .dashboard-box-top .toggle-radio > label > span{
    height: 24px; line-height: 24px; font-size: var(--size--regular); font-weight: 300; color: var(--color--gray);
    background-color: transparent; padding: 0 10px; border-radius: 20px;
}
.dashboard .dashboard-box .dashboard-box-top .toggle-radio > label > input[type="radio"]:checked + span{
    background-color: var(--color--white); color: var(--color--purple); border: 1px solid var(--color--purple); font-weight: 500;
}
.dashboard .dashboard-box .dashboard-box-con{
    padding: 10px; min-height: 240px; height: calc(100% - 40px);
}
.dashboard .dashboard-box .graph-circle{
    display: grid; grid-template-columns: 3fr 2fr; align-content: stretch; justify-content: space-between; align-items: center;

}
.dashboard .dashboard-box .graph-circle > div{
    width: 100%; gap: 10px; padding: 10px;
}
.dashboard .dashboard-box .graph-circle-list > ul{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; gap: 10px;
}
.dashboard .dashboard-box .graph-circle-list > ul > li{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
    padding-left: 20px; position: relative;
}
.dashboard .dashboard-box .graph-circle-list > ul > li::before{
    content: ""; width: 10px; height: 10px; display: block;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 50%; background-color: var(--color--lightgray);
}
.dashboard .dashboard-box .graph-circle-list > ul > li > p:first-child{
    color: var(--color--black);
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(1)::before{
    background-color: #5470c6;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(2)::before{
    background-color: #91cc75;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(3)::before{
    background-color: #fac858;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(4)::before{
    background-color: #ee6666;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(5)::before{
    background-color: #73c0de;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(6)::before{
    background-color: #3ba272;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(7)::before{
    background-color: #fc8452;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(8)::before{
    background-color: #9a60b4;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(9)::before{
    background-color: #ea7ccc;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(10)::before{
    background-color: #2ebfba;
}
.dashboard .dashboard-box .graph-circle-list > ul > li:nth-child(11)::before{
    background-color: #5470c6;
}
.dashboard #payment-sales .dashboard-box .graph-circle{
    grid-template-columns: 1fr; justify-content: center; justify-items: center;
}
.dashboard #payment-sales .dashboard-box .graph-circle > div{
    max-width: 400px;
}

.dashboard .dashboard-channel{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch;
    gap: 5px;
}
.dashboard .channel-status{
    padding: 10px; border-bottom: 1px solid var(--color--border2);
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-between; align-items: center;
    gap: 20px;
}
.dashboard .channel-status-name{
    width: 40%;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: flex-start;
}
.dashboard .channel-status h3{
    font-size: var(--size--medium); font-weight: 600; color: var(--color--darkgray);
}
.dashboard .channel-status .price{
    font-size: var(--size--regular); font-weight: normal; color: var(--color--lightgray);
}
.dashboard .channel-status .progress-bar{
    width: 60%; position: relative; top: 5px;
}

.dashboard .store-sales{
    position: relative;
}
.dashboard .store-sales-head{
    color: var(--color--lightgray); font-size: var(--size--regular); background-color: var(--bg--gray2); padding-right: 5px;
}
.dashboard .store-sales-body{
    overflow-y: scroll; height: calc(100% - 20px);
}
.dashboard .store-sales-head .store-sales-rows,
.dashboard .store-sales-body .store-sales-rows{
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; text-align: center; align-items: center;
}
.dashboard .store-sales-body .store-sales-rows{
    border-bottom: 1px solid var(--color--border2);
    cursor:pointer;
}
.dashboard .store-sales-head .store-sales-rows > div,
.dashboard .store-sales-body .store-sales-rows > div{
    padding: 5px;
}
.dashboard .store-sales-body .store-sales-rows h3,
.dashboard .store-sales-body .store-sales-rows p{
    color: var(--color--gray); font-size: var(--size--regular); font-weight: 300;
}
.dashboard .store-sales-body .store-sales-rows h3{
    font-weight: 500; color: var(--color--darkgray);
}
.dashboard .store-sales-body .store-sales-rows.no-data{
    text-align: center; display: block;
}



/* DASHBOARD BRAND */
.dashboard-brand #operating-store .dashboard-box{
    flex-direction: row; justify-content: flex-start; gap: 100px;
}
.dashboard-brand #operating-store .dashboard-box > div{
    width: 100%; position: relative;
}
.dashboard-brand #operating-store .dashboard-box > div:last-child::before{
    content: ""; width: 1px; height: 12px; display: block; background-color: var(--color--border);
    position: absolute; left: -50px; top: 50%; transform: translateY(-50%);
}
.dashboard-brand #link > div{
    flex-direction: row; gap: 10px;
}
.dashboard-brand #link > div > a{
    display: flex; align-content: center; align-items: center; font-size: var(--size--medium);
}
.dashboard-brand .dashboard-box .dashboard-box-con{
    min-height: 300px;
}
.dashboard-brand #affiliated-sales .dashboard-box .dashboard-box-con{
    min-height: auto;
}
.dashboard-brand #affiliated-sales,
.dashboard-store #affiliated-sales{
    max-height: 360px;
}
.dashboard-brand #member-orders,
.dashboard-store #member-orders{
    height: 360px;
}


/* DASHBOARD STORE */
.dashboard-store #today-sales .dashboard-box,
.dashboard-store .store-payment .dashboard-box,
.dashboard-store #today-orders .dashboard-box{
    padding: 10px 20px;
}
.dashboard-store #link > div{
    flex-direction: row; gap: 10px;
}
.dashboard-store #link > div > a{
    display: flex; align-content: center; align-items: center; font-size: var(--size--medium);
}


.dashboard #order-count,
.dashboard #order-price{
    height: 100%;
}
.dashboard #order-count .dashboard-box .dashboard-box-con > dl,
.dashboard #order-price .dashboard-box .dashboard-box-con > dl{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: center;
    font-size: var(--size--medium); font-weight: 600; color: var(--color--darkgray); padding: 15px; border: 1px solid var(--color--border2); border-radius: 10px;
}
.dashboard #order-count .dashboard-box .dashboard-box-con,
.dashboard #order-price .dashboard-box .dashboard-box-con{
    min-height: auto;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; gap: 10px;
}
.dashboard #order-count .dashboard-box .dashboard-box-con{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: stretch; gap: 10px;
}
.dashboard #order-count .dashboard-box .dashboard-box-con > dl{
    width: 100%;
}
/*.dashboard.dashboard-store2 #link{*/
/*    min-height: 80px;*/
/*}*/
.dashboard.dashboard-store2 #link > div{
    flex-direction: row; gap: 10px; height: auto;
}
.dashboard.dashboard-store2 #link > div > a{
    display: flex; align-items: center; padding: 20px 10px;
}


/* 개인정보처리방침 */
.privacy__text{
    text-transform: none;
}
.privacy__text h2{
    font-size: var(--size--large); font-weight: bold; color: var(--color--black); margin: 30px 0 10px 0;
}
.privacy__text h2:first-child{
    margin-top: 0;
}
.privacy__text h3{
    font-size: var(--size--medium); font-weight: 500; color: var(--color--black); margin: 20px 0 10px 0;
}
.privacy__text h3:first-child{
    margin-top: 0;
}
.privacy__text p{
    font-size: var(--size--regular); font-weight: normal; color: var(--color--gray); margin-bottom: 10px;
}
.privacy__text > ol{
    counter-reset: index; list-style-type: none;
}
.privacy__text > ol > li{
    display: list-item; text-align: -webkit-match-parent; list-style-type: none; position: relative; padding-left: 20px; margin-bottom: 5px;
}
.privacy__text > ol > li::before{
    counter-increment: index; content: counters(index, '.')  '. ';
    position: absolute; left: 0; top: 0;
}
.privacy__text > ol > li > ol{
    counter-reset: circle 0; margin: 10px 0;
}
.privacy__text > ol > li > ol > li{
    position: relative; list-style: none; padding-left: 25px; margin-bottom: 5px;
}
.privacy__text > ol > li > ol > li::before{
    position: absolute; top: 2px; left: 0;
    counter-increment: circle 1; content: counter(circle); font-size: 0.8em;
    width: 16px; height: 16px; text-align: center; line-height: 16px;
}
.privacy__text > ol > li > ol > li::after{
    content: ''; position: absolute; top: 2px; left: 0; display: inline-block; border: 1px solid #333; border-radius: 50%;
    width: 16px; height: 16px; box-sizing: border-box;
}
.privacy__text > ol > li > ul > li{
    position: relative; padding-left: 10px;
}
.privacy__text > ol > li > ul > li::before{
    content: ""; width: 4px; height: 1px; display: block;
    position: absolute; left: 0; top: 10px; background-color: var(--color--gray);
}

.table-sales{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: stretch; gap: 20px;
    margin-bottom: 40px;
}
.table-sales > div{
    width: 100%; border: 1px solid var(--color--border); border-radius: 10px; padding: 20px;
    position: relative;
}
.table-sales > #today-orders::after{
    content: ""; width: 40px; height: 40px; display: block; background-color: var(--color--lightgray);
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    mask-image: url("./../images/ico-cart.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-cart.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.table-sales > #today-sales::after{
    content: ""; width: 40px; height: 40px; display: block; background-color: var(--color--lightgray);
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    mask-image: url("./../images/ico-table.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain;
    -webkit-mask-image: url("./../images/ico-table.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain;
}
.table-sales > div h2{
    font-size: var(--size--medium); font-weight: 600; color: var(--color--darkgray); margin-bottom: 10px;
}
.table-sales > div .table-sales-price{
    font-size: var(--size--large); color: var(--color--black); font-weight: bold;
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: center; gap: 10px;
}
.table-sales > div .table-sales-price .unpayment{
    background-color: var(--bg--red); color: var(--color--red); font-size: var(--size--regular); padding: 2px 5px; border-radius: 5px;
}

.table-state > h2{
    font-size: var(--size--medium); font-weight: 600; color: var(--color--darkgray); margin-bottom: 10px;
}
.table-state-list{
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.table-obj{
    background-color: var(--bg--gray2); border: 1px solid var(--color--border2); border-radius: 10px; padding: 10px;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; gap: 10px;
    overflow: hidden;
}
.table-obj .table-obj-title h3{
    width: calc(100% - 40px);
    font-size: var(--size--medium); font-weight: bold; color: var(--color--lightgray);
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.table-obj .table-obj-title p{
    width: 40px;
    font-size: var(--size--regular); color: var(--color--lightgray); font-weight: normal; text-align: right;
}
.table-obj .table-obj-title{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: center;
}
.table-obj .table-obj-price{
    min-height: 40px;
    color: var(--color--darkgray); font-weight: normal; font-size: var(--size--regular);
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; gap: 5px;
}
.table-obj .table-obj-price > dl{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: center;
    font-size: var(--size--large);
}
.table-obj.active{
    background-color: var(--color--white); border-color: var(--color--blue);
}
.table-obj.active .table-obj-title h3{
    color: var(--color--blue);
}


.order-history{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: stretch;; gap: 10px;
    overflow-y: scroll; max-height: 400px; padding: 0 5px;
}
.order-history-menu{
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: stretch; gap: 5px;
    font-size: var(--size--large); font-weight: normal; color: var(--color--gray);
}
.order-history-menu .menu-info{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: stretch; gap: 10px;
    overflow: hidden;
}
.order-history-menu > div p:first-child{
    width: 100%;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.order-history-menu > div .quantity{
    width: 100px;
}
.order-history-menu > div .quantity::before{
    display: inline-block; content: "X"; margin-right: 5px;
}
.order-history-menu > div .price{
    width: 160px; text-align: right;
}
.order-history-menu .menu-option{
    color: var(--color--lightgray);
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; gap: 2px;
}
.order-history-menu .menu-option > div{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: stretch; gap: 10px;
}

.order-history + .order-price{
    border-top: 1px solid var(--color--border);
    font-size: var(--size--large); font-weight: normal; color: var(--color--gray);
    display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: stretch; gap: 10px;
    padding: 20px 5px 10px 5px; margin-top: 20px;
}
.order-history + .order-price > dl{
    display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: stretch; gap: 10px;
}
.order-history + .order-price > dl.red,
.order-history + .order-price > dl.black{
    font-weight: 500;
}


.window-popup .option-select-group .option-group-column{
    padding: 15px;
}
.window-popup .option-select-group .option-group-column .more{
    top: 15px; right: 15px;
}