body{background:rgba(0,0,0,0.5)}
#wrap{background:#fff; max-width:1200px; margin: 0 auto; min-height:100dvh;}
#wrap.loginBg{background:url(../images/bg.jpg) no-repeat center center / cover; max-width: none; width:100%; min-height: 100dvh;}
.naviMenu{display:none; position:absolute; max-width:1200px; width:100%; z-index:999; top:0; margin-top:7.5rem; background:#999; padding:10px 5px;}
.naviMenu.view{display:block;}
.naviMenu > .planGroupArryPick{background:#ffffff; width:100%; display:flex; flex-direction:column; }
.naviMenu > .planGroupArryPick > .pick{min-height:33px; padding-left:15px; line-height:2; text-align:left; font-weight:700; color:black; cursor:pointer; }
.naviMenu > .planGroupArryPick > .pick + .pick{border-top:1px solid #cccc}

/* login */
.loginWrap{width:100%; max-width: 600px; margin: 0 auto; padding:3rem 2rem;}
.loginWrap .logo{width:100px;}
.loginWrap .logo > img{width:100%; object-fit:cover;}

.loginWrap .title{font-size:4rem; text-align: center; margin:7rem 0 6rem; line-height:1; font-weight:600;}
.loginWrap .title > span{display:block; font-weight: 400; font-size:3rem;}

.loginWrap label{padding-left:0px; font-size:13px;}


.loginWrap .inputBox + .inputBox{margin-top:10px;} 
.loginWrap .inputBox{background: rgba(255, 255, 255, 0.5); padding: 1.5rem 1.5rem 0 1.5rem; border-radius: 5px; overflow: hidden;}
.loginWrap .inputBox > label{color: #666666; font-size: 13px; display: block; font-weight:600;}
.loginWrap .inputBox > input{width:100%; padding:0px; border:none;}

.loginWrap .btn{width: 100%; margin-top:20px;}

.loginWrap .flexbox{display: flex; justify-content: space-between; margin-top:20px;}
.loginWrap .flexbox > .checkbox{color:#fff;}
.loginWrap .flexbox > .checkbox > label > .styledBox{background:#fff;}
.loginWrap .flexbox > .checkbox > input[type=checkbox]:checked + label > .styledBox{background-color:#fff;}
.loginWrap .flexbox > .checkbox > input[type=checkbox]:checked + label > .styledBox:after{color:var(--fontColor);}

.loginWrap .flexbox > .checkbox span{color:#fff;}

/* header */
header{display: flex; gap: 10px; background: #f3f3f3; height:7.5rem; align-items: center; position:sticky; top:0; z-index:3; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); justify-content: space-between;}
header > .title{padding:0 2rem;}
header > .title > h1{font-size: 2rem; font-weight: 700; line-height:1;}
header > .title > span{font-size: 13px; font-weight: 600; color: #666; display:inline-block; line-height: 15px;}
header > .title > p {font-size:13px;font-weight: 600;color:#666; width: 100%;/* overflow: hidden; */}


header > .history_back{height: 100%;}
header > .history_back > .xi{font-size:2.8rem; padding-left:10px; height: 100%; display:flex; align-items: center;}
header > .history_back + .title{padding:0px !important; line-height:1;}

header > .btns{display:flex; align-items:center;}
header .navBtn{font-size:3rem; padding:0 2rem 1rem 1rem; margin-left:auto; height:100%;}
header .icon{height:100%; max-height:70px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
header .icon::after{font-family:"xeicon"; display:inline-block; font-size:2.5rem;}
header .icon.backBtn{cursor:pointer;}
header .icon.backBtn::after{content: "\e93b";}
header .icon.alamBtn{display:none; position: relative;}
header .icon.alamBtn::after{content: "\e99d";}
header .icon.alamBtn.none::after{content: "\e99f";}
header .icon.chatBtn{ position: relative;}
header .icon.chatBtn::after{content: "\ea15";}
header .icon.chatBtn > em {display: block; font-size: 11px; color: #fff; font-weight: 800; position: absolute; top:-12px; right: -3px; background: #f15c22; line-height: 18px; min-width: 18px; padding: 0px 3px; border-radius: 9px;	}
header .icon.chatBtn > em::before {content: attr(data-cnt);}
header .icon.chatBtn > em[data-cnt='0'] {display: none;}

header.chatHeader > .navBtn{display:none;}

header.chatHeader > .bntWrap {display: flex; align-items: center; gap: 10px; margin-left:auto; height:100%; padding-right:2rem;}
header.chatHeader > .bntWrap > .cards { display:flex; font-size:0px; z-index: 10;}
header.chatHeader > .bntWrap > .cards > p { display:inline-block;background: #999;padding:5px 0px;width:26px;text-align: center;color:#fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.3);cursor: pointer;}
header.chatHeader > .bntWrap > .cards > p > span { font-size:11px;display:none;line-height:14px;}
header.chatHeader > .bntWrap > .cards > p > b { display:block;line-height:16px;text-align:center;display:block;font-size:14px;font-weight: 800;}
header.chatHeader > .bntWrap > .cards > p > b::before { content:attr(data-cnt); }
header.chatHeader > .bntWrap > .cards > p.y { background: #ffcb2a;}
header.chatHeader > .bntWrap > .cards > p.r { background: #fa3457;}
header.chatHeader > .bntWrap > .reload_btn{font-size:2.4rem;}


/* chatFooter */
.chatWrap .chatFooter {display:inline-block; max-width:600px; background: #f3f3f3; position: fixed; bottom:0px; right:0px;left:0px;z-index: 1;border-top:1px solid #ddd;box-shadow: 0px 0px 15px rgba(0,0,0,0.1); margin:0 auto; padding:0px;}

.chatWrap .chatFooter > .btns { display:flex;padding:10px 12px;font-size:0px; }
.chatWrap .chatFooter > .btns > a { display:inline-block;line-height:28px;padding:0px 8px;border:1px solid #ddd;background: #fff;font-size:12px; vertical-align: top;border-radius: 5px;position: relative;overflow: hidden;}
.chatWrap .chatFooter > .btns > a > i { display:inline-block;line-height:28px;vertical-align: bottom;margin-left:5px;}
.chatWrap .chatFooter > .btns > a.arr { padding-right:10px; }
.chatWrap .chatFooter > .btns > a.arr > i { font-family:"xeicon"; }
.chatWrap .chatFooter > .btns > a.arr > i::before { content: "\e945"; }
.chatWrap .chatFooter > .btns > a.arr.opened { background: #eee;color:#999;}
.chatWrap .chatFooter > .btns > a.arr.opened > i::before { content: "\e942"; }

.chatWrap .chatFooter > .btns > a > input[type=file] { position: absolute;top:0px;left:0px;line-height:28px;width:150%;font-size:28px;opacity: 0;cursor: pointer;}
.chatWrap .chatFooter > .btns > a + a { margin-left:2px; }
.chatWrap .chatFooter > .btns > a.complaintBtn { background: #ED7D31; color: #fff; }

.chatWrap .chatFooter > .chat { display:block;padding:0px 12px 15px 12px;font-size:0px; background:#f3f3f3;}
.chatWrap .chatFooter > .chat > span { display:block; border:1px solid #ddd;border-radius: 5px;background:#fff;overflow: hidden;position:relative;}
.chatWrap .chatFooter > .chat > span > textarea { line-height:20px;height:26px;padding:8px 10px;width:100%; box-sizing: content-box;}
.chatWrap .chatFooter > .chat > span > button { position: absolute;top:3px;right:3px;bottom:3px;border-radius: 3px;background:#404d5e;color:#fff;padding:0px 20px;}

.chatWrap .chatFooter > .boilerplate { display:none;font-size:0px;max-height: 200px;overflow: hidden;overflow-y: auto;background: #fff; box-shadow: 0px 0px 15px rgba(0,0,0,0.1);position: absolute;left:0px;right:0px;bottom:110px;}
.chatWrap .chatFooter > .boilerplate a {padding:10px 15px;line-height: 20px;font-size:13px;color:#666;cursor: pointer;font-weight: 600;display:block;}
.chatWrap .chatFooter > .boilerplate a + a { border-top:1px solid #ddd; }
.chatWrap .chatFooter > .boilerplate.opened { display:block; }

.chatWrap .chatFooter > .boilerplate .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(0,0,0,0.5); }

.chatWrap .chatFooter > .btns > .chatTarget { display: flex; margin-left:auto;}
/*
.chatWrap .chatFooter > .btns > .chatTarget > label {cursor:pointer; border:1px solid #ddd; background: #fff; padding:0px 10px; border-radius: 5px; height: 28px; width:55px; box-sizing:border-box; font-size:12px; display:flex; align-items:center; justify-content:center;}
.chatWrap .chatFooter > .btns > .chatTarget > label:has(input[type="checkbox"]:checked){background: #50CCC6; height: 28px; }
.chatWrap .chatFooter > .btns > .chatTarget > label:has(input[type="checkbox"]:checked) > span{color:#fff;}
*/

.chatWrap .chatFooter > .btns > .chatTarget > label{padding:0px; height:auto; width:auto;}
.chatWrap .chatFooter > .btns > .chatTarget > label + label{margin-left:2px;}
.chatWrap .chatFooter > .btns > .chatTarget input[type="checkbox"] { display:none;}
.chatWrap .chatFooter > .btns > .chatTarget input[type="checkbox"] + span{cursor:pointer; border:1px solid #ddd; background: #fff; padding:0px 10px; border-radius: 5px; height: 28px; box-sizing:border-box; font-size:12px; display:flex; align-items:center; justify-content:center;}
.chatWrap .chatFooter > .btns > .chatTarget input[type="checkbox"] + span:before { display:none;}

.chatWrap .chatFooter > .btns > .chatTarget input[type="checkbox"]:checked + span{background: #50CCC6; color:#fff; position:relative; padding-left:25px;}
.chatWrap .chatFooter > .btns > .chatTarget input[type="checkbox"]:checked + span:before{content: "\e929"; font-family:xeicon; display:inline-block; border:0px; background: transparent; color: #fff; position:absolute; left:4px; top:50%; transform:translateY(-50%);}
.chatWrap .chatFooter > .btns > .chatTarget span { color: #00090d; margin-left: 0px; font-size:12px;}
.chatWrap .chatFooter > .btns > .chatTarget span:last-child { margin-right: 0; }


.chatWrap .chatCon {background:#fff; padding-bottom:110.6px; }
.chatWrap .chatCon > ul { display:block;padding:15px 0px; }
.chatWrap .chatCon > ul > li { display:block;text-align: left;position: relative;padding:0px 20px 0px 60px;overflow: hidden;}

.chatWrap .chatCon > ul > li > b { display: inline-block;background: #fff;text-shadow: 0px 0px 0px rgba(255,255,255,0.4);font-size: 11px;font-weight: 300;color: rgba(0,0,0,0.7);line-height: 20px;height: 17px;width: 17px;text-align: center;vertical-align: top;margin-left: 5px;border-radius: 50%;box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
.chatWrap .chatCon > ul > li.me > b { display: inline-block;background: #fff;text-shadow: 0px 0px 0px rgba(255,255,255,0.4);font-size: 11px;font-weight: 300;color: rgba(0,0,0,0.7);line-height: 20px;height: 17px;width: 17px;text-align: center;vertical-align: top;margin-left: 5px;border-radius: 50%;box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
.chatWrap .chatCon > ul > li > b.new { background: #f58D3D; }
.chatWrap .chatCon > ul > li > b.new::before { content: 'N'; color: #fff; }

.chatWrap .chatCon > ul > li + li { border-top:0px solid #ddd;margin-top:15px }
.chatWrap .chatCon > ul > li > div { display:inline-block;max-width:70%;padding:10px 15px;background: #eee;border-radius: 10px;position: relative; }
.chatWrap .chatCon > ul > li > div > i { position: absolute;top:6px;left:-50px;display: block;width:40px;height:40px;border-radius: 50%;background-size: cover;background-repeat: no-repeat;border:1px solid #bbb;box-sizing: border-box;}

.chatWrap .chatCon > ul > li > div > p { display:block;font-size:12px;color:#999;line-height:20px;margin-bottom:6px;}
.chatWrap .chatCon > ul > li > div > p > b { display:inline-block;height:20px;line-height:20px;vertical-align: top;font-size:13px;font-weight:500;margin-right:7px;color:#111; }
.chatWrap .chatCon > ul > li > div > p > span.read { font-weight:600; color:#fe7c1c; }
.chatWrap .chatCon > ul > li > div > div { display:block;margin-left:0px;line-height:20px; }
.chatWrap .chatCon > ul > li > div > div > b { font-weight: 600;}
.chatWrap .chatCon > ul > li > div > div > span { display:block;font-size:0px;margin-top:5px;margin-bottom:2px;}
.chatWrap .chatCon > ul > li > div > div > span > a { display:inline-block;line-height:26px;padding:0px 15px;background: #999;font-size:12px; vertical-align: top;border-radius: 2px;color:#fff; }
.chatWrap .chatCon > ul > li > div > div > span > b { display:inline-block;line-height:26px;vertical-align: top;margin-left:10px;font-size:12px;color:#999;font-weight: 700;}
.chatWrap .chatCon > ul > li > div:after,
.chatWrap .chatCon > ul > li > div:before {right: 100%; margin-right:0px; top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.chatWrap .chatCon > ul > li > div:after { border-color: transparent; border-right-color: #eee; border-width: 9px; margin-top: 0px; }

.chatWrap .chatCon > ul > li.me { text-align: right;padding:0px 20px;}
.chatWrap .chatCon > ul > li.me > div > p { color:rgba(0,0,0,0.6); }
.chatWrap .chatCon > ul > li.me > div { background: #eedcc6;}
.chatWrap .chatCon > ul > li.me > div:after,
.chatWrap .chatCon > ul > li.me > div:before {right:auto;left: 100%; margin-left:0px; top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.chatWrap .chatCon > ul > li.me > div:after { border-color: transparent; border-left-color: #eedcc6; border-width: 9px; margin-top: 0px; }

.chatWrap .chatCon > ul > li.me > div > button { background: transparent;width:26px;height:26px;line-height:26px;text-align:center;font-family: 'xeicon' !important;font-size:14px;position: absolute;top:10px;left:-26px;color:#999;}
.chatWrap .chatCon > ul > li.me > div > button::before {content: "\e921";}

.chatWrap .chatCon > ul > li.bot > div { background: rgba(90,229,223,0.5);}
.chatWrap .chatCon > ul > li.bot > div > p { color:rgba(0,0,0,0.6); }
.chatWrap .chatCon > ul > li.bot > div > p > b { font-weight: 700;letter-spacing: -0.5px;}
.chatWrap .chatCon > ul > li.bot > div > i { background: url(../images/bi_n.png) #404d5e no-repeat center;background-size: 75%;;background-repeat: no-repeat;border-radius: 5px;}
.chatWrap .chatCon > ul > li.bot > div:after,
.chatWrap .chatCon > ul > li.bot > div:before {right: 100%; margin-right:0px; top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.chatWrap .chatCon > ul > li.bot > div:after { border-color: transparent; border-right-color: rgba(90,229,223,0.5); border-width: 9px; margin-top: 0px; }
.chatWrap .chatCon > ul > li.bot > div > div > span > a { background: #404d5e; }

.chatWrap .chatCon > ul > li.bot > .managerNoti > .botMsg > b > .stRead { margin-left: 30px; font-weight:500; color: #999; }
.chatWrap .chatCon > ul > li.bot > .managerNoti > .botMsg > b > .stRead.check { color: #000; }

.chatWrap .chatCon > ul > li.date { text-align: center;padding:10px 0px;}
.chatWrap .chatCon > ul > li.date > p { padding:5px 10px;background: #fff;font-size:13px;color:#999; }
.chatWrap .chatCon > ul > li.date > div:after,
.chatWrap .chatCon > ul > li.date > div:before { display:none; }

.chatWrap .chatCon > ul > li > div > div > span > a.waiting { background: #999; }
.chatWrap .chatCon > ul > li > div > div > span > a.waiting + b {color:#999;}
.chatWrap .chatCon > ul > li > div > div > span > a.proceeding { background:#45a171; }
.chatWrap .chatCon > ul > li > div > div > span > a.proceeding + b {color:#45a171;}
.chatWrap .chatCon > ul > li > div > div > span > a.deadlined { background:#8c2332; }
.chatWrap .chatCon > ul > li > div > div > span > a.deadlined + b {color:#8c2332;}
.chatWrap .chatCon > ul > li > div > div > span > a.pending { background:#8c2332; }
.chatWrap .chatCon > ul > li > div > div > span > a.pending + b {color:#8c2332;}
.chatWrap .chatCon > ul > li > div > div > span > a.progressing { background:#ED7D31; }
.chatWrap .chatCon > ul > li > div > div > span > a.progressing + b {color:#ED7D31;}
.chatWrap .chatCon > ul > li > div > div > span > a.confirmed { background:#45a171; }
.chatWrap .chatCon > ul > li > div > div > span > a.confirmed + b {color:#45a171;}