@charset "utf-8";

:root {
    --bg-Lightgray-color:#f6f7f8;
    --bg-black-color:#1E1E1E;
    --bg-white-color:#fff;
    --bg-KeyBlue-color:#306FF2;
    --bg-BlueGrey40-color:#DDDDEB;
    --bg-BlueGrey30-color:#EBEBF5;
    --bg-BlueGrey20-color:#EDEFF5;
    --bg-BlueGrey10-color:#F6F7FB;
    --bg-skyBlueEB-color:#D1E1EB;
    --bg-GreyF1-color:#F1F1F1;
    --bg-DeepBlue-color:#2C59D9;
    --bg-Navy-color:#113C97;
    --bg-Darkblack-color:#151515;
    --bg-GreyFA-color:#FAFAFA;
    --bg-GreyF4-color:#F4F4F4;
    --bg-GreyCC-color:#CCC;
    --bg-Grey36-color:#F1F3F6;
    --bg-Lightgreen:#40a33f;
    --bg-GreyDF-color:#CFD7DF;
    --bg-GreyEE-color:#EEE;
    --bg-Grey5C-color:#50555C;
    --bg-LigihtGreyE6-color:#D8DBE6;
    --bg-GreyE6-color:#D8DBE6;
    --bg-row-hover:#F4FBFF;
    --bg-row-click:#DEE9FF;
    --bg-row-check:#FFF8EA;
    /*font size*/
    --font-size-title: 2.4rem;
    --font-size-subTitle:2rem;
    --font-size-formTitle:1.6rem;
    --font-xl: 2.8rem;
    --font-lg: 2.4rem;
    --font-md: 2rem;
    --font-sm: 1.8rem;
    --font-xs: 1.6rem;
    --font-xxs: 1.4rem;
    --font-tiny: 1.3rem;
    --font-micro: 1rem;

    /*font color*/
    --font-color-DarkGrey:#1E1E1E;
    --font-color-black:#151515;
    --font-color-white:#fff;
    --font-color-grayFA:#6f6f6f;
    --font-color-DarkGrey50:#505050;
    --font-color-Grey33:#333;
    --font-color-BrandBlue:#0F7BE5;
    --font-color-BlueGrey80:#757F93;
    --font-color-WarningRed:#D84F6E;
    --font-color-Grey99:#999;
    --font-color-77:#777;
    --font-color-KeyBlue:#306FF2;
    --font-color-BlueGreyC8:#648FC8;
    --font-color-Lightgreen:#40a33f;
    --font-color-Mantis:#66b565;
    /*font weight*/
    --font-weight-bold:700;
    --font-weight-regular:400;
    /* border*/
    --border-color-Grey:#DDDDEB;
    --border-color-DarkGrey50:#505050;
    --border-color-DarkGrey77:#777777;
    --border-color-DarkGrey99:#999999;
    --border-color-GreyDE:#DEDEDE;
    --border-color-BrandBlue:#0f7be5;
    --border-color-KeyBlue:#306FF2;
    --border-color-GreyF4:#f4f4f4;
    --border-color-Mantis:#66b565;
    --border-color-DarkGrey54:#4A4C54;
    --border-color-LightGreyE2:#D8DDE2;
    --border-color-LightGreyEE:#EEEEEE;
    --border-color-GreyDF:#CFD7DF;
    /* color */
    --black-color:#151515;
    --white-color:#fff;
    --KeyBlue-color:#306FF2;
    --BlueGrey80-color:#757F93;
    --BrandBlue-color:#0f7be5;
    --DeepBlue-color:#8abff8;
    --BlueGrey-color:#eef0fa;
    --BlueGrey30-color:#f7f9fd;
    --BlueGreyD7-color:#E5E7F0;
    --BlueGreen-color:#2FB7D3;
	--green-color:#6DCA55;
    --Lightgreen-color:#40a33f;
    --Orange-color:#f6981d;
    --Ripe-Mango-color:#ffc71b;
    --Mantis-color:#66b565;
    --WarningRed-color:#D84F6E;
    --WarmRed-color: #ff6905;
    --DarkGrey-color:#1E1E1E;
}

/* font family */
@font-face {
    font-family: 'SamsungOne';
    src: url('../font/SamsungOne-400C.woff2') format('woff2'), url('../font/SamsungOne-400C.woff') format('woff'), url('../font/SamsungOne-400C.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SamsungOne';
    src: url('../font/SamsungOne-700C.woff2') format('woff2'), url('../font/SamsungOne-700C.woff') format('woff'), url('../font/SamsungOne-700C.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SamsungOne';
    src: url('../font/SamsungOne-800C.woff2') format('woff2'), url('../font/SamsungOne-800C.woff') format('woff'), url('../font/SamsungOne-800C.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

/*reset*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font:inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family:"SamsungOne",'SamsungOne','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
b { font-weight: 700; }
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; box-sizing: border-box }

html { font-size:62.5%!important; scroll-behavior:smooth; -webkit-text-size-adjust: none; }
html,body, section { width:100%; }

legend, caption { width:0; height:0; visibility:hidden; font-size:0; line-height:0; font-family:"SamsungOne",'SamsungOne','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif; }
button { cursor:pointer; border:none; padding:0; background:var(--bg-white-color) }
button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; }
li,dd { list-style:none; }
blockquote, q { quotes:none; }
address, caption, em, cite, i, a { font-weight:normal; font-style:normal; text-decoration: none; color: #333 }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; }
iframe { width:100%; vertical-align:middle; }
caption { display:none; }
figcaption { display:block; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

input[type="text"], input[type="number"],input[type="email"], input[type="search"],
input[type="password"], input[type="date"], input[type="tel"], select { display:table-cell; vertical-align:middle; padding: 0 0 0 7px; height: 40px; line-height: 1.8rem; box-sizing: border-box; background:#fff; border:1px solid #cccccc; border-radius:0; color:#999; font-size:12px; font-family:"SamsungOne",'SamsungOne','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif; }
input[type="text"]:focus { border-color:var(--border-color-KeyBlue); }
input[type="search"] { border-radius:0; -webkit-border-radius:0; -webkit-appearance:textfield; }
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance:none; }

input[type='checkbox'],input[type='radio'] { vertical-align:middle; margin-top:0; cursor : pointer; }

select[disabled], input.disabled,input[disabled], input:read-only { background:var(--bg-GreyF1-color)!important; color:var(--font-color-Grey99)!important }
input.calendar-order:read-only, input.calendar-pop[disabled], input.calendar[disabled], input.calendar-pop:read-only, input.calendar:read-only { background:var(--bg-white-color)!important; color:var(--font-color-black); }
input.calendar-month[disabled], input.calendar-month:read-only { background:var(--bg-white-color)!important; color:var(--font-color-black)!important; }
input.capa-date[disabled], input.capa-date:read-only { background:var(--bg-white-color)!important; color:var(--font-color-black)!important; }
input.datepicker[disabled], input.datepicker:read-only { background:var(--bg-white-color)!important; color:var(--font-color-black); }
input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator { display: none; }
select[disabled].color-black, input.disabled.color-black,input[disabled].color-black, input:read-only.color-black { background:var(--bg-GreyF1-color)!important; color:var(--font-color-black)!important }

select::-ms-expand { display:none; }
select { cursor: pointer; outline :none; overflow :hidden; color:#999; width:100%; font-family:"SamsungOne",'SamsungOne','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif; }
textarea { width:100%; height:6rem; resize:none; border:1px solid #DDDDEB; padding:.8rem; background: var(--bg-white-color); border-radius: .6rem; font-family:"SamsungOne",'SamsungOne','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif; font-size: 1.4rem; }
.textarea-char { text-align: right; color:#757F93; font-weight: 400; }
.textarea-char span { color:var(--font-color-black); }

.blind { position:absolute; top:-999999px; width:0; height:0; font-size:0; overflow:hidden; }
.hidden { position: absolute; width:1px; height:1px; margin:-1px; border:none; clip: rect(0,0,0,0); overflow: hidden; }
.hide { display:none }
.show { display:block }
.clear { clear:both; height:0px; }

.sr-only { overflow: hidden; position: absolute; clip:rect(0,0,0,0); clip-path: polygon(0 0, 0 0, 0 0); width:1px; height:1px; margin:-1px }
body { overflow-x: auto; font-family:"SamsungOne",'SamsungOne','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif; position:relative; width:100%; margin:0; padding:0; background:#ffffff; line-height:1; font-size: 1.3rem; }

/*****Align****************************************************************************************************************************/
.vt { vertical-align:top !important; }
.vm { vertical-align:middle !important; }
.vb { vertical-align:bottom !important; }
.align-base { align-content:baseline !important; }
.tjust { text-align:justify !important; }
.tleft { text-align:left !important; }
.headleft { text-align:left !important; width:100%;display:inline-block}
.headright { text-align:right !important; width:100%;display:inline-block}
.tcenter { text-align:center !important; }
.tright { text-align:right !important; }
.fleft { float:left !important; }
.fcenter { float:center !important; }
.fright { float:right !important; }
.both { height:1%; }
.both:after { content: "."; display: block; height:0; clear:both; visibility:hidden; }

.fl-inline { float:left !important; display:inline; }
.fr-inline { float:right !important; display:inline; }
.fl { float:left !important; }
.fl { float:right !important; }

.over-auto { overflow:auto; }
.over-hide { overflow:hidden; }
.over-scroll { overflow:scroll; }
.over-yscroll { overflow-y:scroll; }
.over-xauto { overflow-x:auto; }
.over-yauto { overflow-y:auto; }

.pos-relative { position:relative; }
.pos-static { position:static; }
.pos-absolute { position:absolute; }
.pos-fixed { position:fixed; }

.cursor-pointer { cursor:pointer; }
.cursor-normal { cursor:none; }

.show-inline { display:inline-block; }
.ellipsis { text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; }

/* dim */
.dim { position: fixed; display:none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index:10; }

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-no-wrap { flex-wrap: nowrap !important; }
.d-flex-col { display: flex; flex-direction: column; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: end; }
.align-items-flex-start { align-items: flex-start !important; }
.justify-content-center { justify-content: center; }
.space-between { justify-content: space-between !important;}
.justify-space-around { justify-content: space-around !important;}
.inline-flex { display: inline-flex; }
/*****Font**********************************************************/
.bold { font-weight:bold; }
.normal { font-weight:normal !important; }
.underline { text-decoration:underline; }
.font-ls { letter-spacing:-1px; }
.font-lsnor { letter-spacing:0px; }
.font-cline { text-decoration:line-through }
.f11 { font-size:11px; }
.f12 { font-size:12px; }
.f13 { font-size:13px; }
.f14 { font-size:14px; }
.f15 { font-size:15px; }
.f16 { font-size:1.6rem; }
.f18 { font-size:1.8rem; }
.f20 { font-size:2rem; }
.f22 { font-size:2.2rem; }
.f24 { font-size:2.4rem; }
.f28 { font-size:2.8rem; }
.fline-10 { line-height:10px; }
.fline-14 { line-height:14px; }
.fline-15 { line-height:15px; }
.fline-18 { line-height:18px; }
.fline-20 { line-height:20px; }
.fline-23 { line-height:23px; }
.fline-28 { line-height:28px; }
.fline-35 { line-height:35px; }
.color-red { color:var(--font-color-WarningRed)!important }
.color-blue { color:var(--font-color-KeyBlue)!important }
.color-green { color:var(--font-color-Lightgreen)!important }
.color-gray { color: #757F93 !important }
.color-black { color:var(--font-color-black)!important }
.color-yellow { color:var(--Orange-color)!important }

/*****Width**************************************************************/
.wp100 { width:100%!important; } .wp80 { width:80%!important; }
.wp82 { width:82%!important; } .wp83 { width:83%!important; }
.wp84 { width:84%!important; } .wp91 { width:91%!important; }
.wp85 { width:85%!important; } .wp90 { width:90%!important; }
.wp94 { width:94%!important; } .wp96 { width:96%!important; }
.wp75 { width:75%!important; } .wp70 { width:70%!important; }
.wp65 { width:65%!important; } .wp60 { width:60%!important; }
.wp60 { width:60%!important; } .wp50 { width:50%!important; }
.wp30 { width:30%!important; } .wp40 { width:40%!important; }
.wp14 { width:14.5%!important; } .wp86 { width:85.5%!important; }
.wp15 { width:15%!important; } .wp85 { width:85%!important; }
.wp10 { width:10%!important; } .wp20 { width:20%!important; }
.w50 { width:50px!important; } .w55 { width:55px!important; }
.w70 { width:70px!important; } .w60 { width:60px!important; }
.w90 { width:90px!important; } .w85 { width:85px!important; }
.w100 { width:100px!important; } .w110 { width:110px!important; }
.w140 { width:140px!important; }
.w130 { width:130px!important; } .w150 { width:150px!important; }
.w160 { width:160px!important; } .w180 { width:180px!important; }
.w200 { width:200px!important; } .w250 { width:250px!important; }
.w260 { width:260px!important; } .w270 { width:270px!important; }
.w280 { width:280px!important; } .w290 { width:290px!important; }
.w300 { width:300px!important; } .w350 { width:350px!important; }
.w400 { width:400px!important; } .w450 { width:450px!important; }

.mw40 { max-width: 40px !important; }
/*****Height***************************************************************/
.h30 { height:30px!important; } .h40 { height:40px!important; }
.h20 { height:20px!important; }   .h24 { height:24px!important; }
.h30 { height:30px!important; }   .h40 { height:40px!important; }
.h50 { height:50px!important; }   .h70 { height:70px!important; }
.h80 { height:80px!important; }   .h90 { height:90px!important; }
.h100 { height:100px!important; } .h110 { height:110px!important; }
.h120 { height:120px!important; } .h130 { height:130px!important; } 
.h150 { height:150px!important; } .h140 { height:140px!important; }
.h166 { height:165px!important; } .h160 { height:160px!important; }
.h170 { height:170px!important; } .h180 { height:180px!important; }
.h200 { height:200px!important; } .h220 {height:220px!important;}
.h300 { height:300px!important; } .h310 { height:310px!important; }
.h320 { height:320px!important; } .h330 { height:330px!important; }
.h340 { height:340px!important; } .h350 { height:350px!important; }
.h360 { height:360px!important; } .h370 { height:370px!important; }
.h380 { height:380px!important; } .h390 { height:390px!important; }
.h400 { height:400px!important; } .h430 { height:430px!important; }
.h440 { height:440px!important; } .h450 { height:450px!important; }
.h480 { height:480px!important; } .h500 { height:500px!important; }
.h550 { height:550px!important; } .h580 { height:580px!important; }
.h600 { height:600px!important; } .h650 { height:650px!important; }
.h700 { height:700px!important; } .h750 { height:750px!important; }
.hp100 { height:100%!important; } .hp90 { height:90% !important; }
.mh40 { max-height:40px!important; } .mh70 { max-height:70px!important; }
.mh50 { max-height:50px!important; } .mh60 { max-height:60px!important; }
.mh80 { max-height:80px!important; } .mh90 { max-height:90px!important; }
.mh100 { max-height:100px!important; } .mh200 { max-height:200px!important; }
.mh300 { max-height:300px!important; } .mh310 { max-height:310px!important; }
.mh320 { max-height:320px!important; } .mh330 { max-height:330px!important; }
.mh340 { max-height:340px!important; } .mh350 { max-height:350px!important; }
.mh360 { max-height:360px!important; } .mh370 { max-height:370px!important; }
.mh380 { max-height:380px!important; } .mh390 { max-height:390px!important; }
.mh400 { max-height:400px!important } .mh430 { max-height:430px!important; }
.mh440 { max-height:440px!important } .mh450 { max-height:450px!important; }
.mh480 { max-height:480px!important; } .mh500 { max-height:500px!important; }
.mh550 { max-height:550px!important; } .mh580 { max-height:580px!important; }
.mh600 { max-height:600px!important; } .mh650 { max-height:650px!important; }

.mh60rem { max-height: 60rem!important; }
/*****Margin***************************************************************/
.mb-4 { margin-bottom:-4px !important; } .mt-4 { margin-top:-4px !important; }
.mb0 { margin-bottom:0px !important; } .mt0 { margin-top:0px !important; }
.mb1 { margin-bottom:1px; } .mt1 { margin-top:1px!important;; }
.mb2 { margin-bottom:2px; } .mt2 { margin-top:2px!important;; }
.mb3 { margin-bottom:3px; } .mt3 { margin-top:3px!important;; }
.mb4 { margin-bottom:4px; } .mt4 { margin-top:4px!important;; }
.mb5 { margin-bottom:5px; } .mt5 { margin-top:5px!important;; }
.mb6 { margin-bottom:6px; } .mt6 { margin-top:6px!important;; }
.mb7 { margin-bottom:7px; } .mt7 { margin-top:7px!important;; }
.mb8 { margin-bottom:8px; } .mt8 { margin-top:8px!important;; }
.mb9 { margin-bottom:9px; } .mt9 { margin-top:9px!important;; }
.mb10 { margin-bottom:10px !important; } .mt10 { margin-top:10px !important; }
.mb12 { margin-bottom:12px !important; } .mt12 { margin-top:12px !important; }
.mb13 { margin-bottom:13px !important; } .mt13 { margin-top:13px !important; }
.mb15 { margin-bottom:15px !important; } .mt15 { margin-top:15px !important; }
.mb20 { margin-bottom:20px !important; } .mt20 { margin-top:20px !important; }
.mb24 { margin-bottom:24px !important; } .mt24 { margin-top:24px !important; }
.mb25 { margin-bottom:25px !important; } .mt25 { margin-top:25px !important; }
.mb30 { margin-bottom:30px !important; } .mt30 { margin-top:30px !important; }
.mb35 { margin-bottom:35px !important; } .mt35 { margin-top:35px !important; }
.mb40 { margin-bottom:40px !important; } .mt40 { margin-top:40px !important; }
.mb45 { margin-bottom:45px !important; } .mt45 { margin-top:45px !important; }
.mb50 { margin-bottom:50px !important; } .mt50 { margin-top:50px !important; }
.mb60 { margin-bottom:60px !important; }  .mt60 { margin-top:60px !important; }

.ml1 { margin-left:1px; } .mr1 { margin-right:1px; }
.ml2 { margin-left:2px; } .mr2 { margin-right:2px; }
.ml3 { margin-left:3px; } .mr3 { margin-right:3px; }
.ml4 { margin-left:4px; } .mr4 { margin-right:4px; }
.ml5 { margin-left:5px; } .mr5 { margin-right:5px; }
.ml6 { margin-left:6px; } .mr6 { margin-right:6px; }
.ml7 { margin-left:7px; } .mr7 { margin-right:7px; }
.ml8 { margin-left:8px; } .mr8 { margin-right:8px; }
.ml9 { margin-left:9px; } .mr9 { margin-right:9px; }
.ml10 { margin-left:10px !important; } .mr10 { margin-right:10px; }
.ml12 { margin-left:12px; } .mr12 { margin-right:12px; }
.ml15 { margin-left:15px; } .mr15 { margin-right:15px; }
.ml20 { margin-left:20px; } .mr20 { margin-right:20px; }
.ml25 { margin-left:25px; } .mr25 { margin-right:25px; }
.ml28 { margin-left:28px; } .mr28 { margin-right:28px; }
.ml30 { margin-left:30px; } .mr30 { margin-right:30px; }
.ml35 { margin-left:35px; } .mr35 { margin-right:35px; }
.ml40 { margin-left:40px; } .mr40 { margin-right:40px; }
/*****Padding****************************************************************/
.p0 { padding:0px !important; }
.pb0 { padding-bottom:0px !important; } .pt0 { padding-top:0px !important; }
.pb1 { padding-bottom:1px; } .pt1 { padding-top:1px; }
.pb2 { padding-bottom:2px; } .pt2 { padding-top:2px; }
.pb3 { padding-bottom:3px; } .pt3 { padding-top:3px; }
.pb4 { padding-bottom:4px; } .pt4 { padding-top:4px; }
.pb5 { padding-bottom:5px; } .pt5 { padding-top:5px; }
.pb6 { padding-bottom:6px; } .pt6 { padding-top:6px; }
.pb7 { padding-bottom:7px; } .pt7 { padding-top:7px; }
.pb8 { padding-bottom:8px; } .pt8 { padding-top:8px; }
.pb9 { padding-bottom:9px; } .pt9 { padding-top:9px; }
.pb10 { padding-bottom:10px !important; } .pt10 { padding-top:10px !important; }
.pb15 { padding-bottom:15px !important; } .pt15 { padding-top:15px !important; }
.pb20 { padding-bottom:20px !important; } .pt20 { padding-top:20px !important; }
.pb25 { padding-bottom:25px; } .pt25 { padding-top:25px; }
.pb30 { padding-bottom:30px; } .pt30 { padding-top:30px; }
.pb35 { padding-bottom:35px; } .pt35 { padding-top:35px; }
.pb40 { padding-bottom:40px; } .pt40 { padding-top:40px; }
.pb50 { padding-bottom:50px; } .pt50 { padding-top:50px; }
.pb150 { padding-bottom:150px; } .pt150 { padding-top:150px; }

.pl0 { padding-left:0px; } .pr0 { padding-right:0px; }
.pl1 { padding-left:1px; } .pr1 { padding-right:1px; }
.pl2 { padding-left:2px; } .pr2 { padding-right:2px; }
.pl3 { padding-left:3px; } .pr3 { padding-right:3px; }
.pl4 { padding-left:4px; } .pr4 { padding-right:4px; }
.pl5 { padding-left:5px; } .pr5 { padding-right:5px; }
.pl6 { padding-left:6px; } .pr6 { padding-right:6px; }
.pl7 { padding-left:7px; } .pr7 { padding-right:7px; }
.pl8 { padding-left:8px; } .pr8 { padding-right:8px; }
.pl9 { padding-left:9px; } .pr9 { padding-right:9px; }
.pl10 { padding-left:10px; } .pr10 { padding-right:10px; }
.pl15 { padding-left:15px; } .pr15 { padding-right:15px; }
.pl20 { padding-left:20px; } .pr20 { padding-right:20px; }
.pl25 { padding-left:25px; } .pr25 { padding-right:25px; }
.pl30 { padding-left:30px; } .pr30 { padding-right:30px; }
.pl35 { padding-left:35px; } .pr35 { padding-right:35px !important; }
.pl40 { padding-left:40px; } .pr40 { padding-right:40px; }
.pl50 { padding-left:50px; } .pr50 { padding-right:50px; }
.pl60 { padding-left:60px; } .pr60 { padding-right:60px; }
.pl70 { padding-left:70px; } .pr70 { padding-right:70px; }

.p0 { padding:0px !important; } .p06 { padding:6px !important; }
.p01 { padding:1px !important; } .p07 { padding:7px !important; }
.p02 { padding:2px !important; } .p08 { padding:8px !important; }
.p03 { padding:3px !important; } .p09 { padding:9px !important; }
.p04 { padding:4px !important; } .p10 { padding:10px !important; }
.p05 { padding:5px !important; } .p11 { padding:11px !important; }
.p16 { padding:16px !important; }  .p19 { padding: 19px !important;}
/*****BorderClear***********************************************************************************************************************/
.b0 { border:0 !important; }
.bl0 { border-left:0 !important; }
.br0 { border-right:0 !important; }
.bt0 { border-top:0 !important; }
.bb0 { border-bottom:0 !important; }
.b1 { border:1px solid #CCCCCC !important; }
.bt1 { border-top:1px solid #CCCCCC !important; }
.bb1 { border-bottom:1px solid #CCCCCC !important; }

/* col 구분 */
.row .col { width:calc(50% - 10px); }
.row .col2 { width:100%; height:100%; margin-bottom: 2rem; }
.row .col3 { width:100%; height:100%; margin-bottom: 2rem; }
.row .col.p10 { width:calc(10% - 10px) !important; }
.row .col.p20 { width:calc(20% - 10px) !important; }
.row .col.p30 { width:calc(30% - 10px) !important; }
.row .col.p35 { width:calc(35% - 10px) !important; }
.row .col.p40 { width:calc(40% - 10px) !important; }
.row .col.p50 { width:calc(50% - 10px) !important; }
.row .col.p60 { width:calc(60% - 10px) !important; }
.row .col.p65 { width:calc(65% - 10px) !important; }
.row .col.p70 { width:calc(70% - 10px) !important; }
.row .col.p80 { width:calc(80% - 10px) !important; }
.row .col.p90 { width:calc(90% - 10px) !important; }

.round-card { padding:1.6rem; border:1px solid var(--bg-BlueGrey30-color); border-radius:0.6rem; }

/*daterangpicker*/
.daterangepicker { position: absolute; color: inherit; background-color: #fff; border: 1px solid var(--border-color-GreyDE); border-radius: 4px; width: 278px; max-width: none; padding: 0; margin-top: 7px; top: 100px; left: 20px; z-index: 13; display: none; font-family: arial; font-size: 15px; line-height: 1em; font-family:"SamsungOne",'SamsungOne','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif; border-radius: 1rem; box-shadow: 0px 0px 0px var(--bg-BlueGrey40-color); }
.daterangepicker:before, .daterangepicker:after { position: absolute; display: inline-block; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; }
.daterangepicker:before { top: -7px; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #ccc; }
.daterangepicker:after { top: -6px; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; }
.daterangepicker.opensleft:before { right: 9px; }
.daterangepicker.opensleft:after { right: 10px; }
.daterangepicker.openscenter:before { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }
.daterangepicker.openscenter:after { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }
.daterangepicker.opensright:before { left: 9px; }
.daterangepicker.opensright:after { left: 10px; }
.daterangepicker.drop-up { margin-top: -7px; }
.daterangepicker.drop-up:before { top: initial; bottom: -7px; border-bottom: initial; border-top: 7px solid #ccc; }
.daterangepicker.drop-up:after { top: initial; bottom: -6px; border-bottom: initial; border-top: 6px solid #fff; }
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar { float: none; }
.daterangepicker.single .drp-selected { display: none; }
.daterangepicker.show-calendar .drp-calendar { display: block; }
.daterangepicker.show-calendar .drp-buttons { display: block; }
.daterangepicker.auto-apply .drp-buttons { display: none; }
.daterangepicker .drp-calendar { display: none; max-width: 270px; }
.daterangepicker .drp-calendar.left { padding: 8px 0 8px 8px; }
.daterangepicker .drp-calendar.right { padding: 8px; }
.daterangepicker .drp-calendar.single .calendar-table { border: none; }
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { color: #fff; border: solid black; border-width: 0 2px 2px 0; border-radius: 0; display: inline-block; padding: 3px; }
.daterangepicker .calendar-table .next span { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.daterangepicker .calendar-table .prev span { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { white-space: nowrap; text-align: center; vertical-align: middle; min-width: 32px; width: 32px; height: 24px; line-height: 24px; font-size:var(--font-xxs); border-radius: 4px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; }
.daterangepicker .calendar-table td:last-child { color:var(--font-color-black); letter-spacing: -0.3px; }
.daterangepicker .calendar-table td { color:var(--font-color-black); }
.daterangepicker .calendar-table th { font-size: var(--font-tiny); }
.daterangepicker .calendar-table th:first-child, .daterangepicker .calendar-table td:first-child { color:var(--WarningRed-color) }
.daterangepicker .calendar-table { border: 1px solid #fff; border-radius: 4px; background-color: #fff; }
.daterangepicker .calendar-table table { width: 100%; margin: 0; border-spacing: 0; border-collapse: collapse; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: #eee; border-color: transparent; color: inherit; }
.daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: #ccc; }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background-color: #fff; border-color: transparent; color: #999; color:transparent!important }
.daterangepicker td.in-range { background-color: #ebf4f8; border-color: transparent; color: #000; border-radius: 0; }
.daterangepicker td.start-date { border-radius: 4px 0 0 4px; }
.daterangepicker td.end-date { border-radius: 0 4px 4px 0; }
.daterangepicker td.start-date.end-date { border-radius: 4px; }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color:var(--bg-KeyBlue-color); border-color: transparent; color: #fff !important; }
.daterangepicker th.month { width: auto; font-size:var(--font-xxs); color: var(--font-color-black); line-height: 4rem; }
.daterangepicker td.disabled, .daterangepicker option.disabled { cursor: not-allowed; text-decoration: line-through; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect { font-size: 12px; padding: 1px; height: auto; margin: 0; cursor: default; }
.daterangepicker select.monthselect { margin-right: 2%; width: 56%; }
.daterangepicker select.yearselect { width: 40%; }
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { width: 50px; margin: 0 auto; background: #eee; border: 1px solid #eee; padding: 2px; outline: 0; font-size: 12px; }
.daterangepicker .calendar-time { text-align: center; margin: 4px auto 0 auto; line-height: 30px; position: relative; }
.daterangepicker .calendar-time select.disabled { color: #ccc; cursor: not-allowed; }
.daterangepicker .drp-buttons { clear: both; text-align: right; padding: 8px; border-top: 1px solid #ddd; display: none; line-height: 12px; vertical-align: middle; }
.daterangepicker .drp-selected { display: inline-block; font-size: 14px; padding-right: 8px; }
.daterangepicker .drp-buttons .btn { margin-left: 8px; font-size: 12px; font-weight: bold; padding: 0 12px; line-height: 22px; min-height:22px; }
.daterangepicker .drp-buttons .btn.cancelBtn { border:1px solid var(--bg-KeyBlue-color); color:var(--bg-KeyBlue-color) }
.daterangepicker .drp-buttons .btn.applyBtn { border:1px solid var(--bg-KeyBlue-color); background:var(--bg-KeyBlue-color); color:var(--font-color-white) }
.daterangepicker.show-ranges.single.rtl .drp-calendar.left { border-right: 1px solid #ddd; }
.daterangepicker.show-ranges.single.ltr .drp-calendar.left { border-left: 1px solid #ddd; }
.daterangepicker.show-ranges.rtl .drp-calendar.right { border-right: 1px solid #ddd; }
.daterangepicker.show-ranges.ltr .drp-calendar.left { border-left: 1px solid #ddd; }
.daterangepicker .ranges { float: none; text-align: left; margin: 0; }
.daterangepicker.show-calendar .ranges { margin-top: 8px; }
.daterangepicker .ranges ul { list-style: none; margin: 0 auto; padding: 0; width: 100%; }
.daterangepicker .ranges li { font-size: 12px; padding: 8px 12px; cursor: pointer; }
.daterangepicker .ranges li:hover { background-color: #eee; }
.daterangepicker .ranges li.active { background-color: #08c; color: #fff; }
.daterangepicker .off.disabled {color:#ccc !important; text-decoration:none !important}

.daterangepicker td.today.off.active:hover {color:#eee !important; text-decoration:none !important;background-color:#eee}
.daterangepicker td.today.off.disabled.active { color:#ccc !important;background-color: #fff !important; }
.daterangepicker td.today.weekend.off.disabled {color:#ccc !important;background-color: #fff}
.daterangepicker td.weekend.ends.off.disabled {color: transparent !important; background-color: transparent !important;}
.daterangepicker td.ends.off.disabled {color: transparent !important; background-color: transparent !important;}

@media (min-width: 564px){
    .daterangepicker { width: auto; }
    .daterangepicker .ranges ul { width: 140px; }
    .daterangepicker.single .ranges ul { width: 100%; }
    .daterangepicker.single .drp-calendar.left { clear: none; }
    .daterangepicker.single .ranges,
    .daterangepicker.single .drp-calendar { float: left; }
    .daterangepicker { direction: ltr; text-align: left; }
    .daterangepicker .drp-calendar.left { clear: left; margin-right: 0; }
    .daterangepicker .drp-calendar.left .calendar-table { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .daterangepicker .drp-calendar.right { margin-left: 0; }
    .daterangepicker .drp-calendar.right .calendar-table { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .daterangepicker .drp-calendar.left .calendar-table { padding-right: 8px; }
    .daterangepicker .ranges, .daterangepicker .drp-calendar { float: left; }
}
@media (min-width: 730px){
    .daterangepicker .ranges { width: auto; }
    .daterangepicker .ranges { float: left; }
    .daterangepicker.rtl .ranges { float: right; }
    .daterangepicker .drp-calendar.left { clear: none !important; }
}

::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-thumb { background-color:var(--bg-GreyDF-color); border-radius:0.4rem; }
::-webkit-scrollbar-thumb:hover { background-color:var(--bg-skyBlueEB-color); cursor:pointer }

/*****Font****************************************************************************/
.normal { font-weight:var(--font-weight-regular); }
.bold { font-weight:var(--font-weight-bold); }
.underline { text-decoration:underline; }
.font-ls { letter-spacing:-1px; }
.font-lsnor { letter-spacing:0px; }
.font-cline { text-decoration:line-through }

/***** 정렬 ****************************************************************************/
.align-left { text-align: left !important; }
.align-right { text-align: right !important; }
.align-center { text-align: center !important; }
.align-base { align-items: baseline}
.between { display: flex; justify-content:space-between; flex-wrap: wrap; align-items: flex-end; }
.between-start { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-end; gap:1rem }
/*form*/
.error { margin-top: .4rem; font-size:1.3rem; color:var(--font-color-WarningRed); line-height: 2rem; font-weight: 700; }
.success { font-size:var(--font-tiny); color:var(--font-color-Lightgreen); line-height: 1.2; }
/*button*/
.btn { display:inline-flex; font-family:"SamsungOne";justify-content: center; align-items: center; min-height:2rem; min-width:4rem; padding:.9rem 1.6rem; line-height: 1; border-radius: .6rem; font-size:1.6rem; text-align: center; transition: .2s ease; }
.btn:disabled { background-color: var(--border-color-LightGreyEE) !important; color: #777777 !important; border-color:var(--border-color-LightGreyEE); cursor: default; pointer-events: none; }
.btn-area { display:flex; justify-content: end; gap:0.4rem }
.btn.primary { background: var(--bg-KeyBlue-color); color:var(--font-color-white) }
.btn.primary:hover { background:var(--bg-DeepBlue-color) }
.btn.secondary { border:1px solid var(--bg-KeyBlue-color); color:var(--bg-KeyBlue-color) }
.btn.secondary:hover { background: var(--bg-Lightgray-color); }
.btn.teriary { background:var(--bg-KeyBlue-color); color:var(--font-color-white); font-weight: var(--font-weight-bold); }
.btn.teriary:hover { background:var(--bg-DeepBlue-color); }
.btn.fourth { border:1px solid var(--border-color-DarkGrey99); color: var(--font-color-Grey33); }
.btn.fourth:hover { background:var(--bg-GreyF4-color); border:1px solid var(--font-color-grayFA); }
.btn.fifth { background: var(--bg-Grey5C-color); color: var(--font-color-white); }
.btn.fifth:hover { background: var(--bg-black-color) }
.grayoff { background: var(--bg-BlueGrey10-color); color: var(--font-color-Grey99); }

.tr-assigned,.tr-assigned:hover{ background: var(--bg-GreyEE-color) !important; color: var(--bg-GreyEE-color) !important; cursor:default !important;pointer-events: none;user-select: none; }


.btn.c-darkgray { background: #333333; color: var(--font-color-white); }
.btn.c-darkgray:hover { background: var(--bg-black-color); }
.btn.c-black { background: var(--bg-black-color); color: var(--font-color-white); }
.btn.c-black:hover { background: black }
.btn.c-bluegreen { background: var(--BlueGreen-color); color: var(--font-color-white); }
.btn.c-bluegreen:hover { background: #24a5be }
.btn.c-red { background: var(--WarningRed-color); color: var(--font-color-white); }
.btn.c-red:hover { background: #d34f6e; }
.btn.c-yellow { background: var(--Orange-color); color: var(--font-color-white); }
.btn.b-black { border: 1px solid var(--bg-black-color); }
.btn.b-black:hover { background: var(--bg-Lightgray-color); }
.btn.b-green { border: 1px solid #00A168; color: #00A168; }
.btn.b-green:hover { background: var(--bg-Lightgray-color); }
.btn.b-blue { border: 1px solid var(--bg-KeyBlue-color); color: var(--bg-KeyBlue-color); }
.btn.b-blue:hover { background: var(--bg-Lightgray-color); }
.btn.b-yellow { border: 1px solid var(--Orange-color); color: var(--Orange-color); }
.btn.b-yellow:hover { background: var(--bg-Lightgray-color); }

.btn.xs { height: 2rem; padding:0 1.2rem; font-size:var(--font-tiny); line-height:1.2; }
.btn.x-small { padding:0 1.2rem; height:2.6rem; font-size:1.3rem; line-height:1.2; letter-spacing:-0.042rem; }
.btn.small { padding:0 1.2rem; height:2.8rem; font-size:var(--font-tiny); line-height:1.2; letter-spacing:-0.042rem; }
.btn.medium { padding:0 1.2rem; height:2.8rem; font-size:var(--font-tiny); line-height:1.2; }
.btn.large { padding:0 1.2rem; height:3.2rem; font-size:var(--font-xxs); line-height:1.2; min-width:14rem }
.btn.full { width:100%; padding:1.4rem; height:3.8rem; font-size:var(--font-xs); line-height:1.2; align-content: center; }
.btn.medium-w100 { min-width: 10rem; padding:0 1.2rem; height:2.8rem; font-size:var(--font-tiny); line-height:1.2; }
.btn.medium-w85 { min-width: 8.5rem; padding:0 1.2rem; height:2.8rem; font-size:var(--font-tiny); line-height:1.2; }
.btn.certified { color:var(--font-color-KeyBlue); font-weight:var(--font-weight-bold); border:1px solid var(--border-color-KeyBlue) }
.btn.certified:hover { background:var(--bg-GreyFA-color); border:1px solid var(--border-color-KeyBlue); }
.btn.search { padding:0 1.2rem; height:2.8rem; font-size:var(--font-tiny); line-height:1.2 }
.btn.search span::before { width: 1.7rem; height: 1.7rem; margin-right:0.4rem }
.btn.precall { padding:0 1.2rem; min-height:2rem; line-height: 2rem; font-size: var(--font-tiny); }
.btn.active { background-color:var(--green-color); color: var(--font-color-white); border-radius:0.6rem; }
.btn.hold { background:var(--bg-GreyCC-color); color: var(--font-color-white); border-radius:1.4rem; }
.btn.round { border-radius: 1.4rem; }

.btn[class*='icon-'] { padding-left:8px; }
.btn[class*='icon-'] > span { display: flex; align-items:center; font-family:'SamsungOne'; }
.btn[class*='icon-'] > span::before { content:""; width: 2rem; height: 2rem; background-repeat: no-repeat; background-position:center 2px; }
.btn.icon-search span::before { background-image:url('../images/btn_icon_search.svg'); background-position: 1px 2px; }
.btn.icon-arrow {  min-width: 3rem; height:2.8rem; border:1px solid var(--border-color-GreyDE); }
.btn.icon-arrow span::before { background-image:url('../images/btn_arrow_down.svg'); background-position: -3px -1px; }
.btn.icon-arrow-down { padding:0; min-width: 2.8rem; height:3rem; border-radius: 0.4rem; border:1px solid var(--border-color-GreyDE); }
.btn.icon-arrow-down span::before { background-image:url('../images/btn_arrow_down.svg');  }
.btn.icon-check span::before { background-image:url('../images/btn_icon_check_circle.svg'); }
.btn.icon-download span::before { background-image:url('../images/btn_icon_download.svg'); }
.btn.icon-plus span::before { background-image:url('../images/btn_icon_add.svg'); }
.btn.icon-arrowDown span::before { background-image:url('../images/btn_arrow_down.svg'); }
.btn.icon-filter span::before { background:url('../images/btn_filter_gray.svg') no-repeat center/13px; }
.btn.icon-filter-open { display:none; position:absolute; top:2.2rem; left:0; padding:0 !important; min-width:24px !important; cursor:pointer; z-index:9; background:none }
.btn.icon-filter-open span::before { background:url('../images/btn_filter_gray.svg') no-repeat center/13px; transform:rotate(180deg);}
.btn.icon-refresh { padding:0; min-width: 2.8rem; height:2.8rem; border-radius: 0.4rem; border:1px solid var(--border-color-GreyDE); }
.btn.icon-refresh span::before { background-image: url('../images/btn_icon_refresh.svg'); background-position: center; }
.btn.icon-left { background-image: url('../images/arr_left.svg'); background-position: center;height:2.6rem; cursor:pointer}


.btn.icon-down-arrow { background-image: url('../images/arr_left.svg'); background-position: center; height:2.6rem; cursor:pointer; transform: rotate(270deg);}

.rotate90 { transform: rotate(90deg) !important;}
.rotate180 { transform: rotate(180deg) !important;}
.rotate270 { transform: rotate(270deg) !important;}

.aside-menu .btn.icon-filter { padding-left: 0; }
.main .btn.icon-filter { position: absolute; left:-5px; display: none; }

/*input */
.form-box { display: flex; }
.form-box ~ .form-box { margin-top:1rem; }
.form-box .form-box-title { width:16rem; flex-shrink: 0; font-size: var(--font-xxs); }
.form-box .form-box-cont { width: 100%; font-size: var(--font-xxs); }
.form-side { display: flex; justify-content: space-between; gap:0.8rem }
.form-col2 { display: flex; justify-content: space-between; gap:1rem; align-items: end;align-items: center; }

.inp-group { position: relative; flex:1; margin-bottom: 0rem;font-size: var(--font-tiny);}
.aside-menu .inp-group{margin-bottom: 0.8rem;}
.inp-group .input-flex { display:flex; align-items: center; }
.inp-group .input-flex .unit { white-space: nowrap; margin-left: 5px; }
.inp-group.button-s input[type="text"] { padding-right:8rem }
.inp-group.button-s button { position: absolute; right:0.1rem; bottom:0.1rem }
.inp-group .inp-group--label { display: block; height:2rem; font-size:var(--font-tiny); line-height:2rem; color:var(--font-color-DarkGrey50) }
.inp-group select,
.inp-group input[type="text"],
.inp-group input[type="number"],
input[type="password"] { height:3rem; border:1px solid var( --border-color-GreyDE); border-radius:0.6rem; color:var(--font-color-black); width: 100%; font-size: var(--font-tiny ) }
.inp-group textarea { height:5rem; }
.inp-group textarea::placeholder { font-size: 1.3rem; color: var(--font-color-77); }
.inp-group .select-box { position: relative; padding:0.2rem 3rem 0.2rem 1rem; box-sizing: border-box; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: var(--bg-white-color) url('../images/select_arrow_down.svg') no-repeat right 0.7rem top 50% / auto 1.3rem; }
.inp-group select:focus,
.inp-group input[type="text"]:focus,
.inp-group input[type="password"]:focus { outline:none; border:1px solid var(--border-color-KeyBlue) }
.inp-group input[type="text"],.inp-group input[type="number"] { padding:0.2rem 2.4rem 0.2rem 1.0rem }
.inp-search input[type="text"],.inp-search input[type="number"] { padding:0.2rem 5.2rem 0.2rem 1.0rem }
.inp-group .icon-password { position:absolute; top:53%; right:1.6rem; cursor:pointer; display:block; width:2rem; height:2rem; background:url('../images/form_password_eyes.svg')no-repeat center / 20px auto; }
.inp-group .icon-password.on { background:url('../images/form_password_eyes_hover.svg')no-repeat center / 20px auto; }
.inp-group .data-picker { position: relative; }
.inp-group .icon-tips { position:absolute; bottom:.2rem; right:1.4rem; cursor:pointer; display:block; background: transparent; }
.inp-group.lg .inp-group--label { position: relative; display:inline-block; margin-bottom:.4rem; color:var(--font-color-BlueGrey80); font-size:var(--font-xxs); }
.inp-group.lg .inp-group--label.req:after { position:absolute; right:-8px; top:0px; display: block; content:"*"; color:var(--font-color-WarningRed) }
.inp-group.lg input[type="text"],
.inp-group.lg .select-box,
.inp-group.lg input[type="password"] { padding:1rem 1.6rem; height:3.4rem; font-size:var(--font-xxs) }
.inp-group.lg input[type="password"] { padding-right:4.4rem }
.inp-group.lg .inp-search .inp-search--icon { position: absolute; right:1.2rem; bottom:12px; width: 1.7rem; height: 1.7rem; display: block; background:url('../images/btn_icon_search.svg')no-repeat center / 16px auto; }

.form-control-clear.remove { background-color: transparent; bottom: 7px !important;}
.form-control-clear { background-color: var(--bg-white-color); }

.button-group { width:auto; margin-bottom: 0.7rem; }

.btn-area .select-box { height:2.8rem; }


.inp-group .remove {z-index: 2; position: absolute;bottom: 15%;right: 5px; margin-bottom: 0 !important;}
.inp-group.calendar-box .remove {z-index: 2; position: absolute;bottom: 20%;right: 5px; margin-bottom: 0 !important;}
.inp-search .remove {z-index: 2; position: absolute;bottom: 15%;right: 30px;width: 16px; height: 16px; margin-bottom: 0 !important;}
.remove:before {content: ''; z-index: 3; display: block; width: 16px; height: 16px; background: url(../images/btn_close.png) no-repeat; filter: alpha(opacity=40); opacity: 0.4;cursor:pointer}
.calendar-box .drp-calendar-list { display: none; }

.check-box input[type="checkbox"] { display:inline-block; position:absolute; left: -99999px; }
.check-box input[type="checkbox"]:disabled + label { cursor: default; }
.check-box input[type="checkbox"]:disabled + label::before { background: url('../images/form_disabled.svg')no-repeat center /14px auto; cursor: default; }
.check-box input[type="checkbox"]:disabled:checked + label::before { background: url('../images/form_check_disabled.svg')no-repeat center /14px auto; cursor: default; }
.check-box label { position:relative; display:inline-block; padding-left:2.2rem; margin-right:5rem; cursor:pointer; line-height:2rem; font-size:var(--font-xxs); color:var(--font-color-black) }
.check-box label:last-of-type { margin:0; }
.check-box label:before { content:""; position:absolute; left:-3px; top:0; display:inline-block; width:20px; height:20px; background:url(../images/form_check_off.svg)no-repeat center /14px auto; }
.check-box input:checked + label:before { background:url(../images/form_check_on.svg)no-repeat center /14px auto; }

.check-box input[type="checkbox"] + .urgent-text { }
.check-box input:checked + .urgent-text { color: var(--font-color-WarningRed); font-weight:bold;font-weight: bold;  }

.custom-select .check-box label {font-size:var(--font-tiny)}

.radio-box {display: flex; justify-content: space-between;}
.radio-box label {width:calc(50% - 25px) !important; margin-right:0 !important}
.radio-box input[type="radio"] { display:inline-block; position:absolute; left: -99999px; }
.radio-box input[type="radio"]:disabled + label { cursor: default; }
.radio-box input[type="radio"]:disabled + label::before { background: url('../images/radio_disabled.svg')no-repeat center /14px auto; cursor: default; }
.radio-box input[type="radio"]:disabled:checked + label::before { background: url('../images/radio_check_disabled.svg')no-repeat center /14px auto; cursor: default; }
.radio-box label { position:relative; display:inline-block; padding-left:2.2rem; margin-right:5rem; cursor:pointer; line-height:2rem; font-size:var(--font-xxs); color:var(--font-color-black) }
.radio-box label:last-of-type { margin:0; }
.radio-box label:before { content:""; position:absolute; left:-3px; top:0; display:inline-block; width:20px; height:20px; background:url(../images/radio_check_off.svg)no-repeat center /14px auto; }
.radio-box input:checked + label:before { background:url(../images/radio_check_on.svg)no-repeat center /14px auto; }
.radio-box div label{width:100% !important; margin-right:0 !important}

.check-box-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }

.check-box-only { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.check-box-only input[type="checkbox"] { display:inline-block; position:absolute; left: -99999px; }
.check-box-only label { display:inline-block; width:20px; height:20px; background:url('../images/form_check_off.svg') no-repeat center /16px auto; }
.check-box-only input[type="checkbox"]:checked + label { background:url('../images/form_check_on.svg') no-repeat center /16px auto;}
.check-box-only input[type="checkbox"]:disabled + label { background: url('../images/form_disabled.svg') no-repeat center /16px auto; cursor: default; }
.check-box-only input[type="checkbox"]:disabled:checked + label { background: url('../images/form_check_disabled.svg')no-repeat center /14px auto; cursor: default; }

/*calendar*/
.inp-group .data-picker .data-picker--icon { position: absolute; left:1.2rem; top:50%; width: 1.6rem; height: 1.6rem; transform: translateY(-50%); display: block; background:url('../images/icon_calendar.svg')no-repeat center / 14px auto; cursor:pointer }
.inp-group .data-picker .calendar { padding:0.4rem 1.2rem 0.4rem 3.6rem; color:var(--bg-Darkblack-color) !important; cursor:pointer }
.inp-group .data-picker .calendar-month { padding:0.4rem 1.2rem 0.4rem 3.6rem; color:var(--bg-Darkblack-color) !important; cursor:pointer }
.inp-group .data-picker .datepicker { padding:0.4rem 1.2rem 0.4rem 3.6rem; color:var(--bg-Darkblack-color) !important; cursor:pointer }
.inp-group .data-picker .calendar-pop { padding:0.4rem 1.2rem 0.4rem 3.6rem; color:var(--bg-Darkblack-color) !important; cursor:pointer }
.inp-group .data-picker .calendar-order { padding:0.4rem 1.2rem 0.4rem 3.6rem; color:var(--bg-Darkblack-color) !important; cursor:pointer }
.inp-group .data-picker .capa-date { padding:0.4rem 1.2rem 0.4rem 3.6rem; color:var(--bg-Darkblack-color) !important; cursor:pointer }
.inp-group .data-picker .calendar-multi  { padding:0.4rem 1.2rem 0.4rem 3.6rem; color:var(--bg-Darkblack-color) !important; cursor:pointer ;background-color:var(--bg-white-color) !important}

/*search*/
.inp-group .inp-search { position: relative; }
/* .inp-group .inp-search input[type="text"] { padding-right:3rem; } */
.inp-group .inp-search .inp-search--icon { position: absolute; right:1.2rem; bottom:7px; width: 1.6rem; height: 1.6rem; display: block; background:url('../images/btn_icon_search.svg')no-repeat center / 14px auto; cursor:pointer }

/* radio button */
.radio-group { display: flex; padding:0.2rem; border: 1px solid var(--border-color-GreyDE); border-radius:0.6rem; height:3rem; box-sizing: border-box; background-color:var(--bg-white-color)}
.radio-group input[type="radio"] { display:none; }
.radio-group label { flex:1; height:100%; cursor: pointer; color: var(--font-color-black); border-radius:0.2rem; text-align: center; line-height:2.3rem; font-size:var(--font-tiny); }
.radio-group label:hover { background: var(--bg-Lightgray-color); }
.radio-group input[type="radio"]:checked + label { background-color:var(--KeyBlue-color); color: var(--bg-white-color); border-radius: 0.5rem; }

/* message Templete 화면 위쪽 버튼 */
.radio-group label:hover, [id$=-off] { background: var(--bg-Lightgray-color); }
.radio-group input[type="radio"][id$="-off"]:checked + label  {  border-color: var(--border-color-GreyF4); background-color: var(--bg-GreyDF-color); color:var(--font-color-black); border-radius: 0.5rem; }

@media screen and (max-width:1600px){
 .btn.medium { font-size:var(--font-tiny); }
 .btn.large { font-size:var(--font-xxs) }
}

/* alert */
.alert { display:none; z-index:13; position:fixed; left: 0; top: 0;width:100%; height:100%; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index:14; }
.alert .wraper { z-index:14; background-color:var(--bg-white-color); position:fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width:30rem; min-height:15rem; border-radius:2rem; text-align:center; padding:5rem 3rem 3rem 3rem }
.alert .document { font-size:var(--font-sm); text-align:center; margin-bottom:4rem; padding: 4px 0; }
.alert button { margin:0 auto; padding: 0 1.2rem; height: 3.2rem; font-size: var(--font-xxs); background: var(--bg-KeyBlue-color); color: var(--font-color-white); line-height: 1.2; min-width: 11.5rem; min-height: 2rem; border-radius:0.6rem }
.alert .dim { position: fixed; display:none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index:14; }

/* confirm */
.confirms { display:none; z-index:13;  position:fixed; left: 0; top: 0;width:100%; height:100%; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index:14; }
.confirms .wraper { z-index:14; background-color:var(--bg-white-color); position:fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width:30rem; min-height:15rem; border-radius:2rem; text-align:center; padding:5rem 3rem 3rem 3rem }
.confirms .document { font-size:var(--font-sm); text-align:center; margin-bottom:4rem; position:relative }
.confirms .button { display: flex; justify-content: center }
.confirms .yes { margin:0 auto; padding: 0 1.2rem; height: 3.2rem; font-size: var(--font-xxs); background: var(--bg-KeyBlue-color); color: var(--font-color-white); line-height: 1.2; min-width: 11.5rem; min-height: 2rem; border-radius:0.6rem }
.confirms .no { margin:0 auto; padding: 0 1.2rem; height: 3.2rem; font-size: var(--font-xxs); border: 1px solid var(--bg-KeyBlue-color); color: var(--bg-KeyBlue-color); line-height: 1.2; min-width: 11.5rem; min-height: 2rem; border-radius:0.6rem }

/*modal popup*/
.modal-bg { position:fixed; top: 0; left: 0; z-index:11; width: 100vw; height: 100vh; background-color: #000; opacity:0.5; }
.modal { position: fixed; top: 0; left: 0; z-index:12; visibility: hidden; width: 100%; height: 100%; overflow: hidden; outline: 0; opacity: 0; }
.modal.visible { opacity: 1; }
.modal-xl { width:120rem; }
.modal-lg { width:100rem; }
.modal-md { width:80rem; }
.modal-ml { width:50rem; }
.modal-sm { width:33rem; }
.modal .notice-title { font-size:var(--font-sm); font-weight:var(--font-weight-bold); height:4.4rem; line-height: 1.2; align-content:center; }
.modal-dialog { margin:0 auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.modal-content { position: relative; max-height: 88dvh; overflow: auto; padding:2rem 2rem 3rem; border-radius:1.2rem; border:none; word-break: break-all; background:var(--bg-white-color); }
.modal-content .modal-header { position: relative; padding:0 3rem 1rem 0; text-align: left; }
.modal-content .modal-body { margin:0 -2rem; padding:0 2rem; overflow: auto; font-size:1.6rem; line-height: 1.6; }
.modal-content .modal-footer { display: flex; justify-content: center; margin:0; border:none }
.modal-content .modal-footer.right { justify-content: right; }
.modal-content .b-close.popup,
.modal-content .b-close.sec-popup { display:block; position: absolute; top:1.2rem; right:1.2rem; width:2.4rem; height:2.4rem; margin-top:0.25rem; background:url('../images/icon_close_black.svg') no-repeat center center; background-size: inherit; cursor: pointer; }
.modal-content .modal-header .b-close { top:1rem; right:0; margin-top: 0; }

.modal-sm .modal-content .modal-body { font-size:1.8rem; line-height: 1.6; min-height: 33.6rem; }
.modal-content .modal-Box { font-size:var(--font-tiny) }
.modal-footer .btn-area { margin-top: 2rem; }
.modal-list ul { padding:0rem 0 2rem 0; }
.modal-list ul.border-b { border-bottom:1px solid var(--border-color-Grey); }
.modal-list ul li { display:flex; justify-content: start; align-items: center; padding:0.4rem 0 }
.modal-list.column ul li { flex-direction: column; align-items: flex-start; margin-bottom:2.3rem; }
.modal-list.column ul li:last-child { margin-bottom:0 }
.modal-list.column .inp-group {margin-bottom:0.8rem}

.modal-search ul { padding:0rem 0 2rem 0; }
.modal-search ul.border-b { border-bottom:1px solid var(--border-color-Grey); }
.modal-search ul li { display:flex; justify-content: start; align-items: center; padding:0.4rem 0 }
.modal-search.column ul li { flex-direction: column; align-items: flex-start; margin-bottom:2.3rem; }

.modal-list ul li .modal-list--title,
.modal-list ul li .modal-list--cont { line-height:2rem; font-size:var(--font-tiny); width:100% }
.modal-list ul li .modal-list--title { width:140px; flex-shrink:0; }
.precheck-ls { padding:1.6rem 1.3rem; }
.precheck-ls .precheck-title { display: flex; justify-content: space-between; font-size: 1.3rem; color:var(--font-color-black); line-height: 2.2rem; margin-bottom: 0.8rem; font-weight: 700; }
.precheck-ls ol.ol-basic { gap:2rem; }
.precheck-ls label:before { background-size: 2rem !important; }
.precheck-ls .check-box label { color:var(--font-color-black); font-weight: 700; padding-left: 3rem; }
input[type="text"].input-small { width: 100%; height: 3rem; padding:0 1.5rem; border: 1px solid #C6CBDF; background: var(--bg-BlueGrey10-color); font-size: 1.2rem; letter-spacing: -0.42px; font-weight: 700; border-radius: 1.6rem; }

/* .daterangepicker.pop {top:50%;left:50%; transform: translate(-50%, -50%);} */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; width:0; height:0; overflow:hidden; position:absolute; top:-999px; left:-999px }

/* skip */
.skip-nav { background-color:var(--bg-black-color); text-align:center; }
.skip-nav a { display:block; height:2rem; color:var( --white-color) }
.skip-nav a:not(:focus) { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow: hidden; border:none }
.skip-nav a:visited { color:var(--font-color-white) }
.skip-nav a:focus { display: flex; align-items: center; justify-content: center; margin:0 auto; padding:.5rem 0; color:var(--font-color-white); outline-offset: -0.4rem; font-size:1.7rem; }

.bg-red { background:var(--WarningRed-color); }
.bg-blue { background:var(--bg-KeyBlue-color); }
.bg-black { background:#333333; }
.bg-yellow { background:var(--Orange-color); }
.bg-grayCC { background:#CCCCCC; }
.bg-lightgray { background:var(--border-color-LightGreyEE); }
.bg-gray { background:var(--bg-Lightgray-color); }
.bg-blueSky { background: var(--bg-skyBlueEB-color); }
.bg-blueSky4 { background: var(--bg-BlueGrey40-color); }
.bg-blueSky3 { background: var(--bg-BlueGrey30-color); }
.bg-blueSky2 { background: var(--bg-BlueGrey20-color); }
.bg-bluegreen { background: var(--BlueGreen-color); }


/*breadcrumb*/
.content-wrap .breadcrumb { position: absolute; top:2px; right:25px; z-index: 1; }
.main .breadcrumb { justify-content: end; }
.main .between .btn-area { display:flex; justify-content: end; gap:0.4rem; margin-top:2px }
.main-title { margin-top: 0.2rem; }
.main-title .icon-tips { cursor:pointer; background: transparent; }

.recent-menu .inp-group { margin-bottom: 0; }
.recent-menu .breadcrumb ol { overflow:hidden; }
.recent-menu .breadcrumb ol li:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb ol { display:flex; }
.breadcrumb { display:flex; justify-content:start; }
.breadcrumb ol li { position:relative; font-size:var(--font-tiny); line-height: 2rem; height: 2rem; padding-left:1.3rem; color:var( --font-color-grayFA) }
.breadcrumb ol li:first-child { padding-left:0; flex-shrink: 0; }
.breadcrumb ol li:first-child::after { display: none; }
.breadcrumb ol li:after { content:""; display: block; position: absolute; left:3px; top:0; width: 1rem; height: 2rem; background:url('../images/icon_breadCrumb.svg')no-repeat center /5px 7px }

/* tab 메뉴*/
.tab { margin-top:0 }
.tab .tab-list { margin-top: 1.2rem; }
.tab .tab-list ul { display: flex; justify-content:start; }
.tab .tab-list ul li .tab-list--item { position: relative; display: block; padding:0 2.5rem; color:var(--font-color-BlueGrey80); font-size:var(--font-xxs); height: 3.2rem; line-height: 3.2rem; box-sizing: border-box; transition: color .2s ease; }
.tab .tab-list ul li:first-child .tab-list--item { padding-left: 0; }
.tab .tab-list ul li.active .tab-list--item { font-weight: 700; }
.tab .tab-list ul li.active .tab-list--item,
.tab .tab-list ul li .tab-list--item:hover { color:var(--font-color-BrandBlue); }
.tab .tab-list ul li .tab-list--item::before { position: absolute; left:50%; bottom:0; display: block; transform:translateX(-50%) scale(0,1); content:""; border-bottom: 2px solid var(--border-color-BrandBlue); width:calc(100% - 5rem); transition: transform .2s ease; }
.tab .tab-list ul li.active .tab-list--item::before,
.tab .tab-list ul li .tab-list--item:hover::before { border-bottom: 2px solid var(--border-color-BrandBlue); transform:translateX(-50%); }
.tab .tab-list ul li:first-child.active .tab-list--item::before,
.tab .tab-list ul li:first-child .tab-list--item:hover::before { width:calc(100% - 2.5rem); left: 0; transform: none; }

.subtab { margin-top:1.2rem; }
.subtab .subtab-list ul { display:grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap:0.6rem; }
.subtab .subtab-list li { position: relative; overflow:hidden; position:relative; border-radius: 1rem; box-sizing: border-box }
.subtab .subtab-list li .subtab-list-item { display: block; padding:1.0rem 1.4rem 0.6rem; background: var(--bg-white-color); border:1px solid var(--border-color-Grey); border-radius: 1rem; }
.subtab .subtab-list li.pre-call { padding-bottom: 2.4rem; }
.subtab .subtab-list .total-link { position: absolute; left:0; bottom:5px; display:block; width: 100%; height:2.6rem; padding:0.8rem 0.5rem 0 0.5rem; color:var(--WarmRed-color); font-size: 1.3rem; text-align: center; border: 1px solid var(--border-color-Grey); border-top:0; border-radius:0 0 1rem 1rem; cursor:pointer }
.subtab .subtab-list li .subtab-list-item.active,
.subtab-list-item:hover { border:1px solid var(--border-color-KeyBlue); border-radius: 1rem; }

.subtab .subtab-list li .subtab-list-item.closed { background-color: var(--bg-GreyF1-color);}
.subtab .subtab-list li .subtab-list-item .subtab-list-title { position: relative; display:flex; line-height: 1.2; align-items:center; padding-right:1.4rem; height:2.6rem; color:var(--font-color-BlueGrey80); font-size: var(--font-tiny); }
.subtab .subtab-list li .subtab-list-item .subtab-list--num { display: block; height:4.8rem; align-content:center; font-size:var(--font-sm); color:var(--font-color-black);font-weight:var(--font-weight-bold); box-sizing: border-box; text-indent: -1px; }
.subtab .subtab-list li .subtab-list-item .subtab-list--num .percent { display: block; text-indent: 0; margin-top: 0.3rem; font-weight:var(--font-weight-regular); font-size: var(--font-tiny); line-height: 1.3; color:var(--font-color-BlueGrey80); }
.subtab .subtab-list li .subtab-list-item.delay span { color:var(--font-color-WarningRed) }
.subtab .subtab-list li .subtab-list-item.total > div { color:var( --font-color-BrandBlue) }

.subtab .subtab-list li .subtab-list-item .subtab-list-chart { position: absolute; top: 20px; right: 10px; }
.subtab .subtab-list li .subtab-list-item .subtab-list-chart ul { width: 1rem; border-radius: 0 !important; gap: 0 !important; }
/* border: 1px solid var(--border-color-Grey); border-radius: 15px; */
.subtab .subtab-list li .subtab-list-item .subtab-list-chart li:nth-child(1) { height: 2rem; border-radius: 15px 15px 0 0;  border: 1px solid var(--border-color-Grey); width: 1rem;  border-bottom: 0 !important;}
.subtab .subtab-list li .subtab-list-item .subtab-list-chart li:nth-child(2) { height: 1.5rem;  border-radius: 0 !important; border-left: 1px solid var(--border-color-Grey);  border-right: 1px solid var(--border-color-Grey); border-bottom: 0!important; width: 1rem;  }
.subtab .subtab-list li .subtab-list-item .subtab-list-chart li:nth-child(3) { height: 2rem; border-radius: 0 0 15px 15px ;  border: 1px solid var(--border-color-Grey); width: 1rem; border-top: 0 !important; }

.subtab .subtab-list li .subtab-list-item .subtab-list-chart li:nth-child(1).active { background-color: var(--DeepBlue-color); }
.subtab .subtab-list li .subtab-list-item .subtab-list-chart li:nth-child(2).active { background-color: var(--bg-Grey5C-color); }
.subtab .subtab-list li .subtab-list-item .subtab-list-chart li:nth-child(3).active { background-color: #F8B155; }

/*
.subtab .subtab-list li .subtab-list-item .subtab-list-title::after { content:""; position: absolute; right:-5px; top:50%; transform:translateY(-50%); display: block; width:2rem; height: 2rem; background-size: 2rem auto; background-repeat: no-repeat; background-position: center center; }
.subtab .subtab-list li .subtab-list-item.time .subtab-list-title:after { background-image: url('../images/icon_time.svg'); }
*/
/* .subtab .subtab-list li .subtab-list-item.union .subtab-list-title:after { background-image: url('../images/icon_Union.svg'); background-size:1.6rem; } */
/*
.subtab .subtab-list li .subtab-list-item.pot .subtab-list-title:after { background-image: url('../images/icon_Pot.svg'); }
.subtab .subtab-list li .subtab-list-item.box-check .subtab-list-title:after { background-image: url('../images/icon_box_check.svg'); background-size: 1.7rem; }
.subtab .subtab-list li .subtab-list-item.delivery .subtab-list-title:after { background-image: url('../images/icon_delivery.svg'); }
.subtab .subtab-list li .subtab-list-item.pl .subtab-list-title:after { background-image: url('../images/icon_3pl.svg'); }
.subtab .subtab-list li .subtab-list-item.instComplete .subtab-list-title:after { background-image: url('../images/icon_inst_complete.svg'); background-size: 1.6rem; }
.subtab .subtab-list li .subtab-list-item.confirm .subtab-list-title:after { background-image: url('../images/icon_confirm.svg'); }
*/


.pending-card .subtab-list-item { height: 100%; padding:1.6rem 2.2rem 1.8rem !important; }
.pending-card .subtab-list-title { font-size: 1.4rem !important; }


/* SCR-WEB-06-001 */
.pending-chart-box { display: flex; flex-direction: column; gap:.6rem; margin-top:0; font-size: 1.4rem; line-height: 1.6rem; color:#757F93 !important; }
.pending-chart-div { height: .8rem; }
.pending-chart-div table { width: 100%; }
.pending-chart-div td { padding: .4rem; border-radius: 1.6rem; }
.pending-chart-div td.c-red { background: #D84F6E; }
.pending-chart-div td.c-blue { background: #49ABFA; }

/*컨텐츠 영역 */
.container { min-width:1280px; margin:0 auto; width:100% }
.inner { padding: 0 2rem; }


/*상단헤더 메뉴*/
.header { z-index: 10; position: sticky; top:0; padding:0 2.4rem; background:var(--bg-black-color); height:5.2rem; }
.header .logo {padding-bottom: 0.8rem;}
.header .logo a { display: flex; width: 29.6rem; vertical-align:middle; gap:1.5rem }
.header .logo-txt { font-size: 1.2rem; line-height: 1.5rem; color: #999; letter-spacing: 0.05rem; margin-top:1.0rem; }
.header .header-inner { display:flex; justify-content:start; align-items: center; height: 100%; }
.header .gnb { height:100%; }
.header .gnb > ul { display:flex; justify-content:start; flex-wrap:wrap; height:100%; column-gap:0.8rem; margin-bottom:1.6rem }
.header .gnb > ul > li > a { display:flex; align-items:center; padding:0.7rem 1.6rem; height:100%; font-size:var(--font-xxs); color:var(--font-color-white); box-sizing: border-box; line-height:1.2; font-weight:var(--font-weight-regular); letter-spacing:0rem; cursor:pointer}
.header .right-area { position: relative; display: flex; align-items:center; height:5.2rem; margin-left:auto; }
.header .gnb > ul > li .gnb-sub a:hover { text-decoration:underline; color:var(--font-color-BrandBlue) }
.header .gnb > ul > li > a + .gnb-sub { display:none; padding: 1.0rem 2.0rem; border: 1px solid var(--border-color-Grey); }
.header .gnb > ul > li > a:hover + .gnb-sub { opacity:1; }
.header .gnb .gnb-item { position: relative; }
.header .gnb .gnb-sub > a > strong { margin-bottom: 1.6rem; }
.header .gnb .gnb-item.is-open .gnb-sub { display:block; }
.header .gnb li .gnb-sub { position: absolute; left:-0.6rem; top:100%; width:21rem; height:fit-content; background: var(--bg-white-color); z-index: 9; box-shadow: 1px 2px 7px var(--bg-BlueGrey40-color); border-radius: 1rem; }
.header .gnb li .gnb-sub ul { margin-bottom:1.6rem }
.header .gnb li .gnb-sub strong { display: block; padding:1rem 0; font-weight:var(--font-weight-bold); font-size:var(--font-xxs); }
.header .gnb li .gnb-sub .gnb-sub--item a { display:block; padding:0.6rem 0; font-size: 1.3rem; color:var(--font-color-black); letter-spacing:-0.01rem; }
.header .right-area .util { position: relative; display: flex; height: 2.4rem; align-items: center; justify-content: space-between; margin-right:2.4rem; }
.header .right-area .user-menu { display: none; position: absolute; z-index: 8; top:3.5rem; right:0.7rem; margin-top: 8px; width:15.2rem; border: 1px solid var(--border-color-Grey); border-radius:0.6rem; background-color: #fff; color: #070707; line-height: 28px; text-indent: 0; white-space: nowrap; padding:1rem 0 }
.header .right-area .user-menu .user-menu-list { display: block; padding-left:4.5rem; height: 3rem; line-height: 3rem; color:var(--font-color-Grey33); font-size: var(--font-tiny); background-repeat: no-repeat; background-position: 2rem center; }
.header .right-area .user-menu .user-menu-list:hover { text-decoration:underline; color:var(--font-color-BrandBlue) }
.header .right-area .user-menu .user-menu-list.icon-user { background-image: url('../images/icon_user.svg'); }
.header .right-area .user-menu .user-menu-list.icon-document { background-image: url('../images/privacyPolicy.svg'); background-size:8% }
.header .right-area .user-menu .user-menu-list.icon-logout { background-image: url('../images/icon_user_logout.svg'); }
.header .right-area .util span + span { margin-left: 0.3rem; }
.header .right-area .util .util-icon { width:2.4rem; height:2.4rem; background: url('../images/icon_user_gray.svg')no-repeat center center; }
.header .right-area .util .util-name { position: relative; padding-right:2.0rem; font-size:var(--font-xxs); line-height: 100%; color: var(--font-color-white); }
.header .right-area .util .util-name::after { content: ""; display: block; position: absolute; right:-3px; top:0; height: 1.6rem; width: 1.6rem; background: url('../images/icon_down_white.svg')no-repeat center; background-size:80% }
.header .right-area .allmenu-btn a { display: block; width:16px; height:14px; background: url(../images/icon_allMenu.svg) no-repeat center; text-indent: -9999px; }
.header .right-area .allmenu-btn a.close { background:url(../images/icon_close.svg) no-repeat center; z-index: 9; }
.header .dev-mark { font-size: 28px; color: yellowgreen;padding-top: 10px; font-weight: 700;}

/* 왼쪽 aside메뉴 */
.content-wrap .aside-menu { position: fixed; left: 0; top:5.2rem; padding:2.2rem 2rem 0.1rem 2rem; min-width:310px; max-width:310px; background-color: var(--bg-white-color); height: calc(100dvh - 5.2rem); z-index: 5; box-sizing: border-box; border-right: solid 1px #ddddeb; transition: .3s; }
.content-wrap .aside-menu.menu-hide { transform: translateX(-100%); }
.content-wrap .aside-menu .aside-scroll { overflow-y: auto; height:calc(100% - 3rem); margin:0 -2rem; padding:0 2rem }
.content-wrap .aside-menu .between { margin-bottom:0.4rem; }
.content-wrap .aside-menu .aside-menu--title { display: flex; justify-content:start; align-items: center; font-size: var(--font-xs); }
.content-wrap .aside-menu .aside-menu--title button { min-width:0 !important ;padding-right:0}
.content-wrap .aside-menu .snb-list { width: 100%; }
.content-wrap .aside-menu .snb-list .snb-list--item { margin-bottom:0.4rem; }
.content-wrap .aside-menu .snb-list .snb-list--item > a { position: relative; display:block; padding-right:2rem; line-height:3.6rem; font-size:1.6rem; font-weight:var(--font-weight-bold); color:var(--font-color-black) }
.content-wrap .aside-menu .snb-list .snb-list--item > a::after { position: absolute; right:0; top:6px; display:block; content: ""; width:2rem; height: 2rem; background: url('../images/arrow_small_close.svg') no-repeat center; transform: rotate(180deg); }
.content-wrap .aside-menu .snb-list .snb-list--item.open > a::after { transform: rotate(0deg); }
.content-wrap .aside-menu input { cursor:pointer }
.content-wrap .aside-menu .snb-list .snb-list--item .snb-menu--list { display: none; }
.content-wrap .aside-menu .snb-list .snb-list--item.open .snb-menu--list { display: block; margin-bottom:1.4rem }

.container.login { min-width:840px !important }

.content { margin-top:0rem }

/*main- detail*/
.content-wrap { display: flex; min-height:calc(100dvh - 5.2rem); position:relative; }
.content-wrap .main { position: relative; padding:2rem 2.6rem 0rem 2.6rem; width:100%; background:var(--bg-Lightgray-color); transition: .3s; }
.content-wrap:has(.aside-menu) .main { padding-left: 33.6rem; }
.content-wrap:has(.aside-menu.menu-hide) .main { padding-left: 2.6rem; }
.content-wrap .main > div:nth-child(1) { display: flex; flex-direction: column; height: calc(100% - 2.8rem); }
.main-scroll { overflow-y:auto; }
.main-layout { position:relative; flex:1; padding:2rem 2rem 0rem 2rem; margin-top:1rem; border:1px solid var(--border-color-Grey); background:var(--bg-white-color); border-radius:1rem; }
.main-layout.layout.layout-50,.main-layout.layout-1n2-17 { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.main-layout.layout.layout-50 .col { width: calc(50% - 0.5rem); min-width: 0; overflow-wrap: break-word; word-break: break-word; white-space: normal; }
.main-layout.layout-1n2-17 .col:first-child { flex:1 1 0; }
.main-layout.layout-1n2-17 .col:last-child { flex:2.17 1 0 }

.confidential { display: flex; align-items: center; width: 100%; height: 2.8rem; font-size: 1.3rem; color:var(--font-color-WarningRed) }

.content-wrap .mypage > div { width:100rem; margin: 0 auto; }

/* detail */
.detail { width:100%; }
.detail .row { display:flex; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative; }
.detail .row .col { display: flex; flex-direction: column; margin-bottom: 2rem; }
.detail .row .col .card { flex:1; margin-top: 0.4rem; padding:1.6rem; border:1px solid var(--bg-BlueGrey30-color); border-radius:0.6rem; }
.detail .row .col .card .detail-content { display:flex; gap:.8rem 0; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative; font-size:var(--font-tiny); line-height: 2rem; }
.detail .row .col .card .detail-content .tr { width:calc(75% - 0.2rem); display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative; }
.detail .row .col .card .detail-content .tr { width:calc(50% - .2rem); display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative; }
.detail .row .col .card .detail-content .tr .head { width:46%; }
.detail .row .col .card .detail-content .tr .td { flex:1; text-align:left; display: inline-block; }
.detail .row .col .card .detail-content .tr.row { width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative; }
.detail .row .col .card .detail-content .tr.row .head { width: calc((50% - 0.2rem) * 0.46); }
.detail .row .col .card .detail-content .tr.row .td { flex:1; text-align:left; display: inline-block; word-break: break-all;}
.detail .row .col .card .detail-content .tr.quest { width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative; }
.detail .row .col .card .detail-content .tr.quest .head { width:70%; }
.detail .row .col .card .detail-content .tr.quest .td { width:calc(100% - 70%); text-align:right; display: inline-block; }
.detail .row .col .card .detail-content .tr em { padding-right:2rem; color:var(--font-color-black) !important }
.detail .row .col2 { width:100%; height:100%; margin-bottom: 2rem; }
.detail .row .col2 .card .set { padding:1.6rem 0; border-bottom:1px solid var(--border-color-Grey); width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative }
.detail .row .col2 .card.no-border { border: 0px !important; border-bottom: 1px solid var(--border-color-Grey);}
.detail .row .col2 .card .set:first-child { padding-top:0; }
.detail .row .col2 .card .set:last-child { border-bottom:0; padding-bottom:0; }
.detail .row .col2 .card .set .detail-content .tr { margin-top: 5px !important; margin-bottom: 5px !important; }
.detail .row .col2 .card { display:flex; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative; margin-top: 0.4rem; padding:1.6rem; border:1px solid var(--bg-BlueGrey30-color); border-radius:0.6rem; }
.detail .row .col2 .card .detail-content { width: 50%; display:flex; gap:.8rem 0; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative; font-size:var(--font-tiny); line-height: 2rem; align-content: flex-start; }
.detail .row .col2 .card .detail-content.col3 { width: 75%; display:flex; gap:.8rem 0; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative; font-size:var(--font-tiny); line-height: 2rem; align-content: flex-start; }
.detail .row .col2 .card .detail-content.col4 { width: 100%; display:flex; gap:.8rem 0; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative; font-size:var(--font-tiny); line-height: 2rem; align-content: flex-start; }
.detail .row .col2 .card .detail-content .tr { width:calc(50% - 0.2rem); display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative;; align-items: center; }
.detail .row .col2 .card .detail-content .tr .head { width:46%; }
.detail .row .col2 .card .detail-content .tr .td { width:calc(100% - 46%); text-align: left; display: inline-block; }
.detail .row .col2 .card .detail-content .tr.row { width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative}
.detail .row .col2 .card .detail-content .tr.row .head { width: calc((50% - 0.2rem) * 0.46); }
.detail .row .col2 .card .detail-content.col3 .tr.row .head { width: calc((33.3% - 0.2rem) * 0.46); }
.detail .row .col2 .card .detail-content.col4 .tr.row .head { width: calc((24.9% - 0.2rem) * 0.46); }
.detail .row .col2 .card .detail-content .tr.row .td { flex:1; text-align:left; display: inline-block; font-size:1.4rem}
.detail .row .col2 .card .detail-content .tr em { padding-right:1rem; color:var(--font-color-black) !important }
.detail .row .col .card.map { position: relative; }
.detail .row .img-box .img-box-item { margin-right:0.6rem }
.detail .row .col2 .card .detail-content.full { width:100% !important }
.detail .row .ls-icon { display: inline-block; width: 20px; height: 20px; vertical-align: bottom; }
.detail .row .ls-icon.attach { background: url('../images/icon_attach.svg') no-repeat center; }
.detail .row .ls-icon.incomplete { background: url('../images/icon_incomplete.svg') no-repeat center;}
.detail .row .ls-icon.complete { background:url('../images/icon_confirm_on.svg') no-repeat center;; }
.detail .row .ls-icon.complete-green { background: url('../images/icon_complete_green.svg') no-repeat center; }

.detail .row .col3 { width:100%; height:100%; margin-bottom: 2rem; }
.detail .row .col3 { display:flex; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative; margin-top: 0.4rem; padding:1.6rem; border:1px solid var(--bg-BlueGrey30-color); border-radius:0.6rem; }
.detail .row .col3.no-border { border: 0px !important; border-bottom: 1px solid var(--border-color-Grey);}
.detail .row .col3 .set-col { padding:0.8rem 0;width:100%; display:flex; flex-wrap:wrap; justify-content:flex-start; position: relative }
.detail .row .col3 .set-col:first-child { padding-top:0; }
.detail .row .col3 .set-col:last-child { border-bottom:0; padding-bottom:0; }
.detail .row .col3 .set-col.line { border-bottom:1px solid var(--border-color-Grey);} 
.detail .row .col3 .set-col {width:100%}
.detail .row .col3 .set-col .block {width:33%; padding-right:calc(1% / 2)}
.detail .row .col3 .set-col .block .head {width:34%;display:inline-block; line-height:22px}
.detail .row .col3 .set-col .block .td {width:65%; text-align:left; display: inline-block; font-size:1.4rem}
.detail .row .col3 .set-col .block .td.cfull {width:100%}
.detail .row .col3 .set-col .block .td.cfull input{width:91%}
.detail .row .col3 .set-col .block.col2 {width:66%; margin-bottom:0 !important}
.detail .row .col3 .set-col .block.col2 .head {width:17%}
.detail .row .col3 .set-col .block.col2 .td {width:82%}
.detail .row .col3 .set-col .block.col2 input{width:95%}
.detail .row .col3 .set-col .block input,.detail .row .col3 .set-col .block select {width:86%}

.detail .head { color:#777; }
.detail .td { font-weight: 700; }
.detail .td em { font-weight: 700; }
.detail .request { background:var( --bg-BlueGrey10-color); }
.detailphoto {max-height:220px}

h3 { font-size:1.6rem; color:#3A3F51; font-weight: 700; }
h4 { font-size:1.8rem; }
h5 { font-size:1.6rem; color:#757F93; font-weight: 700; }
.content-wrap .main .main-layout .sub-box {min-height:3rem;}
.content-wrap .main .main-layout .sub-title { padding-left: 4px; margin-right:1.2rem; color:var(--font-color-DarkGrey); font-size:var(--font-sm); line-height:2.8rem; font-weight:var(--font-weight-bold); letter-spacing: 0; }
.content-wrap .main .main-layout .sub-total { color:#3A3F51; font-size:var(--font-xs); line-height:2.8rem; }
.content-wrap .main h2 { font-size:2.4rem; }
.content-wrap .main .main-title span { font-weight:var(--font-weight-bold); line-height: 1.2; letter-spacing:-0.04rem; color:var(--font-color-DarkGrey) }
.content-wrap .main .main-title .main-title--regular { margin-left:1rem; color: #3A3F51; font-weight:var(--font-weight-regular); }
.content-wrap .main .main-titleRegular { font-weight:400; }

.main .grid-wrap { overflow-y: hidden; margin-top:0.4rem; border-bottom: solid 0px var(--border-color-LightGreyEE); }

.content-wrap .map-wrap { height: 130px; }
.main-layout .map-full { width:100%; height:100%; background-color:var(--bg-GreyDF-color); }
.float-table { position: absolute; z-index: 4; width:100%; height:300px; left:0; bottom:0; background-color: var(--bg-white-color); padding:1rem }

/*menu tree */
.tree-content { width:100% }
.tree-content .tree-wrap { position:relative }
.tree-content .tree-wrap div { font-size:var(--font-xxs); padding:0.6rem 0; display:flex; flex-wrap:wrap; flex-wrap:wrap; position: relative; gap:0.4rem }
.tree-content .tree-wrap div:hover { background-color:var(--bg-skyBlueEB-color); cursor:pointer }
.tree-content .tree-wrap .menu0>div { margin-left:0 }
.tree-content .tree-wrap .menu1>div { margin-left:2rem }
.tree-content .tree-wrap .menu2>div { margin-left:4rem }
.tree-content .tree-wrap .menu3>div { margin-left:6rem }
.tree-content .tree-wrap .menu4>div { margin-left:8rem }
.tree-content .tree-wrap .menu5>div { margin-left:10rem }
.tree-content .tree-wrap div::before { content:""; width: 1.6rem; height: 1.6rem; background-image:url('../images/tree_arrowDown.svg'); }
.tree-content .tree-wrap div.up::before { content:""; width: 1.6rem; height: 1.6rem; background-image:url('../images/tree_arrowDown.svg'); transform: rotate(-90deg); }

/*table*/
.content-wrap .main .main-layout .table { margin-top:0rem; }
.table table { width: 100%; background-color: var(--bg-white-color); }
.table table thead { z-index: 1; position: sticky; top:0; }
.table th { padding:0.2rem 0.2rem; height:3.6rem; vertical-align: middle; box-sizing:border-box; background:var(--BlueGreyD7-color); border-bottom:var(--bg-GreyDF-color); font-size:var(--font-tiny); color:var(--font-color-Grey33); font-weight:var(--font-weight-bold); }
.table tr:hover, .table tr:hover td { background-color: var(--bg-row-hover) !important; cursor: pointer; }
.table tr td { padding:1.2rem 0.2rem; font-size:var(--font-tiny); color:var(--font-color-black); height:4rem; box-sizing:border-box; vertical-align: middle; text-align: center; line-height: 1.4; text-overflow: ellipsis; word-wrap: break-word; border-bottom:1px solid var(--border-color-LightGreyEE) }
.table tr td div {word-break: break-all;}
.table tr:last-child td { border-bottom:0 }
.table td a ~ .btn,
.table td span ~ .btn { margin-left:1rem }
.table td span { line-height: 1.3; }
.table .icon-location { text-align:left; }
.table .icon-location span { display: block; }
.table .green { color:var(--font-color-Lightgreen) }
.table .blue { color:var(--font-color-BrandBlue) }
.table .red { color:var(--font-color-WarningRed) }
.table div[class*='icon-'] { position: relative; padding-left:1.7rem }
.table div[class*='icon-']::before { content:""; display: block; position: absolute; left:0; top:0.1rem; width: 1.4rem; height: 1.4rem }
.table .left { text-align:left }
.table thead th {position: sticky; top: -1px; z-index: 2;}
.table thead tr:nth-child(2) th {position: sticky; top: 35px; z-index: 2;}
.table .select-box { width: fit-content; margin:0 auto; }
.status ul { display: flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:2.0rem; }
.status ul .status-icon { position: relative; display: flex; justify-content:space-between; width: 2rem; height:2rem; background-repeat: no-repeat; background-size: 100% auto; }
.status ul .status-icon:after { display: block; position: absolute; right:-1.6rem; top:calc(50% - 1px); content:""; width:1rem; height:0.1rem; background-color:#EAECEF; }
.status .status-icon:last-child:after { display: none; }
.icon-location::before { background-image:url('../images/icon_location.svg'); }
.status ul .status-icon.time { background-image:url('../images/icon_time_off.svg'); }
.status ul .status-icon.time.on { background-image:url('../images/icon_time_on.svg'); }
.status ul .status-icon.dp { background-image:url('../images/icon_3dp_off.svg'); }
.status ul .status-icon.dp.on { background-image:url('../images/icon_3dp_on.svg'); }
.status ul .status-icon.deliveryComplete { background-image:url('../images/icon_deliverycomplete_off.svg'); }
.status ul .status-icon.deliveryComplete.on { background-image:url('../images/icon_deliverycomplete_on.svg'); }
.status ul .status-icon.delivery { background-image:url('../images/icon_delivery_off.svg'); }
.status ul .status-icon.delivery.on { background-image:url('../images/icon_delivery_on.svg'); }
.status ul .status-icon.depot { background-image:url('../images/icon_depot_off.svg'); }
.status ul .status-icon.depot.on { background-image:url('../images/icon_depot_on.svg'); }
.status ul .status-icon.instComplete { background-image:url('../images/icon_inst_complete_off.svg'); }
.status ul .status-icon.instComplete.on { background-image:url('../images/icon_inst_complete_on.svg'); }
.status ul .status-icon.confirm { background-image:url('../images/icon_confirm_off.svg'); }
.status ul .status-icon.confirm.on { background-image:url('../images/icon_confirm_on.svg'); }
.status ul .status-icon.time { background-image:url('../images/icon_time_off.svg'); }
.status ul .status-icon.time.on { background-image:url('../images/icon_time_on.svg'); }
.status ul .status-icon.boxCancel.on { background-image:url('../images/icon_boxCancel.svg'); }
.status ul .status-icon.boxCancel { background-image:url('../images/icon_boxCancel.svg'); }
.status ul .status-icon.devComplete.on { background-image:url('../images/icon_deliveryComplete_on.svg'); }
.status ul .status-icon.devComplete { background-image:url('../images/icon_deliveryComplete_off.svg'); }

/* 전체메뉴 */
.modal-menu { display:none; position: absolute; width: 100%; left:0; right: 0; top: 5.2rem; z-index: 10; background: #fff; font-size: 16px; overflow-y: auto; z-index:222; }
.modal-menu .modal-inner { max-width:2560px; margin: 0 auto; background: #fff; height:auto; border-top-right-radius: 10px; }
.modal-menu .modal-inner .modal-wrap { display: flex; flex-wrap: nowrap; }
.modal-menu .modal-inner .recent-menu { width: 22rem; height: auto; box-sizing: border-box; background-color:var(--bg-Lightgray-color); }
.modal-menu .modal-inner .recent-menu .recent-menu--search { display: flex; align-items: center; padding:.5rem 2rem; height: 6rem; border-bottom: 1px solid var(--border-color-Grey); box-sizing: border-box; background: var(--bg-white-color); }
.modal-menu .recent-menu .recent-menu--title { padding:0 2rem; margin-top: 3rem; font-size:var(--font-sm); line-height:2rem; color:var(--font-color-black); font-weight:var(--font-weight-bold); }
.modal-menu .recent-menu .recent-menu--list { margin-top: 2rem; padding:0 2rem }
.modal-menu .recent-menu ul>li { margin-top: 1.2rem }
.modal-menu .recent-menu .recent-menu--list a { display: block; margin-bottom:0; font-size: var(--font-xxs); line-height: 2rem; color:var(--font-color-black); text-decoration: underline; }
.modal-menu .recent-menu .recent-menu--list a:hover { color:var(--font-color-BrandBlue) }
.modal-menu .site-map { width:100%; height:calc(100vh - 5.2rem); }
.modal-menu .site-map > .between >li > ul { height:calc(100vh - 11.2rem); border-left: 1px solid var(--border-color-Grey); }
.modal-menu .site-map > .between >li > ul li:first-child strong { margin-top: 0; padding-top: 1rem; }
.modal-menu .site-map > ul { display:flex; justify-content: start; height: -webkit-fill-available; }
.modal-menu .site-map > ul > li { flex:1; }
.modal-menu .site-map > ul > li:last-child { border-right:0; }
.modal-menu .site-map .site-map--title { padding:1rem 0.2rem 1rem 1.4rem; align-content: center; font-size: var(--font-xs); font-weight: var(--font-weight-bold); border-bottom:1px solid var(--border-color-Grey); color: var(--font-color-black); line-height: 2rem; height:6rem; word-break:break-word }
.modal-menu .site-map .site-map--subTitle { margin:3rem 0 1rem; padding:0 0.2rem 0 1.4rem; display: block; color: var(--font-color-black); font-size:1.5rem; font-weight: var(--font-weight-bold); line-height: 2rem; }
.modal-menu .site-map .site-map--subTitle > a { font-weight:var(--font-weight-bold); }
.modal-menu .site-map .site-map--link { display: block; padding:0 0.2rem 0 1.4rem; margin-top:0.5rem; line-height:2rem; font-size: var(--font-tiny); }
.modal-menu .site-map .site-map--link:hover { text-decoration:underline; color:var(--font-color-BrandBlue) }
.modal-menu .site-map .site-map--link ~ .site-map--link { margin-top:0.5rem; line-height: 2rem; }
.modal-menu .site-map a>.site-map--subTitle:hover { color:var(--font-color-BrandBlue) !important; text-decoration: underline; }

/*modal-engineer-detail*/
.engineer-detail::after { clear: both; display: block; content: ""; }
.engineer-detail .engineer-left, .engineer-detail .engineer-right { float:left; }
.engineer-detail .engineer-left { width:20rem; position:relative }
.engineer-detail .engineer-right { margin-left:3rem; width:calc(100% - 23rem) }
.engineer-detail .engineer-img { width:20rem; height: 20rem; background: url('../images/img_profile.svg')no-repeat center / 20rem auto; position:relative; }
.engineer-detail .engineer-img img { width: 100%; height:100% }
.engineer-detail .add-photo { position:absolute; bottom:0.5rem; right:0.5rem; width:5rem; height:5rem; background:url(../images/ico_plus.svg) no-repeat center center; background-size:50%; border-radius:3rem; background-color:#fff; opacity: 0.7; }

/* page List*/
.paging { display: flex; align-items: center; justify-content: center; height: 2.4rem; padding-top:6px}
.paging button { min-width: 2.4rem; height: 2.4rem; background: transparent; padding: 0 0.8rem; letter-spacing:-0.1rem}
.paging .paging-list--btn.active { color:#364FC7; font-weight: var(--font-weight-bold); }
.paging .paging-btn { width:2.4rem; height:2.4rem; background-position:center center; background-size:17px auto; background-image:url('../images/icon_arrow.svg'); background-repeat: no-repeat; }
.paging .paging-btn.prev { transform:rotate(-180deg); }
.paging .paging-btn.p-prev {transform: rotate(-180deg); background-image: url('../images/icon_last_page.svg'); background-repeat: no-repeat; }
.paging .paging-btn.n-next {background-image: url('../images/icon_last_page.svg'); background-repeat: no-repeat; }

.paging .paging-btn.next.off {transform: rotate(-180deg);background-image: url('../images/icon_arrow_prev_off.svg')}
.paging .paging-btn.prev.off {transform: rotate(0deg);background-image: url('../images/icon_arrow_prev_off.svg')}
.paging .paging-btn.p-prev.off {transform: rotate(0deg);background-image: url('../images/icon_start_page.svg'); background-repeat: no-repeat; }
.paging .paging-btn.n-next.off {transform: rotate(-180deg); background-image: url('../images/icon_start_page.svg'); background-repeat: no-repeat; }

.notice-wrap .title{padding-bottom:5px}
.notice-wrap .content{padding-bottom:10px}

/*mypage*/
.mypage { max-width:100%; margin:0 auto }

/*login - SCR-WEB-02-001 */
.login { height:100vh; width:100%; display: flex; align-items: center; }
.login .check-box label { font-size: var(--font-tiny); }
.login-wrap { margin:0 auto; padding:10px; width:840px; display:flex; background:var(--bg-white-color); min-height:580px; border-radius:2.5rem; }
.login-wrap .login-left { width:41.7rem; background: url('../images/bg_login_dive.svg') no-repeat left bottom; background-size:95% }
.login-wrap .login-left h1 { display:inline-block; margin:2.2rem 0 0 2.2rem; width:13rem }
.login-wrap .login-left h1 img { width:100%; }
.login-wrap .logo-title { display:inline-block; padding-left:2.7rem; color:var(--font-color-BlueGreyC8); line-height:2.4rem; font-size:var(--font-xs); }
.login-wrap .login-left, .login-wrap .login-right { flex-shrink:0; }
.login-wrap .login-right { position:relative; flex:1; padding:1.0rem 3.4rem }
.login-wrap .login-right h2 { font-size:var(--font-md); line-height:4rem; font-weight:var(--font-weight-bold); }
.login-wrap .login-right .login-form { margin-top: 2.6rem; }
.login-wrap .login-right .login-form .inp-group { margin-bottom: 1.2rem; }
.login-wrap .login-right .login-form .btn-area { margin-top:10px }
.login-wrap .login-right .form-otp { margin-top:4rem; }
.login-wrap .login-right .form-otp .inp-group { margin-bottom:1.6rem; }
.login-wrap .login-right .login-form .login-password { line-height: 2rem; color:var(--font-color-KeyBlue); text-decoration: underline; font-size: var(--font-tiny); }
.login-wrap .login-right .login-subTitle { display:flex; justify-content:space-between }
.login-wrap .login-right .login-subTitle .login-txt { font-size:var(--font-xxs); line-height:2rem; align-content:center; color:var(--font-color-BlueGrey80) }
.login-wrap .login-right .login-subTitle .inp-group { flex:none; margin-bottom: 0; width:11.8rem!important }
.login-wrap .login-password a { font-size:var(--font-xxs); color:var(--font-color-KeyBlue); line-height:2rem; font-weight:var(--font-weight-bold); text-decoration: underline; }
.login-wrap .logo-footer { position:absolute; left:50%; transform:translateX(-50%); bottom:2.3rem; text-align:center; }
.login-wrap .logo-footer img { width:8rem; }
.input-copy { position: relative; }
.input-copy::after { content: ''; position: absolute; top:50%; transform: translateY(-50%); right: 1.4rem; width: 1.6rem; aspect-ratio: 1/1; background: url('../images/ico_copy.svg') no-repeat center/ contain; }
.input-copy input:read-only { width: 100%; height: 3rem; padding:0 1.5rem; border: 1px solid #C6CBDF; background: var(--bg-BlueGrey10-color); font-size: 1.2rem; letter-spacing: -0.42px; font-weight: 700; border-radius: 1.6rem; cursor: pointer; color:var(--font-color-black) !important; }

/* list 추가 0729 */
.btn.icon-upload span::before { background-image:url('../images/btn_icon_upload.svg'); }
.table .input-wrap { display: flex; gap:1rem; align-items: center; width: 90%; margin:0 auto; }
.table .input-wrap input[type="text"] { height:3rem; border:1px solid var( --border-color-GreyDE); border-radius:0.6rem; color:var(--font-color-black); width: 100%; font-size: var(--font-tiny ) }
.table tr td .new { padding: 0 .2rem; color:var(--font-color-WarningRed); border:1px solid var(--WarningRed-color); border-radius: .4rem; }

/* nt-box */
.nt-box { display: grid; gap:1.4rem; margin-top: 1rem; padding:2rem; border:1px solid var(--bg-BlueGrey30-color); border-radius:1rem; }
.nt-box .border-bottom { border-bottom:1px solid var(--border-color-GreyF4); width: 100%; height: 1px; }
.nt-box .nt-item { display: grid; gap:.4rem; }
.nt-box .nt-item .nt-item--title,
.nt-box .nt-item .nt-item--content { display: block; font-size:var(--font-tiny); line-height: 2rem; }
.nt-box .nt-item .nt-item--title { padding-right:1rem; color:var(--font-color-DarkGrey50) }
.nt-box .nt-item .nt-item--content { word-wrap: break-word; white-space:normal; font-weight:var(--font-weight-bold); color:var(--font-color-black); min-width:0; }
.nt-box .nt-item .nt-item--content .inp-group { margin-bottom: 0; }
.nt-box .nt-item .ls-icon { display: inline-block; width: 20px; height: 20px; vertical-align: bottom; }
.nt-box .nt-item .ls-icon.attach { background: url('../images/icon_attach.svg') no-repeat center; }
.nt-box .nt-item .ls-icon.complete { background:url('../images/icon_confirm_on.svg') no-repeat center;; }
.nt-box .nt-item .ls-icon.complete-green { background: url('../images/icon_complete-green.svg') no-repeat center; }
.file-drop-area { position: relative; display: grid; gap:1rem; grid-template-columns: auto 1fr; }
.file-drop-area input[type="file"] { position: absolute; left: 0; top:0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.file-drop-area .file-message { height:3rem; border:1px solid var( --border-color-GreyDE); border-radius:0.6rem; color:var(--font-color-black); width: 100%; font-size: var(--font-tiny ); }
.inp-group.lg .inp-group--text { height: 4rem; padding: 1rem 0.8rem; font-size: var(--font-xxs); }

/* 에디터 내부 스타일 제거 */
.nt-item--editor { font-size: var(--font-sm); line-height: 1.3; }
.nt-item--editor * { font:revert; margin:revert; padding:revert; line-height: normal; }
.nt-item--editor ul { list-style: disc; }
.nt-item--editor ol { list-style: auto; }
.nt-item--editor img { max-width: 100%; }

/* SCR-WEB-10-009 */
.as-box { display: grid; grid-template-columns: repeat(2, 1fr); }

/* modal 내부 */
.modal-content .line-box { padding:2rem; border:1px solid var(--border-color-GreyF4); border-radius:1rem; }
.modal-content .col { margin-bottom: 2rem; }
.modal-content .col:last-child { margin-bottom: 0; }
.modal-content .grid2 { gap:0.6rem; }
.modal-content .sub-box { margin-bottom: .85rem; font-size: var(--font-xs); font-weight: var(--font-weight-bold); }
.modal-content .border-bottom { border-bottom:1px solid var(--border-color-GreyF4); width: 100%; height: 1px; }

.modal-content .card { margin-top: 0.4rem; width:100%; margin-bottom:0.4rem; padding:1.6rem; border:1px solid var(--border-color-LightGreyEE); border-radius:0.6rem; }
.modal-content .detail-content { display:flex; flex-wrap:wrap; justify-content:space-between; flex-wrap:wrap; position: relative; font-size:var(--font-tiny); line-height: 2rem; }
.modal-content .detail-content textarea { height: 9rem; }
.modal-content .detail-content .inp-group { margin-bottom: 0; }
.modal-content .detail-content .tr { width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative; }
.modal-content .detail-content .tr .head { width:30%; min-height:30px; color:var(--font-color-DarkGrey50); margin:0.2rem 0; align-content: center; }
.modal-content .detail-content .tr .td { width:70%; min-height:2rem; text-align:left; display: inline-block; margin:0.4rem 0; align-content: center; }
.modal-content .detail-content .tr.row .head { width:23.2%; }
.modal-content .detail-content .tr.row .td { width:calc(100% - 23.2%); text-align:left; display: inline-block; margin:0.4rem 0 }
.modal-content .detail-content .tr.quest { width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative; }
.modal-content .detail-content .tr.quest .head { width:70%; }
.modal-content .detail-content .tr.quest .td { width:calc(100% - 70%); text-align:right; display: inline-block; margin:0.4rem 0 }

.modal-content .detail-content.col .tr .head { width:45%; color:var(--font-color-DarkGrey50); margin:0.2rem 0; align-content: center; }
.modal-content .detail-content.col .tr .td { width:55%; text-align:left; display: inline-block; margin:0.4rem 0; }
.modal-content .detail-content.col .tr.row { width:100%; }
.modal-content .detail-content.col .tr.row .head { width:21.6%; }
.modal-content .detail-content.col .tr.row .td { width:calc(100% - 21.6%); text-align:left; display: inline-block; margin:0.4rem 0; font-weight: 700; }
.modal-content .detail-content.col .tr.quest { width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; flex-wrap: wrap; position: relative; }
.modal-content .detail-content.col .tr.quest .head { width:70%; }
.modal-content .detail-content.col .tr.quest .td { width:calc(100% - 70%); text-align:right; display: inline-block; margin:0.4rem 0; }

.modal-content .name-box { border-bottom:solid 0px var(--border-color-DarkGrey54); }
.modal-content .sub-title { height:3rem }
.modal-content .name-title { margin-right:1.2rem; color:var(--font-color-DarkGrey); font-size:var(--font-xs); line-height:2.8rem; font-weight:var(--font-weight-bold); letter-spacing: -0.04rem }
.modal-content .certi { display:inline-block; height:10rem; overflow-y:auto; width:100% }

.modal-content .table .content { height:100% }

.line-block { border-bottom:solid 1px var(--border-color-LightGreyEE); }
.line-block:last-child { margin-bottom: 0; border-bottom:solid 0 }

.main-layout .col .ly-box { position: relative; margin-top: 1rem; padding:2rem; border:1px solid var(--border-color-GreyF4); border-radius:1rem; }
.main-layout .col .ly-box .border-bottom { border-bottom:1px solid var(--border-color-GreyF4); width: 100%; height: 1px; }
.main-layout .col .ly-box.cancel { background:var( --bg-BlueGrey10-color); }
.main-layout .col .ly-box.cancel.col2 .ly-item:first-child { width: 30%; }
.main-layout .col .ly-box .ly-item { margin-bottom:0.8rem; }
.main-layout .col .ly-box .ly-item.reverse .ly-item--title { width: calc(100% - 200px) }
.main-layout .col .ly-box .ly-item.reverse .ly-item--txt { width:200px; text-align:right; }
.main-layout .col .ly-box .ly-item:after { clear:both; display:table; content:""; }
.main-layout .col .ly-box .ly-item:last-child { margin-bottom: 0; }
.main-layout .col .ly-box .ly-item .ly-item--title,
.main-layout .col .ly-box .ly-item .ly-item--txt { display: block; font-size:var(--font-tiny); line-height: 2rem; }
.main-layout .col .ly-box .ly-item .ly-item--title { float:left; padding-right:1rem; width:200px; color:var(--font-color-Grey99) }
.main-layout .col .ly-box .ly-item .ly-item--txt { float:left; width:calc(100% - 220px); word-wrap:break-word; word-wrap: break-word; white-space:normal; font-weight:var(--font-weight-bold); color:var(--font-color-black); min-width:0; }
.main-layout .col .ly-box .ly-item .ly-item--txt .inp-group { margin-bottom: 0; }

/* modal note */
.cc-note { position: relative; padding-left:0.8rem; font-size: var(--font-tiny); }
.cc-note::before { content: ''; position: absolute; left: 0; top:0.85rem; width:0.3rem; height:0.3rem; border-radius:0.3rem; background: var(--bg-black-color); }

.inp-group.lg .inp-search .inp-search--icon { bottom:12px; }

/* progress */
.loading-bar {position: fixed; display:none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index:20;}
.loading-bar svg{position:fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.progress-bar {display:flex;flex-direction:column;justify-content:center;overflow:hidden;text-align:center;white-space: nowrap;transition: width 1s ease-in-out; width: 0%;animation: width 1.5s ease-in-out forwards;border-radius: 12px;height: 100%;}
.progress-bar.green { background-color: var(--bg-Lightgreen);}
.progress-bar.grey { background-color: var(--bg-Grey5C-color); }
.progress-bar.orange { background-color: orange; }
.progress, .progress-stacked{height: 1.4rem;    border:1px solid var(--border-color-LightGreyE2);    border-radius: 12px; }

@media screen and (max-width:1600px){
    .status ul{gap:1rem 2rem;}
    .status ul .status-icon{width: 1.5rem;height: 1.5rem;}
    .modal-menu .site-map .site-map--title{font-size: var(--font-xxs);}
    .modal-menu .site-map .site-map--subTitle{font-size: var(--font-xxs);}
}

/* flex */
.flex1 {flex:1;}

/* map-install 추가 */
.table-list th { height: 36px; padding: 2px 8px; font-size: 13px; text-align: center; background:var(--BlueGreyD7-color); border-bottom:var(--bg-GreyDF-color); color: var(--font-color-Grey33); font-weight:var(--font-weight-bold); align-content: center; }
.table-list
.table-list th:nth-last-child(1) { border-right: 0px }
.table-list td { background-color:var(--bg-white-color); font-weight: normal; overflow: hidden; height: 36px; padding: 2px 8px; border-right: 1px solid var(--bs-border-color); border-bottom-width: 1px; border-bottom-color: var( --border-color-LightGreyE2); border-bottom-style: solid; color:var(--bs-black); background-color:var(--bs-white) }

.table-list td:nth-last-child(1) { border-right: 0px }
.table-list tr:nth-last-child(1) td { border-bottom-width: 0px; }
.center { text-align: center }
.table-list .completed { background-color: var(--bs-light-bg) }
.table-list a { text-decoration: underline; color: var(--bs-blue); }

.map-cotents { position:absolute; bottom:0; left:0; width:100% }
.map-cotents .table { width: 100%; margin-top:0.4rem }
.title-wrap { width:300px; position:absolute; top:5px; left:25px }

.latest { background-color:var(--bg-white-color); padding:1rem 0; border:solid 1px var(--bs-border-color) }
.latest i { position: absolute; right:2px; top:0.7rem; width:3rem; height: 3rem; cursor:pointer; display: block; border:1px solid var(--border-color-GreyDE); border-radius:0.6rem; }
.latest i::after { cursor:pointer; content: ''; display: inline-flex; width:3rem; height: 3rem; background: url('../images/select_arrow_down.svg')no-repeat center; float: right; transition: transform 0.3s ease; filter: brightness(70%) }
.latest i.collapsed::after { transform: rotate(180deg); }
.latest span { font-size:var(--font-sm) }
.latest span:nth-last-child(2) { padding:0 10px }

.content-wrap .main .main-layout .eng-list .table { margin-top: 0; }
.scroll-wrap { overflow:auto !important; width:100% }

.table th.header-bg01 { background:var(--BlueGreyD7-color); border-bottom:var(--bg-GreyDF-color) }
.table td.td-bg01 { background-color:var(--bg-GreyFA-color); }
.table td.left-1 { border-left:0px solid var(--border-color-LightGreyEE); }
.table th.left-1 { border-left:0px solid var(--border-color-GreyDF) }

.table td.left-border { border-left:1px solid var(--border-color-GreyDF); }
.table th.left-border { border-left:1px solid var(--border-color-GreyDF); }

.info-wrap { width:90rem; margin:0 auto }
.info-wrap h2 { text-align:center; font-size:var(--font-lg); font-weight:700; margin-top:3rem }
.info-wrap .btn-area { width:20rem; margin:0 auto }
.info-wrap .sub-text { font-size:var(--font-xxs); text-align:center; margin-top:3rem }
.ip-info { margin-top:5rem }
.ip-info li { width:33%; padding:2rem 4rem; border:solid 1px var(--border-color-LightGreyE2); border-radius:1rem }
.ip-info li h3 { font-size: var(--font-xxs); padding-bottom:1rem }
.ip-info li span { display:block; font-size: var(--font-md); font-weight:700 ; height:60px}

.terms-wrap { padding:3rem }
.terms-wrap .terms h3 { font-size: 18px; margin: 15px 0; font-weight: bold; }
.terms-wrap .terms h4 { font-size: 16px; margin: 20px 0 12px 0; font-weight: bold; }
.terms-wrap .terms .txt { line-height: 20px; margin-bottom: 10px;font-size: 14px;}
.terms-wrap .terms .sm { line-height: 20px; margin-bottom: 4px; }
.terms-wrap .terms li { font-size: 14px; margin: 6px 0  }
.terms-wrap .terms p { font-size: 14px; margin: 16px 0  } 

.main-button { margin-top:1rem }

/* error page */
.e-container { margin: 0 auto; width: 100%; }
.error-wrap { position:relative; width:100%; height:100vh }
.error-wrap .title img {width:120px}
.e-block { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width:400px; height:280px; text-align:center; background-color:var(--bg-white-color); border-radius:2rem; border:solid 0px var(--border-color-GreyDF); box-shadow: 1px 2px 7px var(--bg-BlueGrey40-color); }
.e-block .title { margin-top:3rem }
.e-block .title p { margin-top:6rem; font-size:1.8rem }
.e-block .btn-wrap { text-align:center; margin-top:6rem }
.e-bkg { background-color:#f6f7f8 }

.grid2 { display: grid; gap:1.4rem; grid-template-columns: repeat(2, 1fr); }
.grid3 { display: grid; gap:1.4rem; grid-template-columns: repeat(3, 1fr); }
.gridc2 { display: grid; gap:1.4rem; grid-template-columns: 200px auto; }
.gridc3 { display: grid; gap:1.4rem; grid-template-columns: 1fr 1fr .4fr; }
.grid-row2 { grid-row: span 2/auto; }
.grid-row3 { grid-row: span 3/auto; }
.grid-col2 { grid-column: span 2/auto; }
.grid-col3 { grid-column: span 3/auto; }

.gap4 { gap:.4rem; }
.gap6 { gap:.6rem; }
.gap10 { gap:1rem; }
.gap16 { gap:1.6rem; }
.gap20 { gap:2rem; }

/* toast */
.toast-message { z-index: 50; position: fixed; bottom: 22rem; left: 0; right:0; width:fit-content; max-width: 700px; margin: 0 auto; padding: .5rem 1rem; transform: translateY(10%); border-radius: .4rem; font-size: 1.4rem; opacity: 0; visibility: hidden; transition: .3s ease-out; text-align: center; }
.toast-message.basic { background-color: var(--bg-black-color); color: var(--font-color-white); }
.toast-message.warn { border: 1px solid var(--WarningRed-color); background: var(--bg-gray-color); color:var(--WarningRed-color); }
.toast-message.active { transform: translateY(0); opacity: 1; visibility: visible; }

ol.ol-basic { display: flex; flex-direction: column; gap:1rem; line-height: 1.3; font-size: 1.4rem; }
ol.ol-basic > li { position: relative; padding-left: 1.6rem; }
ol.ol-basic > li::before { content: '1.'; position: absolute; left: 0; }
ol.ol-basic > li:nth-child(2)::before { content: '2.'; }
ol.ol-basic > li:nth-child(3)::before { content: '3.'; }
ol.ol-basic > li:nth-child(4)::before { content: '4.'; }
ol.ol-basic > li:nth-child(5)::before { content: '5.'; }
ol.ol-basic > li:nth-child(6)::before { content: '6.'; }
ol.ol-basic > li:nth-child(7)::before { content: '7.'; }
ol.ol-basic > li:nth-child(8)::before { content: '8.'; }
ol.ol-basic > li:nth-child(9)::before { content: '9.'; }
ol.ol-basic > li:nth-child(10)::before { content: '10.'; }
ol.ol-basic > li:nth-child(11)::before { content: '11.'; }
ol.ol-basic > li:nth-child(12)::before { content: '12.'; }
ol.ol-basic > li:nth-child(13)::before { content: '13.'; }
ol.ol-basic > li:nth-child(14)::before { content: '14.'; }
ol.ol-basic > li:nth-child(15)::before { content: '15.'; }
ol.ol-basic > li:nth-child(16)::before { content: '16.'; }
ol.ol-basic > li:nth-child(17)::before { content: '17.'; }
ol.ol-basic > li:nth-child(18)::before { content: '18.'; }
ol.ol-basic > li:nth-child(19)::before { content: '19.'; }
ol.ol-basic > li:nth-child(20)::before { content: '20.'; }
ol.ol-basic > li:nth-child(21)::before { content: '21.'; }
ol.ol-basic > li:nth-child(22)::before { content: '22.'; }
ol.ol-basic > li:nth-child(23)::before { content: '23.'; }
ol.ol-basic > li:nth-child(24)::before { content: '24.'; }
ol.ol-basic > li:nth-child(25)::before { content: '25.'; }
ol.ol-basic > li:nth-child(26)::before { content: '26.'; }
ol.ol-basic > li:nth-child(27)::before { content: '27.'; }
ol.ol-basic > li:nth-child(28)::before { content: '28.'; }
ol.ol-basic > li:nth-child(29)::before { content: '29.'; }
ol.ol-basic > li:nth-child(30)::before { content: '30.'; }

ol.ol-basic p { margin-bottom: 1rem; }


.border-list > li { border: 1px solid var(--border-color-Grey); border-radius: 1rem; background: var(--bg-white-color); }
.border-div { width: 100%; padding: 2rem; border: 1px solid var(--border-color-Grey); border-radius: 1rem; background: var(--bg-white-color); }
.light-border-div { padding: 2rem; border: 1px solid var(--bg-GreyF4-color); border-radius: 1rem; }

/* SCR-WEB-04-001 */
.modal-welcome .border-list { display: grid; grid-template-columns: repeat(3, 1fr); gap:1.6rem; }
.modal-welcome .border-list h5 { display: flex; align-items: center; height: 3.6rem; }
.modal-welcome .border-list-1 > li { display: flex; flex-direction: column; padding: 1.2rem 1.8rem; margin-bottom: .6rem; }
.modal-welcome .border-list-1 .li-info-box { display: flex; gap:2rem; align-items: end; line-height: 2rem; }
.modal-welcome .border-list-1 .li-title { font-size: 2.8rem; font-weight: 700; line-height: 2rem; }
.modal-welcome .border-list-1 .li-text { flex: 1; margin-top: 1rem; font-size: 1.4rem; }
.modal-welcome .border-list-1 .li-info { display: flex; align-items: center; gap:.6rem; font-size: 2rem; font-weight: 700; }
.modal-welcome .border-list-1 .li-info::before { content: ''; width: 1.3rem; aspect-ratio: 13/16; }
.modal-welcome .border-list-1 .li-chart { width:94%; height: 60px; margin: 2.5rem auto 0; }
.modal-welcome .border-list-1 .li-chart-label ul { display: flex; justify-content: space-between; margin-top: -.5rem; font-size: 1.4rem; font-weight: 700; text-align: center; line-height: 1.6rem; }
.modal-welcome .border-list-1 .li-chart-label li.up { color:var(--KeyBlue-color) }
.modal-welcome .border-list-1 .li-chart-label li.down { color:var(--WarningRed-color) }

.modal-welcome .border-list-2 > li { display: flex; flex-direction: column; gap:1rem; padding: 3rem 2.4rem; }
.modal-welcome .border-list-2 .li-title { font-size: 2rem; font-weight: 700; }
.modal-welcome .border-list-2 .li-info-box { display: flex; align-items: end; justify-content: space-between; height: 6.7rem; }
.modal-welcome .border-list-2 .li-info-box p { font-weight: 700; font-size: 5rem; color:var(--WarningRed-color); }
.modal-welcome .border-list-2 .li-info-box button { margin-bottom: 1.2rem; }
.modal-welcome .border-list-2 .inactive .li-info-box p { color:#A1A1A1; }
.modal-welcome .border-list-2 .inactive .li-info-box button { background:#A1A1A1; }

/* SCR-WEB-04-006 */
.ico-instcomplete { position: relative; padding-left: 2rem; }
.ico-instcomplete::before { content: ''; position: absolute; left: 0; top:calc(50% - 1rem); width: 2rem; height: 2rem; background:url('../images/icon_inst_complete_on.svg') no-repeat center/contain; }
.call-log { display: inline-block; padding-left: 3rem; }

.map-pin { position: absolute; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; gap:.6rem; }
.map-pin .pin-text { padding:.4rem 1rem; font-size: 1.4rem; font-weight: 700; line-height: 1.2; background: var(--bg-white-color); border-radius: .4rem; text-align: center; box-shadow: 0px 4px 4px 0px #00000026; }
.map-pin::after { content: ''; display: block; width: 4.5rem; aspect-ratio: 45/56; background: url('../images/ico_pin_blue.svg') no-repeat center/contain; }
.map-pin.pin-home::after { background: url('../images/ico_pin_home.svg') no-repeat center/contain; }

/* message */
.message-wrap { font-weight: 700; }
.message-wrap .message-wrap-inner { max-height: 25rem; overflow-y: auto; }
.message-wrap .message { display: flex; flex-direction: column; margin-bottom: 1rem; }
.message-wrap .message-title { font-size: 1.3rem; line-height: 2rem; }
.message-wrap .message-text { padding: .6rem 1.6rem; font-size: 1.3rem; line-height: 1.6rem; }
.message-wrap .message-received .message-text { width: fit-content; border-radius: 0 1.2rem 1.2rem 1.2rem; background: #E5F0E5; }
.message-wrap .message-sent { align-items:end; }
.message-wrap .message-sent .message-text { border-radius: 1.2rem 0 1.2rem 1.2rem; background: #DAECFF; }
.message-wrap .input-message { width: 100%; }
.input-message { position: relative; }
.input-message textarea { height: 3rem; padding: .7rem 1.5rem; font-size: 1.2rem; font-weight: 700; border:none; border-radius: 1.5rem; line-height: 1.3; background: #F6F7FB; }
.input-message button { position: absolute; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; right: .85rem; top:0; background: transparent; }


/* SCR-WEB-04-010 */
.routing-chart-box { margin-top: 1rem; }
.routing-chart-box dl { display: grid; grid-template-columns: 16.2rem auto; gap:1.4rem; font-weight: 700; font-size: 1.6rem; }
.routing-chart-box b { font-size: 1.8rem; }
.routing-chart-div { display: grid; grid-template-columns: 3.6rem auto; align-items:center; }
.routing-chart-div table { width: 100%; background: var(--border-color-LightGreyEE); border-radius: 1.2rem; font-size: 1.6rem; text-align: center; color:#777777; }
.routing-chart-div td { min-width: 60px !important; position: relative; height: 2.4rem; border-radius: 1.2rem; vertical-align: middle; }
.routing-chart-div .chart-data { z-index: 1; color:var(--white-color) }
.routing-chart-div td:last-child { padding-right:2rem; border-radius: 0 1.2rem 1.2rem 0; }
.routing-chart-div td:last-child::before { content: ''; position: absolute; left: 0; top:0; transform: translateX(-100%); display: block; width: 2rem; height: 100%; border-radius: 1.2rem 0 0 1.2rem; }


.routing-chart-labels { margin-top: 1.6rem; }
.routing-chart-labels ul { display: flex; gap:4rem; justify-content: right; align-items: center; }
.chart-labels { display: flex; gap:.5rem; align-items: center; color:var(--BlueGrey80-color); font-weight: 400; font-size: 1.3rem; }
.chart-labels span { display: inline-block; width: 1.6rem; height: .8rem; border-radius: 1.2rem; }

/* SCR-WEB-04-011 */
.routing-grid { grid-template-rows: 1fr; }
.main-layout-grid-2 { display: grid; grid-template-columns:  1fr 2fr; gap:2rem; }
.light-border-dl { display: flex; flex-direction: column; gap:.8rem; }
.light-border-dl > li { position: relative; padding: 2rem; border: 1px solid var(--bg-GreyF4-color); border-radius: 1rem; }
.light-border-dl dl { display: grid; grid-template-columns: 10rem auto 10rem; gap:.8rem; font-size: 1.3rem; font-weight: 700; line-height: 2rem; }
.light-border-dl dt { color:#777; }
.light-border-dl .li-active { border-color:var(--KeyBlue-color); background: #F6F8FF; }
.light-border-dl .li-active :hover { cursor: pointer;}
.light-border-dl .li-attach { border-color: transparent; }
.light-border-dl .li-attach :hover { cursor: pointer; }
.light-border-dl .li-attach .li-attach-button { position: absolute; left: 0; top:0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap:1.2rem; width: 100%; height: 100%; border: 1px dotted #66B565; background: #F4FFF9E5; cursor: pointer; font-size: 1.8rem; color:#40A33F; border-radius: 1rem; font-weight: 400; }
.light-border-dl .li-default { border:1px solid var(--bg-gray-color); background: var(--bg-GreyEE-color); }
.light-border-dl .li-default :hover { cursor: pointer;}
.light-border-dl .li-default.li-active { border: solid 1px var(--KeyBlue-color) !important;  }
.assigned {background-color: var(--bg-GreyF4-color)}
table tr.active { border: 1px solid var(--KeyBlue-color); background: #F6F8FF; }
table tr.active td { position: relative; border-bottom: none; }
table tr.active td::before { content: ''; position: absolute; left: 0; top:-1px; width: 100%; height: 1px; border-top:1px solid var(--KeyBlue-color); pointer-events: none; }
table .no-result td { color:#777; }
table .no-result:hover { background: none; cursor: default; }
table tr.red { border: 1px solid #ffc9ba; background: #fff5f2; }
table tr.red td { position: relative; border-bottom: none; }
table tr.red td::before { content: ''; position: absolute; left: 0; top:-1px; width: 100%; height: 1px; border-top:1px #ff7d54; pointer-events: none; }
table tr.active.red { border: 1px solid #ffa082; background: #fff5f2; }
table tr.active.red td { position: relative; border-bottom: none; }
table tr.active.red td::before { content: ''; position: absolute; left: 0; top:-1px; width: 100%; height: 1px; border-top:1px #ff7d54; pointer-events: none; }

.between + .light-border-div { margin-top: .6rem; }
.between + div .light-border-dl { margin-top: .6rem; }

/* SCR-WEB-05-001 */
.return-chart-box { padding: 0; display: grid; grid-template-columns: 1.5fr 1fr; font-weight: 700; font-size: 2rem; }
.return-chart-box .inner { padding: 2rem 2rem 3rem; }
.return-chart-box h3 { margin-bottom: 1.5rem; }
.return-chart-div { position: relative; width: 28rem; height: 14rem; margin:0 auto; }
.return-chart-div .return-chart-total { position: absolute; left: 50%; bottom:2px; transform: translateX(-50%); display: flex; flex-direction: column; gap:.7rem; line-height: 2rem; align-items: center; color:#757F93; font-size: 1.4rem; font-weight: 400; }
.return-chart-div .return-chart-total span { font-weight: 700; font-size: 2.8rem; color:var(--black-color) }
.return-chart-box .return-chart-labels ul { height: 100%; display: flex; flex-direction: column; border-left:1px solid var(--border-color-Grey); }
.return-chart-box .return-chart-labels li { display: flex; align-items: center; justify-content: center; height: 100%; border-bottom:1px solid var(--border-color-Grey); }
.return-chart-box .return-chart-labels li > div { min-width: 14rem; display: flex; justify-content: space-between; }
.return-chart-box .return-chart-labels li:last-child { border-bottom: none; }

.pending-days-button-group { display: flex; gap: 0.1rem; width: 100%; margin-top: 0.4rem; }
.pending-days-button-group button { font-size: var(--font-xxs) !important;  min-width: 0px !important; width: 100%; height:2.2rem !important; border-radius: 0; color: #fff; font-size: var(--font-md); font-weight: var(--font-weight-bold);padding:0 !important }
.pending-days-button-group button:first-child { border-radius: 0.3rem 0 0 0.3rem; }
.pending-days-button-group button:last-child { border-radius: 0 0.3rem 0.3rem 0; }
.pending-chart-box .pending-0 { background-color: #DDDDEB; }
.pending-chart-box .pending-1 { background-color: #CAA200; }
.pending-chart-box .pending-2 { background-color: #E26522; }
.pending-chart-box .pending-3 { background-color: #CD380B; }
.pending-chart-box .pending-4 { background-color: #CD0B0B; }
.pending-chart-box .pending-5 { background-color: #930404; }

.pending-days-buttons { display: flex; align-items: center; gap:2rem; margin-bottom: 2rem; }
.pending-days-buttons h3 { font-weight: 400; }
.pending-days-buttons div { display: flex; gap:.4rem; }
.pending-days-buttons button { gap:.4rem; color:var(--bg-white-color); }
.pending-days-buttons button::before { content: ''; display: block; width: 2rem; height: 2rem; background:url('../images/icon_time_on.svg') no-repeat center/contain; filter: saturate(0) brightness(5); }


.pending-days-buttons .pending-1 { background: #CAA200; }
.pending-days-buttons .pending-2 { background: #E26522; }
.pending-days-buttons .pending-3 { background: #CD380B; }
.pending-days-buttons .pending-4 { background: #CD0B0B; }
.pending-days-buttons .pending-5 { background: #930404; }

.pending-days-label [class^="pending"]::before { content: ''; display: block; width: 2rem; height: 2rem; background:url('../images/icon_time_on.svg') no-repeat center/contain; filter: saturate(0) brightness(5); }
.pending-days-label [class^="pending"] { color: #fff !important; display: inline-flex; gap:.4rem; min-width: 80px; border-radius:0.5rem;color:var(--font-color-white);font-weight:400;padding: 0.4rem 1.2rem;}
.pending-days-label .pending-1 { background: #CAA200; } 
.pending-days-label .pending-2 { background: #E26522; } 
.pending-days-label .pending-3 { background: #CD380B; } 
.pending-days-label .pending-4 { background: #CD0B0B; } 
.pending-days-label .pending-5 { background: #930404; } 

.btn-back { display: block; width: 2.6rem; height: 2.8rem; transform: translateY(.3rem); background: url('../images/ico_back.svg') no-repeat left center/1.6rem; }
.btn-sub-back {display: block; width: 2.6rem; height: 2.0rem; transform: translateY(.3rem); background: url(../images/ico_back.svg) no-repeat left center / 1.4rem;}
.btn-login-back {display: block; width: 2.6rem; height: 3.4rem; transform: translateY(.3rem); background: url(../images/ico_back.svg) no-repeat left center / 1.4rem;}

/* 250814 추가 */
/* SCR-WEB-04-010 */
.main-layout:has(.map-full) { overflow: hidden; padding: 0; max-height: calc(100dvh - 15.3rem); }
.main-layout .map-full img { width: 100%; height: 100%; object-fit: cover; }
.silde-tab { position: absolute; left: 0; top:0; width: 64rem; height: 100%; padding: 2rem; background: var(--bg-white-color); border-radius: .6rem; box-shadow: 4px 0px 4px 0px #0000001A; transition: transform .3s; }
.silde-tab.slide-left { transform: translateX(-101%); }
.silde-tab .ico-slide-close { display: inline-block; width: 3rem; height: 2.2rem; background: url('../images/btn_filter_gray.svg') no-repeat .4rem .4rem/1.3rem; }
.silde-tab .ico-slide-open { z-index: 1; position: absolute; right: 0; transform: translateX(100%) rotate(180deg); display: inline-block; width: 4rem; height: 4rem; background: var(--bg-white-color) url('../images/btn_filter_gray.svg') no-repeat center /1.3rem; border-radius: 5rem; transition: .3s; opacity: 0; pointer-events: none; box-shadow: 4px 0px 4px 0px #0000001A; }
.silde-tab .ico-slide-open.active { transform: translateX(150%) rotate(180deg); pointer-events: initial; opacity: 1; }
.drivers-title { display: flex; justify-content: space-between; }
.drivers-title p { line-height: 2.2rem; font-size: 1.8rem; }
.drivers-title > div { display: flex; }

.list-title-box { position: relative; display: grid; grid-template-columns: 7rem auto auto; gap:.8rem; padding: 2rem; padding-right: 5.6rem; font-size: 1.3rem; cursor: pointer; }
.list-title-box .toggle::before { content: ''; position: absolute; right:2rem; top:calc(50% - 1.3rem); display: block; width: 2.6rem; aspect-ratio: 1/1; background: url('../images/ico_arw_slide.svg') no-repeat center/contain; transition: transform .3s; }
.list-title-box .list-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap:.2rem; }
.list-title-box .list-img i { display: block; width: 3.6rem; aspect-ratio: 36/23; background: url('../images/ico_truck_yellow.svg') no-repeat center/contain; }
.list-title-box .list-img span { display: flex; align-items: center; justify-content: center; width: 100%; height: 1.6rem; font-weight: 700; color:var(--font-color-white); font-size: 1rem; border-radius: 1.4rem; }
.list-title-box dl { display: grid; grid-template-columns: 6.4rem auto; line-height: 2rem; }
.list-title-box dd { min-height: 2rem; }
.list-title-box dt { min-height: 2rem; color:#777777; }
.list-title-box .list-info { margin-right: 4.5rem; }
.list-title-box .list-info > div { display: flex; justify-content: space-between; gap:1.5rem; line-height: 2rem; }

.list-toggled-box { display: none; background: #fafafa; }
.list-toggled-box li { display: grid; grid-template-columns: 4.5rem 17.5rem auto 9rem; align-items: center; padding: 1.2rem 2rem; border-top: 1px solid #eee; }
.list-toggled-box li > b { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid #DDDDEB; border-radius: .8rem; }
.list-toggled-box li p { line-height: 2rem; }
.list-toggled-box .datetime {border-radius: 10%; display: flex; flex-direction: column; align-items: center; align-content: center; }

.drivers-list { max-height: calc(100dvh - 23rem); overflow-y: auto; margin-top: .6rem; }
.drivers-list > ul { display: flex; flex-direction: column; gap:1rem; }
.drivers-list > ul > li.active .list-title-box::before { transform: rotate(180deg); }
.drivers-list > ul > li.active .list-title-box .toggle::before { transform: rotate(180deg); }
.drivers-list > ul > li { border-radius: .6rem; border:1px solid #eee; overflow: hidden; }
.drivers-list > ul > li.blue { border-color:var(--KeyBlue-color); }
.drivers-list > ul > li.blue .list-toggled-box { background: #FBFDFF; }
.drivers-list > ul > li.blue .list-title-box .list-img i { background: url('../images/ico_truck_blue.svg') no-repeat center/contain; }
.drivers-list > ul > li.red { border-color:#F6501D; }
.drivers-list > ul > li.red .list-toggled-box { background: #fffcfb; }
.drivers-list > ul > li.red .list-title-box .list-img i { background: url('../images/ico_truck_red.svg') no-repeat center/contain; }
.drivers-list > ul > li.yellow { border-color:#F6981D; }
.drivers-list > ul > li.yellow .list-title-box .list-img i { background: url('../images/ico_truck_yellow.svg') no-repeat center/contain; }
.drivers-list > ul > li.yellow .list-toggled-box { background: #fffcf9; }

.driver-item .list-info { width: 270px; }

.map-pin { position: absolute; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; gap:.6rem; }
.map-pin .pin-text { position: absolute; bottom:-.8rem; transform: translateY(100%); padding: .2rem 1rem; font-size: 1.4rem; line-height: 1.2; background: var(--bg-white-color); border-radius: .6rem; text-align: center; box-shadow: 0px 4px 4px 0px #00000026; }
.map-pin.pin-num::before { content: attr(data-pin); position: absolute; bottom:1.5rem; font-weight: 700; font-size: 2rem; }
.map-pin.pin-num::after { width: 3.5rem; }
.map-pin.pin-num .pin-text { padding: 1.2rem 1.5rem; margin-top: .2rem; font-size: 1.3rem; font-weight: 400; line-height: 2rem; white-space: nowrap; text-align: left; }
.map-pin.pin-num .map-info span { display: inline-block; padding: 0 1.2rem; margin-right: 2px; border-radius: 1.6rem; border: 1px solid #DDDDEB; }

.map-pin.pin-yellow .pin-text { background: #F6981D; color:var(--bg-white-color); font-weight: 700; font-size: 1.6rem; }
.map-pin.pin-yellow::after { content: ''; display: block; width: 4.6rem; aspect-ratio: 1/1; background: var(--bg-white-color) url('../images/ico_truck_yellow.svg') no-repeat center/3.6rem; border-radius: 5rem; border:4px solid #F6981D; }
.map-pin.pin-blue .pin-text { background: #306FF2; color:var(--bg-white-color); font-weight: 700; font-size: 1.6rem; white-space: nowrap; }
.map-pin.pin-blue::after { content: ''; display: block; width: 4.6rem; aspect-ratio: 1/1; background: var(--bg-white-color) url('../images/ico_truck_blue.svg') no-repeat center/3.6rem; border-radius: 5rem; border:4px solid #306FF2; }


.pin-driver { position: absolute; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; gap:.6rem; font-weight: 700; font-size: 1.4rem;}
.pin-driver > div:first-child {border-radius: 5rem; border:4px solid #F6981D; width: 5.4rem; background-color: var(--bg-white-color); aspect-ratio: 1 / 1; display:flex; justify-content: center; align-items: center;}
.pin-driver i { display: block; height: 3.8rem; width: 3.8rem; background:  url('../images/ico_truck_yellow.svg') no-repeat center/contain; }
.pin-driver .pin-text { position: absolute; color:var(--bg-white-color); bottom:-.8rem; transform: translateY(100%); padding: .2rem 1rem; font-size: 1.4rem; line-height: 1.2; background: var(--bg-white-color); border-radius: .6rem; text-align: center; box-shadow: 0px 4px 4px 0px #00000026; }

.gap10 {gap: 10px;}
.required-label:after{ content: '*';color:var(--font-color-WarningRed);margin-left:2px; }

.tree .rMateH5__DataGridLineH {border-bottom:0 !important}
.tree .rMateH5__DataGridHeaderBackgroundSkin {visibility: hidden !important;display:none}
.tree .rMateH5__DataGridHeaderRenderer.rMateDataGridHeaderStyles {display:none}

/* 250819 추가 */
/* SCR-WEB-06-003 */
/*.kpi-list { display: flex; margin-top: 1rem; border: 1px solid #EEE; } */
.kpi-list { display: grid; margin-top: 1rem; grid-template-columns: 1fr 1fr 2fr 2fr; }
.kpi-list h4 { display: flex; align-items: center; justify-content: center; height: 4rem; margin-bottom: 1rem; font-weight: 700; }
.kpi-list > li { position: relative; width: 100%; padding: 1rem;}
.kpi-list > li::before { z-index: 1; content: ''; position: absolute; right: -.8rem; top:2.2rem; display: block; width: 1.6rem; aspect-ratio: 1/1; background: url('../images/icon_kpi_arw.svg') no-repeat center/contain; }
.kpi-list > li:nth-child(odd) { background: #F9FAFE; }
.kpi-list > li:nth-child(1) h4 { color:#757F93; }
.kpi-list > li:nth-child(2) h4 { color:#00A168; }
.kpi-list > li:nth-child(3) h4 { color:#2FB7D3; }
.kpi-list > li:nth-child(4) h4 { color:#306FF2; }
.kpi-list > li:nth-child(5) h4 { color:#0C368D; }
.kpi-list > li:nth-child(6) h4 { color:#6F6F6F; }
.kpi-list > li:last-child:before { display: none; }
.kpi-list .border-list h5 { display: flex; align-items: center; height: 3.6rem; font-size: 1.4rem; }
.kpi-list .border-list > li { min-height: 20.5rem; padding: 1.2rem 1.8rem 2.4rem; margin-bottom: 1rem; min-width: 20rem; width: 100%; }
.kpi-list .border-list > li:has(dl) .li-title { font-size: 2.3rem; }
.kpi-list .border-list > li:has(dl) .li-info { font-size: 1.6rem; }
.kpi-list .border-list > li:has(dl) .li-info::before { width: 1.3rem; }
.kpi-list .li-info-box { display: flex; flex-direction: column; gap: 0.5rem; height: 2.6rem; margin-top:1rem;}
.kpi-list .li-info-box .total {  font-weight: 700 !important;}
.kpi-list .li-title { font-size: 2.6rem; font-weight: 700; }
.kpi-list .li-info { display: flex; align-items: center; gap:.6rem; font-size: 2rem; font-weight: 700; }
.kpi-list .li-fail-box { padding: 2.5rem 0 2rem 0 !important;}
.kpi-list .li-fail-box > a { color: var(--font-color-WarningRed) !important; font-weight: 700 !important; text-decoration: underline;}
.kpi-list .li-chart-label { min-height: 3rem; }
.kpi-list .li-info::before { display: none; content: ''; width: 1.3rem; aspect-ratio: 13/16; }
    li.red-up .li-info { color:#D84F6E; }
    li.red-up .li-info::before { display: block; background: url('../images/icon_red_up.svg') no-repeat center/contain; }
    li.red-up .li-chart-label li:last-child { color:#D84F6E; }
    li.red-down .li-info { color:#D84F6E; }
    li.red-down .li-info::before { display: block; background: url('../images/icon_red_up.svg') no-repeat center/contain; transform: rotate(180deg); }
    li.blue .li-info { color:#0F7BE5; }
    li.blue .li-chart-label li:last-child { color:#0F7BE5; }
    li.blue-up .li-info { color:#0F7BE5; }
    li.blue-up .li-info::before { display: block; background: url('../images/icon_blue_up.svg') no-repeat center/contain; }
    li.blue-up .li-chart-label li:last-child { color:#0F7BE5; }
.kpi-list .li-chart { margin: 2.5rem auto 1rem; width: 17rem; height: 3.5rem; }
.kpi-list .li-chart-label ul { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 700; text-align: center; line-height: 1.6rem; }
.kpi-list dl { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: space-between; align-items: center; margin-top: 1rem; color:#757F93; font-weight: 700; font-size: 1.4rem; row-gap: 2rem;}
.kpi-list dt { line-height: 2.8rem; border-bottom:1px solid #DDDDEB; }
.kpi-list dd { line-height: 2.8rem; border-bottom:1px solid #DDDDEB; text-align: right; }

.kpi-list > li:nth-child(3) .border-list { display:flex; flex-direction: row;  gap: 1rem; }
.kpi-list > li:nth-child(3) .border-list > li { min-width: 20rem;  }
.kpi-list > li:last-child .border-list { display:flex; flex-direction: row;  gap: 1rem; }
.kpi-list > li:last-child .border-list > li { min-width: 20rem;  }

.kpi-stat-list .pi-chart-value {  position: absolute; top: 215px; transform: translateX(-50%); }
.kpi-stat-list .chart-value.no-change { color:#757F93; }
.kpi-stat-list .chart-value.increase { color:#0F7BE5; }
.kpi-stat-list .chart-value.decrease { color: #D84F6E; }
.kpi-stat-list .chart-value.increase::before { content: " "; width: 1.3rem; display: block; background: url('../../../../images/icon_blue_up.svg') no-repeat center/contain; }
.kpi-stat-list .chart-value.decrease::before { content: " "; width: 1.3rem; display: block; background: url('../../../../images/icon_red_up.svg') no-repeat center/contain; transform: rotate(180deg);  }
.kpi-stat-list { display: flex; margin-top: 1rem; gap: 1rem; }
.kpi-stat-list h4 { display: flex; align-items: center; justify-content: center; height: 4rem; margin-bottom: 1rem; font-weight: 700; }
.kpi-stat-list > li { position: relative; width: 100%; min-width: 30rem; padding: 1rem; border: 1px solid #EEE; }
.kpi-stat-list > li:last-child:before { display: none; }
.kpi-stat-list h5 { display: flex; align-items: center; height: 3.6rem; font-size: 1.4rem; }
.kpi-stat-list > li { min-height: 2.6rem; padding: 1.2rem 1.8rem 2.4rem; margin-bottom: 1rem;  }
.kpi-stat-list li:has(dl) { background: #FBFBFB; }
.kpi-stat-list li:has(dl) .li-title { font-size: 2.3rem; }
.kpi-stat-list li:has(dl) .li-info { font-size: 1.6rem; }
.kpi-stat-list li:has(dl) .li-info::before { width: 1.3rem; }
.kpi-stat-list .li-info-box { display: flex; align-items: end; gap:2rem; height: 2.6rem; margin-top:1rem;}
.kpi-stat-list .li-title { font-size: 2.6rem; font-weight: 700; }
.kpi-stat-list .li-info { display: flex; align-items: center; gap:.6rem; font-size: 2rem; font-weight: 700; }
.kpi-stat-list .li-info::before { display: none; content: ''; width: 1.3rem; aspect-ratio: 13/16; }
.kpi-stat-list .li-chart { margin: 2.5rem 1.5rem 1rem;  position: relative; }
.kpi-stat-list .li-combine-chart { margin: 2.5rem auto 1rem;  position: relative; }
.kpi-stat-list .li-chart canvas { min-width: 25rem !important; height: 20rem !important;}
.kpi-stat-list .li-combine-chart canvas { min-width: 25rem !important; height: 20rem !important;}
.kpi-stat-list  #c2d-chart { min-width: 25rem !important; height: 21.5rem !important;}
.kpi-stat-list  #rtn-dtl-reason-chart { min-width: 25rem !important; height: 21rem !important;}

.kpi-stat-list .li-chart-label ul { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 700; text-align: center; line-height: 1.6rem; }
.kpi-stat-list dl { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: space-between; align-items: center; margin-top: 1rem; color:#757F93; font-weight: 700; font-size: 1.4rem; }
.kpi-stat-list dt { line-height: 2.8rem; border-bottom:1px solid #DDDDEB; }
.kpi-stat-list dd { line-height: 2.8rem; border-bottom:1px solid #DDDDEB; text-align: right; }
.kpi-stat-list .li-chart-label li:last-child { color:#0F7BE5; }

.kpi-stat-list li { max-width: 350px; }
.kpi-lead-chart { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1rem; }
.kpi-lead-chart > .chart-list { display: flex; gap: 1rem; justify-content: space-between; }
.kpi-lead-chart > .chart-header { display: flex; gap: 10px; justify-content: space-between; }

.kpi-lead-chart > .chart-header li:nth-child(2) { margin-left: 25px }
.kpi-lead-chart > .chart-header li:nth-child(3) { margin-left: 25px } 
.kpi-lead-chart > .chart-list > li:last-child { max-width: 0px; flex: 0; }
.kpi-lead-chart .chart-box { width: 100%; }
.kpi-lead-chart .chart-box .bar { width: 100%; height: 10px; background-color: #efefef; }
.kpi-lead-chart .chart-box .fullbar { width: calc(100% - 10px); height: 10px; background-color: #efefef; }
.kpi-lead-chart .chart-box .chart-value { margin-top: 10px; padding-left: 5px; display: flex; flex-direction: column; gap: 0.4rem; }
.kpi-lead-chart .chart-box .chart-value > div > span:nth-child(1) { font-size: 1.6rem; font-weight: 700; }
.kpi-lead-chart .chart-box .no-change { background-color:#F4B183 !important; }
.kpi-lead-chart .chart-box .increase  { background-color:#9DC3E6 !important; }
.kpi-lead-chart .chart-box .decrease  { background-color:#A6A6A6 !important; }

.kpi-survey-list { display: flex; justify-content:space-between; gap: 1.5rem; padding-bottom: 1rem; padding-right: 1rem;}
.kpi-survey-list li { width: 100%; max-height: 15rem; display: block; padding:1.0rem 1.4rem 0.6rem; background: var(--bg-white-color); border:1px solid var(--border-color-Grey); }
.kpi-survey-list .item-title { position: relative; display: flex; line-height: 1.2; align-items: center; padding-right: 1.4rem; height: 2.6rem; color: var(--font-color-BlueGrey80); font-size: var(--font-bold); }
.kpi-survey-list .item-num { display: block; height: 4.8rem; align-content: center; color: var(--font-color-black); font-size: var(--font-md); font-weight: var(--font-weight-bold); box-sizing: border-box; text-indent: -1px; }
.kpi-survey-list .item-link { display: block; height: 4.8rem; align-content: center; font-size: var(--font-md); color:var(--font-color-BrandBlue); }


/* SCR-WEB-06-004 */
.level-list h4 { display: flex; align-items: center; justify-content: center; height: 4rem; margin-bottom: 1rem; font-weight: 700; }
.level-list h5 { display: flex; align-items: center; height: 3.6rem; font-size: 1.4rem; }
.level-list { display: flex; }
.level-list > li {position: relative; width: 100%; padding: 1rem; }
.level-list > li:nth-child(odd) { background: #F9FAFE; }
.level-list .border-div { min-height: 20rem; padding: 1.2rem 1.8rem 2.4rem; margin-bottom:1rem;}
.level-list > li:nth-child(1) h4 { color:#757F93; }
.level-list > li:nth-child(2) h4 { color:#00A168; }
.level-list > li:nth-child(3) h4 { color:#2FB7D3; }
.level-list > li:nth-child(4) h4 { color:#6F6F6F; }
.level-list > li::before { z-index: 1; content: ''; position: absolute; right: -.8rem; top:2.2rem; display: block; width: 1.6rem; aspect-ratio: 1/1; background: url('../images/icon_kpi_arw.svg') no-repeat center/contain; }
.level-list > li:last-child:before { display: none; }
.level-list .border-list h5 { display: flex; align-items: center; height: 3.6rem; font-size: 1.4rem; }
.level-list .border-list > li { min-height: 20.5rem; padding: 1.2rem 1.8rem 2.4rem; margin-bottom: 1rem; }
.level-list .border-list > li:has(dl) { background: #FBFBFB; }
.level-list .border-list > li:has(dl) .li-title { font-size: 2.3rem; }
.level-list .border-list > li:has(dl) .li-info { font-size: 1.6rem; }
.level-list .border-list > li:has(dl) .li-info::before { width: 1.3rem; }
.level-list .li-info-box { display: flex; align-items: end; gap:2rem; height: 2.6rem; margin-top:2.5rem;}
.level-list .li-title { font-size: 2.6rem; font-weight: 700; }
.level-list .li-info { display: flex; align-items: center; gap:.6rem; font-size: 2rem; font-weight: 700; }
.level-list .li-info::before { content: ''; display: block; width: 1.3rem; aspect-ratio: 13/16; }
.level-list .li-chart { margin: 2.5rem auto 1rem; width: 17rem; height: 3.5rem; }
.level-list .li-chart-label ul { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 700; text-align: center; line-height: 1.6rem; }
.level-list dl { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: space-between; align-items: center; margin-top: 1rem; color:#757F93; font-weight: 700; font-size: 1.4rem; }
.level-list dt { line-height: 2.8rem; border-bottom:1px solid #DDDDEB; }
.level-list dd { line-height: 2.8rem; border-bottom:1px solid #DDDDEB; text-align: right; }

/* SCR-WEB-08-008 */
.table-basic { width: 100%; }
.table-basic th { padding: .5rem; border: 1px solid #DDDDEB; background: var(--bg-BlueGrey10-color); font-size: 1.3rem; vertical-align: middle; }
.table-basic td { padding: .5rem; border: 1px solid #DDDDEB; background: var(--bg-white-color); font-size: 1.3rem; vertical-align: middle; }
.table-basic select { height: 3rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.3rem; }
.table-basic input { height: 3rem; border-radius: .4rem; padding: 0 1rem; font-size: 1.3rem; }
.table-basic input:read-only { background: var(--bg-white-color); color:var(--font-color-black); }
.table-basic input:read-only:focus { outline: none; }
.table-basic .btn { width: 3rem; min-height: 3rem; ; cursor:pointer}
.table-basic .btn-text { line-height: 3rem; }
.table-basic .radio-box { padding-left: .8rem; }

.table-border th { border:1px solid #CFD7DF; border-right:1px solid #e5e7f0; }
.table-border th:last-child { border-right: 1px solid #CFD7DF; }
.table-border td { border:1px solid var(--border-color-LightGreyEE); }
.table-border tr:last-child td { border-bottom:1px solid var(--border-color-LightGreyEE); }
.table-border none { border: none;}

.lsp-card { flex:none !important; }
.lsp-card .td { width: 46% !important; }

.tree-div { display: flex; gap:.8rem; }
.tree-folder-1 { padding-left: 2.4rem; }
.tree-folder-2 { padding-left: 4.4rem; }
.tree-dep-1 { padding-left: .8rem; }
.tree-dep-2 { padding-left: 2rem; }

/* 250820 추가 */
.table-border th { border:1px solid #CFD7DF; }
.table-border th:last-child { border-right: 1px solid #CFD7DF; }
.table-border td { border:1px solid var(--border-color-LightGreyEE); }
.table-border tr:last-child td { border-bottom:1px solid var(--border-color-LightGreyEE); }

.lsp-card { flex:none !important; }
.lsp-card .td { width: 46% !important; }

.tree-div { display: flex; gap:.8rem; }
.tree-folder-1 { padding-left: 2.4rem; }
.tree-folder-2 { padding-left: 4.4rem; }
.tree-dep-1 { padding-left: .8rem; }
.tree-dep-2 { padding-left: 2rem; }

/* SCR-WEB-08-020 */
.table-wide tr td { padding: 1.2rem 2rem; }

/* SCR-WEB-07-002 */
.custom-grid { display: grid !important; grid-template-columns: 1fr .6fr; gap:0 1rem; }
.custom-grid .tr { display: grid !important; grid-template-columns: 14rem 1fr; }
.custom-grid .tr .head { width:100% !important; margin: .4rem 0 !important; }
.custom-grid .tr .td { width: 100% !important; }

.btn-add-photo { width: 6rem; height: 6rem; margin-right: .4rem; background: #F4F4F4 url('../images/icon_camera_blue.svg') no-repeat center/3.1rem; }
.img-box { display: flex; }
.img-box-item { display: block; width: 6rem; height: 6rem; margin-right: .4rem; }
.img-box-item img { width: 100%; height: 100%; object-fit: cover; }

.td .img-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 5px 0px; }
.td .img-list .img-item { position: relative; min-width: 100px; height: 100px; }
.td .img-list .img-item:hover .overlay { opacity: 0.8;}
.td .img-list .img-item .n-overlay { display: none;}
.td .img-list .img-item:hover { cursor:pointer; }
.td .img-list .img-item img { object-fit: cover; height: 100%; width: 100%; width: 100px;}
.td .img-list .img-item .overlay { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; background: var(--bg-black-color); color: var(--white-color); opacity: 0; transition: opacity 0.4s; font-size: 12px; word-break: break-all; padding: 5px;}


.order-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap:1.4rem 1rem; margin-bottom: 2rem; font-weight: 400; }
.order-grid .inp-group .inp-group--label { margin-bottom: .4rem; color:#757F93; }
.order-grid .inp-group .inp-search .inp-search--icon { opacity: .6; }

.btn-delete { display: block; min-width: 1.8rem; width: 1.8rem; height: 1.8rem; background: url('../images/ico_delete.svg') no-repeat center/contain; }
.line30 { line-height: 3rem; }
table .border-line { margin-top:2rem; margin-bottom:2rem; border-top:1px solid #F4F4F4; }
.table-border th.darker { background: #D8DBE6; }
.table-border td.darker { background: #FAFAFA; }
.table-border td.bg-red { background: #FFF4E7; color:var(--font-color-WarningRed); }
.between:has(.range-chart) { padding: 0 1rem; align-items: center; color:var(--font-color-black); }
.range-chart { width: 11rem; height: 1.4rem; border-radius: 2rem; border:1px solid var(--bg-GreyDF-color); overflow: hidden; background-color:var(--border-color-LightGreyEE)}
.range-chart span { display: block; height: 100%; background: #40A33F; border-radius: 2rem; }
.table-border td.bg-red span { background: var(--WarningRed-color); }

.fix {position:sticky;z-index:2}
.fix1 {position:sticky;z-index:2;left:0;width:50px}
.fix2 {position:sticky;z-index:2;left:50px;width:70px}
.fix3 {position:sticky;z-index:2;left:130px;width:80px}
.fix4 {position:sticky;z-index:2;left:210px;width:100px}
.fix5 {position:sticky;z-index:2;left:310px;width:80px}



.scroll-table-container { overflow: auto; width:100%; }
.scroll-table-container table { white-space:nowrap;border-collapse:collapse;}


.capa-monitor-table { margin-top: 4px;}
.capa-monitor-table tr td:nth-child(1) { border-right: none !important;}
.capa-monitor-table tr td:nth-child(2) { border-left: none !important; border-right: none !important;}
.capa-monitor-table tr td:nth-child(3) { border-left: none !important; border-right: none !important; }
.capa-monitor-table tr td:nth-child(4) { border-left: none !important; }

.capa-monitor-table th:nth-child(1) { border-right: none !important;}
.capa-monitor-table th:nth-child(2) { border-left: none !important; border-right: none !important;}
.capa-monitor-table th:nth-child(3) { border-left: none !important; border-right: none !important; }
.capa-monitor-table th:nth-child(4) { border-left: none !important; }


.capa-monitor-table th:nth-child(1),
.capa-monitor-table th:nth-child(2),
.capa-monitor-table th:nth-child(3) {
	  position: sticky;
	  z-index: 3;
}

.capa-monitor-table td:nth-child(1),
.capa-monitor-table td:nth-child(2),
.capa-monitor-table td:nth-child(3) {
	  position: sticky;
	  z-index: 2;
	  background-color: var(--bg-white-color);
}

.capa-monitor-table th:nth-child(1){ left: 0;}
.capa-monitor-table th:nth-child(2){ left: 200px;}
.capa-monitor-table th:nth-child(3){ left: 400px;}

.capa-monitor-table td:first-child {left: 0;}
.capa-monitor-table td:nth-child(2) { left: 200px;}
.capa-monitor-table td:nth-child(3) { left: 400px; }


.driver-workday-table th:nth-child(1),
.driver-workday-table th:nth-child(2),
.driver-workday-table th:nth-child(3),
.driver-workday-table th:nth-child(4) {
	  position: sticky;
	  z-index: 3;
}

.driver-workday-table td:nth-child(1),
.driver-workday-table td:nth-child(2),
.driver-workday-table td:nth-child(3),
.driver-workday-table td:nth-child(4) {
	  position: sticky;
	  z-index: 2;
	  background-color: var(--bg-white-color);
}

.driver-workday-table th:nth-child(1){ left: 0;}
.driver-workday-table th:nth-child(2){ left: 100px;}
.driver-workday-table th:nth-child(3){ left: 300px;}
.driver-workday-table th:nth-child(4){ left: 500px;}

.driver-workday-table td:nth-child(1){ left: 0;}
.driver-workday-table td:nth-child(2){ left: 100px;}
.driver-workday-table td:nth-child(3){ left: 300px;}
.driver-workday-table td:nth-child(4){ left: 500px;}

.prod-list-table th:nth-child(1),
.prod-list-table th:nth-child(2),
.prod-list-table th:nth-child(3),
.prod-list-table th:nth-child(4),
.prod-list-table th:nth-child(5) {
	  position: sticky;
	  z-index: 3;
}

.prod-list-table td:nth-child(1),
.prod-list-table td:nth-child(2),
.prod-list-table td:nth-child(3),
.prod-list-table td:nth-child(4),
.prod-list-table td:nth-child(5) {
	  position: sticky;
	  background-color: var(--bg-white-color);
}

.prod-list-table th:nth-child(1){ left: 0;}
.prod-list-table th:nth-child(2){ left: 50px;}
.prod-list-table th:nth-child(3){ left: 250px;}
.prod-list-table th:nth-child(4){ left: 350px;}
.prod-list-table th:nth-child(5){ left: 450px;}

.prod-list-table td:nth-child(1){ left: 0;}
.prod-list-table td:nth-child(2){ left: 50px;}
.prod-list-table td:nth-child(3){ left: 250px;}
.prod-list-table td:nth-child(4){ left: 350px;}
.prod-list-table td:nth-child(5){ left: 450px;}

/* driver work day */
.toggle-switch {display: flex;align-items: center;width:36px;height:2.3rem;border-radius:0.8rem; ;padding:0 !important;margin:0}
.toggle-switch input[type="radio"] {display: none; }
.toggle-switch label { position: relative; padding: 2px 6px;cursor: pointer; transition: background-color 0.3s ease;color: var(--font-color-black); }
.toggle-switch label {font-size:1.2rem; height:2.3rem; border:solid 1px var(--border-color-GreyF4)}
.toggle-switch .on {border-radius:0.8rem;width:3.6rem; position:absolute; left:12px; z-index:2}
.toggle-switch .off {border-radius:0.8rem;width:3.6rem; position:absolute; left:12px; z-index:2; border-color: var(--border-color-GreyF4);background-color: var(--bg-GreyDF-color);}
.toggle-switch label:hover { opacity: 0.9;cursor:pointer}
.toggle-switch input[type="radio"]:checked + label {background-color: var(--bg-DeepBlue-color); color: var(--font-color-white); z-index:1}
.toggle-switch input[type="radio"]:checked + label.off {background-color: var(--bg-GreyDF-color); color: var(--font-color-black); z-index:1}

.switch {
    --switch-width: 43px;
    --switch-height: calc(var(--switch-width) / 2);
    --switch-border-radius: 999vw;
    --switch-clr-border: rgba(255 255 255 / .25);
    --switch-clr-bg: rgb(41 37 36);
    --switch-clr-bg-on: green;
    --switch-inset: 4px;
    --switch-duration: 300ms;
    --toggle-size: 19px;
    --toggle-gap: calc(var(--toggle-size) * 1.2);
    --toggle-bg: #DADADA;
    --toggle-bg-on: #0F7BE5;
    display: flex
;
    align-items: center;
    gap: 10px;
    width: fit-content;
}
.switch label {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    width: var(--switch-width);
    height: var(--switch-height);
    border-radius: 0.5rem;
    border: 0px solid var(--switch-clr-border);
    outline: 0px dashed transparent;
    outline-offset: 4px;
    color: var(--bs-graydark-100);
    /* background-color: var(--switch-clr-bg); */
    isolation: isolate;
    transition-property: background-color;
    transition-duration: var(--switch-duration);
    transition-timing-function: ease-in-out;
    transition-delay: var(--switch-delay, 0ms);
}
.switch:has(input[type="radio"]:checked) {
    --switch-clr-bg: var(--switch-clr-bg-on);
    --switch-delay: 250ms;
    --toggle-x: calc(50% + var(--switch-inset));
    --toggle-clr-bg: green;
    --toggle-bg: var(--toggle-bg-on);
    --led-animation: toggle var(--led-duration) linear forwards var(--led-delay);
    --icon-on: 1;
    --icon-off: 0;
    --icon-delay: 250ms;
    --label-scale-off: .75;
    --label-scale-on: 1;
}

.switch input[type="radio"] {
    position: absolute;
    pointer-events: none;
    appearance: none;
    border: none;
    outline: none;
    border-radius: inherit;
    background-color: var(--bg-KeyBlue-color) !important;
    top: auto;
    left: var(--toggle-x, var(--switch-inset));
    width: 9px;
    height: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--toggle-gap);
    transition-property: left, background-color;
    transition-duration: var(--switch-duration);
    transition-timing-function: ease-in-out;
}

.fix {position:sticky;z-index:2}
.fix1 {position:sticky;z-index:2;left:0;width:50px}
.fix2 {position:sticky;z-index:2;left:50px;width:70px}
.fix3 {position:sticky;z-index:2;left:130px;width:80px}
.fix4 {position:sticky;z-index:2;left:210px;width:100px}
.fix5 {position:sticky;z-index:2;left:310px;width:80px}

.detail.layout > div:first-child { overflow: auto; }
.detail-btn-area {
	padding-top: 10px;
	padding-bottom: 10px;
}

.table.layout { overflow: auto}
.notice-detail-contents {width:100%;margin-top:2rem}
.form-header {display: flex;flex-wrap: wrap;justify-content: flex-start;position: relative;margin-bottom: 1rem;min-height:5rem; padding: 0.4rem 1.6rem;border: 1px solid var(--bg-BlueGrey30-color); border-radius: 0.6rem; background: var(--bg-BlueGrey20-color);align-items:center;}
.write-wrap {overflow-y:auto;border-bottom: 1px solid var(--bg-BlueGrey30-color);}
.detail-content-wrap {overflow-y:auto;align-content: flex-start;}

.wrap1 {width:10%}
.wrap2 {width:20%}
.wrap3 {width:30%}
.wrap4 {width:40%}
.wrap5 {width:50%}
.wrap6 {width:60%}
.wrap7 {width:70%}
.wrap8 {width:80%}
.wrap9 {width:90%}
.wrap10 {width:100%}

.new{font-size:1.2rem; font-weight:700; color:var(--font-color-WarningRed) !important;padding-left:0.4rem}

/* 250822 추가 */
.score-chart-div { position: relative; width: 18rem; height: 14rem; margin:0 auto; }
.score-chart-div .score-chart-total { position: absolute; left: 50%; bottom:2px; transform: translateX(-50%); display: flex; flex-direction: column; gap:.7rem; line-height: 2rem; align-items: center; color:#757F93; font-size: 1.4rem; font-weight: 400; }
.score-chart-div .score-chart-total span { font-weight: 700; font-size: 2.4rem; color:var(--black-color) }

.engineer-detail .engineer-right .inp-group { font-size: 1.3rem; }
.engineer-detail .engineer-right .inp-group .inp-group--label { font-size: 1.3rem; }
.engineer-detail .engineer-right .modal-list.column .inp-group { margin-bottom: 2.3rem; }

.engineer-detail .engineer-left .modal-list { margin-top: .4rem; }
.engineer-detail .engineer-left .modal-list--title { font-size: 1.3rem; color:#555555; }
.engineer-detail .engineer-left .modal-list--cont { font-size: 1.3rem; }
.engineer-detail .engineer-left .certi { height: auto; }

.switch-box { position: relative; display: inline-block; width: 4.4rem; height: 1.8rem; }
.switch-box:has(input[type='checkbox'])::after { z-index: 1; content: 'OFF'; position: absolute; left: 50%; top:50%; transform: translate(-10%, -45%); color:#555555; pointer-events: none; font-size: 1rem; font-weight: 700; }
.switch-box:has(input[type='checkbox']:checked)::after { content: 'ON'; color:var(--bg-white-color); transform: translate(-90%, -45%); }
.switch-box input[type='checkbox'] { display: none; }
.switch-box input[type='checkbox'] + label { display: block; width: 100%; height: 100%; background: none; cursor: pointer; }
.switch-box input[type='checkbox'] + label::before { content: ''; display: block; position: absolute; border:none; left:auto; right: 0px; top:50%; transform: translateY(-50%); width: 100%; height:100%; background: #EAECEF; border-radius: 5rem; transition: 0.3s; }
.switch-box input[type='checkbox'] + label::after { z-index: 2; content: ''; display: block; position: absolute;  right: 2.8rem; top:50%; transform: translateY(-50%); width: 1.4rem; height:1.4rem; background: var(--white-color); border-radius: 50%; transition: 0.3s; }
.switch-box input[type='checkbox']:checked + label::before { background: #333; }
.switch-box input[type='checkbox']:checked + label::after { right: 2px; }

/* 250825 추가 */
/* SCR-WEB-04-004 */
.btn.precall { position: relative; padding-right: 2rem; }
.btn.precall::after { content: ''; position: absolute; right: -1px; top:0; width: auto; aspect-ratio: 1/1; height: 100%; background: url('../images/btn_precall_deco.svg') no-repeat center/contain; }
.btn.precall.inactive { padding: 0 1.2rem; background:var(--bg-GreyCC-color); color: var(--font-color-white); border-radius:.6rem; }
.btn.precall.inactive::after { display: none; }
.btn.precall.done { padding: 0 1.2rem; background:#0C368D; color: var(--font-color-white); cursor: default;}
.btn.precall.done::after { display: none; }

/* SCR-WEB-08-019 */
.holiday-sub-box { display: flex; }
.holiday-sub-box .inp-group { position: relative; width: 29rem; padding-left: 4rem; }
.holiday-sub-box .inp-group input { padding-right: 7rem; }
.holiday-sub-box .inp-group button { position: absolute; right:0; top:0; height:3rem; }

.main-layout-holiday { display: grid; grid-template-columns: 32rem 1fr; gap:2rem; }
.main-layout-holiday table { border: 1px solid #CFD7DF; }

#calendar-box { position: relative; }
#calendar-box .daterangepicker { display: block !important; position: relative !important; left: auto !important; top:auto !important; padding: 2rem; margin-top: 0; border:none; }
#calendar-box .daterangepicker th.month { padding-bottom: 1.6rem; font-size: 2.2rem; font-weight: 700; }
#calendar-box .daterangepicker .drp-calendar { max-width: none; }
#calendar-box .daterangepicker.show-calendar .drp-buttons { display: none; }
#calendar-box .daterangepicker:after,
#calendar-box .daterangepicker:before { display: none; }
#calendar-box .daterangepicker td.prev:hover,
#calendar-box .daterangepicker th.prev:hover { background: initial; }
#calendar-box .daterangepicker td.next:hover,
#calendar-box .daterangepicker th.next:hover { background: initial; }
#calendar-box .prev { pointer-events: none; }
#calendar-box .prev span { display: none; }
#calendar-box .prev::before { content: ''; display: inline-block; position: absolute; top:0; left:0; width: 100%; height: 3rem; cursor: pointer; pointer-events: initial; border-radius: .6rem; }
#calendar-box .prev::after { content: ''; display: inline-block; position: absolute; top:1.5rem; left:50%; transform: translateX(-50%) rotate(135deg); border: solid black; border-width: 0 0 1px 1px; padding: 6px; color:#fff; opacity: 1; }
#calendar-box .next { pointer-events: none; }
#calendar-box .next span { display: none; }
#calendar-box .next::before { content: ''; display: inline-block; position: absolute; bottom:0; left:0; width: 100%; height: 3rem; cursor: pointer; pointer-events: initial; border-radius: .6rem; }
#calendar-box .next::after { content: ''; display: inline-block; position: absolute; bottom:1.5rem; left:50%; transform: translateX(-50%) rotate(135deg); border: solid black; border-width: 1px 1px 0 0 ; padding: 6px; color:#fff; opacity: 1; }
#calendar-box .daterangepicker .calendar-table th,
#calendar-box .daterangepicker .calendar-table td { height: 3rem; }
#calendar-box .daterangepicker .ranges,
#calendar-box .daterangepicker .drp-calendar { float: none; }


/* 250826 추가 */

.top-menu .snb-list { width: 100%; position: relative; }
.top-menu .snb-list .snb-list--item { margin-bottom:2rem; border-bottom: 1px solid #DDDDEB; }
.top-menu .snb-list .snb-list--item > a { position: relative; display:block; padding-right:2rem; line-height:3.6rem; font-size:1.6rem; font-weight:var(--font-weight-bold); color:var(--font-color-black) }
.top-menu .snb-list .snb-list--item > a::after { position: absolute; left:12rem; top:6px; display:block; content: ""; width:2rem; height: 2rem; background: url('../images/arrow_small_close.svg') no-repeat center; transform: rotate(180deg); }
.top-menu .snb-list .snb-list--item.open > a::after { transform: rotate(0deg); }
.top-menu .snb-list .snb-list--item .snb-menu--list { display: none; grid-template-columns: 29rem 1fr; gap:3rem; justify-content: space-between; align-items: center; }
.top-menu .snb-list .snb-list--item.open .snb-menu--list { display: grid; padding-bottom: 2.2rem; }
.top-menu input { cursor:pointer }
.top-menu .inp-group:has(.switch-box) { position: relative; text-align: center; }
.top-menu .inp-group:has(.switch-box):not(:last-child)::after { content: ''; position: absolute; right:-.4rem; top:0; width: 1px; height: 100%; background: #DDDDEB; }
.top-menu .inp-group .switch-box { margin-top: .4rem; line-height: 2rem; }
.top-menu button { position: absolute; right: 0; top:.2rem; }

.modal-group .modal-list .form-side { flex:1; }
.modal-group .modal-list .inp-group { display: grid; grid-template-columns: 20rem 1fr; min-height: 3rem; align-items: center; }
.modal-group .modal-list { display: grid; grid-template-columns: repeat(2, 1fr); gap:2rem; }

/* SCR-WEB-06-002 */
.modal-score .modal-list--title { color:#777777; }
.score-chart-div .score-chart-total { bottom:12%; }
.modal-score .score-list { padding: 3rem 0; }
.score-list ul { display: flex; }
.score-list li { flex:1; text-align: center; position: relative; }
.score-list li:not(:last-child)::after { content: ''; position: absolute; right:0rem; top:0; width: 1px; height: 100%; background: #DDDDEB; }
.score-list .li-title { margin-bottom: .4rem; font-size: 1.4rem; line-height: 1.6rem; }
.score-list .li-text { font-size: 2.0rem; font-weight: 700; }
.modal-score.modal .notice-title { display: flex; align-items: center; gap:.6rem; }
.modal-score .driver-img { width: 2.8rem; height: 2.8rem; border-radius: 50%; overflow: hidden; object-fit: cover; }

.calendar-div { display: flex; flex-direction: column; }
.calendar-div b { text-align: center; font-size: 2.2rem; }
.calendar-div table { text-align: center; font-size: 1.3rem; }
.calendar-div table th { padding: .4rem 0; line-height: 1.6rem; }
.calendar-div table td { padding: .6rem 0; line-height: 2.8rem; font-weight: 700; color:#306FF2; }
.calendar-div th:nth-child(1) { color:var(--WarningRed-color); }

/* SCR-WEB-07-003 */
.modal-title { display: flex; justify-content: space-between; }
.modal-title > div { display: flex; gap:.6rem; align-items: center; font-weight: 700; }
.modal-title input { display: inline-block; margin-right: 2.4rem; width: 15rem; height: 3rem; border-top: 1px solid #DEDEDE; border-radius: .6rem; }

.photo-grid { grid-template-columns: auto auto !important; justify-content: space-between; }

.custom-select-box { position: relative; }
.custom-select-box > div { z-index: 9; position: absolute; bottom:0; left: 0; transform: translateY(100%); width: 100%; border-radius: .6rem; border:1px solid var(--border-color-GreyDE); background: var(--bg-white-color); overflow: hidden; box-shadow: 0px 4px 4px 0px #00000026; }
.custom-select-box ul { padding: .5rem 0; max-height: 20rem; overflow-y: auto; }
.custom-select-box li { padding: .3rem 1rem; }
.custom-select-box li:hover { background: var(--bg-row-hover); }
.custom-select-box .check-box label { display: block; width: 100%; font-weight: 400; color:var(--black-color); }
.custom-select-box .custom-select { display: none; }
.custom-select-box.open .custom-select { display: block; }
.custom-select-selected { display: flex; align-items: center; width: 100%; min-height: 3rem; max-height: 3rem; padding: 0.5rem 3rem 0.5rem 1rem; background: var(--bg-white-color) url('../images/select_arrow_down.svg') no-repeat right 0.7rem top 50% / auto 1.3rem; border:1px solid var(--border-color-GreyDE); border-radius: .6rem; font-weight: 400; cursor: pointer; font-size: 1.3rem; font-family:"SamsungOne",'SamsungOne','맑은 고딕', 'Malgun Gothic',"돋움", dotum, arial, sans-serif; text-align: left; overflow: hidden;align-items: inherit;    line-height: 2rem; word-break: break-all;}
.custom-select-buttons { display: flex; height: 3rem; border-top: 1px solid var( --border-color-GreyDE); }
.custom-select-buttons button { flex:1; line-height: 3rem; text-align: center; }
.custom-select-buttons .bg-black { color:var(--white-color); }

/* Driver Editor modal-list로 인한 UI 깨짐 방지 */
.driver-create .custom-select-box ul li,.driver-detail .custom-select-box ul li { margin-bottom: 0px; padding: .3rem 1rem;}

.top-filter-card .subtab ul { grid-template-columns: repeat(7, minmax(70px, 1fr)); }
.top-filter-card .subtab li { padding: 1.2rem 1.8rem; background: var(--bg-white-color); border:1px solid var(--border-color-Grey); border-radius: 1rem; }

/* 그리드 하이라이트 */
.rMateH5__DataGridBaseContentHolder .rMateH5__UIElement:nth-of-type(4) .rMateH5__DataGridBackground:nth-of-type(1) {background-color: var(--bg-row-click) !important; filter: alpha(opacity=40); opacity: 0.4;}
.rMateH5__DataGridBaseContentHolder .rMateH5__UIElement:nth-of-type(4) .rMateH5__DataGridBackground:nth-of-type(2) {background-color: var(--bg-BlueGrey30-color) !important; filter: alpha(opacity=40); opacity: 0.4;}
.rMateH5__HtmlItemRenderer span,.rMateH5__HtmlItemRenderer, .rMateH5__DataGridItemRenderer {color:var(--font-color-black) !important}
.rMateH5__IndexNoItemRenderer  {color:var(--font-color-black) !important}

/*progress check */
.engMobile {z-index: 9; display:none; position: absolute;  right: 0; top: 0; width: 450px; background-color: var(--bg-white-color); height: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); border-left: solid 1px var(--border-color-GreyDE);}
.engMobile .header-box, .engMobile .status { display: flex; flex-direction: row; justify-content: space-between; padding: 0px 30px 0px 0; color: var(--font-color-black); align-items: center;background-color:#efefef}
.engMobile .header-box .close-button { width: 26px; height: 26px; cursor: pointer;}
.engMobile .header-box .close-button i { margin: 0 auto; display: block; margin-top: 8px; content: ""; background: url(../images/ico_dropdown.svg) no-repeat fixed center; width: 16px; height: 9px; filter: brightness(70%); transform: rotate(-90deg);}

/* POD Mgmt */
.signature.modal img { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0 auto; }

.pictures.modal .img-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 5px 0px; }
.pictures.modal .img-viewer img { max-width: 100%; padding-right: 5px; }
.pictures.modal .img-list .img-item { position: relative; min-width: 100px; height: 100px; }
.pictures.modal .img-list .img-item:hover .overlay { opacity: 0.8; }
.pictures.modal .img-list .img-item:hover { cursor:pointer; }
.pictures.modal .img-list .img-item img { object-fit: cover; height: 100%; width: 100%; width: 100px;}
.pictures.modal .img-list .img-item .overlay { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; background: var(--bg-black-color); color: var(--white-color); opacity: 0; transition: opacity 0.4s; font-size: 12px; word-break: break-all; padding: 5px; }
.pictures.modal .img-explorer { display: flex; gap: 10px; height: 100%; }
.pictures.modal .img-viewer { width: 100%; height: 100%; overflow-y: scroll;}

.collect-sn.modal .img-detail { width:100%; overflow:hidden; display:flex; align-items: center; justify-content: center;}
.collect-sn.modal .img-detail img { text-align:center; width: 400px; height:400px; border: solid 1px var(--bg-GreyCC-color); border-radius: 6px;}


/* Installation Order Create */

.io-form .product { display: grid; grid-template-columns: 10.2rem 20rem auto 5rem 2rem; grid-template-rows: 1fr 1fr; align-items: center; gap: 0.5rem 1rem; padding: 20px;}
.io-form > div:first-child dl { border-bottom: 1px solid #F4F4F4; }
.io-form .product dt:nth-child(6) { grid-row: 2 / 2; }
.io-form .product .full { grid-column: 2/6; }
.word-break-all { word-break: break-all; }

.io-form .symptom { display: grid; grid-template-columns: 10rem auto 10rem auto 10rem auto; grid-template-rows: 1fr 1fr; align-items: center; gap: 0.5rem 1rem; padding: 20px;}
.io-form .symptom dt:nth-child(7) { grid-row: 2 / 2; }
.io-form .symptom .full { grid-column: 2/7;}


/* Order List */

/* tree custom select */
.custom-select .tree { width: 100%; overflow: scroll; max-height: 40rem }
.custom-select .search-wrap { padding: 5px 5px 0px 5px;}
.custom-select .tree li > div { margin-left: 0; display: flex; align-items: center; width:100%;padding: 2px 0 }
.custom-select .tree ul { padding-left: 0.2rem; padding-top: 0px; padding-bottom: 0px;}
.custom-select .tree ul li { width: 100%;}
.custom-select .tree .check-box {width:100%;}
.custom-select .tree li { padding-top: 0px; padding-bottom: 0px;}
.custom-select .tree .level {  display: inline-block; background-repeat: no-repeat;background-size: 16px 16px !important; width: 16px;height: 16px; align-items: center;  position: relative; content:""; max-width: 100%; background-image:url('../images/tree_arrowDown.svg'); background-repeat: no-repeat; }
.custom-select .tree .level:hover { cursor: pointer;}
.custom-select .tree .level.inactive { transform: rotate(180deg);}
.custom-select .tree .leaf { font-size:var(--font-xxs); display:inline-flex; flex-wrap:wrap; align-items: center;  position: relative; gap:0.4rem }
.custom-select .tree .leaf::before { content:""; width: 1.6rem; height: 1.6rem; }

.drp-calendar .radio-box label { width: 100% !important;}
.result-image {width:100%;border:solid 1px var(--border-color-Grey)}
.icon-enter { background: url('../images/ico_enter_key.png') no-repeat !important; background-position: center;height:2rem; cursor:pointer; background-size:70% !important}

/* .text-white { color: var(--font-color-KeyBlue) !important;} */

/* rMate column header highlighting */
.grid-bkg-blue { padding:18px !important; top:0px !important; color: var(--font-color-black) !important; background-color: var(--bg-GreyF4-color) !important;}
.grid-bkg-blue span { margin-top: 9px; }
.grid-bkg-blue-left div, .grid-bkg-blue div { margin-top: 9px; }
.grid-bkg-blue-left { padding:18px !important; top:0px !important; color: var(--font-color-black) !important; background-color: var(--bg-GreyF4-color) !important}
.grid-bkg-blue-left span { margin-top: 9px; text-align:left !important }

.grid-bkg-blue-2line { padding:23px !important; top:0px !important; color: var(--font-color-black) !important; background-color: var(--bg-GreyF4-color) !important;}
.grid-bkg-blue-2line span { margin-top: 5px; }
.grid-bkg-blue-2line-left div, .grid-bkg-blue-2line div { margin-top: 5px; }
.grid-bkg-blue-2line-left span { margin-top: 5px; text-align:left !important }


.modal.list-custom-modal .check-box-grid {display: grid; grid-template-columns: repeat(3, 1fr);width:100%}

.driverimg img{width:30px}
.driver-img-wrap{width:30px;height:30px; overflow:hidden;border:solid 1px #ccc;  border-radius:15px}

.driver-list-wrap { overflow: auto; padding-right: 10px; }

.addr .addr-title { height: 65px;}

.qr-auth {display: flex;justify-content: space-around;padding-top:2rem}

.rtn-place-dashboard { margin-top: 2rem; display: flex; width: 100%; gap: 0.5rem; justify-content: space-between; font-size: var(--font-size-tiny); }
.rtn-place-dashboard > div { width: 100%; } 
.rtn-place-dashboard > div .total { height: 3rem; color: var(--white-color); display: flex; align-items:center; justify-content: center; gap: 0.4rem; border-radius: 1rem 1rem 0 0;}
.rtn-place-dashboard > div .total span:nth-child(2) { font-weight: var(--font-weight-bold); }
.rtn-place-dashboard > .return .total { background-color: #00A168; }
.rtn-place-dashboard > div .rtn-place-items { height: 8rem; display: inline-flex; align-items:center; justify-content: space-between; background: var(--bg-white-color); padding: 1rem; border-radius: 0 0 1rem 1rem; gap:0.2rem;}
.rtn-place-dashboard .rtn-place-items {width:100%}
.rtn-place-dashboard .total { background-color: #099CBA; font-size: var(--font-xs);  font-weight: var(--font-weight-bold);}
.rtn-place-dashboard .rtn-place-items dl { width:33%; padding:1rem 0;cursor:pointer;border-radius:0.6rem}
.rtn-place-dashboard .rtn-place-items dl dt {text-align:center;padding-bottom:0.8rem;color:var(--font-color-BlueGrey80);font-size: var(--font-tiny);}
.rtn-place-dashboard .rtn-place-items dl dd {text-align:center; font-size:var(--font-xs); font-weight:bold;color: var(--font-color-black);}
.rtn-place-dashboard .rtn-place-items .pending { z-index: 2; width: 17%; background-color:var(--bg-white-color);border:solid 1px #ffb8b8;background-color:var(--bg-GreyFA-color);border-radius:1.4rem }
.rtn-place-dashboard .rtn-place-items .pending dt,.rtn-place-dashboard .rtn-place-items .pending dd{color: var(--font-color-WarningRed)}
.rtn-place-dashboard .rtn-place-items .card {border:solid 1px var(--border-color-Grey)}

.sub-box #btnPrevMonth{border:none !important}
.sub-box #btnNextMonth{border:none !important}

@media screen and (max-width:1520px) {
	.header .gnb > ul { column-gap:0 }
}

/*flatpicker 관련 CSS*/
.flatpickr-calendar {border-radius: 4px; width: 278px; margin-top: 7px;opacity: 0; display: none; text-align: center; visibility: hidden; padding: 8px; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-touch-action: manipulation; touch-action: manipulation; background: #fff; border: 1px solid var(--border-color-GreyDE);}
.flatpickr-calendar.open,.flatpickr-calendar.inline { opacity: 1; max-height: 640px; visibility: visible}
.flatpickr-calendar.open { display: inline-block; z-index: 99999}
.flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(.23, 1, .32, 1); animation: fpFadeInDown 300ms cubic-bezier(.23, 1, .32, 1)}
.flatpickr-calendar.inline { display: block; position: relative; top: 2px}
.flatpickr-calendar.static { position: absolute; top: calc(100% + 2px)}
.flatpickr-calendar.static.open { z-index: 999; display: block}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { -webkit-box-shadow: none !important; box-shadow: none !important}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6 }
.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0}
.flatpickr-calendar .hasWeeks .dayContainer { border-left: 0}
.flatpickr-calendar.hasTime .flatpickr-time { height: 40px; border-top: 1px solid #e6e6e6}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {height: auto}
.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after {  left: auto;  right: 22px}
.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after { left: 50%; right: 50%}
.flatpickr-calendar:before { border-width: 5px; margin: 0 -5px}
.flatpickr-calendar:after { border-width: 4px; margin: 0 -4px}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after {  bottom: 100%}
.flatpickr-calendar.arrowTop:before { border-bottom-color: #e6e6e6}
.flatpickr-calendar.arrowTop:after { border-bottom-color: #fff}
.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after { top: 100%}
.flatpickr-calendar.arrowBottom:before { border-top-color: #e6e6e6}
.flatpickr-calendar.arrowBottom:after { border-top-color: #fff}
.flatpickr-calendar:focus { outline: 0}
.flatpickr-wrapper { position: relative; display: inline-block}
.flatpickr-months { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox;  display: flex}
.flatpickr-months .flatpickr-month { background: transparent;  color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); /* height: 34px; */ /* height: 60px; */  line-height: 1; text-align: center; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1;  -ms-flex: 1;  flex: 1}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; cursor: pointer; position: absolute; top: 0; /* height: 34px; padding: 10px; */ z-index: 3; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9)}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled { display: none}
.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i {  position: relative}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {  /*  /*rtl:begin:ignore*/  left: 0    /*      /*rtl:end:ignore*/}   /*  /*rtl:begin:ignore*/ /*   /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month {  /*  /*rtl:begin:ignore*/  right: 0   /*     /*rtl:end:ignore*/ }   /*  /*rtl:begin:ignore*//*    /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover { color: #959ea9}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg {  fill: #f64747}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; display: none;}
.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path { -webkit-transition: fill .1s; transition: fill .1s; fill: inherit}
.numInputWrapper {position: relative; height: auto}
.numInputWrapper input,.numInputWrapper span { display: inline-block}
.numInputWrapper input { width: 100%}
.numInputWrapper input::-ms-clear { display: none}
.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none}
.numInputWrapper span { position: absolute; right: 0; width: 14px; padding: 0 4px 0 2px; height: 50%; line-height: 50%; opacity: 1; cursor: pointer; border: 1px solid rgba(57, 57, 57, 0.15); -webkit-box-sizing: border-box; box-sizing: border-box}
.numInputWrapper span:after { display: block; content: ""; position: absolute}
.numInputWrapper span.arrowUp {
    width: 34px;
    height: 34px;
  top: 0;
  transform: translate(100%) rotate(90deg);
  display: flex; align-items: center; justify-content: center;
  border: 0
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%
}

.numInputWrapper span.arrowDown {
    width: 34px;
    height: 34px;
  left:0;
  top:0;
  transform: translateX(-100%) rotate(90deg) ;
  display: flex;
  align-items: center;
  justify-content: center;
  border:0;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%
}

.numInputWrapper span svg {
  width: inherit;
  height: auto
}

.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5)
}

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05)
}

.numInputWrapper:hover span {
  opacity: 1
}

.flatpickr-current-month {
  /* font-size: 135%; */
  font-size: 14px;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  /* position: absolute;
  width: 75%;
  left: 12.5%; */
  display: flex;
  justify-content: center;
  padding: 0 15px;
  line-height: 1;
  height: 34px;
  line-height: 34px;
  /* display: inline-block; */
  text-align: center;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: .5ch;
  padding: 0
}

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05)
}

.flatpickr-current-month .numInputWrapper {
  max-width: 60px;
  display: inline-block
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9)
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9)
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: center;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 .5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05)
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.80);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder
}

.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  /* width: 307.875px */
}

.flatpickr-days:focus {
  outline: 0
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  /* width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1
}

.dayContainer+.dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
  box-shadow: -1px 0 0 #e6e6e6
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--bs-gray-light);
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 37px;
  line-height: 37px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background-color: var(--bs-blue);
  border-color: var(--bs-blue);
  color: var(--bs-white);
}

.flatpickr-day.today {
  /* border-color: #959ea9 */
  position: relative;
  bottom: 0px;
  color: var(--bs-blue);
  font-weight: 700;
  font-size: 16px;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  /* border-color: #959ea9;
  background: #959ea9; */
  background-color: var(--bs-blue);
  border-color: var(--bs-blue);
  color: var(--bs-white);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  /* background: #569ff7; */
  background-color: var(--bs-blue);
  border-color: var(--bs-blue);
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  font-weight: 700;
}
.flatpickr-day.today.selected {
  color: var(--color-white)!important;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px
}

.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0
}

.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
  box-shadow: -10px 0 0 #569ff7
}

.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px
}

.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  /* color: rgba(57, 57, 57, 0.1) */
  color: var(--flat-disabled);
}

.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7
}

.flatpickr-day.hidden {
  visibility: hidden
}

.rangeMode .flatpickr-day {
  margin-top: 1px
}

.flatpickr-weekwrapper {
  float: left
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none
}

.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both
}

.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%
}

.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold
}

.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400
}

.flatpickr-time input:focus {
  outline: 0;
  border: 0
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center
}

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee
}

.flatpickr-input[readonly] {
  cursor: pointer
}

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}


.flatpickr-monthSelect-months {
  margin: 10px 1px 3px 1px;
  flex-wrap: wrap;
}

.flatpickr-monthSelect-month {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  justify-content: center;
  padding: .4rem;
  margin:1px;
  font-size: 1.3rem;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  text-align: center;
  width: calc((100% - 6px)/3);
}

.flatpickr-monthSelect-month.flatpickr-disabled {
	color: #eee;
}

.flatpickr-monthSelect-month.flatpickr-disabled:hover,
.flatpickr-monthSelect-month.flatpickr-disabled:focus {
	cursor: not-allowed;
	background: none !important;
}

.flatpickr-monthSelect-theme-dark {
  background: #3f4458;
}

.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
  color: #fff;
}

.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
  color: #fff;
  fill: #fff;
}

.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
  color: rgba(255, 255, 255, 0.95);
}

.flatpickr-monthSelect-month.today {
  border-color: #959ea9;
}


.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
  background: #646c8c;
  border-color: #646c8c;
}

.flatpickr-monthSelect-month.today:hover,
.flatpickr-monthSelect-month.today:focus {
  background: #959ea9;
  border-color: #959ea9;
  color: #fff;
}


.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
  background: #80cbc4;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #80cbc4;
}

.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.startRange { background: var(--bg-KeyBlue-color); color:white; }


/* notice */
.mob-detail {width: 430px; border:solid 3px var(--BlueGrey80-color); border-radius:25px; padding:15px 5px 12px 5px}
.mob-detail-wrap {padding:0 10px}

/* grid drag */
.rMateH5__HtmlItemRenderer {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
.rMateH5__DataGridItemRenderer {
	-webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;		
}


/* VOC */
.voc-registrant-list { display: flex; flex-direction: column; gap: 2rem; font-weight: 400; font-size: var(--font-tiny);}
.voc-registrant-list .comments-header { display:flex; gap: 2rem; align-items: center; }
.voc-registrant-list .registrant-tags { display: flex; gap:4px;}
.voc-registrant-list .content { flex:1; margin-top: 0.4rem; padding:1.6rem; border:1px solid var(--bg-BlueGrey30-color); border-radius:0.8rem; }
.chips { border:1px solid var(--bg-BlueGrey30-color); border-radius:0.6rem; padding: 3px 10px;min-width: 5rem; text-align: center; font-weight: 400;}

.file-link { text-decoration: underline; color: var(--BrandBlue-color); cursor:pointer;}